:root{
  --ink:#17202b;--muted:#697586;--line:#e7eaee;--surface:#fff;--canvas:#f8f9fb;--blue:#245dee;--green:#078a4d;
  --amber:#ae7622;--red:#bf384d;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--canvas);font-size:14px;line-height:1.5}
button,input,textarea,select{font:inherit}
button,a,input,select,textarea{outline-offset:4px}
button{border:1px solid var(--line);border-radius:6px;background:white;padding:10px 15px;color:var(--ink);cursor:pointer;font-weight:550}
button:hover{background:#f3f5f8;border-color:#ccd3dd}
a{color:inherit;text-decoration:none}
a.button,summary.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:6px;background:white;padding:10px 15px;font-weight:550;cursor:pointer}
a.button:hover,summary.button:hover{background:#f3f5f8;border-color:#ccd3dd}
.primary,button.primary,a.button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.primary:hover,button.primary:hover,a.button.primary:hover{background:#303b48;border-color:#303b48;color:#fff}
.full{width:100%}
.small{padding:6px 10px;font-size:11px}
.text-muted,.muted{color:var(--muted)}
.text-muted{font-size:12px}
.link{color:var(--blue)}
.link:hover{text-decoration:underline}
.mono{font-family:var(--mono);font-size:11.5px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
/* ---------- sidebar ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:224px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20;overflow-y:auto}
.brand{height:78px;display:flex;align-items:center;gap:12px;padding:22px;font-size:20px;font-weight:750;letter-spacing:-.6px}
.brand svg{width:31px;height:31px;color:var(--ink);flex:none}
.brand small{display:block;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0}
.nav-label{font-size:11px;letter-spacing:1px;color:var(--muted);margin:27px 24px 12px}
.sidebar nav{padding:0 12px;display:flex;flex-direction:column}
.nav-item{display:flex;align-items:center;gap:13px;border-radius:5px;padding:12px;margin-bottom:4px;color:#526075;font-size:14px}
.nav-item:hover{background:#f7f8fa}
.nav-item.active{background:#f0f2f5;color:var(--ink);font-weight:600;position:relative}
.nav-item.active:before{content:"";position:absolute;left:-12px;height:23px;width:3px;background:var(--ink)}
.nav-icon{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.sidebar-bottom{margin-top:auto;padding:18px 16px}
.credit-box{border:1px solid var(--line);padding:16px;border-radius:7px}
.credit-box>span{font-size:12px;color:var(--muted)}
.credit-box strong{display:block;font-size:25px;letter-spacing:-1px;margin:6px 0 13px}
.credit-box small{font-size:14px;letter-spacing:0}
.signature{display:flex;flex-direction:column;gap:4px;font-size:12px;margin:32px 8px 8px}
.signature span{color:var(--muted)}
/* ---------- topbar ---------- */
.topbar{height:78px;position:fixed;inset:0 0 auto 224px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:20px;background:#ffffffed;backdrop-filter:blur(12px);z-index:15}
.topbar nav{height:100%;display:flex;gap:26px}
.top-link{display:flex;align-items:center;border-bottom:2px solid transparent;padding:0 3px;font-size:14px;color:#536074}
.top-link:hover{color:var(--ink)}
.top-link.active{border-color:var(--ink);color:var(--ink);font-weight:600}
.search-wrap{position:relative;margin-left:auto;min-width:280px}
.search{border:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;color:var(--muted);background:#f9fafb;margin:0}
.search:focus-within{border-color:#c3cddb;background:#fff}
.search input{border:0;background:transparent;width:100%;font-size:12px;outline:0;color:var(--ink)}
.search kbd{font-size:11px;background:#eef0f3;border-radius:3px;padding:0 5px}
.bell-wrap,.profile-wrap{position:relative}
.bell{position:relative;border:0;background:transparent;padding:6px;color:#5b697e}
.bell:hover{background:#f3f5f8}
.bell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.bell-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:9px;background:#245dee;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:1.5px solid #fff}
.bell-count[hidden],.bell-menu[hidden],.profile-menu[hidden]{display:none}
.bell-menu{position:absolute;right:0;top:calc(100% + 8px);width:320px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 45px rgba(16,24,40,.16);z-index:45;overflow:hidden}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600}
.bell-head span{color:var(--muted);font-weight:400}
.bell-list{max-height:320px;overflow-y:auto}
.bell-item{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid #eef0f4}
.bell-item:last-child{border-bottom:0}
.bell-item:hover{background:#f8fafc}
.bell-item .dot-badge{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:#98a4b5}
.bell-item.paid .dot-badge{background:#078a4d}
.bell-item.refund .dot-badge{background:#c98a1a}
.bell-item.error .dot-badge{background:#bf384d}
.bell-item.info .dot-badge{background:#245dee}
.bell-item b{display:block;font-size:12.5px;font-weight:600}
.bell-item time{margin-left:auto;font-size:10.5px;color:var(--muted);white-space:nowrap}
.bell-foot{display:block;padding:11px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--blue);background:#fbfcfe}
.bell-empty{padding:22px 14px;text-align:center;color:var(--muted);font-size:12px}
.profile{border:0;display:flex;align-items:center;gap:10px;padding:4px 6px;background:transparent;font-size:13px;border-radius:8px}
.profile:hover{background:#f3f5f8}
.profile .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;color:var(--muted)}
.profile-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 45px rgba(16,24,40,.14);padding:6px;min-width:210px;z-index:40}
.profile-menu a{display:block;padding:9px 11px;border-radius:7px;font-size:12.5px}
.profile-menu a:hover{background:#f4f6f9}
.pm-head{padding:8px 11px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pm-head b{display:block;font-size:13px}
.pm-head span{color:var(--muted);font-size:11.5px}
.avatar{border-radius:50%;width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;color:white;background:#1b2430;font-size:12px;flex:none}
/* ---------- layout ---------- */
main{margin:78px 0 0 224px;padding:24px 28px 10px;max-width:1900px}
.page-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;margin-bottom:22px;gap:16px}
.page-head a:hover{color:var(--ink)}
.page-head .sep{margin:0 6px;color:#b6bfcc}
.demo-label{font-size:10px;letter-spacing:1.2px;border:1px solid var(--line);padding:2px 7px;border-radius:3px;white-space:nowrap}
.page{display:flex;flex-direction:column;gap:20px;max-width:1700px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
/* ---------- hero ---------- */
.hero{border:1px solid #e1e5ec;border-radius:10px;min-height:236px;padding:32px 34px;position:relative;overflow:hidden;background:#eef2f7 url("hero.jpg") right center / cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f8fafc 0%,#f8fafc 34%,rgba(248,250,252,.94) 48%,rgba(248,250,252,.45) 72%,rgba(248,250,252,0) 96%)}
.hero-text{position:relative;max-width:620px}
.hero-quote{position:absolute;top:34px;right:34px;margin:0;text-align:right;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.5;color:#4c5b70;max-width:230px}
.hero-quote .dash{display:block;width:36px;height:1px;background:#9aa7b8;margin:12px 0 0 auto}
.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:650;color:#55657c;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h1{font-size:36px;line-height:1.13;letter-spacing:-1.3px;margin:15px 0 14px;font-weight:700;max-width:520px}
h2{font-size:22px;letter-spacing:-.5px;margin:0 0 8px;font-weight:700}
h3{font-size:13px;letter-spacing:-.2px;margin:16px 0 6px}
.hero p{font-size:16px;color:#5b697e;max-width:540px;line-height:1.6;margin:0 0 22px}
.hero .gen{font-size:12px;color:#6b788c;margin:-12px 0 18px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.stat{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px 15px}
.stat-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.stat-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.stat-icon.gray{background:#f0f2f5;color:#657086}
.stat-icon.green{background:#e8f7ef;color:#078a4d}
.stat-icon.blue{background:#eaf1ff;color:#245dee}
.stat-icon.amber{background:#fff3df;color:#ae7622}
.stat-icon.red{background:#fcebed;color:#bf384d}
.stat span{font-size:12px;color:var(--muted)}
.stat strong{display:block;font-size:23px;letter-spacing:-.8px;margin:4px 0 2px}
.stat strong.good{color:var(--green)}
.stat strong.bad{color:var(--red)}
.stat small{font-size:11px;color:#8490a1}
/* ---------- panels ---------- */
.panel{border:1px solid var(--line);background:var(--surface);border-radius:7px;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;gap:14px;flex-wrap:wrap}
.panel-head h2{font-size:17px;letter-spacing:-.4px;margin:0}
.panel-note{margin:-14px 20px 12px;color:var(--muted);font-size:12px}
.panel-body{padding:0 20px 18px;font-size:13px}
.panel-body>.table-wrap{margin:0 -20px}
.panel-body>.table-wrap:last-child{margin-bottom:-18px}
.panel-body ul,.panel-body ol{margin:6px 0;padding-left:20px;line-height:1.7}
.panel-body p{line-height:1.65}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}
th{font-size:11px;color:#768296;background:#fafbfc;font-weight:500;padding:10px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
td{padding:14px 16px;border-bottom:1px solid #eef0f4;font-size:12px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.row-link{cursor:pointer}
tr.row-link:hover,tbody tr:hover{background:#fafbfc}
td.wrap{white-space:normal;min-width:260px}
tr.hidden{display:none}
.task-cell{display:flex;align-items:center;gap:12px}
.task-cell b{display:block;font-weight:600;font-size:12px}
.task-cell small{display:block;color:#8590a0;font-size:11px;margin-top:3px}
.agent-icon{height:36px;width:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}
.agent-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.research{background:#f0eaff;color:#7644d4}
.code{background:#eaf1ff;color:#2463e5}
.design{background:#fff3df;color:#ae7622}
.data{background:#e7f6ef;color:#078a4d}
.automation{background:#eeeafe;color:#7355d5}
/* the console's dotted badge, under the name the pages already use */
.pill{display:inline-flex;font-size:10px;font-weight:550;border-radius:20px;padding:4px 9px;align-items:center;gap:5px;white-space:nowrap;letter-spacing:.02em}
.pill:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.pill.ok{background:#e8f7ef;color:#078a4d}
.pill.warn{background:#fff3df;color:#9a6716}
.pill.err{background:#fcebed;color:#bf384d}
.pill.neutral{background:#f0f2f5;color:#657086}
.pill.blue{background:#eaf1ff;color:#245dee}
/* ---------- agent cards ---------- */
.agent-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:12px;padding:0 16px 16px}
.agent-card{border:1px solid var(--line);border-radius:6px;padding:15px;background:#fcfcfd;display:flex;flex-direction:column}
.agent-card-head{display:flex;align-items:center;gap:10px}
.agent-card b{font-size:12px}
.agent-card p{font-size:11px;color:var(--muted);margin:3px 0 0}
.agent-card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:11px}
.available{color:var(--green)}
.available:before{content:"";display:inline-block;height:5px;width:5px;background:var(--green);border-radius:50%;margin-right:5px}
/* ---------- filters, toolbar ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{padding:7px 13px;font-size:12px}
.filter b{color:var(--muted);margin-left:4px}
.filter.active{background:var(--ink);color:white;border-color:var(--ink)}
.filter.active b{color:#c8d0dc}
.panel-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.panel-tools .search{min-width:260px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0}
.chain-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:#fbfcfd}
.chain-row a{color:var(--blue)}
/* ---------- facts, steps, notes ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 26px;padding:2px 0 4px}
.fact label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.fact .v{font-size:13px;font-weight:550;overflow-wrap:anywhere}
.fact .v.mono{font-family:var(--mono);font-size:11.5px;font-weight:400}
.fact .sub{color:var(--muted);font-size:11.5px;margin-top:3px}
.steps{display:flex;align-items:flex-start;padding:6px 0 4px;overflow-x:auto}
.step{display:flex;flex-direction:column;gap:5px;min-width:170px;position:relative;padding-right:26px}
.step .dot{width:20px;height:20px;border-radius:50%;border:1.5px solid #cdd4de;background:#fff;display:grid;place-items:center;color:#fff;font-size:11px;position:relative;z-index:1}
.step.done .dot{background:var(--green);border-color:var(--green)}
.step .t{font-size:12.5px;font-weight:600}
.step:not(.done) .t{color:var(--muted)}
.step .ts{font-size:11px;color:var(--muted);font-family:var(--mono)}
.step:not(:last-child):after{content:"";position:absolute;left:18px;right:6px;top:9px;height:2px;background:var(--line)}
.step.done:not(:last-child):after{background:var(--green)}
.notice{border:1px solid #f1e3c4;background:#fffaf0;padding:12px 15px;border-radius:7px;margin-top:14px;font-size:12.5px;line-height:1.65;color:#6b5320}
pre{background:#f9fafb;border:1px solid var(--line);border-radius:6px;padding:12px;overflow:auto;font:11.5px var(--mono);color:#2f3b4c;max-height:420px;margin:8px 0 0;white-space:pre}
pre.preview{white-space:pre-wrap;max-height:280px}
details.raw summary{cursor:pointer;color:var(--blue);font-size:12px}
.raw-panel{padding:16px 20px}
.copy{cursor:pointer;border:0;background:transparent;color:#98a4b5;font-size:12px;padding:0 4px;font-weight:400}
.copy:hover{color:var(--ink);background:transparent}
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu .items{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 45px rgba(16,24,40,.14);padding:6px;min-width:220px;z-index:10}
.menu .items a,.menu .items button{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:7px;font-size:12.5px;border:0;background:none;color:var(--ink);font-weight:400}
.menu .items a:hover,.menu .items button:hover{background:#f4f6f9}
.step-num{width:26px;height:26px;border-radius:50%;background:#f0f2f5;color:#526075;display:inline-grid;place-items:center;font-size:11px;font-weight:650;flex:none}
footer{padding:25px 0;color:#8b95a3;font-size:11px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}
/* ---------- dark mode (shared verbatim by frontend/style.css and ui.py SITE_CSS) ----------
   Same layout; only colours change. Set by <html data-theme="dark">, chosen with the
   top-bar toggle (localStorage "pp-theme"; the default look stays light). */
.theme-toggle{position:relative;border:0;background:transparent;padding:6px;color:#5b697e;border-radius:6px}
.theme-toggle:hover{background:#f3f5f8}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.theme-toggle .moon{display:block}.theme-toggle .sun{display:none}
:root[data-theme=dark] .theme-toggle .moon{display:none}:root[data-theme=dark] .theme-toggle .sun{display:block}
:root[data-theme=dark]{
  --ink:#e7ebf1;--muted:#98a3b4;--line:#262e3b;--surface:#131922;--canvas:#0c1016;--blue:#7aa2ff;--green:#43c98b;
  --amber:#e0a84a;--red:#f07a8c;color-scheme:dark}
:root[data-theme=dark] body{background:var(--canvas);color:var(--ink)}
:root[data-theme=dark] button,:root[data-theme=dark] a.button,:root[data-theme=dark] summary.button{background:#18202b;border-color:var(--line);color:var(--ink)}
:root[data-theme=dark] button:hover,:root[data-theme=dark] a.button:hover,:root[data-theme=dark] summary.button:hover{background:#1f2834;border-color:#36404f}
:root[data-theme=dark] .primary,:root[data-theme=dark] button.primary,:root[data-theme=dark] a.button.primary{background:#e7ebf1;color:#0c1016;border-color:#e7ebf1}
:root[data-theme=dark] .primary:hover,:root[data-theme=dark] button.primary:hover,:root[data-theme=dark] a.button.primary:hover{background:#ffffff;border-color:#ffffff;color:#0c1016}
:root[data-theme=dark] .sidebar{background:#10151d}
:root[data-theme=dark] .topbar{background:#10151dee}
:root[data-theme=dark] .nav-item,:root[data-theme=dark] .top-link{color:#a3adbd}
:root[data-theme=dark] .nav-item:hover{background:#18202b}
:root[data-theme=dark] .nav-item.active{background:#1c2430;color:var(--ink)}
:root[data-theme=dark] .top-link:hover,:root[data-theme=dark] .top-link.active{color:var(--ink)}
:root[data-theme=dark] .search{background:#161d27;border-color:var(--line)}
:root[data-theme=dark] .search:focus-within{background:#1a222d;border-color:#3a4556}
:root[data-theme=dark] .search kbd{background:#232c39;color:var(--muted)}
:root[data-theme=dark] .bell,:root[data-theme=dark] .theme-toggle,:root[data-theme=dark] .profile{background:transparent;color:#a3adbd}
:root[data-theme=dark] .bell:hover,:root[data-theme=dark] .theme-toggle:hover,:root[data-theme=dark] .profile:hover{background:#18202b}
:root[data-theme=dark] .bell-count,:root[data-theme=dark] .bell-dot{border-color:#10151d}
:root[data-theme=dark] .search-pop,:root[data-theme=dark] .bell-menu,:root[data-theme=dark] .profile-menu,:root[data-theme=dark] .menu .items{background:#161d27;border-color:var(--line);box-shadow:0 18px 50px rgba(0,0,0,.5)}
:root[data-theme=dark] .bell-item{border-color:var(--line)}
:root[data-theme=dark] .bell-item:hover,:root[data-theme=dark] .sr-item:hover,:root[data-theme=dark] .sr-item.active,:root[data-theme=dark] .profile-menu a:hover,:root[data-theme=dark] .profile-menu button:hover,:root[data-theme=dark] .menu .items a:hover,:root[data-theme=dark] .menu .items button:hover{background:#1f2834}
:root[data-theme=dark] .profile-menu a,:root[data-theme=dark] .profile-menu button,:root[data-theme=dark] .menu .items a,:root[data-theme=dark] .menu .items button{background:transparent;color:var(--ink)}
:root[data-theme=dark] .bell-foot,:root[data-theme=dark] .chain-row{background:#121821}
:root[data-theme=dark] .avatar{background:#2a3446}
:root[data-theme=dark] .hero{border-color:var(--line);background-color:#121821}
:root[data-theme=dark] .hero:before{background:linear-gradient(90deg,#0f141c 0%,#0f141c 36%,rgba(15,20,28,.93) 50%,rgba(15,20,28,.55) 74%,rgba(15,20,28,.15) 100%)}
:root[data-theme=dark] .hero p,:root[data-theme=dark] .hero .gen,:root[data-theme=dark] .hero-quote,:root[data-theme=dark] .hero .eyebrow,:root[data-theme=dark] .eyebrow{color:#aab4c3}
:root[data-theme=dark] .stat,:root[data-theme=dark] .panel{background:var(--surface);border-color:var(--line)}
:root[data-theme=dark] .stat small,:root[data-theme=dark] .task-cell small,:root[data-theme=dark] th{color:var(--muted)}
:root[data-theme=dark] th{background:#161d27;border-color:var(--line)}
:root[data-theme=dark] td{border-color:#1f2733}
:root[data-theme=dark] tbody tr:hover,:root[data-theme=dark] tr.row-link:hover{background:#18202b}
:root[data-theme=dark] .stat-icon.gray,:root[data-theme=dark] .sr-item .sr-icon,:root[data-theme=dark] .step-num{background:#1f2834;color:#a3adbd}
:root[data-theme=dark] .stat-icon.green,:root[data-theme=dark] .data{background:rgba(67,201,139,.14);color:#5fd6a0}
:root[data-theme=dark] .stat-icon.blue,:root[data-theme=dark] .code{background:rgba(122,162,255,.15);color:#8fb1ff}
:root[data-theme=dark] .stat-icon.amber,:root[data-theme=dark] .design{background:rgba(224,168,74,.15);color:#e8b866}
:root[data-theme=dark] .stat-icon.red{background:rgba(240,122,140,.15);color:#f38d9d}
:root[data-theme=dark] .research{background:rgba(160,120,255,.15);color:#b79bff}
:root[data-theme=dark] .automation{background:rgba(140,120,240,.16);color:#a998ff}
:root[data-theme=dark] .completed,:root[data-theme=dark] .pill.ok,:root[data-theme=dark] .delivery-badge{background:rgba(67,201,139,.14);color:#5fd6a0}
:root[data-theme=dark] .in-progress,:root[data-theme=dark] .pill.blue{background:rgba(122,162,255,.15);color:#8fb1ff}
:root[data-theme=dark] .failed,:root[data-theme=dark] .pill.err{background:rgba(240,122,140,.15);color:#f38d9d}
:root[data-theme=dark] .queued,:root[data-theme=dark] .pill.neutral{background:#1f2834;color:#a3adbd}
:root[data-theme=dark] .pill.warn,:root[data-theme=dark] .delivery-badge.warn{background:rgba(224,168,74,.15);color:#e8b866}
:root[data-theme=dark] .stat strong.good,:root[data-theme=dark] .available,:root[data-theme=dark] .msg .body .ok-line{color:#5fd6a0}
:root[data-theme=dark] .stat strong.bad,:root[data-theme=dark] .msg .body .bad-line,:root[data-theme=dark] .pm-danger,:root[data-theme=dark] .auth-error{color:#f38d9d}
:root[data-theme=dark] .busy,:root[data-theme=dark] .msg .body .find-line{color:#e8b866}
:root[data-theme=dark] .agent-card,:root[data-theme=dark] .quick-item{background:#161d27;border-color:var(--line)}
:root[data-theme=dark] .avatars .avatar{border-color:var(--surface)}
:root[data-theme=dark] .filter.active{background:#e7ebf1;color:#0c1016;border-color:#e7ebf1}
:root[data-theme=dark] .filter.active b{color:#4b5566}
:root[data-theme=dark] .text-button{background:transparent;color:var(--muted)}
:root[data-theme=dark] .text-button:hover{background:transparent;color:var(--ink)}
:root[data-theme=dark] .tool-chip{background:#1f2834;color:#a3adbd}
:root[data-theme=dark] .tool-chip.running{background:rgba(122,162,255,.15);color:#8fb1ff}
:root[data-theme=dark] .tool-chip.error{background:rgba(240,122,140,.15);color:#f38d9d}
:root[data-theme=dark] .msg{border-color:#1f2733}
:root[data-theme=dark] .msg.user .body{background:#16203a;border-color:#22305a}
:root[data-theme=dark] .msg.compact .view,:root[data-theme=dark] button.speak,:root[data-theme=dark] button.mic{background:#18202b;border-color:var(--line);color:var(--muted)}
:root[data-theme=dark] .msg.compact .toggle{background:transparent;color:var(--blue)}
:root[data-theme=dark] pre,:root[data-theme=dark] .msg .body pre,:root[data-theme=dark] .activity-detail,:root[data-theme=dark] .delivery-section pre{background:#0f141c;border-color:var(--line);color:#c9d1dd}
:root[data-theme=dark] .activity-item,:root[data-theme=dark] .panel-head,:root[data-theme=dark] .dialog-footer,:root[data-theme=dark] .delivery-meta{border-color:var(--line)}
:root[data-theme=dark] .activity-item:not(:last-child):before,:root[data-theme=dark] .balance-line,:root[data-theme=dark] .step:not(:last-child):after{background:var(--line)}
:root[data-theme=dark] .step.done:not(:last-child):after{background:var(--green)}
:root[data-theme=dark] .step .dot{background:var(--surface);border-color:#3a4556}
:root[data-theme=dark] .step.done .dot{background:var(--green);border-color:var(--green)}
:root[data-theme=dark] .notice{background:rgba(224,168,74,.08);border-color:rgba(224,168,74,.28);color:#e3c58e}
:root[data-theme=dark] .demo-label{border-color:var(--line)}
:root[data-theme=dark] footer{color:var(--muted)}
:root[data-theme=dark] dialog,:root[data-theme=dark] .auth-card,:root[data-theme=dark] .guide-bubble{background:#141a24;border-color:var(--line);color:var(--ink)}
:root[data-theme=dark] form input,:root[data-theme=dark] form textarea,:root[data-theme=dark] form select,:root[data-theme=dark] #topup-amount{background:#0f141c;border-color:#2c3542;color:var(--ink)}
:root[data-theme=dark] .auth-overlay{background:linear-gradient(160deg,#0f141c,#121a26)}
:root[data-theme=dark] .auth-tabs{background:#1a222d}
:root[data-theme=dark] .auth-tab{background:transparent}
:root[data-theme=dark] .auth-tab.active{background:#262f3c;color:var(--ink)}
:root[data-theme=dark] .welcome-card{background:linear-gradient(#141a24,#141a24) padding-box,conic-gradient(from var(--welcome-angle,0deg),#7ef0b0,#6fa8ff,#c9a5ff,#ffd27a,#7ef0b0) border-box}
:root[data-theme=dark] .welcome-card:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
:root[data-theme=dark] .welcome-card p,:root[data-theme=dark] .guide-bubble p{color:#aab4c3}
:root[data-theme=dark] .guide-actions button,:root[data-theme=dark] .topup-presets button,:root[data-theme=dark] .icon-button{color:var(--ink)}
:root[data-theme=dark] .icon-button{background:transparent}
:root[data-theme=dark] .topup-presets button.eur.active{background:rgba(122,162,255,.15);border-color:#7aa2ff;color:#a9c3ff}
:root[data-theme=dark] .hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 220px at 100% 0%,rgba(10,14,20,.78),rgba(10,14,20,0) 75%)}
:root[data-theme=dark] .hero-quote{z-index:1;color:#eef1f6;text-shadow:0 1px 10px rgba(0,0,0,.85)}
:root[data-theme=dark] .hero-quote .dash{background:#cfd6e0}
:root[data-theme=dark] .search input{background:transparent;color:var(--ink)}
:root[data-theme=dark] .search input::placeholder{color:var(--muted)}
/* ---------- motion (shared verbatim by frontend/style.css and ui.py SITE_CSS) ---------- */
@keyframes lux-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lux-drift{from{background-position:100% 50%}to{background-position:72% 46%}}
@keyframes lux-pop{0%{transform:rotate(-120deg) scale(.4);opacity:0}70%{transform:rotate(12deg) scale(1.12)}100%{transform:none;opacity:1}}
@keyframes lux-ping{0%{box-shadow:0 0 0 0 currentColor}100%{box-shadow:0 0 0 5px transparent}}
.anim-in{animation:lux-rise .6s cubic-bezier(.2,.8,.2,1) both}
.hero{animation:lux-drift 28s ease-in-out infinite alternate}
.theme-toggle svg{animation:lux-pop .55s cubic-bezier(.2,.9,.3,1.2)}
.stat,.agent-card,.quick-item,.panel{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.stat:hover,.agent-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,24,40,.09);border-color:#d5dbe4}
:root[data-theme=dark] .stat:hover,:root[data-theme=dark] .agent-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.45);border-color:#36404f}
.stat-icon,.agent-icon{transition:transform .25s ease}
.stat:hover .stat-icon,.agent-card:hover .agent-icon,tr:hover .agent-icon{transform:scale(1.08) rotate(-4deg)}
.available:before,.pill.ok:before,.completed:before{animation:lux-ping 1.8s ease-out infinite;border-radius:50%}
a.button,button,.filter,.nav-item,.top-link{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}
a.button:active,button:active{transform:scale(.97)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){
  .anim-in,.hero,.theme-toggle svg,.available:before,.pill.ok:before,.completed:before{animation:none!important}
  .stat:hover,.agent-card:hover,a.button:active,button:active{transform:none}
}
/* ---------- responsive (same breakpoints as the console) ---------- */
@media (max-height:840px){.hero{min-height:200px;padding:24px 28px}.nav-item{padding:10px 12px}}
@media (max-width:1200px){.split{grid-template-columns:1fr}}
@media (max-width:900px){
  .sidebar{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px}
  .brand{height:auto;padding:2px 6px 10px}
  .nav-label{display:none}
  .sidebar nav{flex-direction:row;overflow-x:auto;gap:4px;padding:0}
  .nav-item{white-space:nowrap;margin:0;padding:10px 12px}
  .nav-item.active:before{display:none}
  .sidebar-bottom{display:flex;align-items:center;gap:12px;margin-top:12px;padding:0 6px}
  .credit-box{border:0;padding:0;flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .credit-box strong{margin:0;font-size:18px}
  .credit-box .button{width:auto;padding:7px 12px;font-size:12px}
  .signature{display:none}
  main{margin:0;padding:16px 14px 8px}
  .topbar{position:static;inset:auto;height:auto;flex-wrap:wrap;padding:10px 14px;gap:12px}
  .topbar nav{height:auto;overflow-x:auto;gap:16px}
  .search-wrap{width:100%;order:3;margin-left:0}
  .profile-wrap{margin-left:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero{padding:22px 18px;min-height:0;background-image:none;background:#eef2f7}
  .hero:before{display:none}
  .hero-quote{position:static;text-align:left;margin-top:14px;max-width:none}
  .hero-quote .dash{margin-left:0}
  h1{font-size:30px}
  .panel-tools{margin-left:0;width:100%}
  .panel-tools .search{min-width:0;flex:1}
}