/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== VARIABLES ===== */
:root{
  --bg:#0a0a0f;
  --bg-elevated:#12121a;
  --bg-card:rgba(255,255,255,0.03);
  --bg-card-hover:rgba(255,255,255,0.05);
  --bg-card-border:rgba(255,255,255,0.06);
  --glass-bg:rgba(18,18,30,0.6);
  --glass-border:rgba(255,255,255,0.08);
  --blue:#00d4ff;
  --blue-dim:rgba(0,212,255,0.15);
  --green:#00ff88;
  --green-dim:rgba(0,255,136,0.12);
  --orange:#ff9500;
  --orange-dim:rgba(255,149,0,0.12);
  --red:#ff3b5c;
  --red-dim:rgba(255,59,92,0.1);
  --text:#e8e8ed;
  --text-secondary:#b0b0c0;
  --text-muted:#5a5a6e;
  --radius:18px;
  --radius-sm:12px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --shadow-glow:0 0 40px rgba(0,212,255,0.06);
}

.hidden{display:none!important}

/* ===== LOGIN ===== */
#login-screen{
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(0,212,255,0.04) 0%,transparent 60%);
}
.login-container{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:20px}
.login-title{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.3px}
.login-subtitle{font-size:14px;color:var(--text-muted);margin-top:-8px}
.login-form{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:8px}
.login-form input{
  width:100%;background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid var(--glass-border);
  border-radius:var(--radius-sm);padding:14px 18px;color:#fff;font-size:16px;
  font-weight:500;outline:none;transition:border-color .2s;
}
.login-form input:focus{border-color:var(--blue);box-shadow:0 0 20px rgba(0,212,255,0.08)}
.login-form input::placeholder{color:var(--text-muted)}
.login-error{color:var(--red);font-size:13px;font-weight:600;min-height:18px}

/* ===== CAN IMAGES ===== */
.can-img{max-height:160px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,212,255,0.15))}
.ob-can-img{max-height:180px;margin-bottom:8px}
.fab-can-img{
  height:44px;width:auto;object-fit:contain;
}

/* ===== SCREENS ===== */
.screen{min-height:100vh;min-height:100dvh}

/* ===== CSS CAN VISUAL (Onboarding) ===== */
.ob-can-visual{
  width:100px;height:160px;margin:0 auto 20px;position:relative;
  filter:drop-shadow(0 20px 40px rgba(0,212,255,0.2));
}
.css-can{
  width:100%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;
}
.can-top{
  width:50px;height:10px;
  background:linear-gradient(180deg,#c0c0c8 0%,#a8a8b0 50%,#b0b0b8 100%);
  border-radius:4px 4px 0 0;
  position:relative;z-index:2;
}
.can-top::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:20px;height:8px;background:linear-gradient(180deg,#d0d0d8,#b8b8c0);
  border-radius:4px 4px 2px 2px;
}
.can-body{
  width:70px;flex:1;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1a3a5c 0%,#0d2847 30%,#162d50 50%,#1a3a5c 70%,#0d2847 100%);
  border-radius:0 0 6px 6px;
  border:1px solid rgba(0,212,255,0.15);
}
.can-body::before{
  content:'';position:absolute;top:0;left:0;right:0;height:20px;
  background:linear-gradient(180deg,#b8b8c0 0%,#2a4a6c 40%,transparent 100%);
}
.can-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;z-index:2;
}
.can-brand{
  font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  color:#fff;text-shadow:0 0 10px rgba(0,212,255,0.6);
}
.can-shine{
  position:absolute;top:0;left:15%;width:25%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
  transform:skewX(-10deg);
}
.can-bottom{
  width:68px;height:6px;
  background:linear-gradient(180deg,#2a4a6c,#b0b0b8);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
}

/* ===== ONBOARDING ===== */
#onboarding{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;position:relative;
  background:radial-gradient(ellipse at 50% 30%,rgba(0,212,255,0.04) 0%,transparent 60%);
}
.onboarding-container{width:100%;max-width:400px}
.ob-step{display:none;animation:fadeUp .5s cubic-bezier(.16,1,.3,1)}
.ob-step.active{display:flex;flex-direction:column;align-items:center;gap:24px}

.ob-icon-wrap{
  width:72px;height:72px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);border:1px solid rgba(0,212,255,0.15);
  border-radius:20px;margin-bottom:4px;
}
.ob-svg-icon{width:32px;height:32px;color:var(--blue)}

