/* ================================================================
   DINEX UGC — Modern Professional Design
   White + Blue Theme
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&family=Bebas+Neue&display=swap');

:root {
    --primary:        #2563EB;
    --primary-light:  #3B82F6;
    --primary-dark:   #1D4ED8;
    --primary-50:     #EFF6FF;
    --primary-100:    #DBEAFE;
    --primary-200:    #BFDBFE;
    --secondary:      #7C3AED;
    --accent:         #0EA5E9;
    --success:        #10B981;
    --warning:        #F59E0B;
    --danger:         #EF4444;
    --info:           #06B6D4;

    --dark:           #0F172A;
    --dark-2:         #1E293B;
    --dark-3:         #334155;
    --text:           #1E293B;
    --text-muted:     #64748B;
    --text-light:     #94A3B8;

    --bg:             #F8FAFC;
    --bg-2:           #F1F5F9;
    --card-bg:        #FFFFFF;
    --border:         #E2E8F0;
    --border-light:   #F1F5F9;

    --sidebar-w:      260px;
    --sidebar-bg:     #0F172A;

    --radius-sm:      8px;
    --radius:         12px;
    --radius-lg:      16px;
    --radius-xl:      20px;

    --shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:         0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
    --shadow-md:      0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
    --shadow-lg:      0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03);
    --shadow-blue:    0 8px 25px rgba(37,99,235,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ================================================================
   AUTH PAGES
   ================================================================ */
.auth-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #1D4ED8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.auth-page::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(37,99,235,.2) 0%, transparent 70%);
    top: -200px; right: -200px;
    pointer-events: none;
}

.auth-page::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(124,58,237,.15) 0%, transparent 70%);
    bottom: -100px; left: -100px;
    pointer-events: none;
}

.auth-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 44px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    position: relative;
    z-index: 1;
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo .logo-icon {
    /* Brand mark tile (Cut Frame on blue) — the SVG carries its own radius/colour */
    width: 64px; height: 64px;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 16px;
}

.auth-logo h2 {
    /* Brand wordmark — Bebas Neue, Deep blue */
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--primary-dark);
    letter-spacing: .07em;
}

.auth-logo p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 4px;
}

.form-floating > .form-control {
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg);
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.form-floating > .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.35);
    background: #fff;
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-floating > label { color: var(--text-muted); font-size: 0.875rem; }

.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: var(--radius);
    padding: 13px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    width: 100%;
    color: #fff;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    letter-spacing: 0.2px;
}

.btn-primary-custom:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-blue);
}

.btn-primary-custom:active { transform: translateY(0); }

/* ================================================================
   DASHBOARD LAYOUT
   ================================================================ */
.dashboard-wrapper { display: flex; min-height: 100vh; }

/* ── SIDEBAR ── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    overflow: hidden;   /* only .sidebar-nav scrolls, so the account footer is always on screen */
    z-index: 1000;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.04);
}

.sidebar-brand {
    padding: 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.sidebar-brand .brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-icon {
    /* Brand mark tile (Cut Frame on blue) — the SVG carries its own radius/colour */
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: block;
}

.brand-name {
    /* Brand wordmark — Bebas Neue, Deep blue on light / white on dark */
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    font-size: 1.45rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: .08em;
    line-height: 1;
}

.brand-sub {
    font-size: 0.65rem;
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}

.sidebar-user {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.user-info .user-name {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.user-info .user-credits {
    color: #60A5FA;
    font-size: 0.72rem;
    font-weight: 500;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;              /* lets the flex child actually shrink and scroll */
    overflow-y: auto;
    padding: 6px 0 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

.nav-section-label {
    padding: 14px 22px 5px;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: rgba(255,255,255,.62);
    font-weight: 600;
}
.sidebar-nav .nav-section-label:first-child { padding-top: 12px; }

.sidebar-nav .nav-item,
.sidebar-footer .nav-item { margin: 1px 10px; }

.sidebar-nav .nav-link,
.sidebar-footer .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: 0.845rem;
    font-weight: 500;
    transition: all .15s ease;
    position: relative;
}

.sidebar-nav .nav-link:hover,
.sidebar-footer .nav-link:hover {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
}

.sidebar-nav .nav-link.active {
    background: rgba(37,99,235,.2);
    color: #fff;
    font-weight: 600;
}

.sidebar-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 18px;
    background: var(--primary-light);
    border-radius: 0 3px 3px 0;
}

.sidebar-nav .nav-link .nav-icon,
.sidebar-footer .nav-link .nav-icon {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 12px 10px;
    border-top: 1px solid rgba(255,255,255,.06);
}

.credits-badge-sidebar {
    background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(14,165,233,.2));
    border: 1px solid rgba(37,99,235,.2);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 6px;
    text-align: center;
}

.credits-badge-sidebar .credits-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: #60A5FA;
}

