:root {
  --platform-bg: #030d14;
  --platform-panel: rgba(5, 24, 35, .96);
  --platform-panel-2: #0b2533;
  --platform-line: rgba(116, 195, 222, .22);
  --platform-cyan: #18dbef;
  --platform-blue: #0b82c7;
  --platform-orange: #ff8a1f;
  --platform-text: #eefaff;
  --platform-muted: #9cb6c1;
  --platform-success: #53d474;
}

.platform-auth {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(420px, .8fr);
  min-height: 100dvh;
  color: var(--platform-text);
  background: #020a10;
}

.auth-visual {
  position: relative;
  display: flex;
  min-height: 100%;
  padding: clamp(28px, 5vw, 80px);
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(100deg, rgba(1, 14, 22, .3), rgba(1, 14, 22, .85)), url('./industrial-campus-realistic.webp') center / cover;
}

.auth-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 30%, rgba(17, 218, 238, .2), transparent 35%), linear-gradient(0deg, rgba(0, 7, 12, .84), transparent 62%);
  pointer-events: none;
}

.auth-brand,
.auth-promise {
  position: relative;
  z-index: 1;
}

.auth-brand,
.instructor-brand {
  display: flex;
  gap: 14px;
  align-items: center;
  text-transform: uppercase;
}

.auth-brand > span,
.instructor-brand > span {
  display: grid;
  width: 54px;
  height: 54px;
  border: 1px solid #14d9ed;
  border-radius: 15px;
  place-items: center;
  color: #001118;
  font-weight: 1000;
  background: #14d9ed;
  box-shadow: 0 0 30px rgba(20, 217, 237, .32);
}

.auth-brand div,
.instructor-brand div { display: grid; }
.auth-brand strong { font-size: 1.25rem; }
.auth-brand b { color: var(--platform-cyan); letter-spacing: .18em; }

