/* ===================================================================
   GradeOS Shared Brand Kit
   Drop-in stylesheet for every authenticated app page. Provides:
     - Brand cursor (dot + ring, matches landing page)
     - GradeOS green accent (#c8ff00) tokens
     - Type system (JetBrains Mono for chrome, system for body)
     - Frosted card / pill primitives
     - Live status dot, brand badge, ◆ accents
     - Floating particle layer (opt-in via .gos-particles wrapper)
   USAGE:
     <link rel="stylesheet" href="/gradeos-brand.css">
     <script src="/gradeos-brand.js"></script>
   =================================================================== */

:root {
  /* ── Brand accent ─────────────────────────────────────────────── */
  --gos-accent: #c8ff00;
  --gos-accent-2: #d6ff33;            /* lighter lime, hover/gradient pair */
  --gos-accent-glow: rgba(200,255,0,0.55);
  --gos-accent-dim: rgba(200,255,0,0.12);

  /* ── Surfaces ─────────────────────────────────────────────────── */
  --gos-bg: #0a0a0b;
  --gos-bg-2: #16161a;
  --gos-bg-3: #1f1f25;
  --gos-text: #e8e8ea;
  --gos-text-dim: #9a9aa3;
  --gos-text-faint: #5a5a63;
  --gos-border: rgba(255,255,255,0.06);
  --gos-border-strong: rgba(255,255,255,0.12);

  /* ── Semantic state colors (canonical — was fragmented across files) */
  --gos-success: #6dde8f;
  --gos-success-dim: rgba(109,222,143,0.14);
  --gos-danger: #ff5a5a;
  --gos-danger-dim: rgba(255,90,90,0.14);
  --gos-warning: #ffb547;
  --gos-warning-dim: rgba(255,181,71,0.14);
  --gos-info: #5ab0ff;
  --gos-info-dim: rgba(90,176,255,0.14);

  /* ── Type ─────────────────────────────────────────────────────── */
  --gos-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gos-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Type scale (1.250 major-third, 16px base) */
  --gos-text-xs: 0.64rem;
  --gos-text-sm: 0.8rem;
  --gos-text-base: 1rem;
  --gos-text-lg: 1.25rem;
  --gos-text-xl: 1.563rem;
  --gos-text-2xl: 1.953rem;
  --gos-text-3xl: 2.441rem;
  --gos-weight-normal: 400;
  --gos-weight-medium: 500;
  --gos-weight-bold: 700;
  --gos-leading-tight: 1.2;
  --gos-leading-normal: 1.5;

  /* ── Spacing scale (4px base) ─────────────────────────────────── */
  --gos-space-1: 4px;
  --gos-space-2: 8px;
  --gos-space-3: 12px;
  --gos-space-4: 16px;
  --gos-space-5: 24px;
  --gos-space-6: 32px;
  --gos-space-8: 48px;
  --gos-space-10: 64px;

  /* ── Radius ───────────────────────────────────────────────────── */
  --gos-radius-pill: 999px;
  --gos-radius-card: 14px;
  --gos-radius-sm: 8px;
  --gos-radius-xs: 4px;

  /* ── Elevation / shadow ───────────────────────────────────────── */
  --gos-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --gos-shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --gos-shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
  --gos-shadow-accent: 0 0 24px var(--gos-accent-glow);

  /* ── Motion ───────────────────────────────────────────────────── */
  --gos-dur-fast: 120ms;
  --gos-dur-base: 220ms;
  --gos-dur-slow: 420ms;
  --gos-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gos-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Shared scroll contract ──────────────────────────────────────────
   Native scroll physics stay in charge. The runtime only supplies a
   consistent sticky-header offset and a quiet reading-progress signal. */
html[data-gx-scroll="ready"] {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--gx-scroll-offset, 0px) + 8px);
}
html[data-gx-scroll="ready"] body {
  overscroll-behavior-x: none;
  scrollbar-gutter: stable;
}
html[data-gx-scroll="ready"] :where([id]) {
  scroll-margin-top: calc(var(--gx-scroll-offset, 0px) + 8px);
}
.gx-scroll-progress {
  --gx-scroll-progress: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(var(--gx-scroll-progress));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gos-accent), var(--gos-accent-2));
  box-shadow: 0 0 12px rgba(200,255,0,.45);
  transition: opacity var(--gos-dur-fast) var(--gos-ease);
}
.gx-scroll-progress.is-visible { opacity: .9; }
.gos-nav .nav-links a.is-current,
body.gos-fx #gos-app-nav a.is-current {
  color: var(--gos-text) !important;
}
.gos-nav .nav-links a.is-current::after,
body.gos-fx #gos-app-nav a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
  html[data-gx-scroll="ready"] { scroll-behavior: auto; }
  .gx-scroll-progress { transition: none; }
}

/* ── Custom cursor (matches landing page exactly) ─────────────────── */
@media (hover: hover) and (pointer: fine) {
  body.gos-cursor-on { cursor: none; }
  body.gos-cursor-on a,
  body.gos-cursor-on button,
  body.gos-cursor-on [role="button"],
  body.gos-cursor-on input[type="button"],
  body.gos-cursor-on input[type="submit"] { cursor: none; }
  body.gos-cursor-on input[type="text"],
  body.gos-cursor-on input[type="email"],
  body.gos-cursor-on input[type="password"],
  body.gos-cursor-on input[type="number"],
  body.gos-cursor-on textarea,
  body.gos-cursor-on select { cursor: text; }
  body.gos-cursor-on select { cursor: pointer; }
}
.gos-cursor-dot, .gos-cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 99999;
  will-change: transform;
}
.gos-cursor-dot {
  width: 6px; height: 6px;
  background: var(--gos-accent); border-radius: 50%;
  box-shadow: 0 0 14px var(--gos-accent), 0 0 28px var(--gos-accent-glow);
  transition: opacity .15s ease;
}
.gos-cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid var(--gos-accent);
  border-radius: 50%;
  opacity: 0.55;
  transition: width .22s cubic-bezier(0.16,1,0.3,1), height .22s cubic-bezier(0.16,1,0.3,1), opacity .22s ease, background .22s ease;
}
.gos-cursor-ring.on {
  width: 56px; height: 56px;
  opacity: 1;
  background: var(--gos-accent-dim);
}
.gos-cursor-ring.click { transform: scale(0.85); }
.gos-cursor-dot.hide, .gos-cursor-ring.hide { opacity: 0; }
@media (hover: none), (pointer: coarse) {
  .gos-cursor-dot, .gos-cursor-ring { display: none; }
}

/* ── Brand badge: ◆ GRADEOS / [page name] ────────────────────────── */
.gos-brand-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--gos-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gos-text);
}
.gos-brand-badge .mark {
  color: var(--gos-accent);
  font-size: 16px;
  filter: drop-shadow(0 0 8px var(--gos-accent-glow));
  animation: gosPulse 3s ease-in-out infinite;
}
.gos-brand-badge .wordmark { font-weight: 800; }
.gos-brand-badge .divider { color: var(--gos-text-faint); }
.gos-brand-badge .page    { color: var(--gos-text-dim); font-weight: 600; }
@keyframes gosPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(200,255,0,0.4)); transform: scale(1); }
  50%     { filter: drop-shadow(0 0 14px rgba(200,255,0,0.8)); transform: scale(1.08); }
}

