/* ==========================================
   1. iOS 26 LIQUID GLASS — VARIABLES & RESET
   ========================================== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    font-size: 16px;
    --bg-deep: #000000;
    --bg-glass: rgba(28, 28, 32, 0.4);
    --bg-glass-heavy: rgba(20, 20, 25, 0.78);
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1A6;
    --text-muted: #6E6E73;
    --accent: #0A84FF;
    --accent-glow: rgba(10, 132, 255, 0.45);
    --success: #32D74B;
    --warning: #FF9F0A;
    --danger: #FF453A;
    --glass-blur: blur(40px) saturate(200%);
    --glass-blur-heavy: blur(60px) saturate(220%);
    --border-glass: rgba(255, 255, 255, 0.10);
    --border-highlight: rgba(255, 255, 255, 0.22);
    --shadow-float: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.15);
    --shadow-xl: 0 50px 100px rgba(0,0,0,0.8), 0 20px 40px rgba(0,0,0,0.4);
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 32px;
    --radius-xl: 40px;
    --radius-pill: 100px;
    --font-ui: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Unbounded', 'Onest', sans-serif;
    --ease-liquid: cubic-bezier(0.25, 1, 0.25, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

html,body { height:100%; width:100%; background-color:var(--bg-deep); scroll-behavior:smooth; }

body {
    font-family: var(--font-ui);
    line-height: 1.5;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

::-webkit-scrollbar { width:0; background:transparent; }

/* ==========================================
   2. LIQUID GLASS BACKGROUND
   ========================================== */
.liquid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: #000;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    will-change: transform;
}

.orb-1 {
    top: -15%; left: -10%;
    width: 60vw; height: 60vw;
    background: var(--orb1, #0A84FF);
    animation: liquidDrift1 22s infinite alternate var(--ease-liquid);
    transition: background 2s ease;
}

.orb-2 {
    bottom: -15%; right: -10%;
    width: 65vw; height: 65vw;
    background: var(--orb2, #5E5CE6);
    animation: liquidDrift2 28s infinite alternate var(--ease-liquid);
    animation-delay: -8s;
}

.orb-3 {
    top: 35%; left: 40%;
    width: 45vw; height: 45vw;
    background: #BF5AF2;
    animation: liquidDrift3 18s infinite alternate var(--ease-liquid);
    animation-delay: -14s;
}

.orb-cursor {
    position: absolute;
    width: 30vw; height: 30vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10,132,255,0.25), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    transition: left 1.4s var(--ease-liquid), top 1.4s var(--ease-liquid);
    will-change: left,top;
    opacity: 0.45;
}

@keyframes liquidDrift1 {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(8%,12%) scale(1.1); }
    66%  { transform: translate(-5%,18%) scale(0.95); }
    100% { transform: translate(12%,8%) scale(1.15); }
}
@keyframes liquidDrift2 {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(-10%,-8%) scale(1.1); }
    66%  { transform: translate(6%,-15%) scale(1.05); }
    100% { transform: translate(-8%,5%) scale(0.95); }
}
@keyframes liquidDrift3 {
    0%   { transform: translate(0,0) scale(1) rotate(0deg); }
    50%  { transform: translate(-12%,8%) scale(1.2) rotate(15deg); }
    100% { transform: translate(10%,-10%) scale(0.9) rotate(-10deg); }
}

