/* ============================================================
   LUMOUT PLAY VIDEO CSS v21 — YouTube stili, kategori filtreli playlist
   v21: Skip butonu yeniden tasarlandı (geri sayım yok, lock ikonu)
   ============================================================ */

/* ============================================================
   1. GENEL LAYOUT
   ============================================================ */

.play-body {
    display: block !important;
    padding: 0 0 80px !important;
    max-width: 100% !important;
    background: var(--yt-bg, #0f0f0f) !important;
    overflow: visible !important;
}

.play-video {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 402px !important;
    column-gap: 24px !important;
    max-width: 1760px !important;
    margin: 0 auto !important;
    padding: 16px 24px 0 !important;
    align-items: start !important;
    overflow: visible !important;
}

.play-video-left {
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.primary {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.primary__details {
    width: 100%;
    min-width: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background-color: var(--yt-bg, #0f0f0f) !important;
    color: var(--yt-text, #f1f1f1) !important;
    position: static !important;
}

.secondary {
    min-width: 0;
    position: sticky;
    top: 72px;
    align-self: start;
}

@media (max-width: 1400px) {
    .play-video { grid-template-columns: minmax(0, 1fr) 380px !important; column-gap: 20px !important; padding: 12px 16px 0 !important; }
}
@media (max-width: 1199px) {
    .play-video { grid-template-columns: minmax(0, 1fr) 340px !important; column-gap: 16px !important; padding: 8px 12px 0 !important; }
}
@media (max-width: 992px) {
    .play-video { grid-template-columns: 1fr !important; padding: 0 !important; column-gap: 0 !important; }
    .play-video-left { width: 100%; }
    .primary__details { padding: 0 12px !important; }
    .secondary { position: static; padding: 0 12px 16px !important; }
}
@media (max-width: 576px) {
    .play-body { padding-bottom: 70px !important; }
    .primary__details { padding: 0 8px !important; }
    .secondary { padding: 0 8px 12px !important; }
}

/* ============================================================
   2. VIDEO PLAYER WRAPPER
   ============================================================ */

.primary__videoPlayer {
    position: relative !important;
    width: 100% !important;
    background: #000 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border-radius: 0;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

@media (min-width: 992px) { .primary__videoPlayer { border-radius: 12px !important; } }
@media (max-width: 992px)  { .primary__videoPlayer { border-radius: 0 !important; } }

.play-body .primary__videoPlayer .video-loader,
.play-body .primary__videoPlayer #loader {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    align-items: center; justify-content: center;
    background: transparent !important; z-index: 3 !important;
    pointer-events: none;
}

.play-body .primary__videoPlayer .video-spinner {
    position: relative !important; flex-shrink: 0 !important;
}

/* ============================================================
   3. YOUTUBE WRAPPER
   ============================================================ */

.lumout-yt-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    overflow: hidden;
    user-select: none;
    cursor: default;
    display: block;
    margin: 0 !important;
}

.lumout-yt-iframe-box {
    position: absolute !important; inset: 0 !important;
    overflow: hidden !important; z-index: 1 !important; background: #000;
}

#lumout-yt-iframe-holder {
    position: absolute !important; top: -62px !important; left: -2px !important;
    width: calc(100% + 4px) !important; height: calc(100% + 124px) !important;
    border: none !important; display: block !important; background: #000;
}

#lumout-yt-iframe-holder iframe,
#lumout-yt-iframe-holder > div,
#lumout-yt-iframe-holder > div > iframe {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    border: none !important; pointer-events: none !important;
}

.lumout-yt-thumb {
    position: absolute !important; inset: 0 !important;
    background-size: cover; background-position: center; background-color: #111;
    cursor: pointer; z-index: 5;
    display: flex !important; align-items: center; justify-content: center;
    transition: opacity .5s ease;
}

.lumout-yt-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,.12); transition: background .2s;
}
.lumout-yt-thumb:hover::after { background: rgba(0,0,0,.04); }

.lumout-yt-center-play {
    position: relative; z-index: 1;
    background: rgba(0,0,0,.82); border-radius: 50%;
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, background .15s;
    box-shadow: 0 0 0 5px rgba(255,255,255,.08);
}
.lumout-yt-thumb:hover .lumout-yt-center-play {
    background: rgba(255,0,0,.88); transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(255,0,0,.2), 0 8px 40px rgba(255,0,0,.5);
}

/* ============================================================
   4. YT KONTROL OVERLAY
   ============================================================ */

.lumout-yt-overlay {
    position: absolute; inset: 0; z-index: 6;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 14%, transparent 30%, transparent 70%, rgba(0,0,0,.15) 85%, rgba(0,0,0,.4) 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    pointer-events: none; opacity: 0; transition: opacity .22s ease, background .3s ease;
}

.lumout-yt-overlay.active { opacity: 1; pointer-events: auto; }
.lumout-yt-overlay.paused-mode { background: rgba(0,0,0,.55) !important; opacity: 1 !important; pointer-events: auto !important; }

.lumout-yt-controls { padding: 0 14px 12px; pointer-events: auto; }
.lumout-yt-progress-row { padding: 0 0 6px; }