.credits-badge-sidebar .credits-label {
    font-size: 0.67rem;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 500;
}

/* Keyboard focus: visible on the dark rail, never on mouse click */
.sidebar a:focus-visible {
    outline: 2px solid #60A5FA;
    outline-offset: 2px;
}

/* Credits card (replaces the three separate credit readouts) */
.credit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px 11px 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--radius);
}
.credit-card-num { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.credit-card-label { font-size: .68rem; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.5); font-weight: 500; }
.credit-card-btn {
    background: var(--primary);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease;
}
.credit-card-btn:hover { background: var(--primary-light); color: #fff; }
.credit-card-note {
    display: flex; align-items: center; gap: 6px;
    margin: 8px 4px 0;
    font-size: .74rem;
    color: #93C5FD;
    font-weight: 500;
}

/* Account row: who is signed in + sign out */
.account-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 4px 0;
    border-top: 1px solid rgba(255,255,255,.07);
}
.account-info { flex: 1; min-width: 0; }
.account-name, .account-email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-name { color: #fff; font-size: .82rem; font-weight: 600; }
.account-email { color: rgba(255,255,255,.62); font-size: .72rem; }
.account-logout {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    color: rgba(255,255,255,.55);
    transition: background .15s ease, color .15s ease;
}
.account-logout:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ── MAIN CONTENT ── */
.main-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0; /* allow flex item to shrink so wide children don't overflow the viewport */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

/* ── TOPBAR ── */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--border);
}

.topbar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: -0.3px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.credits-pill {
    background: var(--primary-50);
    color: var(--primary);
    border: 1.5px solid var(--primary-100);
    padding: 5px 14px;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
}

.credits-pill:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.page-content { padding: 28px; flex: 1; }

/* ================================================================
   STAT CARDS
   ================================================================ */
.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: box-shadow .2s, transform .2s;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-card .stat-icon {
    width: 46px; height: 46px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 14px;
}

.stat-card .stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    letter-spacing: -0.5px;
}

.stat-card .stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 5px;
    font-weight: 500;
}

/* Color variants */
.icon-purple { background: #F5F3FF; color: #7C3AED; }
.icon-pink   { background: #FFF1F2; color: #E11D48; }
.icon-cyan   { background: #ECFEFF; color: #0891B2; }
.icon-green  { background: #ECFDF5; color: #059669; }
.icon-blue   { background: var(--primary-50); color: var(--primary); }
.icon-orange { background: #FFF7ED; color: #EA580C; }

/* ================================================================
   CARDS
   ================================================================ */
.ugc-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    overflow: hidden;
}

.ugc-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.ugc-card-header h5 {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark);
    margin: 0;
    letter-spacing: -0.1px;
}

.ugc-card-body { padding: 24px; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-ugc {
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.845rem;
    padding: 9px 18px;
    border: none;
    cursor: pointer;
    transition: all .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.btn-ugc-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
}

.btn-ugc-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37,99,235,.35);
    color: #fff;
}

.btn-ugc-primary:active { transform: translateY(0); }

.btn-ugc-outline {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text);
}

.btn-ugc-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-50);
}

.btn-ugc-danger {
    background: #FEF2F2;
    color: var(--danger);
    border: 1.5px solid #FECACA;
}

.btn-ugc-danger:hover { background: var(--danger); color: #fff; }

.btn-ugc-sm {
    padding: 5px 11px;
    font-size: 0.775rem;
    border-radius: var(--radius-sm);
}

/* ================================================================
   WIZARD
   ================================================================ */
.wizard-steps {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    overflow-x: auto;
}

.wizard-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 110px;
}

.step-number {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
    transition: all .25s;
    border: 2px solid var(--border);
}

.wizard-step.active .step-number {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 3px 12px rgba(37,99,235,.35);
}

