.std{--b:#2563EB;--ink:#0F172A;--mut:#64748B;--line:#E8EDF3;--bg:#F7F9FC;--vid:#DC2626;--book:#7C3AED;--grn:#10B981;display:flex;flex-direction:column;gap:18px;color:var(--ink)}
.std *{box-sizing:border-box}
.std-hero{border-radius:18px;padding:22px 24px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.std-hero.vid{background:linear-gradient(120deg,#DC2626,#F97316)}
.std-hero.book{background:linear-gradient(120deg,#7C3AED,#6366F1)}
.std-hero h1{font-size:21px;font-weight:800;margin:0}
.std-hero p{font-size:12.5px;opacity:.92;margin:5px 0 0}
.std-hero-stats{display:flex;gap:11px}
.std-hero-stat{background:rgba(255,255,255,.18);border-radius:13px;padding:11px 17px;text-align:center;min-width:74px}
.std-hero-stat b{font-size:21px;font-weight:800;font-family:'Tajawal';display:block;line-height:1}
.std-hero-stat span{font-size:10.5px;opacity:.9}
.std-tabs{display:flex;gap:4px;background:#EEF2F7;border-radius:11px;padding:4px;width:fit-content;flex-wrap:wrap}
.std-tab{padding:8px 15px;border:none;background:transparent;border-radius:8px;font-family:'Cairo';font-size:12.5px;font-weight:700;color:var(--mut);cursor:pointer}
.std-tab.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.std-tab.on.vid{color:var(--vid)}.std-tab.on.book{color:var(--book)}
.std-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.std-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;font-family:'Cairo';font-size:12.5px;font-weight:700;border:none;cursor:pointer}
.std-btn-v{background:var(--vid);color:#fff}.std-btn-v:hover{background:#B91C1C}
.std-btn-bk{background:var(--book);color:#fff}.std-btn-bk:hover{background:#6D28D9}
.std-btn-o{background:#fff;color:var(--ink);border:1.5px solid var(--line)}.std-btn-o:hover{border-color:var(--b);color:var(--b)}
/* content grid */
.std-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1100px){.std-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.std-grid{grid-template-columns:1fr}}
.std-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.std-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(0,0,0,.25)}
.std-card-thumb{height:120px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.std-card-thumb .ic{font-size:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));z-index:1}
.std-card-thumb .play{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--vid);z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.std-card-status{position:absolute;top:10px;right:10px;font-size:9.5px;font-weight:800;padding:4px 10px;border-radius:20px;z-index:3}
.std-card-status.published{background:rgba(255,255,255,.95);color:#059669}
.std-card-status.draft{background:rgba(255,255,255,.95);color:#92400E}
.std-card-dur{position:absolute;bottom:10px;left:10px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:6px;z-index:3}
.std-card-b{padding:14px 15px;flex:1;display:flex;flex-direction:column}
.std-card-name{font-size:14.5px;font-weight:800;line-height:1.4}
.std-card-meta{font-size:11px;color:var(--mut);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}
.std-card-meta b{font-family:'Tajawal'}
.std-card-foot{display:flex;gap:7px;padding:11px 15px;border-top:1px solid #F1F5F9;background:#FAFCFE}
.std-mini{flex:1;padding:8px;border-radius:8px;font-size:11.5px;font-weight:700;border:1px solid var(--line);background:#fff;color:#475569;cursor:pointer}
.std-mini:hover{border-color:var(--b);color:var(--b)}
.std-mini.primary{color:#fff;border:none}
.std-mini.danger{color:#DC2626;border-color:#FECACA}.std-mini.danger:hover{background:#DC2626;color:#fff}
/* editor */
.std-editor{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.std-back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--b);cursor:pointer;margin-bottom:14px}
.std-field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.std-field label{font-size:11.5px;font-weight:700;color:var(--mut)}
.std-field input,.std-field select,.std-field textarea{padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:'Cairo';font-size:12.5px;outline:none;width:100%}
.std-field input:focus,.std-field textarea:focus,.std-field select:focus{border-color:var(--b)}
.std-field-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.std-field-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.std-drop{border:2px dashed #CBD5E1;border-radius:13px;padding:28px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.std-drop:hover{border-color:var(--b);background:#F8FAFF}
.std-drop .ic{font-size:34px;margin-bottom:8px}
.std-drop .t{font-size:13px;font-weight:700}
.std-drop .s{font-size:11px;color:var(--mut);margin-top:3px}
/* video timeline + checkpoints */
.std-timeline{position:relative;height:46px;background:#0F172A;border-radius:11px;margin:16px 0;overflow:hidden}
.std-timeline-fill{position:absolute;inset:0;background:linear-gradient(90deg,#DC2626,#F97316);width:100%;opacity:.18}
.std-cp{position:absolute;top:0;bottom:0;width:3px;background:#F59E0B;cursor:pointer}
.std-cp:after{content:'❓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px}
.std-cp-marker{position:absolute;top:-2px;width:22px;height:22px;background:#F59E0B;border-radius:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;border:2px solid #fff}
.std-cp-list{margin-top:6px}
.std-cp-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:#fff}
.std-cp-time{font-family:'Tajawal';font-weight:800;font-size:13px;color:var(--vid);background:#FEF2F2;border-radius:8px;padding:6px 10px;flex-shrink:0}
.std-cp-c{flex:1}.std-cp-q{font-size:12.5px;font-weight:700}.std-cp-a{font-size:11px;color:var(--mut);margin-top:2px}
/* book chapters */
.std-chapter{border:1px solid var(--line);border-radius:13px;margin-bottom:11px;overflow:hidden}
.std-chapter-h{display:flex;align-items:center;gap:11px;padding:13px 15px;background:#FAFAFE;cursor:pointer}
.std-chapter-n{width:28px;height:28px;border-radius:8px;background:#F5F3FF;color:#7C3AED;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.std-chapter-t{flex:1;font-size:13.5px;font-weight:800}
.std-chapter-meta{font-size:11px;color:var(--mut)}
.std-page{display:flex;align-items:center;gap:10px;padding:10px 15px 10px 50px;border-top:1px solid #F4F4F8;font-size:12.5px}
.std-page-ic{font-size:14px}
.std-page-t{flex:1}
/* preview player */
.std-player{background:#0F172A;border-radius:14px;overflow:hidden}
.std-player-screen{aspect-ratio:16/9;background:linear-gradient(135deg,#1E293B,#0F172A);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;position:relative}
.std-player-screen .big{font-size:54px;margin-bottom:10px;opacity:.85}
.std-player-q{position:absolute;inset:0;background:rgba(15,23,42,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}
.std-player-q .qt{font-size:17px;font-weight:800;color:#fff;margin-bottom:18px}
.std-player-opt{display:block;width:100%;max-width:380px;padding:13px;margin-bottom:9px;border-radius:10px;border:1.5px solid #334155;background:#1E293B;color:#E2E8F0;font-family:'Cairo';font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.std-player-opt:hover{border-color:#DC2626;background:#7F1D1D}
.std-player-bar{height:46px;background:#1E293B;display:flex;align-items:center;gap:12px;padding:0 15px;color:#fff}
.std-player-play{width:30px;height:30px;border-radius:50%;background:#DC2626;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px}
.std-player-track{flex:1;height:6px;background:#334155;border-radius:4px;position:relative;overflow:hidden}
.std-player-track i{position:absolute;inset:0 auto 0 0;background:#DC2626;border-radius:4px}
.std-player-track .cp{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;background:#F59E0B;border-radius:50%;border:2px solid #1E293B}
.std-player-time{font-size:11px;font-family:'Tajawal'}
/* reader */
.std-reader{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.std-reader-page{padding:30px;min-height:300px;font-size:14px;line-height:2;color:#334155}
.std-reader-nav{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--line);background:#FAFAFE}
.std-reader-btn{padding:8px 16px;border-radius:9px;border:1px solid var(--line);background:#fff;font-family:'Cairo';font-weight:700;font-size:12px;cursor:pointer}
.std-reader-btn.primary{background:var(--book);color:#fff;border:none}
/* report table */
.std-tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.std-tbl th{background:#F4F7FB;padding:11px;text-align:right;font-weight:800;color:#475569;font-size:11.5px}
.std-tbl td{padding:10px 11px;border-top:1px solid #F1F5F9}
.std-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.std-stat-grid{grid-template-columns:repeat(2,1fr)}}
.std-stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px;position:relative}
.std-stat-ic{position:absolute;left:13px;top:13px;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px}
.std-stat-v{font-size:23px;font-weight:800;font-family:'Tajawal';line-height:1}
.std-stat-l{font-size:11px;color:var(--mut);font-weight:600;margin-top:5px}
.std-empty{text-align:center;padding:55px 20px;color:#94A3B8}
.std-empty .ic{font-size:46px;margin-bottom:12px}
.std-empty .t{font-size:15px;font-weight:800;color:#475569;margin-bottom:5px}
.std-empty .s{font-size:12px}