/* OrvenCoach — 20-premium-design.css */
/* Senior Designer Overhaul: Typography, Spacing, Components, Pages */
/* @import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"; */

/* ═══════════════════════════════════════════════════════
   SECTION 1: DESIGN TOKENS UPGRADE
      Premium color refinements + extended type scale
      ═══════════════════════════════════════════════════════ */

:root {
    /* Premium Typography Scale */
    --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

    /* Type Scale (Major Third: 1.25) */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;
    --text-4xl:  38px;
    --text-5xl:  48px;

    /* Font Weights */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extrabold:800;

    /* Line Heights */
    --lh-tight:   1.2;
    --lh-snug:    1.35;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;

    /* Letter Spacing */
    --ls-tight:  -0.03em;
    --ls-normal: -0.01em;
    --ls-wide:    0.04em;
    --ls-wider:   0.08em;
    --ls-widest:  0.12em;

    /* Premium Shadows — Refined depth */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
    --shadow-xl:  0 16px 60px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.45);
    --shadow-gold: 0 4px 20px rgba(196,153,59,0.25), 0 0 0 1px rgba(196,153,59,0.15);

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

    /* Refined Border Radii */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl:28px;
    --radius-3xl:36px;

    /* Glass morphism */
    --glass-bg: rgba(22,27,34,0.85);
    --glass-border: rgba(255,255,255,0.06);
    --glass-blur: blur(20px);
}

/* ═══════════════════════════════════════════════════════
   SECTION 2: GLOBAL BASE — Typography & Body
   ═══════════════════════════════════════════════════════ */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    color: var(--text-primary);
    background: var(--bg-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
    margin: 0;
}

p {
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}

/* Selection */
::selection {
    background: rgba(196,153,59,0.25);
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════
   SECTION 3: SIDEBAR — Premium Navigation
   ═══════════════════════════════════════════════════════ */

#sidebar {
    background: linear-gradient(180deg,
                                    rgba(13,17,23,0.98) 0%,
                                    rgba(16,21,28,0.98) 100%);
    border-right: 1px solid rgba(196,153,59,0.08);
    backdrop-filter: var(--glass-blur);
    box-shadow: 4px 0 32px rgba(0,0,0,0.4);
}

/* Sidebar header / logo area */
#sidebar .sidebar-logo,
#sidebar .brand,
#sidebar [class*="logo"] {
    padding: var(--sp-6) var(--sp-5);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: var(--sp-3);
}

/* Nav items */
#sidebar .nav-item,
#sidebar a,
#sidebar [class*="nav-link"],
#sidebar button.nav-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-4);
    margin: 2px var(--sp-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--text-secondary);
    transition: all 150ms ease;
    border: 1px solid transparent;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
}

#sidebar .nav-item:hover,
#sidebar a:hover,
#sidebar button.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.06);
}

#sidebar .nav-item.active,
#sidebar .nav-item[class*="active"],
#sidebar a.active,
#sidebar button.nav-link.active {
    color: var(--gold-light);
    background: linear-gradient(135deg,
                                    rgba(196,153,59,0.12) 0%,
                                    rgba(196,153,59,0.05) 100%);
    border-color: rgba(196,153,59,0.2);
    box-shadow: inset 0 1px 0 rgba(196,153,59,0.1),
                0 2px 8px rgba(196,153,59,0.08);
}

/* Nav icons */
#sidebar .nav-item img,
#sidebar .nav-item svg,
#sidebar .nav-item [class*="icon"] {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    flex-shrink: 0;
}

#sidebar .nav-item.active img,
#sidebar .nav-item.active svg {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(196,153,59,0.4));
}

/* Settings at bottom */
#sidebar #nav-settings,
#sidebar .nav-settings {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════
   SECTION 4: TOP HEADER BAR
   ═══════════════════════════════════════════════════════ */

#app-header,
.app-header,
header.main-header {
    background: rgba(13,17,23,0.95);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 1px 0 rgba(196,153,59,0.06),
                0 2px 16px rgba(0,0,0,0.3);
    height: var(--header-h);
}

/* Logo in header */
#app-header .brand-name,
#app-header [class*="logo-text"],
.app-header .app-name {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    background: linear-gradient(135deg, #fff 0%, var(--gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Month selector */
.global-month-selector {
    background: rgba(22,27,34,0.9);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: 6px var(--sp-4);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    box-shadow: var(--shadow-sm);
}

.global-month-selector button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all 150ms ease;
    font-size: 16px;
}

.global-month-selector button:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.08);
}

.global-month-selector .month-label {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--text-primary);
    min-width: 110px;
    text-align: center;
}

.global-month-selector .period-tabs {
    display: flex;
    gap: 2px;
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.global-month-selector .period-tab {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
    background: transparent;
    border: none;
}

.global-month-selector .period-tab.active,
.global-month-selector .period-tab[class*="active"] {
    background: rgba(196,153,59,0.15);
    color: var(--gold-light);
    box-shadow: 0 1px 4px rgba(196,153,59,0.15);
}

/* ═══════════════════════════════════════════════════════
   SECTION 5: CARDS — Premium Card System
   ═══════════════════════════════════════════════════════ */

/* Base card */
.card,
[class*="-card"],
.stat-block,
.summary-card,
.expense-card,
.budget-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 200ms ease, border-color 200ms ease;
    position: relative;
    overflow: hidden;
}

.card::before,
[class*="-card"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
                                    transparent 0%,
                                    rgba(255,255,255,0.08) 50%,
                                    transparent 100%);
    pointer-events: none;
}

.card:hover,
[class*="-card"]:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(255,255,255,0.1);
}

/* Summary / Overview Card */
.overview-card,
.summary-panel,
#summary-card {
    background: linear-gradient(135deg,
                                    rgba(22,27,34,1) 0%,
                                    rgba(18,23,30,1) 100%);
    border: 1px solid rgba(196,153,59,0.15);
    border-radius: var(--radius-xl);
    padding: var(--sp-8);
    box-shadow: var(--shadow-lg),
                inset 0 1px 0 rgba(255,255,255,0.05),
                0 0 0 1px rgba(196,153,59,0.05);
}

