/* ==========================================================================
   VocabTree CSS Design System
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Primary Colors - Deep navy for trust and knowledge */
    --color-primary: #1e3a5f;
    --color-primary-light: #2d5a8a;
    --color-primary-dark: #0f1f33;

    /* Neutral Colors */
    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;

    /* Accent Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px - labels */
    --text-sm: 0.875rem;     /* 14px - secondary */
    --text-base: 1rem;       /* 16px - body */
    --text-lg: 1.125rem;     /* 18px - emphasis */
    --text-xl: 1.25rem;      /* 20px - headings */
    --text-2xl: 1.5rem;      /* 24px - page titles */
    --text-3xl: 2rem;        /* 32px - hero */

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* Spacing Scale */
    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Responsive Breakpoints (for reference in media queries) */
    /* --mobile: 640px; sm */
    /* --tablet: 768px; md */
    /* --desktop: 1024px; lg */
}

/* ==========================================================================
   2. CSS Reset / Normalize
   ========================================================================== */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

/* ==========================================================================
   3. Typography Base Styles
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--color-text);
}

h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}

h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

p {
    margin-bottom: var(--space-4);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Link styles */
a:not(.btn):not(.cta-button):not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.back-link) {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition-fast);
}

a:not(.btn):not(.cta-button):not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.back-link):hover {
    text-decoration-color: var(--color-primary);
}

/* ==========================================================================
   4. Layout - Container
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-sm {
    max-width: 640px;
}

.container-md {
    max-width: 768px;
}

.container-lg {
    max-width: 1024px;
}

/* ==========================================================================
   5. Layout - Flexbox Utilities
   ========================================================================== */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ==========================================================================
   6. Layout - Grid Utilities
   ========================================================================== */

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   7. Spacing Utilities
   ========================================================================== */

/* Margin */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mx-auto { margin-left: auto; margin-right: auto; }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }

.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }

/* Padding */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }

.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }

.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }

.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ==========================================================================
   8. Component - Card
   ========================================================================== */

.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card-sm {
    padding: var(--space-4);
}

.card-lg {
    padding: var(--space-8);
}

.card-bordered {
    border: 1px solid var(--color-border);
    box-shadow: none;
}

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

/* ==========================================================================
   9. Component - Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: 1;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

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

/* Primary Button - Navy background, white text */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.btn-primary:active:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Secondary Button - White background, navy border */
.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* Ghost Button - Text only with hover underline */
.btn-ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: transparent;
    padding: var(--space-2) var(--space-4);
}

