/* FlagIQ — shared design system */
:root{ color-scheme: dark; }
html,body{ background:#070a12; color:#e7ecf5; }
*{ -webkit-font-smoothing:antialiased; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#1c2740; border-radius:9px; }
::-webkit-scrollbar-track{ background:transparent; }

/* surfaces */
.glass{ background:linear-gradient(180deg,rgba(17,24,43,.85),rgba(13,18,32,.92)); backdrop-filter:blur(8px); }
.grad-text{ background:linear-gradient(90deg,#5b8cff,#22d3ee 60%,#34e3b0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.chip{ border:1px solid var(--c,#1c2740); }
.card{ border-radius:1rem; border:1px solid rgba(28,39,64,.7); background:linear-gradient(180deg,rgba(17,24,43,.85),rgba(13,18,32,.92)); }

/* motion */
.row-enter{ animation:rowin .5s cubic-bezier(.2,.8,.2,1); }
@keyframes rowin{ from{opacity:0; transform:translateY(-8px); background:rgba(91,140,255,.12);} to{opacity:1; transform:none;} }
.pulse-dot{ box-shadow:0 0 0 0 rgba(52,227,176,.7); animation:pulse 1.8s infinite; }
@keyframes pulse{ 70%{box-shadow:0 0 0 9px rgba(52,227,176,0);} 100%{box-shadow:0 0 0 0 rgba(52,227,176,0);} }
.scan{ position:relative; overflow:hidden; }
.scan::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(91,140,255,.10),transparent); transform:translateX(-100%); animation:scan 3.2s linear infinite; }
@keyframes scan{ to{transform:translateX(100%);} }
.fade-in{ animation:fade .4s ease both; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* sparkline / bars */
.spark{ display:flex; align-items:flex-end; gap:2px; height:34px; }
.spark > i{ flex:1; background:linear-gradient(180deg,#5b8cff,#22d3ee); border-radius:2px; transition:height .4s; }
.ring{ transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }

/* app shell */
body.app{ padding-left:0; }
@media(min-width:1024px){ body.app{ padding-left:248px; } }
.sidebar{ position:fixed; left:0; top:0; bottom:0; width:248px; z-index:40; }
.topbar{ position:sticky; top:0; z-index:30; }
.nav-link{ position:relative; display:flex; align-items:center; gap:.7rem; padding:.55rem .8rem; border-radius:.7rem; font-size:13.5px; font-weight:500; color:#9aa6bd; transition:.16s cubic-bezier(.2,.8,.2,1); }
.nav-link:hover{ background:rgba(28,39,64,.55); color:#e7ecf5; transform:translateX(2px); }
.nav-link.active{ background:linear-gradient(90deg,rgba(91,140,255,.22),rgba(34,211,238,.05)); color:#fff; }
.nav-link.active::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#5b8cff,#22d3ee); box-shadow:0 0 10px rgba(91,140,255,.6); }
.nav-link.active svg{ color:#7aa2ff; opacity:1; }
.nav-link svg{ width:18px; height:18px; flex:none; opacity:.85; }
.nav-group{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:#55617a; padding:.35rem .85rem .25rem; margin-top:.5rem; }
.nav-group:first-child{ margin-top:0; }

/* forms */
.inp{ width:100%; background:#0c1322; border:1px solid #1c2740; border-radius:.6rem; padding:.6rem .8rem; font-size:14px; color:#e7ecf5; outline:none; transition:.15s; }
.inp:focus{ border-color:#5b8cff; box-shadow:0 0 0 3px rgba(91,140,255,.15); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.6rem; padding:.6rem 1rem; font-size:14px; font-weight:700; cursor:pointer; transition:.15s cubic-bezier(.2,.8,.2,1); border:1px solid transparent; letter-spacing:.01em; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:linear-gradient(90deg,#5b8cff,#22d3ee); color:#05101f; box-shadow:0 6px 18px -6px rgba(91,140,255,.6); }
.btn-primary:hover{ filter:brightness(1.08); box-shadow:0 8px 22px -6px rgba(91,140,255,.75); }
.btn-ghost{ background:#141c30; border-color:#26324f; color:#dde5f3; }
.btn-ghost:hover{ background:#1c2842; border-color:#3a4a6e; }
/* solid accent buttons that stand out */
.btn-danger{ background:#fb6f84; color:#2a0a10; box-shadow:0 6px 18px -8px rgba(251,111,132,.7); }
.btn-danger:hover{ filter:brightness(1.06); }
.btn-warn{ background:#f5b14c; color:#2a1c05; box-shadow:0 6px 18px -8px rgba(245,177,76,.6); }
.btn-warn:hover{ filter:brightness(1.06); }
.btn-violet{ background:#a98bff; color:#16092e; box-shadow:0 6px 18px -8px rgba(169,139,255,.6); }
.btn-violet:hover{ filter:brightness(1.06); }
.btn-success{ background:#34e3b0; color:#053024; box-shadow:0 6px 18px -8px rgba(52,227,176,.55); }
.btn-success:hover{ filter:brightness(1.06); }

/* segmented tab control */
.seg{ display:flex; gap:.25rem; padding:.25rem; border-radius:.75rem; background:rgba(17,24,43,.7); border:1px solid #1c2740; }
.seg-tab{ flex:1; padding:.45rem .6rem; border-radius:.55rem; font-size:13px; font-weight:600; color:#9aa6bd; transition:.15s; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.seg-tab:hover{ color:#e7ecf5; }
.seg-tab.on{ background:linear-gradient(90deg,rgba(91,140,255,.9),rgba(34,211,238,.85)); color:#05101f; box-shadow:0 4px 12px -4px rgba(91,140,255,.5); }
.seg-badge{ display:inline-block; min-width:18px; text-align:center; font-size:10px; font-weight:700; line-height:16px; padding:0 5px; border-radius:999px; background:rgba(91,140,255,.22); color:#cdd6e6; }
.seg-tab.on .seg-badge{ background:rgba(0,0,0,.18); color:#05101f; }

/* ensure hidden always wins */
.hidden{ display:none !important; }

/* table */
.thead{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#64748b; }
details[open] .chev{ transform:rotate(90deg); }
.chev{ transition:transform .2s; }

/* toggle switch */
.switch{ width:38px; height:22px; border-radius:999px; background:#27324d; position:relative; transition:.2s; cursor:pointer; flex:none; }
.switch::after{ content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#cbd5e1; transition:.2s; }
.switch.on{ background:linear-gradient(90deg,#5b8cff,#22d3ee); }
.switch.on::after{ left:19px; background:#fff; }