/* Goal-reactive tint */
body.goal-danger  .orb-1 { --orb1: #FF453A; }
body.goal-warning .orb-1 { --orb1: #FF9F0A; }
body.goal-success .orb-1 { --orb1: #32D74B; }

/* ==========================================
   3. TOP DYNAMIC ISLAND HEADER
   ========================================== */
.top-header-wrapper {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.top-header {
    background: var(--bg-glass-heavy);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 0;
    box-shadow: var(--shadow-float);
    transition: all 0.5s var(--ease-bounce);
    overflow: hidden;
    min-width: 56px;
}

.header-logo {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 800; letter-spacing: -0.5px;
    white-space: nowrap;
    width: 0; opacity: 0; padding: 0; margin: 0;
    transition: all 0.4s var(--ease-bounce);
    overflow: hidden;
}
.header-logo span { color: var(--text-secondary); font-weight: 500; font-size: 0.85rem; }

.header-center { display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: all 0.4s var(--ease-bounce); }

.header-icon-btn {
    display: flex; align-items:center; justify-content:center;
    width: 40px; height: 40px;
    background: var(--text-primary);
    border-radius: 50%;
    color: #000;
    transition: all 0.4s var(--ease-bounce);
    box-shadow: 0 4px 12px rgba(255,255,255,0.2);
}
.header-icon-btn svg { width:20px; height:20px; transition: all 0.3s var(--ease-bounce); }

.sync-status {
    display: flex; align-items:center; gap:8px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem; font-weight: 600; white-space: nowrap;
    width: 0; opacity: 0; padding: 0; margin: 0;
    transition: all 0.4s var(--ease-bounce);
    overflow: hidden;
}
.sync-dot { width:8px; height:8px; border-radius:50%; background:var(--text-secondary); box-shadow:0 0 10px transparent; transition:all 0.5s; flex-shrink:0; }
.sync-status.ok .sync-dot  { background:var(--success); box-shadow:0 0 12px var(--success); }
.sync-status.ok            { color:var(--success); }
.sync-status.sync .sync-dot{ background:var(--accent); box-shadow:0 0 12px var(--accent); animation:pulse 1.5s infinite; }
.sync-status.err .sync-dot { background:var(--danger); box-shadow:0 0 12px var(--danger); }
.sync-status.err           { color:var(--danger); }

.top-header.expanded                  { gap:12px; padding:8px 12px; }
.top-header.expanded .header-logo    { width:auto; opacity:1; padding:0 0 0 8px; }
.top-header.expanded .sync-status   { width:auto; opacity:1; padding:8px 16px; }

@keyframes pulse { 50% { opacity:0.4; } }

/* ==========================================
   4. DYNAMIC ISLAND NAVIGATION
   ========================================== */
.dynamic-island-wrapper {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 999999 !important;
}

.dynamic-island {
    background: var(--bg-glass-heavy);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill);
    display: flex; align-items: center;
    padding: 8px; gap: 0;
    box-shadow: var(--shadow-float);
    transition: all 0.5s var(--ease-bounce);
    overflow: hidden;
}

.dynamic-island .nav-btn {
    width:0; opacity:0; padding:0; margin:0;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none;
    color:var(--text-secondary);
    border-radius:var(--radius-pill);
    cursor:pointer;
    transition:all 0.4s var(--ease-bounce);
    overflow:hidden;
}

.dynamic-island .nav-btn.active {
    width:56px; height:56px; opacity:1; padding:12px;
    background:var(--text-primary); color:#000;
    box-shadow:0 8px 20px rgba(255,255,255,0.2);
}

.dynamic-island.expanded { gap:8px; padding:8px; }
.dynamic-island.expanded .nav-btn { width:56px; height:56px; opacity:1; padding:12px; background:rgba(255,255,255,0.05); }
.dynamic-island.expanded .nav-btn:hover { background:rgba(255,255,255,0.15); color:#fff; transform:scale(1.07); }
.dynamic-island.expanded .nav-btn.active { background:var(--text-primary); color:#000; transform:scale(1); }
.dynamic-island.expanded .nav-btn.logout-nav-btn:hover { background:rgba(255,69,58,0.15); color:var(--danger); }

.nav-btn svg { width:24px; height:24px; min-width:24px; }

/* ==========================================
   5. MAIN CONTENT & LAYOUT
   ========================================== */
.main-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 84px 24px 140px 24px;
}

.section { display:none; animation:blurFadeIn 0.55s var(--ease-liquid) forwards; }
.section.active { display:block; }

@keyframes blurFadeIn {
    from { opacity:0; filter:blur(16px); transform:translateY(22px) scale(0.97); }
    to   { opacity:1; filter:blur(0);   transform:translateY(0) scale(1); }
}

h1 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    line-height: 1.1;
}

.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.col-full { grid-column:1/-1; }

/* ==========================================
   6. LIQUID GLASS CARDS
   ========================================== */
.card {
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 0.4s var(--ease-bounce), border-color 0.4s, box-shadow 0.4s;
}
.card::before {
    content:'';
    position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(135deg,rgba(255,255,255,0.055) 0%,transparent 55%);
    pointer-events:none;
}
.card:hover {
    border-color:var(--border-highlight);
    transform:translateY(-5px);
    box-shadow:0 30px 60px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.12);
}

.goal-card { background:linear-gradient(145deg,rgba(28,28,32,0.62) 0%,rgba(10,10,15,0.88) 100%); }
.goal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; }
.goal-title { font-family: var(--font-display); font-size:1.05rem; font-weight:700; color:var(--text-secondary); letter-spacing:-0.3px; }
.goal-amounts { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }

.goal-current {
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    transition: color 0.8s;
}

.goal-target { font-size:1.25rem; font-weight:600; color:var(--text-muted); padding-bottom:8px; }

.progress-track {
    height:16px;
    background:rgba(0,0,0,0.5);
    border-radius:100px;
    overflow:hidden;
    box-shadow:inset 0 2px 8px rgba(0,0,0,0.8);
    position:relative;
}

.progress-fill {
    height:100%; border-radius:100px;
    background:linear-gradient(90deg,#32D74B,#0A84FF,#5E5CE6,#32D74B);
    background-size:300% 100%;
    animation:liquidGradient 4s linear infinite;
    box-shadow:0 0 20px rgba(10,132,255,0.5),inset 0 2px 5px rgba(255,255,255,0.35);
    transition:width 1.6s var(--ease-bounce);
    position:relative;
}
.progress-fill::after {
    content:''; position:absolute;
    top:0; bottom:0; right:0;
    width:40px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.75));
    border-radius:50%; filter:blur(5px);
}

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

