/* Dark Theme (Default) */
:root {
    --bg-main: #0c0c0c;
    --bg-card: #181818;
    --bg-sidebar: #121212;
    --bg-hover: rgba(255, 255, 255, 0.05);

    --accent-green: #4ade80;
    --accent-green-rgb: 74, 222, 128;
    --accent-green-dim: rgba(74, 222, 128, 0.1);
    --accent-green-bright: #22c55e;

    --text-primary: #ffffff;
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;

    --border: #27272a;
    --border-light: #3f3f46;

    --font-heading: 'DM Serif Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 20px rgba(74, 222, 128, 0.3);

    /* Legacy Variable Support for existing components */
    --background: var(--bg-main);
    --foreground: var(--text-primary);
    --card: var(--bg-card);
    --card-foreground: var(--text-primary);
    --primary: var(--accent-green);
    --primary-foreground: #000;
    --muted: #27272a;
    --muted-foreground: var(--text-secondary);
    --destructive: #ef4444;
    --coral: #ef4444;
    --purple: #8b5cf6;
    --mint: var(--accent-green);
    --mustard: #f59e0b;
    --accent-blue: #3b82f6;
}

/* Light Theme */
[data-theme="light"] {
    --bg-main: #ffffff;
    --bg-card: #f8fafc;
    --bg-sidebar: #f1f5f9;
    --bg-hover: rgba(0, 0, 0, 0.05);

    --accent-green: #16a34a;
    --accent-green-rgb: 22, 163, 74;
    --accent-green-dim: rgba(22, 163, 74, 0.1);
    --accent-green-bright: #15803d;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;

    --border: #e2e8f0;
    --border-light: #cbd5e1;

    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(22, 163, 74, 0.2);

    /* Legacy Variable Support */
    --background: var(--bg-main);
    --foreground: var(--text-primary);
    --card: var(--bg-card);
    --card-foreground: var(--text-primary);
    --primary: var(--accent-green);
    --primary-foreground: #fff;
    --muted: #f1f5f9;
    --muted-foreground: var(--text-secondary);
    --destructive: #dc2626;
    --coral: #dc2626;
    --purple: #7c3aed;
    --mint: var(--accent-green);
    --mustard: #d97706;
}

/* ========================================
   LIGHT MODE OVERRIDES FOR HARDCODED COLORS
   ======================================== */
[data-theme="light"] {
    /* Override hardcoded white text colors */
    color-scheme: light;
}

/* Light mode text color overrides */
[data-theme="light"] .page-title-friends,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .page-title,
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color: #ffffff"],
[data-theme="light"] [style*="color: white"] {
    color: var(--text-primary) !important;
}

/* Light mode secondary text overrides */
[data-theme="light"] .friends-subtitle,
[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.7)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.7)"] {
    color: var(--text-secondary) !important;
}

/* Light mode background overrides */
[data-theme="light"] [style*="background: rgba(255, 255, 255"],
[data-theme="light"] [style*="background: rgba(255,255,255"] {
    background: var(--bg-hover) !important;
}

