/* === Theme Vars (shared) === */
:root {
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-3xl: 28px;
    --container: 1200px;
    --fast: .18s cubic-bezier(.2, .8, .2, 1);
    --shadow-focus: 0 0 0 3px var(--ring);
}

[data-theme="light-glass"] {
    --gold-1: #F4DEAA;
    --gold-2: #D4A354;
    --gold-3: #B57E2F;
    --gold-grad: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
    --bg-0: #f8fafc;
    --bg-1: #ffffff;
    --bg-2: #f1f5f9;
    --surface: rgba(255, 255, 255, .50);
    --surface-strong: rgba(255, 255, 255, .70);
    --border: rgba(15, 23, 42, .12);
    --ring: rgba(0, 0, 0, .08);
    --text-strong: #1e293b;
    --text: #475569;
    --text-dim: #94a3b8;
    --page-shadow: 0 30px 80px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .05);
    --card-shadow: 0 24px 40px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .06);
    --brand-button: #0f172a;
    --brand-button-contrast: #fff;
}

[data-theme="dark-premium"] {
    --gold-1: #F4DEAA;
    --gold-2: #D4A354;
    --gold-3: #B57E2F;
    --gold-grad: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
    --bg-0: #0C0D11;
    --bg-1: #11131A;
    --bg-2: #151821;
    --surface: rgba(22, 25, 34, .72);
    --surface-strong: rgba(18, 20, 28, .82);
    --border: #2A2F3A;
    --ring: rgba(255, 196, 88, .22);
    --text-strong: #F3F4F6;
    --text: #C7D2E0;
    --text-dim: #8A94A7;
    --page-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .02);
    --card-shadow: 0 24px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .02);
    --brand-button: var(--gold-grad);
    --brand-button-contrast: #0b0b0b;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-family: 'Vazirmatn', 'Inter', system-ui, sans-serif
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    color: var(--text);
    background:
            radial-gradient(1200px 600px at 85% -10%, rgba(212, 163, 84, .12) 0%, rgba(212, 163, 84, 0) 60%),
            radial-gradient(900px 500px at -10% 110%, rgba(244, 222, 170, .12) 0%, rgba(244, 222, 170, 0) 60%),
            linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2));
    min-height: 100vh;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ===== Loader Overlay ===== */
.loader-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #f1eeee 40%, transparent);
    backdrop-filter: blur(6px);
    z-index: 9999;
}
.loader-overlay.hidden { display: none; }

.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid var(--surface-2, #3b3b3b);
    border-top-color: var(--accent, #f8d14a);
    animation: pp-spin .9s linear infinite;
    margin-inline: auto;
}
.loader-text { margin-top: 12px; font-size: 14px; color: var(--text, #eee); }

@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ====== Smooth content transitions ====== */
#view { position: relative; }

/* حالت‌های ورود/خروج */
.pp-leave {
    opacity: 1;
    transform: translateY(0);
}
.pp-leave.pp-leave-active {
    transition: opacity .24s ease, transform .24s ease;
    opacity: 0;
    transform: translateY(6px);
}

.pp-enter {
    opacity: 0;
    transform: translateY(-6px);
}
.pp-enter.pp-enter-active {
    transition: opacity .28s ease, transform .28s ease;
    opacity: 1;
    transform: translateY(0);
}

/* جلوگیری از پرش ارتفاع هنگام تعویض محتوا */
#view.animating { position: relative; }
#view.animating::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
}

/* ====== Loader polish ====== */

.loader-text { margin-top: 10px; font-size: 14px; color: var(--text, #eee); }

@keyframes pp-spin { to { transform: rotate(360deg); } }
@keyframes pp-pop { from { transform: scale(.94); } to { transform: scale(1); } }

/* (اختیاری) نوار پیشرفت نازک بالا */
#pp-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--accent,#f8d14a), #ffd66b);
    z-index: 10000; transition: width .2s ease;
}


.page {
    width: 100%;
    max-width: var(--container);
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--page-shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.page:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid rgba(255, 196, 88, .08)
}

.header {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(min-width:768px) {
    .header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.badge {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 8px 24px rgba(212, 163, 84, .25);
    background: #0f1014;
    display: grid;
    place-items: center
}

[data-theme="light-glass"] .badge {
    background: #ffffff;
    border-color: rgba(15, 23, 42, .06);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08)
}

.badge {
    transition: .5s ease;
}

.badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge:hover{
    transform: scale(1.05);
}

h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-strong)
}

.lead {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--text-dim)
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: .5s ease;
}

.toolbar:hover {
    transform: scale(1.05);
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 8px;
    box-shadow: var(--card-shadow)
}

.toggle-btn {
    appearance: none;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    position: relative;
    background: #0f1117;
    outline: 0;
    border: 1px solid var(--border);
    cursor: pointer
}

[data-theme="light-glass"] .toggle-btn {
    background: #e2e8f0;
    border-color: rgba(0, 0, 0, .08)
}

.knob {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 999px;
    transition: transform var(--fast)
}

[data-theme="light-glass"] .knob {
    transform: translateX(-20px)
}

.icon {
    width: 16px;
    height: 16px;
    color: var(--text-dim)
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px
}

@media(min-width:768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:1280px) {
    .grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.card {
    position: relative;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    padding: 18px;
    box-shadow: var(--card-shadow);
    transition: .5s ease;
}

[data-theme="light-glass"] .card {
    background: var(--surface-strong)
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 196, 88, .25);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35), var(--shadow-focus)
}

.meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 12px
}

.pill {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .02);
    color: var(--text-dim);
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 11px;
    transition: .5s ease;
}

.pill:hover {
    border: 1px solid #FEE09A;
    background: rgba(255, 255, 255, .02);
    color: rgb(15 23 42 / 65%);
}

.title {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.title h2 {
    margin: 0;
    font-size: 15px;
    color: var(--text-strong);
    font-weight: 800
}

.title p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text)
}

.cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px
}

.btn {
    border: 0;
    cursor: pointer;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--brand-button-contrast);
    background: var(--brand-button);
    box-shadow: 0 10px 24px rgba(212, 163, 84, .35);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter .15s ease, transform .15s ease;
    text-decoration: none;
}

.btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px)
}

.chev {
    width: 16px;
    height: 16px
}

.course-id {
    font-size: 11px;
    color: var(--text-dim)
}

.search {
    width: 100%;
    max-width: 300px
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--card-shadow);
    outline: 1px solid rgba(255, 255, 255, .04)
}

.search-box:focus-within {
    outline-color: var(--ring)
}

.search-box input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px
}

.search-icon {
    width: 16px;
    height: 16px;
    color: var(--text-dim);
    flex-shrink: 0
}

.layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

@media(min-width:1280px) {
    .layout {
        grid-template-columns: 1fr 320px
    }
}

.video-card {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow: var(--card-shadow);
    overflow: hidden
}

.video-box {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(90% 90% at 30% 30%, #0F1219 0%, #0B0C11 70%);
    position: relative;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600
}

[data-theme="light-glass"] .video-box {
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e2e8f0 70%)
}

.glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(40% 40% at 30% 30%, rgba(244, 222, 170, .16), transparent 60%)
}

[data-theme="light-glass"] .glow {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%)
}

.play {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: #0E1117;
    color: #fff;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .15);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .55);
    cursor: pointer
}

[data-theme="light-glass"] .play {
    background: rgba(15, 23, 42, .85);
    border-color: rgba(255, 255, 255, .7)
}

.meta-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid var(--border);
    background: var(--surface)
}

@media(min-width:768px) {
    .meta-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
}

.meta-title {
    font-size: 13px;
    color: var(--text-strong);
    font-weight: 800
}

.meta-sub {
    font-size: 11px;
    color: var(--text)
}

.continue {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--brand-button-contrast);
    cursor: pointer;
    background: var(--brand-button);
    box-shadow: 0 12px 24px rgba(212, 163, 84, .35);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 18px;
}

@media(min-width:768px) {
    .stats {
        grid-template-columns: repeat(4, 1fr)
    }
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: .5s ease;
}

.stat:hover {
    border: 0.5px solid #FEE09A;
    transform: scale(1.05);
}

[data-theme="light-glass"] .stat {
    background: var(--surface-strong)
}

.label {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600
}

.value {
    font-size: 13px;
    color: var(--text-strong);
    font-weight: 800
}

.h2 {
    margin: 26px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-strong);
    font-weight: 800;
    font-size: 14px
}

.h2 small {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 11px
}

.desc-box {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow: var(--card-shadow);
    padding: 16px;
    line-height: 1.9;
    font-size: 13px;
    color: var(--text);
    transition: .5s ease;
}

.desc-box:hover {
    transform: scale(1.05);
    border: 0.5px solid #FEE09A;
}

.desc-box p {
    margin: 0 0 10px
}

