:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #13171c;
  --panel2: #181d23;
  --text: #f5f7fa;
  --muted: #9ba6b2;
  --line: #2a313a;
  --accent: #64d9a4;
  --danger: #ff8080;
}
* { box-sizing: border-box; }
body.siteBody {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 15% 5%, #17251f 0, transparent 32rem), var(--bg);
  color: var(--text);
}
a { color: inherit; }
.siteNav {
  min-height: 66px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(11,13,16,.88);
  backdrop-filter: blur(12px);
}
.brand { font-weight: 800; letter-spacing: .2px; text-decoration: none; }
.navActions { display: flex; align-items: center; gap: 10px; }
.siteBtn, button.siteBtn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  padding: 10px 15px;
  border-radius: 10px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}
.siteBtn:hover { border-color: #47525f; }
.siteBtn.primary { background: var(--accent); color: #082016; border-color: transparent; }
.siteBtn.ghost { background: transparent; }
.hero {
  width: min(1060px, calc(100% - 36px));
  margin: 0 auto;
  padding: 96px 0 70px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 54px;
  align-items: center;
}
.hero h1 { margin: 0 0 18px; font-size: clamp(42px, 7vw, 72px); line-height: .98; letter-spacing: -2px; }
.hero p { color: var(--muted); font-size: 19px; line-height: 1.65; max-width: 650px; }
.heroActions { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.previewCard, .siteCard {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(24,29,35,.95), rgba(15,18,22,.95));
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.previewCard { padding: 22px; }
.previewBar { height: 10px; border-radius: 99px; background: #27302e; margin-bottom: 14px; }
.previewBoard { height: 290px; border: 1px solid #303841; border-radius: 12px; background: #f9fafb; position: relative; overflow:hidden; }
.previewBoard:before, .previewBoard:after { content:""; position:absolute; border-radius:999px; transform:rotate(-8deg); }
.previewBoard:before { width: 68%; height: 5px; background:#24272c; top:31%; left:13%; box-shadow: 24px 58px 0 #24272c, -10px 116px 0 #24272c; }
.previewBoard:after { width: 29%; height: 4px; background:#6a4df5; top:49%; left:37%; transform:rotate(22deg); }
.siteMain { width: min(980px, calc(100% - 36px)); margin: 0 auto; padding: 50px 0 80px; }
.authWrap { width:min(460px, calc(100% - 36px)); margin: 0 auto; padding: 65px 0; }
.siteCard { padding: 26px; }
.siteCard h1, .siteCard h2 { margin-top:0; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label { font-size:13px; font-weight:700; color:#c9d0d7; }
.field input, .field select {
  width:100%; border:1px solid var(--line); background:#0d1014; color:var(--text);
  border-radius:10px; padding:12px 13px; font:inherit; outline:none;
}
.field input:focus, .field select:focus { border-color:#5d7469; box-shadow:0 0 0 3px rgba(100,217,164,.1); }
.passwordInputRow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:stretch; }
.passwordInputRow input { min-width:0; }
.passwordToggle {
  appearance:none; min-width:68px; border:1px solid var(--line); background:#151a20; color:#dce3e9;
  border-radius:10px; padding:0 12px; font:600 13px/1 system-ui,sans-serif; cursor:pointer;
}
.passwordToggle:hover { border-color:#47525f; }
.passwordToggle:focus-visible { outline:none; border-color:#5d7469; box-shadow:0 0 0 3px rgba(100,217,164,.1); }
.siteCard[hidden] { display:none !important; }
.formError { min-height: 22px; color: var(--danger); font-size: 13px; margin: 8px 0; }
.formSuccess { min-height: 22px; color: #93e6bc; font-size: 13px; line-height:1.5; margin: 8px 0; }
.authHelpLinks { margin:14px 0 0; text-align:center; }
.authHelpLinks a { color:#b7ead2; }
.formHint, .muted { color:var(--muted); font-size:14px; line-height:1.55; }
.dashboardGrid { display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; }
.roomLauncher { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.roomLauncher .field { flex:1 1 280px; margin:0; }
.accountBar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:8px 12px; margin:0 0 10px; border:1px solid #2a313a; border-radius:10px;
  background:#12161b; color:#dfe5eb; font: 13px/1.4 system-ui,sans-serif;
}
.accountBar .accountActions { display:flex; align-items:center; gap:8px; }
.accountBar a, .accountBar button { color:#fff; background:#1b2128; border:1px solid #333c46; border-radius:7px; padding:6px 9px; text-decoration:none; cursor:pointer; }
@media (max-width: 760px) {
  .hero { grid-template-columns:1fr; padding-top:62px; }
  .previewCard { display:none; }
  .dashboardGrid { grid-template-columns:1fr; }
  .siteNav { padding:0 16px; }
}

/* Stage C2 — account-owned rooms */
.dashboardWide { width:min(1120px, calc(100% - 36px)); }
.dashboardHeader { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.dashboardHeader h1 { margin:7px 0 6px; }
.eyebrow { color:#7f9189; font-size:11px; font-weight:800; letter-spacing:.14em; }
.dashboardMessage { margin:0 0 12px; }
.dashboardLayout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr); gap:20px; align-items:start; }
.dashboardMainCol, .dashboardSideCol { display:grid; gap:20px; }
.cardHeadingRow { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.cardHeadingRow h2, .joinInviteCard h1 { margin:5px 0 0; }
.roomCreateRow { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-top:20px; }
.growField { flex:1 1 320px; margin-bottom:0; }
.smallBtn { padding:8px 11px; font-size:13px; }
.roomList { display:grid; gap:12px; margin-top:18px; }
.managedRoom { border:1px solid var(--line); background:#101419; border-radius:14px; padding:17px; }
.managedRoomTop { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.managedRoom h3 { margin:7px 0 5px; font-size:18px; }
.roleBadge { display:inline-flex; border:1px solid #344039; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:800; letter-spacing:.04em; }
.tutorRole { color:#9ae8c3; background:#13241d; }
.studentRole { color:#b8c9ff; background:#151d31; border-color:#2b385a; }
.roomMeta { color:var(--muted); font-size:13px; }
.managedRoomFooter { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid #222931; }
.managedRoomFooter code { color:#cbd4dc; background:#0a0d10; border:1px solid #252c34; border-radius:7px; padding:5px 7px; }
.inviteBox { margin-top:12px; padding:12px; background:#0c100e; border:1px solid #26362f; border-radius:10px; }
.inviteLinkRow { display:flex; gap:8px; margin-top:8px; }
.inviteLinkRow input { min-width:0; flex:1; border:1px solid var(--line); background:#080b0d; color:#dce5e0; border-radius:8px; padding:9px 10px; }
.emptyRooms { display:flex; flex-direction:column; gap:5px; color:var(--muted); padding:24px 8px; text-align:center; }
.emptyRooms strong { color:var(--text); }
.accountCard .accountValue { margin:4px 0 14px; overflow-wrap:anywhere; }
.compactStatus { min-height:20px; margin-top:10px; }
.joinInviteActions { display:flex; gap:10px; margin-top:18px; }
.roomMetaLabel { margin:-7px 0 10px; color:#aab6c0; font:13px/1.4 system-ui,sans-serif; }
@media (max-width: 850px) {
  .dashboardLayout { grid-template-columns:1fr; }
  .managedRoomTop { align-items:flex-start; flex-direction:column; }
  .inviteLinkRow { flex-direction:column; }
}

/* Stage C3 — saved lessons on dashboard */
.dashboardLessons { margin-top:13px; padding-top:12px; border-top:1px solid #222931; }
.dashboardLessonPanel { margin-top:10px; border:1px solid #252c34; border-radius:10px; overflow:hidden; background:#0c1014; }
.dashboardLessonRow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 12px; border-top:1px solid #20262c; }
.dashboardLessonRow:first-child { border-top:0; }
.dashboardLessonInfo { min-width:0; display:flex; flex-direction:column; gap:4px; }
.dashboardLessonInfo strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dashboardLessonInfo span { color:var(--muted); font-size:12px; }
.dashboardLessonActions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.dashboardLessonEmpty { padding:12px; color:var(--muted); font-size:13px; }
.dangerBtn { color:#ffb4b4; }
@media (max-width:650px) { .dashboardLessonRow { align-items:flex-start; flex-direction:column; } .dashboardLessonActions { justify-content:flex-start; } }

/* Stage C4 — dashboard polish, recent activity and room management */
.dashboardStats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:12px;
  margin:0 0 20px;
}
.statCard {
  border:1px solid var(--line);
  background:linear-gradient(180deg,#12171b,#0e1216);
  border-radius:14px;
  padding:16px 17px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.statCard[hidden] { display:none; }
.statCard strong { font-size:27px; line-height:1.05; letter-spacing:-.02em; overflow-wrap:anywhere; }
.statLabel { color:#c8d2da; font-size:12px; font-weight:750; }
.statHint { color:var(--muted); font-size:11px; }
.roomFilters {
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px;
  gap:10px;
  align-items:end;
  margin-top:18px;
  padding:13px;
  border:1px solid #242c34;
  border-radius:12px;
  background:#0d1115;
}
.roomFilters .field { margin:0; }
.roomFilters select {
  width:100%;
  border:1px solid var(--line);
  background:#0d1014;
  color:var(--text);
  border-radius:10px;
  padding:12px 34px 12px 12px;
  font:inherit;
  outline:none;
  color-scheme:dark;
}
.roomFilters select:focus { border-color:#5d7469; box-shadow:0 0 0 3px rgba(100,217,164,.1); }
.roomFilterStatus { min-height:18px; margin:9px 1px -4px; font-size:12px; }
.managedRoomTitle { min-width:0; }
.managedRoomActions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.activityStamp { margin-left:auto; }
.recentRooms { display:grid; gap:7px; margin-top:12px; }
.recentRoomItem {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border:1px solid #242c34;
  border-radius:10px;
  background:#0d1115;
  text-decoration:none;
}
.recentRoomItem:hover { border-color:#3b4853; background:#11171c; }
.recentRoomMain { min-width:0; display:flex; align-items:center; gap:7px; }
.recentRoomMain strong { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; }
.recentRole { flex:0 0 auto; border-radius:999px; padding:2px 6px; font-size:9px; font-weight:800; letter-spacing:.04em; }
.recentTutor { color:#98e6bf; background:#14231c; }
.recentStudent { color:#b7c8ff; background:#172036; }
.recentWhen { flex:0 0 auto; color:var(--muted); font-size:11px; }
.filterEmpty { border:1px dashed #28313a; border-radius:10px; }
@media (max-width:900px) {
  .dashboardStats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roomFilters { grid-template-columns:minmax(0,1fr) 170px; }
  .filterSearch { grid-column:auto; }
}
@media (max-width:560px) {
  .dashboardStats { grid-template-columns:1fr 1fr; }
  .roomFilters { grid-template-columns:1fr; }
  .filterSearch { grid-column:auto; }
  .managedRoomActions { justify-content:flex-start; }
  .activityStamp { margin-left:0; }
  .recentRoomItem { align-items:flex-start; flex-direction:column; }
}


/* Stage C4.3 — contextual action feedback */
.dashboardMessage[hidden], .actionFeedback[hidden] { display:none !important; }
.dashboardMessage {
  border:1px solid rgba(255,128,128,.34);
  background:rgba(92,28,32,.28);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
.compactStatus.statusError { color:#ffb0b0; }
.actionFeedback {
  flex:1 0 100%;
  width:100%;
  margin-top:4px;
  padding:7px 9px;
  border:1px solid rgba(255,128,128,.34);
  border-radius:8px;
  background:rgba(92,28,32,.28);
  color:#ffb0b0;
  font-size:12px;
  line-height:1.4;
  text-align:left;
  outline:none;
}
.attentionPulse { animation:dashboardAttention .75s ease-out; }
@keyframes dashboardAttention {
  0% { box-shadow:0 0 0 0 rgba(255,128,128,.38); }
  100% { box-shadow:0 0 0 7px rgba(255,128,128,0); }
}
@media (prefers-reduced-motion: reduce) {
  .attentionPulse { animation:none; }
}

/* Stage E1.8 — account security / authenticator-app 2FA */
.securityMain { max-width: 900px; }
.securityCard { margin-bottom: 18px; }
.securityStatusRow { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.securityBadge { display:inline-flex; align-items:center; justify-content:center; min-width:50px; padding:7px 10px; border-radius:999px; border:1px solid #cbd4d9; font-size:12px; font-weight:800; letter-spacing:.08em; }
.securityBadge.enabled { border-color:#3d7d61; background:#13241d; color:#9ae8c3; }
.totpSetupGrid { display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:start; margin:20px 0; }
.qrWrap { background:#fff; border:1px solid #dfe5e8; border-radius:12px; padding:10px; width:max-content; }
.qrWrap img { display:block; max-width:240px; height:auto; }
.totpSetupDetails { display:flex; flex-direction:column; gap:16px; min-width:0; }
.setupKeyField { margin:0; }
.setupSecret { display:block; padding:12px; border:1px solid var(--line); border-radius:9px; background:#0d1014; color:#dfe7ec; overflow-wrap:anywhere; letter-spacing:.08em; font-size:14px; }
.recoveryCard { border-color:#6f612c; background:linear-gradient(180deg,#211e12,#15150f); }
.recoveryCodes { padding:16px; border:1px solid #5a5231; border-radius:10px; background:#0d1014; color:#f4e8aa; font-size:15px; line-height:1.7; white-space:pre-wrap; user-select:all; }
.securityDetails { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.securityDetails summary { cursor:pointer; font-weight:700; }
.securityDetails form { margin-top:14px; }
.dangerDetails summary { color:var(--danger); }
.accountSecurityLink { display:inline-flex; margin-top:4px; }
@media (max-width: 640px) {
  .totpSetupGrid { grid-template-columns:1fr; }
  .qrWrap { width:auto; display:flex; justify-content:center; }
  .securityStatusRow { align-items:center; }
}

/* E1.9 v4 — make second-factor confirmation explicit when adding another method. */
.existingFactorConfirm {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.existingFactorConfirm > .formHint:first-child { margin-top: 0; }
.existingFactorCodeField { margin-top: 12px; margin-bottom: 0; }
.existingFactorConfirm .compactBtn { margin-top: 8px; }

/* E1.9 v5: give password managers a real username target so 2FA code fields are not mistaken for email/username fields. */
.autofillUsernameSink {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Stage E1.9 v8 — viewport-visible account-security feedback */
.securityMain > .dashboardMessage {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  width: min(440px, calc(100vw - 40px));
  margin: 0;
  padding: 13px 42px 13px 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.securityMain > .dashboardMessage.formSuccess {
  border-color: rgba(91,223,160,.44);
  background: rgba(18,72,49,.94);
  color: #a7f3d0;
}
.securityMain > .dashboardMessage.formError {
  border-color: rgba(255,128,128,.5);
  background: rgba(92,28,32,.96);
  color: #ffc0c0;
}
.securityMain > .dashboardMessage::after {
  content: "×";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  opacity: .78;
}
.securityMain > .dashboardMessage:focus-visible { outline:2px solid #d7e7f0; outline-offset:2px; }
@media (max-width:560px){
  .securityMain > .dashboardMessage { right:12px; bottom:12px; width:calc(100vw - 24px); }
}