@font-face{font-family:Heebo;font-weight:400;src:url(fonts/Heebo-Regular.ttf)}
@font-face{font-family:Heebo;font-weight:500;src:url(fonts/Heebo-Medium.ttf)}
@font-face{font-family:Heebo;font-weight:600;src:url(fonts/Heebo-SemiBold.ttf)}
@font-face{font-family:Heebo;font-weight:700;src:url(fonts/Heebo-Bold.ttf)}
@font-face{font-family:Heebo;font-weight:800;src:url(fonts/Heebo-ExtraBold.ttf)}
@font-face{font-family:Heebo;font-weight:900;src:url(fonts/Heebo-Black.ttf)}

:root{
  --ink:#0B0A0D; --ink2:#141216; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.11); --cream:#F3EDE4; --muted:#A79F96; --ember:#D9633F; --ember2:#FF6A3D; --peach:#F2C4B3;
  --planned:#8E97A8; --producing:#F2B24C; --ready:#FF8A5C; --scheduled:#4CC9B0; --published:#5BD38A; --failed:#E5484D;
  --r:20px; --sb:env(safe-area-inset-bottom,0px); --st:env(safe-area-inset-top,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --vh:100dvh; --vt:0px; /* the script keeps these equal to the visual viewport, so the keyboard never covers the composer */
}

/* ---------- app shell: the page itself never scrolls, bounces, pans or zooms ---------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow:hidden;background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:pan-y}
body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:pan-y;
  background:radial-gradient(1200px 600px at 50% -10%,#1d1612,var(--ink) 60%);color:var(--cream);
  font-family:Heebo,system-ui,sans-serif;font-size:16px;line-height:1.45;direction:rtl;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased}
input,textarea,select{font:inherit;font-size:16px;color:inherit;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
button,a,.card,.tab,.chip{touch-action:manipulation}
a{color:inherit}
[hidden]{display:none!important}
.sel{-webkit-user-select:text;user-select:text}
.mono{direction:ltr;unicode-bidi:plaintext;overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--ember2);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- login ---------- */
#login{position:fixed;left:0;right:0;top:var(--vt);height:var(--vh);z-index:50;display:grid;place-items:center;
  padding:calc(24px + var(--st)) calc(24px + var(--sr)) calc(24px + var(--sb)) calc(24px + var(--sl));overflow:hidden;
  background:linear-gradient(180deg,rgba(11,10,13,.25),rgba(11,10,13,.78)),url(brand/login-bg.jpg) center/cover}