/* ── Live status dot ──────────────────────────────────────────────── */
.gos-live-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #6dde8f;
  animation: gosBlink 2s ease-in-out infinite;
}
@keyframes gosBlink {
  0%,100% { opacity: .45; box-shadow: 0 0 0 0 rgba(109,222,143,0); }
  50%     { opacity: 1;   box-shadow: 0 0 0 5px rgba(109,222,143,0.22); }
}

/* ── Frosted pill ─────────────────────────────────────────────────── */
.gos-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gos-border);
  color: var(--gos-text);
  padding: 7px 14px; border-radius: var(--gos-radius-pill);
  font-family: var(--gos-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer; transition: all .18s ease;
}
.gos-pill:hover { background: rgba(255,255,255,0.08); border-color: var(--gos-accent); }
.gos-pill.active { background: var(--gos-accent); color: var(--gos-bg); border-color: var(--gos-accent); }
.gos-pill .mark { color: var(--gos-accent); }
.gos-pill.active .mark { color: var(--gos-bg); }

/* ── Frosted card ─────────────────────────────────────────────────── */
.gos-card {
  background: var(--gos-bg-2);
  border: 1px solid var(--gos-bg-3);
  border-radius: var(--gos-radius-card);
  padding: 18px;
  transition: border-color .2s ease, transform .2s ease;
}
.gos-card:hover { border-color: rgba(200,255,0,0.25); }

/* ── Header bar (per-page nav strip below GOS_APP_NAV) ────────────── */
.gos-page-header {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--gos-bg-3);
  background: linear-gradient(180deg, var(--gos-bg) 0%, rgba(10,10,11,0.85) 100%);
}
.gos-page-header .stats {
  margin-left: auto;
  display: flex; gap: 18px;
  font-family: var(--gos-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gos-text-dim);
}
.gos-page-header .stats strong { color: var(--gos-accent); font-weight: 700; }

/* ── Floating particle layer (opt-in via .gos-particles container) ─ */
.gos-particles {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.gos-particles::before,
.gos-particles::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px;
  background: var(--gos-accent); border-radius: 50%;
  box-shadow:
    -180px -120px 0 -1px var(--gos-accent),
     220px  -80px 0 -1px var(--gos-accent),
    -100px  140px 0 -1px var(--gos-accent),
     180px  100px 0  0   var(--gos-accent-glow),
    -260px   60px 0 -2px var(--gos-accent),
     -40px -180px 0 -1px var(--gos-accent-glow),
     300px  180px 0 -2px var(--gos-accent);
  opacity: .6;
  animation: gosFloat 14s ease-in-out infinite;
}
.gos-particles::after {
  animation-delay: -7s;
  animation-duration: 11s;
}
@keyframes gosFloat {
  0%,100% { transform: translate(-50%, -50%) translateY(0); opacity: .35; }
  50%     { transform: translate(-50%, -50%) translateY(-30px); opacity: .8; }
}

/* ── Inline ◆ accent ──────────────────────────────────────────────── */
.gos-diamond {
  color: var(--gos-accent);
  filter: drop-shadow(0 0 6px var(--gos-accent-glow));
}

/* ── Body-level ambient FX (auto-enabled by adding body.gos-fx) ────
   Enterprise/blueprint treatment — NO floating particles or diamonds
   that overlap content. Just a subtle grid + two giant blurred gradient
   mesh blobs that slowly drift in the deep background. Reads as serious
   data UI, not a screensaver. */
body.gos-fx::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 100% at center, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at center, #000 30%, transparent 100%);
}
body.gos-fx::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 1100px 800px at 10% -10%,  rgba(200,255,0,0.14), transparent 60%),
    radial-gradient(ellipse 800px  650px at 90% 110%,  rgba(74,222,128,0.10), transparent 60%),
    radial-gradient(ellipse 600px  500px at 60% 50%,   rgba(200,255,0,0.04),  transparent 70%);
  animation: gosBlobDrift 22s ease-in-out infinite alternate;
}
@keyframes gosBlobDrift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%; opacity: .85; }
  100% { background-position: 8% 6%, -8% -5%, 5% -4%; opacity: 1; }
}

/* Scanbeam disabled per design — animation was too distracting and
   visually overrode content blocks. Kept as a no-op class for backwards
   compat with the auto-init JS. */
body.gos-fx .gos-scanbeam { display: none !important; }

/* Corner glow blobs disabled — they fought the page corners visually.
   The radial mesh in body::after already provides the same ambient warmth. */
body.gos-fx .gos-corner-glow { display: none !important; }

/* Particle canvas — keep the rule for backward compat but make it
   invisible by default. Particles only belong on the 360° viewer now. */
.gos-particle-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: none;
}

/* ── Side slogan ticker (vertical, via writing-mode for reliability) ──
   Add <div class="gos-side-slogan" data-side="left|right">PHRASE</div>
   and the JS rotator will cycle taglines through it. */
.gos-side-slogan {
  position: fixed; top: 50%;
  z-index: 3; pointer-events: none;
  font-family: var(--gos-mono);
  font-size: 10px; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-weight: 700; white-space: nowrap;
  display: flex; align-items: center; gap: 14px;
  transition: opacity .6s ease-in-out;
  max-height: 70vh; overflow: hidden;
}
/* writing-mode rotates the text block reliably across browsers; transform
   only handles the vertical centering offset. */
.gos-side-slogan[data-side="left"] {
  left: 22px;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}
.gos-side-slogan[data-side="right"] {
  right: 22px;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}
.gos-side-slogan::before,
.gos-side-slogan::after { content: '◆'; color: var(--gos-accent); font-size: 12px; filter: drop-shadow(0 0 4px var(--gos-accent-glow)); }

/* ── Side-edge brand decorations (visible on body.gos-fx pages) ──
   Adds vertical accent line + drifting diamond marks to both edges so
   the empty side spaces feel inhabited like the 360° viewer chamber. */
body.gos-fx::before { /* keep grid */ }
/* Side rails removed — pulsing diamonds were noise. */
.gos-side-rail { display: none !important; }

/* ── Engraved GRADEOS wordmark in the bottom-right background ──────
   Very faint — reads as engraved metal/etched glass rather than text.
   Anchored at the viewport corner so it never collides with content
   blocks; subtle gradient on the strokes mimics depth. */
/* ── Engraved GRADEOS wordmark with slow spotlight sweep ──────────
   The wordmark is etched into the background (outlined letters, ~2%
   opacity). A soft GradeOS-yellow spotlight slowly sweeps across the
   letters every 14s — like a backlit panel being scanned. Enterprise
   instrumentation feel: continuous, almost imperceptibly smooth, no
   hard motion or blinking. */
