/* ========================================
   VideoHost — Multi-Theme & Unique Login UI
   ======================================== */

/* ---- CSS Themes & Design Tokens ---- */
:root,
html[data-theme="cinematic"] {
    /* 1. Cinematic Gold & Obsidian (Default) */
    --bg-deep: #060609;
    --bg-primary: #0a0a10;
    --bg-card: rgba(16, 16, 26, 0.78);
    --bg-card-hover: rgba(26, 26, 42, 0.9);
    --bg-elevated: #151522;
    --bg-input: rgba(12, 12, 20, 0.85);

    --accent-gold: #e5b85a;
    --accent-gold-bright: #f5cf7b;
    --accent-gold-dim: #b88d3e;
    --accent-gold-glow: rgba(229, 184, 90, 0.18);
    --accent-gold-glow-strong: rgba(229, 184, 90, 0.38);
    --accent-warm: #c48b3b;

    --text-primary: #f0ecf6;
    --text-secondary: #9a94a6;
    --text-muted: #625c70;

    --danger: #e05252;
    --success: #34d399;

    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-accent: rgba(229, 184, 90, 0.25);
    --border-glass: rgba(255, 255, 255, 0.12);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 40px rgba(229, 184, 90, 0.15);

    --font-display: 'Bahnschrift', 'Aptos Display', 'Trebuchet MS', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
    --font-body: 'Aptos', 'Segoe UI', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', Tahoma, sans-serif;
    --font-accent: Georgia, 'Times New Roman', serif;
    --font-emoji: 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', 'Android Emoji', sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Cyberpunk Neon Theme */
html[data-theme="cyberpunk"] {
    --bg-deep: #05050d;
    --bg-primary: #090916;
    --bg-card: rgba(18, 14, 34, 0.82);
    --bg-card-hover: rgba(28, 20, 52, 0.92);
    --bg-elevated: #16102a;
    --bg-input: rgba(10, 8, 20, 0.9);

    --accent-gold: #00f0ff;
    --accent-gold-bright: #38bdf8;
    --accent-gold-dim: #0284c7;
    --accent-gold-glow: rgba(0, 240, 255, 0.22);
    --accent-gold-glow-strong: rgba(0, 240, 255, 0.45);
    --accent-warm: #ff007f;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-subtle: rgba(0, 240, 255, 0.1);
    --border-accent: rgba(0, 240, 255, 0.35);
    --shadow-glow: 0 0 40px rgba(0, 240, 255, 0.2);
}

/* 3. Emerald Luxury Theme */
html[data-theme="emerald"] {
    --bg-deep: #030806;
    --bg-primary: #06120b;
    --bg-card: rgba(10, 26, 18, 0.82);
    --bg-card-hover: rgba(16, 40, 28, 0.92);
    --bg-elevated: #0f2419;
    --bg-input: rgba(6, 16, 11, 0.9);

    --accent-gold: #10b981;
    --accent-gold-bright: #34d399;
    --accent-gold-dim: #059669;
    --accent-gold-glow: rgba(16, 185, 129, 0.22);
    --accent-gold-glow-strong: rgba(16, 185, 129, 0.45);
    --accent-warm: #fbbf24;

    --text-primary: #ecfdf5;
    --text-secondary: #93c5fd;
    --text-muted: #475569;

    --border-subtle: rgba(16, 185, 129, 0.1);
    --border-accent: rgba(16, 185, 129, 0.35);
    --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.2);
}

/* 4. Sunset Velvet Theme (Luxe Rose Noir & Romantic Sunset Glow) */
html[data-theme="sunset"] {
    --bg-deep: #0c040a;
    --bg-primary: #150713;
    --bg-card: rgba(28, 11, 25, 0.84);
    --bg-card-hover: rgba(44, 16, 38, 0.94);
    --bg-elevated: #240c21;
    --bg-input: rgba(18, 7, 16, 0.88);

    --accent-gold: #f43f5e;
    --accent-gold-bright: #fb7185;
    --accent-gold-dim: #be123c;
    --accent-gold-glow: rgba(244, 63, 94, 0.22);
    --accent-gold-glow-strong: rgba(244, 63, 94, 0.45);
    --accent-warm: #fb923c;

    --text-primary: #fff1f3;
    --text-secondary: #fda4af;
    --text-muted: #9f7d8e;

    --border-subtle: rgba(244, 63, 94, 0.12);
    --border-accent: rgba(244, 63, 94, 0.34);
    --border-glass: rgba(255, 255, 255, 0.14);

    --shadow-sm: 0 2px 10px rgba(12, 4, 10, 0.4);
    --shadow-md: 0 8px 30px rgba(12, 4, 10, 0.6);
    --shadow-lg: 0 18px 55px rgba(12, 4, 10, 0.85);
    --shadow-glow: 0 0 45px rgba(244, 63, 94, 0.24);
}

/* Ambient velvet gradient aura for Sunset Velvet */
html[data-theme="sunset"] body {
    background:
        radial-gradient(ellipse 65% 42% at 85% 0%, rgba(244, 63, 94, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 50% 35% at 10% 25%, rgba(251, 146, 60, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 45% at 50% 100%, rgba(190, 18, 60, 0.06) 0%, transparent 70%),
        var(--bg-deep);
    background-attachment: fixed;
}

/* ---- Reset & Base (Android Mobile First) ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--bg-deep);
    min-height: 100vh;
    min-height: 100dvh;
}

body {
    font-family: var(--font-body);
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    padding-bottom: env(safe-area-inset-bottom);
    transition: background 0.4s ease, color 0.4s ease;
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

button:active {
    transform: scale(0.96);
}

input, textarea, select {
    font-family: inherit;
    color: inherit;
    font-size: 16px; /* Android Chrome auto-zoom prevention */
}

/* ---- Android Native Route Progress Indicator ---- */
.android-top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-bright), var(--accent-warm));
    box-shadow: 0 0 10px var(--accent-gold-glow-strong), 0 0 4px var(--accent-gold);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: width 0.25s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.3s ease;
}

.android-top-progress-bar.is-loading {
    opacity: 1;
}

.android-top-progress-bar.is-finished {
    width: 100% !important;
    opacity: 0;
}

/* ---- Ambient Background Effects (GPU Accelerated) ---- */
.ambient-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.35;
    transition: background 0.5s ease;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.orb-1 {
    width: min(500px, 90vw);
    height: min(500px, 90vw);
    background: radial-gradient(circle, var(--accent-gold-glow-strong) 0%, transparent 70%);
    top: -100px;
    left: -100px;
}

.orb-2 {
    width: min(400px, 80vw);
    height: min(400px, 80vw);
    background: radial-gradient(circle, rgba(196, 139, 59, 0.12) 0%, transparent 70%);
    bottom: -100px;
    right: -80px;
}



/* ========================================
   UNIQUE LOGIN PAGE DESIGN
   ======================================== */
.login-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 24px;
}

.login-top-bar {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 10;
}

.theme-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    border-radius: 100px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent-gold-bright);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.3s var(--ease-out);
    box-shadow: var(--shadow-sm);
}

.theme-switcher-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--accent-gold-glow-strong);
    background: var(--bg-card-hover);
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 48px 40px;
    background: linear-gradient(145deg, var(--bg-card), var(--bg-primary));
    border: 1.5px solid var(--border-accent);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    animation: card-enter 0.6s var(--ease-out) both;
}

/* Static gradient border on login card */
.login-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-xl) + 2px);
    background: linear-gradient(135deg, var(--accent-gold-dim), transparent 40%, transparent 60%, var(--accent-gold-dim));
    z-index: -1;
    opacity: 0.35;
}

@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 34px;
}

.vault-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--accent-gold-glow);
    border: 1px solid var(--border-accent);
    border-radius: 100px;
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent-gold-bright);
    margin-bottom: 22px;
    font-family: var(--font-display);
}

/* Aperture Spinning Logo */
.aperture-logo {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aperture-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed var(--accent-gold);
    opacity: 0.4;
}

.logo-icon-inner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold-bright), var(--accent-warm));
    color: #08080c;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px var(--accent-gold-glow-strong);
    transition: transform 0.4s var(--ease-spring);
}

.login-card:hover .logo-icon-inner {
    transform: scale(1.08) rotate(-6deg);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.04em;
}

.logo-text span {
    background: linear-gradient(135deg, var(--accent-gold-bright), var(--accent-warm));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-tagline {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    font-family: var(--font-accent);
    font-style: italic;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(224, 82, 82, 0.12);
    border: 1px solid rgba(224, 82, 82, 0.3);
    border-radius: var(--radius-md);
    color: #fca5a5;
    font-size: 0.92rem;
    margin-bottom: 26px;
    animation: shake 0.5s ease-in-out;
}

.login-error svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 18px;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.3s ease;
}

.input-wrapper input {
    width: 100%;
    padding: 16px 54px 16px 50px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.3s var(--ease-out);
    outline: none;
    min-height: 50px;
}

.input-wrapper input::placeholder {
    color: var(--text-muted);
}

.input-wrapper input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 4px var(--accent-gold-glow), 0 4px 20px rgba(0, 0, 0, 0.4);
    background: var(--bg-card);
}

.input-wrapper input:focus ~ .input-icon,
.input-wrapper:has(input:focus) .input-icon {
    color: var(--accent-gold-bright);
}

.toggle-password {
    position: absolute;
    right: 14px;
    padding: 8px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.toggle-password:hover {
    color: var(--text-primary);
}

.toggle-password svg {
    width: 20px;
    height: 20px;
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    min-height: 54px;
    background: linear-gradient(135deg, var(--accent-gold-bright), var(--accent-warm));
    color: #08080c;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: var(--radius-md);
    transition: all 0.3s var(--ease-out);
    box-shadow: 0 6px 24px var(--accent-gold-glow-strong);
    position: relative;
    overflow: hidden;
}

/* Animated shine sweep on login button */
.login-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.login-btn:hover::after {
    left: 130%;
}

.login-btn:hover, .login-btn:focus {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px var(--accent-gold-glow-strong);
}

.login-btn:active {
    transform: scale(0.97);
}

.login-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s var(--ease-out);
}

.login-btn:hover svg {
    transform: translateX(8px);
}

.login-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

.login-footer p {
    font-size: 0.84rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    font-weight: 600;
}



/* ========================================
   THEME SELECTOR MODAL
   ======================================== */
.theme-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out);
    overscroll-behavior: contain;
}

.theme-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.theme-modal {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(145deg, var(--bg-card), var(--bg-primary));
    border: 1.5px solid var(--border-accent);
    border-radius: var(--radius-xl);
    padding: 36px;
    box-shadow: var(--shadow-lg), var(--shadow-glow), 0 0 80px var(--accent-gold-glow);
    transform: translateY(24px) scale(0.93);
    transition: transform 0.4s var(--ease-out);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.theme-modal::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-xl) + 1px);
    background: linear-gradient(135deg, var(--accent-gold-dim), transparent 50%, var(--accent-gold-dim));
    z-index: -1;
    opacity: 0.3;
}

.theme-modal-backdrop.active .theme-modal {
    transform: translateY(0) scale(1);
}

.theme-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.theme-modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
}

.theme-close-btn {
    font-size: 1.6rem;
    color: var(--text-muted);
    line-height: 1;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.theme-close-btn:hover {
    color: var(--text-primary);
}

/* ========================================
   AVATAR & PROFILE MODAL
   ======================================== */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.avatar-letter {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.badge-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bottom-nav-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-profile-trigger {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-profile-trigger:hover {
    transform: scale(1.04);
}

.profile-modal-card {
    max-width: 400px;
    text-align: center;
    padding: 30px 24px 28px 24px;
}

.profile-avatar-preview-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 16px auto;
}

.profile-avatar-big {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent-gold);
    box-shadow: 0 0 25px var(--accent-gold-glow);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
}

.avatar-upload-badge-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-gold);
    color: #08080c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.avatar-upload-badge-btn:hover {
    transform: scale(1.1);
    background: var(--accent-gold-bright);
}

.profile-user-info h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.profile-meta-text {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.4;
}

.btn-choose-avatar {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.92rem;
}

.profile-form-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.profile-form-actions .btn {
    flex: 1;
    justify-content: center;
}

.profile-remove-form {
    margin-top: 14px;
}

.btn-remove-avatar {
    width: 100%;
    justify-content: center;
    color: #f43f5e;
    border-color: rgba(244, 63, 94, 0.25);
    font-size: 0.85rem;
}

.btn-remove-avatar:hover {
    background: rgba(244, 63, 94, 0.12);
    border-color: #f43f5e;
    color: #fda4af;
}

.theme-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.theme-card-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    transition: all 0.3s var(--ease-out);
    position: relative;
    cursor: pointer;
}

.theme-card-option:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: var(--accent-gold);
    box-shadow: 0 8px 30px var(--accent-gold-glow), 0 0 30px var(--accent-gold-glow);
    background: var(--bg-card-hover);
}

.theme-card-option.is-active-theme {
    border-color: var(--accent-gold);
    background: var(--bg-card-hover);
    box-shadow: 0 0 24px var(--accent-gold-glow), inset 0 0 0 1.5px var(--accent-gold);
}

.theme-card-option .active-theme-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-bright));
    padding: 2px 8px;
    border-radius: 100px;
    box-shadow: 0 2px 8px var(--accent-gold-glow);
}

.theme-preview {
    width: 64px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 6px;
    transition: transform 0.3s var(--ease-out);
}

.theme-card-option:hover .theme-preview {
    transform: scale(1.08);
}

.preview-cinematic {
    background: #060609;
    border: 1px solid rgba(229, 184, 90, 0.4);
}
.preview-cinematic .dot-1 { background: #e5b85a; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(229, 184, 90, 0.6); }
.preview-cinematic .dot-2 { background: #c48b3b; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(196, 139, 59, 0.6); }

.preview-cyberpunk {
    background: #05050d;
    border: 1px solid rgba(0, 240, 255, 0.4);
}
.preview-cyberpunk .dot-1 { background: #00f0ff; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(0, 240, 255, 0.6); }
.preview-cyberpunk .dot-2 { background: #ff007f; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(255, 0, 127, 0.6); }

.preview-emerald {
    background: #030806;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.preview-emerald .dot-1 { background: #10b981; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
.preview-emerald .dot-2 { background: #fbbf24; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); }

.preview-sunset {
    background: linear-gradient(135deg, #0c040a 0%, #1c0819 100%);
    border: 1px solid rgba(244, 63, 94, 0.45);
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.2);
}
.preview-sunset .dot-1 { background: #f43f5e; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(244, 63, 94, 0.6); }
.preview-sunset .dot-2 { background: #fb923c; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(251, 146, 60, 0.6); }

/* ========================================
   NAVBAR & HEADER (PREMIUM FROSTED GLASS)
   ======================================== */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    background: rgba(8, 8, 14, 0.78);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ambient bottom accent line */
.navbar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-gold-glow) 15%,
        var(--accent-gold-bright) 50%,
        var(--accent-gold-glow) 85%,
        transparent 100%
    );
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* Scrolled dynamic state */
.navbar.is-scrolled {
    padding: 9px 28px;
    background: rgba(6, 6, 11, 0.92);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.navbar.is-scrolled::after {
    opacity: 0.9;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-form {
    margin: 0;
    display: inline-flex;
}

/* Brand Logo */
.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-decoration: none;
    transition: transform 0.25s var(--ease-out);
    position: relative;
    user-select: none;
}

.nav-logo:hover {
    transform: scale(1.02);
}

.logo-icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%),
                radial-gradient(circle at 30% 30%, var(--accent-gold-glow-strong), transparent 80%);
    border: 1px solid var(--border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold-bright);
    transition: all 0.4s var(--ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px var(--accent-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.logo-icon-wrapper svg {
    filter: drop-shadow(0 2px 6px var(--accent-gold-glow-strong));
    transition: transform 0.35s var(--ease-spring);
}

.logo-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.nav-logo:hover .logo-icon-wrapper {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 26px var(--accent-gold-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: var(--accent-gold-bright);
}

.nav-logo:hover .logo-icon-wrapper svg {
    transform: scale(1.1);
}

.nav-logo:hover .logo-shine {
    left: 140%;
}

.logo-text-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-main-text {
    display: inline-flex;
    align-items: center;
}

.logo-main-text em {
    background: linear-gradient(135deg, var(--accent-gold-bright) 0%, var(--accent-warm) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
    font-weight: 800;
}

.nav-brand-pill {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-gold-bright);
    border: 1px solid var(--border-accent);
    box-shadow: 0 0 10px var(--accent-gold-glow);
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

/* User Profile Capsule */
.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 100px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    user-select: none;
    transition: all 0.28s var(--ease-out);
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.user-badge:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-accent);
    transform: translateY(-1.5px);
    box-shadow: 0 6px 20px var(--accent-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.user-badge:active {
    transform: translateY(0) scale(0.98);
}

.badge-avatar-wrap {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.badge-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.88rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    transition: border-color 0.25s ease;
}

.badge-admin .badge-avatar {
    background: linear-gradient(135deg, var(--accent-gold-bright) 0%, var(--accent-warm) 100%);
    color: #06060a;
    border-color: var(--accent-gold-bright);
}

.badge-viewer .badge-avatar {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: #ffffff;
    border-color: #c084fc;
}

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

.badge-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--bg-deep);
    box-shadow: 0 0 8px #22c55e;
}

.badge-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    gap: 2px;
}

.user-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.badge-role {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1.5px 6px;
    border-radius: 100px;
    display: inline-flex;
    line-height: 1.2;
}

.badge-admin .badge-role {
    background: rgba(229, 184, 90, 0.18);
    color: var(--accent-gold-bright);
    border: 1px solid rgba(229, 184, 90, 0.35);
}

.badge-viewer .badge-role {
    background: rgba(168, 85, 247, 0.18);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.badge-chevron {
    color: var(--text-muted);
    transition: transform 0.25s var(--ease-spring), color 0.25s ease;
    margin-left: 2px;
    flex-shrink: 0;
}

.user-badge:hover .badge-chevron {
    color: var(--accent-gold-bright);
    transform: translateY(1.5px);
}

/* Theme Toggle Button */
.nav-theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--text-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s var(--ease-out);
    flex-shrink: 0;
}

.nav-theme-toggle svg {
    transition: transform 0.4s var(--ease-spring);
}

.nav-theme-toggle:hover {
    background: var(--accent-gold-glow);
    border-color: var(--border-accent);
    color: var(--accent-gold-bright);
    transform: scale(1.08);
    box-shadow: 0 0 18px var(--accent-gold-glow);
}

.nav-theme-toggle:hover svg {
    transform: rotate(45deg);
}

.nav-theme-toggle:active {
    transform: scale(0.95);
}

/* Nav Action Buttons */
.nav-right .btn-ghost {
    padding: 8px 15px;
    min-height: 40px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.25s var(--ease-out);
    gap: 8px;
}

.nav-right .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
    transform: translateY(-1.5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.nav-right .btn-ghost:active {
    transform: translateY(0) scale(0.97);
}

/* Back Navigation Button */
.btn-back-nav svg {
    transition: transform 0.25s var(--ease-spring);
}

.btn-back-nav:hover svg {
    transform: translateX(-3px);
}

/* Chat Navigation Button */
.nav-msg-btn {
    position: relative;
}

.nav-btn-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-msg-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 100px;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.7);
    animation: nav-badge-pulse 2s infinite;
}

@keyframes nav-badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(244, 63, 94, 0.6);
    }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 16px rgba(244, 63, 94, 0.9);
    }
}

/* Admin Button in Nav */
.nav-admin-btn:hover {
    border-color: var(--border-accent) !important;
    color: var(--accent-gold-bright) !important;
    box-shadow: 0 0 18px var(--accent-gold-glow) !important;
}

/* Upload Button in Nav */
.nav-right .btn-upload {
    padding: 8px 18px;
    min-height: 40px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--accent-gold-bright) 0%, var(--accent-warm) 100%);
    color: #06060a;
    font-weight: 700;
    box-shadow: 0 4px 18px var(--accent-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.3s var(--ease-out);
    gap: 8px;
}

.nav-right .btn-upload .upload-icon-svg {
    transition: transform 0.3s var(--ease-spring);
}

.nav-right .btn-upload:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 28px var(--accent-gold-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nav-right .btn-upload:hover .upload-icon-svg {
    transform: translateY(-2px);
}

.nav-right .btn-upload:active {
    transform: translateY(0) scale(0.97);
}

/* Logout Button */
.btn-nav-logout {
    border-radius: 100px !important;
}

.btn-nav-logout:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.25) !important;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    min-height: 44px;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 600;
    transition: all 0.25s var(--ease-out);
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-gold-bright), var(--accent-warm));
    color: #08080c;
    box-shadow: 0 4px 18px var(--accent-gold-glow);
    position: relative;
    overflow: hidden;
}