.login-card{width:min(380px,100%);text-align:center;padding:30px 24px;border-radius:28px;background:rgba(15,13,17,.62);
  border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.login-card img{width:clamp(64px,16vh,96px);aspect-ratio:1;margin:-6px auto 4px;display:block;filter:drop-shadow(0 10px 30px rgba(255,106,61,.35))}
.brand{font-weight:900;font-size:clamp(30px,8vw,40px);letter-spacing:.12em;direction:ltr}
.tag{color:var(--peach);font-weight:600;margin:2px 0 20px}
.field{width:100%;padding:15px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--line);outline:none;text-align:center}
.field:focus{border-color:var(--ember2);box-shadow:0 0 0 3px rgba(255,106,61,.2)}
.err{color:#ff8a8a;min-height:22px;margin-top:10px;font-size:14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:14px;font-weight:700;background:var(--panel2);border:1px solid var(--line);transition:transform .12s,background .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--ember2),var(--ember));border-color:transparent;color:#fff;box-shadow:0 8px 28px rgba(255,106,61,.28)}
.btn.danger{color:#ff8a8a}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.sm{min-height:40px;padding:8px 14px;border-radius:11px;font-size:14px}

/* ---------- shell ---------- */
#app{position:fixed;top:var(--vt);left:0;right:0;margin:0 auto;width:min(100%,560px);height:var(--vh);display:flex;flex-direction:column;overflow:hidden;
  padding-left:var(--sl);padding-right:var(--sr)}
@media (min-width:700px){#app{border-inline:1px solid var(--line);background:rgba(11,10,13,.6)}}
header.top{flex:none;padding:calc(10px + var(--st)) 16px 8px}
.top-row{display:flex;align-items:center;gap:12px;min-width:0}
.logo{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.logo img{width:34px;height:34px;flex:none}
.logo b{font-weight:900;letter-spacing:.14em;font-size:20px;direction:ltr}
.pilot{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:13px;font-weight:600;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--planned);flex:none}
.pilot.on .dot{background:var(--published);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(91,211,138,.55)}100%{box-shadow:0 0 0 10px rgba(91,211,138,0)}}
.stats{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px;margin-top:10px}
#app[data-tab=board] .stats{display:none}
.stat{padding:7px 2px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:center;min-width:0}
.stat b{display:block;font-size:clamp(17px,5.4vw,22px);font-weight:800;line-height:1.1}
.stat span{font-size:clamp(10px,3vw,12px);color:var(--muted);white-space:nowrap}
.stat.c-planned b{color:var(--planned)}.stat.c-producing b{color:var(--producing)}.stat.c-ready b{color:var(--ready)}.stat.c-scheduled b{color:var(--scheduled)}.stat.c-published b{color:var(--published)}.stat.c-failed b{color:var(--failed)}
.tabs{display:flex;gap:6px;margin-top:10px;padding:4px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.tab{flex:1;min-height:42px;padding:8px;border-radius:12px;font-weight:700;color:var(--muted);transition:.15s}
.tab.on{background:var(--panel2);color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
main{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:6px 16px 18px}
main,.sheet-in,.logs{scrollbar-width:none}
main::-webkit-scrollbar,.sheet-in::-webkit-scrollbar,.logs::-webkit-scrollbar{display:none}
@media (max-height:700px){
  header.top{padding-bottom:4px}
  .stats{margin-top:6px}
  .stat{padding:4px 2px}.stat b{font-size:17px}
  .tabs{margin-top:6px}.tab{min-height:38px;padding:5px}
  .comp-box textarea{min-height:40px}
}
#ptr{position:absolute;top:-44px;left:50%;width:36px;height:36px;margin-left:-18px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);font-size:18px;z-index:5;transition:none;pointer-events:none}
#ptr.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- calendar ---------- */
.weekbar{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.weekbar b{flex:1;text-align:center;font-weight:700;font-size:14px;color:var(--peach)}
.nav{width:42px;height:42px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:20px;display:grid;place-items:center}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding-bottom:6px}
.day-chip{min-width:0;padding:8px 0;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:center}
.day-chip small{display:block;color:var(--muted);font-size:clamp(10px,2.8vw,12px)}
.day-chip b{font-size:clamp(16px,4.8vw,20px);font-weight:800}
.day-chip.today{border-color:var(--ember2)}
.day-chip .dots{display:flex;gap:3px;justify-content:center;margin-top:3px;min-height:7px}
.day-chip .dots i{width:6px;height:6px;border-radius:50%}
.day-h{margin:16px 2px 8px;font-weight:800;font-size:15px;color:var(--peach);display:flex;gap:8px;align-items:baseline}
.day-h small{color:var(--muted);font-weight:500}
.card{position:relative;display:flex;gap:12px;padding:12px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);margin-bottom:10px;width:100%;text-align:right;min-width:0}
.card:active{background:var(--panel2)}
.thumb{flex:0 0 clamp(52px,16vw,64px);height:clamp(80px,24vw,96px);border-radius:12px;background:var(--ink2) center/cover;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:26px;overflow:hidden}
.card-body{flex:1;min-width:0}
.card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.time{font-weight:800;font-size:17px;direction:ltr}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,.07);white-space:nowrap}
.badge i{width:7px;height:7px;border-radius:50%;background:currentColor}
.s-planned{color:var(--planned)}.s-producing{color:var(--producing)}.s-ready{color:var(--ready)}.s-scheduled{color:var(--scheduled)}.s-published{color:var(--published)}.s-failed{color:var(--failed)}
.title{font-weight:700;margin:4px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.plats{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.chip{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;color:var(--cream)}
.chip.sel{background:rgba(255,106,61,.2);color:var(--peach);box-shadow:inset 0 0 0 1px rgba(255,106,61,.5)}
.chip{white-space:nowrap}
button.chip{min-height:38px;padding:6px 14px;font-size:13px}
.chip.trial{background:rgba(76,201,176,.18);color:var(--scheduled);font-weight:700}
.btn.opt{flex-direction:column;align-items:flex-start;text-align:right;gap:2px;margin-bottom:8px;width:100%;padding:12px 16px}
.btn.opt small{font-weight:500;color:var(--muted);font-size:12px;line-height:1.35}
.btn.primary.opt small{color:rgba(255,255,255,.88)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips>*{flex:0 0 auto}
.steps{display:flex;gap:4px;margin-top:8px}
.steps i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.steps i.done{background:var(--producing)}.steps i.now{background:var(--ember2);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.35}}
.empty{display:grid;place-items:center;text-align:center;padding:26px 16px;color:var(--muted)}
.empty img{width:min(280px,76%);margin-bottom:8px}

/* ---------- board (status filter, one list at a time) ---------- */
.seg{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px;margin:2px 0 12px}
.seg button{min-height:52px;padding:6px 2px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:center;min-width:0}
.seg button b{display:block;font-size:clamp(16px,5vw,20px);font-weight:800;line-height:1.1}
.seg button span{font-size:clamp(10px,2.9vw,12px);color:var(--muted);white-space:nowrap}
.seg button.on{background:var(--panel2);border-color:currentColor}

/* ---------- composer ---------- */
.composer{flex:none;padding:8px 12px calc(10px + var(--sb));background:linear-gradient(0deg,var(--ink) 70%,rgba(11,10,13,0))}
.kb .composer{padding-bottom:10px}
.comp-box{border-radius:24px;background:rgba(28,25,31,.95);border:1px solid var(--line);padding:6px 8px 8px;box-shadow:0 -10px 40px rgba(0,0,0,.35)}
.comp-box textarea{display:block;width:100%;resize:none;border:0;background:transparent;outline:none;padding:8px 10px;min-height:44px;max-height:120px;line-height:1.4}
.comp-row{display:flex;align-items:center;gap:8px;padding:0 4px}
.when{min-height:40px;padding:7px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:13px;font-weight:600}
.send{margin-inline-start:auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--ember2),var(--ember));font-size:20px;color:#fff;box-shadow:0 6px 20px rgba(255,106,61,.4)}
@media (max-height:480px){header.top{padding-bottom:4px}.stats{display:none}.tabs{margin-top:6px}.comp-box textarea{min-height:38px}}

/* ---------- sheet and dialog ---------- */
#sheet,#dialog{position:fixed;left:0;right:0;top:var(--vt);height:var(--vh);z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .2s;overflow:hidden;touch-action:none}
#dialog{z-index:70;align-items:center;padding:20px}
#sheet.open,#dialog.open{opacity:1;pointer-events:auto}
.sheet-in{width:min(100%,560px);max-height:calc(var(--vh) - 24px - var(--st));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  background:var(--ink2);border-radius:28px 28px 0 0;border-top:1px solid var(--line);padding:8px calc(18px + var(--sr)) calc(24px + var(--sb)) calc(18px + var(--sl));transform:translateY(40px);transition:transform .25s}
#sheet.open .sheet-in{transform:none}
.sheet-in.drag{transition:none}
.grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 14px;position:relative}
.grab::after{content:"";position:absolute;inset:-14px -40px}
.dlg{width:min(340px,100%);padding:22px;border-radius:24px;background:var(--ink2);border:1px solid var(--line);text-align:center;transform:scale(.96);transition:transform .2s}
#dialog.open .dlg{transform:none}
.dlg p{margin-bottom:18px;font-weight:600;line-height:1.5}
.dlg .row{gap:8px}
.sheet-in h2{font-size:20px;font-weight:800;margin-bottom:4px}
.sec{margin-top:18px}
.sec>label,.lbl{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.sheet-in video{display:block;width:100%;max-height:min(52vh,calc(var(--vh) * .5));border-radius:18px;background:#000;margin-top:10px;touch-action:manipulation}
.area{display:block;width:100%;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);outline:none;resize:none;min-height:90px;line-height:1.5}
.area:focus,.inp:focus{border-color:var(--ember2)}
.inp{display:block;width:100%;min-height:48px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);outline:none;max-width:100%}
input[type=datetime-local]{min-width:0;-webkit-appearance:none;appearance:none;text-align:right}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:0}
.errbox{padding:12px 14px;border-radius:14px;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4);color:#ffb3b3;margin-top:12px;font-size:14px;overflow-wrap:anywhere}
.logs{font-size:12px;color:var(--muted);max-height:180px;overflow:auto;direction:rtl;line-height:1.6;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.logs .e{color:#ff9a9a}.logs .w{color:var(--producing)}
details summary{cursor:pointer;color:var(--muted);font-weight:600;min-height:40px;display:flex;align-items:center}

/* ---------- settings ---------- */
.set-sec{padding:16px;border-radius:22px;background:var(--panel);border:1px solid var(--line);margin-bottom:14px}
.set-sec h3{font-size:17px;font-weight:800;margin-bottom:12px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.set-row:first-of-type{border-top:0}
.set-row>div{min-width:0}
.set-row small{display:block;color:var(--muted);font-size:12px;max-width:100%}
.sw{position:relative;flex:0 0 52px;height:30px;border-radius:15px;background:rgba(255,255,255,.14);transition:.2s}
.sw::before{content:"";position:absolute;inset:-9px -4px}
.sw::after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}
.sw.on{background:linear-gradient(135deg,var(--ember2),var(--ember))}
.sw.on::after{right:25px}
.num{width:84px;flex:none;min-height:44px;text-align:center;padding:9px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--line);outline:none}
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.look{border-radius:14px;overflow:hidden;border:2px solid transparent;background:var(--ink2);text-align:center;font-size:12px;padding-bottom:6px;min-width:0}
.look img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.look.sel{border-color:var(--ember2)}
.voice{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:11px 14px;border-radius:14px;border:1px solid var(--line);margin-bottom:6px;background:rgba(255,255,255,.04)}
.voice.sel{border-color:var(--ember2);background:rgba(255,106,61,.1)}
.ok{color:var(--published)}.no{color:var(--failed)}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 150px);transform:translateX(-50%);z-index:80;padding:12px 18px;border-radius:14px;background:#26222a;border:1px solid var(--line);font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,.5);max-width:calc(100% - 32px);text-align:center;pointer-events:none}