:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #06080c;
  --bg-2: #0a0e14;
  --surface: #101820;
  --surface-2: #141c28;
  --side: #040508;
  --card: #0c1018;
  --card-solid: #101820;
  --field-bg: #0a0e14;
  --line: rgba(94, 196, 255, 0.1);
  --line-strong: rgba(94, 196, 255, 0.26);
  --ink: #f0f7ff;
  --muted: #9eb4cc;
  --faint: #6a849c;
  --table-ink: #e8f2fc;
  --accent: #5ee4a8;
  --accent-dim: rgba(94, 228, 168, 0.2);
  --gold: var(--accent);
  --gold-dim: var(--accent-dim);
  --green: #5ee4a8;
  --green-dim: rgba(94, 228, 168, 0.16);
  --coral: #ff8a7a;
  --coral-dim: rgba(255, 138, 122, 0.14);
  --btn-bg: linear-gradient(180deg, #b8ffd8 0%, #5ee4a8 42%, #28a870 100%);
  --btn-fg: #041810;
  --shadow: 0 24px 56px rgba(0, 0, 0, 0.65);
  --elev-1: 0 1px 0 rgba(184, 240, 255, 0.1) inset, 0 14px 36px rgba(0, 0, 0, 0.45);
  --glow-a: rgba(94, 196, 255, 0.32);
  --glow-b: rgba(56, 140, 220, 0.18);
  --crystal-edge: rgba(94, 196, 255, 0.22);
  --hero-image: url("/assets/logo.png");
  --sans: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --side-w: 252px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4ee;
  --bg-2: #efe9df;
  --surface: #ffffff;
  --surface-2: #f3efe8;
  --side: rgba(255, 252, 246, 0.92);
  --card: rgba(255, 255, 255, 0.92);
  --card-solid: #ffffff;
  --field-bg: rgba(255, 255, 255, 0.95);
  --line: rgba(26, 22, 16, 0.1);
  --line-strong: rgba(26, 22, 16, 0.16);
  --ink: #12110e;
  --muted: #5c574f;
  --faint: #8a847a;
  --green: #1a9d5c;
  --green-dim: rgba(26, 157, 92, 0.12);
  --coral: #d44b38;
  --coral-dim: rgba(212, 75, 56, 0.1);
  --btn-bg: linear-gradient(180deg, #2a2722 0%, #12110e 100%);
  --btn-fg: #faf7f0;
  --shadow: 0 24px 60px rgba(40, 32, 20, 0.12);
  --elev-1: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 40px rgba(40, 32, 20, 0.08);
  --glow-a: rgba(212, 175, 106, 0.2);
  --glow-b: rgba(94, 196, 255, 0.15);
}

html[data-text="soft"] { --ink: #e8e2d6; --muted: #afa89a; }
html[data-theme="light"][data-text="soft"] { --ink: #2a2722; --muted: #6f6a62; }
html[data-text="sharp"] { --ink: #ffffff; --muted: #c9c2b4; }
html[data-theme="light"][data-text="sharp"] { --ink: #000000; --muted: #3d3a34; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.content[aria-busy="true"] {
  opacity: 0.82;
  transition: opacity 0.1s ease;
  pointer-events: none;
}
body {
  min-height: 100vh;
  background-color: var(--bg-base, var(--bg));
  background-image:
    var(--scene-cover, none),
    var(--bg-layer-a, radial-gradient(1200px 600px at 85% -15%, var(--glow-a), transparent 55%)),
    var(--bg-layer-b, radial-gradient(900px 500px at 10% 20%, var(--glow-b), transparent 50%)),
    var(--bg-layer-c, linear-gradient(160deg, #0e1624, var(--bg-2), var(--bg)));
  background-size: cover, auto, auto, auto;
  background-position: center center, center, center, center;
  background-attachment: fixed, scroll, scroll, scroll;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[data-theme="dark"] .content,
html[data-theme="dark"] .main,
html[data-theme="dark"] .side {
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: var(--hero-image);
  background-repeat: no-repeat;
  background-position: 50% 42%;
  background-size: min(520px, 72vw);
  z-index: 0;
}
html[data-theme="light"] body::before {
  opacity: 0.05;
}
html[data-theme="dark"] body::before {
  opacity: 0.08;
}
html[data-atmosphere="crystal"][data-theme="dark"] {
  --bg: #06080c;
  --bg-2: #0a0e14;
  --surface: #101820;
  --surface-2: #161f2c;
  --side: #040508;
  --card: #0e141e;
  --card-solid: #121a26;
  --field-bg: #0a0e14;
  --line: rgba(94, 196, 255, 0.12);
  --line-strong: rgba(94, 196, 255, 0.3);
  --glow-a: rgba(94, 196, 255, 0.38);
  --glow-b: rgba(184, 240, 255, 0.12);
  --crystal-edge: rgba(94, 196, 255, 0.28);
}
html[data-atmosphere="crystal"][data-theme="dark"] .side {
  background: #040508;
  border-right-color: rgba(94, 196, 255, 0.2);
  box-shadow: inset -1px 0 0 rgba(94, 196, 255, 0.06);
}
html[data-atmosphere="crystal"][data-theme="dark"] .nav-glyph {
  background: #0e141e;
  border-color: rgba(94, 196, 255, 0.22);
  color: #b8ecff;
}
html[data-atmosphere="crystal"][data-theme="dark"] .group a.nav-item {
  color: #c8d8ea;
}
html[data-atmosphere="crystal"][data-theme="dark"] .group a.nav-item.active {
  background: rgba(94, 196, 255, 0.12);
  box-shadow: inset 3px 0 0 #5ec4ff;
}
html[data-atmosphere="crystal"][data-theme="dark"] .group a.nav-item.active .nav-glyph {
  background: rgba(94, 196, 255, 0.2);
  border-color: rgba(184, 240, 255, 0.35);
  color: #ffffff;
}
html[data-atmosphere="crystal"][data-theme="dark"] .bar {
  background: #0a0e14;
  border-bottom-color: rgba(94, 196, 255, 0.22);
}
html[data-atmosphere="crystal"][data-theme="dark"] .hero,
html[data-atmosphere="crystal"][data-theme="dark"] .metrics,
html[data-atmosphere="crystal"][data-theme="dark"] .panel,
html[data-atmosphere="crystal"][data-theme="dark"] .card {
  background: linear-gradient(180deg, #121a26 0%, #0c1018 100%);
  border-color: var(--crystal-edge);
  box-shadow:
    0 1px 0 rgba(184, 240, 255, 0.08) inset,
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(94, 196, 255, 0.04);
}
html[data-atmosphere="crystal"][data-theme="dark"] .chip-live,
html[data-atmosphere="crystal"][data-theme="dark"] .chip-balance,
html[data-atmosphere="crystal"][data-theme="dark"] .who {
  background: #0e141e;
  border-color: rgba(94, 196, 255, 0.22);
}
html[data-atmosphere="crystal"][data-theme="dark"] th {
  background: rgba(94, 196, 255, 0.06);
  border-bottom-color: rgba(94, 196, 255, 0.18);
}
html[data-atmosphere="crystal"][data-theme="dark"] .main::before {
  opacity: 0.22;
  background:
    radial-gradient(900px 480px at 100% -5%, rgba(94, 196, 255, 0.35), transparent 55%),
    radial-gradient(700px 360px at 0% 100%, rgba(40, 120, 200, 0.2), transparent 50%);
}
html[data-atmosphere="slate"][data-theme="dark"] {
  --bg: #3a4254;
  --bg-2: #353c4c;
  --surface: #454f62;
  --surface-2: #525d72;
  --side: #2e3544;
  --card: #4d576c;
  --card-solid: #4d576c;
  --field-bg: #383f4e;
  --glow-a: rgba(130, 170, 230, 0.2);
  --glow-b: rgba(212, 175, 106, 0.1);
}
html[data-atmosphere="slate"][data-theme="dark"] .side {
  background: #2e3544;
  border-right-color: rgba(255, 255, 255, 0.16);
}
html[data-atmosphere="slate"][data-theme="dark"] .nav-glyph {
  background: #424c5e;
}
html[data-atmosphere="slate"][data-theme="dark"] .group a.nav-item.active {
  background: #505a6e;
}
html[data-atmosphere="ocean"][data-theme="dark"] {
  --bg: #2d3a4f;
  --bg-2: #283444;
  --surface: #3d4a60;
  --surface-2: #455366;
  --side: #252d3c;
  --card: #424d62;
  --card-solid: #424d62;
  --field-bg: #353d4e;
  --glow-a: rgba(94, 196, 255, 0.2);
  --glow-b: rgba(212, 175, 106, 0.08);
}
html[data-atmosphere="ocean"][data-theme="dark"] .side {
  background: #252d3c;
}
html[data-atmosphere="ocean"][data-theme="dark"] .nav-glyph {
  background: #3a4558;
}
html[data-atmosphere="ocean"][data-theme="dark"] .group a.nav-item.active {
  background: #465268;
}
html[data-atmosphere="clean"][data-theme="dark"] {
  --bg: #4a6359;
  --bg-2: #445c52;
  --surface: #5a756a;
  --surface-2: #66887a;
  --side: #384f46;
  --card: #5e7c70;
  --card-solid: #5e7c70;
  --field-bg: #45584f;
  --glow-a: rgba(180, 230, 200, 0.2);
  --glow-b: rgba(212, 175, 106, 0.1);
}
html[data-atmosphere="forest"][data-theme="dark"] {
  --bg: #3d584c;
  --bg-2: #385248;
  --surface: #4a6a5c;
  --surface-2: #527264;
  --side: #324840;
  --card: #507060;
  --card-solid: #507060;
  --field-bg: #3a5046;
  --glow-a: rgba(100, 210, 150, 0.22);
  --glow-b: rgba(212, 175, 106, 0.12);
}
html[data-atmosphere="forest"][data-theme="dark"] .side {
  background: #324840;
  border-right-color: rgba(255, 255, 255, 0.16);
}
html[data-atmosphere="forest"][data-theme="dark"] .nav-glyph {
  background: #456055;
}
html[data-atmosphere="forest"][data-theme="dark"] .group a.nav-item.active {
  background: #4f6e60;
}
html[data-theme="dark"] .side {
  background: var(--side);
}
html[data-theme="dark"] .nav-glyph {
  background: #0e141e;
  border-color: rgba(94, 196, 255, 0.18);
}
html[data-theme="dark"] .group a.nav-item.active {
  background: rgba(94, 196, 255, 0.1);
}
html[data-bgphoto="1"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: soft-light;
  background-image: var(--user-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 0;
}
#zydex-theme-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
#zydex-glitter-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(0.35 + var(--glitter-opacity, 0.7) * 0.65);
}
.zydex-aurora-drift {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 120deg at 50% 50%, transparent, var(--accent-glow, var(--accent-dim)), transparent 40%);
  opacity: calc(var(--glitter-opacity, 0.5) * 0.12);
  filter: blur(80px);
}
html[data-motion="1"] .zydex-aurora-drift {
  animation: aurora-spin 48s linear infinite;
}
.zydex-holo-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  opacity: calc(var(--glitter-opacity, 0.5) * 0.35);
}
html[data-glitter="holographic"][data-motion="1"] .zydex-holo-veil {
  animation: holo-sweep 8s ease-in-out infinite;
}
@keyframes aurora-spin {
  to { transform: rotate(360deg); }
}
@keyframes holo-sweep {
  0%, 100% { background-position: 120% 0; }
  50% { background-position: -20% 0; }
}
#app { position: relative; z-index: 2; min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-dim); color: var(--ink); }

.gate {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  position: relative;
  overflow: hidden;
}
.gate::before,
.gate::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.gate::before {
  width: 420px;
  height: 420px;
  background: var(--accent-dim);
  top: -80px;
  right: 10%;
}
.gate::after {
  width: 320px;
  height: 320px;
  background: var(--glow-b);
  bottom: 5%;
  left: -60px;
}
.gate-copy,
.gate-panel {
  position: relative;
  z-index: 1;
}
.gate-copy {
  padding: 56px 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(135deg, transparent 40%, var(--accent-dim) 140%);
}
.gate-showcase {
  margin-top: 28px;
  border-radius: 24px;
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 200px;
  background:
    linear-gradient(160deg, var(--card-solid), transparent 70%),
    radial-gradient(circle at 20% 30%, var(--accent-dim), transparent 45%),
    var(--card);
  display: grid;
  place-items: center;
  padding: 24px;
}
.gate-showcase img {
  width: min(280px, 70%);
  opacity: 0.92;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.25));
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.mark {
  width: 34px;
  height: 27px;
  object-fit: contain;
  display: block;
  flex: none;
}
.brand-mark-only { gap: 0; }
.brand-mark-only .themed-mark,
.themed-mark {
  width: 38px;
  height: 30px;
  filter: none;
  opacity: 1;
}
.side .brand-mark-only .themed-mark {
  width: 42px;
  height: 34px;
}
.side .brand-mark-only {
  padding: 4px 8px 8px;
}
.gate h1 {
  font-weight: 500;
  font-size: clamp(52px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 18px;
}
.lede { max-width: 440px; color: var(--muted); font-size: 17px; margin: 0; }
.points { list-style: none; padding: 0; margin: 40px 0 0; max-width: 440px; }
.points li {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.points span, .quiet { color: var(--muted); }
.gate-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.gate-kicker {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.gate-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 36px;
  max-width: 520px;
}
.gate-features article {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
}
.gate-features strong { display: block; font-weight: 500; margin-bottom: 4px; }
.gate-features span { color: var(--muted); font-size: 13px; }
.gate-legal { margin-top: 28px; }
.gate-stack { width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.gate-card { display: none; }
.gate-card.on { display: block; }
.gate-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 18px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 248, 230, 0.04);
  border: 1px solid var(--line);
}
.gate-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 500;
}
.gate-tab.on {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.gate-foot { margin: 14px 0 0; text-align: center; }
.gate-admin { text-align: center; margin-top: 4px; }
button.texty.inline { display: inline; padding: 0; vertical-align: baseline; color: var(--accent); }
.success {
  background: var(--green-dim);
  color: var(--green);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
}
.sip-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.sip-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.caller-form { margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.caller-form label { margin-top: 0; }
.caller-row { display: flex; gap: 8px; align-items: center; }
.caller-row input { flex: 1; }
.caller-row .primary { flex: none; margin: 0; padding: 11px 18px; }
.card {
  width: min(420px, 100%);
  background: var(--card-solid);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--elev-1);
}
.card h2 { font-weight: 500; font-size: 34px; letter-spacing: -0.04em; margin: 0 0 6px; }
label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 6px; }
.checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.checkline input { width: auto; margin: 0; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--field-bg);
  border-radius: 12px;
  padding: 12px 13px;
  outline: none;
}
textarea { min-height: 84px; resize: vertical; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stir-kicker { margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stir-carrier { margin: 4px 0 8px; font-size: 1.65rem; font-weight: 530; color: #6ecf8f; letter-spacing: -0.02em; }
.stir-grid { display: grid; gap: 16px; margin-top: 18px; }
.stir-grid section h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 530; }
.stir-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; margin: 0 0 6px; font-size: 13px; }
.stir-row span { color: var(--muted); }
.stir-row code { word-break: break-all; font-size: 12px; }
.stir-btn { font-size: 12px; padding: 6px 10px; }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 3px var(--accent-dim); }
.primary, .ghost, .texty { border-radius: 999px; padding: 11px 16px; }
.primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #000);
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 10px 28px rgba(0, 0, 0, 0.28);
}
.primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.ghost {
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.texty { background: transparent; border: 0; color: var(--muted); padding-left: 0; }
.full { width: 100%; margin-top: 16px; }
.error {
  background: var(--coral-dim);
  color: var(--coral);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
}
.staff-box { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

.main {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 480px at 100% -5%, var(--glow-a), transparent 55%),
    radial-gradient(700px 360px at 0% 100%, var(--glow-b), transparent 50%);
  opacity: 0.18;
  z-index: 0;
}
html[data-atmosphere="slate"][data-theme="dark"] .main::before,
html[data-atmosphere="ocean"][data-theme="dark"] .main::before {
  opacity: 0.1;
}
.main .bar,
.main .content { position: relative; z-index: 1; }

.bg-pick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bg-pick {
  border: 2px solid var(--line);
  border-radius: 12px;
  min-height: 52px;
  padding: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--surface-2);
}
.bg-pick::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-preview, linear-gradient(135deg, #444, #222));
}
.bg-pick span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
}
.bg-pick.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.frame { min-height: 100vh; display: grid; grid-template-columns: var(--side-w) 1fr; }
.frame-admin { --side-w: 272px; }
.frame-admin .nav-text { font-size: 13.5px; line-height: 1.35; }
.frame-admin .group { gap: 3px; }
.frame-admin .side nav { gap: 12px; }
.side-tag {
  margin: -4px 8px 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  width: fit-content;
}
.side-admin .side-foot {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.content-admin .page-title,
.content-admin .account-line h1 {
  color: var(--ink);
  font-weight: 600;
}
.content-admin .quiet {
  color: var(--muted);
}
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 12px 18px;
  border-right: 1px solid var(--line-strong);
  background: var(--side);
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-font-smoothing: antialiased;
}
.side nav { overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.group { display: flex; flex-direction: column; gap: 4px; }
.group p {
  margin: 0 8px 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.group p span {
  letter-spacing: 0;
  color: var(--faint);
  font-weight: 500;
}
.group a.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  color: #e4e8f0;
  text-shadow: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.group a.nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.nav-glyph {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8ecf2;
}
.nav-glyph svg {
  width: 17px;
  height: 17px;
  display: block;
  stroke-width: 2;
}
.nav-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
}
.group a.nav-item.active {
  color: #ffffff;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  box-shadow: inset 3px 0 0 var(--accent);
}
.group a.nav-item.active .nav-glyph {
  border-color: color-mix(in srgb, var(--accent) 50%, rgba(255, 255, 255, 0.15));
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));
  color: #ffffff;
}
.side-foot {
  margin-top: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  padding: 0 10px;
}
html[data-theme="light"] .side {
  background: var(--side);
}
html[data-theme="light"] .group a.nav-item {
  color: var(--ink);
}
html[data-theme="light"] .group a.nav-item:hover,
html[data-theme="light"] .group a.nav-item.active {
  color: var(--ink);
  background: var(--surface-2);
}
html[data-theme="light"] .nav-glyph {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--ink);
}