.stat-card { display:flex; flex-direction:column; justify-content:center; }
.stat-label { font-family: var(--font-ui); font-size:0.78rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; }
.stat-value {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.stat-main .stat-value { color:var(--accent); }
.stat-side .stat-value { color:var(--warning); }

table { width:100%; border-collapse:separate; border-spacing:0 8px; }
th { font-family: var(--font-ui); font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; text-align:left; padding:0 16px 8px; border-bottom:1px solid var(--border-glass); }
td { font-family: var(--font-ui); padding:16px 20px; background:rgba(0,0,0,0.3); font-size:1rem; font-weight:600; transition:background 0.3s; }
tr:hover td { background:rgba(255,255,255,0.05); }
td:first-child { border-radius:16px 0 0 16px; }
td:last-child  { border-radius:0 16px 16px 0; text-align:right; }

/* ==========================================
   6b. INCOME CHART
   ========================================== */
.chart-wrapper {
    position:relative;
    height:180px;
    margin-top:12px;
}
.chart-svg { width:100%; height:100%; overflow:visible; }

.chart-tooltip {
    position:absolute;
    background:var(--bg-glass-heavy);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-glass);
    border-radius:14px;
    padding:10px 16px;
    font-size:0.85rem; font-weight:700;
    color:var(--text-primary);
    pointer-events:none;
    opacity:0; transform:translateY(6px);
    transition:opacity 0.2s, transform 0.2s;
    white-space:nowrap;
    box-shadow:var(--shadow-float);
    z-index:10;
}
.chart-tooltip.visible { opacity:1; transform:translateY(0); }

/* ==========================================
   7. UI COMPONENTS
   ========================================== */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:16px 28px; border:none; border-radius:var(--radius-pill);
    font-family: var(--font-ui); font-size:1rem; font-weight:700;
    cursor:pointer; transition:all 0.3s var(--ease-bounce); white-space:nowrap;
    position:relative; overflow:hidden;
    letter-spacing: 0.2px;
}
.btn::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent); opacity:0; transition:opacity 0.3s; }
.btn:hover::after { opacity:1; }
.btn:active { transform:scale(0.94); }

