/* The hidden attribute always wins: an author display:flex/grid/block on the same
   element would otherwise beat the browser's own [hidden]{display:none}. */
[hidden]{display:none!important}
:root{
  --bg:#F5F8F8; --panel:#FFFFFF; --panel2:#E9F0F0; --ink:#101619; --ink2:#435059; --muted:#626E78;
  --line:#E2E9E9; --line2:#CEDADA;
  --accent:#0E8C7C; --accent-ink:#FFFFFF; --accent-soft:#E2F3F0; --accent-600:#0A6F63;
  --marine:#1F5FD1; --marine-soft:#E7EEFC;
  --ok:#177F42; --ok-soft:#E3F3E9; --warn:#8C6212; --warn-soft:#FAF0DB; --bad:#B3261E; --bad-soft:#FAE8E6; --info:#1F5FD1; --info-soft:#E7EEFC;
  --side:#FAFBFC; --side-ink:#55636D; --side-active:#0E8C7C; --side-hover:#EFF3F4;
  --side-strong:#101619; --side-dim:#8A969C; --side-line:#E4EAEC; --side-veil:rgba(16,22,25,.05);
  --auth-panel:#101619;
  --radius:6px; --radius-lg:14px; --radius-md:10px; --shadow:0 1px 2px rgba(16,22,25,.06);
  --shadow-2:0 4px 14px rgba(16,22,25,.09); --shadow-3:0 16px 40px rgba(16,22,25,.16);
  --s1:#1F5FD1; --s2:#0E8C7C; --s3:#5B8FE8; --s4:#45B3A3; --s5:#9CBCF2; --s6:#8FD3C9;--s7:#163E86;--s8:#0B6357;--s9:#7FA9EE;
  --grad-aura:linear-gradient(135deg,#0E8C7C 0%,#1F5FD1 100%);
  --grad-deep:linear-gradient(120deg,#101619 0%,#13262B 55%,#0C3B37 100%);
  --grad-dawn:linear-gradient(135deg,#8FD3C9 0%,#9CBCF2 100%);
  --grad-glow:radial-gradient(120% 120% at 18% 0%,rgba(14,140,124,.28),rgba(14,140,124,0) 62%);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Instrument Sans","Inter",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1013; --panel:#141A1D; --panel2:#1A2226; --ink:#EFF3F4; --ink2:#B2BEC3; --muted:#8A969C;
    --line:#232C30; --line2:#323D43;
    --accent:#3FBFAC; --accent-ink:#06211C; --accent-soft:#0D2B28; --accent-600:#5FD0BE;
    --marine:#6E9BF5; --marine-soft:#101C33;
    --ok:#3FBF71; --ok-soft:#0F2819; --warn:#D9A43C; --warn-soft:#2A2110; --bad:#E8705F; --bad-soft:#2C1715; --info:#6E9BF5; --info-soft:#101C33;
    --s1:#6E9BF5; --s2:#3FBFAC; --s3:#A7C4FA; --s4:#79D4C6; --s5:#D2E0FB; --s6:#B6E6DD;--s7:#4C7ED8;--s8:#2A9E8C;--s9:#8FB4F7;
    --grad-aura:linear-gradient(135deg,#0E7F71 0%,#1B4FAE 100%);
    --grad-deep:linear-gradient(120deg,#0B1013 0%,#122227 55%,#0B3430 100%);
    --grad-dawn:linear-gradient(135deg,#17403B 0%,#16294A 100%);
    --grad-glow:radial-gradient(120% 120% at 18% 0%,rgba(63,191,172,.22),rgba(63,191,172,0) 62%);
    --side:#080D0F; --side-ink:#B2BEC3; --side-active:#3FBFAC; --side-hover:#182226;
  --side-strong:#FFFFFF; --side-dim:rgba(255,255,255,.42); --side-line:rgba(255,255,255,.08); --side-veil:rgba(255,255,255,.07);
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px rgba(0,0,0,.45); --shadow-3:0 16px 40px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
      --bg:#0B1013; --panel:#141A1D; --panel2:#1A2226; --ink:#EFF3F4; --ink2:#B2BEC3; --muted:#8A969C;
  --line:#232C30; --line2:#323D43;
  --accent:#3FBFAC; --accent-ink:#06211C; --accent-soft:#0D2B28; --accent-600:#5FD0BE;
  --marine:#6E9BF5; --marine-soft:#101C33;
  --ok:#3FBF71; --ok-soft:#0F2819; --warn:#D9A43C; --warn-soft:#2A2110; --bad:#E8705F; --bad-soft:#2C1715; --info:#6E9BF5; --info-soft:#101C33;
  --s1:#6E9BF5; --s2:#3FBFAC; --s3:#A7C4FA; --s4:#79D4C6; --s5:#D2E0FB; --s6:#B6E6DD;
  --grad-aura:linear-gradient(135deg,#0E7F71 0%,#1B4FAE 100%);
  --grad-deep:linear-gradient(120deg,#0B1013 0%,#122227 55%,#0B3430 100%);
  --grad-dawn:linear-gradient(135deg,#17403B 0%,#16294A 100%);
  --grad-glow:radial-gradient(120% 120% at 18% 0%,rgba(63,191,172,.22),rgba(63,191,172,0) 62%);
  --side:#080D0F; --side-ink:#B2BEC3; --side-active:#3FBFAC; --side-hover:#182226;
  --side-strong:#FFFFFF; --side-dim:rgba(255,255,255,.42); --side-line:rgba(255,255,255,.08); --side-veil:rgba(255,255,255,.07);
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px rgba(0,0,0,.45); --shadow-3:0 16px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:6px 9px}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
a{color:var(--accent)}
.app{display:flex;min-height:100%}
.side{width:200px;flex:0 0 200px;background:var(--side);color:var(--side-strong);border-right:1px solid var(--side-line);padding:0;position:sticky;top:0;height:100vh;overflow:visible;font-size:13px}
.wpitem{display:flex;align-items:center;gap:9px;padding:9px 12px;color:var(--side-strong);line-height:1.3;cursor:default}
.wpcore .wpitem{color:var(--side-ink)}
.wpcore .wpitem:hover{background:var(--side);color:var(--side-strong)}
.wpitem .ico{width:16px;text-align:center;font-size:14px;opacity:.8;flex:0 0 16px}
.wpitem.cur{background:var(--accent);color:var(--accent-ink);font-weight:600}
.wpitem.cur .ico{opacity:1}
.nav{background:var(--side);padding:6px 0;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.nav-group{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--side-dim);padding:9px 12px 3px;margin-top:2px;border-top:1px solid var(--side-line)}
.nav-group:first-child{border-top:0;margin-top:0}
.nav button{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;text-align:left;background:none;border:0;padding:6px 12px 6px 22px;color:var(--side-ink);font-size:13px;line-height:1.4}
.nav button:hover{color:var(--side-strong)}
.nav button.active{color:var(--side-strong);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.nav .cnt{font-family:var(--mono);font-size:10.5px;background:var(--bad);color:#fff;padding:0 6px;border-radius:9px;line-height:17px;min-width:17px;text-align:center}
.nav .cnt.hot{background:var(--bad);color:#fff}
.main{flex:1;min-width:0;padding:0 24px 40px}
.app.auth .side,.app.auth .appbar,.app.auth .mobilenav,.app.auth .proto{display:none}
.app.auth .main{padding:0}
.authwrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);background:var(--bg)}
@media (max-width:900px){.authwrap{grid-template-columns:1fr}.authside{display:none}}
.authside{background:var(--auth-panel);color:#fff;padding:40px 40px;display:flex;flex-direction:column;justify-content:space-between}
.authside .bmark{width:30px;height:30px;flex:0 0 30px;font-size:15px}
.authside h2{font-size:26px;line-height:1.25;margin:0 0 12px;font-weight:600;max-width:420px}
.authside p{color:#AEBAC9;font-size:14px;line-height:1.55;max-width:430px;margin:0}
.authpts{display:flex;flex-direction:column;gap:11px;margin-top:26px}
.authpts div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#C9D4D1}
.authpts i{width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:var(--side-active);color:#04211C;display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;margin-top:1px}
.authside .foot{font-size:11.5px;color:#7E8EA3}
.authform{display:flex;align-items:center;justify-content:center;padding:34px 30px}
.authcard{width:100%;max-width:400px}
.authcard h1{font-size:22px;margin:0 0 4px;font-weight:600}
.authcard .lead{color:var(--muted);font-size:13px;margin-bottom:20px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:1px solid var(--line2);background:var(--panel);border-radius:var(--radius);padding:9px 12px;font-size:13.5px;font-weight:500}
.gbtn:hover{border-color:var(--accent)}
.gbtn svg{width:16px;height:16px;flex:0 0 16px}
.authsep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11.5px;margin:16px 0}
.authsep::before,.authsep::after{content:'';flex:1;height:1px;background:var(--line)}
.authcard .field{margin-bottom:12px}
.chk.one{align-items:center;white-space:nowrap;font-size:12.5px;margin-bottom:14px}
.chk.one input{margin:0}
.authcard input{width:100%;padding:9px 11px}
.authcard .btn.primary{width:100%;padding:9px 12px;justify-content:center}
.authmeta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin:2px 0 16px}
.authalt{text-align:center;font-size:12.5px;color:var(--muted);margin-top:18px}
.authalt a,.linkbtn{color:var(--accent);border:0;background:none;padding:0;font-size:inherit;font-weight:500;cursor:pointer}
.codebox{display:flex;gap:8px;justify-content:center;margin:6px 0 14px}
.codebox input{width:44px;height:52px;text-align:center;font-size:20px;font-family:var(--mono);padding:0}
.authnote{background:var(--accent-soft);color:var(--accent);border-radius:var(--radius);padding:10px 12px;font-size:12.5px;line-height:1.5}
.onbwrap{max-width:900px;margin:0 auto;padding:18px 0 40px}
.onbwrap.wide{max-width:1260px}
.onbsteps{display:flex;gap:0;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.onbstep{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.onbstep i{width:24px;height:24px;flex:0 0 24px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono);background:var(--panel)}
.onbstep.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.onbstep.now{color:var(--ink);font-weight:600}
.onbstep.now i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.onbline{flex:1;min-width:16px;height:1px;background:var(--line2);margin:0 8px}
.onbcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.onbcard h2{margin:0 0 4px;font-size:18px;font-weight:600}
.onbcard .lead{color:var(--muted);font-size:13px;margin-bottom:16px}
.onbfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.pick{display:grid;gap:10px}
.pick button{display:flex;gap:11px;align-items:flex-start;text-align:left;border:1px solid var(--line2);background:var(--panel);border-radius:var(--radius);padding:12px 14px;width:100%}
.pick button:hover{border-color:var(--accent)}
.pick button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.pick .pi{width:26px;height:26px;flex:0 0 26px;border-radius:6px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:13px}
.pick b{display:block;font-size:13.5px}
.pick p{margin:2px 0 0;font-size:12.5px;color:var(--ink2)}
.impbar{height:10px;border-radius:5px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.impbar i{display:block;height:100%;background:var(--accent);transition:width .3s}
@media (prefers-reduced-motion: reduce){.impbar i{transition:none}}
.brand{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--side-line)}
.bmark{width:26px;height:26px;flex:0 0 26px;display:flex;align-items:center;justify-content:center}
.bmk{width:26px;height:26px;display:block}
.authside .bmk{width:30px;height:30px}
.btext{display:flex;flex-direction:column;line-height:1.2;color:var(--side-strong)}
.btext b{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.025em}
.btext .small{font-size:10.5px;color:var(--side-dim)}
.sidefoot{margin-top:auto;position:sticky;bottom:0;background:var(--side);box-shadow:0 -10px 18px var(--side)}
.sidetools{display:flex;justify-content:flex-end;padding:6px 10px 10px}
.sidecol{width:26px;height:26px;border-radius:6px;border:1px solid var(--side-line);background:none;color:var(--side-dim);font-size:11px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.sidecol:hover{color:var(--side-strong);background:var(--side-veil);border-color:var(--side-line)}
.sideuser{position:relative;padding:8px 10px 10px;border-top:1px solid var(--side-line)}
.ubtn{display:flex;align-items:center;gap:9px;width:100%;border:1px solid transparent;background:none;border-radius:8px;padding:7px 8px;text-align:left;color:#C9D4D1}
.ubtn:hover,.ubtn.on{background:var(--side-veil);border-color:var(--side-line)}
.ubtn .avat{width:28px;height:28px;flex:0 0 28px;font-size:11px;background:var(--side-active);color:#04211C;font-weight:600}
.ubtn .su{min-width:0;flex:1}
.ubtn b{display:block;font-size:12.5px;color:var(--side-strong);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubtn .su span{font-size:10.5px;color:var(--side-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.ubtn .chev{color:var(--side-dim);font-size:10px}
.upop{position:absolute;bottom:calc(100% - 4px);left:10px;right:auto;width:250px;z-index:60;background:var(--panel);border:1px solid var(--line2);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.4);padding:5px;min-width:212px}
.upop .uhead{display:flex;gap:9px;align-items:center;padding:8px 8px 9px;border-bottom:1px solid var(--line);margin-bottom:4px}
.upop .uhead b{display:block;font-size:13px}
.upop .uhead span{font-size:11px;color:var(--muted);font-family:var(--mono)}
.upop button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;text-align:left;padding:7px 8px;border-radius:5px;font-size:12.5px;color:var(--ink2)}
.upop button:hover{background:var(--panel2);color:var(--accent)}
.upop button .ui{width:16px;text-align:center;font-size:12px;color:var(--muted)}
.upop button:hover .ui{color:var(--accent)}
.upop .sep{height:1px;background:var(--line);margin:4px 0}
.upop .plan{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-size:11.5px;color:var(--muted)}
.side{display:flex;flex-direction:column}
.appbar{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:12px;background:var(--panel);border-bottom:1px solid var(--line);margin:0 -24px 0;padding:8px 24px;flex-wrap:wrap;min-height:52px}
.pgttl{min-width:0;flex:0 1 auto;max-width:46%}
.pgacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pgacts .tb-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pgacts .row{gap:8px}
.pgacts h3{display:none}
@media (max-width:1240px){.pgttl .sub{display:none}}
.notif{position:relative;display:flex;align-items:center;gap:6px}
.ncat{flex:0 0 auto;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--nc,var(--muted));border-radius:9px;padding:2px 7px;line-height:1.5}
.iconbtn.bell{position:relative}
.iconbtn.bell.on{border-color:var(--accent);color:var(--accent)}
.iconbtn .badge{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;border-radius:8px;background:var(--bad);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:1.5px solid var(--panel)}

.pgttl h1{margin:0;font-family:var(--display);font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.pgttl .sub{font-size:11.5px;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60ch}
.acctbtn .sync{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);font-family:var(--sans);white-space:nowrap}
.acctbtn .chev{width:16px;height:16px;flex:0 0 16px;color:var(--ink2);display:block}
.acctbtn:hover .chev{color:var(--accent)}
.acctbtn .sync i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block}
.acctbtn .mkline{font-family:var(--mono);color:var(--ink2)}
.acctbtn .sep2{opacity:.5}
.acctbtn .sync.warn i{background:var(--warn)}
.acctbtn .sync.bad i{background:var(--bad)}
.acctbtn .sync.ok i{background:var(--ok)}

/* one dot per store in the switcher, same three colours */
.acctpop .dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ok);display:block}
.acctpop .dot.warn{background:var(--warn)}
.acctpop .dot.bad{background:var(--bad)}
.acctpop form{margin:0}

/* switching store reloads every number on the page, so it says it is working */
/* display:flex beats the [hidden] attribute's own display:none, so the veil
   has to be told to stay out of the way explicitly. */
.switching[hidden]{display:none}
.switching{position:fixed;inset:0;z-index:80;background:rgba(255,255,255,.66);
  display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--ink2)}
.switching .spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--accent);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.main .topbar{padding:0;border-bottom:0;margin:0 0 16px}
#screen{padding-top:18px}
.pagebar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pb-left,.pb-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pb-right{margin-left:auto;justify-content:flex-end}
.pb-left .row,.pb-right .row{gap:8px}
.pagebar h3{display:none}
.acct{position:relative}
.acctbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--panel);border-radius:var(--radius);padding:4px 8px 4px 6px;font-size:13px;max-width:260px}
.acctbtn:hover{border-color:var(--accent)}
.acctbtn .avat{width:22px;height:22px;flex:0 0 22px;font-size:10px}
.acctbtn .an{display:flex;flex-direction:column;line-height:1.25;text-align:left;min-width:0}
.acctbtn .an b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.acctbtn .an span{font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.acctpop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:280px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:0 12px 30px rgba(0,0,0,.2);padding:5px}
.acctpop .h{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:5px 8px 3px}
.acctpop button .ui{width:16px;text-align:center;font-size:12px;color:var(--muted)}
.acctpop button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;text-align:left;padding:7px 8px;border-radius:4px;font-size:12.5px;color:var(--ink2)}
.acctpop button:hover{background:var(--panel2);color:var(--accent)}
.acctpop button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.acctpop .sep{height:1px;background:var(--line);margin:4px 0}
.synced{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:4px 11px}
.synced i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
.synced.warn i{background:var(--warn)}
.abspace{margin-left:auto;display:flex;align-items:center;gap:8px}
/* AI spend this month: the switcher's height, a label over the number, a hairline bar under it. */
.aispend{display:flex;flex-direction:column;justify-content:center;gap:0;height:39px;box-sizing:border-box;padding:3px 10px 5px;line-height:1.2;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);text-decoration:none;color:var(--ink);min-width:150px;position:relative;overflow:hidden}
.aispend:hover{border-color:var(--accent)}
.aispend .aislab{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.aispend b{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.aispend b .muted{font-weight:400}
.aispend .aisbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line);display:block}
.aispend .aisbar i{display:block;height:100%;background:var(--accent)}
.aispend.warn .aisbar i{background:var(--warn)}
.aispend.over{border-color:var(--bad)}.aispend.over .aisbar i{background:var(--bad)}
.iconbtn{border:1px solid var(--line2);background:var(--panel);border-radius:var(--radius);width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink2);padding:0;flex:0 0 40px}
.iconbtn svg{width:18px;height:18px}
.appbar .btn{min-height:40px}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn .dot{position:absolute;margin:-12px 0 0 12px;width:7px;height:7px;border-radius:50%;background:var(--bad)}
.iconbtn .bdot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel)}
.iconbtn{position:relative}
@media (max-width:820px){.appbar{margin:0 -16px;padding:9px 16px;top:var(--mobilewarn-h,34px)}}

.mobilewarn{display:none}
@media (max-width:820px){
  .mobilewarn{display:block;position:sticky;top:0;z-index:60;background:#dc2626;color:#fff;
              text-align:center;font-size:12px;font-weight:600;line-height:1.4;padding:7px 14px}
}
.side.sidemini .brand{justify-content:center;padding:14px 0 12px}
.side.sidemini .btext,.side.sidemini .ubtn .su,.side.sidemini .ubtn .chev{display:none}
.side.sidemini .sidetools{justify-content:center;padding:6px 0 10px}
.side.sidemini .upop{left:8px;right:auto;width:212px}
.side.sidemini .sideuser{padding:8px 4px 10px}
.side.sidemini .ubtn{justify-content:center;padding:7px 0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.topbar h1{font-family:var(--display);font-size:19px;margin:0;font-weight:600;letter-spacing:-.02em}
.topbar .sub{color:var(--muted);font-size:13px}
.tb-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.seg button,.seg a{border:0;background:none;padding:6px 11px;font-size:13px;color:var(--ink2);
  text-decoration:none;display:inline-block}
.seg button.on,.seg a.on{background:var(--accent);color:var(--accent-ink)}
.btn[hidden]{display:none}   /* .btn's own display would otherwise beat the browser's [hidden] */
.btn{border:1px solid var(--line2);background:var(--panel);border-radius:var(--radius);padding:6px 12px;font-size:13px;font-weight:500;
  /* a button is a button whether it is a <button> or a link */
  text-decoration:none;display:inline-block;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.btn.primary:hover{background:var(--ink2);border-color:var(--ink2)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-600);border-color:var(--accent-600)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.bad{background:none;border-color:var(--bad);color:var(--bad)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.ghost{background:none}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g32{grid-template-columns:3fr 2fr}
.g23{grid-template-columns:2fr 3fr}
.segbuild{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
.segbuild .segside{position:sticky;top:76px}
@media (max-width:900px){.segbuild{grid-template-columns:1fr}.segbuild .segside{position:static}}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.side{display:none}.main{padding:0 16px 32px}.g4,.g3,.g2,.g32,.g23{grid-template-columns:1fr}.mobilenav{display:block}}
.mobilenav{display:none;margin:12px 0}
.mobilenav select{width:100%}

.navtoggle{display:none}
body.noscroll{overflow:hidden}
.sidebackdrop{display:none}
@media (max-width:820px){
  .navtoggle{display:inline-flex;order:-1}
  .side.mobopen{display:flex;position:fixed;top:var(--mobilewarn-h,34px);left:0;bottom:0;width:240px;flex:0 0 240px;z-index:50;box-shadow:0 10px 40px rgba(15,17,21,.3)}
  .sidebackdrop:not([hidden]){display:block;position:fixed;inset:0;top:var(--mobilewarn-h,34px);background:rgba(15,17,21,.4);z-index:45}
}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* A template picker: no free text, just which approved message and what
   fills its slots — and a bubble so choosing one looks like something rather
   than reading like a form. */
.tplpicker{display:grid;gap:8px}
.tplopt{display:block;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);
  padding:10px 12px;cursor:pointer}
.tplopt:hover{border-color:var(--accent)}
.tplopt.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.tplopt input{position:absolute;opacity:0;pointer-events:none}
.tplhd{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.tplhd .pill{margin-left:auto}

.msgphone{display:flex;justify-content:center;padding:10px 0}
.msgbubble{max-width:280px;padding:10px 14px;border-radius:14px 14px 14px 2px;font-size:13.5px;
  line-height:1.45;white-space:pre-wrap;box-shadow:var(--shadow)}
.msgphone.whatsapp .msgbubble{background:#DCF8C6;color:#111b0e}
.msgphone.viber .msgbubble{background:#7360F2;color:#fff}
.msgphone.sms .msgbubble{background:#E9E9EB;color:#111;border-radius:16px}

.cancelcard{border-color:var(--warn,#e0a000);background:var(--warn-soft,#fff7e6);transition:opacity .3s}
.cancelcard.spent{opacity:.55}
.cancelring{--left:1;width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--left) * 360deg), var(--line2) 0);
  transition:background .3s linear}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card .hd h3{margin:0;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.01em}
.card .bd{padding:14px 16px}
.stat{padding:14px 16px}
.stat .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat .v{font-size:26px;font-weight:600;font-family:var(--mono);margin:4px 0 2px;font-variant-numeric:tabular-nums}
.stat .d{font-size:12px;color:var(--ink2)}
.pill{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:10px;font-weight:500;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.neutral{background:var(--panel2);color:var(--ink2);border:1px solid var(--line)}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}
.mono{font-family:var(--mono);font-size:12.5px}
.muted{color:var(--muted)}
.small{font-size:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:4px}
.field[hidden]{display:none}   /* display:flex above beats the browser's own [hidden] rule */
.field label{font-size:12px;color:var(--ink2);font-weight:500}
.hint{font-size:12px;color:var(--muted)}
.bar{height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.bar i.ok{background:var(--ok)}.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--bad)}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--radius);font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.day{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-height:118px;padding:8px;display:flex;flex-direction:column;gap:6px}
.day.off{opacity:.45}
.day .dn{font-size:11.5px;color:var(--muted);font-family:var(--mono);display:flex;justify-content:space-between}
.item{font-size:12px;padding:5px 7px;border-radius:4px;border-left:3px solid var(--line2);background:var(--panel2);cursor:pointer;display:flex;flex-direction:column;gap:3px}
.item .top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.item .lab{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:3px;color:#fff;font-weight:500;white-space:nowrap}
.item .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.item:hover{outline:1px solid var(--accent)}
.item.email{border-left-color:#1F5FD1}.item.sms{border-left-color:#0E8C7C}.item.social{border-left-color:#9CBCF2}.item.ad{border-left-color:#8FD3C9}.item.whatsapp{border-left-color:#45B3A3}.item.viber{border-left-color:#5B8FE8}
/* A campaign in a day cell is a link to it. */
a.item{text-decoration:none;color:inherit}
.lab.ok{background:var(--ok)}
.lab.accent{background:var(--accent)}
.lab.warn{background:var(--warn)}
.lab.neutral{background:var(--muted)}
.day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.day.today .dn{color:var(--accent)}
/* Drafts with no send date, beside the calendar rather than on it. */
.undated{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit;
  font-size:12.5px;padding:5px 9px;border:1px solid var(--line2);border-radius:999px;background:var(--panel2)}
.undated:hover{border-color:var(--accent)}
.item .st{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--warn)}
.item .st.ok{background:var(--ok)}.item .st.bad{background:var(--bad)}.item .st.gen{background:var(--muted)}
@media (max-width:1100px){.cal{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.cal{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* review */
.review{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.asset{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.asset .img{aspect-ratio:4/5;max-width:100%;display:flex;align-items:flex-end;padding:10px;color:#fff;font-weight:600;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.5);position:relative;overflow:hidden;background:var(--panel2)}
.asset .img svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.asset .img>span{position:relative;z-index:2}
.asset .img .tag{position:absolute;top:8px;left:8px;font-size:9px;background:rgba(0,0,0,.5);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-weight:400;opacity:.85}
/* the shelf a file is on: bottom right, as quiet as the pixel size */
.asset .img .cat{position:absolute;bottom:8px;right:8px;z-index:3;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px;font-weight:400;background:rgba(0,0,0,.5);color:#fff;padding:1px 5px;border-radius:3px;font-family:var(--mono);text-shadow:none;opacity:.85}
/* the ✕ in the corner: quiet until the card is under the mouse, red when it is */
.asset .img .delxf{position:absolute;top:6px;right:6px;z-index:4;margin:0}
.asset .img .delx{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,14,16,.55);
  color:#fff;font-size:11px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s,background .12s;text-shadow:none}
.asset:hover .img .delx,.asset .img .delx:focus-visible{opacity:1}
.asset .img .delx:hover{background:var(--bad);border-color:var(--bad)}
@media (prefers-reduced-motion:reduce){.asset .img .delx{transition:none}}
/* selecting several: the check on a card, the selected ring, the bar of what can be done */
.asset .selchk{position:absolute;top:6px;left:6px;z-index:4;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);
  background:rgba(10,14,16,.45);display:none;align-items:center;justify-content:center;pointer-events:none}
.asset .selchk::after{content:'';width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg);opacity:0}
.mediadrop.selecting .asset .selchk,.asset.sel .selchk{display:flex}
.asset.sel .selchk{background:var(--accent);border-color:var(--accent)}
.asset.sel .selchk::after{opacity:1}
.asset.sel{outline:2px solid var(--accent);outline-offset:1px}
.mediadrop.selecting .asset .img{cursor:default}
.mediadrop.selecting .asset .img .tag{left:32px}
.asset .meta{cursor:pointer;user-select:none}
.selbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:8px 12px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);font-size:13px}
.selbar[hidden]{display:none}
/* a video under the mouse plays over its still */
.asset .img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;background:#000}
/* While a file is being optimised or converted, over the picture itself. The
   veil is dark in both themes because it sits on the image, not on the page. */
.asset .img>.working{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;background:rgba(10,14,16,.58);
  backdrop-filter:blur(1.5px);text-shadow:none}
.asset .img>.working .spin{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;animation:spin .7s linear infinite}
.asset .img>.working .wlbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--mono);font-weight:400;color:#fff}
@media (prefers-reduced-motion:reduce){
  .asset .img>.working .spin{animation-duration:2.4s}
}
.asset .meta{padding:8px 10px;font-size:12px;color:var(--ink2);display:flex;flex-direction:column;gap:6px}
.asset.approved{outline:2px solid var(--ok)}
.asset.rejected{opacity:.4}
.asset .acts{display:flex;gap:6px}
.asset .acts .btn{flex:1;text-align:center}

/* media library — drop-anywhere upload and its progress tray */
.mediadrop{position:relative;min-height:120px}
/* the frame that says the whole page takes a drop */
.libdrop{border:2px dashed var(--line2);border-radius:var(--radius);padding:14px;transition:border-color .12s,background .12s}
.mediadrop.over .libdrop{border-color:var(--accent);background:var(--accent-soft)}
.libdrop-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px;margin:0 0 14px}
.libdrop-hint svg{flex:0 0 auto}
.mediadrop-veil{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;background:var(--accent-soft);border:3px dashed var(--accent);pointer-events:none}
.mediadrop-veil span{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 18px;font-size:14px;font-weight:600;color:var(--accent)}
.mediadrop.over .mediadrop-veil{display:flex}
/* the notice stack — every passing notice, top right, newest at the bottom */
.notices{position:fixed;top:72px;right:24px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;width:360px;max-width:calc(100vw - 32px);pointer-events:none}
.ntc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.16);
  font-size:13.5px;color:var(--ink);pointer-events:auto;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.ntc.show{opacity:1;transform:none}
.ntc .ntclabel{overflow-wrap:anywhere}
.ntc{cursor:pointer}
.ntc .bar{height:6px;margin-top:8px}
.ntc.ok{border-color:var(--ok)}
.ntc.bad{border-color:var(--bad)}
.ntc.bad .ntclabel{color:var(--bad)}
@media (prefers-reduced-motion:reduce){.ntc{transition:none}}
/* what somebody buys again and again */
.favlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.favlist li{display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  padding:6px 0;border-bottom:1px solid var(--line)}
.favlist li:last-child{border-bottom:0}
.favname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.favqty{color:var(--ink2);flex:0 0 auto}

/* brand kit: tone words, palette rows, reference picking */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* The font field: the whole list under it on a click, narrowed by typing. */
.pricerow{display:grid;grid-template-columns:1fr 150px;gap:6px}
.combo{position:relative}
.combo input{width:100%;padding-right:28px}
.combo input[data-currencyinput]{text-transform:uppercase}
.combo-open{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:11px;padding:4px 7px;border-radius:4px;cursor:pointer}
.combo-x{position:absolute;right:26px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:15px;line-height:1;padding:2px 6px;border-radius:4px;cursor:pointer}
.combo-x:hover{color:var(--bad);background:var(--panel2)}
.combo:has(.combo-x:not([hidden])) input{padding-right:52px}
.combomenu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:9;max-height:240px;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:var(--shadow-3);padding:4px;min-width:240px}
.combomenu button{padding:5px 8px;font-size:12.5px;gap:6px}
.fontpick{position:relative}
.fontpick input{width:100%;padding-right:30px}
.fontpick-open{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:11px;padding:4px 7px;border-radius:4px;cursor:pointer}
.fontpick-open:hover{color:var(--accent);background:var(--panel2)}
.fontmenu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:9;max-height:280px;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:var(--shadow-3);padding:4px}
.fontmenu button{padding:5px 8px;font-size:13px;flex-direction:column;align-items:flex-start;gap:1px}
.fontmenu-name{font-size:11px;color:var(--muted);text-align:left;width:100%}
.fontmenu-sample{font-size:15px;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fontmenu-sep{padding:6px 8px 2px;text-transform:uppercase;letter-spacing:.04em;font-size:10px}
/* A field of chips: the list inside the border, the typing space after the last one. */
.chipfield{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:34px;padding:4px 6px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);cursor:text}
.chipfield:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chipfield .chip.tag{background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:2px 4px 2px 9px;font-size:12px;gap:3px}
.chipfield .chipx{border:0;background:none;color:var(--muted);font-size:10px;line-height:1;padding:3px 5px;border-radius:50%;cursor:pointer}
.chipfield .chipx:hover{background:var(--panel);color:var(--bad)}
.chipfield input[type=text]{flex:1;min-width:110px;border:0;background:none;box-shadow:none;padding:3px 4px}
.chipfield input[type=text]:focus{border:0;box-shadow:none;outline:0}
.chip{display:inline-flex;align-items:center;gap:5px}
.chipx{background:none;border:0;padding:0;line-height:1;font-size:14px;color:inherit;opacity:.55;cursor:pointer}
.chipx:hover{opacity:1}
.tagbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line2);border-radius:var(--radius);padding:6px;background:var(--panel);cursor:text;min-height:40px}
.tagbox:focus-within{border-color:var(--accent)}
.tagbox .tag-in{display:inline-flex;align-items:center;gap:2px;background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:3px 6px 3px 10px;max-width:100%}
.tagbox input{border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);outline:none;padding:0;min-width:0}
.tagbox .tagadd{flex:1;min-width:140px;padding:4px 6px;color:var(--ink)}
.tagbox .tagadd::placeholder{color:var(--muted)}
.chipadd{border:1px dashed var(--line2);background:transparent;border-radius:999px;
  padding:3px 10px;font-size:12px;flex:1 1 150px;min-width:0}
.palrow{display:grid;grid-template-columns:34px 92px minmax(0,1fr) auto;gap:8px;align-items:center}
.palrow input[type=color]{width:34px;height:30px;padding:2px;border:1px solid var(--line2);
  border-radius:6px;background:var(--panel)}
.refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
/* A logo is usually transparent, and a white mark on a white tile is an empty
   box. The chequer says "this is the file", not "this is your background". */
.lsprev:not(.dark),.refpick,.asset .img{
  background-color:#fff;
  background-image:linear-gradient(45deg,#e8ebee 25%,transparent 25%,transparent 75%,#e8ebee 75%),
                   linear-gradient(45deg,#e8ebee 25%,transparent 25%,transparent 75%,#e8ebee 75%);
  background-size:12px 12px;background-position:0 0,6px 6px}
.refpick{position:relative;aspect-ratio:1;border:1px solid var(--line2);border-radius:6px;
  overflow:hidden;cursor:pointer;display:block}
.refpick img{width:100%;height:100%;object-fit:cover;display:block}
.refpick input{position:absolute;top:4px;left:4px;z-index:2;margin:0}
.refpick.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* media library: real files rather than the prototype's drawn placeholders */
/* A video with no frame of itself yet: the design system's light gradient
   under the play mark, rather than the chequer that means "transparent". */
.asset .img.vidph{background-image:var(--grad-dawn);background-size:auto;background-position:0 0}
.asset .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.asset .img.fit img{object-fit:contain;padding:14px}
.asset .img .kindmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--muted);text-shadow:none}
/* The same mark over a frame of the video rather than over empty grey: white,
   in a disc, so it reads on a bright shot as well as a dark one. */
.asset .img>.kindmark.over{z-index:2;color:#fff;font-size:15px;pointer-events:none}
/* inset + auto margins, not a bare absolute: inside a flex box an offsetless
   absolute child is placed at the container's start, not at its centre. */
.asset .img>.kindmark.over::before{content:'';position:absolute;inset:0;margin:auto;
  width:38px;height:38px;border-radius:50%;background:rgba(10,14,16,.5);
  backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.35);
  /* z-index:-1, because a positioned ::before otherwise paints over the very
     glyph it is supposed to sit behind. The parent's own z-index keeps it
     inside this card rather than behind the picture. */
  z-index:-1}
.asset .img>.kindmark.over{padding-left:2px}   /* a triangle looks off-centre in a circle */
/* a card in the library opens the file; its own Delete form stops the click */
.asset .img{cursor:pointer}
/* the panel a library file opens into: the file itself, and what is known
   about it beside it. Stacks on a narrow screen, picture first. */
.assetview{max-width:1080px}
.assetbody{display:grid;grid-template-columns:minmax(0,1fr) 320px}
.assetstage{display:flex;align-items:center;justify-content:center;padding:18px;min-height:340px;
  background:var(--panel2);border-right:1px solid var(--line)}
.assetstage img,.assetstage video{max-width:100%;max-height:62vh;display:block;border-radius:var(--radius)}
.assetstage .kindmark.big{font-size:34px;color:var(--muted);font-family:var(--mono)}
.assetside{padding:16px 18px;overflow-y:auto;max-height:62vh}
.assetside .kv{grid-template-columns:88px 1fr}
@media (max-width:820px){
  .assetbody{grid-template-columns:1fr}
  .assetstage{border-right:0;border-bottom:1px solid var(--line);min-height:220px}
  .assetside{max-height:none}
}
/* flows */
.flow{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.node{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:9px 12px;min-width:260px;cursor:pointer;display:flex;gap:10px;align-items:center}
.node:hover,.node.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.node .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-family:var(--mono);width:64px;flex:0 0 64px}
.node .t{font-weight:500}
.node .s{font-size:12px;color:var(--muted)}
.edge{width:2px;height:18px;background:var(--line2);margin-left:24px}
.chan{display:inline-flex;gap:4px;flex-wrap:wrap}
.chan span{font-size:10.5px;padding:1px 6px;border:1px solid var(--line2);border-radius:3px;font-family:var(--mono)}
.chan span.first{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
/* preview */
.emailprev{border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:#1C2230;padding:0;overflow:hidden;font-size:13px}
.emailprev .eh{background:#1C2230;color:#fff;padding:14px 18px;font-weight:600;letter-spacing:.04em}
.emailprev .eb{padding:16px 18px}
.emailprev .hero{height:120px;border-radius:4px;background:linear-gradient(135deg,#0F6E6C,#3FB3B0);margin-bottom:12px}
.emailprev .cta{display:inline-block;background:#0F6E6C;color:#fff;padding:8px 14px;border-radius:4px;margin-top:8px;font-weight:600}
.emailprev .ef{padding:10px 18px;border-top:1px solid #E1E4EA;font-size:11px;color:#6B7585}
.lanes .lane{display:grid;grid-template-columns:120px 1fr 90px 90px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.lanes .lane:last-child{border-bottom:0}
.spark{width:100%;height:110px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.step{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .n{width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center;flex:0 0 22px}
.step .n.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.step .n.warn{background:var(--warn);border-color:var(--warn);color:#1C2230}
.mode{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode .opt{border:1px solid var(--line2);border-radius:var(--radius);padding:12px 14px;cursor:pointer;background:var(--panel)}
.mode .opt.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.mode .opt b{display:block;margin-bottom:4px}
.mode .opt p{margin:0;font-size:12.5px;color:var(--ink2)}

.planpick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 16px}
@media (max-width:640px){.planpick{grid-template-columns:1fr}}
/* The landing page's pricing cards (pages/home, .price .card), as a choice. */
.planopt{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line2);border-radius:var(--radius);padding:18px;
  cursor:pointer;background:var(--panel);align-self:start}
.planopt.best{border-color:var(--accent)}
.planopt.on,.planopt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.planopt input{position:absolute;opacity:0;pointer-events:none}
.planhd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:-8px}
.planhd b{font-size:15px}
.planamt{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.planamt span{font-family:var(--font-ui);font-size:12.5px;color:var(--muted);font-weight:400;letter-spacing:0}
.planopt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--ink2)}
.planopt li{display:flex;gap:8px;align-items:flex-start;white-space:nowrap}
@media (max-width:640px){.planopt li{white-space:normal}}
.planopt li::before{content:"✓";color:var(--accent);font-size:12px;line-height:1.5;flex:0 0 auto}
.planopt li:empty::before,.planopt li.blank::before{visibility:hidden}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button,.tabs a{background:none;border:0;padding:8px 12px;font-size:13px;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none;display:inline-block}
.tabs button.on,.tabs a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.swatch{display:inline-block;width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.12);vertical-align:middle;margin-right:6px}
.note{background:var(--warn-soft);color:var(--warn);border-radius:var(--radius);padding:8px 12px;font-size:12.5px}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.note.info{background:var(--info-soft);color:var(--info)}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink2);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
/* A legend entry that is also the switch for its series on the chart below. */
.legend .tog{cursor:pointer;user-select:none;opacity:.45;border-radius:4px}
.legend .tog.on{opacity:1}
.legend .tog:hover{color:var(--ink)}
.legend .tog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.condrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.condrow select,.condrow input{flex:1;min-width:110px}
.condunit{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.condunit input{flex:0 0 72px;min-width:72px}
[data-readonly] [data-remove]{display:none}
[data-readonly] .condrow select,[data-readonly] .condrow input{opacity:1;color:var(--ink);background:var(--panel2)}
.filterlegend{gap:6px;align-items:center}
.filterlegend a,.filterlegend button{display:inline-flex;align-items:center;border:1px solid var(--line2);background:var(--panel);border-radius:14px;padding:3px 11px;font-size:12px;color:var(--ink2);line-height:1.5;text-decoration:none}
.filterlegend a:hover,.filterlegend button:hover{border-color:var(--accent);color:var(--accent)}
.filterlegend a.on,.filterlegend button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.legsep{width:1px;height:18px;background:var(--line2);margin:0 4px}
.proto{font-size:11px;color:var(--muted);text-align:center;padding:12px 0 0;font-family:var(--mono)}
/* flow builder */
.builder{display:grid;grid-template-columns:186px minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:1180px){.builder{grid-template-columns:150px minmax(0,1fr)}.inspector{grid-column:1 / -1}}
@media (max-width:820px){.builder{grid-template-columns:1fr}}
.palette{position:sticky;top:12px}
.palette .p-group{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:10px 0 6px}
.pitem{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:7px 9px;margin-bottom:6px;cursor:grab;font-size:13px}
.pitem:hover{border-color:var(--accent);background:var(--panel2)}
.pitem:active{cursor:grabbing}
.pitem .m{width:20px;height:20px;flex:0 0 20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono);color:#fff;font-weight:600}

.tplrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--radius);padding:10px 12px;cursor:pointer}
.tplrow:hover{border-color:var(--accent);background:var(--panel2)}
.tplrow:disabled{opacity:.6;cursor:default}
.tplmarks{display:flex;gap:3px;flex:0 0 auto}
.tplmarks span{width:20px;height:20px;border-radius:4px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-family:var(--mono);font-weight:600}
.tplinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.canvas{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px 26px;display:flex;flex-direction:column;align-items:center;min-height:420px}
.fcard{width:100%;max-width:400px}
.trigger{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);padding:10px 14px}
.trigger .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-family:var(--mono)}
.trigger b{display:block;margin-top:2px}
.trigger .s{font-size:12px;color:var(--ink2)}
.dropzone{position:relative;width:100%;max-width:400px;height:26px;display:flex;align-items:center;justify-content:center;transition:height .12s ease}
@media (prefers-reduced-motion: reduce){.dropzone{transition:none}}
.dropzone::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--line2);transform:translateX(-50%)}
.dropzone > *{pointer-events:none}
.dropzone .plus{pointer-events:auto;position:relative;z-index:2;width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--muted);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.dropzone:hover .plus{opacity:1}
.dropzone .plus:hover{border-color:var(--accent);color:var(--accent)}
.dropzone .bar{display:none;position:absolute;left:0;right:0;height:38px;border:2px dashed var(--accent);border-radius:var(--radius);background:var(--accent-soft);align-items:center;justify-content:center;font-size:12px;color:var(--accent);font-weight:500}
.dropzone.over{height:50px}
.dropzone.over .bar{display:flex}
.dropzone.over .plus{opacity:0}
.fnode{position:relative;width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:10px 12px 10px 14px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;box-shadow:var(--shadow)}
.fnode::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radius) 0 0 var(--radius);background:var(--kc,var(--line2))}
.fnode:hover{border-color:var(--line2)}
.fnode.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.fnode.dragging{opacity:.35}
.fnode .grip{cursor:grab;color:var(--muted);font-size:14px;line-height:1.2;letter-spacing:1px;user-select:none;flex:0 0 auto}
.fnode .body{flex:1;min-width:0}
.fnode .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-family:var(--mono)}
.fnode .t{font-weight:500;margin-top:1px}
.fnode .s{font-size:12px;color:var(--muted)}
.fnode .tools{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.fnode:hover .tools,.fnode.sel .tools{opacity:1}
.fnode .tools button{border:0;background:none;color:var(--muted);font-size:13px;padding:2px 5px;border-radius:3px;line-height:1}
.fnode .tools button:hover{background:var(--panel2);color:var(--ink)}
.fnode .tools button.del:hover{color:var(--bad)}
.inspector{position:sticky;top:12px}
.tgl{position:relative;width:30px;height:17px;border-radius:9px;background:var(--line2);border:0;padding:0;flex:0 0 30px;cursor:pointer}
.tgl.on{background:var(--ok)}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .14s}
.tgl.on::after{left:15px}
@media (prefers-reduced-motion: reduce){.tgl::after{transition:none}}
tfoot td{border-bottom:0;color:var(--ink)}
.backdrop{position:fixed;inset:0;background:rgba(15,20,28,.55);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow:auto;z-index:40}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);width:100%;max-width:900px}
.modal .mh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .mh h2{margin:0;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em}
.modal .mb{padding:16px 18px}
.marketrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.marketrow .field{margin:0;min-width:0}
@media (max-width:640px){.marketrow{grid-template-columns:1fr}}
.modal .mb[hidden]{display:none}   /* a .stack pane's display:flex would otherwise beat the browser's [hidden] */
.modal .mf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel2);border-radius:0 0 8px 8px;flex-wrap:wrap}
.modal .x{border:0;background:none;font-size:18px;color:var(--muted);line-height:1;padding:2px 6px;border-radius:4px}
.modal .x:hover{background:var(--panel2);color:var(--ink)}
.allnote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--info-soft);color:var(--info);border-radius:var(--radius);padding:9px 13px;font-size:12.5px;margin:12px 0 0}
.allnote .btn{margin-left:auto}
.mkbadge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:5px 9px}
.mkbadge i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}
.tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tplcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel2);padding:11px 12px;display:flex;flex-direction:column;gap:7px}
.tplcard:hover{border-color:var(--accent)}
.tplcard b{font-size:14px}
.tplcard .btn{margin-top:auto;align-self:flex-start}
.fsel{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.fsel select{font-size:13px;padding:5px 8px}
.mini{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mini .h{font-size:9px;color:var(--muted);text-align:center;font-family:var(--mono);padding-bottom:2px}
.mini .d{aspect-ratio:1;border:1px solid var(--line);border-radius:3px;font-size:10.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink2)}
.mini .d.out{opacity:.25}
.mini .d.has{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.mini .d .dots{display:flex;gap:2px}
.mini .d .dots i{width:4px;height:4px;border-radius:50%;display:block}
.dashgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:16px;align-items:start}
@media (max-width:1000px){.dashgrid{grid-template-columns:1fr}}
.dash2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:16px;align-items:start}
.dashmain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.dashside{display:grid;gap:16px;align-content:start}
@media (max-width:1320px){.dash2{grid-template-columns:1fr}.dashside{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.dashmain{grid-template-columns:1fr}.dashside{grid-template-columns:1fr}}
.chart{width:100%;height:auto;max-width:100%;display:block;overflow:visible}
.chartcard{position:relative}
.chtip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:12px;padding:6px 9px;border-radius:5px;white-space:nowrap;transform:translate(-50%,-125%);z-index:5;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.chtip b{display:block;font-size:13px}
.tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--line2);color:var(--muted);font-size:10px;font-weight:600;cursor:help;position:relative;vertical-align:middle;background:var(--panel);flex:0 0 15px}
.tip:hover,.tip:focus-visible{border-color:var(--accent);color:var(--accent)}
/* The tooltip itself is one floating box for the page (shared/tooltips), never drawn inside a card. */
.tipbox{position:fixed;z-index:1000;background:var(--ink);color:var(--bg);font-size:12px;font-weight:400;line-height:1.4;padding:7px 10px;border-radius:5px;max-width:300px;white-space:normal;text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.28);pointer-events:none}
.countopt.off{opacity:.45;cursor:not-allowed}
.tiprow{display:flex;justify-content:flex-end;margin-top:8px}
.studio2{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:16px;align-items:start}
.mcgrid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1000px){.mcgrid{grid-template-columns:1fr}}
/* Thumbnails to pick from: small and the same size whatever the picture,
   two rows showing and the rest scrolling, rather than five columns stretched
   across the card. The thumb is 72 wide and 90 tall; the box holds two rows
   and the gap between them. */
