@font-face {
  font-family:"Product Sans";
  src:url("../fonts/ProductSans-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:"Product Sans";
  src:url("../fonts/ProductSans-Medium.ttf") format("truetype");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}

@font-face {
  font-family:"Product Sans Student";
  src:url("../fonts/ProductSans-Bold.ttf") format("truetype");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}

:root {
  --navy-950:#06142d;
  --navy-900:#081d3d;
  --navy-800:#0d2d59;
  --navy-700:#154576;
  --ink:#10233f;
  --muted:#708198;
  --red:#f4243e;
  --red-dark:#c91028;
  --blue:#05b8e8;
  --blue-dark:#008abf;
  --gold:#ffc62d;
  --green:#25c983;
  --panel-border:rgba(255,255,255,.13);
  --shadow:0 22px 60px rgba(1,11,31,.22);
  --radius-xl:26px;
  --radius-lg:18px;
  font-family:"Product Sans",Arial,sans-serif;
  color-scheme:light;
}

* { box-sizing:border-box; }
html { font-synthesis-weight:none; }
h1,h2,h3,h4,h5,h6,b,strong,th { font-weight:500; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
  color:#f7fbff;
  background:
    radial-gradient(circle at 8% 0%,rgba(38,132,229,.27),transparent 32rem),
    radial-gradient(circle at 92% 5%,rgba(0,206,222,.14),transparent 30rem),
    linear-gradient(145deg,var(--navy-950),#09234a 55%,#06172f);
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(to bottom,#000,transparent 90%);
}
button,select,input,textarea { font:inherit; font-family:"Product Sans",Arial,sans-serif; }
button { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }

.app-shell {
  position:relative;
  z-index:1;
  width:100%;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:10px;
  padding:10px clamp(10px,1.7vw,28px) 12px;
}
.page-width { width:min(100%,1500px); margin-inline:auto; }

.top-panel {
  display:grid;
  grid-template-columns:clamp(112px,11vw,168px) minmax(0,1fr);
  gap:clamp(14px,2vw,28px);
  align-items:stretch;
  padding:10px 14px;
  border:1px solid var(--panel-border);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  box-shadow:0 15px 34px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
}
.brand-link {
  display:grid;
  place-items:center;
  min-width:0;
  border-radius:18px;
  text-decoration:none;
  transition:transform .2s ease,filter .2s ease;
}
.brand-link:hover { transform:translateY(-2px); filter:brightness(1.08); }
.brand-link img {
  display:block;
  width:min(100%,130px);
  max-height:118px;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.24));
}
.top-content { min-width:0; display:grid; grid-template-rows:auto auto; gap:9px; align-content:center; }
.title-block { min-width:0; text-align:left; padding-inline:2px; }
.title-block p { margin:0 0 3px; color:#88bde9; font-size:.62rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; }
.title-block h1 { margin:0; font-size:clamp(1.3rem,2.2vw,2rem); line-height:1; letter-spacing:-.04em; }

.control-deck {
  display:grid;
  grid-template-columns:minmax(190px,1.18fr) minmax(100px,.42fr) minmax(245px,1.08fr) auto auto 48px 48px;
  gap:9px;
  align-items:end;
  margin:0;
}
.field { min-width:0; }
.field label,.field-label { display:block; margin:0 0 5px 2px; color:#a9bdd7; font-size:.6rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.select-wrap { position:relative; }
.select-wrap::after { content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; border-right:2px solid #6f8199; border-bottom:2px solid #6f8199; transform:translateY(-70%) rotate(45deg); pointer-events:none; }
select {
  width:100%;
  height:44px;
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  border-radius:13px;
  outline:0;
  padding:0 40px 0 13px;
  color:var(--ink);
  background:linear-gradient(#fff,#f2f7fc);
  box-shadow:0 7px 16px rgba(0,0,0,.12),inset 0 1px 0 #fff;
  font-size:.78rem;
  font-weight:500;
  text-overflow:ellipsis;
}
select:focus { box-shadow:0 0 0 4px rgba(55,166,255,.2),0 7px 16px rgba(0,0,0,.12); }
.teacher-control {
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 0 0 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.17);
  border-radius:13px;
  background:rgba(255,255,255,.075);
}
.teacher-control strong,.teacher-control small { display:block; }
.teacher-control strong { font-size:.73rem; }
.teacher-control small { margin-top:2px; color:#a8b8cf; font-size:.58rem; font-weight:500; }
.switch { position:relative; display:inline-flex; width:64px; height:36px; flex:0 0 auto; margin-right:-1px; }
.switch input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.switch-track {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border:2px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:#4a515c;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.035);
  cursor:pointer;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.switch-track::after {
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 7px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.switch input:checked + .switch-track {
  border-color:#3eaeff;
  background-color:#3eaeff;
  box-shadow:inset 0 1px 3px rgba(0,83,154,.18),inset 0 0 0 1px rgba(255,255,255,.13),0 0 0 3px rgba(62,174,255,.10);
}
.switch input:checked + .switch-track::after { transform:translateX(28px); }
.switch input:focus-visible + .switch-track { outline:3px solid rgba(62,174,255,.28); outline-offset:2px; }
.switch input:disabled + .switch-track { opacity:.55; cursor:not-allowed; }
.button {
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:13px;
  padding:0 14px;
  cursor:pointer;
  white-space:nowrap;
  font-size:.7rem;
  font-weight:500;
  line-height:1;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.button svg { display:block; width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transform:translateY(1px); }
.button span { display:inline-flex; align-items:center; line-height:1; }
.button:hover:not(:disabled) { transform:translateY(-2px); }
.button:active:not(:disabled) { transform:translateY(1px) scale(.99); }
.button:disabled { opacity:.5; cursor:not-allowed; }
.button-primary { color:#08223f; background:linear-gradient(135deg,#ffe46f,var(--gold)); box-shadow:0 10px 22px rgba(255,194,35,.22),inset 0 1px 0 rgba(255,255,255,.72); }
.button-secondary { color:#f4f9ff; border:1px solid rgba(255,255,255,.18); background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.065)); box-shadow:0 9px 20px rgba(0,0,0,.13); }
#drawButton svg { transform:translateY(2px); }
#drawButtonText { display:inline-flex; align-items:center; line-height:1; }

.button-icon { width:48px; padding:0; color:#f4f9ff; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.085); }
.button-source { background:rgba(62,174,255,.12); }
.button-source svg { width:16px; height:16px; }

.classroom-card {
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg,#f8fcff 0%,#fffdf8 72%,#f5ead7 100%);
  box-shadow:var(--shadow),inset 0 1px 0 #fff;
}
.result-head {
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:8px 18px;
  border-bottom:1px solid rgba(16,45,82,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.66));
}
.result-title { min-width:0; display:flex; align-items:center; gap:10px; }
.result-title img { width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 6px 7px rgba(21,78,119,.18)); }
.result-title p { margin:0 0 2px; color:#3181b6; font-size:.55rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.result-title h2 { overflow:hidden; margin:0; font-size:clamp(.95rem,1.55vw,1.28rem); line-height:1.05; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }
.result-stats { display:flex; gap:7px; }
.result-stats div { min-width:82px; padding:6px 9px; border:1px solid rgba(18,56,97,.09); border-radius:11px; background:rgba(255,255,255,.72); text-align:center; box-shadow:0 6px 15px rgba(16,51,90,.05); }
.result-stats span,.result-stats strong { display:block; }
.result-stats span { color:#8190a3; font-size:.48rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; }
.result-stats strong { margin-top:2px; font-size:.73rem; }

.scene {
  min-height:0;
  display:grid;
  grid-template-rows:clamp(58px,11vh,95px) auto minmax(0,1fr);
  padding:0 18px 12px;
  background:
    linear-gradient(rgba(22,80,133,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,80,133,.032) 1px,transparent 1px);
  background-size:28px 28px;
}
.windows { width:min(60%,720px); min-width:480px; height:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 auto; }
.window { overflow:hidden; height:100%; border:4px solid #b9dbea; border-top:0; border-radius:0 0 13px 13px; background:#8feaff; box-shadow:0 9px 16px rgba(34,73,103,.12),inset 0 0 0 2px rgba(255,255,255,.65); }
.window img { width:100%; height:100%; display:block; object-fit:cover; }
.room-bar { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:5px 3px; }
.room-bar h3 { margin:0; font-size:.86rem; letter-spacing:-.02em; }
.room-bar p { margin:2px 0 0; color:#7a8899; font-size:.52rem; }
.status-pill { display:flex; align-items:center; gap:7px; padding:6px 9px; border:1px solid rgba(17,62,104,.09); border-radius:999px; color:#45647f; background:rgba(255,255,255,.72); font-size:.54rem; font-weight:500; }
.status-pill i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(37,201,131,.12); }
.classroom-card.is-sorting .status-pill i { background:#ffc72e; box-shadow:0 0 0 4px rgba(255,199,46,.15); animation:pulse .5s infinite alternate; }
@keyframes pulse { to { transform:scale(1.35); } }

.seating-stage {
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  padding:8px 14px 7px;
  border:1px solid rgba(15,55,97,.1);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.79),rgba(255,255,255,.48));
  box-shadow:inset 0 1px 0 #fff,0 12px 26px rgba(22,60,99,.06);
}
.seat-columns { min-height:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,4.2vw,62px); align-items:stretch; }
.seat-column { min-width:0; min-height:0; display:grid; grid-template-rows:18px repeat(var(--rows),minmax(24px,1fr)); gap:clamp(3px,.75vh,8px); }
.column-number { display:flex; align-items:center; justify-content:center; gap:6px; color:#8a97a7; font-size:.48rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.column-number::before,.column-number::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,rgba(31,69,108,.15)); }
.column-number::after { background:linear-gradient(90deg,rgba(31,69,108,.15),transparent); }
.seat-slot { position:relative; min-width:0; min-height:0; border-radius:9px; background:rgba(226,235,244,.43); box-shadow:inset 0 0 0 1px rgba(38,80,119,.08); }
.seat-slot.is-empty { border:1px dashed rgba(67,94,122,.18); background:rgba(232,238,245,.24); box-shadow:none; }
.seat-slot:focus,.teacher-slot:focus { outline:0; }
.seat-slot:focus-visible,.teacher-slot.is-enabled:focus-visible {
  outline:3px solid rgba(255,198,45,.98);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(255,198,45,.2),inset 0 0 0 1px rgba(255,255,255,.7);
}
.seat-slot:focus-visible .seat-picker-button,.teacher-slot.is-enabled:focus-visible .seat-picker-button {
  opacity:1;
  color:#10233f;
  background:rgba(255,255,255,.94);
  border-color:rgba(22,80,133,.24);
}
.seat-picker-button {
  position:absolute;
  z-index:8;
  right:3px;
  top:3px;
  width:22px;
  height:18px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.38);
  border-radius:6px;
  color:rgba(255,255,255,.82);
  background:rgba(6,20,45,.2);
  box-shadow:none;
  opacity:.3;
  cursor:pointer;
  transition:opacity .16s ease,background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.seat-picker-button svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.seat-slot.is-empty .seat-picker-button { color:#49637d; border-color:rgba(60,89,118,.16); background:rgba(255,255,255,.28); opacity:.2; }
.seat-slot:hover .seat-picker-button,.teacher-slot:hover .seat-picker-button,.seat-picker-button:focus-visible { opacity:1; color:#10233f; background:rgba(255,255,255,.94); border-color:rgba(22,80,133,.24); transform:translateY(-1px); }
.seat-picker-button:disabled { opacity:.12; cursor:not-allowed; transform:none; }

.student-card {
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:9px;
  padding:2px 7px 3px;
  color:#fff;
  text-align:center;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  box-shadow:0 6px 12px rgba(9,29,56,.16),inset 0 1px 0 rgba(255,255,255,.37),inset 0 -2px 0 rgba(0,0,0,.12);
  will-change:transform;
}
.student-card[draggable="true"] { cursor:grab; }
.student-card[draggable="true"]:active { cursor:grabbing; }
.student-card.is-dragging { opacity:.36; transform:scale(.96); }
.student-card.drag-disabled { cursor:default; }
.seat-slot.drag-over,.teacher-slot.drag-over {
  box-shadow:0 0 0 3px rgba(255,198,45,.8),0 0 0 7px rgba(255,198,45,.2),inset 0 0 0 1px rgba(255,255,255,.65);
}
.classroom-card.has-dragged-card .seat-slot,.classroom-card.has-dragged-card .teacher-slot.is-enabled { transition:box-shadow .12s ease,filter .12s ease; }
.classroom-card.has-dragged-card .seat-slot:hover,.classroom-card.has-dragged-card .teacher-slot.is-enabled:hover { filter:brightness(1.05); }
.student-card::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.2),transparent 30%,transparent 68%,rgba(255,255,255,.08)); pointer-events:none; }
.seat-column:nth-child(1) .student-card,.seat-column:nth-child(4) .student-card { background:linear-gradient(135deg,#ff344b,var(--red-dark)); }
.seat-column:nth-child(2) .student-card,.seat-column:nth-child(3) .student-card { background:linear-gradient(135deg,#11c5f1,var(--blue-dark)); }
.student-first,.student-last {
  position:relative;
  z-index:1;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"Product Sans Student","Product Sans",Arial,sans-serif;
  font-weight:500;
  -webkit-text-stroke:.2px currentColor;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}
.student-first { font-size:clamp(.88rem,1.2vw,1.15rem); line-height:.94; font-weight:500; letter-spacing:.01em; text-transform:uppercase; }
.student-last { margin-top:3px; font-size:clamp(.82rem,1.08vw,1.04rem); line-height:.94; font-weight:500; }
.student-card.long-name .student-first { font-size:clamp(.72rem,1vw,.94rem); }
.student-card.long-last .student-last { font-size:clamp(.68rem,.92vw,.88rem); }

.front-stage {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,4.2vw,62px);
  align-items:center;
  min-height:72px;
  margin-top:6px;
  padding-top:5px;
  border-top:1px dashed rgba(22,61,98,.15);
}
.teacher-zone { grid-column:1; min-width:0; width:100%; }
.front-label { display:block; margin:0 0 4px; color:#8592a1; font-size:.46rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.teacher-slot { position:relative; width:100%; height:32px; border-radius:9px; background:linear-gradient(145deg,#202938,#050a11); box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -2px 0 #000; }
.teacher-slot.is-reserved::before { content:"PROFE"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:.65rem; font-weight:500; letter-spacing:.08em; }
.teacher-slot .student-card { background:linear-gradient(145deg,#313a48,#070b11); flex-direction:column; justify-content:center; align-items:center; gap:0; padding:3px 29px 3px 8px; }
.teacher-slot .student-card::after { content:"PUESTO DEL PROFE"; position:absolute; right:28px; top:2px; color:rgba(255,255,255,.5); font-size:.27rem; font-weight:500; letter-spacing:.06em; }
.teacher-slot .student-first,.teacher-slot .student-last { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.teacher-slot .student-first { font-size:.68rem; line-height:.9; }
.teacher-slot .student-last { margin-top:2px; font-size:.62rem; line-height:.9; }
.teacher-slot .student-card.long-name .student-first,.teacher-slot .student-card.long-last .student-last { font-size:.56rem; }
.teacher-slot .seat-picker-button { top:7px; right:4px; opacity:.48; }
.door-zone { grid-column:2 / span 2; justify-self:center; display:flex; flex-direction:column; align-items:center; color:#8b7655; font-size:.43rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.door-zone img { display:block; width:42px; max-height:54px; object-fit:contain; filter:drop-shadow(0 7px 6px rgba(64,44,15,.18)); }
.orientation-zone { grid-column:4; align-self:center; padding:7px 9px; border:1px solid rgba(19,55,91,.09); border-radius:10px; background:rgba(255,255,255,.55); }
.orientation-zone strong,.orientation-zone span { display:block; }
.orientation-zone strong { color:#3e607d; font-size:.54rem; }
.orientation-zone span { margin-top:2px; color:#8895a4; font-size:.43rem; line-height:1.3; }

.classroom-card.is-sorting { box-shadow:0 25px 75px rgba(8,100,168,.28),inset 0 1px 0 #fff; }
.classroom-card.is-sorting .result-title img { animation:shake .13s linear infinite alternate; }
.classroom-card.is-sorting .window { animation:windowGlow .44s ease-in-out infinite alternate; }
@keyframes shake { from { transform:rotate(-4deg) translateX(-1px); } to { transform:rotate(4deg) translateX(1px); } }
@keyframes windowGlow { to { filter:saturate(1.2) brightness(1.04); } }
.final-flash { animation:finalFlash .55s cubic-bezier(.2,.8,.2,1); }
@keyframes finalFlash { 42% { box-shadow:0 28px 92px rgba(16,126,203,.34),inset 0 0 0 7px rgba(255,214,55,.31); } }

.modal-backdrop {
  position:fixed;
  z-index:80;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(2,10,25,.58);
  backdrop-filter:blur(8px);
}
.source-modal {
  position:relative;
  width:min(520px,100%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  padding:22px;
  color:#f7fbff;
  background:linear-gradient(145deg,rgba(12,36,76,.98),rgba(6,18,42,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.12);
}
.modal-close {
  position:absolute;
  right:13px;
  top:11px;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.07);
  cursor:pointer;
  font-size:1.25rem;
  line-height:1;
}
.modal-kicker { margin:0 0 4px; color:#88bde9; font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.source-modal h2 { margin:0; font-size:1.32rem; letter-spacing:-.035em; }
.modal-help { margin:7px 0 16px; color:#bfd0e4; font-size:.78rem; line-height:1.45; }
.source-form { display:grid; gap:8px; }
.source-form label { color:#a9bdd7; font-size:.62rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.source-form input,.source-form textarea {
  width:100%;
  border:1px solid rgba(255,255,255,.22);
  border-radius:13px;
  outline:0;
  padding:11px 12px;
  color:#10233f;
  background:#fff;
  box-shadow:inset 0 1px 0 #fff;
  font:500 .78rem "Product Sans",Arial,sans-serif;
}
.source-form textarea { resize:vertical; min-height:82px; line-height:1.35; font-weight:400; }
.source-form input::placeholder,.source-form textarea::placeholder { font-weight:400; }
.source-form input:focus,.source-form textarea:focus { box-shadow:0 0 0 4px rgba(55,166,255,.2); }
.source-error {
  margin:2px 0 0;
  padding:8px 10px;
  border-radius:10px;
  color:#fff;
  background:#f3374e;
  font-size:.72rem;
  font-weight:500;
}
.source-error--password { color:#fff; background:#f3374e; font-weight:500; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:7px; }
.modal-actions .button { min-width:118px; }

.source-wizard { min-height:390px; }
.source-progress {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:14px 0 20px;
  padding:0;
  list-style:none;
}
.source-progress li {
  position:relative;
  display:grid;
  place-items:center;
  gap:5px;
  color:#8199b5;
  font-size:.58rem;
  text-align:center;
}
.source-progress li::before {
  content:"";
  position:absolute;
  z-index:0;
  left:calc(50% + 18px);
  top:15px;
  width:calc(100% - 28px);
  height:1px;
  background:rgba(255,255,255,.15);
}
.source-progress li:last-child::before { display:none; }
.source-progress li span {
  position:relative;
  z-index:1;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#b6c7d9;
  background:#10284e;
  font-size:.7rem;
  font-weight:500;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.source-progress li small {
  font-size:.55rem;
  font-weight:400;
  letter-spacing:.04em;
}
.source-progress li.is-active span {
  border-color:#68c7ff;
  color:#071b35;
  background:#68c7ff;
  box-shadow:0 0 0 4px rgba(104,199,255,.13);
  transform:scale(1.05);
}
.source-progress li.is-active small { color:#e8f6ff; }
.source-progress li.is-complete span {
  border-color:#39d693;
  color:#05271c;
  background:#39d693;
}
.source-progress li.is-complete::before { background:rgba(57,214,147,.55); }

.source-step {
  min-height:230px;
  display:grid;
  align-content:center;
}
.source-step h2 { margin:0; font-size:1.32rem; letter-spacing:-.035em; }
.source-step-heading {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:2px;
}
.source-step-heading-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
  border-radius:11px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.source-step-heading-icon svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.source-step-heading--mail { color:#f7fbff; }
.source-step-heading--mail .source-step-heading-icon { color:#83d5ff; }
.source-step .modal-help strong { color:#fff; font-weight:500; }
.source-sending-step,.source-success-step { justify-items:center; text-align:center; }
.source-step-icon {
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 13px 30px rgba(0,0,0,.18);
}
.source-step-icon svg {
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.source-step-icon--mail { color:#83d5ff; }
.source-step-icon--success { color:#42d998; }
.source-spinner {
  width:28px;
  height:28px;
  margin-top:10px;
  border:3px solid rgba(255,255,255,.14);
  border-top-color:#68c7ff;
  border-radius:50%;
  animation:sourceSpin .75s linear infinite;
}
@keyframes sourceSpin { to { transform:rotate(360deg); } }

.source-countdown {
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:12px 0 4px;
  border:1px solid rgba(139,214,255,.26);
  border-radius:999px;
  padding:7px 11px;
  color:#dff4ff;
  background:rgba(104,199,255,.09);
  font-size:.72rem;
  line-height:1;
}
.source-sent-controls {
  width:max-content;
  max-width:100%;
  display:grid;
  grid-template-columns:max-content;
  justify-self:center;
  justify-items:center;
  gap:12px;
  margin-top:12px;
}
.source-sent-controls .source-countdown--sent {
  justify-self:center;
  margin:0;
}
.source-sent-controls .modal-actions {
  width:100%;
  justify-content:center;
  margin-top:0;
}
.source-countdown--code { justify-self:start; }
.source-countdown strong {
  min-width:46px;
  color:#8bd6ff;
  font-family:"Product Sans Student","Product Sans",Verdana,Tahoma,sans-serif;
  font-size:.88rem;
  font-weight:500;
  letter-spacing:.04em;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.source-countdown.is-expired {
  border-color:rgba(243,55,78,.56);
  color:#fff;
  background:rgba(243,55,78,.18);
}
.source-countdown.is-expired strong { color:#fff; }

.source-code-input {
  height:58px;
  padding-inline:16px !important;
  font-family:"Product Sans Student","Product Sans",Verdana,Tahoma,sans-serif !important;
  font-size:1.45rem !important;
  font-weight:500 !important;
  letter-spacing:.32em;
  text-align:center;
}
.source-resend {
  justify-self:start;
  border:0;
  padding:2px 0;
  color:#8bd6ff;
  background:transparent;
  cursor:pointer;
  font-size:.7rem;
  font-weight:400;
  text-decoration:underline;
  text-underline-offset:3px;
}
.source-resend:hover:not(:disabled) { color:#d9f3ff; }
.source-resend:disabled { opacity:.5; cursor:not-allowed; }
.source-success-step .modal-help { margin-bottom:0; }

@media (max-width:560px) {
  .source-modal { padding:20px 16px; }
  .source-progress { margin-top:12px; }
  .source-step { min-height:250px; }
  .source-code-input { font-size:1.25rem !important; letter-spacing:.24em; }
}

.seat-choice-modal {
  position:relative;
  width:min(560px,100%);
  max-height:min(680px,calc(100dvh - 36px));
  display:grid;
  grid-template-rows:auto auto auto auto auto minmax(160px,1fr) auto;
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  padding:22px;
  color:#f7fbff;
  background:linear-gradient(145deg,rgba(12,36,76,.985),rgba(6,18,42,.985));
  box-shadow:0 28px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
}
.seat-choice-modal h2 { margin:0; padding-right:42px; font-size:1.32rem; letter-spacing:-.035em; }
.picker-search-label { margin:0 0 6px; color:#a9bdd7; font-size:.62rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.picker-search-wrap { position:relative; margin-bottom:10px; }
.picker-search-wrap svg { position:absolute; z-index:1; left:12px; top:50%; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:#65809f; stroke-width:2; stroke-linecap:round; }
.picker-search-wrap input {
  width:100%;
  height:46px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:13px;
  outline:0;
  padding:0 13px 0 39px;
  color:#10233f;
  background:#fff;
  box-shadow:inset 0 1px 0 #fff;
  font:500 .82rem "Product Sans",Arial,sans-serif;
}
.picker-search-wrap input:focus { box-shadow:0 0 0 4px rgba(55,166,255,.22); }
.picker-options { min-height:0; overflow:auto; display:grid; align-content:start; gap:6px; padding:3px 4px 3px 1px; scrollbar-width:thin; scrollbar-color:rgba(139,190,232,.42) transparent; }
.picker-option {
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  padding:9px 11px;
  color:#eaf5ff;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  text-align:left;
  transition:background-color .12s ease,border-color .12s ease,transform .12s ease;
}
.picker-option span,.picker-option strong,.picker-option small { display:block; min-width:0; }
.picker-option span { flex:1; }
.picker-option strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.picker-option small { margin-top:3px; color:#9fb8d2; font-size:.66rem; }
.picker-option em { flex:0 0 auto; border-radius:999px; padding:4px 7px; color:#08223f; background:#ffd84c; font-size:.56rem; font-style:normal; font-weight:500; text-transform:uppercase; }
.picker-option.is-special { border-color:rgba(255,207,67,.2); background:rgba(255,198,45,.09); }
.picker-option.is-active,.picker-option:hover { border-color:rgba(86,183,255,.7); background:rgba(50,142,218,.25); transform:translateX(2px); }
.picker-option:focus { outline:0; }
.picker-no-results { margin:16px 0; padding:16px; border:1px dashed rgba(255,255,255,.17); border-radius:13px; color:#bcd0e5; font-size:.74rem; text-align:center; }
.picker-keyboard-help { margin:11px 0 0; color:#91a8c1; font-size:.62rem; text-align:center; }
.picker-keyboard-help kbd { display:inline-grid; place-items:center; min-width:22px; height:20px; margin-inline:2px; border:1px solid rgba(255,255,255,.17); border-bottom-width:2px; border-radius:5px; color:#eaf5ff; background:rgba(255,255,255,.08); font:500 .58rem "Product Sans",Arial,sans-serif; }

.toast { position:fixed; z-index:70; left:50%; bottom:18px; transform:translateX(-50%); max-width:min(560px,calc(100% - 28px)); padding:10px 15px; border:1px solid rgba(255,255,255,.33); border-radius:13px; color:#fff; background:rgba(8,28,60,.94); box-shadow:0 16px 40px rgba(0,0,0,.27); backdrop-filter:blur(10px); font-size:.7rem; font-weight:500; text-align:center; }
.confetti-layer { position:fixed; z-index:45; inset:0; overflow:hidden; pointer-events:none; }
.confetti-piece { position:absolute; top:-20px; width:8px; height:13px; border-radius:2px; animation:confettiFall 1.05s cubic-bezier(.14,.65,.35,1) forwards; }
@keyframes confettiFall { 0% { transform:translate3d(0,-20px,0) rotate(0deg); opacity:0; } 10% { opacity:1; } 100% { transform:translate3d(var(--drift),105vh,0) rotate(var(--spin)); opacity:.82; } }

@media (max-width:1120px) {
  .control-deck { grid-template-columns:minmax(170px,1.1fr) 105px minmax(225px,1fr) auto auto 42px 42px; gap:7px; }
  .button { padding-inline:10px; }
  .result-stats div { min-width:72px; }
}

@media (max-width:900px) {
  .app-shell { padding:8px; gap:8px; }
  .top-panel { grid-template-columns:92px minmax(0,1fr); gap:12px; padding:8px 10px; }
  .brand-link img { width:86px; max-height:92px; }
  .control-deck { grid-template-columns:1.3fr .55fr 1fr auto auto 40px 40px; }
  .teacher-control small { display:none; }
  .button { font-size:.62rem; }
  .windows { min-width:420px; width:65%; }
  .result-stats div:nth-child(3) { display:none; }
}

@media (max-width:720px) {
  .seat-choice-modal { padding:18px 14px 14px; max-height:calc(100dvh - 20px); }
  .picker-keyboard-help { display:none; }
  .top-panel { grid-template-columns:72px minmax(0,1fr); }
  .brand-link img { width:68px; }
  .title-block p { display:none; }
  .title-block h1 { font-size:1.12rem; }
  .control-deck { grid-template-columns:1.3fr .55fr auto auto 38px 38px; }
  .field-teacher { display:none; }
  .button-primary span { display:none; }
  .button-primary { width:44px; padding:0; }
  .button-secondary { font-size:0; width:44px; padding:0; }
  .button-secondary svg { width:18px; height:18px; }
  .result-title img { width:39px; height:39px; }
  .windows { min-width:0; width:76%; gap:8px; }
  .orientation-zone { display:none; }
  .front-stage { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .door-zone { grid-column:2 / span 2; }
}

@media (max-height:720px) {
  .app-shell { padding-top:7px; padding-bottom:8px; gap:7px; }
  .top-panel { padding-block:7px; }
  .brand-link img { max-height:88px; }
  .title-block h1 { font-size:1.35rem; }
  .control-deck { gap:7px; }
  select,.teacher-control,.button { height:40px; }
  .scene { grid-template-rows:58px 34px minmax(0,1fr); padding-bottom:8px; }
  .result-head { min-height:55px; padding-block:6px; }
  .result-title img { width:40px; height:40px; }
  .seating-stage { padding-top:6px; }
  .seat-column { grid-template-rows:15px repeat(var(--rows),minmax(20px,1fr)); gap:3px; }
  .front-stage { min-height:60px; margin-top:4px; }
  .teacher-slot { height:28px; }
  .teacher-slot .student-card { gap:0; padding:2px 27px 2px 7px; }
  .teacher-slot .student-first { font-size:.61rem; }
  .teacher-slot .student-last { font-size:.56rem; }
  .teacher-slot .student-card.long-name .student-first,.teacher-slot .student-card.long-last .student-last { font-size:.5rem; }
  .student-first { font-size:clamp(.8rem,1.08vw,1rem); }
  .student-last { font-size:clamp(.74rem,1vw,.92rem); }
  .student-card.long-name .student-first { font-size:clamp(.66rem,.9vw,.82rem); }
  .student-card.long-last .student-last { font-size:clamp(.62rem,.82vw,.78rem); }
  .door-zone img { width:34px; max-height:43px; }
}

@media (max-height:620px) {
  .top-panel { grid-template-columns:70px minmax(0,1fr); }
  .brand-link img { max-height:66px; width:64px; }
  .title-block p { display:none; }
  .title-block h1 { font-size:1.08rem; }
  .field label,.field-label { margin-bottom:3px; font-size:.52rem; }
  select,.teacher-control,.button { height:35px; }
  .scene { grid-template-rows:42px 28px minmax(0,1fr); }
  .room-bar p { display:none; }
  .result-head { min-height:47px; }
  .result-title img { width:33px; height:33px; }
  .result-stats div { padding:4px 7px; }
  .front-stage { min-height:48px; }
  .student-first { font-size:clamp(.62rem,.86vw,.78rem); }
  .student-last { margin-top:2px; font-size:clamp(.58rem,.8vw,.72rem); }
  .student-card.long-name .student-first { font-size:clamp(.54rem,.72vw,.66rem); }
  .student-card.long-last .student-last { font-size:clamp(.51rem,.68vw,.63rem); }
  .orientation-zone { display:none; }
  .door-zone img { width:27px; max-height:34px; }
}

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