:root{
  --bg:#0a0a0a;--bg-2:#0f0f10;--panel:rgba(15,15,16,.75);--panel-solid:#0f0f10;
  --line:#262626;--line-2:#1c1c1e;--line2:#1c1c1e;
  --text:#fafafa;--muted:#9a9a9a;--muted-2:#6a6a6a;--mut:#9a9a9a;--white:#ffffff;--heading:#fafafa;--soft:#d6d6d6;
  --sans:"Space Grotesk",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --coral:#ff5f6d;--amber:#ffc371;--learn:#5b8def;--own:#5b8def;
  --spectrum:linear-gradient(90deg,#5b8def,#8fb4f7);
  --grad-primary:linear-gradient(90deg,#5b8def,#8fb4f7);
  --grad-accent:linear-gradient(90deg,#ff5f6d 0%,#ffc371 100%);
  --grad-success:linear-gradient(90deg,#4be1a0 0%,#5b8def 100%);
  --grad-gold:linear-gradient(90deg,#ffc371 0%,#ff5f6d 100%);
  --accent:#5b8def;--accent-light:#8fb4f7;--ok:#4be1a0;--live:#4be1a0;
  --input:#0c0c0c;--code-bg:#161618;--hover:#141416;
  --nav-bg:rgba(10,10,10,.85);--nav-menu-bg:rgba(10,10,10,.97);
  --btn-hover-bg:#141416;--btn-hover-border:#555;
  --btn-solid-bg:#ffffff;--btn-solid-fg:#000000;--btn-solid-hover:#e6e6e6;
  --ok-bg:#0f1a15;--ok-line:#2e5c46;--err:#ff5f6d;--err-bg:#1a0f0f;--err-line:#5c2e2e;
  --warn:#ffc371;--warn-bg:#1a150f;--warn-line:#5c4a2e;
  --title-grad:linear-gradient(100deg,#ffffff 0%,#fafafa 100%);
  --ph-grad:linear-gradient(135deg,#ffffff 40%,#c4c4c4 100%);
  --hero-bg:linear-gradient(135deg,rgba(16,16,17,.7) 0%,rgba(10,10,10,.85) 100%);
  --dash-hero-bg:linear-gradient(135deg,rgba(15,15,16,.85) 0%,rgba(10,10,10,.95) 100%);
  --card-bg:linear-gradient(180deg,rgba(15,15,16,.8) 0%,rgba(11,11,12,.95) 100%);
  --kpi-bg:linear-gradient(180deg,rgba(18,18,19,.7) 0%,rgba(12,12,13,.85) 100%);
  --glass-line:rgba(255,255,255,.08);--glass-fill:rgba(255,255,255,.03);
  --shadow-card:0 8px 24px -6px rgba(0,0,0,.4);
  --shadow-card-hover:0 16px 36px -8px rgba(0,0,0,.6),0 0 25px rgba(255,255,255,.05);
  --hero-shadow:0 20px 40px -15px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);
  --chat-bg:#0d0d0e;--chat-bubble:#161618;--chat-mine:#17171a;--chat-mine-line:#333338;
  --avatar-bg:#161618;--avatar-line:#2a2a2a;
  --phaser:repeating-linear-gradient(45deg,#0d0d0f,#0d0d0f 10px,#101012 10px,#101012 20px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;color-scheme:dark}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono)}.sm{font-size:12px}.muted{color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);vertical-align:middle;box-shadow:none}
code{font-family:var(--mono);background:var(--code-bg);border:1px solid var(--line-2);padding:1px 6px;font-size:.9em}
h1,h2,h3{letter-spacing:-.02em}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:transparent;color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--btn-hover-border);background:var(--btn-hover-bg)}
.btn.solid{background:var(--btn-solid-bg);color:var(--btn-solid-fg);border-color:var(--btn-solid-bg)}.btn.solid:hover{background:var(--btn-solid-hover);border-color:var(--btn-solid-hover);color:var(--btn-solid-fg)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sm{padding:7px 12px;font-size:11px}

/* nav */
.lms-nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.lms-nav .nav-inner{display:flex;align-items:center;height:60px;position:relative;gap:14px}
.lms-nav .brand{display:flex;align-items:center;gap:11px;min-width:0}
.lms-nav .brand img{height:28px}
.lms-nav .brand img.brand-logo-on-light{display:none}
.lms-nav .brand-x{color:var(--muted);font-size:14px;line-height:1}
.lms-nav .brand .uni-logo{height:22px;width:auto;max-width:88px;object-fit:contain;background:#fff;padding:2px 6px;border-radius:2px}
.uni-logo.lg{height:42px;max-width:160px;padding:4px 8px}
.card.uni-card.branded{background:linear-gradient(180deg,#141416,var(--panel))}
.lms-nav .brand small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:11px}
.lms-nav .nav-links{display:flex;gap:20px;align-items:center;margin-left:auto}
.lms-nav .nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:.2s}
.lms-nav .nav-links a:hover,.lms-nav .nav-links a.on{color:var(--text)}
.lms-nav-tools{display:flex;align-items:center;gap:8px;flex:none}
.lms-nav .nav-links .btn{color:var(--text)}
.lms-nav .nav-links .btn.solid,.lms-nav .nav-links .btn.solid:hover{color:var(--btn-solid-fg)}
.lms-nav .nav-links a.live-link{color:#ff5f6d;display:inline-flex;align-items:center;gap:6px;position:relative}
.lms-nav .nav-links a.live-link:hover{color:#ff8b95}
.lms-nav .nav-links a.live-link.on{color:#ff5f6d;border-bottom-color:#ff5f6d}
.lms-nav .nav-links a.live-link .live-dot{width:7px;height:7px;border-radius:50%;background:#ff5f6d;box-shadow:0 0 0 0 rgba(255,95,109,.6);animation:livep 1.6s infinite}
.lms-nav .nav-notice,.nav-notice{min-width:16px;height:16px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:#ff5f6d;color:#fff;font-size:9px;font-weight:700;letter-spacing:0;border-radius:99px;line-height:1}
.lms-nav .nav-links .who{color:var(--muted-2);text-transform:none;letter-spacing:0}
.lms-burger{display:none;background:none;border:1px solid var(--line);color:var(--text);font-family:var(--mono);padding:6px 10px;cursor:pointer}
html:has(.lms-shell),
html:has(.lms-shell) body{
  min-height:100vh;
  min-height:100dvh;
}
.lms-shell{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  justify-items:stretch;
}
.lms-main{
  justify-self:center;
  width:100%;
  max-width:1080px;
  padding:34px 22px 40px;
}
.lms-foot{border-top:1px solid var(--line-2);padding:24px 0;color:var(--muted-2);font-size:11px;text-align:center;background:var(--bg)}
.flash{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok);padding:11px 14px;margin-bottom:18px;font-family:var(--mono);font-size:13px}

.ph{font-size:clamp(26px,4vw,40px);font-weight:700;text-transform:uppercase;margin-bottom:18px}
.ph2{font-size:20px;font-weight:600;text-transform:uppercase;margin:30px 0 14px}
.crumb{margin-bottom:14px}.crumb a{color:var(--muted)}.crumb a:hover{color:var(--text)}

.card{
  border:1px solid var(--line-2);
  background:var(--bg-2);
  color:var(--text);
  padding:22px;
  margin-bottom:16px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  transform:none;
}
.card h3{
  color:var(--heading);
  text-transform:none;
  letter-spacing:-.02em;
}
.card li{color:var(--muted)}
.card:hover{
  background:var(--bg-2);
  border-color:var(--line);
  transform:none;
  box-shadow:none;
}
.err{color:var(--err);border:1px solid var(--err-line);background:var(--err-bg);padding:10px 12px;margin-bottom:14px;font-size:13px}

/* forms */
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
input,select,textarea{display:block;width:100%;margin-top:6px;background:var(--input);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:14px;padding:11px;border-radius:0;color-scheme:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--muted-2);opacity:1}
textarea{font-family:var(--mono);line-height:1.5;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
label.chk,label.chk *{display:inline-flex;width:auto;text-transform:none}
label.chk input{width:auto;margin:0 8px 0 0}

/* auth */
.auth-wrap{max-width:420px;margin:20px auto}
.card.auth h2{font-size:24px;text-transform:uppercase;margin-bottom:6px}
.card.auth .btn{width:100%;justify-content:center;margin-top:4px}
.clerk-auth{
  display:flex;
  justify-content:center;
  color-scheme:dark;
  color:#fafafa;
  --clerk-color-foreground:#fafafa;
  --clerk-color-muted-foreground:#c4c4c4;
  --clerk-color-input-foreground:#fafafa;
  --clerk-color-background:#0f0f10;
  --clerk-color-input:#0c0c0c;
  --clerk-color-border:#262626;
}
.clerk-auth .cl-card,.clerk-auth .cl-cardBox,.clerk-auth .cl-rootBox{width:100%;color:#fafafa}
.clerk-auth .cl-headerTitle,.clerk-auth h1,.clerk-auth h2{color:#fafafa !important}
.clerk-auth .cl-headerSubtitle,.clerk-auth .cl-footerActionText,.clerk-auth .cl-formFieldHintText{color:#c4c4c4 !important}
.clerk-auth .cl-formFieldLabel,.clerk-auth label,.clerk-auth .cl-identityPreviewText,.clerk-auth .cl-formFieldInput,.clerk-auth input{color:#fafafa !important}
.clerk-auth input::placeholder,.clerk-auth .cl-formFieldInput::placeholder{color:#9a9a9a !important}
.clerk-auth .cl-footerActionLink,.clerk-auth a.cl-footerActionLink{color:var(--accent) !important}

/* catalog */
.cat-hero,.course-hero{margin-bottom:26px}
.cat-hero .kick,.kick{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;gap:8px;align-items:center}
.cat-hero h1{font-size:clamp(28px,5vw,48px);font-weight:700;text-transform:uppercase}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.cardgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cardgrid{grid-template-columns:1fr}}
.course-card{border:1px solid var(--line-2);background:var(--bg-2);padding:20px;transition:.2s;display:block}
.course-card:hover{border-color:var(--btn-hover-border);background:var(--code-bg)}
.course-card .lvl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.course-card h3{font-size:17px;font-weight:600;margin-bottom:6px}
.course-card .foot{margin-top:14px}
.prog{height:6px;background:var(--code-bg);margin:12px 0 6px;overflow:hidden}
.prog span{display:block;height:100%;background:var(--accent)}
.prog.big{height:8px}

/* course */
.course-hero h1{font-size:clamp(26px,4vw,40px);font-weight:700;text-transform:uppercase}
.course-hero .lvl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.course-hero-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.course-hero-tags .lvl{margin-bottom:0}
.enroll-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(6,24,18,.92);
  border:1px solid rgba(75, 225, 160,.45);
  color:#4be1a0;
  padding:4px 9px;
  border-radius:6px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.enroll-pill.earned{
  background:rgba(18, 18, 19,.92);
  border-color:rgba(91, 141, 239,.5);
  color:#8fb4f7;
}
.enrollbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.enrollbar input{width:auto;margin:0}
.module{border:1px solid var(--line-2);margin-bottom:12px}
.mhead{padding:13px 16px;background:var(--panel);border-bottom:1px solid var(--line-2);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lrow{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--line-2);transition:.15s}
.lrow:last-child{border-bottom:0}.lrow:hover{background:var(--hover)}
.lrow.locked{opacity:.55;cursor:not-allowed;pointer-events:none}
.lrow.locked .lk{letter-spacing:.12em}
.lrow .lic{width:20px;color:var(--muted-2)}
.lrow.done .lic{color:var(--ok)}
.lrow .lt{flex:1}.lrow .lk{font-size:10px;color:var(--muted-2);letter-spacing:.1em}
.done-banner{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok);padding:14px 16px;margin-top:14px;font-weight:600}

.event-list{display:grid;gap:12px;margin-bottom:8px}
.event-card{border:1px solid var(--line-2);background:var(--bg-2);padding:18px 20px}
.event-card.kind-meeting{border-color:rgba(75, 225, 160,.28)}
.event-card.kind-form{border-color:rgba(91, 141, 239,.28)}
.event-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.event-kind{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.event-card.kind-meeting .event-kind{color:#4be1a0}
.event-when{font-size:11px;color:var(--muted)}
.event-card h3{font-size:18px;margin:0 0 8px;font-weight:650}
.event-card p{margin:0 0 12px}
.event-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.event-actions form{display:inline}
.event-edit{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.event-edit h4{margin:0 0 10px;font-size:14px;font-weight:650}
.event-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.event-scope{margin:-2px 0 10px;font-size:11px;color:var(--muted)}
.event-body{margin:0 0 12px;color:var(--soft);font-size:14.5px;line-height:1.7;white-space:normal;overflow-wrap:anywhere}
.event-body a{color:#6ee7ff;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.event-body a:hover{color:#b8f4ff}
.event-body b{color:var(--heading);font-weight:600}
.event-audience{border:0;margin:0 0 14px;padding:0;min-width:0}
.event-audience legend{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.event-audience-opts{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:8px}
.event-audience-opts label{display:flex;align-items:center;gap:8px;margin:0}
.event-audience-opts input,.event-uni-list input{width:auto;margin:0}
.event-uni-list{display:grid;gap:8px;margin:0;padding:10px 12px;border:1px solid var(--line-2);background:var(--bg-2);max-height:220px;overflow:auto}
.event-uni-list label{display:flex;align-items:center;gap:8px;margin:0}

/* lesson */
.lesson{max-width:820px}
.lesson-head{margin-bottom:18px}
.lesson-head h1{font-size:clamp(22px,3.4vw,32px);font-weight:700;margin:0 0 8px;text-transform:uppercase;letter-spacing:-.03em;line-height:1.15}
.lesson-meta{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:4px 8px}
.lesson-film .video-embed{margin-bottom:16px}
.lesson-notes{border:1px solid var(--line-2);background:var(--bg-2);margin-bottom:4px}
.lesson-notes-head{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-2);background:var(--panel);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lesson-notes-head .sym{color:var(--accent);font-size:14px;letter-spacing:0}
.lesson-notes-body{padding:8px 22px 18px}
.lesson-notes-body h3,.lesson-notes-body h4{font-size:14px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--heading);margin:22px 0 10px;padding:0 0 0 12px;border-left:2px solid var(--accent);line-height:1.35}
.lesson-notes-body h3:first-child,.lesson-notes-body h4:first-child{margin-top:14px}
.lesson-notes-body p{margin:0 0 12px;color:var(--soft);font-size:15px;line-height:1.7}
.lesson-notes-body ul,.lesson-notes-body ol{margin:0 0 14px;padding-left:1.2rem;color:var(--soft);font-size:15px;line-height:1.7}
.lesson-notes-body li{margin:0 0 7px;padding-left:4px}
.lesson-notes-body li::marker{color:var(--accent)}
.lesson-notes-body b{color:var(--heading);font-weight:600}
.lesson-notes-body code{font-size:12.5px;color:var(--accent-light);background:var(--code-bg);border:1px solid var(--line-2);padding:1px 6px}
.lesson-cta{max-width:820px;margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line-2);background:var(--bg-2)}
.done-tag{color:var(--ok)}

/* LIVE SESSION */
.live-head{margin-bottom:20px}
.live-grid{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
@media(max-width:900px){.live-grid{grid-template-columns:1fr}}
.live-main{border:1px solid var(--line-2);background:var(--bg-2);padding:16px}
.live-panel{border:1px solid var(--line-2);background:var(--bg-2);display:flex;flex-direction:column}
.live-side{display:flex;flex-direction:column;gap:16px}
.live-panel-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line-2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--panel)}
.live-panel-head .sym{color:var(--muted)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#ff5f6d;box-shadow:0 0 0 0 rgba(255,95,109,.6);animation:livep 1.6s infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(255,95,109,.5)}70%{box-shadow:0 0 0 7px rgba(255,95,109,0)}100%{box-shadow:0 0 0 0 rgba(255,95,109,0)}}
.live-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.live-note{margin-top:10px;font-size:11px;color:var(--muted-2)}
.ch-body{display:flex;flex-direction:column}
.ch-frame{width:100%;height:420px;border:0;background:var(--input)}
.ch-body .btn{margin:12px}
.ch-ph{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;background:var(--phaser)}
.ch-ph .pl{font-size:28px;color:var(--muted-2)}
.ch-ph b{font-size:14px}.ch-ph .mono{font-size:11px;color:var(--muted-2)}
.ch-ph.wa{min-height:180px}.ch-ph.wa .btn{margin-top:6px}

/* video */
.video-embed{position:relative;width:100%;padding-top:56.25%;margin:0 0 20px;background:#000;border:1px solid var(--line-2)}
.video-embed iframe,.video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed.ph{padding-top:0;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:var(--phaser)}
.video-embed.ph .pl{font-size:34px;color:var(--muted-2)}
.video-embed.ph b{font-size:14px}
.video-embed.ph .mono{font-size:11px;color:var(--muted-2)}

/* quiz */
.q .qp{margin-bottom:12px;font-size:15px}
.opt{display:flex;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:14px;color:var(--soft);padding:9px 12px;border:1px solid var(--line-2);margin-bottom:8px;cursor:pointer;min-width:0}
.opt input{width:auto;margin:3px 0 0;flex:none}
.opt:hover{border-color:var(--btn-hover-border)}
.opt-in{text-transform:none}
.quiz-result{padding:13px 16px;margin-bottom:18px;font-weight:600;overflow-wrap:anywhere}
.quiz-form .quiz-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.quiz-result.ok{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.quiz-result.bad{border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.q ul{list-style:none;margin-top:8px}.q li{padding:7px 12px;border:1px solid var(--line-2);margin-bottom:6px;font-family:var(--mono);font-size:13px;color:var(--heading)}
.q li.correct{border-color:var(--ok-line);color:var(--ok)}

/* dashboard badges */
.badgegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.badgegrid{grid-template-columns:1fr 1fr}}
.badge-card{border:1px solid var(--line-2);background:var(--bg-2);padding:20px;text-align:center}
.badge-card .medal{font-size:34px;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.badge-card h4{margin:10px 0 6px;font-size:14px}
.bbtns,.vbtns,.bbtns{display:flex;gap:8px;justify-content:center;margin-top:12px}

/* verify */
.verify{max-width:520px;margin:20px auto;text-align:center;border:1px solid var(--line-2);background:var(--bg-2);padding:40px 30px}
.badge-medal{font-size:60px;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.vstate{font-family:var(--mono);font-size:13px;letter-spacing:.08em;padding:6px 14px;display:inline-block;margin-bottom:16px}
.vstate.ok{color:var(--ok);border:1px solid var(--ok-line)}.vstate.bad{color:var(--err);border:1px solid var(--err-line)}
.verify h1{font-size:26px;font-weight:700;text-transform:uppercase;margin-bottom:10px}
.vmeta{font-size:12px;color:var(--muted-2);margin-top:6px}
.vbtns{display:flex;gap:10px;justify-content:center;margin:20px 0 8px;flex-wrap:wrap}

/* certificate */
.cert-body{background:#111;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:30px}
.cert{width:820px;max-width:100%;aspect-ratio:1.414/1;background:linear-gradient(160deg,#0f0f12,#0a0a0a);border:1px solid #2a2a2e;padding:52px;display:flex;flex-direction:column;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cert::before{content:"";position:absolute;inset:14px;border:1px solid #1e1e22;pointer-events:none}
.cert-top{display:flex;justify-content:space-between;align-items:center}
.cert-top img{height:26px}.cert-top .mono{font-size:11px;letter-spacing:.24em;color:var(--muted)}
.cert-mid{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center}
.cert-mid h1{font-size:44px;font-weight:700;margin:8px 0}
.cert-mid h2{font-size:24px;font-weight:600;color:#fff;margin:8px 0}
.cert-mid .muted{letter-spacing:.1em;font-size:12px}
.cert-badge{margin-top:18px;font-family:var(--mono);color:var(--accent);letter-spacing:.05em}
.cert-foot{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #1e1e22;padding-top:18px}
.cert-foot div{display:flex;flex-direction:column;gap:3px}.cert-foot b{font-size:13px}.cert-foot .mono{font-size:9px;color:var(--muted-2);letter-spacing:.04em}
.cert .btn{position:absolute;bottom:-56px;left:50%;transform:translateX(-50%)}
@media print{.noprint{display:none}.cert-body{background:#fff}.cert{box-shadow:none;border-color:#ccc}}

/* university dashboard */
.kpirow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-bottom:24px}
@media(max-width:640px){.kpirow{grid-template-columns:1fr 1fr}}
.ukpi{background:var(--bg-2);padding:18px 20px}
.ukpi b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em}
.ukpi span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
select{display:block;width:100%;margin-top:6px;background:var(--input);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:14px;padding:11px;border-radius:0}

/* studio */
.studio-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.send-recip{
  margin:0 0 16px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  max-height:220px;
  overflow:auto;
}
.send-recip legend{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 4px;
}
.send-recip label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 8px;
}
.send-recip input[type="checkbox"]{
  width:auto;
  margin:4px 0 0;
}
.send-body{
  white-space:pre-wrap;
  margin:8px 0;
  padding:10px 12px;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  font-size:13px;
  line-height:1.5;
}
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line-2);margin-bottom:20px}
.tbl th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line-2);background:var(--panel)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-2);font-size:14px;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.pill-ok{font-family:var(--mono);font-size:10px;color:var(--ok);border:1px solid var(--ok-line);padding:3px 8px;text-transform:uppercase}
.pill-mut{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--line);padding:3px 8px;text-transform:uppercase}
.row-actions{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.inline-add{display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;align-items:flex-start;background:var(--bg-2)}
.inline-add input,.inline-add select,.inline-add textarea{width:auto;margin:0;flex:1;min-width:140px}
.inline-add textarea{flex-basis:100%}
.inline-add.mod{border:1px dashed var(--line);margin-top:6px}
.opt-in input{display:inline-block;width:auto;margin-top:6px}
.dsa-add{margin-top:16px}
.dsa-add h3{margin:0 0 6px}
.dsa-add-form{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.qcourse + .qcourse{margin-top:18px}
button.btn:disabled,button.btn[disabled]{opacity:.45;pointer-events:none}

/* Google Meet live-class join card (Meet can't be iframed) */
.video-embed.meet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:38px 20px}
.video-embed.meet .pl{font-size:34px;color:#4be1a0}
.video-embed.meet b{font-size:18px}
.video-embed.meet .mono{font-size:12px;color:#9a9a9a;word-break:break-all}

/* mobile: collapse LMS nav behind a hamburger; close on route change */
@media(max-width:1080px){
  .lms-nav .nav-inner{height:56px}
  .lms-nav .brand small{display:none}
  .lms-nav .nav-links{
    display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--nav-menu-bg);border-bottom:1px solid var(--line);z-index:41;padding-bottom:16px;
  }
  .lms-nav .nav-links.open{display:flex;max-height:calc(100dvh - 56px);overflow-y:auto}
  .lms-nav .nav-links a{
    padding:14px 22px;border-bottom:1px solid var(--line-2);width:100%;font-size:12px;box-sizing:border-box;
  }
  .lms-nav .nav-links .who-link{width:100%}
  .lms-nav .nav-links .btn{
    margin:12px 22px 4px;width:auto;align-self:flex-start;justify-content:center;
  }
  .lms-nav-tools{margin-left:auto}
  .lms-burger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:22px;line-height:1;flex:none}
  body.lms-nav-open{overflow:hidden}
}

/* ---- gamified quizzes hub ---- */
.qcourse{border:1px solid var(--line-2);background:var(--bg-2);padding:20px 20px 22px;margin-top:14px}
.qcourse-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.qstats{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.qstat{background:var(--code-bg);border:1px solid var(--line-2);padding:8px 14px;text-align:center;min-width:66px;flex:1}
.qstat b{display:block;font-size:19px}.qstat span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qprog{height:6px;background:var(--code-bg);margin:14px 0 4px}.qprog span{display:block;height:100%;background:var(--accent)}
.qlevels{display:grid;gap:10px;margin-top:12px}
.qlevel{display:flex;align-items:center;gap:14px;border:1px solid var(--line-2);background:var(--bg-2);padding:14px 16px;min-width:0}
.qlevel.pass{border-color:var(--ok-line);background:var(--ok-bg)}
.qlevel.locked{opacity:.55}
.qlv-ico{font-size:22px;width:34px;text-align:center;color:var(--muted)}
.qlevel.pass .qlv-ico{color:#4be1a0}
.qlv-body{flex:1;min-width:0}.qlv-body h3{font-size:15px;margin:2px 0 6px;overflow-wrap:anywhere}
.qlv-cta{flex:none;min-width:0}
.qlv-cta .mono{display:block;max-width:16rem;overflow-wrap:anywhere}
.qbadge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:3px 9px;border:1px solid var(--line-2);color:var(--muted);max-width:100%;overflow-wrap:anywhere}
.qbadge.ok{color:#4be1a0;border-color:var(--ok-line)}
.qbadge.lock{color:var(--muted-2)}

/* mentor notes + university profiles */
.note{border-left:2px solid var(--accent);background:var(--code-bg);padding:9px 12px;margin-bottom:8px;font-size:13.5px}
.uni-card{margin-top:14px}
.uni-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.uni-logo{height:34px;width:auto;background:#fff;padding:4px 8px;border-radius:2px}
.uni-bullets{list-style:none;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.uni-bullets li{font-family:var(--mono);font-size:12.5px;color:var(--soft);padding-left:16px;position:relative}
.uni-bullets li:before{content:"▸";position:absolute;left:0;color:#5b8def}
.uni-parts summary,.uni-edit summary{cursor:pointer;padding:8px 0;color:var(--muted)}
.uni-parts summary:hover,.uni-edit summary:hover{color:var(--text)}

.pill-risk{font-family:var(--mono);font-size:10px;color:var(--warn);border:1px solid var(--warn-line);padding:3px 8px;text-transform:uppercase}
.studio-nav{
  display:flex;
  align-items:stretch;
  gap:10px;
  margin-bottom:22px;
  min-width:0;
}
.studio-tabs{display:flex;gap:0;flex:1;min-width:0;border:1px solid var(--line-2);overflow-x:auto;background:var(--bg)}
.studio-tabs a{
  position:relative;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:11px 16px;border-right:1px solid var(--line-2);white-space:nowrap;
  background:transparent;
  transition:color .15s ease,background .15s ease;
}
.studio-tabs a:last-child{border-right:0}
.studio-tabs a:hover{
  color:var(--heading);
  background:var(--hover);
}
.studio-tabs a.on,
.studio-tabs a[aria-current="page"]{
  color:var(--heading);
  background:var(--hover);
  font-weight:650;
}
.studio-tabs a.on::after,
.studio-tabs a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--accent);
}
.studio-tab-folders{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  padding:0 14px;
  border:1px dashed var(--line);
  background:var(--bg-2);
  color:var(--heading);
  font-family:var(--mono);
  font-size:11px;
  font-weight:650;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.studio-tab-folders svg{flex:none;color:var(--muted-2)}
.studio-tab-folders:hover{
  border-style:solid;
  border-color:var(--btn-hover-border);
  background:var(--hover);
}
.studio-tab-folders:hover svg{color:var(--heading)}
.studio-tab-folders.on,
.studio-tab-folders[aria-current="page"]{
  border-style:solid;
  border-color:var(--accent);
  background:var(--hover);
  box-shadow:inset 3px 0 0 var(--accent);
}
.studio-tab-folders.on svg,
.studio-tab-folders[aria-current="page"] svg{color:var(--accent)}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0 24px}
a.folder-card{display:flex;flex-direction:column;gap:12px;margin-bottom:0;text-decoration:none;color:inherit}
a.folder-card:hover{border-color:var(--text);color:inherit}
.folder-ico{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:var(--panel);color:var(--muted)}
.folder-card h3{margin:0;font-size:18px;font-weight:700}
.folder-meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.folder-file{display:inline-flex;align-items:flex-start;gap:10px}
.folder-file-ico{display:inline-flex;color:var(--muted);margin-top:2px;flex:none}
.file-pending{color:var(--muted-2)}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:flex-end}
.filterbar label{margin-bottom:0;flex:1;min-width:160px}
.filterbar input,.filterbar select{margin-top:6px}
.filterbar .btn{height:42px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 20px}

/* ---- avatars / profile ---- */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;overflow:hidden;border:1.5px solid var(--avatar-line);background:var(--avatar-bg);flex:none;vertical-align:middle}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.initials{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--soft);background:linear-gradient(135deg,var(--code-bg),var(--bg))}
.avatar.sm{width:26px;height:26px}.avatar.sm.initials{font-size:10px}
.avatar.lg{width:76px;height:76px;border-width:2px}.avatar.lg.initials{font-size:26px}
.who-link{display:inline-flex;align-items:center;gap:8px}
.profile-head{display:flex;align-items:center;gap:16px}
.profile-card input[type=file]{font-family:var(--mono);font-size:12px}
/* ---- cohort chat ---- */
.chat-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chat-tabs a{border:1px solid var(--line-2);padding:6px 12px;font-size:11px;color:var(--muted)}
.chat-tabs a.on{color:var(--text);border-color:var(--accent);background:var(--code-bg)}
.chat-box{border:1px solid var(--line-2);background:var(--chat-bg);max-height:460px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.chat-msg{display:flex;gap:10px;align-items:flex-start}
.chat-msg.mine{flex-direction:row-reverse}
.chat-msg .cm-body{max-width:76%}
.chat-msg.mine .cm-body{text-align:right}
.cm-meta{font-size:9.5px;color:var(--muted-2);margin-bottom:3px}
.cm-text{background:var(--chat-bubble);border:1px solid var(--line-2);padding:8px 12px;font-size:13.5px;display:inline-block;text-align:left}
.chat-msg.mine .cm-text{background:var(--chat-mine);border-color:var(--chat-mine-line)}
.chat-form{display:flex;gap:8px;margin-top:12px}
.chat-form input{flex:1}

/* ---- co-ownership + wallet ---- */
.coown{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.coown-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);padding:3px 9px 3px 3px;background:var(--code-bg)}
.wallet-bal{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid var(--line2);background:var(--card-bg);padding:22px;margin-bottom:14px}
.wallet-bal b{font-size:38px;display:block;letter-spacing:-.03em}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}

/* ==========================================================================
   LMS UPGRADED DESIGN SYSTEM (Gradients, Glassmorphism, Responsive Components)
   ========================================================================== */

/* Hero Banner (/lms catalog) */
.cat-hero {
  position: relative;
  margin-bottom: 36px;
  padding: 42px 36px;
  border-radius: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: none;
  overflow: hidden;
  backdrop-filter: none;
}
.cat-hero .kick,
.dash-hero .kick,
.hack-head .kick,
.hack-hero .kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 16px;
}
.cat-hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--heading);
  margin-bottom: 12px;
  line-height: 1.1;
}
.cat-hero p.muted {
  font-size: 16px;
  color: var(--muted);
  max-width: 650px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.cat-hero.has-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.9fr);
  padding: 0;
  min-height: 280px;
  align-items: stretch;
}
.cat-hero.has-showcase .cat-hero-copy {
  position: relative;
  z-index: 1;
  padding: 42px 36px;
}
.cat-hero.has-showcase .cat-hero-copy p.muted { margin-bottom: 20px; }
.cat-hero.has-showcase .cat-features { grid-template-columns: 1fr; gap: 8px; padding-top: 18px; }
.cat-hero-art {
  position: relative;
  min-height: 220px;
  overflow: hidden;
}
.cat-hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.35) 42%, rgba(10, 10, 10, 0.05) 72%);
  pointer-events: none;
}
@media (max-width: 860px) {
  .cat-hero.has-showcase { grid-template-columns: 1fr; }
  .cat-hero-art { height: 190px; order: -1; }
  .cat-hero-art::after {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.1) 20%, rgba(10, 10, 10, 0.92) 100%);
  }
  .cat-hero.has-showcase .cat-hero-copy { padding: 22px 20px 28px; }
}

.course-card-cover {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: -24px -24px 18px;
  background: #0a0a0a;
}
.course-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.course-card:hover .course-card-cover img { transform: scale(1.06); }
.course-card-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(transparent, rgba(8, 8, 8, 0.72));
  pointer-events: none;
}
.course-card-cover .lvl-pill {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  margin-bottom: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.course-card-cover .enroll-pill {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
}

.course-hero.has-art {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(16, 16, 17, 0.7) 0%, rgba(10, 10, 10, 0.9) 100%);
  margin-bottom: 26px;
}
.course-hero.has-art .course-hero-art {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.course-hero.has-art .course-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course-hero.has-art .course-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.15) 0%, rgba(8, 8, 8, 0.55) 55%, rgba(10, 10, 10, 0.96) 100%);
  pointer-events: none;
}
.course-hero.has-art .course-hero-copy {
  position: relative;
  z-index: 1;
  padding: 8px 28px 28px;
  margin-top: -72px;
}
@media (max-width: 600px) {
  .course-hero.has-art { border-radius: 14px; margin-bottom: 18px; }
  .course-hero.has-art .course-hero-art { height: 148px; }
  .course-hero.has-art .course-hero-copy { padding: 6px 16px 18px; margin-top: -40px; }
  .course-hero h1 { font-size: 22px; }
}

/* Features Strip inside Hero */
.cat-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media(max-width:768px){ .cat-features { grid-template-columns: 1fr; gap: 10px; } }

.cat-feat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #c4c4c4;
  font-size: 13px;
  font-weight: 500;
}
.cat-feat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--soft);
  flex-shrink: 0;
}

/* Dashboard Banner (/lms/dashboard) */
.dash-hero {
  position: relative;
  margin-bottom: 28px;
  padding: 32px 32px;
  border-radius: 20px;
  background: var(--dash-hero-bg);
  border: 1px solid var(--line);
  box-shadow: var(--hero-shadow);
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.dash-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(75, 225, 160, 0.22) 0%, rgba(91, 141, 239, 0.12) 50%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.dash-header-content h1 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  background: var(--title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.dash-header-content p {
  color: var(--muted);
  font-size: 14.5px;
}

/* KPI Stat Cards Grid */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
@media(max-width:900px){ .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kpi-card {
  position: relative;
  padding: 20px;
  border-radius: 16px;
  background: var(--kpi-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.kpi-card:hover {
  transform: translateY(-3px);
  border-color: var(--btn-hover-border);
  box-shadow: var(--shadow-card-hover);
}
.kpi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.kpi-title {
  font-size: 11px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 500;
}
.kpi-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(91, 141, 239, 0.1);
  border: 1px solid rgba(91, 141, 239, 0.2);
  color: var(--accent-light);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpi-icon-wrap.green {
  background: rgba(75, 225, 160, 0.12);
  border-color: rgba(75, 225, 160, 0.3);
  color: #4be1a0;
  box-shadow: 0 0 16px -4px rgba(75, 225, 160, 0.25);
}
.kpi-icon-wrap.gold {
  background: rgba(255, 195, 113, 0.12);
  border-color: rgba(255, 195, 113, 0.3);
  color: #ffc371;
  box-shadow: 0 0 16px -4px rgba(255, 195, 113, 0.25);
}
.kpi-icon-wrap.cyan {
  background: rgba(91, 141, 239, 0.12);
  border-color: rgba(91, 141, 239, 0.3);
  color: #8fb4f7;
  box-shadow: 0 0 16px -4px rgba(91, 141, 239, 0.25);
}
.kpi-icon-wrap.purple {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.3);
  color: #c084fc;
  box-shadow: 0 0 16px -4px rgba(168, 85, 247, 0.25);
}
.kpi-icon-wrap.coral {
  background: rgba(255, 95, 109, 0.12);
  border-color: rgba(255, 95, 109, 0.3);
  color: #ff5f6d;
  box-shadow: 0 0 16px -4px rgba(255, 95, 109, 0.25);
}

.kpi-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--heading);
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi-sub {
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 6px;
  font-family: var(--mono);
}

/* Upgraded Course Cards Grid */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media(max-width:960px){ .cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px){ .cardgrid { grid-template-columns: 1fr; } }

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
  border: 1px solid var(--glass-line);
  background: var(--card-bg);
  padding: 24px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.course-card::before {
  display: none;
}
.course-card:hover {
  transform: translateY(-3px);
  border-color: var(--btn-hover-border);
  background: var(--card-bg);
  box-shadow: var(--shadow-card-hover);
}
.course-card:hover::before {
  opacity: 1;
}

/* Level pill with dynamic color tones */
.lvl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 14px;
}
.lvl-pill.beginner {
  background: rgba(75, 225, 160, 0.12);
  border: 1px solid rgba(75, 225, 160, 0.3);
  color: #4be1a0;
}
.lvl-pill.intermediate {
  background: rgba(91, 141, 239, 0.12);
  border: 1px solid rgba(91, 141, 239, 0.3);
  color: #5b8def;
}
.lvl-pill.advanced {
  background: rgba(143, 180, 247, 0.12);
  border: 1px solid rgba(143, 180, 247, 0.3);
  color: #8fb4f7;
}
.lvl-pill.foundations,.lvl-pill.beginner {
  background: rgba(75, 225, 160, 0.12);
  border: 1px solid rgba(75, 225, 160, 0.3);
  color: #4be1a0;
}
.lvl-pill.applied,.lvl-pill.practical,.lvl-pill.intermediate {
  background: rgba(91, 141, 239, 0.12);
  border: 1px solid rgba(91, 141, 239, 0.3);
  color: #5b8def;
}
.lvl-pill.build,.lvl-pill.gamified,.lvl-pill.advanced {
  background: rgba(143, 180, 247, 0.12);
  border: 1px solid rgba(143, 180, 247, 0.3);
  color: #8fb4f7;
}

.course-card h3 {
  font-size: 18.5px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.35;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.course-card:hover h3 {
  color: var(--text);
}

.course-card p.muted.sm {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card .foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--glass-line);
  font-size: 12px;
  color: var(--muted-2);
  font-family: var(--mono);
}
.course-card .enrolled-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(75, 225, 160, 0.15);
  border: 1px solid rgba(75, 225, 160, 0.3);
  color: #4be1a0;
  font-size: 10px;
  font-weight: 600;
}
.course-card .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8fb4f7;
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.2s ease;
}
.course-card:hover .arrow-link {
  transform: translateX(4px);
}

/* Upgraded Progress Bar */
.prog {
  position: relative;
  height: 8px;
  background: var(--glass-fill);
  border-radius: 9999px;
  margin: 16px 0 10px;
  overflow: hidden;
}
.prog span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--accent);
  box-shadow: none;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Badge Grid Upgrade */
.badgegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media(max-width:840px){ .badgegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.badge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 18px;
  border: 1px solid var(--glass-line);
  background: var(--card-bg);
  padding: 28px 20px 22px;
  box-shadow: var(--shadow-card);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.badge-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 195, 113, 0.4);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 195, 113, 0.15);
}

.badge-card .medal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 195, 113, 0.15), rgba(201, 138, 74, 0.25));
  border: 1px solid rgba(255, 195, 113, 0.35);
  box-shadow: 0 0 20px rgba(255, 195, 113, 0.15), inset 0 0 12px rgba(255, 195, 113, 0.1);
  margin-bottom: 16px;
}
.badge-card .medal {
  font-size: 32px;
  background: linear-gradient(135deg, #e0a05c, #ffc371, #ffe0b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.badge-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 6px;
}

.badge-card .badge-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  margin-bottom: 18px;
}

