/* root.css */
/* =============================================================================
   RateFlix — Design System Tokens
   All CSS custom properties. NEVER hardcode colors anywhere else.
   ============================================================================= */

/* =============================================================================
   DARK MODE (default)
   ============================================================================= */
:root,
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary:     #0D0E1A;
    --bg-card:        #13152A;
    --bg-input:       #1A1D35;
    --bg-sidebar:     #0A0B16;
    --bg-overlay:     rgba(0, 0, 0, 0.7);

    /* Text */
    --text-primary:   #E8EAFF;
    --text-secondary: #A0A8CC;
    --text-muted:     #6B7280;

    /* Borders */
    --border-subtle:  rgba(124, 58, 237, 0.2);
    --border-card:    rgba(124, 58, 237, 0.15);
    --border-input:   rgba(124, 58, 237, 0.25);

    /* Glass morphism */
    --glass-bg:       rgba(255, 255, 255, 0.03);
    --glass-hover:    rgba(255, 255, 255, 0.05);

    /* Skeleton loading */
    --skeleton-base:  #1A1D35;
    --skeleton-shine: #232645;

    /* Scrollbar */
    --scrollbar-track: #0D0E1A;
    --scrollbar-thumb: rgba(124, 58, 237, 0.3);
}

/* =============================================================================
   LIGHT MODE
   ============================================================================= */
[data-theme="light"] {
    --bg-primary:     #F0F2FF;
    --bg-card:        #FFFFFF;
    --bg-input:       #F8F9FF;
    --bg-sidebar:     #FAFAFF;
    --bg-overlay:     rgba(0, 0, 0, 0.5);

    --text-primary:   #0D0E1A;
    --text-secondary: #374151;
    --text-muted:     #6B7280;

    --border-subtle:  rgba(124, 58, 237, 0.15);
    --border-card:    rgba(124, 58, 237, 0.1);
    --border-input:   rgba(124, 58, 237, 0.2);

    --glass-bg:       rgba(255, 255, 255, 0.8);
    --glass-hover:    rgba(255, 255, 255, 0.95);

    --skeleton-base:  #E8EAFF;
    --skeleton-shine: #D4D8FF;

    --scrollbar-track: #F0F2FF;
    --scrollbar-thumb: rgba(124, 58, 237, 0.2);
}

/* =============================================================================
   SHARED TOKENS (theme-independent)
   ============================================================================= */
:root {
    /* Brand */
    --accent-primary:    #7C3AED;
    --accent-secondary:  #06B6D4;
    --gradient-main:     linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
    --gradient-hover:    linear-gradient(135deg, #6D28D9 0%, #0891B2 100%);
    --gradient-subtle:   linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(6,182,212,0.1) 100%);

    /* Semantic */
    --success:      #10B981;
    --success-bg:   rgba(16, 185, 129, 0.1);
    --warning:      #F59E0B;
    --warning-bg:   rgba(245, 158, 11, 0.1);
    --danger:       #EF4444;
    --danger-bg:    rgba(239, 68, 68, 0.1);
    --info:         #3B82F6;
    --info-bg:      rgba(59, 130, 246, 0.1);

    /* Radius */
    --radius-sm:     6px;
    --radius-card:   12px;
    --radius-input:  8px;
    --radius-btn:    8px;
    --radius-lg:     16px;
    --radius-xl:     20px;
    --radius-full:   9999px;

    /* Spacing (8px base grid) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Sidebar */
    --sidebar-width:          260px;
    --sidebar-width-collapsed: 0px;
    --topbar-height:          60px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* Transitions */
    --transition:       200ms ease;
    --transition-slow:  400ms ease;
    --transition-fast:  100ms ease;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 24px rgba(124,58,237,0.2);

    /* Z-index stack */
    --z-base:    1;
    --z-card:    10;
    --z-sticky:  100;
    /* Stacking: overlay dims the PAGE; the sidebar rides ABOVE the overlay.
       (overlay < sidebar is essential — reversed, taps on the menu hit the
       overlay's close handler and the menu appears broken) */
    --z-overlay: 300;
    --z-sidebar: 400;
    --z-modal:   400;
    --z-toast:   500;
}

/* =============================================================================
   RESET + BASE
   ============================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color var(--transition), color var(--transition);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); }

a { color: var(--accent-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-secondary); }

img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: var(--font-sans); }
input, textarea, select { font-family: var(--font-sans); }

/* Numeric displays */
.num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* =============================================================================
   TYPOGRAPHY SCALE
   ============================================================================= */
.text-display { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; }
.text-h1      { font-size: clamp(1.5rem,  3vw, 2rem);   font-weight: 700; letter-spacing: -0.02em; }
.text-h2      { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 700; }
.text-h3      { font-size: 1.125rem; font-weight: 600; }
.text-body    { font-size: 0.9375rem; }
.text-sm      { font-size: 0.8125rem; }
.text-xs      { font-size: 0.75rem; }

/* =============================================================================
   GLASS CARD PATTERN
   ============================================================================= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    position: relative;
}
/* The gradient top-accent uses a clipped ::before; we inset it slightly and
   round its corners instead of relying on overflow:hidden on the card, which
   (with backdrop-filter) truncated tall cards on mobile browsers. */

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--gradient-main);
    opacity: 0.8;
    border-radius: 0 0 2px 2px;
}

.card-body { padding: var(--space-5); }
.card-sm   { padding: var(--space-4); }

.card-hover {
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(124, 58, 237, 0.4);
}

/* =============================================================================
   BUTTON PATTERNS
   ============================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-btn);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary */
.btn-primary {
    background: var(--gradient-main);
    color: #ffffff;
    border-color: transparent;
}
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
    color: #ffffff;
}
.btn-primary:active { transform: translateY(0); }

/* Secondary */
.btn-secondary {
    background: transparent;
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.btn-secondary:hover {
    background: rgba(124, 58, 237, 0.08);
    transform: translateY(-1px);
    color: var(--accent-primary);
}

/* Danger */
.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

/* Ghost */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-subtle);
}
.btn-ghost:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: var(--border-input);
}

/* Sizes */
.btn-sm  { padding: 0.4rem 0.875rem; font-size: 0.8125rem; }
.btn-lg  { padding: 0.875rem 1.75rem; font-size: 1rem; }
.btn-full { width: 100%; }