/* Subtle shine on hover */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.btn-primary:hover::after {
    left: 130%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 26px var(--accent-gold-glow-strong);
}

.btn-primary:active {
    transform: scale(0.97);
}

.btn-ghost {
    padding: 9px 16px;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
    border-color: var(--border-glass);
}

.btn-danger {
    background: rgba(224, 82, 82, 0.12);
    color: var(--danger);
    border: 1px solid rgba(224, 82, 82, 0.25);
}

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    box-shadow: 0 4px 16px rgba(224, 82, 82, 0.3);
}

.btn-icon {
    padding: 8px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    color: var(--accent-gold-bright);
    background: var(--accent-gold-glow);
}

/* ========================================
   MAIN CONTENT CONTAINER
   ======================================== */
.app-container {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-deep);
    position: relative;
    z-index: 1;
}

.main-content {
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    padding: 18px 14px calc(88px + env(safe-area-inset-bottom));
}

/* ========================================
   DASHBOARD / GALLERY
   ======================================== */
.dashboard-header-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 38px;
    flex-wrap: wrap;
    animation: fade-in-up 0.6s var(--ease-out) both;
}

.header-pill {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent-gold);
    margin-bottom: 10px;
    padding: 5px 14px;
    background: var(--accent-gold-glow);
    border: 1px solid var(--border-accent);
    border-radius: 100px;
    font-family: var(--font-display);
}

.header-titles h1 {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-gold-bright) 50%, var(--text-primary) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 0.98rem;
    font-weight: 500;
}

/* Search Box */
.search-box {
    position: relative;
    min-width: 280px;
    flex-shrink: 0;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.25s ease;
}

.search-input {
    width: 100%;
    padding: 12px 18px 12px 44px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s var(--ease-out);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: 46px;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--accent-gold-glow), 0 6px 20px rgba(0, 0, 0, 0.3);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
}

.search-input:focus ~ .search-icon,
.search-box:has(.search-input:focus) .search-icon {
    color: var(--accent-gold);
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
    from { opacity: 0; transform: translateX(-50%) translateY(-18px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 24px;
    background: var(--bg-card);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-xl);
    animation: fade-in-up 0.8s var(--ease-out) both;
}

.empty-icon {
    color: var(--accent-gold);
    margin-bottom: 22px;
    opacity: 0.7;
}

.empty-state h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 0.98rem;
    max-width: 420px;
    margin: 0 auto;
}

/* Video Grid - YouTube Feed Style */
.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    animation: fade-in-up 0.5s var(--ease-out) both 0.1s;
}

/* Progressive rendering: hide overflow cards until 'Show More' is clicked */
.video-card.dash-hidden {
    display: none;
}

@media (min-width: 600px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (min-width: 960px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 24px;
    }
}

.continue-section {
    margin-bottom: 34px;
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.section-heading-row h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.2;
}

.continue-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 320px);
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}

.continue-rail .video-card {
    scroll-snap-align: start;
}

.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    contain: layout paint;
}

.video-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 20px var(--accent-gold-glow);
    background: var(--bg-card-hover);
}

.video-card:active {
    transform: scale(0.985);
    opacity: 0.95;
}

/* 16:9 Full-width Thumbnail */
.card-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, #181828, #0e0e1a);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transition: transform 0.35s var(--ease-out);
}

.video-card:hover .thumb-img {
    transform: scale(1.04);
}

.thumb-img.thumb-error {
    display: none !important;
}

.thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.6;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.thumb-placeholder.has-thumb {
    opacity: 0;
}

.thumb-img.thumb-error + .thumb-placeholder {
    opacity: 0.7 !important;
}

.card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid var(--border-accent);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent-gold-bright);
    letter-spacing: 0.06em;
    backdrop-filter: blur(8px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.card-badge.badge-new {
    background: linear-gradient(135deg, #ff0844 0%, #ff6b6b 30%, #ff0844 60%, #e11d48 100%);
    background-size: 200% 200%;
    animation: badge-gradient-shift 2.5s ease-in-out infinite;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    box-shadow:
        0 2px 12px rgba(255, 8, 68, 0.55),
        0 0 20px rgba(255, 8, 68, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 900;
    padding: 3px 10px 3px 7px;
    border-radius: 8px;
    position: absolute;
    overflow: hidden;
}

/* Holographic shimmer sweep across badge */
.card-badge.badge-new::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 65%,
        transparent 100%
    );
    animation: badge-shimmer-sweep 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badge-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes badge-shimmer-sweep {
    0% { left: -100%; }
    50%, 100% { left: 200%; }
}

.card-badge.badge-sm {
    padding: 2px 7px 2px 5px;
    font-size: 0.6rem;
    border-radius: 6px;
}

/* Pulsing live dot indicator */
.badge-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 0 6px #ffffff, 0 0 12px rgba(255, 255, 255, 0.4);
    animation: badge-dot-breathe 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    position: relative;
    flex-shrink: 0;
}

/* Expanding ring ripple around the dot */
.badge-pulse-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    animation: badge-ring-pulse 1.8s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

@keyframes badge-dot-breathe {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.75;
        box-shadow: 0 0 4px #ffffff;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 10px #ffffff, 0 0 18px rgba(255, 255, 255, 0.3);
    }
}

@keyframes badge-ring-pulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Hover: amplify glow */
.video-card:hover .card-badge.badge-new,
.suggestion-card:hover .card-badge.badge-new {
    box-shadow:
        0 2px 16px rgba(255, 8, 68, 0.7),
        0 0 30px rgba(255, 8, 68, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.card-badge.badge-resume {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.play-overlay {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-gold-glow);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold-bright);
    transition: all 0.3s var(--ease-out);
    border: 1.5px solid var(--border-accent);
    z-index: 2;
    position: absolute;
    opacity: 0;
    transform: scale(0.85);
}

.video-card:hover .play-overlay {
    opacity: 1;
    transform: scale(1);
    background: linear-gradient(135deg, var(--accent-gold-bright), var(--accent-warm));
    color: #08080c;
    box-shadow: 0 0 25px var(--accent-gold-glow-strong);
    border-color: transparent;
}

.play-overlay svg {
    margin-left: 2px;
}

.card-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 3;
    letter-spacing: 0.02em;
}

.card-watch-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.55);
}

.card-watch-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-bright));
    box-shadow: 0 0 10px var(--accent-gold-glow-strong);
}

/* Card Info Section (Below Thumbnail) */
.card-info {
    padding: 12px 14px 14px 14px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    flex: 1;
}

.card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-details {
    flex: 1;
    min-width: 0;
}

.card-title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.36;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    transition: color 0.2s ease;
}

.video-card:hover .card-title {
    color: var(--accent-gold-bright);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    line-height: 1.3;
}

.card-meta .meta-author {
    font-weight: 600;
    color: var(--text-secondary);
}

.card-meta .meta-dot {
    opacity: 0.45;
}

.meta-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ========================================
   UPLOAD PAGE
/* ========================================
   UPLOAD PAGE (MINIMALIST & ULTRA-REFINED)
   ======================================== */
.upload-container {
    max-width: 580px;
    margin: 0 auto;
    padding-top: 12px;
    animation: fade-in-up 0.5s var(--ease-out) both;
}

.upload-header {
    margin-bottom: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.upload-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.upload-badge-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-gold-bright);
    box-shadow: 0 0 10px var(--accent-gold-bright);
    animation: pulse 2s infinite ease-in-out;
}

.upload-header h1 {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-gold-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.upload-header p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 450;
    max-width: 380px;
    line-height: 1.45;
}

.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.alert-error {
    background: rgba(224, 82, 82, 0.1);
    border: 1px solid rgba(224, 82, 82, 0.25);
    color: #fca5a5;
}

/* ---- Minimal Segmented Tab Switcher ---- */
.upload-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.upload-tabs {
    display: inline-flex;
    padding: 4px;
    background: rgba(14, 14, 22, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    gap: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.upload-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 22px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.24s var(--ease-out);
    user-select: none;
}

.upload-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.upload-tab.active {
    background: var(--bg-card);
    border-color: var(--border-glass);
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.upload-tab.active svg {
    color: var(--accent-gold-bright);
    transform: scale(1.06);
}

.upload-tab svg {
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* ---- Upload Panels & Forms ---- */
.upload-panel {
    display: none;
}

.upload-panel.active {
    display: block;
    animation: fade-in 0.3s var(--ease-out) both;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--bg-card);
    padding: 30px;
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    backdrop-filter: blur(24px);
    position: relative;
    box-shadow: var(--shadow-lg);
}

.upload-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold-bright), transparent);
    opacity: 0.35;
    pointer-events: none;
}

/* ---- Modern Minimalist Dropzone ---- */
.upload-dropzone {
    position: relative;
    border: 1.5px dashed rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(255, 255, 255, 0.015);
    overflow: hidden;
}

.upload-dropzone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--accent-gold-glow-strong), transparent 75%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.upload-dropzone:hover::before,
.upload-dropzone.dragover::before {
    opacity: 1;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--accent-gold);
    background: var(--accent-gold-glow);
    box-shadow: 0 0 36px var(--accent-gold-glow);
    transform: translateY(-2px);
}

.dropzone-icon-bubble {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent-gold-glow);
    border: 1px solid var(--border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold-bright);
    margin: 0 auto 14px;
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
    box-shadow: 0 4px 20px var(--accent-gold-glow);
    position: relative;
    z-index: 1;
}

.upload-dropzone:hover .dropzone-icon-bubble,
.upload-dropzone.dragover .dropzone-icon-bubble {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 28px var(--accent-gold-glow-strong);
}

.dropzone-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.dropzone-browse-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-glass);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.upload-dropzone:hover .dropzone-browse-pill {
    background: var(--accent-gold);
    color: #000;
    border-color: var(--accent-gold-bright);
    box-shadow: 0 2px 12px var(--accent-gold-glow-strong);
}

.dropzone-specs {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* File Selected State */
.selected-file-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 14px;
    text-align: left;
    transition: all 0.2s ease;
}

.selected-icon-bubble {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    flex-shrink: 0;
}

.selected-meta {
    flex: 1;
    min-width: 0;
}

.selected-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.selected-size-tag {
    font-size: 0.76rem;
    color: var(--success);
    font-weight: 600;
}

.selected-change-btn {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.selected-change-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.12);
}

/* Form Controls & Layout */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.form-label-text {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-label-tag {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
}

.form-input-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.form-input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 2;
}

.form-input-with-icon {
    padding-left: 40px !important;
}

.form-input {
    width: 100%;
    padding: 13px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--text-primary);
    transition: all 0.25s ease;
    outline: none;
    min-height: 46px;
}

.form-input::placeholder {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.form-input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--accent-gold-glow), 0 4px 16px rgba(0, 0, 0, 0.3);
    background: var(--bg-card);
}

.form-input-box:focus-within .form-input-icon {
    color: var(--accent-gold);
}

.form-input-action-btn {
    position: absolute;
    right: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted, #9a94a6);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}

.form-input-action-btn:hover {
    background: rgba(229, 184, 90, 0.15);
    color: var(--accent-gold, #e5b85a);
    transform: scale(1.08);
}

.form-input-with-action {
    padding-right: 44px !important;
}

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

/* URL Input & Textarea */
.url-input-wrapper {
    position: relative;
}

.url-input-icon {
    position: absolute;
    top: 14px;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 2;
}

.url-input {
    padding-left: 40px !important;
}

.url-textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.5;
    padding-top: 12px;
    font-size: 16px;
    font-family: var(--font-body);
}

.url-input:focus ~ .url-input-icon,
.url-input-wrapper:focus-within .url-input-icon {
    color: var(--accent-gold);
}

/* Quality Selector */
.quality-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
    font-size: 16px;
}

.quality-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e5b85a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.quality-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: -6px;
}

.quality-analyze-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.quality-analyze-pill:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-glass);
}

.quality-status {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Submit Buttons */
.btn-upload-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    font-size: 0.96rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    min-height: 48px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px var(--accent-gold-glow);
    transition: all 0.25s var(--ease-out);
}

.btn-upload-submit:hover {
    box-shadow: 0 6px 24px var(--accent-gold-glow-strong);
    transform: translateY(-1px);
}

.btn-upload-submit:active {
    transform: translateY(0);
}

.btn-upload-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

.btn-upload-submit:hover::after {
    left: 130%;
}

/* Progress Bar & Multi-Stage Upload Card */
.upload-progress {
    padding: 8px 0 4px;
}

.upload-progress-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin: 8px 0 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    animation: fadeIn 0.3s ease;
}

.upload-stage-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-stage-item.active {
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.04);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.08);
}

.upload-stage-item.completed {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.03);
}

.upload-stage-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.upload-stage-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.upload-stage-item.active .upload-stage-icon {
    background: rgba(212, 175, 55, 0.15);
    color: var(--accent-gold-bright);
    animation: pulse 2s infinite;
}

.upload-stage-item.completed .upload-stage-icon {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.upload-stage-info {
    flex: 1;
    min-width: 0;
}

.upload-stage-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.upload-stage-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.upload-stage-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-display);
}

.badge-running {
    background: rgba(212, 175, 55, 0.2);
    color: var(--accent-gold-bright);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.badge-pending {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.badge-done {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.upload-stage-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 2px 0 0;
    font-variant-numeric: tabular-nums;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-gold-dim), var(--accent-gold-bright), var(--accent-warm));
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.r2-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2563eb, #38bdf8, #818cf8);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.r2-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.upload-complete-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--radius-md);
    text-align: center;
    animation: fadeIn 0.4s ease;
}

.complete-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.complete-check {
    font-size: 1.1rem;
}

.complete-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #22c55e;
}

.complete-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.progress-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.import-queue-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px;
}

.import-queue-header,
.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.import-queue-header h3,
.admin-panel-header h2 {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.2;
}

.import-queue-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.import-queue-item,
.admin-job-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 180px) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.import-queue-main,
.admin-job-row > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.import-queue-main strong,
.admin-job-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.import-queue-main span,
.admin-job-row span {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.import-queue-progress,
.admin-job-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.import-queue-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.admin-mini-bar {
    width: 100%;
    min-width: 90px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.admin-mini-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-bright));
}

/* ---- Import Progress ---- */
.import-status-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.import-status-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.import-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--accent-gold-bright);
    box-shadow: 0 0 16px var(--accent-gold-glow);
    animation: vp-spin 0.85s linear infinite;
    flex-shrink: 0;
}

.import-spinner.done {
    animation: none;
    border-color: var(--success);
    border-top-color: var(--success);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.2);
}

.import-spinner.error {
    animation: none;
    border-color: var(--danger);
    border-top-color: var(--danger);
    box-shadow: 0 0 16px rgba(224, 82, 82, 0.2);
}

.import-status-text {
    flex: 1;
    min-width: 0;
}

.import-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 2px;
    word-break: break-word;
}

.import-detail {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.import-progress-bar {
    height: 6px;
}

.import-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.import-stats span:first-child {
    color: var(--accent-gold-bright);
}

/* ---- Import Result ---- */
.import-result-card {
    text-align: center;
    padding: 28px 22px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.import-result-card.success {
    border-color: rgba(52, 211, 153, 0.3);
}

.import-result-card.error {
    border-color: rgba(224, 82, 82, 0.3);
}

.import-result-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.import-result-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

/* ========================================
   WATCH PAGE / YOUTUBE 2-COLUMN LAYOUT
   ======================================== */
.watch-page {
    max-width: 1460px;
    width: 100%;
    margin: 0 auto;
    transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.watch-page.theater-mode {
    max-width: 100% !important;
}

.watch-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 28px;
    align-items: start;
}

.watch-main-col {
    min-width: 0;
}

.watch-side-col {
    min-width: 0;
    position: sticky;
    top: 84px;
}

/* ========================================
   SUGGESTED VIDEOS PANEL (YouTube Style)
   ======================================== */
.suggestions-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 20px;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    animation: fade-in-up 0.5s var(--ease-out) both 0.15s;
    position: relative;
}

.suggestions-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-xl) + 1px);
    background: linear-gradient(180deg, var(--accent-gold-dim), transparent 40%);
    z-index: -1;
    opacity: 0.12;
}

.suggestions-header {
    margin-bottom: 16px;
}

.suggestions-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.suggestions-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.suggestions-heading svg {
    color: var(--accent-gold);
}

/* Autoplay Toggle */
.autoplay-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
}

.autoplay-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.switch-toggle input:checked + .switch-slider {
    background: linear-gradient(135deg, var(--accent-gold-bright), var(--accent-warm));
    border-color: transparent;
    box-shadow: 0 0 8px var(--accent-gold-glow);
}

.switch-toggle input:checked + .switch-slider:before {
    transform: translateX(16px);
    background-color: #0c0d14;
}

/* Suggestion Chips Filter */
.suggestion-chips-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.suggestion-chips-container::-webkit-scrollbar {
    display: none;
}

.suggestion-chips {
    display: flex;
    gap: 6px;
    width: max-content;
}

.chip-btn {
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.chip-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--border-accent);
}

.chip-btn.active {
    background: var(--accent-gold-bright);
    color: #08080c;
    border-color: var(--accent-gold-bright);
    font-weight: 700;
    box-shadow: 0 2px 8px var(--accent-gold-glow);
}

/* Suggestions List */
.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 220px);
    max-height: calc(100dvh - 220px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-right: 4px;
}

.suggestions-list::-webkit-scrollbar {
    width: 4px;
}

.suggestions-list::-webkit-scrollbar-track {
    background: transparent;
}

.suggestions-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.suggestion-card {
    display: flex;
    gap: 12px;
    text-decoration: none;
    border-radius: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.suggestion-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-subtle);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.suggestion-card.is-hidden {
    display: none !important;
}

.suggestion-thumb-wrap {
    position: relative;
    width: 130px;
    min-width: 130px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(145deg, #181828, #0e0e1a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestion-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--ease-out);
}

.suggestion-card:hover .suggestion-thumb-img {
    transform: scale(1.06);
}

.suggestion-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.5;
}

.suggestion-thumb-placeholder.has-thumb {
    opacity: 0;
}

.suggestion-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.88);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffffff;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.suggestion-play-hover {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold-bright);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.suggestion-card:hover .suggestion-play-hover {
    opacity: 1;
}

.suggestion-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.suggestion-title {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    margin: 0;
    transition: color 0.2s ease;
}

.suggestion-card:hover .suggestion-title {
    color: var(--accent-gold-bright);
}

.suggestion-uploader-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.suggestion-avatar-box {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
}

