/* ═══════════════════════════════════════════════
   CPS — Warm-paper / Lab-blueprint design system
   Drop-in replacement for old theme.css
   Palette: paper · graphite · navy ink · lime signal
   Type:    IBM Plex Sans + IBM Plex Mono
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Surface — warm paper */
  --paper:#f4f1ea; --paper-2:#ece8de; --paper-3:#e0dccf;
  --paper-edge:#d6d2c4; --card:#fbf9f3;
  --card-shadow:rgba(40,30,10,0.06);

  /* Ink — navy + graphite */
  --ink:#0f1f3d; --ink-2:#2c3e60; --ink-3:#5b6d8a; --ink-faint:#9aa6b8;
  --graphite:#1a1a1a;

  /* Signal — lime accent */
  --signal:#c4ff3d; --signal-dk:#a3df1f; --signal-ink:#1a2400;
  --signal-glow:rgba(196,255,61,0.25); --signal-soft:rgba(196,255,61,0.12);

  /* Status — paper-friendly muted */
  --ok:#1e7a4d;   --ok-bg:#d9ebe0;
  --err:#b32424;  --err-bg:#f0d6d6;
  --warn:#8a6a1a; --warn-bg:#efe5c2;
  --info:#1f4c8a; --info-bg:#d8e2ee;

  /* Lines */
  --line:#c8c2b0; --line-strong:#1a1a1a;
  --line-grid:rgba(15,31,61,0.08); --line-grid-strong:rgba(15,31,61,0.16);

  /* ── Back-compat with original token names so existing JS-injected
        markup stays consistent. Many inline styles in source HTML/JS
        reference --sky, --bg, --surface etc. We map them onto the new system. ── */
  --sky: var(--ink-2);
  --sky-lt: var(--ink-3);
  --sky-dk: var(--ink);
  --sky-glow: var(--signal-soft);
  --bg: var(--paper);
  --bg-alt: var(--paper-2);
  --surface: var(--card);
  --surface-2: var(--paper-2);
  --border: var(--paper-edge);
  --border-hv: var(--graphite);
  --ink-2: #2c3e60;
  --muted: var(--ink-3);
  --ghost: var(--paper-2);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(40,30,10,0.06);
  --shadow-md: 0 2px 8px rgba(40,30,10,0.08);
  --shadow-lg: 0 8px 32px rgba(40,30,10,0.14);

  /* Geometry */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;

  /* Motion */
  --t:.16s cubic-bezier(.32,.72,0,1);
  --t-lg:.28s cubic-bezier(.32,.72,0,1);

  /* Layout */
  --header-h:56px;

  /* Type */
  --font-sans:'IBM Plex Sans','Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'JetBrains Mono',monospace;
}

[data-theme="dark"] {
  --paper:#0f1115; --paper-2:#14171c; --paper-3:#1a1e25;
  --paper-edge:#242935; --card:#161a21;
  --card-shadow:rgba(0,0,0,0.4);

  --ink:#f0ede4; --ink-2:#c5cad5; --ink-3:#8995a8; --ink-faint:#5a6577;
  --graphite:#f4f1ea;

  --signal:#c4ff3d; --signal-dk:#d4ff66; --signal-ink:#0d1400;
  --signal-glow:rgba(196,255,61,0.18); --signal-soft:rgba(196,255,61,0.08);

  --ok:#4ade80;   --ok-bg:rgba(30,122,77,0.22);
  --err:#f87171;  --err-bg:rgba(179,36,36,0.22);
  --warn:#facc15; --warn-bg:rgba(138,106,26,0.22);
  --info:#60a5fa; --info-bg:rgba(31,76,138,0.22);

  --line:#2a2f3a; --line-strong:#f4f1ea;
  --line-grid:rgba(240,237,228,0.06); --line-grid-strong:rgba(240,237,228,0.12);

  --sky:var(--ink-2); --sky-lt:var(--ink-3); --sky-dk:var(--ink);
  --sky-glow:var(--signal-soft);
  --bg:var(--paper); --bg-alt:var(--paper-2);
  --surface:var(--card); --surface-2:var(--paper-2);
  --border:var(--paper-edge); --border-hv:var(--ink-3);
  --muted:var(--ink-3); --ghost:var(--paper-2);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 36px rgba(0,0,0,0.55);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html,body {
  font-family:var(--font-sans);
  background:var(--paper); color:var(--ink);
  min-height:100vh; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv11';
  transition:background .25s, color .25s;
}
h1,h2,h3,h4,h5 { font-family:var(--font-sans); font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
h1 { font-weight:300; letter-spacing:-0.025em; }
p { color:var(--ink-2); }
a { color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--t); }
a:hover { border-bottom-color:var(--graphite); }
.mono, code { font-family:var(--font-mono); font-feature-settings:'zero','ss01'; letter-spacing:0.01em; }
::selection { background:var(--signal); color:var(--signal-ink); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--paper-3); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--ink-faint); }

