/* ── SecureVault — Premium Mobile-First Viewer ───────────────────────────── */

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.sv-viewer-wrap {
    /* Light Theme tokens */
    --sv-bg:           #ffffff;
    --sv-surface:      #f8fafc;
    --sv-toolbar-bg:   rgba(255,255,255,0.92);
    --sv-text:         #1e293b;
    --sv-text-muted:   #64748b;
    --sv-accent:       #6366f1;
    --sv-accent2:      #4f46e5;
    --sv-border:       #e2e8f0;
    --sv-canvas-bg:    #f1f5f9;
    --sv-btn-bg:       #f1f5f9;
    --sv-btn-hover:    #e2e8f0;
    --sv-shadow-sm:    0 1px 4px rgba(0,0,0,0.08);
    --sv-shadow-md:    0 4px 20px rgba(0,0,0,0.10);
    --sv-shadow-lg:    0 12px 40px rgba(0,0,0,0.12);
    --sv-radius:       14px;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: 1rem auto;
    background: var(--sv-bg);
    border-radius: var(--sv-radius);
    border: 1px solid var(--sv-border);
    box-shadow: var(--sv-shadow-lg);
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* ── Dark Theme ────────────────────────────────────────────────────────────── */
.sv-viewer-wrap.sv-theme-dark {
    --sv-bg:          #0f172a;
    --sv-surface:     #1e293b;
    --sv-toolbar-bg:  rgba(15,23,42,0.94);
    --sv-text:        #f1f5f9;
    --sv-text-muted:  #94a3b8;
    --sv-accent:      #818cf8;
    --sv-accent2:     #a5b4fc;
    --sv-border:      #334155;
    --sv-canvas-bg:   #020617;
    --sv-btn-bg:      #1e293b;
    --sv-btn-hover:   #334155;
    --sv-shadow-lg:   0 20px 50px rgba(0,0,0,0.65);
}

/* Block text selection everywhere inside viewer */
.sv-viewer-wrap, .sv-viewer-wrap * {
    -webkit-user-select: none !important;
    -moz-user-select:    none !important;
    -ms-user-select:     none !important;
    user-select:         none !important;
    -webkit-user-drag:   none !important;
}

/* Print: hide viewer */
@media print {
    .sv-viewer-wrap, body > * { display: none !important; }
}

/* ── Fullscreen (native) ───────────────────────────────────────────────────  */
.sv-viewer-wrap:fullscreen,
.sv-viewer-wrap:-webkit-full-screen {
    max-width:      none;
    width:          100vw;
    height:         100vh;
    border-radius:  0;
    margin:         0;
    border:         none;
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
}
.sv-viewer-wrap:fullscreen .sv-canvas-container,
.sv-viewer-wrap:-webkit-full-screen .sv-canvas-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}

/* ── Fake fullscreen for iOS / browsers that block Fullscreen API ──────────  */
.sv-viewer-wrap.sv-fullscreen-active {
    position:       fixed !important;
    top:            0 !important;
    left:           0 !important;
    right:          0 !important;
    bottom:         0 !important;
    width:          100vw !important;
    height:         100vh !important;
    max-width:      none !important;
    margin:         0 !important;
    border-radius:  0 !important;
    border:         none !important;
    z-index:        999999 !important;
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
}
.sv-viewer-wrap.sv-fullscreen-active .sv-canvas-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}