.desc-box ul {
    margin: 0;
    padding-right: 18px
}

[data-theme="light-glass"] .desc-box {
    background: var(--surface-strong)
}

.side {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.scard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
    transition: .5s ease;
}

.scard:hover {
    border: 0.5px solid #FEE09A;
    transform: scale(1.05);
}

[data-theme="light-glass"] .scard {
    background: var(--surface-strong);
    box-shadow: var(--card-shadow)
}

.status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text)
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #16a34a, #15803d);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .1)
}

.stitle {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-strong);
    margin-top: 6px
}

.sdesc {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.7
}

.preview {
    margin-top: 8px;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-dim);
    border-radius: 12px;
    display: grid;
    place-items: center;
    min-height: 80px;
    font-size: 11px
}

[data-theme="light-glass"] .preview {
    background: rgba(255, 255, 255, .4)
}

footer {
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 10px
}

footer b {
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.row {
    display: flex;
    align-items: center;
    gap: 10px
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: var(--text);
    border: 1px solid var(--border);
    background: #0C0E13
}

[data-theme="light-glass"] .avatar {
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e2e8f0 70%)
}

.player-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
}

.player-overlay.is-visible{
    opacity:1;
    pointer-events:auto;
}

.player-overlay-inner{
    width:min(980px, 100% - 32px);
    max-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* دکمه بستن */
.player-close{
    position:absolute;
    top:12px;
    left:12px;
    border:none;
    border-radius:999px;
    width:32px;
    height:32px;
    cursor:pointer;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:16px;
    display:grid;
    place-items:center;
    z-index:10;
}

/* ==== Player inside detail video-card ==== */

.video-card {
    transition: 0.5s ease;
}

.video-card .frame{
    position: relative;
    width: 100%;
}

.video-card .frame::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:calc(var(--r-2xl) + 2px);
    background:
            linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%),
            linear-gradient(315deg, rgba(244,222,170,.45), rgba(212,163,84,.28));
    filter:blur(16px);
    opacity:.6;
    z-index:0;
    pointer-events:none;
}

.video-card .player{
    position:relative;
    z-index:1;
    backdrop-filter:saturate(140%) blur(16px);
    -webkit-backdrop-filter:saturate(140%) blur(16px);
    background:var(--surface-strong);
    border:1px solid var(--border);
    border-radius:var(--r-2xl);
    box-shadow:var(--card-shadow);
    overflow:hidden;
    user-select:none;
    transition:.5s ease;
}

.video-card:hover {
    border: 0.5px solid #FEE09A;
}

.video-card .video-wrap{
    position:relative;
    background:#000;
    aspect-ratio:16/9;
}

.video-card video{
    width:100%;
    height:100%;
    display:block;
    background:#000;
}

/* big play وسط تصویر */
.video-card .big-toggle{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    pointer-events:none;
    transition:opacity .25s ease;
    opacity:0;
}
.video-card .player.paused .big-toggle{ opacity:.98; }