.suggestion-author {
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.suggestion-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.no-suggestions-card {
    text-align: center;
    padding: 30px 16px;
    color: var(--text-muted);
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ========================================
   AUTOPLAY COUNTDOWN TOAST NOTIFICATION
   ======================================== */
.autoplay-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    animation: fade-in-up 0.4s var(--ease-out) both;
}

.autoplay-toast-content {
    background: rgba(14, 15, 23, 0.95);
    border: 1px solid var(--border-accent);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px var(--accent-gold-glow);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 420px;
}

.autoplay-toast-spinner {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.circular-chart {
    display: block;
    width: 100%;
    height: 100%;
}

.circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3.5;
}

.circle {
    fill: none;
    stroke: var(--accent-gold-bright);
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dasharray 1s linear;
}

.autoplay-countdown-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--accent-gold-bright);
}

.autoplay-toast-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.autoplay-toast-subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-gold-bright);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.autoplay-toast-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autoplay-toast-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ========================================
   CUSTOM VIDEO PLAYER — CINEMA DESIGN
   ======================================== */
.vp-cinema {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(135deg, #020203 0%, #080910 48%, #020203 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 50px var(--accent-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    margin-bottom: 24px;
    animation: fade-in-up 0.5s var(--ease-out) both;
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    isolation: isolate;
}

/* Hide cursor when controls are hidden (immersive viewing) */
.vp-cinema.vp-cursor-hidden {
    cursor: none;
}

.vp-cinema.vp-cursor-hidden * {
    cursor: none !important;
}

.vp-cinema::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.035), transparent 14%, transparent 86%, rgba(255,255,255,0.035)),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 24%, transparent 74%, rgba(0,0,0,0.28));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 90px rgba(0, 0, 0, 0.65);
    transition: opacity 0.4s ease;
}

/* Hide the decorative overlay during playback for cleaner video */
.vp-cinema.vp-playing::before {
    opacity: 0;
}

.vp-cinema video {
    width: 100%;
    height: 100%;
    display: block;
    min-height: 200px;
    object-fit: contain;
    background: #000;
    position: relative;
    z-index: 1;
}

.vp-status-badge {
    display: none;
}

.vp-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-gold-bright);
    box-shadow: 0 0 0 4px var(--accent-gold-glow);
    flex-shrink: 0;
}

.vp-status-loading .vp-status-dot,
.vp-status-buffering .vp-status-dot {
    animation: vp-status-pulse 1.1s ease-in-out infinite;
}

.vp-status-ready .vp-status-dot {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16);
}

.vp-status-error .vp-status-dot,
.vp-status-offline .vp-status-dot {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(224, 82, 82, 0.18);
}

.vp-status-warning .vp-status-dot {
    background: var(--accent-warm);
}

@keyframes vp-status-pulse {
    0%, 100% { transform: scale(1); opacity: 0.75; }
    50% { transform: scale(1.45); opacity: 1; }
}

/* ========================================
   CIRCULAR BUFFERING SPINNER (YOUTUBE STYLE)
   ======================================== */
.vp-buffering-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.vp-cinema.vp-buffering .vp-buffering-spinner {
    opacity: 1;
    visibility: visible;
}

.vp-cinema.vp-buffering .vp-center-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

.vp-spinner-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3.5px solid rgba(255, 255, 255, 0.18);
    border-top-color: #ffffff;
    border-right-color: var(--accent-gold, #f59e0b);
    animation: vp-circle-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

@keyframes vp-circle-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vp-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.vp-loading-overlay[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.vp-loading-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
}

.vp-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #fff;
    animation: vp-spin 0.7s linear infinite;
}

.vp-error .vp-spinner,
.vp-offline .vp-spinner,
.vp-warning .vp-spinner {
    animation: none;
    border-top-color: currentColor;
}

.vp-error .vp-loading-panel,
.vp-offline .vp-loading-panel {
    border: 1px solid rgba(224, 82, 82, 0.35);
}

.vp-warning .vp-loading-panel {
    border: 1px solid rgba(255, 200, 60, 0.3);
}

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

.vp-loading-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vp-loading-title {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
}

.vp-loading-detail {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    line-height: 1.4;
}

.vp-load-meter {
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.vp-load-meter span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transition: width 0.2s ease;
}

.vp-retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.vp-retry-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.vp-retry-btn:active {
    transform: scale(0.96);
}

.vp-retry-btn[hidden] {
    display: none;
}

.vp-cinema:fullscreen,
.vp-cinema:-webkit-full-screen {
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: #000;
}

.vp-cinema:fullscreen::before,
.vp-cinema:-webkit-full-screen::before {
    display: none;
}

.vp-cinema:fullscreen video,
.vp-cinema:-webkit-full-screen video {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    object-fit: contain;
}

.vp-bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 170px;
    background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.64) 44%, rgba(0,0,0,0.18) 78%, transparent 100%);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.vp-cinema.vp-controls-visible .vp-bottom-gradient {
    opacity: 1;
}

/* Resume Toast */
.resume-toast {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(12, 12, 20, 0.92);
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-md);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    color: #fff;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 15px var(--accent-gold-glow);
    animation: fade-in-down 0.4s var(--ease-out);
}

.resume-actions {
    display: flex;
    gap: 8px;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.8rem;
}

/* ---- Center Play/Pause Overlay ---- */
/* ---- Center Play/Pause & Nav Overlay (YouTube Mobile Style) ---- */
.vp-center-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    z-index: 6;
    pointer-events: none;
}

.vp-center-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    cursor: pointer;
}

.vp-center-btn svg {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

.vp-center-btn .vp-play-icon {
    margin-left: 3px;
}

/* Center Prev/Next Video Navigation Buttons on Screen */
.vp-center-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
    pointer-events: none;
    cursor: pointer;
}

.vp-center-nav-btn svg {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

.vp-center-nav-btn:hover {
    background: rgba(0, 0, 0, 0.85);
}

.vp-center-nav-btn:active {
    transform: scale(0.75);
}

.vp-center-nav-btn.is-disabled {
    opacity: 0 !important;
    pointer-events: none !important;
    cursor: default;
}

/* Center elements show when controls are visible or paused */
.vp-cinema.vp-controls-visible .vp-center-btn,
.vp-cinema:not(.vp-playing) .vp-center-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.vp-cinema.vp-controls-visible .vp-center-nav-btn:not(.is-disabled),
.vp-cinema:not(.vp-playing) .vp-center-nav-btn:not(.is-disabled) {
    opacity: 0.9;
    transform: scale(0.9);
    pointer-events: auto;
}

.vp-center-btn:active {
    transform: scale(0.9);
    opacity: 0.8;
}

.vp-center-btn.vp-animate {
    opacity: 1;
    transform: scale(1);
    animation: vp-center-pop 0.45s ease forwards;
}

@keyframes vp-center-pop {
    0% { opacity: 0; transform: scale(0.5); }
    35% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.2); }
}

/* ---- Seek Ripple Indicators ---- */
.vp-seek-ripple {
    position: absolute;
    top: 0;
    bottom: 56px;
    width: 38%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
}

.vp-seek-left { left: 0; }
.vp-seek-right { right: 0; }

.vp-seek-ripple.vp-ripple-active {
    animation: vp-ripple-anim 0.55s ease-out forwards;
}

.vp-ripple-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.65);
    padding: 16px 22px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.2);
}

@keyframes vp-ripple-anim {
    0% { opacity: 0; transform: scale(0.65); }
    35% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.15); }
}

/* ========================================
   YOUTUBE-STYLE FLAT CONTROLS
   ======================================== */
.vp-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 0;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.vp-cinema.vp-controls-visible .vp-controls {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ---- Progress / Scrubber Bar ---- */
.vp-progress-wrap {
    position: relative;
    width: 100%;
    height: 2px;
    padding: 6px 0;
    background: transparent;
    cursor: pointer;
    box-sizing: content-box;
    touch-action: none;
    display: flex;
    align-items: center;
}

.vp-progress-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 1px;
    transition: height 0.12s ease;
}

.vp-progress-wrap:hover::before,
.vp-progress-wrap.vp-dragging::before {
    height: 3.5px;
}

.vp-progress-buffer {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
    pointer-events: none;
    transition: height 0.12s ease, width 0.15s ease;
}

.vp-progress-wrap:hover .vp-progress-buffer,
.vp-progress-wrap.vp-dragging .vp-progress-buffer {
    height: 3.5px;
}

.vp-progress-played {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 2px;
    background: #e11d48;
    border-radius: 1px;
    pointer-events: none;
    transition: height 0.12s ease, width 0.04s linear;
}

.vp-progress-wrap:hover .vp-progress-played,
.vp-progress-wrap.vp-dragging .vp-progress-played {
    height: 3.5px;
}

.vp-progress-thumb {
    position: absolute;
    right: -4.5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e11d48;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.3);
    transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vp-progress-wrap:hover .vp-progress-thumb,
.vp-progress-wrap.vp-dragging .vp-progress-thumb {
    transform: translateY(-50%) scale(1);
}

.vp-progress-hover-time {
    position: absolute;
    top: -32px;
    left: 0;
    background: rgba(15, 15, 15, 0.92);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.vp-progress-wrap:hover .vp-progress-hover-time {
    opacity: 1;
}

/* ---- Button Row ---- */
.vp-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 8px;
    background: rgba(0, 0, 0, 0.7);
}

.vp-controls-left,
.vp-controls-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ---- Buttons ---- */
.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.12s ease;
    flex-shrink: 0;
    padding: 0;
    opacity: 0.9;
    position: relative;
}

.vp-btn:hover {
    opacity: 1;
}

.vp-btn:active {
    opacity: 0.7;
}

/* Play/Pause — same style, no special background */
.vp-btn-play {
    width: 44px;
    height: 44px;
}

/* Seek buttons */
.vp-btn-seek {
    opacity: 0.85;
}

.vp-btn-seek:hover {
    opacity: 1;
}

/* Volume */
.vp-volume-group {
    display: flex;
    align-items: center;
    gap: 0;
}

.vp-volume-group .vp-btn-vol {
    background: none;
    border: none;
}

.vp-volume-slider-wrap {
    width: 0;
    overflow: hidden;
    transition: width 0.18s ease, opacity 0.12s ease;
    opacity: 0;
}

.vp-volume-group:hover .vp-volume-slider-wrap,
.vp-volume-group:focus-within .vp-volume-slider-wrap,
.vp-volume-slider-wrap.vp-vol-open {
    width: 60px;
    opacity: 1;
}

.vp-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 52px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    cursor: pointer;
    margin: 0 4px;
}

.vp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.vp-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
}

.vp-btn-muted {
    color: #fff;
}

/* Time Display */
.vp-time {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.vp-time-sep {
    opacity: 0.5;
    margin: 0 2px;
}

.vp-time-dur {
    color: rgba(255, 255, 255, 0.6);
}

/* Speed Button */
.vp-speed-group {
    position: relative;
}

.vp-speed-btn {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0 6px;
    min-width: 36px;
    height: 28px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    letter-spacing: 0.02em;
}

.vp-speed-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Speed Menu */
.vp-speed-menu {
    position: absolute;
    bottom: 44px;
    right: -8px;
    background: rgba(18, 18, 18, 0.97);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
    min-width: 130px;
    display: none;
    z-index: 50;
}

.vp-speed-menu.vp-menu-open {
    display: block;
    animation: vp-menu-enter 0.15s ease;
}

.vp-speed-option {
    display: block;
    width: 100%;
    padding: 10px 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}

.vp-speed-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.vp-speed-option.active {
    color: #fff;
    font-weight: 700;
    position: relative;
    padding-left: 32px;
}

.vp-speed-option.active::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-gold);
}

/* Fullscreen */
.vp-btn-fullscreen {
    opacity: 0.85;
}

.vp-btn-fullscreen:hover {
    opacity: 1;
}

/* Action Buttons & Video Meta */
.video-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Shortcuts Grid */
.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    padding: 10px 0;
}

.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

kbd {
    background: var(--bg-elevated);
    border: 1px solid var(--border-accent);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: monospace;
    font-size: 0.82rem;
    color: var(--accent-gold-bright);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.video-info-section {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 28px;
    animation: fade-in-up 0.5s var(--ease-out) both 0.1s;
}

.thumbnail-manager {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 24px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.thumbnail-preview-box {
    position: relative;
    min-height: 102px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
}

.thumbnail-preview-box .thumb-img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumbnail-manager-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-content: center;
}

.thumbnail-manager h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.thumbnail-manager p {
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.thumbnail-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.thumbnail-input {
    flex: 1 1 220px;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 16px;
}

.thumbnail-form-inline {
    margin: 0;
}

.video-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.video-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.3;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--text-primary) 40%, var(--accent-gold-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Inline Title Edit --- */
.video-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.title-edit-btn {
    flex-shrink: 0;
    margin-top: 8px;
    padding: 5px;
    border-radius: 6px;
    color: var(--text-muted);
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    cursor: pointer;
    background: none;
    border: none;
}

.video-title-wrap:hover .title-edit-btn {
    opacity: 1;
}

.title-edit-btn:hover {
    color: var(--accent-gold-bright);
    background: rgba(255, 255, 255, 0.08);
}

.video-title-wrap.editing .video-title,
.video-title-wrap.editing .title-edit-btn {
    display: none;
}

.title-edit-form {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.title-edit-input {
    flex: 1;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--border-accent);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease;
}

.title-edit-input:focus {
    border-color: var(--accent-gold-bright);
}

.title-emoji-toggle-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, #9a94a6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.title-emoji-toggle-btn:hover {
    background: rgba(229, 184, 90, 0.16);
    border-color: rgba(229, 184, 90, 0.35);
    color: var(--accent-gold, #e5b85a);
    transform: scale(1.06);
}

.title-save-btn,
.title-cancel-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.title-save-btn {
    background: rgba(72, 199, 142, 0.18);
    color: #48c78e;
}

.title-save-btn:hover {
    background: rgba(72, 199, 142, 0.3);
}

.title-cancel-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.title-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* --- NEW Badge --- */
.badge-new {
    background: rgba(72, 199, 142, 0.85) !important;
    color: #fff !important;
    border-color: rgba(72, 199, 142, 0.5) !important;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.meta-new {
    color: #48c78e;
    font-size: 0.78rem;
    font-weight: 600;
}

.video-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* --- Video Uploader Author Bar & Meta --- */
.video-uploader-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 6px;
}

.video-uploader-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.video-uploader-avatar-box {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border-accent);
    box-shadow: 0 0 16px var(--accent-gold-glow);
    background: var(--bg-elevated);
}

.watch-uploader-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-uploader-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.video-uploader-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-uploader-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.video-uploader-badge {
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.video-uploader-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.uploader-by-tag {
    color: var(--text-secondary);
}

.uploader-by-tag strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Upload Page - Uploading As Indicator */
.upload-as-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 5px 14px 5px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-accent);
    border-radius: 30px;
    box-shadow: var(--shadow-sm);
}

.upload-as-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.upload-as-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent-gold-bright);
}

/* Admin Table Uploader Cell */
.admin-user-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.admin-row-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   COMMENTS SECTION (Modern Redesign)
   ======================================== */
.comments-section {
    animation: fade-in-up 0.5s var(--ease-out) both 0.2s;
    background: var(--bg-card);
    padding: 28px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    box-shadow: var(--shadow-sm);
    margin-top: 24px;
    overscroll-behavior-y: contain;
}

.comments-section::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-xl) + 1px);
    background: linear-gradient(180deg, var(--accent-gold-dim), transparent 40%);
    z-index: -1;
    opacity: 0.15;
}

.comments-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.comments-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.comments-title svg {
    color: var(--accent-gold);
}

.comments-count-pill {
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent-gold-bright);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
}

/* Comment Form */
.comment-form {
    margin-bottom: 30px;
}

.comment-input-wrapper {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    border: 1.5px solid var(--border-subtle);
}

.comment-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-admin {
    background: linear-gradient(135deg, var(--accent-gold-bright), var(--accent-warm));
    color: #08080c;
}

.avatar-viewer {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    color: #fff;
}

.comment-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.comment-input-group:focus-within {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--accent-gold-glow), 0 8px 24px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

.comment-input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    resize: none;
    min-height: 42px;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
    padding: 0;
}

.comment-input::placeholder {
    color: var(--text-muted);
}

/* Comment Form Actions & Emoji Bar */
.comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
    gap: 10px;
}

.comment-emoji-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.comment-emoji-picker-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    color: var(--text-secondary, #9a94a6);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-right: 2px;
}

.comment-emoji-picker-toggle:hover {
    background: rgba(229, 184, 90, 0.16);
    border-color: rgba(229, 184, 90, 0.35);
    color: var(--accent-gold, #e5b85a);
    transform: translateY(-1.5px) scale(1.08);
}

.emoji-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 3px 6px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.emoji-chip .wa-emoji,
.wt-emoji-btn .wa-emoji,
.call-quick-emoji-btn .wa-emoji {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.comment-text .wa-emoji,
.wt-msg-text .wa-emoji {
    width: 1.22em;
    height: 1.22em;
    vertical-align: -0.18em;
    margin: 0 1.5px;
    display: inline-block;
}

.wa-raw-emoji {
    display: inline-block;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    font-style: normal;
    line-height: 1;
    vertical-align: -0.1em;
}

.emoji-chip:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--border-accent, rgba(229, 184, 90, 0.3));
    transform: scale(1.2) translateY(-2px);
}

.emoji-chip:active {
    transform: scale(0.95);
}

.comment-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.comment-cancel-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.btn-comment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 20px;
}

/* Comments List */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comment-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    animation: fade-in-up 0.35s var(--ease-out) both;
    transition: all 0.25s ease;
}

.comment-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.comment-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.comment-author {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.comment-author-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.comment-author-badge.badge-admin {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
    color: var(--accent-gold-bright);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.comment-author-badge.badge-viewer {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(225, 29, 72, 0.3));
    color: #fecdd3;
    border: 1px solid rgba(244, 63, 94, 0.4);
}

.comment-time {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-left: 2px;
}

.comment-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.comment-text-box {
    margin: 2px 0 6px 0;
}

.comment-text {
    font-size: 0.94rem;
    color: var(--text-secondary);
    line-height: 1.58;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    margin: 0;
    white-space: pre-wrap;
}

/* Comment Action Bar (Like, Reply, Delete) */
.comment-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.comment-action-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
}

.comment-like-btn.liked {
    color: #f43f5e;
}

.comment-like-btn.liked svg {
    fill: #f43f5e;
    stroke: #f43f5e;
    animation: heart-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heart-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.comment-delete-form {
    margin: 0;
}

.comment-delete-btn {
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.comment-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Empty State */
.no-comments-box {
    text-align: center;
    padding: 45px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.no-comments-icon {
    color: var(--text-muted);
    opacity: 0.6;
    margin-bottom: 4px;
}

.no-comments-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.no-comments-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 320px;
}

/* ========================================
   ADMIN CONTROL CENTER (Android-First & Material 3 UI)
   ======================================== */
.admin-app-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.admin-main-content {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    padding: 16px 14px calc(96px + env(safe-area-inset-bottom));
}

/* Android Native App Bar */
.android-app-bar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: rgba(8, 8, 14, 0.82);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    gap: 12px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.android-app-bar::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-gold-glow) 15%,
        var(--accent-gold-bright) 50%,
        var(--accent-gold-glow) 85%,
        transparent 100%
    );
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.android-app-bar.is-scrolled {
    padding: 9px 24px;
    background: rgba(6, 6, 11, 0.94);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.android-app-bar.is-scrolled::after {
    opacity: 0.9;
}

.app-bar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.app-bar-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.25s var(--ease-out);
    flex-shrink: 0;
}

.app-bar-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-accent);
    color: var(--accent-gold-bright);
    transform: translateX(-2px);
    box-shadow: 0 0 16px var(--accent-gold-glow);
}

.app-bar-back-btn:active {
    transform: scale(0.94);
}