/* ── Preview Banner ─────────────────────────────────────────────────────────  */
.sv-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(90deg, var(--sv-accent), var(--sv-accent2));
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    flex-wrap: wrap;
}
.sv-preview-banner .sv-btn {
    flex-shrink: 0;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.45);
    padding: 6px 14px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.sv-preview-banner .sv-btn:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.sv-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--sv-toolbar-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sv-border);
    color: var(--sv-text);
    gap: 6px;
}
.sv-material-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--sv-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sv-toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.sv-btn-tool {
    background: var(--sv-btn-bg);
    color: var(--sv-text-muted);
    border: 1px solid var(--sv-border);
    border-radius: 8px;
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.18s ease;
    flex-shrink: 0;
}
.sv-btn-tool:hover { color:var(--sv-text); background:var(--sv-bg2); }
.sv-tool-lbl { font-size:12.5px; font-weight:600; font-family:'Inter', sans-serif; margin-left:6px; letter-spacing:0.2px; }
@media (max-width: 768px) { .sv-tool-lbl { display:none; } }
.sv-btn-tool:hover, .sv-btn-tool:focus {
    background: var(--sv-btn-hover);
    color: var(--sv-accent);
    border-color: var(--sv-accent);
    outline: none;
}
.sv-page-info {
    color: var(--sv-text-muted);
    font-size: 12px;
    font-weight: 500;
    min-width: 70px;
    text-align: center;
    white-space: nowrap;
}

/* ── Canvas Area ─────────────────────────────────────────────────────────── */
.sv-canvas-container {
    position: relative;
    background: var(--sv-canvas-bg);
    display: block; /* use block + margin auto on child, flex center clips overflow */
    text-align: center;
    padding: 12px 12px;
    min-height: 480px;
    overflow: auto; /* crucial for zooming */
    transition: background 0.3s;
    perspective: 1200px;
    -webkit-overflow-scrolling: touch;
}
.sv-canvas {
    display: block;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    border-radius: 3px;
    max-width: none;
    margin: 0 auto;
}
.sv-theme-dark .sv-canvas {
    box-shadow: 0 8px 32px rgba(0,0,0,0.65);
}
.sv-watermark-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

/* ── Cover Splash (blur bg while loading) ───────────────────────────────── */
.sv-cover-splash {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(0.45);
    transform: scale(1.12);
    transition: opacity 0.55s ease;
    z-index: 1;
    pointer-events: none;
}
.sv-cover-splash.sv-fade-out { opacity: 0; }

/* ── Spinner / Loading ──────────────────────────────────────────────────── */
.sv-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--sv-bg);
    color: var(--sv-accent);
    gap: 14px;
    font-size: 15px;
    font-weight: 500;
    z-index: 10;
}
.sv-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--sv-border);
    border-top-color: var(--sv-accent);
    border-radius: 50%;
    animation: sv-spin 0.75s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* ── Page flip animations ─────────────────────────────────────────── */
