/* N0W1D Telegram Mini App - Modern Glassmorphism Dashboard */

:root {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --secondary: #8b5cf6;
    --secondary-light: #a78bfa;
    --success: #10b981;
    --success-light: #34d399;
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --danger: #ef4444;
    --danger-light: #f87171;
    --info: #3b82f6;
    --info-light: #60a5fa;
    --purple: #8b5cf6;
    --purple-light: #a78bfa;
    --pink: #ec4899;
    --pink-light: #f472b6;
    --cyan: #06b6d4;
    --cyan-light: #22d3ee;
    --orange: #f97316;
    --orange-light: #fb923c;
    --bg-base: #0f172a;
    --bg-elevated: #1e293b;
    --bg-surface: #334155;
    --bg-card: rgba(30, 41, 59, 0.7);
    --bg-card-solid: #1e293b;
    --bg-color: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-muted: #475569;
    --border-glass: rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-blur: blur(12px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.7);
    --shadow-glow-primary: 0 10px 30px rgba(99, 102, 241, 0.4);
    --shadow-glow-success: 0 10px 30px rgba(16, 185, 129, 0.4);
    --shadow-glow-danger: 0 10px 30px rgba(239, 68, 68, 0.4);
    --shadow-primary: 0 10px 30px rgba(99, 102, 241, 0.4);
    --shadow-primary-lg: 0 15px 40px rgba(99, 102, 241, 0.5);
    --primary-color: #6366f1;
    --error: #ef4444;
    --error-color: #ef4444;
    --error-light: rgba(239, 68, 68, 0.2);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-modal: 200;
    --z-popover: 300;
    --z-tooltip: 400;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
    --bg-base: #f1f5f9;
    --bg-elevated: #ffffff;
    --bg-surface: #e2e8f0;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-solid: #ffffff;
    --bg-color: #f1f5f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    --border-glass: rgba(0, 0, 0, 0.1);
    --border-subtle: rgba(0, 0, 0, 0.05);
    --border-strong: rgba(0, 0, 0, 0.15);
    --border-color: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: 1px solid rgba(0, 0, 0, 0.1);
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { width: 100%; height: 100%; overscroll-behavior: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
body { width: 100%; min-height: 100vh; min-height: 100dvh; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-primary); background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); background-attachment: fixed; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
[data-theme="light"] body { background: linear-gradient(135deg, #e0e7ff 0%, #f1f5f9 50%, #e2e8f0 100%); }
body.theme-transition, body.theme-transition * { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important; }

.glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
[data-theme="light"] .glass { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.1); }

.icon-container { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: all var(--transition-normal); }
.icon-primary { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
.icon-success { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.icon-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.icon-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.icon-info { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.icon-purple { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.icon-pink { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
.icon-cyan { background: rgba(6, 182, 212, 0.2); color: #22d3ee; }
.icon-orange { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
[data-theme="light"] .icon-primary { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
[data-theme="light"] .icon-success { background: rgba(16, 185, 129, 0.15); color: #10b981; }
[data-theme="light"] .icon-warning { background: rgba(245, 158, 11, 0.15); color: #d97706; }
[data-theme="light"] .icon-danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
[data-theme="light"] .icon-info { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
[data-theme="light"] .icon-purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
[data-theme="light"] .icon-pink { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
[data-theme="light"] .icon-cyan { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

.animate-fadeIn { animation: fadeIn 0.5s ease forwards; }
.animate-fadeInUp { animation: fadeInUp 0.5s ease forwards; }
.animate-fadeInDown { animation: fadeInDown 0.5s ease forwards; }
.animate-scaleIn { animation: scaleIn 0.4s var(--transition-bounce) forwards; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; } .delay-6 { animation-delay: 0.6s; } .delay-7 { animation-delay: 0.7s; } .delay-8 { animation-delay: 0.8s; }

.screen { display: none; width: 100%; min-height: 100vh; opacity: 0; transition: opacity var(--transition-slow); }
.screen.active { display: flex; opacity: 1; }

#loading-screen { flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-xl); background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); position: relative; overflow: hidden; }
#loading-screen::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%); animation: pulse 4s ease-in-out infinite; }
.logo-container { margin-bottom: var(--spacing-2xl); animation: fadeInScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; z-index: 1; }
.logo, .logo-text { max-width: 200px; height: auto; color: white; font-size: 52px; font-weight: 900; text-align: center; letter-spacing: -1px; text-shadow: 0 4px 20px rgba(99, 102, 241, 0.5); }
.welcome-text { font-size: 26px; font-weight: 700; color: white; margin-bottom: var(--spacing-xl); animation: fadeInUp 0.6s ease 0.2s both; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); text-align: center; max-width: 90%; position: relative; z-index: 1; word-wrap: break-word; }
.progress-container { width: 100%; max-width: 400px; animation: fadeInUp 0.6s ease 0.4s both; position: relative; z-index: 1; }
.progress-bar { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--spacing-md); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
.progress-fill { height: 100%; background: var(--gradient-primary); border-radius: var(--radius-full); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); width: 0%; box-shadow: 0 0 20px rgba(99, 102, 241, 0.6); }
.progress-percentage { text-align: center; font-size: 18px; font-weight: 600; color: var(--text-secondary); }

#app-container { position: relative; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#app-container::before { display: none; }

.app-header { position: sticky; top: 0; left: 0; right: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0 var(--spacing-lg); z-index: var(--z-sticky); animation: fadeInDown 0.5s ease; }
[data-theme="light"] .app-header { background: rgba(255, 255, 255, 0.8); border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.header-left { flex: 1; display: flex; align-items: center; gap: var(--spacing-sm); }
.header-center { flex: 0 0 auto; display: flex; align-items: center; }
.header-right { flex: 1; display: flex; justify-content: flex-end; gap: var(--spacing-sm); }
.back-button { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); color: var(--text-primary); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); transition: all var(--transition-normal); }
.back-button:hover { background: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.3); transform: translateX(-2px); }
.back-button:active { transform: scale(0.95); }
.header-logo, .header-logo-text { height: 48px; transition: transform var(--transition-bounce); filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.3)); }
.header-logo-text { font-size: 24px; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; }
.home-button { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-normal); color: var(--text-primary); font-size: 18px; margin-right: 8px; }
.home-button:hover { background: var(--gradient-primary); border-color: transparent; color: white; box-shadow: var(--shadow-glow-primary); }
.home-button:active { transform: scale(0.95); }
.theme-toggle { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-glass); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-normal); position: relative; overflow: hidden; }
.theme-toggle:hover { background: var(--gradient-primary); border-color: transparent; box-shadow: var(--shadow-glow-primary); }
.theme-toggle:hover i { color: white; }
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle i { font-size: 18px; color: var(--text-primary); transition: all var(--transition-normal); }
.theme-icon-sun, .theme-icon-moon { position: absolute; transition: all var(--transition-normal); }
.theme-icon-sun { transform: scale(1) rotate(0deg); opacity: 1; }
.theme-icon-moon { transform: scale(0) rotate(-90deg); opacity: 0; }
[data-theme="dark"] .theme-icon-sun { transform: scale(0) rotate(90deg); opacity: 0; }
[data-theme="dark"] .theme-icon-moon { transform: scale(1) rotate(0deg); opacity: 1; }

.main-content { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg); padding-bottom: 120px; animation: fadeIn 0.5s ease; }

.welcome-hero { position: relative; padding: var(--spacing-2xl) var(--spacing-xl); margin: calc(var(--spacing-lg) * -1); margin-bottom: var(--spacing-xl); background: var(--gradient-primary); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); overflow: hidden; }
.welcome-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); z-index: 0; }
.welcome-hero::after { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); z-index: 0; }
.welcome-hero > * { position: relative; z-index: 1; }
.welcome-title { font-size: 32px; font-weight: 800; color: white; margin-bottom: var(--spacing-sm); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); animation: fadeInUp 0.6s ease; }
.welcome-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.9); margin-bottom: var(--spacing-sm); animation: fadeInUp 0.6s ease 0.1s both; }
.welcome-user { font-size: 18px; font-weight: 600; color: white; animation: fadeInUp 0.6s ease 0.2s both; }

