/* =====================================================================
   NucleoCampus — Neon Campus
   A cinematic, high-contrast interface with calm typography and luminous
   accents. Designed to work across quiz, lesson, lecturer and student views.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --night: #070a14;
  --night-raised: #0e1425;
  --surface: rgba(18, 27, 48, 0.78);
  --surface-solid: #121b30;
  --surface-hover: #192642;
  --line: rgba(178, 205, 255, 0.16);
  --line-strong: rgba(103, 232, 249, 0.42);
  --text: #f0f7ff;
  --text-muted: #9eafca;
  --cyan: #67e8f9;
  --cyan-deep: #06b6d4;
  --violet: #a78bfa;
  --violet-deep: #7c3aed;
  --green: #5eead4;
  --danger: #fb7185;
  --danger-deep: #be123c;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-mono: "DM Mono", Consolas, monospace;
}

/* NucleoCampus identity -------------------------------------------------- */
.nucleocampus-ui {
  --cyan: #5ee7e2;
  --cyan-deep: #13b8b2;
  --violet: #8b7cf6;
  --violet-deep: #6654e8;
  --green: #7df7b5;
  background:
    radial-gradient(circle at 9% 8%, rgba(94,231,226,.18), transparent 25rem),
    radial-gradient(circle at 91% 18%, rgba(139,124,246,.2), transparent 29rem),
    radial-gradient(circle at 50% 100%, rgba(125,247,181,.08), transparent 32rem),
    linear-gradient(145deg,#050912 0%,#091326 50%,#090b1a 100%);
}
.nucleocampus-ui::before { opacity:.22; background-size:56px 56px; }
.nucleocampus-ui header.top { border-color:rgba(94,231,226,.2); border-radius:24px; background:rgba(7,15,29,.76); box-shadow:0 18px 55px rgba(0,0,0,.22); }
.nucleocampus-ui .brand-group { position:relative; }
.nucleocampus-ui .brand-group::after { content:""; position:absolute; left:30px; top:2px; width:12px; height:12px; border:1px solid rgba(125,247,181,.8); border-radius:50%; box-shadow:16px 19px 0 -3px rgba(139,124,246,.9); pointer-events:none; }
.nucleocampus-ui .brand-logo { padding:3px; border-color:rgba(94,231,226,.5)!important; border-radius:14px!important; background:linear-gradient(145deg,rgba(94,231,226,.12),rgba(139,124,246,.12)); }
.nucleocampus-ui .brand { font-size:1.24rem; letter-spacing:-.055em; }
.nucleocampus-ui .brand span { color:var(--cyan); }
.nucleocampus-ui .brand-tagline { color:#91a7c5; letter-spacing:.16em; }
.nucleocampus-ui header.top nav a[aria-current="page"] { color:#06151a; background:linear-gradient(115deg,var(--cyan),var(--green)); }
.nucleocampus-ui .card { border-radius:24px; border-color:rgba(168,198,234,.14); background:linear-gradient(145deg,rgba(18,34,58,.86),rgba(9,18,34,.9)); }
.nucleocampus-ui .card::after { width:72px; background:linear-gradient(90deg,var(--cyan),var(--green),var(--violet)); }
.nucleocampus-ui .role-card { min-height:190px; border-radius:24px; background:linear-gradient(145deg,rgba(20,39,64,.94),rgba(9,20,38,.94)); }
.nucleocampus-ui .role-card::before { border-color:rgba(94,231,226,.25); box-shadow:0 0 0 20px rgba(94,231,226,.035),0 0 0 40px rgba(139,124,246,.03); }
.nucleocampus-ui .role-card:hover { border-color:rgba(94,231,226,.55); transform:translateY(-5px); }
.role-icon { position:absolute; right:22px; top:20px; display:grid; place-items:center; width:46px; height:46px; color:var(--cyan); font-size:1.4rem; border:1px solid rgba(94,231,226,.26); border-radius:15px; background:rgba(94,231,226,.07); box-shadow:inset 0 0 20px rgba(94,231,226,.05); }
.role-src .role-icon { color:#c4baff; border-color:rgba(139,124,246,.35); background:rgba(139,124,246,.09); }
.role-lecturer .role-icon { color:#7df7b5; border-color:rgba(125,247,181,.3); background:rgba(125,247,181,.08); }
.public-intro { position:relative; min-height:260px; padding:42px clamp(22px,5vw,52px); margin-bottom:24px; overflow:hidden; border:1px solid rgba(94,231,226,.2); border-radius:30px; background:linear-gradient(120deg,rgba(13,35,59,.9),rgba(24,21,62,.76)); }
.public-intro h1 { max-width:11ch; margin-top:10px; font-size:clamp(3rem,7vw,5.7rem); line-height:.92; }
.public-intro .lede { margin:20px 0 0; font-size:1.08rem; }
.public-intro .product-story { display:none; }
.nucleo-orbit { position:absolute; right:7%; top:50%; width:210px; height:210px; border:1px solid rgba(94,231,226,.25); border-radius:50%; transform:translateY(-50%); box-shadow:inset 0 0 70px rgba(94,231,226,.05),0 0 70px rgba(139,124,246,.08); }
.nucleo-orbit::before,.nucleo-orbit::after { content:""; position:absolute; inset:24px; border:1px solid rgba(139,124,246,.3); border-radius:50%; transform:rotate(58deg) scaleY(.42); }
.nucleo-orbit::after { transform:rotate(-58deg) scaleY(.42); }
.nucleo-orbit b { position:absolute; inset:68px; display:grid; place-items:center; color:#07131d; font:800 1.35rem var(--font-display); border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--green)); box-shadow:0 0 40px rgba(94,231,226,.35); }
.nucleo-orbit span { position:absolute; width:11px; height:11px; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px var(--cyan); animation:nucleoFloat 4s ease-in-out infinite; }
.nucleo-orbit span:nth-child(1){left:11px;top:88px}.nucleo-orbit span:nth-child(2){right:28px;top:26px;animation-delay:-1.3s;background:var(--violet);box-shadow:0 0 15px var(--violet)}.nucleo-orbit span:nth-child(3){right:22px;bottom:27px;animation-delay:-2.4s;background:var(--green);box-shadow:0 0 15px var(--green)}
@keyframes nucleoFloat { 50% { transform:scale(1.45); opacity:.55; } }
.nucleocampus-ui .btn { border-radius:12px; background:linear-gradient(115deg,var(--cyan),var(--green)); }
.nucleocampus-ui .btn.secondary { color:var(--cyan); border-color:rgba(94,231,226,.35); background:rgba(94,231,226,.06); }
.nucleocampus-ui .site-footer { border-top-color:rgba(94,231,226,.16); }
@media(max-width:720px){.public-intro{min-height:350px;padding:30px 22px}.public-intro>.kicker,.public-intro>h1,.public-intro>.lede{position:relative;z-index:1}.public-intro h1{font-size:clamp(2.8rem,13vw,4rem)}.public-intro .lede{max-width:18ch}.nucleo-orbit{width:105px;height:105px;right:-15px;top:14px;bottom:auto;transform:none;opacity:.45}.nucleo-orbit::before,.nucleo-orbit::after{inset:14px}.nucleo-orbit b{inset:34px;font-size:.76rem}.nucleo-orbit span{width:8px;height:8px}.nucleo-orbit span:nth-child(1){left:4px;top:46px}.nucleo-orbit span:nth-child(2){right:12px;top:9px}.nucleo-orbit span:nth-child(3){right:8px;bottom:12px}.role-icon{width:40px;height:40px;right:17px;top:16px}.nucleocampus-ui .role-card{padding:22px}}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  background:
    radial-gradient(circle at 8% 5%, rgba(34, 211, 238, 0.17), transparent 25rem),
    radial-gradient(circle at 92% 14%, rgba(139, 92, 246, 0.16), transparent 28rem),
    linear-gradient(135deg, #070a14 0%, #0a1020 52%, #080b17 100%);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.35;
  background-image: linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #d1fbff; }
button, input, textarea, select { font: inherit; }

.wrap { max-width: 980px; margin: 0 auto; padding: 34px 24px 92px; }

header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 48px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(11, 17, 32, 0.68);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
}
header.top .brand-group { display: flex; align-items: center; min-width: 0; gap: 12px; }
header.top .brand-logo { width: 39px; height: 39px; max-width: 39px; display: block; flex: 0 0 auto; object-fit: contain; border: 1px solid rgba(103,232,249,.42); border-radius: 12px; box-shadow: 0 0 22px rgba(34,211,238,.23); }
header.top .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
header.top .brand { font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; letter-spacing: -0.04em; }
header.top .brand span { color: var(--cyan); }
header.top .brand-tagline { margin-top: 5px; color: var(--text-muted); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
header.top nav { display: flex; flex-wrap: wrap; gap: 4px; }
header.top nav a { padding: 7px 9px; color: var(--text-muted); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; border-radius: 8px; transition: color .2s ease, background .2s ease; }
header.top nav a:hover, header.top nav a:focus-visible { color: var(--cyan); background: rgba(103, 232, 249, .09); }
.notification-toggle { padding: 7px 9px; color: var(--cyan); font: 500 .7rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid rgba(103,232,249,.32); border-radius: 8px; background: rgba(103,232,249,.06); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.notification-toggle:hover, .notification-toggle:focus-visible, .notification-toggle.is-on { color: #d8fcff; border-color: var(--cyan); background: rgba(103,232,249,.13); }
.notification-toggle.is-on::before { content: "●"; margin-right: 5px; color: var(--green); }
.notification-toggle:disabled { cursor: not-allowed; opacity: .56; }
.install-app-btn { padding: 8px 11px; color: #06121d; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border: 0; border-radius: 8px; background: var(--cyan); cursor: pointer; }
.install-app-btn:hover, .install-app-btn:focus-visible { filter: brightness(1.08); }
.install-hint { max-width: 980px; padding: 0 24px; margin: -20px auto 24px; color: var(--text-muted); font-size: .78rem; text-align: right; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.13; letter-spacing: -.045em; }
h1 { max-width: 15ch; margin: 0 0 11px; font-size: clamp(2.25rem, 6vw, 4.25rem); font-weight: 700; }
h2 { margin: 0 0 15px; font-size: clamp(1.35rem, 3vw, 1.8rem); }
h3 { margin: 0 0 9px; font-size: 1.08rem; }
p { margin: 0 0 1rem; }
p.lede { max-width: 61ch; margin-bottom: 32px; color: var(--text-muted); font-size: 1.05rem; }

.card {
  position: relative;
  margin-bottom: 22px;
  padding: clamp(22px, 4vw, 34px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(25, 38, 66, .84), rgba(13, 20, 37, .88));
  box-shadow: var(--shadow);
  backdrop-filter: blur(15px);
}
.card::after { position: absolute; top: 0; left: 28px; width: 58px; height: 2px; content: ""; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 14px var(--cyan); }

.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.role-card {
  position: relative;
  display: block;
  min-height: 205px;
  padding: 27px;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(22,34,60,.94), rgba(12,18,33,.91));
  box-shadow: 0 14px 35px rgba(0,0,0,.2);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.role-card::before { position: absolute; right: -30px; bottom: -52px; width: 154px; height: 154px; content: ""; border: 1px solid rgba(103,232,249,.24); border-radius: 50%; box-shadow: 0 0 0 20px rgba(103,232,249,.035), 0 0 0 40px rgba(167,139,250,.025); }
.role-card:hover, .role-card:focus-visible { color: var(--text); border-color: var(--line-strong); box-shadow: 0 23px 50px rgba(0,0,0,.34), 0 0 30px rgba(34,211,238,.09); transform: translateY(-6px); }
.role-card .kicker { display: block; margin-bottom: 11px; color: var(--cyan); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
.role-card h2 { position: relative; margin-bottom: 9px; }
.role-card p { position: relative; margin: 0; color: var(--text-muted); font-size: .91rem; }

label { display: block; margin: 18px 0 7px; color: #c8d6ef; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
label:first-child { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="file"], textarea, select {
  width: 100%; min-height: 46px; padding: 11px 13px; color: var(--text); font-size: .94rem;
  border: 1px solid var(--line); border-radius: 11px; outline: none; background: rgba(3, 7, 18, .45);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input[type="file"] { padding: 9px; color: var(--text-muted); }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 6px 9px; color: var(--cyan); font: 500 .69rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgba(103,232,249,.35); border-radius: 6px; background: rgba(103,232,249,.08); cursor: pointer; }
textarea { min-height: 110px; resize: vertical; }

/* Visual equation composer used by written quiz answers. */
.math-answer { margin-top: 18px; }
.math-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.answer-mode-toggle { border: 1px solid rgba(103,232,249,.5); border-radius: 999px; padding: 9px 15px; background: rgba(34,211,238,.1); color: var(--cyan); cursor: pointer; font-weight: 750; }
.answer-mode-toggle:hover, .answer-mode-toggle[aria-pressed="true"] { background: rgba(34,211,238,.19); border-color: var(--cyan); color: #d8fcff; }
.plain-answer { margin-top: 0; }
.math-mode-panel.hidden { display: none; }
.math-toolbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 7px; margin-bottom: 9px; padding: 10px; border: 1px solid rgba(103,232,249,.18); border-radius: 13px; background: rgba(5,12,25,.62); }
.math-toolbar.hidden { display: none; }
.math-symbol { min-height: 42px; border: 1px solid rgba(148,163,184,.22); border-radius: 9px; background: rgba(15,27,48,.9); color: #edfaff; cursor: pointer; font: 600 1.02rem Georgia, "Times New Roman", serif; }
.math-symbol:hover, .math-symbol:focus-visible { border-color: var(--cyan); background: rgba(34,211,238,.15); transform: translateY(-1px); }
.math-lines { display: grid; gap: 10px; counter-reset: math-step; }
.math-line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; counter-increment: math-step; }
.math-line::before { content: "Step " counter(math-step); position: absolute; z-index: 1; top: 7px; left: 12px; color: #8190aa; font: 650 .62rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.math-line .quiz-math-field { padding-top: 25px; }
.remove-math-line { width: 38px; height: 38px; border: 1px solid rgba(248,113,113,.36); border-radius: 10px; background: rgba(248,113,113,.08); color: #fca5a5; cursor: pointer; font-size: 1.35rem; }
.remove-math-line:hover { border-color: #f87171; background: rgba(248,113,113,.16); }
.add-math-line { margin-top: 10px; padding: 9px 14px; border: 1px solid rgba(103,232,249,.42); border-radius: 10px; background: rgba(34,211,238,.08); color: var(--cyan); cursor: pointer; font-weight: 750; }
.add-math-line:hover { border-color: var(--cyan); background: rgba(34,211,238,.15); }
.quiz-math-field {
  display: block; width: 100%; min-height: 82px; padding: 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(6,14,29,.75); color: #edfaff;
  font-size: 1.22rem; box-sizing: border-box; overflow-x: auto;
  color-scheme: dark;
  --caret-color: #67e8f9;
  --selection-background-color: #155e75;
  --selection-color: #ffffff;
  --contains-highlight-background-color: rgba(34,211,238,.20);
  --placeholder-color: #8190aa;
  --smart-fence-color: #67e8f9;
  --smart-fence-opacity: 1;
}
.short-math-answer .quiz-math-field { min-height: 58px; }
.quiz-math-field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(103,232,249,.14), 0 0 20px rgba(34,211,238,.08); }
.math-hint { margin: 7px 2px 0; color: #8190aa; font-size: .78rem; line-height: 1.4; }
@media (max-width: 600px) {
  .math-toolbar { grid-template-columns: repeat(5, 1fr); max-height: 230px; overflow-y: auto; }
  .math-symbol { min-width: 0; padding: 6px 2px; }
}

/* =====================================================================
   2026 product system — shared across every NucleoCampus workspace
   ===================================================================== */
:root {
  --night: #07111f;
  --night-raised: #0d1a2d;
  --surface: rgba(15, 29, 49, .92);
  --surface-solid: #102039;
  --surface-hover: #172b48;
  --line: rgba(174, 196, 225, .15);
  --line-strong: rgba(45, 212, 191, .5);
  --text: #f7fbff;
  --text-muted: #a9b8cc;
  --cyan: #5eead4;
  --cyan-deep: #14b8a6;
  --violet: #a78bfa;
  --green: #86efac;
  --shadow: 0 18px 50px rgba(0, 7, 18, .25);
}

body.nucleocampus-ui,
body {
  color-scheme: dark;
  background:
    radial-gradient(circle at 10% -5%, rgba(20,184,166,.13), transparent 29rem),
    radial-gradient(circle at 95% 8%, rgba(99,102,241,.12), transparent 32rem),
    #07111f;
}
body::before { opacity: .16; background-size: 64px 64px; }
.wrap { width: min(1180px, calc(100% - 40px)); max-width: none; padding: 20px 0 80px; }

header.top,
.nucleocampus-ui header.top {
  position: sticky;
  z-index: 40;
  top: 10px;
  min-height: 68px;
  margin-bottom: 38px;
  padding: 11px 14px;
  border-radius: 18px;
  border-color: rgba(174,196,225,.15);
  background: rgba(7,17,31,.88);
  box-shadow: 0 10px 32px rgba(0,7,18,.25);
  backdrop-filter: blur(22px) saturate(140%);
}
header.top .brand-logo { width: 42px; height: 42px; max-width: 42px; border-radius: 12px; }
header.top .brand { font-size: 1.12rem; letter-spacing: -.035em; }
header.top .brand-tagline { margin-top: 3px; font-size: .58rem; }
header.top nav { align-items: center; gap: 3px; }
header.top nav a { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 11px; border-radius: 10px; font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
header.top nav a[aria-current="page"] { color: #06201d; background: var(--cyan); }

h1 { max-width: 18ch; font-size: clamp(2.15rem, 5vw, 4.5rem); letter-spacing: -.055em; }
h2 { letter-spacing: -.035em; }
.lede { color: var(--text-muted); }
.kicker { color: var(--cyan); font-weight: 700; }

.card,
.nucleocampus-ui .card {
  border-radius: 18px;
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(17,34,58,.94), rgba(10,22,39,.96));
  box-shadow: var(--shadow);
}
.card::after { left: 24px; width: 42px; height: 3px; border-radius: 99px; background: var(--cyan); box-shadow: none; }
.role-grid { gap: 14px; }
.role-card,
.nucleocampus-ui .role-card { min-height: 175px; padding: 24px; border-radius: 18px; background: linear-gradient(145deg, rgba(18,37,62,.95), rgba(10,23,41,.96)); box-shadow: 0 10px 28px rgba(0,7,18,.18); }
.role-card:hover, .role-card:focus-visible { transform: translateY(-3px); }

label { color: #c8d5e5; font-family: var(--font-body); font-size: .76rem; font-weight: 750; letter-spacing: .01em; text-transform: none; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="file"], textarea, select {
  min-height: 48px; border-radius: 11px; background: rgba(3,11,23,.58);
}
.btn, .row-download-btn {
  min-height: 44px; border-radius: 11px; font-family: var(--font-body); font-size: .78rem; font-weight: 800; letter-spacing: 0; text-transform: none;
}
.btn:hover, .btn:focus-visible, .row-download-btn:hover, .row-download-btn:focus-visible { transform: translateY(-1px); }
.btn.secondary { background: rgba(94,234,212,.07); }
.admin-editor-heading { gap: 16px; }
.admin-list, .module-list { gap: 10px; }
.q, .message-entry, .lesson-item, .admin-row { border-color: var(--line); }
.site-footer { width: min(1180px, calc(100% - 40px)); max-width: none; }

/* Tables and dense management views remain usable on narrow screens. */
table { width: 100%; border-collapse: collapse; }
th { color: var(--text-muted); font-size: .72rem; text-align: left; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); }
.table-wrap, .admin-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Live classroom: video owns the viewport, controls stay reachable. */
.live-shell { width: min(1480px, calc(100% - 32px)) !important; padding: 14px 0 36px; }
.live-shell header.top { margin-bottom: 22px; }
.join-card { margin-top: clamp(28px, 8vh, 80px) !important; }
.classroom { grid-template-columns: minmax(0,1fr) minmax(280px,340px) !important; }
.video-grid { border-radius: 18px; }
.call-controls { bottom: 14px !important; border-radius: 999px !important; box-shadow: 0 16px 45px rgba(0,0,0,.38); }
.chat-board { box-shadow: none; }

@media (max-width: 820px) {
  .wrap { width: min(100% - 24px, 680px); padding-top: 10px; }
  header.top, .nucleocampus-ui header.top { top: 6px; align-items: flex-start; margin-bottom: 26px; padding: 10px 12px; }
  header.top nav { max-width: 62%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  header.top nav::-webkit-scrollbar { display: none; }
  header.top nav a { flex: 0 0 auto; min-height: 42px; padding-inline: 10px; }
  header.top .brand-tagline { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .role-grid { grid-template-columns: 1fr; }
  .card { padding: 20px 17px; }
  .admin-editor-heading { align-items: flex-start; flex-direction: column; }
  .admin-editor-heading .btn { margin-top: 0; }
  .profile-strip { align-items: flex-start; flex-wrap: wrap; }
  .site-footer { width: calc(100% - 24px); }
  .classroom { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .wrap { width: calc(100% - 18px); padding-bottom: 64px; }
  header.top, .nucleocampus-ui header.top { min-height: 60px; border-radius: 15px; }
  header.top .brand-logo { width: 38px; height: 38px; }
  header.top .brand { font-size: 1rem; }
  header.top .brand-tagline { display: none; }
  header.top nav { max-width: 58%; }
  h1 { font-size: clamp(2rem, 11vw, 3rem); }
  p.lede { margin-bottom: 24px; }
  .card { margin-bottom: 14px; border-radius: 16px; }
  .role-card, .nucleocampus-ui .role-card { min-height: 0; padding: 20px; }
  .btn { min-height: 46px; }
  .live-shell { width: calc(100% - 14px) !important; }
  .live-head { padding-inline: 4px; }
  .video-tile.featured, .video-tile.featured video { min-height: min(58vh, 430px) !important; }
  .call-controls { display: grid !important; grid-template-columns: repeat(4, 1fr); bottom: 6px !important; gap: 6px !important; padding: 8px !important; border-radius: 18px !important; }
  .control-button { width: 100%; min-width: 0; grid-template-columns: 1fr !important; padding: 5px !important; }
  .control-icon { margin: auto; }
  .recording-quality { grid-column: 1/-1; width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
select option { color: var(--text); background: var(--surface-solid); }
input::placeholder, textarea::placeholder { color: #7383a1; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(103,232,249,.14), 0 0 20px rgba(34,211,238,.08); background: rgba(10, 19, 37, .72); }

.btn, .row-download-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; margin-top: 18px;
  color: #06121d; font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .07em; text-decoration: none; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 10px; background: linear-gradient(115deg, var(--cyan), #a5f3fc); box-shadow: 0 8px 19px rgba(34,211,238,.18); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover, .btn:focus-visible, .row-download-btn:hover, .row-download-btn:focus-visible { color: #06121d; filter: brightness(1.08); box-shadow: 0 12px 26px rgba(34,211,238,.28); transform: translateY(-2px); }
.btn:disabled { opacity: .46; box-shadow: none; cursor: not-allowed; transform: none; }
.btn.secondary, .row-download-btn { color: var(--cyan); border-color: rgba(103,232,249,.38); background: rgba(103,232,249,.07); box-shadow: none; }
.btn.secondary:hover { color: #d8fcff; border-color: var(--cyan); background: rgba(103,232,249,.13); }
.row-download-btn { min-height: 31px; padding: 5px 9px; margin-top: 0; font-size: .66rem; }
.is-fetching { position: relative; gap: 8px; pointer-events: none; opacity: .78; cursor: wait !important; }
.is-fetching::before { content: ""; width: .84em; height: .84em; flex: 0 0 .84em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: control-fetch-spin .7s linear infinite; }
.fetching-note { display: inline-flex; align-items: center; gap: 9px; }
.fetching-note::before { content: ""; width: .88em; height: .88em; border: 2px solid var(--cyan); border-bottom-color: transparent; border-radius: 50%; animation: control-fetch-spin .7s linear infinite; }
@keyframes control-fetch-spin { to { transform: rotate(360deg); } }

.q { padding: 22px 0; border-top: 1px solid var(--line); }
.q:first-child { padding-top: 0; border-top: 0; }
.q .qnum { margin-right: 6px; color: var(--cyan); font-family: var(--font-mono); font-size: .81rem; }
.q .qmarks { float: right; padding: 3px 8px; color: var(--violet); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .03em; border: 1px solid rgba(167,139,250,.3); border-radius: 100px; background: rgba(167,139,250,.08); }
.q .qtext { margin-bottom: 13px; font-weight: 600; }
.q img { display: block; max-width: min(100%, 600px); margin: 15px 0; border: 1px solid var(--line); border-radius: 12px; }
.option-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 5px 0; border: 1px solid transparent; border-radius: 9px; transition: background .15s ease, border-color .15s ease; }
.option-row:hover { border-color: var(--line); background: rgba(103,232,249,.035); }
.option-row input { width: auto; accent-color: var(--cyan); }
.option-row label { margin: 0; color: var(--text); font-family: var(--font-body); font-size: .94rem; font-weight: 400; letter-spacing: 0; text-transform: none; cursor: pointer; }

.badge { display: inline-block; padding: 4px 9px; color: var(--text-muted); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 100px; }
.badge.pending { color: #fbbf24; background: rgba(251,191,36,.08); }
.badge.done { color: var(--green); background: rgba(94,234,212,.08); }
.score-stamp { display: inline-block; padding: 10px 18px; color: var(--cyan); font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 3.1rem); font-weight: 700; letter-spacing: -.06em; border: 1px solid var(--cyan); border-radius: 13px; background: rgba(34,211,238,.06); box-shadow: inset 0 0 28px rgba(34,211,238,.08), 0 0 28px rgba(34,211,238,.16); }

table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .89rem; border: 1px solid var(--line); border-radius: 12px; }
th, td { padding: 12px 13px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--text-muted); font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: rgba(4,9,20,.34); }
tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; transition: background .15s ease; }
tr.clickable:hover { background: rgba(103,232,249,.07); }

.msg { margin-top: 16px; padding: 12px 14px; font-family: var(--font-mono); font-size: .78rem; border: 1px solid; border-radius: 11px; }
.msg.error { color: #fecdd3; border-color: rgba(251,113,133,.48); background: rgba(190,24,93,.14); }
.msg.ok { color: #b9fff2; border-color: rgba(94,234,212,.42); background: rgba(13,148,136,.13); }
.muted { color: var(--text-muted); font-size: .88rem; }
.hidden { display: none !important; }
code.share-link { display: block; padding: 12px 14px; margin-top: 9px; overflow-wrap: anywhere; color: #c4f9ff; font-family: var(--font-mono); font-size: .78rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,16,.46); }
.product-story { max-width: 760px; margin: 0 0 30px; padding: 17px 19px; color: #c8d6ef; border-left: 3px solid var(--cyan); border-radius: 0 13px 13px 0; background: rgba(103,232,249,.055); }
.product-story strong { color: var(--text); }
.auth-switch { display: flex; gap: 8px; margin: 0 0 22px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: rgba(3,7,18,.34); }
.auth-switch button { flex: 1; min-height: 44px; padding: 9px 12px; color: var(--text-muted); border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.auth-switch button.active { color: #06121d; font-weight: 700; background: var(--cyan); }
.auth-help { margin-top: 14px; color: var(--text-muted); font-size: .86rem; }
.required-note { margin: -4px 0 16px; color: var(--text-muted); font-size: .82rem; }
details { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3,7,18,.25); }
summary { color: var(--cyan); font-family: var(--font-mono); font-size: .76rem; cursor: pointer; }
.site-footer { max-width: 980px; margin: 14px auto 0; padding: 25px 24px 38px; color: var(--text-muted); font-size: .82rem; border-top: 1px solid var(--line); }
.site-footer strong { color: var(--text); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.site-footer a { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; }
.trust-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 28px 0; }
.trust-item { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(18,27,48,.58); }
.trust-item strong { display: block; margin-bottom: 5px; color: var(--text); }
.skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: 9px 12px; color: #06121d; background: var(--cyan); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.experience-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.experience-nav a[aria-current="page"] { color: var(--cyan); background: rgba(103,232,249,.1); }
.safety-banner { margin: 0 0 18px; padding: 14px 16px; color: #d8e6fa; border: 1px solid rgba(251,191,36,.35); border-radius: 13px; background: rgba(120,73,7,.16); }
.safety-banner strong { color: #fde68a; }
.loading-skeleton { min-height: 110px; position: relative; overflow: hidden; border-radius: 16px; background: rgba(148,163,184,.08); }
.loading-skeleton::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transform: translateX(-100%); animation: skeleton-sweep 1.2s infinite; }
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
.dashboard-priority { margin-bottom: 22px; padding: 20px; border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(135deg,rgba(14,42,70,.86),rgba(31,21,64,.78)); }
.dashboard-priority h3 { margin-bottom: 5px; }
.progress-pill { display: inline-flex; margin-top: 7px; padding: 4px 9px; color: var(--green); font: .7rem var(--font-mono); border: 1px solid rgba(94,234,212,.35); border-radius: 999px; }
.contact-reveal { min-height: 36px; margin-top: 0; }
.moderation-note { padding: 12px 14px; color: var(--text-muted); font-size: .82rem; border: 1px solid var(--line); border-radius: 11px; background: rgba(3,7,18,.27); }
.retry-button { margin-left: 8px; color: var(--cyan); border: 0; background: transparent; text-decoration: underline; cursor: pointer; }
.market-filter-row { display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) auto; align-items: center; gap: 10px; flex: 1 0 100%; width: 100%; }
.market-filter-row input { width: 100%; }
.market-filter-row .check-label { margin: 0; white-space: nowrap; }
video { width: 100%; display: block; margin: 15px 0; border: 1px solid var(--line); border-radius: 14px; background: #02050c; box-shadow: 0 15px 34px rgba(0,0,0,.28); }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.admin-list { display: grid; gap: 9px; margin-top: 18px; }
.module-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 18px; }
.module-card { display: grid; gap: 5px; min-height: 100px; padding: 16px; color: var(--text); text-align: left; border: 1px solid var(--line); border-radius: 13px; background: rgba(3, 7, 18, .3); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.module-card strong { color: var(--cyan); font-family: var(--font-display); font-size: 1.12rem; }
.module-card span { color: var(--text-muted); font-family: var(--font-mono); font-size: .7rem; }
.module-card:hover, .module-card:focus-visible { border-color: var(--line-strong); background: rgba(103,232,249,.07); transform: translateY(-3px); }
.admin-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px; color: var(--text); text-align: left; border: 1px solid var(--line); border-radius: 11px; background: rgba(3, 7, 18, .3); cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.admin-list-item:hover, .admin-list-item:focus-visible { border-color: var(--line-strong); background: rgba(103,232,249,.07); }
.admin-list-item strong, .admin-list-item small { display: block; }
.admin-list-item strong { font-size: .88rem; }
.admin-list-item small { margin-top: 3px; color: var(--text-muted); font-family: var(--font-mono); font-size: .66rem; }
.admin-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.admin-editor-heading .btn { flex: 0 0 auto; margin-top: 0; }
.profile-strip { display: flex; align-items: center; gap: 14px; }
.profile-strip .btn { margin: 0 0 0 auto; }
.profile-avatar { width: 54px; height: 54px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 18px rgba(34,211,238,.18); }
.check-label { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-family: var(--font-body); font-size: .86rem; letter-spacing: 0; text-transform: none; }
.check-label input { width: auto; min-height: auto; accent-color: var(--cyan); }
.json-editor { min-height: 360px; font-family: var(--font-mono); font-size: .78rem; line-height: 1.55; }
#deleteBtn { color: #ffd6de; border-color: rgba(251,113,133,.48); background: rgba(190,24,93,.16); }
#deleteBtn:hover { color: #fff; border-color: var(--danger); background: rgba(190,24,93,.28); }

@media (max-width: 640px) {
  html, body { width: 100%; min-width: 0; }
  .wrap { width: 100%; max-width: 100%; padding: 18px 15px 60px; }
  header.top { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 31px; padding: 13px; border-radius: 14px; }
  header.top nav a { padding: 5px 7px; }
  h1 { font-size: clamp(2.05rem, 12vw, 3.2rem); }
  .role-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .profile-strip { align-items: flex-start; flex-wrap: wrap; }
  .profile-strip .btn { margin-left: 0; }
  .role-card { min-height: 176px; }
  .card { border-radius: 15px; }
  .card, .role-card { width: 100%; min-width: 0; padding: 20px; }
  input, textarea, select, button { max-width: 100%; min-width: 0; }
  .trust-grid { grid-template-columns: 1fr; }
  .site-footer { padding: 22px 15px 32px; }
  .market-filter-row { grid-template-columns: 1fr; }
  .market-filter-row .check-label { white-space: normal; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}