:root{
  --bg:#13171C; --panel:#1B2129; --panel-2:#222A34; --line:#2C3541;
  --text:#E7EBEF; --muted:#8E99A6; --accent:#4FA3E3; --accent-ink:#0E2A40;
  --safe:#3FB68B; --review:#E5B94E; --low:#E06C6C;
  --radius:10px; --font:'IBM Plex Sans',system-ui,sans-serif; --font-ar:'Noto Naskh Arabic','IBM Plex Sans',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--font)}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0 0 .5rem;font-weight:600;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.15rem} h3{font-size:.95rem;color:var(--muted);font-weight:500}
p{margin:.4rem 0}
.muted{color:var(--muted)} .small{font-size:.82rem} .hidden{display:none!important} .grow{flex:1}
[dir=auto]{unicode-bidi:plaintext}

/* top bar */
.topbar{display:flex;align-items:center;gap:1.5rem;padding:.7rem 1.4rem;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:600;color:var(--text);font-size:1.05rem}
.brand-mark{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,var(--accent),var(--safe));display:inline-block}
.topnav{display:flex;gap:1.1rem;align-items:center;margin-left:auto}
.topnav a{color:var(--muted);padding:.25rem 0;border-bottom:2px solid transparent}
.topnav a.on{color:var(--text);border-color:var(--accent)}
.topnav .who{color:var(--text);opacity:.8}
.page{max-width:1240px;margin:0 auto;padding:1.5rem 1.4rem 4rem}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.page-head.compact{align-items:center}
.head-meta{display:flex;gap:.8rem;align-items:center}
.back{color:var(--muted);font-size:.85rem}
#title[contenteditable]{outline:none;border-bottom:1px dashed transparent}
#title[contenteditable]:focus{border-color:var(--accent)}

/* forms */
label{display:block;margin:.6rem 0 .8rem;font-size:.9rem;color:var(--muted)}
label input,label select,input[type=text],.inline-form input,.inline-form select{display:block;width:100%;margin-top:.3rem;padding:.55rem .7rem;background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit}
label input[type=color]{height:38px;padding:.2rem}
label input[type=file]{padding:.4rem;background:transparent;border-style:dashed}
label.check{display:flex;align-items:center;gap:.5rem;color:var(--text)}
label.check input{width:auto;margin:0}
.inline-form{display:flex;gap:.5rem;align-items:center}
.inline-form input{width:260px;margin:0} .inline-form select{width:auto;margin:0}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .95rem;border-radius:7px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn-danger{color:var(--low)} .btn-danger:hover{border-color:var(--low)}
.btn-small{padding:.35rem .7rem;font-size:.83rem} .btn-tiny{padding:.2rem .55rem;font-size:.78rem}
.btn.disabled{opacity:.45;cursor:not-allowed}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link-btn{background:none;border:0;color:var(--low);cursor:pointer;font:inherit;font-size:.8rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem;align-items:center}
form.inline{display:inline}

/* cards & alerts */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.alert{padding:.7rem 1rem;border-radius:8px;margin:.8rem 0;border:1px solid}
.alert-bad{background:rgba(224,108,108,.12);border-color:var(--low)}
.alert-good{background:rgba(63,182,139,.12);border-color:var(--safe)}
.alert-warn{background:rgba(229,185,78,.12);border-color:var(--review)}
.empty{padding:2rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius)}
.pill{display:inline-block;padding:.05rem .5rem;border-radius:99px;font-size:.75rem;background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.pill-warn{color:var(--review);border-color:var(--review)}
pre.code{background:var(--bg);border:1px solid var(--line);padding:.7rem;border-radius:7px;font-size:.8rem;overflow:auto;white-space:pre-wrap;word-break:break-all}
ul.checks{list-style:none;padding:0;margin:0 0 1rem} ul.checks li{padding:.3rem 0 .3rem 1.4rem;position:relative}
ul.checks li::before{content:'';position:absolute;left:0;top:.65rem;width:9px;height:9px;border-radius:50%;background:var(--muted)}
ul.checks li.ok::before{background:var(--safe)} ul.checks li.bad::before{background:var(--low)}

/* auth */
.auth-page .page{display:flex;justify-content:center;padding-top:8vh}
.auth-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:2rem}
body.auth-page{display:flex;flex-direction:column;min-height:100vh}
body.auth-page>.auth-card{margin:8vh auto}

/* tables */
.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-weight:500;color:var(--muted);font-size:.82rem}
.row-link{color:var(--text);font-weight:500}
.status{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.78rem;border:1px solid var(--line);color:var(--muted)}
.status-ready{color:var(--safe);border-color:var(--safe)} .status-error{color:var(--low);border-color:var(--low)}
.status-processing,.status-queued,.status-uploading{color:var(--accent);border-color:var(--accent)}

/* badges */
.badge{display:inline-block;padding:.05rem .5rem;border-radius:5px;font-size:.74rem;font-weight:600;letter-spacing:.01em}
.badge-safe{background:rgba(63,182,139,.16);color:var(--safe)}
.badge-review{background:rgba(229,185,78,.16);color:var(--review)}
.badge-low{background:rgba(224,108,108,.16);color:var(--low)}

