/* ARX shared visual layer. Loaded last by public, cloud, and native desktop surfaces. */
:root {
  --arx-dark-canvas:#060907;
  --arx-dark-panel:rgba(18,27,22,.86);
  --arx-light-canvas:#eeeae1;
  --arx-light-canvas-top:#f7f4ed;
  --arx-light-surface:#fffdf8;
  --arx-light-surface-raised:#ffffff;
  --arx-light-surface-muted:#f6f2e9;
  --arx-light-ink:#1d2821;
  --arx-light-muted:#5e6b62;
  --arx-light-subtle:#758078;
  --arx-light-line:rgba(41,55,46,.11);
  --arx-light-line-strong:rgba(41,55,46,.18);
  --arx-light-green:#157347;
  --arx-light-green-soft:#e6f2e9;
  --arx-light-blue:#315f9f;
  --arx-light-shadow:0 12px 34px rgba(48,55,48,.075),0 1px 2px rgba(48,55,48,.05);
  --arx-light-shadow-raised:0 22px 55px rgba(48,55,48,.11),0 2px 5px rgba(48,55,48,.055);
}

/* Native uses the same cloud shell; only the data adapter differs. */
body.desktop-dashboard .top-nav { height:64px;position:fixed;top:10px;right:14px;left:14px;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--nav-bg,rgba(7,12,9,.9));border:1px solid var(--line-strong,var(--line));border-radius:18px;box-shadow:var(--glass-shadow,0 24px 72px rgba(0,0,0,.34));backdrop-filter:blur(26px) saturate(145%); }
body.desktop-dashboard .top-nav .nav-logo { display:flex;align-items:center;gap:16px; }
body.desktop-dashboard .top-nav .nav-logo img { width:124px;height:48px;object-fit:contain; }
html[data-theme="light"] body.desktop-dashboard .top-nav .nav-logo img { filter:invert(1); }
body.desktop-dashboard .top-nav .brand-divider { width:1px;height:28px;background:var(--line-strong,var(--line)); }
body.desktop-dashboard .top-nav .brand-label { color:var(--muted);font-size:.72rem;letter-spacing:.18em; }
body.desktop-dashboard .top-nav .user-profile { display:flex;align-items:center;gap:10px; }
body.desktop-dashboard .top-nav .plan-badge { min-height:38px;padding:0 12px;border:1px solid var(--line-strong,var(--line));border-radius:999px; }
body.desktop-dashboard > .sidebar { top:88px;right:auto;bottom:14px;left:14px;width:216px;margin:0;padding:12px;background:var(--sidebar-bg,rgba(9,15,11,.9));border-color:var(--line-strong,var(--line));border-radius:20px;box-shadow:var(--glass-shadow,0 24px 72px rgba(0,0,0,.34));backdrop-filter:blur(28px) saturate(140%); }
body.desktop-dashboard > .sidebar .brand { display:none; }
body.desktop-dashboard > main { width:auto;max-width:none;margin:0 14px 0 244px;padding:100px 24px 56px; }
body.desktop-dashboard .nav { min-height:44px;border-radius:13px; }

html[data-theme="light"] {
  --bg:var(--arx-light-canvas);
  --surface:var(--arx-light-surface);
  --surface-solid:var(--arx-light-surface);
  --surface-2:var(--arx-light-surface-muted);
  --card:var(--arx-light-surface);
  --card-top:var(--arx-light-surface-raised);
  --card-bottom:var(--arx-light-surface);
  --ink:var(--arx-light-ink);
  --text:var(--arx-light-ink);
  --muted:var(--arx-light-muted);
  --subtle:var(--arx-light-subtle);
  --line:var(--arx-light-line);
  --line-strong:var(--arx-light-line-strong);
  --green:var(--arx-light-green);
  --green-deep:#0f603a;
  --green-soft:var(--arx-light-green-soft);
  --blue:var(--arx-light-blue);
  --nav-bg:rgba(255,253,248,.96);
  --sidebar-bg:rgba(250,247,240,.97);
  --soft-fill:rgba(31,83,52,.055);
  --grid-line:transparent;
  --glass-shadow:var(--arx-light-shadow);
  color-scheme:light;
}

html[data-theme="light"] body,
html[data-theme="light"] body.dashboard-glass {
  color:var(--arx-light-ink);
  background:
    radial-gradient(circle at 92% -15%,rgba(255,255,255,.92),transparent 34rem),
    linear-gradient(145deg,var(--arx-light-canvas-top),var(--arx-light-canvas)) fixed;
}
html[data-theme="light"] body::before,
html[data-theme="light"] body.dashboard-glass::before,
html[data-theme="light"] body::after,
html[data-theme="light"] body.dashboard-glass::after { display:none!important;content:none!important;background:none!important; }

html[data-theme="light"] .top-nav,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .site-header .nav-wrap {
  background:var(--nav-bg);
  border-color:var(--arx-light-line);
  box-shadow:var(--arx-light-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="light"] .sidebar { background:var(--sidebar-bg); }

html[data-theme="light"] .page-hero,
html[data-theme="light"] .hero,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .telemetry-node,
html[data-theme="light"] .telemetry-item,
html[data-theme="light"] .overview-node-card,
html[data-theme="light"] .server-card,
html[data-theme="light"] .server-kpi-card,
html[data-theme="light"] .server-management-panel,
html[data-theme="light"] .analytics-panel,
html[data-theme="light"] .billing-card,
html[data-theme="light"] .public-plan,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .step-card,
html[data-theme="light"] .instruction-step,
html[data-theme="light"] .tunnel-card,
html[data-theme="light"] .tunnel-target,
html[data-theme="light"] .ops-card,
html[data-theme="light"] .user-card,
html[data-theme="light"] .activity-list,
html[data-theme="light"] .faq details {
  background:var(--arx-light-surface);
  border-color:var(--arx-light-line);
  box-shadow:var(--arx-light-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="light"] .page-hero,
html[data-theme="light"] .hero {
  background:linear-gradient(135deg,#fffdf8 0,#f8f5ed 100%);
}
html[data-theme="light"] .page-hero::after,
html[data-theme="light"] .hero::after,
html[data-theme="light"] .feature-card::after { opacity:.42; }

/* The dark theme's refracted glass strips read as stray rules on a pale canvas.
   Light mode gets depth from color washes and shadows instead of line art. */
html[data-theme="light"] .hero-refraction .glass-strips { display:none!important; }
html[data-theme="light"] .hero-refraction {
  background:
    radial-gradient(circle at 18% 20%,rgba(54,155,104,.16),transparent 36%),
    radial-gradient(circle at 82% 30%,rgba(83,135,199,.12),transparent 38%);
  mask-image:linear-gradient(to bottom,black 8%,transparent 92%);
}
html[data-theme="light"] .summary-card:hover,
html[data-theme="light"] .telemetry-node:hover,
html[data-theme="light"] .overview-node-card:hover,
html[data-theme="light"] .server-card:hover,
html[data-theme="light"] .server-kpi-card-action:hover,
html[data-theme="light"] .billing-card:hover,
html[data-theme="light"] .tunnel-card:hover { box-shadow:var(--arx-light-shadow-raised); }

html[data-theme="light"] .sidebar a.active-link,
html[data-theme="light"] .nav.active {
  color:#0d5b36;
  background:var(--arx-light-green-soft);
  border-color:rgba(21,115,71,.18);
  box-shadow:none;
}
html[data-theme="light"] .sidebar a.active-link::before { box-shadow:none; }
html[data-theme="light"] .brand-label,
html[data-theme="light"] .sidebar-label,
html[data-theme="light"] .sidebar-footer,
html[data-theme="light"] .side-label,
html[data-theme="light"] .side-foot { color:var(--arx-light-subtle);text-shadow:none; }

html[data-theme="light"] button:not(.btn-primary):not(.btn-start):not(.primary),
html[data-theme="light"] .button:not(.primary),
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-start),
html[data-theme="light"] .plan-badge {
  color:var(--arx-light-ink);
  background:var(--arx-light-surface-raised);
  border-color:var(--arx-light-line-strong);
  box-shadow:0 1px 2px rgba(48,55,48,.045);
  backdrop-filter:none;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .input-box,
html[data-theme="light"] .range-row,
html[data-theme="light"] .file-list,
html[data-theme="light"] .file-editor,
html[data-theme="light"] .properties-shell,
html[data-theme="light"] .node-name-input {
  color:var(--arx-light-ink);
  background:var(--arx-light-surface-raised);
  border-color:var(--arx-light-line-strong);
  box-shadow:inset 0 1px 2px rgba(48,55,48,.035);
}
html[data-theme="light"] .console,
html[data-theme="light"] .console-box,
html[data-theme="light"] .terminal-shell,
html[data-theme="light"] .properties-editor {
  color:#d8fbe3;
  background:#101713;
  border-color:#2c3c32;
  box-shadow:inset 0 1px 10px rgba(0,0,0,.16);
}
html[data-theme="light"] .modal,
html[data-theme="light"] dialog {
  color:var(--arx-light-ink);
  background:var(--arx-light-surface);
  border-color:var(--arx-light-line-strong);
  box-shadow:0 30px 90px rgba(48,55,48,.18);
  backdrop-filter:none;
}
html[data-theme="light"] .meter,
html[data-theme="light"] .metric-bar { background:#e5e1d8; }
html[data-theme="light"] .resource-ring::after { background:var(--arx-light-surface); }
html[data-theme="light"] .mini-console { background:#f1eee6; }
html[data-theme="light"] .server-address-card { background:linear-gradient(135deg,#edf5ef,#fffdf8); }
html[data-theme="light"] .activity-row { background:var(--arx-light-surface); }

/* User-controlled accessibility preferences. Values are local to the browser. */
html[data-a11y-large-text] { font-size:112.5%; }
html[data-a11y-high-contrast] {
  --muted:#d5e1d8;
  --subtle:#bdcbc1;
  --line:rgba(225,244,232,.34);
  --line-strong:rgba(225,244,232,.54);
}
html[data-theme="light"][data-a11y-high-contrast] {
  --muted:#34453a;
  --subtle:#46564b;
  --line:rgba(29,40,33,.27);
  --line-strong:rgba(29,40,33,.48);
}
html[data-a11y-underline-links] a:not(.button):not(.brand):not(.skip-link) {
  text-decoration:underline!important;
  text-decoration-thickness:.1em!important;
  text-underline-offset:.2em!important;
}
html[data-a11y-reduce-motion] { scroll-behavior:auto!important; }
html[data-a11y-reduce-motion] *,
html[data-a11y-reduce-motion] *::before,
html[data-a11y-reduce-motion] *::after {
  scroll-behavior:auto!important;
  transition-duration:.01ms!important;
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
}

.accessibility-link { min-height:44px;padding:0;border:0;background:none;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer; }
.accessibility-dialog { width:min(560px,calc(100% - 28px));padding:0;color:var(--ink,var(--text));background:var(--surface-solid,var(--card));border:1px solid var(--line-strong,var(--line));border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.32); }
.accessibility-dialog::backdrop { background:rgba(0,0,0,.72);backdrop-filter:blur(6px); }
.accessibility-content { padding:25px; }
.accessibility-head { display:flex;align-items:flex-start;justify-content:space-between;gap:18px; }
.accessibility-head h2 { margin:0;font:850 1.5rem Doto,monospace; }
.accessibility-head p { margin:7px 0 0;color:var(--muted);font-size:.85rem; }
.accessibility-options { display:grid;gap:10px;margin:20px 0; }
.accessibility-option { display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface,var(--card));cursor:pointer; }
.accessibility-option input { width:20px;height:20px;margin:2px 0 0;accent-color:var(--green);flex:none; }
.accessibility-option strong,.accessibility-option span { display:block; }
.accessibility-option span span { margin-top:3px;color:var(--muted);font-size:.82rem;line-height:1.5; }
.accessibility-actions { display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important; }
}
@media (max-width:820px) {
  body.desktop-dashboard .top-nav { height:64px;padding:0 12px; }
  body.desktop-dashboard .top-nav .brand-divider,body.desktop-dashboard .top-nav .brand-label { display:none; }
  body.desktop-dashboard > .sidebar { position:static;inset:auto;width:auto;margin:82px 12px 0;display:flex;overflow-x:auto;gap:5px;backdrop-filter:none; }
  body.desktop-dashboard > main { margin:0;padding:14px 12px 40px; }
  body.desktop-dashboard > .sidebar .side-label,body.desktop-dashboard > .sidebar .side-foot { display:none; }
  body.desktop-dashboard > .sidebar .nav { width:auto;flex:0 0 auto;white-space:nowrap; }
}
@media (max-width:520px) {
  body.desktop-dashboard .top-nav .version-badge { display:none; }
  body.desktop-dashboard .top-nav .nav-logo img { width:78px;height:36px; }
  html[data-a11y-large-text] { font-size:106.25%; }
}