/* ============================================================
   Video Tutorials — SamGenie EduShelf
   ============================================================ */
.video-tutorial-hero {
  background:
    radial-gradient(360px 210px at 92% -30%, rgba(223,173,76,.28), transparent 64%),
    radial-gradient(350px 220px at -8% 110%, rgba(139,47,196,.24), transparent 62%),
    var(--grad-hero);
  color:#fff;border-radius:22px;padding:24px;display:flex;gap:20px;align-items:flex-start;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 22px 50px -20px rgba(60,14,88,.5);margin-bottom:16px;
}
.video-tutorial-hero:after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-50px;top:-84px;background:rgba(223,173,76,.16);border:1px solid rgba(255,255,255,.13)}
.video-tutorial-hero > div{position:relative;z-index:1}
.video-eyebrow{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:900;color:var(--gold);margin-bottom:7px}
.video-tutorial-hero h1{font-family:Fraunces,Georgia,serif;font-size:clamp(27px,3vw,38px);line-height:1.02;color:#fff;margin:0 0 8px;letter-spacing:-.035em}
.video-tutorial-hero p{max-width:620px;color:rgba(255,255,255,.82);font-size:13px;line-height:1.55;margin:0}
.video-sync-status{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);padding:9px 12px;white-space:nowrap;font-size:11px;font-weight:800;color:#fff}
.video-sync-status.loading{color:#ffe9aa}.video-sync-status.offline{color:#ffe9aa;background:rgba(112,70,0,.28)}.video-sync-status.error{color:#ffd2d2;background:rgba(150,26,38,.3)}
.video-status-dot{width:8px;height:8px;border-radius:50%;background:#40d29e;box-shadow:0 0 0 3px rgba(64,210,158,.2);flex:none}.video-sync-status.loading .video-status-dot{background:#f5c95c;box-shadow:0 0 0 3px rgba(245,201,92,.2);animation:videoPulse 1s infinite}.video-sync-status.offline .video-status-dot{background:#f4bd52;box-shadow:0 0 0 3px rgba(244,189,82,.2)}.video-sync-status.error .video-status-dot{background:#ff8686;box-shadow:0 0 0 3px rgba(255,134,134,.2)}
@keyframes videoPulse{50%{opacity:.38;transform:scale(.78)}}
.video-search-box{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:7px 8px 7px 15px;box-shadow:var(--shadow-soft);margin-bottom:11px}.video-search-icon{width:20px;color:var(--muted);font-size:20px;text-align:center;line-height:1}.video-search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:14px}.video-search-box input::placeholder{color:#9b8da5}.video-search-box button{display:none;border:0;background:#f4edf8;color:var(--purple);font-size:12px;font-weight:900;border-radius:8px;padding:8px 10px;cursor:pointer}.video-search-box:focus-within{border-color:var(--violet-mid);box-shadow:0 0 0 4px rgba(102,24,138,.1)}
.video-tutorial-controls{background:rgba(255,255,255,.66);border:1px solid rgba(102,24,138,.1);border-radius:16px;padding:10px;margin-bottom:21px}.video-category-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.video-category-tabs::-webkit-scrollbar{display:none}.video-category-tab{border:1.5px solid var(--border);background:#fff;color:var(--muted);border-radius:999px;padding:9px 13px;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;transition:.15s}.video-category-tab:hover{border-color:var(--violet-mid);color:var(--purple)}.video-category-tab.active{background:var(--grad-primary);color:#fff;border-color:transparent;box-shadow:0 8px 17px -9px rgba(102,24,138,.65)}
.video-filter-row{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}.video-select{border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:9px;padding:8px 10px;font-size:11px;font-weight:700;min-width:145px;outline:0}.video-select:focus{border-color:var(--violet-mid)}
.video-section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 11px}.video-section-heading h2{font-family:Fraunces,Georgia,serif;font-size:21px;letter-spacing:-.03em;margin:0}.video-section-heading span{font-size:11px;color:var(--purple);font-weight:800}.video-section{margin-bottom:24px}
.video-featured-card{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-soft);margin-bottom:24px;cursor:pointer;transition:.16s}.video-featured-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-app)}.video-featured-media,.video-card-media{position:relative;overflow:hidden;background:linear-gradient(135deg,#3c0e58,#8b2fc4 58%,#dfad4c)}.video-featured-media{min-height:205px}.video-featured-media img,.video-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}.video-featured-media:after,.video-card-media:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(22,5,36,.16),rgba(22,5,36,.03) 60%,rgba(22,5,36,.22))}.video-featured-fallback,.video-card-fallback{position:absolute;inset:0;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(135deg,#3c0e58,#8b2fc4 58%,#dfad4c)}.video-featured-fallback{z-index:0}.video-card-fallback{z-index:0;padding:13px}.video-featured-fallback span,.video-card-fallback span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#ffe8a7;margin-bottom:6px}.video-featured-fallback strong{font-family:Fraunces,Georgia,serif;font-size:25px;line-height:1.05;max-width:290px}.video-card-fallback b{font-family:Fraunces,Georgia,serif;font-size:16px;line-height:1.06;max-width:190px}.video-card-play,.video-featured-play{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--purple);padding-left:3px;box-shadow:0 9px 24px rgba(22,5,36,.3)}.video-featured-play{width:58px;height:58px;font-size:20px}.video-card-play{width:42px;height:42px;font-size:15px}.video-card-category{position:absolute;z-index:4;top:10px;left:10px;background:rgba(22,5,36,.6);border:1px solid rgba(255,255,255,.22);color:#fff;padding:5px 7px;border-radius:6px;font-size:9px;font-weight:800;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-featured-copy{padding:24px;display:flex;flex-direction:column;align-items:flex-start}.video-featured-copy h3{font-family:Fraunces,Georgia,serif;font-size:23px;line-height:1.1;margin:11px 0 8px;letter-spacing:-.035em}.video-featured-copy p{font-size:12px;color:var(--muted);line-height:1.55;margin:0 0 15px;max-width:440px}.video-featured-copy .btn{margin-top:16px}.video-card-meta{display:flex;gap:6px;flex-wrap:wrap}.video-card-meta span{border:1px solid #eee7f2;background:#fbf9fc;color:var(--muted);border-radius:6px;padding:5px 7px;font-size:9px;font-weight:750}.video-tutorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.video-tutorial-card{background:#fff;border:1px solid var(--border);border-radius:15px;overflow:hidden;box-shadow:0 7px 18px -12px rgba(60,14,88,.35);cursor:pointer;transition:.16s;min-width:0}.video-tutorial-card:hover,.video-tutorial-card:focus{transform:translateY(-3px);border-color:rgba(102,24,138,.42);box-shadow:var(--shadow-app);outline:0}.video-card-media{height:135px}.video-card-body{padding:13px 14px 14px}.video-card-body h3{font-size:14px;line-height:1.24;margin:0 0 6px;letter-spacing:-.01em}.video-card-body p{font-size:11px;color:var(--muted);line-height:1.45;min-height:31px;margin:0 0 10px}.video-card-foot{border-top:1px solid #f0ebf3;padding-top:9px;display:flex;justify-content:space-between;align-items:center;color:#9a8da4;font-size:10px;font-weight:750}.video-card-foot b{color:var(--purple);font-size:15px}.video-loading-card{min-height:150px;border:1px dashed #d9c7e7;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.55);grid-column:1/-1}.video-spinner{width:17px;height:17px;border:2px solid #e8d9f1;border-top-color:var(--purple);border-radius:50%;animation:videoSpin .8s linear infinite}@keyframes videoSpin{to{transform:rotate(360deg)}}
.video-empty-state{grid-column:1/-1;text-align:center;padding:34px 18px;background:#fff;border:1px dashed #dbc9e9;border-radius:16px;color:var(--muted)}.video-empty-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding-left:3px;background:#f4eafb;color:var(--purple);margin:0 auto 10px}.video-empty-state h3{font-family:Fraunces,Georgia,serif;color:var(--text);font-size:18px;margin:0 0 5px}.video-empty-state p{font-size:12px;margin:0 auto 13px;max-width:360px;line-height:1.5}.video-empty-state .btn{font-size:11px;padding:9px 12px}
/* Modal player */
body.video-modal-open{overflow:hidden}.video-player-modal{position:fixed;inset:0;z-index:21000;background:rgba(22,5,36,.78);display:none;align-items:center;justify-content:center;padding:22px}.video-player-card{width:min(920px,100%);max-height:calc(100vh - 44px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(22,5,36,.45);position:relative}.video-player-close{position:absolute;right:10px;top:10px;z-index:5;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(22,5,36,.62);color:#fff;font-size:23px;line-height:1;cursor:pointer}.video-player-fullscreen{position:absolute;right:54px;top:10px;z-index:5;border:1px solid rgba(255,255,255,.65);background:rgba(22,5,36,.62);color:#fff;border-radius:8px;padding:8px 10px;font-size:11px;font-weight:850;cursor:pointer}.video-player-frame{width:100%;aspect-ratio:16/9;background:#0f0c13}.video-player-frame iframe{display:block;width:100%;height:100%;border:0}.video-player-info{padding:20px 23px 23px}.video-player-category{display:inline-flex;background:#f4eafb;color:var(--purple);border-radius:99px;padding:6px 9px;font-size:10px;font-weight:900}.video-player-info h2{font-family:Fraunces,Georgia,serif;font-size:25px;line-height:1.12;margin:11px 0 7px;letter-spacing:-.03em}.video-player-info p{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 13px}.video-player-meta{display:flex;gap:7px;flex-wrap:wrap}.video-player-meta span{background:#faf8fb;border:1px solid #eee7f2;color:var(--muted);border-radius:6px;padding:6px 8px;font-size:10px}.video-player-note{font-size:10px;color:#93869d;margin-top:13px}
/* Admin */
.video-admin-panel{background:linear-gradient(135deg,#17121c,#2b1835);color:#fff;border-radius:20px;padding:20px;margin-bottom:15px;box-shadow:0 17px 35px -17px rgba(22,5,36,.5)}.video-admin-panel h3{font-family:Fraunces,Georgia,serif;font-size:22px;margin:0 0 5px}.video-admin-panel > p{font-size:12px;color:rgba(255,255,255,.72);margin:0;line-height:1.5}.video-admin-form-card{background:#fff;color:var(--text);border-radius:15px;margin-top:17px;padding:17px}.video-admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.video-admin-field{display:grid;gap:5px}.video-admin-field.full{grid-column:1/-1}.video-admin-field label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}.video-admin-input{width:100%;height:38px;padding:0 11px;border:1.5px solid var(--border);border-radius:9px;background:#fff;color:var(--text);font:inherit;font-size:12px;outline:0}.video-admin-textarea{height:71px;resize:vertical;padding:9px 11px}.video-admin-input:focus{border-color:var(--violet-mid);box-shadow:0 0 0 3px rgba(102,24,138,.09)}.video-admin-check{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-weight:700}.video-admin-check input{accent-color:var(--purple)}.video-admin-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #eee8f2;margin-top:13px;padding-top:13px;flex-wrap:wrap}.video-admin-action-buttons{display:flex;gap:7px;flex-wrap:wrap}.video-admin-action-buttons .btn{font-size:11px;padding:9px 12px}.video-admin-status{font-size:11px;line-height:1.4}.video-admin-status.success{color:#12825d}.video-admin-status.error{color:#c12e3c}.video-admin-status.info{color:var(--purple)}.video-admin-list-wrap{background:#fff;border:1px solid var(--border);border-radius:15px;padding:16px;color:var(--text)}.video-admin-list-wrap h4{font-family:Fraunces,Georgia,serif;font-size:18px;margin:0 0 12px}.video-admin-list{display:grid;gap:8px}.video-admin-row{display:flex;align-items:center;gap:9px;border:1px solid #eee8f2;border-radius:10px;padding:9px;min-width:0}.video-admin-row-thumb{width:62px;height:42px;flex:none;border-radius:7px;overflow:hidden;background:linear-gradient(135deg,#4c126c,#dfad4c)}.video-admin-row-thumb img{width:100%;height:100%;object-fit:cover;display:block}.video-admin-row-main{min-width:0;flex:1}.video-admin-row-main b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-admin-row-main small{display:block;color:var(--muted);font-size:9px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-admin-pill{font-size:9px;font-weight:900;border-radius:99px;padding:5px 7px;white-space:nowrap}.video-admin-pill.published{background:#e6f7ef;color:#12825d}.video-admin-pill.draft{background:#fff4d7;color:#896314}.video-admin-edit,.video-admin-delete{border:0;background:#f6f1f8;color:var(--purple);border-radius:7px;padding:6px 8px;font:inherit;font-size:9px;font-weight:850;cursor:pointer;white-space:nowrap}.video-admin-delete{color:#b72d3e;background:#fff0f1}.video-admin-loading,.video-admin-error{font-size:12px;color:var(--muted);padding:17px;text-align:center;background:#faf8fb;border-radius:10px}.video-admin-error{color:#b72d3e;background:#fff5f5}.video-admin-help{font-size:10px;color:var(--muted);line-height:1.5;margin-top:10px;background:#f8f2fb;border-radius:9px;padding:9px}.video-admin-help b{color:var(--purple)}
@media(max-width:760px){.video-tutorial-hero{display:block;padding:20px}.video-sync-status{margin-top:15px}.video-featured-card{grid-template-columns:1fr}.video-featured-media{min-height:170px}.video-featured-copy{padding:18px}.video-tutorial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.video-card-media{height:114px}.video-card-body{padding:11px}.video-card-body h3{font-size:12px}.video-card-body p{font-size:10px;min-height:29px}.video-card-meta span{font-size:8px;padding:4px 5px}.video-card-foot{font-size:9px}.video-admin-form-grid{grid-template-columns:1fr}.video-admin-field.full{grid-column:auto}.video-player-modal{padding:0;align-items:stretch}.video-player-card{width:100%;max-height:100vh;height:100%;border-radius:0;display:flex;flex-direction:column}.video-player-frame{aspect-ratio:auto;height:auto;flex:0 0 auto}.video-player-info{padding:18px 17px}.video-player-info h2{font-size:22px}.video-player-close{top:9px;right:9px}.video-player-note{margin-top:10px}}
@media(max-width:430px){.video-tutorial-grid{grid-template-columns:1fr}.video-card-media{height:150px}.video-filter-row .video-select{flex:1;min-width:0}.video-player-info p{font-size:12px}}

/* Multiple featured videos scroll sideways instead of forming a long vertical list. */
.video-featured-scroller{display:flex;gap:13px;overflow-x:auto;padding:2px 3px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}.video-featured-scroller::-webkit-scrollbar{height:7px}.video-featured-scroller::-webkit-scrollbar-thumb{background:#c9b2d8;border-radius:99px}.video-featured-scroller .video-featured-card{flex:0 0 min(650px,88vw);margin-bottom:0;scroll-snap-align:start}

/* Ten-at-a-time learner navigation */
.video-tutorial-pagination{display:none;align-items:center;justify-content:center;gap:12px;margin:18px 0 4px;flex-wrap:wrap}.video-page-button{border:1px solid var(--border);background:#fff;color:var(--purple);border-radius:9px;padding:9px 13px;font-size:11px;font-weight:850;cursor:pointer}.video-page-button:hover:not(:disabled){border-color:var(--violet-mid);background:#f8f1fb}.video-page-button:disabled{opacity:.42;cursor:not-allowed}.video-page-label{font-size:11px;color:var(--muted);font-weight:750}

/* Taller, reliable landscape-friendly player */
.video-player-frame{aspect-ratio:16/9;min-height:300px}.video-player-frame iframe{min-height:100%;height:100%}

/* Admin bulk import and counts */
.video-admin-stats{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0 0}.video-admin-stats>div{min-width:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:9px 11px}.video-admin-stats b{display:block;font-size:20px;color:#fff}.video-admin-stats span{display:block;font-size:10px;color:rgba(255,255,255,.72);margin-top:2px}.video-bulk-import-card{background:#fbf8fd;color:var(--text);border:1px solid #e8dff0;border-radius:15px;margin-top:14px;padding:15px}.video-bulk-import-card h4{font-family:Fraunces,Georgia,serif;font-size:18px;margin:0 0 5px}.video-bulk-import-card>p{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 10px}.video-bulk-import-card input[type=file]{display:block;width:100%;padding:9px;border:1.5px dashed #cdb8dc;border-radius:9px;background:#fff;font:inherit;font-size:11px}.video-markdown-queue{display:grid;gap:7px;margin-top:11px}.video-bulk-empty{font-size:11px;color:var(--muted);background:#fff;border:1px dashed #d9c8e3;border-radius:9px;padding:12px;text-align:center}.video-bulk-row{display:flex;align-items:center;gap:8px;min-width:0;background:#fff;border:1px solid #ece5f1;border-radius:9px;padding:8px}.video-bulk-featured-toggle{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid #e5d9eb;border-radius:8px;background:#fbf8fd;color:#b9a4c4;font-size:20px;line-height:1;cursor:pointer;transition:.15s}.video-bulk-featured-toggle:hover{border-color:#d3b65d;background:#fffaf0}.video-bulk-featured-toggle.selected{border-color:#e0b33e;background:#fff5d6;color:#D99A00;text-shadow:0 2px 8px rgba(217,154,0,.25)}.video-bulk-row-main{flex:1;min-width:0}.video-bulk-row-main b,.video-bulk-row-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-bulk-row-main b{font-size:11px}.video-bulk-row-main small{font-size:9px;color:var(--muted);margin-top:3px}.video-bulk-pill{font-size:9px;font-weight:900;border-radius:99px;padding:5px 7px;white-space:nowrap}.video-bulk-pill.valid{background:#e6f7ef;color:#12825d}.video-bulk-pill.invalid{background:#fff0f1;color:#b72d3e}.video-bulk-preview,.video-bulk-remove{border:0;border-radius:7px;padding:6px 8px;font-size:9px;font-weight:850;cursor:pointer;white-space:nowrap}.video-bulk-preview{background:#f1e8f7;color:var(--purple)}.video-bulk-remove{background:#fff0f1;color:#b72d3e}.video-bulk-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.video-bulk-actions .btn{font-size:10px;padding:8px 10px}

@media(max-width:760px){.video-player-frame{aspect-ratio:16/9;min-height:0;height:auto;flex:0 0 auto}.video-player-frame iframe{height:100%;min-height:0;aspect-ratio:16/9}.video-player-card{display:block;height:auto;max-height:100vh}.video-player-modal{overflow:auto}.video-bulk-row{align-items:flex-start;flex-wrap:wrap}.video-bulk-row-main{min-width:calc(100% - 10px)}.video-bulk-pill{margin-left:auto}}

/* Fallback for browsers/WebViews that reject the native Fullscreen API. */
.video-player-modal.video-manual-fullscreen{padding:0;align-items:stretch;overflow:hidden}.video-manual-fullscreen .video-player-card{width:100vw;max-width:none;height:100vh;max-height:none;border-radius:0;display:flex;flex-direction:column}.video-manual-fullscreen .video-player-frame{flex:1;min-height:0;height:auto;aspect-ratio:auto}.video-manual-fullscreen .video-player-frame iframe{height:100%;min-height:0}.video-manual-fullscreen .video-player-info{display:none}