/* ── Topographic background motif ──
   The old coordinate grid is replaced by map-style isolines + schematic
   satellites, injected as `.cps-topo` by js/topo-bg.js. The `.bg-grid`
   hook is kept (legacy class on <body>) but no longer paints a grid. ── */
.bg-grid::before { content:none; }

:root {
  --topo-line:0.11;         /* contour opacity */
  --topo-line-strong:0.19;  /* index contour */
  --topo-sig:0.6;           /* highlighted ridge / accent */
  --topo-sat:0.5;           /* satellite line-art */
  --topo-node:0.5;
}
[data-theme="dark"] {
  --topo-line:0.07;
  --topo-line-strong:0.13;
  --topo-sig:0.42;
  --topo-sat:0.42;
  --topo-node:0.45;
}

.cps-topo {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  color:var(--ink); overflow:hidden;
  /* keep the motif even across the width, fading gently toward the bottom
     so footer / dense lower content stays calm */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0.35) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0.35) 100%);
}
.cps-topo svg { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* contour isolines */
.cps-topo .contour {
  fill:none; stroke:currentColor; stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:var(--topo-line); vector-effect:non-scaling-stroke;
}
.cps-topo .contour.index { opacity:var(--topo-line-strong); stroke-width:1.4; }
.cps-topo .contour.sig   { stroke:var(--signal-dk); opacity:var(--topo-sig); stroke-width:1.4; }
[data-theme="dark"] .cps-topo .contour.sig { stroke:var(--signal); }

/* satellites */
.cps-topo .topo-sats { opacity:var(--topo-sat); }
.cps-topo .strut { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cps-topo .hair  { fill:none; stroke:currentColor; stroke-width:0.8; opacity:0.7; }
.cps-topo .sig-fill { fill:var(--signal-dk); stroke:none; }
[data-theme="dark"] .cps-topo .sig-fill { fill:var(--signal); }
.cps-topo .sat-float {
  transform-box:fill-box; transform-origin:center;
  animation:topoFloat 9s ease-in-out infinite;
}
@keyframes topoFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-7px); }
}

/* ground nodes */
.cps-topo .topo-nodes { opacity:var(--topo-node); }
.cps-topo .node-dot { fill:currentColor; stroke:none; }
.cps-topo .pulse {
  fill:none; stroke:currentColor; stroke-width:1.2; opacity:0.6;
  transform-box:fill-box; transform-origin:center;
  animation:topoPulse 3.4s ease-out infinite;
}
.cps-topo .pulse.sig-ring { stroke:var(--signal-dk); }
[data-theme="dark"] .cps-topo .pulse.sig-ring { stroke:var(--signal); }
@keyframes topoPulse {
  0%   { transform:scale(0.5); opacity:0.7; }
  100% { transform:scale(2.2); opacity:0; }
}

/* signal beams */
.cps-topo .beam-cone { fill:currentColor; opacity:0.05; stroke:none; }
.cps-topo .beam-ray {
  stroke:currentColor; stroke-width:1; opacity:0.35;
  stroke-dasharray:3 5; animation:topoBeam 1.6s linear infinite;
}
.cps-topo .beam.accent .beam-cone { fill:var(--signal-dk); opacity:0.08; }
.cps-topo .beam.accent .beam-ray  { stroke:var(--signal-dk); opacity:0.55; }
[data-theme="dark"] .cps-topo .beam.accent .beam-cone { fill:var(--signal); }
[data-theme="dark"] .cps-topo .beam.accent .beam-ray  { stroke:var(--signal); }
@keyframes topoBeam { to { stroke-dashoffset:-16; } }