.card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl); padding: var(--spacing-xl); position: relative; transition: all var(--transition-normal); animation: fadeInUp 0.5s ease forwards; }
.card:nth-child(1) { animation-delay: 0.1s; } .card:nth-child(2) { animation-delay: 0.2s; } .card:nth-child(3) { animation-delay: 0.3s; }
.card-accent-primary::before { content: ''; position: absolute; top: 0; left: var(--spacing-lg); right: var(--spacing-lg); height: 3px; background: var(--gradient-primary); border-radius: 0 0 3px 3px; }
.card-accent-success::before { content: ''; position: absolute; top: 0; left: var(--spacing-lg); right: var(--spacing-lg); height: 3px; background: var(--gradient-success); border-radius: 0 0 3px 3px; }
.card-accent-warning::before { content: ''; position: absolute; top: 0; left: var(--spacing-lg); right: var(--spacing-lg); height: 3px; background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); border-radius: 0 0 3px 3px; }
.card-accent-danger::before { content: ''; position: absolute; top: 0; left: var(--spacing-lg); right: var(--spacing-lg); height: 3px; background: var(--gradient-danger); border-radius: 0 0 3px 3px; }
[data-theme="light"] .card { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-md); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card-clickable { cursor: pointer; }
.card-clickable:active { transform: translateY(-2px) scale(0.98); }
.card-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: var(--spacing-sm); letter-spacing: -0.3px; }
.card-subtitle { font-size: 15px; color: var(--text-secondary); margin-bottom: var(--spacing-lg); }

/* ==========================================
   MENU GRID & MENU ITEMS
   ========================================== */

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.menu-item {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    animation: fadeInUp 0.5s ease-out both;
    position: relative;
    overflow: hidden;
}

.menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-item:hover::before {
    opacity: 1;
}

.menu-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(99, 102, 241, 0.3);
}

.menu-item:active {
    transform: translateY(-2px) scale(0.98);
}

.menu-item .icon-container {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.menu-item:hover .icon-container {
    transform: scale(1.1);
}

.menu-item .item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.menu-item .item-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Menu item accent variants */
.menu-item.accent-primary::before { background: var(--gradient-primary); }
.menu-item.accent-success::before { background: var(--gradient-success); }
.menu-item.accent-warning::before { background: var(--gradient-warning); }
.menu-item.accent-danger::before { background: var(--gradient-danger); }
.menu-item.accent-info::before { background: var(--gradient-info); }
.menu-item.accent-purple::before { background: var(--gradient-purple); }
.menu-item.accent-pink::before { background: var(--gradient-pink); }
.menu-item.accent-cyan::before { background: var(--gradient-cyan); }

/* Stagger animation for menu items */
.menu-item:nth-child(1) { animation-delay: 0.1s; }
.menu-item:nth-child(2) { animation-delay: 0.15s; }
.menu-item:nth-child(3) { animation-delay: 0.2s; }
.menu-item:nth-child(4) { animation-delay: 0.25s; }
.menu-item:nth-child(5) { animation-delay: 0.3s; }
.menu-item:nth-child(6) { animation-delay: 0.35s; }
.menu-item:nth-child(7) { animation-delay: 0.4s; }
.menu-item:nth-child(8) { animation-delay: 0.45s; }

/* Menu item label */
.menu-item-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Menu item notification badge - red circle */
.menu-item-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}


/* ==========================================
   PROFILE PICTURE (PFP) - FAB STYLE
   ========================================== */

.pfp-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: visible;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid var(--bg-base);
    background: var(--gradient-primary);
    animation: scaleIn 0.4s ease-out 0.5s both;
}

.pfp-container::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--gradient-primary);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pfp-container:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
}

.pfp-container:hover::before {
    opacity: 0.4;
    animation: pulse 1.5s ease-in-out infinite;
}

.pfp-container:active {
    transform: scale(0.95);
}

.pfp-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.pfp-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    overflow: hidden;
    border-radius: 50%;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--gradient-danger);
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-base);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.notification-dot {
    position: relative;
    top: auto;
    right: auto;
    width: 10px;
    height: 10px;
    min-width: 10px;
    padding: 0;
    border: none;
    margin-left: auto;
    flex-shrink: 0;
}

#pfp-notification {
    width: 12px;
    height: 12px;
    top: -2px;
    right: -2px;
    border: 2px solid var(--bg-base);
}

/* ==========================================
   CART ICON (FAB STYLE)
   ========================================== */

.cart-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-success);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    animation: scaleIn 0.4s ease-out 0.6s both;
}

