*{box-sizing:border-box}
:root{--bg:#EDEDE8;--ink:#141414;--mut:#8B8B85;--line:#DCDCD5;--white:#fff;--pink:#F1C8EE;--lilac:#D9D1F4;--yellow:#EBDA0C;--grey:#E2E2DC;--soft:#F5F5F1;--red:#E5484D;--green:#1E9E6A}
html,body{margin:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:13px;min-height:100vh;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rb{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #E6E6E0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:.15s;flex:none}
.rb:hover{border-color:#bdbdb5}
.rb.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.rb .rd{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid #fff}
.rb .tip{position:absolute;left:46px;background:var(--ink);color:#fff;font-size:11px;padding:4px 8px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:20}
.rb:hover .tip{opacity:1}
.pill{height:38px;border-radius:19px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E6E6E0;cursor:pointer;white-space:nowrap;font-size:12.5px}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill .n{min-width:20px;height:20px;border-radius:10px;padding:0 6px;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;background:#ECECE6;color:#55554f;font-weight:600}
.pill.on .n{background:var(--yellow);color:var(--ink)}
.pill.y{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}

/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 28px 0 26px;gap:20px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:21px;letter-spacing:-.6px}
.lm{width:30px;height:30px;border-radius:10px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.lm svg{width:18px;height:18px;stroke:var(--yellow);stroke-width:2.6}
.tnav{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.tnav a.t{padding:0 14px;height:38px;display:inline-flex;align-items:center;border-radius:19px;font-size:12.5px;white-space:nowrap}
.tnav a.t.on{background:var(--ink);color:#fff}
.tnav a.t:not(.on):hover{background:#E2E2DB}
.rail{position:fixed;left:24px;top:200px;display:flex;flex-direction:column;gap:12px;z-index:5}
#view{padding:0 28px 40px 86px}
.tnav a.t[href="#/mascot"]{}

/* title row */
.trow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:22px 0 18px;flex-wrap:wrap}
.tl{display:flex;gap:14px;align-items:flex-start}
.tl .ttl small{display:block;color:var(--mut);font-size:12px}
.tl .ttl h1{margin:2px 0 14px;font-size:27px;font-weight:600;letter-spacing:-.7px}
.frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stats{display:flex;gap:0;align-items:flex-end}
.stat{width:170px;padding:0 14px 12px;border-bottom:3px solid var(--lilac)}
.stat small{display:block;color:var(--mut);font-size:11px;line-height:1.3}
.stat b{display:block;font-size:24px;font-weight:500;margin-top:4px;letter-spacing:-.5px}
.stat.y{border-color:var(--yellow);border-bottom-width:5px}
.stat.g{border-color:#CFCFC8}
.stat.pk{border-color:var(--pink)}
.sicons{display:flex;gap:8px;margin-left:16px;padding-bottom:12px}

/* ask bar */
.ask{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E6E6E0;border-radius:22px;height:44px;padding:0 6px 0 16px;max-width:560px;flex:1;min-width:260px}
.ask svg{color:#7a62d8}
.ask input{border:0;outline:0;flex:1;background:none;font-size:12.5px}
.ask .chip{font-size:11px;background:var(--lilac);border-radius:14px;padding:5px 10px;white-space:nowrap;cursor:pointer;border:0}
.askres{font-size:11.5px;color:#5a5a54;margin:-8px 0 12px 2px;min-height:14px}
.askres b{font-weight:600}
.askres button{border:0;background:none;text-decoration:underline;cursor:pointer;font-size:11.5px;color:#5a5a54}

/* board */
.board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:14px;align-items:start}
.col{min-width:0;display:flex;flex-direction:column;gap:12px;min-height:200px;border-radius:24px;transition:background .15s;padding-bottom:6px}
.col.over{background:rgba(20,20,20,.04);outline:2px dashed #c9c9c1;outline-offset:4px}
.ch{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px;border-bottom:3px solid var(--line);margin-bottom:2px}
.ch b{font-size:12px;font-weight:600}
.ch span{font-size:11px;color:var(--mut)}
.ch.pink{border-color:var(--pink)}.ch.lilac{border-color:var(--lilac)}.ch.white{border-color:#cfc7ef}.ch.yellow{border-color:var(--yellow);border-bottom-width:5px}.ch.grey{border-color:#CFCFC8}
.card{border-radius:24px;background:#fff;padding:15px 15px 14px;position:relative;cursor:pointer;transition:transform .15s,box-shadow .15s;user-select:none}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.07)}
.card.pink{background:var(--pink)}.card.lilac{background:var(--lilac)}.card.yellow{background:var(--yellow)}.card.grey{background:var(--grey)}
.card.drag{opacity:.4}
.card.newc{animation:pop 1.3s}
@keyframes pop{0%{transform:scale(.92);box-shadow:0 0 0 6px rgba(235,218,12,.8)}100%{transform:none;box-shadow:none}}
.card h4{margin:0;font-size:12.5px;font-weight:600;line-height:1.3;padding-right:34px;min-height:32px}
.card .more{position:absolute;top:11px;right:11px;width:28px;height:28px;border-radius:50%;background:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;letter-spacing:1px;font-weight:700;font-size:11px;color:#444}
.card:not(.pink):not(.lilac):not(.yellow):not(.grey) .more{border:1px solid #EAEAE4}
.card .bm{position:absolute;right:13px;top:52px;width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.card .bm svg{width:13px;height:13px;fill:var(--ink);stroke:var(--ink)}
.card .bm.red svg{fill:var(--red);stroke:var(--red)}
.dash{display:flex;gap:4px;margin:12px 0 16px;align-items:center;padding-right:36px}
.dash i{height:3px;border-radius:2px;background:rgba(20,20,20,.13);flex:1}
.dash i.f{background:var(--ink)}
.dash i.w{flex:2}
.dash i.late{background:var(--red)}
.who{display:flex;align-items:center;gap:10px}
.av{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;flex:none;border:2px solid #fff}
.av.sm{width:28px;height:28px;font-size:10px;border-width:1.5px}
.av.lg{width:52px;height:52px;font-size:16px}
.who b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{display:block;font-size:10.5px;color:#55554f;margin-top:1px}
.who div{min-width:0}
.meta{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.tg{font-size:10px;padding:3px 8px;border-radius:10px;background:rgba(255,255,255,.7);color:#3a3a36;white-space:nowrap}
.card:not(.pink):not(.lilac):not(.yellow):not(.grey) .tg{background:#F1F1EC}
.tg.r{background:#FFE1E1 !important;color:#B42A2F}
.tg.ai{background:#fff !important;color:#5b45c4}
.hatch{border-radius:24px;min-height:150px;background:repeating-linear-gradient(135deg,#e4e4de 0 1.5px,transparent 1.5px 11px);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:16px}
.hatch .rb{width:40px;height:40px}
.hatch p{width:100%;text-align:center;margin:0;font-size:11px;color:#6b6b65}
.menu{position:absolute;z-index:30;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.14);padding:6px;min-width:190px}
.menu button{display:flex;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:12px;gap:8px;align-items:center}
.menu button:hover{background:#F2F2EC}
.menu hr{border:0;border-top:1px solid #EEE;margin:4px 6px}
.menu small{display:block;padding:6px 10px 2px;color:var(--mut);font-size:10.5px}

/* drawer */
.drawer{position:fixed;inset:0;z-index:40;pointer-events:none}
.dback{position:absolute;inset:0;background:rgba(20,20,20,.25);opacity:0;transition:.2s;backdrop-filter:blur(2px)}
.dpanel{position:absolute;right:0;top:0;bottom:0;width:min(1000px,100vw);background:var(--bg);border-radius:30px 0 0 30px;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;overflow:hidden}
.drawer.open{pointer-events:auto}
.drawer.open .dback{opacity:1}
.drawer.open .dpanel{transform:none}
.dh{display:flex;align-items:center;gap:14px;padding:22px 26px 16px;flex-wrap:wrap}
.dh .tt{flex:1;min-width:200px}
.dh small{color:var(--mut);font-size:11.5px}
.dh h2{margin:2px 0 0;font-size:21px;font-weight:600;letter-spacing:-.4px}
.sp{font-size:11px;padding:6px 12px;border-radius:14px;font-weight:500}
.sp.pink{background:var(--pink)}.sp.lilac{background:var(--lilac)}.sp.white{background:#fff}.sp.yellow{background:var(--yellow)}.sp.grey{background:var(--grey)}
.dbody{flex:1;min-height:0;display:grid;grid-template-columns:1fr 330px;gap:14px;padding:0 26px 22px}
.conv{background:#fff;border-radius:26px;display:flex;flex-direction:column;min-height:0}
.ctop{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid #EFEFEA}
.ctop b{font-weight:600}
.ctop small{display:block;color:var(--mut);font-size:11px}
.msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.m{max-width:80%;display:flex;flex-direction:column;gap:3px}
.m .bb{padding:11px 14px;border-radius:18px 18px 18px 6px;background:#F1F1EC;font-size:12.5px;line-height:1.5}
.m .mh{font-size:10.5px;color:var(--mut);display:flex;gap:6px;align-items:center;padding:0 4px}
.m .mh b{color:#3a3a36;font-weight:600}
.m.ai .bb{background:var(--lilac)}
.m.ag{align-self:flex-end;align-items:flex-end}
.m.ag .bb{background:var(--ink);color:#fff;border-radius:18px 18px 6px 18px}
.m.note{align-self:flex-end;align-items:flex-end}
.m.note .bb{background:#FFF7B8;border:1px dashed #d8c600;border-radius:18px 18px 6px 18px}
.aic{font-size:9px;font-weight:700;background:var(--ink);color:var(--yellow);border-radius:6px;padding:1px 5px}
.sys{align-self:center;font-size:10.5px;color:var(--mut);background:#F5F5F1;border-radius:12px;padding:4px 10px;text-align:center;max-width:90%}
.typing .bb{display:flex;gap:4px;padding:13px 16px}
.typing i{width:5px;height:5px;border-radius:50%;background:#888;animation:bo 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bo{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.assist{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 0;border-top:1px solid #EFEFEA;align-items:center}
.assist .x{height:30px;border-radius:15px;border:1px solid #E6E6E0;background:#fff;padding:0 11px;font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.assist .x:hover{border-color:#aaa}
.assist .x.ai{background:var(--lilac);border-color:var(--lilac)}
.mode{display:flex;background:#F1F1EC;border-radius:15px;padding:2px;margin-left:auto}
.mode button{border:0;background:none;border-radius:13px;font-size:11px;padding:5px 10px;cursor:pointer}
.mode button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.comp{display:flex;align-items:flex-end;gap:10px;margin:10px 14px 14px;background:#F5F5F1;border-radius:20px;padding:8px 8px 8px 16px}
.comp.note{background:#FFF7B8}
.comp textarea{flex:1;border:0;outline:0;background:none;resize:none;font-size:12.5px;line-height:1.5;min-height:22px;max-height:140px;padding:4px 0}
.send{width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.dn{font-size:10.5px;color:#5b45c4;padding:6px 18px 0;display:none}
.dn.show{display:block}
.copi{overflow-y:auto;display:flex;flex-direction:column;gap:12px;min-height:0;padding-bottom:4px}
.tile{border-radius:24px;padding:16px;background:#fff}
.tile.lilac{background:var(--lilac)}.tile.yellow{background:var(--yellow)}.tile.grey{background:var(--grey)}.tile.pink{background:var(--pink)}
.tile h5{margin:0 0 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:#3a3a36;display:flex;align-items:center;gap:6px}
.tile p{margin:0;font-size:12px;line-height:1.55}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:11.5px;margin:0}
.kv dt{color:#5a5a54}.kv dd{margin:0;text-align:right;font-weight:500}
.bar{height:4px;border-radius:2px;background:rgba(20,20,20,.12);margin:8px 0 2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink)}
.st{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(20,20,20,.1);font-size:12px}
.st:first-of-type{border-top:0}
.st span{flex:1}
.st small{display:block;font-size:10px;color:#4a4a44;opacity:.8}
.st button{border:0;background:var(--ink);color:#fff;border-radius:14px;font-size:11px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.st button.gh{background:#fff;color:var(--ink)}
.st button:disabled{background:rgba(20,20,20,.15);color:#555;cursor:default}
.guard{font-size:10.5px;line-height:1.45;margin-top:8px;opacity:.85}
.art{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:12px;cursor:pointer}
.art .rb{width:30px;height:30px}
.art:hover span{text-decoration:underline}

/* pages */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:22px 0 18px;flex-wrap:wrap}
.ph small{color:var(--mut);font-size:12px}
.ph h1{margin:2px 0 0;font-size:27px;font-weight:600;letter-spacing:-.7px}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}
.kpi{border-radius:24px;padding:16px 18px;background:#fff}
.kpi:nth-child(1){background:var(--yellow)}.kpi:nth-child(2){background:var(--lilac)}.kpi:nth-child(3){background:var(--pink)}
.kpi small{font-size:11px;color:#3a3a36}
.kpi b{display:block;font-size:26px;font-weight:500;letter-spacing:-.6px;margin:6px 0 2px}
.kpi em{font-style:normal;font-size:10.5px;color:#3a3a36}
.box{background:#fff;border-radius:26px;padding:20px 22px;min-width:0}
.box h2{margin:0 0 3px;font-size:15px;font-weight:600}
.box .sub{margin:0 0 14px;font-size:11.5px;color:var(--mut)}
.g2{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;font-weight:500;color:var(--mut);font-size:10.5px;padding:8px;border-bottom:1px solid #EFEFEA;white-space:nowrap}
td{padding:10px 8px;border-bottom:1px solid #F3F3EE;vertical-align:middle}
tr:last-child td{border-bottom:0}
.hb{height:6px;width:90px;border-radius:3px;background:#EFEFEA;display:inline-block;vertical-align:middle;margin-right:8px;overflow:hidden}
.hb i{display:block;height:100%;background:var(--ink)}
.hb i.lo{background:#E9A23B}
.rc{border-radius:20px;background:var(--soft);padding:14px 16px;margin-bottom:10px}
.rc h3{margin:0 0 4px;font-size:12.5px;font-weight:600}
.rc p{margin:0 0 8px;font-size:11.5px;color:#55554f;line-height:1.5}
.rc .rm{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lg{display:flex;gap:14px;font-size:10.5px;color:var(--mut);margin-top:6px}
.lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.btn{height:32px;border-radius:16px;border:1px solid #E6E6E0;background:#fff;padding:0 13px;font-size:11.5px;cursor:pointer;white-space:nowrap}
.btn.k{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.sw{position:relative;width:38px;height:22px;flex:none;display:inline-block}
.sw input{opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:#D6D6CF;border-radius:11px;cursor:pointer;transition:.15s}
.sw span:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.15s}
.sw input:checked+span{background:var(--ink)}
.sw input:checked+span:before{transform:translateX(16px);background:var(--yellow)}
.sw input:disabled+span{opacity:.55;cursor:not-allowed}
.srow{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid #F0F0EB}
.srow:last-child{border:0}
.srow .t{flex:1}.srow .t b{display:block;font-weight:500;font-size:13px}.srow .t small{color:var(--mut);font-size:11.5px}
input[type=range]{accent-color:#141414;width:180px}
select{height:32px;border-radius:16px;border:1px solid #E6E6E0;padding:0 10px;background:#fff}
.tagp{font-size:10.5px;padding:4px 10px;border-radius:12px;white-space:nowrap;background:#F1F1EC}
.tagp.live{background:#DDF3E8;color:#14724c}.tagp.test{background:var(--yellow)}.tagp.hand{background:#FFE1E1;color:#B42A2F}.tagp.run{background:var(--lilac)}.tagp.ship{background:#DDF3E8;color:#14724c}.tagp.stop{background:var(--grey)}
.exp{display:grid;grid-template-columns:1fr auto;gap:10px;padding:16px 0;border-bottom:1px solid #F0F0EB}
.exp:last-child{border:0}
.exp b{font-weight:600}
.vs{display:flex;gap:18px;margin-top:8px;font-size:12px;flex-wrap:wrap;align-items:center}
.vs b{font-size:16px}
.up{color:var(--green)}
.feed{display:flex;flex-direction:column}
.fe{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #F0F0EB;align-items:flex-start}
.fe:last-child{border:0}
.fe .dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.fe .dot svg{width:14px;height:14px}
.fe p{margin:0;font-size:12.5px;flex:1}
.fe small{color:var(--mut);font-size:11px;white-space:nowrap}
.tw{overflow-x:auto}
.modal{position:fixed;inset:0;background:rgba(20,20,20,.3);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.mbox{background:#fff;border-radius:28px;padding:24px 26px;width:min(560px,100%);max-height:85vh;overflow-y:auto}
.mbox h3{margin:0 0 4px;font-size:18px;font-weight:600}
.mbox p,.mbox li{font-size:12.5px;line-height:1.6}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:20px;font-size:12px;opacity:0;transition:.2s;z-index:80;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.empty{font-size:11.5px;color:var(--mut);text-align:center;padding:24px 10px}
kbd{font-family:inherit;font-size:10px;border:1px solid #ddd;border-radius:4px;padding:0 4px;background:#fafafa}

@media (max-width:1250px){.board{grid-template-columns:repeat(5,230px);overflow-x:auto;padding-bottom:10px}.kpis{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr}.stat{width:140px}}
@media (max-width:900px){.dbody{grid-template-columns:1fr;overflow-y:auto}.conv{min-height:520px}.copi{overflow:visible}}
@media (max-width:760px){
 .hdr{padding:14px 14px 0;flex-direction:column;align-items:flex-start;gap:12px}
 .tnav{width:100%}
 .rail{display:none}
 #view{padding:0 14px 40px}
 .trow{margin-top:16px}
 .stats{width:100%;overflow-x:auto}
 .stat{width:auto;flex:1;min-width:110px;padding:0 8px 10px}
 .stat b{font-size:20px}
 .sicons{display:none}
 .board{grid-template-columns:repeat(5,82vw);scroll-snap-type:x mandatory}
 .col{scroll-snap-align:start}
 .kpis{grid-template-columns:1fr 1fr}
 .dpanel{border-radius:0}
 .dh{padding:16px 14px 12px}
 .dbody{padding:0 14px 16px}
 .m{max-width:92%}
 .ask{min-width:0;width:100%}
}

svg.chart{stroke:none}
svg.chart polyline{stroke:#141414}
.sugg{height:32px;border-radius:16px;border:0;background:#fff;padding:0 13px;font-size:12px;cursor:pointer;white-space:nowrap}
.sugg:hover{background:var(--lilac)}
@media (max-width:760px){.frow .sugg{font-size:11px;height:28px;padding:0 10px}}

/* ---------- mascot ---------- */
.mascot{display:inline-block;vertical-align:middle;overflow:visible}
.mfloat{animation:mfl 3.2s ease-in-out infinite;transform-origin:center}
@keyframes mfl{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.meyes{animation:blink 4.5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.mspark{animation:tw 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes tw{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.6}}
.m .mh .mascot .mfloat,.tile h5 .mascot .mfloat,.askm .mascot .mfloat{animation:none}
.m .mh .mascot{margin-right:2px}
.askm{display:flex;margin-left:-8px}
.empty .mascot{margin-bottom:4px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mcard{border-radius:28px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:8px;color:#141414}
.mcard.pink{background:var(--pink)}.mcard.yellow{background:var(--yellow)}.mcard.lilac{background:var(--lilac)}
.mtop{display:flex;justify-content:space-between;align-items:center}
.mname{font-size:22px;font-weight:600;letter-spacing:-.5px}
.mhero{display:flex;justify-content:center;padding:10px 0;background:rgba(255,255,255,.45);border-radius:22px}
.mtag{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;opacity:.7;margin-top:4px}
.mcard p{margin:0;font-size:12.5px;line-height:1.5;flex:1}
.mpair{display:flex;gap:8px;align-items:center;margin:4px 0 6px;flex-wrap:wrap}
.mpair>span{border-radius:16px;display:inline-flex;align-items:center;justify-content:center}
.mlight{background:#F5F5F1;width:60px;height:60px}
.mdark{background:#141414;width:60px;height:60px}
.mchip{background:#fff;height:34px;padding:0 10px;gap:5px;font-size:11px}
.mchip b{font-weight:600}
.mcard .btn{align-self:flex-start;color:#141414;background:#fff;border-color:#fff}
.mcard .btn.k{background:#141414;color:#fff;border-color:#141414}
.mspots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mspot{background:var(--soft);border-radius:22px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:170px}
.mspot>small{color:var(--mut);font-size:11px}
.mspot .m{max-width:100%}
.mwave{display:flex;align-items:center;gap:10px}
.mbub{background:var(--white);border-radius:18px 18px 18px 6px;padding:10px 13px;font-size:12px;line-height:1.5}
.draftbox{background:var(--white);border-radius:16px;padding:12px 14px;margin-top:10px;font-size:12px;line-height:1.55}
.mutd{color:#55554f;max-width:320px}
.tg.soft{background:#F1F1EC}
.mdark .mbody{stroke:#EBDA0C;stroke-width:2.5}
@media (max-width:1000px){.mgrid,.mspots{grid-template-columns:1fr}}

/* ---------- dark mode ---------- */
html[data-theme=dark]{--bg:#111110;--ink:#F2F2EE;--mut:#9A9A93;--line:#2E2E2B;--soft:#1F1F1D;--white:#1B1B1A;--grey:#34342F;--pink:#E7B9E4;--lilac:#C7BDF2;--yellow:#E6D40C;color-scheme:dark}
html[data-theme=dark] body{background:var(--bg);color:var(--ink)}
html[data-theme=dark] .rb,html[data-theme=dark] .pill,html[data-theme=dark] .card,html[data-theme=dark] .ask,html[data-theme=dark] .sugg,html[data-theme=dark] .box,html[data-theme=dark] .kpi,html[data-theme=dark] .conv,html[data-theme=dark] .tile,html[data-theme=dark] .menu,html[data-theme=dark] .mbox,html[data-theme=dark] .btn,html[data-theme=dark] select,html[data-theme=dark] .assist .x,html[data-theme=dark] .mode button.on,html[data-theme=dark] .st button.gh,html[data-theme=dark] .card .more,html[data-theme=dark] .sp.white{background:var(--white);border-color:var(--line);color:var(--ink)}
html[data-theme=dark] .card:not(.pink):not(.lilac):not(.yellow):not(.grey) .more{border-color:#333330}
html[data-theme=dark] .rb:hover,html[data-theme=dark] .btn:hover{border-color:#55554f}
html[data-theme=dark] .tnav a.t:not(.on):hover{background:#222220}
html[data-theme=dark] .tnav a.t.on,html[data-theme=dark] .pill.on,html[data-theme=dark] .rb.dark,html[data-theme=dark] .btn.k,html[data-theme=dark] .send{background:var(--yellow);color:#141414;border-color:var(--yellow)}
html[data-theme=dark] .pill.on .n{background:#141414;color:var(--yellow)}
html[data-theme=dark] .pill .n{background:#2A2A27;color:#C9C9C2}
html[data-theme=dark] .lm{background:var(--yellow)}
html[data-theme=dark] .lm svg{stroke:#141414}
html[data-theme=dark] .rb .rd{border-color:var(--white)}
html[data-theme=dark] .rb .tip,html[data-theme=dark] .toast{background:#F2F2EE;color:#141414}
html[data-theme=dark] .ask input::placeholder,html[data-theme=dark] textarea::placeholder{color:#77776f}
html[data-theme=dark] .askres,html[data-theme=dark] .askres button{color:#B5B5AE}
html[data-theme=dark] .ch.grey{border-color:#3A3A36}
html[data-theme=dark] .ch.white{border-color:#8E80D6}
/* pastel surfaces keep dark text */
html[data-theme=dark] .card.pink,html[data-theme=dark] .card.lilac,html[data-theme=dark] .card.yellow,html[data-theme=dark] .tile.lilac,html[data-theme=dark] .tile.yellow,html[data-theme=dark] .tile.pink,html[data-theme=dark] .kpi:nth-child(-n+3),html[data-theme=dark] .sp.pink,html[data-theme=dark] .sp.lilac,html[data-theme=dark] .sp.yellow,html[data-theme=dark] .tagp.test,html[data-theme=dark] .tagp.run,html[data-theme=dark] .fe .dot,html[data-theme=dark] .m.ai .bb,html[data-theme=dark] .sugg:hover,html[data-theme=dark] .assist .x.ai,html[data-theme=dark] .pill.y,html[data-theme=dark] .ask .chip{color:#141414}
html[data-theme=dark] .assist .x.ai{background:var(--lilac);border-color:var(--lilac)}
html[data-theme=dark] .pill.y{background:var(--yellow);border-color:var(--yellow)}
html[data-theme=dark] .kpi:nth-child(1){background:var(--yellow)}html[data-theme=dark] .kpi:nth-child(2){background:var(--lilac)}html[data-theme=dark] .kpi:nth-child(3){background:var(--pink)}
html[data-theme=dark] .kpi small,html[data-theme=dark] .kpi em{color:inherit;opacity:.8}
html[data-theme=dark] .tile.lilac{background:var(--lilac)}html[data-theme=dark] .tile.yellow{background:var(--yellow)}html[data-theme=dark] .tile.grey{background:var(--grey)}
html[data-theme=dark] .card.pink .dash i,html[data-theme=dark] .card.lilac .dash i,html[data-theme=dark] .card.yellow .dash i{background:rgba(20,20,20,.16)}
html[data-theme=dark] .card.pink .dash i.f,html[data-theme=dark] .card.lilac .dash i.f,html[data-theme=dark] .card.yellow .dash i.f{background:#141414}
html[data-theme=dark] .dash i{background:rgba(255,255,255,.13)}
html[data-theme=dark] .dash i.late{background:var(--red) !important}
html[data-theme=dark] .who small{color:var(--mut)}
html[data-theme=dark] .card.pink .who small,html[data-theme=dark] .card.lilac .who small,html[data-theme=dark] .card.yellow .who small{color:#3a3a36}
html[data-theme=dark] .card.pink .more,html[data-theme=dark] .card.lilac .more,html[data-theme=dark] .card.yellow .more{background:#fff;color:#333;border:0}
html[data-theme=dark] .card .bm{background:#fff}
html[data-theme=dark] .card .bm svg{fill:#141414;stroke:#141414}
html[data-theme=dark] .card .bm.red svg{fill:var(--red);stroke:var(--red)}
html[data-theme=dark] .card:not(.pink):not(.lilac):not(.yellow):not(.grey) .tg,html[data-theme=dark] .card.grey .tg,html[data-theme=dark] .tg.soft{background:#2A2A27;color:#C9C9C2}
html[data-theme=dark] .tg.ai{background:#2A2A27 !important;color:#B9AEF5}
html[data-theme=dark] .card.lilac .tg.ai,html[data-theme=dark] .card.pink .tg.ai{background:#fff !important;color:#5b45c4}
html[data-theme=dark] .card:hover{box-shadow:0 10px 24px rgba(0,0,0,.4)}
html[data-theme=dark] .av{border-color:rgba(255,255,255,.85)}
html[data-theme=dark] .hatch{background:repeating-linear-gradient(135deg,#2A2A27 0 1.5px,transparent 1.5px 11px)}
html[data-theme=dark] .hatch p,html[data-theme=dark] .empty{color:var(--mut)}
html[data-theme=dark] .col.over{background:rgba(255,255,255,.04);outline-color:#4a4a45}
/* drawer */
html[data-theme=dark] .dback{background:rgba(0,0,0,.55)}
html[data-theme=dark] .ctop,html[data-theme=dark] .assist{border-color:var(--line)}
html[data-theme=dark] .m .bb{background:#262624}
html[data-theme=dark] .m.ai .bb{background:var(--lilac)}
html[data-theme=dark] .m.ag .bb{background:#F2F2EE;color:#141414}
html[data-theme=dark] .m.note .bb{background:#3A3510;border-color:#8a7f00;color:#F5EDA8}
html[data-theme=dark] .m .mh b{color:#D9D9D2}
html[data-theme=dark] .aic{background:#141414;color:var(--yellow)}
html[data-theme=dark] .sys{background:#1F1F1D;color:#8f8f88}
html[data-theme=dark] .mode{background:#262624}
html[data-theme=dark] .comp{background:#262624}
html[data-theme=dark] .comp.note{background:#3A3510}
html[data-theme=dark] .dn{color:#B9AEF5}
html[data-theme=dark] .typing i{background:#aaa}
html[data-theme=dark] .tile h5{color:var(--mut)}
html[data-theme=dark] .tile.lilac h5,html[data-theme=dark] .tile.yellow h5,html[data-theme=dark] .tile.pink h5{color:#3a3a36}
html[data-theme=dark] .kv dt{color:var(--mut)}
html[data-theme=dark] .tile.lilac .kv dt,html[data-theme=dark] .tile.yellow .kv dt{color:#4a4a44}
html[data-theme=dark] .tile.lilac .bar,html[data-theme=dark] .tile.yellow .bar{background:rgba(20,20,20,.15)}
html[data-theme=dark] .tile.lilac .bar i{background:#141414}
html[data-theme=dark] .tile.grey .st,html[data-theme=dark] .tile .st{border-color:rgba(255,255,255,.08)}
html[data-theme=dark] .tile.yellow .st{border-color:rgba(20,20,20,.12)}
html[data-theme=dark] .tile.yellow .st small{color:#3a3a36}
html[data-theme=dark] .tile.yellow .st button{background:#141414;color:#fff}
html[data-theme=dark] .tile.yellow .st button.gh{background:#fff;color:#141414}
html[data-theme=dark] .tile.yellow .st button:disabled{background:rgba(20,20,20,.15);color:#444}
html[data-theme=dark] .art .rb{background:#262624}
/* pages */
html[data-theme=dark] th{border-color:var(--line)}
html[data-theme=dark] td{border-color:#232321}
html[data-theme=dark] .hb{background:#2A2A27}
html[data-theme=dark] .hb i{background:#F2F2EE}
html[data-theme=dark] .hb i.lo{background:#E9A23B}
html[data-theme=dark] .rc p,html[data-theme=dark] .mutd{color:#A9A9A2}
html[data-theme=dark] .tagp{background:#2A2A27;color:#C9C9C2}
html[data-theme=dark] .tagp.test{background:var(--yellow)}html[data-theme=dark] .tagp.run{background:var(--lilac)}
html[data-theme=dark] .tagp.live,html[data-theme=dark] .tagp.ship{background:#123B2A;color:#6FD3A6}
html[data-theme=dark] .tagp.hand{background:#3D1A1C;color:#FF9A9E}
html[data-theme=dark] .srow,html[data-theme=dark] .exp,html[data-theme=dark] .fe{border-color:var(--line)}
html[data-theme=dark] .sw span{background:#3A3A36}
html[data-theme=dark] .sw input:checked+span{background:var(--yellow)}
html[data-theme=dark] .sw input:checked+span:before{background:#141414}
html[data-theme=dark] input[type=range]{accent-color:#E6D40C}
html[data-theme=dark] .up{color:#6FD3A6}
html[data-theme=dark] kbd{background:#262624;border-color:#3a3a36}
html[data-theme=dark] svg.chart polyline{stroke:#F2F2EE}
html[data-theme=dark] svg.chart circle{fill:#F2F2EE}
html[data-theme=dark] svg.chart text{fill:#B5B5AE}
html[data-theme=dark] svg.chart line{stroke:#2A2A27}
html[data-theme=dark] .modal{background:rgba(0,0,0,.55)}
/* mascots in dark */
html[data-theme=dark] .mb-bubbo .mbody{stroke:#EBDA0C;stroke-width:2.5}
html[data-theme=dark] .mcard .mb-bubbo .mbody,html[data-theme=dark] .tile.lilac .mb-bubbo .mbody,html[data-theme=dark] .mlight .mb-bubbo .mbody{stroke-width:0}
html[data-theme=dark] .mcard .mdark .mb-bubbo .mbody{stroke-width:2.5}
html[data-theme=dark] .mb-pip path[stroke="#141414"],html[data-theme=dark] .mb-pip rect,html[data-theme=dark] .mb-pip ellipse[cy="105"],html[data-theme=dark] .mb-pip circle[cx="75"]{}
html[data-theme=dark] .mlight{background:#F5F5F1}
html[data-theme=dark] .mchip{background:#fff;color:#141414}
html[data-theme=dark] .mspot .m.ai .bb{color:#141414}
html[data-theme=dark] body,html[data-theme=dark] .card,html[data-theme=dark] .box,html[data-theme=dark] .tile,html[data-theme=dark] .rb,html[data-theme=dark] .pill{transition:background-color .25s,color .25s,border-color .25s}
html[data-theme=dark] .card.pink{background:var(--pink)}html[data-theme=dark] .card.lilac{background:var(--lilac)}html[data-theme=dark] .card.yellow{background:var(--yellow)}html[data-theme=dark] .card.grey{background:var(--grey)}
html[data-theme=dark] .tile.pink{background:var(--pink)}
html[data-theme=dark] .mcard .btn{background:#fff;color:#141414;border-color:#fff}
html[data-theme=dark] .mcard .btn.k{background:#141414;color:#fff;border-color:#141414}
html[data-theme=dark] .mcard .btn:disabled{opacity:.6}
@media (max-width:760px){.ask{flex:1 1 100%}}

/* ---------- live simulation ---------- */
.simlbl{font-size:11.5px;color:var(--mut);margin-right:4px}
.simtabs{display:none}
.simg{display:grid;grid-template-columns:380px 1fr;gap:22px;align-items:start}
.lbl{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut);margin:0 0 10px 6px}
.simphone{position:sticky;top:16px}
.phone{width:360px;height:740px;border-radius:54px;background:#141414;padding:11px;box-shadow:0 30px 60px rgba(0,0,0,.18),inset 0 0 0 2px #2b2b2b;position:relative;margin:0 auto}
.island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:104px;height:30px;border-radius:16px;background:#000;z-index:3}
.screen{border-radius:44px;background:#F6F6F1;height:100%;overflow:hidden;display:flex;flex-direction:column;position:relative;color:#141414;font-size:13px}
.pstat{display:flex;justify-content:space-between;align-items:center;padding:16px 28px 6px;font-size:13px;height:48px;flex:none}
.pstat span{font-size:9px;letter-spacing:1px}
.khome{flex:1;overflow-y:auto;padding:8px 18px 14px;display:flex;flex-direction:column;gap:14px}
.khd{display:flex;align-items:center;gap:10px;margin-top:4px}
.khd small{display:block;font-size:11px;color:#77776f}.khd b{font-size:17px}
.khd>div{flex:1}
.kav{width:38px;height:38px;border-radius:50%;background:#E8566C;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.kic{width:36px;height:36px;border-radius:50%;border:0;background:#fff;font-weight:700;cursor:pointer;color:#141414}
.kbal{background:#10231C;color:#fff;border-radius:24px;padding:18px}
.kbal small{color:#B8CDBF;font-size:11px}.kbal b{display:block;font-size:30px;font-weight:600;letter-spacing:-.8px;margin:4px 0 14px;color:#D4F25C}
.kacts{display:flex;gap:6px}.kacts span{flex:1;text-align:center;background:rgba(255,255,255,.1);border-radius:14px;padding:8px 0;font-size:11px}
.klist{background:#fff;border-radius:22px;padding:12px 14px}
.klist>small{font-size:11px;color:#77776f}
.kit{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F0F0EB;font-size:12px}
.kit:last-child{border:0}.kit>div{flex:1;min-width:0}.kit b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit em{font-style:normal;font-size:10.5px;color:#77776f}
.kdot{width:30px;height:30px;border-radius:50%;background:#EDF5D5;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.kx{color:#B42A2F;text-decoration:line-through}
.khelp{display:flex;align-items:center;gap:10px;border:0;background:#D4F25C;border-radius:20px;padding:10px 14px;font-weight:600;cursor:pointer;color:#10231C;font-size:13px}
.ptab{display:flex;justify-content:space-around;padding:10px 0 22px;background:#fff;font-size:10.5px;color:#8a8a83;flex:none}
.ptab span{cursor:pointer}.ptab .on{color:#10231C;font-weight:600}
.phd{display:flex;align-items:center;gap:10px;padding:6px 16px 10px;border-bottom:1px solid #E8E8E2;background:#fff;flex:none}
.phd button{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;padding:0 4px 4px 0;color:#141414}
.phd b{display:block;font-size:13.5px}.phd small{font-size:10.5px;color:#77776f;display:flex;align-items:center;gap:4px}
.phd small i.on{width:7px;height:7px;border-radius:50%;background:#1E9E6A;display:inline-block}
.pav{width:30px;height:30px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.pmsgs .pav{width:26px;height:26px;background:none}
.pav.ag{background:#10231C;color:#D4F25C;font-weight:700;font-size:12px}
.pmsgs .pav.ag{background:#10231C;width:26px;height:26px;font-size:11px}
.pmsgs{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.pm{display:flex;gap:6px;max-width:88%;align-items:flex-end}
.pm.me{align-self:flex-end;flex-direction:column;align-items:flex-end}
.pm small{font-size:9.5px;color:#8a8a83;padding:2px 6px;display:block}
.pb{background:#fff;border-radius:18px 18px 18px 6px;padding:9px 12px;font-size:12.5px;line-height:1.45;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pb.ai{background:#E9E4FB}
.pm.me .pb{background:#10231C;color:#fff;border-radius:18px 18px 6px 18px}
.pb.typing{display:flex;gap:4px;padding:12px 14px}
.pb.typing i{width:5px;height:5px;border-radius:50%;background:#888;animation:bo 1.1s infinite}
.pb.typing i:nth-child(2){animation-delay:.15s}.pb.typing i:nth-child(3){animation-delay:.3s}
.pn{align-self:center;text-align:center;font-size:10.5px;color:#5a5a54;background:#ECECE5;border-radius:12px;padding:6px 10px;max-width:92%;line-height:1.4}
.prate{align-self:center;background:#fff;border-radius:18px;padding:12px 16px;text-align:center;font-size:12px}
.prate b{display:block;margin-bottom:6px}
.stars button{border:0;background:none;font-size:22px;color:#D9D9D2;cursor:pointer;padding:0 2px}
.stars:hover button{color:#EBDA0C}.stars button:hover~button{color:#D9D9D2}
.pq{display:flex;gap:6px;overflow-x:auto;padding:0 12px 8px;flex:none;scrollbar-width:none}
.pq button{white-space:nowrap;border:1px solid #10231C;background:#fff;border-radius:16px;padding:7px 11px;font-size:11.5px;cursor:pointer;color:#10231C}
.pin{display:flex;gap:8px;padding:8px 12px 6px;background:#fff;border-top:1px solid #E8E8E2;flex:none}
.pin input{flex:1;border:0;background:#F1F1EC;border-radius:18px;padding:9px 14px;outline:0;font-size:12.5px;color:#141414}
.pin button{width:36px;height:36px;border-radius:50%;border:0;background:#10231C;color:#D4F25C;font-size:16px;font-weight:700;cursor:pointer}
.pbar{height:22px;background:#fff;position:relative;flex:none}
.pbar:after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:110px;height:4px;border-radius:2px;background:#141414}
.sdesk{background:var(--white);border-radius:28px;padding:16px;min-height:560px}
html:not([data-theme=dark]) .sdesk{background:#fff}
.sdh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sdh>div{flex:1;min-width:180px}.sdh small{color:var(--mut);font-size:11px}.sdh h3{margin:2px 0 0;font-size:18px;font-weight:600;letter-spacing:-.3px}
.sdb{display:grid;grid-template-columns:1fr 290px;gap:12px}
.sdb .conv{background:var(--soft);height:560px}
.sdb .copi{max-height:560px}
.sdb .tile{background:var(--soft)}
.sdb .tile.lilac{background:var(--lilac)}.sdb .tile.yellow{background:var(--yellow)}.sdb .tile.grey{background:var(--grey)}
.aih{display:flex;align-items:center;gap:6px;font-size:11px;color:#5b45c4;width:100%;margin-bottom:2px}
.sdempty{min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.sdempty b{font-size:15px}.sdempty p{max-width:340px;color:var(--mut);font-size:12.5px;margin:0;line-height:1.5}
.simlog{margin-top:14px}
@media (max-width:1180px){.sdb{grid-template-columns:1fr}.sdb .copi{max-height:none}}
@media (max-width:900px){
 .simtabs{display:flex;background:var(--white);border-radius:20px;padding:3px;margin-bottom:14px;width:max-content}
 .simtabs button{border:0;background:none;border-radius:17px;padding:8px 14px;font-size:12px;cursor:pointer}
 .simtabs button.on{background:var(--ink);color:var(--bg)}
 .simg{grid-template-columns:1fr}
 .simphone{position:static}
 .simg:not([data-show=desk]) .simdesk{display:none}
 .simg[data-show=desk] .simphone{display:none}
}
@media (max-width:400px){.phone{width:100%;max-width:350px;height:700px}}
html[data-theme=dark] .sdb .tile.lilac,html[data-theme=dark] .sdb .tile.yellow{color:#141414}
html[data-theme=dark] .aih{color:#B9AEF5}
html[data-theme=dark] .phone{box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 2px #333}
html[data-theme=dark] .sugg:hover{background:var(--lilac);color:#141414}
a.pill{text-decoration:none;color:inherit}
.pill.dark{background:#141414;color:#fff;border-color:#141414}
.pill.dark svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8}
html[data-theme=dark] .pill.dark{background:#F0D90F;color:#141414;border-color:#F0D90F}
html[data-theme=dark] .pill.dark svg{stroke:#141414}
.kin{color:#1E8E4E}