/* Stat numbers */
.stat-value,
.amount,
.total-amount,
[class*="amount"],
.currency-value {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-label,
.label,
[class*="-label"] {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Income / Expense / Remaining colors */
.income-value, .venit, [class*="income"] .amount { color: var(--income); }
.expense-value, .cheltuiala, [class*="expense"] .amount { color: var(--danger); }
.remaining-value, .ramas, [class*="remaining"] .amount { color: var(--success); }

/* ═══════════════════════════════════════════════════════
   SECTION 6: BUTTONS — Premium Button System
   ═══════════════════════════════════════════════════════ */

/* Primary button */
button,
.btn,
[class*="btn-"],
input[type="button"],
input[type="submit"] {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 150ms ease;
    border-radius: var(--radius-md);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Primary CTA button */
.btn-primary,
.btn-cta,
button[class*="primary"],
.action-btn {
    background: linear-gradient(135deg, var(--accent) 0%, #1a6b8a 100%);
    color: #fff;
    padding: 12px var(--sp-6);
    box-shadow: 0 4px 16px rgba(46,134,171,0.3),
                inset 0 1px 0 rgba(255,255,255,0.15);
}

.btn-primary:hover,
.btn-cta:hover {
    background: linear-gradient(135deg, #3a9bc0 0%, #2378a0 100%);
    box-shadow: 0 6px 24px rgba(46,134,171,0.4),
                inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(46,134,171,0.3);
}

/* Gold / Premium button */
.btn-gold,
.btn-premium {
    background: linear-gradient(135deg, var(--gold) 0%, #a0792e 100%);
    color: #fff;
    padding: 12px var(--sp-6);
    box-shadow: 0 4px 16px rgba(196,153,59,0.3),
                inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-gold:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    box-shadow: 0 6px 24px rgba(196,153,59,0.4);
    transform: translateY(-1px);
}

/* Secondary / Ghost button */
.btn-secondary,
.btn-ghost {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    padding: 10px var(--sp-5);
}

.btn-secondary:hover,
.btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
    color: var(--text-primary);
}

/* Danger button */
.btn-danger {
    background: rgba(231,76,60,0.12);
    border: 1px solid rgba(231,76,60,0.25);
    color: var(--danger);
    padding: 10px var(--sp-5);
}

.btn-danger:hover {
    background: rgba(231,76,60,0.2);
    border-color: rgba(231,76,60,0.4);
}

/* Icon button */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

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

/* FAB (Floating Action Button) */
#fab-btn,
.fab,
[class*="fab"] {
    background: linear-gradient(135deg, var(--accent) 0%, #1a6b8a 100%);
    box-shadow: 0 8px 32px rgba(46,134,171,0.4),
                0 4px 12px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.2);
    border-radius: var(--radius-full);
    width: var(--fab-size);
    height: var(--fab-size);
    border: none;
    color: white;
    font-size: 24px;
    transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#fab-btn:hover,
.fab:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 40px rgba(46,134,171,0.5),
                0 6px 16px rgba(0,0,0,0.4);
}

#fab-btn:active,
.fab:active {
    transform: scale(0.96);
}

/* ═══════════════════════════════════════════════════════
   SECTION 7: FORM ELEMENTS — Inputs, Selects, Labels
   ═══════════════════════════════════════════════════════ */

/* Input wrapper */
.form-group,
.input-group,
[class*="form-field"] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

/* Labels */
label,
.form-label,
.input-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Text inputs, textareas, selects */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--text-primary);
    background: rgba(22,27,34,0.8);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px var(--sp-4);
    width: 100%;
    transition: all 150ms ease;
    outline: none;
    appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: rgba(46,134,171,0.6);
    background: rgba(22,27,34,1);
    box-shadow: 0 0 0 3px rgba(46,134,171,0.12),
                0 2px 8px rgba(0,0,0,0.2);
}

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

/* Select arrow */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238B949E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Range slider */
input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    border-radius: 99px;
    background: var(--border);
    outline: none;
    padding: 0;
    width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(46,134,171,0.4);
    transition: all 150ms ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(46,134,171,0.5);
}

/* ═══════════════════════════════════════════════════════
   SECTION 8: PAGE TITLES & SECTION HEADERS
   ═══════════════════════════════════════════════════════ */

/* Page title (e.g. "PANOU", "CHELTUIELI") */
.page-title,
.tab-title,
.section-title,
h1.title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text-primary);
    text-transform: uppercase;
    margin-bottom: var(--sp-6);
    position: relative;
    padding-bottom: var(--sp-4);
}

.page-title::after,
.tab-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
    border-radius: 99px;
}

/* Section headings */
.section-header,
[class*="section-head"],
.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.section-header h2,
.section-header h3,
.widget-title {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════
   SECTION 9: LIST ITEMS — Expense/Transaction Rows
   ═══════════════════════════════════════════════════════ */

.list-item,
.expense-item,
.transaction-item,
[class*="-row"],
[class*="expense-row"] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 12px var(--sp-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all 150ms ease;
    cursor: pointer;
}

.list-item:hover,
.expense-item:hover,
.transaction-item:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}

/* Category icon */
.category-icon,
.item-icon,
[class*="-icon"] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Item details */
.item-name,
.expense-name,
.transaction-name {
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    line-height: 1.3;
}

.item-date,
.expense-date,
.transaction-date,
.item-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: var(--ls-wide);
}

/* Amounts in lists */
.item-amount,
.expense-amount,
.transaction-amount {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

.item-amount.negative,
[class*="negative"] { color: var(--danger); }
.item-amount.positive,
[class*="positive"] { color: var(--success); }

/* ═══════════════════════════════════════════════════════
   SECTION 10: PROGRESS BARS & CHARTS
   ═══════════════════════════════════════════════════════ */

/* Progress bar container */
.progress-bar,
[class*="progress-track"],
.budget-track {
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}

/* Progress fill */
.progress-fill,
[class*="progress-fill"],
.budget-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
                                    transparent 0%,
                                    rgba(255,255,255,0.2) 50%,
                                    transparent 100%);
    border-radius: inherit;
}