.gos-engraved {
  position: fixed;
  right: 48px; bottom: 64px;
  z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--gos-mono); font-weight: 800;
  font-size: 100px; letter-spacing: .18em; text-transform: uppercase;
  line-height: .9;
  white-space: nowrap;
  /* Outlined letters via text-stroke + transparent fill */
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.022);
  text-stroke: 1px rgba(255,255,255,0.022);
  /* Spotlight: a moving conic-gradient applied as background-clip:text on
     a duplicated ::after layer so the stroke base stays static while the
     gradient washes over the same letters in lime. */
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 35%,
    rgba(200,255,0,0.18) 48%,
    rgba(200,255,0,0.32) 50%,
    rgba(200,255,0,0.18) 52%,
    transparent 65%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gosEngraveSweep 14s linear infinite;
}
.gos-engraved .accent {
  /* OS is rendered with the same trick but a slightly stronger stroke */
  -webkit-text-stroke: 1px rgba(200,255,0,0.04);
  text-stroke: 1px rgba(200,255,0,0.04);
}
/* ── Personalized co-brand: "GRADEOS × COMPANY" ────────────────────── */
.gos-engraved .x {
  font-size: 0.55em;
  letter-spacing: 0;
  margin: 0 .22em 0 .25em;
  -webkit-text-stroke: 1px rgba(200,255,0,0.06);
  text-stroke: 1px rgba(200,255,0,0.06);
  vertical-align: 0.18em;
}
.gos-engraved .co {
  font-size: 0.78em;
  letter-spacing: .14em;
  -webkit-text-stroke: 1px rgba(255,255,255,0.03);
  text-stroke: 1px rgba(255,255,255,0.03);
}
/* Shrink + reposition so longer co-brand strings still fit the viewport. */
.gos-engraved.with-co {
  font-size: 78px;
  right: 36px; bottom: 48px;
}
@keyframes gosEngraveSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
@media (max-width: 1300px) {
  .gos-engraved.with-co { font-size: 56px; right: 24px; bottom: 36px; }
}
@media (max-width: 1100px) { .gos-engraved { display: none; } }

/* ── Universal status pill — LIVE / OFFLINE / IDLE / ERROR ──────── */
.gos-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--gos-mono); font-size: 9px;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid;
}
.gos-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.gos-status.live    { color: #6dde8f; border-color: rgba(109,222,143,0.4); background: rgba(109,222,143,0.08); }
.gos-status.live::before { animation: gosBlink 1.5s ease-in-out infinite; box-shadow: 0 0 6px currentColor; }
.gos-status.offline { color: #ff5a5a; border-color: rgba(255,90,90,0.35); background: rgba(255,90,90,0.06); }
.gos-status.idle    { color: #ffb547; border-color: rgba(255,181,71,0.35); background: rgba(255,181,71,0.06); }
.gos-status.neutral { color: var(--gos-text-faint); border-color: var(--gos-border); }

/* Floater removed — replaced by corner brackets that hug the viewport
   corners (zero content overlap) + a bottom data ticker. */
.gos-floater { display: none !important; }

/* Corner brackets removed — they read juvenile at viewport scale. The
   subtle blueprint grid + typewriter status + edge wordmark carry the
   "live instrumentation" feel without literal bracket shapes. */
.gos-corner { display: none !important; }

/* Typewriter retired — read as too "consumer terminal" for enterprise. */
.gos-typer { display: none !important; }

/* System ticker retired — replaced by a "brand thread" SVG animation
   that's anchored in the background. Keep selector for backwards compat. */
.gos-ticker { display: none !important; }

/* ── Unique GradeOS brand thread animation ─────────────────────────
   A thin glowing thread that traces a slow path across the page —
   inspired by the brand guide's "live frame" scan line. The thread is
   drawn as an SVG path with stroke-dasharray that scrolls, creating a
   continuous "data line" that wraps around the viewport edges. Sits
   at z:0 (background only) and is GPU-smooth (transform only). */
.gos-thread {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .55;
}
.gos-thread svg { width: 100%; height: 100%; display: block; }
.gos-thread path {
  fill: none; stroke: rgba(200,255,0,0.4); stroke-width: 1; stroke-linecap: round;
  stroke-dasharray: 8 1200;
  filter: drop-shadow(0 0 4px rgba(200,255,0,0.45));
  animation: gosThreadFlow 22s linear infinite;
}
@keyframes gosThreadFlow {
  0%   { stroke-dashoffset: 1500; }
  100% { stroke-dashoffset: -1500; }
}
/* Secondary thread, slower, opposite direction */
.gos-thread path.alt {
  stroke: rgba(109,222,143,0.25);
  stroke-dasharray: 4 1800;
  filter: drop-shadow(0 0 3px rgba(109,222,143,0.3));
  animation: gosThreadFlowAlt 34s linear infinite;
}
@keyframes gosThreadFlowAlt {
  0%   { stroke-dashoffset: -1800; }
  100% { stroke-dashoffset: 1800; }
}

/* ── Consolidate dual-nav: hide the inline page topbar when gos-fx is
   active. #gos-app-nav above provides the canonical app navigation. */
body.gos-fx .topbar { display: none !important; }

/* ── Upgrade the canonical app nav to enterprise-grade look ───────── */
body.gos-fx #gos-app-nav {
  height: 56px !important; padding: 0 28px !important;
  background: linear-gradient(180deg, rgba(10,10,11,0.98), rgba(10,10,11,0.85)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 50;
  display: flex !important; align-items: center !important; gap: 0 !important;
  font-family: var(--gos-mono) !important;
  letter-spacing: .18em !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
/* Prepend the GradeOS lockup before the nav links */
body.gos-fx #gos-app-nav::before {
  content: '◆ GRADEOS';
  color: var(--gos-text);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .22em;
  margin-right: 28px;
  padding-right: 24px;
  border-right: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  display: inline-flex; align-items: center;
}
body.gos-fx #gos-app-nav a {
  position: relative;
  padding: 18px 16px !important;
  color: var(--gos-text-dim) !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}
body.gos-fx #gos-app-nav a:hover { color: var(--gos-text) !important; }
body.gos-fx #gos-app-nav a::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px;
  background: var(--gos-accent); transform: scaleX(0); transform-origin: center;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 0 10px var(--gos-accent-glow);
  border: none !important;
}
body.gos-fx #gos-app-nav a:hover::after,
body.gos-fx #gos-app-nav a[style*="border-bottom"]::after { transform: scaleX(1); }
/* The inline highlight script applies `border-bottom: 1px solid #c8ff00`
   on the active link — neutralize that so our underline below wins. */
body.gos-fx #gos-app-nav a[style*="border-bottom"] {
  color: var(--gos-text) !important;
  border-bottom: 0 !important;
  padding-bottom: 18px !important;
}
body.gos-fx #gos-app-nav #gos-app-billing {
  margin-left: auto !important;
  font-family: var(--gos-mono) !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  color: var(--gos-text-dim) !important;
  display: inline-flex; align-items: center; gap: 18px;
}
body.gos-fx #gos-app-nav #gos-app-billing::before {
  content: '●'; color: #6dde8f;
  animation: gosBlink 2s ease-in-out infinite;
  font-size: 8px;
}

