:root {
  --ink: #111111;
  --muted: #5d5d5d;
  --paper: #ffffff;
  --line: #dedede;
  --brand: #d6001c;
  --brand-dark: #a90016;
  --accent: #d6001c;
  --good: #14805e;
  --bad: #c2414b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(circle at 12% 12%, #ffe8eb 0, transparent 30%),
              radial-gradient(circle at 92% 88%, #ececec 0, transparent 32%), #f7f7f7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; }
.nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 850; font-size: 1.1rem; }
.brand-logo { width:52px; height:38px; object-fit:cover; border-radius:7px; background:var(--brand); }
.pill { border: 1px solid var(--line); padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--muted); }

.hero { display:grid; grid-template-columns: 1.25fr .75fr; gap: 42px; align-items:center; padding: 60px 0; }
h1 { font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 6.4rem); line-height:.92; letter-spacing:-.06em; margin:0 0 24px; }
.hero p { color:var(--muted); font-size:1.16rem; line-height:1.7; max-width:620px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.btn { border:0; border-radius:12px; padding:13px 18px; font-weight:750; background:var(--brand); color:#fff; box-shadow:0 8px 22px rgba(214,0,28,.22); }
.btn:hover { background:var(--brand-dark); }
.btn.secondary { color:var(--ink); background:white; border:1px solid var(--line); box-shadow:none; }
.math-card { position:relative; min-height:390px; border-radius:28px; padding:28px; background:var(--ink); color:white; box-shadow:0 28px 60px rgba(0,0,0,.22); transform:rotate(2deg); overflow:hidden; }
.math-card::after { content:""; position:absolute; z-index:0; width:190px; height:190px; border:40px solid rgba(214,0,28,.92); border-radius:50%; right:-135px; bottom:-135px; }
.math-card > * { position:relative; z-index:1; }
.math-card p, .math-card .tiny { color:#ffffff; }
.formula { font-family:Georgia,serif; font-size:3.4rem; margin:74px 0 22px; }
.faculty-name { font-family:Georgia,serif; font-size:clamp(2.25rem,4vw,3.5rem); line-height:1.02; margin:52px 0 14px; }
.faculty-role { color:#ffffff; font-weight:800; margin-bottom:20px; }
.faculty-link { position:relative; z-index:1; display:inline-block; margin-top:16px; padding:11px 15px; border-radius:10px; background:var(--brand); color:white; font-weight:800; text-decoration:none; }
.faculty-link:hover { background:var(--brand-dark); }
.tiny { color:#bec4d0; font-size:.86rem; text-transform:uppercase; letter-spacing:.14em; }

.panel { background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:22px; padding:24px; box-shadow:0 18px 45px rgba(23,34,56,.08); }
.join { max-width:520px; margin:70px auto; }
label { display:block; font-weight:750; margin:18px 0 7px; }
input, select { width:100%; border:1px solid #d5d0c6; background:white; border-radius:11px; padding:13px; color:var(--ink); }
select { cursor:pointer; }
input:focus, select:focus { outline:3px solid #ffd5db; border-color:var(--brand); }
.topline { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.code { font-size:1.5rem; letter-spacing:.12em; font-weight:900; color:var(--brand); }
.join-tools { display:flex; align-items:center; gap:18px; }
.qr-card { background:white; border:1px solid var(--line); border-radius:16px; padding:9px; box-shadow:0 8px 24px rgba(23,34,56,.08); }
.qr-card img { display:block; width:116px; height:116px; }
.dashboard { display:grid; grid-template-columns: 280px 1fr; gap:20px; }
.question-list { display:flex; flex-direction:column; gap:10px; }
.qtab { text-align:left; padding:13px; border:1px solid var(--line); background:white; border-radius:11px; color:var(--ink); }
.qtab.active { border-color:var(--brand); background:#ffe8eb; }
.slide { min-height:410px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:var(--ink); color:white; border-radius:20px; padding:38px; }
.slide h2 { font-family:Georgia,serif; font-size:clamp(2.2rem,5vw,4.6rem); margin:12px; }
.lecture-slide { align-items:flex-start; text-align:left; }
.lecture-slide h2 { margin:14px 0 20px; }
.slide-body { font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.65; color:white; max-width:760px; }
.slide-nav { display:flex; gap:12px; margin-top:24px; }
.slide-nav .btn.secondary { background:white; }
.btn:disabled { cursor:not-allowed; opacity:.4; box-shadow:none; }
.options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(650px,100%); margin:24px auto; }
.option { border:2px solid var(--line); border-radius:14px; background:white; color:var(--ink); padding:18px; font-weight:800; }
.option:hover, .option.selected { border-color:var(--brand); background:#ffe8eb; }
.results { margin-top:20px; display:grid; gap:10px; }
.bar-row { display:grid; grid-template-columns:60px 1fr 34px; gap:10px; align-items:center; }
.bar { height:13px; border-radius:20px; background:#ece8df; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--brand); border-radius:20px; transition:width .3s ease; }
.notice { padding:13px; border-radius:12px; background:#eaf8f2; color:var(--good); margin-top:16px; font-weight:700; }
.login-error { min-height:22px; margin-top:10px; color:var(--bad); font-weight:700; }
.muted { color:var(--muted); }
.page-title { font-family:Georgia,serif; font-size:clamp(2.4rem,5vw,4.5rem); margin:8px 0 10px; }
.course-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.course-card { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:155px; padding:24px; text-align:left; color:var(--ink); background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.06); }
.course-card:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:0 16px 36px rgba(214,0,28,.12); }
.course-card strong { font-family:Georgia,serif; font-size:1.4rem; }
.lecture-card { cursor:default; }
.lecture-card .actions { margin-top:auto; }
.course-code { color:var(--brand); font-size:.84rem; font-weight:900; letter-spacing:.1em; }
.empty-state { min-height:410px; display:grid; place-content:center; text-align:center; }
.notes-layout { display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start; }
.note-list { max-height:680px; overflow:auto; }
.note-editor textarea { width:100%; min-height:470px; resize:vertical; border:1px solid #d5d0c6; background:white; border-radius:11px; padding:15px; color:var(--ink); font:inherit; line-height:1.6; }
.note-editor textarea:focus { outline:3px solid #ffd5db; border-color:var(--brand); }
.lecture-summary { display:flex; gap:18px; padding:14px 0; color:var(--brand); }
.pdf-upload { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:20px; padding:18px; border:1px dashed #bbb; border-radius:14px; background:#fafafa; }
.pdf-upload p { margin:5px 0 0; }
.upload-button { margin:0; white-space:nowrap; }
.hidden { display:none; }
.pdf-presenter { height:720px; overflow:hidden; border-radius:20px; background:#222; box-shadow:0 18px 45px rgba(0,0,0,.14); }
.pdf-presenter iframe { width:100%; height:100%; border:0; }

@media (max-width:760px) {
  .hero, .dashboard, .notes-layout { grid-template-columns:1fr; }
  .hero { padding:20px 0; }
  .math-card { min-height:290px; }
  .options, .course-grid { grid-template-columns:1fr; }
  .topline { align-items:flex-start; }
  .join-tools { align-items:flex-start; }
}