/* Progress colors */
.progress-fill.good,
.progress-fill[data-level="good"] { background: linear-gradient(90deg, var(--success), #34d058); }
.progress-fill.warning,
.progress-fill[data-level="warning"] { background: linear-gradient(90deg, var(--warning), #f5a623); }
.progress-fill.danger,
.progress-fill[data-level="danger"] { background: linear-gradient(90deg, var(--danger), #ff6b6b); }
.progress-fill.accent,
.progress-fill[data-level="accent"] { background: linear-gradient(90deg, var(--accent), #4ba3c3); }

/* Donut / Circle chart */
.donut-chart,
.circle-chart,
[class*="donut"],
[class*="circular-"] {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

/* ═══════════════════════════════════════════════════════
   SECTION 11: MODALS & OVERLAYS
   ═══════════════════════════════════════════════════════ */

/* Overlay backdrop */
.modal-overlay,
.overlay,
[class*="-overlay"] {
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
}

/* Modal container */
.modal,
.dialog,
[class*="-modal"],
[class*="-dialog"] {
    background: var(--bg-secondary);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl),
                inset 0 1px 0 rgba(255,255,255,0.05);
    padding: var(--sp-8);
    position: relative;
    overflow: hidden;
}

.modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
                                    transparent 0%,
                                    rgba(255,255,255,0.1) 30%,
                                    rgba(196,153,59,0.15) 50%,
                                    rgba(255,255,255,0.1) 70%,
                                    transparent 100%);
}

/* Modal header */
.modal-header,
[class*="-header"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.modal-title,
[class*="-title"] {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

/* Close button */
.close-btn,
.modal-close,
button[class*="close"] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 150ms ease;
    font-size: 14px;
    padding: 0;
}

.close-btn:hover,
.modal-close:hover {
    background: rgba(231,76,60,0.15);
    border-color: rgba(231,76,60,0.3);
    color: var(--danger);
}

/* ═══════════════════════════════════════════════════════
   SECTION 12: BOTTOM NAV (Mobile)
   ═══════════════════════════════════════════════════════ */

#bottom-nav,
.bottom-nav {
    background: rgba(13,17,23,0.97);
    backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4),
                0 -1px 0 rgba(196,153,59,0.06);
}

/* Bottom nav items */
#bottom-nav .nav-item,
.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px var(--sp-3);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    transition: all 150ms ease;
    cursor: pointer;
    border: 1px solid transparent;
}

#bottom-nav .nav-item:hover,
.bottom-nav .nav-item:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
}

#bottom-nav .nav-item.active,
.bottom-nav .nav-item.active {
    color: var(--gold-light);
    background: rgba(196,153,59,0.08);
    border-color: rgba(196,153,59,0.15);
}

#bottom-nav .nav-item.active img,
#bottom-nav .nav-item.active svg,
.bottom-nav .nav-item.active .nav-icon {
    filter: drop-shadow(0 0 4px rgba(196,153,59,0.5));
}

/* ═══════════════════════════════════════════════════════
   SECTION 13: BADGES & TAGS
   ═══════════════════════════════════════════════════════ */

.badge,
.tag,
.chip,
[class*="-badge"],
[class*="-tag"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-success { background: rgba(39,174,96,0.15); color: #4ade80; border: 1px solid rgba(39,174,96,0.25); }
.badge-warning { background: rgba(243,156,18,0.15); color: #fbbf24; border: 1px solid rgba(243,156,18,0.25); }
.badge-danger  { background: rgba(231,76,60,0.15); color: #f87171; border: 1px solid rgba(231,76,60,0.25); }
.badge-accent  { background: rgba(46,134,171,0.15); color: #60b8d4; border: 1px solid rgba(46,134,171,0.25); }
.badge-gold    { background: rgba(196,153,59,0.15); color: var(--gold-light); border: 1px solid rgba(196,153,59,0.25); }

/* ═══════════════════════════════════════════════════════
   SECTION 14: TABS — Sub-navigation
   ═══════════════════════════════════════════════════════ */

.tabs-nav,
.tab-list,
[class*="tabs-"] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.05);
}

.tab-btn,
.tab-link,
[class*="tab-btn"],
[class*="tab-item"] {
    padding: 8px var(--sp-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
}

.tab-btn.active,
.tab-btn[class*="active"],
.tab-link.active {
    color: var(--text-primary);
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.08);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════
   SECTION 15: AUTH PAGE — Premium Login/Register
   ═══════════════════════════════════════════════════════ */

/* Auth page layout */
#auth-page,
.auth-page,
.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-primary);
}

/* Left panel — branding */
.auth-branding,
.login-left,
#auth-left {
    background: linear-gradient(160deg,
                                    rgba(13,17,23,1) 0%,
                                    rgba(16,22,30,1) 60%,
                                    rgba(20,25,35,1) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--sp-12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-branding::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse,
                                    rgba(196,153,59,0.06) 0%,
                                    transparent 70%);
    pointer-events: none;
}

.auth-branding::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 50%;
    height: 50%;
    background: radial-gradient(ellipse,
                                    rgba(46,134,171,0.06) 0%,
                                    transparent 70%);
    pointer-events: none;
}

/* Right panel — form */
.auth-form-panel,
.login-right,
#auth-right {
    background: rgba(22,27,34,0.5);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-12);
}

.auth-form-container {
    width: 100%;
    max-width: 400px;
}

/* Auth logo */
.auth-logo {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(196,153,59,0.2);
    box-shadow: var(--shadow-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-6);
}

.auth-title {
    font-size: var(--text-3xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
    margin-bottom: 4px;
}

.auth-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    margin-bottom: var(--sp-8);
}

/* Google button */
.google-btn,
button[class*="google"],
.oauth-btn {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    padding: 12px var(--sp-5);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    cursor: pointer;
    transition: all 150ms ease;
    margin-bottom: var(--sp-5);
}

.google-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    box-shadow: var(--shadow-sm);
}

/* Divider */
.auth-divider,
.divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.07);
}

/* Auth inputs */
.auth-input {
    background: rgba(13,17,23,0.8);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    padding: 13px var(--sp-4);
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: all 150ms ease;
    outline: none;
}

.auth-input:focus {
    border-color: rgba(46,134,171,0.5);
    background: rgba(13,17,23,1);
    box-shadow: 0 0 0 3px rgba(46,134,171,0.1);
}

/* Auth submit button */
.auth-btn,
button.auth-submit,
#auth-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--accent) 0%, #1a6b8a 100%);
    border: none;
    border-radius: var(--radius-md);
    padding: 14px var(--sp-6);
    color: white;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 150ms ease;
    box-shadow: 0 4px 16px rgba(46,134,171,0.3);
    margin-top: var(--sp-5);
}

.auth-btn:hover {
    background: linear-gradient(135deg, #3a9bc0 0%, #2378a0 100%);
    box-shadow: 0 6px 24px rgba(46,134,171,0.4);
    transform: translateY(-1px);
}

/* Auth link */
.auth-link-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--sp-5);
}