.wizard-step.completed .step-number {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.step-info .step-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.step-info .step-desc {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.step-divider {
    flex: 0;
    width: 32px; height: 2px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
    border-radius: 99px;
    transition: background .3s;
}

/* Duration cards */
.duration-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    background: #fff;
}

.duration-card:hover {
    border-color: var(--primary-light);
    background: var(--primary-50);
}

.duration-card.selected {
    border-color: var(--primary);
    background: var(--primary-50);
    box-shadow: 0 0 0 4px rgba(37,99,235,.1);
}

.duration-card .duration-icon { font-size: 2.5rem; margin-bottom: 12px; }

.duration-card h4 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.3px;
}

.duration-card .credit-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 3px 12px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
}

/* Avatar grid */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.avatar-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    background: #fff;
}

.avatar-card:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 20px rgba(37,99,235,.12);
    transform: translateY(-2px);
}

.avatar-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

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

.avatar-card .avatar-name {
    padding: 8px 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    background: #fff;
}

.avatar-card.selected .avatar-name {
    background: var(--primary);
    color: #fff;
}

/* Script editor */
.script-editor {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.7;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    resize: vertical;
    min-height: 200px;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    color: var(--text);
    background: var(--bg);
}

.script-editor:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.35);
    background: #fff;
}

/* ================================================================
   VIDEO CARDS
   ================================================================ */
.video-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.video-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.video-thumbnail {
    width: 100%;
    height: 300px; /* taller for vertical TikTok 9:16 videos */
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.video-thumbnail video,
.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills the vertical frame nicely */
    object-position: center top;
}

.video-thumbnail .play-btn {
    position: absolute;
    width: 48px; height: 48px;
    background: rgba(255,255,255,.95);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.video-thumbnail .play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

.video-card-body { padding: 14px 16px; }

.video-card-body .video-title {
    font-weight: 600;
    font-size: 0.87rem;
    color: var(--dark);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* ================================================================
   CREDIT PACKAGES
   ================================================================ */
.package-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    padding: 32px 24px;
    text-align: center;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}

.package-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.package-card.featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.08), var(--shadow-md);
}

.package-badge {
    position: absolute;
    top: 18px; right: -26px;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 36px;
    transform: rotate(45deg);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.package-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    font-weight: 600;
}

.package-price {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--dark);
    margin: 12px 0 4px;
    line-height: 1;
    letter-spacing: -1px;
}

.package-credits {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    font-weight: 500;
}

/* ================================================================
   TABLES
   ================================================================ */