@keyframes sv-flip-next {
    0%   { opacity: 1; transform: translateX(0) scaleX(1); }
    35%  { opacity: 0; transform: translateX(-30px) scaleX(0.94); }
    65%  { opacity: 0; transform: translateX(20px) scaleX(0.96); }
    100% { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes sv-flip-prev {
    0%   { opacity: 1; transform: translateX(0) scaleX(1); }
    35%  { opacity: 0; transform: translateX(30px) scaleX(0.94); }
    65%  { opacity: 0; transform: translateX(-20px) scaleX(0.96); }
    100% { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes sv-swipe-hint {
    0%   { transform: translateX(0); opacity: 0.5; }
    40%  { transform: translateX(-18px); opacity: 1; }
    100% { transform: translateX(0); opacity: 0; }
}
/* Canvas wrapper – must be block-level so CSS animations work
   (display:contents cannot be animated) */
.js-sv-canvas-wrap {
    display: block;
    width: fit-content;
    margin: 0 auto;
}
.js-sv-canvas-wrap.sv-anim-next {
    animation: sv-flip-next 0.38s ease-in-out;
    transform-origin: center center;
}
.js-sv-canvas-wrap.sv-anim-prev {
    animation: sv-flip-prev 0.38s ease-in-out;
    transform-origin: center center;
}
/* Swipe hint — shown on first open, fades out */
.sv-swipe-hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    pointer-events: none;
    white-space: nowrap;
    animation: sv-swipe-hint 2.4s ease 0.8s forwards;
    z-index: 15;
}

/* ── Notices ─────────────────────────────────────────────────────────────── */
.sv-notice {
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    animation: sv-slide-dn 0.25s ease;
    position: relative;
    z-index: 30;
}
@keyframes sv-slide-dn { from { opacity:0; transform:translateY(-6px);} to { opacity:1; transform:none;} }
.sv-notice-warn  { background:#fffbe6; color:#b45309; border:1px solid #fef08a; }
.sv-notice-error { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.sv-notice-info  { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.sv-theme-dark .sv-notice-warn  { background:#451a03; color:#fde047; border-color:#713f12; }
.sv-theme-dark .sv-notice-error { background:#450a0a; color:#fca5a5; border-color:#7f1d1d; }
.sv-theme-dark .sv-notice-info  { background:#1e3a8a; color:#bfdbfe; border-color:#1e40af; }
.sv-notice button { background:none; border:none; color:inherit; cursor:pointer; font-size:18px; opacity:0.6; }
.sv-notice button:hover { opacity:1; }

/* ── Preview gate (end of preview) ─────────────────────────────────────── */
.sv-preview-gate {
    text-align: center;
    padding: 60px 24px;
    background: var(--sv-bg);
    color: var(--sv-text-muted);
}
.sv-preview-gate .sv-cover-img {
    display: block;
    max-width: 180px;
    margin: 0 auto 24px;
    border-radius: 8px;
    box-shadow: var(--sv-shadow-md);
}
.sv-preview-gate .sv-lock { font-size: 48px; display:block; margin-bottom: 18px; opacity: 0.75; }
.sv-preview-gate p { font-size: 16px; margin: 10px 0; color: var(--sv-text); }
.sv-preview-gate .sv-btn {
    display: inline-block;
    margin-top: 24px;
    padding: 13px 36px;
    background: linear-gradient(135deg, var(--sv-accent), var(--sv-accent2));
    color: #fff;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.25s ease;
    box-shadow: 0 6px 20px rgba(99,102,241,0.35);
}
.sv-preview-gate .sv-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(99,102,241,0.5); }

/* ── Access gate (login required / no license) ─────────────────────────── */
.sv-gate {
    text-align: center;
    padding: 70px 32px;
    background: var(--sv-bg);
    border-radius: var(--sv-radius);
    color: var(--sv-text-muted);
    box-shadow: var(--sv-shadow-md);
    border: 1px solid var(--sv-border);
    max-width: 600px;
    margin: 40px auto;
}
.sv-gate .sv-cover-img { display:block; max-width:200px; margin:0 auto 28px; border-radius:10px; box-shadow:var(--sv-shadow-md); }
.sv-gate .sv-lock { font-size:52px; display:block; margin-bottom:20px; opacity:0.8; }
.sv-gate p { font-size:16px; margin:10px 0; color:var(--sv-text); }
.sv-gate .sv-btn {
    display:inline-block; margin-top:28px; padding:13px 36px;
    background: linear-gradient(135deg, var(--sv-accent), var(--sv-accent2));
    color:#fff; border-radius:40px; text-decoration:none; font-weight:700; font-size:15px;
    transition: all 0.25s ease; box-shadow: 0 6px 20px rgba(99,102,241,0.35);
}
.sv-gate .sv-btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(99,102,241,0.5); }

/* ── Responsive – Mobile First ─────────────────────────────────────────── */
/* Extra-tight on small phones: maximize the book */
@media (max-width: 600px) {
    .sv-viewer-wrap {
        margin: 0 !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
        /* Break out of any theme container padding */
        width: 100vw;
        max-width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    .sv-toolbar { padding: 6px 8px; gap: 3px; }
    .sv-material-title { font-size: 12px; }
    .sv-btn-tool { width: 28px; height: 28px; font-size: 12px; border-radius: 6px; }
    .sv-page-info { font-size: 11px; min-width: 52px; }
    .sv-canvas-container { padding: 0 !important; }  /* zero padding - full width book */
    .sv-preview-banner { font-size: 12px; padding: 8px 10px; gap: 6px; }
    .sv-preview-banner .sv-btn { padding: 5px 11px; font-size: 11px; }
}
/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
    .sv-canvas-container { padding: 8px 2px; }
}
/* Toolbar wraps gracefully when very narrow */
@media (max-width: 380px) {
    .sv-toolbar { flex-wrap: nowrap; overflow-x: auto; }
    .sv-material-title { display: none; }
}

/* ── Admin dashboard ─────────────────────────────────────────────────────── */
.sv-admin-wrap { max-width: 900px; padding: 20px 0; }
.sv-admin-wrap h1 { color: #1e293b; margin-bottom: 24px; font-weight: 700; }
.sv-stat-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.sv-stat-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 22px 26px; flex: 1; min-width: 150px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sv-stat-card .sv-stat-value { font-size: 34px; font-weight: 700; color: #4f46e5; margin-bottom: 4px; }
.sv-stat-card .sv-stat-label { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.sv-group-dashboard { max-width: 800px; margin: 2rem auto; padding: 28px; background: #fff; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.sv-seat-list { width: 100%; border-collapse: collapse; margin-top: 20px; }
.sv-seat-list th { background: #f8fafc; color: #475569; padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.sv-seat-list td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; font-size: 13px; color: #334155; }
.sv-seat-list tr:hover td { background: #f8fafc; }
.sv-badge-active  { background:#dcfce7; color:#166534; padding:3px 9px; border-radius:12px; font-size:11px; font-weight:700; }
.sv-badge-invited { background:#fef9c3; color:#854d0e; padding:3px 9px; border-radius:12px; font-size:11px; font-weight:700; }
.sv-badge-revoked { background:#fee2e2; color:#991b1b; padding:3px 9px; border-radius:12px; font-size:11px; font-weight:700; }

/* ── Premium Glassmorphism Gate ─────────────────────────────────────────── */
.sv-premium-gate-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
    padding: 2rem;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.06), transparent 50%),
                radial-gradient(circle at bottom left, rgba(79, 70, 229, 0.06), transparent 50%);
    font-family: 'Inter', sans-serif;
}
.sv-gate-glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 28px;
    padding: 3.5rem 2.8rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    animation: sv-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-gate-glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}
.sv-theme-dark .sv-gate-glass-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.sv-gate-header {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.sv-gate-icon {
    font-size: 48px;
    filter: drop-shadow(0 10px 15px rgba(99, 102, 241, 0.25));
    animation: sv-float 4s ease-in-out infinite;
}
.sv-gate-badge {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    padding: 6px 16px;
    border-radius: 24px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.sv-theme-dark .sv-gate-title { color: #f8fafc; }
.sv-gate-title {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin: 1.5rem 0 0.75rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
}
.sv-theme-dark .sv-gate-desc { color: #94a3b8; }
.sv-gate-desc {
    font-size: 15.5px;
    color: #475569;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}
.sv-gate-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #ffffff !important;
    padding: 16px 24px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 16.5px;
    text-decoration: none;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-theme-dark .sv-gate-btn-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 12px 25px -5px rgba(99, 102, 241, 0.4); }
.sv-gate-btn-primary:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 18px 30px -5px rgba(15, 23, 42, 0.4);
}
.sv-theme-dark .sv-gate-btn-primary:hover { box-shadow: 0 18px 30px -5px rgba(99, 102, 241, 0.5); }
.sv-btn-icon {
    font-size: 18px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.sv-theme-dark .sv-gate-footer { color: #64748b; }
.sv-gate-footer {
    margin-top: 2rem;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}
.sv-gate-footer a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s;
}
.sv-gate-footer a:hover { color: #4338ca; text-decoration: underline; }
.sv-gate-glass-card .sv-cover-img {
    max-width: 140px;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.25);
    display: block;
    transition: transform 0.3s;
}
.sv-gate-glass-card:hover .sv-cover-img { transform: translateY(-4px) scale(1.02); }

@keyframes sv-fade-up {
    0% { opacity: 0; transform: translateY(30px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sv-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ── Audio Player UI ─────────────────────────────────────────────────────── */
.sv-audio-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 480px;
    padding: 40px;
    background: var(--sv-canvas-bg);
}
.sv-audio-cover {
    width: 240px;
    height: 240px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    border: 1px solid var(--sv-border);
}
.sv-audio-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 600px;
    background: var(--sv-toolbar-bg);
    padding: 20px 24px;
    border-radius: 100px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid var(--sv-border);
}
.sv-audio-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    padding: 0;
    flex-shrink: 0;
}
.sv-audio-time {
    font-size: 13px;
    font-family: monospace;
    font-weight: 600;
    color: var(--sv-text-muted);
    min-width: 45px;
    text-align: center;
}
.sv-audio-progress-wrap {
    flex: 1;
    height: 8px;
    background: var(--sv-bg2);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.sv-audio-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--sv-accent);
    border-radius: 4px;
    pointer-events: none;
    transition: width 0.1s linear;
}

/* ── Audio Chapters ──────────────────────────────────────────────────────── */
.sv-chapters-container {
    width: 100%;
    max-width: 600px;
    margin-top: 24px;
    display: none; /* Flex when active */
    flex-direction: column;
    background: var(--sv-toolbar-bg);
    border: 1px solid var(--sv-border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    overflow: hidden;
    padding: 8px 0;
}
.sv-chapters-header {
    padding: 8px 20px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sv-text-muted);
    border-bottom: 1px solid var(--sv-border);
    margin-bottom: 8px;
}
.sv-chapter-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.sv-chapter-row:hover {
    background: var(--sv-bg2);
}
.sv-chapter-active {
    background: rgba(var(--sv-accent-rgb), 0.08); /* Requires an rgb var if possible, else solid fallback */
    background: var(--sv-bg2);
    border-left-color: var(--sv-accent);
}
.sv-chapter-active .sv-chapter-title {
    color: var(--sv-accent);
    font-weight: 600;
}
.sv-chapter-time {
    font-family: monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--sv-text-muted);
    width: 60px;
    flex-shrink: 0;
}
.sv-chapter-title {
    font-size: 14.5px;
    color: var(--sv-text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media(max-width: 600px) {
    .sv-audio-cover { width: 180px; height: 180px; margin-bottom: 24px; }
    .sv-audio-controls { flex-wrap: wrap; border-radius: 16px; padding: 16px; justify-content: center; }
    .sv-audio-progress-wrap { min-width: 100%; order: 10; margin-top: 8px; }
    .sv-audio-time.js-sv-audio-curr { order: 11; width:50%; text-align:left; margin-top:4px; }
    .sv-audio-time.js-sv-audio-total { order: 12; width:50%; text-align:right; margin-top:4px; }
}

/* ── First-time Help Tour ──────────────────────────────────────────────────── */
.sv-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
}
.sv-tour-spotlight {
    position: fixed;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.62);
    transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
    pointer-events: none;
    z-index: 100001;
    outline: 2.5px solid rgba(99,102,241,0.9);
    outline-offset: 3px;
}
.sv-tour-tip {
    position: fixed;
    z-index: 100002;
    background: #fff;
    border-radius: 16px;
    padding: 20px 22px 16px;
    max-width: 300px;
    min-width: 220px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
    pointer-events: all;
    animation: sv-tour-pop 0.25s cubic-bezier(0.16,1,0.3,1);
    font-family: 'Inter', system-ui, sans-serif;
    color: #1e293b;
}
@keyframes sv-tour-pop {
    from { opacity:0; transform: scale(0.9) translateY(8px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}
.sv-tour-step-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 6px;
}
.sv-tour-tip h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.sv-tour-tip p {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
}
.sv-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sv-tour-btn-next {
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.sv-tour-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.45); }
.sv-tour-btn-skip {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 0;
    text-decoration: underline;
    transition: color 0.15s;
}
.sv-tour-btn-skip:hover { color: #64748b; }
.sv-tour-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 16px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.sv-tour-close:hover { color: #1e293b; background: #f1f5f9; }
.sv-tour-dots { display:flex; gap:5px; align-items:center; }
.sv-tour-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: background 0.2s, transform 0.2s;
}
.sv-tour-dot.active { background: #6366f1; transform: scale(1.3); }
@media (max-width: 600px) {
    .sv-tour-tip {
        max-width: calc(100vw - 32px);
        min-width: 0;
        left: 16px !important;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
    }
}