.app-bar-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.app-bar-badge {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-gold-bright);
}

.app-bar-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-app-bar-action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
    flex-shrink: 0;
}

.btn-app-bar-action svg {
    transition: transform 0.4s var(--ease-spring);
}

.btn-app-bar-action:hover {
    background: var(--accent-gold-glow);
    border-color: var(--border-accent);
    color: var(--accent-gold-bright);
    transform: scale(1.08);
    box-shadow: 0 0 18px var(--accent-gold-glow);
}

.btn-app-bar-action:hover svg {
    transform: rotate(45deg);
}

.btn-app-bar-action:active {
    transform: scale(0.94);
}

/* Quick Status Toolbar */
.admin-quick-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-toolbar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.quick-toolbar-info strong {
    color: var(--text-primary);
}

.live-dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    flex-shrink: 0;
    animation: livePulse 2s infinite ease-in-out;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.btn-cleanup-compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cleanup-compact:active {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(0.95);
    border-color: #ef4444;
}

/* ========================================
   VPS SERVER HEALTH & REAL-TIME LOAD MONITOR
   ======================================== */
.vps-monitor-card {
    background: linear-gradient(135deg, rgba(14, 16, 28, 0.9), rgba(20, 24, 44, 0.8));
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(56, 189, 248, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.vps-monitor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, #c084fc, transparent);
    opacity: 0.8;
}

.vps-monitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.vps-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.vps-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(14, 165, 233, 0.08));
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

.vps-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vps-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vps-badge-tag {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.12);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.vps-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.vps-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: livePulse 1.8s infinite;
}

.vps-main-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.vps-subtext {
    margin: 0;
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vps-subtext strong {
    color: #7dd3fc;
}

.vps-header-right {
    flex-shrink: 0;
}

.vps-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.vps-health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.vps-status-pill.pill-optimal {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.vps-status-pill.pill-warn {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.vps-status-pill.pill-critical {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    animation: livePulse 1.2s infinite;
}

/* 5-Grid Resource Gauges */
.vps-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.vps-metric-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.vps-metric-box:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.metric-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.metric-icon-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.metric-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-cpu { background: rgba(56, 189, 248, 0.18); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); }
.badge-ram { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.badge-disk { background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); }
.badge-network { background: rgba(6, 182, 212, 0.18); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.35); }
.badge-node { background: rgba(52, 211, 153, 0.18); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.35); }

.metric-name {
    display: block;
    font-size: 0.84rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
}