.bbtns {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}
.btn-verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(75, 225, 160, 0.1);
  border: 1px solid rgba(75, 225, 160, 0.3);
  color: #5b8def;
  transition: all 0.2s ease;
}
.btn-verify:hover {
  background: rgba(75, 225, 160, 0.2);
  border-color: rgba(75, 225, 160, 0.5);
  color: #8fb4f7;
  box-shadow: 0 0 12px rgba(75, 225, 160, 0.2);
}
.btn-cert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 195, 113, 0.1);
  border: 1px solid rgba(255, 195, 113, 0.3);
  color: #ffc371;
  transition: all 0.2s ease;
}
.btn-cert:hover {
  background: rgba(255, 195, 113, 0.2);
  border-color: rgba(255, 195, 113, 0.5);
  color: #ffe0b8;
  box-shadow: 0 0 12px rgba(255, 195, 113, 0.2);
}

/* Headers & Empty States */
.ph {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  background: var(--ph-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ph::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, #5b8def, #4be1a0);
  border-radius: 4px;
}

.ph2 {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--heading);
  margin: 40px 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ph2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, #e0a05c, #ff5f6d);
  border-radius: 4px;
}

.empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  border-radius: 16px;
  border: 1px dashed var(--line);
  background: var(--kpi-bg);
  margin-bottom: 24px;
}
.empty-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(91, 141, 239, 0.12);
  border: 1px solid rgba(91, 141, 239, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fb4f7;
  margin-bottom: 14px;
}
.empty-card p {
  color: var(--muted);
  font-size: 14.5px;
}
.empty-card a {
  color: #8fb4f7;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.empty-card a:hover {
  color: #e6e6e6;
}

.flash {
  border: 1px solid rgba(75, 225, 160, 0.35);
  background: linear-gradient(135deg, rgba(15, 40, 32, 0.92), rgba(13, 20, 18, 0.95));
  color: var(--ok);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 13px;
  border-radius: 12px;
}

/* Profile page */
.profile-hero {
  position: relative;
  margin-bottom: 28px;
  padding: 32px;
  border-radius: 20px;
  background: var(--dash-hero-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--hero-shadow);
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.profile-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(75, 225, 160, 0.12) 0%, transparent 65%);
  filter: blur(50px);
  pointer-events: none;
}
.profile-hero::after {
  content: "";
  position: absolute;
  bottom: -60%;
  left: -10%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(91, 141, 239, 0.08) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.profile-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
}
.profile-avatar-ring {
  flex-shrink: 0;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, rgba(75, 225, 160, 0.6) 0%, rgba(143, 180, 247, 0.2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(75, 225, 160, 0.15);
}
.profile-avatar-ring .avatar {
  width: 118px;
  height: 118px;
  border: 3px solid #0f0f10;
}
.avatar.xl {
  width: 112px;
  height: 112px;
  border-width: 3px;
}
.avatar.xl.initials {
  font-size: 36px;
}
.profile-hero-copy {
  min-width: 0;
}
.profile-hero-copy .kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(75, 225, 160, 0.08);
  border: 1px solid rgba(75, 225, 160, 0.2);
  color: #b9cffb;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 12px;
}
.profile-hero-copy .kick .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fb4f7;
  box-shadow: 0 0 8px rgba(143, 180, 247, 0.6);
}
.profile-hero-copy h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--heading);
  line-height: 1.15;
  margin-bottom: 8px;
}
.profile-hero-copy p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 560px;
  margin-bottom: 16px;
}
.profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 9999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  color: var(--soft);
}
.profile-chip.email {
  text-transform: none;
  letter-spacing: 0;
  color: #9a9a9a;
}
.profile-chip.role-student,
.profile-chip.role-mentor,
.profile-chip.role-instructor {
  background: rgba(75, 225, 160, 0.1);
  border-color: rgba(75, 225, 160, 0.25);
  color: #b9cffb;
}
.profile-chip.role-university {
  background: rgba(91, 141, 239, 0.1);
  border-color: rgba(91, 141, 239, 0.25);
  color: #8fb4f7;
}
.profile-chip.role-admin {
  background: rgba(255, 195, 113, 0.1);
  border-color: rgba(255, 195, 113, 0.25);
  color: #ffc371;
}
.profile-chip.role-superadmin {
  background: rgba(255, 95, 109, 0.1);
  border-color: rgba(255, 95, 109, 0.25);
  color: #ff8b95;
}

