/* Uplo — brand system
   Type: two families only (ChatGPT round 4). Alexandria = headings, logo word, prices and big numbers.
   Readex Pro = body, buttons, fields, tables. Scale: h1 30 / h2 20 / h3 17 / body 16 / small 13.5 in the app. Arabic gets no letter-spacing, italics or capitals.
   Colour: one palette. --cta (terracotta) is used ONLY on the main action button. Everything else is ink and neutrals.
   Layout: logical properties everywhere (inline-start/end), so Arabic (RTL) and English (LTR) share one stylesheet. */
/* Colours, type sizes, spacing, radius, the button set and the card live in ui.css (loaded first, shared with the website).
   This file only lays out the app screens. No colour values here: use the variables from ui.css. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--body)/1.65 var(--f-ui);overflow-x:hidden}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.35}
h1{font-weight:700}
.hide{display:none!important}

/* top bar */
.nav{position:sticky;top:0;z-index:10;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--sep)}
.nav-in{max-width:640px;margin:0 auto;padding:0 20px;min-height:56px;flex-wrap:wrap;padding-block:4px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font:700 22px/1 var(--f-display);color:var(--ink)}
.brand img{width:28px;height:28px;display:block}
.nav-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;min-width:0}

.wrap{max-width:640px;margin:0 auto;padding:8px 20px 128px}
.hero{padding:32px 0 24px}
.hero h1{font-size:var(--h1);font-weight:700}
.hero p{font-size:17px;color:var(--mute);margin:8px 0 0}
.label{font:600 var(--small)/1.4 var(--f-ui);color:var(--mute);margin:28px 16px 8px}
.foot{font-size:var(--small);color:var(--mute);margin:8px 16px 0}
.group{overflow:hidden} /* look: .card in ui.css */
.center{text-align:center}

/* video picker */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:210px;padding:28px;border:0;background:none;text-align:center;cursor:pointer;transition:background var(--dur) var(--ease-out)}
.drop:hover,.drop.over{background:var(--tint)}
.drop .circle{width:64px;height:64px;border-radius:16px;background:var(--tint);display:grid;place-items:center;margin-bottom:12px;color:var(--green)}
.drop b{font:600 var(--h3)/1.4 var(--f-display)}
.drop span{color:var(--mute);font-size:15px}
.drop.has{padding:0;min-height:0;cursor:default;background:var(--video);display:block}
.drop video{width:100%;max-height:360px;display:block}
.vmeta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 8px 16px;padding-inline:16px 8px;font-size:15px;color:var(--mute);border-top:1px solid var(--sep)}
.vmeta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;unicode-bidi:plaintext}

textarea{display:block;width:100%;border:0;background:transparent;padding:16px 16px;resize:none;outline:none;min-height:104px;line-height:1.7}
textarea::placeholder,input::placeholder{color:var(--mute);opacity:1}
.count{font-size:var(--small);color:var(--mute);text-align:end;padding:0 16px 12px;font-variant-numeric:tabular-nums;min-height:10px}

/* rows */
.row{display:flex;align-items:center;gap:16px;width:100%;padding:0 16px;min-height:60px;position:relative;border:0;background:none;text-align:start;cursor:pointer;user-select:none}
div.row{cursor:default}
.row+.row::before{content:"";position:absolute;top:0;inset-inline:64px 0;border-top:1px solid var(--sep)}
button.row:active{background:var(--fill)}
.ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--on-cta);font:700 13px/1 system-ui,sans-serif;flex:none} /* platform marks: white on the platform's own colour */
.ic svg{display:block;fill:currentColor}
.row .nm{flex:1;display:block;padding:16px 0;font-weight:500;min-width:0}
.row .nm small{display:block;color:var(--mute);font-size:var(--small);font-weight:400}
.row.off .ic{opacity:1} /* a new brand sees every platform in full colour; the row text and button say it is not linked yet */
.chip{font-size:14px;font-weight:600;padding:8px 16px;border-radius:var(--r-ctl);background:var(--tint);color:var(--green);white-space:nowrap}
.warn,.row .nm small.warn{color:var(--warn)}
.bad{color:var(--bad)}

/* switch (mirrors by itself in RTL) */
.sw{width:51px;height:31px;border-radius:31px;background:var(--fill);position:relative;transition:background var(--dur-press) var(--ease-out);flex:none}
.sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:var(--knob);box-shadow:var(--shadow-knob);transition:transform var(--dur) var(--ease-out)}
.sw.on{background:var(--sw)}.sw.on::after{transform:translateX(20px)}[dir=rtl] .sw.on::after{transform:translateX(-20px)}

.when{padding:0 16px 16px}
.when input{width:100%;border:0;background:var(--fill);border-radius:12px;padding:12px 12px;outline:none;font-size:16px;min-height:48px}

/* main action (look: .b-primary in ui.css): full width in the app. One per screen. */
.cta{display:flex;width:100%;margin-top:var(--s6)}
.cta.b2{display:flex;width:100%;margin-top:var(--s4)}
/* On phones the main button sits in the thumb zone: it sticks to the bottom, just above the tabs, until its own place scrolls into view. */
.dock{position:sticky;bottom:calc(56px + env(safe-area-inset-bottom));z-index:5;margin-top:var(--s5);padding:var(--s3) 0 var(--s2);background:linear-gradient(to bottom,transparent,var(--bg) var(--s3))}
.dock .cta{margin-top:0}
@media(min-width:700px){.dock{position:static}}
/* phone keyboard open (phone.js): nothing fixed may sit on top of the field being typed in */
.kb-open .tabs{display:none}
.kb-open .dock{position:static}
.ghost{display:flex;width:fit-content;margin:var(--s3) auto 0}
.err{color:var(--bad);font-size:15px;text-align:center;margin:12px 0 0}
.err.info{color:var(--mute)}
.wa-link{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:12px 2px;margin:-12px 0}
button:disabled{cursor:default}

/* sign in */
.fields{background:var(--card);border:1px solid var(--sep);border-radius:var(--r);overflow:hidden;text-align:start}
.fields input{display:block;width:100%;border:0;background:transparent;padding:16px;outline:none;font-size:16px;min-height:54px}
.fields input+input{border-top:1px solid var(--sep)}
.fields input[type=email],.fields input[type=password],.fields input#inv{direction:ltr;text-align:start}
[dir=rtl] .fields input[type=email],[dir=rtl] .fields input[type=password],[dir=rtl] .fields input#inv{text-align:right}

/* welcome (first time) */
.welcome{padding:24px 20px 20px;text-align:center}
.welcome h2{font-size:var(--h2);font-weight:700}
.welcome p{color:var(--mute);margin:4px 0 20px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.step{background:var(--bg);border-radius:16px;padding:16px 8px 12px;font-size:14px;font-weight:500;line-height:1.45}
.step i{width:44px;height:44px;border-radius:12px;background:var(--tint);display:grid;place-items:center;margin:0 auto 8px;color:var(--green);font-style:normal}
.step small{display:block;color:var(--mute);font-size:13px;font-weight:600;margin-bottom:2px}
.welcome .cta{margin-top:16px}

/* progress and results */
.done-hero{text-align:center;padding:52px 0 28px}
.badge{width:84px;height:84px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;color:var(--on-solid);animation:pop .25s cubic-bezier(.3,1.5,.5,1)}
.badge svg{width:42px;height:42px}
.badge.ok{background:var(--green)}.badge.mid{background:var(--warn)}.badge.no{background:var(--bad)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
@keyframes rise{from{transform:translateY(8px);opacity:0}}
.wrap>*{animation:rise .25s ease both}
.done-hero h1{font-size:var(--h1);font-weight:700}
.done-hero p{color:var(--mute);margin:8px 0 0}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--fill);border-top-color:var(--ink);animation:r .8s linear infinite;flex:none}
@keyframes r{to{transform:rotate(360deg)}}
.tick{color:var(--ok);flex:none}.cross{color:var(--bad);flex:none}
.bar{height:8px;border-radius:8px;background:var(--fill);overflow:hidden;margin:28px 0 12px}
.bar i{display:block;height:100%;width:0;background:var(--green);border-radius:8px;transition:width var(--dur) var(--ease-out)}