.mcpick{display:grid;grid-template-columns:repeat(auto-fill,72px);gap:6px;max-height:calc(2 * 90px + 6px + 4px);overflow-y:auto;padding:2px;scrollbar-width:thin}
.mcthumb{border:1px solid var(--line2);border-radius:4px;padding:0;overflow:hidden;background:none;display:block;width:72px;height:90px}
.mcthumb .timg{display:block;width:100%;height:100%;position:relative}
.mcthumb .timg img{width:100%;height:100%;object-fit:cover;display:block}
.mcthumb.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.mcstartcard{text-align:left;border:1px solid var(--line2);border-radius:8px;padding:14px;background:none;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.mcstartcard.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.mcstartcard.disabled{opacity:.5;cursor:not-allowed}
.mcstartcard{position:relative}
.mcstartcard .mcsel{margin-top:auto;padding-top:6px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcstartcard.has .mcsel{color:var(--accent);font-weight:600}
.mcstartcard.has::after{content:"✓";position:absolute;top:8px;right:10px;font-size:12px;font-weight:700;color:var(--accent)}
.mcchip{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);border:1px solid var(--line2);padding:3px 6px 3px 9px}
.mcneed{outline:2px solid var(--bad);outline-offset:4px;border-radius:6px}
.mcsetup{max-width:860px}
.mcnext{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap}
.mcstart{margin:0 0 16px}
.mcstart .bd{max-width:560px;margin:0 auto}
.mcbriefrow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:stretch}
.mcbriefrow .mccreate{border-left:1px solid var(--line)}
@media (max-width:900px){.mcbriefrow{grid-template-columns:1fr}.mcbriefrow .mccreate{border-left:0;border-top:1px solid var(--line)}}
.steps a{text-decoration:none;color:var(--ink2);border:0;padding:8px 10px;font-size:13px;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:7px}
.steps a.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.steps a i{font-style:normal;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.mcout.ok{border-color:var(--ok)}
.mcout.bad{opacity:.45}
/* blog generator: the post as prose, and the cards that stand where a picture will go */
.gpost{max-width:68ch;font-size:15px;line-height:1.65;color:var(--ink)}
.gpost h1{font-size:26px;line-height:1.2;margin:0 0 10px}
.gpost .lede{font-size:16px;color:var(--ink2);margin:0 0 18px}
.gpost h2{font-size:19px;margin:26px 0 8px}
.gpost h3{font-size:16px;margin:20px 0 6px}
.gpost p{margin:0 0 12px}
.gpost ul,.gpost ol{margin:0 0 12px;padding-left:22px}
.gpost blockquote{margin:0 0 12px;padding:6px 14px;border-left:3px solid var(--accent);color:var(--ink2)}
.gpost a{color:var(--accent)}
.gpost-figure{margin:18px 0}
.gpost-ph{aspect-ratio:16/9;border-radius:var(--radius);background:var(--grad-dawn);display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.gpost-ph.info{aspect-ratio:auto;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px;background:var(--panel2);color:var(--ink);text-shadow:none;border:1px dashed var(--line2)}
.gpost-ph.info ul{margin:0;padding-left:18px;font-size:13.5px}
.gpost-figure figcaption{font-size:12.5px;color:var(--muted);margin-top:6px}
/* A card whose copy a job is still writing: the fallback is under a veil
   that says so, and nothing on it can be confirmed until the veil lifts. */
.mcout.writing{position:relative}
.mcout>.mcwriting{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:9px;
  border-radius:inherit;background:rgba(255,255,255,.72);backdrop-filter:blur(1.5px);font-size:13px;color:var(--ink2)}
.mcout>.mcwriting .spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .7s linear infinite}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mcout>.mcwriting{background:rgba(10,14,16,.66)}}
:root[data-theme="dark"] .mcout>.mcwriting{background:rgba(10,14,16,.66)}
.mcbody{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:700px){.mcbody{grid-template-columns:1fr}}
.mcshot{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--panel2);max-width:100%}
.mcshot svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mcshot.sms{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--mono);font-size:12px;border:1px dashed var(--line2)}
.mcshot.empty-img{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line2)}
.mczoom{position:absolute;inset:0;padding:0;border:0;background:none;display:block;width:100%;height:100%;cursor:zoom-in}
.mcicons{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:5px;pointer-events:none}
.mcicons .mcic{pointer-events:auto}
.mcic{border:1px solid rgba(255,255,255,.45);background:rgba(20,24,30,.62);color:#fff;border-radius:4px;width:22px;height:22px;line-height:1;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0}
.mcic:hover{background:rgba(20,24,30,.88)}
.mcx{border:0;background:none;color:var(--muted);font-size:13px;line-height:1;padding:3px 5px;border-radius:4px}
.mcx:hover{background:var(--panel2);color:var(--bad)}
.flab{display:flex;align-items:center;justify-content:flex-start;gap:4px}
.regen{border:0;background:none;color:var(--muted);line-height:0;padding:2px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}
.regen:hover,.regen:focus-visible{background:var(--accent-soft);color:var(--accent)}
.regen.big{padding:3px}
.regen.spin svg{animation:regspin .7s linear}
@keyframes regspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.regen.spin svg{animation:none}}
.mcdest{border-top:1px solid var(--line);margin-top:4px;padding-top:9px}
.regen.busy{color:var(--accent);pointer-events:none}
.regen.busy svg{animation:regspin .9s linear infinite}
@media (prefers-reduced-motion: reduce){.regen.busy svg{animation:none}}
.field.loading input{color:transparent;text-shadow:none;background-image:linear-gradient(90deg,var(--panel2) 25%,var(--line) 37%,var(--panel2) 63%);background-size:400% 100%;animation:shine 1.2s ease infinite}
@keyframes shine{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){.field.loading input{animation:none}}
.mcshot .busyveil{position:absolute;inset:0;z-index:3;background:rgba(12,16,24,.55);display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:11.5px;font-family:var(--mono)}
.convtable td .btn{white-space:nowrap}
.convrow.on{background:var(--accent-soft)}
.convtitle{font-size:14px;font-weight:600;border:1px solid transparent;background:none;padding:2px 6px;border-radius:var(--radius);min-width:140px;max-width:240px}
.convtitle:hover{border-color:var(--line2)}
.convtitle:focus{border-color:var(--accent);background:var(--panel)}
.dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
/* The studio fills the window below the tabs and never scrolls the page:
   the panel and the gallery each scroll inside themselves. */
