:root {
  color-scheme: light;
  --nav: #111a30;
  --nav-soft: #1c2945;
  --paper: #f5f7fb;
  --surface: #fff;
  --ink: #19233a;
  --muted: #7d879a;
  --line: #e8ebf2;
  --violet: #6958f4;
  --cyan: #31cde0;
  --green: #159f78;
  --shadow: 0 18px 44px rgba(28, 44, 77, .055);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #9d94ff; outline-offset: 3px; }
[hidden] { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 850; letter-spacing: .07em; line-height: 1; }
.brand-light { color: #fff; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; flex: none; border-radius: 14px; background: linear-gradient(135deg, #8274ff, #38d6e8); box-shadow: 0 10px 27px #5246e653; color: #fff; font-size: 35px; line-height: 1; font-weight: 300; transform: rotate(-8deg); }
.brand-copy small { display: block; margin-top: 6px; color: #9ba8c2; font-size: 9px; font-weight: 700; letter-spacing: .27em; }
.eyebrow { display: inline-block; color: var(--violet); font-size: 10px; font-weight: 850; letter-spacing: .2em; }
.eyebrow-light { color: #87e2ed; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 46px; padding: 11px 19px; border: 1px solid transparent; border-radius: 13px; font-size: 13px; font-weight: 800; line-height: 1.2; white-space: nowrap; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(115deg, #7464fb, #5b69eb); box-shadow: 0 11px 22px #6558ef36; }
.button-primary:hover { box-shadow: 0 15px 27px #6558ef55; }
.button-outline { border-color: #dcdff0; background: #fff; color: var(--violet); }
.button-wide { width: 100%; justify-content: space-between; min-height: 51px; }
label { display: grid; gap: 8px; font-size: 12px; font-weight: 750; color: #5f6a80; }
input:not([type=checkbox]), select, textarea { width: 100%; min-height: 45px; padding: 11px 13px; border: 1px solid #dfe3ed; border-radius: 11px; background: #fbfcff; color: var(--ink); outline: none; transition: border-color .18s, box-shadow .18s; }
input:focus, select:focus, textarea:focus { border-color: #8f82fb; box-shadow: 0 0 0 3px #6b5cf51c; }
input::placeholder, textarea::placeholder { color: #a6aec0; }
textarea { line-height: 1.5; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #687287; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--violet); }
.alert, .success { margin-bottom: 22px; padding: 14px 17px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.alert { border: 1px solid #f6c9d2; background: #fff0f2; color: #ad3851; }
.success { border: 1px solid #bcead8; background: #ecfbf4; color: #137352; }

/* Login: a branded, focused entry point. */
.login-layout { display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(400px, .95fr); min-height: 100vh; }
.login-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 43px clamp(34px, 6vw, 94px) 48px; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(circle at 83% 63%, #394b8a 0, transparent 35%), linear-gradient(145deg, #101b35 8%, #1d2854 58%, #343682 100%); }
.login-story::before { position: absolute; z-index: -1; inset: auto -110px -200px auto; width: 550px; height: 550px; border: 1px solid #ffffff2b; border-radius: 50%; content: ""; }
.story-content { position: relative; z-index: 1; margin: auto 0; padding: 70px 0; }
.story-content h1 { margin: 23px 0 22px; font-size: clamp(39px, 5.1vw, 72px); line-height: 1.24; letter-spacing: -.055em; }
.story-content h1 em { color: #9df0f5; font-style: normal; }
.story-content p { max-width: 420px; color: #bac7df; font-size: 16px; line-height: 1.85; }
.story-line { display: flex; align-items: center; gap: 12px; color: #9eadd0; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.story-line span { width: 30px; height: 1px; background: #81dce6; }
.story-orbit { position: absolute; z-index: -1; width: 620px; height: 620px; right: -260px; top: 15%; border: 1px solid #ffffff20; border-radius: 50%; }
.orbit-two { width: 400px; height: 400px; right: -153px; top: 28%; border-color: #ffffff14; }
.login-side { display: grid; place-items: center; padding: 42px; background: #fbfcff; }
.login-panel { width: min(100%, 390px); }
.login-panel h2 { margin: 14px 0 8px; font-size: 35px; line-height: 1.2; letter-spacing: -.04em; }
.login-panel > p { margin: 0 0 35px; color: var(--muted); font-size: 14px; }
.login-form { display: grid; gap: 18px; }
.login-form .button { margin-top: 8px; }
.login-panel .login-hint { margin-top: 23px; text-align: center; font-size: 11px; color: #a1aabb; }

/* Application shell. */
.app-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 28px 19px 24px; color: #fff; background: var(--nav); }
.sidebar .brand { padding-left: 9px; }
.nav-caption { margin: 68px 0 16px 18px; color: #7785a4; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.side-nav { display: grid; gap: 6px; }
.side-nav a { display: flex; align-items: center; gap: 13px; min-height: 47px; padding: 0 15px; border: 1px solid transparent; border-radius: 12px; color: #aebbd4; font-size: 13px; font-weight: 650; transition: background .18s, color .18s; }
.side-nav a:hover { color: #fff; background: #ffffff0c; }
.side-nav a.active { color: #fff; background: linear-gradient(110deg, #675af4, #4e5fc6); box-shadow: 0 9px 19px #090e2566; }
.nav-icon { display: grid; place-items: center; width: 21px; font-size: 20px; font-weight: 400; }
.nav-count { display: grid; place-items: center; min-width: 19px; height: 19px; margin-left: auto; padding: 0 4px; border-radius: 7px; background: #e48c79; color: #fff; font-size: 10px; }
.sidebar-bottom { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 18px 13px; border: 1px solid #ffffff15; border-radius: 15px; background: #ffffff08; }
.sidebar-bottom strong, .sidebar-bottom small { display: block; }
.sidebar-bottom strong { font-size: 12px; }
.sidebar-bottom small { margin-top: 5px; color: #95a2bf; font-size: 11px; }
.sidebar-pulse { width: 9px; height: 9px; border-radius: 50%; background: #39daa4; box-shadow: 0 0 0 5px #39daa421; }
.workspace { min-width: 0; }
.workspace-top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 clamp(24px, 4vw, 66px); border-bottom: 1px solid var(--line); background: #fff; }
.breadcrumb { font-size: 12px; font-weight: 800; color: #7b8495; letter-spacing: .04em; }
.breadcrumb span { margin: 0 8px; color: #c7cbd5; }
.top-actions { display: flex; align-items: center; gap: 22px; }
.today { color: #a1a9b9; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.logout { padding: 8px 0; border: 0; background: none; color: #5c667c; font-size: 12px; font-weight: 700; }
.logout span { margin-left: 5px; color: var(--violet); }
.logout:hover { color: var(--violet); }
.content { max-width: 1500px; min-height: calc(100vh - 72px); margin: auto; padding: 44px clamp(24px, 4vw, 66px) 28px; }
.content footer { margin-top: 57px; padding-top: 22px; border-top: 1px solid var(--line); color: #a6aebe; font-size: 11px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-head h1 { margin: 10px 0 8px; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.16; letter-spacing: -.06em; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.heading-dot { color: var(--violet); }
.page-total { padding: 9px 13px; border: 1px solid #e2e5f4; border-radius: 9px; background: #fff; color: #727ca0; font-size: 12px; font-weight: 750; white-space: nowrap; }
.section-heading, .panel-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.section-heading { margin: 36px 0 17px; }
.section-heading h2, .panel-head h2 { margin: 6px 0 0; font-size: 20px; letter-spacing: -.03em; }
.section-count { color: #9aa4b5; font-size: 12px; }
.text-link { color: var(--violet); font-size: 12px; font-weight: 800; white-space: nowrap; }
.text-link span { margin-left: 3px; }

/* Overview. */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric { position: relative; min-height: 160px; padding: 23px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }
.metric::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: #d7d3ff; content: ""; }
.metric-label { display: block; color: #7d8799; font-size: 12px; font-weight: 750; }
.metric strong { display: block; margin: 16px 0 11px; font-size: clamp(25px, 2.8vw, 36px); line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.metric strong small { color: #a6afc0; font-size: 17px; }
.metric-foot { color: #a1aaba; font-size: 11px; }
.metric-art { position: absolute; right: 19px; bottom: 11px; color: #e9ebf5; font-size: 32px; font-weight: 900; letter-spacing: -.1em; }
.metric-accent { border-color: transparent; background: linear-gradient(135deg, #6e60ef, #5269da); color: #fff; }
.metric-accent::before { background: #9cf1f3; }
.metric-accent .metric-label, .metric-accent .metric-foot { color: #ddd9ff; }
.metric-accent .metric-art { color: #ffffff26; }
.overview-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; margin-top: 23px; }
.panel { padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.panel-head { margin-bottom: 18px; }
.overview-node, .recent-row { display: flex; align-items: center; gap: 13px; min-height: 65px; border-top: 1px solid #f0f2f6; }
.overview-node:first-child, .recent-row:first-child { border-top: 0; }
.country-tile { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: linear-gradient(140deg, #eceaff, #e1faff); color: #6053d8; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.overview-node-copy, .recent-copy { min-width: 0; flex: 1; }
.overview-node-copy strong, .overview-node-copy small, .recent-copy strong, .recent-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-node-copy strong, .recent-copy strong { font-size: 13px; }
.overview-node-copy small, .recent-copy small { margin-top: 4px; color: #9da6b7; font-size: 11px; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; background: #e9e7ff; color: #6b5def; font-size: 15px; font-weight: 850; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; min-width: max-content; padding: 6px 9px; border-radius: 8px; background: #f0f1f5; color: #8b92a3; font-size: 10px; font-weight: 800; }
.status-chip::before { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-chip.online, .status-chip.active { background: #e4f8ee; color: #15936b; }
.status-chip.pending { background: #fff3e5; color: #b87b23; }
.status-chip.expired, .status-chip.exhausted, .status-chip.suspended, .status-chip.offline { background: #f6eef0; color: #a7707b; }
.overview-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 23px; padding: 15px 17px; border: 1px solid #e1e7f5; border-radius: 12px; background: #eef2fc; }
.overview-note p { margin: 0; color: #667591; font-size: 12px; line-height: 1.6; }
.note-mark { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border: 1.5px solid #6f7dc3; border-radius: 50%; color: #6f7dc3; font-size: 11px; font-weight: 850; }
.empty-inline { padding: 35px 0; color: #9aa4b5; font-size: 12px; line-height: 1.7; }
.empty-inline a { color: var(--violet); font-weight: 800; }

/* Node management. */
.summary-strip { display: flex; align-items: center; gap: 13px; padding: 17px 20px; border: 1px solid #dfe9e8; border-radius: 15px; background: linear-gradient(115deg, #eaf8f5, #f4f8ff); }
.summary-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: none; border-radius: 11px; background: #d6f3ec; color: var(--green); font-size: 25px; }
.summary-strip strong, .summary-strip small { display: block; }
.summary-strip strong { color: #276e62; font-size: 13px; }
.summary-strip small { margin-top: 4px; color: #708a92; font-size: 11px; }
.summary-total { margin-left: auto; color: #78908e; font-size: 11px; font-weight: 800; white-space: nowrap; }
.node-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.node-card { min-width: 0; padding: 23px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }
.node-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.country-large { width: 50px; height: 50px; border-radius: 15px; font-size: 15px; }
.node-card h3 { margin: 20px 0 3px; font-size: 20px; letter-spacing: -.04em; }
.node-address { margin: 0; color: #9ca5b5; font-size: 12px; overflow-wrap: anywhere; }
.node-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 18px; padding: 17px 0; border-top: 1px solid #f0f2f7; border-bottom: 1px solid #f0f2f7; }
.node-facts span { display: block; color: #a1a9b9; font-size: 10px; }
.node-facts strong { display: block; margin-top: 5px; color: #3c4860; font-size: 11px; font-weight: 800; }
.node-editor summary { display: flex; justify-content: space-between; align-items: center; color: var(--violet); font-size: 12px; font-weight: 850; cursor: pointer; list-style: none; }
.node-editor summary::-webkit-details-marker, .add-node-panel summary::-webkit-details-marker, .account-card summary::-webkit-details-marker, .setup-guide summary::-webkit-details-marker { display: none; }
.node-editor[open] summary span, .account-card[open] .manage-link span { transform: rotate(180deg); }
.node-editor summary span, .manage-link span { transition: transform .18s; }
.node-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #eef0f5; }
.node-edit .check { align-self: center; }
.node-edit .button { justify-self: end; }
.node-rotate { display: grid; gap: 11px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef0f5; }
.node-rotate .button { justify-self: start; }
.add-node-panel { margin-top: 20px; border: 1px dashed #beb8fb; border-radius: 18px; background: #f1f0ff; scroll-margin-top: 28px; }
.add-node-panel > summary { display: flex; align-items: center; gap: 15px; min-height: 90px; padding: 18px 22px; cursor: pointer; list-style: none; }
.add-icon { display: grid; place-items: center; width: 45px; height: 45px; flex: none; border-radius: 13px; background: #e1ddff; color: var(--violet); font-size: 26px; }
.add-node-panel strong, .add-node-panel small { display: block; }
.add-node-panel strong { font-size: 14px; }
.add-node-panel small { margin-top: 5px; color: #8a8ea9; font-size: 11px; }
.add-arrow { margin-left: auto; color: var(--violet); font-size: 21px; }
.add-body { padding: 0 22px 24px; }
.add-body > p { margin: 1px 0 18px; color: #7b86a0; font-size: 12px; line-height: 1.6; }
.node-add-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.node-add-form .full-row { grid-column: 1 / -1; }
.node-add-form .button { grid-column: 1 / -1; justify-self: start; }
.secret-panel { margin: 22px 0 27px; padding: 22px; border: 1px solid #c8c1ff; border-radius: 18px; background: #faf9ff; }
.secret-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.secret-head h2 { margin: 5px 0 0; font-size: 18px; }
.secret-panel p { color: #6e7892; font-size: 12px; line-height: 1.7; }
.secret-panel textarea { min-height: 190px; background: #fff; font: 12px/1.5 Consolas, ui-monospace, monospace; }
.setup-guide { margin-top: 17px; }
.setup-guide summary { color: var(--violet); font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.setup-guide summary span { margin-left: 5px; }
.setup-guide pre { overflow: auto; padding: 16px; border-radius: 11px; background: #1d2742; color: #d6e1ff; font: 11px/1.7 Consolas, ui-monospace, monospace; }
.empty-state { padding: 65px 20px; border: 1px dashed #d9def0; border-radius: 19px; background: #fff; text-align: center; }
.empty-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 17px; background: #f0efff; color: var(--violet); font-size: 32px; }
.empty-state h3 { margin: 0 0 8px; font-size: 17px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }

/* Account management. */
.account-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.search-field { position: relative; display: block; width: min(100%, 330px); }
.search-field span { position: absolute; top: 9px; left: 13px; color: #97a2b7; font-size: 25px; line-height: 1; }
.search-field input { padding-left: 40px; background: #f7f8fc; }
.filter-group { display: flex; gap: 5px; padding: 4px; border-radius: 11px; background: #f4f5fa; }
.filter { min-height: 36px; padding: 7px 13px; border: 0; border-radius: 8px; background: transparent; color: #8b94a6; font-size: 11px; font-weight: 800; white-space: nowrap; }
.filter.active { background: #fff; color: var(--violet); box-shadow: 0 3px 9px #27304714; }
.list-caption { margin: 23px 2px 13px; color: #929bad; font-size: 11px; }
.list-caption strong { color: #46526b; }
.account-list { display: grid; gap: 11px; }
.account-card { border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.account-summary { display: grid; grid-template-columns: minmax(210px, 2.1fr) minmax(94px, .85fr) minmax(92px, 1fr) auto auto; align-items: center; gap: 16px; min-height: 91px; padding: 15px 19px; cursor: pointer; list-style: none; }
.account-summary:hover { background: #fcfcff; }
.account-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-identity > span:last-child { min-width: 0; }
.account-identity strong, .account-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity strong { font-size: 13px; }
.account-identity small { margin-top: 6px; color: #a2aabb; font-size: 10px; }
.account-plan { color: #647087; font-size: 11px; font-weight: 750; }
.account-usage strong, .account-usage small { display: block; }
.account-usage strong { color: #32415b; font-size: 12px; }
.account-usage small { margin-top: 5px; color: #9ca5b6; font-size: 10px; }
.manage-link { color: var(--violet); font-size: 11px; font-weight: 850; white-space: nowrap; }
.manage-link span { display: inline-block; margin-left: 3px; font-size: 15px; }
.account-edit { padding: 22px 24px 24px; border-top: 1px solid #edf0f5; background: #fcfcff; }
.edit-head { display: flex; justify-content: space-between; align-items: flex-start; }
.edit-head h3 { margin: 0 0 5px; font-size: 14px; }
.edit-head p { margin: 0; color: #9ca5b6; font-size: 11px; }
.account-id { color: #b0b8c6; font-size: 11px; font-weight: 800; }
.usage-detail { margin-top: 19px; }
.usage-detail > div { display: flex; justify-content: space-between; gap: 10px; color: #8994a8; font-size: 11px; }
.usage-detail strong { color: #47536e; }
.usage-progress { display: block; width: 100%; height: 7px; margin-top: 9px; appearance: none; border: 0; border-radius: 7px; overflow: hidden; }
.usage-progress::-webkit-progress-bar { background: #e9ebf4; }
.usage-progress::-webkit-progress-value { background: linear-gradient(90deg, #7f70fb, #41c9d9); border-radius: 7px; }
.usage-progress::-moz-progress-bar { background: #6d60ee; }
.account-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 21px; }
.account-form-bottom { display: flex; grid-column: 1 / -1; align-items: center; gap: 22px; padding-top: 9px; }
.account-form-bottom .button { margin-left: auto; }

/* Security page. */
.security-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); gap: 19px; align-items: start; }
.security-panel { padding: 32px; }
.security-emblem { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #eeecff; color: var(--violet); font-size: 26px; }
.security-panel h2 { margin: 22px 0 7px; font-size: 21px; }
.security-panel > p { margin: 0; color: var(--muted); font-size: 12px; }
.security-form { display: grid; gap: 18px; margin-top: 27px; }
.security-form .button { justify-self: start; }
.security-tip { padding: 30px; border-radius: 19px; background: linear-gradient(145deg, #172540, #343378); color: #fff; }
.security-tip .eyebrow { color: #9ceaf2; }
.security-tip h3 { margin: 21px 0 10px; font-size: 20px; }
.security-tip p { color: #c1cee1; font-size: 12px; line-height: 1.85; }
.tip-rule { height: 1px; margin: 24px 0 16px; background: #ffffff26; }
.security-tip small { color: #aebbd3; font-size: 11px; }

@media (max-width: 1200px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-summary { grid-template-columns: minmax(170px, 2fr) minmax(80px, 1fr) minmax(80px, 1fr) auto; }
  .account-summary .manage-link { display: none; }
}
@media (max-width: 900px) {
  .app-layout { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; padding: 16px 20px 0; }
  .sidebar .brand { padding-left: 0; }
  .sidebar .brand-mark { width: 35px; height: 35px; border-radius: 10px; font-size: 27px; }
  .sidebar .brand-copy { font-size: 15px; }
  .sidebar .brand-copy small { font-size: 7px; }
  .nav-caption, .sidebar-bottom { display: none; }
  .side-nav { display: flex; gap: 4px; margin-top: 17px; overflow-x: auto; }
  .side-nav a { min-width: max-content; min-height: 43px; padding: 0 11px; border-radius: 10px 10px 0 0; font-size: 12px; }
  .side-nav .nav-icon { display: none; }
  .workspace-top { min-height: 59px; padding: 0 22px; }
  .content { min-height: calc(100vh - 146px); padding: 33px 22px 24px; }
  .login-layout { grid-template-columns: 1fr 1fr; }
  .login-story { padding: 36px; }
}
@media (max-width: 680px) {
  .login-layout { display: block; }
  .login-story { min-height: 270px; padding: 25px; }
  .story-content { padding: 30px 0 10px; }
  .story-content h1 { margin: 12px 0 7px; font-size: 30px; }
  .story-content p, .story-line { display: none; }
  .login-side { min-height: calc(100vh - 270px); padding: 30px 24px 50px; align-items: start; }
  .login-panel h2 { font-size: 29px; }
  .page-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .page-head .button { align-self: stretch; }
  .overview-grid, .node-grid, .security-grid { grid-template-columns: 1fr; }
  .account-toolbar { align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; }
  .filter-group { align-self: start; }
  .account-summary { grid-template-columns: 1fr auto; gap: 8px; min-height: 100px; }
  .account-summary .account-identity { grid-column: 1; }
  .account-summary .account-plan { grid-column: 1; padding-left: 52px; }
  .account-summary .account-usage { display: none; }
  .account-summary .status-chip { grid-column: 2; grid-row: 1; }
  .account-form { grid-template-columns: 1fr; }
  .account-form-bottom { flex-wrap: wrap; gap: 13px; }
  .account-form-bottom .button { width: 100%; margin-left: 0; }
  .node-add-form { grid-template-columns: 1fr; }
  .node-add-form .full-row, .node-add-form .button { grid-column: 1; }
}
@media (max-width: 480px) {
  .content { padding: 26px 16px 22px; }
  .workspace-top { padding: 0 16px; }
  .today { display: none; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metric { min-height: 133px; padding: 16px; border-radius: 15px; }
  .metric strong { font-size: 24px; }
  .metric-art { font-size: 23px; }
  .panel, .node-card { padding: 19px; }
  .secret-head { align-items: flex-start; flex-direction: column; }
  .secret-head .button { width: 100%; }
  .summary-total { display: none; }
  .security-panel, .security-tip { padding: 23px; }
}

/* OneKey visual system — restrained network instrumentation, not a generic SaaS kit. */
:root {
  --nav: #101d23;
  --nav-soft: #193037;
  --paper: #f3f6f4;
  --surface: #fff;
  --ink: #17272b;
  --muted: #718186;
  --line: #dfe8e4;
  --violet: #16846d;
  --cyan: #8ef3cf;
  --green: #128466;
  --shadow: 0 12px 34px rgba(18, 45, 43, .045);
}
body { background: var(--paper); font-family: Inter, "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
::selection { color: #102922; background: #a6efcf; }
:focus-visible { outline-color: #27aa89; }
.eyebrow { color: #16846d; font-size: 10px; letter-spacing: .18em; }
.heading-dot { color: #34b994; }
.brand { gap: 11px; font-size: 17px; letter-spacing: .1em; }
.brand-mark { width: 42px; height: 42px; border: 1px solid #a2f6d38c; border-radius: 13px; background: #8af2cc; box-shadow: 0 8px 25px #55caa22e; transform: none; }
.brand-mark svg { width: 30px; height: 30px; stroke: #10332c; stroke-width: 1.5; stroke-linejoin: round; }
.brand-mark svg circle { fill: #10332c; stroke: none; }
.brand-copy small { color: #79aca0; font-size: 8px; letter-spacing: .24em; }
.sidebar { border-right: 1px solid #3650474d; background: radial-gradient(circle at 0 0, #25413f, transparent 47%), #101d23; }
.nav-caption { color: #6e8d88; }
.side-nav a { min-height: 50px; border-radius: 11px; color: #a6bfba; font-weight: 600; }
.side-nav a:hover { background: #c5f9e40d; }
.side-nav a.active { color: #11362c; background: #a6f1d0; box-shadow: 0 8px 23px #0b201b4d; font-weight: 800; }
.nav-icon { width: 20px; height: 20px; }
.nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nav-count { background: #e66c65; }
.sidebar-bottom { border-color: #b6edcf1b; background: #e9fff20a; }
.sidebar-bottom small { color: #8eaca6; }
.sidebar-pulse, .live-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #78e9b2; box-shadow: 0 0 0 4px #78e9b126, 0 0 16px #78e9b188; }
.pulse-warning { background: #f4bd69; box-shadow: 0 0 0 4px #f4bd6928, 0 0 15px #f4bd6988; }
.workspace-top { background: #fbfcfb; }
.breadcrumb { color: #52776d; font-size: 11px; letter-spacing: .12em; }
.breadcrumb span { color: #b3c5bc; }
.logout span { color: var(--violet); }
.content { max-width: 1530px; padding-top: 35px; }
.content footer { color: #8da39a; }
.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: clamp(30px, 3vw, 41px); letter-spacing: -.055em; }
.page-head p { color: #73837f; }
.button { border-radius: 10px; }
.button-primary { color: #fff; background: #16846d; box-shadow: 0 8px 20px #17856929; }
.button-primary:hover { background: #106b58; box-shadow: 0 12px 25px #1785693d; }
.button-outline { color: #166f5d; border-color: #bcd9cb; }
.button-outline:hover { background: #f0fbf5; }
input:not([type=checkbox]), select, textarea { border-color: #d8e4de; border-radius: 10px; background: #fafdff; }
input:focus, select:focus, textarea:focus { border-color: #54b89b; box-shadow: 0 0 0 3px #54b89b1e; }
.check input { accent-color: #178568; }
.alert { border-color: #efccc6; background: #fff5f2; color: #a34a40; }
.success { border-color: #b7ddc8; background: #f0fbf5; color: #137356; }

/* Main overview feature. The diagram is decorative; the count is real data. */
.command-hero { position: relative; display: flex; align-items: center; min-height: 300px; padding: 42px clamp(28px, 4vw, 57px); overflow: hidden; isolation: isolate; border: 1px solid #294b46; border-radius: 23px; color: #fff; background: radial-gradient(ellipse at 82% 39%, #1d67555e 0, transparent 39%), linear-gradient(115deg, #11252a 0%, #142b30 60%, #164139 100%); box-shadow: 0 21px 45px #162c2c22; }
.command-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .22; background-image: linear-gradient(#8ce5c721 1px, transparent 1px), linear-gradient(90deg, #8ce5c721 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, transparent 15%, black 90%); }
.command-hero::after { position: absolute; z-index: -1; right: -130px; bottom: -210px; width: 540px; height: 540px; border-radius: 50%; background: #45d99f12; filter: blur(55px); content: ""; }
.hero-copy { position: relative; z-index: 2; width: min(58%, 670px); }
.hero-kicker { display: inline-flex; align-items: center; gap: 12px; color: #b3e8d1; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.command-hero h1 { margin: 24px 0 14px; font-size: clamp(34px, 3.3vw, 50px); line-height: 1.2; letter-spacing: -.06em; }
.command-hero h1 em { color: #a0f4ce; font-style: normal; }
.command-hero p { margin: 0; color: #b2c9c3; font-size: 13px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 27px; }
.button-hero { min-width: 136px; min-height: 43px; color: #10332b; background: #a6f2d2; box-shadow: 0 8px 25px #82e8be20; }
.button-hero:hover { background: #c2ffdf; }
.hero-secondary { color: #d2eee2; font-size: 12px; font-weight: 750; }
.hero-secondary span { margin-left: 5px; }
.hero-secondary:hover { color: #fff; }
.hero-index { position: absolute; right: 34px; bottom: 26px; color: #b5dcc786; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.hero-network { position: absolute; top: 50%; right: 8.2%; width: 300px; height: 300px; transform: translateY(-50%); }
.hero-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid #9debc344; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-a { width: 130px; height: 130px; background: #8deac308; box-shadow: 0 0 45px #6be3ae15; }
.orbit-b { width: 230px; height: 230px; border-style: dashed; opacity: .85; }
.orbit-c { width: 325px; height: 325px; opacity: .45; }
.hero-axis { position: absolute; top: 50%; left: 50%; width: 260px; height: 1px; background: linear-gradient(90deg, transparent, #aaf5cf70, transparent); transform-origin: center; }
.axis-a { transform: translate(-50%, -50%) rotate(34deg); }
.axis-b { transform: translate(-50%, -50%) rotate(-34deg); }
.orbit-point { position: absolute; z-index: 1; width: 9px; height: 9px; border: 2px solid #baffdc; border-radius: 50%; background: #6fd7a8; box-shadow: 0 0 0 5px #80e4ae20, 0 0 18px #88f4c1; }
.point-a { top: 44px; left: 83px; }.point-b { top: 105px; right: 24px; }.point-c { bottom: 49px; left: 67px; }
.network-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid #b0f8d29e; border-radius: 22px; background: linear-gradient(145deg, #9cf1cc, #53bda2); box-shadow: 0 0 0 8px #9feac112, 0 15px 35px #0c201da8; transform: translate(-50%, -50%) rotate(-9deg); }
.network-core svg { width: 48px; height: 48px; stroke: #134439; stroke-width: 1.5; stroke-linejoin: round; }
.network-core svg circle { fill: #134439; stroke: none; }
.hero-status { position: absolute; z-index: 2; right: -13px; bottom: 15px; display: flex; align-items: center; gap: 11px; min-width: 137px; padding: 11px 14px; border: 1px solid #c8ffe847; border-radius: 13px; background: #21433dd9; box-shadow: 0 14px 27px #07161463; backdrop-filter: blur(9px); }
.hero-status strong, .hero-status small { display: block; }.hero-status strong { font-size: 15px; }.hero-status small { margin-top: 3px; color: #a9d4c4; font-size: 10px; }
.metrics-heading { margin: 35px 0 16px; }.metrics-heading h2 { font-size: 21px; }
.metrics { gap: 14px; }
.metric { min-height: 150px; border-color: #dfe8e4; border-radius: 16px; box-shadow: 0 8px 20px #16352c08; }
.metric::before { display: none; }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-label { color: #6c7d78; font-size: 12px; }
.metric-symbol { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #e2eae6; border-radius: 9px; color: #68a994; font-size: 15px; }
.metric strong { margin: 21px 0 9px; color: #152e2b; font-size: clamp(26px, 2.9vw, 39px); letter-spacing: -.065em; }
.metric strong small { color: #9cb2a6; }
.metric-foot { color: #8a9a94; }
.metric-art { right: 19px; bottom: 10px; color: #cdded426; font-size: 42px; }
.metric-accent { border-color: #a3dfbf; background: linear-gradient(128deg, #ddf7e9, #bbebd7); box-shadow: 0 10px 24px #74c59d24; }
.metric-accent .metric-label { color: #3e8067; }.metric-accent .metric-foot { color: #58967a; }.metric-accent .metric-symbol { border-color: #8bd5ad; color: #278364; }
.metric-accent .metric-art { color: #8ecaaa3c; }
.overview-grid { gap: 16px; margin-top: 20px; }
.panel, .node-card, .account-card, .account-toolbar { border-color: #dfe8e4; border-radius: 17px; box-shadow: var(--shadow); }
.panel-head { padding-bottom: 14px; border-bottom: 1px solid #edf2ef; }
.panel-head h2 { color: #1b3431; }.text-link { color: #16846d; }
.overview-node, .recent-row { min-height: 69px; border-color: #eef2ef; }
.country-tile { border: 1px solid #d0e7d9; border-radius: 11px; color: #24765b; background: #e9f6ee; }
.avatar { border-radius: 12px; color: #167d69; background: #e3f5e9; }
.overview-node-copy small, .recent-copy small { color: #8ca49a; }
.overview-node-copy .node-telemetry-inline { margin-top: 5px; color: #268169; font-size: 10px; font-weight: 700; }
.status-chip { border: 1px solid transparent; border-radius: 999px; }
.status-chip.online, .status-chip.active { border-color: #c4ead4; color: #12805e; background: #eaf8ef; }
.status-chip.pending { border-color: #f4e3bc; }.status-chip.offline, .status-chip.expired, .status-chip.exhausted, .status-chip.suspended { border-color: #eddddb; }
.overview-note { border-color: #d5e9de; border-radius: 11px; background: #eef7f0; }
.overview-note p { color: #5c7b6c; }.note-mark { border-color: #559f79; color: #2e8567; }

/* Supporting pages retain the same visual language. */
.summary-strip { border-color: #bee1cd; background: linear-gradient(100deg, #e5f7eb, #f5fcf7); }
.summary-icon { color: #16846d; background: #cef0dc; }.summary-strip strong { color: #246a53; }.summary-strip small, .summary-total { color: #5f8773; }
.node-card { position: relative; overflow: hidden; }.node-card::before { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #76d7ae, #d6f5df); content: ""; }
.node-card h3 { color: #1a3430; }.node-address { color: #849c91; }
.node-telemetry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; padding: 17px 0; border: 1px solid #d9eae0; border-radius: 13px; background: #f3faf5; }
.node-telemetry > div { min-width: 0; padding: 0 17px; }
.node-telemetry > div + div { border-left: 1px solid #d6e8dd; }
.node-telemetry span, .node-telemetry strong, .node-telemetry small { display: block; }
.node-telemetry span { color: #628675; font-size: 10px; font-weight: 700; }
.node-telemetry strong { margin-top: 8px; color: #173c30; font-size: 22px; line-height: 1.2; letter-spacing: -.05em; }
.node-telemetry small { margin-top: 7px; color: #8aa999; font-size: 9px; line-height: 1.4; }
.node-facts { border-color: #edf2ee; }.node-facts span { color: #82988d; }.node-facts strong { color: #34584c; }
.node-editor summary { color: #16846d; }.node-edit, .node-rotate { border-color: #e9f1eb; }
.add-node-panel { border-color: #a6d9bb; background: #f0faf3; }.add-icon { color: #16846d; background: #d8f3e2; }.add-node-panel small, .add-body > p { color: #658476; }.add-arrow { color: #16846d; }
.secret-panel { border-color: #a8dbc0; background: #f4fbf6; }.secret-panel p { color: #5c7967; }.setup-guide summary { color: #147b64; }.setup-guide pre { background: #132b2a; color: #ddfae9; }
.empty-state { border-color: #cedfd3; }.empty-symbol { color: #16846d; background: #e5f6e9; }
.page-total { border-color: #d5e5d9; color: #53806a; }
.search-field input { background: #f5f9f6; }.filter-group { background: #edf4ef; }.filter.active { color: #147b64; }.list-caption strong { color: #365c4a; }
.account-summary:hover { background: #f9fdf9; }.account-plan { color: #5c7667; }.account-usage strong { color: #2b5140; }.manage-link { color: #16846d; }
.account-edit { border-color: #e5eee6; background: #f8fbf8; }.usage-progress::-webkit-progress-bar { background: #dbe9de; }.usage-progress::-webkit-progress-value { background: linear-gradient(90deg, #13866d, #85dba9); }.usage-progress::-moz-progress-bar { background: #16846d; }
.security-emblem { color: #16846d; background: #e5f6e9; }.security-tip { background: radial-gradient(circle at 90% 10%, #237a5e 0, transparent 45%), #142c2e; }.security-tip .eyebrow { color: #99edc3; }.security-tip p { color: #b6cfc3; }
.login-story { background: radial-gradient(circle at 84% 63%, #236951 0, transparent 38%), linear-gradient(145deg, #102427 8%, #153833 60%, #134735 100%); }
.login-story::before, .story-orbit { border-color: #b9ffe12a; }.story-content h1 em { color: #a5f2cc; }.story-content p { color: #b7d0c3; }.story-line { color: #90bbaa; }.story-line span { background: #8af0bf; }.eyebrow-light { color: #8ee9ba; }.login-side { background: #f3f7f4; }.login-panel h2 { color: #17342b; }.login-panel > p { color: #768e80; }.login-hint { color: #8ea497; }

@media (max-width: 1200px) {
  .hero-network { right: 1%; transform: translateY(-50%) scale(.82); }
}
@media (max-width: 900px) {
  .sidebar { border-right: 0; border-bottom: 1px solid #b7efce21; }
  .sidebar .brand-mark { width: 36px; height: 36px; }.sidebar .brand-mark svg { width: 26px; height: 26px; }
  .side-nav a { border-radius: 10px 10px 0 0; }.side-nav a.active { box-shadow: none; }
  .hero-network { right: 2%; transform: translateY(-50%) scale(.72); }
}
@media (max-width: 680px) {
  .command-hero { min-height: 310px; padding: 29px; align-items: flex-start; }
  .hero-copy { width: 100%; }.command-hero h1 { font-size: 31px; }.command-hero p { max-width: 75%; font-size: 11px; }
  .hero-network { top: auto; right: -95px; bottom: -135px; transform: scale(.58); transform-origin: center; opacity: .65; }
  .hero-status { display: none; }.hero-actions { gap: 18px; margin-top: 22px; }.hero-index { right: 17px; bottom: 15px; font-size: 8px; }
  .metrics-heading { margin-top: 26px; }.metrics-heading .section-count { display: none; }
  .metric-art { font-size: 34px; }.metric strong { font-size: 27px; }
}
@media (max-width: 480px) {
  .command-hero { min-height: 300px; padding: 25px 22px; border-radius: 17px; }
  .hero-kicker { gap: 8px; font-size: 8px; letter-spacing: .1em; }.command-hero h1 { margin: 21px 0 12px; font-size: 29px; }
  .command-hero p { max-width: 84%; }.hero-network { right: -115px; bottom: -158px; opacity: .48; }
  .button-hero { min-width: 117px; min-height: 40px; padding: 9px 13px; font-size: 11px; }.hero-secondary { font-size: 11px; }
  .metric { min-height: 130px; padding: 15px; }.metric strong { margin-top: 18px; font-size: 26px; }.metric-art { right: 12px; font-size: 29px; }
  .node-telemetry > div { padding: 0 10px; }.node-telemetry strong { font-size: 17px; }
}