.ugc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ugc-table thead tr th {
    background: var(--bg);
    padding: 11px 16px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.ugc-table tbody tr td {
    padding: 13px 16px;
    font-size: 0.845rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    color: var(--text);
}

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

.ugc-table tbody tr:hover td { background: var(--primary-50); }

/* ================================================================
   BADGES
   ================================================================ */
.badge {
    font-weight: 600;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.2px;
}

.bg-success { background: #DCFCE7 !important; color: #15803D !important; }
.bg-warning  { background: #FEF9C3 !important; color: #92400E !important; }
.bg-danger   { background: #FEE2E2 !important; color: #B91C1C !important; }
.bg-info     { background: #E0F2FE !important; color: #0369A1 !important; }
.bg-secondary{ background: var(--bg-2) !important; color: var(--text-muted) !important; }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state {
    text-align: center;
    padding: 56px 24px;
}

.empty-state .empty-icon {
    font-size: 3.5rem;
    opacity: 0.25;
    margin-bottom: 16px;
}

.empty-state h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.empty-state p { color: var(--text-muted); font-size: 0.875rem; }

/* ================================================================
   ALERTS
   ================================================================ */
.alert-ugc {
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 0.845rem;
    border: none;
    /* Plain text flow, not flex: flex turned every <strong>/<a> inside a
       message into its own squeezed column. */
    display: block;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.alert-ugc > svg:first-child { vertical-align: -3px; margin-right: 6px; }
.alert-ugc.d-none { display: none !important; }

.alert { border-radius: var(--radius) !important; border: none !important; font-size: 0.845rem; }
.alert-danger  { background: #FEF2F2; color: #B91C1C; }
.alert-warning { background: #FFFBEB; color: #92400E; }
.alert-success { background: #F0FDF4; color: #15803D; }
.alert-info    { background: #EFF6FF; color: #1D4ED8; }

/* ================================================================
   FORM CONTROLS
   ================================================================ */
.form-control, .form-select {
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius) !important;
    font-size: 0.875rem !important;
    color: var(--text) !important;
    background: var(--bg) !important;
    transition: border-color .2s, box-shadow .2s !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.35) !important;
    background: #fff !important;
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-label {
    font-size: 0.845rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
}

/* ================================================================
   SPINNER / LOADING
   ================================================================ */
.spinner-ugc {
    width: 22px; height: 22px;
    border: 2.5px solid rgba(37,99,235,.15);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    display: inline-block;
}

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

.processing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(6px);
}

.processing-box {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    text-align: center;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
}

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination .page-link {
    border: 1.5px solid var(--border);
    color: var(--text);
    font-size: 0.845rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
    transition: all .15s;
}

.pagination .page-link:hover {
    background: var(--primary-50);
    border-color: var(--primary-light);
    color: var(--primary);
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}

/* ================================================================
   ADMIN SIDEBAR
   ================================================================ */
.admin-sidebar { background: #080F1E; }

.admin-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ================================================================
   MODAL
   ================================================================ */
.modal-content {
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border) !important;
    padding: 18px 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--border) !important;
    padding: 14px 24px !important;
}

.modal-body { padding: 24px !important; }

.modal-title { font-weight: 700 !important; color: var(--dark) !important; }

/* ================================================================
   SIDEBAR MOBILE
   ================================================================ */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--dark);
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: background .15s;
}

.sidebar-toggle:hover { background: var(--bg-2); }

/* ================================================================
   RESPONSIVE — TABLET (≤992px)
   ================================================================ */
@media (max-width: 992px) {
    .sidebar-toggle { display: block; }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .main-content { margin-left: 0; }
    .page-content { padding: 20px; }

    .stat-card .stat-value { font-size: 1.6rem; }
}

/* ================================================================
   RESPONSIVE — MOBILE (≤768px)
   ================================================================ */
@media (max-width: 768px) {
    body { font-size: 13.5px; }

    .topbar {
        padding: 0 14px;
        height: 58px;
    }
    .topbar-title { font-size: 1rem; }
    .topbar-right { gap: 8px; }

    .page-content { padding: 14px; }

    /* Stat cards 2-up */
    .stat-card { padding: 18px 16px; }
    .stat-card .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; margin-bottom: 10px; }
    .stat-card .stat-value { font-size: 1.5rem; }
    .stat-card .stat-label { font-size: 0.72rem; }

    /* Cards */
    .ugc-card-header { padding: 14px 16px; }
    .ugc-card-body { padding: 16px; }

    /* Wizard — horizontal scroll, compact */
    .wizard-steps {
        padding: 12px;
        gap: 2px;
    }
    .wizard-step { min-width: 64px; }
    .step-number { width: 28px; height: 28px; font-size: 0.75rem; }
    .step-info .step-title { font-size: 0.65rem; }
    .step-info .step-desc { display: none; }
    .step-divider { width: 10px; }

    /* Duration cards stack */
    .duration-card { padding: 22px 18px; }
    .duration-card h4 { font-size: 1.2rem; }

    /* Avatar grid smaller */
    .avatar-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
    }
    .avatar-card img { height: 130px; }

    /* Video cards full width-ish */
    .video-thumbnail { height: 360px; }

    /* Tables scroll horizontally */
    .ugc-card-body > .ugc-table,
    .ugc-table { min-width: 560px; }
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Buttons */
    .btn-ugc { padding: 9px 16px; font-size: 0.82rem; }
    .btn-ugc-sm { padding: 6px 11px; font-size: 0.75rem; }

    /* Auth card */
    .auth-card { padding: 32px 22px; }
    .auth-logo h2 { font-size: 1.4rem; }

    /* Modal full-ish width */
    .modal-dialog { margin: 12px; }
    .modal-body { padding: 18px !important; }
    .modal-header { padding: 14px 18px !important; }
    .modal-footer { padding: 12px 18px !important; flex-wrap: wrap; }

    /* Package / pricing rows stack */
    .package-card { padding: 24px 18px; }
    .package-price { font-size: 2rem; }

    /* Topbar create button — icon only feel */
    .credits-pill { padding: 5px 10px; font-size: 0.72rem; }
}

/* ================================================================
   RESPONSIVE — SMALL PHONES (≤480px)
   ================================================================ */
@media (max-width: 480px) {
    .page-content { padding: 12px; }

    .topbar-title { font-size: 0.92rem; }

    /* Stat cards 1 per row handled by Bootstrap col-6 -> keep 2 but smaller */
    .stat-card .stat-value { font-size: 1.35rem; }

    /* Avatar grid 2 columns */
    .avatar-grid { grid-template-columns: repeat(2, 1fr); }

    /* Hide secondary topbar items if cramped */
    .topbar-right .btn-ugc span.btn-label { display: none; }

    /* Wizard steps even tighter */
    .wizard-step { min-width: 52px; }
    .step-info { display: none; } /* show only numbered circles on tiny screens */
    .wizard-step { justify-content: center; }

    /* Video thumbnail */
    .video-thumbnail { height: 400px; }

    /* Buttons full width in stacks */
    .modal-footer .btn-ugc { flex: 1; justify-content: center; }
}

/* Make any table wrapper scrollable on mobile */
@media (max-width: 768px) {
    .ugc-card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Responsive width helper: full width on mobile, auto on desktop */
.w-md-auto { width: 100%; }
@media (min-width: 769px) {
    .w-md-auto { width: auto !important; }
}

/* Prevent any element from overflowing viewport horizontally */
html { max-width: 100%; overflow-x: hidden; }
/* body must NOT be overflow:hidden/auto. Setting it on both html and body turns body into a scroll container,
   and position:sticky (the top bar) then sticks to a box that never scrolls, so the bar scrolls away on mobile.
   clip trims overflow without creating a scroll container. */
body { max-width: 100%; overflow-x: clip; }
img, video { max-width: 100%; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 999;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active { display: block; }

/* ================================================================
   WELCOME BANNER
   ================================================================ */
.welcome-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%, var(--secondary) 100%);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-blue);
}

.welcome-banner::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    top: -100px; right: -80px;
}

.welcome-banner::after {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    background: rgba(255,255,255,.04);
    border-radius: 50%;
    bottom: -80px; right: 120px;
}

/* ================================================================
   MISC UTILITIES
   ================================================================ */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-muted   { color: var(--text-muted) !important; }

.rounded-pill { border-radius: 99px !important; }

/* Bootstrap overrides */
.btn { border-radius: var(--radius) !important; font-weight: 600 !important; }
.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.25) !important;
}
.btn-primary:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}
.btn-outline-light {
    border-color: rgba(255,255,255,.3) !important;
    color: #fff !important;
}
.btn-outline-light:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.5) !important;
}