.cart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5);
}

.cart-btn:active {
    transform: scale(0.95);
}

.cart-btn .icon {
    font-size: 1.25rem;
    color: white;
}

.cart-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: var(--danger);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid var(--bg-base);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.2; }
}


/* ==========================================
   BUTTONS WITH GLOW EFFECTS
   ========================================== */

/* Base button styles - apply to .btn AND all button variants */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-success,
.btn-warning,
.btn-danger,
.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 48px;
    min-width: 100px;
    letter-spacing: 0.01em;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn:hover::before {
    opacity: 1;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.btn-warning {
    background: var(--gradient-warning);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4);
}

.btn-danger {
    background: var(--gradient-danger);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}

.btn-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.btn-glass:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 14px;
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
    border-color: var(--primary);
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================
   SECONDARY BUTTON STYLE
   ========================================== */

.btn-secondary {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-glass);
    position: relative;
    overflow: hidden;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.btn-secondary > * {
    position: relative;
    z-index: 1;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(99, 102, 241, 0.3);
}

.btn-secondary:hover::before {
    opacity: 1;
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

[data-theme="light"] .btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 1) 100%);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ==========================================
   BUTTON MODIFIERS
   ========================================== */

.btn-full-width {
    width: 100%;
    justify-content: center;
}

/* Tab Buttons */
.btn-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Extra Small Button */
.btn-xs {
    padding: 4px 10px !important;
    font-size: 11px !important;
    min-height: 28px !important;
    border-radius: 12px !important;
}

/* Small Button */
.btn-sm {
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-height: 36px !important;
    border-radius: 14px !important;
}

/* Large Button */
.btn-lg {
    padding: 16px 28px !important;
    font-size: 16px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
}

/* Icon Button (small, transparent) */
.btn-icon {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    min-height: auto;
}

.btn-icon:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

/* Mobile Touch Targets */
@media (pointer: coarse) {
    .btn, .menu-item, .drawer-item, .quantity-btn, select, .btn-outline {
        min-height: 48px;
    }

    .btn-sm {
        min-height: 40px !important;
    }

    .btn-xs {
        min-height: 32px !important;
    }
}

/* ==========================================
   FLOATING CART ICON
   ========================================== */

.cart-icon {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.cart-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5), 0 6px 20px rgba(0, 0, 0, 0.25);
}

.cart-icon:active {
    transform: scale(0.95);
}

.cart-icon-symbol {
    font-size: 24px;
    color: white;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bg-color);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: pulse-badge 2s ease-in-out infinite;
}

/* ==========================================
   FORM FIELD STYLES (ENHANCED)
   ========================================== */

.input-field,
.textarea-field,
.select-field {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 500;
    border: 2px solid var(--border-glass);
    border-radius: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    transition: all 0.3s ease;
    min-height: 48px;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    outline: none;
}

.input-field:focus,
.textarea-field:focus,
.select-field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.input-field::placeholder,
.textarea-field::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.textarea-field {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.select-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}

[data-theme="light"] .input-field,
[data-theme="light"] .textarea-field,
[data-theme="light"] .select-field {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}


/* ==========================================
   BADGES
   ========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.badge-primary {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-light);
}

.badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-light);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-light);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-light);
}

.badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: var(--info-light);
}

.badge-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

/* Deliberately neutral: used for an order status the front end does not
   recognise, so an unmapped value reads as inert rather than as a real state. */
.badge-muted {
    background: rgba(113, 113, 122, 0.18);
    color: var(--text-muted);
}

/* ==========================================
   INPUT FIELDS WITH GLASS EFFECT
   ========================================== */

.input-group {
    margin-bottom: 1rem;
}

.input-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
    outline: none;
}

.input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

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

.input-icon {
    position: relative;
}

.input-icon .icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.input-icon .input,
.input-icon input {
    padding-left: 2.75rem;
}

/* Search input */
.search-input {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border-radius: 50px;
    padding: 0.75rem 1.25rem 0.75rem 2.75rem;
}


/* ==========================================
   SERVICES GRID
   ========================================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
}

.service-item {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 1rem 0.75rem;
    border: 1px solid var(--glass-border);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.4s ease-out both;
}

.service-item:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.service-item .icon-container {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.service-item .title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ==========================================
   LIST ITEMS / TRANSACTION LIST
   ========================================== */

.list-group {
    padding: 0 1rem;
}

.list-item {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 1rem;
    border: 1px solid var(--glass-border);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    animation: fadeInUp 0.4s ease-out both;
}

.list-item:hover {
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateX(4px);
}

.list-item .icon-container {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-item .content {
    flex: 1;
    min-width: 0;
}

.list-item .title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.list-item .subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.list-item .amount {
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
}

.list-item .amount.positive {
    color: var(--success-light);
}

.list-item .amount.negative {
    color: var(--danger-light);
}


/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Text utilities */
.text-primary { color: var(--primary-light) !important; }
.text-success { color: var(--success-light) !important; }
.text-warning { color: var(--warning-light) !important; }
.text-danger { color: var(--danger-light) !important; }
.text-info { color: var(--info-light) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }

/* Font weights */
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Spacing utilities */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
/* .mt-sm was used in 9 places and defined in none of them, so every one of
   those margins silently did nothing - the bank-transfer and crypto buttons
   were touching, and so were three buttons on the subscription screen.
   --spacing-sm is 8px, matching the rest of the scale. */
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flexbox utilities */
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.align-center { align-items: center !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }

/* Width utilities */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Border radius */
.rounded { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-xl { border-radius: 16px !important; }
.rounded-full { border-radius: 9999px !important; }

/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* Position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }

/* Z-index */
.z-10 { z-index: 10 !important; }
.z-50 { z-index: 50 !important; }
.z-100 { z-index: 100 !important; }

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }


/* ==========================================
   SCROLLBAR STYLING
   ========================================== */

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary, #6366f1);
    border-radius: 3px;
    min-height: 30px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover, #818cf8);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary, #6366f1) var(--bg-tertiary, rgba(255, 255, 255, 0.05));
}