.btn-primary  { background:var(--text-primary); color:#000; }
.btn-primary:hover { box-shadow:0 10px 25px rgba(255,255,255,0.25); }

.btn-secondary { background:rgba(255,255,255,0.10); color:var(--text-primary); border:1px solid var(--border-glass); }
.btn-secondary:hover { background:rgba(255,255,255,0.16); border-color:var(--border-highlight); }

.btn-danger { background:rgba(255,69,58,0.15); color:var(--danger); border:1px solid rgba(255,69,58,0.3); }
.btn-danger:hover { background:rgba(255,69,58,0.25); }

.btn-icon { padding:12px; border-radius:50%; }

.form-group { margin-bottom:24px; }
.form-label { display:block; font-family: var(--font-ui); font-size:0.82rem; font-weight:700; color:var(--text-secondary); margin-bottom:8px; letter-spacing:0.8px; text-transform:uppercase; }

.form-input,.form-select {
    width:100%; padding:16px 20px;
    background:rgba(0,0,0,0.5);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-md);
    color:var(--text-primary);
    font-family: var(--font-ui); font-size:1rem; font-weight:500;
    transition:all 0.3s; outline:none;
    box-shadow:inset 0 2px 10px rgba(0,0,0,0.3);
}
.form-input:focus { border-color:var(--accent); background:rgba(0,0,0,0.8); box-shadow:inset 0 2px 10px rgba(0,0,0,0.5),0 0 0 4px rgba(10,132,255,0.18); }

.toggle-switch { display:inline-flex; align-items:center; gap:12px; cursor:pointer; font-size:1rem; font-weight:500; }
.toggle-switch input { display:none; }
.toggle-switch span.slider { position:relative; width:52px; height:32px; background:rgba(255,255,255,0.1); border-radius:32px; transition:0.4s var(--ease-bounce); border:1px solid var(--border-glass); }
.toggle-switch span.slider::before { content:''; position:absolute; width:26px; height:26px; left:2px; bottom:2px; background:white; border-radius:50%; transition:0.4s var(--ease-bounce); box-shadow:0 2px 5px rgba(0,0,0,0.5); }
.toggle-switch input:checked+span.slider { background:var(--success); border-color:var(--success); }
.toggle-switch input:checked+span.slider::before { transform:translateX(20px); }

.bonus-toggle { display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:600; color:var(--text-secondary); cursor:pointer; }
.bonus-toggle input { display:none; }
.bonus-toggle .mini-slider { position:relative; width:40px; height:24px; background:rgba(255,255,255,0.1); border-radius:24px; transition:0.4s var(--ease-bounce); border:1px solid var(--border-glass); flex-shrink:0; }
.bonus-toggle .mini-slider::before { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; background:white; border-radius:50%; transition:0.4s var(--ease-bounce); }
.bonus-toggle input:checked+.mini-slider { background:var(--success); border-color:var(--success); }
.bonus-toggle input:checked+.mini-slider::before { transform:translateX(16px); }

.kpi-input-mini { width:100px; padding:8px 12px; background:rgba(0,0,0,0.4); border:1px solid var(--border-glass); border-radius:12px; color:var(--text-primary); font-family:var(--font-ui); font-size:0.9rem; font-weight:600; outline:none; transition:all 0.3s; }
.kpi-input-mini:focus { border-color:var(--accent); }

/* ==========================================
   8. CALENDAR GRID
   ========================================== */