.lumout-yt-progress-bar {
    width: 100%; height: 3px;
    -webkit-appearance: none; appearance: none;
    background: rgba(255,255,255,.35);
    border-radius: 2px; cursor: pointer; outline: none;
    transition: height .15s; display: block;
}
.lumout-yt-progress-bar:hover { height: 5px; }
.lumout-yt-progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none; width:14px; height:14px;
    border-radius:50%; background:#ff0000; cursor:pointer; box-shadow:0 0 6px rgba(0,0,0,.6);
}
.lumout-yt-progress-bar::-moz-range-thumb {
    width:14px; height:14px; border-radius:50%;
    background:#ff0000; cursor:pointer; border:none;
}

.lumout-yt-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.lumout-yt-controls-left, .lumout-yt-controls-right { display: flex; align-items: center; gap: 2px; }

.lumout-yt-btn {
    background: none; border: none; cursor: pointer;
    padding: 7px 9px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: background .12s;
    position: relative; flex-shrink: 0;
    font-size: 12px; font-weight: 700; line-height: 1;
}
.lumout-yt-btn svg { fill: #fff !important; }
.lumout-yt-btn:hover  { background: rgba(255,255,255,.2); }
.lumout-yt-btn:active { background: rgba(255,255,255,.3); }

.lumout-yt-time {
    color: #fff; font-size: 11px; white-space: nowrap;
    padding: 0 8px; font-weight: 500; font-variant-numeric: tabular-nums;
}

.lumout-yt-volume-wrap { display: flex; align-items: center; gap: 2px; }
.lumout-yt-volume-slider {
    width: 0; height: 3px; -webkit-appearance: none; appearance: none;
    background: rgba(255,255,255,.5); border-radius: 2px; cursor: pointer; outline: none;
    transition: width .2s ease;
}
.lumout-yt-volume-wrap:hover .lumout-yt-volume-slider,
.lumout-yt-volume-slider:focus { width: 64px; }
.lumout-yt-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width:12px; height:12px;
    border-radius:50%; background:#fff; cursor:pointer;
}

.lumout-yt-settings-wrap { position: relative; }
.lumout-yt-quality-wrap, .lumout-yt-speed-wrap { position: relative; }

.lumout-yt-quality-menu, .lumout-yt-speed-menu {
    display: none; position: absolute; bottom: calc(100% + 10px); right: 0;
    background: rgba(10,10,10,.98); border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; min-width: 128px; z-index: 200; padding: 6px 0;
    box-shadow: 0 10px 32px rgba(0,0,0,.75); backdrop-filter: blur(14px);
}
.lumout-yt-quality-menu.open, .lumout-yt-speed-menu.open { display: block; }

.lumout-yt-quality-item, .lumout-yt-speed-item {
    display: flex; align-items: center; gap: 6px;
    width: 100%; background: none; border: none;
    color: rgba(255,255,255,.88); padding: 8px 18px;
    text-align: left; cursor: pointer; font-size: 13px; transition: background .1s;
}
.lumout-yt-quality-item:hover, .lumout-yt-speed-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.lumout-yt-quality-item.active, .lumout-yt-speed-item.active { color: #fff; font-weight: 700; }
.lumout-yt-quality-item.active::before, .lumout-yt-speed-item.active::before { content: "✓"; font-size: 11px; }

/* ============================================================
   5. YT BRANDING KAPAKLAR
   ============================================================ */

.lumout-yt-brand-shield {
    position: absolute !important; z-index: 8 !important;
    pointer-events: none !important; display: block !important;
}

/* ============================================================
   6. REKLAM ÖNCESİ ROZETİ (Mid-roll sayac)
   ============================================================ */

.lumout-pre-ad-badge {
    position: absolute; top: 14px; right: 14px; z-index: 20;
    background: rgba(0,0,0,.92); color: #ffcc00;
    font-size: 13px; font-weight: 700; padding: 8px 18px;
    border-radius: 4px; border: 1px solid rgba(255,204,0,.4);
    backdrop-filter: blur(8px); pointer-events: none;
    opacity: 0; transform: translateY(-8px);
    transition: opacity .3s, transform .3s;
    white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,.65);
}
.lumout-pre-ad-badge.show { opacity: 1; transform: translateY(0); }
@media (max-width: 576px) {
    .lumout-pre-ad-badge { font-size:11px; padding:6px 12px; top:8px; right:8px; }
}

/* ============================================================
   7. REKLAM OVERLAY — Birebir YouTube Stili
   ============================================================ */

.lumout-ad-overlay {
    position: absolute; inset: 0; z-index: 10;
    pointer-events: none; display: none;
    background: #000;
    flex-direction: column;
    justify-content: flex-end;
}
.lumout-ad-overlay.active {
    pointer-events: auto;
    display: flex;
}

.lumout-ad-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; background: #000;
    z-index: 1;
}

/* Sarı ilerleme çubuğu */
.lumout-ad-progress-wrap {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: rgba(255,255,255,.2);
    z-index: 15;
    overflow: hidden;
}
.lumout-ad-progress-fill {
    height: 100%;
    width: 0%;
    background: #ffcc00;
    transition: width .3s linear;
    border-radius: 0;
}

/* Ana kontrol çubuğu */
.lumout-ad-controls {
    position: absolute;
    bottom: 4px;
    left: 0; right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 10px;
    z-index: 16;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 70%, transparent 100%);
    gap: 10px;
}
@media (max-width: 576px) {
    .lumout-ad-controls { height: 50px; padding: 0 8px; bottom: 4px; gap: 6px; }
}