.studio2.fitted{height:var(--studio-h);align-items:stretch}
.studio2.fitted .genpanel{position:static;overflow-y:auto;min-height:0}
.gallerycard{display:flex;flex-direction:column;min-height:0}
.gallerycard .hd{flex:0 0 auto}
.resultscroll{flex:1;min-height:0;overflow-y:auto;padding-right:4px}
@media (max-width:1000px){.studio2.fitted{height:auto}.studio2.fitted .genpanel{overflow:visible}.resultscroll{max-height:70vh}}
.grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media (max-width:1400px){.grid6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.grid6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.grid6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.tile.approved{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}
.tile.rejected{opacity:.4}
.timg{aspect-ratio:4/5;max-width:100%;position:relative;overflow:hidden;background:var(--panel2)}
.timg svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tfmt{position:absolute;top:4px;left:4px;font-size:9px;font-family:var(--mono);background:rgba(0,0,0,.55);color:#fff;padding:1px 4px;border-radius:2px;z-index:2}
/* The download sits first, at the footer's left edge; the verdicts at its right. The "like this one" mark lives in the header's top-right corner. */
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 5px}
.thd .tdir{flex:0 0 auto;margin-left:2px}
.tname{font-size:10.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tacts{display:flex;gap:2px;flex:0 0 auto}
.tacts button{border:1px solid var(--line2);background:var(--panel);border-radius:3px;width:19px;height:19px;font-size:11px;line-height:1;padding:0;color:var(--muted)}
.tacts button.yes:hover{border-color:var(--ok);color:var(--ok)}
.tacts button.undo:hover{border-color:var(--warn);color:var(--warn)}
.tacts button.no:hover{border-color:var(--bad);color:var(--bad)}
/* The catalog's square: one renderer draws the builder's canvas, the thumbnails
   and the preset popup, so sizes are container units and positions percent. */
.ccv{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;border-radius:var(--radius);container-type:inline-size;user-select:none;font-family:var(--display);background:var(--panel2)}
.ccv .lyr{position:absolute;box-sizing:border-box;line-height:1.1}
.ccv .lyr.img,.ccv .lyr.logo{display:flex;align-items:center;justify-content:center}
.ccv .lyr.img img{width:100%;height:100%;display:block}
.ccv .lyr.logo img{width:100%;height:auto;display:block}
.ccv .txt{display:inline-block;width:100%;overflow-wrap:anywhere}
.ccv .ph{font-size:4cqw;color:rgba(0,0,0,.35);border:1px dashed rgba(0,0,0,.25);border-radius:4px;padding:.4em .8em;width:100%;height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.ccv .lyr.faint{opacity:.45}
.ccv img.drawn{width:100%;height:100%;display:block;object-fit:cover}
.ccv.editing .lyr{cursor:move;touch-action:none}
.ccv.editing .lyr:hover{outline:1px dashed var(--accent);outline-offset:1px}
.ccv.editing .lyr.sel{outline:2px solid var(--accent);outline-offset:1px;z-index:5}
.ccv.editing .lyr:focus-visible{outline:2px solid var(--accent)}
.cbuild{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px;align-items:start}
.cbuild .ccv{max-width:460px;box-shadow:var(--shadow-2)}
.cctl{display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.cctl .field{gap:3px}
.cctl .cgrp{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel2)}
.cctl .cgrp h4{margin:0;font-size:11.5px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.cctl label{font-size:11.5px;color:var(--muted)}
.cctl .row input[type=range]{flex:1;min-width:0;padding:0;border:0;background:none}
.cctl input[type=color]{width:34px;height:26px;padding:1px 2px}
.cctl .lyrs{display:flex;flex-wrap:wrap;gap:4px}
.lyrchip{display:inline-flex;align-items:center;border:1px solid var(--line2);background:var(--panel);border-radius:var(--radius);padding:0 0 0 6px;font-size:12px;color:var(--ink2)}
.lyrchip input{width:13px;height:13px;margin:0}
.lyrchip button{border:0;background:none;padding:3px 8px 3px 5px;font:inherit;color:inherit;cursor:pointer;border-radius:0 var(--radius) var(--radius) 0}
.lyrchip.on{border-color:var(--accent)}.lyrchip.on button{color:var(--accent);font-weight:600}
.lyrchip.off button{opacity:.55}
.place{display:grid;grid-template-columns:repeat(3,18px);gap:3px}
.place button{width:18px;height:18px;border:1px solid var(--line2);background:var(--panel);border-radius:3px;padding:0;cursor:pointer;position:relative}
.place button::after{content:'';position:absolute;inset:5px;border-radius:2px;background:var(--line2)}
.place button:hover::after{background:var(--accent)}
.ccv .rsz{position:absolute;z-index:6;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:nwse-resize;box-shadow:var(--shadow-2)}
.ctpl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.ctpl button{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:8px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.ctpl button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ctpl button b{font-size:13px}
.ctpl button .small{line-height:1.3}
.cmini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cmini .tile .ccv{border-radius:0}
@media (max-width:1180px){.cbuild{grid-template-columns:1fr}.cbuild .ccv{max-width:none}}
.tacts button.restore{width:auto;padding:0 7px;font-size:10.5px}
.tok{color:var(--ok);font-size:12px}.tno{color:var(--bad);font-size:12px}
@media (max-width:1000px){.studio2{grid-template-columns:1fr}.genpanel{position:static}}
/* asset studio: the context panel on the left, creatives on the right */
.genpanel{position:sticky;top:12px}
/* The panel's history beside its title: back and forward, the count of steps on the back arrow. */
.ghead{align-items:center;justify-content:space-between;gap:8px}
.hist{display:inline-flex;gap:2px}
.histbtn{border:1px solid var(--line2);background:var(--panel);color:var(--ink2);border-radius:var(--radius);min-width:28px;height:26px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.histbtn:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.histbtn:disabled{opacity:.4;cursor:not-allowed}
.histbtn b{font-size:10.5px;font-weight:600;line-height:1;color:var(--ink2)}
/* Four decisions in two rows: at the panel's width four abreast would clip every name. */
.ctxrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ctxrow>.ctxbtn{grid-column:span 2}
.ctxrow>.ctxbtn:nth-child(4),.ctxrow>.ctxbtn:nth-child(5){grid-column:span 3}
/* The advanced panel's five boxes, one full-width row each, the pick's picture on the left. The thumb holds a
   copy of whatever the chosen card shows — a photo, a swatch, a line drawing, a type sample — squeezed to its frame. */
.ctxstack{display:flex;flex-direction:column;gap:8px}
/* A screen not ready for shops: the real thing blurred underneath, a plain card on top; an admin can lift it. */
.soonwrap{position:relative}
.soonwrap.veiled>.soonbody{filter:blur(6px);pointer-events:none;user-select:none;opacity:.7}
.soonveil{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;z-index:5}
.soonveil[hidden]{display:none}
.soonveil-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);padding:22px 28px;text-align:center;max-width:380px}
.soonveil-card b{font-size:18px}
.ctxstack .ctxthumb.empty{border-style:dashed;background:none}
.ctxthumb>*{width:100%!important;height:100%!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;display:block}
.ctxthumb .textmock svg{width:100%;height:100%}
.ctxthumb .typemock{display:flex!important;align-items:center;justify-content:center;background:var(--panel2)}
.ctxthumb .typemock .tm-big{font-size:17px}
.ctxthumb .typemock .tm-head,.ctxthumb .typemock .tm-line{display:none}
.ctxthumb .personmock{display:flex!important;align-items:center;justify-content:center;background:var(--panel2);color:var(--ink2)}
.ctxthumb .personmock svg{width:70%;height:70%}
/* A text style's card shows the style itself: a big pair of letters, a headline, a small line, all in its own face and treatment. */
.typemock{display:flex;flex-direction:column;justify-content:center;gap:4px;aspect-ratio:4/3;border-radius:4px;border:1px solid var(--line);background:linear-gradient(160deg,#E9E4DC,#CFC6B8);padding:8px 10px;overflow:hidden;color:var(--ink);line-height:1.05}
.typemock .tm-big{font-size:30px;line-height:1}
.typemock .tm-head{font-size:12px}
.typemock .tm-line{font-size:9px;font-weight:400;opacity:.75}
.typemock.spaced .tm-head,.typemock.spaced .tm-big{letter-spacing:.14em}
.typemock.italic .tm-head,.typemock.italic .tm-big{font-style:italic}
.typemock.outline .tm-big,.typemock.outline .tm-head{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.typemock.highlight .tm-head,.typemock.highlight .tm-big{align-self:flex-start;background:var(--accent);color:var(--accent-ink);padding:1px 5px;border-radius:2px}
.typemock.panel{padding:6px}.typemock.panel .tm-big,.typemock.panel .tm-head,.typemock.panel .tm-line{background:rgba(255,255,255,.92);padding:2px 7px}
.typemock.panel .tm-big{border-radius:5px 5px 0 0;padding-top:5px}.typemock.panel .tm-line{border-radius:0 0 5px 5px;padding-bottom:5px}.typemock.panel{gap:0}
.typemock.stamp .tm-head{align-self:flex-start;border:2.5px solid var(--ink);border-radius:5px;padding:2px 6px}
.stylecard.on .typemock{border-color:var(--accent)}
.stylegrid.locked [data-type]{opacity:.5;cursor:not-allowed}
/* The product on one full-width line: picture, label and name, the market at the right end. */
.ctxbtn.wide{flex-direction:row;align-items:center;gap:10px;padding:7px 24px 7px 8px;min-height:0}
.ctxbtn.wide.hasthumb{padding-left:8px;min-height:0;justify-content:flex-start}
.ctxbtn.wide .ctxthumb{position:static;transform:none;width:36px;height:36px;flex:0 0 36px}
.ctxbtn.wide .ctxmain{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.ctxbtn.wide .ctxsub{flex:0 1 auto;max-width:40%;margin-left:auto}
.ctxbtn.wide .ctxdot{top:50%;margin-top:-3.5px}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;max-height:230px;overflow:auto;padding:2px}
.catcell{display:flex;flex-direction:column;gap:3px;padding:5px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);text-align:left;cursor:pointer;color:var(--ink);opacity:.45}
.catcell.on{opacity:1;border-color:var(--accent);background:var(--accent-soft)}
.catcell .catshot{display:block;width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--panel2)}
.catcell .catshot img{width:100%;height:100%;object-fit:cover;display:block}
.catcell .catname{font-size:11px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctxbtn .kindtag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-right:5px;vertical-align:1px}
.ctxbtn .ctxsub{display:block;font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The market picked, said plainly above the search: a chip in the ink colour, not a muted aside. */
.marketchosen{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:6px 10px;border:1px solid var(--accent);border-radius:999px;background:var(--accent-soft);font-size:13px;font-weight:600;color:var(--ink)}
.marketchosen.none{border-color:var(--line2);background:var(--panel2);font-weight:400;color:var(--ink2)}
.marketfield [data-marketlist]{max-height:200px}
/* Titles carry more weight than body text, everywhere. */
h1,h2,h3,.pgttl h1,.topbar h1,.card .hd h3,.modal .mh h2,.authcard h1,.authside h2,.onbcard h2{font-weight:700}
.field label{font-weight:600;color:var(--ink)}
.ctxbtn{position:relative;text-align:left;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);padding:9px 22px 9px 10px;display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer;color:var(--ink)}
.ctxbtn .ctxlab{font-size:11px;color:var(--muted)}
.ctxbtn b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxbtn .ctxdot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--line2)}
.ctxbtn.hasthumb{padding-left:64px;min-height:62px;justify-content:center}
.ctxthumb{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:6px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.ctxthumb img{width:100%;height:100%;object-fit:cover;display:block}
.ctxbtn.on{border-color:var(--accent)}.ctxbtn.on .ctxdot{background:var(--ok)}
.ratios{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
/* The output row: the two choices side by side, small. */
/* The formats on one row, how many of each on the row beneath — each across the panel's full width. */
.outrow{display:flex;flex-direction:column;gap:8px}
.ratios.compact{gap:4px}
.ratios.compact .ratio{flex-direction:row;justify-content:center;gap:5px;padding:5px 4px;font-size:11px}
.ratios.compact .ratiobox{transform:scale(.7);margin:-4px}
.counts.compact{display:inline-flex;width:100%}
.counts.compact button{flex:1;font-family:var(--display);font-size:13px}
/* A text field with the ✦ in a slim column at its end: the text never runs under the button. */
.aifield{display:flex;align-items:stretch;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel)}
.aifield:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.aifield input,.aifield textarea{flex:1;min-width:0;border:0;background:none;box-shadow:none}
/* The features box: a bullet per line in a gutter that scrolls with the text, so each row reads as one feature. */
.bulletbox{flex:1;min-width:0;position:relative;display:flex}
.bulletbox textarea{width:100%;padding-left:22px;line-height:1.5;resize:vertical}
.bulletbox .bullets{position:absolute;left:9px;top:0;padding-top:6px;line-height:1.5;font-size:inherit;color:var(--accent);white-space:pre;pointer-events:none;overflow:hidden;height:100%}
.aifield input:focus,.aifield textarea:focus{border:0;box-shadow:none;outline:0}
.aifield-label{flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;padding:0 9px;border-right:1px solid var(--line);background:var(--panel2);font-size:11px;font-weight:600;color:var(--ink2);border-radius:var(--radius) 0 0 var(--radius);white-space:nowrap}
.aifield .aibtn{position:static;transform:none;flex:0 0 26px;align-self:stretch;border:0;border-left:1px solid var(--line);border-radius:0 var(--radius) var(--radius) 0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
.aifield .aibtn:hover{background:var(--panel2);color:var(--accent)}
/* A lock: small, grey when open, accent when closed; the box it guards gets a faint accent edge. */
.lockbtn{border:0;background:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:4px;border-radius:4px;line-height:1}
.lockbtn:hover{color:var(--accent);background:var(--panel2)}
.lockbtn.on{color:var(--accent)}
.lockbtn .shackle{transform-origin:5.5px 7px;transition:transform .15s}
.lockbtn:not(.on) .shackle{transform:translateX(1.5px) rotate(-18deg)}
.aifield .lockbtn{flex:0 0 26px;align-self:stretch;border-left:1px solid var(--line);border-radius:0 var(--radius) var(--radius) 0;padding:0}
.aifield .aibtn:not(.lockbtn){border-radius:0}
.tagbox{position:relative}
.tagbox .lockbtn.corner{position:absolute;right:4px;bottom:3px}
.tagbox.locked,.aifield.locked,.promptbox.locked{box-shadow:inset 0 0 0 1px var(--accent-soft)}
.locked input[readonly],.locked textarea[readonly]{color:var(--muted);cursor:not-allowed}
.locked [data-suggest]:disabled,.locked [data-tagremove]:disabled,.locked [data-translate]:disabled{opacity:.35;cursor:not-allowed}
.tagbox.locked [data-tagadd]{visibility:hidden}
.ratio{position:relative;border:1px solid var(--line2);border-radius:var(--radius);padding:9px 6px 7px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2);cursor:pointer;background:var(--panel)}
.ratio input{position:absolute;opacity:0;pointer-events:none}
.ratio:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.ratiobox{display:block;border:1.5px solid currentColor;border-radius:2px}
.r9x16{width:14px;height:25px}.r4x5{width:18px;height:22px}.r1x1{width:20px;height:20px}.r4x3{width:24px;height:18px}.r16x9{width:26px;height:15px}
/* The box owns the border; the text area inside has none, and the footer row
   is a real row under it, so the text scrolls above it and never beneath it. */
.promptbox{position:relative;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);display:flex;flex-direction:column}
.promptbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.promptbox textarea{width:100%;display:block;border:0;border-radius:var(--radius) var(--radius) 0 0;resize:vertical;min-height:220px}
.promptbox textarea:focus{outline:0;box-shadow:none;border:0}
.promptfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;border-top:1px solid var(--line)}
.promptchars{pointer-events:none;font-variant-numeric:tabular-nums}
.translatebtn{padding:2px 8px;font-size:11.5px}
.rulesfold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;color:var(--ink2)}
.rulesfold summary::-webkit-details-marker{display:none}
.rulesfold summary::before{content:"▸";font-size:10px;color:var(--muted)}
.rulesfold[open] summary::before{content:"▾"}
.rulesfold textarea{width:100%;margin-top:6px;min-height:110px;resize:vertical}
.translatebtn.busy{opacity:.6;cursor:progress}
.modelpick{position:relative}
.modelbtn{border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:3px 9px;font-size:11.5px;color:var(--ink2);cursor:pointer}
.modelbtn:hover{border-color:var(--accent);color:var(--accent)}
.modelmenu{position:absolute;left:0;bottom:calc(100% + 6px);width:min(360px,70vw);background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:var(--shadow-3);padding:5px;z-index:8;max-height:none}
/* Compact: a long session name is cut with an ellipsis so the money columns always fit the popup. */
.sessiontable{width:100%;table-layout:auto}
.sessiontable td,.sessiontable th{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.sessiontable td:first-child{max-width:250px;overflow:hidden;text-overflow:ellipsis}
.sessiontable th.num,.sessiontable td.num{text-align:right}
.sessiontable th{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.sessiontable td.num.mono{font-size:12px}
.sessiontable tr.open td{background:var(--accent-soft)}
/* Every paid request, one row each: tight, the money right-aligned. */
.usagetable{width:100%}
.usagetable td,.usagetable th{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.5px}
.usagetable th{font-size:10.5px;color:var(--muted);font-weight:600;text-align:left}
.usagetable th.num,.usagetable td.num{text-align:right}
.sessiontable tr.rowlink{cursor:pointer}
.sessiontable tr.rowlink:hover td{background:var(--panel2)}
.modelmenu[hidden]{display:none}
.modelhead{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 2px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.modelhead .seg button{width:auto;display:inline-block;border-radius:0;padding:3px 8px;font-size:11.5px}
.modelhead .seg button.on{background:var(--accent);color:var(--accent-ink)}
.modelhead .btn{width:auto;display:inline-flex;font-size:11.5px;padding:3px 8px}
.modelhead .btn[hidden]{display:none}   /* .poplist's display:flex would otherwise beat the browser's [hidden] */
.modelmenu button:disabled{opacity:.5;cursor:not-allowed}
.counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.countopt{border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);padding:8px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--ink2)}
.countopt b{font-family:var(--display);font-size:17px;line-height:1.1;color:var(--ink)}
.countopt span{font-size:10.5px}
.countopt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.countopt:disabled{opacity:.45;cursor:not-allowed}
.sizeopt{padding:6px 3px 6px}
.sizeicon{display:block;width:100%;height:30px;color:var(--ink2)}
.sizeopt.on .sizeicon{color:var(--accent)}
.sizeopt b{font-size:12px}
.sizeopt span{font-size:9.5px;line-height:1.1;text-align:center;white-space:normal}
[data-overlay] .countopt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* The button card's icon: a small drawn button, in the ink like the other icons. */
.countopt .ctaicon{display:block;margin:2px auto 1px;color:var(--ink)}
.countopt.on .ctaicon{color:var(--accent)}
.tile .creative{cursor:zoom-in;padding:0;border:0;background:none;text-align:left;width:100%;display:block}
.tile .creative .timg{display:block;aspect-ratio:1;background:var(--panel2)}
.tile .creative .timg img{width:100%;height:100%;object-fit:contain;display:block}
/* One line, always: three pills on a narrow tile squeeze and clip rather than wrap, so every tile in a row is the same height. */
.thd{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:4px;padding:4px 6px;min-height:28px;font-size:10.5px;color:var(--ink2);border-bottom:1px solid var(--line);overflow:hidden}
.thd > .row{flex:0 1 auto;min-width:0;flex-wrap:nowrap;gap:3px;overflow:hidden}
.thd .pill{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:clip}
.tfoot{min-height:29px}
.thd .pill{font-size:10px;padding:1px 6px;white-space:nowrap}
.thd .pill.mono{letter-spacing:0}
.tfoot .tname{flex:1;text-align:center}
.tdl{flex:0 0 auto;width:19px;height:19px;border:1px solid var(--line2);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);text-decoration:none}
.tdl:hover{border-color:var(--accent);color:var(--accent)}
.tdir{flex:0 0 auto;width:19px;height:19px;border:1px solid var(--line2);border-radius:3px;background:var(--panel);display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:var(--muted);cursor:pointer;padding:0}
.tdir:hover{border-color:var(--accent);color:var(--accent)}
.tdir.on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.dirstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dirthumb{position:relative;width:44px;height:44px;border-radius:6px;overflow:hidden;border:1px solid var(--accent);background:var(--panel2)}
.dirthumb img{width:100%;height:100%;object-fit:cover;display:block}
.dirx{position:absolute;top:1px;right:1px;width:14px;height:14px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:8px;line-height:1;padding:0;cursor:pointer}
.moretile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;cursor:pointer;color:var(--accent);font-weight:500;font-size:12.5px;border-style:dashed}
.moretile:hover{background:var(--accent-soft)}
.moretile .moreicon{color:var(--accent)}
.dl{position:relative;flex:0 0 auto}
.tile:has(.dl[open]){overflow:visible}
.dl summary{list-style:none;cursor:pointer}
.dl summary::-webkit-details-marker{display:none}
.dl[open] summary{border-color:var(--accent);color:var(--accent)}
.dlmenu{position:absolute;left:0;bottom:calc(100% + 4px);z-index:5;min-width:96px;background:var(--panel);border:1px solid var(--line2);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);padding:4px;display:flex;flex-direction:column}
.dlmenu a,.dlmenu span{display:flex;align-items:center;gap:6px;padding:5px 8px;font-size:12px;border-radius:4px;text-decoration:none;color:inherit;white-space:nowrap}
.dlmenu a:hover{background:var(--bg2,rgba(0,0,0,.05));color:var(--accent)}
.dlmenu .gspin,.btn.waiting .gspin{width:10px;height:10px;border-width:1.5px}
.btn.waiting{pointer-events:none;opacity:.7}
.tacts form{display:inline}
.tacts-x{border:1px solid var(--line2);background:var(--panel);border-radius:3px;width:19px;height:19px;font-size:11px;line-height:1;padding:0;color:var(--muted);cursor:pointer}
.tacts-x:hover{border-color:var(--bad);color:var(--bad)}
.tacts button.star.on,.tacts button.star:hover{border-color:var(--accent);color:var(--accent)}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
.modal.amodal{max-width:1280px}
.amodal .mb.grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.amimg img{max-height:84vh}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.modal .mh h2 .tip{vertical-align:middle;margin-left:4px}
.amodal h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.amodal [data-am-stem]{outline:none;border-bottom:1px dashed var(--line2);padding:0 2px;min-width:40px;cursor:text}
.amodal [data-am-stem]:hover,.amodal [data-am-stem]:focus{border-bottom-color:var(--accent)}
.amodal [data-am-stem].saved{border-bottom-color:var(--ok)}
.amodal [data-am-ext]{color:var(--muted);font-weight:400;margin-left:-8px}
.amodal [data-am-dims]{font-size:10.5px;padding:1px 7px}
.tile .tstate{position:absolute;top:4px;right:4px;z-index:2}
/* A tile that is still cooking, or that failed, is exactly the size of a finished one: the same square, the same header row. */
.tile.queued .timg,.tile.failed .timg{aspect-ratio:1;contain:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;font-size:11.5px;color:var(--muted);overflow:hidden}
.tile.failed .timg .small{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.tile.failed .timg{color:var(--ink2)}
.gspin{width:22px;height:22px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:gspin .8s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
.poplist{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto}
/* The product list shows five rows (38px thumb + padding + border + gap) and loads more as it is scrolled. */
.poplist[data-productlist]{max-height:278px}
.poplist button{position:relative}
.unpick{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-style:normal;font-size:15px;line-height:1;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);background:var(--panel)}
.unpick:hover{color:var(--bad);background:var(--panel2)}
.poplist button.on{padding-right:36px}
.poplist button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid transparent;border-radius:var(--radius);background:none;padding:7px 8px;font-size:13px;color:var(--ink)}
.poplist button:hover{background:var(--panel2)}.poplist button.on{border-color:var(--accent);background:var(--accent-soft)}
.medcell.on{outline:2px solid var(--accent);outline-offset:-2px}
.stylegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.themegrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}   /* the theme popup is rows of five, one kind of ad a row */
@media (max-width:1100px){.themegrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.themegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A theme card is the finished design drawn small: the picture, the palette's ground and every word block where
   the theme puts it, in its face and colour. Sizes are container units so it draws the same at any width. */
.thmock{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:4px;border:1px solid var(--line);overflow:hidden;container-type:inline-size;color:var(--th-ink);line-height:1}
.thmock .thpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.thmock>span{position:absolute;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.thmock .th-headline{font-size:7.5cqw;justify-content:flex-start}
.thmock .th-headline.mid{justify-content:center;text-align:center}
.thmock .th-line{font-size:3.6cqw;font-weight:500;text-transform:none;letter-spacing:0;gap:1.5cqw}
.thmock .th-line i{display:inline-block;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--th-accent);flex:0 0 auto}
.thmock .th-price{font-size:6cqw;justify-content:center;background:var(--th-accent);color:var(--th-bg);border-radius:50%;aspect-ratio:1}
.thmock .th-button{font-size:3.4cqw;justify-content:center;background:var(--th-ink);color:var(--th-bg);border-radius:999px;text-transform:none;letter-spacing:0;font-weight:600}
.thmock .th-button.outline{background:none;color:var(--th-accent);border:1px solid var(--th-accent);border-radius:2px;text-transform:uppercase;letter-spacing:.12em}
.thmock .th-product{border:1px dashed rgba(127,127,127,.45);border-radius:3cqw;background:rgba(127,127,127,.08)}
.thmock .th-product.framed{border:0;background:none}
.thmock .th-product.framed img{width:100%;height:100%;object-fit:cover;object-position:center 60%;border-radius:3cqw}
.stylecard.on .thmock{border-color:var(--accent)}

.stylecard{text-align:left;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);padding:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;color:var(--ink)}
.stylecard b{font-size:12.5px}
.stylecard.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.styleswatch{display:block;width:100%;aspect-ratio:4/3;border-radius:4px;border:1px solid var(--line);object-fit:cover}
/* A text style drawn as blocks on a small portrait: where the words would sit. */
/* The guide's three steps, and the marketing angles as cards. */
.steps{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px}
.steps button{border:0;background:none;padding:8px 10px;font-size:13px;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:7px}
.steps button i{font-style:normal;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.steps button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.steps button.on i{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.anglecat{text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;margin:10px 0 6px}
.anglegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:6px}
.anglecard span.small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.anglecard .anglelayout{-webkit-line-clamp:1;color:var(--accent);font-size:11px}
.personmock{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;border-radius:4px;border:1px solid var(--line);background:linear-gradient(160deg,#E9E4DC,#CFC6B8);color:var(--ink)}
.personicon{width:64%;height:auto}
.stylecard.on .personmock{border-color:var(--accent);color:var(--accent)}
/* A place without its photograph yet, and a mood grid under its lock. */
.placemock{background:linear-gradient(160deg,var(--panel2),var(--line))}
.stylegrid.locked [data-style],.stylegrid.locked [data-place],.stylegrid.locked [data-person]{opacity:.5;cursor:not-allowed}
.textmock{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:4px;border:1px solid var(--line);background:linear-gradient(160deg,#E9E4DC,#CFC6B8);overflow:hidden}
.textmock i{position:absolute;display:block;border-radius:2px}
.textmock .tm-headline{background:var(--ink)}
.textmock .tm-lines{background:var(--ink);opacity:.45}
.textmock .tm-button{background:var(--accent);border-radius:999px}
.textmock .tm-price{background:var(--accent);border-radius:50%}
.textmock .tm-panel{background:rgba(255,255,255,.55);border-radius:0}
.textmock .tm-half{background:rgba(20,24,30,.38);border-radius:0}
.textmock .tm-product{background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.18)}
.textmock .tm-tick{background:var(--ok);border-radius:50%}
.textmock .tm-cross{background:var(--bad);border-radius:50%}
.textmock .tm-stars{background:#E2B93B;border-radius:1px}
.textmock .tm-leader{background:var(--ink);opacity:.6;border-radius:0}
.textmock .tm-bar{background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:999px}
.stylecard.on .textmock{border-color:var(--accent)}
/* The concept drawings: one family of strokes in the card's ink, the product filled pale, words as grey bars. */
.textmock .cpic{position:absolute;inset:0;width:100%;height:100%;color:var(--ink)}
.cpic .ln{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cpic .ln.thick{stroke-width:2.4}.cpic .ln.dash{stroke-dasharray:3 3}
.cpic .ln.ok{stroke:var(--ok);stroke-width:2}.cpic .ln.bad{stroke:var(--bad);stroke-width:2}
.cpic .ln.card{fill:rgba(255,255,255,.7)}.cpic .ln.tbtnline{stroke:var(--accent)}.cpic .ln.tbarline{opacity:.35}
.cpic .pfill{fill:rgba(255,255,255,.78);stroke:currentColor;stroke-width:1.6}
.cpic .pcap{fill:currentColor;stroke:none}.cpic .plabel{fill:currentColor;opacity:.3;stroke:none}
.cpic .tbar{fill:currentColor;opacity:.32;stroke:none}.cpic .thead{fill:currentColor;opacity:.8;stroke:none}
.cpic .tbtn,.cpic .tbadge{fill:var(--accent);stroke:none}
.cpic .pane{fill:rgba(255,255,255,.5);stroke:none}.cpic .dark{fill:rgba(20,24,30,.3);stroke:none}
.cpic .tint{fill:var(--accent);opacity:.18;stroke:none}.cpic .tint2{fill:var(--accent);opacity:.55;stroke:none}
.cpic .star{fill:#E2B93B;stroke:none}
.cpic .tnum{fill:currentColor;font-family:var(--display),var(--font),sans-serif;font-weight:600}.cpic .tnum.bold{font-weight:800}.cpic .tnum.onbadge{fill:var(--accent-ink)}
.stylecard.on .textmock .cpic{color:var(--accent-600,var(--accent))}
.stylecard .suits-tag{font-size:10.5px;color:var(--accent);font-weight:600;min-height:0;line-height:1;order:-1}
.stylecard .suits-tag:empty{display:none}
.stylecard.suits{border-color:var(--accent-soft)}
.amimg{background:var(--panel2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;min-height:240px}
.amimg img{max-width:100%;max-height:70vh;display:block;border-radius:var(--radius)}
.msg{max-width:92%;padding:8px 11px;border-radius:11px;font-size:13px;line-height:1.45}
.msg.u{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:3px}
.msg.a{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:3px}
.msg .meta{font-size:11px;opacity:.72;margin-top:4px;font-family:var(--mono)}
.composer{border-top:1px solid var(--line);padding-top:11px;display:flex;flex-direction:column;gap:9px}
.composer select{font-size:12px;padding:4px 6px}
.chippop{position:absolute;left:6px;bottom:32px;z-index:6;width:min(330px,calc(100% - 12px));background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:0 10px 26px rgba(0,0,0,.22);padding:5px;display:flex;flex-direction:column;gap:1px}
.chiphd{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:4px 7px 3px}
.chippop button{border:0;background:none;text-align:left;padding:6px 8px;border-radius:4px;font-size:12.5px;color:var(--ink2);line-height:1.35}
.chippop button:hover{background:var(--panel2);color:var(--accent)}
.dotpulse{display:inline-flex;gap:3px;vertical-align:middle;margin-right:4px}
.dotpulse i{width:5px;height:5px;border-radius:50%;background:var(--muted);display:block;animation:dp 1s infinite}
.dotpulse i:nth-child(2){animation-delay:.15s}.dotpulse i:nth-child(3){animation-delay:.3s}
@keyframes dp{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion: reduce){.dotpulse i{animation:none}}
.tabsep{align-self:center;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:0 12px 0 14px;border-left:1px solid var(--line);margin-left:6px;white-space:nowrap}
.tabs.sub2{border-bottom:0;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:3px;gap:3px;margin:-6px 0 14px}
.tabs.sub2 button{border-bottom:0;border-radius:4px;padding:6px 11px}
.tabs.sub2 button.on{background:var(--accent);color:var(--accent-ink)}
.settings-body .topbar{padding:0 0 10px;border-bottom:0;margin-bottom:12px}
.settings-body .topbar h1{font-size:15px;font-weight:600}
.settings-body .topbar .sub{font-size:12.5px}
.empty{border:2px dashed var(--line2);border-radius:var(--radius);padding:22px;text-align:center;color:var(--muted);font-size:13px;width:100%;max-width:400px}
/* zložljiv stranski meni, kot v WP */
.nav button .ico{width:18px;flex:0 0 18px;text-align:center;font-size:13px;opacity:.85}
.nav button{gap:9px}
.nav button>.lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidecollapse{cursor:pointer;color:var(--side-ink);border-top:1px solid var(--side-line);margin-top:6px;user-select:none}
.sidecollapse:hover{color:var(--side-strong)}
.sidecollapse .ico{transition:transform .12s}
.side.sidemini{width:46px;flex:0 0 46px;overflow:visible}
.side.sidemini .lbl,.side.sidemini .nav-group{display:none}
.side.sidemini .wpcore,.side.sidemini .nav{width:46px}
.side.sidemini .wpitem,.side.sidemini .nav button{width:46px;min-width:46px;padding:10px 0;gap:0;justify-content:center;position:relative}
.side.sidemini .wpitem .ico,.side.sidemini .nav button .ico{width:46px;flex:0 0 46px;text-align:center;margin:0}
.side.sidemini .nav button .cnt{position:absolute;top:3px;right:5px;min-width:0;width:7px;height:7px;padding:0;border-radius:50%;font-size:0;line-height:0;overflow:hidden}
.side.sidemini .nav{padding:6px 0}
.side.sidemini .sidecollapse{margin-top:4px}
.side.sidemini .sidecollapse .ico{transform:rotate(180deg)}
@media (prefers-reduced-motion: reduce){.sidecollapse .ico{transition:none}}
/* videz: svetlo / temno */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}}
.themeopt{display:flex;gap:8px;flex-wrap:wrap}
.themeopt button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--panel);border-radius:var(--radius);padding:6px 11px;font-size:13px;line-height:1.3}
.themeopt button:hover{border-color:var(--accent)}
.themeopt button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);font-weight:500}
.themeopt i{width:15px;height:15px;border-radius:50%;border:1px solid rgba(128,128,128,.45);display:block;flex:0 0 15px}
.themeopt .sub{color:var(--muted);font-size:11.5px;font-weight:400}
/* flow builder: branches, insert menu, validation */
.flowname{font-size:19px;font-weight:600;border:1px solid transparent;background:none;padding:2px 6px;width:min(340px,52vw);border-radius:var(--radius)}
.flowname:hover{border-color:var(--line2)}
.flowname:focus{border-color:var(--accent);background:var(--panel)}
.fcard.trigger{cursor:pointer;width:100%}
.fcard.trigger.sel{box-shadow:0 0 0 2px var(--accent-soft)}
.fnode .side-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.fnode .nstat{font-size:11px;color:var(--muted);white-space:nowrap}
.fnode.haserr{border-color:var(--bad)}
.fnode.haswarn{border-color:var(--warn)}
.fnode .flag{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;font-size:9px;margin-left:6px;color:#fff;vertical-align:1px}
.fnode .flag.err{background:var(--bad)}
.fnode .flag.warn{background:var(--warn);color:#1C2230}
.brwrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:640px;padding-top:18px}
.brwrap::before{content:'';position:absolute;top:0;left:50%;width:2px;height:18px;background:var(--line2);transform:translateX(-50%)}
.brlane{display:flex;flex-direction:column;align-items:center;gap:0;border:1px dashed var(--line2);border-radius:var(--radius);background:var(--panel2);padding:8px 8px 10px;min-width:0}
.brlane .fnode,.brlane .dropzone,.brlane .empty{max-width:100%}
.brlane .fnode{box-shadow:none}
.brhead{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:0 2px 4px}
.brtag{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent);border-radius:3px;padding:1px 7px;font-weight:600}
.brend{font-size:11.5px;color:var(--muted);padding-top:2px}
.brend.bad{color:var(--bad)}
.brlane .empty{padding:10px;border-width:1px}
@media (max-width:820px){.brwrap{grid-template-columns:1fr}}
.dropzone.open{height:auto;padding:6px 0}
.dropzone.open::before{display:none}
.insmenu{position:relative;z-index:3;width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:0 10px 26px rgba(0,0,0,.2);padding:4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.dropzone .insmenu,.dropzone .insmenu *{pointer-events:auto}
.insmenu button{display:flex;align-items:center;gap:7px;border:0;background:none;padding:6px 8px;border-radius:4px;font-size:12.5px;text-align:left}
.insmenu button:hover{background:var(--panel2);color:var(--accent)}
.insmenu .m{width:18px;height:18px;flex:0 0 18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-family:var(--mono);color:#fff;font-weight:600}
.isrow{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4}
.isrow .ic{flex:0 0 15px;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;margin-top:1px}
.isrow.err .ic{background:var(--bad)}
.isrow.warn .ic{background:var(--warn);color:#1C2230}
.btn[disabled]{opacity:.45;pointer-events:none}

/* composer: nova kampanja */
.cwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:16px;align-items:start}
@media (max-width:1100px){.cwrap{grid-template-columns:1fr}}
.fldrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.fldrow{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld>span{font-size:11.5px;color:var(--muted);font-weight:600}
.fld input,.fld select,.fld textarea{width:100%}
.phone{max-width:280px;margin:0 auto;border:1px solid var(--line2);border-radius:16px;background:var(--panel2);padding:12px 12px 10px}
.phone .pbar{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted);padding-bottom:8px}
.phone .psender{text-align:center;font-size:12.5px;font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line2);margin-bottom:10px}
.phone .vrf{color:var(--accent)}
.phone .pbub{background:var(--panel);border:1px solid var(--line2);border-radius:12px;border-top-left-radius:3px;padding:9px 11px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.phone .pimg{height:96px;border-radius:8px;margin-bottom:8px}
.phone .plink{margin-top:6px;color:var(--accent);font-size:12px;word-break:break-all}
.phone .pbtn{margin-top:8px;padding-top:7px;border-top:1px solid var(--line2);text-align:center;font-size:12.5px;font-weight:600;color:var(--accent)}
.phone .ptime{text-align:center;font-size:10.5px;color:var(--muted);margin-top:6px}

/* koledar: dodajanje na posamezen dan */
.day .dn{align-items:center}
.dayadd{border:1px solid var(--line2);background:var(--panel);color:var(--muted);border-radius:4px;width:24px;height:24px;line-height:1;font-size:16px;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.day:hover .dayadd,.dayadd:focus-visible{opacity:1}
.dayadd:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* The multi campaign leads the day's menu and looks like the thing to pick. */
.inlinepop .linkrow.multi{background:var(--accent-soft);color:var(--accent);margin-bottom:4px;padding:8px 9px}
.inlinepop .linkrow.multi b{display:block;font-weight:600}
.inlinepop .linkrow.multi span{display:block;font-size:11px;color:var(--ink2)}
.inlinepop .linkrow.multi:hover{background:var(--accent);color:#fff}
.inlinepop .linkrow.multi:hover span{color:rgba(255,255,255,.8)}
.daymenu{position:absolute;top:28px;left:6px;right:6px;z-index:20;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:0 12px 30px rgba(0,0,0,.28);padding:4px;display:flex;flex-direction:column;gap:1px}
.daymenu button{display:flex;align-items:center;gap:7px;border:0;background:none;text-align:left;padding:5px 7px;border-radius:4px;font-size:12px;line-height:1.3;color:var(--ink2)}
.daymenu button:hover{background:var(--panel2);color:var(--accent)}
.daymenu i{width:8px;height:8px;border-radius:2px;flex:0 0 8px;display:block}
@media (prefers-reduced-motion: reduce){.dayadd{transition:none}}

/* foto/video in oznaka klipa */
.seg.sm button{padding:4px 9px;font-size:12px}
.seg.full{display:flex;width:100%}.seg.full>button{flex:1}   /* a switch that spans its panel, e.g. Simple · Advanced */
.tvid{position:absolute;top:4px;right:4px;font-size:9px;font-family:var(--mono);background:rgba(0,0,0,.6);color:#fff;padding:1px 4px;border-radius:2px;z-index:2}

/* knjiznica formatov: predogled in sirsa mreza */
.fmtgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1180px){.fmtgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.fmtgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fmtgrid{grid-template-columns:1fr}}
.fthumb{position:relative;overflow:hidden;border-radius:4px;background:var(--panel2);max-height:190px}
.fthumb svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ffmt{position:absolute;top:5px;left:5px;z-index:2;font-family:var(--mono);font-size:9px;background:rgba(0,0,0,.55);color:#fff;padding:1px 5px;border-radius:2px}
.fplay{position:absolute;right:5px;bottom:5px;z-index:2;font-size:10px;line-height:1;color:#fff;background:rgba(0,0,0,.55);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center}

/* profili */
.profgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:16px;align-items:start}
@media (max-width:1100px){.profgrid{grid-template-columns:1fr}}
.avat{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.avat.big{width:38px;height:38px;flex:0 0 38px;font-size:13px}
.cons{display:inline-flex;gap:3px}
.cons span{font-size:9.5px;font-family:var(--mono);border:1px solid var(--line2);color:var(--muted);border-radius:3px;padding:1px 4px;line-height:1.5}
.cons span.on{border-color:transparent;background:var(--ok-soft);color:var(--ok);font-weight:600}
.timeline{display:flex;flex-direction:column;gap:0}
.tl{display:flex;gap:10px;position:relative;padding:0 0 13px}
.tl:last-child{padding-bottom:0}
.tl::before{content:'';position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--line)}
.tl:last-child::before{display:none}
.tlic{position:relative;z-index:1;width:22px;height:22px;flex:0 0 22px;border-radius:50%;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
.tlb{flex:1;min-width:0;padding-top:1px}

/* koraki flowa v profilu */
.fsteps{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.fstep i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-family:var(--mono);color:#fff;opacity:.45}
.fstep.done i{opacity:1}
.fstep.now i{opacity:1;box-shadow:0 0 0 3px var(--accent-soft)}
.fline{width:14px;height:2px;background:var(--line2);flex:0 0 14px}

/* vizualni urejevalnik emaila */
.crow{display:grid;grid-template-columns:1.4fr 1.2fr 1fr .8fr .6fr auto;gap:10px;align-items:end}
@media (max-width:1100px){.crow{grid-template-columns:1fr 1fr}}
.ebuild{display:grid;grid-template-columns:172px minmax(0,1fr) minmax(0,330px);gap:16px;align-items:start}
@media (max-width:1240px){.ebuild{grid-template-columns:150px minmax(0,1fr)}.einsp{grid-column:1 / -1}}
@media (max-width:820px){.ebuild{grid-template-columns:1fr}.epalcol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}

/* Deciding when it goes out, next to what it will actually look like —
   the same reason step 3's builder puts the canvas beside its inspector. */
.send4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:20px;align-items:start;max-width:1080px;margin:0 auto}
.send4preview .emailpreview{max-height:640px;overflow:auto}
@media (max-width:900px){.send4{grid-template-columns:1fr}}
.epalcol{position:sticky;top:12px}
.epalcol .p-group{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:2px 0 6px}
.epal{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ecanvas{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.esub{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;align-items:center;margin-bottom:12px}
.esub input{width:100%}
.eframe{background:#fff;color:#1C2230;border:1px solid var(--line2);border-radius:4px;max-width:620px;margin:0 auto;overflow:hidden}
.ehdr{background:#1C2230;color:#fff;padding:13px 18px;font-weight:600;letter-spacing:.04em;font-size:13px}
.ebody{padding:8px 18px 14px}
.efoot{padding:10px 18px;border-top:1px solid #E1E4EA;font-size:11px;color:#6B7585}
.eblk{position:relative;border:1px solid transparent;border-radius:4px;padding:6px;margin:0}
.eblk:hover{border-color:var(--line2)}
.eblk.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.eblk .etag{position:absolute;top:-8px;left:6px;font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:var(--accent-ink);padding:1px 6px;border-radius:3px;opacity:0}
.eblk.sel .etag,.eblk:hover .etag{opacity:1}
.eblk .etools{position:absolute;top:-10px;right:6px;display:flex;gap:2px;opacity:0}
.eblk.sel .etools,.eblk:hover .etools{opacity:1}
.eblk .etools button{border:1px solid var(--line2);background:var(--panel);color:var(--ink2);border-radius:3px;width:19px;height:19px;font-size:10px;line-height:1;padding:0}
.eblk .etools button:hover{border-color:var(--accent);color:var(--accent)}
.eblk .etools button.del:hover{border-color:var(--bad);color:var(--bad)}
.ehero{position:relative;overflow:hidden;border-radius:4px}
.ehero svg{position:absolute;inset:0;width:100%;height:100%}
.ecap{font-size:11px;color:#6B7585;padding-top:4px}
.ehead{font-weight:700;line-height:1.25;color:#1C2230}
.ehead.l{font-size:21px}.ehead.m{font-size:17px}.ehead.s{font-size:15px}
.etext{font-size:13.5px;line-height:1.55;color:#33404F}
.ebtn{display:inline-block;background:var(--accent);color:#fff;padding:9px 16px;border-radius:4px;font-weight:600;font-size:13px}
.ebtn.out{background:none;border:1px solid var(--accent);color:var(--accent)}
.ebtn.sm{padding:5px 10px;font-size:12px}
.eprod{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.eprod .eimg{aspect-ratio:4/5;position:relative;border-radius:4px;overflow:hidden}
.eprod .einfo{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.eimg svg{position:absolute;inset:0;width:100%;height:100%}
.egrid{display:grid;gap:10px}
.ecell .eimg{aspect-ratio:1;position:relative;border-radius:4px;overflow:hidden;margin-bottom:5px}
.ediv{height:1px;background:#E1E4EA;margin:4px 0}
.esoc{display:flex;gap:8px;justify-content:center;font-family:var(--mono);font-size:10px;color:#6B7585}
.esoc span{border:1px solid #E1E4EA;border-radius:3px;padding:3px 8px}
.edrop{position:relative;height:14px;display:flex;align-items:center;justify-content:center}
.eplus{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--muted);font-size:12px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.edrop:hover .eplus,.edrop.open .eplus{opacity:1}
.eplus:hover{border-color:var(--accent);color:var(--accent)}
.emenu{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:12;width:250px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:0 12px 30px rgba(0,0,0,.24);padding:4px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
/* On the last drop zone the menu would run past the frame's bottom and be clipped: it opens upward there. */
.edrop:last-child .emenu{top:auto;bottom:20px}
.emenu button{display:flex;align-items:center;gap:6px;border:0;background:none;padding:6px 7px;border-radius:4px;font-size:12px;text-align:left;color:var(--ink2)}
.emenu button:hover{background:var(--panel2);color:var(--accent)}
.emenu .m{width:16px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.eplus{transition:none}}

/* kupon v emailu */
.ecoup{border:2px dashed #C9D4D1;border-radius:6px;padding:12px;text-align:center;background:#FAFCFB}
.ecoup.inl{border:0;border-top:1px solid #E1E4EA;border-bottom:1px solid #E1E4EA;border-radius:0;background:none;padding:10px 0}
.ecoupv{font-size:15px;font-weight:700;color:#1C2230}
.ecoupc{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.09em;color:var(--accent);margin:3px 0}
.ecoupd{font-size:11.5px;color:#6B7585;margin-bottom:6px}


/* koraki v sestavljalniku kampanje */
.cstep{display:flex;align-items:center;gap:0;margin-bottom:16px;flex-wrap:wrap}
.cstep button{display:flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);border-radius:var(--radius);padding:6px 12px;font-size:13px}
.cstep button i{width:19px;height:19px;border-radius:50%;background:var(--panel2);color:var(--muted);font-size:11px;font-family:var(--mono);display:flex;align-items:center;justify-content:center;font-style:normal}
.cstep button.on{border-color:var(--accent);color:var(--ink);font-weight:600}
.cstep button.on i{background:var(--accent);color:var(--accent-ink)}
.cstep button.done i{background:var(--ok);color:#fff}
.cstep button.done{color:var(--ink2)}
.cline{width:22px;height:2px;background:var(--line2);flex:0 0 22px}

.inp-sm{flex:0 0 auto;width:auto;padding:4px 6px;font-size:12px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.pager .btn.sm{min-width:28px;text-align:center}

/* urejevalnik: povleci in spusti, oblikovanje besedila */
.eblk[draggable="true"]{cursor:default}
.eblk .egrip{cursor:grab;margin-right:5px;letter-spacing:-1px}
.eblk.edragging{opacity:.35}
.eblk [contenteditable]{outline:none;cursor:text}
.eblk [contenteditable]:focus{box-shadow:0 0 0 2px var(--accent-soft);border-radius:3px}
.edrop .ebar{display:none;position:absolute;left:0;right:0;height:34px;border:2px dashed var(--accent);border-radius:4px;background:var(--accent-soft)}
.edrop.over{height:40px}
.edrop.over .ebar{display:block}
.edrop.over .eplus{opacity:0}
.pitem[draggable="true"]{cursor:grab}
.efmt{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:3px;background:var(--panel);border:1px solid var(--line2);border-radius:5px;box-shadow:0 6px 18px rgba(0,0,0,.2);padding:2px 4px}
.efmt button{border:1px solid transparent;background:none;color:var(--ink2);border-radius:3px;min-width:21px;height:21px;font-size:12px;line-height:1;padding:0 3px}
.efmt button:hover{background:var(--panel2);color:var(--accent)}
.efmt button.on{background:var(--accent);color:var(--accent-ink)}
.efmt input[type="number"]{width:46px;padding:1px 4px;font-size:11.5px;height:21px}
.efmt input[type="color"]{width:24px;height:21px;padding:1px;border-radius:3px}

/* predogled emaila: namizje ali telefon */
.eframe.mob{max-width:375px;border-radius:14px;border-width:2px}
.eframe.mob .ehdr{padding:11px 14px;font-size:12px}
.eframe.mob .ebody{padding:6px 14px 12px}
.eframe.mob .efoot{padding:9px 14px;font-size:10px}
.eframe.mob .ehead.l{font-size:18px}
.eframe.mob .ehead.m{font-size:16px}
.eframe.mob .etext{font-size:13px}
.eframe.mob .egrid{grid-template-columns:1fr 1fr!important}
.eframe.mob .eprod{grid-template-columns:76px 1fr}
.eframe.mob .efmt{transform:translateX(-50%) scale(.92)}

/* SVG ikone v meniju */
.nico{width:15px;height:15px;display:block;margin:0 auto;overflow:visible}
.nav button .ico:has(.nico){opacity:1}
.side.sidemini .nav button .ico .nico{margin:0 auto}

.upop .uh{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--side-dim);padding:6px 10px 3px}
.upop .usub{justify-content:flex-start}
.upop .chev2{margin-left:auto;font-size:9px;opacity:.7}
.upop .uchl{display:flex;flex-direction:column;padding-left:16px}
.upop .uchl button{font-size:12.5px;padding:5px 10px}

/* ikona kanala na vozlu in v paleti flowa */
.fnode .fmark{width:22px;height:22px;flex:0 0 22px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-family:var(--mono);font-weight:600;margin-top:1px}
.fnode .fmark .nico,.pitem .m .nico,.insmenu .m .nico,.fstep i .nico{width:13px;height:13px}
.fstep i .nico{width:12px;height:12px}

/* nedokoncane nastavitve v meniju, obvestila zgoraj desno */
.nav button .todo{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:0 0 7px;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.nav button .soon{margin-left:auto;font-size:9.5px;letter-spacing:.04em;padding:1px 5px;border-radius:5px;
  background:var(--side-veil);border:1px solid var(--side-line);color:var(--side-dim);flex:0 0 auto}
.side.sidemini .nav button .soon{display:none}
.side.sidemini .nav button .todo{position:absolute;top:6px;right:8px}
.notifwrap{position:relative}
.iconbtn.on{border-color:var(--accent);color:var(--accent)}
.notifpop{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:340px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.28);overflow:hidden}
.notifpop .nhd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.notifpop .nlist{max-height:340px;overflow:auto}
.nrow{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-bottom:1px solid var(--line)}
.nrow:hover{background:var(--panel2)}
.nrow.unread{background:var(--accent-soft)}
.nrow.unread:hover{filter:brightness(.98)}
.nrow .nic{width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;margin-top:1px}
.nrow .nic.done{background:var(--ok)}.nrow .nic.warn{background:var(--warn);color:#1C2230}.nrow .nic.gen{background:var(--accent)}
.nrow .nbody{display:flex;flex-direction:column;gap:2px;min-width:0}
.nrow .nbody b{font-size:12.5px;font-weight:600}
.notifpop .nfoot{padding:8px 12px;background:var(--panel2);border-top:1px solid var(--line)}
/* logotipi v brand kitu */
.logogrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:900px){.logogrid{grid-template-columns:1fr}}
.logoslot{border:1px solid var(--line2);border-radius:var(--radius);padding:11px;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 12px;align-items:center}
.logoslot.empty{border-style:dashed}
.lsprev{grid-row:1 / span 2;height:62px;border-radius:5px;background:var(--panel2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lsprev.dark{background:#0F172A}
.lswm{font-size:10.5px;letter-spacing:.14em;font-weight:500;text-align:center;line-height:1.5}
.lswm b{display:block;font-weight:700;letter-spacing:.06em}
.lsmark{width:38px;height:38px;border-radius:9px;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.lsnone{font-size:11px;color:var(--muted)}
.lsinfo{align-self:end}
.lsacts{display:flex;gap:6px;align-self:start}
.plan .bd{gap:12px}
.plan.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.planamt{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.03em}
.planamt span{font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:400}
.planlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--ink2)}
.planlist li{display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.planlist li::before{content:"✓";color:var(--accent);font-size:11px;line-height:1.5}
.planover{font-family:var(--mono);font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;line-height:1.6}
.plan .btn{justify-content:center;text-align:center}
.paypick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.paypick{grid-template-columns:1fr}}
.paybtn{display:flex;gap:10px;align-items:center;border:1px solid var(--line2);background:var(--panel);border-radius:var(--radius);padding:11px 12px;text-align:left}
.paybtn:hover{border-color:var(--accent)}
.paybtn.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.paybtn b{display:block;font-size:13px}
.payic{width:30px;height:30px;flex:0 0 30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.payic.card{background:var(--panel2);color:var(--ink2);border:1px solid var(--line)}
.payic.pp{background:#003087;color:#fff;font-family:var(--display)}
/* pravi zavihki znotraj zaslona, ne gumbi */
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line2);margin:0 0 18px;overflow-x:auto}
.subtabs button{position:relative;border:1px solid transparent;border-bottom:0;background:none;
  padding:10px 16px;font-size:13.5px;font-weight:500;color:var(--muted);border-radius:var(--radius) var(--radius) 0 0;
  margin-bottom:-1px;white-space:nowrap}
.subtabs button:hover{color:var(--ink);background:var(--panel2)}
.subtabs button.on{background:var(--panel);border-color:var(--line2);color:var(--ink);font-weight:600}
.subtabs button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--panel)}
.subtabs button.on::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent);border-radius:2px 2px 0 0}
.billsum{display:flex;gap:18px;flex-wrap:wrap;align-items:center;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 14px;margin-bottom:16px;font-size:12.5px;color:var(--ink2)}
.billsum b{color:var(--ink)}
/* zavihki v nastavitvah naj se berejo kot zavihki, ne kot povezave */
.tabs button{padding:9px 13px}
.tabs button:hover{color:var(--ink)}
.usetab td{vertical-align:top}
.usetab .bar{margin-bottom:3px}
.useplot{display:flex;align-items:flex-end;gap:14px;height:120px;padding-top:6px}
.ub{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%;position:relative}
.ub span{width:12px;border-radius:3px 3px 0 0;display:block}
.ub .u1{background:var(--s1)}
.ub .u2{background:var(--s2)}
.ub i{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-style:normal;font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.useplot{margin-bottom:20px}
/* med postavitvijo racuna ni nobene navigacije: samo logotip in koraki */
.app.setup .nav,.app.setup .sidefoot,.app.setup .navmk,.app.setup .mobilenav{display:none}
.app.setup .side{width:200px;flex:0 0 200px;justify-content:flex-start}
.app.setup .appbar .acct,.app.setup .appbar .abspace,.app.setup .appbar .pgacts,.app.setup .appbar .pgttl{display:none}
.app.setup .appbar{min-height:0;padding:0;border-bottom:0}
.app.setup #screen{padding-top:34px}
.app.setup .proto{display:none}
.onbh{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}
.onbnote{text-align:center;font-size:12.5px;color:var(--muted);margin-top:18px}
.vatwrap{position:relative}
.vatwrap input{padding-right:104px}
.vatstate{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11px;font-family:var(--mono);color:var(--muted)}
.vatstate.ok{color:var(--ok)}
.vatstate.busy{color:var(--marine)}
.vatstate.bad{color:var(--bad)}
input.err{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.help{font-size:12px;color:var(--muted)}
.help.err{color:var(--bad)}

/* --- Rails port: the sidebar uses links, the prototype used buttons --------
   Same geometry as .nav button above, line for line. */
.nav a{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;
  text-align:left;background:none;border:0;padding:6px 12px 6px 22px;
  color:var(--side-ink);font-size:13px;line-height:1.4;text-decoration:none}
.nav a:hover{color:var(--side-strong)}
.nav a.active{color:var(--side-strong);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.nav a .ico{width:18px;flex:0 0 18px;text-align:center;font-size:13px;opacity:.85}
.nav a .ico:has(.nico){opacity:1}
.nav a > .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a .soon{margin-left:auto;font-size:9.5px;letter-spacing:.04em;padding:1px 5px;border-radius:5px;
  background:var(--side-veil);border:1px solid var(--side-line);color:var(--side-dim);flex:0 0 auto}
.side.sidemini .nav a .soon{display:none}
.authmeta .chk{white-space:nowrap;align-items:center}
/* A checkbox inside a flex .chk row must not stretch to the row's width. */
.chk input[type=checkbox]{flex:0 0 auto;width:13px;height:13px;margin:0;padding:0}

/* --- autosave ------------------------------------------------------------
   Forms that save themselves need to say so, quietly and in one place. */
.savestate{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  min-height:22px;transition:color .2s ease}
.savestate.busy{color:var(--marine)}
.savestate.ok{color:var(--ok)}
.savestate.bad{color:var(--bad)}
.savestate .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.savestate.idle .dot{opacity:.3}
.field.saved input,.field.saved select,.field.saved textarea{border-color:var(--ok)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad);
  box-shadow:0 0 0 3px var(--bad-soft)}
.field .fielderr{display:block;margin-top:4px;font-size:12px;color:var(--bad)}

/* --- sidebar: collapsing --------------------------------------------------
   The rail slides rather than snapping: the width animates, the labels fade
   out slightly ahead of it so text never squeezes, and the collapse arrow
   turns to point the way back. */
.side{transition:width .26s cubic-bezier(.4,0,.2,1),flex-basis .26s cubic-bezier(.4,0,.2,1)}
.side .nav a .lbl,.side .btext,.side .ubtn .su,.side .ubtn .chev{
  transition:opacity .16s ease .08s}
.side.sidemini .nav a .lbl,.side.sidemini .btext,
.side.sidemini .ubtn .su,.side.sidemini .ubtn .chev{opacity:0;transition-delay:0s}
.sidecol{transition:transform .26s cubic-bezier(.4,0,.2,1),color .15s ease,background .15s ease}
.side.sidemini .sidecol{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .side,.side *,.sidecol{transition:none !important}
}

/* Collapsed: wider rail, bigger glyphs, and a rule where each group starts so
   the shape of the menu survives losing its headings. */
.side.sidemini{width:58px;flex:0 0 58px}
.side.sidemini .wpcore,.side.sidemini .nav{width:58px}
.side.sidemini .nav a{width:42px;min-width:42px;padding:8px 0;gap:0;justify-content:center;position:relative;border-radius:6px}
.side.sidemini .nav a .ico{width:42px;flex:0 0 42px;text-align:center;margin:0;font-size:15px;line-height:1}
.side.sidemini .nav a .ico .nico{width:16px;height:16px;margin:0 auto}
.side.sidemini .nav a .lbl{display:none}

.side.sidemini .brand{padding:14px 0 12px}
.side.sidemini .bmark,.side.sidemini .bmk{width:28px;height:28px;flex:0 0 28px}

.nav a .ico .nico{transition:width .2s ease,height .2s ease}

/* --- sidebar: the account menu -------------------------------------------
   A <details> so it needs no JavaScript and cannot get stuck open across a
   page load. Opens upwards, over the content. */
.usermenu{position:relative}
.usermenu > summary{list-style:none;cursor:pointer}
.usermenu > summary::-webkit-details-marker{display:none}
.usermenu[open] .ubtn{background:var(--side-veil);border-color:var(--side-line)}
.usermenu[open] .ubtn .chev{transform:rotate(180deg)}
.ubtn .chev{transition:transform .2s ease;margin-left:auto}
.upop a,.upop button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;
  text-align:left;padding:7px 8px;border-radius:5px;font-size:12.5px;color:var(--ink2);text-decoration:none}
.upop a:hover,.upop button:hover{background:var(--panel2);color:var(--accent)}
.upop .ui{width:16px;text-align:center;font-size:12px;color:var(--muted);flex:0 0 16px}
.upop a:hover .ui,.upop button:hover .ui{color:var(--accent)}
.upop form{margin:0}
.upop .uhead .avat{width:28px;height:28px;flex:0 0 28px;font-size:11px}
.upop .uh{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 10px 3px}
.side.sidemini .upop{left:6px;width:230px}
.tabn{display:inline-block;margin-left:6px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);
  background:var(--panel2);border-radius:99px;padding:1px 6px;line-height:1.5}
.tabs a.on .tabn{background:var(--accent);color:var(--accent-ink)}
.tabs a{background:none;border:0;padding:8px 12px;font-size:13px;color:var(--ink2);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}

/* --- sidebar: folding groups ---------------------------------------------- */
.navgroup > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:6px}
.navgroup > summary::-webkit-details-marker{display:none}
.navgroup > summary:hover{color:var(--side-ink)}
.navgroup > summary .gchev{font-size:9px;opacity:.5;transition:transform .2s ease}
.navgroup[open] > summary .gchev{transform:rotate(180deg)}
/* Collapsed rail: no headings to fold, so the groups are always open and the
   heading becomes the rule that separates them. */
.side.sidemini .navgroup > summary{pointer-events:none}
.side.sidemini .navgroup > summary .gchev{display:none}
.side.sidemini .navgroup > summary span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;max-width:46px}
/* The collapsed rail has no room for group names: each group is instead one rounded block on the
   rail's hover tone, its icons stacked inside, so what belongs together is seen rather than read. */
.side.sidemini .nav-group{display:none}
.side.sidemini .navgroup{display:block;margin:4px 8px 0;padding:3px 0;border-radius:8px;background:var(--side-hover)}
.side.sidemini .navgroup > a{margin:0 auto}
.side.sidemini .nav > a{margin:4px 8px 0}
.side.sidemini .nav a.active{box-shadow:inset 3px 0 0 var(--accent);background:var(--side)}

/* --- appbar: store switcher and notifications -----------------------------
   Both are <details>, so they work without JavaScript and cannot get stuck
   open across a page load. */
.acct > summary,.notifwrap > summary{list-style:none;cursor:pointer;display:block}
.acct > summary::-webkit-details-marker,
.notifwrap > summary::-webkit-details-marker{display:none}
.acct[open] .acctbtn,.notifwrap[open] .iconbtn{border-color:var(--accent);color:var(--accent)}
.acct[open] .acctbtn .chev{transform:rotate(180deg)}
.acctbtn .chev{transition:transform .2s ease}
.acctpop form{margin:0}
.acctpop a.acctlink{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;
  border-radius:4px;font-size:12.5px;color:var(--ink2);text-decoration:none}
.acctpop a.acctlink:hover{background:var(--panel2);color:var(--accent)}
.acctpop button span:last-child{min-width:0}
.acctpop button b{display:block;font-size:12.5px}
.nrow{text-decoration:none;color:inherit;display:flex}
.nrow .nic{font-size:7px}
.notifpop .nfoot a{color:var(--accent);text-decoration:none}
.appbar{align-items:flex-start}
.appbar .pgttl{padding-top:2px}

/* --- onboarding ----------------------------------------------------------- */
.onbtop{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.onbtop .brand{border:0;padding:0}
.onbtop .btext b{color:var(--ink)}
.onbtop form{margin:0}
.onbwrap{padding-left:24px;padding-right:24px}
.onbcard + .onbcard{margin-top:14px}
.onbcard .lead{color:var(--muted);font-size:13px;margin:0 0 16px;max-width:64ch}
.onbcard .onbh{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.onbfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.stepstate{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.stepstate i{width:8px;height:8px;border-radius:50%;background:var(--line2);flex:0 0 8px}
.stepstate.ready i{background:var(--ok)}
.stepstate.waiting i{background:var(--warn)}
.onbcard .tablewrap td .mono{white-space:nowrap}
.nextsteps .card{display:flex;flex-direction:column;gap:8px;padding:16px;text-decoration:none;color:inherit}
.nextsteps .card:hover{border-color:var(--accent)}
.nextsteps .card p{margin:0;flex:1}
.nextsteps .card span{color:var(--accent)}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1240px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- a row of actions inside a table cell --------------------------------- */
.inlineform{display:inline-block;margin:0}
.inlinemenu{display:inline-block;position:relative}
.inlinemenu > summary{list-style:none;cursor:pointer;display:inline-flex}
.inlinemenu > summary::-webkit-details-marker{display:none}
.inlinepop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:170px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:var(--shadow-3);padding:4px;text-align:left}
.inlinepop form{margin:0}
.inlinepop .linkrow{display:block;width:100%;text-align:left;background:none;border:0;
  padding:7px 9px;border-radius:4px;font-size:12.5px;color:var(--ink2);text-decoration:none}
.inlinepop .linkrow:hover{background:var(--panel2);color:var(--accent)}
.inlinepop .linkrow.on{color:var(--accent);font-weight:600}
.inlinemenu[hidden],.inlinepop .linkrow[hidden]{display:none}   /* their own display would otherwise beat the browser's [hidden] */

/* --- the result of a store test ------------------------------------------- */
.checkrow td{background:var(--panel2)}
.checkdot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;margin-top:5px;background:var(--muted)}
.checkdot.ok{background:var(--ok)}
.checkdot.warn{background:var(--warn)}
.checkdot.bad{background:var(--bad)}

/* --- import progress ------------------------------------------------------ */
.bfbox{padding:12px 16px;border-top:1px solid var(--line);background:var(--panel2)}
.bfbar{height:6px;border-radius:99px;background:var(--line2);overflow:hidden}
.bfbar i{display:block;height:100%;background:var(--accent);border-radius:99px;
  transition:width .4s cubic-bezier(.4,0,.2,1)}

/* --- the products table ---------------------------------------------------- */
.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0 12px}
.prodtable td.pcell{width:52px;padding-right:0}
.pthumb{width:38px;height:38px;border-radius:var(--radius);overflow:hidden;display:block;
  background:var(--panel2);border:1px solid var(--line)}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pthumb.empty{background:repeating-linear-gradient(45deg,var(--panel2),var(--panel2) 5px,var(--panel) 5px,var(--panel) 10px)}
.cattag{display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:99px;margin:1px 2px 1px 0;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink2);text-decoration:none;white-space:nowrap}
.cattag:hover{border-color:var(--accent);color:var(--accent)}

/* --- the store list, one row that opens ----------------------------------- */
.storelist{border-top:1px solid var(--line)}
.store{border-bottom:1px solid var(--line)}
.store > summary{list-style:none;cursor:pointer;padding:11px 16px}
.store > summary::-webkit-details-marker{display:none}
.store > summary:hover{background:var(--panel2)}
.store[open] > summary{background:var(--panel2);border-bottom:1px solid var(--line)}
.storehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.storechev{color:var(--muted);font-size:10px;transition:transform .2s ease;flex:0 0 10px}
.store[open] .storechev{transform:rotate(90deg)}
.storename{display:flex;flex-direction:column;line-height:1.3;min-width:180px}
.storename b{font-size:13px}
.storefacts{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}
.storebody{padding:12px 16px 14px}
.storebody .bfbox{margin:-12px -16px 12px;border-top:0}
.storekv dt{width:110px}
.secret > summary{list-style:none;cursor:pointer;display:inline}
.secret > summary::-webkit-details-marker{display:none}
.checkresult{margin-top:10px;padding:10px 12px;background:var(--panel2);border-radius:var(--radius)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}

/* --- the build number ------------------------------------------------------
   Findable when you need it, invisible when you do not. It brightens on hover
   so reading it out over a support call does not need a screenshot. */
.btext .ver{display:block;font-family:var(--mono);font-size:9px;line-height:1.2;
  letter-spacing:.04em;color:var(--side-dim);opacity:.6;transition:opacity .15s ease}
/* The number is there to be read when you go looking for it, not while you are
   reading the menu — so it lifts on hover rather than sitting at one weight. */
.brand:hover .btext .ver{opacity:1}
.side.sidemini .btext .ver{display:none}
b.bad{color:var(--bad)}

/* --- the handshake screen --------------------------------------------------
   One decision, nothing else on the page. White, not the app's grey, because
   this is a moment between two systems rather than a place inside one. */
.hs{background:#fff;min-height:100dvh;display:flex;flex-direction:column}
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 28px}
.hs-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.hs-brand span{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.025em}
.hs-who{font-size:12px;color:var(--muted);font-family:var(--mono)}
.hs-main{flex:1;display:flex;align-items:flex-start;justify-content:center;
  padding:24px 24px 48px}
.hs-main > *{width:100%;max-width:560px}
@media (min-width:760px){.hs-main{align-items:center;padding-bottom:88px}}
.hs-foot{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:18px 24px 26px;font-size:11.5px;color:var(--muted)}
.hs-foot a{color:var(--muted);text-decoration:none}
.hs-foot a:hover{color:var(--ink2);text-decoration:underline}
.hs .card{box-shadow:var(--shadow-2)}

/* --- a row that opens ------------------------------------------------------ */
.rowlink{cursor:pointer}
.rowlink:hover td{background:var(--panel2)}
.rowlink:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* --- the picture, bigger --------------------------------------------------- */
.zoom{position:fixed;z-index:80;pointer-events:none;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--radius-md);padding:6px;
  box-shadow:var(--shadow-3)}
.zoom img{display:block;width:240px;height:240px;object-fit:contain;border-radius:var(--radius)}

/* --- one product ----------------------------------------------------------- */
.prodhead{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;padding:20px}
@media (max-width:820px){.prodhead{grid-template-columns:1fr}}
.prodshot{display:block;border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;background:var(--panel2);aspect-ratio:1}
.prodshot img{width:100%;height:100%;object-fit:cover;display:block}
.prodshot.empty{display:flex;align-items:center;justify-content:center;
  border-style:dashed;aspect-ratio:1}
.prodstrip{display:flex;gap:6px;margin-top:8px;align-items:center}
.prodmini{width:52px;height:52px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:block;background:var(--panel2)}
.prodmini img{width:100%;height:100%;object-fit:cover;display:block}
.prodmini:hover{border-color:var(--accent)}
.prodprice{font-size:22px;font-family:var(--display);letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prodprice s{font-size:16px}
.pill.accent{background:var(--accent-soft);color:var(--accent)}

/* --- pagination ------------------------------------------------------------ */
.pager{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.pgo{min-width:30px;height:30px;padding:0 8px;border-radius:var(--radius);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-family:var(--mono);color:var(--ink2);text-decoration:none;
  border:1px solid transparent}
.pgo:hover{background:var(--panel2);color:var(--ink)}
.pgo.on{background:var(--ink);border-color:var(--ink);color:var(--panel);font-weight:600}
.pgo.spent{color:var(--line2);pointer-events:none}
.pgap{padding:0 2px;color:var(--muted);font-size:12.5px}

/* --- confirm dialog -------------------------------------------------------- */
.confirm{border:0;border-radius:var(--radius-lg);padding:22px 24px;max-width:420px;width:calc(100% - 32px);
  background:var(--panel);color:var(--ink);box-shadow:var(--shadow-3)}
.confirm::backdrop{background:rgba(16,22,25,.45);backdrop-filter:blur(2px)}
.confirm h3{font-family:var(--display);font-size:17px;margin:0 0 8px;letter-spacing:-.02em}
.confirm p{margin:0;max-width:44ch}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{background:#8E1E17;border-color:#8E1E17}

/* --- the dangerous corner of a panel --------------------------------------- */
.danger-zone{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.danger-zone .row{gap:8px;flex-wrap:wrap;align-items:flex-end}
.danger-zone input{width:130px}

/* Same danger zone, sitting inline in a row of buttons instead of its own
   block — the trigger is a button, the confirm form drops in a popover. */
.danger-zone-inline{position:relative;display:inline-block}
.danger-zone-inline > summary{list-style:none;cursor:pointer}
.danger-zone-inline > summary::-webkit-details-marker{display:none}
.danger-zone-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:300px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,.2);padding:14px}
.danger-zone-pop input{width:100%}

/* A stack of collapsible boxes, evenly spaced regardless of whether a form
   (display:contents) sits between some of them in the markup. */
.foldstack{margin-top:10px}
.foldstack .fold{margin-top:10px}

/* A small checkbox-shaped "is this actually on" mark, at the start of a
   connectable thing's name — filled when connected, empty when not, so the
   state reads before the pill on the other end of the row does. */
.conncheck{width:17px;height:17px;border-radius:5px;display:inline-flex;align-items:center;
  justify-content:center;flex:0 0 17px;font-size:11px;line-height:1;margin-right:8px;
  background:var(--panel2);border:1px solid var(--line2);color:transparent}
.conncheck.on{background:var(--ok);border-color:var(--ok);color:#fff}
.card.stat.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
a.card.stat{text-decoration:none;color:inherit;display:block}
a.card.stat:hover{border-color:var(--line2)}
/* A number that is also a switch for its line on the chart beneath it. */
.card.stat.pick{cursor:pointer;user-select:none}
.card.stat.pick:hover{border-color:var(--line2)}
.card.stat.pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card.stat.pick .d a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.card.stat.pick .d a:hover{color:var(--accent)}

/* --- a person's timeline --------------------------------------------------- */
.timeline{list-style:none;margin:0;padding:0}
.tlday{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:14px 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.tlday:first-child{padding-top:0}
.tlrow{padding:0}
.tlitem{border-bottom:1px solid var(--line)}
.tlrow:last-child .tlitem{border-bottom:0}
.tlitem>summary{display:flex;gap:10px;align-items:center;padding:7px 8px;margin:0 -8px;
  cursor:pointer;list-style:none;border-radius:var(--radius)}
.tlitem>summary::-webkit-details-marker{display:none}
.tlitem>summary:hover{background:var(--panel2)}
.tlitem[open]>summary{background:var(--panel2)}
.tlitem>summary::after{content:"";width:6px;height:6px;flex:0 0 6px;margin-left:8px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
.tlitem[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.tlmore{padding:4px 8px 12px 38px}
.tlmore .kv{margin:0}
.tlsrc{display:inline-block;margin-left:6px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);background:var(--panel2);border-radius:99px;padding:1px 6px}

/* --- one person's orders -------------------------------------------------- */
.ostats{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line)}
.ostats>div{padding:12px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.ostats>div:last-child{border-right:0}
.ostats .l{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ostats .v{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.ostats .v.small{font-size:14px;font-weight:550;padding-top:3px}
.ostats .d{font-size:11.5px;color:var(--muted)}
@media (max-width:1100px){.ostats{grid-template-columns:repeat(3,1fr)}
  .ostats>div:nth-child(3n){border-right:0}
  .ostats>div:nth-child(n+4){border-top:1px solid var(--line)}}
.tlmark{width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:10px;margin-top:1px;
  background:var(--panel2);color:var(--ink2)}
.tlrow.ok     .tlmark{background:var(--ok-soft);color:var(--ok)}
.tlrow.bad    .tlmark{background:var(--bad-soft);color:var(--bad)}
.tlrow.accent .tlmark{background:var(--accent-soft);color:var(--accent)}
.tlbody{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;min-width:0;font-size:13px;flex:1}
.tldetail{color:var(--ink2)}
.tltime{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.avat.big{width:44px;height:44px;flex:0 0 44px;font-size:15px}

/* --- site analytics -------------------------------------------------------- */
.fbar{height:9px;border-radius:99px;background:var(--panel2);overflow:hidden}
.fbar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.daychart{display:flex;align-items:flex-end;gap:2px;height:120px}
.daycol{flex:1;min-width:3px;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;gap:2px;position:relative}
.dbar{display:block;width:100%;background:var(--accent);border-radius:2px 2px 0 0;min-height:1px}
.daycol:hover .dbar{background:var(--accent-600)}
.ddot{width:4px;height:4px;border-radius:50%;background:var(--ink);flex:0 0 4px}

/* --- day-by-day small multiples ----------------------------------------- */
.tcwrap{position:relative}
.trow{display:flex;gap:12px;align-items:stretch;margin-bottom:10px}
.tlab{width:118px;flex:0 0 118px;font-size:12px;line-height:1.35;padding-top:2px}
.tlab b{display:block;font-size:12.5px;font-weight:550}
.tlab .muted{font-size:11.5px;color:var(--muted)}
.tplot{position:relative;flex:1;min-width:0;padding-left:34px;border-bottom:1px solid var(--line)}
.tymax,.tymin{position:absolute;left:0;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tymax{top:-2px}
.tymin{bottom:-1px}
.tchart{display:flex;align-items:flex-end;gap:2px;height:54px}
.tcol{flex:1;min-width:2px;height:100%;display:flex;align-items:flex-end;position:relative}
.tbar{display:block;width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:1px;opacity:.9}
.tcol.on .tbar{opacity:1;background:var(--accent-600)}
.tcol.on::before{content:"";position:absolute;inset:-4px -1px -1px;background:var(--panel2);
  border-radius:3px;z-index:-1}
.txaxis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);
  margin-left:130px;padding-left:34px}
.ttip{position:absolute;z-index:5;pointer-events:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 6px 18px rgba(16,18,24,.12);padding:8px 10px;font-size:12px;
  min-width:150px;transform:translate(-50%,0)}
.ttip b{display:block;font-size:12px;margin-bottom:4px}
.ttip .tt{display:flex;justify-content:space-between;gap:14px;color:var(--ink2)}
.ttip .tt i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:550}

/* --- funnel hover -------------------------------------------------------- */
.fstep{display:block;border-radius:var(--radius);padding:5px 6px;margin:0 -6px;color:inherit;text-decoration:none}
.fstep:hover{background:var(--panel2)}
a.card.stat{text-decoration:none;color:inherit}
a.card.stat:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(16,18,24,.06)}
@media (max-width:1000px){.g3{grid-template-columns:1fr}}
.substep{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}


/* --- newsletter composer ------------------------------------------------- */
.eblock{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--panel)}
.ebhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ebkind{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ebacts{display:flex;gap:2px}
.eblock textarea,.eblock input[type=text],.eblock input[type=url]{font-size:13.5px}
.emailpreview{max-height:620px;overflow:auto;border-radius:0 0 var(--radius) var(--radius)}
.emailpreview table{width:100%}
.checklist{margin:0;padding-left:18px;font-size:13px;color:var(--ink2)}
.checklist li{margin-bottom:4px}


/* --- the admin shell ------------------------------------------------------
   A different place, so it looks like one. The product is green; ops is
   indigo, and the only thing that changes is the rail's own palette. */
.adminshell{--side:#181534;--side-ink:#C6C2E8;--side-active:#7C6CF0;--side-hover:#241F4C;
  --side-strong:#FFFFFF;--side-dim:rgba(255,255,255,.42);--side-line:rgba(255,255,255,.08);--side-veil:rgba(255,255,255,.07)}
.adminshell .appbar{border-bottom-color:var(--line)}
.pill.admin{background:#ECEAFD;color:#4B3FBD;border-color:#D9D5FA}
.adminshell .brand .ver{color:#9B95D8}

.protolink{display:block;margin:10px 10px 0;padding:4px 11px;font-size:10.5px;color:var(--side-ink);
  opacity:.45;text-decoration:none;letter-spacing:.01em}
.protolink:hover{opacity:.85}

.backapp{display:flex;align-items:center;gap:10px;margin:10px;padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.07);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.10)}
.backapp:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2)}
.backapp .ba-arrow{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--side-active);color:#0B0820;font-size:13px;transition:transform .16s ease}
.backapp:hover .ba-arrow{transform:translateX(-2px)}
.backapp .ba-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.backapp .ba-text b{font-size:12.5px;font-weight:600}
.backapp .ba-text span{font-size:11px;color:var(--side-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A row on a profile's order table opens to show what was in the parcel. */
.otable .orow{cursor:pointer}
.otable .orow:hover{background:var(--panel2)}
.otable .ochev{width:18px;color:var(--muted);transition:transform .12s ease;display:table-cell}
.otable .orow.open .ochev{transform:rotate(90deg)}
.otable .odetail>td{background:var(--panel2);padding:0}
.obody{display:grid;grid-template-columns:3fr 2fr;gap:18px;padding:14px 16px}
@media (max-width:820px){.obody{grid-template-columns:1fr}}
.olines{width:100%;border-collapse:collapse}
.olines td{padding:5px 0;border-bottom:1px solid var(--line);vertical-align:top}
.olines tr:last-child td{border-bottom:0}
.olines .small.muted{display:block}
.osum dt{color:var(--muted)}
.osum dd.bad{color:var(--bad)}

/* Somebody whose parcels keep coming back. */
.riskbar{display:flex;gap:12px;align-items:center;justify-content:space-between;
  border-left:3px solid var(--warn);background:var(--warn-soft)}
.riskbar.bad{border-left-color:var(--bad);background:var(--bad-soft)}
.riskbar.bad b{color:var(--bad)}
.riskbar .small{color:var(--ink2)}
.ostats>div.bad .v{color:var(--bad)}

/* --- campaign composer ----------------------------------------------------- */
/* The steps that are a decision rather than a canvas read better narrow and
   centred; the builder still takes the whole width. */
.ccol{max-width:720px;margin:0 auto}
.ccol .cstep{justify-content:center}
/* The two places a subject line is read: a list row, and the open message. */
.gtabs{display:flex;gap:22px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.gtabs .on{color:var(--accent);font-weight:600;position:relative}
.gtabs .on::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--accent)}
.glist{font-size:13px}
.glist .grow{display:grid;grid-template-columns:14px 20px 150px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line);color:var(--muted)}
.glist .grow:last-child{border-bottom:0}
.glist .grow.unread{background:var(--panel);color:var(--ink)}
.glist .grow.unread .gfrom,.glist .grow.unread .gline b{font-weight:700}
.glist .gchk{width:14px;height:14px;border:1.5px solid var(--line2);border-radius:3px}
.glist .gstar{color:var(--line2)}
.glist .gfrom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glist .gline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glist .gline b{color:var(--ink);font-weight:600}
.glist .gpre{color:var(--muted);font-weight:400}
.glist .gtime{font-size:11.5px;white-space:nowrap}
.gopen{padding:0 16px 0}
.gopentop{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:12.5px}
.gopentop .gtools{letter-spacing:6px;color:var(--muted)}
.gopen .gsubject{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
.gopen .gsender{display:flex;align-items:flex-start;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.gopen .gavatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.gopen .gsenderinfo{flex:1;min-width:0}
.gopen .gunsub{margin-left:auto;font-size:11.5px;color:var(--accent);border:1px solid var(--line2);border-radius:20px;
  padding:2px 9px;white-space:nowrap}
.gopen .gcaret{font-size:9px}
.gopen .gopentime{white-space:nowrap}
.gopen .gbody{max-height:420px;overflow:auto;margin:0 -16px}
.gopen .gbody table{max-width:100%}
.eout{outline:none}
.eempty{padding:10px 4px}

/* --- assistant (Ask Auralata) --------------------------------------------
   The button lives in the app bar between the store switcher and the bell.
   The drawer is fixed rather than anchored to the button: it stays open while
   you move around the app, and an anchored popover would be clipped by the
   scrolling main column. */
.iconbtn.ai svg{width:19px;height:19px}
.iconbtn.ai.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft,var(--panel2))}
.iconbtn.sm{width:30px;height:30px;flex:0 0 30px;border:0;background:transparent}
.iconbtn.sm svg{width:16px;height:16px}

.aipanel[hidden]{display:none}   /* display:flex below beats the browser's own [hidden] rule */
.aipanel{position:fixed;top:58px;right:16px;bottom:16px;width:380px;max-width:calc(100vw - 32px);
  z-index:60;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line2);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.30);animation:aidrop .16s ease-out}
@keyframes aidrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.aipanel .aihd{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
.aipanel .aiwho{display:flex;flex-direction:column;line-height:1.25;margin-right:auto;min-width:0}
.aipanel .aiwho b{font-size:13px}
.aipanel .aiwho .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.aifeed{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.aiempty{margin:auto 0}
.aiempty p{margin:0 0 10px}
.aitips{display:flex;flex-direction:column;gap:6px}
.aitip{text-align:left;font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer;
  border:1px solid var(--line2);background:var(--panel);border-radius:8px;padding:7px 10px}
.aitip:hover{border-color:var(--accent);color:var(--accent)}

.aimsg{max-width:86%;padding:8px 11px;border-radius:10px;font-size:13px;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word}
.aimsg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px}
.aimsg.assistant{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);
  border-bottom-left-radius:3px}
.aimsg.pending{color:var(--ink2);font-style:italic}
.aimsg.bad{align-self:flex-start;background:var(--bad-soft);border:1px solid var(--bad);color:var(--bad)}

.aipanel .aisetup{margin:0 14px 10px;border-radius:8px}
.aipanel .aisetup code{font-size:11.5px}

.aiform{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--line);
  background:var(--panel2)}
.aiform textarea{flex:1;resize:none;min-height:38px;max-height:140px;font:inherit;font-size:13px;
  color:var(--ink);background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:9px 10px}
.aiform textarea:focus{outline:none;border-color:var(--accent)}

@media (max-width:720px){
  .aipanel{top:auto;left:8px;right:8px;bottom:8px;width:auto;height:70vh}
}

/* --- emoji helper inside a field ------------------------------------------- */
.withemoji{position:relative;display:block}
.withemoji input{width:100%;padding-right:34px}
.emojibtn{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:none;
  font-size:15px;line-height:1;padding:3px 5px;border-radius:4px;color:var(--muted);cursor:pointer}
.emojibtn:hover,.emojibtn.on{background:var(--panel2);color:var(--ink)}
.emojipop{position:fixed;z-index:60;width:272px;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--radius);box-shadow:var(--shadow-3);padding:8px}
.emojipop .egroup{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 2px 3px}
.emojipop .egrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.emojipop .egrid button{border:0;background:none;font-size:16px;line-height:1;padding:5px 0;border-radius:4px;cursor:pointer}
.emojipop .egrid button:hover{background:var(--panel2)}
.emojipop .ehint{font-size:11px;color:var(--muted);padding:7px 2px 1px;border-top:1px solid var(--line);margin-top:7px}
.stepnav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 0 4px;border-top:1px solid var(--line);margin-top:4px}
.stepnav form{display:inline}

/* --- the helper beside a step ---------------------------------------------
   The form keeps the width it had: the helper is parked in the margin beside
   it rather than taking a share of it, and drops underneath when the window is
   too narrow to hold both. */
.ccolwrap{position:relative}
.helperrail{position:absolute;top:0;right:0;width:280px}
@media (max-width:1330px){
  .helperrail{position:static;width:auto;max-width:720px;margin:16px auto 0}
}
.helper{position:sticky;top:12px}
.helper.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.helper.warn .hd h3{color:var(--warn)}
.helper.ready .hd h3{color:var(--ok)}
.checklist.warn li{color:var(--warn)}
.checklist.warn li::marker{color:var(--warn)}
.helper.ready .checklist.warn li{color:var(--ink2)}

/* --- a placeholder is a hint, not content --------------------------------- */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.45}
input:focus::placeholder,textarea:focus::placeholder{opacity:.3}

/* --- who it goes to -------------------------------------------------------- */
.segpick{border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.segsearch{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--line)}
.segsearch input{flex:1;min-width:0}
.seglist{max-height:198px;overflow:auto;transition:max-height .15s ease}
.segpick.expanded .seglist{max-height:396px}
.segopt{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}
.segopt:last-of-type{border-bottom:0}
.segopt:hover{background:var(--panel2)}
.segopt input{margin:0}
.segopt .segname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.segopt .segcount{font-size:11.5px;color:var(--ink2);white-space:nowrap}
.segopt .segcount.none{color:var(--warn)}
.segopt .segof{color:var(--muted)}
.segopt:has(input:checked){background:var(--accent-soft)}
.segopt:has(input:checked) .segname{font-weight:600;color:var(--ink)}

/* --- who this is about to reach, above everything else --------------------- */
.reachline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);
  padding:8px 12px;margin-bottom:10px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel2)}
.reachline .rdot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 7px}
.aibtn{position:absolute;right:30px;top:50%;transform:translateY(-50%);border:0;background:none;
  font-size:14px;line-height:1;padding:3px 5px;border-radius:4px;color:var(--muted);cursor:pointer}
.aibtn:hover{background:var(--panel2);color:var(--accent)}
.row>.aibtn{position:static;transform:none;flex:0 0 auto;border:1px solid var(--line2);border-radius:var(--radius);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}
.aibtn.busy{color:var(--accent);animation:aipulse .9s ease-in-out infinite}
.aibtn:disabled{cursor:progress}
@keyframes aipulse{0%,100%{opacity:1}50%{opacity:.35}}
.withemoji input{padding-right:58px}
/* The same button where there is no emoji picker beside it. */
.withai{position:relative;display:block}
.withai input{width:100%;padding-right:32px}
.withai .aibtn{right:6px}

/* --- something you open when you want it ---------------------------------- */
.fold{padding:0}
.fold > summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::before{content:"›";color:var(--muted);font-size:16px;line-height:1;transition:transform .15s}
.fold[open] > summary::before{transform:rotate(90deg)}
.fold[open] > summary{border-bottom:1px solid var(--line)}
.fold > summary:hover{background:var(--panel2)}
.fold .foldtitle{font-weight:600;font-size:14px;color:var(--ink);flex:1}
.subjectline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.subjectline b{color:var(--ink);font-size:13.5px}
.subjectline .linkbtn{margin-left:auto}

/* What the assistant prepared: a segment waiting to be created, a way to the
   screen it is talking about. Nothing here has happened yet — the button is
   the moment it happens. */
.aicard{align-self:flex-start;max-width:86%;display:flex;flex-direction:column;gap:6px;
  padding:10px 12px;border:1px solid var(--line2);border-left:3px solid var(--accent);
  border-radius:10px;background:var(--panel2)}
.aicardhd{font-size:13px;font-weight:600}
.aicardft{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}

/* --- picking a picture ----------------------------------------------------- */
.medgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
  max-height:min(56vh,440px);overflow:auto}
.medcell{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line2);
  border-radius:var(--radius);background:var(--panel);cursor:pointer;text-align:left}
.medcell:hover{border-color:var(--accent);background:var(--panel2)}
.medshot{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--panel2)}
.medshot img{width:100%;height:100%;object-fit:cover;display:block}
.medname{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.medpreview{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.medpreview img{display:block;width:100%}
.filedrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:18px;border:2px dashed var(--line2);border-radius:var(--radius);background:var(--panel2);
  text-align:center;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.filedrop:hover{border-color:var(--accent)}
.filedrop.over{border-color:var(--accent);background:var(--accent-soft)}
.filedrop strong{font-size:13px}
.colcell{border:1px solid var(--line);border-radius:var(--radius);padding:10px;display:grid;gap:8px}

/* --- picking products ------------------------------------------------------ */
.prodpick{border:1px solid var(--line2);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.prodpick > input[type=search]{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0}
.prodlist{max-height:268px;overflow:auto}
.prodrow{display:grid;grid-template-columns:16px 34px minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:6px 9px;border-bottom:1px solid var(--line);cursor:pointer;font-size:12.5px}
.prodrow:last-child{border-bottom:0}
.prodrow:hover{background:var(--panel2)}
.prodrow:has(input:checked){background:var(--accent-soft)}
.prodrow input{margin:0}
.prodrow .prodshot{width:34px;height:34px;border-radius:4px;overflow:hidden;background:var(--panel2);display:block;aspect-ratio:auto;border:0}
.prodrow .prodshot img{width:100%;height:100%;object-fit:cover;display:block}
.prodname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prodrow .prodprice{font-size:11.5px;color:var(--muted);font-family:inherit;letter-spacing:0;display:inline}

/* Flows builder — a palette on the left, a trigger-first canvas on the right,
   drag and drop between them (see app/views/app/flows/_form.html.erb). */
.flowbuilder{display:flex;gap:20px;align-items:flex-start;margin-top:18px}
.flowpalette{width:190px;flex:0 0 190px;position:sticky;top:70px;transition:background-color .15s}
.flowpalette.dragover{background:var(--accent-soft);border-radius:var(--radius-lg);outline:2px dashed var(--accent);outline-offset:4px}
.fplabel{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin:14px 2px 6px}
.fplabel:first-child{margin-top:0}
.fpitem{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--line);
        border-radius:var(--radius);background:var(--panel);margin-bottom:6px;cursor:grab;font-size:13px;
        text-align:left;color:var(--ink)}
.fpitem:hover{border-color:var(--accent)}
.fpitem:active{cursor:grabbing}

.flowcanvas{flex:1;min-width:0;border-radius:var(--radius-lg);transition:outline-color .15s}
.flowcanvas.dragover{outline:2px dashed var(--accent);outline-offset:6px}

/* The trigger node, the step chain and the drop zone all sit in one narrow
   column — like the prototype, a flow reads top to bottom at a fixed width,
   not stretched to fill whatever room the canvas happens to have — with one
   connecting line drawn behind all three, showing through their gaps. */
.flowtimeline{max-width:480px;position:relative}
.flowtimeline::before{content:'';position:absolute;left:45px;top:14px;bottom:14px;width:2px;
                       background:var(--line2);z-index:0}

/* A compact, non-editable node standing in for the trigger at the top of the
   canvas — its actual fields live in .flowinspector, on the right. */
.flowtriggernode{display:flex;align-items:center;gap:10px;background:var(--accent-soft);
                  border:1px solid var(--accent);border-radius:var(--radius-lg);
                  padding:10px 14px;margin-bottom:18px;position:relative;z-index:1}

.flowinspector{width:280px;flex:0 0 280px;position:sticky;top:70px;background:var(--panel);
               border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px}
.flowinspector .fthd{margin-bottom:10px}
.flowinspector .field{margin-bottom:10px}
.flowinspector .field:last-of-type{margin-bottom:6px}

.flowline{position:relative;z-index:1}
.flowstep{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
          padding:10px 12px;margin-bottom:10px;position:relative;z-index:1}
.flowstep.dragging{opacity:.35}
.dragindicator{height:3px;background:var(--accent);border-radius:2px;margin:0 0 10px;
               box-shadow:0 0 0 3px var(--accent-soft);pointer-events:none}
.fshd{display:flex;align-items:center;gap:8px}
.fshandle{cursor:grab;color:var(--ink2);font-size:13px;line-height:1;padding:2px;letter-spacing:-2px}
.fshandle:active{cursor:grabbing}
.fstitle{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.35}
.fskind{font-size:13px}
.fssummary{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsctl{display:flex;gap:2px;flex:0 0 auto}
.fsbody{margin-top:10px}
.fsbody:empty{display:none}

.ficon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 26px}
.ficon .nico{width:14px;height:14px}
.ficon.neutral{background:var(--panel2);color:var(--ink2)}
.ficon.warn{background:var(--warn-soft);color:var(--warn)}
.ficon.info{background:var(--info-soft);color:var(--info)}
.ficon.accent{background:var(--accent-soft);color:var(--accent-600)}
.ficon.ok{background:var(--ok-soft);color:var(--ok)}
.ficon.bad{background:var(--bad-soft);color:var(--bad)}

.flowend{border:1.5px dashed var(--line);border-radius:var(--radius-lg);padding:16px;text-align:center;
         background:var(--panel);position:relative;z-index:1}

/* A condition's two branches, nested inside its own step card. */
.fsbranches{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.fsbranch{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-lg);
          padding:10px;transition:outline-color .15s}
.fsbranch.dragover{outline:2px dashed var(--accent);outline-offset:3px}
.fsbranchhd{margin-bottom:8px}
.fsbranchsteps .flowstep{margin-bottom:8px}
.fsbranchend{border:1.5px dashed var(--line);border-radius:var(--radius);padding:10px;text-align:center;
             margin-bottom:8px}
.fsbranchadd{display:flex;flex-wrap:wrap;gap:4px}

@media (max-width:820px){
  .flowbuilder{flex-direction:column}
  .flowpalette{width:100%;flex:1 1 auto;position:static;display:flex;flex-wrap:wrap;gap:6px}
  .fplabel{width:100%;margin:8px 0 2px}
  .fpitem{width:auto;flex:1 1 auto;margin-bottom:0}
  .flowinspector{width:100%;flex:1 1 auto;position:static}
  .fsbranches{grid-template-columns:1fr}
}

/* content calendar: two labels on a card, a preview eye, the multi campaign card, drag targets, the right-click menu */
.item .labs{display:inline-flex;gap:4px;min-width:0;overflow:hidden}
/* The eye waits until the card is under the mouse, the same way the day's + does. */
.item .peek{border:0;background:none;color:var(--muted);padding:2px 4px;border-radius:3px;line-height:0;flex:0 0 auto;cursor:pointer;opacity:0;transition:opacity .12s}
.item:hover .peek,.item .peek:focus-visible{opacity:1}
.item .peek:hover{color:var(--accent);background:var(--panel)}
@media (prefers-reduced-motion: reduce){.item .peek{transition:none}}
.item.multi{border:1px solid var(--accent);border-left-width:3px;background:var(--accent-soft);padding:6px 7px}
.item.multi .nm{font-weight:600}
.lab.multi{background:var(--accent)}
.item .chans{display:flex;gap:3px}
.item .chans i{width:8px;height:8px;border-radius:50%;display:block}
.item.reminder{opacity:.55;border-left-style:dashed}
.day.dropover{border-color:var(--accent);background:var(--accent-soft)}
.ctxmenu{position:fixed;z-index:60;min-width:190px}
.ctxmenu form{margin:0}

/* dashboard: the lock, and what a card grows while the screen is unlocked */
.dash .wtools{display:none;align-items:center;gap:4px}
.dash.editing .wtools{display:inline-flex}
.dash.editing .widget{cursor:grab;outline:1px dashed var(--line2);outline-offset:2px}
.dash.editing .widget.dragging{opacity:.4}
.dash.editing [data-zone].dropover{outline:2px dashed var(--accent);outline-offset:4px;border-radius:var(--radius)}
.dash .whandle,.dash .wremove{border:0;background:none;color:var(--muted);padding:2px 5px;border-radius:4px;line-height:1;cursor:grab}
.dash .wremove{cursor:pointer}
.dash .whandle:hover,.dash .wremove:hover{background:var(--panel2);color:var(--ink)}
.dash .wremove:hover{color:var(--bad)}
.lockbtn.on{color:var(--accent);border-color:var(--accent)}