/* src/styles.scss */
:root {
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 20px;
  --sp-10: 24px;
  --sp-11: 32px;
  --sp-12: 40px;
  --sp-13: 48px;
  --sp-14: 64px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-pill: 999px;
}
:root {
  --p-navy-1: #08131f;
  --p-navy-2: #0c1d30;
  --p-navy-3: #10263e;
  --p-navy-4: #16324f;
  --p-mist-1: #f0f4f8;
  --p-mist-2: #e2eaf2;
  --p-mist-3: #d4e0ec;
  --p-mist-4: #b8cce0;
  --p-brand: #1c3b64;
  --p-brand-deep: #0b1c2f;
  --p-brand-deeper: #0a1b2e;
  --p-brand-shadow: #0d2240;
  --p-gold: #c9a84c;
  --p-gold-hi: #dcbb5c;
  --p-gold-dim: #8a7332;
  --p-gold-lo: #9a7828;
  --p-gold-lo-dim: #7a5e1c;
  --p-gold-ink: #1a1405;
  --p-red: #e0453a;
  --p-red-hi: #ee584d;
  --p-red-lo: #c93229;
  --p-red-deep: #8e1f18;
  --p-red-fg: #ff6e62;
  --p-amber: #e8973a;
  --p-amber-lo: #c07818;
  --p-amber-fg: #f0ac5f;
  --p-green: #2fa36b;
  --p-green-lo: #1f7a4e;
  --p-green-fg: #4fcb90;
  --p-green-ink: #04180e;
  --p-cyan: #3fa9c9;
  --p-cyan-lo: #1a7a9a;
  --p-cyan-fg: #6bc8e2;
  --p-fg-1: #e8eef5;
  --p-fg-2: #8fa3b8;
  --p-fg-3: #5f7286;
  --p-fg-lo-1: #0d1f30;
  --p-fg-lo-2: #2e4a62;
  --p-fg-lo-3: #607898;
  --p-white: #fff;
  --p-black: #000;
  --p-paper: #e8f0f8;
  --p-scroll-thumb-lo: #b0c4d8;
  --p-placeholder-lo: #8ba0b4;
  --p-print-rule: #ccc;
  --p-rule-gold: rgba(201, 168, 76, 0.16);
  --p-rule-white: rgba(255, 255, 255, 0.07);
  --p-rule-brand: rgba(28, 59, 100, 0.18);
  --p-rule-ink: rgba(0, 0, 0, 0.09);
  --p-rule-brand-strong: rgba(28, 59, 100, 0.2);
  --p-tint-green: rgba(47, 163, 107, 0.15);
  --p-tint-red: rgba(224, 69, 58, 0.17);
  --p-tint-amber: rgba(232, 151, 58, 0.15);
  --p-tint-cyan: rgba(63, 169, 201, 0.15);
  --p-tint-gold: rgba(201, 168, 76, 0.15);
  --p-tint-white: rgba(255, 255, 255, 0.06);
  --p-tint-gold-row: rgba(201, 168, 76, 0.045);
  --p-wash-brand-dark: rgba(28, 59, 100, 0.55);
  --p-wash-gold-dark: rgba(201, 168, 76, 0.06);
  --p-wash-brand-light: rgba(28, 59, 100, 0.08);
  --p-wash-gold-light: rgba(201, 168, 76, 0.04);
  --p-field-dark: rgba(8, 19, 31, 0.75);
  --p-field-dark-on: rgba(8, 19, 31, 0.95);
  --p-field-light: rgba(255, 255, 255, 0.85);
  --p-field-light-on: rgba(255, 255, 255, 0.95);
  --p-topbar-dark: rgba(12, 29, 48, 0.9);
  --p-topbar-light: rgba(210, 228, 244, 0.9);
  --p-scrim-dark: rgba(4, 10, 17, 0.78);
  --p-scrim-light: rgba(20, 40, 60, 0.55);
}
:root {
  --navy-900: var(--p-navy-1);
  --navy-800: var(--p-navy-2);
  --navy-700: var(--p-navy-3);
  --navy-600: var(--p-navy-4);
  --brand: var(--p-brand);
  --gold: var(--p-gold);
  --gold-dim: var(--p-gold-dim);
  --red: var(--p-red);
  --red-deep: var(--p-red-deep);
  --amber: var(--p-amber);
  --green: var(--p-green);
  --cyan: var(--p-cyan);
  --line: var(--p-rule-gold);
  --line-soft: var(--p-rule-white);
  --ink: var(--p-fg-1);
  --ink-dim: var(--p-fg-2);
  --ink-faint: var(--p-fg-3);
  --r: 10px;
  --display:
    "Barlow Condensed",
    "Arial Narrow",
    "Helvetica Neue",
    system-ui,
    sans-serif;
  --body:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  --mono:
    "JetBrains Mono",
    ui-monospace,
    "SF Mono",
    Consolas,
    monospace;
  --fg-safe: var(--p-green-fg);
  --fg-sos: var(--p-red-fg);
  --fg-wait: var(--p-amber-fg);
  --fg-info: var(--p-cyan-fg);
  --bg-safe: var(--p-tint-green);
  --bg-sos: var(--p-tint-red);
  --bg-wait: var(--p-tint-amber);
  --bg-info: var(--p-tint-cyan);
  --bg-gold: var(--p-tint-gold);
  --bg-mute: var(--p-tint-white);
  --on-gold: var(--p-gold-ink);
  --gold-hover: var(--p-gold-hi);
  --on-red: var(--p-white);
  --red-hover: var(--p-red-hi);
  --on-green: var(--p-green-ink);
  --elev: var(--navy-700);
  --elev-border: var(--line);
  --sidebar-a: var(--navy-800);
  --sidebar-b: var(--navy-900);
  --topbar-bg: var(--p-topbar-dark);
  --scrim-bg: var(--p-scrim-dark);
  --mark-2: var(--p-brand-deeper);
  --ava-2: var(--p-brand-deep);
  --toggle-bg: var(--navy-700);
  --ground-1: var(--p-wash-brand-dark);
  --ground-2: var(--p-wash-gold-dark);
  --sb-track: var(--navy-900);
  --sb-thumb: var(--navy-600);
  --sb-thumb-hover: var(--brand);
  --field-bg: var(--p-field-dark);
  --field-bg-focus: var(--p-field-dark-on);
  --field-border: var(--line-soft);
  --field-placeholder: var(--ink-faint);
  --field-option: var(--navy-800);
  --row-hover: var(--p-tint-gold-row);
  --print-bg: var(--p-white);
  --print-ink: var(--p-black);
  --print-line: var(--p-print-rule);
}
:root[data-theme=light] {
  --navy-900: var(--p-mist-1);
  --navy-800: var(--p-mist-2);
  --navy-700: var(--p-mist-3);
  --navy-600: var(--p-mist-4);
  --brand: var(--p-brand);
  --gold: var(--p-gold-lo);
  --gold-dim: var(--p-gold-lo-dim);
  --red: var(--p-red-lo);
  --red-deep: var(--p-red-deep);
  --amber: var(--p-amber-lo);
  --green: var(--p-green-lo);
  --cyan: var(--p-cyan-lo);
  --line: var(--p-rule-brand);
  --line-soft: var(--p-rule-ink);
  --ink: var(--p-fg-lo-1);
  --ink-dim: var(--p-fg-lo-2);
  --ink-faint: var(--p-fg-lo-3);
  --elev: var(--p-paper);
  --elev-border: var(--p-rule-brand-strong);
  --sidebar-a: var(--navy-800);
  --sidebar-b: var(--navy-700);
  --topbar-bg: var(--p-topbar-light);
  --scrim-bg: var(--p-scrim-light);
  --ava-2: var(--p-brand-shadow);
  --toggle-bg: var(--navy-600);
  --ground-1: var(--p-wash-brand-light);
  --ground-2: var(--p-wash-gold-light);
  --sb-track: var(--navy-800);
  --sb-thumb: var(--p-scroll-thumb-lo);
  --field-bg: var(--p-field-light);
  --field-bg-focus: var(--p-field-light-on);
  --field-border: var(--p-rule-brand-strong);
  --field-placeholder: var(--p-placeholder-lo);
  --field-option: var(--navy-800);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  font-family: var(--body);
  background: var(--navy-900);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(
      1200px 600px at 80% -10%,
      var(--ground-1),
      transparent 60%),
    radial-gradient(
      900px 500px at -10% 110%,
      var(--ground-2),
      transparent 60%);
}
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: var(--sb-track);
}
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .sidebar,
  .topbar,
  .btn,
  .toolbar {
    display: none !important;
  }
  body {
    background: var(--print-bg) !important;
    background-image: none !important;
    color: var(--print-ink) !important;
  }
  .card {
    border-color: var(--print-line);
    background: var(--print-bg);
    break-inside: avoid;
  }
}
.card {
  background:
    linear-gradient(
      160deg,
      var(--navy-700),
      var(--navy-800));
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: var(--sp-8);
}
.card.gold {
  border-color: var(--line);
}
.ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.ch h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.ch .hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
}
.grid {
  display: grid;
  gap: var(--sp-8);
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
.g-23 {
  grid-template-columns: 1.35fr 1fr;
}
.mt16 {
  margin-top: var(--sp-8);
}
.mt20 {
  margin-top: var(--sp-9);
}
.mb16 {
  margin-bottom: var(--sp-8);
}
.mb20 {
  margin-bottom: var(--sp-9);
}
.btn {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  padding: var(--sp-4) var(--sp-7);
  border-radius: 7px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  cursor: pointer;
  transition: 0.16s;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: none;
}
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}
.btn-gold {
  background: var(--gold);
  color: var(--on-gold);
}
.btn-gold:hover {
  background: var(--gold-hover);
}
.btn-red {
  background: var(--red);
  color: var(--on-red);
}
.btn-red:hover {
  background: var(--red-hover);
}
.btn-green {
  background: var(--green);
  color: var(--on-green);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border-color: var(--line-soft);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-block {
  width: 100%;
}
.btn-sm {
  padding: var(--sp-2) var(--sp-5);
  font-size: 11px;
  border-radius: 6px;
}
.pill {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 3px var(--sp-4);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}
.p-safe {
  background: var(--bg-safe);
  color: var(--fg-safe);
}
.p-sos {
  background: var(--bg-sos);
  color: var(--fg-sos);
}
.p-wait {
  background: var(--bg-wait);
  color: var(--fg-wait);
}
.p-info {
  background: var(--bg-info);
  color: var(--fg-info);
}
.p-gold {
  background: var(--bg-gold);
  color: var(--gold);
}
.p-mute {
  background: var(--bg-mute);
  color: var(--ink-dim);
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  flex-shrink: 0;
}
.live .dot {
  animation: blip 1.4s infinite;
}
@keyframes blip {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
tbody td {
  padding: var(--sp-5);
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  vertical-align: middle;
}
tbody tr {
  transition: 0.14s;
}
tbody tr:hover {
  background: var(--row-hover);
}
tbody tr:last-child td {
  border-bottom: none;
}
td.num,
th.num {
  text-align: right;
  font-family: var(--mono);
  font-size: 12.5px;
}
.tbl-wrap {
  overflow-x: auto;
  margin: 0 calc(var(--sp-8) * -1) calc(var(--sp-8) * -1);
  padding: 0 var(--sp-8) var(--sp-2);
}
.who {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.who .nm {
  font-weight: 500;
  line-height: 1.25;
}
.who .id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
}
.ava {
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  background:
    linear-gradient(
      145deg,
      var(--brand),
      var(--ava-2));
  border: 1px solid var(--line);
  color: var(--gold);
}
.empty {
  padding: var(--sp-11) var(--sp-8);
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
}
.empty b {
  display: block;
  color: var(--ink-dim);
  font-size: 14px;
  margin-bottom: var(--sp-2);
  font-weight: 600;
}
input,
select,
textarea {
  width: 100%;
  padding: var(--sp-4) var(--sp-6);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
}
input::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--field-placeholder);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--field-bg-focus);
}
select option {
  background: var(--field-option);
  color: var(--ink);
}
label.f {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}
.fg {
  margin-bottom: var(--sp-7);
}
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
}
.frow-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-7);
}
.check {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 12.5px;
  color: var(--ink-dim);
  cursor: pointer;
}
.check input {
  width: auto;
  accent-color: var(--gold);
}
.form-sec {
  border-top: 1px dashed var(--line);
  padding-top: var(--sp-7);
  margin-top: var(--sp-3);
}
.form-sec .lbl {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-6);
}
.stat {
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--gold);
  opacity: 0.5;
}
.stat .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stat .v {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 600;
  line-height: 0.95;
  margin: var(--sp-4) 0 var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.stat .s {
  font-size: 11.5px;
  color: var(--ink-dim);
}
.s-green::after {
  background: var(--green);
}
.s-amber::after {
  background: var(--amber);
}
.s-red::after {
  background: var(--red);
}
.rail {
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  margin-top: var(--sp-5);
  overflow: hidden;
}
.rail i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--gold);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim-bg);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
}
.scrim.on {
  display: flex;
}
@media (max-width: 860px) {
  .scrim {
    padding: var(--sp-6);
  }
}
.modal {
  width: 100%;
  max-width: 520px;
  background: var(--elev);
  border: 1px solid var(--elev-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  max-height: 88vh;
  overflow-y: auto;
}
.modal h3 {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-5);
}
@media (max-width: 860px) {
  .modal {
    padding: var(--sp-6);
    max-height: 92vh;
  }
}
#toasts {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 340px;
}
.toast {
  background: var(--elev);
  border: 1px solid var(--elev-border);
  border-left: 3px solid var(--gold);
  border-radius: 9px;
  padding: var(--sp-6) var(--sp-7);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  font-size: 12.8px;
  animation: slide 0.28s ease;
}
.toast.red {
  border-left-color: var(--red);
}
.toast.green {
  border-left-color: var(--green);
}
.toast .tt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}
@keyframes slide {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.toolbar {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--sp-7);
}
.toolbar input,
.toolbar select {
  width: auto;
  min-width: 150px;
  flex: 0 1 auto;
}
.toolbar .spacer {
  flex: 1;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 12.7px;
}
.kv:last-child {
  border-bottom: none;
}
.kv span {
  color: var(--ink-faint);
}
.kv b {
  font-family: var(--mono);
  font-weight: 500;
}
.note {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  line-height: 1.65;
}
.wf-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-9);
}
.wf-tab {
  padding: var(--sp-5) var(--sp-9);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: 0.15s;
  white-space: nowrap;
}
.wf-tab:hover {
  color: var(--ink-dim);
}
.wf-tab.on {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
}
.theme-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--toggle-bg);
  cursor: pointer;
  padding: 0;
}
.theme-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  transition: transform 0.25s, background 0.25s;
}
:root[data-theme=light] .theme-toggle::after {
  transform: translateX(16px);
}
.theme-icon {
  font-size: 13px;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  width: 246px;
  flex-shrink: 0;
  background:
    linear-gradient(
      180deg,
      var(--sidebar-a),
      var(--sidebar-b));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.brand {
  padding: var(--sp-8) var(--sp-9) var(--sp-8);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: var(--sp-5);
  align-items: center;
}
.brand .mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background:
    linear-gradient(
      145deg,
      var(--brand),
      var(--mark-2));
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold);
}
.brand .wm {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}
.brand .wm span {
  color: var(--gold);
}
.brand .sub {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.19em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 3px;
}
.nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5);
}
.nav-group {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.19em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding: var(--sp-7) var(--sp-5) var(--sp-3);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 8px;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: 0.16s;
  position: relative;
  text-decoration: none;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}
