/* Dreamz Studio design system (client app /app/ and the control room share this language).
   Quiet cool neutrals, ink for action, Karantina for page titles and big numbers, IBM Plex Sans Hebrew for everything else,
   and the TV colour bars as the video stage system. Magenta (--you) only ever means "this needs you". */
:root{
  --bg:#F3F4F6;--surface:#FFFFFF;--surface-2:#F8F9FA;--line:#E2E4E8;--line-2:#CDD1D7;
  --ink:#15171A;--ink-2:#4B5058;--ink-3:#7D838C;--on-ink:#FFFFFF;
  --you:#C2307A;--you-soft:#FBE9F2;--ok:#2E8049;--ok-soft:#E5F3EA;--warn:#9A6A00;--warn-soft:#FFF4D6;--bad:#B3392E;--bad-soft:#FBEAE8;
  --st-brief:#3D6FD9;--st-plan:#8D939B;--st-approved:#C9A800;--st-voice:#C2307A;--st-making:#1C9AA8;--st-post:#2F8F9D;--st-check:#6A4FC4;--st-ready:#2E8049;--st-done:#1F5E36;
  --display:"Karantina",sans-serif;--ui:"IBM Plex Sans Hebrew",system-ui,-apple-system,sans-serif;
  --r:6px;--r-lg:10px;--sh:0 1px 2px rgba(21,23,26,.06),0 4px 16px rgba(21,23,26,.06);
  --side:244px;--top:60px;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{background:var(--surface);border-inline-end:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:16px 12px;gap:4px;z-index:30}
.wsw{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);border:0;background:none;text-align:start;width:100%}
.wsw:hover{background:var(--surface-2)}
.wsw .av{width:34px;height:34px;border-radius:8px;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--display);flex:none}
.wsw b{display:block;font-weight:600;font-size:14px;line-height:1.25}
.wsw small{color:var(--ink-3);font-size:12px}
.nav{display:flex;flex-direction:column;gap:1px;margin-top:14px}
.nav .grp{font-size:11px;color:var(--ink-3);padding:14px 10px 4px;font-weight:600}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);text-decoration:none;color:var(--ink-2);font-size:14px}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--on-ink);font-weight:500}
.nav a svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav .ct{margin-inline-start:auto;font-size:11px;font-weight:700;background:var(--you);color:#fff;border-radius:99px;padding:1px 7px;min-width:20px;text-align:center}
.nav a.on .ct{background:#fff;color:var(--ink)}
.side .foot{margin-top:auto;font-size:12px;color:var(--ink-3);padding:8px 10px;display:flex;justify-content:space-between;align-items:center}
.main{min-width:0;display:flex;flex-direction:column}
.top{height:var(--top);display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(243,244,246,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.search{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 10px;height:36px;color:var(--ink-3)}
.search input{border:0;background:none;outline:none;flex:1;color:var(--ink);height:34px}
.search svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
svg:not([width]){max-width:24px;max-height:24px}
.vlist .row{grid-template-columns:44px minmax(0,1fr) auto}
.search kbd{font:500 11px/1 var(--ui);border:1px solid var(--line);border-radius:4px;padding:3px 5px;color:var(--ink-3)}
.top .sp{flex:1}
.iconbtn{width:36px;height:36px;border-radius:var(--r);border:1px solid transparent;background:none;display:inline-flex;align-items:center;justify-content:center;position:relative;color:var(--ink-2)}
.iconbtn:hover{background:var(--surface);border-color:var(--line)}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.iconbtn .dot{position:absolute;top:6px;inset-inline-end:7px;width:8px;height:8px;border-radius:50%;background:var(--you);border:2px solid var(--bg)}
.me{display:flex;align-items:center;gap:8px;border:0;background:none;padding:4px 6px;border-radius:var(--r)}
.me:hover{background:var(--surface)}
.me .av{width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.page{padding:28px 28px 80px;max-width:1360px;width:100%}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ph h1{font:700 clamp(46px,5vw,64px)/.9 var(--display);margin:0;letter-spacing:.005em}
.ph p{margin:8px 0 0;color:var(--ink-2);max-width:68ch}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);font-weight:500;font-size:14px;text-decoration:none;white-space:nowrap}
.btn:hover{background:#000}
.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn.sec:hover{border-color:var(--ink)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface);color:var(--ink)}
.btn.you{background:var(--you);border-color:var(--you)}
.btn.danger{background:var(--surface);color:var(--bad);border-color:var(--bad)}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn.lg{height:44px;padding:0 20px;font-size:15px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:disabled{opacity:.5;cursor:default}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500}
.field small{font-weight:400;color:var(--ink-3)}
.in,select.in,textarea.in{height:38px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);padding:0 11px;color:var(--ink);font-size:14px;width:100%}
textarea.in{height:auto;min-height:96px;padding:10px 11px;resize:vertical;line-height:1.5}
.in:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-form .full{grid-column:1/-1}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);padding:2px;gap:2px}
.seg button{border:0;background:none;height:30px;padding:0 12px;border-radius:4px;font-size:13px;color:var(--ink-2)}
.seg button.on{background:var(--ink);color:var(--on-ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;color:var(--ink-2)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.chip input{display:none}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.card .hd h2{font:600 15px/1.2 var(--ui);margin:0}
.card .hd a,.card .hd button.link{font-size:13px;color:var(--ink-3);background:none;border:0;text-decoration:none}
.card .hd a:hover,.card .hd button.link:hover{color:var(--ink);text-decoration:underline}
.card .bd{padding:16px 18px}
.card .bd.flush{padding:0;overflow-x:auto}
.cols{display:grid;gap:16px}
.cols.c2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);text-align:start;width:100%}
.kpi span{font-size:13px;color:var(--ink-2)}
.kpi b{font:700 54px/.95 var(--display);margin-top:6px}
.kpi small{font-size:12px;color:var(--ink-3)}
.kpi.you{border-color:var(--you);background:var(--you-soft)}
.kpi.you b{color:var(--you)}
button.kpi:hover,a.kpi:hover{border-color:var(--ink-3)}
.empty{padding:34px 18px;text-align:center;color:var(--ink-3)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* ---------- stage ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.st i{width:9px;height:9px;border-radius:2px;background:var(--c,var(--st-plan));flex:none}
.st.pill{background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:3px 9px}
.st.you{color:var(--you)}
.bars{display:flex;height:64px;gap:3px;border-radius:var(--r);overflow:hidden}
.bars a{display:flex;flex-direction:column;justify-content:space-between;padding:7px 10px;color:#fff;text-decoration:none;min-width:64px}
.bars a b{font:700 30px/1 var(--display)}
.bars a span{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars a.zero{opacity:.32}
.bars a.lt{color:var(--ink)}
.stepper{display:flex;gap:0;margin:4px 0 0;overflow-x:auto}
.stepper div{flex:1;min-width:92px;padding:8px 10px 0;border-top:3px solid var(--line);font-size:12px;color:var(--ink-3)}
.stepper div.done{border-color:var(--ink-2);color:var(--ink-2)}
.stepper div.on{border-color:var(--c,var(--ink));color:var(--ink);font-weight:600}

/* ---------- lists & tables ---------- */
.rows .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);text-decoration:none}
.rows .row:first-child{border-top:0}
.rows .row:hover{background:var(--surface-2)}
.rows .row b{display:block;font-weight:600;font-size:14px}
.rows .row small{color:var(--ink-3);font-size:12.5px}
.th{width:40px;aspect-ratio:9/16;border-radius:4px;background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line);flex:none}
.th.w{width:64px;aspect-ratio:16/9}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{font-size:12px;font-weight:600;color:var(--ink-3);text-align:start;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:var(--top);z-index:2;white-space:nowrap}
.tbl th button{border:0;background:none;padding:0;font-weight:600;color:inherit}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
.tbl tr:hover td{background:var(--surface-2)}
.tbl td a.t{font-weight:600;text-decoration:none}
.tbl td a.t:hover{text-decoration:underline}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .sp{flex:1}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.kcol{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column;min-height:240px}
.kcol .kh{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.kcol .kb{padding:10px;display:flex;flex-direction:column;gap:8px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px;display:grid;grid-template-columns:44px 1fr;gap:10px;text-decoration:none;align-items:start}
.kcard:hover{border-color:var(--ink-3)}
.kcard b{font-size:13px;font-weight:600;line-height:1.3;display:block}
.kcard small{font-size:12px;color:var(--ink-3)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line);gap:1px}
.cal .dh{background:var(--surface-2);font-size:12px;color:var(--ink-3);padding:8px;font-weight:600}
.cal .day{background:var(--surface);min-height:108px;padding:6px;display:flex;flex-direction:column;gap:4px}
.cal .day.out{background:var(--surface-2)}
.cal .day .d{font-size:12px;color:var(--ink-3)}
.cal .day.today .d{color:#fff;background:var(--ink);border-radius:99px;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.cal .ev{font-size:12px;padding:3px 6px;border-radius:4px;background:var(--surface-2);border-inline-start:3px solid var(--c,var(--st-plan));text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.vt{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.vt .im{aspect-ratio:9/16;border-radius:8px;background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line);position:relative;overflow:hidden}
.vt .im .st{position:absolute;bottom:8px;inset-inline-start:8px;background:rgba(255,255,255,.95);padding:3px 8px;border-radius:99px}
.vt b{font-size:14px;font-weight:600;line-height:1.3}
.vt small{color:var(--ink-3);font-size:12px}

/* ---------- video page ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 20px;overflow-x:auto}
.tabs a{padding:10px 14px;text-decoration:none;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;font-size:14px;white-space:nowrap}
.tabs a.on{color:var(--ink);border-color:var(--ink);font-weight:600}
.tabs a .ct{font-size:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:0 6px;margin-inline-start:4px}
.next{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:16px 18px;border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink)}
.next.you{background:var(--you)}
.next p{margin:0;flex:1;min-width:240px}
.next b{display:block;font-size:16px}
.next .btn{background:#fff;color:var(--ink);border-color:#fff}
.sb{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.sbc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.sbc .im{background:var(--surface-2) center/cover no-repeat;border-bottom:1px solid var(--line)}
.sbc .tx{padding:10px 12px;display:flex;flex-direction:column;gap:5px;font-size:13px}
.sbc .tx .n{display:flex;justify-content:space-between;color:var(--ink-3);font-size:12px}
.sbc .tx q{color:var(--ink);font-style:normal;font-weight:500}
.sbc .tx q::before,.sbc .tx q::after{content:""}
.tl{display:flex;gap:3px;height:74px;border-radius:var(--r);overflow:hidden;background:var(--line)}
.tl a{background:var(--surface-2) center/cover no-repeat;position:relative;text-decoration:none;min-width:24px}
.tl a span{position:absolute;bottom:4px;inset-inline-start:4px;font-size:11px;font-weight:600;background:rgba(255,255,255,.92);padding:1px 5px;border-radius:3px}
.ruler{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:4px}
.player{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.player .vid{background:#0E0F11;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.player video{width:100%;max-height:68vh;display:block;background:#000}
.scrub{position:relative;height:28px;margin:0 12px 10px;cursor:pointer}
.scrub .tr{position:absolute;top:12px;left:0;right:0;height:4px;background:#2E3036;border-radius:2px}
.scrub .pl{position:absolute;top:12px;left:0;height:4px;background:#fff;border-radius:2px}
.scrub .mk{position:absolute;top:6px;width:4px;height:16px;border-radius:2px;background:var(--you);transform:translateX(-2px)}
.scrub .mk.res{background:#6F737B}
.vbar{display:flex;gap:10px;align-items:center;padding:8px 12px 12px;color:#C9CCD2;font-size:13px}
.thread{display:flex;flex-direction:column;max-height:68vh}
.thread .list{overflow:auto;flex:1}
.cm{padding:12px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.cm:first-child{border-top:0}
.cm .h{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ink-3)}
.cm .h b{color:var(--ink);font-size:13px}
.cm .tc{font:600 12px/1 var(--ui);background:var(--you-soft);color:var(--you);border:0;border-radius:4px;padding:3px 6px}
.cm.res{opacity:.55}
.cm p{margin:0;font-size:14px}
.compose{border-top:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:8px}

/* ---------- misc ---------- */
.avs{display:flex}
.avs span{width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;margin-inline-start:-6px}
.avs span:first-child{margin-inline-start:0}
.meter{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--ink)}
.swatch{width:34px;height:34px;border-radius:6px;border:1px solid var(--line);display:inline-block}
.toast{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:14px;z-index:100;box-shadow:var(--sh)}
[dir=ltr] .toast{transform:translateX(-50%)}
.modal{position:fixed;inset:0;background:rgba(21,23,26,.42);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px;z-index:90}
.modal .box{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:560px;box-shadow:var(--sh);max-height:84vh;overflow:auto}
.modal .box .hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal .box .hd h2{margin:0;font-size:17px}
.modal .box .bd{padding:18px 20px}
.modal .box .ft{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);min-width:240px;padding:6px;z-index:50}
.menu a,.menu button{display:flex;width:100%;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r);text-decoration:none;border:0;background:none;text-align:start;font-size:14px}
.menu a:hover,.menu button:hover{background:var(--surface-2)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.cmdk .res a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:var(--r);text-decoration:none}
.cmdk .res a.on,.cmdk .res a:hover{background:var(--surface-2)}
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login .art{background:var(--ink);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.login .art h2{font:700 clamp(64px,8vw,112px)/.86 var(--display);margin:0}
.login .art p{color:#AEB3BB;max-width:40ch}
.login .form{display:flex;align-items:center;justify-content:center;padding:32px}
.login form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.login h1{font:700 52px/.9 var(--display);margin:0}
.code{letter-spacing:.5em;text-align:center;font-size:22px!important;height:52px!important}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite linear;border-radius:var(--r)}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- responsive ---------- */
@media (max-width:1100px){.cols.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.cols.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.player{grid-template-columns:1fr}}
@media (max-width:900px){.cols.c2{grid-template-columns:1fr}}
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:280px;transform:translateX(100%);transition:transform .2s;box-shadow:var(--sh)}
  [dir=ltr] .side{transform:translateX(-100%)}
  .side.open{transform:none!important}
  .top{padding:0 12px}.top .burger{display:inline-flex!important}
  .search kbd{display:none}
  .page{padding:20px 14px 80px}
  .grid-form{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}.login .art{display:none}
  .tbl .hide-m{display:none}
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl.stack td{border:0;padding:0}
}
@media (max-width:560px){.cols.c4,.cols.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi b{font-size:42px}.top .search{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- camera tiles (the original shot board's language: one neutral person in a studio; moves animate on hover/pick) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.tile{border:1.5px solid var(--line);border-radius:8px;background:var(--surface);padding:0;overflow:hidden;text-align:start;display:flex;flex-direction:column;cursor:pointer}
.tile:hover{border-color:var(--ink-3)}
.tile[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.tile:disabled{cursor:default}
.tile .ph{aspect-ratio:3/2;overflow:hidden;background:var(--surface-2);display:block}
.tile .ph img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 42%}
.tile .tx{padding:6px 8px 7px;display:flex;flex-direction:column;gap:1px}
.tile b{font-size:12.5px;font-weight:600;line-height:1.25}
.tile small{font-size:11px;color:var(--ink-3);line-height:1.3}
.tile[aria-pressed="true"] b{color:var(--ink)}
.tile .dg{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;gap:3px;background:var(--surface-2);padding:10px}
.tile .dg i{display:block;height:58%;border-radius:2px;background:var(--line-2)}
.tile .dg i.b{background:var(--ink-3)}
.tile[aria-pressed="true"] .dg i.b{background:var(--ink)}
.campv{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:14px;align-items:center;background:var(--surface-2);border-radius:8px;padding:10px;margin-bottom:12px}
.campv .ph{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:6px;background:var(--surface)}
.campv .ph img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 42%}
@media (max-width:620px){.campv{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  .tile:hover .ph img,.tile[aria-pressed="true"] .ph img,.campv .ph img{animation-duration:2.6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate}
  .tile:hover .m-still,.tile[aria-pressed="true"] .m-still,.campv .m-still{animation-name:m-still}
  .tile:hover .m-in,.tile[aria-pressed="true"] .m-in,.campv .m-in{animation-name:m-in}
  .tile:hover .m-out,.tile[aria-pressed="true"] .m-out,.campv .m-out{animation-name:m-in;animation-direction:alternate-reverse}
  .tile:hover .m-follow,.tile[aria-pressed="true"] .m-follow,.campv .m-follow{animation-name:m-follow;animation-timing-function:linear}
  .tile:hover .m-orbit,.tile[aria-pressed="true"] .m-orbit,.campv .m-orbit{animation-name:m-orbit}
  .tile:hover .m-pan,.tile[aria-pressed="true"] .m-pan,.campv .m-pan{animation-name:m-pan}
  .tile:hover .m-up,.tile[aria-pressed="true"] .m-up,.campv .m-up{animation-name:m-up}
  .tile:hover .m-down,.tile[aria-pressed="true"] .m-down,.campv .m-down{animation-name:m-up;animation-direction:alternate-reverse}
  .tile:hover .m-dolly,.tile[aria-pressed="true"] .m-dolly,.campv .m-dolly{animation-name:m-dolly;animation-timing-function:linear}
  .tile:hover .m-hand,.tile[aria-pressed="true"] .m-hand,.campv .m-hand{animation-name:m-hand;animation-duration:1.1s;animation-timing-function:steps(7)}
  .tile:hover .m-snap,.tile[aria-pressed="true"] .m-snap,.campv .m-snap{animation-name:m-snap;animation-direction:normal;animation-timing-function:cubic-bezier(.7,0,.2,1)}
}
@keyframes m-still{from{transform:scale(1.02)}to{transform:scale(1.04)}}
@keyframes m-in{from{transform:scale(1)}to{transform:scale(2.3)}}
@keyframes m-follow{from{transform:scale(1.9) translateX(9%)}to{transform:scale(1.9) translateX(-9%)}}
@keyframes m-orbit{from{transform:scale(1.7) translateX(12%) rotate(-2deg)}to{transform:scale(1.7) translateX(-12%) rotate(2deg)}}
@keyframes m-pan{from{transform:scale(1.6) translateX(18%)}to{transform:scale(1.6) translateX(-18%)}}
@keyframes m-up{from{transform:scale(1.7) translateY(-14%)}to{transform:scale(1.7) translateY(16%)}}
@keyframes m-dolly{from{transform:scale(1.5) translateX(-14%)}to{transform:scale(1.5) translateX(14%)}}
@keyframes m-hand{0%{transform:scale(1.5) translate(0,0) rotate(0)}25%{transform:scale(1.5) translate(1.2%,-.8%) rotate(.6deg)}50%{transform:scale(1.5) translate(-.8%,1%) rotate(-.5deg)}75%{transform:scale(1.5) translate(.9%,.7%)}100%{transform:scale(1.5) translate(-1%,-.6%) rotate(.4deg)}}
@keyframes m-snap{0%,30%{transform:scale(1)}42%,85%{transform:scale(2.6)}100%{transform:scale(1)}}
.bsec{scroll-margin-top:calc(var(--top) + 70px)}
.bnav{display:flex;gap:4px;flex-wrap:wrap;position:sticky;top:var(--top);z-index:5;background:var(--bg);padding:10px 0;margin-bottom:6px;border-bottom:1px solid var(--line)}
.bnav a{padding:7px 12px;border-radius:99px;text-decoration:none;font-size:13.5px;color:var(--ink-2);border:1px solid var(--line);background:var(--surface)}
.bnav a.done{border-color:var(--ok);color:var(--ok)}
.sendbar{position:sticky;bottom:0;z-index:6;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--ink);color:#fff;padding:14px 18px;border-radius:10px 10px 0 0;margin-top:24px}
.sendbar p{margin:0;flex:1;min-width:220px;font-size:14px}
.sendbar .btn{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- brief wizard ---------- */
.wz{list-style:none;margin:0 0 18px;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.wz li{flex:1;min-width:112px}
.wz button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:0;background:none;padding:10px 4px 0;border-top:3px solid var(--line);text-align:start;color:var(--ink-3);font-size:13px}
.wz button .num{font-size:12px;font-weight:600}
.wz button.done{border-color:var(--ink-2);color:var(--ink-2)}
.wz button.on{border-color:var(--accent);color:var(--ink);font-weight:600}
.wzgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.wzmain .bd{padding:24px 26px;min-height:340px}
.wzprev{position:sticky;top:calc(var(--top) + 16px)}
.wznav{display:flex;gap:12px;align-items:center;padding:16px 22px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface);border-radius:0 0 var(--r-lg) var(--r-lg)}
.lead2{margin:0 0 18px;color:var(--ink-2);font-size:15px;max-width:62ch}
.subdots{display:flex;gap:4px;margin:-6px 0 18px;overflow-x:auto}
.subdots button{flex:1;min-width:84px;border:0;background:none;padding:0;display:flex;flex-direction:column;gap:6px;text-align:start;font-size:12px;color:var(--ink-3)}
.subdots i{display:block;height:4px;border-radius:2px;background:var(--line)}
.subdots .done i{background:var(--ink-3)}.subdots .on i{background:var(--accent)}.subdots .on{color:var(--ink);font-weight:600}
.shotmini{display:flex;gap:12px;align-items:center;padding:10px;border-radius:var(--r);background:var(--surface-2);margin-bottom:18px}
.shotmini .im{width:46px;border-radius:6px;background:var(--line) center/cover no-repeat;flex:none}
.shotmini b{display:block;font-size:14px}.shotmini small{color:var(--ink-3);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rv{padding:16px 0;border-top:1px solid var(--line)}.rv:first-of-type{border-top:0}
.rvh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.kv2{display:grid;grid-template-columns:110px 1fr;gap:6px 14px;margin:0;font-size:14px}.kv2 dt{color:var(--ink-3)}.kv2 dd{margin:0}
.dropz{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:44px 16px;cursor:pointer;text-align:center;color:var(--ink-3)}
.dropz b{color:var(--ink);font-size:16px}.dropz.on,.dropz:hover{border-color:var(--accent);background:var(--surface-2)}
@media (max-width:1000px){.wzgrid{grid-template-columns:1fr}.wzprev{position:static;order:2}}
@media (max-width:820px){.wzmain .bd{padding:18px 16px}.wz li{min-width:90px}.wz .nm{font-size:12px}}

/* =====================================================================================================
   10/14 founder: "clean and Apple-like". Apple's own system face (SF on Apple devices, Heebo elsewhere), soft gray ground,
   white rounded surfaces, generous space, pill buttons, one calm blue for actions. Stage colours stay, softer.
   ===================================================================================================== */
:root{
  --bg:#F5F5F7;--surface:#FFFFFF;--surface-2:#F5F5F7;--line:#E5E5EA;--line-2:#D2D2D7;
  --ink:#1D1D1F;--ink-2:#515154;--ink-3:#86868B;--on-ink:#FFFFFF;--accent:#0071E3;--accent-2:#0077ED;
  --you:#E3006D;--you-soft:#FDECF4;--ok:#248A3D;--ok-soft:#E8F5EC;--warn:#B25000;--warn-soft:#FFF3E5;--bad:#D70015;--bad-soft:#FDE8EA;
  --st-brief:#0071E3;--st-plan:#AEAEB2;--st-approved:#FF9F0A;--st-voice:#E3006D;--st-making:#32ADE6;--st-post:#30B0C7;--st-check:#5E5CE6;--st-ready:#34C759;--st-done:#248A3D;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Hebrew","Segoe UI","Heebo",Roboto,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Hebrew","Segoe UI","Heebo",Roboto,Arial,sans-serif;
  --r:10px;--r-lg:18px;--sh:0 2px 10px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06)}
html,body{font:400 15px/1.5 var(--ui);letter-spacing:-.005em}
:focus-visible{outline:3px solid rgba(0,113,227,.45);outline-offset:2px;border-radius:6px}
.side{background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);border-inline-end:1px solid var(--line)}
.wsw .av{border-radius:10px;font:600 16px/1 var(--ui);background:var(--ink)}
.nav a{border-radius:9px;color:var(--ink-2);font-weight:500}
.nav a.on{background:var(--surface-2);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.nav a.on .ct{background:var(--you);color:#fff}
.nav .grp{text-transform:none;letter-spacing:0;font-weight:500}
.top{background:rgba(245,245,247,.8);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.search{border-radius:10px;border-color:transparent;background:rgba(0,0,0,.05)}
.page{padding:36px 36px 96px}
.ph{margin-bottom:28px}
.ph h1{font:700 clamp(32px,3.6vw,44px)/1.1 var(--display);letter-spacing:-.025em}
.ph p{font-size:16px;color:var(--ink-2)}
.btn{border-radius:980px;height:38px;padding:0 18px;font-weight:500;background:var(--accent);border-color:var(--accent);color:#fff;letter-spacing:-.01em}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.sec{background:var(--surface);color:var(--accent);border-color:var(--line-2)}
.btn.sec:hover{background:var(--surface-2);border-color:var(--line-2)}
.btn.ghost{background:none;border-color:transparent;color:var(--accent)}
.btn.ghost:hover{background:rgba(0,113,227,.06)}
.btn.you{background:var(--you);border-color:var(--you)}
.btn.danger{color:var(--bad);border-color:var(--line-2)}
.btn.sm{height:30px;padding:0 13px}
.btn.lg{height:46px;padding:0 24px;font-size:16px}
.in,select.in,textarea.in{border-radius:10px;border-color:var(--line-2);height:42px;font-size:15px}
textarea.in{padding:12px 13px}
.in:focus{outline:3px solid rgba(0,113,227,.3);outline-offset:0;border-color:var(--accent)}
.field{font-weight:500;font-size:13.5px}
.chip{border-radius:980px;height:32px;padding:0 13px;border-color:var(--line-2)}
.chip.on{background:var(--ink);border-color:var(--ink)}
.seg{border-radius:10px;background:rgba(0,0,0,.05);border-color:transparent;padding:3px}
.seg button{border-radius:8px}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.card{border:0;border-radius:var(--r-lg);box-shadow:var(--sh)}
.card .hd{padding:18px 22px;border-bottom-color:var(--line)}
.card .hd h2{font:600 17px/1.25 var(--ui);letter-spacing:-.01em}
.card .hd a,.card .hd button.link{color:var(--accent)}
.card .bd{padding:20px 22px}
.cols{gap:20px}
.kpi{border:0;border-radius:var(--r-lg);box-shadow:var(--sh);padding:20px 22px}
.kpi b{font:600 44px/1 var(--display);letter-spacing:-.03em;margin-top:8px}
.kpi.you{background:var(--surface);box-shadow:var(--sh),inset 0 0 0 2px var(--you)}
.st.pill{border-radius:980px;background:var(--surface-2);border-color:transparent}
.st i{border-radius:50%}
.bars{height:56px;border-radius:12px;gap:2px}
.bars a b{font:600 22px/1 var(--display);letter-spacing:-.02em}
.stepper div{border-top-width:4px;border-radius:2px}
.rows .row{padding:14px 22px}
.th{border-radius:6px;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tblwrap{border:0;border-radius:var(--r-lg);box-shadow:var(--sh)}
.tbl th{background:var(--surface);font-weight:500;text-transform:none;border-bottom-color:var(--line)}
.kcol{border:0;border-radius:var(--r-lg);background:rgba(0,0,0,.035)}
.kcard{border:0;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cal{border:0;border-radius:var(--r-lg);box-shadow:var(--sh)}
.cal .ev{border-radius:6px}
.vt .im{border:0;border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.vt .im .st{border-radius:980px}
.tabs{border-bottom-color:var(--line);gap:6px}
.tabs a{border-bottom-width:2px;font-weight:500;color:var(--ink-3)}
.tabs a.on{color:var(--ink);border-color:var(--ink)}
.next{border-radius:var(--r-lg);background:var(--ink)}
.next .btn{background:#fff;color:var(--ink);border-color:#fff}
.sbc{border:0;border-radius:14px;box-shadow:var(--sh)}
.player .vid{border-radius:var(--r-lg)}
.tile{border:0;border-radius:14px;box-shadow:0 0 0 1px var(--line);background:var(--surface)}
.tile:hover{box-shadow:0 0 0 1px var(--line-2),0 6px 18px rgba(0,0,0,.06)}
.tile[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--accent)}
.tile b{font-size:13px}
.campv{border-radius:14px;background:var(--surface-2)}
.campv .ph{border-radius:10px}
.modal .box{border-radius:20px}
.menu{border:0;border-radius:14px}
.toast{border-radius:980px;padding:11px 18px}
.login .art{background:linear-gradient(160deg,#1D1D1F,#000)}
.login .art h2,.login h1{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
.login .art h2{font-size:clamp(52px,6vw,84px);line-height:1}
.login h1{font-size:40px;line-height:1.1}
.wz button.on{border-color:var(--accent)}
.sendbar{border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--ink)}
@media (max-width:820px){.page{padding:22px 16px 90px}}

/* =====================================================================================================
   10/15 day-one fixes (phase 2): headers that never cover rows, phone menu over a backdrop, tabs that show they scroll,
   a brief wizard that fits a phone, thumbnails with a fixed frame, readable stage strip, 44px tap targets on phones.
   ===================================================================================================== */
/* 1. table headers: sticky inside a scrolling box hid the first row; headers now sit in the flow everywhere */
.tbl th{position:static;top:auto}
/* toasts that report a failure */
.toast.bad{background:var(--bad);color:#fff}
.toast{max-width:calc(100vw - 32px);text-align:center}
/* saving indicator (brand library, brief wizard) */
.saved{font-size:13px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.saved.bad{color:var(--bad);font-weight:500}
.saved.bad button{border:0;background:none;color:var(--accent);font:inherit;text-decoration:underline;padding:0;min-height:0}
/* field-level errors */
.in.err,.in[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(215,0,21,.12)}
.ferr{color:var(--bad);font-size:12.5px;font-weight:500}
/* 14. thumbnails: a fixed frame, cover; a clean placeholder comes from img() */
.vt .im{max-height:180px;background-position:center}
.grid-thumbs .vt .im[style*="aspect-ratio:3/4"]{max-height:240px;background-position:top center}
.sbc .im{max-height:200px;background-size:contain;background-color:var(--surface-2)}
.sb{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
/* stage strip: dark words on a soft tint of the stage colour, the colour itself as a bar on top (WCAG AA) */
.bars a{background:color-mix(in srgb,var(--c) 22%,#fff)!important;color:var(--ink)!important;border-top:4px solid var(--c)}
.bars a span{color:var(--ink-2)}
.bars a.zero{opacity:1;background:var(--surface-2)!important;border-top-color:var(--line-2);color:var(--ink-2)!important}
/* phone sign-in logo (the dark art panel is hidden on phones) */
.mlogo{display:none}
/* tabs that scroll sideways fade on the side that has more */
.tabs{scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
[dir=ltr] .tabs.fe{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
[dir=ltr] .tabs.fs{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
[dir=rtl] .tabs.fe{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
[dir=rtl] .tabs.fs{-webkit-mask-image:linear-gradient(to left,transparent,#000 40px);mask-image:linear-gradient(to left,transparent,#000 40px)}
.tabs.fs.fe{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
/* brief wizard: the title wraps, the phone step bar, the grid never wider than the screen */
.wztitle{display:block;width:100%;font:700 40px/1.12 var(--display);letter-spacing:-.025em;border:1px solid transparent;background:none;padding:2px 4px;border-radius:10px;resize:none;overflow:hidden;color:var(--ink);min-height:0;height:auto}
.wztitle:hover{border-color:var(--line)}
.wztitle:focus{outline:3px solid rgba(0,113,227,.3);border-color:var(--accent);background:var(--surface)}
.wzmain{min-width:0}
.wzm{display:none}
@media (max-width:1000px){.wzgrid{grid-template-columns:minmax(0,1fr)}}
.scrim{display:none}
@media (max-width:820px){
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.36);opacity:0;transition:opacity .2s;z-index:29}
  .scrim.on{opacity:1}
  .side{visibility:hidden;transition:transform .2s,visibility 0s linear .2s;z-index:31;width:min(300px,86vw);background:var(--surface);backdrop-filter:none;box-shadow:0 0 40px rgba(0,0,0,.18)}
  .side.open{visibility:visible;transition:transform .2s}
  body.menu-open{overflow:hidden}
  .mlogo{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
  .mlogo span{font:800 26px/1 var(--display);letter-spacing:.04em}
  .mlogo small{font-size:14px;color:var(--ink-3)}
  .login .form{align-items:flex-start;padding:24px 16px}
  .login form{gap:12px}
  .login form .seg{align-self:flex-start!important}
  /* 44px tap targets */
  .seg button{min-height:44px;min-width:44px}
  .iconbtn{width:44px;height:44px}
  .btn.sm{min-height:40px}
  .btn{min-height:44px}
  .card .hd a,.card .hd button.link,.crumb a{display:inline-flex;align-items:center;min-height:44px}
  .tabs a{min-height:44px;display:inline-flex;align-items:center}
  .nav a{min-height:44px}
  .login form > .btn.ghost{min-height:44px}
  .login form p a{display:inline-block;padding:12px 4px}
  /* wizard on a phone */
  .wz{display:none}
  .wzm{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
  .wzm .bar{display:flex;gap:4px}
  .wzm .bar button{flex:1;height:22px;border:0;background:none;padding:9px 0;cursor:pointer}
  .wzm .bar button i{display:block;height:4px;border-radius:2px;background:var(--line)}
  .wzm .bar button.done i{background:var(--ink-3)}.wzm .bar button.on i{background:var(--accent)}
  .wzm .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}
  .wzm .lbl b{font-weight:600}.wzm .lbl span{color:var(--ink-3);font-size:13px;white-space:nowrap}
  .wztitle{font-size:28px}
  .wznav{position:fixed;inset-inline:0;bottom:0;z-index:25;border-radius:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(16px);box-shadow:0 -1px 0 var(--line),0 -8px 24px rgba(0,0,0,.06)}
  .wznav #hint{display:none}
  .wznav .btn{flex:1}
  .page:has(.wznav){padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  .subdots button{min-width:0}
  .subdots span{display:none}
  .subdots button.on span{display:block;white-space:nowrap}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .sb{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .grid-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar .in{max-width:none!important;flex:1 1 150px}
  .cal .day{min-height:64px}
  .cal .ev{font-size:10.5px;padding:2px 4px}
  .kanban{grid-auto-columns:minmax(220px,78vw)}
}
@media (max-width:420px){.subdots button.on span{display:none}.cal .dh{padding:6px 2px;text-align:center}}

/* ---------- 10/15 phase 3 ---------- */
.wsw .av.lg{background:#fff;border:1px solid var(--line);overflow:hidden}.wsw .av.lg img{max-width:84%;max-height:70%;object-fit:contain}
.pf{display:inline-block;font-size:11px;font-weight:500;color:#0B5CAD;background:#E8F1FC;border-radius:99px;padding:1px 8px;margin-inline-start:6px;vertical-align:middle}
.tlv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tlv li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:start;position:relative;padding-bottom:16px}
.tlv li:last-child{padding-bottom:0}
.tlv li::before{content:"";position:absolute;inset-inline-start:10px;top:20px;bottom:0;width:2px;background:var(--line)}
.tlv li:last-child::before{display:none}
.tlv .dt{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;z-index:1}
.tlv li.done .dt{background:var(--ok);border-color:var(--ok)}
.tlv li.now .dt{border-color:#0071E3;box-shadow:0 0 0 4px rgba(0,113,227,.15)}
.tlv li.you .dt{border-color:var(--you)}
.tlv b{display:block;font-weight:600;font-size:14px}.tlv small{color:var(--ink-3);font-size:12.5px}
.tlv .when{font-size:12.5px;color:var(--ink-2);white-space:nowrap;text-align:end}
.tlv .when em{font-style:normal;color:var(--ink-3);display:block;font-size:11.5px}
.rounds{display:flex;gap:6px;align-items:center}.rounds i{width:28px;height:8px;border-radius:4px;background:var(--line)}.rounds i.u{background:var(--ink-2)}
.tour{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;padding:16px}
.tour .box{background:var(--surface);border-radius:22px;max-width:460px;width:100%;padding:26px 24px 20px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.tour .dots{display:flex;gap:6px;margin-bottom:16px}.tour .dots i{width:22px;height:4px;border-radius:2px;background:var(--line)}.tour .dots i.on{background:#0071E3}
.tour h2{font-size:24px;line-height:1.15;margin:0 0 8px;letter-spacing:-.02em}.tour p{color:var(--ink-2);margin:0 0 18px}
.tour .ic{width:52px;height:52px;border-radius:14px;background:#E8F1FC;color:#0071E3;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tour .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tour .ft{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pkgst{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:#F2F7FE}
.pkgst.open{background:#EAF7EF}.pkgst b{display:block;font-size:16px}.pkgst p{margin:2px 0 0;color:var(--ink-2);font-size:14px}
.amt2{display:flex;flex-direction:column}.amt2 small{font-size:12px;color:var(--ink-3);font-weight:400}

/* ---------- 10/15 phase 4 ---------- */
/* date field: dd/mm/yyyy text + calendar popover (all languages) */
.datef{display:flex;gap:6px;align-items:center}
.datef .in{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.datef .iconbtn{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.calpop{position:absolute;z-index:80;background:var(--surface);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:10px;border:1px solid var(--line)}
.calpop .ch{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.calpop .ch b{font-size:14px}
.calpop .ch .iconbtn{width:40px;height:40px;font-size:20px}
.calpop .cg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calpop .cg .wd{font-size:11px;color:var(--ink-3);text-align:center;padding:4px 0}
.calpop .cg button{height:38px;border:0;border-radius:8px;background:none;font:500 14px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.calpop .cg button:hover{background:var(--surface-2)}
.calpop .cg button.td{box-shadow:inset 0 0 0 1px var(--accent)}
.calpop .cg button.on{background:var(--accent);color:#fff}
.calpop .cf{display:flex;justify-content:space-between;margin-top:6px}
/* a studio scheduled for deletion */
.delbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 20px;background:var(--bad-soft);color:var(--bad);font-size:14px;font-weight:500}
.delbar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.delbar span{flex:1;min-width:200px}
/* team: the role table fits a phone (no hidden "Viewer" column) */
@media (max-width:560px){
  .tbl.roles{table-layout:fixed}
  .tbl.roles th,.tbl.roles td{padding:9px 3px;font-size:12px;text-align:center}
  .tbl.roles th{white-space:normal;font-size:11px;line-height:1.2;position:static}
  .tbl.roles th:first-child,.tbl.roles td:first-child{width:36%;text-align:start;padding-inline-start:12px;font-size:12.5px}
}
/* review: threads, replies, shot pins, versions, synced compare, guest badge */
.cm .rp{margin-inline-start:18px;padding:8px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:3px}
.cm .shp{font:600 11px/1 var(--ui);background:var(--surface-2);color:var(--ink-2);border-radius:4px;padding:3px 6px}
.cm .gb{font:600 11px/1 var(--ui);background:var(--warn-soft);color:var(--warn);border-radius:4px;padding:3px 6px}
.cm .acts{display:flex;gap:6px;flex-wrap:wrap}
.cm .rf{display:flex;gap:6px;margin-top:6px}
.cm .rf .in{flex:1;min-height:40px}
.vers .row{grid-template-columns:auto minmax(0,1fr) auto}
.vers .row.on{background:var(--surface-2)}
.vers .vn{font:700 13px/1 var(--ui);width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.cmpbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.cmpbar .in{max-width:220px}
.cmpgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.cmpgrid{grid-template-columns:1fr}}
.cmpgrid video{width:100%;max-height:56vh;background:#000;display:block;border-radius:var(--r)}
.share-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
.share-row:first-child{border-top:0}
.share-row small{color:var(--ink-3);font-size:12.5px;display:block}
.share-row code{font-size:12px;word-break:break-all;color:var(--ink-2)}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font:600 15px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;background:var(--surface-2);padding:14px;border-radius:var(--r)}
.qr{display:flex;justify-content:center;background:#fff;padding:8px;border-radius:var(--r)}
.qr svg{width:200px;height:200px}

/* =====================================================================================================
   10/15 "Studio bold", step 1 = the SHARED BASE (founder's reference: workspace-upgrade/redesign/reference-design.html).
   Tokens light + dark, the app's old tokens mapped onto them, white tile menu, pill top bar, pill buttons, rounded fields,
   28px tiles, black-pill toasts, blurred scrims. Karantina = display only · IBM Plex Sans Hebrew = all UI · IBM Plex Mono = dates/meta.
   Hebrew is never letter-spaced. Each page gets its own layout in later steps.
   ===================================================================================================== */
:root{
  --bg:#EDEDED;--tile:#FFFFFF;--tile-2:#F3F3F3;
  --ink:#0E0E10;--ink-2:#55585F;--ink-3:#8A8D95;--inv:#0E0E10;--inv-ink:#FFFFFF;
  --hero:#0E0E10;--hero-line:rgba(255,255,255,.22);
  --pink:#FF4FA3;--pink-ink:#D42E85;--pink-deep:#D42E85;--blue:#1F6BFF;
  --ok:#2E8049;--ok-soft:rgba(46,128,73,.12);--warn:#9A5B00;--warn-soft:rgba(226,184,0,.18);--bad:#C8102E;--bad-soft:rgba(200,16,46,.1);
  --st-brief:#3D6FD9;--st-plan:#E2B800;--st-making:#1C9AA8;--st-ready:#2E8049;
  --shadow:0 1px 2px rgba(0,0,0,.04);--shadow-lg:0 30px 80px rgba(0,0,0,.25);--scrim:rgba(14,14,16,.35);
  --display:"Karantina","Arial Narrow",sans-serif;
  --ui:"IBM Plex Sans Hebrew",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r-tile:28px;
  /* the app's existing names, mapped onto the new language */
  --surface:var(--tile);--surface-2:var(--tile-2);--line:rgba(14,14,16,.08);--line-2:rgba(14,14,16,.16);--on-ink:var(--inv-ink);
  --you:var(--pink);--you-soft:rgba(255,79,163,.12);--accent:var(--blue);--accent-2:var(--blue);
  --st-approved:var(--st-plan);--st-voice:var(--st-making);--st-post:var(--st-making);--st-check:var(--st-making);--st-done:var(--st-ready);
  --r:14px;--r-lg:var(--r-tile);--sh:var(--shadow);--top:12px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0A0C;--tile:#16171B;--tile-2:#202127;
  --ink:#F2F3F5;--ink-2:#A6A9B2;--ink-3:#6E717B;--inv:#F2F3F5;--inv-ink:#0E0E10;
  --hero:#141519;--hero-line:rgba(255,255,255,.18);
  --pink:#FF4FA3;--pink-ink:#FF77B8;--blue:#4C8DFF;
  --ok:#4CC27A;--ok-soft:rgba(76,194,122,.14);--warn:#E8C51C;--warn-soft:rgba(232,197,28,.14);--bad:#FF6B6B;--bad-soft:rgba(255,107,107,.14);
  --st-brief:#6B95FF;--st-plan:#E8C51C;--st-making:#2CC3D3;--st-ready:#4CC27A;
  --shadow:0 0 0 1px rgba(255,255,255,.04);--shadow-lg:0 40px 100px rgba(0,0,0,.6);--scrim:rgba(0,0,0,.6);
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);--you-soft:rgba(255,79,163,.16);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A0A0C;--tile:#16171B;--tile-2:#202127;
  --ink:#F2F3F5;--ink-2:#A6A9B2;--ink-3:#6E717B;--inv:#F2F3F5;--inv-ink:#0E0E10;
  --hero:#141519;--hero-line:rgba(255,255,255,.18);
  --pink:#FF4FA3;--pink-ink:#FF77B8;--blue:#4C8DFF;
  --ok:#4CC27A;--ok-soft:rgba(76,194,122,.14);--warn:#E8C51C;--warn-soft:rgba(232,197,28,.14);--bad:#FF6B6B;--bad-soft:rgba(255,107,107,.14);
  --st-brief:#6B95FF;--st-plan:#E8C51C;--st-making:#2CC3D3;--st-ready:#4CC27A;
  --shadow:0 0 0 1px rgba(255,255,255,.04);--shadow-lg:0 40px 100px rgba(0,0,0,.6);--scrim:rgba(0,0,0,.6);
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);--you-soft:rgba(255,79,163,.16);color-scheme:dark}

html,body{background:var(--bg);color:var(--ink);font:400 14.5px/1.55 var(--ui);letter-spacing:normal}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:10px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.mono,time{font-family:var(--mono)}
[dir="rtl"] .flip{transform:scaleX(-1)}

/* ---------- shell ---------- */
.shell{grid-template-columns:236px minmax(0,1fr);gap:16px;max-width:1480px;margin-inline:auto;align-items:start;
  padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
.side{position:sticky;top:16px;height:calc(100vh - 32px);min-height:520px;background:var(--tile);backdrop-filter:none;border:0;border-radius:var(--r-tile);box-shadow:var(--shadow);
  padding:22px 14px 16px;gap:2px;overflow:hidden}
.side .logo{display:block;font:700 36px/1 var(--display);letter-spacing:.03em;padding:0 12px;margin-bottom:18px;text-decoration:none;color:var(--ink)}
.wsw{padding:10px;border-radius:18px;background:var(--tile-2);margin-bottom:14px;color:var(--ink)}
.wsw:hover{background:var(--tile-2)}
.wsw:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.wsw .av{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--pink));color:#fff;font:700 12px/1 var(--ui)}
.wsw .av.lg{background:#fff;border:0;box-shadow:inset 0 0 0 1px rgba(14,14,16,.08)}
.wsw b{font-size:13.5px;line-height:1.2;font-weight:600}
.wsw small{font-size:12px;color:var(--ink-3)}
.nav{gap:3px;margin-top:0;overflow:auto;min-height:0;scrollbar-width:none}
.nav a{gap:11px;padding:10px 12px;border-radius:99px;font-weight:600;font-size:13.5px;color:var(--ink-2);transition:background .2s,color .2s}
.nav a:hover{background:var(--tile-2);color:var(--ink)}
.nav a.on{background:var(--inv);color:var(--inv-ink);box-shadow:none;font-weight:600}
.nav a svg{stroke-width:1.8}
.nav .ct,.nav a.on .ct{min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--pink);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:700;line-height:1}
.nav .grp{font-size:11px;font-weight:700;color:var(--ink-3);padding:16px 12px 6px;text-transform:uppercase;letter-spacing:0}
:root[lang="en"] .nav .grp{letter-spacing:.1em}
#pkg{margin-top:auto;padding-top:12px}
#pkg:empty{padding:0}
.pkg{display:grid;gap:8px;padding:14px;border-radius:20px;background:var(--hero);color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s}
a.pkg:hover{transform:translateY(-1px)}
.pkg b{font-size:13.5px;font-weight:600}
.pkg small{font-size:12px;color:rgba(255,255,255,.68)}
.pkg .meter{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden;margin:0}
.pkg .meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--pink));transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
[dir="rtl"] .pkg .meter i{background:linear-gradient(270deg,var(--blue),var(--pink))}
.side .foot{margin-top:10px;padding:0;display:flex;justify-content:space-between;gap:8px;color:var(--ink-3)}
.seg{display:inline-flex;gap:2px;padding:4px;border:0;border-radius:99px;background:var(--tile-2)}
.seg button{height:auto;min-height:28px;padding:5px 10px;border:0;border-radius:99px;background:none;font-size:12px;font-weight:700;color:var(--ink-3);display:inline-grid;place-items:center}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--tile);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side .foot .seg button{padding:5px 9px}
.main{gap:16px}

/* ---------- top bar: pills on the page colour ---------- */
.top{position:static;height:auto;min-height:56px;padding:0;gap:10px;background:none;backdrop-filter:none;border:0}
.top .search{flex:0 1 380px;min-width:0;max-width:none;height:46px;padding-inline:18px;gap:10px;border:0;border-radius:99px;background:var(--tile);box-shadow:var(--shadow);color:var(--ink-3);font-weight:500;font-size:13.5px;cursor:pointer;text-align:start}
.top .search:hover{box-shadow:var(--shadow),0 0 0 1px var(--line)}
.top .search span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .search svg{width:18px;height:18px;stroke-width:1.8}
.top .search kbd,kbd{font:500 11px var(--mono);padding:2px 7px;border:0;border-radius:7px;background:var(--tile-2);color:var(--ink-3)}
.top .iconbtn{width:46px;height:46px;border-radius:50%;border:0;background:var(--tile);box-shadow:var(--shadow);color:var(--ink)}
.top .iconbtn:hover{background:var(--tile);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.top .iconbtn svg{width:18px;height:18px;stroke-width:1.8}
.top .iconbtn .dot{top:11px;inset-inline-end:12px;background:var(--pink);border:2px solid var(--tile)}
.top .btn{height:46px;padding:0 20px}
.top .btn svg{width:16px;height:16px}
:root[data-page="home"] .top .newbrief{display:none}
.me{padding:0;border-radius:50%}
.me:hover{background:none}
.me .av{width:46px;height:46px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));color:#fff;font-weight:700;font-size:15px}
.burger{display:none}
.top .burger{display:none!important}
.page{padding:4px 0 80px;max-width:none}
.delbar{border-radius:var(--r-tile)}
.menu{background:var(--tile);border:0;border-radius:20px;box-shadow:var(--shadow-lg);padding:8px}
.menu a,.menu button{border-radius:12px;color:var(--ink)}
.menu a:hover,.menu button:hover{background:var(--tile-2)}

/* ---------- page header ---------- */
.ph{margin-bottom:22px;align-items:flex-end}
.ph h1{font:700 clamp(52px,5.6vw,84px)/.86 var(--display);letter-spacing:.005em;text-wrap:balance}
:root[lang="he"] .ph h1{letter-spacing:0}
.ph p{font-size:15.5px;color:var(--ink-2);margin-top:10px}
.crumb{font-size:13px;color:var(--ink-3)}

/* ---------- buttons: pill · black primary · ghost · pink approve ---------- */
.btn{height:42px;padding:0 20px;border-radius:99px;border:1px solid transparent;background:var(--inv);color:var(--inv-ink);font-weight:600;font-size:14px;letter-spacing:normal;transition:transform .15s,box-shadow .2s,background .2s,opacity .2s}
.btn:hover{background:var(--inv);border-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--inv) 14%,transparent)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--tile-2);color:var(--ink);border-color:transparent}
.btn.sec:hover{background:var(--tile-2);border-color:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--tile-2);color:var(--ink);box-shadow:none}
.btn.you,.btn.ok{background:var(--pink);border-color:transparent;color:#fff;box-shadow:0 10px 30px -12px var(--pink)}
.btn.you:hover{background:var(--pink);box-shadow:0 0 0 4px rgba(255,79,163,.25)}
.btn.danger{background:var(--tile-2);color:var(--bad);border-color:transparent}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{height:34px;padding:0 14px;font-size:13px}
.btn.lg{height:50px;padding:0 26px;font-size:15px}
.btn:disabled{opacity:.4;box-shadow:none;transform:none}

/* ---------- fields ---------- */
.field{font-size:13px;font-weight:600;color:var(--ink-2)}
.in,select.in,textarea.in{height:44px;border:1px solid transparent;border-radius:14px;background:var(--tile-2);color:var(--ink);padding:0 14px;font-size:14.5px;transition:background .2s,box-shadow .2s,border-color .2s}
textarea.in{height:auto;border-radius:18px;padding:12px 14px}
.in:hover{border-color:var(--line-2)}
.in:focus{outline:none;background:var(--tile);border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 28%,transparent)}
.in::placeholder{color:var(--ink-3)}
select.in{cursor:pointer}
.chip{height:32px;padding:0 13px;border-radius:99px;border:1px solid var(--line-2);background:var(--tile);color:var(--ink-2);font-weight:500}
.chip.on{background:var(--inv);border-color:var(--inv);color:var(--inv-ink)}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}

/* ---------- tiles ---------- */
.card{background:var(--tile);border:0;border-radius:var(--r-tile);box-shadow:var(--shadow);overflow:clip}
.card .hd{padding:20px 24px 14px;border-bottom:0}
.card .hd h2{font:700 15px/1.3 var(--ui);letter-spacing:normal}
.card .hd a,.card .hd button.link{color:var(--ink);font-weight:600}
.card .bd{padding:8px 24px 22px}
.card .hd + .bd.flush{border-top:1px solid var(--line)}
.card .bd.flush{padding:0}
.cols{gap:16px}
.kpi{background:var(--tile);border:0;border-radius:var(--r-tile);box-shadow:var(--shadow);padding:22px 24px;color:var(--ink)}
.kpi span{color:var(--ink-2);font-weight:600}
.kpi b{font:700 64px/.9 var(--display);letter-spacing:0;margin-top:10px}
.kpi small{color:var(--ink-3)}
.kpi.you{background:var(--tile);box-shadow:var(--shadow),inset 0 0 0 2px var(--pink)}
.kpi.you b{color:var(--pink-ink)}
button.kpi:hover,a.kpi:hover{box-shadow:var(--shadow),0 0 0 1px var(--line-2)}
.kpi.you:hover{box-shadow:var(--shadow),inset 0 0 0 2px var(--pink)}
.empty{color:var(--ink-3)}
.empty b{color:var(--ink)}
.skel{background:linear-gradient(90deg,var(--tile),var(--tile-2),var(--tile));background-size:200% 100%;border-radius:var(--r-tile)}
.next{border-radius:var(--r-tile);background:var(--hero);color:#fff;padding:20px 24px;border-inline-start:6px solid var(--c,var(--hero))}
.next.you{background:var(--pink-deep);border-inline-start-color:var(--pink-deep)}
.next .btn{background:#fff;color:#0E0E10;border-color:#fff}
.sendbar{background:var(--hero);color:#fff;border-radius:var(--r-tile) var(--r-tile) 0 0}
.sendbar .btn{background:#fff;color:#0E0E10;border-color:#fff}

/* ---------- stages & badges ---------- */
.st{color:var(--ink-2)}
.st i{border-radius:50%}
.st.pill{background:var(--tile-2);border:0;border-radius:99px;padding:3px 10px}
.st.you{color:var(--pink-ink)}
.bars{height:auto;min-height:78px;border-radius:18px}
.bars a{gap:6px;padding:10px 12px}
.bars a{background:color-mix(in srgb,var(--c) 20%,var(--tile))!important}
.bars a b{font:700 30px/1 var(--display);letter-spacing:0}
.pf{color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.cm .tc{background:var(--you-soft);color:var(--pink-ink);font-family:var(--mono)}
.cm .shp,.cm .gb{font-family:var(--ui)}
.vt .im{border-radius:18px;box-shadow:none;background-color:var(--tile-2)}
.vt .im .st{background:rgba(255,255,255,.95);color:#0E0E10}
.tl a span{color:#0E0E10}
.th{background-color:var(--tile-2);box-shadow:none;border-radius:8px}

/* ---------- tables & lists: clean, no heavy borders ---------- */
.tblwrap{background:var(--tile);border:0;border-radius:var(--r-tile);box-shadow:var(--shadow)}
.tbl th{background:none;color:var(--ink-3);font-size:12px;font-weight:600;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--tile-2)}
.rows .row{padding:14px 24px;border-top:1px solid var(--line);color:var(--ink)}
.rows .row:hover{background:var(--tile-2)}
.tabs{border-bottom:1px solid var(--line);gap:4px}
.tabs a{color:var(--ink-3);font-weight:600}
.tabs a.on{color:var(--ink);border-color:var(--ink)}
.kanban .kcol{background:var(--tile-2);border-radius:22px}
.kcol .kh{border-bottom:0}
.kcard{background:var(--tile);border-radius:16px;box-shadow:var(--shadow)}
.cal{border-radius:var(--r-tile);box-shadow:var(--shadow);background:var(--line)}
.cal .dh{background:var(--tile-2)}
.cal .day{background:var(--tile)}
.cal .day.out{background:var(--tile-2)}
.cal .day .d{font-family:var(--mono)}
.cal .day.today .d{background:var(--inv);color:var(--inv-ink)}
.cal .ev{background:var(--tile-2);color:var(--ink)}
.sbc{background:var(--tile);border-radius:22px;box-shadow:var(--shadow)}
.tile{background:var(--tile);border-radius:16px}
.tile[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--blue)}
.campv{background:var(--tile-2);border-radius:18px}
.player .vid{border-radius:var(--r-tile)}
.wznav{background:var(--tile);border-radius:0 0 var(--r-tile) var(--r-tile)}
.wztitle{font:700 52px/1 var(--display);letter-spacing:0}
.wztitle:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 28%,transparent);background:var(--tile)}
.bnav{background:var(--bg)}
.bnav a{background:var(--tile);border-color:transparent;color:var(--ink-2);font-weight:600}
.bnav a.done{border-color:var(--ok);color:var(--ok)}
.dropz{border-radius:var(--r-tile);border-color:var(--line-2)}
.dropz:hover,.dropz.on{border-color:var(--blue);background:var(--tile-2)}
.pkgst{background:color-mix(in srgb,var(--st-brief) 10%,var(--tile));border-radius:22px}
.pkgst.open{background:var(--ok-soft)}
.tlv .dt{background:var(--tile)}
.tlv li.now .dt{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
.tlv .when{font-family:var(--mono);font-size:12px}
.calpop{background:var(--tile);border:0;border-radius:20px;box-shadow:var(--shadow-lg)}
.calpop .cg button{color:var(--ink)}
.calpop .cg button.on{background:var(--inv);color:var(--inv-ink)}
.calpop .cg button.td{box-shadow:inset 0 0 0 1px var(--blue)}
.datef .iconbtn{background:var(--tile-2);border:0;border-radius:14px}
.share-row code,.codes{font-family:var(--mono)}
.codes{background:var(--tile-2)}
.saved.bad button{color:var(--blue)}
.wz button.on,.subdots .on i,.wzm .bar button.on i{border-color:var(--pink)}
.subdots .on i,.wzm .bar button.on i{background:var(--pink)}
.tour .dots i.on{background:var(--pink)}
.tour .ic{background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue)}

/* ---------- toasts, modals ---------- */
.toast{bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--inv);color:var(--inv-ink);padding:12px 20px;border-radius:99px;font-weight:600;box-shadow:var(--shadow-lg);z-index:200;animation:dzin .3s cubic-bezier(.2,.8,.2,1)}
.toast.bad{background:var(--bad);color:#fff}
.modal{background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:12vh 16px 16px;animation:dzfade .18s}
.modal .box{background:var(--tile);border-radius:24px;box-shadow:var(--shadow-lg);animation:dzin .25s cubic-bezier(.2,.8,.2,1)}
.modal .box .hd{border-bottom:1px solid var(--line);padding:18px 22px}
.modal .box .hd h2{font:700 17px/1.3 var(--ui)}
.modal .box .ft{border-top:1px solid var(--line)}
.modal .iconbtn{border-radius:50%;border:0}
.modal .iconbtn:hover{background:var(--tile-2)}
.cmdk .res a{border-radius:14px;color:var(--ink-2)}
.cmdk .res a b{color:var(--ink)}
.cmdk .res a.on{background:var(--inv);color:var(--inv-ink)}
.cmdk .res a.on b,.cmdk .res a.on small{color:var(--inv-ink)!important}
.cmdk .res a:not(.on):hover{background:var(--tile-2)}
.tour{background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tour .box{background:var(--tile);border-radius:24px;box-shadow:var(--shadow-lg)}
.tour h2{letter-spacing:normal}
.iconbtn{color:var(--ink-2)}
.iconbtn:hover{background:var(--tile-2);border-color:transparent}

/* ---------- sign-in ---------- */
.login{background:var(--bg)}
.login .art{background:var(--hero);position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-tile);margin:16px}
.login .art::before{content:"";position:absolute;z-index:-1;width:540px;height:540px;border-radius:50%;inset-inline-end:-160px;top:-200px;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.6}
.login .art::after{content:"";position:absolute;z-index:-1;width:540px;height:540px;border-radius:50%;inset-inline-start:-120px;bottom:-260px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.55}
.login .art h2{font:700 clamp(72px,8vw,120px)/.84 var(--display);letter-spacing:0}
.login h1{font:700 64px/.9 var(--display);letter-spacing:0}
.mlogo span{font:700 30px/1 var(--display)}

/* ---------- motion: tiles fade up once per page, 50ms apart ---------- */
@keyframes dzin{from{transform:translateY(12px);opacity:.001}}
@keyframes dzfade{from{opacity:0}}
.page.enter > *,.page.enter > .cols > *,.page.enter > div > .cols > *{animation:dzin .6s cubic-bezier(.2,.8,.2,1) backwards}
.page.enter > :nth-child(2),.page.enter .cols > :nth-child(2){animation-delay:.05s}
.page.enter > :nth-child(3),.page.enter .cols > :nth-child(3){animation-delay:.1s}
.page.enter > :nth-child(4),.page.enter .cols > :nth-child(4){animation-delay:.15s}
.page.enter > :nth-child(5),.page.enter .cols > :nth-child(5){animation-delay:.2s}
.page.enter > :nth-child(n+6){animation-delay:.25s}

/* ---------- phone & tablet: the menu is a drawer (burger in the top bar) ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);padding-top:12px}
  .top .burger{display:inline-flex!important}
  .scrim{display:block;position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .25s;z-index:89}
  .scrim.on{opacity:1}
  .side{position:fixed;z-index:90;top:calc(12px + env(safe-area-inset-top,0px));bottom:12px;inset-inline-start:max(12px,env(safe-area-inset-left,0px));height:auto;min-height:0;width:min(280px,84vw);
    transform:translateX(calc(-100% - 24px));visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s;box-shadow:var(--shadow-lg);background:var(--tile)}
  [dir="rtl"] .side{transform:translateX(calc(100% + 24px))}
  .side.open,[dir="rtl"] .side.open{transform:none!important;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .page{padding:0 0 80px}
}
@media (max-width:700px){
  :root{--r-tile:24px}
  .shell{gap:12px;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .top{gap:8px;min-height:48px}
  .top .search,.top .search:hover{flex:0 0 46px;width:46px;padding:0;justify-content:center;display:inline-flex}
  .top .search span,.top .search kbd{display:none}
  .top .newbrief{width:46px;padding:0}
  .top .newbrief span{display:none}
  .ph h1{font-size:clamp(46px,13vw,60px)}
  .card .hd{padding:18px 20px 12px}
  .card .bd{padding:6px 20px 20px}
  .rows .row{padding:12px 20px}
  .kpi{padding:18px 20px}
  .kpi b{font-size:48px}
  .wztitle{font-size:40px}
  .login .art{display:none}
}
@media (max-width:560px){.top .search{display:inline-flex}}
@media (prefers-reduced-motion:reduce){.page.enter > *,.page.enter .cols > *,.toast,.modal,.modal .box{animation:none!important}.side{transition:none!important}}

/* =====================================================================================================
   10/15 "Studio bold" step 2 = the OVERVIEW (pages/home.js), copied from the reference's bento.
   .ovg = the grid; layouts picked by data: busy (has videos) / fresh (no videos); .nofeat / .norecent drop a tile that has nothing to show.
   ===================================================================================================== */
.page.enter > .ovg{animation:none}
.ovg{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,.66fr) minmax(0,.74fr)}
.ovg.busy{grid-template-areas:"hero hero feat" "line wk feat" "recent recent recent"}
.ovg.busy.nofeat{grid-template-areas:"hero hero hero" "line line wk" "recent recent recent"}
.ovg.fresh{grid-template-areas:"hero hero steps" "how how steps"}
.ovt{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:24px;position:relative;overflow:hidden;min-width:0;color:var(--ink);
  animation:ovin .6s cubic-bezier(.2,.8,.2,1) both}
.ovg > .ovt:nth-child(2){animation-delay:.05s}.ovg > .ovt:nth-child(3){animation-delay:.1s}.ovg > .ovt:nth-child(4){animation-delay:.15s}.ovg > .ovt:nth-child(5){animation-delay:.2s}
.ovg.still > .ovt,.ovt.still{animation:none}
@keyframes ovin{from{transform:translateY(12px);opacity:.001}}
.ovt h5{margin:0 0 18px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0;color:var(--ink-3);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
:root[lang="en"] .ovt h5 > span{letter-spacing:.09em}
.ovt h5 a{font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-weight:700}
.ovt h5 a:hover{text-decoration:underline}
.ovg svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;max-width:none;max-height:none}
.ovt h5 a svg.i{width:14px;height:14px}
.ovg a{text-decoration:none;color:inherit}
.ovg button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* welcome (black, two floating glows) */
.ov-hero{grid-area:hero;background:var(--hero);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:380px;isolation:isolate}
.ov-hero::before,.ov-hero::after{content:"";position:absolute;z-index:-1;width:540px;height:540px;border-radius:50%;pointer-events:none;animation:ovfloat 18s ease-in-out infinite alternate}
.ov-hero::before{inset-inline-end:-140px;top:-200px;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.72}
.ov-hero::after{inset-inline-end:140px;top:-60px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.68;animation-direction:alternate-reverse}
@keyframes ovfloat{to{transform:translate(-40px,30px) scale(1.08)}}
.ov-hero small{font:500 12px var(--mono);color:rgba(255,255,255,.6)}
.ov-hero h1{margin:8px 0 0;font:700 clamp(64px,7.4vw,112px)/.82 var(--display);letter-spacing:.01em;text-wrap:balance;color:#fff}
:root[lang="he"] .ov-hero h1{letter-spacing:0}
.ov-hero p{margin:12px 0 0;color:rgba(255,255,255,.75);font-size:16px;max-width:46ch}
.ov-hero p b{color:#fff;font-weight:700}
.ov-hero .prompt{display:flex;align-items:center;gap:10px;background:#fff;color:#0E0E10;border-radius:99px;padding:7px;padding-inline-start:22px;transition:box-shadow .25s}
.ov-hero .prompt:focus-within{box-shadow:0 0 0 6px rgba(255,79,163,.35)}
.ov-hero .prompt input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:15.5px;color:#0E0E10;height:44px}
.ov-hero .prompt input::placeholder{color:#6E717B}
.ov-hero .send{height:44px;padding-inline:20px;border-radius:99px;background:#0E0E10!important;color:#fff!important;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;transition:transform .15s,opacity .2s;white-space:nowrap}
.ov-hero .send:hover{transform:translateX(2px)}
[dir="rtl"] .ov-hero .send:hover{transform:translateX(-2px)}
.ov-hero .send:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.ov-hero .send:disabled{opacity:.35;cursor:default;transform:none}
.ov-hero .chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ov-hero .chips button{font-size:12.5px;padding:6px 13px;border-radius:99px;border:1px solid var(--hero-line);color:rgba(255,255,255,.88);transition:background .2s,border-color .2s}
.ov-hero .chips button:hover{background:rgba(255,255,255,.12)}
.ov-hero .chips button.on{background:#fff;color:#0E0E10;border-color:#fff}
.ov-hero .chips .sep{width:1px;background:var(--hero-line);margin-inline:4px}

/* featured video: the first one that needs the client, full-bleed poster */
.ov-feat{grid-area:feat;padding:0;color:#fff;min-height:560px;background:#000}
.ov-feat .fr{position:absolute;inset:0;background:#1B1C21 center/cover no-repeat;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.ov-feat:hover .fr{transform:scale(1.04)}
.ov-feat .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 45%,rgba(0,0,0,.78))}
.ov-feat .tophud{position:absolute;inset-inline:20px;top:20px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.ov-feat .lab{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--pink);color:#fff}
.ov-feat .lab.ok{background:var(--ok)}
.ov-feat .lab svg.i{width:14px;height:14px;stroke-width:2.4}
.ov-feat .pager{display:flex;gap:6px}
.ov-feat .pager button{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;color:#fff}
.ov-feat .pager button:disabled{opacity:.35;cursor:default}
.ov-feat .pager svg.i{width:16px;height:16px}
.ov-feat .meta{position:absolute;inset-inline:22px;bottom:22px;z-index:2}
.ov-feat .sub{font:500 12.5px var(--mono);color:rgba(255,255,255,.78)}
.ov-feat h2{margin:6px 0 0;font:700 clamp(48px,4.6vw,66px)/.84 var(--display);text-wrap:balance;overflow-wrap:anywhere;color:#fff}
.ov-feat .what{margin:10px 0 0;font-size:14px;color:rgba(255,255,255,.88)}
.ov-feat .go{margin-top:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ov-feat .go .pri{height:46px;padding-inline:20px;border-radius:99px;background:#fff;color:#0E0E10;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;transition:transform .15s}
.ov-feat .go .pri:hover{transform:translateY(-1px)}
.ov-feat .go .ap{height:46px;padding-inline:16px;border-radius:99px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#fff;transition:background .2s}
.ov-feat .go .ap.round{width:46px;padding:0;justify-content:center}
.ov-feat .go .ap:hover{background:var(--pink)}
.ov-feat .go .ap:disabled{opacity:.5;cursor:default}
.ov-feat .go a:focus-visible,.ov-feat .go button:focus-visible,.ov-feat .pager button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ov-feat .dots{display:flex;gap:5px;margin-top:16px;direction:ltr}
[dir="rtl"] .ov-feat .dots{flex-direction:row-reverse}
.ov-feat .dots i{height:4px;flex:1;border-radius:4px;background:rgba(255,255,255,.25)}
.ov-feat .dots i.on{background:#fff}
.ov-feat .meta.swap{animation:ovswap .5s cubic-bezier(.2,.8,.2,1)}
.ov-feat .meta.out{transition:opacity .25s,transform .25s;opacity:0;transform:translateY(-10px)}
@keyframes ovswap{from{opacity:0;transform:translateY(14px)}}

/* in the studio: 4 bars */
.ov-line{grid-area:line;display:flex;flex-direction:column}
.ov-line .stg{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;min-height:190px}
.ov-line .stg a{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:100%;text-align:start;border-radius:14px}
.ov-line .stg b{font:700 34px/1 var(--display)}
.ov-line .stg i{display:block;border-radius:14px;background:var(--c);height:0;min-height:10px;transition:height 1s cubic-bezier(.2,.8,.2,1),filter .2s}
.ov-line .stg a:hover i{filter:brightness(1.1)}
.ov-line .stg span{font-size:12.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px}
.ov-line .stg span.you{color:var(--pink-ink)}
.ov-line .stg span em{width:7px;height:7px;border-radius:50%;background:var(--pink);flex:none}

/* this week */
.ov-wk{grid-area:wk}
.ov-wk .d{display:flex;align-items:center;gap:12px;padding:9px 6px;margin-inline:-6px;border-top:1px solid var(--line);font-weight:600;font-size:14px;border-radius:12px;transition:background .2s}
.ov-wk .d:hover{background:var(--tile-2)}
.ov-wk .d em{font:700 28px/1 var(--display);font-style:normal;width:34px;flex:none}
.ov-wk .d em.late{color:var(--bad)}
.ov-wk .d div{flex:1;min-width:0}
.ov-wk .d div span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-wk .d small{display:block;font-weight:500;color:var(--ink-3);font-size:12px}
.ov-wk .d .fr{width:36px;height:46px;border-radius:9px;flex:none;background:var(--tile-2) center/cover no-repeat}
.ov-wk .none{color:var(--ink-3);font-size:13.5px;padding:8px 0}

/* recent: poster cards with a slow Ken Burns and a progress line on hover */
.ov-recent{grid-area:recent}
.ov-recent .strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.ovc{display:flex;flex-direction:column;gap:8px;text-align:start;min-width:0}
.ovc .fr{position:relative;display:block;aspect-ratio:4/5;max-width:100%;border-radius:18px;overflow:hidden;background:var(--tile-2);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ovc .kb{position:absolute;inset:0;background:center/cover no-repeat;transform-origin:30% 30%}
.ovc:hover .fr{transform:translateY(-4px)}
.ovc:hover .kb{animation:ovkb 7s linear infinite alternate}
@keyframes ovkb{to{transform:scale(1.16) translate(-4%,-4%)}}
.ovc .tc{position:absolute;bottom:10px;inset-inline-end:10px;font:500 10.5px var(--mono);color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:6px;z-index:1}
.ovc .pb{position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff;z-index:2}
.ovc:hover .pb{animation:ovpb 7s linear infinite}
@keyframes ovpb{to{width:100%}}
.ovc .pl{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s;z-index:1}
.ovc:hover .pl,.ovc:focus-visible .pl{opacity:1}
.ovc .pl span{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;color:#fff}
.ovc b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovc small{margin-top:-6px;font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.ovc small i{width:7px;height:7px;border-radius:50%;background:var(--c)}

/* new client: getting started (pink) + how a video moves */
.ov-steps{grid-area:steps;background:var(--pink);color:#fff;display:flex;flex-direction:column;gap:18px}
.ov-steps h5{color:rgba(255,255,255,.85)}
.ov-steps .big{font:700 120px/.8 var(--display)}
.ov-steps .big small{font-size:48px;opacity:.6}
.ov-steps p{margin:0;font-weight:600;font-size:16px}
.ov-steps .list{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.ov-steps .list a,.ov-steps .list button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.16);text-align:start;font-weight:600;color:#fff;transition:background .2s;width:100%}
.ov-steps .list a:hover,.ov-steps .list button:hover{background:rgba(255,255,255,.26)}
.ov-steps .list a:focus-visible,.ov-steps .list button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ov-steps .ck{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;flex:none}
.ov-steps .ck svg.i{width:12px;height:12px;stroke-width:3;opacity:0}
.ov-steps .list .done{background:rgba(255,255,255,.95);color:#0E0E10}
.ov-steps .list .done:hover{background:#fff}
.ov-steps .done .ck{background:#0E0E10;border-color:#0E0E10;color:#fff}
.ov-steps .done .ck svg.i{opacity:1}
.ov-how{grid-area:how}
.ov-how .journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ov-how .jc{border-radius:20px;background:var(--tile-2);padding:18px;display:flex;flex-direction:column;gap:8px;min-height:190px}
.ov-how .jc .n{font:700 46px/1 var(--display);color:var(--c)}
.ov-how .jc b{font-size:15px}
.ov-how .jc p{margin:0;color:var(--ink-2);font-size:13px}
.ov-how .jc .you,.ov-how .jc .us{margin-top:auto;align-self:flex-start;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px}
.ov-how .jc .you{background:var(--pink);color:#fff}
.ov-how .jc .us{background:var(--inv);color:var(--inv-ink)}

/* "which video?" before the brief opens */
.ovpick .box{max-width:620px}
.ovpick .bd{display:flex;flex-direction:column;gap:14px}
.ovpick .q{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.ovpick .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:4px}
.ovpick .tile{border:1px solid var(--line-2);text-align:start;cursor:pointer;color:var(--ink)}
.ovpick .tile .tx{padding:12px;display:flex;flex-direction:column;gap:2px}
.ovpick .tile b{font-size:14px}
.ovpick .tile small{color:var(--ink-3);font-weight:500}
.ovpick .hint{margin:0;font-size:13px;color:var(--ink-3)}
.ovpick .ft2{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ovpick #ovperr{color:var(--bad);font-size:13px}
.ovpick .btn svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the bell's notifications panel */
.np{position:fixed;z-index:120;top:calc(84px + env(safe-area-inset-top,0px));inset-inline-end:max(16px,env(safe-area-inset-right,0px));width:min(390px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;
  background:var(--tile);color:var(--ink);border-radius:24px;box-shadow:var(--shadow-lg);padding:10px;animation:ovin .25s cubic-bezier(.2,.8,.2,1)}
.np-h{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 10px}
.np-h b{font-size:15px}
.np-h button{font-size:12.5px;font-weight:600;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:8px}
.np-h button:hover{color:var(--ink)}
.np .ni{display:flex;gap:12px;align-items:center;width:100%;padding:10px 12px;border-radius:16px;text-align:start;font-size:13.5px;color:var(--ink-2);text-decoration:none;line-height:1.45}
.np .ni:hover{background:var(--tile-2)}
.np .ni b{color:var(--ink);font-weight:700}
.np .ni .fr{width:38px;height:48px;border-radius:10px;flex:none;background:var(--tile-2) center/cover no-repeat}
.np .ni .wl{width:38px;height:38px;border-radius:12px;flex:none;background:linear-gradient(135deg,var(--blue),var(--pink));display:grid;place-items:center;color:#fff}
.np .ni .wl svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.np .ni .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.np .ni small{display:block;font:500 11.5px var(--mono);color:var(--ink-3);margin-top:2px}
.np .ni .ud{width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none}
.np-e{padding:10px 12px 14px;color:var(--ink-3);font-size:13.5px}
.np-all{display:block;margin-top:4px;padding:10px 12px;border-top:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;text-align:center;border-radius:0 0 14px 14px}
.np-all:hover{background:var(--tile-2)}

/* responsive (the reference's breakpoints) */
@media (max-width:1180px){
  .ovg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ovg.busy{grid-template-areas:"hero hero" "feat line" "feat wk" "recent recent"}
  .ovg.busy.nofeat{grid-template-areas:"hero hero" "line wk" "recent recent"}
  .ovg.fresh{grid-template-areas:"hero hero" "steps how"}
  .ov-how .journey{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-recent .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ov-recent .strip .ovc:nth-child(n+4){display:none}
}
@media (max-width:900px){.np{top:calc(76px + env(safe-area-inset-top,0px))}}
@media (max-width:700px){
  .ovg,.ovg.busy,.ovg.busy.nofeat,.ovg.fresh{grid-template-columns:minmax(0,1fr)}
  .ovg.busy{grid-template-areas:"hero" "feat" "line" "wk" "recent"}
  .ovg.busy.nofeat{grid-template-areas:"hero" "line" "wk" "recent"}
  .ovg.fresh{grid-template-areas:"hero" "steps" "how"}
  .ov-feat{min-height:520px}
  .ov-hero{min-height:0;padding:22px}
  .ovt{padding:20px}
  .ov-hero .send span{display:none}
  .ov-hero .send{padding-inline:14px}
  .ov-how .journey{grid-template-columns:minmax(0,1fr)}
  .ov-how .jc{min-height:0}
  .ov-recent .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ov-recent .strip .ovc:nth-child(n+3){display:none}
  .np{top:calc(68px + env(safe-area-inset-top,0px))}
}
@media (prefers-reduced-motion:reduce){
  .ovt,.ov-hero::before,.ov-hero::after,.ov-feat .meta.swap,.ovc:hover .kb,.ovc:hover .pb,.np{animation:none!important}
  .ov-line .stg i,.ov-feat .fr,.ovc .fr,.ov-feat .meta.out{transition:none!important}
  .ov-feat:hover .fr,.ovc:hover .fr{transform:none}
}
/* mono meta with Hebrew words: Plex Mono has no Hebrew, so Hebrew letters fall to Plex Sans Hebrew (not a spaced system mono) */
.ov-hero small,.ov-feat .sub,.ovc .tc,.np .ni small{font-family:"IBM Plex Mono","IBM Plex Sans Hebrew",ui-monospace,Menlo,Consolas,monospace}
.ovpick .q{border-inline-start:3px solid var(--pink);padding-inline-start:12px}

/* =====================================================================================================
   10/15 "Studio bold" step 3 = VIDEOS (pages/videos.js): stage tiles as filters (+ "Needs you" pink), pill tools,
   table in one tile, a 4-stage board of poster cards, a month calendar (a list on phones), designed empty states.
   ===================================================================================================== */
:root[data-page="videos"] .top .newbrief{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vm{font:500 12px/1.45 var(--ui);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mn{font-family:"IBM Plex Mono","IBM Plex Sans Hebrew",ui-monospace,Menlo,Consolas,monospace}
.mn{font-size:.96em}
#page svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;max-width:none;max-height:none}
.vh p b{color:var(--pink-ink);font-weight:700}
.vh .acts{align-items:center}
.vh .btn svg.i{width:16px;height:16px}
.vseg{background:var(--tile);box-shadow:var(--shadow);padding:4px}
.vseg button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;font-size:13px;color:var(--ink-2)}
.vseg button svg{width:16px;height:16px}
.vseg button.on{background:var(--inv);color:var(--inv-ink);box-shadow:none}

/* stage tiles */
.vtiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.vtile{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:112px;padding:16px 18px;border-radius:22px;background:var(--tile);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;position:relative;transition:box-shadow .2s,transform .2s,background .2s}
.vtile:hover{box-shadow:var(--shadow),0 0 0 1px var(--line-2);transform:translateY(-1px)}
.vtile .lb{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2)}
.vtile .lb i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.vtile .lb em{width:7px;height:7px;border-radius:50%;background:var(--pink);flex:none;margin-inline-start:auto}
.vtile b{font:700 50px/.8 var(--display)}
.vtile::after{content:"";position:absolute;inset-inline-end:18px;bottom:18px;width:28px;height:4px;border-radius:4px;background:var(--c,var(--line-2))}
.vtile.you b{color:var(--pink-ink)}
.vtile.you::after{background:var(--pink)}
.vtile.on{background:var(--inv);color:var(--inv-ink)}
.vtile.on .lb{color:var(--inv-ink);opacity:.8}
.vtile.you.on{background:var(--pink);color:#fff}
.vtile.you.on b,.vtile.you.on .lb{color:#fff;opacity:1}
.vtile.you.on::after{background:#fff}

/* tools */
.vtools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.vtools .sp{flex:1}
.vsearch{flex:0 1 320px;display:flex;align-items:center;gap:8px;height:44px;padding-inline:16px;border-radius:99px;background:var(--tile);box-shadow:var(--shadow);color:var(--ink-3);cursor:text;transition:box-shadow .2s}
.vsearch:focus-within{box-shadow:0 0 0 2px var(--blue)}
.vsearch input{flex:1;min-width:0;height:42px;border:0;outline:0;background:none;color:var(--ink);font-size:14px}
.vsearch input::placeholder{color:var(--ink-3)}
.vsearch input::-webkit-search-cancel-button{display:none}
.vtools select.in{width:auto;max-width:230px;height:44px;border-radius:99px;background:var(--tile);box-shadow:var(--shadow);padding-inline:16px;font-size:13.5px;font-weight:500}
.vtools .btn svg.i{width:14px;height:14px}
.vcount{white-space:nowrap}

/* the "next step" link (soft pink; solid on hover) */
.vgo{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;background:var(--you-soft);color:var(--pink-ink);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
#page .vgo svg.i{width:14px;height:14px}
a.vgo:hover,a:hover > .vgo,a:hover .vgo{background:var(--pink-deep);color:#fff}
.vgo.sm{height:28px;padding:0 11px;font-size:12px}
.vst{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.vst i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.vm .vst{font:inherit;color:inherit}
.late{color:var(--bad)!important;font-weight:600}
.nil{color:var(--ink-3)}

/* table */
.vtbl .tbl th{padding:16px 16px 12px}
.vtbl .tbl th button{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ink-3);border-radius:6px}
.vtbl .tbl th button:hover,.vtbl .tbl th[aria-sort] button{color:var(--ink)}
.vtbl .tbl th button i{font-style:normal;font-family:var(--mono)}
.vtbl .tbl th.pc,.vtbl .tbl td.pc{width:72px;padding-inline-end:0}
.vtbl .tbl th.nx{color:var(--ink-3);font-size:12px;font-weight:600}
.vtbl .tbl td{padding-block:12px}
.vtbl .tbl td.pc{position:relative}
.vtbl .tbl td.pc a{display:block}
.vth{display:block;width:44px;aspect-ratio:4/5;border-radius:10px;background:var(--tile-2) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line)}
.vtbl .tbl td.tt a.t{font-size:15px;font-weight:600;display:inline-block;margin-bottom:2px}
.vtbl .tbl tr.need td.pc::before{content:"";position:absolute;inset-block:14px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--pink)}
.vtbl .tbl td.nx{white-space:nowrap}
.vcm{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none}
.vcm:hover{color:var(--ink);text-decoration:underline}

/* phone list */
.vlist .row{grid-template-columns:48px minmax(0,1fr);align-items:start;position:relative;padding:14px 20px}
.vlist .row .vth{width:48px}
.vlist .row.need::before{content:"";position:absolute;inset-block:16px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--pink)}
.vt2{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.vt2 b{font-size:15px!important;max-width:100%}
.vt2 small{display:flex;flex-wrap:wrap;gap:0 4px;align-items:center}
.vt2 .vgo{margin-top:6px}

/* board: the 4 stages as white tiles, poster cards inside */
.vboard{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;gap:16px;overflow:visible;padding:0}
.vboard .kcol{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:14px;min-height:280px;min-width:0}
.vboard .kh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 6px 14px;border:0;font-size:14px}
.vboard .kn{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.vboard .kn i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.vboard .kyou{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--you-soft);color:var(--pink-ink)}
.vboard .kh b{font:700 36px/.8 var(--display);margin-inline-start:auto;color:var(--ink)}
.vboard .kb{padding:0;gap:10px}
.vboard .kcard{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:8px;border-radius:20px;background:var(--tile-2);box-shadow:none;color:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.vboard .kcard:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2)}
.vboard .kcard.need{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pink) 55%,transparent)}
.vboard .kf{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;background:var(--tile) center/cover no-repeat;overflow:hidden}
.vboard .klab{position:absolute;top:8px;inset-inline-start:8px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--pink);color:#fff}
.vboard .ktc{position:absolute;bottom:8px;inset-inline-end:8px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:6px}
.vboard .kt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0 6px 6px;min-width:0}
.vboard .kt b{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.vboard .kt small{font-size:11.5px}
.vboard .kt .vgo{margin-top:6px}
.kempty{margin:0;padding:10px 6px;color:var(--ink-3);font-size:13px}

/* calendar */
.vcal{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:20px 22px 22px}
.vcal-h{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding-inline:4px}
.vcal-h h2{margin:0;font:700 clamp(40px,4vw,56px)/.85 var(--display)}
.vcal-h .sp{flex:1}
.iconbtn.rnd{width:44px;height:44px;border-radius:50%;background:var(--tile-2);color:var(--ink)}
.iconbtn.rnd:hover{background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.vcal .cal{background:none;box-shadow:none;border:0;border-radius:0;gap:6px;overflow:visible}
.vcal .cal .dh{background:none;padding:0 6px 4px;font-size:12px;font-weight:600;color:var(--ink-3)}
.vcal .cal .dh .sh{display:none}
.vcal .cal .day{background:var(--tile-2);border-radius:16px;min-height:118px;padding:8px;gap:5px;min-width:0}
.vcal .cal .day.out{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.vcal .cal .day.out .d{opacity:.6}
.vcal .cal .day .d{font:600 12px/1 var(--mono);color:var(--ink-2);height:24px;display:flex;align-items:center;padding-inline:4px}
.vcal .cal .day.today{box-shadow:inset 0 0 0 2px var(--inv)}
.vcal .cal .day.today .d{background:var(--inv);color:var(--inv-ink);border-radius:99px;width:auto;min-width:24px;justify-content:center;align-self:flex-start}
.vcal .cal .ev{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;border-radius:10px;border:0;background:var(--tile);color:var(--ink);font-size:12px;font-weight:600;text-decoration:none;min-width:0;box-shadow:inset 3px 0 0 var(--c)}
[dir="rtl"] .vcal .cal .ev{padding:3px 3px 3px 8px;box-shadow:inset -3px 0 0 var(--c)}
.vcal .cal .ev span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcal .cal .ev:hover{box-shadow:inset 3px 0 0 var(--c),0 0 0 1px var(--line-2)}
[dir="rtl"] .vcal .cal .ev:hover{box-shadow:inset -3px 0 0 var(--c),0 0 0 1px var(--line-2)}
.vcal .cal .ev.need{background:var(--you-soft);color:var(--pink-ink)}
.vcal .cal .ev.late{color:var(--bad)}
.ef{flex:none;width:20px;height:24px;border-radius:6px;background:var(--tile-2) center/cover no-repeat}
.vcal .pips{display:none}
.vcal .agenda{display:none}
.vnodue{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:18px 22px 20px;margin-top:16px}
.vnodue h3{margin:0 0 12px;font-size:12.5px;font-weight:700;color:var(--ink-3);display:flex;gap:8px;align-items:baseline}
:root[lang="en"] .vnodue h3{text-transform:uppercase;letter-spacing:.09em}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chips2 a{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:4px 14px 4px 4px;border-radius:99px;background:var(--tile-2);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
[dir="rtl"] .chips2 a{padding:4px 4px 4px 14px}
.chips2 a:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.chips2 a .ef{width:26px;height:26px;border-radius:50%}
.chips2 a span:not(.ef){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips2 a i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}

/* empty states */
.vempty{position:relative;overflow:hidden;isolation:isolate;background:var(--hero);color:#fff;border-radius:var(--r-tile);padding:34px;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.vempty::before,.vempty::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;pointer-events:none;animation:ovfloat 18s ease-in-out infinite alternate}
.vempty::before{inset-inline-end:-140px;top:-220px;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.6}
.vempty::after{inset-inline-start:-160px;bottom:-280px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.55;animation-direction:alternate-reverse}
.vempty small{color:rgba(255,255,255,.6)}
.vempty h2{margin:8px 0 0;font:700 clamp(56px,6.4vw,100px)/.84 var(--display);color:#fff;text-wrap:balance}
.vempty p{margin:14px 0 0;max-width:60ch;color:rgba(255,255,255,.78);font-size:15.5px}
.vflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vflow li{display:flex;align-items:baseline;gap:10px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--hero-line)}
.vflow b{font:700 34px/.8 var(--display);color:var(--c)}
.vflow span{font-weight:600}
.vcta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;border-radius:99px;background:#fff;color:#0E0E10;font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s}
.vcta:hover{transform:translateY(-1px)}
.vcta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vnote{color:rgba(255,255,255,.7)!important}
.vnone{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:48px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.vnone b{font:700 44px/.9 var(--display)}
.vnone p{margin:4px 0 14px;color:var(--ink-2);max-width:52ch}

@media (max-width:1180px){
  .vtiles{gap:10px}
  .vtile{padding:14px;min-height:100px}
  .vtile b{font-size:42px}
  .vtile::after{inset-inline-end:14px;bottom:14px;width:20px}
  .vboard{gap:12px}
  .vboard .kcol{padding:10px}
  .vcal .cal .day{min-height:104px}
}
@media (max-width:1000px){
  .vtiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vboard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vboard .kcol{min-height:0}
}
@media (max-width:820px){
  .vcal .cal .ev span:last-child{display:none}
  .vcal .cal .ev{padding:3px;justify-content:center}
}
@media (max-width:700px){
  .vh .acts{width:100%}
  .vh .acts .vseg{flex:1}
  .vh .acts .vseg button{flex:1;justify-content:center;padding:0 8px}
  .vh .btn span{display:none}
  .vh .acts .btn{width:46px;height:46px;padding:0}
  .vtile{min-height:88px;padding:12px 14px;border-radius:20px;gap:10px}
  .vtile b{font-size:36px}
  .vtile .lb{font-size:12px}
  .vtile::after{display:none}
  .vtools{gap:8px}
  .vsearch{flex:1 1 100%}
  .vtools select.in{flex:1 1 140px;max-width:none}
  .vtools .sp{display:none}
  .vcount{flex:1 1 100%}
  .vboard{grid-template-columns:minmax(0,1fr)}
  .vboard .kb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .vboard .kb .kempty{grid-column:1/-1}
  .vcal{padding:16px 14px 18px}
  .vcal .cal{gap:3px}
  .vcal .cal .dh{padding:0 0 4px;text-align:center}
  .vcal .cal .dh .lg{display:none}
  .vcal .cal .dh .sh{display:inline}
  .vcal .cal .day{min-height:48px;border-radius:10px;padding:4px 2px;align-items:center;gap:3px}
  .vcal .cal .day .d{font-size:11px;height:20px;padding:0}
  .vcal .cal .day.today .d{min-width:20px;align-self:center}
  .vcal .cal .ev{display:none}
  .vcal .pips{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
  .vcal .pips i{width:6px;height:6px;border-radius:50%;background:var(--c)}
  .vcal .pips i.need{background:var(--pink);box-shadow:0 0 0 2px var(--you-soft)}
  .vcal .agenda{display:block;margin-top:16px}
  .vcal .agenda .ag{display:flex;align-items:center;gap:12px;padding:10px 6px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);position:relative}
  .vcal .agenda .ag.need::before{content:"";position:absolute;inset-block:14px;inset-inline-start:-6px;width:3px;border-radius:3px;background:var(--pink)}
  .vcal .agenda em{font:700 30px/1 var(--display);font-style:normal;width:34px;flex:none}
  .vcal .agenda .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .vcal .agenda b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vcal .agenda .vth{width:38px}
  .vcal-h h2{font-size:40px}
  .vnodue{padding:16px}
  .vempty{padding:24px 22px;min-height:0}
  .vflow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vcta{align-self:stretch;justify-content:center}
  .vnone b{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  .vempty::before,.vempty::after{animation:none!important}
  .vtile,.vboard .kcard{transition:none!important}
  .vtile:hover,.vboard .kcard:hover{transform:none}
}
.vtbl .tbl td.vm{white-space:nowrap}
@media (max-width:1280px){.vtbl .tbl .hide-l{display:none}}

/* =====================================================================================================
   10/15 "Studio bold" step 4 = ONE VIDEO (pages/video.js) + the REVIEW ROOM (pages/room.js, INSTRUCTIONS 3.6).
   Video page: black hero tile (title, facts, the one thing to do now) + the poster that opens the room, a stage track, pill tabs.
   Room: full screen, always dark: stage (video / voice / script) left, notes + Request changes + Approve right. .cfm = the ask-first dialog.
   ===================================================================================================== */
:root[data-page="video"] .top .newbrief{display:none}
/* hero */
.vph{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;margin:4px 0 16px}
.vph.wide{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.vph.nopo{grid-template-columns:minmax(0,1fr)}
.vph-main{position:relative;isolation:isolate;overflow:hidden;min-width:0;border-radius:var(--r-tile);background:var(--hero);color:#fff;padding:24px 28px 26px;display:flex;flex-direction:column;gap:14px;min-height:360px;box-shadow:var(--shadow)}
.vph-main::before,.vph-main::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;pointer-events:none;animation:ovfloat 18s ease-in-out infinite alternate}
.vph-main::before{inset-inline-end:-180px;top:-260px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.5}
.vph-main::after{inset-inline-end:120px;top:-300px;background:radial-gradient(circle,#6E717B,transparent 64%);opacity:.25;animation-direction:alternate-reverse}
.vph.you .vph-main::before{background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.72}
.vph.you .vph-main::after{background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.6}
.vph-top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px}
.vph-top small{font-size:12px;color:rgba(255,255,255,.62)}
.vph-plan{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:13px;font-weight:600;transition:background .2s;white-space:nowrap}
.vph-plan:hover{background:rgba(255,255,255,.2)}
.vph-plan svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vph h1{margin:0;font:700 clamp(54px,6vw,96px)/.84 var(--display);letter-spacing:0;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.vph-facts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:rgba(255,255,255,.72)}
.vph-facts .st.pill{background:rgba(255,255,255,.12);color:#fff}
.vph-facts .rounds i{background:rgba(255,255,255,.2)}.vph-facts .rounds i.u{background:#fff}
.vph-facts .rounds span{color:rgba(255,255,255,.72)!important}
#next{margin-top:auto}
.vnext{display:flex;flex-direction:column;gap:8px;max-width:66ch}
.vnext b{font-size:19px;font-weight:700;line-height:1.3}
.vnext p{margin:0;color:rgba(255,255,255,.78);font-size:14.5px}
.vlab{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff}
.vlab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#fff)}
.vnext.you .vlab{background:var(--pink)}
.vnext.you .vlab::before{background:#fff}
.vnext .go{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.vnext .go > *{height:46px;padding:0 20px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--ui);border:0;text-decoration:none;cursor:pointer;transition:transform .15s,background .2s,box-shadow .2s}
.vnext .go .pri{background:#fff;color:#0E0E10}
.vnext .go .pri:hover{transform:translateY(-1px)}
.vnext .go .ap{background:var(--pink);color:#fff;box-shadow:0 10px 30px -10px var(--pink)}
.vnext .go .ap:hover{box-shadow:0 0 0 4px rgba(255,79,163,.3)}
.vnext .go .gl{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vnext .go .gl:hover{background:rgba(255,255,255,.22)}
.vnext .go .ap:disabled{opacity:.5;cursor:default}
.vnext .go .wait{height:auto;padding:0;font-weight:500;color:rgba(255,255,255,.7);cursor:default}
.vnext .go svg.i{width:17px;height:17px}
.vph a:focus-visible,.vph button:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* poster */
.vph-po{position:relative;min-height:360px;border:0;padding:0;border-radius:var(--r-tile);overflow:hidden;background:#1B1C21 center/cover no-repeat;cursor:pointer;color:#fff;box-shadow:var(--shadow);transition:transform .25s}
.vph-po:disabled{cursor:default}
.vph-po .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6))}
.vph-po .pl{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(14,14,16,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;transition:transform .25s,background .25s}
.vph-po .pl svg.i{width:26px;height:26px;color:#fff}
.vph-po:not(:disabled):hover .pl{transform:scale(1.08);background:var(--pink)}
.vph-po .chip{position:absolute;inset-inline-start:16px;bottom:16px;height:auto;border:0;padding:5px 11px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* stage track */
.vjour{background:var(--tile);border-radius:22px;box-shadow:var(--shadow);padding:14px 18px;margin-bottom:6px}
.vjour .stepper{gap:6px;margin:0;scrollbar-width:none}
.vjour .stepper div{min-width:96px;border:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.vjour .stepper div i{display:block;height:6px;border-radius:6px;background:var(--tile-2)}
.vjour .stepper div.done{color:var(--ink-2)}
.vjour .stepper div.done i{background:var(--ink-3)}
.vjour .stepper div.on{color:var(--ink)}
.vjour .stepper div.on i{background:var(--c,var(--ink));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--ink)) 22%,transparent)}
/* pill tabs */
.vtabs{border:0;gap:6px;margin:14px 0 16px;padding:4px;background:var(--tile);border-radius:99px;box-shadow:var(--shadow);width:max-content;max-width:100%}
.vtabs a{border:0;margin:0;padding:9px 16px;border-radius:99px;color:var(--ink-2);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s}
.vtabs a:hover{background:var(--tile-2);color:var(--ink)}
.vtabs a.on{background:var(--inv);color:var(--inv-ink)}
.vtabs a .ct{background:var(--tile-2);border:0;color:var(--ink-2);margin:0;min-width:20px;text-align:center;font-weight:700}
.vtabs a.on .ct{background:var(--pink);color:#fff}
.vtabs.fs,.vtabs.fe{border-radius:99px}
/* the in-page player (Review tab): the room's dark look */
.player.rvp .vid{background:#08080A;border-radius:var(--r-tile);box-shadow:var(--shadow)}
.player.rvp video{max-height:64vh;background:#000}
.player.rvp .scrub .tr{background:rgba(255,255,255,.16);height:6px;border-radius:6px;top:11px}
.player.rvp .scrub .pl{background:#fff;height:6px;border-radius:6px;top:11px}
.player.rvp .scrub .mk{width:12px;height:12px;border-radius:50%;top:8px;transform:translateX(-6px);background:var(--pink);box-shadow:0 0 0 3px #08080A;cursor:pointer}
.player.rvp .scrub .mk.st{background:#4C8DFF}
.player.rvp .scrub .mk.res{background:#6E717B}
.player.rvp .vbar .btn{background:#fff;color:#0E0E10;width:40px;height:40px;padding:0;border-radius:50%}
.player.rvp .vbar .num{font-family:var(--mono);font-size:12.5px;color:#A6A9B2}
.player.rvp .thread{border-radius:var(--r-tile)}
#tab .toolbar .btn svg.i{width:16px;height:16px}

/* ---------- the review room ---------- */
body.rvopen{overflow:hidden}
.rvroom{position:fixed;inset:0;z-index:150;background:#08080A;color:#F2F3F5;display:flex;flex-direction:column;animation:dzfade .2s;color-scheme:dark;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.rvroom svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;max-width:none;max-height:none}
.rvroom button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.rvroom :focus-visible{outline:2px solid #4C8DFF;outline-offset:2px}
.rv-h{display:flex;align-items:center;gap:14px;padding:16px 20px;min-width:0}
.rv-h .ttl{min-width:0}
.rv-h small{display:block;font-size:12px;color:#8A8D95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-h h3{margin:2px 0 0;font:700 40px/.9 var(--display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-h .sp{flex:1}
.rv-h .lab{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:99px;background:var(--pink);color:#fff;white-space:nowrap}
.rv-h .lab::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.rvroom .x{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;flex:none;text-decoration:none;transition:background .2s}
.rvroom .x:hover{background:rgba(255,255,255,.16)}
.rv-modes{display:inline-flex;gap:2px;padding:4px;border-radius:99px;background:#16171B;flex:none}
.rv-modes button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:99px;font-size:13px;font-weight:700;color:#A6A9B2;transition:background .2s,color .2s}
.rv-modes button:hover{color:#fff}
.rv-modes button.on{background:#fff;color:#0E0E10}
.rv-modes svg.i{width:16px;height:16px}
.rv-b{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;padding:0 20px 20px}
.rv-stage{min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px}
.rv-screen{flex:1;min-height:240px;position:relative;border-radius:24px;background:#000;overflow:hidden}
.rv-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.rv-screen .big{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(255,255,255,.18)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;color:#fff;transition:opacity .25s,transform .25s}
.rv-screen .big svg.i{width:30px;height:30px}
.rv-screen .big:hover{transform:scale(1.06)}
.rv-screen .big.hide{opacity:0;pointer-events:none}
.rv-screen.m-voice{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:28px 32px;background:radial-gradient(120% 90% at 50% 0%,#1B1C21,#000 70%)}
.rv-vo{text-align:center;font:700 clamp(36px,4.6vw,72px)/.95 var(--display);color:#fff;text-wrap:balance;min-height:2em;display:flex;align-items:center;justify-content:center}
.rv-vo.fx{animation:dzin .45s cubic-bezier(.2,.8,.2,1)}
#rvW{display:block;width:100%;height:120px}
.rv-lines{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;direction:ltr}
.rv-lines button{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);font:500 13px var(--mono);color:#A6A9B2;transition:background .2s,color .2s}
.rv-lines button:hover{background:rgba(255,255,255,.16);color:#fff}
.rv-lines button.on{background:#fff;color:#0E0E10}
.rv-ctrl{display:flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;border-radius:99px;background:#16171B;direction:ltr}
.rv-ctrl .pp{width:44px;height:44px;border-radius:50%;background:#fff!important;color:#0E0E10!important;display:grid;place-items:center;flex:none}
.rv-ctrl .tcx{font-size:12.5px;color:#A6A9B2;white-space:nowrap}
.rv-ctrl .scrub{position:relative;flex:1;height:8px;margin:0;border-radius:8px;background:rgba(255,255,255,.14);cursor:pointer;min-width:60px}
.rv-ctrl .scrub > i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:#fff;width:0}
.rv-ctrl .scrub .mk{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--pink);border:3px solid #16171B;cursor:pointer;padding:0;transform:none}
.rv-ctrl .scrub .mk.st{background:#4C8DFF}
.rv-ctrl .scrub .mk.res{background:#6E717B}
.rv-ctrl .scrub .mk:hover{transform:scale(1.25)}
.rv-ctrl select{height:34px;border-radius:99px;background:#202127;color:#F2F3F5;border:0;padding:0 12px;font:600 12.5px var(--ui);cursor:pointer;max-width:150px}
/* script = a white page, one scene per shot */
.rv-screen.m-script{background:#1B1C21}
.rvroom .script{position:absolute;inset:0;overflow:auto;padding:28px;display:flex;justify-content:center}
.rvroom .paper{width:100%;max-width:700px;height:max-content;background:#fff;color:#0E0E10;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:6px}
.rvroom .paper small{font:500 11.5px var(--mono);color:#8A8D95}
.rvroom .paper h4{margin:0 0 10px;font:700 46px/.9 var(--display);color:#0E0E10}
.rvroom .sc{display:flex;gap:14px;width:100%;text-align:start;padding:14px 16px;border-radius:14px;border:1.5px solid transparent!important;color:#0E0E10;transition:background .2s,border-color .2s}
.rvroom .sc:hover{background:#F3F3F3}
.rvroom .sc.on{border-color:#FF4FA3!important;background:#FFF0F7}
.rvroom .sc:focus-visible{outline-offset:-2px}
.rvroom .sc .kf{flex:none;width:64px;aspect-ratio:9/16;border-radius:10px;background:#EDEDED center/cover no-repeat}
.rvroom .sc .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.rvroom .sn{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:#D42E85}
:root[lang="en"] .rvroom .sn{text-transform:uppercase;letter-spacing:.08em}
.rvroom .sn em{font-style:normal;font-weight:500;color:#8A8D95;letter-spacing:0}
.rvroom .sn .nc{font-style:normal;min-width:18px;height:18px;border-radius:99px;background:#FF4FA3;color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 5px;letter-spacing:0}
.rvroom .sc b{font-size:15px}
.rvroom .sc .a{margin:0;color:#55585F;font-size:13.5px}
.rvroom .sc .vl{margin:4px 0 0;font-size:16px;font-weight:600}
.rvroom .sc .os{margin:2px 0 0;font-size:13px;color:#55585F}
.rvroom .sc .os span{font-size:11px;font-weight:700;color:#8A8D95;margin-inline-end:4px}
/* notes */
.rv-side{min-height:0;display:flex;flex-direction:column;gap:12px;background:#16171B;border-radius:24px;padding:20px}
.rv-side h5{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;font-weight:700;color:#8A8D95}
:root[lang="en"] .rv-side h5 > span{text-transform:uppercase;letter-spacing:.09em}
.rv-side h5 small{font-size:12px;font-weight:600;color:#6E717B}
.rv-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}
.rvroom .note,.rvroom .sc{white-space:normal}
.rvroom .note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px;border-radius:16px;background:rgba(255,255,255,.05);text-align:start;color:#F2F3F5;width:100%;animation:dzin .3s cubic-bezier(.2,.8,.2,1)}
.rvroom .note:hover{background:rgba(255,255,255,.09)}
.rvroom .note:disabled{cursor:default}
.rvroom .note .ts{font:600 11.5px/1.5 var(--ui);padding:3px 8px;border-radius:7px;background:var(--pink);color:#fff;align-self:start;white-space:nowrap}
.rvroom .note.st .ts{background:#4C8DFF}
.rvroom .note.res{opacity:.55}
.rvroom .note.res .ts{background:#6E717B}
.rvroom .note .ts.mono{font-family:var(--mono);font-weight:500}
.rvroom .note .nt{min-width:0}
.rvroom .note b{font-size:12.5px}
.rvroom .note p{margin:2px 0 0;font-size:13.5px;color:#C9CBD1;overflow-wrap:anywhere}
.rv-empty{color:#8A8D95;font-size:13.5px;padding:4px 2px}
.rv-add{display:flex;gap:8px;background:#fff;border-radius:99px;padding:5px;padding-inline-start:16px;transition:box-shadow .2s}
.rv-add:focus-within{box-shadow:0 0 0 4px rgba(255,79,163,.35)}
.rv-add input{flex:1;min-width:0;border:0;outline:none;background:none;color:#0E0E10;font-size:14px;height:38px}
.rv-add input::placeholder{color:#6E717B}
.rv-add button{width:38px;height:38px;border-radius:50%;background:#0E0E10!important;color:#fff!important;display:grid;place-items:center;flex:none}
.rv-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rv-acts button{height:48px;border-radius:99px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}
.rv-acts .rq{background:rgba(255,255,255,.08)!important;color:#fff}
.rv-acts .rq:hover{background:rgba(255,255,255,.14)!important}
.rv-acts .rq.off{color:#8A8D95}
.rv-acts .okb{background:var(--pink)!important;color:#fff;box-shadow:0 10px 30px -10px var(--pink)}
.rv-acts .okb:hover{box-shadow:0 0 0 4px rgba(255,79,163,.3)}
.rv-acts .wait{display:grid;place-items:center;font-size:12.5px;color:#8A8D95;text-align:center}
.rv-side .hint{margin:-2px 0 0;font-size:12.5px;color:#8A8D95}
.rv-side .keys{margin:0;font:500 11px var(--mono);color:#55585F}
:root[lang="he"] .rv-side .keys{font-family:var(--ui)}

/* ---------- ask first ---------- */
.cfm{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:dzfade .18s}
.cfm .box{width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--tile);color:var(--ink);border-radius:24px;box-shadow:var(--shadow-lg);padding:24px;display:flex;flex-direction:column;gap:12px;animation:dzin .25s cubic-bezier(.2,.8,.2,1)}
.cfm h2{margin:0;font:700 40px/.92 var(--display);letter-spacing:0}
.cfm p{margin:0;color:var(--ink-2);font-size:14.5px}
.cfm .ls{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;padding:2px}
.cfm .ls .li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:14px;background:var(--tile-2)}
.cfm .ls .li span{font-size:11.5px;padding:2px 7px;border-radius:7px;background:var(--pink);color:#fff;align-self:start;white-space:nowrap}
.cfm .ls .li p{font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.cfm .ls .more{font-size:12.5px;color:var(--ink-3);padding:0 4px}
.cfm .ft{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.cfm .ft button{height:46px;padding:0 20px;border-radius:99px;border:0;font:700 14px/1 var(--ui);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.cfm .no{background:var(--tile-2);color:var(--ink)}
.cfm .yes{background:var(--inv);color:var(--inv-ink)}
.cfm .yes.pink{background:var(--pink);color:#fff;box-shadow:0 10px 30px -10px var(--pink)}
.cfm svg.i{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cfm :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cfm.dk{background:rgba(0,0,0,.6)}
.cfm.dk .box{background:#16171B;color:#F2F3F5;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.cfm.dk p{color:#A6A9B2}
.cfm.dk .ls .li{background:rgba(255,255,255,.06)}
.cfm.dk .ls .li p{color:#F2F3F5}
.cfm.dk .no{background:rgba(255,255,255,.08);color:#fff}
.cfm.dk .yes{background:#fff;color:#0E0E10}
.cfm.dk .yes.pink{background:var(--pink);color:#fff}

@media (max-width:1180px){
  .vph{grid-template-columns:minmax(0,1fr) 240px}
  .vph.wide{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
  .rv-b{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:900px){
  .rv-h{flex-wrap:wrap;padding:12px 16px}
  .rv-h .ttl{flex:1 1 0;order:0}
  .rv-h .lab{display:none}
  .rv-h .sp{display:none}
  .rv-modes{order:5;width:100%;justify-content:stretch}
  .rv-modes button{flex:1;justify-content:center}
  .rv-h h3{font-size:32px}
  .rv-b{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(300px,56vh) auto;overflow:auto;padding:0 16px 16px}
  .rv-side{min-height:auto}
  .rv-list{flex:none;max-height:none}
  .rv-side .keys{display:none}
}
@media (max-width:700px){
  .vph,.vph.wide{grid-template-columns:minmax(0,1fr)}
  .vph-main{padding:20px;min-height:0}
  .vph h1{font-size:clamp(46px,13vw,64px)}
  .vph-po{min-height:0;aspect-ratio:16/10}
  .vph-po .pl{width:60px;height:60px;margin:-30px 0 0 -30px}
  .vnext .go > *{flex:1 1 auto;justify-content:center;padding:0 16px}
  .vjour{padding:12px 14px}
  .vtabs{width:100%}
  .rv-screen.m-voice{padding:20px 16px;gap:18px}
  #rvW{height:84px}
  .rvroom .script{padding:12px}
  .rvroom .paper{padding:18px 14px}
  .rvroom .paper h4{font-size:36px}
  .rvroom .sc{padding:12px 10px;gap:10px}
  .rvroom .sc .kf{width:48px}
  .rv-ctrl{gap:10px;padding:12px 12px 8px;flex-wrap:wrap;border-radius:24px}
  .rv-ctrl .scrub{order:-1;flex:1 1 100%;margin:4px 6px 6px}
  .rv-ctrl .tcx{flex:1}
  .rv-ctrl .tcx{font-size:11.5px}
  .rv-ctrl select{max-width:96px;padding:0 8px}
  .rv-acts button{font-size:13.5px}
  .cfm{place-items:end center}
  .cfm .ft button{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.vph-main::before,.vph-main::after,.rvroom,.rvroom .note,.rv-vo.fx,.cfm,.cfm .box{animation:none!important}}
#page .vph-po .pl svg.i{width:26px;height:26px}
#page .vnext .go svg.i{width:17px;height:17px}
.player.rvp ~ * .cmpgrid video,.cmpgrid video{height:56vh;object-fit:contain}
@media (max-width:700px){.cmpgrid video{height:auto;aspect-ratio:9/16;max-height:60vh}}
.rv-add input:focus-visible{outline:none}
body.rvopen .toast{background:#fff;color:#0E0E10;bottom:calc(112px + env(safe-area-inset-bottom,0px));z-index:400}
body.rvopen .toast.bad{background:var(--bad);color:#fff}

/* =====================================================================================================
   10/15 "Studio bold" step 5 = the BRIEF (pages/brief.js) + the Overview's "which video?" picker (.ovpick, pages/home.js).
   Step 0: black hero (open drafts = pink "waiting for you", else how a brief works) + one tile with 01 brand / 02 video type / 03 title.
   Wizard: black head (title, saved, 7 step pills) · the step tile (big number, name, lead, body, back / next) · the brief so far.
   Errors sit under their field (.ferr + aria-invalid). Send is pink, asks first, then the sent screen (.bz-sent).
   ===================================================================================================== */
.bz svg.i,.ovpick svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;max-width:none;max-height:none}
.bz .btn{gap:8px}
#page .bz .btn svg.i{width:16px;height:16px}
.bz-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:rgba(255,255,255,.62);min-width:0}
.bz-crumb a{color:#fff;font-weight:600;text-decoration:none}
.bz-crumb a:hover{text-decoration:underline}
.bz-hero,.bz-wh,.bz-sent{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-tile);background:var(--hero);color:#fff;box-shadow:var(--shadow)}
.bz-hero::before,.bz-hero::after,.bz-wh::before,.bz-wh::after,.bz-sent::before,.bz-sent::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;pointer-events:none;animation:ovfloat 18s ease-in-out infinite alternate}
.bz-hero::before,.bz-sent::before{inset-inline-end:-160px;top:-240px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.55}
.bz-hero::after,.bz-sent::after{inset-inline-start:-180px;bottom:-320px;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.45;animation-direction:alternate-reverse}
.bz-hero.you::before,.bz-sent::before{background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.7}
.bz-hero.you::after,.bz-sent::after{background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.55}
.bz-wh::before{inset-inline-end:-200px;top:-330px;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.5}
.bz-wh::after{inset-inline-end:180px;top:-360px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.45;animation-direction:alternate-reverse}
.bz-hero a:focus-visible,.bz-hero button:focus-visible,.bz-wh a:focus-visible,.bz-wh button:focus-visible,.bz-sent a:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* step 0: which video */
.bz-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:32px;align-items:end;padding:26px 28px 28px;margin:4px 0 16px;min-height:320px}
.bz-hl{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;gap:18px}
.bz-hero h1{margin:auto 0 0;font:700 clamp(64px,6.6vw,108px)/.84 var(--display);letter-spacing:0;color:#fff;text-wrap:balance}
.bz-hero p{margin:0;color:rgba(255,255,255,.75);font-size:15.5px;max-width:54ch}
.bz-drafts{display:flex;flex-direction:column;gap:8px;min-width:0}
.bz-drafts .vlab{background:var(--pink);margin-bottom:4px}
.bz-draft{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;padding-inline-end:12px;border-radius:20px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--hero-line);color:#fff;text-decoration:none;transition:background .2s,transform .15s}
.bz-draft:hover{background:rgba(255,255,255,.15)}
.bz-draft .po{width:44px;aspect-ratio:4/5;border-radius:12px;background:rgba(255,255,255,.1) center/cover no-repeat}
.bz-draft .tx{min-width:0}
.bz-draft b{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-draft small{display:block;color:rgba(255,255,255,.62);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-draft .go{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:99px;background:#fff;color:#0E0E10;font-weight:700;font-size:13px;white-space:nowrap}
#page .bz-draft .go svg.i{width:15px;height:15px}
.bz-how{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bz-how li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;padding:13px 16px;border-radius:20px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--hero-line)}
.bz-how li span{grid-row:span 2;font:700 32px/1 var(--display);color:var(--pink)}
.bz-how b{font-size:15px;font-weight:700}
.bz-how small{color:rgba(255,255,255,.66);font-size:13px}
.bz-tile{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:6px 28px 0}
.bz-q{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.bz-q:first-child{border-top:0}
.bz-q > .n{font:700 52px/.8 var(--display);color:var(--ink);padding-top:2px}
.bz-q.bad > .n{color:var(--bad)}
.bz-q > div{display:flex;flex-direction:column;gap:8px;min-width:0}
.bz-q .qh{font:700 19px/1.25 var(--ui);color:var(--ink)}
.bz-q small{color:var(--ink-3);font-size:13.5px;margin-top:-4px}
.bz-q select.in,.bz-q input.in{max-width:520px;height:50px;font-size:15px;border-radius:16px}
.bz-types{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:4px}
.bz-q.bad .bz-types{border-radius:20px;box-shadow:0 0 0 2px var(--bad);padding:6px;margin-inline:-6px}
.bz-ft{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0 24px;border-top:1px solid var(--line)}
.bz-ft #err{color:var(--bad);font-size:13.5px;font-weight:600}
.bz-ft #err:empty{display:none}
.bz-ft .btn{margin-inline-start:auto}
/* field errors (any page in the brief) */
.ferr{margin:2px 0 0;display:flex;gap:8px;align-items:center;color:var(--bad);font-size:13px;font-weight:600;line-height:1.35}
.ferr:empty{display:none}
.ferr::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--bad);color:#fff;display:inline-grid;place-items:center;font:700 12px/1 var(--ui)}
.in[aria-invalid="true"],.in[aria-invalid="true"]:hover,.in[aria-invalid="true"]:focus{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 22%,transparent)}
/* a video type from the package (here and in the Overview picker) */
.tile.vtype{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border:0;border-radius:20px;background:var(--tile-2);box-shadow:none;color:var(--ink);text-align:start;min-height:96px;transition:background .2s,box-shadow .2s,transform .15s}
.tile.vtype:hover{background:var(--tile);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.tile.vtype[aria-pressed="true"]{background:var(--tile);box-shadow:inset 0 0 0 2px var(--ink)}
.tile.vtype:active{transform:scale(.99)}
.vtype .shape{width:52px;height:52px;display:grid;place-items:center}
.vtype .shape i{display:block;height:100%;width:auto;border-radius:8px;background:var(--line-2);transition:background .2s}
.vtype .shape i[style*="16/9"]{width:100%;height:auto}
.vtype[aria-pressed="true"] .shape i{background:var(--pink)}
.ovpick .vtype .tx,.vtype .tx{display:flex;flex-direction:column;gap:3px;padding:0;min-width:0}
.vtype .tx b{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.vtype .tx small{font-size:12.5px;color:var(--ink-3);font-weight:500}
.vtype .pr{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px;font-weight:600;color:var(--ink-2);margin-top:2px}
.vtype .pr em{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--ok-soft);color:var(--ok)}
.vtype .pr em.zero{background:var(--line);color:var(--ink-3)}
.ovpick .tile.vtype{border:0}
.ovpick .tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* wizard head */
.bz-wh{padding:20px 24px 18px;margin:4px 0 16px}
.bz-wtop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bz-sv{height:30px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.82);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.bz-sv::before{content:"";width:7px;height:7px;border-radius:50%;background:#4CC27A}
.bz-sv.busy::before{background:#E8C51C;animation:bzpulse .8s ease-in-out infinite alternate}
@keyframes bzpulse{to{opacity:.3}}
.bz-wh .wztitle{color:#fff;font:700 clamp(52px,5.4vw,84px)/.9 var(--display);letter-spacing:0;margin:12px -8px 16px;padding:4px 8px;width:calc(100% + 16px);border-radius:16px;border:1px solid transparent;background:none}
.bz-wh .wztitle::placeholder{color:rgba(255,255,255,.4)}
.bz-wh .wztitle:hover{border-color:var(--hero-line)}
.bz-wh .wztitle:focus{outline:none;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.55);box-shadow:0 0 0 3px rgba(76,141,255,.5)}
.bz-wh .wz{margin:0;padding:0;gap:6px;display:flex;overflow-x:auto;scrollbar-width:none}
.bz-wh .wz li{flex:1 1 auto;min-width:0}
.bz-wh .wz button{flex-direction:row;align-items:center;gap:9px;height:46px;padding:0;padding-inline:7px 14px;border:0;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background .2s,color .2s}
.bz-wh .wz button:hover{background:rgba(255,255,255,.15);color:#fff}
.bz-wh .wz .num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;font:700 13px/1 var(--ui);flex:none}
#page .bz-wh .wz .num svg.i{width:15px;height:15px;stroke-width:2.6}
.bz-wh .wz .nm{overflow:hidden;text-overflow:ellipsis;min-width:0}
.bz-wh .wz button.done{color:rgba(255,255,255,.9)}
.bz-wh .wz button.done .num{background:rgba(255,255,255,.9);color:#0E0E10}
.bz-wh .wz button.on{background:#fff;color:#0E0E10}
.bz-wh .wz button.on .num{background:var(--pink);color:#fff}
/* the step tile */
.bz .wzgrid{grid-template-columns:minmax(0,1fr) 330px;gap:16px}
.bz-sh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:end;padding:24px 28px 0!important}
.bz-n{font:700 76px/.78 var(--display);color:var(--ink)}
.bz-sh .t{min-width:0;display:flex;flex-direction:column;gap:2px}
.bz-sh small{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.bz-sh h2{margin:0;font:700 44px/.9 var(--display)!important;letter-spacing:0;color:var(--ink)}
.wzmain .lead2{margin:14px 28px 0;color:var(--ink-2);font-size:15px;max-width:64ch}
.bz .wzmain .bd{padding:22px 28px 30px;min-height:300px}
.bz .wznav{padding:14px 18px;border-top:1px solid var(--line);gap:12px;background:var(--tile)}
.bz .wznav #hint{flex:1;text-align:center;font-size:13px;color:var(--ink-3);min-width:0}
.bz .wznav .btn{white-space:nowrap}
.bz .wznav #next{max-width:62%;overflow:hidden;text-overflow:ellipsis}
.bz .field{gap:8px}
.bz-cc{font-weight:500;color:var(--ink-3)}
.bz-cc.y{color:var(--ok)}
/* the brief so far */
.bz .wzprev{padding:0 0 20px;top:16px}
.bz .wzprev .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:22px 24px 12px}
.bz-cnt{font:700 30px/.9 var(--display);color:var(--ink)}
.bz-meter{height:6px;border-radius:6px;background:var(--tile-2);margin:0 24px;overflow:hidden}
.bz-meter i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--pink));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bz-ok{margin:12px 24px 4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.bz-ok.y{color:var(--ok)}
.bz-parts{display:flex;flex-direction:column;padding:4px 12px}
.bz-part{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:0;border-radius:16px;background:none;text-align:start;color:var(--ink);cursor:pointer;font:inherit;transition:background .2s}
.bz-part:hover,.bz-part.on{background:var(--tile-2)}
.bz-part .ck{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;margin-top:1px}
.bz-part.done .ck{background:var(--inv);color:var(--inv-ink);box-shadow:none}
#page .bz-part .ck svg.i{width:13px;height:13px;stroke-width:2.8}
.bz-part .tx{min-width:0}
.bz-part b{display:block;font-size:13.5px;font-weight:700}
.bz-part small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--ink-3)}
.bz-strip{height:66px;margin:8px 24px 0;border-radius:14px;gap:3px;background:none}
.bz-strip a{border-radius:9px;background-color:var(--tile-2)}
.bz-cast{display:flex;gap:6px;margin:10px 24px 0;flex-wrap:wrap}
.bz-cast .th{width:38px;aspect-ratio:1;border-radius:50%;background:var(--tile-2) center/cover no-repeat}
/* shots */
.bz .sb.bz-shots{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.bz .sbc{background:var(--tile-2);box-shadow:none;border-radius:22px}
.bz .sbc .im{margin:8px 8px 0;border:0;border-radius:15px;max-height:230px;background-size:cover;background-color:var(--tile)}
.bz .sbc .tx{padding:10px 14px 14px}
.bz .sbc .tx .n{align-items:baseline;gap:8px}
.bz .sbc .tx .n b{display:flex;gap:8px;align-items:baseline;min-width:0;color:var(--ink);font-size:14px}
.bz .sbc .tx .n b span[dir]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz .sbc .k{font:700 24px/.8 var(--display);color:var(--ink-3)}
.bz .sbc .see{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2)}
.bz .sbc .acts{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.bz .sbc .acts [data-del]{color:var(--bad)}
.bz-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:240px;padding:16px;cursor:pointer;color:var(--ink);font:inherit;border:1.5px dashed var(--line-2)!important;border-radius:22px!important;background:none!important;box-shadow:none!important;transition:border-color .2s,background .2s}
.bz-add:hover{border-color:var(--ink)!important;background:var(--tile-2)!important}
.bz-add .pl{width:54px;height:54px;border-radius:50%;background:var(--inv);color:var(--inv-ink);display:grid;place-items:center;transition:transform .2s}
.bz-add:hover .pl{transform:scale(1.06)}
.bz-add b{font-size:14.5px}
.bz .subdots{gap:6px;margin:0 0 18px}
.bz .subdots i{height:6px;border-radius:6px;background:var(--tile-2)}
.bz .subdots .done i{background:var(--ink-3)}
.bz .shotmini{border-radius:18px;background:var(--tile-2);padding:10px 12px}
.bz .shotmini .im{border-radius:9px}
.bz-rm{position:absolute;top:-8px;inset-inline-end:-8px;width:26px!important;height:26px!important;min-height:0!important;border-radius:50%;background:var(--inv)!important;color:var(--inv-ink)!important;font-size:16px;line-height:1}
.bz .campv{border-radius:20px}
/* cast */
.bz-castg .vt{background:var(--tile-2);border-radius:22px;padding:8px 8px 12px;display:flex;flex-direction:column;gap:8px}
.bz-castg .vt .im{position:relative;border-radius:15px;background-color:var(--tile)}
.bz-addpic{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;color:var(--ink-3);font-size:13px;font-weight:600}
.bz-castg .vt .in{background:var(--tile)}
.bz-castg .seg{align-self:flex-start}
.bz-del{color:var(--bad)!important;align-self:flex-start}
.bz-castg .bz-add{min-height:240px}
/* materials */
.bz .dropz{gap:6px;padding:46px 16px;background:var(--tile-2);border:1.5px dashed var(--line-2);border-radius:var(--r-tile)}
.bz .dropz .pl{width:58px;height:58px;border-radius:50%;background:var(--inv);color:var(--inv-ink);display:grid;place-items:center;margin-bottom:8px}
.bz .dropz.on,.bz .dropz:hover{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--tile-2))}
.bz .dropz:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.bz-fls{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.bz-fls .r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--tile-2);font-size:14px;color:var(--ink-2)}
.bz-fls .r .ck{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;font-size:12px;font-weight:700}
#page .bz-fls .r .ck svg.i{width:13px;height:13px;stroke-width:2.8}
.bz-fls .r.bad{background:var(--bad-soft)}
.bz-fls .r.bad .ck{background:var(--bad)}
.bz-fls .r b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.bz-fls .r small{color:var(--ink-3);font-size:12.5px}
.bz-fls .r.bad small{color:var(--bad)}
/* review & send */
.bz-call{border-radius:22px;padding:18px 20px;margin-bottom:6px}
.bz-call.ok{background:var(--tile-2)}
.bz-call.miss{background:var(--bad-soft);box-shadow:inset 0 0 0 1.5px var(--bad);outline:none}
.bz-call.miss:focus-visible{box-shadow:inset 0 0 0 1.5px var(--bad),0 0 0 3px color-mix(in srgb,var(--bad) 30%,transparent)}
.bz-call > b{display:block;font-size:16px;color:var(--ink)}
.bz-call.miss > b{color:var(--bad)}
.bz-call p{margin:4px 0 0;color:var(--ink-2);font-size:14.5px}
.bz-call .go{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bz-call.flash{animation:bzflash .5s}
@keyframes bzflash{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.bz-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 0}
.bz-facts div{background:var(--tile);border-radius:14px;padding:10px 12px;min-width:0}
.bz-facts dt{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.bz-facts dd{margin:2px 0 0;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz .rv{padding:18px 0;border-top:1px solid var(--line)}
.bz .rv:first-of-type{border-top:1px solid var(--line)}
.bz .rvh b{font:700 28px/1 var(--display);letter-spacing:0}
.bz .rv .sb{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.bz .wznav #next.you{background:var(--pink);color:#fff;box-shadow:0 10px 30px -12px var(--pink)}
.bz .wznav #next.you:hover{box-shadow:0 0 0 4px rgba(255,79,163,.3)}
/* sent */
.bz-sent{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:44px 40px 40px;margin:4px 0 0;min-height:min(680px,calc(100vh - 120px))}
.bz-ok-ic{width:76px;height:76px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;box-shadow:0 20px 50px -14px var(--pink);animation:bzpop .55s cubic-bezier(.2,.8,.2,1.3) both}
#page .bz-ok-ic svg.i{width:36px;height:36px;stroke-width:2.6}
@keyframes bzpop{from{transform:scale(.4);opacity:0}}
.bz-sent > small{color:rgba(255,255,255,.62);font-size:13px;margin-top:10px}
.bz-sent h1{margin:0;font:700 clamp(80px,9.4vw,148px)/.8 var(--display);letter-spacing:0;color:#fff;outline:none}
.bz-sent > p{margin:0;font-size:17px;color:rgba(255,255,255,.78);max-width:58ch}
.bz-sent > p b{color:#fff}
.bz-sent .bz-how{flex-direction:row;max-width:1000px;margin-top:14px}
.bz-sent .bz-how li{flex:1 1 0;min-width:0}
.bz-sent .go{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.bz-sent .go a{height:52px;padding:0 24px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s,background .2s}
.bz-sent .go .pri{background:#fff;color:#0E0E10}
.bz-sent .go .pri:hover{transform:translateY(-1px)}
.bz-sent .go .gl{background:rgba(255,255,255,.14);color:#fff}
.bz-sent .go .gl:hover{background:rgba(255,255,255,.22)}
/* tablet & phone */
@media (max-width:1180px){.bz-hero{grid-template-columns:minmax(0,1fr)}.bz-hero h1{margin-top:8px}.bz .wzgrid{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:1000px){.bz .wzgrid{grid-template-columns:minmax(0,1fr)}.bz .wzprev{position:static;order:2}}
@media (max-width:820px){
  .bz-wh .wz{display:none}
  .bz .wznav #back[style*="hidden"]{display:none}
  .bz-hero{padding:22px 20px;min-height:0;gap:20px}
  .bz-hero h1{font-size:clamp(54px,15vw,76px)}
  .bz-tile{padding:2px 20px 0}
  .bz-q{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0}
  .bz-q > .n{font-size:34px}
  .bz-types{grid-template-columns:minmax(0,1fr)}
  .tile.vtype{min-height:0;padding:12px 14px}
  .bz-ft .btn{width:100%}
  .bz-wh{padding:16px 18px 18px}
  .bz-wh .wztitle{font-size:44px;margin:10px -8px 12px}
  .bz-wh .wzm{margin:0;gap:4px}
  .bz-wh .wzm .lbl b{color:#fff}
  .bz-wh .wzm .lbl span{color:rgba(255,255,255,.6)}
  .bz-wh .wzm .bar button{height:24px}
  .bz-wh .wzm .bar button i{height:5px;background:rgba(255,255,255,.18)}
  .bz-wh .wzm .bar button.done i{background:rgba(255,255,255,.7)}
  .bz-wh .wzm .bar button.on i{background:var(--pink)}
  .bz-sh{padding:20px 18px 0!important;gap:14px}
  .bz-n{font-size:56px}
  .bz-sh h2{font-size:36px!important}
  .wzmain .lead2{margin:10px 18px 0;font-size:14.5px}
  .bz .wzmain .bd{padding:18px 18px 24px;min-height:0}
  .bz .wznav{border-radius:22px 22px 0 0;background:var(--tile);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .bz .wznav #next{max-width:none}
  .bz .sb.bz-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bz-add{min-height:200px}
  .bz-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bz-sent{padding:30px 20px 26px;min-height:0}
  .bz-sent .bz-how{flex-direction:column}
  .bz-sent .go a{flex:1 1 auto;justify-content:center}
  .bz-draft .go{padding:0 12px}
}
@media (max-width:420px){.bz-draft{grid-template-columns:40px minmax(0,1fr)}.bz-draft .go{grid-column:1/-1;justify-content:center}}
@media (prefers-reduced-motion:reduce){.bz-hero::before,.bz-hero::after,.bz-wh::before,.bz-wh::after,.bz-sent::before,.bz-sent::after,.bz-ok-ic,.bz-call.flash,.bz-sv.busy::before{animation:none!important}.bz-meter i{transition:none}}
[dir="rtl"] .bz .kv2 dd{text-align:right}

/* =====================================================================================================
   10/15 "Studio bold" step 6 = BRANDS (pages/brands.js) + ONE BRAND (pages/brand.js).
   List: one tile per brand (cover tinted with the brand's main colour, logo + latest posters, Karantina name, palette bar, 5-mark brand kit);
   one brand = one wide tile; none = a black tile that says what a brand holds. Brand: black hero glowing in the brand colour + the brand kit tile,
   pill tabs, library in grouped tiles + "the look" (colours & fonts) aside with a sticky save bar, brand book page previews with drop-to-upload,
   cast portraits, files (send + what was sent), poster cards. Every empty section is one designed tile.
   ===================================================================================================== */
:root[data-page="brand"] .top .newbrief{display:none}
.brg svg.i,.bh svg.i,#tab svg.i,.br-none svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;max-width:none;max-height:none}
.cfm .yes.bad{background:var(--bad);color:#fff}
.bad{color:var(--bad)}
/* the logo tile (list, hero) */
.blogo{--s:56px;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .28);flex:none;display:grid;place-items:center;overflow:hidden;background:var(--p,var(--tile-2));box-shadow:inset 0 0 0 1px var(--line)}
.blogo.has{background:var(--p,#fff)}
.blogo img{max-width:74%;max-height:66%;object-fit:contain;display:block}
.blogo b{font:700 calc(var(--s) * .5)/1 var(--display);color:var(--k,var(--ink));letter-spacing:0;padding-top:.06em}

/* ---------- the list ---------- */
.brg{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.brt{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.brt:hover{transform:translateY(-2px);box-shadow:var(--shadow),0 0 0 1px var(--line-2)}
.brt-cv{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:16px;min-height:176px;margin:8px 8px 0;padding:22px;border-radius:22px;background:var(--tile-2)}
.brt-cv.tint{background:color-mix(in srgb,var(--bc) 15%,var(--tile-2))}
.brt-cv.tint::before{content:"";position:absolute;z-index:-1;inset-inline-end:-90px;bottom:-140px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--bc),transparent 66%);opacity:.5;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brt-cv:not(.tint)::before{content:"";position:absolute;z-index:-1;inset-inline-end:-90px;bottom:-140px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--blue),transparent 66%);opacity:.18;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brt:hover .brt-cv::before{transform:scale(1.15)}
.brt-cv .blogo{box-shadow:0 14px 30px -14px rgba(0,0,0,.4),inset 0 0 0 1px var(--line)}
.brt-po{margin-inline-start:auto;display:flex;align-items:center;padding-inline-end:6px}
.brt-po i{display:block;width:62px;aspect-ratio:4/5;border-radius:12px;background:var(--tile) center/cover no-repeat;box-shadow:0 10px 22px -10px rgba(0,0,0,.45),0 0 0 3px var(--tile);margin-inline-start:-16px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brt-po i:nth-child(1){transform:rotate(-6deg) translateY(4px)}
.brt-po i:nth-child(2){transform:translateY(-6px);z-index:1}
.brt-po i:nth-child(3){transform:rotate(6deg) translateY(4px);z-index:2}
.brt:hover .brt-po i:nth-child(1){transform:rotate(-10deg) translate(-4px,4px)}
.brt:hover .brt-po i:nth-child(3){transform:rotate(10deg) translate(4px,4px)}
.brt-you{position:absolute;top:12px;inset-inline-start:12px;font-style:normal;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--pink);color:#fff;white-space:nowrap}
.brt-bd{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 24px 22px;flex:1;min-width:0}
.brt-n{font:700 46px/.88 var(--display);letter-spacing:0;overflow-wrap:anywhere;max-width:100%}
.brt-pal{display:flex;width:100%;max-width:260px;height:10px;border-radius:99px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);margin-top:4px}
.brt-pal i{flex:1}
.brt-kit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.k5{display:inline-flex;gap:3px}
.k5 i{width:15px;height:6px;border-radius:6px;background:var(--tile-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.k5 i.on{background:var(--ink);box-shadow:none}
.brt-kit small{font-size:12.5px;color:var(--ink-3)}
.okk{display:inline-flex;gap:5px;align-items:center;color:var(--ok);font-weight:600}
#page .okk svg.i{width:14px;height:14px;stroke-width:2.4}
.brt-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-2);transition:gap .2s,color .2s}
.brt:hover .brt-go{gap:10px;color:var(--ink)}
/* one brand: one wide tile */
.brg.one{grid-template-columns:minmax(0,1fr)}
.brg.one .brt{flex-direction:row}
.brg.one .brt-cv{flex:0 0 min(40%,500px);min-height:300px;margin:8px;padding:32px}
.brg.one .brt-cv .blogo{--s:120px!important}
.brg.one .brt-po i{width:92px}
.brg.one .brt-bd{padding:30px 32px;justify-content:center}
.brg.one .brt-n{font-size:clamp(60px,6vw,92px)}
.brg.one .brt-kit{margin-top:14px}
/* no brand */
.br-none{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:32px;align-items:end;min-height:380px;padding:30px;border-radius:var(--r-tile);background:var(--hero);color:#fff;box-shadow:var(--shadow)}
.br-none::before,.br-none::after{content:"";position:absolute;z-index:-1;width:540px;height:540px;border-radius:50%;pointer-events:none;animation:ovfloat 18s ease-in-out infinite alternate}
.br-none::before{inset-inline-end:-160px;top:-260px;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.6}
.br-none::after{inset-inline-start:-200px;bottom:-340px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.55;animation-direction:alternate-reverse}
.br-none .vm{color:rgba(255,255,255,.62)}
.br-none h2{margin:10px 0 14px;font:700 clamp(60px,6.4vw,104px)/.84 var(--display);letter-spacing:0;color:#fff;text-wrap:balance}
.br-none p{margin:0 0 22px;color:rgba(255,255,255,.76);max-width:52ch;font-size:15px}
.br-none .brw{background:#fff;color:#0E0E10}
.br-none .brw:hover{box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.br-none button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.brn-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.brn-parts li{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brn-parts .mn{font-size:12px;color:var(--pink)}
.brn-parts b{font-size:15px;font-weight:700}
.brn-parts small{font-size:12.5px;color:rgba(255,255,255,.66)}

/* ---------- one brand: hero + brand kit ---------- */
.bh{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin:4px 0 0}
.bh-main{position:relative;isolation:isolate;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:16px;min-height:390px;padding:22px 28px 24px;border-radius:var(--r-tile);background:var(--hero);color:#fff;box-shadow:var(--shadow)}
.bh-main::before,.bh-main::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;border-radius:50%;pointer-events:none;animation:ovfloat 18s ease-in-out infinite alternate}
.bh-main::before{inset-inline-end:-190px;top:-280px;background:radial-gradient(circle,var(--bc,var(--blue)),transparent 64%);opacity:.7}
.bh-main::after{inset-inline-end:200px;bottom:-420px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.3;animation-direction:alternate-reverse}
.bh.you .bh-main::after{background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.45}
.bh-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;min-height:34px}
.bh-back,.bh-you{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s}
.bh-back:hover{background:rgba(255,255,255,.2)}
.bh-you{background:var(--pink);font-weight:700}
.bh-you:hover{box-shadow:0 0 0 4px rgba(255,79,163,.3)}
.bh-id{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:6px}
.bh-id .blogo{box-shadow:0 20px 40px -18px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.bh-lg{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bh-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font:600 12.5px/1 var(--ui);cursor:pointer;white-space:nowrap;transition:background .2s}
.bh-pill:hover{background:rgba(255,255,255,.24)}
.bh-pill.gh{background:none;color:rgba(255,255,255,.7)}
.bh-pill.gh:hover{background:rgba(255,255,255,.12);color:#fff}
.bh-pill.busy{opacity:.7;pointer-events:none}
.bh .pf{background:rgba(255,255,255,.14);color:#fff}
.bh h1{margin:auto 0 0;font:700 clamp(64px,7vw,116px)/.84 var(--display);letter-spacing:0;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.bh .bh-ph{display:block;margin:0}
.bh .bh-ph p{margin:0;color:rgba(255,255,255,.72);font-size:14px;max-width:none}
.bh-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bh-foot .sp{flex:1}
.bh-pal{display:inline-flex;gap:6px;flex-wrap:wrap}
.bh-pal i{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.bh-new{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:99px;background:#fff;color:#0E0E10;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:transform .15s}
.bh-new:hover{transform:translateY(-1px)}
.bh-main a:focus-visible,.bh-main button:focus-visible,.bh-main label:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bh-kit{display:flex;flex-direction:column;gap:8px;padding:22px 20px 14px}
.bk-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bk-hd h2{margin:0;font:700 15px/1.3 var(--ui)}
.bk-n{font:700 76px/.78 var(--display);color:var(--ink-3)}
.bk-n span{color:var(--ink)}
.bh-kit p{margin:0 0 4px;color:var(--ink-2);font-size:13.5px}
.bh-kit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kr{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:14px;background:none;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;text-align:start;transition:background .2s}
a.kr:hover,button.kr:hover{background:var(--tile-2)}
.ck{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.ck.on{background:var(--ink);color:var(--tile);box-shadow:none}
#page .ck svg.i{width:13px;height:13px;stroke-width:2.6}
.kn{flex:1;min-width:0}
.ka{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.kr:not(.ok) .ka{color:var(--pink-ink)}
.bh-tabs{margin:16px 0}

/* ---------- library ---------- */
.bl{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.bl-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.bl-side{display:flex;flex-direction:column;gap:16px;min-width:0;position:sticky;top:16px}
.bl-bar{position:sticky;top:12px;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:56px;padding:8px;padding-inline-start:20px;border-radius:99px;background:var(--tile);box-shadow:var(--shadow),0 10px 30px -18px rgba(0,0,0,.25)}
.bl-bar small{font-size:12.5px;color:var(--ink-3)}
.bl-bar .sp{flex:1}
.bl-sv{font-size:13.5px;font-weight:700;color:var(--ink)}
.bl-sv::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.bl-sv.pending::before,.bl-sv.saving::before{background:var(--blue);animation:blp 1s ease-in-out infinite}
.bl-sv.failed{color:var(--bad)}
.bl-sv.failed::before{background:var(--bad)}
@keyframes blp{50%{opacity:.25}}
.bl-ro{font-size:13.5px;font-weight:700}
.bl-fill{order:9;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--tile-2);padding:5px 11px;border-radius:99px;white-space:nowrap}
.bl-bar #sv{order:10}
.bl-pre{margin:0;padding:12px 18px;border-radius:18px;background:color-mix(in srgb,var(--blue) 10%,var(--tile));color:var(--ink-2);font-size:13.5px}
.bl-sec,.bl-look{padding:22px 24px 24px}
.bl-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.bl-h .mn{font-size:12px;color:var(--ink-3);padding-top:6px}
.bl-h h2{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:700 38px/.9 var(--display);letter-spacing:0}
.bl-h h2 .pf{font:600 11.5px/1.4 var(--ui)}
.bl-h p{margin:4px 0 0;color:var(--ink-2);font-size:13.5px}
.bl .grid-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.bl .field{gap:5px}
.bl .field .fl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink);font-size:13.5px;font-weight:700}
.bl .field small{font-size:12.5px}
.bl textarea.in{min-height:48px;max-height:360px;resize:vertical;field-sizing:content;line-height:1.55}
.bl .field.full textarea.in{min-height:92px}
.bl textarea.in:disabled{opacity:1;color:var(--ink);background:var(--tile-2);resize:none;cursor:default}
.bl-sec.rules .field.full{grid-column:auto}
.bl-sec.rules .field .fl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.bl-sec.rules .field[data-f="dont"] .fl::before{background:var(--bad)}
.bl .hl{animation:blhl 1.8s ease-out}
@keyframes blhl{0%,40%{box-shadow:0 0 0 3px var(--pink);border-radius:18px}}
.bl-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:14px 10px;margin-bottom:18px}
.bsw{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bsw .swatch{position:relative;display:grid;place-items:center;width:100%;height:auto;aspect-ratio:1;border:0;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:transform .2s}
.bsw .swatch:hover{transform:scale(1.04)}
.bsw .swatch[data-ro]{cursor:default;transform:none}
.bsw .swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:inherit}
.bsw .swatch:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.bsw .swatch em{position:absolute;bottom:6px;font-style:normal;font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;background:rgba(255,255,255,.92);color:#0E0E10;pointer-events:none}
.bsw .swatch.add{background:none;box-shadow:none;border:1.5px dashed var(--line-2);color:var(--ink-3)}
.bsw .swatch.add:hover{border-color:var(--ink-3);color:var(--ink)}
#page .bsw .swatch.add svg.i{width:20px;height:20px}
.bsw .mn{font-size:11px;color:var(--ink-2);text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bsw-x{position:absolute;top:-6px;inset-inline-end:-6px;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--tile);color:var(--ink-2);box-shadow:0 2px 8px rgba(0,0,0,.18),0 0 0 1px var(--line);opacity:0;transition:opacity .15s}
.bsw:hover .bsw-x,.bsw-x:focus-visible{opacity:1}
.bsw-x:hover{color:var(--bad)}
#page .bsw-x svg.i{width:12px;height:12px;stroke-width:2.4}
@media (hover:none){.bsw-x{opacity:1}}
.bl-none{grid-column:1/-1;margin:0;color:var(--ink-3);font-size:13.5px}
.bl-look .grid-form{grid-template-columns:minmax(0,1fr)}
.bl-where{padding:22px 24px}
.bl-where h2{margin:0 0 12px;font:700 15px/1.3 var(--ui)}
.bl-where ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:w}
.bl-where li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:1px 10px;counter-increment:w}
.bl-where li::before{content:counter(w,decimal-leading-zero);grid-row:span 2;font:500 12px/1.6 var(--mono);color:var(--ink-3)}
.bl-where b{font-size:13.5px}
.bl-where span{font-size:13px;color:var(--ink-2)}

/* ---------- brand book ---------- */
.bk .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:22px 24px 16px}
.bk .hd h2{margin:0;font:700 38px/.9 var(--display);letter-spacing:0}
.bk-lead{margin:6px 0 0;font-size:13.5px;color:var(--ink-2)}
.bk.drag{box-shadow:var(--shadow),inset 0 0 0 2px var(--blue)}
#uplab.busy,.bk-drop.busy,.bf-drop.busy{opacity:.6;pointer-events:none}
.bk .grid-thumbs.bk-g{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px 16px}
.bkf{position:relative;gap:10px}
.grid-thumbs .bkf .im,.bkf .im{display:block;position:relative;aspect-ratio:3/4;max-height:none;border:0;border-radius:16px;background:var(--tile-2) top center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.bkf .im:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(0,0,0,.45),inset 0 0 0 1px var(--line)}
.bk-pp{position:absolute;bottom:10px;inset-inline-end:10px;font-size:11px;color:#fff;background:rgba(0,0,0,.6);padding:2px 8px;border-radius:99px}
.bk-ext{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-3)}
#page .bk-ext svg.i{width:34px;height:34px;stroke-width:1.4}
.bk-ext b{font-size:13px;color:var(--ink-2)}
.bk-work{font-size:12px;animation:blp 1.2s ease-in-out infinite}
.bkf-t{display:flex;flex-direction:column;gap:2px;min-width:0;padding-inline-end:40px}
.bkf-t b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkf-x{position:absolute;bottom:2px;inset-inline-end:0;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--tile-2);color:var(--ink-2);transition:background .2s,color .2s}
.bkf-x:hover{background:var(--bad-soft);color:var(--bad)}
.bk-add{align-self:start;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--line-2);border-radius:16px;color:var(--ink-2);font-weight:600;font-size:13.5px;cursor:pointer;transition:border-color .2s,color .2s}
.bk-add:hover{border-color:var(--ink-3);color:var(--ink)}
#page .bk-add svg.i{width:22px;height:22px}
.bk-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:300px;padding:30px;border:1.5px dashed var(--line-2);border-radius:22px;background:var(--tile-2);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.bk-drop:hover,.bk.drag .bk-drop{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--tile-2))}
#page .bk-drop svg.i{width:40px;height:40px;stroke-width:1.4;color:var(--ink-2)}
.bk-drop b{font:700 38px/.95 var(--display);letter-spacing:0}
.bk-drop span{max-width:46ch;font-size:13.5px;color:var(--ink-3)}
/* inline empty / error inside a tile */
.bx-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 20px;text-align:center;color:var(--ink-3)}
.bx-empty b{color:var(--ink);font-size:15px}
.bx-empty span{max-width:46ch;font-size:13.5px}
#page .bx-empty svg.i{width:30px;height:30px;stroke-width:1.5}
.bx-err{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:var(--bad-soft);color:var(--bad)}
.bx-none{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px}
.bx-none b{font:700 44px/.9 var(--display)}
.bx-none p{margin:0 0 8px;color:var(--ink-2)}
/* a whole empty section: one designed tile */
.bx-emp{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:center;padding:30px}
.bx-emp h2{margin:0 0 10px;font:700 clamp(42px,4.2vw,60px)/.88 var(--display);letter-spacing:0;text-wrap:balance}
.bx-emp p{margin:0 0 18px;max-width:58ch;color:var(--ink-2);font-size:14.5px}
.bx-acts{display:flex;gap:8px;flex-wrap:wrap}
.bx-art{position:relative;height:210px}
.bx-art i{position:absolute;top:50%;left:50%;width:44%;aspect-ratio:4/5;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);
  background:radial-gradient(circle at 50% 40%,var(--ink-3) 0 15%,transparent 16%),radial-gradient(ellipse 46% 34% at 50% 100%,var(--ink-3) 0 99%,transparent 100%),var(--tile-2);opacity:.55}
.bx-art i:nth-child(1){transform:translate(-112%,-46%) rotate(-8deg)}
.bx-art i:nth-child(3){transform:translate(12%,-46%) rotate(8deg)}
.bx-art i:nth-child(2){z-index:1;opacity:1;transform:translate(-50%,-56%);box-shadow:0 18px 40px -18px rgba(0,0,0,.4),inset 0 0 0 1px var(--line);
  background:radial-gradient(circle at 50% 40%,#fff 0 15%,transparent 16%),radial-gradient(ellipse 46% 34% at 50% 100%,#fff 0 99%,transparent 100%),linear-gradient(160deg,var(--pink),var(--blue))}
.bx-art.v i{aspect-ratio:9/14;background:var(--tile-2)}
.bx-art.v i:nth-child(2){background:linear-gradient(160deg,var(--pink),var(--blue))}
.bx-art.v i:nth-child(2)::after{content:"";position:absolute;left:50%;top:50%;margin:-11px 0 0 -7px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}

/* ---------- cast ---------- */
.bc-load{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding:24px}
.bc-load .skel{aspect-ratio:4/5;border-radius:18px;animation:blp 1.4s ease-in-out infinite}
.bc{margin-bottom:16px}
.bc .hd h2{display:flex;align-items:center;gap:8px}
.bc-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 16px}
.bc-g.location{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.bc-g figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.bc-g .im{display:block;aspect-ratio:4/5;border-radius:18px;background:var(--tile-2) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line)}
.bc-g.location .im{aspect-ratio:16/10}
.bc-g figcaption{font:700 28px/.95 var(--display);letter-spacing:0;overflow-wrap:anywhere}
.bc-note{margin:0;color:var(--ink-3);font-size:13px}
.bc-note a{color:var(--ink);font-weight:600}

/* ---------- files ---------- */
.bf{display:grid;grid-template-columns:380px minmax(0,1fr);gap:16px;align-items:start}
.bf.ro{grid-template-columns:minmax(0,1fr)}
.bf-send .bd{display:flex;flex-direction:column;gap:12px}
.bf-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;border:1.5px dashed var(--line-2);border-radius:20px;background:var(--tile-2);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.bf-drop:hover,.bf-drop.drag{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--tile-2))}
#page .bf-drop svg.i{width:28px;height:28px;color:var(--ink-2)}
.bf-drop b{font-size:14.5px;color:var(--ink)}
.bf-drop span{font-size:12.5px;color:var(--ink-3)}
.bf-or{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3)}
.bf-or::before,.bf-or::after{content:"";flex:1;height:1px;background:var(--line)}
.bf-list .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bf-list #ff2{width:auto;max-width:240px;height:38px;border-radius:99px;font-size:13px}
.rows .row.bf-r{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start}
.bf-k{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--tile-2);color:var(--ink-2)}
.bf-k.k-audio{background:var(--you-soft);color:var(--pink-ink)}
.bf-k.k-image,.bf-k.k-video{background:color-mix(in srgb,var(--blue) 13%,var(--tile));color:var(--blue)}
#page .bf-k svg.i{width:20px;height:20px}
.bf-t{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.bf-t b{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.bf-p{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--tile-2);color:var(--ink-2);margin-top:2px}
.bf-x{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;padding:8px 12px;border-radius:12px;background:var(--tile-2);font-size:13px;color:var(--ink-2);max-width:100%}
.bf-s{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--warn);white-space:nowrap}
.bf-s i{width:8px;height:8px;border-radius:50%;background:currentColor}
.bf-s.ok{color:var(--ok)}

/* ---------- videos ---------- */
.bv-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.vt.bv{gap:8px;padding:8px 8px 14px;border-radius:24px;background:var(--tile);box-shadow:var(--shadow);color:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.vt.bv:hover{transform:translateY(-2px);box-shadow:var(--shadow),0 0 0 1px var(--line-2)}
.vt.bv.need{box-shadow:var(--shadow),inset 0 0 0 2px color-mix(in srgb,var(--pink) 55%,transparent)}
.vt.bv .im{display:block;position:relative;aspect-ratio:4/5;max-height:none;border:0;border-radius:18px;background:var(--tile-2) center/cover no-repeat}
.bv em{position:absolute;top:10px;inset-inline-start:10px;font-style:normal;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--pink);color:#fff}
.bv .fm{position:absolute;bottom:10px;inset-inline-end:10px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:6px}
.vt.bv b{padding:0 6px;font-size:15px}
.vt.bv small{padding:0 6px}

/* ---------- motion ---------- */
.page.enter .brg > *,.page.enter .bl-main > *,.page.enter .bl-side > *{animation:dzin .6s cubic-bezier(.2,.8,.2,1) backwards}
.page.enter .brg > :nth-child(2),.page.enter .bl-main > :nth-child(2),.page.enter .bl-side > :nth-child(2){animation-delay:.05s}
.page.enter .brg > :nth-child(3),.page.enter .bl-main > :nth-child(3){animation-delay:.1s}
.page.enter .brg > :nth-child(n+4),.page.enter .bl-main > :nth-child(n+4){animation-delay:.15s}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .bh{grid-template-columns:minmax(0,1fr)}
  .bh-kit ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 8px}
  .bl{grid-template-columns:minmax(0,1fr)}
  .bl-side{position:static;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .bf{grid-template-columns:minmax(0,1fr)}
  .brg.one .brt-cv{flex-basis:44%}
}
@media (max-width:700px){
  .brg{grid-template-columns:minmax(0,1fr)}
  .brt-cv{min-height:150px;padding:18px}
  .brt-po i{width:52px}
  .brt-bd{padding:16px 20px 20px}
  .brt-n{font-size:42px}
  .brg.one .brt{flex-direction:column}
  .brg.one .brt-cv{flex-basis:auto;min-height:190px;margin:8px 8px 0;padding:22px}
  .brg.one .brt-cv .blogo{--s:96px!important}
  .brg.one .brt-po i{width:64px}
  .brg.one .brt-bd{padding:18px 20px 22px}
  .brg.one .brt-n{font-size:56px}
  .br-none{grid-template-columns:minmax(0,1fr);gap:24px;padding:22px;min-height:0}
  .brn-parts{grid-template-columns:minmax(0,1fr)}
  .bh-main{min-height:0;padding:20px 20px 22px}
  .bh h1{font-size:clamp(54px,15vw,76px);margin-top:6px}
  .bh-id .blogo{--s:80px!important}
  .bh-new{width:100%;justify-content:center}
  .bh-foot .sp{display:none}
  .bh-kit ul{grid-template-columns:minmax(0,1fr)}
  .bl .grid-form{grid-template-columns:minmax(0,1fr)}
  .bl-sec.rules .field.full{grid-column:1/-1}
  .bl-side{grid-template-columns:minmax(0,1fr)}
  .bl-bar{border-radius:22px;padding:8px 8px 8px 16px;padding-inline-start:16px;top:8px}
  .bl-bar small{display:none}
  .bl-fill{display:none}
  .bl-sec,.bl-look,.bl-where{padding:20px}
  .bl-h h2{font-size:34px}
  .bk .hd{padding:20px}
  .bk .grid-thumbs.bk-g,.bv-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bk-drop{min-height:220px;padding:22px}
  .bc-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bc-g.location{grid-template-columns:minmax(0,1fr)}
  .bx-emp{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px}
  .bx-art{height:160px}
  .rows .row.bf-r{grid-template-columns:40px minmax(0,1fr)}
  .bf-k{width:40px;height:40px}
  .bf-s{grid-column:2}
  .bf-list #ff2{max-width:100%;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .br-none::before,.br-none::after,.bh-main::before,.bh-main::after,.bl-sv::before,.bk-work,.bc-load .skel,.bl .hl{animation:none!important}
  .page.enter .brg > *,.page.enter .bl-main > *,.page.enter .bl-side > *{animation:none!important}
  .brt,.brt-po i,.brt-cv::before,.bkf .im,.vt.bv,.bsw .swatch{transition:none!important}
}

/* =====================================================================================================
   10/15 "Studio bold" step 7 = TEAM (pages/team.js) · PACKAGE & BILLING (pages/billing.js) · NOTIFICATIONS (pages/notifications.js)
   · SETTINGS (pages/settings.js). Team: black head tile with the people as faces + white Invite pill, one People tile (table), roles
   matrix with my role lit. Package: the reference's black "Your package" box grown into a hero (gradient meter, per-type left, real
   states only: open / ending soon / used up / request sent with a 3-step track / none / ended) + builder rows with steppers, volume
   tiers lit by the count, black summary bar. Notifications: filter pills, grouped list with posters, pink unread, email summary aside.
   Settings: section rail + one tile per job (switches for emails, two-step sign-in block, red countdown tile while a delete is scheduled).
   ===================================================================================================== */
:root[data-page="team"] .top .newbrief,:root[data-page="billing"] .top .newbrief,:root[data-page="settings"] .top .newbrief{display:none}
.modal svg.i,.cfm svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.modal .btn svg.i{margin-inline-end:6px}
#page .btn svg.i{margin-inline-end:2px}
/* shared: a page this role cannot use */
.tm-lock{display:flex;gap:18px;align-items:center;padding:28px}
.tm-lk{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--tile-2);color:var(--ink-2)}
#page .tm-lk svg.i{width:22px;height:22px}
.tm-lock b{display:block;font-size:16px}
.tm-lock p{margin:4px 0 0;color:var(--ink-2)}
/* a black head tile (team, package): same glows as the Overview hero */
.tm-hero,.pk-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-tile);background:var(--hero);color:#fff;box-shadow:var(--shadow)}
.tm-hero::before,.tm-hero::after,.pk-hero::before,.pk-hero::after{content:"";position:absolute;z-index:-1;width:540px;height:540px;border-radius:50%;pointer-events:none;animation:ovfloat 18s ease-in-out infinite alternate}
.tm-hero::before,.pk-hero::before{inset-inline-end:-170px;top:-280px;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.55}
.tm-hero::after,.pk-hero::after{inset-inline-start:-180px;bottom:-360px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.55;animation-direction:alternate-reverse}
.tm-hero .vm,.pk-hero .vm{color:rgba(255,255,255,.62)}
.tm-hero button:focus-visible,.pk-hero button:focus-visible,.pk-sum button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- team ---------- */
.tm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:28px;align-items:end;min-height:300px;padding:26px 30px 28px;margin-bottom:16px}
.tm-hl{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.tm-hl h2{margin:6px 0 4px;font:700 clamp(60px,6.4vw,100px)/.84 var(--display);letter-spacing:0;color:#fff;text-wrap:balance}
.tm-hl > p{margin:0 0 6px;color:rgba(255,255,255,.76);max-width:52ch;font-size:15px}
.tm-big{display:flex;align-items:flex-end;gap:14px;margin-top:2px}
.tm-big b{font:700 clamp(110px,11vw,168px)/.76 var(--display);letter-spacing:0}
.tm-big span{font-size:16px;font-weight:600;color:rgba(255,255,255,.85);padding-bottom:10px}
.tm-big em{display:block;font-style:normal;font-weight:500;font-size:14px;color:rgba(255,255,255,.6)}
.tm-rl{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.tm-rl span{font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.88)}
.tm-inv{margin-top:12px;background:#fff;color:#0E0E10}
.tm-inv:hover{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.tm-faces{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-end;padding-inline-start:18px;row-gap:10px}
.tm-av{--s:40px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:grid;place-items:center;font:700 calc(var(--s) * .36)/1 var(--ui);color:#fff;background:linear-gradient(135deg,var(--blue),var(--pink))}
.tm-av.c1{background:linear-gradient(135deg,#1C9AA8,#1F6BFF)}
.tm-av.c2{background:linear-gradient(135deg,#E2B800,#FF4FA3)}
.tm-av.c3{background:linear-gradient(135deg,#2E8049,#1C9AA8)}
.tm-av.inv{background:none;color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--line-2);border:0;outline:1.5px dashed var(--ink-3);outline-offset:-1.5px}
.tm-faces .tm-av{--s:84px;margin-inline-start:-18px;box-shadow:0 0 0 4px var(--hero),0 18px 30px -16px rgba(0,0,0,.8);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tm-faces .tm-av.inv{color:rgba(255,255,255,.7);background:var(--hero);outline-color:rgba(255,255,255,.45)}
.tm-faces .tm-av.more{background:rgba(255,255,255,.14);font-size:22px}
.tm-faces .tm-av:hover{transform:translateY(-4px)}
.tm-why{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tm-why li{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tm-why .mn{font-size:12px;color:var(--pink)}
.tm-why b{font-size:15px}
.tm-why small{font-size:13px;color:rgba(255,255,255,.68)}
.tm-ppl{margin-bottom:16px}
.tm-ppl .hd,.tm-roles .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tm-ppl .hd h2 .vm{font-size:13px;margin-inline-start:4px}
.tm-wait{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:99px;background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue)}
.tm-wait::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tm-ppl .tblwrap{border:0;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--line)}
.tm-tbl th{background:var(--tile);position:static}
.tm-tbl th:first-child,.tm-tbl td:first-child{padding-inline-start:24px}
.tm-tbl th:last-child,.tm-tbl td:last-child{padding-inline-end:20px}
.tm-tbl td{padding-block:14px}
.tm-whoi{display:flex;align-items:center;gap:12px;min-width:220px}
.tm-nm{min-width:0}
.tm-nm b{font-size:14.5px;font-weight:600}
.tm-nm small{display:block;font-size:12.5px;color:var(--ink-3);text-align:start}
.tm-you{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--tile-2);color:var(--ink-2);vertical-align:2px}
.tm-rp{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:99px;font-size:12.5px;font-weight:700;white-space:nowrap;background:var(--tile-2);color:var(--ink-2)}
.tm-rp.r-owner{background:var(--inv);color:var(--inv-ink)}
.tm-rp.r-admin{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.tm-rp.r-producer{background:color-mix(in srgb,var(--st-making) 16%,transparent);color:color-mix(in srgb,var(--st-making) 70%,var(--ink))}
.tm-rp.r-approver{background:color-mix(in srgb,var(--st-plan) 22%,transparent);color:color-mix(in srgb,var(--st-plan) 45%,var(--ink))}
.tm-all{font-size:13.5px;color:var(--ink-2)}
.tm-brs{display:flex;flex-wrap:wrap;gap:4px}
.tm-brs span{font-size:12.5px;padding:2px 9px;border-radius:8px;background:var(--tile-2);color:var(--ink-2)}
.tm-last .vm{font-size:13px}
.tm-last small{display:block;margin-top:3px}
.tm-ip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap}
.tm-ip i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:tmp 1.6s ease-in-out infinite}
@keyframes tmp{50%{opacity:.35}}
.tm-act{text-align:end;white-space:nowrap}
.tm-act .btn{margin-inline-start:4px;gap:6px}
.tm-act .tm-cx{color:var(--bad)}
.tm-act .tm-cx:hover{background:var(--bad-soft);color:var(--bad)}
.tm-tbl tr.inv td{background:color-mix(in srgb,var(--blue) 4%,var(--tile))}
.tm-roles .hd .vm b{color:var(--ink)}
.tm-roles .tbl.roles th{background:var(--tile);position:static;text-align:center}
.tm-roles .tbl.roles th:first-child,.tm-roles .tbl.roles td:first-child{text-align:start;padding-inline-start:24px}
.tm-roles .tbl.roles td{text-align:center}
.tm-roles .tbl.roles td,.tm-roles .tbl.roles th{border-radius:0}
.tm-roles .tbl.roles .me{background:color-mix(in srgb,var(--blue) 7%,var(--tile))}
.tm-roles .tbl.roles th.me{color:var(--blue)}
.tm-y{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--inv);color:var(--inv-ink)}
#page .tm-y svg.i{width:13px;height:13px;stroke-width:2.6}
.tm-n{color:var(--ink-3)}
.tm-rh{color:var(--ink-2)!important;font-weight:500}
.tm-note{font-size:13px;color:var(--ink-3);margin:14px 0 0}
.modal .in[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}

/* ---------- package & billing ---------- */
.pk{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.pk-main,.pk-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.pk-hero{display:flex;flex-direction:column;gap:16px;min-height:340px;padding:24px 28px 26px}
.pk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pk-top h2{margin:0;font:700 15px/1.3 var(--ui);color:rgba(255,255,255,.88)}
.pk-st{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:99px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pk-st i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pk-hero .pk-st.ok{background:rgba(76,194,122,.18);color:#86E3A8}
.pk-hero .pk-st.you{background:var(--pink);color:#fff}
.pk-hero .pk-st.req{background:rgba(107,149,255,.2);color:#C3D3FF}
.pk-hero .pk-st.req i{animation:tmp 1.6s ease-in-out infinite}
.pk-hero .pk-st.off{background:rgba(255,255,255,.1);color:rgba(255,255,255,.72)}
.pk-big{display:flex;align-items:flex-end;gap:16px;margin-top:auto}
.pk-big b{font:700 clamp(120px,12vw,180px)/.76 var(--display);letter-spacing:0}
.pk-big span{font-size:17px;font-weight:600;color:rgba(255,255,255,.82);padding-bottom:12px;max-width:22ch}
.pk-hero.usedup .pk-big b{color:var(--pink)}
.pk-meter{display:block;height:10px;border-radius:10px;background:rgba(255,255,255,.14);overflow:hidden}
.pk-meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--pink));transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
[dir="rtl"] .pk-meter i{background:linear-gradient(270deg,var(--blue),var(--pink))}
.pk-used{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:-8px}
.pk-types{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pk-types li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pk-tn{font-size:14px;font-weight:600;min-width:0}
.pk-tl{font-size:12.5px;color:rgba(255,255,255,.7);white-space:nowrap}
.pk-tm{grid-column:1/-1;display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.pk-tm i{display:block;height:100%;border-radius:inherit;background:#fff}
.pk-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pk-foot .vm{font-size:13px}
.pk-foot .vm b{color:#fff;font-weight:600}
.pk-more{background:#fff;color:#0E0E10}
.pk-more:hover{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.pk-msg{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto}
.pk-msg > b{font:700 clamp(58px,6vw,92px)/.84 var(--display);letter-spacing:0;text-wrap:balance}
.pk-msg p{margin:0;color:rgba(255,255,255,.76);font-size:15px;max-width:56ch}
.pk-msg .pk-ln{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:14px}
.pk-msg .pk-ln b{font:700 30px/1 var(--display);color:#fff}
.pk-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pk-track li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7)}
.pk-track li b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.pk-track li small{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px}
.pk-dot{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.pk-dot b{font-size:11.5px!important;font-weight:500!important}
.pk-track li.done{color:#fff}
.pk-track li.done .pk-dot{background:#fff;color:#0E0E10;box-shadow:none}
#page .pk-dot svg.i{width:14px;height:14px;stroke-width:2.6}
.pk-track li.now{background:rgba(255,79,163,.16);color:#fff}
.pk-track li.now .pk-dot{background:var(--pink);box-shadow:0 0 0 0 rgba(255,79,163,.6);animation:pkr 2s ease-out infinite;color:#fff}
@keyframes pkr{70%{box-shadow:0 0 0 10px rgba(255,79,163,0)}100%{box-shadow:0 0 0 0 rgba(255,79,163,0)}}
.pk-pend{align-items:center}
.pk-dot2{width:12px;height:12px;border-radius:50%;flex:none;background:var(--st-brief);animation:tmp 1.6s ease-in-out infinite;margin-top:2px}
.pk-build .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pk-demo{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--warn-soft);color:var(--warn)}
.pk-tiers{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px 16px}
.pk-tiers span{display:flex;align-items:baseline;gap:8px;padding:7px 14px;border-radius:14px;background:var(--tile-2);color:var(--ink-2);transition:background .25s,color .25s}
.pk-tiers b{font:700 24px/1 var(--display);color:var(--ink)}
.pk-tiers small{font-size:12px;font-weight:600}
.pk-tiers span.on{background:var(--inv);color:var(--inv-ink)}
.pk-tiers span.on b{color:var(--inv-ink)}
.pk-list{list-style:none;margin:0;padding:0}
.pk-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:14px 24px;border-top:1px solid var(--line);transition:background .2s}
.pk-row.on{background:color-mix(in srgb,var(--blue) 5%,var(--tile))}
.pk-row .pk-tn b{display:block;font-size:15px;font-weight:600}
.pk-row .pk-tn small{display:block;margin-top:2px}
.pk-pr{text-align:end;white-space:nowrap}
.pk-pr b{display:block;font-size:16px;font-weight:700}
.pk-pr small{font-size:12px;color:var(--ink-3)}
.pk-step{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:99px;background:var(--tile-2);transition:background .2s}
.pk-step button{width:36px;height:36px;border-radius:50%;border:0;background:var(--tile);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .15s,opacity .2s}
.pk-step button:active{transform:scale(.92)}
.pk-step button:disabled{opacity:.35;cursor:default;transform:none}
.pk-step b{min-width:32px;text-align:center;font-size:16px;font-weight:700}
.pk-row.on .pk-step{background:var(--inv)}
.pk-row.on .pk-step b{color:var(--inv-ink)}
.pk-row.on .pk-step button{background:color-mix(in srgb,var(--inv-ink) 16%,transparent);color:var(--inv-ink);box-shadow:none}
.pk-sum{padding:16px 24px 20px;border-top:1px solid var(--line)}
.pk-sum p{margin:0;font-size:13.5px;color:var(--ink-3)}
.pk-sum.on{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:8px;padding:18px 22px;border:0;border-radius:22px;background:var(--hero);color:#fff;animation:dzin .35s cubic-bezier(.2,.8,.2,1)}
.pk-sum.on::before{content:"";position:absolute;z-index:-1;inset-inline-end:-120px;top:-160px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.45}
.pk-tot small{display:block;font-size:12.5px;color:rgba(255,255,255,.65)}
.pk-tot b{display:block;font:700 60px/.9 var(--display);margin:4px 0 2px}
.pk-tot s{color:rgba(255,255,255,.5)}
.pk-sum .pk-nt{flex:1;min-width:180px;margin:0;font-size:14px;color:rgba(255,255,255,.82)}
.pk-sum #go{background:#fff;color:#0E0E10;gap:8px}
.pk-sum #go:hover{box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.rows .row.pk-r{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:14px 24px}
.pk-r b{font-size:16px!important;font-weight:700}
.pk-r small{display:block;margin-top:3px;color:var(--ink-2)!important}
.pk-r small.vm{color:var(--ink-3)!important}
.pk-side .pk-st.ok{background:var(--ok-soft);color:var(--ok)}
.pk-side .pk-st.req{background:color-mix(in srgb,var(--st-brief) 14%,transparent);color:var(--st-brief)}
.pk-side .pk-st.off{background:var(--tile-2);color:var(--ink-3)}
.rows .row.pk-e{grid-template-columns:34px minmax(0,1fr) auto;padding:12px 24px}
.pk-ei{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--tile-2);color:var(--ink-2)}
#page .pk-ei svg.i{width:15px;height:15px}
.pk-ei.e-grant{background:var(--ok-soft);color:var(--ok)}
.pk-ei.e-offer{background:color-mix(in srgb,var(--st-brief) 14%,transparent);color:var(--st-brief)}
.pk-ei.e-use{background:color-mix(in srgb,var(--pink) 12%,transparent);color:var(--pink-ink)}
.pk-e b{font-weight:600!important}
.pk-none{padding:20px 24px;color:var(--ink-3);font-size:14px}

/* ---------- notifications ---------- */
.nt{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.nt-main{min-width:0}
.nt-f{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.nt-f button{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:0;border-radius:99px;background:var(--tile);color:var(--ink-2);font:600 13.5px/1 var(--ui);box-shadow:var(--shadow);cursor:pointer;transition:background .2s,color .2s}
.nt-f button span{font-size:12px;color:var(--ink-3)}
.nt-f button:hover{color:var(--ink);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.nt-f button.on{background:var(--inv);color:var(--inv-ink)}
.nt-f button.on span{color:var(--inv-ink);opacity:.7}
.nt-un{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--pink-ink)}
.nt-un i{width:8px;height:8px;border-radius:50%;background:var(--pink)}
.nt-g{padding:16px 24px 8px;font-size:12px;font-weight:700;color:var(--ink-3);border-top:1px solid var(--line)}
:root[lang="en"] .nt-g{text-transform:uppercase;letter-spacing:.09em}
.nt-card .rows > .nt-g:first-child{border-top:0}
.rows .row.nt-r{grid-template-columns:52px minmax(0,1fr) 10px;gap:14px;padding:12px 24px;border-top:0;color:var(--ink);position:relative}
.rows .nt-g + .row.nt-r{padding-top:6px}
.nt-th{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--tile-2) center/cover no-repeat;color:var(--ink-2)}
.nt-th.po{box-shadow:inset 0 0 0 1px var(--line)}
#page .nt-th svg.i{width:20px;height:20px}
.nt-th.k-video{background-color:color-mix(in srgb,var(--blue) 12%,var(--tile));color:var(--blue)}
.nt-th.k-comment{background-color:var(--you-soft);color:var(--pink-ink)}
.nt-th.k-billing{background-color:var(--ok-soft);color:var(--ok)}
.nt-tx{min-width:0}
.nt-s{display:block;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.rows .row .nt-s b{display:inline;font-size:inherit;font-weight:700}
.nt-tx small{display:block;margin-top:2px}
.nt-ud{width:9px;height:9px;border-radius:50%;background:var(--pink)}
.rows .row.nt-r.new{background:color-mix(in srgb,var(--pink) 5%,var(--tile))}
.rows .row.nt-r.new::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--pink)}
.rows a.row.nt-r:hover{background:var(--tile-2)}
.nt-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:64px 24px}
.nt-bell{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--tile-2);color:var(--ink-2);margin-bottom:6px}
#page .nt-bell svg.i{width:30px;height:30px}
.nt-empty b{font:700 40px/.9 var(--display)}
.nt-empty p{margin:0;color:var(--ink-2);max-width:46ch}
.nt-side{position:sticky;top:16px;min-width:0}
.nt-mail ul{list-style:none;margin:0;padding:0}
.nt-mail li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.nt-mail li i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}
.nt-mail li.on i{background:var(--ok)}
.nt-mail li span{flex:1;font-weight:600;font-size:14px}
.nt-mail li small{font-size:12.5px;color:var(--ink-3)}
.nt-mail li.on small{color:var(--ok);font-weight:600}
.nt-mail p{margin:14px 0 12px;font-size:13px;color:var(--ink-3)}

/* ---------- settings ---------- */
.sg{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.sg-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:var(--r-tile);background:var(--tile);box-shadow:var(--shadow)}
.sg-nav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:99px;background:none;color:var(--ink-2);font:600 13.5px/1.2 var(--ui);text-align:start;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.sg-nav button:hover{background:var(--tile-2);color:var(--ink)}
.sg-nav button.on{background:var(--inv);color:var(--inv-ink)}
.sg-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.sg-c{scroll-margin-top:16px}
.sg-c.hl{animation:sghl 1.4s ease-out}
@keyframes sghl{0%,30%{box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--blue) 45%,transparent)}}
.sg-prof{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:start}
.sg-av{width:96px;height:96px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--pink));color:#fff;font:700 50px/1 var(--display);padding-top:.08em}
.sg-prof .full{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sg-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sg-sec h3{margin:0 0 12px;font:700 15px/1.3 var(--ui)}
.sg-err{color:var(--bad);font-size:13px;min-height:18px}
.sg-2fa{padding:20px;border-radius:22px;background:var(--tile-2)}
.sg-2fa.on{background:var(--ok-soft)}
.sg-2h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sg-2h h3{margin:0 0 3px}
.sg-sh{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--tile);color:var(--ink)}
#page .sg-sh svg.i{width:20px;height:20px}
.sg-2fa.on .sg-sh{background:var(--ok);color:#fff}
.sg-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-3)}
.sg-pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.sg-pill.ok{color:var(--ok)}
.sg-mp{margin:0 0 14px;color:var(--ink-2);font-size:14px}
.sg-btns{display:flex;gap:8px;flex-wrap:wrap}
.sg-mail{display:flex;flex-direction:column}
.sg-sw{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.sg-sw span{flex:1;min-width:0}
.sg-sw b{display:block;font-size:14.5px;font-weight:600}
.sg-sw small{font-size:13px;color:var(--ink-3)}
.sg-sw i{display:none}
.sg-sw input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:48px;height:28px;margin:0;border-radius:99px;background:var(--line-2);cursor:pointer;transition:background .2s}
.sg-sw input::before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sg-sw input:checked{background:var(--blue)}
.sg-sw input:checked::before{transform:translateX(20px)}
[dir="rtl"] .sg-sw input::before{left:auto;right:3px}
[dir="rtl"] .sg-sw input:checked::before{transform:translateX(-20px)}
.sg-sw input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sg-mail > .vm{margin-top:12px}
.sg-lg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px}
.sg-lg button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px;border:0;border-radius:20px;background:var(--tile-2);color:var(--ink);cursor:pointer;text-align:start;transition:background .2s,color .2s}
.sg-lg button b{font:700 34px/.9 var(--display)}
.sg-lg button small{font-size:12.5px;color:var(--ink-3)}
.sg-lg button.on{background:var(--inv);color:var(--inv-ink)}
.sg-lg button.on small{color:var(--inv-ink);opacity:.7}
.sg-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
.sg-facts div{padding:14px 16px;border-radius:18px;background:var(--tile-2);min-width:0}
.sg-facts dt{font-size:12px;font-weight:600;color:var(--ink-3)}
.sg-facts dd{margin:4px 0 0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.sg-facts dd.n{font:700 48px/.86 var(--display)}
.sg-data{display:flex;flex-direction:column}
.sg-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.sg-row:first-child{border-top:0;padding-top:4px}
.sg-ri{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--tile-2);color:var(--ink-2)}
#page .sg-ri svg.i{width:18px;height:18px}
.sg-row.bad .sg-ri{background:var(--bad-soft);color:var(--bad)}
.sg-row.bad b{color:var(--bad)}
.sg-row b{display:block;font-size:15px;font-weight:600}
.sg-row small{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.sg-ex{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.sg-ex li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.sg-ex li i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.sg-ex li.x-working i{background:var(--blue);animation:tmp 1.4s ease-in-out infinite}
.sg-ex li.x-done i{background:var(--ok)}
.sg-ex li.x-failed i{background:var(--bad)}
.sg-ex .mn{font-size:12px;color:var(--ink-3)}
.sg-sched{font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:99px;background:var(--bad-soft);color:var(--bad);white-space:nowrap}
.sg-out{display:flex;gap:10px;flex-wrap:wrap}
.sg-del{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 28px;border-radius:var(--r-tile);background:color-mix(in srgb,var(--bad) 11%,var(--tile));box-shadow:var(--shadow),inset 0 0 0 1.5px color-mix(in srgb,var(--bad) 35%,transparent)}
.sg-del .vm{color:var(--bad);font-weight:700}
.sg-dn{display:flex;align-items:flex-end;gap:12px;margin:6px 0 8px}
.sg-dn b{font:700 clamp(96px,9vw,132px)/.76 var(--display);color:var(--bad)}
.sg-dn span{font-size:16px;font-weight:600;padding-bottom:8px}
.sg-del p{margin:0;color:var(--ink-2);max-width:58ch}
.sg-del .btn{gap:8px}
/* modals: two-step setup, codes, delete */
.sg-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sg-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.sg-steps .mn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tile-2);font-size:11.5px;color:var(--ink-2)}
.sg-steps p{margin:4px 0 8px;color:var(--ink-2);font-size:14px}
.sg-steps .qr{display:inline-flex;padding:10px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(14,14,16,.08)}
.sg-steps .qr svg{width:180px;height:180px}
.sg-key{font-size:12.5px!important;color:var(--ink-3)!important}
.sg-key code{display:block;margin-top:6px;padding:10px 12px;border-radius:12px;background:var(--tile-2);color:var(--ink);font:500 13.5px/1.4 var(--mono);word-break:break-all;user-select:all}
.modal .in.code{font:600 20px/1 var(--mono);letter-spacing:.2em;text-align:center}
.sg-done{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--ok);font-weight:700}
.sg-cb{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.sg-cb .btn{gap:6px}
.codes span{padding:6px 8px;border-radius:10px;background:var(--tile);text-align:center}
.sg-dm p{margin:0 0 14px;color:var(--ink-2)}
.sg-dm .field b{color:var(--ink)}
.sg-dgo{background:var(--bad);color:#fff;gap:8px}
.sg-dgo:hover{background:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}

/* ---------- motion ---------- */
.page.enter .pk-main > *,.page.enter .pk-side > *,.page.enter .sg-main > *,.page.enter .nt-main > *,.page.enter .nt-side > *{animation:dzin .6s cubic-bezier(.2,.8,.2,1) backwards}
.page.enter .pk-main > :nth-child(2),.page.enter .pk-side > :nth-child(2),.page.enter .sg-main > :nth-child(2),.page.enter .nt-main > :nth-child(2){animation-delay:.05s}
.page.enter .pk-main > :nth-child(3),.page.enter .sg-main > :nth-child(3){animation-delay:.1s}
.page.enter .sg-main > :nth-child(n+4){animation-delay:.15s}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pk,.nt{grid-template-columns:minmax(0,1fr)}
  .pk-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .nt-side{position:static}
  .sg{grid-template-columns:minmax(0,1fr)}
  .sg-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;border-radius:99px;padding:6px}
  .sg-nav::-webkit-scrollbar{display:none}
  .sg-nav button{flex:none}
  .sg-sec{grid-template-columns:minmax(0,1fr)}
  .tm-hero{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .tm-faces .tm-av{--s:72px}
  .tm-last{white-space:nowrap}
}
@media (max-width:900px){
  .tm-tbl .tm-acc{display:none}
}
@media (max-width:700px){
  .tm-hero{grid-template-columns:minmax(0,1fr);gap:22px;min-height:0;padding:22px}
  .tm-faces{justify-content:flex-start;order:-1;padding-inline-start:18px}
  .tm-faces .tm-av{--s:58px;margin-inline-start:-14px;box-shadow:0 0 0 3px var(--hero)}
  .tm-hero.solo .tm-hl{order:-1}
  .tm-inv{width:100%;justify-content:center}
  .tm-big b{font-size:112px}
  .tm-tbl thead{display:none}
  .tm-tbl,.tm-tbl tbody{display:block}
  .tm-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
  .tm-tbl tr:last-child{border-bottom:0}
  .tm-tbl td{display:block;padding:0!important;border:0!important;background:none!important}
  .tm-tbl .tm-who{grid-column:1/-1;min-width:0}
  .tm-whoi{min-width:0}
  .tm-tbl .tm-role{grid-column:1;grid-row:2}
  .tm-tbl .tm-last{grid-column:2;grid-row:2;text-align:end;white-space:normal}
  .tm-tbl .tm-acc{display:block;grid-column:1/-1;grid-row:3}
  .tm-tbl .tm-act{grid-column:1/-1;grid-row:4;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;white-space:normal}
  .tm-tbl .tm-act .btn{margin:0}
  .tm-tbl tr.inv{background:color-mix(in srgb,var(--blue) 4%,var(--tile))}
  .tm-roles .tbl.roles th:first-child,.tm-roles .tbl.roles td:first-child{padding-inline-start:14px}
  .tm-roles .hd .vm{width:100%}
  .tm-lock{flex-direction:column;align-items:flex-start;padding:22px}
  .pk-hero{min-height:0;padding:20px 20px 22px;gap:14px}
  .pk-big b{font-size:116px}
  .pk-big span{font-size:15px;padding-bottom:8px}
  .pk-track{grid-template-columns:minmax(0,1fr);gap:8px}
  .pk-types{grid-template-columns:minmax(0,1fr)}
  .pk-msg > b{font-size:clamp(52px,15vw,72px)}
  .pk-more{width:100%;justify-content:center}
  .pk-side{grid-template-columns:minmax(0,1fr)}
  .pk-tiers{padding:0 20px 14px;gap:6px}
  .pk-tiers span{padding:6px 10px}
  .pk-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:14px 20px}
  .pk-row .pk-tn{grid-column:1/-1}
  .pk-pr{text-align:start}
  .pk-pr b,.pk-pr small{display:inline}
  .pk-pr small{margin-inline-start:4px}
  .pk-sum{padding:14px 20px 18px}
  .pk-sum.on{gap:12px;padding:18px}
  .pk-sum #go{width:100%;justify-content:center}
  .rows .row.pk-r,.rows .row.pk-e{padding-inline:20px}
  .rows .row.pk-r{grid-template-columns:minmax(0,1fr)}
  .rows .row.pk-r .pk-st{justify-self:start;grid-row:1}
  .nt-f{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 4px}
  .nt-f::-webkit-scrollbar{display:none}
  .nt-f button{flex:none}
  .nt-un{display:none}
  .rows .row.nt-r{grid-template-columns:44px minmax(0,1fr) 10px;gap:12px;padding:12px 18px}
  .nt-th{width:44px;height:44px;border-radius:13px}
  .nt-g{padding-inline:18px}
  .sg-nav{margin-inline:-16px;border-radius:0;background:none;box-shadow:none;padding:0 16px}
  .sg-nav button{background:var(--tile);box-shadow:var(--shadow)}
  .sg-nav button.on{background:var(--inv)}
  .sg-prof{grid-template-columns:minmax(0,1fr);gap:16px}
  .sg-av{width:72px;height:72px;border-radius:24px;font-size:38px}
  .sg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-row{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .sg-ri{width:40px;height:40px}
  .sg-row > .btn,.sg-row > .sg-sched{grid-column:2;justify-self:start}
  .sg-del{padding:20px}
  .sg-del .btn{width:100%;justify-content:center}
  .sg-out .btn{flex:1 1 auto;justify-content:center}
  .sg-lg button b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .tm-hero::before,.tm-hero::after,.pk-hero::before,.pk-hero::after,.tm-ip i,.pk-st.req i,.pk-track li.now .pk-dot,.pk-dot2,.sg-ex li.x-working i,.sg-c.hl,.pk-sum.on{animation:none!important}
  .page.enter .pk-main > *,.page.enter .pk-side > *,.page.enter .sg-main > *,.page.enter .nt-main > *,.page.enter .nt-side > *{animation:none!important}
  .pk-meter i,.sg-sw input::before,.tm-faces .tm-av{transition:none!important}
}

/* =====================================================================================================
   10/15 "Studio bold" step 8 = SIGN-IN (app.js loginShell: password · email code · two-step · reset · set password · no studio),
   SIGN-UP (/start/: studio/start.html + start.js) and the GUEST REVIEW page (/review/<token>: app/review.html + review.js).
   .lg8 = the frame both sign-in and sign-up use: a black hero tile (glows, "Your studio.") + the form side (theme + language pills, the form tile).
   .su8 = sign-up additions (numbered section tiles, the code step, hero steps that light up). .gr = guest review (the room's dark stage on the page theme).
   All follow the theme (system / light / dark): /start/ and /review/ load theme.js in <head>.
   ===================================================================================================== */
.login.lg8{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px;min-height:100vh;min-height:100dvh;background:var(--bg)}
.lg8 .art{margin:0;position:sticky;top:16px;height:calc(100vh - 32px);height:calc(100dvh - 32px);min-height:560px;border-radius:var(--r-tile);background:var(--hero);color:#fff;
  padding:36px 44px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;box-shadow:var(--shadow)}
.lg8 .art::before,.lg8 .art::after{animation:ovfloat 18s ease-in-out infinite alternate;pointer-events:none}
.lg8 .art::after{animation-direction:alternate-reverse}
.lg-logo{font:700 40px/1 var(--display);letter-spacing:.03em;color:#fff}
.lg8 .art h2{font:700 clamp(84px,9vw,148px)/.82 var(--display);margin:0 0 18px;color:#fff;letter-spacing:0}
.lg8 .art p{margin:0;color:rgba(255,255,255,.74);font-size:16px;max-width:38ch}
.lg-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lg-flow li{display:flex;flex-direction:column;gap:4px;min-width:0}
.lg-flow li i{display:block;height:5px;border-radius:5px;background:var(--c);margin-bottom:8px}
.lg-flow small{font-size:11.5px;color:rgba(255,255,255,.5)}
.lg-flow b{font-size:15px;font-weight:700}
.lg-flow span{font-size:12.5px;color:rgba(255,255,255,.62)}
.lg8 .form{display:flex;align-items:center;justify-content:center;padding:8px 8px 8px;min-width:0}
.lg-col{width:100%;max-width:460px;display:flex;flex-direction:column;gap:14px;min-width:0}
.lg-bar{display:flex;align-items:center;gap:8px;min-height:46px}
.lg-bar .sp{flex:1}
.lg-bar .mlogo{display:none}
.lg-bar .seg,.gr-top .seg{background:var(--tile);box-shadow:var(--shadow)}
.lg-bar .seg button.on,.gr-top .seg button.on{background:var(--inv);color:var(--inv-ink);box-shadow:none}
.lg-bar .seg button,.gr-top .seg button{min-height:34px;min-width:34px}
.seg .l-s{display:none}
.login.lg8 form.lg-card,.lg-card{width:100%;max-width:none;background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:34px 36px 30px;display:flex;flex-direction:column;gap:14px;animation:dzin .5s cubic-bezier(.2,.8,.2,1)}
.lg-card > .btn{width:100%}
.lg-card > .btn.lg{margin-top:4px}
.lg-card > .btn.ghost{height:auto;min-height:40px;white-space:normal;line-height:1.35;padding:8px 14px}
.lg8 h1{font:700 68px/.86 var(--display);margin:0;letter-spacing:0;color:var(--ink);text-wrap:balance}
.lg-k{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--pink-ink);margin-bottom:-4px}
.lg-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink)}
:root[lang="en"] .lg-k{text-transform:uppercase;letter-spacing:.09em;font-size:11.5px}
.lg-lead{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.lg-lead b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.lg-ic{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue) 12%,var(--tile));color:var(--blue);flex:none}
.lg-ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lg-ic.ok{background:var(--ok-soft);color:var(--ok)}
.lg-hint{margin:-4px 0 0;font-size:12.5px;color:var(--ink-3)}
.lg-err:empty{display:none}
.lg-err:not(:empty){display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--bad-soft);color:var(--bad);font-size:13.5px;font-weight:600;line-height:1.45;min-height:0;animation:dzin .3s cubic-bezier(.2,.8,.2,1)}
.lg-err svg{width:18px;height:18px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.lg-err a{color:inherit;font-weight:700}
.lg8 .in[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft);background:var(--tile)}
.lg8 .in{height:48px}
.lg8 textarea.in{height:auto;min-height:88px}
.lg-pw{position:relative;display:block}
.lg-pw .in{width:100%;padding-right:50px}
.lg-pw .eye{position:absolute;right:5px;top:50%;margin-top:-19px;width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.lg-pw .eye:hover{background:var(--tile);color:var(--ink)}
.lg-pw .eye svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg8 .in.code{height:64px!important;font:500 28px/1 var(--mono)!important;letter-spacing:.42em;text-align:center;padding:0 0 0 .42em}
.lg8 .in.code::placeholder{color:var(--line-2)}
.lg-or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12.5px}
.lg-or span{flex:1;height:1px;background:var(--line)}
.btn.lg-g,.btn.gbtn{display:flex;gap:10px;justify-content:center;align-items:center;text-decoration:none}
.lg-new{margin:2px 0 0;text-align:center;font-size:13.5px;color:var(--ink-2)}
.lg-new a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.lg-foot{margin:0;text-align:center;font-size:12px;color:var(--ink-3)}
.lg8 a:focus-visible,.lg8 button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* ---- sign-up (/start/) ---- */
.su8 .su-col{max-width:660px}
.su8 .form{align-items:flex-start;padding-top:8px}
.su-head{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.su-head h1{font-size:clamp(68px,6.4vw,96px)}
.login.su8 #f{max-width:none;width:100%;display:flex;flex-direction:column;gap:14px}
.su-fs{border:0;margin:0;padding:22px 26px 24px;background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);min-width:0;display:block}
.su-fs legend{float:inline-start;width:100%;padding:0;display:flex;align-items:center;gap:14px}
.su-fs legend > i{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--tile-2);color:var(--ink);font-style:normal;font-size:13px;font-weight:500}
.su-fs legend span{display:flex;flex-direction:column;min-width:0}
.su-fs legend b{font-size:16px;font-weight:700;color:var(--ink)}
.su-fs legend small{font-size:12.5px;color:var(--ink-3);font-weight:400}
.su-b{clear:both;display:grid;gap:14px;padding-top:16px;min-width:0}
.su8 .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.su8 .field{min-width:0}
.su8 .field > span:first-child{font-weight:600}
.su8 .req b{color:var(--pink-ink);font-weight:700}
.su8 .hint{font-size:12px;color:var(--ink-3);font-weight:400}
.su8 .ferr:empty{display:none}
.su-code{box-shadow:var(--shadow),inset 0 0 0 2px var(--pink);background:color-mix(in srgb,var(--pink) 5%,var(--tile));animation:dzin .45s cubic-bezier(.2,.8,.2,1)}
.su-code legend > i{background:var(--pink);color:#fff}
.su-code legend > i svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.su-code legend small{color:var(--ink-2);font-size:13.5px}
.su-code legend small b{color:var(--ink)}
.su-code .field{max-width:340px}
.login.su8 #f > .btn.lg{align-self:flex-start;min-width:280px;height:56px;font-size:16px}
.su-steps{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:14px}
.su-steps li{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.62);font-size:15px}
.su-steps li i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.3);font:500 13px var(--mono);font-style:normal;transition:background .3s,border-color .3s}
.su-steps li i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.su-steps li.on{color:#fff;font-weight:600}
.su-steps li.on i{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 0 5px rgba(255,79,163,.22)}
.su-steps li.done i{background:#fff;border-color:#fff;color:#0E0E10}
.su-have{margin:0;font-size:13.5px}
.su-have a{color:#fff;font-weight:600;text-underline-offset:3px}
.su-done{margin-top:12px;background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:40px 36px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;animation:dzin .5s cubic-bezier(.2,.8,.2,1)}
.su-done h1{font-size:96px}
/* ---- guest review (/review/<token>) ---- */
.gr{max-width:1440px;margin:0 auto;padding:12px 24px 32px;min-height:100vh;min-height:100dvh}
.gr svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gr button{font:inherit;cursor:pointer}
.gr-top{display:flex;align-items:center;gap:8px;min-height:56px}
.gr-top .sp{flex:1}
.gr-logo{font:700 38px/1 var(--display);letter-spacing:.03em;color:var(--ink)}
.gr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:16px 0 18px}
.gr-ttl{min-width:0;flex:1 1 480px}
.gr-ttl small{display:block;font-size:13px;color:var(--ink-3)}
.gr-ttl .gr-lab{margin-bottom:14px}
.gr .rv-acts .okb{color:#fff}
.gr-ttl h1{margin:8px 0 10px;font:700 clamp(56px,6.2vw,104px)/.84 var(--display);letter-spacing:0;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.gr-ttl p{margin:0;color:var(--ink-2);font-size:15px}
.gr-lab{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:99px;font-size:13.5px;font-weight:700;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gr-lab svg.i{width:16px;height:16px}
.gr-lab.you{background:var(--pink);color:#fff;box-shadow:0 10px 30px -12px var(--pink)}
.gr-lab.you::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
.gr-lab.ok{background:var(--ok-soft);color:var(--ok)}
.gr-lab.ch{background:var(--warn-soft);color:var(--warn)}
.gr-state{margin:0 0 16px;padding:14px 18px;border-radius:20px;font-weight:600;font-size:14px}
.gr-state.ok{background:var(--ok-soft);color:var(--ok)}
.gr-state.ch{background:var(--warn-soft);color:var(--warn)}
.gr-b{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:16px;align-items:start}
.gr-stage{background:#08080A;color:#F2F3F5;color-scheme:dark;border-radius:var(--r-tile);padding:12px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);min-width:0}
.gr-screen{position:relative;width:100%;aspect-ratio:var(--ar,16 / 9);max-height:min(70vh,760px);border-radius:20px;background:#000;overflow:hidden}
.gr-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.gr-screen .big{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;color:#fff;transition:opacity .25s,transform .25s,background .25s}
.gr-screen .big svg.i{width:30px;height:30px}
.gr-screen .big:hover{transform:scale(1.06);background:var(--pink)}
.gr-screen .big.hide{opacity:0;pointer-events:none}
.gr-verr{position:absolute;inset:auto 0 0;margin:0;padding:16px;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8));font-weight:600}
.gr-ctrl{background:#16171B}
.gr-ctrl .pp{border:0}
.gr-ctrl .tcx{font-family:var(--mono)}
.gr-ctrl .scrub:focus-visible{outline:2px solid #4C8DFF;outline-offset:4px}
.gr :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gr-stage :focus-visible{outline-color:#4C8DFF}
.gr-side{position:sticky;top:16px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.gr-side h5{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink-3)}
:root[lang="en"] .gr-side h5 > span{text-transform:uppercase;letter-spacing:.09em}
.gr-side h5 .keys{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.gr-list{flex:1 1 auto;min-height:72px;overflow:auto;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;margin:0 -4px;padding:0 4px}
.gr-n{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px;border-radius:16px;background:var(--tile-2);animation:dzin .3s cubic-bezier(.2,.8,.2,1)}
.gr-n .ts{align-self:start;border:0;padding:3px 8px;border-radius:8px;background:var(--pink);color:#fff;font-size:11.5px;font-weight:500;line-height:1.5;white-space:nowrap}
.gr-n .ts:hover{box-shadow:0 0 0 3px rgba(255,79,163,.3)}
.gr-n.res{opacity:.62}
.gr-n.res .ts{background:var(--ink-3)}
.gr-n .gr-nt{min-width:0}
.gr-n b{font-size:12.5px;color:var(--ink)}
.gr-n .when{font-size:11.5px;color:var(--ink-3);margin-inline-start:8px}
.gr-n p{margin:3px 0 0;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.gr-n .rp{margin-top:10px;padding:8px 12px;border-radius:12px;background:var(--tile);border-inline-start:3px solid var(--blue)}
.gr-n .rp .team{font-size:11.5px;font-weight:700;color:var(--blue)}
.gr-n .rp p{margin:1px 0 0;font-size:13.5px;color:var(--ink-2)}
.gr-empty{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;background:var(--tile-2);color:var(--ink-2);font-size:13.5px}
.gr-empty b{color:var(--ink);font-size:14.5px}
.gr-add{display:flex;flex-direction:column;gap:10px}
.gr-name{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.gr-name b{color:var(--pink-ink)}
.gr-name .in{height:42px}
.gr-name .in[aria-invalid="true"],.gr-chg .in[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.gr-box{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 8px;padding:10px 10px 10px 14px;padding-inline:16px 10px;border-radius:22px;background:var(--tile-2);transition:box-shadow .2s,background .2s}
.gr-box:focus-within{background:var(--tile);box-shadow:0 0 0 2px var(--pink),0 0 0 6px rgba(255,79,163,.2)}
.gr-box .at{grid-column:1 / -1;font-size:12px;color:var(--ink-3);display:flex;gap:2px;align-items:baseline}
.gr-box .at b{color:var(--pink-ink);font-size:12.5px;font-weight:500}
.gr-box textarea{border:0;background:none;resize:none;outline:none;color:var(--ink);font:400 14.5px/1.5 var(--ui);min-height:44px;max-height:180px;padding:2px 0;width:100%}
.gr-box textarea::placeholder{color:var(--ink-3)}
.gr-box .go{height:40px;padding:0 14px;border:0;border-radius:99px;background:var(--inv);color:var(--inv-ink);display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px}
.gr-box .go svg.i{width:16px;height:16px}
[dir="rtl"] .gr-box .go svg.i{transform:scaleX(-1)}
.gr-box .go:disabled{opacity:.5}
.gr-dec{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:12px}
.gr .rv-acts button{border:0;white-space:normal;line-height:1.2}
.gr .rv-acts .rq{background:var(--tile-2)!important;color:var(--ink)}
.gr .rv-acts .rq:hover{background:color-mix(in srgb,var(--ink) 10%,var(--tile))!important}
.gr .rv-acts .rq[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.gr-chg{display:flex;flex-direction:column;gap:8px;animation:dzin .3s cubic-bezier(.2,.8,.2,1)}
.gr-chg label{font-size:13px;font-weight:600;color:var(--ink-2)}
.gr-chg .in{min-height:84px;width:100%}
.gr-chg .row{display:flex;justify-content:flex-end;gap:8px}
.gr-dead{max-width:600px;margin:9vh auto 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:44px 32px 40px;animation:dzin .5s cubic-bezier(.2,.8,.2,1)}
.gr-dead h1{margin:6px 0 0;font:700 clamp(52px,7vw,76px)/.88 var(--display);color:var(--ink);text-wrap:balance}
.gr-dead p{margin:0;color:var(--ink-2);font-size:15px;max-width:46ch}
.gr-dead .lg-ic{background:var(--bad-soft);color:var(--bad)}
.gr-nov .lg-ic{background:color-mix(in srgb,var(--blue) 12%,var(--tile));color:var(--blue)}
.gr-foot{margin:28px 0 0;text-align:center;font-size:12px;color:var(--ink-3)}
.gr .skel{border-radius:var(--r-tile)}
body:has(.gr) .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}

@media (max-width:1180px){
  .lg8 .art{padding:32px 32px 34px}
  .lg-flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .login.lg8:not(.su8){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .gr-b{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:1000px){
  .gr-b{grid-template-columns:minmax(0,1fr)}
  .gr-side{position:static;max-height:none}
  .gr-list{overflow:visible;flex:none}
}
@media (max-width:900px){
  .login.lg8,.login.lg8:not(.su8){grid-template-columns:minmax(0,1fr);padding:12px 16px 24px;gap:0}
  .lg8 .art{display:none}
  .lg8 .form{align-items:flex-start;padding:0}
  .lg-col,.su8 .su-col{max-width:560px;margin:0 auto}
  .lg-bar .mlogo{display:flex;align-items:baseline;gap:8px;margin:0}
  .lg-bar .mlogo span{font:700 34px/1 var(--display);letter-spacing:.03em}
}
@media (max-width:560px){
  .lg-card,.login.lg8 form.lg-card{padding:24px 20px 22px;gap:12px}
  .lg8 h1{font-size:56px}
  .lg-bar,.gr-top{gap:6px}
  .lg-bar .mlogo small{display:none}
  .lg-bar .seg button,.gr-top .seg button{min-width:40px;min-height:40px;padding:4px 8px}
  .seg .l-f{display:none}.seg .l-s{display:inline}
  .su-head h1{font-size:64px}
  .su-fs{padding:18px 16px 20px}
  .su-fs legend{gap:12px}
  .su8 .two{grid-template-columns:minmax(0,1fr)}
  .login.su8 #f > .btn.lg{align-self:stretch;min-width:0;width:100%}
  .su-done{padding:28px 20px}
  .su-done h1{font-size:72px}
  .gr{padding:8px 16px 24px}
  .gr-logo{font-size:32px}
  .gr-head{margin:10px 0 14px}
  .gr-ttl{flex-basis:100%}
  .gr-ttl h1{font-size:clamp(48px,14vw,64px)}
  .gr-stage{padding:8px;border-radius:24px}
  .gr-screen{border-radius:16px;max-height:62vh}
  .gr-screen .big{width:68px;height:68px;margin:-34px 0 0 -34px}
  .gr-side{padding:16px}
  .gr-side h5 .keys{display:none}
  .gr-dead{margin-top:5vh;padding:32px 20px}
}
@media (prefers-reduced-motion:reduce){.lg8 .art::before,.lg8 .art::after,.lg-card,.lg-err,.su-code,.su-done,.gr-n,.gr-chg,.gr-dead{animation:none!important}}

/* =====================================================================================================
   10/15 "Studio bold" step 9 = the founder CONTROL ROOM (/control/, studio/control.js). Same shell as the app (white tile menu,
   pill top bar), light + dark (app/theme.js), Hebrew + English. Home = what needs Tal now: black hero with the count and jump pills,
   studio bars, system health; then the queue in order (package requests first, pink ring = money), then clients + latest files.
   All classes start with .cr- (nothing global). Every action that sends, spends or opens asks first (.cfm).
   ===================================================================================================== */
.cr .ci,.cr-gate .ci,.cfm .ci{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;max-width:none;max-height:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cr .side .logo{cursor:default}
.cr-wsw{cursor:default}
.cr-wsw .av{background:var(--inv);color:var(--inv-ink)}
.cr-wsw .av .ci{width:17px;height:17px;stroke-width:2}
.cr .nav .grp{padding-top:18px}
.cr .nav a .cr-ext{width:14px;height:14px;margin-inline-start:auto;opacity:.5}
.cr .side .foot{flex-wrap:wrap}
.cr-muted{color:var(--ink-3);font-size:13px}
.cr-none{color:var(--ink-3);font-size:14px;margin:0}
.cr-err{color:var(--bad);font-size:13px;font-weight:600}
.cr time{font-size:12px;white-space:nowrap}

/* top bar */
.cr-top{flex-wrap:nowrap}
.cr-where{display:flex;flex-direction:column;min-width:0;padding-inline:6px}
.cr-where b{font:700 15px/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-where small{font-size:11.5px;color:var(--ink-3)}
.cr-pill{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:99px;background:var(--tile);box-shadow:var(--shadow);color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:box-shadow .2s}
.cr-pill:hover{box-shadow:var(--shadow),0 0 0 1px var(--line-2)}
.cr-pill b{color:var(--ink)}
.cr .dot,.cr-hls .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-3);flex:none;display:inline-block}
.cr-pill.ok .dot,.cr-pill.on .dot{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.cr-pill.bad{color:var(--bad)}
.cr-pill.bad .dot{background:var(--bad);box-shadow:0 0 0 4px var(--bad-soft);animation:crpulse 1.6s ease-in-out infinite}
@keyframes crpulse{50%{box-shadow:0 0 0 7px transparent}}

/* home: hero + bars + health */
.cr-top3{display:grid;gap:16px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"hero pipe" "hero hl";margin-bottom:16px}
.cr-hero{grid-area:hero;position:relative;overflow:hidden;isolation:isolate;background:var(--hero);color:#fff;border-radius:var(--r-tile);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:400px}
.cr-hero::before,.cr-hero::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;pointer-events:none;animation:ovfloat 18s ease-in-out infinite alternate}
.cr-hero::before{inset-inline-end:-150px;top:-210px;background:radial-gradient(circle,var(--pink),transparent 64%);opacity:.7}
.cr-hero::after{inset-inline-start:-160px;bottom:-280px;background:radial-gradient(circle,var(--blue),transparent 64%);opacity:.6;animation-direction:alternate-reverse}
.cr-hero small{font-size:12px;color:rgba(255,255,255,.62)}
.cr-hero h1{margin:10px 0 0;font:700 clamp(62px,6.6vw,108px)/.84 var(--display);letter-spacing:.005em;text-wrap:balance;color:#fff}
:root[lang="he"] .cr-hero h1{letter-spacing:0}
.cr-hero p{margin:14px 0 0;color:rgba(255,255,255,.76);font-size:16px;max-width:52ch}
.cr-hero p b{color:#fff}
.cr-jumps{display:flex;flex-wrap:wrap;gap:8px}
.cr-jumps a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 8px;border-radius:99px;border:1px solid var(--hero-line);color:rgba(255,255,255,.9);text-decoration:none;font-size:13.5px;font-weight:600;transition:background .2s,border-color .2s}
[dir="rtl"] .cr-jumps a{padding:0 8px 0 16px}
.cr-jumps a b{min-width:26px;height:26px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.14);display:grid;place-items:center;font:700 12.5px/1 var(--ui)}
.cr-jumps a:hover{background:rgba(255,255,255,.1)}
.cr-jumps a.pk{background:var(--pink);border-color:var(--pink);color:#fff}
.cr-jumps a.pk b{background:#fff;color:var(--pink-deep)}
.cr-jumps a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cr-t{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:22px 24px;min-width:0;position:relative}
.cr-t h5{margin:0 0 16px;font-size:12.5px;font-weight:700;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
:root[lang="en"] .cr-t h5 > span:first-child{text-transform:uppercase;letter-spacing:.09em}
.cr-t h5 a{font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-weight:700}
.cr-t h5 a:hover{text-decoration:underline}
.cr-t h5 .ci{width:14px;height:14px}
.cr-pipe{grid-area:pipe}
.cr-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;min-height:150px}
.cr-bars a{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);border-radius:14px;padding:4px}
.cr-bars a b{font:700 40px/.9 var(--display)}
.cr-bars a i{display:block;height:calc(8px + var(--p) * 84px);border-radius:12px;background:var(--c);transform-origin:bottom;animation:crgrow .9s cubic-bezier(.2,.8,.2,1) backwards}
.cr-bars a span{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.cr-bars a:hover i{filter:brightness(1.08)}
@keyframes crgrow{from{transform:scaleY(.05)}}
.cr-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.cr-facts div{min-width:0}
.cr-facts dt{font-size:12px;color:var(--ink-3);font-weight:600}
.cr-facts dd{margin:2px 0 0;font:700 30px/1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-hl{grid-area:hl}
.cr-hl:focus{outline:none}
.cr-hl:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cr-hls{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-weight:600}
.cr-hls .dot{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.cr-hl.bad .cr-hls .dot,.cr-hls.bad .dot{background:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.cr-hls.bad{color:var(--bad)}
.cr-hlr{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cr-hlr li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.cr-hlr li:first-child{border-top:0}
.cr-hlr li b{font-size:12px;font-weight:600;color:var(--ink-2)}
.cr-hlr li.ok .dot{background:var(--ok)}
.cr-hlr li.mid .dot{background:var(--st-plan)}
.cr-hlr li.bad .dot{background:var(--bad)}
.cr-hlr li.bad b{color:var(--bad)}

/* the queue */
.cr-q{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);margin-bottom:16px;overflow:clip;scroll-margin-top:16px}
.cr-q:focus{outline:none}
.cr-q:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cr-q.money{box-shadow:var(--shadow),inset 0 0 0 2px var(--pink)}
.cr-q > header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:20px 24px 16px}
.cr-qi{width:40px;height:40px;border-radius:13px;background:var(--tile-2);display:grid;place-items:center;color:var(--ink)}
.cr-q.money .cr-qi{background:var(--pink);color:#fff}
.cr-q h2{margin:0;font:700 17px/1.3 var(--ui);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cr-q h2 .ct{min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--pink);color:#fff;display:inline-grid;place-items:center;font-size:12px;font-weight:700}
.cr-q > header p{margin:4px 0 0;color:var(--ink-2);font-size:13.5px;max-width:80ch}
.cr-rows{border-top:1px solid var(--line)}
.cr-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 24px;border-top:1px solid var(--line)}
.cr-row:first-child{border-top:0}
.cr-tx{min-width:0}
.cr-tx b{display:block;font-weight:600;font-size:15px;overflow-wrap:anywhere}
.cr-tx small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
.cr-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.cr-acts .btn{white-space:nowrap}
.cr-acts .btn .ci{width:16px;height:16px}
.btn.cr-bad,.btn.ghost.cr-bad{color:var(--bad)}
.btn.cr-bad:hover{background:var(--bad-soft);color:var(--bad)}
.cr-vid{width:220px;max-width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;object-fit:cover;display:block}
.cr-po{width:52px;height:52px;border-radius:14px;background:var(--tile-2) center/cover no-repeat;display:grid;place-items:center;color:var(--ink-3);flex:none}
.cr-po.sm{width:44px;height:44px;border-radius:12px}
.cr-po.xs{width:30px;height:30px;border-radius:9px}
.cr-po .ci{width:18px;height:18px}
.cr-po.xs .ci{width:14px;height:14px}
.cr-av{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;font:700 17px/1 var(--ui);color:#fff;background:linear-gradient(135deg,hsl(var(--h,300) 72% 56%),hsl(calc(var(--h,300) + 40) 72% 46%))}
.cr-av.sm{width:34px;height:34px;border-radius:11px;font-size:14px}
.cr-kind{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:99px;background:var(--tile-2);font-size:12px;font-weight:700;white-space:nowrap}
.cr-calm{display:flex;gap:16px;align-items:center;background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:24px;margin-bottom:16px}
.cr-calm > span{width:48px;height:48px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;flex:none}
.cr-calm > span .ci{width:22px;height:22px;stroke-width:2.2}
.cr-calm b{font:700 34px/.95 var(--display);display:block}
.cr-calm p{margin:6px 0 0;color:var(--ink-2);font-size:14px}

/* package requests: one card each */
.cr-req{padding:18px 24px 20px;border-top:1px solid var(--line);display:grid;gap:14px}
.cr-rows > .cr-req:first-child{border-top:0}
.cr-rq-h{display:flex;align-items:center;gap:12px;min-width:0}
.cr-rq-h b{display:block;font-size:16px;font-weight:700}
.cr-rq-h small{display:block;color:var(--ink-3);font-size:12.5px}
.cr-rq-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cr-rq-l li{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:12px;background:var(--tile-2);font-size:13.5px;font-weight:500}
.cr-rq-l li .mono{font-weight:600;color:var(--pink-ink)}
.cr-rq-f{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cr-rq-t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cr-rq-t b{font:700 52px/.85 var(--display)}
.cr-rq-t small{font-size:12.5px;color:var(--ink-3)}
.cr-reqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:12px;padding:0 16px 16px}
.cr-req.big{border:0;background:var(--tile-2);border-radius:22px}
.cr-req.big .cr-rq-l li{background:var(--tile)}
.cfm .ls .li.cr-tot span{background:var(--inv);color:var(--inv-ink)}
.cfm .ls .li.cr-tot p{font-weight:700}
.cr-askt{margin-top:4px}
.cr-askt textarea{min-height:88px}
.cr-flow{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cr-flow li{background:var(--tile);border-radius:22px;box-shadow:var(--shadow);padding:16px 18px;display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:500}
.cr-flow li b{font-size:12px;color:var(--ink-3);padding-top:2px}
.cr-flow li.pk{box-shadow:var(--shadow),inset 0 0 0 2px var(--pink)}
.cr-flow li.pk b{color:var(--pink-ink)}
.cr-rev{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cr-rev li{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:13px}
.cr-rev li i{display:block;height:12px;border-radius:6px;background:var(--tile-2);position:relative;overflow:hidden}
.cr-rev li i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--pink))}
[dir="rtl"] .cr-rev li i::after{background:linear-gradient(270deg,var(--blue),var(--pink))}
.cr-rev li b{font:700 22px/1 var(--display)}

/* two small tiles + mini lists */
.cr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.cr-mini{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cr-mini li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line);min-width:0}
.cr-mini li:first-child{border-top:0}
.cr-mini li > span:not(.cr-fk):not(.cr-av):not(.st){flex:1;min-width:0}
.cr-mini b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-mini small{display:block;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-mini button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;border-radius:14px;padding:2px;min-width:0}
.cr-mini button > span:not(.cr-av){flex:1;min-width:0}
.cr-mini button:hover b{text-decoration:underline}
.cr-mini button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cr-mini em,.cr-you{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:var(--pink);border-radius:99px;padding:3px 10px;white-space:nowrap}
.cr-fk{width:36px;height:36px;border-radius:11px;background:var(--tile-2);display:grid;place-items:center;flex:none;color:var(--ink-2)}
.cr-fk .ci{width:17px;height:17px}
.cr-fk.audio{color:var(--pink-ink)}.cr-fk.video{color:var(--blue)}.cr-fk.image{color:var(--ok)}

/* videos */
.cr-vt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px}
.cr-vt button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px 12px;border:0;border-radius:20px;background:var(--tile);box-shadow:var(--shadow);color:var(--ink);text-align:start;position:relative;overflow:hidden;transition:background .2s,color .2s,box-shadow .2s}
.cr-vt button::after{content:"";position:absolute;inset-inline:16px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--c)}
.cr-vt button b{font:700 40px/.85 var(--display)}
.cr-vt button span{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.cr-vt button:hover{box-shadow:var(--shadow),0 0 0 1px var(--line-2)}
.cr-vt button.you b{color:var(--pink-ink)}
.cr-vt button.on{background:var(--inv);color:var(--inv-ink)}
.cr-vt button.on span{color:var(--inv-ink);opacity:.75}
.cr-vt button.on.you b{color:var(--pink)}
.cr-tools{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cr-tools .sp{flex:1}
.cr-search{position:relative;flex:0 1 380px;min-width:0}
.cr-search .ci{position:absolute;inset-inline-start:16px;top:50%;margin-top:-9px;color:var(--ink-3);pointer-events:none}
.cr-search .in{border-radius:99px;background:var(--tile);box-shadow:var(--shadow);padding-inline-start:44px}
.cr-cnt{font-size:12.5px;color:var(--ink-3)}
.cr-x{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-inline-start:4px}
.cr-x:hover{background:var(--line-2)}
.cr-x .ci{width:12px;height:12px}
.cr-tbl{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);overflow:clip}
.cr-tbl .tbl th{position:static;background:none}
.cr-tbl .tbl td{vertical-align:middle}
.cr-tbl .tbl td small{display:block;font-size:12px;color:var(--ink-3)}
.cr-tbl .tbl td b{font-weight:600}
.cr-tbl tr.you td:first-child{box-shadow:inset -3px 0 0 var(--pink)}
[dir="ltr"] .cr-tbl tr.you td:first-child{box-shadow:inset 3px 0 0 var(--pink)}
.cr-st{font-size:12px}
.cr-who{display:flex;align-items:center;gap:10px;min-width:0}
.cr-who > span:last-child{min-width:0}
.cr-who small{overflow-wrap:anywhere}

/* clients */
.cr-new{margin-bottom:16px}
.cr-fr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}
.cr-fr small{color:var(--ink-3);font-size:12.5px}
.cr-cl{display:grid;gap:12px}
.cr-acc{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--shadow);overflow:clip}
.cr-acc[open]{box-shadow:var(--shadow),0 0 0 1px var(--line)}
.cr-acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r-tile)}
.cr-acc summary::-webkit-details-marker{display:none}
.cr-acc summary:hover{background:var(--tile-2)}
.cr-acc summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cr-an{min-width:0}
.cr-an b{display:block;font-size:16.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-an small{display:block;font-size:12.5px;color:var(--ink-3)}
.cr-ab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cr-meter{display:inline-flex;align-items:center;gap:8px;font-size:12px}
.cr-meter i{display:block;width:64px;height:6px;border-radius:6px;background:var(--tile-2);position:relative;overflow:hidden}
.cr-meter i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p) * 100%);border-radius:inherit;background:var(--ok)}
.cr-chev{width:10px;height:10px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-3px) rotate(45deg);transition:transform .2s;margin-inline:6px}
.cr-acc[open] .cr-chev{transform:translateY(2px) rotate(-135deg)}
.cr-det{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:6px 24px 24px;border-top:1px solid var(--line)}
.cr-det > div{min-width:0}
.cr-det h3{font:700 14px/1.3 var(--ui);margin:20px 0 10px}
.cr-ppl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cr-ppl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--tile-2)}
.cr-ppl b{display:block;font-size:14px;font-weight:600}
.cr-ppl small{display:block;font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.cr-ro{text-align:end;font-size:13px;font-weight:600}
.cr-dl{display:grid;grid-template-columns:minmax(80px,auto) minmax(0,1fr);gap:6px 14px;margin:0;font-size:14px}
.cr-dl dt{color:var(--ink-3)}
.cr-dl dd{margin:0;overflow-wrap:anywhere}
.cr-sw{display:flex;gap:6px}
.cr-sw span{width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2)}
.cr-units{display:grid;gap:4px}
.cr-unit{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 8px 8px 14px;border-radius:14px;background:var(--tile-2);font-size:13.5px}
[dir="rtl"] .cr-unit{padding:8px 14px 8px 8px}
.cr-unit .mono{font-size:12.5px;color:var(--ink-3)}
.cr-unit .mono b{font:700 22px/1 var(--display);color:var(--ink)}
.cr-unit.zero > span:first-child{color:var(--ink-3)}
.cr-step{display:inline-flex;gap:4px}
.cr-step .btn{min-width:44px;padding:0 10px;background:var(--tile)}
.cr-brand{margin-bottom:12px}
.cr-bh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.cr-bv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:14px}
.cr-bv:hover{background:var(--tile-2)}
.cr-bv > span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-addp{display:flex;gap:8px;margin-top:12px}

/* files */
.cr-flist{padding:8px 24px}
.cr-flist ul{list-style:none;margin:0;padding:0}
.cr-flist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.cr-flist li:first-child{border-top:0}
.cr-flist b{display:block;font-weight:600;overflow-wrap:anywhere}
.cr-flist small{display:block;font-size:12.5px;color:var(--ink-3)}
.cr-flist p{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}

/* settings + switches */
.sw{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:start;font:inherit;color:inherit;cursor:pointer}
.sw i{width:46px;height:28px;border-radius:14px;background:var(--line-2);position:relative;flex:none;transition:background .2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.sw.on i{background:var(--ok)}
.sw.on i::after{left:21px}
[dir="rtl"] .sw i::after{left:21px}
[dir="rtl"] .sw.on i::after{left:3px}
.sw:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:99px}
.cr-set{margin-bottom:16px}
.cr-set .sw{margin-bottom:6px}
.cr-ar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.cr-ar p{margin:0;color:var(--ink-2);font-size:14px;flex:1;min-width:220px}
.cr-ar.on{box-shadow:var(--shadow),inset 0 0 0 2px var(--ok)}
.cr-page > .cr-t{margin-bottom:16px}
.cr-types{display:grid;gap:10px}
.cr-type{margin:0;border:0;border-radius:20px;background:var(--tile-2);padding:12px 14px 14px;display:grid;grid-template-columns:.7fr 1.6fr 1.6fr .6fr .6fr .7fr;gap:10px;min-width:0}
.cr-type legend{float:left;width:100%;grid-column:1/-1;font-size:13.5px;font-weight:700;padding:0;margin-bottom:2px}
[dir="rtl"] .cr-type legend{float:right}
.cr-type legend .mono{color:var(--ink-3);font-size:12px}
.cr-type.add{background:none;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.cr-type.add legend{color:var(--ink-3);font-weight:600}
.cr-type .field,.cr-tier .field{font-size:12px;min-width:0}
.cr-type .in,.cr-tier .in{background:var(--tile);height:40px}
.cr-tiers{display:grid;gap:8px}
.cr-tier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cr-savebar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--hero);color:#fff;border-radius:99px;padding:8px;padding-inline-start:24px;box-shadow:var(--shadow-lg)}
.cr-savebar span{font-size:13.5px;color:rgba(255,255,255,.75)}
.cr-savebar .btn{background:#fff;color:#0E0E10}
.cr-savebar .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* signed out */
.cr-gate{min-height:100vh;display:grid;place-items:center;padding:16px}
.cr-gh{width:min(760px,100%);min-height:min(560px,calc(100vh - 32px))}
.cr-gh .logo{font:700 34px/1 var(--display);letter-spacing:.03em}
.cr-ga{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cr-ga .seg{background:rgba(255,255,255,.1)}
.cr-ga .seg button{color:rgba(255,255,255,.7)}
.cr-ga .seg button.on{background:#fff;color:#0E0E10}
.cr-wbtn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:99px;background:#fff;color:#0E0E10;font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer}
.cr-wbtn:focus-visible,.cr-ga .seg button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* motion */
.cr-page.enter > .cr-top3 > *{animation:dzin .6s cubic-bezier(.2,.8,.2,1) backwards}
.cr-page.enter > .cr-top3 > :nth-child(2){animation-delay:.05s}
.cr-page.enter > .cr-top3 > :nth-child(3){animation-delay:.1s}
.cr-page.enter > .cr-top3{animation:none}
@media (prefers-reduced-motion:reduce){.cr-hero::before,.cr-hero::after,.cr-bars a i,.cr-pill.bad .dot,.cr-page.enter > .cr-top3 > *{animation:none!important}}

/* responsive */
@media (max-width:1180px){
  .cr-top3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"hero hero" "pipe hl"}
  .cr-hero{min-height:340px}
  .cr-vt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cr-type{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cr-det{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (max-width:900px){
  .cr-two{grid-template-columns:minmax(0,1fr)}
  .cr-top3{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "pipe" "hl"}
  .cr-flow{grid-template-columns:minmax(0,1fr)}
  .cr-row{grid-template-columns:auto minmax(0,1fr)}
  .cr-row .cr-acts{grid-column:1/-1;justify-content:flex-start}
  .cr-row.wide{grid-template-columns:minmax(0,1fr)}
  .cr-row.wide .cr-vid{width:100%}
}
@media (max-width:700px){
  .cr-top .cr-pill{width:46px;padding:0;justify-content:center;flex:none}
  .cr-top .cr-pill span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cr-top .cr-pill[data-goset]{display:none}
  .cr-where small{display:none}
  .cr-hero{padding:22px 20px;min-height:0;gap:22px}
  .cr-hero h1{font-size:clamp(54px,15vw,72px)}
  .cr-hero p{font-size:15px}
  .cr-t{padding:18px 20px}
  .cr-q > header{padding:18px 20px 14px}
  .cr-row,.cr-req{padding:14px 20px}
  .cr-rq-f{flex-direction:column;align-items:stretch}
  .cr-rq-f .cr-acts{justify-content:stretch}
  .cr-rq-f .cr-acts .btn{flex:1 1 auto}
  .cr-reqs{padding:0 10px 10px}
  .cr-bars a b{font-size:34px}
  .cr-facts dd{font-size:24px}
  .cr-vt{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cr-vt button{padding:12px 12px 10px;border-radius:16px}
  .cr-vt button b{font-size:32px}
  .cr-vt button span{font-size:11.5px}
  .cr-search{flex:1 1 100%}
  .cr-tbl .tbl thead{display:none}
  .cr-tbl .tbl,.cr-tbl .tbl tbody{display:block}
  .cr-tbl .tbl tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
  .cr-tbl .tbl tr:first-child{border-top:0}
  .cr-tbl .tbl td{display:block;padding:0;border:0;min-width:0}
  .cr-tbl .tbl tr:hover td{background:none}
  .cr-tbl .tbl td:first-child{grid-row:span 3}
  .cr-tbl .tbl td:nth-child(2),.cr-tbl .tbl td:nth-child(3),.cr-tbl .tbl td:nth-child(4){grid-column:2}
  .cr-tbl .tbl td:last-child{grid-column:3;grid-row:1 / span 3}
  .cr-tbl tr.you td:first-child{box-shadow:none}
  .cr-tbl tr.you{box-shadow:inset -3px 0 0 var(--pink)}
  [dir="ltr"] .cr-tbl tr.you{box-shadow:inset 3px 0 0 var(--pink)}
  .cr-ptbl tr{grid-template-columns:minmax(0,1fr) auto!important}
  .cr-ptbl td:first-child{grid-row:auto!important;grid-column:1/-1}
  .cr-ptbl td:nth-child(2){grid-column:1!important}
  .cr-ptbl td:nth-child(3){grid-column:2!important;grid-row:2!important;text-align:end}
  .cr-acc summary{grid-template-columns:auto minmax(0,1fr) auto;padding:14px 16px;gap:12px}
  .cr-ab{grid-column:1/-1;justify-content:flex-start;grid-row:2}
  .cr-chev{grid-column:3;grid-row:1}
  .cr-det{padding:4px 16px 20px}
  .cr-det .grid-form{grid-template-columns:minmax(0,1fr)}
  .cr-unit{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .cr-step{grid-column:1/-1}
  .cr-step .btn{flex:1}
  .cr-ppl li{grid-template-columns:auto minmax(0,1fr)}
  .cr-ro{grid-column:2;text-align:start}
  .cr-type{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-savebar{border-radius:24px;padding:14px;padding-inline-start:18px}
  .cr-savebar .btn{flex:1 1 auto}
  .cr-flist{padding:4px 20px}
  .cr-calm{padding:20px;align-items:flex-start}
  .cr-calm b{font-size:30px}
}
.cr time,.cr-gate time{font-family:var(--ui)}
.cr bdi{unicode-bidi:isolate}
@media (max-width:700px){.cr-type label:has(> [data-k="he"]),.cr-type label:has(> [data-k="en"]){grid-column:1/-1}.cr-type label:has(> [data-k="he"]){order:-1}.cr-type legend{order:-2}}