:root{
  --bg:#FFFFFF; --rail:#FFFFFF; --pn:#FFFFFF; --hover:#F3F3F0; --on:#EAF0FE; --line:#E5E5E0; --line2:#D2D2CB;
  --ink:#1B1B1A; --ink2:#5C5C57; --ink3:#8E8E88; --accent:#2F5BEA; --ok:#2E7D5B; --warn:#B7791F; --bad:#C23B2A;
  --sans:'Inter','Inter Tight',system-ui,sans-serif; --mono:'Inter Tight',system-ui,sans-serif; --r:4px; --py:5px; --px:8px;
}
[data-theme=dark]{--bg:#141413;--rail:#191918;--pn:#1B1B1A;--hover:#232322;--on:#1E2A4A;--line:#2A2A28;--line2:#3A3A37;--ink:#ECECE8;--ink2:#A5A5A0;--ink3:#74746F;--accent:#6C8CFF;--ok:#5BC08F;--warn:#E2A94F;--bad:#F07A6A}
[data-density=comfortable]{--py:10px;--px:12px}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-variant-numeric:tabular-nums;background:var(--bg);color:var(--ink);font:400 13px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mono,time,small.mono,kbd{font-family:var(--mono);font-size:11.5px}
.mono{color:var(--ink3)}
kbd{border:1px solid var(--line2);border-radius:3px;padding:0 4px;color:var(--ink3);background:var(--bg);font-size:10.5px}
.grow{flex:1}
.bad{color:var(--bad)}.warn{color:var(--warn)}
.shell{display:grid;grid-template-columns:224px 1fr;height:100vh}
.center{display:grid;grid-template-rows:auto 1fr auto;min-width:0;min-height:0}
.body{display:grid;grid-template-columns:1fr 280px;min-height:0}
.no-insp .body{grid-template-columns:1fr}.no-insp .insp{display:none}
.view{overflow:auto;padding:20px 24px 40px;outline:0;min-width:0}
/* rail */
.rail{background:var(--rail);border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.ws{display:flex;gap:10px;align-items:center;padding:6px 8px}
.ws strong{display:block;font-weight:600;line-height:1.1}.ws small{color:var(--ink3);font-size:11px}
.logo{width:24px;height:24px;border-radius:5px;background:var(--ink);position:relative;flex:none}
.logo::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--accent)}
.lbl{font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);padding:0 8px 4px}
.grp{display:grid;gap:1px}
.ni{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--r);color:var(--ink2);min-width:0}
.ni:hover{background:var(--hover);color:var(--ink)}
.ni[aria-current=page]{background:var(--on);color:var(--ink);font-weight:500}
.ni svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ni>span:not(.sdot):not(.avatar){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni kbd{opacity:0;border:0;background:none}.ni:hover kbd{opacity:1}
.ni small{color:var(--ink3)}
.cnt{background:var(--accent);color:#fff;font:500 10.5px var(--mono);border-radius:9px;padding:0 6px}
.ni.sub{padding-left:10px}.none{padding:2px 8px;color:var(--ink3);font-size:12px}
.me{margin-top:auto;padding:8px;border-top:1px solid var(--line);border-radius:0}
.me strong{display:block;font-weight:500;color:var(--ink);line-height:1.1}.me small{color:var(--ink3);font-size:11px}
.avatar{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:600 9.5px var(--sans);color:#fff;flex:none}
.avatar.sm{width:20px;height:20px;font-size:9px;border:2px solid var(--bg);vertical-align:middle}
.avatar.lg{width:64px;height:64px;font-size:22px;border:0}
.stack{display:inline-flex;vertical-align:middle}.stack .avatar+.avatar{margin-left:-6px}
/* top bar */
.bar{display:flex;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line);min-height:44px}
.crumbs{display:flex;gap:6px;align-items:center;font-weight:500;white-space:nowrap}.crumbs .sep{color:var(--ink3)}.crumbs a{color:var(--ink2)}.crumbs a:hover{color:var(--ink)}
.find{display:flex;align-items:center;gap:8px;margin:0 auto;width:min(420px,40%);padding:5px 10px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink3);background:var(--rail);text-align:left}
.find:hover{border-color:var(--line2)}.find svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}.find span{flex:1}
.acts{display:flex;gap:6px;align-items:center}
.ibtn{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--ink2);position:relative}
.ibtn:hover,.ibtn.on{background:var(--hover);color:var(--ink)}.ibtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pip{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.only-sm{display:none}
.btn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg);font-weight:500;white-space:nowrap}
.btn:hover{background:var(--hover)}.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink)}.btn.pri:hover{opacity:.88}.btn.pri kbd{background:transparent;color:inherit;border-color:rgba(127,127,127,.5);opacity:.7}
.btn.sm{padding:1px 8px;font-size:12px}.btn.bad{color:var(--bad)}
/* status bar */
.status{display:flex;align-items:center;gap:16px;padding:4px 14px;border-top:1px solid var(--line);background:var(--rail);font-size:11.5px;color:var(--ink3)}
.status button,.status a{color:var(--ink2);display:inline-flex;align-items:center;gap:4px}.status button:hover,.status a:hover{color:var(--ink)}.status svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7}
.status .live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px}
.opts a{padding:0 5px;margin-left:2px;border-radius:3px}.opts a.cur{background:var(--ink);color:var(--bg)}
/* page */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.ph h1{font:600 20px/1.2 var(--sans);letter-spacing:-.01em;display:flex;gap:10px;align-items:center}.ph p{color:var(--ink3);margin-top:2px}
.phacts{display:flex;gap:6px}
.tool{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.inp,.sel{padding:4px 8px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg);min-width:0}
textarea.inp{width:100%;resize:vertical}.tool .inp{width:220px}
.inp:focus{outline:2px solid var(--accent);outline-offset:-1px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.seg button{padding:3px 10px;text-transform:capitalize;color:var(--ink2)}.seg button+button{border-left:1px solid var(--line2)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.seg button:hover:not([aria-pressed=true]){background:var(--hover)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs button{padding:6px 12px;text-transform:capitalize;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px}.tabs button[aria-pressed=true]{color:var(--ink);border-color:var(--accent);font-weight:500}
.bulk{display:flex;gap:6px;align-items:center;padding:6px 10px;margin-bottom:8px;background:var(--on);border:1px solid var(--accent);border-radius:var(--r)}.bulk b{margin-right:auto}
/* tables */
.tw{border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:var(--pn)}
table.t{width:100%;border-collapse:collapse}
.t th{position:sticky;top:0;background:var(--rail);text-align:left;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:6px var(--px);border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:var(--py) var(--px);border-bottom:1px solid var(--line);white-space:nowrap}
.t tbody tr:last-child td{border:0}
.t.sel tbody tr{cursor:default}.t tbody tr:hover{background:var(--hover)}.t tbody tr.on{background:var(--on)}
.t .ck{width:34px;padding-right:0}.t .r{text-align:right}.t .pc{min-width:100px}
.sh{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}.sh:hover{color:var(--ink)}
.nm{display:flex;align-items:center;gap:8px}.nm a{font-weight:500}.nm a:hover{color:var(--accent)}
.mini{width:26px;height:20px;border-radius:3px;overflow:hidden;border:1px solid var(--line);display:inline-block;flex:none}.mini svg,.mini img,.th svg,.th img,.ithumb svg,.ithumb img{width:100%;height:100%;display:block;object-fit:cover}
.starred{color:#E0A100}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--ink3)}.sdot.live{background:var(--ok)}.sdot.review{background:var(--warn)}.sdot.draft{background:var(--ink3)}
.ni .sdot{margin:0}
.pbar{display:inline-block;width:44px;height:5px;border-radius:3px;background:var(--line);vertical-align:middle;margin-right:8px;overflow:hidden}.pbar b{display:block;height:100%;background:var(--accent)}
.chipx{display:inline-block;font:500 11px var(--mono);padding:1px 7px;border:1px solid var(--line2);border-radius:3px;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.chipx.live{color:var(--ok);border-color:var(--ok)}.chipx.review{color:var(--warn);border-color:var(--warn)}
.pst.Online{color:var(--ok)}.pst.Away{color:var(--warn)}.pst.Offline{color:var(--ink3)}
.empty{padding:30px;text-align:center;color:var(--ink3)}.empty.big{padding:60px}
/* panels / dashboard */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;background:var(--pn)}
.kpi{padding:10px 14px;display:grid;gap:2px;border-right:1px solid var(--line)}.kpi:last-child{border:0}
.kpi .lbl{padding:0}.kpi strong{font:500 26px/1.1 var(--sans);letter-spacing:-.02em}.kpi small{color:var(--ink3);font-size:11.5px}
.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pn{border:1px solid var(--line);border-radius:var(--r);background:var(--pn);min-width:0;margin-bottom:0}
.dash .span2{grid-column:span 2}
.pn>header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.pn h3{font-weight:600;font-size:12.5px}.pb{padding:0}.pb:has(table){overflow-x:auto}
.pb>:is(.chart,.stk,.qa,.strip,.chk,form,.ag,.hb,.spec){margin:12px}
.pn .t th{position:static}.pn .t td:first-child,.pn .t th:first-child{padding-left:12px}
.lnk{color:var(--accent)}.lnk:hover{text-decoration:underline}
.two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}.two>div{display:grid;gap:12px}
.two.cal{grid-template-columns:minmax(0,1fr) 280px}
.kv{list-style:none;padding:0}.kv li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line)}.kv li:last-child{border:0}
.kv a:hover{color:var(--accent)}
.stk{display:flex;height:10px;border-radius:3px;overflow:hidden;gap:2px}.stk i{display:block}.stk .live{background:var(--ok)}.stk .review{background:var(--warn)}.stk .draft{background:var(--ink3)}
.chart{display:flex;gap:8px;height:130px}.chart>div{flex:1;display:grid;grid-template-rows:1fr auto;gap:4px;justify-items:center;min-width:0}.chart .cb{display:flex;align-items:flex-end;width:100%;border-bottom:1px solid var(--line)}.chart i{display:block;width:100%;background:var(--line2);border-radius:2px 2px 0 0}.chart i.hi{background:var(--accent)}.chart span{font:11px var(--mono);color:var(--ink3)}
.qa{display:grid;gap:6px}.qa .btn{justify-content:flex-start}.qa kbd{margin-left:auto}
.feed{list-style:none;padding:0}.feed li{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-bottom:1px solid var(--line)}.feed li:last-child{border:0}
.feed time{margin-left:auto;color:var(--ink3);white-space:nowrap}.feed li>span{min-width:0}
.feed .unr{box-shadow:inset 2px 0 var(--accent)}.feed.big{border:1px solid var(--line);border-radius:var(--r);background:var(--pn)}.feed.big li{cursor:pointer}.feed.big li:hover{background:var(--hover)}.feed .on{background:var(--on)}
.hb{list-style:none;padding:0}.hb li{display:grid;grid-template-columns:90px 1fr 24px;gap:10px;align-items:center;margin-bottom:8px}.hb i{display:block;height:12px;background:var(--accent);border-radius:2px}.hb b{font:500 12px var(--mono);text-align:right}
.hint{color:var(--ink3);padding:12px}
/* project detail */
.strip{display:flex;gap:10px;overflow:auto}.strip figure{flex:none;width:130px}.th{aspect-ratio:3/4;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--rail)}.strip figcaption{margin-top:4px}
.props{display:grid;grid-template-columns:90px 1fr;gap:0;padding:4px 12px}.props dt,.props dd{padding:6px 0;border-bottom:1px solid var(--line)}.props dt{color:var(--ink3)}.props dd{min-width:0;overflow-wrap:anywhere}.props dt:last-of-type,.props dd:last-of-type{border:0}
.chk{list-style:none;padding:0}.chk li{padding:6px 0;border-bottom:1px solid var(--line)}.chk li:last-child{border:0}.chk label{display:flex;gap:8px;align-items:center}.chk input{accent-color:var(--accent)}.chk input:checked+span{text-decoration:line-through;color:var(--ink3)}
.inl{display:flex;gap:6px}.inl .inp{flex:1}
/* board */
.board{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;align-items:start}
.col{background:var(--rail);border:1px solid var(--line);border-radius:var(--r);padding:8px;display:grid;gap:8px}.col>header{display:flex;justify-content:space-between;padding:2px 4px;font-weight:500}
.kc{display:grid;gap:4px;background:var(--pn);border:1px solid var(--line);border-radius:var(--r);padding:8px}.kc:hover{border-color:var(--line2)}.kc.on{border-color:var(--accent)}
.kc .th{aspect-ratio:16/7}.kc .row{display:flex;justify-content:space-between;align-items:center}
/* assets */
.ag{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.ag.sm{grid-template-columns:repeat(4,1fr)}
.at{display:grid;gap:3px;text-align:left;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--pn)}.at:hover{border-color:var(--line2)}.at.on{border-color:var(--accent);background:var(--on)}.at .th{aspect-ratio:4/3}
.at strong{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw{display:inline-block;width:28px;height:20px;border-radius:3px;border:1px solid var(--line2);vertical-align:middle}
/* calendar */
.mh{font:600 15px var(--sans);margin-bottom:8px}
.cg{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--pn)}
.dh{padding:4px 8px;font:500 10.5px var(--mono);text-transform:uppercase;color:var(--ink3);background:var(--rail);border-bottom:1px solid var(--line)}
.dc{min-height:92px;padding:4px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:2px;align-content:start}.dc:nth-child(7n){border-right:0}.dc.off{background:var(--rail)}
.dn{font:11.5px var(--mono);color:var(--ink3)}.today .dn{background:var(--accent);color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center}
.ev{font-size:11.5px;padding:1px 5px;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid var(--ink3);background:var(--hover)}.ev.live{border-color:var(--ok)}.ev.review{border-color:var(--warn)}.ev:hover{background:var(--on)}
/* inspector */
.insp{border-left:1px solid var(--line);overflow:auto;background:var(--rail);min-width:0}
.insp>header{padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--rail);z-index:1}
.insp h3{font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.ib h4{font:600 15px var(--sans);padding:10px 14px 0}.ib h5{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);padding:14px 14px 4px}
.ithumb{margin:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--pn)}.ithumb.wide{aspect-ratio:16/9}
.btns{display:flex;gap:6px;padding:12px 14px;flex-wrap:wrap}
.ib .props{padding:4px 14px}.ib .kv li{padding:6px 14px}
.big-av{padding:14px 14px 0}.nd{padding:12px 14px 0;display:flex;gap:6px;align-items:center}.ib>p{padding:6px 14px}
.cm{background:none}.cmf{padding:8px 14px;display:grid;gap:6px}.cmf .btn{justify-self:end}
.insp .feed li{padding:8px 14px}
/* forms / account */
.acct{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.sn{display:grid;gap:1px}.sn a{padding:6px 10px;border-radius:var(--r);color:var(--ink2)}.sn a:hover{background:var(--hover)}.sn a[aria-current=page]{background:var(--on);color:var(--ink);font-weight:500}
.ab{max-width:640px;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--pn)}
.fm{display:grid;gap:12px;margin-bottom:10px}.f{display:grid;gap:4px}.f label{font-weight:500;font-size:12px;color:var(--ink2)}.fm .btn{justify-self:start}
.row2{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;border-top:1px solid var(--line)}.ab>.row2:first-child{border:0;padding-top:0}.row2 p{color:var(--ink3);font-size:12.5px}
.sw2{position:relative;width:32px;height:18px;flex:none}.sw2 input{appearance:none;position:absolute;inset:0;margin:0;border-radius:9px;background:var(--line2);cursor:pointer}.sw2 input:checked{background:var(--accent)}.sw2 i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .12s;pointer-events:none}.sw2 input:checked+i{transform:translateX(14px)}
.spec li{flex-direction:column;align-items:flex-start;gap:4px}
/* modal / toast */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .15s;z-index:20}.scrim.on{opacity:1;pointer-events:auto}
.modal-root{position:fixed;inset:0;z-index:30;display:none;place-items:start center;padding:12vh 16px;overflow:auto}.modal-root.on{display:grid}
.modal{background:var(--bg);border:1px solid var(--line2);border-radius:8px;width:min(480px,100%);padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.modal h2{font:600 16px var(--sans);margin-bottom:12px}
.modal .f{margin-bottom:10px}.mf{display:flex;justify-content:flex-end;gap:6px;margin-top:12px}
.modal .kv li{padding:6px 0}
.cmd{padding:0;overflow:hidden;width:min(560px,100%)}.cmd input{width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;font-size:14px;outline:0}
.cmd ul{list-style:none;padding:6px;max-height:340px;overflow:auto}.cmd li button{width:100%;text-align:left;padding:6px 10px;border-radius:var(--r);display:flex;justify-content:space-between}.cmd li button:hover,.cmd li button.sel{background:var(--on)}
.toasts{position:fixed;bottom:40px;right:16px;display:grid;gap:6px;z-index:40}.toast{background:var(--ink);color:var(--bg);padding:7px 12px;border-radius:var(--r)}
.drop{display:block;border:1px dashed var(--line2);border-radius:var(--r);padding:30px;text-align:center;color:var(--ink2);cursor:pointer}.drop:hover{border-color:var(--accent)}
/* responsive */
@media(max-width:1280px){.body{grid-template-columns:1fr 260px}.kpis{grid-template-columns:repeat(3,1fr)}.kpi:nth-child(3){border-right:0}.kpi:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media(max-width:1100px){.insp{display:none}.body{grid-template-columns:1fr}.dash{grid-template-columns:repeat(2,1fr)}.two,.two.cal{grid-template-columns:1fr}}
@media(max-width:820px){
  .shell{grid-template-columns:1fr}.rail{position:fixed;inset:0 auto 0 0;width:240px;z-index:25;transform:translateX(-100%);transition:transform .2s}.rail-open .rail{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .only-sm{display:grid}.find span,.find kbd,.btn.pri span,.btn.pri kbd{display:none}.find{width:auto;margin:0 0 0 auto}.view{padding:14px 12px 30px}
  .dash,.kpis{grid-template-columns:1fr 1fr}.dash .span2{grid-column:span 2}.acct{grid-template-columns:1fr}.board{grid-template-columns:1fr}.status .mono,.status .opts{display:none}.crumbs a:not(:last-child){display:none}
}
@media(max-width:520px){.dash{grid-template-columns:1fr}.dash .span2{grid-column:auto}.kpis{grid-template-columns:1fr 1fr}}

.kpis.four{grid-template-columns:repeat(4,1fr)}
.dash.two-up{grid-template-columns:repeat(2,1fr);gap:16px}
.dash.two-up .pn{margin:0}
@media(max-width:1100px){.dash.two-up{grid-template-columns:1fr}}
@media(max-width:520px){.kpis.four{grid-template-columns:1fr 1fr}}

/* creative home */
.mk{padding:24px 0 8px}
.mkh{font:600 clamp(34px,4.2vw,54px)/1.05 var(--sans);letter-spacing:-.035em;margin:10px 0 12px;display:block}.mkh em{font-style:normal;color:var(--accent)}
.mkp{color:var(--ink2);font-size:15px;max-width:48ch}
.quick{display:flex;gap:8px;margin-top:22px;max-width:620px;flex-wrap:wrap}.quick .inp{flex:1;min-width:200px;padding:10px 14px;font-size:15px}.quick .sel{padding:10px 8px}.quick .btn{padding:10px 16px;font-size:14px}
.sech{display:flex;justify-content:space-between;align-items:baseline;margin:36px 0 14px}.sech h2{font:600 15px var(--sans)}
.fmts{display:flex;gap:18px;align-items:flex-end;overflow-x:auto;padding:6px 2px 12px}
.fmt{flex:none;display:grid;gap:3px;text-align:left}.fmt .cv{display:block;height:116px;border-radius:6px;overflow:hidden;border:1px solid var(--line);margin-bottom:6px;transition:transform .15s,box-shadow .15s}.fmt .cv svg{width:100%;height:100%;display:block}
.fmt:hover .cv{transform:translateY(-4px);box-shadow:0 14px 28px -12px rgba(0,0,0,.35);border-color:var(--accent)}.fmt strong{font-weight:500}
.bcs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.bcs.four{grid-template-columns:repeat(4,1fr)}
.bc{display:block;text-align:left;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--pn);transition:border-color .15s,transform .15s}.bc:hover{border-color:var(--accent);transform:translateY(-3px)}
.bc .art{aspect-ratio:4/3;overflow:hidden}.bc .art svg{width:100%;height:100%;display:block}.bi{padding:10px 12px 12px;display:grid;gap:4px}.bi strong{font-weight:500}
.pbar.wide{display:block;width:100%;margin:4px 0 0}
@media(max-width:1100px){.mk{grid-template-columns:1fr}}
@media(max-width:700px){.bcs{grid-template-columns:1fr}}

/* canvas selector inside the dashboard */
.dcats{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 4px}
.dchip{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border:1px solid var(--line2);border-radius:99px;color:var(--ink2);background:var(--bg)}.dchip small{color:var(--ink3);font-size:11px}.dchip:hover{background:var(--hover)}
.dchip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.dchip[aria-pressed=true] small{color:inherit;opacity:.7}
.dsec{display:flex;gap:10px;align-items:baseline;margin:18px 0 8px}.dsec h2{font:600 13px var(--sans)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.dcard{display:flex;gap:12px;align-items:center;text-align:left;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}.dcard:hover{background:var(--hover);border-color:var(--line2)}
.dcard[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--on);background:var(--on)}
.dprev{width:64px;height:64px;flex:none;display:grid;place-items:center}.dprev i{display:block;background:var(--bg);border:1.5px solid var(--ink2);border-radius:2px}
.dmeta{display:grid;gap:1px;min-width:0}.dmeta strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dmeta em{font-style:normal;font-size:11px;color:var(--ink3)}
.dfoot{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:18px;padding:12px 0;background:var(--bg);border-top:1px solid var(--line)}
.dcustom,.dgo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.dcustom .inp{width:84px}.dcustom .sel{width:auto}

.drecent{margin-top:6px}.drow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.dmini{flex:none;min-width:190px;padding:8px 10px}.dmini .dprev{width:40px;height:40px}

/* canvas selector: bottom bar sticks to the bottom, device mockups, brand badges */
.view.v-design{display:flex;flex-direction:column;padding-bottom:0}.dpage{flex:1;display:flex;flex-direction:column;min-height:0}.dpage .dlist{flex:1}
.dfoot{margin-top:auto;margin-bottom:0}
.dprev{width:84px;height:72px}
.mk-phone{position:relative;display:grid;place-items:center;background:#1B1B1A;border-radius:9px;padding:5px 4px 5px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mk-notch{position:absolute;top:2px;left:50%;width:10px;height:2.5px;margin-left:-5px;border-radius:2px;background:#444}
.mk-scr{display:block;background:linear-gradient(135deg,var(--on),#C9D6FB);border-radius:2px}
.mk-feed{display:grid;gap:3px;justify-items:center;align-content:center;width:100%;height:100%;background:var(--bg);border-radius:5px;padding:7px 0 3px}.mk-feed b{display:block;width:70%;height:2px;border-radius:2px;background:var(--line2)}
.mk-monitor{display:grid;justify-items:center}.mk-frame{display:grid;place-items:center;background:#1B1B1A;border-radius:4px;padding:3px}.mk-neck{width:6px;height:4px;background:var(--line2)}.mk-base{width:24px;height:3px;border-radius:2px;background:var(--line2)}
.mk-browser{display:grid;width:68px;border:1.5px solid var(--line2);border-radius:5px;overflow:hidden;background:var(--bg)}.mk-bar{display:flex;gap:2px;align-items:center;padding:2px 4px;background:var(--hover);border-bottom:1px solid var(--line2)}.mk-bar b{width:3px;height:3px;border-radius:50%;background:var(--ink3)}
.mk-body{display:grid;place-items:center;height:34px}
.mk-paper{display:block;background:#fff;border:1px solid var(--line2);box-shadow:2px 3px 0 rgba(0,0,0,.08);border-radius:1px;position:relative}.mk-paper::after{content:'';position:absolute;right:-1px;top:-1px;width:8px;height:8px;background:linear-gradient(225deg,var(--bg) 50%,var(--hover) 50%);border-left:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.brand{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2);font-weight:500}.bd{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;flex:none}.bd svg{width:11px;height:11px}
.mk-scr{background:linear-gradient(135deg,#E3EBFF,#9DB6F7)}

/* ===== canvas selector, premium pass ===== */
.dhero{position:relative;display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;padding:26px 28px;margin-bottom:14px;border-radius:18px;color:#fff;overflow:hidden;background:radial-gradient(120% 140% at 0% 0%,#7C4DFF 0%,rgba(124,77,255,0) 55%),radial-gradient(100% 120% at 100% 0%,#FF4D8D 0%,rgba(255,77,141,0) 58%),radial-gradient(90% 120% at 60% 120%,#FF9A3D 0%,rgba(255,154,61,0) 60%),#1B1B2E}
.dhero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.18));pointer-events:none}
.dhero>*{position:relative;z-index:1}.dkick{display:inline-block;font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);margin-bottom:10px}
.dhero h1{font:600 clamp(28px,3.4vw,42px)/1.05 var(--sans);letter-spacing:-.03em}.dhero h1 em{font-style:normal;background:linear-gradient(90deg,#FFE29A,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dhero p{margin-top:8px;max-width:520px;color:rgba(255,255,255,.86);font-size:14px}
.dsearch{display:flex;align-items:center;gap:12px}.dsearch .inp{width:min(340px,70vw);padding:9px 14px;border-radius:99px;border:0;background:rgba(255,255,255,.95);color:#16150F}.dsearch .mono{color:rgba(255,255,255,.85)}
.dcats{padding:6px 0 12px}.dchip{padding:5px 14px 5px 8px;font-weight:500;border-radius:99px}.dchip i{width:14px;height:14px;border-radius:50%;flex:none}.dchip[aria-pressed=true]{box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.dsplit{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.dsec h2{display:flex;align-items:center;gap:8px}.dsec h2 i{width:10px;height:10px;border-radius:50%}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:14px}
.dcard{display:grid;gap:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow:hidden;text-align:left;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .2s}
.dcard:hover{transform:translateY(-4px);box-shadow:0 18px 30px -16px rgba(20,20,40,.35);border-color:var(--line2);background:var(--bg)}
.dcard[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 18px 30px -16px rgba(47,91,234,.5);background:var(--bg)}
.dcv{position:relative;display:grid;place-items:center;height:116px;overflow:hidden}.dcv-sheen{position:absolute;inset:0;background:radial-gradient(90% 90% at 20% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.14))}
.dcv-c{position:relative;display:grid;align-content:center;gap:5px;padding:8px;background:rgba(255,255,255,.96);border-radius:5px;box-shadow:0 8px 18px -6px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.dcv-c i{display:block;height:3px;border-radius:2px;background:rgba(20,20,40,.16)}.dcv-c i:nth-child(1){width:70%;background:rgba(20,20,40,.32)}.dcv-c i:nth-child(3){width:45%}
.dcard:hover .dcv-c{transform:scale(1.08) rotate(-1.5deg)}.dcard[aria-pressed=true] .dcv-c{transform:scale(1.06)}
.bl{position:absolute;left:10px;top:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;box-shadow:0 4px 10px -3px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.25)}.bl svg{width:17px;height:17px}.bl.big{position:static;width:34px;height:34px;border-radius:11px}.bl.big svg{width:19px;height:19px}
.dcv-check{position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--accent);font-weight:700;font-size:13px;box-shadow:0 4px 10px -3px rgba(0,0,0,.4);transform:scale(0);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}.dcard[aria-pressed=true] .dcv-check{transform:scale(1)}
.dmeta{display:grid;gap:2px;padding:11px 13px 13px}.dmeta strong{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dmeta em{font-style:normal;font-size:11px;color:var(--ink3)}
.dpv{position:sticky;top:6px;display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--bg),var(--rail))}
.dpv-body{min-height:300px;display:grid;gap:12px;align-content:start}
.dpv-stage{display:grid;place-items:center;height:268px;border-radius:14px;background:conic-gradient(from 210deg at 50% 120%,#F6F1FF,#FFEFF5,#FFF6E6,#EAF4FF,#F6F1FF);position:relative;overflow:hidden}
.dpv-stage::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(20,20,40,.1) 1px,transparent 1px);background-size:14px 14px;opacity:.6}
.dpv-cv{position:relative;display:grid;align-content:center;gap:8px;padding:12%;border-radius:6px;box-shadow:0 22px 40px -14px rgba(20,20,40,.5),0 0 0 1px rgba(20,20,40,.08);transition:width .3s,height .3s,background .25s;max-width:100%}
.dpv-cv span[class^=dpv-l]{display:block;height:6px;border-radius:3px;background:currentColor;opacity:.18}.dpv-l1{width:72%;opacity:.5!important;height:9px!important}.dpv-l2{width:90%}.dpv-l3{width:55%}
.dpv-cv.m::after{content:'';position:absolute;inset:5%;border:1.5px dashed #FF2D87;border-radius:2px;pointer-events:none}
.dpv-brand{position:absolute;right:8px;bottom:8px}.dpv-dim{position:absolute;left:8px;bottom:6px;font:600 10px var(--sans);opacity:.55}
.dpv-info{display:grid;gap:2px}.dpv-info strong{font:600 16px var(--sans)}
.dpv-empty{display:grid;gap:8px;justify-items:center;text-align:center;padding:30px 10px;color:var(--ink2)}.dpv-empty strong{font:600 16px var(--sans);color:var(--ink)}.dpv-ph{width:140px;height:96px;border-radius:10px;background:linear-gradient(135deg,#7C4DFF,#FF4D8D,#FF9A3D);opacity:.9;box-shadow:0 18px 30px -14px rgba(124,77,255,.6)}
.dpv-tools{display:grid;gap:12px}.dpv-row{display:grid;gap:7px}.dpv-row.two{grid-template-columns:1fr 1fr}.dpv-row .btn{justify-content:center}.dpv-row .btn[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dpv-sw{display:flex;flex-wrap:wrap;gap:7px}.dpv-sw .sw{width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);padding:0;position:relative;overflow:hidden}.dpv-sw .sw.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.dpv-sw .pick{background:conic-gradient(#FF4B1F,#F2B84B,#1F8A70,#2F5BEA,#7A63D1,#D9507A,#FF4B1F)}.dpv-sw .pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drecent{margin:0 0 6px}.dchipc{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--bg);flex:none;text-align:left}.dchipc:hover{background:var(--hover);transform:translateY(-1px)}.dchipc strong{font-weight:600;font-size:12.5px;display:block}
.dmini{display:block;border-radius:3px;background:linear-gradient(135deg,#7C4DFF,#FF4D8D);box-shadow:0 3px 8px -3px rgba(124,77,255,.6)}
@media(max-width:1100px){.dsplit{grid-template-columns:1fr}.dpv{position:static;order:-1}}
.dpage>*{flex-shrink:0}.dpage .dfoot{margin-top:auto}

/* ===== premium home ===== */
.view.v-home{padding-top:16px}
.hm-hero{position:relative;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:34px 36px;border-radius:24px;margin-bottom:18px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(70% 120% at 100% 0%,rgba(124,77,255,.18),rgba(124,77,255,0) 60%),radial-gradient(60% 120% at 0% 100%,rgba(255,154,61,.2),rgba(255,154,61,0) 60%),radial-gradient(50% 90% at 70% 110%,rgba(255,77,141,.16),rgba(255,77,141,0) 60%),var(--bg)}
.hm-hero .mkh{margin-top:6px}.hm-hero .mkh em{font-style:normal;background:linear-gradient(90deg,#2F5BEA,#7C4DFF 55%,#FF4D8D);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-hi{position:relative;display:flex;align-items:center;gap:8px}.hm-ckb{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink3)}.hm-ckb:hover{background:var(--hover);color:var(--ink)}.hm-ckb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.clk-pop{position:absolute;left:0;top:34px;z-index:20;display:grid;gap:12px;width:340px;padding:14px;border:1px solid var(--line2);border-radius:14px;background:var(--bg);box-shadow:0 22px 50px -14px rgba(0,0,0,.35)}
.cp-g{display:grid;gap:6px}.cp-g>span{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}.seg.wrap{flex-wrap:wrap}.cp-g .seg button{text-transform:none;flex:1}
.hm-clock{padding:6px 10px}.clk{display:grid;justify-items:center;gap:4px;font-variant-numeric:tabular-nums}
.clk[data-style=digital] .ck-t{display:flex;align-items:baseline;gap:6px}.clk[data-style=digital] .ck-t b{font:600 64px/1 var(--sans);letter-spacing:-.04em;background:linear-gradient(180deg,var(--ink),var(--ink2));-webkit-background-clip:text;background-clip:text;color:transparent}.clk[data-style=digital] .ck-t small{font:500 22px var(--sans);color:var(--ink3)}.clk[data-style=digital] .ck-t em{font:600 13px var(--sans);font-style:normal;color:var(--ink2)}
.ck-d{color:var(--ink2);font-size:13px}
.ck-a{width:132px;height:132px}.ck-a .face{fill:var(--bg);stroke:var(--line2);stroke-width:1.5}.ck-a .tick{stroke:var(--ink3);stroke-width:1.5;stroke-linecap:round}.ck-a .hand{stroke:var(--ink);stroke-linecap:round}.ck-a .h{stroke-width:4}.ck-a .m{stroke-width:3}.ck-a .s{stroke:#FF4B1F;stroke-width:1.5}.ck-a .pin{fill:var(--ink)}
.clk[data-style=compact]{display:flex;align-items:baseline;gap:5px;padding:5px 12px;border:1px solid var(--line);border-radius:99px;background:var(--bg);white-space:nowrap}.clk[data-style=compact] b{font:600 15px var(--sans)}.clk[data-style=compact] small{color:var(--ink3);font-size:11px}.clk[data-style=compact] .ck-d{margin-left:6px;font-size:12px}
.clk[data-style=minimal] .ck-m{font:600 22px var(--sans);letter-spacing:-.02em}
.clk[data-slot=bar]{margin-right:8px}.clk-float{position:fixed;right:22px;bottom:46px;z-index:15;box-shadow:0 14px 30px -12px rgba(0,0,0,.35);border-radius:99px}
.hm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:14px}
.hm-tile{position:relative;display:grid;gap:3px;padding:16px 16px 12px;border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;transition:transform .2s,box-shadow .2s}.hm-tile:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(20,20,40,.35)}
.hm-tl{font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}.hm-tv{font:600 34px/1.1 var(--sans);letter-spacing:-.03em}.hm-tv small{font-size:14px;color:var(--ink3);letter-spacing:0}.hm-ts{color:var(--ink2);font-size:12.5px}.hm-ts .up{color:var(--ok)}.hm-ts .down{color:var(--bad)}
.spark{width:100%;height:32px;margin-top:6px}.hm-clockt{place-items:center;align-content:center}
.hm-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:14px;margin-bottom:8px}
.hm-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--bg)}.hm-ch{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.hm-ch h2{font:600 16px var(--sans)}.hm-ctl{display:flex;gap:8px;flex-wrap:wrap}.hm-ctl .seg button{text-transform:none}
.bars{width:100%;height:auto;display:block}.bars .gl{stroke:var(--line);stroke-dasharray:3 4}.bars .gt{fill:var(--ink3);font:500 11px var(--sans)}
.bars .b{transform-box:fill-box;transform-origin:50% 100%;animation:grow .6s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--d,0ms);transition:filter .15s,opacity .15s}.bars .bar{cursor:pointer}.bars:hover .b{opacity:.55}.bars .bar:hover .b,.bars .bar.hot .b{opacity:1;filter:saturate(1.3) drop-shadow(0 6px 8px rgba(124,77,255,.35))}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#hm-tip{position:fixed;z-index:400;display:grid;gap:1px;padding:7px 11px;border-radius:10px;background:#1B1B1A;color:#fff;font-size:12px;pointer-events:none;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}#hm-tip[hidden]{display:none}#hm-tip b{font-weight:600}#hm-tip span{color:rgba(255,255,255,.75)}
.donut{display:grid;gap:12px;justify-items:center}.donut svg{width:170px;height:170px}.donut .seg{transition:opacity .15s,stroke-width .15s;cursor:pointer}.donut .dn{font:600 22px var(--sans);fill:var(--ink)}.donut .dl{font:500 8px var(--sans);fill:var(--ink3)}
.donut[data-hl="0"] .seg:not([data-i="0"]),.donut[data-hl="1"] .seg:not([data-i="1"]),.donut[data-hl="2"] .seg:not([data-i="2"]),.donut[data-hl="3"] .seg:not([data-i="3"]),.donut[data-hl="4"] .seg:not([data-i="4"]),.donut[data-hl="5"] .seg:not([data-i="5"]){opacity:.22}
.dlg{list-style:none;padding:0;display:grid;gap:2px;width:100%}.dlg li{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer}.dlg li:hover{background:var(--hover)}.dlg i{width:10px;height:10px;border-radius:3px;flex:none}.dlg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dlg b{font-weight:600;font-variant-numeric:tabular-nums}
.dchips{display:flex;gap:6px;flex-wrap:wrap}
.gdg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:10px}
.gd,.tcard{border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}.gd:hover,.tcard:hover{transform:translateY(-5px);box-shadow:0 22px 34px -20px rgba(20,20,40,.45)}
.gd-art,.tc-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--hover)}.gd-art>svg,.gd-art>img,.tc-art>svg,.tc-art>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.gd:hover .gd-art>svg,.gd:hover .gd-art>img,.tcard:hover .tc-art>svg,.tcard:hover .tc-art>img{transform:scale(1.07)}
.gd-ov{position:absolute;inset:0;display:flex;gap:8px;align-items:flex-end;justify-content:center;padding:14px;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(10,10,25,.62));opacity:0;transition:opacity .2s}.gd:hover .gd-ov,.tcard:hover .gd-ov,.gd:focus-within .gd-ov,.tcard:focus-within .gd-ov{opacity:1}
.gd-ov .btn{box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}.gd-tag{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:99px;background:linear-gradient(135deg,#7C4DFF,#FF4D8D);color:#fff;font:600 10.5px var(--sans);letter-spacing:.04em}
.gd-star{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink2);box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}.gd-star svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}.gd-star.on{color:#F2B84B}.gd-star.on svg{fill:currentColor}
.gd-meta,.tc-meta{display:grid;gap:2px;padding:12px 14px 14px}.gd-meta strong,.tc-meta strong{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gd-time,.tc-use{display:flex;align-items:center;gap:5px;color:var(--ink3);font-size:11.5px;margin-top:3px}.gd-time svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:10px}.tgrid.big{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.tc-art{aspect-ratio:3/2}
.tcats{margin:0}.tool .tcats{flex:1}
.tpv{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:center}.tpv-art{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--hover);box-shadow:0 24px 40px -20px rgba(20,20,40,.5)}.tpv-art>svg,.tpv-art>img{width:100%;height:100%;object-fit:cover;display:block}
.tpv-i{display:grid;gap:10px;align-content:center}.tpv-i h2{font:600 24px var(--sans);letter-spacing:-.02em}.dkick2{justify-self:start;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:var(--on);color:var(--accent)}
.tpv-l{list-style:none;padding:0;display:grid;gap:8px;margin:6px 0}.tpv-l li{display:flex;gap:9px;align-items:center;color:var(--ink2)}.tpv-l svg,.tpv-stat svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;color:var(--accent);flex:none}.tpv-stat{display:flex;align-items:center;gap:9px}
.modal.wide{width:min(860px,100%)}
@media(max-width:980px){.hm-hero{grid-template-columns:1fr}.hm-split{grid-template-columns:1fr}.tpv{grid-template-columns:1fr}}

.tcats{margin:2px 0 14px}.dchip{white-space:nowrap}

/* ===== live calendar ===== */
.cg{gap:6px}.cg .dc{position:relative;min-height:104px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer;transition:background .15s,box-shadow .15s,border-color .15s}.cg .dc.off{background:transparent;border-color:transparent;cursor:default}
.cg .dc:hover:not(.off){border-color:var(--line2);box-shadow:0 8px 18px -12px rgba(20,20,40,.35)}.dc.today{border-color:var(--accent)!important;background:linear-gradient(180deg,var(--on),var(--bg))!important}.dc.today .dn{background:var(--accent);color:#fff}.dc.drop{outline:2px dashed var(--accent);outline-offset:-3px;background:var(--on)}
.dtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}.dn{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:99px;font:600 12.5px var(--sans)}
.dadd{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--ink3);opacity:0;transition:opacity .15s}.dc:hover .dadd,.wk-c:hover .wk-add{opacity:1}.dadd:hover,.wk-add:hover{background:var(--hover);color:var(--ink)}.dadd svg,.wk-add svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.ev2{display:flex;align-items:center;gap:5px;width:100%;margin-top:3px;padding:3px 7px;border-radius:7px;text-align:left;font-size:11.5px;font-weight:500;color:var(--ink);background:color-mix(in srgb,var(--k) 14%,var(--bg));box-shadow:inset 3px 0 var(--k);cursor:grab;overflow:hidden}.ev2:hover{background:color-mix(in srgb,var(--k) 24%,var(--bg))}.ev2 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ev2 small{color:var(--ink2);font-size:10.5px;flex:none}.ev2.done{opacity:.5;text-decoration:line-through}.ev2.drag{opacity:.4}
.more{font-size:11px;color:var(--ink3);padding:2px 6px}.more:hover{color:var(--ink)}
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.wk-c{position:relative;min-height:330px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--bg);cursor:pointer}.wk-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;color:var(--ink2)}.wk-h b{font:600 20px var(--sans);color:var(--ink)}.wk-c.today .wk-h b{color:var(--accent)}.wk-add{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink3);opacity:0}
.agenda{display:grid;gap:8px}.ag-day{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}.ag-day.today{border-color:var(--accent);background:var(--on)}.ag-d{display:grid;align-content:start}.ag-d b{font:600 26px/1 var(--sans)}.ag-d span{color:var(--ink2);font-size:12px}.ag-l .ev2{margin-top:0;margin-bottom:5px;font-size:13px;padding:6px 10px}
.cal-side{display:grid;gap:12px;align-content:start}.td-d{display:grid;justify-items:start;gap:0;margin-bottom:10px}.td-d b{font:600 44px/1.05 var(--sans);letter-spacing:-.03em;background:linear-gradient(90deg,#2F5BEA,#7C4DFF,#FF4D8D);-webkit-background-clip:text;background-clip:text;color:transparent}.td-d span{color:var(--ink2)}.td-l .ev2{margin-top:4px}
.up{list-style:none;padding:0;display:grid;gap:2px}.up-r{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 8px;border-radius:9px}.up-r:hover{background:var(--hover)}.up-r i{width:9px;height:9px;border-radius:50%;flex:none}.up-r strong{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.up-r small{color:var(--ink3);font-size:11.5px}.up-r.over small{color:var(--bad)}
.kc{display:grid;gap:6px}.kc span{display:flex;align-items:center;gap:8px;color:var(--ink2)}.kc i{width:9px;height:9px;border-radius:50%}.kc b{margin-left:auto;color:var(--ink)}.cal-tip{margin-top:10px}
.evg{display:grid;grid-template-columns:1fr 1fr;gap:12px}.chk{display:flex;align-items:center;gap:8px;margin-top:10px}.mf .grow{flex:1}
.tcard.st .tc-art{aspect-ratio:4/5}.tpv-art.st{aspect-ratio:4/5;max-height:440px;justify-self:center}.tpv-sz{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.tpv-sz .dchip{padding:3px 11px}
.gd-notes{color:var(--accent)}
@media(max-width:980px){.wk{grid-template-columns:1fr}.wk-c{min-height:0}.evg{grid-template-columns:1fr}}

.two.cal{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}.two.cal .cg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:1100px){.two.cal{grid-template-columns:1fr}}

/* ===== tuck the sidebar to icons ===== */
.rail-toggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.rail-toggle .rt-fill{fill:currentColor;stroke:none;opacity:.2;transform-box:fill-box;transform-origin:left center;transition:transform .32s cubic-bezier(.3,.9,.3,1)}
.rail-toggle .rt-line{transition:transform .32s cubic-bezier(.3,.9,.3,1)}
.rail-toggle.mini .rt-line{transform:translateX(-5.6px)}.rail-toggle.mini .rt-fill{transform:scaleX(.34)}
.rail-toggle:hover .rt-line{stroke-width:2.2}.rail-toggle:active .rt-line{transform:translateX(2px)}.rail-toggle.mini:active .rt-line{transform:translateX(-7px)}
@media(min-width:901px){
  .shell{transition:grid-template-columns .3s cubic-bezier(.3,.9,.3,1)}
  .shell.rail-mini{grid-template-columns:58px 1fr}
  .rail{transition:padding .3s;overflow-x:hidden}
  .rail-mini .rail{padding:10px 7px;align-items:stretch}
  .rail-mini .ws{justify-content:center;padding:6px 0}.rail-mini .ws span,.rail-mini .grp .lbl,.rail-mini .ni>span:not(.sdot):not(.avatar),.rail-mini .ni kbd,.rail-mini .ni small,.rail-mini .ni .cnt,.rail-mini .none,.rail-mini .me span:not(.avatar){display:none}
  .rail-mini .ni{justify-content:center;padding:8px 0;position:relative}.rail-mini .ni svg{width:18px;height:18px}.rail-mini .ni.sub{padding:8px 0}
  .rail-mini .grp+.grp{border-top:1px solid var(--line);padding-top:8px}
  .rail-mini .ni.me{padding:6px 0}
}
/* ===== calendar: the grid on top, the details below it ===== */
.two.cal{display:block}.two.cal .cg .dc{min-height:122px}
.cal-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:20px;align-items:start}
.evw{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font:600 10px var(--sans);color:var(--ink2);font-style:normal;flex:none}.evw svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2}

/* the sidebar width itself animates (more reliable than animating the grid) */
@media(min-width:901px){
  .shell,.shell.rail-mini{grid-template-columns:auto 1fr;transition:none}
  .rail{width:224px;transition:width .3s cubic-bezier(.3,.9,.3,1),padding .3s}
  .shell.rail-mini .rail{width:58px}
}

/* the sidebar toggle sits under the logo */
.rail .rail-toggle{align-self:flex-start;margin:-4px 0 2px 8px;width:32px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--ink2)}.rail .rail-toggle:hover{background:var(--hover);color:var(--ink)}
@media(min-width:901px){.rail-mini .rail .rail-toggle{align-self:center;margin-left:0}}

/* toggle: same size and left edge as the menu icons below it */
.rail .rail-toggle{align-self:stretch;width:auto;height:28px;margin:-2px 0 0 0;padding:0 0 0 8px;display:flex;align-items:center;justify-content:flex-start;border-radius:var(--r)}
.rail .rail-toggle svg{width:16px;height:16px;margin-left:0}
@media(min-width:901px){.rail-mini .rail .rail-toggle{align-self:stretch;justify-content:center;padding:0}}

/* the sidebar part of the toggle icon is blue */
.rail-toggle .rt-fill{fill:var(--accent);opacity:.55}.rail-toggle:hover .rt-fill{opacity:.8}.rail-toggle .rt-line{stroke:var(--accent)}

/* no side information panel */
.body{grid-template-columns:1fr!important}.insp{display:none!important}

/* ===== calendar: room to breathe, no frame around the grid ===== */
.two.cal{padding:8px 6px 36px}
.two.cal .mh{font:600 24px var(--sans);letter-spacing:-.02em;margin:12px 0 22px}
.two.cal .cg{border:0;border-radius:0;overflow:visible;background:transparent;gap:12px}
.two.cal .dh{background:transparent;border:0;padding:0 8px 2px;font:600 11px var(--sans);letter-spacing:.08em;color:var(--ink3)}
.two.cal .cg .dc{min-height:140px;padding:12px 12px 14px;border-radius:18px}
.two.cal .dtop{margin-bottom:8px}.two.cal .ev2{margin-top:5px;padding:4px 8px}
.cal-tip{margin-top:20px}
.cal-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:48px;align-items:stretch}
.cal-side .pn{display:flex;flex-direction:column;border:0;border-radius:22px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 22px 36px -28px rgba(20,20,40,.4);overflow:hidden}
.cal-side .pn>header{border:0;padding:22px 24px 6px}.cal-side .pn h3{font:600 16px var(--sans);letter-spacing:-.01em}
.cal-side .pb{padding:8px 24px 24px;flex:1}
.cal-side .td-d{margin:6px 0 16px;gap:2px}.cal-side .td-d span{font-size:13.5px}.cal-side .td-l .ev2{padding:8px 10px;margin-top:6px}
.cal-side .up{gap:4px}.cal-side .up-r{padding:11px 10px;border-radius:12px}.cal-side .up-r strong{font-size:13.5px}
.cal-side .kc{gap:14px;padding-top:4px}.cal-side .kc span{font-size:14px}

/* calendar details: three even columns, no inner frames */
.cal-side{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start;gap:26px}
.cal-side .kc{border:0!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}.cal-side .kc span{border:0!important;padding:0!important;background:none!important}
.cal-side .up-r{padding:9px 8px}

/* ===== home calendar widget ===== */
.hm-cal{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:26px;margin-bottom:12px;align-items:start}
.hm-cal .hm-card{border:0;border-radius:22px;padding:24px;box-shadow:0 0 0 1px var(--line),0 22px 36px -28px rgba(20,20,40,.4)}
.mc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.mc-top h3{font:600 20px var(--sans);letter-spacing:-.02em}
.mc-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.mc-h{padding:0 0 2px;text-align:center;font:600 11px var(--sans);letter-spacing:.08em;color:var(--ink3)}
.mc-d{position:relative;display:grid;align-content:center;justify-items:center;gap:3px;aspect-ratio:1.15;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:transform .15s,box-shadow .15s,border-color .15s}.mc-d.off{border-color:transparent;background:transparent}
.mc-d:hover:not(.off){transform:translateY(-2px);border-color:var(--line2);box-shadow:0 10px 18px -12px rgba(20,20,40,.4)}.mc-d b{font:600 14px var(--sans)}
.mc-d i{display:flex;gap:3px;height:6px}.mc-d u{width:6px;height:6px;border-radius:50%}
.mc-d.today{border-color:var(--accent);background:linear-gradient(180deg,var(--on),var(--bg))}.mc-d.today b{display:grid;place-items:center;min-width:26px;height:26px;border-radius:99px;background:var(--accent);color:#fff}
.mc-side .td-d{margin:0 0 16px}.mc-side h4{font:600 14px var(--sans);margin:22px 0 8px}.mc-side .td-l .ev2{margin-top:6px;padding:8px 10px}
@media(max-width:980px){.hm-cal{grid-template-columns:1fr}}

/* the toggle sits at the right of the Sandspace name, level with the Home bar */
.wsrow{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:40px}
.wsrow .ws{flex:1;min-width:0}
.wsrow .rail-toggle,.rail .wsrow .rail-toggle{align-self:center;flex:none;width:32px;height:30px;margin:0 2px 0 0;padding:0;display:grid;place-items:center;border-radius:8px}
.wsrow .rail-toggle svg{width:17px;height:17px;margin:0}
@media(min-width:901px){.rail-mini .wsrow{flex-direction:column;gap:6px;align-items:center}.rail-mini .wsrow .rail-toggle{margin:0;align-self:center}}

/* name row is exactly as tall as the top bar, so the toggle sits level with "Home" and the divider line continues */
.rail{padding-top:0}
.wsrow{height:47px;min-height:0;margin:0 -8px 0;padding:0 8px 0 8px;border-bottom:1px solid var(--line);align-items:center}
.wsrow .ws{padding:0 4px 0 8px}
@media(min-width:901px){.rail-mini .wsrow{height:auto;flex-direction:column;justify-content:center;gap:4px;margin:0 -7px;padding:10px 0 8px}.rail-mini .wsrow .ws{padding:0}}

/* sidebar toggle, a little larger */
.wsrow .rail-toggle,.rail .wsrow .rail-toggle{width:38px;height:34px;border-radius:9px}
.wsrow .rail-toggle svg{width:21px;height:21px}
.wsrow .ws{padding-right:0}

/* sidebar toggle: no colour, rounder corners */
.rail-toggle .rt-fill{fill:none;opacity:0}
.rail-toggle .rt-line{stroke:currentColor}
.rail-toggle .rt-box{rx:6px;ry:6px}
.rail-toggle{color:var(--ink2)}.rail-toggle:hover{color:var(--ink)}
.wsrow .rail-toggle,.rail .wsrow .rail-toggle{border-radius:12px}

/* ===== premium brand kit ===== */
.bk{max-width:1180px;margin:0 auto;padding:6px 4px 60px;display:grid;gap:56px}
.bk .i{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bk-hero{display:grid;gap:26px}
.bk-hd{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.bk-eye{display:block;font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.bk-title{display:block;width:min(640px,86vw);font:700 clamp(32px,4.6vw,52px)/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink);border:0;background:transparent;padding:2px 0;border-radius:8px;outline:0}
.bk-sub{display:block;width:min(640px,86vw);margin-top:8px;font:400 15px var(--sans);color:var(--ink2);border:0;background:transparent;padding:2px 0;outline:0}
.bk-title:hover,.bk-sub:hover{background:var(--hover)}.bk-title:focus,.bk-sub:focus{background:var(--hover);box-shadow:0 0 0 2px var(--accent)}
.bk-band{display:flex;height:168px;border-radius:26px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 24px 50px -28px rgba(20,20,20,.35)}
.bk-band i{display:block;min-width:0;transition:flex .4s}.bk-band:hover i:hover{flex:2.4!important}
.bk-stats{display:flex;gap:34px;flex-wrap:wrap;list-style:none;margin:0;padding:0;color:var(--ink2);font-size:13px}
.bk-stats li{display:flex;align-items:baseline;gap:8px}.bk-stats b{font:700 26px var(--sans);letter-spacing:-.02em;color:var(--ink)}
.bk-sec{display:grid;gap:22px}
.bk-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bk-sh h2{margin:0;font:700 24px var(--sans);letter-spacing:-.02em}.bk-sh p{margin:6px 0 0;color:var(--ink2);font-size:13.5px}
.bk-sh .btn{display:inline-flex;align-items:center;gap:7px;border-radius:12px;padding:8px 14px;font-weight:600;cursor:pointer}.bk-sh .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.bk-empty{color:var(--ink3);font-size:13.5px;margin:0;padding:18px 0}
.bk-in,.bk-rin{font:600 15px var(--sans);color:var(--ink);border:0;background:transparent;border-radius:8px;padding:5px 8px;margin:0 -8px;min-width:0;outline:0}
.bk-in:hover,.bk-rin:hover{background:var(--hover)}.bk-in:focus,.bk-rin:focus{background:var(--hover);box-shadow:0 0 0 2px var(--accent)}
.bk-ib{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--ink2);flex:none;border:0;background:transparent;cursor:pointer}.bk-ib:hover{background:var(--hover);color:var(--ink)}
.bk-tools{display:inline-flex;align-items:center;gap:2px}
/* palettes */
.bk-pals{display:grid;gap:22px}
.bk-pal{background:var(--pn);border:1px solid var(--line);border-radius:22px;padding:20px;display:grid;gap:18px;box-shadow:0 12px 34px -26px rgba(20,20,20,.4)}
.bk-pal header{display:flex;align-items:center;gap:10px}.bk-pal header .bk-in{flex:1;font-size:17px}
.bk-cnt{font-size:12px;color:var(--ink3);margin-right:6px}
.bk-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.bk-col{position:relative;height:150px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.2);overflow:hidden;transition:transform .2s,box-shadow .2s}
.bk-col:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(127,127,127,.2),0 16px 26px -16px rgba(20,20,20,.55)}
.bk-pick{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:14px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font-family:var(--sans)}
.bk-pick b{font-size:13.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-pick span{font-size:12px;opacity:.75;font-variant-numeric:tabular-nums}
.bk-mini{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s}.bk-col:hover .bk-mini,.bk-col:focus-within .bk-mini{opacity:1}
.bk-mini button{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:0;background:rgba(255,255,255,.88);color:#16150F;cursor:pointer}.bk-mini button:hover{background:#fff}.bk-mini svg{width:13px;height:13px}
.bk-add{height:150px;border-radius:16px;border:1.5px dashed var(--line2);background:transparent;color:var(--ink2);display:grid;place-content:center;justify-items:center;gap:8px;font:500 13px var(--sans);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.bk-add:hover{background:var(--hover);border-color:var(--ink3);color:var(--ink)}.bk-add svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
/* logos */
.bk-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.bk-logo{background:var(--pn);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:grid;box-shadow:0 12px 34px -28px rgba(20,20,20,.4)}
.bk-lv{height:180px;display:grid;place-items:center;padding:26px;background:#fff;background-image:linear-gradient(45deg,#f1f1ee 25%,transparent 25%,transparent 75%,#f1f1ee 75%),linear-gradient(45deg,#f1f1ee 25%,transparent 25%,transparent 75%,#f1f1ee 75%);background-size:16px 16px;background-position:0 0,8px 8px;transition:background-color .2s}
.bk-lv.dk{background-color:#16150F;background-image:linear-gradient(45deg,#232320 25%,transparent 25%,transparent 75%,#232320 75%),linear-gradient(45deg,#232320 25%,transparent 25%,transparent 75%,#232320 75%)}
.bk-lv{box-sizing:border-box;overflow:hidden}.bk-lv img{width:100%;height:100%;object-fit:contain}
.bk-lf{display:flex;align-items:center;gap:4px;padding:10px 10px 10px 18px;border-top:1px solid var(--line)}.bk-lf .bk-in{flex:1;font-size:14px}
.bk-drop{min-height:238px;border:1.5px dashed var(--line2);border-radius:20px;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--ink2);cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.bk-drop:hover,.bk-drop.over{background:var(--hover);border-color:var(--accent)}.bk-drop span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--hover);margin-bottom:6px;color:var(--ink)}.bk-drop span svg{width:20px;height:20px}
.bk-drop b{color:var(--ink);font-size:14px}.bk-drop small{font-size:12px;color:var(--ink3)}
/* fonts */
.bk-fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.bk-font{background:var(--pn);border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:6px;box-shadow:0 12px 34px -28px rgba(20,20,20,.4)}
.bk-font header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.bk-sel{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);background:var(--hover);border:0;border-radius:999px;padding:6px 10px;cursor:pointer}
.bk-aa{font-size:76px;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.bk-font h4{margin:2px 0 0;font:600 15px var(--sans)}.bk-font p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ink2)}
/* guidelines */
.bk-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.bk-rules li{display:flex;align-items:center;gap:14px;background:var(--pn);border:1px solid var(--line);border-radius:16px;padding:14px 12px 14px 18px}
.bk-n{font:700 13px var(--sans);color:var(--ink3);font-variant-numeric:tabular-nums}.bk-rin{flex:1;font-weight:500;font-size:14px}
.bk-radd{display:flex;gap:10px;flex-wrap:wrap}.bk-radd .inp{flex:1;min-width:240px;border-radius:12px;padding:9px 14px}.bk-radd .btn{border-radius:12px}
/* modals */
.bk-cpick{display:flex;gap:10px;align-items:center}.bk-cpick input[type=color]{width:52px;height:40px;border:1px solid var(--line2);border-radius:10px;padding:2px;background:var(--pn);cursor:pointer}
.bk-modal{width:min(520px,94vw)}
.bk-fl{display:grid;gap:2px;max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:6px;margin-bottom:12px}
.bk-fl button{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 10px;font:500 13.5px var(--sans);color:var(--ink);cursor:pointer}
.bk-fl button:hover{background:var(--hover)}.bk-fl button.on{background:var(--on);box-shadow:inset 0 0 0 1px var(--accent)}.bk-fl small{color:var(--ink3);font-size:11px}
.bk-fprev{display:grid;gap:4px;padding:14px 16px;border-radius:12px;background:var(--hover);margin-bottom:12px;min-height:66px;align-content:center}.bk-fprev b{font-size:24px}.bk-fprev span{font-size:14px;color:var(--ink2)}
.bk-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.bk{gap:42px}.bk-band{height:120px;border-radius:20px}.bk-strip{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.bk-rules{grid-template-columns:1fr}}

.bk-rin{resize:none;line-height:1.45;font-family:var(--sans)}

.hm-brand{display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:8px 14px 8px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--pn);color:var(--ink);font:600 13px var(--sans);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.hm-brand:hover{transform:translateY(-1px);border-color:var(--ink3);box-shadow:0 10px 20px -14px rgba(20,20,20,.5)}
.hm-brand svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.hm-bd{display:inline-flex;margin-left:4px}.hm-bd u{width:14px;height:14px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 2px var(--pn)}.hm-bd u:first-child{margin-left:0}


.themebtn{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r);color:var(--ink2);cursor:pointer;transition:background .15s,color .15s}
.themebtn:hover{background:var(--hover);color:var(--ink)}.themebtn:active{transform:scale(.92)}
.themebtn svg{width:16px;height:16px;overflow:visible;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.themebtn .tb-sun,.themebtn .tb-moon{transform-origin:12px 12px;transition:transform .5s cubic-bezier(.3,.9,.3,1),opacity .3s}
.themebtn .tb-moon{opacity:0;transform:rotate(-70deg) scale(.5)}
.themebtn:hover .tb-sun{transform:rotate(45deg)}
.themebtn.is-dark .tb-sun{opacity:0;transform:rotate(90deg) scale(.4)}
.themebtn.is-dark .tb-moon{opacity:1;transform:none}
.themebtn.is-dark:hover .tb-moon{transform:rotate(-14deg)}

/* assets: images / videos tabs */
.av-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--hover);margin:0 0 16px}
.av-tabs button{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border:0;border-radius:9px;background:transparent;color:var(--ink2);font:600 13px var(--sans);cursor:pointer}
.av-tabs button[aria-selected=true]{background:var(--pn);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--line)}
.av-n{min-width:18px;padding:1px 6px;border-radius:99px;background:var(--line);font-size:11px;text-align:center;color:var(--ink2)}
.av-url{display:flex;gap:8px;flex:1;max-width:520px}.av-url .inp{flex:1;min-width:0}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:6px}
.av-card{background:var(--pn);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px -26px rgba(20,20,20,.5)}
.av-th{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}.av-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s,opacity .2s}.av-th:hover img{transform:scale(1.05);opacity:.85}
.av-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;transition:transform .2s,background .2s}.av-th:hover .av-play{transform:scale(1.12);background:var(--accent)}.av-play svg{width:20px;height:20px;fill:currentColor;stroke:none}
.av-dur{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:7px;background:rgba(0,0,0,.72);color:#fff;font:600 11px var(--sans)}
.av-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px 12px 16px}.av-meta>div{min-width:0;display:grid;gap:2px}.av-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}.av-acts{display:flex;gap:2px;flex:none}
.av-empty{display:grid;justify-items:center;gap:6px;padding:60px 20px;border:1.5px dashed var(--line2);border-radius:20px;color:var(--ink2);text-align:center;cursor:pointer;margin-top:6px}.av-empty:hover{background:var(--hover)}.av-empty span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--hover);color:var(--ink)}.av-empty span svg{width:22px;height:22px;fill:currentColor;stroke:none}.av-empty b{color:var(--ink);font-size:15px}.av-empty small{max-width:340px}
.av-modal{width:min(760px,94vw)}

