*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FAFAF8;--surface:#FFFFFF;--surface2:#F7F7F5;
  --border:#E9E9E7;--border2:#D4D4D0;
  --text:#1A1A18;--text2:#6B6B68;--text3:#9B9B98;
  --accent:#1A1A18;--accent-soft:#F0EFE9;
  --green:#2D7A4A;--green-bg:#EDF7F1;
  --blue:#1D5FA8;--blue-bg:#EBF2FC;
  --orange:#C4600A;--orange-bg:#FDF2E8;
  --purple:#6B3A9C;--purple-bg:#F3EBF8;
  --teal:#3A5F7A;--teal-bg:#F0F4F8;
  --radius:6px;--radius-lg:10px;
  --font-sans:'DM Sans',sans-serif;--font-serif:'Lora',serif;--font-mono:'DM Mono',monospace;
  --t:150ms ease;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{cursor:pointer;font-family:var(--font-sans)}

/* ── App Shell ── */
.app{display:flex;min-height:100vh}

/* ── Sidebar ── */
.sidebar{width:220px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:24px 0;z-index:10}
.sb-logo{padding:0 20px 20px;border-bottom:1px solid var(--border);margin-bottom:16px}
.sb-logo-icon{font-size:22px;margin-bottom:6px;display:block}
.sb-logo-title{font-family:var(--font-serif);font-size:14px;font-weight:600;color:var(--text);letter-spacing:-0.01em;line-height:1.3}
.sb-logo-sub{font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:2px}
.sb-section{padding:0 12px;margin-bottom:8px}
.sb-section-lbl{font-size:10px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;padding:0 8px;margin-bottom:4px}
.sb-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius);font-size:13.5px;color:var(--text2);transition:background var(--t),color var(--t);background:none;border:none;width:100%;text-align:left}
.sb-item:hover{background:var(--surface2);color:var(--text)}
.sb-item.active{background:var(--accent-soft);color:var(--text);font-weight:500}
.sb-item .icon{font-size:14px;width:16px;text-align:center;flex-shrink:0}
.sb-months{padding:0 12px;flex:1;overflow-y:auto}
.sb-month{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;border-radius:var(--radius);font-size:12.5px;color:var(--text2);transition:background var(--t);background:none;border:none;width:100%;text-align:left}
.sb-month:hover{background:var(--surface2)}
.sb-month.active{background:var(--accent-soft);color:var(--text);font-weight:500}
.pill{font-size:10px;padding:1px 6px;border-radius:20px;font-weight:500}
.pill-done{background:var(--green-bg);color:var(--green)}
.pill-active{background:var(--blue-bg);color:var(--blue)}
.pill-next{background:var(--surface2);color:var(--text3)}

/* ── Main ── */
.main{flex:1;min-width:0;overflow-y:auto}
.main-inner{max-width:820px;margin:0 auto;padding:48px 40px}

/* ── Pages ── */
.page{display:none}
.page.active{display:block;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Typography ── */
.breadcrumb{font-family:var(--font-mono);font-size:11.5px;color:var(--text3);margin-bottom:28px;display:flex;align-items:center;gap:6px}
.breadcrumb span{color:var(--text2)}
.page-title{font-family:var(--font-serif);font-size:30px;font-weight:600;letter-spacing:-0.02em;margin-bottom:6px}
.page-sub{font-size:14px;color:var(--text2)}
.page-header{margin-bottom:32px}

/* ── Progress Bar ── */
.pb-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:28px;display:flex;align-items:center;gap:16px}
.pb-label{font-size:12px;color:var(--text2);white-space:nowrap;font-family:var(--font-mono)}
.pb-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.pb-fill{height:100%;background:var(--text);border-radius:2px;transition:width .4s ease}
.pb-pct{font-size:12px;font-weight:500;font-family:var(--font-mono);white-space:nowrap}

/* ── Month Nav ── */
.month-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.mnav-btn{padding:5px 12px;border:1px solid var(--border);border-radius:20px;font-size:12px;background:var(--surface);color:var(--text2);transition:all var(--t);font-family:var(--font-mono)}
.mnav-btn:hover{border-color:var(--text);color:var(--text)}
.mnav-btn.active{background:var(--text);color:white;border-color:var(--text)}

/* ── Week Card ── */
.week-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px;overflow:hidden}
.wc-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;gap:12px}
.wc-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.wc-badge{font-family:var(--font-mono);font-size:10px;background:var(--surface2);border:1px solid var(--border);padding:3px 8px;border-radius:4px;color:var(--text2);white-space:nowrap;flex-shrink:0}
.wc-title{font-size:14.5px;font-weight:500;color:var(--text)}
.wc-progress{font-family:var(--font-mono);font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0}
.wc-chevron{color:var(--text3);font-size:12px;transition:transform var(--t);flex-shrink:0}
.wc-chevron.open{transform:rotate(180deg)}
.wc-body{overflow:hidden}
.wc-body.hidden{display:none}