.metric-sub {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.metric-val-wrap {
    text-align: right;
    flex-shrink: 0;
}

.metric-pct {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.metric-cpu .metric-pct { color: #7dd3fc; }
.metric-ram .metric-pct { color: #fde047; }
.metric-disk .metric-pct { color: #d8b4fe; }
.metric-network .metric-pct { color: #67e8f9; }

.metric-badge-pill {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

/* Gauge Track & Fill */
.metric-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.metric-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fill-cpu {
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.fill-ram {
    background: linear-gradient(90deg, #d97706, #fbbf24);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.fill-disk {
    background: linear-gradient(90deg, #9333ea, #c084fc);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

.fill-network {
    background: linear-gradient(90deg, #0891b2, #22d3ee);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}

.vps-metric-box.status-warn .metric-bar-fill {
    background: linear-gradient(90deg, #d97706, #f59e0b) !important;
}

.vps-metric-box.status-critical .metric-bar-fill {
    background: linear-gradient(90deg, #dc2626, #f43f5e) !important;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.8) !important;
}

.metric-bottom-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.metric-bottom-info strong {
    color: var(--text-primary);
}

/* Runtime details row */
.metric-runtime-details {
    display: flex;
    align-items: center;
    gap: 6px;
}

.runtime-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 4px 6px;
    text-align: center;
}

.chip-k {
    font-size: 0.58rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chip-v {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
}

@media (max-width: 1024px) {
    .vps-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .vps-metric-box.metric-node {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .vps-monitor-card {
        padding: 16px 14px;
    }

    .vps-monitor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .vps-header-right {
        width: 100%;
    }

    .vps-status-pill {
        width: 100%;
        justify-content: center;
    }

    .vps-metrics-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vps-metric-box.metric-node {
        grid-column: auto;
    }
}

/* 6-Tile Stat Grid */
.admin-stat-tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.stat-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-tile:active {
    transform: scale(0.98);
    border-color: var(--border-accent);
}

.stat-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-cyan {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}

.icon-amber {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
}

.icon-emerald {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.28);
    color: #34d399;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.15);
}

.icon-violet {
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.28);
    color: #a78bfa;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
}

.icon-rose {
    background: rgba(251, 113, 133, 0.12);
    border: 1px solid rgba(251, 113, 133, 0.28);
    color: #fb7185;
    box-shadow: 0 0 12px rgba(251, 113, 133, 0.15);
}

.icon-coral {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: #f87171;
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.15);
}

.stat-tile-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.stat-tile-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-tile-val {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
}

/* Common Section Card */
.admin-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}

.card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-bubble {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-card-header h2 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.count-pill {
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.count-pill.error-pill {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

/* ========================================
   HAJERA'S WATCH TRACKER HERO & INTERACTIVE UI
   ======================================== */
.hajera-tracker-section {
    border: 1px solid rgba(244, 63, 94, 0.28);
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.05) 0%, rgba(14, 15, 24, 0.95) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(244, 63, 94, 0.1);
    position: relative;
    overflow: hidden;
}

.hajera-tracker-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f43f5e, #fda4af, #f43f5e, transparent);
}

/* Hajera Hero Engagement Widget */
.hajera-hero-widget {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.hajera-hero-bg-glow {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.25), transparent 70%);
    filter: blur(25px);
    pointer-events: none;
}

.hajera-hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.hajera-hero-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.hajera-hero-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f43f5e;
    box-shadow: 0 0 16px rgba(244, 63, 94, 0.45);
    background: #141520;
}

.hajera-hero-avatar .avatar-img,
.hajera-hero-avatar .avatar-letter {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Live Presence Dots */
.hajera-hero-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #0d0e17;
    transition: all 0.3s ease;
}

.hajera-hero-online-dot.dot-watching {
    background: #f43f5e;
    box-shadow: 0 0 10px #f43f5e, 0 0 20px rgba(244, 63, 94, 0.6);
    animation: livePulseGlow 1.5s infinite alternate;
}

.hajera-hero-online-dot.dot-online {
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.hajera-hero-online-dot.dot-idle {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

.hajera-hero-online-dot.dot-offline {
    background: #64748b;
    box-shadow: none;
}

@keyframes livePulseGlow {
    from { transform: scale(1); box-shadow: 0 0 6px #f43f5e; }
    to { transform: scale(1.15); box-shadow: 0 0 14px #f43f5e, 0 0 22px rgba(244, 63, 94, 0.8); }
}

/* Live Badges in Hero Tag */
.hero-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.badge-live-watching {
    background: rgba(244, 63, 94, 0.18);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.4);
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.25);
}

.badge-live-online {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-live-idle {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-live-offline {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.25);
}

.live-pulse-anim {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: livePulseGlow 1s infinite alternate;
}

.idle-static-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.live-sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
}

.sync-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 5px #38bdf8;
    animation: syncPulse 2s infinite;
}

@keyframes syncPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Live Video Playing Card */
.hajera-live-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.14) 0%, rgba(20, 21, 33, 0.8) 100%);
    border: 1px solid rgba(244, 63, 94, 0.4);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(244, 63, 94, 0.15);
    position: relative;
    overflow: hidden;
}

.hajera-live-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    bottom: 0;
    background: #f43f5e;
    box-shadow: 0 0 8px #f43f5e;
}

/* Audio Equalizer animation */
.live-card-eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
    width: 14px;
    flex-shrink: 0;
}

.live-card-eq .eq-bar {
    flex: 1;
    background: #f43f5e;
    border-radius: 1px;
    animation: eqWave 1.2s ease-in-out infinite alternate;
}

.live-card-eq .bar-1 { height: 40%; animation-delay: 0.1s; }
.live-card-eq .bar-2 { height: 90%; animation-delay: 0.3s; }
.live-card-eq .bar-3 { height: 60%; animation-delay: 0.15s; }
.live-card-eq .bar-4 { height: 75%; animation-delay: 0.4s; }

@keyframes eqWave {
    0% { height: 20%; }
    100% { height: 100%; }
}

.live-card-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #181926;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.live-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-card-thumb .thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.live-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.live-card-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.64rem;
}

.live-tag-pulse {
    color: #fda4af;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.live-tag-device {
    color: var(--text-muted);
}

.live-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.live-card-title:hover {
    color: #fda4af;
}

.live-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.live-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.live-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f43f5e, #fda4af);
    box-shadow: 0 0 8px rgba(244, 63, 94, 0.8);
    transition: width 0.3s ease;
}

.btn-join-watch {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f43f5e;
    color: #fff;
    border: none;
    text-decoration: none;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.4);
    transition: all 0.2s ease;
}

.btn-join-watch:hover {
    background: #e11d48;
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(244, 63, 94, 0.6);
}

.hajera-hero-info {
    flex: 1;
    min-width: 0;
}

.hajera-hero-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.hajera-hero-tag .tag-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fda4af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-last-active {
    font-size: 0.68rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 8px;
}

.hajera-hero-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}

.hajera-hero-desc {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin: 2px 0 0 0;
}

/* Progress track in Hero */
.hajera-hero-metrics {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-progress-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hero-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.hero-progress-labels strong {
    color: #fda4af;
    font-weight: 800;
}

.hero-progress-track {
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.hero-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f43f5e, #fb7185, #fda4af);
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
    transition: width 0.5s ease;
}

/* Hero 6-Mini Stat Counters */
.hero-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.hero-mini-stats.hero-stats-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 768px) {
    .hero-mini-stats.hero-stats-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hero-mini-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 6px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-mini-stat .mini-num {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.hero-mini-stat .mini-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 600;
}

.hero-mini-stat.stat-watchtime .mini-num { color: #38bdf8; }
.hero-mini-stat.stat-todaytime .mini-num { color: #f43f5e; }
.hero-mini-stat.stat-complete .mini-num { color: #34d399; }
.hero-mini-stat.stat-watching .mini-num { color: #fbbf24; }
.hero-mini-stat.stat-opened .mini-num { color: #cbd5e1; }
.hero-mini-stat.stat-unwatched .mini-num { color: #94a3b8; }

/* Activity Timeline Feed */
.hajera-timeline-feed {
    background: rgba(14, 15, 24, 0.7);
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.timeline-feed-header {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.timeline-feed-header h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
}

.timeline-feed-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
}

.timeline-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.timeline-entry:hover {
    background: rgba(255, 255, 255, 0.05);
}

.timeline-icon-wrap {
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 1px;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
}

.timeline-action {
    font-weight: 700;
    color: var(--text-primary);
}

.timeline-time {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.timeline-video-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fda4af;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-video-link:hover {
    text-decoration: underline;
}

.timeline-details {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.timeline-device {
    font-size: 0.64rem;
    color: var(--text-muted);
}

.timeline-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.hajera-chip.chip-timeline {
    border-color: rgba(244, 63, 94, 0.3);
    color: #fda4af;
}

.hajera-chip.chip-timeline.active {
    background: #f43f5e;
    color: #fff;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.5);
}

/* Interactive Filter Chips Carousel */
.hajera-filter-carousel {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 12px;
    padding: 2px 0;
}

.hajera-filter-carousel::-webkit-scrollbar {
    display: none;
}

.hajera-chips-track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
}

.hajera-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.hajera-chip:active {
    transform: scale(0.94);
}

.hajera-chip.active {
    background: rgba(244, 63, 94, 0.16);
    border-color: #f43f5e;
    color: #fff;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.3);
}

.chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-watching { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.dot-completed { background: #10b981; box-shadow: 0 0 6px #10b981; }
.dot-opened { background: #94a3b8; }
.dot-unwatched { background: #64748b; }

.chip-count {
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.68rem;
    font-weight: 700;
}

.hajera-chip.active .chip-count {
    background: rgba(244, 63, 94, 0.4);
    color: #fff;
}

/* Live Search / Quick Filter Bar */
.hajera-search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.hajera-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
}

.hajera-search-input-wrap .search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

.hajera-search-input {
    width: 100%;
    padding: 8px 32px 8px 34px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    transition: all 0.2s ease;
}

.hajera-search-input:focus {
    border-color: #f43f5e;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.25);
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.hajera-search-status {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.hajera-search-status strong {
    color: var(--text-primary);
}

/* ========================================
   ANDROID TOUCH CARDS (Hajera & Library)
   ======================================== */
.hajera-android-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.hajera-android-card {
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 10px;
    text-decoration: none;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.hajera-android-card:active {
    transform: scale(0.975);
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.4);
}

.hajera-android-card.status-completed {
    border-left: 3px solid #10b981;
}

.hajera-android-card.status-watching {
    border-left: 3px solid #f59e0b;
}

.hajera-android-card.status-opened {
    border-left: 3px solid #94a3b8;
}

.hajera-android-card.status-unwatched {
    border-left: 3px solid rgba(255, 255, 255, 0.15);
}

.hajera-card-thumb-box {
    position: relative;
    width: 104px;
    min-width: 104px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #11121c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.hajera-card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hajera-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.card-thumb-status-dot {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.card-thumb-status-dot.dot-completed { background: #10b981; box-shadow: 0 0 6px #10b981; }
.card-thumb-status-dot.dot-watching { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.card-thumb-status-dot.dot-opened { background: #94a3b8; }
.card-thumb-status-dot.dot-unwatched { background: #64748b; }

.hajera-thumb-duration {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.hajera-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hajera-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.hajera-card-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.hajera-card-rel-time {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.hajera-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.hajera-card-time-info {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: monospace, monospace;
    white-space: nowrap;
}

/* Progress track in Hajera card */
.hajera-card-progress-track {
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    margin-top: 2px;
}

.hajera-card-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    transition: width 0.3s ease;
}

.hajera-card-progress-fill.fill-completed {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.hajera-card-progress-fill.fill-watching {
    background: linear-gradient(90deg, #f59e0b, #f43f5e);
}

/* Status Badges */
.activity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.activity-badge.badge-completed {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.activity-badge.badge-progress {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.activity-badge.badge-opened {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.activity-badge.badge-unwatched {
    background: rgba(100, 116, 139, 0.14);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.28);
}

/* Filtered Empty State */
.hajera-filtered-empty {
    text-align: center;
    padding: 30px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-subtle);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.filtered-empty-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.hajera-filtered-empty h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.hajera-filtered-empty p {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

/* Recent Videos Android Cards */
.admin-android-videos-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.admin-video-android-card {
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 10px;
    text-decoration: none;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

.admin-video-android-card:active {
    transform: scale(0.975);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-accent);
}

.admin-video-thumb-wrap {
    position: relative;
    width: 96px;
    min-width: 96px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #11121c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.admin-video-card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-video-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.admin-video-dur-pill {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
}

.admin-video-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-video-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.admin-video-meta-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.admin-video-tag {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.admin-video-tag.quality-tag {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--accent-gold-bright);
    font-weight: 700;
}

.admin-video-time-tag {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* Import Jobs Grid & Rows */
.admin-jobs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-job-row {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-job-row.failed {
    border-color: rgba(224, 82, 82, 0.28);
    background: rgba(224, 82, 82, 0.04);
}

.admin-job-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.admin-job-title-box {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.admin-job-title-box strong {
    font-size: 0.84rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-status-pill {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.job-status-pill.status-downloading {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.job-status-pill.status-error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.job-status-pill.status-queued { background: rgba(107, 114, 128, 0.15); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.3); }
.job-status-pill.status-starting { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.job-status-pill.status-canceled { background: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }

.job-queue-tag {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.admin-job-err-msg {
    font-size: 0.74rem;
    color: #fca5a5;
}

.admin-job-timestamp {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-style: normal;
}

.admin-mini-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex: 1;
}

.admin-mini-bar span {
    display: block;
    height: 100%;
    background: var(--accent-gold);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.admin-job-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-job-progress em {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: normal;
}

.admin-empty {
    padding: 20px 14px;
    border: 1px dashed var(--border-subtle);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

/* High-Density Desktop Tables (>= 900px) */
.admin-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.admin-table th,
.admin-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--border-subtle);
    text-align: left;
    font-size: 0.84rem;
}

.admin-table th {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-table-video-title {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.84rem;
    transition: color 0.2s ease;
}

.admin-table-video-title:hover {
    color: var(--accent-gold-bright);
}

.admin-table-pill {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.admin-table-dur {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.admin-table-quality {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent-gold-bright);
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-alert {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.26);
    color: #a7f3d0;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
}

.admin-user-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-row-avatar {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
}

/* Activity Table Detailed Cell Styles */
.hajera-activity-table {
    min-width: 640px;
}

.cell-video-thumb {
    width: 64px;
    padding: 8px 6px !important;
}

.admin-table-thumb-link {
    display: block;
    width: 56px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #141520;
    border: 1px solid var(--border-subtle);
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.admin-table-thumb-link:hover {
    transform: scale(1.06);
    border-color: var(--accent-gold);
}

.admin-table-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-table-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.admin-video-link {
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.35;
}

.admin-video-link:hover {
    color: var(--accent-gold-bright) !important;
}

.activity-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}

.activity-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.activity-progress-fill.is-complete {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.activity-progress-fill.is-unwatched-fill {
    background: transparent !important;
    width: 0% !important;
}

.activity-progress-text {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 32px;
}

.activity-time-text {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-family: monospace, monospace;
}

.activity-relative-time {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.text-dim {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.admin-empty-table {
    text-align: center;
    padding: 24px !important;
    color: var(--text-muted);
    font-style: italic;
}

.row-unwatched {
    opacity: 0.75;
}

.row-unwatched:hover {
    opacity: 1;
}

/* Default Mobile/Desktop View Switching */
.admin-desktop-videos-table,
.hajera-desktop-table {
    display: none;
}

.admin-android-videos-list,
.hajera-android-cards-list {
    display: flex;
}

/* ========================================
   ACCESS CONTROL PANEL
   ======================================== */
.access-control-card {
    margin-top: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.access-control-card:hover {
    border-color: var(--border-accent);
}

.access-control-card.is-blocked {
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 0 24px rgba(239, 68, 68, 0.08);
}

.access-control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-subtle);
}

.access-control-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-shield {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.15));
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: #a78bfa;
}

.access-control-heading {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.access-status-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.session-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.block-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.block-status-badge.active {
    background: rgba(52, 211, 153, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(52, 211, 153, 0.25);
}

.block-status-badge.blocked {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: pulse-danger 2s ease-in-out infinite;
}

@keyframes pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.15); }
}

.access-control-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.access-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}

.access-action-row:first-child {
    padding-top: 0;
}

.access-action-info {
    flex: 1;
    min-width: 0;
}

.access-action-info h4 {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 3px 0;
}

.access-action-info p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

.access-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 0;
}

.btn-access-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.btn-access-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.btn-logout-sessions {
    background: rgba(251, 146, 60, 0.12);
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.25);
}

.btn-logout-sessions:hover:not(:disabled) {
    background: rgba(251, 146, 60, 0.22);
    border-color: rgba(251, 146, 60, 0.4);
    box-shadow: 0 4px 16px rgba(251, 146, 60, 0.15);
    transform: translateY(-1px);
}

.btn-logout-sessions:active:not(:disabled) {
    transform: scale(0.96);
}

.btn-block {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-block:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.18);
    transform: translateY(-1px);
}

.btn-block:active {
    transform: scale(0.96);
}

.btn-unblock {
    background: rgba(52, 211, 153, 0.12);
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.25);
}

.btn-unblock:hover {
    background: rgba(52, 211, 153, 0.22);
    border-color: rgba(52, 211, 153, 0.4);
    box-shadow: 0 4px 16px rgba(52, 211, 153, 0.15);
    transform: translateY(-1px);
}

.btn-unblock:active {
    transform: scale(0.96);
}

.danger-zone {
    border-radius: 12px;
    padding: 14px 12px !important;
    margin-top: 4px;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.1);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.danger-zone.is-blocked-zone {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.18);
}

.block-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.block-reason-input {
    width: 160px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s ease;
}

.block-reason-input:focus {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.block-reason-input::placeholder {
    color: var(--text-dim);
}

.block-reason-display {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    font-size: 0.75rem;
    color: #fca5a5;
    line-height: 1.4;
}

.block-reason-display strong {
    color: #fecaca;
}

/* Access Alert Messages */
.access-alert {
    border-radius: 12px;
    animation: alert-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.access-alert-success {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: #6ee7b7;
}

.access-alert-warning {
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.25);
    color: #fdba74;
}

@keyframes alert-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive for Access Control */
@media (max-width: 600px) {
    .access-control-card {
        border-radius: 14px;
        margin-top: 12px;
    }

    .access-control-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }

    .access-status-badges {
        width: 100%;
    }

    .access-control-body {
        padding: 12px 14px;
    }

    .access-action-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .access-action-row form,
    .block-form {
        width: 100%;
    }

    .btn-access-action {
        width: 100%;
        justify-content: center;
    }

    .block-form {
        flex-direction: column;
    }

    .block-reason-input {
        width: 100%;
    }

    .danger-zone {
        padding: 12px 10px !important;
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS (Tablet & Desktop)
   ======================================== */
@media (min-width: 600px) {
    .admin-stat-tiles-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .admin-stat-tiles-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .admin-jobs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-desktop-videos-table,
    .hajera-desktop-table {
        display: block !important;
    }

    .admin-android-videos-list,
    .hajera-android-cards-list {
        display: none !important;
    }
}


/* ========================================
   ERROR / FORBIDDEN PAGES
   ======================================== */
.error-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-deep);
    position: relative;
    overflow: hidden;
}

.error-container::before {
    content: '';
    position: absolute;
    width: min(500px, 90vw);
    height: min(500px, 90vw);
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-gold-glow-strong), transparent 70%);
    filter: blur(40px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
    opacity: 0.25;
}

.error-content {
    text-align: center;
    max-width: 460px;
    padding: 48px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(24px);
    animation: card-enter 0.7s var(--ease-out) both;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.error-content::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-xl) + 1px);
    background: linear-gradient(135deg, var(--accent-gold-dim), transparent 50%, var(--accent-gold-dim));
    z-index: -1;
    opacity: 0.2;
}

.error-icon {
    color: var(--danger);
    margin-bottom: 24px;
    opacity: 0.85;
}

.forbidden-icon {
    color: var(--accent-gold);
}

.error-content h1 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.error-content p {
    color: var(--text-secondary);
    margin-bottom: 28px;
    font-size: 0.98rem;
}

/* ================================================================
   LIQUID GLASS MOBILE NAVIGATION DOCK (ULTRA-LUXURY)
   Floating Frosted Capsule · Ambient Island Underglow · Dynamic Spotlights
   Dual-State Icon Springs · Elevated Crown FAB · Tactile Micro-Physics
   ================================================================ */

:root {
    --nav-dock-bg: rgba(10, 10, 18, 0.78);
    --nav-dock-border: rgba(255, 255, 255, 0.1);
    --nav-dock-glow: rgba(229, 184, 90, 0.16);
    --nav-dock-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75), 0 0 30px -5px rgba(229, 184, 90, 0.12);
    --nav-item-idle: rgba(165, 160, 180, 0.48);
    --nav-item-active: #f5cf7b;
    --nav-active-pill-bg: rgba(229, 184, 90, 0.12);
    --nav-active-pill-border: rgba(229, 184, 90, 0.28);
    --nav-active-pill-glow: 0 0 16px rgba(229, 184, 90, 0.22);
    --nav-icon-glow: drop-shadow(0 2px 8px rgba(229, 184, 90, 0.45));
    --fab-gradient: linear-gradient(135deg, #fef08a 0%, #f59e0b 45%, #d97706 100%);
    --fab-aura: radial-gradient(circle, rgba(245, 158, 11, 0.65) 0%, rgba(217, 119, 6, 0.2) 60%, transparent 80%);
    --fab-shadow: 0 12px 28px -4px rgba(245, 158, 11, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
    --fab-icon-color: #ffffff;
    --fab-border: rgba(255, 255, 255, 0.38);
}

.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 8px));
    left: 14px;
    right: 14px;
    max-width: 480px;
    margin: 0 auto;
    height: 68px;
    border-radius: 34px;
    background: var(--nav-dock-bg);
    backdrop-filter: blur(28px) saturate(210%);
    -webkit-backdrop-filter: blur(28px) saturate(210%);
    border: 1px solid var(--nav-dock-border);
    z-index: 1000;
    align-items: center;
    justify-content: space-around;
    box-shadow: 
        var(--nav-dock-shadow),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
    user-select: none;
    -webkit-user-select: none;
    animation: luxuryDockEntrance 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    padding: 0 8px;
    isolation: isolate;
}

@keyframes luxuryDockEntrance {
    0% {
        opacity: 0;
        transform: translateY(32px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .mobile-bottom-bar {
        display: flex;
    }
}

/* Atmospheric specular top gloss line */
.mobile-bottom-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
    pointer-events: none;
    border-radius: 34px 34px 0 0;
    z-index: 2;
}

/* Ambient dock underglow aura */
.mobile-bottom-bar::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 40px;
    background: radial-gradient(circle at 50% 115%, var(--nav-dock-glow), transparent 72%);
    z-index: -1;
    pointer-events: none;
    opacity: 0.85;
}

/* ---- NAV ITEM ---- */
.bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    gap: 3px;
    padding: 2px 0 0;
    color: var(--nav-item-idle);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    overflow: visible;
    border-radius: 20px;
}

.bottom-nav-item:active {
    transform: scale(0.91);
}

.bottom-nav-item.active {
    color: var(--nav-item-active);
}

/* ---- ICON CONTAINER & LIQUID SPOTLIGHT PILL ---- */
.bottom-nav-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 30px;
    border-radius: 15px;
    background: transparent;
    border: 1px solid transparent;
    box-sizing: border-box;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-nav-icon-wrap svg {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active tab liquid spotlight */
.bottom-nav-item.active .bottom-nav-icon-wrap {
    background: var(--nav-active-pill-bg);
    border-color: var(--nav-active-pill-border);
    box-shadow: var(--nav-active-pill-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    animation: activePillPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes activePillPop {
    0% {
        transform: translateY(0) scale(0.92);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-2px) scale(1);
        opacity: 1;
    }
}

/* Subtle micro-dot indicator under active items */
.bottom-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nav-item-active);
    box-shadow: 0 0 8px var(--nav-item-active);
    animation: activePipAppear 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes activePipAppear {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---- DUAL ICON OUTLINE & FILLED MORPHING ---- */
.nav-icon-outline,
.nav-icon-filled {
    position: absolute;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-shrink: 0;
    transition: opacity 0.22s ease,
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-icon-outline {
    opacity: 1;
    transform: scale(1);
}

.nav-icon-filled {
    opacity: 0;
    transform: scale(1);
}

.bottom-nav-item.active .nav-icon-outline {
    opacity: 0;
    transform: scale(1);
}

.bottom-nav-item.active .nav-icon-filled {
    opacity: 1;
    transform: scale(1.05);
    filter: var(--nav-icon-glow);
}

/* ---- MICRO-TYPOGRAPHY LABELS ---- */
.bottom-nav-label {
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.025em;
    color: inherit;
    white-space: nowrap;
    opacity: 0.72;
    transition: all 0.25s ease;
    transform: translateY(0);
}

.bottom-nav-item.active .bottom-nav-label {
    font-weight: 700;
    letter-spacing: 0.035em;
    color: var(--nav-item-active);
    opacity: 1;
    text-shadow: 0 0 12px var(--nav-dock-glow);
    transform: translateY(-1px);
}

/* ---- CHAT TAB ACCENT ---- */
.bottom-nav-item.nav-msg-btn.active {
    --nav-item-active: #38bdf8;
    --nav-active-pill-bg: rgba(56, 189, 248, 0.14);
    --nav-active-pill-border: rgba(56, 189, 248, 0.32);
    --nav-active-pill-glow: 0 0 16px rgba(56, 189, 248, 0.25);
    --nav-icon-glow: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.5));
}

/* ---- UNREAD MESSAGE BADGE ---- */
.bottom-nav-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ff4757 0%, #eb2f06 100%);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 0 2px rgba(10, 10, 18, 0.95),
        0 3px 8px rgba(235, 47, 6, 0.55);
    z-index: 4;
    animation: badgePulseGlow 2.2s infinite ease-in-out;
    letter-spacing: -0.02em;
}

@keyframes badgePulseGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(10, 10, 18, 0.95), 0 3px 8px rgba(235, 47, 6, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 2px rgba(10, 10, 18, 0.95), 0 0 14px rgba(255, 71, 87, 0.85);
    }
}

/* ============================================================
   CROWN UPLOAD FAB (ELEVATED JEWEL BUTTON)
   ============================================================ */

.bottom-nav-upload {
    flex: 0 0 auto;
    width: 64px;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    position: relative;
}

.bottom-nav-upload::before,
.bottom-nav-upload::after {
    display: none !important;
}

.bottom-nav-fab-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-top: -24px;
    background: transparent;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    isolation: isolate;
}

/* Dynamic breathing aura behind the elevated FAB */
.bottom-nav-fab-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--fab-aura);
    opacity: 0.75;
    filter: blur(10px);
    animation: fabAuraBreathe 3.5s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
}

@keyframes fabAuraBreathe {
    0% { transform: scale(0.88); opacity: 0.5; }
    100% { transform: scale(1.15); opacity: 0.85; }
}

.bottom-nav-upload .upload-btn-pill {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--fab-gradient);
    color: var(--fab-icon-color) !important;
    border: 2px solid var(--fab-border);
    box-shadow: 
        var(--fab-shadow),
        inset 0 2px 4px rgba(255, 255, 255, 0.45),
        inset 0 -2px 5px rgba(0, 0, 0, 0.35);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Glass shine on the top hemisphere of the button */
.bottom-nav-upload .upload-btn-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 8px;
    right: 8px;
    height: 16px;
    border-radius: 20px 20px 8px 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.bottom-nav-upload .upload-btn-pill svg {
    stroke: var(--fab-icon-color) !important;
    width: 23px;
    height: 23px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

/* Press state */
.bottom-nav-upload:active .bottom-nav-fab-ring {
    transform: scale(0.9) translateY(2px);
}

.bottom-nav-upload:active .upload-btn-pill svg {
    transform: rotate(90deg) scale(0.9);
}

/* Active State */
.bottom-nav-upload.active .upload-btn-pill {
    box-shadow: 
        var(--fab-shadow),
        0 0 24px rgba(245, 158, 11, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.7);
}

.bottom-nav-upload .bottom-nav-label {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--nav-item-idle);
    margin-top: 2px;
}

.bottom-nav-upload.active .bottom-nav-label {
    color: var(--nav-item-active);
    font-weight: 700;
    opacity: 1;
}

/* ---- Form Wrapper ---- */
.bottom-nav-form {
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1;
    height: 100%;
}

/* ================================================================
   THEME PALETTES ADAPTATION
   ================================================================ */

/* ---- Hajera Mode (Rose Romance) ---- */
.hajera-mode {
    --nav-dock-bg: rgba(20, 8, 16, 0.78);
    --nav-dock-border: rgba(244, 63, 94, 0.16);
    --nav-dock-glow: rgba(244, 63, 94, 0.22);
    --nav-dock-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75), 0 0 35px -5px rgba(244, 63, 94, 0.18);
    --nav-item-idle: rgba(244, 180, 195, 0.48);
    --nav-item-active: #fb7185;
    --nav-active-pill-bg: rgba(244, 63, 94, 0.16);
    --nav-active-pill-border: rgba(244, 63, 94, 0.36);
    --nav-active-pill-glow: 0 0 18px rgba(244, 63, 94, 0.32);
    --nav-icon-glow: drop-shadow(0 2px 8px rgba(251, 113, 133, 0.55));
    --fab-gradient: linear-gradient(135deg, #fbcfe8 0%, #f43f5e 45%, #9d174d 100%);
    --fab-aura: radial-gradient(circle, rgba(244, 63, 94, 0.75) 0%, rgba(157, 23, 77, 0.25) 60%, transparent 80%);
    --fab-shadow: 0 12px 28px -4px rgba(244, 63, 94, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
    --fab-border: rgba(255, 255, 255, 0.45);
}

/* ---- Cyberpunk Neon ---- */
html[data-theme="cyberpunk"] {
    --nav-dock-bg: rgba(4, 4, 16, 0.82);
    --nav-dock-border: rgba(0, 240, 255, 0.16);
    --nav-dock-glow: rgba(0, 240, 255, 0.22);
    --nav-dock-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8), 0 0 35px -5px rgba(0, 240, 255, 0.18);
    --nav-item-idle: rgba(148, 163, 184, 0.48);
    --nav-item-active: #00f0ff;
    --nav-active-pill-bg: rgba(0, 240, 255, 0.15);
    --nav-active-pill-border: rgba(0, 240, 255, 0.4);
    --nav-active-pill-glow: 0 0 18px rgba(0, 240, 255, 0.35);
    --nav-icon-glow: drop-shadow(0 2px 10px rgba(0, 240, 255, 0.6));
    --fab-gradient: linear-gradient(135deg, #67e8f9 0%, #00f0ff 40%, #c026d3 100%);
    --fab-aura: radial-gradient(circle, rgba(0, 240, 255, 0.75) 0%, rgba(192, 38, 211, 0.3) 60%, transparent 80%);
    --fab-shadow: 0 12px 28px -4px rgba(0, 240, 255, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
    --fab-icon-color: #040410;
    --fab-border: rgba(255, 255, 255, 0.5);
}

/* ---- Emerald Luxury ---- */
html[data-theme="emerald"] {
    --nav-dock-bg: rgba(4, 14, 10, 0.82);
    --nav-dock-border: rgba(16, 185, 129, 0.16);
    --nav-dock-glow: rgba(16, 185, 129, 0.22);
    --nav-dock-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75), 0 0 35px -5px rgba(16, 185, 129, 0.18);
    --nav-item-idle: rgba(147, 197, 253, 0.45);
    --nav-item-active: #34d399;
    --nav-active-pill-bg: rgba(16, 185, 129, 0.16);
    --nav-active-pill-border: rgba(16, 185, 129, 0.38);
    --nav-active-pill-glow: 0 0 18px rgba(16, 185, 129, 0.32);
    --nav-icon-glow: drop-shadow(0 2px 8px rgba(52, 211, 153, 0.55));
    --fab-gradient: linear-gradient(135deg, #6ee7b7 0%, #10b981 45%, #047857 100%);
    --fab-aura: radial-gradient(circle, rgba(16, 185, 129, 0.75) 0%, rgba(4, 120, 87, 0.25) 60%, transparent 80%);
    --fab-shadow: 0 12px 28px -4px rgba(16, 185, 129, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
    --fab-icon-color: #021a0a;
    --fab-border: rgba(255, 255, 255, 0.45);
}

/* ---- Sunset Velvet ---- */
html[data-theme="sunset"] {
    --nav-dock-bg: rgba(20, 8, 17, 0.82);
    --nav-dock-border: rgba(244, 63, 94, 0.16);
    --nav-dock-glow: rgba(244, 63, 94, 0.22);
    --nav-dock-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.75), 0 0 35px -5px rgba(244, 63, 94, 0.18);
    --nav-item-idle: rgba(253, 164, 175, 0.48);
    --nav-item-active: #fb7185;
    --nav-active-pill-bg: rgba(244, 63, 94, 0.16);
    --nav-active-pill-border: rgba(244, 63, 94, 0.38);
    --nav-active-pill-glow: 0 0 18px rgba(244, 63, 94, 0.32);
    --nav-icon-glow: drop-shadow(0 2px 8px rgba(251, 113, 133, 0.55));
    --fab-gradient: linear-gradient(135deg, #fed7aa 0%, #f43f5e 45%, #881337 100%);
    --fab-aura: radial-gradient(circle, rgba(244, 63, 94, 0.75) 0%, rgba(136, 19, 55, 0.25) 60%, transparent 80%);
    --fab-shadow: 0 12px 28px -4px rgba(244, 63, 94, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
    --fab-border: rgba(255, 255, 255, 0.45);
}


/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Love Banner Card for Hajera (Romantic Upgrade) ---- */
.love-banner-card {
    position: relative;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(190, 24, 93, 0.08), rgba(244, 63, 94, 0.12));
    border: 1.5px solid rgba(244, 63, 94, 0.3);
    border-radius: var(--radius-xl);
    margin-bottom: 32px;
    backdrop-filter: blur(28px);
    box-shadow:
        0 8px 40px rgba(244, 63, 94, 0.18),
        0 0 60px rgba(244, 63, 94, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: fade-in-up 0.6s var(--ease-out) both, love-glow-pulse 4s ease-in-out infinite;
    overflow: hidden;
    z-index: 1;
}

.love-banner-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-xl) + 1px);
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.6), transparent 30%, transparent 70%, rgba(190, 24, 93, 0.6));
    z-index: -1;
    opacity: 0.5;
    animation: border-rotate 6s linear infinite;
}

.love-banner-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 50%);
    animation: ambient-shift 8s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

/* Shimmer overlay */
.love-banner-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 200, 220, 0.08) 40%,
        rgba(255, 200, 220, 0.15) 50%,
        rgba(255, 200, 220, 0.08) 60%,
        transparent 80%
    );
    background-size: 200% 100%;
    animation: shimmer-sweep 3.5s ease-in-out infinite;
    border-radius: var(--radius-xl);
    z-index: 0;
    pointer-events: none;
}

.love-banner-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.love-banner-icon {
    font-size: 2.8rem;
    animation: heartbeat 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.5));
    flex-shrink: 0;
}

.love-banner-text .love-main-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fecdd3;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #fff1f2, #fda4af, #fecdd3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.love-typewriter-line {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fbb4c4;
    margin-bottom: 6px;
    min-height: 1.5em;
}

/* Typewriter cursor blink */
.love-typewriter-line::after {
    content: '|';
    color: #f43f5e;
    font-weight: 300;
    animation: cursor-blink 0.8s step-end infinite;
    margin-left: 2px;
}

.love-typewriter-line.typing-done::after {
    display: none;
}

.love-banner-text p {
    font-size: 0.94rem;
    color: #fda4af;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.love-quote {
    animation: quote-fade 0.6s ease both;
}

/* Floating particles inside banner */
.love-banner-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.love-banner-particles .lp {
    position: absolute;
    color: rgba(244, 63, 94, 0.25);
    font-size: 0.9rem;
    animation: lp-float 6s ease-in-out infinite;
    opacity: 0;
}

.lp:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; font-size: 1rem; }
.lp:nth-child(2) { left: 25%; top: 70%; animation-delay: 1s; font-size: 0.7rem; }
.lp:nth-child(3) { left: 50%; top: 15%; animation-delay: 2s; font-size: 1.1rem; }
.lp:nth-child(4) { left: 70%; top: 60%; animation-delay: 0.5s; font-size: 0.8rem; }
.lp:nth-child(5) { left: 85%; top: 30%; animation-delay: 1.5s; font-size: 1rem; }
.lp:nth-child(6) { left: 92%; top: 75%; animation-delay: 2.5s; font-size: 0.6rem; }

/* ---- Floating Hearts Background ---- */
.floating-hearts-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floating-heart {
    position: absolute;
    bottom: -30px;
    color: rgba(244, 63, 94, 0.15);
    font-size: 1.2rem;
    animation: float-up-heart linear forwards;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.2));
}

/* ---- Sparkle Cursor Trail ---- */
.sparkle-trail-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.sparkle-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.9), rgba(255, 182, 193, 0.6));
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle-fade 0.8s ease-out forwards;
    box-shadow: 0 0 6px rgba(244, 63, 94, 0.5);
}

.sparkle-particle.star {
    width: auto;
    height: auto;
    background: none;
    font-size: 0.7rem;
    color: rgba(244, 63, 94, 0.7);
    box-shadow: none;
}

/* ---- Hajera Mode — Romantic Accent Overrides Across All Pages ---- */
.hajera-mode {
    --hajera-accent: #f43f5e;
    --hajera-accent-glow: rgba(244, 63, 94, 0.22);
    --hajera-accent-soft: rgba(244, 63, 94, 0.08);
}

.hajera-mode .video-card {
    border-color: rgba(244, 63, 94, 0.16);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hajera-mode .video-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 16px 45px rgba(244, 63, 94, 0.22), 0 0 25px rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.45);
}

.hajera-mode .search-box:has(.search-input:focus) {
    border-color: rgba(244, 63, 94, 0.55);
    box-shadow: 0 0 24px rgba(244, 63, 94, 0.2);
}

.hajera-mode .search-box:has(.search-input:focus) .search-icon {
    color: #fb7185;
}

.hajera-mode .romantic-title {
    background: linear-gradient(135deg, #ffffff 10%, #fda4af 40%, #fb7185 75%, #f43f5e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 14px rgba(244, 63, 94, 0.3));
}

.hajera-mode .romantic-subtitle {
    color: #fda4af;
    text-shadow: 0 0 14px rgba(244, 63, 94, 0.25);
}

.hajera-mode .header-pill {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.35);
    color: #fda4af;
    box-shadow: 0 0 15px rgba(244, 63, 94, 0.15);
}

.hajera-mode .card-badge {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.92), rgba(190, 18, 60, 0.95));
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.35);
}

