/* DSH Team Hub — shared visual tokens (hue 200–215°, no purple, no glow) */
:root {
  /* Base */
  --bg-0: #040a11;
  --bg-1: #07131e;
  --bg-2: #0b1d2d;
  /* Text: never pure white. Same tones as netx (all >= 4.5:1 on the dark glass). */
  --text: #bcc6d4;
  --text-strong: #c8d1de;
  --text-dim: #a3afc0;
  --text-faint: #8696ab;

  /* Liquid glass: nearly clear, light blur; the material comes from the specular rim and a faint inner highlight. */
  --glass-fill:
    linear-gradient(180deg, rgba(255, 255, 255, .018) 0%, rgba(255, 255, 255, .004) 40%, rgba(255, 255, 255, 0) 100%),
    rgba(4, 10, 22, .30);
  --glass-rim: rgba(150, 190, 255, .05);
  --glass-blur: blur(6px) saturate(120%) brightness(.82);
  --glass-specular: linear-gradient(135deg,
    rgba(170, 205, 255, .13) 0%, rgba(170, 205, 255, .05) 20%, rgba(170, 205, 255, .015) 42%,
    rgba(170, 205, 255, .015) 62%, rgba(170, 205, 255, .035) 84%, rgba(170, 205, 255, .08) 100%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 14px 36px rgba(0, 0, 0, .40), 0 2px 4px rgba(0, 0, 0, .25);
  --glass-inner: rgba(255, 255, 255, .03);   /* a sheet inside a panel: no second blur */
  --glass-inset: rgba(2, 8, 18, .30);        /* tables, fields */
  --wallpaper:
    radial-gradient(circle, rgba(147, 197, 253, .04) 1px, transparent 1.6px) 0 0 / 24px 24px,
    linear-gradient(118deg, transparent 38%, rgba(56, 152, 255, .025) 46%, transparent 54%),
    linear-gradient(118deg, transparent 62%, rgba(34, 180, 230, .018) 67%, transparent 72%),
    radial-gradient(34% 44% at 6% 10%, rgba(20, 110, 230, .13), transparent 62%),
    radial-gradient(28% 36% at 94% 6%, rgba(6, 150, 210, .07), transparent 62%),
    radial-gradient(40% 46% at 58% 64%, rgba(14, 84, 180, .11), transparent 64%),
    radial-gradient(30% 40% at 10% 96%, rgba(4, 120, 175, .08), transparent 62%),
    radial-gradient(28% 38% at 98% 98%, rgba(16, 100, 210, .07), transparent 62%),
    linear-gradient(140deg, #030a16 0%, #05132a 40%, #041022 72%, #020a14 100%);

  /* Surfaces */
  --surface: rgba(16, 31, 46, 0.46);         /* legacy panels (login, standalone pages) */
  --glass: rgba(18, 35, 52, 0.38);
  --glass-strong: rgba(22, 41, 60, 0.62);
  --surface-raised: rgba(14, 27, 41, 0.94);  /* dialogs, toasts, menus: solid enough to read over anything */
  --sheen: linear-gradient(180deg, rgba(214, 232, 246, .055) 0%, rgba(214, 232, 246, 0) 46%);
  --edge: rgba(150, 182, 208, 0.12);
  --edge-hi: rgba(196, 218, 236, 0.10);      /* 1px inner top highlight */
  --line: rgba(150, 182, 208, 0.08);         /* table rows, dividers */
  --line-strong: rgba(150, 182, 208, 0.16);

  /* Controls */
  --fill: rgba(126, 164, 196, 0.07);
  --fill-hover: rgba(126, 164, 196, 0.12);
  --fill-active: rgba(126, 164, 196, 0.18);
  --field: rgba(6, 15, 24, 0.5);
  --field-edge: rgba(150, 182, 208, 0.14);
  --field-edge-focus: rgba(110, 164, 204, 0.55);
  --focus-ring: 0 0 0 3px rgba(72, 134, 182, 0.22);

  /* Accent (hue ~205°) */
  --accent: #3d7fae;
  --accent-2: #2e6894;
  --accent-text: #e3ecf4;
  --accent-soft: rgba(61, 127, 174, 0.18);
  --accent-line: rgba(92, 152, 196, 0.34);

  /* Status */
  --ok: #5fa98d;
  --warn: #bf9f5e;
  --danger: #c07474;
  --ok-bg: rgba(95, 169, 141, 0.12);
  --warn-bg: rgba(191, 159, 94, 0.12);
  --danger-bg: rgba(192, 116, 116, 0.12);

  --qr-tile: #b9c5d2;
  --qr-ink: #0a1520;

  /* Shape & depth */
  --radius-card: 28px;
  --radius-lg: 18px;
  --radius: 13px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --shadow-1: 0 1px 0 var(--edge-hi) inset, 0 18px 40px -24px rgba(0, 0, 0, .65);
  --shadow-2: 0 1px 0 var(--edge-hi) inset, 0 32px 80px -24px rgba(0, 0, 0, .75);
  --blur: blur(22px) saturate(150%);

  /* Rhythm */
  --space: 16px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --h-ctl: 34px;
  --h-ctl-sm: 28px;

  /* Type scale (admin console) */
  --fs: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-title: 21px;
  --max: 1100px;
  --max-wide: 1480px;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Cascadia Mono", monospace;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--text-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(61, 127, 174, .38); color: var(--text-strong); }
/* Component display rules must never defeat the hidden attribute */
[hidden]:not(.view) { display: none !important; } /* .view keeps its crossfade (login.css) */
img { max-width: 100%; }
:focus-visible { outline: 2px solid rgba(110, 164, 204, .55); outline-offset: 2px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

.sea {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 38%, #0a2032 0%, rgba(10, 32, 50, 0) 70%),
    linear-gradient(180deg, #06111b 0%, var(--bg-0) 100%);
}
.sea canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sea .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 45%, rgba(0,0,0,0) 55%, rgba(2, 6, 11, .7) 100%);
}
.sea .scan-tex {
  position: absolute; inset: 0; opacity: .35;
  background: repeating-linear-gradient(180deg, rgba(140, 180, 210, .035) 0 1px, transparent 1px 3px);
}
/* Calm backdrop for data pages (injectSea quiet mode) */
.sea.quiet {
  background:
    radial-gradient(70% 55% at 18% 0%, rgba(22, 56, 84, .45) 0%, rgba(22, 56, 84, 0) 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(14, 40, 62, .4) 0%, rgba(14, 40, 62, 0) 70%),
    linear-gradient(180deg, #06101a 0%, var(--bg-0) 100%);
}
.sea.quiet .scan-tex { display: none; }
.sea.quiet canvas { opacity: .55; }

.hud {
  position: fixed; inset: 18px; z-index: 1; pointer-events: none;
  font: 11px/1.5 var(--mono); color: var(--text-faint); letter-spacing: .08em;
}
.hud i {
  position: absolute; width: 22px; height: 22px;
  border-color: rgba(140, 178, 206, .28); border-style: solid; border-width: 0;
}
.hud i.tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.hud i.tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.hud i.bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.hud i.br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.hud .meta-tr { position: absolute; right: 34px; top: 4px; text-align: right; }
.hud .meta-bl { position: absolute; left: 34px; bottom: 4px; }
.hud .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #4f9a7f; margin-right: 6px; vertical-align: 1px;
}

.brand {
  position: fixed; top: 28px; left: 32px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: .02em; font-size: 15px; color: var(--text);
}
.brand svg { width: 26px; height: 26px; }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--edge);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 var(--edge-hi);
  border-radius: var(--radius-card);
  position: relative;
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(200, 222, 240, .07) 0%, rgba(200, 222, 240, 0) 32%);
}
.glass .corner {
  position: absolute; width: 16px; height: 16px;
  border: 0 solid rgba(150, 190, 218, .42); pointer-events: none;
}
.glass .corner.tl { left: -1px; top: -1px; border-left-width: 1.5px; border-top-width: 1.5px; border-top-left-radius: var(--radius-card); }
.glass .corner.tr { right: -1px; top: -1px; border-right-width: 1.5px; border-top-width: 1.5px; border-top-right-radius: var(--radius-card); }
.glass .corner.bl { left: -1px; bottom: -1px; border-left-width: 1.5px; border-bottom-width: 1.5px; border-bottom-left-radius: var(--radius-card); }
.glass .corner.br { right: -1px; bottom: -1px; border-right-width: 1.5px; border-bottom-width: 1.5px; border-bottom-right-radius: var(--radius-card); }