.btn-ghost:hover:not(:disabled) {
    text-decoration: underline;
    background-color: rgba(30, 58, 95, 0.05);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

/* Button with full width */
.btn-block {
    width: 100%;
}

/* Success Button */
.btn-success {
    background-color: var(--color-success);
    color: var(--color-surface);
    border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
    background-color: #0d9668;
    border-color: #0d9668;
}

/* Warning Button */
.btn-warning {
    background-color: var(--color-warning);
    color: var(--color-surface);
    border-color: var(--color-warning);
}

.btn-warning:hover:not(:disabled) {
    background-color: #d97706;
    border-color: #d97706;
}

/* Danger Button */
.btn-danger {
    background-color: var(--color-error);
    color: var(--color-surface);
    border-color: var(--color-error);
}

.btn-danger:hover:not(:disabled) {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* ==========================================================================
   10. Component - Form Elements
   ========================================================================== */

.input,
.textarea {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus,
.textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

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

.input:disabled,
.textarea:disabled {
    background-color: var(--color-bg);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Input sizes */
.input-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.input-lg {
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-lg);
}

/* Textarea */
.textarea {
    resize: vertical;
    min-height: 120px;
}

/* Input states */
.input-error,
.textarea-error {
    border-color: var(--color-error);
}

.input-error:focus,
.textarea-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.input-success,
.textarea-success {
    border-color: var(--color-success);
}

.input-success:focus,
.textarea-success:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Form labels */
.label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

/* Form help text */
.form-help {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.form-error {
    font-size: var(--text-sm);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* Form group */
.form-group {
    margin-bottom: var(--space-4);
}

/* ==========================================================================
   11. Additional Utilities
   ========================================================================== */

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

/* Height utilities */
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* Display utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

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

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

/* Border utilities */
.border { border: 1px solid var(--color-border); }
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-l { border-left: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }
.border-none { border: none; }

.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Background utilities */
.bg-primary { background-color: var(--color-primary); }
.bg-surface { background-color: var(--color-surface); }
.bg-bg { background-color: var(--color-bg); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* ==========================================================================
   12. Responsive Breakpoints (Mobile-First)
   ========================================================================== */

/* Small devices (640px and up) */
@media (min-width: 640px) {
    .sm\:flex { display: flex; }
    .sm\:hidden { display: none; }
    .sm\:block { display: block; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:text-left { text-align: left; }
    .sm\:text-center { text-align: center; }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:text-left { text-align: left; }
    .md\:p-6 { padding: var(--space-6); }
    .md\:p-8 { padding: var(--space-8); }
}

/* Large devices (1024px and up) */
@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:block { display: block; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:flex-row { flex-direction: row; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-between { justify-content: space-between; }
}

/* ==========================================================================
   13. Existing Page Styles (Maintained for Backward Compatibility)
   ========================================================================== */

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-surface);
    padding: var(--space-16) 0;
    text-align: center;
}

.company-name {
    font-size: 4rem;
    font-weight: var(--font-bold);
    margin-bottom: var(--space-4);
    color: var(--color-surface);
}

.tagline {
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    opacity: 0.9;
}

/* Problem Section */
.problem-section {
    padding: var(--space-20) 0;
    background-color: var(--color-bg);
}

.problem-text {
    font-size: var(--text-xl);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: var(--color-text-muted);
}

/* Solution Section */
.solution-section {
    padding: var(--space-20) 0;
    background-color: var(--color-surface);
}

.solution-text {
    font-size: var(--text-xl);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: var(--color-text);
}

/* Benefits Section */
.benefits-section {
    padding: var(--space-20) 0;
    background-color: var(--color-bg);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.benefit-card {
    background: var(--color-surface);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.benefit-icon {
    font-size: var(--text-3xl);
    color: var(--color-success);
    margin-bottom: var(--space-4);
}

.benefit-card p {
    font-size: var(--text-lg);
    color: var(--color-text);
    margin: 0;
}

/* CTA Section */
.cta-section {
    padding: var(--space-20) 0;
    background-color: var(--color-primary-dark);
    color: var(--color-surface);
    text-align: center;
}

.cta-section h2 {
    color: var(--color-surface);
    margin-bottom: var(--space-8);
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    color: var(--color-surface);
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* Footer */
.footer {
    padding: var(--space-8) 0;
    background-color: var(--color-primary-dark);
    color: var(--color-text-muted);
    text-align: center;
}

/* Pricing Section */
.pricing-section {
    padding: var(--space-20) 0;
    background-color: var(--color-bg);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.pricing-card {
    background: var(--color-surface);
    padding: var(--space-10);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    border: 2px solid transparent;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.pricing-card.featured {
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.pricing-card.featured::before {
    content: "Most Popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.pricing-card h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.price {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.price span {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--color-text-muted);
}

.pricing-card p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.pricing-card ul {
    margin-bottom: var(--space-8);
    text-align: left;
}

.pricing-card li {
    padding: var(--space-2) 0;
    color: var(--color-text);
    position: relative;
    padding-left: var(--space-6);
}

.pricing-card li::before {
    content: "";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: var(--font-bold);
}

.pricing-button {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    color: var(--color-surface);
    border: none;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    width: 100%;
}

.pricing-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.pricing-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success and Cancel Pages */
.success-section,
.cancel-section {
    padding: var(--space-20) 0;
    background-color: var(--color-bg);
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.success-content,
.cancel-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.success-icon,
.cancel-icon {
    font-size: 4rem;
    margin-bottom: var(--space-8);
}

.success-icon {
    color: var(--color-success);
}

.cancel-icon {
    color: var(--color-error);
}

.success-content h1,
.cancel-content h1 {
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.success-content p,
.cancel-content p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    font-size: var(--text-lg);
}

.session-info {
    background: var(--color-surface);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-8);
    border: 1px solid var(--color-border);
}

.session-info p {
    margin: 0;
    font-family: monospace;
    font-size: var(--text-sm);
}

.success-actions,
.cancel-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Back link */
.back-link {
    display: inline-block;
    margin-bottom: var(--space-8);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
}

.back-link:hover {
    color: var(--color-primary-light);
}

/* Signup Container */
.signup-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-8);
}

.signup-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
    max-width: 450px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.signup-header h1 {
    font-size: var(--text-3xl);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.signup-header p {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    margin-bottom: var(--space-8);
}

/* Signout Container */
.signout-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    padding: var(--space-8);
}

.signout-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 400px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.signout-card h1 {
    margin-bottom: var(--space-4);
}

.signout-card p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.signout-card a:not(.btn) {
    color: var(--color-primary);
    font-weight: var(--font-medium);
}

.signout-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

/* ==========================================================================
   14. Responsive Styles for Existing Page Components
   ========================================================================== */

@media (max-width: 768px) {
    .hero {
        padding: var(--space-12) 0;
    }

    .company-name {
        font-size: 3rem;
    }

    .tagline {
        font-size: var(--text-xl);
    }

    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-xl);
    }

    .problem-section,
    .solution-section,
    .benefits-section,
    .cta-section,
    .pricing-section {
        padding: var(--space-12) 0;
    }

    .benefits-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .pricing-card.featured {
        transform: none;
    }

    .signup-card {
        padding: var(--space-8);
    }

    .signup-header h1 {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 640px) {
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .company-name {
        font-size: 2.5rem;
    }

    .success-actions,
    .cancel-actions {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
}

/* ==========================================================================
   15. Error Page Styles
   ========================================================================== */

.error-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    padding: var(--space-8);
}

.error-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
    max-width: 500px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.error-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background-color: var(--color-error);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.error-icon-symbol {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-surface);
}

.error-title {
    font-size: 4rem;
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.error-message {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.error-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .error-card {
        padding: var(--space-8);
    }

    .error-title {
        font-size: 3rem;
    }

    .error-actions {
        flex-direction: column;
    }

    .error-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   16. Toast Notification Styles
   ========================================================================== */

.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.toast {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 300px;
    max-width: 450px;
    animation: slideIn 0.3s ease-out;
    border-left: 4px solid var(--color-primary);
}

.toast-error {
    border-left-color: var(--color-error);
}

.toast-success {
    border-left-color: var(--color-success);
}

.toast-warning {
    border-left-color: var(--color-warning);
}

.toast-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.toast-error .toast-icon {
    color: var(--color-error);
}

.toast-success .toast-icon {
    color: var(--color-success);
}

.toast-warning .toast-icon {
    color: var(--color-warning);
}

.toast-content {
    flex: 1;
}

.toast-message {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: 1;
    transition: color var(--transition-fast);
}

.toast-close:hover {
    color: var(--color-text);
}

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

.toast-exit {
    animation: slideOut 0.3s ease-in forwards;
}

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

@media (max-width: 640px) {
    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
    }

    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* ==========================================================================
   17. Alert Banner Styles (inline alerts)
   ========================================================================== */

.alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
}

.alert-info {
    background-color: rgba(30, 58, 95, 0.1);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.alert-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-message {
    font-size: var(--text-sm);
}

.alert-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.alert-dismiss:hover {
    opacity: 1;
}

/* ==========================================================================
   18. Landing Page - Hero with Logo and Search
   ========================================================================== */

.hero-full {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) 0;
}

/* Logo Container */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-6);
}

.tree-logo {
    width: 120px;
    height: 140px;
    margin-bottom: var(--space-4);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
    animation: gentleSway 8s ease-in-out infinite;
}

@keyframes gentleSway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(0.5deg); }
    75% { transform: rotate(-0.5deg); }
}

.logo-text {
    font-size: 3.5rem;
    font-weight: var(--font-bold);
    color: var(--color-surface);
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Hero Tagline */
.hero-tagline {
    font-size: var(--text-xl);
    font-weight: var(--font-light);
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-bottom: var(--space-10);
    letter-spacing: 0.01em;
}

/* Search Box */
.search-box {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

.search-form {
    display: flex;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-base);
}

.search-form:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-lg);
    color: var(--color-surface);
    outline: none;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    color: var(--color-primary);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.search-button:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.search-button:active {
    transform: translateY(0);
}

.search-hint {
    text-align: center;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--space-4);
    margin-bottom: 0;
}

/* Compact Search Bar (for word detail pages) */
.search-bar-compact {
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: center;
}

.search-form-inline {
    display: flex;
    gap: var(--space-2);
    max-width: 500px;
    width: 100%;
}

.search-form-inline .search-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
}

.search-form-inline .input {
    flex: 1;
}

@media (max-width: 480px) {
    .search-form-inline {
        flex-direction: column;
    }

    .search-form-inline .btn {
        width: 100%;
    }
}

/* ==========================================================================
   20. Dashboard Header (Shared Component)
   ========================================================================== */

.dashboard-stats-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.dashboard-stats-bar .stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.dashboard-stats-bar .stat-value {
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

.dashboard-stats-bar .stat-icon {
    font-size: var(--text-base);
}

.header-link {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
    margin-left: auto;
}

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

.btn-donate {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(135deg, #ff813f 0%, #ff5f5f 100%);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-donate:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 95, 95, 0.3);
}

/* Coffee Dropdown */
.coffee-dropdown {
    position: relative;
    display: inline-block;
}

.coffee-btn {
    background: linear-gradient(135deg, #ff813f 0%, #ff5f5f 100%);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform var(--transition-fast);
    line-height: 1;
}

.coffee-btn:hover {
    transform: scale(1.1);
}

.coffee-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff813f 0%, #ff5f5f 100%);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 1.25rem;
    text-decoration: none;
    transition: transform var(--transition-fast);
    line-height: 1;
}

.coffee-link:hover {
    transform: scale(1.1);
}

.coffee-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    z-index: 1000;
    overflow: hidden;
}

.coffee-dropdown-menu.show {
    display: block;
}

.coffee-dropdown-header {
    padding: var(--space-3) var(--space-4);
    font-weight: var(--font-semibold);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.coffee-tier {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--transition-fast);
}

.coffee-tier:hover {
    background: var(--color-bg);
}

.coffee-icons {
    font-size: 1rem;
    min-width: 48px;
}

.coffee-amount {
    font-weight: var(--font-medium);
    min-width: 60px;
}

.coffee-label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

@media (max-width: 640px) {
    .dashboard-stats-bar {
        justify-content: center;
    }

    .btn-donate {
        margin-left: 0;
        margin-top: var(--space-2);
        width: 100%;
        justify-content: center;
    }

    .coffee-dropdown-menu {
        min-width: 200px;
    }

    .coffee-label {
        display: none;
    }
}

/* ==========================================================================
   21. Landing Page - Features Section
   ========================================================================== */

.features-section {
    padding: var(--space-16) 0;
    background-color: var(--color-surface);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    max-width: 900px;
    margin: 0 auto;
}

.feature {
    text-align: center;
    padding: var(--space-6);
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    color: var(--color-surface);
}

.feature h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.feature p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--leading-relaxed);
}

/* Minimal Footer */
.footer-minimal {
    padding: var(--space-6) 0;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.footer-minimal p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ==========================================================================
   20. Landing Page - Responsive Styles
   ========================================================================== */

@media (max-width: 768px) {
    .hero-full {
        min-height: 60vh;
        padding: var(--space-8) 0;
    }

    .tree-logo {
        width: 100px;
        height: 120px;
    }

    .logo-text {
        font-size: 2.5rem;
    }

    .hero-tagline {
        font-size: var(--text-lg);
        margin-bottom: var(--space-8);
    }

    .search-form {
        flex-direction: column;
        padding: var(--space-3);
    }

    .search-input {
        padding: var(--space-3);
        font-size: var(--text-base);
    }

    .search-button {
        width: 100%;
        justify-content: center;
        padding: var(--space-4);
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .feature {
        padding: var(--space-4);
    }
}

@media (max-width: 480px) {
    .tree-logo {
        width: 80px;
        height: 96px;
    }

    .logo-text {
        font-size: 2rem;
    }

    .hero-tagline {
        font-size: var(--text-base);
    }
}

/* ==========================================================================
   21. Navbar and Profile Dropdown
   ========================================================================== */

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--space-4) 0;
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.navbar-brand:hover {
    color: var(--color-surface);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Nav Button (Sign In) */
.btn-nav {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-fast);
}

.btn-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-nav-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.btn-nav-ghost:hover {
    color: var(--color-surface);
}

/* Profile Dropdown */
.profile-dropdown {
    position: relative;
}

.profile-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-surface);
}

.profile-button:hover {
    background: rgba(255, 255, 255, 0.25);
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.profile-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 200px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--color-bg);
}

.dropdown-item svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.dropdown-item-danger {
    color: var(--color-error);
}

.dropdown-item-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

.dropdown-item-danger svg {
    color: var(--color-error);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-2) 0;
}

/* Adjust hero for navbar */
.hero-full {
    padding-top: calc(var(--space-12) + 60px);
}

@media (max-width: 640px) {
    .profile-name {
        display: none;
    }

    .profile-button {
        padding: var(--space-1);
    }
}

/* Light navbar variant (for pages with light backgrounds) */
.navbar-light {
    position: relative;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.navbar-brand-dark {
    color: var(--color-primary);
}

.navbar-brand-dark:hover {
    color: var(--color-primary-light);
}

.profile-button-light {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

.profile-button-light:hover {
    background: var(--color-border);
}

.profile-name-dark {
    color: var(--color-text);
}

/* ==========================================================================
   22. White Top Bar (Landing Page)
   ========================================================================== */

.top-bar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
    position: relative;
    z-index: 100;
}

.top-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-bar-brand {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.top-bar-brand:hover {
    color: var(--color-primary-light);
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.top-bar-link {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.top-bar-link:hover {
    color: var(--color-primary);
}

@media (max-width: 640px) {
    .top-bar-actions {
        gap: var(--space-2);
    }

    .top-bar-link {
        display: none;
    }
}

/* ==========================================================================
   23. Blue Page Header Banner
   ========================================================================== */

.page-header-blue {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-surface);
    padding: var(--space-6) 0;
}

.page-header-blue .navbar-brand {
    color: rgba(255, 255, 255, 0.9);
}

.page-header-blue .navbar-brand:hover {
    color: var(--color-surface);
}

.page-header-blue .page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-surface);
    margin: 0;
    text-align: center;
}

.page-header-blue .page-subtitle {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--space-2);
    text-align: center;
}