.calendar-container { background:var(--bg-glass); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--border-glass); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-float); }
.calendar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.calendar-header-left { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.calendar-header-right { display:flex; align-items:center; gap:12px; }
.bonus-controls { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; aspect-ratio:7/6; }

.weekday-header { display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; padding:8px 0; }
.weekday-header.weekend { color:var(--danger); }

.day-cell {
    background:rgba(255,255,255,0.03);
    border:1px solid transparent;
    border-radius:var(--radius-sm);
    cursor:pointer;
    display:flex; flex-direction:column; justify-content:flex-start;
    padding:8px;
    transition:all 0.28s var(--ease-bounce);
    position:relative; overflow:hidden;
    aspect-ratio:1;
    will-change:transform;
}
.day-cell::before { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,0.05),transparent); opacity:0; transition:opacity 0.3s; }
.day-cell:hover { background:rgba(255,255,255,0.08); border-color:var(--border-highlight); transform:scale(1.05); }
.day-cell:hover::before { opacity:1; }
.day-cell.other-month { opacity:0.18; pointer-events:none; }

.day-number { font-size:clamp(0.7rem,1.5vw,1rem); font-weight:700; color:var(--text-secondary); text-align:right; line-height:1; }

.day-cell.today { border-color:rgba(255,255,255,0.28) !important; background:rgba(255,255,255,0.06) !important; }
.day-cell.today .day-number { color:var(--text-primary); background:var(--accent); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; margin-left:auto; }

.has-shift { background:rgba(10,132,255,0.12); border:1px solid rgba(10,132,255,0.3); }
.has-shift .day-number { color:var(--text-primary); }

.shift-badge { margin-top:auto; padding:3px 6px; border-radius:6px; font-size:0.6rem; font-weight:700; text-transform:uppercase; background:rgba(0,0,0,0.5); display:flex; justify-content:space-between; white-space:nowrap; overflow:hidden; }
.shift-badge.office { color:var(--accent); }
.shift-badge.home   { color:var(--success); }

.money-badge { font-size:clamp(0.6rem,1.2vw,0.85rem); font-weight:800; color:var(--text-primary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.holiday { border:1px solid rgba(255,69,58,0.3); background:rgba(255,69,58,0.05); }
.holiday-name { font-size:0.52rem; color:var(--danger); font-weight:700; margin-top:2px; line-height:1.1; }

.has-sidejob { background:rgba(255,159,10,0.12); border-color:rgba(255,159,10,0.3); }
.sidejob-count { background:var(--warning); color:#000; padding:2px 6px; border-radius:4px; font-weight:800; font-size:clamp(0.52rem,1vw,0.7rem); display:inline-block; margin-top:auto; }

/* ==========================================
   9. MODALS & CONTEXT MENUS
   ========================================== */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    display:flex; align-items:center; justify-content:center;
    z-index:2000;
    opacity:0; pointer-events:none;
    transition:all 0.4s var(--ease-liquid);
    padding:16px;
}
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal {
    background:rgba(22,22,28,0.90);
    backdrop-filter:var(--glass-blur-heavy); -webkit-backdrop-filter:var(--glass-blur-heavy);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-xl);
    padding:40px;
    width:100%; max-width:500px;
    box-shadow:var(--shadow-xl);
    transform:scale(0.9) translateY(20px);
    transition:all 0.45s var(--ease-bounce);
    position:relative; overflow:hidden;
    font-family: var(--font-ui);
}
.modal::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); }
.modal-overlay.open .modal { transform:scale(1) translateY(0); }

.context-menu { position:fixed; z-index:3000; min-width:200px; background:rgba(28,28,34,0.94); backdrop-filter:var(--glass-blur); border:1px solid var(--border-glass); border-radius:20px; padding:8px; box-shadow:var(--shadow-xl); transform-origin:top left; animation:menuPop 0.28s var(--ease-bounce) forwards; }
@keyframes menuPop { from{opacity:0;transform:scale(0.78);}to{opacity:1;transform:scale(1);} }
.context-menu.hidden { display:none; }
.context-menu button { width:100%; text-align:left; background:transparent; border:none; color:var(--text-primary); padding:12px 16px; border-radius:12px; font-family: var(--font-ui); font-size:0.95rem; font-weight:600; cursor:pointer; transition:background 0.2s; letter-spacing:0.1px; }
.context-menu button:hover { background:rgba(255,255,255,0.1); }
.context-menu .danger { color:var(--danger); }