.nav-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(201, 168, 76, 0.14),
      transparent);
  color: var(--ink);
  border-left-color: var(--gold);
}
.nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.nav-item.active svg {
  stroke: var(--gold);
}
.nav-item .count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px var(--sp-3);
  border-radius: 20px;
  background: rgba(224, 69, 58, 0.18);
  color: var(--red);
  font-weight: 700;
}
.sidebar-foot {
  padding: var(--sp-6) var(--sp-8);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-faint);
  line-height: 1.7;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  position: relative;
  z-index: 110;
  height: 60px;
  flex-shrink: 0;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-9);
  gap: var(--sp-8);
}
.page-title {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  line-height: 1;
}
.page-title em {
  font-style: normal;
  color: var(--gold);
}
.top-right {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.clock {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.clock b {
  color: var(--ink);
  font-weight: 500;
}
.content {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-9);
}
.auth {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-10);
}
.auth-card {
  width: 100%;
  max-width: 380px;
}
.auth-corner {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.auth-head {
  text-align: center;
  margin-bottom: var(--sp-9);
}
.auth-head .wm {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}
.auth-head .wm span {
  color: var(--gold);
}
.auth-head .sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--sp-3);
}
@media (max-width: 1180px) {
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .g-23,
  .g3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 120;
    transform: translateX(-100%);
    transition: 0.25s;
  }
  .sidebar.open {
    transform: none;
  }
  .g2,
  .g4,
  .frow,
  .frow-3 {
    grid-template-columns: 1fr;
  }
  .content {
    padding: var(--sp-7);
  }
  .topbar {
    padding: 0 var(--sp-7);
  }
  .clock {
    display: none;
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */