:root{
  --bg:#0b0a09; --panel:rgba(26,23,20,.62); --panel2:rgba(34,30,26,.55); --line:rgba(222,196,152,.13);
  --text:#f4efe6; --muted:#a39a8b; --violet:#d6b27a; --cyan:#efdcb3; --pink:#a9793f; --green:#9ccaa6;
  --amber:#e7b866; --red:#e38b7f; --r:22px; --grad:linear-gradient(120deg,#f6e6c3,#d6b27a 48%,#9d7444);
  --ink:#17130e;
  --shadow:0 24px 60px -24px rgba(0,0,0,.85), 0 0 0 1px var(--line) inset;
  font-family:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{overflow-x:hidden;background:radial-gradient(1100px 700px at 85% -10%,rgba(214,178,122,.13),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(169,121,63,.10),transparent 60%),var(--bg)}
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--red);min-height:1.2em;font-size:.9rem}
.glass{background:var(--panel);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--shadow)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% 0}}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:.6rem;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.brand b{font-weight:800}
.brand.big{font-size:1.6rem;justify-content:center}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--grad);position:relative;box-shadow:0 0 24px rgba(214,178,122,.7);animation:spin 8s linear infinite}
.logo-mark::after{content:"";position:absolute;inset:6px;border-radius:5px;background:var(--bg)}
.logo-mark::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--cyan);z-index:1;box-shadow:0 0 12px var(--cyan)}
@keyframes spin{to{transform:rotate(360deg)}}
.badge{font-size:.62rem;padding:.25rem .5rem;border-radius:99px;letter-spacing:.12em;font-weight:700}
.badge.lab{background:rgba(231,184,102,.15);color:var(--amber);border:1px solid rgba(231,184,102,.4)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;color:var(--text);
  font:600 .95rem "Manrope";padding:.85rem 1.25rem;border-radius:14px;transition:transform .2s,box-shadow .3s,background .3s;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.primary{color:var(--ink);background:var(--grad);background-size:180% 100%;box-shadow:0 10px 30px -8px rgba(214,178,122,.8)}
.btn.primary:hover{background-position:100% 0}
.btn.ghost{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.small{padding:.6rem .95rem;font-size:.85rem;border-radius:12px}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn.glow::after{content:"";position:absolute;inset:-2px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);transform:translateX(-120%);animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{60%,100%{transform:translateX(120%)}}
.btn em{font-style:normal;background:rgba(0,0,0,.35);padding:.1rem .55rem;border-radius:99px;font-size:.8rem}
.icon-btn{border:0;background:rgba(255,255,255,.06);color:var(--text);width:38px;height:38px;border-radius:12px;cursor:pointer;display:grid;place-items:center;flex:none;transition:.2s}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn.danger:hover{background:rgba(227,139,127,.2);color:var(--red)}

/* ---------- icons (pure CSS masks) ---------- */
[class^="i-"],[class*=" i-"]{display:inline-block;width:18px;height:18px;background:currentColor;flex:none;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-plus{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.i-x{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.i-rocket{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 15c-1.5 1.5-2 5-2 5s3.5-.5 5-2M9 15l-3-3c1-4 5-9 12-9 0 7-5 11-9 12z'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.6'/%3E%3C/svg%3E")}
.i-stack{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5'/%3E%3C/svg%3E")}
.i-search{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.i-trash{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E")}
.i-film{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='2' width='14' height='20' rx='3'/%3E%3Cpath d='M10 9l5 3-5 3z' fill='black'/%3E%3C/svg%3E")}
.i-image{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E")}
.i-chevron{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-ig{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black'/%3E%3C/svg%3E")}
.i-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}

/* ---------- login ---------- */
.login{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{position:relative;width:min(420px,100%);padding:44px 32px 30px;border-radius:28px;text-align:center;
  background:var(--panel);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:var(--shadow),0 0 80px -20px rgba(214,178,122,.6);transform-style:preserve-3d}
.login-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),var(--cyan),var(--violet),var(--pink),var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 5s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rot{to{--a:360deg}}
.login .orb{width:84px;height:84px;margin:-86px auto 14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,var(--cyan) 20%,var(--violet) 55%,var(--pink));box-shadow:0 0 60px rgba(214,178,122,.9);animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.login form{display:grid;gap:12px;margin-top:22px}
input,textarea,select{font:inherit;color:var(--text);background:rgba(10,9,8,.55);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;outline:none;transition:border .2s,box-shadow .2s;width:100%}
input:focus,textarea:focus,select:focus{border-color:rgba(214,178,122,.8);box-shadow:0 0 0 4px rgba(214,178,122,.18)}

/* ---------- app shell ---------- */
#app{position:relative;z-index:2;padding:14px clamp(12px,3vw,34px) 120px;max-width:1500px;margin:0 auto}
.topbar{position:sticky;top:10px;z-index:20;display:flex;align-items:center;gap:18px;padding:12px 16px;border-radius:20px;flex-wrap:wrap}
.days{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.days button{border:0;cursor:pointer;color:var(--muted);background:rgba(255,255,255,.04);padding:.45rem .8rem;border-radius:10px;font:600 .8rem "Manrope";white-space:nowrap}
.days button.on{color:var(--ink);background:var(--grad);box-shadow:0 0 0 1px rgba(214,178,122,.7) inset}
.stats{display:flex;gap:10px}
.stat{position:relative;display:grid;place-items:center;width:62px;height:62px}
.stat svg{position:absolute;inset:0;transform:rotate(-90deg)}
.stat circle{fill:none;stroke-width:4}
.stat .track{stroke:rgba(255,255,255,.07)}
.stat .val{stroke:var(--violet);stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.stat.ready .val{stroke:var(--cyan)} .stat.live .val{stroke:var(--green)} .stat.issue .val{stroke:var(--red)}
.stat b{font-size:1.05rem;line-height:1;margin-top:-6px}
.stat small{position:absolute;bottom:-4px;font-size:.55rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:34px 4px 22px;flex-wrap:wrap}
.hero h1{margin:0;font-size:clamp(1.9rem,4.4vw,3.3rem);font-weight:800;letter-spacing:-.02em}
.hero p{margin:.4rem 0 0;max-width:560px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- grid + cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.card{position:relative;border-radius:var(--r);animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.card-inner{position:relative;border-radius:inherit;padding:16px;background:linear-gradient(160deg,rgba(34,30,26,.72),rgba(14,12,10,.72));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);display:grid;gap:12px}
.card-glow{position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent,var(--c,var(--violet)),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;animation:rot 6s linear infinite;pointer-events:none}
.card[data-s="ready"]{--c:var(--cyan)} .card[data-s="published"],.card[data-s="scheduled"]{--c:var(--green)}
.card[data-s="failed"],.card[data-s="check"]{--c:var(--red)} .card.busy{--c:var(--pink)}
.card.busy .card-glow{animation-duration:1.6s;opacity:1}
.card[data-s="published"] .card-inner{background:linear-gradient(160deg,rgba(30,44,34,.6),rgba(12,14,12,.75))}
.card-head{display:flex;gap:10px;align-items:center}
.client-pick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;color:var(--text);text-align:left;background:rgba(255,255,255,.05);border-radius:14px;padding:8px 10px;font:inherit;box-shadow:0 0 0 1px var(--line) inset;transition:.2s}
.client-pick:hover{background:rgba(255,255,255,.09)}
.client-pick.empty{box-shadow:0 0 0 1px rgba(231,184,102,.5) inset;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:0 0 0 1px rgba(231,184,102,.9) inset,0 0 20px rgba(231,184,102,.25)}}
.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;flex:none;background:var(--grad);color:#15110c;font-size:.95rem}
.who{min-width:0;display:grid}
.who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{color:var(--cyan);font-family:"IBM Plex Mono";font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dup{background:rgba(227,139,127,.14);color:#f0b8ae;border:1px solid rgba(227,139,127,.45);border-radius:12px;padding:.55rem .75rem;font-size:.82rem;font-weight:600}

.media{display:flex;gap:10px;justify-content:flex-start}
.slot{position:relative;height:250px;aspect-ratio:9/16;flex:none;border-radius:16px;overflow:hidden;cursor:pointer;background:rgba(0,0,0,.35);
  box-shadow:0 0 0 1px var(--line) inset;display:grid;place-items:center;transition:transform .25s,box-shadow .25s}
.slot:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(214,178,122,.6) inset,0 12px 30px -12px rgba(214,178,122,.6)}
.slot.over{box-shadow:0 0 0 2px var(--cyan) inset,0 0 30px rgba(239,220,179,.4)}
.slot-empty{display:grid;justify-items:center;gap:8px;color:var(--muted);font-size:.85rem;text-align:center}
.slot-empty i{width:30px;height:30px;color:var(--violet)}
.slot-fill{position:absolute;inset:0;display:none}
.slot.filled .slot-fill{display:block}.slot.filled .slot-empty{display:none}
.slot-fill img,.slot-fill video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot-fill video{opacity:0;transition:opacity .3s}
.slot:hover .slot-fill video.ready{opacity:1}
.chips{position:absolute;left:6px;right:6px;bottom:6px;display:flex;flex-wrap:wrap;gap:4px}
.chips span{font:600 .62rem "IBM Plex Mono";padding:.2rem .4rem;border-radius:6px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.chips .warn{background:rgba(231,184,102,.85);color:#1a1200}
.chips .bad{background:rgba(227,139,127,.9)}
.slot .clear{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:9px;border:0;background:rgba(0,0,0,.6);color:#fff;display:none;place-items:center;cursor:pointer}
.slot.filled .clear{display:grid}
.slot .clear i{width:14px;height:14px}
.ring{position:absolute;inset:0;display:none;place-items:center;background:rgba(11,10,9,.6);backdrop-filter:blur(4px)}
.slot.up .ring{display:grid}
.ring svg{position:absolute;width:62%;max-width:90px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}.ring .track{stroke:rgba(255,255,255,.1)}
.ring .val{stroke:url(#g);stroke:var(--cyan);stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;transition:stroke-dashoffset .3s}
.ring b{font-size:.9rem}

.caption-wrap{position:relative}
.caption{resize:vertical;min-height:96px;padding-right:52px;font-size:.88rem;line-height:1.45}
.cap-meter{position:absolute;right:8px;top:8px;width:40px;height:40px;display:grid;place-items:center}
.cap-meter svg{position:absolute;inset:0;transform:rotate(-90deg)}
.cap-meter circle{fill:none;stroke-width:3}.cap-meter .track{stroke:rgba(255,255,255,.08)}
.cap-meter .val{stroke:var(--green);stroke-linecap:round;stroke-dasharray:94.2;stroke-dashoffset:94.2;transition:stroke-dashoffset .2s,stroke .2s}
.cap-num{font:600 .58rem "IBM Plex Mono"}
.cap-meter.warn .val{stroke:var(--amber)} .cap-meter.over .val{stroke:var(--red)} .cap-meter.over .cap-num{color:var(--red)}

.opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;background:rgba(255,255,255,.05);border-radius:12px;padding:3px;box-shadow:0 0 0 1px var(--line) inset}
.seg button{border:0;background:transparent;color:var(--muted);font:600 .8rem "Manrope";padding:.45rem .8rem;border-radius:9px;cursor:pointer;transition:.25s}
.seg button.on{background:var(--grad);color:var(--ink);box-shadow:0 4px 14px -4px rgba(214,178,122,.8)}
.grad{width:auto;padding:.45rem .7rem;font-size:.8rem;border-radius:10px}
.sched{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);cursor:pointer}
.sched input[type=checkbox]{width:16px;height:16px;accent-color:var(--violet)}
.sched-at{width:auto;padding:.4rem .6rem;font-size:.8rem;border-radius:10px}

.card-foot{display:flex;align-items:center;gap:8px}
.status{flex:1;display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;min-width:0}
.status .st-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none;box-shadow:0 0 10px currentColor}
.card[data-s="ready"] .dot{background:var(--cyan);color:var(--cyan)}
.card[data-s="published"] .dot,.card[data-s="scheduled"] .dot{background:var(--green);color:var(--green)}
.card[data-s="failed"] .dot,.card[data-s="check"] .dot{background:var(--red);color:var(--red)}
.card.busy .dot{background:var(--pink);color:var(--pink);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}
.msg{font-size:.8rem;color:var(--muted);min-height:0}
.msg:empty{display:none}
.card[data-s="failed"] .msg,.card[data-s="check"] .msg{color:#f0b8ae}
.card .notes{color:var(--amber)}
.card.locked textarea,.card.locked .seg,.card.locked .slot,.card.locked .client-pick,.card.locked .opts{pointer-events:none;opacity:.75}

/* ---------- empty / drop ---------- */
.empty{text-align:center;padding:70px 20px}
.empty-orb{width:120px;height:120px;margin:0 auto 20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,var(--cyan) 15%,var(--violet) 55%,transparent 70%);filter:blur(1px);animation:float 5s ease-in-out infinite}
.dropzone{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(11,10,9,.72);backdrop-filter:blur(10px);text-align:center}
.dropzone>div{padding:60px;border-radius:30px;border:2px dashed rgba(239,220,179,.7);box-shadow:0 0 80px rgba(239,220,179,.25)}
.dropzone i{width:60px;height:60px;color:var(--cyan)}

/* ---------- sheets ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(6,5,4,.6);backdrop-filter:blur(8px);padding:16px;animation:fade .25s both}
@keyframes fade{from{opacity:0}}
.sheet-panel{width:min(560px,100%);max-height:86vh;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:18px;border-radius:26px;animation:pop .35s cubic-bezier(.2,.8,.2,1) both}
.sheet-panel.wide{width:min(900px,100%);grid-template-rows:auto auto 1fr auto}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-head h3{margin:0;font-size:1.15rem}
.search{position:relative}
.search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search input{padding-left:42px}
.picker-list{overflow:auto;display:grid;gap:6px;padding-right:4px;min-height:120px}
.pick{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;cursor:pointer;background:rgba(255,255,255,.03);border:1px solid transparent;transition:.15s}
.pick:hover{background:rgba(255,255,255,.07)}
.pick.sel{border-color:rgba(239,220,179,.7);background:rgba(239,220,179,.08)}
.pick .who small{color:var(--muted)}
.pick .tick{margin-left:auto;width:24px;height:24px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center}
.pick.sel .tick{background:var(--violet);color:var(--ink);border-color:var(--cyan)}
.pick .tick i{width:14px;height:14px;opacity:0}.pick.sel .tick i{opacity:1}
.pick .used{font-size:.7rem;color:var(--amber);margin-left:auto}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.confirm-list{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.crow{display:grid;grid-template-columns:62px 62px 1fr;gap:10px;align-items:center;padding:10px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.crow img{width:62px;height:110px;object-fit:cover;border-radius:10px;background:#000}
.crow .noc{width:62px;height:110px;border-radius:10px;display:grid;place-items:center;font-size:.6rem;color:var(--muted);background:rgba(0,0,0,.4);text-align:center}
.crow b{display:block}.crow small{color:var(--cyan);font-family:"IBM Plex Mono";font-size:.72rem}
.crow p{margin:.35rem 0 0;font-size:.72rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.crow .tag{display:inline-block;margin-top:4px;font-size:.62rem;padding:.15rem .4rem;border-radius:6px;background:rgba(169,121,63,.2);color:#e9cf9f}

/* ---------- toasts / confetti ---------- */
.toasts{position:fixed;right:16px;bottom:16px;z-index:70;display:grid;gap:8px;width:min(360px,calc(100vw - 32px))}
.toast{padding:12px 14px;border-radius:14px;background:rgba(28,25,21,.92);backdrop-filter:blur(14px);box-shadow:var(--shadow);font-size:.86rem;animation:pop .3s both;border-left:3px solid var(--violet)}
.toast.ok{border-color:var(--green)}.toast.bad{border-color:var(--red)}
.confetti{position:fixed;width:8px;height:14px;z-index:80;pointer-events:none;border-radius:2px;animation:fall 1.4s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .topbar{top:6px;gap:10px}
  .stats{width:100%;justify-content:space-between}
  .hero{margin-top:22px}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1;justify-content:center;padding:.8rem .7rem;font-size:.85rem}
  #publishAll{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;justify-content:center}
  .grid{grid-template-columns:1fr}
  .sheet{place-items:end center;padding:0}
  .sheet-panel,.sheet-panel.wide{width:100%;border-radius:26px 26px 0 0;max-height:90vh;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);padding:4px;border-radius:14px;box-shadow:0 0 0 1px var(--line) inset}
.tabs button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font:600 .82rem "Manrope";padding:.55rem .85rem;border-radius:10px;cursor:pointer;transition:.25s;white-space:nowrap}
.tabs button.on{color:var(--ink);background:var(--grad);box-shadow:0 6px 18px -6px rgba(214,178,122,.9)}
.tabs i{width:16px;height:16px}
.i-link{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1'/%3E%3C/svg%3E")}
.i-chart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
.i-refresh{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 11a8 8 0 10-2.3 5.7M20 5v6h-6'/%3E%3C/svg%3E")}
.spin i{animation:spin 1s linear infinite}
.search.inline{min-width:220px}

/* ---------- connections ---------- */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:0 4px 18px}
.pill{display:flex;align-items:center;gap:8px;padding:.55rem .9rem;border-radius:99px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;font-weight:600;font-size:.85rem;cursor:pointer;transition:.2s}
.pill b{font-size:1.05rem}
.pill.on{box-shadow:0 0 0 1px currentColor inset,0 0 18px -4px currentColor}
.pill.g{color:var(--green)}.pill.r{color:var(--red)}.pill.a{color:var(--amber)}.pill.m{color:var(--muted)}
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;perspective:1200px}
.conn{position:relative;border-radius:20px;padding:16px;display:grid;gap:12px;background:linear-gradient(160deg,rgba(34,30,26,.7),rgba(14,12,10,.72));backdrop-filter:blur(16px);box-shadow:var(--shadow);transition:transform .3s;animation:rise .5s both}
.conn:hover{transform:translateY(-4px) rotateX(4deg)}
.conn-top{display:flex;gap:12px;align-items:center}
.dp{position:relative;width:58px;height:58px;flex:none;border-radius:50%;padding:3px;background:conic-gradient(var(--st,var(--green)) 0 100%)}
.dp img,.dp span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#15110c;font-weight:800;border:2px solid var(--bg)}
.conn[data-st="connected"]{--st:var(--green)} .conn[data-st="reconnect"],.conn[data-st="disconnected"]{--st:var(--red)}
.conn[data-st="not_connected"]{--st:var(--amber)} .conn[data-st="unknown"],.conn[data-st="limited"]{--st:var(--muted)}
.conn[data-st="reconnect"] .dp,.conn[data-st="disconnected"] .dp{animation:pulseRed 1.6s ease-in-out infinite}
@keyframes pulseRed{50%{box-shadow:0 0 22px rgba(227,139,127,.8)}}
.conn .who b{font-size:.95rem}
.conn .meta{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}
.conn .state{font-size:.78rem;font-weight:700;color:var(--st)}
.conn .why{font-size:.74rem;color:#f0b8ae}
.linkbox input{font-family:"IBM Plex Mono";font-size:.8rem}
.link-seg{display:flex;margin:0 0 12px}.link-seg button{flex:1}
.conn-top .who{min-width:0;flex:1}.conn-rm{width:32px;height:32px;border-radius:10px;align-self:flex-start;color:var(--muted);background:transparent}
.btn.danger:not(.primary):not(.ghost){background:rgba(227,139,127,.16);color:var(--red);box-shadow:0 0 0 1px rgba(227,139,127,.5) inset}
.btn.danger:not(.primary):not(.ghost):hover{background:rgba(227,139,127,.28)}
#rmSheet p.muted+p.muted{margin-top:-6px}#rmSheet .err:empty{display:none}
#linkSheet.busy .linkbox,#linkSheet.busy .sheet-foot{opacity:.45;pointer-events:none}

/* ---------- insights ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.kpi{position:relative;overflow:hidden;border-radius:22px;padding:18px;background:linear-gradient(160deg,rgba(34,30,26,.75),rgba(14,12,10,.75));box-shadow:var(--shadow);animation:rise .6s both}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--glow,var(--violet));filter:blur(40px);opacity:.45}
.kpi small{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
.kpi b{display:block;font-size:2rem;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.board{border-radius:24px;padding:10px;display:grid;gap:4px}
.brow{display:grid;grid-template-columns:34px 44px minmax(0,1.3fr) minmax(0,2fr) 70px 70px;gap:12px;align-items:center;padding:10px;border-radius:14px;cursor:pointer;transition:.2s;animation:rise .5s both}
.brow:hover{background:rgba(255,255,255,.05)}
.brow .rank{font:700 .85rem "IBM Plex Mono";color:var(--muted);text-align:center}
.brow:nth-child(-n+3) .rank{color:var(--amber)}
.brow .dp{width:44px;height:44px;padding:2px}
.bar{position:relative;height:14px;border-radius:99px;background:rgba(255,255,255,.05);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--grad);box-shadow:0 0 18px rgba(214,178,122,.7);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.num{font:600 .82rem "IBM Plex Mono";text-align:right}
.num small{display:block;color:var(--muted);font:500 .6rem "Manrope";text-transform:uppercase}
.brow .err{font-size:.72rem}
.top-list{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tpost{border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--line);display:grid;text-decoration:none;color:var(--text);transition:.25s}
.tpost:hover{transform:translateY(-3px);border-color:rgba(214,178,122,.7)}
.tpost img{width:100%;aspect-ratio:9/12;object-fit:cover;background:#000}
.tpost div{padding:10px;font-size:.75rem}
.tpost p{margin:.3rem 0 0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:200% 100%;animation:shine 1.2s linear infinite;border-radius:14px;height:64px}
@media (max-width:760px){
  .tabs{order:3;width:100%}.tabs button{flex:1;justify-content:center}
  .brow{grid-template-columns:28px 40px minmax(0,1fr) 64px;}
  .brow .bar,.brow .num.v{display:none}
}
.topbar{justify-content:space-between}
.dayrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-radius:20px;margin:0 0 18px;flex-wrap:wrap}
.dayrow .days{flex:1}
@media (max-width:760px){.dayrow .stats{width:100%;justify-content:space-between}}
.top-list,.confirm-list,.picker-list{min-height:0;align-content:start;grid-auto-rows:max-content}
.tpost{grid-template-rows:auto auto}
.tpost div b{font-size:.78rem}
@media (max-width:760px){.tabs button{padding:.5rem .55rem;font-size:.76rem;gap:4px}.tabs i{width:14px;height:14px}.confirm-list{grid-template-columns:1fr}}
.confirm-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ---------- luxury typography ---------- */
.hero h1,.empty h2,.sheet-head h3,.kpi b,.login .brand.big{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.01em}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.1rem);line-height:1.02}
.hero h1 .grad-text{font-style:italic}
.kpi b{font-size:2.6rem}
.sheet-head h3{font-size:1.6rem}
.brand{font-family:"Instrument Serif",Georgia,serif;font-size:1.3rem;letter-spacing:.01em}
.brand b{font-weight:400;font-style:italic;color:var(--violet)}
.badge{font-family:"Manrope"}
.btn{font-weight:700;letter-spacing:.01em}
.stat b,.num,.cap-num,.chips span,.who small,.rank{font-feature-settings:"tnum" 1}
.logo-mark{background:conic-gradient(from 210deg,#f6e6c3,#d6b27a,#8f6636,#f6e6c3);box-shadow:0 0 22px rgba(214,178,122,.45)}
.logo-mark::before{background:#f6e6c3;box-shadow:0 0 10px rgba(246,230,195,.9)}
.grad-text{background:linear-gradient(100deg,#fff4dc,#d6b27a 40%,#f3dcaa 60%,#a9793f);-webkit-background-clip:text;background-clip:text}
.noise{opacity:.05}
.card-glow{opacity:.55}
.btn.glow::after{background:linear-gradient(100deg,transparent 30%,rgba(255,248,230,.55),transparent 70%)}
.dot{box-shadow:0 0 8px currentColor}
.bar i{box-shadow:0 0 14px rgba(214,178,122,.55)}

.brow .dp{--st:var(--violet)}
.kpi::after{opacity:.28}

/* ---------- stats rings (fixed layout) ---------- */
.stat{position:relative;display:grid;justify-items:center;width:64px;height:auto;gap:4px}
.stat svg{position:absolute;top:0;left:50%;width:54px;height:54px;transform:translateX(-50%) rotate(-90deg)}
.stat b{height:54px;display:grid;place-items:center;margin:0;font-size:1.1rem}
.stat small{position:static;bottom:auto;font-size:.56rem;letter-spacing:.12em;white-space:nowrap}

/* ---------- avatars with DP ---------- */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- caption AI ---------- */
.cap-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:.78rem}
.ai-btn{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font:700 .76rem "Manrope";color:var(--ink);background:var(--grad);padding:.4rem .7rem;border-radius:10px;box-shadow:0 6px 16px -8px rgba(214,178,122,.9)}
.ai-btn i{width:14px;height:14px}
.caption-wrap .cap-meter{top:38px}
.i-spark{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l1.8 5.6L19.5 9l-5.7 1.6L12 16l-1.8-5.4L4.5 9l5.7-1.4zM19 14l.9 2.6 2.6.9-2.6.9L19 21l-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E")}
.ai-form{display:grid;gap:10px}
.ai-form label{display:grid;gap:6px;font-size:.82rem;color:var(--muted)}
.ai-result textarea{font-size:.85rem;line-height:1.45}
.ai-result .muted{font-size:.75rem;margin-top:4px}
#aiGo.loading span::after{content:"";display:inline-block;width:1em;animation:dots 1.2s steps(4) infinite;text-align:left}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
#aiSheet .sheet-panel{grid-template-rows:auto auto auto auto auto}

/* =====================================================================
   UPLOAD DESK v2 - spacious premium layout
   ===================================================================== */
.eyebrow{margin:0 0 .6rem;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--violet);font-weight:700}
.up-hero{align-items:center;margin:44px 6px 28px}
.up-hero .stats{gap:18px;padding:14px 18px;border-radius:22px;background:rgba(26,23,20,.5);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.i-bolt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}

/* command deck */
.deck{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr);gap:18px;margin-bottom:26px}
.tile{position:relative;overflow:hidden;border:0;text-align:left;color:var(--text);font:inherit;border-radius:26px;padding:24px;
  background:linear-gradient(155deg,rgba(40,35,28,.72),rgba(14,12,10,.78));box-shadow:var(--shadow);backdrop-filter:blur(20px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tile.side{cursor:pointer;display:grid;align-content:start;gap:10px}
.tile.side:hover{transform:translateY(-4px);box-shadow:var(--shadow),0 24px 50px -24px rgba(214,178,122,.5)}
.tile h3{margin:0;font:400 1.55rem "Instrument Serif",serif;letter-spacing:.005em}
.tile p{margin:.25rem 0 0;color:var(--muted);font-size:.85rem;line-height:1.45}
.tile-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(214,178,122,.12);color:var(--violet);box-shadow:0 0 0 1px rgba(214,178,122,.3) inset}
.tile-icon i{width:22px;height:22px}
.tile.auto{background:linear-gradient(150deg,rgba(64,52,34,.78),rgba(20,17,13,.82) 55%);box-shadow:var(--shadow),0 0 0 1px rgba(214,178,122,.28) inset}
.tile.auto .tile-icon{background:var(--grad);color:var(--ink)}
.tile-shine{position:absolute;inset:-40% -10% auto auto;width:60%;height:120%;background:radial-gradient(closest-side,rgba(246,230,195,.18),transparent);pointer-events:none;animation:float 7s ease-in-out infinite}
.tile-head{display:flex;gap:16px;align-items:flex-start}
.groups{display:flex;gap:10px;overflow-x:auto;margin:20px -4px 18px;padding:4px;scrollbar-width:none}
.groups::-webkit-scrollbar{display:none}
.gchip{flex:none;display:grid;gap:2px;min-width:118px;text-align:left;border:0;cursor:pointer;color:var(--text);font:inherit;padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;transition:.25s}
.gchip:hover{background:rgba(255,255,255,.08)}
.gchip b{font:400 1.25rem "Instrument Serif",serif}
.gchip small{color:var(--muted);font-size:.72rem}
.gchip .got{color:var(--green);font-size:.68rem;font-weight:700}
.gchip.on{background:linear-gradient(150deg,rgba(214,178,122,.28),rgba(214,178,122,.08));box-shadow:0 0 0 1px rgba(214,178,122,.8) inset,0 10px 30px -14px rgba(214,178,122,.7)}
.auto-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.import-status{font-size:.86rem}
.import-status b{color:var(--violet)}
.import-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06)}
.import-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--grad);box-shadow:0 0 16px rgba(214,178,122,.8);transition:width .6s}

/* queue bar */
.queuebar{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:20px;margin-bottom:22px;flex-wrap:wrap}
.queuebar .days{flex:none;max-width:40%}
.filters{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.filters button{border:0;cursor:pointer;background:transparent;color:var(--muted);font:600 .8rem "Manrope";padding:.5rem .85rem;border-radius:10px;white-space:nowrap;transition:.2s}
.filters button.on{color:var(--text);background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line) inset}
.filters button em{font-style:normal;color:var(--violet);margin-left:4px}
.qsearch{width:220px}
.qsearch input{padding:.6rem .8rem .6rem 40px;border-radius:12px}

/* cards v2 */
.grid{grid-template-columns:repeat(auto-fill,minmax(560px,1fr));gap:22px}
.card-inner{padding:20px;gap:14px;border-radius:24px}
.card-head{gap:12px}
.client-pick{padding:8px 12px 8px 8px;border-radius:16px}
.client-pick .avatar{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 2px rgba(214,178,122,.55)}
.who b{font-size:1.02rem}
.card-head .status{flex:none;padding:.45rem .75rem;border-radius:99px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;font-size:.76rem}
.src{font-size:.74rem;color:var(--muted);padding:0 4px}
.src b{color:var(--violet);font-weight:600}
.card-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:stretch}
.media-col{display:grid;grid-template-columns:auto;gap:10px;justify-items:start}
.media-col .video-slot{height:300px}
.media-col .cover-slot{height:112px;aspect-ratio:9/16}
.media-col .cover-slot .slot-empty span{font-size:.72rem}
.media-col .cover-slot .slot-empty i{width:20px;height:20px}
.media-col{grid-template-columns:auto auto;align-items:end}
.slot-empty small{font-size:.68rem;color:rgba(163,154,139,.7)}
.text-col{display:grid;grid-template-rows:1fr auto;gap:12px;min-width:0}
.caption-wrap{display:grid;grid-template-rows:auto 1fr;min-height:0}
.cap-tools{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cap-tools .label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;flex:1}
.cap-tools .cap-meter{position:relative;top:auto;right:auto;width:34px;height:34px}
.caption-wrap .cap-meter{top:auto}
.caption{min-height:190px;height:100%;padding:14px 16px;font-size:.88rem;line-height:1.55;border-radius:16px;background:rgba(10,9,8,.5)}
.opts{gap:10px}
.card-foot{padding-top:14px;border-top:1px solid var(--line);gap:12px;align-items:center}
.card-foot .msg{flex:1;min-width:0;font-size:.78rem;line-height:1.4}
.card-foot .btn.small{padding:.7rem 1.15rem}
.card-foot .go{min-width:130px;justify-content:center}
.publish-fab{position:fixed;right:28px;bottom:28px;z-index:30;padding:1rem 1.5rem;border-radius:18px;font-size:1rem;box-shadow:0 20px 50px -14px rgba(214,178,122,.75)}
.publish-fab[disabled]{opacity:.0;pointer-events:none;transform:translateY(20px)}
.publish-fab{transition:opacity .4s,transform .4s}
.card.hide{display:none}

@media (max-width:1100px){
  .deck{grid-template-columns:1fr 1fr}
  .tile.auto{grid-column:1 / -1}
}
@media (max-width:760px){
  .up-hero{margin-top:26px}
  .up-hero .stats{width:100%;justify-content:space-between}
  .deck{grid-template-columns:1fr 1fr;gap:12px}
  .tile{padding:18px;border-radius:22px}
  .tile.side h3{font-size:1.25rem}.tile.side p{display:none}
  .queuebar .days{max-width:100%}
  .qsearch{width:100%}
  .grid{grid-template-columns:1fr}
  .card-body{grid-template-columns:1fr}
  .media-col{grid-template-columns:auto auto;justify-content:start}
  .media-col .video-slot{height:260px}
  .caption{min-height:160px}
  .publish-fab{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));justify-content:center}
}
.card-foot{justify-content:flex-end}
.card-foot .msg:empty{display:none}

/* =============== v3: equal cover + safe area =============== */
.i-clock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.i-copy{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='3'/%3E%3Cpath d='M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2'/%3E%3C/svg%3E")}
.media-col{grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.media-col .video-slot,.media-col .cover-slot{height:auto;width:170px;aspect-ratio:9/16}
.media-col .cover-slot .slot-empty span{font-size:.85rem}
.media-col .cover-slot .slot-empty i{width:28px;height:28px}
.slot-empty small{text-align:center;padding:0 8px}
.safe{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s}
.card.safe-on .safe{opacity:1}
.safe-grid{position:absolute;left:0;right:0;top:12.5%;height:75%;border:1.5px dashed rgba(246,230,195,.9);box-shadow:0 0 0 999px rgba(0,0,0,.45);border-radius:4px}
.safe-grid span,.safe-bottom span{position:absolute;left:6px;top:4px;font:700 .55rem "Manrope";letter-spacing:.06em;color:#fff4dc;background:rgba(0,0,0,.55);padding:2px 5px;border-radius:5px}
.safe-bottom{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(0deg,rgba(227,139,127,.35),transparent);border-top:1px dashed rgba(227,139,127,.9)}
.safe-bottom span{top:auto;bottom:4px;background:rgba(120,40,30,.7)}
.safe-right{position:absolute;right:0;bottom:22%;width:14%;height:36%;border-left:1px dashed rgba(227,139,127,.8);background:rgba(227,139,127,.18)}
.safe-toggle{position:absolute;left:6px;bottom:6px;z-index:3;border:0;cursor:pointer;font:700 .6rem "Manrope";letter-spacing:.05em;padding:.3rem .5rem;border-radius:8px;
  color:var(--ink);background:var(--grad);opacity:0;transition:opacity .2s}
.cover-slot.filled .safe-toggle{opacity:.92}
.card.safe-on .safe-toggle{background:#fff4dc}
.card-body{grid-template-columns:auto minmax(0,1fr)}
.grid{grid-template-columns:repeat(auto-fill,minmax(640px,1fr))}
@media (max-width:1400px){.grid{grid-template-columns:1fr}}
@media (max-width:760px){.media-col .video-slot,.media-col .cover-slot{width:100%}.media-col{width:100%}}

/* =============== schedule chip + wheel picker =============== */
.sched-btn{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font:600 .8rem "Manrope";color:var(--text);padding:.5rem .8rem;border-radius:11px;
  background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;transition:.2s}
.sched-btn i{width:15px;height:15px;color:var(--violet)}
.sched-btn.on{background:linear-gradient(150deg,rgba(214,178,122,.3),rgba(214,178,122,.1));box-shadow:0 0 0 1px rgba(214,178,122,.8) inset}
.sched-panel{width:min(460px,100%)}
#schedSheet .sheet-panel{grid-template-rows:auto auto auto auto auto auto}
.date-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;scroll-snap-type:x mandatory}
.date-strip::-webkit-scrollbar{display:none}
.dchip{flex:none;scroll-snap-align:start;display:grid;justify-items:center;gap:2px;width:62px;padding:10px 0;border:0;cursor:pointer;border-radius:16px;color:var(--text);
  background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;font:inherit;transition:.2s}
.dchip small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dchip b{font:400 1.6rem "Instrument Serif",serif;line-height:1}
.dchip.on{background:var(--grad);color:var(--ink);box-shadow:0 10px 26px -12px rgba(214,178,122,.9)}
.dchip.on small{color:rgba(23,19,14,.7)}
.wheels{position:relative;display:flex;justify-content:center;align-items:center;gap:6px;height:200px;margin:6px 0;border-radius:20px;background:rgba(0,0,0,.25);overflow:hidden}
.wheel{height:200px;width:74px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;padding:80px 0;box-sizing:border-box;
  -webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel div{height:40px;display:grid;place-items:center;scroll-snap-align:center;font:400 1.7rem "Instrument Serif",serif;color:var(--muted);transition:color .15s,transform .15s;cursor:pointer}
.wheel div.sel{color:var(--text);transform:scale(1.12)}
.wheel.ampm{width:64px}
.wheel.ampm div{font:700 .95rem "Manrope"}
.colon{font:400 1.7rem "Instrument Serif",serif;color:var(--violet)}
.wheel-lens{position:absolute;left:14px;right:14px;top:80px;height:40px;border-radius:12px;pointer-events:none;box-shadow:0 0 0 1px rgba(214,178,122,.55) inset;background:rgba(214,178,122,.07)}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.presets button{border:0;cursor:pointer;font:600 .78rem "Manrope";color:var(--text);padding:.45rem .75rem;border-radius:10px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.presets button:hover{background:rgba(214,178,122,.15)}
.sched-preview{font:400 1.15rem "Instrument Serif",serif;color:var(--cyan);text-align:center}

/* =============== report =============== */
.rep-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.rkpi{border-radius:22px;padding:16px 18px;background:linear-gradient(160deg,rgba(34,30,26,.78),rgba(14,12,10,.78));box-shadow:var(--shadow);cursor:pointer;transition:.25s;animation:rise .5s both}
.rkpi:hover{transform:translateY(-3px)}
.rkpi small{display:block;color:var(--muted);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.rkpi b{display:block;font:400 2.6rem "Instrument Serif",serif;line-height:1.1;margin-top:4px}
.rkpi .pbar{height:4px;border-radius:99px;background:rgba(255,255,255,.06);margin-top:10px;overflow:hidden}
.rkpi .pbar i{display:block;height:100%;width:0;background:var(--c,var(--violet));transition:width 1s cubic-bezier(.2,.8,.2,1)}
.rep-list{border-radius:24px;padding:8px;display:grid;gap:2px}
.rrow{display:grid;grid-template-columns:44px minmax(0,1.3fr) 150px minmax(0,1.6fr) auto;gap:14px;align-items:center;padding:12px;border-radius:16px;animation:rise .45s both}
.rrow:hover{background:rgba(255,255,255,.04)}
.rrow .dp{width:44px;height:44px;padding:2px;--st:var(--violet)}
.rrow .who small{color:var(--muted)}
.rstate{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:.35rem .65rem;border-radius:99px;background:rgba(255,255,255,.05);white-space:nowrap}
.rstate::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.rstate.published{color:var(--green)}
.rstate.scheduled{color:var(--cyan)}
.rstate.missing{color:var(--amber)}
.rstate.failed,.rstate.error{color:var(--red)}
.rstate.unmapped,.rstate.processing{color:var(--muted)}
.rdetail{font-size:.76rem;color:var(--muted);min-width:0}
.rdetail b{color:var(--text);font-weight:600}
.rdetail .e{color:#f0b8ae}
.rrow .btn.small{padding:.5rem .8rem}
@media (max-width:760px){.rrow{grid-template-columns:40px minmax(0,1fr) auto}.rrow .rdetail{grid-column:2 / -1}.rrow .rsrc{display:none}}

/* =============== client insight sheet =============== */
.client-sheet{width:min(1040px,100%);grid-template-rows:auto auto auto 1fr!important;max-height:90vh}
.cs-who{display:flex;align-items:center;gap:14px}
.cs-dp{width:64px;height:64px;border-radius:50%;padding:3px;background:var(--grad)}
.cs-dp img,.cs-dp span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#15110c;font-weight:800;border:2px solid var(--bg)}
.cs-who h3{margin:0}
.cs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ck{border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;animation:rise .45s both}
.ck small{color:var(--muted);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.ck b{display:block;font:400 1.9rem "Instrument Serif",serif;margin-top:2px}
.cs-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cs-list{overflow:auto;display:grid;gap:10px;padding-right:4px;min-height:0;align-content:start}
.reel-row{display:grid;grid-template-columns:34px 78px minmax(0,1fr) minmax(0,1.6fr);gap:14px;align-items:center;padding:10px;border-radius:18px;
  background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--line) inset;text-decoration:none;color:var(--text);transition:.25s;animation:rise .45s both}
.reel-row:hover{transform:translateX(4px);background:rgba(214,178,122,.07)}
.reel-row .rk{font:400 1.6rem "Instrument Serif",serif;color:var(--muted);text-align:center}
.reel-row:nth-child(-n+3) .rk{color:var(--violet)}
.reel-row img{width:78px;height:118px;border-radius:12px;object-fit:cover;background:#000}
.reel-row .cap{font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reel-row .cap small{display:block;color:var(--muted);margin-top:4px}
.mbars{display:grid;gap:6px}
.mb{display:grid;grid-template-columns:62px 1fr 56px;gap:8px;align-items:center;font-size:.7rem;color:var(--muted)}
.mb .t{height:7px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.mb .t i{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.mb.on{color:var(--text)}
.mb.on .t i{box-shadow:0 0 12px rgba(214,178,122,.8)}
.mb b{font:600 .75rem "IBM Plex Mono";color:var(--text);text-align:right}
@media (max-width:760px){.reel-row{grid-template-columns:28px 64px minmax(0,1fr)}.reel-row .mbars{grid-column:1 / -1}}
.grid{grid-template-columns:repeat(auto-fill,minmax(760px,1fr))}
@media (max-width:1600px){.grid{grid-template-columns:1fr}}
.card-body{grid-template-columns:auto minmax(0,1fr)}
@media (max-width:900px){.card-body{grid-template-columns:1fr}}
.cs-kpis{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:900px){.cs-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.cs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ck b{font-size:1.6rem}

/* fast download badge + telegram connect */
.tile-head{position:relative}
.fast-badge{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font:700 .72rem "Manrope";padding:.45rem .7rem;border-radius:99px;
  color:var(--muted);background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.fast-badge i{width:13px;height:13px}
.fast-badge.on{color:var(--ink);background:var(--grad);box-shadow:0 8px 20px -10px rgba(214,178,122,.9)}
.fast-badge.off{color:var(--amber);box-shadow:0 0 0 1px rgba(231,184,102,.5) inset}
.tg-panel{width:min(460px,100%)}
#tgSheet .sheet-panel{grid-template-rows:auto auto auto auto}
.tg-steps{display:grid;gap:12px}
.tg-steps label{display:grid;gap:6px;font-size:.8rem;color:var(--muted)}

/* ===== v42: smooth cards, live refresh ===== */
.card{contain:layout style;transform:perspective(1800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:auto}
.card .card-inner{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(160deg,rgba(34,30,26,.94),rgba(14,12,10,.95))}
.card-glow{animation-play-state:paused}
.card:hover .card-glow,.card.busy .card-glow{animation-play-state:running}
.caption{overscroll-behavior:contain;scroll-behavior:auto;will-change:scroll-position}
.ai-btn.loading{pointer-events:none;opacity:.85}
.ai-btn.loading i{animation:spin 1s linear infinite}
.ai-btn.undo{background:rgba(255,255,255,.08);color:var(--text);box-shadow:0 0 0 1px var(--line) inset}
.caption.filling{animation:capfill .9s ease both}
@keyframes capfill{from{box-shadow:0 0 0 4px rgba(214,178,122,.45)}to{box-shadow:0 0 0 0 rgba(214,178,122,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.import-btns{display:flex;gap:10px;align-items:center}
.refresh-btn{position:relative;width:48px;padding:0;display:grid;place-items:center;align-self:stretch}
.refresh-btn i{width:18px;height:18px}
.refresh-btn.spin i{animation:spin .9s linear infinite}
.new-dot{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:grid;place-items:center;
  font:800 .7rem "Manrope";font-style:normal;color:var(--ink);background:var(--grad);box-shadow:0 6px 16px -6px rgba(214,178,122,.95);animation:pop .3s both}
.watch{font-size:.72rem;color:var(--muted);display:block;margin-top:3px}
.watch b{color:var(--cyan);font-weight:700}

.i-cal{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17'/%3E%3C/svg%3E")}

/* ===== v43: insights date ranges ===== */
#insRange{flex-wrap:wrap}
#insRange .pick-date{display:inline-flex;align-items:center;gap:6px}
#insRange .pick-date i{width:14px;height:14px}
.range-panel{width:min(560px,100%)}
#rangeSheet .sheet-panel{grid-template-rows:auto auto auto auto auto}
.range-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.range-strip .dchip.in{background:rgba(214,178,122,.16);color:var(--text)}
.range-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.range-inputs label{display:grid;gap:6px;font-size:.8rem;color:var(--muted)}
.range-inputs input{color-scheme:dark}
.ins-note{margin:-6px 0 14px;font-size:.8rem;color:var(--muted)}
.ins-note b{color:var(--cyan)}

/* ===== v44: manual upload - new card at the top, glows once ===== */
.card.fresh .card-inner{animation:freshglow 2.4s ease both}
@keyframes freshglow{0%,30%{box-shadow:0 0 0 2px rgba(239,220,179,.95),0 0 40px -6px rgba(214,178,122,.9)}100%{box-shadow:var(--shadow)}}

/* ===== v45: new client onboarding ===== */
.nc-panel{width:min(520px,100%)}
#ncSheet .sheet-panel{grid-template-rows:auto auto auto auto}
.nc-form,.nc-done{display:grid;gap:12px}
.nc-form label{display:grid;gap:6px;font-size:.8rem;color:var(--muted)}
.nc-steps{margin:0;padding-left:1.2rem;display:grid;gap:4px;font-size:.82rem;line-height:1.45}
.nc-steps b{color:var(--cyan)}
.nc-live{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;font-size:.86rem}
.nc-live .pulse{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(231,184,102,.6);animation:ncp 1.6s infinite}
.nc-live.ok .pulse{background:var(--green);animation:none}
.nc-live.warn .pulse{background:var(--red);animation:none}
@keyframes ncp{70%{box-shadow:0 0 0 10px rgba(231,184,102,0)}100%{box-shadow:0 0 0 0 rgba(231,184,102,0)}}
.conn .ok-note{font-size:.72rem;color:var(--muted)}

/* ===== v46: a Reel the team sent twice - the unused send ===== */
.card.replaced{opacity:.55}
.card.replaced:hover{opacity:.9}
.card.replaced .card-inner{background:linear-gradient(160deg,rgba(26,24,22,.9),rgba(12,11,10,.92))}
.card.replaced .dot{background:var(--muted)}

/* ===== v47: Stories ===== */
.i-story{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke-dasharray='4 2.6'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.st-command{border-radius:26px;padding:18px;display:grid;gap:14px;margin-bottom:18px;position:relative;overflow:hidden}
.st-top{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.st-top .groups{flex:1;min-width:260px}
.st-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.st-go{padding:1rem 1.4rem;font-size:1rem}
.auto-switch{display:flex;align-items:center;gap:10px;border:0;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;border-radius:16px;padding:.6rem .9rem;cursor:pointer;color:var(--text);text-align:left}
.auto-switch .switch{width:46px;height:26px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;transition:.25s;flex:none}
.auto-switch .switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#cfc6b8;transition:.25s}
.auto-switch.on .switch{background:var(--grad);box-shadow:0 0 18px -4px rgba(214,178,122,.9)}
.auto-switch.on .switch i{left:23px;background:#17130e}
.auto-txt{display:grid;line-height:1.2}.auto-txt b{font-size:.86rem}.auto-txt small{font-size:.7rem;color:var(--muted);max-width:260px}
.st-status{font-size:.86rem;color:var(--muted)}.st-status b{color:var(--cyan)}
.st-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.st-kpi{border-radius:18px;padding:14px 16px;background:linear-gradient(160deg,rgba(34,30,26,.8),rgba(14,12,10,.85));box-shadow:var(--shadow);display:grid;gap:4px;animation:rise .5s both}
.st-kpi small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.st-kpi b{font:400 2rem "Instrument Serif",serif;line-height:1}
.st-kpi.warn b{color:var(--amber)}.st-kpi.bad b{color:var(--red)}.st-kpi.good b{color:var(--green)}
.st-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.st-slot{border-radius:18px;padding:14px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;display:flex;gap:12px;align-items:center}
.st-slot svg{width:46px;height:46px;transform:rotate(-90deg);flex:none}
.st-slot circle{fill:none;stroke-width:4}.st-slot .tr{stroke:rgba(255,255,255,.08)}.st-slot .vl{stroke:url(#stGrad);stroke:#d6b27a;stroke-linecap:round;transition:stroke-dashoffset .8s}
.st-slot b{font:400 1.5rem "Instrument Serif",serif;display:block;line-height:1}.st-slot small{color:var(--muted);font-size:.74rem}
.st-slot.past{opacity:.6}
.st-board{display:grid;gap:10px}
.st-row{display:grid;grid-template-columns:minmax(170px,230px) 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:18px;
  background:linear-gradient(160deg,rgba(34,30,26,.85),rgba(14,12,10,.9));box-shadow:var(--shadow);animation:rise .45s both}
.st-who{display:flex;gap:10px;align-items:center;min-width:0}.st-who .dp{width:40px;height:40px;flex:none}
.st-who div{min-width:0}.st-who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.st-who small{color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.st-cells{display:flex;gap:8px;flex-wrap:wrap}
.st-cell{position:relative;width:64px;height:92px;border-radius:12px;overflow:hidden;border:0;padding:0;cursor:pointer;background:#0d0c0a;box-shadow:0 0 0 1.5px var(--c,var(--line)) inset;transition:transform .2s}
.st-cell:hover{transform:translateY(-3px)}
.st-cell img{width:100%;height:100%;object-fit:cover;opacity:.85}
.st-cell span{position:absolute;left:0;right:0;bottom:0;font:700 .62rem "Manrope";padding:3px 0;text-align:center;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.st-cell i.dot{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--c,#999);box-shadow:0 0 8px var(--c,#999)}
.st-cell[data-s="scheduled"]{--c:var(--cyan)}.st-cell[data-s="published"]{--c:var(--green)}
.st-cell[data-s="held"],.st-cell[data-s="missed"]{--c:var(--amber)}.st-cell[data-s="failed"],.st-cell[data-s="check"]{--c:var(--red)}
.st-cell[data-s="ready"],.st-cell[data-s="dry"]{--c:#d6b27a}.st-cell[data-s="skipped"]{--c:#555;opacity:.5}
.st-cell.busy i.dot{animation:blink 1s infinite;--c:var(--pink)}
.st-panel{width:min(620px,100%)}
#stSheet .sheet-panel{grid-template-rows:auto 1fr auto}
.st-detail{display:grid;grid-template-columns:150px 1fr;gap:16px}
.st-thumb{width:150px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0d0c0a;box-shadow:0 0 0 1px var(--line) inset}
.st-thumb img{width:100%;height:100%;object-fit:cover}
.st-info{display:grid;gap:10px;align-content:start;min-width:0}
.st-state{font-weight:700}.st-meta{font:500 .74rem "IBM Plex Mono";line-height:1.6}
.st-pick input{margin-bottom:8px}.st-pick-list{max-height:220px;overflow:auto;display:grid;gap:4px}
.st-pick-list button{border:0;text-align:left;padding:.55rem .7rem;border-radius:10px;background:rgba(255,255,255,.04);color:var(--text);cursor:pointer}
.st-pick-list button:hover{background:rgba(214,178,122,.16)}
@media (max-width:720px){.st-row{grid-template-columns:1fr}.st-detail{grid-template-columns:1fr}.st-thumb{width:120px}.st-go{width:100%;justify-content:center}}

/* ===== v48: phone layout - app-style bottom tabs, nothing squeezed or cut ===== */
@media (max-width:760px){
  #app{padding:10px 12px calc(150px + env(safe-area-inset-bottom))}
  input,textarea,select{font-size:16px}                       /* iPhone: no zoom when typing */
  .topbar{position:relative;top:0;padding:10px 12px;border-radius:18px;
    backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;filter:none;background:rgba(22,19,16,.9)}  /* a blurred parent would trap the fixed tab bar */
  .tabs{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;width:auto;order:0;
    display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:6px;border-radius:20px;
    background:rgba(20,17,14,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 40px -12px rgba(0,0,0,.8),0 0 0 1px var(--line) inset}
  .tabs button{flex-direction:column;gap:3px;padding:.45rem .1rem;font-size:.64rem;border-radius:14px;min-width:0}
  .tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabs i{width:18px;height:18px}
  #publishAll,.publish-fab{bottom:calc(86px + env(safe-area-inset-bottom))}
  .toasts,#toasts{bottom:calc(150px + env(safe-area-inset-bottom))!important}
  .hero h1,.up-hero h1{font-size:clamp(2.1rem,10vw,2.8rem);line-height:1.02}
  .hero p.muted{font-size:.9rem}
  /* upload deck */
  .deck{grid-template-columns:1fr 1fr}
  .deck .tile.auto{grid-column:1 / -1}
  .tile-head{flex-wrap:wrap;gap:12px}
  .tile-head > div{flex:1 1 200px;min-width:0}
  .tile-head h3{font-size:1.5rem}
  .fast-badge{order:5;margin-left:0;width:100%;justify-content:center}
  .auto-foot{flex-direction:column;align-items:stretch}
  .import-btns{width:100%}.import-btns #importGo{flex:1;justify-content:center}
  .groups{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .groups .gchip{flex:none}
  .queuebar{gap:10px;padding:10px}
  .queuebar .days,.filters{width:100%;flex:none}
  /* card */
  .card-head{gap:8px}
  .card-head .status{padding:.4rem .55rem;font-size:.68rem}
  .client-pick .handle{font-size:.68rem}
  .media-col{grid-template-columns:1fr 1fr;gap:10px}
  .media-col .video-slot,.media-col .cover-slot{height:auto;aspect-ratio:9/16;width:100%}
  .opts{flex-wrap:wrap}
  .card-foot{flex-wrap:wrap}
  .card-foot .btn{flex:1;justify-content:center}
  /* insights + report */
  .kpis{grid-template-columns:1fr 1fr}
  #insRange{width:100%;justify-content:space-between}
  #insRange button{flex:1 1 30%}
  /* stories */
  .st-top{flex-direction:column;align-items:stretch}
  .st-top .groups{min-width:0;width:100%}
  .st-controls{flex-direction:column;align-items:stretch}
  .auto-switch{width:100%}
  .st-go{width:100%;justify-content:center}
  .st-kpis{grid-template-columns:repeat(3,1fr);gap:8px}
  .st-kpi{padding:10px 12px}.st-kpi b{font-size:1.6rem}
  .st-slots{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px}
  .st-slot{flex:none;min-width:136px}
  .st-row{padding:10px}
  .st-cells{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .st-cell{flex:none;width:56px;height:84px}
  #stVerify{width:100%;justify-content:center}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .search{flex:1 1 100%;width:100%}
  .hero-actions .btn{min-width:0}
  /* sheets: bottom sheet that scrolls */
  .sheet-panel{overflow:auto;-webkit-overflow-scrolling:touch}
  .st-detail{grid-template-columns:110px 1fr}
  .st-thumb{width:110px}
  .sheet-foot{flex-wrap:wrap}.sheet-foot .btn{flex:1;justify-content:center}
}
@media (max-width:380px){
  .tabs button{font-size:.6rem}
  .card-head .status .st-text{display:none}
  .st-kpis{grid-template-columns:repeat(2,1fr)}
}

/* ===== v49: phones - a long row of group chips must scroll inside its box, never widen the page ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}      /* iOS: no automatic text inflation */
.st-command{grid-template-columns:minmax(0,1fr)}
.st-command > *,.st-top > *,.tile,.tile-head > div,.auto-foot,.queuebar > *{min-width:0}
.groups{min-width:0;max-width:100%}
@media (max-width:760px){
  .deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-top,.st-controls{width:100%;min-width:0}
  .st-status{overflow-wrap:anywhere}
}

/* ===== v50: Auto-Doctor log ===== */
.doc{border-radius:22px;padding:16px;margin-top:18px;display:grid;gap:8px}
.doc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.doc-head h3{margin:0;font:400 1.5rem "Instrument Serif",serif}
.doc-sub{margin:0;font-size:.8rem}
.doc-list{display:grid;gap:6px;max-height:420px;overflow:auto}
.doc-row{display:grid;gap:2px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.04);border-left:3px solid var(--green);font-size:.84rem}
.doc-row.alert{border-left-color:var(--amber)}.doc-row.report,.doc-row.selftest{border-left-color:var(--cyan)}
.doc-row small{color:var(--muted);font-size:.68rem}

/* ===== v52: Storage card ===== */
.store-ring{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin:6px 0}
.store .ring{--p:0;width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;position:relative;
  background:conic-gradient(var(--rc,var(--violet)) calc(var(--p)*1%),rgba(255,255,255,.06) 0);transition:--p 1.2s cubic-bezier(.2,.8,.2,1)}
.store .ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#14110e;box-shadow:0 0 0 1px var(--line) inset}
.store .ring b,.store .ring small{position:relative}
.store .ring b{font:400 1.9rem "Instrument Serif",serif}
.store .ring small{color:var(--muted);font-size:.66rem;letter-spacing:.04em}
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.store-bars{display:grid;gap:9px;min-width:0}
.store-bars .sb{display:grid;grid-template-columns:72px minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:.8rem}
.store-bars .sb span{color:var(--muted)}.store-bars .sb b{text-align:right;font-weight:500}
.store-bars .t{height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.store-bars .t i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.store-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.store-keep{font-size:.82rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.store-keep select{background:rgba(255,255,255,.05);color:var(--text);border:0;box-shadow:0 0 0 1px var(--line) inset;border-radius:10px;padding:.45rem .6rem;font:inherit}
#storeClean.spin span::after{content:"…"}
.slot-cleared{position:absolute;left:8px;bottom:8px;font-size:.66rem;padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.65);color:var(--muted)}
@media (max-width:520px){.store-ring{grid-template-columns:minmax(0,1fr);justify-items:center}.store-bars{width:100%}}

/* ===== v51: phones - compact Stories, wrapped filters, solid bottom bar ===== */
@media (max-width:760px){
  /* bottom bar: solid, edge to edge, sits on the safe area like a native app */
  .tabs{left:0;right:0;bottom:0;border-radius:20px 20px 0 0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:#15120f;box-shadow:0 -10px 30px -10px rgba(0,0,0,.9),0 -1px 0 var(--line)}
  #app{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  #publishAll,.publish-fab{bottom:calc(78px + env(safe-area-inset-bottom))}
  /* filters wrap instead of hiding behind a side-scroll */
  .filters{flex-wrap:wrap;overflow:visible;gap:6px}
  .filters button{padding:.45rem .7rem;font-size:.78rem}
  /* Stories: one slim row of numbers, small slot chips */
  .st-kpis{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px;margin-bottom:12px}
  .st-kpi{flex:none;min-width:auto;padding:8px 12px;border-radius:14px;display:flex;align-items:baseline;gap:8px}
  .st-kpi small{font-size:.6rem;letter-spacing:.08em}
  .st-kpi b{font-size:1.35rem;order:-1}
  .st-slots{margin-bottom:12px}
  .st-slot{min-width:118px;padding:9px 10px;gap:8px;border-radius:14px}
  .st-slot svg{width:34px;height:34px}
  .st-slot b{font-size:1.15rem}.st-slot small{font-size:.68rem}
  #viewStory .queuebar{display:grid;grid-template-columns:1fr auto;gap:8px}
  #viewStory .queuebar .filters{grid-column:1 / -1}
  #stVerify{width:auto;padding:.6rem .9rem}
  .st-command{padding:14px;gap:10px}
  .st-row{gap:10px}
}

/* ===== v52: phones - performance (no live blur, no spinning glows) ===== */
@media (max-width:760px), (pointer:coarse){
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .glass,.tile,.card-inner,.conn,.kpi,.st-command,.queuebar,.sheet-panel{background-color:rgba(24,21,17,.96)}
  .sheet{background:rgba(6,5,4,.82)}
  .card-glow,.tile-shine{display:none}
  .card,.st-row,.conn,.brow,.reel-row,.kpi,.st-kpi{animation-duration:.25s}
  .st-cell:hover,.card:hover{transform:none}
}

/* ===== v53: phones - title spacing, publish button only when useful ===== */
@media (max-width:760px){
  .eyebrow{margin-bottom:.9rem;line-height:1.5}
  .hero h1,.up-hero h1{line-height:1.12;padding-top:.05em}
  #publishAll:disabled,.publish-fab:disabled{display:none}
}
.rrow .who{min-width:0}
.rrow .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .who small{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
@media (max-width:760px){
  .brow{grid-template-columns:24px 38px minmax(0,1fr) auto;row-gap:6px;column-gap:10px}
  .brow .who{min-width:0}
  .brow .who b,.brow .who small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brow .bar{grid-column:3 / -1;grid-row:2;height:5px}
  .brow .num.v{display:none}
  .brow .err{grid-column:3 / -1}
}

/* ===== v57: Stories in advance ===== */
.st-days-wrap{display:flex;gap:10px;align-items:stretch;flex:1;min-width:0}
.st-days-wrap .groups{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.st-days-wrap .refresh-btn{flex:none}
#stDays .gchip.past{opacity:.6}
.st-hint{font-size:.84rem;padding:10px 12px;border-radius:12px;background:rgba(231,184,102,.1);box-shadow:0 0 0 1px rgba(231,184,102,.35) inset;color:var(--text)}
.st-hint b{color:var(--amber)}

#stDays .pick-day{position:relative;cursor:pointer;border:1px dashed rgba(214,178,122,.55)}
#stDays .pick-day input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;color-scheme:dark}
.st-days-wrap{width:100%;max-width:100%}
.st-days-wrap .groups,.st-top .st-days-wrap .groups{width:auto;flex:1 1 0;min-width:0}
.st-days-wrap{align-items:center}.st-days-wrap .refresh-btn{align-self:center;height:48px;width:48px}

/* ===== v61: login - the animated border layer covered the password box (taps never reached it on iPad/phones) ===== */
.login-card{transform-style:flat}
.login-card::before{pointer-events:none}
.login-card form,.login-card .brand,.login-card p{position:relative;z-index:1}
.login-card input{font-size:16px;-webkit-user-select:text;user-select:text}

/* ===== v62: touch devices (iPad + phones) - nothing decorative runs forever, off-screen cards are not drawn ===== */
@media (pointer:coarse){
  .noise{display:none}
  .grad-text,.logo-mark,.btn.glow::after,.client-pick.empty,.empty-orb,.tile-shine,.login-card::before,.login .orb{animation:none!important}
  .btn.glow::after{display:none}
  #grid .card{content-visibility:auto;contain-intrinsic-height:auto 760px}   /* height only: "contain-intrinsic-size" also made every unseen card 760px WIDE, wider than a phone */
  .st-row,.conn,.brow,.rrow,.reel-row{content-visibility:auto;contain-intrinsic-height:auto 140px}
}

/* ===== v63: iPad / big touch screens - app layout: top bar scrolls normally, tabs live in a bottom dock =====
   (a sticky top bar slides under Safari's shrinking toolbar on iPad and looks half cut while scrolling) */
html.tablet .topbar{position:relative;top:0;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;filter:none;background:rgba(22,19,16,.92)}
html.tablet .tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;
  width:min(720px,calc(100% - 28px));display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:7px;border-radius:24px;
  background:#15120f;box-shadow:0 18px 44px -14px rgba(0,0,0,.9),0 0 0 1px var(--line) inset}
html.tablet .tabs button{flex-direction:column;justify-content:center;gap:4px;padding:.55rem .2rem;font-size:.74rem;border-radius:16px}
html.tablet .tabs i{width:20px;height:20px}
html.tablet #app{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
html.tablet #publishAll,html.tablet .publish-fab{bottom:calc(98px + env(safe-area-inset-bottom))}
html.tablet .toasts{bottom:calc(104px + env(safe-area-inset-bottom))}
/* same lightness rules as phones, even if an iPad trackpad makes the browser report a fine pointer */
html.tablet *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.tablet .noise,html.tablet .card-glow,html.tablet .tile-shine,html.tablet .btn.glow::after{display:none}
html.tablet .grad-text,html.tablet .logo-mark,html.tablet .client-pick.empty,html.tablet .empty-orb{animation:none!important}
html.tablet #grid .card{content-visibility:auto;contain-intrinsic-height:auto 760px}

/* ===== v64: a .btn without a variant must never fall back to the browser's white button ===== */
.btn:not(.primary):not(.ghost){background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line) inset;color:var(--text)}
#storeClean i{width:15px;height:15px}
#storeClean:disabled{opacity:.7;cursor:wait}
.store-keep{white-space:nowrap}.store-keep select{min-width:96px}

/* ===== v66: notifications ===== */
.i-bell{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1112 0c0 5 2 6.5 2 6.5H4S6 14 6 9z'/%3E%3Cpath d='M10 19.5a2.2 2.2 0 004 0'/%3E%3C/svg%3E")}
.topbar .bell{position:relative;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.topbar .bell i{width:18px;height:18px}
.topbar .bell.on::after{content:"";position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px #15120f}
.push-panel{width:min(520px,100%)}
#pushSheet .sheet-panel{grid-template-rows:auto auto auto auto auto auto}
.push-hint{font-size:.86rem;line-height:1.6;padding:12px 14px;border-radius:14px;background:rgba(214,178,122,.1);box-shadow:0 0 0 1px rgba(214,178,122,.35) inset}
.push-hint b{color:var(--cyan)}
.push-name{display:grid;gap:6px;font-size:.8rem;color:var(--muted)}
.push-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.pcat{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;font-size:.86rem;cursor:pointer}
.pcat input{width:18px;height:18px;accent-color:#d6b27a;flex:none}
@media (max-width:760px){.push-cats{grid-template-columns:1fr}}

/* ===== v67: Live world ===== */
.i-live{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2.2' fill='black'/%3E%3Cpath d='M8 8a5.7 5.7 0 000 8M16 8a5.7 5.7 0 010 8M5.2 5.2a9.6 9.6 0 000 13.6M18.8 5.2a9.6 9.6 0 010 13.6'/%3E%3C/svg%3E")}
.i-home{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9h-5v-6H9v6H4z'/%3E%3C/svg%3E")}
.i-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")}
.i-grid{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E")}
.i-gauge{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 17a8 8 0 1116 0'/%3E%3Cpath d='M12 17l4-6'/%3E%3C/svg%3E")}
.i-pause{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E")}
/* iPhone / iPad Safari cuts fixed layers (the 3D canvas, the tab bar) at the edge of an element that has overflow:hidden.
   With overflow on <html> as well, <body> becomes such an element - and here it is only as tall as the top bar, so the
   world showed in a strip and the tab bar vanished (seen on a real iPhone, 1 Oct). So: no overflow on <html> (then
   <body>'s overflow belongs to the window, not to <body>), and <body> is as tall as the screen in any case. */
html.live-open{overscroll-behavior:none}
html.live-open body{overflow:hidden;overscroll-behavior:none;min-height:100vh;min-height:100dvh}
html.live-open #bg,html.live-open .noise{visibility:hidden}
html.live-open .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,17,14,.95)}
html.live-open #publishAll,html.live-open .publish-fab{display:none}
@media (max-width:760px){html.live-open .tabs{backdrop-filter:none;-webkit-backdrop-filter:none}}   /* the phone tab bar sits on the canvas: never re-blur it every frame */
#viewLive{position:fixed;inset:0;z-index:5;background:#07080b;
  --lv-live:#7CE0A3;--lv-ready:#E9C27A;--lv-wait:#F0A646;--lv-bad:#FF5A4E;--lv-idle:#6b645a;--lv-tg:#2AABEE;
  --live-top:84px;--live-bottom:16px;
  --lv-ig:linear-gradient(45deg,#FEDA75,#FA7E1E 30%,#D62976 55%,#962FBF 78%,#4F5BD5);
  font-family:"Manrope",system-ui,sans-serif;color:var(--text);-webkit-user-select:none;user-select:none}
#viewLive input{-webkit-user-select:text;user-select:text}
#viewLive{touch-action:pan-x pan-y}          /* lists still scroll; a pinch or double tap on the HUD never zooms the page */
.lv-labels>*{touch-action:none}
.lv-stage,.lv-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.lv-labels,.lv-hud{position:absolute;inset:0;pointer-events:none}
.lv-labels{z-index:1;overflow:hidden}.lv-hud{z-index:2}
.lv-labels>*{position:absolute;left:0;top:0;will-change:transform;pointer-events:auto}
.lv-card,.lv-left>*,.lv-right>*,.lv-bottom>*,.lv-ptop>*,.lv-pfabs>*,.lv-ticker{pointer-events:auto}
.lv-card{background:rgba(20,17,14,.84);border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 1px 0 rgba(239,220,179,.18),0 18px 40px -18px rgba(0,0,0,.8)}
#viewLive,#viewLive *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}   /* no backdrop-filter anywhere in #viewLive */
.lv-left{position:absolute;left:16px;top:var(--live-top);width:360px;display:grid;gap:10px;align-content:start;max-height:calc(100% - var(--live-top) - var(--live-bottom) - 70px);overflow:auto;scrollbar-width:none}
.lv-left::-webkit-scrollbar{display:none}
.lv-left.ovf{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}   /* more rows below */
.lv-right{position:absolute;right:16px;top:var(--live-top);width:320px;display:grid;gap:10px;align-content:start;
  max-height:calc(100% - var(--live-top) - var(--live-bottom) - 70px);overflow:auto;scrollbar-width:none}
.lv-right::-webkit-scrollbar{display:none}
.lv-bottom{position:absolute;left:16px;right:16px;bottom:var(--live-bottom);display:flex;gap:10px;align-items:flex-end;justify-content:space-between}
.lv-drawer{position:absolute;right:16px;top:var(--live-top);bottom:var(--live-bottom);width:400px;overflow:auto;z-index:3}
.lv-title,.lv-chip b,.lv-caption{font-family:"Instrument Serif",serif}
.lv-num,.lv-cnum,.lv-clock,.lv-rnum{font-family:"IBM Plex Mono",monospace}
.lv-ptop,.lv-pfabs,.lv-ticker,.lv-shots{display:none}
#viewLive.lv-m-compact .lv-left{width:300px}#viewLive.lv-m-compact .lv-rail{width:60px}/* icon + count only */
#viewLive.lv-m-compact .lv-right{width:280px}#viewLive.lv-m-compact .lv-drawer{width:360px}
#viewLive.lv-m-phone .lv-left,#viewLive.lv-m-phone .lv-right,#viewLive.lv-m-phone .lv-legend{display:none}
#viewLive.lv-m-phone .lv-ptop{display:grid;gap:6px;position:absolute;left:12px;right:60px;top:var(--live-top)}
#viewLive.lv-m-phone .lv-strip{display:flex;gap:6px;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:none}
#viewLive.lv-m-phone .lv-strip>*{flex:none;height:40px}
#viewLive.lv-m-phone .lv-pfabs{display:grid;gap:8px;position:absolute;right:12px;top:var(--live-top)}
#viewLive.lv-m-phone .lv-fab{width:40px;height:40px;border-radius:50%}
#viewLive.lv-m-phone .lv-ticker{display:block;position:absolute;left:12px;right:12px;bottom:var(--live-bottom);height:36px}
#viewLive.lv-m-phone .lv-bottom{bottom:calc(var(--live-bottom) + 44px);justify-content:center}
#viewLive.lv-m-phone .lv-shots{display:flex}
/* the sheet rests on top of the fixed tab bar (the bar always paints above #viewLive) */
#viewLive.lv-m-phone .lv-drawer{left:0;right:0;top:auto;bottom:calc(var(--live-bottom) - 10px);width:auto;max-height:calc(100% - var(--live-top) - var(--live-bottom));border-radius:20px 20px 0 0}
@media (min-width:900px){                     /* iPad landscape: side panels instead of full-width sheets */
  #viewLive.lv-m-phone .lv-drawer{left:auto;right:64px;top:var(--live-top);bottom:var(--live-bottom);width:380px;max-height:none;border-radius:20px}   /* beside the round buttons, never over them */
  #viewLive.lv-m-phone.pm-open .lv-left{right:auto;width:400px}
  #viewLive.lv-m-phone.pf-open .lv-right,#viewLive.lv-m-phone.ps-open .lv-right{left:auto;right:64px;width:400px}
}
#viewLive.lv-m-phone *{font-size:max(12px,1em)}
@media (max-width:430px){.tabs button[data-v="conn"] span{font-size:0}.tabs button[data-v="conn"] span::after{content:"Connect";font-size:.6rem}}   /* "Connections" is cut up to 423 px */
@media (pointer:coarse){#viewLive *{animation:none!important}}  /* no infinite CSS loops on touch */

/* status colours */
#viewLive .s-live{--c:var(--lv-live)}#viewLive .s-ready{--c:var(--lv-ready)}#viewLive .s-waiting{--c:var(--lv-wait)}
#viewLive .s-problem{--c:var(--lv-bad)}#viewLive .s-idle{--c:var(--lv-idle)}
:where(#viewLive) button{font-family:inherit;color:inherit;cursor:pointer}   /* zero specificity: every class rule below still wins */
.lv-ico{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;color:var(--violet)}
.lv-ico svg{width:100%;height:100%}

/* mission card */
.lv-mission{padding:14px 16px 12px;display:grid;gap:9px}
.lv-mhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lv-title{margin:0;font-weight:400;font-size:1.9rem;line-height:1;letter-spacing:.01em}
.lv-title em{font-style:italic;font-size:.62em;color:var(--violet)}
.lv-clock{margin-left:auto;font-size:.92rem;color:var(--cyan)}
.lv-phase{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lv-lab{font:700 .6rem "Manrope";letter-spacing:.14em;padding:.2rem .5rem;border-radius:99px;color:var(--amber);background:rgba(231,184,102,.14);box-shadow:0 0 0 1px rgba(231,184,102,.4) inset}
.lv-mrow{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:10px}
.lv-mrow:nth-of-type(2){grid-template-columns:62px auto auto 1fr}
.lv-k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lv-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.06);gap:2px}
.lv-bar i{display:block;min-width:4px}
.lv-bar .seg-live{background:var(--lv-live)}.lv-bar .seg-sched{background:repeating-linear-gradient(135deg,var(--lv-live) 0 4px,rgba(124,224,163,.35) 4px 8px)}
.lv-bar .seg-ready{background:var(--lv-ready)}.lv-bar .seg-wait{background:var(--lv-wait);opacity:.75}.lv-bar .seg-bad{background:var(--lv-bad)}
.lv-num{font-size:1.15rem;font-weight:600;display:inline-flex;align-items:baseline;gap:1px;position:relative;white-space:nowrap}
.lv-nb{font-size:.72rem;color:var(--muted);font-weight:400}
.lv-ringp{--p:0;width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--lv-live) calc(var(--p)*1%),rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px);transition:background .6s}
.lv-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.lv-schip{font-size:.66rem;font-weight:700;padding:.15rem .45rem;border-radius:99px;background:rgba(255,90,78,.14);color:#ff8a80}
.lv-schip.held{background:rgba(240,166,70,.14);color:var(--lv-wait)}
.lv-pills{display:flex;gap:6px;flex-wrap:wrap}
.lv-pill{border:0;font:600 .74rem "Manrope";padding:.38rem .7rem;border-radius:99px;background:rgba(255,255,255,.05);color:var(--text);box-shadow:0 0 0 1px var(--line) inset}
.lv-pill.bad{color:#ffb3ab;background:rgba(255,90,78,.12);box-shadow:0 0 0 1px rgba(255,90,78,.35) inset}
.lv-pill.flash{animation:lvFlash .9s 2}
@keyframes lvFlash{50%{background:rgba(255,90,78,.45)}}
.lv-age{font-size:.7rem;color:var(--muted)}.lv-age.bad{color:var(--lv-wait)}
.lv-delta{position:absolute;right:-4px;top:-14px;font:700 .64rem "IBM Plex Mono";font-style:normal;padding:0 .3rem;border-radius:6px;animation:lvDelta 2.5s both}
.lv-delta.up{color:var(--lv-live)}.lv-delta.down{color:var(--lv-wait)}
@keyframes lvDelta{0%{opacity:0;transform:translateY(4px)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.lv-next{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border:0;text-align:left;padding:.6rem .8rem;border-radius:14px;font-size:.8rem;
  background:linear-gradient(120deg,rgba(214,178,122,.18),rgba(20,17,14,.8));box-shadow:0 0 0 1px rgba(214,178,122,.35) inset;color:var(--text)}
.lv-next b{font-weight:700;color:var(--cyan)}.lv-next .warn{color:var(--lv-wait)}

/* journey rail */
.lv-rail{padding:6px;display:grid;gap:2px}
.lv-rrow{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:10px;border:0;background:transparent;text-align:left;padding:.24rem .55rem;border-radius:10px;transition:background .2s}
.lv-rrow:hover{background:rgba(214,178,122,.1)}
.lv-rname{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-rname small{display:inline;margin-left:6px;font-size:.66rem;font-weight:500;color:var(--muted)}   /* one line per station: all 14 fit at 900 px */
.lv-rnum{font-size:.95rem;min-width:2.2em;text-align:right;position:relative}
.lv-rrow.zero{opacity:.48}.lv-rrow.bad .lv-rnum,.lv-rrow.bad .lv-ico{color:var(--lv-bad)}
.lv-rrow.bad{order:-1}                        /* problems first */
.lv-rdps{display:flex}.lv-rdps .lv-dp{margin-left:-5px;box-shadow:0 0 0 2px #15120f}
#viewLive.lv-m-compact .lv-rrow{grid-template-columns:1fr;justify-items:center;gap:2px;padding:.4rem .2rem}
#viewLive.lv-m-compact .lv-rname,#viewLive.lv-m-compact .lv-rdps{display:none}
#viewLive.lv-m-compact .lv-rnum{min-width:0;text-align:center;font-size:.78rem}

/* tools, search, segmented controls */
.lv-tools{display:grid;gap:8px}
.lv-search{position:relative;display:flex;align-items:center;gap:8px;padding:0 12px;height:42px;border-radius:14px;background:rgba(20,17,14,.86);box-shadow:0 0 0 1px var(--line) inset}
.lv-search i{color:var(--muted)}
.lv-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:500 .9rem "Manrope";padding:0}
.lv-results{position:absolute;left:0;right:0;top:46px;display:grid;gap:2px;padding:6px;border-radius:14px;background:#15120f;box-shadow:0 0 0 1px var(--line) inset,0 20px 40px -10px rgba(0,0,0,.9);z-index:5}
.lv-res{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;border:0;background:transparent;text-align:left;padding:.4rem .5rem;border-radius:10px}
.lv-res .lv-dp{grid-row:1/3}.lv-res b{font-size:.86rem}.lv-res small{grid-column:2;font-size:.7rem;color:var(--muted)}
.lv-res .lv-sdot{grid-row:1/3;grid-column:3}
.lv-res.on,.lv-res:hover{background:rgba(214,178,122,.14)}
.lv-sdot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--lv-idle))}
.lv-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lv-ib{width:38px;height:38px;border-radius:12px;border:0;display:grid;place-items:center;background:rgba(20,17,14,.86);box-shadow:0 0 0 1px var(--line) inset;color:var(--cyan);transition:background .2s}
.lv-ib:hover{background:rgba(214,178,122,.16)}.lv-ib.on{background:var(--grad);color:var(--ink)}
.lv-ib i{width:17px;height:17px}
.lv-seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:rgba(20,17,14,.86);box-shadow:0 0 0 1px var(--line) inset}
.lv-seg button{border:0;background:transparent;font:600 .74rem "Manrope";padding:.42rem .62rem;border-radius:9px;color:var(--muted)}
.lv-seg button.on{background:var(--grad);color:var(--ink)}
.lv-day{margin-left:auto}
#viewLive:not(.lv-m-phone) .lv-shots{display:none}

/* tray + feed */
.lv-tray,.lv-feed{padding:12px 14px}
.lv-tray h3,.lv-feed h3{margin:0 0 8px;font:600 .7rem "Manrope";letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lv-traylist{display:flex;flex-wrap:wrap;gap:6px;max-height:122px;overflow:auto;scrollbar-width:none}
.lv-tdp{border:0;padding:2px;border-radius:50%;background:var(--lv-live)}
.lv-tdp.story{background:var(--lv-ig)}
.lv-tdp .lv-dp{box-shadow:0 0 0 2px #15120f}
.lv-feed ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lv-frow{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:start;font-size:.78rem;line-height:1.35;padding:.32rem .2rem;border-radius:8px;cursor:pointer}
.lv-frow:hover{background:rgba(255,255,255,.04)}
.lv-frow time{font:500 .66rem "IBM Plex Mono";color:var(--muted)}
.lv-frow .lv-ico{width:15px;height:15px;margin-top:1px}
.lv-frow.k-alert .lv-ico{color:var(--lv-bad)}.lv-frow.k-fix .lv-ico{color:var(--lv-live)}.lv-frow.k-story .lv-ico{color:#e7a0d0}
.lv-ftext{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lv-empty{font-size:.76rem;color:var(--muted);margin:4px 0}

/* bottom: legend, needs-you, shots */
.lv-legend{padding:8px 12px;font-size:.76rem;max-width:300px;align-self:flex-end}
.lv-legend summary{cursor:pointer;font:600 .7rem "Manrope";letter-spacing:.16em;text-transform:uppercase;color:var(--muted);list-style:none}
.lv-legend summary::-webkit-details-marker{display:none}
.lv-legend[open] summary{margin-bottom:8px}
.lv-lrow{display:flex;align-items:center;gap:8px;padding:2px 0}
.lv-sw{width:12px;height:12px;border-radius:4px;background:var(--c)}
.lv-sh{width:14px;height:14px;flex:none;border:1.5px solid var(--cyan);opacity:.8}
.lv-sh.card{width:9px;border-radius:2px}.lv-sh.pearl{border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#f4efe6 40%,#b9a98a)}
.lv-sh.plane{border:0;background:var(--cyan);clip-path:polygon(0 50%,100% 0,70% 100%)}
.lv-sh.star{border:0;background:var(--lv-live);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.lv-sh.q{border-radius:50%;display:grid;place-items:center}.lv-sh.q::after{content:"?";font:700 .6rem "Manrope";color:var(--cyan)}
.lv-needs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;flex:1;min-width:0}
.lv-needs-h{font:700 .62rem "Manrope";letter-spacing:.18em;text-transform:uppercase;color:#ffb3ab;padding:0 4px}
.lv-need{display:flex;align-items:center;gap:6px;border:0;padding:.3rem .6rem .3rem .3rem;border-radius:99px;font-size:.74rem;
  background:rgba(20,17,14,.9);box-shadow:0 0 0 1px rgba(255,90,78,.45) inset;max-width:260px}
.lv-need b{font-weight:700;white-space:nowrap}.lv-need span{color:#ffb3ab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-need.sev-5 span,.lv-need.sev-6 span{color:var(--lv-wait)}.lv-need.sev-5,.lv-need.sev-6{box-shadow:0 0 0 1px rgba(240,166,70,.4) inset}
.lv-need.more{padding:.3rem .7rem;color:var(--cyan)}

/* DP avatars */
.lv-dp{--s:28px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:inline-grid;place-items:center;overflow:hidden;background:var(--grad);position:relative}
.lv-dp img{width:100%;height:100%;object-fit:cover;display:block}
.lv-dp em{font:800 calc(var(--s)*.36) "Manrope";font-style:normal;color:var(--ink)}
.lv-dp.ig,.lv-dp.bad{padding:2px;background:var(--lv-ig)}.lv-dp.bad{background:var(--lv-bad)}
.lv-dp.ig img,.lv-dp.bad img,.lv-dp.ig em,.lv-dp.bad em{border-radius:50%;box-shadow:0 0 0 2px #15120f}
.lv-dp.ig em,.lv-dp.bad em{width:100%;height:100%;display:grid;place-items:center;background:var(--grad)}

/* in-world labels (positioned by live3d.js) */
.lv-chip{display:flex;align-items:center;gap:6px;padding:.28rem .6rem .28rem .45rem;border-radius:99px;white-space:nowrap;cursor:pointer;
  background:rgba(12,11,10,.78);box-shadow:0 0 0 1px rgba(214,178,122,.35) inset,0 8px 20px -8px rgba(0,0,0,.9);font-size:.78rem;transition:opacity .3s}
.lv-chip b{font-weight:400;font-size:1rem;color:#f3e7cf}
.lv-chip .lv-ico{width:15px;height:15px}
.lv-cnum{font-size:.8rem;font-weight:600;color:var(--cyan);min-width:1ch}
.lv-csub{display:block;font-size:.64rem;color:var(--muted);margin-left:2px}
.lv-chip[data-st="dial"]{flex-wrap:wrap;max-width:240px;row-gap:0}
.lv-chip[data-st="dial"] .lv-csub{flex-basis:100%;padding-left:21px;white-space:normal}
.lv-chip.zero{opacity:.55;pointer-events:none!important}
.lv-lane.zr{color:var(--cyan);background:rgba(20,17,14,.8);box-shadow:0 0 0 1px rgba(214,178,122,.35) inset}.lv-chip.zero .lv-cnum{color:var(--muted)}
.lv-chip.bad{box-shadow:0 0 0 1px rgba(255,90,78,.6) inset,0 8px 20px -8px rgba(0,0,0,.9)}.lv-chip.bad .lv-cnum,.lv-chip.bad .lv-ico{color:var(--lv-bad)}
.lv-chip[data-st="tg"] .lv-ico,.lv-chip[data-st="s_catch"] .lv-ico{color:var(--lv-tg)}
.lv-chip[data-st="portal"] .lv-ico{color:#e86aa8}.lv-chip[data-st="sky"] .lv-ico{color:var(--lv-live)}
.lv-labels>.lv-hid{opacity:0!important;pointer-events:none!important}
.lv-labels.lv-far .lv-chip:not(.bad) b{display:none}          /* from far away a chip is icon + count, so it never hides its station */
.lv-labels.lv-far .lv-chip{padding:.24rem .5rem .24rem .4rem}
.lv-labels.lv-far .lv-chip .lv-csub,.lv-labels.lv-far .lv-lane{display:none}
.lv-chip.more{font:700 .72rem "IBM Plex Mono";padding:.18rem .5rem;color:var(--ink);background:var(--grad)}
.lv-lane{font:700 .62rem "Manrope";letter-spacing:.16em;text-transform:uppercase;color:#9fd4f3;padding:.18rem .5rem;border-radius:99px;background:rgba(14,22,33,.82);box-shadow:0 0 0 1px rgba(42,171,238,.4) inset;pointer-events:none!important;white-space:nowrap}
.lv-tag{max-width:340px;padding:.45rem .7rem;border-radius:12px;font-size:.76rem;line-height:1.35;background:rgba(12,11,10,.92);box-shadow:0 0 0 1px rgba(214,178,122,.4) inset,0 12px 30px -10px #000;pointer-events:none!important;white-space:normal}
.lv-doc{max-width:320px;padding:.35rem .65rem;border-radius:99px;font-size:.72rem;font-weight:600;color:#ffd2cd;background:rgba(40,12,10,.9);box-shadow:0 0 0 1px rgba(255,90,78,.55) inset;pointer-events:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-igwrap{display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none!important}
.lv-igwrap.solo{position:absolute;left:50%;top:calc(var(--live-top) + 64px);transform:translateX(-50%);z-index:4}
.lv-ig{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:16px;min-width:200px;pointer-events:auto;cursor:pointer;
  background:rgba(250,250,250,.96);color:#111;box-shadow:0 16px 40px -10px rgba(0,0,0,.7);animation:lvPop .35s cubic-bezier(.2,.8,.2,1) both;transition:opacity .4s,transform .4s}
.lv-ig.out{opacity:0;transform:translateY(-8px)}
.lv-igt{display:grid;font-size:.78rem;line-height:1.25}.lv-igt b{font-weight:700}.lv-igt span{color:#555}
.lv-ig .lv-dp.ig img,.lv-ig .lv-dp.ig em{box-shadow:0 0 0 2px #fff}
@keyframes lvPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* captions, skip, 2D note, fps */
.lv-caption{position:absolute;left:50%;bottom:calc(var(--live-bottom) + 70px);transform:translateX(-50%);font-size:clamp(1.3rem,2.6vw,2.1rem);color:#f6e6c3;
  text-shadow:0 2px 18px rgba(0,0,0,.9);opacity:0;transition:opacity .5s;white-space:nowrap;pointer-events:none}
.lv-caption.on{opacity:1}
.lv-skip{position:absolute;right:16px;bottom:calc(var(--live-bottom) + 70px);pointer-events:auto;border:0;padding:.5rem 1rem;border-radius:99px;font:600 .8rem "Manrope";background:rgba(20,17,14,.86);box-shadow:0 0 0 1px var(--line) inset}
.lv-no3d{position:absolute;left:50%;top:calc(var(--live-top) - 4px);transform:translateX(-50%);z-index:4;display:flex;gap:10px;align-items:center;padding:6px 6px 6px 14px;border-radius:99px;
  background:rgba(20,17,14,.95);box-shadow:0 0 0 1px rgba(231,184,102,.4) inset;font-size:.78rem;color:var(--amber);white-space:nowrap;max-width:calc(100% - 24px)}
.lv-no3d span{overflow:hidden;text-overflow:ellipsis}.lv-no3d .btn{padding:.4rem .8rem;font-size:.76rem}
.lv-fps{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:6;font:600 .7rem "IBM Plex Mono";color:#9fe;background:rgba(0,0,0,.6);padding:2px 8px;border-radius:6px;pointer-events:none}

/* drawer */
.lv-drawer{background:#15120f;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.95);padding:18px 18px 22px;scrollbar-width:thin}
.lv-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:10px;border:0;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.lv-dhead{display:flex;align-items:center;gap:12px;padding-right:40px;margin-bottom:12px}
.lv-dhead.st .lv-ico{width:30px;height:30px}
.lv-who{min-width:0;flex:1}
.lv-who h3{margin:0;font:400 1.62rem/1.05 "Instrument Serif",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-who small{font:500 .74rem "IBM Plex Mono";color:var(--muted)}
.lv-state{flex:none;font:700 .68rem "Manrope";padding:.3rem .6rem;border-radius:99px;color:var(--c,var(--cyan));background:rgba(255,255,255,.05);box-shadow:0 0 0 1px currentColor inset}
.lv-note{font-size:.8rem;margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(255,90,78,.1);color:#ffc4bd}
.lv-connrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);margin-bottom:12px}
.lv-connrow .btn{margin-left:auto}
.lv-connrow.c-connected .lv-ico{color:var(--lv-live)}.lv-connrow.c-reconnect,.lv-connrow.c-disconnected{color:#ffc4bd;background:rgba(255,90,78,.1)}
.lv-connrow.c-reconnect .lv-ico,.lv-connrow.c-disconnected .lv-ico{color:var(--lv-bad)}.lv-connrow.c-not_connected .lv-ico{color:var(--lv-wait)}
.lv-sec{margin:14px 0 0}
.lv-sec h4{margin:0 0 8px;font:600 .68rem "Manrope";letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lv-mini{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;padding:8px;border-radius:12px;background:rgba(255,255,255,.03);position:relative}
.lv-mini::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:linear-gradient(90deg,var(--lv-tg),var(--violet) 40%,#D62976)}
.lv-mcell{position:relative;min-height:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.lv-mcell::after{content:"";width:5px;height:5px;border-radius:50%;background:rgba(239,220,179,.3);position:absolute}
.lv-mdot{width:11px;height:11px;border-radius:50%;z-index:1;box-shadow:0 0 0 2px #15120f}
.lv-mdot.wait{background:var(--lv-wait)}.lv-mdot.ready{background:var(--lv-ready)}.lv-mdot.sched{background:transparent;box-shadow:0 0 0 2px var(--lv-live) inset,0 0 0 2px #15120f}
.lv-mdot.live{background:var(--lv-live)}.lv-mdot.bad{background:var(--lv-bad)}
.lv-rrow2{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);margin-bottom:6px}
.lv-rrow2.bad{background:rgba(255,90,78,.1)}.lv-rrow2.warn{background:rgba(240,166,70,.1)}
.lv-rinfo{display:grid;gap:3px;min-width:0;flex:1}
.lv-rinfo b{font-size:.86rem}.lv-rinfo small{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.lv-stchip{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--cyan)}
.lv-stchip .lv-ico{width:14px;height:14px}
.lv-slots{display:flex;flex-wrap:wrap;gap:6px}
.lv-slot{font:600 .74rem "IBM Plex Mono";padding:.32rem .55rem;border-radius:9px;background:rgba(255,255,255,.05);color:var(--muted)}
.lv-slot.st-live{background:rgba(124,224,163,.16);color:var(--lv-live)}.lv-slot.st-scheduled{color:var(--lv-live);box-shadow:0 0 0 1px var(--lv-live) inset}
.lv-slot.st-slotted{color:var(--lv-ready);box-shadow:0 0 0 1px var(--lv-ready) inset}.lv-slot.st-fetching,.lv-slot.st-check{color:var(--lv-wait);border:1px dashed rgba(240,166,70,.6)}
.lv-slot.st-problem{background:rgba(255,90,78,.16);color:#ff8a80}.lv-slot.none{opacity:.45}
.lv-docline{font-size:.76rem;margin:0 0 4px;color:var(--muted)}.lv-docline.k-alert{color:#ffb3ab}.lv-docline.k-fix{color:var(--lv-live)}
.lv-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lv-acts .btn{padding:.62rem .9rem;font-size:.82rem}
.lv-acts .btn .lv-ico,#lvReconnect .lv-ico{width:15px;height:15px;color:inherit}
.lv-slist{display:grid;gap:4px}
.lv-srow{display:flex;align-items:center;gap:10px;border:0;text-align:left;padding:8px;border-radius:12px;background:rgba(255,255,255,.04)}
.lv-srow:hover{background:rgba(214,178,122,.1)}.lv-srow.bad{background:rgba(255,90,78,.1)}.lv-srow.warn{background:rgba(240,166,70,.12)}
.lv-srow time{font:500 .7rem "IBM Plex Mono";color:var(--muted)}

/* 2D board (fallback, or the 2D button) */
.lv-board{position:absolute;z-index:2;left:calc(16px + 360px + 14px);right:calc(16px + 320px + 14px);top:var(--live-top);bottom:calc(var(--live-bottom) + 60px);
  overflow:auto;padding:14px;border-radius:18px;background:rgba(12,11,10,.94);box-shadow:0 0 0 1px var(--line) inset;display:grid;gap:14px;align-content:start}
#viewLive.lv-m-compact .lv-board{left:calc(16px + 300px + 12px);right:calc(16px + 280px + 12px)}
#viewLive.lv-m-phone .lv-board{left:10px;right:10px;top:calc(var(--live-top) + 100px);bottom:calc(var(--live-bottom) + 92px)}
#viewLive.no3d .lv-stage,#viewLive.no3d .lv-labels,#viewLive.board-open .lv-labels{display:none}
.lv-bcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.lv-bcol{padding:8px;border-radius:12px;background:rgba(255,255,255,.035);min-width:0}
.lv-bcol header{display:grid;grid-template-columns:18px 1fr auto;gap:2px 8px;align-items:center;margin-bottom:6px}
.lv-bcol header b{font:400 1rem "Instrument Serif",serif}.lv-bcol header small{grid-column:2;font-size:.66rem;color:var(--muted)}
.lv-bcol header .lv-cnum{grid-row:1/3;grid-column:3}
.lv-bcol.bad header .lv-cnum,.lv-bcol.bad header .lv-ico{color:var(--lv-bad)}
.lv-bchips{display:grid;gap:4px}
.lv-bchip{display:flex;align-items:center;gap:6px;border:0;padding:3px 8px 3px 3px;border-radius:99px;background:rgba(255,255,255,.05);font-size:.74rem;text-align:left;min-width:0}
.lv-bchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lv-bchip.warn{box-shadow:0 0 0 1px var(--lv-wait) inset}
.lv-bstories h3{margin:4px 0 8px;font:400 1.3rem "Instrument Serif",serif}
.lv-btable{display:grid;grid-template-columns:minmax(120px,1.6fr) repeat(var(--n),minmax(36px,1fr));gap:4px;align-items:center}
.lv-bth{font:600 .68rem "IBM Plex Mono";color:var(--muted);text-align:center}.lv-bth:first-child{text-align:left}
.lv-bname{display:flex;align-items:center;gap:6px;border:0;background:transparent;font-size:.76rem;text-align:left;min-width:0;padding:2px}
.lv-bname span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-bdot{justify-self:center;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.06)}
.lv-bdot.st-live{background:var(--lv-live)}.lv-bdot.st-scheduled{box-shadow:0 0 0 2px var(--lv-live) inset;background:transparent}
.lv-bdot.st-slotted{box-shadow:0 0 0 2px var(--lv-ready) inset;background:transparent}.lv-bdot.st-fetching,.lv-bdot.st-check{border:2px dashed var(--lv-wait);background:transparent}
.lv-bdot.st-problem{background:var(--lv-bad)}

/* compact (iPad landscape / small laptop) */
#viewLive.lv-m-compact .lv-feed li:nth-child(n+4){display:none}
#viewLive.lv-m-compact .lv-title{font-size:1.6rem}
#viewLive.lv-m-compact .lv-search{height:38px}

/* phone + iPad portrait */
.lv-mpill{border:0;text-align:left;padding:.55rem .8rem;border-radius:14px;font-size:.82rem;background:rgba(20,17,14,.9);box-shadow:0 0 0 1px var(--line) inset;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-mpill b.g{color:var(--lv-live)}.lv-mpill b.r{color:#ff8a80}
.lv-schip2{display:flex;align-items:center;gap:6px;border:0;padding:0 .7rem;border-radius:12px;font-size:.78rem;background:rgba(20,17,14,.9);box-shadow:0 0 0 1px var(--line) inset}
.lv-schip2 b{font:600 .82rem "IBM Plex Mono";color:var(--cyan)}.lv-schip2.bad b{color:var(--lv-bad)}
.lv-fab{border:0;display:grid;place-items:center;background:rgba(20,17,14,.92);box-shadow:0 0 0 1px var(--line) inset;color:var(--cyan);font:700 1rem "Manrope"}
.lv-fab i{width:17px;height:17px}
.lv-ticker{border:0;text-align:left;padding:0 12px;border-radius:12px;background:rgba(20,17,14,.92);box-shadow:0 0 0 1px var(--line) inset;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-ticker b{font:700 .62rem "Manrope";letter-spacing:.14em;text-transform:uppercase;color:var(--lv-live);margin-right:8px}
#viewLive.lv-m-phone .lv-needs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
#viewLive.lv-m-phone .lv-need{flex:none}
#viewLive.lv-m-phone .lv-bottom{flex-direction:column-reverse;align-items:center;gap:8px}
#viewLive.lv-m-phone .lv-needs{width:100%}
#viewLive.lv-m-phone .lv-caption{white-space:normal;text-align:center;width:calc(100% - 32px);bottom:calc(var(--live-bottom) + 140px)}
#viewLive.lv-m-phone .lv-skip{bottom:calc(var(--live-bottom) + 96px)}
#viewLive.lv-m-phone.pm-open .lv-left,#viewLive.lv-m-phone.pf-open .lv-right,#viewLive.lv-m-phone.ps-open .lv-right{display:grid;left:12px;right:12px;width:auto;z-index:4;
  top:calc(var(--live-top) + 52px);max-height:calc(100% - var(--live-top) - var(--live-bottom) - 110px);overflow:auto}
#viewLive.lv-m-phone.pm-open .lv-left .lv-rail{width:auto}
#viewLive.lv-m-phone .lv-right .lv-btns{display:none}
#viewLive.lv-m-phone.pf-open .lv-right .lv-tools{display:none}
#viewLive.lv-m-phone.ps-open .lv-right{top:var(--live-top)}
#viewLive.lv-m-phone.ps-open .lv-right>:not(.lv-tools){display:none}
#viewLive.lv-m-phone.ps-open .lv-search{height:46px}
#viewLive.lv-m-phone.pm-open .lv-left,#viewLive.lv-m-phone.pf-open .lv-right{padding:8px;border-radius:18px;background:#0e0c0a;box-shadow:0 0 0 1px var(--line) inset,0 30px 60px -10px #000}
#viewLive.lv-m-phone.pl-open .lv-legend{display:block;position:fixed;left:12px;right:12px;top:calc(var(--live-top) + 52px);max-width:none;z-index:6;background:#15120f;padding:14px}
#viewLive.lv-m-phone .lv-chip.more{padding:.1rem .4rem}
.lv-moremenu{display:none;position:absolute;right:12px;top:calc(var(--live-top) + 150px);z-index:5;padding:6px;min-width:200px;pointer-events:auto}
#viewLive.pmore-open .lv-moremenu{display:grid;gap:2px}
.lv-mitem{border:0;background:transparent;text-align:left;padding:.65rem .8rem;border-radius:10px;font:600 .84rem "Manrope"}
.lv-mitem:hover{background:rgba(214,178,122,.12)}
/* the 12 px floor above flattens every size to its parent; these bring the phone hierarchy back (still never under 12 px) */
#viewLive.lv-m-phone .lv-title,#viewLive.lv-m-phone .lv-who h3{font-size:1.5rem}
#viewLive.lv-m-phone .lv-num{font-size:1.1rem}
#viewLive.lv-m-phone .lv-caption{font-size:1.25rem}
#viewLive.lv-m-phone small,#viewLive.lv-m-phone time,#viewLive.lv-m-phone .lv-k,#viewLive.lv-m-phone .lv-phase,#viewLive.lv-m-phone .lv-needs-h,#viewLive.lv-m-phone .lv-lane,
#viewLive.lv-m-phone .lv-csub,#viewLive.lv-m-phone .lv-age,#viewLive.lv-m-phone .lv-nb,#viewLive.lv-m-phone .lv-sec h4,#viewLive.lv-m-phone .lv-empty,#viewLive.lv-m-phone .lv-docline,
#viewLive.lv-m-phone .lv-lab,#viewLive.lv-m-phone .lv-schip,#viewLive.lv-m-phone .lv-state,#viewLive.lv-m-phone .lv-slot,#viewLive.lv-m-phone .lv-tray h3,#viewLive.lv-m-phone .lv-feed h3,
#viewLive.lv-m-phone .lv-legend summary,#viewLive.lv-m-phone .lv-ticker b{font-size:12px}
#viewLive.lv-m-phone .lv-chip,#viewLive.lv-m-phone .lv-need,#viewLive.lv-m-phone .lv-schip2,#viewLive.lv-m-phone .lv-ticker,#viewLive.lv-m-phone .lv-frow,#viewLive.lv-m-phone .lv-pill,
#viewLive.lv-m-phone .lv-mpill,#viewLive.lv-m-phone .lv-seg button,#viewLive.lv-m-phone .lv-tag,#viewLive.lv-m-phone .lv-doc,#viewLive.lv-m-phone .lv-igt,#viewLive.lv-m-phone .lv-next,
#viewLive.lv-m-phone .lv-connrow,#viewLive.lv-m-phone .lv-note,#viewLive.lv-m-phone .lv-lrow,#viewLive.lv-m-phone .lv-mitem,#viewLive.lv-m-phone .lv-acts .btn{font-size:13px}
#viewLive.lv-m-phone .lv-chip b{font-size:15px}
@media (max-width:400px){#viewLive .lv-title{font-size:1.5rem}.lv-schip2{padding:0 .55rem}}

/* ===== v68: nothing sits under the phone's status bar (a Home Screen app that was added with the see-through bar) ===== */
#app{padding-top:calc(14px + env(safe-area-inset-top,0px))}
@media (max-width:760px){#app{padding-top:calc(10px + env(safe-area-inset-top,0px))}}

/* ---- Auto-DM (25 Oct 2026): the form (card + tab), the switch, the Auto-DM tab; drops & recoveries on Connections ---- */
.adm-box{margin-top:10px;padding:12px;border-radius:16px;background:rgba(10,9,8,.42);box-shadow:0 0 0 1px var(--line) inset;display:grid;gap:8px}
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.adm-grid label,.adm-grid>div{display:grid;gap:4px;min-width:0;align-content:start}
.adm-grid .w2{grid-column:span 2}
.adm-grid span{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.adm-grid input,.adm-grid textarea{padding:.55rem .75rem;font-size:.82rem;border-radius:11px}
.adm-grid textarea{resize:vertical;min-height:58px;line-height:1.4}
.adm-replies{gap:6px!important}
.adm-follow{justify-self:start;flex-wrap:wrap}
.adm-note{margin:0;font-size:.72rem;color:var(--muted)}
.adm-note b{color:var(--text)}
.adm-state{display:grid;gap:4px;margin-top:8px;font-size:.74rem;color:var(--muted);min-width:0}
.adm-state-row{display:flex;align-items:center;gap:8px;min-width:0}
.adm-state .adm-text{flex:1;min-width:0;overflow-wrap:anywhere}
.adm-state .adm-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}
.adm-state[data-s="paused"] .adm-dot{background:#d6b27a}
.adm-state[data-s="on"] .adm-dot{background:#5fd39a;box-shadow:0 0 8px #5fd39a}
.adm-state[data-s="failed"] .adm-dot,.adm-state[data-s="check"] .adm-dot{background:#f07a6a}
.adm-state[data-s="failed"] .adm-text{color:#f0b8ae}
.adm-state[data-s="making"] .adm-dot{background:#d6b27a;animation:blink 1s ease-in-out infinite}
.adm-state .icon-btn{width:28px;height:28px;border-radius:9px;flex:none}
.adm-state .icon-btn i{width:14px;height:14px}
.adm-more{display:grid;gap:3px;padding-left:16px}
.adm-help-line{font-size:.68rem;color:var(--muted);opacity:.85}
.adm-fails{margin:2px 0 0;padding-left:16px;color:#f0b8ae;font-size:.72rem;display:grid;gap:2px}
.adm-btn:disabled,.adm-box input:disabled,.adm-box textarea:disabled{opacity:.55;cursor:default}
.adm-switch{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font:700 .72rem "Manrope";color:var(--muted);
  padding:3px 10px 3px 3px;border-radius:99px;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line) inset;transition:.2s;flex:none}
.adm-switch i{width:20px;height:20px;border-radius:50%;background:#8a8378;transition:.2s}
.adm-switch.on{color:#0b0a09;background:#5fd39a;box-shadow:0 0 14px -4px #5fd39a}
.adm-switch.on i{background:#0b0a09}
.adm-switch:disabled{opacity:.5;cursor:wait}
@media (max-width:560px){.adm-grid{grid-template-columns:1fr}.adm-grid .w2{grid-column:auto}}
/* the Auto-DM tab */
.adm-clients{display:flex;flex-wrap:wrap;gap:8px;margin:0 4px 18px;max-height:210px;overflow:auto}
.adm-chip{display:grid;text-align:left;gap:1px;border:0;cursor:pointer;padding:.5rem .8rem;border-radius:12px;color:var(--text);
  background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;font:600 .8rem "Manrope";transition:.2s}
.adm-chip small{color:var(--muted);font:500 .68rem "IBM Plex Mono"}
.adm-chip.allowed{box-shadow:0 0 0 1px rgba(95,211,154,.6) inset}
.adm-chip.on{background:var(--grad);color:var(--ink)}.adm-chip.on small{color:rgba(11,10,9,.7)}
.adm-head{border-radius:20px;padding:16px;margin:0 4px 14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.adm-head h2{margin:0;font-size:1.15rem}.adm-head small{color:var(--cyan);font-family:"IBM Plex Mono";font-size:.75rem}
.adm-head .adm-note{flex-basis:100%}
.adm-allow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adm-reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:0 4px 18px}
.adm-reel{border-radius:18px;padding:12px;display:grid;gap:10px;align-content:start;animation:rise .5s both}
.adm-thumb{position:relative;height:150px;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,rgba(214,178,122,.25),rgba(20,18,16,.9))}
.adm-thumb img{width:100%;height:100%;object-fit:cover}
.adm-thumb span{position:absolute;left:8px;top:8px;font:700 .6rem "IBM Plex Mono";padding:.15rem .4rem;border-radius:6px;background:rgba(0,0,0,.55);color:#e9cf9f}
.adm-meta{display:grid;gap:3px;font-size:.76rem;min-width:0}
.adm-meta p{margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.adm-meta a{color:var(--cyan);font-size:.72rem;text-decoration:none}
.adm-auto{display:grid;gap:4px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset}
.adm-auto.on{box-shadow:0 0 0 1px rgba(95,211,154,.55) inset}
.adm-auto-top{display:flex;gap:8px;align-items:center;justify-content:space-between}
.adm-auto-t{display:grid;min-width:0;font-size:.76rem}.adm-auto-t small{color:var(--muted);font-size:.68rem;overflow-wrap:anywhere}
.adm-setup{justify-content:center}
.adm-sub-h{margin:6px 6px 10px;font-size:.9rem;color:var(--muted);font-weight:600}
.adm-others{display:grid;gap:8px;margin:0 4px 18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.adm-log{display:grid;gap:5px;margin:0 4px 18px;font-size:.74rem}
.adm-log-i{display:grid;gap:1px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.03)}
.adm-log-i span{color:var(--muted);overflow-wrap:anywhere}.adm-log-i.bad b{color:#f0b8ae}
#admOwnerSheet input{margin:6px 0}
#admSheet .sheet-panel{grid-template-rows:auto auto minmax(0,1fr) auto auto}
#admSheet #admForm{overflow:auto;min-height:0;overscroll-behavior:contain}
#admSheet .err:empty,#admOwnerSheet .err:empty{display:none}
.conn .copy-link{justify-content:center}
.conn .copy-link.done{box-shadow:0 0 0 1px #5fd39a inset;color:#5fd39a}
.conn-watch{margin:0 4px 18px;padding:14px 16px;border-radius:18px;background:linear-gradient(160deg,rgba(34,30,26,.6),rgba(14,12,10,.62));box-shadow:0 0 0 1px var(--line) inset;display:grid;gap:10px}
.watch-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.watch-head span{font-size:.74rem;color:var(--muted)}
.watch-list{display:grid;gap:6px;max-height:240px;overflow:auto}
.watch-item{display:flex;gap:8px;align-items:baseline;font-size:.78rem;min-width:0}
.watch-item i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--muted);transform:translateY(-1px)}
.watch-item.r i{background:#f07a6a}.watch-item.g i{background:#5fd39a}
.watch-item b{font-weight:600;white-space:nowrap}
.watch-item span{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.watch-item.m{color:var(--muted)}

/* ===== 30 Oct 2026: the Auto-DM tab as smooth as the cards (v42): no live blur behind each Reel, a quiet repaint ===== */
.adm-reel,.adm-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(160deg,rgba(34,30,26,.94),rgba(14,12,10,.95))}
.adm-reel{contain:layout paint style}
.adm-quiet .adm-reel{animation:none}
.adm-clients{overscroll-behavior:contain}

/* ===== Ask (30 Oct 2026): the chat tab. Solid backgrounds, no backdrop-filter on bubbles or blocks (phones stay smooth) ===== */
.ask-wrap{display:flex;flex-direction:column;min-height:calc(100dvh - 170px);max-width:820px;margin:0 auto}
.ask-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 4px 10px;flex-wrap:wrap}
.ask-head h1{margin:0;font-size:clamp(2rem,6vw,2.7rem);line-height:1.05}
.ask-thread{flex:1;display:grid;gap:14px;align-content:start;padding:6px 4px 18px;min-width:0}
.ask-intro{display:grid;gap:12px;padding:8px 0}
.ask-intro p{margin:0;font-size:.92rem}
.ask-msg{display:grid;gap:8px;min-width:0;max-width:100%;animation:rise .35s both;scroll-margin-top:100px}
.ask-msg.me{justify-self:end;max-width:min(88%,560px)}
.ask-msg.desk{justify-self:start;width:min(100%,720px)}
.ask-bubble{padding:.62rem .95rem;border-radius:18px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;width:fit-content;max-width:100%}
.ask-msg.me .ask-bubble{justify-self:end;background:var(--grad);color:var(--ink);font-weight:600;border-bottom-right-radius:6px}
.ask-msg.desk .ask-bubble{background:linear-gradient(160deg,rgba(34,30,26,.96),rgba(18,16,13,.97));box-shadow:0 0 0 1px var(--line) inset;border-bottom-left-radius:6px}
.ask-msg.err .ask-bubble{color:#f0b8ae;box-shadow:0 0 0 1px rgba(227,139,127,.5) inset}
.ask-blocks{display:grid;gap:8px;min-width:0}
.ask-blk{display:grid;gap:8px;padding:12px;border-radius:16px;min-width:0;background:rgba(14,12,10,.92);box-shadow:0 0 0 1px var(--line) inset}
.ask-blk.confirm{box-shadow:0 0 0 1px rgba(214,178,122,.55) inset}
.ask-blk.confirm.used{opacity:.7}
.ask-blk.data{box-shadow:0 0 0 1px rgba(156,202,166,.35) inset}
.ask-bt{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--cyan);overflow-wrap:anywhere}
.ask-p{margin:0;font-size:.88rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ask-src,.ask-more{margin:0;font-size:.7rem;color:var(--muted);overflow-wrap:anywhere}
.ask-stats{display:flex;flex-wrap:wrap;gap:6px}
.ask-stat{padding:.25rem .6rem;border-radius:99px;font-size:.74rem;color:var(--muted);background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.ask-stat b{color:var(--text);font-size:.86rem}
.ask-stat.t-good b{color:var(--green)}.ask-stat.t-bad b{color:var(--red)}.ask-stat.t-warn b{color:var(--amber)}
.ask-list,.ask-tbl{display:grid;gap:6px}
.ask-li{display:flex;gap:9px;align-items:flex-start;min-width:0;padding:7px 9px;border-radius:11px;background:rgba(255,255,255,.035)}
.ask-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:.42rem;background:var(--muted)}
.ask-dot.t-good{background:#5fd39a}.ask-dot.t-bad{background:#f07a6a}.ask-dot.t-warn{background:var(--amber)}
.ask-li-b{display:grid;gap:1px;min-width:0}
.ask-li-t{font-size:.84rem;font-weight:700;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
a.ask-li-t:hover{color:var(--cyan)}
.ask-li-b small{font-size:.74rem;color:var(--muted);overflow-wrap:anywhere}
.ask-tr{display:flex;flex-wrap:wrap;gap:3px 12px;align-items:baseline;min-width:0;padding:7px 9px;border-radius:11px;background:rgba(255,255,255,.035)}
.ask-cell{font-size:.76rem;color:var(--muted);overflow-wrap:anywhere;min-width:0;text-decoration:none}
.ask-cell.first{flex:1 1 100%;font-size:.84rem;font-weight:700;color:var(--text)}
a.ask-cell:hover{color:var(--cyan)}
.ask-cell.t-good{color:var(--green)}.ask-cell.t-bad{color:var(--red)}.ask-cell.t-warn{color:var(--amber)}
.ask-url{display:block;padding:.55rem .7rem;border-radius:11px;background:rgba(0,0,0,.4);font:500 .74rem "IBM Plex Mono",monospace;color:var(--cyan);word-break:break-all;user-select:all}
.ask-acts{display:flex;flex-wrap:wrap;gap:8px}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px}
.ask-chip{border:0;cursor:pointer;padding:.5rem .85rem;border-radius:14px;color:var(--text);text-align:left;font:600 .82rem "Manrope";
  background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line) inset;transition:.2s;overflow-wrap:anywhere}
.ask-chip:hover:not(:disabled){background:rgba(214,178,122,.16)}
.ask-chip.on{background:var(--grad);color:var(--ink)}
.ask-chip:disabled{cursor:default;opacity:.55}.ask-chip.on:disabled{opacity:1}
.ask-status{display:flex;align-items:center;gap:8px;margin:0 6px 8px;font-size:.8rem;color:var(--muted)}
.ask-status i{width:8px;height:8px;border-radius:50%;background:var(--violet);animation:blink 1s ease-in-out infinite}
.ask-dock{position:sticky;bottom:14px;z-index:30;display:grid;gap:8px;padding:8px;border-radius:20px;background:#15120f;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.9),0 0 0 1px var(--line) inset}
.ask-wrap.drag .ask-dock{box-shadow:0 0 0 2px var(--violet) inset,0 0 30px -4px rgba(214,178,122,.6)}
.ask-bar{display:flex;gap:8px;align-items:flex-end;min-width:0}
.ask-bar textarea{flex:1;min-width:0;resize:none;max-height:140px;min-height:46px;padding:.7rem .9rem;line-height:1.35;border-radius:14px;overflow-y:auto}
.ask-bar .btn{align-self:stretch;justify-content:center}
.ask-tools{display:flex;gap:4px;align-items:center;align-self:flex-end;min-height:46px}
.ask-ico,.ask-lang{border:0;cursor:pointer;color:var(--text);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line) inset;border-radius:12px;
  width:42px;height:42px;display:grid;place-items:center;flex:none;transition:.2s;font:700 .82rem "Manrope"}
.ask-ico:hover,.ask-lang:hover{background:rgba(255,255,255,.12)}
.ask-ico i{width:19px;height:19px}
.ask-ico.on{background:var(--grad);color:var(--ink);box-shadow:0 0 18px -2px rgba(214,178,122,.85);animation:blink 1.1s ease-in-out infinite}
#askVoice.on{animation:none}
.ask-lang{width:38px;color:var(--cyan)}
.ask-vbar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;font-size:.8rem;color:var(--text);background:rgba(214,178,122,.12);box-shadow:0 0 0 1px rgba(214,178,122,.35) inset}
.ask-vbar.bad{background:rgba(227,139,127,.14);box-shadow:0 0 0 1px rgba(227,139,127,.5) inset;color:#f0b8ae}
.ask-vdot{width:8px;height:8px;border-radius:50%;background:var(--violet);flex:none;animation:blink 1s ease-in-out infinite}
#askVtext{flex:1;min-width:0;overflow-wrap:anywhere}
.ask-vstop{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:.3rem .65rem;border-radius:10px;color:var(--ink);background:var(--grad);font:700 .76rem "Manrope";flex:none}
.ask-vstop i{width:12px;height:12px}
.ask-files{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin;overscroll-behavior-x:contain}
.ask-file{position:relative;display:flex;gap:8px;align-items:center;flex:none;width:min(240px,78vw);padding:6px 28px 6px 6px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset}
.ask-file.done{box-shadow:0 0 0 1px rgba(95,211,154,.5) inset}
.ask-file.bad{box-shadow:0 0 0 1px rgba(227,139,127,.65) inset}
.ask-file.bad small{color:#f0b8ae}
.ask-fthumb{width:46px;height:46px;border-radius:9px;overflow:hidden;flex:none;background:linear-gradient(150deg,rgba(214,178,122,.25),rgba(20,18,16,.9));display:grid;place-items:center;font-size:.62rem}
.ask-fthumb img,.ask-fthumb video{width:100%;height:100%;object-fit:cover;display:block}
.ask-fmeta{display:grid;gap:2px;min-width:0;flex:1}
.ask-fmeta b{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-fmeta small{font-size:.66rem;color:var(--muted);overflow-wrap:anywhere}
.ask-fbar{display:block;height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.ask-fbar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--grad);transition:width .25s}
.ask-fx{position:absolute;top:3px;right:3px;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;color:var(--muted);background:transparent;font-size:1.1rem;line-height:1}
.ask-fx:hover{color:var(--red);background:rgba(227,139,127,.15)}
.ask-mfiles{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ask-mfile{padding:.2rem .55rem;border-radius:99px;font-size:.7rem;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line) inset;color:var(--muted);overflow-wrap:anywhere}
.ask-hint{margin:6px 10px 0;font-size:.7rem;color:var(--muted)}
@media (max-width:760px){
  .ask-wrap{min-height:calc(100dvh - 210px)}
  .ask-head{margin-top:14px}
  .ask-dock{bottom:calc(78px + env(safe-area-inset-bottom))}     /* above the phone tab bar */
  .ask-bar{flex-wrap:wrap}
  .ask-bar textarea{flex:1 1 100%}                                /* the text on its own line; the tools and Send below it */
  .ask-tools{flex:1;order:2}
  .ask-bar .btn{order:3}
  .ask-bar .btn span{display:none}.ask-bar .btn{padding:0 1rem}
  .ask-hint{display:none}
  .ask-msg.me{max-width:92%}
}
html.tablet .ask-dock{bottom:calc(98px + env(safe-area-inset-bottom))}
@media (max-width:400px){.tabs button{font-size:.56rem}.tabs i{width:16px;height:16px}}     /* eight tabs on a small phone */

/* ---- icons of the Ask bar (paperclip, mic, headset, stop) */
.i-clip{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5l-8.6 8.6a5 5 0 01-7.1-7.1l8.9-8.9a3.3 3.3 0 014.7 4.7l-8.9 8.9a1.7 1.7 0 01-2.4-2.4l8-8'/%3E%3C/svg%3E")}
.i-mic{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0014 0M12 18v3'/%3E%3C/svg%3E")}
.i-headset{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0116 0v3'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3C/svg%3E")}
.i-stop{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='5' y='5' width='14' height='14' rx='3'/%3E%3C/svg%3E")}

/* ===== Ask as a docked panel (1200 px and up): the chat sits on the right of every tab; below that it stays the full Ask tab ===== */
.ask-grip,.ask-close{display:none}
.ask-head-btns{display:flex;gap:8px;align-items:center}
@media (min-width:1200px){
  html.ask-wide.ask-open body{padding-right:var(--ask-w,440px)}                 /* the main column shrinks beside the panel: no overlap, no sideways scroll */
  html.ask-wide.ask-open .toasts{right:calc(var(--ask-w,440px) + 16px)}
  html.ask-wide.ask-open .publish-fab{right:calc(var(--ask-w,440px) + 28px)}
  html.ask-wide.ask-resizing,html.ask-wide.ask-resizing *{cursor:col-resize!important;user-select:none!important}
  html.ask-wide #viewAsk{position:fixed;top:0;right:0;bottom:0;width:var(--ask-w,440px);height:100vh;height:100dvh;max-width:none;min-height:0;margin:0;z-index:36;
    display:flex;flex-direction:column;background:#100e0b;box-shadow:-18px 0 40px -18px rgba(0,0,0,.85),1px 0 0 var(--line) inset;border-left:1px solid var(--line)}
  html.ask-wide #viewAsk.hidden{display:none!important}
  html.ask-wide .ask-grip{display:block;position:absolute;left:-4px;top:0;bottom:0;width:9px;cursor:col-resize;z-index:3}
  html.ask-wide .ask-grip::after{content:"";position:absolute;left:4px;top:calc(50% - 22px);width:3px;height:44px;border-radius:3px;background:var(--line);transition:.2s}
  html.ask-wide .ask-grip:hover::after,html.ask-wide.ask-resizing .ask-grip::after{background:var(--violet)}
  html.ask-wide .ask-close{display:grid}
  html.ask-wide .ask-head{margin:14px 14px 6px}
  html.ask-wide .ask-head h1{font-size:1.7rem}
  html.ask-wide .ask-thread{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 14px 14px;align-content:start}
  html.ask-wide .ask-msg{scroll-margin-top:8px}
  html.ask-wide .ask-msg.me{max-width:94%}
  html.ask-wide .ask-status{margin:0 16px 6px}
  html.ask-wide .ask-dock{position:static;margin:0 10px 10px;flex:none}
  html.ask-wide .ask-hint{display:none}
  html.ask-wide .ask-bar{flex-wrap:wrap}                                        /* the box on its own line, tools and Send below (the panel is narrow) */
  html.ask-wide .ask-bar textarea{flex:1 1 100%}
  html.ask-wide .ask-tools{flex:1;order:2}
  html.ask-wide .ask-bar .btn{order:3}
  html.ask-wide .ask-files{max-width:100%}
}

/* ===== 30 Oct 2026: big desktop screens use the whole width (the page stopped at 1500 px, centred, with empty sides) ===== */
@media (min-width:1500px){#app{max-width:none}}