/* ── Checklist ── */
.checklist{padding:8px 20px}
.ci{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer}
.ci:last-child{border-bottom:none}
.ci:hover .cb{border-color:var(--text)}
.cb{width:16px;height:16px;border:1.5px solid var(--border2);border-radius:3px;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all var(--t);background:var(--surface)}
.cb.checked{background:var(--text);border-color:var(--text)}
.cb.checked::after{content:'';width:8px;height:5px;border-left:1.5px solid white;border-bottom:1.5px solid white;transform:rotate(-45deg) translate(1px,-1px);display:block}
.ci-label{font-size:13.5px;color:var(--text);line-height:1.5;transition:all var(--t);flex:1}
.ci-label.done{color:var(--text3);text-decoration:line-through}
.ci-cat{font-size:10px;padding:2px 6px;border-radius:3px;font-weight:500;flex-shrink:0;margin-top:2px;font-family:var(--font-mono)}
.cat-tech{background:var(--blue-bg);color:var(--blue)}
.cat-psychology{background:var(--purple-bg);color:var(--purple)}
.cat-copy{background:var(--orange-bg);color:var(--orange)}
.cat-data{background:var(--green-bg);color:var(--green)}
.cat-strategy{background:var(--teal-bg);color:var(--teal)}

/* ── Resources ── */
.res-wrap{border-top:1px solid var(--border);padding:10px 20px}
.res-btn{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);padding:6px 0;background:none;border:none;width:100%;text-align:left}
.res-btn:hover{color:var(--text)}
.res-list{padding:8px 0 4px;display:none}
.res-list.open{display:block}
.ri{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.ri:last-child{border-bottom:none}
.ri-icon{font-size:13px;flex-shrink:0;margin-top:1px}
.ri-name{font-size:13px;color:var(--text);font-weight:500}
.ri-desc{font-size:12px;color:var(--text2)}
.ri-tag{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--surface2);color:var(--text3);font-family:var(--font-mono);flex-shrink:0;margin-top:2px}