.hajera-mode .play-overlay {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.88), rgba(190, 18, 60, 0.92));
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.5);
}

.hajera-mode .btn-primary {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 50%, #be123c 100%);
    box-shadow: 0 4px 22px rgba(244, 63, 94, 0.4);
}

.hajera-mode .btn-primary:hover {
    box-shadow: 0 6px 28px rgba(244, 63, 94, 0.55);
}

.hajera-mode .btn-ghost:hover {
    background: rgba(244, 63, 94, 0.14);
    color: #fff1f2;
    border-color: rgba(244, 63, 94, 0.35);
}

.hajera-mode .upload-header-badge {
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(244, 63, 94, 0.35);
    color: #fda4af;
}

.hajera-mode .upload-badge-pulse {
    background: #f43f5e;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.9);
}

.hajera-mode .upload-container {
    border-color: rgba(244, 63, 94, 0.28);
    box-shadow: 0 16px 45px rgba(244, 63, 94, 0.16);
}

.hajera-mode .upload-header h1 {
    background: linear-gradient(135deg, #ffffff 15%, #fda4af 55%, #f43f5e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hajera-mode .upload-tabs {
    background: rgba(28, 10, 24, 0.7);
    border-color: rgba(244, 63, 94, 0.28);
}

.hajera-mode .upload-tab.active {
    background: rgba(244, 63, 94, 0.24);
    color: #fff1f2;
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 0 16px rgba(244, 63, 94, 0.2);
}

.hajera-mode .upload-tab.active svg {
    color: #fb7185;
}

.hajera-mode .dropzone-icon-bubble {
    background: rgba(244, 63, 94, 0.18);
    border-color: rgba(244, 63, 94, 0.38);
    color: #fb7185;
    box-shadow: 0 4px 22px rgba(244, 63, 94, 0.28);
}

.hajera-mode .upload-dropzone:hover,
.hajera-mode .upload-dropzone.dragover {
    border-color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
    box-shadow: 0 0 40px rgba(244, 63, 94, 0.26);
}

.hajera-mode .upload-dropzone:hover .dropzone-browse-pill {
    background: linear-gradient(135deg, #f43f5e, #be123c);
    color: #ffffff;
    border-color: #fb7185;
    box-shadow: 0 2px 14px rgba(244, 63, 94, 0.5);
}

.hajera-mode .form-input:focus,
.hajera-mode .url-input:focus,
.hajera-mode .quality-select:focus,
.hajera-mode .comment-form textarea:focus {
    border-color: rgba(244, 63, 94, 0.55);
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.22);
}

.hajera-mode .progress-fill,
.hajera-mode .import-progress-fill {
    background: linear-gradient(90deg, #f43f5e, #fb7185, #fb923c);
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
}

.hajera-mode .badge-viewer,
.hajera-mode .avatar-viewer {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.28), rgba(190, 18, 60, 0.38));
    border-color: rgba(244, 63, 94, 0.45);
    color: #fff1f2;
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.25);
}

.hajera-mode .vp-progress-played {
    background: linear-gradient(90deg, #f43f5e 0%, #fb7185 50%, #fb923c 100%);
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
}

.hajera-mode .vp-progress-handle {
    background: #fb7185;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.95), 0 0 4px #ffffff;
}

.hajera-mode .upload-fab {
    background: linear-gradient(135deg, #fed7aa 0%, #f43f5e 45%, #be123c 100%);
    box-shadow: 0 4px 20px rgba(244, 63, 94, 0.45);
}

.hajera-mode .bottom-nav-item.active {
    color: #fb7185;
}

/* ---- Double Tap Seek Ripple Indicator ---- */
.vp-seek-ripple {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vp-seek-left {
    left: 0;
    background: radial-gradient(circle at left center, rgba(255, 255, 255, 0.18), transparent 70%);
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

.vp-seek-right {
    right: 0;
    background: radial-gradient(circle at right center, rgba(255, 255, 255, 0.18), transparent 70%);
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

.vp-ripple-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transform: scale(0.7);
    transition: transform 0.25s var(--ease-spring);
}

.vp-seek-ripple.vp-ripple-active {
    opacity: 1;
    animation: seek-ripple-fade 0.6s ease forwards;
}

.vp-seek-ripple.vp-ripple-active .vp-ripple-content {
    transform: scale(1.1);
}

@keyframes seek-ripple-fade {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.1); }
}

.romantic-title {
    background: linear-gradient(135deg, #fecdd3, #f43f5e, #fda4af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: gradient-text-shift 4s ease-in-out infinite;
}

.romantic-subtitle {
    color: #fda4af;
    font-style: italic;
}

/* ---- Romantic Keyframes ---- */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.25); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    56% { transform: scale(1); }
}

@keyframes shimmer-sweep {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes love-glow-pulse {
    0%, 100% { box-shadow: 0 8px 40px rgba(244, 63, 94, 0.18), 0 0 60px rgba(244, 63, 94, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
    50% { box-shadow: 0 8px 50px rgba(244, 63, 94, 0.28), 0 0 80px rgba(244, 63, 94, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
}

@keyframes border-rotate {
    0% { opacity: 0.5; }
    50% { opacity: 0.8; }
    100% { opacity: 0.5; }
}

@keyframes ambient-shift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5%, -5%); }
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes lp-float {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.5; }
    80% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-30px) scale(1.2) rotate(20deg); }
}

@keyframes float-up-heart {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-110vh) rotate(360deg) scale(0.3);
        transform: translateY(-110dvh) rotate(360deg) scale(0.3);
        opacity: 0;
    }
}

@keyframes sparkle-fade {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: scale(0) translate(var(--sx, 10px), var(--sy, -15px));
        opacity: 0;
    }
}

@keyframes quote-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes gradient-text-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 200% center; }
}

/* ========================================
   RESPONSIVE & ANDROID OPTIMIZATIONS
   ======================================== */