/* ================================================================
   BUY CREDITS — MODERN, MOBILE-FIRST
   ================================================================ */
.buy-credits-page { max-width: 1040px; margin: 0 auto; width: 100%; }

/* ── Hero / balance banner ── */
.bc-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 36px 20px;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 55%, #1D4ED8 100%);
    box-shadow: var(--shadow-blue);
}
.bc-hero::before {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    top: -150px; right: -60px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    pointer-events: none;
}
.bc-hero-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 12px;
    position: relative;
}
.bc-hero-title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0;
    position: relative;
}
.bc-hero-sub {
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 0.9rem;
    position: relative;
}

/* ── Section heading ── */
.bc-section-title {
    font-size: 1.1rem;
    color: var(--dark);
    letter-spacing: -0.2px;
    margin: 0 0 16px;
}

/* ── Package grid ── */
.bc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 36px;
}
.bc-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bc-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.bc-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.bc-card-icon {
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--primary-50);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background .2s ease, color .2s ease;
}
.bc-card:hover .bc-card-icon {
    /* flat brand blue — no gradients in the icon tiles */
    background: var(--primary-dark);
    color: #fff;
}
.bc-card-credits {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.1;
}
.bc-card-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.bc-card-price {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    line-height: 1;
    margin: 18px 0 4px;
}

.bc-card-features {
    list-style: none;
    margin: 16px 0 20px;
    padding: 16px 0 0;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bc-card-features li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.84rem;
    color: var(--text);
}
.bc-check {
    width: 18px; height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-50);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
}

.bc-card-btn {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 700;
}
.buy-credits-page .btn-ugc:focus-visible {
    outline: 3px solid rgba(37,99,235,.4);
    outline-offset: 2px;
}

/* ── Trust / payment info ── */
.bc-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.bc-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.bc-trust-icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.bc-trust-title { font-weight: 700; font-size: 0.86rem; color: var(--dark); }
.bc-trust-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }

/* ── Recent transactions ── */
.bc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.buy-credits-page .ugc-table tbody tr:nth-child(even) td { background: var(--bg-2); }