/* lists */
.hrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;position:relative}
.hrow+.hrow::before{content:"";position:absolute;top:0;inset-inline:16px 0;border-top:1px solid var(--sep)}
.hrow small{display:block;color:var(--mute);font-size:var(--small)}
.hrow .rank{color:var(--mute);margin-inline-end:8px;font-weight:600}
.pill{font-size:13px;font-weight:600;padding:4px 12px;border-radius:99px;background:var(--fill);color:var(--mute);white-space:nowrap}
.pill.done{background:var(--ok-bg);color:var(--ok)}
.pill.failed{background:var(--bad-bg);color:var(--bad)}
.pill.partial{background:var(--warn-bg);color:var(--warn)}
.pill.scheduled,.pill.publishing{background:var(--info-bg);color:var(--green)}
.empty{padding:20px 16px;color:var(--mute);font-size:15px}
.demo{display:inline-block;font-size:13px;font-weight:600;color:var(--warn);background:var(--warn-bg);padding:4px 12px;border-radius:99px;margin-top:12px}

.lrow{padding:16px 16px;position:relative}
.lrow+.lrow::before{content:"";position:absolute;top:0;inset-inline:16px 0;border-top:1px solid var(--sep)}
button.t{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;width:100%;border:0;background:none;padding:0;text-align:start;cursor:pointer}
.lrow .ttl{display:block;font-weight:500;unicode-bidi:plaintext}
.lrow .sub{display:block;font-size:var(--small);color:var(--mute)}
.stats{display:flex;gap:16px;font-size:var(--small);color:var(--mute);margin-top:4px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.stats b{color:var(--ink);font-weight:600}
.detail{margin-top:12px;background:var(--bg);border-radius:12px;overflow:hidden}
.detail .d{display:flex;align-items:center;gap:12px;padding:12px 12px;font-size:14.5px;flex-wrap:wrap}
.detail .d+.d{border-top:1px solid var(--sep)}
.detail .ic{width:24px;height:24px;border-radius:8px;font-size:10px}
.detail .ic svg{width:10px;height:10px}
.detail .d .s{margin-inline-start:auto;display:flex;gap:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.detail .d small{flex-basis:100%;color:var(--bad);font-size:13px;padding-inline-start:36px}
.detail a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink);font-weight:600}

/* analytics */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{background:var(--card);border:1px solid var(--sep);border-radius:var(--r);padding:var(--s4)}
.kpi span{font-size:var(--small);color:var(--mute);display:block}
.kpi b{font:700 28px/1.3 var(--f-display);display:block;font-variant-numeric:tabular-nums}
.chart{padding:16px 16px 12px;direction:ltr}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .ax{fill:var(--mute);font-size:23px} /* SVG units: about 13 px on a phone */
@media(min-width:560px){.chart .ax{font-size:14px}}
.chart .gl{stroke:var(--sep)}
.chart .ln{stroke:var(--green)}.chart .pt{fill:var(--green);stroke:var(--card)}
.tip{font-size:var(--small);color:var(--mute);margin-bottom:8px;min-height:22px;text-align:start}
[dir=rtl] .tip{direction:rtl}
.tip b{color:var(--ink);font-size:17px}
.prow{padding:12px 16px;position:relative}
.prow+.prow::before{content:"";position:absolute;top:0;inset-inline:64px 0;border-top:1px solid var(--sep)}
.prow .top{display:flex;align-items:center;gap:16px}
.prow .top .nm{flex:1;font-weight:500}.num{font-variant-numeric:tabular-nums;font-weight:600}
.track{height:5px;border-radius:5px;background:var(--fill);margin-block-start:8px;margin-inline-start:48px;overflow:hidden}
.track i{display:block;height:100%;border-radius:4px;background:var(--green)}

/* bottom tabs */
.tabs{position:fixed;inset-inline:0;bottom:0;z-index:10;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--sep);padding-bottom:env(safe-area-inset-bottom)}
.tabs-in{max-width:640px;margin:0 auto;display:flex}
.tab{flex:1;border:0;background:none;padding:8px 0 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;font-weight:500;color:var(--mute);cursor:pointer;min-height:56px}
.tab.on{color:var(--green);font-weight:700}
.tab.on svg{stroke-width:2.4}

.fields input:focus-visible,textarea:focus-visible,.when input:focus-visible,button.row:focus-visible,button.drop:focus-visible{outline-offset:-3px;border-radius:16px}

@media(max-width:480px){:root{--h1:27px}.hero{padding:24px 0 16px}.wrap{padding-inline:16px}.nav-in{padding-inline:16px}}
@media(max-width:350px){.steps{grid-template-columns:1fr}.kpi b{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- plans, owner, help links ---- */
.meter{display:inline-block;font-size:13px;font-weight:600;color:var(--green);background:var(--tint);padding:4px 12px;border-radius:99px;margin-top:12px;margin-inline-end:8px}
.meter.full{color:var(--bad);background:var(--bad-bg)}
a.cta{text-decoration:none}
a.hrow{color:inherit;text-decoration:none}
.chev{width:8px;height:8px;border-block-start:2px solid var(--mute);border-inline-end:2px solid var(--mute);transform:rotate(45deg);flex:none}
[dir=rtl] .chev{transform:rotate(-135deg)}
.plans{display:grid;gap:16px}
.plan{position:relative;background:var(--card);border-radius:var(--r);padding:20px 20px 20px;border:2px solid var(--sep)}
.plan.hot{border-color:var(--green)}
.plan h2{font-size:var(--h2);font-weight:700}
.plan .tag{position:absolute;top:16px;inset-inline-end:16px;font-size:13px;font-weight:600;background:var(--tint);color:var(--green);padding:4px 12px;border-radius:99px}
.price{display:flex;align-items:baseline;gap:8px;margin:8px 0 12px}
.price b{font:700 34px/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.price span{color:var(--mute);font-size:15px}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plan li{display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.plan li svg{margin-top:2px}
.plan .for{color:var(--mute);font-size:15px;margin:4px 0 0;min-height:44px}
.plan .pp{display:inline-block;font-size:13px;font-weight:600;color:var(--green);background:var(--tint);border-radius:8px;padding:4px 8px;margin:0 0 12px}
.plan .pp.ghost{visibility:hidden}
.plan li.soon{color:var(--mute)}
.plan li .soon{font-size:var(--tiny);font-weight:600;background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:1px 8px;margin-inline-start:8px}
.plan-extra{max-width:1000px;margin:20px auto 0;display:grid;gap:12px}
.plan-inc{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;list-style:none;margin:0;padding:16px 16px;border:1px dashed var(--sep);border-radius:16px;font-size:14.5px}
.plan-inc li{display:flex;align-items:center;gap:8px}
.plan-inc svg{width:16px;height:16px;color:var(--green)}
.plan-promise{text-align:center;font-weight:600;margin:0}
.plan-soon{text-align:center;color:var(--mute);font-size:14px;margin:0}
.plan li svg{width:18px;height:18px;color:var(--ok);flex:none}
.plan .cta,.plan .b-solid{display:flex;width:100%;margin-top:16px}
.note{background:var(--bg);border-radius:12px;padding:12px;text-align:start;white-space:pre-line;color:var(--ink)!important}
.lrow.dim{opacity:.55}
.lrow div.t{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.lrow .msg{display:block;margin-top:4px;white-space:pre-line}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px}
.tools select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--sep);border-radius:8px;padding:12px 12px;min-height:44px;flex:1;min-width:130px}
.cta.small{display:inline-flex;width:auto;margin:0} /* size: .b-sm in ui.css */
@media(min-width:700px){.plans{grid-template-columns:repeat(3,1fr)}}

/* Signature: the logo's detached square tile, set into the top-right corner of one main panel per page. */
.stepcut{position:relative;border-top-right-radius:0!important}
.stepcut::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:var(--green);border-left:5px solid var(--bg);border-bottom:5px solid var(--bg);pointer-events:none}
/* language menu: one control (globe + current language) that opens the three choices */
.lang-menu{position:relative;display:inline-block}
.lang-menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 12px;border:1px solid var(--sep);border-radius:8px;cursor:pointer;font:600 14px/1 var(--f-ui);color:var(--ink);background:transparent;user-select:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover{background:var(--fill)}
.lang-menu summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.lang-menu svg{width:16px;height:16px;flex:none}
.lang-menu .lm-chev{display:inline-grid;transition:transform var(--dur-press) var(--ease-out)}
.lang-menu[open] .lm-chev{transform:rotate(180deg)}
.lang-list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;min-width:170px;display:grid;padding:8px;background:var(--card);border:1px solid var(--sep);border-radius:12px}
.lang-list a,.lang-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 15px/1 var(--f-ui);text-decoration:none;cursor:pointer;text-align:start}
.lang-list a:hover,.lang-list button:hover,.lang-list a:focus-visible,.lang-list button:focus-visible{background:var(--fill);outline:none}
.lang-list [aria-current=true]{font-weight:700}
.lang-list svg{width:16px;height:16px;color:var(--green)}
@media(prefers-reduced-motion:reduce){.lang-menu .lm-chev{transition:none}}
.fields input[type=text],.fields input[type=tel]{direction:ltr;text-align:start}
[dir=rtl] .fields input[type=text],[dir=rtl] .fields input[type=tel]{text-align:right}
.pwform{padding:12px}
.pwform .cta{margin-top:12px}
.linkbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 12px 12px;width:100%}
.linkbox input{flex:1 1 100%;min-width:0;font-size:16px;min-height:44px;border:1px solid var(--sep);border-radius:8px;background:var(--card);padding:8px 12px;direction:ltr;text-align:start}
.linkbox .sub{flex:1 1 100%}


/* Free start banner (no plan yet), and the checkout plan grid: 3 plans side by side on wide screens, stacked on phones.
   .co-main raises the weight over checkout.css, which loads after this file. */
.freeb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:12px}
.freeb .meter{margin:0}
.co-main .co-plans{grid-template-columns:1fr}
/* From 900px the summary takes a side column, so the form column is too narrow for 3 cards until about 1080px. */
@media(min-width:700px) and (max-width:899px),(min-width:1080px){.co-main .co-plans{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- account screens v2 (sign up, sign in, forgot, reset) — docs/uplo/SIGNUP-V2.md ----------
   Always the brand paper (people arrive from the paper website), whatever the phone's dark mode.
   Desktop: form panel + teal panel with a labelled publishing example. One radius (12), 1 px borders, no shadows. */
.ax{color:var(--ink);background:var(--bg);min-height:100dvh;display:flex;flex-direction:column} /* light colours: .theme-light,.ax in ui.css */
.ax-main{display:flex;flex-direction:column;padding:16px 20px 28px;flex:1}
.ax-top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.ax-brand{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font:800 20px/1 var(--f-display);color:var(--ink);text-decoration:none}
.ax-brand img{width:28px;height:28px}
.ax-body{width:100%;max-width:400px;margin:28px auto 0;text-align:start}
.ax h1{font:800 28px/1.3 var(--f-display);margin:0;text-wrap:balance}
.ax .sub{color:var(--mute);margin:8px 0 0;font-size:16px}
.ax-gets{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.ax-gets li{display:flex;align-items:center;gap:12px}
.ax-gets svg{width:18px;height:18px;flex:none;color:var(--green)}
#af,#ff,#rf,#cf{margin-top:24px;display:grid;gap:16px}
.ax-f{display:block}
.ax-f>span{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.ax-f input{display:block;width:100%;min-height:48px;padding:0 16px;font-size:16px;background:var(--card);color:var(--ink);border:1px solid var(--sep);border-radius:12px;outline:none;transition:border-color var(--dur-press) var(--ease-out)}
[dir=rtl] .ax-f input{text-align:right}
.ax-f input:focus{border-color:var(--green);outline:2px solid var(--green);outline-offset:0}
.ax-pw{position:relative;display:block}
.ax-pw input{padding-inline-end:52px}
.ax-eye{position:absolute;inset-inline-end:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;background:none;color:var(--mute);border-radius:8px;cursor:pointer}
.ax-eye:hover{color:var(--ink)}
.ax-eye:focus-visible{outline:2px solid var(--green)}
.ax-hint{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px;color:var(--mute);transition:color var(--dur-press) var(--ease-out)}
.ax-hint i{display:inline-grid;width:16px;height:16px;opacity:0;transform:scale(.6);transition:opacity var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out);color:var(--green)}
.ax-hint i svg{width:16px;height:16px}
.ax-hint.ok{color:var(--green)}.ax-hint.ok i{opacity:1;transform:none}
.ax-note{display:block;margin-top:8px;font-size:13.5px;color:var(--mute)}
.ax-note a{color:var(--green);font-weight:600}
.ax-go{margin-top:var(--s1);position:relative}
.ax .ax-go:disabled{background:var(--cta);color:var(--on-cta)!important;opacity:.88} /* busy, not "off": beats .cta:disabled in ui.css */
.ax-go.spin{padding-inline-start:44px}
.ax-go.spin::before{content:"";position:absolute;inset-inline-start:20px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid color-mix(in srgb,var(--on-cta) 40%,transparent);border-top-color:var(--on-cta);border-radius:50%;animation:ax-rot .8s linear infinite}
@keyframes ax-rot{to{transform:rotate(360deg)}}
.ax .err{text-align:start}
.ax-alt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:16px 0 0}
.ax-alt .tlink{padding:8px 0;font-size:15px}
.ax-alt .tlink:hover{background:none;text-decoration:underline}
/* publishing example (decoration, labelled), desktop only: one clip, Zelly, and the 7 platforms checking in one by one.
   On phones it is gone: the form is the whole screen (it used to sit under the form as 7 copies of one photo). */
.ax-show{display:none}
@media(min-width:960px){
  .ax.has-ex{display:grid;grid-template-columns:44fr 56fr;min-height:100dvh}
  .ax-main{padding:24px 40px 40px}
  .ax-body{margin:auto;padding:24px 0}
  .ax h1{font-size:36px}
  .ax-show{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(32px,5vw,80px);background:var(--green);color:var(--on-solid)}
  .ax-ex{margin:0 0 20px;font-size:14px;font-weight:600;color:var(--saffron)}
  .ax-src{display:flex;align-items:center;gap:16px;margin-bottom:28px;max-width:520px}
  .ax-src img:first-child{width:84px;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:12px;border:1px solid color-mix(in srgb,currentColor 25%,transparent)}
  .ax-src span{flex:1;font:700 20px/1.35 var(--f-display)}
  .ax-zelly{width:56px;height:56px;flex:none}
  .ax-pfs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px}
  .ax-pfs li{display:flex;align-items:center;gap:12px;min-height:52px;padding-block:8px;padding-inline:8px 14px;border-radius:14px;background:color-mix(in srgb,var(--on-solid) 8%,transparent);border:1px solid color-mix(in srgb,var(--on-solid) 14%,transparent)}
  .ax-pfs .ic{width:34px;height:34px;border-radius:10px;color:#fff}
  .ax-pn{flex:1;min-width:0;font:600 15px var(--f-ui)}
  .ax-ok{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--saffron);color:#10241D}
  .ax-ok svg{width:14px;height:14px}
  /* the signature moment, once after the screen draws (class .play): the rows light up in turn, each tick pops, Zelly hops */
  .ax-show .ax-pfs li{opacity:.3;transform:translateY(6px)}
  .ax-show .ax-ok{transform:scale(0)}
  .ax-show .ax-src img:first-child{transform:scale(.96)}
  .ax-show.play .ax-pfs li{opacity:1;transform:none;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);transition-delay:calc(.25s + var(--i) * 110ms)}
  .ax-show.play .ax-ok{transform:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.45s + var(--i) * 110ms)}
  .ax-show.play .ax-src img:first-child{transform:none;transition:transform var(--dur) var(--ease-out)}
  .ax-show.play .ax-zelly{animation:ax-hop .7s cubic-bezier(.34,1.56,.64,1) 1.35s both}
}