@media (prefers-reduced-motion: reduce) {
  .cps-topo .sat-float, .cps-topo .pulse, .cps-topo .beam-ray { animation:none; }
}

/* ── Header ── */
.header {
  background:rgba(244,241,234,0.85); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:0 24px;
  border-bottom:1px solid var(--paper-edge);
  position:fixed; width:100%; top:0; z-index:1000;
  height:var(--header-h); display:flex; align-items:center;
  transition:background .25s, border-color .25s;
}
[data-theme="dark"] .header { background:rgba(15,17,21,0.85); }
.header-content {
  max-width:1200px; margin:0 auto; width:100%;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.logo, .auth-logo-row {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; cursor:pointer; flex-shrink:0; color:var(--ink);
  border:none;
}
.logo:hover, .auth-logo-row:hover { border:none; }
.logo-mark {
  width:34px; height:28px; flex-shrink:0;
  color:var(--graphite);
}
.logo-mark .signal-dot { fill:var(--signal); }
.logo-text, .logo-name {
  font-family:var(--font-mono); font-weight:600;
  font-size:0.95rem; color:var(--ink); letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px;
}
.logo-text .lock-cps, .logo-name .lock-cps {
  font-family:var(--font-mono); font-weight:700; letter-spacing:0.06em;
  font-size:0.92rem; color:var(--ink); padding:1px 0;
  border-right:1px solid var(--paper-edge); padding-right:10px;
}
.logo-text .tag, .logo-name .tag {
  font-size:0.65rem; font-weight:500; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.14em;
  font-family:var(--font-mono);
}
/* Hide the legacy emoji `.logo-icon` if any HTML still has it */
.logo-icon { display:none !important; }

/* ── Inline icon helper (used everywhere) ── */
.icon { display:inline-flex; align-items:center; justify-content:center; vertical-align:-2px; line-height:0; flex-shrink:0; }
.icon svg { display:block; }
button .icon, a .icon { pointer-events:none; }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; line-height:0; }
[data-icon] svg { display:block; }

/* ── Theme toggle ── */
.theme-toggle {
  width:32px; height:32px; border-radius:var(--r-sm);
  border:1px solid var(--paper-edge); background:var(--card);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all var(--t); color:var(--ink-2); flex-shrink:0;
  line-height:1;
}
.theme-toggle:hover { background:var(--paper-2); border-color:var(--graphite); color:var(--ink); }

/* ── User area ── */
.user-info, .user-menu { display:flex; align-items:center; gap:12px; }

/* Global avatar link injected by chrome.js */
.cps-avatar-link {
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0; cursor:pointer; text-decoration:none;
  background:var(--paper-2); color:var(--ink-2);
  border:1px solid var(--paper-edge); transition:all var(--t);
}
.cps-avatar-link:hover { border-color:var(--graphite); color:var(--graphite); transform:translateY(-1px); }
.cps-avatar-link img { width:100%; height:100%; object-fit:cover; display:block; }
.cps-avatar-link .cps-avatar-initial {
  font-family:var(--font-mono); font-weight:600; font-size:13px;
  color:var(--ink-2); letter-spacing:0;
}
.cps-avatar-link svg { display:block; }
.user-name {
  color:var(--ink-3); font-weight:500; font-size:0.8rem; white-space:nowrap;
  font-family:var(--font-mono); letter-spacing:0.01em;
}
.user-avatar {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden; flex-shrink:0;
  border:1px solid var(--paper-edge); transition:all var(--t);
}
.user-avatar:hover { border-color:var(--graphite); }
.user-avatar.av-letter {
  background:var(--graphite); color:var(--paper);
  font-weight:600; font-size:13px;
}
.user-avatar img { width:100%; height:100%; object-fit:cover; }
.logout-btn, .btn-logout {
  background:none; border:1px solid transparent; color:var(--ink-3);
  cursor:pointer; padding:6px 12px;
  font-size:0.78rem; font-family:var(--font-sans);
  border-radius:var(--r-sm); transition:all var(--t); white-space:nowrap;
}
.logout-btn:hover, .btn-logout:hover { color:var(--err); border-color:var(--err); }