/* ---------- Buttons: .btn (= primary) · .ghost · .text · .danger · .ghost.danger · .sm/.xs · .icon ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(180deg, #4386b6, var(--accent-2));
  box-shadow: inset 0 1px 0 rgba(220, 236, 248, .16), 0 1px 2px rgba(0, 0, 0, .25);
  color: var(--accent-text); font-weight: 600; font-size: 14px; white-space: nowrap;
  text-decoration: none; user-select: none;
  transition: filter .18s, background-color .18s, border-color .18s, color .18s, transform .18s var(--ease);
}
.btn:hover { filter: brightness(1.07); color: var(--accent-text); }
.btn:active { transform: scale(.985); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: default; filter: none; transform: none; }
.btn.primary { background: linear-gradient(180deg, #4386b6, var(--accent-2)); color: var(--accent-text); }
.btn.ghost {
  background: var(--fill);
  border-color: var(--edge);
  box-shadow: inset 0 1px 0 rgba(220, 236, 248, .04);
  color: var(--text); font-weight: 500;
}
.btn.ghost:hover { background: var(--fill-hover); border-color: var(--line-strong); filter: none; color: var(--text-strong); }
.btn.text {
  background: none; border-color: transparent; box-shadow: none;
  color: var(--text-dim); font-weight: 500; padding: 0 10px;
}
.btn.text:hover { color: var(--text-strong); background: var(--fill); filter: none; }
.btn.danger {
  background: linear-gradient(180deg, #a26060, #844a4a); color: #f6eaea;
  box-shadow: inset 0 1px 0 rgba(255, 230, 230, .12), 0 1px 2px rgba(0, 0, 0, .25);
}
.btn.ghost.danger, .btn.text.danger {
  background: transparent; border-color: rgba(192, 116, 116, .22); color: var(--danger); box-shadow: none;
}
.btn.text.danger { border-color: transparent; }
.btn.ghost.danger:hover, .btn.text.danger:hover { background: var(--danger-bg); color: #d89090; }
.btn.sm { height: var(--h-ctl); padding: 0 13px; font-size: 13px; border-radius: var(--radius-sm); gap: 6px; }
.btn.xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: var(--radius-xs); gap: 4px; font-weight: 500; }
.btn.icon { width: var(--h-ctl); padding: 0; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ---------- Form fields (auth pages) ---------- */
.field { margin-bottom: 12px; }
.field label {
  display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--radius);
  background: var(--field); border: 1px solid var(--field-edge);
  outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--field-edge-focus); background: rgba(8, 20, 32, .62); box-shadow: var(--focus-ring);
}

.err {
  color: var(--danger); font-size: 13px; margin: 8px 0; min-height: 1.2em;
}
.ok-msg { color: var(--ok); font-size: 13px; }

.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.strong { color: var(--text-strong); font-weight: 600; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* Thin dark scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: rgba(120, 160, 192, .28) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(120, 160, 192, .26); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  .brand { top: 18px; left: 18px; }
  .hud { inset: 12px; }
}