/* FL Trades dark-theme lock. No white CTA surfaces inside the CRM. */
:root{
  --fl-brand-orange:#ff421a;
  --fl-brand-ember:#ff6a22;
  --fl-brand-violet:#7a38ff;
  --fl-brand-magenta:#d32cff;
  --fl-live:#6ea8ff;
  --fl-bull:#6ea8ff;
  --fl-warn:#d9b173;
  --fl-danger:#ef806e;
  --fl-surface-deep:#030206;
}
html{color-scheme:dark!important}

[hidden],
.operator-login[hidden],
.operator-workspace[hidden],
.operator-menu[hidden],
#login-view[hidden],
#workspace-view[hidden]{
  display:none!important;
}

/* Do not paint the sign-in panel until the session decision is known. */
#login-view{visibility:hidden}
body.fl-auth-resolved #login-view:not([hidden]){visibility:visible}

/* Login atmosphere uses the supplied responsive raster artwork directly. No SVG reconstruction. */
.operator-login{
  position:relative!important;
  isolation:isolate!important;
  background-color:#020203!important;
  background-image:
    radial-gradient(circle at 30% 48%,rgba(122,56,255,.055),transparent 38%),
    url('fl_trades_desktop_16x9_no_wordmark.webp')!important;
  background-size:cover!important;
  background-position:center 58%!important;
  background-repeat:no-repeat!important;
  box-sizing:border-box!important;
}
.operator-login::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,2,3,.10),rgba(2,2,3,.30)),
    linear-gradient(90deg,rgba(2,2,3,.30) 0%,rgba(2,2,3,.12) 43%,rgba(2,2,3,.22) 100%);
}
.login-vault{position:relative!important;z-index:1!important}

/* Approved login-card language: black glass with a hairline orange→magenta→violet perimeter and restrained bloom. Canonical deep surface #030206 per forensic V04. */
.login-panel{
  position:relative!important;
  isolation:isolate!important;
  border:1px solid transparent!important;
  background:
    linear-gradient(var(--fl-surface-deep),var(--fl-surface-deep)) padding-box,
    linear-gradient(118deg,
      rgba(255,106,34,.58) 0%,
      rgba(255,66,26,.44) 28%,
      rgba(211,44,255,.42) 62%,
      rgba(122,56,255,.48) 100%) border-box!important;
  backdrop-filter:blur(18px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(110%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.022),
    0 24px 78px rgba(0,0,0,.64),
    0 1px 0 rgba(255,255,255,.04)!important;
}
.login-panel::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(255,106,34,.10),rgba(211,44,255,.07) 58%,rgba(122,56,255,.10));
  filter:blur(10px);
  opacity:.14;
}
.operator-login .operator-input:focus{
  border-color:rgba(255,106,34,.58)!important;
  box-shadow:0 0 0 3px rgba(122,56,255,.12),inset 0 0 0 1px rgba(255,66,26,.12)!important;
}
.operator-login #password-recovery:hover,
.operator-login #password-recovery:focus-visible{color:var(--fl-brand-ember)!important}
.login-wordmark{
  display:block!important;
  width:min(210px,72%)!important;
  max-height:70px!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0 auto 12px!important;
}
.login-panel-head{text-align:center!important}
.login-panel-head .status-pill{display:none!important}
.login-panel-head h1{
  margin:0!important;
  color:#fff!important;
}
.login-panel-head p{
  display:block!important;
  margin:8px 0 0!important;
  color:rgba(245,245,247,.70)!important;
  font-size:14px!important;
  line-height:1.45!important;
}
.login-input-shell{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
}
.login-input-shell .operator-input{
  min-height:42px!important;
  height:42px!important;
  padding-left:44px!important;
  padding-right:15px!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.14)!important;
  border-radius:10px!important;
  font-size:14px!important;
  line-height:1!important;
}
.login-password-shell .operator-input{padding-right:46px!important}
.login-field-icon{
  position:absolute!important;
  left:14px!important;
  width:18px!important;
  height:18px!important;
  display:grid!important;
  place-items:center!important;
  color:rgba(245,245,247,.48)!important;
  pointer-events:none!important;
}
.login-password-toggle{
  position:absolute!important;
  right:9px!important;
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:rgba(245,245,247,.54)!important;
  cursor:pointer!important;
}
.login-password-toggle:hover,
.login-password-toggle:focus-visible{
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  outline:0!important;
}
.login-recovery-link{
  justify-self:end!important;
  min-height:auto!important;
  width:auto!important;
  margin:-2px 0 2px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:rgba(245,245,247,.66)!important;
  box-shadow:none!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  cursor:pointer!important;
}
#login-submit.button--solid{
  min-height:46px!important;
  margin-top:4px!important;
  border:0!important;
  background:linear-gradient(100deg,var(--fl-brand-orange),var(--fl-brand-ember) 42%,var(--fl-brand-violet))!important;
  color:#fff!important;
  box-shadow:0 16px 38px rgba(255,66,26,.22),0 12px 34px rgba(122,56,255,.16)!important;
  text-shadow:none!important;
}
.login-divider{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:2px 0!important;
  color:rgba(245,245,247,.52)!important;
  font-size:12px!important;
  line-height:1!important;
}
.login-divider::before,
.login-divider::after{
  content:""!important;
  height:1px!important;
  flex:1 1 auto!important;
  background:rgba(255,255,255,.10)!important;
}
.login-divider span{flex:none!important}
.login-request-access{
  min-height:44px!important;
  margin-top:0!important;
  background:rgba(255,255,255,.035)!important;
}