/* Ensure scrollable containers have proper styling */
html,
body,
#app-container,
#main-content,
.main-content,
#people-list,
#all-clients-list,
.modal-body,
.drawer-body,
[style*="overflow-y: auto"],
[style*="overflow-y:auto"],
[style*="overflow: auto"],
[style*="overflow:auto"] {
    scrollbar-width: thin;
    scrollbar-color: var(--primary, #6366f1) var(--bg-tertiary, rgba(255, 255, 255, 0.05));
}

/* Apply webkit scrollbar to specific containers */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app-container::-webkit-scrollbar,
#main-content::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#app-container::-webkit-scrollbar-thumb,
#main-content::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
    background: var(--primary, #6366f1);
    border-radius: 3px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#app-container::-webkit-scrollbar-track,
#main-content::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
}

/* ==========================================
   MODAL / DIALOG
   ========================================== */

/* Modal Container - The root element with flex centering */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.active {
    display: flex;
}

/* Modal Overlay - Background dimmer */
.modal .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active .modal-overlay {
    opacity: 1;
}

/* Modal Content - The actual dialog box */
.modal .modal-content {
    position: relative;
    z-index: 1;
    background: var(--bg-elevated);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.active .modal-content {
    transform: scale(1);
    opacity: 1;
}

.modal-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-light);
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    padding: 1.25rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Modal footer buttons - ensure consistent styling */
.modal-footer .btn,
.modal-footer .btn-primary,
.modal-footer .btn-secondary,
.modal-footer button {
    flex: 1;
    min-height: 44px;
    border-radius: 14px;
    font-weight: 600;
    padding: 12px 20px;
}

/* ==========================================
   TOAST / NOTIFICATION
   ========================================== */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    padding: 1rem;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideInRight 0.3s ease-out;
}

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

.toast.success .toast-icon { color: var(--success-light); }
.toast.warning .toast-icon { color: var(--warning-light); }
.toast.danger .toast-icon { color: var(--danger-light); }
.toast.info .toast-icon { color: var(--info-light); }

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.toast-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
}


/* ==========================================
   RESPONSIVE - TABLET (768px+)
   ========================================== */

@media (min-width: 768px) {
    .app-container {
        max-width: 720px;
        margin: 0 auto;
    }
    
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        padding: 0 1.5rem;
    }
    
    .menu-item {
        padding: 1.5rem;
    }
    
    .menu-item .icon-container {
        width: 64px;
        height: 64px;
        font-size: 1.75rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        padding: 0 1.5rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .welcome-hero {
        padding: 2rem 1.5rem;
    }
    
    .welcome-hero h1 {
        font-size: 1.75rem;
    }
    
    .profile-btn {
        width: 64px;
        height: 64px;
        right: 32px;
        bottom: 32px;
    }
    
    .cart-btn {
        width: 60px;
        height: 60px;
        left: 32px;
        bottom: 32px;
    }
}

/* ==========================================
   RESPONSIVE - DESKTOP (1024px+)
   ========================================== */