.ob-step h1{font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.15;color:#fff}
.ob-step h2{font-size:22px;font-weight:700;line-height:1.3;color:#fff}
.ob-subtitle{color:var(--text-secondary);font-size:15px;line-height:1.6;max-width:300px}

.ob-choices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.ob-choice{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid var(--glass-border);
  border-radius:var(--radius-sm);padding:14px 20px;color:var(--text-secondary);
  font-size:15px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);
  min-width:70px;display:flex;align-items:center;gap:8px;
}
.ob-choice:hover,.ob-choice:active{border-color:rgba(0,212,255,.25);background:rgba(0,212,255,.04)}
.ob-choice.selected{
  border-color:var(--blue);background:rgba(0,212,255,.08);color:var(--blue);
  box-shadow:0 0 20px rgba(0,212,255,0.1),inset 0 0 20px rgba(0,212,255,0.03);
}

.choice-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.classic-dot{background:linear-gradient(135deg,#1a3a5c,#4a7aac)}
.sf-dot{background:linear-gradient(135deg,#3a3a5c,#8a8aac)}

.choice-icon{display:flex;align-items:center;flex-shrink:0}

.ob-price-input{position:relative;width:160px}
.ob-price-input input{
  width:100%;background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid var(--glass-border);
  border-radius:var(--radius-sm);padding:16px 40px 16px 20px;color:#fff;font-size:28px;
  font-weight:800;text-align:center;outline:none;transition:border-color .2s;
}
.ob-price-input input:focus{border-color:var(--blue);box-shadow:0 0 20px rgba(0,212,255,0.1)}
.ob-price-currency{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--text-muted);font-weight:700}
.ob-hint{color:var(--text-muted);font-size:13px}

/* Projection screen */
.ob-projection{width:100%}
.ob-projection h2{font-size:20px;font-weight:700;margin-bottom:20px;color:var(--text-secondary)}
.projection-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.proj-card{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:var(--radius-sm);padding:18px 12px;text-align:center;
  border:1px solid var(--glass-border);transition:transform .3s;
}
.proj-card.proj-bad{border-color:rgba(255,59,92,.15);background:rgba(255,59,92,.04)}
.proj-card.proj-good{border-color:rgba(0,255,136,.15);background:rgba(0,255,136,.04)}
.proj-number{font-size:30px;font-weight:800;margin-bottom:4px;letter-spacing:-.5px}
.proj-bad .proj-number{color:var(--red)}
.proj-good .proj-number{color:var(--green)}
.proj-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.proj-divider{margin:24px 0;display:flex;align-items:center;gap:12px}
.proj-divider::before,.proj-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent)}
.proj-divider span{font-size:13px;color:var(--green);font-weight:700;white-space:nowrap;letter-spacing:.3px}

/* Onboarding dots */
.ob-dots{position:absolute;bottom:40px;display:flex;gap:8px}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.1);transition:all .4s cubic-bezier(.16,1,.3,1)}
.ob-dot.active{background:var(--blue);width:28px;border-radius:4px;box-shadow:0 0 12px rgba(0,212,255,0.3)}

/* ===== BUTTONS ===== */
.btn-primary{
  background:linear-gradient(135deg,var(--blue),#00b8d4,var(--green));
  background-size:200% 200%;animation:gradientShift 3s ease infinite;
  border:none;border-radius:var(--radius-sm);padding:16px 32px;color:#0a0a0f;
  font-size:16px;font-weight:700;cursor:pointer;width:100%;max-width:300px;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 4px 20px rgba(0,212,255,0.25);
  letter-spacing:.2px;
}
.btn-primary:active{transform:scale(.96);box-shadow:0 2px 10px rgba(0,212,255,0.15)}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:10px;padding:12px 20px;color:var(--text-secondary);font-size:14px;font-weight:600;
  cursor:pointer;text-decoration:none;text-align:center;width:100%;margin-top:8px;
  transition:all .25s;
}
.btn-secondary:hover{border-color:rgba(0,212,255,0.3);color:var(--blue)}
.btn-small{width:auto;padding:8px 16px;font-size:13px;margin-top:12px}

