/* ============================================================ RevPro — Game UI Theme v2.0 Brand: Orange #F07A11 + Green #6DBE3A Dark gaming mode, mobile-first responsive ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap'); /* ── RESET & BASE ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Brand colors from logo */ --orange: #F07A11; --orange-light: #FFB733; --orange-glow: rgba(240, 122, 17, 0.38); --orange-dim: #B85C08; --orange-subtle:rgba(240, 122, 17, 0.10); --green: #6DBE3A; --green-light: #9AD85A; --green-glow: rgba(109, 190, 58, 0.35); --green-dim: #4A8A22; --green-subtle: rgba(109, 190, 58, 0.10); /* Map to semantic names */ --primary: var(--orange); --primary-glow: var(--orange-glow); --primary-dim: var(--orange-dim); --gold: #F6C844; --gold-glow: rgba(246, 200, 68, 0.30); --teal: var(--green); --teal-glow: var(--green-glow); --danger: #FF4757; --danger-glow: rgba(255, 71, 87, 0.30); --success: var(--green); /* Surfaces */ --bg-base: #060C1A; --bg-surface: #0D1628; --bg-card: #111E30; --bg-elevated: #182438; --bg-hover: #1E2C44; /* Text */ --text-primary: #EDF2FF; --text-muted: #8EA3BC; --text-dim: #3D5270; /* Borders */ --border: rgba(240, 122, 17, 0.20); --border-hover: rgba(240, 122, 17, 0.40); /* Layout */ --sidebar-w: 260px; --topbar-h: 60px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --trans: all 0.2s ease; --trans-slow: all 0.4s ease; } /* ============================================================ LIGHT THEME — same brand colors (orange/green from the logo), re-balanced for light surfaces so nothing reads as washed out. Toggled via [data-theme="light"] on . ============================================================ */ [data-theme="light"] { /* Brand colors stay the same family but slightly deepened — pure #F07A11 on white is harsh; darkening ~8% keeps contrast comfortable (WCAG AA) without looking like a different brand. */ --orange: #D9690A; --orange-light: #F0900E; --orange-glow: rgba(217, 105, 10, 0.22); --orange-dim: #A84F06; --orange-subtle:rgba(217, 105, 10, 0.08); --green: #4F9429; --green-light: #6DBE3A; --green-glow: rgba(79, 148, 41, 0.20); --green-dim: #3A6F1C; --green-subtle: rgba(79, 148, 41, 0.08); --primary: var(--orange); --primary-glow: var(--orange-glow); --primary-dim: var(--orange-dim); --gold: #B8860B; --gold-glow: rgba(184, 134, 11, 0.20); --teal: var(--green); --teal-glow: var(--green-glow); --danger: #E0303F; --danger-glow: rgba(224, 48, 63, 0.18); --success: var(--green); /* Surfaces — warm off-whites, not stark #FFF, so the orange/green accents still feel like they belong to the same palette */ --bg-base: #F7F4EF; --bg-surface: #FFFFFF; --bg-card: #FFFFFF; --bg-elevated: #F3EFE7; --bg-hover: #ECE6D9; /* Text */ --text-primary: #211A10; --text-muted: #6B6258; --text-dim: #A39A8C; /* Borders */ --border: rgba(217, 105, 10, 0.16); --border-hover: rgba(217, 105, 10, 0.40); } /* Component-level adjustments that need more than a variable swap */ [data-theme="light"] body::before { /* Starfield reads as dirt specks on a light bg — hide it */ display: none; } [data-theme="light"] .card, [data-theme="light"] .stat-card, [data-theme="light"] .subject-card, [data-theme="light"] .auth-card { box-shadow: 0 1px 3px rgba(33, 26, 16, 0.06), 0 1px 2px rgba(33, 26, 16, 0.04); } [data-theme="light"] .hero-banner { background: linear-gradient(135deg, #FFFFFF 0%, #FCEFE0 50%, #FFFFFF 100%); border-color: rgba(217, 105, 10, 0.18); } [data-theme="light"] .hero-banner::before { background: radial-gradient(circle, rgba(217,105,10,0.08) 0%, transparent 70%); } [data-theme="light"] .hero-banner::after { background: radial-gradient(circle, rgba(79,148,41,0.06) 0%, transparent 70%); } [data-theme="light"] .sidebar, [data-theme="light"] .topbar { background: #FFFFFF; box-shadow: 0 1px 0 rgba(33, 26, 16, 0.04); } [data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.92); } [data-theme="light"] .hero-avatar, [data-theme="light"] .sidebar-avatar .avatar-placeholder, [data-theme="light"] .lb-avatar { color: #FFFFFF; } [data-theme="light"] .auth-bg { background: radial-gradient(ellipse at 15% 30%, rgba(217,105,10,0.10) 0%, transparent 50%), radial-gradient(ellipse at 85% 75%, rgba(79,148,41,0.07) 0%, transparent 50%), var(--bg-base); } [data-theme="light"] .btn-gold { color: #FFFFFF; } [data-theme="light"] .form-control { background: #FBF9F5; } [data-theme="light"] .form-control:focus { background: #FFFFFF; } /* Smooth transition when toggling themes */ body, .sidebar, .topbar, .card, .stat-card, .subject-card, .hero-banner, .form-control, .btn { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background-color: var(--bg-base); color: var(--text-primary); font-size: 14px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* Subtle star field */ body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.12) 0%, transparent 100%), radial-gradient(1px 1px at 35% 65%, rgba(255,255,255,0.08) 0%, transparent 100%), radial-gradient(1px 1px at 72% 18%, rgba(255,255,255,0.10) 0%, transparent 100%), radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,0.07) 0%, transparent 100%), radial-gradient(1px 1px at 52% 42%, rgba(255,255,255,0.05) 0%, transparent 100%), radial-gradient(200px 200px at 5% 90%, rgba(240,122,17,0.04) 0%, transparent 100%), radial-gradient(300px 300px at 95% 5%, rgba(109,190,58,0.04) 0%, transparent 100%); pointer-events: none; z-index: 0; } /* ── TYPOGRAPHY ───────────────────────────────────────────── */ h1,h2,h3,h4,h5,h6 { font-family: 'Exo 2', sans-serif; font-weight: 700; line-height: 1.2; color: var(--text-primary); } a { color: var(--orange); text-decoration: none; transition: var(--trans); } a:hover { color: var(--orange-light); } /* ── APP LAYOUT ──────────────────────────────────────────── */ .app-wrapper { display: flex; min-height: 100vh; position: relative; z-index: 1; } .main-content { margin-left: var(--sidebar-w); padding-top: var(--topbar-h); flex: 1; min-height: 100vh; transition: margin-left 0.3s ease; } .page-body { padding: 24px 28px; max-width: 1400px; } /* ── SIDEBAR ─────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--bg-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 200; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .sidebar-brand { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .sidebar-logo { width: 38px; height: 38px; flex-shrink: 0; } .sidebar-logo img, .sidebar-logo svg { width: 100%; height: 100%; } .sidebar-brand-text .brand-name { font-family: 'Exo 2', sans-serif; font-weight: 900; font-size: 20px; color: var(--text-primary); line-height: 1; } .sidebar-brand-text .brand-name span { color: var(--orange); } .sidebar-brand-text .brand-sub { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; } /* Sidebar user */ .sidebar-user { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .sidebar-avatar { position: relative; flex-shrink: 0; } .sidebar-avatar .avatar-placeholder { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--orange-dim)); display: flex; align-items: center; justify-content: center; font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 15px; color: white; border: 2px solid var(--orange-dim); } .sidebar-avatar .level-ring { position: absolute; inset: -3px; border-radius: 50%; } .sidebar-user-info .user-name { font-weight: 600; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 148px; } .sidebar-user-info .user-role { font-size: 11px; color: var(--text-muted); } /* Nav */ .sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; overflow-x: hidden; } .sidebar-nav::-webkit-scrollbar { width: 3px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 2px; } .nav-section-label { padding: 10px 22px 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 22px; color: var(--text-muted); font-size: 13.5px; font-weight: 500; border-left: 3px solid transparent; cursor: pointer; transition: var(--trans); text-decoration: none; } .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); border-left-color: var(--orange-dim); text-decoration: none; } .nav-item.active { background: var(--orange-subtle); color: var(--orange); border-left-color: var(--orange); } .nav-item .nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; } .nav-item .nav-badge { margin-left: auto; background: var(--orange); color: white; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; } .nav-item .nav-badge.green { background: var(--green); color: #000; } /* Sidebar coins */ .sidebar-coins { padding: 14px 18px; border-top: 1px solid var(--border); background: rgba(246,200,68,0.04); flex-shrink: 0; } .sidebar-coins .coins-row { display: flex; align-items: center; gap: 10px; } .sidebar-coins .coins-icon { font-size: 20px; } .sidebar-coins .coins-amount { font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 20px; color: var(--gold); } .sidebar-coins .coins-label { font-size: 11px; color: var(--text-muted); margin-top: 1px; } /* ── TOPBAR ──────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--topbar-h); background: rgba(6, 12, 26, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 150; transition: left 0.3s ease; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .topbar-menu-btn { display: none; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); align-items: center; justify-content: center; cursor: pointer; font-size: 18px; flex-shrink: 0; } .topbar-title { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .topbar-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--trans); font-size: 16px; text-decoration: none; } .topbar-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); } .topbar-xp { display: flex; align-items: center; gap: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; } .topbar-xp .xp-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; } .topbar-xp .xp-bar-wrap { width: 70px; height: 5px; background: var(--bg-base); border-radius: 3px; overflow: hidden; } .topbar-xp .xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-light)); border-radius: 3px; transition: width 0.5s ease; } .topbar-xp .xp-text { font-size: 11px; color: var(--orange); font-weight: 700; } /* ── HERO BANNER ─────────────────────────────────────────── */ .hero-banner { background: linear-gradient(135deg, #0D1628 0%, #1C1206 50%, #091A0C 100%); border: 1px solid rgba(240,122,17,0.18); border-radius: var(--radius-xl); padding: 28px 32px; margin-bottom: 24px; position: relative; overflow: hidden; } .hero-banner::before { content: ''; position: absolute; top: -80px; right: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(240,122,17,0.10) 0%, transparent 70%); pointer-events: none; } .hero-banner::after { content: ''; position: absolute; bottom: -60px; left: 20%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(109,190,58,0.07) 0%, transparent 70%); pointer-events: none; } .hero-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } /* XP Ring — signature element */ .hero-avatar-wrap { position: relative; flex-shrink: 0; } .xp-ring-svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); pointer-events: none; } .xp-ring-svg .ring-bg { fill: none; stroke: rgba(240,122,17,0.12); stroke-width: 3; } .xp-ring-svg .ring-fill { fill: none; stroke: url(#ringGradient); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.22,1,0.36,1); filter: drop-shadow(0 0 6px rgba(240,122,17,0.55)); } .hero-avatar { width: 86px; height: 86px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--orange-dim)); display: flex; align-items: center; justify-content: center; font-family: 'Exo 2', sans-serif; font-weight: 900; font-size: 30px; color: white; border: 3px solid var(--bg-surface); position: relative; z-index: 1; overflow: hidden; } .hero-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .hero-level-badge { position: absolute; bottom: -4px; right: -6px; background: var(--orange); color: white; font-family: 'Exo 2', sans-serif; font-weight: 900; font-size: 10px; padding: 2px 8px; border-radius: 10px; border: 2px solid var(--bg-surface); z-index: 2; white-space: nowrap; } .hero-info { flex: 1; min-width: 200px; } .hero-greeting { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; } .hero-name { font-family: 'Exo 2', sans-serif; font-size: 26px; font-weight: 800; margin-bottom: 3px; } .hero-level-name { font-size: 13px; color: var(--orange); font-weight: 600; margin-bottom: 14px; } .hero-xp-bar { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 9px 14px; max-width: 360px; } .hero-xp-bar .xp-top { display: flex; justify-content: space-between; margin-bottom: 7px; } .hero-xp-bar .xp-label-text { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; } .hero-xp-bar .xp-val { font-size: 12px; font-weight: 700; color: var(--orange); } .hero-xp-bar .xp-track { height: 7px; background: rgba(240,122,17,0.10); border-radius: 4px; overflow: hidden; } .hero-xp-bar .xp-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-light)); border-radius: 4px; transition: width 1.2s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 0 8px var(--orange-glow); } .hero-stats-row { display: flex; gap: 28px; flex-shrink: 0; } .hero-stat { text-align: center; } .hero-stat .stat-num { font-family: 'Exo 2', sans-serif; font-size: 24px; font-weight: 800; line-height: 1; } .hero-stat .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; } .hero-stat.gold-stat .stat-num { color: var(--gold); } .hero-stat.orange-stat .stat-num { color: var(--orange); } .hero-stat.green-stat .stat-num { color: var(--green); } .hero-stat.danger-stat .stat-num { color: var(--danger); } /* ── CARDS ───────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; transition: var(--trans); } .card:hover { border-color: rgba(240,122,17,0.22); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .card-title { font-family: 'Exo 2', sans-serif; font-size: 15px; font-weight: 700; } .card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; } /* Stat mini-cards */ .stat-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; transition: var(--trans); cursor: default; } .stat-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .stat-card .sc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .stat-card .sc-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; } .sc-icon.orange { background: var(--orange-subtle); } .sc-icon.gold { background: rgba(246,200,68,0.12); } .sc-icon.green { background: var(--green-subtle); } .sc-icon.danger { background: rgba(255,71,87,0.12); } .stat-card .sc-delta { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px; } .sc-delta.up { background: var(--green-subtle); color: var(--green); } .sc-delta.down { background: rgba(255,71,87,0.12); color: var(--danger); } .sc-delta.flat { background: rgba(136,163,188,0.10); color: var(--text-muted); } .stat-card .sc-value { font-family: 'Exo 2', sans-serif; font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1; } .stat-card .sc-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; } /* ── SUBJECT GRID ────────────────────────────────────────── */ .subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .subject-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 14px; text-align: center; cursor: pointer; transition: var(--trans); text-decoration: none; display: block; } .subject-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.4); border-color: var(--border-hover); text-decoration: none; } .subject-card .sub-icon { font-size: 28px; margin-bottom: 8px; display: block; } .subject-card .sub-name { font-family: 'Exo 2', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; } .subject-card .sub-count { font-size: 11px; color: var(--text-muted); } .subject-card.locked { opacity: 0.45; cursor: not-allowed; } /* ── BADGES ──────────────────────────────────────────────── */ .badges-row { display: flex; flex-wrap: wrap; gap: 10px; } .badge-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 60px; } .badge-icon-wrap { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--bg-elevated); border: 2px solid var(--border); transition: var(--trans); } .badge-item.earned .badge-icon-wrap { border-color: var(--orange); box-shadow: 0 0 12px var(--orange-glow); background: var(--orange-subtle); } .badge-item.locked .badge-icon-wrap { filter: grayscale(1); opacity: 0.30; } .badge-item .badge-name { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2; } /* ── LEADERBOARD ─────────────────────────────────────────── */ .leaderboard-list { list-style: none; } .lb-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .lb-item:last-child { border-bottom: none; } .lb-rank { width: 26px; font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-muted); text-align: center; flex-shrink: 0; } .lb-rank.top1 { color: #FFD700; } .lb-rank.top2 { color: #C0C0C0; } .lb-rank.top3 { color: #CD7F32; } .lb-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--orange-dim)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: 'Exo 2', sans-serif; flex-shrink: 0; } .lb-name { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; } .lb-name small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); } .lb-name.is-you { color: var(--orange); } .lb-xp { font-family: 'Exo 2', sans-serif; font-size: 13px; font-weight: 700; color: var(--orange); flex-shrink: 0; } /* ── BUTTONS ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); border: none; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: var(--trans); text-decoration: none; line-height: 1; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--orange); color: white; box-shadow: 0 4px 14px var(--orange-glow); } .btn-primary:hover { background: #FF8C20; color: white; transform: translateY(-1px); box-shadow: 0 6px 20px var(--orange-glow); } .btn-green { background: var(--green); color: #000; font-weight: 700; box-shadow: 0 4px 14px var(--green-glow); } .btn-green:hover { background: var(--green-light); color: #000; transform: translateY(-1px); } .btn-gold { background: var(--gold); color: #000; font-weight: 700; box-shadow: 0 4px 14px var(--gold-glow); } .btn-gold:hover { background: #FFD460; color: #000; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); justify-content: center; } .btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-hover); } .btn-danger { background: var(--danger); color: white; } .btn-sm { padding: 6px 13px; font-size: 12px; } .btn-lg { padding: 13px 26px; font-size: 15px; } .btn-block { width: 100%; justify-content: center; } /* ── FORMS ───────────────────────────────────────────────── */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 7px; } .form-control { width: 100%; padding: 11px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 14px; transition: var(--trans); outline: none; } .form-control:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); background: var(--bg-card); } .form-control::placeholder { color: var(--text-dim); } .form-control.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-glow); } .form-control.is-success { border-color: var(--green); } .form-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; } /* ── AUTH PAGES ──────────────────────────────────────────── */ .auth-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at 15% 30%, rgba(240,122,17,0.12) 0%, transparent 50%), radial-gradient(ellipse at 85% 75%, rgba(109,190,58,0.08) 0%, transparent 50%), var(--bg-base); } .auth-card { width: 100%; max-width: 440px; background: var(--bg-surface); border: 1px solid rgba(240,122,17,0.18); border-radius: var(--radius-xl); padding: 36px 32px; box-shadow: 0 28px 70px rgba(0,0,0,0.5); } .auth-logo { text-align: center; margin-bottom: 28px; } .auth-logo-icon { width: 64px; height: 64px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; } .auth-logo h1 { font-family: 'Exo 2', sans-serif; font-size: 26px; font-weight: 900; } .auth-logo h1 span { color: var(--orange); } .auth-logo p { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .auth-divider { text-align: center; margin: 18px 0; position: relative; } .auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); } .auth-divider span { background: var(--bg-surface); padding: 0 12px; font-size: 12px; color: var(--text-muted); position: relative; } .auth-footer { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-muted); } /* Field-level error highlight */ .field-error { font-size: 12px; color: var(--danger); margin-top: 5px; display: flex; align-items: center; gap: 4px; } /* ── ALERTS ──────────────────────────────────────────────── */ .alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } .alert-error { background: rgba(255,71,87,0.08); border: 1px solid rgba(255,71,87,0.28); color: #FF8A94; } .alert-success { background: var(--green-subtle); border: 1px solid rgba(109,190,58,0.28); color: var(--green-light); } .alert-warning { background: rgba(246,200,68,0.08); border: 1px solid rgba(246,200,68,0.28); color: var(--gold); } .alert-info { background: var(--orange-subtle); border: 1px solid rgba(240,122,17,0.28); color: var(--orange-light); } /* ── TRIAL BANNER ────────────────────────────────────────── */ .trial-banner { background: linear-gradient(135deg, rgba(240,122,17,0.08), rgba(109,190,58,0.06)); border: 1px solid rgba(240,122,17,0.22); border-radius: var(--radius-md); padding: 12px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; } .trial-banner .tb-icon { font-size: 22px; flex-shrink: 0; } .trial-banner .tb-text { flex: 1; min-width: 160px; } .trial-banner .tb-text strong { font-size: 13px; color: var(--orange); display: block; } .trial-banner .tb-text span { font-size: 12px; color: var(--text-muted); } /* ── ROLE BADGES ─────────────────────────────────────────── */ .role-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .role-badge.superadmin { background: rgba(255,71,87,0.14); color: var(--danger); } .role-badge.premium { background: rgba(246,200,68,0.14); color: var(--gold); } .role-badge.regular { background: var(--orange-subtle); color: var(--orange); } .role-badge.trial { background: var(--green-subtle); color: var(--green); } .role-badge.finance { background: rgba(59,130,246,0.14); color: #60A5FA; } .role-badge.content { background: rgba(139,92,246,0.14); color: #A78BFA; } /* ── GRID HELPERS ────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } .grid-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 22px; } .mb-4 { margin-bottom: 14px; } .mb-6 { margin-bottom: 22px; } .mb-8 { margin-bottom: 28px; } .mt-4 { margin-top: 14px; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-4 { gap: 14px; } .text-muted { color: var(--text-muted); } .text-orange { color: var(--orange); } .text-green { color: var(--green); } /* ── ANIMATIONS ──────────────────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes badge-pop { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } @keyframes coin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes pulse-orange { 0%, 100% { box-shadow: 0 0 0 0 var(--orange-glow); } 50% { box-shadow: 0 0 0 8px transparent; } } .fade-in-up { animation: fadeInUp 0.4s ease forwards; } .badge-pop { animation: badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .coin-float { animation: coin-float 2s ease-in-out infinite; } .stagger > *:nth-child(1) { animation-delay: 0.05s; opacity: 0; animation-fill-mode: both; } .stagger > *:nth-child(2) { animation-delay: 0.10s; opacity: 0; animation-fill-mode: both; } .stagger > *:nth-child(3) { animation-delay: 0.15s; opacity: 0; animation-fill-mode: both; } .stagger > *:nth-child(4) { animation-delay: 0.20s; opacity: 0; animation-fill-mode: both; } .stagger > *:nth-child(5) { animation-delay: 0.25s; opacity: 0; animation-fill-mode: both; } .stagger > *:nth-child(6) { animation-delay: 0.30s; opacity: 0; animation-fill-mode: both; } /* ── SIDEBAR OVERLAY (mobile) ────────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 190; } .sidebar-overlay.active { display: block; } /* ── SCROLLBAR ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--orange-dim); } /* ============================================================ RESPONSIVE — Mobile-first breakpoints ============================================================ */ /* ── Tablet (max 1100px) ──────────────────────────────────── */ @media (max-width: 1100px) { .grid-sidebar { grid-template-columns: 1fr; } .hero-stats-row { display: none; } } /* ── Small tablet (max 900px) ────────────────────────────── */ @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ── Mobile (max 768px) ──────────────────────────────────── */ @media (max-width: 768px) { /* Sidebar becomes off-canvas drawer */ .sidebar { transform: translateX(-100%); box-shadow: none; z-index: 200; width: 280px; } .sidebar.open { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,0.5); } /* Main content takes full width */ .main-content { margin-left: 0; } /* Topbar spans full width */ .topbar { left: 0; padding: 0 16px; } /* Show hamburger menu button */ .topbar-menu-btn { display: flex; } /* Hide XP bar on small screens (save space) */ .topbar-xp { display: none; } /* Tighten page padding */ .page-body { padding: 14px 14px; } /* Hero */ .hero-banner { padding: 18px 16px; border-radius: var(--radius-lg); } .hero-inner { gap: 16px; } .hero-avatar { width: 72px; height: 72px; font-size: 24px; } .hero-name { font-size: 20px; } .hero-xp-bar { max-width: 100%; } /* Stat cards — 2 columns on mobile */ .stat-cards-row { grid-template-columns: 1fr 1fr; gap: 10px; } /* Subject grid — 3 cols on mobile */ .subject-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; } .subject-card { padding: 14px 8px; } .subject-card .sub-icon { font-size: 22px; } /* Auth card */ .auth-card { padding: 28px 20px; } /* Trial banner stacks */ .trial-banner { flex-direction: column; align-items: flex-start; gap: 10px; } /* Cards */ .card { padding: 14px 16px; border-radius: var(--radius-md); } } /* ── Very small (max 400px) ──────────────────────────────── */ @media (max-width: 400px) { .stat-cards-row { grid-template-columns: 1fr; } .subject-grid { grid-template-columns: repeat(2, 1fr); } .hero-name { font-size: 18px; } .auth-card { padding: 22px 14px; } } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--trans); font-size: 16px; position: relative; overflow: hidden; } .theme-toggle-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); transform: rotate(-8deg) scale(1.05); } .theme-toggle-btn .theme-icon { position: absolute; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } /* Dark mode active: show moon, hide sun */ .theme-icon-moon { opacity: 1; transform: translateY(0) rotate(0); } .theme-icon-sun { opacity: 0; transform: translateY(20px) rotate(-90deg); } /* Light mode active: flip it */ [data-theme="light"] .theme-icon-moon { opacity: 0; transform: translateY(-20px) rotate(90deg); } [data-theme="light"] .theme-icon-sun { opacity: 1; transform: translateY(0) rotate(0); } /* ============================================================ AVATAR EDIT BADGE (pencil overlay on avatar circles) ============================================================ */ .avatar-edit-badge { position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); border: 2px solid var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; z-index: 3; transition: var(--trans); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .sidebar-avatar:hover .avatar-edit-badge, .hero-avatar-wrap:hover .avatar-edit-badge { transform: scale(1.15); background: var(--orange-light); } .sidebar-avatar { position: relative; } /* ============================================================ AVATAR SELECTION MODAL ============================================================ */ .avatar-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .avatar-modal-backdrop.visible { opacity: 1; pointer-events: all; } .avatar-modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; /* without this, max-height was cosmetic only — content just spilled past the box instead of clipping/scrolling */ box-shadow: 0 32px 80px rgba(0,0,0,0.5); transform: scale(0.94) translateY(12px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .avatar-modal-backdrop.visible .avatar-modal { transform: scale(1) translateY(0); } .avatar-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .avatar-modal-title { font-family: 'Exo 2', sans-serif; font-size: 18px; font-weight: 800; color: var(--text-primary); } .avatar-modal-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .avatar-modal-close { position: absolute; top: 22px; right: 24px; width: 32px; height: 32px; border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 14px; flex-shrink: 0; transition: var(--trans); } .avatar-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); } .avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 14px; padding: 20px 24px; } .avatar-option { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 8px; border-radius: var(--radius-md); border: 2px solid transparent; transition: var(--trans); } .avatar-option:hover { background: var(--bg-elevated); transform: translateY(-2px); } .avatar-option.selected { border-color: var(--orange); background: var(--orange-subtle); box-shadow: 0 0 0 3px var(--orange-glow); } .avatar-option-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--bg-elevated); border: 2px solid var(--border); } .avatar-initials-preview { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--orange), var(--orange-dim)); color: white; font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 20px; } .avatar-option-label { font-size: 11px; color: var(--text-muted); text-align: center; font-weight: 600; } .avatar-option.selected .avatar-option-label { color: var(--orange); } .avatar-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid var(--border); flex-shrink: 0; } @media (max-width: 480px) { .avatar-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .avatar-option-img, .avatar-initials-preview { width: 56px; height: 56px; } } /* ============================================================ AVATAR SHOP — Tabs, Locks, Hero Promo ============================================================ */ .avatar-modal-tabbed { max-width: 580px; } .avatar-tabs { display: flex; gap: 6px; margin-top: 12px; padding: 0 24px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; } .avatar-tab-btn { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 14px; border-radius: var(--radius-md, 10px); border: 1px solid transparent; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--trans); } .avatar-tab-btn:hover { background: var(--bg-elevated); color: var(--text-primary); } .avatar-tab-btn.active { background: var(--orange-subtle); border-color: var(--border-hover); color: var(--orange); } .avatar-tab-btn.avatar-tab-hero.active { background: rgba(246, 200, 68, 0.14); border-color: rgba(246, 200, 68, 0.4); color: var(--gold); } .avatar-tab-badge { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 10px; background: var(--bg-elevated); color: var(--text-muted); letter-spacing: 0.3px; } .avatar-tab-badge.promo { background: linear-gradient(135deg, var(--gold), #FFD700); color: #3D2E00; } .avatar-tab-panel { flex: 1 1 auto; min-height: 0; /* required so this flex child can shrink below its content size and actually scroll, instead of stretching the modal past max-height */ overflow-y: auto; } .avatar-tab-panel .avatar-grid { padding-top: 16px; } .avatar-tab-upsell { margin: 16px 24px 0; padding: 10px 14px; background: var(--orange-subtle); border: 1px solid var(--border-hover); border-radius: var(--radius-md, 10px); font-size: 12px; color: var(--text-muted); } .avatar-tab-upsell a { color: var(--orange); font-weight: 700; text-decoration: none; } .avatar-tab-upsell a:hover { text-decoration: underline; } /* ── Hero tab promotional banner ─────────────────────────── */ .avatar-hero-promo { margin: 16px 24px 0; padding: 16px 18px; border-radius: var(--radius-lg, 14px); background: linear-gradient(135deg, rgba(246,200,68,0.16), rgba(240,122,17,0.10)); border: 1px solid rgba(246, 200, 68, 0.35); box-shadow: 0 0 24px rgba(246, 200, 68, 0.10); } .avatar-hero-promo-title { font-family: 'Exo 2', sans-serif; font-size: 15px; font-weight: 900; color: var(--gold); margin-bottom: 6px; letter-spacing: 0.3px; } .avatar-hero-promo-body { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; } .avatar-hero-promo-btn { width: 100%; justify-content: center; } /* ── Locked avatar tiles ──────────────────────────────────── */ /* Deliberately NOT dimming/greying the art here — the whole point of a shop is letting people see what they'd be buying. A small corner badge communicates "locked" without hiding the character. */ .avatar-option.locked { cursor: pointer; } .avatar-option.locked .avatar-option-label { color: var(--text-primary); } .avatar-option-img-wrap { position: relative; width: 64px; height: 64px; } .avatar-option-img-wrap .avatar-option-img { width: 100%; height: 100%; } .avatar-lock-badge { position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: 0 2px 6px rgba(0,0,0,0.45); } .avatar-option-price { font-size: 10px; font-weight: 800; color: var(--gold); text-align: center; margin-top: 2px; } .avatar-option.unlocking .avatar-option-img-wrap { opacity: 0.5; } .avatar-option.unlocking::after { content: '⏳'; position: absolute; font-size: 18px; } /* ============================================================ POST-LOGIN PREMIUM PROMO MODAL ============================================================ */ .premium-promo-wrap { position: relative; width: 100%; max-width: 440px; } /* Decorative art bleeds outside the card edges — these live as siblings of .premium-promo-modal (not children) specifically so the modal's own overflow-y:auto (needed for short screens) never clips them. Plain DOM order does the stacking: the art paints first, the modal's opaque background paints over it wherever they geometrically overlap, so text is never at risk of being covered — only the bleeding-outside portion shows. */ .premium-promo-art { position: absolute; pointer-events: none; user-select: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5)); opacity: 0; transform: scale(0.5) rotate(-10deg); } #premiumPromoBackdrop.visible .premium-promo-art { animation: premiumArtPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } #premiumPromoBackdrop.visible .premium-promo-art-cards { animation-delay: 0.15s; } #premiumPromoBackdrop.visible .premium-promo-art-trophy { animation-delay: 0.32s; } @keyframes premiumArtPop { 0% { opacity: 0; transform: scale(0.5) rotate(-10deg); } 60% { opacity: 1; transform: scale(1.1) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } /* Bleed is set so the art's edge lands 2px CLEAR of the modal box, never overlapping it. Previous values let cards/trophy cross ~50-80px onto the modal's surface — since they're DOM-painted before the modal, that overlapping chunk was getting silently covered by the modal's own opaque background, which is exactly the "elements are under the modal" bug this replaced. Zero overlap means stacking order can no longer hide any part of them, by construction — not just "tuned to look right". */ .premium-promo-art-cards { z-index: 998; width: 164px; top: 186px; left: -96px; } .premium-promo-art-trophy { z-index: 999; width: 158px; bottom: 126px; right: -67px; } .premium-promo-modal { position: relative; background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-card) 100%); border: 1px solid rgba(246, 200, 68, 0.35); border-radius: var(--radius-xl); width: 100%; max-height: 90vh; overflow-y: auto; padding: 34px 24px 22px; /* Kept deliberately tight — a wide blur here used to bleed across the decorative art floating just outside this box and darken it, since the shadow paints in this same stacking position. */ box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 22px rgba(246,200,68,0.10); transform: scale(0.94) translateY(12px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: center; } #premiumPromoBackdrop.visible .premium-promo-modal { transform: scale(1) translateY(0); } /* Close button + banner pill both float outside .premium-promo-modal's own box, so they live at the .premium-promo-wrap level instead of inside the modal — being children of an overflow-y:auto element would get them clipped the moment they cross its edge (which is exactly the "PREMIUM cut in half" bug this replaced). */ .premium-promo-close { position: absolute; top: 14px; right: 14px; z-index: 3; } /* Floating pill badge straddling the card's top edge */ .premium-promo-banner { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1.5; /* defensive: keeps tall emoji glyphs from ever rendering clipped against the pill's own edge */ font-family: 'Exo 2', sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #3D2E00; background: linear-gradient(135deg, var(--gold), #FFD700); padding: 7px 16px; border-radius: 20px; box-shadow: 0 6px 16px rgba(246, 200, 68, 0.4); } .premium-promo-title { font-family: 'Exo 2', sans-serif; font-size: 21px; font-weight: 900; color: var(--text-primary); margin-bottom: 8px; } .premium-promo-subtitle { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; } .premium-promo-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; } .premium-promo-list li { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; } .premium-promo-list li strong { color: var(--text-primary); } .premium-promo-price { margin-bottom: 20px; } .premium-promo-price-amount { display: block; font-family: 'Exo 2', sans-serif; font-size: 32px; font-weight: 900; color: var(--gold); text-shadow: 0 0 20px var(--gold-glow); } .premium-promo-price-amount span { font-size: 14px; font-weight: 600; color: var(--text-muted); } .premium-promo-price-note { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; } .premium-promo-actions { display: flex; flex-direction: column; gap: 10px; } .premium-promo-cta { width: 100%; justify-content: center; font-size: 14px; padding: 12px; box-shadow: 0 0 24px var(--orange-glow); } .premium-promo-footnote { font-size: 10.5px; color: var(--text-dim); margin-top: 12px; } @media (max-width: 480px) { .avatar-option-img-wrap { width: 56px; height: 56px; } .premium-promo-modal { padding: 30px 18px 20px; } .premium-promo-price-amount { font-size: 26px; } .premium-promo-art-cards { width: 92px; left: -94px; top: 80px; } .premium-promo-art-trophy { width: 100px; right: -102px; bottom: 70px; } } /* Narrow phones: the bleed can collide with the screen edge — drop the decorative art rather than let it clip awkwardly. */ @media (max-width: 380px) { .premium-promo-art { display: none; } } /* ============================================================ GLOBAL THIN SCROLLBAR Applies app-wide (modals, sidebars, tables, anything that scrolls) so we never fall back to the bulky OS-default bar. Colors are theme variables — automatically follows dark/light. ============================================================ */ * { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--border-hover) transparent; /* Firefox */ } *::-webkit-scrollbar { width: 8px; height: 8px; } /* Chrome/Safari/Edge */ *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: var(--orange-dim); } /* ============================================================ GLOBAL ALERT / CONFIRM MODAL (assets/js/app-alert.js) Themed replacement for native alert()/confirm() — use this everywhere instead of window.confirm/window.alert. ============================================================ */ .app-alert-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 6000; /* above avatar-modal-backdrop (5000) so it can stack on top of an open modal */ display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .app-alert-backdrop.visible { opacity: 1; pointer-events: all; } .app-alert-modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 380px; padding: 28px 24px 22px; text-align: center; box-shadow: 0 32px 80px rgba(0,0,0,0.5); transform: scale(0.92) translateY(10px); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .app-alert-backdrop.visible .app-alert-modal { transform: scale(1) translateY(0); } .app-alert-icon-wrap { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--orange-subtle); } .app-alert-icon-wrap.success { background: var(--green-subtle); } .app-alert-icon-wrap.warning { background: rgba(246, 200, 68, 0.16); } .app-alert-icon-wrap.danger { background: rgba(255, 71, 87, 0.14); } .app-alert-title { font-family: 'Exo 2', sans-serif; font-size: 17px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; line-height: 1.3; } .app-alert-message { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 22px; white-space: pre-line; } .app-alert-actions { display: flex; gap: 10px; } .app-alert-actions .btn { flex: 1; justify-content: center; } /* ============================================================ DASHBOARD PREMIUM TEASER CARD Persistent (non-modal) upsell for Trial/Regular on their own dashboard — complements the once-per-login promo modal without repeating its full pitch. Lives where Quick Actions used to render an empty staff-only panel for end users. ============================================================ */ .dash-premium-teaser { background: linear-gradient(160deg, rgba(246,200,68,0.10), rgba(240,122,17,0.06)); border: 1px solid rgba(246, 200, 68, 0.30); } .dash-premium-teaser-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .dash-premium-teaser-badge { display: inline-flex; align-items: center; font-family: 'Exo 2', sans-serif; font-size: 10.5px; font-weight: 900; letter-spacing: 0.5px; color: #3D2E00; background: linear-gradient(135deg, var(--gold), #FFD700); padding: 4px 12px; border-radius: 20px; } .dash-premium-teaser-price { font-family: 'Exo 2', sans-serif; font-size: 18px; font-weight: 900; color: var(--gold); } .dash-premium-teaser-price small { font-size: 11px; font-weight: 600; color: var(--text-muted); } .dash-premium-teaser-title { font-family: 'Exo 2', sans-serif; font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; } .dash-premium-teaser-body { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; } .dash-premium-teaser-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .dash-premium-teaser-perks span { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); padding: 5px 10px; border-radius: 20px; white-space: nowrap; } .dash-premium-teaser-cta { width: 100%; justify-content: center; box-shadow: 0 0 20px var(--orange-glow); } /* ============================================================ AVATAR PREVIEW MODAL — opens on click of a locked avatar. Shows the character full-size before asking for a purchase decision, instead of an immediate "are you sure?" popup. ============================================================ */ .avatar-preview-modal { position: relative; background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-card) 100%); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 100%; max-width: 360px; max-height: 90vh; overflow-y: auto; padding: 32px 24px 24px; text-align: center; box-shadow: 0 32px 90px rgba(0,0,0,0.55); transform: scale(0.92) translateY(10px); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } #avatarPreviewBackdrop.visible .avatar-preview-modal { transform: scale(1) translateY(0); } .avatar-preview-img-wrap { width: 140px; height: 140px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; border: 3px solid var(--orange); box-shadow: 0 0 30px var(--orange-glow); } .avatar-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-preview-category { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); padding: 3px 12px; border-radius: 20px; margin-bottom: 10px; } .avatar-preview-name { font-family: 'Exo 2', sans-serif; font-size: 22px; font-weight: 900; color: var(--text-primary); margin-bottom: 12px; } .avatar-preview-price { font-family: 'Exo 2', sans-serif; font-size: 24px; font-weight: 900; color: var(--gold); margin-bottom: 16px; text-shadow: 0 0 16px var(--gold-glow); } .avatar-preview-premium-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; background: rgba(246, 200, 68, 0.08); border: 1px solid rgba(246, 200, 68, 0.25); border-radius: var(--radius-md, 10px); padding: 12px 14px; margin-bottom: 20px; } .avatar-preview-premium-note a { display: inline-block; margin-top: 4px; color: var(--gold); font-weight: 700; text-decoration: none; } .avatar-preview-premium-note a:hover { text-decoration: underline; } .avatar-preview-actions { display: flex; flex-direction: column; gap: 10px; } .avatar-preview-actions .btn { width: 100%; justify-content: center; }