@media (max-width: 768px) {
    .desktop-only-logout {
        display: none !important;
    }

    .navbar {
        padding: 12px 18px;
    }

    .btn-upload {
        display: none;
    }

    .main-content {
        padding: 18px 14px calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .dashboard-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
    }

    .search-box {
        width: 100%;
        min-width: unset;
    }

    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    .video-card {
        border-radius: var(--radius-md);
    }

    .card-info {
        padding: 12px 14px;
    }

    .card-title {
        font-size: 0.92rem;
        margin-bottom: 8px;
    }

    .card-meta {
        font-size: 0.76rem;
    }

    .play-overlay {
        width: 44px;
        height: 44px;
    }

    .play-overlay svg {
        width: 20px;
        height: 20px;
    }

    .login-card {
        padding: 36px 22px;
        border-radius: var(--radius-lg);
    }

    .theme-top-bar {
        right: 18px;
        top: 18px;
    }

    .theme-options-grid {
        grid-template-columns: 1fr;
    }

    .video-title {
        font-size: 1.35rem;
    }

    .video-info-header {
        flex-direction: column;
        gap: 12px;
    }

    .comments-section {
        padding: 20px 16px;
        border-radius: var(--radius-lg);
    }

    .upload-form {
        padding: 22px 16px;
        border-radius: var(--radius-lg);
    }

    .upload-dropzone {
        padding: 36px 16px;
    }

    .mobile-bottom-bar {
        display: flex;
    }

    .btn-text {
        display: none;
    }

    .video-action-buttons .btn {
        padding: 8px 12px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .header-titles h1 {
        font-size: 1.6rem;
    }

    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .user-badge span:not(.badge-role) {
        display: none;
    }

    .vp-cinema {
        border-radius: var(--radius-md);
        margin-bottom: 18px;
    }

    .vp-btn {
        width: 32px;
        height: 32px;
    }

    .vp-btn-seek {
        width: 36px;
    }

    .vp-time {
        font-size: 0.72rem;
    }

    .vp-volume-group {
        display: flex;
        padding-right: 0;
        background: transparent;
        border-color: transparent;
    }

    .vp-volume-slider-wrap {
        display: none;
    }

    .vp-controls {
        padding: 0 8px 6px;
    }

    .vp-center-btn {
        width: 56px;
        height: 56px;
    }

    .vp-center-btn svg {
        width: 32px;
        height: 32px;
    }
}

/* ========================================
   MOBILE PERFORMANCE PASS
   ======================================== */
h1,
h2,
h3,
.nav-logo,
.logo-text,
.logo-tagline,
.vault-pill,
.header-pill,
.badge-role,
.card-badge,
.vp-speed-btn {
    letter-spacing: 0;
}

@media (max-width: 768px) {
    body {
        background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-primary) 100%);
    }

    .ambient-background {
        display: none;
    }

    .navbar,
    .theme-switcher-btn,
    .login-card,
    .theme-modal-backdrop,
    .theme-modal,
    .search-input,
    .video-card,
    .card-badge,
    .play-overlay,
    .card-duration,
    .upload-form,
    .comments-section,
    .love-banner-card,
    .love-banner-shimmer,
    .user-badge,
    .resume-toast,
    .vp-controls-row,
    .vp-status-badge,
    .vp-loading-panel,
    .vp-center-btn,
    .vp-speed-menu,
    .wt-invite-banner,
    .wt-toast-pill,
    .wt-sync-badge,
    .wt-player-chat-toast,
    .wt-status-bar,
    .wt-chat-drawer,
    .access-control-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .dashboard-header-bar,
    .empty-state,
    .video-grid,
    .video-card,
    .upload-container,
    .vp-cinema,
    .comments-section,
    .comment-item,
    .love-banner-card {
        animation: none;
    }

    .love-banner-card {
        box-shadow: 0 4px 20px rgba(244, 63, 94, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .love-banner-card::before {
        animation: none;
    }

    .love-banner-card::after {
        display: none;
    }

    .love-banner-shimmer {
        animation: shimmer-sweep 5s ease-in-out infinite;
        background: linear-gradient(
            110deg,
            transparent 25%,
            rgba(255, 200, 220, 0.06) 45%,
            rgba(255, 200, 220, 0.1) 50%,
            rgba(255, 200, 220, 0.06) 55%,
            transparent 75%
        );
        background-size: 200% 100%;
    }

    .love-banner-icon {
        animation: heartbeat 1.4s ease-in-out infinite;
        filter: none;
        font-size: 2.2rem;
    }

    .love-banner-particles {
        display: none;
    }

    .love-main-title {
        font-size: 1.3rem;
    }

    .love-typewriter-line {
        font-size: 0.92rem;
    }

    .floating-hearts-container {
        opacity: 0.7;
    }

    .sparkle-trail-container {
        /* Touch sparkle handled in JS, keep container */
    }

    .romantic-title {
        animation: gradient-text-shift 5s ease-in-out infinite;
        background-size: 200% auto;
    }

    .video-card::after,
    .btn-primary::after,
    .login-btn::after,
    .btn-upload-submit::after,
    .play-overlay::before {
        display: none;
    }

    .navbar {
        padding: 10px 14px;
        background: rgba(8, 8, 14, 0.92);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

    .navbar.is-scrolled {
        padding: 8px 14px;
    }

    .nav-left,
    .nav-right {
        gap: 8px;
        min-width: 0;
    }

    .nav-logo {
        min-width: 0;
        gap: 8px;
        font-size: 1.15rem;
    }

    .logo-icon-wrapper {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .nav-brand-pill {
        display: none;
    }

    .nav-btn-text {
        display: none;
    }

    .nav-right .btn-ghost {
        padding: 8px 10px;
        min-height: 36px;
    }

    .nav-theme-toggle {
        width: 36px;
        height: 36px;
    }

    .user-badge {
        max-width: 140px;
        padding: 3px 10px 3px 3px;
        gap: 8px;
    }

    .badge-avatar-wrap,
    .badge-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .badge-chevron {
        display: none;
    }

    .user-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    .badge-role {
        display: none;
    }

    .main-content {
        width: 100%;
        padding: 18px 14px calc(88px + env(safe-area-inset-bottom));
    }

    .dashboard-header-bar {
        gap: 12px;
        margin-bottom: 18px;
    }

    .header-pill {
        margin-bottom: 8px;
        padding: 4px 10px;
        font-size: 0.68rem;
    }

    .header-titles h1,
    .upload-header h1 {
        font-size: 1.7rem;
        line-height: 1.16;
    }

    .subtitle,
    .upload-header p {
        font-size: 0.9rem;
    }

    .search-input,
    .form-input,
    .comment-input,
    .wt-chat-input,
    .url-textarea,
    .quality-select,
    .thumbnail-input,
    .hajera-search-input,
    .block-reason-input,
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 12px;
    }

    .video-card {
        box-shadow: 0 1px 0 var(--border-subtle);
    }

    .video-card:hover {
        transform: none;
        box-shadow: 0 1px 0 var(--border-subtle);
    }

    .card-thumbnail::before {
        opacity: 0.65;
    }

    .login-container {
        justify-content: flex-start;
        min-height: 100svh;
        padding: 84px 14px 24px;
    }

    .login-top-bar {
        top: 14px;
        right: 14px;
    }

    .login-card {
        max-width: 100%;
        padding: 28px 18px;
        box-shadow: 0 10px 36px rgba(0, 0, 0, 0.48);
    }

    .logo-text {
        font-size: 2rem;
    }

    .logo-tagline {
        font-size: 0.72rem;
    }

    .theme-modal-backdrop {
        align-items: flex-end;
        padding: 0;
        background: rgba(0, 0, 0, 0.72);
    }

    .theme-modal {
        max-width: none;
        border-radius: 20px 20px 0 0;
        padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
        transform: translateY(100%);
    }

    .theme-modal-backdrop.active .theme-modal {
        transform: translateY(0);
    }

    .theme-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .theme-card-option {
        padding: 14px 10px;
    }

    .upload-header {
        margin-bottom: 20px;
        text-align: center;
    }

    .upload-form {
        padding: 22px 18px;
        gap: 18px;
        border-radius: 20px;
    }

    .upload-dropzone {
        padding: 28px 16px;
        min-height: auto;
    }

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

    .selected-name {
        overflow-wrap: anywhere;
    }

    .watch-page {
        max-width: 100%;
    }

    .vp-cinema {
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7);
    }

    .vp-cinema video {
        height: 100%;
        min-height: 0;
        object-fit: contain;
    }

    .vp-status-badge {
        top: 10px;
        right: 10px;
        max-width: calc(100% - 20px);
        padding: 7px 10px;
        font-size: 0.72rem;
    }

    .vp-loading-panel {
        gap: 8px;
        padding: 12px 16px;
    }

    .vp-spinner {
        width: 30px;
        height: 30px;
    }

    .vp-loading-title {
        font-size: 0.82rem;
    }

    .vp-loading-detail {
        font-size: 0.72rem;
    }

    .vp-retry-btn {
        min-height: 30px;
        padding: 5px 12px;
        font-size: 0.72rem;
    }

    .vp-controls-row {
        gap: 2px;
        min-height: 44px;
        padding: 4px;
        border-radius: 10px;
    }

    .vp-controls-left,
    .vp-controls-right {
        gap: 2px;
    }

    .vp-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    #vpPipBtn {
        display: none;
    }

    .vp-speed-btn {
        min-width: 42px;
        padding: 0 8px;
    }

    .video-info-section {
        padding: 16px 0;
        margin-bottom: 18px;
    }

    .video-meta {
        gap: 10px;
    }

    .video-action-buttons {
        width: 100%;
    }

    .comments-section {
        box-shadow: 0 1px 0 var(--border-subtle);
    }

    .comment-input-wrapper {
        gap: 10px;
    }

    .comment-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.78rem;
    }

    .comment-header {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .btn-comment {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .video-card {
        border-radius: 14px;
    }

    .card-thumbnail {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .card-info {
        padding: 12px 10px 14px 10px;
    }

    .card-title {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
    }

    .card-duration {
        right: 8px;
        bottom: 8px;
        padding: 3px 7px;
        font-size: 0.75rem;
    }

    .card-badge {
        top: 8px;
        left: 8px;
    }

    .play-overlay {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 768px) {
    .continue-section {
        margin-bottom: 24px;
    }

    .continue-rail {
        grid-auto-columns: minmax(230px, 82vw);
        gap: 12px;
    }

    /* ========================================
       ANDROID / MOBILE ADMIN CONTROL CENTER (POLISHED UI)
       ======================================== */
    .admin-app-container {
        overflow-x: hidden;
    }

    .admin-main-content {
        padding: 12px 12px calc(92px + env(safe-area-inset-bottom)) !important;
        width: 100%;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* 1. Android Top App Bar */
    .android-app-bar {
        padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px 14px;
        gap: 8px;
    }

    .app-bar-left {
        gap: 10px;
    }

    .app-bar-back-btn {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .app-bar-back-btn:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.1);
    }

    .app-bar-badge {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .app-bar-title {
        font-size: 1.05rem;
        font-weight: 800;
    }

    .app-bar-actions {
        gap: 6px;
    }

    .app-bar-actions .nav-msg-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .app-bar-actions .nav-msg-btn .nav-btn-text {
        display: none;
    }

    .app-bar-actions .btn-app-bar-action {
        width: 38px;
        height: 38px;
    }

    .app-bar-actions .btn-app-bar-action:active {
        transform: scale(0.92);
    }

    .app-bar-actions .user-badge {
        padding: 2px;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .app-bar-actions .user-badge .badge-info,
    .app-bar-actions .user-badge .badge-chevron {
        display: none;
    }

    .app-bar-actions .user-badge .badge-avatar-wrap {
        width: 36px;
        height: 36px;
    }

    .app-bar-actions .user-badge .badge-avatar {
        width: 36px;
        height: 36px;
    }

    .app-bar-actions .user-badge:active {
        transform: scale(0.92);
    }

    /* 2. Status & Cleanup Toolbar Banner */
    .admin-quick-toolbar {
        padding: 10px 12px;
        border-radius: 14px;
        margin-bottom: 14px;
        gap: 8px;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.07);
    }

    .quick-toolbar-info {
        font-size: 0.76rem;
        gap: 6px;
    }

    .btn-cleanup-compact {
        padding: 6px 12px;
        font-size: 0.74rem;
        min-height: 32px;
        border-radius: 8px;
    }

    /* 3. VPS Monitor Card on Mobile */
    .vps-monitor-card {
        padding: 16px 14px;
        border-radius: 16px;
        margin-bottom: 16px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .vps-monitor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .vps-header-left {
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .vps-icon-wrap {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .vps-title-group {
        flex: 1;
        min-width: 0;
        gap: 3px;
    }

    .vps-badge-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .vps-main-heading {
        font-size: 1.05rem;
        line-height: 1.25;
        word-break: break-word;
    }

    .vps-subtext {
        font-size: 0.74rem;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.4;
    }

    .vps-header-right {
        width: 100%;
    }

    .vps-status-pill {
        width: 100%;
        justify-content: center;
        padding: 7px 14px;
        font-size: 0.76rem;
    }

    .vps-metrics-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .vps-metric-box {
        padding: 14px 14px;
        border-radius: 14px;
        gap: 10px;
        min-width: 0;
        box-sizing: border-box;
        width: 100%;
    }

    .vps-metric-box:active {
        transform: scale(0.98);
    }

    .metric-top-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
    }

    .metric-icon-title {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }

    .metric-badge-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .metric-name {
        font-size: 0.86rem;
        font-weight: 800;
        line-height: 1.2;
        word-break: break-word;
    }

    .metric-sub {
        font-size: 0.72rem;
        max-width: none;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.35;
    }

    .metric-val-wrap {
        text-align: right;
        flex-shrink: 0;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .metric-pct {
        font-size: 1.25rem;
        font-weight: 800;
        white-space: nowrap;
        line-height: 1;
    }

    .metric-badge-pill {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 8px;
        white-space: nowrap;
    }

    .metric-bottom-info {
        font-size: 0.72rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 4px 10px;
        min-width: 0;
        color: var(--text-secondary);
    }

    .vps-metric-box.metric-node {
        grid-column: auto;
    }

    .metric-runtime-details {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    .runtime-chip {
        min-width: 0;
        padding: 6px 6px;
        border-radius: 8px;
        text-align: center;
        box-sizing: border-box;
    }

    .chip-k {
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chip-v {
        font-size: 0.74rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (max-width: 360px) {
        .vps-monitor-card {
            padding: 12px 10px;
        }

        .vps-metric-box {
            padding: 12px 10px;
            gap: 8px;
        }

        .metric-icon-title {
            gap: 8px;
        }

        .metric-badge-icon {
            width: 28px;
            height: 28px;
        }

        .metric-name {
            font-size: 0.82rem;
        }

        .metric-sub {
            font-size: 0.68rem;
        }

        .metric-pct {
            font-size: 1.15rem;
        }

        .metric-bottom-info {
            font-size: 0.68rem;
        }

        .metric-runtime-details {
            gap: 4px;
        }

        .runtime-chip {
            padding: 4px 3px;
        }

        .chip-k {
            font-size: 0.54rem;
        }

        .chip-v {
            font-size: 0.68rem;
        }
    }

    /* 4. 6-Tile Key Stats Grid */
    .admin-stat-tiles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 16px;
    }

    .stat-tile {
        padding: 10px 10px;
        min-height: 64px;
        border-radius: 14px;
        gap: 8px;
    }

    .stat-tile:active {
        transform: scale(0.96);
    }

    .stat-tile-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .stat-tile-val {
        font-size: 1.2rem;
    }

    .stat-tile-label {
        font-size: 0.62rem;
    }

    .admin-section-card {
        padding: 14px 10px;
        border-radius: 16px;
        margin-bottom: 16px;
    }

    /* 5. Hajera Hero Widget & Live Playback */
    .hajera-tracker-section {
        padding: 12px 10px;
    }

    .hajera-hero-widget {
        padding: 12px 10px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .hajera-hero-main {
        gap: 10px;
        margin-bottom: 10px;
    }

    .hajera-hero-avatar {
        width: 44px;
        height: 44px;
    }

    .hajera-hero-online-dot {
        width: 12px;
        height: 12px;
    }

    .hajera-hero-tag {
        gap: 4px;
        margin-bottom: 2px;
    }

    .hajera-hero-tag .tag-title {
        font-size: 0.66rem;
    }

    .hero-live-badge {
        font-size: 0.62rem;
        padding: 1px 6px;
    }

    .hero-last-active {
        font-size: 0.62rem;
    }

    .live-sync-indicator {
        font-size: 0.58rem;
        padding: 1px 4px;
    }

    .hajera-hero-title {
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .hajera-hero-desc {
        font-size: 0.72rem;
    }

    /* Live Playing Card */
    .hajera-live-card {
        padding: 8px 10px;
        border-radius: 12px;
        gap: 8px;
        margin-bottom: 10px;
    }

    .live-card-thumb {
        width: 40px;
        height: 40px;
        border-radius: 6px;
    }

    .live-card-title {
        font-size: 0.78rem;
    }

    .btn-join-watch {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    .hero-mini-stats.hero-stats-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .hero-mini-stat {
        padding: 5px 3px;
        border-radius: 8px;
    }

    .hero-mini-stat .mini-num {
        font-size: 0.88rem;
    }

    .hero-mini-stat .mini-label {
        font-size: 0.56rem;
    }

    /* 6. Active Sessions & Security on Mobile */
    .access-control-card {
        padding: 14px 10px;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .access-control-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 12px;
        margin-bottom: 14px;
    }

    .access-control-heading {
        font-size: 0.98rem;
    }

    .access-control-subtitle {
        font-size: 0.72rem;
    }

    .access-status-badges {
        width: 100%;
        gap: 5px;
    }

    .session-count-badge,
    .block-status-badge {
        font-size: 0.7rem;
        padding: 4px 9px;
    }

    .access-actions-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .access-box {
        padding: 12px 10px;
        border-radius: 12px;
    }

    .access-box-desc {
        font-size: 0.74rem;
        margin-bottom: 10px;
    }

    .access-box-btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 6px;
    }

    .access-box-btns form {
        width: 100%;
    }

    .btn-access-action {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.78rem;
        border-radius: 8px;
    }

    .block-form-inline {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 6px;
    }

    .block-reason-input {
        width: 100%;
        min-width: 0;
        padding: 8px 10px;
        font-size: 16px; /* Prevents auto zoom */
    }

    .detailed-sessions-container {
        margin-top: 14px;
        padding-top: 12px;
    }

    .detailed-sessions-heading {
        font-size: 0.88rem;
    }

    .detailed-sessions-sub {
        font-size: 0.7rem;
    }

    .sessions-desktop-table {
        display: none !important;
    }

    .sessions-mobile-list {
        display: flex;
        gap: 8px;
    }

    .session-mobile-card {
        padding: 10px;
        border-radius: 12px;
        gap: 6px;
    }

    .session-card-top {
        gap: 6px;
    }

    .session-user-pill {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .session-current-badge,
    .session-other-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .btn-terminate-session {
        padding: 4px 8px;
        font-size: 0.68rem;
    }

    .session-card-body {
        font-size: 0.72rem;
        gap: 3px;
    }

    /* 7. Filter Carousel & Search */
    .hajera-filter-carousel {
        margin-bottom: 10px;
        padding: 2px 0;
    }

    .hajera-chips-track {
        gap: 6px;
    }

    .hajera-chip {
        padding: 6px 10px;
        font-size: 0.74rem;
        border-radius: 16px;
    }

    .hajera-search-bar {
        margin-bottom: 12px;
        gap: 8px;
    }

    .hajera-search-input {
        padding: 9px 32px 9px 34px;
        font-size: 16px; /* Prevents auto zoom */
        border-radius: 10px;
    }

    .hajera-search-status {
        font-size: 0.7rem;
        width: 100%;
        text-align: right;
    }

    /* 8. Video Cards & Timeline */
    .hajera-desktop-table,
    .admin-desktop-videos-table {
        display: none !important;
    }

    .hajera-android-cards-list,
    .admin-android-videos-list {
        display: flex;
        gap: 8px;
    }

    .hajera-android-card,
    .admin-video-android-card {
        padding: 8px;
        border-radius: 12px;
        gap: 10px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .hajera-android-card:active,
    .admin-video-android-card:active {
        transform: scale(0.975);
        background: rgba(255, 255, 255, 0.06);
    }

    .hajera-card-thumb-box,
    .admin-video-thumb-wrap {
        width: 92px;
        min-width: 92px;
        border-radius: 8px;
    }

    .hajera-card-title,
    .admin-video-title {
        font-size: 0.82rem;
        line-height: 1.28;
    }

    .hajera-card-rel-time,
    .admin-video-time-tag {
        font-size: 0.64rem;
    }

    .hajera-card-time-info {
        font-size: 0.66rem;
    }

    .activity-badge {
        font-size: 0.64rem;
        padding: 1px 6px;
    }

    .admin-video-tag {
        font-size: 0.62rem;
        padding: 1px 5px;
    }

    .admin-video-meta-tags .admin-user-cell span {
        font-size: 0.72rem;
    }

    .hajera-timeline-feed {
        padding: 12px 10px;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .timeline-feed-header h4 {
        font-size: 0.86rem;
    }

    .timeline-feed-sub {
        font-size: 0.68rem;
    }

    .timeline-list {
        max-height: 380px;
        gap: 6px;
    }

    .timeline-entry {
        padding: 8px 10px;
        border-radius: 8px;
        gap: 8px;
    }

    .timeline-icon-wrap {
        font-size: 0.95rem;
    }

    .timeline-action {
        font-size: 0.74rem;
    }

    .timeline-time {
        font-size: 0.64rem;
    }

    .timeline-video-link {
        font-size: 0.74rem;
    }

    .timeline-details {
        font-size: 0.68rem;
    }

    .timeline-device {
        font-size: 0.6rem;
    }

    /* 9. Jobs Grid on Mobile */
    .admin-jobs-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 16px;
    }

    .admin-job-row {
        padding: 8px 10px;
        border-radius: 10px;
        gap: 4px;
    }

    .admin-job-title-box strong {
        font-size: 0.78rem;
    }

    .job-status-pill {
        font-size: 0.6rem;
        padding: 1px 5px;
    }

    .admin-job-err-msg {
        font-size: 0.7rem;
    }

    .thumbnail-manager {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .thumbnail-preview-box {
        width: 100%;
    }

    .thumbnail-form {
        align-items: stretch;
    }

    .thumbnail-form .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .theme-options-grid {
        grid-template-columns: 1fr;
    }

    .nav-logo span {
        display: none;
    }

    .vp-speed-group {
        display: none;
    }
}

/* ========================================
   MOBILE-FIRST DEFAULTS
   ======================================== */
@media (max-width: 768px) {
.desktop-only-logout {
    display: none !important;
}

.btn-upload {
    display: none;
}

.btn-text {
    display: none;
}

#btnTheaterMode {
    display: none;
}

.ambient-background {
    display: none;
}

.video-card::before,
.video-card::after {
    display: none;
}

.video-card:hover .card-title {
    color: var(--text-primary);
}

.video-card:hover .thumb-img {
    transform: none;
}

.vp-volume-slider-wrap {
    display: none;
}

.dashboard-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.search-box {
    width: 100%;
    min-width: unset;
}

.video-info-header {
    flex-direction: column;
    gap: 12px;
}

.video-action-buttons {
    width: 100%;
}

.video-action-buttons .btn {
    padding: 8px 12px;
    font-size: 0.82rem;
}

.video-title {
    font-size: 1.35rem;
}

.search-input,
.form-input,
.comment-input {
    font-size: 16px;
}

.card-duration {
    right: 8px;
    bottom: 8px;
    padding: 3px 7px;
    font-size: 0.7rem;
}

.card-badge {
    top: 8px;
    left: 8px;
}

.play-overlay {
    width: 38px;
    height: 38px;
}

.play-overlay svg {
    width: 20px;
    height: 20px;
}

.vp-cinema {
    border-radius: 12px;
    margin-bottom: 18px;
}

.watch-page {
    max-width: 100%;
}

/* Mobile-first: Force single-column stacked layout */
.watch-layout-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.watch-side-col {
    position: static;
}

.suggestions-list {
    max-height: none;
}

/* Mobile suggestions panel compact */
.suggestions-panel {
    padding: 16px 12px;
    border-radius: var(--radius-lg);
}

.suggestions-heading {
    font-size: 1rem;
}

.suggestion-card {
    padding: 6px;
    gap: 10px;
    border-radius: 10px;
}

.suggestion-thumb-wrap {
    width: 120px;
    min-width: 120px;
    border-radius: 8px;
}

.suggestion-title {
    font-size: 0.84rem;
    -webkit-line-clamp: 2;
}

.suggestion-author {
    font-size: 0.72rem;
}

.suggestion-meta {
    font-size: 0.68rem;
}

.suggestion-duration {
    font-size: 0.62rem;
    padding: 1px 4px;
}

/* Mobile autoplay toggle */
.autoplay-toggle-wrapper {
    padding: 3px 8px;
    border-radius: 14px;
}

.autoplay-label {
    font-size: 0.68rem;
}

/* Mobile comment section */
.comments-section {
    padding: 16px 12px;
    border-radius: var(--radius-lg);
    margin-top: 16px;
}

.comments-title {
    font-size: 1.05rem;
    gap: 8px;
}

.comments-title svg {
    width: 18px;
    height: 18px;
}

.comment-form {
    margin-bottom: 20px;
}

.comment-input-wrapper {
    gap: 10px;
}

.comment-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.78rem;
}

.comment-input-group {
    padding: 10px 12px;
    border-radius: var(--radius-md);
}

.comment-input {
    min-height: 36px;
    font-size: 16px;
}

.comment-form-actions {
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.comment-emoji-bar {
    gap: 2px;
    width: 100%;
    justify-content: flex-start;
}

.emoji-chip {
    padding: 4px 5px;
    font-size: 0.92rem;
    border-radius: 6px;
}

.comment-btn-group {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
}

.comment-item {
    padding: 12px 10px;
    gap: 10px;
    border-radius: var(--radius-md);
}

.comment-header {
    flex-wrap: wrap;
    gap: 4px 8px;
}

.comment-author {
    font-size: 0.85rem;
}

.comment-author-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
}

.comment-text {
    font-size: 0.88rem;
    line-height: 1.5;
}

.comment-actions-bar {
    gap: 8px;
}

.comment-action-btn {
    font-size: 0.75rem;
    padding: 3px 6px;
}

.no-comments-box {
    padding: 30px 16px;
}

.no-comments-title {
    font-size: 1rem;
}

.no-comments-subtitle {
    font-size: 0.82rem;
}

/* Mobile chip filters */
.chip-btn {
    padding: 4px 10px;
    font-size: 0.72rem;
    border-radius: 10px;
}

/* Mobile autoplay toast at bottom */
.autoplay-toast {
    left: 12px;
    right: 12px;
    bottom: 70px;
}

.autoplay-toast-content {
    max-width: none;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
}

.autoplay-toast-spinner {
    width: 32px;
    height: 32px;
}

.autoplay-toast-subtitle {
    font-size: 0.68rem;
}

.autoplay-toast-title {
    font-size: 0.82rem;
}

.autoplay-toast-actions .btn {
    padding: 5px 10px;
    font-size: 0.78rem;
}

/* Video uploader bar stacked on mobile */
.video-uploader-bar {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.video-uploader-meta-line {
    flex-wrap: wrap;
    gap: 4px;
}

.btn-comment {
    width: 100%;
    justify-content: center;
}

.theme-modal-backdrop {
    align-items: flex-end;
    padding: 0;
}

.theme-modal {
    max-width: none;
    border-radius: 20px 20px 0 0;
    padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
}

.theme-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.title-edit-input {
    font-size: 1.1rem;
}
}

/* (Legacy DESKTOP RESTORE block removed — handled above in consolidated min-width:769px) */

/* ============================================================
   WATCH TOGETHER — CINEMA SYNC & LIVE CHAT UI
   ============================================================ */

/* ---- Watch Together Buttons ---- */
.wt-action-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-wt-start {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(245, 158, 11, 0.35));
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fef3c7;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.btn-wt-start::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s ease;
}

.btn-wt-start:hover {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.35), rgba(245, 158, 11, 0.55));
    border-color: #fbbf24;
    color: #ffffff;
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px) scale(1.02);
}

.btn-wt-start:hover::before {
    opacity: 1;
    transform: scale(1);
}

.btn-wt-stop {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.35));
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fee2e2;
    font-weight: 700;
}

.btn-wt-stop:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(220, 38, 38, 0.55));
    border-color: #f87171;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.35);
}

.btn-wt-chat {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(225, 29, 72, 0.35));
    border: 1px solid rgba(244, 63, 94, 0.45);
    color: #ffe4e6;
    font-weight: 700;
}

.btn-wt-chat:hover {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.35), rgba(225, 29, 72, 0.55));
    border-color: #fb7185;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.35);
}

/* ---- Watch Together In-Page Invite Banner ---- */
.wt-invite-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: var(--radius-lg, 18px);
    background: linear-gradient(135deg, rgba(20, 18, 38, 0.9), rgba(38, 24, 64, 0.85));
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.wt-invite-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.6), transparent);
}

.wt-invite-banner.visible {
    display: flex;
}

.wt-invite-content {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.wt-invite-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.wt-invite-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.4);
    overflow: hidden;
}

.wt-invite-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wt-invite-live-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #141226;
    box-shadow: 0 0 10px #22c55e;
    animation: wt-pulse 1.4s ease-in-out infinite;
}

.wt-invite-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wt-invite-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wt-invite-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f472b6;
    background: rgba(236, 72, 153, 0.15);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(236, 72, 153, 0.35);
}

.wt-invite-sync-pill {
    font-size: 0.65rem;
    font-weight: 700;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.12);
    padding: 2px 7px;
    border-radius: 10px;
}

.wt-invite-text h4 {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
}

.wt-invite-host-name {
    color: #fbbf24;
    font-weight: 800;
}

.wt-invite-sub {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-invite-sub svg {
    flex-shrink: 0;
    color: #38bdf8;
}

.wt-invite-video-title {
    color: #ffffff;
    font-weight: 600;
}

.wt-invite-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.wt-btn-join {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 18px;
    border-radius: var(--radius-md, 14px);
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.45);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.wt-btn-join:hover {
    background: linear-gradient(135deg, #f43f5e, #a855f7);
    box-shadow: 0 6px 24px rgba(236, 72, 153, 0.65);
    transform: translateY(-1px) scale(1.02);
    color: #ffffff;
}

.wt-btn-dismiss {
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md, 14px);
    padding: 9px 14px;
    font-size: 0.84rem;
    transition: all 0.2s ease;
}

.wt-btn-dismiss:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ---- Global Floating Watch Together Invite Card ---- */
.wt-global-invite-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-24px) scale(0.96);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s ease;
    max-width: 540px;
    width: calc(100vw - 32px);
    margin: 0 auto;
}

.wt-global-invite-toast.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.wt-toast-card,
.wt-toast-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-xl, 24px);
    background: linear-gradient(135deg, rgba(14, 16, 28, 0.94), rgba(24, 22, 42, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 
                0 0 0 1px rgba(255, 255, 255, 0.05),
                0 0 32px rgba(236, 72, 153, 0.2);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.wt-toast-card::before,
.wt-toast-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.wt-toast-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.wt-toast-avatar-box,
.wt-toast-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(236, 72, 153, 0.3));
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.wt-toast-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wt-toast-avatar-letter {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
}

.wt-toast-live-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #0e101c;
    box-shadow: 0 0 10px #22c55e;
    animation: wt-pulse 1.4s ease-in-out infinite;
}