.sitelink{color:inherit;text-decoration:none;padding:0 8px}.sitelink:hover{color:var(--ink)}

.so-me{display:flex;align-items:center;gap:16px;padding:6px 0 22px}.so-me strong{font-size:17px}.so-me p{margin:2px 0 0;color:var(--ink2)}

/* logo */
.logo{width:26px;height:26px;border-radius:0;background:var(--ink);-webkit-mask:url(mark.svg) center/contain no-repeat;mask:url(mark.svg) center/contain no-repeat}.logo::after{display:none}

/* canvas preview opens inside the chosen canvas's row on narrow screens */
.dpv-tools.off{opacity:.45;pointer-events:none}
.dpv.inl{grid-column:1/-1;position:static;order:0;margin:6px 0 14px;animation:dpvin .3s cubic-bezier(.2,.9,.25,1)}
.dpv.inl .dpv-body{grid-template-columns:minmax(220px,320px) minmax(0,1fr);column-gap:18px;align-items:start;min-height:0}
.dpv.inl .dpv-stage{grid-row:1/4}.dpv.inl .dpv-info,.dpv.inl .dpv-tools{grid-column:2}
@media(max-width:680px){.dpv.inl .dpv-body{grid-template-columns:1fr}.dpv.inl .dpv-stage,.dpv.inl .dpv-info,.dpv.inl .dpv-tools{grid-column:1;grid-row:auto}}
@keyframes dpvin{from{opacity:0;transform:translateY(-8px)}}

