@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --bg:#0A0812;
  --surface:#14101F;
  --surface-2:#1D1830;
  --border:#2B2542;
  --text:#F2EFF9;
  --text-soft:#A79FC4;
  --text-faint:#6E6690;
  --accent:#8B7FE8;
  --accent-2:#5468C4;
  --accent-text:#EDEAFC;
  --danger:#E0748A;
  --success:#7FBF9E;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
}
[data-theme="light"]{
  --bg:#FAF6EC;
  --surface:#FFFFFF;
  --surface-2:#F3ECDA;
  --border:#E6DBC0;
  --text:#241F33;
  --text-soft:#6B6480;
  --text-faint:#948C9F;
  --accent:#6153C4;
  --accent-2:#3C5CA8;
  --accent-text:#2C2456;
  --danger:#B84A5F;
  --success:#3F7A5C;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope',sans-serif;
  min-height:100vh;
  overscroll-behavior:none;
  transition:background .3s ease,color .3s ease;
}
h1,h2,h3,.num{font-family:'Fraunces',serif;font-weight:500;}
.hidden{display:none !important;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;}

/* ---------- Splash ---------- */
#splash{
  position:fixed;inset:0;z-index:100;
  background:#0A0812;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  animation:splashOut .5s ease 900ms forwards;
}
#splash .mark{
  font-family:'Fraunces',serif;font-size:38px;color:#F2EFF9;
  opacity:0;transform:translateY(10px);
  animation:splashIn .6s ease forwards;
}
#splash .tagline{color:#8A81AA;font-size:13px;letter-spacing:.02em;opacity:0;animation:splashIn .6s ease .2s forwards;}
@keyframes splashIn{to{opacity:1;transform:translateY(0);}}
@keyframes splashOut{to{opacity:0;visibility:hidden;pointer-events:none;}}
@media (prefers-reduced-motion:reduce){
  #splash,#splash .mark,#splash .tagline{animation-duration:.01ms !important;}
}

/* ---------- Shell ---------- */
.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}
header.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px 8px;
}
header.top .brand{font-family:'Fraunces',serif;font-size:20px;letter-spacing:.01em;}
header.top button.icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-soft);
}
main{flex:1;padding:8px 20px 100px;}
.screen{display:none;}
.screen.active{display:block;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:16px;
}
.card h2{font-size:17px;margin:0 0 4px;}
.card .sub{color:var(--text-soft);font-size:13px;margin:0 0 14px;}

/* ---------- Buttons ---------- */
.btn{
  width:100%;padding:16px 20px;border-radius:var(--radius-md);
  font-size:15px;font-weight:600;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease, opacity .15s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:#FFFFFF;}
.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border);}
.btn-ghost{background:transparent;color:var(--text-soft);}
.btn-danger-ghost{background:transparent;color:var(--danger);}
.btn[disabled]{opacity:.4;pointer-events:none;}

/* ---------- Stage screen ---------- */
.stage-hero{
  text-align:center;padding:40px 10px 30px;
}
.stage-hero .eyebrow{color:var(--text-faint);font-size:13px;margin-bottom:10px;}
.stage-hero .timer{
  font-family:'Fraunces',serif;font-size:56px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.stage-hero .timer-label{color:var(--text-soft);font-size:14px;margin-top:6px;}

.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.type-opt{
  padding:18px 14px;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border);
  text-align:left;font-weight:600;font-size:14px;color:var(--text);
}
.type-opt .icon{display:block;font-size:20px;margin-bottom:8px;}
.type-opt.selected{border-color:var(--accent);background:var(--surface-2);color:var(--accent-text);}
.type-opt.full{grid-column:1 / -1;}

.set-log{margin-top:18px;}
.set-log .row{
  display:flex;justify-content:space-between;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:13px;color:var(--text-soft);
}
.set-log .row:last-child{border-bottom:none;}

/* ---------- Dashboard ---------- */
.today-banner{
  background:linear-gradient(180deg,var(--accent) 0%, var(--accent-2) 100%);
  border-radius:var(--radius-lg);padding:20px;color:#fff;margin-bottom:18px;
}
.today-banner .sub{color:rgba(255,255,255,.75);}
.today-banner h2{color:#fff;}

.tabs{display:flex;gap:8px;margin-bottom:14px;}
.tab{
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--surface);border:1px solid var(--border);color:var(--text-soft);
}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.stat-row{display:flex;gap:12px;margin-bottom:16px;}
.stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;}
.stat .num{font-size:22px;}
.stat .lbl{color:var(--text-soft);font-size:12px;margin-top:2px;}

.chart-wrap{position:relative;height:200px;margin:6px 0 4px;}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;}
.legend .item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-soft);}
.legend .dot{width:9px;height:9px;border-radius:3px;}

.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:6px;}
.heatmap .cell{aspect-ratio:1;border-radius:5px;background:var(--surface-2);}
.heatmap .cell.filled{background:var(--accent);}

.history-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.history-item:last-child{border-bottom:none;}
.history-item .type-tag{
  font-size:11px;padding:4px 9px;border-radius:999px;
  background:var(--surface-2);color:var(--text-soft);margin-bottom:4px;display:inline-block;
}
.history-item .time{font-family:'Fraunces',serif;font-size:17px;}
.history-item .date{color:var(--text-faint);font-size:12px;}

/* ---------- Bottom nav ---------- */
nav.bottom{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);border-top:1px solid var(--border);
  display:flex;justify-content:center;z-index:10;
}
nav.bottom .inner{max-width:480px;width:100%;display:flex;padding:8px 12px calc(8px + env(safe-area-inset-bottom));}
nav.bottom button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px;font-size:11px;color:var(--text-faint);border-radius:var(--radius-sm);
}
nav.bottom button.active{color:var(--accent);}
nav.bottom svg{width:20px;height:20px;}

/* ---------- Settings ---------- */
.settings-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.settings-row:last-child{border-bottom:none;}
.switch{
  width:46px;height:26px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border);position:relative;flex-shrink:0;
}
.switch .knob{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--text-faint);transition:transform .2s ease, background .2s ease;
}
.switch.on{background:var(--accent);border-color:var(--accent);}
.switch.on .knob{transform:translateX(20px);background:#fff;}

.footer-credit{
  text-align:center;color:var(--text-faint);font-size:12px;padding:24px 0 8px;
}
.footer-credit a{color:var(--text-soft);text-decoration:none;font-weight:600;}

/* ---------- Resumo ---------- */
.resumo-icon{
  width:56px;height:56px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:#fff;
}