.auth-link-text a,
.auth-link-text button {
    color: var(--accent);
    font-weight: var(--fw-medium);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
}

.auth-link-text a:hover {
    color: #4ba3c3;
    text-decoration: underline;
}

/* Security badges */
.auth-security {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: var(--text-xs);
    color: var(--text-muted);
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════
   SECTION 16: LANDING PAGE — Premium Redesign
   ═══════════════════════════════════════════════════════ */

/* Landing nav */
nav.landing-nav,
.landing-header,
header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(240,235,226,0.9);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-8);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06),
                0 4px 20px rgba(0,0,0,0.06);
}

/* Landing nav links */
nav.landing-nav a,
.landing-header .nav-link {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: rgba(0,0,0,0.55);
    text-decoration: none;
    padding: 6px var(--sp-4);
    border-radius: var(--radius-sm);
    transition: all 150ms ease;
}

nav.landing-nav a:hover,
.landing-header .nav-link:hover {
    color: rgba(0,0,0,0.85);
    background: rgba(0,0,0,0.05);
}

/* CTA button in nav */
nav.landing-nav .cta-nav,
.landing-header .btn-open-app {
    background: #1a1a1a;
    color: #f5f0e8;
    padding: 8px var(--sp-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 150ms ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

nav.landing-nav .cta-nav:hover {
    background: #000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}

/* Hero section */
section.hero {
    padding-top: 120px;
    min-height: 100vh;
    background: #f0ebe2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Problem/Solution/Features sections */
section#problem,
section#solution,
section#features,
section#advisors,
section#vision,
section#pricing,
section.sec {
    padding: 100px var(--sp-8);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Section labels */
section .sec-label,
section [class*="sec-tag"],
section .overline {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: #8a7960;
    margin-bottom: var(--sp-4);
    display: block;
}

/* Section headings on landing */
section h2.sec-heading,
section .section-h {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #0d0d0d;
    margin-bottom: var(--sp-6);
}

/* Feature cards */
.feature-card,
.feat-item,
[class*="feature-"] {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-xl);
    padding: var(--sp-8);
    backdrop-filter: blur(10px);
    transition: all 200ms ease;
}

.feature-card:hover {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* Pricing cards */
.pricing-card,
[class*="price-card"],
.plan-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-2xl);
    padding: var(--sp-8);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    transition: all 200ms ease;
}

.pricing-card.featured,
.pricing-card[data-featured="true"] {
    background: #0d0d0d;
    color: #f5f0e8;
    border-color: transparent;
    box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════
   SECTION 17: LIGHT MODE REFINEMENTS
   ═══════════════════════════════════════════════════════ */

[data-theme="light"] {
    --glass-bg: rgba(255,255,255,0.85);
    --glass-border: rgba(0,0,0,0.08);
}

[data-theme="light"] #sidebar {
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    border-right: 1px solid rgba(0,0,0,0.06);
    box-shadow: 2px 0 16px rgba(0,0,0,0.05);
}

[data-theme="light"] #sidebar .nav-item {
    color: #5a6475;
}

[data-theme="light"] #sidebar .nav-item:hover {
    background: rgba(0,0,0,0.04);
    color: #1e2530;
}

[data-theme="light"] #sidebar .nav-item.active {
    background: linear-gradient(135deg,
                                    rgba(196,153,59,0.1) 0%,
                                    rgba(196,153,59,0.04) 100%);
    color: #8a6420;
}

[data-theme="light"] #app-header,
[data-theme="light"] .app-header {
    background: rgba(255,255,255,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04),
                0 2px 12px rgba(0,0,0,0.05);
}

[data-theme="light"] .card,
[data-theme="light"] [class*="-card"] {
    background: #fff;
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select {
    background: #fff;
    border-color: #d0d7de;
    color: #1e2530;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(46,134,171,0.1);
}

[data-theme="light"] #bottom-nav {
    background: rgba(255,255,255,0.97);
    border-top: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════════
   SECTION 18: DASHBOARD (PANOU) PAGE
   ═══════════════════════════════════════════════════════ */

/* Main content area */
#main-content,
.main-content,
.content-area {
    padding: var(--sp-6) var(--sp-8);
}

/* Dashboard grid */
.dashboard-grid,
.panou-grid {
    display: grid;
    gap: var(--sp-5);
}

/* Summary hero card */
#period-summary,
.period-summary,
.summary-hero {
    background: linear-gradient(135deg,
                                    rgba(22,27,34,1) 0%,
                                    rgba(18,22,30,1) 100%);
    border: 1px solid rgba(196,153,59,0.15);
    border-radius: var(--radius-xl);
    padding: var(--sp-8);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg),
                0 0 60px rgba(196,153,59,0.04);
}

#period-summary::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(ellipse,
                                    rgba(196,153,59,0.05) 0%,
                                    transparent 70%);
    pointer-events: none;
}

/* Stats row */
.stats-row,
.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}

.stat-item {
    text-align: left;
}

.stat-item .stat-label {
    font-size: var(--text-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

.stat-item .stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════
   SECTION 19: MICRO INTERACTIONS & ANIMATIONS
   ═══════════════════════════════════════════════════════ */

/* Smooth page transitions */
.tab-panel,
[class*="tab-content"],
.page-panel {
    animation: fadeIn 200ms ease-out;
}

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

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg,
                                    rgba(255,255,255,0.04) 0%,
                                    rgba(255,255,255,0.08) 50%,
                                    rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.pulse { animation: pulse 2s infinite; }

/* ═══════════════════════════════════════════════════════
   SECTION 20: SPECIFIC APP ELEMENT OVERRIDES
      (matches actual element IDs/classes in the codebase)
      ═══════════════════════════════════════════════════════ */

/* Header brand */
#app-brand,
.app-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

#app-brand img,
.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

#brand-name,
.brand-name {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-transform: uppercase;
}

/* Sidebar nav buttons */
#nav-dashboard,
#nav-expenses,
#nav-debts,
#nav-goals,
#nav-analytics,
#nav-settings {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-md);
    margin-bottom: 2px;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* Period buttons */
#btn-luna,
#btn-trimestru,
#btn-an,
.period-btn {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 6px;
    transition: all 150ms ease;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
}

#btn-luna.active,
#btn-trimestru.active,
#btn-an.active,
.period-btn.active {
    background: rgba(196,153,59,0.15);
    color: var(--gold-light);
    border-color: rgba(196,153,59,0.25);
}

/* Section header labels e.g. "// NORD STARS" */
.widget-label,
[class*="sec-label"],
.dash-section-title {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Currency amounts */
.chf-amount,
[class*="chf"],
.currency {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.02em;
}

/* AI chat avatar */
#ai-avatar,
.ai-avatar {
    border: 2px solid rgba(196,153,59,0.3);
    box-shadow: 0 0 16px rgba(196,153,59,0.2);
    border-radius: var(--radius-full);
}

/* Notification dot */
.notif-dot,
[class*="notif-"] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(46,134,171,0.6);
    animation: pulse 2s infinite;
}

/* Toast / Alert */
.toast,
.alert,
[class*="-toast"],
[class*="-alert"] {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
}

/* Tooltip */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1f28;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--shadow-md);
    z-index: 9999;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   SECTION 21: MANUAL PAGE
   ═══════════════════════════════════════════════════════ */

.manual-page,
#manual-content,
.help-page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--sp-12) var(--sp-8);
}