/* ── Goal ── */
.wc-goal{border-top:1px solid var(--border);padding:12px 20px;display:flex;align-items:flex-start;gap:10px}
.wc-goal-lbl{font-size:11px;color:var(--text3);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.wc-goal-text{font-size:13px;color:var(--text2);font-style:italic}

/* ── Hours Logger ── */
.hours-log{border-top:1px solid var(--border);padding:14px 20px;background:var(--surface2)}
.hours-log-title{font-size:12px;font-weight:500;color:var(--text2);margin-bottom:10px}
.hours-inputs{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.h-group{display:flex;flex-direction:column;gap:3px}
.h-lbl{font-size:11px;color:var(--text3);font-family:var(--font-mono)}
.h-input{width:80px;padding:5px 8px;border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;font-family:var(--font-mono);color:var(--text);background:var(--surface);outline:none}
.h-input:focus{border-color:var(--text)}
.h-save{padding:6px 14px;background:var(--text);color:white;border:none;border-radius:var(--radius);font-size:12.5px;font-family:var(--font-sans);transition:opacity var(--t)}
.h-save:hover{opacity:.8}
.h-total{font-size:12px;color:var(--text2);font-family:var(--font-mono);padding-bottom:1px}

/* ── Progress Page ── */
.bento-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.bento-mid{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}
.bc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}
.bc-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;font-family:var(--font-mono)}
.bc-big{font-family:var(--font-serif);font-size:48px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--text);margin-bottom:4px}
.bc-sub{font-size:12.5px;color:var(--text2)}
.ring-wrap{display:flex;align-items:center;gap:16px}
.ring-pct{font-family:var(--font-serif);font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.ring-sub{font-size:12px;color:var(--text2)}
.hours-stats{display:flex;gap:10px;flex-wrap:wrap}
.hs{background:var(--surface2);border-radius:var(--radius);padding:12px 16px;flex:1;min-width:80px}
.hs-val{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--text)}
.hs-lbl{font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:2px}
.heatmap-mlabels{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;margin-bottom:4px}
.hm-ml{font-size:8.5px;color:var(--text3);font-family:var(--font-mono);text-align:center}
.heatmap-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:3px}
.hm-cell{aspect-ratio:1;border-radius:2px;cursor:default}
.hm-cell.w0{background:var(--surface2)}
.hm-cell.w1{background:#D4D4D0}
.hm-cell.w2{background:#9B9B98}
.hm-cell.w3{background:#6B6B68}
.hm-cell.w4{background:#1A1A18}
.hm-legend{display:flex;gap:6px;align-items:center;margin-top:10px}
.hm-leg-cell{width:10px;height:10px;border-radius:2px}
.hm-leg-lbl{font-size:10px;color:var(--text3);font-family:var(--font-mono)}
.hours-bars-wrap{height:100px}
.h-bars{display:flex;align-items:flex-end;gap:2px;height:80px}
.h-bar{flex:1;border-radius:2px 2px 0 0;min-height:2px;transition:height .3s ease}
.h-bar:hover{opacity:.7}
.h-bar-lbls{display:flex;gap:2px;margin-top:4px}
.h-bar-lbl{flex:1;font-size:8px;color:var(--text3);text-align:center;font-family:var(--font-mono)}
.milestones-title{font-size:15px;font-weight:500;margin-bottom:16px}
.milestones-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;text-align:center;transition:border-color var(--t),box-shadow var(--t)}
.mc.done{border-color:#BDE8CF}
.mc.done:hover{box-shadow:var(--shadow)}
.mc-icon{font-size:24px;margin-bottom:8px}
.mc-title{font-size:11px;font-weight:500;color:var(--text);margin-bottom:2px;font-family:var(--font-mono)}
.mc-sub{font-size:10px;color:var(--text3)}
.mc-badge{display:inline-block;font-size:9px;padding:2px 6px;border-radius:10px;margin-top:6px;font-weight:500}
.radar-wrap{display:flex;justify-content:center}

/* ── Tooltip ── */
.tooltip{position:fixed;background:var(--text);color:white;font-size:11px;padding:4px 8px;border-radius:4px;pointer-events:none;z-index:999;display:none;font-family:var(--font-mono);white-space:nowrap}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

@media(max-width:768px){
  .sidebar{display:none}
  .main-inner{padding:24px 20px}
  .bento-top{grid-template-columns:1fr 1fr}
  .bento-mid{grid-template-columns:1fr}
  .milestones-grid{grid-template-columns:repeat(3,1fr)}
}

/* Playful premium refinements */
body{
  background:
    radial-gradient(1000px 540px at 100% -20%, rgba(181, 214, 255, 0.45) 0%, rgba(181,214,255,0) 70%),
    radial-gradient(780px 420px at -12% 30%, rgba(209, 248, 223, 0.42) 0%, rgba(209,248,223,0) 65%),
    radial-gradient(680px 360px at 50% 115%, rgba(255, 226, 189, 0.35) 0%, rgba(255,226,189,0) 70%),
    var(--bg);
}
.main-inner{
  position:relative;
}
.main-inner::before,.main-inner::after{
  content:"";
  position:absolute;
  pointer-events:none;
  filter:blur(22px);
  opacity:.3;
  z-index:0;
}
.main-inner::before{
  width:140px;height:140px;right:-20px;top:20px;
  background:radial-gradient(circle,#dbe8ff 0%,rgba(219,232,255,0) 72%);
}
.main-inner::after{
  width:120px;height:120px;left:-20px;bottom:40px;
  background:radial-gradient(circle,#d7f7e3 0%,rgba(215,247,227,0) 72%);
}
.main-inner > *{
  position:relative;
  z-index:1;
}
.sidebar{
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(14px) saturate(140%);
  border-right:1px solid rgba(212, 220, 232, 0.8);
}
.sb-logo{
  background:linear-gradient(180deg,rgba(249,252,255,.9),rgba(255,255,255,.6));
}
.page-title{
  letter-spacing:-0.03em;
  background:linear-gradient(95deg,#141414 0%,#1d5fa8 42%,#2d7a4a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.page-sub{
  color:#5c6778;
}
.pb-wrap,.week-card,.bc,.mc{
  background:rgba(255,255,255,0.86);
  border-color:#dfe6f0;
  box-shadow:
    0 12px 30px rgba(17, 24, 39, 0.07),
    0 2px 8px rgba(17, 24, 39, 0.05);
}
.pb-fill{
  background:linear-gradient(90deg,#1d5fa8 0%,#2d7a4a 100%);
}
.week-card,.bc,.mc{
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease,background 180ms ease;
}
.week-card:hover,.bc:hover,.mc:hover{
  transform:translateY(-3px);
  border-color:#cfd8e6;
  box-shadow:
    0 18px 36px rgba(17, 24, 39, 0.11),
    0 6px 14px rgba(17, 24, 39, 0.08);
}
.wc-header{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.sb-item,.mnav-btn,.h-save,.sb-month{
  transition:all 180ms ease;
}
.sb-item:hover,.sb-month:hover{
  transform:translateX(2px);
}
.sb-item.active{
  background:linear-gradient(90deg,rgba(29,95,168,.16),rgba(45,122,74,.12));
  border:1px solid rgba(29,95,168,.22);
}
.mnav-btn.active{
  background:linear-gradient(90deg,#1d5fa8,#2d7a4a);
  border-color:transparent;
}
.h-save{
  background:linear-gradient(135deg,#1d5fa8 0%,#2d7a4a 100%);
}
.h-save:hover{
  transform:translateY(-1px);
  opacity:1;
  box-shadow:0 10px 18px rgba(29,95,168,0.3);
}
.h-input:focus{
  border-color:#1d5fa8;
  box-shadow:0 0 0 3px rgba(29,95,168,.12);
}
.cb.checked{
  background:linear-gradient(135deg,#1d5fa8,#2d7a4a);
  border-color:#1d5fa8;
  box-shadow:0 0 0 2px rgba(29,95,168,0.16);
}
.pill-done{
  background:linear-gradient(180deg,#e7f7ee,#d9f2e5);
}
.pill-active{
  background:linear-gradient(180deg,#e8f2ff,#dae9ff);
}
.icon,.sb-logo-icon,.ri-icon,.mc-icon{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}