:root { --ink:#101a2d; --muted:#768197; --line:#e2e8f1; --paper:#fff; --wash:#f2f6fa; --violet:#5036c9; --violet-dark:#171c45; --lime:#b9f52d; --cyan:#20c9c4; --green:#18a878; --shadow:0 18px 55px rgba(40,53,84,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; background:var(--wash); background-image:linear-gradient(135deg,rgba(91,112,143,.05) 1px,transparent 1px),linear-gradient(45deg,rgba(91,112,143,.035) 1px,transparent 1px); background-size:22px 22px; }
button { font:inherit; cursor:pointer; }
.topbar { height:70px; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(28px,calc((100vw - 1320px)/2)); position:sticky; top:0; z-index:5; backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; letter-spacing:.06em; }.brand strong { display:block; font-size:14px; }.brand small { display:block; color:#93a0b3; font-size:8px; letter-spacing:.17em; margin-top:4px; }.brand-mark { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(145deg,#5548ec,#1c2145); box-shadow:0 7px 14px rgba(80,54,201,.22); }
.top-actions { display:flex; align-items:center; gap:10px; }.service-pill,.top-chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 13px; font-size:11px; color:#536074; }.service-pill { display:flex; gap:8px; align-items:center; }.service-pill i,.signal-copy i,.proxy-note i { width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 4px rgba(24,168,120,.12); }.top-chip { letter-spacing:.1em; font-size:9px; color:#9aa5b5; }
.page-shell { max-width:1320px; margin:0 auto; padding:34px 24px 42px; }.hero { min-height:310px; border-radius:28px; padding:42px 44px; color:#fff; background:radial-gradient(circle at 90% 10%,rgba(193,246,45,.1),transparent 30%),linear-gradient(120deg,#112b4c 0%,#1c214b 51%,#432594 100%); box-shadow:0 25px 58px rgba(35,29,91,.18); display:flex; justify-content:space-between; gap:36px; position:relative; overflow:hidden; }.hero:after { content:""; position:absolute; right:-90px; top:-150px; width:430px; height:430px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02); }.hero-copy,.hero-flow { position:relative; z-index:1; }.eyebrow { color:#b7c0e4; font-size:10px; font-weight:700; letter-spacing:.18em; display:flex; gap:12px; align-items:center; }.eyebrow span { color:var(--lime); border:1px solid rgba(185,245,45,.55); border-radius:99px; padding:4px 7px; font-size:9px; }.hero h1 { font-size:clamp(34px,5vw,68px); line-height:1.08; letter-spacing:-.04em; margin:22px 0 15px; }.hero h1 em { font-style:normal; color:var(--lime); }.hero-note { max-width:620px; color:#b8c5de; line-height:1.8; font-size:13px; margin:0; }.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }.tag-row span { border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.08); border-radius:99px; padding:7px 10px; font-size:9px; letter-spacing:.08em; color:#d4dcf4; }.hero-flow { width:310px; align-self:center; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:rgba(18,20,64,.35); overflow:hidden; }.hero-flow div { min-height:74px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.14); display:grid; grid-template-columns:1fr auto; align-items:center; }.hero-flow div:last-child { border-bottom:0; }.hero-flow small,.hero-flow span { color:#9da7cb; font-size:9px; letter-spacing:.13em; }.hero-flow span { grid-column:1 / -1; letter-spacing:0; margin-top:-13px; }.hero-flow b { font-size:24px; color:#fff; }
.signal-strip { margin:22px 0; min-height:135px; border:1px solid rgba(32,201,196,.27); border-radius:22px; padding:22px 28px; background:linear-gradient(120deg,rgba(234,248,249,.88),rgba(240,238,255,.9)); box-shadow:var(--shadow); display:grid; grid-template-columns:108px 1.4fr repeat(3,1fr); align-items:center; gap:18px; }.signal-orbit { width:86px; height:86px; border-radius:50%; display:grid; place-items:center; align-content:center; background:radial-gradient(circle,#fff 42%,transparent 43%),linear-gradient(135deg,#28c7b0,#c7ef61); box-shadow:0 0 0 9px rgba(32,201,196,.1),0 0 0 18px rgba(32,201,196,.05); font-weight:800; color:#173347; }.signal-orbit small { display:block; font-size:8px; color:#7a8997; letter-spacing:.14em; }.signal-copy p { color:#8e70da; font-weight:800; font-size:9px; letter-spacing:.15em; margin:0 0 8px; }.signal-copy h2 { margin:0 0 6px; font-size:20px; }.signal-copy span { color:#8a96a8; font-size:11px; }.signal-metric { border-left:1px solid rgba(120,137,159,.18); padding-left:20px; }.signal-metric small,.signal-metric span { display:block; color:#8b98aa; font-size:9px; }.signal-metric b { display:block; margin:8px 0 4px; font-size:20px; }
.work-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(320px,.9fr); gap:22px; align-items:start; }.left-column { display:grid; gap:22px; }.panel { background:rgba(255,255,255,.94); border:1px solid rgba(213,221,232,.92); border-radius:18px; box-shadow:var(--shadow); padding:27px; }.config-panel { border-top:3px solid var(--violet); }.status-panel { border-top:3px solid var(--lime); position:sticky; top:94px; }.panel-head { display:flex; align-items:center; gap:13px; margin-bottom:22px; }.panel-head.compact { margin-bottom:16px; }.panel-head h2 { font-size:18px; margin:0 0 4px; }.panel-head p { color:#8a96a8; font-size:11px; margin:0; }.section-code { width:30px; height:30px; border:1px solid #d8d1ff; background:#faf9ff; color:#806ee2; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:11px; }.panel-badge,.status-badge { margin-left:auto; padding:7px 10px; border-radius:99px; background:#f2f5fa; color:#778398; font-size:10px; }.status-badge.running { background:#fff4dc; color:#b47a20; }.status-badge.success { background:#e2f8ee; color:#16845f; }.status-badge.error { background:#ffebeb; color:#b64646; }.notice { border:1px solid #f1d8bd; background:#fffaf4; border-radius:12px; padding:12px 14px; font-size:11px; color:#8d7a68; display:flex; gap:14px; margin-bottom:18px; }.notice strong { color:#bc8e54; white-space:nowrap; }.config-card { border:1px solid #dbd7ff; padding:15px; border-radius:13px; display:flex; align-items:center; gap:12px; }.active-card { box-shadow:0 0 0 2px rgba(93,63,219,.12); }.card-icon { width:34px; height:34px; border-radius:10px; background:#e9e5ff; color:#664bda; display:grid; place-items:center; font-weight:800; }.card-icon.soft { background:#e7f8fa; color:#16a8a4; }.config-card strong,.proxy-head strong { font-size:13px; }.config-card p,.proxy-head p { color:#8a96a8; font-size:10px; margin:4px 0 0; }.check { margin-left:auto; color:#fff; background:var(--green); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }.field-grid label>span { display:block; color:#586477; font-size:11px; font-weight:700; margin-bottom:7px; }.read-field { min-height:54px; background:#f6f8fc; border:1px solid #e0e6ef; border-radius:10px; padding:10px 12px; }.read-field b { display:block; font-size:12px; }.read-field small { display:block; color:#9ba6b7; font-size:9px; margin-top:4px; }.proxy-card { margin-top:18px; border:1px solid #cceff3; background:linear-gradient(135deg,#f7ffff,#f6f3ff); border-radius:14px; padding:16px; }.proxy-head { display:flex; align-items:center; gap:12px; }.toggle { margin-left:auto; width:38px; height:21px; border-radius:99px; padding:3px; background:#dce5f1; }.toggle.on { background:#19b890; }.toggle i { display:block; width:15px; height:15px; border-radius:50%; background:#fff; transform:translateX(17px); }.proxy-note { border-top:1px solid #e2eaf0; padding-top:11px; margin-top:13px; color:#82909f; font-size:10px; display:flex; align-items:center; gap:8px; }.action-row { display:flex; gap:10px; margin-top:22px; }.primary-button,.secondary-button,.primary-small,.text-button { border:0; border-radius:9px; padding:12px 18px; font-weight:700; font-size:12px; }.primary-button { flex:1; color:#fff; background:linear-gradient(110deg,#6040e8,#3926b5); box-shadow:0 11px 24px rgba(83,53,207,.22); }.primary-button:hover,.primary-small:hover { filter:brightness(1.08); }.primary-button:disabled { opacity:.68; cursor:wait; }.secondary-button { color:#7c899b; border:1px solid #e1e7ef; background:#fff; }.text-button { margin-left:auto; background:#fff; border:1px solid #e1e7ef; color:#6956d5; padding:7px 10px; }.empty-state { padding:35px 10px 20px; text-align:center; color:#9aa6b7; font-size:12px; border-top:1px solid #edf0f5; }
.progress-ring { --progress:0deg; width:190px; height:190px; margin:26px auto 22px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--violet) var(--progress),#edf0f8 0); position:relative; }.progress-ring:after { content:""; position:absolute; inset:9px; border-radius:50%; background:#fff; box-shadow:0 6px 22px rgba(80,54,201,.08); }.progress-ring>div { position:relative; z-index:1; text-align:center; }.progress-ring strong { display:block; font-size:38px; letter-spacing:-.05em; }.progress-ring span { display:block; color:#9aa5b5; font-size:10px; margin-top:5px; }.progress-meta { display:flex; justify-content:space-between; font-size:10px; color:#8b98a8; }.progress-meta b { color:#6049d6; }.progress-bar { background:#edf1f6; border-radius:99px; height:7px; overflow:hidden; margin:11px 0 22px; }.progress-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#7455f4,var(--lime)); transition:width .3s ease; }.timeline { background:#111a2d; border-radius:13px; min-height:180px; max-height:285px; overflow:auto; padding:17px; color:#dbe4f0; }.timeline-empty { color:#687791; font-size:11px; text-align:center; padding:60px 10px; }.timeline-row { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07); }.timeline-row:last-child { border-bottom:0; }.timeline-dot { width:7px; height:7px; border-radius:50%; background:#7685a1; margin-top:5px; flex:none; }.timeline-row.success .timeline-dot { background:var(--lime); }.timeline-row.error .timeline-dot { background:#ff8c8c; }.timeline-row small { color:#72829d; font:10px ui-monospace,monospace; }.timeline-row p { margin:3px 0 0; font-size:10px; line-height:1.5; color:#c7d0df; word-break:break-word; }.result-card { margin-top:18px; border:1px solid #ccefdc; background:#f5fffa; border-radius:13px; padding:15px; }.result-head span { color:#199967; font-size:9px; letter-spacing:.12em; }.result-head b { display:block; margin-top:5px; font-size:13px; }.result-url { margin:12px 0; border:1px solid #d5eee0; background:#fff; padding:10px; border-radius:8px; color:#537165; font:10px ui-monospace,monospace; word-break:break-all; max-height:74px; overflow:auto; }.result-actions { display:flex; gap:8px; }.result-actions button { flex:1; padding:9px 8px; font-size:10px; }.primary-small { background:#1ba879; color:#fff; }.spinner { display:inline-block; width:12px; height:12px; margin-right:6px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; }@keyframes spin { to { transform:rotate(360deg); } }
footer { display:flex; justify-content:space-between; color:#929eae; font-size:9px; letter-spacing:.13em; padding:28px 0 0; } footer span:last-child { letter-spacing:0; }
.eligibility-card { margin-top:18px; border:1px solid #eadcfb; background:#fbf9ff; border-radius:12px; padding:13px 14px; display:flex; align-items:center; gap:12px; }.eligibility-card strong { font-size:12px; }.eligibility-card p { color:#8a96a8; font-size:10px; margin:4px 0 0; }.eligibility-badge { margin-left:auto; padding:6px 9px; border-radius:99px; background:#fff1df; color:#a86d1e; font-size:10px; font-weight:700; }.eligibility-badge.ready { background:#e2f8ee; color:#16845f; }.eligibility-badge.blocked { background:#ffebeb; color:#b64646; }
@media (max-width:900px) { .hero { padding:32px 28px; flex-direction:column; min-height:0; }.hero-flow { width:100%; }.signal-strip { grid-template-columns:90px 1fr 1fr; }.signal-metric:nth-last-child(-n+2) { display:none; }.work-grid { grid-template-columns:1fr; }.status-panel { position:static; }.top-chip { display:none; } }
@media (max-width:600px) { .topbar { height:60px; padding:0 15px; }.brand-mark { width:32px; height:32px; }.brand strong { font-size:12px; }.service-pill { padding:7px 9px; }.page-shell { padding:16px 12px 28px; }.hero { border-radius:18px; padding:27px 20px; }.hero h1 { font-size:38px; }.hero-note { font-size:12px; }.signal-strip { grid-template-columns:1fr 1.3fr; padding:18px; gap:14px; }.signal-orbit { width:70px; height:70px; }.signal-metric { display:none; }.signal-copy h2 { font-size:16px; }.panel { padding:19px 16px; border-radius:15px; }.field-grid { grid-template-columns:1fr; gap:12px; }.action-row { flex-direction:column; }.secondary-button { width:100%; }.progress-ring { width:160px; height:160px; }.hero-flow div { min-height:64px; }.hero-flow b { font-size:20px; } footer { flex-direction:column; gap:8px; } }