/* UAOE "AI dark" theme: the whole site becomes a dark, technical product surface (like modern AI/dev tools), with glass cards, a living aurora, a fine grid,
   and glowing accents. Pure CSS (about 9 KB). Activate with class "ai-dark" on <html>. Pair with ai-vibe.css/js (moving network) and ai-pipeline.js (live decision pipeline). */
html.ai-dark{color-scheme:dark;--ink:#eaf5f3;--muted:#9bb2af;--line:rgba(255,255,255,.10);--pale:#0b171c;--shadow:0 26px 60px rgba(0,0,0,.5);background:#050c10}
html.ai-dark body{background:transparent;color:#b7cdc9}
html.ai-dark body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:radial-gradient(40% 35% at 82% 6%,rgba(255,159,67,.22),transparent 70%),radial-gradient(38% 32% at 6% 38%,rgba(255,194,103,.14),transparent 70%),radial-gradient(42% 36% at 72% 96%,rgba(255,209,102,.08),transparent 70%);
  animation:ai-aurora 38s ease-in-out infinite alternate}
html.ai-dark body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 25%,#000,transparent 88%);mask-image:radial-gradient(80% 70% at 50% 25%,#000,transparent 88%)}
@keyframes ai-aurora{to{transform:translate3d(3%,-2%,0) scale(1.08)}}

/* header / footer */
html.ai-dark header,html.ai-dark .header{background:rgba(6,14,18,.78);border-bottom:1px solid rgba(255,255,255,.08);color:#d9ebe8}
html.ai-dark header a,html.ai-dark .header a{color:#cfe3df}
html.ai-dark header a:hover{color:#ffd166}
html.ai-dark .brand,html.ai-dark .brand *{color:#eaf5f3}
html.ai-dark footer,html.ai-dark .footer{background:#04090c;border-top:1px solid rgba(255,255,255,.08)}
html.ai-dark .language-switcher select{background:rgba(255,255,255,.06);color:#eaf5f3;border-color:rgba(255,255,255,.16)}
html.ai-dark header nav{background:transparent}

/* text on dark */
html.ai-dark h1,html.ai-dark h2,html.ai-dark h3,html.ai-dark h4,html.ai-dark strong,html.ai-dark b,html.ai-dark th,html.ai-dark label,html.ai-dark legend,html.ai-dark dt{color:#eaf5f3}
html.ai-dark p,html.ai-dark li,html.ai-dark td,html.ai-dark small,html.ai-dark .tiny,html.ai-dark .muted{color:#9fb6b2}
html.ai-dark a:not(.btn):not(.skip){color:#ffc267}
html.ai-dark .eyebrow{color:#ffc267}
html.ai-dark h2{background:linear-gradient(180deg,#fff,#b9d6d2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* sections become transparent so the aurora + grid show through (no more empty white) */
html.ai-dark .section,html.ai-dark .section.alt,html.ai-dark .page-hero{background:transparent;color:#b7cdc9}
html.ai-dark .section.alt{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));border-block:1px solid rgba(255,255,255,.05)}
html.ai-dark .proof-strip{background:linear-gradient(90deg,rgba(255,159,67,.07),rgba(255,209,102,.05));border-block:1px solid rgba(255,255,255,.07);color:#cfe3df}
html.ai-dark .proof-strip *{color:#cfe3df}
html.ai-dark .section:not(.dark-section)::before{background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px) 0 0/28px 28px}
html.ai-dark .dark-section{background:linear-gradient(180deg,#0b1a20,#07131a)}

/* glass cards and panels */
html.ai-dark :is(.tile,.price-card,.panel,.workspace-card,.case-card,.case-task-case,.case-task-item,.connector-contract,.flow-step,.package-card,.choice,.notice,.package-addon,.dashboard-metrics>*,.metric,.audit-item,.trace-box,.analytics-col,.account-intro,.package-preview){
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.11);color:#a9bfbb;
  box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
html.ai-dark :is(.tile,.price-card,.panel,.workspace-card,.case-card,.flow-step,.package-card,.choice) :is(h2,h3,h4,strong,b){background:none;-webkit-text-fill-color:currentColor;color:#eaf5f3}
html.ai-dark :is(.tile,.price-card,.panel,.workspace-card,.case-card,.flow-step,.package-card,.choice) :is(p,li,span,small){color:#9fb6b2}
html.ai-dark a.tile:hover,html.ai-dark .price-card:hover,html.ai-dark .tile:hover{border-color:rgba(255,159,67,.55);box-shadow:0 0 0 1px rgba(255,159,67,.35),0 24px 60px rgba(255,159,67,.16)}
html.ai-dark .featured{background:linear-gradient(180deg,rgba(255,159,67,.16),rgba(255,159,67,.05));border-color:rgba(255,159,67,.5)}
html.ai-dark .notice{background:rgba(255,159,67,.07);border-color:rgba(255,159,67,.25);color:#ffe0b2}
html.ai-dark .notice.warn{background:rgba(238,183,120,.09);border-color:rgba(238,183,120,.35);color:#f2d3a6}

/* hero console (the existing hero card) */
html.ai-dark .signal-card{background:linear-gradient(180deg,rgba(14,34,40,.94),rgba(7,19,24,.94));border:1px solid rgba(255,159,67,.28);color:#a9bfbb;
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,159,67,.15),0 0 80px rgba(255,159,67,.12)}
html.ai-dark .signal-head{border-bottom:1px solid rgba(255,255,255,.08);color:#d9ebe8}
html.ai-dark .signal-card :is(.signal-heading,strong,b,h3,h4){color:#eaf5f3}
html.ai-dark .signal-card :is(p,span,small){color:#9fb6b2}
html.ai-dark .signal-card .barline,html.ai-dark .signal-card .line-pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:#cfe3df}
html.ai-dark .signal-card .dots i,html.ai-dark .signal-card .dots span{background:rgba(255,255,255,.18)}

/* tags / chips */
html.ai-dark .tag{background:rgba(255,159,67,.12);color:#ffc267;border:1px solid rgba(255,159,67,.28)}
html.ai-dark .tag.amber{background:rgba(238,183,120,.12);color:#f2c98f;border-color:rgba(238,183,120,.32)}
html.ai-dark .tag.red{background:rgba(255,120,120,.12);color:#ff9d9d;border-color:rgba(255,120,120,.32)}
html.ai-dark .tag.green{background:rgba(145,238,160,.12);color:#9df0ae;border-color:rgba(145,238,160,.3)}
html.ai-dark .tag.neutral{background:rgba(255,255,255,.07);color:#cfe3df;border-color:rgba(255,255,255,.14)}

/* buttons */
html.ai-dark .btn{background:rgba(255,255,255,.07);color:#eaf5f3;border-color:rgba(255,255,255,.18)}
html.ai-dark .btn:hover{background:rgba(255,255,255,.12);filter:none}
html.ai-dark .btn.primary{background:linear-gradient(135deg,#ffe08a,#ffd166 55%,#ff9f43);color:#201207;border-color:transparent}
html.ai-dark .btn.outline,html.ai-dark .btn.ghost,html.ai-dark .btn.secondary,html.ai-dark .btn.dark{background:rgba(255,255,255,.06);color:#eaf5f3;border-color:rgba(255,255,255,.2)}

/* forms and tables */
html.ai-dark :is(input,select,textarea,.input,.select){background:rgba(255,255,255,.055);color:#eaf5f3;border:1px solid rgba(255,255,255,.16)}
html.ai-dark :is(input,textarea)::placeholder{color:#7f9a97}
html.ai-dark option{background:#0b171c;color:#eaf5f3}
html.ai-dark :is(input,select,textarea):focus{border-color:#ff9f43;box-shadow:0 0 0 3px rgba(255,159,67,.22);outline:none}
html.ai-dark table{border-color:rgba(255,255,255,.1)}
html.ai-dark th{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
html.ai-dark td{border-color:rgba(255,255,255,.08)}
html.ai-dark tr:hover td{background:rgba(255,159,67,.05)}
html.ai-dark hr{border-color:rgba(255,255,255,.1)}
html.ai-dark code,html.ai-dark pre{background:rgba(255,255,255,.06);color:#ffd166;border:1px solid rgba(255,255,255,.1)}
html.ai-dark details{border-color:rgba(255,255,255,.12)}
html.ai-dark summary{color:#eaf5f3}

/* calm mode keeps the page still but dark */
html.ai-dark.ai-calm body::before{animation:none}
@media (prefers-reduced-motion:reduce){html.ai-dark:not(.ai-motion-on) body::before{animation:none}}

/* header call-to-action must stay readable on dark */
html.ai-dark .header-cta,html.ai-dark header .btn{background:rgba(255,159,67,.14)!important;color:#ffd166!important;border:1px solid rgba(255,159,67,.5)!important}
html.ai-dark header .btn:hover{background:rgba(255,159,67,.24)!important}


/* second pass: surfaces found by an automatic light-background scan */
html.ai-dark .package-capabilities li{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);color:#a9bfbb}
html.ai-dark .package-capabilities li :is(strong,b){color:#eaf5f3}
html.ai-dark .package-capabilities li :is(span,small,p){color:#9fb6b2}
html.ai-dark .package-surface-summary{background:rgba(38,142,124,.12);border-color:rgba(101,221,209,.22);color:#a9bfbb}
html.ai-dark .package-surface-head strong,html.ai-dark .package-surface-row>strong{color:#eaf5f3}
html.ai-dark .package-surface-row{border-color:rgba(255,255,255,.1);color:#9fb6b2}
html.ai-dark .kind-btn{background:rgba(255,255,255,.05);color:#cfe3df;border:1px solid rgba(255,255,255,.14)}
html.ai-dark .kind-btn:hover{border-color:rgba(255,159,67,.5)}
html.ai-dark .kind-btn.active{background:linear-gradient(180deg,rgba(255,159,67,.2),rgba(255,159,67,.07));color:#eaf5f3;border-color:#ff9f43;box-shadow:0 0 0 1px rgba(255,159,67,.3),0 12px 34px rgba(255,159,67,.14)}
html.ai-dark .kind-btn :is(strong,b,span,small){color:inherit}
html.ai-dark .empty-state{background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.18);color:#9fb6b2}
html.ai-dark .empty-state :is(h3,h4,strong){color:#eaf5f3}
html.ai-dark .signal-head,html.ai-dark .signal-head *{background:transparent;color:#eaf5f3}
html.ai-dark .signal-label,html.ai-dark .tiny-metric{color:#8fa8a5}
html.ai-dark .signal-card .signal-head :is(span,i,em){color:#9fb6b2}
html.ai-dark .price-card::before{content:"";position:absolute;left:20px;right:20px;bottom:18px;height:7px;border-radius:99px;background:rgba(255,255,255,.1)}

/* Contrast-safe dark surfaces. Keep the aurora visible above a real dark canvas,
   while giving automated and assistive contrast checks an opaque base color. */
html.ai-dark body{background-color:#050c10}
html.ai-dark body::before,html.ai-dark body::after{z-index:0}
html.ai-dark body>:not(.ai-motion-host){position:relative;z-index:1}
html.ai-dark .header{z-index:50!important}
html.ai-dark .skip{background:#fff;color:#10262c}
html.ai-dark.ai-vibe .hero h1 em{color:#ffd166!important}
html.ai-dark .btn.primary{background-color:#ffd166}
html.ai-dark .signal-head,html.ai-dark .signal-left{background-color:#0c2027!important}
html.ai-dark .signal-head span{color:#cfe3df!important}
html.ai-dark .account-state,html.ai-dark .account-flow{color:#b7e9e1}
/* The verify/recovery-complete steps inject a bare <form> (no .panel class), so it still carried the
   light-theme's white background (style.css .account-flow form) with light text on top of it. */
html.ai-dark .account-flow form{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
html.ai-dark .onboard-counter,html.ai-dark .onboard-counter span,html.ai-dark .onboard-step>.tiny{color:#b7cdc9!important}
html.ai-dark .trace-point:before{background:#ff9f43;border-color:#4b2b0c;box-shadow:0 0 0 4px rgba(255,209,102,.16)}
html.ai-dark .progress>span,html.ai-dark .analytics-bar{background:#ff9f43}
html.ai-dark .audit-item:before{background:#ff9f43;box-shadow:0 0 0 4px rgba(255,209,102,.16)}
html.ai-dark :is(.glyph,.flow-arrow,.tile .count,.tile-link,.proof-mark){color:#ffc267}
html.ai-dark .proof-mark{border-color:rgba(255,159,67,.35)}
html.ai-dark .choice.active{border-color:#ff9f43;background:rgba(255,159,67,.10)}