@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&display=swap');

:root {
  /* Dark Mode: O noapte de vară înstelată cu lună plină */
  --bg: #060a17; 
  --surface: #0a1124; 
  --border: #192749;
  --accent: #ffeeb5; /* Radiant Luna gold-cream */
  --accent2: #5b4fe2; /* Starry sapphire glow */
  --text: #e2e8f0; 
  --muted: #526284;
  --modal-bg: #080d1c; 
  --shadow: 0 8px 32px rgba(255, 238, 181, 0.04);
}
:root[data-theme="light"] {
  /* Light Mode: Alb-Auriu, impresie de lumină și soare */
  --bg: #fcfbf7; /* Alabastru cald, solar */
  --surface: #ffffff; 
  --border: #eedbb3; /* Borduri auriu-șampanie fine */
  --accent: #cca43b; /* Auriu radiant de soare */
  --accent2: #db7c38; /* Amber solar chihlimbar */
  --text: #2c2518; /* Espresso cald bronzat */
  --muted: #8e8470;
  --modal-bg: #fefdfa; 
  --shadow: 0 8px 32px rgba(204, 164, 59, 0.06);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-x: hidden;
  background-attachment: fixed;
}
:root:not([data-theme="light"]) body {
  background-color: var(--bg);
  background-image: 
    radial-gradient(circle, #ffffff 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.15) 1.5px, transparent 1.5px);
  background-size: 180px 180px, 90px 90px, 240px 240px;
  background-position: 0 0, 40px 40px, 80px 120px;
}
:root[data-theme="light"] body{font-family:-apple-system,'SF Pro Text','Helvetica Neue',sans-serif}
:root[data-theme="light"] h1,:root[data-theme="light"] .score-num,:root[data-theme="light"] .record-value,:root[data-theme="light"] .compare-val,:root[data-theme="light"] .big-goal-amount{font-family:-apple-system,'SF Pro Display','Helvetica Neue',sans-serif}

header{padding:24px 20px 14px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10}
.header-top{display:flex;justify-content:space-between;align-items:flex-start}
h1{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.date{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:2px}
.score-display{text-align:right}
.score-num{font-family:'Syne',sans-serif;font-size:34px;font-weight:800;color:var(--accent);line-height:1}
.score-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.progress-bar{margin-top:12px;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s cubic-bezier(.34,1.56,.64,1)}

.header-score-pill{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;flex-shrink:0;line-height:1}
.header-score-pill .score-big{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--accent);letter-spacing:-1px;line-height:1}
.header-score-pill .score-sub{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-top:1px;text-align:right}
:root[data-theme="light"] .header-score-pill .score-big{font-family:-apple-system,'SF Pro Display','Helvetica Neue',sans-serif}

.page{display:none;max-width:100%;overflow-x:hidden}.page.active{display:block}

.section{padding:16px 20px 4px}
.section-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:3px;margin-bottom:8px}
.suggestion-banner{display:flex;align-items:center;gap:8px;padding:12px 16px;margin-bottom:12px;border-radius:14px;background:var(--card);border:1px solid var(--accent);font-size:14px;color:var(--text);line-height:1.4}
.suggestion-icon{font-size:18px;flex-shrink:0}

.item{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}
.item:active{opacity:.6;transform:scale(.98)}
.item-left{display:flex;align-items:center;gap:12px;flex:1}
.item-icon{font-size:18px;width:26px;text-align:center}
.item-name{font-size:13px;line-height:1.3;flex:1}
.item-name.done{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--accent)}
.toggle{width:42px;height:24px;border-radius:12px;background:var(--border);border:1px solid #2a2a2a;position:relative;transition:all .25s cubic-bezier(.34,1.56,.64,1);flex-shrink:0}
:root[data-theme="light"] .toggle{border-color:var(--border)}
.toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:var(--muted);top:3px;left:3px;transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.toggle.on{background:var(--accent);border-color:var(--accent)}
.toggle.on::after{left:21px;background:var(--bg)}

.congrats{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:var(--accent);color:var(--bg);font-family:'Syne',sans-serif;font-size:20px;font-weight:800;padding:18px 28px;border-radius:18px;z-index:100;transition:transform .3s cubic-bezier(.34,1.56,.64,1);text-align:center;pointer-events:none}
.congrats.show{transform:translate(-50%,-50%) scale(1)}
@keyframes flash{0%{background:var(--bg)}30%{background:#1a0a1a}100%{background:var(--bg)}}
:root[data-theme="light"] @keyframes flash{0%{background:var(--bg)}30%{background:#fce4ec}100%{background:var(--bg)}}
.flash{animation:flash .5s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}