.kpi-value-sm {
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: break-word;
}
.kpi-inline {
  font-size: 14px;
  font-weight: 600;
  color: #6a6a6a;
  margin-left: 8px;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
  gap: 20px;
  align-items: start;
}
.profile-panel,
.profile-aside {
  position: relative;
  padding: 26px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
/* The organization listbox is absolutely positioned and drops below its field, so it can reach
   past the panel's bottom edge. Two things got in its way:
   - overflow:hidden clipped it at the panel edge. Nothing inside this panel relies on the parent
     to clip it; the avatar and drop zone carry their own border-radius.
   - backdrop-filter gives the panel its own stacking context, so the list's z-index only counts
     inside the panel. To the page the panel is one flat layer at z-index:auto, and the aside — a
     positioned sibling later in the DOM with an opaque background — painted over it wherever the
     two overlapped (always in the single-column layout, where the aside sits right below). Giving
     the panel z-index:1 lifts the whole layer above the aside while staying under the nav (40).
   The aside keeps the clip since it holds no popovers. */
.profile-panel {
  overflow: visible;
  z-index: 1;
}
.profile-panel-head {
  margin-bottom: 22px;
}
.profile-panel-head h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 6px;
}
.profile-panel-head p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.profile-form label {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: #9a9a9a;
  margin-bottom: 16px;
}
.profile-form input,
.profile-form select,
.profile-form textarea {
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 14px;
  margin-top: 8px;
  color: #fafafa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus {
  border-color: rgba(75, 225, 160, 0.5);
  box-shadow: 0 0 0 3px rgba(75, 225, 160, 0.15);
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.profile-drop {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
.profile-drop:focus-within {
  outline: 2px solid rgba(75, 225, 160, 0.6);
  outline-offset: 3px;
  border-radius: 50%;
}
.profile-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-size: 0;
}
.profile-drop .avatar {
  width: 96px;
  height: 96px;
  pointer-events: none;
}
.profile-drop-cta {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  padding: 3px 8px;
  border-radius: 9999px;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(75, 225, 160, 0.35);
  color: #d5e2fd;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.profile-drop:hover .profile-drop-cta {
  background: rgba(75, 225, 160, 0.9);
  border-color: rgba(75, 225, 160, 0.6);
  color: #ffffff;
}
.profile-photo-copy {
  min-width: 0;
}
.profile-photo-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 4px;
}
.profile-photo-copy p {
  color: #9a9a9a;
  font-size: 12.5px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
}

.profile-field-error {
  color: #ffb0b7;
  background: rgba(92, 46, 46, 0.35);
  border: 1px solid rgba(255, 95, 109, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  margin: -4px 0 16px;
}
/* Same shape as the error above but amber — a prompt to fill something in, not a failure. */
.profile-field-note {
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.btn.profile-save {
  background: var(--spectrum);
  color: #0a0a0a;
  border: 0;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn.profile-save:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.55);
  transform: translateY(-1px);
  color: #0a0a0a;
}
.btn.profile-save:disabled {
  opacity: 0.6;
  transform: none;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.profile-meta div {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.profile-meta div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.profile-meta dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a6a6a;
  margin-bottom: 4px;
}
.profile-meta dd {
  font-size: 14px;
  color: #e4e4e4;
  font-weight: 500;
  word-break: break-word;
}

.profile-aside-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8fb4f7;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.2s ease, color 0.2s ease;
}
.profile-aside-link:hover {
  color: #b9cffb;
  transform: translateX(3px);
}

@media (max-width: 820px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .profile-hero {
    padding: 22px 18px;
  }
  .profile-hero-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .profile-panel,
  .profile-aside {
    padding: 20px 16px;
  }
  .profile-photo-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Course Catalog Master Prototype Styling ── */
.lms-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line2, rgba(255, 255, 255, 0.08));
}
.lms-tabs a,
.lms-tabs button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px;
  color: var(--mut, rgba(255, 255, 255, 0.6));
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: relative;
}
.lms-tabs a:hover,
.lms-tabs button:hover {
  color: #fff;
}
.lms-tabs a.active,
.lms-tabs button[aria-pressed="true"] {
  color: #fff;
  border-bottom-color: var(--live, #5b8def);
  background: rgba(91, 141, 239, 0.06);
  border-radius: 6px 6px 0 0;
}
.lms-tabs .tab-badge {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
}
.lms-tabs .tab-badge.notice {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff5f6d;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 99px;
  box-shadow: 0 0 0 2px var(--bg, #0a0a0a);
}

.coming-soon-page {
  position: relative;
  isolation: isolate;
  min-height: 68vh;
}
.coming-soon-body {
  pointer-events: none;
  user-select: none;
}
.coming-soon-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.coming-soon-veil span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.coming-soon-veil .v1 {
  top: 16%;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%);
  mask-image: linear-gradient(to bottom, transparent, #000 42%);
}
.coming-soon-veil .v2 {
  top: 38%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 48%);
  mask-image: linear-gradient(to bottom, transparent, #000 48%);
}
.coming-soon-veil .v3 {
  top: 54%;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(to bottom, transparent, var(--bg) 88%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
}
.coming-soon-panel {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: clamp(210px, 38vh, 360px);
  transform: translateX(-50%);
  width: min(460px, calc(100% - 28px));
  padding: 22px 22px 20px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card-hover);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.coming-soon-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(91, 141, 239, 0.12);
  border: 1px solid rgba(91, 141, 239, 0.28);
  border-radius: 99px;
}
.coming-soon-panel h2 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.coming-soon-panel p {
  margin: 0 0 16px;
  font-size: 14px;
}
.coming-soon-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sortbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.1));
  background: var(--panel, rgba(10, 10, 10, 0.7));
  padding: 14px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.sortbar .rescount {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mut, rgba(255, 255, 255, 0.5));
}
.sortbar .rescount b {
  color: #fff;
  font-weight: 600;
}
.sortbar .sorts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sortbar .sorts button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 14px;
  border-radius: 6px;
  color: var(--mut, rgba(255, 255, 255, 0.6));
  cursor: pointer;
  transition: all 0.2s ease;
}
.sortbar .sorts button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.sortbar .sorts button[aria-pressed="true"] {
  border-color: var(--text);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.catalog-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 1024px) {
  .catalog-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .catalog-cards-grid {
    grid-template-columns: 1fr;
  }
}

.mentor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1024px) {
  .mentor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mentor-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.mentor-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.mentor-card-id { min-width: 0; }
.mentor-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.mentor-card .profile-chips { margin: 0; }
.mentor-bio {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mentor-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.jc {
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.1));
  background: var(--bg-2);
  backdrop-filter: none;
  border-radius: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.jc:hover {
  transform: translateY(-4px);
  border-color: var(--btn-hover-border);
  box-shadow: var(--shadow-card-hover);
}
.jc .art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line2, rgba(255, 255, 255, 0.08));
  background: #0a0a0a;
  overflow: hidden;
}
.jc .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.jc:hover .art img {
  transform: scale(1.06);
}
.jc .cat {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 9px;
  border-radius: 6px;
  color: #fff;
  z-index: 2;
}
.jc .enroll-pill {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
}
.jc .eye {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 9px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mut, rgba(255, 255, 255, 0.6));
  z-index: 2;
}
.jc .eye svg {
  width: 12px;
  height: 12px;
  flex: none;
  stroke: #4be1a0;
  fill: none;
  stroke-width: 1.6;
}
.jc .in {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.jc h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.015em;
  color: #fff;
}
.jc .client {
  font-size: 12px;
  color: var(--mut, rgba(255, 255, 255, 0.6));
  display: flex;
  align-items: center;
  gap: 6px;
}
.jc .client svg {
  width: 12px;
  height: 12px;
  flex: none;
  stroke: #5b8def;
  fill: none;
  stroke-width: 2;
}
.jc .kw {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.jc .kw span {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.02);
  padding: 3px 7px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.jc .prog-bar-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.jc .prog-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.jc .foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line2, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.pay {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #4be1a0;
  font-weight: 500;
}
.ownx {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #8fb4f7;
}
.seats {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut, rgba(255, 255, 255, 0.5));
}
.seats.calm {
  color: var(--mut, rgba(255, 255, 255, 0.5));
}

.catalog-footer-note {
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.1));
  background: rgba(10, 10, 10, 0.6);
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--mut, rgba(255, 255, 255, 0.6));
  line-height: 1.5;
  margin-top: 12px;
}
.catalog-footer-note b {
  color: var(--heading);
}

