/* Reels studio admin panel — our own stylesheet (no framework, no template). One file: tokens, base, layout, then
   the panel's elements. The CSP allows no inline styles, so everything visual lives here. Main colour: owner, 2026-10-24. */
:root{--bg:#f4f6f9;--card:#fff;--line:#e6e9ee;--soft:#eff3f6;--text:#2f3a45;--body:#66727e;--muted:#8d9aa5;
  --accent:#06b6d4;--accent-d:#0891b2;--link:#0e7490;--ok:#16a88a;--err:#e5536a;--warn:#f0ad3c;--info:#3b82f6;--purple:#6a5ae0;
  --top-h:70px;--side-w:240px;--radius:.3rem;--shadow:0 0 32px 0 rgba(140,150,165,.14);--card-shadow:0 .75rem 6rem rgba(50,60,72,.035);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* --- base --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 .9rem/1.5 var(--font)}
h1,h2,h3,h4{margin:0 0 .5rem;color:var(--text);font-family:var(--font);font-weight:500;line-height:1.25}
h2{font-size:1.15rem;margin:26px 0 12px}h3{font-size:1rem;margin:14px 0 8px}h4{font-size:.95rem}
p{margin:0 0 1rem}ul,ol{margin:0 0 1rem}b,strong{font-weight:600}
a{color:var(--link);text-decoration:none}a:hover{color:var(--accent-d);text-decoration:underline}
img,svg{vertical-align:middle}
[hidden]{display:none!important}
summary{display:list-item}
.ic{width:1.15em;height:1.15em;flex:none}
@media(max-width:575.98px){.hide-xs{display:none}}