/* Light mode table header overrides */
[data-theme="light"] .leaderboard-table th {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Light mode rank text */
[data-theme="light"] .rank-text {
    color: var(--text-primary) !important;
}

/* Specific Rank Colors for Light Mode (Darker versions for readability) */
[data-theme="light"] .rank-text[data-rank="Platinum"] {
    color: #5E6E78 !important;
    /* Dark Platinum/Slate */
}

[data-theme="light"] .rank-text[data-rank="Silver"] {
    color: #64748b !important;
    /* Slate 500 */
}

[data-theme="light"] .rank-text[data-rank="Diamond"] {
    color: #0284c7 !important;
    /* Sky 600 */
}

[data-theme="light"] .rank-text[data-rank="Gold"] {
    color: #ca8a04 !important;
    /* Yellow 600 */
}

[data-theme="light"] .rank-text[data-rank="Bronze"] {
    color: #b45309 !important;
    /* Amber 700 */
}

[data-theme="light"] .rank-text[data-rank="Heroic"] {
    color: #dc2626 !important;
    /* Red 600 */
}

[data-theme="light"] .rank-text[data-rank="Master"] {
    color: #991b1b !important;
    /* Red 800 */
}

[data-theme="light"] .rank-text[data-rank="Grandmaster"] {
    color: #6b21a8 !important;
    /* Purple 800 */
}

/* Light mode gradient text - make it solid in light mode for readability */
[data-theme="light"] .rank-big-number {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] .task-count-badge {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
}

/* Light mode card backgrounds */
[data-theme="light"] .card:not(.timer-card),
[data-theme="light"] .leaderboard-card,
[data-theme="light"] .my-ranking-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* Ensure proper contrast for all inline styled elements */
[data-theme="light"] [style*="font-weight: 800"][style*="color: #fff"],
[data-theme="light"] [style*="font-weight: 700"][style*="color: #fff"],
[data-theme="light"] [style*="font-weight: 600"][style*="color: #fff"] {
    color: var(--text-primary) !important;
}

/* Light mode border overrides */
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border: 2px solid rgba(255,255,255"] {
    border-color: var(--border) !important;
}

/* Light mode timer/focus mode overrides */
[data-theme="light"] .timer-card {
    background-color: transparent !important;
    background-image: url('../img/images.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Use a dark overlay in light mode — same as dark mode — so image shows through */
[data-theme="light"] .timer-bg-overlay {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none;
}

[data-theme="light"] .timer-digits {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .mode-switcher {
    background: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .mode-btn {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .mode-btn:hover {
    color: var(--text-primary) !important;
}

[data-theme="light"] .mode-btn.active {
    background: var(--accent-green) !important;
    color: white !important;
}

/* Light mode music card */
[data-theme="light"] .music-card {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--border) !important;
    backdrop-filter: blur(10px);
}

/* Light mode brain dump card */
[data-theme="light"] .brain-dump-card [style*="background: rgba(255,255,255,0.03)"] {
    background: var(--bg-hover) !important;
}

[data-theme="light"] .brain-dump-card [style*="border-bottom: 1px solid rgba(255,255,255,0.05)"] {
    border-bottom: 1px solid var(--border) !important;
}

[data-theme="light"] #brain-dump-area {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}

[data-theme="light"] #brain-dump-area::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="light"] #new-goal-input {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}

[data-theme="light"] #new-goal-input::placeholder {
    color: var(--text-muted) !important;
}

/* Dark mode: ensure caret and placeholder are visible */
#brain-dump-area::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#new-goal-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#liveTopicInput::placeholder,
#liveSubjectInput::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* Light mode: Go Live inputs - text, caret, background and placeholder */
[data-theme="light"] #liveTopicInput,
[data-theme="light"] #liveSubjectInput {
    background: var(--bg-main) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}

[data-theme="light"] #liveTopicInput::placeholder,
[data-theme="light"] #liveSubjectInput::placeholder {
    color: var(--text-muted) !important;
}

/* ===== DASHBOARD LIGHT MODE OVERRIDES ===== */

/* Top stats cards */
[data-theme="light"] .bento-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .bento-card [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

/* Clock card - keep green but adjust for light mode */
[data-theme="light"] .card-clock-green {
    background: var(--accent-green) !important;
    box-shadow: 0 10px 30px rgba(22, 163, 74, 0.2) !important;
}

[data-theme="light"] .flip-digit {
    background: rgba(0, 0, 0, 0.15) !important;
    color: #064e3b !important;
}

[data-theme="light"] .card-clock-date {
    color: #064e3b !important;
}

[data-theme="light"] .clock-ampm-badge {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #064e3b !important;
}

[data-theme="light"] .clock-ampm-badge.active {
    background: #064e3b !important;
    color: white !important;
}

/* Focus/Productivity card */
[data-theme="light"] .card-focus-wide {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .focus-title,
[data-theme="light"] .card-focus-wide [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .card-focus-wide circle[stroke="#222"] {
    stroke: var(--border) !important;
}

/* Important card (red) */
[data-theme="light"] .card-important-red {
    background: var(--bg-card) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

[data-theme="light"] .important-title,
[data-theme="light"] .card-important-red [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

/* Active tasks card */
[data-theme="light"] .active-tasks-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .active-tasks-header [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .active-task-item {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .active-task-item h4 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .active-task-item p {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .btn-add-new-task {
    background: var(--accent-green) !important;
    color: white !important;
}

/* Temporal grid (calendar) */
[data-theme="light"] .temporal-grid-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .temporal-header {
    color: var(--text-primary) !important;
}

[data-theme="light"] .calendar-widget {
    background: var(--bg-main) !important;
}

[data-theme="light"] .cal-header {
    color: var(--text-primary) !important;
}

[data-theme="light"] .cal-day {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .cal-day.active {
    background: var(--accent-green) !important;
    color: white !important;
}

[data-theme="light"] .cal-day:hover {
    background: var(--bg-hover) !important;
}

[data-theme="light"] .events-widget {
    background: var(--bg-main) !important;
}

[data-theme="light"] .event-placeholder {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

[data-theme="light"] .btn-init-event {
    background: var(--accent-green) !important;
    color: white !important;
}

/* Weekly todos card */
[data-theme="light"] .card-todos-right {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .weekly-todos-header,
[data-theme="light"] .card-todos-right [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .todos-list-minimal li {
    color: var(--text-primary) !important;
}

/* Weekly stats cards */
[data-theme="light"] .weekly-stats-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .weekly-stats-card h3,
[data-theme="light"] .weekly-stats-card [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .weekly-stats-chart {
    background: var(--bg-main) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .mini-stat-box {
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .stat-val {
    color: var(--text-primary) !important;
}

/* Habit chart */
[data-theme="light"] #dashboard-habit-chart {
    border-bottom: 1px solid var(--border) !important;
}

/* Modals */
[data-theme="light"] .modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .modal-content h2,
[data-theme="light"] .modal-content [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .modal-content input,
[data-theme="light"] .modal-content textarea {
    background: var(--bg-main) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .modal-overlay {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Quick nav floating */
[data-theme="light"] .quick-nav-floating {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--border) !important;
    backdrop-filter: blur(20px);
}

[data-theme="light"] .btn-secondary {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}

/* Fix all hardcoded dark backgrounds in dashboard */
[data-theme="light"] [style*="background: #101010"],
[data-theme="light"] [style*="background: #111"],
[data-theme="light"] [style*="background: #1a1a1a"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.3)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.4)"],
[data-theme="light"] [style*="background: rgba(15,15,15"] {
    background: var(--bg-card) !important;
}

[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"] {
    background: var(--bg-hover) !important;
}

[data-theme="light"] [style*="border: 1px solid #333"],
[data-theme="light"] [style*="border: 1px solid #1a1a1a"] {
    border: 1px solid var(--border) !important;
}

/* SVG circles in charts */
[data-theme="light"] svg circle[stroke="#222"] {
    stroke: var(--border) !important;
}

/* ===== FRIENDS, GROUP & CHAT PAGES LIGHT MODE OVERRIDES ===== */

/* AI Coach / Chat page */
[data-theme="light"] .banner-overlay h1 {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Item Shop Overrides - REMOVED white background to allow themes to apply */
/* [data-theme="light"] .main-content {
    background: #ffffff !important;
} */

[data-theme="light"] .page-header .page-title {
    color: var(--text-primary) !important;
}

/* Profile / Settings Page Overrides - FORCE WHITE TEXT */
[data-theme="light"] #profile-name,
[data-theme="light"] #profile-major,
[data-theme="light"] .profile-hero h2,
[data-theme="light"] .profile-hero p,
[data-theme="light"] .profile-info-brief {
    color: #ffffff !important;
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

/* ===== PROFILE PAGE LIGHT MODE OVERRIDES ===== */
[data-theme="light"] .overview-section-title {
    color: var(--text-primary) !important;
}

[data-theme="light"] .about-me-text {
    color: var(--text-primary) !important;
}

[data-theme="light"] .empty-state-text {
    color: var(--text-secondary) !important;
    background: var(--bg-hover) !important;
    border-color: var(--border) !important;
}

[data-theme="light"] .badge-item [style*="color: var(--text-primary)"],
[data-theme="light"] .badge-list-container [style*="color: var(--text-primary)"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .tab-link {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .tab-link.active {
    color: var(--accent-green) !important;
}

/* Fix: caret visibility inside Edit Profile modal inputs in light mode */
[data-theme="light"] #editProfileModal input,
[data-theme="light"] #editProfileModal textarea {
    caret-color: var(--text-primary) !important;
}

/* Edit Profile Modal Light Mode Overrides */
[data-theme="light"] #editProfileModal>div {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] #editProfileModal h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] #editProfileModal label {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #editProfileModal input,
[data-theme="light"] #editProfileModal textarea {
    background: #f1f5f9 !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] #editProfileModal button[onclick="closeEditModal()"] {
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="light"] #editProfileModal button[onclick="closeEditModal()"]:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

[data-theme="light"] .glass-panel {
    background: white !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .shop-item-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .filter-btn {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .filter-btn.active {
    background: var(--accent-green) !important;
    color: white !important;
    border: 1px solid var(--accent-green) !important;
}

[data-theme="light"] .buy-btn {
    color: var(--text-primary) !important;
}

/* Fix generic white text in shop */
[data-theme="light"] .shop-item-card [style*="color: white"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .ai-msg.user .msg-bubble {
    background: #2563eb !important;
    /* Bright blue for visibility */
    color: white !important;
}

[data-theme="light"] .ai-msg.bot .msg-bubble {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bg-input,
[data-theme="light"] #chatInput {
    background: var(--bg-main) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .page-title-friends {
    color: var(--text-primary) !important;
}

[data-theme="light"] .search-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .search-input-friends {
    background: var(--bg-main) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .list-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="light"] .list-title {
    color: var(--text-primary) !important;
}

[data-theme="light"] .friend-item-row {
    background: var(--bg-hover) !important;
}

[data-theme="light"] .friend-name {
    color: var(--text-primary) !important;
}

[data-theme="light"] .friend-name a {
    color: var(--text-primary) !important;
}

/* Group/Squad page */
[data-theme="light"] .back-btn-squad {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .back-btn-squad:hover {
    background: var(--bg-hover) !important;
}

[data-theme="light"] .back-btn-squad i {
    color: var(--text-primary) !important;
}

[data-theme="light"] .card-title {
    color: var(--text-primary) !important;
}

[data-theme="light"] .member-item [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

[data-theme="light"] .messages-scroll-area {
    background: var(--bg-main) !important;
}

/* Fix all white text in friends/group pages */
[data-theme="light"] .friends-header [style*="color: #fff"],
[data-theme="light"] .list-header [style*="color: #fff"],
[data-theme="light"] .card-header [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

/* ================================================================
   MULTI-GROUP SYSTEM — FULL LIGHT MODE OVERRIDES
   Covers groups_dashboard.html + group_chat.html (per-group room)
   ================================================================ */

/* ── Groups Dashboard: cards ──────────────────────────────────── */
[data-theme="light"] .group-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .group-card:hover {
    border-color: rgba(99,102,241,0.4) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .group-card::before {
    background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(14,165,233,0.04)) !important;
}
[data-theme="light"] .group-card-avatar {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(14,165,233,0.12)) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .group-card-name {
    color: var(--text-primary) !important;
}
[data-theme="light"] .group-card-desc {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .group-card-meta {
    color: var(--text-muted) !important;
}
[data-theme="light"] .group-card-arrow {
    color: var(--text-muted) !important;
}
[data-theme="light"] .group-card:hover .group-card-arrow {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .badge-admin {
    background: rgba(217,119,6,0.12) !important;
    border-color: rgba(217,119,6,0.25) !important;
}
[data-theme="light"] .badge-unread {
    background: #6366f1 !important;
    color: white !important;
}

/* ── Groups Dashboard: capacity bar ──────────────────────────── */
[data-theme="light"] .capacity-bar-wrap {
    background: var(--bg-hover) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .capacity-bar-label {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .capacity-bar-track {
    background: rgba(0,0,0,0.08) !important;
}

/* ── Groups Dashboard: empty state ───────────────────────────── */
[data-theme="light"] .groups-empty-state {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .groups-empty-state h2 {
    color: var(--text-primary) !important;
}

/* ── Groups Dashboard: action panel ─────────────────────────── */
[data-theme="light"] .action-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .action-card-title {
    color: var(--text-primary) !important;
}
[data-theme="light"] .action-card-sub {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .input-field {
    background: var(--bg-main) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .input-field::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="light"] .input-field:focus {
    border-color: #6366f1 !important;
}
[data-theme="light"] .limit-reached-msg {
    background: rgba(239,68,68,0.06) !important;
    border-color: rgba(239,68,68,0.2) !important;
    color: #dc2626 !important;
}
[data-theme="light"] .tips-card {
    background: rgba(251,191,36,0.06) !important;
    border-color: rgba(251,191,36,0.2) !important;
}
[data-theme="light"] .tips-card [style*="color: #fff"] {
    color: var(--text-primary) !important;
}
[data-theme="light"] .tips-list li {
    color: var(--text-secondary) !important;
}

/* ── Group Chat room: header area ─────────────────────────────── */
[data-theme="light"] .pinned-banner {
    background: rgba(251,191,36,0.08) !important;
    border-color: rgba(251,191,36,0.25) !important;
}
[data-theme="light"] .pinned-banner span {
    color: var(--text-secondary) !important;
}

/* ── Group Chat room: left panel (members) ────────────────────── */
[data-theme="light"] .card:not(.timer-card) {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] #memberSearch {
    background: var(--bg-main) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] #memberSearch::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="light"] .member-item [style*="color: #fff"],
[data-theme="light"] .member-item [style*="color: white"] {
    color: var(--text-primary) !important;
}
[data-theme="light"] .member-item [style*="color: var(--text-secondary)"] {
    color: var(--text-secondary) !important;
}
/* Invite code box */
[data-theme="light"] [style*="background:rgba(0,0,0,0.2)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.2)"] {
    background: var(--bg-hover) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] [style*="color: var(--text-secondary)"] {
    color: var(--text-secondary) !important;
}

/* ── Group Chat room: admin panel ────────────────────────────── */
[data-theme="light"] .admin-panel {
    background: rgba(251,191,36,0.05) !important;
    border-top-color: rgba(217,119,6,0.2) !important;
}
[data-theme="light"] .admin-panel-title {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .admin-input {
    background: var(--bg-main) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .admin-input::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="light"] .admin-btn {
    background: rgba(99,102,241,0.1) !important;
    border-color: rgba(99,102,241,0.2) !important;
    color: #6366f1 !important;
}
[data-theme="light"] .regen-btn {
    background: rgba(14,165,233,0.1) !important;
    border-color: rgba(14,165,233,0.2) !important;
    color: #0284c7 !important;
}
[data-theme="light"] .delete-btn {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(239,68,68,0.2) !important;
    color: #dc2626 !important;
}

/* ── Group Chat room: messages area ─────────────────────────── */
[data-theme="light"] .messages-scroll-area {
    background: var(--bg-main) !important;
}
/* Other-user message bubbles (dark on dark in dark mode, needs to flip) */
[data-theme="light"] [style*="background:rgba(255,255,255,0.1)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.1)"] {
    background: #e9eef5 !important;
}
/* Text inside other-user bubbles */
[data-theme="light"] [style*="background: rgba(255,255,255,0.1)"] [style*="color: white"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.1)"] {
    color: var(--text-primary) !important;
}
/* AI bubble */
[data-theme="light"] [style*="background:rgba(59,130,246,0.2)"],
[data-theme="light"] [style*="background: rgba(59,130,246,0.2)"] {
    background: rgba(59,130,246,0.12) !important;
    border-color: rgba(59,130,246,0.25) !important;
}
/* Sender name / timestamp labels */
[data-theme="light"] .messages-scroll-area [style*="color: var(--text-secondary)"],
[data-theme="light"] .messages-scroll-area [style*="font-size: 0.74rem"] {
    color: var(--text-muted) !important;
}
/* Message input area */
[data-theme="light"] #groupChatInput {
    background: var(--bg-main) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] #groupChatInput::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="light"] #filePreviewContainer {
    background: var(--bg-hover) !important;
    border-color: var(--border) !important;
}
[data-theme="light"] #previewFileName {
    color: var(--text-primary) !important;
}

/* ── Group Chat room: tab buttons ────────────────────────────── */
[data-theme="light"] .btn-tab[style*="background: transparent"],
[data-theme="light"] .btn-tab[style*="background:transparent"] {
    color: var(--text-secondary) !important;
}
/* chat header row background */
[data-theme="light"] [style*="background:rgba(255,255,255,0.02)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.02)"] {
    background: var(--bg-hover) !important;
}

/* ── Chat header labels (online count etc.) ────────────────── */
[data-theme="light"] .chat-layout-main [style*="color: #fff"],
[data-theme="light"] .chat-layout-main [style*="color: white"] {
    color: var(--text-primary) !important;
}
[data-theme="light"] .chat-layout-main [style*="color:rgba(255,255,255,0.2)"],
[data-theme="light"] .chat-layout-main [style*="color: rgba(255,255,255,0.2)"] {
    color: var(--text-muted) !important;
}

/* ── Group name in page header ──────────────────────────────── */
[data-theme="light"] .friends-header [style*="color:#fff"],
[data-theme="light"] .friends-header [style*="color: #fff"] {
    color: var(--text-primary) !important;
}
[data-theme="light"] .friends-header .friends-subtitle {
    color: var(--text-secondary) !important;
}

/* ── Dashed invite-code border ──────────────────────────────── */
[data-theme="light"] [style*="border: 1px dashed"] {
    border-color: var(--border) !important;
    background: var(--bg-hover) !important;
}
[data-theme="light"] [style*="rgba(0,0,0,0.2)"] {
    background: var(--bg-hover) !important;
}

/* ── Mode switcher in header (Friends / Groups tabs) ─────────── */
[data-theme="light"] .mode-switcher-friends {
    background: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .mode-btn-friends {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .mode-btn-friends.active {
    background: var(--accent-green) !important;
    color: white !important;
}

/* Cyberpunk Theme */
body.theme_cyberpunk {
    --bg-main: #0a0a0f;
    --bg-card: #13131a;
    --bg-sidebar: #0d0d14;
    --bg-hover: rgba(217, 70, 239, 0.1);

    --accent-green: #d946ef;
    --accent-green-dim: rgba(217, 70, 239, 0.15);
    --accent-green-bright: #c026d3;

    --text-primary: #f0f0ff;
    --text-secondary: #b794f6;
    --text-muted: #6b21a8;

    --border: #2d1b4e;
    --border-light: #4c1d95;

    --shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.3), 0 2px 4px -1px rgba(217, 70, 239, 0.2);
    --shadow-elevated: 0 10px 30px rgba(139, 92, 246, 0.5);
    --shadow-glow: 0 0 30px rgba(217, 70, 239, 0.6);

    /* Legacy Variable Support */
    --background: var(--bg-main);
    --foreground: var(--text-primary);
    --card: var(--bg-card);
    --card-foreground: var(--text-primary);
    --primary: var(--accent-green);
    --primary-foreground: #000;
    --muted: #1e1b4b;
    --muted-foreground: var(--text-secondary);
    --destructive: #f43f5e;
    --coral: #f43f5e;
    --purple: #d946ef;
    --mint: #a78bfa;
    --mustard: #fbbf24;
}

/* Cyberpunk Glitch Effect on Hover */
body.theme_cyberpunk .card:hover {
    animation: glitch 0.3s ease-in-out;
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.4), 0 0 40px rgba(139, 92, 246, 0.2);
}

/* Disable glitch on shop cards to prevent vibration */
body.theme_cyberpunk .shop-item-card:hover {
    animation: none;
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3), 0 8px 30px rgba(0, 0, 0, 0.3);
}

body.theme_cyberpunk .nav-item:hover {
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
    text-shadow: 0 0 8px rgba(217, 70, 239, 0.5);
}

body.theme_cyberpunk .page-title {
    /* Fallback first: keep titles readable even if gradient text isn't supported */
    color: var(--text-primary);
    text-shadow: 0 0 30px rgba(217, 70, 239, 0.5);
}

@supports (-webkit-background-clip: text) {
    body.theme_cyberpunk .page-title {
        background: linear-gradient(135deg, #d946ef, #a78bfa, #ec4899);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* Neon glow on buttons */
body.theme_cyberpunk button:not(:disabled):not(#theme-toggle) {
    box-shadow: 0 0 10px rgba(217, 70, 239, 0.3);
    border: 1px solid rgba(217, 70, 239, 0.5);
}

body.theme_cyberpunk button:not(:disabled):not(#theme-toggle):hover {
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.6), 0 0 40px rgba(139, 92, 246, 0.3);
}

/* Keep theme toggle button functional */
body.theme_cyberpunk #theme-toggle {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}

body.theme_cyberpunk #theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* Glitch animation */
@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Scanline effect */
body.theme_cyberpunk::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
}

/* ========================================
   THEME OVERRIDES FOR LIGHT MODE
   ======================================== */
/* When a theme is active, it should override light mode settings */
/* Note: data-theme is on <html>, theme classes are on <body> */

/* Cyberpunk theme overrides for light mode */
html[data-theme="light"] body.theme_cyberpunk {
    --bg-main: #0a0a0f !important;
    --bg-card: #13131a !important;
    --bg-sidebar: #0d0d14 !important;
    --text-primary: #f0f0ff !important;
    --text-secondary: #b794f6 !important;
}

/* ========================================
   GLOBAL TRANSITIONS & RANK FIXES
   ======================================== */
body,
.card,
.input,
.btn,
.sidebar,
.nav-item,
h1,
h2,
h3,
h4,
p,
span,
div {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Fix Platinum/Rank visibility in Light Mode */
/* Forces the rank badge to use a brightness filter to make light colors (Silver/Platinum) readable on white */
[data-theme="light"] .rank-info-badge {
    filter: brightness(0.6) saturate(1.2);
    text-shadow: none !important;
}

/* Aurora theme overrides for light mode */

/* ========================================
   FRIENDS & GROUP SHARED STYLES
   ======================================== */
.friends-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.friends-header-info {
    flex: 1;
    min-width: 250px;
}

.page-title-friends {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    color: #fff;
}

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

.mode-switcher-friends {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    border-radius: 12px;
    border: 1px solid var(--border);
    gap: 5px;
}

.mode-btn-friends {
    padding: 8px 24px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.mode-btn-friends.active {
    background: var(--accent-green);
    color: #000;
}

.mode-btn-friends:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.mode-btn-friends.active:hover {
    background: var(--accent-green);
    color: #000;
}

html[data-theme="light"] body.theme_aurora {
    --bg-main: #0f0a1f !important;
    --bg-card: #1a1333 !important;
    --bg-sidebar: #140e28 !important;
    --text-primary: #f3e8ff !important;
    --text-secondary: #c4b5fd !important;
}

/* Synthwave theme overrides for light mode */
html[data-theme="light"] body.theme_synthwave {
    --bg-main: #0d0221 !important;
    --bg-card: #1a0b2e !important;
    --bg-sidebar: #110726 !important;
    --text-primary: #ffd9e8 !important;
    --text-secondary: #f72585 !important;
}

/* Sakura theme overrides for light mode */
html[data-theme="light"] body.theme_sakura {
    --bg-main: #1a0f1f !important;
    --bg-card: #2a1a2e !important;
    --bg-sidebar: #1f1426 !important;
    --text-primary: #ffd9e8 !important;
    --text-secondary: #ffb3d9 !important;
}

/* Ocean theme overrides for light mode */
html[data-theme="light"] body.theme_ocean {
    --bg-main: #0a1929 !important;
    --bg-card: #132f4c !important;
    --bg-sidebar: #0e1f30 !important;
    --text-primary: #e3f2fd !important;
    --text-secondary: #90caf9 !important;
}

/* ========================================
   TIMER/FOCUS MODE OVERRIDES FOR THEMES IN LIGHT MODE
   ======================================== */
/* When a theme is active in light mode, timer should use theme styling */
/* Note: data-theme is on <html>, theme classes are on <body> */
html[data-theme="light"] body.theme_cyberpunk .timer-bg-overlay,
html[data-theme="light"] body.theme_aurora .timer-bg-overlay,
html[data-theme="light"] body.theme_synthwave .timer-bg-overlay,
html[data-theme="light"] body.theme_sakura .timer-bg-overlay,
html[data-theme="light"] body.theme_ocean .timer-bg-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

html[data-theme="light"] body.theme_cyberpunk .timer-digits,
html[data-theme="light"] body.theme_aurora .timer-digits,
html[data-theme="light"] body.theme_synthwave .timer-digits,
html[data-theme="light"] body.theme_sakura .timer-digits,
html[data-theme="light"] body.theme_ocean .timer-digits {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   SHOP PAGE & CONTENT THEME OVERRIDES FOR LIGHT MODE
   ======================================== */
/* When ANY theme is active in light mode, override white backgrounds */
html[data-theme="light"] body.theme_cyberpunk .glass-panel,
html[data-theme="light"] body.theme_aurora .glass-panel,
html[data-theme="light"] body.theme_synthwave .glass-panel,
html[data-theme="light"] body.theme_sakura .glass-panel,
html[data-theme="light"] body.theme_ocean .glass-panel,
html[data-theme="light"] body.theme_matrix .glass-panel,
html[data-theme="light"] body.theme_sunset .glass-panel,
html[data-theme="light"] body.theme_midnight .glass-panel,
html[data-theme="light"] body.theme_forest .glass-panel,
html[data-theme="light"] body.theme_lava .glass-panel,
html[data-theme="light"] body.theme_retro .glass-panel,
html[data-theme="light"] body.theme_blood_moon .glass-panel,
html[data-theme="light"] body.theme_toxic .glass-panel,
html[data-theme="light"] body.theme_neon_city .glass-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

/* Ensure main content area uses theme background */
html[data-theme="light"] body[class*="theme_"] .main-content {
    background: var(--bg-main) !important;
}

/* ========================================
   AURORA THEME (PREMIUM)
   ======================================== */
body.theme_aurora {
    --bg-main: #0f0a1f;
    --bg-card: #1a1333;
    --bg-sidebar: #140e28;
    --bg-hover: rgba(167, 139, 250, 0.1);

    --accent-green: #a78bfa;
    --accent-green-dim: rgba(167, 139, 250, 0.15);
    --accent-green-bright: #8b5cf6;

    --text-primary: #f3e8ff;
    --text-secondary: #c4b5fd;
    --text-muted: #6d28d9;

    --border: #4c1d95;
    --border-light: #5b21b6;

    --shadow: 0 4px 6px -1px rgba(167, 139, 250, 0.3);
    --shadow-elevated: 0 10px 30px rgba(167, 139, 250, 0.5);
    --shadow-glow: 0 0 40px rgba(167, 139, 250, 0.6);
}

body.theme_aurora::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
            rgba(167, 139, 250, 0.1) 0%,
            rgba(236, 72, 153, 0.1) 25%,
            rgba(34, 197, 94, 0.1) 50%,
            rgba(59, 130, 246, 0.1) 75%,
            rgba(167, 139, 250, 0.1) 100%);
    background-size: 400% 400%;
    animation: auroraFlow 15s ease infinite;
    pointer-events: none;
    z-index: 9998;
}

@keyframes auroraFlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* ========================================
   SYNTHWAVE THEME (PREMIUM)
   ======================================== */
body.theme_synthwave {
    --bg-main: #0a0a1f;
    --bg-card: #1a0f2e;
    --bg-sidebar: #120a23;
    --bg-hover: rgba(244, 114, 182, 0.1);

    --accent-green: #f472b6;
    --accent-green-dim: rgba(244, 114, 182, 0.15);
    --accent-green-bright: #ec4899;

    --text-primary: #fce7f3;
    --text-secondary: #f9a8d4;
    --text-muted: #831843;

    --border: #500724;
    --border-light: #831843;

    --shadow: 0 4px 6px -1px rgba(244, 114, 182, 0.3);
    --shadow-elevated: 0 10px 30px rgba(244, 114, 182, 0.5);
    --shadow-glow: 0 0 40px rgba(244, 114, 182, 0.6);
}

body.theme_synthwave::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 40px,
            rgba(244, 114, 182, 0.1) 40px,
            rgba(244, 114, 182, 0.1) 42px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 40px,
            rgba(59, 130, 246, 0.1) 40px,
            rgba(59, 130, 246, 0.1) 42px);
    transform: perspective(500px) rotateX(60deg);
    pointer-events: none;
    z-index: 9998;
    opacity: 0.3;
}

/* ========================================

/* ========================================
   NEON CITY THEME (NEW PREMIUM)
   ======================================== */
body.theme_neon_city {
    --bg-main: #020617;
    --bg-card: #0c1629;
    --bg-sidebar: #070e1f;
    --bg-hover: rgba(6, 182, 212, 0.1);

    --accent-green: #06b6d4;
    --accent-green-dim: rgba(6, 182, 212, 0.15);
    --accent-green-bright: #0891b2;

    --text-primary: #e0f2fe;
    --text-secondary: #22d3ee;
    --text-muted: #164e63;

    --border: #0c4a6e;
    --border-light: #075985;

    --shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.3);
    --shadow-elevated: 0 10px 30px rgba(6, 182, 212, 0.5);
    --shadow-glow: 0 0 40px rgba(6, 182, 212, 0.6);
}

body.theme_neon_city::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background:
        linear-gradient(0deg, rgba(6, 182, 212, 0.1) 0%, transparent 100%),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 100px,
            rgba(6, 182, 212, 0.05) 100px,
            rgba(6, 182, 212, 0.05) 102px);
    pointer-events: none;
    z-index: 9998;
}

/* ========================================
   SAKURA THEME (NEW PREMIUM)
   ======================================== */
body.theme_sakura {
    --bg-main: #1f0a14;
    --bg-card: #2d1420;
    --bg-sidebar: #240f1a;
    --bg-hover: rgba(249, 168, 212, 0.1);

    --accent-green: #f9a8d4;
    --accent-green-dim: rgba(249, 168, 212, 0.15);
    --accent-green-bright: #f472b6;

    --text-primary: #fce7f3;
    --text-secondary: #fbcfe8;
    --text-muted: #831843;

    --border: #500724;
    --border-light: #831843;

    --shadow: 0 4px 6px -1px rgba(249, 168, 212, 0.3);
    --shadow-elevated: 0 10px 30px rgba(249, 168, 212, 0.5);
    --shadow-glow: 0 0 40px rgba(249, 168, 212, 0.6);
}

body.theme_sakura::before {
    content: '';
    position: fixed;
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    background-image:
        radial-gradient(circle, #fbcfe8 2px, transparent 3px),
        radial-gradient(circle, #f472b6 1.5px, transparent 2.5px),
        radial-gradient(circle, #f9a8d4 2px, transparent 3px);
    background-size: 200px 200px, 150px 150px, 250px 250px;
    background-position: 0 0, 50px 25px, 100px 50px;
    pointer-events: none;
    z-index: 9998;
    animation: rainFlowers 20s linear infinite;
    opacity: 0.6;
}

@keyframes rainFlowers {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(25%);
    }
}

/* ========================================
   NEW EXCLUSIVE FRAMES
   ======================================== */


/* Ensure new themes work with theme toggle */
body.theme_neon_city #theme-toggle,
body.theme_sakura #theme-toggle {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
}

body.theme_neon_city #theme-toggle:hover,
body.theme_sakura #theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

/* Ensure new themes show moon icon */
body.theme_neon_city .theme-icon-dark,
body.theme_sakura .theme-icon-dark {
    display: inline-block !important;
}

body.theme_neon_city .theme-icon-light,
body.theme_sakura .theme-icon-light {
    display: none !important;
}

/* ========================================
   EXCLUSIVE FRAMES - PREMIUM
   ======================================== */

/* Ensure all new themes don't break theme toggle */
body.theme_aurora #theme-toggle,
body.theme_synthwave #theme-toggle {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
}

body.theme_aurora #theme-toggle:hover,
body.theme_synthwave #theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

/* Ensure new themes show moon icon */
body.theme_aurora .theme-icon-dark,
body.theme_synthwave .theme-icon-dark {
    display: inline-block !important;
}

body.theme_aurora .theme-icon-light,
body.theme_synthwave .theme-icon-light {
    display: none !important;
}

/* ========================================
   AVATAR FRAMES - NEW ADDITIONS
   ======================================== */

/* Diamond Frame */
body.frame_diamond img[src*="avatar"],
body.frame_diamond img[src*="ui-avatars"],
body.frame_diamond img[style*="border-radius: 50%"] {
    border: 3px solid #a78bfa !important;
    box-shadow:
        0 0 20px rgba(167, 139, 250, 0.6),
        0 0 40px rgba(167, 139, 250, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
    animation: diamondShimmer 3s ease-in-out infinite !important;
}

@keyframes diamondShimmer {

    0%,
    100% {
        filter: brightness(1) contrast(1);
        box-shadow:
            0 0 20px rgba(167, 139, 250, 0.6),
            0 0 40px rgba(167, 139, 250, 0.3),
            inset 0 0 20px rgba(255, 255, 255, 0.2);
    }

    50% {
        filter: brightness(1.3) contrast(1.2);
        box-shadow:
            0 0 30px rgba(167, 139, 250, 0.9),
            0 0 60px rgba(167, 139, 250, 0.5),
            inset 0 0 30px rgba(255, 255, 255, 0.4);
    }
}

/* Fire Frame */
body.frame_fire img[src*="avatar"],
body.frame_fire img[src*="ui-avatars"],
body.frame_fire img[style*="border-radius: 50%"] {
    border: 3px solid #f97316 !important;
    box-shadow:
        0 0 20px rgba(249, 115, 22, 0.8),
        0 0 40px rgba(234, 88, 12, 0.6),
        0 0 60px rgba(194, 65, 12, 0.4) !important;
    animation: fireFlicker 0.3s ease-in-out infinite !important;
}

@keyframes fireFlicker {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(249, 115, 22, 0.8),
            0 0 40px rgba(234, 88, 12, 0.6),
            0 0 60px rgba(194, 65, 12, 0.4);
    }

    50% {
        box-shadow:
            0 0 30px rgba(249, 115, 22, 1),
            0 0 50px rgba(234, 88, 12, 0.8),
            0 0 70px rgba(194, 65, 12, 0.6);
    }
}

/* Ice Frame */
body.frame_ice img[src*="avatar"],
body.frame_ice img[src*="ui-avatars"],
body.frame_ice img[style*="border-radius: 50%"] {
    border: 3px solid #38bdf8 !important;
    box-shadow:
        0 0 20px rgba(56, 189, 248, 0.6),
        0 0 40px rgba(14, 165, 233, 0.4),
        inset 0 0 15px rgba(186, 230, 253, 0.3) !important;
    animation: iceCrystal 2s ease-in-out infinite !important;
}

@keyframes iceCrystal {

    0%,
    100% {
        filter: brightness(1);
        box-shadow:
            0 0 20px rgba(56, 189, 248, 0.6),
            0 0 40px rgba(14, 165, 233, 0.4),
            inset 0 0 15px rgba(186, 230, 253, 0.3);
    }

    50% {
        filter: brightness(1.2);
        box-shadow:
            0 0 25px rgba(56, 189, 248, 0.8),
            0 0 50px rgba(14, 165, 233, 0.6),
            inset 0 0 20px rgba(186, 230, 253, 0.5);
    }
}


/* Avatar Frame Styles */
/* Golden Frame */
body .sidebar img[src*="avatar"],
body .sidebar img[src*="ui-avatars"],
body img[style*="border-radius: 50%"] {
    position: relative;
}

/* Apply golden frame when active */
.frame-gold-active img[src*="avatar"],
.frame-gold-active img[src*="ui-avatars"],
.frame-gold-active img[style*="border-radius: 50%"] {
    border: 3px solid #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.2);
    animation: goldenPulse 2s ease-in-out infinite;
}

@keyframes goldenPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4), inset 0 0 15px rgba(255, 215, 0, 0.3);
    }
}

/* Glitched Frame */
.frame-glitch-active img[src*="avatar"],
.frame-glitch-active img[src*="ui-avatars"],
.frame-glitch-active img[style*="border-radius: 50%"] {
    border: 3px solid #ef4444;
    box-shadow:
        -2px 0 0 #00ffff,
        2px 0 0 #ff00ff,
        0 0 20px rgba(239, 68, 68, 0.6);
    animation: glitchFrame 0.5s ease-in-out infinite;
}

@keyframes glitchFrame {

    0%,
    100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }

    10% {
        transform: translate(-2px, 1px);
        filter: hue-rotate(90deg);
    }

    20% {
        transform: translate(2px, -1px);
        filter: hue-rotate(180deg);
    }

    30% {
        transform: translate(-1px, 2px);
        filter: hue-rotate(270deg);
    }

    40% {
        transform: translate(1px, -2px);
        filter: hue-rotate(360deg);
    }

    50% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
}

/* Add frame classes to body based on active frame */
body.frame_gold .sidebar img[src*="avatar"],
body.frame_gold .sidebar img[src*="ui-avatars"],
body.frame_gold img[style*="border-radius: 50%"] {
    border: 3px solid #FFD700 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.2) !important;
    animation: goldenPulse 2s ease-in-out infinite !important;
}

body.frame_glitch .sidebar img[src*="avatar"],
body.frame_glitch .sidebar img[src*="ui-avatars"],
body.frame_glitch img[style*="border-radius: 50%"] {
    border: 3px solid #ef4444 !important;
    box-shadow:
        -2px 0 0 #00ffff,
        2px 0 0 #ff00ff,
        0 0 20px rgba(239, 68, 68, 0.6) !important;
    animation: glitchFrame 0.5s ease-in-out infinite !important;
}

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

/* Smooth theme transitions - Applied to all elements */
*,
*::before,
*::after {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Preserve specific animations and transitions */
.theme-toggle-btn i,
.nav-item,
button,
a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-body);
    height: 100vh;
    overflow: hidden;
    line-height: 1.5;
}

/* Layout */
.app-container,
.app-layout {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 260px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 20px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    min-height: 40px;
    /* Ensure stable height */
}

.sidebar-header .logo {
    margin-bottom: 0;
}

.desktop-sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.desktop-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

@media (min-width: 769px) {
    .desktop-sidebar-toggle {
        display: flex;
    }
}

/* Collapsed Sidebar Styles */
body.sidebar-collapsed .sidebar-header {
    justify-content: center;
    margin-bottom: 20px;
}

body.sidebar-collapsed .logo {
    display: none;
}

body.sidebar-collapsed .desktop-sidebar-toggle {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
}

body.sidebar-collapsed .desktop-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    background-color: var(--bg-main);
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 400;
}

.page-header {
    margin-bottom: 32px;
}

.page-title {
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* Sidebar Navigation */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--accent-green);
}

.nav-menu,
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-green);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item:hover::before {
    transform: scaleY(1);
}

.nav-item.active {
    background-color: var(--accent-green-dim);
    color: var(--accent-green);
    box-shadow: inset 0 0 20px rgba(74, 222, 128, 0.1);
}

.nav-item.active::before {
    transform: scaleY(1);
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.layout-home {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    margin-top: 32px;
}

.bento-card {
    background: var(--bg-card);
    border-radius: 24px;
    border: 1px solid var(--border);
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.bento-card.glass {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
}

.bento-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: var(--accent-green);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(74, 222, 128, 0.1);
}

/* Bento Helpers */
.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

.span-4 {
    grid-column: span 4;
}

.row-2 {
    grid-row: span 2;
}

@media (max-width: 1200px) {
    .layout-home {
        grid-template-columns: repeat(2, 1fr);
    }

    .span-2,
    .span-3,
    .span-4 {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .layout-home {
        grid-template-columns: 1fr;
    }

    .span-2,
    .span-3,
    .span-4 {
        grid-column: span 1;
    }
}

/* Stats Styling */
.bento-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bento-stat .icon {
    font-size: 1.5rem;
    margin-bottom: 16px;
    opacity: 0.8;
}

.bento-stat .value {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.bento-stat .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-green);
    box-shadow: 0 10px 20px rgba(74, 222, 128, 0.1);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(var(--accent-green-rgb), 0.1);
    color: var(--accent-green);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Cards & Widgets */
.card {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated), 0 0 0 1px var(--border-light);
    border-color: var(--border-light);
}

/* Go Live panel: must NOT have overflow:hidden (blocks input events) or hover transform */
#goLivePanel,
#goLivePanel:hover {
    overflow: visible !important;
    transform: none !important;
}

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

.card-title {
    font-size: 1.1rem;
    color: var(--accent-green);
    font-family: var(--font-heading);
}

/* Specific Widgets */
.clock-widget {
    background: var(--accent-green);
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
    position: relative;
}

.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.schedule-day {
    background-color: #1a221f;
    border: 1px solid #23332a;
    border-radius: var(--radius-md);
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.schedule-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.15);
    border-color: var(--accent-green);
}

[data-theme="light"] .schedule-day {
    background-color: var(--bg-card);
    border-color: var(--border);
}

[data-theme="light"] .schedule-day:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.day-header {
    color: var(--accent-green);
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-list {
    list-style: none;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.task-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid var(--text-muted);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.task-checkbox.checked {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: #000;
}

/* Banner */
.pixel-banner {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
    margin-bottom: 32px;
    position: relative;
    border: 1px solid var(--border);
}

.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

/* Utilities */
.text-green {
    color: var(--accent-green);
}

.mt-4 {
    margin-top: 1rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar Responsive Toggle Logic */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--accent-green);
}

@media (max-width: 768px) {
    .mobile-header {
        display: flex;
    }

    .app-container {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        left: -260px;
        top: 60px;
        bottom: 0;
        z-index: 999;
        transition: left 0.3s ease;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .main-content {
        margin-top: 60px;
        padding: 20px;
    }

    body.sidebar-open .sidebar {
        left: 0;
    }
}

/* Desktop Sidebar Collapse */
body.sidebar-collapsed .sidebar {
    width: 80px;
    padding: 24px 16px;
}

body.sidebar-collapsed .sidebar .logo span,
body.sidebar-collapsed .sidebar .nav-item span {
    display: none;
}

body.sidebar-collapsed .sidebar .nav-item {
    justify-content: center;
    padding: 12px;
}

body.sidebar-collapsed .sidebar .nav-item i {
    margin-right: 0;
    font-size: 1.2rem;
}

/* Gamification UI Components */
.xp-progress-container {
    width: 100%;
    margin-top: 4px;
}

.xp-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), #22c55e);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-bronze {
    background: rgba(205, 127, 50, 0.2);
    color: #CD7F32;
}

.rank-silver {
    background: rgba(192, 192, 192, 0.2);
    color: #C0C0C0;
}

.rank-gold {
    background: rgba(255, 215, 0, 0.2);
    color: #FFD700;
}

.rank-platinum {
    background: rgba(229, 228, 226, 0.2);
    color: #E5E4E2;
}

.rank-diamond {
    background: rgba(185, 242, 255, 0.2);
    color: #b9f2ff;
}

.rank-heroic {
    background: rgba(255, 77, 77, 0.2);
    color: #ff4d4d;
}

.rank-master {
    background: rgba(255, 0, 0, 0.2);
    color: #ff0000;
}

.rank-grandmaster {
    background: rgba(128, 0, 128, 0.2);
    color: #800080;
}

.streak-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff9d00;
    font-weight: 800;
    font-size: 1.2rem;
}

.streak-counter i {
    filter: drop-shadow(0 0 5px rgba(255, 157, 0, 0.5));
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.badge-locked {
    filter: grayscale(1);
    opacity: 0.5;
}

.xp-popup {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-card);
    border: 1px solid var(--accent-green);
    padding: 16px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideUp 0.3s ease-out;
    z-index: 1000;
}

@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Utilities */
.text-xp {
    color: var(--accent-green);
    font-weight: 700;
}

/* Task Tree Grid System */
.task-tree-header {
    display: grid;
    grid-template-columns: 40px 3fr 1fr 1fr 1fr 1fr 40px;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.task-list-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 16px;
}

.task-row {
    display: grid;
    grid-template-columns: 40px 3fr 1fr 1fr 1fr 1fr 40px;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    transition: background-color 0.2s;
    font-size: 0.95rem;
}

.task-row:last-child {
    border-bottom: none;
}

.task-row:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.task-cell {
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

.task-title {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-row.parent {
    background-color: rgba(74, 222, 128, 0.03);
}

.task-row.parent .task-title {
    color: var(--accent-green);
    font-weight: 600;
}

.task-row.subtask {
    background-color: var(--bg-card);
}

.task-row.subtask .task-title {
    padding-left: 36px;
    position: relative;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.task-row.subtask .task-title::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 12px;
    height: 1px;
    background-color: var(--border);
    transform: translateY(-50%);
}

.task-row.subtask .task-title::after {
    content: '';
    position: absolute;
    left: 14px;
    top: -50%;
    bottom: 50%;
    width: 1px;
    background-color: var(--border);
}

.toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.toggle-btn i {
    transition: transform 0.2s;
}

.toggle-btn.expanded i {
    transform: rotate(90deg);
}

/* Badge Tweaks */
.badge {
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.badge-high {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-low {
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.badge-todo {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-progress {
    background: rgba(74, 222, 128, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

/* Progress Bar in Grid */
.grid-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.grid-progress-bar {
    height: 100%;
    background: var(--accent-green);
    border-radius: 3px;
}

/* AI Chat Sidebar */
.ai-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: #0f172a;
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.ai-sidebar.open {
    right: 0;
}

.ai-header {
    padding: 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-msg {
    display: flex;
    gap: 12px;
    max-width: 90%;
}

.ai-msg.bot {
    align-self: flex-start;
}

.ai-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ai-msg.bot .msg-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 0 12px 12px 12px;
}

.ai-msg.user .msg-bubble {
    background: #3b82f6;
    color: #fff;
    border-radius: 12px 0 12px 12px;
}

.ai-actions {
    padding: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.ai-btn {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-btn:hover {
    background: rgba(59, 130, 246, 0.25);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--bg-card);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--border);
    width: 100%;
    max-width: 500px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.close-modal {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    background: #1e1e1e;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: white;
    font-family: inherit;
    outline: none;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--accent-green);
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.modal-btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

/* Timer */
.timer-card {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../img/bg.jpg') center/cover no-repeat;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.timer-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.timer-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.timer-digits {
    font-size: 8rem;
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.4);
}

.mode-switcher {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px;
    border-radius: 30px;
    display: flex;
    gap: 4px;
}

.mode-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px 20px;
    border-radius: 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

.mode-btn.active {
    background: var(--accent-green);
    color: black;
    box-shadow: 0 2px 10px rgba(74, 222, 128, 0.3);
}

.timer-controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.btn-timer-primary {
    background: white;
    color: black;
    border: none;
    padding: 16px 48px;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.btn-timer-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 255, 255, 0.3);
}

.btn-timer-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-timer-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Custom Duration Row (Focus Mode) */
.custom-duration-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 6px 14px;
    color: var(--text-primary);
    transition: opacity 0.2s, background 0.2s;
}

.custom-duration-row.hidden {
    display: none;
}

#custom-minutes-input {
    width: 52px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    outline: none;
    padding: 2px 4px;
    font-family: var(--font-body);
    /* hide spinner */
    -moz-appearance: textfield;
    appearance: textfield;
}

#custom-minutes-input::-webkit-inner-spin-button,
#custom-minutes-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#custom-minutes-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#set-custom-duration-btn {
    background: var(--accent-green);
    color: #000;
    border: none;
    border-radius: 30px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
    letter-spacing: 0.03em;
}

#set-custom-duration-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(74, 222, 128, 0.4);
}

/* Light mode overrides for custom duration (needs to be bright because of dark overlay) */
[data-theme="light"] .custom-duration-row {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="light"] #custom-minutes-input {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="light"] #custom-minutes-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Common Legacy Components */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    font-family: var(--font-body);
    line-height: 1.5;
    position: relative;
}

/* Primary Button - Main Actions */
.btn-primary {
    background-color: var(--accent-green);
    color: var(--primary-foreground);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.2);
}

.btn-primary:hover {
    background-color: var(--accent-green-bright);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(74, 222, 128, 0.35);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(74, 222, 128, 0.2);
}

.btn-primary:disabled {
    background-color: rgba(74, 222, 128, 0.3);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    animation: none;
}

/* Secondary Button - Navigation/Cancel Actions */
.btn-secondary,
.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-secondary:hover,
.btn-outline:hover {
    background: var(--bg-hover);
    border-color: var(--accent-green);
    color: var(--accent-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.15);
}

.btn-secondary:active,
.btn-outline:active {
    transform: translateY(0);
    background: rgba(74, 222, 128, 0.1);
}

.btn-secondary:disabled,
.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Destructive Button - Delete/Leave Actions */
.btn-destructive {
    background-color: var(--destructive);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.btn-destructive:hover {
    background-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}

.btn-destructive:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.2);
}

.btn-destructive:disabled {
    background-color: rgba(239, 68, 68, 0.3);
    cursor: not-allowed;
    transform: none;
    animation: none;
}

/* Small Button Variant */
.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* Large Button Variant */
.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

/* Icon-only Button */
.btn-icon {
    padding: 10px;
    width: 40px;
    height: 40px;
}

/* Full Width Button */
.btn-block {
    width: 100%;
}

/* Glow Animations */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 8px 20px rgba(74, 222, 128, 0.4), 0 0 30px rgba(74, 222, 128, 0.2);
    }

    50% {
        box-shadow: 0 8px 25px rgba(74, 222, 128, 0.6), 0 0 40px rgba(74, 222, 128, 0.3);
    }
}

@keyframes pulse-glow-red {

    0%,
    100% {
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4), 0 0 30px rgba(239, 68, 68, 0.2);
    }

    50% {
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.3);
    }
}

/* Profile Page Styles */
.profile-hero {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.profile-cover {
    height: 160px;
    /* background: linear-gradient(135deg, #1e1e1e, #2d3748); */
    /* background-image: url('https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=80&w=2070&auto=format&fit=crop'); */
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}

.profile-avatar-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 0 32px;
    margin-top: -60px;
    margin-bottom: 24px;
    position: relative;
    z-index: 5;
}

.profile-avatar-main {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 6px solid var(--bg-card);
    object-fit: cover;
    background: var(--bg-card);
}

.profile-info-brief {
    flex: 1;
}

.profile-info-brief h2 {
    font-size: 2rem;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.profile-info-brief p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.profile-actions {
    padding: 0 32px 24px;
    display: flex;
    gap: 12px;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-grid-main {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

.tab-nav {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.tab-link {
    padding: 12px 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
    position: relative;
    transition: color 0.2s;
}

.tab-link:hover {
    color: var(--text-primary);
}

.tab-link.active {
    color: var(--accent-green);
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-green);
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    padding: 12px 16px;
    border-radius: var(--radius-md);
}

.badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.1);
    color: var(--accent-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.setting-row:last-of-type {
    border-bottom: none;
}

.setting-info h4 {
    font-size: 1rem;
    margin-bottom: 4px;
    font-family: var(--font-body);
    font-weight: 600;
}

.setting-info p,
.setting-info div {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Battle Screen Transitions */
.battle-screen {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================= */
/* RESPONSIVE DESIGN - Mobile First */
/* ============================= */

/* Tablet Breakpoint (768px - 1024px) */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .layout-home {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .profile-grid-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .main-content {
        padding: 24px 20px;
    }

    .page-title {
        font-size: 2rem;
    }
}

/* Mobile Breakpoint (max-width: 768px) */
@media (max-width: 768px) {

    /* Layout Adjustments */
    body {
        overflow-y: auto;
        height: auto;
    }

    .app-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .main-content {
        padding: 16px;
        margin-top: 60px;
        overflow-y: visible;
        height: auto;
        min-height: calc(100vh - 60px);
    }

    /* Typography */
    .page-title {
        font-size: 1.75rem;
        margin-bottom: 12px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    /* Dashboard Grid */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Stats Row */
    .stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat-card {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    /* Cards */
    .card {
        padding: 16px;
        border-radius: var(--radius-md);
    }

    .card-header {
        margin-bottom: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .card-title {
        font-size: 1rem;
    }

    /* Profile Page */
    .profile-hero {
        margin-bottom: 16px;
    }

    .profile-cover {
        height: 120px;
    }

    .profile-avatar-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 16px;
        margin-top: -50px;
        margin-bottom: 16px;
        gap: 16px;
    }

    .profile-avatar-main {
        width: 100px;
        height: 100px;
        border-width: 4px;
    }

    .profile-info-brief h2 {
        font-size: 1.5rem;
    }

    .profile-info-brief p {
        font-size: 0.9rem;
    }

    .profile-actions {
        padding: 0 16px 16px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Profile Grid */
    .profile-grid-main {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Tab Navigation */
    .tab-nav {
        gap: 16px;
        margin-bottom: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-link {
        padding: 10px 0;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    /* Settings Page Grid */
    .grid.grid-cols-2,
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Schedule Grid */
    .schedule-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .schedule-day {
        padding: 12px;
    }

    /* Task Tree Grid */
    .task-tree-header,
    .task-row {
        grid-template-columns: 30px 2fr 0.8fr 30px;
        gap: 8px;
        padding: 12px 8px;
        font-size: 0.85rem;
    }

    .task-tree-header {
        font-size: 0.75rem;
    }

    /* Hide some columns on mobile */
    .task-row>*:nth-child(4),
    .task-row>*:nth-child(5),
    .task-row>*:nth-child(6),
    .task-tree-header>*:nth-child(4),
    .task-tree-header>*:nth-child(5),
    .task-tree-header>*:nth-child(6) {
        display: none;
    }

    .task-row.subtask .task-title {
        padding-left: 24px;
        font-size: 0.8rem;
    }

    /* Badges Grid */
    .badge-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Timer Card */
    .timer-card {
        min-height: 300px;
        border-radius: 16px;
    }

    .timer-digits {
        font-size: 4rem;
        letter-spacing: -2px;
    }

    .mode-switcher {
        padding: 4px;
        flex-wrap: wrap;
    }

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

    .timer-controls {
        gap: 12px;
        flex-wrap: wrap;
    }

    .btn-timer-primary {
        padding: 14px 32px;
        font-size: 1.2rem;
    }

    .btn-timer-secondary {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    /* Buttons */
    .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

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

    .btn-lg {
        padding: 12px 20px;
        font-size: 1rem;
    }

    /* Modal */
    .modal-content {
        margin: 16px;
        padding: 20px;
        max-width: calc(100% - 32px);
    }

    .form-row {
        flex-direction: column;
        gap: 12px;
    }

    /* AI Sidebar */
    .ai-sidebar {
        width: 100%;
        right: -100%;
    }

    .ai-sidebar.open {
        right: 0;
    }

    .ai-messages {
        padding: 16px;
        gap: 12px;
    }

    .ai-msg {
        max-width: 95%;
    }

    .msg-bubble {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    /* Battle Byte Arena */
    #battle-content-area .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    #battle-content-area .page-header>div {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
        width: 100%;
    }

    #battle-content-area>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* XP Modal */
    #xpModal>div {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin: 16px;
    }

    /* Clock Widget */
    .clock-widget {
        font-size: 2.5rem;
        padding: 20px;
    }

    /* Pixel Banner */
    .pixel-banner {
        height: 200px;
        margin-bottom: 20px;
    }

    .banner-overlay {
        padding: 12px;
    }

    /* Badge Items */
    .badge-item {
        padding: 10px 12px;
        gap: 12px;
    }

    .badge-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* Setting Row */
    .setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 0;
    }

    .setting-info h4 {
        font-size: 0.95rem;
    }

    .setting-info p,
    .setting-info div {
        font-size: 0.8rem;
    }
}

/* Small Mobile Breakpoint (max-width: 480px) */
@media (max-width: 480px) {
    .main-content {
        padding: 12px;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .stats-row {
        grid-template-columns: 1fr;
    }

    .stat-card {
        flex-direction: row;
        padding: 14px;
    }

    .card {
        padding: 14px;
    }

    .timer-digits {
        font-size: 3rem;
    }

    .btn-timer-primary {
        padding: 12px 24px;
        font-size: 1rem;
    }

    .profile-actions {
        gap: 8px;
    }

    .profile-actions .btn {
        font-size: 0.85rem;
        padding: 8px 14px;
    }

    .tab-nav {
        gap: 12px;
    }

    .tab-link {
        font-size: 0.85rem;
    }

    .modal-content {
        margin: 12px;
        padding: 16px;
    }

    /* Adjust sidebar user profile section */
    .sidebar>div[style*="padding: 16px"] {
        padding: 12px !important;
    }

    .sidebar .xp-progress-container {
        font-size: 0.65rem;
    }

    /* Collapse any 2-col grids to 1 col on small screens */
    .schedule-grid,
    .badge-grid {
        grid-template-columns: 1fr !important;
    }

    /* Friends / Groups grid */
    .friends-grid,
    .groups-grid {
        grid-template-columns: 1fr !important;
    }

    /* Leaderboard table padding reduction */
    .leaderboard-table td,
    .leaderboard-table th {
        padding: 12px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Shop grid: 2 columns on small mobile */
    .shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Reduce page titles more aggressively */
    .page-title {
        font-size: 1.25rem !important;
    }

    /* Ensure all buttons don't overflow */
    .btn, button {
        max-width: 100%;
        white-space: normal;
    }
}

/* ══════════════════════════════════════════════
   VERY SMALL PHONES (max-width: 360px)
   Targets: Redmi 9, Samsung A13, Moto G series
   — Most common affordable phones in India
   ══════════════════════════════════════════════ */
@media (max-width: 360px) {
    .main-content {
        padding: 10px;
    }

    .page-title {
        font-size: 1.1rem !important;
    }

    .card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* Stat cards go single column */
    .stats-row,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    /* Nav items text smaller */
    .nav-item {
        font-size: 0.85rem;
        padding: 10px 12px;
    }

    /* XP bar area */
    .xp-bar-bg {
        height: 6px;
    }

    /* Modals full width */
    .modal-content,
    .modal-box {
        margin: 8px;
        padding: 14px;
        border-radius: 12px;
    }

    /* Sidebar user section */
    .sidebar-header .logo span {
        font-size: 1rem;
    }

    /* Mobile header */
    .mobile-header {
        height: 54px;
        padding: 0 14px;
    }

    .logo-mobile {
        font-size: 1rem;
    }

    /* Buttons */
    .btn-battle, .btn-timer-primary {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* Landscape Mobile Optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-header {
        height: 50px;
    }

    .main-content {
        margin-top: 50px;
        min-height: calc(100vh - 50px);
    }

    .sidebar {
        top: 50px;
    }

    .timer-card {
        min-height: 250px;
    }

    .timer-digits {
        font-size: 3.5rem;
    }
}

/* Print Styles */
@media print {

    .sidebar,
    .mobile-header,
    .nav-menu,
    .sidebar-toggle,
    .desktop-sidebar-toggle,
    .btn,
    button {
        display: none !important;
    }

    .main-content {
        margin-top: 0;
        padding: 0;
    }

    .card {
        page-break-inside: avoid;
    }
}

/* Theme Toggle Button */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    font-family: var(--font-body);
    width: 100%;
}

.theme-toggle-btn:hover {
    background: var(--accent-green-dim);
    border-color: var(--accent-green);
    color: var(--accent-green);
    transform: translateX(2px);
}

.theme-toggle-btn i {
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* Icon visibility based on theme */
[data-theme="dark"] .theme-icon-light {
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="dark"] .theme-icon-dark {
    opacity: 0;
    transform: rotate(180deg);
    position: absolute;
}

[data-theme="light"] .theme-icon-light {
    opacity: 0;
    transform: rotate(180deg);
    position: absolute;
}

[data-theme="light"] .theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg);
}

/* Default (dark theme) */
.theme-icon-light {
    opacity: 1;
    transform: rotate(0deg);
}

.theme-icon-dark {
    opacity: 0;
    transform: rotate(180deg);
    position: absolute;
}

/* Collapsed sidebar adjustments */
body.sidebar-collapsed .theme-toggle-btn {
    justify-content: center;
    padding: 12px;
}

body.sidebar-collapsed .theme-toggle-text {
    display: none;
}

/* Spin animation on click */
@keyframes theme-switch-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.2);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.theme-toggle-btn.switching i {
    animation: theme-switch-spin 0.5s ease-in-out;
}

/* Page Load Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Apply animations to elements */
.card {
    animation: slideUp 0.5s ease-out;
}

.card:nth-child(1) {
    animation-delay: 0.1s;
}

.card:nth-child(2) {
    animation-delay: 0.2s;
}

.card:nth-child(3) {
    animation-delay: 0.3s;
}

.nav-item {
    animation: slideInLeft 0.3s ease-out backwards;
}

.nav-item:nth-child(1) {
    animation-delay: 0.05s;
}

.nav-item:nth-child(2) {
    animation-delay: 0.1s;
}

.nav-item:nth-child(3) {
    animation-delay: 0.15s;
}

.nav-item:nth-child(4) {
    animation-delay: 0.2s;
}

.nav-item:nth-child(5) {
    animation-delay: 0.25s;
}

.nav-item:nth-child(6) {
    animation-delay: 0.3s;
}

.nav-item:nth-child(7) {
    animation-delay: 0.35s;
}

.nav-item:nth-child(8) {
    animation-delay: 0.4s;
}

.page-header {
    animation: fadeIn 0.6s ease-out;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Selection styling */
::selection {
    background-color: var(--accent-green);
    color: #000;
}

::-moz-selection {
    background-color: var(--accent-green);
    color: #000;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-green);
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
}

/* Roadmap Visualization */
.roadmap-container {
    position: relative;
    padding: 24px 0;
    max-width: 800px;
    margin: 0 auto;
}

.roadmap-line {
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-green) 0%, rgba(74, 222, 128, 0.1) 100%);
    z-index: 0;
}

.roadmap-chapter {
    position: relative;
    margin-bottom: 40px;
    padding-left: 60px;
    z-index: 1;
}

.roadmap-node {
    position: absolute;
    left: 10px;
    top: 0;
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 2px solid var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.roadmap-chapter:hover .roadmap-node {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(74, 222, 128, 0.4);
}

.roadmap-node i {
    color: var(--accent-green);
    font-size: 1rem;
}

.roadmap-chapter.completed .roadmap-node {
    background: var(--accent-green);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}

.roadmap-chapter.completed .roadmap-node i {
    color: black;
}

.roadmap-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.3s ease;
}

.roadmap-content:hover {
    transform: translateX(4px);
    border-color: var(--accent-green-dim);
}

.roadmap-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roadmap-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
}

.subtopic-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.subtopic-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.subtopic-item:hover {
    border-color: var(--accent-green);
    background: rgba(74, 222, 128, 0.05);
}

.subtopic-item input[type="checkbox"] {
    accent-color: var(--accent-green);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.subtopic-item.completed {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
}

.subtopic-item.completed span {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Calendar Specifics */
.calendar-cell {
    background: var(--bg-hover);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}

.calendar-cell:hover {
    border-color: var(--border);
}

.calendar-cell.today {
    border-color: var(--accent-green);
    background: rgba(74, 222, 128, 0.05);
}

.event-dot {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-weight: 500;
    background: rgba(59, 130, 246, 0.2);
    color: #cbd5e1;
}

[data-theme='light'] .event-dot {
    color: #1e3a8a;
    background: rgba(59, 130, 246, 0.2);
}

.event-dot.high {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

[data-theme='light'] .event-dot.high {
    color: #7f1d1d;
    background: rgba(239, 68, 68, 0.2);
}

/* ========================================
   THEME TOGGLE BUTTON - UNIVERSAL STYLES
   ======================================== */

/* Base theme toggle button styles */
#theme-toggle,
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
    width: 100%;
    justify-content: flex-start;
}

#theme-toggle:hover,
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Icon visibility based on theme */
/* Default: show moon icon (for dark themes) */
.theme-icon-light {
    display: none;
}

.theme-icon-dark {
    display: inline-block;
}

/* When in light mode, show sun icon instead */
[data-theme="light"] .theme-icon-light {
    display: inline-block;
}

[data-theme="light"] .theme-icon-dark {
    display: none;
}

/* Shop themes should still show moon icon (they are dark themes) */
body.theme_cyberpunk .theme-icon-dark,
body.theme_matrix .theme-icon-dark,
body.theme_sunset .theme-icon-dark,
body.theme_ocean .theme-icon-dark,
body.theme_midnight .theme-icon-dark,
body.theme_forest .theme-icon-dark {
    display: inline-block !important;
}

body.theme_cyberpunk .theme-icon-light,
body.theme_matrix .theme-icon-light,
body.theme_sunset .theme-icon-light,
body.theme_ocean .theme-icon-light,
body.theme_midnight .theme-icon-light,
body.theme_forest .theme-icon-light {
    display: none !important;
}

/* Ensure theme toggle button works in ALL custom themes */
body.theme_cyberpunk #theme-toggle,
body.theme_matrix #theme-toggle,
body.theme_sunset #theme-toggle,
body.theme_ocean #theme-toggle,
body.theme_midnight #theme-toggle,
body.theme_forest #theme-toggle {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
}

body.theme_cyberpunk #theme-toggle:hover,
body.theme_matrix #theme-toggle:hover,
body.theme_sunset #theme-toggle:hover,
body.theme_ocean #theme-toggle:hover,
body.theme_midnight #theme-toggle:hover,
body.theme_forest #theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

/* Ensure text is always visible */
.theme-toggle-text {
    display: inline-block;
    font-weight: 500;
}

/* Collapsed sidebar - hide text, show only icon */
body.sidebar-collapsed .theme-toggle-text {
    display: none;
}

body.sidebar-collapsed #theme-toggle {
    justify-content: center;
    padding: 12px;
}

/* ========================================
   INFINITE ANIMATION FRAMES (REFACTORED)
   ======================================== */

/* Base Wrapper & Layering Logic */
.avatar-wrapper {
    position: relative;
    display: inline-block;
    background: transparent !important;
    box-shadow: none !important;
}

/* Frame Layer (Behind Image) */
.avatar-wrapper::before {
    content: '';
    position: absolute;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
    /* Frame BEHIND Avatar */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Avatar Image (Foreground) */
.avatar-wrapper img {
    position: relative;
    z-index: 2;
    /* Image ON TOP */
    border-radius: 50%;
    background: transparent !important;
    /* Ensure no white box */
    box-shadow: none !important;
    display: block;
    /* Ensure no line-height gaps */
}

/* 1. Galaxy Frame (v2) */
body.frame_galaxy .avatar-wrapper::before {
    background-image: url('../img/frames/frame_galaxy.png');
    animation: galaxySpin 20s linear infinite;
    opacity: 1;
}

@keyframes galaxySpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 2. Lightning Frame (v2) */
body.frame_lightning .avatar-wrapper::before {
    background-image: url('../img/frames/frame_lightning.png');
    animation: lightningPulse 0.1s ease-in-out infinite alternate;
    opacity: 1;
    filter: drop-shadow(0 0 5px #3b82f6);
}

@keyframes lightningPulse {
    from {
        opacity: 0.9;
    }

    to {
        opacity: 1;
    }
}

/* 3. Phoenix/Fire Frame (v2) */
body.frame_phoenix .avatar-wrapper::before,
body.frame_fire .avatar-wrapper::before {
    background-image: url('../img/frames/frame_fire.png');
    animation: fireFlicker 0.15s ease-in-out infinite alternate;
    opacity: 1;
    filter: drop-shadow(0 0 5px #ef4444);
}

@keyframes fireFlicker {
    from {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 5px #ef4444);
    }

    to {
        transform: scale(1.02);
        filter: brightness(1.2) drop-shadow(0 0 8px #f97316);
    }
}

/* 4. Gold Frame (v2) */
body.frame_gold .avatar-wrapper::before {
    background-image: url('../img/frames/frame_gold.png');
    animation: goldShine 4s ease-in-out infinite;
    opacity: 1;
}

@keyframes goldShine {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3) drop-shadow(0 0 10px #eab308);
    }
}

/* 5. Diamond Frame (v1) */
body.frame_diamond .avatar-wrapper::before {
    background-image: url('../img/frames/frame_diamond.png');
    animation: diamondRotate 10s linear infinite;
    opacity: 1;
}

@keyframes diamondRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 6. Ice Frame (v1) */
body.frame_ice .avatar-wrapper::before {
    background-image: url('../img/frames/frame_ice.png');
    animation: icePulse 3s ease-in-out infinite alternate;
    opacity: 1;
}

@keyframes icePulse {
    from {
        filter: drop-shadow(0 0 2px white);
        opacity: 0.8;
    }

    to {
        filter: drop-shadow(0 0 8px #38bdf8);
        opacity: 1;
    }
}

/* 7. Rainbow Frame (v1) */
body.frame_rainbow .avatar-wrapper::before {
    background-image: url('../img/frames/frame_rainbow.png');
    animation: rainbowSpin 6s linear infinite;
    opacity: 1;
}

@keyframes rainbowSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 8. Neon Frame (v1) */
body.frame_neon .avatar-wrapper::before {
    background-image: url('../img/frames/frame_neon.png');
    animation: neonFlux 0.08s steps(2, start) infinite alternate;
    opacity: 1;
}

@keyframes neonFlux {
    from {
        opacity: 0.9;
    }

    to {
        opacity: 1;
        filter: brightness(1.1);
    }
}

/* 9. Cosmic Frame (v1) */
body.frame_cosmic .avatar-wrapper::before {
    background-image: url('../img/frames/frame_cosmic.png');
    animation: cosmicDrift 20s ease-in-out infinite alternate;
    opacity: 1;
}

@keyframes cosmicDrift {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(15deg);
    }
}

/* 10. Plasma Frame (v1) */
body.frame_plasma .avatar-wrapper::before {
    background-image: url('../img/frames/frame_plasma.png');
    animation: plasmaFlow 3s ease-in-out infinite alternate;
    opacity: 1;
}

@keyframes plasmaFlow {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(45deg);
    }
}

/* 11. Shadow Frame (v1) */
body.frame_shadow .avatar-wrapper::before {
    background-image: url('../img/frames/frame_shadow.png');
    animation: shadowMist 5s ease-in-out infinite;
    opacity: 1;
}

@keyframes shadowMist {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* 12. Crystal Frame (v1) */
body.frame_crystal .avatar-wrapper::before {
    background-image: url('../img/frames/frame_crystal.png');
    animation: crystalShimmer 3s ease-in-out infinite;
    opacity: 1;
}

@keyframes crystalShimmer {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }
}

/* 13. Dragon Frame (v1) */
body.frame_dragon .avatar-wrapper::before {
    background-image: url('../img/frames/frame_dragon.png');
    animation: dragonPower 0.1s infinite alternate;
    opacity: 1;
}

@keyframes dragonPower {
    from {
        transform: translate(-1px, -1px);
    }

    to {
        transform: translate(1px, 1px);
    }
}

/* ========================================
   SAKURA THEME POLISH (FINAL)
   ======================================== */

/* 1. Item Card Interaction */
body.theme_sakura .shop-item-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(249, 168, 212, 0.1);
}

body.theme_sakura .shop-item-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(249, 168, 212, 0.25),
        0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: rgba(249, 168, 212, 0.4);
    z-index: 5;
}

/* 2. Filter Buttons Polish */
body.theme_sakura .filter-btn {
    transition: all 0.3s ease;
}

body.theme_sakura .filter-btn.active {
    background: #fdf2f8 !important;
    /* Very light pink */
    color: #db2777 !important;
    /* Strong pink text */
    box-shadow: 0 0 20px rgba(249, 168, 212, 0.6);
    border: 1px solid #f9a8d4 !important;
}

body.theme_sakura .filter-btn:hover:not(.active) {
    background: rgba(249, 168, 212, 0.15) !important;
    box-shadow: 0 0 10px rgba(249, 168, 212, 0.2);
}

/* 3. Particle refinement (Now handled by particles.js) */
body.theme_sakura::before {
    animation: none !important;
    opacity: 0.4 !important;
}

/* 4. Search Bar Focus */
body.theme_sakura #shop-search:focus {
    box-shadow: 0 0 15px rgba(249, 168, 212, 0.3);
    border-color: #f9a8d4 !important;
}

/* ========================================
   GLOBAL THEME ANIMATIONS (FALLING BACKGROUNDS)
   ======================================== */

/* Keyframes */
@keyframes fallLinear {
    0% {
        background-position: 0 0, 50px 0, 100px 0;
    }

    100% {
        background-position: 0 1000px, 50px 1200px, 100px 800px;
    }
}

@keyframes fallSway {
    0% {
        transform: translateX(0) translateY(0);
    }

    25% {
        transform: translateX(10px) translateY(25%);
    }

    50% {
        transform: translateX(-10px) translateY(50%);
    }

    75% {
        transform: translateX(10px) translateY(75%);
    }

    100% {
        transform: translateX(0) translateY(100%);
    }
}

@keyframes matrixFall {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}

/* Base Styles for Animation Layers (Generic) */
[class*="theme_"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    /* Overlay styles */
    opacity: var(--bg-opacity, 0.4);
    background-image: var(--bg-particles, none);
    background-size: var(--bg-size, auto);
    background-repeat: repeat;
    background-position: var(--bg-position, 0 0);
    animation: var(--bg-animation, none);
}

/* ========================================
   THEME ANIMATION VARIABLES
   ======================================== */

/* 1. Cyberpunk */
body.theme_cyberpunk {
    --bg-particles:
        linear-gradient(45deg, rgba(139, 92, 246, 0.2) 2px, transparent 2px),
        linear-gradient(135deg, rgba(6, 182, 212, 0.2) 2px, transparent 2px);
    --bg-size: 100px 100px, 120px 120px;
    --bg-animation: fallLinear 15s linear infinite;
    --bg-opacity: 0.3;
}






/* 7. Aurora */
body.theme_aurora {
    --bg-particles:
        radial-gradient(ellipse at center, rgba(45, 212, 191, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at center, rgba(168, 85, 247, 0.05) 0%, transparent 60%);
    --bg-size: 300px 300px, 400px 400px;
    --bg-position: 0 0, 100px 100px;
    --bg-animation: fallSway 20s ease-in-out infinite;
}



/* 9. Synthwave */
body.theme_synthwave {
    --bg-particles:
        linear-gradient(90deg, rgba(232, 121, 249, 0.1) 1px, transparent 1px),
        linear-gradient(0deg, rgba(74, 222, 128, 0.05) 1px, transparent 1px);
    --bg-size: 150px 150px, 150px 150px;
    --bg-animation: fallLinear 12s linear infinite;
}



/* 13. Neon City */
body.theme_neon_city {
    --bg-particles: linear-gradient(180deg, rgba(6, 182, 212, 0) 0%, rgba(6, 182, 212, 0.3) 50%, rgba(6, 182, 212, 0) 100%);
    --bg-size: 2px 80px;
    --bg-animation: matrixFall 1.5s linear infinite;
    --bg-opacity: 0.3;
}

/* Performance: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    [class*="theme_"]::before {
        animation: none !important;
        background-position: center !important;
    }
}

/* Shop Item Card Base Styles */
.shop-item-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

/* Ensure inner text is readable in both themes */
.shop-item-card h3 {
    color: var(--text-primary);
}

.shop-item-card p {
    color: var(--text-secondary);
}

/* ========================================
   RESPONSIVE & LAYOUT CORE
   ======================================== */

.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--bg-main);
    color: var(--text-primary);
}

.sidebar {
    width: 260px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;
    z-index: 999;
    flex-shrink: 0;
}

.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px;
    position: relative;
    background-color: var(--bg-main);
}

.mobile-header {
    display: none;
    /* Hidden on desktop */
    padding: 16px 20px;
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
}

.logo-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Dashboard Layout */
.layout-home {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 24px;
    max-width: 100%;
    margin: 0 auto;
}

/* Stats Cards Responsive Grid */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Sidebar Collapsed State (Desktop) */
body.sidebar-collapsed .sidebar {
    width: 80px;
}

body.sidebar-collapsed .logo span,
body.sidebar-collapsed .nav-item span {
    display: none;
}

body.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 12px 0;
}

body.sidebar-collapsed .nav-item i {
    margin: 0;
    font-size: 1.2rem;
}

/* ========================================
   MEDIA QUERIES
   ======================================== */

/* Tablet (max-width: 1200px) */
@media (max-width: 1200px) {
    .layout-home {
        grid-template-columns: 1fr 300px;
    }

    .layout-home>div:first-child {
        display: none;
        /* Hide left column widgets on tablet for space */
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
        padding-top: 60px;
        /* Space for fixed mobile header */
    }

    .mobile-header {
        display: flex;
    }

    .sidebar {
        position: fixed;
        inset: 0;
        top: 60px;
        width: 100%;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        box-shadow: none;
        padding-top: 0;
        background-color: var(--bg-main);
        /* Full screen menu feel */
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-header {
        display: none;
    }

    .main-content {
        padding: 16px;
        height: auto;
    }

    /* Stack Dashboard */
    .layout-home {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .layout-home>div:first-child {
        display: flex;
        /* Restore left column */
        flex-direction: column;
    }

    /* Stats Stack */
    .stats-row {
        grid-template-columns: 1fr;
    }

    /* Profile Adjustments */
    .profile-hero {
        flex-direction: column;
        padding: 20px !important;
        height: auto !important;
        min-height: 240px;
        justify-content: center;
        text-align: center;
    }

    .profile-hero>div {
        flex-direction: column;
        padding: 0 !important;
        width: 100%;
    }

    .profile-hero img {
        margin: 0 auto;
    }

    .profile-hero h2 {
        font-size: 1.5rem !important;
    }

    /* Hide desktop-only controls */
    .desktop-sidebar-toggle {
        display: none !important;
    }

    /* Adjust Cards */
    .card {
        padding: 16px;
    }

    .page-title {
        font-size: 1.5rem;
    }
}

/* ========================================
   DASHBOARD REDESIGN (NEW CARD LAYOUT)
   ======================================== */

.dashboard-grid-container {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    grid-template-rows: auto auto;
    /* Two main rows */
    gap: 20px;
    margin-top: 24px;
}

/* TOP ROW */
.card-clock-green {
    background: #4ade80;
    /* Bright Green */
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #052e16;
    /* Dark Green Text */
    position: relative;
    height: 200px;
    box-shadow: 0 10px 30px rgba(74, 222, 128, 0.2);
}

.card-clock-time {
    font-size: 4rem;
    font-weight: 800;
    font-family: var(--font-heading);
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.card-clock-date {
    font-size: 0.9rem;
    font-weight: 800;
    opacity: 0.9;
    margin-top: 8px;
    text-transform: uppercase;
    color: #064e3b;
}

.card-clock-ampm {
    position: absolute;
    bottom: 20px;
    left: 24px;
    font-size: 1rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.8);
}

.card-focus-wide {
    background: #101010;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.focus-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.focus-badge {
    background: rgba(74, 222, 128, 0.1);
    color: var(--accent-green);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.focus-title {
    font-size: 2rem;
    font-family: var(--font-heading);
    margin: 16px 0 4px 0;
    color: #fff;
    letter-spacing: -0.5px;
}

.focus-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.focus-progress-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #222;
    border-top-color: var(--accent-green);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    font-size: 0.9rem;
}

.focus-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: auto;
}

.btn-focus-action {
    flex: 1;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
    transition: transform 0.2s;
}

.btn-focus-action:hover {
    transform: scale(1.02);
}

.btn-focus-pause {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #333;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-focus-pause:hover {
    background: #2a2a2a;
}

.card-important-red {
    background: #0f0505;
    border: 1px solid #450a0a;
    border-radius: 20px;
    padding: 24px;
    height: 200px;
    display: flex;
    flex-direction: column;
}

.important-label {
    color: #ef4444;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.important-item {
    background: rgba(239, 68, 68, 0.05);
    border-left: 3px solid #ef4444;
    padding: 16px;
    border-radius: 0 12px 12px 0;
}

.important-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 6px;
    color: #fee2e2;
}

.important-meta {
    font-size: 0.75rem;
    color: #fca5a5;
    font-weight: 600;
}

/* BOTTOM ROW GRID */
.card-image-large {
    background: #111;
    border-radius: 24px;
    height: 400px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
}

.card-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.card-image-large:hover img {
    transform: scale(1.05);
}

.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: 400px;
}

.schedule-day-card {
    background: #101010;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #222;
    display: flex;
    flex-direction: column;
}

.day-header {
    color: var(--accent-green);
    font-weight: 800;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.day-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.day-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.day-list li i {
    font-size: 0.8rem;
    opacity: 0.7;
}

.card-todos-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.weekly-todos-header {
    color: #4ade80;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.todos-list-minimal {
    list-style: none;
    padding: 0;
}

.todos-list-minimal li {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-left: 14px;
    border-left: 2px solid var(--border-light);
    transition: border-color 0.2s;
}

.todos-list-minimal li:hover {
    border-left-color: var(--accent-green);
    color: #fff;
}

.card-image-small {
    background: #fff;
    border-radius: 20px;
    height: 180px;
    overflow: hidden;
    position: relative;
    margin-top: auto;
}

@media (max-width: 1200px) {
    .dashboard-grid-container {
        grid-template-columns: 1fr;
    }

    .schedule-grid {
        height: auto;
        grid-template-columns: 1fr;
    }

    .card-image-large {
        height: 300px;
    }
}

/* ========================================
   TEMPORAL GRID (CALENDAR & EVENTS)
   ======================================== */
.temporal-grid-card {
    background: #0f0f0f;
    /* Very dark, almost black */
    border: 1px solid #222;
    border-radius: 24px;
    padding: 24px;
    margin: 0;
    min-height: 280px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    position: relative;
}

.temporal-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.calendar-widget {
    background: #161616;
    border-radius: 20px;
    padding: 20px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin-bottom: 12px;
    font-weight: 700;
}

.cal-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
}

.cal-nav-btn:hover {
    color: #fff;
}

.cal-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.cal-day-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 700;
}

.cal-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.cal-day:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.cal-day.active {
    background: var(--accent-green);
    /* Using user's theme accent */
    color: #000;
    font-weight: 800;
    box-shadow: 0 0 15px var(--accent-green-dim);
}

.cal-day.empty {
    pointer-events: none;
}

.events-widget {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
}

.timeline-info {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.event-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px dashed #333;
    border-radius: 16px;
    margin-bottom: 20px;
}

.event-placeholder i {
    font-size: 1.5rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

.btn-init-event {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-init-event:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: #555;
}

@media (max-width: 768px) {
    .temporal-grid-card {
        grid-template-columns: 1fr;
        height: auto;
    }
}

/* ========================================
   ACTIVE TASKS WIDGET
   ======================================== */
.active-tasks-card {
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 24px;
    padding: 16px;
    min-height: 300px;
    max-height: 450px;
    /* Limit height to prevent row expansion */
    display: flex;
    flex-direction: column;
}

.active-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.task-count-badge {
    background: #222;
    color: var(--text-secondary);
    font-size: 0.65rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.active-task-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 5px;
    /* space for scrollbar */
}

.active-task-item {
    background: #141414;
    border: 1px solid #1f1f1f;
    /* slightly lighter than bg */
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    cursor: pointer;
}

.active-task-item:hover {
    background: #1a1a1a;
    border-color: #333;
    transform: translateX(4px);
}

.task-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.task-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    position: relative;
}

/* Status variants */
.status-dot-red {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.status-dot-orange {
    background: #f97316;
}

.status-dot-green {
    background: #10b981;
}

.task-item-content h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    color: #fff;
    font-weight: 600;
}

.task-item-content p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.task-item-arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
    opacity: 0.5;
}

.btn-add-new-task {
    margin-top: 20px;
    background: #141414;
    border: 1px dashed #333;
    color: var(--text-secondary);
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-add-new-task:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #555;
}

/* ========================================
   WEEKLY STATS WIDGET
   ======================================== */
.weekly-stats-card {
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 24px;
    padding: 16px;
    min-height: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
}

.w-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}

.stats-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Changed from 1fr 1fr 1fr to make boxes wider */
    gap: 12px;
    margin-bottom: 24px;
}

.mini-stat-box {
    padding: 16px 12px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    transition: transform 0.2s;
}

.mini-stat-box:hover {
    transform: translateY(-2px);
}

.stat-label {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-val {
    font-size: 1.4rem;
    font-weight: 800;
}

.chart-container {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 10px;
    gap: 8px;
}

.chart-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    flex: 1;
    gap: 4px;
}

.bar-group {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    height: 100%;
}

.bar {
    width: 6px;
    border-radius: 4px;
    position: relative;
}

.bar-red {
    background: #ef4444;
}

.bar-grey {
    background: #333;
}

.day-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ========================================
   FLIP CLOCK WIDGET
   ======================================== */
.card-clock-green {
    /* Override existing or keep container styles */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #0f0f0f;
    /* Match other cards */
    border: 1px solid #222;
    border-radius: 24px;
    padding: 20px;
    height: 100%;
    min-height: 200px;
}

.flip-clock {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.flip-unit {
    position: relative;
    width: 60px;
    height: 80px;
    perspective: 400px;
    background: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    font-family: var(--font-heading, "Inter", sans-serif);
    font-weight: 800;
    font-size: 2.5rem;
    color: #fff;
    line-height: 80px;
    text-align: center;
}

.flip-card-top,
.flip-card-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden;
    background: #222;
    border: 1px solid #333;
}

.flip-card-top {
    top: 0;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    transform-origin: 50% 100%;
    z-index: 10;
}

.flip-card-bottom {
    bottom: 0;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform-origin: 50% 0;
    z-index: 5;
    /* Move text up to show bottom half */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Inner text positioning */
.flip-card-top span {
    display: block;
    margin-top: 0px;
    /* Aligned for top half */
}

.flip-card-bottom span {
    display: block;
    margin-bottom: 0px;
    transform: translateY(-50%);
    /* Pull text up since container is half height */
}

/* Actually, simpler trick: line-height relative to full height */

.flip-top,
.flip-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

.flip-top {
    z-index: 1;
}

.flip-bottom {
    z-index: 2;
}


/* Simplified Structure for robustness */
.flip-digit {
    position: relative;
    width: 50px;
    height: 70px;
    background: #222;
    border-radius: 6px;
    color: #fff;
    font-size: 2.2rem;
    line-height: 70px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Green tint for hours/mins */
.flip-digit.green-tint {
    color: var(--accent-green);
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.clock-group {
    display: flex;
    gap: 4px;
}

.clock-divider {
    font-size: 2rem;
    color: #444;
    animation: blink 1s infinite;
}

/* AM/PM Badge */
.clock-ampm-badge {
    background: #333;
    color: #aaa;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 10px;
}

.clock-ampm-badge.active {
    color: #fff;
    background: var(--accent-green);
    color: #000;
}

/* Animation classes */
.flip-animate {
    animation: flip 0.6s ease-in-out;
}

@keyframes flip {
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(-180deg);
    }
}

/* Refined Flip Digit with Split Line */
.flip-digit {
    position: relative;
    width: 50px;
    height: 70px;
    background: #202020;
    border-radius: 6px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 70px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #333;
    overflow: hidden;
    perspective: 400px;
}

/* The Horizontal Split Line */
.flip-digit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.flip-digit.green-tint {
    color: var(--accent-green);
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

/* Update Flip Digit for Seconds Width */
.flip-digit {
    width: 35px;
    /* Reduced from 50px */
    height: 55px;
    /* Reduced from 70px */
    font-size: 1.8rem;
    /* Reduced from 2.5rem */
    line-height: 55px;
}

.clock-divider {
    font-size: 1.5rem;
}

.flip-clock {
    gap: 8px;
    /* Reduced gap */
}

/* ========================================
   LIGHT MODE FIXES
   ======================================== */
[data-theme='light'] .bento-card.glass {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}