@font-face{font-family:Efrst;src:url(../fonts/efrst-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Efrst;src:url(../fonts/efrst-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Efrst;src:url(../fonts/efrst-extrabold.woff2) format("woff2");font-weight:800;font-display:swap}

/* 3. بنفسجي ليلي + ليموني — base = purple, accent (lime) only on the one main action per screen */
:root{
  --bg:#F5F3FA;--surface:#FFFFFF;--ink:#1E1537;--muted:#5E5674;--line:#E2DDEE;
  --base:#2D1B5E;--onbase:#F5F3FA;--accent:#C6F04A;--onaccent:#1E1537;--soft:#ECE7F7;
  --ok:#1F7A4D;--oksoft:#E3F4EA;--warn:#8A5A00;--warnsoft:#FBF0D9;--bad:#B3261E;--badsoft:#FBE4E2;
  --shadow:0 1px 2px rgba(30,21,55,.06),0 8px 24px rgba(30,21,55,.06);
  --r:16px;--r-sm:12px;
  --fs-xs:13px;--fs-s:15px;--fs-m:16px;--fs-l:20px;--fs-xl:25px;--fs-2xl:31px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#100B1F;--surface:#1A1330;--ink:#F0EDF8;--muted:#A79FBF;--line:#2C2347;
  --base:#2D1B5E;--onbase:#F0EDF8;--accent:#C6F04A;--onaccent:#1E1537;--soft:#221940;
  --ok:#6FD39C;--oksoft:#15301F;--warn:#F2C25B;--warnsoft:#33270C;--bad:#FF8A80;--badsoft:#3A1716;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:Efrst,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:var(--fs-m);line-height:1.6;min-height:100dvh}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
[data-i]{display:inline-grid;place-items:center;flex:none}
[data-i]>svg{width:20px;height:20px}
a{color:inherit;text-decoration:none}
.ltr{direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:720px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:16px}
.top{display:flex;align-items:center;gap:8px;min-height:48px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:var(--fs-l)}
.mark{width:40px;height:40px;border-radius:12px;background:var(--base);color:var(--accent);display:grid;place-items:center;flex:none}
.mark svg{width:22px;height:22px}
.top .spacer{flex:1}

.hero{background:var(--base);color:var(--onbase);border-radius:24px;padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.hero h1{font-size:var(--fs-2xl);line-height:1.25;font-weight:800}
.hero h1 em{font-style:normal;background:var(--accent);color:var(--onaccent);padding:0 8px;border-radius:8px}
.hero p{opacity:.85;font-size:var(--fs-s)}

.h2{font-weight:800;font-size:var(--fs-l);display:flex;align-items:center;gap:8px}
.h2 .count{font-size:var(--fs-xs);font-weight:700;background:var(--soft);color:var(--muted);border-radius:99px;padding:2px 10px}
.muted{color:var(--muted)}
.small{font-size:var(--fs-xs)}

/* fields & buttons */
.field{width:100%;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);min-height:56px;padding:0 16px;font-size:var(--fs-m);transition:border-color .15s}
.field:focus{outline:none;border-color:var(--base)}
@media (prefers-color-scheme:dark){.field:focus{border-color:var(--muted)}}
.field.code{text-align:center;font-size:var(--fs-l);letter-spacing:3px;font-weight:700;direction:ltr;text-transform:uppercase}
.field.code::placeholder{letter-spacing:3px;color:var(--muted);opacity:.6}
.field.bad{border-color:var(--bad)}
.label{font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin-bottom:4px;display:block}

.btn{min-height:48px;border-radius:var(--r);padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:var(--fs-m);transition:transform .15s,opacity .15s,background .15s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn svg{width:20px;height:20px;flex:none}
.btn.main{background:var(--accent);color:var(--onaccent);min-height:56px;font-size:var(--fs-l)}
.btn.base{background:var(--base);color:var(--onbase)}
.btn.soft{background:var(--soft);color:var(--ink)}
.btn.ghost{color:var(--muted)}
.btn.ghost:hover{background:var(--soft);color:var(--ink)}
.btn.yes{background:var(--ok);color:#fff}
@media (prefers-color-scheme:dark){.btn.yes{color:#0B2416}}
.btn.block{width:100%}
.icon-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted);flex:none;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--soft);color:var(--ink)}
.icon-btn svg{width:20px;height:20px}
.icon-btn.danger:hover{background:var(--badsoft);color:var(--bad)}
.icon-btn[disabled]{opacity:.35;pointer-events:none}

.spin{width:20px;height:20px;border-radius:50%;border:3px solid currentColor;border-inline-end-color:transparent;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

.lock{font-size:var(--fs-xs);color:var(--muted);display:flex;gap:6px;align-items:center;justify-content:center;text-align:center}
.lock svg{width:14px;height:14px;flex:none}

.msg{border-radius:var(--r-sm);padding:12px 16px;font-size:var(--fs-s);font-weight:700;display:flex;gap:8px;align-items:flex-start}
.msg svg{width:20px;height:20px;flex:none;margin-top:2px}
.msg.bad{background:var(--badsoft);color:var(--bad)}
.msg.ok{background:var(--oksoft);color:var(--ok)}
.msg.warn{background:var(--warnsoft);color:var(--warn)}

/* cards & lists */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.list{display:flex;flex-direction:column;gap:8px}
.row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;gap:12px;align-items:center;min-height:72px;text-align:start;width:100%}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:700;font-size:var(--fs-s);line-height:1.4;overflow-wrap:anywhere}
.row .m{color:var(--muted);font-size:var(--fs-xs);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button.row{transition:border-color .15s,transform .15s}
button.row:hover{border-color:var(--muted)}
button.row:active{transform:scale(.99)}
.thumb{width:96px;aspect-ratio:16/9;border-radius:10px;background:var(--soft);display:grid;place-items:center;flex:none;overflow:hidden;position:relative;color:var(--muted)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb svg{width:20px;height:20px}
.thumb .play{position:absolute;inset:auto auto 6px 6px;width:24px;height:24px;border-radius:50%;background:rgba(16,11,31,.7);color:#fff;display:grid;place-items:center}
.thumb .play svg{width:12px;height:12px}
.bar{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--base);border-radius:99px;transition:width .3s}
@media (prefers-color-scheme:dark){.bar>i{background:var(--accent)}}
.thumb .bar{position:absolute;inset:auto 0 0 0;border-radius:0;background:rgba(255,255,255,.35)}
.thumb .bar>i{background:var(--accent)}

.tag{font-size:var(--fs-xs);font-weight:700;background:var(--soft);color:var(--ink);padding:2px 10px;border-radius:99px;white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:4px}
.tag.ok{background:var(--oksoft);color:var(--ok)}
.tag.warn{background:var(--warnsoft);color:var(--warn)}
.tag.bad{background:var(--badsoft);color:var(--bad)}
.tag.base{background:var(--base);color:var(--onbase)}

.empty{text-align:center;padding:40px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted)}
.empty .ill{width:72px;height:72px;border-radius:24px;background:var(--soft);display:grid;place-items:center;color:var(--base);margin-bottom:8px}
@media (prefers-color-scheme:dark){.empty .ill{color:var(--accent)}}
.empty .ill svg{width:36px;height:36px}
.empty b{color:var(--ink);font-size:var(--fs-l)}

.skel{background:linear-gradient(90deg,var(--soft) 0%,var(--line) 50%,var(--soft) 100%);background-size:200% 100%;animation:skel 1.4s ease-in-out infinite;border-radius:var(--r)}
@keyframes skel{to{background-position:-200% 0}}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:end center;background:rgba(16,11,31,.55);padding:16px;animation:fade .2s ease-out}
.modal .sheet{background:var(--surface);color:var(--ink);border-radius:24px;width:100%;max-width:440px;padding:24px 20px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 64px rgba(0,0,0,.35);animation:rise .22s ease-out;max-height:calc(100dvh - 32px);overflow:auto}
.modal.wide .sheet{max-width:900px;padding:16px}
.modal h3{font-size:var(--fs-l);font-weight:800;line-height:1.4}
.modal .acts{display:flex;gap:8px;margin-top:8px}
.modal .acts .btn{flex:1}
@media (min-width:600px){.modal{place-items:center}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(16px);opacity:0}}

.toast{position:fixed;inset:auto 16px 24px;margin:0 auto;max-width:400px;z-index:60;background:var(--ink);color:var(--bg);border-radius:var(--r-sm);padding:12px 16px;font-weight:700;font-size:var(--fs-s);text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.25);animation:rise .2s ease-out}

/* ---------- secure player ---------- */
.player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player .wm{position:absolute;z-index:2;pointer-events:none;color:#fff;opacity:.38;font-weight:700;font-size:clamp(11px,2.4vw,16px);text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap;transition:opacity .6s;direction:rtl;unicode-bidi:isolate}
.player .center{position:absolute;inset:0 0 64px 0;z-index:5;display:grid;place-items:center;pointer-events:none}
.player .bigplay{pointer-events:auto;width:clamp(52px,14vw,72px);height:clamp(52px,14vw,72px);border-radius:50%;background:var(--accent);color:var(--onaccent);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .15s,opacity .2s}
.player .bigplay:active{transform:scale(.94)}
.player .bigplay svg{width:45%;height:45%}
.player .loading{width:48px;height:48px;border-width:4px;color:#fff}
.player .note{pointer-events:auto;background:rgba(16,11,31,.88);color:#fff;border-radius:var(--r);padding:16px 20px;max-width:min(360px,86%);text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;font-size:var(--fs-s);font-weight:700}
.player .skip{position:absolute;top:0;bottom:64px;width:30%;z-index:2}
.player .skip.back{left:0}.player .skip.fwd{right:0}
.player .flash{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,.5);color:#fff;border-radius:99px;padding:8px 14px;font-weight:800;font-size:var(--fs-s);pointer-events:none;animation:fade .15s}
.player .ctrl{position:absolute;inset:auto 0 0 0;z-index:4;direction:ltr;padding:16px 4px 2px;background:linear-gradient(transparent,rgba(0,0,0,.75));display:flex;flex-direction:column;gap:0;transition:opacity .25s}
.player.idle .ctrl,.player.idle .bigplay{opacity:0;pointer-events:none}
.player.idle{cursor:none}
.player .seek{width:100%;height:24px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;padding:0 8px}
.player .seek::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,var(--accent) var(--p,0%),rgba(255,255,255,.55) var(--p,0%),rgba(255,255,255,.55) var(--b,0%),rgba(255,255,255,.25) var(--b,0%))}
.player .seek::-moz-range-track{height:4px;border-radius:99px;background:linear-gradient(to right,var(--accent) var(--p,0%),rgba(255,255,255,.55) var(--p,0%),rgba(255,255,255,.55) var(--b,0%),rgba(255,255,255,.25) var(--b,0%))}
.player .seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);margin-top:-6px;border:0}
.player .seek::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:0}
.player .bar2{display:flex;align-items:center;gap:0;color:#fff}
.player .bar2 .icon-btn{color:#fff}
.player .bar2 .icon-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.player .time{font-size:var(--fs-xs);font-weight:700;padding:0 8px;white-space:nowrap}
.player .bar2 .grow{flex:1}
.player .speed{min-width:52px;height:44px;border-radius:12px;font-weight:800;font-size:var(--fs-xs);color:#fff}
.player .speed:hover{background:rgba(255,255,255,.15)}
.player:fullscreen,.player.pseudo-fs{border-radius:0;aspect-ratio:auto;width:100vw;height:100dvh}
.player.pseudo-fs{position:fixed;inset:0;z-index:100}
.player:fullscreen .wm{font-size:clamp(14px,2vw,22px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}