/* Resource routes get one title, not a duplicate title above a duplicate title. */
body[data-crm-route]:not([data-crm-route="overview"]) .operator-title-row{display:none!important}
body[data-crm-route]:not([data-crm-route="overview"]) .operator-tabs{margin-top:18px!important}
body[data-crm-route]:not([data-crm-route="overview"]) #resource-view{margin-top:30px!important}

.fl-glass-dialog,
.fl-dialog-shell,
.fl-dialog-shell form,
.fl-dialog-actions{
  color-scheme:dark!important;
}

.fl-dialog-actions button,
.fl-dialog-actions .is-primary,
.button--solid:not(.danger-button),
.operator-submit{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:#f5f5f7!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

.fl-dialog-actions .is-primary:hover,
.fl-dialog-actions .is-primary:focus-visible,
.button--solid:not(.danger-button):hover,
.button--solid:not(.danger-button):focus-visible,
.operator-submit:hover,
.operator-submit:focus-visible{
  background:linear-gradient(105deg,rgba(255,66,26,.16),rgba(122,56,255,.18))!important;
  border-color:rgba(255,106,34,.42)!important;
  color:#fff!important;
  outline:0!important;
}

.fl-dialog-shell input,
.fl-dialog-shell select,
.fl-dialog-shell textarea{
  background:#0a0a0c!important;
  color:#fff!important;
}

/* Brand accent belongs to navigation/selection; blue remains reserved for positive/live trading state. */
.operator-tabs button.is-active{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(122,56,255,.035))!important;
  box-shadow:inset 0 -2px var(--fl-brand-orange)!important;
}
.fl-menu-item.is-current{
  background:linear-gradient(90deg,rgba(255,66,26,.075),rgba(122,56,255,.045))!important;
  box-shadow:inset 2px 0 var(--fl-brand-orange)!important;
  color:#fff!important;
}
.fl-menu-item.is-current .lucide{color:var(--fl-brand-ember)!important}

/* Vercel-reference desktop density: floating surfaces stay compact and intentional. */
@media(min-width:701px){
  .login-panel{
    width:min(364px,calc(100vw - 48px))!important;
    padding:24px!important;
    border-radius:16px!important;
  }
  .login-panel-head{margin-bottom:18px!important}
  .login-panel-head h1{font-size:32px!important;line-height:1.06!important}
  .operator-menu{
    width:min(324px,calc(100vw - 28px))!important;
    padding:7px!important;
    border-radius:14px!important;
    box-shadow:0 1px 0 rgba(255,255,255,.035),0 22px 72px rgba(0,0,0,.56)!important;
  }
  .fl-profile-card{grid-template-columns:36px minmax(0,1fr) 22px;gap:9px;padding:9px!important}
  .fl-profile-icon{width:36px;height:36px;border-radius:10px}
  .fl-menu-item{min-height:38px;padding-inline:9px!important}
  .fl-nav-group>summary{min-height:37px;padding-inline:9px!important}
}

/* Human-facing CRM state: bullish/live is blue, bearish/error is red. */
.rail-state.is-live,.is-live,.fl-dialog-status.is-ok,.quality-gate[data-health="complete"] strong,.is-positive{color:var(--fl-live)!important}
.state[data-tone="danger"],.is-error,.is-negative{color:var(--fl-danger)!important}
.quality-gate[data-health="complete"] .quality-bar i{background:var(--fl-live)!important}
.quality-gate[data-health="missing"] .quality-bar i{background:var(--fl-warn)!important}
.quality-gate[data-health="neutral"] strong{color:#686970!important}
.quality-gate[data-health="neutral"] .quality-bar i{background:#3f4045!important}
#trop-summary-bias.is-bullish{color:var(--fl-bull)!important}
#trop-summary-bias.is-bearish{color:var(--fl-danger)!important}

/* Diagnostics are optional operator detail, not a developer briefing. */
.dependency-proof,.system-functions,.control-room-stamp,#research-integrity{display:none!important}
#fl-diagnostics .intelligence-grid{grid-template-columns:1fr!important;gap:22px!important}
#fl-diagnostics .intelligence-panel{padding-bottom:18px!important;border-bottom:1px solid var(--fl-line)!important}
#fl-diagnostics .intelligence-panel:last-child{border-bottom:0!important}
#fl-diagnostics .forecast-band strong{overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;font-size:clamp(18px,2.4vw,28px)!important}

/* Dense forecast values must remain legible rather than ellipsizing into 4,4…. */
@media(min-width:861px) and (max-aspect-ratio:3/2){
  .operator-login{
    background-image:
      radial-gradient(circle at 30% 48%,rgba(122,56,255,.055),transparent 38%),
      url('fl_trades_laptop_3x2_no_wordmark.webp')!important;
  }
}

@media(max-width:1180px) and (max-aspect-ratio:4/3){
  .operator-login{
    background-image:
      radial-gradient(circle at 30% 48%,rgba(122,56,255,.055),transparent 38%),
      url('fl_trades_tablet_4x3_no_wordmark.webp')!important;
  }
}

@media(max-width:860px){
  .operator-login{
    background-image:
      radial-gradient(circle at 30% 48%,rgba(122,56,255,.055),transparent 38%),
      url('fl_trades_tablet_4x3_no_wordmark.webp')!important;
  }
  .trop-market-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .trop-market-summary>div{border-bottom:1px solid rgba(255,255,255,.055)!important}
  .trop-market-summary strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:clamp(15px,4vw,21px)!important}
  .forecast-band{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .forecast-band>div{border-bottom:1px solid rgba(255,255,255,.055)!important}
  #fl-diagnostics .forecast-band strong{white-space:normal!important;overflow:visible!important}
}

@media(max-width:700px){
  .operator-login{
    background-image:
      radial-gradient(circle at 30% 48%,rgba(122,56,255,.055),transparent 38%),
      url('fl_trades_mobile_9x16_no_wordmark.webp')!important;
  }
  .operator-login::before{
    background:
      linear-gradient(180deg,rgba(2,2,3,.16),rgba(2,2,3,.38)),
      linear-gradient(90deg,rgba(2,2,3,.24),rgba(2,2,3,.10) 48%,rgba(2,2,3,.28))!important;
  }
  .login-panel{background:
    linear-gradient(var(--fl-surface-deep),var(--fl-surface-deep)) padding-box,
    linear-gradient(118deg,rgba(255,106,34,.58),rgba(211,44,255,.42) 62%,rgba(122,56,255,.48)) border-box!important}
  .login-input-shell .operator-input{
    min-height:44px!important;
    height:44px!important;
    font-size:16px!important;
  }
}

/* ======================================================================
   GRAND MASTER CRM HARDENING — where applicable and adequate
   Control scale, rail distribution, toolbar, dropdown, drawer, motion,
   telemetry density. Deterministic, !important, respects existing authority.
   ====================================================================== */

/* 16. Control scale — mature desktop, not miniature */
:root{ --control-h-sm:36px!important; --control-h-md:42px!important; --control-h-lg:46px!important; }

/* 15. CRM header Refresh utility — no box, muted, RefreshCw (icon injected via JS, no data URI) — exactly one icon, is-refreshing state */
#refresh-data{
  display:inline-flex!important; align-items:center!important; gap:7px!important;
  min-height:40px!important; padding:0 4px!important; background:transparent!important;
  border:0!important; border-radius:0!important; color:#8a8b91!important;
  font-size:13px!important; font-weight:600!important; letter-spacing:.02em!important;
  box-shadow:none!important;
}
#refresh-data .lucide, #refresh-data .refresh-icon{ width:18px!important; height:18px!important; flex:none!important; opacity:.9!important; }
#refresh-data:hover{ color:#f5f5f7!important; }
#refresh-data.is-loading .lucide, #refresh-data.is-loading .refresh-icon{ animation: refresh-spin 420ms linear infinite!important; }
.refresh-icon{ width:18px!important; height:18px!important; }
.refresh-icon.is-refreshing{ animation: refresh-spin 500ms linear infinite!important; }
@keyframes refresh-spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* 17+18. Primary rail — 8 destinations use width intentionally */
@media(min-width:1024px){
  .operator-tabs{
    display:grid!important; grid-template-columns:repeat(8,minmax(0,1fr))!important;
    width:100%!important; min-height:54px!important; padding:4px 6px!important;
    gap:2px!important; border-radius:12px!important;
  }
  .operator-tabs button{
    min-height:44px!important; justify-content:center!important; padding:0 10px!important;
    font-size:14px!important; white-space:nowrap!important;
  }
}
@media(max-width:1023px) and (min-width:701px){
  .operator-tabs{ gap:2px!important; }
  .operator-tabs button{ font-size:13px!important; padding:0 10px!important; }
}
@media(max-width:700px){
  .operator-tabs{
    display:flex!important; overflow-x:auto!important; scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .operator-tabs::-webkit-scrollbar{ display:none!important; }
}

/* 19. Tasks toolbar — Search / Status / NEW as coherent toolbar */
.resource-actions{
  display:flex!important; align-items:center!important; gap:10px!important; flex-wrap:wrap!important;
}
.search-box{ width:clamp(340px,28vw,420px)!important; min-width:280px!important; }
.search-box input{ height:44px!important; min-height:44px!important; padding:0 14px!important; font-size:14px!important; }
#resource-filter{ width:164px!important; min-width:150px!important; height:44px!important; min-height:44px!important; padding:0 14px!important; font-size:14px!important; }
#resource-new{ min-width:96px!important; height:44px!important; padding:0 18px!important; font-size:13px!important; font-weight:700!important; }

/* 20. All status dropdown — dark, not native white (arrow handled by custom JS dropdown, no data URI) */
#resource-filter{
  appearance:none!important; -webkit-appearance:none!important;
  background: #09090a!important; color:#f5f5f7!important;
  border:1px solid rgba(255,255,255,.14)!important; border-radius:10px!important;
  padding-right:32px!important;
}
#resource-filter:focus{ border-color:rgba(170,150,255,.52)!important; box-shadow:0 0 0 3px rgba(170,150,255,.08)!important; outline:0!important; }
#resource-filter option{ background:#0a0a0c!important; color:#f5f5f7!important; }

/* 21+22+23. Drawer — narrow, motion restrained — fixed 372px desktop per forensic */
@media(min-width:768px){
  .operator-menu{
    width:372px!important; min-width:372px!important; max-width:372px!important;
    position:fixed!important; right:16px!important;
    max-height:calc(100dvh - 66px - 24px)!important; overflow-y:auto!important; overflow-x:hidden!important;
    transition:transform 190ms cubic-bezier(.22,1,.36,1),opacity 170ms ease!important;
  }
}
.operator-menu[hidden]{ transform:translateX(12px)!important; opacity:0!important; display:block!important; visibility:hidden!important; pointer-events:none!important; }
.operator-menu:not([hidden]){ transform:translateX(0)!important; opacity:1!important; }
#drawer-backdrop{ transition: opacity 160ms ease!important; }
.fl-nav-group>div{ transition: grid-template-rows 175ms ease, opacity 170ms ease!important; }
.fl-nav-group:not([open])>div{ opacity:.0!important; }
.fl-nav-group[open]>div{ opacity:1!important; }

/* 24+25+26. Route/tab motion — fast, not jolty — 240-300ms handoff */
.operator-view{ animation: crm-section-enter 260ms cubic-bezier(.22,1,.36,1)!important; }
@keyframes crm-section-enter{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:translateY(0)} }
@keyframes crm-section-exit{ from{opacity:1; transform:translateY(0)} to{opacity:.35; transform:translateY(-2px)} }
.operator-view.is-exiting{ animation: crm-section-exit 90ms ease forwards!important; }
.operator-view.is-entering{ animation: crm-section-enter 190ms cubic-bezier(.22,1,.36,1) forwards!important; }
.operator-tabs button{ transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease!important; }
.locale-panel{ transition: opacity 190ms cubic-bezier(.22,1,.36,1), transform 190ms cubic-bezier(.22,1,.36,1)!important; transform-origin: bottom left!important; }
.locale-panel[hidden]{ display:block!important; visibility:hidden!important; pointer-events:none!important; opacity:0!important; transform:translateY(8px) scale(.99)!important; }
.locale-panel:not([hidden]){ opacity:1!important; transform:translateY(0) scale(1)!important; }
@media(prefers-reduced-motion:reduce){
  .operator-view{ animation:none!important; }
  .operator-menu{ transition:none!important; }
  #drawer-backdrop{ transition:none!important; }
  #refresh-data::before{ animation:none!important; }
}

/* 27. Hover/press feedback — restrained */
.button,.operator-submit,.fl-menu-item,.operator-tabs button{
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 90ms ease!important;
}
.button:active,.operator-submit:active{ transform:scale(.985)!important; }