.wt-toast-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.wt-toast-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wt-toast-badge,
.wt-toast-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f472b6;
    background: rgba(236, 72, 153, 0.14);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.wt-badge-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: 0 0 8px #ec4899;
    animation: wt-pulse 1.2s ease-in-out infinite;
}

.wt-toast-status-pill {
    font-size: 0.65rem;
    font-weight: 700;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.12);
    padding: 2px 7px;
    border-radius: 10px;
}

.wt-toast-title {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 0.94rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-toast-host {
    color: #fbbf24;
    font-weight: 800;
}

.wt-toast-video {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-toast-video svg {
    flex-shrink: 0;
    color: #38bdf8;
}

.wt-toast-video-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-toast-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.wt-toast-join-btn {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 9px 16px;
    border-radius: var(--radius-md, 14px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.45);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.wt-toast-join-btn:hover {
    background: linear-gradient(135deg, #f43f5e, #a855f7);
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 24px rgba(236, 72, 153, 0.65);
    color: #ffffff;
}

.wt-toast-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wt-toast-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

/* ---- Sync Overlay on Player ---- */
.wt-sync-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wt-sync-overlay.visible {
    opacity: 1;
    transform: translateY(0);
}

.wt-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 10, 18, 0.88);
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 999px;
    color: #7dd3fc;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.25);
}

.wt-sync-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
    animation: wt-pulse 1.2s ease-in-out infinite;
}

@keyframes wt-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* ---- Floating Live Reactions Layer ---- */
.wt-floating-reactions-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 55;
}

.wt-floating-emoji {
    position: absolute;
    bottom: 24px;
    font-size: 2.2rem;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
    animation: wt-float-up cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

@keyframes wt-float-up {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.35) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translateY(0) scale(var(--target-scale, 1.2)) rotate(var(--target-rotate, 10deg));
    }
    40% {
        transform: translateY(-80px) scale(var(--target-scale, 1.1)) translateX(18px) rotate(calc(var(--target-rotate, 10deg) * -1));
    }
    70% {
        opacity: 0.92;
        transform: translateY(-190px) scale(var(--target-scale, 1)) translateX(-15px) rotate(var(--target-rotate, 5deg));
    }
    100% {
        opacity: 0;
        transform: translateY(-310px) scale(0.8) translateX(25px) rotate(calc(var(--target-rotate, 10deg) * 1.5));
    }
}

/* ---- In-Player Floating Message Toast ---- */
.wt-player-chat-toast {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 10px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(236, 72, 153, 0.55);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 24px rgba(236, 72, 153, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: min(340px, 85vw);
    pointer-events: auto;
}

.wt-player-chat-toast.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wt-player-chat-toast:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: #f472b6;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 28px rgba(236, 72, 153, 0.45);
}

.wt-toast-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(168, 85, 247, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.wt-toast-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.wt-toast-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wt-toast-sender {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f472b6;
    line-height: 1.2;
}

.wt-toast-msg {
    font-size: 0.82rem;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ---- Status Bar Underneath Player ---- */
.wt-status-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    margin-top: 10px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(30, 27, 75, 0.65));
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.84rem;
}

.wt-status-bar.visible {
    display: flex;
}

.wt-status-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #93c5fd;
}

.wt-status-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: wt-pulse 1.5s ease-in-out infinite;
}

.wt-status-bar.wt-status-waiting .wt-status-live-dot {
    background: #eab308;
    box-shadow: 0 0 10px #eab308;
}

.wt-status-bar.wt-status-reconnecting .wt-status-live-dot {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
}

.wt-status-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wt-status-resync-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wt-status-resync-btn:hover {
    background: rgba(56, 189, 248, 0.3);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.wt-status-resync-btn.syncing svg {
    animation: wt-spin 0.6s linear infinite;
}

@keyframes wt-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wt-status-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.25));
    border: 1px solid rgba(236, 72, 153, 0.4);
    color: #fbcfe8;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wt-status-chat-btn:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(168, 85, 247, 0.4));
    color: #ffffff;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.35);
    transform: translateY(-1px);
}

.wt-status-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.35));
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wt-status-stop-btn:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.45), rgba(185, 28, 28, 0.6));
    color: #ffffff;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.wt-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wt-chat-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wt-chat-stop-btn:hover {
    background: rgba(239, 68, 68, 0.35);
    color: #ffffff;
    border-color: #ef4444;
}

.wt-unread-badge {
    padding: 1px 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    animation: wt-badge-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wt-badge-pop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ---- Slide-in Live Chat Drawer ---- */
.wt-chat-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 90vw;
    z-index: 10050;
    background: rgba(10, 10, 16, 0.94);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.wt-chat-drawer.open {
    transform: translateX(0);
}

.wt-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.wt-chat-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wt-chat-avatar-duo {
    display: flex;
    align-items: center;
    position: relative;
    width: 44px;
    height: 28px;
}

.wt-mini-av-slot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(10, 10, 16, 0.9);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.wt-mini-av-slot.av-slot-host {
    left: 0;
    z-index: 1;
    background: linear-gradient(135deg, #eab308, #d97706);
}

.wt-mini-av-slot.av-slot-guest {
    left: 14px;
    z-index: 2;
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.wt-mini-av-slot .wt-mini-av-img,
.wt-mini-av-slot .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.wt-mini-av-slot .avatar-letter {
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
}

.wt-live-beacon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    margin-right: 5px;
    vertical-align: middle;
    animation: wt-pulse 1.4s ease-in-out infinite;
}

.wt-chat-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
}

.wt-chat-sub {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.wt-chat-close-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.wt-chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* ---- Messages Area ---- */
.wt-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.wt-chat-welcome {
    text-align: center;
    padding: 24px 12px;
    margin: auto 0;
    opacity: 0.75;
}

.wt-welcome-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.wt-chat-welcome h4 {
    margin: 0 0 4px 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: #ffffff;
}

.wt-chat-welcome p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.wt-chat-msg {
    display: flex;
    gap: 10px;
    max-width: 88%;
}

.wt-chat-msg.wt-msg-mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.wt-chat-msg.wt-msg-other {
    align-self: flex-start;
}

.wt-msg-enter {
    animation: wt-msg-slide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wt-msg-slide {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.wt-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.wt-msg-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.wt-avatar-host {
    background: linear-gradient(135deg, #eab308, #b45309);
}

.wt-avatar-guest {
    background: linear-gradient(135deg, #ec4899, #9d174d);
}

.wt-msg-bubble {
    padding: 9px 13px;
    border-radius: 16px;
    position: relative;
    line-height: 1.45;
    word-break: break-word;
}

.wt-msg-mine .wt-msg-bubble {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(245, 158, 11, 0.28));
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-bottom-right-radius: 4px;
    color: #fef08a;
}

.wt-msg-other .wt-msg-bubble {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(225, 29, 72, 0.25));
    border: 1px solid rgba(244, 63, 94, 0.35);
    border-bottom-left-radius: 4px;
    color: #fecdd3;
}

.wt-msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: 0.68rem;
    opacity: 0.8;
}

.wt-msg-author {
    font-weight: 700;
}

.wt-msg-time {
    font-size: 0.62rem;
    opacity: 0.7;
}

.wt-msg-text {
    font-size: 0.85rem;
    color: #ffffff;
}

.wt-chat-system {
    align-self: center;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-align: center;
    margin: 4px 0;
}

/* ---- Quick Emoji & Reactions Bar ---- */
.wt-emoji-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.wt-emoji-bar::-webkit-scrollbar {
    display: none;
}

.wt-emoji-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.wt-emoji-btn:hover {
    transform: scale(1.25);
    background: rgba(255, 255, 255, 0.1);
}

.wt-emoji-btn:active {
    transform: scale(0.92);
}

/* ---- Chat Footer / Input ---- */
.wt-chat-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 10, 16, 0.95);
}

.wt-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 4px 6px 4px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wt-input-wrap:focus-within {
    border-color: #ec4899;
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.25);
}

.wt-chat-emoji-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted, #9a94a6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    margin-left: -4px;
}

.wt-chat-emoji-btn:hover {
    color: var(--accent-gold, #e5b85a);
    background: rgba(229, 184, 90, 0.15);
    transform: scale(1.1);
}

.wt-chat-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-family: var(--font-body);
    outline: none;
}

.wt-chat-input::placeholder {
    color: var(--text-dim);
}

.wt-chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.wt-chat-send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.5);
}

.wt-chat-send-btn:active {
    transform: scale(0.92);
}

/* ---- Mobile Responsive for Watch Together ---- */
@media (max-width: 768px) {
    .wt-chat-drawer {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 70vh;
        height: 70dvh;
        max-height: 70dvh;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        overscroll-behavior-y: contain;
    }

    .wt-chat-drawer.open {
        transform: translateY(0);
    }

    .wt-invite-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .wt-invite-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 8px;
    }

    .wt-btn-join {
        flex: 1;
        justify-content: center;
    }

    .wt-btn-dismiss {
        padding: 9px 12px;
    }

    .wt-global-invite-toast {
        top: 14px;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }

    .wt-toast-card,
    .wt-toast-pill {
        padding: 12px 14px;
        gap: 12px;
        border-radius: 18px;
    }

    .wt-toast-avatar-box,
    .wt-toast-icon {
        width: 40px;
        height: 40px;
    }

    .wt-toast-title {
        font-size: 0.86rem;
    }

    .wt-toast-video {
        font-size: 0.76rem;
    }

    .wt-toast-join-btn {
        padding: 7px 12px;
        font-size: 0.78rem;
    }

    .wt-status-bar {
        font-size: 0.78rem;
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .wt-status-right {
        flex-wrap: wrap;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ========================================================
   ADMIN SESSION MANAGEMENT & ACCESS CONTROL STYLING
   ======================================================== */
.access-control-card {
    background: linear-gradient(145deg, rgba(17, 19, 28, 0.95), rgba(10, 11, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.access-control-card.is-blocked {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.15);
}

.access-control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.access-control-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.access-control-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    letter-spacing: -0.01em;
}

.access-control-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

.access-status-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.session-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.session-badge-muaj {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
}

.session-badge-hajera {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.35);
    color: #fda4af;
}

.block-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
}

.block-status-badge.active {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

.block-status-badge.blocked {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171;
    animation: blockedPulse 2s infinite ease-in-out;
}

@keyframes blockedPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
}

/* Actions Grid */
.access-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.access-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.access-box:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.access-box-hajera {
    border-left: 3px solid #f43f5e;
}

.access-box-muaj {
    border-left: 3px solid #8b5cf6;
}

.access-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.access-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.access-box-title h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.access-box-pill {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.access-box-pill.pill-active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.access-box-pill.pill-blocked {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.access-box-pill.pill-muaj {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
}

.access-box-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 14px 0;
    line-height: 1.45;
}

.access-box-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-access-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.btn-access-action:active {
    transform: scale(0.96);
}

.btn-access-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.btn-logout-sessions {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.35);
    color: #fda4af;
}

.btn-logout-sessions:hover:not(:disabled) {
    background: rgba(244, 63, 94, 0.28);
    border-color: rgba(244, 63, 94, 0.6);
    color: #fff;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.35);
}

.btn-logout-other {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
}

.btn-logout-other:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.28);
    border-color: rgba(139, 92, 246, 0.6);
    color: #fff;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.35);
}

.btn-logout-all-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.btn-logout-all-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fff;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
}

.btn-block {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.btn-block:hover {
    background: rgba(239, 68, 68, 0.35);
    color: #fff;
}

.btn-unblock {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.btn-unblock:hover {
    background: rgba(16, 185, 129, 0.3);
    color: #fff;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.3);
}

.block-form-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 180px;
}

.block-reason-input {
    flex: 1;
    min-width: 100px;
    padding: 6px 10px;
    font-size: 0.76rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    outline: none;
    transition: border-color 0.2s ease;
}

.block-reason-input:focus {
    border-color: #f43f5e;
}

.block-reason-display {
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    font-size: 0.74rem;
    color: #fca5a5;
}

/* Detailed Active Sessions Container */
.detailed-sessions-container {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.detailed-sessions-header {
    margin-bottom: 14px;
}

.detailed-sessions-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detailed-sessions-heading {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.detailed-sessions-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.sessions-table {
    width: 100%;
    border-collapse: collapse;
}

.sessions-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
}

.sessions-table td {
    padding: 10px 12px;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.session-row.is-current-session {
    background: rgba(16, 185, 129, 0.04);
}

.session-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 700;
}

.session-user-pill.pill-muaj {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.session-user-pill.pill-hajera {
    background: rgba(244, 63, 94, 0.15);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.session-device-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.device-icon {
    font-size: 1.1rem;
}

.device-meta {
    display: flex;
    flex-direction: column;
}

.device-name {
    font-weight: 600;
    color: var(--text-primary);
}

.device-sid {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: monospace;
}

.session-ip-code {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.74rem;
    color: #93c5fd;
}

.session-current-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    font-size: 0.7rem;
    font-weight: 700;
}

.session-other-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.7rem;
}

.btn-terminate-session {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-terminate-session:hover {
    background: rgba(239, 68, 68, 0.28);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.btn-terminate-session.btn-terminate-self {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.btn-terminate-session.btn-terminate-self:hover {
    background: rgba(245, 158, 11, 0.28);
    color: #fff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Mobile Sessions List */
.sessions-mobile-list {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.session-mobile-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-mobile-card.is-current-card {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.03);
}

.session-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.session-card-user-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.session-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
}

.session-card-detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.session-detail-val {
    color: var(--text-primary);
}

.session-detail-ip {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
    color: #93c5fd;
    font-size: 0.72rem;
}

.empty-sessions-cell,
.empty-sessions-card {
    text-align: center;
    padding: 18px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .access-actions-grid {
        grid-template-columns: 1fr;
    }

    .sessions-desktop-table {
        display: none;
    }

    .sessions-mobile-list {
        display: flex;
    }
}

/* ==========================================================================
   Zero-CLS Skeleton Loading Framework
   ========================================================================== */
.skel-bone {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 8px);
    position: relative;
    overflow: hidden;
}

@keyframes skelShimmerPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.95; }
}

.skel-pulse {
    animation: skelShimmerPulse 1.6s ease-in-out infinite;
}

/* Skeleton Video Card (Exact match for .video-card: zero layout shift) */
.skeleton-video-card {
    background: var(--bg-card, #11131a);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.skeleton-thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
}

.skeleton-info {
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.skeleton-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.09);
}

.skeleton-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.skeleton-title-1 {
    height: 14px;
    width: 85%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.skeleton-title-2 {
    height: 14px;
    width: 55%;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
}

.skeleton-meta-row {
    height: 10px;
    width: 45%;
    border-radius: 3px;
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.06);
}

/* Skeleton Continue Watching Card */
.skeleton-continue-card {
    flex: 0 0 220px;
    min-width: 220px;
}

/* Skeleton Suggestion Card */
.skeleton-suggestion-card {
    display: flex;
    gap: 10px;
    padding: 6px;
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-card, #11131a);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
    margin-bottom: 8px;
}

.skeleton-suggestion-thumb {
    width: 100px;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
}

.skeleton-suggestion-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.skeleton-suggestion-title {
    height: 12px;
    width: 80%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.skeleton-suggestion-meta {
    height: 9px;
    width: 50%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
}

/* Skeleton Comment Item */
.skeleton-comment-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-card, #11131a);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
    margin-bottom: 8px;
}

.skeleton-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.09);
}

.skeleton-comment-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-comment-author {
    height: 11px;
    width: 30%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.skeleton-comment-text {
    height: 13px;
    width: 90%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
}

.color-warn { color: #f59e0b; }
.color-ok { color: #10b981; }

/* ==========================================================================
   Cloudflare R2 & VPS Storage Sync Hub
   ========================================================================== */
.r2-storage-hub-section {
    margin-bottom: 24px;
    background: var(--bg-card, #1e1e2d);
    border-radius: 16px;
    border: 1px solid rgba(56, 189, 248, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.r2-hub-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-r2-sync-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #fff;
    border: 1px solid rgba(56, 189, 248, 0.4);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    transition: all 0.2s ease;
}

.btn-r2-sync-all:hover {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}

.r2-all-synced-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.r2-storage-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    padding: 20px;
}

.r2-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.r2-tile.tile-r2-cdn {
    border-color: rgba(56, 189, 248, 0.25);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.r2-tile.tile-vps-disk {
    border-color: rgba(168, 85, 247, 0.25);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.r2-tile.tile-sync-health {
    border-color: rgba(245, 158, 11, 0.25);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.r2-tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.r2-tile-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 6px;
}

.badge-cdn { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.badge-vps { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.badge-ok { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.badge-warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

.r2-tile-pct {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.r2-tile-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.r2-tile-count {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.r2-tile-sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.r2-progress-fill {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #38bdf8, #0284c7);
}

.r2-tile-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 8px;
}

.r2-tile-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ==========================================================================
   Android Native Mobile-First Cloudflare R2 Storage Tracker
   ========================================================================== */
.r2-android-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px 16px;
}

.r2-android-video-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.r2-android-video-card.is-synced {
    border-color: rgba(56, 189, 248, 0.25);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.r2-android-video-card.is-pending {
    border-color: rgba(245, 158, 11, 0.25);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.r2-card-main-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.r2-card-thumb-box {
    position: relative;
    width: 96px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.r2-card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r2-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
}

.r2-card-duration {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.r2-card-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.r2-card-title-link {
    color: var(--text-primary, #fff);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.r2-card-title-link:hover {
    color: #38bdf8;
}

.r2-card-chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.r2-mini-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chip-size { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary, #94a3b8); }
.chip-disk { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.2); }
.chip-missing { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
.chip-r2 { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); }
.chip-vps-only { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }

.r2-card-action-bar {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 8px;
}

.btn-android-sync-r2 {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #fff;
    border: 1px solid rgba(56, 189, 248, 0.4);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.3);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-android-sync-r2:active {
    transform: scale(0.98);
}

.r2-synced-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4ade80;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 8px;
}

/* In-Card Android Progress Bar */
.r2-android-progress-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.3s ease;
}

.r2-prog-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
}

.r2-prog-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #38bdf8;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.r2-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    animation: r2Pulse 1s infinite alternate;
}

@keyframes r2Pulse {
    0% { opacity: 0.4; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 12px #38bdf8; }
}

.r2-prog-pct {
    font-weight: 800;
    color: #38bdf8;
    font-size: 0.85rem;
}

.r2-prog-track {
    height: 6px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.r2-prog-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #0284c7, #38bdf8, #818cf8);
    background-size: 200% 100%;
    animation: shimmerSlide 1.5s linear infinite;
    transition: width 0.25s ease-out;
}

@keyframes shimmerSlide {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.r2-prog-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-secondary, #94a3b8);
}

.r2-prog-bytes {
    font-weight: 700;
    color: var(--text-primary, #fff);
}

.r2-prog-speed {
    color: #38bdf8;
    font-weight: 700;
}

.r2-prog-eta {
    color: var(--text-muted, #64748b);
}

.glow-emerald {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4ade80;
    font-weight: 700;
    font-size: 0.82rem;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Watch Page Video CDN & VPS Storage Badges */
.uploader-cdn-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.76rem;
    padding: 2px 8px;
    border-radius: 12px;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.uploader-cdn-tag.tag-r2-cdn {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.28);
}

.uploader-cdn-tag.tag-vps-server {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.live-dot-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}
.spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.heart-pulse {
    display: inline-block;
    animation: heart-beat 1.2s ease-in-out infinite;
}
@keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}