.auth-buttons { display:flex; gap:8px; }
.login-link {
  color:var(--ink-2); font-size:0.85rem; padding:7px 14px;
  border-radius:var(--r-sm); transition:background var(--t);
  font-family:var(--font-sans); border:1px solid transparent;
}
.login-link:hover { background:var(--paper-2); border:1px solid transparent; }
.register-link {
  background:var(--graphite); padding:7px 14px;
  border-radius:var(--r-sm); color:var(--paper);
  font-size:0.85rem; font-weight:500; font-family:var(--font-sans);
  transition:all var(--t); border:1px solid var(--graphite);
}
.register-link:hover { background:var(--ink); border-color:var(--ink); }

/* ── Main layout ── */
.main-content, .main {
  max-width:1200px; margin:0 auto;
  padding:calc(var(--header-h) + 32px) 24px 60px;
  position:relative; z-index:1;
}
.main { max-width:1000px; }

/* ── Card ── */
.card {
  background:var(--card);
  border-radius:var(--r-lg); padding:28px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--paper-edge);
  transition:background .25s, border-color .25s;
}
.card-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; flex-wrap:wrap; gap:10px;
  padding-bottom:14px; border-bottom:1px solid var(--paper-edge);
}
.card-title {
  font-size:0.78rem; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:0.12em;
  font-family:var(--font-mono);
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--font-sans); font-size:0.85rem; font-weight:500;
  cursor:pointer; transition:all var(--t); white-space:nowrap;
  line-height:1.2;
}
.btn:hover { transform:none; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary {
  background:var(--graphite); color:var(--paper); border-color:var(--graphite);
}
.btn-primary:hover { background:var(--ink); border-color:var(--ink); }
.btn-primary:disabled:hover { background:var(--graphite); }
.btn-signal {
  background:var(--signal); color:var(--signal-ink); border-color:var(--signal);
  font-weight:600;
}
.btn-signal:hover { background:var(--signal-dk); border-color:var(--signal-dk); }
.btn-ghost {
  background:transparent; color:var(--ink); border:1px solid var(--paper-edge);
}
.btn-ghost:hover { background:var(--paper-2); border-color:var(--graphite); }
.btn-danger {
  background:transparent; color:var(--err); border:1px solid var(--err);
}
.btn-danger:hover { background:var(--err-bg); }
.btn-select {
  background:transparent; color:var(--ink-2); border:1px solid var(--paper-edge);
}
.btn-select.active {
  background:var(--paper-2); border-color:var(--graphite); color:var(--ink);
}
.btn-full { width:100%; padding:12px; font-size:0.95rem; font-weight:600; }

/* ── Forms ── */
input[type="text"], input[type="password"], input[type="email"],
input[type="date"], input[type="number"], select, textarea {
  width:100%; padding:9px 12px;
  border:1px solid var(--paper-edge); border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:0.9rem;
  color:var(--ink); background:var(--paper);
  outline:none; transition:all var(--t);
  -webkit-appearance:none; appearance:none;
}
input[type="number"], input[type="date"], .mono, code,
input[id^="antenna"], input[id^="mobile"], input[id^="pc"], input[id^="dev"] { /* mono numerics */ }
input.mono, input[id^="antennaName"], input[id^="mobileAntenna"] {
  font-family:var(--font-mono); letter-spacing:0.02em;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--graphite); box-shadow:0 0 0 3px var(--signal-soft);
}
input::placeholder, textarea::placeholder { color:var(--ink-faint); }
input.err { border-color:var(--err); }
label {
  display:block; font-size:0.78rem; font-weight:500;
  color:var(--ink-2); margin-bottom:6px;
  font-family:var(--font-sans);
}
.form-group, .form-field, .field { margin-bottom:18px; }
.field-error { font-size:0.72rem; color:var(--err); margin-top:4px; font-family:var(--font-mono); }