/* ── Standard branded page-title block ───────────────────────────── */
.gos-page-title-block { margin-bottom: 28px; animation: gosSlideUp .6s ease-out both; }
.gos-page-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-family: var(--gos-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gos-text-dim);
}
.gos-page-eyebrow .mark { color: var(--gos-accent); font-size: 14px; filter: drop-shadow(0 0 6px var(--gos-accent-glow)); }
.gos-page-eyebrow .name { font-weight: 800; color: var(--gos-text); }
.gos-page-eyebrow .sep  { color: var(--gos-text-faint); }
.gos-page-eyebrow .page { color: var(--gos-text-dim); font-weight: 600; }
.gos-page-h1 {
  font-family: var(--gos-mono); font-weight: 800;
  font-size: 38px; letter-spacing: -0.01em; line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 30%, #9a9aa3 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.gos-page-sub {
  font-family: var(--gos-mono); font-size: 11px;
  color: var(--gos-text-dim);
  letter-spacing: .18em; text-transform: uppercase;
  margin-top: 12px; display: flex; align-items: center; gap: 10px;
}
.gos-page-sub::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #6dde8f; box-shadow: 0 0 8px #6dde8f;
  animation: gosBlink 2s ease-in-out infinite;
}
@keyframes gosSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── Glass card primitive — reusable enterprise frosted card ────── */
.gos-glass {
  background: linear-gradient(135deg, rgba(22,22,26,0.85) 0%, rgba(14,14,18,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s;
}
.gos-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(200,255,0,0.18), transparent 50%, rgba(200,255,0,0.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.gos-glass:hover { transform: translateY(-4px); border-color: rgba(200,255,0,0.18); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.gos-glass:hover::before { opacity: 1; }
.gos-glass > * { position: relative; z-index: 1; }
.gos-glass-pad { padding: 22px 24px; }

/* ───────────────────────────────────────────────────────────────────
   Canonical button system — one look for every page in the app.
   The console's glass-pill .btn is the gold standard; we promote it
   to .gos-btn (new) and ALSO map legacy classes (.btn, .btn-primary,
   .btn-ghost, .btn-export, .tile-btn) to the same look so dashboard /
   inventory / lot etc. all flow together.
   Uses high-specificity body[class] selectors + !important on the
   handful of properties that page-local CSS tends to override
   (background, border, radius, font, padding). Keeps native button
   semantics intact — no JS, no markup changes needed.
   ─────────────────────────────────────────────────────────────────── */
:root {
  --gos-btn-bg: rgba(22,22,26,0.7);
  --gos-btn-bg-hover: rgba(28,28,34,0.85);
  --gos-btn-border: rgba(255,255,255,0.10);
  --gos-btn-border-hover: rgba(200,255,0,0.55);
  --gos-btn-text: #e8e8ea;
  --gos-btn-accent: #c8ff00;
  --gos-btn-accent-deep: #0a0a0b;
}

/* Base pill — applied to .gos-btn AND legacy .btn / .btn-export / .tile-btn.
   Keep selector flat (single class) so any page-local cascade can override
   layout-specific tweaks but NOT the core brand language. */
.gos-btn,
body .btn,
body .btn-export,
body .tile-btn,
body button.btn,
body a.btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  border: 1px solid var(--gos-btn-border) !important;
  background: var(--gos-btn-bg) !important;
  color: var(--gos-btn-text) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: all .25s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  line-height: 1;
  white-space: nowrap;
}

/* Diamond bullet — opt-in: any .gos-btn (or .btn) with [data-icon] or
   the literal ◆ in markup keeps it; otherwise we add one via ::before
   ONLY on the canonical .gos-btn class to avoid double-stamping legacy
   buttons that already inline their own ◆. */
.gos-btn::before {
  content: '◆';
  color: var(--gos-btn-accent);
  font-size: 10px;
  filter: drop-shadow(0 0 4px rgba(200,255,0,0.45));
}
.gos-btn.no-icon::before { content: none; }

/* Hover — lime border, faint lift, no garish glow */
.gos-btn:hover,
body .btn:hover,
body .btn-export:hover,
body .tile-btn:hover,
body button.btn:hover,
body a.btn:hover {
  border-color: var(--gos-btn-border-hover) !important;
  color: var(--gos-btn-accent) !important;
  background: var(--gos-btn-bg-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200,255,0,0.10);
}

/* Active / pressed */
.gos-btn:active,
body .btn:active,
body .btn-export:active,
body .tile-btn:active { transform: translateY(0) !important; }

/* Disabled */
.gos-btn[disabled],
.gos-btn:disabled,
body .btn:disabled,
body .btn-export:disabled,
body .tile-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Primary — lime fill, black text. Decision-moment only. */
.gos-btn.primary,
.gos-btn-primary,
body .btn.btn-primary,
body .btn.primary,
body .tile-btn.primary,
body a.btn.btn-primary {
  background: var(--gos-btn-accent) !important;
  color: var(--gos-btn-accent-deep) !important;
  border-color: var(--gos-btn-accent) !important;
  font-weight: 700 !important;
}
.gos-btn.primary::before { color: var(--gos-btn-accent-deep); filter: none; }
.gos-btn.primary:hover,
.gos-btn-primary:hover,
body .btn.btn-primary:hover,
body .btn.primary:hover,
body .tile-btn.primary:hover,
body a.btn.btn-primary:hover {
  background: #d6ff33 !important;
  border-color: #d6ff33 !important;
  color: var(--gos-btn-accent-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(200,255,0,0.28) !important;
}

/* Ghost — same pill, no background. For tertiary actions. */
.gos-btn.ghost,
.gos-btn-ghost,
body .btn.btn-ghost,
body .btn.ghost,
body .tile-btn.ghost {
  background: transparent !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--gos-btn-text) !important;
}
.gos-btn.ghost:hover,
.gos-btn-ghost:hover,
body .btn.btn-ghost:hover,
body .btn.ghost:hover,
body .tile-btn.ghost:hover {
  background: rgba(22,22,26,0.5) !important;
  border-color: var(--gos-btn-border-hover) !important;
  color: var(--gos-btn-accent) !important;
}

/* Danger — for destructive (×, remove, delete). Keep restrained. */
.gos-btn.danger,
body .tile-btn.danger,
body .btn.danger {
  background: transparent !important;
  border-color: rgba(255,77,77,0.35) !important;
  color: rgba(255,77,77,0.85) !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}
.gos-btn.danger:hover,
body .tile-btn.danger:hover,
body .btn.danger:hover {
  background: rgba(255,77,77,0.08) !important;
  border-color: #ff4d4d !important;
  color: #ff7676 !important;
}

/* Size variants */
.gos-btn.sm { padding: 8px 14px !important; font-size: 10px !important; }
.gos-btn.lg { padding: 14px 26px !important; font-size: 12px !important; }

/* ───────────────────────────────────────────────────────────────────
   Loading state primitives — used while inventory/lot/passport data
   streams in. Two flavors:
     .gos-skeleton    — shimmering placeholder block (rect)
     .gos-loading     — full overlay panel with brand spinner + label
   Reusable across every page so the brand language stays consistent.
   ─────────────────────────────────────────────────────────────────── */
@keyframes gosSkelShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.gos-skeleton {
  display: block;
  border-radius: 8px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.02) 0%,
      rgba(200,255,0,0.06) 50%,
      rgba(255,255,255,0.02) 100%);
  background-size: 200% 100%;
  animation: gosSkelShimmer 1.6s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,0.03);
}
.gos-skel-tile {
  /* Drop-in placeholder shaped like a device-tile card */
  width: 100%; aspect-ratio: 3/4;
}
.gos-skel-row {
  width: 100%; height: 18px; margin: 6px 0;
}

/* Full-region loading overlay. Pin to any positioned parent. */
.gos-loading {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  background: rgba(10,10,11,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--gos-mono);
  pointer-events: all;
}
.gos-loading.is-overlay { background: rgba(10,10,11,0.85); }
.gos-loading-spinner {
  width: 56px; height: 56px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.gos-loading-spinner::before,
.gos-loading-spinner::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid transparent;
}
.gos-loading-spinner::before {
  border-top-color: #c8ff00;
  border-right-color: rgba(200,255,0,0.4);
  animation: gosSpin 1.2s cubic-bezier(.5,0,.5,1) infinite;
  box-shadow: 0 0 24px rgba(200,255,0,0.18);
}
.gos-loading-spinner::after {
  inset: 8px;
  border-left-color: rgba(200,255,0,0.6);
  border-bottom-color: rgba(200,255,0,0.15);
  animation: gosSpin 2s linear infinite reverse;
}
.gos-loading-spinner .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #c8ff00;
  box-shadow: 0 0 12px #c8ff00;
  animation: gosBlink 1.4s ease-in-out infinite;
}
@keyframes gosSpin {
  to { transform: rotate(360deg); }
}
.gos-loading-label {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: #c8ff00;
  display: flex; align-items: center; gap: 10px;
}
.gos-loading-label::before { content: '◆'; }
.gos-loading-sub {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  max-width: 320px; text-align: center; line-height: 1.6;
}

