:root {
  --navy: #110b2c;
  --purple: #673de6;
  --purple-dark: #5025d1;
  --purple-soft: #f0ebff;
  --page: #f4f4f6;
  --sidebar: #ececef;
  --card: #ffffff;
  --ink: #2f2f35;
  --muted: #727179;
  --line: #e2e2e5;
  --success: #00aa8d;
  --radius: 16px;
  --shadow: 0 2px 8px rgba(22, 18, 43, .035);
}

* { box-sizing: border-box; }
html { min-width: 320px; max-width: 100%; overflow-x: hidden; background: var(--navy); }
body { max-width: 100%; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--page); font-family: Inter, Arial, sans-serif; font-size: 14px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 19px; height: 19px; stroke-width: 1.8; }

.app-shell { min-height: 100vh; padding-top: 48px; background: var(--page); }
.topbar { position: fixed; z-index: 40; inset: 0 0 auto; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; color: #fff; background: var(--navy); }
.topbar-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.brand-mark { position: relative; width: 24px; height: 27px; color: #fff; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; left: 1px; width: 21px; height: 8px; border: 4px solid currentColor; transform: skewY(28deg); }
.brand-mark::before { top: 2px; border-bottom: 0; }
.brand-mark::after { bottom: 2px; border-top: 0; }
.topbar-tools { display: flex; align-items: center; gap: 10px; }
.referral, .agent-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 13px; border-radius: 10px; font-size: 12px; }
.referral { background: #372076; }
.agent-pill { border: 1px solid #d82fe7; background: transparent; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #fff; background: rgba(255,255,255,.06); cursor: pointer; font-size: 11px; font-weight: 600; transition: border-color .18s, background .18s, color .18s; }
.theme-toggle:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.11); }
.theme-toggle svg { width: 16px; height: 16px; }
.icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.topbar .icon-button:hover { background: rgba(255,255,255,.08); }

.workspace { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 48px); }
.sidebar { position: fixed; z-index: 30; top: 48px; bottom: 0; left: 0; width: 236px; padding: 18px 12px 26px; overflow-y: auto; background: var(--sidebar); border-right: 1px solid #dedee2; }
.nav-group-title { display: flex; justify-content: space-between; margin: 21px 10px 8px; color: #77767e; font-size: 11px; font-weight: 500; }
.nav-item, .subnav-item { width: 100%; display: flex; align-items: center; gap: 13px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; color: #3f3e43; background: transparent; text-align: left; cursor: pointer; }
.nav-item:hover, .subnav-item:hover { background: rgba(255,255,255,.62); }
.nav-item.active, .subnav-item.active { color: #27262b; background: #fff; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.025); }
.nav-item .chevron { width: 15px; height: 15px; margin-left: auto; }
.nav-item .external { width: 15px; height: 15px; margin-left: auto; color: #77767d; }
.nav-item .beta { margin-left: auto; padding: 2px 7px; color: var(--purple); border-radius: 6px; background: #e8defd; font-size: 10px; }
.vps-only-sidebar { padding-top: 22px; }
.vps-only-sidebar .nav-group-title { margin-top: 0; margin-bottom: 10px; color: #77767e; font-size: 11px; }
.vps-main-item { min-height: 46px; }
.vps-nav-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; color: #3a393f; }
.vps-nav-icon svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vps-main-item.active .vps-nav-icon { color: #29282d; }
.subnav { position: relative; margin: 2px 0 5px 29px; padding-left: 12px; }
.subnav::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1px; background: #d6d6da; }
.subnav-item { min-height: 38px; padding-left: 12px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main { grid-column: 2; min-width: 0; overflow-x: hidden; padding: 28px 28px 54px; background-color: var(--page); background-image: radial-gradient(circle, rgba(103,61,230,.12) 1px, transparent 1.3px); background-size: 6px 6px; background-position: 63% 0; }
.main::before { content: ""; position: fixed; z-index: 0; top: 48px; right: 0; bottom: 0; width: calc(100% - 236px); background: linear-gradient(90deg, rgba(244,244,246,.98) 0 38%, rgba(244,244,246,.72) 56%, rgba(244,244,246,.96) 88%); pointer-events: none; }
.page { position: relative; z-index: 1; width: min(100%, 1180px); min-width: 0; max-width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; min-width: 0; max-width: 100%; gap: 18px; margin-bottom: 18px; }
.page-head > div { min-width: 0; max-width: 100%; }
.page-head h1 { margin: 11px 0 0; font-size: 25px; line-height: 1.2; font-weight: 500; letter-spacing: -.025em; }
.breadcrumbs { display: flex; align-items: center; min-width: 0; max-width: 100%; gap: 7px; color: #65646c; font-size: 12px; }
.breadcrumbs svg { width: 15px; height: 15px; }
.breadcrumbs span:last-child { color: #29282e; font-weight: 600; }

.card { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.card + .card { margin-top: 20px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 61px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.card-header h2, .card-title { margin: 0; font-size: 16px; font-weight: 600; }
.card-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.card-body { padding: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 9px; color: #424148; background: #fff; font-weight: 600; font-size: 12px; cursor: pointer; }
.btn:hover { border-color: #c8bbed; }
.btn-primary { color: #fff; border-color: var(--purple); background: var(--purple); }
.btn-primary:hover { background: var(--purple-dark); }
.btn-dark { color: #fff; border-color: #19191d; background: #19191d; }
.btn-danger { color: #b42332; }
.btn-link { padding: 0; border: 0; color: var(--purple); background: transparent; }
.btn svg { width: 15px; height: 15px; }
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; color: #fff; border-radius: 50%; background: var(--success); }
.status-dot svg { width: 12px; height: 12px; stroke-width: 3; }
.status-badge { padding: 5px 9px; color: #168469; border-radius: 7px; background: #dff5ed; font-size: 12px; font-weight: 600; }
.muted-badge { padding: 3px 7px; color: #7d7c83; border-radius: 6px; background: #eeeeef; font-size: 10px; }
.separator-label { display: flex; align-items: center; gap: 12px; margin: 23px 0; color: #77767d; font-size: 10px; text-transform: uppercase; }
.separator-label::before, .separator-label::after { content: ""; height: 1px; flex: 1; background: #dedee2; }

.login-view { min-height: 100vh; padding: 28px 42px; background: #eeedf8; border-top: 4px solid var(--navy); }
.login-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.login-brand { display: inline-flex; align-items: center; gap: 11px; color: #17102f; font-size: 20px; font-weight: 800; letter-spacing: .045em; }
.login-brand .brand-mark { color: var(--purple); width: 25px; filter: drop-shadow(0 3px 7px rgba(103,61,230,.24)); }
.login-brand > span:last-child { color: var(--purple); }
.login-card { position: relative; width: min(430px, calc(100vw - 32px)); margin: 47px auto 0; padding: 42px 37px 36px; overflow: hidden; border: 1px solid #bbaaf0; border-radius: 15px; background: linear-gradient(180deg, #fff 0%, #fdfcff 100%); box-shadow: 0 20px 55px rgba(54,31,122,.15), 0 3px 10px rgba(20,18,40,.07); }
.login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #4d27d0, #794ff0, #4d27d0); }
.login-card h1 { margin: 0 0 26px; text-align: center; color: #271153; font-size: 31px; }
.social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.social-button { height: 48px; display: grid; place-items: center; border: 1px solid #9fbbeb; border-radius: 7px; background: #f1f6ff; box-shadow: 0 4px 12px rgba(29,80,153,.08); cursor: pointer; }
.social-button.facebook { color: #fff; border-color: #1877e8; background: #1877e8; box-shadow: 0 7px 17px rgba(24,119,232,.2); }
.social-button.github { color: #fff; border-color: #29313a; background: #29313a; box-shadow: 0 7px 17px rgba(41,49,58,.18); }
.social-symbol { display: grid; place-items: center; width: 22px; height: 22px; font-weight: 700; font-size: 18px; }
.social-symbol.google { color: #4285f4; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0; color: #626168; font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: #cec3ea; }
.form-field { display: grid; gap: 7px; margin-top: 16px; }
.form-field label { color: #43385d; font-size: 12px; font-weight: 600; }
.form-field input { width: 100%; height: 47px; padding: 0 14px; border: 1px solid #c5b6eb; border-radius: 7px; outline: none; background: #faf9ff; box-shadow: inset 0 1px 3px rgba(57,35,112,.04); }
.form-field input:focus { border-color: var(--purple); background: #fff; box-shadow: 0 0 0 3px rgba(103,61,230,.14); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 48px; }
.password-wrap .icon-button { position: absolute; right: 5px; top: 6px; color: #6d6c73; }
.forgot-link { display: inline-block; margin-top: 12px; color: #5528da; font-size: 13px; font-weight: 700; }
.login-submit { width: 100%; height: 50px; margin-top: 25px; border-radius: 7px; font-size: 14px; background: linear-gradient(135deg, #5630dc, #7245ed); box-shadow: 0 10px 25px rgba(103,61,230,.28); }

.vps-list-card { overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 14px 15px; color: #64636a; font-size: 11px; font-weight: 500; text-align: left; }
.data-table td { padding: 16px 15px; border-top: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
.server-cell { display: flex; align-items: center; gap: 13px; }
.debian-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; color: #d31762; border-radius: 10px; background: #f4f3f5; font-size: 25px; font-weight: 500; }
.server-cell strong, .server-cell small { display: block; }
.server-cell small { margin-top: 4px; color: #5f5e66; }
.table-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.addon-card { min-height: 200px; padding: 18px; }
.addon-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: #f4f4f5; }
.addon-card h2 { margin: 17px 0 9px; font-size: 16px; }
.addon-card p { min-height: 48px; margin: 0 0 19px; color: #696870; font-size: 12px; line-height: 1.45; }

.server-summary { overflow: hidden; }
.server-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 25px; }
.server-name { display: flex; min-width: 0; align-items: center; gap: 15px; }
.server-name > div { min-width: 0; }
.server-name h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 17px; }
.server-name p { margin: 6px 0 0; color: #65646c; }
.summary-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.quick-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(205px, 100%), 1fr)); gap: 14px 0; padding: 17px 25px; border-top: 1px solid var(--line); }
.quick-info span { min-width: 0; padding: 0 20px; color: #696870; border-right: 1px solid var(--line); overflow-wrap: anywhere; }
.quick-info span:first-child { padding-left: 0; }
.quick-info span:last-child { border-right: 0; }
.quick-info b { color: #3a3940; font-weight: 500; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; padding: 27px 25px; border-top: 1px solid var(--line); }
.metric { min-width: 0; min-height: 98px; padding: 17px; border: 1px solid #ededee; border-radius: 14px; }
.metric-head { display: flex; justify-content: space-between; color: #4d4c53; }
.metric-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, 44%); align-items: end; gap: 12px; margin-top: 10px; }
.metric-ring .metric-body { grid-template-columns: minmax(0, 1fr) 54px; }
.metric-value { min-width: 0; font-size: clamp(18px, 2vw, 21px); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.metric-chart { width: 100%; height: 42px; }
.metric-chart path { fill: none; stroke: var(--purple); stroke-width: 2; }
.metric-chart .area { fill: url(#metricGradient); stroke: none; }
.ring { justify-self: end; width: 54px; height: 54px; border: 6px solid #eeeeef; border-top-color: var(--purple); border-radius: 50%; transform: rotate(28deg); }
.quick-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; margin-top: 18px; }
.quick-card { min-height: 82px; padding: 17px; }
.quick-card strong, .quick-card span { display: block; }
.quick-card strong { margin-top: 9px; font-size: 16px; }

.settings-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }
.settings-row:first-child { border-top: 0; }
.row-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #f2f2f3; }
.settings-row h3 { margin: 0; font-size: 13px; }
.settings-row p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.password-action { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.password-action input { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; }

.simple-table th, .simple-table td { height: 48px; padding-inline: 16px; }
.article-row { display: flex; align-items: center; justify-content: space-between; padding: 19px; }
.toggle { position: relative; width: 34px; height: 20px; border: 0; border-radius: 99px; background: #ceced1; cursor: pointer; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .2s; }
.toggle.on { background: var(--purple); }
.toggle.on::after { transform: translateX(14px); }

.os-current { display: flex; gap: 12px; padding: 15px 20px 22px; }
.os-current .debian-mark { width: 26px; height: 26px; background: transparent; font-size: 22px; }
.os-current h3 { margin: 2px 0 12px; }
.os-current p { margin: 0; color: #696870; font-size: 12px; line-height: 1.45; }
.os-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { min-height: 31px; padding: 0 15px; border: 0; border-radius: 99px; background: #f1f1f2; cursor: pointer; font-size: 12px; }
.tab.active { color: #fff; background: #222226; }
.search { display: flex; align-items: center; gap: 8px; width: 220px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; }
.search input { min-width: 0; border: 0; outline: 0; }
.os-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr)); gap: 12px; }
.os-option { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }
.os-option .os-name { color: #303039; font-weight: 500; }
.os-logo { width: 24px; height: 24px; flex: 0 0 24px; display: inline-grid; place-items: center; }
.os-logo svg { display: block; width: 100%; height: 100%; }
.os-current > .os-logo { width: 28px; height: 28px; flex-basis: 28px; margin-top: 1px; }
.os-favorite { width: 15px; height: 15px; margin-left: auto; color: #55545e; fill: #55545e; stroke-width: 1.8; }
.os-option:hover { border-color: #b8a8f3; background: #faf9ff; }

.license-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); gap: 16px; }
.license-card { min-height: 180px; padding: 20px; }
.license-logo { overflow: hidden; }
.license-logo svg { display: block; width: 31px; height: 31px; }
.license-card h2 { margin: 14px 0 7px; font-size: 15px; }
.license-card p { min-height: 36px; margin: 0; color: #67666d; font-size: 11px; line-height: 1.4; }
.license-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 17px; }
.license-price small, .license-price strong { display: block; }
.license-price strong { margin-top: 3px; }

.upgrade-banner { display: flex; align-items: center; gap: 15px; padding: 17px 20px; }
.upgrade-banner > div:nth-child(2) { flex: 1; }
.upgrade-banner h2 { margin: 0; font-size: 14px; }
.upgrade-banner p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.backup-note { padding: 12px 16px; color: #636269; border-top: 1px solid var(--line); background: #f7f7f8; font-size: 11px; }

.range-tabs { display: flex; gap: 9px; margin-bottom: 19px; }
.chart-card { overflow: hidden; }
.chart-wrap { position: relative; padding: 18px 21px 24px; }
.big-chart { width: 100%; height: 160px; }
.big-chart .grid { stroke: #e5e5e7; stroke-width: 1; }
.big-chart .line { fill: none; stroke: var(--purple); stroke-width: 2.2; }
.big-chart .point { fill: var(--purple); }
.big-chart .point-hit { fill: transparent; cursor: pointer; }
.big-chart .chart-point { outline: none; }
.big-chart .chart-point.active .point,
.big-chart .chart-point:focus .point { r: 5px; fill: #6741ed; stroke: #c5b7ff; stroke-width: 5px; }
.big-chart text { fill: #77767e; font-size: 10px; }
.chart-tooltip { position: absolute; z-index: 4; min-width: 164px; padding: 9px 12px; border: 1px solid #6c4ce4; background: #fff; color: #34323b; box-shadow: 0 6px 18px rgba(28,18,65,.15); transform: translateX(-50%); pointer-events: none; text-align: center; opacity: 1; transition: opacity .12s ease; }
.chart-tooltip[aria-hidden="true"] { opacity: 0; visibility: hidden; }
.chart-tooltip strong, .chart-tooltip span { display: block; white-space: nowrap; }
.chart-tooltip strong { font-size: 13px; font-weight: 500; }
.chart-tooltip span { margin-top: 7px; color: #77737e; font-size: 11px; }

.empty-card { min-height: 395px; display: grid; place-items: center; text-align: center; }
.empty-state { width: min(430px, 86%); }
.empty-illustration { position: relative; width: 150px; height: 118px; margin: 0 auto 9px; color: #d8dbe7; }
.empty-illustration svg { width: 100%; height: 100%; stroke-width: 1.2; }
.firewall-illustration { width: 180px; height: 125px; margin-bottom: 11px; color: #d6dae6; }
.firewall-illustration svg { stroke-width: initial; overflow: visible; }
.empty-state h2 { margin: 8px 0 9px; font-size: 18px; }
.empty-state p { margin: 0 auto 24px; color: #707078; font-size: 12px; line-height: 1.55; }
.learn-link { display: flex; width: max-content; align-items: center; gap: 5px; margin: 16px auto 0; color: var(--purple); font-size: 12px; }
.learn-link svg { width: 13px; height: 13px; }

.api-intro { text-align: center; }
.api-intro h1 { margin: 0 0 15px; font-size: 29px; font-weight: 500; }
.ide-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ide-tab { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 13px; border: 0; border-radius: 99px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; }
.ide-tab.active { color: #fff; background: #1e1e21; }
.connector-card { display: grid; grid-template-columns: 1.05fr .95fr; gap: 25px; padding: 20px; }
.os-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 99px; background: #f2f2f3; }
.os-tab { height: 34px; border: 0; border-radius: 99px; background: transparent; cursor: pointer; }
.os-tab.active { background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.08); }
.connector-copy { padding-top: 28px; }
.connector-copy h2 { margin: 0 0 8px; font-size: 16px; }
.connector-copy p { margin: 0 0 17px; color: #6c6b72; font-size: 12px; line-height: 1.5; }
.connector-actions { display: flex; gap: 9px; }
.extension-preview { min-height: 180px; display: grid; place-items: center; padding: 20px; border-radius: 14px; background: radial-gradient(circle at 35% 30%, #3f1b8c, transparent 50%), linear-gradient(135deg, #15102c, #27105c); }
.extension-window { width: 82%; overflow: hidden; color: #fff; border: 1px solid #4a4650; border-radius: 11px; background: #151518; box-shadow: 0 15px 35px rgba(0,0,0,.38); }
.extension-titlebar { padding: 10px; border-bottom: 1px solid #414047; font-size: 9px; }
.extension-body { display: grid; grid-template-columns: 58px 1fr; gap: 13px; align-items: center; padding: 20px; }
.extension-logo { display: grid; place-items: center; width: 56px; height: 56px; color: var(--purple); font-size: 34px; font-weight: 700; }
.extension-body h3 { margin: 0 0 5px; font-size: 15px; }
.extension-body p { margin: 0 0 11px; color: #aaa9b0; font-size: 9px; }
.token-card { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; min-height: 127px; padding: 22px; color: #fff; border-radius: 14px; background: #1b1b1e; overflow: hidden; }
.token-card h2 { margin: 0 0 8px; }
.token-card p { margin: 0 0 17px; color: #c1c0c4; font-size: 11px; }
.token-icons { position: relative; display: grid; grid-template-columns: repeat(3, 48px); gap: 10px; margin: -22px -22px -22px 26px; padding: 18px 18px 17px 35px; transform: rotate(-3deg); }
.token-icons::before { position: absolute; z-index: 0; inset: 0 -22px 0 0; content: ""; background: linear-gradient(145deg, #352074, #241455 68%, #4b2384); clip-path: polygon(20% 0,100% 0,100% 100%,0 100%); }
.token-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.68); border-radius: 11px; background: #fff; box-shadow: 0 7px 17px rgba(0,0,0,.25); }
.token-icon svg { display: block; width: 31px; height: 31px; }

.mobile-menu { display: none; }
.toast { position: fixed; z-index: 80; right: 22px; bottom: 22px; max-width: 330px; padding: 13px 16px; color: #fff; border-radius: 10px; background: #25242a; box-shadow: 0 12px 36px rgba(0,0,0,.2); animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { width: 210px; }
  .main { padding: 24px 20px 44px; }
  .main::before { width: calc(100% - 210px); }
  .quick-info { grid-template-columns: 1fr 1fr; gap: 15px; }
  .quick-info span { padding: 0; border: 0; }
  .connector-card { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { padding: 0 13px; }
  .referral, .agent-pill { display: none; }
  .mobile-menu { display: inline-grid; }
  .workspace { display: block; }
  .sidebar { transform: translateX(-105%); width: min(290px, 86vw); transition: transform .22s; box-shadow: 12px 0 36px rgba(0,0,0,.14); }
  .sidebar.open { transform: translateX(0); }
  .main { width: 100%; padding: 22px 14px 38px; }
  .main::before { width: 100%; }
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: flex-start; }
  .page-head > div { width: 100%; }
  .page-head h1 { font-size: 22px; }
  .page-head .btn { justify-self: start; white-space: nowrap; }
  .breadcrumbs { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; white-space: nowrap; scrollbar-width: none; }
  .breadcrumbs::-webkit-scrollbar { display: none; }
  .breadcrumbs > * { flex: 0 0 auto; }
  .card-header { align-items: flex-start; flex-wrap: wrap; }
  .card-header > div { min-width: 0; }
  .card-body { padding: 17px; }
  .article-row { align-items: flex-start; flex-wrap: wrap; }
  .article-row > div { min-width: 0; }
  .settings-row { grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
  .settings-row > .btn { grid-column: 2; justify-self: start; }
  .upgrade-banner { align-items: flex-start; flex-wrap: wrap; }
  .upgrade-banner > div:nth-child(2) { min-width: calc(100% - 55px); }
  .upgrade-banner > strong { margin-left: 53px; }
  .os-controls { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
  .license-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
  .license-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
  .data-table { min-width: 680px; }
  .table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .server-summary-top { align-items: flex-start; flex-direction: column; }
  .summary-actions { width: 100%; }
  .summary-actions .btn { flex: 1; }
  .quick-info { grid-template-columns: 1fr; }
  .quick-info span { padding: 0; border-right: 0; }
  .metrics-grid { padding: 20px 16px; }
  .metric-body { grid-template-columns: minmax(0, 1fr) minmax(68px, 38%); }
  .metric-ring .metric-body { grid-template-columns: minmax(0, 1fr) 54px; }
  .password-action { grid-template-columns: 1fr; }
  .range-tabs { width: 100%; max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .range-tabs .tab { white-space: nowrap; }
  .connector-actions { flex-direction: column; }
  .connector-actions .btn { width: 100%; }
  .empty-card { min-height: 360px; }
  .empty-state { width: min(100%, 430px); padding: 28px 16px; }
  .token-icons { display: none; }
  .login-view { padding: 22px 18px; }
  .login-card { margin-top: 50px; padding: 34px 24px 29px; }
}

@media (max-width: 390px) {
  .topbar-brand { font-size: 12px; }
  .brand-mark { width: 21px; height: 24px; }
  .topbar-tools { gap: 3px; }
  .topbar .icon-button { width: 31px; height: 31px; }
  .main { padding-inline: 10px; }
  .page-head h1 { font-size: 20px; }
  .btn { padding-inline: 12px; }
  .login-card { width: 100%; padding-inline: 20px; }
  .social-row { gap: 9px; }
}

.login-theme-toggle { color: #3d315d; border-color: #c9bee8; background: rgba(255,255,255,.72); box-shadow: 0 4px 14px rgba(41,25,88,.08); }
.login-theme-toggle:hover { color: #542bd2; border-color: #9f8cda; background: #fff; }

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #101116;
  --sidebar: #17181e;
  --card: #1b1d24;
  --ink: #f1f2f5;
  --muted: #a7a9b2;
  --line: #353842;
  --shadow: 0 7px 24px rgba(0,0,0,.2);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell { background: var(--page); }
html[data-theme="dark"] .main { background-color: var(--page); background-image: radial-gradient(circle, rgba(130,96,235,.16) 1px, transparent 1.3px); }
html[data-theme="dark"] .main::before { background: linear-gradient(90deg, rgba(16,17,22,.98) 0 38%, rgba(16,17,22,.74) 56%, rgba(16,17,22,.96) 88%); }
html[data-theme="dark"] .sidebar { border-right-color: #2d3038; }
html[data-theme="dark"] .nav-group-title,
html[data-theme="dark"] .breadcrumbs { color: #a2a4ae; }
html[data-theme="dark"] .breadcrumbs span:last-child { color: #f0f1f4; }
html[data-theme="dark"] .nav-item,
html[data-theme="dark"] .subnav-item { color: #d4d5db; }
html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .subnav-item:hover { background: rgba(255,255,255,.055); }
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .subnav-item.active { color: #fff; background: #292b33; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
html[data-theme="dark"] .subnav::before { background: #393c45; }
html[data-theme="dark"] .vps-nav-icon { color: #d9dae0; }
html[data-theme="dark"] .card { border-color: var(--line); background: var(--card); }
html[data-theme="dark"] .card-header { border-bottom-color: var(--line); }
html[data-theme="dark"] .card-header p,
html[data-theme="dark"] .server-name p,
html[data-theme="dark"] .server-cell small,
html[data-theme="dark"] .settings-row p,
html[data-theme="dark"] .os-current p,
html[data-theme="dark"] .license-card p,
html[data-theme="dark"] .upgrade-banner p,
html[data-theme="dark"] .empty-state p { color: #aaacb5; }
html[data-theme="dark"] .btn { color: #e4e5e9; border-color: #444751; background: #24262e; }
html[data-theme="dark"] .btn:hover { border-color: #8069d7; background: #292b34; }
html[data-theme="dark"] .btn-primary { color: #fff; border-color: var(--purple); background: var(--purple); }
html[data-theme="dark"] .btn-dark { color: #fff; border-color: #555862; background: #0e0f13; }
html[data-theme="dark"] .btn-link { color: #a88cff; border-color: transparent; background: transparent; }
html[data-theme="dark"] .icon-button { color: #e2e3e7; }
html[data-theme="dark"] .status-badge { color: #58d7b8; background: rgba(0,170,141,.16); }
html[data-theme="dark"] .muted-badge { color: #bbbcc3; background: #30323a; }
html[data-theme="dark"] .data-table th { color: #abadb6; }
html[data-theme="dark"] .data-table td { border-top-color: var(--line); }
html[data-theme="dark"] .debian-mark,
html[data-theme="dark"] .addon-icon,
html[data-theme="dark"] .row-icon { background: #282a31; }
html[data-theme="dark"] .quick-info { border-top-color: var(--line); }
html[data-theme="dark"] .quick-info span { color: #afb0b8; border-right-color: var(--line); }
html[data-theme="dark"] .quick-info b { color: #f0f1f3; }
html[data-theme="dark"] .metrics-grid { border-top-color: var(--line); }
html[data-theme="dark"] .metric { border-color: #393c45; background: #202229; }
html[data-theme="dark"] .metric-head { color: #c7c8ce; }
html[data-theme="dark"] .ring { border-color: #373941; border-top-color: #7b55ef; }
html[data-theme="dark"] .quick-card { background: #1d1f26; }
html[data-theme="dark"] .password-action input,
html[data-theme="dark"] .search,
html[data-theme="dark"] .search input { color: #eceef2; border-color: #41444e; background: #202229; }
html[data-theme="dark"] .toggle { background: #454751; }
html[data-theme="dark"] .tab { color: #c2c3c9; background: #292b33; }
html[data-theme="dark"] .tab.active { color: #fff; background: #6941df; }
html[data-theme="dark"] .os-option { color: #e3e4e8; border-color: #3b3e47; background: #202229; }
html[data-theme="dark"] .os-option .os-name { color: #e3e4e8; }
html[data-theme="dark"] .os-option:hover { border-color: #8069d7; background: #272932; }
html[data-theme="dark"] .os-favorite { color: #a8aab2; fill: #a8aab2; }
html[data-theme="dark"] .backup-note { color: #b0b1b8; border-top-color: var(--line); background: #22242b; }
html[data-theme="dark"] .big-chart .grid { stroke: #383b44; }
html[data-theme="dark"] .big-chart text { fill: #a8aab2; }
html[data-theme="dark"] .chart-tooltip { color: #f1f2f5; border-color: #8264e6; background: #24262e; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
html[data-theme="dark"] .chart-tooltip span { color: #b8bac2; }
html[data-theme="dark"] .ide-tab { color: #dadbe0; background: #25272e; }
html[data-theme="dark"] .ide-tab.active { color: #fff; background: #6741dd; }
html[data-theme="dark"] .os-tabs { background: #24262d; }
html[data-theme="dark"] .os-tab { color: #c4c5cc; }
html[data-theme="dark"] .os-tab.active { color: #fff; background: #373943; box-shadow: inset 0 0 0 1px #464954; }
html[data-theme="dark"] .connector-copy p { color: #adafb8; }
html[data-theme="dark"] .empty-illustration { color: #5e6270; }
html[data-theme="dark"] .login-view { background: radial-gradient(circle at 50% 8%, #282044 0, #15131f 34%, #0f1015 72%); }
html[data-theme="dark"] .login-brand { color: #f3f1fa; }
html[data-theme="dark"] .login-card { border-color: #574d73; background: linear-gradient(180deg, #1d1b25 0%, #17161d 100%); box-shadow: 0 22px 62px rgba(0,0,0,.42), 0 3px 12px rgba(0,0,0,.24); }
html[data-theme="dark"] .login-card h1 { color: #f4f1ff; }
html[data-theme="dark"] .social-button { color: #e3e5eb; border-color: #4a4d58; background: #24262d; box-shadow: none; }
html[data-theme="dark"] .social-button.facebook { color: #fff; border-color: #1877e8; background: #1877e8; }
html[data-theme="dark"] .social-button.github { color: #fff; border-color: #373a42; background: #292c33; }
html[data-theme="dark"] .login-divider { color: #aaaab3; }
html[data-theme="dark"] .login-divider::before,
html[data-theme="dark"] .login-divider::after { background: #45414f; }
html[data-theme="dark"] .form-field label { color: #c7c2d5; }
html[data-theme="dark"] .form-field input { color: #f1f2f5; border-color: #4b4659; background: #222129; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
html[data-theme="dark"] .form-field input:focus { border-color: #8665ec; background: #27252f; box-shadow: 0 0 0 3px rgba(103,61,230,.2); }
html[data-theme="dark"] .login-theme-toggle { color: #ebe8f4; border-color: #575264; background: #24222c; box-shadow: none; }
html[data-theme="dark"] .login-theme-toggle:hover { color: #fff; border-color: #817398; background: #2c2935; }

@media (max-width: 720px) {
  .theme-toggle span { display: none; }
  .theme-toggle { width: 34px; padding: 0; }
  .login-theme-toggle span { display: inline; }
  .login-theme-toggle { width: auto; padding: 0 11px; }
}