/* ============================================================
   Shared styling for the University Study Hub (dark theme).
   Used by the hub homepage and every course page.
   ============================================================ */
:root{
  --bg:#0a0f16; --panel:#111926; --panel2:#161f2e; --line:#25313f;
  --text:#e8eef5; --muted:#8fa1b3; --accent:#2e86de; --accent2:#60a5fa;
  --green:#159957; --amber:#d6890f; --red:#c0392b; --purple:#a78bfa;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px; margin:0 auto; padding:28px 22px 60px}

/* ---------- hub header ---------- */
.hub-header{border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:26px}
.hub-header h1{margin:0 0 4px; font-size:30px; letter-spacing:-.5px}
.hub-header p{margin:0; color:var(--muted)}
.crumb{font-size:13px; color:var(--muted); margin-bottom:14px}
.crumb a{color:var(--muted)}

/* ---------- course grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.course-card{
  display:block; background:var(--panel); border:1px solid var(--line); border-left-width:5px;
  border-radius:12px; padding:18px 18px 16px; transition:transform .12s, border-color .12s, background .12s;
}
.course-card:hover{transform:translateY(-3px); background:var(--panel2); text-decoration:none}
.course-card .code{font-size:13px; font-weight:800; letter-spacing:.5px; opacity:.9}
.course-card .title{font-size:18px; font-weight:700; margin:2px 0 8px; color:var(--text)}
.course-card .desc{font-size:13px; color:var(--muted); margin:0 0 12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.course-card .meta{display:flex; gap:8px; flex-wrap:wrap}
.pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--panel2); border:1px solid var(--line); color:var(--muted)}
.pill.term{color:var(--text)}
.add-card{border-style:dashed; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); min-height:120px}
.add-card:hover{color:var(--text)}

/* ---------- course page ---------- */
.course-hero{border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:20px}
.course-hero .code{font-size:14px; font-weight:800; letter-spacing:.6px}
.course-hero h1{margin:2px 0 8px; font-size:28px; letter-spacing:-.4px}
.course-hero .desc{color:var(--muted); max-width:820px; margin:0 0 10px}
.course-hero .req{font-size:13px; color:var(--muted)}

.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:10px}
.tabs button{
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  padding:8px 15px; border-radius:20px; cursor:pointer; font-size:14px; font-weight:600; font-family:inherit;
}
.tabs button:hover{color:var(--text)}
.tabs button.active{background:var(--accent); border-color:var(--accent); color:#fff}

.tab-panel{display:none}
.tab-panel.active{display:block}

.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px}
.card h2{margin:0 0 10px; font-size:19px}
.card h3{margin:14px 0 8px; font-size:15px}
.muted{color:var(--muted)}
.big-link{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff;
  padding:11px 18px; border-radius:10px; font-weight:700; font-size:15px;
}
.big-link:hover{filter:brightness(1.1); text-decoration:none}
.ghost-link{
  display:inline-flex; align-items:center; gap:8px; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); padding:10px 16px; border-radius:10px; font-weight:600; font-size:14px;
}
.ghost-link:hover{border-color:var(--accent); text-decoration:none}

/* ---------- materials list ---------- */
.mat-list{list-style:none; padding:0; margin:0}
.mat-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; margin-bottom:8px; background:var(--panel2)}
.mat-item .ic{font-size:20px; flex-shrink:0}
.mat-item .info{flex:1; min-width:0}
.mat-item .info .t{font-weight:600}
.mat-item .info .s{font-size:12px; color:var(--muted)}
.mat-item .act{display:flex; gap:8px; flex-shrink:0}
.mat-item .act a{font-size:13px; padding:5px 11px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--text)}
.mat-item .act a:hover{border-color:var(--accent); text-decoration:none}
.empty{color:var(--muted); font-style:italic; padding:10px 0}

.note-box{background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:14px 16px; margin-bottom:10px}
.note-box h4{margin:0 0 6px}
code{background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:1px 6px; font-size:13px}
.footer{margin-top:40px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}