/* Theme toggle — one icon at a time: moon in dark, sun in light */
.lms-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;flex:none;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-2);color:var(--text);cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:background .2s,border-color .2s,color .2s;
}
.lms-theme-toggle:hover{border-color:var(--btn-hover-border);background:var(--hover)}
.lms-theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lms-theme-toggle .ico-moon,
.lms-theme-toggle .ico-sun{display:none;flex:none;pointer-events:none}
html:not([data-lms-theme="light"]) .lms-theme-toggle .ico-moon{display:block}
html[data-lms-theme="light"] .lms-theme-toggle .ico-sun{display:block}
html[data-lms-theme="light"] .lms-theme-toggle{background:#fff;border-color:var(--line);color:var(--text)}
@media(max-width:1080px){
  .lms-theme-toggle{width:44px;height:44px}
}

/* ==========================================================================
   LMS LIGHT MODE — neutral paper + same spectrum accents
   ========================================================================== */
html[data-lms-theme="light"]{
  color-scheme:light;
  --bg:#f5f5f5;
  --bg-2:#ffffff;
  --panel:rgba(255,255,255,.82);
  --panel-solid:#ffffff;
  --line:rgba(20, 20, 20,.16);
  --line-2:rgba(24, 24, 26,.08);
  --line2:rgba(20, 20, 20,.12);
  --text:#1a1a1e;
  --muted:#55555c;
  --muted-2:#7a7a80;
  --mut:#55555c;
  --white:#ffffff;
  --heading:#1a1a1e;
  --soft:#3a3a40;
  --coral:#e04a58;
  --amber:#b4762c;
  --learn:#2f6ad9;
  --own:#2f6ad9;
  --accent:#2f6ad9;
  --accent-light:#5b8def;
  --ok:#2fbf85;
  --input:#ffffff;
  --code-bg:#ededed;
  --hover:rgba(20,20,20,.05);
  --nav-bg:rgba(250, 250, 250,.9);
  --nav-menu-bg:rgba(250, 250, 250,.98);
  --btn-hover-bg:rgba(20,20,20,.06);
  --btn-hover-border:rgba(20,20,20,.32);
  --btn-solid-bg:#1a1a1e;
  --btn-solid-fg:#ffffff;
  --btn-solid-hover:#26262a;
  --ok-bg:#ecfdf5;
  --ok-line:#7ceec0;
  --err:#d84450;
  --err-bg:#fef2f2;
  --err-line:#ffd6da;
  --warn:#9a6a34;
  --warn-bg:#fff7ed;
  --warn-line:#ffd0a0;
  --title-grad:linear-gradient(100deg,#101010 0%,#1a1a1e 100%);
  --ph-grad:linear-gradient(135deg,#101010 20%,#3a3a40 100%);
  --hero-bg:linear-gradient(135deg,rgba(255,255,255,.92) 0%,rgba(240, 240, 240,.88) 100%);
  --dash-hero-bg:linear-gradient(135deg,rgba(255,255,255,.94) 0%,rgba(246, 246, 246,.9) 100%);
  --card-bg:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
  --kpi-bg:linear-gradient(180deg,#ffffff 0%,#f8f8f8 100%);
  --glass-line:rgba(20, 20, 20,.12);
  --glass-fill:rgba(20,20,20,.04);
  --shadow-card:0 8px 20px -14px rgba(20, 20, 20,.14);
  --shadow-card-hover:0 10px 22px -12px rgba(20, 20, 20,.12);
  --hero-shadow:0 18px 40px -18px rgba(20, 20, 20,.2),inset 0 1px 0 rgba(255,255,255,.9);
  --chat-bg:#f8f8f8;
  --chat-bubble:#ffffff;
  --chat-mine:#f0f0f0;
  --chat-mine-line:#dcdcdc;
  --avatar-bg:#ececec;
  --avatar-line:#dcdcdc;
  --phaser:repeating-linear-gradient(45deg,#f4f4f4,#f4f4f4 10px,#ededed 10px,#ededed 20px);
}
html[data-lms-theme="light"],
html[data-lms-theme="light"] body{
  color-scheme:light;
}
html[data-lms-theme="light"] body{
  background:var(--bg);
}
html[data-lms-theme="light"] .btn.solid,
html[data-lms-theme="light"] a.btn.solid{
  background:var(--btn-solid-bg);
  color:var(--btn-solid-fg);
  border-color:var(--btn-solid-bg);
  box-shadow:0 8px 18px -8px rgba(24, 24, 26,.28);
}
html[data-lms-theme="light"] .btn.solid:hover,
html[data-lms-theme="light"] a.btn.solid:hover{
  background:var(--btn-solid-hover);
  color:var(--btn-solid-fg);
  border-color:var(--btn-solid-hover);
  transform:none;
  box-shadow:0 10px 22px -8px rgba(24, 24, 26,.35);
}

html[data-lms-theme="light"] .lms-nav .brand img.brand-logo-on-dark{display:none}
html[data-lms-theme="light"] .lms-nav .brand img.brand-logo-on-light{display:block}
html[data-lms-theme="light"] .card,
html[data-lms-theme="light"] .card:hover{
  background:#fff;
  color:var(--text);
  border-color:var(--line-2);
  box-shadow:var(--shadow-card);
  transform:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-lms-theme="light"] .card:hover{
  border-color:var(--line);
  box-shadow:var(--shadow-card-hover);
}
html[data-lms-theme="light"] .card h1,
html[data-lms-theme="light"] .card h2,
html[data-lms-theme="light"] .card h3,
html[data-lms-theme="light"] .card h4,
html[data-lms-theme="light"] .card h3 *{
  color:var(--heading);
  background:none;
  -webkit-text-fill-color:var(--heading);
}
html[data-lms-theme="light"] .card li{color:var(--muted)}
html[data-lms-theme="light"] label{color:var(--muted)}
html[data-lms-theme="light"] input,
html[data-lms-theme="light"] select,
html[data-lms-theme="light"] textarea{
  background:#fff;
  color:var(--text);
  border-color:var(--line);
}
html[data-lms-theme="light"] input::placeholder,
html[data-lms-theme="light"] textarea::placeholder{
  color:#8a8a92;
  opacity:1;
}
html[data-lms-theme="light"] select option{
  background:#fff;
  color:var(--text);
}
html[data-lms-theme="light"] .card.uni-card.branded{
  background:linear-gradient(180deg,#f7f7f7,var(--panel));
}
html[data-lms-theme="light"] .course-card:hover,
html[data-lms-theme="light"] .kpi-card:hover,
html[data-lms-theme="light"] .jc:hover,
html[data-lms-theme="light"] .badge-card:hover{
  background:#fff;
  border-color:rgba(20,20,20,.16);
  box-shadow:var(--shadow-card-hover);
}

html[data-lms-theme="light"] .cat-hero{
  border-color:var(--line);
}
html[data-lms-theme="light"] .cat-hero .kick,
html[data-lms-theme="light"] .dash-hero .kick,
html[data-lms-theme="light"] .hack-head .kick,
html[data-lms-theme="light"] .hack-hero .kick{
  background:rgba(20, 20, 20,.04);
  border-color:var(--line);
  color:var(--muted);
}
html[data-lms-theme="light"] .cat-features{
  border-top-color:rgba(20, 20, 20,.1);
}
html[data-lms-theme="light"] .cat-feat-item{
  background:rgba(20, 20, 20,.03);
  border-color:rgba(20, 20, 20,.08);
  color:var(--soft);
}
html[data-lms-theme="light"] .cat-feat-icon{
  background:rgba(20, 20, 20,.05);
  border-color:rgba(20, 20, 20,.1);
  color:var(--soft);
}
html[data-lms-theme="light"] .cat-hero-art::after{
  background:linear-gradient(90deg,rgba(245, 245, 245,.95) 0%,rgba(245, 245, 245,.4) 42%,rgba(245, 245, 245,.04) 72%);
}
@media (max-width:860px){
  html[data-lms-theme="light"] .cat-hero-art::after{
    background:linear-gradient(180deg,rgba(245, 245, 245,.08) 20%,rgba(245, 245, 245,.94) 100%);
  }
}
html[data-lms-theme="light"] .course-hero.has-art{
  background:var(--hero-bg);
  border-color:rgba(91, 141, 239,.22);
}
html[data-lms-theme="light"] .course-hero.has-art .course-hero-art::after{
  background:linear-gradient(180deg,rgba(245, 245, 245,.12) 0%,rgba(245, 245, 245,.55) 55%,rgba(245, 245, 245,.96) 100%);
}
html[data-lms-theme="light"] .course-card-cover{
  background:#eaeaea;
}
html[data-lms-theme="light"] .course-card-cover::after{
  background:linear-gradient(transparent,rgba(255,255,255,.72));
}

html[data-lms-theme="light"] .kpi-card:hover{
  box-shadow:var(--shadow-card-hover);
}
html[data-lms-theme="light"] .empty-card a:hover{color:#2f6ad9}

html[data-lms-theme="light"] .flash{
  border-color:var(--ok-line);
  background:linear-gradient(135deg,#ecfdf5,#f0fdf4);
}
html[data-lms-theme="light"] .profile-hero-copy .kick{
  background:rgba(75, 225, 160,.1);
  border-color:rgba(75, 225, 160,.22);
  color:#3f6fd0;
}
html[data-lms-theme="light"] .profile-avatar-ring .avatar{border-color:#fff}
html[data-lms-theme="light"] .profile-form label{color:var(--muted)}
html[data-lms-theme="light"] .profile-form input,
html[data-lms-theme="light"] .profile-form select,
html[data-lms-theme="light"] .profile-form textarea{
  background:#fff;
  border-color:var(--line);
  color:var(--text);
  box-shadow:0 1px 2px rgba(20, 20, 20,.04);
}
html[data-lms-theme="light"] .profile-photo-row{
  background:rgba(91, 141, 239,.05);
  border-color:rgba(91, 141, 239,.12);
}
html[data-lms-theme="light"] .profile-drop-cta{
  background:rgba(255,255,255,.94);
  color:#3f6fd0;
}
html[data-lms-theme="light"] .profile-photo-copy strong{color:var(--heading)}
html[data-lms-theme="light"] .profile-photo-copy p{color:var(--muted)}
html[data-lms-theme="light"] .profile-field-error{
  color:#c03a48;
  background:#fff1f2;
  border-color:#ffd6da;
}
html[data-lms-theme="light"] .profile-meta div{border-bottom-color:var(--line-2)}
html[data-lms-theme="light"] .profile-meta dt{color:var(--muted-2)}
html[data-lms-theme="light"] .profile-meta dd{color:var(--text)}

html[data-lms-theme="light"] .lms-tabs{border-bottom-color:var(--line-2)}
html[data-lms-theme="light"] .lms-tabs a,
html[data-lms-theme="light"] .lms-tabs button{color:var(--muted)}
html[data-lms-theme="light"] .lms-tabs a:hover,
html[data-lms-theme="light"] .lms-tabs button:hover{color:var(--text)}
html[data-lms-theme="light"] .lms-tabs a.active,
html[data-lms-theme="light"] .lms-tabs button[aria-pressed="true"]{
  color:var(--accent);
  background:rgba(91, 141, 239,.08);
}
html[data-lms-theme="light"] .lms-tabs .tab-badge{
  background:rgba(91, 141, 239,.12);
  color:var(--accent);
}
html[data-lms-theme="light"] .lms-tabs .tab-badge.notice,
html[data-lms-theme="light"] .nav-notice{
  background:#e04a58;
  color:#fff;
  box-shadow:0 0 0 2px var(--bg);
}
html[data-lms-theme="light"] .coming-soon-panel{
  background:rgba(255,255,255,.88);
  border-color:var(--line);
  box-shadow:var(--shadow-card);
}
html[data-lms-theme="light"] .coming-soon-veil .v3{
  background:linear-gradient(to bottom, transparent, var(--bg) 88%);
}
html[data-lms-theme="light"] .event-card{
  background:#fff;
  box-shadow:var(--shadow-card);
}
html[data-lms-theme="light"] .event-body a{color:#0a7ea4}
html[data-lms-theme="light"] .event-body a:hover{color:#08627f}
html[data-lms-theme="light"] .sortbar{
  background:var(--panel);
  border-color:var(--line2);
}
html[data-lms-theme="light"] .sortbar .rescount b{color:var(--heading)}
html[data-lms-theme="light"] .sortbar .sorts button{
  background:#fff;
  border-color:var(--line);
  color:var(--muted);
}
html[data-lms-theme="light"] .sortbar .sorts button:hover{
  color:var(--text);
  border-color:var(--btn-hover-border);
}
html[data-lms-theme="light"] .sortbar .sorts button[aria-pressed="true"]{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(91, 141, 239,.1);
  box-shadow:0 0 12px rgba(91, 141, 239,.12);
}

html[data-lms-theme="light"] .jc{
  background:var(--bg-2);
  border-color:var(--line2);
  box-shadow:none;
}
html[data-lms-theme="light"] .jc .art{background:#eaeaea}
html[data-lms-theme="light"] .jc .tag,
html[data-lms-theme="light"] .jc .eye{
  background:rgba(255,255,255,.9);
  border-color:rgba(20, 20, 20,.14);
  color:var(--text);
}
html[data-lms-theme="light"] .enroll-pill{
  background:rgba(236,253,245,.95);
  border-color:rgba(47, 191, 133,.28);
  color:#1f9c6b;
}
html[data-lms-theme="light"] .enroll-pill.earned{
  background:rgba(248, 248, 248,.95);
  border-color:rgba(91, 141, 239,.28);
  color:#2f6ad9;
}
html[data-lms-theme="light"] .jc h3{color:var(--heading)}
html[data-lms-theme="light"] .jc .kw span{
  background:rgba(91, 141, 239,.06);
  border-color:rgba(91, 141, 239,.14);
  color:var(--muted);
}
html[data-lms-theme="light"] .jc .prog-bar-wrap{background:rgba(20, 20, 20,.1)}
html[data-lms-theme="light"] .jc .foot{border-top-color:var(--line-2)}
html[data-lms-theme="light"] .catalog-footer-note{
  background:#fff;
  border-color:var(--line2);
  color:var(--muted);
}

html[data-lms-theme="light"] .clerk-auth{
  color-scheme:light;
  color:var(--text);
  --clerk-color-foreground:var(--text);
  --clerk-color-muted-foreground:var(--muted);
  --clerk-color-input-foreground:var(--text);
  --clerk-color-background:#fff;
  --clerk-color-input:#fff;
  --clerk-color-border:var(--line);
}
html[data-lms-theme="light"] .clerk-auth .cl-card,
html[data-lms-theme="light"] .clerk-auth .cl-cardBox,
html[data-lms-theme="light"] .clerk-auth .cl-rootBox,
html[data-lms-theme="light"] .clerk-auth .cl-headerTitle,
html[data-lms-theme="light"] .clerk-auth h1,
html[data-lms-theme="light"] .clerk-auth h2,
html[data-lms-theme="light"] .clerk-auth .cl-formFieldLabel,
html[data-lms-theme="light"] .clerk-auth label,
html[data-lms-theme="light"] .clerk-auth .cl-identityPreviewText,
html[data-lms-theme="light"] .clerk-auth .cl-formFieldInput,
html[data-lms-theme="light"] .clerk-auth input{
  color:var(--text) !important;
}
html[data-lms-theme="light"] .clerk-auth .cl-headerSubtitle,
html[data-lms-theme="light"] .clerk-auth .cl-footerActionText,
html[data-lms-theme="light"] .clerk-auth .cl-formFieldHintText{
  color:var(--muted) !important;
}

html[data-lms-theme="light"] .lesson-notes{
  box-shadow:var(--shadow-card);
}
html[data-lms-theme="light"] .lesson-notes-body code{
  color:#2f6ad9;
}
html[data-lms-theme="light"] .lesson-cta{
  box-shadow:var(--shadow-card);
}

/* Certificates stay dark even if the LMS chrome is in light mode */
html[data-lms-theme="light"] .cert-body{
  color-scheme:dark;
  background:#111;
  color:#fafafa;
  --text:#fafafa;
  --muted:#9a9a9a;
  --muted-2:#6a6a6a;
  --accent:#5b8def;
}

/* ==========================================================================
   LMS mobile — keep the layout at device width (no zoomed-out desktop view)
   Do not apply overflow/width clamps above this breakpoint: they trap
   desktop scroll and un-center the 1080px column.
   ========================================================================== */
@media (max-width: 1080px) {
  html:has(.lms-shell),
  html:has(.lms-shell) body,
  .lms-shell{
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  .wrap,.lms-main,.lms-foot,.lms-nav{min-width:0;max-width:100%}
  .wrap{width:100%;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  .lms-nav .nav-inner,.lms-nav .nav-links{min-width:0}
  .lms-tabs,.studio-tabs{max-width:100%;min-width:0;-webkit-overflow-scrolling:touch}
  .tbl{max-width:100%}
  .lms-main video,.lms-main iframe{max-width:100%}
  .qstats{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width: 760px) {
  .tbl{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
}

@media (max-width: 640px) {
  .wrap{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .lms-main{padding:20px 14px 32px}
  .lms-foot{padding:16px 12px 20px;font-size:10px;line-height:1.5;word-break:break-word}
  .lms-nav .brand img{height:24px}
  .lms-nav .brand .uni-logo{max-width:64px;height:18px}

  .cat-hero,.dash-hero{
    padding:18px 16px;
    border-radius:14px;
    margin-bottom:18px;
  }
  .dash-hero::before{width:160px;height:160px;top:-40%;right:-20%}
  .dash-header-content h1{font-size:22px}
  .dash-header-content p{font-size:13px;line-height:1.45}
  .cat-hero h1{font-size:28px}
  .cat-feat-item{padding:8px 10px}

  .dash-kpi-grid{gap:10px;margin-bottom:22px}
  .kpi-card{padding:14px;border-radius:12px}
  .kpi-card:hover{transform:none}
  .kpi-icon-wrap{width:28px;height:28px;border-radius:8px}
  .kpi-value{font-size:22px}
  .kpi-sub{font-size:10px;margin-top:4px}
  .kpi-title{font-size:9px}

  .cardgrid{grid-template-columns:1fr;gap:12px}
  .course-card{
    display:grid;
    grid-template-columns:108px minmax(0,1fr);
    padding:0;
    border-radius:14px;
  }
  .course-card:hover{transform:none}
  .course-card-cover{
    grid-column:1;
    grid-row:1 / 3;
    margin:0;
    aspect-ratio:auto;
    min-height:108px;
    height:100%;
  }
  .course-card > div:not(.course-card-cover):not(.foot-bar){
    grid-column:2;
    min-width:0;
    padding:12px 12px 0;
  }
  .course-card h3{font-size:15px;margin-bottom:4px}
  .course-card .prog{margin:8px 0 0;height:6px}
  .course-card .foot-bar{
    grid-column:2;
    padding:8px 12px 12px;
    gap:8px;
    font-size:11px;
  }
  .course-card-cover .lvl-pill{left:8px;bottom:auto;top:8px;font-size:8px;padding:3px 7px}
  .course-card-cover .enroll-pill{display:none}
  .course-card:hover .arrow-link{transform:none}

  .badgegrid{gap:10px}
  .badge-card{padding:16px 10px 14px;border-radius:14px}
  .badge-card:hover{transform:none}
  .badge-card .medal-wrap{width:44px;height:44px;margin-bottom:10px}
  .badge-card .medal{font-size:22px}
  .badge-card h4{font-size:13px}
  .bbtns{flex-direction:column;gap:6px}
  .btn-verify,.btn-cert{min-height:36px;width:100%}
  .empty-card{padding:28px 16px;margin-bottom:16px}

  .jc .art{aspect-ratio:16 / 8}
  .jc .in{padding:14px;gap:8px}
  .jc h3{font-size:16px}
  .jc .client{font-size:12px}
  .jc .kw{display:none}
  .jc .eye{display:none}
  .jc .cat{font-size:8px;padding:3px 7px}
  .jc .foot{padding-top:10px}
  .jc:hover{transform:none}
  .catalog-footer-note{padding:12px 14px;font-size:12px}

  .mentor-grid{grid-template-columns:1fr;gap:12px}
  .mentor-card{padding:16px}
  .mentor-card-actions .btn{flex:1;justify-content:center;min-height:44px}

  .enrollbar{flex-direction:column;align-items:stretch}
  .enrollbar input,.enrollbar .btn{width:100%;min-width:0}
  .enrollbar .btn{justify-content:center;min-height:44px}
  .lrow{padding:12px;gap:10px}
  .lrow .lt{min-width:0;overflow-wrap:anywhere}
  .lrow .lk{flex:none;font-size:9px}

  .sortbar{
    flex-direction:column;
    align-items:stretch;
    padding:12px 14px;
  }
  .sortbar .sorts{width:100%}
  .sortbar .sorts button{flex:1}

  .filterbar{flex-direction:column;align-items:stretch}
  .filterbar label{min-width:0;width:100%}
  .filterbar .btn{width:100%;height:44px}

  .card{padding:16px}
  .ph{font-size:22px;margin-bottom:14px}
  .ph2{font-size:17px;margin:22px 0 12px}

  .chat-form{flex-direction:column}
  .chat-form .btn{width:100%;justify-content:center}
  .inline-add{flex-direction:column}
  .inline-add input,.inline-add select,.inline-add textarea{min-width:0;width:100%}
  .qcourse{padding:14px}
  .qcourse-head{flex-direction:column;align-items:stretch;gap:12px}
  .qstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;width:100%}
  .qstat{min-width:0;padding:8px 6px}
  .qlevel{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:start;
    gap:8px 12px;
    padding:12px;
  }
  .qlv-cta{grid-column:1 / -1}
  .qlv-cta .btn{width:100%;justify-content:center;min-height:44px}
  .qlv-cta .mono{max-width:none}
  .quiz-result{font-size:13px;line-height:1.45}
  .quiz-form .quiz-actions{flex-direction:column;align-items:stretch}
  .quiz-form .quiz-actions .btn{width:100%;justify-content:center;min-height:44px}
  .opt{min-height:44px;padding:12px}
  .qp{overflow-wrap:anywhere}
  .pager{flex-direction:column;align-items:stretch;gap:8px}

  .studio-nav{flex-wrap:wrap}
  .studio-tabs{flex:1 1 100%}
  .studio-tab-folders{min-height:40px;justify-content:center}
  .studio-tabs a{padding:10px 12px}
}

@media (max-width: 720px) {
  .lms-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    overflow:visible;
    padding:0;
    margin-bottom:20px;
    border-bottom:0;
  }
  .lms-tabs a,
  .lms-tabs button{
    position:relative;
    min-width:0;
    min-height:52px;
    padding:14px 8px;
    font-size:11px;
    font-weight:500;
    letter-spacing:.1em;
    line-height:1.2;
    white-space:nowrap;
    justify-content:center;
    text-align:center;
    color:var(--muted);
    background:var(--code-bg);
    border:1px solid var(--line-2);
    border-radius:10px;
  }
  .lms-tabs a:hover,
  .lms-tabs button:hover{
    color:var(--text);
    border-color:var(--line);
    background:var(--hover);
  }
  .lms-tabs a.active,
  .lms-tabs button[aria-pressed="true"]{
    color:var(--text);
    background:rgba(91,141,239,.1);
    border-color:var(--accent);
    border-radius:10px;
    box-shadow:0 0 0 1px rgba(91,141,239,.2);
  }
  .lms-tabs a:focus-visible,
  .lms-tabs button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  .lms-tabs .tab-badge.notice{
    top:6px;
    right:8px;
    box-shadow:0 0 0 2px var(--code-bg);
  }
  .coming-soon-panel{
    top: clamp(180px, 34vh, 280px);
    padding:18px 16px 16px;
  }
  .coming-soon-panel h2{font-size:18px}
  .coming-soon-options .btn{width:100%;justify-content:center}

  html[data-lms-theme="light"] .lms-tabs a,
  html[data-lms-theme="light"] .lms-tabs button{
    background:#fff;
    border-color:var(--line);
    box-shadow:var(--shadow-card);
  }
  html[data-lms-theme="light"] .lms-tabs a:hover,
  html[data-lms-theme="light"] .lms-tabs button:hover{
    color:var(--text);
    background:var(--hover);
  }
  html[data-lms-theme="light"] .lms-tabs a.active,
  html[data-lms-theme="light"] .lms-tabs button[aria-pressed="true"]{
    color:var(--heading);
    background:rgba(47,106,217,.08);
    border-color:var(--accent);
    box-shadow:0 0 0 1px rgba(47,106,217,.18);
  }
  html[data-lms-theme="light"] .lms-tabs .tab-badge.notice{
    box-shadow:0 0 0 2px #fff;
  }
}

@media (max-width: 380px) {
  .lms-tabs a,
  .lms-tabs button{
    font-size:10px;
    letter-spacing:.06em;
    padding:13px 6px;
  }
}





/* ── hackathons ───────────────────────────────────────────── */

/* listing hero */
.hack-head {
  position: relative;
  margin-bottom: 28px;
  padding: 36px 32px 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.hack-head h1 {
  position: relative;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--heading);
  margin-bottom: 10px;
}
.hack-head p {
  position: relative;
  max-width: 62ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}
.hack-head-feats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--glass-line);
}
.hack-head-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  color: var(--soft);
  font-size: 13.5px;
  font-weight: 550;
}
.hack-head-feat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  color: var(--muted);
}
.hack-head-feat-icon svg {
  width: 16px;
  height: 16px;
}
.hack-page .kpi-icon-wrap {
  background: var(--glass-fill);
  border-color: var(--glass-line);
  color: var(--muted);
  box-shadow: none;
}
@media (max-width: 720px) {
  .hack-head { padding: 24px 18px 20px; }
  .hack-head-feats { grid-template-columns: 1fr; gap: 8px; }
}

/* badges */
.hack-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.55);
  color: var(--soft);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hack-badge svg {
  width: 12px;
  height: 12px;
  flex: none;
}
.hack-badge.is-solid {
  background: var(--btn-solid-bg);
  border-color: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}
.hack-badge.is-quiet {
  border-style: dashed;
  color: var(--muted);
}
.hack-badge.is-live {
  background: var(--glass-fill);
  border-color: var(--line);
  color: var(--heading);
}
.hack-badge-float {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* section groups */
.hack-section {
  margin-bottom: 40px;
}
.hack-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.hack-section-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.hack-section-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 1px 8px;
}
.hack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 760px) {
  .hack-grid { grid-template-columns: 1fr; }
}

/* listing cards */
.hack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--glass-line);
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.hack-card:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.hack-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hack-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--code-bg);
  overflow: hidden;
}
.hack-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hack-card:hover .hack-card-cover-img {
  transform: scale(1.05);
}
.hack-card-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(transparent, rgba(8, 8, 8, 0.72));
  pointer-events: none;
}
.hack-card-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  background: var(--code-bg);
}
.hack-card-prize-float {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--heading);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hack-card-prize-float svg {
  width: 13px;
  height: 13px;
}
.hack-card-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.hack-card-body {
  flex: 1;
  padding: 18px 20px 8px;
}
.hack-card-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.hack-card-body h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--heading);
  margin-bottom: 8px;
}
.hack-card-body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hack-card-body .hack-tracks {
  margin-top: 12px;
}
.hack-card-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 14px 0 0;
  padding: 0;
}
.hack-card-meta li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
  color: var(--muted);
}
.hack-card-meta li svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted-2);
}
.hack-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hack-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 12px 20px 16px;
}
.hack-card-prize {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
}
.hack-card-prize svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted-2);
}
.hack-card-prize-none {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-2);
}
.hack-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.hack-card-cta svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform .18s ease;
}
.hack-card:hover .hack-card-cta {
  color: var(--heading);
}
.hack-card:hover .hack-card-cta svg {
  transform: translateX(3px);
}
.hack-card.is-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(0, 1fr);
  min-height: 280px;
}
.hack-card.is-featured .hack-card-cover {
  aspect-ratio: auto;
  min-height: 280px;
  height: 100%;
  align-self: stretch;
}
.hack-card.is-featured .hack-card-body h3 {
  font-size: clamp(22px, 3vw, 30px);
}
.hack-card.is-featured .hack-card-body p {
  -webkit-line-clamp: 3;
  font-size: 14.5px;
}
@media (max-width: 760px) {
  .hack-card.is-featured {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hack-card.is-featured .hack-card-cover {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* tracks */
.hack-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hack-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--soft);
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  padding: 4px 10px;
}

/* detail page */
.hack-crumb {
  margin-bottom: 16px;
}
.hack-hero {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.hack-hero-art {
  position: relative;
  background: transparent;
}
.hack-hero.has-fallback .hack-hero-art {
  display: none;
}
.hack-hero-art img {
  width: 100%;
  height: auto;
  display: block;
}
.hack-hero-fallback {
  display: none;
}
.hack-hero-copy {
  padding: 24px 28px 26px;
  border-top: 1px solid var(--line-2);
}
.hack-hero.has-fallback .hack-hero-copy {
  border-top: 0;
}
.hack-hero-copy h1 {
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--heading);
  margin-bottom: 10px;
}
.hack-hero-summary {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.hack-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hack-hero-copy .hack-tracks {
  margin-top: 14px;
}
.hack-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.hack-hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hack-hero-actions .btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.hack-signed {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--glass-fill);
  color: var(--heading);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.hack-signed svg {
  width: 14px;
  height: 14px;
  flex: none;
}
@media (max-width: 720px) {
  .hack-hero { border-radius: 16px; }
  .hack-hero-copy { padding: 18px 16px 20px; }
  .hack-hero-actions .btn { width: 100%; justify-content: center; }
}

/* two-column event body */
.hack-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 22px;
  align-items: start;
  margin-bottom: 8px;
}
.hack-aside {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 76px;
}
.hack-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
@media (max-width: 860px) {
  .hack-layout { grid-template-columns: 1fr; }
  .hack-aside,
  .hack-main { grid-column: auto; grid-row: auto; }
  .hack-aside { position: static; }
}

.hack-prize {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.hack-prize-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  color: var(--muted);
}
.hack-prize-icon svg {
  width: 20px;
  height: 20px;
}
.hack-prize-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.hack-prize strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--heading);
}