/* Loading state */
.btn-loading { position: relative; color: transparent !important; }
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* =============================================================================
   INPUT PATTERN
   ============================================================================= */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.form-input,
.form-select,
.form-textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    width: 100%;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}

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

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.form-input.error { border-color: var(--danger); }
.form-input.error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

.form-error {
    font-size: 0.8125rem;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Input with icon */
.input-wrap { position: relative; }
.input-wrap .form-input { padding-left: 2.75rem; }
.input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* =============================================================================
   BADGES + STATUS
   ============================================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-accent  { background: rgba(124,58,237,0.12); color: var(--accent-primary); }

/* =============================================================================
   SKELETON LOADERS
   ============================================================================= */
.skeleton {
    background: var(--skeleton-base);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--skeleton-shine) 50%,
        transparent 100%);
    animation: shimmer 1.4s infinite;
}

.skeleton-text  { height: 14px; border-radius: 4px; }
.skeleton-title { height: 22px; border-radius: 4px; }
.skeleton-card  { height: 120px; border-radius: var(--radius-card); }

/* =============================================================================
   TABLE
   ============================================================================= */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table th {
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-subtle);
}

.table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}

.table tbody tr {
    transition: background var(--transition);
}

.table tbody tr:hover {
    background: var(--glass-hover);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* =============================================================================
   MODAL
   ============================================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px);
    transition: transform var(--transition);
}

.modal-overlay.open .modal { transform: translateY(0); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-5) 0;
}

.modal-title { font-size: 1.125rem; font-weight: 700; }

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.modal-close:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.modal-body { padding: var(--space-5); }
.modal-footer {
    padding: 0 var(--space-5) var(--space-5);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 360px;
    width: calc(100vw - 2rem);
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    animation: slideInRight 200ms ease forwards;
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}

.toast-success::before { background: var(--success); }
.toast-error::before   { background: var(--danger); }
.toast-warning::before { background: var(--warning); }
.toast-info::before    { background: var(--info); }

.toast-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.toast-success .toast-icon { color: var(--success); }
.toast-error   .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info    .toast-icon { color: var(--info); }

.toast-msg { font-size: 0.875rem; color: var(--text-primary); line-height: 1.5; }
.toast-dismiss {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    width: 20px; height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.toast-dismiss:hover { color: var(--text-primary); }

/* =============================================================================
   EMPTY STATE
   ============================================================================= */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-4);
    text-align: center;
}

.empty-icon {
    color: var(--text-muted);
    opacity: 0.4;
    width: 56px;
    height: 56px;
}

.empty-title { font-size: 1rem; font-weight: 600; color: var(--text-secondary); }
.empty-desc  { font-size: 0.875rem; color: var(--text-muted); max-width: 280px; }

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-muted   { color: var(--text-muted); }
.text-accent  { color: var(--accent-primary); }

.mt-auto { margin-top: auto; }
.w-full  { width: 100%; }
.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Gradient text */
.gradient-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
    0%   { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.animate-fade-in { animation: fadeIn 300ms ease forwards; }
.animate-pop-in  { animation: popIn 200ms ease forwards; }

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .hide-mobile { display: none !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
    .hide-desktop { display: none !important; }
}

/* =============================================================================
   SHARED CONTROLS — used by BOTH user and admin shells.
   (Previously only in layout.css, which admin pages don't load — this left
    the admin theme toggle and hamburger unstyled/misaligned.)
   ============================================================================= */
.topbar-hamburger {
    background: none;
    border: none;
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
    flex-shrink: 0;
}
.topbar-hamburger:hover { background: var(--glass-hover); }
@media (min-width: 1025px) { .topbar-hamburger { display: none; } }

.theme-toggle {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    width: 44px;
    height: 24px;
    position: relative;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}
.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-primary);
    transition: transform var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="light"] .theme-toggle-thumb {
    transform: translateX(20px);
    background: var(--warning);
}
.theme-toggle-icon { width: 10px; height: 10px; color: white; display: block; }

/* themes.css */
/* =============================================================================
   RateFlix THEME PACKS — 10 admin-switchable skins, each with dark + light.
   Selected via data-skin="" on <html>; mode via existing data-theme="".
   Each pack overrides: page wash, surfaces, borders, accents, gradients.
   ============================================================================= */
body { background: var(--page-bg, var(--bg-primary)); }
/* Fixed-attachment washes look great but repaint every scroll frame on
   mobile GPUs — enable only on desktops so low-end phones stay 60fps. */
@media (min-width: 1025px) { body { background-attachment: fixed; } }