/* ── Responsive ── */
@media (max-width: 992px) {
    .bc-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .bc-hero { padding: 28px 18px; }
    .bc-hero-title { font-size: 1.4rem; }
    .bc-hero-icon { font-size: 2.2rem; }
}
@media (max-width: 576px) {
    .bc-grid { grid-template-columns: 1fr; gap: 14px; }
    .bc-card { padding: 20px; }
    .bc-trust { grid-template-columns: 1fr; }
    .bc-hero-title { font-size: 1.25rem; }
    .bc-hero-sub { font-size: 0.82rem; }
}

/* ================================================================
   VIDEO GENERATION PROGRESS — CENTERED OVERLAY
   ================================================================ */
body.no-scroll { overflow: hidden; }

#generationProgress { display: none; }
#generationProgress.active {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1500;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 16px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}
#generationProgress.active .ugc-card {
    width: 100%;
    max-width: 520px;
    margin: auto;            /* centers vertically; scrolls if taller than screen */
    box-shadow: var(--shadow-lg);
}

@media (max-width: 576px) {
    #generationProgress.active { padding: 16px 12px; }
    #generationProgress.active .ugc-card .ugc-card-body { padding: 28px 20px !important; }
}
/* ================================================================
   CUT FRAME ICONS — inline SVG replacements for emoji
   ================================================================ */
svg { vertical-align: -0.18em; }
.sidebar-nav .nav-link .nav-icon,
.sidebar-footer .nav-link .nav-icon,
.stat-card .stat-icon,
.empty-state .empty-icon,
.sidebar-toggle,
.play-btn,
.chat-attach-btn,
.pstep-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.stat-icon svg, .empty-icon svg, .pstep-icon svg, .duration-icon svg,
.bc-hero-icon svg, .bc-card-icon svg, .bc-trust-icon svg { display: block; }

/* Desktop: the sidebar is always on screen, so there is no menu button. (The icon block above sets
   .sidebar-toggle to inline-flex everywhere, which had brought the hamburger back on wide screens.) */
@media (min-width: 993px) { .sidebar-toggle { display: none; } }

/* Phones: thumb-sized controls, and 16px fields so iOS Safari does not zoom the page when one is focused. */
@media (max-width: 768px) {
    .sidebar-toggle { width: 44px; height: 44px; margin-left: -8px; }
    .topbar .credits-pill, .topbar .btn-ugc-sm { min-height: 40px; }
    /* !important because the base .form-control rule above is itself !important */
    .form-control, .form-select, textarea.form-control,
    .form-floating > .form-control, .script-editor { font-size: 16px !important; }
}

/* Drawer footer (credits, account, sign out) must never sit on the very bottom edge of the screen.
   100vh on iOS Safari is taller than the visible area (toolbar), and a browser window can be shorter than
   the emulated phone, so use the dynamic height and leave room underneath. */
@media (max-width: 992px) {
    .sidebar { height: 100vh; height: 100dvh; }
    .sidebar-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 992px) and (max-height: 780px) {
    .sidebar-brand { padding: 14px 18px; }
    .credit-card { padding: 8px 10px 8px 12px; }
    .credit-card-num { font-size: 1.15rem; }
    .account-row { margin-top: 8px; padding-top: 8px; }
}

/* ================================================================
   GLOBAL INTERACTION STATES (full-site review 2026-10-02)
   ================================================================ */