/* Sol blok: logo + isim + "Learn more" */
.lumout-ad-advertiser-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Logo dairesi — reklamcı favicon/ikonu */
.lumout-ad-logo {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.lumout-ad-logo img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
@media (max-width: 480px) {
    .lumout-ad-logo { width: 28px; height: 28px; min-width: 28px; }
}

/* İsim + URL sütunu */
.lumout-ad-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.lumout-ad-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.lumout-ad-url {
    font-size: 11px;
    color: rgba(255,255,255,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
@media (max-width: 480px) {
    .lumout-ad-name { font-size: 11px; }
    .lumout-ad-url  { display: none; }
}

/* "Learn more" butonu */
.lumout-ad-learn-more {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.9);
    color: #0f0f0f !important;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
    letter-spacing: .01em;
    border: none;
    line-height: 1;
}
.lumout-ad-learn-more:hover {
    background: #fff;
    color: #000 !important;
    text-decoration: none !important;
}
@media (max-width: 480px) {
    .lumout-ad-learn-more { font-size: 11px; padding: 6px 10px; }
}

/* ============================================================
   7b. ATLA BUTONU — v21 Yeni Tasarım
       • Pasif: Kilit ikonu + "5 sn sonra atla" (tek blok, geri sayım yok)
       • Aktif: Ok ikonu + "Reklamı Atla"
       • Mobil uyumlu
   ============================================================ */

/* Atla butonu wrap */
.lumout-ad-skip-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Ana skip butonu */
.lumout-ad-skip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(0, 0, 0, .82);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 2px;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    font-weight: 500;
    padding: 0;
    cursor: not-allowed;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color .2s, background .2s;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.lumout-ad-skip-btn svg {
    fill: currentColor !important;
    flex-shrink: 0;
}

/* Kilit ikonu alanı (pasif durum sol tarafı) */
.lumout-ad-skip-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    color: rgba(255, 255, 255, .55);
    padding: 10px 12px;
    border-right: 1px solid rgba(255, 255, 255, .12);
    min-width: 40px;
    text-align: center;
    line-height: 1;
}

/* Lock ikonu özel renk */
.lumout-ad-skip-lock {
    color: rgba(255, 255, 255, .4);
}
.lumout-ad-skip-lock svg {
    fill: rgba(255, 255, 255, .4) !important;
}

/* Metin alanı */
.lumout-ad-skip-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, .55);
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

/* ── Aktif durumu (5sn sonra) ── */
.lumout-ad-skip-btn.ready {
    cursor: pointer;
    border-color: rgba(255, 255, 255, .45);
    background: rgba(30, 30, 30, .95);
}

.lumout-ad-skip-btn.ready .lumout-ad-skip-countdown {
    background: rgba(50, 50, 50, .95);
    color: #fff;
    border-right-color: rgba(255, 255, 255, .2);
}
.lumout-ad-skip-btn.ready .lumout-ad-skip-countdown svg {
    fill: #fff !important;
}

.lumout-ad-skip-btn.ready .lumout-ad-skip-text {
    color: #fff;
    background: rgba(50, 50, 50, .9);
    font-weight: 600;
}

.lumout-ad-skip-btn.ready:hover {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(60, 60, 60, .98);
}
.lumout-ad-skip-btn.ready:hover .lumout-ad-skip-countdown,
.lumout-ad-skip-btn.ready:hover .lumout-ad-skip-text {
    background: rgba(80, 80, 80, .95);
}

/* Aktif durumda tıklama efekti */
.lumout-ad-skip-btn.ready:active .lumout-ad-skip-countdown,
.lumout-ad-skip-btn.ready:active .lumout-ad-skip-text {
    background: rgba(100, 100, 100, .95);
}

/* ── Mobil (≤576px) ── */
@media (max-width: 576px) {
    .lumout-ad-skip-btn { font-size: 12px; }
    .lumout-ad-skip-countdown { font-size: 12px; padding: 9px 10px; min-width: 34px; }
    .lumout-ad-skip-text { font-size: 12px; padding: 9px 12px; gap: 4px; }
}

/* ── Çok küçük ekranlar (≤360px) ── */
@media (max-width: 360px) {
    .lumout-ad-skip-btn { font-size: 11px; }
    .lumout-ad-skip-countdown { padding: 8px 8px; min-width: 30px; }
    .lumout-ad-skip-text { font-size: 11px; padding: 8px 10px; }
}

/* Alt meta bandı */
.lumout-ad-meta-bar {
    position: absolute;
    top: 10px; left: 12px;
    z-index: 16;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,.6);
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 11px;
    color: rgba(255,255,255,.75);
    line-height: 1;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.lumout-ad-meta-sponsored { font-weight: 500; }
.lumout-ad-meta-sep { opacity: .55; }
.lumout-ad-meta-count { font-weight: 600; }
.lumout-ad-meta-url { color: rgba(255,255,255,.6); }
@media (max-width: 480px) {
    .lumout-ad-meta-bar { font-size: 10px; padding: 3px 6px; top: 6px; left: 6px; }
}

/* Eski sınıflar (geriye dönük uyumluluk) */
.lumout-ad-info { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 10px; z-index: 12; }
.lumout-ad-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.85); color: #ffcc00; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 3px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid rgba(255,204,0,.35); }
.lumout-ad-badge svg { flex-shrink: 0; }