.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,59,92,.06);border:1px solid rgba(255,59,92,.15);
  border-radius:10px;padding:12px 20px;color:var(--red);font-size:14px;font-weight:600;
  cursor:pointer;width:100%;margin-top:8px;transition:all .25s;
}
.btn-danger:hover{background:rgba(255,59,92,.1);border-color:rgba(255,59,92,.25)}
.btn-reset-all{margin-top:0}

/* ===== APP LAYOUT ===== */
#app{padding-bottom:calc(80px + var(--safe-bottom))}
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 8px;position:sticky;top:0;
  background:linear-gradient(180deg,var(--bg) 60%,transparent);
  z-index:10;
}
.app-title{font-size:20px;font-weight:800;letter-spacing:-.3px;color:#fff}
.streak-badge{
  display:flex;align-items:center;gap:6px;
  background:var(--orange-dim);border:1px solid rgba(255,149,0,.2);
  border-radius:20px;padding:6px 14px;font-size:13px;font-weight:700;color:var(--orange);
}
.streak-icon{flex-shrink:0}

.tab-content{display:none;padding:0 16px 16px}
.tab-content.active{display:block;animation:fadeIn .3s ease}

/* ===== CARDS (Glassmorphism) ===== */
.card{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:20px;margin-bottom:12px;
  transition:transform .2s;
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
}
.card h3{
  font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:16px;display:flex;align-items:center;gap:6px;
}
.section-icon{flex-shrink:0}

/* Timer card */
.card-timer{
  text-align:center;position:relative;
  background:rgba(0,212,255,0.02);border-color:rgba(0,212,255,0.08);
}
.timer-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:200px;height:80px;background:radial-gradient(ellipse,rgba(0,212,255,0.06),transparent 70%);
  pointer-events:none;
}
.timer-label{font-size:12px;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.timer-value{
  font-size:48px;font-weight:800;color:var(--blue);letter-spacing:3px;
  font-variant-numeric:tabular-nums;position:relative;z-index:1;
}

/* Today card */
.today-header{display:flex;justify-content:space-between;align-items:baseline}
.today-label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.today-count{font-size:54px;font-weight:800;color:#fff;line-height:1;letter-spacing:-1px}
.goal-dots{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.goal-dot{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.08);
  transition:all .4s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.goal-dot.filled{
  background:var(--blue);border-color:var(--blue);
  box-shadow:0 0 12px rgba(0,212,255,0.35);
}
.goal-dot.over{
  background:var(--red);border-color:var(--red);
  box-shadow:0 0 12px rgba(255,59,92,0.35);
  animation:dotPulse 2s infinite;
}
.today-detail{font-size:13px;color:var(--text-muted);margin-top:6px;font-weight:500}

/* Health bars */
.health-bar-group{display:flex;flex-direction:column;gap:18px}
.health-bar-item{display:flex;flex-direction:column;gap:6px}
.hb-header{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.hb-label{display:flex;align-items:center;gap:8px;color:var(--text-secondary)}
.hb-icon{width:16px;height:16px;border-radius:4px;display:inline-block;flex-shrink:0}
.hb-icon-sugar{background:linear-gradient(135deg,#f5e6d3,#e8d5c0);border:1px solid rgba(255,255,255,0.1)}
.hb-icon-caffeine{background:linear-gradient(135deg,#00d4ff,#0088aa);border:1px solid rgba(0,212,255,0.2)}
.hb-icon-cal{background:linear-gradient(135deg,#ff6b35,#ff3b5c);border:1px solid rgba(255,59,92,0.2)}
.hb-value{color:var(--blue);font-variant-numeric:tabular-nums;font-weight:700}
.hb-track{
  height:6px;border-radius:3px;background:rgba(255,255,255,0.04);overflow:hidden;
  position:relative;
}
.hb-fill{
  height:100%;border-radius:3px;transition:width .8s cubic-bezier(.16,1,.3,1),background .3s;
  min-width:2px;position:relative;
}
.hb-fill.low{background:linear-gradient(90deg,#00cc6a,var(--green))}
.hb-fill.mid{background:linear-gradient(90deg,#00b8d4,var(--blue))}
.hb-fill.high{background:linear-gradient(90deg,#ffa040,var(--orange))}
.hb-fill.danger{background:linear-gradient(90deg,#ff5070,var(--red));animation:barPulse 2s infinite}
.hb-ref{font-size:11px;color:var(--text-muted);font-weight:500}

/* Sugar cubes - realistic white/beige cubes */
.sugar-cubes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sugar-cube{
  width:22px;height:22px;border-radius:3px;
  background:linear-gradient(145deg,#f5f0e8 0%,#ede5d8 40%,#e0d5c5 100%);
  box-shadow:
    1px 1px 2px rgba(0,0,0,0.3),
    inset -1px -1px 1px rgba(0,0,0,0.05),
    inset 1px 1px 2px rgba(255,255,255,0.8);
  position:relative;
  animation:cubeAppear .4s cubic-bezier(.16,1,.3,1) backwards;
}
.sugar-cube::before{
  content:'';position:absolute;top:2px;left:2px;width:6px;height:6px;
  background:rgba(255,255,255,0.5);border-radius:1px;
}
.sugar-cube::after{
  content:'';position:absolute;bottom:3px;right:3px;width:4px;height:4px;
  background:rgba(200,190,175,0.4);border-radius:1px;
}
.sugar-cube:nth-child(n+11){
  background:linear-gradient(145deg,#ffd4cc 0%,#ffbcb0 40%,#ffa898 100%);
  box-shadow:
    1px 1px 2px rgba(0,0,0,0.3),
    inset -1px -1px 1px rgba(0,0,0,0.05),
    inset 1px 1px 2px rgba(255,220,210,0.8);
}
.sugar-cube:nth-child(n+11)::before{background:rgba(255,240,235,0.5)}
.sugar-cube:nth-child(n+11)::after{background:rgba(255,180,160,0.3)}
.sugar-label{font-size:13px;color:var(--text-muted);font-weight:500}

/* Money */
.money-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center}
.money-item{padding:8px 4px;border-radius:10px;background:rgba(255,255,255,0.02)}
.money-value{font-size:24px;font-weight:800;color:#fff;margin-bottom:4px;letter-spacing:-.5px}
.money-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* Savings */
.savings-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.saving-item{
  text-align:center;padding:14px 10px;
  background:rgba(0,255,136,.03);border-radius:var(--radius-sm);
  border:1px solid rgba(0,255,136,.08);
}
.saving-value{font-size:22px;font-weight:800;color:var(--green);letter-spacing:-.3px}
.saving-label{font-size:10px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* Fact */
.card-fact{
  display:flex;gap:14px;align-items:flex-start;
  background:rgba(0,212,255,.02);border-color:rgba(0,212,255,.06);
}
.fact-icon-wrap{
  flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-dim);border-radius:10px;
}
.fact-text{font-size:13px;line-height:1.6;color:var(--text-secondary);font-weight:450}

/* Motivation card */
.card-motivation{
  text-align:center;
  background:linear-gradient(135deg,rgba(0,212,255,0.03),rgba(0,255,136,0.03));
  border-color:rgba(0,255,136,0.1);
}
.motivation-text{
  font-size:15px;font-weight:600;line-height:1.6;
  color:var(--text-secondary);
}
.motivation-text strong{color:var(--green);font-weight:800}
.motivation-text .motivation-negative strong{color:var(--red)}

/* ===== CHART ===== */
.chart-container{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:24px;position:relative}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.chart-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;position:relative}
.chart-bar{
  width:100%;border-radius:8px 8px 2px 2px;
  background:linear-gradient(180deg,var(--blue),rgba(0,212,255,.2));
  transition:height .6s cubic-bezier(.16,1,.3,1);min-height:2px;position:relative;
}
.chart-bar::after{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.08),transparent);
  border-radius:8px 8px 0 0;
}
.chart-bar.over-goal{background:linear-gradient(180deg,var(--red),rgba(255,59,92,.2))}
.chart-bar-count{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:12px;font-weight:700;color:#fff;
}
.chart-bar-label{font-size:10px;color:var(--text-muted);font-weight:600;letter-spacing:.3px}
.chart-goal-line{
  position:absolute;left:0;right:0;border-top:2px dashed rgba(0,255,136,.3);z-index:1;
}
.chart-goal-tag{position:absolute;right:0;top:-16px;font-size:10px;color:var(--green);font-weight:700;letter-spacing:.3px}

/* ===== HISTORY ===== */
.history-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.history-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;background:rgba(255,255,255,0.02);border-radius:var(--radius-sm);
  border:1px solid transparent;transition:all .2s;
}
.history-item:hover{border-color:var(--glass-border);background:rgba(255,255,255,0.03)}
.history-item-left{display:flex;flex-direction:column;gap:3px}
.history-date{font-size:14px;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.history-can-icon{
  display:inline-block;width:10px;height:16px;border-radius:2px;
  background:linear-gradient(180deg,#b8b8c0 0%,#1a3a5c 20%,#0d2847 80%,#b0b0b8 100%);
  flex-shrink:0;
}
.history-detail{font-size:12px;color:var(--text-muted);font-weight:500}
.history-delete{
  background:none;border:none;color:var(--text-muted);cursor:pointer;
  padding:6px 8px;border-radius:8px;transition:all .2s;display:flex;align-items:center;
}
.history-delete svg{width:16px;height:16px}
.history-delete:hover{color:var(--red);background:rgba(255,59,92,.08)}

/* ===== TOTALS ===== */
.totals-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.total-item{
  text-align:center;padding:14px 10px;
  background:rgba(255,255,255,0.02);border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.03);
}
.total-value{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.3px}
.total-label{font-size:10px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* ===== SETTINGS ===== */
.setting-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.04);
}
.setting-row:last-child{border:none}
.setting-row label{font-size:14px;font-weight:600;color:var(--text-secondary)}
.setting-row select,.setting-row input{
  background:var(--bg-elevated);border:1px solid var(--glass-border);border-radius:8px;
  padding:8px 12px;color:#fff;font-size:14px;text-align:right;width:120px;outline:none;
  transition:border-color .2s,box-shadow .2s;font-weight:600;
  -webkit-appearance:none;appearance:none;
}
.setting-row select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%235a5a6e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.setting-row select:focus,.setting-row input:focus{border-color:var(--blue);box-shadow:0 0 12px rgba(0,212,255,0.08)}
.setting-desc{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:12px;font-weight:450}
.shortcut-url{
  background:var(--bg-elevated);border-radius:8px;padding:12px;font-size:12px;color:var(--blue);
  word-break:break-all;margin-bottom:8px;font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  border:1px solid var(--glass-border);font-weight:500;
}

/* Shortcut modal */
.modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .2s;
}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.modal-content{
  background:var(--bg-elevated);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:24px 24px 0 0;padding:28px 24px;width:100%;max-width:500px;
  max-height:85vh;overflow-y:auto;position:relative;z-index:1;
  animation:slideUp .35s cubic-bezier(.16,1,.3,1);
}
.modal-close{
  float:right;background:rgba(255,255,255,0.06);border:none;color:var(--text-muted);
  cursor:pointer;padding:8px;border-radius:10px;line-height:0;transition:all .2s;
}
.modal-close:hover{background:rgba(255,255,255,0.1);color:var(--text)}
.modal-content h2{font-size:18px;font-weight:700;margin-bottom:24px;color:#fff}
.shortcut-steps{display:flex;flex-direction:column;gap:18px}
.shortcut-step{display:flex;gap:14px;align-items:flex-start}
.step-num{
  width:30px;height:30px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),#00b8d4);color:#0a0a0f;
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.shortcut-step p{font-size:14px;line-height:1.6;color:var(--text-muted);font-weight:450}
.shortcut-step strong{color:var(--text)}
.shortcut-url-box{
  background:var(--bg);border:1px solid var(--glass-border);
  border-radius:8px;padding:10px;font-size:11px;color:var(--blue);
  word-break:break-all;margin-top:8px;font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}

/* ===== FAB ===== */
#fab{
  position:fixed;bottom:calc(72px + var(--safe-bottom));left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--blue),#00b8d4,var(--green));
  background-size:200% 200%;animation:gradientShift 4s ease infinite;
  border:none;border-radius:50px;padding:6px 24px 6px 6px;
  color:#0a0a0f;font-size:15px;font-weight:800;cursor:pointer;z-index:50;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 4px 30px rgba(0,212,255,0.3),0 0 60px rgba(0,212,255,0.1);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;
  letter-spacing:.3px;overflow:hidden;
}
#fab:active{transform:translateX(-50%) scale(.9);box-shadow:0 2px 15px rgba(0,212,255,0.2)}
.fab-text{line-height:1}

/* ===== TOAST ===== */
.toast{
  position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:16px;right:16px;
  max-width:400px;margin:0 auto;
  background:rgba(18,18,30,0.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,255,136,.2);
  border-radius:var(--radius-sm);padding:14px 20px;color:var(--green);font-size:14px;font-weight:600;
  z-index:300;animation:slideDown .35s cubic-bezier(.16,1,.3,1);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}

/* Toast undo button */
.toast-undo{
  background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.2);border-radius:8px;
  color:var(--green);padding:6px 14px;font-size:13px;
  font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0;
}
.toast-undo:hover{background:rgba(0,255,136,.15)}
.toast-undo:active{transform:scale(.95)}

/* ===== BOTTOM NAV ===== */
#bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(10,10,15,.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(255,255,255,0.04);
  display:flex;padding:6px 0 calc(6px + var(--safe-bottom));z-index:100;
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px 6px;
  transition:color .3s;position:relative;
}
.nav-btn.active{color:var(--blue)}
.nav-btn.active::before{
  content:'';position:absolute;top:-1px;left:25%;right:25%;height:2px;
  background:var(--blue);border-radius:0 0 2px 2px;
  box-shadow:0 0 8px rgba(0,212,255,0.4);
}
.nav-icon-svg{width:22px;height:22px}
.nav-label{font-size:10px;font-weight:600;letter-spacing:.3px}

/* ===== TROPHIES ===== */
.trophies-grid{display:flex;flex-direction:column;gap:8px}
.trophy{
  display:flex;align-items:center;gap:14px;
  padding:14px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.03);
  background:rgba(255,255,255,0.01);
  transition:all .3s;
}
.trophy.unlocked{
  background:rgba(255,199,0,0.04);
  border-color:rgba(255,199,0,0.15);
}
.trophy.locked{opacity:0.35;filter:grayscale(1)}
.trophy-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  background:rgba(255,255,255,0.03);
}
.trophy.unlocked .trophy-icon{
  background:rgba(255,199,0,0.1);
  box-shadow:0 0 16px rgba(255,199,0,0.1);
}
.trophy-info{flex:1;min-width:0}
.trophy-name{font-size:14px;font-weight:700;color:var(--text)}
.trophy.locked .trophy-name{color:var(--text-muted)}
.trophy-desc{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.4}
.trophy.unlocked .trophy-desc{color:var(--text-secondary)}
.trophy-check{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.trophy.unlocked .trophy-check{background:rgba(0,255,136,0.15)}
.trophy.locked .trophy-check{background:rgba(255,255,255,0.04)}

.account-name{
  color:var(--blue);font-weight:700;font-size:14px;
}
.app-version{
  text-align:center;font-size:11px;color:var(--text-muted);
  padding:20px 0 4px;font-weight:500;letter-spacing:.5px;opacity:.5;
}
.spacer{height:80px}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes barPulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 12px rgba(255,59,92,0.35)}50%{box-shadow:0 0 20px rgba(255,59,92,0.6)}}
@keyframes cubeAppear{from{opacity:0;transform:scale(.5) rotateZ(-10deg)}to{opacity:1;transform:scale(1) rotateZ(0)}}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Toast position fix for non-centered */
.toast{transform:translateX(-50%);left:50%;right:auto;width:calc(100% - 32px)}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:2px}

/* ===== EMPTY STATE ===== */
.empty-state{
  text-align:center;color:var(--text-muted);padding:24px 16px;
  font-size:14px;font-weight:500;
}

/* ===== WEEK COMPARISON ===== */
.weekcomp-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center}
.weekcomp-item{padding:10px 6px;border-radius:10px;background:rgba(255,255,255,0.02)}
.weekcomp-value{font-size:20px;font-weight:800;letter-spacing:-.3px}
.weekcomp-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:4px}

/* ===== SAVINGS EQUIVALENCES ===== */
.savings-equiv{margin-top:16px}
.equiv-progress{display:flex;flex-direction:column;gap:8px}
.equiv-header{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--text-secondary)}
.equiv-bar-track{height:8px;border-radius:4px;background:rgba(255,255,255,0.04);overflow:hidden}
.equiv-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),#00d4ff);transition:width .8s cubic-bezier(.16,1,.3,1)}
.equiv-reached{font-size:12px;color:var(--text-muted);margin-top:2px}

/* ===== MONTH GRID ===== */
.month-grid{display:flex;flex-direction:column;gap:2px}
.month-grid-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mg-cell{
  aspect-ratio:1;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;position:relative;min-height:32px;
}
.mg-hdr{color:var(--text-muted);font-size:9px;letter-spacing:.5px;aspect-ratio:auto;min-height:20px}
.mg-zero{background:rgba(0,255,136,.06);color:var(--green)}
.mg-ok{background:rgba(0,212,255,.08);color:var(--blue)}
.mg-over{background:rgba(255,59,92,.1);color:var(--red)}
.mg-day{font-size:11px;font-weight:700}
.mg-count{font-size:9px;opacity:.7}

/* ===== HOUR CHART ===== */
.hour-chart{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:20px}
.hc-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.hc-bar-track{flex:1;width:100%;display:flex;align-items:flex-end}
.hc-bar{
  width:100%;border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,rgba(0,212,255,.6),rgba(0,212,255,.15));
  transition:height .5s cubic-bezier(.16,1,.3,1);min-height:1px;position:relative;
}
.hc-bar.hc-peak{background:linear-gradient(180deg,var(--orange),rgba(255,149,0,.2))}
.hc-count{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;color:#fff;white-space:nowrap}
.hc-label{font-size:8px;color:var(--text-muted);font-weight:600}
.hour-insight{font-size:12px;color:var(--text-muted);margin-top:12px;font-weight:500;font-style:italic}

/* ===== LIGHT THEME ===== */
[data-theme="light"]{
  --bg:#f5f5fa;
  --bg-elevated:#ffffff;
  --bg-card:rgba(0,0,0,0.02);
  --bg-card-hover:rgba(0,0,0,0.04);
  --bg-card-border:rgba(0,0,0,0.08);
  --glass-bg:rgba(255,255,255,0.7);
  --glass-border:rgba(0,0,0,0.1);
  --blue:#0088cc;
  --blue-dim:rgba(0,136,204,0.1);
  --green:#00994d;
  --green-dim:rgba(0,153,77,0.08);
  --orange:#cc7700;
  --orange-dim:rgba(204,119,0,0.08);
  --red:#cc2244;
  --red-dim:rgba(204,34,68,0.06);
  --text:#1a1a2e;
  --text-secondary:#4a4a5e;
  --text-muted:#8a8a9e;
  --shadow-glow:0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] .card::before{background:linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent)}
[data-theme="light"] .app-header{background:linear-gradient(180deg,var(--bg) 60%,transparent)}
[data-theme="light"] #bottom-nav{background:rgba(245,245,250,.92);border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .today-count{color:var(--text)}
[data-theme="light"] .money-value{color:var(--text)}
[data-theme="light"] .total-value{color:var(--text)}
[data-theme="light"] .app-title{color:var(--text)}
[data-theme="light"] .login-title{color:var(--text)}
[data-theme="light"] .ob-step h1,[data-theme="light"] .ob-step h2{color:var(--text)}
[data-theme="light"] .login-form input{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:var(--text)}
[data-theme="light"] .setting-row select,[data-theme="light"] .setting-row input{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:var(--text)}
[data-theme="light"] #fab{color:#fff}
[data-theme="light"] .btn-primary{color:#fff}
[data-theme="light"] .chart-bar-count{color:var(--text)}
[data-theme="light"] .hb-track{background:rgba(0,0,0,.06)}
[data-theme="light"] .equiv-bar-track{background:rgba(0,0,0,.06)}
[data-theme="light"] .mg-zero{background:rgba(0,153,77,.08)}
[data-theme="light"] .mg-ok{background:rgba(0,136,204,.08)}
[data-theme="light"] .mg-over{background:rgba(204,34,68,.08)}
[data-theme="light"] .sugar-cube{
  box-shadow:1px 1px 3px rgba(0,0,0,.15),inset -1px -1px 1px rgba(0,0,0,.03),inset 1px 1px 2px rgba(255,255,255,.9);
}
[data-theme="light"] .trophy.locked{opacity:.4}
[data-theme="light"] .trophy.unlocked{background:rgba(255,199,0,.06);border-color:rgba(255,199,0,.2)}
[data-theme="light"] .modal-content{background:#fff}
[data-theme="light"] .toast{background:rgba(255,255,255,.92);border-color:rgba(0,153,77,.2)}
[data-theme="light"] .hc-count{color:var(--text)}

/* ===== RESPONSIVE ===== */
@media (max-width:380px){
  .timer-value{font-size:40px;letter-spacing:2px}
  .today-count{font-size:44px}
  .money-value{font-size:20px}
  .proj-number{font-size:26px}
}
@media (min-width:500px){
  .tab-content{padding:0 24px 16px}
  .card{padding:24px}
}