/* sign-up in steps (v4): progress bar, one question per screen, slide between steps, chips, finish bounce */
#af.ax-flow{margin-top:0}
.ax-prog{height:4px;margin:0 0 12px;border-radius:2px;background:var(--sep);overflow:hidden}
.ax-prog i{display:block;width:0;height:100%;border-radius:inherit;background:var(--green);transition:width .45s var(--ease-out)}
.ax-stepn{margin:0 0 8px;font:600 13.5px var(--f-ui);color:var(--mute)}
.ax-stepn:empty{display:none}
.ax-s{display:grid;gap:16px}
.ax-s h1{margin-bottom:4px}
.ax-s.in-f{animation:ax-in-f .38s var(--ease-out) both}
.ax-s.in-b{animation:ax-in-b .38s var(--ease-out) both}
[dir=rtl] .ax-s.in-f{animation-name:ax-in-b}
[dir=rtl] .ax-s.in-b{animation-name:ax-in-f}
@keyframes ax-in-f{from{opacity:0;transform:translateX(24px)}}
@keyframes ax-in-b{from{opacity:0;transform:translateX(-24px)}}
.ax-start{display:grid;gap:12px;margin-top:12px}
.ax-start .ax-google{margin-top:0}
.ax-start .ax-or{margin:4px 0}
.ax-mail{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 16px;border:1px solid var(--sep);border-radius:12px;background:var(--card);color:var(--ink);font:600 16px var(--f-ui);cursor:pointer}
.ax-mail svg{width:20px;height:20px;flex:none}
.ax-mail.solo{background:var(--cta);border-color:transparent;color:var(--on-cta)}
.ax-mail:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ax-mail,.ax-google{transition:border-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.ax-mail:active,.ax-google:active{transform:scale(.98)}
@media(hover:hover){.ax-mail:hover,.ax-google:hover{border-color:var(--ink)}}
.ax-nav{display:flex;align-items:center;gap:12px;margin-top:4px}
.ax-nav .ax-go{flex:1;margin-top:0}
.ax-back{flex:none;min-height:52px;padding:0 12px!important;font-weight:600}
/* business type: tap a chip (was a long drop-down) */
.ax-cats{min-width:0;margin:0;padding:0;border:0}
.ax-cats legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:600}
.ax-chips{display:flex;flex-wrap:wrap;gap:8px}
.ax-chip{position:relative;cursor:pointer}
.ax-chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ax-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--sep);border-radius:99px;background:var(--card);color:var(--ink);font:600 15px var(--f-ui);transition:background-color var(--dur-press) var(--ease-out),border-color var(--dur-press) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.ax-chip:active span{transform:scale(.96)}
.ax-chip input:checked+span{background:var(--green);border-color:var(--green);color:var(--on-solid)}
.ax-chip input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
/* a field to fix: red edge and a small shake (like a wrong password on a phone) */
.ax-f input[aria-invalid=true]{border-color:var(--bad);outline-color:var(--bad);animation:ax-shake .32s}
.ax-check input[aria-invalid=true]{outline:2px solid var(--bad);outline-offset:2px}
@keyframes ax-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* the finish: the button turns into a tick and bounces, Zelly hops in the header */
.ax .ax-go.ok{background:var(--green);color:var(--on-solid)!important;opacity:1;animation:ax-bounce .6s cubic-bezier(.34,1.56,.64,1)}
.ax-go.ok svg{width:20px;height:20px;margin-inline-end:8px;vertical-align:-4px}
@keyframes ax-bounce{0%{transform:scale(.94)}45%{transform:scale(1.05)}70%{transform:scale(.98)}100%{transform:none}}
.ax-brand img.hop{animation:ax-hop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes ax-hop{0%,100%{transform:none}35%{transform:translateY(-10px) rotate(-8deg)}60%{transform:translateY(0) scale(1.06,.94)}}
@media(prefers-reduced-motion:reduce){
  .ax-show .ax-pfs li,.ax-show .ax-ok,.ax-show .ax-src img:first-child{opacity:1;transform:none;transition:none!important}
  .ax-show.play .ax-zelly,.ax-s.in-f,.ax-s.in-b,.ax-f input[aria-invalid=true],.ax-go.ok,.ax-brand img.hop{animation:none}
  .ax-go.spin::before{display:none}.ax-go.spin{padding-inline-start:20px}
  .ax-hint,.ax-hint i,.ax-f input,.ax-prog i,.ax-chip span,.ax-mail,.ax-google{transition:none}
}

/* Admin: new-payment tag in the inbox, and the open-message count on the Admin tab */
.paid-tag{color:var(--green);font-weight:700}
.tab{position:relative}
.tab-count{position:absolute;top:4px;inset-inline-start:calc(50% + 8px);min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--saffron);color:var(--on-saffron);font:700 13px/18px var(--f-ui);text-align:center}

/* sign-up v3: phone, category, consent, code step */
.ax-check{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.6;cursor:pointer}
.ax-check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--green)}
.ax-check a{color:var(--green);font-weight:600}
.ax-step1,.ax-step2{display:grid;gap:16px}
.ax-sent{margin:0;font-size:15px;color:var(--ink)}
.ax-code{letter-spacing:.3em;font-size:22px!important;text-align:center!important}
.ax-alt-row{display:flex;justify-content:space-between;gap:12px;margin:0}
.ax-alt-row .tlink{padding:8px 0}

