/* ===== CSS Custom Properties (Theme) ===== */
:root {
    --purple1: #5B5FE6;
    --purple2: #8B5CF6;
    --primary: #4F5BD5;
    --primary-container: #DEE0FF;
    --on-primary: #FFFFFF;
    --on-primary-container: #00105C;
    --secondary: #5B5D72;
    --secondary-container: #DFE1F9;
    --tertiary: #77536D;
    --tertiary-container: #FFD7F1;
    --surface: #FDFBFF;
    --surface-low: #F4F2F7;
    --surface-container: #EFEDF2;
    --surface-container-low: #F4F2F7;
    --surface-container-lowest: #FFFFFF;
    --on-surface: #1B1B21;
    --on-surface-variant: #46464F;
    --outline: #767680;
    --outline-variant: #C7C5D0;
    --error: #BA1A1A;
    --error-container: #FFDAD6;
    --on-error-container: #410002;
    --success: #66BB6A;
    --success-dark: #2E7D32;
    --warning: #FFA726;
    --warning-dark: #E65100;
    --info: #42A5F5;
    --info-dark: #1565C0;
    --stage-not-started: #BDBDBD;
    --stage-in-progress: #FFA726;
    --stage-completed: #66BB6A;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.12);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.16);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] {
    --primary: #BEC2FF;
    --primary-container: #242778;
    --on-primary: #0A0F8A;
    --on-primary-container: #DEE0FF;
    --secondary: #C3C5DD;
    --secondary-container: #434659;
    --surface: #131318;
    --surface-low: #1B1B21;
    --surface-container: #201F25;
    --surface-container-low: #1B1B21;
    --surface-container-lowest: #0E0E13;
    --on-surface: #E4E1E9;
    --on-surface-variant: #C7C5D0;
    --outline: #90909A;
    --outline-variant: #46464F;
    --error: #FFB4AB;
    --error-container: #93000A;
    --on-error-container: #FFDAD6;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    height: 100%;
    font-family: var(--font);
    background: var(--surface-low);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

#app {
    width: 100%;
    max-width: 480px;
    height: 100%;
    background: var(--surface-low);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ===== Gradient Header ===== */
.gradient-header {
    background: linear-gradient(135deg, var(--purple1), var(--purple2));
    padding: calc(env(safe-area-inset-top, 16px) + 16px) 20px 24px;
    position: sticky;
    top: 0;
    z-index: 20;
    overflow: hidden;
}
.gradient-header::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.gradient-header::after {
    content: '';
    position: absolute;
    bottom: -20px; left: 30%;
    width: 80px; height: 80px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.gradient-header h1, .gradient-header h2 {
    color: white;
    position: relative;
    z-index: 1;
}
.gradient-header h1 { font-size: 22px; font-weight: 700; }
.gradient-header h2 { font-size: 18px; font-weight: 600; }

/* ===== Back Button ===== */
.back-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    transition: background 0.2s;
}
.back-btn:hover { background: rgba(255,255,255,0.25); }

/* ===== Cards ===== */
.card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.15s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card.clickable { cursor: pointer; }
.card.clickable:active { transform: scale(0.98); }
.card.selected {
    background: var(--primary-container);
    border: 2px solid var(--primary);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
    background: linear-gradient(135deg, var(--purple1), var(--purple2));
    color: white;
}
.btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-md); }
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--outline-variant);
    color: var(--on-surface);
}
.btn-outline:hover:not(:disabled) { background: var(--surface-container); }
.btn-text {
    background: transparent;
    color: var(--primary);
    padding: 8px 12px;
}
.btn-text:hover { background: var(--primary-container); }
.btn-error {
    background: transparent;
    color: var(--error);
    padding: 8px 12px;
}
.btn-error:hover { background: var(--error-container); }
.btn-full { width: 100%; }
.btn-lg { padding: 16px 24px; font-size: 16px; }

/* ===== Form Elements ===== */
.input-group { margin-bottom: 16px; }
.input-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--on-surface-variant);
    margin-bottom: 6px;
}
.input-field {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--outline-variant);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 15px;
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    outline: none;
    transition: border-color 0.2s;
}
.input-field:focus { border-color: var(--primary); }
.input-field::placeholder { color: var(--outline); }

/* ===== Section Headers ===== */
.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--on-surface);
    margin-bottom: 4px;
}
.section-subtitle {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-bottom: 16px;
}

/* ===== Badge ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.badge-purple { background: rgba(91,95,230,0.15); color: var(--purple1); }
.badge-green { background: rgba(102,187,106,0.15); color: var(--success-dark); }
.badge-red { background: rgba(186,26,26,0.15); color: var(--error); }
.badge-orange { background: rgba(255,167,38,0.15); color: var(--warning-dark); }

/* ===== FAB ===== */
.fab {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    right: 50%;
    margin-right: -216px;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--purple1), var(--purple2));
    color: white;
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    z-index: 10;
    transition: transform 0.2s;
}
.fab:hover { transform: scale(1.05); }
@media (max-width: 480px) {
    .fab { right: 24px; margin-right: 0; }
}

/* ===== Dialog/Modal ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
}
.modal {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}
.modal h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }

/* ===== Progress Bar ===== */
.progress-bar {
    height: 6px;
    background: var(--outline-variant);
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple1), var(--purple2));
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ===== Empty State ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.empty-state .material-icons-round { font-size: 64px; color: var(--outline-variant); margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; color: var(--on-surface); margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: var(--on-surface-variant); }

/* ===== Utilities ===== */
.content-padding { padding: 20px; }
.flex-row { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.text-muted { color: var(--on-surface-variant); }
.text-error { color: var(--error); }
.text-success { color: var(--success-dark); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Transitions ===== */
.screen-enter { animation: fadeSlideIn 0.25s ease-out; }
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 2px; }

/* ===== Spinner ===== */
.spinner {
    width: 24px; height: 24px;
    border: 3px solid var(--outline-variant);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }