:root{
  --fo-bg:#05090f;
  --fo-panel:#09111c;
  --fo-panel-2:#0d1724;
  --fo-line:#263346;
  --fo-red:#dc2626;
  --fo-red-dark:#7f1d1d;
  --fo-gold:#f59e0b;
  --fo-gold-soft:#fbbf24;
  --fo-text:#f8fafc;
  --fo-muted:#9fb0c4;
  --fo-green:#22c55e;
}
*{box-sizing:border-box}
html{background:#02050a}
body{
  margin:0;
  color:var(--fo-text);
  background:
    radial-gradient(circle at 15% -10%,rgba(220,38,38,.15),transparent 28%),
    radial-gradient(circle at 80% 0%,rgba(245,158,11,.08),transparent 25%),
    linear-gradient(180deg,#02060b 0%,#07101b 45%,#03070d 100%)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.app-shell{min-height:100vh;background:transparent!important}
.topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px clamp(18px,3vw,38px)!important;
  background:linear-gradient(180deg,rgba(3,7,12,.98),rgba(4,10,17,.96))!important;
  border-bottom:1px solid rgba(245,158,11,.28)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.35);
}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-badge{
  width:58px!important;height:58px!important;min-width:58px;
  display:grid;place-items:center;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fbbf24,#d97706)!important;
  color:#080b10!important;
  font-weight:950!important;font-size:21px!important;
  border:1px solid #fcd34d;
  box-shadow:0 0 24px rgba(245,158,11,.22);
}
.brand h2{
  margin:0!important;
  font-size:clamp(28px,3vw,42px)!important;
  font-weight:950!important;
  letter-spacing:-.035em;
  text-transform:uppercase;
  line-height:1;
}
.brand h2 .fo-ops-red{color:#ef4444;text-shadow:0 0 18px rgba(239,68,68,.3)}
.brand .small{
  margin-top:7px;
  color:var(--fo-gold-soft)!important;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px!important;
  font-weight:800;
}
.userbox{text-align:right;color:var(--fo-muted)!important;line-height:1.35}
.userbox strong{color:#fff;font-size:16px}
.userbox button,.topbar button{margin-top:9px!important}
.main{padding:24px clamp(18px,3vw,34px) 120px!important;max-width:1500px;margin:0 auto}
.main>h1{
  margin:0 0 6px!important;
  font-size:clamp(31px,4vw,46px)!important;
  letter-spacing:-.035em;
  font-weight:900!important;
}
.subtitle{color:#b3c0cf!important;margin-top:0!important}
.nav{
  display:flex!important;
  flex-wrap:wrap;
  gap:8px!important;
  padding:11px!important;
  margin:20px 0 16px!important;
  border:1px solid var(--fo-line);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(10,18,29,.98),rgba(5,11,18,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.nav button{
  min-height:48px;
  padding:11px 18px!important;
  border:1px solid #2c394a!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#0d1723,#08111b)!important;
  color:#f1f5f9!important;
  font-weight:780!important;
  box-shadow:none!important;
  transition:.18s ease!important;
}
.nav button:hover{transform:translateY(-1px);border-color:#64748b!important;background:#111c2a!important}
.nav button.active{
  color:#111827!important;
  background:linear-gradient(180deg,#fbbf24,#e99a08)!important;
  border-color:#fcd34d!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.2),0 8px 22px rgba(245,158,11,.15)!important;
}
.secondary-nav{margin-top:-8px!important;border-color:rgba(239,68,68,.22)}
button,.button{
  font-family:inherit;
}
button:not(.nav button):not(#foBottomNav button):not(#foHeaderAllHandsButton){
  border-radius:10px;
}
#content{animation:foThemeFade .2s ease}
@keyframes foThemeFade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
.card,.stat-card,.fo-record-card,.fo-document-card,.fo-editor-card,.notice,.module-card,
#content>div>div{
  border-color:#2a3749!important;
}
.dashboard-grid,.stats-grid,.grid{
  gap:14px!important;
}
.stat-card,.dashboard-card,.card,.fo-record-card,.fo-document-card,.fo-editor-card{
  background:linear-gradient(145deg,rgba(12,22,35,.98),rgba(6,13,22,.99))!important;
  border:1px solid #273448!important;
  box-shadow:0 12px 32px rgba(0,0,0,.26)!important;
  border-radius:16px!important;
}
.stat-card:hover,.dashboard-card:hover,.fo-record-card:hover{border-color:rgba(245,158,11,.5)!important}
.stat-card strong,.dashboard-card strong,.big-number,.metric-value{
  color:var(--fo-gold)!important;
  text-shadow:0 0 15px rgba(245,158,11,.12);
}
.fo-eyebrow{color:var(--fo-gold-soft)!important;letter-spacing:.12em!important;font-weight:900!important}
.fo-status{border-color:#415169!important;background:#111c2a!important;color:#d9e4f0!important}
input,select,textarea{
  background:#07101a!important;
  color:#f8fafc!important;
  border:1px solid #344359!important;
  border-radius:10px!important;
}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--fo-gold)!important;box-shadow:0 0 0 3px rgba(245,158,11,.13)!important}
button.primary,.primary{background:linear-gradient(180deg,#fbbf24,#d98b05)!important;color:#121826!important;border:1px solid #fcd34d!important;font-weight:850!important}
button.danger,.danger{background:linear-gradient(180deg,#dc2626,#991b1b)!important;color:white!important;border:1px solid #ef4444!important}
button.secondary,.secondary{background:linear-gradient(180deg,#111c2a,#09111b)!important;color:#f8fafc!important;border:1px solid #38485f!important}
#foHeaderAllHandsButton{
  min-height:58px!important;
  padding:10px 18px!important;
  border:1px solid #ef4444!important;
  border-radius:13px!important;
  background:linear-gradient(110deg,#420b0b,#160707 55%,#5b0d0d)!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.16),0 0 26px rgba(220,38,38,.25)!important;
  font-weight:900!important;
  text-transform:uppercase;
  letter-spacing:.035em;
}
#foHeaderAllHandsButton:hover{border-color:#f59e0b!important;transform:translateY(-1px)}
#foHeaderAllHandsButton.fo-all-hands-live{animation:foHeaderAlert 1.2s infinite;background:linear-gradient(110deg,#991b1b,#3f0808 55%,#b91c1c)!important}
@keyframes foHeaderAlert{50%{box-shadow:0 0 0 3px rgba(239,68,68,.13),0 0 35px rgba(239,68,68,.55)}}
#foBottomNav{
  border-color:rgba(245,158,11,.38)!important;
  background:rgba(3,8,14,.98)!important;
  box-shadow:0 0 0 1px rgba(220,38,38,.1),0 18px 45px rgba(0,0,0,.65)!important;
}
#foBottomNav button:hover,#foBottomNav button:focus{color:#fbbf24!important;background:rgba(245,158,11,.12)!important}
.fo-all-hands-active{border-color:#ef4444!important;background:radial-gradient(circle at 10% 0%,rgba(220,38,38,.22),transparent 38%),linear-gradient(145deg,#19090c,#07101a)!important}
.login-card{background:linear-gradient(145deg,#0c1623,#050b12)!important;border:1px solid #334155!important;box-shadow:0 25px 60px rgba(0,0,0,.55)!important}
@media(max-width:900px){
  .topbar{align-items:flex-start;flex-wrap:wrap}
  .brand{width:100%}
  #foHeaderAllHandsButton{order:3;width:100%}
  .userbox{margin-left:auto}
}
@media(max-width:620px){
  .topbar{padding:16px!important;gap:12px}
  .brand-badge{width:50px!important;height:50px!important;min-width:50px}
  .brand h2{font-size:27px!important}
  .brand .small{font-size:10px!important}
  .main{padding:18px 12px 112px!important}
  .nav{padding:8px!important;gap:6px!important}
  .nav button{min-height:44px;padding:9px 12px!important}
}