.hack-aside-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--line-2);
  overflow: hidden;
}
.hack-aside-stats > div {
  padding: 14px 10px 12px;
  background: var(--bg-2);
  text-align: center;
}
.hack-aside-stats dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.hack-aside-stats dt svg {
  width: 14px;
  height: 14px;
}
.hack-aside-stats dd {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
}

/* key event details */
.hack-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.hack-facts > div {
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--bg-2);
}
.hack-facts dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.hack-facts dt svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--muted-2);
}
.hack-facts dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading);
}
.hack-fact-remain {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
}
@media (max-width: 860px) { .hack-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hack-facts { grid-template-columns: 1fr; } }

/* how it works */
.hack-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  position: relative;
}
.hack-how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px 18px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--bg-2);
}
.hack-how-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}
.hack-how-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--glass-line);
  background: var(--glass-fill);
  color: var(--muted);
}
.hack-how-icon svg {
  width: 18px;
  height: 18px;
}
.hack-how-step b {
  display: block;
  font-size: 15px;
  font-weight: 650;
  color: var(--heading);
  margin-bottom: 4px;
}
.hack-how-step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 760px) { .hack-how { grid-template-columns: 1fr; } }

/* results / entries */
.hack-board {
  margin-bottom: 8px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--glass-line);
  background: var(--bg-2);
}
.hack-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hack-board-head h2 {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--heading);
}
.hack-board-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.hack-board-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--glass-fill);
}
.hack-board-place {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--heading);
}
.hack-board-place.is-plain {
  display: flex;
  color: var(--muted-2);
}
.hack-board-place.is-plain svg {
  width: 16px;
  height: 16px;
}
.hack-board-row.is-place-1 .hack-board-place,
.hack-board-row.is-place-2 .hack-board-place,
.hack-board-row.is-place-3 .hack-board-place { color: var(--heading); }
.hack-board-copy {
  min-width: 0;
}
.hack-board-copy b {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hack-board-copy span {
  font-size: 12px;
  color: var(--muted);
}
.hack-board-prize {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--heading);
}
.hack-board-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.hack-board-link:hover { color: var(--heading); }
.hack-board-link svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 640px) {
  .hack-board-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .hack-board-prize,
  .hack-board-link { grid-column: 2; }
}