/* ───────────────────────────────────────────────────────────────────
   Top app nav (#gos-app-nav) — branded refresh.
   The legacy markup uses inline styles in every page. Rather than
   editing 8 HTMLs, we override here with !important + high specificity
   so the new look ships site-wide via the brand kit.

   Look: tall frosted dark bar, ◆ brand mark on the left, sleek tab
   pills (active = lime underline + lime text), right-side workspace
   meta chip. Matches the rest of the app's enterprise pill language.
   ─────────────────────────────────────────────────────────────────── */
#gos-app-nav,
nav#gos-app-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 14px 28px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(10,10,11,0.78) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  font-family: var(--gos-mono) !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--gos-text-dim) !important;
  position: sticky; top: 0; z-index: 80;
  /* faint lime hairline under the bar */
  box-shadow: 0 1px 0 rgba(200,255,0,0.06);
}
/* ◆ GRADEOS brand mark on the far left — appears even when the existing
   markup doesn't include one. Pure CSS, no markup change. */
#gos-app-nav::before {
  content: '◆ GRADEOS';
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--gos-text);
  padding-right: 22px;
  margin-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
}
/* Reset legacy inline span#gos-brand-text if a page injects it */
#gos-app-nav > .gos-app-brand,
#gos-app-nav > .brand,
#gos-app-nav > strong { display: none !important; }

/* Tab links */
#gos-app-nav a {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 10px 16px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  color: var(--gos-text-dim) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  font-size: 11px !important;
  border-bottom: 0 !important;  /* kill the legacy inline underline */
  transition: color .18s ease, background .18s ease;
  line-height: 1;
}
#gos-app-nav a:hover {
  color: var(--gos-text) !important;
  background: rgba(255,255,255,0.04) !important;
}
/* Active state — beats the legacy inline JS styling via !important */
#gos-app-nav a.active,
#gos-app-nav a[aria-current="page"],
#gos-app-nav a[style*="border-bottom"] {
  color: var(--gos-accent) !important;
  background: rgba(200,255,0,0.06) !important;
}
#gos-app-nav a.active::after,
#gos-app-nav a[aria-current="page"]::after,
#gos-app-nav a[style*="border-bottom"]::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gos-accent), transparent);
  box-shadow: 0 0 8px rgba(200,255,0,0.6);
}

/* Right-side workspace meta chip (#gos-app-billing & friends) */
#gos-app-nav #gos-app-billing,
#gos-app-nav .gos-app-meta,
#gos-app-nav > span:last-child {
  margin-left: auto !important;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(22,22,26,0.6) !important;
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 10px !important;
  letter-spacing: .18em !important;
  color: var(--gos-text-dim) !important;
  white-space: nowrap;
}
#gos-app-nav #gos-app-billing::before {
  content: '';
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gos-accent);
  box-shadow: 0 0 8px var(--gos-accent);
  animation: gosBlink 2s ease-in-out infinite;
}
@media (max-width: 760px) {
  #gos-app-nav { padding: 10px 14px !important; gap: 2px !important; overflow-x: auto; }
  #gos-app-nav::before { padding-right: 12px; margin-right: 8px; font-size: 10px; }
  #gos-app-nav a { padding: 8px 10px !important; font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   GRADE BADGE — .gos-grade  (A / B / C / D)
   The core GradeOS business entity. Use for any grade display.
   <span class="gos-grade a">A</span>
   Sizes: default (20px), .lg (28px), .xl (40px)
   ═══════════════════════════════════════════════════════════════════ */
.gos-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  font-family: var(--gos-mono); font-weight: 800;
  font-size: 12px; letter-spacing: 0; line-height: 1;
  flex-shrink: 0;
}
.gos-grade.a { background: rgba(109,222,143,0.15); color: #6dde8f; border: 1px solid rgba(109,222,143,0.4); }
.gos-grade.b { background: rgba(200,255,0,0.12); color: #c8ff00; border: 1px solid rgba(200,255,0,0.35); }
.gos-grade.c { background: rgba(255,181,71,0.12); color: #ffb547; border: 1px solid rgba(255,181,71,0.35); }
.gos-grade.d { background: rgba(255,90,90,0.10); color: #ff5a5a; border: 1px solid rgba(255,90,90,0.35); }
.gos-grade.lg { width: 30px; height: 30px; font-size: 16px; border-radius: 7px; }
.gos-grade.xl { width: 44px; height: 44px; font-size: 22px; border-radius: 10px; }
/* Grade row — grade badge + label on one line */
.gos-grade-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--gos-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gos-text-dim);
}

/* ═══════════════════════════════════════════════════════════════════
   FORM PRIMITIVES — .gos-field / .gos-label / .gos-input / .gos-select
   ═══════════════════════════════════════════════════════════════════ */
.gos-field {
  display: flex; flex-direction: column; gap: 6px;
}
.gos-label {
  font-family: var(--gos-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gos-text-dim);
}
.gos-label .req { color: var(--gos-accent); margin-left: 3px; }
.gos-input,
.gos-select,
.gos-textarea {
  width: 100%;
  background: rgba(22,22,26,0.7);
  border: 1px solid var(--gos-border-strong);
  border-radius: var(--gos-radius-sm);
  color: var(--gos-text);
  font-family: var(--gos-mono);
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--gos-dur-base) var(--gos-ease),
              box-shadow var(--gos-dur-base) var(--gos-ease);
  -webkit-appearance: none; appearance: none;
}
.gos-input::placeholder, .gos-textarea::placeholder { color: var(--gos-text-faint); }
.gos-input:hover, .gos-select:hover, .gos-textarea:hover {
  border-color: rgba(255,255,255,0.2);
}
.gos-input:focus, .gos-select:focus, .gos-textarea:focus {
  border-color: var(--gos-accent);
  box-shadow: 0 0 0 3px rgba(200,255,0,0.10);
}
.gos-input.error, .gos-select.error, .gos-textarea.error {
  border-color: var(--gos-danger);
  box-shadow: 0 0 0 3px rgba(255,90,90,0.10);
}
.gos-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.gos-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239a9aa3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px; cursor: pointer;
}
.gos-field-hint {
  font-family: var(--gos-mono); font-size: 10px;
  color: var(--gos-text-faint); letter-spacing: .10em;
}
.gos-field-hint.error { color: var(--gos-danger); }

/* ═══════════════════════════════════════════════════════════════════
   DATA TABLE — .gos-table
   Wrap in a .gos-table-wrap for horizontal scroll on mobile.
   ═══════════════════════════════════════════════════════════════════ */