.btn-ugc:disabled, .btn-ugc[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-ugc:focus-visible, .btn-ugc-sm:focus-visible, .btn-primary-custom:focus-visible,
.btn-price-primary:focus-visible, .btn-price-outline:focus-visible,
button:focus-visible, a:focus-visible, .form-check-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ================================================================
   DESIGN SYSTEM v3 — see DESIGN.md (Coinbase-derived, blue + white).
   Loaded after the base sheet, so equal-specificity rules here win.
   Blue #2563EB is the only voltage; the source system's near-black
   bands are brand blue here. Pills for actions, 16/24px cards,
   hairlines instead of shadows, 400-weight display, mono numerals.
   ================================================================ */
:root{
    --primary:#2563EB; --primary-pressed:#1D4ED8; --primary-dark:#1D4ED8; --primary-light:#3B82F6;
    --primary-tint:#DBEAFE; --primary-soft:#EFF4FF; --primary-50:#EFF4FF; --primary-100:#DBEAFE;
    --ink:#0A1124; --ink-muted:#4B5872; --ink-subtle:#66748C;
    --canvas:#F5F8FF; --surface-2:#EAF0FB; --surface-strong:#EAF0FB;
    --hairline:#DEE5F0; --hairline-soft:#EDF1F8;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --r-pill:100px;
    /* legacy names → v3 palette, so every older rule follows */
    --secondary:#2563EB; --accent:#3B82F6;
    --dark:#0A1124; --dark-2:#1D4ED8; --dark-3:#4B5872;
    --text:#0A1124; --text-muted:#4B5872; --text-light:#66748C;
    --bg:#F5F8FF; --bg-2:#EAF0FB; --border:#DEE5F0; --border-light:#EDF1F8;
    --sidebar-bg:#FFFFFF;
    --radius-sm:8px; --radius:16px; --radius-lg:24px; --radius-xl:24px;
    --shadow-sm:none; --shadow:none; --shadow-md:none; --shadow-blue:none;
    --shadow-float:0 4px 12px rgba(10,17,36,.08);   /* the one shadow tier: floating layers only */
}

body{background:var(--bg);color:var(--text);font-size:15px}
h1,h2,h3,h4,h5,h6{font-weight:500;letter-spacing:-.015em;color:var(--ink)}
h1,h2{font-weight:400;letter-spacing:-.025em}
.num,.stat-value,.credit-card-num,.credits-num,.bc-card-price,.package-price{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── Buttons: every action is a pill ── */
.btn,.btn-ugc,.btn-primary-custom,.credit-card-btn,.credits-pill{border-radius:var(--r-pill) !important}
.btn{font-weight:600 !important;box-shadow:none !important}
.btn-primary{box-shadow:none !important}
.btn-ugc{font-weight:600;box-shadow:none !important;transition:background .15s,border-color .15s,color .15s}
.btn-ugc:hover{transform:none !important;box-shadow:none !important}
.btn-ugc-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-ugc-primary:hover{background:var(--primary-pressed);border-color:var(--primary-pressed);color:#fff}
.btn-ugc-outline{border:1px solid transparent;background:var(--surface-strong);color:var(--ink)}
.btn-ugc-outline:hover{background:var(--primary-tint);color:var(--ink);border-color:transparent}
.btn-primary-custom{background:var(--primary);font-weight:600;font-size:1rem;min-height:48px;box-shadow:none;letter-spacing:0}
.btn-primary-custom:hover{background:var(--primary-pressed);box-shadow:none;transform:none}
.btn-light{background:#fff !important;color:var(--primary-pressed) !important;border-color:#fff !important}
.btn-light:hover{background:var(--primary-tint) !important;border-color:var(--primary-tint) !important}
.btn-outline-light{border-color:rgba(255,255,255,.6) !important}
.credits-pill{background:var(--primary-soft);color:var(--primary);font-weight:600;border:0}
.credits-pill:hover{background:var(--primary-tint);color:var(--primary-pressed)}

/* ── Inputs: 12px, 48px tall, 2px blue focus ── */
.form-control,.form-select,textarea.form-control,.script-editor{border-radius:12px !important;border:1px solid var(--border) !important;background-color:#fff}
.form-control:not(textarea),.form-select{min-height:48px}
.form-control:focus,.form-select:focus,.script-editor:focus{
    border-color:var(--primary) !important;box-shadow:0 0 0 1px var(--primary) !important;outline:none;
}
.form-floating > .form-control{background:#fff;border-width:1px}
.form-floating > .form-control:focus{box-shadow:0 0 0 1px var(--primary) !important;outline:none}

/* ── Cards: white on the soft canvas + hairline, no shadow ── */
.ugc-card,.stat-card,.video-card,.bc-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:none}
.ugc-card-header{border-bottom:1px solid var(--border-light)}
.stat-card:hover,.video-card:hover{transform:none;box-shadow:none;border-color:#BFD0EE}
.avatar-card,.duration-card{border-radius:var(--radius);border:1px solid var(--border);background:#fff}
.avatar-card.selected,.duration-card.selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.stat-icon{border-radius:50% !important;background:var(--primary-soft) !important;color:var(--primary) !important}
.stat-accent{display:none}
.video-thumbnail{background:var(--primary-tint)}
.modal-content,.dropdown-menu{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}

/* ── Blue bands (welcome, balance, credits-added) ── */
.welcome-banner,.bc-hero,.band-blue{background:var(--primary) !important;box-shadow:none;border:0}
.welcome-banner::before,.welcome-banner::after,.bc-hero::before,.bc-hero::after{display:none}

/* ── Topbar ── */
.topbar{background:#fff;border-bottom:1px solid var(--border);box-shadow:none;height:64px}
.topbar-title{font-weight:600;font-size:1.125rem;letter-spacing:-.01em}

/* ── Sidebar: white rail, blue only for the current page ── */
.sidebar{background:#fff;border-right:1px solid var(--border)}
.sidebar-brand,.sidebar-user{border-bottom:1px solid var(--border-light)}
.sidebar-footer{border-top:1px solid var(--border-light)}
.brand-name{color:var(--primary)}
.brand-sub{color:var(--ink-subtle);text-transform:none;letter-spacing:0;font-size:.75rem}
.nav-section-label{font-size:.75rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-subtle)}
.sidebar-nav{scrollbar-color:var(--border) transparent}
.sidebar-nav .nav-link,.sidebar-footer .nav-link{border-radius:var(--r-pill);font-weight:500;color:var(--ink-muted)}
.sidebar-nav .nav-link:hover,.sidebar-footer .nav-link:hover{background:var(--surface-strong);color:var(--ink)}
.sidebar-nav .nav-link.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.sidebar-nav .nav-link.active::before{display:none}
.sidebar a:focus-visible{outline-color:var(--primary)}
.user-avatar{background:var(--primary) !important}
.user-info .user-name,.account-name{color:var(--ink)}
.user-info .user-credits,.account-email{color:var(--ink-subtle)}
.credit-card{background:var(--primary-soft);border:0;border-radius:var(--radius)}
.credit-card-num{color:var(--ink)}
.credit-card-label{color:var(--ink-subtle);text-transform:none;letter-spacing:0;font-size:.75rem}
.credit-card-btn{background:var(--primary);padding:8px 16px}
.credit-card-btn:hover{background:var(--primary-pressed)}
.credit-card-note{color:var(--primary)}
.account-row{border-top:1px solid var(--border-light)}
.account-logout{color:var(--ink-subtle);border-radius:50%}
.account-logout:hover{background:var(--surface-strong);color:var(--ink)}
.credits-badge-sidebar{background:var(--primary-soft);border:0}
.credits-badge-sidebar .credits-num{color:var(--primary)}
.credits-badge-sidebar .credits-label{color:var(--ink-subtle)}
.admin-badge{background:var(--primary-soft) !important;color:var(--primary) !important}

/* ── Auth pages: full blue page, white card ── */
.auth-page{background:var(--primary) !important}
.auth-page::before,.auth-page::after{display:none}
.auth-card{border-radius:24px;box-shadow:none;padding:40px 36px}
.auth-logo h2{color:var(--primary)}
.auth-page .auth-attrib{color:var(--ink-subtle)}

/* ── Small components ── */
.badge,.rec-chip{border-radius:var(--r-pill);font-weight:600;letter-spacing:0}
.alert,.alert-ugc{border-radius:12px}
.table th{font-size:.75rem;font-weight:600;color:var(--ink-muted);text-transform:none;letter-spacing:0;border-color:var(--border-light)}
.table td{border-color:var(--border-light)}
.page-link{border-radius:var(--r-pill) !important}

@media (max-width:575px){
    .auth-card{padding:32px 22px}
}

/* ── Safe areas (pages use viewport-fit=cover): keep chrome clear of notches and the home bar ── */
.topbar{padding-top:env(safe-area-inset-top,0px);height:auto;min-height:64px;
        padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.sidebar{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px)}
.page-content{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.auth-page{padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@media (max-width:768px){
    .topbar{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
    /* the floating support bubble sits bottom-right: leave room so it never covers the last row */
    .page-content{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* Narrow phones: brand, menu and the main action stay; the credits pill moves to the sidebar card */
@media (max-width:420px){
    .topbar-right .credits-pill{display:none}
    .topbar-title{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
}

/* Attribution line (owner's request): visible on auth pages + app sidebar + landing/email footers */
.auth-attrib{text-align:center;font-size:.78rem;color:var(--text-light);margin:18px 0 0}
.sidebar-credit-line{text-align:center;font-size:.66rem;line-height:1.5;color:var(--ink-subtle);margin-top:12px}