.main { min-width: 0; }
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--surface);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: none;
}
.search { flex: 1; max-width: 420px; position: relative; }
.search:empty { display: none; }
.search input {
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding-left: 16px;
  color: var(--ink);
}
.bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chip-live, .chip-balance, .chip-limit, .who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--muted);
}
.chip-balance b { color: var(--ink); font-weight: 500; letter-spacing: -0.03em; }
.chip-balance.neg b { color: var(--coral); }
.chip-limit b { color: var(--ink); font-weight: 500; letter-spacing: -0.03em; font-size: 13px; }
.hero strong.limit-opened-line { font-size: 20px; letter-spacing: -0.03em; }
.chip-limit.low b { color: var(--coral); }
.dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(125, 222, 166, 0.12);
}
.dot.idle { background: var(--faint); box-shadow: none; }
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}
.menu-btn { display: none; }

.content {
  width: min(1180px, calc(100% - 36px));
  margin: 8px auto 64px;
  animation: rise 0.35s ease;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.account-line { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.account-line h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.045em;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 13px;
}
.badge i { width: 6px; height: 6px; border-radius: 99px; background: var(--green); display: block; }
.intro { color: var(--muted); max-width: 640px; margin: 8px 0 18px; }

.hero, .metrics {
  display: grid;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 18px);
  backdrop-filter: none;
  box-shadow: var(--elev-1);
  position: relative;
  overflow: hidden;
}
html[data-shine="1"] .hero::after,
html[data-shine="1"] .metrics::after,
html[data-shine="1"] .card::after,
html[data-shine="1"] .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.06) 42%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.06) 58%,
    transparent 70%
  );
  background-size: 220% 100%;
  opacity: 0.9;
  mix-blend-mode: soft-light;
}
html[data-shine="1"][data-motion="1"] .hero::after,
html[data-shine="1"][data-motion="1"] .metrics::after,
html[data-shine="1"][data-motion="1"] .card::after,
html[data-shine="1"][data-motion="1"] .panel::after {
  animation: card-shimmer 6s ease-in-out infinite;
}
@keyframes card-shimmer {
  0%, 100% { background-position: 130% 0; }
  50% { background-position: -30% 0; }
}
html[data-glass="soft"] { --glass-blur: 10px; }
html[data-glass="crystal"] { --glass-blur: 22px; }
html[data-glass="off"] { --glass-blur: 0px; }
html[data-roundness="soft"] { --radius-lg: 22px; --radius-md: 16px; }
html[data-roundness="default"] { --radius-lg: 18px; --radius-md: 12px; }
html[data-roundness="sharp"] { --radius-lg: 8px; --radius-md: 6px; }
.card, .panel {
  border-radius: var(--radius-lg, 18px);
  backdrop-filter: none;
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .metrics,
html[data-theme="dark"] .card {
  backdrop-filter: none;
}
.hero { grid-template-columns: 1.3fr 1fr 0.8fr 0.9fr; margin-bottom: 14px; }
.hero.hero-limit { grid-template-columns: 1.15fr 0.95fr 0.85fr 0.75fr 0.85fr; }
.badge.limit-badge { color: var(--accent); }
.badge.limit-badge i { background: var(--accent); }
h1.page-title.neg { color: var(--coral); }
.hero > div, .metrics > div { padding: 16px 18px 18px; }
.hero > div + div, .metrics > div + div { border-left: 1px solid var(--line-strong); }
.hero span, .metrics span, .eyebrow {
  display: block;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.neg, .hero strong.neg { color: var(--coral); }
.hero strong.plan { font-size: 22px; letter-spacing: -0.03em; }
.hero em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-size: 12.5px; }
.hero small { font-size: 16px; color: var(--muted); font-weight: 400; }

.period { margin-top: 12px; }
.period header, .split-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 2px 8px;
}
.period h2, .split-head h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.period header span, .split-head a { color: var(--faint); font-size: 12.5px; }
.split-head a:hover { color: var(--gold); }
.metrics { grid-template-columns: repeat(6, 1fr); }
.metrics strong {
  display: block;
  margin-top: 7px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.duo { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 14px; margin-top: 18px; }
.panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.pad { padding: 16px 18px 18px; }
.sheet { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
.sheet table { min-width: 860px; }
.sheet th, .sheet td { white-space: nowrap; }
.sheet th.act, .sheet td.act { text-align: right; }
th .sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
th .sort i { color: var(--gold); font-style: normal; }
th .sort:hover { color: var(--ink); }
th.right .sort { width: 100%; justify-content: flex-end; }
th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-2) 90%, var(--card-solid));
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  color: var(--table-ink, var(--ink));
  font-weight: 500;
  font-size: 14.5px;
}
html[data-theme="dark"] .sheet td {
  color: var(--table-ink);
}
html[data-theme="dark"] .quiet {
  color: var(--muted);
  font-weight: 500;
}
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .account-line h1 {
  color: var(--ink);
  font-weight: 600;
}
tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.right { text-align: right; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 8px 3px 7px;
  font-size: 12px;
  background: rgba(255, 248, 230, 0.04);
  color: var(--muted);
}
.pill i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.pill.ok { background: rgba(61, 220, 132, 0.16); color: #3ddc84; }
.pill.wait { background: var(--gold-dim); color: var(--gold); }
.pill.no { background: var(--coral-dim); color: var(--coral); }
.page-title { font-size: 32px; font-weight: 500; letter-spacing: -0.045em; margin: 4px 0; }
.live-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 10px;
}
.live-bar .live-search { flex: 1 1 220px; max-width: 280px; margin: 0; }
.live-bar input { width: 100%; padding: 9px 12px; border-radius: 10px; }
.live-rate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.live-rate input { width: 72px; }
.live-bar .push { margin-left: auto; }
.live-head { display: flex; align-items: center; gap: 12px; }
.live-head .page-title { margin: 0; }
.live-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.live-stats article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px 18px;
}
.live-stats span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.live-stats strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.live-stats em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-size: 12.5px; }
.hangup {
  border: 1px solid rgba(255, 141, 122, 0.55);
  background: transparent;
  color: var(--coral);
  border-radius: 8px;
  padding: 6px 12px;
}
.hangup:hover { background: var(--coral-dim); }
.support-handle {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.support-handle a {
  color: var(--accent);
}
.support-handle a:hover {
  text-decoration: underline;
}
.day-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 4px;
  max-width: 420px;
}
.day-step {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.day-step:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.day-step-label {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  min-width: 0;
}
.toolbar, .chips, .amounts, .row-actions, .lookup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar { margin: 16px 0 10px; }
.toolbar input, .toolbar select, .lookup input { width: auto; min-width: 150px; }
.chip, .amount {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
}
.chip.on, .amount.on { background: var(--ink); color: #16140f; border-color: var(--ink); }
.lookup { display: grid; grid-template-columns: 1.4fr 0.5fr auto; }
.estimate { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.estimate b { font-size: 36px; font-weight: 500; letter-spacing: -0.04em; }
.note {
  background: var(--gold-dim);
  color: #f3e2c0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.grid-2 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; }
.refill-user-wrap { position: relative; z-index: 50; }
#admin-refill-form.panel { overflow: visible; }
.refill-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card-solid, #101820);
  box-shadow: var(--shadow, 0 18px 48px rgba(0, 0, 0, 0.72));
  padding: 4px 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.refill-suggest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--card-solid, #101820);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  line-height: 1.35;
}
.refill-suggest-item:last-child { border-bottom: 0; }
.refill-suggest-item:hover,
.refill-suggest-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, var(--card-solid, #101820));
  outline: none;
}
.refill-suggest-name {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.refill-suggest-meta {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.refill-suggest-meta.neg { color: var(--coral); }
.refill-suggest-hint {
  padding: 8px 14px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-dim) 35%, var(--card-solid, #101820));
}
.pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; color: var(--muted); }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.route {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.route:last-child { border-bottom: 0; }
.route h3 { margin: 0 0 6px; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.route ul { list-style: none; margin: 0; padding: 0; color: var(--muted); }
.secret { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toast {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background: var(--ink);
  color: #16140f;
  padding: 12px 14px;
  border-radius: 14px;
  z-index: 20;
}
.skeleton {
  height: 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, #171714, #22211c, #171714);
  background-size: 200% 100%;
  animation: shine 1.2s infinite;
  margin: 10px 0;
}
@keyframes shine { to { background-position: -200% 0; } }
button:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 1180px) {
  .hero, .hero.hero-limit { grid-template-columns: 1fr 1fr; }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .duo, .grid-2, .lookup, .route { grid-template-columns: 1fr; }
  .hero > div:nth-child(odd),
  .metrics > div:nth-child(3n + 1) { border-left: 0; }
  .hero > div:nth-child(n + 3),
  .metrics > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .gate, .frame { grid-template-columns: 1fr; }
  .hero, .metrics { grid-template-columns: 1fr 1fr; }
  .side {
    position: fixed;
    z-index: 8;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    width: min(280px, 86vw);
  }
  .side.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .content { width: min(1180px, calc(100% - 24px)); }
  .gate-copy { padding: 28px 22px 8px; }
  .gate-features { grid-template-columns: 1fr; }
  .sheet table { min-width: 720px; }
}
.scrim { display: none; }
@media (max-width: 860px) {
  .side.open + .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 7;
    border: 0;
    background: rgba(0, 0, 0, 0.55);
  }
  .side.open { box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45); }
  .group a { padding: 12px 10px; }
  .menu-btn { min-height: 40px; }
  .bar { padding: 10px 12px; }
  .content { margin-bottom: 40px; }
  .pager { flex-wrap: wrap; gap: 8px; }
  .toolbar input, .toolbar select, .lookup input { width: 100%; min-width: 0; }
  .panel { overflow-x: auto; }
}
@media (max-width: 640px) {
  .gate h1 { font-size: 44px; }
  .gate-panel { padding: 12px 16px 28px; }
  .card { padding: 20px; border-radius: 20px; }
  .points li { flex-direction: column; gap: 2px; }
  .who-name { display: none; }
  .bar-actions .ghost { padding: 8px 10px; }
  .page-title, .account-line h1 { font-size: 26px; }
  .hero, .metrics, .live-stats { grid-template-columns: 1fr 1fr; }
  .hero strong, .live-stats strong { font-size: 22px; }
  .metrics strong { font-size: 18px; }
  .live-bar .live-search { flex-basis: 100%; max-width: none; }
  .live-bar .push { margin-left: 0; }
  .live-bar .ghost, .live-rate { min-height: 40px; }
  input, select, textarea { font-size: 16px; }
  .sheet { overflow: visible; }
  .sheet table { min-width: 0; }
  .sheet thead { display: none; }
  .sheet tr, .sheet td { display: block; white-space: normal; }
  .sheet tr { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
  .sheet tr:last-child { border-bottom: 0; }
  .sheet td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border: 0;
    padding: 6px 0;
    text-align: right;
  }
}
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.checks label, .check-line { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--ink); font-size: 14px; }
.checks input, .check-line input { width: auto; }
.member { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto auto auto; gap: 8px; align-items: end; }
.member label { margin-top: 8px; }
.panel.pad { padding: 8px 18px 18px; }
@media (max-width: 860px) {
  .edit-grid, .member { grid-template-columns: 1fr; }
}
.gate-tools {
  width: min(440px, 100%);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
}
.theme-bar-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.theme-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--accent-dim) 55%, transparent);
  color: var(--accent);
  flex: none;
}
.theme-icon-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 20px var(--accent-dim);
}
.theme-icon-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 0 24px var(--accent-glow, var(--accent-dim));
}
.theme-svg { width: 20px; height: 20px; display: block; }
.theme-btn-mark {
  width: 24px;
  height: 19px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px var(--accent-glow, var(--accent-dim)));
}
a.theme-link { text-decoration: none; }
.gate-appearance { grid-template-columns: 1fr 1.1fr; }
.gate-appearance .gate-copy { justify-content: center; gap: 18px; }
.appearance-card { width: min(420px, 100%); max-height: none; overflow: visible; }
.appearance-lede { max-width: 420px; margin: 0 0 20px; }
.appearance-simple { max-width: 420px; display: flex; flex-direction: column; gap: 22px; border: none; background: transparent; padding: 0; }
.gate-panel .appearance-simple { padding: 0; }
.appearance-row { display: flex; flex-direction: column; gap: 10px; }
.appearance-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.appearance-segment { border-radius: 14px; }
.appearance-swatches { margin: 0; gap: 8px; }
.appearance-swatches .swatch { width: 40px; height: 40px; border-radius: 12px; }
.appearance-toggle { align-self: flex-start; min-width: 72px; }
.appearance-reset { margin-top: 4px; }
.appearance-grid { display: grid; gap: 14px; margin-top: 8px; }
.appearance-block h2 { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.appearance-block .quiet { margin: 0 0 14px; font-size: 13px; }
.theme-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card-solid) 60%, transparent);
}
.theme-segment.wrap { border-radius: 16px; }
.theme-segment .seg {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 500;
  flex: 1;
  min-width: 88px;
}
.theme-segment.wrap .seg { flex: 1 1 auto; border-radius: 12px; }
.theme-segment .seg.on {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.swatch {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: transparent;
  padding: 3px;
}
.swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: var(--sw, var(--accent));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.swatch.on { border-color: var(--accent); }
.swatch.custom span {
  display: grid;
  place-items: center;
  background: var(--card-solid);
  color: var(--muted);
  font-size: 20px;
  box-shadow: none;
  border: 1px dashed var(--line-strong);
}
.color-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.color-field.dim { opacity: 0.45; pointer-events: none; }
.color-field input[type="color"] {
  width: 52px;
  height: 36px;
  padding: 2px;
  border-radius: 10px;
  cursor: pointer;
}
.theme-preview-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, var(--accent-dim), transparent 55%),
    var(--card-solid);
  margin-bottom: 14px;
}
.theme-preview-card .preview-balance {
  display: block;
  font-size: 32px;
  letter-spacing: -0.04em;
  margin: 6px 0 8px;
  color: var(--ink);
  font-weight: 500;
}
.theme-preview-card p { margin: 0 0 14px; font-size: 13px; }
.theme-preview-card .preview-btn {
  display: inline-block;
  pointer-events: none;
  font-size: 14px;
  padding: 11px 18px;
}
.preview-block > .quiet { margin: -6px 0 12px; font-size: 12px; }
html[data-theme="light"] .gate-features article {
  background: color-mix(in srgb, var(--card-solid) 80%, var(--accent-dim));
}
.appearance-hero {
  padding: 20px 22px;
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, var(--accent-dim), transparent 55%),
    var(--card);
  margin-bottom: 14px;
}
.appearance-hero h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, var(--ink), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.appearance-hero p { margin: 0; color: var(--muted); font-size: 13px; }
.atmo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 720px) { .atmo-grid { grid-template-columns: repeat(2, 1fr); } }
.atmo-pick {
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0;
  min-height: 72px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--card-solid);
}
.atmo-pick span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.atmo-pick::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--atmo-preview, linear-gradient(135deg, #333, #111));
}
.atmo-pick.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 28px var(--accent-glow, var(--accent-dim));
}
.glitter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.glitter-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
}
.glitter-chip.on {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.range-field { margin: 12px 0 0; }
.range-field label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.range-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.toggle-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.toggle-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.toggle-pill.on { background: var(--accent-dim); color: var(--accent); }
.theme-io {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.theme-io textarea {
  width: 100%;
  min-height: 72px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  margin-top: 8px;
}
.bg-upload {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md, 12px);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.bg-upload input { margin-top: 8px; width: auto; }
.custom-sky { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.custom-sky label { margin: 0; font-size: 11px; text-align: center; }
.custom-sky input[type="color"] { width: 100%; height: 40px; }
.theme-preview-card.fx-demo {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 0 40px var(--accent-dim);
}

@media (max-width: 640px) {
  .sheet td::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
  }
  .sheet td.act { justify-content: flex-end; padding-top: 8px; }
  .sheet td.act::before { content: none; }
  .toast { left: 12px; right: 12px; bottom: 12px; }
}

/* —— Cyborg-style My Active Calls —— */
.cy-live { display: grid; gap: 14px; }
.cy-live-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cy-live-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cy-poll { font-size: 12.5px; }
.cy-summary {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 28, 44, 0.95), rgba(8, 14, 22, 0.92));
  border: 1px solid rgba(94, 196, 255, 0.14);
}
.cy-sum-stats { display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline; }
.cy-sum-stats div { display: flex; align-items: center; gap: 8px; }
.cy-sum-stats span { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; font-weight: 600; }
.cy-sum-stats strong { font-size: 22px; color: var(--ink); }
.cy-sum-stats .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cy-sum-stats .dot.ok { background: #3dff9a; box-shadow: 0 0 10px rgba(61, 255, 154, 0.55); }
.cy-sum-stats .dot.wait { background: #ff9f43; box-shadow: 0 0 10px rgba(255, 159, 67, 0.45); }
.cy-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; display: flex; }
.cy-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2dff8a, #1fd6a0); }
.cy-bar b { display: block; height: 100%; background: linear-gradient(90deg, #ffb347, #ff8a3d); }
.cy-filters { margin-top: 0; }
.cy-panel { overflow: hidden; }
.cy-sheet table { width: 100%; border-collapse: collapse; }
.cy-sheet th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.cy-row td { vertical-align: top; padding: 14px 12px; border-top: 1px solid rgba(94, 196, 255, 0.08); }
.cy-status { display: grid; gap: 4px; min-width: 88px; }
.cy-status span {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; padding: 4px 8px; border-radius: 6px; width: fit-content;
  background: rgba(255,255,255,0.06); color: var(--muted);
}
.cy-status.live span { background: rgba(61, 255, 154, 0.12); color: #5ee4a8; }
.cy-status.live span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3dff9a; box-shadow: 0 0 8px #3dff9a; }
.cy-status.ring span { background: rgba(255, 159, 67, 0.14); color: #ffb347; }
.cy-status.ring span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff9f43; }
.cy-status em { font-style: normal; font-size: 12px; color: var(--muted); }
.cid-cell, .dial-cell, .talk-cell { display: grid; gap: 3px; }
.cid-num { font-weight: 600; letter-spacing: 0.01em; }
.cid-bank {
  color: #6ec8ff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cid-bill { font-size: 12px; color: var(--muted); }
.cid-bill span { color: #ffb347; font-weight: 600; }
.cid-bal { font-size: 11.5px; color: var(--faint); }
.their-time { font-size: 13px; color: var(--ink); }
.qos-mini { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #5ee4a8; margin-top: 4px; }
.qos-mini i { width: 28px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #2dff8a, #1fd6a0); display: inline-block; }
.cy-act-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.listen-btn {
  display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 9px; font-weight: 700; font-size: 13px;
  color: #041018; background: linear-gradient(180deg, #7ad7ff 0%, #2ea8ff 55%, #1a7fd0 100%);
  box-shadow: 0 8px 18px rgba(46, 168, 255, 0.28);
}
.listen-btn:hover { filter: brightness(1.06); }
.listen-btn:disabled { opacity: 0.55; cursor: wait; }
.cy-more { position: relative; }
.cy-more > summary {
  list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid rgba(94, 196, 255, 0.14); background: rgba(255,255,255,0.03);
}
.cy-more > summary::-webkit-details-marker { display: none; }
.cy-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px;
  display: grid; gap: 2px; padding: 8px; border-radius: 10px;
  background: #0c1420; border: 1px solid rgba(94, 196, 255, 0.18);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.cy-menu-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 10px 8px; border-bottom: 1px solid rgba(94, 196, 255, 0.12); margin-bottom: 4px;
}
.cy-menu-head strong { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.cy-menu-head em { font-style: normal; font-size: 12px; color: #5ec4ff; }
.cy-menu button {
  border: 0; background: transparent; color: var(--ink); text-align: left;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.cy-menu button:hover { background: rgba(94, 196, 255, 0.1); }
.cy-menu .quiet { padding: 6px 10px; font-size: 11.5px; }

.tx-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 18px; background: rgba(4, 10, 18, 0.72); backdrop-filter: blur(4px);
}
.tx-modal {
  width: min(640px, 100%); max-height: min(80vh, 720px); display: grid; grid-template-rows: auto 1fr auto;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #121b28 0%, #0b121c 100%);
  border: 1px solid rgba(94, 196, 255, 0.2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.tx-modal header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid rgba(94, 196, 255, 0.12);
}
.tx-modal header strong { display: block; font-size: 15px; }
.tx-modal header em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tx-body { padding: 16px; overflow: auto; }
.tx-text {
  margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
.tx-foot {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
  border-top: 1px solid rgba(94, 196, 255, 0.12);
}
.tx-wave { display: flex; align-items: end; gap: 4px; height: 28px; margin-top: 14px; }
.tx-wave span {
  width: 4px; border-radius: 2px; background: #5ec4ff;
  animation: listenWave 0.9s ease-in-out infinite;
}
.tx-wave span:nth-child(1) { height: 8px; }
.tx-wave span:nth-child(2) { height: 18px; animation-delay: 0.1s; }
.tx-wave span:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.tx-wave span:nth-child(4) { height: 22px; animation-delay: 0.15s; }
.tx-wave span:nth-child(5) { height: 10px; animation-delay: 0.05s; }
.live-sip, .live-sip-custom { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.live-sip select, .live-sip-custom {
  background: var(--field-bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; min-width: 120px;
}
.cy-foot { margin: 0; font-size: 12.5px; }

.listen-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 10px 14px; margin-bottom: 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(20, 40, 60, 0.95), rgba(10, 18, 30, 0.92));
  border: 1px solid rgba(61, 255, 154, 0.22);
}
.listen-bar.hidden { display: none; }
.listen-wave { display: flex; align-items: end; gap: 3px; height: 18px; }
.listen-wave span {
  width: 3px; border-radius: 2px; background: #ff4d6d;
  animation: listenWave 0.9s ease-in-out infinite;
}
.listen-wave span:nth-child(1) { height: 6px; animation-delay: 0s; }
.listen-wave span:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.listen-wave span:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.listen-wave span:nth-child(4) { height: 16px; animation-delay: 0.15s; }
.listen-wave span:nth-child(5) { height: 8px; animation-delay: 0.05s; }
@keyframes listenWave {
  0%, 100% { transform: scaleY(0.55); opacity: 0.7; }
  50% { transform: scaleY(1); opacity: 1; }
}
.listen-meta { display: grid; gap: 2px; }
.listen-meta strong { font-size: 13.5px; }
.listen-meta em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.listen-qos { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.listen-qos b { color: var(--faint); font-weight: 600; letter-spacing: 0.04em; font-size: 10.5px; }

@media (max-width: 900px) {
  .cy-sheet thead { display: none; }
  .cy-row { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(94,196,255,0.1); border-radius: 12px; margin-bottom: 10px; }
  .cy-row td { border: 0; padding: 0; display: grid; gap: 4px; }
  .cy-row td::before { content: attr(data-label); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
  .cy-act-row { justify-content: flex-start; }
}