.gos-table-wrap { overflow-x: auto; border-radius: var(--gos-radius-card); }
.gos-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--gos-mono); font-size: 12px;
  background: var(--gos-bg-2);
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-radius-card);
  overflow: hidden;
}
.gos-table th {
  padding: 10px 16px;
  text-align: left; white-space: nowrap;
  font-size: 9px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gos-text-faint);
  border-bottom: 1px solid var(--gos-border);
  background: rgba(255,255,255,0.02);
}
.gos-table td {
  padding: 11px 16px;
  color: var(--gos-text);
  border-bottom: 1px solid var(--gos-border);
  vertical-align: middle;
  transition: background var(--gos-dur-fast);
}
.gos-table tr:last-child td { border-bottom: 0; }
.gos-table tr:hover td { background: rgba(255,255,255,0.025); }
.gos-table td.dim { color: var(--gos-text-dim); }
.gos-table td.accent { color: var(--gos-accent); font-weight: 700; }
.gos-table td.mono { font-family: var(--gos-mono); }

/* ═══════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS — .gos-toast
   Position with a fixed container: .gos-toast-stack
   ═══════════════════════════════════════════════════════════════════ */
.gos-toast-stack {
  position: fixed; bottom: 28px; right: 28px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9000; max-width: 360px; width: 100%;
  pointer-events: none;
}
.gos-toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  background: var(--gos-bg-3);
  border: 1px solid var(--gos-border-strong);
  border-radius: var(--gos-radius-card);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--gos-shadow-lg);
  font-family: var(--gos-mono); font-size: 12px;
  color: var(--gos-text);
  pointer-events: all;
  animation: gosToastIn var(--gos-dur-slow) var(--gos-ease-out) both;
}
@keyframes gosToastIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gos-toast .icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.gos-toast .body { flex: 1; }
.gos-toast .title { font-weight: 700; margin-bottom: 2px; }
.gos-toast .msg { color: var(--gos-text-dim); font-size: 11px; line-height: 1.5; }
.gos-toast.success { border-left: 3px solid var(--gos-success); }
.gos-toast.success .icon { color: var(--gos-success); }
.gos-toast.danger  { border-left: 3px solid var(--gos-danger); }
.gos-toast.danger  .icon { color: var(--gos-danger); }
.gos-toast.warning { border-left: 3px solid var(--gos-warning); }
.gos-toast.warning .icon { color: var(--gos-warning); }
.gos-toast.info    { border-left: 3px solid var(--gos-info); }
.gos-toast.info    .icon { color: var(--gos-info); }
.gos-toast-close {
  margin-left: 4px; flex-shrink: 0;
  background: none; border: none; padding: 0;
  color: var(--gos-text-faint); font-size: 16px; line-height: 1;
  cursor: pointer; transition: color var(--gos-dur-fast);
}
.gos-toast-close:hover { color: var(--gos-text); }

/* ═══════════════════════════════════════════════════════════════════
   EMPTY STATE — .gos-empty
   Centered placeholder when a data region has no rows.
   ═══════════════════════════════════════════════════════════════════ */
.gos-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--gos-space-10) var(--gos-space-6);
  gap: var(--gos-space-4);
  font-family: var(--gos-mono);
}
.gos-empty-icon {
  font-size: 32px; opacity: .35;
  filter: grayscale(1);
}
.gos-empty-title {
  font-size: 14px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gos-text-dim);
}
.gos-empty-sub {
  font-size: 11px; color: var(--gos-text-faint);
  letter-spacing: .06em; max-width: 280px; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   TABS — .gos-tabs / .gos-tab / .gos-tab-panel
   ═══════════════════════════════════════════════════════════════════ */
.gos-tabs {
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: var(--gos-bg-2);
  border: 1px solid var(--gos-border);
  border-radius: var(--gos-radius-sm);
  font-family: var(--gos-mono);
}
.gos-tab {
  padding: 8px 16px; border-radius: 6px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gos-text-dim);
  background: none; border: none; cursor: pointer;
  transition: all var(--gos-dur-fast) var(--gos-ease);
  white-space: nowrap;
}
.gos-tab:hover { color: var(--gos-text); background: rgba(255,255,255,0.04); }
.gos-tab.active {
  color: var(--gos-accent);
  background: rgba(200,255,0,0.08);
}
.gos-tab-panel { display: none; }
.gos-tab-panel.active { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   SMALL BADGE — .gos-badge
   For metadata tags, categories, counts.
   ═══════════════════════════════════════════════════════════════════ */
.gos-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--gos-mono); font-size: 9px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  color: var(--gos-text-dim);
  border: 1px solid var(--gos-border);
  white-space: nowrap;
}
.gos-badge.accent { background: var(--gos-accent-dim); color: var(--gos-accent); border-color: rgba(200,255,0,0.25); }
.gos-badge.success { background: var(--gos-success-dim); color: var(--gos-success); border-color: rgba(109,222,143,0.25); }
.gos-badge.danger  { background: var(--gos-danger-dim);  color: var(--gos-danger);  border-color: rgba(255,90,90,0.25); }
.gos-badge.warning { background: var(--gos-warning-dim); color: var(--gos-warning); border-color: rgba(255,181,71,0.25); }

/* ═══════════════════════════════════════════════════════════════════
   DIVIDER — .gos-divider
   ═══════════════════════════════════════════════════════════════════ */