/* account page: messages with Uplo, delete */
.thread{display:grid;gap:12px;padding:16px 16px;max-height:420px;overflow-y:auto}
.bubble{max-width:85%;padding:12px 12px;border-radius:12px;border:1px solid var(--sep);background:var(--card)}
.bubble.me{justify-self:end;background:var(--tint)}
.bubble.them{justify-self:start}
.bubble b{display:block;font-size:13px;color:var(--mute)}
.bubble p{margin:2px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble small{font-size:13px;color:var(--mute)}
.msgform{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--sep)}
.msgform textarea{flex:1;min-height:48px;padding:12px 12px;font:inherit;font-size:16px;border:1px solid var(--sep);border-radius:12px;background:var(--card);color:var(--ink);resize:vertical}
.danger-cta{width:100%} /* look: .b-danger in ui.css */
/* Owner red button (lockdown): 0 open, 1 protect (amber), 2 lockdown (red) */
.lockbar{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 16px;margin:0 0 16px;border:1px solid var(--sep);border-radius:16px;background:var(--card)}
.lockbar.lv1{border-color:var(--warn);background:var(--warn-bg)}.lockbar.lv2{border-color:var(--bad);background:var(--bad-bg)}
.lock-t b{display:block}.lock-t small{display:block;color:var(--mute);font-size:14px;margin-top:2px}
.lockbar.lv1 .lock-t small{color:var(--warn);font-weight:600}.lockbar.lv2 .lock-t small{color:var(--bad);font-weight:600}
.lock-lv{display:flex;gap:8px}.lock-lv .lvb{flex:1 1 auto} /* widths follow the words: "Verrouillage" fits on a phone */
.lvb{min-height:44px;padding:8px 8px;border:1px solid var(--sep);border-radius:8px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.lvb.lv2{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}.lvb.lv1{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.lvb.on.lv0{background:var(--ink);color:var(--card)}.lvb.on.lv1{background:var(--warn);color:var(--on-solid)}.lvb.on.lv2{background:var(--bad);color:var(--on-solid)}
.lvb:focus-visible{outline:3px solid var(--bad);outline-offset:2px}
.lock-surge{margin:0;padding:8px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-weight:600;font-size:14px}
.lock-n{color:var(--mute);font-size:14px}
.so-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-top:12px;border-top:1px solid var(--sep)}.so-row .lock-t{flex:1 1 220px}.so-row .tlink{flex:none}
#sonote:empty{display:none}#sonote.bad{color:var(--bad);font-weight:600}
.lock-pw{display:flex;gap:8px}.lock-pw input{flex:1;min-width:0;padding:12px 12px;font:inherit;font-size:16px;border:1px solid var(--sep);border-radius:8px;background:var(--card);color:var(--ink)}
/* Admin v2: filters, customer rows, customer file */
.lab-n{font-weight:600;color:var(--mute)}
.ow-tools{display:grid;gap:12px;margin:0 0 12px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.chipf{flex:none;min-height:var(--tap);padding:0 12px;border:1px solid var(--sep);border-radius:99px;background:none;color:var(--ink);font:600 14px var(--f-ui);cursor:pointer}
.chipf span{color:var(--mute);font-weight:500}
.chipf.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.chipf.on span{color:inherit;opacity:.8}
#osq{min-height:44px;padding:0 12px;font-size:16px;border:1px solid var(--sep);border-radius:12px;background:var(--card);color:var(--ink)}
.kpi-go{border:0;text-align:start;font:inherit;color:inherit;cursor:pointer}
.kpi-go:hover{outline:1px solid var(--sep)}
.flags{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pill.warnp{background:var(--warn-bg);color:var(--warn)}
.cat{font-size:13px;font-weight:500;color:var(--mute)}
.warn{color:var(--warn)}.bad{color:var(--bad)}
.file{display:grid;gap:4px;padding:4px 16px 16px}
.fsec{border-top:1px solid var(--sep);padding:12px 0}
.fsec h3{font-size:15px;margin:0 0 8px}
.fsec p{margin:4px 0}
.fsec summary{cursor:pointer;font-weight:600;display:flex;align-items:center;min-height:var(--tap)}
.fsec .thread{padding:0 0 8px;max-height:320px}
.fsec .msgform{padding:8px 0 0;border:0}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plist li{display:grid;gap:2px}
.plist small{font-size:13px;color:var(--mute)}
.plist small.bad{color:var(--bad)}

/* Google sign-in button (white, official G) and the "or" divider */
.ax-google{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;margin-top:24px;border:1px solid var(--sep);border-radius:12px;background:var(--card);color:var(--ink);font:600 16px var(--f-ui);text-decoration:none} /* Google asks for a white button: .ax is always light */
.ax-google:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ax-or{display:flex;align-items:center;gap:12px;margin:20px 0 -8px;color:var(--mute);font-size:13.5px}
.ax-or::before,.ax-or::after{content:"";flex:1;height:1px;background:var(--sep)}

/* analytics: locked card for the simple level */
.lockcard{padding:20px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lockcard b{font-size:16px}
.lockcard p{margin:0 0 8px;color:var(--mute);font-size:15px}
.plan .for.lead{min-height:0;margin:12px 0 0}

/* v12 (14 Nov): brands in one account (switcher in the top bar + Brands group) and the free trial on the plans page */
.bav{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;flex:none;color:var(--on-cta);font:700 14px/1 var(--f-ui)} /* white on the fixed avatar colours */
.bs-menu summary{padding:0 8px 0 8px;gap:8px}
.bs-nm{max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-list{min-width:240px;max-width:min(300px,calc(100vw - 32px))}
.bs-list button{justify-content:flex-start}
.bs-list button[disabled]{opacity:.55;cursor:not-allowed}
.bs-list button > svg{margin-inline-start:auto}
.bs-n{display:grid;gap:4px;min-width:0;text-align:start}
.bs-n > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-n small{font-size:13px;color:var(--mute);font-weight:500}
.bs-h{margin:4px 12px 8px;font:600 13px/1.4 var(--f-ui);color:var(--mute);display:flex;justify-content:space-between}
.bs-list .bs-manage{border-top:1px solid var(--sep);border-radius:0 0 8px 8px;margin-top:4px;color:var(--green);font-weight:600}
.bs-row{gap:8px 12px;flex-wrap:wrap}
.bs-who{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 190px}
.bs-who > div{display:grid;gap:2px;min-width:0}
.bs-who > div > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;margin-inline-start:auto}
.bs-add{display:flex;gap:8px;align-items:center}
.bs-add input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--sep);border-radius:8px;background:var(--card);color:var(--ink);font:16px var(--f-ui)}
.bs-add input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.bs-add .bs-go{width:auto;margin:0;min-height:44px;padding:0 16px;flex:none}
.bs-count{font-weight:500;color:var(--mute);margin-inline-start:8px}
.trial-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--mute);text-align:center}
.hero .trial-now{margin-top:8px;font-weight:600;color:var(--ink)} /* plan page during the trial: the exact end date (U26) */
.trial-pay{display:block;margin:8px auto 0;color:var(--mute);font-size:14px}
@media(max-width:420px){.bs-nm{display:none}.bs-menu .lm-chev{display:none}}
@media(max-width:600px){.bs-menu .bs-list{position:fixed;top:62px;left:16px;right:16px;min-width:0;max-width:none}}

