[hidden]{display:none !important}
:root{
  --bg:#f6f7fb; --card:#ffffff; --ink:#1e2235; --ink-soft:#5b6076;
  --accent:#4f46e5; --accent-2:#06b6d4; --accent-soft:#eef0ff;
  --danger:#e11d48; --line:#e6e8f2; --shadow:0 10px 30px rgba(30,34,53,.08);
  --radius:18px;
  --inset:#fbfbff; --stagebg:linear-gradient(160deg,#fbfcff,#f2f4fd); --overlaybg:rgba(255,255,255,.55);
}
[data-theme="dark"]{
  --bg:#0f1119; --card:#191c29; --ink:#e9ebf5; --ink-soft:#a3a9c2;
  --accent:#818cf8; --accent-soft:rgba(99,102,241,.18);
  --danger:#fb7185; --line:#2b3044; --shadow:0 10px 30px rgba(0,0,0,.45);
  --inset:#141726; --stagebg:linear-gradient(160deg,#151827,#101322); --overlaybg:rgba(15,17,25,.55);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:'Inter','Cairo',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  background-image:radial-gradient(60rem 30rem at 110% -10%, rgba(79,70,229,.08), transparent 60%),
                   radial-gradient(50rem 26rem at -10% 110%, rgba(6,182,212,.10), transparent 60%);
  min-height:100vh;
}
html[dir="rtl"] body{font-family:'Cairo','Inter',system-ui,sans-serif}
.app{max-width:880px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:18px;min-height:100vh}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.brand-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.top-actions{display:flex;align-items:center;gap:10px}
.tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--shadow)}
.tab{border:0;background:transparent;padding:8px 18px;border-radius:999px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit;font-size:.95rem}
.tab.active{background:var(--accent);color:#fff}
.badge{background:var(--accent-2);color:#fff;border-radius:999px;padding:1px 8px;font-size:.75rem;margin-inline-start:4px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 16px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit;box-shadow:var(--shadow)}
.chip:hover{color:var(--accent)}

.view{display:none;flex-direction:column;gap:16px}
.view.active{display:flex}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

.stage{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--stagebg)}
.preview{width:100%;height:100%;object-fit:contain;background:#0b0d1a}
.stage-idle{text-align:center;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px}
.pulse-ring{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-soft);position:relative}
.pulse-ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px dashed rgba(79,70,229,.35);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rec-indicator{position:absolute;top:14px;inset-inline-start:14px;display:flex;align-items:center;gap:8px;background:rgba(15,17,32,.78);color:#fff;border-radius:999px;padding:7px 14px;font-variant-numeric:tabular-nums;font-weight:600;backdrop-filter:blur(4px)}
.rec-dot{width:10px;height:10px;border-radius:50%;background:#ff3b5c;animation:blink 1.1s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.paused-tag{background:#f59e0b;color:#1a1305;border-radius:999px;padding:2px 10px;font-size:.8rem}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:6rem;font-weight:800;color:var(--accent);background:var(--overlaybg);backdrop-filter:blur(2px)}

.controls{padding:20px;display:flex;flex-direction:column;gap:18px}
.control-row{display:flex;gap:10px;flex-wrap:wrap}
.primary-row{justify-content:center}
.btn{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:14px;padding:13px 24px;font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;transition:transform .06s ease, box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#6366f1);color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.35)}
.btn-soft{background:var(--accent-soft);color:var(--accent)}
.btn-danger{background:#ffe4ea;color:var(--danger)}
[data-theme="dark"] .btn-danger{background:rgba(225,29,72,.16)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--ink-soft);font-size:.9rem}
.field select{border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:1rem;font-family:inherit;background:var(--inset);color:var(--ink)}
.field select:focus{outline:2px solid var(--accent);outline-offset:1px}

.toggles{display:flex;gap:18px;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;color:var(--ink-soft);font-size:.92rem}
.switch input{display:none}
.slider{width:42px;height:24px;border-radius:999px;background:#d7dae8;position:relative;transition:background .2s;flex:none}
.slider::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::after{transform:translateX(18px)}
html[dir="rtl"] .switch input:checked + .slider::after{transform:translateX(-18px)}

.hint{font-size:.85rem;color:var(--ink-soft);background:var(--inset);border:1px dashed var(--line);border-radius:12px;padding:10px 14px}
.hint.warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
[data-theme="dark"] .hint.warn{background:rgba(245,158,11,.12);border-color:#8a5a17;color:#fbbf24}

.empty{padding:34px;text-align:center;color:var(--ink-soft)}
.lib-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.lib-item{display:flex;align-items:center;gap:14px;padding:12px 14px}
.lib-thumb{width:120px;aspect-ratio:16/9;border-radius:12px;object-fit:cover;background:#0b0d1a;flex:none;cursor:pointer}
.lib-meta{flex:1;min-width:0}
.lib-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-sub{font-size:.82rem;color:var(--ink-soft);margin-top:3px}
.lib-actions{display:flex;gap:8px;flex:none}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--inset);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}
.icon-btn.danger:hover{color:var(--danger);border-color:var(--danger)}

.modal{position:fixed;inset:0;background:rgba(20,23,40,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50;backdrop-filter:blur(3px)}
.modal-body{max-width:760px;width:100%;padding:16px;display:flex;flex-direction:column;gap:12px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-body video{width:100%;border-radius:12px;background:#0b0d1a;max-height:60vh}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

.toast{position:fixed;bottom:22px;inset-inline:0;margin:0 auto;width:max-content;max-width:90vw;background:#161a2e;color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.3);z-index:60}
.foot{text-align:center;color:var(--ink-soft);font-size:.85rem;margin-top:auto;padding-top:8px}

@media (max-width:600px){
  .lib-item{flex-wrap:wrap}
  .lib-thumb{width:100%}
  .lib-actions{margin-inline-start:auto}
}