/* student registration panel */
.hack-reg {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg-2);
}
.hack-aside .hack-reg {
  box-shadow: var(--shadow-card);
}
.hack-reg-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}
.hack-reg.is-done .hack-reg-head {
  margin-bottom: 16px;
}
.hack-reg-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin-bottom: 5px;
}
.hack-reg-title svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted-2);
}
.hack-reg.is-done .hack-reg-title svg {
  color: var(--muted-2);
}
.hack-reg-head p {
  max-width: 70ch;
  margin: 0;
}
.hack-reg-form > label,
.hack-reg-form > .frow,
.hack-reg-form > .hack-choice-group {
  margin-bottom: 16px;
}
.hack-reg-form > .btn {
  margin-top: 4px;
}
.hack-wizard-step > label,
.hack-wizard-step > .hack-choice-group {
  margin-bottom: 16px;
}
.hack-wizard-progress {
  margin-bottom: 20px;
}
.hack-wizard-step-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.hack-wizard-bar {
  height: 3px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.hack-wizard-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease;
}
.hack-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.hack-wizard-nav .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hack-wizard-nav .btn svg {
  width: 14px;
  height: 14px;
}
.req {
  color: var(--err);
  font-weight: 700;
}
.hack-choice-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.hack-choice-group > legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: 8px;
}
.hack-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hack-choice .chk {
  align-items: center;
  gap: 0;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  cursor: pointer;
}
.hack-choice .chk input {
  margin: 0 10px 0 0;
  accent-color: var(--accent);
}
.hack-choice-other {
  margin: 10px 0 0;
}

/* organization picker */
.org-select {
  position: relative;
  margin-top: 6px;
}
.org-select-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  background: var(--input);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.org-select-trigger:hover {
  border-color: var(--btn-hover-border);
}
.org-select-trigger:focus-visible,
.org-select-trigger.is-open {
  outline: none;
  border-color: var(--accent);
}
.org-select-trigger.is-missing {
  border-color: var(--err);
}
.org-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.org-select-value.is-ph {
  color: var(--muted-2);
}
.org-select-chev {
  flex: none;
  color: var(--muted);
  transition: transform 0.18s ease, color 0.18s ease;
}
.org-select-trigger.is-open .org-select-chev {
  transform: rotate(180deg);
  color: var(--accent);
}
.org-select-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  animation: org-pop 0.12s ease-out;
}
@keyframes org-pop {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.org-opt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.org-select-list li + li .org-opt {
  border-top: 1px solid var(--line-2);
}
.org-opt.is-active {
  background: var(--hover);
  border-left-color: var(--accent);
}
.org-opt.is-picked .org-opt-name {
  color: var(--accent-light);
}
.org-opt-name {
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-opt-hint {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.org-opt > svg {
  flex: none;
  color: var(--accent);
  align-self: center;
}
.org-select-other {
  margin-top: 6px;
  font-size: 13px;
}
.org-select-other.is-missing {
  border-color: var(--err);
}
.profile-org {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.profile-org > legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
}
.org-select-error {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--err);
}
.hack-reg-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}
@media (min-width: 900px) {
  .hack-reg-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hack-reg-summary dt,
.hack-reg-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.hack-reg-summary dd {
  margin: 0;
  font-size: 14px;
  font-weight: 550;
  color: var(--heading);
  overflow-wrap: anywhere;
}
.hack-reg-idea {
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--glass-fill);
}
.hack-reg-idea p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--soft);
  white-space: pre-line;
}
.hack-reg-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.hack-reg-link:hover {
  color: var(--heading);
}
.hack-reg-link svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.hack-reg-note {
  margin: 14px 0 0;
}
.hack-reg-edit {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.hack-reg-edit > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hack-reg-edit > summary::-webkit-details-marker { display: none; }
.hack-reg-edit > summary:hover { color: var(--heading); }
.hack-reg-edit > summary svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.hack-reg-edit[open] > summary {
  margin-bottom: 18px;
}
.hack-reg-cancel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.hack-reg-cancel .btn {
  width: auto;
}
.hack-team-wrap {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
/* Always-visible info box — deliberately not a <details> disclosure, so it can't be missed. */
.hack-track-help {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--glass-fill);
}
.hack-track-help-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.hack-track-help-label svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.hack-track-help ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hack-track-help li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--soft);
  padding-left: 14px;
  position: relative;
}
.hack-track-help li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted-2);
}
.hack-team-head {
  margin-bottom: 14px;
}
.hack-team-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin: 0 0 4px;
}
.hack-team-title svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted-2);
}
.hack-team-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .hack-team-split { grid-template-columns: 1fr; }
}
.hack-team-form {
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--glass-fill);
}
.hack-team-form label {
  display: block;
  margin-bottom: 10px;
}
.hack-team-form .btn {
  width: 100%;
  justify-content: center;
}
.hack-team-code {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hack-team-code .hack-reg-label {
  margin: 0;
}
.hack-team-code-value {
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--input);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--heading);
}
.hack-team-code-value.is-closed {
  color: var(--muted-2);
  text-decoration: line-through;
}
.hack-team-members {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hack-team-members li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  /* The staff console hangs four controls off each member, which overflows a nowrap row on a
     laptop. The participant-facing list shares this class and only ever holds a name and a tag, so
     wrapping is inert there. */
  flex-wrap: wrap;
}
/* Keeps a member's controls together as one wrapping unit, so a narrow viewport breaks between the
   name and its buttons rather than stranding one button on its own line. */
.hack-team-member-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Above the mobile breakpoint the row may wrap BETWEEN a member's controls but never inside one:
   .hack-inline-form wraps by default, which was dropping "Move" onto its own line under its select
   while the plain buttons stayed up on the name's line. Below 640px the existing rule at the end of
   this file stacks every control full-width instead, which is the right answer on a phone. */
@media (min-width: 641px) {
  .hack-team-member-actions .hack-inline-form { flex-wrap: nowrap; }
}
/* The team editor sits inside the row's own disclosure, which already has a top rule and padding
   from .hack-reg-detail-body — so it drops .hack-reg-edit's, which would read as a double divider. */
.hack-team-edit {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.hack-team-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 2px 8px;
}
.hack-snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(75, 225, 160, 0.35);
  background: linear-gradient(135deg, rgba(15, 40, 32, 0.96), rgba(13, 20, 18, 0.98));
  color: var(--ok);
  font-size: 13.5px;
  box-shadow: var(--shadow-card);
  animation: hack-snackbar-in 0.24s ease-out;
}
@keyframes hack-snackbar-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.hack-snackbar-close {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0 2px;
}
.hack-snackbar-close:hover {
  opacity: 1;
}
html[data-lms-theme="light"] .hack-snackbar {
  background: linear-gradient(135deg, #eafff5, #f4fffa);
  border-color: rgba(20, 160, 100, 0.35);
}
/* ---------- "Right now": where the event stands, and what happens next ---------- */
/* Successor to the old .hack-deadline card, which answered only "can you register?" and so read
   "Closed / Ended" on an event that was live and on day 2 of its build. */
.hack-now {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
/* The only phase that changes the card's frame — everything else is a difference of wording. */
.hack-now.is-live {
  border-color: rgba(75, 225, 160, 0.28);
}
.hack-now-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hack-now-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  color: var(--muted);
}
.hack-now-icon svg {
  width: 18px;
  height: 18px;
}
.hack-now-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-bottom: 4px;
}
.hack-now-detail {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- Phase: what the event is doing, as opposed to what registration is doing ---------- */
/* These are modifiers on .hack-badge, so they inherit the pill geometry and only restate colour. */
.hack-phase {
  gap: 7px;
}
.hack-phase.is-live {
  border-color: rgba(75, 225, 160, 0.4);
  background: rgba(75, 225, 160, 0.1);
  color: var(--ok);
}
.hack-phase.is-upcoming {
  border-color: var(--accent);
  color: var(--accent-light);
}
.hack-phase.is-judging {
  border-color: var(--warn-line);
  color: var(--warn);
}
.hack-phase.is-ended,
.hack-phase.is-draft {
  border-style: dashed;
  color: var(--muted);
}
/* Green rather than the coral of .live-dot: this says "running", not "alert". */
.hack-phase-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(75, 225, 160, 0.6);
  animation: hack-pulse 1.8s infinite;
}
@keyframes hack-pulse {
  0% { box-shadow: 0 0 0 0 rgba(75, 225, 160, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(75, 225, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(75, 225, 160, 0); }
}

/* ---------- Countdown variants ---------- */
/* Tabular figures so the digits don't shuffle sideways once a second. */
.hack-countdown.is-lg {
  display: block;
  border: 0;
  padding: 0;
  white-space: normal;
}
.hack-countdown.is-lg b {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.hack-countdown.is-bare {
  border: 0;
  padding: 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hack-countdown.is-bare b {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hack-countdown-suffix {
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* ---------- Elapsed bars ---------- */
/* Sits above .hack-card-cover::after's gradient so it stays visible over a dark banner. */
.hack-card-progress {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.14);
}
.hack-card-progress-fill {
  display: block;
  height: 100%;
  background: var(--ok);
  transition: width 0.3s ease;
}
.hack-now-count {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hack-now-until {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.4;
}
.hack-now-bar {
  display: block;
  height: 4px;
  background: var(--code-bg);
  border-radius: 999px;
  overflow: hidden;
}
.hack-now-bar > span {
  display: block;
  height: 100%;
  background: var(--ok);
}

/* ---------- Milestone timeline ---------- */
/* The schedule as a sequence rather than a status word: which moments have passed, which is next,
   and what is still to come. Past tense on a done row carries the state, so the tick is only
   reinforcement. */
.hack-timeline {
  list-style: none;
  margin: 0;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
}
.hack-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 9px 0;
}
/* The rail joining one marker to the next, drawn behind the markers' own backgrounds. */
.hack-timeline-row::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 26px;
  bottom: -9px;
  width: 1px;
  background: var(--line-2);
}
.hack-timeline-row:last-child::before {
  display: none;
}
.hack-timeline-mark {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ok);
}
.hack-timeline-mark svg {
  width: 11px;
  height: 11px;
}
.hack-timeline-row.is-done .hack-timeline-mark {
  border-color: var(--ok);
}
.hack-timeline-row.is-next .hack-timeline-mark {
  border-color: var(--accent);
  background: rgba(91, 141, 239, 0.14);
}
.hack-timeline-copy b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.35;
}
.hack-timeline-row.is-done .hack-timeline-copy b {
  font-weight: 500;
  color: var(--muted);
}
.hack-timeline-copy > span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--muted-2);
  margin-top: 2px;
}
.hack-timeline-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* A pulsing ring is the one piece of this that moves on its own; a static glow carries the same
   "running" signal without it. Scoped to the new classes rather than retrofitted across the file —
   .live-dot and the snackbar keyframes deserve the same treatment as their own change. */
@media (prefers-reduced-motion: reduce) {
  .hack-phase-dot {
    animation: none;
    box-shadow: 0 0 6px rgba(75, 225, 160, 0.55);
  }
  .hack-card-progress-fill {
    transition: none;
  }
}

/* Outstanding actions for this viewer, under the countdown — arrow markers and an accent link so
   they read as things to go and do, not as more deadline metadata. */
.hack-now-todo {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hack-now-todo li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--soft);
}
.hack-now-todo li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-light);
}
.hack-now-todo a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hack-main #register {
  margin-bottom: 22px;
}

html[data-lms-theme="light"] .hack-phase.is-live {
  background: rgba(47, 191, 133, 0.1);
  border-color: rgba(47, 191, 133, 0.45);
  color: var(--ok);
}
html[data-lms-theme="light"] .hack-phase.is-upcoming {
  color: var(--accent);
}
/* --warn-line is a pale peach in light mode — too faint to read as a border on white. */
html[data-lms-theme="light"] .hack-phase.is-judging {
  border-color: #d8a76a;
  color: var(--warn);
}
html[data-lms-theme="light"] .hack-phase-dot {
  box-shadow: 0 0 0 0 rgba(47, 191, 133, 0.6);
}
/* The dark track is invisible over the light cover gradient. */
html[data-lms-theme="light"] .hack-card-progress {
  background: rgba(20, 20, 20, 0.12);
}
/* Pre-existing: the critical colours were picked for a dark panel and fail contrast on white.
   Tolerable while this only ever appeared on the entry form; not now it also sits at 30px on a
   public event page. */
html[data-lms-theme="light"] .hack-countdown.is-critical,
html[data-lms-theme="light"] .hack-countdown.is-critical b {
  color: #c0272d;
  border-color: #c0272d;
}
html[data-lms-theme="light"] .hack-badge {
  background: var(--panel);
  color: var(--soft);
}
html[data-lms-theme="light"] .hack-card-cover::after {
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.55));
}
html[data-lms-theme="light"] .hack-card-cover-fallback {
  color: var(--muted-2);
  background: var(--code-bg);
}
html[data-lms-theme="light"] .hack-head-feats {
  border-top-color: var(--line);
}