/* first-video checklist (goal gradient: step 0 "account created" is already ticked) */
.fc{padding:var(--s4);margin-top:var(--s2)}
.fc-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.fc-head h2{font-size:var(--h3);font-weight:700}
.fc-n{font-size:var(--small);color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.fc .bar{margin:var(--s3) 0}
.fc-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.fc-list li{display:flex;align-items:center;gap:var(--s3);min-height:32px;color:var(--mute)}
.fc-list li.ok,.fc-list li.now{color:var(--ink)}
.fc-list li.now{font-weight:600}
.fc-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;border:1.5px solid var(--sep);font:700 var(--tiny)/1 var(--f-ui);font-variant-numeric:tabular-nums}
.fc-dot svg{width:16px;height:16px}
.fc-list li.ok .fc-dot{background:var(--green);border-color:var(--green);color:var(--on-solid)}
.fc-list li.now .fc-dot{border-color:var(--saffron);border-width:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* empty screens: what goes here + the next step */
.empty-s{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s6) var(--s4) var(--s5)}
.empty-s h2{font-size:var(--h3);font-weight:700;margin-top:var(--s3)}
.empty-s p{margin:var(--s1) 0 0;color:var(--mute);max-width:34ch}
.empty-s .cta{width:auto;margin-top:var(--s4)}
.empty-ic{width:56px;height:56px;border-radius:var(--r);background:var(--tint);color:var(--green);display:grid;place-items:center}
.empty-m{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px} /* small empty list: icon, sentence, button (rule 6) */
.empty-m .empty-ic{width:40px;height:40px;flex:none;border-radius:12px}
.empty-m p{flex:1 1 160px;min-width:0;margin:0;color:var(--mute);font-size:15px}
.empty-m .cta{flex:none;width:auto;margin:0}
/* placeholder shapes while a list loads the first time (shapes: .ph in ui.css) */
.sk-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);min-height:60px}
.sk-ic{width:32px;height:32px;flex:none}
.sk-txt{flex:1;display:grid;gap:var(--s2)}
.sk-l1{height:14px;width:70%}.sk-l2{height:12px;width:45%}
.sk-big{height:28px;width:55%;margin-top:var(--s2)}
/* analytics: one headline number first (views), the rest below */
#an .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
#an .kpis .kpi:first-child{grid-column:1/-1}
#an .kpis .kpi:first-child b{font-size:40px}
#an .kpis .kpi:not(:first-child){padding:var(--s3)}
#an .kpis .kpi:not(:first-child) b{font-size:22px}
/* first paint, before the app script has drawn anything */
.boot-sk{max-width:640px;margin:0 auto;padding:88px 20px 0;display:grid;gap:var(--s3)}
.boot-sk .sk-big{width:60%;height:30px}
.boot-card{height:220px;border-radius:var(--r);margin-top:var(--s4)}
/* when: "now" by default, "schedule for later" is a quiet option */
#whg .hrow{min-height:56px}
#whg .when{padding:var(--s3) var(--s4) 0}
/* offline bar (under the top bar) */
.offbar{position:fixed;top:calc(56px + env(safe-area-inset-top));inset-inline:0;z-index:20;padding:var(--s2) var(--s4);background:var(--warn-bg);color:var(--warn);border-bottom:1px solid var(--sep);font-size:var(--small);font-weight:600;line-height:1.5;text-align:center}
.offbar.ok{background:var(--ok-bg);color:var(--ok)}

/* stats page: when the numbers were read (14 Nov 2026) */
.an-meta{font:var(--small)/1.6 var(--f-ui);color:var(--mute);margin:0 0 16px}
/* calm note before a limit (limitNote in app.js) */
.meter-note{margin:12px 0 0;font:var(--small)/1.6 var(--f-ui);color:var(--mute)}

/* ---------- brand palette pass (14 Nov 2026): help menu in the header, selected tab ---------- */
.nav-actions{gap:8px}
@media(max-width:420px){.help-menu .hm-l{display:none}.help-menu summary{padding:0 12px}} /* phone: the "?" icon, its name is in aria-label */
/* selected tab: a soft green shape behind the icon (10 px corners, not a pill: BRIEF-V7 law 1) */
.tab svg{box-sizing:content-box;padding:4px 16px;border-radius:8px;transition:background-color var(--dur) var(--ease-out)}
.tab.on svg{background:var(--tint)}
@media (hover:hover) and (pointer:fine){.tab:not(.on):hover svg{background:var(--fill)}}
@media(prefers-reduced-motion:reduce){.tab svg{transition:none}}

/* first video live: Zelly's Done-Stamp and brand confetti, once (app.js celebrate). A rare moment, so a little longer than UI motion. */
.zstamp{width:84px;height:84px;margin:0 auto 20px}
.zstamp svg{width:100%;height:100%;display:block;overflow:visible}
.z-body{fill:var(--zelly);stroke:var(--zelly-line);stroke-width:3}.z-glint{fill:var(--zelly-glint)}.z-eye{fill:var(--zelly-line)}.z-pupil{fill:var(--zelly-pupil)}
.z-check{fill:none;stroke:var(--zelly-glint);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.zstamp.play{animation:z-stamp 600ms var(--ease-out) both}
.zstamp.play .z-check{stroke-dashoffset:1;animation:z-check var(--dur-slow) var(--ease-out) 520ms forwards}
@keyframes z-stamp{0%{transform:rotate(-360deg) scale(.6);opacity:0}70%{transform:rotate(0) scale(1.06);opacity:1}100%{transform:none;opacity:1}}
@keyframes z-check{to{stroke-dashoffset:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:8px;height:12px;border-radius:4px;animation:confetti 1100ms var(--ease-out) forwards}
@keyframes confetti{to{transform:translate3d(var(--dx),105vh,0) rotate(var(--rot))}}
@media(prefers-reduced-motion:reduce){.zstamp.play{animation:z-fade var(--dur) ease both}.zstamp.play .z-check{animation:none;stroke-dashoffset:0}}
@keyframes z-fade{from{opacity:0}}
/* one-tap cancel reason before the card page */
.why>div{display:grid;gap:var(--s2);width:100%}
.why-list{display:flex;flex-wrap:wrap;gap:var(--s2)}
.why .tlink{justify-self:start;padding-inline:0}
/* plans: the yearly offer as its true monthly cost, right under the monthly price */
.plan .yearly{margin:-8px 0 12px;color:var(--mute);font-size:var(--small)}
/* rule 3: at twice the text size nothing is cut off or pushed off screen; rows wrap instead */
.hrow,.msgform,.lock-lv,.lock-pw,.lrow div.t,button.t,.bs-add,.linkbox,.flags{flex-wrap:wrap}
.hrow>*,.lrow div.t>*,button.t>*,.msgform>*{min-width:0}
.lock-pw input,.msgform textarea{flex:1 1 160px}
.bs-add .bs-go{flex:0 1 auto;max-width:100%}
.ow-tools{grid-template-columns:minmax(0,1fr)}#osq{min-width:0;width:100%}
/* rule 3: at twice the text size the bottom tabs keep whole labels and the bar scrolls sideways; at normal size all tabs fit */
.tabs-in{overflow-x:auto;scrollbar-width:none}.tabs-in::-webkit-scrollbar{display:none}

/* ---------- motion briefs (14 Nov 2026, APPLY-FROM-REELS section 14, from the Motion Prompt UI pack) ----------
   Timings from ui.css: --dur 200 ms, --dur-slow 250 ms; nothing moves with "reduce motion". */
/* Tabs: one soft green shape slides from the last tab to the new one (0.25 s, ease-in-out) instead of jumping.
   app.js (placeTabInd) puts .tab-ind exactly behind the selected tab's icon. */
.tabs-in{position:relative}
.tab-ind{position:absolute;top:0;left:0;width:0;height:0;border-radius:10px;background:var(--tint);pointer-events:none;transition:transform var(--dur-slow) var(--ease-io)}
.tabs-in.has-ind .tab.on svg{background:none}
/* Info messages ("You are now on brand X", "Trial started") come in as a toast above the tabs and leave by themselves.
   Errors stay in the page until read. */
.toast{position:fixed;inset-inline:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:30;max-width:560px;margin:0 auto;padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--bg);font:500 15px/1.55 var(--f-ui);text-align:start;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.toast.show{opacity:1;transform:none}
.kb-open .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
/* Empty screens: icon, sentence and button rise 8 px while fading in */
.empty-s{animation:rise var(--dur-slow) var(--ease-out) both}
/* Phones: the language, Help and brand menus open as a sheet from the bottom, over a dim layer that closes it when tapped. */
@media(max-width:600px){
  .nav:has(details[open]){z-index:40;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)} /* a blurred header would trap the fixed sheet inside it */
  .lang-menu[open]>summary::before{content:"";position:fixed;inset:0;z-index:60;background:rgba(10,20,16,.36);cursor:default}
  .lang-menu .lang-list,.bs-menu .bs-list{position:fixed;top:auto;bottom:0;inset-inline:0;left:0;right:0;z-index:61;min-width:0;max-width:none;max-height:70vh;overflow:auto;border-radius:16px 16px 0 0;border-bottom:0;padding:8px 8px calc(16px + env(safe-area-inset-bottom));animation:sheet-up var(--dur-slow) var(--ease-out)}
  .lang-menu .lang-list::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--sep);margin:4px auto 10px}
  .lang-list a,.lang-list button{min-height:52px;font-size:16px}
}
@keyframes sheet-up{from{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){.tab-ind,.toast{transition:none}.empty-s,.lang-menu .lang-list,.bs-menu .bs-list{animation:none}}

/* U16: Zelly on empty screens and calm error screens. Small, one per screen; blinks every few seconds; still with reduced motion */
.zm{display:block;width:56px;height:56px;margin:0 0 12px}
.empty-s .zm,.done-hero .zm{margin-inline:auto}
.zm.big{width:84px;height:84px;margin-bottom:20px}
.zm svg{display:block;width:100%;height:100%}
.zelly .z-eyes{transform-origin:32px 31px;transform-box:view-box;animation:z-blink 6s infinite}
@keyframes z-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@media(prefers-reduced-motion:reduce){.zelly .z-eyes{animation:none}}
/* U17: a stats row keeps the whole platform name at twice the text size; the number moves under it */
.prow .top{flex-wrap:wrap}.prow .top .nm{flex:1 1 auto;min-width:0}
/* U17: text buttons in a row (change password, add a phone) wrap at twice the text size instead of spilling */
.hrow .tlink{max-width:100%;white-space:normal}.hrow .tlink .chip{white-space:normal;text-align:center}

/* Photo posts (14 Nov): Video | Photos switch, photo tiles (number, crop or fit, move earlier/later), shape, notes.
   Tiles follow the reading direction (photo 1 on the right in Arabic); the arrows flip with it. */
.kind{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:20px 0 0;background:var(--card);border:1px solid var(--sep);border-radius:var(--r)}
.kbtn,.sbtn{min-height:var(--tap);padding:8px 12px;border:0;border-radius:12px;background:none;color:var(--ink);font:600 var(--body)/1.3 var(--f-ui);cursor:pointer;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.kbtn.on,.sbtn.on{background:var(--green);color:var(--on-cta)}
.kbtn:not(.on):hover,.sbtn:not(.on):hover{background:var(--tint)}
.seg{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;border:1px solid var(--sep);border-radius:14px}
.sbtn{font-size:15px;white-space:nowrap}
.ph-shape{flex-wrap:wrap;border-top:1px solid var(--sep)}
.phgrid{list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:560px){.phgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:359px){.phgrid{grid-template-columns:minmax(0,1fr)}}
.pht{min-width:0;display:flex;flex-direction:column;gap:6px}
.ph-img{position:relative;aspect-ratio:var(--ph-ar);border-radius:12px;overflow:hidden;background:var(--video);cursor:grab;user-select:none;-webkit-user-select:none}
.ph-img.fit{background:#fff;cursor:default}
.ph-img img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ph-img.fit img{object-fit:contain;object-position:50% 50%!important}
.ph-n{position:absolute;top:6px;inset-inline-start:6px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;display:grid;place-items:center;background:var(--green);color:var(--on-cta);font:700 14px/1 var(--f-ui)}
.ph-x{position:absolute;top:2px;inset-inline-end:2px;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;background:none;cursor:pointer;padding:0}
.ph-x svg{width:28px;height:28px;padding:5px;border-radius:14px;background:rgba(10,20,16,.62);color:#fff;stroke:#fff}
.ph-bar{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:3px;align-items:center}
.ph-mv,.ph-fit{min-height:var(--tap);border:1px solid var(--sep);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0 4px;font:600 14px/1.2 var(--f-ui);min-width:0}
.ph-fit{color:var(--green);font-size:13px;padding:0 2px}
.ph-mv:disabled{opacity:.35;cursor:default}
.ph-mv.nx svg{transform:scaleX(-1)}
[dir=rtl] .ph-mv svg{transform:scaleX(-1)}
[dir=rtl] .ph-mv.nx svg{transform:none}
.pht.add{justify-content:flex-start}
.ph-add{aspect-ratio:var(--ph-ar);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px dashed color-mix(in srgb,var(--ink) 24%,transparent);border-radius:12px;background:none;color:var(--ink);font:600 15px/1.3 var(--f-ui);cursor:pointer;padding:8px;text-align:center}
.ph-add .circle{width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--green);display:grid;place-items:center}
.ph-add:hover{background:var(--tint)}
.ph-tip{margin:0;padding:0 16px 14px;font-size:var(--small);color:var(--mute)}
.pnotes{display:flex;flex-direction:column;gap:4px}
.pnotes span{display:block;padding-inline-start:12px;border-inline-start:3px solid var(--saffron)}
.lthumb{flex:none;width:40px;height:50px;border-radius:8px;object-fit:cover;background:var(--video)}
button.t:has(.lthumb)>span:first-of-type{flex:1 1 0}
@media(prefers-reduced-motion:reduce){.kbtn,.sbtn{transition:none}}

/* ---------- app redesign (14 Nov, owner: "the app looks like it is from another place") ----------
   Laptops: the bottom tabs become a left sidebar (right in Arabic) and the screen gets more room. */
@media(min-width:1024px){
  body:has(.tabs){padding-inline-start:232px} /* only screens with the tab sidebar; the account screens (.ax) stay full width */
  .tabs{inset-block:0;inset-inline:0 auto;width:232px;padding:72px 12px 24px;border-top:0;border-inline-end:1px solid var(--sep);background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .tabs-in{flex-direction:column;gap:4px;max-width:none;margin:0;overflow:visible}
  .tab{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:8px 12px;border-radius:12px;font-size:15px}
  .tab svg,.tab.on svg{padding:0;background:none}
  .tab-ind{border-radius:12px;transition:transform var(--dur-slow) var(--ease-out)}
  .tab-count{top:8px;inset-inline-start:auto;inset-inline-end:12px}
  .wrap{max-width:720px;padding-bottom:64px}.nav-in{max-width:720px}
  .dock{bottom:16px}
  .toast{bottom:24px}
}
/* Stats on phones: the three small figures keep whole words (French "Commentaires") */
@media(max-width:420px){
  #an .kpis .kpi:not(:first-child){padding:var(--s2) var(--s3)}
  #an .kpis .kpi:not(:first-child) span{font-size:13px;overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto}
}
/* Accounts: "Disconnect" is a quiet text button; the confirm step asks before anything happens */
#acc .tlink.danger{color:var(--mute)}
#acc .tlink.danger:hover{color:var(--bad)}
/* plan cards side by side can shrink: at twice the text size they wrap instead of pushing the page wider */
.plans>*{min-width:0}
.plan .price{flex-wrap:wrap}

/* ---------- Owner Admin v2, support chat, problem line, card plan change (14 Nov, docs/uplo/ADMIN-PLAN.md) ---------- */
/* Admin: five parts, wider on laptops so the accounts table fits */
.owp{margin:0 0 16px}
@media(min-width:1024px){body:has(.owv) .wrap,body:has(.owv) .nav-in{max-width:1120px}}
.owv button.hrow{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;min-height:var(--tap)}
.owv button.hrow:hover{background:var(--fill)}
.owv .kpis{margin-bottom:var(--s2)}
.ow-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ow-row #osq{flex:1 1 220px}
.ow-sort{display:inline-flex;align-items:center;gap:8px;font-size:var(--small);color:var(--mute)}
.ow-sort select{font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--sep);border-radius:8px;min-height:44px;padding:0 8px}
/* accounts: one button per account; a table row on a laptop, a card on a phone */
.orow{display:grid;gap:4px;width:100%;padding:14px 16px;border:0;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer;position:relative}
.orow+.orow::before{content:"";position:absolute;top:0;inset-inline:16px 0;border-top:1px solid var(--sep)}
.orow:hover{background:var(--fill)}
.orow>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.orow small{display:block;font-size:13px;color:var(--mute);overflow-wrap:anywhere}
.orow small.bad{color:var(--bad)}.orow small.warn{color:var(--warn)}
.orow .oc-a{display:block}
.orow .oc-a b{font-weight:600;unicode-bidi:plaintext}
.ohead{display:none}
@media(min-width:900px){
  .orow{grid-template-columns:minmax(0,2.1fr) minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.1fr);gap:12px;align-items:center}
  .orow>span{display:block}
  .orow .oc-p .pill{display:inline-block;margin-top:4px}
  .ohead{display:grid;cursor:default;padding-block:10px;font-size:13px;font-weight:600;color:var(--mute)}
  .ohead:hover{background:none}
}
.oc-pl{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.oc-pl>span{display:inline-flex}
.ic-re{border-radius:8px;outline:2px solid var(--saffron);outline-offset:1px}
/* alerts: one row per problem */
.al{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 16px;position:relative}
.al+.al::before{content:"";position:absolute;top:0;inset-inline:16px 0;border-top:1px solid var(--sep)}
.al-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--warn)}
.al-dot.k-pay,.al-dot.k-upload,.al-dot.k-post{background:var(--bad)}
.al-dot.k-chat{background:var(--saffron)}
.al-dot.k-idle,.al-dot.k-limit{background:var(--line-2)}
.al-t{flex:1 1 200px;min-width:0;display:grid;gap:2px}
.al-t b{font-weight:600;unicode-bidi:plaintext}
.al-t small{font-size:13.5px;color:var(--mute)}
.al-b{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ad-pl{display:inline-flex;align-items:center;gap:8px}
/* one account's page */
.back{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);margin:0 0 8px;padding:0;font-weight:600}
[dir=rtl] .back svg{transform:scaleX(-1)}
.acct-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 16px 4px}
.acct-h h2{margin:0;font:600 var(--h2)/1.3 var(--f-display);unicode-bidi:plaintext}
.acct-h p{margin:4px 0}
.acct-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.abtns .tools+.tools{border-top:1px solid var(--sep)}
.note-b{white-space:pre-wrap;overflow-wrap:anywhere}
.owv .plist{padding:12px 16px}
.owv .group>.fsec{padding-inline:16px}
/* chat lists (Admin → Chats, Accounts) */
.chrow{align-items:center}
.ch-t{display:grid;gap:2px;min-width:0;flex:1}
.ch-t small{display:block;color:var(--mute);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-n{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--saffron);color:var(--on-saffron);font:700 13px/22px var(--f-ui);text-align:center;flex:none}
button.chrow{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;min-height:var(--tap)}
button.chrow:hover{background:var(--fill)}
/* help menu: red dot when Zelly answered */
.help-menu summary{position:relative}
.hm-dot{position:absolute;top:6px;inset-inline-end:6px;width:9px;height:9px;border-radius:50%;background:var(--bad);border:2px solid var(--bg)}
.lang-list .ch-n{margin-inline-start:auto}
/* customer chat panel: from the bottom on a phone, on the side on a laptop */
body.chat-open{overflow:hidden}
.chatp{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.chat-bg{position:absolute;inset:0;background:rgba(10,20,16,.36)}
.chat-in{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:86vh;background:var(--card);border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom);animation:sheet-up var(--dur-slow) var(--ease-out)}
.chat-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--sep)}
.chat-who{display:flex;align-items:center;gap:12px;min-width:0}
.chat-who .zm{width:36px;height:36px;margin:0;flex:none}
.chat-who b{display:block}.chat-who small{display:block;color:var(--mute);font-size:13.5px}
.chat-x{width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:12px;background:none;color:var(--ink);cursor:pointer;flex:none}
.chat-x:hover{background:var(--fill)}
.chat-in .thread{flex:1;min-height:180px;max-height:none;align-content:start}
.chat-in .err{margin:0 16px}
@media(min-width:900px){
  .chatp{justify-content:flex-end;align-items:stretch}
  .chat-in{max-width:420px;max-height:none;height:100%;border-radius:0;border-inline-start:1px solid var(--sep);animation:none}
}
@media(prefers-reduced-motion:reduce){.chat-in{animation:none}}
/* the customer's own problem, at the top of the screen */
.nbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:12px 12px 12px 16px;border-radius:var(--r);background:var(--warn-bg);color:var(--warn);font-weight:500}
.nbar.bad{background:var(--bad-bg);color:var(--bad)}
.nb-t{flex:1 1 220px;min-width:0}
.nb-b{display:flex;align-items:center;gap:4px}
.nbx{width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:12px;background:none;color:inherit;cursor:pointer}
.nbx svg{width:18px;height:18px}
/* plan change: one clear step before the yes */
.pchange{margin-top:16px;padding:16px}
.pchange h2{margin:0 0 8px;font:600 var(--h3)/1.4 var(--f-display)}
.pchange p{margin:4px 0}
.pchange .tools{padding:12px 0 0}