/* upload */
.upload-card{max-width:720px}
.dropzone{display:block;padding:3rem 1rem;text-align:center;border:2px dashed var(--line);border-radius:12px;color:var(--muted);cursor:pointer;margin-top:1rem}
.dropzone.over,.dropzone:hover{border-color:var(--accent);color:var(--text)}
.dropzone input{display:none}
.progress{position:relative;height:26px;background:var(--bg);border:1px solid var(--line);border-radius:99px;overflow:hidden;margin-top:1rem}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--safe));transition:width .3s}
.progress .bar.indeterminate{width:35%;animation:slide 1.4s infinite ease-in-out}
@keyframes slide{0%{margin-left:-35%}100%{margin-left:100%}}
.progress span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.processing{max-width:720px}
.up-stage{margin-top:1rem;font-weight:600}

/* editor */
.editor{display:grid;grid-template-columns:400px 1fr;gap:1.2rem;align-items:start}
.editor-left{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.9rem}
video{width:100%;background:#000;border-radius:var(--radius);border:1px solid var(--line)}
.now-playing{min-height:2.6rem;padding:.5rem .8rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;font-family:var(--font-ar);font-size:1.05rem;text-align:center}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem;flex-wrap:wrap}
.filters{display:flex;gap:.3rem;flex-wrap:wrap}
.filters button{background:var(--panel);border:1px solid var(--line);color:var(--muted);padding:.3rem .7rem;border-radius:99px;font:inherit;font-size:.82rem;cursor:pointer}
.filters button.on{color:var(--text);border-color:var(--accent);background:var(--panel-2)}
.segments{display:flex;flex-direction:column;gap:.5rem}
.seg{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:8px;padding:.6rem .8rem .5rem}
.seg.safe{border-left-color:var(--safe)} .seg.review{border-left-color:var(--review)} .seg.low{border-left-color:var(--low)}
.seg.active{background:var(--panel-2);box-shadow:0 0 0 1px var(--accent)}
.seg.rejected .seg-text{text-decoration:line-through;opacity:.5}
.seg.approved .approval-mark{color:var(--safe)} .seg.rejected .approval-mark{color:var(--low)}
.seg-head{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.8rem;margin-bottom:.35rem}
.time{background:var(--bg);border:1px solid var(--line);color:var(--accent);font:inherit;font-size:.78rem;padding:.1rem .5rem;border-radius:5px;cursor:pointer;font-variant-numeric:tabular-nums}
.time:hover{border-color:var(--accent)}
.conf{color:var(--muted);font-variant-numeric:tabular-nums}
.flag{padding:0 .4rem;border-radius:4px;background:rgba(79,163,227,.12);color:var(--accent);font-size:.72rem}
.approval-mark{font-size:.78rem}
.seg-text{font-family:var(--font-ar);font-size:1.12rem;line-height:1.9;padding:.25rem .4rem;border-radius:6px;outline:none;min-height:1.9em}
.seg-text:focus{background:var(--bg);box-shadow:0 0 0 1px var(--accent)}
.orig{padding:0 .4rem;font-family:var(--font-ar)}
.seg-actions{display:flex;gap:.4rem;margin-top:.3rem}
.suggestion{margin:.4rem 0;padding:.5rem .7rem;background:rgba(229,185,78,.08);border:1px solid rgba(229,185,78,.4);border-radius:7px}
.sug-head{font-size:.8rem;color:var(--review);font-weight:600}
.sug-text{font-family:var(--font-ar);font-size:1.05rem;line-height:1.8}
.qc-pass{color:var(--safe);font-weight:600;margin-bottom:.3rem} .qc-fail{color:var(--low);font-weight:600;margin-bottom:.3rem}
.qc-item{font-size:.85rem;padding:.2rem 0 .2rem 1rem;position:relative}
.qc-item::before{content:'';position:absolute;left:0;top:.6rem;width:7px;height:7px;border-radius:50%}
.qc-block::before{background:var(--low)} .qc-warn::before{background:var(--review)}
.versions .ver{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.versions .ver:last-child{border:0}

/* brand kits */
.kit{display:flex;gap:1rem;margin-bottom:.9rem;padding:.9rem}
.kit-swatch{width:64px;height:64px;border-radius:10px;flex:none;position:relative}
.kit-swatch span{position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:6px;border:2px solid rgba(0,0,0,.25)}
.kit-name{font-weight:600} .kit-logo{max-height:40px;max-width:160px;margin-top:.5rem;background:#fff;padding:4px;border-radius:5px}
.term-list{list-style:none;padding:0;margin:0} .term-list li{padding:.4rem 0;border-bottom:1px solid var(--line);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.term-text{font-family:var(--font-ar);font-size:1.05rem}

/* toasts */
#toasts{position:fixed;bottom:1.2rem;right:1.2rem;display:flex;flex-direction:column;gap:.5rem;z-index:99}
.toast{background:var(--panel-2);border:1px solid var(--line);padding:.55rem .9rem;border-radius:8px;opacity:0;transform:translateY(8px);transition:.25s;font-size:.9rem}
.toast.show{opacity:1;transform:none} .toast-bad{border-color:var(--low)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){
  .editor{grid-template-columns:1fr} .editor-left{position:static}
  .grid-2,.row-2{grid-template-columns:1fr}
  .topnav{gap:.7rem;font-size:.9rem} .page{padding:1rem}
  .inline-form{flex-wrap:wrap} .inline-form input{width:100%}
}