';initial-value:0deg;inherits:false}
:root{
--amber:#FFC94A; --o:#5646E5; --oL:#8A7BFF; --oDeep:#4A38D4; --ink:#171C2E;
--grad:linear-gradient(110deg,#8FE7FF 8%,#BCA9FF 30%,#FFAEDB 52%,#B7F5C8 72%,#8FE7FF 92%); /* @kind color */
--pos:#067647; --posBar:#12B76A; --neg:#E8476F; --red:#FF8EC4; --neu:#9aa3af;
--fs-xs:clamp(11px,.25vw+10px,12px); /* @kind font */ --fs-sm:clamp(12.5px,.3vw+11px,13.5px); /* @kind font */ --fs-md:clamp(13.5px,.35vw+12px,15px); /* @kind font */
--fs-lg:clamp(16px,.6vw+13px,19px); /* @kind font */ --fs-xl:clamp(22px,1.6vw+15px,30px); /* @kind font */ --fs-2xl:clamp(26px,2.4vw+16px,40px); /* @kind font */
--sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px; --sp-6:40px;
--r:16px; --r-sm:12px; --r-pill:999px; --maxw:1080px;
--blur:blur(20px) saturate(140%); /* @kind other */ --blur-nav:blur(14px); /* @kind other */
--glow-btn:0 5px 0 #9BB8D8; --glow-btn-lg:0 7px 0 #9BB8D8;
--rainbow:#6E5BFF; /* @kind color */
}
/* LIGHT — the only mode (dark retired with the re-theme) */
:root,:root[data-theme="light"]{
--o:#5646E5;
--bg:#F3F6FB; --text:#171C2E; --muted:#5D6675; --faint:#8A94A6;
--glass:rgba(255,255,255,.70); --glass2:rgba(255,255,255,.88); --glass-nav:rgba(243,246,251,.8);
--surface:rgba(255,255,255,.94); --surface2:#ffffff; --bg2:rgba(23,28,46,.04);
--line:rgba(23,28,46,.09); --line2:rgba(23,28,46,.16); --card-hi:rgba(255,255,255,.85);
--input:rgba(23,28,46,.05); --shadow:0 10px 30px rgba(23,28,46,.06),0 2px 6px rgba(23,28,46,.04);
--wash:rgba(110,91,255,.12); --wash2:rgba(110,91,255,.07); --wash-border:rgba(110,91,255,.45); --glow:rgba(110,91,255,.30);
--mesh:radial-gradient(40% 44% at 96% 6%,rgba(143,231,255,.22),transparent 70%),
radial-gradient(42% 46% at 90% 96%,rgba(183,245,200,.18),transparent 72%),
radial-gradient(44% 48% at 6% 94%,rgba(255,174,219,.16),transparent 72%),
radial-gradient(40% 46% at 14% 8%,rgba(255,223,138,.14),transparent 72%); /* @kind other */
}
/* DARK "night" — retired */
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(14px,2.4vw,24px)}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.grad-text{background:none;-webkit-text-fill-color:currentColor;color:var(--oDeep)}
.topbar{position:sticky;top:0;z-index:30;background:var(--glass-nav);-webkit-backdrop-filter:var(--blur-nav);backdrop-filter:var(--blur-nav);border-bottom:1px solid var(--line)}
.topbar .inner{display:flex;align-items:center;gap:var(--sp-3);height:58px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.3px;font-size:var(--fs-lg)}
.brand .mk{width:24px;height:24px;flex:0 0 auto}
.topnav{margin-left:auto;display:flex;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm)}
.topnav a{color:var(--muted)}.topnav a:hover{color:var(--text)}
.who{color:var(--muted);font-size:var(--fs-sm)}
.linkbtn{background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-sm);cursor:pointer;padding:0}
.linkbtn:hover{color:var(--text)}
.themebtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--glass2);border:1px solid var(--line2);color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.themebtn:hover{border-color:var(--o);color:var(--o)}
.tabbar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.tabbar::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:var(--r-pill);padding:8px 16px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;min-height:36px;transition:color .15s,border-color .15s,background .15s}
.tab:hover{color:var(--text)}
.tab.on{background:var(--wash);color:var(--o);border-color:var(--wash-border)}
.btn:focus-visible,.tab:focus-visible,.chip:focus-visible,.linkbtn:focus-visible{outline:none;box-shadow:0 0 0 1px var(--o)}
.input,.select,.textarea{width:100%;background:var(--input);border:1px solid var(--line2);color:var(--text);border-radius:var(--r-sm);padding:11px 13px;font-size:var(--fs-md);font-family:inherit;line-height:1.4}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--o)}
.textarea{min-height:104px;resize:vertical}
.acct-select{background:var(--glass2);border:1px solid var(--line2);color:var(--text);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--fs-sm);font-family:inherit;max-width:230px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-sm);padding:11px 20px;font-weight:700;font-size:var(--fs-md);cursor:pointer;min-height:42px;transition:transform .1s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--grad);color:var(--ink);box-shadow:var(--glow-btn)}
.btn-primary:hover{box-shadow:var(--glow-btn-lg)}
.btn-ghost{background:var(--glass2);border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--o);color:var(--o)}
.btn-sm{padding:7px 13px;min-height:34px;font-size:var(--fs-sm)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--glass2);color:var(--muted);border-radius:var(--r-pill);padding:7px 13px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;min-height:34px;transition:color .12s,border-color .12s,background .12s}
.chip:hover{color:var(--text);border-color:var(--o)}
.chip.on{background:var(--wash);color:var(--o);border-color:var(--wash-border);font-weight:700}
.chip-static{cursor:default}
.chip-static:hover{color:var(--muted);border-color:var(--line2)}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,1.8vw,22px);box-shadow:var(--shadow);transition:transform .2s var(--ease,ease),box-shadow .25s ease,border-color .2s}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 var(--card-hi);z-index:2}
.card>*{position:relative;z-index:1}
.card .card{border:1px solid var(--line);box-shadow:none}
.card h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.3px}
.label{font-size:var(--fs-xs);letter-spacing:.6px;text-transform:uppercase;color:var(--faint);font-weight:700}
.page-head h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-1px;line-height:1.05}
.page-head p{color:var(--muted);font-size:var(--fs-md);margin-top:6px}
.divider{height:1px;background:var(--line);margin:var(--sp-2) 0}
.grid-2{display:grid;grid-template-columns:minmax(220px,1fr) 1.4fr;gap:clamp(14px,2vw,28px)}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px}
.stat .l{font-size:var(--fs-xs);letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.stat .v{font-size:var(--fs-xl);font-weight:800;letter-spacing:-1px;margin-top:4px}
.stat .v small{font-size:var(--fs-sm);color:var(--o);font-weight:700;margin-left:6px}
.bars{height:48px;display:flex;align-items:flex-end;gap:3px;margin-top:14px}
.bars i{flex:1;background:var(--grad);border-radius:3px 3px 0 0;min-height:2px;display:block;opacity:.92}
.listrow{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.listrow:first-of-type{border-top:none}
.listrow .ico{width:34px;height:34px;border-radius:11px;background:var(--wash);color:var(--o);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800}
.listrow .meta{margin-left:auto;color:var(--faint);font-size:var(--fs-xs);white-space:nowrap}
.tag{display:inline-block;font-size:var(--fs-xs);padding:2px 9px;border-radius:var(--r-pill);border:1px solid var(--line2);color:var(--muted)}
.tag.neg{color:var(--neg);border-color:rgba(224,86,122,.45)}
.tag.pos{color:var(--pos);border-color:rgba(22,163,74,.4)}
.empty{padding:28px;text-align:center;color:var(--faint);font-size:var(--fs-sm)}
.sent{height:10px;border-radius:999px;overflow:hidden;display:flex;margin-top:12px;background:var(--input)}
.sent span{display:block;height:100%}.sent .p{background:var(--posBar)}.sent .u{background:var(--neu)}.sent .n{background:var(--red)}
.hero-empty{max-width:560px;margin:5vh auto 0;text-align:center}
.hero-empty h2{margin-bottom:6px}
.hero-empty .row{justify-content:center;margin-top:18px}
.form-row{display:block;text-align:left;margin-top:14px}
.form-row .label{display:block;margin-bottom:6px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:12px}
.shot{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-sm);color:var(--text)}
.toggle input{width:38px;height:22px;-webkit-appearance:none;appearance:none;background:var(--glass2);border:1px solid var(--line2);border-radius:999px;position:relative;cursor:pointer;transition:.2s;flex:0 0 auto}
.toggle input:checked{background:var(--o);border-color:transparent}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked::after{left:18px}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-head div{font-size:var(--fs-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.5px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{min-height:76px;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--glass2);overflow:hidden}
.cal-cell.empty-cell{background:transparent;border-color:transparent}
.cal-d{font-size:var(--fs-xs);color:var(--faint);margin-bottom:4px}
.cal-ev{background:var(--wash);border:1px solid var(--wash-border);color:var(--text);border-radius:6px;padding:3px 5px;font-size:11px;margin-bottom:3px;line-height:1.25;overflow:hidden}
.cal-ev .cal-ch{display:block;color:var(--faint);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.cal-cell{min-height:52px;padding:4px}.cal-ev{font-size:10px}}
.acard{display:block;width:100%;text-align:left;background:var(--glass2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;cursor:pointer;color:var(--text);font:inherit;transition:.15s}
.acard:hover{border-color:var(--o)}
.arow{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);color:var(--muted);margin-top:7px}
.arow b{color:var(--text)}
/* ---- Sidebar rail ---- */
.app-shell{display:flex;min-height:100vh;align-items:flex-start}
.rail{position:sticky;top:0;align-self:flex-start;height:100vh;flex:0 0 auto;width:304px;display:flex;flex-direction:column;gap:4px;padding:18px 14px;border-right:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:40}
.rail-brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.3px;font-size:var(--fs-lg);padding:6px 8px 14px}
.rail-brand .mk{width:24px;height:24px;flex:0 0 auto}
.rail-acct{width:100%;background:var(--glass2);border:1px solid var(--line2);color:var(--text);border-radius:var(--r-sm);padding:8px 11px;font:inherit;font-size:var(--fs-sm);margin-bottom:8px}
:root{color-scheme:light}
select{color:var(--text)}
option{background:#ffffff;color:#171C2E}
.rail-content{color:var(--text)}
.au-stat .v,.stat .v{color:var(--text)}
.rail-nav{display:flex;flex-direction:column;gap:3px;overflow-y:auto;scrollbar-width:none}
.rail-nav::-webkit-scrollbar{display:none}
.rnav{display:flex;align-items:center;gap:11px;width:100%;height:40px;padding:0 12px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;text-align:left;transition:color .15s,background .15s}
.rnav .ic{width:20px;text-align:center;font-size:15px;flex:none}
.rnav:hover{color:var(--text);background:var(--glass2)}
.rnav.on{color:var(--o);background:var(--wash);border-color:var(--wash-border)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 4px 8px;border-top:1px solid var(--line)}
.rail-foot .rail-me{display:flex;align-items:center;gap:8px}
.rail-foot .rail-me .rail-user{flex:1;min-width:0;border-radius:10px;padding:6px;transition:background .15s}
.rail-foot .rail-me .rail-user:hover{background:var(--glass2,rgba(255,255,255,.05))}
.rail-install{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:#6E5BFF;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.2px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(110,91,255,.7)}
.rail-install:hover{filter:brightness(1.05)}
.rail-user{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);color:var(--muted);min-width:0;max-width:100%}
.rail-user .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--ink);font-weight:800;flex:none;font-size:var(--fs-sm)}
.rail-main{flex:1;min-width:0;display:flex;flex-direction:column}
.rail-content{width:100%;max-width:1180px;margin:0 auto;padding:clamp(20px,3vw,36px) clamp(16px,2.4vw,30px) 72px}
.rail-burger{display:none}
.rail-overlay{display:none}
@media (max-width:860px){
.rail{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow);width:80vw;max-width:300px}
.rail.open{transform:none}
.rail-overlay{display:block;position:fixed;inset:0;background:rgba(8,10,22,.45);z-index:39}
.rail-burger{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:12px;left:12px;z-index:38;width:40px;height:40px;border-radius:11px;border:1px solid var(--line2);background:var(--glass-nav);-webkit-backdrop-filter:var(--blur-nav);backdrop-filter:var(--blur-nav);color:var(--text);font-size:18px;cursor:pointer}
.rail-content{padding-top:60px}
}
/* Aurora console layout helpers */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.two>*{min-width:0}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
/* keep the app's .on active modifier working on kit chips/tabs */
.au-chip.on{background:var(--au-wash);color:var(--au-violet-ink);border-color:rgba(110,91,255,.34);font-weight:600}
.au-tab.on{background:var(--au-wash);color:var(--au-violet-ink)}
/* ---------- Admin console ---------- */
.admin-tbl{overflow-x:auto}
.admin-tbl table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:660px}
.admin-tbl th,.admin-tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line,rgba(255,255,255,.08));vertical-align:middle}
.admin-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#8a90ae);font-weight:600}
.admin-tbl tbody tr:hover td{background:rgba(110,91,255,.05)}
.admin-tbl tr.on td{background:rgba(110,91,255,.09)}
.admin-tbl .sub{font-size:12px;color:var(--muted,#8a90ae)}
.badge-warn{display:inline-block;min-width:20px;text-align:center;background:rgba(255,107,139,.16);color:#ff6b8b;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700}
.stack .sub{font-size:12px;color:var(--muted,#8a90ae)}
.admin-drawer{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end}
.admin-drawer-bg{position:absolute;inset:0;background:rgba(8,10,22,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.admin-panel{position:relative;width:min(560px,94vw);max-height:100vh;overflow:auto;background:var(--surface,#14182f);border-left:1px solid var(--line,rgba(255,255,255,.1));padding:20px;box-shadow:-30px 0 80px -20px rgba(0,0,0,.6)}
.admin-panel h4{margin:18px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#8a90ae)}
@media(max-width:560px){.admin-panel{width:100vw}}
/* ---- rail header: brand + theme toggle ---- */
.rail-head{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:6px 4px 12px}
.rail-head .rail-ctrls{display:flex;gap:5px;justify-content:flex-end}
.rail-head .rail-brand{padding:0;min-width:0;font-size:16px;white-space:nowrap}
.rail-brand .mk{width:24px;height:24px;border-radius:7px;flex:0 0 auto}
.rail-theme{flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line2,rgba(255,255,255,.12));background:var(--glass2,rgba(255,255,255,.05));color:var(--muted,#8a90ae);cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;transition:color .2s,border-color .2s}
.rail-theme:hover{color:var(--o,#6E5BFF);border-color:var(--o,#6E5BFF)}
.au-toggle{gap:12px}
.au-toggle input::after{top:3px;left:3px}
.au-toggle input:checked::after{left:20px}
/* Mobile bottom nav — 4 primary tabs + a raised center FAB. Desktop keeps the rail. */
.botnav{display:none}
@media(max-width:720px){
.botnav{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:60;
background:var(--au-surface,#fff);border-top:1px solid var(--au-line);
padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(20,24,50,.06)}
.botnav .bn{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
font-weight:600;font-size:10.5px;min-height:48px;cursor:pointer;color:var(--au-faint);text-align:center}
.botnav .bn.on{color:var(--au-violet-ink)}
.botnav .bn .ic{font-size:17px;line-height:1}
.botnav .bn-fab{all:unset;box-sizing:border-box;display:grid;place-items:center;justify-self:center;
width:52px;height:52px;border-radius:50%;background:var(--au-violet);color:#fff;font-size:28px;line-height:1;cursor:pointer;
box-shadow:0 10px 24px rgba(110,91,255,.45);transform:translateY(-8px)}
.botnav .bn-fab:active{transform:translateY(-8px) scale(.94)}
.rail-content{padding-bottom:82px}
}
/* ===== TOPBAR: search+⌘K left; bell · अ·EN · theme · +New post right ===== */
.topbar{border-bottom:1px solid var(--line)}
.topbar .rail-theme{width:36px;height:36px;border-radius:10px;font-size:15px}
.topbar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:12px clamp(16px,2.4vw,30px)}
.tb-search{flex:1 1 170px;min-width:120px;max-width:340px;display:flex;align-items:center;gap:9px;background:var(--surface,transparent);border:1px solid var(--line2,var(--line));border-radius:var(--r-pill,999px);padding:8px 14px;color:var(--muted);font-size:13.5px;cursor:pointer;font-family:inherit}
.tb-search .tb-q{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tb-search .pal-kbd{margin-left:auto}
.tb-ctrls{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.pal-kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;border:1px solid var(--line2,var(--line));border-radius:5px;padding:1px 6px;color:var(--faint,var(--muted))}
@media(max-width:720px){
.topbar-in{padding-left:64px}
.tb-new{display:none}
.tb-search{max-width:none}
}
/* ===== ACCOUNT SWITCHER CARD ===== */
.acct{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;margin:2px 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface,transparent);cursor:pointer;font-family:inherit;text-align:left;color:var(--text)}
.acct:hover{border-color:var(--line2,var(--line))}
.acct-av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--wash,rgba(110,91,255,.12));color:var(--au-violet,#6E5BFF);border:1px solid rgba(110,91,255,.28);flex:none}
.acct-nm{min-width:0;flex:1;font-size:13.5px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-nm>span{display:block;font-size:11px;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-cr{color:var(--faint,var(--muted));flex:none;font-size:12px}
.acct-menu{position:absolute;top:calc(100% - 8px);left:0;right:0;z-index:85;padding:6px;box-shadow:0 18px 50px rgba(10,10,40,.28);max-height:300px;overflow-y:auto}
.acct-row{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;text-align:left;color:var(--text)}
.acct-row:hover{background:var(--wash,rgba(110,91,255,.08))}
.acct-row .g{width:20px;text-align:center;color:var(--au-violet,#6E5BFF);flex:none}
.acct-row-t{min-width:0;font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-row-t>span{display:block;font-size:11px;font-weight:400;color:var(--muted)}
/* ===== AUTOPILOT STATUS PILL ===== */
.ap-pill{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:11px;background:var(--surface,transparent);cursor:pointer;font-family:inherit;text-align:left;color:var(--text)}
.ap-pill:hover{border-color:var(--line2,var(--line))}
.ap-dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.ap-t{min-width:0;font-size:12.5px;font-weight:700;line-height:1.3}
.ap-t>span{display:block;font-size:11px;font-weight:400;color:var(--muted)}
/* ===== CONSOLE-LANGUAGE PICKER ===== */
.lang-menu{position:absolute;top:44px;right:0;z-index:120;width:272px;padding:6px;box-shadow:0 18px 50px rgba(10,10,40,.28);display:flex;flex-direction:column}
.lang-search{display:flex;align-items:center;gap:8px;padding:4px 10px 8px;border-bottom:1px solid var(--line);color:var(--faint,var(--muted))}
.lang-search input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:13.5px;color:var(--text);padding:4px 0}
.lang-list{max-height:min(360px,60vh);overflow-y:auto;margin-top:4px}
.lang-menu-h{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--faint,var(--muted));padding:8px 10px 4px}
.lang-row{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:4px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--text);text-align:left}
.lang-row:hover{background:var(--wash,rgba(110,91,255,.08))}
.lang-row .g{width:16px;text-align:center;color:var(--au-violet,#6E5BFF);flex:none;font-size:12px}
.lang-row[aria-selected="true"]{font-weight:700}
.lang-nat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-en{margin-left:auto;font-size:11px;color:var(--faint,var(--muted));flex:none}
@media(max-width:720px){.lang-menu{position:fixed;top:64px;left:12px;right:12px;width:auto}}
/* ===== ENGAGE BADGE + MOBILE COMPANION ===== */
.rnav-badge{margin-left:auto;background:var(--wash,rgba(110,91,255,.12));color:var(--au-violet,#6E5BFF);border-radius:999px;font-size:10.5px;font-weight:800;padding:2px 8px;flex:none}
.bn-dot{position:absolute;top:6px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--au-violet,#6E5BFF)}
.rail-mc{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--muted);text-align:left}
.rail-mc:hover{color:var(--text);background:var(--wash,rgba(110,91,255,.06))}
.rail-mc .ic{width:18px;text-align:center}
.rail-mc-hint{font-size:11px;line-height:1.5;color:var(--muted);padding:2px 10px 8px}
/* ===== ⌘K COMMAND PALETTE ===== */
.pal-ov{position:fixed;inset:0;z-index:120;background:rgba(8,10,22,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pal-wrap{position:fixed;left:50%;top:110px;transform:translateX(-50%);z-index:121;width:min(560px,92vw)}
.pal-card{padding:10px;box-shadow:0 24px 70px rgba(10,10,40,.35)}
.pal-head{display:flex;align-items:center;gap:10px;padding:4px 10px 10px;border-bottom:1px solid var(--line)}
.pal-head input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:15px;color:var(--text);padding:6px 0}
.pal-list{max-height:320px;overflow-y:auto;margin-top:6px;display:flex;flex-direction:column;gap:2px}
.pal-item{display:flex;align-items:center;gap:10px;height:42px;padding:0 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--text);text-align:left}
.pal-item:hover{background:var(--wash,rgba(110,91,255,.08))}
.pal-item .g{width:22px;text-align:center;color:var(--au-violet,#6E5BFF)}
.pal-empty{padding:14px 12px;font-size:13px;color:var(--muted)}
/* ============================================================================
FROST CANDY skin layer — loaded LAST, wins over the legacy-named base files.
The three materials:
1. FROST — white surfaces, hairline #E0E6EF borders, ice canvas #F3F6FB.
2. CANDY — functional color-coding: aqua=languages/success · pink=engage ·
butter=schedule/warning · cherry=danger · sky=info.
3. HOLO — one iridescent animated material, reserved for: primary CTA,
eval chips, the accent word in a headline, the popular-plan hairline.
Physics: squish. Buttons sit on a 0 5px 0 under-shadow; hover lifts −2px,
press drops +2px. Springs use var(--au-spring).
========================================================================== */
@keyframes au-holo{0%{background-position:200% 50%}100%{background-position:-200% 50%}}
@keyframes au-scan{0%,14%{transform:translateX(-101%)}60%,100%{transform:translateX(101%)}}
@keyframes au-grow{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
/* ---- holo text (headline accents, ".au-grad-text" legacy API) ---- */
.au-grad-text,.grad-text{background:linear-gradient(110deg,#18AEDF 8%,#6E5BFF 34%,#E8479B 60%,#0FAE68 84%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:initial;animation:au-holo 8s linear infinite}
@media(prefers-reduced-motion:reduce){.au-grad-text,.grad-text{animation:none}}
/* ---- display type: Syne ONLY at big marketing display sizes (its quirky
letterforms are illegible as UI titles). Console chrome + data = Space Grotesk. ---- */
.au-h1{font-family:var(--au-font-display);letter-spacing:-.5px;line-height:1.06;font-weight:800}
.au-h2{font-family:var(--au-font);font-weight:700;letter-spacing:-.6px}
.page-head h2{font-family:var(--au-font);font-weight:700;letter-spacing:-.5px}
.stat .v,.au-stat .v{font-family:var(--au-font);font-weight:700;letter-spacing:-.5px}
.card h3,.au-card h3{letter-spacing:-.3px}
/* ---- squish press physics ---- */
.au-btn,.btn{transition:transform .15s var(--au-spring),box-shadow .15s var(--au-spring),background .2s,border-color .2s,color .2s}
.au-btn:hover,.btn:hover{transform:translateY(-2px)}
.au-btn:active,.btn:active{transform:translateY(2px)}
.au-btn--primary,.btn-primary{background:var(--au-grad);background-size:300% 100%;animation:au-holo 7s linear infinite;color:var(--au-ink);box-shadow:0 5px 0 #9BB8D8}
.au-btn--primary:hover,.btn-primary:hover{box-shadow:0 7px 0 #9BB8D8;color:var(--au-ink)}
.au-btn--primary:active,.btn-primary:active{box-shadow:0 2px 0 #9BB8D8}
@media(prefers-reduced-motion:reduce){.au-btn--primary,.btn-primary{animation:none}}
.au-btn--ghost,.btn-ghost{background:rgba(255,255,255,.6);color:var(--au-ink);border-color:rgba(255,255,255,.85);box-shadow:0 5px 0 rgba(155,171,196,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.au-btn--ghost:hover,.btn-ghost:hover{border-color:var(--candy-aqua);color:var(--candy-aqua-ink);box-shadow:0 7px 0 #E1E7F0}
.au-btn--ghost:active,.btn-ghost:active{box-shadow:0 2px 0 #E1E7F0}
.au-btn--quiet:hover{transform:none}
/* ---- chips: squarish frost, candy when on ---- */
.au-chip,.chip{border-radius:10px}
.au-chip.is-on,.au-chip.on,.chip.on{background:var(--candy-aqua-soft);color:var(--candy-aqua-ink);border-color:var(--candy-aqua-line)}
/* ---- tabs / nav actives: aqua candy ---- */
.au-tab.is-on,.au-tab.on,.tab.on{background:var(--candy-aqua-soft);color:var(--candy-aqua-ink);border-color:var(--candy-aqua-line)}
.rnav.on{color:var(--candy-aqua-ink);background:var(--candy-aqua-soft);border-color:var(--candy-aqua-line)}
.rnav-badge{background:var(--candy-pink-soft);color:var(--candy-pink-ink)}
/* ---- eval / special chip: white with holo rim, mono ---- */
.au-tag--grad{background:linear-gradient(#fff,#fff) padding-box,var(--au-grad) border-box;border:1.5px solid transparent;color:var(--au-ink);font-family:var(--au-mono);font-weight:500}
/* ---- solids that were gradient blobs ---- */
.au-dot{background:var(--candy-aqua)}
.au-spark i,.bars i{background:var(--spark-color,var(--candy-aqua));opacity:1;animation:au-grow .7s var(--au-ease) both}
.au-mk{background:var(--au-grad);background-size:300% 100%;animation:au-holo 7s linear infinite;box-shadow:0 6px 14px rgba(23,28,46,.14)}
.au-avatar,.avatar,.au-acct .av,.acct-av{background:var(--candy-aqua-soft);color:var(--candy-aqua-ink);border:1px solid var(--candy-aqua-line)}
.au-toggle input:checked,.toggle input:checked{background:var(--candy-aqua)}
.rail-install{background:var(--candy-aqua)!important;color:#fff}
/* ---- glassmorphism: surfaces are frosted glass over the candy mesh ---- */
.au-card,.card{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-color:rgba(255,255,255,.75);box-shadow:0 10px 30px rgba(23,28,46,.08),inset 0 1px 0 rgba(255,255,255,.9)}
.au-card--glass{background:rgba(255,255,255,.45)}
.rail{background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border-right-color:rgba(255,255,255,.7)}
.topbar{background:rgba(243,246,251,.5);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom-color:rgba(255,255,255,.7)}
.au-nav{background:rgba(243,246,251,.55);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.au-input,.au-textarea,.au-select{background:rgba(255,255,255,.6)}
.au-chip,.chip{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.acct,.ap-pill,.tb-search,.acard{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.au-dialog{background:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);border-color:rgba(255,255,255,.8)}
.au-card--accent::before{background:var(--au-grad);background-size:300% 100%;animation:au-holo 7s linear infinite}
.au-empty .em-ic{color:var(--au-ink);background:var(--au-grad);background-size:300% 100%;animation:au-holo 7s linear infinite;box-shadow:0 10px 24px rgba(110,91,255,.18)}
/* ---- toasts: candy tones ---- */
.au-toast{border-left-color:var(--candy-sky)}
.au-toast .ic{background:var(--candy-sky)}
.au-toast--ok{border-left-color:var(--candy-aqua)}
.au-toast--ok .ic{background:var(--candy-aqua);color:#053B33}
/* ---- frost backdrop: candy blob field (".au-aurora" legacy API) ---- */
.au-aurora{filter:blur(56px);opacity:.55;background:
radial-gradient(34% 44% at 16% 24%,rgba(143,231,255,.55),transparent 70%),
radial-gradient(36% 46% at 84% 16%,rgba(188,169,255,.4),transparent 70%),
radial-gradient(44% 54% at 66% 94%,rgba(183,245,200,.45),transparent 70%),
radial-gradient(34% 44% at 30% 86%,rgba(255,174,219,.4),transparent 70%)}
/* ---- console mesh: candy atmosphere — visible, top-heavy, alive ---- */
:root{--mesh:
radial-gradient(46% 42% at 92% -4%,rgba(143,231,255,.42),transparent 68%),
radial-gradient(38% 36% at 4% 2%,rgba(255,223,138,.30),transparent 66%),
radial-gradient(46% 44% at 108% 88%,rgba(183,245,200,.30),transparent 70%),
radial-gradient(40% 42% at -6% 96%,rgba(255,174,219,.28),transparent 70%) /* @kind other */}
@keyframes au-mesh-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-1.5%,1.2%) scale(1.05)}}
@media(prefers-reduced-motion:no-preference){body::before{animation:au-mesh-drift 22s ease-in-out infinite}}
/* ---- KPI candy ticks (utility) ---- */
.candy-tick{position:absolute;top:0;left:12px;right:12px;height:3px;border-radius:0 0 4px 4px}
/* ---- KPI/stat tiles: glass tiles ---- */
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))} /* fill the full row — no phantom empty tracks */
.stat,.au-stat{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border-color:rgba(255,255,255,.75);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:transform .2s var(--au-ease),box-shadow .2s var(--au-ease)}
.stat:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(23,28,46,.1),inset 0 1px 0 rgba(255,255,255,.9)}
.stat .l{font-family:var(--au-mono);font-weight:500;letter-spacing:.8px;font-size:9.5px}
/* ---- scan sweep (featured cards) ---- */
.frost-scan{position:absolute;top:0;bottom:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(143,231,255,.14) 40%,rgba(188,169,255,.14) 60%,transparent);animation:au-scan 4.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.frost-scan{animation:none}}
/* ---- screen entrance: staggered rise on tab switch (wrap screens in .cle-stagger, key by tab) ---- */
.cle-stagger{grid-template-columns:minmax(0,1fr)}
.cle-stagger>*{min-width:0}
@media(prefers-reduced-motion:no-preference){
.cle-stagger>[data-screen-label]>*{animation:au-rise .42s var(--au-ease) both}
.cle-stagger>[data-screen-label]>*:nth-child(2){animation-delay:.05s}
.cle-stagger>[data-screen-label]>*:nth-child(3){animation-delay:.1s}
.cle-stagger>[data-screen-label]>*:nth-child(4){animation-delay:.15s}
.cle-stagger>[data-screen-label]>*:nth-child(n+5){animation-delay:.2s}
}
/* ---- approve micro-interaction: aqua flash, slide out ---- */
@keyframes au-approve-out{0%{opacity:1;transform:none}25%{background:var(--candy-aqua-soft);border-radius:12px}100%{opacity:0;transform:translateX(44px);background:var(--candy-aqua-soft)}}
.queue-leaving{animation:au-approve-out .3s var(--au-ease) both;pointer-events:none}
/* ---- live pulses ---- */
.ap-dot{animation:au-pulse 2s infinite}
/* ---- icon scale-up: glyphs were timid ---- */
.rnav{height:44px;font-size:13.5px}
.rnav .ic{width:24px;font-size:19px}
.rnav-badge{font-size:11px}
.listrow .ico,.au-lr .ico{width:40px;height:40px;font-size:18px;border-radius:12px}
.rail-theme{font-size:17px}
.topbar .rail-theme{font-size:17px}
.acct-av{width:38px;height:38px;font-size:14px}
.au-empty .em-ic{width:60px;height:60px;font-size:26px}
.tb-search{font-size:14px;padding:10px 16px;gap:10px;max-width:440px;min-height:42px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(155,171,196,.25),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .15s var(--au-spring),box-shadow .15s var(--au-spring),border-color .15s,color .15s}
.tb-search:hover{transform:translateY(-1px);border-color:var(--candy-iris-line);color:var(--au-ink);box-shadow:0 6px 16px rgba(110,91,255,.2),inset 0 1px 0 rgba(255,255,255,.9)}
.tb-search:active{transform:translateY(1px)}
.tb-search>span[aria-hidden]{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--candy-iris-soft);color:var(--candy-iris-ink);font-size:14px;font-weight:700;flex:none}
.tb-search{padding-right:12px}
.tb-search .pal-kbd{background:var(--candy-iris-soft);border-color:var(--candy-iris-line);color:var(--candy-iris-ink);margin-left:auto;margin-right:0;transform:translateX(0)}
.tb-search .pal-kbd{margin:0 0 0 auto}
.pal-kbd{display:inline-flex;align-items:center;justify-content:center;gap:2.5px;box-sizing:border-box;white-space:nowrap;flex:none;font-weight:600;font-size:11px;line-height:1;height:22px;padding:0 8px;border-radius:6px;letter-spacing:.5px;align-self:center;vertical-align:middle}
/* ---- candy hints: cards keep frost up top, glow candy at the foot ---- */
.candy-hint-aqua{background:linear-gradient(180deg,rgba(255,255,255,.55) 42%,var(--candy-aqua-soft) 170%)!important}
.candy-hint-pink{background:linear-gradient(180deg,rgba(255,255,255,.55) 42%,var(--candy-pink-soft) 170%)!important}
.candy-hint-butter{background:linear-gradient(180deg,rgba(255,255,255,.55) 42%,var(--candy-butter-soft) 170%)!important}
.candy-hint-sky{background:linear-gradient(180deg,rgba(255,255,255,.55) 42%,var(--candy-sky-soft) 170%)!important}
.candy-hint-cherry{background:linear-gradient(180deg,rgba(255,255,255,.55) 42%,var(--candy-cherry-soft) 170%)!important}
/* ---- tablet: clear the fixed burger between 721–860px; frost the burger ---- */
@media(max-width:860px){.topbar-in{padding-left:64px}}
.rail-burger{border-radius:11px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(155,171,196,.3)}
.botnav{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-top:1px solid rgba(255,255,255,.9);padding:12px 8px calc(12px + env(safe-area-inset-bottom,0px))}
.botnav .bn{gap:5px;min-height:52px}
.botnav .bn-fab{background:var(--candy-iris);width:54px;height:54px;transform:none;align-self:center;box-shadow:0 0 0 4px rgba(255,255,255,.95),0 8px 20px rgba(110,91,255,.45)}
.botnav .bn-fab:active{transform:scale(.94)}
/* ---- mobile guards: content column never scrolls sideways; equal side gutters ---- */
.rail-content{overflow-x:clip}
.two-major{grid-template-columns:1.5fr 1fr}
.two-cal{grid-template-columns:1.7fr 1fr}
@media(max-width:900px){.two-major,.two-cal{grid-template-columns:1fr}}
@media(max-width:720px){
.rail-content{padding-left:16px;padding-right:16px}
.au-card,.card{padding:16px}
.stat-grid,.stats{grid-template-columns:1fr}
.two,.two-major,.two-cal{grid-template-columns:1fr}
/* tables scroll inside their card instead of stretching the page */
.au-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* dense rows (Engage inbox, Settings connections, queue meta) wrap instead of overflowing */
.listrow,.au-lr{flex-wrap:wrap}
.listrow .meta,.au-lr .meta{margin-left:52px}
/* standard mobile row anatomy: icon + full-width content, actions as a full-width bottom row */
.listrow>div:not(.row){flex:1 1 calc(100% - 56px);min-width:calc(100% - 56px)}
.listrow>.au-btn,.listrow>.row{flex:1 1 100%;margin-left:0;margin-top:2px}
.listrow>.au-btn{width:100%}
.cle-qrow>div:last-child{flex:1 1 100%;margin-left:0;margin-top:2px}
.cle-qrow>div:last-child .au-btn{flex:1 1 0}
.cle-banner>.au-btn{flex:1 1 100%;width:100%;margin-top:4px}
.cle-banner>div{flex:1 1 calc(100% - 58px);min-width:calc(100% - 58px)}
/* month calendar: keep 7 columns readable by letting the card scroll */
.cal-grid,.cal-head{min-width:420px}
.cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ---- marketing mobile ---- */
@media(max-width:720px){
.au-nav-cta{gap:8px}
.au-nav-cta .au-btn--quiet{display:none}
.cle-nav-mega .au-brand{font-size:18px}
.cle-nav-mega .au-brand svg{width:28px;height:28px}
.au-section{padding:44px 0}
.au-h1{letter-spacing:-.3px}
.au-foot-grid{gap:22px}
}
@media(max-width:480px){
.au-foot-grid{grid-template-columns:1fr}
}
/* 5-column marketing footer (brand + 4 link groups). Mobile-first & min-width
gated so the collapse ACTUALLY applies — an inline grid-template-columns used
to beat every media query and cram 5 columns onto phones. Never inline it. */
.au-foot-grid--wide{grid-template-columns:1fr}
@media(min-width:481px){.au-foot-grid--wide{grid-template-columns:1fr 1fr}}
@media(min-width:761px){.au-foot-grid--wide{grid-template-columns:1.6fr 1fr 1fr 1.15fr 1.15fr}}
/* ---- marketing footer — DESKTOP (finalised): left-aligned 5-col, clean
uppercase labels, monochrome social row, single-line legal ---- */
.au-foot{padding:64px 0 30px}
.au-foot-grid{gap:44px 34px}
.au-foot h4{position:relative;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--au-ink);margin-bottom:16px;padding-bottom:13px;border-bottom:0}
.au-foot h4::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:2px;border-radius:2px;background:var(--candy-iris)}
.au-foot ul{gap:11px}
.au-foot a{font-size:14px;transition:color .15s}
.au-foot a:hover{color:var(--candy-iris-ink)}
.au-foot-brand-tag{font-size:14px;line-height:1.62;color:var(--au-muted);margin:14px 0 0;max-width:300px}
.au-foot-social{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.au-foot-social a{display:inline-grid;place-items:center;color:var(--au-muted);transition:transform .15s var(--au-spring),color .18s}
.au-foot-social a:hover{color:var(--candy-iris-ink);transform:translateY(-2px)}
.au-foot-social .fs-lg{display:none}
.au-foot-bot{margin-top:52px;padding-top:22px}
.au-foot-copy{display:flex;flex-wrap:wrap;gap:4px 7px}
.au-foot-legal{display:flex;align-items:center;gap:18px}
/* ---- marketing footer — MOBILE (≤640px): fully centered, colored + bigger
social, bold headings with an iris divider, stacked centered legal ---- */
@media(max-width:640px){
.au-foot .au-wrap{text-align:center}
.au-foot-brand{display:flex;flex-direction:column;align-items:center}
.au-foot-brand-tag{margin:16px auto 0;max-width:520px}
.au-foot-social{justify-content:center;gap:16px;margin-top:22px}
.au-foot-social .fs-sm{display:none}
.au-foot-social .fs-lg{display:inline-grid;place-items:center}
.au-foot-social a:hover{transform:translateY(-3px)}
.au-foot-grid{text-align:center;gap:36px 24px}
.au-foot h4{margin-bottom:18px}
.au-foot h4::after{left:50%;transform:translateX(-50%);width:80px}
.au-foot ul{align-items:center}
.au-foot-bot{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;margin-top:40px}
.au-foot-copy{flex-direction:column;align-items:center;gap:6px}
.au-foot-legal{justify-content:center;flex-wrap:wrap;margin-top:14px}
}
/* hero: give the stacked visual a bottom gap on mobile (desktop has none — the
platform bar's top padding handles that) */
@media(max-width:760px){.cle-hero-sec{padding-bottom:clamp(24px,6vw,40px)}}
/* ================= marketing site chrome ================= */
.cle-nav-mega .au-nav-in{gap:16px}
.cle-nav-mega .au-nav-cta{margin-left:0}
.cle-mega-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.cle-mega-item{position:relative}
.cle-mega-trigger,.cle-mega-flat{background:none;border:0;font:inherit;font-size:14.5px;font-weight:500;color:var(--au-muted);padding:9px 12px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.cle-mega-trigger .cv{font-size:10px;opacity:.7;transition:transform .16s}
.cle-mega-item:hover .cle-mega-trigger .cv{transform:rotate(180deg)}
.cle-mega-trigger:hover,.cle-mega-flat:hover,.cle-mega-flat.on,.cle-mega-item:hover .cle-mega-trigger{color:var(--au-ink);background:var(--au-wash)}
.cle-mega-panel{position:absolute;top:calc(100% + 10px);right:0;left:auto;min-width:560px;background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--au-line);border-radius:18px;box-shadow:var(--au-shadow-lg);padding:14px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s var(--au-ease),transform .16s var(--au-ease),visibility .16s;z-index:60}
.cle-mega-item:hover .cle-mega-panel,.cle-mega-item:focus-within .cle-mega-panel{opacity:1;visibility:visible;transform:none}
.cle-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cle-mega-link{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;color:var(--au-ink);transition:background .14s}
.cle-mega-link:hover{background:var(--candy-iris-soft)}
.cle-mega-link .mi{width:34px;height:34px;border-radius:10px;background:var(--candy-iris-soft);color:var(--candy-iris-ink);display:grid;place-items:center;font-size:16px;flex:none}
.cle-mega-link.feat .mi{background:var(--au-grad);background-size:300% 100%;animation:au-holo 7s linear infinite;color:var(--au-ink)}
.cle-mega-link b{display:block;font-size:14px;font-weight:600;letter-spacing:-.2px}
.cle-mega-link .ds{display:block;font-size:12.5px;color:var(--au-muted);margin-top:2px;line-height:1.35}
.cle-live{position:relative}
.cle-live-dot{width:7px;height:7px;border-radius:50%;background:var(--candy-mint);box-shadow:0 0 8px var(--candy-mint);animation:au-pulse 2s infinite}
.cle-burger{display:none;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);border-radius:10px;color:var(--au-ink);font-size:18px;width:40px;height:40px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .15s var(--au-spring),border-color .2s,background .2s}
.cle-burger:hover{border-color:var(--candy-iris);background:var(--candy-iris-soft);transform:translateY(-1px)}
.cle-burger:active{transform:translateY(1px)}
.cle-burger-bars{position:relative;width:18px;height:13px;display:block;flex:none}
.cle-burger-bars i{position:absolute;left:0;height:2.5px;border-radius:2px;background:var(--candy-iris);transition:transform .3s var(--au-spring),opacity .2s var(--au-ease),width .28s var(--au-spring),background .2s}
.cle-burger-bars i:nth-child(1){top:0;width:100%}
.cle-burger-bars i:nth-child(2){top:50%;transform:translateY(-50%);width:70%}
.cle-burger-bars i:nth-child(3){bottom:0;width:100%}
.cle-burger:hover .cle-burger-bars i{background:var(--candy-iris-ink)}
.cle-burger:hover .cle-burger-bars i:nth-child(2){width:100%}
.cle-burger.is-open .cle-burger-bars i:nth-child(1){top:50%;width:100%;transform:translateY(-50%) rotate(45deg)}
.cle-burger.is-open .cle-burger-bars i:nth-child(2){opacity:0;width:0}
.cle-burger.is-open .cle-burger-bars i:nth-child(3){bottom:50%;width:100%;transform:translateY(50%) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.cle-burger-bars i{transition:opacity .2s}}
.cle-drawer{display:flex;flex-direction:column;gap:2px;padding:12px clamp(20px,5vw,40px) 18px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--au-line)}
.cle-drawer a{padding:10px 8px;border-radius:10px;font-weight:500;color:var(--au-ink)}
.cle-drawer a:hover{background:var(--candy-iris-soft)}
.cle-drawer-cta{display:flex;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--au-line)}
.cle-drawer-cta .au-btn{flex:1}
.cle-mega-panel.wide{min-width:620px}
/* breadcrumb */
.cle-crumbs{padding:18px 0 0;font-size:12.5px;font-family:var(--au-mono)}
.cle-crumbs .au-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cle-crumbs a{color:var(--au-faint);font-weight:500}
.cle-crumbs a:hover{color:var(--candy-iris-ink)}
.cle-crumbs .sep{color:var(--au-faint);opacity:.5}
.cle-crumbs [aria-current="page"]{color:var(--au-muted);font-weight:600}
/* static FAQ accordion (native details) */
.cle-faq{max-width:780px;margin:0 auto;border-top:1px solid var(--au-line)}
.cle-faq details{border-bottom:1px solid var(--au-line)}
.cle-faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 2px;cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;color:var(--au-ink)}
.cle-faq summary::-webkit-details-marker{display:none}
.cle-faq summary::after{content:"+";flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--au-line-2);display:grid;place-items:center;font-size:15px;color:var(--candy-iris-ink);transition:transform .2s var(--au-ease),background .2s}
.cle-faq details[open] summary::after{transform:rotate(45deg);background:var(--au-wash)}
.cle-faq .a{padding:0 30px 20px 2px;margin:0;color:var(--au-muted);font-size:14.5px;line-height:1.6}
/* marketing page helpers */
.split-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(28px,4vw,52px);align-items:center}
.au-pill-link{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;background:var(--au-surface);border:1px solid var(--au-line);font-size:14px;font-weight:600;color:var(--candy-iris-ink);box-shadow:var(--au-shadow);transition:transform .15s var(--au-spring),border-color .2s}
.au-pill-link:hover{transform:translateY(-2px);border-color:var(--candy-iris)}
.au-fi{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--candy-iris-soft);color:var(--candy-iris-ink);font-size:20px}
.au-ph{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:16px;border:1px solid var(--au-line);background:repeating-linear-gradient(135deg,var(--au-canvas),var(--au-canvas) 10px,var(--au-surface) 10px,var(--au-surface) 20px);color:var(--au-faint);font-family:var(--au-mono);font-size:12px;padding:24px}
@media(max-width:960px){.cle-mega-nav{display:none}.cle-burger{display:inline-flex;align-items:center;justify-content:center}}
@media(min-width:961px){.cle-drawer{display:none}}
@media(max-width:560px){
.cle-hide-sm{display:none}
.cle-nav-mega .au-nav-in{gap:8px;padding-left:14px;padding-right:8px}
.cle-nav-mega .au-nav-cta{gap:6px}
.cle-nav-mega .au-brand{font-size:16px!important;gap:7px!important}
.cle-nav-mega .au-brand svg{width:22px !important;height:22px !important}
.cle-nav-mega .au-nav-cta .au-btn--primary{padding:8px 12px;min-height:36px;font-size:12.5px}
.cle-burger{width:36px;height:36px;font-size:16px}
}
@media(max-width:400px){
.cle-nav-mega .au-nav-in{gap:6px;padding-left:12px;padding-right:8px}
.cle-nav-mega .au-brand{font-size:14px!important;gap:6px!important}
.cle-nav-mega .au-brand svg{width:19px !important;height:19px !important}
.cle-nav-mega .au-nav-cta{gap:6px}
.cle-nav-mega .au-nav-cta .au-btn--primary{padding:7px 10px;min-height:34px;font-size:11.5px}
.cle-burger{width:32px;height:32px;font-size:15px}
}
/* pricing page bits */
.cle-cur-seg{display:inline-flex;background:rgba(255,255,255,.6);border:1px solid var(--au-line-2);border-radius:999px;padding:4px;gap:2px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cle-cur-seg button{border:none;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--au-muted);padding:8px 18px;border-radius:999px;transition:.15s}
.cle-cur-seg button.on{background:#fff;color:var(--candy-iris-ink);box-shadow:var(--au-shadow)}
.cle-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cle-cmp{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px;min-width:620px}
.cle-cmp th,.cle-cmp td{padding:13px 14px;border-bottom:1px solid var(--au-line)}
.cle-cmp td:not(:first-child),.cle-cmp th:not(:first-child){text-align:center}
.cle-cmp tbody td:first-child{color:var(--au-muted)}
.cle-cmp thead th{font-weight:700;font-size:14px;font-family:var(--au-font)}
.cle-cmp thead th.pop{color:var(--candy-iris-ink)}
.cle-cmp .yes{color:var(--candy-iris-ink);font-weight:800}
.cle-cmp .no{color:var(--au-faint)}
/* Fix: .au-card--grad ships white text but frost-skin's base .au-card glass background
overrides its gradient (equal specificity, later import), leaving white-on-white.
Restore a readable vivid gradient band so these CTAs are legible as intended. */
.au-card--grad{background:linear-gradient(135deg,#18AEDF 0%,#6E5BFF 42%,#E8479B 74%,#0FAE68 100%);background-size:200% 200%;color:#fff;border:0;box-shadow:0 22px 55px -24px rgba(110,91,255,.5)}
.au-card--grad h1,.au-card--grad h2,.au-card--grad h3,.au-card--grad h4,.au-card--grad p,.au-card--grad span,.au-card--grad a,.au-card--grad li{color:#fff}
.au-card--grad .au-muted,.au-card--grad .au-lead{color:rgba(255,255,255,.9)}
.au-card--grad .au-btn--primary{background:#fff;color:var(--au-ink)}
.au-card--grad .au-btn--ghost,.au-card--grad .au-btn--quiet{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
/* ── Design polish (owner feedback) ─────────────────────────────
1) 6-card feature sections render as 2 rows of 3 (not 5 + a lonely 1). */
@media(min-width:900px){
div[style*="auto-fit"]:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)!important}
div[style*="auto-fit"]:has(> :nth-child(9):last-child){grid-template-columns:repeat(3,1fr)!important}
}
/* 2) Remove breadcrumbs everywhere. */
.cle-crumbs,.crumbs,nav[aria-label="Breadcrumb"]{display:none!important}
@media(min-width:900px){
:is(.grid2,.grid3,.grid4):has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)!important}
:is(.grid2,.grid3,.grid4):has(> :nth-child(9):last-child){grid-template-columns:repeat(3,1fr)!important}
:is(.grid2,.grid3,.grid4):has(> :nth-child(8):last-child){grid-template-columns:repeat(4,1fr)!important}
}
/* ── Mobile chrome fixes (owner feedback) ───────────────────────
A) Header: push actions (Sign in / Start free / burger) to the right edge.
The .cle-nav-mega variant zeroes .au-nav-cta's auto margin; once the mega
links are hidden on mobile that leaves the actions stranded mid-row, so
restore the auto margin below the nav breakpoint. */
@media(max-width:960px){ .cle-nav-mega .au-nav-cta{margin-left:auto} }
/* B) Footer: use the full width on phones — brand across the top, link columns
2-up and left-aligned, instead of a narrow centered ribbon with dead gutters. */
@media(max-width:640px){
/* 2-up columns to fill the width, but everything CENTER-aligned (owner preference). */
.au-foot-grid--wide{grid-template-columns:1fr 1fr;gap:34px 22px;text-align:center}
.au-foot-brand{grid-column:1 / -1;align-items:center;text-align:center}
.au-foot-brand-tag{margin-left:auto;margin-right:auto}
.au-foot-social{justify-content:center}
.au-foot-grid{text-align:center}
.au-foot ul{align-items:center}
.au-foot h4::after{left:50%;transform:translateX(-50%)}
.au-foot-bot{align-items:center;text-align:center}
.au-foot-copy{align-items:center;text-align:center}
.au-foot-legal{justify-content:center}
}
@media(max-width:359px){ .au-foot-grid--wide{grid-template-columns:1fr} }
/* Bigger header logo on mobile — the mark was ~19-22px next to a ~34-36px button,
which felt undersized. Bring it up so the logo ≈ the button height beside it. */
@media(max-width:560px){
.cle-nav-mega .au-brand{font-size:18px!important;gap:9px!important}
.cle-nav-mega .au-brand svg{width:32px!important;height:32px!important}
}
@media(max-width:400px){
.cle-nav-mega .au-brand{font-size:17px!important;gap:8px!important}
.cle-nav-mega .au-brand svg{width:30px!important;height:30px!important}
}
/* ── FIX: static-page drawer stuck open on mobile ───────────────
The 9 static-chrome pages (features, platforms, faq, ai-visibility, audience,
growth-analytics, workspaces, blog, 404) keep
permanently in the DOM, toggled by an .is-open class. But .cle-drawer defaults to
display:flex (only hidden >=961px), so on mobile it showed ALWAYS — the menu never
vanished after tapping Product/Platforms (which navigate to those static pages).
Hide it unless open. Scoped to the #id so the React home drawer (no id) is untouched. */
@media(max-width:960px){ #cle-drawer:not(.is-open){display:none} }
/* ══════════════════════════════════════════════════════════════════════════
PRODUCT SHOTS — real console captures (site/assets/product/*, see MANIFEST.md)
Frost Candy framing: ice-glass browser chrome, soft ambient lift, no holo
(the holo law reserves the gradient for the primary CTA / one accent word /
eval chips / the popular-plan hairline — never large fills like these).
══════════════════════════════════════════════════════════════════════════ */
.cle-shot{margin:0;position:relative;min-width:0}
.cle-shot::before{content:"";position:absolute;inset:-8% 0 -13%;z-index:0;pointer-events:none;
background:radial-gradient(56% 48% at 62% 26%,rgba(143,231,255,.42),transparent 72%);filter:blur(26px)}
.cle-shot-frame{position:relative;z-index:1;border-radius:16px;overflow:hidden;background:var(--au-surface);
border:1px solid var(--au-line-2);box-shadow:var(--au-shadow-lg)}
.cle-shot-bar{display:flex;align-items:center;gap:10px;padding:9px 13px;
background:linear-gradient(180deg,#FCFDFF,#EFF3F9);border-bottom:1px solid var(--au-line)}
.cle-shot-dots{display:flex;gap:6px;flex:none}
.cle-shot-dots i{width:9px;height:9px;border-radius:50%;background:var(--au-line-2);display:block}
.cle-shot-url{flex:1;min-width:0;text-align:center;font-family:var(--au-mono);font-size:11.5px;
color:var(--au-faint);background:var(--au-canvas);border:1px solid var(--au-line);border-radius:7px;
padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cle-shot-frame img{display:block;width:100%;height:auto;background:var(--au-canvas)}
.cle-shot figcaption{position:relative;z-index:1;margin-top:13px;font-size:13.5px;line-height:1.5;color:var(--au-muted)}
.cle-shot figcaption b{color:var(--au-ink);font-weight:600}
.cle-shot--plain::before{display:none}
.cle-hero-shot{min-width:0} /* wraps shot + demo-data note as ONE grid child */
.cle-shot--plain .cle-shot-frame{box-shadow:var(--au-shadow)}
/* Alternating copy ⇄ screenshot rows */
.cle-alt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
gap:clamp(26px,4vw,52px);align-items:center}
.cle-alt + .cle-alt{margin-top:clamp(40px,5.5vw,72px)}
.cle-alt-copy{min-width:0}
@media(min-width:901px){ .cle-alt--flip .cle-alt-copy{order:2} }
/* Phone frame for the 390×844 captures */
.cle-phone{position:relative;margin:0;width:100%;max-width:262px;justify-self:center}
.cle-phone-body{position:relative;border-radius:30px;padding:8px;background:linear-gradient(160deg,#E7ECF5,#CFD9E8);
box-shadow:0 20px 44px rgba(23,28,46,.16),inset 0 0 0 1px rgba(255,255,255,.65)}
.cle-phone-body::after{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
width:62px;height:5px;border-radius:4px;background:rgba(23,28,46,.22)}
.cle-phone-body img{display:block;width:100%;height:auto;border-radius:23px;background:var(--au-canvas)}
.cle-phone figcaption{margin-top:12px;text-align:center;font-size:13px;line-height:1.5;color:var(--au-muted)}
.cle-phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
gap:clamp(20px,3vw,34px);align-items:start}
/* Honest-labelling line that must accompany the demo-workspace captures */
.cle-demo-note{font-size:12.5px;line-height:1.6;color:var(--au-muted);font-family:var(--au-mono)} /* --au-muted, not --au-faint: 5.2:1 on the ice canvas, AA for small text */
@media(max-width:640px){
.cle-shot-frame{border-radius:13px}
.cle-shot-url{font-size:10.5px}
.cle-shot::before{inset:-5% 0 -8%}
}