/* staff roster */
.hack-roster-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
}
.hack-roster-search svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--muted-2);
}
.hack-roster-search input[type="search"] {
  flex: 1;
  min-width: 120px;
  border: 0;
  background: transparent;
  padding: 6px 0;
}
.hack-roster-search input[type="search"]:focus {
  outline: none;
}
.hack-roster-stage-filter {
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 8px;
}
.hack-roster-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hack-roster-pagination-nav {
  display: flex;
  gap: 8px;
}
.hack-roster-pagination-nav .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hack-roster-scroll {
  overflow-x: auto;
  margin-bottom: 20px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg-2);
}
.hack-roster-tbl {
  min-width: 1480px;
  margin-bottom: 0;
}
.hack-roster-row {
  position: relative;
  cursor: pointer;
}
.hack-roster-row:hover {
  background: var(--hover);
}
.hack-roster-row-link {
  color: inherit;
}
.hack-roster-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hack-roster-idea {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 280px;
  color: var(--muted);
  line-height: 1.45;
}
.hack-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
  margin-bottom: 14px;
}
.hack-roster-head .ph2 {
  margin-bottom: 0;
}
.hack-roster-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hack-roster-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hack-roster-head .btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* staff create / edit panel */
.hack-new {
  margin-bottom: 16px;
}
.hack-new > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hack-new > summary::-webkit-details-marker { display: none; }
.hack-new > summary::after {
  content: "Open panel";
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 10px;
}
.hack-new[open] > summary::after { content: "Close panel"; }
.hack-new[open] > summary {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}

.hack-fieldset { border: 0; margin: 0 0 10px; padding: 0; }
.hack-fieldset > legend {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0;
  margin-bottom: 14px;
}
.hack-fieldset + .hack-fieldset {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.fhint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted-2);
  line-height: 1.45;
}
.hack-form > .btn { margin-top: 12px; }

.hack-banner-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 6;
  margin-bottom: 20px;
  border: 1px dashed var(--line);
  background: var(--glass-fill);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-transform: none;
  transition: border-color .18s ease, background .18s ease;
}
.hack-banner-drop:hover {
  border-color: var(--btn-hover-border);
  background: var(--hover);
}
.hack-banner-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.hack-banner-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.hack-banner-drop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hack-banner-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
  color: var(--muted-2);
}
.hack-banner-empty b {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 650;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.hack-banner-empty .muted {
  max-width: 360px;
  font-family: var(--sans);
  letter-spacing: 0;
  color: var(--muted);
}
.hack-banner-cta {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  pointer-events: none;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.event-roster{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.event-roster-toggle,
.event-roster-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  transition:.2s;
}
.event-roster-toggle{cursor:pointer}
.event-roster-toggle::before{content:"▸";color:var(--accent);font-size:11px;letter-spacing:0}
.event-roster-title::before{content:"▾";color:var(--accent);font-size:11px;letter-spacing:0}
.event-roster-toggle:hover{color:var(--text)}
.event-roster-toggle .mono,
.event-roster-title .mono{
  border:1px solid var(--line-2);
  background:var(--glass-fill);
  border-radius:9999px;
  padding:1px 8px;
  font-size:10px;
  color:var(--muted);
}
.event-roster-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.event-roster-tools{display:flex;align-items:center;gap:8px}
.event-roster .tbl{margin-bottom:4px}

/* pagination */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:12px 0 20px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted-2);
}
.pager-links{display:inline-flex;align-items:center;gap:8px}
.pager-page{color:var(--muted);white-space:nowrap}
.pager .btn.is-off{opacity:.4;cursor:not-allowed}

/* ---- hackathon staff console (/lms/hackathon/[id]/manage) ---- */
.pill-err{font-family:var(--mono);font-size:10px;color:var(--err);border:1px solid var(--err-line);padding:3px 8px;text-transform:uppercase}

/* "Manage" plus the event's phase badge and its one supporting line, on one baseline. */
.hack-manage-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.hack-manage-head h1{margin-bottom:0}

.hack-manage-filters{margin-top:18px}
.hack-manage-filters .hack-roster-search{margin:6px 0 0;display:flex}

/* Sticky so a long roster keeps its bulk actions reachable while you scroll to pick people. */
.hack-bulkbar{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 12px;
  margin-bottom:12px;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.hack-bulkbar.is-empty{opacity:.6}
.hack-bulkbar select,.hack-bulkbar input{margin:0}
.hack-bulkbar .btn[disabled]{opacity:.4;cursor:not-allowed}

.hack-check-col{width:1%;white-space:nowrap}
/* .hack-roster-tbl reserves 1480px for the public roster's 12 columns; this table needs less. */
.hack-manage-tbl{min-width:1040px}
/* The submissions console carries one more column than the registrations one, so it gets its own
   floor rather than borrowing a width it would overflow. */
.hack-sub-tbl{min-width:1180px}
.hack-lb-tbl{min-width:1100px}
.hack-judge-tbl{min-width:860px}

/* ---- judging ---- */
.hack-score-cell{white-space:nowrap}
.hack-score-cell .pill-risk{margin-top:4px;display:inline-block}
.hack-score-coverage{white-space:nowrap}

/* What the panel said per criterion, on the entry page. One row each so a criterion nobody reached
   reads as a gap rather than hiding at the end of a sentence. */
.hack-criterion-rollup{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.hack-criterion-rollup li{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
  padding:8px 12px;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.hack-criterion-rollup-label{flex:1;min-width:140px;font-weight:600}

.hack-judge-progress{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:baseline;
  margin:0 0 14px;
  padding:9px 12px;
  border:1px solid var(--line-2);
  background:var(--panel);
}

.hack-judge-queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hack-judge-queue-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:12px;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.hack-judge-queue-main{flex:1;min-width:0}
.hack-judge-queue-tags{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:6px}
.hack-judge-queue-score{min-width:160px}
.hack-judge-queue-ops{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* The entry on the left, the scorecard on the right: a judge should never have to scroll away from
   what they are marking to reach the marks. */
.hack-judge-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:20px;align-items:start}
.hack-judge-entry,.hack-judge-form{min-width:0;border:1px solid var(--line-2);background:var(--panel);padding:14px}
.hack-judge-tags{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.hack-judge-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.hack-judge-desc{margin-top:14px;border-top:1px solid var(--line-2);padding-top:12px}

.hack-scorecard-crit{padding:10px 0;border-bottom:1px solid var(--line-2)}
.hack-scorecard-crit-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.hack-scorecard-crit-head label{margin:0;font-weight:600}
.hack-scorecard-crit p{margin:4px 0 0}
.hack-scorecard-input{display:flex;gap:8px;align-items:center;margin-top:6px}
/* Narrow on purpose: a 0–10 box that stretches the full column reads as a text field. */
.hack-scorecard-input input{width:80px;margin:0}
.hack-scorecard-total{margin:14px 0 12px;padding:9px 12px;border:1px solid var(--line-2);background:var(--bg-2)}

.hack-rubric-row{margin-bottom:12px;padding:12px}
.hack-rubric-num{flex:0 0 120px;min-width:100px}
.hack-rubric-share{align-self:end;padding-bottom:12px;color:var(--muted)}
.hack-rubric-ops{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}

.hack-lb-award{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.hack-lb-award input{width:74px;margin:0}

.hack-reg-detail-row td{padding-top:0;padding-bottom:0}
.hack-reg-detail{border-top:0}
.hack-reg-detail > summary{
  display:inline-flex;
  align-items:center;
  gap:7px;
  list-style:none;
  cursor:pointer;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:8px 0;
}
.hack-reg-detail > summary::-webkit-details-marker{display:none}
.hack-reg-detail > summary:hover{color:var(--heading)}
.hack-reg-detail-body{padding:4px 0 18px}
.hack-reg-detail-meta{display:flex;align-items:center;gap:12px;margin:12px 0}
.hack-reg-detail-team{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}

.hack-inline-form{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.hack-inline-form select,.hack-inline-form input{margin:0;max-width:260px}
.hack-team-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}

.hack-attention-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px}
.hack-attention-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border:1px solid var(--line-2);
  font-size:14px;
}
.hack-attention-list li svg{flex:none;color:var(--muted)}
.hack-attention-list li span{flex:1}
.hack-attention-list li.is-urgent{border-color:var(--warn-line);background:var(--warn-bg)}
.hack-attention-list li.is-urgent svg{color:var(--warn)}

@media (max-width:720px){
  .hack-bulkbar{position:static;flex-direction:column;align-items:stretch}
  .hack-bulkbar .btn,.hack-bulkbar select,.hack-bulkbar input{width:100%}
  .hack-inline-form{width:100%}
  .hack-inline-form select,.hack-inline-form input,.hack-inline-form .btn{width:100%;max-width:none}
  .hack-attention-list li{flex-wrap:wrap}
  .hack-judge-grid{grid-template-columns:minmax(0,1fr)}
  .hack-judge-queue-row{flex-direction:column}
  .hack-judge-queue-score{min-width:0}
  .hack-judge-queue-ops{width:100%}
  .hack-rubric-num{flex:1 1 100%}
  .hack-rubric-share{align-self:start;padding-bottom:0}
}

/* ---------- Hackathon entry submission ---------- */
.hack-submit{display:flex;flex-direction:column;gap:18px;max-width:760px}
.hack-submit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.hack-submit-head h1{font-size:26px;letter-spacing:-.01em;margin:0 0 4px}

/* The countdown is the loudest thing on the page as the deadline nears, on purpose. */
.hack-countdown{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:9px 13px;white-space:nowrap}
.hack-countdown b{color:var(--text);font-size:15px;letter-spacing:.02em}
.hack-countdown.is-soon{border-color:var(--accent);color:var(--accent-light)}
.hack-countdown.is-soon b{color:var(--accent-light)}
.hack-countdown.is-critical{border-color:#e5484d;color:#ff9ba0}
.hack-countdown.is-critical b{color:#ff9ba0}
.hack-countdown.is-over,.hack-countdown.is-none{border-style:dashed}

.hack-submit-policy{font-size:13px;color:var(--muted);border-left:2px solid var(--line);padding-left:12px;margin:0}
.hack-submit-locked{border:1px solid var(--line);background:var(--bg-2);padding:13px 15px;font-size:13px}
.hack-submit-restore{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--accent);background:rgba(91,141,239,.08);padding:11px 14px;font-size:13px}
.hack-submit-restore span{flex:1 1 260px}

/* One line that has to read at a glance while someone is typing, so state is carried by colour
   as well as words. */
.hack-save-status{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;min-height:18px}
.hack-save-status.is-saved{color:var(--ok)}
.hack-save-status.is-saving,.hack-save-status.is-dirty{color:var(--muted)}
.hack-save-status.is-offline,.hack-save-status.is-retrying{color:#ffcf8f;text-transform:none;letter-spacing:.02em;font-size:12px}
.hack-save-status.is-conflict{color:#ff9ba0;text-transform:none;letter-spacing:.02em;font-size:12px}
.hack-save-status.is-locked{color:#ff9ba0}

.hack-submit-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.hack-submit-actions .fhint{flex:1 1 200px}

.hack-video{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);padding:15px}
.hack-video-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hack-video-have{display:flex;flex-direction:column;gap:7px}
.hack-video-have video{width:100%;max-height:340px;background:#000;border:1px solid var(--line-2)}
.hack-video input[type=file]{font-size:12px;color:var(--muted)}
.hack-video-progress{position:relative;height:22px;border:1px solid var(--line);background:var(--bg-2)}
.hack-video-progress>div{height:100%;background:var(--accent);transition:width .2s}
.hack-video-progress>span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--text)}

.hack-cta-submit{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--accent);background:rgba(91,141,239,.07);padding:16px 18px;margin-bottom:18px}
.hack-cta-submit h2{margin:0 0 3px}
.hack-cta-submit p{margin:0}

@media (max-width:720px){
  .hack-submit-head{flex-direction:column}
  .hack-countdown{white-space:normal}
  .hack-cta-submit{flex-direction:column;align-items:stretch}
  .hack-cta-submit .btn{justify-content:center}
}
.hack-entry-track{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border:1px solid var(--line);padding:11px 14px;margin:0;font-size:13px}
.hack-entry-track>span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hack-entry-track>a{margin-left:auto;font-size:12px;color:var(--muted)}

/* ---------- Judge video modal ---------- */
/* Native <dialog>: it supplies the focus trap, inert background and ::backdrop, so all this does
   is dress it to match the dark console. */
.hack-video-modal{border:none;background:transparent;padding:0;max-width:min(920px,92vw);width:100%}
.hack-video-modal::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.hack-video-modal-panel{display:flex;flex-direction:column;gap:12px;background:var(--panel-solid);border:1px solid var(--line);padding:18px}
.hack-video-modal-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.hack-video-modal-panel>header>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hack-video-modal-panel>header b{font-size:16px;overflow-wrap:anywhere}
.hack-video-modal-panel>header .btn{flex:0 0 auto;font-size:15px;line-height:1;padding:7px 12px}
/* Cap by viewport height so a tall portrait recording can't push the controls off-screen. */
.hack-video-modal-panel video{width:100%;max-height:62vh;background:#000;border:1px solid var(--line-2)}
.hack-video-modal-panel>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hack-video-modal-links{display:flex;gap:14px;flex-wrap:wrap}
.hack-video-modal-links a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hack-video-modal-links a:hover{color:var(--text)}

@media (max-width:720px){
  .hack-video-modal{max-width:96vw}
  .hack-video-modal-panel{padding:14px}
  .hack-video-modal-panel video{max-height:48vh}
  .hack-video-modal-panel>footer{flex-direction:column;align-items:flex-start}
}
/* Positive confirmation next to a field that parsed — reassurance, not an error. */
.fhint.is-ok{color:var(--ok)}
.lms-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}