.alert { display:flex; align-items:center; gap:16px; padding:16px 24px; border-radius:var(--radius-md); margin-bottom:24px; font-weight:600; }
.alert-warning { background:rgba(255,159,10,0.15); color:var(--warning); border:1px solid rgba(255,159,10,0.3); }

.hidden { display:none !important; }

/* ==========================================
   10. SKELETON LOADERS
   ========================================== */
.skeleton { background:linear-gradient(90deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.04) 80%); background-size:400% 100%; animation:shimmer 1.6s ease-in-out infinite; border-radius:12px; }
@keyframes shimmer { 0%{background-position:100% 0;}100%{background-position:-100% 0;} }

/* ==========================================
   11. NEXT SHIFT WIDGET
   ========================================== */
.next-shift-widget { display:flex; align-items:center; gap:16px; padding:20px 24px; background:rgba(10,132,255,0.08); border:1px solid rgba(10,132,255,0.2); border-radius:var(--radius-md); margin-bottom:8px; }
.next-shift-dot { width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent-glow); flex-shrink:0; animation:pulse 2s infinite; }
.next-shift-info { flex:1; }
.next-shift-label { font-size:0.82rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.next-shift-date { font-size:1.05rem; font-weight:800; color:var(--text-primary); }

/* ==========================================
   12. UNDO TOAST
   ========================================== */
.undo-toast {
    position:fixed; bottom:100px; left:50%;
    transform:translateX(-50%) translateY(20px);
    z-index:99998;
    background:rgba(28,28,34,0.96);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-pill);
    padding:14px 20px;
    display:flex; align-items:center; gap:16px;
    box-shadow:var(--shadow-float);
    opacity:0; transition:all 0.4s var(--ease-bounce);
    pointer-events:none; white-space:nowrap;
    font-weight:600; font-size:0.95rem;
}
.undo-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:all; }
.undo-toast-btn { background:var(--accent); color:#fff; border:none; border-radius:20px; padding:6px 14px; font-size:0.85rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
.undo-toast-btn:hover { background:#1a90ff; }

/* ==========================================
   13. ACCENT SWATCHES
   ========================================== */
.accent-swatches { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.accent-swatch { width:40px; height:40px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:all 0.3s var(--ease-bounce); }
.accent-swatch:hover { transform:scale(1.15); }
.accent-swatch.active { border-color:white; box-shadow:0 0 0 2px rgba(255,255,255,0.3); transform:scale(1.12); }

/* ==========================================
   14. PULL-TO-REFRESH
   ========================================== */
.ptr-indicator { position:fixed; top:-60px; left:50%; transform:translateX(-50%); z-index:500; background:var(--bg-glass-heavy); backdrop-filter:var(--glass-blur); border:1px solid var(--border-glass); border-radius:var(--radius-pill); padding:12px 20px; font-size:0.85rem; font-weight:600; color:var(--text-secondary); display:flex; align-items:center; gap:10px; transition:top 0.3s var(--ease-bounce); box-shadow:var(--shadow-float); }
.ptr-indicator.visible { top:80px; }
.ptr-spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,0.2); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* ==========================================
   15. AUTH SCREEN
   ========================================== */
@keyframes authPop { from{opacity:0;transform:scale(0.82) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);} }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-12px);} 40%{transform:translateX(12px);} 60%{transform:translateX(-8px);} 80%{transform:translateX(8px);} }
@keyframes siteOpen { from{transform:scale(0.9);filter:blur(10px);}to{transform:scale(1);filter:blur(0);} }

body.authorized .auth-overlay { opacity:0; pointer-events:none; transform:scale(1.5); filter:blur(20px); }
body.authorized .main-content { animation:siteOpen 1.5s cubic-bezier(0.2,0.8,0.2,1) forwards; }

/* ==========================================
   16. RESPONSIVE
   ========================================== */
