:root {
  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'Noto Sans SC', Arial, sans-serif;
  color: #1c2423;
  background: #f2f4f0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #1b2523;
  --muted: #79837f;
  --muted-2: #9aa39e;
  --line: #e5e9e4;
  --paper: #fff;
  --canvas: #f2f4f0;
  --green: #80b9a5;
  --green-deep: #397963;
  --green-pale: #e8f2ed;
  --orange: #de8668;
  --orange-pale: #faeee8;
  --yellow: #e9d17c;
  --yellow-pale: #f7f2df;
  --blue: #8dacc0;
  --blue-pale: #eaf1f5;
  --red: #bf6659;
  --shadow: 0 18px 48px rgba(32, 45, 39, .07);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(80, 144, 118, .23); outline-offset: 2px; }
svg { flex: 0 0 auto; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 43%) 1fr; background: #fff; }
.auth-aside { min-height: 100vh; position: relative; isolation: isolate; overflow: hidden; background: #202c29; color: #f4f6ef; padding: 38px clamp(32px, 5vw, 76px); display: flex; flex-direction: column; }
.auth-aside::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 25% 72%, rgba(117, 170, 146, .22), transparent 43%), linear-gradient(155deg, rgba(27, 38, 35, .1), #202c29 72%); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; color: var(--ink); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0; text-decoration: none; }
.brand-light { color: #f3f5ed; }
.brand-mark { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; background: #83b8a3; color: #1b2b26; font-family: 'DM Mono', monospace; font-size: 18px; font-weight: 500; }
.auth-art { position: absolute; width: min(470px, 90%); aspect-ratio: 1; top: 20%; left: 50%; transform: translateX(-50%); }
.orbit { position: absolute; border: 1px solid rgba(173, 204, 183, .19); border-radius: 50%; }
.orbit-one { inset: 9%; }
.orbit-two { inset: 22%; border-style: dashed; border-color: rgba(229, 209, 124, .2); }
.orbit-one::before, .orbit-one::after, .orbit-two::before { content: ''; position: absolute; border-radius: 50%; width: 9px; height: 9px; background: #e4cf80; box-shadow: 0 0 0 7px rgba(228, 207, 128, .1); }
.orbit-one::before { top: 23%; left: 16%; }
.orbit-one::after { bottom: 14%; right: 24%; width: 6px; height: 6px; background: #90c1a8; box-shadow: 0 0 0 6px rgba(144, 193, 168, .11); }
.orbit-two::before { top: 11%; right: 21%; width: 5px; height: 5px; background: #d79073; box-shadow: 0 0 0 6px rgba(215, 144, 115, .1); }
.route-line { position: absolute; width: 56%; height: 1px; left: 22%; top: 48%; transform: rotate(-29deg); transform-origin: center; background: linear-gradient(90deg, transparent, #90bda7 20%, #90bda7 80%, transparent); opacity: .7; }
.route-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 3px solid #273630; background: #a8cbb3; box-shadow: 0 0 0 1px #a8cbb3, 0 0 24px rgba(147, 200, 170, .45); }
.route-dot-a { left: 25%; top: 58%; }
.route-dot-b { right: 24%; top: 33%; background: #e5cd76; box-shadow: 0 0 0 1px #e5cd76, 0 0 24px rgba(229, 205, 118, .35); }
.route-card { position: absolute; top: 29%; left: 50%; transform: translateX(-50%); width: 206px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 16px; border: 1px solid rgba(222, 233, 219, .17); border-radius: 12px; background: rgba(36, 51, 46, .91); box-shadow: 0 20px 65px rgba(0, 0, 0, .24); backdrop-filter: blur(8px); }
.route-card > span:nth-child(2) { color: #a8b9af; font-family: 'DM Mono', monospace; font-size: 9px; }
.route-card strong { font-size: 21px; line-height: 1.5; font-weight: 500; }
.route-card small { color: #93a49a; font-family: 'DM Mono', monospace; font-size: 8px; }
.signal-dot { width: 8px; height: 8px; border-radius: 50%; background: #8dbe9f; box-shadow: 0 0 0 5px rgba(141, 190, 159, .12); }
.auth-aside-copy { margin-top: auto; position: relative; z-index: 1; }
.eyebrow, .section-kicker { color: #87928c; font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.4; letter-spacing: 0; }
.auth-aside-copy .eyebrow { color: #9aada2; }
.auth-aside-copy p { margin: 14px 0 0; font-size: clamp(24px, 2.8vw, 37px); line-height: 1.44; font-weight: 500; }
.auth-aside-copy em { color: #e6d384; font-style: normal; }
.aside-footer { display: flex; justify-content: space-between; margin-top: 44px; color: #83958a; font-family: 'DM Mono', monospace; font-size: 9px; }
.auth-main { min-height: 100vh; display: flex; flex-direction: column; padding: 35px clamp(25px, 5vw, 76px) 25px; }
.auth-top, .auth-main-footer { display: flex; align-items: center; justify-content: space-between; color: #99a19b; font-family: 'DM Mono', monospace; font-size: 9px; }
.secure-label { display: inline-flex; align-items: center; gap: 7px; color: #5d8f76; font-family: 'DM Sans', sans-serif; font-size: 11px; }
.auth-card { width: min(100%, 420px); margin: auto; padding: 40px 0 46px; }
.auth-heading .section-kicker { color: #66977e; }
.auth-heading h1 { margin: 13px 0 8px; font-size: 32px; line-height: 1.25; font-weight: 600; }
.auth-heading p { margin: 0; color: #87908a; font-size: 13px; }
.form-stack { display: flex; flex-direction: column; gap: 19px; margin-top: 34px; }
label { display: flex; flex-direction: column; gap: 8px; color: #46504a; font-size: 12px; font-weight: 600; }
input, textarea, select { width: 100%; min-width: 0; border: 1px solid #dfe4de; border-radius: 6px; color: var(--ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
input, select { height: 44px; padding: 0 13px; }
textarea { padding: 12px 13px; resize: vertical; font-family: 'DM Mono', monospace; font-size: 11px; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #abb3ad; font-weight: 400; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: #85b59e; box-shadow: 0 0 0 3px rgba(106, 161, 132, .11); }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-toggle { position: absolute; top: 0; right: 10px; height: 44px; border: 0; color: #829087; background: transparent; font-size: 11px; }
.button { min-height: 42px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 6px; padding: 0 15px; font-size: 12px; font-weight: 600; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-dark { color: #f7f8f4; background: #26322f; }
.button-dark:hover { background: #364540; }
.button-wide { width: 100%; height: 47px; margin-top: 6px; justify-content: space-between; padding: 0 17px; }
.button-outline { color: #3f5148; border-color: #dce3dc; background: #fff; }
.button-outline:hover { border-color: #a9c7b4; background: #f8fbf8; }
.button-quiet { color: #53645a; border-color: transparent; background: transparent; }
.button-quiet:hover { background: #eff3ef; }
.button-small { min-height: 32px; padding: 0 10px; gap: 6px; font-size: 11px; }
.text-button, .link-button { border: 0; padding: 0; color: #4c8069; background: transparent; font-size: 12px; font-weight: 600; }
.link-button { display: inline-flex; align-items: center; gap: 4px; }
.auth-switch { display: flex; justify-content: center; gap: 6px; margin-top: 22px; color: #8a938d; font-size: 12px; }
.auth-footnote { margin-top: 38px; padding-top: 18px; border-top: 1px solid #ecefeb; color: #a0a8a1; text-align: center; font-size: 10px; }
.auth-main-footer { margin-top: auto; }
.form-alert { margin-top: 20px; padding: 11px 13px; border-radius: 5px; color: #a45145; background: #fbefec; font-size: 12px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; width: 236px; display: flex; flex-direction: column; padding: 27px 17px 17px; border-right: 1px solid #293633; color: #dbe3dc; background: #202b28; }
.sidebar .brand { margin: 0 0 51px 8px; color: #f4f6ef; }
.sidebar .brand-mark { width: 31px; height: 31px; }
.workspace-label { margin: 0 9px 13px; color: #88978e; font-family: 'DM Mono', monospace; font-size: 9px; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-item { position: relative; width: 100%; min-height: 42px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 5px; padding: 0 11px; color: #a9b4ad; background: transparent; text-align: left; font-size: 12px; }
.nav-item:hover { color: #e7ede7; background: rgba(255, 255, 255, .055); }
.nav-item.active { color: #f1f5ef; background: #34423d; }
.nav-item.active svg { color: #a6cfb2; }
.nav-item > i { position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; border-radius: 3px; background: #9bc4a8; }
.sidebar-bottom { margin-top: auto; }
.side-status { min-height: 48px; display: flex; align-items: center; gap: 8px; margin: 0 4px 11px; padding: 0 9px; border: 1px solid #36423e; border-radius: 5px; color: #a7b3aa; font-family: 'DM Mono', monospace; font-size: 8px; }
.side-status small { margin-left: auto; color: #7f8e85; font-size: 8px; }
.status-pulse { width: 7px; height: 7px; border-radius: 50%; background: #88be9c; box-shadow: 0 0 0 4px rgba(136, 190, 156, .1); }
.signout { color: #9ca9a1; }
.main-area { min-height: 100vh; margin-left: 236px; }
.topbar { height: 68px; display: flex; justify-content: space-between; align-items: center; padding: 0 38px; border-bottom: 1px solid #e5e9e4; background: rgba(255, 255, 255, .82); }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #9aa39d; font-family: 'DM Mono', monospace; font-size: 9px; }
.breadcrumb strong { color: #34413a; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-date { margin-right: 11px; color: #929c95; font-size: 10px; }
.avatar, .customer-avatar { width: 33px; height: 33px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #cfe1d2; border-radius: 50%; color: #426f57; background: #e4efe3; font-size: 12px; font-weight: 600; }
.user-label { display: flex; flex-direction: column; gap: 2px; }
.user-label strong { color: #38453e; font-size: 11px; font-weight: 600; }
.user-label span { color: #97a09a; font-size: 9px; }
.page-content { width: min(100%, 1500px); margin: 0 auto; padding: 35px 38px 55px; }
.page-heading { min-height: 74px; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 25px; }
.page-heading .section-kicker { color: #71957f; }
.page-heading h1 { margin: 6px 0 0; color: #202a26; font-size: 27px; line-height: 1.25; font-weight: 600; }
.page-heading p { margin: 7px 0 0; color: #87928b; font-size: 12px; }
#page-actions { display: flex; align-items: center; gap: 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.metric { min-width: 0; min-height: 124px; padding: 16px 17px 15px; border: 1px solid #e2e7e1; border-radius: 7px; background: var(--paper); }
.metric-top { display: flex; justify-content: space-between; align-items: center; color: #818b84; font-size: 11px; }
.metric-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 6px; color: #41765f; background: var(--green-pale); }
.metric-icon.blue { color: #5f8399; background: var(--blue-pale); }
.metric-icon.yellow { color: #9c8647; background: var(--yellow-pale); }
.metric-icon.orange { color: #a3624c; background: var(--orange-pale); }
.metric > strong { display: block; overflow: hidden; margin-top: 11px; color: #27322d; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; line-height: 1.2; font-weight: 600; }
.metric > strong small { color: #87928b; font-size: 11px; font-weight: 500; }
.metric > small { display: block; margin-top: 5px; color: #9aa49d; font-size: 10px; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .85fr); gap: 15px; margin-bottom: 15px; }
.surface { min-width: 0; border: 1px solid #e1e6e0; border-radius: 7px; background: #fff; }
.overview-grid .surface { min-height: 258px; padding: 18px 19px; }
.surface-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.surface-heading h2 { margin: 4px 0 0; color: #2d3732; font-size: 15px; font-weight: 600; }
.surface-heading .section-kicker { color: #96a099; font-size: 9px; }
.node-overview-list { margin-top: 18px; }
.node-overview-row { min-height: 58px; display: flex; align-items: center; gap: 11px; border-top: 1px solid #eef0ed; }
.mini-node-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 6px; color: #4c816b; background: #edf4ed; }
.node-overview-name { min-width: 120px; display: flex; flex-direction: column; gap: 4px; }
.node-overview-name strong { color: #3a453f; font-size: 11px; font-weight: 600; }
.node-overview-name span, .node-overview-lines { color: #9aa39d; font-size: 9px; }
.node-overview-lines { margin-left: auto; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 22px; border: 1px solid #e8ece7; border-radius: 99px; padding: 0 8px; color: #79837d; background: #f8faf7; white-space: nowrap; font-size: 9px; }
.status-badge i { width: 6px; height: 6px; border-radius: 50%; background: #a8b1aa; }
.status-badge.online, .status-badge.active { border-color: #d4e7d8; color: #4b7b5d; background: #eef6ed; }
.status-badge.online i, .status-badge.active i { background: #73ad81; }
.status-badge.degraded { border-color: #f1e6c0; color: #927d42; background: #fbf6e7; }
.status-badge.degraded i { background: #d4ba65; }
.status-badge.offline, .status-badge.suspended { border-color: #eed9d3; color: #a26457; background: #fbefeb; }
.status-badge.offline i, .status-badge.suspended i { background: #cf806d; }
.status-badge.pending { border-color: #e6e9e3; color: #79837d; background: #f5f6f2; }
.status-badge.pending i { background: #a7aea8; }
.activity-list { margin-top: 13px; }
.activity-row { min-height: 48px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #eef0ed; }
.activity-mark { width: 7px; height: 7px; border: 1px solid #82ad91; border-radius: 50%; background: #d8eadb; }
.activity-row > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.activity-row strong { overflow: hidden; color: #47534c; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; }
.activity-row small { overflow: hidden; color: #9aa39d; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.activity-row time { margin-left: auto; color: #a0a9a2; white-space: nowrap; font-family: 'DM Mono', monospace; font-size: 8px; }
.customer-preview { padding: 18px 19px 0; }
.customer-preview .data-table th, .customer-preview .data-table td { padding-left: 7px; padding-right: 7px; }
.table-surface { overflow: hidden; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 64px; padding: 0 18px; border-bottom: 1px solid #ebefea; }
.search-box { width: min(320px, 64%); display: flex; align-items: center; gap: 9px; color: #929d95; }
.search-box input { height: 34px; padding: 0 5px; border: 0; box-shadow: none; font-size: 11px; }
.search-box input:focus { box-shadow: none; }
.table-count { color: #969f99; font-size: 10px; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.data-table th { height: 39px; padding: 0 18px; color: #929c95; background: #fafbf9; font-size: 9px; font-weight: 500; }
.data-table td { height: 61px; padding: 0 18px; border-top: 1px solid #edf0ec; color: #6e7a72; font-size: 10px; }
.data-table tbody tr:hover { background: #fbfcfa; }
.node-table td { height: 72px; }
.node-table-name { min-width: 260px; }
.node-table-avatar { display: grid; place-items: center; color: #3158bd; background: #edf2ff; }
.node-table td:nth-child(2), .node-table td:nth-child(3), .node-table td:nth-child(4) { white-space: nowrap; }
.node-traffic-value { display: block; color: #26324a; font-size: 13px; font-weight: 600; }
.node-traffic-note { display: block; margin-top: 3px; color: #8793a7; font-size: 11px; }
.node-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.selected-node-summary { min-height: 42px; display: flex; align-items: center; margin-bottom: 9px; padding: 10px 12px; border: 1px solid #dce3ef; border-radius: 5px; color: #51617b; background: #f8faff; font-size: 13px; overflow-wrap: anywhere; }
.node-picker-dialog { width: min(620px, calc(100vw - 28px)); }
.node-picker-search { width: 100%; padding: 0 10px; border: 1px solid #d6deeb; border-radius: 5px; }
.node-picker-search input { width: 100%; }
.node-picker-list { display: flex; flex-direction: column; max-height: 430px; overflow: auto; border: 1px solid #dce3ef; border-radius: 5px; }
.node-picker-row { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #e9edf3; cursor: pointer; }
.node-picker-row:first-child { border-top: 0; }
.node-picker-row input { position: absolute; opacity: 0; pointer-events: none; }
.node-picker-row input:checked + .choice-check { border-color: #3158bd; background: #3158bd; }
.node-picker-row input:checked + .choice-check::after { content: '✓'; color: #fff; font-size: 11px; }
.node-picker-row > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.node-picker-row strong { overflow: hidden; color: #34425c; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.node-picker-row small { overflow: hidden; color: #7b879b; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.node-user-list { display: flex; flex-direction: column; border: 1px solid #dce3ef; border-radius: 5px; }
.node-user-row { min-height: 60px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #e9edf3; }
.node-user-row:first-child { border-top: 0; }
.node-user-row > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.node-user-row strong { color: #34425c; font-size: 13px; }
.node-user-row small { color: #7b879b; font-size: 12px; }
.node-user-row .status-badge { margin-left: auto; }
.customer-cell { display: flex; align-items: center; gap: 10px; }
.customer-avatar { width: 30px; height: 30px; font-size: 10px; }
.customer-cell > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.customer-cell strong { color: #3b4640; font-size: 10px; font-weight: 600; }
.customer-cell small { color: #9aa39d; font-size: 9px; }
.cell-number { color: #65736a; }
.table-arrow { color: #86a391; font-size: 15px; }
.empty-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #8d9890; text-align: center; }
.empty-state strong { color: #536057; font-size: 13px; }
.empty-state > span { font-size: 10px; }
.empty-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #67947a; background: #edf4ed; }
.empty-state .button { margin-top: 4px; }
.node-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.node-admin-wrap { min-width: 0; }
.node-card { min-width: 0; padding: 19px; border: 1px solid #e1e7e0; border-radius: 7px; background: #fff; }
.node-card-top, .node-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.node-emblem { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; color: #497e66; background: #eaf3ec; }
.node-title-row { align-items: flex-end; margin-top: 17px; }
.node-title-row h3, .customer-node-head h3 { margin: 3px 0 0; color: #2d3832; font-size: 16px; font-weight: 600; }
.version-tag { margin-bottom: 2px; padding: 5px 7px; border-radius: 4px; color: #738078; background: #f2f4f0; font-family: 'DM Mono', monospace; font-size: 8px; }
.node-description { min-height: 35px; margin: 9px 0 12px; color: #849087; font-size: 10px; line-height: 1.6; }
.node-meta { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #edf0ec; border-bottom: 1px solid #edf0ec; color: #819087; font-size: 9px; }
.node-meta > span:first-child { display: flex; align-items: center; gap: 6px; }
.node-protocol-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.node-protocol-list span { max-width: 100%; padding: 3px 6px; border-radius: 4px; background: #f1f5f0; color: #56685d; font-size: 9px; overflow-wrap: anywhere; }
.socks-access { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding: 12px; border: 1px solid #e3e9e2; border-radius: 5px; background: #f7f9f6; }
.socks-access > div { min-width: 0; }
.socks-access-order { display: block; margin: -5px 0 6px; color: #87948b; font-size: 9px; }
.socks-access code { display: block; color: #46564b; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-subscription-list { margin-top: 14px; }
.subscription-actions { display: flex; flex: 0 0 auto; gap: 3px; }
.subscription-qr-dialog { width: min(420px, calc(100vw - 28px)); }
.subscription-qr-body { align-items: center; }
.subscription-qr-body img { display: block; width: min(260px, 100%); height: auto; image-rendering: pixelated; }
.node-admin-actions { min-height: 49px; display: flex; justify-content: space-between; align-items: center; padding: 0 5px; color: #9aa39d; font-family: 'DM Mono', monospace; font-size: 9px; }
.icon-button.danger-icon { color: #aa5d51; }
.current-task-empty { padding: 18px 0; color: #89938c; font-size: 11px; }
.current-task-list { margin-top: 12px; }
.current-task { padding: 11px 0; border-top: 1px solid #edf0ec; }
.current-task > header, .current-task-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.current-task > header strong { color: #46534a; font-size: 11px; overflow-wrap: anywhere; }
.current-task-node { padding: 9px 0 3px; }
.current-task-title span { min-width: 0; color: #68766e; font-family: 'DM Mono', monospace; font-size: 10px; overflow-wrap: anywhere; }
.current-task-title strong { color: #477c60; font-family: 'DM Mono', monospace; font-size: 10px; }
.task-progress { height: 5px; margin: 7px 0 6px; overflow: hidden; border-radius: 2px; background: #e8ede7; }
.task-progress i { display: block; height: 100%; background: #6fa582; transition: width .2s ease; }
.current-task-message, .current-task-error { color: #89938c; font-size: 10px; overflow-wrap: anywhere; }
.current-task-error { margin-top: 4px; color: #aa554b; }
.current-task-summary { margin-top: 5px; color: #5c7866; font-size: 10px; overflow-wrap: anywhere; }
.current-task.completed { border-left: 2px solid #78a989; padding-left: 10px; }
.deployment-overview-grid { grid-template-columns: 1fr; }
.deployment-overview-grid .surface { min-height: 0; }
.deployment-result { margin-top: 12px; border-top: 1px solid #edf0ec; }
.deployment-result:first-child { margin-top: 0; border-top: 0; }
.deployment-result > summary { list-style: none; }
.deployment-result > summary::-webkit-details-marker { display: none; }
.deployment-result-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0 10px; cursor: pointer; }
.deployment-result-summary > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deployment-result-summary strong { overflow: hidden; color: #26324a; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.deployment-result-summary span { overflow: hidden; color: #7b879b; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.deployment-result-summary-meta { display: flex; align-items: center; flex: 0 0 auto; gap: 9px; color: #71809a; }
.deployment-result-summary-meta svg { transition: transform .18s ease; }
.deployment-result[open] .deployment-result-summary-meta svg { transform: rotate(90deg); }
.deployment-result-body { padding: 0 0 14px; }
.deployment-result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 11px; color: #71809a; font-size: 12px; }
.deployment-result-toolbar .button { flex: 0 0 auto; }
.deployment-result-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.deployment-result-node { min-width: 0; padding: 14px; border: 1px solid #e0e5ed; border-radius: 5px; background: #fbfcfe; }
.deployment-result-node-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.deployment-result-node-head > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deployment-result-node-head .eyebrow { color: #71809a; font-size: 11px; }
.deployment-result-node-head strong { overflow: hidden; color: #24304a; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.deployment-result-node-head small { color: #8793a7; font-size: 12px; }
.deployment-result-protocols { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.deployment-result-protocols span { padding: 3px 6px; border-radius: 4px; color: #4f6180; background: #f0f4fb; font-size: 11px; }
.deployment-result-links { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.deployment-result-links > div, .deployment-result-socks { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: start; }
.deployment-result-links span, .deployment-result-socks span { color: #71809a; font-size: 12px; }
.deployment-result-links code, .deployment-result-socks code { min-width: 0; overflow-wrap: anywhere; color: #51617b; font-size: 12px; line-height: 1.45; }
.deployment-result-socks { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e5e9f0; }
.subscription-user { padding: 11px 0; border-bottom: 1px solid #e9ede8; }
.subscription-user > strong, .subscription-socks > strong { display: block; margin-bottom: 7px; color: #435148; font-size: 11px; }
.subscription-links, .subscription-socks { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
.subscription-line { min-width: 0; display: grid; grid-template-columns: 85px minmax(0,1fr) 30px; gap: 7px; align-items: center; color: #7f8982; font-size: 10px; }
.subscription-line code, .subscription-socks code { min-width: 0; overflow-wrap: anywhere; color: #59685f; font-size: 10px; }
.integration-note { display: flex; align-items: center; gap: 13px; margin-top: 17px; padding: 15px 17px; }
.note-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 6px; color: #528369; background: #eaf3eb; }
.integration-note > div:nth-child(2) { min-width: 0; }
.integration-note strong { color: #4c5d52; font-size: 11px; }
.integration-note p { margin: 4px 0 0; color: #8d9890; font-size: 10px; line-height: 1.55; }
.integration-note .status-badge { margin-left: auto; }
.activity-full { margin-top: 0; padding: 0 19px; }
.activity-full .activity-row { min-height: 58px; }
.activity-full .activity-row time { font-size: 9px; }
.customer-summary { min-height: 174px; display: flex; justify-content: space-between; align-items: center; gap: 20px; overflow: hidden; position: relative; padding: 25px 31px; border-radius: 8px; color: #f3f4ec; background: #26332f; }
.customer-summary::after { content: ''; position: absolute; width: 250px; height: 250px; right: 19%; top: -140px; border: 1px solid rgba(195, 221, 195, .1); border-radius: 50%; box-shadow: 0 0 0 28px rgba(195, 221, 195, .025), 0 0 0 60px rgba(195, 221, 195, .02); }
.customer-welcome { position: relative; z-index: 1; }
.customer-welcome .section-kicker { color: #a4b8a9; }
.customer-welcome h2 { margin: 8px 0 5px; font-size: 20px; font-weight: 600; }
.customer-welcome p { margin: 0; color: #bbc6bc; font-size: 11px; }
.summary-graphic { width: 260px; max-width: 38%; height: 80px; display: flex; align-items: center; position: relative; z-index: 1; }
.summary-node { width: 66px; height: 58px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid rgba(208, 226, 208, .25); border-radius: 7px; color: #d9e9da; background: rgba(225, 238, 220, .07); }
.summary-node span { color: #9eb4a1; font-family: 'DM Mono', monospace; font-size: 7px; }
.summary-node-right { margin-left: auto; color: #e5d68d; }
.summary-node-right span { color: #cfbf78; }
.summary-connector { position: absolute; left: 70px; right: 70px; height: 1px; display: flex; justify-content: space-between; background: #688a75; }
.summary-connector i { width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #a4c79f; }
.customer-metrics { margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.customer-section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 29px 0 13px; }
.customer-section-heading h2 { margin: 5px 0 0; color: #2d3832; font-size: 16px; }
.customer-section-heading > span { color: #929d95; font-size: 10px; }
.customer-node-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.customer-node-card { min-width: 0; padding: 18px 19px; border: 1px solid #e1e7e0; border-radius: 7px; background: #fff; }
.customer-node-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.customer-node-head .eyebrow { color: #7a9c84; }
.customer-node-head h3 { font-size: 15px; }
.usage-summary { display: flex; justify-content: space-between; align-items: flex-end; margin: 17px 0 9px; }
.usage-summary > div { display: flex; flex-direction: column; gap: 4px; }
.usage-summary span { color: #969f98; font-size: 9px; }
.usage-summary strong { color: #3d4a42; font-size: 17px; font-weight: 600; }
.usage-summary strong small { color: #8b968e; font-size: 10px; font-weight: 500; }
.usage-track { height: 5px; overflow: hidden; border-radius: 5px; background: #edf1eb; }
.usage-track > span { height: 100%; display: block; border-radius: inherit; background: #84b497; }
.service-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; margin-top: 16px; padding: 14px 0; border-bottom: 1px solid #edf0ec; }
.service-details > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.service-details span:not(.status-badge) { color: #9aa39d; font-size: 9px; }
.service-details strong { max-width: 100%; overflow: hidden; color: #55625a; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; }
.service-details .mono, .mono, code { font-family: 'DM Mono', monospace; }
.line-list, .customer-lines { margin-top: 14px; }
.field-label { display: block; margin-bottom: 8px; color: #8c9790; font-size: 9px; }
.line-item { min-height: 34px; display: flex; align-items: center; gap: 8px; border-top: 1px solid #f0f2ef; color: #526058; font-size: 10px; }
.line-item > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-indicator { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #80b596; }
.line-protocol { margin-left: auto; padding: 3px 5px; border-radius: 3px; color: #6f8c78; background: #eff5ef; font-family: 'DM Mono', monospace; font-size: 8px; }
.line-port { min-width: 30px; color: #8b968e; text-align: right; font-family: 'DM Mono', monospace; font-size: 9px; }
.empty-inline { padding: 11px 0; color: #9ca59e; font-size: 10px; }
.subscription-row, .customer-subscription { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 13px; padding: 11px; border: 1px solid #e8ece7; border-radius: 5px; background: #fafbf9; }
.subscription-value { min-width: 0; display: flex; align-items: center; gap: 7px; }
.subscription-value code, .customer-subscription code { display: block; max-width: 220px; overflow: hidden; color: #62756a; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.customer-subscription > div { min-width: 0; }
.icon-button { width: 31px; height: 31px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid transparent; border-radius: 5px; color: #74847a; background: transparent; }
.icon-button:hover { border-color: #e0e7df; background: #f5f8f4; }
.empty-service { min-height: 230px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 9px; border: 1px dashed #d4ddd3; border-radius: 7px; background: rgba(255,255,255,.62); text-align: center; }
.empty-service-icon { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 50%; color: #5c8c70; background: #e9f2e8; }
.empty-service strong { color: #4d5b51; font-size: 13px; }
.empty-service p { max-width: 340px; margin: 0; padding: 0 16px; color: #8c978f; font-size: 10px; line-height: 1.6; }
.data-note { margin-top: 15px; color: #a0a9a2; text-align: right; font-size: 9px; }
.account-grid { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(300px, 1.2fr); gap: 14px; }
.profile-surface { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; }
.profile-large-avatar { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid #cadfcf; border-radius: 50%; color: #477655; background: #e5f0e4; font-size: 21px; }
.profile-surface h2 { margin: 7px 0 3px; color: #36423a; font-size: 17px; }
.profile-surface > p { margin: 0 0 22px; color: #8d9890; font-size: 11px; }
.profile-detail { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eef0ed; color: #909a92; font-size: 10px; }
.profile-detail > strong { color: #626f66; font-size: 10px; font-weight: 500; }
.account-note { display: flex; align-items: flex-start; gap: 13px; padding: 23px; }
.account-note h3 { margin: 5px 0 6px; color: #3d4a42; font-size: 14px; }
.account-note p { max-width: 390px; margin: 0; color: #8a958d; font-size: 11px; line-height: 1.7; }
.password-form { width: min(100%, 340px); display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.password-form label { gap: 6px; font-size: 10px; }
.password-form input { height: 38px; }
.app-dialog { width: min(560px, calc(100vw - 28px)); max-width: none; max-height: min(90vh, 780px); overflow: visible; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: var(--shadow); }
.app-dialog::backdrop { background: rgba(24, 34, 30, .42); backdrop-filter: blur(2px); }
.dialog-card { max-height: min(90vh, 780px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e5e9e4; border-radius: 8px; background: #fff; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 21px; border-bottom: 1px solid #e9ede8; }
.dialog-head h2 { margin: 4px 0 0; color: #2c3731; font-size: 17px; }
.dialog-body { display: flex; flex-direction: column; gap: 14px; overflow: auto; padding: 19px 21px 21px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 21px; border-top: 1px solid #e9ede8; background: #fbfcfa; }
.two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-block { display: flex; flex-direction: column; gap: 8px; }
.node-choice-list { display: flex; flex-direction: column; border: 1px solid #e5e9e4; border-radius: 5px; }
.node-choice { min-height: 50px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 10px; border-top: 1px solid #eef0ed; cursor: pointer; }
.node-choice:first-child { border-top: 0; }
.node-choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-check { width: 16px; height: 16px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #cfd7cf; border-radius: 4px; }
.node-choice input:checked + .choice-check { border-color: #528468; background: #528468; }
.node-choice input:checked + .choice-check::after { content: '✓'; color: #fff; font-size: 11px; }
.choice-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.choice-copy strong { color: #526057; font-size: 10px; }
.choice-copy small { color: #9aa39d; font-size: 9px; }
.node-choice .status-badge { margin-left: auto; }
.node-choice > label { min-width: 220px; flex: 1; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.node-edit-details { flex: 1 0 100%; margin: 0 0 0 26px; color: #718078; font-size: 10px; }
.node-edit-fields { display: flex; flex-direction: column; gap: 9px; padding: 10px 0 4px; }
.form-hint { padding: 10px 11px; border-radius: 4px; color: #8c7d4b; background: #f9f5e8; font-size: 10px; line-height: 1.5; }
.vps-entry { display: flex; flex-direction: column; gap: 11px; padding: 13px; border: 1px solid #e1e6e0; border-radius: 5px; background: #fafbf9; }
.vps-entry + .vps-entry { margin-top: 10px; }
.vps-entry-head { display: flex; align-items: center; justify-content: space-between; color: #526159; font-size: 11px; }
.deploy-node-list { display: flex; flex-direction: column; gap: 8px; }
.deploy-node-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; border: 1px solid #e5e9e4; border-radius: 5px; background: #fff; }
.deploy-node-row strong { color: #435148; font-size: 11px; }
.deploy-node-row span { color: #849088; font-size: 10px; overflow-wrap: anywhere; }
.subscription-qr { margin-top: 14px; border-top: 1px solid #e8ece7; padding-top: 11px; color: #65736a; font-size: 11px; }
.qr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.qr-grid figure { min-width: 0; margin: 0; text-align: center; }
.qr-grid img { display: block; width: 100%; max-width: 150px; margin: auto; image-rendering: pixelated; }
.qr-grid figcaption { margin-top: 5px; color: #7d8880; font-size: 10px; }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 36px)); padding: 12px 16px; transform: translateY(12px); opacity: 0; pointer-events: none; border: 1px solid #d8e6d8; border-radius: 6px; color: #41694f; background: #f4faf3; box-shadow: 0 10px 28px rgba(27, 44, 34, .12); font-size: 11px; transition: opacity .18s ease, transform .18s ease; }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast[data-type="error"] { border-color: #f0d6d0; color: #9b5548; background: #fff7f4; }

@media (max-width: 1100px) {
  .sidebar { width: 205px; }
  .main-area { margin-left: 205px; }
  .page-content { padding-right: 25px; padding-left: 25px; }
  .topbar { padding: 0 25px; }
  .overview-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { min-height: 220px; padding: 21px 22px; }
  .auth-aside .brand { position: relative; z-index: 2; }
  .auth-art { width: 240px; top: -26px; left: 74%; opacity: .72; }
  .route-card { top: 27%; width: 130px; padding: 11px; gap: 6px; }
  .route-card strong { font-size: 14px; }
  .route-card small { font-size: 6px; }
  .route-card > span:nth-child(2) { font-size: 7px; }
  .auth-aside-copy { margin-top: 25px; }
  .auth-aside-copy p { margin-top: 6px; font-size: 21px; }
  .aside-footer { display: none; }
  .auth-main { min-height: calc(100vh - 220px); padding: 20px 23px; }
  .auth-top { display: none; }
  .auth-card { padding: 35px 0 40px; }
  .auth-heading h1 { font-size: 27px; }
  .auth-main-footer { font-size: 8px; }
  .sidebar { inset: auto 0 0; width: auto; height: 61px; flex-direction: row; align-items: center; padding: 5px 8px; border-top: 1px solid #35413d; border-right: 0; }
  .sidebar .brand, .workspace-label, .sidebar-bottom, .nav-item > i { display: none; }
  .side-nav { width: 100%; display: flex; flex-direction: row; justify-content: center; gap: 5px; }
  .nav-item { width: auto; min-width: 96px; min-height: 48px; flex-direction: column; justify-content: center; gap: 3px; padding: 3px 10px; font-size: 9px; }
  .nav-item svg { width: 17px; height: 17px; }
  .main-area { margin: 0 0 61px; }
  .topbar { height: 54px; padding: 0 16px; }
  .topbar-date { display: none; }
  .topbar-right { gap: 8px; }
  .avatar { width: 29px; height: 29px; }
  .page-content { padding: 25px 15px 35px; }
  .page-heading { min-height: 65px; align-items: center; margin-bottom: 18px; }
  .page-heading h1 { font-size: 22px; }
  .page-heading p { max-width: 430px; font-size: 10px; line-height: 1.5; }
  .page-heading > div:first-child { min-width: 0; }
  .page-heading .section-kicker { font-size: 8px; }
  #page-actions .button { min-height: 36px; padding: 0 9px; gap: 5px; font-size: 10px; white-space: nowrap; }
  .metric-grid { gap: 8px; margin-bottom: 10px; }
  .metric { min-height: 106px; padding: 12px; }
  .metric-top { font-size: 9px; }
  .metric-icon { width: 27px; height: 27px; }
  .metric > strong { margin-top: 10px; font-size: 20px; }
  .metric > small { font-size: 8px; }
  .overview-grid .surface { min-height: auto; padding: 15px 13px; }
  .surface-heading h2 { font-size: 13px; }
  .node-overview-row { gap: 7px; }
  .mini-node-icon { width: 29px; height: 29px; }
  .node-overview-name { min-width: 80px; }
  .node-overview-lines { display: none; }
  .node-overview-row .status-badge { margin-left: auto; }
  .customer-preview { padding: 15px 12px 0; }
  .table-toolbar { min-height: 54px; padding: 0 12px; }
  .data-table th, .data-table td { padding-right: 10px; padding-left: 10px; }
  .node-admin-grid, .customer-node-grid, .account-grid { grid-template-columns: 1fr; }
  .node-card { padding: 15px; }
  .integration-note { align-items: flex-start; padding: 13px; }
  .integration-note .status-badge { display: none; }
  .customer-summary { min-height: 151px; padding: 19px; }
  .customer-welcome h2 { font-size: 17px; }
  .customer-welcome p { max-width: 240px; font-size: 9px; line-height: 1.5; }
  .summary-graphic { width: 115px; max-width: 35%; }
  .summary-node { width: 43px; height: 45px; }
  .summary-node svg { width: 14px; height: 14px; }
  .summary-connector { left: 45px; right: 45px; }
  .customer-metrics { margin-top: 9px; }
  .customer-section-heading { margin-top: 22px; }
  .customer-node-card { padding: 15px; }
  .service-details { gap: 11px; }
  .subscription-value code { max-width: 170px; }
  .customer-subscription { align-items: flex-end; }
  .customer-subscription code { max-width: 155px; }
  .activity-surface .activity-row time { font-size: 7px; }
  .app-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 20px); }
  .dialog-card { max-height: calc(100vh - 20px); }
  .dialog-head, .dialog-body { padding-right: 15px; padding-left: 15px; }
  .dialog-actions { padding-right: 15px; padding-left: 15px; }
  .two-fields { gap: 8px; }
  .node-choice .status-badge { display: none; }
}
@media (max-width: 390px) {
  .nav-item { min-width: 82px; }
  .breadcrumb > span, .breadcrumb > svg { display: none; }
  .user-label { max-width: 105px; }
  .user-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-heading { align-items: flex-end; }
  .page-heading h1 { font-size: 20px; }
  #page-actions .button { padding: 0 7px; }
  .auth-aside { min-height: 196px; }
  .auth-main { min-height: calc(100vh - 196px); }
  .customer-summary { padding: 16px; }
  .customer-welcome h2 { font-size: 15px; }
}

/* Admin workspace: restrained blue and white system UI. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Noto Sans SC", Arial, sans-serif;
  color: #172033;
  background: #f5f7fa;
  --ink: #172033;
  --muted: #68758a;
  --line: #e3e7ee;
  --paper: #fff;
  --canvas: #f5f7fa;
  --green: #3158bd;
  --green-deep: #25479d;
  --green-pale: #edf2ff;
  --blue: #3158bd;
  --blue-pale: #edf2ff;
  --yellow-pale: #fff7df;
  --orange-pale: #fff0ea;
  --shadow: 0 18px 48px rgba(22, 33, 61, .13);
}

body { background: var(--canvas); }
.sidebar { width: 228px; padding: 28px 15px 18px; border-right: 0; color: #eaf0ff; background: #3151ad; }
.sidebar .brand { margin: 0 0 48px 9px; color: #fff; }
.sidebar .brand-mark { width: 32px; height: 32px; border-radius: 7px; color: #3151ad; background: #dce6ff; }
.workspace-label { margin-bottom: 14px; color: rgba(235, 241, 255, .66); font-family: inherit; font-size: 11px; letter-spacing: 0; }
.side-nav { gap: 4px; }
.nav-item { min-height: 44px; border-radius: 4px; color: rgba(240, 245, 255, .78); font-size: 14px; }
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-item.active { color: #fff; background: rgba(10, 35, 112, .34); }
.nav-item.active svg { color: #fff; }
.nav-item > i { top: 8px; bottom: 8px; background: #fff; }
.side-status { min-height: 50px; margin: 0 3px 11px; border-color: rgba(255,255,255,.2); color: rgba(240,245,255,.82); font-family: inherit; font-size: 11px; }
.side-status small { color: rgba(240,245,255,.58); font-size: 10px; }
.status-pulse { background: #b8f0c3; box-shadow: 0 0 0 4px rgba(184, 240, 195, .16); }
.signout { color: rgba(240,245,255,.8); }
.main-area { margin-left: 228px; }
.topbar { height: 70px; padding: 0 42px; border-bottom-color: #e3e7ee; background: #fff; }
.breadcrumb { color: #8995a8; font-family: inherit; font-size: 12px; }
.breadcrumb strong { color: #24304a; font-size: 14px; }
.topbar-date { color: #8b96a8; font-size: 12px; }
.user-label strong { color: #26324a; font-size: 13px; }
.user-label span { color: #8490a3; font-size: 11px; }
.avatar, .customer-avatar { border-color: #d4def7; color: #3151ad; background: #edf2ff; }
.page-content { width: min(100%, 1540px); padding: 40px 42px 60px; }
.page-heading { min-height: 78px; margin-bottom: 28px; }
.page-heading .section-kicker { color: #71809a; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.page-heading h1 { color: #172033; font-size: 30px; font-weight: 700; }
.page-heading p { color: #71809a; font-size: 14px; }
.button { min-height: 42px; border-radius: 4px; padding: 0 17px; font-size: 14px; }
.button-dark { color: #fff; background: #3158bd; }
.button-dark:hover { background: #25479d; }
.button-outline { color: #3151ad; border-color: #cbd5eb; background: #fff; }
.button-outline:hover { border-color: #3158bd; background: #f3f6ff; }
.button-quiet { color: #3158bd; }
.button-small { min-height: 35px; font-size: 13px; }
.surface, .metric, .node-card, .customer-node-card { border-color: #e0e5ed; border-radius: 5px; box-shadow: 0 2px 8px rgba(24, 38, 73, .025); }
.surface-heading h2 { color: #24304a; font-size: 17px; }
.surface-heading .section-kicker { color: #8793a7; font-family: inherit; font-size: 11px; font-weight: 600; }
.metric { min-height: 130px; padding: 18px 19px; }
.metric-top { color: #69778d; font-size: 13px; }
.metric-icon { color: #3158bd; background: #edf2ff; }
.metric > strong { color: #172033; font-size: 26px; }
.metric > small { color: #8793a7; font-size: 12px; }
.table-toolbar { min-height: 68px; padding: 0 20px; border-bottom-color: #e3e7ee; }
.search-box { color: #8b97aa; }
.search-box input { font-size: 14px; }
.table-count { color: #7b879b; font-size: 13px; }
.data-table th { height: 44px; color: #69778d; background: #f8f9fb; font-size: 12px; font-weight: 600; }
.data-table td { height: 70px; color: #5e6c83; font-size: 13px; }
.customer-cell strong { color: #26324a; font-size: 13px; }
.customer-cell small { color: #7b879b; font-size: 12px; }
.status-badge { min-height: 25px; padding: 0 9px; font-size: 11px; }
.node-title-row h3, .customer-node-head h3 { color: #24304a; font-size: 18px; }
.node-description { color: #71809a; font-size: 12px; }
.node-meta { color: #71809a; font-size: 12px; }
.node-protocol-list span { color: #4f6180; background: #f0f4fb; font-size: 11px; }
.customer-summary { min-height: 180px; border-radius: 6px; background: #26354d; }
.customer-welcome h2 { font-size: 23px; }
.customer-welcome p { color: #c1cad8; font-size: 13px; }
.customer-section-heading h2 { color: #24304a; font-size: 18px; }
.customer-section-heading > span { color: #71809a; font-size: 12px; }
.field-label { color: #71809a; font-size: 11px; }
.service-details span:not(.status-badge), .socks-access-order { color: #8793a7; font-size: 11px; }
.service-details strong { color: #40516c; font-size: 12px; }
.customer-subscription code, .socks-access code { color: #51617b; font-size: 11px; }
.icon-button { width: 34px; height: 34px; color: #64748b; border-radius: 4px; }
.icon-button:hover { border-color: #ccd7ee; background: #f2f5fc; }
.app-dialog { width: min(640px, calc(100vw - 28px)); max-height: min(92vh, 820px); border-radius: 8px; box-shadow: 0 24px 70px rgba(17, 28, 54, .22); }
.app-dialog::backdrop { background: rgba(25, 36, 54, .5); backdrop-filter: blur(3px); }
.dialog-card { max-height: min(92vh, 820px); border-color: #e0e5ed; border-radius: 8px; }
.dialog-head { padding: 22px 24px; border-bottom-color: #e4e8ef; }
.dialog-head h2 { color: #172033; font-size: 20px; }
.dialog-head .section-kicker { color: #71809a; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.dialog-body { gap: 17px; padding: 23px 24px 24px; }
.dialog-body > label, .node-edit-fields label, .vps-entry label { color: #34425c; font-size: 13px; }
input, textarea, select { border-color: #d6deeb; border-radius: 5px; }
input, select { height: 46px; padding: 0 14px; font-size: 14px; }
input:focus, textarea:focus, select:focus { border-color: #5575c6; box-shadow: 0 0 0 3px rgba(49, 88, 189, .13); }
.dialog-actions { padding: 15px 24px; border-top-color: #e4e8ef; background: #fafbfc; }
.dialog-actions .button { min-height: 42px; }
.field-label { font-weight: 600; }
.node-choice-list { border-color: #dce3ef; border-radius: 5px; }
.node-choice { min-height: 58px; padding: 9px 12px; border-top-color: #e9edf3; }
.choice-copy strong { color: #34425c; font-size: 13px; }
.choice-copy small { color: #7b879b; font-size: 11px; }
.choice-check { width: 18px; height: 18px; border-color: #bec9dc; }
.node-choice input:checked + .choice-check { border-color: #3158bd; background: #3158bd; }
.form-hint { padding: 12px 13px; color: #7e6e3f; background: #fff8e6; font-size: 12px; line-height: 1.55; }
.vps-entry { padding: 15px; border-color: #dce3ef; background: #f8faff; }
.vps-entry-head { color: #34425c; font-size: 13px; }
.toast { border-color: #cdd9f3; color: #3151ad; background: #f2f5ff; font-size: 13px; }
.toast[data-type="error"] { border-color: #f0d2cc; color: #9b5146; background: #fff6f4; }

@media (max-width: 760px) {
  .sidebar { width: auto; }
  .main-area { margin: 0 0 61px; }
  .topbar { padding: 0 16px; }
  .page-content { padding: 28px 15px 38px; }
  .page-heading h1 { font-size: 24px; }
  .page-heading p { font-size: 12px; }
  .nav-item { font-size: 11px; }
  .dialog-head { padding: 18px 16px; }
  .dialog-body { padding: 19px 16px 20px; }
  .dialog-actions { padding: 13px 16px; }
}

.section-kicker, .eyebrow { font-family: inherit; font-size: 12px; }
.workspace-label { font-size: 12px; }
.side-status, .side-status small { font-size: 12px; }
.metric > small { font-size: 12px; }
.node-overview-name strong, .activity-row strong, .customer-cell strong { font-size: 13px; }
.node-overview-name span, .node-overview-lines, .activity-row small, .activity-row time { font-size: 12px; }
.activity-full .activity-row time { font-size: 12px; }
.empty-state > span, .table-count, .customer-cell small { font-size: 12px; }
.version-tag, .node-admin-actions, .current-task-empty, .current-task > header strong { font-size: 12px; }
.current-task-title span, .current-task-title strong, .current-task-message, .current-task-error, .current-task-summary { font-family: inherit; font-size: 12px; }
.subscription-user > strong, .subscription-socks > strong, .subscription-line { font-size: 12px; }
.subscription-line code, .subscription-socks code { font-size: 12px; }
.field-label { font-size: 12px; }
.profile-surface > p, .profile-detail, .profile-detail > strong, .account-note p, .password-form label { font-size: 13px; }
.integration-note strong, .integration-note p, .empty-inline, .data-note { font-size: 12px; }
.form-hint { font-size: 12px; }

@media (max-width: 760px) {
  .deployment-result-nodes { grid-template-columns: 1fr; }
  .deployment-result-toolbar { align-items: flex-start; flex-direction: column; }
}

/* Keep connection credentials readable when addresses or passwords are long. */
.socks-access { align-items: stretch; }
.socks-access-content { width: 100%; min-width: 0; }
.socks-access-head, .subscription-socks-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.socks-access-head .field-label { margin: 0; }
.socks-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 11px; }
.socks-kv-item { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 9px; }
.socks-kv-item span { color: #71809a; font-size: 12px; line-height: 1.55; }
.socks-kv-item code { min-width: 0; color: #24304a; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; }
.socks-empty { padding-top: 8px; color: #8793a7; font-size: 12px; }
.subscription-socks { display: block; }
.subscription-socks-head { margin-bottom: 10px; }
.subscription-socks-head strong { margin: 0; color: #34425c; font-size: 13px; }
.subscription-socks .socks-kv { margin-top: 0; }
.deployment-result-socks { display: block; }
.deployment-result-socks > strong { display: block; margin-bottom: 10px; color: #34425c; font-size: 13px; }
.deployment-result-socks .socks-kv { margin-top: 0; }

@media (max-width: 520px) {
  .socks-kv { grid-template-columns: 1fr; }
}