.auth-promise { max-width: 680px; }
.auth-promise small,
.auth-card-heading > span,
.instructor-heading small {
  color: var(--platform-cyan);
  font-weight: 900;
  letter-spacing: .14em;
}
.auth-promise h1 { max-width: 620px; margin: 14px 0; font-size: clamp(2.4rem, 5vw, 5.3rem); line-height: .98; letter-spacing: -.045em; }
.auth-promise p { max-width: 620px; margin: 0; color: #c1d8df; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.65; }

.auth-card {
  display: flex;
  width: min(100%, 580px);
  height: 100dvh;
  padding: clamp(30px, 6vw, 88px);
  overflow: auto;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(145deg, #071923, #030d14);
  border-left: 1px solid rgba(125, 210, 230, .2);
}

.auth-card-heading h2 { margin: 8px 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; }
.auth-card-heading p { margin: 0 0 26px; color: var(--platform-muted); line-height: 1.6; }
.auth-back,
.platform-link { align-self: flex-start; border: 0; color: var(--platform-cyan); background: transparent; cursor: pointer; }
.auth-back { margin-bottom: 34px; font-weight: 800; }
.platform-link { margin-top: 18px; padding: 0; font-weight: 800; }
.platform-link.subtle { margin-top: 12px; color: var(--platform-muted); font-weight: 600; }

.platform-form { display: grid; gap: 16px; }
.platform-form label { display: grid; gap: 7px; color: #c6dbe2; font-size: .86rem; font-weight: 800; }
.platform-form input,
.platform-form select,
.platform-form textarea,
.instructor-heading select {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(123, 189, 210, .3);
  border-radius: 10px;
  outline: 0;
  color: var(--platform-text);
  background: #0a202c;
  font: inherit;
}
.platform-form textarea { resize: vertical; line-height: 1.5; }
.platform-form input:focus,
.platform-form select:focus,
.platform-form textarea:focus { border-color: var(--platform-cyan); box-shadow: 0 0 0 3px rgba(24, 219, 239, .12); }
.platform-form label small { color: var(--platform-muted); font-weight: 500; }
.platform-form.busy { opacity: .72; }
.platform-primary {
  min-height: 45px;
  padding: 11px 20px;
  border: 0;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg, #0786c7, #04bfcf);
  box-shadow: 0 10px 28px rgba(0, 143, 202, .22);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.platform-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.platform-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.form-error { min-height: 1.25em; margin: 0; color: #ff9a91; font-size: .84rem; }
.auth-warning,
.privacy-note,
.message-disclosure {
  padding: 14px;
  border: 1px solid rgba(255, 174, 73, .34);
  border-radius: 10px;
  color: #ffce8b;
  background: rgba(129, 68, 7, .2);
  line-height: 1.5;
}
.auth-warning { margin-bottom: 20px; }

.platform-toast {
  position: fixed;
  z-index: 12000;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 48px));
  padding: 14px 18px;
  border: 1px solid var(--platform-line);
  border-radius: 12px;
  color: white;
  background: #102c3a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.platform-toast.success { border-color: rgba(83, 212, 116, .5); }
.platform-toast.warning { border-color: rgba(255, 174, 73, .5); }

.platform-student-dock {
  position: fixed;
  z-index: 9100;
  top: 90px;
  right: 22px;
  display: flex;
  gap: 7px;
  padding: 8px;
  align-items: center;
  border: 1px solid rgba(88, 191, 221, .32);
  border-radius: 14px;
  color: white;
  background: rgba(2, 18, 27, .92);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px);
}
.platform-student-dock button { padding: 9px 11px; border: 1px solid transparent; border-radius: 8px; color: #cce5ec; background: transparent; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.platform-student-dock button:hover { border-color: rgba(24, 219, 239, .4); color: white; background: rgba(24, 219, 239, .1); }
.dock-user { display: grid; min-width: 120px; padding: 0 9px; }
.dock-user b { font-size: .83rem; }
.dock-user small { overflow: hidden; color: var(--platform-muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.dock-logout { color: #ffaaa4 !important; }

.platform-side-panel {
  position: fixed;
  z-index: 9200;
  top: 18px;
  right: 18px;
  width: min(500px, calc(100vw - 36px));
  height: calc(100dvh - 36px);
  overflow: hidden;
  color: var(--platform-text);
  background: rgba(3, 20, 30, .98);
  border: 1px solid rgba(94, 194, 222, .35);
  border-radius: 18px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .62);
  backdrop-filter: blur(20px);
}
.side-panel-header { display: flex; padding: 22px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--platform-line); }
.side-panel-header div { display: grid; }
.side-panel-header small { color: var(--platform-cyan); font-weight: 800; letter-spacing: .08em; }
.side-panel-header h2 { margin: 3px 0 0; }
.side-panel-header button { width: 38px; height: 38px; border: 1px solid var(--platform-line); border-radius: 50%; color: white; background: transparent; font-size: 1.5rem; cursor: pointer; }
.side-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 14px; border-bottom: 1px solid var(--platform-line); }
.side-tabs button { padding: 10px; border: 0; border-bottom: 2px solid transparent; color: var(--platform-muted); background: transparent; font-weight: 800; cursor: pointer; }
.side-tabs button.active { border-color: var(--platform-cyan); color: white; }
.side-panel-content { height: calc(100% - 132px); padding: 18px; overflow: auto; }
.privacy-note { margin-bottom: 15px; border-color: rgba(24, 219, 239, .28); color: #bceaf0; background: rgba(7, 109, 128, .14); }
.classmate-list,
.feedback-list,
.message-list { display: grid; gap: 10px; }
.classmate-card { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; padding: 14px; align-items: center; border: 1px solid var(--platform-line); border-radius: 12px; background: rgba(11, 38, 52, .72); }
.classmate-card > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #021016; background: var(--platform-cyan); font-weight: 1000; }
.classmate-card > div { display: grid; gap: 4px; }
.classmate-card small,
.classmate-card b { color: var(--platform-muted); font-size: .73rem; font-weight: 600; }
.classmate-card progress { width: 100%; height: 5px; accent-color: var(--platform-cyan); }
.classmate-card button { border: 1px solid var(--platform-line); border-radius: 8px; color: var(--platform-cyan); background: transparent; cursor: pointer; }
.classmate-card em { color: var(--platform-success); font-size: .75rem; font-style: normal; font-weight: 900; }
.message-disclosure { margin-bottom: 14px; border-color: var(--platform-line); color: #bfd5dc; background: rgba(10, 58, 74, .25); }
.message-form { display: grid; gap: 12px; margin-bottom: 22px; }
.message-form label { display: grid; gap: 6px; color: var(--platform-muted); font-size: .8rem; font-weight: 800; }
.message-form select,
.message-form textarea { padding: 11px; border: 1px solid var(--platform-line); border-radius: 9px; color: white; background: #0b2734; font: inherit; }
.message-card,
.feedback-list article { padding: 13px 14px; border: 1px solid var(--platform-line); border-radius: 11px; background: rgba(9, 33, 45, .78); }
.message-card.own { border-color: rgba(24, 219, 239, .35); background: rgba(4, 91, 111, .24); }
.message-card small,
.feedback-list small { color: var(--platform-muted); font-size: .7rem; }
.message-card p,
.feedback-list p { margin: 6px 0 0; line-height: 1.45; white-space: pre-wrap; }
.feedback-list b { display: inline-block; margin-top: 10px; color: var(--platform-cyan); }

body.platform-instructor-open { overflow: hidden; background: #041018; }
body.platform-instructor-open > #app,
body.platform-instructor-open > .world-toggle,
body.platform-instructor-open > .platform-student-dock { display: none !important; }
.platform-instructor {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  grid-template-columns: 260px 1fr;
  color: var(--platform-text);
  background: radial-gradient(circle at 90% 0, rgba(13, 111, 140, .16), transparent 30%), #041018;
}
.instructor-nav { display: flex; padding: 22px 16px; flex-direction: column; border-right: 1px solid var(--platform-line); background: rgba(3, 17, 25, .96); }
.instructor-brand { margin: 0 6px 34px; }
.instructor-brand > span { width: 40px; height: 40px; border-radius: 11px; font-size: .85rem; }
.instructor-brand strong { font-size: .8rem; }
.instructor-brand small { color: var(--platform-cyan); font-size: .66rem; }
.instructor-nav > button { padding: 13px; border: 0; border-radius: 9px; color: #b6ccd4; background: transparent; text-align: left; font: inherit; font-weight: 800; cursor: pointer; }
.instructor-nav > button:hover,
.instructor-nav > button.active { color: white; background: rgba(24, 219, 239, .1); }
.instructor-account { display: grid; gap: 4px; margin-top: auto; padding: 14px; border: 1px solid var(--platform-line); border-radius: 12px; }
.instructor-account small { color: var(--platform-muted); }
.instructor-account button { margin-top: 8px; border: 0; color: #ffaaa4; background: transparent; text-align: left; cursor: pointer; }
.instructor-main { padding: clamp(24px, 4vw, 58px); overflow: auto; }
.instructor-heading { display: flex; gap: 30px; margin-bottom: 28px; align-items: flex-start; justify-content: space-between; }
.instructor-heading h1 { margin: 5px 0; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.04em; }
.instructor-heading p { margin: 0; color: var(--platform-muted); }
.instructor-heading select { width: min(320px, 100%); }
.metric-row,
.student-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.metric-row article,
.student-metrics article { display: grid; padding: 20px; border: 1px solid var(--platform-line); border-radius: 14px; background: linear-gradient(145deg, rgba(12, 42, 56, .82), rgba(4, 25, 35, .82)); }
.metric-row span,
.student-metrics span { color: var(--platform-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.metric-row strong,
.student-metrics strong { margin-top: 8px; color: white; font-size: 2rem; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.class-card { min-height: 190px; padding: 22px; border: 1px solid var(--platform-line); border-radius: 16px; color: white; background: linear-gradient(145deg, rgba(12, 45, 60, .92), rgba(5, 26, 36, .92)); text-align: left; cursor: pointer; }
.class-card:hover { border-color: var(--platform-cyan); transform: translateY(-2px); }
.class-card small { color: var(--platform-cyan); font-weight: 900; letter-spacing: .1em; }
.class-card h2 { margin: 14px 0 6px; }
.class-card p { color: var(--platform-muted); }
.class-card span { display: block; margin-top: 26px; color: var(--platform-cyan); font-weight: 900; }
.platform-dialog { width: min(500px, calc(100vw - 32px)); padding: 26px; border: 1px solid var(--platform-line); border-radius: 16px; color: white; background: #071c27; }
.platform-dialog::backdrop { background: rgba(0, 5, 8, .8); backdrop-filter: blur(5px); }
.platform-dialog form > div { display: flex; gap: 10px; justify-content: flex-end; }
.platform-dialog form > div button:not(.platform-primary) { border: 0; color: var(--platform-muted); background: transparent; cursor: pointer; }
.instructor-back { display: block; margin-bottom: 12px; padding: 0; border: 0; color: var(--platform-cyan); background: transparent; font-weight: 800; cursor: pointer; }
.copy-code { padding: 11px 16px; border: 1px solid var(--platform-line); border-radius: 9px; color: var(--platform-cyan); background: rgba(10, 45, 59, .6); cursor: pointer; }
.classroom-layout { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(360px, .8fr); gap: 24px; }
.instructor-student-list { display: grid; gap: 10px; }
.instructor-student-list > button { display: grid; grid-template-columns: 44px 1fr auto; gap: 13px; padding: 15px; align-items: center; border: 1px solid var(--platform-line); border-radius: 12px; color: white; background: rgba(8, 33, 45, .8); text-align: left; cursor: pointer; }
.instructor-student-list > button:hover { border-color: var(--platform-cyan); }
.instructor-student-list > button > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #021016; background: var(--platform-cyan); font-weight: 1000; }
.instructor-student-list > button > div { display: grid; gap: 5px; }
.instructor-student-list small { color: var(--platform-muted); }
.instructor-student-list progress { width: 100%; height: 5px; accent-color: var(--platform-cyan); }
.instructor-messages,
.message-center,
.student-detail-grid > section { padding: 20px; border: 1px solid var(--platform-line); border-radius: 15px; background: rgba(5, 27, 38, .78); }
.instructor-thread { max-height: 42vh; overflow: auto; }
.student-metrics { grid-template-columns: repeat(4, 1fr); }
.student-detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 18px; }
.student-results { overflow: auto; }
.student-results table { width: 100%; border-collapse: collapse; }
.student-results th,
.student-results td { padding: 10px; border-bottom: 1px solid var(--platform-line); color: #cfe1e7; text-align: left; font-size: .8rem; }
.student-results th { color: var(--platform-muted); }
.ladder-review,
.activity-review { min-height: 260px; }
.ladder-snapshot { display: grid; gap: 10px; margin-top: 12px; overflow: auto; }
.ladder-snapshot article { min-width: 460px; padding: 12px; border: 1px solid var(--platform-line); border-radius: 9px; background: #ecf4f6; color: #0a2732; }
.snapshot-rung { display: flex; min-height: 55px; margin: 8px 0; align-items: center; border-left: 4px solid #174c60; border-right: 4px solid #174c60; }
.snapshot-rung i { position: relative; display: inline-grid; min-width: 75px; color: #123c4b; place-items: center; font-style: normal; white-space: nowrap; }
.snapshot-rung em { color: #5a7078; font-size: .65rem; font-style: normal; }
.snapshot-output { margin-left: auto; }
.activity-list { display: grid; }
.activity-list article { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--platform-line); }
.activity-list article > span { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--platform-cyan); box-shadow: 0 0 12px rgba(24, 219, 239, .6); }
.activity-list article div { display: grid; gap: 4px; }
.activity-list small { color: var(--platform-muted); }
.empty-state { padding: 24px; border: 1px dashed var(--platform-line); border-radius: 12px; color: var(--platform-muted); text-align: center; }
.empty-state.wide { grid-column: 1 / -1; padding: 60px 20px; }
.platform-loading { display: grid; min-height: 260px; color: var(--platform-muted); place-items: center; }

@media (max-width: 980px) {
  .platform-auth { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-card { width: auto; margin: auto; border-left: 0; }
  .platform-instructor { grid-template-columns: 76px 1fr; }
  .instructor-nav { padding-inline: 10px; }
  .instructor-brand div,
  .instructor-nav > button,
  .instructor-account b,
  .instructor-account small { font-size: 0; }
  .instructor-nav > button::first-letter { font-size: 1rem; }
  .classroom-layout,
  .student-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .platform-student-dock { top: auto; right: 8px; bottom: 8px; left: 8px; justify-content: center; }
  .dock-user { display: none; }
  .platform-student-dock button { flex: 1; padding-inline: 5px; font-size: .7rem; }
  .platform-side-panel { inset: 8px; width: auto; height: calc(100dvh - 16px); }
  .platform-instructor { display: block; overflow: auto; }
  .instructor-nav { position: sticky; z-index: 2; top: 0; display: flex; height: 62px; padding: 8px; flex-direction: row; align-items: center; border: 0; border-bottom: 1px solid var(--platform-line); }
  .instructor-brand { margin: 0 auto 0 0; }
  .instructor-account { display: flex; margin: 0; padding: 0; border: 0; }
  .instructor-main { padding: 20px 14px 50px; overflow: visible; }
  .instructor-heading { flex-direction: column; }
  .metric-row,
  .student-metrics { grid-template-columns: repeat(2, 1fr); }
  .class-grid { grid-template-columns: 1fr; }
  .student-results table { min-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-primary:hover,
  .class-card:hover { transform: none; }
}