/* ---------- 1. AURORA GLASS (default — purple→cyan) ---------- */
[data-skin="aurora"] {
    --accent-primary:#7C3AED; --accent-secondary:#06B6D4;
    --gradient-main:linear-gradient(135deg,#7C3AED 0%,#4F8DF9 50%,#06B6D4 100%);
    --gradient-hover:linear-gradient(135deg,#6D28D9,#0891B2);
    --gradient-subtle:linear-gradient(135deg,rgba(124,58,237,.14),rgba(6,182,212,.14));
    --page-bg:radial-gradient(90% 60% at 15% 0%,rgba(124,58,237,.18),transparent 60%),radial-gradient(90% 60% at 90% 100%,rgba(6,182,212,.14),transparent 60%),#0D0E1A;
    --shadow-glow:0 0 24px rgba(124,58,237,.25);
}
[data-theme="light"][data-skin="aurora"] {
    --page-bg:linear-gradient(160deg,#F3F1FF 0%,#EDF4FF 34%,#F0FBFF 62%,#F6F0FF 100%);
    --bg-card:#FFFFFF; --bg-input:#F7F6FF; --bg-sidebar:#FBFAFF;
    --border-card:rgba(124,58,237,.16); --border-subtle:rgba(124,58,237,.2); --border-input:rgba(124,58,237,.24);
    --shadow-md:0 10px 30px -14px rgba(109,40,217,.3);
}

/* ---------- 2. ROYAL SAPPHIRE & GOLD ---------- */
[data-skin="sapphire"] {
    --accent-primary:#2563EB; --accent-secondary:#D9A441;
    --gradient-main:linear-gradient(135deg,#152B66 0%,#1E3A8A 45%,#2563EB 100%);
    --gradient-hover:linear-gradient(135deg,#1E3A8A,#1D4ED8);
    --gradient-subtle:linear-gradient(135deg,rgba(37,99,235,.14),rgba(217,164,65,.12));
    --page-bg:radial-gradient(90% 60% at 85% 0%,rgba(217,164,65,.12),transparent 55%),linear-gradient(180deg,#0A1228,#080D1E);
    --bg-card:#101A38; --bg-input:#0C1530; --bg-sidebar:#0C142E;
    --border-card:rgba(96,140,240,.22); --border-subtle:rgba(96,140,240,.28);
}
[data-theme="light"][data-skin="sapphire"] {
    --page-bg:linear-gradient(175deg,#FBFAF6 0%,#F2F5FC 60%,#FBF8F0 100%);
    --bg-card:#FFFFFF; --bg-input:#F5F7FC; --bg-sidebar:#FAFBFE;
    --border-card:#DCE3F1; --border-subtle:#D3DCEE; --border-input:#C9D4EA;
    --accent-primary:#1E3A8A;
    --shadow-md:0 10px 26px -16px rgba(30,58,138,.35);
}

/* ---------- 3. SUNSET FUSION ---------- */
[data-skin="sunset"] {
    --accent-primary:#EC4899; --accent-secondary:#F97316;
    --gradient-main:linear-gradient(135deg,#F97316 0%,#EC4899 55%,#8B5CF6 100%);
    --gradient-hover:linear-gradient(135deg,#EA580C,#DB2777);
    --gradient-subtle:linear-gradient(135deg,rgba(249,115,22,.14),rgba(139,92,246,.14));
    --page-bg:radial-gradient(90% 60% at 20% 0%,rgba(236,72,153,.2),transparent 60%),linear-gradient(180deg,#1E0F1A,#160A14);
    --bg-card:#291423; --bg-input:#20101C; --bg-sidebar:#231120;
    --border-card:rgba(236,72,153,.24); --border-subtle:rgba(236,72,153,.3);
}
[data-theme="light"][data-skin="sunset"] {
    --page-bg:linear-gradient(165deg,#FFF9F5 0%,#FFF1F4 45%,#FAF0FF 100%);
    --bg-card:#FFFFFF; --bg-input:#FFF7F5; --bg-sidebar:#FFFAF8;
    --border-card:#F6DCE3; --border-subtle:#F2CFD9; --border-input:#EFC3D0;
    --shadow-md:0 12px 30px -16px rgba(236,72,153,.35);
}

/* ---------- 4. EMERALD WEALTH ---------- */
[data-skin="emerald"] {
    --accent-primary:#10B981; --accent-secondary:#D9A441;
    --gradient-main:linear-gradient(140deg,#064E3B 0%,#047857 50%,#10B981 100%);
    --gradient-hover:linear-gradient(135deg,#065F46,#059669);
    --gradient-subtle:linear-gradient(135deg,rgba(16,185,129,.14),rgba(217,164,65,.12));
    --page-bg:radial-gradient(90% 60% at 85% 100%,rgba(217,164,65,.1),transparent 55%),linear-gradient(180deg,#06231C,#041812);
    --bg-card:#0B2E24; --bg-input:#08251D; --bg-sidebar:#092A20;
    --border-card:rgba(52,211,153,.22); --border-subtle:rgba(52,211,153,.28);
}
[data-theme="light"][data-skin="emerald"] {
    --page-bg:linear-gradient(170deg,#F7FCF9 0%,#EEF9F3 50%,#FBFAF2 100%);
    --bg-card:#FFFFFF; --bg-input:#F3FAF6; --bg-sidebar:#F8FCFA;
    --border-card:#D3EDE2; --border-subtle:#C4E6D6; --border-input:#B6DFCB;
    --accent-primary:#047857;
    --shadow-md:0 12px 30px -16px rgba(6,95,70,.3);
}

/* ---------- 5. OBSIDIAN NEON GLASS ---------- */
[data-skin="obsidian"] {
    --accent-primary:#D946EF; --accent-secondary:#22D3EE;
    --gradient-main:linear-gradient(135deg,#D946EF 0%,#8B5CF6 50%,#22D3EE 100%);
    --gradient-hover:linear-gradient(135deg,#C026D3,#06B6D4);
    --gradient-subtle:linear-gradient(135deg,rgba(217,70,239,.14),rgba(34,211,238,.14));
    --page-bg:radial-gradient(120% 80% at 15% 0%,rgba(217,70,239,.2),transparent 55%),radial-gradient(120% 80% at 90% 100%,rgba(34,211,238,.18),transparent 55%),#0A0B14;
    --bg-card:rgba(255,255,255,.055); --bg-input:rgba(255,255,255,.07); --bg-sidebar:#10111E;
    --border-card:rgba(255,255,255,.13); --border-subtle:rgba(255,255,255,.18);
    --shadow-glow:0 0 28px rgba(217,70,239,.3);
}
[data-theme="light"][data-skin="obsidian"] {
    --page-bg:radial-gradient(90% 60% at 15% 0%,rgba(217,70,239,.12),transparent 60%),radial-gradient(90% 60% at 90% 100%,rgba(34,211,238,.12),transparent 60%),#FBFAFE;
    --bg-card:rgba(255,255,255,.85); --bg-input:#F9F5FE; --bg-sidebar:#FCFAFF;
    --border-card:rgba(217,70,239,.2); --border-subtle:rgba(217,70,239,.26); --border-input:rgba(217,70,239,.3);
}

/* ---------- 6. PEARL FROST ---------- */
[data-skin="pearl"] {
    --accent-primary:#818CF8; --accent-secondary:#F472B6;
    --gradient-main:linear-gradient(135deg,#818CF8 0%,#A78BFA 50%,#F472B6 100%);
    --gradient-hover:linear-gradient(135deg,#6366F1,#EC4899);
    --gradient-subtle:linear-gradient(135deg,rgba(129,140,248,.14),rgba(244,114,182,.14));
    --page-bg:radial-gradient(90% 60% at 20% 0%,rgba(129,140,248,.16),transparent 60%),radial-gradient(90% 60% at 85% 60%,rgba(244,114,182,.12),transparent 60%),#14162A;
    --bg-card:rgba(255,255,255,.06); --bg-input:rgba(255,255,255,.08); --bg-sidebar:#191B32;
    --border-card:rgba(255,255,255,.14); --border-subtle:rgba(255,255,255,.2);
}
[data-theme="light"][data-skin="pearl"] {
    --page-bg:radial-gradient(90% 60% at 20% 0%,rgba(147,197,253,.3),transparent 60%),radial-gradient(90% 60% at 85% 30%,rgba(251,207,232,.34),transparent 60%),radial-gradient(90% 70% at 50% 100%,rgba(167,243,208,.3),transparent 60%),#FBFBFE;
    --bg-card:rgba(255,255,255,.72); --bg-input:rgba(255,255,255,.85); --bg-sidebar:rgba(255,255,255,.8);
    --border-card:rgba(255,255,255,.95); --border-subtle:#E4E6F4; --border-input:#DADDF0;
    --shadow-md:0 12px 32px -16px rgba(99,102,241,.22);
}

/* ---------- 7. MIDNIGHT ROYALE ---------- */
[data-skin="royale"] {
    --accent-primary:#9333EA; --accent-secondary:#EC4899;
    --gradient-main:linear-gradient(135deg,#6B21A8 0%,#9333EA 50%,#DB2777 100%);
    --gradient-hover:linear-gradient(135deg,#7E22CE,#BE185D);
    --gradient-subtle:linear-gradient(135deg,rgba(147,51,234,.16),rgba(236,72,153,.14));
    --page-bg:radial-gradient(110% 70% at 80% 0%,rgba(147,51,234,.3),transparent 60%),linear-gradient(180deg,#170B2B,#0F0720);
    --bg-card:#221238; --bg-input:#1B0E2E; --bg-sidebar:#1D1033;
    --border-card:rgba(232,121,249,.22); --border-subtle:rgba(232,121,249,.3);
    --shadow-glow:0 0 26px rgba(236,72,153,.28);
}
[data-theme="light"][data-skin="royale"] {
    --page-bg:linear-gradient(170deg,#FAF5FF 0%,#F5EEFE 55%,#FDF2F8 100%);
    --bg-card:#FFFFFF; --bg-input:#FAF5FF; --bg-sidebar:#FCF9FF;
    --border-card:#EBD9F8; --border-subtle:#E2CBF4; --border-input:#D9BEF0;
    --shadow-md:0 12px 30px -16px rgba(147,51,234,.32);
}

/* ---------- 8. OCEAN DEPTH ---------- */
[data-skin="ocean"] {
    --accent-primary:#0EA5E9; --accent-secondary:#2DD4BF;
    --gradient-main:linear-gradient(135deg,#0C4A6E 0%,#0284C7 55%,#06B6D4 100%);
    --gradient-hover:linear-gradient(135deg,#075985,#0891B2);
    --gradient-subtle:linear-gradient(135deg,rgba(14,165,233,.14),rgba(45,212,191,.14));
    --page-bg:radial-gradient(90% 60% at 80% 100%,rgba(45,212,191,.12),transparent 55%),linear-gradient(180deg,#071A2B,#051320);
    --bg-card:#0C2438; --bg-input:#091D2E; --bg-sidebar:#0A2032;
    --border-card:rgba(56,189,248,.22); --border-subtle:rgba(56,189,248,.28);
}
[data-theme="light"][data-skin="ocean"] {
    --page-bg:linear-gradient(170deg,#F4FAFF 0%,#E9F6FD 55%,#F0FDFB 100%);
    --bg-card:#FFFFFF; --bg-input:#F2F9FE; --bg-sidebar:#F8FCFF;
    --border-card:#CBE7F6; --border-subtle:#BBDFF2; --border-input:#A9D7EE;
    --accent-primary:#0284C7;
    --shadow-md:0 12px 30px -16px rgba(2,132,199,.32);
}

/* ---------- 9. CARBON VOLT ---------- */
[data-skin="volt"] {
    --accent-primary:#A3E635; --accent-secondary:#22D3EE;
    --gradient-main:linear-gradient(135deg,#BEF264 0%,#A3E635 50%,#4ADE80 100%);
    --gradient-hover:linear-gradient(135deg,#A3E635,#22C55E);
    --gradient-subtle:linear-gradient(135deg,rgba(163,230,53,.14),rgba(34,211,238,.12));
    --page-bg:linear-gradient(180deg,#15171B,#0D0F12);
    --bg-card:#1B1E24; --bg-input:#171A20; --bg-sidebar:#181B21;
    --border-card:#2A2E36; --border-subtle:#33383F;
    --shadow-glow:0 0 24px rgba(163,230,53,.25);
}
[data-skin="volt"] .btn-primary, [data-skin="volt"] .welcome-hero .btn { color:#14170B; }
[data-theme="light"][data-skin="volt"] {
    --page-bg:linear-gradient(175deg,#FAFDF4 0%,#F4F8EE 60%,#F2FAFB 100%);
    --bg-card:#FFFFFF; --bg-input:#F7FBF0; --bg-sidebar:#FAFDF6;
    --border-card:#DDEAC8; --border-subtle:#D2E3B8; --border-input:#C6DCA6;
    --accent-primary:#65A30D;
    --gradient-main:linear-gradient(135deg,#84CC16 0%,#65A30D 50%,#0D9488 100%);
    --shadow-md:0 12px 28px -16px rgba(101,163,13,.3);
}

/* ---------- 10. ROSE GOLD BLUSH ---------- */
[data-skin="rosegold"] {
    --accent-primary:#B76E79; --accent-secondary:#D4A373;
    --gradient-main:linear-gradient(135deg,#9D5560 0%,#B76E79 45%,#D4A373 100%);
    --gradient-hover:linear-gradient(135deg,#8C4A54,#C08457);
    --gradient-subtle:linear-gradient(135deg,rgba(183,110,121,.16),rgba(212,163,115,.14));
    --page-bg:radial-gradient(90% 60% at 80% 0%,rgba(212,163,115,.12),transparent 55%),linear-gradient(180deg,#231318,#1A0E12);
    --bg-card:#2E1B21; --bg-input:#26151B; --bg-sidebar:#29171D;
    --border-card:rgba(232,160,144,.24); --border-subtle:rgba(232,160,144,.3);
}
[data-theme="light"][data-skin="rosegold"] {
    --page-bg:linear-gradient(170deg,#FFF8F6 0%,#FDF0EC 55%,#FBF3EE 100%);
    --bg-card:#FFFFFF; --bg-input:#FDF6F3; --bg-sidebar:#FEFAF8;
    --border-card:#F3D8D3; --border-subtle:#EECBC4; --border-input:#E8BEB5;
    --shadow-md:0 12px 30px -16px rgba(183,110,121,.35);
}

/* auth.css */
/* =============================================================================
   RateFlix — Auth Pages (Register, Login, Activate)
   ============================================================================= */

/* =============================================================================
   AUTH SHELL — Two-panel layout
   ============================================================================= */
.auth-shell {
    display: flex;
    min-height: 100vh;
}

/* =============================================================================
   BRAND PANEL (left side, desktop only)
   ============================================================================= */
.auth-brand {
    flex: 0 0 420px;
    background: var(--bg-card);
    border-right: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

/* Animated gradient background */
.auth-brand::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(ellipse at 30% 40%, rgba(124,58,237,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(6,182,212,0.1) 0%, transparent 60%);
    animation: rotateBg 20s linear infinite;
}

@keyframes rotateBg {
    to { transform: rotate(360deg); }
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 340px;
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.auth-brand-logo span {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-brand-headline {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: var(--space-4);
}

.auth-brand-sub {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-8);
}

/* Stats */
.auth-brand-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--glass-bg);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    backdrop-filter: blur(8px);
}

.auth-stat { text-align: center; }
.auth-stat-value { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
.auth-stat-label { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; display: block; }

/* Decorative glow */
.auth-brand-glow {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, transparent 70%);
    pointer-events: none;
}

/* =============================================================================
   FORM PANEL (right side)
   ============================================================================= */
.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    overflow-y: auto;
}

.auth-form-inner {
    width: 100%;
    max-width: 440px;
}

/* Mobile logo */
.auth-mobile-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.auth-form-header {
    margin-bottom: var(--space-6);
}

.auth-form-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.auth-form-header p {
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.auth-form-header a {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Two-column form grid */
.auth-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.auth-form-grid .span-2 { grid-column: span 2; }

@media (max-width: 500px) {
    .auth-form-grid { grid-template-columns: 1fr; }
    .auth-form-grid .span-2 { grid-column: span 1; }
}

/* Alert */
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-input);
    font-size: 0.875rem;
    margin-bottom: var(--space-5);
    border: 1px solid;
}

.alert-danger {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

.alert-success {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
}

/* Activation fee notice */
.activation-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(6,182,212,0.08);
    border: 1px solid rgba(6,182,212,0.2);
    border-radius: var(--radius-input);
    font-size: 0.8125rem;
    color: var(--accent-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.activation-notice svg { flex-shrink: 0; margin-top: 1px; }

/* Password strength */
.password-strength {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.strength-bar {
    flex: 1;
    height: 4px;
    background: var(--border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    transition: width 300ms ease, background 300ms ease;
}

.strength-label {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Input toggle (show/hide password) */
.input-wrap-toggle { position: relative; }
.input-wrap-toggle .form-input { padding-right: 2.75rem; }

.input-toggle-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0;
    /* Flex-center the SVG — kills baseline offset that misaligned the eye */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    line-height: 0;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.input-toggle-btn svg { display: block; }
.input-toggle-btn:hover { color: var(--text-primary); background: var(--glass-hover); }
/* Reserve room so text never runs under the eye */
.input-wrap-toggle .form-input { padding-right: 3rem; }

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
}

.checkbox-input { display: none; }

.checkbox-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--border-input);
    border-radius: 4px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    margin-top: 1px;
}

.checkbox-box svg {
    width: 10px;
    height: 10px;
    color: white;
    opacity: 0;
    transition: opacity var(--transition);
}

.checkbox-input:checked + .checkbox-box {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.checkbox-input:checked + .checkbox-box svg { opacity: 1; }

.checkbox-label.error .checkbox-box { border-color: var(--danger); }

/* =============================================================================
   LOGIN PAGE SPECIFIC
   ============================================================================= */
.login-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.forgot-link {
    font-size: 0.8125rem;
    color: var(--accent-primary);
    text-align: right;
    display: block;
    margin-top: -var(--space-2);
}

/* =============================================================================
   ACTIVATE PAGE
   ============================================================================= */
.activate-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}

.activate-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-main);
}

.activate-icon {
    width: 52px;
    height: 52px;
    background: var(--gradient-subtle);
    border: 1px solid var(--border-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
    color: var(--accent-primary);
}

.activate-fee {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: var(--space-2) 0 2px;
}

.activate-fee-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

/* STK Push status */
.stk-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--success-bg);
    border: 1px solid var(--success);
    border-radius: var(--radius-input);
    color: var(--success);
    font-size: 0.9375rem;
}

.stk-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(16,185,129,0.2);
    border-top-color: var(--success);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
    .auth-brand { display: none !important; }
    .auth-form-panel { padding: var(--space-5) var(--space-4); }
}

/* =============================================================================
   v5 — COLORFUL AUTH
   ============================================================================= */

/* Auth form card: glass panel with gradient border glow + top accent
   (this is the bordered card seen on the live login/register pages) */
.auth-form-inner {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: var(--space-6) var(--space-5);
    box-shadow:
        0 0 0 1px rgba(6,182,212,0.08),
        0 24px 60px -24px rgba(124,58,237,0.45);
    overflow: hidden;
}
.auth-form-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7C3AED, #EC4899, #06B6D4);
}

/* Focused inputs glow with the gradient hue */
.form-input:focus, .form-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.18), 0 0 20px -6px rgba(6,182,212,0.35);
}

/* glass-bg.css */
/* =============================================================================
   RateFlix — photo background + glass (loaded on login, register, home)
   The photo is a real <picture> behind everything (found early by the browser,
   preloaded with fetchpriority=high). A 120-byte blurred placeholder shows
   instantly; the sharp photo fades in over it.
   Live glass (backdrop-filter) is kept to a few key panels; blur is lighter on
   phones; browsers without backdrop-filter get a darker solid panel.
   ============================================================================= */
.rr-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-primary, #0B0A14); }
.rr-bg-lqip, .rr-bg picture, .rr-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rr-bg-lqip { background-size: cover; background-position: center; transform: scale(1.06); }
.rr-bg-l { display: none; }
@media (orientation: landscape) { .rr-bg-l { display: block; } .rr-bg.has-l .rr-bg-p { display: none; } }
.rr-bg img { object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.rr-bg img.in { opacity: 1; }
.rr-bg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,10,20, calc(var(--rr-dim, .55) - .25)) 0%, rgba(11,10,20, var(--rr-dim, .55)) 45%, rgba(11,10,20, calc(var(--rr-dim, .55) + .3)) 100%); }
[data-theme="light"] .rr-bg::after {
    background: linear-gradient(180deg, rgba(246,242,255, calc(var(--rr-dim, .55) - .2)) 0%, rgba(246,242,255, calc(var(--rr-dim, .55) + .15)) 55%, rgba(246,242,255, .92) 100%); }

/* Pages with a photo background: let it show through the shell */
body.has-bg { background: transparent !important; }
body.has-bg .main-wrapper, body.has-bg .main-content, body.has-bg .auth-shell, body.has-bg .auth-form-panel { background: transparent !important; }

/* ---- Glass: solid fallback first, live blur where supported ---- */
body.has-bg .rr-glass, body.has-bg .auth-form-inner, body.has-bg .auth-brand, body.has-bg .topbar, body.has-bg .card {
    background: rgba(18, 15, 32, .78) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
}
[data-theme="light"] body.has-bg .rr-glass, [data-theme="light"] body.has-bg .auth-form-inner, [data-theme="light"] body.has-bg .card, [data-theme="light"] body.has-bg .topbar {
    background: rgba(255, 255, 255, .86) !important; border-color: rgba(255, 255, 255, .95) !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Live blur only on the few panels that matter */
    body.has-bg .auth-form-inner, body.has-bg .auth-brand, body.has-bg .topbar, body.has-bg .rr-glass {
        background: rgba(18, 15, 32, .42) !important;
        backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
    [data-theme="light"] body.has-bg .auth-form-inner, [data-theme="light"] body.has-bg .topbar, [data-theme="light"] body.has-bg .rr-glass {
        background: rgba(255, 255, 255, .55) !important;
    }
    /* Cards in scrolling lists: translucent tint, no live blur (keeps scrolling at 60 fps) */
    body.has-bg .card { background: rgba(18, 15, 32, .62) !important; }
    [data-theme="light"] body.has-bg .card { background: rgba(255, 255, 255, .78) !important; }
}
@media (max-width: 640px) {
    body.has-bg .auth-form-inner, body.has-bg .topbar, body.has-bg .rr-glass {
        backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
    }
}
@media (prefers-reduced-transparency: reduce) {
    body.has-bg .auth-form-inner, body.has-bg .topbar, body.has-bg .rr-glass, body.has-bg .card {
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(18, 15, 32, .92) !important;
    }
}

/* Posters: blurred placeholder under every image, real image fades over it */
.rr-poster picture, .rr-poster picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rr-poster picture img { object-fit: cover; }

/* responsive.css */
/* =============================================================================
   RateFlix — Responsive Layer v2
   Loaded LAST so it overrides. Fixes: mobile overflow, text overlap,
   forced zoom, table breakout, tiny tap targets, cramped spacing.
   Breakpoints: 1024 (tablet/desktop split), 768 (tablet), 480 (phone), 360 (small phone)
   ============================================================================= */

/* ---- Global safety: never allow horizontal scroll / zoom-out ---- */
* { -webkit-tap-highlight-color: transparent; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Inputs must be >=16px font on iOS or Safari force-zooms on focus */
input, select, textarea, button {
    font-size: 16px;
}

/* Long text / codes never overflow their container */
.num, code, .table td, .table th,
.stat-tile-value, .topbar-title, .page-title,
.card, .form-input, td, th {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Images and SVGs scale down */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* =============================================================================
   TABLES — the #1 mobile breakout culprit.
   Wrap in horizontal scroll on small screens instead of blowing the layout.
   ============================================================================= */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-card);
}

.table { min-width: 560px; }  /* forces the scroll rather than squashing columns */

@media (max-width: 480px) {
    .table { min-width: 520px; font-size: 0.8125rem; }
    .table th, .table td { padding: 0.625rem 0.75rem; }
}

/* =============================================================================
   TABLET & BELOW  (<= 1024px)
   ============================================================================= */
@media (max-width: 1024px) {
    .main-content { padding: var(--space-4); }

    /* Any 2/3/4 col grid collapses sensibly */
    .settings-grid { grid-template-columns: 1fr 1fr; }

    /* Admin two-column edit layouts stack */
    .admin-content > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================================
   PHONE  (<= 768px)
   ============================================================================= */
@media (max-width: 768px) {
    .main-content { padding: var(--space-4) var(--space-3); }

    .page-title  { font-size: 1.25rem; }
    .page-subtitle { font-size: 0.8125rem; }
    .page-header { margin-bottom: var(--space-4); }

    /* Force EVERY multi-column inline grid to single column on phones.
       This catches the dashboard stat rows, admin cards, forms, etc. */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }

    /* Except: keep 2-up stat tiles where they read fine */
    .stat-row-2 { grid-template-columns: 1fr 1fr !important; }

    .settings-grid { grid-template-columns: 1fr !important; }

    /* Flex rows that hold title + button wrap cleanly */
    .section-hd,
    div[style*="justify-content:space-between"] {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* Buttons in headers go full width when wrapped */
    .page-header .btn,
    .section-hd .btn { flex: 1 1 auto; }

    /* Cards get comfortable padding, never cramped */
    .card-body { padding: var(--space-4); }

    /* Modal fills most of the screen, scrolls internally */
    .modal {
        width: calc(100vw - var(--space-6));
        max-width: 100%;
        max-height: 88vh;
        overflow-y: auto;
    }

    /* Topbar tighter */
    .topbar { padding: 0 var(--space-4); gap: var(--space-3); }
    .topbar-title { font-size: 0.9375rem; }
}

/* =============================================================================
   SMALL PHONE  (<= 480px)
   ============================================================================= */
@media (max-width: 480px) {
    :root { --topbar-height: 56px; }

    .main-content { padding: var(--space-3) var(--space-3) var(--space-8); }

    /* Stat tiles: single column, big and legible, minimal scroll */
    .stat-row-2,
    [style*="repeat(2"],
    [style*="repeat(3"],
    [style*="repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    .stat-tile { padding: var(--space-4); }
    .stat-tile-value { font-size: 1.375rem; }
    .stat-tile-label { font-size: 0.7rem; }

    /* Tap targets >= 44px for accessibility.
       NOTE: .theme-toggle is deliberately EXCLUDED — it's a fixed 44x24 pill;
       stretching it breaks the thumb position. Its tap area is enlarged
       with a pseudo-element below instead. */
    .btn, .pagination-btn, .nav-item, .topbar-icon-btn {
        min-height: 44px;
    }
    .btn-sm { min-height: 38px; }

    /* Only explicit full-width buttons stretch. Blanket-stretching every
       .btn broke inline buttons (tile Withdraw links, table actions, Copy). */
    .btn-full { width: 100%; }

    /* Enlarge theme-toggle tap area without distorting the pill */
    .theme-toggle { position: relative; }
    .theme-toggle::after {
        content: '';
        position: absolute;
        inset: -10px;
    }

    /* Sidebar slightly narrower so it doesn't cover whole screen */
    .sidebar { width: 82vw; max-width: 300px; }

    /* Forms: labels and inputs full width, never side-by-side */
    .form-row { flex-direction: column; }

    /* Reduce heading sizes so nothing overlaps */
    .page-title { font-size: 1.125rem; }
    h1 { font-size: 1.125rem; }
    h2 { font-size: 1rem; }

    /* Pill / badge wrapping */
    .badge { white-space: nowrap; }

    /* Color swatches wrap nicely */
    .theme-swatch-grid { gap: var(--space-2); }
    .theme-swatch { width: 44px; height: 44px; }
}

/* =============================================================================
   VERY SMALL PHONE  (<= 360px)
   ============================================================================= */
@media (max-width: 360px) {
    .main-content { padding: var(--space-2) var(--space-2) var(--space-8); }
    .card-body { padding: var(--space-3); }
    .stat-tile-value { font-size: 1.25rem; }
    .sidebar-logo-text { font-size: 1.1rem; }
    .table { min-width: 480px; }
}

/* =============================================================================
   LANDSCAPE PHONE — keep sidebar scrollable, content usable
   ============================================================================= */
@media (max-height: 480px) and (orientation: landscape) {
    .sidebar { overflow-y: auto; }
    .sidebar-nav { padding: var(--space-2) 0; }
}

/* =============================================================================
   SAFE AREA (notched phones) — respect the notch/home indicator
   ============================================================================= */
@supports (padding: max(0px)) {
    .topbar    { padding-left: max(var(--space-4), env(safe-area-inset-left));
                 padding-right: max(var(--space-4), env(safe-area-inset-right)); }
    .main-content { padding-bottom: max(var(--space-8), env(safe-area-inset-bottom)); }
    .sidebar   { padding-top: env(safe-area-inset-top); }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================================
   v2.1 — Fine-tuning to match the polished mobile design
   (portfolio hero, quick-launch modules, earnings-by-source, referral card)
   ============================================================================= */

@media (max-width: 768px) {
    /* Portfolio / earnings hero — full width, generous */
    .earnings-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .earnings-hero-right { text-align: left; width: 100%; }
    .earnings-hero-value { font-size: 1.875rem; }

    /* Quick-launch module rows: comfortable single-column list */
    .quick-launch-item,
    .module-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        min-height: 60px;
    }

    /* Earnings-by-source rows: label left, amount right, never overlap */
    .earning-source-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
    .earning-source-row .num { flex-shrink: 0; text-align: right; }

    /* Referral link box: input + copy button stack cleanly */
    .referral-link-box {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .referral-link-box .btn { width: 100%; }

    /* Section headers with count/action stay on one readable line */
    .section-hd-title { font-size: 0.9375rem; }
}

@media (max-width: 480px) {
    /* Balance tiles: 2-up looks great on the portfolio grid (matches screenshot) */
    .balance-row { grid-template-columns: 1fr 1fr !important; }

    /* But single-value metric cards go full width */
    .metrics-row { grid-template-columns: 1fr !important; }

    /* Quick-launch icons a touch smaller to fit text */
    .quick-launch-item .task-icon,
    .module-row .balance-tile-icon { width: 40px; height: 40px; }

    /* Recent activity search + button: stack */
    .activity-search-row {
        flex-direction: column;
        gap: var(--space-2);
    }
    .activity-search-row .btn { width: 100%; }

    /* Copy-link button full width under the link */
    .copy-link-btn { width: 100%; }
}

/* Two-column balance stays 2-up even on the smallest phones (portfolio look) */
@media (max-width: 360px) {
    .balance-row { grid-template-columns: 1fr 1fr !important; gap: var(--space-2) !important; }
    .balance-tile { padding: var(--space-3); }
    .balance-tile-value { font-size: 0.9375rem; }
}

/* =============================================================================
   v3 — ALIGNMENT HARDENING (topbar, theme toggle, icons, inputs)
   ============================================================================= */

/* Topbar: every child vertically centered regardless of individual heights */
.topbar { align-items: center; }
.topbar-actions { align-items: center; }
.topbar-actions > * { flex-shrink: 0; }

/* Theme toggle: never stretched by parent flex/grid */
.theme-toggle {
    align-self: center;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px;
    width: 44px !important;
    box-sizing: border-box;
}
.theme-toggle-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle-thumb svg { display: block; }

/* All icon-only buttons: flex-centered SVGs, no baseline drift */
.topbar-icon-btn svg,
.modal-close svg,
.congrats-close svg,
.input-toggle-btn svg {
    display: block;
}
.modal-close,
.congrats-close {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Left input icons: perfectly centered against any input height */
.input-wrap { display: block; }
.input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inputs are consistent height so icon math never drifts */
.form-input, .form-select {
    min-height: 46px;
    box-sizing: border-box;
}

/* Buttons: center content, consistent icon alignment */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
}
.btn svg { flex-shrink: 0; display: block; }

/* Badge/pill vertical rhythm */
.badge, .currency-pill { line-height: 1; }

/* Subtle glass only on SMALL surfaces. Tall cards/forms must NOT use
   backdrop-filter — on mobile it truncates content taller than the viewport. */
@media (min-width: 769px) {
    .balance-tile, .stat-tile, .metric-card, .congrats-banner {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Phone: keep the two welcome buttons side by side if they fit, stack under 480 */
@media (max-width: 768px) {
    /* Auth card: comfortable width with breathing room */
    .auth-card { width: 100%; max-width: 440px; margin: 0 auto; }

    /* Balance tiles keep the 2-up portfolio look */
    .balance-row { grid-template-columns: 1fr 1fr !important; }
    .balance-tile-label { font-size: 0.7rem; }
    .balance-tile-value { font-size: 0.9375rem; }
}

@media (max-width: 400px) {
    .balance-tile-value { font-size: 0.875rem; }
    .earnings-hero-value { font-size: 1.5rem; }
}

/* =============================================================================
   v10 — ADMIN 100% MOBILE LAYER
   Every admin page usable on any phone: tables scroll (never crush), filter
   rows wrap, buttons fit, topbar never overflows, no horizontal page scroll.
   ============================================================================= */

/* Wide tables SCROLL inside their card instead of crushing columns.
   (min-width forces the horizontal scroll that .table-wrap provides.) */
@media (max-width: 900px) {
    .table-wrap .table { min-width: 620px; }
    .table th, .table td { padding: .5rem .625rem; font-size: .75rem; }
    .table th { white-space: nowrap; }
    .table .btn-sm { padding: 4px 10px; font-size: .68rem; }
}

@media (max-width: 768px) {
    /* Nothing may push the page wider than the phone */
    .admin-content { overflow-x: clip; }
    .admin-content > * { max-width: 100%; }

    /* EVERY inline flex row in admin wraps (filters, header rows, button groups) */
    .admin-content div[style*="display:flex"],
    .admin-content form[style*="display:flex"] {
        flex-wrap: wrap;
    }
    /* Inputs & selects inside those rows share the width nicely */
    .admin-content form[style*="display:flex"]:not([style*="flex-direction:column"]) .form-input,
    .admin-content form[style*="display:flex"]:not([style*="flex-direction:column"]) .form-select {
        flex: 1 1 170px;
        min-width: 0;
    }
    .admin-content form[style*="display:flex"] .btn { flex: 1 1 auto; }

    /* Bonus thresholds: keep the two inputs + × on ONE line (exception to
       the global 1fr collapse — three stacked rows per threshold is worse) */
    .threshold-row {
        grid-template-columns: 1fr 1fr auto !important;
        gap: var(--space-2) !important;
    }

    /* Form cards breathe less, headings scale down */
    .admin-form-card h2 { font-size: 1rem; }

    /* Full-width primary actions in admin forms */
    .admin-form-card .btn-lg { width: 100%; }

    /* Dashboard chart: tighter labels so 7 bars fit any width */
    .adm-chart { gap: 4px; height: 130px; }
    .adm-bar-val { display: none; }
}

@media (max-width: 480px) {
    /* Topbar: title ellipsis, hide the username text, keep the toggle */
    .admin-topbar-title {
        font-size: .875rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0; flex: 1;
    }
    .admin-topbar .admin-topbar-user { display: none; }

    /* Quick-action chips + skin picker stay 2-up but shrink text */
    .adm-qa { font-size: .68rem; min-height: 46px; }
    .skin-name { font-size: .65rem; }

    /* Table action buttons stack cleanly when the cell is tight */
    .table td[style*="white-space:nowrap"] { white-space: normal !important; }
}

/* Tablet band (769–1024): admin two-pane layouts stack even when nested */
@media (min-width: 769px) and (max-width: 1024px) {
    .admin-content [style*="grid-template-columns:1fr 3"],
    .admin-content [style*="grid-template-columns: 1fr 3"] {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================================
   v38.7 — MOBILE FIT LAYER: everything fits the viewport exactly.
   Loaded last, so these win on small screens without touching desktop.
   ============================================================================= */

/* Never allow sideways page scroll from any stray wide element */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Every data table scrolls inside its card instead of stretching the page */
.card table, .admin-card table, .table-responsive table, main table {
    width: 100%;
}
.card, .admin-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
    /* ---- Layout breathing room ---- */
    .dash-page, .page-content, .admin-content { padding-left: 10px; padding-right: 10px; }
    .card-body { padding: 14px; }

    /* ---- Welcome hero stacks; chips sit side by side and shrink ---- */
    .welcome-hero { flex-direction: column; align-items: stretch; gap: 14px; }
    .welcome-hero-title { font-size: 1.35rem; }
    .welcome-hero-sub   { font-size: .85rem; }
    .welcome-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
    .welcome-hero-actions .stat-chip { flex: 1 1 calc(50% - 5px); min-width: 0 !important; padding: 10px 12px; }
    .stat-chip-value { font-size: .95rem; word-break: break-word; }
    .stat-chip-label { font-size: .68rem; }
    .stat-chip-icon  { width: 30px; height: 30px; flex-shrink: 0; }

    /* ---- Earnings panel ---- */
    .earnings-hero-value { font-size: 1.7rem; word-break: break-word; }
    .earnings-panel-bottom { flex-wrap: wrap; gap: 10px; }
    .earnings-mini-value { font-size: .95rem; }

    /* ---- Balance tiles: two columns that truly fit ---- */
    .balance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .balance-tile { min-width: 0; padding: 12px; }
    .balance-tile-value { font-size: .95rem; word-break: break-word; }
    .balance-tile-label { font-size: .7rem; }

    /* ---- Referral card stacks; long link wraps, buttons full width ---- */
    .referral-card { flex-direction: column; align-items: stretch; gap: 12px; }
    .referral-card-link { word-break: break-all; font-size: .78rem; }
    .referral-card-actions { display: flex; gap: 8px; }
    .referral-card-actions .btn { flex: 1; justify-content: center; }

    /* ---- Modals fill the screen comfortably ---- */
    .modal { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: 88vh; overflow-y: auto; }
    .modal-body { padding: 14px; }
    .affiliate-level-row { flex-wrap: wrap; gap: 8px; }

    /* ---- Forms & buttons ---- */
    .form-input, .form-select, textarea.form-input { font-size: 16px; } /* stops iOS zoom-on-focus */
    .btn-lg { padding-left: 14px; padding-right: 14px; }

    /* ---- Withdraw wallet chips wrap neatly ---- */
    .wallet-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
    .wallet-tab { flex: 1 1 calc(50% - 4px); min-width: 0; }

    /* ---- Admin tables: readable, scrollable, never squash ---- */
    .admin-content table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .admin-content table td, .admin-content table th { font-size: .8rem; padding: 8px 10px; }

    /* ---- Announcements ---- */
    .announcement-item-head { flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 400px) {
    /* The smallest phones: hero chips stack, tiles stay 2-up but tighter */
    .welcome-hero-actions .stat-chip { flex: 1 1 100%; }
    .balance-row { gap: 8px; }
    .balance-tile-value { font-size: .88rem; }
    .earnings-hero-value { font-size: 1.5rem; }
    .congrats-banner, #congratsPopup { padding-right: 42px !important; }
}