:root{
  --bg:#f6f6f7;
  --surface:#ffffff;
  --border:#e4e4e7;
  --text:#19191c;
  --muted:#6f6f78;
  --accent:#4f46e5;
  --accent-hover:#4338ca;
  --accent-soft:#eef0ff;
  --green:#15803d;
  --green-soft:#eafaf0;
  --amber:#b45309;
  --amber-soft:#fdf3e3;
  --radius:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
}
a{color:var(--accent);}
button{font-family:inherit;}

/* ---------- login page ---------- */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.login-card{
  width:100%;
  max-width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 28px;
}
.login-card h1{
  font-size:19px;
  margin:0 0 4px;
}
.login-card p.sub{
  color:var(--muted);
  font-size:13.5px;
  margin:0 0 24px;
}
.field{margin-bottom:14px;}
.field label{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:6px;
}
.field input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14.5px;
  background:var(--bg);
  color:var(--text);
}
.field input:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface);
}
.btn{
  width:100%;
  padding:11px 12px;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  margin-top:6px;
}
.btn:hover{background:var(--accent-hover);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.error-msg{
  color:#b91c1c;
  background:#fef2f2;
  border:1px solid #fecaca;
  padding:8px 10px;
  border-radius:8px;
  font-size:13px;
  margin-bottom:14px;
  display:none;
}
.error-msg.show{display:block;}

/* ---------- app shell ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:20px;
  padding:14px 24px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:5;
}
.topbar h1{
  font-size:15.5px;
  margin:0;
  white-space:nowrap;
}
.topbar h1 .dim{color:var(--muted);font-weight:400;}
.topbar .spacer{flex:1;}
.progress-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
}
.progress-track{
  flex:1;
  height:7px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:var(--accent);
  width:0%;
  transition:width .3s;
}
.progress-pct{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  min-width:34px;
  text-align:right;
}
.logout-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:7px 12px;
  border-radius:7px;
  font-size:13px;
  cursor:pointer;
}
.logout-btn:hover{border-color:var(--muted);}

#app{
  display:grid;
  grid-template-columns:260px 1fr;
  max-width:1120px;
  margin:0 auto;
}
@media (max-width:860px){
  #app{grid-template-columns:1fr;}
}

/* ---------- sidebar ---------- */
aside{
  padding:20px 14px;
  border-right:1px solid var(--border);
}
@media (max-width:860px){
  aside{
    border-right:none;
    border-bottom:1px solid var(--border);
    display:flex;
    overflow-x:auto;
    gap:8px;
    padding:14px;
  }
}
.day-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:10px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:none;
  cursor:pointer;
  margin-bottom:2px;
  color:var(--text);
}
@media (max-width:860px){
  .day-item{width:auto;flex:0 0 auto;white-space:nowrap;}
}
.day-item:hover{background:var(--bg);}
.day-item.active{background:var(--accent-soft);border-color:var(--accent);}
.day-num{
  width:22px;height:22px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-family:var(--mono);
  color:var(--muted);
  flex:none;
}
.day-item.done .day-num{background:var(--green);border-color:var(--green);color:#fff;}
.day-item.active .day-num{border-color:var(--accent);color:var(--accent);}
.day-label{font-size:13.5px;}

/* ---------- main ---------- */
main{padding:28px 28px 80px;}
.day-eyebrow{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  margin:0 0 8px;
}
.day-title{font-size:22px;margin:0 0 4px;}
.day-sub{color:var(--muted);margin:0 0 28px;font-size:14.5px;}

section.block{margin-bottom:32px;}
.block-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.block-head h2{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin:0;
}
.block-count{
  margin-left:auto;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
}

ul.concepts{list-style:none;margin:0;padding:0;}
ul.concepts li{
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:14.5px;
}
ul.concepts li:last-child{border-bottom:none;}

.resources{display:flex;flex-direction:column;gap:7px;}
.resource{
  display:flex;
  gap:8px;
  align-items:center;
  padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  text-decoration:none;
  color:var(--text);
  font-size:13.5px;
}
.resource:hover{border-color:var(--accent);}
.resource .r-url{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:11px;}

.qa-card{
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:8px;
  background:var(--surface);
  overflow:hidden;
}
.qa-q{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  cursor:pointer;
}
.qa-check{margin-top:2px;flex:none;}
.qa-check input{width:16px;height:16px;cursor:pointer;}
.qa-tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:4px;
  flex:none;
  margin-top:1px;
}
.qa-tag.tricky{background:var(--amber-soft);color:var(--amber);}
.qa-tag.core{background:var(--green-soft);color:var(--green);}
.qa-q p{margin:0;font-size:14px;flex:1;}
.qa-toggle{
  font-size:11px;
  color:var(--muted);
  flex:none;
  margin-top:2px;
}
.qa-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .2s ease;
}
.qa-card.open .qa-a{max-height:300px;}
.qa-a-inner{
  padding:0 14px 14px 40px;
  font-size:13.5px;
  color:var(--muted);
  border-top:1px dashed var(--border);
  padding-top:12px;
}

.checklist{display:flex;flex-direction:column;gap:2px;}
.task{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:7px;
  cursor:pointer;
}
.task:hover{background:var(--surface);}
.task input{width:16px;height:16px;cursor:pointer;flex:none;}
.task span{font-size:14px;}
.task.checked span{color:var(--muted);text-decoration:line-through;}

.qa-filter{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.qa-filter button{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  padding:5px 12px;
  border-radius:20px;
  font-size:12.5px;
  cursor:pointer;
}
.qa-filter button.active{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}

.day-nav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.nav-btn{
  font-size:13px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:9px 14px;
  border-radius:8px;
  cursor:pointer;
}
.nav-btn:hover:not(:disabled){border-color:var(--accent);}
.nav-btn:disabled{opacity:.4;cursor:not-allowed;}