.manual-page h1,
.manual-h1 {
    font-size: var(--text-5xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: var(--sp-4);
}

.manual-page h2,
.manual-h2 {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.manual-page h3,
.manual-h3 {
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
    color: var(--text-primary);
}

.manual-page p {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--sp-4);
}

.manual-page ul,
.manual-page ol {
    padding-left: var(--sp-6);
    margin-bottom: var(--sp-4);
}

.manual-page li {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}

.manual-page code,
.inline-code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--gold-light);
}

.manual-page pre {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    overflow-x: auto;
    margin-bottom: var(--sp-6);
}

.manual-page blockquote {
    border-left: 3px solid var(--gold);
    padding-left: var(--sp-5);
    margin: var(--sp-6) 0;
    color: var(--text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   SECTION 22: RESPONSIVE POLISH
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
          --text-4xl: 32px;
          --text-3xl: 24px;
          --text-2xl: 20px;
    }

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

    .auth-page,
    #auth-page {
          grid-template-columns: 1fr;
    }

    .auth-branding,
    .login-left {
          display: none;
    }

    .auth-form-panel,
    .login-right {
          border-left: none;
          padding: var(--sp-8) var(--sp-5);
    }

    #main-content,
    .main-content {
          padding: var(--sp-4);
    }
}

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

/* END — OrvenCoach 20-premium-design.css */


/* ═══════════════════════════════════════════════════════
   SECTION 23: CRITICAL OVERRIDES
   Force premium fonts & spacing on app elements
═══════════════════════════════════════════════════════ */

/* Override any existing font rules for main app UI */
#app,
#main-content,
#sidebar,
.tab-content,
[id^="tab-"] {
     font-family: var(--font-sans) !important;
}

/* Better page title styling — override CRYS/TOL aesthetic */
.tab-title h1,
.page-title,
[class*="tab-"] > h1 {
     font-family: var(--font-sans) !important;
     letter-spacing: -0.04em !important;
}

/* Override stat numbers to use tabular numerics */
.amount-val,
[class*="-amount"],
[class*="-value"],
[class*="-total"] {
     font-variant-numeric: tabular-nums;
     font-feature-settings: "tnum";
}

/* Sidebar nav link improvements */
#sidebar .nav-link,
#sidebar button[id^="nav-"] {
     letter-spacing: 0.06em;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     padding: 10px 16px;
     border-radius: 10px;
     margin: 1px 8px;
     transition: all 150ms ease;
}

/* Sidebar active state */
#sidebar button[id^="nav-"].active,
#sidebar [class*="nav-"].active,
#sidebar .nav-link.active {
     background: linear-gradient(135deg, rgba(196,153,59,0.14) 0%, rgba(196,153,59,0.05) 100%) !important;
     color: var(--gold-light) !important;
     border: 1px solid rgba(196,153,59,0.22) !important;
}

/* Header improvements */
#app-header,
header#header {
     height: 58px;
     display: flex;
     align-items: center;
     padding: 0 20px;
     gap: 16px;
}

/* Month selector alignment */
#month-selector,
.global-month-selector,
#global-month-selector {
     display: flex;
     align-items: center;
     gap: 8px;
     font-family: var(--font-sans);
}

/* Period tab active */
#btn-luna.active,
#btn-trimestru.active,
#btn-an.active,
[id^="btn-"].active {
     background: rgba(196,153,59,0.15) !important;
     color: var(--gold-light) !important;
     border-radius: 6px;
}

/* Bottom nav icon label spacing */
#bottom-nav .nav-label {
     font-size: 9px;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     font-weight: 700;
}

/* Card section headers */
.widget-header-text,
.section-label,
[class*="header-lbl"] {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--text-muted);
}

/* Transaction rows */
.expense-row,
.transaction-row {
     padding: 10px 12px;
     border-radius: 10px;
     transition: background 150ms ease;
}

.expense-row:hover,
.transaction-row:hover {
     background: rgba(255,255,255,0.03);
}

/* Progress bar heights */
.budget-progress,
.category-progress {
     height: 4px !important;
     border-radius: 99px !important;
}

/* FAB button refinement */
#fab-add,
#fab-btn,
.fab-button {
     border-radius: 50% !important;
     box-shadow: 0 8px 32px rgba(46,134,171,0.4) !important;
}

/* AI chat panel */
#chat-panel,
.chat-container,
[class*="chat-"] {
     border-radius: var(--radius-xl) var(--radius-xl) 0 0;
     border-top: 1px solid rgba(196,153,59,0.12);
}

/* Settings page */
#settings-panel,
.settings-container {
     max-width: 680px;
     margin: 0 auto;
}

/* Goals page phase nodes */
.phase-node {
     border-radius: var(--radius-lg) !important;
     transition: all 200ms ease !important;
}

.phase-node:hover {
     transform: translateY(-2px) !important;
     box-shadow: var(--shadow-md) !important;
}

/* Analytics charts container */
.chart-container,
[class*="chart-wrap"] {
     border-radius: var(--radius-lg);
     overflow: hidden;
}

/* Input focus ring refinement */
input:focus,
select:focus,
textarea:focus {
     outline: none !important;
     border-color: rgba(46,134,171,0.6) !important;
     box-shadow: 0 0 0 3px rgba(46,134,171,0.1) !important;
}

/* Table / grid alignment */
.data-table,
[role="table"] {
     border-collapse: collapse;
     width: 100%;
}

