/* CDI — FTL Off-Market Intelligence. Shared dark theme: tokens, chrome, brand,
   and reusable form primitives (used by the app shell and the login screen). */
:root{
  color-scheme: dark;
  --ink:#0A0F1A; --ink-2:#0D1422; --surface:#111A2B; --surface-2:#16223A;
  --line:#1F2D45; --line-soft:#192439;
  --text:#E6ECF5; --muted:#8A99B5; --faint:#5E6E8C;
  --gold:#F2B45A; --gold-bright:#FFC76B;
  --aqua:#46D6C8; --alert:#FF6B6B;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* ambient beacon over dark water */
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:340px; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 200px at 18% -40px, rgba(242,180,90,.10), transparent 70%),
    radial-gradient(60% 180px at 90% -60px, rgba(70,214,200,.07), transparent 70%);
}
a{color:var(--aqua);}

/* ---- brand lockup (shared: top bar + login) ---- */
.brand{display:flex; align-items:center; gap:15px;}
.brand__logo{width:48px; height:48px; display:block; flex:none;
  filter:drop-shadow(0 0 13px rgba(70,214,200,.42)) drop-shadow(0 0 4px rgba(90,176,224,.5));}
.brand__lockup{display:flex; flex-direction:column; gap:5px;}
.brand__cdrow{display:flex; align-items:center; gap:11px;}
.brand__cdi{
  font-family:var(--display); font-weight:700; font-size:1.6rem; line-height:1; letter-spacing:.03em;
  background:linear-gradient(118deg,#5ab0e0 0%,#46D6C8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand__bar{width:2px; align-self:stretch; min-height:1.4rem; border-radius:2px;
  background:linear-gradient(180deg,#5ab0e0,#46D6C8); opacity:.85;}
.brand__stack{display:flex; flex-direction:column; line-height:.96;
  font-family:var(--display); font-weight:600; font-size:.58rem; letter-spacing:.13em;
  text-transform:uppercase; color:#A9C2DC;}
.brand__tag{font-family:var(--display); font-weight:500; font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);}
.brand__platform{font-family:var(--mono); font-weight:500; font-size:.58rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);}
@media (max-width:760px){ .brand__bar,.brand__stack,.brand__tag{display:none;} }

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; gap:16px;
  background:rgba(10,15,26,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__right{display:flex; align-items:center; gap:16px;}
.status{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.status__dot{width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 0 0 rgba(70,214,200,.6); animation:pulse 2.6s infinite;}
.user{font-family:var(--mono); font-size:.78rem; color:var(--text); padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface);}
.logout{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; padding:6px 11px; border:1px solid var(--line); border-radius:999px; background:transparent; cursor:pointer;}
.logout:hover{color:var(--alert); border-color:var(--alert);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(70,214,200,.5);}70%{box-shadow:0 0 0 7px rgba(70,214,200,0);}100%{box-shadow:0 0 0 0 rgba(70,214,200,0);}}

/* ---- compliance strip ---- */
.compliance{
  position:relative; z-index:1;
  margin:0; padding:11px 26px 11px 23px;
  background:var(--ink-2); border-bottom:1px solid var(--line); border-left:3px solid var(--gold);
  color:var(--muted); font-size:.82rem;
}
.compliance b{font-family:var(--mono); color:var(--gold); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; font-weight:600; margin-right:.5em;}

.wrap{position:relative; z-index:1; padding:26px; max-width:1500px; margin:0 auto;}
@media (max-width:640px){ .topbar,.compliance,.wrap{padding-left:16px; padding-right:16px;} }

/* ---- reusable form primitives ---- */
.btn{cursor:pointer; border-radius:9px; padding:9px 16px; min-height:38px;
  font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.02em;
  border:1px solid transparent; transition:transform .08s ease, background .15s ease, border-color .15s ease;}
.btn:active{transform:translateY(1px);}
.btn--gold{background:var(--gold); color:#1a1206;}
.btn--gold:hover{background:var(--gold-bright);}
.btn--ghost{background:transparent; color:var(--muted); border-color:var(--line);}
.btn--ghost:hover{color:var(--aqua); border-color:var(--aqua);}
.input{appearance:none; background:var(--surface); color:var(--text); border:1px solid var(--line);
  border-radius:9px; padding:8px 11px; font-family:var(--body); font-size:.85rem; min-height:38px;}
.input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,180,90,.18);}

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