@media (min-width: 1024px) {
    .app-container {
        max-width: 960px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
    
    .menu-item {
        padding: 1.75rem;
        border-radius: 20px;
    }
    
    .menu-item .icon-container {
        width: 72px;
        height: 72px;
        font-size: 2rem;
        border-radius: 18px;
    }
    
    .services-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .app-header {
        padding: 1.25rem 2rem;
    }
    
    .card {
        border-radius: 20px;
    }
    
    .welcome-hero {
        padding: 2.5rem 2rem;
        border-radius: 24px;
    }
    
    .welcome-hero h1 {
        font-size: 2rem;
    }
}

/* ==========================================
   RESPONSIVE - LARGE DESKTOP (1280px+)
   ========================================== */

@media (min-width: 1280px) {
    .app-container {
        max-width: 1200px;
    }
    
    .menu-grid {
        gap: 1.75rem;
    }
    
    .menu-item {
        padding: 2rem;
    }
    
    .menu-item .icon-container {
        width: 80px;
        height: 80px;
        font-size: 2.25rem;
    }
    
    .menu-item .item-title {
        font-size: 1.05rem;
    }
    
    .welcome-hero h1 {
        font-size: 2.25rem;
    }
}

/* ==========================================
   RESPONSIVE - ULTRA WIDE (1600px+)
   ========================================== */

@media (min-width: 1600px) {
    .app-container {
        max-width: 1400px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 2rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}


/* ==========================================
   HOVER STATES (DESKTOP ONLY)
   ========================================== */

@media (hover: hover) and (pointer: fine) {
    .menu-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
    }
    
    .menu-item:hover .icon-container {
        transform: scale(1.15) rotate(5deg);
    }
    
    .card:hover {
        border-color: rgba(99, 102, 241, 0.25);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    }
    
    .service-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    }
    
    .service-item:hover .icon-container {
        transform: scale(1.1);
    }
    
    .list-item:hover {
        transform: translateX(8px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    .btn:hover {
        transform: translateY(-3px);
    }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .menu-item,
    .card,
    .service-item,
    .list-item,
    .btn {
        transform: none !important;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .app-header,
    .profile-btn,
    .cart-btn,
    .loading-screen {
        display: none !important;
    }
    
    .card,
    .menu-item,
    .list-item {
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ==========================================
   SAFE AREA INSETS (iOS)
   ========================================== */

@supports (padding: max(0px)) {
    .app-container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    
    /* The header is a FIXED height:72px border-box, so padding-top is taken OUT
       of the content box rather than added to the element. Before viewport-fit
       =cover the inset read 0 and this was a harmless 16px; with the inset live
       (59px on an iPhone 14 Pro) it would crush the header's usable space to
       13px. Grow the element by the inset instead, so the 72px of content is
       preserved and simply sits below the notch. */
    .app-header {
        height: calc(72px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }
    
    .profile-btn {
        right: max(24px, calc(env(safe-area-inset-right) + 16px));
        bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    }
    
    .cart-btn {
        left: max(24px, calc(env(safe-area-inset-left) + 16px));
        bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    }
}

/* ==========================================
   iOS Date/Time Input Fixes
   ========================================== */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom on focus */
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
    opacity: 1;
}

/* iOS-specific sizing fix */
@supports (-webkit-touch-callout: none) {
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================
   END OF MAIN.CSS
   ========================================== */

/* ── INQ-CHAT-01: Inquiry Live Chat ─────────────────────────────────────── */
/* Loading skeleton for the chat history (SOP §7.2 "empty and edge states"). */
.skeleton-line {
    background: linear-gradient(90deg,
        var(--surface-2, rgba(127,127,127,.10)) 25%,
        var(--surface-3, rgba(127,127,127,.20)) 37%,
        var(--surface-2, rgba(127,127,127,.10)) 63%);
    background-size: 400% 100%;
    animation: inq-skeleton 1.4s ease infinite;
}

@keyframes inq-skeleton {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Message bubbles.
   These live in CSS rather than inline styles because they use
   white-space:pre-wrap — with the markup inline, the template literal's own
   indentation was being rendered as content and a two-character "Hi" came out
   116x79px instead of 39x38px. Keep the interpolation hard against the tags. */
.inq-bubble {
    max-width: 82%;
    width: fit-content;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    text-align: left;
}

.inq-bubble-mine {
    background: var(--primary-color);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.inq-bubble-theirs {
    background: var(--surface-2, rgba(127, 127, 127, .14));
    color: var(--text-primary);
    border-bottom-left-radius: 5px;
}

.inq-system {
    align-self: center;
    max-width: 92%;
    text-align: center;
    background: var(--surface-2, rgba(127, 127, 127, .12));
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    white-space: pre-wrap;
}

/* The composer must clear the Telegram viewport inset on iOS. */
.inq-composer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* ── CR-01 item 6: input sizing and the keyboard viewport jump ────────────── */

/* 6B — Height comes from Telegram's stable viewport when we have it, and from
   dynamic viewport units otherwise (the nawid.dev/store web clone has no
   Telegram viewport API at all). --tg-viewport is set by app.js. */
:root {
    --tg-viewport: 100dvh;
    --control-height: 44px;
}

/* 6A — one control height across the app. Single-line fields were rendering at
   ~52px from .875rem vertical padding; 16px font is deliberate, anything
   smaller makes iOS zoom the page on focus, which is half of the "jump". */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
.input-field,
.select-field {
    min-height: var(--control-height);
    height: var(--control-height);
    padding: 0 14px;
    font-size: 16px;
    line-height: normal;
}

/* Multi-line fields keep their height but lose the blanket 120px minimum,
   which was forcing even one-line composers to be huge. */
textarea {
    min-height: var(--control-height);
    padding: 11px 14px;
    font-size: 16px;
    line-height: 1.4;
}

/* Only genuine long-form fields get the tall default. */
textarea.textarea-field,
textarea[rows]:not([rows="1"]):not([rows="2"]) {
    min-height: 96px;
}

/* The chat screen sizes to the visible viewport rather than 100vh, so the
   composer sits directly above the keyboard instead of being pushed off. */
.inq-chat-container {
    height: var(--tg-viewport);
    max-height: var(--tg-viewport);
}

.inq-composer {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary, #0f172a);
    z-index: 2;
}

#inq-input {
    font-size: 16px;   /* below 16px iOS auto-zooms on focus */
}

.inq-cta-card {
    transition: border-color .15s ease;
}

.inq-cta-card:hover {
    border-color: var(--primary-color);
}

/* ── Chat UX: scroll containment, keyboard stability, brand watermark ───────
   Owner, 2026-08-10: "when I scroll down I can scroll more than the text boxes.
   When I click the text box the screen goes up, and it's very bad to work in."

   ROOT CAUSE of both symptoms, verified across all six chat surfaces: every
   message list is `flex:1; overflow-y:auto` inside a flex column, and NOT ONE
   of them sets min-height. A flex item defaults to min-height:auto, so it
   refuses to shrink below its content -- the list grows to fit every message,
   the container overflows the viewport, the whole PAGE scrolls behind the
   composer, and the composer gets pushed off screen when the keyboard opens.
   min-height:0 lets the list shrink to its container so the scrolling happens
   inside it, which is what makes the composer stay put.

   Deliberately CSS-only: the markup and layout are untouched, exactly as asked.
   The inline `flex:1; overflow-y:auto` on these elements does not include
   min-height or overscroll-behavior, so these rules apply cleanly.

   Surfaces covered: inquiry/sales, delivery, one-time (quick), support,
   IG-large, and tickets. */

/* The container must not scroll itself -- scrolling belongs to the list. */
.inq-chat-container,
.delivery-chat-container,
.ticket-chat-container,
.chat-container,
#chat-container {
    overflow: hidden;
    min-height: 0;
}

/* THE FIX. */
#inq-messages,
#delivery-messages,
#otc-messages,
#chat-messages,
#ticket-messages,
.inq-messages,
.delivery-messages,
.chat-messages,
.ticket-messages {
    min-height: 0;
    /* Stop a rubber-band at the top or bottom from dragging the page with it. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Keep the view pinned to the newest message while messages stream in,
       instead of the list jumping under the reader. */
    overflow-anchor: auto;
    scroll-behavior: auto;

    /* Brand watermark: ONE centred mark. A repeating tile read as cheap and busy
       (owner: "it looks too much like Temu"). Still pre-faded in the PNG rather
       than via CSS opacity, which would dim the messages sitting on top of it.
       background-attachment:scroll pins it to the element so it stays put
       instead of sliding around with the conversation. */
    background-image: url('../assets/chat-watermark.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 190px auto;
    background-attachment: scroll;
}

[data-theme="light"] #inq-messages,
[data-theme="light"] #delivery-messages,
[data-theme="light"] #otc-messages,
[data-theme="light"] #chat-messages,
[data-theme="light"] #ticket-messages {
    /* The mark is built for a dark ground; soften it further on light. */
    opacity: 1;
    background-blend-mode: luminosity;
}

/* Composers keep their height no matter how long the thread gets, and clear the
   home indicator on modern iPhones. */
.inq-composer,
.delivery-chat-container > :last-child,
.ticket-chat-container > :last-child,
.chat-container > :last-child,
#chat-container > :last-child {
    flex-shrink: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* A composer that is only ever one line looks unfinished; let it grow a little
   with the text but never take over the screen. */
#inq-input,
.chat-container textarea,
.delivery-chat-container textarea,
.ticket-chat-container textarea {
    max-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Quieter scrollbars on desktop -- the default light bar looks broken against
   the dark chat ground. */
#inq-messages::-webkit-scrollbar,
#delivery-messages::-webkit-scrollbar,
#otc-messages::-webkit-scrollbar,
#chat-messages::-webkit-scrollbar,
#ticket-messages::-webkit-scrollbar {
    width: 6px;
}

#inq-messages::-webkit-scrollbar-thumb,
#delivery-messages::-webkit-scrollbar-thumb,
#otc-messages::-webkit-scrollbar-thumb,
#chat-messages::-webkit-scrollbar-thumb,
#ticket-messages::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 3px;
}

#inq-messages::-webkit-scrollbar-track,
#delivery-messages::-webkit-scrollbar-track,
#otc-messages::-webkit-scrollbar-track,
#chat-messages::-webkit-scrollbar-track,
#ticket-messages::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Chat: lock the PAGE so only the message list scrolls ──────────────────
   Second pass, 2026-08-10. The min-height:0 fix was necessary but not
   sufficient: the owner still reported "it jumps to the top when I enter text"
   and "I can scroll past the text box".

   Why the first fix could not have been enough. The shell is
       body > #app-container.screen > header.app-header + main#main-content
   and #app-container only sets MIN-height. The chat container inside
   #main-content is height:calc(var(--tg-viewport) - 140px), so the real page
   height is header + that, which exceeds the viewport. The PAGE therefore
   scrolls, no matter how well behaved the message list is. When the keyboard
   opens, the browser scrolls that page to reveal the focused input -- and that
   scroll is the "jump to the top".

   So while a chat is open the page is pinned to exactly the visible viewport
   and cannot scroll at all; scrolling is delegated to the message list. The
   body.chat-mode class is toggled in ui.js renderContent(), which every screen
   goes through.

   position:fixed on <body> is the iOS scroll lock: WKWebView will still scroll
   a document that merely has overflow:hidden. */

body.chat-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--tg-viewport, 100dvh);
    min-height: 0;
    max-height: var(--tg-viewport, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
}

body.chat-mode #app-container,
body.chat-mode #app-container.screen {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.chat-mode .app-header {
    flex-shrink: 0;
}

body.chat-mode #main-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The screens set their own height inline (calc(var(--tg-viewport) - 140px)),
   which assumed the page could scroll. Inside a locked page the container
   should simply fill what is left, so !important is needed to beat the inline
   height. This is the one place it is justified. */
body.chat-mode .inq-chat-container,
body.chat-mode .delivery-chat-container,
body.chat-mode .ticket-chat-container,
body.chat-mode .chat-container,
body.chat-mode #chat-container {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Some chats wrap the container in an extra padded div; make sure that link in
   the chain can shrink too, or the same overflow reappears one level up. */
body.chat-mode #main-content > div {
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* The shell reserves 120px at the bottom of #main-content for the floating
   button, plus generous side padding. In a chat that is dead space UNDER the
   composer -- visible in the owner's screenshots as a dark band below the input
   with the composer floating above it. A chat should run edge to edge with the
   composer on the true bottom edge. */
body.chat-mode #main-content,
body.chat-mode .main-content {
    padding: 0 !important;
    max-width: none;
    animation: none;
}

/* The floating action button overlaps the composer in a chat; it has its own
   home on every other screen. */
/* REMOVED 2026-08-10. This rule used to hide `.fab`, which is NOT a floating
   action button - it is Font Awesome 6's BRANDS class, live 31 times across the
   app (19 fa-bitcoin, 10 fa-telegram, 2 fa-ethereum). Hiding it inside a chat
   would make brand icons silently vanish with no error. Verified in a browser:
   the element computes font-family "Font Awesome 6 Brands" and went
   display:none while chat-mode was on. `.floating-cart` and `.floating-button`
   never matched anything. The genuine floating buttons are hidden by the
   .pfp-container / .cart-btn / .cart-icon rule above, which is the correct one. */

/* The black band under the chat when the keyboard is open.
   body carries the gradient and is position:fixed in chat-mode, so ANY gap
   between the bottom of the fixed body and the top of the keyboard exposes the
   <html> element -- which has no background at all, i.e. black. Painting html
   with the same gradient means a sizing discrepancy of a few px, or an in-flight
   keyboard animation, can never show as a black band again. */
html {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    background-attachment: fixed;
}

[data-theme="light"] html {
    background: linear-gradient(135deg, #e0e7ff 0%, #f1f5f9 50%, #e2e8f0 100%);
}

/* CORRECTED 2026-08-10 after measuring the live app in a real browser.
   This block previously set `bottom:0; height:auto` as "belt and braces". It was
   the opposite: with position:fixed, height:auto resolves against the INITIAL
   CONTAINING BLOCK (the layout viewport), which is precisely the height that does
   NOT shrink when the keyboard opens. It therefore overrode
   height:var(--tg-viewport) and reintroduced the whole bug -- measured at a
   simulated 420px viewport, the body stayed 812px and the composer sat 392px
   below the visible area.

   The body must follow --tg-viewport, which app.js drives from
   visualViewport.height. Verified after this change: 420 -> body 420, composer
   flush, zero gap; 330 -> body 330, composer flush, zero gap. */
body.chat-mode {
    bottom: auto;
    height: var(--tg-viewport, 100dvh);
    max-height: var(--tg-viewport, 100dvh);
    min-height: 0;
}

/* The profile FAB is position:fixed bottom-left, so in a chat it lands ON TOP of
   the composer and covers the placeholder - visible in the owner's screenshot.
   It has its own home on every other screen. (.fab/.floating-* in the earlier
   block never matched; the real class is .pfp-container.) */
body.chat-mode .pfp-container,
body.chat-mode .cart-btn,
body.chat-mode .cart-icon {
    display: none !important;
}

/* "too low now" - the composer was sitting on the very edge, under the home
   indicator. Give it real breathing room plus the safe area. */
body.chat-mode .inq-composer,
body.chat-mode .delivery-chat-container > :last-child,
body.chat-mode .ticket-chat-container > :last-child,
body.chat-mode .chat-container > :last-child,
body.chat-mode #chat-container > :last-child {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,.08));
    background: var(--bg-primary, #0f172a);
}

/* Smooth the keyboard-open transition.
   Owner: "the keyboard shows up first and then the whole window sinks into
   place... going down is smooth, going up is very clunky."

   Two causes. The JS cascade that stepped through five heights is removed
   (app.js). What remains is that iOS reports the new viewport height in coarse
   jumps while its keyboard animates, so the layout can still land in two or
   three visible steps. A short transition turns those steps into a glide.

   The curve approximates iOS's own keyboard easing, and the duration is kept
   under the keyboard's ~0.3s so the layout never lags BEHIND the keyboard -
   lagging is what made it feel clunky in the first place.

   Only height transitions. Transitioning anything else on a position:fixed body
   during a keyboard animation is a reliable way to cause jank. */
body.chat-mode {
    /* NO height transition. The layout is now updated every frame by the rAF
       tracker in app.js, so a transition would only add lag on top of values
       that are already per-frame accurate - it would re-introduce the very lag
       it was added to hide. will-change kept: height really does change often. */
    will-change: height;
}

/* No transition here either - see the body.chat-mode note above. The rAF tracker
   in app.js updates the height every frame, so any transition would lag behind
   values that are already frame-accurate. */

/* Someone who has asked the OS for less motion should get none of this. */
@media (prefers-reduced-motion: reduce) {
    body.chat-mode,
    body.chat-mode .inq-chat-container,
    body.chat-mode .delivery-chat-container,
    body.chat-mode .ticket-chat-container,
    body.chat-mode .chat-container,
    body.chat-mode #chat-container {
        transition: none;
    }
}

/* ── MONTHLY SUBSCRIPTIONS  [SUBS-UI-01] ───────────────────────────────────
   Owner, 13 Aug: "I don't like the way it looks either. ... Make it look nicer.
   Make the chat look nicer. Make the UI look nicer."

   Everything below is built from the tokens already defined at the top of this
   file (--primary, --success, --warning, --danger, --bg-secondary,
   --border-color, --text-*, --radius-*). No new palette, no new font, no new
   framework, and nothing outside the .sub-* / .orders-section- namespaces is
   touched - so this cannot change the look of any other screen. Both themes
   work because every colour is a token, and the tinted grounds are
   colour-mix()ed off those same tokens rather than hardcoded. */

/* The plan screen ------------------------------------------------------- */
.sub-page { padding-bottom: 24px; }

.sub-h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.sub-lede {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 18px;
}

.sub-hero {
    background: var(--gradient-primary);
    border-radius: var(--radius-xl, 18px);
    padding: 18px;
    margin-bottom: 14px;
    color: #fff;
    box-shadow: 0 10px 28px rgba(99, 102, 241, .28);
}

.sub-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sub-hero-icon {
    height: 42px;
    width: 42px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.sub-hero-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .82;
}

.sub-hero-title {
    font-size: 19px;
    font-weight: 800;
    margin: 2px 0 0;
    line-height: 1.25;
    word-break: break-word;
}

.sub-paidnow {
    margin-top: 12px;
    font-size: 13px;
    opacity: .92;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: 11.5px;
    font-weight: 700;
}

/* Status pills ---------------------------------------------------------- */
.sub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(127, 127, 127, .16);
    color: var(--text-secondary);
}

.sub-hero .sub-pill { background: rgba(255, 255, 255, .22); color: #fff; }

.sub-pill-on    { background: rgba(16, 185, 129, .16);  color: var(--success, #10b981); }
.sub-pill-trial { background: rgba(99, 102, 241, .18);  color: var(--primary-light, #818cf8); }
.sub-pill-warn  { background: rgba(245, 158, 11, .16);  color: var(--warning, #f59e0b); }
.sub-pill-off   { background: rgba(127, 127, 127, .16); color: var(--text-tertiary); }

.sub-hero .sub-pill-on,
.sub-hero .sub-pill-trial,
.sub-hero .sub-pill-warn,
.sub-hero .sub-pill-off { color: #fff; }

/* Cards ----------------------------------------------------------------- */
.sub-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 14px);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.sub-card-warn { border-color: rgba(245, 158, 11, .45); }

.sub-card-head {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* THE BILLING ROWS. This is the part that was wrong: a customer must be able to
   read what they paid, what is coming and when, in that order, without doing
   any arithmetic. */
.sub-billrow {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 0;
    border-top: 1px solid var(--border-color);
}

.sub-billrow:first-of-type { border-top: 0; padding-top: 0; }

.sub-billrow-icon {
    height: 32px;
    width: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: rgba(127, 127, 127, .14);
    color: var(--text-secondary);
}

.sub-tone-primary .sub-billrow-icon { background: rgba(99, 102, 241, .16); color: var(--primary-light, #818cf8); }
.sub-tone-warn    .sub-billrow-icon { background: rgba(245, 158, 11, .16); color: var(--warning, #f59e0b); }
.sub-tone-muted   .sub-billrow-icon { background: rgba(127, 127, 127, .14); color: var(--text-tertiary); }

.sub-billrow-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

/* The number and the date. Deliberately the largest text in the card. */
.sub-billrow-value {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    word-break: break-word;
}

.sub-billrow-note {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 3px;
}

.sub-billrow-foot {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed var(--border-color);
    font-size: 12.5px;
    color: var(--text-secondary);
}

.sub-kv {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    font-size: 13.5px;
}

.sub-kv:first-of-type { border-top: 0; padding-top: 0; }
.sub-kv-k { color: var(--text-secondary); flex-shrink: 0; }
.sub-kv-v { color: var(--text-primary); font-weight: 600; text-align: right; word-break: break-word; }

/* Big tappable actions -------------------------------------------------- */
.sub-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.sub-action:hover { border-color: var(--primary); transform: translateY(-1px); }
.sub-action:active { transform: translateY(0); }

.sub-action-primary { border-color: rgba(99, 102, 241, .38); }

.sub-action-icon {
    height: 36px;
    width: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 14px;
}

.sub-action-quiet .sub-action-icon {
    background: rgba(127, 127, 127, .16);
    color: var(--text-secondary);
}

.sub-action-text { flex: 1; min-width: 0; display: block; }

.sub-action-title {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.sub-action-sub {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.sub-action-arrow { color: var(--text-tertiary); font-size: 12px; flex-shrink: 0; }

.sub-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

/* The cancellation steps ------------------------------------------------ */
.sub-step {
    display: flex;
    gap: 13px;
    padding: 15px 16px;
    margin-bottom: 10px;
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

/* The step they are on is the only one that draws the eye. */
.sub-step-now { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.sub-step-done { border-color: rgba(16, 185, 129, .45); }
.sub-step-locked { opacity: .55; }

.sub-step-num {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 13.5px;
    background: rgba(127, 127, 127, .16);
    color: var(--text-secondary);
}

.sub-step-now  .sub-step-num { background: var(--gradient-primary); color: #fff; }
.sub-step-done .sub-step-num { background: var(--success, #10b981); color: #fff; }

.sub-step-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sub-step-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }

/* The chat header ------------------------------------------------------- */
.sub-chat-head {
    margin: -16px -16px 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sub-chat-avatar {
    height: 38px;
    width: 38px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.sub-chat-title { font-size: 17px; font-weight: 700; margin: 0; }
.sub-chat-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.sub-chat-plan {
    height: 34px;
    width: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.sub-chat-plan:hover { border-color: var(--primary); color: var(--primary); }

.sub-chat-context {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* The billing line is repeated here on purpose: the commonest question this
   thread will ever get is "what am I being charged?", and the answer should
   already be on screen before they type it. */
.sub-chat-billing {
    color: var(--text-primary);
    font-weight: 600;
    background: rgba(99, 102, 241, .12);
    border-radius: 8px;
    padding: 6px 9px;
    line-height: 1.4;
}

/* The subscription panel on an order card ------------------------------- */
.sub-order-panel {
    margin-bottom: 10px;
    padding: 13px 14px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid rgba(99, 102, 241, .38);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color .15s ease;
}

.sub-order-panel:hover { border-color: var(--primary); }
.sub-order-panel.is-off { border-color: var(--border-color); }

.sub-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

.sub-order-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.sub-order-badge i { color: var(--primary); }
.sub-order-panel.is-off .sub-order-badge i { color: var(--text-tertiary); }

/* The sentence the owner said was missing. Full width, high contrast. */
.sub-order-summary {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-primary);
}

.sub-order-cta {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* The two sections in Orders -------------------------------------------- */
.orders-section { margin-bottom: 26px; }

.orders-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--border-color);
}

.orders-section-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.orders-section-title i { color: var(--primary); }

.orders-section-count {
    min-width: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .16);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 800;
    text-align: center;
}

.orders-section-note {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

.orders-section-empty {
    padding: 18px 16px;
    border-radius: var(--radius-md, 12px);
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

/* ── Orders tabs + billing history  [SUBS-UI-02] ───────────────────────────
   The tab buttons themselves are .btn-tab, the app's existing pill control from
   the BUTTON MODIFIERS block above — no new component. Only the row that holds
   them, the count badge and the history list are new, and every colour is an
   existing token. */

.orders-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

/* Two tabs, half each, so "Purchases on the left and Monthly on the right" is
   literally what you get at any width. */
.orders-tabs .btn-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 10px;
}

.orders-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .2);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
}

.btn-tab.active .orders-tab-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* Billing history ------------------------------------------------------- */
.sub-hist-headline {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.sub-hist-list {
    border-top: 1px solid var(--border-color);
}

.sub-hist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13.5px;
}

.sub-hist-list .sub-hist-row:last-child { border-bottom: 0; }

.sub-hist-date { color: var(--text-secondary); }
.sub-hist-amt { color: var(--text-primary); font-weight: 700; white-space: nowrap; }
.sub-hist-free { color: var(--success, #10b981); font-weight: 700; }

/* The upcoming charge is not history, so it sits apart from the list. */
.sub-hist-next {
    margin-top: 10px;
    padding-top: 11px;
    border-top: 1px dashed var(--border-color);
    border-bottom: 0;
}

.sub-hist-next .sub-hist-date { color: var(--primary-light, #818cf8); font-weight: 600; }

/* ============================================================
   INQUIRY OPTION CHIPS (.mg-opt)
   ============================================================
   🔴 THESE WERE UNSTYLED ON THE FORM THAT ACTUALLY SHIPS.

   checkout.js renders these chips from TWO places — the structured
   question form (_optButtons) and the legacy extra-questions form —
   but the <style> block defining them was inlined in only ONE of
   them. On the other screen they fell back to raw browser buttons:
   white pills on a dark card, jammed edge to edge with no gap and
   uneven heights. His report, 19 Aug: "the buttons look bad."

   Defined once here so every renderer gets them. The inline block
   stays where it is and simply loses its effect — identical rules,
   no conflict.
   ============================================================ */
.mg-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.mg-opt {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--border-color, rgba(255,255,255,.22));
    background: var(--bg-secondary, rgba(255,255,255,.07));
    color: var(--text-primary, #fff);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.mg-opt:active { transform: scale(.97); }
.mg-opt-active {
    background: var(--primary-color, #6366f1);
    border-color: var(--primary-color, #6366f1);
    color: #fff;
}
[data-theme="light"] .mg-opt {
    background: rgba(255,255,255,.95);
    border-color: rgba(0,0,0,.22);
    color: #111;
}

/* 🔴 THE FLOATING CHAT BUBBLE SAT ON TOP OF THE FORM. In his screenshot
   "Additional Message (Optional)" is half hidden behind it. The last field
   of any inquiry form now clears the bubble. */
#mg-inquiry-form,
#mg-intake-form {
    padding-bottom: 96px;
}

/* ── weekly call questions ────────────────────────────────────────────────
   Members ask ahead of the call, hosts work from the list. Same markup, two
   faces: whether you get the host view is the server's answer, never a flag
   set on the page. */
.cq-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.cq-tabs button {
  flex: 1; padding: 8px 6px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; background: rgba(0,0,0,.25); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: #9aa3b2;
}
.cq-tabs button.on { background: #2CE0F0; color: #07121a; border-color: transparent; }
.cq { border-top: 1px solid rgba(255,255,255,.07); padding: 12px 0 10px; font-size: 13.5px; }
.cq:first-child { border-top: 0; }
.cq p { margin: 5px 0 8px; line-height: 1.5; color: #E8ECF2; }
.cq-answered { opacity: .55; }
.cq-hot {
  display: inline-block; margin-right: 7px; font-size: 9px; font-weight: 800;
  letter-spacing: .1em; color: #07121a; background: #F0A92C;
  border-radius: 999px; padding: 3px 8px; vertical-align: middle;
}
.cq-acts { display: flex; gap: 7px; flex-wrap: wrap; }
.cq-acts button {
  border: 1px solid rgba(44,224,240,.3); background: rgba(44,224,240,.08);
  color: #2CE0F0; border-radius: 8px; padding: 5px 11px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
}
.cq-done { font-size: 11.5px; color: #3FBF7F; font-weight: 700; }

/* the ask box under a host inbox needs a visible seam */
.cq-ask-own { margin-top: 14px; }
.cq-divider {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: #6B7482;
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 14px; margin-bottom: 10px;
}