.data-table th {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--text-muted);
     padding: 8px 12px;
     border-bottom: 1px solid var(--border);
}

.data-table td {
     padding: 10px 12px;
     border-bottom: 1px solid rgba(255,255,255,0.04);
     font-size: 14px;
}

/* OrvenCoach specific - goldline accent below page titles */
.tab-panel > h1:first-child::after,
.content-header > h1::after {
     content: '';
     display: block;
     width: 36px;
     height: 3px;
     background: linear-gradient(90deg, var(--gold), transparent);
     border-radius: 99px;
     margin-top: 10px;
}

/* Dark mode variables consistency */
[data-theme="dark"] .card {
     background: var(--bg-card);
     border-color: rgba(255,255,255,0.06);
}

/* Donut chart text */
.donut-label,
.chart-center-text {
     font-family: var(--font-sans);
     font-weight: var(--fw-bold);
     font-variant-numeric: tabular-nums;
}

/* Debt items */
.debt-item,
.credit-item {
     border-radius: var(--radius-lg);
     padding: var(--sp-5);
     border: 1px solid var(--border);
     background: var(--bg-card);
     transition: all 200ms ease;
}

.debt-item:hover,
.credit-item:hover {
     border-color: rgba(196,153,59,0.2);
     box-shadow: var(--shadow-sm);
}

/* Budget category tags */
.cat-tag,
.category-badge {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 3px 8px;
     border-radius: 99px;
}

/* ═══════════ END 20-premium-design.css ═══════════ */

/* ============================================================
   SECTION 24: CRITICAL UI FIXES — Premium Polish Pass
   Fixes: FAB buttons (shape/color), category pills, modal,
          container overlaps, language selector, spacing
   ============================================================ */

/* ── FAB Button: + Add Expense ─────────────────────────────── */
/* Override crystol/ui2026 beige background */
#fab-btn {
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1a6b8a, #0e4d6b) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 32px rgba(46, 134, 171, 0.45),
    0 2px 8px rgba(0,0,0,0.4) !important;
  border: none !important;
}
#fab-btn:hover {
  background: linear-gradient(135deg, #2196b8, #1a6b8a) !important;
  box-shadow:
    0 12px 40px rgba(46, 134, 171, 0.6),
    0 4px 12px rgba(0,0,0,0.4) !important;
  transform: scale(1.07) translateY(-2px) !important;
}
#fab-btn .fab-icon {
  color: #ffffff !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

/* ── Bot FAB Button: Orven Coach AI ────────────────────────── */
/* Override the golden square — make it a circle */
#fv-fab {
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1c2128, #0d1117) !important;
  border: 2px solid rgba(196, 153, 59, 0.4) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    0 0 0 1px rgba(196,153,59,0.15) !important;
  overflow: hidden !important;
}
#fv-fab:hover {
  border-color: rgba(196, 153, 59, 0.7) !important;
  box-shadow:
    0 12px 40px rgba(196,153,59,0.3),
    0 0 0 1px rgba(196,153,59,0.3) !important;
  transform: scale(1.05) !important;
  background: linear-gradient(135deg, #232b35, #131921) !important;
}
#fv-fab img,
#fv-fab .fab-icon {
  border-radius: 0 !important;
  background: transparent !important;
}

/* ── Category Pills: Expense Modal ─────────────────────────── */
/* Override crystol 0px border-radius and fix text visibility */
.cat-pill {
  border-radius: 12px !important;
  background: rgba(33, 38, 45, 0.9) !important;
  border: 1.5px solid rgba(255,255,255,0.08) !important;
  transition: all 160ms ease !important;
}
.cat-pill:hover {
  border-color: rgba(196, 153, 59, 0.5) !important;
  background: rgba(196, 153, 59, 0.08) !important;
  transform: translateY(-1px) !important;
}
.cat-pill.selected {
  border-color: rgba(196, 153, 59, 0.8) !important;
  background: rgba(196, 153, 59, 0.12) !important;
  box-shadow: 0 0 12px rgba(196,153,59,0.2) !important;
}
.cat-pill .cn {
  color: rgba(255,255,255,0.7) !important;
  font-size: 9px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}
.cat-pill.selected .cn {
  color: #c4993b !important;
}
.cat-pill .ci {
  font-size: 22px !important;
  line-height: 1.1 !important;
}

/* ── Expense Modal Sheet ────────────────────────────────────── */
/* Make modal corners rounded and premium */
.modal-sheet {
  border-radius: 20px 20px 0 0 !important;
  background: #161b22 !important;
  border-top: 1px solid rgba(196, 153, 59, 0.25) !important;
  box-shadow:
    0 -8px 48px rgba(0,0,0,0.6),
    0 -2px 0 rgba(196,153,59,0.15) !important;
}
.modal-overlay {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(8px) !important;
}
.modal-header {
  padding: 20px 20px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.modal-header h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
}