/* ============================================================
   8. OTOMATİK SONRAKİ VİDEO PANELİ
   ============================================================ */

.lumout-autonext-panel {
    position: fixed; bottom: 84px; right: 20px; z-index: 9990;
    width: 320px; background: rgba(14,14,14,.97);
    border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
    overflow: hidden; box-shadow: 0 14px 52px rgba(0,0,0,.8);
    backdrop-filter: blur(14px); opacity: 0;
    transform: translateX(26px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.lumout-autonext-panel.show { opacity:1; transform:translateX(0); pointer-events:auto; }

.lumout-autonext-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); text-transform: uppercase; letter-spacing: .06em; }
.lumout-autonext-cancel { background: none; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.7); font-size: 11px; padding: 3px 10px; border-radius: 20px; cursor: pointer; transition: all .15s; text-transform: none; letter-spacing: 0; }
.lumout-autonext-cancel:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
#lumout-autonext-thumb-link { display: block; text-decoration: none; }
.lumout-autonext-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.lumout-autonext-title { padding: 10px 14px 2px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.93); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lumout-autonext-channel { padding: 2px 14px 6px; font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lumout-autonext-progress-wrap { padding: 8px 14px 10px; display: flex; align-items: center; gap: 10px; }
.lumout-autonext-bar { flex: 1; height: 3px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; }
.lumout-autonext-fill { height: 100%; background: hsl(var(--base,0 100% 50%)); border-radius: 2px; width: 100%; transition: width 1s linear; }
.lumout-autonext-text { font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; flex-shrink: 0; }
.lumout-autonext-btn { display: block; margin: 0 14px 14px; padding: 10px 16px; background: hsl(var(--base,0 100% 50%)); color: #fff !important; text-align: center; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none !important; transition: opacity .15s; }
.lumout-autonext-btn:hover { opacity: .88; }
@media (max-width: 576px) {
    .lumout-autonext-panel { width:calc(100vw - 24px); right:12px; left:12px; bottom:74px; }
}

/* ============================================================
   9. VIDEO DETAYLAR
   ============================================================ */

.primary__details-inner {
    padding: 8px 0 16px !important; margin: 0 !important; display: block !important;
    border-bottom: 1px solid var(--yt-border, rgba(255,255,255,.08));
}
@media (max-width: 992px) { .primary__details-inner { padding: 6px 0 12px !important; } }
@media (max-width: 576px) { .primary__details-inner { padding: 5px 0 10px !important; } }

.video-title {
    font-size: 20px !important; font-weight: 700 !important; line-height: 1.35 !important;
    margin: 0 0 6px !important; color: var(--yt-text, #f1f1f1) !important;
    word-break: break-word; letter-spacing: -.01em;
    display: block !important; visibility: visible !important; opacity: 1 !important;
}
[data-theme="light"] .video-title { color: #0f0f0f !important; }
@media (max-width: 768px) { .video-title { font-size: 17px !important; } }
@media (max-width: 576px) { .video-title { font-size: 15px !important; } }

.video-meta {
    font-size: 13px; color: var(--yt-text-secondary, rgba(255,255,255,.55)) !important;
    display: flex !important; align-items: center; flex-wrap: wrap;
    gap: 4px 8px; margin: 0 0 10px 0 !important;
}
[data-theme="light"] .video-meta { color: #606060 !important; }

.video-actions {
    display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 12px 0 !important; padding-bottom: 12px !important;
    border-bottom: 1px solid var(--yt-border, rgba(255,255,255,.08));
}
[data-theme="light"] .video-actions { border-bottom-color: rgba(0,0,0,.08); }

.video-actions .btn {
    border-radius: 20px !important; font-size: 13px !important; font-weight: 600 !important; padding: 7px 16px !important;
    display: inline-flex !important; align-items: center !important; gap: 7px !important; border: none !important;
    background: var(--yt-chip-bg, rgba(255,255,255,.1)) !important; color: var(--yt-text, #f1f1f1) !important;
    cursor: pointer; transition: background .15s !important; line-height: 1 !important; text-decoration: none !important;
}
.video-actions .btn svg { fill: currentColor !important; flex-shrink: 0; }
.video-actions .btn:hover { background: rgba(255,255,255,.2) !important; color: #fff !important; }
[data-theme="light"] .video-actions .btn { background: #f2f2f2 !important; color: #0f0f0f !important; }
[data-theme="light"] .video-actions .btn:hover { background: #e5e5e5 !important; }

.video-like-group {
    display: flex !important; align-items: center;
    background: var(--yt-chip-bg, rgba(255,255,255,.1)); border-radius: 20px; overflow: hidden;
}
.video-like-group .btn { border-radius: 0 !important; background: transparent !important; }
.video-like-group .btn:first-child { border-radius: 20px 0 0 20px !important; padding-left: 16px !important; }
.video-like-group .btn:last-child { border-radius: 0 20px 20px 0 !important; padding-right: 16px !important; border-left: 1px solid rgba(255,255,255,.12) !important; }
.video-like-group .btn:hover { background: rgba(255,255,255,.18) !important; }
[data-theme="light"] .video-like-group { background: #f2f2f2; }
[data-theme="light"] .video-like-group .btn:last-child { border-left-color: rgba(0,0,0,.12) !important; }

/* ============================================================
   10. KANAL BİLGİSİ
   ============================================================ */

.video-channel {
    display: flex !important; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; padding: 10px 0 !important; margin: 0 !important;
    border-bottom: 1px solid var(--yt-border, rgba(255,255,255,.08));
}
[data-theme="light"] .video-channel { border-color: rgba(0,0,0,.08); }

.video-channel-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

.video-channel-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; border: 2px solid rgba(255,255,255,.08); transition: opacity .15s;
}
.video-channel-avatar:hover { opacity: .85; }

.video-channel-name {
    font-weight: 700; font-size: 14px; color: var(--yt-text, #f1f1f1) !important;
    text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color .15s;
}
.video-channel-name:hover { color: #fff !important; text-decoration: none; }
[data-theme="light"] .video-channel-name { color: #0f0f0f !important; }

.video-channel-subs {
    font-size: 12px; color: var(--yt-text-secondary, rgba(255,255,255,.5)) !important;
    margin-top: 1px; display: block;
}
[data-theme="light"] .video-channel-subs { color: #606060 !important; }

.btn-subscribe {
    display: inline-flex !important; align-items: center; gap: 6px;
    border-radius: 20px !important; font-size: 13px !important; font-weight: 700 !important; padding: 8px 20px !important;
    background: var(--yt-text, #f1f1f1) !important; color: var(--yt-bg, #0f0f0f) !important;
    border: none !important; cursor: pointer; transition: opacity .15s, transform .12s !important;
    white-space: nowrap; flex-shrink: 0;
}
.btn-subscribe:hover { opacity: .9; transform: scale(1.02); }
.btn-subscribe.subscribed { background: var(--yt-chip-bg, rgba(255,255,255,.12)) !important; color: var(--yt-text, #f1f1f1) !important; }
[data-theme="light"] .btn-subscribe { background: #0f0f0f !important; color: #fff !important; }
[data-theme="light"] .btn-subscribe.subscribed { background: #f2f2f2 !important; color: #0f0f0f !important; }

/* ============================================================
   11. AÇIKLAMA
   ============================================================ */

.video-description {
    margin: 8px 0 0 !important; background: var(--yt-surface, rgba(255,255,255,.06));
    border-radius: 10px; padding: 12px 14px !important;
    cursor: pointer; transition: background .15s; display: block !important;
}
.video-description:hover { background: rgba(255,255,255,.1); }
[data-theme="light"] .video-description { background: #f2f2f2; }
[data-theme="light"] .video-description:hover { background: #e8e8e8; }

.video-description__content {
    font-size: 14px; line-height: 1.6; color: var(--yt-text, #f1f1f1) !important;
    overflow: hidden; transition: max-height .35s; white-space: pre-wrap; word-break: break-word;
}
[data-theme="light"] .video-description__content { color: #0f0f0f !important; }

.video-description__toggle {
    display: flex; align-items: center; font-size: 13px; font-weight: 700;
    color: var(--yt-text, rgba(255,255,255,.9)) !important;
    background: none; border: none; padding: 6px 0 0 !important;
    cursor: pointer; transition: color .15s;
}
.video-description__toggle:hover { color: #fff !important; }
[data-theme="light"] .video-description__toggle { color: #0f0f0f !important; }

.video-tags { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 !important; }
.video-tags a {
    background: var(--yt-chip-bg, rgba(255,255,255,.08)); color: hsl(var(--base, 210 100% 65%)) !important;
    font-size: 13px; padding: 4px 12px; border-radius: 4px;
    text-decoration: none; transition: background .15s; font-weight: 500; display: inline-block;
}
.video-tags a:hover { background: rgba(255,255,255,.14); color: #fff !important; text-decoration: none; }
[data-theme="light"] .video-tags a { background: rgba(0,0,0,.06); color: hsl(var(--base, 210 100% 40%)) !important; }
[data-theme="light"] .video-tags a:hover { background: rgba(0,0,0,.1); }

/* ============================================================
   12. İLGİLİ VİDEOLAR + KATEGORİ FİLTRE ŞERİTLERİ
   ============================================================ */

.secondary__title {
    font-size: 15px; font-weight: 700; color: var(--yt-text, #f1f1f1) !important;
    margin: 0 0 10px 4px !important; display: flex; align-items: center;
}
[data-theme="light"] .secondary__title { color: #0f0f0f !important; }

/* ── Kategori Filtre Şeritleri ── */
.lumout-cat-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 10px;
    margin-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lumout-cat-chips::-webkit-scrollbar { display: none; }

.lumout-cat-chip {
    display: inline-flex;
    align-items: center;
    background: var(--yt-chip-bg, rgba(255,255,255,.1));
    color: var(--yt-text, #f1f1f1);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    line-height: 1;
}
.lumout-cat-chip:hover { background: rgba(255,255,255,.18); color: #fff; }
.lumout-cat-chip.active {
    background: var(--yt-text, #f1f1f1);
    color: var(--yt-bg, #0f0f0f);
}
[data-theme="light"] .lumout-cat-chip { background: #f2f2f2; color: #0f0f0f; }
[data-theme="light"] .lumout-cat-chip:hover { background: #e0e0e0; }
[data-theme="light"] .lumout-cat-chip.active { background: #0f0f0f; color: #fff; }

/* "Şu an oynuyor" rozeti */
.rv-item--now-playing {
    background: var(--yt-hover, rgba(255,255,255,.06)) !important;
    border-radius: 8px;
}
.rv-now-playing-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: hsl(var(--base, 0 100% 50%)) !important;
    background: hsl(var(--base, 0 100% 50%) / 0.12);
    border: 1px solid hsl(var(--base, 0 100% 50%) / 0.3);
    border-radius: 3px;
    padding: 2px 6px;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rv-now-playing-badge svg { fill: currentColor !important; }

.secondary .video-item {
    display: flex !important; flex-direction: row !important; gap: 8px !important; margin-bottom: 8px !important;
    cursor: pointer; padding: 4px; border-radius: 8px; transition: background .15s; text-decoration: none;
}
.secondary .video-item:hover { background: var(--yt-hover, rgba(255,255,255,.06)); }
[data-theme="light"] .secondary .video-item:hover { background: rgba(0,0,0,.04); }

.secondary .video-item__thumb {
    width: 168px !important; min-width: 168px !important; height: 94px !important; aspect-ratio: unset !important;
    border-radius: 8px !important; overflow: hidden !important; flex-shrink: 0 !important;
    background: #111 !important; position: relative !important;
}
@media (max-width: 576px) {
    .secondary .video-item__thumb { width:128px !important; min-width:128px !important; height:72px !important; }
}
.secondary .video-item__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .3s; }
.secondary .video-item:hover .video-item__thumb img { transform: scale(1.04); }
.secondary .video-item__content { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; }
.secondary .video-item__content .title a { font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--yt-text, #f1f1f1) !important; text-decoration: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 4px !important; }
.secondary .video-item__content .title a:hover { color: #fff !important; }
[data-theme="light"] .secondary .video-item__content .title a { color: #0f0f0f !important; }
.secondary .video-item__content .channel { font-size: 12px !important; color: var(--yt-text-secondary, #aaa) !important; }
.secondary .video-item__content .meta    { font-size: 11px !important; color: var(--yt-text-secondary, #aaa) !important; margin-top: 1px; }
.secondary .video-item__channel-author { display: none !important; }

.rv-title a { color: var(--yt-text, #f1f1f1) !important; text-decoration: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.rv-title a:hover { color: #fff !important; }
[data-theme="light"] .rv-title a { color: #0f0f0f !important; }
[data-theme="light"] .rv-title a:hover { color: #0f0f0f !important; opacity: .75; }

.rv-channel { color: var(--yt-text-secondary, rgba(255,255,255,.55)) !important; text-decoration: none !important; }
.rv-channel:hover { color: var(--yt-text, #f1f1f1) !important; }
[data-theme="light"] .rv-channel { color: #606060 !important; }

.rv-meta  { color: var(--yt-text-secondary, rgba(255,255,255,.45)) !important; font-size: 12px !important; }
.rv-views, .rv-date { color: inherit !important; }
.rv-dot { opacity: .55 !important; }
[data-theme="light"] .rv-meta, [data-theme="light"] .rv-views, [data-theme="light"] .rv-date { color: #606060 !important; }

.rv-item {
    display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 8px !important;
    background: transparent !important; margin-bottom: 8px !important; padding: 4px !important; border-radius: 8px !important;
    transition: background .15s !important; text-decoration: none !important; cursor: pointer !important;
}
.rv-item:hover { background: var(--yt-hover, rgba(255,255,255,.06)) !important; }
[data-theme="light"] .rv-item:hover { background: rgba(0,0,0,.04) !important; }

.rv-thumb {
    flex-shrink: 0 !important; width: 168px !important; min-width: 168px !important; height: 94px !important;
    border-radius: 8px !important; overflow: hidden !important; display: block !important;
    background: #1a1a1a !important; position: relative !important; aspect-ratio: unset !important;
}
@media (max-width: 1199px) {
    .rv-thumb { width: 140px !important; min-width: 140px !important; height: 78px !important; }
}
@media (max-width: 576px) {
    .rv-item  { flex-direction: column !important; }
    .rv-thumb { width: 100% !important; min-width: 0 !important; height: auto !important; aspect-ratio: 16/9 !important; }
}
.rv-thumb img, .rv-thumb .video-hover-yt { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.rv-thumb .video-hover-yt { position: absolute !important; inset: 0 !important; }
.rv-thumb .video-hover-yt-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

.rv-content { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; }
.rv-right { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; width: 100% !important; }
.rv-title { margin: 0 !important; min-width: 0 !important; }

/* ── Süre rozeti ── */
.rv-duration-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0,0,0,.82);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.4;
    pointer-events: none;
    z-index: 3;
}

/* ── Kategori rozeti (rv kartında) ── */
.rv-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: hsl(var(--base)) !important;
    background: hsl(var(--base) / 0.1);
    border: 1px solid hsl(var(--base) / 0.2);
    border-radius: 3px;
    padding: 2px 6px;
    text-decoration: none !important;
    margin-top: 2px;
    line-height: 1.4;
    transition: background .15s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rv-cat-badge:hover { background: hsl(var(--base) / 0.2); color: hsl(var(--base)) !important; }

/* ── Kategori başlığı (sağ panel üstü) ── */
.rv-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
    margin-bottom: 4px;
    border-bottom: 2px solid hsl(var(--base) / 0.3);
}
.rv-category-header__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: hsl(var(--base)) !important;
    text-decoration: none !important;
    transition: opacity .15s;
}
.rv-category-header__link:hover { opacity: .8; }
.rv-category-header__count {
    font-size: 11px;
    color: var(--yt-text-secondary, rgba(255,255,255,.4));
}
[data-theme="light"] .rv-category-header__count { color: #606060; }

/* ============================================================
   13. MİNİ PLAYER
   ============================================================ */

.lumout-mini-player {
    position: fixed; bottom: 84px; right: 20px;
    width: 340px; background: #1a1a1a; border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,.8); z-index: 9999;
    overflow: hidden; display: none; border: 1px solid rgba(255,255,255,.08);
}
.lumout-mini-player.active { display: block; }
.lumout-mini-player video, .lumout-mini-player iframe { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
.lumout-mini-player-controls { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1a1a1a; border-top: 1px solid rgba(255,255,255,.06); }
.lumout-mini-player-title { color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.lumout-mini-close { background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; padding: 4px 6px; line-height: 1; border-radius: 4px; transition: color .15s, background .15s; flex-shrink: 0; display: flex; align-items: center; }
.lumout-mini-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.lumout-mini-close svg { stroke: currentColor; }
@media (max-width: 576px) {
    .lumout-mini-player { width:calc(100vw - 24px); right:12px; left:12px; bottom:74px; }
}

/* ============================================================
   14. BAĞLAM MENÜSÜ
   ============================================================ */

#lumout-ctx-menu {
    position: fixed; z-index: 99999; background: rgba(10,10,10,.98);
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px 0; min-width: 244px;
    box-shadow: 0 12px 44px rgba(0,0,0,.82); display: none; backdrop-filter: blur(16px);
}
.lumout-ctx-item { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; color: rgba(255,255,255,.88); padding: 10px 18px; cursor: pointer; font-size: 13px; text-align: left; transition: background .1s; }
.lumout-ctx-item svg   { stroke: currentColor; flex-shrink: 0; }
.lumout-ctx-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.lumout-ctx-item.active { color: hsl(var(--base, 210 100% 65%)); }
.lumout-ctx-divider { height: 1px; background: rgba(255,255,255,.09); margin: 4px 0; }

/* ============================================================
   15. İSTATİSTİK MODAL
   ============================================================ */

#lumout-stats-modal {
    display: none; position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,.8); align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.lumout-stats-box { background: #1c1c1c; border-radius: 14px; padding: 28px; min-width: 320px; max-width: 440px; color: #fff; position: relative; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.lumout-stats-box h4 { margin-bottom: 18px !important; font-size: 17px; font-weight: 700; }
.lumout-stats-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; color: rgba(255,255,255,.8); }
.lumout-stats-row:last-child { border-bottom: none; }
#lumout-stats-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 22px; line-height: 1; transition: color .15s; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
#lumout-stats-close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ============================================================
   16. GERİ BİLDİRİM
   ============================================================ */

#lumout-speed-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,.82); color: #fff; font-size: 24px; font-weight: 700; padding: 12px 24px; border-radius: 10px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 20; backdrop-filter: blur(4px); }
#lumout-speed-badge.show { opacity: 1; }

.lumout-seek-feedback { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.7); color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 20; display: flex; align-items: center; }
.lumout-seek-feedback.show { opacity: 1; }
#lumout-seek-left  { left: 10%; }
#lumout-seek-right { right: 10%; }

#lumout-speed-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,.82); color: #fff; font-size: 20px; font-weight: 700; padding: 10px 22px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 20; }
#lumout-speed-toast.show { opacity: 1; }

/* ============================================================
   17. MOBİL HINT
   ============================================================ */

#lumout-mobile-hint { display: none; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: rgba(255,255,255,.85); font-size: 12px; padding: 6px 14px; border-radius: 20px; pointer-events: none; z-index: 15; white-space: nowrap; }
@media (max-width: 768px) { #lumout-mobile-hint.show { display: block; } }

/* ============================================================
   18. PREMİUM KİLİT
   ============================================================ */

.premium-stock { position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,.78); display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(6px); gap: 4px; }
.premium-stock-lock { color: rgba(255,255,255,.55); margin-bottom: 10px; }
.premium-stock-inner { text-align: center; color: #fff; }
.premium-stock-price { font-size: 32px; font-weight: 800; margin-bottom: 6px !important; }
.premium-stock-icon { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #f0a500; margin-bottom: 14px !important; font-weight: 600; }
.premium-stock-text { background: hsl(var(--base, 0 100% 45%)); color: #fff; padding: 11px 28px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; display: inline-block; }
.premium-stock-text:hover { opacity: .9; }

/* ============================================================
   19. WATERMARK / COPY TOAST
   ============================================================ */

.watermark { position: absolute; z-index: 4; pointer-events: none; }
.watermark a { display: block; }
.watermark img { max-width: 120px; opacity: .55; }

.lumout-copy-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(25,25,25,.96); color: #fff; font-size: 13px; padding: 10px 22px; border-radius: 22px; z-index: 999999; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; border: 1px solid rgba(255,255,255,.12); }
.lumout-copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   20. LIGHT TEMA
   ============================================================ */

[data-theme="light"] .primary__videoPlayer { background: #000; }
[data-theme="light"] .play-body { background: #f9f9f9 !important; }
[data-theme="light"] .primary__details { background-color: #f9f9f9 !important; color: #0f0f0f !important; }
[data-theme="light"] .video-actions { border-bottom-color: rgba(0,0,0,.08); }
[data-theme="light"] .lumout-cat-chips { border-color: rgba(0,0,0,.08); }

/* ── Light tema skip butonu ── */
[data-theme="light"] .lumout-ad-skip-btn {
    background: rgba(255,255,255,.85);
    border-color: rgba(0,0,0,.2);
    color: rgba(0,0,0,.7);
}
[data-theme="light"] .lumout-ad-skip-countdown {
    background: rgba(240,240,240,.9);
    color: rgba(0,0,0,.5);
    border-right-color: rgba(0,0,0,.12);
}
[data-theme="light"] .lumout-ad-skip-lock svg { fill: rgba(0,0,0,.4) !important; }
[data-theme="light"] .lumout-ad-skip-text {
    background: rgba(230,230,230,.85);
    color: rgba(0,0,0,.7);
}
[data-theme="light"] .lumout-ad-skip-btn.ready {
    border-color: rgba(0,0,0,.4);
    background: rgba(245,245,245,.98);
}
[data-theme="light"] .lumout-ad-skip-btn.ready .lumout-ad-skip-countdown,
[data-theme="light"] .lumout-ad-skip-btn.ready .lumout-ad-skip-text {
    background: rgba(220,220,220,.95);
    color: #000;
}

/* ============================================================
   21. AYARLAR PANELİ
   ============================================================ */

.lumout-settings-panel { display: none; position: fixed; width: 300px; background: rgba(28,28,28,.98); border-radius: 12px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 32px rgba(0,0,0,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 99990; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,.9); overflow: visible; }
.lumout-settings-panel.open { display: block; }

.lsp-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; cursor: default; transition: background .12s; min-height: 48px; }
.lsp-item--arrow { cursor: pointer; }
.lsp-item:hover { background: rgba(255,255,255,.07); }
.lsp-item-icon { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); flex-shrink: 0; width: 20px; }
.lsp-item-icon svg { stroke: currentColor; }
.lsp-item-label { flex: 1; font-size: 14px; color: rgba(255,255,255,.9); font-weight: 400; white-space: nowrap; }
.lsp-item-value { font-size: 13px; color: rgba(255,255,255,.5); white-space: nowrap; margin-left: 4px; flex-shrink: 0; }
.lsp-item-arrow { display: flex; align-items: center; color: rgba(255,255,255,.4); flex-shrink: 0; margin-left: 4px; }
.lsp-item-arrow svg { stroke: currentColor; }
.lsp-item--arrow:hover .lsp-item-arrow { color: rgba(255,255,255,.8); }
.lsp-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }

.lsp-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; margin-left: auto; }
.lsp-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.lsp-toggle-slider { position: absolute; inset: 0; background: rgba(255,255,255,.2); border-radius: 24px; transition: background .2s; }
.lsp-toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.lsp-toggle input:checked + .lsp-toggle-slider { background: #3ea6ff; }
.lsp-toggle input:checked + .lsp-toggle-slider::before { transform: translateX(20px); }

.lsp-subpanel { display: none; position: fixed; width: 300px; background: rgba(28,28,28,.98); border-radius: 12px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 32px rgba(0,0,0,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 99991; overflow-y: auto; max-height: 400px; }
.lsp-subpanel.open { display: block; }

.lsp-subpanel-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.lsp-subpanel-back { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; transition: color .15s, background .15s; flex-shrink: 0; }
.lsp-subpanel-back:hover { color: #fff; background: rgba(255,255,255,.1); }
.lsp-subpanel-back svg { stroke: currentColor; }
.lsp-subpanel-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); }
.lsp-subpanel-list { padding: 6px 0; }
.lsp-option-item { display: flex; align-items: center; gap: 10px; padding: 11px 18px; font-size: 14px; color: rgba(255,255,255,.85); cursor: pointer; transition: background .12s; }
.lsp-option-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.lsp-option-item.active { color: #fff; font-weight: 600; }
.lsp-option-item.active::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ea6ff; flex-shrink: 0; }
.lsp-option-item:not(.active)::before { content: ""; display: inline-block; width: 8px; height: 8px; flex-shrink: 0; }

#lumout-sleep-overlay { display: none; position: fixed; inset: 0; z-index: 99997; background: rgba(0,0,0,.9); align-items: center; justify-content: center; flex-direction: column; gap: 20px; backdrop-filter: blur(8px); }
.lumout-sleep-overlay-text { color: #fff; font-size: 18px; font-weight: 600; text-align: center; }
.lumout-sleep-overlay-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 28px; border-radius: 24px; cursor: pointer; transition: background .15s; }
.lumout-sleep-overlay-btn:hover { background: rgba(255,255,255,.2); }

[data-theme="light"] .lumout-settings-panel, [data-theme="light"] .lsp-subpanel { background: rgba(245,245,245,.98); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .lsp-item-label { color: #0f0f0f; }
[data-theme="light"] .lsp-item-value { color: #606060; }
[data-theme="light"] .lsp-divider { background: rgba(0,0,0,.08); }
[data-theme="light"] .lsp-option-item { color: #0f0f0f; }
[data-theme="light"] .lsp-subpanel-title { color: #0f0f0f; }