/* Page header with navbar integrated */
.page-header-blue-nav {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--space-4) 0;
}

.page-header-blue-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-header-blue-nav .navbar-brand {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.page-header-blue-nav .navbar-brand:hover {
    color: var(--color-surface);
}

.page-header-blue-nav .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.page-header-blue-nav .header-link {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-sm);
    text-decoration: none;
}

.page-header-blue-nav .header-link:hover {
    color: var(--color-surface);
}

/* Adjust hero for pages with top-bar (remove extra padding) */
.top-bar + .hero-full {
    padding-top: var(--space-12);
}

/* ==========================================================================
   24. Dashboard Enhanced Metrics Styles
   ========================================================================== */

/* Stat breakdown (overdue + due today) */
.stat-breakdown {
    font-size: var(--text-xs);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.stat-overdue {
    color: var(--color-error);
    font-weight: var(--font-semibold);
}

.stat-due-today {
    color: var(--color-warning);
    font-weight: var(--font-medium);
}

.stat-separator {
    color: rgba(255, 255, 255, 0.6);
}

/* Stat card highlight with breakdown needs adjusted colors for dark background */
.stat-card.highlight .stat-overdue {
    color: #fca5a5;
}

.stat-card.highlight .stat-due-today {
    color: #fcd34d;
}

/* Streak Timeline */
.streak-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
}

