/* ==================== LOGIN SCREEN ==================== */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.login-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(48px) saturate(180%);
    -webkit-backdrop-filter: blur(48px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
    padding: var(--space-4xl);
    max-width: 400px;
    width: 100%;
    position: relative;
}

/* No shine line — restraint */
.login-card::before {
    display: none;
}

.login-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.login-header p {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 400;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.user-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.user-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    background: rgba(0, 0, 0, 0.03);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    font-family: var(--font-system);
}

.user-btn i {
    font-size: 28px;
    color: var(--text-tertiary);
    transition: all var(--duration-fast) var(--ease-default);
}

.user-btn span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.user-btn:hover {
    background: var(--system-blue-light);
}

.user-btn.selected {
    border-color: var(--system-blue);
    background: var(--system-blue-light);
}

.user-btn.selected i,
.user-btn.selected span {
    color: var(--system-blue);
}

.pin-group {
    animation: fadeSlideIn var(--duration-normal) var(--ease-default);
}

.pin-input {
    width: 100%;
    font-family: var(--font-system);
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 16px;
    padding: var(--space-lg) var(--space-xl);
    border: 0.5px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    transition: all var(--duration-fast) var(--ease-default);
}

.pin-input:focus {
    outline: none;
    border-color: var(--system-blue);
    box-shadow: 0 0 0 4px var(--system-blue-light);
}

.pin-input::placeholder {
    color: var(--text-quaternary);
    letter-spacing: 8px;
}

.pin-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: var(--space-sm);
}

.btn-login {
    width: 100%;
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    font-size: 15px;
    animation: fadeSlideIn var(--duration-normal) var(--ease-default);
}

.login-error {
    color: var(--system-red);
    font-size: 13px;
    text-align: center;
    min-height: 20px;
}

/* Google Sign-In Button */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-system);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.btn-google:hover {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.btn-google:active {
    transform: scale(0.98) translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.btn-google svg {
    flex-shrink: 0;
}

.login-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 12px;
    line-height: 1.5;
}

/* Welcome message (first-time name picker) */
.login-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: var(--system-blue-light);
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--system-blue);
    animation: fadeSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-welcome-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Loading spinner */
.login-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    font-size: 15px;
    color: var(--text-secondary);
    animation: fadeSlideIn 0.3s ease;
}

.login-loading i {
    font-size: 20px;
    color: var(--system-blue);
}

/* ==================== SETTINGS V2 ==================== */
.settings-section {
    margin-bottom: 28px;
}

.settings-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 10px;
    padding-left: 6px;
    font-family: var(--font-body);
}

.settings-card {
    background: var(--surface-1);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: 16px;
    border: 0.5px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.settings-card:hover {
    box-shadow: var(--shadow-md);
}

/* ─── PROFILE CARD (Apple iCloud style) ─── */
.settings-profile-card {
    padding: 28px 28px 20px;
}

.settings-profile-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.settings-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D1D1D6, #C7C7CC);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.15s;
}
.settings-avatar .material-symbols-outlined { font-size: 32px; }
.settings-avatar:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06);
    transform: scale(1.02);
}
.settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.settings-avatar-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
}
.settings-avatar-hover .material-symbols-outlined { font-size: 22px; }
.settings-avatar:hover .settings-avatar-hover { opacity: 1; }

.settings-profile-info {
    flex: 1;
    min-width: 0;
}
.settings-profile-name {
    font-size: 24px;
    font-weight: 750;
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.settings-profile-email {
    font-size: 14px;
    font-weight: 450;
    color: var(--text-tertiary);
    margin-top: 3px;
}

/* Profile action buttons */
.settings-profile-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.settings-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--surface-1);
    font-size: 12.5px;
    font-weight: 650;
    font-family: var(--font-body);
    color: var(--system-blue);
    cursor: pointer;
    transition: all 0.15s;
}
.settings-profile-btn .material-symbols-outlined { font-size: 15px; }
.settings-profile-btn:hover {
    background: rgba(0,122,255,0.06);
    border-color: rgba(0,122,255,0.15);
}
.settings-profile-btn.ghost {
    color: var(--text-tertiary);
    border-color: transparent;
    background: transparent;
}
.settings-profile-btn.ghost:hover {
    color: var(--text-secondary);
    background: rgba(0,0,0,0.03);
}

/* Banner row */
.settings-banner-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--surface-2);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.settings-banner-row:hover { background: rgba(0,0,0,0.04); }
.settings-banner-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.settings-banner-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-banner-label .material-symbols-outlined {
    font-size: 18px;
    color: var(--text-tertiary);
}
.settings-banner-action {
    font-size: 13px;
    font-weight: 650;
    color: var(--system-blue);
}

/* ─── SETTINGS ROWS ─── */
.settings-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    min-height: 52px;
}
.settings-row.clickable {
    cursor: pointer;
    transition: background 0.12s;
}
.settings-row.clickable:hover {
    background: rgba(0,0,0,0.018);
}
.settings-row.clickable:active {
    transform: scale(0.99);
    transition: transform 80ms var(--ease-spring);
}

.settings-row-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: currentColor;
    -webkit-background-clip: initial;
    background-clip: initial;
}
.settings-row-icon .material-symbols-outlined {
    font-size: 17px;
}
/* Apple-style: tinted icon with subtle tinted bg */
.settings-row-icon {
    background: none !important;
}
.settings-row.clickable:hover .settings-row-icon {
    transform: scale(1.05);
    transition: transform 0.15s;
}

.settings-row-content {
    flex: 1;
    min-width: 0;
}
.settings-row-label {
    font-size: 15px;
    font-weight: 520;
    color: var(--text-primary);
}
.settings-row-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
    font-weight: 440;
    line-height: 1.35;
}

.settings-row-chevron {
    font-size: 12px;
    color: var(--text-quaternary);
    transition: transform 0.15s;
}
.settings-row.clickable:hover .settings-row-chevron {
    color: var(--text-tertiary);
}

/* Destructive row */
.settings-row-destructive { }
.settings-row-label-danger {
    color: var(--system-red) !important;
    font-weight: 600 !important;
}

.settings-divider {
    height: 0.5px;
    background: rgba(0,0,0,0.04);
    margin-left: 64px;
}

/* ─── CONTROLS ─── */
.settings-select {
    padding: 7px 14px;
    border: 0.5px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 550;
    background: var(--surface-1);
    color: var(--text-primary);
    min-width: 140px;
    font-family: var(--font-body);
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.settings-select:focus {
    outline: none;
    border-color: var(--system-blue);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.settings-input {
    padding: 7px 12px;
    border: 0.5px solid rgba(0,0,0,0.08);
    border-radius: 9px;
    font-size: 15px;
    font-weight: 650;
    text-align: right;
    width: 120px;
    color: var(--text-primary);
    font-family: var(--font-display);
    background: var(--surface-1);
    transition: border-color 0.15s;
}
.settings-input:focus {
    outline: none;
    border-color: var(--system-blue);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.settings-toggle-group {
    display: flex;
    background: rgba(0,0,0,0.05);
    border-radius: 9px;
    padding: 2px;
    overflow: hidden;
}
.settings-toggle-btn {
    padding: 6px 14px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 650;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.15s;
    font-family: var(--font-body);
}
.settings-toggle-btn.active {
    background: var(--glass-bg-thick);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.settings-toggle-btn:hover:not(.active) {
    color: var(--text-secondary);
}

/* ─── EXPANDABLE SECTIONS ─── */
.settings-expandable {
    padding: 4px 16px 12px 64px;
}
.settings-months-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.settings-month-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 550;
    color: var(--text-secondary);
}

/* Weather Location Picker */
.settings-weather-picker {
    padding-bottom: 4px;
}

.settings-weather-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
.settings-weather-search .material-symbols-outlined {
    font-size: 18px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.settings-weather-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 450;
    color: var(--text-primary);
    outline: none;
    font-family: var(--font-body);
    letter-spacing: -0.01em;
}
.settings-weather-search input::placeholder {
    color: var(--text-quaternary);
}

.settings-weather-detect {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(0,122,255,0.08);
    border-radius: 8px;
    color: var(--system-blue);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}
.settings-weather-detect:hover {
    background: rgba(0,122,255,0.14);
    transform: scale(1.05);
}
.settings-weather-detect.detecting {
    animation: detectPulse 1s ease-in-out infinite;
}
@keyframes detectPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.settings-weather-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}

.settings-weather-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
}
.settings-weather-result:hover {
    background: rgba(0,122,255,0.06);
}
.settings-weather-result-icon {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007AFF;
    font-size: 16px;
    flex-shrink: 0;
}
.settings-weather-result-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.settings-weather-result-name {
    font-size: 14px;
    font-weight: 520;
    color: var(--text-primary);
}
.settings-weather-result-detail {
    font-size: 11px;
    font-weight: 450;
    color: var(--text-tertiary);
}

.settings-weather-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-top: 4px;
}
.settings-weather-current .material-symbols-outlined {
    font-size: 15px;
}

.settings-weather-empty {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text-quaternary);
}

.settings-footer {
    text-align: center;
    padding: 24px 0 8px;
    font-size: 12px;
    color: var(--text-quaternary);
}

.btn-danger-text { color: var(--system-red) !important; }
.btn-danger-text:hover { background: rgba(255,59,48,0.08) !important; }

/* Session Restore */
.session-list {
    max-height: 360px;
    overflow-y: auto;
}
.session-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 0.5px solid rgba(0,0,0,0.04);
    cursor: pointer;
    transition: background 0.15s ease;
}
.session-item:hover { background: rgba(0,122,255,0.04); }
.session-item:last-child { border-bottom: none; }
.session-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.session-dot.auto { background: var(--system-blue); }
.session-dot.manual { background: var(--system-green); }
.session-info { flex: 1; }
.session-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.session-meta {
    font-size: 12px;
    color: var(--text-tertiary);
}
.session-restore-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: var(--system-blue);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.session-item:hover .session-restore-btn { opacity: 1; }

/* ==================== PAST MONTH ARCHIVED STYLES ==================== */
th.past-month,
td.past-month {
    opacity: 0.35;
    position: relative;
}

th.past-month {
    color: var(--text-quaternary) !important;
    text-decoration: line-through;
    text-decoration-color: rgba(0,0,0,0.1);
}

th.current-month {
    color: var(--system-blue) !important;
    font-weight: 700;
    position: relative;
}

th.current-month::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--system-blue);
    border-radius: 1px;
}

td.current-month {
    background: rgba(0,122,255,0.04);
    font-weight: 600;
}

/* ==================== SETUP WIZARD ==================== */
.wizard-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out-expo);
}

.wizard-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.wizard-container {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    background: #F5F5F7;
    border-radius: 20px;
    corner-shape: squircle;
    border: 0.5px solid rgba(0,0,0,0.06);
    box-shadow: 0 24px 80px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transform: scale(0.9) translateY(16px);
    opacity: 0;
    transition: transform 0.55s var(--ease-out-expo), opacity var(--duration-slow) var(--ease-out-expo);
}

.wizard-overlay.active .wizard-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.wizard-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0,0,0,0.06);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-tertiary);
    z-index: 10;
    transition: all var(--duration-fast) var(--ease-default);
}

.wizard-close:hover {
    background: rgba(0,0,0,0.1);
    color: var(--text-primary);
}

.wizard-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px 24px 0;
}

.wiz-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,0.1);
    transition: all 0.3s var(--ease-default);
}

.wiz-dot.active {
    width: 24px;
    background: var(--system-blue);
}

.wiz-dot.done {
    background: var(--system-green);
}

.wizard-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 36px;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 36px 24px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.wiz-footer-left, .wiz-footer-right { display: flex; gap: 8px; }

.wiz-btn {
    min-width: 120px;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    padding: 10px 24px;
}

@keyframes wizSlide {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Wizard Step Layouts */
.wiz-hero {
    text-align: center;
    padding: 20px 0;
}

.wiz-icon-large {
    width: 48px;
    height: 48px;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    color: var(--system-blue);
}

.wiz-icon-large.done {
    background: none;
    color: var(--system-green);
}

.wiz-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.wiz-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 420px;
    margin: 0 auto;
}

.wiz-steps-preview {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.wiz-step-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.03);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.wiz-step-preview i {
    font-size: 11px;
    color: var(--system-blue);
}

/* Step Header */
.wiz-step-header {
    text-align: center;
    margin-bottom: 24px;
}

.wiz-icon-medium {
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 24px;
    background: none !important;
}

.wiz-icon-medium.balance { color: var(--system-blue); }
.wiz-icon-medium.income { color: var(--system-green); }
.wiz-icon-medium.expense { color: var(--system-red); }
.wiz-icon-medium.planned { color: var(--system-orange); }
.wiz-icon-medium.savings { color: var(--system-indigo); }

.wiz-step-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    font-family: var(--font-display);
}

.wiz-step-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Wizard Forms */
.wiz-form {
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wiz-input-group {
    position: relative;
}

.wiz-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.wiz-input {
    width: 100%;
    padding: 12px 16px 12px 32px;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-lg);
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-display);
    background: rgba(255,255,255,0.8);
    transition: border-color 0.2s;
    outline: none;
    box-sizing: border-box;
}

.wiz-input:focus {
    border-color: var(--system-blue);
}

.wiz-input-prefix {
    position: absolute;
    bottom: 14px;
    left: 14px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-tertiary);
    pointer-events: none;
}

.wiz-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    background: rgba(255,255,255,0.8);
    outline: none;
    box-sizing: border-box;
}

.wiz-select:focus { border-color: var(--system-blue); }

.wiz-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Wizard Lists */
.wiz-list {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.wiz-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s;
}

.wiz-list-item:last-child { border-bottom: none; }
.wiz-list-item:hover { background: rgba(0,0,0,0.02); }
.wiz-list-item.compact { padding: 8px 16px; }
.wiz-list-item.inactive { opacity: 0.45; }

.wiz-list-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wiz-list-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.wiz-list-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wiz-list-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wiz-name-input {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--text-primary);
    border: none;
    background: transparent;
    padding: 2px 0;
    width: 100%;
    min-width: 0;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.2s ease;
}

.wiz-name-input:focus {
    outline: none;
    border-bottom-color: var(--system-blue);
}

.wiz-name-input:hover {
    border-bottom-color: rgba(0,0,0,0.1);
}

.wiz-delete-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-quaternary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all var(--duration-fast) var(--ease-out-expo);
}

.wiz-delete-btn:hover {
    background: rgba(255,59,48,0.08);
    color: var(--system-red);
}

.wiz-list-meta {
    font-size: 11px;
    color: var(--text-tertiary);
}

.wiz-inline-input {
    width: 90px;
    padding: 6px 10px;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-display);
    text-align: right;
    outline: none;
    background: rgba(255,255,255,0.6);
    box-sizing: border-box;
}

.wiz-inline-input.sm { width: 75px; font-size: 13px; }
.wiz-inline-input:focus { border-color: var(--system-blue); }

.wiz-inline-select {
    padding: 4px 8px;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-sm);
    font-size: 11px;
    background: rgba(255,255,255,0.6);
    outline: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.wiz-inline-select:focus {
    border-color: var(--system-blue);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.12);
}

.wiz-delete-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,59,48,0.08);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--system-red);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.wiz-delete-btn:hover { background: rgba(255,59,48,0.15); }

.wiz-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.wiz-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--system-blue);
}

/* Wizard Categories (Expenses) */
.wiz-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wiz-category {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
}

.wiz-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: rgba(0,0,0,0.02);
    transition: background 0.15s;
}

.wiz-category-header:hover { background: rgba(0,0,0,0.04); }

.wiz-category-name {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wiz-expand-icon {
    font-size: 10px;
    color: var(--text-tertiary);
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wiz-category.expanded .wiz-expand-icon { transform: rotate(90deg); }

.wiz-category-total {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--text-secondary);
}

.wiz-category-items {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-top: 1px solid transparent;
    transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.25s ease,
                border-color 0.2s ease;
}

.wiz-category.expanded .wiz-category-items {
    max-height: 800px;
    opacity: 1;
    border-top-color: rgba(0,0,0,0.04);
}

@media (prefers-reduced-motion: reduce) {
    .wiz-category-items { transition: none; }
    .wiz-expand-icon { transition: none; }
}

/* Wizard Summary */
.wiz-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    margin-top: 16px;
    background: rgba(0,0,0,0.03);
    border-radius: var(--radius-lg);
    font-weight: 600;
}

.wiz-summary-value {
    font-size: 18px;
    font-family: var(--font-display);
}

.wiz-summary-value.positive { color: var(--system-green); }
.wiz-summary-value.negative { color: var(--system-red); }

.wiz-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-tertiary);
    font-size: 14px;
}

/* Wizard Savings Visual */
.wiz-savings-visual {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.wiz-savings-bar {
    height: 28px;
    background: rgba(0,0,0,0.04);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.wiz-sbar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    min-width: 40px;
    transition: width 0.4s var(--ease-default);
}

.wiz-sbar-fill span {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: white;
}

.wiz-sbar-fill.income { background: linear-gradient(90deg, #34C759, #5BD778); }
.wiz-sbar-fill.expense { background: linear-gradient(90deg, #FF3B30, #FF6961); }
.wiz-sbar-fill.savings { background: linear-gradient(90deg, #007AFF, #409CFF); }
.wiz-sbar-fill.spendable { background: linear-gradient(90deg, #FF9500, #FFB340); }

/* Wizard Savings Presets */
.wiz-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.wiz-preset-card {
    background: var(--surface-1);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 14px 12px 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    text-align: center;
}
.wiz-preset-card:hover {
    border-color: var(--system-blue);
    background: color-mix(in srgb, var(--system-blue) 4%, var(--surface-1));
}
.wiz-preset-card.active {
    border-color: var(--system-blue);
    background: color-mix(in srgb, var(--system-blue) 8%, var(--surface-1));
}
.wiz-preset-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}
.wiz-preset-icon {
    font-size: 18px;
    color: var(--system-indigo);
}
.wiz-preset-label {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
}
.wiz-preset-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 8px;
}
.wiz-preset-amount {
    font-size: 20px;
    font-weight: 750;
    color: var(--text-primary);
    font-family: var(--font-display);
    margin-bottom: 4px;
}
.wiz-preset-amount span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}
.wiz-preset-desc {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-tertiary);
}
.wiz-preset-custom {
    margin-bottom: 12px;
}
.wiz-preset-custom-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-1);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    font-size: 13px;
    font-weight: 550;
    color: var(--text-secondary);
    transition: background 0.15s;
}
.wiz-preset-custom-toggle:hover {
    background: var(--surface-2);
}
.wiz-preset-custom-toggle .material-symbols-outlined {
    font-size: 18px;
    color: var(--text-tertiary);
}
.wiz-preset-custom-chev {
    margin-left: auto;
}
.wiz-preset-custom-input {
    transition: max-height 0.25s ease, opacity 0.2s ease;
    max-height: 80px;
    opacity: 1;
    margin-top: 8px;
}
.wiz-savings-guidance {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-tertiary);
    margin-top: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--system-blue) 5%, var(--surface-0));
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--system-blue) 12%, transparent);
}
.wiz-savings-guidance .material-symbols-outlined {
    font-size: 16px;
    color: var(--system-blue);
    flex-shrink: 0;
    margin-top: 1px;
}

@media (max-width: 600px) {
    .wiz-preset-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .wiz-preset-card {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 12px;
    }
    .wiz-preset-top {
        flex-direction: column;
        gap: 2px;
        margin-bottom: 0;
        min-width: 60px;
    }
    .wiz-preset-amount { font-size: 17px; margin-bottom: 0; }
    .wiz-preset-desc { flex: 1; }
}

/* Wizard Final Grid */
.wiz-final-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 380px;
    margin: 20px auto 0;
}

.wiz-final-stat {
    padding: 16px;
    background: rgba(0,0,0,0.03);
    border-radius: var(--radius-lg);
    text-align: center;
}

.wiz-final-stat.highlight {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(142,142,147,0.08));
}

.wiz-final-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.wiz-final-value {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-display);
}

.wiz-final-value.positive { color: var(--system-green); }
.wiz-final-value.negative { color: var(--system-red); }

/* Wizard Responsive */
@media (max-width: 640px) {
    .wizard-overlay { padding: 0; }
    .wizard-container {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .wizard-content { padding: 20px 20px; }
    .wizard-footer { padding: 12px 20px 20px; }
    .wiz-title { font-size: 22px; }
}