.video-card .big-toggle .btn{
    pointer-events:auto;
    width:92px;
    height:92px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    cursor:pointer;
    background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    color:var(--text-strong);
    display:grid;
    place-items:center;
    font-size:30px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* نوار بالا */
.video-card .topbar{
    position:absolute;
    inset-inline:0;
    top:0;
    display:flex;
    justify-content:space-between;
    padding:10px 12px;
    pointer-events:none;
}

.video-card .player-badge{
    pointer-events:auto;
    font-size:11px;
    opacity:.95;
    background:linear-gradient(180deg, rgba(15,17,26,.92), rgba(15,17,26,.8));
    padding:5px 8px;
    border-radius:8px;
    color:var(--text);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="light-glass"] .video-card .player-badge{
    background:linear-gradient(180deg, rgba(248,250,252,.94), rgba(226,232,240,.9));
    color:#0f172a;
}

.video-card .player-badge.warn{
    background:rgba(156,21,21,.86);
    border-color:rgba(255,98,98,.8);
    color:#ffdede;
}

/* controls overlay */
.video-card .controls{
    position:absolute;
    left:12px;
    right:12px;
    bottom:10px;
    z-index:3;
    --ring: rgba(255,255,255,.22);
    padding:10px 14px 12px;
    /* From https://css.glass */
    background: rgba(14, 14, 14, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.9px);
    -webkit-backdrop-filter: blur(6.9px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition: opacity .22s ease, transform .22s ease;
}
.video-card .player.controls-visible .controls{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.video-card .controls-row{
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* progress bar */
.video-card .progress-row{
    display:flex;
    align-items:center;
    gap:8px;
}
.video-card .time{
    font-variant-numeric: tabular-nums;
    color:var(--text-dim);
    font-size:11px;
}
.video-card .progress-track{
    flex:1 1 auto;
    display:flex;
    align-items:center;
}

.video-card input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:6px;
    background:rgba(255,255,255,.12);
    border-radius:999px;
    outline:none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.video-card input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:16px;
    height:16px;
    border-radius:999px;
    background:#ffffff;
    box-shadow:0 0 0 10px rgba(255,255,255,.22);
    border:none;
    cursor:pointer;
}
.video-card input[type="range"]::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:999px;
    background:#ffffff;
    border:none;
    box-shadow:0 0 0 8px rgba(255,255,255,.22);
}

/* icon buttons پایین */
.video-card .actions-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:4px;
}
.video-card .actions-left,
.video-card .actions-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.video-card button.icon{
    border:none;
    border-radius:999px;
    width:40px;
    height:40px;
    background:rgba(255,255,255,.08);
    color:#f9fafb;
    cursor:pointer;
    display:inline-grid;
    place-items:center;
    font:inherit;
    line-height:1;
    transition: transform .12s ease, background .2s, box-shadow .2s, opacity .2s;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.video-card button.icon[disabled],
.video-card button.icon[aria-disabled="true"]{
    opacity:.5;
    cursor:not-allowed;
}
.video-card button.icon:hover{
    transform: translateY(-1px) scale(1.03);
    background:rgba(255,255,255,.14);
    box-shadow: 0 10px 28px rgba(0,0,0,.6), 0 0 0 4px rgba(255,255,255,.18);
}

.video-card .volume-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:90px;
    max-width:160px;
}
.video-card .volume-wrap input[type="range"]{
    height:4px;
    box-shadow:none;
    background:rgba(255,255,255,.16);
}

/* settings menu */
.video-card .settings{ position:relative; }
.video-card .settings-menu{
    position:absolute;
    bottom:46px;
    right:0;
    min-width:220px;
    padding:10px;
    border-radius:14px;
    border:1px solid var(--border);
    background:rgba(7,8,14,.94);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    box-shadow:0 12px 36px rgba(0,0,0,.8);
    opacity:0;
    transform: translateY(8px) scale(.98);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}
.video-card .settings.open .settings-menu{
    opacity:1;
    transform: translateY(0) scale(1);
    pointer-events:auto;
}
.video-card .settings-title{
    margin:4px 8px 8px;
    font-size:12px;
    color:#e7e9ee;
    opacity:.9;
}
.video-card .settings-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:7px 9px;
    border-radius:10px;
    cursor:pointer;
}
.video-card .settings-row:hover{
    background:rgba(255,255,255,.06);
}
.video-card .settings-row.active{
    background:rgba(255,255,255,.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.video-card .settings-label{
    font-size:13px;
    color:#f4f5f7;
}
.video-card .settings-value{
    font-size:12px;
    color:#c8ccd4;
}

/* seek hint */
.video-card .seek-hint{
    position:absolute;
    bottom:78px;
    right:24px;
    background:linear-gradient(180deg, rgba(7,8,14,.95), rgba(7,8,14,.85));
    color:#f9fafb;
    padding:6px 10px;
    border-radius:10px;
    font-size:12px;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .15s ease, transform .15s ease;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
}
.video-card .seek-hint.show{
    opacity:1;
    transform:translateY(0);
}

.video-card .video-wrap.idle{ cursor:none; }
.video-card .player.fullscreen{
    width:100%;
    height:100%;
    border-radius:0;
}
.video-card .kbd{
    padding:.15rem .4rem;
    border-radius:6px;
    background:rgba(15,17,26,.9);
    color:#e4e7eb;
    border:1px solid rgba(148,163,184,.6);
    font-size:11px;
}

/* ریسپانسیو فقط داخل کارت */
@media (max-width: 600px){
    .video-card .controls{
        left:6px;
        right:6px;
        bottom:10px;
        padding:8px 10px 10px;
        border-radius:14px;
    }
    .video-card button.icon{
        width:36px;
        height:36px;
        box-shadow:0 4px 14px rgba(0,0,0,.55);
    }
    .video-card .settings-menu{
        bottom:42px;
        min-width:190px;
    }
    .video-card .seek-hint{
        bottom:68px;
        right:18px;
    }
}