* { box-sizing: border-box; }
:root {
  --navy: #101a32; --blue: #2147a5; --blue2: #2f63dc;
  --pale: #eef3ff; --line: #d6deed; --text: #172033;
  --muted: #667085; --white: #fff; --green: #087f5b;
}
body { margin: 0; font-family: Inter, Segoe UI, Arial, sans-serif; background: #f4f6fb; color: var(--text); }
.topbar { display:flex; align-items:center; gap:14px; padding:18px max(22px, calc((100% - 1180px)/2)); background:var(--white); border-bottom:1px solid var(--line); }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; color:white; background:var(--blue); font-size:27px; font-weight:800; }
.topbar h1 { margin:0; letter-spacing:3px; color:var(--blue); font-size:22px; }
.topbar p { margin:3px 0 0; color:var(--muted); font-size:13px; }
button, select, input { font:inherit; }
button { cursor:pointer; border:0; border-radius:9px; background:var(--blue); color:white; padding:11px 15px; font-weight:700; }
button:hover { filter:brightness(1.07); }
.secondary { margin-left:auto; background:var(--pale); color:var(--blue); border:1px solid #c7d5ff; }
main { max-width:1180px; padding:25px 22px 40px; margin:auto; }
.welcome { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:22px; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:1.4px; margin:0 0 7px; }
.welcome h2 { font-size:clamp(24px, 3vw, 34px); margin:0 0 7px; }
#todayLabel { margin:0; color:var(--muted); }
.live-clock { background:var(--navy); color:white; padding:15px 20px; border-radius:14px; min-width:170px; }
.live-clock .eyebrow { color:#b9cbff; }
.live-clock strong { display:block; font-size:25px; letter-spacing:1px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:20px; }
.stat { background:white; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:9px; text-align:center; padding:15px 8px 13px; }
.stat strong { display:block; font-size:24px; }
.stat span { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.panel { background:white; border:1px solid var(--line); border-radius:14px; padding:21px; margin-bottom:18px; box-shadow:0 3px 12px #152c5b08; }
.panel h2 { margin:0; font-size:21px; }
.panel h3 { margin:20px 0 8px; font-size:23px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.badge { background:#e7f7ef; color:#087f5b; border-radius:99px; padding:6px 10px; font-size:12px; font-weight:700; white-space:nowrap; }
.muted { color:var(--muted); line-height:1.5; }
.small { font-size:12px; }
.progress-track { background:#e8edf6; height:8px; border-radius:99px; overflow:hidden; margin-top:22px; }
#progressBar { height:100%; width:0; background:var(--blue2); transition:width .3s; }
.reminder-note { background:var(--pale); color:#23458d; padding:11px; border-radius:8px; font-size:13px; line-height:1.5; }
.schedule-heading { margin-bottom:18px; }
.day-picker { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.day-picker select { border:1px solid var(--line); padding:9px; border-radius:8px; color:var(--text); background:white; }
.day-schedule { display:grid; gap:8px; }
.slot { display:grid; grid-template-columns:135px 1fr auto; gap:15px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:13px 14px; }
.slot-time { color:var(--blue); font-weight:800; font-size:13px; }
.slot h3 { font-size:15px; margin:0 0 4px; }
.slot p { margin:0; font-size:13px; color:var(--muted); line-height:1.45; }
.slot.active { border-color:var(--blue2); background:#f0f4ff; box-shadow:inset 4px 0 var(--blue2); }
.slot.done { opacity:.62; }
.slot-tag { font-size:11px; font-weight:700; color:var(--blue); background:var(--pale); padding:5px 8px; border-radius:99px; white-space:nowrap; }
.footnote { color:var(--muted); font-size:12px; line-height:1.5; margin-bottom:0; }
.task-form { display:grid; grid-template-columns:2fr 1fr 1fr auto; align-items:end; gap:10px; margin-top:15px; }
.task-form label { font-size:12px; font-weight:700; color:var(--muted); }
.task-form input { display:block; width:100%; margin-top:7px; border:1px solid var(--line); border-radius:8px; padding:11px; color:var(--text); background:white; }
.personal-tasks { margin-top:12px; display:grid; gap:8px; }
.personal-task { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 12px; background:#f6f8fc; border-radius:8px; }
.personal-task span { font-size:13px; }
.personal-task button { padding:7px 10px; background:#e9edf5; color:#344054; font-size:12px; }
footer { text-align:center; color:var(--muted); padding:10px 20px 28px; font-size:12px; }
@media (max-width:760px) {
  .topbar { padding:15px; flex-wrap:wrap; }
  .topbar .secondary { margin-left:0; width:100%; }
  main { padding:18px 12px 30px; }
  .welcome { align-items:flex-start; flex-direction:column; }
  .live-clock { width:100%; }
  .stats { grid-template-columns:repeat(2,1fr); gap:9px; }
  .stat strong { font-size:20px; }
  .dashboard-grid { grid-template-columns:1fr; gap:0; }
  .panel { padding:16px; }
  .slot { grid-template-columns:95px 1fr; gap:10px; }
  .slot-tag { grid-column:2; justify-self:start; }
  .schedule-heading { align-items:flex-start; flex-direction:column; }
  .task-form { grid-template-columns:1fr 1fr; }
  .task-form label:first-child { grid-column:1/-1; }
  .task-form button { grid-column:1/-1; }
}

/* Persistent study library */
.library-heading { margin-bottom: 10px; }
.library-import-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:18px 0 12px; align-items:stretch; }
.library-import-grid label, .library-tools { font-size:12px; font-weight:700; color:var(--muted); }
.library-import-grid select, .library-tools input, .library-tools select { display:block; width:100%; margin-top:7px; border:1px solid var(--line); border-radius:8px; padding:11px; background:white; color:var(--text); }
.upload-control { display:flex; flex-direction:column; gap:8px; padding:13px; border:1px dashed #9aaddb; border-radius:10px; background:#f8faff; }
.upload-control input { width:100%; font-size:12px; font-weight:400; }
.upload-control small { font-weight:400; line-height:1.4; }
.library-tools { display:grid; grid-template-columns:2fr 1fr; gap:10px; margin:12px 0; }
.library-tools input, .library-tools select { margin-top:0; }
.library-list { display:grid; gap:9px; }
.library-empty { border:1px dashed var(--line); border-radius:10px; padding:18px; text-align:center; color:var(--muted); }
.material-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.material-info { min-width:0; flex:1; }
.material-info strong { display:block; overflow-wrap:anywhere; font-size:14px; }
.material-info small { display:block; margin-top:4px; color:var(--muted); overflow-wrap:anywhere; }
.material-actions { display:flex; gap:7px; flex-wrap:wrap; }
.material-actions button { padding:8px 10px; font-size:12px; }
.material-actions .delete-material { background:#fff0f0; color:#a12828; }
.session-materials { margin:15px 0; padding:14px; background:var(--pale); border:1px solid #d5e0ff; border-radius:10px; }
.session-materials h3 { margin:0 0 10px; font-size:16px; }
.session-materials p { margin:0 0 8px; font-size:13px; color:var(--muted); }
.session-materials .material-row { margin-top:8px; }
@media (max-width:760px) { .library-import-grid, .library-tools { grid-template-columns:1fr; } .material-row { align-items:flex-start; flex-direction:column; } .material-actions { width:100%; } }


.slot-materials { grid-column: 1 / -1; margin-top: 2px; padding: 9px 11px; border-radius: 8px; background: #f5f7ff; border: 1px solid #dfe6ff; display: grid; gap: 6px; }
.slot-materials > strong { font-size: 12px; color: var(--blue); }
.slot-materials > small { color: var(--muted); font-size: 12px; }
.slot-material-links { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-material-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--blue); font-size: 12px; cursor: pointer; text-align: left; }
.slot-material-link:hover { border-color: var(--blue2); background: #edf2ff; }

/* Dashboard-inspired layout refresh */
:root { --navy:#102d4c; --blue:#075fe5; --blue2:#1677ff; --pale:#eaf3ff; --line:#d8e5f7; --text:#102b50; --muted:#60789b; }
body { background:#f2f6fc; }
.topbar { position:relative; z-index:2; width:100%; padding:13px 24px; background:linear-gradient(110deg,#102b49,#183d62); color:#fff; border:0; min-height:82px; }
.brand-mark { background:#4a9bff; border-radius:50%; width:52px; height:52px; font-size:26px; }
.topbar h1 { color:#fff; font-size:28px; letter-spacing:1.5px; }
.topbar p { color:#d6e7ff; }
.topbar .secondary { margin-left:auto; background:#20496f; color:white; border:1px solid #6386a9; }
.sidebar { position:fixed; z-index:1; top:82px; bottom:0; left:0; width:240px; display:flex; flex-direction:column; justify-content:space-between; padding:20px 9px; color:#fff; background:linear-gradient(180deg,#102f50,#0b2340); }
.sidebar nav { display:grid; gap:7px; }
.nav-item { display:flex; gap:14px; align-items:center; text-decoration:none; color:#e3efff; padding:15px 14px; border-radius:11px; font-size:15px; font-weight:650; }
.nav-item span { width:24px; text-align:center; font-size:22px; }
.nav-item:hover,.nav-item.active { background:#075fc9; color:white; }
.sidebar-note { padding:12px 10px 22px; font-weight:650; line-height:1.55; color:#d8e9ff; }
.note-line { width:62px; height:4px; margin-top:14px; border-radius:8px; background:#5ba8ff; }
main { max-width:none; margin:0 0 0 240px; padding:22px 22px 18px; }
.welcome { padding:20px 22px; margin-bottom:14px; background:white; border:1px solid var(--line); border-radius:14px; }
.welcome h2 { color:#102f59; }
.live-clock { background:transparent; color:#14345d; border:1px solid var(--line); border-radius:12px; }
.live-clock .eyebrow { color:var(--muted); }
.stats { gap:12px; margin-bottom:15px; }
.stat { border-top:0; border-radius:12px; text-align:left; padding:17px; box-shadow:0 2px 8px #173b6508; }
.stat strong { color:#102f59; }
.dashboard-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.panel { border-radius:13px; padding:20px; box-shadow:0 2px 10px #173b6509; }
.panel h2 { color:#102f59; }
.current-panel { border-top:3px solid #1677ff; }
.next-panel { border-top:3px solid #ffb342; }
.slot { grid-template-columns:110px minmax(0,1fr) auto; border-radius:11px; padding:15px; }
.slot.active { background:#edf5ff; }
.library-panel { margin:0 22px 20px 262px; }
#sessionMaterials:not([hidden]) { display:block; }
footer { margin-left:240px; }
@media (max-width:900px) {
  .sidebar { width:190px; }
  main { margin-left:190px; padding:16px; }
  .library-panel { margin-left:206px; margin-right:16px; }
  footer { margin-left:190px; }
  .dashboard-grid { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .topbar { padding:12px; }
  .topbar h1 { font-size:22px; }
  .sidebar { position:static; width:auto; padding:8px; }
  .sidebar nav { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .nav-item { flex-direction:column; gap:3px; padding:9px 4px; text-align:center; font-size:11px; }
  .nav-item span { font-size:19px; }
  .sidebar-note { display:none; }
  main { margin:0; padding:12px; }
  .library-panel { margin:0 12px 15px; }
  footer { margin-left:0; }
  .welcome { padding:15px; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .slot { grid-template-columns:90px minmax(0,1fr); }
  .slot-tag { grid-column:2; }
}


/* Final dashboard layout: timetable on the left, live session and library on the right */
.dashboard-layout { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr); gap:16px; align-items:start; }
.dashboard-left, .dashboard-right { min-width:0; }
.dashboard-left .welcome { padding:18px 20px; }
.dashboard-left .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-left .stat { min-height:84px; }
.dashboard-left #timetable { margin-bottom:16px; }
.dashboard-right .dashboard-grid { display:grid; grid-template-columns:1fr; gap:0; margin-bottom:0; }
.dashboard-right .panel { margin-bottom:12px; }
.dashboard-right .current-panel { background:linear-gradient(135deg,#e8f3ff,#fff); border:1px solid #c8defc; }
.dashboard-right .next-panel { border-top:3px solid #ffb342; }
.dashboard-right .library-panel { margin:0 0 16px; padding:18px; }
.dashboard-right .library-import-grid { grid-template-columns:1fr; }
.dashboard-right .library-tools { grid-template-columns:1fr; }
.dashboard-right .slot-materials { margin-top:8px; }
@media (max-width:1100px) { .dashboard-layout { grid-template-columns:minmax(0,1fr); } .dashboard-left .stats { grid-template-columns:repeat(4,minmax(0,1fr)); } .dashboard-right .library-import-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-right .library-import-grid label:last-child { grid-column:1/-1; } }
@media (max-width:650px) { .dashboard-left .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-right .library-import-grid, .dashboard-right .library-tools { grid-template-columns:1fr; } .dashboard-right .library-import-grid label:last-child { grid-column:auto; } }

/* Progress, settings, and bundled study resources */
#progress, #settings { margin-top: 16px; }
.progress-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.progress-stats .stat { min-height:76px; display:flex; flex-direction:column; gap:5px; }
.progress-stats .stat strong { font-size:25px; color:var(--blue,#1769d2); }
.study-checklist { display:grid; gap:8px; margin:12px 0 16px; }
.checklist-item { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--border,#d8e5f7); border-radius:9px; cursor:pointer; }
.checklist-item input, .setting-check input { width:auto; }
.completed-text { text-decoration:line-through; opacity:.65; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:15px; }
.settings-grid label { display:flex; flex-direction:column; gap:7px; font-weight:600; }
.settings-grid .setting-check { flex-direction:row; align-items:center; }
.settings-grid input:not([type=checkbox]), .settings-grid select { width:100%; }
.included-materials { border:1px solid var(--border,#d8e5f7); border-radius:11px; padding:12px 14px; margin:14px 0; background:var(--soft,#f7faff); }
.included-materials summary { cursor:pointer; font-weight:700; color:var(--ink,#102f59); }
.included-subject { display:grid; gap:7px; padding:12px 0 6px; border-bottom:1px solid var(--border,#d8e5f7); }
.included-subject:last-child { border-bottom:0; }
.included-subject h3 { margin:0 0 2px; font-size:15px; }
.included-subject a { overflow-wrap:anywhere; color:#0969da; text-decoration:none; }
.included-subject a:hover { text-decoration:underline; }
body.dark-theme { background:#0c1627; color:#e8effb; }
body.dark-theme .panel, body.dark-theme .welcome, body.dark-theme .stat, body.dark-theme .material-row, body.dark-theme .included-materials { background:#14243b; color:#e8effb; border-color:#2b4261; }
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme .panel h2, body.dark-theme .included-materials summary { color:#e8effb; }
body.dark-theme .muted, body.dark-theme .eyebrow, body.dark-theme .included-subject a { color:#b8c9e4; }
body.dark-theme input, body.dark-theme select { background:#0c1627; color:#e8effb; border-color:#385273; }
@media (max-width:650px) { .settings-grid, .progress-stats { grid-template-columns:1fr; } }