/* ── Amount Field in Modal ──────────────────────────────────── */
.amount-field {
  border-radius: 14px !important;
  background: rgba(33, 38, 45, 0.8) !important;
  border: 1.5px solid rgba(196, 153, 59, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(196,153,59,0.06) !important;
  overflow: hidden !important;
}
.amount-field:focus-within {
  border-color: rgba(196, 153, 59, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(196,153,59,0.12) !important;
}
.big-amount-input {
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
}

/* ── Date & Note Inputs in Modal ────────────────────────────── */
#expense-date,
#expense-note,
.modal-body input[type="date"],
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body textarea {
  border-radius: 10px !important;
  background: rgba(33, 38, 45, 0.8) !important;
  border: 1.5px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
#expense-date:focus,
#expense-note:focus,
.modal-body input:focus,
.modal-body textarea:focus {
  border-color: rgba(196, 153, 59, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(196,153,59,0.1) !important;
  outline: none !important;
}

/* ── Language Selector Buttons ──────────────────────────────── */
/* Fix any overlap or misalignment */
.lang-btn,
[id*="lang"],
[class*="lang-"],
.settings-panel button[onclick*="setLang"],
button[data-lang] {
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── Header Language Switcher (DE / EN / RO) ────────────────── */
#lang-switcher,
.lang-switcher,
.header-lang {
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#lang-switcher button,
.lang-switcher button,
.header-lang button {
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
  border: none !important;
  transition: all 150ms ease !important;
  min-width: 32px !important;
}
#lang-switcher button.active,
.lang-switcher button.active,
.header-lang button.active,
.lang-active {
  background: rgba(196, 153, 59, 0.2) !important;
  color: #c4993b !important;
}

/* ── Sidebar Nav: Fix icon/text alignment ───────────────────── */
.nav-link,
.sidebar-nav a,
#sidebar nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.nav-icon,
.sidebar-nav .icon {
  flex-shrink: 0 !important;
  width: 24px !important;
  text-align: center !important;
}
.nav-label,
.sidebar-nav .label {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Card Container Margins ─────────────────────────────────── */
/* Ensure cards don't overlap their containers */
.card,
.summary-card,
.stat-card,
.budget-card,
.goal-card,
[class*="-card"] {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ── Form Group Label Spacing ───────────────────────────────── */
.form-group {
  margin-bottom: 16px !important;
}
.form-label {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ── Modal Close Button ─────────────────────────────────────── */
.modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  flex-shrink: 0 !important;
}
.modal-close-btn:hover {
  background: rgba(255,59,48,0.15) !important;
  border-color: rgba(255,59,48,0.3) !important;
  color: #ff3b30 !important;
}

/* ── Save Button in Modal ───────────────────────────────────── */
.btn-save,
#btn-save-expense,
button[onclick*="saveExpense"] {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #c4993b, #a07320) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(196,153,59,0.3) !important;
}
.btn-save:hover,
#btn-save-expense:hover {
  background: linear-gradient(135deg, #d4a940, #b07d28) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(196,153,59,0.4) !important;
}

/* ── Cancel Button in Modal ─────────────────────────────────── */
.btn-cancel,
button[onclick*="closeModal"] {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.btn-cancel:hover,
button[onclick*="closeModal"]:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

/* ── Toggle Switch ──────────────────────────────────────────── */
.toggle-track,
input[type="checkbox"][role="switch"] + *,
.toggle {
  border-radius: 99px !important;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(196,153,59,0.3) !important;
  border-radius: 99px !important;
}

/* End Section 24 */

/* ============================================================
   SECTION 25: CRITICAL FIXES PASS 2
   - Fix body background for landing/login pages (fallback chain)
   - Fix bot FAB logo: clip to circle, fill the button
   - Fix landing page nav/text symbol overlap
   ============================================================ */

/* ── Body background: Use fallback chain so landing page still works ── */
/* The landing page defines --bg but not --bg-primary.
   App pages define --bg-primary. This fallback chain works for both. */
body {
  background-color: var(--bg-primary, var(--bg, #0d1117)) !important;
  color: var(--text-primary, var(--ink, #ffffff)) !important;
}

/* ── Bot FAB Logo: Clip image to circle, fill entire button ─── */
/* The img inside #fv-fab has square corners visible — clip it */
#fv-fab {
  overflow: hidden !important;
  padding: 0 !important;
}
#fv-fab img,
#fv-fab .fab-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  background: transparent !important;
}

/* ── Landing Page: Nav overlap fixes ───────────────────────── */
/* Fix text overlapping nav icons/symbols in landing page */
.nav-links,
.landing-nav .links,
nav .links,
header nav ul,
.site-nav ul,
.main-nav ul {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.nav-links li,
.landing-nav .links li,
nav .links li,
header nav ul li,
.site-nav ul li {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: visible !important;
}

.nav-links a,
.landing-nav .links a,
nav .links a,
header nav ul a,
.site-nav ul a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Landing page specific: fix hero/content overlaps */
.canvas,
.landing-canvas,
.hero-section,
[class*="hero"],
[class*="section"] {
  position: relative !important;
  overflow: hidden !important;
}

/* Fix landing page header/nav bar overlap */
.hud,
.site-header,
.landing-header,
header.fixed,
header[style*="fixed"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Fix nav item text not overlapping icons */
.nav-item,
.menu-item,
li[class*="nav"] {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Fix any icon + text inline overlap pattern */
.icon-label,
.nav-icon + span,
.nav-icon + .label,
[class*="icon"] + [class*="text"],
[class*="icon"] + span {
  margin-left: 6px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* Ensure no absolute/relative position leakage on landing */
.hud * {
  box-sizing: border-box !important;
}

/* Fix landing page nav links spacing */
.hud nav,
.hud .nav,
.hud [class*="nav"] {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

/* ── App page: ensure app-only body overrides stay dark ─────── */
/* When #sidebar or #app-header is present, force dark theme */
#sidebar ~ * body,
body:has(#sidebar),
body:has(#app-header) {
  background-color: #0d1117 !important;
  color: #ffffff !important;
}

/* End Section 25 */

/* ============================================================
   SECTION 26: EMERGENCY REVERT — Landing page .hud fix
   The .hud on landing page is a decorative corner-label overlay,
   NOT the app navigation. Revert Section 25's nav overrides that
   broke it. Only target app-specific elements precisely.
   ============================================================ */

/* ── Revert .hud to its original non-flexed state ──────────── */
/* Landing page .hud is an overlay with absolute corner labels */
.hud {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 100 !important;
  background: transparent !important;
  overflow: visible !important;
  align-items: unset !important;
  flex-wrap: unset !important;
  gap: unset !important;
}

/* ── Revert .hud nav — these are actual nav elements ────────── */
/* On landing, .hud does NOT contain nav. But if it does, restore */
.hud nav,
.hud .nav {
  display: revert !important;
  align-items: revert !important;
  gap: revert !important;
  flex-wrap: revert !important;
  overflow: revert !important;
}

/* ── Landing page nav (the actual nav) — fix overlap ────────── */
/* The landing page nav is NOT .hud — find actual selectors */
/* Looking at landing HTML: nav is inside header or a separate element */
.crystol-hud,
nav:not(.sidebar-nav):not(.bottom-tabs):not(#bottom-tabs):not([id="sidebar"]) {
  display: flex !important;
  align-items: center !important;
}

/* ── Bot FAB: Remove the overflow:hidden that clips image wrong ─ */
/* Actually keep overflow hidden but remove padding override */
#fv-fab {
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* The logo image should fill the circle completely */
#fv-fab img.fab-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* End Section 26 */

/* ============================================================
   SECTION 28 FINAL: Landing page .hud z-index FIX
   Override Section 26 which set z-index:1000 (wrong).
   The decorative .hud overlay MUST be below the nav bar.
   Nav has z-index: 200, so hud must be < 200.
   ============================================================ */

/* Override Section 26's wrong z-index: 1000 for .hud */
.hud {
  z-index: 50 !important;
}

.hud-tl,
.hud-tr, 
.hud-bl,
.hud-br {
  z-index: 50 !important;
}

/* End of 20-premium-design.css */

/* ==========================================================
   SECTION 29: TEXT OVERFLOW FIXES — Chat & Lists
   
   Root causes found:
   - Section 4 sets overflow:hidden on ALL buttons → clips .checkin-btn-confirm
   - .quick-qs has overflow-x:auto but parent .chat-wrap has overflow:hidden → clips last quick-q btn
   - .exp-name has overflow:hidden + whiteSpace:nowrap — text-overflow:ellipsis already set
   ========================================================== */

/* Fix 1: Checkin confirm button — allow text to wrap instead of hard-clip */
.checkin-btn-confirm {
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  line-height: 1.3 !important;
  min-height: 40px !important;
}

/* Fix 2: Quick-question buttons row — wrap to new line instead of scroll+clip */
.quick-qs {
  flex-wrap: wrap !important;
  overflow: visible !important;
  padding: 8px 12px !important;
  gap: 6px 6px !important;
}

/* Fix 3: Individual quick-q chips */
.quick-q {
  overflow: visible !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Fix 4: Checkin actions row — allow wrapping */
.checkin-actions {
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Fix 5: Message bubbles — proper text wrapping */
.msg-bubble {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 92% !important;
}

/* Fix 6: Chat pane overflow — allow proper scrolling */
.chat-pane {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* End Section 29 */


/* ==========================================================
   SECTION 30: INPUT WIDTH FIXES — Fixed Costs & Categories
   
   ROOT CAUSE: Section 8 sets width:100% on all input[type="text"]
   This overrides 09-onboarding.css which sets:
     .fixed-icon-input { width: 36px }  (emoji/icon cell)
     .fixed-amount-input { width: 88px } (amount cell)
   Fix: restore specific widths for these inputs !important
   
   Also: cat-icon-input (Categories tab) has same issue
   ========================================================== */

/* Fix 1: Restore fixed-icon-input (emoji cell) to its correct size */
.fixed-icon-input {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  text-align: center !important;
  padding: 4px 2px !important;
  overflow: visible !important;
  font-size: 20px !important;
}

/* Fix 2: Restore fixed-amount-input (amount cell) */
.fixed-amount-input {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Fix 3: Fixed name input fills the flex space */
.fixed-name-input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Fix 4: Category icon input (CATEGORIES tab) */
.cat-icon-input {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  text-align: center !important;
  padding: 4px 2px !important;
  overflow: visible !important;
  font-size: 20px !important;
}

/* Fix 5: Category amount/budget input */
.cat-budget-input,
.cat-amount-input,
.budget-input {
  width: 88px !important;
  min-width: 80px !important;
  max-width: 100px !important;
  flex-shrink: 0 !important;
}

/* Fix 6: Category name input */
.cat-name-input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Fix 7: General row containers for fixed costs and categories */
.fixed-exp-row,
.cat-budget-row,
.category-row,
[class*="-exp-row"],
[class*="-budget-row"] {
  overflow: visible !important;
  align-items: center !important;
}

/* End Section 30 */

/* ================================================================
   SECTION 31 — Layout fixes: inv-icon-name, form-row-2, icon text
   ================================================================ */

/* Fix 1: .inv-icon-name is matched by [class*="-icon"] rule (Rule 68 in this file)
   which sets width:38px, height:38px, justify-content:center.
   This div is a ROW CONTAINER for the investment item header, not an icon.
   Restore it to full-width flex row. */
.inv-icon-name {
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  justify-content: flex-start !important;
  border-radius: 0 !important;
  background: transparent !important;
  align-items: center !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: row !important;
}

/* Fix 2: .form-group (Section 8 in this file) sets display:flex; flex-direction:column
   which overrides the grid layout of .form-row-2 from 14-desktop.css.
   Restore 2-column grid for form-row-2. */
.form-group.form-row-2,
.form-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: start !important;
  flex-direction: unset !important;
  gap: 12px !important;
}

/* Fix 3: .exp-icon-wrap showing Lucide icon names as text (heart-pulse, home, wifi).
   If the icon value is a text name (not emoji), style it to show a fallback box
   with a neutral icon placeholder appearance. */
.exp-icon-wrap {
  overflow: visible !important;
  font-size: 20px !important;
}

/* Fix 4: .fixed-icon-input in inv-icon-name should not be constrained to 36px
   when used inside the investment categories row that needs a wider icon display. */
.inv-icon-name .fixed-icon-input {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}

/* Fix 5: The inner div with flex:1 inside .inv-icon-name needs to actually flex */
.inv-icon-name > div {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Fix 6: .fixed-name-input inside inv-icon-name needs full width */
.inv-icon-name .fixed-name-input {
  width: 100% !important;
  flex: 1 1 auto !important;
}


/* ================================================================
   SECTION 32 — Analytics black screen fix, fixed-icon-input font size,
   app-header padding fix
   ================================================================ */

/* Fix 1: .section-card has animation 'card-enter both running' which creates GPU
   compositing layers. When many sections are off-screen, repaints fail causing
   black screens. Reset animation-fill-mode to forwards to avoid persistent
   compositing context. Also remove the transform that the animation leaves behind. */
.section-card {
  animation-fill-mode: forwards !important;
  will-change: auto !important;
}

/* Fix 2: After animation completes, section-cards should NOT keep a transform.
   The identity matrix transform from card-enter creates unnecessary compositing layers. */
.section-card.premium,
.section-card[class] {
  transform: none !important;
}

/* Fix 3: .fixed-icon-input font-size already set to 20px in Section 30 Fix 1. */
.fixed-icon-input {
  line-height: 1.2 !important;
}

/* Fix 4: App header creates a fixed overlay but content starts at y=0.
   Ensure enough padding-top on the main content area. */
#tab-content,
.tab-content,
main#tab-content {
  padding-top: 0 !important;
}

/* Fix 5: The analytics tab subscription list — ensure expense items have visible text */
#tab-analytics .expense-item .exp-name,
#tab-analytics .expense-item .exp-meta,
#tab-analytics .expense-item .exp-amount {
  color: var(--text-primary, #fff) !important;
}

/* Fix 6: Ensure section-cards in analytics don't clip their content incorrectly */
#tab-analytics .section-card {
  overflow: visible !important;
}