/* canvas selection: no standing preview panel; an eye on each canvas opens a pop-up */
.dsplit{grid-template-columns:minmax(0,1fr)!important}
.dpeye{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#16150F;box-shadow:0 4px 10px -3px rgba(0,0,0,.4);cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .18s,transform .18s,background .15s}
.dpeye svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dcard:hover .dpeye,.dcard:focus-within .dpeye,.dpeye:focus-visible{opacity:1;transform:none}.dpeye:hover{background:#fff}
@media(hover:none){.dpeye{opacity:1;transform:none}}
.modal.dpm{width:min(560px,94vw)}.dpm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dpm-head h2{margin:0}
.dpm-body{display:grid;gap:12px}.dpm .dpv-stage{height:300px}

/* ---- Home: one question, a prompt, quick formats, recent designs, a banner ---- */
.hx{max-width:1180px;margin:0 auto;padding:clamp(28px,7vh,84px) 20px 60px;display:grid;justify-items:center}
.hx-k{margin:0 0 10px;color:var(--ink3);font-size:13.5px}
.hx-h{margin:0 0 28px;font:560 clamp(28px,3.4vw,42px)/1.1 var(--sans);letter-spacing:-.03em;text-align:center}
.hx-box{width:min(820px,100%);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px;border:1px solid var(--line2);border-radius:99px;background:var(--pn);box-shadow:0 1px 0 rgba(0,0,0,.02),0 10px 30px -18px rgba(0,0,0,.25);transition:box-shadow .2s,border-color .2s}
.hx-box:focus-within{border-color:var(--ink3);box-shadow:0 0 0 4px rgba(47,91,234,.12),0 10px 30px -18px rgba(0,0,0,.25)}
.hx-sel{position:relative;display:flex;align-items:center;gap:6px;padding:0 10px 0 4px;height:42px;border-radius:99px;cursor:pointer;flex:none}.hx-sel:hover{background:var(--hover)}
.hx-plus{width:26px;height:26px;display:grid;place-items:center;color:var(--ink2)}.hx-plus svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.hx-sel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:500 13.5px var(--sans);color:var(--ink);padding:0 4px;cursor:pointer;outline:0;max-width:140px}
.hx-in{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 16px var(--sans);color:var(--ink);padding:10px 6px}.hx-in::placeholder{color:var(--ink3)}
.hx-go{width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .2s,background .2s}.hx-go:hover{transform:scale(1.06);background:var(--accent)}
.hx-go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hx-acts{display:flex;gap:clamp(6px,1.4vw,22px);flex-wrap:wrap;justify-content:center;margin:clamp(34px,6vh,64px) 0 clamp(30px,5vh,52px);max-width:980px}
.hx-a{display:grid;justify-items:center;gap:10px;width:86px;font:500 13.5px var(--sans);color:var(--ink);cursor:pointer;background:none;border:0;padding:0;text-align:center}
.hx-ai{width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:var(--pn);display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .25s cubic-bezier(.2,.9,.25,1),box-shadow .25s,border-color .25s}
.hx-ai svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--ink2)}
.hx-a:hover .hx-ai{transform:translateY(-4px);box-shadow:0 14px 26px -14px rgba(0,0,0,.35);border-color:var(--line2)}.hx-a:hover .hx-ai svg{color:var(--ink)}
.hx-sh{width:100%;display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 14px}.hx-sh h2{margin:0;font:600 17px var(--sans);letter-spacing:-.01em}
.hx-recent{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin-bottom:34px}
.hx-rc{display:grid;gap:6px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.hx-ra{display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--hover);transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s}.hx-ra img,.hx-ra svg{width:100%;height:100%;object-fit:cover;display:block}
.hx-rc:hover .hx-ra{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(0,0,0,.4)}
.hx-rc strong{font:600 13.5px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hx-rc small{color:var(--ink3);font-size:12px}
.hx-ban{position:relative;width:100%;border-radius:26px;overflow:hidden;min-height:clamp(220px,28vh,260px);margin-top:6px}
.hx-sl{min-height:inherit;display:grid;place-items:center;text-align:center;padding:34px 24px 54px;color:#fff;animation:hxin .6s both;position:relative}.hx-sl[hidden]{display:none}
@keyframes hxin{from{opacity:0;transform:scale(1.02)}}
.hx-sl::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.55;pointer-events:none}
.hx-s0{background:radial-gradient(120% 140% at 12% 20%,#7cd6ff 0,transparent 45%),radial-gradient(90% 120% at 88% 10%,#2F5BEA 0,transparent 55%),linear-gradient(120deg,#0a1a45,#1d3f9e 55%,#4a8be8)}
.hx-s1{background:radial-gradient(110% 140% at 85% 15%,#ffd66b 0,transparent 42%),radial-gradient(90% 120% at 10% 90%,#ff4d8d 0,transparent 55%),linear-gradient(120deg,#2a1346,#6b2f86 55%,#e0662b)}
.hx-s2{background:radial-gradient(110% 140% at 15% 10%,#7ff0c8 0,transparent 45%),radial-gradient(90% 120% at 90% 90%,#1FA472 0,transparent 55%),linear-gradient(120deg,#05241c,#0f5a43 55%,#2fa57f)}
.hx-st{position:relative;max-width:560px;display:grid;gap:10px;justify-items:center}.hx-st h3{margin:0;font:600 clamp(22px,2.4vw,30px)/1.15 var(--sans);letter-spacing:-.025em}.hx-st p{margin:0;opacity:.88;font-size:14.5px;max-width:34em}
.hx-sb{display:flex;gap:18px;align-items:center;margin-top:8px;flex-wrap:wrap;justify-content:center}
.hx-try{padding:9px 20px;border-radius:12px;border:0;background:#fff;color:#0b0b0b;font:600 14px var(--sans);cursor:pointer;transition:transform .2s}.hx-try:hover{transform:translateY(-2px)}
.hx-more{color:#fff;font:600 14px var(--sans);text-decoration:none;opacity:.92}.hx-more:hover{text-decoration:underline}
.hx-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.hx-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .25s,background .25s}.hx-dots button[aria-pressed=true]{width:20px;border-radius:99px;background:#fff}
@media(max-width:640px){.hx-box{border-radius:22px;flex-wrap:wrap}.hx-in{flex-basis:100%;order:3}.hx-go{margin-left:auto}.hx-a{width:76px}}
@media(prefers-reduced-motion:reduce){.hx-sl{animation:none}}

/* ===== Sidebar and top bar: calmer, ElevenLabs-style ===== */
.rail{background:#FAFAF9;border-right:1px solid var(--line);padding:14px 12px;gap:4px}
[data-theme=dark] .rail{background:var(--rail)}
.wsrow{padding:4px 6px 14px}.ws strong{font:650 19px var(--sans);letter-spacing:-.02em}
.grp .lbl{padding:14px 10px 6px;font:500 13.5px var(--sans);text-transform:none;letter-spacing:0;color:var(--ink3)}
.ni{padding:9px 10px;gap:13px;border-radius:12px;font:500 15px/1.2 var(--sans);color:#66665f;letter-spacing:0}
.ni svg{width:21px;height:21px;stroke-width:1.5}
.ni:hover{background:#F0F0EE;color:var(--ink)}
.ni[aria-current=page]{background:#EDEDEA;color:var(--ink);font-weight:550}
[data-theme=dark] .ni{color:var(--ink2)}[data-theme=dark] .ni:hover{background:var(--hover)}[data-theme=dark] .ni[aria-current=page]{background:var(--on)}
.ni kbd{display:none}.ni small{font-size:12.5px}
.ni.sub{padding:8px 10px 8px 12px;font-weight:450}
.invc{display:grid;gap:3px;text-align:left;margin:10px 2px 6px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--pn);cursor:pointer;color:inherit;transition:box-shadow .2s,transform .2s}
.invc:hover{box-shadow:0 10px 24px -16px rgba(0,0,0,.35);transform:translateY(-1px)}
.invc-i{width:34px;height:34px;border-radius:50%;background:#F0F0EE;display:grid;place-items:center;margin-bottom:6px}.invc-i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--ink2)}
.invc strong{font:600 14.5px var(--sans)}.invc small{color:var(--ink3);font-size:12.5px;line-height:1.35}
.ni.me{margin-top:2px}
.bar .rail-toggle{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ink2);margin:0 4px 0 -4px;flex:none}
.bar .rail-toggle:hover{background:var(--hover);color:var(--ink)}
.bar .rail-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;overflow:visible}
.bar .rail-toggle .rt-fill{fill:currentColor;opacity:.14;stroke:none}.bar .rail-toggle .rt-line,.bar .rail-toggle .rt-box{stroke:currentColor}
.bar .rail-toggle.mini .rt-line{transform:none}.bar .rail-toggle.mini .rt-fill{transform:none;opacity:.05}
.bar .crumbs a{font:550 16px var(--sans);color:var(--ink)}
.bar .find{margin:0 auto;width:min(440px,38vw);justify-content:flex-start;border-radius:12px;padding:8px 12px}
@media(min-width:901px){.rail{width:260px}.shell.rail-mini .rail{width:68px}}

/* ===== Home ===== */
.hx{max-width:1180px}
.hx-h{font-weight:500;letter-spacing:-.028em}
.hx-ban{margin:4px 0 30px}
.hx-sl{background-size:cover!important;background-position:center!important}
.hx-sl::before{opacity:.0}
.hx-s0{background:linear-gradient(180deg,rgba(6,10,30,.18),rgba(6,10,30,.5)),url(assets/banners/b1.jpg)}
.hx-s1{background:linear-gradient(180deg,rgba(10,6,30,.12),rgba(10,6,30,.52)),url(assets/banners/b2.jpg)}
.hx-s2{background:linear-gradient(180deg,rgba(0,12,10,.1),rgba(0,12,10,.5)),url(assets/banners/b3.jpg)}
.hx-tabs{display:flex;gap:6px;width:100%;border-bottom:1px solid var(--line);margin:4px 0 20px;padding:0 6px}
.hx-tabs button{padding:12px 16px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font:500 15px var(--sans);color:var(--ink3);cursor:pointer;transition:color .2s}
.hx-tabs button:hover{color:var(--ink)}.hx-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
.hx-recent{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-bottom:20px}
.hx-empty{grid-column:1/-1;color:var(--ink3);padding:30px 0;text-align:center;width:100%}
.hx-find{display:flex;align-items:center;gap:10px;width:100%;padding:0 16px;height:46px;border:1px solid var(--line2);border-radius:14px;background:var(--pn);margin-bottom:18px}
.hx-find svg{width:18px;height:18px;stroke:var(--ink3);fill:none;stroke-width:1.7;stroke-linecap:round;flex:none}
.hx-find input{flex:1;border:0;outline:0;background:transparent;font:400 15px var(--sans);color:var(--ink)}
.hx-find:focus-within{border-color:var(--ink3);box-shadow:0 0 0 4px rgba(47,91,234,.1)}
.hx-quick{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.hx-more-row{width:100%;text-align:center;margin:22px 0 0}

/* ===== The canvas pop up: full screen, white, in step with the dashboard ===== */
.view.v-design{position:fixed!important;inset:0;z-index:70;background:var(--bg);overflow:auto;padding:0!important;display:block;animation:dpop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes dpop{from{opacity:0;transform:scale(1.015)}}
.v-design .dpage{max-width:1160px;margin:0 auto;padding:30px 28px 0;min-height:100%;display:flex;flex-direction:column}
.v-design .dhero{position:relative;background:none!important;color:var(--ink);padding:6px 56px 0 0;margin:0 0 22px;border-radius:0;overflow:visible;align-items:flex-end}
.v-design .dhero::after{display:none}
.v-design .dkick{background:none;padding:0;color:var(--ink3);font:500 13.5px var(--sans);letter-spacing:0;text-transform:none;margin-bottom:6px;backdrop-filter:none}
.v-design .dhero h1{font:560 clamp(26px,3vw,36px)/1.1 var(--sans);letter-spacing:-.028em;color:var(--ink)}
.v-design .dhero p{color:var(--ink3);font-size:14.5px;margin-top:6px}
.dclose{position:absolute;right:0;top:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:var(--pn);display:grid;place-items:center;cursor:pointer;color:var(--ink2);transition:transform .2s,background .2s}
.dclose:hover{background:var(--hover);transform:rotate(90deg)}.dclose svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.v-design .dsearch{flex:1;min-width:260px;max-width:420px;display:flex;align-items:center;gap:10px}
.v-design .dsearch .inp{flex:1;border-radius:12px;padding:11px 14px;font-size:14.5px;background:var(--pn)}
.v-design .dcats{padding:0 0 16px;gap:8px}
.v-design .dchip{padding:7px 14px 7px 10px;border-radius:99px;font:500 14px var(--sans);border-color:var(--line)}
.v-design .dchip i{width:9px;height:9px}
.v-design .dchip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:none}.v-design .dchip[aria-pressed=true] small{color:inherit;opacity:.7}
.v-design .dsec h2{font:600 16px var(--sans);letter-spacing:-.01em}
.v-design .dgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.v-design .dcv{background:#F4F4F1!important}
.v-design .dcard{border-radius:16px;border-color:var(--line)}
.v-design .dcard[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink);border-color:var(--ink)}
.v-design .dfoot{position:sticky;bottom:0;margin:22px -28px 0;padding:14px 28px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:3}
[data-theme=dark] .v-design .dfoot{background:rgba(20,20,19,.92)}
.v-design .dgo .btn.pri{border-radius:12px;padding:10px 20px;font-weight:600}

.v-design .dsearch .inp{border:1px solid var(--line2);outline:0}.v-design .dsearch .inp:focus{border-color:var(--ink3);box-shadow:0 0 0 4px rgba(47,91,234,.1)}

/* ===== Sidebar: the account stays at the bottom, the menu scrolls under it ===== */
.rail{overflow:hidden;padding:14px 12px 0;gap:0}
.rail-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px;padding-bottom:18px;margin:0 -4px;padding-left:4px;padding-right:4px;scrollbar-width:thin}
.rail-foot{position:relative;flex:none;padding:10px 0 12px;background:#FAFAF9;display:grid;gap:6px}
.rail-foot::before{content:'';position:absolute;left:-12px;right:-12px;top:-26px;height:26px;background:linear-gradient(transparent,#FAFAF9);pointer-events:none}
[data-theme=dark] .rail-foot,[data-theme=dark] .rail-foot::before{background:var(--rail)}[data-theme=dark] .rail-foot::before{background:linear-gradient(transparent,var(--rail))}
.rail-foot .invc{margin:0}.rail-foot .ni.me{margin:0;border-top:0}
.rail-mini .rail-foot .invc{display:none}

/* ===== Prompt box: the + menu ===== */
.hx-pw{position:relative;flex:none}
.hx-pb{width:42px;height:42px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;color:var(--ink2);cursor:pointer;transition:background .2s}
.hx-pb:hover,.hx-pb[aria-expanded=true]{background:var(--hover);color:var(--ink)}
.hx-pb svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.hx-menu{position:absolute;left:-4px;top:calc(100% + 12px);z-index:30;width:300px;padding:6px;border-radius:16px;background:var(--pn);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(0,0,0,.35);animation:hxm .16s ease-out}
.hx-menu[hidden]{display:none}@keyframes hxm{from{opacity:0;transform:translateY(-4px)}}
.hx-ms{display:block;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}.hx-ms input{width:100%;border:0;outline:0;background:transparent;font:400 14.5px var(--sans);color:var(--ink)}
.hx-mg{display:grid;padding:4px 0}.hx-mg>span{padding:8px 10px 4px;font:500 12.5px var(--sans);color:var(--ink3)}.hx-mg[hidden],.hx-menu [hidden]{display:none}
.hx-mg>a,.hx-mg>button{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;border:0;background:none;text-align:left;font:500 14.5px var(--sans);color:var(--ink);cursor:pointer;text-decoration:none}
.hx-mg>a:hover,.hx-mg>button:hover{background:var(--hover)}
.hx-mg i{width:20px;height:20px;display:grid;place-items:center;color:var(--ink2);flex:none}.hx-mg i svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ===== Full-screen "set up your design" ===== */
.cs{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;opacity:0;transform:scale(1.012);transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.cs.on{opacity:1;transform:none}
.cs-back{align-self:flex-start;margin:20px 0 0 24px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border:1px solid var(--line2);border-radius:99px;background:var(--pn);font:500 14px var(--sans);color:var(--ink);cursor:pointer}
.cs-back:hover{background:var(--hover)}.cs-back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cs-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(24px,5vw,80px);align-items:center;max-width:1240px;width:100%;margin:0 auto;padding:10px 40px 40px}
.cs-left{display:grid;place-items:center;height:100%;min-height:0}
.cs-stagebox{display:grid;justify-items:center;gap:16px;padding:clamp(24px,5vw,56px);border-radius:28px;background:#F4F4F1;width:100%;min-height:min(560px,100%);place-content:center}
[data-theme=dark] .cs-stagebox{background:var(--rail)}
.cs-cv{position:relative;border-radius:6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;transition:width .3s,height .3s,background .25s}
.cs-cv.m::after{content:'';position:absolute;inset:6%;border:1.5px dashed rgba(47,91,234,.7);border-radius:3px}
.cs-cv .dpv-l1,.cs-cv .dpv-l2,.cs-cv .dpv-l3{position:absolute;left:10%;height:6px;border-radius:4px;background:currentColor;opacity:.16}
.cs-cv .dpv-l1{top:16%;width:52%;height:10px}.cs-cv .dpv-l2{top:30%;width:70%}.cs-cv .dpv-l3{top:38%;width:46%}
.cs-cv .dpv-brand{position:absolute;right:10px;top:10px}
.cs-dim{font:500 13px var(--sans);color:var(--ink3)}
.cs-side{display:grid;gap:16px;align-content:center}
.cs-side h2{margin:0;font:560 clamp(26px,2.6vw,34px)/1.1 var(--sans);letter-spacing:-.028em}.cs-side .mono{color:var(--ink3);font-size:13.5px;margin:-8px 0 0}
.cs-side .dkick{background:none;padding:0;color:var(--ink3);font:500 13.5px var(--sans);text-transform:none;letter-spacing:0;margin:0}
.cs-f{display:grid;gap:6px}.cs-f .inp{padding:12px 14px;border-radius:12px;font-size:15px}
.cs-row{display:grid;gap:8px}.cs-row.two{grid-template-columns:1fr 1fr}.cs-row .btn{justify-content:center;padding:10px;border-radius:12px}
.cs-row .btn[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cs-side .dpv-sw{display:flex;flex-wrap:wrap;gap:8px}.cs-side .sw{width:28px;height:28px;border-radius:50%}
.cs-go{display:grid;gap:10px;margin-top:6px}.cs-go .btn{justify-content:center;padding:13px 18px;border-radius:14px;font-size:15px}.cs-go .btn.pri{font-weight:600}
@media(max-width:900px){.cs-main{grid-template-columns:1fr;overflow:auto;align-items:start;padding:8px 20px 30px}.cs-left{height:auto}.cs-stagebox{min-height:0}}
@media(prefers-reduced-motion:reduce){.cs{transition:none}.hx-menu{animation:none}}

/* ===== Sidebar details: no rule under the logo; the invite card scrolls with the menu ===== */
.wsrow{border-bottom:0!important;height:auto!important;margin:0!important;padding:4px 6px 12px!important}
.rail-body .invc{margin:14px 2px 6px}
.rail-foot{border-top:1px solid var(--line);margin:0 -12px;padding:10px 12px 12px}
.rail-foot::before{display:none}
.ni.me small{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* ===== Top bar icons in the ElevenLabs style: outlined squares ===== */
.bar .acts{display:flex;align-items:center;gap:8px}
.ibtn.bx{width:38px;height:38px;border:1px solid var(--line2);border-radius:12px;background:var(--pn);display:grid;place-items:center;color:var(--ink);position:relative;transition:background .2s,box-shadow .2s}
.ibtn.bx:hover{background:var(--hover);box-shadow:0 6px 16px -10px rgba(0,0,0,.3)}
.ibtn.bx svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ibtn.bx .pip{position:absolute;right:7px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--pn)}
.ibtn.bx.av{border-radius:50%;font:600 13px var(--sans);background:var(--accent);color:#fff;border-color:transparent}.ibtn.bx.av:hover{background:var(--accent);filter:brightness(1.08)}

/* ===== Empty states ===== */
.empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:64px 20px;border:1px dashed var(--line2);border-radius:20px;margin-top:10px}
.empty h3{margin:6px 0 0;font:600 18px var(--sans)}.empty p{margin:0 0 10px;color:var(--ink3);max-width:34em}
.empty-i{width:52px;height:52px;border-radius:16px;background:var(--hover);display:grid;place-items:center}.empty-i svg{width:24px;height:24px;stroke:var(--ink2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ===== The canvas picker: a clean pop up over the page ===== */
.dpick{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px}
.dpick-back{position:absolute;inset:0;background:rgba(14,14,16,.42);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}.dpick.on .dpick-back{opacity:1}
.dpick-card{position:relative;width:min(940px,100%);height:min(720px,calc(100vh - 48px));display:flex;flex-direction:column;background:var(--bg);border-radius:26px;box-shadow:0 40px 100px -30px rgba(0,0,0,.5);overflow:hidden;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.dpick.on .dpick-card{opacity:1;transform:none}
.dp-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 28px 8px}
.dp-h h2{margin:0;font:600 22px var(--sans);letter-spacing:-.02em}.dp-h p{margin:4px 0 0;color:var(--ink3);font-size:14px}
.dpick .dclose{position:static;flex:none;width:38px;height:38px}
.dp-bar{padding:12px 28px 0}
.dp-s{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:14px;background:var(--pn)}
.dp-s svg{width:18px;height:18px;stroke:var(--ink3);fill:none;stroke-width:1.7;stroke-linecap:round;flex:none}
.dp-s input{flex:1;border:0;outline:0;background:transparent;font:400 15px var(--sans);color:var(--ink)}
.dp-s:focus-within{border-color:var(--ink3);box-shadow:0 0 0 4px rgba(47,91,234,.1)}
.dp-cats{display:flex;gap:6px;padding:14px 28px 10px;overflow-x:auto;scrollbar-width:none}.dp-cats::-webkit-scrollbar{display:none}
.dp-cats button{flex:none;padding:7px 14px;border:0;border-radius:99px;background:transparent;font:500 14px var(--sans);color:var(--ink3);cursor:pointer;transition:background .2s,color .2s}
.dp-cats button:hover{background:var(--hover);color:var(--ink)}.dp-cats button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.dp-body{flex:1;min-height:0;overflow:auto;padding:4px 28px 18px}
.dp-body h3{margin:18px 0 10px;font:600 13px var(--sans);color:var(--ink3);letter-spacing:.02em}
.dp-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.dp-t{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--pn);text-align:left;cursor:pointer;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.dp-t:hover{border-color:var(--ink3);box-shadow:0 10px 24px -16px rgba(0,0,0,.35);transform:translateY(-1px)}
.dp-i{width:46px;height:46px;border-radius:12px;background:var(--hover);display:grid;place-items:center;flex:none}
.dp-i span{display:block;background:var(--pn);border-radius:3px;box-shadow:0 0 0 1px var(--line2)}
.dp-m{display:grid;gap:2px;min-width:0;flex:1}.dp-m strong{font:550 14.5px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dp-m small{color:var(--ink3);font-size:12.5px}
.dp-b{flex:none;display:grid}.dp-b .bl{width:24px;height:24px}
.dp-none{color:var(--ink3);padding:40px 0;text-align:center}
.dp-f{display:flex;align-items:center;gap:10px;padding:14px 28px;border-top:1px solid var(--line);background:var(--bg);flex-wrap:wrap}
.dp-f>span:first-child{font:500 14px var(--sans);color:var(--ink3);margin-right:4px}.dp-x{color:var(--ink3)}
.dp-f .inp{width:92px;padding:9px 10px;border-radius:10px}.dp-f .sel{padding:9px 8px;border-radius:10px}.dp-f .btn{margin-left:auto;border-radius:12px;padding:10px 18px;font-weight:600}
@media(max-width:640px){.dpick{padding:0}.dpick-card{height:100vh;border-radius:0}.dp-g{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dpick-card,.dpick-back{transition:none}}

/* ===== Logo row lines up with the menu icons and labels below it ===== */
.rail{padding:14px 12px 14px}
.wsrow{padding:4px 0 14px!important}
.wsrow .ws{display:flex;align-items:center;gap:10px;padding:0 10px 0 8px!important}
.wsrow .ws .logo{width:26px;height:26px;flex:none}
.rail-body{margin:0;padding:0 0 12px}
.grp .lbl{padding-left:14px}
.rail-body .invc{margin:14px 0 6px}

/* ===== Canvas picker: real tiles ===== */
.dpick-card{width:min(1040px,100%);height:min(780px,calc(100vh - 48px))}
.dp-g{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.dp-t{display:grid;gap:0;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--pn);text-align:left;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .2s}
.dp-t:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(0,0,0,.4);border-color:var(--line2)}
.dp-v{position:relative;height:118px;display:grid;place-items:center}
.dp-pg{display:grid;align-content:start;gap:5px;padding:10px 9px;background:#fff;border-radius:5px;box-shadow:0 8px 18px -8px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.05);box-sizing:border-box;overflow:hidden;transition:transform .25s}
.dp-pg i{display:block;height:4px;border-radius:3px;background:#E3E3DE}.dp-pg i:first-child{width:60%;background:#BDBDB6}.dp-pg i:nth-child(3){width:42%}
.dp-t:hover .dp-pg{transform:scale(1.05) rotate(-1deg)}
.dp-bd{position:absolute;left:10px;top:10px;display:grid}.dp-bd .bl{width:30px;height:30px;border-radius:9px;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}.dp-bd .bl svg{width:18px;height:18px}
.dp-m{padding:11px 13px 13px;display:grid;gap:2px}.dp-m strong{font:600 14px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dp-m small{font-size:12.5px;color:var(--ink3)}

/* ===== Tucked in: icons only, nothing scrolls, the invite card becomes just its icon ===== */
.shell.rail-mini .rail,.shell.rail-mini .rail-body{overflow:hidden!important}
.rail-mini .wsrow{padding:4px 0 10px!important}.rail-mini .wsrow .ws{justify-content:center;padding:0!important}
.rail-mini .rail-body{padding:0;margin:0}
.rail-mini .rail-body .invc{width:42px;height:42px;padding:0;margin:14px auto 0;border-radius:50%;display:grid;place-items:center;gap:0}
.rail-mini .rail-body .invc strong,.rail-mini .rail-body .invc small{display:none}
.rail-mini .rail-body .invc .invc-i{margin:0;width:34px;height:34px}

/* ===== Tucked in: same icon size and same arrangement, only the words go ===== */
.shell.rail-mini .rail .ni,.shell.rail-mini .rail .ni.sub{justify-content:flex-start!important;padding:9px 10px!important}
.shell.rail-mini .rail .ni svg{width:21px!important;height:21px!important}
.shell.rail-mini .rail .grp .lbl{display:block!important;visibility:hidden}
.shell.rail-mini .rail .grp+.grp{border-top:0!important;padding-top:0!important}
.shell.rail-mini .rail .wsrow{flex-direction:row!important;height:auto!important;margin:0!important;padding:4px 0 14px!important;align-items:center}
.shell.rail-mini .rail .wsrow .ws{justify-content:flex-start!important;padding:0 10px 0 8px!important}
.shell.rail-mini .rail{padding:14px 12px!important}
.shell.rail-mini .rail-body .invc{margin:14px 0 0!important}

/* storage (R2) on the Assets page */
.sf-head{display:flex;align-items:center;gap:16px;margin:4px 0 16px;flex-wrap:wrap}.sf-head>div{flex:1;min-width:220px}
.sf-use{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink2)}.sf-use b{color:var(--ink)}
.sf-bar{height:8px;border-radius:99px;background:var(--hover);overflow:hidden}.sf-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .4s}.sf-bar i.hot{background:var(--bad)}
.sf-g.dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.sf-t{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.sf-th{display:block;position:relative;width:100%;aspect-ratio:4/3;padding:0;border:0;background:var(--hover);cursor:pointer}.sf-th img,.sf-th video{width:100%;height:100%;object-fit:cover;display:block}
.sf-play{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55)}.sf-play:after{content:"";position:absolute;left:13px;top:10px;border:7px solid transparent;border-left:11px solid #fff}
.sf-m{padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}.sf-m strong{font-size:12.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sf-m small{color:var(--ink3);font-size:11.5px}
.sf-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:16px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}.sf-t:hover .sf-x,.sf-x:focus-visible{opacity:1}
.sf-msg{color:var(--ink2);font-size:13.5px;padding:28px 4px}
.sf-upl{cursor:pointer}

/* ===== Projects: clean ElevenLabs-style list and board ===== */
.pj-tool{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 20px}
.pj-pills{display:flex;gap:6px;flex-wrap:wrap}
.pj-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink2);font:500 13.5px var(--sans);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.pj-pill b{font:500 12px var(--sans);color:var(--ink3)}.pj-pill:hover{background:var(--hover);color:var(--ink)}
.pj-pill[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.pj-pill[aria-pressed=true] b{color:inherit;opacity:.65}
.pj-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pj-search{display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;border:1px solid var(--line);border-radius:999px;background:var(--bg);min-width:220px}.pj-search svg{width:15px;height:15px;stroke:var(--ink3);fill:none;stroke-width:1.8;flex:none}
.pj-search .inp{border:0;background:transparent;padding:0;height:100%;outline:0;min-width:0;width:100%}.pj-search:focus-within{border-color:var(--ink3)}
.pj-right .sel{height:38px;border-radius:999px;padding:0 14px;border:1px solid var(--line);background:var(--bg)}
.pj-right .seg{border-radius:999px;border-color:var(--line);padding:3px;gap:2px;background:var(--hover)}.pj-right .seg button{border:0!important;border-radius:999px;padding:5px 14px;font-weight:500;text-transform:none}
.pj-right .seg button[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.pj-list{display:grid;gap:10px}
.pj-row{display:grid;grid-template-columns:64px minmax(180px,1.6fr) 118px minmax(120px,1fr) 92px 96px auto;position:relative;gap:16px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.pj-row:hover{border-color:var(--line2);box-shadow:0 6px 20px -12px rgba(0,0,0,.25)}.pj-row.on{border-color:var(--ink)}
.pj-ck{width:16px;height:16px;margin:0;accent-color:var(--ink);cursor:pointer}
.pj-th{display:block;width:64px;height:48px;border-radius:10px;overflow:hidden;background:var(--hover)}.pj-th svg,.pj-th img{width:100%;height:100%;object-fit:cover;display:block}
.pj-main{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;min-width:0;align-items:center}
.pj-name{font:600 15px var(--sans);letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pj-name:hover{text-decoration:underline}
.pj-sub{grid-column:1/-1;font-size:12.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-st{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);white-space:nowrap}
.pj-pr{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink3)}.pj-pr .pbar{flex:1;height:6px;border-radius:99px}.pj-pr .pbar b{border-radius:99px}
.pj-due{font-size:13px;white-space:nowrap}
.pj-open{border-radius:999px;padding:7px 16px;height:auto}
.pj-board{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:16px;align-items:start}
.pj-col{background:var(--hover);border-radius:20px;padding:12px;display:grid;gap:10px}
.pj-col>header{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;font:600 13.5px var(--sans)}.pj-col>header b{font-weight:500;color:var(--ink3)}
.pj-card{display:grid;gap:6px;padding:10px;border-radius:14px;background:var(--bg);border:1px solid var(--line);transition:box-shadow .15s,border-color .15s}
.pj-card:hover{box-shadow:0 8px 22px -14px rgba(0,0,0,.35);border-color:var(--line2)}.pj-card.on{border-color:var(--ink)}
.pj-cth{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--hover)}.pj-cth svg,.pj-cth img{width:100%;height:100%;object-fit:cover;display:block}
.pj-card strong{font:600 14px var(--sans);padding:2px 2px 0}.pj-card .pj-sub{padding:0 2px}
.pj-cf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 2px 2px}.pj-cf .pbar{width:70px}
.pj-none{margin:0;padding:18px 8px;text-align:center;color:var(--ink3);font-size:13px}
.pj-empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:64px 20px;border:1px dashed var(--line2);border-radius:20px}
.pj-empty h3{margin:0;font:600 18px var(--sans)}.pj-empty p{margin:0;color:var(--ink2);max-width:380px}
@media(max-width:1180px){.pj-row{grid-template-columns:56px minmax(150px,1fr) 110px 90px auto}.pj-pr,.pj-team{display:none}}
@media(max-width:720px){.pj-row{grid-template-columns:52px 1fr auto;gap:12px}.pj-st,.pj-due{display:none}.pj-board{grid-template-columns:1fr}.pj-search{min-width:0;flex:1}}

/* tucked in: the lines above and below Reports are back (drawn on top, so nothing moves) */

/* ===== Calendar: pill toggles and round arrow buttons ===== */
.phacts .cal-views{border-radius:999px;border:1px solid var(--line);padding:3px;gap:2px;background:var(--hover)}
.phacts .cal-views button{border:0!important;border-radius:999px;padding:6px 15px;font-weight:500;text-transform:none;color:var(--ink2)}
.phacts .cal-views button[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.cal-nav{display:inline-flex;align-items:center;gap:6px}
.cal-arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink2);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.cal-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cal-arrow:hover{background:var(--hover);border-color:var(--line2);color:var(--ink)}
.cal-today{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 13.5px var(--sans);cursor:pointer}.cal-today:hover{background:var(--hover)}
.phacts .btn.pri{border-radius:999px;height:36px;padding:0 16px}
.phacts{align-items:center;gap:10px;flex-wrap:wrap}

/* ===== Project review ===== */
.rv-strip{margin:0 0 18px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.rv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:0;padding:0;counter-reset:s}
.rv-steps li{display:flex;align-items:center;gap:10px;min-width:0;position:relative;color:var(--ink3)}
.rv-steps li:not(:last-child):after{content:"";position:absolute;right:6px;top:50%;width:calc(100% - 150px);min-width:0;height:1px;background:var(--line2);display:none}
.rv-steps i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);font:600 12.5px var(--sans);font-style:normal;background:var(--bg)}
.rv-steps span{display:grid;min-width:0}.rv-steps b{font:600 13.5px var(--sans);color:var(--ink2);white-space:nowrap}.rv-steps small{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-steps li.done i{background:var(--ink);border-color:var(--ink);color:var(--bg)}.rv-steps li.done b{color:var(--ink)}
.rv-steps li.on i{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--on)}.rv-steps li.on b{color:var(--ink)}
.rv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.rv-card{border:1px solid var(--line);border-radius:18px;background:var(--bg);padding:20px}
.rv-card .rv-steps{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.rv-act h3,.rv-h{margin:0 0 4px;font:600 16px var(--sans);letter-spacing:-.01em}.rv-act p{margin:0 0 14px;color:var(--ink2);font-size:13.5px}
.rv-lb{display:block;font:500 12.5px var(--sans);color:var(--ink2);margin-bottom:6px}.rv-lb span{color:var(--ink3);font-weight:400}
.rv-act textarea{width:100%;border-radius:12px;resize:vertical;min-height:76px}
.rv-btns{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}.rv-btns .btn{border-radius:999px;padding:8px 18px;height:auto}
.rv-hist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.rv-hist li{display:grid;grid-template-columns:14px 1fr;gap:12px;padding:0 0 18px;position:relative}
.rv-hist li:not(:last-child):before{content:"";position:absolute;left:6px;top:16px;bottom:0;width:1px;background:var(--line)}
.rv-dot{width:13px;height:13px;border-radius:50%;margin-top:3px;background:var(--ink3);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--line2)}
.rv-dot.request{background:var(--warn)}.rv-dot.approve,.rv-dot.publish{background:var(--ok)}.rv-dot.changes{background:var(--bad)}.rv-dot.comment{background:var(--accent)}
.rv-hist p{margin:0;font-size:13.5px;color:var(--ink2)}.rv-hist p b{color:var(--ink)}.rv-hist time{margin-left:8px;font-size:12px;color:var(--ink3)}
.rv-hist blockquote{margin:6px 0 0;padding:8px 12px;border-radius:10px;background:var(--hover);font-size:13px;color:var(--ink)}
.rv-none{margin:10px 0 0;color:var(--ink3);font-size:13px}
@media(max-width:900px){.rv{grid-template-columns:1fr}.rv-steps{grid-template-columns:1fr 1fr}}

/* tucked in: both lines around Reports are drawn the same way (top of the group they introduce), so they match exactly */

/* ===== Project page: open, evenly spaced ===== */
.pd-tabs{gap:6px;margin:26px 0 24px;border-bottom:1px solid var(--line)}
.pd-tabs button{padding:10px 16px;font:500 14px var(--sans);text-transform:none}
.rv-strip{margin:22px 0 0;padding:18px 24px;border-radius:18px}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.pd-main,.pd-side,.pd-one{display:grid;gap:24px;min-width:0}
.pd-one{max-width:820px}
.pn.pd-card{border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden}
.pn.pd-card>header{padding:20px 24px 0;border:0;background:transparent;display:flex;justify-content:space-between;align-items:center}
.pn.pd-card>header h3{margin:0;font:600 16px var(--sans);letter-spacing:-.01em}
.pn.pd-card>.pb{padding:18px 24px 24px}
.pd-count{font:500 13px var(--sans);color:var(--ink3)}
.pd-design{display:grid;gap:18px}
.pd-cover{display:block;aspect-ratio:16/8;border-radius:14px;overflow:hidden;background:var(--hover);border:1px solid var(--line)}.pd-cover svg,.pd-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pd-dmeta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.pd-dmeta div{display:grid;gap:3px}.pd-dmeta strong{font:600 15px var(--sans)}.pd-dmeta span{font-size:13px;color:var(--ink3)}
.pd-dmeta .btn{border-radius:999px;padding:9px 18px;height:auto}
.pd-tasks{list-style:none;margin:0;padding:0;display:grid}
.pd-tasks li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.pd-tasks li:first-child{padding-top:0}
.pd-tasks label{display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0;font-size:14px}.pd-tasks input{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:none}
.pd-tasks input:checked+span{color:var(--ink3);text-decoration:line-through}
.pd-tasks .ibtn{opacity:0;transition:opacity .15s}.pd-tasks li:hover .ibtn,.pd-tasks .ibtn:focus-visible{opacity:1}
.pd-add{display:flex;gap:10px;margin-top:18px}.pd-add .inp{flex:1;height:42px;border-radius:999px;padding:0 16px}.pd-add .btn{border-radius:999px;padding:0 20px}
.pd-none{margin:0;color:var(--ink3);font-size:13.5px;line-height:1.6;padding:2px 0 6px}
.pd-props{margin:0;display:grid}
.pd-r{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.pd-r:first-child{padding-top:0}.pd-r:last-child{border:0;padding-bottom:0}
.pd-r dt{color:var(--ink3)}.pd-r dd{margin:0;display:grid;gap:2px;min-width:0}.pd-r dd small{color:var(--ink3);font-size:12.5px}
.pd-r .sel{width:100%;height:38px;border-radius:999px;padding:0 14px}
.pd-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}.pd-files figure{margin:0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--hover)}.pd-files img{width:100%;height:100%;object-fit:cover;display:block}
.pd-card .rv-hist{margin-top:0}
.rv{gap:24px}
@media(max-width:1100px){.pd-grid{grid-template-columns:1fr}}

.pd-r .pj-pr{display:flex;align-items:center;gap:12px}.pd-r .pj-pr .pbar{flex:0 0 150px;width:150px;height:6px;display:block}

/* ===== Templates and Assets pages: pill search, pill filters, rounder cards ===== */
.view .tool .inp{height:42px;border-radius:999px;padding:0 16px;min-width:260px}
.view .tool .seg,.view .av-tabs{border-radius:999px;padding:3px;gap:2px;background:var(--hover);border:1px solid var(--line)}
.view .tool .seg button{border:0!important;border-radius:999px;padding:6px 15px;font-weight:500;text-transform:none}
.view .tool .seg button[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.view .av-tabs{display:inline-flex;margin:0 0 18px;border-bottom:0}.view .av-tabs button{border:0!important;border-radius:999px;padding:8px 18px;font:500 13.5px var(--sans);color:var(--ink2);background:transparent;margin:0}
.view .av-tabs button[aria-selected=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.tcats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px}
.tcats .dchip{border-radius:999px;padding:7px 14px;border:1px solid var(--line);background:var(--bg);font:500 13.5px var(--sans);color:var(--ink2)}
.tcats .dchip small{margin-left:6px;color:var(--ink3);font-weight:500}
.tcats .dchip:hover{background:var(--hover);color:var(--ink)}
.tcats .dchip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.tcats .dchip[aria-pressed=true] small{color:inherit;opacity:.65}
.tgrid.big{gap:22px}
.tcard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg);transition:box-shadow .2s,border-color .2s,transform .2s}
.tcard:hover{border-color:var(--line2);box-shadow:0 14px 30px -20px rgba(0,0,0,.4);transform:translateY(-2px)}
.tcard .tc-meta{padding:14px 16px 16px;display:grid;gap:3px}.tcard .tc-meta strong{font:600 14.5px var(--sans)}
.tcard .gd-ov .btn{border-radius:999px;padding:9px 16px}
.sf-head .btn,.sf-upl{border-radius:999px;height:40px;padding:0 20px}
.sf-t{border-radius:16px}.sf-th{border-radius:0}.sf-m{padding:12px 14px 14px}.sf-g.dash{gap:18px}
.sf-bar{height:10px}.sf-head{margin:6px 0 24px}

/* ===== Projects: selection is quiet until you ask for it ===== */
.pj-ck{position:absolute;left:24px;top:50%;margin-top:-11px;width:22px;height:22px;z-index:2;opacity:0;pointer-events:none;appearance:none;-webkit-appearance:none;border-radius:50%;border:1.5px solid var(--line2);background:var(--bg);box-shadow:0 2px 6px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;transition:opacity .15s}
.pj-ck:checked{background:var(--ink);border-color:var(--ink)}
.pj-ck:checked:after{content:"";width:5px;height:10px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.pj-list.selecting .pj-ck{opacity:1;pointer-events:auto}
@media(hover:hover){.pj-row:hover .pj-ck{opacity:1;pointer-events:auto}}
.pj-row.picked,.pj-row:has(.pj-ck:checked){border-color:var(--ink);background:var(--hover)}
.pj-selbtn{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink2);font:500 13.5px var(--sans);cursor:pointer}
.pj-selbtn:hover{background:var(--hover);color:var(--ink)}.pj-selbtn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pj-bulk{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:8px 8px 8px 20px;border:1px solid var(--line);border-radius:999px;background:var(--bg);box-shadow:0 12px 30px -16px rgba(0,0,0,.35)}
.pj-bn{font:600 14px var(--sans);color:var(--ink)}
.pj-bb{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 13.5px var(--sans);cursor:pointer;transition:background .15s}
.pj-bb:hover{background:var(--hover)}.pj-bb.bad{color:var(--bad);border-color:rgba(194,59,42,.3)}.pj-bb.bad:hover{background:rgba(194,59,42,.08)}
.pj-bb.ghost{border-color:transparent;color:var(--ink2)}
@media(max-width:820px){.pj-bulk{border-radius:22px;padding:10px 12px}.pj-bn{width:100%}.pj-bulk .grow{display:none}.pj-bb{flex:1 1 auto;height:38px;padding:0 10px}}

/* ===== Account settings: open, evenly spaced ===== */
.acct{grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;margin-top:8px}
.sn{gap:4px;position:sticky;top:12px}
.sn a{padding:11px 16px;border-radius:12px;font:500 14.5px var(--sans);color:var(--ink2);transition:background .15s,color .15s}
.sn a:hover{background:var(--hover);color:var(--ink)}
.sn a[aria-current=page]{background:var(--hover);color:var(--ink);font-weight:600}
.sn a.sn-out{margin-top:12px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;padding-top:16px}
.ab{max-width:760px;border:0;background:transparent;padding:0}
.ac-t{margin:0 0 24px;font:600 22px var(--sans);letter-spacing:-.02em}
.ac-h{margin:0 0 4px;font:600 16px var(--sans)}.ac-p{margin:0 0 20px;color:var(--ink3);font-size:13.5px}
.ac-head{display:flex;align-items:center;gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;margin-bottom:24px;background:var(--bg)}
.ac-head .avatar{width:64px;height:64px;font-size:22px}
.ac-head strong{display:block;font:600 18px var(--sans)}.ac-head span{color:var(--ink3);font-size:13.5px}
.ab .fm{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--bg);margin:0}
.ab .fm.one{grid-template-columns:minmax(0,420px)}
.ab .fm .f{gap:8px}.ab .fm .f:has(textarea),.ab .fm .f:has(select){grid-column:1/-1}
.ab .fm.one .f{grid-column:auto}
.ab .f label{font:500 13.5px var(--sans);color:var(--ink)}
.ab .f .inp,.ab .f .sel{height:46px;border-radius:12px;padding:0 14px;border:1px solid var(--line);background:var(--bg);font-size:14.5px;transition:border-color .15s,box-shadow .15s}
.ab .f textarea.inp{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.ab .f .inp:focus,.ab .f .sel:focus{outline:0;border-color:var(--ink3);box-shadow:0 0 0 4px rgba(0,0,0,.05)}
.ab .fm .btn{grid-column:1/-1;justify-self:start;height:44px;padding:0 24px;border-radius:999px;font-size:14px}
.ab .row2{padding:20px 24px;border:1px solid var(--line);border-radius:18px;background:var(--bg);margin-bottom:12px}
.ab>.row2:first-child{border:1px solid var(--line);padding-top:20px}
.ab .row2 strong{font:600 15px var(--sans)}.ab .row2 p{margin:4px 0 0;font-size:13.5px;color:var(--ink3)}
.ab .row2 .btn{border-radius:999px;height:40px;padding:0 18px;white-space:nowrap}
.ab .sw2{width:44px;height:26px}.ab .sw2 input{border-radius:99px;transition:background .2s}
.ab .sw2 i{top:3px;left:3px;width:20px;height:20px;border-radius:50%;transition:transform .2s}.ab .sw2 input:checked~i{transform:translateX(18px)}
.ab .sw2 input:checked{background:var(--ink)}
.ab .so-me{padding:22px 24px;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;background:var(--bg)}
.ab>.pd-none{padding:0 4px}
@media(max-width:820px){
  .acct{grid-template-columns:minmax(0,1fr);gap:20px}
  .sn{position:static;display:flex;gap:6px;overflow-x:auto;margin:0 -12px;padding:0 12px;scrollbar-width:none}.sn::-webkit-scrollbar{display:none}
  .sn a{flex:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px}
  .sn a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .sn a.sn-out{margin:0;border-top:1px solid var(--line);border-radius:999px;padding-top:8px}
  .ab .fm{grid-template-columns:minmax(0,1fr);padding:18px;gap:18px}
  .ab .row2{flex-direction:column;align-items:flex-start;padding:16px 18px}
  .ab .row2:has(.sw2){flex-direction:row;align-items:center}
  .ac-head{padding:16px 18px}.ac-t{font-size:19px;margin-bottom:16px}
  .ab .f .inp,.ab .f .sel{font-size:16px}
}
.ac-head .avatar,.so-me .avatar{color:#fff;display:grid;place-items:center;border-radius:50%;font-weight:600}

/* ===== sidebar when tucked in: a line above and a line below the Reports icon, the same distance from it ===== */
.shell.rail-mini .rail-body>.grp::before,.shell.rail-mini .rail-body>.grp::after{content:none!important;display:none!important}
.shell.rail-mini .rail-body>.grp[data-g=Insights] .ni{position:relative;overflow:visible}
.shell.rail-mini .rail-body>.grp[data-g=Insights] .ni::before,.shell.rail-mini .rail-body>.grp[data-g=Insights] .ni::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line2);pointer-events:none}
.shell.rail-mini .rail-body>.grp[data-g=Insights] .ni{height:40px;box-sizing:border-box}
.shell.rail-mini .rail-body>.grp[data-g=Insights] .ni::before{top:-22px}
.shell.rail-mini .rail-body>.grp[data-g=Insights] .ni::after{top:61px;bottom:auto}
/* an empty Starred list takes no room when tucked in, so the invite icon is always on screen */
.shell.rail-mini .rail-body>.grp[data-g=Starred]:not(:has(.ni)){display:none}

.shell.rail-mini .rail-body::-webkit-scrollbar{display:none}

/* account settings: the Sign out entry is a plain row set off by a thin line */
.sn a.sn-out{margin-top:14px;border-top:0;border-radius:12px;position:relative}
.sn a.sn-out::before{content:"";position:absolute;left:12px;right:12px;top:-8px;height:1px;background:var(--line)}
@media(max-width:820px){.sn a.sn-out::before{display:none}}

.shell.rail-mini .rail-body{overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:none}
.shell.rail-mini .rail-body::-webkit-scrollbar{display:none}

/* group titles take exactly the same room expanded and tucked in, so the icons never move */
.rail .grp .lbl{height:40px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:clip}
.shell.rail-mini .rail .grp .lbl{height:40px;white-space:nowrap;overflow:hidden}
.rail-body .grp .ni{height:40px;box-sizing:border-box;align-items:center}

/* ===== Tucking the sidebar in and out: nothing jumps ===== */
/* The words never leave the layout. They stay where they are, the sidebar clips them as it narrows,
   and they fade, so the icons keep exactly the same place and nothing flashes or reflows. */
@media(min-width:901px){
  .rail{overflow:hidden}
  .rail .ni>span:not(.sdot):not(.avatar),.rail .ni kbd,.rail .ni small,.rail .ni .cnt,.rail .none,.rail .ws span,.rail .grp .lbl,.rail .invc strong,.rail .invc small{
    transition:opacity .2s ease;white-space:nowrap}
  .shell.rail-mini .rail .ni>span:not(.sdot):not(.avatar),.shell.rail-mini .rail .ni kbd,.shell.rail-mini .rail .ni small,.shell.rail-mini .rail .ni .cnt,.shell.rail-mini .rail .none,.shell.rail-mini .rail .ws span,.shell.rail-mini .rail .grp .lbl,.shell.rail-mini .rail .invc strong,.shell.rail-mini .rail .invc small{
    display:revert!important;visibility:visible!important;opacity:0;pointer-events:none}
  .shell.rail-mini .rail .ni>span.sdot{display:none}
  /* the invite card turns into its round icon by shrinking, not by switching */
  .rail .rail-body .invc{width:100%;height:auto;overflow:hidden;transition:width .3s cubic-bezier(.3,.9,.3,1),height .3s cubic-bezier(.3,.9,.3,1),padding .3s,border-radius .3s,box-shadow .2s,transform .2s}
  .shell.rail-mini .rail .rail-body .invc{width:42px!important;height:42px!important;padding:0!important;margin:14px 0 0!important;border-radius:50%;display:grid;place-items:center}
  .shell.rail-mini .rail .rail-body .invc .invc-i{margin:0;flex:none}
  .shell.rail-mini .rail .rail-body .invc strong,.shell.rail-mini .rail .rail-body .invc small{position:absolute;width:1px;height:1px;overflow:hidden}
  /* the two lines around Reports fade with the same motion */
  .rail-body>.grp[data-g=Insights] .ni{position:relative;overflow:visible}
  .rail-body>.grp[data-g=Insights] .ni::before,.rail-body>.grp[data-g=Insights] .ni::after{content:""!important;display:block!important;position:absolute;left:0;right:0;height:1px;background:var(--line2);opacity:0;transition:opacity .2s;pointer-events:none}
  .rail-body>.grp[data-g=Insights] .ni::before{top:-22px}
  .rail-body>.grp[data-g=Insights] .ni::after{top:61px;bottom:auto}
  .shell.rail-mini .rail-body>.grp[data-g=Insights] .ni::before,.shell.rail-mini .rail-body>.grp[data-g=Insights] .ni::after{opacity:1}
}
@media(prefers-reduced-motion:reduce){.rail,.rail *{transition:none!important}}
/* the invite card never squashes: it keeps its full height when the sidebar is open */
@media(min-width:901px){.rail .rail-body .invc{flex:none;min-height:min-content}.shell.rail-mini .rail .rail-body .invc{min-height:0}}
@media(min-width:901px){.rail .invc small,.rail .invc strong{white-space:normal}}
/* the lines around Reports are borders, not 1px boxes: a border is always exactly one device pixel,
   so the upper and lower line look the same on every screen and zoom level */
.rail-body>.grp[data-g=Insights] .ni::before,.rail-body>.grp[data-g=Insights] .ni::after{height:0!important;background:none!important;border-top:1px solid var(--line2)!important;box-sizing:content-box}

/* ===== Template preview: a calm, open card ===== */
.modal.tpv-m{position:relative;padding:28px;border-radius:28px;border:1px solid var(--line);box-shadow:0 40px 100px -30px rgba(0,0,0,.45);width:min(980px,100%)}
.tpv-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;cursor:pointer;color:var(--ink2);z-index:2;transition:background .15s,color .15s}
.tpv-x:hover{background:var(--hover);color:var(--ink)}.tpv-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.tpv-m .tpv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:stretch}
.tpv-stage{display:grid;place-items:center;padding:28px;border-radius:20px;background:var(--hover);min-height:420px}
.tpv-m .tpv-art{width:100%;max-width:340px;aspect-ratio:auto;border-radius:14px;box-shadow:0 24px 50px -24px rgba(0,0,0,.45);border:1px solid rgba(0,0,0,.04)}
.tpv-m .tpv-art img,.tpv-m .tpv-art svg{height:auto;max-height:520px;object-fit:contain}
.tpv-m .tpv-art.st{aspect-ratio:auto;max-height:none}
.tpv-m .tpv-i{gap:14px;align-content:center;padding:8px 6px 8px 0}
.tpv-m .tpv-i h2{font:600 28px/1.15 var(--sans);letter-spacing:-.025em;margin:0;padding-right:48px}
.tpv-m .tpv-i>p.mono{margin:0;color:var(--ink3);font:400 14px var(--sans)}
.tpv-m .dkick2{padding:5px 12px;font-size:11px;background:var(--hover);color:var(--ink2)}
.tpv-m .tpv-sz{gap:8px;margin-top:6px}.tpv-m .tpv-sz .mono{width:100%;margin-bottom:2px;color:var(--ink3);font:500 13px var(--sans)}
.tpv-m .tpv-sz .dchip{padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font:500 13.5px var(--sans);color:var(--ink2)}
.tpv-m .tpv-sz .dchip:hover{background:var(--hover);color:var(--ink)}
.tpv-m .tpv-sz .dchip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tpv-m .tpv-l{gap:14px;margin:12px 0 8px}
.tpv-m .tpv-l li{gap:14px;font-size:14.5px;color:var(--ink)}
.tpv-m .tpv-l li svg{width:34px;height:34px;padding:9px;border-radius:50%;background:var(--hover);color:var(--ink2);stroke-width:1.7;box-sizing:border-box}
.tpv-go{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.tpv-go .btn{height:46px;padding:0 24px;border-radius:999px;font-size:14.5px}
@media(max-width:820px){
  .modal.tpv-m{padding:16px;border-radius:24px;max-height:calc(100dvh - 32px)}
  .tpv-m .tpv{grid-template-columns:minmax(0,1fr);gap:18px}
  .tpv-stage{min-height:0;padding:18px;border-radius:18px}.tpv-m .tpv-art{max-width:240px}
  .tpv-x{top:12px;right:12px;width:36px;height:36px}
  .tpv-m .tpv-i h2{font-size:22px}.tpv-go .btn{flex:1;justify-content:center}
}

/* the preview never changes size: fixed card, fixed stage, fixed text slots */
@media(min-width:821px){
  .modal.tpv-m{width:min(980px,calc(100vw - 32px))!important;height:min(600px,calc(100vh - 40px));overflow:hidden;display:block}
  .tpv-m .tpv{height:100%;align-items:stretch}
  .tpv-stage{height:100%;min-height:0;padding:24px;overflow:hidden}
  .tpv-m .tpv-art{width:auto;max-width:100%;height:100%;max-height:100%;display:grid;place-items:center;background:transparent;box-shadow:none;border:0;overflow:visible}
  .tpv-m .tpv-art img,.tpv-m .tpv-art svg{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 24px 50px -24px rgba(0,0,0,.45)}
  .tpv-m .tpv-i{align-content:start;padding-top:40px;overflow:hidden}
}
.tpv-m .tpv-i>p.mono{min-height:44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpv-m .tpv-sz{min-height:92px;align-content:flex-start}
.tpv-m .tpv-l{min-height:154px}
@media(max-width:820px){.modal.tpv-m{overflow:auto}.tpv-m .tpv-art img,.tpv-m .tpv-art svg{max-height:46vh;width:auto}}

/* ---- Background page ---- */
.bgp{display:grid;gap:36px;padding:8px 0 48px;max-width:960px}
.bgp h3{font:600 15px var(--sans,inherit);margin:0 0 14px}
.bgp-now{display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr);gap:28px;align-items:center}
.bgp-prev{aspect-ratio:4/3;border-radius:20px;border:1px solid var(--line,rgba(0,0,0,.12))}
.bgp-now h2{margin:6px 0 8px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.bgp-now p{margin:0 0 16px;color:var(--ink3,#6b6a63);line-height:1.5;max-width:46ch}
.bgp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px}
.bgp-sw{position:relative;aspect-ratio:1;border-radius:18px;border:1px solid var(--line,rgba(0,0,0,.12));cursor:pointer;padding:0;transition:transform .18s,box-shadow .18s}
.bgp-sw:hover{transform:translateY(-2px)}
.bgp-sw.on{box-shadow:0 0 0 3px var(--bg,#fff),0 0 0 5px var(--ink,#16150F)}
.bgp-cust{display:grid;place-items:center;overflow:hidden;background:transparent;border-style:dashed}
.bgp-cust input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.bgp-cust svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.bgp-docs{display:grid;gap:10px}
.bgp-doc{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:18px}
.bgp-th{flex:none;width:64px;height:48px;border-radius:10px;overflow:hidden;background:var(--bg2,rgba(0,0,0,.05));display:block}
.bgp-th img{width:100%;height:100%;object-fit:cover;display:block}
.bgp-nm{flex:1;min-width:0;display:grid;gap:2px}.bgp-nm strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgp-none{margin:0;color:var(--ink3,#6b6a63)}
@media(max-width:640px){.bgp-now{grid-template-columns:minmax(0,1fr)}.bgp-doc{flex-wrap:wrap}.bgp-doc .btn{width:100%}}
.bgs-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.bgs-bar .inp{flex:1 1 260px;min-width:0}
.bgs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:6px 0 14px}
.bgs-t{position:relative;display:block;aspect-ratio:4/3;padding:0;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:18px;overflow:hidden;background:var(--bg2,rgba(0,0,0,.05));cursor:pointer}
.bgs-t img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.bgs-t:hover img{transform:scale(1.05)}
.bgs-t span{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font:500 11px var(--sans,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}.bgs-t:hover span,.bgs-t:focus-visible span{opacity:1}

/* ---- Background page, arranged ---- */
.bgp{max-width:1120px;gap:28px;padding:6px 0 56px}
.bgp-hero{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:36px;align-items:center;padding:22px;border:1px solid var(--line);border-radius:28px;background:var(--hover)}
.bgp-prev{position:relative;aspect-ratio:3/2;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff}
.bgp-prev canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bgp-eye{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.bgp-info h2{margin:8px 0 10px;font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.bgp-info p{margin:0 0 14px;color:var(--ink2);line-height:1.55;max-width:48ch}
.bgp-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--hover);margin-bottom:22px;max-width:100%;overflow:auto}
.bgp-tabs button{height:38px;padding:0 20px;border-radius:99px;font-weight:550;color:var(--ink2);white-space:nowrap;transition:background .15s,color .15s}
.bgp-tabs button:hover{color:var(--ink)}
.bgp-tabs button[aria-selected=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.bgp-pane{min-height:240px}
.bgp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.bgp-chip{height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--line2);font-weight:500;color:var(--ink2)}
.bgp-chip:hover{background:var(--hover)}.bgp-chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bgp-fx{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.bgp-fxt{display:grid;gap:8px;text-align:left;padding:0;font-weight:500;color:var(--ink2)}
.bgp-fxt canvas{width:100%;aspect-ratio:3/2;border-radius:18px;border:1px solid var(--line);background:var(--hover);display:block;transition:transform .2s,box-shadow .2s}
.bgp-fxt:hover canvas{transform:translateY(-3px)}
.bgp-fxt.on canvas{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}.bgp-fxt.on{color:var(--ink)}
.bgp-fxt span{padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.bgp-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:16px}
.bgp-grid.wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bgp-sw{border-radius:20px}
.bgs-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.bgp-note{color:var(--ink3);font-size:12.5px;margin:6px 0 0}
.bgp-mine{padding-top:8px;border-top:1px solid var(--line)}
.bgp-mine h3{margin:22px 0 8px}
@media(max-width:760px){.bgp-hero{grid-template-columns:minmax(0,1fr);padding:16px;gap:20px}.bgp-info h2{font-size:22px}.bgp-tabs button{padding:0 14px}}
.bgp [hidden]{display:none!important}

/* ---- Team page ---- */
.tm{display:grid;gap:36px;max-width:1120px;padding:6px 0 56px}
.tm-seats{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,320px);gap:32px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:28px;background:var(--hover)}
.tm-eye{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.tm-seats h2{margin:8px 0 8px;font-size:26px;font-weight:600;letter-spacing:-.025em}
.tm-seats p{margin:0;color:var(--ink2);line-height:1.55;max-width:46ch}
.tm-bar{height:10px;border-radius:10px;background:var(--line2);overflow:hidden}.tm-bar i{display:block;height:100%;border-radius:10px;background:var(--ink)}
.tm-h{margin:0 0 16px;font:600 15px var(--sans)}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tm-card,.tm-add{display:grid;align-content:start;gap:6px;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--bg);text-align:left;transition:transform .2s,box-shadow .2s}
.tm-card:hover,.tm-add:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.tm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.tm-card .avatar.lg{width:52px;height:52px;font-size:17px}
.tm-role{padding:4px 12px;border-radius:99px;background:var(--hover);font-weight:550;font-size:12px;color:var(--ink2)}
.tm-card h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em}
.tm-mail{margin:0;color:var(--ink3);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.tm-st{display:inline-flex;align-items:center;gap:7px;font-weight:550;color:var(--ink2)}.tm-st i{width:8px;height:8px;border-radius:50%;background:var(--ink3)}.tm-st.online i{background:var(--ok)}.tm-st.online{color:var(--ok)}
.tm-n{color:var(--ink3)}
.tm-add{place-items:center;text-align:center;border-style:dashed;border-color:var(--line2);background:transparent;gap:8px;min-height:210px}
.tm-add span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--hover)}.tm-add span svg{width:20px;height:20px}
.tm-add small{color:var(--ink3)}
@media(max-width:760px){.tm-seats{grid-template-columns:minmax(0,1fr);padding:20px}}
.tm-add svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* account settings: the section buttons sit on one even row on narrow screens */
@media(max-width:820px){
  .sn{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:2px 12px 6px}
  .sn a,.sn a.sn-out{display:inline-flex;align-items:center;justify-content:center;flex:none;height:42px;margin:0;padding:0 18px;border:1px solid var(--line);border-radius:999px;font:500 14px/1 var(--sans);white-space:nowrap}
  .sn a.sn-out::before{display:none}
  .sn a[aria-current=page]{font-weight:600}
}

/* account settings on narrow screens: one button that opens the sections */
.sn-m{display:none}
@media(max-width:820px){
  .sn{display:none}
  .sn-m{display:block;position:relative;margin:2px 0 6px}
  .sn-m summary{list-style:none;display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border:1px solid var(--line2);border-radius:16px;background:var(--bg);cursor:pointer;font-weight:600}
  .sn-m summary::-webkit-details-marker{display:none}
  .sn-i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--hover)}.sn-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .sn-c{flex:1}.sn-v svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s;transform:rotate(90deg)}
  .sn-m[open] .sn-v svg{transform:rotate(-90deg)}
  .sn-l{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);display:grid;gap:2px;padding:8px;border:1px solid var(--line);border-radius:18px;background:var(--bg);box-shadow:0 18px 44px rgba(0,0,0,.18)}
  .sn-l a{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:12px;font-weight:500;color:var(--ink2)}
  .sn-l a:hover{background:var(--hover);color:var(--ink)}
  .sn-l a[aria-current=page]{background:var(--hover);color:var(--ink);font-weight:600}
  .sn-l a.sn-out{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;color:var(--bad)}
}

/* ---- templates: a tight, even showcase with no gaps, and no plain text links ---- */
.tgrid,.tgrid.big,.hx-quick{display:block;column-width:176px;column-gap:16px;width:100%}
.tgrid .tcard,.hx-quick .tcard{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px;width:100%}
.tgrid .tc-art,.hx-quick .tc-art{aspect-ratio:auto}
.tgrid .tc-art>img,.hx-quick .tc-art>img{height:auto;object-fit:contain}
.tgrid .tc-meta,.hx-quick .tc-meta{padding:10px 12px 12px}.tgrid .tc-meta strong,.hx-quick .tc-meta strong{font-size:13.5px}
.tgrid .tcard,.hx-quick .tcard{border-radius:14px}
.lnk,.lnk:hover{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--ink);font:600 13.5px var(--sans);text-decoration:none;transition:background .15s,transform .15s}
.lnk:hover{background:var(--hover);transform:translateY(-1px)}
.hx-more-row{display:flex;justify-content:center;margin:22px 0 8px}
.hx-more,.hx-more:hover{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#fff;font:600 13.5px var(--sans);text-decoration:none;opacity:1;background:rgba(255,255,255,.08)}
.hx-more:hover{background:rgba(255,255,255,.2)}

/* ---- templates: explore row, even masonry, template style ---- */
.tx{margin:4px 0 22px}.tx-h{margin:0 0 14px;font:600 20px var(--sans);letter-spacing:-.02em}
.tx-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;scroll-snap-type:x proximity}.tx-row::-webkit-scrollbar{display:none}
.tx-card{position:relative;flex:none;width:264px;height:132px;border-radius:22px;border:2px solid transparent;overflow:hidden;text-align:left;padding:18px 18px;display:flex;align-items:flex-start;scroll-snap-align:start;transition:transform .2s,box-shadow .2s}
.tx-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}.tx-card[aria-pressed=true]{border-color:var(--ink)}
.tx-t{display:grid;gap:4px;max-width:58%;position:relative;z-index:1}.tx-t strong{font:600 17px/1.15 var(--sans);color:#1B1B1A}.tx-t small{font:500 12px/1.3 var(--sans);color:rgba(0,0,0,.55)}
.tx-art{position:absolute;right:-6px;top:16px;width:104px;border-radius:10px;overflow:hidden;box-shadow:0 10px 24px -8px rgba(0,0,0,.35);transform:rotate(7deg);background:#fff}
.tx-art img{display:block;width:100%;height:auto;opacity:0;transition:opacity .3s}.tx-art img.on{opacity:1}
.tgrid.tv{display:block;column-width:176px;column-gap:16px}
.tgrid.tv .tcard{display:block;break-inside:avoid;margin:0 0 16px;border-radius:14px}
.tgrid.tv .tc-art{background:var(--hover);overflow:hidden}.tgrid.tv .tc-art img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;display:block}.tgrid.tv .tc-art img.on{opacity:1}
.tv-dots{display:flex;gap:3px;margin-top:4px}.tv-dots i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.tv-brands{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.tv-brand{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--line2);border-radius:99px;background:var(--bg);font-weight:550;font-size:13px}
.tv-brand img{height:18px;width:auto;max-width:34px;object-fit:contain}.tv-brand:hover{background:var(--hover)}.tv-brand[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tv-note{color:var(--ink3);font-size:12.5px;margin:6px 0 14px;max-width:70ch}
.tv-more{display:flex;gap:14px;align-items:center;justify-content:center;margin:10px 0 40px}
.tv-m{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:6px}
.tv-stage{display:grid;place-items:center;background:var(--hover);border-radius:18px;padding:18px;min-height:360px}
.tv-stage img{max-width:100%;max-height:70vh;width:auto;height:auto;border-radius:6px;box-shadow:0 14px 40px -16px rgba(0,0,0,.4);background:#fff;opacity:0;transition:opacity .3s}.tv-stage img.on{opacity:1}
.tv-i{display:grid;gap:12px;align-content:start}.tv-i h2{font:600 24px var(--sans);letter-spacing:-.02em}
.tv-style h4,.tv-mh{margin:6px 0 8px;font:600 14px var(--sans)}
.tv-sbox{display:flex;align-items:center;gap:16px;padding:12px;border-radius:16px;background:var(--hover)}
.tv-bar{display:flex;flex:none;width:96px;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}.tv-bar i{flex:1}
.tv-fonts{display:grid;gap:2px;min-width:0}.tv-fonts b{font-size:16px;font-weight:700;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tv-fonts span{font-size:15px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tv-fonts small{font-size:12px;color:var(--ink3)}
.tv-actions{display:flex;gap:10px;margin-top:6px}
.tv-sim{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.tv-s{padding:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--hover)}.tv-s img{display:block;width:100%;height:auto;opacity:0;transition:opacity .3s}.tv-s img.on{opacity:1}
@media(max-width:820px){.tv-m{grid-template-columns:minmax(0,1fr)}.tx-card{width:228px;height:118px}}

/* template preview: palette and fonts first, then the template */
.tv-m{display:flex!important;flex-direction:column;gap:18px;max-width:720px}
.tv-m .tv-i{order:-1}.tv-m .tv-stage{order:0;width:100%;display:flex;justify-content:center}
.tv-m .tv-stage img{max-height:70vh;width:auto;max-width:100%;border-radius:12px;border:1px solid var(--line,#E5E5E0)}
.tv-sw{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px}
.tv-swc{display:grid;gap:3px;justify-items:start;text-align:left;border:1px solid var(--line,#E5E5E0);border-radius:12px;padding:8px;background:var(--card,#fff);min-width:104px;cursor:pointer}
.tv-swc i{display:block;width:100%;height:38px;border-radius:8px;border:1px solid rgba(0,0,0,.1)}
.tv-swc b{font-size:12px;font-weight:600}.tv-swc small{font-size:11px;opacity:.65;font-family:ui-monospace,monospace}
.tv-fl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:8px 0 16px}
.tv-fl>div{border:1px solid var(--line,#E5E5E0);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.tv-fl small{font:600 11px system-ui;opacity:.6;letter-spacing:.04em;text-transform:uppercase}.tv-fl b{font-size:20px}.tv-fl span{font-size:15px;opacity:.75}
.tv-actions{display:flex;flex-wrap:wrap;gap:10px}
/* show more: always a clean, full button */
.tv-more{flex-wrap:wrap}.tv-more .btn{width:auto;min-width:0;flex:0 0 auto;white-space:nowrap;padding:12px 26px;height:auto;line-height:1.2}
.tv-m .tv-i{display:contents}.tv-m .tv-i>*{order:1}.tv-m .tv-stage{order:2}.tv-m .tv-i>.tv-mh,.tv-m .tv-i>.tv-sim,.tv-m .tv-i>.tv-note{order:3}

/* template preview, quiet and clean */
.modal.tvx-modal{width:min(880px,94vw);max-width:none;max-height:92vh;overflow:auto;padding:0;border-radius:22px}
.tvx-h{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 32px 20px;background:var(--bg,#fff);border-bottom:1px solid var(--line,#E7E7E4)}
.tvx-h h2{margin:6px 0 0;font:600 24px/1.2 var(--sans,system-ui);letter-spacing:-.02em}
.tvx-k{font:500 13px var(--sans,system-ui);color:var(--ink3,#767671)}
.tvx-x{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;background:var(--hover,#F3F3F0);display:grid;place-items:center;cursor:pointer;color:var(--ink2,#555)}
.tvx-x:hover{background:var(--line,#E7E7E4);color:var(--ink,#111)}.tvx-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.tvx-body{padding:26px 32px 34px;display:grid;gap:30px}
.tvx-sec h4{margin:0 0 12px;font:600 13px var(--sans,system-ui);color:var(--ink3,#767671);letter-spacing:0}
.tvx-pal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line,#E7E7E4);border-radius:16px;overflow:hidden}
.tvx-c{display:grid;gap:2px;text-align:left;padding:0 0 12px;border:0;border-left:1px solid var(--line,#E7E7E4);background:transparent;cursor:pointer;color:var(--ink,#111)}
.tvx-c:first-child{border-left:0}.tvx-c:hover{background:var(--hover,#F3F3F0)}
.tvx-c i{display:block;height:76px;margin-bottom:10px}
.tvx-c b{padding:0 12px;font:600 13px var(--sans,system-ui)}.tvx-c small{padding:0 12px;font:500 12px ui-monospace,Menlo,monospace;color:var(--ink3,#767671)}
.tvx-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tvx-fonts>div{display:flex;align-items:center;gap:16px;border:1px solid var(--line,#E7E7E4);border-radius:16px;padding:16px 18px}
.tvx-aa{font-size:38px;line-height:1;min-width:58px}.tvx-fn{display:grid;gap:2px;font-family:var(--sans,system-ui)}.tvx-fn b{font-size:15px;font-weight:600}.tvx-fn small{font-size:12px;color:var(--ink3,#767671)}
.tvx-act{display:flex;flex-wrap:wrap;gap:10px}.tvx-act .btn{border-radius:999px;padding:12px 22px;height:auto;font-weight:600}
.tvx-stage{display:grid;place-items:center;background:var(--hover,#F5F5F3);border-radius:20px;padding:32px}
.tvx-stage img{max-width:100%;max-height:64vh;width:auto;height:auto;border-radius:8px;background:#fff;box-shadow:0 18px 50px -22px rgba(0,0,0,.35);opacity:0;transition:opacity .3s}.tvx-stage img.on{opacity:1}
.tvx-note{margin:-12px 0 0;font:400 13px/1.5 var(--sans,system-ui);color:var(--ink3,#767671)}
.tvx .tv-sim{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
@media(max-width:640px){.tvx-h,.tvx-body{padding-left:20px;padding-right:20px}.tvx-pal{grid-template-columns:repeat(3,minmax(0,1fr))}.tvx-c{border-top:1px solid var(--line,#E7E7E4)}.tvx-fonts{grid-template-columns:1fr}.tvx-stage{padding:16px}}
.tvx-act .btn:focus{outline:none;box-shadow:none}.tvx-act .btn:focus-visible{outline:2px solid var(--ink,#111);outline-offset:2px}

/* every colour picker in the app: one clean, rounded swatch (no white rim, no inner box) */
input[type=color]:not(#_){-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;border-radius:var(--cr,10px);overflow:hidden;cursor:pointer;box-shadow:none;outline-offset:2px}
input[type=color]:not(#_)::-webkit-color-swatch-wrapper{padding:0;border-radius:var(--cr,10px)}
input[type=color]:not(#_)::-webkit-color-swatch{border:1px solid rgba(0,0,0,.16);border-radius:var(--cr,10px)}
input[type=color]:not(#_)::-moz-color-swatch{border:1px solid rgba(0,0,0,.16);border-radius:var(--cr,10px)}
input[type=color]:not(#_):hover{filter:brightness(.97)}
input[type=color]:not(#_):focus-visible{outline:2px solid var(--accent,#2F5BEA)}
.chp{--cr:50%}

/* search boxes: a plain, neutral clear (x), not the blue browser one */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-left:6px;cursor:pointer;opacity:.6;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px 16px no-repeat}
input[type=search]::-webkit-search-cancel-button:hover{opacity:1}

/* ---- the calendar's event pop-up: open, spacious, easy ---- */
.modal.ev-modal{width:min(640px,100%);padding:0;border-radius:20px;border:1px solid var(--line,#E5E5E1);box-shadow:0 30px 90px -20px rgba(0,0,0,.35);max-height:calc(100vh - 48px);overflow:auto}
.ev-modal .evh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 28px 6px}
.ev-modal .evh h2{margin:0;font:600 24px/1.15 var(--sans);letter-spacing:-.03em}
.ev-modal .evh p{margin:6px 0 0;color:var(--ink3,#777);font-size:14px}
.ev-modal .evx{width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#E5E5E1);background:var(--bg,#fff);font-size:22px;line-height:1;cursor:pointer;color:var(--ink2,#555)}
.ev-modal .evx:hover{background:var(--hover,#F3F3F0)}
.ev-modal .evf{padding:12px 28px 26px;display:grid;gap:18px}
.ev-modal .evt{width:100%;height:56px;border:0;border-bottom:2px solid var(--line,#E5E5E1);border-radius:0;padding:0 2px;font:600 22px var(--sans);letter-spacing:-.02em;background:transparent;color:inherit;outline:0;transition:border-color .2s}
.ev-modal .evt:focus{border-color:var(--ink,#111)}
.ev-modal .evt::placeholder{color:var(--ink3,#9a9a95);font-weight:500}
.ev-modal .evs{display:grid;gap:8px;margin:0}
.ev-modal .evl{font:600 13px var(--sans);color:var(--ink2,#555)}
.ev-modal .evl .mono{font-weight:400;margin-left:6px;color:var(--ink3,#9a9a95)}
.ev-modal .evg{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ev-modal .inp,.ev-modal .sel{width:100%;height:46px;border-radius:12px;border:1px solid var(--line2,#D9DCE3);padding:0 14px;font:400 15px var(--sans);background:var(--bg,#fff)}
.ev-modal textarea.inp{height:auto;padding:12px 14px;line-height:1.5;resize:vertical}
.ev-modal .inp:focus,.ev-modal .sel:focus{outline:0;border-color:var(--ink,#111);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.ev-modal .evks{display:flex;flex-wrap:wrap;gap:8px}
.ev-modal .evk{position:relative;cursor:pointer}
.ev-modal .evk input{position:absolute;opacity:0;inset:0}
.ev-modal .evk span{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--line2,#D9DCE3);font:500 14px var(--sans);transition:background .15s,border-color .15s}
.ev-modal .evk i{width:9px;height:9px;border-radius:50%}
.ev-modal .evk:hover span{background:var(--hover,#F3F3F0)}
.ev-modal .evk input:checked+span{border-color:var(--ink,#111);background:var(--ink,#111);color:var(--bg,#fff)}
.ev-modal .evk input:focus-visible+span{box-shadow:0 0 0 3px rgba(0,0,0,.18)}
.ev-modal .evq{display:flex;flex-wrap:wrap;gap:6px}
.ev-modal .evq button{height:30px;padding:0 11px;border-radius:99px;border:1px solid var(--line,#E5E5E1);background:var(--bg,#fff);font:500 12.5px var(--sans);color:var(--ink2,#555);cursor:pointer}
.ev-modal .evq button:hover{background:var(--hover,#F3F3F0);color:var(--ink,#111)}
.ev-modal .evsw{display:flex;align-items:center;gap:12px;font:500 14.5px var(--sans);cursor:pointer;margin:0}
.ev-modal .evsw input{position:absolute;opacity:0}
.ev-modal .evsw-t{width:42px;height:24px;border-radius:99px;background:#CFCFC8;position:relative;transition:background .2s;flex:none}
.ev-modal .evsw-t::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.ev-modal .evsw input:checked+.evsw-t{background:var(--ink,#111)}
.ev-modal .evsw input:checked+.evsw-t::after{transform:translateX(18px)}
.ev-modal .evsw input:focus-visible+.evsw-t{box-shadow:0 0 0 3px rgba(0,0,0,.18)}
.ev-modal .mf{margin-top:4px;padding-top:18px;border-top:1px solid var(--line,#E5E5E1);gap:10px}
.ev-modal .mf .btn{height:46px;padding:0 22px;border-radius:12px;font-size:15px}
@media(max-width:560px){.ev-modal .evg{grid-template-columns:1fr}.ev-modal .evh,.ev-modal .evf{padding-left:20px;padding-right:20px}}

/* ---- workspace banners with a background from the admin centre ---- */
.hx-sl{position:relative;overflow:hidden}
.hx-sl>.hx-media{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.hx-sl>.hx-media::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--ov,.4)}
.hx-sl>.hx-media .hx-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease}
.hx-sl>.hx-media .hx-layer.on{opacity:1}
.hx-sl>.hx-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-sl>:not(.hx-media){position:relative;z-index:1}
.hx-sl.has-media.tone-dark>.hx-media::after{background:#fff}
.hx-sl.has-media.tone-dark h3,.hx-sl.has-media.tone-dark p{color:#171613}

/* ---- pop-ups stay steady in the middle of the screen; only the middle of a long one moves ---- */
.modal-root:has(.ev-modal){place-items:center;padding:24px;overflow:hidden}
.modal.ev-modal{display:flex;flex-direction:column;max-height:min(760px,calc(100dvh - 48px));overflow:hidden}
.ev-modal .evh{flex:none}
.ev-modal .evf{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
.ev-modal .evbody{flex:1;min-height:0;overflow:auto;padding:14px 28px 18px;display:grid;gap:18px;align-content:start}
.ev-modal .mf{flex:none;margin:0;padding:16px 28px 20px;border-top:1px solid var(--line,#E5E5E1);background:var(--bg,#fff)}
@media(max-width:560px){.ev-modal .evbody{padding-left:20px;padding-right:20px}.ev-modal .mf{padding-left:20px;padding-right:20px}}

/* ---- in-app pickers ---- */
.cx{position:relative}
.cx-native{display:none!important}
.cx-b{width:100%;height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;border-radius:12px;border:1px solid var(--line2,#D9DCE3);background:var(--bg,#fff);font:400 15px var(--sans);color:inherit;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.cx-b:hover{border-color:var(--ink3,#B9B9B3)}
.cx.open .cx-b,.cx-b:focus-visible{outline:0;border-color:var(--ink,#111);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.cx-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx.cx-none .cx-v{color:var(--ink3,#9a9a95)}
.cx-b svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--ink3,#777)}
.cx-pop{position:fixed;left:0;top:0;z-index:200;background:var(--bg,#fff);border:1px solid var(--line,#E5E5E1);border-radius:14px;box-shadow:0 18px 50px -14px rgba(0,0,0,.3);padding:8px}
.cx-pop[hidden]{display:none}
.cx-list{max-height:260px;overflow:auto;display:grid;gap:2px}
.cx-o{height:40px;padding:0 12px;border-radius:9px;border:0;background:none;text-align:left;font:500 14.5px var(--sans);cursor:pointer;color:inherit}
.cx-o:hover{background:var(--hover,#F3F3F0)}
.cx-o[aria-selected=true]{background:var(--ink,#111);color:var(--bg,#fff)}
.cx-g{padding:8px 12px 4px;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3,#9a9a95)}
.cx-cal{width:304px;padding:12px}
.cx-ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cx-ch b{font:600 15px var(--sans)}
.cx-nav{width:34px;height:34px;border-radius:50%;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:inherit}
.cx-nav:hover{background:var(--hover,#F3F3F0)}
.cx-wd,.cx-dg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cx-wd span{font:600 11px var(--sans);color:var(--ink3,#9a9a95);padding:6px 0}
.cx-d{aspect-ratio:1;border-radius:50%;border:0;background:none;font:500 13.5px var(--sans);cursor:pointer;color:inherit}
.cx-d:hover{background:var(--hover,#F3F3F0)}
.cx-d.out{color:var(--ink3,#B9B9B3)}
.cx-d.today{box-shadow:inset 0 0 0 1.5px var(--ink3,#B9B9B3)}
.cx-d[aria-selected=true]{background:var(--ink,#111);color:var(--bg,#fff);box-shadow:none}
.cx-cf{display:flex;justify-content:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--line,#E5E5E1)}
.cx-cf button,.cx-tf button{height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--line2,#D9DCE3);background:var(--bg,#fff);font:500 13px var(--sans);cursor:pointer}
.cx-cf button:hover,.cx-tf button:hover{background:var(--hover,#F3F3F0)}
.cx-tm{width:288px;padding:12px}
.cx-tg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:216px;overflow:auto;padding-right:2px}
.cx-t{height:36px;border-radius:10px;border:1px solid var(--line,#E5E5E1);background:var(--bg,#fff);font:500 13.5px var(--sans);cursor:pointer}
.cx-t:hover{background:var(--hover,#F3F3F0)}
.cx-t[aria-selected=true]{background:var(--ink,#111);color:var(--bg,#fff);border-color:var(--ink,#111)}
.cx-tf{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line,#E5E5E1)}
.cx-ti{flex:1;min-width:0;height:34px;border-radius:10px;border:1px solid var(--line2,#D9DCE3);padding:0 10px;font:400 13.5px var(--sans)}
.cx-ti.bad{border-color:#C2331F}