/* --- tables: every table in the panel, inside a scrollable wrapper --- */
.tablewrap{overflow-x:auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--card-shadow);margin:0 0 18px}
table{width:100%;border-collapse:collapse;font-size:.875rem;color:var(--body)}
th,td{padding:.75rem .85rem;text-align:left;vertical-align:middle;border-top:1px solid #edf0f3}
th{color:var(--text);font-weight:600;background:#f8f9fb;white-space:nowrap;border-top:0}
tr:hover>td{background:#fafbfc}

/* --- layout: top bar, left menu, page head, footer --- */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--top-h);z-index:1001;display:flex;align-items:center;background:var(--accent);box-shadow:var(--shadow)}
.topbar a:hover{text-decoration:none}
.topbar .brandbox{width:var(--side-w);height:100%;display:flex;align-items:center;justify-content:center;flex:none}
.topbar .logo{font:600 1.15rem/1 var(--font);color:#fff}.topbar .logo:hover{color:#fff}.topbar .logo-sm{display:none}
.topbar .menubtn{border:0;background:transparent;color:#fff;height:var(--top-h);width:60px;cursor:pointer;padding:0;box-shadow:none;display:flex;align-items:center;justify-content:center}
.topbar .menubtn:hover{background:transparent;color:#fff}.topbar .menubtn .ic{width:22px;height:22px}
.topbar .topbar-brand{font:500 1.05rem var(--font);color:#fff;padding-left:4px}
.topbar .topnav{margin:0 10px 0 auto;padding:0;list-style:none;display:flex;align-items:center;height:100%}
.topbar .topnav form.inline{margin:0}
.topbar .navlink{color:#fff;opacity:.9;padding:0 14px;display:flex;align-items:center;gap:6px;height:var(--top-h);background:none;border:0;box-shadow:none;font:inherit;cursor:pointer}
.topbar .navlink:hover{opacity:1;color:#fff;background:transparent}
.sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--side-w);padding-top:calc(var(--top-h) + 20px);background:var(--card);box-shadow:var(--shadow);z-index:90;overflow-y:auto}
.menu{margin:0;padding:0 0 30px;list-style:none}
.menu a{display:flex;align-items:center;gap:12px;color:#6b7489;padding:10px 22px;font-size:.92rem;transition:color .2s}
.menu a .ic{width:18px;height:18px}
.menu a:hover{color:var(--link);text-decoration:none}
.menu a.active{color:var(--link);background:rgba(6,182,212,.1);border-left:3px solid var(--accent);padding-left:19px}
.menu-title{padding:14px 22px 6px;letter-spacing:.05em;font-size:.6875rem;text-transform:uppercase;color:var(--text);font-weight:700}
.menu-title.sub{color:var(--muted);font-weight:600;padding-top:12px}
.page{margin-left:var(--side-w);padding:var(--top-h) 15px 65px;min-height:100vh;position:relative}
.content{padding:0 9px}
.pagehead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;padding:18px}
.pagehead .page-title{margin:0;font-size:1.25rem;line-height:1.4}
.crumbs{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-size:.85rem}
.crumbs li+li::before{content:"/";padding:0 .5rem;color:var(--muted)}.crumbs li:last-child{color:var(--muted)}
.footer{position:absolute;bottom:0;left:0;right:0;padding:19px 24px;color:var(--muted);border-top:1px solid var(--line);font-size:.85rem}
.backdrop{display:none}
@media(max-width:991.98px){
  .topbar .brandbox{width:64px}.topbar .logo-lg{display:none}.topbar .logo-sm{display:inline}
  .sidebar{transform:translateX(-100%);transition:transform .2s ease-out;z-index:1010;padding-top:16px}
  body.menu-open .sidebar{transform:none}
  body.menu-open .backdrop{display:block;position:fixed;inset:0;background:rgba(40,48,60,.45);z-index:1005}
  .page{margin-left:0;padding:var(--top-h) 6px 65px;overflow-x:hidden}.content{padding:0 4px}
}
@media(max-width:767.98px){.pagehead .crumbs{display:none}.pagehead{padding:14px 10px}}
main{max-width:1200px}

/* --- sign-in page --- */
body.auth{background:linear-gradient(135deg,var(--accent) 0%,var(--purple) 100%);min-height:100vh;display:flex;align-items:center}
.authwrap{width:100%;padding:40px 16px}
.auth-card{max-width:420px;margin:0 auto;background:var(--card);border-radius:var(--radius);box-shadow:0 .75rem 1.5rem rgba(18,38,63,.12);padding:32px}
.auth-logo{font:500 1.3rem var(--font);color:var(--text);text-align:center;margin-bottom:18px}
.auth-card .page-title{text-align:center;margin:0 0 18px;font-size:1.05rem;color:var(--muted)}
.auth-card form.narrow{max-width:none}.auth-card button{width:100%;padding:10px}

/* --- forms: plain elements, no classes needed --- */
form{margin:0 0 14px}form.inline{display:inline-block;margin:0 6px 6px 0}form.narrow{max-width:380px}
label{display:block;margin:0 0 14px;color:var(--text);font-size:.85rem;font-weight:600}
label.chk{display:inline-flex;gap:8px;align-items:center;margin:0 16px 10px 0;font-weight:400}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:.45rem .9rem;background:#fff;color:var(--body);border:1px solid #ced4da;
  border-radius:.2rem;font:inherit;font-weight:400;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:#b1bbc4;box-shadow:0 0 0 .15rem rgba(6,182,212,.15)}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;margin:0;accent-color:var(--accent)}
input[type=color]{height:40px;padding:2px;max-width:120px}input[type=file]{padding:.35rem}
textarea{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
small{display:block;margin-top:4px;color:var(--muted);font-weight:400}
fieldset{border:1px solid var(--line);border-radius:.25rem;margin:0 0 16px;padding:12px 16px}
legend{width:auto;color:var(--text);font-size:.85rem;font-weight:600;padding:0 6px;margin:0}
button,a.button{display:inline-block;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:.2rem;padding:.45rem .9rem;
  font:inherit;font-weight:500;cursor:pointer;text-decoration:none;box-shadow:0 2px 6px 0 rgba(6,182,212,.5);transition:all .15s}
button:hover,a.button:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
button:disabled{opacity:.6;cursor:default}
button.link{background:none;border:0;box-shadow:none;color:#6e768e;padding:0;font-weight:400}button.link:hover{background:none;color:var(--accent)}
form.secondary button,button.secondary,a.button.secondary{background:var(--soft);border-color:var(--soft);color:var(--text);box-shadow:none}
form.secondary button:hover,button.secondary:hover,a.button.secondary:hover{background:#e3eaef;border-color:#e3eaef;color:var(--text)}
td form.inline{margin:0 4px 4px 0}td button{padding:.28rem .7rem;font-size:.8rem}
.row{display:flex;flex-wrap:wrap;gap:8px;margin:0}.row button{margin-right:0}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;text-align:left;margin:6px 0}
label.check input{width:auto;flex:none;margin-top:4px}

/* --- code, messages --- */
section .table-responsive,.card pre{background:#f8f9fa;border:1px solid var(--line);border-radius:.25rem;padding:12px;overflow:auto;font-size:12.5px;white-space:pre-wrap;color:var(--text)}
pre.log{max-height:520px}
code{background:var(--soft);color:#e83e8c;padding:1px 5px;border-radius:3px}
.flash{border:0;border-radius:.25rem;padding:.75rem 1.25rem;margin:0 0 18px}
.flash.ok{background:rgba(22,168,138,.18);color:#0f7a65}.flash.err{background:rgba(229,83,106,.18);color:#bd2b42}
.muted{color:var(--muted)}
.keyset{color:var(--ok);font-weight:600}
input.has-key{border-color:var(--ok);background:rgba(22,168,138,.06)}input.has-key::placeholder{color:#0f7a65;opacity:.8}

/* --- cards and status --- */
section,.card{background:#fff;border:0;border-radius:.25rem;box-shadow:0 0.75rem 6rem rgba(56,65,74,.03);padding:1.5rem;margin:0 0 24px;display:block}
.card h2{margin:0;font-size:1.05rem}.card h3{font-size:.95rem;margin:16px 0 8px}.card>h3:first-child{margin-top:0}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.lead{font-size:1rem;font-weight:400;color:var(--text);max-width:760px}
.pill{display:inline-block;padding:.3em .7em;border-radius:50rem;background:var(--soft);color:var(--body);font-size:.75rem;font-weight:600;line-height:1.2}
.pill.on,.pill.ok{background:rgba(22,168,138,.18);color:#0f7a65}.pill.err{background:rgba(229,83,106,.18);color:#bd2b42}
.pill.todo{background:rgba(240,173,60,.2);color:#b0761b}.pill.off{background:var(--soft);color:var(--muted)}
.pill.info{background:rgba(59,130,246,.15);color:#2357a8}
.tag{display:inline-block;font-size:.72rem;padding:.2em .6em;border-radius:50rem;background:rgba(106,90,224,.12);color:var(--purple);margin:0 0 2px 4px;font-weight:600}
.note{padding:.75rem 1.1rem;border-radius:.25rem;margin:10px 0;font-size:.875rem}
.note.info{background:rgba(59,130,246,.12);color:#2357a8}.note.warn{background:rgba(240,173,60,.18);color:#9a6312}
.note code,ol.steps code{font-size:12.5px}
small.warn{color:#b0761b}
.lastcheck{font-size:.82rem;margin:4px 0 0}.lastcheck.ok{color:var(--ok)}.lastcheck.err{color:var(--err)}
details.guide{background:#fff;border:1px dashed #ced4da;border-radius:.25rem;padding:12px 16px;margin:0 0 18px}
details.guide summary,details.adv summary{cursor:pointer;font-weight:600;color:var(--link)}
details.guide h4{margin:14px 0 6px;font-size:.92rem}
details.adv{margin:12px 0 0}details.adv summary{color:var(--muted);font-weight:500}
details.more{margin-top:6px}details.more summary{cursor:pointer;color:var(--muted);font-size:.8rem}details.more form{margin:6px 0 0}details.more small{display:block}
ol.steps{margin:8px 0 12px;padding-left:22px}ol.steps li{margin:0 0 6px;line-height:1.5}
.listhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px}
section.empty{text-align:center;padding:32px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.actions .card{margin:0}

/* --- stat tiles --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:0 0 22px}
.stat{background:#fff;border-radius:.25rem;box-shadow:0 0.75rem 6rem rgba(56,65,74,.03);padding:18px 20px;border-left:3px solid var(--accent)}
.stat:nth-child(2){border-color:var(--purple)}.stat:nth-child(3){border-color:var(--warn)}.stat:nth-child(4){border-color:var(--info)}.stat:nth-child(5){border-color:var(--err)}
.stat b{display:block;font:500 1.6rem/1.2 "Roboto",sans-serif;color:var(--text)}.stat span{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}

/* --- setup checklist --- */
ul.setup{list-style:none;padding:0;margin:14px 0 20px;max-width:820px}
ul.setup li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:.25rem;margin:0 0 10px;background:#fff;box-shadow:0 0.75rem 6rem rgba(56,65,74,.03)}
ul.setup li div{flex:1}ul.setup .dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--soft)}
ul.setup li.ok .dot{background:rgba(22,168,138,.18);color:var(--ok)}ul.setup li.err .dot{background:rgba(229,83,106,.18);color:var(--err)}
ul.setup li.todo .dot{background:rgba(240,173,60,.2);color:#b0761b}ul.setup a.go{white-space:nowrap}
.codebox{display:inline-block;background:var(--soft);border:1px dashed var(--accent);border-radius:.25rem;padding:10px 16px;margin:4px 0 8px}
.codebox .code{font:700 22px ui-monospace,Menlo,monospace;color:var(--link);letter-spacing:.05em}

/* --- reels, materials, plan --- */
img.thumb,.thumb{width:54px;height:96px;object-fit:cover;border-radius:.25rem;background:var(--soft);display:flex;align-items:center;justify-content:center}
.plat{display:inline-block;font-size:.82rem;margin:0 0 3px;text-decoration:none}.plat.ok{color:var(--ok)}.plat.err{color:var(--err)}.plat.off{color:var(--muted)}
small.when{display:inline-block;margin-top:6px;white-space:nowrap;font-weight:600;color:var(--text)}
form.revise{margin:6px 0 0}form.revise textarea{min-width:220px;font:13px/1.4 inherit}form.revise button{margin-top:4px}
ol.hooks{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px;max-width:640px}
ol.hooks li{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#f8f9fa;border:1px solid var(--line);border-radius:.25rem;padding:10px 12px;font-size:.9rem;line-height:1.4;color:var(--text)}
ol.hooks li form{margin:0;flex:none}
ol.hooks li.chosen{border-color:var(--ok);background:rgba(22,168,138,.08)}ol.hooks li.dim{opacity:.45}
.topicrow{display:grid;grid-template-columns:24px 2fr 2fr 1fr 1fr 1fr auto;gap:8px;align-items:center;margin:0 0 8px}
.topicrow input,.topicrow select{margin:0}.topicrow label.inline{margin:0}.topicrow .num{color:var(--muted);text-align:right}
.topicrow label.chk{margin:0;font-size:.8rem}
@media(max-width:760px){.topicrow{grid-template-columns:1fr}.topicrow .num{text-align:left}}
.rubrow{display:grid;grid-template-columns:1fr 110px 36px;gap:8px;align-items:center;margin-bottom:8px}.rubrow input{margin:0}.rubrow .pct{display:flex;align-items:center;gap:6px;margin:0}.rubrow .del{font-size:18px;color:var(--muted)}fieldset.rubrics .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
ul.modules{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
ul.modules li{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:.25rem;padding:12px 14px}ul.modules li.off{opacity:.6;border-left-color:#ced4da}
article.report{color:var(--body)}article.report h2,article.report h3,article.report h4{margin:16px 0 6px}article.report li{margin:3px 0}

/* --- previews (Uslub, logo) --- */
.preview{position:relative;width:270px;height:480px;background:#000 linear-gradient(160deg,#222,#000);border-radius:10px;overflow:hidden;margin:6px 0 20px}
.preview .cap{position:absolute;bottom:130px;left:10px;right:10px;text-align:center;font-weight:700;font-size:16px;color:#fff;text-shadow:0 2px 0 #000}
.preview .big{position:absolute;top:90px;left:0;right:0;text-align:center;font:700 54px/1 Impact,"Bebas Neue",sans-serif}
.preview .sub{position:absolute;top:152px;left:0;right:0;text-align:center;font:700 10px sans-serif;letter-spacing:.3em}
.preview .brandname{position:absolute;top:30px;left:0;right:0;text-align:center;font:700 9px sans-serif;letter-spacing:.32em}
.logoprev{position:relative;width:216px;height:384px;border-radius:12px;margin:10px 0 14px;background:linear-gradient(160deg,#30475e,#1b2430)}.logoprev img{position:absolute;max-width:none}.logoprev[data-pos=tr] img{top:5%;right:4.5%}.logoprev[data-pos=tl] img{top:5%;left:4.5%}.logoprev[data-pos=br] img{bottom:13%;right:4.5%}.logoprev[data-pos=bl] img{bottom:13%;left:4.5%}

/* --- modals: a native <dialog> --- */
dialog.modal{display:none;position:fixed;inset:0;margin:auto;width:min(680px,94vw);height:fit-content;max-height:90vh;overflow:auto;
  background:#fff;color:var(--body);border:0;border-radius:.3rem;padding:0;box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}
dialog.modal[open]{display:block}
dialog.modal::backdrop{background:rgba(50,58,70,.55)}
dialog.modal form{margin:0;padding:0 24px 20px}
.modalhead{display:flex;justify-content:space-between;align-items:center;margin:0 -24px 18px;padding:16px 24px;background:var(--soft);border-bottom:1px solid var(--line)}
.modalhead h2{margin:0;font-size:1.05rem}
.modalfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
button.close{background:none;border:0;box-shadow:none;padding:0 4px;font-size:1.4rem;line-height:1;color:var(--muted)}button.close:hover{background:none;color:var(--text)}

/* --- uploads --- */
progress.progress{display:block;width:100%;max-width:520px;height:8px;border:0;border-radius:99px;overflow:hidden;background:var(--soft);appearance:none;-webkit-appearance:none}
progress.progress::-webkit-progress-bar{background:var(--soft);border-radius:99px}
progress.progress::-webkit-progress-value{background:var(--ok);border-radius:99px}
progress.progress::-moz-progress-bar{background:var(--ok);border-radius:99px}
progress[hidden]{display:none}

/* --- Mijozlar: "set the password" opens like a button --- */
details.pw summary{display:inline-block;list-style:none;color:var(--text);background:var(--soft);border-radius:.2rem;padding:.28rem .7rem;font-size:.8rem;font-weight:500;cursor:pointer}
details.pw summary::-webkit-details-marker{display:none}details.pw[open] summary{background:var(--accent);color:#fff}
details.pw form{display:grid;gap:6px;min-width:220px}