:root{
  --bg:#f6f8ff; --panel:#ffffffcc; --text:#0b0d14; --muted:#58607a;
  --line:#e7ecff; --accent:#ff0a82; --accent2:#31ffd8; --radius:16px;
  --glow-1:0 0 14px rgba(255,10,130,.35), 0 0 28px rgba(49,255,216,.22);
  --shadow:0 12px 32px rgba(9,13,40,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto;color:var(--text);
  background: radial-gradient(1200px 600px at 50% -10%, #fff 0%, #f2f6ff 60%, #eaf0ff 100%);
}
.container{max-width:1100px;margin:0 auto;padding:16px}

/* Topbar */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg,#ffffffdd,#ffffffaa);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, background .2s ease;
}
.topbar.scrolled{ background: #ffffffee; box-shadow: 0 6px 18px rgba(9,13,40,.10); }
.topbar-spacer{ height: 64px; }
.topwrap{display:flex;align-items:center;gap:8px;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .dot{width:10px;height:28px;border-radius:6px;background:var(--accent);box-shadow:0 0 18px var(--accent)}
.actions button{margin-left:6px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);
  border-radius:12px;background:#ffffffcc;box-shadow:var(--shadow);cursor:pointer
}
.btn:hover{box-shadow:var(--glow-1)}

/* Layout */
.grid{display:grid;grid-template-columns:280px 1fr;gap:16px}
@media (max-width: 960px){ .grid{grid-template-columns:1fr} }
.card{border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.sidebar{padding:12px}

/* Inputs */
.input, .select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}

/* Subjects */
.subjects-wrap{ margin-top: 8px; }
.subjects-header{
  position: sticky; top: 4px; z-index: 2; font-weight: 600;
  background: linear-gradient(180deg,#ffffffee,#ffffffcc);
  border:1px solid var(--line); border-radius:12px;
  padding:8px 12px; margin-bottom:8px;
}
.subjects{ max-height: 48vh; overflow: auto; padding-right: 4px; }
.subjects button{
  width:100%;text-align:left;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:#fff;margin-bottom:8px;cursor:pointer
}
.subjects button.active{outline:2px solid var(--accent);}

/* Hero */
.hero{
  display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line)
}
.subjectTitle{font-weight:600;font-size:18px}
.progress{width:220px}
.progress .bar{height:8px;background:#e9eefe;border-radius:8px;overflow:hidden}
.progress .fill{height:8px;background:var(--accent)}

/* Sticky */
@media (min-width: 721px){
  .sidebar.card{ position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
  .hero{ position: sticky; top: 72px; z-index: 5; background: linear-gradient(180deg,#ffffffee,#ffffffcc); backdrop-filter: blur(6px);}
}

/* Timeline */
.week{border-bottom:1px dashed #e8eeff}
.week h3{margin:0;padding:12px 16px}
.item{display:flex;gap:12px;padding:12px 16px;border-top:1px solid #f3f6ff;align-items:center;justify-content: space-between;}
.item:hover{background:#fff}
.item .meta{flex:1}
.item .meta .pill{
  font-size:12px;padding:2px 8px;border-radius:999px;background:#f2f7ff;margin-right:6px;display:inline-block
}

/* Done button */
.action{ margin-left: 12px; display: flex; align-items: center; gap: 8px; }
.done-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;background:#ffffffcc;box-shadow:var(--shadow);cursor:pointer;font-weight:600;font-size:13px;}
.done-btn .dot{width:10px;height:10px;border-radius:999px;background:#cbd5ff;transition:.2s ease;}
.done-btn.is-done{background: rgba(255,10,130,.07);border-color: rgba(255,10,130,.35);color: var(--accent);}
.done-btn.is-done .dot{background: var(--accent);box-shadow: 0 0 12px rgba(255,10,130,.65);}

/* Footer */
.footer{color:#6b7290;font-size:14px;display:flex;justify-content:space-between;padding:16px}
.small{font-size:12px;color:#7a85a7}