/* ── Badges ── */
.status-badge, .badge {
  display:inline-block; padding:3px 10px; border-radius:var(--r-xs);
  font-size:0.68rem; font-weight:600;
  font-family:var(--font-mono); letter-spacing:0.04em;
  text-transform:uppercase;
}
.status-completed  { background:var(--ok-bg);   color:var(--ok); }
.status-failed     { background:var(--err-bg);  color:var(--err); }
.status-processing { background:var(--warn-bg); color:var(--warn); }
.status-pending    { background:var(--info-bg); color:var(--info); }
.badge-type  { background:var(--paper-2); color:var(--ink); border:1px solid var(--paper-edge); }
.badge-mount { background:var(--signal-soft); color:var(--ink); border:1px solid transparent; }

/* ── Toast & Notification ── */
.notification {
  position:fixed; top:calc(var(--header-h) + 12px); right:20px;
  padding:11px 18px; border-radius:var(--r-sm);
  background:var(--card); color:var(--ink);
  box-shadow:var(--shadow-md); border:1px solid var(--paper-edge);
  display:none; z-index:1100; font-size:0.85rem; font-weight:500;
  font-family:var(--font-mono);
}
.toast {
  position:fixed; bottom:24px; right:24px;
  padding:11px 16px; border-radius:var(--r-sm);
  font-size:0.85rem; font-weight:500; font-family:var(--font-sans);
  box-shadow:var(--shadow-md); z-index:3000;
  opacity:0; transform:translateY(8px); transition:all var(--t);
  pointer-events:none; border:1px solid transparent;
}
.toast.show { opacity:1; transform:translateY(0); }
.toast.ok  { background:var(--ok-bg);  color:var(--ok);  border-color:var(--ok); }
.toast.err { background:var(--err-bg); color:var(--err); border-color:var(--err); }

/* ── Modal ── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,31,61,0.45); backdrop-filter:blur(4px);
  z-index:2000; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:24px 16px;
}
[data-theme="dark"] .modal-overlay { background:rgba(0,0,0,0.6); }
.modal-overlay.visible { display:flex; }
.modal {
  background:var(--card); border:1px solid var(--paper-edge);
  border-radius:var(--r-lg); padding:24px;
  max-width:420px; width:100%; box-shadow:var(--shadow-lg);
  margin:auto; color:var(--ink);
  animation:popIn .18s var(--t);
}
.modal.modal-lg { max-width:620px; }
.modal h3 { margin-bottom:6px; font-size:1.05rem; font-weight:600; }
.modal p  { color:var(--ink-3); font-size:0.85rem; margin-bottom:18px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.btn-cancel {
  background:transparent; color:var(--ink-2); border:1px solid var(--paper-edge);
  padding:9px 16px; border-radius:var(--r-sm);
  cursor:pointer; font-family:var(--font-sans); font-size:0.85rem; transition:all var(--t);
}
.btn-cancel:hover { background:var(--paper-2); }
.btn-confirm {
  background:var(--err); color:#fff; border:1px solid var(--err);
  padding:9px 16px; border-radius:var(--r-sm);
  cursor:pointer; font-family:var(--font-sans); font-size:0.85rem;
  transition:all var(--t);
}
.btn-confirm:hover { filter:brightness(.92); }

/* ── Footer ── */
.footer {
  background:transparent; border-top:1px solid var(--paper-edge);
  padding:20px 24px; text-align:center;
}
.footer-content {
  max-width:1200px; margin:0 auto; color:var(--ink-3);
  font-size:0.78rem; font-family:var(--font-mono); letter-spacing:0.02em;
}

/* ── Animations ── */
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes fadeUp  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes popIn   { from { transform:scale(.96); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes spin    { to { transform:rotate(360deg); } }

/* ── Mobile ── */
@media (max-width:768px) {
  .header { padding:0 16px; }
  .main-content, .main { padding-top:calc(var(--header-h) + 20px); padding-left:14px; padding-right:14px; }
  .card { padding:20px 16px; }
  .logo-text .tag { display:none; }
}