.gos-divider {
  height: 1px; background: var(--gos-border);
  margin: var(--gos-space-5) 0; border: none;
}
.gos-divider.label {
  display: flex; align-items: center; gap: 12px;
  height: auto; background: none; margin: var(--gos-space-5) 0;
  font-family: var(--gos-mono); font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gos-text-faint);
}
.gos-divider.label::before, .gos-divider.label::after {
  content: ''; flex: 1; height: 1px; background: var(--gos-border);
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESS BAR — .gos-progress
   ═══════════════════════════════════════════════════════════════════ */
.gos-progress-wrap {
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px; overflow: hidden;
}
.gos-progress {
  height: 100%; border-radius: 999px;
  background: var(--gos-accent);
  box-shadow: 0 0 8px var(--gos-accent-glow);
  transition: width .6s var(--gos-ease-out);
}
.gos-progress.success { background: var(--gos-success); box-shadow: 0 0 8px rgba(109,222,143,0.4); }
.gos-progress.danger  { background: var(--gos-danger);  box-shadow: 0 0 8px rgba(255,90,90,0.4); }
.gos-progress.warning { background: var(--gos-warning); box-shadow: 0 0 8px rgba(255,181,71,0.4); }

/* ═══════════════════════════════════════════════════════════════════
   BRAND HEADLINE + ARTIFACT SYSTEM  (blue-chip enterprise luxury, 2026-06-13)
   Reusable hero typography + brand artifacts that "hold" the GradeOS design:
   the refined kicker, the machined display headline, the credential strip,
   hairline corner-frames, and the Device-Passport SEAL emblem.
   All composited-cheap (no animated blur); one slow seal rotation only.
   ═══════════════════════════════════════════════════════════════════ */

/* ── KICKER — the refined eyebrow: brandmark · word · extending hairline · tag ── */
.gx-kicker{display:flex;align-items:center;gap:13px;margin-bottom:18px;
  font-family:var(--gos-mono,'JetBrains Mono',monospace);font-size:10.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gos-text-dim,#9a9aa3)}
.gx-kicker .gx-k-dia{color:var(--gos-accent,#c8ff00);font-size:11px;
  filter:drop-shadow(0 0 6px rgba(200,255,0,.55))}
.gx-kicker .gx-k-brand{color:var(--gos-text,#e8e8ea);font-weight:700;letter-spacing:.3em}
.gx-kicker .gx-k-rule{flex:1;height:1px;min-width:24px;
  background:linear-gradient(90deg,rgba(200,255,0,.38),rgba(255,255,255,.10) 34%,rgba(255,255,255,.03) 100%)}
.gx-kicker .gx-k-tag{color:var(--gos-text-faint,#5a5a63);letter-spacing:.28em;white-space:nowrap}
.gx-kicker .gx-k-tag b{color:var(--gos-accent,#c8ff00);font-weight:700}

/* ── DISPLAY HEADLINE — tight optical tracking, refined weight ── */
.gx-display{font-family:'Geist',var(--gos-sans,system-ui),sans-serif;font-weight:650;
  font-size:clamp(34px,4.6vw,52px);letter-spacing:-.035em;line-height:.98;margin:0;color:#e9eaec}
/* the Instrument-Serif accent word — same treatment as the 3D viewer ink */
.gx-display .gx-ink,.gx-ink{font-family:'Instrument Serif',serif;font-style:italic;
  font-weight:400;color:var(--gos-accent,#c8ff00);font-size:1.08em;letter-spacing:-.012em;
  text-shadow:0 0 30px rgba(200,255,0,.28)}

/* ── LEDE — calm mono subhead ── */
.gx-lede{font-family:var(--gos-mono,'JetBrains Mono',monospace);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gos-text-dim,#9a9aa3);
  margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gx-lede b{color:var(--gos-accent,#c8ff00);font-weight:700}

/* ── CREDENTIAL STRIP — the blue-chip trust row, hairline-delimited ── */
.gx-credbar{display:flex;flex-wrap:wrap;align-items:center;margin-top:24px;
  font-family:var(--gos-mono,'JetBrains Mono',monospace);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gos-text-dim,#9a9aa3)}
.gx-credbar span{display:inline-flex;align-items:center;gap:9px;padding:0 17px;line-height:1;
  border-left:1px solid rgba(255,255,255,.08)}
.gx-credbar span:first-child{padding-left:0;border-left:0}
.gx-credbar span::before{content:"";width:5px;height:5px;flex:none;
  background:var(--gos-accent,#c8ff00);transform:rotate(45deg);
  box-shadow:0 0 7px rgba(200,255,0,.6)}

/* ── HAIRLINE CORNER FRAME — engineered-precision detail for hero blocks ── */
.gx-frame{position:relative}
.gx-frame::before,.gx-frame::after{content:"";position:absolute;width:15px;height:15px;pointer-events:none}
.gx-frame::before{left:-7px;top:-7px;
  border-left:1px solid rgba(200,255,0,.5);border-top:1px solid rgba(200,255,0,.5)}
.gx-frame::after{right:-7px;bottom:-7px;
  border-right:1px solid rgba(200,255,0,.5);border-bottom:1px solid rgba(200,255,0,.5)}

/* ── DEVICE-PASSPORT SEAL — the signature brand artifact (rendered by gradeos-brand.js) ── */
.gx-seal{width:124px;height:124px;flex:none;display:block;line-height:0;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.45))}
.gx-seal svg{width:100%;height:100%;overflow:visible;display:block}
.gx-seal .gx-seal-rot{transform-box:fill-box;transform-origin:50% 50%;
  animation:gxSealSpin 64s linear infinite}
@keyframes gxSealSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gx-seal .gx-seal-rot{animation:none}}
.gx-seal.sm{width:96px;height:96px}

/* ═══════════════════════════════════════════════════════════════════
   GX-LOGO — the constructed GradeOS lockup (2026-07-16 craft pass)
   ONE mark everywhere: 4 registration corners (the inspection frame /
   four holders) + outer diamond hairline (the passport seal) + scan
   axis + solid inner ◆. Structure is currentColor → theme-agnostic:
   lime on dark (primary), ink on light (secondary, .ink / gx-light).
   Canonical markup (paste verbatim; do not redraw):

   <a href="/" class="gx-logo" aria-label="GradeOS">
     <svg class="gx-logo-mark" viewBox="0 0 32 32" fill="none" aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg">
       <path d="M2.5 8V2.5H8M24 2.5H29.5V8M29.5 24V29.5H24M8 29.5H2.5V24"
             stroke="currentColor" stroke-opacity=".5" stroke-linecap="square"/>
       <path d="M16 4.75L27.25 16L16 27.25L4.75 16Z" stroke="currentColor" stroke-width="1.1"/>
       <path d="M6.5 16H25.5" stroke="currentColor" stroke-opacity=".45" stroke-width=".8"/>
       <path d="M16 10.75L21.25 16L16 21.25L10.75 16Z" fill="currentColor"/>
     </svg>
     <span class="gx-logo-word">GRADE<b>OS</b></span>
   </a>

   Clearspace: keep ≥ the inner-diamond width (11/32 of mark height) of
   empty space on all sides. Never scale the mark below 16px. Never
   recolor parts individually — the mark is monochrome by law.
   ═══════════════════════════════════════════════════════════════════ */
.gx-logo{display:inline-flex;align-items:center;gap:10px;
  color:var(--gos-accent,#c8ff00);text-decoration:none !important;line-height:1}
.gx-logo-mark{width:26px;height:26px;flex:none;display:block}
.gx-logo-word{font-family:var(--gos-mono,'JetBrains Mono',ui-monospace,monospace);
  font-weight:800;font-size:15px;letter-spacing:.08em;
  color:var(--gos-text,#e8e8ea);line-height:1;white-space:nowrap}
.gx-logo-word b{color:var(--gos-accent,#c8ff00);font-weight:800}
/* sizes */
.gx-logo.sm{gap:8px}.gx-logo.sm .gx-logo-mark{width:20px;height:20px}
.gx-logo.sm .gx-logo-word{font-size:12.5px}
.gx-logo.lg{gap:13px}.gx-logo.lg .gx-logo-mark{width:34px;height:34px}
.gx-logo.lg .gx-logo-word{font-size:19px}
/* stacked variant — mark above word, centered */
.gx-logo--stack{flex-direction:column;gap:9px}
/* secondary variant — dark-on-light (whole lockup ink; lime fails on white) */
.gx-logo.ink,html.gx-light .gx-logo{color:#0a0a0b}
.gx-logo.ink .gx-logo-word,.gx-logo.ink .gx-logo-word b,
html.gx-light .gx-logo .gx-logo-word,html.gx-light .gx-logo .gx-logo-word b{color:#0a0a0b}

/* ═══════════════════════════════════════════════════════════════════
   GX-DEPTH — layered instrument background (2026-07-16 craft pass)
   Pure-CSS depth for pages without a WebGL substrate: 48px working
   grid + 240px survey grid, a lime light-pool up top, corner
   registration ticks, and ONE slow scan sweep (transform-only,
   removed under prefers-reduced-motion). Same layer law as #gxAtmo:
   fixed, z:-1, pointer-events none — body background paints on the
   canvas behind it, page content paints above.
   Usage: <div class="gx-depth" aria-hidden="true"></div> as first
   child of <body>. Add .quiet for funnels (no scan, softer pool).
   ═══════════════════════════════════════════════════════════════════ */
.gx-depth{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 62% at 50% -4%, rgba(200,255,0,.05), transparent 62%),
    radial-gradient(ellipse 72% 48% at 88% 108%, rgba(200,255,0,.028), transparent 60%),
    linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.013) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px,240px 240px,240px 240px;
  mask-image:radial-gradient(ellipse 130% 105% at 50% 38%, #000 42%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 130% 105% at 50% 38%, #000 42%, transparent 100%)}
.gx-depth.quiet{background:
    radial-gradient(ellipse 80% 55% at 50% -6%, rgba(200,255,0,.035), transparent 60%),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size:auto,48px 48px,48px 48px}
/* corner registration ticks */
.gx-depth::before{content:'';position:absolute;inset:20px;opacity:.4;
  background:
    linear-gradient(rgba(200,255,0,.55),rgba(200,255,0,.55)) no-repeat left top/1px 13px,
    linear-gradient(rgba(200,255,0,.55),rgba(200,255,0,.55)) no-repeat left top/13px 1px,
    linear-gradient(rgba(200,255,0,.55),rgba(200,255,0,.55)) no-repeat right top/1px 13px,
    linear-gradient(rgba(200,255,0,.55),rgba(200,255,0,.55)) no-repeat right top/13px 1px,
    linear-gradient(rgba(200,255,0,.55),rgba(200,255,0,.55)) no-repeat left bottom/1px 13px,
    linear-gradient(rgba(200,255,0,.55),rgba(200,255,0,.55)) no-repeat left bottom/13px 1px,
    linear-gradient(rgba(200,255,0,.55),rgba(200,255,0,.55)) no-repeat right bottom/1px 13px,
    linear-gradient(rgba(200,255,0,.55),rgba(200,255,0,.55)) no-repeat right bottom/13px 1px}
/* one slow scan sweep — the "instrument is on" tell */
.gx-depth::after{content:'';position:absolute;left:0;right:0;top:-140px;height:140px;
  will-change:transform;
  background:linear-gradient(180deg,transparent,rgba(200,255,0,.028) 45%,rgba(200,255,0,.05) 50%,rgba(200,255,0,.028) 55%,transparent);
  animation:gxDepthScan 19s cubic-bezier(.16,1,.3,1) infinite}
.gx-depth.quiet::after{content:none}
@keyframes gxDepthScan{
  0%{transform:translateY(0);opacity:0}
  9%{opacity:1}
  88%{opacity:1}
  100%{transform:translateY(calc(100vh + 280px));opacity:0}}
@media (prefers-reduced-motion:reduce){.gx-depth::after{animation:none;opacity:0}}

/* ═══════════════════════════════════════════════════════════════════
   MASTHEAD — the composed hero shell (2026-06-13 "flow" pass)
   Brackets the kicker / headline / seal / CTA / credentials into ONE
   gridded, hairline-structured unit — the Stripe/Linear/Palantir register:
   a top meta-row, a baseline-aligned headline row, and a credential rail
   floor, separated by hairlines. Same elements, now composed not scattered.
   ═══════════════════════════════════════════════════════════════════ */
.gx-masthead{position:relative;margin:6px 0 34px;
  animation:devUp .6s cubic-bezier(.16,1,.3,1) both}
@keyframes gxMastUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* top meta row — kicker left, status right, hairline under */
.gx-mast-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07)}
.gx-mast-meta .gx-kicker{margin:0;flex:1;min-width:0}
.gx-mast-status{display:inline-flex;align-items:center;gap:9px;flex:none;
  font-family:var(--gos-mono,'JetBrains Mono',monospace);font-size:9.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gos-text-faint,#5a5a63);white-space:nowrap}
.gx-mast-status i{width:6px;height:6px;border-radius:50%;background:var(--gos-success,#6dde8f);
  box-shadow:0 0 8px rgba(109,222,143,.7);flex:none;animation:gxStatusPulse 3s ease-in-out infinite}
@keyframes gxStatusPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* headline row — lead (display + lede) left, side (seal + CTA) right, baseline-aligned */
.gx-mast-main{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding:34px 0 30px}
.gx-mast-lead{min-width:0;flex:1}
.gx-mast-lead .gx-display{margin:0}
.gx-mast-lead .sub,.gx-mast-lead .page-sub,.gx-mast-lead .gx-lede{margin-top:16px}
.gx-mast-side{display:flex;flex-direction:column;align-items:flex-end;gap:20px;flex:none}

/* credential rail floor — equal columns, hairline top, evenly distributed */
.gx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--gos-mono,'JetBrains Mono',monospace);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gos-text-dim,#9a9aa3)}
.gx-rail span{display:flex;align-items:center;gap:9px;padding:16px 20px;line-height:1;
  border-left:1px solid rgba(255,255,255,.055)}
.gx-rail span:first-child{border-left:0;padding-left:0}
.gx-rail span::before{content:"";width:5px;height:5px;flex:none;
  background:var(--gos-accent,#c8ff00);transform:rotate(45deg);box-shadow:0 0 7px rgba(200,255,0,.55)}

@media (max-width:820px){
  .gx-mast-main{flex-direction:column;align-items:stretch;gap:24px;padding:26px 0 24px}
  .gx-mast-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .gx-rail{grid-auto-flow:row;grid-auto-columns:auto}
  .gx-rail span{border-left:0;padding:11px 0;border-top:1px solid rgba(255,255,255,.05)}
  .gx-rail span:first-child{border-top:0}
}

/* ═══════════════════════════════════════════════════════════════════
   GLASS OVERLAYS — keep key context in frame while scrolling (2026-06-13)
   Auto-built by gradeos-glass.js from the masthead. GradeOS-themed frosted
   glass, STATIC blur (never animated → perf-safe), slides via transform.
     · .gx-glassbar  — condensed sticky header: brandmark + section + CTA,
                       appears once the masthead scrolls off → actions stay reachable.
     · .gx-scrollcue — frosted "more ↓" pill when there's content below the fold.
   ═══════════════════════════════════════════════════════════════════ */
.gx-glassbar{position:fixed;left:0;right:0;top:0;z-index:60;transform:translateY(-100%);opacity:0;
  pointer-events:none;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .42s ease;
  background:rgba(11,12,15,.7);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 34px rgba(0,0,0,.42)}
.gx-glassbar::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,255,0,.45) 22%,rgba(200,255,0,.45) 78%,transparent)}
.gx-glassbar.on{transform:translateY(0);opacity:1;pointer-events:auto}
.gx-gb-in{max-width:1380px;margin:0 auto;padding:11px 28px;display:flex;align-items:center;gap:14px}
.gx-gb-mark{color:var(--gos-accent,#c8ff00);font-size:12px;flex:none;filter:drop-shadow(0 0 6px rgba(200,255,0,.55))}
.gx-gb-title{font-family:var(--gos-mono,'JetBrains Mono',monospace);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#e8e8ea;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gx-gb-spacer{flex:1}
.gx-glassbar .gx-gb-cta{flex:none;transform:scale(.92);transform-origin:right center}

.gx-scrollcue{position:fixed;left:50%;bottom:22px;z-index:55;transform:translateX(-50%) translateY(14px);
  display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:999px;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);
  background:rgba(11,12,15,.64);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(200,255,0,.24);box-shadow:0 10px 30px rgba(0,0,0,.42);
  font-family:var(--gos-mono,'JetBrains Mono',monospace);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#cfd2d6}
.gx-scrollcue.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.gx-scrollcue i{color:var(--gos-accent,#c8ff00);font-style:normal;font-size:11px;
  animation:gxCueBob 1.7s ease-in-out infinite}
@keyframes gxCueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.gx-scrollcue i{animation:none}.gx-glassbar{transition:opacity .3s}}