.streak-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}

.streak-day.active {
    opacity: 1;
}

/* Enhanced Stats Row */
.enhanced-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.last-reviewed,
.longest-streak {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.last-reviewed-icon,
.longest-streak-icon {
    font-size: var(--text-base);
}

.longest-streak strong {
    color: var(--color-text);
    font-weight: var(--font-semibold);
}

@media (max-width: 480px) {
    .enhanced-stats-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* Upcoming Schedule Card */
.upcoming-schedule-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}

.upcoming-schedule-card h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

.schedule-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 100px;
    gap: var(--space-2);
}

.schedule-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 60px;
}

.schedule-bar {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-height: 10px;
    transition: height var(--transition-base);
}

.schedule-bar-item.today .schedule-bar {
    background: linear-gradient(180deg, var(--color-warning) 0%, #d97706 100%);
}

.schedule-count {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin-top: var(--space-1);
}

.schedule-day {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.schedule-bar-item.today .schedule-day {
    color: var(--color-warning);
    font-weight: var(--font-medium);
}

/* Header Due Breakdown */
.header-due-breakdown {
    margin-left: var(--space-1);
}

.header-overdue {
    color: var(--color-error);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.stat-item.has-overdue .stat-value {
    color: var(--color-error);
}

/* Make sure js-hidden works for enhanced stats */
.enhanced-stats-row.js-hidden,
.upcoming-schedule-card.js-hidden {
    display: none;
}

/* ============================================
   25. Dark Mode
   ============================================ */

[data-theme="dark"] {
    /* Background colors */
    --color-bg: #0d1117;
    --color-surface: #161b22;
    --color-border: #30363d;

    /* Text colors */
    --color-text: #c9d1d9;
    --color-text-muted: #8b949e;

    /* Primary colors - brighter for dark mode */
    --color-primary: #58a6ff;
    --color-primary-light: #79c0ff;
    --color-primary-dark: #1f6feb;

    /* Semantic colors - slightly adjusted for dark bg */
    --color-success: #3fb950;
    --color-warning: #d29922;
    --color-error: #f85149;

    /* Shadows - more subtle in dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Theme toggle button */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--color-bg);
}

/* Show/hide icons based on theme */
[data-theme="light"] .theme-icon-light,
:root:not([data-theme]) .theme-icon-light {
    display: none;
}

[data-theme="light"] .theme-icon-dark,
:root:not([data-theme]) .theme-icon-dark {
    display: inline;
}

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

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

/* Dark mode specific overrides */
[data-theme="dark"] .navbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .navbar-light {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0f1a2e 0%, #1a2d4a 100%);
}

[data-theme="dark"] .tree-logo path,
[data-theme="dark"] .tree-logo g[stroke] {
    stroke: rgba(200, 220, 255, 0.85);
}

[data-theme="dark"] .tree-logo g[fill] circle {
    fill: rgba(200, 220, 255, 0.7);
}

[data-theme="dark"] .hero .logo-text {
    color: rgba(200, 220, 255, 0.95);
}

[data-theme="dark"] .hero-tagline {
    color: rgba(200, 220, 255, 0.8);
}

[data-theme="dark"] .stat-card {
    background: var(--color-surface);
}

[data-theme="dark"] .dropdown-menu {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .word-card {
    background: var(--color-surface);
}

[data-theme="dark"] .input,
[data-theme="dark"] textarea {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .btn-primary {
    background: var(--color-primary);
}

[data-theme="dark"] .top-bar {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .top-bar-brand {
    color: var(--color-primary);
}

[data-theme="dark"] .top-bar-link {
    color: var(--color-text-muted);
}

[data-theme="dark"] .top-bar-link:hover {
    color: var(--color-primary);
}

[data-theme="dark"] .features-section {
    background-color: var(--color-surface);
}

[data-theme="dark"] .footer-minimal {
    background-color: var(--color-bg);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .feature-icon {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

[data-theme="dark"] .card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

[data-theme="dark"] .btn-ghost:hover:not(:disabled) {
    background-color: rgba(88, 166, 255, 0.1);
}

[data-theme="dark"] .profile-button-light {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .profile-button-light:hover {
    background: var(--color-border);
}

[data-theme="dark"] .navbar-brand-dark {
    color: #ffffff;
}

[data-theme="dark"] .navbar-brand {
    color: #ffffff;
}

[data-theme="dark"] .logo-text {
    color: #ffffff;
}

[data-theme="dark"] .top-bar-brand {
    color: #ffffff;
}

[data-theme="dark"] .profile-name-dark {
    color: var(--color-text);
}

[data-theme="dark"] .search-form {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-form:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .search-input {
    color: #ffffff;
}

[data-theme="dark"] .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .search-button {
    background: var(--color-surface);
    color: var(--color-primary);
}

[data-theme="dark"] .search-button:hover {
    background: var(--color-border);
}

[data-theme="dark"] .enhanced-stats-row {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .upcoming-schedule-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .benefit-card {
    background: var(--color-surface);
}

[data-theme="dark"] .pricing-card {
    background: var(--color-surface);
}

[data-theme="dark"] .signup-container {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

[data-theme="dark"] .signup-card {
    background: var(--color-surface);
}

[data-theme="dark"] .signout-container {
    background-color: var(--color-bg);
}

[data-theme="dark"] .signout-card {
    background: var(--color-surface);
}

[data-theme="dark"] .error-container {
    background-color: var(--color-bg);
}

[data-theme="dark"] .error-card {
    background: var(--color-surface);
}

[data-theme="dark"] .toast {
    background: var(--color-surface);
}

[data-theme="dark"] .alert-error {
    background-color: rgba(248, 81, 73, 0.1);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(63, 185, 80, 0.1);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(210, 153, 34, 0.1);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(88, 166, 255, 0.1);
}

[data-theme="dark"] .session-info {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .cta-section {
    background-color: #0d1117;
}

[data-theme="dark"] .problem-section {
    background-color: var(--color-bg);
}

[data-theme="dark"] .solution-section {
    background-color: var(--color-surface);
}

[data-theme="dark"] .benefits-section {
    background-color: var(--color-bg);
}

[data-theme="dark"] .pricing-section {
    background-color: var(--color-bg);
}

[data-theme="dark"] .page-header-blue {
    background: linear-gradient(135deg, #1f6feb 0%, #0d1117 100%);
}

[data-theme="dark"] .page-header-blue-nav {
    background: linear-gradient(135deg, #1f6feb 0%, #0d1117 100%);
}

/* Theme toggle in navbar - light navbar variant */
.theme-toggle-nav {
    color: var(--color-text-muted);
}

.theme-toggle-nav:hover {
    color: var(--color-primary);
    background: var(--color-bg);
}

/* Theme toggle in top bar */
.theme-toggle-top {
    color: var(--color-text-muted);
}

.theme-toggle-top:hover {
    color: var(--color-primary);
    background: var(--color-bg);
}

/* ==========================================================================
   26. Review Hints and Celebration Styles
   ========================================================================== */

/* Hint Section */
.hint-section {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-surface, #f8fafc);
    border-radius: 8px;
}

.hint-toggle {
    background: none;
    border: 1px solid var(--color-border, #e2e8f0);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.hint-toggle:hover {
    background: var(--color-primary-light, #e0f2fe);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.hint-content {
    margin-top: 1rem;
}

.hint-mnemonic, .hint-context, .hint-tip {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    line-height: var(--leading-relaxed);
}

.hint-mnemonic:last-child,
.hint-context:last-child,
.hint-tip:last-child {
    border-bottom: none;
}

.hint-mnemonic {
    color: var(--color-primary, #2563eb);
    font-weight: var(--font-medium);
}

.hint-context {
    color: var(--color-text, #1e293b);
}

.hint-tip {
    color: var(--color-text-muted, #64748b);
    font-size: 0.9rem;
}

/* Celebration Modal */
.celebration-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.celebration-content {
    background: white;
    padding: 3rem;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    animation: slideUp 0.4s ease;
    box-shadow: var(--shadow-xl);
}

.celebration-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.celebration-stats {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Dark mode support */
[data-theme="dark"] .hint-section {
    background: var(--color-surface, #1e293b);
}

[data-theme="dark"] .hint-toggle {
    border-color: var(--color-border, #334155);
    color: var(--color-text, #e2e8f0);
}

[data-theme="dark"] .hint-toggle:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary);
    color: var(--color-surface);
}

[data-theme="dark"] .hint-mnemonic,
[data-theme="dark"] .hint-context,
[data-theme="dark"] .hint-tip {
    border-bottom-color: var(--color-border, #334155);
}

[data-theme="dark"] .hint-mnemonic {
    color: var(--color-primary);
}

[data-theme="dark"] .hint-context {
    color: var(--color-text);
}

[data-theme="dark"] .hint-tip {
    color: var(--color-text-muted);
}

[data-theme="dark"] .celebration-content {
    background: var(--color-surface, #1e293b);
    color: var(--color-text, #e2e8f0);
}

[data-theme="dark"] .celebration-content h2 {
    color: var(--color-text);
}

[data-theme="dark"] .celebration-stats {
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .celebration-content {
        padding: 2rem;
        margin: 1rem;
    }

    .celebration-content h2 {
        font-size: 1.5rem;
    }

    .celebration-stats {
        font-size: 1rem;
    }
}