@media (max-width:768px) {
    .grid { grid-template-columns:1fr; }
    h1 { font-size:1.8rem; flex-wrap:wrap; gap:16px; }
    .goal-current { font-size:2.6rem; }
    .calendar-container { padding:16px; }
    .calendar-header { flex-direction:column; align-items:flex-start; }
    .calendar-header-left,.calendar-header-right { width:100%; }
    .bonus-controls { width:100%; justify-content:flex-start; }
    .calendar-grid { gap:4px; aspect-ratio:7/6; }
    .day-cell { padding:4px; border-radius:12px; }
    .day-number { font-size:0.68rem; }
    .shift-badge { font-size:0.5rem; padding:2px 4px; }
    .money-badge { font-size:0.52rem; }
    .modal { border-radius:36px 36px 0 0; margin-top:auto; padding:32px 24px; transform:translateY(100%); }
    .modal-overlay { align-items:flex-end; padding:0; }
    .modal-overlay.open .modal { transform:translateY(0); }
    .top-header.expanded { padding:8px; gap:8px; }
    .top-header.expanded .header-logo { font-size:1rem; padding-left:4px; }
    .header-icon-btn { width:36px; height:36px; }
    .header-icon-btn svg { width:18px; height:18px; }
}

@media (min-width:769px) { body { zoom:0.82; } }

/* ==========================================
   STAT CARD ENHANCEMENTS
   ========================================== */
.stat-card {
    position: relative;
    overflow: hidden;
    min-height: 160px;
}

.stat-card-bg-emoji {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 3.5rem;
    line-height: 1;
    opacity: 1;
    pointer-events: none;
    user-select: none;
    animation: floatEmoji 5s ease-in-out infinite;
    transform-origin: center bottom;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.stat-main .stat-card-bg-emoji { animation-delay: 0s; }
.stat-side .stat-card-bg-emoji { animation-delay: -2.5s; }

@keyframes floatEmoji {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-6px) rotate(3deg); }
}

.stat-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Weekly bar chart inside stat cards */
.stat-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 40px;
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.stat-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    height: 100%;
    justify-content: flex-end;
}

.stat-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.7s cubic-bezier(0.34,1.56,0.64,1);
}

.stat-main .stat-bar { background: linear-gradient(180deg, #0A84FF, rgba(10,132,255,0.35)); }
.stat-side .stat-bar { background: linear-gradient(180deg, #FF9F0A, rgba(255,159,10,0.35)); }
.stat-bar.current { box-shadow: 0 0 8px rgba(255,255,255,0.3); }

.stat-bar-label {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1;
}

/* ==========================================
   SETTINGS — iOS-STYLE LIST
   ========================================== */
.settings-group {
    margin-bottom: 32px;
}

.settings-group-label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 4px;
    margin-bottom: 10px;
}

.settings-list {
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s;
}

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

.settings-row-clickable {
    cursor: pointer;
}

.settings-row-clickable:hover {
    background: rgba(255,255,255,0.05);
}

.settings-row-clickable:active {
    background: rgba(255,255,255,0.08);
    transform: scale(0.99);
}

.settings-row-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.settings-row-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.06);
}

.settings-row-title {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.settings-row-sub {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

.settings-input {
    width: 100px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    outline: none;
    transition: all 0.3s;
    text-align: right;
    flex-shrink: 0;
    -moz-appearance: textfield;
}

.settings-input::-webkit-outer-spin-button,
.settings-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.settings-input:focus {
    border-color: var(--accent);
    background: rgba(0,0,0,0.7);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.18);
}

.settings-save-btn {
    width: 100%;
    margin-top: 14px;
    height: 54px;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.settings-row-accent {
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 20px;
}

.accent-swatches-inline {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.accent-swatches-inline .accent-swatch {
    width: 34px;
    height: 34px;
}

@media (max-width: 768px) {
    .settings-input { width: 80px; font-size: 0.95rem; }
    .settings-row-icon { width: 36px; height: 36px; font-size: 1.3rem; }
}

/* ==========================================
   SETTINGS 2-COLUMN LAYOUT
   ========================================== */
.settings-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    align-items: start;
}

.settings-col {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .settings-2col {
        grid-template-columns: 1fr;
    }
}