:root { color-scheme:light; font:14px/1.6 "Segoe UI","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif; color:#243047; background:#111018; --blue:#2863e7; --muted:#8794a8; --line:#e8edf4; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; min-height:100svh; padding:72px 20px 40px; display:grid; place-items:center; -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:default; } [hidden] { display:none!important; } :focus-visible { outline:3px solid #a7c2fb; outline-offset:3px; } ::selection { background:#dce8ff; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.top-links { position:fixed; right:30px; top:24px; display:flex; align-items:center; gap:22px; z-index:2; } .tool-download,.tool-link { display:inline-flex; align-items:center; gap:12px; padding:6px 2px; border:0; background:transparent; color:#526b92; text-decoration:none; font-size:12px; font-weight:600; } .tool-download:hover,.tool-link:hover { color:var(--blue); } .tool-download span { font-size:17px; font-weight:400; }
.app-window { position:relative; z-index:1; width:min(440px,100%); min-width:0; padding:27px 30px 30px; border:1px solid #e4e9f0; border-radius:19px; background:white; box-shadow:0 14px 46px -28px #687c9f35; } .window-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .wordmark { display:inline-flex; align-items:center; gap:3px; color:#14263e; } .wordmark img { width:34px; height:24px; object-fit:contain; } .wordmark strong { font-size:18px; line-height:1; font-weight:800; letter-spacing:.3px; }
.status-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border:1px solid var(--line); border-radius:20px; color:#929cad; background:#fafbfc; font-size:10px; white-space:nowrap; } .status-dot { width:5px; height:5px; border-radius:50%; background:#abb5c4; } .status-pill.is-busy { color:var(--blue); border-color:#dce7ff; background:#f6f9ff; } .status-pill.is-busy .status-dot { background:var(--blue); } .status-pill.is-verified { color:#2c8468; border-color:#dcefe6; background:#f5fbf8; } .status-pill.is-verified .status-dot { background:#3d9e7b; }
.identity-gate { padding:25px 0 3px; text-align:center; } .dual-mark { position:relative; width:84px; height:84px; margin:0 auto 20px; isolation:isolate; } .dual-mark img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } .lo-half { clip-path:inset(0 50% 0 0); } .color-half { clip-path:inset(0 0 0 50%); } h1 { margin:0 0 28px; font-size:22px; font-weight:650; letter-spacing:-.3px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 16px; border:1px solid transparent; border-radius:9px; font-size:12px; font-weight:600; background:#f5f7fb; color:#43556f; transition:background-color 140ms,border-color 140ms; } .button-primary { color:white; background:var(--blue); border-color:var(--blue); } .button-primary:hover:not(:disabled) { background:#2057d0; border-color:#2057d0; } .button:disabled { color:#9aa6b8; background:#f0f3f7; border-color:#e7ecf3; } .connect-button,.full-width { width:100%; }
.device-facts { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:25px 0 17px; min-width:0; } .device-facts>div { display:grid; gap:3px; min-width:0; } .device-facts span { color:#98a3b5; font-size:10px; } .device-facts strong { font-size:12px; font-weight:500; overflow-wrap:anywhere; } .mono { font-family:Consolas,ui-monospace,monospace; } .text-button { padding:3px 0; border:0; color:#788ca9; background:transparent; font-size:11px; white-space:nowrap; } .text-button:hover:not(:disabled) { color:var(--blue); } .text-button:disabled { color:#b2bac8; }
.service-tabs { display:flex; padding:3px; border:1px solid #e8edf4; border-radius:9px; background:#f5f7fa; } .nav-tab { flex:1; min-height:34px; border:0; border-radius:6px; background:transparent; color:#8b96a8; font-size:12px; } .nav-tab[aria-selected=true] { background:white; color:var(--blue); box-shadow:0 1px 5px #778baa17; font-weight:600; } .service-panel { margin-top:22px; min-width:0; }
fieldset { padding:0; margin:0; min-width:0; border:0; } #credential-fields>label,.invite-content>label { display:block; margin-bottom:7px; color:#60718a; font-size:12px; } input[type=text],input[type=password] { display:block; width:100%; height:44px; border:1px solid #dee5f0; border-radius:9px; padding:9px 12px; color:#2b3c57; background:white; font-size:13px; } input::placeholder { color:#adb6c5; } input:focus { border-color:#8daff2; outline:2px solid #ebf2ff; outline-offset:1px; } input[aria-invalid=true] { border-color:#ca8990; } input:disabled { background:#f6f8fb; } .masked-input { position:relative; } .masked-input input { padding-right:48px; } .reveal-button { position:absolute; top:4px; right:5px; height:36px; padding:0 8px; border:0; border-radius:5px; background:transparent; color:#95a2b7; font-size:10px; } .reveal-button:hover { color:var(--blue); }
.invite-step { max-height:0; overflow:hidden; opacity:0; transform:translateY(-5px); transition:max-height 1s ease,opacity 1s ease,transform 1s ease; visibility:hidden; } .invite-step.is-open { max-height:106px; opacity:1; transform:translateY(0); visibility:visible; } .invite-content { padding-top:16px; } .agreement-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:20px; color:#8190a6; font-size:11px; } .agreement-row input { width:14px; height:14px; margin:0 3px 0 0; accent-color:var(--blue); } .agreement-row label { cursor:pointer; } .agreement-row button { font-size:11px; color:#527cbf; } #activate-button { margin-top:19px; }
.form-state { margin:10px 0 0; color:#91a0b7; font-size:11px; line-height:1.8; overflow-wrap:anywhere; } .form-state.is-valid { color:#438a72; } .field-error { margin:10px 0 0; color:#ae5864; font-size:11px; overflow-wrap:anywhere; } .empty-state { margin:24px 0; color:#9ba7ba; font-size:12px; text-align:center; }
.software-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); } .software-row:first-child { padding-top:0; } .software-info strong { display:block; font-size:14px; font-weight:650; } .software-info>span { display:block; margin-top:3px; color:#98a4b7; font-size:10px; overflow-wrap:anywhere; } .button-download { min-height:34px; padding:5px 15px; border-color:#dce7fb; background:#f5f8ff; color:var(--blue); font-size:11px; } .button-download:hover:not(:disabled) { border-color:var(--blue); background:var(--blue); color:white; } .artifact-checksum { grid-column:1/-1; color:#a3aec0; font-size:9px; } .artifact-checksum summary { width:max-content; cursor:pointer; } .artifact-checksum code { display:block; margin-top:5px; color:#8e9cb1; font-size:9px; overflow-wrap:anywhere; user-select:all; }
.download-progress { padding-top:18px; } .download-progress-heading { display:flex; align-items:center; gap:8px; font-size:10px; color:#8293ad; } .download-progress-heading strong { margin-right:auto; font-weight:500; } progress { display:block; width:100%; height:6px; margin-top:10px; overflow:hidden; border:0; border-radius:6px; background:#edf1f8; accent-color:var(--blue); } progress::-webkit-progress-bar { border-radius:6px; background:#edf1f8; } progress::-webkit-progress-value { border-radius:6px; background:var(--blue); }
.query-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; } .membership { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:#929daa; } .tier-symbol { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border:1px solid #d9dfe7; border-radius:8px; color:#a0a7b3; background:#f3f5f8; font-size:15px; } .level-1 .tier-symbol { color:#b57e67; border-color:#edcfbf; background:#f7e5da; } .level-2 .tier-symbol { color:#60a7d7; border-color:#bcdef5; background:#e7f5ff; } .level-3 .tier-symbol { color:#be9134; border-color:#ecd59d; background:#fff6dc; } .level-4 .tier-symbol { color:#ddb760; border-color:#8b7440; background:#202228; box-shadow:inset 0 0 0 2px #2e2c26; } .level-1 { color:#a17e6c; } .level-2 { color:#5b9ac5; } .level-3 { color:#a88742; } .level-4 { color:#8b7440; }
.account-facts { display:grid; gap:13px; margin:23px 0 18px; padding-bottom:18px; border-bottom:1px solid var(--line); } .account-facts>div { display:flex; align-items:center; justify-content:space-between; gap:12px; } dt { color:#99a5b7; font-size:11px; } dd { margin:0; color:#62748f; font-size:12px; overflow-wrap:anywhere; } .account-product { padding:13px 0; border-bottom:1px solid var(--line); } .account-product:last-child { border-bottom:0; padding-bottom:0; } .account-product header { display:flex; justify-content:space-between; align-items:center; gap:10px; } .account-product strong { font-size:13px; font-weight:600; } .account-product .product-status { font-size:10px; color:#8d9cb1; } .account-product.is-active .product-status { color:#458b73; } .product-expiry { margin:6px 0 0; color:#94a1b5; font-size:10px; }
.notice { margin-top:18px; padding:10px 12px; border:1px solid #e1eafa; border-radius:8px; background:#f7faff; color:#7c91b3; font-size:11px; overflow-wrap:anywhere; } .notice-error { color:#ad5e68; border-color:#f0dfe2; background:#fffafa; } .notice-success { color:#4a8e75; border-color:#e0eee7; background:#f8fcfa; }
.agreement-dialog { width:min(600px,calc(100% - 32px)); max-height:min(75vh,650px); margin:auto; padding:24px; border:1px solid var(--line); border-radius:15px; color:#293a55; box-shadow:0 20px 70px #263d6b29; } .agreement-dialog::backdrop { background:#1c2e4a44; } .agreement-dialog header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:17px; } .agreement-dialog h2 { font-size:17px; margin:0; } #agreement-unavailable { color:#8b97aa; font-size:12px; } .agreement-text { white-space:pre-wrap; overflow-wrap:anywhere; color:#6e7e96; font-size:13px; line-height:1.9; }
@media(max-width:480px) { body { padding:70px 16px 28px; } .top-links { right:19px; top:18px; gap:19px; } .app-window { padding:24px; border-radius:17px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }

/* Reserve layout while existing inline logos decode; no timer drives this. */
.branding-pending .app-window { visibility:hidden; }
.wordmark img { object-fit:cover; }

/* Loading is local to the actual request; navigation remains interactive. */
.is-loading { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.is-loading::before { content:""; flex:none; width:11px; height:11px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:request-spin .8s linear infinite; }
@keyframes request-spin { to { transform:rotate(360deg); } }

/* Each product owns its tier; generated artwork is embedded, never fetched. */
.query-title { color:#73849d; font-size:12px; }
.product-identity { display:grid; gap:5px; }
.tier-image { display:block; flex:none; width:44px; height:44px; object-fit:contain; }
.account-product .membership { min-height:44px; gap:9px; }
.product-tier-label { white-space:nowrap; font-size:11px; }
.account-product .product-expiry { margin-top:8px; line-height:1.7; }

/* Metal tier palette: iron, bronze, silver; gold and VIP remain unchanged. */
.guide-dialog { width:min(780px,calc(100% - 32px)); max-height:calc(100dvh - 48px); padding:0; margin:auto; border:1px solid var(--line); border-radius:18px; background:white; color:#35465e; box-shadow:0 24px 90px #263d6b2b; overflow:auto; overscroll-behavior:contain; }
.guide-dialog::backdrop { background:#253b5c55; }
.guide-header { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 30px 18px; background:white; border-bottom:1px solid var(--line); }
.guide-eyebrow { margin:0 0 3px; color:#8c9bb0; font-size:11px; letter-spacing:.6px; }.guide-header h2 { margin:0; color:#1d304c; font-size:23px; }
.guide-close { padding:7px 13px; border:1px solid #e2e9f3; border-radius:8px; background:#f8faff; color:#667e9e; font-size:12px; }
.guide-content { padding:22px 30px 28px; font-size:14px; line-height:1.85; }.guide-intro { margin:0; color:#75879e; }.guide-index { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px; }.guide-index a { padding:4px 11px; border-radius:7px; background:#f2f6fd; color:#5274a6; text-decoration:none; font-size:12px; }
.guide-step { padding:24px 0; border-bottom:1px solid var(--line); scroll-margin-top:110px; }.guide-step h3 { display:flex; align-items:center; gap:11px; margin:0 0 15px; font-size:17px; color:#243b5c; }.guide-step h3>span { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:#edf3ff; color:#2863e7; font-size:12px; }.guide-step ol { padding-left:22px; margin:0; }.guide-step li+li { margin-top:8px; }.guide-step p { margin:10px 0; }
.guide-step figure { margin:20px 0 0; padding:14px; border:1px solid #e7edf6; border-radius:12px; background:#f8faff; }.guide-step svg { display:block; width:100%; height:auto; font-family:"Segoe UI","Microsoft YaHei",sans-serif; }.guide-step figcaption { margin-top:5px; text-align:center; color:#8b9bb1; font-size:11px; }.guide-step .guide-note { margin:17px 0 0; padding:12px 15px; border-radius:9px; background:#f3f7fc; color:#73849c; font-size:12px; }
.guide-tiers { margin:17px 0 0; }.guide-tiers>div { display:grid; grid-template-columns:210px 1fr; gap:16px; align-items:center; padding:10px 0; border-bottom:1px solid #f0f3f8; }.guide-tiers>div:last-child { border-bottom:0; }.guide-tiers dt { display:flex; align-items:center; gap:10px; color:#3a4b66; }.guide-tiers strong { font-size:13px; font-weight:600; }.guide-tiers dd { font-size:12px; line-height:1.8; color:#7c8da4; }.guide-tiers .tier-image { width:40px; height:40px; }.guide-footer { padding-top:24px; font-size:12px; color:#8b9bb0; }
@media(max-width:480px) { .guide-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 28px); border-radius:14px; }.guide-header { padding:18px 19px 14px; }.guide-content { padding:18px 19px 22px; }.guide-step { padding:20px 0; }.guide-step figure { padding:7px; }.guide-tiers>div { grid-template-columns:1fr; gap:4px; }.guide-tiers dd { padding-left:50px; } }
.level-0 { color:#68717c; }
.level-1 { color:#9b6f49; }
.level-2 { color:#818b97; }
.site-background { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; background:radial-gradient(ellipse at 50% 0%,#a5d8ff66 0%,#38bdf844 24%,#1e3fd866 45%,transparent 74%); }
.site-background[data-state=fallback] { visibility:visible; }.site-background[data-state=webgl] { background:none; }
.top-links .tool-download,.top-links .tool-link { min-height:42px; padding:8px 17px; border:1px solid #e8edf5; border-radius:999px; background:white; box-shadow:0 4px 18px #48668f0c; white-space:nowrap; }
.top-links { gap:10px; }