* { box-sizing: border-box; }
    .student-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.5;
      overflow-wrap: break-word;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: geometricPrecision;
    }
    h1, h2, h3, p, a, button, span, strong, small, label, dt, dd {
      word-break: normal;
    }
    header, main {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }
    header {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .brand {
      font-weight: 800;
      color: var(--ink);
      text-decoration: none;
      letter-spacing: 0;
    }
    .nowrap {
      white-space: nowrap;
    }
    .center-brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      max-width: min(420px, 60vw);
    }
    .center-brand-logo {
      display: block;
      width: auto;
      height: 34px;
      max-width: 120px;
      object-fit: contain;
      flex: 0 0 auto;
      border-radius: 0;
    }
    .center-brand-wordmark {
      white-space: nowrap;
    }
    .center-brand-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: currentColor;
      opacity: .78;
      font-size: .84rem;
      font-weight: 800;
    }
    nav {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    main {
      padding: 40px 0 56px;
    }
    .hero {
      padding: 32px 0 20px;
      max-width: 720px;
    }
    h1, h2, p {
      margin-top: 0;
    }
    h1 {
      margin-bottom: 12px;
      font-size: 3rem;
      line-height: 1.05;
      letter-spacing: 0;
    }
    h2 {
      font-size: 1.25rem;
      margin-bottom: 8px;
    }
    .lead {
      font-size: 1.2rem;
      color: var(--muted);
      max-width: 620px;
    }
    .eyebrow {
      margin-bottom: 8px;
      color: var(--primary);
      font-weight: 800;
      text-transform: uppercase;
      font-size: .78rem;
    }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 12px 28px rgba(23, 32, 42, .06);
    }
    .panel.narrow {
      max-width: 520px;
    }
    .panel.wide {
      max-width: 900px;
    }
    .actions, .row-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }
    .row-actions form {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .compact-select-label {
      display: grid;
      gap: 3px;
      min-width: 112px;
      font-size: 0.78rem;
      color: var(--muted);
      font-weight: 700;
    }
    .compact-select-label select,
    .compact-select-label input {
      min-height: 38px;
      max-width: 150px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 7px 9px;
      color: var(--ink);
      background: #ffffff;
    }
    .button, nav a {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #ffffff;
      color: var(--ink);
      font: inherit;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
    }
    .button.primary, a.primary {
      background: var(--primary);
      color: var(--primary-ink);
      border-color: var(--primary);
    }
    .button.danger {
      color: #ffffff;
      background: var(--danger);
      border-color: var(--danger);
    }
    .form-grid {
      display: grid;
      gap: 14px;
    }
    .admin-action-grid {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      align-items: start;
    }
    .admin-action-grid > *,
    .admin-inline-form,
    .admin-inline-form label {
      min-width: 0;
    }
    .admin-inline-form {
      display: grid;
      gap: 12px;
      overflow-x: clip;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
    }
    .admin-inline-form input,
    .admin-inline-form select {
      min-width: 0;
      max-width: 100%;
    }
    .admin-details {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
    }
    .admin-details summary {
      padding: 12px 14px;
      cursor: pointer;
      font-weight: 800;
      color: var(--primary);
    }
    .admin-details[open] summary {
      border-bottom: 1px solid var(--line);
    }
    .admin-details .admin-inline-form {
      border: 0;
      border-radius: 0;
    }
    label {
      display: grid;
      gap: 6px;
      font-weight: 700;
    }
    input, select {
      min-height: 44px;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px 12px;
      color: var(--ink);
      font: inherit;
      background: #ffffff;
    }
    input:disabled, select:disabled, button:disabled {
      cursor: not-allowed;
      opacity: .58;
    }
    .check {
      grid-template-columns: 22px 1fr;
      align-items: start;
      gap: 10px;
      font-weight: 600;
    }
    .check input {
      min-height: 20px;
      margin-top: 3px;
    }
    .notice {
      padding: 12px 14px;
      border-radius: 6px;
      margin-bottom: 16px;
      font-weight: 700;
    }
    .notice.error {
      background: var(--error-bg);
      color: var(--error-ink);
    }
    .notice.success {
      background: var(--success-bg);
      color: var(--success-ink);
    }
    /* Maqueta aprobada 17-09-2026 (5DrNm6ovvT474VpvMJ3f23, punto B): el aviso "ultima
       respuesta" del reto usa los MISMOS tokens que ya corrigen cada pregunta en esta misma
       pantalla (.practice-static-option.correct/.wrong), no los genericos --success-bg/
       --error-bg -- son parecidos pero no iguales, y la maqueta pide el color exacto que ya
       existe, no uno aproximado. */
    .notice[data-last-answer-tone="correct"] {
      background: #e6f6ee;
      color: #145a32;
    }
    .notice[data-last-answer-tone="wrong"] {
      background: #ffefed;
      color: #7b1f2a;
    }
    .fine, .muted, small {
      color: var(--muted);
    }
    .facts {
      display: grid;
      gap: 10px;
      margin: 18px 0;
    }
    .facts div {
      display: grid;
      gap: 2px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }
    dt {
      color: var(--muted);
      font-size: .86rem;
      font-weight: 800;
    }
    dd {
      margin: 0;
    }
    .table {
      display: grid;
      border-top: 1px solid var(--line);
    }
    .row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
    }
    .row strong, .row span, .row small {
      display: block;
      overflow-wrap: break-word;
    }
    .clean-list {
      padding-left: 20px;
    }
    .panel h1 {
      font-size: 2.15rem;
      line-height: 1.12;
    }
    body.private-page {
      background: linear-gradient(180deg, #071321 0, #071321 700px, #eef4f8 700px, #eef4f8 100%);
      color: #f7fbff;
    }
    body.private-page.auth-page {
      background: linear-gradient(180deg, #071321 0, #071321 980px, #eef4f8 980px, #eef4f8 100%);
    }
    .private-header {
      color: #f7fbff;
    }
    .private-header .brand {
      color: #f7fbff;
    }
    .private-header nav a {
      min-height: 38px;
      padding: 8px 10px;
      border-color: transparent;
      background: transparent;
      color: #b8c8d8;
      box-shadow: none;
      white-space: nowrap;
    }
    .private-header nav a.account {
      border-color: rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .08);
      color: #f7fbff;
    }
    .private-header nav a.primary {
      border-color: #102f52;
      background: #102f52;
      color: #ffffff;
    }
    .private-main {
      width: min(1120px, calc(100% - 32px));
      padding: 44px 0 72px;
    }
    .auth-main,
    .status-main {
      min-height: calc(100vh - 72px);
      display: grid;
      align-items: center;
    }
    .auth-layout {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(360px, 480px);
      gap: 40px;
      align-items: center;
    }
    .auth-copy {
      min-width: 0;
      max-width: 620px;
    }
    .private-kicker {
      width: fit-content;
      max-width: 100%;
      margin-bottom: 16px;
      padding: 8px 12px;
      border: 1px solid rgba(36, 211, 197, .35);
      border-radius: 6px;
      background: rgba(36, 211, 197, .1);
      color: #92fff3;
      font-size: .78rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    .auth-copy h1,
    .account-hero h1,
    .admin-header h1 {
      max-width: 720px;
      margin-bottom: 18px;
      color: #ffffff;
      font-size: 3.45rem;
      line-height: 1.04;
    }
    .auth-copy p,
    .private-lead,
    .admin-header p {
      max-width: 640px;
      color: #b7c8d8;
      font-size: 1.08rem;
      line-height: 1.65;
    }
    .trust-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }
    .trust-list span,
    .status-pill {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: .8rem;
      font-weight: 900;
      line-height: 1.2;
    }
    .trust-list span {
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .08);
      color: #dce8f3;
    }
    .private-page .panel {
      border-color: #d7e3ed;
      background: #ffffff;
      color: #0d1b2a;
      box-shadow: 0 24px 70px rgba(2, 12, 24, .22);
    }
    .auth-panel {
      padding: 28px;
    }
    .login-layout .auth-panel {
      position: relative;
      z-index: 1;
    }
    .auth-panel h2,
    .panel-heading h2,
    .status-card h1 {
      margin-bottom: 10px;
      color: #0d1b2a;
      font-size: 2rem;
      line-height: 1.12;
    }
    .private-form-intro,
    .auth-account-context,
    .auth-secondary-actions,
    .panel-heading p,
    .status-card p,
    .empty-state span {
      color: #5b6c7d;
      line-height: 1.6;
    }
    .strong-note,
    .inline-note {
      font-weight: 800;
    }
    .inline-note {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      color: #5b6c7d;
    }
    .private-page .form-grid {
      margin-top: 18px;
    }
    .private-page fieldset {
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
    }
    .private-page label {
      color: #182838;
      font-size: .92rem;
    }
    .private-page input,
    .private-page textarea {
      border-color: #cfdce8;
      background: #f9fbfd;
      color: #102030;
    }
    .private-page input:focus,
    .private-page textarea:focus {
      border-color: #24a99f;
      outline: 3px solid rgba(36, 211, 197, .18);
    }
    .itinerary-choice {
      display: grid;
      gap: 10px;
    }
    .itinerary-choice legend {
      margin-bottom: 4px;
      color: #182838;
      font-size: .92rem;
      font-weight: 800;
    }
    .itinerary-helper {
      margin: 0;
      color: #5b6c7d;
      font-size: .9rem;
      line-height: 1.45;
    }
    .itinerary-grid {
      display: grid;
      gap: 9px;
    }
    .itinerary-card {
      min-height: 54px;
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 12px;
      border: 1px solid #cfdce8;
      border-radius: 8px;
      background: #f9fbfd;
      cursor: pointer;
    }
    .itinerary-card input {
      width: 20px;
      min-height: 20px;
      margin: 0;
      accent-color: #0b8f86;
    }
    .itinerary-card span {
      min-width: 0;
      color: #182838;
      line-height: 1.35;
    }
    .private-page .check {
      min-height: 48px;
      padding: 10px 12px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #f9fbfd;
      color: #334657;
      font-weight: 700;
      cursor: pointer;
    }
    .private-page .check input {
      width: 22px;
      min-height: 22px;
      margin-top: 1px;
      accent-color: #0b8f86;
    }
    .private-page .button.primary,
    .private-page a.primary {
      border-color: #102f52;
      background: #102f52;
      color: #ffffff;
      box-shadow: 0 14px 28px rgba(7, 19, 33, .16);
    }
    .private-page .button.danger {
      background: #9f2f3f;
      border-color: #9f2f3f;
      color: #ffffff;
    }
    .ghost-light {
      border-color: rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .08);
      color: #f7fbff;
    }
    .private-page .fine a {
      color: #031049;
      font-weight: 800;
    }
    .auth-account-context {
      margin: 8px 0 0;
      padding: 10px 12px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #f3f8fb;
      color: #102030;
      font-weight: 800;
    }
    .auth-secondary-actions {
      margin: 14px 0 0;
      font-size: .92rem;
    }
    .auth-secondary-link {
      color: #031049;
      font-weight: 850;
    }
    .private-page .notice {
      border: 1px solid transparent;
      box-shadow: none;
    }
    .private-page .notice.success {
      border-color: #bce9cf;
    }
    .private-page .notice.error {
      border-color: #f1c0c7;
    }
    .status-shell {
      display: grid;
      grid-template-columns: 96px minmax(0, 560px);
      gap: 24px;
      align-items: start;
      justify-content: center;
    }
    .status-mark {
      min-height: 72px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
      color: #ffffff;
      font-weight: 900;
    }
    .muted-mark {
      border-color: rgba(253, 103, 7, .35);
      background: rgba(253, 103, 7, .12);
      color: #c8621c;
    }
    .status-card {
      padding: 30px;
    }
    .status-card .button {
      margin-top: 10px;
    }
    .account-shell,
    .admin-shell {
      display: grid;
      gap: 24px;
    }
    .account-hero,
    .admin-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: end;
      padding: 28px 0 8px;
    }
    .account-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 0;
    }
    .account-meta div,
    .admin-summary,
    .module-card,
    .empty-state {
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #ffffff;
      color: #0d1b2a;
      box-shadow: 0 14px 34px rgba(12, 31, 51, .08);
    }
    .account-meta div {
      display: grid;
      gap: 8px;
      padding: 16px;
    }
    .account-meta dt {
      color: #6b7c8f;
      font-size: .78rem;
      text-transform: uppercase;
    }
    .account-meta dd {
      color: #102030;
      font-weight: 900;
    }
    .status-pill.success {
      background: #dff8eb;
      color: #145a32;
    }
    .status-pill.neutral {
      background: #e8f1f8;
      color: #24435c;
    }
    .status-pill.pending {
      width: fit-content;
      background: #fff4cf;
      color: #6d4a00;
    }
    .status-pill.active {
      width: fit-content;
      background: #dff8eb;
      color: #145a32;
    }
    .status-pill.rejected,
    .status-pill.suspended {
      width: fit-content;
      background: #fde4e7;
      color: #8f2434;
    }
    .account-panel,
    .admin-panel {
      padding: 26px;
      box-shadow: 0 18px 48px rgba(12, 31, 51, .12);
    }
    .panel-heading {
      display: grid;
      gap: 4px;
      margin-bottom: 18px;
    }
    .panel-heading.compact {
      margin-bottom: 14px;
    }
    .module-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }
    .available-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .available-item {
      min-width: 0;
      min-height: 150px;
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 18px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #ffffff;
      color: #0d1b2a;
      box-shadow: 0 12px 28px rgba(12, 31, 51, .07);
    }
    .available-item h3,
    .empty-study-state h2 {
      margin: 0;
      color: #0d1b2a;
      line-height: 1.25;
    }
    .available-item p,
    .empty-study-state p {
      margin: 0;
      color: #5f7182;
      line-height: 1.55;
    }
    .available-item a {
      color: #0b6f69;
      font-weight: 800;
    }
    .student-figma-shell {
      display: grid;
      justify-items: center;
      gap: 14px;
      color: #031049;
    }
    .student-mobile-frame {
      width: min(430px, 100%);
      min-height: min(844px, calc(100vh - 112px));
      display: flex;
      flex-direction: column;
      border: 1px solid #DCE1E8;
      border-radius: 30px;
      background: #F6F8FB;
      color: #031049;
      overflow: visible;
      box-shadow: 0 28px 70px -24px rgba(3, 16, 73, .22);
    }
    .student-home-frame {
      gap: 14px;
      padding: 24px 20px 16px;
    }
    .student-home-header,
    .practice-mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .student-home-header p,
    .student-home-header h1,
    .student-home-hero h2,
    .student-home-hero p,
    .student-home-reinforcement h2,
    .student-home-reinforcement p,
    .student-home-progress strong,
    .student-home-progress span,
    .student-home-history-panel h2,
    .student-home-history-panel p,
    .student-attempt-row strong,
    .student-attempt-row span,
    .student-secondary-row h2,
    .student-secondary-row p,
    .practice-mobile-header span,
    .practice-state-copy h2,
    .practice-state-copy p,
    .practice-question-card p,
    .practice-question-card h3,
    .practice-map-card h3,
    .practice-map-card p,
    .student-equivalent-result p,
    .student-session-summary h2,
    .student-session-summary p {
      margin: 0;
    }
    .student-home-header p {
      color: #64707b;
      font-size: 11px;
      font-weight: 900;
      line-height: 14px;
      text-transform: uppercase;
    }
    .student-home-header h1 {
      color: #101826;
      font-size: 24px;
      line-height: 29px;
    }
    .student-home-header-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .student-privacy-pill,
    .student-soft-pill {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 28px;
      padding: 7px 10px;
      border: 1px solid #cadae0;
      border-radius: 999px;
      background: #eaf2f4;
      color: #345766;
      font-size: 11px;
      font-weight: 700;
      line-height: 14px;
    }
    .student-privacy-pill {
      background: #ffffff;
      color: #586879;
    }
    .student-soft-pill {
      border-color: #b7d5dd;
      background: #ddeef2;
      color: #1f5b6c;
    }
    .student-home-hero .student-soft-pill {
      border-color: rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .16);
      color: #ffffff;
    }
    .student-home-hero {
      display: grid;
      gap: 16px;
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 28px;
      background: linear-gradient(145deg, #145862 0%, #1f6872 58%, #2f6d64 100%);
      box-shadow: 0 20px 32px rgba(20, 48, 68, .22);
    }
    .student-home-hero-topline,
    .student-hero-progress > div:first-child {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .student-home-hero-topline > span:last-child,
    .student-hero-progress span {
      color: rgba(255, 255, 255, .72);
      font-size: 12px;
      font-weight: 800;
      line-height: 16px;
    }
    .student-home-hero h2 {
      color: #ffffff;
      font-size: 31px;
      line-height: 36px;
    }
    .student-home-hero p {
      color: rgba(255, 255, 255, .78);
      font-size: 14px;
      line-height: 21px;
    }
    .student-hero-progress {
      display: grid;
      gap: 8px;
    }
    .student-hero-progress strong {
      color: #ffffff;
      font-size: 14px;
      line-height: 18px;
    }
    .student-home-action {
      width: 100%;
      margin: 0;
    }
    .student-primary-cta {
      width: 100%;
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 16px;
      padding: 14px 18px;
      background: #10272f;
      color: #ffffff;
      box-shadow: 0 12px 18px rgba(16, 32, 51, .24);
      font: inherit;
      font-size: 15px;
      font-weight: 800;
      line-height: 19px;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
    }
    .student-primary-cta[disabled] {
      opacity: 1;
      cursor: progress;
    }
    .practice-skip-button[disabled] {
      opacity: 1;
      background: #f8fbfd;
      color: #1f5b6c;
      cursor: progress;
    }
    .student-home-reinforcement,
    .student-home-progress,
    .student-home-history-panel,
    .student-secondary-row,
    .student-classroom-entry,
    .student-session-summary,
    .practice-question-card,
    .practice-map-card,
    .practice-feedback-card,
    .student-summary-note {
      border: 1px solid #dce6ea;
      border-radius: 18px;
      background: #ffffff;
    }
    .student-home-reinforcement {
      display: grid;
      grid-template-columns: 4px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 14px;
      box-shadow: 0 8px 18px rgba(21, 48, 68, .06);
    }
    .student-home-reinforcement > span,
    .practice-feedback-card > span {
      width: 4px;
      height: 54px;
      border-radius: 99px;
      background: #d79b2b;
    }
    .student-home-reinforcement h2 {
      color: #101826;
      font-size: 15px;
      line-height: 20px;
    }
    .student-home-reinforcement p {
      color: #64707b;
      font-size: 13px;
      line-height: 18px;
    }
    .student-classroom-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      opacity: .68;
      box-shadow: 0 8px 11px rgba(21, 48, 68, .05);
    }
    .student-classroom-entry h2,
    .student-classroom-entry p {
      margin: 0;
    }
    .student-classroom-entry h2 {
      color: #101826;
      font-size: 15px;
      line-height: 20px;
    }
    .student-classroom-entry p {
      color: #64707b;
      font-size: 12px;
      line-height: 17px;
    }
    .student-home-progress {
      display: grid;
      gap: 12px;
      padding: 15px;
    }
    .student-home-progress > div:first-child {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }
    .student-home-progress strong {
      color: #101826;
      font-size: 14px;
      line-height: 18px;
    }
    .student-home-progress span {
      color: #6c7782;
      font-size: 12px;
      line-height: 16px;
      white-space: nowrap;
    }
    .student-home-progress p {
      margin: 0;
      color: #77818b;
      font-size: 12px;
      line-height: 16px;
    }
    .student-home-signal {
      gap: 8px;
    }
    .student-home-signal strong {
      font-size: 16px;
      line-height: 20px;
    }
    .student-home-signal > div:first-child span {
      color: #245f6b;
      font-weight: 900;
    }
    .student-mini-metrics,
    .student-history-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .student-mini-metrics div,
    .student-history-kpis div {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 12px;
      border-radius: 15px;
      background: #f4f6f7;
    }
    .student-mini-metrics div.positive,
    .student-history-kpis div.positive {
      background: #e8f5ee;
      color: #2e7a4f;
    }
    .student-mini-metrics div.needs-review,
    .student-history-kpis div.needs-review {
      background: #fbebe5;
      color: #b54335;
    }
    .student-history-kpis div.in-progress {
      background: #eeeafd;
      color: #5e4fc7;
    }
    .student-mini-metrics strong,
    .student-history-kpis strong {
      font-size: 21px;
      line-height: 23px;
    }
    .student-mini-metrics span,
    .student-history-kpis span {
      white-space: normal;
      font-size: 11px;
      font-weight: 850;
      line-height: 14px;
    }
    .student-home-history-panel {
      display: grid;
      gap: 12px;
      padding: 15px;
      box-shadow: 0 8px 18px rgba(21, 48, 68, .06);
    }
    .student-home-history-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
    }
    .student-home-history-header h2 {
      color: #101826;
      font-size: 15px;
      line-height: 20px;
    }
    .student-home-history-header p,
    .student-attempt-row span,
    .student-attempt-kicker {
      color: #64707b;
      font-size: 12px;
      line-height: 16px;
    }
    .student-attempt-block {
      display: grid;
      gap: 9px;
      padding-top: 10px;
      border-top: 1px solid #e5edf1;
    }
    .student-attempt-kicker {
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }
    .student-attempt-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
    }
    .student-attempt-row > div:first-child {
      display: grid;
      gap: 5px;
      min-width: 0;
    }
    .student-attempt-row strong {
      color: #101826;
      font-size: 13px;
      line-height: 17px;
    }
    .student-attempt-actions {
      display: inline-flex;
      justify-content: flex-end;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .student-status-chip {
      width: fit-content;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 950;
      line-height: 14px;
    }
    .student-status-chip.apt {
      background: #e3f3e8;
      color: #2e7a4f;
    }
    .student-status-chip.no-apt {
      background: #faebe6;
      color: #b54335;
    }
    .student-status-chip.in-progress {
      background: #ece8ff;
      color: #5b4bc4;
    }
    .student-status-chip.done {
      background: #eef3f5;
      color: #345766;
    }
    .student-attempt-primary-link,
    .student-attempt-secondary-link {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      padding: 11px 14px;
      white-space: nowrap;
    }
    .student-attempt-primary-link {
      border: 0;
      background: #245f6b;
      color: #ffffff;
    }
    .student-attempt-secondary-link {
      border: 1px solid #d8e5e9;
      background: #ffffff;
      color: #245263;
    }
    .student-repeat-attempt {
      display: grid;
      gap: 5px;
      min-width: 0;
    }
    .student-repeat-attempt span,
    .student-repeat-attempt-note {
      margin: 0;
      color: #77818b;
      font-size: 11px;
      font-weight: 700;
      line-height: 14px;
    }
    .student-repeat-attempt-note {
      grid-column: 1 / -1;
    }
    .student-home-secondary-list {
      display: grid;
      gap: 8px;
    }
    .student-secondary-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 13px;
    }
    .student-secondary-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: #7b6ee6;
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
    }
    .student-secondary-row h2 {
      color: #101826;
      font-size: 14px;
      line-height: 18px;
    }
    .student-secondary-row p {
      color: #6b7681;
      font-size: 12px;
      line-height: 16px;
    }
    .student-secondary-action {
      border: 0;
      background: transparent;
      color: #2d6170;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      line-height: 17px;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
    }
    .muted-action {
      color: #94a0a9;
    }
    .student-private-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 10px;
    }
    .student-private-summary div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .student-private-summary strong {
      color: #101826;
      font-size: 18px;
      line-height: 20px;
    }
    .student-private-summary span {
      color: #66717d;
      font-size: 10px;
      line-height: 13px;
    }
    .student-data-page {
      align-content: start;
    }
    .student-data-card {
      display: grid;
      gap: 12px;
      padding: 15px;
      border: 1px solid #dce6ea;
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 8px 18px rgba(21, 48, 68, .06);
    }
    .student-data-card-primary {
      gap: 14px;
    }
    .student-data-heading {
      display: grid;
      gap: 7px;
    }
    .student-data-heading h2,
    .student-data-heading p,
    .student-data-scope strong,
    .student-data-scope span,
    .student-data-note-list,
    .student-data-timestamp {
      margin: 0;
    }
    .student-data-heading h2 {
      color: #101826;
      font-size: 17px;
      line-height: 22px;
    }
    .student-data-heading p,
    .student-data-scope span,
    .student-data-note-list,
    .student-data-timestamp,
    .student-data-confirm span {
      color: #64707b;
      font-size: 12px;
      line-height: 17px;
    }
    .student-data-scope {
      display: grid;
      gap: 3px;
      padding: 11px 12px;
      border-radius: 14px;
      background: #f4f6f7;
    }
    .student-data-scope strong {
      color: #101826;
      font-size: 12px;
      line-height: 16px;
    }
    .student-data-actions {
      display: grid;
      gap: 10px;
    }
    .student-data-link,
    .student-data-danger {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      padding: 11px 14px;
      text-align: center;
      white-space: normal;
    }
    .student-data-link {
      border: 1px solid #d8e5e9;
      background: #ffffff;
      color: #245263;
    }
    .student-data-danger {
      width: 100%;
      border: 1px solid #f0c5c9;
      background: #fff4f2;
      color: #9f2f3f;
    }
    .student-data-reset-form {
      display: grid;
      gap: 9px;
      margin: 0;
    }
    .student-data-confirm {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      font-weight: 700;
    }
    .student-data-confirm input {
      width: 18px;
      min-height: 18px;
      margin-top: 2px;
      accent-color: #245f6b;
    }
    .student-data-count-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .student-data-count {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 12px;
      border-radius: 15px;
      background: #f4f6f7;
    }
    .student-data-count strong {
      color: #101826;
      font-size: 22px;
      line-height: 24px;
    }
    .student-data-count span {
      color: #66717d;
      font-size: 11px;
      font-weight: 850;
      line-height: 14px;
    }
    .student-data-note-list {
      display: grid;
      gap: 6px;
      padding-left: 18px;
    }
    .student-bottom-nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      justify-content: center;
      position: static;
      margin: auto -20px 0;
      padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
      border-top: 1px solid #DCE1E8;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 -6px 12px rgba(3, 16, 73, .04);
    }
    .student-bottom-nav span,
    .student-bottom-nav a {
      flex: 1;
      min-height: auto;
      display: block;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #8891A6;
      font-size: 11px;
      font-weight: 700;
      line-height: 14px;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
      overflow-wrap: normal;
    }
    .student-bottom-nav a {
      color: #031049;
    }
    .student-bottom-nav span[aria-current="page"] {
      color: #031049;
      font-weight: 900;
    }
    .student-bottom-nav span[aria-current="page"]::before {
      content: "";
      width: 26px;
      height: 3px;
      display: block;
      margin: 0 auto 3px;
      border-radius: 99px;
      background: #FD6707;
    }
    @media (max-width: 899px) {
      .student-mobile-frame {
        padding-bottom: 0;
      }
      .student-bottom-nav {
        margin-top: 4px;
      }
    }
    .student-product-nav {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding: 2px 0 4px;
      scrollbar-width: thin;
    }
    .student-product-nav span,
    .student-product-nav a {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow-wrap: normal;
      border: 1px solid #d7e4e9;
      border-radius: 999px;
      padding: 8px 11px;
      background: #ffffff;
      color: #345766;
      font-size: 12px;
      font-weight: 850;
      line-height: 15px;
      text-decoration: none;
    }
    .student-product-nav span[aria-current="page"] {
      border-color: #2c7a8b;
      background: #2c7a8b;
      color: #ffffff;
    }
    .student-product-nav-link.primary {
      color: #102033;
    }
    .student-logout-form {
      margin: 0;
    }
    .student-logout-button {
      min-height: 28px;
      border: 1px solid #cadae0;
      border-radius: 999px;
      padding: 6px 10px;
      background: #ffffff;
      color: #345766;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      line-height: 14px;
      cursor: pointer;
    }
    .student-dashboard-layout {
      width: min(1120px, 100%);
      display: grid;
      gap: 16px;
      justify-items: center;
    }
    .student-platform-sidebar,
    .student-platform-context {
      display: none;
    }
    .student-platform-brand {
      color: #0e1726;
      font-size: 15px;
      font-weight: 950;
      letter-spacing: 0;
      text-decoration: none;
    }
    .student-platform-privacy {
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid #dce6ea;
      border-radius: 16px;
      background: #f8fbfd;
    }
    .student-platform-privacy strong {
      color: #101826;
      font-size: 13px;
      line-height: 17px;
    }
    .student-platform-privacy span {
      color: #66717d;
      font-size: 12px;
      line-height: 16px;
    }
    .student-dashboard-side {
      width: min(430px, 100%);
      display: grid;
      gap: 12px;
      align-content: start;
    }
    .student-side-panel,
    .student-modality-card {
      border: 1px solid #dce6ea;
      border-radius: 18px;
      background: #ffffff;
      color: #101826;
      box-shadow: 0 18px 42px rgba(20, 48, 68, .08);
    }
    .student-side-panel {
      display: grid;
      gap: 12px;
      padding: 16px;
    }
    .student-side-panel h2,
    .student-side-panel p,
    .student-modality-card h3,
    .student-modality-card p,
    .student-history-list,
    .student-history-list p,
    .student-history-title strong,
    .student-history-title span,
    .student-attempt-metrics,
    .student-empty-history {
      margin: 0;
    }
    .student-side-kicker {
      color: #2d6170;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .student-side-panel h2 {
      font-size: 18px;
      line-height: 23px;
    }
    .student-modality-grid {
      display: grid;
      gap: 10px;
    }
    .student-modality-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
    }
    .student-modality-card.selected {
      border-color: #93cfd8;
      background: #f1fbfd;
    }
    .student-modality-card h3 {
      font-size: 14px;
      line-height: 18px;
    }
    .student-modality-card p,
    .student-empty-history,
    .student-history-list span,
    .student-history-list p {
      color: #66717d;
      font-size: 12px;
      line-height: 16px;
    }
    .student-modality-actions {
      display: inline-flex;
      gap: 6px;
      align-items: center;
    }
    .student-practice-count-actions {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: flex-end;
    }
    .student-inline-form {
      margin: 0;
    }
    .student-chip-action {
      min-width: 44px;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow-wrap: normal;
      border: 1px solid #cbdde5;
      border-radius: 999px;
      padding: 7px 10px;
      background: #f8fbfd;
      color: #214b5b;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      line-height: 16px;
      text-decoration: none;
      cursor: pointer;
    }
    .student-dashboard-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .student-dashboard-metrics div {
      display: grid;
      gap: 2px;
      padding: 10px;
      border-radius: 12px;
      background: #f5f8fa;
    }
    .student-dashboard-metrics strong {
      font-size: 20px;
      line-height: 22px;
    }
    .student-dashboard-metrics span {
      color: #66717d;
      font-size: 11px;
      line-height: 14px;
    }
    .student-history-overview {
      gap: 12px;
    }
    .student-history-overview h2,
    .student-history-overview p {
      margin: 0;
    }
    .student-history-overview h2 {
      color: #101826;
      font-size: 24px;
      line-height: 30px;
    }
    .student-history-overview > p:last-child {
      color: #64707b;
      font-size: 12px;
      font-weight: 750;
      line-height: 16px;
    }
    .student-history-kpis {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .student-history-list {
      display: grid;
      gap: 10px;
      padding: 0;
      list-style: none;
    }
    .student-history-list li {
      display: grid;
      gap: 10px;
      padding: 13px;
      border: 1px solid #e2eaee;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 8px 18px rgba(21, 48, 68, .05);
    }
    .student-history-list li.current-attempt {
      border-color: #cbc4fb;
      background: #fbfaff;
    }
    .student-history-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
    }
    .student-history-list .student-attempt-actions {
      justify-content: flex-end;
    }
    .student-history-title {
      min-width: 0;
      display: grid;
      gap: 5px;
    }
    .student-history-list strong {
      color: #101826;
      font-size: 15px;
      line-height: 19px;
    }
    .student-attempt-metrics {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }
    .student-attempt-metrics span {
      width: fit-content;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 6px 9px;
      background: #f3f6f7;
      color: #64707b;
      font-size: 11px;
      font-weight: 850;
      line-height: 14px;
    }
    .student-attempt-metrics span.positive {
      background: #e8f5ee;
      color: #2e7a4f;
    }
    .student-attempt-metrics span.needs-review {
      background: #fbebe5;
      color: #b54335;
    }
    .student-classroom-answer-list {
      display: grid;
      gap: 6px;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .student-classroom-answer-list li,
    .student-classroom-answer-empty {
      border-radius: 12px;
      background: #f6faf8;
      border: 1px solid #deebe5;
      padding: 9px 10px;
      margin: 0;
    }
    .student-classroom-answer-list li {
      display: grid;
      gap: 3px;
    }
    .student-classroom-answer-list span,
    .student-classroom-answer-empty {
      color: #4a6171;
      font-size: 12px;
      line-height: 16px;
    }
    .student-history-empty-card {
      display: grid;
      gap: 4px;
      padding: 14px;
      border: 1px dashed #cbd8df;
      border-radius: 16px;
      background: #f8fbfd;
    }
    .student-history-empty-card strong {
      color: #101826;
      font-size: 15px;
      line-height: 19px;
    }
    .student-history-empty-card span {
      color: #64707b;
      font-size: 12px;
      line-height: 16px;
    }
    .student-topic-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .student-topic-groups {
      display: grid;
      gap: 10px;
    }
    .student-topic-groups summary {
      cursor: pointer;
      color: #101826;
      font-size: 14px;
      font-weight: 900;
      line-height: 18px;
    }
    .student-topic-groups[open] summary {
      margin-bottom: 10px;
    }
    .student-topic-list li {
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid #e1eaf0;
      border-radius: 12px;
      background: #f8fbfd;
    }
    .student-topic-list li.weak {
      border-color: #f0d0a2;
      background: #fff8ed;
    }
    .student-topic-list.compact li {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }
    .student-topic-list div,
    .student-side-actions,
    .student-support-facts div {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
    .student-topic-list strong {
      color: #101826;
      font-size: 13px;
      line-height: 17px;
    }
    .student-topic-list span,
    .student-topic-list p,
    .student-support-facts span {
      margin: 0;
      color: #66717d;
      font-size: 12px;
      line-height: 16px;
    }
    .student-side-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .student-section-heading {
      display: grid;
      gap: 2px;
    }
    .student-section-heading p,
    .student-section-heading h2 {
      margin: 0;
    }
    .student-section-heading p {
      color: #2d6170;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .student-section-heading h2 {
      color: #101826;
      font-size: 18px;
      line-height: 23px;
    }
    .student-study-actions,
    .student-dashboard-overview {
      display: grid;
      gap: 12px;
    }
    .student-action-cluster {
      display: grid;
      gap: 8px;
    }
    .student-study-action {
      box-shadow: 0 8px 11px rgba(21, 48, 68, .05);
    }
    .student-secondary-icon.exam {
      background: #2c7a8b;
    }
    .student-secondary-icon.review {
      background: #7b6ee6;
    }
    .student-secondary-icon.topic {
      background: #b8842e;
    }
    .student-home-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
      gap: 16px;
      align-items: stretch;
    }
    .student-primary-panel,
    .student-progress-panel {
      min-width: 0;
    }
    .student-action-card {
      display: grid;
      gap: 16px;
      min-height: 260px;
      align-content: center;
      padding: 24px;
      border: 1px solid #cfe3df;
      border-radius: 8px;
      background: #f6fbfa;
    }
    .student-action-card h3 {
      margin: 0;
      color: #0d1b2a;
      font-size: 1.75rem;
      line-height: 1.18;
    }
    .student-action-card p {
      margin: 0;
      color: #405568;
      line-height: 1.55;
    }
    .student-progress-rail {
      width: 100%;
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: #dbe8f0;
    }
    .student-progress-rail span {
      height: 100%;
      display: block;
      border-radius: inherit;
      background: linear-gradient(90deg, #0b6f69, #d29d26);
    }
    .student-hero-progress .student-progress-rail {
      background: rgba(255, 255, 255, .22);
    }
    .student-hero-progress .student-progress-rail span {
      background: #e3b74b;
    }
    .student-action-footer {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .student-action-footer strong {
      color: #0d1b2a;
      font-size: .95rem;
    }
    .inline-action-form {
      margin: 0;
    }
    .student-result-card {
      display: grid;
      gap: 6px;
      min-height: 138px;
      align-content: center;
      padding: 18px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #f8fbfd;
    }
    .student-result-card span,
    .student-result-card small {
      color: #5f7182;
      font-weight: 800;
    }
    .student-result-card strong {
      color: #0d1b2a;
      font-size: 2.15rem;
      line-height: 1.05;
    }
    .student-result-card.correct {
      border-color: #b7e3ca;
      background: #effaf4;
    }
    .student-result-card.needs-review {
      border-color: #f0d0a2;
      background: #fff8ed;
    }
    .student-support-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .student-progress-summary .account-meta {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .student-progress-summary .account-meta div {
      box-shadow: none;
    }
    .available-item.compact {
      min-height: 132px;
      box-shadow: 0 10px 24px rgba(12, 31, 51, .06);
    }
    .empty-study-state {
      display: grid;
      gap: 8px;
      padding: 22px 24px;
      border: 1px dashed #b9c9d6;
      border-radius: 8px;
      background: #f8fbfd;
      color: #0d1b2a;
    }
    .empty-study-state code {
      color: #24435c;
      font-weight: 800;
    }
    .correction-facts,
    .ops-grid {
      display: grid;
      gap: 10px;
      margin: 0;
    }
    .correction-facts div,
    .ops-grid div {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 12px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #ffffff;
    }
    .correction-facts dd,
    .ops-grid dd {
      margin: 0;
      color: #102030;
      font-weight: 900;
    }
    .ops-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .ops-grid dd {
      font-size: 1.55rem;
      line-height: 1.1;
    }
    .didactic-runtime-trace dd,
    .didactic-runtime-trace code {
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .ops-grid.didactic-runtime-trace {
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
    .didactic-runtime-trace dd {
      font-size: 1rem;
      line-height: 1.35;
    }
    .didactic-runtime-trace code {
      font-size: .88rem;
    }
    .practice-answer-form {
      display: grid;
      gap: 9px;
      margin-top: 8px;
    }
    .practice-mobile-frame {
      padding: 8px 16px 0;
      background: #f5f8f8;
    }
    .practice-mobile-header {
      color: #566575;
      font-size: 10px;
      font-weight: 800;
      line-height: 14px;
    }
    .practice-header-link {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 5px 9px;
      background: transparent;
      color: #1f5b6c;
      font: inherit;
      font-size: 10px;
      font-weight: 900;
      line-height: 14px;
      white-space: nowrap;
      text-decoration: none;
    }
    .practice-header-button {
      cursor: pointer;
    }
    .practice-stage-panel {
      display: grid;
      gap: 8px;
      padding-top: 3px;
    }
    .practice-mode-panel {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid #dce6ea;
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 12px 24px rgba(20, 48, 68, .07);
    }
    .student-mode-overview {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .student-mode-overview article,
    .practice-search-result details {
      display: grid;
      gap: 4px;
      padding: 10px;
      border: 1px solid #dce6ea;
      border-radius: 12px;
      background: #f8fbfd;
    }
    .student-mode-overview strong { color: #101826; }
    .student-mode-overview span { color: #566575; font-size: 12px; line-height: 16px; }
    .student-mode-overview .secondary-action { justify-self: start; margin-top: 2px; }
    .student-search-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }
    .student-search-facts div { display: grid; gap: 2px; }
    .student-search-facts dt { color: #566575; font-size: 11px; font-weight: 800; }
    .student-search-facts dd { margin: 0; color: #101826; font-size: 13px; font-weight: 850; }
    .practice-search-result details summary,
    .student-error-summary { cursor: pointer; }
    .student-error-summary { display: grid; gap: 5px; }
    .student-error-summary small { color: #566575; font-size: 11px; }
    .practice-modality-grid {
      gap: 8px;
    }
    .practice-setup-grid {
      display: grid;
      gap: 9px;
    }
    .practice-setup-workbench {
      gap: 10px;
    }
    .practice-setup-form {
      display: grid;
      gap: 9px;
      margin: 0;
    }
    .practice-setup-step {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      padding: 9px;
      border: 1px solid #dce6ea;
      border-radius: 14px;
      background: #f8fbfd;
    }
    .student-profile-step {
      align-items: center;
    }
    .practice-objective-step {
      display: block;
    }
    .practice-objective-step .practice-step-number {
      margin-bottom: 8px;
    }
    .practice-objective-step .student-objective-picker {
      margin-top: 8px;
    }
    .practice-objective-step .student-objective-picker + p {
      margin-top: 8px;
    }
    .practice-step-number {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #ddeef2;
      color: #1f5b6c;
      font-size: 12px;
      font-weight: 950;
    }
    .practice-mode-choice-group {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 10px;
      border: 1px solid #dce6ea;
      border-radius: 14px;
      background: #ffffff;
    }
    .practice-mode-choice-group legend {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 0 4px;
      color: #101826;
      font-size: 13px;
      font-weight: 900;
    }
    .practice-mode-choice {
      position: relative;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 4px 10px;
      align-items: center;
      padding: 9px;
      border: 1px solid #dce6ea;
      border-radius: 12px;
      background: #f8fbfd;
      color: #101826;
      cursor: pointer;
    }
    .practice-mode-choice input {
      width: 18px;
      min-height: 18px;
      accent-color: #2c7a8b;
    }
    .practice-mode-choice strong,
    .practice-mode-choice span {
      grid-column: 2;
    }
    .practice-mode-choice strong {
      font-size: 14px;
      line-height: 18px;
    }
    .practice-mode-choice span,
    .practice-setup-step p {
      margin: 0;
      color: #66717d;
      font-size: 12px;
      line-height: 16px;
    }
    .practice-setup-step p {
      grid-column: 2;
    }
    .practice-setup-step .student-objective-picker,
    .practice-setup-step .student-objective-picker + p {
      grid-column: 1 / -1;
    }
    .student-profile-modality {
      display: grid;
      gap: 8px;
      color: #101826;
    }
    .student-profile-modality-head {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .student-profile-modality strong {
      font-size: 13px;
      line-height: 17px;
    }
    .student-profile-modality span {
      width: fit-content;
      border: 1px solid #b7d5dd;
      border-radius: 999px;
      padding: 6px 10px;
      background: #ddeef2;
      color: #1f5b6c;
      font-size: 12px;
      font-weight: 900;
      line-height: 15px;
    }
    .student-objective-picker {
      width: 100%;
      min-width: 0;
      min-inline-size: 0;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      margin: 0;
      padding: 0;
      border: 0;
    }
    .practice-setup-step .student-objective-picker > strong,
    .practice-setup-step .student-objective-summary,
    .practice-setup-step .student-objective-search,
    .practice-setup-step .student-objective-all,
    .practice-setup-step .student-objective-helper,
    .practice-setup-step .student-objective-list {
      grid-column: 1 / -1;
    }
    .student-objective-picker legend,
    .student-objective-picker > strong {
      color: #101826;
      font-size: 13px;
      font-weight: 900;
      line-height: 17px;
    }
    .student-objective-summary {
      margin: 0;
      color: #566575;
      font-size: 12px;
      line-height: 16px;
    }
    .student-objective-helper {
      margin: 0;
      color: #66717d;
      font-size: 11px;
      line-height: 15px;
    }
    .student-objective-search {
      display: grid;
      gap: 6px;
      color: #345766;
      font-size: 12px;
      font-weight: 900;
      line-height: 16px;
    }
    .student-objective-search input {
      width: 100%;
      min-height: 42px;
      border: 1px solid #cbdde5;
      border-radius: 10px;
      padding: 8px 10px;
      background: #ffffff;
      color: #101826;
      font: inherit;
    }
    .student-objective-all,
    .student-objective-option {
      min-width: 0;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 10px;
      border: 1px solid #dce6ea;
      border-radius: 12px;
      background: #ffffff;
      color: #101826;
    }
    .student-objective-all input,
    .student-objective-option input {
      width: 18px;
      min-height: 18px;
      accent-color: #2c7a8b;
    }
    .student-objective-list {
      display: grid;
      gap: 8px;
      max-height: 330px;
      overflow: auto;
      padding-right: 2px;
    }
    .student-objective-all span,
    .student-objective-option span {
      display: grid;
      gap: 3px;
    }
    .student-objective-all strong,
    .student-objective-option strong {
      overflow-wrap: break-word;
      font-size: 13px;
      line-height: 17px;
    }
    .student-objective-all small,
    .student-objective-option small,
    .student-objective-option em {
      color: #66717d;
      font-size: 11px;
      font-style: normal;
      line-height: 15px;
    }
    .student-objective-option:has(input:checked),
    .student-objective-all:has(input:checked) {
      border-color: #93cfd8;
      background: #f1fbfd;
    }
    .practice-mode-choice:has(input:checked) {
      border-color: #93cfd8;
      background: #f1fbfd;
      box-shadow: 0 8px 18px rgba(20, 48, 68, .06);
    }
    .practice-config-card {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 11px;
      border: 1px solid #dce6ea;
      border-radius: 14px;
      background: #f8fbfd;
    }
    .compact-choice-group {
      grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    }
    .compact-choice-group legend {
      grid-column: 1 / -1;
    }
    .compact-choice {
      min-height: 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      text-align: center;
    }
    .compact-choice input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .compact-choice strong {
      grid-column: auto;
      white-space: nowrap;
      overflow-wrap: normal;
    }
    .compact-choice span {
      grid-column: auto;
      color: #566575;
      font-size: 10px;
      font-weight: 800;
      line-height: 13px;
    }
    .practice-config-card h3,
    .practice-config-card p {
      margin: 0;
    }
    .practice-config-card h3 {
      color: #101826;
      font-size: 16px;
      line-height: 21px;
    }
    .practice-config-card p,
    .practice-config-card label {
      color: #566575;
      font-size: 13px;
      line-height: 18px;
    }
    .practice-config-card label {
      display: grid;
      gap: 6px;
      font-weight: 800;
    }
    .practice-config-card select {
      width: 100%;
      min-height: 42px;
      border: 1px solid #cbdde5;
      border-radius: 10px;
      padding: 8px 10px;
      background: #ffffff;
      color: #101826;
      font: inherit;
    }
    .practice-setup-step select {
      width: 100%;
      min-height: 42px;
      border: 1px solid #cbdde5;
      border-radius: 10px;
      padding: 8px 10px;
      background: #ffffff;
      color: #101826;
      font: inherit;
    }
    .practice-review-start {
      justify-self: start;
    }
    .practice-state-copy {
      display: grid;
      gap: 6px;
      margin-top: 0;
    }
    .practice-state-copy h2 {
      color: #0e1726;
      font-size: 18px;
      line-height: 24px;
    }
    .practice-next-copy h3 {
      margin: 0;
      color: #0e1726;
      font-size: 16px;
      line-height: 22px;
    }
    .practice-state-copy p {
      color: #566575;
      font-size: 13px;
      line-height: 19px;
    }
    .practice-step-strip {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: space-between;
      color: #1f5b6c;
      font-size: 11px;
      font-weight: 800;
    }
    .practice-step-strip span {
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      border-radius: 14px;
      background: #ddeef2;
    }
    .practice-step-strip small {
      color: #66717d;
      font-size: 11px;
      line-height: 15px;
    }
    .practice-rail {
      height: 5px;
      margin-top: -6px;
      background: #dde8eb;
    }
    .practice-runtime-layout {
      display: grid;
      gap: 8px;
    }
    .practice-runtime-main,
    .practice-runtime-aside {
      min-width: 0;
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .practice-mobile-map {
      display: none;
    }
    @media (max-width: 899px) {
      .practice-mobile-map {
        display: grid;
        padding-bottom: env(safe-area-inset-bottom);
      }
      .practice-runtime-aside {
        display: none;
      }
      .practice-mobile-map .practice-map-card {
        padding: 7px 8px;
      }
      .practice-mobile-map .practice-map-chips {
        width: 100%;
        max-height: 146px;
        flex-wrap: wrap;
        overflow: hidden;
        padding-bottom: 2px;
      }
      .practice-mobile-map .practice-map-card[data-expanded="true"] .practice-map-chips {
        max-height: none;
      }
      .practice-mobile-map .practice-map-privacy {
        display: none;
      }
    }
    @media (max-width: 1040px) and (orientation: landscape) {
      .practice-platform-layout {
        width: min(100%, 920px);
      }
      .practice-mobile-frame {
        width: min(100%, 880px);
        min-height: auto;
      }
      .practice-options,
      .practice-static-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .practice-mobile-map {
        display: grid;
      }
      .practice-runtime-aside {
        display: none;
      }
    }
    .practice-runtime-tools {
      box-shadow: none;
    }
    .practice-question-card {
      display: grid;
      gap: 6px;
      padding: 10px;
      border-radius: 14px;
    }
    .practice-question-card p {
      color: #1f5b6c;
      font-size: 10px;
      font-weight: 800;
      line-height: 14px;
    }
    .practice-question-card .practice-official-code {
      width: fit-content;
      max-width: 100%;
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
      color: #66717d;
      font-size: 10px;
      line-height: 13px;
      overflow-wrap: break-word;
    }
    .practice-question-card h3 {
      color: #0e1726;
      font-size: 18px;
      line-height: 23px;
    }
    .official-question-conflict-warning {
      display: grid;
      gap: .3rem;
      margin: .85rem 0;
      padding: .8rem .9rem;
      border: 1px solid #d8a319;
      border-radius: .75rem;
      background: #fff8df;
      color: #4b3500;
      text-align: left;
    }
    .official-question-conflict-warning strong,
    .official-question-conflict-warning span,
    .official-question-conflict-warning small { color: inherit; }
    .student-challenge-player .practice-question-card {
      gap: 7px;
      padding: 8px 0 6px;
      border: 0;
      background: transparent;
    }
    .student-challenge-player .challenge-question-position {
      margin: 0;
      color: #54607A;
      font-size: 12px;
      font-weight: 900;
      line-height: 16px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .student-challenge-player .challenge-question-position:focus-visible {
      outline: 3px solid #FD6707;
      outline-offset: 3px;
      border-radius: 4px;
    }
    .student-challenge-player .challenge-question-text {
      min-width: 0;
      max-width: 100%;
      margin: 0;
      color: #031049;
      font-size: clamp(20px, 5.6vw, 28px);
      line-height: 1.24;
      letter-spacing: -.02em;
      overflow-wrap: anywhere;
    }
    .student-challenge-player .practice-question-card .challenge-question-trace {
      min-width: 0;
      max-width: 100%;
      margin: 0;
      color: #54607A;
      font-size: 11px;
      font-weight: 750;
      line-height: 15px;
      overflow-wrap: anywhere;
    }
    .student-challenge-player .student-app-main {
      width: min(calc(100% - 24px), 920px);
      padding-top: 12px;
    }
    .student-challenge-player .practice-stage-topline {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      color: #54607A;
      font-size: 12px;
      font-weight: 850;
    }
    .student-challenge-player .practice-stage-topline span:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Auditoria Alumno Fase 4 (08-09-2026), Hallazgo 2/3: el jugador de Retos de aula
       (.student-challenge-player) tenia el titulo/mapa de preguntas ya en navy, pero las
       opciones de respuesta A/B/C/D y los botones de accion seguian en el teal viejo -- las
       mismas clases base .practice-option/.practice-static-option/.practice-skip-button/
       .practice-secondary-link que .practice-session-v2 (Practica individual) SI migro.
       Mismos valores exactos que ese override, para que las dos superficies queden identicas. */
    .student-challenge-player .practice-option,
    .student-challenge-player .practice-static-option {
      border-color: #DCE1E8;
    }
    .student-challenge-player .practice-option strong,
    .student-challenge-player .practice-static-option strong {
      background: #F6F8FB;
      color: #031049;
    }
    .student-challenge-player .practice-option span,
    .student-challenge-player .practice-static-option span {
      color: #031049;
    }
    .student-challenge-player .practice-option:hover,
    .student-challenge-player .practice-option:focus-within {
      border-color: #B7C1D6;
    }
    .student-challenge-player .practice-option input[type="radio"] {
      accent-color: #031049;
    }
    .student-challenge-player .practice-skip-button,
    .student-challenge-player .practice-secondary-link {
      color: #54607A;
    }
    .challenge-submit-form {
      display: grid;
      grid-template-columns: minmax(0, auto) minmax(0, 1fr);
      align-items: center;
      gap: 6px 12px;
      margin-top: 4px;
    }
    .challenge-submit-form p {
      margin: 0;
      color: #54607A;
      font-size: 11px;
      font-weight: 750;
      line-height: 15px;
    }
    .challenge-guest-note {
      margin: 0;
      padding: 7px 9px;
      border-radius: 9px;
      background: rgba(3, 16, 73, .06);
      color: #031049;
      font-size: 11px;
      font-weight: 750;
      line-height: 15px;
    }
    .challenge-active-secondary-actions {
      margin-top: 2px;
      justify-items: center;
    }
    .challenge-question-map {
      display: grid;
      gap: 10px;
      min-width: 0;
      max-width: 100%;
      margin-top: 6px;
      padding: 12px;
      border: 1px solid #DCE1E8;
      border-radius: 14px;
      background: #fff;
    }
    .challenge-map-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      color: #54607A;
      font-size: 12px;
    }
    .challenge-map-heading strong {
      color: #031049;
      font-size: 14px;
    }
    .challenge-map-item {
      display: inline-grid;
      place-items: center;
      min-width: 40px;
      width: 40px;
      min-height: 44px;
      border: 1px solid #DCE1E8;
      border-radius: 999px;
      background: #F6F8FB;
      color: #031049;
      font-size: 12px;
      font-weight: 900;
      text-decoration: none;
    }

    .challenge-map-position-form {
      display: flex;
      flex: 0 0 auto;
      margin: 0;
    }

    .challenge-map-position-form .challenge-map-item {
      width: 48px;
    }

    .challenge-position-action {
      margin: 0;
    }
    .challenge-map-item.current {
      outline: 3px solid rgba(253, 103, 7, .3);
      border-color: #FD6707;
      background: #FD6707;
      color: #fff;
    }
    .challenge-map-item.correct {
      border-color: #17875d;
      background: #dcf6e8;
      color: #116244;
    }
    .challenge-map-item.incorrect {
      border-color: #cf4c46;
      background: #fde8e5;
      color: #a23732;
    }
    .challenge-map-item:focus-visible {
      outline: 3px solid #FD6707;
      outline-offset: 2px;
    }
    .challenge-map-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
      gap: 8px;
      padding-top: 2px;
    }
    .challenge-map-grid .challenge-map-item {
      width: 100%;
    }
    .challenge-map-toggle {
      display: none;
      min-height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #031049;
      font: inherit;
      font-weight: 900;
      text-align: left;
      cursor: pointer;
    }
    .challenge-complete-review {
      min-width: 0;
      border: 1px solid #DCE1E8;
      border-radius: 14px;
      background: #fff;
    }
    .challenge-complete-review > summary {
      min-height: 48px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      color: #031049;
      font-size: 14px;
      font-weight: 850;
      cursor: pointer;
    }
    .challenge-complete-review-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0 12px 14px 32px;
    }
    .challenge-complete-review-item {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid #DCE1E8;
      border-radius: 12px;
      background: #F6F8FB;
    }
    .challenge-complete-review-item.correct { border-color: #9bd2b5; }
    .challenge-complete-review-item.needs-review { border-color: #e1aaa4; }
    .challenge-complete-review-item.blank { border-color: #DCE1E8; }
    .challenge-complete-review-item h3,
    .challenge-complete-review-item p {
      margin: 0;
    }
    .challenge-complete-review-item h3,
    .challenge-complete-review-item .challenge-question-trace {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .challenge-review-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 0 12px 12px;
    }
    .challenge-review-filters button,
    .challenge-review-filters select {
      min-height: 44px;
      border: 1px solid #DCE1E8;
      border-radius: 999px;
      background: #fff;
      color: #031049;
      font: inherit;
      font-weight: 800;
    }
    .challenge-review-filters button { padding: 0 12px; }
    .challenge-review-filters button[aria-pressed="true"] {
      border-color: #031049;
      background: #031049;
      color: #fff;
    }
    .challenge-review-filters label {
      display: grid;
      gap: 4px;
      color: #54607A;
      font-size: 12px;
      font-weight: 750;
    }
    .challenge-review-filters label[hidden] { display: none; }
    .challenge-objective-breakdown {
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }
    .challenge-objective-breakdown summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #031049;
      font-size: 13px;
      font-weight: 850;
    }
    .challenge-objective-breakdown ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .challenge-objective-breakdown li {
      display: grid;
      gap: 3px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .72);
      font-size: 12px;
    }
    .challenge-objective-heading {
      color: #031049;
      font-size: 13px;
      font-weight: 850;
    }
    .challenge-objective-progress {
      display: block;
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(96, 113, 122, .18);
    }
    .challenge-objective-progress i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #031049;
    }
    .practice-choice-label {
      margin: 0;
      color: #405568;
      font-weight: 800;
    }
    .practice-options {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
    }
    .practice-option {
      display: grid;
      position: relative;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 54px;
      padding: 9px 10px;
      border: 1px solid #dde8eb;
      border-radius: 14px;
      background: #ffffff;
      color: #0d1b2a;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .practice-option input[type="radio"] {
      position: absolute;
      opacity: 0;
      accent-color: #0b6f69;
    }
    .practice-option strong {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #eef4f6;
      color: #1f5b6c;
      font-weight: 900;
    }
    .practice-option span {
      min-width: 0;
      color: #101826;
      font-size: 13px;
      line-height: 17px;
      overflow-wrap: anywhere;
    }
    .practice-option:hover,
    .practice-option:focus-within {
      border-color: #2c7a8b;
      box-shadow: 0 8px 18px rgba(12, 31, 51, .08);
    }
    .practice-option:has(input[type="radio"]:checked) {
      border-color: #7b6ee6;
      border-width: 2px;
      background: #f1f0ff;
      box-shadow: none;
    }
    .practice-option:has(input[type="radio"]:checked) strong {
      background: #7b6ee6;
      color: #ffffff;
    }
    .practice-action-row {
      display: grid;
      gap: 8px;
    }
    .practice-action-state {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(96px, .62fr);
      gap: 8px;
      align-items: center;
    }
    .practice-action-state[hidden] {
      display: none;
    }
    .practice-nav-button {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #cbdde5;
      border-radius: 14px;
      padding: 12px 14px;
      background: #ffffff;
      color: #1f5b6c;
      font-size: 13px;
      font-weight: 900;
      line-height: 17px;
      text-align: center;
      text-decoration: none;
    }
    .practice-nav-button.disabled {
      color: #95a2ad;
      background: #eef4f6;
    }
    .practice-skip-button {
      min-height: 46px;
      border: 1px solid #cbdde5;
      border-radius: 14px;
      padding: 12px 14px;
      background: #ffffff;
      color: #1f5b6c;
      font: inherit;
      font-size: 13px;
      font-weight: 900;
      line-height: 17px;
      cursor: pointer;
    }
    .practice-secondary-link {
      color: #1f5b6c;
      font-size: 13px;
      font-weight: 900;
      line-height: 17px;
      text-align: center;
      text-decoration: none;
    }
    .practice-secondary-link[aria-disabled="true"] {
      cursor: progress;
      opacity: .72;
    }
    .practice-closed-actions {
      display: grid;
      grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      margin-top: 2px;
    }
    .practice-finish-form {
      margin: 0;
    }
    .practice-finish-form.compact {
      display: flex;
      justify-content: center;
    }
    .practice-finish-link {
      min-height: 36px;
      border: 0;
      border-radius: 999px;
      padding: 8px 11px;
      background: transparent;
      color: #1f5b6c;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      line-height: 15px;
      cursor: pointer;
    }
    .practice-processing-feedback {
      min-height: 17px;
      margin: -4px 0 0;
      color: #566575;
      font-size: 12px;
      font-weight: 800;
      line-height: 17px;
      text-align: center;
    }
    .practice-correction-surface {
      display: grid;
      gap: 12px;
    }
    .practice-correction-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
      gap: 14px;
      align-items: center;
    }
    .practice-correction-actions .student-primary-cta {
      min-height: 46px;
    }
    .practice-next-question-panel {
      display: none;
      gap: 14px;
      padding-top: 14px;
      border-top: 1px solid #e2eaee;
    }
    .practice-next-question-panel:target {
      display: grid;
    }
    .practice-correction-surface h3 {
      margin: 0;
      color: #0e1726;
      font-size: 18px;
      line-height: 24px;
    }
    .practice-correction-facts { margin: 0; }
    .practice-static-options {
      display: grid;
      gap: 10px;
    }
    .practice-static-option {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 62px;
      padding: 12px;
      border: 1px solid #dde8eb;
      border-radius: 14px;
      background: #ffffff;
    }
    .practice-static-option strong {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #eef4f6;
      color: #1f5b6c;
    }
    .practice-static-option span {
      min-width: 0;
      max-width: 100%;
      color: #101826;
      font-size: 14px;
      line-height: 18px;
      overflow-wrap: anywhere;
    }
    .practice-static-option small {
      grid-column: 2;
      color: #566575;
      font-size: 11px;
      font-weight: 800;
    }
    .practice-option-status {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 15px;
      line-height: 1;
    }
    .practice-static-option.selected {
      border: 2px solid #7b6ee6;
      background: #f1f0ff;
    }
    .practice-static-option.selected strong {
      background: #7b6ee6;
      color: #ffffff;
    }
    .practice-static-option.neutral {
      border-color: #dde8eb;
      background: #ffffff;
    }
    .practice-static-option.correct {
      border: 2px solid #268157;
      background: #e6f6ee;
    }
    .practice-static-option.correct strong {
      background: #268157;
      color: #ffffff;
    }
    .practice-static-option.correct .practice-option-status {
      background: #268157;
      color: #ffffff;
    }
    .practice-static-option.wrong {
      border: 2px solid #bf4343;
      background: #ffefed;
    }
    .practice-static-option.wrong strong {
      background: #bf4343;
      color: #ffffff;
    }
    .practice-static-option.wrong .practice-option-status {
      background: #bf4343;
      color: #ffffff;
    }
    .practice-feedback-card {
      display: grid;
      grid-template-columns: 4px minmax(0, 1fr);
      gap: 12px;
      padding: 14px;
    }
    .practice-feedback-card h4,
    .student-summary-note h3 {
      margin: 0 0 4px;
      color: #0e1726;
      font-size: 14px;
      line-height: 18px;
    }
    .practice-feedback-card p,
    .student-summary-note p {
      margin: 0;
      color: #566575;
      font-size: 12px;
      line-height: 17px;
    }
    .practice-feedback-card .practice-score-note {
      margin-top: 8px;
      color: #1f5b6c;
      font-weight: 800;
    }
    .didactic-explanation-v2 {
      display: grid;
      gap: 16px;
      width: 100%;
      max-width: 68ch;
      padding: 20px;
      border: 1px solid #d8e2e3;
      border-radius: 20px;
      background: #fff;
      color: #142a33;
      box-shadow: 0 10px 28px rgba(20, 71, 81, .07);
      overflow-wrap: anywhere;
    }
    .didactic-explanation-v2 h3,
    .didactic-explanation-v2 p {
      margin: 0;
    }
    .didactic-explanation-v2 h3 {
      color: #142a33;
      font-size: clamp(20px, 3vw, 26px);
      font-weight: 800;
      line-height: 1.25;
    }
    .didactic-explanation-v2__copy {
      display: grid;
      gap: 10px;
    }
    .didactic-explanation-v2__copy p {
      color: #314950;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
    }
    .didactic-explanation-v2__visual {
      padding: 14px;
      border: 1px solid #cfe0e1;
      border-radius: 16px;
      background: #eef7f7;
    }
    .didactic-explanation-v2__visual-grid,
    .didactic-explanation-v2__visual ol {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .didactic-explanation-v2__visual-grid > div,
    .didactic-explanation-v2__visual li {
      display: flex;
      min-width: 0;
      gap: 10px;
      align-items: flex-start;
      padding: 12px;
      border: 1px solid #bdd4d6;
      border-radius: 12px;
      background: #fff;
    }
    .didactic-explanation-v2__visual-index {
      display: grid;
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      place-items: center;
      border: 1px solid #7faeb2;
      border-radius: 50%;
      color: #124751;
      font-size: 13px;
      font-weight: 700;
    }
    .didactic-explanation-v2__visual strong,
    .didactic-explanation-v2__visual small {
      display: block;
    }
    .didactic-explanation-v2__visual strong {
      color: #124751;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.35;
    }
    .didactic-explanation-v2__visual small {
      margin-top: 4px;
      color: #526970;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
    }
    .didactic-explanation-v2__equation {
      margin-top: 12px !important;
      color: #124751;
      font-size: 18px;
      font-weight: 800;
      text-align: center;
    }
    .didactic-explanation-v2__warning {
      padding: 13px 14px;
      border: 1px solid #e2c47c;
      border-radius: 12px;
      background: #fff6e7;
    }
    .didactic-explanation-v2__warning p {
      color: #5d451e;
      font-size: 16px;
      line-height: 1.5;
    }
    .didactic-explanation-v2__remember {
      display: flex;
      gap: 10px;
      align-items: baseline;
      color: #314950;
      font-size: 16px;
      line-height: 1.5;
    }
    .didactic-explanation-v2__remember strong {
      color: #0d6670;
      font-weight: 700;
    }
    .didactic-explanation-v2__source {
      border-top: 1px solid #d8e2e3;
      padding-top: 10px;
      color: #5b6d74;
      font-size: 14px;
    }
    .didactic-explanation-v2__source summary {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      font-weight: 600;
    }
    .didactic-explanation-v2__source summary:focus-visible {
      outline: 3px solid #0d6670;
      outline-offset: 3px;
    }
    .didactic-explanation-v2__source p {
      padding-bottom: 4px;
      color: #5b6d74;
      font-size: 14px;
      line-height: 1.45;
    }
    @media (max-width: 430px) {
      .didactic-explanation-v2 {
        gap: 14px;
        padding: 16px;
        border-radius: 16px;
      }
      .didactic-explanation-v2__visual-grid,
      .didactic-explanation-v2__visual ol {
        grid-template-columns: 1fr;
      }
      .didactic-explanation-v2__remember {
        display: grid;
        gap: 2px;
      }
    }
    .didactic-explanation-v3 {
      width: 100%;
      max-width: 68ch;
      border: 1px solid #DCE1E8;
      border-radius: 18px;
      background: #ffffff;
      color: #031049;
      box-shadow: 0 8px 24px rgba(3, 16, 73, .07);
      overflow-wrap: break-word;
      hyphens: none;
    }
    .didactic-explanation-v3__summary {
      padding: 18px 19px;
      border-radius: 17px 17px 0 0;
      background: #F6F8FB;
    }
    .didactic-explanation-v3 p {
      margin: 0;
      color: #031049;
      font-size: 18px;
      line-height: 1.55;
    }
    .didactic-explanation-v3 strong {
      color: #031049;
      font-weight: 800;
      background: none;
      text-decoration: none;
    }
    .didactic-explanation-v3__memory {
      padding: 14px 19px;
      border-top: 1px solid #DCE1E8;
      background: #F6F8FB;
    }
    .didactic-explanation-v3__memory p {
      color: #54607A;
      font-size: 16px;
      line-height: 1.55;
    }
    .didactic-explanation-v3 details {
      border-top: 1px solid #DCE1E8;
    }
    .didactic-explanation-v3 summary {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      color: #031049;
      font-size: 15px;
      font-weight: 900;
      line-height: 20px;
      cursor: pointer;
      list-style: none;
    }
    .didactic-explanation-v3 summary::-webkit-details-marker {
      display: none;
    }
    .didactic-explanation-v3 summary::after {
      content: "+";
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border: 1px solid #DCE1E8;
      border-radius: 999px;
      background: #F6F8FB;
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }
    .didactic-explanation-v3 details[open] summary::after {
      content: "−";
    }
    .didactic-explanation-v3 summary:focus-visible {
      outline: 3px solid #FD6707;
      outline-offset: 3px;
    }
    .didactic-explanation-v3__details {
      display: grid;
      gap: 16px;
      padding: 4px 16px 16px;
    }
    .didactic-explanation-v3__steps {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .didactic-explanation-v3__steps li {
      position: relative;
      padding-left: 18px;
      color: #031049;
      font-size: 16px;
      line-height: 1.55;
    }
    .didactic-explanation-v3__steps li::before {
      content: "";
      position: absolute;
      top: .68em;
      left: 2px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #031049;
    }
    .didactic-explanation-v3__details h5 {
      margin: 0 0 7px;
      color: #031049;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0;
      line-height: 20px;
      text-transform: none;
    }
    .didactic-explanation-v3__traps {
      padding: 13px 14px;
      border: 1px solid #eed69d;
      border-radius: 12px;
      background: #fff8e9;
    }
    .didactic-explanation-v3__traps ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .didactic-explanation-v3__traps li {
      position: relative;
      margin: 0;
      padding-left: 18px;
      color: #493f2d;
      font-size: 15px;
      line-height: 1.5;
    }
    .didactic-explanation-v3__traps li::before {
      content: "";
      position: absolute;
      top: .66em;
      left: 2px;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: #a77a22;
    }
    .didactic-explanation-v3__glossary dl {
      display: grid;
      gap: 8px;
      margin: 0;
    }
    .didactic-explanation-v3__glossary dl > div {
      display: grid;
      grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr);
      gap: 10px;
    }
    .didactic-explanation-v3__glossary dt {
      color: #031049;
      font-weight: 900;
    }
    .didactic-explanation-v3__glossary dd {
      margin: 0;
      color: #54607A;
    }
    .practice-feedback-card.didactic-learning-card {
      border-color: #DCE1E8;
      background: #F6F8FB;
    }
    .practice-feedback-card.didactic-learning-card > span {
      background: #031049;
    }
    .practice-score-note strong {
      font-size: 13px;
    }
    .practice-feedback-card.needs-review {
      border-color: #bf4343;
      background: #ffefed;
    }
    .practice-feedback-card.needs-review > span {
      background: #bf4343;
    }
    .practice-feedback-card.correct {
      border-color: #268157;
      background: #e6f6ee;
    }
    .practice-feedback-card.correct > span {
      background: #268157;
    }
    .practice-map-card {
      display: grid;
      gap: 5px;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      padding: 8px;
    }
    .practice-map-compact header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #0e1726;
      font-size: 11px;
      font-weight: 900;
      line-height: 15px;
    }
    .practice-map-compact header strong {
      color: #1f5b6c;
      font-size: 12px;
      line-height: 16px;
    }
    .practice-map-card h3 {
      color: #0e1726;
      font-size: 14px;
      line-height: 18px;
    }
    .practice-map-card p {
      color: #566575;
      font-size: 10px;
      line-height: 14px;
    }
    .practice-map-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
      max-width: 100%;
      max-height: none;
      margin-top: 1px;
      overflow: visible;
      padding: 2px 2px 4px;
    }
    .practice-map-chips a[hidden] {
      display: none;
    }
    .practice-map-card[data-expanded="true"] .practice-map-chips {
      max-height: none;
    }
    .practice-map-toggle {
      min-height: 36px;
      border: 0;
      border-radius: 10px;
      padding: 7px 10px;
      background: #eef4f1;
      color: #315d4c;
      font: inherit;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }
    .practice-map-chips a {
      min-width: 44px;
      min-height: 44px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid #dde8eb;
      background: #eef4f6;
      color: #1f5b6c;
      font-size: 14px;
      font-weight: 900;
      line-height: 18px;
      text-decoration: none;
    }
    .practice-map-chips a.current {
      border-color: #2c7a8b;
      background: #2c7a8b;
      color: #ffffff;
      box-shadow: 0 0 0 3px rgba(44, 122, 139, .18);
    }
    .practice-map-chips a.correct {
      border-color: #268157;
      background: #268157;
      color: #ffffff;
    }
    .practice-map-chips a.wrong {
      border-color: #bf4343;
      background: #bf4343;
      color: #ffffff;
    }
    .practice-map-chips a.blank {
      border-color: #d8dde3;
      background: #f3f5f7;
      color: #66717d;
    }
    .practice-map-privacy,
    .practice-note-soft p {
      color: #566575;
      font-size: 12px;
      line-height: 18px;
    }
    .practice-note-soft {
      padding: 0 2px 18px;
    }
    .student-session-summary {
      display: grid;
      gap: 16px;
      padding: 18px;
      background: #f5f8f8;
      border: 0;
    }
    .practice-context-label {
      color: #1f5b6c;
      font-size: 11px;
      font-weight: 800;
      line-height: 14px;
    }
    .student-session-summary h2 {
      color: #0e1726;
      font-size: 20px;
      line-height: 25px;
    }
    .student-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .student-equivalent-result {
      display: grid;
      gap: 8px;
      padding: 16px;
      border: 1px solid #dce6ea;
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 12px 24px rgba(20, 48, 68, .07);
    }
    .student-equivalent-result.passed {
      border-color: #9bd2b5;
      background: #eef8f2;
    }
    .student-equivalent-result.not-passed {
      border-color: #e1aaa4;
      background: #fff2f0;
    }
    .student-equivalent-kicker {
      color: #345766;
      font-size: 11px;
      font-weight: 800;
      line-height: 14px;
    }
    .student-equivalent-status {
      color: #0e1726;
      font-size: 28px;
      font-weight: 900;
      line-height: 32px;
      letter-spacing: 0;
    }
    .student-equivalent-score {
      color: #0e1726;
      font-size: 18px;
      font-weight: 800;
      line-height: 23px;
    }
    .student-equivalent-minimum,
    .student-equivalent-margin,
    .student-equivalent-scoring-rule,
    .student-equivalent-time,
    .student-equivalent-tally {
      color: #364a5a;
      font-size: 13px;
      line-height: 18px;
    }
    .student-equivalent-margin {
      font-weight: 800;
    }
    /* Maqueta aprobada 17-09-2026 (5DrNm6ovvT474VpvMJ3f23, punto A): "Regla de este reto" y el
       recuento de aciertos/fallos/blanco no tenian NINGUNA regla propia -- heredaban el tamaño
       de parrafo por defecto (16px), mas grande que el resto de los datos secundarios (13px) y
       compitiendo con la puntuación (18px). Mismo tamaño/color ya usado por minimum/margin, sin
       inventar un valor nuevo: un solo dato manda (el estado), la puntuación lo acompaña, el
       resto es ficha de apoyo. */
    .student-equivalent-disclaimer {
      padding-top: 8px;
      border-top: 1px solid rgba(16, 32, 51, .1);
      color: #566575;
      font-size: 12px;
      line-height: 17px;
    }
    .student-summary-grid div {
      display: grid;
      gap: 2px;
      padding: 12px;
      border: 1px solid #dde8eb;
      border-radius: 14px;
      background: #ffffff;
    }
    .student-summary-grid strong {
      color: #0e1726;
      font-size: 20px;
      line-height: 24px;
    }
    .student-summary-grid span {
      color: #566575;
      font-size: 11px;
      line-height: 15px;
    }
    .student-summary-note {
      padding: 14px;
    }
    .student-summary-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .student-summary-repeat-form {
      margin: 0;
    }
    .student-summary-repeat-form .secondary-action {
      width: 100%;
      font: inherit;
      cursor: pointer;
    }
    .student-summary-actions .full {
      grid-column: 1 / -1;
    }
    .student-support-facts {
      display: grid;
      gap: 10px;
    }
    .student-support-facts div {
      padding: 12px;
      border: 1px solid #dce6ea;
      border-radius: 12px;
      background: #f8fbfd;
    }
    .student-support-facts strong {
      color: #101826;
      font-size: 13px;
      line-height: 17px;
    }
    .secondary-action {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #dde8eb;
      border-radius: 10px;
      background: #ffffff;
      color: #1f5b6c;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      text-decoration: none;
    }
    .practice-correction-head {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .practice-correction-head h2 {
      margin: 0;
    }
    .result-badge {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: .8rem;
      font-weight: 900;
    }
    .result-badge.correct,
    .corrected-practice-review.correct {
      border-color: #b7e3ca;
      background: #effaf4;
      color: #145a32;
    }
    .result-badge.needs-review,
    .corrected-practice-review.needs-review {
      border-color: #f0d0a2;
      background: #fff8ed;
      color: #684500;
    }
    .completed-practice-summary.correct,
    .completed-practice-summary.needs-review {
      border: 1px solid #dce6ea;
      background: #ffffff;
      color: #101826;
      box-shadow: 0 12px 24px rgba(20, 48, 68, .07);
    }
    .result-badge.pending,
    .corrected-practice-review.pending {
      border-color: #cfdce8;
      background: #f8fbfd;
      color: #24435c;
    }
    .practice-review-list {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }
    .practice-review-summary summary {
      cursor: pointer;
      color: #0e1726;
      font-size: 14px;
      font-weight: 900;
      line-height: 18px;
    }
    .practice-review-summary:not([open]) {
      gap: 0;
    }
    .practice-review-item {
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #ffffff;
    }
    .practice-review-item.correct {
      border-color: #b7e3ca;
    }
    .practice-review-item.needs-review {
      border-color: #f0d0a2;
    }
    .practice-review-item h3 {
      margin: 0 0 6px;
      font-size: 1rem;
      line-height: 1.25;
    }
    .practice-review-item p {
      margin: 0 0 10px;
    }
    .practice-review-item p:last-child {
      margin-bottom: 0;
    }
    .module-card {
      min-width: 0;
      min-height: 172px;
      padding: 18px;
    }
    .module-card.locked {
      background: #f8fbfd;
      border-style: dashed;
      box-shadow: none;
    }
    .module-card span {
      display: block;
      margin-bottom: 12px;
      color: #0a766e;
      font-size: .76rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    .module-card h3 {
      margin: 0 0 8px;
      color: #0d1b2a;
      font-size: 1.02rem;
      line-height: 1.25;
    }
    .module-card p {
      margin: 0;
      color: #5f7182;
      font-size: .9rem;
      line-height: 1.5;
    }
    .admin-header {
      align-items: center;
    }
    .admin-summary {
      min-width: 150px;
      padding: 18px;
      text-align: center;
    }
    .admin-summary strong,
    .admin-summary span {
      display: block;
    }
    .admin-summary strong {
      color: #0d1b2a;
      font-size: 2.2rem;
      line-height: 1;
    }
    .admin-summary span {
      margin-top: 4px;
      color: #66798a;
      font-weight: 900;
    }
    .teacher-classic-challenge-panel [id],
    .teacher-dashboard [id] {
      scroll-margin-top: 132px;
    }
    .teacher-challenge-form [data-challenge-step],
    .teacher-challenge-form fieldset,
    .teacher-challenge-form .teacher-exam-summary {
      scroll-margin-top: 132px;
    }
    .teacher-create-workspace,
    .teacher-active-workspace {
      display: grid;
      gap: 14px;
      scroll-margin-top: 76px;
    }
    .teacher-create-workspace {
      padding: 18px;
      border: 1px solid #d5e3ec;
      border-radius: 12px;
      background: #f8fbfc;
    }
    .teacher-active-workspace {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid #d5e3ec;
    }
    #teacher-home,
    #teacher-followup,
    #teacher-review {
      scroll-margin-top: 76px;
    }
    .teacher-focus-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .teacher-now-panel .teacher-actions,
    .teacher-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .disabled-action {
      border-style: dashed;
      color: #66798a;
      cursor: default;
      opacity: .86;
    }
    .teacher-tool-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .teacher-tool-card {
      min-width: 0;
      min-height: 190px;
      display: grid;
      gap: 12px;
      align-content: start;
      padding: 18px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #ffffff;
      color: #102030;
      box-shadow: 0 12px 28px rgba(12, 31, 51, .07);
    }
    .teacher-tool-card h3,
    .teacher-tool-card p {
      margin: 0;
    }
    .teacher-tool-card h3 {
      color: #102030;
      font-size: 1.08rem;
      line-height: 1.25;
    }
    .teacher-tool-card p {
      color: #536678;
      line-height: 1.5;
    }
    .teacher-challenge-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 16px;
      border: 1px solid #d7e3ed;
      border-radius: 12px;
      background: #f8fbfa;
    }
    .teacher-challenge-entry div {
      display: grid;
      gap: 3px;
    }
    .teacher-challenge-entry span {
      color: #5f7182;
      font-size: 13px;
    }
    .teacher-live-command {
      display: grid;
      gap: 16px;
      margin-bottom: 18px;
      padding: 18px;
      border: 2px solid #b9ddd5;
      border-radius: 12px;
      background: #f2faf7;
    }
    .teacher-live-command .panel-heading,
    .teacher-live-command .teacher-challenge-list {
      margin: 0;
    }
    .teacher-live-connection-status {
      margin: 0;
      padding: 10px 12px;
      border: 1px solid #e2b768;
      border-radius: 8px;
      background: #fff8e8;
      color: #614a1e;
      font-weight: 750;
    }
    .teacher-challenge-live-shell,
    .teacher-challenge-live-grid,
    .teacher-challenge-live-card,
    .teacher-challenge-live-ranking {
      display: grid;
      gap: 14px;
    }
    .teacher-challenge-live-intro {
      display: grid;
      gap: 3px;
      padding: 12px 14px;
      border-radius: 9px;
      background: #dff2ec;
      color: #164a3c;
    }
    .teacher-challenge-live-intro span,
    .teacher-challenge-live-card-head p,
    .teacher-challenge-live-ranking-head span,
    .teacher-live-participant span {
      color: #536b65;
      line-height: 1.4;
    }
    .teacher-challenge-live-card {
      padding: 16px;
      border: 1px solid #bddbd3;
      border-radius: 11px;
      background: #ffffff;
    }
    .teacher-challenge-live-card-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
    }
    .teacher-challenge-live-card-head h4,
    .teacher-challenge-live-card-head p {
      margin: 6px 0 0;
    }
    .teacher-challenge-live-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }
    .teacher-challenge-live-metrics div {
      display: grid;
      gap: 3px;
      padding: 10px 12px;
      border-radius: 8px;
      background: #f0f6f4;
    }
    .teacher-challenge-live-metrics dt {
      color: #536b65;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }
    .teacher-challenge-live-metrics dd {
      margin: 0;
      color: #123e33;
      font-size: 1.25rem;
      font-weight: 900;
    }
    .teacher-challenge-live-ranking-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: baseline;
    }
    .teacher-challenge-live-ranking ol {
      display: grid;
      gap: 7px;
      max-height: 520px;
      margin: 0;
      padding: 0;
      overflow: auto;
      overscroll-behavior: contain;
      list-style: none;
    }
    .teacher-challenge-live-ranking ol:focus-visible {
      outline: 3px solid #0b6f62;
      outline-offset: 3px;
    }
    .teacher-challenge-live-ranking li {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid #dae7e3;
      border-radius: 8px;
      background: #f9fbfa;
    }
    .teacher-live-position {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border-radius: 50%;
      background: #dceee9;
      color: #164a3c;
      font-weight: 900;
    }
    .teacher-live-participant {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .teacher-live-points {
      white-space: nowrap;
      color: #123e33;
    }
    .teacher-live-controls {
      padding: 12px 14px;
      border: 1px solid #c9ddd7;
      border-radius: 9px;
      background: #ffffff;
    }
    .teacher-live-controls .panel-heading {
      margin: 0 0 14px;
    }
    @media (max-width: 760px) {
      .teacher-create-workspace {
        padding: 14px;
      }
      .teacher-team-duel-priority { grid-template-columns: 1fr; }
      .teacher-team-duel-actions { display: grid; grid-template-columns: 1fr; }
      .teacher-team-duel-actions form,
      .teacher-team-duel-actions .button { width: 100%; }
      .teacher-challenge-live-card-head,
      .teacher-challenge-live-ranking-head {
        display: grid;
      }
      .teacher-challenge-live-ranking li {
        grid-template-columns: 34px minmax(0, 1fr);
      }
      .teacher-live-points {
        grid-column: 2;
      }
    }
    .teacher-draft-review {
      display: grid;
      gap: 14px;
      margin-bottom: 18px;
      padding: 18px;
      border: 1px solid #d5e3ec;
      border-radius: 12px;
      background: #ffffff;
    }
    .teacher-ranking-current {
      display: grid;
      gap: 14px;
      margin-bottom: 18px;
      padding: 18px;
      border: 1px solid #d5e3ec;
      border-radius: 12px;
      background: #ffffff;
    }
    .teacher-ranking-current .panel-heading,
    .teacher-ranking-current .teacher-list {
      margin: 0;
    }
    .teacher-draft-review .panel-heading,
    .teacher-draft-review .teacher-challenge-list {
      margin: 0;
    }
    .teacher-challenge-create,
    .teacher-challenge-history {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid #d5e3ec;
      border-radius: 10px;
      background: #f8fbfc;
    }
    .teacher-challenge-create > summary,
    .teacher-challenge-history > summary {
      cursor: pointer;
      font-weight: 850;
    }
    .teacher-challenge-create[open] > summary,
    .teacher-challenge-history[open] > summary {
      margin-bottom: 16px;
    }
    .teacher-challenge-builder {
      display: grid;
      gap: 16px;
    }
    .teacher-challenge-template-empty,
    .teacher-challenge-template-section {
      display: grid;
      gap: 12px;
      margin-bottom: 18px;
      padding: 16px;
      border: 1px solid #d5e3ec;
      border-radius: 10px;
      background: #f7fafc;
    }
    .teacher-challenge-template-empty span,
    .teacher-challenge-template-section p,
    .teacher-challenge-template-grid small {
      color: #5c6f80;
      line-height: 1.45;
    }
    .teacher-challenge-template-section h3,
    .teacher-challenge-template-section p {
      margin: 0;
    }
    .teacher-challenge-template-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .teacher-challenge-template-grid article {
      display: grid;
      align-content: start;
      gap: 8px;
      padding: 14px;
      border: 1px solid #cfdee8;
      border-radius: 9px;
      background: #ffffff;
    }
    .teacher-challenge-template-grid article > span {
      color: #08756e;
      font-size: .78rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .teacher-challenge-save-template,
    .teacher-challenge-lifecycle {
      width: min(520px, 100%);
      padding: 12px;
      border: 1px solid #d9e4ec;
      border-radius: 8px;
      background: #fbfcfd;
    }
    .teacher-challenge-save-template summary,
    .teacher-challenge-lifecycle summary {
      cursor: pointer;
      font-weight: 850;
    }
    .teacher-challenge-save-template form,
    .teacher-challenge-save-template label,
    .teacher-challenge-lifecycle form {
      display: grid;
      gap: 8px;
    }
    .teacher-challenge-save-template form,
    .teacher-challenge-lifecycle form {
      margin-top: 12px;
    }
    .teacher-challenge-lifecycle p {
      margin: 10px 0 0;
      color: #5c6f80;
      line-height: 1.45;
    }
    .teacher-challenge-pin-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      width: min(620px, 100%);
    }
    .teacher-challenge-pin-controls small {
      color: #5c6f80;
    }
    .teacher-team-duel-priority {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      width: min(720px, 100%);
    }
    .teacher-team-duel-priority > div {
      display: grid;
      gap: 3px;
      padding: 12px;
      border: 1px solid #cfe1dd;
      border-radius: 10px;
      background: #f1f8f6;
    }
    .teacher-team-duel-priority span { color: #586c78; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
    .teacher-team-duel-priority strong { color: #123b39; font-size: 1.05rem; }
    .teacher-team-duel-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      width: min(860px, 100%);
      padding: 12px;
      border-radius: 10px;
      background: #eef7f5;
    }
    .teacher-team-duel-actions form { margin: 0; }
    .teacher-spotlight-control { display: grid; gap: 12px; width: 100%; padding: 14px; border: 2px solid #8fc7bd; border-radius: 14px; background: #f4fbf9; }
    .teacher-spotlight-control .teacher-team-duel-priority,
    .teacher-spotlight-control .spotlight-queue,
    .teacher-spotlight-control .teacher-team-duel-actions { width: 100%; }
    .spotlight-queue { display: grid; gap: 8px; width: min(860px, 100%); }
    .spotlight-queue ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .spotlight-queue li { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #cfe1dd; border-radius: 999px; background: #fff; }
    .spotlight-queue li[aria-current="true"] { border-color: #08756e; background: #e5f6f2; color: #075d58; font-weight: 800; }
    .spotlight-queue li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #123b39; color: #fff; font-size: .75rem; }
    .spotlight-student-status.active { border-color: #08756e; background: #e5f6f2; }
    .spotlight-waiting-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; text-align: left; }
    .spotlight-waiting-card dl div { padding: 9px; border-radius: 9px; background: #f2f8f6; }
    .spotlight-waiting-card dt { color: #586c78; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
    .spotlight-waiting-card dd { margin: 3px 0 0; color: #123b39; font-weight: 850; }
    .spotlight-pass-dialog { max-width: min(360px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 22px; box-shadow: 0 24px 70px #10203055; color: #173137; }
    .spotlight-pass-dialog::backdrop { background: #10203099; }
    .spotlight-pass-dialog strong { font-size: 1.25rem; }
    .spotlight-pass-dialog p { line-height: 1.5; }
    .spotlight-pass-dialog .actions { display: grid; gap: 8px; }
    .spotlight-turn-history li small { display: grid; gap: 3px; margin-top: 7px; color: #52666d; }
    .spotlight-turn-history li small b { color: #075d58; }
    .spotlight-review-outcome-summary { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
    .spotlight-review-outcome-summary div { display: grid; gap: 2px; padding: 8px; border-radius: 8px; background: #F6F8FB; text-align: center; }
    .spotlight-review-outcome-summary dt { color: #54607A; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
    .spotlight-review-outcome-summary dd { margin: 0; color: #031049; font-size: 1.05rem; font-weight: 900; }
    .spotlight-review-official-trace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
    .spotlight-review-official-trace h3 { grid-column: 1 / -1; margin: 0; font-size: .9rem; }
    .spotlight-review-official-trace article { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid #d6e2df; border-radius: 8px; background: #fff; }
    .spotlight-review-official-trace article strong { color: #075d58; }
    .spotlight-review-official-trace article span { color: #52666d; font-size: .78rem; font-weight: 800; }
    .spotlight-review-official-trace article p { overflow: hidden; margin: 0; font-size: .78rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
    .teacher-challenge-pin-expired {
      border-color: #e4c56d;
      background: #fff9e8;
    }
    .teacher-challenge-builder-grid,
    .teacher-challenge-content-mode {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .teacher-challenge-counts {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .teacher-challenge-counts[hidden] {
      display: none !important;
    }
    .teacher-real-official-exam-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .teacher-total-duration {
      display: grid;
      grid-template-columns: minmax(180px, .6fr) minmax(160px, .4fr);
      gap: 10px 14px;
      margin: 0;
      padding: 14px;
      border: 1px solid #d7e3ed;
      border-radius: 10px;
      background: #f8fbfd;
    }
    .teacher-total-duration legend { padding: 0 6px; color: #0a766e; font-weight: 900; }
    .teacher-total-duration label { display: grid; gap: 6px; color: #17342a; font-weight: 800; }
    .teacher-total-duration-unlimited { display: flex !important; align-items: end; gap: 8px; padding-bottom: 10px; }
    .teacher-total-duration-unlimited input { width: 18px; height: 18px; margin: 0; }
    .teacher-total-duration p { grid-column: 1 / -1; margin: 0; color: #075d58; font-weight: 850; }
    .teacher-challenge-builder [data-challenge-round-time][hidden],
    .teacher-challenge-builder [data-challenge-turn-time][hidden],
    .teacher-challenge-template-grid [data-template-round-time][hidden],
    .teacher-challenge-template-grid [data-template-turn-time][hidden] { display: none !important; }
    .teacher-summary-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }
    .teacher-summary-fields > div {
      min-width: 0;
      padding: 10px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #ffffff;
    }
    .teacher-summary-fields dt { color: #526b7d; font-size: .73rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
    .teacher-summary-fields dd { margin: 4px 0 0; color: #17342a; font-weight: 800; overflow-wrap: anywhere; }
    .teacher-catalog-search-results { display: grid; gap: 10px; }
    .teacher-catalog-search-result {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 12px;
      border: 1px solid #d7e3ed;
      border-radius: 10px;
      background: #ffffff;
      cursor: pointer;
    }
    .teacher-catalog-search-result input { width: 18px; min-height: 18px; margin: 3px 0 0; }
    .teacher-catalog-search-result span { display: grid; gap: 4px; min-width: 0; }
    .teacher-catalog-search-result strong { color: #075d58; }
    .teacher-catalog-search-result small { color: #526b7d; font-weight: 800; }
    .teacher-catalog-search-result em { color: #17342a; font-style: normal; line-height: 1.45; }
    .teacher-challenge-objectives {
      border: 1px solid #d7e3ed;
      border-radius: 12px;
      background: #f9fbfd;
    }
    .teacher-challenge-objectives > summary {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      color: #17342a;
      cursor: pointer;
      font-weight: 850;
    }
    .teacher-challenge-objectives > summary span {
      color: #66798a;
      font-size: 12px;
      font-weight: 650;
    }
    .teacher-challenge-objective-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      max-height: 420px;
      overflow-y: auto;
      padding: 0 14px 14px;
    }
    .teacher-challenge-objective-grid label {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      padding: 11px;
      border: 1px solid #dbe6ef;
      border-radius: 10px;
      background: #ffffff;
    }
    .teacher-challenge-objective-grid input {
      width: 18px;
      min-height: 18px;
      margin: 2px 0 0;
    }
    .teacher-challenge-objective-grid span,
    .teacher-challenge-objective-grid strong,
    .teacher-challenge-objective-grid small {
      display: block;
      min-width: 0;
    }
    .teacher-challenge-objective-grid small {
      color: #66798a;
    }
    .teacher-challenge-composition {
      padding: 9px 11px;
      border: 1px solid #dbe6ef;
      border-radius: 10px;
      background: #f8fbfd;
    }
    .teacher-challenge-composition summary {
      cursor: pointer;
      font-weight: 800;
    }
    .teacher-challenge-composition ul {
      display: grid;
      gap: 4px;
      margin: 9px 0 0;
      padding-left: 20px;
      color: #536678;
      font-size: 13px;
    }
    .teacher-secondary-workspace {
      display: grid;
      gap: 16px;
      margin-top: 20px;
      padding: 16px;
      border: 1px solid #d5e3ec;
      border-radius: 12px;
      background: #f8fbfc;
    }
    .teacher-secondary-workspace > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      color: #17342a;
      font-weight: 900;
    }
    .teacher-secondary-workspace > summary small {
      color: #5f7182;
      font-weight: 650;
    }
    .teacher-secondary-workspace-body {
      display: grid;
      gap: 20px;
    }
    .teacher-challenge-review-shell {
      gap: 20px;
    }
    .teacher-review-summary {
      margin: 0;
    }
    .teacher-review-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
    }
    .teacher-review-heading .actions {
      flex: 0 0 auto;
    }
    .teacher-review-priority {
      display: grid;
      grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr);
      gap: 14px;
      align-items: start;
      margin: 0 0 14px;
      padding: 14px;
      border: 1px solid #FD6707;
      border-radius: 10px;
      background: #fdece0;
    }
    .teacher-review-priority h3,
    .teacher-review-priority p {
      margin: 0;
    }
    .teacher-review-priority ol {
      display: grid;
      gap: 7px;
      margin: 0;
      padding-left: 20px;
    }
    .teacher-review-priority li {
      display: grid;
      gap: 2px;
    }
    .teacher-review-priority li span {
      color: #54607A;
      font-size: 13px;
    }
    .teacher-review-search {
      display: grid;
      gap: 6px;
      width: min(620px, 100%);
      margin-bottom: 8px;
      color: #031049;
      font-weight: 800;
    }
    .teacher-review-search input {
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #ffffff;
      color: #031049;
      font: inherit;
    }
    .teacher-review-question-list {
      display: grid;
      gap: 10px;
    }
    .teacher-review-question {
      overflow: hidden;
      border: 1px solid #DCE1E8;
      border-radius: 10px;
      background: #ffffff;
    }
    .teacher-review-question > summary {
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 15px;
      cursor: pointer;
      list-style-position: inside;
    }
    .teacher-review-question > summary span {
      color: #031049;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .teacher-review-question > summary em {
      color: #54607A;
      font-size: 13px;
      font-style: normal;
      font-weight: 750;
    }
    .teacher-review-question-body {
      display: grid;
      gap: 14px;
      padding: 0 15px 16px;
      border-top: 1px solid #edf2f6;
    }
    .teacher-review-question-body h3,
    .teacher-review-question-body p {
      margin: 0;
    }
    .teacher-review-question-body h3,
    .teacher-review-options article strong {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .teacher-review-reference {
      padding-top: 14px;
      color: #54607A;
      font-size: 13px;
      font-weight: 750;
    }
    .teacher-review-options {
      display: grid;
      gap: 8px;
    }
    .teacher-review-options article {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid #DCE1E8;
      border-radius: 9px;
      background: #F6F8FB;
    }
    .teacher-review-options article.correct {
      border-color: #79c9b5;
      background: #edfaf5;
    }
    .teacher-review-options article > span {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 8px;
      background: #DCE1E8;
      color: #031049;
      font-weight: 900;
    }
    .teacher-review-options article.correct > span {
      background: #268157;
      color: #ffffff;
    }
    .teacher-review-options article div,
    .teacher-review-options article strong,
    .teacher-review-options article small {
      display: grid;
      min-width: 0;
    }
    .teacher-review-options article small {
      margin-top: 4px;
      color: #54607A;
    }
    .teacher-review-options article > em {
      color: #268157;
      font-size: 12px;
      font-style: normal;
      font-weight: 900;
      text-transform: uppercase;
    }
    .teacher-template-choice {
      display: grid;
      gap: 10px;
      margin: 0 0 12px;
      padding: 14px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #f9fbfd;
    }
    .teacher-template-choice legend {
      padding: 0 6px;
      color: #0a766e;
      font-weight: 900;
    }
    .teacher-template-choice label {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 12px;
      border: 1px solid #dbe6ef;
      border-radius: 8px;
      background: #ffffff;
      cursor: pointer;
    }
    .teacher-template-choice label.is-disabled {
      border-color: #e3e8ec;
      background: #f1f4f6;
      color: #7b8791;
      cursor: not-allowed;
      opacity: .68;
    }
    .teacher-template-choice input {
      width: 18px;
      min-height: 18px;
      margin: 2px 0 0;
      accent-color: #0b8f86;
    }
    .teacher-template-choice span {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
    .teacher-template-choice strong,
    .teacher-template-choice small {
      overflow-wrap: break-word;
    }
    .teacher-template-choice small {
      color: #5f7182;
      line-height: 1.4;
    }
    .challenge-pin {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border: 1px solid #0b8f86;
      border-radius: 8px;
      background: #e9fbf8;
      color: #075d58;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-weight: 900;
      letter-spacing: 0;
    }
    .teacher-challenge-share {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 112px;
      align-items: center;
      gap: 16px;
      width: min(520px, 100%);
      padding: 14px;
      border: 1px solid #cfe1ea;
      border-radius: 10px;
      background: #f4fafb;
    }
    .teacher-challenge-share > div {
      display: grid;
      justify-items: start;
      gap: 9px;
      min-width: 0;
    }
    .teacher-challenge-share > div > span {
      color: #4b6073;
      font-size: .82rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .teacher-challenge-qr {
      display: grid;
      width: 112px;
      height: 112px;
      place-items: center;
      padding: 7px;
      border: 1px solid #c7d8e4;
      border-radius: 8px;
      background: #ffffff;
      color: #071321;
    }
    .teacher-challenge-qr svg {
      width: 100%;
      height: 100%;
    }
    .student-classroom-entry-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }
    .student-tertiary-action {
      color: #63736d;
      font-weight: 750;
    }
    .student-challenge-entry-main {
      width: 100%;
      display: grid;
      place-items: start center;
      padding: 24px 16px 48px;
    }
    .student-challenge-entry-shell {
      width: min(100%, 520px);
      display: grid;
      gap: 16px;
      margin: 0 auto;
      padding: 22px;
      border: 1px solid #DCE1E8;
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 18px 42px -34px rgba(3, 16, 73, .58);
    }
    .student-challenge-entry-heading {
      display: grid;
      gap: 7px;
    }
    .student-challenge-entry-heading h1,
    .student-challenge-entry-heading p {
      margin: 0;
    }
    .student-challenge-entry-heading h1 {
      color: #031049;
      font-size: clamp(27px, 7vw, 34px);
      line-height: 1.08;
      letter-spacing: -.035em;
    }
    .student-challenge-entry-heading p:not(.student-challenge-entry-kicker) {
      color: #54607A;
      font-size: 14px;
      line-height: 1.5;
    }
    .student-challenge-entry-kicker {
      color: #031049;
      font-size: 11px;
      font-weight: 900;
      line-height: 15px;
      text-transform: uppercase;
      letter-spacing: .055em;
    }
    .student-challenge-entry-form {
      display: grid;
      gap: 13px;
    }
    .student-challenge-entry-form > label,
    .student-challenge-entry-form fieldset {
      min-width: 0;
      display: grid;
      gap: 7px;
      margin: 0;
      color: #031049;
      font-size: 13px;
      font-weight: 850;
    }
    .student-challenge-entry-form input[type="text"] {
      width: 100%;
      min-height: 48px;
      border: 1px solid #DCE1E8;
      border-radius: 12px;
      padding: 0 13px;
      background: #F6F8FB;
      color: #031049;
      font: inherit;
      font-size: 16px;
    }
    .student-challenge-entry-form fieldset {
      border: 1px solid #DCE1E8;
      border-radius: 14px;
      padding: 11px;
    }
    .student-challenge-entry-form fieldset label {
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 9px;
      border-radius: 10px;
      background: #F6F8FB;
      color: #031049;
      font-size: 13px;
      font-weight: 750;
    }
    .student-challenge-entry-form input[type="radio"],
    .student-challenge-entry-form input[type="checkbox"] {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      margin: 0;
      accent-color: #031049;
    }
    .student-challenge-entry-form .pin-field-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    .student-challenge-entry-form .pin-field-label small {
      color: #54607A;
      font-size: 11px;
      font-weight: 700;
    }
    .student-challenge-entry-form .consent-row {
      grid-template-columns: 22px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      color: #54607A;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }
    .student-challenge-entry-privacy,
    .student-challenge-entry-switch {
      margin: 0;
      color: #54607A;
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
    }
    .student-challenge-entry-switch {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #031049;
      font-weight: 800;
      text-decoration: none;
    }
    .student-challenge-entry-form input:focus-visible,
    .student-challenge-entry-shell a:focus-visible,
    .student-challenge-entry-shell button:focus-visible,
    .student-challenge-entry-shell [tabindex="-1"]:focus-visible {
      outline: 3px solid rgba(3, 16, 73, .55);
      outline-offset: 3px;
    }
    @media (max-width: 480px) {
      .student-challenge-entry-main {
        padding: 12px 12px calc(30px + env(safe-area-inset-bottom));
      }
      .student-challenge-entry-shell {
        gap: 14px;
        padding: 18px 16px;
        border-radius: 18px;
      }
      .student-challenge-entry-heading h1 {
        font-size: 29px;
      }
      .student-classroom-entry-actions {
        width: 100%;
        display: grid;
        justify-content: stretch;
      }
    }
    .pin-join-form {
      display: grid;
      gap: 12px;
      max-width: 420px;
      margin: 4px 0 18px;
    }
    .pin-join-form label {
      display: grid;
      gap: 8px;
      color: #102030;
      font-weight: 850;
    }
    .pin-join-form input {
      min-height: 48px;
      border: 1px solid #c9d7e3;
      border-radius: 8px;
      padding: 0 14px;
      color: #102030;
      font-size: 1.05rem;
      font-weight: 850;
      letter-spacing: 0;
    }
    .pin-join-form .pin-field-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    .pin-join-form .pin-field-label small {
      color: #607084;
      font-size: .82rem;
      font-weight: 750;
    }
    .pin-join-form .consent-row {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      line-height: 1.45;
    }
    .pin-join-form .consent-row input[type="checkbox"] {
      width: 22px;
      min-height: 22px;
      margin: 1px 0 0;
      padding: 0;
    }
    .pin-join-form .student-primary-cta {
      min-height: 52px;
    }
    .teacher-search-panel,
    .admin-search-panel {
      display: grid;
      gap: 12px;
    }
    .teacher-search-control {
      display: grid;
      gap: 8px;
      max-width: 680px;
      margin: 0;
      color: #182838;
      font-weight: 800;
    }
    .teacher-search-control input {
      min-height: 48px;
      border-color: #cfdce8;
      background: #f9fbfd;
    }
    .teacher-search-status {
      margin: 0;
      color: #5b6c7d;
      font-weight: 800;
      line-height: 1.45;
    }
    .admin-user-row.teacher-drilldown {
      display: block;
      padding: 0;
      overflow: hidden;
    }
    .teacher-drilldown > summary {
      display: grid;
      width: 100%;
      box-sizing: border-box;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 72px;
      padding: 16px;
      cursor: pointer;
      list-style: none;
    }
    .teacher-drilldown > summary::-webkit-details-marker {
      display: none;
    }
    .teacher-drilldown > summary:focus-visible {
      outline: 3px solid #d6a93f;
      outline-offset: -3px;
    }
    .teacher-drilldown-title {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .teacher-drilldown-title strong,
    .teacher-drilldown-title small {
      overflow-wrap: anywhere;
    }
    .teacher-drilldown-title small,
    .teacher-drilldown-action {
      color: #5b6c7d;
      font-size: 13px;
    }
    .teacher-drilldown-action {
      font-weight: 800;
    }
    .teacher-drilldown[open] .teacher-drilldown-action {
      color: #031049;
    }
    .teacher-drilldown-body {
      display: grid;
      gap: 16px;
      padding: 0 16px 18px;
      border-top: 1px solid #e2eaef;
    }
    .teacher-drilldown-body > :first-child {
      margin-top: 16px;
    }
    .teacher-history-note {
      margin: 0;
      padding: 12px 14px;
      border-left: 4px solid #84bdb3;
      background: #f3faf8;
      color: #41586a;
      font-size: 14px;
      line-height: 1.5;
    }
    .teacher-group-students,
    .teacher-objective-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .teacher-group-students li {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 1px solid #e4ebef;
    }
    .teacher-group-students li:last-child {
      border-bottom: 0;
    }
    .teacher-group-students a {
      color: #075d58;
      font-weight: 800;
    }
    .teacher-group-students span {
      color: #5b6c7d;
      font-size: 13px;
      text-align: right;
    }
    .teacher-objective-list article {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(190px, .45fr);
      gap: 16px;
      align-items: start;
      padding: 14px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #ffffff;
    }
    .teacher-objective-list article > div {
      display: grid;
      gap: 4px;
    }
    .teacher-objective-list span {
      color: #526679;
      font-size: 13px;
      line-height: 1.45;
    }
    .teacher-objective-list p {
      margin: 0;
      padding: 10px 12px;
      border-radius: 7px;
      color: #41586a;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }
    .teacher-objective-list p.ready {
      background: #eef8f5;
    }
    .teacher-objective-list p.low-sample {
      background: #f5f7f9;
    }
    .empty-state.compact {
      padding: 14px;
    }
    .admin-user-row[hidden] {
      display: none;
    }
    .projector-page {
      background: #F6F8FB;
      color: #031049;
    }
    .projector-main {
      width: min(calc(100% - 24px), calc((100vh - 110px) * 16 / 9));
      max-width: none;
      padding: 12px 0 16px;
    }
    .teacher-projector-surface,
    .teacher-presentation-deck {
      min-width: 0;
      color: #031049;
    }
    .teacher-projector-surface {
      aspect-ratio: 16 / 9;
      min-height: min(720px, calc(100vh - 150px));
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 18px;
      padding: 30px;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 24px 60px rgba(12, 31, 51, .12);
    }
    .teacher-projector-surface:has(.classic-projector-grid) {
      gap: 12px;
      padding: 20px;
    }
    .teacher-projector-surface:has(.classic-projector-grid) .projector-hero {
      gap: 3px 18px;
    }
    .teacher-projector-surface:has(.classic-projector-grid) .projector-hero h1 {
      font-size: clamp(1.65rem, 2.25vw, 2.45rem);
    }
    .teacher-projector-surface:has(.classic-projector-grid) .projector-hero p {
      font-size: clamp(.78rem, .9vw, .95rem);
      line-height: 1.25;
    }
    .projector-hero-live {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }
    .projector-hero-live .private-kicker {
      grid-column: 1;
    }
    .projector-hero-live h1 {
      grid-column: 1;
    }
    .projector-hero-live .projector-privacy-note {
      max-width: 330px;
      text-align: right;
    }
    .projector-hero-live .projector-hero-tools {
      grid-column: 2;
      grid-row: 1 / 3;
    }
    .projector-hero-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }
    /* La salida sirve al profesor mientras prepara, no al aula mientras proyecta. */
    :fullscreen .projector-exit-link,
    :fullscreen .presentation-projector-tools {
      display: none;
    }
    .projector-fullscreen-button {
      min-height: 44px;
      flex: 0 0 auto;
      border: 1px solid #DCE1E8;
      border-radius: 999px;
      padding: 8px 16px;
      background: #F6F8FB;
      color: #031049;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
    }
    .projector-fullscreen-button:focus-visible {
      outline: 3px solid #FD6707;
      outline-offset: 3px;
    }
    .projector-hero-live .classroom-connection-status {
      grid-column: 1 / -1;
    }
    .projector-hero {
      display: grid;
      gap: 8px;
    }
    .projector-hero h1,
    .projector-hero p,
    .projector-focus-band h2,
    .projector-focus-band p,
    .projector-action-band h2,
    .projector-action-band p {
      margin: 0;
    }
    .projector-hero h1 {
      max-width: 900px;
      color: #031049;
      font-size: 3rem;
      line-height: 1.04;
    }
    .projector-hero p,
    .projector-action-band p,
    .projector-empty-copy {
      color: #54607A;
      font-size: 1rem;
      line-height: 1.55;
    }
    .projector-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .projector-metrics div {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 18px;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #F6F8FB;
    }
    .projector-metrics strong {
      color: #031049;
      font-size: 2.15rem;
      line-height: 1;
    }
    .projector-metrics span {
      color: #54607A;
      font-weight: 800;
      line-height: 1.35;
    }
    .projector-focus-band,
    .projector-action-band {
      display: grid;
      gap: 10px;
      padding: 22px;
      border-radius: 8px;
    }
    .projector-focus-band {
      border: 1px solid #DCE1E8;
      background: #F6F8FB;
    }
    .projector-action-band {
      border: 1px solid rgba(253,103,7,.35);
      background: rgba(253,103,7,.12);
    }
    .projector-challenge-status {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-top: 8px;
    }
    .projector-challenge-status span,
    .projector-pin {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #ffffff;
      color: #031049;
      font-weight: 900;
    }
    .projector-pin {
      border-color: #DCE1E8;
      background: #F6F8FB;
      color: #031049;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing: 0;
    }
    .projector-focus-band h2,
    .projector-action-band h2 {
      color: #031049;
      font-size: 1.65rem;
      line-height: 1.18;
    }
    .projector-focus-band ol {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-left: 22px;
      color: #031049;
      font-weight: 900;
    }
    .projector-focus-band li span {
      display: block;
      margin-top: 2px;
      color: #54607A;
      font-size: .95rem;
      font-weight: 700;
    }
    .classic-projector-grid {
      min-height: 0;
      display: grid;
      gap: 16px;
    }
    .classic-projector-grid.single {
      grid-template-columns: minmax(0, 1fr);
    }
    .classic-projector-grid.split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .classic-projector-grid.summary {
      grid-template-columns: repeat(var(--classic-projector-summary-columns, 3), minmax(0, 1fr));
    }
    .classic-projector-summary {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 8px;
    }
    .classic-projector-summary:not(:has(.classic-projector-summary-head)) {
      grid-template-rows: minmax(0, 1fr);
    }
    .classic-projector-summary > .classic-projector-grid {
      height: 100%;
      align-items: stretch;
    }
    .classic-projector-card {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 14px;
      padding: 20px;
      border: 1px solid #DCE1E8;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 12px 30px rgba(22, 48, 55, .08);
    }
    .classic-projector-card.single,
    .classic-projector-card.split {
      gap: 9px;
      padding: 14px;
    }
    .classic-projector-card-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 16px;
    }
    .classic-projector-card-head > div:first-child {
      min-width: 0;
    }
    .classic-projector-card-head span,
    .classic-projector-card-head small {
      display: block;
      color: #54607A;
      font-weight: 800;
    }
    .classic-projector-card-head > div:first-child > span {
      color: #031049;
      font-size: .76rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .classic-projector-card-head h2 {
      margin: 4px 0;
      color: #031049;
      font-size: clamp(1.35rem, 2.2vw, 2rem);
      line-height: 1.08;
    }
    .classic-projector-access {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: auto 82px;
      align-items: center;
      gap: 10px;
      padding: 8px 10px 8px 14px;
      border: 1px solid #DCE1E8;
      border-radius: 10px;
      background: #F6F8FB;
    }
    .classic-projector-access strong {
      color: #031049;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: clamp(1.1rem, 2vw, 1.65rem);
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .classic-projector-access svg {
      width: 82px;
      height: 82px;
      padding: 5px;
      border-radius: 6px;
      background: #ffffff;
      color: #031049;
    }
    .classic-projector-card.split .classic-projector-access {
      grid-template-columns: auto 58px;
      padding: 6px 8px 6px 10px;
    }
    .classic-projector-card.split .classic-projector-access svg {
      width: 58px;
      height: 58px;
    }
    .classic-projector-access.expired {
      grid-template-columns: 1fr;
      max-width: 210px;
      border-color: rgba(253,103,7,.35);
      background: rgba(253,103,7,.12);
    }
    .classic-projector-access.expired strong,
    .classic-projector-access.expired span {
      color: #c8621c;
      font-family: inherit;
      font-size: .86rem;
      white-space: normal;
    }
    .classic-projector-card.summary .classic-projector-access {
      grid-template-columns: 1fr;
      padding: 10px 12px;
    }
    .classic-projector-card-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .classic-projector-card-metrics div {
      min-width: 0;
      display: grid;
      gap: 2px;
      padding: 10px;
      border-radius: 8px;
      background: #F6F8FB;
    }
    .classic-projector-card-metrics strong {
      color: #031049;
      font-size: 1.35rem;
      line-height: 1;
    }
    .classic-projector-card-metrics span {
      overflow: hidden;
      color: #54607A;
      font-size: .72rem;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .team-duel-projector-card {
      overflow: hidden;
      border-color: #DCE1E8;
      background: linear-gradient(145deg, #ffffff 0%, #F6F8FB 100%);
    }
    .spotlight-projector-card { overflow: hidden; border-color: #DCE1E8; background: linear-gradient(145deg, #fff 0%, #F6F8FB 100%); }
    .spotlight-projector-focus { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 12px; }
    .spotlight-active-projector { display: grid; place-items: center; gap: 4px; padding: clamp(12px, 1.8vw, 26px); border-radius: 14px; background: #031049; color: #fff; text-align: center; }
    .spotlight-active-projector span { font-size: clamp(.8rem, 1.4vw, 1.15rem); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .spotlight-active-projector strong { font-size: clamp(2rem, 4.1vw, 4.2rem); line-height: 1; }
    .spotlight-active-projector small { color: rgba(255,255,255,.7); font-size: clamp(.9rem, 1.5vw, 1.3rem); }
    .spotlight-projector-question { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin: 0; color: #031049; font-size: clamp(.82rem, 1vw, 1rem); }
    .spotlight-projector-question strong { color: #031049; white-space: nowrap; }
    .spotlight-projector-card.classic-projector-card.split .classic-projector-card-head h2 { font-size: clamp(.88rem, 1.2vw, 1.08rem); line-height: 1.05; }
    .spotlight-projector-card.split .spotlight-projector-question { display: none; }
    .spotlight-next-projector { display: grid; gap: 6px; padding: 10px; border: 1px solid #DCE1E8; border-radius: 14px; background: #fff; }
    .spotlight-next-projector h3,
    .spotlight-ranking-panel h3 { margin: 0; color: #031049; font-size: clamp(.85rem, 1vw, 1rem); text-transform: uppercase; letter-spacing: .05em; }
    .spotlight-next-projector ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
    .spotlight-next-projector li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; padding: 6px 8px; border-radius: 8px; background: #F6F8FB; font-weight: 800; }
    .spotlight-next-projector li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #268157; color: #fff; }
    .spotlight-last-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-left: 5px solid #c8621c; border-radius: 8px; background: rgba(253,103,7,.12); color: #031049; }
    .spotlight-last-result span { font-weight: 750; }
    .spotlight-projector-progress { display: grid; gap: 5px; }
    .spotlight-projector-progress div { display: flex; justify-content: space-between; gap: 12px; color: #031049; }
    .spotlight-projector-progress i { height: 9px; overflow: hidden; border-radius: 999px; background: #DCE1E8; }
    .spotlight-projector-progress b { display: block; height: 100%; border-radius: inherit; background: #268157; }
    .spotlight-ranking-panel { display: grid; gap: 6px; }
    .spotlight-ranking { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
    .spotlight-ranking li { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 7px; align-items: center; padding: 7px 8px; border: 1px solid #DCE1E8; border-radius: 9px; background: #fff; }
    .spotlight-ranking li > b { grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #031049; color: #fff; }
    .spotlight-ranking li > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .spotlight-ranking li > span,
    .spotlight-ranking li > em { color: #54607A; font-size: .72rem; font-style: normal; font-weight: 800; }
    .spotlight-ranking li > em { grid-column: 2; color: #031049; }
    .spotlight-projector-card.split .spotlight-projector-focus { grid-template-columns: 1fr; }
    .spotlight-projector-card.split .spotlight-next-projector { display: none; }
    .spotlight-projector-card.split .spotlight-ranking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spotlight-projector-card.summary .spotlight-projector-focus { grid-template-columns: minmax(0, 1fr); }
    .spotlight-projector-card.summary .spotlight-next-projector { display: none; }
    .spotlight-projector-card.summary .spotlight-active-projector strong { font-size: clamp(1rem, 1.6vw, 1.35rem); overflow-wrap: anywhere; }
    .spotlight-projector-card.summary .spotlight-ranking { grid-template-columns: minmax(0, 1fr); }
    .spotlight-projector-card.summary .spotlight-ranking li { grid-template-columns: 24px minmax(0, 1fr); }
    .spotlight-final-ranking { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
    .spotlight-final-ranking li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #DCE1E8; border-radius: 10px; background: #F6F8FB; }
    .spotlight-final-ranking b { color: #268157; font-size: 1.05rem; }
    .spotlight-final-ranking span { color: #54607A; font-size: .9rem; font-weight: 750; }
    .team-duel-round-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border-left: 5px solid #54607A;
      border-radius: 8px;
      background: #F6F8FB;
      color: #031049;
    }
    .team-duel-round-result strong { font-size: clamp(1rem, 1.6vw, 1.35rem); }
    .team-duel-round-result span { color: #54607A; font-weight: 750; }
    .team-duel-projector-card.towards-a .team-duel-round-result { border-color: #268157; background: #e4f4ec; color: #031049; }
    .team-duel-projector-card.towards-b .team-duel-round-result { border-color: #a45037; background: #fff0eb; color: #7d3825; }
    .team-duel-projector-card.draw .team-duel-round-result { border-color: #c8621c; background: rgba(253,103,7,.12); color: #c8621c; }
    .team-duel-projector-card.victory .team-duel-round-result { border-color: #c8621c; background: rgba(253,103,7,.12); color: #c8621c; box-shadow: 0 0 0 3px rgba(253,103,7,.12); }
    .team-duel-rope {
      display: grid;
      grid-template-columns: auto minmax(140px, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 16px 10px 8px;
      color: #031049;
      font-weight: 800;
    }
    .team-duel-rope-track {
      position: relative;
      height: 18px;
      border: 3px solid #fff;
      border-radius: 999px;
      background: linear-gradient(90deg, #268157 0 49%, #DCE1E8 49% 51%, #9b563f 51% 100%);
      box-shadow: 0 2px 10px rgba(12, 31, 51, .18);
    }
    .team-duel-center-mark {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      color: transparent;
      transform: translate(-50%, -50%);
    }
    .team-duel-center-mark::after {
      content: "";
      display: block;
      width: 3px;
      height: 34px;
      background: #fff;
    }
    .team-duel-rope-track i {
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 4px solid #ffffff;
      border-radius: 50%;
      background: #031049;
      box-shadow: 0 2px 8px rgba(0,0,0,.22);
      transform: translate(-50%, -50%);
      transition: left .35s ease;
    }
    .team-duel-rope-track i b { color: #fff; font-size: .78rem; }
    .team-duel-projector-card.towards-a .team-duel-rope-track i { background: #268157; box-shadow: 0 0 0 8px rgba(8,117,110,.18); }
    .team-duel-projector-card.towards-b .team-duel-rope-track i { background: #a45037; box-shadow: 0 0 0 8px rgba(164,80,55,.18); }
    .team-duel-projector-card.draw .team-duel-rope-track i { border-radius: 8px; background: #c8621c; box-shadow: 0 0 0 8px rgba(253,103,7,.18); }
    .team-duel-projector-card.victory .team-duel-rope-track i { width: 48px; height: 48px; background: #c8621c; box-shadow: 0 0 0 10px rgba(253,103,7,.24); }
    .team-duel-rope > span {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      color: #54607A;
      font-size: .82rem;
    }
    .team-duel-rope > span b { color: #031049; font-size: 1.15rem; }
    .team-duel-rope > span em { font-style: normal; }
    .team-duel-projector-teams {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .team-duel-projector-teams > section {
      min-width: 0;
      padding: 12px;
      border: 1px solid #DCE1E8;
      border-radius: 10px;
      background: #F6F8FB;
    }
    .team-duel-projector-teams > section.team-a { border-top: 5px solid #268157; }
    .team-duel-projector-teams > section.team-b { border-top: 5px solid #a45037; }
    .team-duel-projector-teams h3 { margin: 0; color: #031049; }
    .team-duel-projector-teams p { margin: 6px 0; color: #54607A; font-size: .82rem; }
    .team-duel-projector-teams p .correct { color: #268157; }
    .team-duel-projector-teams p .incorrect { color: #b42318; }
    .team-duel-projector-teams ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
    .team-duel-projector-teams li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 9px; border-radius: 8px; background: #ffffff; color: #031049; font-size: .8rem; }
    .team-duel-projector-teams li > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .team-duel-projector-teams li > span { color: #54607A; white-space: nowrap; }
    .team-duel-projector-teams li > small { grid-column: 1 / -1; color: #54607A; }
    .classic-projector-grid.single .team-duel-projector-card { height: 100%; grid-template-rows: auto auto minmax(150px, .8fr) minmax(0, 1fr); align-content: stretch; }
    .classic-projector-grid.single .team-duel-rope { padding: clamp(20px, 4vh, 44px) clamp(18px, 3vw, 44px); }
    .classic-projector-grid.single .team-duel-rope-track { height: 28px; }
    .classic-projector-grid.single .team-duel-rope-track i { width: 58px; height: 58px; font-size: 1rem; }
    .classic-projector-grid.single .team-duel-rope > strong { font-size: clamp(1.2rem, 2vw, 1.8rem); }
    .classic-projector-grid.single .team-duel-rope > span b { font-size: clamp(1.25rem, 2vw, 1.8rem); }
    .classic-projector-card.summary.team-duel-projector-card { height: 100%; grid-template-rows: auto auto minmax(72px, .8fr) minmax(0, 1fr); align-content: stretch; gap: 5px; padding: 8px; }
    .classic-projector-card.summary .team-duel-round-result { padding: 5px 7px; font-size: .7rem; }
    .classic-projector-card.summary .team-duel-round-result strong { font-size: .78rem; }
    .classic-projector-card.summary .team-duel-round-result span { display: none; }
    .classic-projector-card.summary .team-duel-rope { gap: 6px; padding: 8px 2px 2px; font-size: .7rem; }
    .classic-projector-card.summary .team-duel-rope-track { height: 9px; border-width: 1px; }
    .classic-projector-card.summary .team-duel-rope-track i { width: 24px; height: 24px; border-width: 2px; }
    .classic-projector-card.summary .team-duel-rope-track i b { font-size: .56rem; }
    .classic-projector-card.summary .team-duel-rope > span { font-size: .62rem; }
    .classic-projector-card.summary .team-duel-rope > span b { font-size: .72rem; }
    .classic-projector-card.summary .team-duel-projector-teams { gap: 5px; }
    .classic-projector-card.summary .team-duel-projector-teams > section { padding: 6px; border-top-width: 3px; }
    .classic-projector-card.summary .team-duel-projector-teams h3 { font-size: .8rem; }
    .classic-projector-card.summary .team-duel-projector-teams p { margin: 2px 0; font-size: .62rem; }
    .classic-projector-card.summary .team-duel-projector-teams ul { grid-template-columns: 1fr; gap: 2px; }
    .classic-projector-card.summary .team-duel-projector-teams li { grid-template-columns: minmax(0, 1fr) auto; padding: 2px 4px; font-size: .6rem; }
    .classic-projector-card.summary .team-duel-projector-teams li small { display: none; }
    .team-duel-review-rope { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 12px; margin: 14px 0; padding: 20px; border-radius: 10px; background: #F6F8FB; }
    .team-duel-review-rope .team-duel-rope-track { height: 18px; }
    .team-duel-review-rope .team-duel-rope-track { margin-inline: 18px; }
    .team-duel-student-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .team-duel-student-status strong { flex: 0 0 auto; }
    .team-duel-student-status span { text-align: right; }
    .teacher-team-duel-review li { border-radius: 8px; }
    .teacher-team-duel-review li span { display: block; color: #54607A; }
    .teacher-team-duel-rounds { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
    .teacher-team-duel-rounds li { display: grid; gap: 3px; padding: 10px; border-left: 5px solid #54607A; border-radius: 8px; background: #F6F8FB; }
    .teacher-team-duel-rounds li.towards-a { border-color: #268157; background: #F6F8FB; }
    .teacher-team-duel-rounds li.towards-b { border-color: #a45037; background: #fff3ef; }
    .teacher-team-duel-rounds li.draw { border-color: #c8621c; background: rgba(253,103,7,.12); }
    .teacher-team-duel-rounds span { color: #54607A; }
    .classic-projector-completion {
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: #DCE1E8;
    }
    .classic-projector-completion span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #FD6707;
      transition: width .25s ease;
    }
    .classic-projector-ranking {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .classic-projector-grid.single .classic-projector-ranking {
      grid-template-columns: minmax(0, 1fr);
    }
    .classic-projector-card.single:not(.team-duel-projector-card):not(.spotlight-projector-card):is([data-classic-ranking-count="1"], [data-classic-ranking-count="2"], [data-classic-ranking-count="3"], [data-classic-ranking-count="4"]) .classic-projector-ranking {
      width: min(100%, 960px);
      margin-inline: auto;
    }
    .classic-projector-card.single[data-classic-small-roster] {
      min-height: 100%;
      grid-template-rows: auto auto auto minmax(0, 1fr);
      align-content: stretch;
    }
    .classic-projector-card.single[data-classic-small-roster] .classic-projector-ranking-pages {
      align-self: center;
      width: min(100%, 1280px);
      margin-inline: auto;
    }
    .classic-projector-card.single[data-classic-small-roster] .classic-projector-ranking {
      width: 100%;
      gap: clamp(10px, 1.2vh, 16px);
    }
    .classic-projector-card.single[data-classic-small-roster] .classic-projector-ranking li {
      min-height: clamp(98px, 15vh, 168px);
      padding: clamp(12px, 1.4vw, 20px) clamp(14px, 1.8vw, 26px);
    }
    .classic-projector-card.single[data-classic-small-roster] .classic-projector-participant span { font-size: clamp(1.22rem, 1.65vw, 1.8rem); }
    .classic-projector-card.single[data-classic-small-roster] .classic-projector-ranking strong { font-size: clamp(1.3rem, 1.65vw, 1.82rem); }
    @media (min-width: 1600px) and (min-height: 900px) {
      .classic-projector-card.single[data-classic-small-roster]:not(.team-duel-projector-card):not(.spotlight-projector-card) {
        gap: 18px;
        padding: 26px 34px;
      }
      .classic-projector-card.single[data-classic-small-roster]:not(.team-duel-projector-card):not(.spotlight-projector-card) .classic-projector-ranking-pages {
        width: min(100%, 1540px);
        align-self: stretch;
      }
      .classic-projector-card.single[data-classic-small-roster]:not(.team-duel-projector-card):not(.spotlight-projector-card) .classic-projector-ranking {
        gap: 20px;
        height: 100%;
        grid-template-rows: repeat(2, minmax(0, 1fr));
      }
      .classic-projector-card.single[data-classic-small-roster]:not(.team-duel-projector-card):not(.spotlight-projector-card) .classic-projector-ranking li {
        min-height: 196px;
        padding: 24px 32px;
      }
      .classic-projector-card.single[data-classic-small-roster]:not(.team-duel-projector-card):not(.spotlight-projector-card) .classic-projector-participant span { font-size: 2.15rem; }
      .classic-projector-card.single[data-classic-small-roster]:not(.team-duel-projector-card):not(.spotlight-projector-card) .classic-projector-ranking strong { font-size: 2.2rem; }
      .classic-projector-card.single[data-classic-small-roster]:not(.team-duel-projector-card):not(.spotlight-projector-card) .classic-projector-answer-counts { font-size: 1rem; }
      .classic-projector-card.single[data-classic-small-roster]:not(.team-duel-projector-card):not(.spotlight-projector-card) .classic-projector-progress-segments i { min-height: 16px; }
    }
    .classic-projector-grid.single .classic-projector-ranking li {
      grid-template-columns: 34px minmax(145px, .75fr) minmax(180px, 1.35fr) minmax(58px, auto) minmax(280px, auto);
    }
    .classic-projector-grid.single .classic-projector-answer-counts {
      grid-column: auto;
      justify-self: end;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .classic-projector-ranking-pages {
      display: grid;
      gap: 8px;
    }
    .classic-projector-ranking[hidden],
    .classic-projector-grid[data-classic-projector-page][hidden] {
      display: none !important;
    }
    .classic-projector-ranking-controls {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      color: #54607A;
      font-size: .875rem;
      font-weight: 850;
    }
    .classic-projector-ranking-controls button {
      width: 34px;
      height: 34px;
      border: 1px solid #DCE1E8;
      border-radius: 50%;
      background: #ffffff;
      color: #031049;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
    }
    .classic-projector-ranking-controls [data-classic-ranking-toggle] {
      width: auto;
      min-width: 74px;
      padding: 0 12px;
      border-radius: 999px;
    }
    .classic-projector-ranking li {
      min-width: 0;
      display: grid;
      grid-template-columns: 34px minmax(130px, .8fr) minmax(180px, 1.7fr) minmax(58px, auto);
      align-items: center;
      gap: 8px 12px;
      min-height: 54px;
      padding: 6px 12px;
      border: 1px solid #DCE1E8;
      border-radius: 10px;
      background: #F6F8FB;
    }
    .classic-projector-ranking b {
      color: #031049;
      font-size: clamp(1.15rem, 1.25vw, 1.45rem);
      text-align: center;
    }
    .classic-projector-participant {
      min-width: 0;
      display: grid;
      gap: 1px;
    }
    .classic-projector-participant span {
      min-width: 0;
      overflow: hidden;
      color: #031049;
      font-size: clamp(1rem, 1.15vw, 1.28rem);
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .classic-projector-participant small {
      color: #54607A;
      font-size: .875rem;
      font-weight: 800;
    }
    .classic-projector-ranking strong {
      min-width: 42px;
      display: grid;
      gap: 1px;
      color: #031049;
      font-size: clamp(1.12rem, 1.2vw, 1.4rem);
      text-align: right;
    }
    .classic-projector-ranking strong small {
      color: #54607A;
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
    }
    .classic-projector-question-progress {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .classic-projector-progress-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #54607A;
      font-size: .68rem;
      font-weight: 900;
    }
    .classic-projector-progress-label em { color: #c8621c; font-style: normal; }
    .classic-projector-progress-segments {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(var(--projector-question-columns), minmax(2px, 1fr));
      gap: 2px;
    }
    .classic-projector-progress-segments i {
      min-width: 2px;
      height: 6px;
      border-radius: 2px;
      background: #DCE1E8;
    }
    .classic-projector-progress-segments i.correct { background: #268157; }
    .classic-projector-progress-segments i.incorrect { background: #b42318; }
    .classic-projector-progress-segments i.current {
      outline: 2px solid #FD6707;
      outline-offset: 1px;
      box-shadow: 0 0 0 1px #031049;
    }
    .classic-projector-progress-summary {
      min-width: 150px;
      display: grid;
      grid-template-columns: minmax(90px, 1fr) auto;
      align-items: center;
      gap: 8px;
      color: #54607A;
      font-weight: 900;
    }
    .classic-projector-progress-summary > span {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: #DCE1E8;
    }
    .classic-projector-progress-summary > span i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #FD6707;
    }
    .classic-projector-progress-summary em {
      font-style: normal;
    }
    .classic-projector-answer-counts {
      grid-column: 2 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: #54607A;
      font-size: clamp(.875rem, .78vw, .92rem);
      font-weight: 800;
    }
    .classic-projector-answer-counts .correct { color: #268157; }
    .classic-projector-answer-counts .incorrect { color: #b42318; }
    .classic-projector-answer-counts .blank { color: #54607A; }
    .classic-projector-message {
      margin: 0;
      padding: 14px;
      border-radius: 8px;
      background: #F6F8FB;
      color: #54607A;
      font-weight: 800;
    }
    .classic-projector-summary {
      min-height: 0;
      display: grid;
      gap: 12px;
    }
    .classic-projector-summary-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
    }
    .classic-projector-summary-head h2,
    .classic-projector-summary-head p {
      margin: 0;
    }
    .classic-projector-page-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #54607A;
      font-weight: 850;
    }
    .classic-projector-page-controls[hidden] {
      display: none;
    }
    .classic-projector-page-controls button {
      width: 44px;
      height: 44px;
      border: 1px solid #DCE1E8;
      border-radius: 50%;
      background: #ffffff;
      color: #031049;
      font-size: 1.2rem;
      font-weight: 900;
      cursor: pointer;
    }
    .classic-projector-page-controls .rotation-toggle {
      width: auto;
      min-width: 86px;
      padding: 0 14px;
      border-radius: 999px;
      font-size: .85rem;
    }
    .classic-projector-card.summary {
      gap: 7px;
      padding: 10px;
    }
    .classic-projector-card.summary .classic-projector-card-head {
      display: grid;
    }
    .classic-projector-card.summary .classic-projector-access {
      width: 100%;
    }
    .classic-projector-card.summary .classic-projector-card-head h2 {
      font-size: 1.25rem;
    }
    .classic-projector-card.summary .classic-projector-card-metrics div:nth-child(2),
    .classic-projector-card.summary .classic-projector-card-metrics div:nth-child(4) {
      display: none;
    }
    .classic-projector-card.summary .classic-projector-card-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .classic-projector-card.summary .classic-projector-ranking li {
      grid-template-columns: 22px minmax(0, 1fr) auto;
      grid-template-rows: auto auto auto;
      gap: 5px;
      padding: 6px;
    }
    .classic-projector-card.summary .classic-projector-ranking b {
      grid-column: 1;
      grid-row: 1 / 4;
      align-self: start;
    }
    .classic-projector-card.summary .classic-projector-participant {
      grid-column: 2;
      grid-row: 1;
    }
    .classic-projector-card.summary .classic-projector-ranking strong {
      grid-column: 3;
      grid-row: 1;
    }
    .classic-projector-card.summary .classic-projector-question-progress,
    .classic-projector-card.summary .classic-projector-progress-summary {
      grid-column: 2 / -1;
      grid-row: 2;
    }
    .classic-projector-card.summary .classic-projector-answer-counts {
      grid-column: 2 / -1;
      grid-row: 3;
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 2px 6px;
      font-size: .75rem;
      line-height: 1.1;
    }
    .classic-projector-card.split .classic-projector-card-head h2 {
      font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    }
    .classic-projector-card.split .classic-projector-card-metrics div {
      padding: 7px;
    }
    .classic-projector-card.split .classic-projector-ranking li {
      gap: 5px 7px;
      min-height: 54px;
      padding: 5px 8px;
    }
    @media (max-height: 800px) and (min-width: 1101px) {
      .teacher-projector-surface:has(.classic-projector-grid) {
        gap: 8px;
        padding: 12px;
      }
      .teacher-projector-surface:has(.classic-projector-grid) .projector-hero {
        gap: 1px 14px;
      }
      .teacher-projector-surface:has(.classic-projector-grid) .projector-hero h1 {
        font-size: 1.55rem;
      }
      .classic-projector-card.single {
        gap: 6px;
        padding: 10px;
      }
      .classic-projector-card.single .classic-projector-access {
        grid-template-columns: auto 58px;
        padding: 6px 8px 6px 10px;
      }
      .classic-projector-card.single .classic-projector-access svg {
        width: 58px;
        height: 58px;
      }
      .classic-projector-card.single .classic-projector-card-head h2 {
        font-size: 1.35rem;
      }
      .classic-projector-card.single .classic-projector-card-metrics div {
        padding: 6px 8px;
      }
      .classic-projector-card.single .classic-projector-ranking-pages {
        gap: 5px;
      }
      .classic-projector-card.single .classic-projector-ranking {
        gap: 5px;
      }
      .classic-projector-card.single .classic-projector-ranking li {
        min-height: 50px;
        padding: 5px 9px;
      }
      .classic-projector-grid.summary {
        gap: 8px;
      }
      .classic-projector-card.summary {
        gap: 5px;
        padding: 8px;
      }
      .classic-projector-card.summary .classic-projector-card-head h2 {
        font-size: clamp(1rem, 1.2vw, 1.15rem);
      }
      .classic-projector-card.summary .classic-projector-card-head small {
        font-size: .64rem;
      }
      .classic-projector-card.summary .classic-projector-access {
        padding: 6px 8px;
      }
      .classic-projector-card.summary .classic-projector-access strong {
        font-size: .95rem;
      }
      .classic-projector-card.summary .classic-projector-card-metrics div {
        padding: 5px;
      }
      .classic-projector-card.summary .classic-projector-card-metrics strong {
        font-size: 1.05rem;
      }
      /* Three simultaneous challenges need to retain every ranking field in a
         16:9 projector viewport.  This is deliberately scoped to the compact
         summary, rather than changing the single- or two-challenge cards. */
      .teacher-projector-surface:has(.classic-projector-grid.summary) {
        gap: 6px;
        padding: 8px;
      }
      .teacher-projector-surface:has(.classic-projector-grid.summary) .projector-hero h1 {
        font-size: 1.3rem;
      }
      .teacher-projector-surface:has(.classic-projector-grid.summary) .projector-hero p,
      .teacher-projector-surface:has(.classic-projector-grid.summary) .projector-privacy-note {
        font-size: .68rem;
        line-height: 1.15;
      }
      .classic-projector-grid.summary {
        align-items: start;
        gap: 6px;
      }
      .classic-projector-card.summary {
        gap: 4px;
        padding: 6px;
      }
      .classic-projector-card.summary .classic-projector-card-head > div:first-child > span {
        font-size: .64rem;
      }
      .classic-projector-card.summary .classic-projector-card-head h2 {
        margin: 2px 0;
        font-size: 1rem;
      }
      .classic-projector-card.summary .classic-projector-card-head small {
        font-size: .62rem;
        line-height: 1.15;
      }
      .classic-projector-card.summary .classic-projector-access {
        min-height: 32px;
        padding: 4px 6px;
      }
      .classic-projector-card.summary .classic-projector-access strong {
        font-size: .9rem;
      }
      .classic-projector-card.summary .classic-projector-card-metrics {
        gap: 4px;
      }
      .classic-projector-card.summary .classic-projector-card-metrics div {
        gap: 1px;
        padding: 4px;
      }
      .classic-projector-card.summary .classic-projector-card-metrics strong {
        font-size: 1rem;
      }
      .classic-projector-card.summary .classic-projector-card-metrics span {
        font-size: .64rem;
      }
      .classic-projector-card.summary .classic-projector-completion {
        height: 5px;
      }
      .classic-projector-card.summary .classic-projector-ranking-pages,
      .classic-projector-card.summary .classic-projector-ranking {
        gap: 4px;
      }
      .classic-projector-card.summary .classic-projector-ranking-controls {
        gap: 4px;
        font-size: .7rem;
      }
      .classic-projector-card.summary .classic-projector-ranking-controls button {
        width: 28px;
        height: 28px;
        font-size: .76rem;
      }
      .classic-projector-card.summary .classic-projector-ranking-controls [data-classic-ranking-toggle] {
        min-width: 60px;
        padding: 0 7px;
      }
      .classic-projector-card.summary .classic-projector-ranking li {
        min-height: 0;
        gap: 2px 4px;
        padding: 3px 4px;
      }
      .classic-projector-card.summary .classic-projector-ranking b {
        font-size: .95rem;
      }
      .classic-projector-card.summary .classic-projector-participant {
        gap: 0;
      }
      .classic-projector-card.summary .classic-projector-participant span {
        font-size: .82rem;
        line-height: 1.05;
      }
      .classic-projector-card.summary .classic-projector-participant small {
        font-size: .62rem;
        line-height: 1.05;
      }
      .classic-projector-card.summary .classic-projector-ranking strong {
        font-size: .9rem;
        line-height: 1;
      }
      .classic-projector-card.summary .classic-projector-ranking strong small {
        font-size: .54rem;
      }
      .classic-projector-card.summary .classic-projector-question-progress {
        gap: 1px;
      }
      .classic-projector-card.summary .classic-projector-progress-label {
        gap: 4px;
        font-size: .58rem;
        line-height: 1;
      }
      .classic-projector-card.summary .classic-projector-progress-segments {
        gap: 1px;
      }
      .classic-projector-card.summary .classic-projector-progress-segments i {
        height: 4px;
      }
      .classic-projector-card.summary .classic-projector-answer-counts {
        gap: 1px 4px;
        font-size: .64rem;
        line-height: 1;
      }
    }
    @media (max-width: 1100px) {
      .teacher-projector-surface {
        aspect-ratio: auto;
        min-height: 0;
      }
      .classic-projector-grid.summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .projector-hero-live {
        grid-template-columns: minmax(0, 1fr);
      }
      .projector-hero-live .projector-privacy-note {
        max-width: none;
        text-align: left;
      }
      .projector-hero-live .projector-hero-tools {
        grid-column: 1;
        grid-row: auto;
        justify-content: space-between;
      }
    }
    :fullscreen .projector-header,
    :-webkit-full-screen .projector-header {
      display: none;
    }
    :fullscreen .projector-main,
    :-webkit-full-screen .projector-main {
      width: 100%;
      height: 100vh;
      padding: 0;
    }
    :fullscreen .teacher-projector-surface,
    :-webkit-full-screen .teacher-projector-surface {
      width: 100%;
      height: 100vh;
      min-height: 100vh;
      aspect-ratio: auto;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .teacher-sync-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      margin-bottom: 14px;
      padding: 18px;
      border: 1px solid #cfe1dc;
      border-radius: 8px;
      background: #f3fbf8;
    }
    .teacher-sync-card.active {
      border-color: #a7d8cc;
      background: #e9f8f3;
    }
    .teacher-sync-card strong,
    .teacher-sync-card span {
      display: block;
    }
    .teacher-sync-card strong {
      color: #102030;
      font-size: 1.05rem;
    }
    .teacher-sync-card span {
      margin-top: 4px;
      color: #334155;
      font-weight: 750;
      line-height: 1.45;
    }
    .sync-teacher-panel,
    .sync-teacher-shell {
      min-width: 0;
    }
    .sync-classroom-start-form {
      display: grid;
      grid-template-columns: minmax(160px, 1.6fr) minmax(96px, .8fr) auto;
      gap: 10px;
      align-items: end;
    }
    .sync-classroom-start-form label {
      min-width: 0;
      color: #334155;
      font-size: .82rem;
      font-weight: 800;
    }
    .sync-classroom-start-form select,
    .sync-classroom-start-form input {
      width: 100%;
      min-height: 40px;
      margin-top: 6px;
      border: 1px solid #dbe5ee;
      border-radius: 8px;
      background: #ffffff;
      color: #071321;
      font: inherit;
      font-weight: 800;
    }
    /* La variante con biblioteca de presentaciones agrega un fieldset (grupos) mas un
       <label>Objetivo<select>: la rejilla de 3 columnas de arriba (1.6fr/.8fr/auto) fue
       pensada para el OTRO formulario (Grupo/Cupo/boton) y aqui dejaba el select de
       Objetivo en una columna de apenas 96px -- el nombre se cortaba a "Elige una p..." y
       el conjunto se veia amontonado contra el fieldset de grupos. Se apila en una sola
       columna, con el mismo ancho completo que las tarjetas del panel. Compuesto con las
       dos clases del propio <form> (seccion 27 del CLAUDE.md) para ganar sin depender del
       orden en que se concatenen los bloques del <style>. */
    .sync-classroom-start-form.classroom-library-start-form {
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .sync-classroom-start-form.classroom-library-start-form .button {
      justify-self: start;
    }
    .sync-teacher-status {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    .sync-teacher-status div {
      min-width: 0;
      padding: 16px;
      border: 1px solid #dbe5ee;
      border-radius: 8px;
      background: #fbfdff;
    }
    .sync-teacher-status strong {
      color: #071321;
      font-size: 1.55rem;
      line-height: 1.1;
      overflow-wrap: anywhere;
    }
    .sync-teacher-status span {
      display: block;
      margin-top: 8px;
      color: #334155;
      font-size: .85rem;
      font-weight: 800;
      line-height: 1.35;
    }
    .sync-teacher-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 16px 0;
    }
    .sync-teacher-options span {
      min-width: 0;
      padding: 14px;
      border: 1px solid #dbe5ee;
      border-radius: 8px;
      background: #ffffff;
      color: #071321;
      font-weight: 800;
      line-height: 1.35;
    }
    .sync-teacher-ranking {
      display: grid;
      gap: 10px;
      margin: 8px 0;
      padding: 12px;
      border: 1px solid #dbe5ee;
      border-radius: 8px;
      background: #ffffff;
    }
    .sync-teacher-ranking strong {
      color: #071321;
    }
    .sync-teacher-ranking > span {
      color: #334155;
      font-size: .84rem;
      font-weight: 800;
    }
    .sync-teacher-ranking ol {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .sync-teacher-ranking li {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      color: #071321;
      font-weight: 800;
    }
    .sync-teacher-ranking span {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .sync-teacher-ranking em {
      flex: 0 0 auto;
      color: #0f766e;
      font-style: normal;
    }
    .sync-teacher-progress {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 2px;
    }
    .sync-teacher-progress span {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border: 1px solid #dbe5ee;
      border-radius: 8px;
      background: #ffffff;
      color: #334155;
      font-size: .88rem;
      font-weight: 800;
    }
    .sync-teacher-progress span.active {
      border-color: #0b8f86;
      background: #e9fbf8;
      color: #075d58;
    }
    .sync-teacher-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin: 18px 0;
    }
    .sync-projector-page {
      min-height: 100vh;
      overflow: hidden;
      background: #F6F8FB;
      color: #031049;
    }
    .sync-projector-header {
      display: none;
    }
    .sync-projector-main {
      width: 100vw;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2.5vh 2.5vw;
    }
    .sync-projector-frame {
      width: min(95vw, 1500px);
      aspect-ratio: 16 / 9;
      max-height: 95vh;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: clamp(12px, 2vh, 28px);
      padding: clamp(22px, 3vw, 54px);
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 30px 90px -40px rgba(3, 16, 73, .35);
    }
    .sync-projector-topline,
    .sync-projector-footer {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: #54607A;
      font-weight: 850;
    }
    .sync-projector-card {
      min-height: 0;
      display: grid;
      align-content: center;
      gap: clamp(14px, 2vh, 26px);
    }
    .sync-projector-card h1,
    .sync-projector-card p {
      margin: 0;
    }
    .sync-projector-card h1 {
      max-width: 1100px;
      color: #031049;
      font-size: clamp(2.5rem, 5.2vw, 5.4rem);
      line-height: 1.02;
      letter-spacing: 0;
    }
    .sync-projector-card p {
      max-width: 1120px;
      color: #54607A;
      font-size: clamp(1.2rem, 1.8vw, 2rem);
      line-height: 1.35;
      font-weight: 650;
    }
    .sync-projector-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(10px, 1.5vw, 20px);
    }
    .sync-projector-option {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: clamp(14px, 1.8vw, 26px);
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #F6F8FB;
    }
    .sync-projector-option strong {
      width: clamp(42px, 4.5vw, 68px);
      height: clamp(42px, 4.5vw, 68px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #FD6707;
      color: #ffffff;
      font-size: clamp(1.4rem, 2vw, 2.1rem);
    }
    .sync-projector-option span {
      color: #031049;
      font-size: clamp(1rem, 1.45vw, 1.65rem);
      font-weight: 800;
      line-height: 1.25;
    }
    .sync-projector-option em {
      min-width: clamp(42px, 4.5vw, 68px);
      color: #031049;
      font-style: normal;
      font-size: clamp(1.8rem, 3vw, 3.5rem);
      font-weight: 950;
      text-align: right;
    }
    .sync-projector-option.correct {
      border-color: #268157;
      background: #e4f4ec;
    }
    .sync-projector-ranking {
      display: grid;
      gap: clamp(8px, 1vh, 14px);
      max-width: min(100%, 940px);
      padding-top: clamp(4px, 1vh, 12px);
    }
    .sync-projector-ranking strong {
      color: #031049;
      font-size: clamp(1rem, 1.5vw, 1.7rem);
    }
    .sync-projector-ranking ol {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(8px, 1vw, 14px);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .sync-projector-ranking li {
      min-width: 0;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: clamp(8px, 1vw, 14px);
      border-radius: 8px;
      background: #F6F8FB;
      color: #031049;
      font-weight: 900;
    }
    .sync-projector-ranking span {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .sync-projector-ranking em {
      flex: 0 0 auto;
      color: #FD6707;
      font-style: normal;
    }
    .student-classroom-page {
      background: #f9fbfd;
    }
    body.student-classroom-page .private-header,
    body.student-classroom-page .private-header .brand {
      color: #071321;
    }
    body.student-classroom-page .private-header nav a {
      color: #334155;
    }
    .student-classroom-main {
      width: min(100% - 28px, 520px);
      margin: 0 auto;
      padding: 24px 0 56px;
    }
    .student-classroom-shell,
    .student-classroom-card {
      display: grid;
      gap: 16px;
    }
    .student-classroom-heading h1,
    .student-classroom-heading p {
      margin: 0;
    }
    .student-classroom-heading h1 {
      color: #071321;
      font-size: 2rem;
      line-height: 1.1;
    }
    .student-classroom-heading p {
      margin-top: 8px;
      color: #334155;
      font-weight: 700;
      line-height: 1.45;
    }
    .student-classroom-card {
      padding: 18px;
      border: 1px solid #dbe5ee;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 16px 36px rgba(7, 19, 33, .08);
    }
    .student-classroom-card label,
    .student-classroom-card legend {
      color: #071321;
      font-weight: 800;
    }
    .student-classroom-card input[type="text"],
    .student-classroom-card input:not([type]) {
      width: 100%;
      min-height: 50px;
      margin-top: 6px;
      border: 1px solid #dbe5ee;
      border-radius: 8px;
      padding: 0 14px;
      color: #071321;
      font-size: 1rem;
    }
    .student-classroom-card fieldset {
      display: grid;
      gap: 10px;
      margin: 0;
      border: 1px solid #dbe5ee;
      border-radius: 8px;
      padding: 14px;
    }
    .student-classroom-card fieldset label {
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #f8fafc;
    }
    .student-classroom-card fieldset input[type="radio"] {
      width: 20px;
      height: 20px;
      margin: 0;
      flex: 0 0 auto;
      accent-color: #00476f;
    }
    .student-classroom-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .student-classroom-meta span {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: #eef6fb;
      color: #071321;
      font-weight: 800;
    }
    /* Maqueta aprobada 17-09-2026 (WXiAMeKNo3HXdZjm4jctSX v5): lista vertical, no cuadricula --
       mismo lenguaje visual que la lamina de pregunta (.presentation-projector-options li,
       mas abajo: tarjeta blanca, acento naranja a la izquierda, letra en placa navy). */
    .answer-pad {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .answer-button {
      min-height: 60px;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 16px;
      border: 1px solid #DCE1E8;
      border-left: 4px solid #FD6707;
      border-radius: 10px;
      background: #fbfdff;
      color: #071321;
      text-align: left;
      cursor: pointer;
    }
    .answer-button strong {
      /* Botonera pura: el pulsador ya no lleva el texto de la opcion (decision de Leandro,
         12-09-2026: la atencion del alumno tiene que estar en la pantalla del profesor, no en
         su telefono). El texto sigue viajando en el aria-label del boton, para los lectores de
         pantalla. Desde la maqueta del 17-09, la letra ya no ocupa el boton entero: es una
         placa cuadrada navy dentro de la fila -- la fila entera es el area de toque, y quien da
         la atencion ya no es el tamano de la letra sino el color de toda la fila. */
      width: 34px;
      height: 34px;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #031049;
      color: #ffffff;
      font-size: 1.05rem;
      line-height: 1;
      font-weight: 800;
    }
    /* Ajuste 13-09 (prueba real de clase, decision de Martin): A-B-C-D visibles sin scroll en
       un movil real -- se achica el titulo y el espaciado de la tarjeta. No cambia el contrato
       de sondeo ni el orden de las opciones, solo el tamano. */
    @media (max-width: 480px) {
      .student-classroom-main { padding-top: 16px; padding-bottom: 24px; }
      .student-classroom-heading h1 { font-size: 1.35rem; }
      .student-classroom-heading p { margin-top: 4px; font-size: .92rem; }
      .student-classroom-heading .inline-note { display: none; }
      .student-classroom-card { padding: 12px; gap: 10px; }
    }
    /* Movil muy chico (320px, ej. iPhone SE 1a gen.): un paso mas de ajuste. */
    @media (max-width: 340px) {
      .student-classroom-heading h1 { font-size: 1.15rem; }
      .answer-button { min-height: 52px; padding: 0 12px; gap: 10px; }
      .answer-button strong { width: 30px; height: 30px; font-size: .95rem; }
    }
    /* Estado NUEVO -- no existia hasta esta rama. Resuelve el hallazgo de Martin (17-09): al
       elegir, hoy no hay ninguna señal de color, solo un texto ("Enviada") que ademas
       desaparece al quitar todo el texto. Mismo navy solido que ya usa el sistema para "esto ya
       se registro" (ej. el boton primario del mando). */
    .answer-button[data-answer-state="sent"] {
      border-color: #031049;
      background: #031049;
      color: #ffffff;
    }
    .answer-button[data-answer-state="sent"] strong {
      background: #ffffff;
      color: #031049;
    }
    /* Al revelar: MISMOS colores que ya existian en el codigo real para correct/wrong -- sin
       sombra ni pastel inventado (ajuste pedido por Leandro, 17-09). Borde mas fino (1px en las
       4 caras, en vez del acento de 4px de la izquierda) que el estado "elegida" de arriba. */
    .answer-button[data-answer-state="correct"] {
      border-color: #128a5b;
      border-left-width: 1px;
      background: #eaf7f1;
      color: #0b5137;
    }
    .answer-button[data-answer-state="correct"] strong {
      background: #128a5b;
    }
    .answer-button[data-answer-state="wrong"] {
      border-color: #c0392b;
      border-left-width: 1px;
      background: #fdecea;
      color: #8c261a;
    }
    .answer-button[data-answer-state="wrong"] strong {
      background: #c0392b;
    }
    /* Las opciones NI elegidas NI correctas, solo DESPUES de revelar ("descartada" en la
       maqueta): mismo patron ya usado en el proyector (.presentation-projector-options con
       data-revealed="true", mas abajo en este fichero) -- un atributo en el contenedor, sin
       tocar la funcion studentAnswerPadOptionState ni el valor "idle" que ya usan las pruebas
       existentes antes de revelar. */
    .answer-pad[data-revealed="true"] .answer-button[data-answer-state="idle"] {
      border-color: #e6eaef;
      border-left-width: 1px;
      background: #F6F8FB;
    }
    .answer-pad[data-revealed="true"] .answer-button[data-answer-state="idle"] strong {
      background: #aab3c2;
    }
    .student-answer-verdict {
      display: grid;
      gap: 2px;
      margin: 14px 0 0;
      padding: 13px 15px;
      border-radius: 10px;
      border: 1px solid #dbe5ee;
      background: #f6f8fb;
      text-align: center;
    }
    .student-answer-verdict strong {
      font-size: 1.5rem;
      line-height: 1.1;
    }
    .student-answer-verdict span {
      font-size: .95rem;
      font-weight: 700;
    }
    .student-answer-verdict[data-verdict="correct"] {
      border-color: #128a5b;
      background: #eaf7f1;
      color: #0b5137;
    }
    .student-answer-verdict[data-verdict="wrong"] {
      border-color: #c0392b;
      background: #fdecea;
      color: #8c261a;
    }
    .student-answer-verdict[data-verdict="missed"] {
      border-color: #b7791f;
      background: #fdf4e3;
      color: #7a5312;
    }
    .answer-button span {
      font-size: .92rem;
      font-weight: 700;
      line-height: 1.25;
    }
    .answer-button em,
    .student-answer-state {
      margin: 0;
      color: var(--cap-status-ok);
      font-style: normal;
      font-weight: 800;
    }
    .answer-button em {
      font-size: .82rem;
      text-transform: uppercase;
    }
    .answer-button[data-answer-state="correct"] em {
      color: #0b5137;
    }
    .answer-button[data-answer-state="wrong"] em {
      color: #8c261a;
    }
    .student-answer-state {
      padding: 12px;
      border: 1px solid #bfe4dc;
      border-radius: var(--cap-radius-md);
      background: var(--cap-success-soft);
      text-align: center;
    }
    .student-classroom-result-card {
      display: grid;
      gap: 8px;
      padding: 18px;
      border: 1px solid #dbe5ee;
      border-radius: var(--cap-radius-md);
      background: #fbfdff;
      color: #071321;
      text-align: center;
    }
    .student-classroom-result-card span {
      color: #334155;
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .student-classroom-result-card strong {
      font-size: 2.1rem;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
    }
    .student-classroom-result-card p,
    .student-classroom-result-card small,
    .student-classroom-result-card em {
      margin: 0;
      font-weight: 800;
      line-height: 1.35;
    }
    .student-classroom-result-card small,
    .student-classroom-result-card em {
      color: #334155;
      font-size: .92rem;
      font-style: normal;
    }
    .student-classroom-result-card.apt {
      border-color: #97d6c9;
      background: #e6f7f4;
    }
    .student-classroom-result-card.apt strong {
      color: var(--cap-status-ok);
    }
    .student-classroom-result-card.no-apt {
      border-color: #f2b8b2;
      background: #fff0ee;
    }
    .student-classroom-result-card.no-apt strong {
      color: var(--cap-status-err);
    }
    .student-classroom-result-card.submitted strong {
      color: #003f63;
    }
    .student-classroom-result-card.pending {
      border-color: #efd6a8;
      background: #fff7e8;
    }
    .student-classroom-result-card.pending strong {
      color: #8a5a0a;
      font-size: 1.55rem;
      line-height: 1.08;
    }
    .student-result-exit {
      width: 100%;
      justify-content: center;
    }
    .answer-button:disabled {
      cursor: not-allowed;
      opacity: .55;
    }
    .student-classroom-waiting {
      margin: 0;
      color: #536678;
      font-weight: 800;
    }
    /* Item 6 de la Prioridad 2 (Martin, 14-09-2026, textual): "la llamada a la accion...
       tiene que decirle algo como 'mira la pregunta en la pantalla del proyector del
       profesor y responde ABC'... en dos segundos se tiene que dar cuenta que tiene que
       hacer." Solo se muestra con la pregunta abierta y sin respuesta enviada todavia --
       las otras dos situaciones (lamina de teoria, ya respondio) ya tienen su propio texto
       de estado inmediatamente despues o antes. */
    .student-classroom-cta {
      margin: 0 0 4px;
      padding: 10px 12px;
      border-radius: 8px;
      background: #EEF2FB;
      color: #031049;
      font-weight: 800;
      line-height: 1.35;
    }
    .teacher-presentation-shell {
      min-height: min(720px, calc(100vh - 150px));
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      gap: 16px;
    }
    .teacher-presentation-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .teacher-presentation-controls a {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #ffffff;
      color: #031049;
      font-weight: 900;
      text-decoration: none;
    }
    .teacher-presentation-deck {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }
    .teacher-slide {
      min-width: 0;
      display: grid;
      align-content: space-between;
      gap: 18px;
      padding: 28px;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 24px 60px rgba(12, 31, 51, .1);
    }
    .teacher-slide h1,
    .teacher-slide h2,
    .teacher-slide p {
      margin: 0;
    }
    .teacher-slide h1,
    .teacher-slide h2 {
      color: #031049;
      line-height: 1.08;
    }
    .teacher-slide h1 {
      font-size: 2.7rem;
    }
    .teacher-slide h2 {
      font-size: 2rem;
    }
    .teacher-slide p {
      color: #54607A;
      font-size: 1.05rem;
      line-height: 1.6;
    }
    /* Barrida de consistencia 08-09-2026 (Fase D): la tarjeta vacia de presentaciones cae en la
       regla compartida .private-page .button.primary (navy aproximado). Override directo, exclusivo
       de esta pagina. El mando de clase, rediseñado el 14-09, trae sus propios estilos en live-ui.ts. */
    .presentation-empty-shell .button.primary {
      background: #031049;
      border-color: #031049;
    }
    .presentation-empty-shell .button.primary:hover {
      background: #0a1c63;
      border-color: #0a1c63;
    }
    .presentation-empty-shell {
      place-items: center;
    }
    .presentation-empty-card {
      width: min(820px, 100%);
      display: grid;
      gap: 18px;
      padding: clamp(24px, 5vw, 54px);
      border: 1px solid #DCE1E8;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 24px 60px rgba(12, 31, 51, .1);
    }
    .presentation-empty-card h1,
    .presentation-empty-card p {
      margin: 0;
    }
    .presentation-empty-card h1 {
      color: #031049;
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1.04;
    }
    .presentation-empty-card > p:not(.private-kicker) {
      color: #54607A;
      font-size: 1.05rem;
      line-height: 1.55;
    }
    .presentation-empty-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .presentation-empty-checks span {
      padding: 8px 10px;
      border-radius: 999px;
      background: #F6F8FB;
      color: #031049;
      font-size: .82rem;
      font-weight: 850;
    }
    .presentation-empty-status {
      padding: 13px 15px;
      border-left: 4px solid #FD6707;
      background: #fdece0;
      color: #c8621c;
    }
    .teacher-slide-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .admin-list {
      display: grid;
      gap: 12px;
    }
    .admin-user-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 18px;
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #f9fbfd;
    }
    .admin-user-copy {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .admin-user-copy strong,
    .admin-user-copy span,
    .admin-user-copy small {
      display: block;
      overflow-wrap: break-word;
    }
    .admin-user-copy strong {
      color: #102030;
      font-size: 1.02rem;
    }
    .admin-user-copy span:not(.status-pill) {
      color: #405365;
      font-weight: 800;
    }
    .empty-state {
      display: grid;
      gap: 6px;
      padding: 20px;
    }
    .empty-state strong {
      color: #102030;
    }
    body.landing-page {
      background: linear-gradient(180deg, #071321 0, #071321 800px, #f4f8fb 800px, #f4f8fb 100%);
      color: #0d1b2a;
    }
    .landing-header {
      position: relative;
      z-index: 5;
      color: #f7fbff;
    }
    .landing-header .brand {
      color: #f7fbff;
    }
    .landing-header nav {
      align-items: center;
    }
    .landing-header nav a {
      min-height: 38px;
      padding: 8px 10px;
      border-color: transparent;
      background: transparent;
      color: #b8c8d8;
      box-shadow: none;
      white-space: nowrap;
    }
    .landing-header nav a.account {
      border-color: rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .08);
      color: #f7fbff;
    }
    .landing-header nav a.primary {
      border-color: #102f52;
      background: #102f52;
      color: #ffffff;
    }
    .landing-main {
      width: 100%;
      max-width: none;
      padding: 0;
      overflow: hidden;
    }
    .landing-hero {
      width: min(1180px, calc(100% - 32px));
      min-height: 720px;
      margin: 0 auto;
      padding: 64px 0 88px;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
      gap: 54px;
      align-items: center;
      position: relative;
    }
    .hero-copy, .product-stage, .product-main {
      min-width: 0;
    }
    .landing-badge {
      width: fit-content;
      max-width: 100%;
      margin-bottom: 20px;
      padding: 8px 12px;
      border: 1px solid rgba(36, 211, 197, .35);
      border-radius: 6px;
      background: rgba(36, 211, 197, .1);
      color: #92fff3;
      font-size: .82rem;
      font-weight: 800;
    }
    .landing-hero h1 {
      max-width: 650px;
      margin-bottom: 22px;
      color: #ffffff;
      font-size: 4.5rem;
      line-height: 1.02;
    }
    .landing-lead {
      max-width: 620px;
      margin-bottom: 30px;
      color: #b7c8d8;
      font-size: 1.2rem;
      line-height: 1.65;
    }
    .landing-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }
    .button.ghost {
      border-color: rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .08);
      color: #f7fbff;
    }
    .landing-page .button.primary {
      border-color: #102f52;
      background: #102f52;
      color: #ffffff;
      box-shadow: 0 18px 38px rgba(0, 0, 0, .25);
    }
    .button.quiet {
      border-color: transparent;
      background: transparent;
      color: #c9d7e6;
    }
    .landing-microcopy {
      max-width: 540px;
      margin: 18px 0 0;
      color: #90a5ba;
      font-size: .94rem;
    }
    .product-stage {
      position: relative;
      padding: 32px 0 96px;
    }
    .product-shell {
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      min-height: 360px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 8px;
      background: #ffffff;
      color: #0d1b2a;
      box-shadow: 0 34px 80px rgba(0, 0, 0, .36), 0 0 70px rgba(36, 211, 197, .12);
    }
    .product-sidebar {
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 26px 18px;
      background: #071321;
      color: #dce8f3;
    }
    .product-sidebar strong {
      margin-bottom: 14px;
      font-size: .82rem;
      letter-spacing: 0;
    }
    .side-item {
      min-height: 32px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      border-radius: 6px;
      color: #8ea4bb;
      font-size: .78rem;
      font-weight: 800;
    }
    .side-item.active {
      background: rgba(36, 211, 197, .15);
      color: #dffffa;
    }
    .product-main {
      padding: 28px;
      background: linear-gradient(180deg, #ffffff 0, #f2f7fb 100%);
    }
    .product-heading p {
      margin: 0 0 4px;
      color: #0d1b2a;
      font-size: 1.35rem;
      font-weight: 900;
      line-height: 1.15;
    }
    .product-heading span {
      color: #607286;
      font-size: .88rem;
      font-weight: 700;
    }
    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px;
    }
    .metric-card {
      min-width: 0;
      min-height: 142px;
      padding: 16px;
      border: 1px solid #d9e4ee;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 12px 30px rgba(13, 27, 42, .08);
    }
    .metric-card h3 {
      margin: 10px 0 6px;
      color: #0d1b2a;
      font-size: .98rem;
      line-height: 1.2;
    }
    .metric-card p {
      min-height: 40px;
      margin-bottom: 14px;
      color: #617286;
      font-size: .82rem;
      line-height: 1.45;
    }
    .metric-dot {
      width: 14px;
      height: 14px;
      display: inline-block;
      border-radius: 50%;
      background: var(--teal);
    }
    .metric-dot.gold { background: var(--gold); }
    .metric-dot.blue { background: var(--blue); }
    .progress-bar {
      width: 100%;
      height: 8px;
      display: block;
      overflow: hidden;
      border-radius: 999px;
      background: #e5edf4;
    }
    .progress-bar span {
      height: 100%;
      display: block;
      border-radius: inherit;
      background: #102f52;
    }
    .tool-strip {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      margin-top: 16px;
      padding: 14px;
      border: 1px solid #cfe3df;
      border-radius: 8px;
      background: #e9f6f3;
    }
    .tool-strip strong, .tool-strip span {
      display: block;
    }
    .tool-strip strong {
      color: #0b5f59;
      font-size: .92rem;
    }
    .tool-strip span {
      color: #526779;
      font-size: .82rem;
      font-weight: 700;
    }
    .pin-widget {
      display: grid;
      gap: 8px;
      min-width: 136px;
      padding: 10px;
      border-radius: 8px;
      background: #071321;
      color: #f7fbff;
      text-align: center;
    }
    .pin-widget > span {
      color: #92fff3;
      font-size: .78rem;
      font-weight: 900;
    }
    .abcd-row, .teacher-abcd {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }
    .abcd-row b, .teacher-abcd b {
      min-width: 0;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: rgba(255, 255, 255, .12);
      color: #f7fbff;
      font-size: .82rem;
    }
    .abcd-row b.selected, .teacher-abcd b:nth-child(3) {
      background: var(--teal);
      color: #071321;
    }
    .floating-review, .floating-classroom {
      position: absolute;
      z-index: 2;
      display: grid;
      gap: 6px;
      max-width: 190px;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 8px;
      color: #f7fbff;
      box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
    }
    .floating-review strong, .floating-classroom strong {
      font-size: .95rem;
    }
    .floating-review span, .floating-classroom span {
      color: #b9c9d8;
      font-size: .82rem;
      font-weight: 700;
      line-height: 1.35;
    }
    .floating-review {
      right: 36px;
      bottom: 20px;
      background: #071321;
    }
    .floating-classroom {
      left: 24px;
      bottom: 22px;
      background: #0b2634;
    }
    .landing-section {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 74px 0;
      color: #0d1b2a;
    }
    .landing-section.split {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
    }
    .landing-section.split article,
    .feature-grid article,
    .differentiator-grid article,
    .teacher-panel {
      border: 1px solid #d7e3ed;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 16px 38px rgba(12, 31, 51, .08);
    }
    .landing-section.split article {
      padding: 30px;
    }
    .section-kicker {
      margin-bottom: 10px;
      color: #0a766e;
      font-size: .78rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    .landing-section h2,
    .landing-final h2 {
      max-width: 780px;
      margin-bottom: 14px;
      font-size: 2.45rem;
      line-height: 1.1;
    }
    .landing-section p {
      max-width: 760px;
      color: #526170;
      font-size: 1.08rem;
      line-height: 1.7;
    }
    .section-heading {
      display: grid;
      gap: 4px;
      margin-bottom: 24px;
    }
    .feature-grid,
    .differentiator-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }
    .feature-grid article {
      padding: 20px;
    }
    .feature-grid h3 {
      margin: 0 0 8px;
      color: #0d1b2a;
      font-size: 1rem;
      line-height: 1.25;
    }
    .feature-grid p {
      margin: 0;
      color: #617286;
      font-size: .9rem;
      line-height: 1.5;
    }
    .teacher-band {
      color: #f7fbff;
      background: #071321;
      box-shadow: 0 0 0 100vmax #071321;
      clip-path: inset(0 -100vmax);
    }
    .teacher-band .section-kicker {
      color: #92fff3;
    }
    .teacher-band h2,
    .teacher-band p {
      color: inherit;
    }
    .teacher-layout {
      display: grid;
      grid-template-columns: minmax(260px, 370px) minmax(0, 1fr);
      gap: 30px;
      align-items: start;
    }
    .teacher-panel {
      padding: 24px;
      background: #0b2333;
      border-color: rgba(255, 255, 255, .14);
    }
    .teacher-panel h3 {
      margin: 0 0 10px;
      color: #ffffff;
      font-size: 1.3rem;
    }
    .teacher-panel p {
      color: #b8c8d8;
      font-size: .96rem;
    }
    .teacher-abcd {
      max-width: 240px;
      margin-top: 22px;
    }
    .check-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .check-list li {
      min-height: 56px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .07);
      color: #dce8f3;
      font-weight: 800;
    }
    .center-section {
      display: grid;
      grid-template-columns: minmax(0, 760px);
    }
    .center-actions {
      margin-top: 22px;
    }
    .center-landing-hero {
      width: min(1180px, calc(100% - 32px));
      min-height: 660px;
      margin: 0 auto;
      padding: 64px 0 88px;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(320px, .72fr);
      gap: 52px;
      align-items: center;
      color: #f7fbff;
    }
    .center-landing-copy,
    .center-context-panel {
      min-width: 0;
    }
    .center-landing-logo {
      display: block;
      width: auto;
      max-width: min(280px, 100%);
      max-height: 94px;
      margin: 0 0 24px;
      object-fit: contain;
      border-radius: 0;
      background: #ffffff;
    }
    .center-landing-hero h1 {
      max-width: 680px;
      margin-bottom: 22px;
      color: #ffffff;
      font-size: 4.1rem;
      line-height: 1.02;
    }
    .center-context-panel {
      padding: 30px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 8px;
      background: rgba(255, 255, 255, .08);
      box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
    }
    .center-context-panel h2 {
      margin: 0 0 14px;
      color: #ffffff;
      font-size: 2rem;
      line-height: 1.12;
    }
    .center-context-panel p {
      margin: 0 0 22px;
      color: #b8c8d8;
      font-size: 1rem;
      line-height: 1.65;
    }
    .center-context-list {
      display: grid;
      gap: 10px;
      margin: 0;
    }
    .center-context-list div {
      display: grid;
      gap: 3px;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 8px;
      background: rgba(7, 19, 33, .5);
    }
    .center-context-list dt {
      color: #92fff3;
      font-size: .78rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    .center-context-list dd {
      margin: 0;
      color: #f7fbff;
      font-weight: 800;
    }
    .center-feature-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .differentiator-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .differentiator-grid article {
      min-height: 86px;
      display: flex;
      align-items: center;
      padding: 20px;
      color: #0d1b2a;
      font-weight: 900;
      line-height: 1.3;
    }
    .access-section {
      padding: 64px;
      border: 1px solid #cfe3df;
      border-radius: 8px;
      background: #e9f6f3;
    }
    .access-section p {
      margin-bottom: 0;
    }
    .landing-final {
      width: min(1180px, calc(100% - 32px));
      margin: 80px auto 0;
      padding: 76px 0 92px;
      color: #f7fbff;
      background: #071321;
      box-shadow: 0 0 0 100vmax #071321;
      clip-path: inset(0 -100vmax);
    }
    .final-actions {
      margin-top: 24px;
    }
    @media (max-width: 640px) {
      .practice-setup-workbench {
        min-height: 0;
        background: #ffffff;
      }
      .student-mode-overview,
      .student-search-facts {
        grid-template-columns: 1fr;
      }
      .student-mode-overview article {
        min-height: 0;
      }
      body.student-challenge-player > .student-app-header {
        display: none;
      }
      body.student-challenge-player > .student-app-main {
        width: 100%;
        padding: 0 0 28px;
      }
      .student-challenge-player .student-practice-shell,
      .student-challenge-player .practice-card {
        width: 100%;
      }
      .student-challenge-player .practice-card {
        padding: 8px 12px 0;
      }
      .student-challenge-player .practice-stage-panel {
        gap: 6px;
        padding-top: 0;
      }
      .student-challenge-player .practice-stage-topline {
        padding-top: max(8px, env(safe-area-inset-top));
        font-size: 11px;
        line-height: 15px;
      }
      .student-challenge-player .practice-progress-track {
        height: 5px;
      }
      .student-challenge-player .challenge-question-position {
        font-size: 11px;
        line-height: 14px;
      }
      .student-challenge-player .challenge-question-text {
        font-size: clamp(19px, 6.2vw, 25px);
        line-height: 1.2;
      }
      .student-challenge-player .practice-question-card .challenge-question-trace {
        font-size: 10px;
        line-height: 14px;
      }
      .student-challenge-player .practice-answer-form {
        margin-top: 2px;
      }
      .student-challenge-player .challenge-map-grid {
        display: flex;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
      }
      .student-challenge-player .challenge-map-grid .challenge-map-item {
        flex: 0 0 44px;
        width: 44px;
        scroll-snap-align: center;
      }
      .student-challenge-player .challenge-map-toggle {
        display: inline-flex;
        align-items: center;
      }
      .student-challenge-player .challenge-map-grid.expanded {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        overflow: visible;
        scroll-snap-type: none;
      }
      .student-challenge-player .challenge-map-grid.expanded .challenge-map-item {
        width: 100%;
      }
      .challenge-submit-form {
        grid-template-columns: 1fr;
      }
      header {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 18px;
      }
      nav {
        justify-content: flex-start;
      }
      main {
        padding-top: 28px;
      }
      .panel {
        padding: 18px;
      }
      .row {
        grid-template-columns: 1fr;
      }
      .row-actions {
        width: 100%;
      }
      .row-actions form, .row-actions button {
        width: 100%;
      }
      .private-main {
        width: min(100% - 24px, 1120px);
        padding: 28px 0 52px;
      }
      .auth-layout,
      .status-shell,
      .account-hero,
      .admin-header,
      .admin-user-row,
      .sync-classroom-start-form,
      .teacher-focus-grid,
      .teacher-tool-grid,
      .teacher-challenge-entry,
      .teacher-challenge-builder-grid,
      .teacher-challenge-content-mode,
      .teacher-challenge-counts,
      .teacher-total-duration,
      .teacher-challenge-objective-grid,
      .teacher-challenge-template-grid,
      .teacher-challenge-share,
      .teacher-review-priority,
      .teacher-review-question > summary,
      .teacher-review-options article,
      .classic-projector-grid.split,
      .classic-projector-grid.summary,
      .projector-metrics,
      .teacher-presentation-deck {
        grid-template-columns: 1fr;
      }
      .teacher-dashboard > *,
      .teacher-challenge-form,
      .teacher-challenge-form fieldset,
      .teacher-challenge-form label,
      .teacher-challenge-form select {
        min-width: 0;
        max-width: 100%;
      }
      .teacher-dashboard :is(h1, h2, h3, p, dd, span, strong) {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .classic-projector-card-head,
      .classic-projector-summary-head {
        align-items: stretch;
        flex-direction: column;
      }
      .teacher-secondary-workspace > summary {
        display: grid;
      }
      .classic-projector-access {
        width: 100%;
      }
      .classic-projector-card-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .classic-projector-ranking li {
        grid-template-columns: 30px minmax(0, 1fr) auto;
      }
      .classic-projector-progress-segments,
      .classic-projector-progress-summary {
        grid-column: 2 / -1;
      }
      .classic-projector-answer-counts {
        grid-column: 2 / -1;
      }
      .classic-projector-grid.single .classic-projector-ranking {
        grid-template-columns: 1fr;
      }
      .classic-projector-participant small {
        display: none;
      }
      .teacher-review-heading {
        align-items: stretch;
        flex-direction: column;
      }
      .teacher-review-heading .actions,
      .teacher-review-heading .button {
        width: 100%;
      }
      .teacher-review-options article > em {
        padding-left: 46px;
      }
      .teacher-drilldown > summary,
      .teacher-objective-list article {
        grid-template-columns: 1fr;
      }
      .teacher-drilldown > summary {
        align-items: start;
      }
      .teacher-drilldown > summary > .status-pill,
      .teacher-drilldown > summary > .teacher-drilldown-title,
      .teacher-drilldown > summary > .teacher-drilldown-action {
        grid-column: 1;
      }
      .teacher-drilldown-action {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      .teacher-group-students li {
        align-items: flex-start;
        flex-direction: column;
      }
      .teacher-group-students span {
        text-align: left;
      }
      .teacher-challenge-qr {
        width: 132px;
        height: 132px;
        justify-self: start;
      }
      .teacher-projector-surface,
      .teacher-presentation-deck {
        aspect-ratio: auto;
        min-height: 0;
      }
      .teacher-projector-surface {
        padding: 20px;
      }
      .projector-hero h1,
      .teacher-slide h1 {
        font-size: 2.1rem;
      }
      .projector-focus-band h2,
      .projector-action-band h2,
      .teacher-slide h2 {
        font-size: 1.45rem;
      }
      .auth-copy h1,
      .account-hero h1,
      .admin-header h1 {
        font-size: 2.35rem;
      }
      .auth-panel,
      .status-card,
      .account-panel,
      .admin-panel {
        padding: 20px;
      }
      .status-mark {
        width: 72px;
      }
      /*
       * F16 (16-09-2026): en este ancho ".status-shell" ya pasa a una sola columna (ver
       * arriba, "grid-template-columns: 1fr"), asi que la marca de 72x72 queda como una
       * caja suelta encima de la tarjeta blanca, sin nada al lado -- confirmado "horrible"
       * por Martin en el ensayo del 15-09 (item #12/#13,
       * 2026-09-15_resultado-ensayo-y-arreglos.md) y visible en la captura de
       * "Registro temporalmente pausado". La marca no añade informacion que el titulo y
       * el texto de la tarjeta no den ya, asi que en vez de reacomodarla se oculta -- el
       * franjazo de fondo oscuro (ver el "body.private-page:has(.status-shell)" de abajo)
       * ya cumple el mismo papel de aviso visual sin dejar una caja huerfana.
       */
      .status-mark {
        display: none;
      }
      /*
       * Sin la marca, ".status-shell" se queda con un solo hijo (la tarjeta) y el
       * franjazo navy de "body.private-page" (pensado para dar espacio a la cabecera Y a
       * la marca de 72px) se queda enorme y vacio antes de que empiece la tarjeta. Se
       * acorta SOLO en paginas de estado/error (las que usan ".status-shell") para no
       * tocar el resto de paginas privadas, que si usan ese espacio.
       */
      body.private-page:has(.status-shell) {
        background: linear-gradient(180deg, #071321 0, #071321 84px, #eef4f8 84px, #eef4f8 100%);
      }
      .account-meta,
      .available-grid,
      .student-home-grid,
      .student-support-grid,
      .student-progress-summary .account-meta,
      .module-grid,
      .ops-grid {
        grid-template-columns: 1fr;
      }
      .admin-summary {
        width: 100%;
        text-align: left;
      }
    }
    @media (max-width: 1040px) {
      body.landing-page {
        background: linear-gradient(180deg, #071321 0, #071321 1060px, #f4f8fb 1060px, #f4f8fb 100%);
      }
      .landing-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 40px;
      }
      .center-landing-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 28px;
        padding-top: 40px;
      }
      .product-stage {
        padding-top: 24px;
      }
      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .module-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .ops-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (min-width: 641px) and (max-width: 1040px) {
      .teacher-tool-grid,
      .projector-metrics,
      .teacher-presentation-deck {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (min-width: 900px) {
      .student-figma-shell {
        justify-items: center;
      }
      .student-dashboard-layout {
        width: min(980px, 100%);
      }
      .student-platform-layout {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        justify-items: center;
        gap: 16px;
      }
      .student-platform-sidebar,
      .student-platform-context {
        display: none;
      }
      .student-home-frame {
        width: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
        gap: 16px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }
      .student-home-header,
      .student-bottom-nav {
        grid-column: 1 / -1;
      }
      .student-home-hero {
        grid-row: span 2;
        align-self: start;
      }
      .student-dashboard-side {
        width: 100%;
      }
      .practice-mobile-frame {
        width: min(960px, 100%);
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }
      .student-bottom-nav {
        display: grid;
        width: 100%;
        margin: 2px 0 0;
        border: 1px solid #DCE1E8;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(3, 16, 73, .07);
      }
      .student-home-header,
      .practice-mobile-header {
        padding: 14px 18px;
        border: 1px solid #dce6ea;
        border-radius: 22px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 18px 42px rgba(20, 48, 68, .08);
      }
      .student-home-hero {
        min-height: 238px;
        align-content: center;
        padding: 28px;
      }
      .student-home-hero h2 {
        max-width: 520px;
        font-size: 34px;
        line-height: 39px;
      }
      .practice-stage-panel {
        padding: 16px;
        border: 1px solid #dce6ea;
        border-radius: 22px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 18px 42px rgba(20, 48, 68, .08);
      }
      .student-study-action {
        min-height: 92px;
      }
      .student-home-secondary-list {
        align-content: start;
      }
      .practice-platform-layout {
        grid-template-columns: minmax(0, 1fr);
      }
      .practice-setup-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .practice-setup-form {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
      }
      .practice-mode-choice-group {
        grid-row: auto;
      }
      .practice-setup-form .student-primary-cta {
        grid-column: auto;
      }
      .practice-runtime-layout {
        grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
        align-items: start;
      }
      .practice-question-card {
        padding: 18px;
      }
      .practice-question-card h3 {
        font-size: 23px;
        line-height: 30px;
      }
    }
    @media (max-width: 780px) {
      body.landing-page {
        background: linear-gradient(180deg, #071321 0, #071321 1260px, #f4f8fb 1260px, #f4f8fb 100%);
      }
      body.private-page {
        background: linear-gradient(180deg, #071321 0, #071321 220px, #eef4f8 220px, #eef4f8 100%);
      }
      body.private-page .private-header {
        min-height: 44px;
        flex-direction: row;
        align-items: center;
        padding-top: 0;
      }
      body.private-page .private-header .brand {
        font-size: .92rem;
      }
      body.private-page .private-header .center-brand {
        max-width: none;
      }
      body.private-page .private-header .center-brand-logo {
        height: 28px;
        max-width: 88px;
      }
      body.private-page .private-header .center-brand-name {
        display: none;
      }
      body.private-page .private-header nav {
        justify-content: flex-end;
      }
      .private-main {
        padding: 10px 0 40px;
      }
      .auth-main {
        min-height: 0;
        align-items: start;
      }
      .private-main.auth-main {
        padding-top: 0;
        padding-bottom: 28px;
      }
      .account-main {
        padding-top: 0;
      }
      .student-home-frame {
        gap: 12px;
        padding: 0 12px 8px;
      }
      .student-home-header {
        padding-bottom: 0;
      }
      .student-home-header,
      .practice-mobile-header {
        flex-direction: row;
        align-items: center;
        padding-top: 0;
      }
      .student-home-header {
        justify-content: space-between;
      }
      .practice-mobile-header {
        justify-content: space-between;
      }
      .student-home-header h1 {
        font-size: 18px;
        line-height: 22px;
      }
      .student-home-header p {
        font-size: 12px;
        line-height: 16px;
      }
      .student-home-hero {
        gap: 12px;
        padding: 18px;
        border-radius: 22px;
      }
      .student-home-hero h2 {
        font-size: 26px;
        line-height: 31px;
      }
      .student-home-hero p {
        font-size: 13px;
        line-height: 19px;
      }
      .student-attempt-row {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .student-attempt-actions {
        justify-content: flex-start;
      }
      .student-history-heading {
        grid-template-columns: 1fr;
      }
      .student-history-list .student-attempt-actions {
        justify-content: flex-start;
      }
      .student-attempt-actions,
      .student-repeat-attempt,
      .student-repeat-attempt-form {
        width: 100%;
      }
      .student-attempt-primary-link,
      .student-attempt-secondary-link {
        flex: 1 1 132px;
      }
      .student-history-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .student-bottom-nav {
        margin-right: -12px;
        margin-left: -12px;
      }
      .private-header nav a {
        min-height: 34px;
        padding: 7px 8px;
        font-size: .9rem;
      }
      .auth-layout {
        gap: 8px;
      }
      .login-layout .auth-copy {
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 12px;
        background: #071321;
      }
      .login-layout .auth-copy h1 {
        margin-bottom: 6px;
        font-size: 1.42rem;
        line-height: 1.6rem;
      }
      .login-layout .auth-copy p {
        color: #d7e6f2;
        font-size: .86rem;
        line-height: 1.3;
      }
      .login-layout .private-kicker {
        min-height: 0;
        margin-bottom: 7px;
        padding: 6px 8px;
        font-size: .68rem;
        line-height: 1.05;
      }
      .login-layout .trust-list {
        display: none;
      }
      .login-layout .auth-panel {
        padding: 14px;
      }
      .login-layout .auth-panel h2 {
        margin-bottom: 5px;
        font-size: 1.34rem;
      }
      .login-layout .private-form-intro {
        line-height: 1.35;
      }
      .login-layout .form-grid {
        gap: 8px;
        margin-top: 10px;
      }
      .login-layout input {
        min-height: 40px;
      }
      .login-layout .button.primary {
        min-height: 44px;
      }
      .auth-copy p,
      .private-lead,
      .admin-header p {
        font-size: 1rem;
        line-height: 1.55;
      }
      .account-hero,
      .admin-header {
        align-items: start;
        padding-top: 12px;
      }
      .account-meta,
      .available-grid,
      .student-home-grid,
      .student-support-grid,
      .student-progress-summary .account-meta,
      .module-grid,
      .ops-grid {
        grid-template-columns: 1fr;
      }
      .student-action-card {
        min-height: 228px;
        padding: 20px;
      }
      .student-action-card h3 {
        font-size: 1.48rem;
      }
      .practice-option {
        grid-template-columns: 32px 1fr;
        min-height: 48px;
        padding: 8px 9px;
      }
      .practice-option strong {
        width: 30px;
        height: 30px;
      }
      .practice-option span {
        font-size: 16px;
        line-height: 22px;
      }
      .student-challenge-player .practice-question-card > p:not(.practice-context-label) {
        font-size: 16px;
        line-height: 23px;
      }
      .student-primary-cta {
        min-height: 45px;
        padding: 12px 14px;
      }
      .student-mobile-frame {
        width: min(390px, 100%);
        min-height: min(720px, calc(100vh - 34px));
        border-radius: 22px;
      }
      .practice-mobile-frame {
        padding: 4px 12px 0;
      }
      .practice-mobile-map {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
      }
      .practice-mobile-header {
        min-height: 18px;
        gap: 6px;
        justify-content: space-between;
        font-size: 9px;
        line-height: 11px;
      }
      .practice-stage-panel {
        gap: 6px;
        padding-top: 0;
      }
      .practice-question-card h3 {
        font-size: 16px;
        line-height: 21px;
      }
      .practice-question-card {
        padding: 8px;
      }
      .practice-action-row {
        gap: 6px;
      }
      .practice-skip-button {
        min-height: 43px;
        padding: 10px 12px;
      }
      .practice-secondary-link {
        font-size: 12px;
        line-height: 15px;
      }
      .practice-processing-feedback {
        min-height: 0;
        margin: -2px 0 0;
      }
      .practice-mode-panel {
        gap: 7px;
        padding: 8px;
        border-radius: 16px;
      }
      .practice-setup-step {
        padding: 8px;
      }
      .practice-mode-choice-group {
        padding: 8px;
      }
      .practice-mode-choice {
        padding: 8px;
      }
      .landing-header nav a {
        min-height: 34px;
        padding: 7px 8px;
        font-size: .9rem;
      }
      .landing-header nav a.nav-link:not(.account) {
        display: none;
      }
      .landing-header .center-brand-name {
        display: none;
      }
      .landing-header nav {
        width: auto;
      }
      .landing-hero h1 {
        font-size: 3rem;
      }
      .landing-lead {
        font-size: 1.04rem;
      }
      .product-shell,
      .center-landing-hero,
      .landing-section.split,
      .teacher-layout {
        grid-template-columns: 1fr;
      }
      .product-sidebar {
        display: none;
      }
      .metric-grid,
      .feature-grid,
      .differentiator-grid,
      .check-list {
        grid-template-columns: 1fr;
      }
      .tool-strip {
        grid-template-columns: 1fr;
      }
      .student-action-footer,
      .practice-step-strip {
        align-items: stretch;
        flex-direction: column;
      }
      .practice-step-strip {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
      }
      .practice-step-strip small {
        flex-basis: 100%;
        margin-top: -2px;
      }
      .student-action-footer .button,
      .student-action-footer form,
      .student-action-footer button {
        width: 100%;
      }
      .floating-review,
      .floating-classroom {
        position: static;
        max-width: none;
        margin-top: 12px;
      }
      .landing-section {
        padding: 54px 0;
      }
      .landing-section h2,
      .center-landing-hero h1,
      .landing-final h2 {
        font-size: 2rem;
      }
      .access-section {
        padding: 28px;
      }
    }
    @media (max-width: 440px) {
      h1 {
        font-size: 2.35rem;
      }
      .student-secondary-row {
        grid-template-columns: 34px minmax(0, 1fr);
      }
      .student-secondary-row .student-secondary-action,
      .student-secondary-row .student-inline-form {
        grid-column: 2;
        justify-self: start;
      }
      .practice-correction-actions,
      .student-summary-actions {
        grid-template-columns: 1fr;
      }
      .practice-action-row {
        grid-template-columns: minmax(0, 1fr) minmax(88px, .64fr);
      }
      .compact-choice-group {
        grid-template-columns: 1fr;
      }
      .practice-secondary-link {
        justify-self: center;
      }
      .landing-hero {
        width: min(100% - 24px, 1180px);
        min-height: auto;
        padding-top: 28px;
        padding-bottom: 52px;
        gap: 8px;
      }
      .center-landing-hero {
        width: min(100% - 24px, 1180px);
        padding-top: 28px;
        padding-bottom: 52px;
      }
      .landing-hero h1 {
        margin-bottom: 16px;
        font-size: 2.28rem;
        line-height: 1.05;
      }
      .center-landing-hero h1 {
        margin-bottom: 16px;
        font-size: 2.2rem;
        line-height: 1.08;
      }
      .landing-lead {
        margin-bottom: 22px;
        font-size: .98rem;
        line-height: 1.55;
      }
      .auth-copy h1,
      .account-hero h1,
      .admin-header h1 {
        margin-bottom: 14px;
        font-size: 2.15rem;
        line-height: 1.08;
      }
      .trust-list {
        margin-top: 18px;
      }
      .private-page .button,
      .private-page nav a.primary,
      .private-page nav a.account {
        width: 100%;
      }
      .private-header nav {
        width: auto;
      }
      .landing-actions .button {
        width: 100%;
      }
      .landing-actions .button.quiet {
        min-height: 32px;
        padding: 4px 10px;
      }
      .landing-microcopy {
        margin-top: 12px;
        font-size: .88rem;
        line-height: 1.45;
      }
      .product-stage {
        padding-top: 8px;
        padding-bottom: 0;
      }
      .product-main {
        padding: 18px;
      }
      .landing-section,
      .landing-final {
        width: min(100% - 24px, 1180px);
      }
    }
    @media (max-width: 1040px) and (orientation: landscape) {
      .practice-mobile-frame {
        width: min(100%, 880px);
      }
      .practice-options,
      .practice-static-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    /* P2-MVP-229: premium Stitch-inspired direction, scoped to public/auth/admin shells. */
    body.landing-page {
      background: #eef3f1;
      color: #14242b;
    }
    .landing-header {
      min-height: 74px;
      color: #14242b;
    }
    .landing-header .brand {
      color: #14242b;
    }
    .landing-header nav a {
      border-color: transparent;
      background: transparent;
      color: #52646c;
      box-shadow: none;
    }
    .landing-header nav a.account {
      border-color: #d6e0dc;
      background: #ffffff;
      color: #14242b;
    }
    .landing-header nav a.primary,
    .landing-page .button.primary,
    .auth-page .button.primary,
    body.private-page:has(.admin-shell) .button.primary {
      border-color: #145c68;
      background: #145c68;
      color: #ffffff;
      box-shadow: 0 12px 26px rgba(20, 92, 104, .18);
    }
    .landing-hero,
    .center-landing-hero {
      min-height: 0;
      margin-top: 18px;
      margin-bottom: 34px;
      padding: 62px;
      border: 1px solid #d9e3de;
      border-radius: 8px;
      background: #fbfcfb;
      box-shadow: 0 28px 74px rgba(27, 50, 56, .11);
      color: #14242b;
    }
    .landing-badge,
    .private-kicker {
      border-color: #c6dbd6;
      background: #e6f1ee;
      color: #145c68;
    }
    .landing-hero h1,
    .center-landing-hero h1 {
      max-width: 700px;
      color: #14242b;
      font-size: 3.28rem;
      line-height: 1.06;
    }
    .landing-lead,
    .landing-microcopy {
      color: #52646c;
    }
    .landing-page .button.ghost,
    .auth-page .button.ghost,
    .landing-page .button.quiet,
    .auth-page .button.quiet {
      border-color: #d6e0dc;
      background: #ffffff;
      color: #14242b;
    }
    .landing-page .button.quiet {
      background: transparent;
    }
    .product-stage {
      padding: 0;
    }
    .product-shell {
      grid-template-columns: 1fr;
      min-height: 0;
      border-color: #d9e3de;
      background: #ffffff;
      box-shadow: 0 18px 44px rgba(27, 50, 56, .12);
    }
    .product-sidebar {
      display: none;
    }
    .product-main {
      background: #ffffff;
    }
    .progress-bar span {
      background: #2c9a90;
    }
    .metric-dot {
      background: #2c9a90;
    }
    .metric-dot.gold {
      background: #d3ad4f;
    }
    .metric-dot.blue {
      background: #6c8da3;
    }
    .pin-widget {
      background: #16323a;
    }
    .pin-widget > span {
      color: #9edbd3;
    }
    .abcd-row b.selected,
    .teacher-abcd b:nth-child(3) {
      background: #2c9a90;
      color: #ffffff;
    }
    .floating-review,
    .floating-classroom {
      position: static;
      max-width: none;
      margin-top: 12px;
      border-color: #d9e3de;
      background: #ffffff;
      color: #14242b;
      box-shadow: 0 14px 34px rgba(27, 50, 56, .1);
    }
    .floating-review span,
    .floating-classroom span {
      color: #52646c;
    }
    .landing-section {
      padding: 62px 0;
    }
    .feature-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .center-feature-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .teacher-band {
      color: #14242b;
      background: #e7f0ec;
      box-shadow: 0 0 0 100vmax #e7f0ec;
    }
    .teacher-band .section-kicker {
      color: #145c68;
    }
    .teacher-panel,
    .check-list li {
      border-color: #d9e3de;
      background: #ffffff;
      color: #14242b;
      box-shadow: 0 14px 34px rgba(27, 50, 56, .09);
    }
    .teacher-panel h3,
    .teacher-panel p {
      color: #14242b;
    }
    .teacher-panel p {
      color: #52646c;
    }
    .center-context-panel {
      border-color: #d9e3de;
      background: #ffffff;
      box-shadow: 0 18px 44px rgba(27, 50, 56, .1);
    }
    .center-context-panel h2 {
      color: #14242b;
    }
    .center-context-panel p {
      color: #52646c;
    }
    .center-context-list div {
      border-color: #d9e3de;
      background: #f6f9f7;
    }
    .center-context-list dt {
      color: #145c68;
    }
    .center-context-list dd {
      color: #14242b;
    }
    .landing-final {
      color: #14242b;
      background: #fbfcfb;
      box-shadow: 0 0 0 100vmax #fbfcfb;
    }
    body.private-page.auth-page,
    body.private-page:has(.admin-shell) {
      background: #eef3f1;
      color: #14242b;
    }
    .auth-page .private-header,
    body.private-page:has(.admin-shell) .private-header {
      color: #14242b;
    }
    .auth-page .private-header .brand,
    body.private-page:has(.admin-shell) .private-header .brand {
      color: #14242b;
    }
    .auth-page .private-header nav a,
    body.private-page:has(.admin-shell) .private-header nav a {
      border-color: transparent;
      background: transparent;
      color: #52646c;
    }
    .auth-page .private-header nav a.account,
    body.private-page:has(.admin-shell) .private-header nav a.account {
      border-color: #d6e0dc;
      background: #ffffff;
      color: #14242b;
    }
    .auth-layout,
    .admin-shell {
      padding: 44px;
      border: 1px solid #d9e3de;
      border-radius: 8px;
      background: #fbfcfb;
      box-shadow: 0 24px 64px rgba(27, 50, 56, .11);
    }
    .auth-copy h1,
    .account-hero h1,
    .admin-header h1 {
      color: #14242b;
      font-size: 2.82rem;
      line-height: 1.08;
    }
    .auth-copy p,
    .private-lead,
    .admin-header p {
      color: #52646c;
    }
    .trust-list span {
      border-color: #d6e0dc;
      background: #ffffff;
      color: #14242b;
    }
    .auth-page .panel,
    body.private-page:has(.admin-shell) .panel {
      border-color: #d9e3de;
      box-shadow: 0 16px 42px rgba(27, 50, 56, .1);
    }
    .auth-page .login-layout .auth-copy {
      padding: 0;
      border: 0;
      background: transparent;
    }
    .projector-page,
    body.private-page.projector-page {
      background: #F6F8FB;
      color: #031049;
    }
    .projector-page .private-header,
    .projector-page .private-header .brand,
    .projector-page .private-header nav a {
      color: #031049;
    }
    .teacher-projector-surface {
      border-color: #DCE1E8;
      background: #ffffff;
      box-shadow: 0 22px 58px rgba(3, 16, 73, .12);
    }
    @media (max-width: 1040px) {
      body.landing-page,
      body.private-page.auth-page,
      body.private-page:has(.admin-shell) {
        background: #eef3f1;
      }
      .landing-hero,
      .center-landing-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 44px;
      }
      .feature-grid,
      .center-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 780px) {
      .landing-hero,
      .center-landing-hero,
      .auth-layout,
      .admin-shell {
        padding: 24px;
      }
      .landing-hero h1,
      .center-landing-hero h1,
      .auth-copy h1,
      .account-hero h1,
      .admin-header h1 {
        font-size: 2.12rem;
        line-height: 1.1;
      }
      .auth-layout {
        gap: 14px;
      }
      .auth-page .login-layout .auth-copy {
        padding: 0;
        border: 0;
        background: transparent;
      }
      .auth-page .login-layout .auth-copy h1 {
        color: #14242b;
        font-size: 2.12rem;
        line-height: 1.1;
      }
      .auth-page .login-layout .auth-copy p {
        color: #52646c;
        font-size: .95rem;
        line-height: 1.45;
      }
      .auth-page .login-layout .private-kicker {
        border-color: #c6dbd6;
        background: #e6f1ee;
        color: #145c68;
      }
      .feature-grid,
      .center-feature-grid,
      .differentiator-grid,
      .check-list {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 440px) {
      .landing-hero,
      .center-landing-hero {
        width: min(100% - 24px, 1180px);
        margin-top: 10px;
        padding: 20px;
      }
      .landing-hero h1,
      .center-landing-hero h1 {
        font-size: 1.92rem;
      }
      .landing-actions .button {
        width: 100%;
      }
      .metric-grid {
        grid-template-columns: 1fr;
      }
      .tool-strip {
        grid-template-columns: 1fr;
      }
    }
    /* P2-MVP-231: premium marketing direction, clear/light public and auth shells. */
    :root {
      --cap-bg-page: #f9fbfd;
      --cap-bg-surface: #ffffff;
      --cap-bg-projector: #071321;
      --cap-text-primary: #071321;
      --cap-text-secondary: #334155;
      --cap-accent: #00476f;
      --cap-status-ok: #0f766e;
      --cap-status-err: #b42318;
      --cap-status-pnd: #475569;
      --cap-status-warning: #b7791f;
      --cap-radius-sm: 6px;
      --cap-radius-md: 8px;
      --cap-radius-lg: 12px;
      --cap-live-progress-ok: var(--cap-status-ok);
      --cap-live-progress-error: var(--cap-status-err);
      --cap-live-progress-pending: var(--cap-status-pnd);
      --cap-bg: #f9fbfd;
      --cap-bg-soft: #f4f8fb;
      --cap-surface: var(--cap-bg-surface);
      --cap-ink: var(--cap-text-primary);
      --cap-muted: var(--cap-text-secondary);
      --cap-border: #dbe5ee;
      --cap-primary: #00476f;
      --cap-primary-dark: #003f63;
      --cap-primary-soft: #e8f3fb;
      --cap-accent-soft: #e8f3fb;
      --cap-success: var(--cap-status-ok);
      --cap-success-soft: #e6f7f4;
      --cap-danger: var(--cap-status-err);
      --cap-danger-soft: #feedec;
    }
    :root[data-legacy-visual-contract="p2-mvp-231"] {
      --cap-bg: #f6f8fb;
      --cap-primary: #0f4c81;
      --cap-accent: #c47b16;
    }
    body.landing-page,
    body.private-page.auth-page,
    body.private-page:has(.admin-shell) {
      background: var(--cap-bg);
      color: var(--cap-ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .landing-header,
    .private-header {
      width: min(1180px, calc(100% - 32px));
      color: var(--cap-ink);
    }
    .landing-header .brand,
    .private-header .brand {
      color: var(--cap-primary-dark);
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: 0;
    }
    .landing-header nav a,
    .private-header nav a,
    .auth-page .private-header nav a {
      min-height: 42px;
      border-color: transparent;
      background: transparent;
      color: var(--cap-muted);
      font-weight: 800;
    }
    .landing-header nav a:hover,
    .private-header nav a:hover {
      color: var(--cap-primary-dark);
      background: var(--cap-primary-soft);
    }
    .landing-header nav a.account,
    .private-header nav a.account,
    .auth-page .private-header nav a.account {
      border-color: var(--cap-border);
      background: var(--cap-surface);
      color: var(--cap-primary-dark);
    }
    .landing-header nav a.primary,
    .landing-page .button.primary,
    .auth-page .button.primary,
    body.private-page:has(.admin-shell) .button.primary {
      min-height: 52px;
      border-color: var(--cap-primary);
      background: var(--cap-primary);
      color: #ffffff;
      box-shadow: 0 14px 30px rgba(15, 76, 129, .18);
    }
    .landing-header nav a.primary {
      min-height: 44px;
    }
    .button,
    nav a {
      border-radius: 12px;
    }
    .button:focus-visible,
    nav a:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
      outline: 3px solid rgba(196, 123, 22, .28);
      outline-offset: 3px;
    }
    .landing-page .button.ghost,
    .auth-page .button.ghost {
      min-height: 52px;
      border-color: var(--cap-border);
      background: var(--cap-surface);
      color: var(--cap-primary-dark);
    }
    .landing-page .button.quiet {
      min-height: 52px;
      border-color: transparent;
      background: transparent;
      color: var(--cap-primary);
    }
    .landing-main {
      background: transparent;
    }
    .landing-hero,
    .center-landing-hero {
      width: min(1180px, calc(100% - 32px));
      margin-top: 18px;
      margin-bottom: 12px;
      padding: 58px 0 76px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--cap-ink);
      grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
      gap: 56px;
      align-items: center;
    }
    .landing-badge,
    .private-kicker {
      border-color: #f3d7a8;
      border-radius: 999px;
      background: var(--cap-accent-soft);
      color: var(--cap-accent);
      text-transform: none;
      letter-spacing: 0;
    }
    .landing-hero h1,
    .center-landing-hero h1 {
      max-width: 720px;
      color: var(--cap-ink);
      font-size: 4rem;
      line-height: 1.03;
      letter-spacing: 0;
    }
    .landing-lead {
      color: var(--cap-muted);
      font-size: 1.17rem;
      line-height: 1.65;
    }
    .landing-microcopy {
      color: var(--cap-muted);
    }
    .premium-product-stage {
      padding: 0;
    }
    .premium-product-shell {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(176px, .74fr);
      grid-template-areas:
        "student phone"
        "projector phone";
      gap: 16px;
      min-height: 520px;
      padding: 22px;
      border: 1px solid var(--cap-border);
      border-radius: 24px;
      background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
      box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
      overflow: visible;
    }
    .mock-panel,
    .mock-phone {
      min-width: 0;
      border: 1px solid var(--cap-border);
      border-radius: 22px;
      background: var(--cap-surface);
      box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
    }
    .student-mock {
      grid-area: student;
      padding: 22px;
    }
    .projector-mock {
      grid-area: projector;
      padding: 22px;
      background: var(--cap-primary-dark);
      color: #ffffff;
    }
    .mock-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }
    .mock-panel-header span,
    .phone-top {
      color: var(--cap-accent);
      font-size: .78rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    .mock-panel-header strong {
      color: inherit;
      font-size: 1rem;
    }
    .mock-progress {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--cap-bg-soft);
    }
    .mock-progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--cap-success);
    }
    .mock-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0;
    }
    .mock-stats div {
      display: grid;
      gap: 2px;
      padding: 14px;
      border-radius: 18px;
      background: var(--cap-primary-soft);
    }
    .mock-stats strong {
      color: var(--cap-primary-dark);
      font-size: 1.35rem;
    }
    .mock-stats span,
    .mock-panel p,
    .mock-phone p {
      color: var(--cap-muted);
      font-size: .9rem;
    }
    .projector-mock .mock-panel-header span,
    .projector-mock .mock-panel-header strong,
    .projector-mock p {
      color: #ffffff;
    }
    .mock-ranking {
      display: grid;
      gap: 10px;
      margin: 0 0 16px;
      padding: 0;
      list-style: none;
    }
    .mock-ranking li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .1);
      color: #ffffff;
      font-weight: 800;
    }
    .mock-phone {
      grid-area: phone;
      align-self: center;
      display: grid;
      gap: 18px;
      padding: 22px;
      background: #fdfefe;
    }
    .mock-phone h2 {
      margin: 0;
      color: var(--cap-ink);
      font-size: 1.25rem;
    }
    .mock-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .mock-options b {
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--cap-border);
      border-radius: 16px;
      color: var(--cap-primary-dark);
      background: var(--cap-primary-soft);
    }
    .mock-options b.selected {
      border-color: var(--cap-accent);
      background: var(--cap-accent-soft);
      color: var(--cap-accent);
    }
    .mock-phone button {
      min-height: 48px;
      border: 0;
      border-radius: 16px;
      background: var(--cap-primary);
      color: #ffffff;
      font: inherit;
      font-weight: 900;
    }
    .benefits-section,
    .audience-section,
    .privacy-section,
    .access-section,
    .landing-final {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 74px 0;
      color: var(--cap-ink);
    }
    .section-kicker {
      color: var(--cap-primary);
      letter-spacing: 0;
    }
    .landing-section h2,
    .landing-final h2 {
      max-width: 760px;
      color: var(--cap-ink);
      font-size: 2.65rem;
      line-height: 1.08;
    }
    .landing-section p,
    .landing-final p {
      color: var(--cap-muted);
    }
    .benefit-grid,
    .privacy-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    .benefit-card,
    .privacy-grid article,
    .audience-list,
    .center-context-panel,
    .access-section {
      border: 1px solid var(--cap-border);
      border-radius: 24px;
      background: var(--cap-surface);
      box-shadow: 0 16px 40px rgba(15, 23, 42, .07);
    }
    .benefit-card {
      min-height: 220px;
      padding: 24px;
    }
    .benefit-card span {
      display: inline-flex;
      margin-bottom: 22px;
      color: var(--cap-accent);
      font-size: .82rem;
      font-weight: 900;
    }
    .benefit-card h3 {
      margin: 0 0 10px;
      color: var(--cap-ink);
      font-size: 1.12rem;
      line-height: 1.2;
    }
    .benefit-card p {
      margin: 0;
      color: var(--cap-muted);
      font-size: .95rem;
    }
    .audience-section {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(320px, .78fr);
      gap: 42px;
      align-items: center;
    }
    .audience-copy {
      min-width: 0;
    }
    .audience-copy .button {
      margin-top: 14px;
    }
    .audience-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 24px;
      list-style: none;
    }
    .audience-list li {
      position: relative;
      padding-left: 28px;
      color: var(--cap-ink);
      font-weight: 760;
    }
    .audience-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .65em;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--cap-success);
    }
    .teacher-band {
      background: var(--cap-bg-soft);
      box-shadow: 0 0 0 100vmax var(--cap-bg-soft);
    }
    .teacher-band .button.primary {
      border-color: var(--cap-primary-dark);
      background: var(--cap-primary-dark);
    }
    .center-section {
      grid-template-columns: minmax(0, .92fr) minmax(320px, .78fr);
    }
    .privacy-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .privacy-grid article {
      min-height: 96px;
      display: flex;
      align-items: center;
      padding: 22px;
      color: var(--cap-ink);
      font-weight: 850;
    }
    .access-section {
      padding: 46px;
    }
    .privacy-access-section {
      margin-top: 20px;
    }
    .center-landing-logo {
      max-width: 140px;
      max-height: 40px;
      margin-bottom: 22px;
      padding: 0;
      background: transparent;
    }
    .center-context-panel {
      padding: 28px;
      color: var(--cap-ink);
    }
    .center-context-panel h2 {
      color: var(--cap-ink);
    }
    .center-context-panel p {
      color: var(--cap-muted);
    }
    .center-context-list div {
      border-color: var(--cap-border);
      border-radius: 18px;
      background: var(--cap-bg);
    }
    .center-context-list dt {
      color: var(--cap-primary);
    }
    .center-context-list dd {
      color: var(--cap-ink);
    }
    .landing-final {
      margin-top: 24px;
      padding: 64px 0 84px;
      background: transparent;
      box-shadow: none;
    }
    .auth-layout,
    .admin-shell {
      border-color: var(--cap-border);
      border-radius: 24px;
      background: var(--cap-surface);
      box-shadow: 0 24px 70px rgba(15, 23, 42, .1);
    }
    .auth-copy h1,
    .account-hero h1,
    .admin-header h1 {
      color: var(--cap-ink);
      font-size: 3rem;
      line-height: 1.06;
    }
    .auth-copy p,
    .private-lead,
    .admin-header p {
      color: var(--cap-muted);
    }
    .trust-list span {
      border-color: var(--cap-border);
      border-radius: 999px;
      background: var(--cap-bg);
      color: var(--cap-primary-dark);
    }
    .auth-page .panel,
    body.private-page:has(.admin-shell) .panel {
      border-color: var(--cap-border);
      border-radius: 24px;
      box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
    }
    .auth-panel h2,
    .panel-heading h2,
    .status-card h1 {
      color: var(--cap-ink);
    }
    .private-form-intro,
    .auth-account-context,
    .auth-secondary-actions,
    .panel-heading p,
    .status-card p,
    .empty-state span {
      color: var(--cap-muted);
    }
    .private-page input,
    .private-page textarea,
    .private-page select {
      border-color: var(--cap-border);
      border-radius: 14px;
      background: #fbfdff;
      color: var(--cap-ink);
    }
    .private-page input:focus,
    .private-page textarea:focus,
    .private-page select:focus {
      border-color: var(--cap-primary);
      outline: 3px solid rgba(15, 76, 129, .16);
    }
    .itinerary-card,
    .private-page .check {
      border-color: var(--cap-border);
      border-radius: 16px;
      background: #fbfdff;
    }
    .itinerary-card input,
    .private-page .check input {
      accent-color: var(--cap-primary);
    }
    .private-page .fine a,
    .auth-secondary-link {
      color: #031049;
    }
    .admin-shell {
      display: grid;
      gap: 18px;
    }
    .teacher-sync-page .admin-header {
      grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.35fr);
      gap: 16px;
      align-items: center;
      padding: 10px 0 2px;
    }
    .teacher-sync-page .admin-header h1 {
      max-width: none;
      font-size: clamp(2rem, 2.8vw, 2.72rem);
      line-height: 1.02;
    }
    .teacher-sync-page .admin-header p {
      max-width: 40rem;
      line-height: 1.35;
    }
    .sync-teacher-secondary-panel {
      border: 1px solid var(--cap-border);
      border-radius: 8px;
      background: #ffffff;
    }
    .sync-teacher-secondary-panel summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      padding: 10px 14px;
      color: var(--cap-primary-dark);
      cursor: pointer;
      font-weight: 900;
    }
    .sync-teacher-secondary-content {
      display: grid;
      gap: 12px;
      padding: 0 14px 14px;
    }
    .admin-section-nav {
      position: static;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--cap-border);
      border-radius: 8px;
      background: rgba(246, 248, 251, .96);
      backdrop-filter: blur(12px);
    }
    .admin-section-nav a {
      min-height: 36px;
      padding: 8px 10px;
      border-radius: 8px;
      color: var(--cap-primary-dark);
      font-size: .9rem;
      font-weight: 850;
      text-decoration: none;
    }
    .admin-section-nav a:hover,
    .admin-section-nav a:focus-visible {
      background: var(--cap-primary-soft);
    }
    .admin-section-nav a[aria-current] {
      color: #ffffff;
      background: var(--cap-primary-dark);
      border-color: var(--cap-primary-dark);
    }
    .admin-secondary-nav {
      position: relative;
      margin-left: auto;
    }
    .admin-secondary-nav summary {
      min-height: 36px;
      display: flex;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid var(--cap-border);
      border-radius: 8px;
      color: var(--cap-primary-dark);
      cursor: pointer;
      font-weight: 800;
    }
    .admin-secondary-nav > div {
      position: absolute;
      right: 0;
      z-index: 3;
      display: grid;
      gap: 4px;
      min-width: 170px;
      padding: 8px;
      border: 1px solid var(--cap-border);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(23, 32, 42, .14);
    }
    .admin-secondary-nav > div a { min-height: 34px; justify-content: flex-start; }
    .admin-control-summary,
    .admin-attention-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }
    .admin-control-summary article,
    .admin-attention-grid article {
      min-width: 0;
      display: grid;
      gap: 8px;
      padding: 16px;
      border: 1px solid var(--cap-border);
      border-radius: 8px;
      background: #fbfdff;
    }
    .admin-control-summary article {
      min-height: 92px;
      align-content: space-between;
    }
    .admin-control-summary span,
    .admin-attention-grid span {
      color: var(--cap-muted);
      font-size: .82rem;
      font-weight: 850;
      line-height: 1.35;
    }
    .admin-control-summary strong {
      color: var(--cap-primary-dark);
      font-size: 1.6rem;
      line-height: 1;
    }
    .admin-attention-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .admin-attention-grid strong {
      color: var(--cap-ink);
      font-size: 1rem;
    }
    .admin-compact-table {
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--cap-border);
      border-radius: 8px;
      background: var(--cap-surface);
    }
    .admin-compact-row.admin-user-row {
      grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
      gap: 14px;
      border: 0;
      border-bottom: 1px solid var(--cap-border);
      border-radius: 0;
      background: var(--cap-surface);
      box-shadow: none;
    }
    .admin-compact-row.admin-user-row:last-child {
      border-bottom: 0;
    }
    .admin-user-copy { min-width: 0; }
    .admin-user-facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 8px 12px;
      margin: 10px 0 0;
    }
    .admin-user-facts div {
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    .admin-user-facts dt { color: var(--cap-muted); font-size: .75rem; font-weight: 800; }
    .admin-user-facts dd { margin: 0; overflow-wrap: anywhere; font-size: .88rem; }
    .admin-email-necessary { overflow-wrap: anywhere; color: var(--cap-muted); font-size: .88rem; }
    .admin-user-actions {
      min-width: 220px;
      align-self: start;
      border: 1px solid var(--cap-border);
      border-radius: 8px;
      background: #ffffff;
    }
    .admin-user-actions summary { padding: 10px 12px; cursor: pointer; color: var(--cap-primary-dark); font-weight: 850; }
    .admin-user-actions[open] > .row-actions { padding: 10px; border-top: 1px solid var(--cap-border); }
    .admin-privacy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
    .admin-danger-zone { margin: 0; border-color: #d9a1a1; }
    .admin-danger-zone summary { color: var(--danger); }
    .admin-audit-table { overflow: hidden; border: 1px solid var(--cap-border); border-radius: 8px; }
    .admin-audit-head, .admin-audit-row {
      display: grid;
      grid-template-columns: minmax(110px, .9fr) minmax(110px, .8fr) minmax(180px, 1.3fr) minmax(150px, 1.1fr) minmax(100px, .7fr);
      gap: 10px;
      align-items: center;
      padding: 12px;
    }
    .admin-audit-head { background: var(--cap-primary-soft); color: var(--cap-primary-dark); font-size: .78rem; font-weight: 900; }
    .admin-audit-row { border-top: 1px solid var(--cap-border); font-size: .88rem; }
    .admin-command-panel {
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }
    .sync-teacher-panel {
      display: grid;
      gap: 12px;
    }
    .sync-teacher-status {
      margin-bottom: 0;
      grid-template-columns: minmax(150px, 1.05fr) minmax(150px, 1fr) minmax(110px, .72fr) minmax(120px, .82fr);
      gap: 8px;
    }
    .sync-teacher-status div {
      padding: 12px;
    }
    .sync-teacher-status div:first-child {
      border-color: #c8d9e7;
      background: var(--cap-primary-soft);
    }
    .sync-teacher-status div:first-child strong {
      color: var(--cap-primary-dark);
      font-size: 1.72rem;
    }
    /* Item 8 de la Prioridad 3 (14-09-2026): las 4 tarjetas de .sync-teacher-status nunca
       tenian un punto de quiebre -- sus 4 columnas suman un minimo fijo de
       150+150+110+120 = 530px + 24px de huecos = 554px, sin ningun @media que las
       reagrupe. En movil (390px) eso se traduce en tarjetas apretadas (la primera, con QR
       y boton, es la que mas sufre); en tablet, donde la barra lateral resta ancho real al
       panel, tambien se desborda. Se reagrupan a 2 columnas y despues a 1, igual que ya
       hacen otras rejillas de esta misma pagina (.presentation-controller-header/footer). */
    @media (max-width: 900px) {
      .sync-teacher-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 520px) {
      .sync-teacher-status { grid-template-columns: minmax(0, 1fr); }
    }
    .sync-teacher-actions-top {
      margin: 0;
      padding: 10px;
      border: 1px solid var(--cap-border);
      border-radius: 8px;
      background: var(--cap-bg);
    }
    .sync-teacher-actions-top .button,
    .sync-teacher-actions-top .secondary-action {
      min-height: 44px;
    }
    .sync-live-disabled-action[disabled] {
      border-color: var(--cap-border);
      background: #f3f7fb;
      color: var(--cap-muted);
      opacity: .74;
      cursor: not-allowed;
    }
    .classroom-connection-status {
      margin: 0 0 12px;
      padding: 10px 14px;
      border: 1px solid #f0b429;
      border-radius: var(--cap-radius-md);
      background: #fff7dd;
      color: #6f4d00;
      font-weight: 800;
    }
    .classroom-connection-status[hidden] {
      display: none;
    }
    [data-classroom-live-connection="stale"] {
      outline: 3px solid rgba(240, 180, 41, .28);
      outline-offset: 3px;
    }
    [data-disabled-by-connection="true"] {
      cursor: not-allowed;
      opacity: .58;
    }
    .sync-teacher-live-strip,
    .sync-teacher-history {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--cap-border);
      border-radius: var(--cap-radius-md);
      background: var(--cap-bg-soft);
      color: var(--cap-muted);
      font-weight: 800;
    }
    .sync-teacher-live-strip span,
    .sync-teacher-history span,
    .sync-teacher-history em {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border: 1px solid var(--cap-border);
      border-radius: 999px;
      background: var(--cap-surface);
      color: var(--cap-text-secondary);
      font-style: normal;
      font-size: .84rem;
    }
    .sync-teacher-history {
      display: grid;
      gap: 10px;
      margin: 6px 0;
    }
    .sync-teacher-history strong {
      color: var(--cap-text-primary);
    }
    .sync-teacher-history ol {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .sync-teacher-history li {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: space-between;
    }
    .teacher-safe-qr {
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      margin-top: 12px;
      padding: 5px;
      border: 1px solid #dbe5ee;
      border-radius: var(--cap-radius-md);
      background: #ffffff;
      color: var(--cap-primary-dark);
    }
    .teacher-safe-qr svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .sync-projector-page {
      background: #F6F8FB;
      color: #031049;
    }
    .sync-projector-frame {
      border-color: #DCE1E8;
      background: #ffffff;
      box-shadow: 0 28px 80px rgba(3, 16, 73, .16);
    }
    .sync-projector-topline,
    .sync-projector-footer {
      color: #54607A;
    }
    .sync-projector-topline strong {
      color: #031049;
    }
    .sync-projector-status-band {
      width: fit-content;
      max-width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: clamp(8px, 1vw, 14px);
      align-items: center;
      padding: clamp(8px, 1vw, 12px);
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #F6F8FB;
      color: #54607A;
      font-size: clamp(.9rem, 1.15vw, 1.25rem);
      font-weight: 900;
    }
    .sync-projector-status-band strong {
      color: #031049;
      font-size: clamp(1rem, 1.35vw, 1.45rem);
    }
    .sync-projector-status-band span,
    .sync-projector-status-band strong {
      min-width: 0;
    }
    .sync-projector-card h1 {
      color: #031049;
    }
    .sync-projector-card p {
      color: #54607A;
    }
    .sync-projector-option {
      border-color: #DCE1E8;
      background: #F6F8FB;
    }
    .sync-projector-option strong {
      background: #FD6707;
      color: #ffffff;
    }
    .sync-projector-option span {
      color: #031049;
    }
    .sync-projector-option em {
      color: #031049;
    }
    .sync-projector-ranking em {
      color: #FD6707;
    }
    .sync-projector-option.correct {
      border-color: #268157;
      background: #e4f4ec;
    }
    .sync-projector-ranking strong {
      color: #031049;
    }
    .sync-projector-ranking li {
      border: 1px solid #DCE1E8;
      background: #F6F8FB;
      color: #031049;
    }
    .sync-projector-ranking.empty {
      max-width: 760px;
      padding: 18px;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #F6F8FB;
    }
    .sync-projector-ranking.empty p {
      margin: 0;
      color: #54607A;
      font-size: 1rem;
    }
    .sync-projector-frame.projector-shell-premium {
      position: relative;
      width: min(96vw, 1560px);
      max-height: 96vh;
      padding: 14px;
      gap: 10px;
      overflow: hidden;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #F6F8FB;
      color: #031049;
      box-shadow: 0 24px 64px rgba(3, 16, 73, .14);
      font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .sync-projector-frame.projector-shell-premium > .classroom-connection-status {
      position: absolute;
      z-index: 10;
      top: 12px;
      left: 50%;
      width: max-content;
      max-width: calc(100% - 28px);
      margin: 0;
      transform: translateX(-50%);
      box-shadow: 0 8px 24px rgba(3, 16, 73, .18);
    }
    .sync-projector-premium-header {
      min-height: 0;
      display: grid;
      /* La tarjeta del PIN estaba topada en 330px, y ese tope -- no el QR -- era lo que obligaba
         a elegir entre un QR grande y un PIN legible. Crece con la pantalla para que en un
         proyector quepan los dos, y se queda corta en pantallas pequenas para no comerse el
         titulo del grupo. */
      grid-template-columns: minmax(0, 1fr) minmax(220px, auto) minmax(260px, clamp(330px, 22vw, 440px));
      gap: 12px;
      align-items: stretch;
    }
    .sync-projector-title-block,
    .sync-projector-live-meta,
    .projector-pin-qr-card,
    .sync-projector-ranking-panel {
      min-width: 0;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #ffffff;
    }
    .sync-projector-title-block {
      padding: 12px 14px;
      display: grid;
      align-content: center;
      gap: 4px;
    }
    .projector-brand-mark,
    .sync-projector-ranking-heading p,
    .projector-pin-copy span,
    .projector-pin-copy em,
    .projector-pin-qr-card small {
      color: #54607A;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .sync-projector-title-block h1 {
      margin: 0;
      color: #031049;
      font-size: 2rem;
      line-height: 1.02;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }
    .sync-projector-title-block p {
      margin: 0;
      color: #54607A;
      font-size: .95rem;
      font-weight: 700;
      line-height: 1.3;
    }
    .sync-projector-live-meta.sync-projector-status-band {
      width: auto;
      max-width: none;
      padding: 12px;
      display: grid;
      align-content: center;
      gap: 7px;
      color: #54607A;
      background: #F6F8FB;
      font-size: .96rem;
      font-weight: 800;
    }
    .projector-status-badge {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 3px 9px;
      border-radius: 999px;
      border: 1px solid #DCE1E8;
      background: #F6F8FB;
      color: #54607A;
      font-size: .75rem;
      font-weight: 800;
      white-space: nowrap;
    }
    .projector-status-badge[data-status="En directo"],
    .projector-status-badge[data-status="en curso"],
    .projector-status-badge[data-status="APTO"] {
      border-color: #9bd7cb;
      background: #e4f4ec;
      color: #268157;
    }
    .projector-status-badge[data-status="NO APTO"] {
      border-color: #f2b8b2;
      background: #fff0ee;
      color: #b42318;
    }
    .projector-status-badge[data-status="ENTREGADO"],
    .projector-status-badge[data-status="Resultados finales"] {
      border-color: #DCE1E8;
      background: #F6F8FB;
      color: #031049;
    }
    .projector-status-badge[data-status="Esperando participantes"],
    .projector-status-badge[data-status="pendiente"],
    .projector-status-badge[data-status="Pausado"] {
      border-color: rgba(253,103,7,.35);
      background: rgba(253,103,7,.12);
      color: #c8621c;
    }
    .projector-pin-qr-card {
      /* El QR se escanea desde el fondo del aula: a 76px (el valor anterior) no se lee.
         La medida vive en una variable para que el hueco de la rejilla y el propio QR
         no puedan quedar desacoplados. */
      --projector-qr-size: clamp(120px, 9vw, 200px);
      padding: 9px;
      display: grid;
      /* ⚠️ La primera columna era minmax(0, 1fr), que significa "puedo encogerme hasta CERO".
         Al agrandar el QR (76px hasta 200px) la columna del PIN se quedo sin sitio, y como
         el PIN no se parte (white-space: nowrap) se salia POR DEBAJO del QR. Medido
         sobre la pagina renderizada: 13px de solape a 768, 16px a 1920 y 43px a 2560 -- peor
         cuanto mas grande la pantalla, o sea justo en el proyector. A 1366 no pasaba, que es
         por lo que se colo.
         Cuando no caben los dos, el que cede es el QR: el PIN es el camino que SIEMPRE
         funciona para entrar al aula, el QR es la comodidad. */
      grid-template-columns: minmax(min-content, 1fr) minmax(0, var(--projector-qr-size));
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      background: #031049;
      color: #ffffff;
    }
    .projector-pin-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .projector-pin-copy span,
    .projector-pin-copy em,
    .projector-pin-qr-card small {
      color: rgba(255,255,255,.76);
    }
    .projector-pin-copy strong {
      color: #ffffff;
      /* Acompana al ancho disponible en vez de ser fijo: en pantallas estrechas el PIN
         entero cabe reduciendose un poco, en vez de reclamar un sitio que no hay. */
      font-size: clamp(1.7rem, 1.8vw, 2.25rem);
      line-height: .95;
      font-weight: 900;
      letter-spacing: .05em;
      white-space: nowrap;
    }
    .projector-safe-qr {
      /* Ancho fijo aqui volveria a desbordar la columna cuando el PIN reclame su sitio:
         se pide el tamano como MAXIMO y se conserva cuadrado con la proporcion. */
      width: 100%;
      max-width: var(--projector-qr-size, 76px);
      aspect-ratio: 1 / 1;
      height: auto;
      justify-self: end;
      display: grid;
      place-items: center;
      padding: 5px;
      border-radius: 6px;
      background: #ffffff;
      color: #031049;
    }
    .projector-safe-qr svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .projector-pin-qr-card small {
      grid-column: 1 / -1;
      text-transform: none;
      letter-spacing: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sync-projector-premium-main,
    .sync-projector-ranking-panel,
    .projector-ranking-table,
    .projector-ranking-body {
      min-height: 0;
      min-width: 0;
    }
    .sync-projector-premium-main {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      align-items: stretch;
    }
    .sync-projector-ranking-panel {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }
    .sync-projector-ranking-heading {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      border-bottom: 1px solid #DCE1E8;
      background: #F6F8FB;
    }
    .sync-projector-ranking-heading h2 {
      margin: 0;
      color: #031049;
      font-size: 1.35rem;
      line-height: 1.05;
      letter-spacing: 0;
    }
    .projector-question-context {
      display: block;
      margin-top: 2px;
      color: #54607A;
      font-size: .84rem;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sync-projector-summary {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      color: #54607A;
      font-size: .78rem;
      font-weight: 800;
    }
    .sync-projector-summary span {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      min-height: 24px;
      padding: 3px 7px;
      border: 1px solid #DCE1E8;
      border-radius: 999px;
      background: #ffffff;
    }
    .sync-projector-summary strong {
      color: #031049;
      font-size: .98rem;
      font-weight: 900;
    }
    .projector-ranking-table {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }
    .projector-ranking-head,
    .projector-ranking-row {
      display: grid;
      grid-template-columns: 48px minmax(128px, 1.1fr) minmax(220px, 2.1fr) 76px 66px 84px 90px 66px;
      gap: 8px;
      align-items: center;
    }
    .projector-ranking-head {
      padding: 6px 12px;
      color: #54607A;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: #ffffff;
      border-bottom: 1px solid #DCE1E8;
    }
    .projector-ranking-body {
      overflow: hidden;
      background: #ffffff;
    }
    .projector-ranking-pages {
      height: 100%;
      min-height: 0;
      display: grid;
    }
    .projector-ranking-rows {
      display: grid;
      min-width: 0;
    }
    .projector-ranking-page {
      min-height: 0;
      grid-auto-rows: minmax(0, 1fr);
      align-content: stretch;
    }
    .projector-ranking-page[hidden] {
      display: none;
    }
    .sync-projector-auto-scroll button {
      min-height: 34px;
      padding: 6px 12px;
      border: 1px solid #DCE1E8;
      border-radius: 999px;
      background: #ffffff;
      color: #031049;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }
    .projector-ranking-row {
      min-height: 35px;
      padding: 3px 12px;
      border-bottom: 1px solid #DCE1E8;
      color: #031049;
      font-weight: 800;
    }
    .projector-ranking-row:nth-child(even) {
      background: #F6F8FB;
    }
    .projector-rank {
      color: #031049;
      font-size: 1.08rem;
      font-weight: 900;
    }
    .projector-student {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .projector-student strong {
      min-width: 0;
      overflow: hidden;
      color: #031049;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .projector-student .projector-status-badge {
      flex: 0 0 auto;
      min-height: 18px;
      padding: 1px 6px;
      font-size: .6rem;
    }
    .projector-progress-barcode {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(var(--projector-question-count), minmax(1px, 1fr));
      gap: 1px;
      align-items: end;
      height: 16px;
      overflow: hidden;
    }
    .projector-progress-barcode i {
      display: block;
      min-width: 1px;
      border-radius: 1px;
      background: #DCE1E8;
    }
    .projector-progress-barcode i.is-correct {
      height: 16px;
      background: var(--cap-live-progress-ok);
    }
    .projector-progress-barcode i.is-incorrect {
      height: 12px;
      background: var(--cap-live-progress-error);
    }
    .projector-progress-barcode i.is-pending {
      height: 6px;
      background: var(--cap-live-progress-pending);
    }
    .projector-count,
    .projector-time {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .projector-count.correct {
      color: #268157;
    }
    .projector-count.error {
      color: #b42318;
    }
    .projector-count.pending,
    .projector-time {
      color: #54607A;
    }
    .projector-score-pill {
      justify-self: end;
      min-width: 54px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #031049;
      color: #ffffff;
      text-align: center;
      font-size: .94rem;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .projector-ranking-empty {
      margin: 16px;
      padding: 18px;
      border: 1px dashed #DCE1E8;
      border-radius: 8px;
      background: #F6F8FB;
      color: #54607A;
    }
    .projector-ranking-empty strong {
      display: block;
      margin-bottom: 5px;
      color: #031049;
      font-size: 1.1rem;
    }
    .projector-ranking-empty span {
      display: block;
      margin-bottom: 5px;
      color: #031049;
      font-weight: 800;
    }
    .projector-ranking-empty p {
      margin: 0;
      font-weight: 750;
    }
    .projector-state-callout {
      display: grid;
      gap: 4px;
      margin: 10px 12px 0;
      padding: 14px 16px;
      border: 1px solid #DCE1E8;
      border-radius: 8px;
      background: #F6F8FB;
      color: #54607A;
    }
    .projector-state-callout strong {
      color: #031049;
      font-size: 1.35rem;
      line-height: 1.05;
    }
    .projector-state-callout span {
      font-weight: 800;
    }
    .projector-state-callout.paused {
      border-color: rgba(253,103,7,.35);
      background: rgba(253,103,7,.12);
    }
    .projector-state-callout.final {
      border-color: #9bd7cb;
      background: #e4f4ec;
    }
    .projector-aggregate-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 12px 10px;
      border-top: 1px solid #DCE1E8;
      background: #F6F8FB;
    }
    .projector-aggregate-strip span {
      min-width: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 5px 9px;
      border: 1px solid #DCE1E8;
      border-radius: 999px;
      color: #54607A;
      font-weight: 800;
    }
    .projector-aggregate-strip em {
      color: #031049;
      font-style: normal;
      font-variant-numeric: tabular-nums;
    }
    .sync-projector-premium-footer {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: #54607A;
      font-size: .9rem;
      font-weight: 800;
    }
    .sync-projector-auto-scroll {
      min-width: min(320px, 45%);
      display: grid;
      gap: 5px;
      justify-items: end;
    }
    .sync-projector-auto-scroll-track {
      width: 100%;
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: #DCE1E8;
    }
    .sync-projector-auto-scroll-track i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #FD6707;
    }
    .projector-ranking-body[data-auto-scroll="true"] .projector-ranking-rows {
      transform: translateY(0);
    }
    @keyframes projector-ranking-auto-scroll {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(calc(-100% + 380px));
      }
    }
    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .control-center-page {
      min-width: 320px;
      background: #f4f7fa;
    }
    .control-center-page > .private-header {
      display: none;
    }
    .control-center-main {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }
    .control-center-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 264px minmax(0, 1fr);
      color: #102338;
      background: #f4f7fa;
    }
    .control-center-sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      z-index: 4;
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 24px 18px 18px;
      border-right: 1px solid #dfe7ee;
      background: #ffffff;
    }
    .control-center-brand {
      display: flex;
      align-items: center;
      gap: 11px;
      color: #08263a;
      text-decoration: none;
      font-size: 1rem;
      letter-spacing: .035em;
    }
    .control-center-brand-mark,
    .control-center-brand-logo {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      flex: 0 0 34px;
    }
    .control-center-brand-mark {
      display: inline-grid;
      place-items: center;
      color: #ffffff;
      background: #031049;
      font-weight: 900;
    }
    .control-center-brand-logo {
      display: block;
      object-fit: contain;
      background: #ffffff;
    }
    .control-center-scope-compact {
      display: grid;
      gap: 3px;
      padding: 12px 13px;
      border: 1px solid #dbe6ed;
      border-radius: 12px;
      background: #f7fafc;
    }
    .control-center-scope-compact span,
    .control-center-sidebar nav > p {
      color: #6c7e8e;
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .control-center-sidebar nav {
      display: grid;
      gap: 5px;
    }
    .control-center-sidebar nav > p {
      margin: 13px 11px 4px;
    }
    .control-center-sidebar nav > p:first-child {
      margin-top: 0;
    }
    .control-center-nav-link {
      min-height: 43px;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 10px;
      color: #435567;
      text-decoration: none;
      font-size: .9rem;
      font-weight: 750;
      transition: background .16s ease, color .16s ease;
    }
    .control-center-nav-link:hover {
      color: #031049;
      background: #edf5f8;
    }
    .control-center-nav-link.is-current {
      color: #031049;
      background: #e5f1f5;
    }
    .control-center-nav-icon {
      width: 26px;
      height: 26px;
      display: inline-grid;
      place-items: center;
      border-radius: 8px;
      color: #516779;
      background: #edf2f5;
      font-size: .76rem;
      font-weight: 900;
    }
    .control-center-nav-link.is-current .control-center-nav-icon {
      color: #ffffff;
      background: #031049;
    }
    .control-center-nav-link > strong {
      min-width: 22px;
      padding: 3px 7px;
      border-radius: 999px;
      color: #87461f;
      background: #fff0dc;
      text-align: center;
      font-size: .7rem;
    }
    .control-center-sidebar-footer {
      display: grid;
      gap: 4px;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid #e3e9ee;
    }
    .control-center-workspace {
      min-width: 0;
    }
    .control-center-topbar {
      min-height: 74px;
      display: grid;
      grid-template-columns: minmax(260px, 480px) auto;
      justify-content: end;
      align-items: center;
      gap: 18px;
      padding: 12px clamp(24px, 4vw, 56px);
      border-bottom: 1px solid #dfe7ee;
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(12px);
    }
    .control-center-mobile-brand {
      display: none;
    }
    .control-center-mobile-nav {
      display: none;
    }
    .control-center-search {
      height: 42px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 13px;
      border: 1px solid #d6e0e8;
      border-radius: 11px;
      color: #617585;
      background: #f7fafc;
      text-decoration: none;
    }
    .control-center-search:focus-within {
      border-color: #6d9fb7;
      box-shadow: 0 0 0 3px rgba(0, 71, 111, .1);
    }
    .control-center-search strong {
      min-width: 0;
      width: 100%;
      overflow: hidden;
      color: #617585;
      font-size: .85rem;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .control-center-top-action,
    .control-center-secondary-action {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 10px 16px;
      border-radius: 10px;
      color: #ffffff;
      background: #031049;
      text-decoration: none;
      font-size: .87rem;
      font-weight: 850;
    }
    .control-center-content {
      position: relative;
      isolation: isolate;
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px) 64px;
    }
    .control-center-content > *:not(.control-center-watermark) {
      position: relative;
      z-index: 1;
    }
    .control-center-watermark {
      position: absolute;
      z-index: 0;
      top: 22px;
      right: clamp(24px, 4vw, 56px);
      width: min(240px, 23vw);
      max-height: 118px;
      object-fit: contain;
      object-position: right top;
      opacity: .045;
      pointer-events: none;
      user-select: none;
    }
    .control-center-title-row {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 28px;
    }
    .control-center-title-row h1 {
      margin: 3px 0 6px;
      color: #102338;
      font-size: clamp(2rem, 3vw, 2.65rem);
      line-height: 1.05;
      letter-spacing: -.035em;
    }
    .control-center-title-row p {
      margin: 0;
      color: #657687;
    }
    .control-center-kicker,
    .control-center-section-heading p,
    .control-center-next > div p {
      color: #031049 !important;
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .control-center-scope {
      min-width: 230px;
      display: grid;
      gap: 3px;
      padding: 11px 14px;
      border: 1px solid #dbe5ec;
      border-radius: 11px;
      background: #ffffff;
    }
    .control-center-scope span {
      color: #718191;
      font-size: .72rem;
      font-weight: 750;
    }
    .control-center-scope strong {
      color: #263c50;
      font-size: .9rem;
    }
    .control-center-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 22px;
    }
    .control-center-kpis article {
      min-width: 0;
      display: grid;
      gap: 6px;
      padding: 18px;
      border: 1px solid #dce5ec;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 8px 24px rgba(17, 43, 62, .035);
    }
    .control-center-kpis span {
      color: #667888;
      font-size: .78rem;
      font-weight: 750;
    }
    .control-center-kpis strong {
      color: #102338;
      font-size: 1.8rem;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .control-center-kpis small {
      min-width: 0;
      overflow: hidden;
      color: #738492;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .control-center-dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
      gap: 18px;
    }
    .control-center-attention,
    .control-center-status,
    .control-center-next {
      border: 1px solid #dce5ec;
      border-radius: 15px;
      background: #ffffff;
      box-shadow: 0 8px 26px rgba(17, 43, 62, .035);
    }
    .control-center-attention,
    .control-center-status {
      padding: 21px;
    }
    .control-center-section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 17px;
    }
    .control-center-section-heading p,
    .control-center-section-heading h2 {
      margin: 0;
    }
    .control-center-section-heading h2,
    .control-center-next h2 {
      margin-top: 3px;
      color: #163047;
      font-size: 1.15rem;
      line-height: 1.2;
    }
    .control-center-section-heading > span {
      padding: 5px 9px;
      border-radius: 999px;
      color: #6a562e;
      background: #fff4dc;
      font-size: .7rem;
      font-weight: 850;
    }
    .control-center-attention-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 11px;
    }
    .control-center-attention-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 15px;
      border: 1px solid #dfe6eb;
      border-left: 3px solid #7891a3;
      border-radius: 11px;
      background: #fbfcfd;
    }
    .control-center-attention-card.urgent { border-left-color: #b55a45; }
    .control-center-attention-card.warning { border-left-color: #c28a38; }
    .control-center-attention-card.success { border-left-color: #34836d; }
    .control-center-attention-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .control-center-attention-heading span {
      color: #6b7f90;
      font-size: .69rem;
      font-weight: 850;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .control-center-attention-heading strong {
      color: #163047;
      font-size: 1.1rem;
      font-variant-numeric: tabular-nums;
    }
    .control-center-attention-card h3,
    .control-center-attention-card p {
      margin: 0;
    }
    .control-center-attention-card h3 {
      color: #183249;
      font-size: .93rem;
    }
    .control-center-attention-card p {
      flex: 1;
      color: #667787;
      font-size: .78rem;
      line-height: 1.45;
    }
    .control-center-attention-card a {
      width: fit-content;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      color: #00567c;
      font-size: .78rem;
      font-weight: 850;
      text-decoration: none;
    }
    .control-center-status dl {
      display: grid;
      gap: 0;
      margin: 0 0 18px;
    }
    .control-center-status dl > div {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 13px 0;
      border-bottom: 1px solid #e8edf1;
      color: #5e7181;
      font-size: .8rem;
    }
    .control-center-status dd {
      margin: 0;
      color: #1f3a50;
      font-weight: 800;
      text-align: right;
    }
    .control-center-status dd a {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      color: #005b80;
    }
    .control-center-live {
      color: #236957 !important;
      background: #e7f5ee !important;
    }
    .control-center-live.attention {
      color: #7a4f16 !important;
      background: #fff2d8 !important;
    }
    .control-center-live.reconcile {
      color: #8a332a !important;
      background: #fdecea !important;
    }
    .control-center-live i {
      width: 6px;
      height: 6px;
      display: inline-block;
      margin-right: 4px;
      border-radius: 50%;
      background: #2f8b70;
    }
    .control-center-live.attention i {
      background: #b8791f;
    }
    .control-center-live.reconcile i {
      background: #b34a3e;
    }
    .control-center-secondary-action {
      width: 100%;
      color: #031049;
      background: #edf5f8;
    }
    .control-center-next {
      display: grid;
      grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr);
      align-items: center;
      gap: 24px;
      margin-top: 18px;
      padding: 20px 22px;
    }
    .control-center-next p,
    .control-center-next h2 {
      margin: 0;
    }
    .control-center-next > p {
      color: #637687;
      font-size: .85rem;
      line-height: 1.5;
    }
    .control-center-next-action {
      display: grid;
      justify-items: start;
      gap: 10px;
    }
    .control-center-next-action p {
      color: #637687;
      font-size: .85rem;
      line-height: 1.5;
    }
    .control-center-next-action a {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      color: #005b80;
      font-size: .82rem;
      font-weight: 850;
      text-decoration: none;
    }
    .presentation-library-readonly {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 14px;
      border: 1px solid #d5e2e9;
      border-radius: 10px;
      color: #36556a;
      background: #f4f8fa;
      font-size: .78rem;
      font-weight: 850;
    }
    .presentation-library-content {
      width: min(1240px, 100%);
    }
    .presentation-library-preflight {
      display: grid;
      grid-template-columns: minmax(220px, .8fr) minmax(0, 1.5fr) auto;
      align-items: center;
      gap: 22px;
      margin-bottom: 18px;
      padding: 18px 20px;
      border: 1px solid #d9e4ea;
      border-left: 4px solid #b68235;
      border-radius: 14px;
      background: #ffffff;
    }
    .presentation-library-preflight.is-ready {
      border-left-color: #2f806b;
    }
    .presentation-library-preflight > div {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .presentation-library-preflight p,
    .presentation-library-preflight h2 {
      margin: 0;
    }
    .presentation-library-preflight > div p {
      color: #6e8090;
      font-size: .7rem;
      font-weight: 850;
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .presentation-library-preflight h2 {
      margin-top: 3px;
      color: #17334a;
      font-size: 1.05rem;
    }
    .presentation-library-preflight > p {
      color: #607485;
      font-size: .82rem;
      line-height: 1.5;
    }
    .presentation-library-preflight > strong {
      padding: 6px 10px;
      border-radius: 999px;
      color: #7a5424;
      background: #fff2db;
      font-size: .67rem;
      letter-spacing: .06em;
    }
    .presentation-library-preflight.is-ready > strong {
      color: #24634f;
      background: #e6f4ee;
    }
    .presentation-library-status-dot {
      width: 13px;
      height: 13px;
      flex: 0 0 auto;
      border: 3px solid #fff7e8;
      border-radius: 50%;
      background: #bc7e2d;
      box-shadow: 0 0 0 1px #d5af79;
    }
    .presentation-library-preflight.is-ready .presentation-library-status-dot {
      border-color: #eaf6f1;
      background: #318069;
      box-shadow: 0 0 0 1px #81b4a4;
    }
    .presentation-library-kpis {
      margin-bottom: 18px;
    }
    .presentation-library-workflow,
    .presentation-library-sources {
      margin-bottom: 18px;
      padding: 22px;
      border: 1px solid #dce5ec;
      border-radius: 15px;
      background: #ffffff;
      box-shadow: 0 8px 26px rgba(17, 43, 62, .035);
    }
    .presentation-library-workflow ol {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .presentation-library-workflow li {
      min-width: 0;
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 10px;
      padding: 14px;
      border: 1px solid #e0e8ed;
      border-radius: 11px;
      background: #f9fbfc;
    }
    .presentation-library-workflow li > span,
    .presentation-library-empty > span {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #ffffff;
      background: #031049;
      font-size: .75rem;
      font-weight: 900;
    }
    .presentation-library-workflow strong {
      color: #17334a;
      font-size: .84rem;
    }
    .presentation-library-workflow p {
      margin: 5px 0 0;
      color: #697b8a;
      font-size: .74rem;
      line-height: 1.45;
    }
    .presentation-library-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr) auto;
      align-items: center;
      gap: 22px;
      padding: 15px 0;
      border-top: 1px solid #e5ebef;
    }
    .presentation-library-row-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .presentation-library-row-main > div {
      min-width: 0;
    }
    .presentation-library-provider {
      padding: 6px 8px;
      border-radius: 8px;
      color: #5b3c81;
      background: #f1eafa;
      font-size: .65rem;
      font-weight: 900;
    }
    .presentation-library-row h3,
    .presentation-library-row p {
      margin: 0;
    }
    .presentation-library-row h3 {
      overflow: hidden;
      color: #17334a;
      font-size: .92rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .presentation-library-row p {
      margin-top: 4px;
      color: #6a7d8d;
      font-size: .74rem;
    }
    .presentation-library-row dl {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }
    .presentation-library-row dl div {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .presentation-library-row dt {
      color: #748696;
      font-size: .66rem;
    }
    .presentation-library-row dd {
      margin: 0;
      color: #243e52;
      font-size: .78rem;
      font-weight: 850;
    }
    .presentation-library-review-link,
    .presentation-review-navigation a,
    .presentation-review-navigation button {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 9px 13px;
      border: 1px solid #b8d1de;
      border-radius: 10px;
      color: #ffffff;
      background: #005b80;
      font: inherit;
      font-size: .76rem;
      font-weight: 850;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }
    .presentation-review-shell {
      width: min(1460px, calc(100% - 32px));
      display: grid;
      gap: 18px;
      margin: 0 auto;
      padding: 28px 0 48px;
    }
    .presentation-review-header,
    .presentation-review-metadata,
    .presentation-review-navigation {
      border: 1px solid #dce5ec;
      border-radius: 15px;
      background: #ffffff;
      box-shadow: 0 8px 26px rgba(17, 43, 62, .035);
    }
    .presentation-review-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      padding: 20px 22px;
    }
    .presentation-review-header p,
    .presentation-review-header h1,
    .presentation-review-metadata p,
    .presentation-review-metadata h2 {
      margin: 0;
    }
    .presentation-review-header p,
    .presentation-review-metadata > div p {
      margin-top: 9px;
      color: #6e8090;
      font-size: .7rem;
      font-weight: 850;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .presentation-review-header h1 {
      margin-top: 4px;
      color: #17334a;
      font-size: 1.45rem;
      line-height: 1.25;
    }
    .presentation-review-header > strong {
      flex: 0 0 auto;
      padding: 8px 12px;
      border-radius: 999px;
      color: #164a61;
      background: #edf6f9;
      font-size: .82rem;
    }
    .presentation-review-back {
      color: #005b80;
      font-size: .8rem;
      font-weight: 850;
      text-decoration: none;
    }
    .presentation-review-stage {
      min-height: min(70vh, 760px);
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 14px;
      border-radius: 16px;
      background: #142632;
      box-shadow: 0 16px 44px rgba(12, 32, 47, .18);
    }
    .presentation-review-stage[data-watermark] {
      position: relative;
    }
    .presentation-watermark {
      position: absolute;
      inset: 0;
      z-index: 5;
      background-repeat: repeat;
      -webkit-mask-image: radial-gradient(ellipse at center, transparent 32%, #000 55%);
      mask-image: radial-gradient(ellipse at center, transparent 32%, #000 55%);
      pointer-events: none;
      user-select: none;
    }
    .presentation-review-image {
      width: 100%;
      max-height: min(70vh, 760px);
      display: block;
      object-fit: contain;
    }
    .presentation-review-metadata {
      display: grid;
      grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
      align-items: center;
      gap: 20px;
      padding: 18px 22px;
    }
    .presentation-review-metadata > div p {
      margin-top: 0;
    }
    .presentation-review-metadata h2 {
      margin-top: 4px;
      color: #17334a;
      font-size: 1rem;
    }
    .presentation-review-codes {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .presentation-review-codes li {
      padding: 7px 10px;
      border: 1px solid #cadde7;
      border-radius: 999px;
      color: #164a61;
      background: #edf6f9;
      font-size: .78rem;
      font-weight: 850;
    }
    .presentation-review-no-codes {
      color: #647987;
      font-size: .82rem;
    }
    .presentation-review-navigation {
      display: grid;
      grid-template-columns: minmax(145px, 1fr) auto minmax(145px, 1fr);
      align-items: center;
      gap: 18px;
      padding: 14px 18px;
    }
    .presentation-review-navigation > :last-child {
      justify-self: end;
    }
    .presentation-review-navigation > span {
      color: #8a9aa6;
      font-size: .78rem;
      font-weight: 800;
    }
    .presentation-review-navigation form {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .presentation-review-navigation label {
      color: #526b7c;
      font-size: .76rem;
      font-weight: 800;
    }
    .presentation-review-navigation input {
      width: 76px;
      min-height: 40px;
      padding: 8px;
      border: 1px solid #c5d5df;
      border-radius: 9px;
      color: #17334a;
      background: #ffffff;
      font: inherit;
    }
    .presentation-library-empty {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 22px;
      border: 1px dashed #bfd0dc;
      border-radius: 12px;
      background: #f8fbfc;
    }
    .presentation-library-empty h3,
    .presentation-library-empty p {
      margin: 0;
    }
    .presentation-library-empty h3 {
      color: #1b3a50;
      font-size: .92rem;
    }
    .presentation-library-empty p {
      margin-top: 4px;
      color: #687c8c;
      font-size: .78rem;
      line-height: 1.45;
    }
    .presentation-library-guardrail {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 14px;
      padding: 16px 18px;
      border: 1px solid #cadee8;
      border-radius: 12px;
      color: #526b7c;
      background: #edf6f9;
      font-size: .79rem;
      line-height: 1.5;
    }
    .presentation-library-guardrail strong {
      color: #164a61;
    }
    .presentation-library-guardrail p {
      margin: 0;
    }
    .presentation-library-guardrail code {
      color: #114d68;
      font-weight: 850;
    }
    @media (max-width: 1080px) {
      .control-center-shell {
        grid-template-columns: 220px minmax(0, 1fr);
      }
      .control-center-sidebar {
        padding-inline: 13px;
      }
      .control-center-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .control-center-dashboard-grid {
        grid-template-columns: 1fr;
      }
      .presentation-library-workflow ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .presentation-library-row {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 900px) {
      .control-center-shell {
        display: block;
      }
      .control-center-sidebar {
        display: none;
      }
      .control-center-topbar {
        position: sticky;
        top: 0;
        z-index: 5;
        min-height: 64px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 16px;
      }
      .control-center-content {
        scroll-padding-top: 84px;
      }
      .control-center-content > [id],
      .control-center-content .people-hub,
      .control-center-content .people-filters,
      .control-center-content .person-row {
        scroll-margin-top: 84px;
      }
      .control-center-mobile-brand {
        min-width: 0;
        display: grid;
        line-height: 1.1;
      }
      .control-center-mobile-brand strong {
        color: #123049;
        font-size: .88rem;
      }
      .control-center-mobile-brand span {
        color: #718494;
        font-size: .7rem;
      }
      .control-center-search {
        display: none;
      }
      .control-center-mobile-nav {
        position: relative;
        display: block;
      }
      .control-center-mobile-nav summary {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border: 1px solid #d5e1e8;
        border-radius: 10px;
        color: #17435d;
        background: #f5f9fb;
        cursor: pointer;
        font-size: .78rem;
        font-weight: 850;
        list-style: none;
      }
      .control-center-mobile-nav summary::-webkit-details-marker {
        display: none;
      }
      .control-center-mobile-nav summary::after {
        content: "⌄";
        margin-left: 8px;
      }
      .control-center-mobile-nav[open] summary::after {
        content: "⌃";
      }
      .control-center-mobile-nav nav {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: min(320px, calc(100vw - 32px));
        max-height: calc(100vh - 88px);
        display: grid;
        gap: 4px;
        overflow-y: auto;
        padding: 10px;
        border: 1px solid #d8e3ea;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 18px 45px rgba(17, 43, 62, .18);
      }
      .control-center-top-action {
        display: none;
      }
      .presentation-library-readonly {
        display: none;
      }
      .control-center-content {
        padding: 32px 28px 52px;
      }
      .control-center-watermark {
        display: none;
      }
    }
    @media (max-width: 760px) {
      .control-center-content {
        padding: 26px 16px 44px;
      }
      .control-center-title-row {
        display: grid;
        gap: 16px;
        margin-bottom: 20px;
      }
      .control-center-title-row h1 {
        font-size: 2rem;
      }
      .control-center-scope {
        min-width: 0;
      }
      .control-center-kpis,
      .control-center-attention-grid {
        grid-template-columns: 1fr;
      }
      .control-center-kpis article {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
      }
      .control-center-kpis article strong {
        grid-column: 2;
        grid-row: 1 / span 2;
      }
      .control-center-kpis article small {
        grid-column: 1;
      }
      .control-center-attention,
      .control-center-status {
        padding: 17px;
      }
      .control-center-next {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .presentation-library-readonly {
        min-height: 40px;
        padding-inline: 11px;
        font-size: .7rem;
      }
      .presentation-library-preflight {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .presentation-library-preflight > strong {
        width: fit-content;
      }
      .presentation-library-workflow,
      .presentation-library-sources {
        padding: 17px;
      }
      .presentation-library-workflow ol {
        grid-template-columns: 1fr;
      }
      .presentation-library-row dl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .presentation-library-guardrail {
        grid-template-columns: 1fr;
        gap: 5px;
      }
      .presentation-review-shell {
        width: min(100% - 20px, 1460px);
        padding-top: 12px;
      }
      .presentation-review-header,
      .presentation-review-metadata {
        grid-template-columns: 1fr;
        display: grid;
        align-items: start;
      }
      .presentation-review-navigation {
        grid-template-columns: 1fr 1fr;
      }
      .presentation-review-navigation form {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-content: center;
      }
    }
    @media (max-width: 1180px) {
      .sync-projector-frame.projector-shell-premium {
        padding: 12px;
        gap: 10px;
      }
      .sync-projector-premium-header {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
      }
      .sync-projector-live-meta.sync-projector-status-band {
        display: none;
      }
      .projector-ranking-head,
      .projector-ranking-row {
        grid-template-columns: 42px minmax(112px, 1fr) minmax(180px, 1.6fr) 62px 58px 72px 78px;
      }
      .projector-ranking-head span:last-child,
      .projector-ranking-row .projector-time {
        display: none;
      }
    }
    @media (max-width: 1040px) {
      .landing-hero,
      .center-landing-hero,
      .audience-section,
      .center-section {
        grid-template-columns: 1fr;
      }
      .admin-control-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .admin-attention-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .benefit-grid,
      .privacy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .premium-product-shell {
        min-height: 0;
      }
    }
    @media (max-width: 780px) {
      .landing-header,
      .private-header {
        width: min(100% - 24px, 1180px);
      }
      .landing-hero,
      .center-landing-hero {
        width: min(100% - 24px, 1180px);
        padding: 28px 0 52px;
        gap: 28px;
      }
      .landing-hero h1,
      .center-landing-hero h1 {
        font-size: 2.55rem;
        line-height: 1.08;
      }
      .landing-lead {
        font-size: 1rem;
      }
      .premium-product-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
          "student"
          "phone"
          "projector";
        padding: 16px;
        border-radius: 22px;
      }
      .benefits-section,
      .audience-section,
      .privacy-section,
      .access-section,
      .landing-final {
        width: min(100% - 24px, 1180px);
        padding: 50px 0;
      }
      .landing-section h2,
      .landing-final h2,
      .auth-copy h1,
      .account-hero h1,
      .admin-header h1 {
        font-size: 2.05rem;
      }
      .benefit-grid,
      .privacy-grid {
        grid-template-columns: 1fr;
      }
      .admin-control-summary,
      .admin-attention-grid,
      .admin-compact-row.admin-user-row {
        grid-template-columns: 1fr;
      }
      .admin-section-nav {
        position: static;
        max-height: 184px;
        overflow: auto;
      }
      .admin-secondary-nav { width: 100%; margin-left: 0; }
      .admin-secondary-nav > div { position: static; margin-top: 6px; width: 100%; }
      .admin-user-actions { width: 100%; }
      .admin-privacy-grid { grid-template-columns: 1fr; }
      .admin-audit-head { display: none; }
      .admin-audit-row { grid-template-columns: 1fr 1fr; }
      .admin-audit-row strong { grid-column: 1 / -1; }
      .sync-teacher-actions-top,
      .sync-teacher-actions-top form,
      .sync-teacher-actions-top .button,
      .sync-teacher-actions-top .secondary-action {
        width: 100%;
      }
      .teacher-sync-page .admin-header {
        grid-template-columns: 1fr;
      }
      .teacher-sync-page .admin-header h1 {
        max-width: none;
      }
      .sync-teacher-ranking ol {
        grid-template-columns: 1fr;
      }
      .sync-projector-page {
        overflow: auto;
      }
      .sync-projector-frame {
        width: min(100% - 24px, 940px);
        aspect-ratio: auto;
        min-height: 0;
      }
      .auth-layout,
      .admin-shell {
        padding: 22px;
        border-radius: 22px;
      }
      .auth-main {
        align-items: start;
      }
    }
    @media (max-width: 440px) {
      .landing-actions .button,
      .auth-panel .button,
      .audience-copy .button {
        width: 100%;
      }
      .landing-header nav,
      .private-header nav {
        width: 100%;
      }
      .landing-header nav a,
      .private-header nav a {
        flex: 1 1 auto;
      }
      /*
       * F16 (16-09-2026): la regla de arriba (pensada para los botones grandes de un
       * formulario/CTA) tambien alcanzaba al <nav> de la CABECERA compartida. Con dos
       * enlaces cortos ("Inicio"/"Entrar") el ancho disponible no les basta para ir en
       * la misma fila junto al "flex: 1 1 auto"; al envolver, cada uno crece para llenar
       * su fila entera -- y como la cabecera centra verticalmente, el logo termina
       * flotando encima de esa segunda fila. Reproducido en produccion (ruta /registro,
       * 375px de ancho) y confirmado con las capturas reales del ensayo del 15-09
       * (2026-09-15_resultado-ensayo-y-arreglos.md, item #13). Esta excepcion solo
       * devuelve a su tamaño natural los enlaces DENTRO de la cabecera superior; el
       * resto de usos de "flex: 1 1 auto" (botones de formulario) no cambia. Specificidad
       * (0,2,4) por delante de (0,2,2)/(0,1,2) de las reglas de arriba -- por conteo, no
       * por orden (CLAUDE.md seccion 27).
       */
      body.private-page header.private-header nav a {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
      }
      .center-landing-logo {
        max-width: 112px;
        max-height: 32px;
      }
      .mock-stats {
        grid-template-columns: 1fr;
      }
    }
    body.student-home-page {
      min-width: 320px;
      background:
        radial-gradient(circle at 50% -16%, rgba(63, 120, 105, .14), transparent 36rem),
        #eef2ee;
      color: #15231f;
    }
    body.student-home-page > .private-header {
      display: none;
    }
    .student-home-main {
      width: 100%;
      min-height: 100vh;
      display: grid;
      align-items: start;
      justify-items: center;
      padding: 48px 24px 64px;
    }
    .student-home-v4-shell,
    .student-home-v4-shell .student-dashboard-layout,
    .student-home-v4-shell .student-platform-layout {
      width: 100%;
      max-width: 760px;
    }
    .student-home-v4-shell .student-platform-layout {
      display: block;
    }
    /* Auditoria Alumno Fase 4 (08-09-2026), Hallazgo 6: el marco de /me en escritorio tenia
       un tinte verde heredado de antes del rediseno Stitch (introducido 12-07-2026, confirmado
       con git log -S, no es una decision de diseno vigente). El resto del shell
       (.student-mobile-frame, linea ~13663) ya usa navy Stitch para el mismo borde/sombra --
       aqui se sustituye el mismo triplete RGB de verde (38,76,66 / 20,54,45) por el navy ya
       establecido (3,16,73), conservando alpha y desenfoque exactos. */
    .student-home-v4-frame {
      width: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 30px;
      border: 1px solid rgba(3, 16, 73, .12);
      border-radius: 32px;
      background: rgba(249, 251, 248, .96);
      box-shadow: 0 30px 80px -46px rgba(3, 16, 73, .42);
      overflow: hidden;
    }
    .student-home-v4-frame .student-home-header {
      padding: 0 2px 4px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .student-home-v4-frame .student-home-header p {
      color: #54607A;
      letter-spacing: .05em;
    }
    .student-home-v4-frame .student-home-header h1 {
      color: #031049;
      font-size: clamp(1.45rem, 3vw, 1.85rem);
      line-height: 1.12;
      letter-spacing: -.025em;
    }
    .student-home-v4-frame .student-privacy-pill,
    .student-home-v4-frame .student-logout-button {
      border-color: #DCE1E8;
      background: #ffffff;
      color: #031049;
    }
    .student-home-v4-frame .student-home-hero {
      min-height: 0;
      align-content: start;
      gap: 18px;
      padding: clamp(24px, 5vw, 38px);
      border: 1px solid #DCE1E8;
      border-radius: 28px;
      background: #ffffff;
      box-shadow: 0 24px 54px -38px rgba(3, 16, 73, .3);
    }
    .student-home-v4-frame .student-home-hero .student-soft-pill {
      border-color: rgba(3, 16, 73, .25);
      background: rgba(3, 16, 73, .06);
      color: #031049;
    }
    .student-home-v4-frame .student-home-hero-topline > span:last-child,
    .student-home-v4-frame .student-hero-progress span {
      color: #8891A6;
    }
    .student-home-v4-frame .student-home-hero h2 {
      max-width: 560px;
      color: #031049;
      font-size: clamp(2rem, 5.2vw, 3.2rem);
      line-height: 1.02;
      letter-spacing: -.045em;
    }
    .student-home-v4-frame .student-home-hero p {
      max-width: 570px;
      color: #54607A;
      font-size: 15px;
      line-height: 1.55;
    }
    .student-home-v4-frame .student-hero-progress strong {
      color: #031049;
    }
    .student-home-v4-frame .student-hero-progress .student-progress-rail {
      height: 8px;
      background: #DCE1E8;
    }
    .student-home-v4-frame .student-hero-progress .student-progress-rail span {
      background: #031049;
    }
    .student-home-v4-frame .student-primary-cta {
      min-height: 56px;
      border-radius: 16px;
      background: #031049;
      box-shadow: 0 16px 30px -20px rgba(3, 16, 73, .7);
      font-size: 16px;
    }
    .student-home-v4-context {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
      padding: 18px 20px;
      border: 1px solid #DCE1E8;
      border-radius: 20px;
      background: #F6F8FB;
    }
    .student-home-v4-context-heading {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: start;
    }
    .student-home-v4-context > div,
    .student-home-v4-context-heading > div {
      display: grid;
      gap: 3px;
    }
    .student-home-v4-context span:not(.student-status-chip) {
      color: #8891A6;
      font-size: 11px;
      font-weight: 850;
      line-height: 15px;
      text-transform: uppercase;
      letter-spacing: .045em;
    }
    .student-home-v4-context strong {
      color: #031049;
      font-size: 15px;
      line-height: 20px;
    }
    .student-home-v4-context p {
      margin: 0;
      color: #54607A;
      font-size: 12px;
      line-height: 17px;
    }
    .student-home-v4-context .student-repeat-attempt {
      margin-top: 5px;
    }
    .student-home-v4-context .student-repeat-attempt-form {
      width: fit-content;
    }
    .student-home-v4-frame .student-home-secondary-list {
      gap: 10px;
    }
    .student-home-v4-frame .student-secondary-row {
      min-height: 76px;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      padding: 16px 18px;
      border-color: #DCE1E8;
      border-radius: 18px;
      background: #ffffff;
    }
    .student-home-v4-frame .student-secondary-row h2 {
      color: #031049;
      font-size: 14px;
    }
    .student-home-v4-frame .student-secondary-row p {
      margin-top: 3px;
      color: #54607A;
    }
    .student-home-v4-frame .student-secondary-action {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      padding: 10px 12px;
      color: #031049;
    }
    /* Pendiente de la Auditoria Alumno Fase 4 (08-09-2026), cerrado 11-09: el override de arriba
       recolorea .student-secondary-action pero nunca alcanzo a .student-attempt-primary-link
       (boton "Continuar"/"Ver resumen" del historial de practica), que seguia con el fondo teal
       heredado (#245f6b, linea ~14077). Mismo navy que ya usa la variante .practice-readonly-v2
       de este mismo boton (var(--readonly-accent), linea ~26138), para no inventar un tratamiento
       nuevo. */
    .student-home-v4-frame .student-attempt-primary-link {
      border: 0;
      background: #031049;
      color: #ffffff;
    }
    .student-home-v4-frame .muted-action {
      color: #8891A6;
    }
    .student-home-v4-frame .student-classroom-entry {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      padding: 16px 18px;
      border: 1px dashed #DCE1E8;
      border-radius: 18px;
      background: transparent;
      box-shadow: none;
      opacity: 1;
    }
    .student-home-v4-frame .student-classroom-entry h2 {
      color: #031049;
    }
    .student-home-v4-frame .student-classroom-entry p {
      margin-top: 3px;
      color: #54607A;
    }
    .student-home-v4-footer {
      width: auto;
      display: flex;
      justify-content: center;
      gap: 8px 22px;
      flex-wrap: wrap;
      position: static;
      margin: 0;
      padding: 4px 8px 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .student-home-v4-footer .student-home-v4-footer-link {
      flex: 0 1 auto;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 0;
      color: #54607A;
      font-size: 13px;
      font-weight: 750;
      line-height: 18px;
      text-decoration: none;
      white-space: normal;
    }
    .student-home-v4-frame a:focus-visible,
    .student-home-v4-frame button:focus-visible {
      outline: 3px solid rgba(253, 103, 7, .55);
      outline-offset: 3px;
    }
    @media (max-width: 780px) {
      body.student-home-page {
        background: #F6F8FB;
      }
      .student-home-main {
        display: block;
        min-height: 100vh;
        padding: 0;
      }
      .student-home-v4-shell,
      .student-home-v4-shell .student-dashboard-layout,
      .student-home-v4-shell .student-platform-layout {
        max-width: none;
      }
      .student-home-v4-frame {
        min-height: 100vh;
        gap: 14px;
        padding: max(20px, env(safe-area-inset-top)) 16px calc(72px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        background: #F6F8FB;
        box-shadow: none;
      }
      .student-home-v4-frame .student-home-header {
        padding: 0;
      }
      .student-home-v4-frame .student-home-hero {
        gap: 15px;
        padding: 24px 20px;
        border-radius: 24px;
      }
      .student-home-v4-frame .student-home-hero h2 {
        font-size: clamp(1.85rem, 9vw, 2.5rem);
      }
      .student-home-v4-frame .student-secondary-row,
      .student-home-v4-frame .student-classroom-entry {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .student-home-v4-frame .student-secondary-row .student-secondary-action,
      .student-home-v4-frame .student-classroom-entry .student-secondary-action {
        width: 100%;
        justify-content: flex-start;
        padding-right: 0;
        padding-left: 0;
      }
      .student-home-v4-context-heading {
        align-items: center;
      }
      .student-home-v4-frame > .student-bottom-nav {
        width: 100%;
        position: fixed;
        z-index: 20;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        backdrop-filter: blur(14px);
      }
    }
    @media (max-width: 420px) {
      .student-home-v4-frame .student-home-header-actions {
        gap: 5px;
      }
      .student-home-v4-frame .student-privacy-pill {
        display: none;
      }
      .student-home-v4-context-heading {
        align-items: start;
      }
      .student-home-v4-context .student-status-chip {
        flex: 0 0 auto;
      }
      .student-home-v4-footer.student-bottom-nav {
        justify-content: flex-start;
      }
    }
    /* Student practice setup v2: follows the approved light, focused student-home direction. */
    .practice-mobile-frame:has(.practice-setup-v2) {
      width: min(820px, 100%);
    }
    .practice-setup-v2 {
      gap: 0;
      padding: 0;
      overflow: hidden;
      border-color: #DCE1E8;
      border-radius: 26px;
      background: #ffffff;
      box-shadow: 0 22px 58px rgba(3, 16, 73, .1);
    }
    .practice-setup-hero {
      display: grid;
      gap: 10px;
      padding: 28px 30px 26px;
      border-bottom: 1px solid #DCE1E8;
      background: #F6F8FB;
    }
    .practice-setup-hero .student-soft-pill {
      width: fit-content;
      border-color: rgba(3, 16, 73, .25);
      background: rgba(3, 16, 73, .06);
      color: #031049;
    }
    .practice-setup-hero h2 {
      max-width: 640px;
      margin: 0;
      color: #031049;
      font-size: clamp(1.8rem, 4vw, 2.45rem);
      font-weight: 850;
      letter-spacing: -.035em;
      line-height: 1.08;
    }
    .practice-setup-hero > p {
      max-width: 620px;
      margin: 0;
      color: #54607A;
      font-size: 15px;
      line-height: 22px;
    }
    .practice-setup-v2 .student-profile-modality {
      width: fit-content;
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 4px;
    }
    .practice-setup-v2 .student-profile-modality span {
      border-color: #DCE1E8;
      background: #F6F8FB;
      color: #031049;
    }
    .practice-setup-v2 .student-profile-modality small {
      color: #8891A6;
      font-size: 12px;
      line-height: 16px;
    }
    .practice-setup-v2 .practice-setup-form {
      gap: 0;
      padding: 6px 30px 30px;
    }
    .practice-setup-v2 .practice-setup-section {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 24px 0;
      border: 0;
      border-bottom: 1px solid #DCE1E8;
      border-radius: 0;
      background: transparent;
    }
    .practice-setup-v2 .practice-mode-choice-group.practice-setup-section {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .practice-setup-v2 .practice-mode-choice-group.practice-setup-section legend {
      grid-column: 1 / -1;
    }
    .practice-setup-v2 .practice-mode-choice-group {
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
    }
    .practice-setup-v2 .practice-mode-choice-group legend,
    .practice-setup-section-heading h3 {
      color: #031049;
      font-size: 17px;
      font-weight: 850;
      letter-spacing: -.012em;
      line-height: 23px;
    }
    .practice-setup-section-heading {
      display: flex;
      align-items: flex-start;
      gap: 11px;
    }
    .practice-setup-section-heading > div {
      display: grid;
      gap: 2px;
    }
    .practice-setup-section-heading h3,
    .practice-setup-section-heading p {
      margin: 0;
    }
    .practice-setup-section-heading p {
      color: #54607A;
      font-size: 13px;
      line-height: 18px;
    }
    .practice-setup-v2 .practice-step-number {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      background: #F6F8FB;
      color: #031049;
      font-size: 12px;
    }
    .practice-setup-v2 .practice-mode-choice {
      min-height: 94px;
      align-content: center;
      padding: 16px;
      border-color: #DCE1E8;
      border-radius: 16px;
      background: #fbfcfd;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .practice-setup-v2 .practice-mode-choice:hover {
      border-color: #B7C1D6;
      transform: translateY(-1px);
    }
    .practice-setup-v2 .practice-mode-choice:has(input:checked) {
      border-color: #031049;
      background: rgba(3, 16, 73, .06);
      box-shadow: 0 10px 26px rgba(3, 16, 73, .09);
    }
    .practice-setup-v2 .practice-mode-choice input {
      accent-color: #FD6707;
    }
    .practice-setup-v2 .practice-mode-choice strong {
      color: #031049;
      font-size: 15px;
      line-height: 20px;
    }
    .practice-setup-v2 .practice-mode-choice span {
      color: #54607A;
      font-size: 12px;
      line-height: 17px;
    }
    .practice-setup-v2 .compact-choice-group {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .practice-setup-v2 .compact-choice {
      min-height: 58px;
      padding: 12px;
    }
    .practice-setup-v2 .student-objective-picker {
      display: block;
      border: 1px solid #DCE1E8;
      border-radius: 16px;
      background: #fbfcfd;
      overflow: hidden;
    }
    .practice-setup-v2 .student-objective-picker > summary {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      color: #031049;
      cursor: pointer;
      list-style: none;
    }
    .practice-setup-v2 .student-objective-picker > summary::-webkit-details-marker {
      display: none;
    }
    .practice-setup-v2 .student-objective-picker > summary span {
      font-size: 14px;
      font-weight: 800;
      line-height: 20px;
    }
    .practice-setup-v2 .student-objective-picker > summary small {
      color: #031049;
      font-size: 12px;
      font-weight: 800;
    }
    .practice-setup-v2 [data-objective-open-label] {
      display: none;
    }
    .practice-setup-v2 .student-objective-picker[open] > summary {
      border-bottom: 1px solid #DCE1E8;
      background: #F6F8FB;
    }
    .practice-setup-v2 .student-objective-picker[open] [data-objective-collapsed-label] {
      display: none;
    }
    .practice-setup-v2 .student-objective-picker[open] [data-objective-open-label] {
      display: inline;
    }
    .practice-setup-v2 [hidden] {
      display: none !important;
    }
    .practice-setup-v2 .student-objective-picker-body {
      display: grid;
      gap: 11px;
      padding: 16px;
    }
    .practice-setup-v2 .student-objective-search {
      color: #54607A;
    }
    .practice-setup-v2 .student-objective-search input {
      min-height: 46px;
      border-color: #DCE1E8;
      border-radius: 12px;
    }
    .practice-setup-v2 .student-objective-all,
    .practice-setup-v2 .student-objective-option {
      border-color: #DCE1E8;
      border-radius: 13px;
      background: #ffffff;
    }
    .practice-setup-v2 .student-objective-all:has(input:checked),
    .practice-setup-v2 .student-objective-option:has(input:checked) {
      border-color: #031049;
      background: rgba(3, 16, 73, .06);
    }
    .practice-setup-v2 .student-objective-list {
      max-height: 360px;
      scrollbar-color: #B7C1D6 transparent;
    }
    .practice-exam-summary {
      display: grid;
      gap: 4px;
      margin: 24px 0 0;
      padding: 17px 18px;
      border: 1px solid #DCE1E8;
      border-radius: 16px;
      background: #F6F8FB;
      color: #031049;
    }
    .practice-exam-summary strong {
      font-size: 15px;
    }
    .practice-exam-summary span {
      color: #031049;
      font-size: 13px;
      font-weight: 800;
    }
    .practice-exam-summary p {
      margin: 2px 0 0;
      color: #54607A;
      font-size: 12px;
      line-height: 17px;
    }
    .practice-setup-v2 .practice-setup-submit {
      min-height: 56px;
      margin-top: 24px;
      border-radius: 16px;
      background: #031049;
      box-shadow: 0 12px 26px rgba(3, 16, 73, .2);
      font-size: 15px;
    }
    .practice-setup-v2 .practice-setup-submit:hover {
      background: #020a33;
    }
    /* Barrida de consistencia 08-09-2026: "Continuar practica" (cuando ya hay una practica en
       curso) es un .student-primary-cta suelto dentro de este mismo scope, sin la clase
       .practice-setup-submit -- caia en la base teal vieja. Solo el color, sin copiar el
       tamano/sombra propios del boton de envio del formulario. */
    .practice-setup-v2 .student-primary-cta {
      background: #031049;
    }
    .practice-setup-v2 .student-primary-cta:hover {
      background: #0a1c63;
    }
    .practice-setup-footnote {
      margin: 9px 0 0;
      color: #8891A6;
      font-size: 11px;
      line-height: 16px;
      text-align: center;
    }
    .practice-setup-v2 :is(input, summary, button):focus-visible {
      outline: 3px solid rgba(203, 151, 48, .6);
      outline-offset: 3px;
    }
    @media (max-width: 780px) {
      .practice-mobile-frame:has(.practice-setup-v2) {
        width: 100%;
        min-height: 100vh;
        padding: 0 12px max(20px, env(safe-area-inset-bottom));
        border-radius: 0;
        background: #f7f9f6;
      }
      .practice-mobile-frame:has(.practice-setup-v2) .practice-mobile-header {
        min-height: 46px;
        padding: 0 2px;
        color: #43574f;
        font-size: 13px;
        line-height: 18px;
      }
      .practice-mobile-frame:has(.practice-setup-v2) .practice-stage-panel {
        gap: 12px;
      }
      .practice-setup-v2 {
        border-radius: 22px;
        box-shadow: 0 16px 42px rgba(34, 55, 47, .09);
      }
      .practice-setup-hero {
        padding: 23px 19px 21px;
      }
      .practice-setup-hero h2 {
        font-size: clamp(1.75rem, 8vw, 2.15rem);
      }
      .practice-setup-hero > p {
        font-size: 14px;
        line-height: 20px;
      }
      .practice-setup-v2 .student-profile-modality {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
      }
      .practice-setup-v2 .practice-setup-form {
        padding: 3px 18px 22px;
      }
      .practice-setup-v2 .practice-setup-section {
        padding: 21px 0;
      }
      .practice-setup-v2 .practice-mode-choice-group.practice-setup-section {
        grid-template-columns: 1fr;
      }
      .practice-setup-v2 .practice-mode-choice {
        min-height: 78px;
        padding: 13px;
      }
      .practice-setup-v2 .compact-choice-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .practice-setup-v2 .compact-choice {
        min-height: 54px;
      }
      .practice-setup-v2 .student-objective-picker-body {
        padding: 13px;
      }
      .practice-setup-v2 .student-objective-list {
        max-height: 320px;
      }
      .practice-setup-v2 .practice-setup-submit {
        min-height: 56px;
      }
      .practice-mobile-frame:has(.practice-setup-v2) .student-bottom-nav {
        margin-top: 12px;
      }
    }
    /* Student practice session v2: approved 235C hierarchy reconciled with the premium student shell. */
    body.private-page:has(.practice-session-v2) {
      background: #F6F8FB;
      color: #031049;
    }
    body.private-page:has(.practice-session-v2) .private-header,
    body.private-page:has(.practice-session-v2) .private-header .brand {
      color: #031049;
    }
    body.private-page:has(.practice-session-v2) .private-main {
      padding-top: 28px;
    }
    .practice-session-v2 {
      --practice-ink: #031049;
      --practice-muted: #54607A;
      --practice-border: #DCE1E8;
      --practice-surface: #ffffff;
      --practice-soft: #F6F8FB;
      --practice-accent: #031049;
      --practice-focus: rgba(253, 103, 7, .55);
    }
    .practice-session-v2 .practice-platform-layout {
      width: min(1060px, 100%);
      max-width: 1060px;
    }
    .practice-session-v2 .practice-mobile-frame {
      width: min(1060px, 100%);
      min-height: min(820px, calc(100vh - 48px));
      gap: 16px;
      padding: 18px 20px 20px;
      border: 1px solid var(--practice-border);
      border-radius: 28px;
      background: #F6F8FB;
      box-shadow: 0 24px 64px rgba(34, 55, 47, .11);
    }
    .practice-session-v2 .practice-mobile-header {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 4px;
      color: #54607A;
      font-size: 13px;
      font-weight: 850;
      line-height: 18px;
    }
    .practice-session-v2 .practice-header-link {
      min-height: 40px;
      border-color: #DCE1E8;
      padding: 9px 13px;
      background: rgba(255, 255, 255, .82);
      color: #54607A;
      font-size: 12px;
      line-height: 16px;
    }
    .practice-session-v2 .practice-stage-panel {
      gap: 16px;
      padding: 0;
    }
    .practice-session-v2 .practice-runtime-layout {
      grid-template-columns: minmax(0, 1fr) 248px;
      gap: 18px;
      align-items: start;
      min-width: 0;
      max-width: 100%;
    }
    .practice-session-v2 .practice-runtime-main {
      gap: 13px;
      min-width: 0;
      max-width: 100%;
      padding: 26px;
      border: 1px solid var(--practice-border);
      border-radius: 24px;
      background: var(--practice-surface);
      box-shadow: 0 16px 42px rgba(34, 55, 47, .08);
    }
    .practice-session-v2 .practice-runtime-main > *,
    .practice-session-v2 .practice-closed-actions,
    .practice-session-v2 .practice-closed-actions > * {
      min-width: 0;
      max-width: 100%;
    }
    .practice-session-v2 .practice-closed-actions {
      width: 100%;
    }
    .practice-session-v2 .practice-runtime-aside {
      position: sticky;
      top: 18px;
      gap: 12px;
    }
    .practice-session-v2 .practice-step-strip {
      gap: 12px;
      color: #031049;
      font-size: 13px;
      line-height: 18px;
    }
    .practice-session-v2 .practice-step-strip span {
      min-height: 30px;
      padding: 6px 10px;
      border: 1px solid #DCE1E8;
      background: #F6F8FB;
      color: #031049;
    }
    .practice-session-v2 .practice-step-strip strong {
      color: #54607A;
      font-size: 13px;
      font-weight: 850;
    }
    .practice-session-v2 .practice-step-progress {
      display: grid;
      gap: 1px;
      text-align: right;
    }
    .practice-session-v2 .practice-step-progress small {
      color: #54607A;
      font-size: 11px;
      font-weight: 750;
      line-height: 14px;
    }
    .practice-session-v2 .practice-rail {
      height: 6px;
      margin: -3px 0 3px;
      border-radius: 999px;
      background: #DCE1E8;
      overflow: hidden;
    }
    .practice-session-v2 .practice-rail span {
      background: var(--practice-accent);
    }
    .practice-session-v2 .practice-question-card {
      gap: 10px;
      padding: 21px 22px;
      border: 1px solid #DCE1E8;
      border-radius: 20px;
      background: var(--practice-soft);
    }
    .practice-session-v2 .practice-question-card .practice-official-code {
      color: #54607A;
      font-size: 11px;
      font-weight: 800;
      line-height: 15px;
      letter-spacing: .01em;
    }
    .practice-session-v2 .practice-question-card h3 {
      margin: 0;
      color: var(--practice-ink);
      font-size: clamp(1.18rem, 2.2vw, 1.48rem);
      font-weight: 800;
      letter-spacing: -.018em;
      line-height: 1.38;
    }
    .practice-session-v2 .practice-answer-form {
      gap: 12px;
      margin-top: 0;
    }
    .practice-session-v2 .practice-action-row {
      grid-template-columns: minmax(0, 1fr);
    }
    .practice-session-v2 .practice-options,
    .practice-session-v2 .practice-static-options {
      gap: 10px;
    }
    .practice-session-v2 .practice-option,
    .practice-session-v2 .practice-static-option {
      grid-template-columns: 40px minmax(0, 1fr) auto;
      gap: 12px;
      min-height: 66px;
      padding: 12px 14px;
      border-color: #DCE1E8;
      border-radius: 17px;
      background: #ffffff;
    }
    .practice-session-v2 .practice-option {
      grid-template-columns: 40px minmax(0, 1fr);
    }
    .practice-session-v2 .practice-option strong,
    .practice-session-v2 .practice-static-option strong {
      width: 40px;
      height: 40px;
      background: #F6F8FB;
      color: #031049;
      font-size: 14px;
    }
    .practice-session-v2 .practice-option span,
    .practice-session-v2 .practice-static-option span {
      color: #031049;
      font-size: 15px;
      line-height: 21px;
    }
    .practice-session-v2 .practice-option:hover,
    .practice-session-v2 .practice-option:focus-within {
      border-color: #B7C1D6;
      box-shadow: 0 8px 20px rgba(40, 95, 75, .09);
    }
    /* Cierra el hueco senalado en la Auditoria Alumno Fase 4 (08-09-2026): .practice-session-v2
       (Practica individual) migro todo lo demas de este bloque pero no el accent-color del
       radio, que seguia heredando el teal viejo (#0b6f69) de la regla base .practice-option
       input[type="radio"]. Mismo valor exacto que ya usa .student-challenge-player para el
       mismo caso (linea ~15600), para que las dos superficies sigan identicas. */
    .practice-session-v2 .practice-option input[type="radio"] {
      accent-color: #031049;
    }
    .practice-session-v2 .practice-option:has(input[type="radio"]:checked) {
      border-color: #031049;
      background: rgba(3, 16, 73, .06);
      box-shadow: 0 0 0 2px rgba(75, 138, 112, .12);
    }
    .practice-session-v2 .practice-option:has(input[type="radio"]:checked) strong {
      background: var(--practice-accent);
    }
    .practice-session-v2 .practice-static-option.correct {
      border-color: #268157;
      background: #e6f6ee;
    }
    .practice-session-v2 .practice-static-option.correct strong,
    .practice-session-v2 .practice-static-option.correct .practice-option-status {
      background: #268157;
      color: #ffffff;
    }
    .practice-session-v2 .practice-static-option.wrong {
      border-color: #bf4343;
      background: #ffefed;
    }
    .practice-session-v2 .practice-static-option.wrong strong,
    .practice-session-v2 .practice-static-option.wrong .practice-option-status {
      background: #bf4343;
      color: #ffffff;
    }
    .practice-session-v2 .practice-action-state,
    .practice-session-v2 .practice-closed-actions {
      grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
      gap: 10px;
    }
    .practice-session-v2 .practice-action-state[data-selection-actions] {
      grid-template-columns: minmax(0, 1fr) minmax(104px, .38fr);
    }
    .practice-session-v2 .practice-action-state[data-selection-actions] .student-primary-cta,
    .practice-session-v2 .practice-closed-actions .student-primary-cta {
      min-height: 52px;
      border-radius: 15px;
      background: var(--practice-accent);
      box-shadow: 0 10px 24px rgba(40, 95, 75, .18);
      font-size: 14px;
    }
    .practice-session-v2 .practice-nav-button,
    .practice-session-v2 .practice-skip-button {
      min-height: 50px;
      border-color: #DCE1E8;
      border-radius: 15px;
      color: #54607A;
      font-size: 13px;
    }
    .practice-session-v2 .practice-finish-link {
      min-height: 40px;
      color: #54607A;
    }
    .practice-session-v2 .practice-processing-feedback {
      color: var(--practice-muted);
    }
    .practice-session-v2 .practice-correction-surface {
      display: grid;
      gap: 14px;
      min-width: 0;
      width: 100%;
    }
    .practice-session-v2 .practice-correction-result {
      margin: 0;
      color: var(--practice-ink);
      font-size: 17px;
      font-weight: 850;
      line-height: 1.35;
    }
    .practice-session-v2 .practice-feedback-card {
      grid-template-columns: 4px minmax(0, 1fr);
      gap: 14px;
      min-width: 0;
      width: 100%;
      padding: 17px 18px;
      border: 1px solid #DCE1E8;
      border-radius: 17px;
      background: #F6F8FB;
    }
    .practice-session-v2 .practice-feedback-card > span {
      align-self: stretch;
      width: 4px;
      min-height: 54px;
      height: auto;
    }
    .practice-session-v2 .practice-explanation-content {
      display: grid;
      gap: 10px;
      min-width: 0;
      max-width: 72ch;
      writing-mode: horizontal-tb;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .practice-session-v2 .practice-explanation-content h3 {
      margin: 0;
      color: var(--practice-ink);
      font-size: 16px;
      line-height: 21px;
    }
    .practice-session-v2 .practice-explanation-content :is(p, li, summary, dt, dd) {
      writing-mode: horizontal-tb;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .practice-session-v2 .practice-feedback-card h4 {
      color: var(--practice-ink);
      font-size: 15px;
      line-height: 20px;
    }
    .practice-session-v2 .practice-feedback-card p {
      color: #54607A;
      font-size: 13px;
      line-height: 19px;
    }
    .practice-session-v2 .practice-feedback-card .didactic-explanation-v3 p {
      color: #031049;
      font-size: 17px;
      line-height: 1.55;
    }
    .practice-session-v2 .practice-map-card {
      gap: 12px;
      padding: 18px;
      border: 1px solid var(--practice-border);
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 12px 30px rgba(34, 55, 47, .07);
    }
    .practice-session-v2 .practice-map-card h3 {
      color: var(--practice-ink);
      font-size: 15px;
      line-height: 20px;
    }
    .practice-session-v2 .practice-map-card p {
      color: var(--practice-muted);
    }
    .practice-session-v2 .practice-map-chips a {
      min-width: 38px;
      min-height: 38px;
      border-color: #DCE1E8;
      background: #F6F8FB;
      color: #54607A;
      font-size: 13px;
    }
    .practice-session-v2 .practice-map-chips a.current {
      border-color: var(--practice-accent);
      background: var(--practice-accent);
      box-shadow: 0 0 0 3px rgba(40, 95, 75, .16);
    }
    .practice-session-v2 .practice-map-chips a.correct,
    .practice-session-v2 .practice-map-chips a.correct.current {
      border-color: #268157;
      background: #268157;
      color: #ffffff;
    }
    .practice-session-v2 .practice-map-chips a.wrong,
    .practice-session-v2 .practice-map-chips a.wrong.current {
      border-color: #bf4343;
      background: #bf4343;
      color: #ffffff;
    }
    .practice-session-v2 .practice-map-chips a.blank,
    .practice-session-v2 .practice-map-chips a.blank.current {
      border-color: #b9c3bd;
      background: #e6ebe8;
      color: #4f5f57;
    }
    .practice-session-v2 .practice-map-chips a:is(.correct, .wrong, .blank).current {
      box-shadow: 0 0 0 3px rgba(40, 95, 75, .16);
    }
    .practice-session-v2 .practice-report-explanation summary {
      color: #54607A;
      font-size: 12px;
    }
    .practice-session-v2 .practice-review-summary {
      border: 1px solid var(--practice-border);
      border-radius: 20px;
      background: #ffffff;
    }
    .practice-session-v2 .practice-review-item {
      border-radius: 15px;
    }
    .practice-session-v2 .practice-session-completed-v2 {
      width: min(860px, 100%);
    }
    .practice-session-v2 .practice-summary-v2 {
      gap: 18px;
      padding: 30px;
      border-color: var(--practice-border);
      border-radius: 24px;
      box-shadow: 0 18px 46px rgba(34, 55, 47, .09);
    }
    .practice-session-v2 .practice-summary-v2 .practice-context-label {
      color: #54607A;
      font-size: 12px;
      letter-spacing: .01em;
    }
    .practice-session-v2 .practice-summary-v2 h2 {
      margin: -4px 0 0;
      color: var(--practice-ink);
      font-size: clamp(1.65rem, 4vw, 2.15rem);
      letter-spacing: -.025em;
      line-height: 1.12;
    }
    .practice-session-v2 .student-equivalent-result {
      border-color: #DCE1E8;
      border-radius: 19px;
      box-shadow: none;
    }
    .practice-session-v2 .student-result-hero {
      display: grid;
      grid-template-columns: 144px minmax(0, 1fr);
      gap: 24px;
      align-items: center;
    }
    .practice-session-v2 .student-score-gauge {
      position: relative;
      width: 144px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 50%;
      background: conic-gradient(var(--practice-accent) var(--student-score-fill), #DCE1E8 0);
    }
    .practice-session-v2 .student-score-gauge::before {
      content: "";
      position: absolute;
      inset: 13px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: inset 0 0 0 1px rgba(40, 95, 75, .08);
    }
    .practice-session-v2 .not-passed .student-score-gauge {
      background: conic-gradient(#b84646 var(--student-score-fill), #eadfdd 0);
    }
    .practice-session-v2 .student-score-gauge-center {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 1px;
      color: var(--practice-ink);
      text-align: center;
    }
    .practice-session-v2 .student-score-gauge-center strong {
      font-size: 28px;
      font-weight: 900;
      line-height: 32px;
    }
    .practice-session-v2 .student-score-gauge-center span {
      color: #54607A;
      font-size: 12px;
      font-weight: 850;
      line-height: 16px;
    }
    .practice-session-v2 .student-result-copy {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .practice-session-v2 .student-equivalent-result.passed {
      border-color: #a9cfbc;
      background: #eff7f2;
    }
    .practice-session-v2 .student-equivalent-result.not-passed {
      border-color: #e2b5b0;
      background: #fff5f3;
    }
    .practice-session-v2 .student-summary-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .practice-session-v2 .student-summary-grid div {
      min-height: 76px;
      align-content: center;
      border-color: #DCE1E8;
      border-radius: 15px;
      background: #F6F8FB;
    }
    .practice-session-v2 .student-summary-note {
      border: 1px solid #DCE1E8;
      border-radius: 16px;
      background: #F6F8FB;
    }
    .practice-session-v2 .student-summary-actions .student-primary-cta {
      min-height: 52px;
      border-radius: 15px;
      background: var(--practice-accent);
    }
    .practice-session-v2 .secondary-action {
      min-height: 48px;
      border-color: #DCE1E8;
      border-radius: 14px;
      color: #54607A;
    }
    .practice-session-v2 .practice-composition-toggle,
    .practice-session-v2 .practice-result-composition,
    .practice-session-v2 .practice-objective-performance {
      border: 1px solid #DCE1E8;
      border-radius: 16px;
      background: #F6F8FB;
    }
    .practice-session-v2 .practice-composition-toggle {
      padding: 11px 14px;
    }
    .practice-session-v2 .practice-composition-toggle summary {
      cursor: pointer;
      color: #031049;
      font-weight: 800;
    }
    .practice-session-v2 .practice-composition-content,
    .practice-session-v2 .practice-result-composition,
    .practice-session-v2 .practice-objective-performance {
      display: grid;
      gap: 10px;
      padding: 16px;
    }
    .practice-session-v2 .practice-composition-content {
      padding: 14px 0 2px;
    }
    .practice-session-v2 .practice-composition-content :is(p, h4),
    .practice-session-v2 .practice-result-composition h3,
    .practice-session-v2 .practice-objective-performance :is(h3, p) {
      margin: 0;
    }
    .practice-session-v2 .practice-composition-list {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .practice-session-v2 .practice-composition-list li {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 0;
      border-top: 1px solid #DCE1E8;
    }
    .practice-session-v2 .practice-composition-list span {
      flex: 0 0 auto;
      color: #54607A;
    }
    .practice-session-v2 :is(a, button, input, select, textarea, summary):focus-visible {
      outline: 3px solid var(--practice-focus);
      outline-offset: 3px;
    }
    @media (max-width: 899px) {
      .practice-session-v2 .practice-runtime-layout {
        grid-template-columns: minmax(0, 1fr);
      }
      .practice-session-v2 .practice-mobile-map {
        margin-top: 2px;
      }
      .practice-session-v2 .practice-mobile-map .practice-map-card {
        padding: 14px;
      }
      .practice-session-v2 .practice-mobile-map .practice-map-chips {
        gap: 7px;
      }
    }
    @media (max-width: 780px) {
      .private-main:has(.practice-session-v2) {
        display: block;
        min-height: 100vh;
        padding: 0;
      }
      .practice-session-v2,
      .practice-session-v2 .student-dashboard-layout,
      .practice-session-v2 .practice-platform-layout {
        max-width: none;
      }
      .practice-session-v2 .practice-mobile-frame {
        width: 100%;
        min-height: 100vh;
        gap: 11px;
        padding: max(12px, env(safe-area-inset-top)) 12px max(22px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        background: #F6F8FB;
        box-shadow: none;
      }
      .practice-session-v2 .practice-mobile-header {
        min-height: 44px;
        padding: 0 2px;
        font-size: 13px;
        line-height: 18px;
      }
      .practice-session-v2 .practice-header-link {
        min-height: 38px;
        padding: 8px 11px;
        font-size: 12px;
      }
      .practice-session-v2 .practice-stage-panel {
        gap: 12px;
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
      }
      .practice-session-v2 .practice-runtime-main {
        gap: 11px;
        width: 100%;
        padding: 17px;
        border-radius: 22px;
        box-shadow: 0 14px 36px rgba(34, 55, 47, .08);
      }
      .practice-session-v2 .practice-step-strip {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        font-size: 12px;
      }
      .practice-session-v2 .practice-step-strip span {
        min-width: 0;
        max-width: 58%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .practice-session-v2 .practice-step-progress {
        margin-left: auto;
      }
      .practice-session-v2 .practice-step-strip strong {
        font-size: 12px;
        white-space: nowrap;
      }
      .practice-session-v2 .practice-question-card {
        gap: 8px;
        padding: 17px;
        border-radius: 18px;
      }
      .practice-session-v2 .practice-question-card h3 {
        font-size: 1.08rem;
        line-height: 1.42;
      }
      .practice-session-v2 .practice-option,
      .practice-session-v2 .practice-static-option {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        min-height: 60px;
        padding: 10px 11px;
      }
      .practice-session-v2 .practice-option {
        grid-template-columns: 38px minmax(0, 1fr);
      }
      .practice-session-v2 .practice-option strong,
      .practice-session-v2 .practice-static-option strong {
        width: 38px;
        height: 38px;
      }
      .practice-session-v2 .practice-option span,
      .practice-session-v2 .practice-static-option span {
        font-size: 14px;
        line-height: 20px;
      }
      .practice-session-v2 .practice-action-state,
      .practice-session-v2 .practice-action-state[data-selection-actions],
      .practice-session-v2 .practice-closed-actions {
        grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
      }
      .practice-session-v2 .practice-action-state[data-selection-actions] {
        grid-template-columns: minmax(0, 1fr) minmax(94px, .38fr);
      }
      .practice-session-v2 .practice-feedback-card {
        padding: 15px;
      }
      .didactic-explanation-v3 {
        max-width: none;
      }
      .didactic-explanation-v3__glossary dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
      }
      .practice-session-v2 .practice-summary-v2 {
        gap: 15px;
        padding: 21px 18px;
        border-radius: 22px;
      }
      .practice-session-v2 .student-result-hero {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 16px;
      }
      .practice-session-v2 .student-score-gauge {
        width: 112px;
      }
      .practice-session-v2 .student-score-gauge::before {
        inset: 10px;
      }
      .practice-session-v2 .student-score-gauge-center strong {
        font-size: 24px;
        line-height: 28px;
      }
      .practice-session-v2 .student-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .practice-session-v2 .student-summary-actions {
        grid-template-columns: 1fr;
      }
      .practice-session-v2 .student-summary-actions .full {
        grid-column: auto;
      }
      .practice-session-v2 .practice-review-summary {
        padding: 16px;
      }
      .practice-session-v2 .student-bottom-nav {
        margin-top: 2px;
      }
    }
    @media (max-width: 380px) {
      .practice-session-v2 .practice-mobile-frame {
        padding-right: 9px;
        padding-left: 9px;
      }
      .practice-session-v2 .practice-runtime-main {
        padding: 14px;
      }
      .practice-session-v2 .practice-question-card {
        padding: 14px;
      }
      .practice-session-v2 .practice-option,
      .practice-session-v2 .practice-static-option {
        gap: 9px;
        padding: 9px;
      }
      .practice-session-v2 .student-result-hero {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
      }
      .practice-session-v2 .student-score-gauge {
        width: 96px;
      }
    }
    /* Student history and error review v2: approved Figma v2 read-only direction. */
    body.private-page:has(.practice-readonly-v2) {
      background: #F6F8FB;
      color: #031049;
    }
    body.private-page:has(.practice-readonly-v2) .private-header,
    body.private-page:has(.practice-readonly-v2) .private-header .brand {
      color: #031049;
    }
    body.private-page:has(.practice-readonly-v2) .private-main {
      padding-top: 28px;
    }
    .practice-readonly-v2 {
      --readonly-ink: #031049;
      --readonly-muted: #54607A;
      --readonly-border: #DCE1E8;
      --readonly-soft: #F6F8FB;
      --readonly-accent: #031049;
    }
    .practice-readonly-v2 .practice-platform-layout,
    .practice-readonly-v2 .practice-readonly-frame-v2 {
      width: min(920px, 100%);
      max-width: 920px;
    }
    .practice-readonly-v2 .practice-readonly-frame-v2 {
      min-height: min(820px, calc(100vh - 48px));
      gap: 16px;
      padding: 18px 20px 20px;
      border: 1px solid var(--readonly-border);
      border-radius: 28px;
      background: #F6F8FB;
      box-shadow: 0 24px 64px rgba(34, 55, 47, .1);
    }
    .practice-readonly-v2 .practice-mobile-header {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 4px;
      color: #54607A;
      font-size: 13px;
      font-weight: 850;
      line-height: 18px;
    }
    .practice-readonly-v2 .practice-header-link {
      min-height: 40px;
      border-color: #DCE1E8;
      padding: 9px 13px;
      background: rgba(255, 255, 255, .82);
      color: #54607A;
      font-size: 12px;
      line-height: 16px;
    }
    .practice-readonly-v2 .practice-stage-panel,
    .practice-history-v2 {
      gap: 14px;
    }
    .practice-history-v2 {
      display: grid;
    }
    .practice-readonly-v2 .student-history-overview,
    .practice-readonly-v2 .practice-mode-panel,
    .practice-readonly-v2 .practice-errors-v2-empty,
    .practice-readonly-v2 .practice-errors-v2-list {
      border: 1px solid var(--readonly-border);
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 14px 36px rgba(34, 55, 47, .07);
    }
    .practice-readonly-v2 .student-history-overview {
      gap: 13px;
      padding: 26px;
    }
    .practice-readonly-v2 .student-history-overview .practice-context-label,
    .practice-readonly-v2 .student-side-kicker,
    .practice-readonly-v2 .eyebrow {
      color: #031049;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .04em;
      line-height: 15px;
      text-transform: uppercase;
    }
    .practice-readonly-v2 .student-history-overview h2,
    .practice-readonly-v2 .practice-state-copy h2,
    .practice-readonly-v2 .practice-errors-v2-empty h2 {
      margin: 0;
      color: var(--readonly-ink);
      font-size: clamp(1.55rem, 4vw, 2.05rem);
      font-weight: 850;
      letter-spacing: -.025em;
      line-height: 1.14;
    }
    .practice-readonly-v2 .student-history-overview > p,
    .practice-readonly-v2 .practice-state-copy p,
    .practice-readonly-v2 .practice-errors-v2-empty > p {
      margin: 0;
      color: var(--readonly-muted);
      font-size: 14px;
      line-height: 20px;
    }
    .practice-readonly-v2 .student-history-kpis {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .practice-readonly-v2 .student-history-kpis div {
      min-height: 76px;
      align-content: center;
      border: 1px solid #DCE1E8;
      border-radius: 15px;
      background: #F6F8FB;
    }
    .practice-readonly-v2 .practice-mode-panel {
      gap: 14px;
      padding: 22px;
    }
    .practice-readonly-v2 .student-history-list {
      gap: 11px;
    }
    .practice-readonly-v2 .student-history-list li {
      gap: 12px;
      padding: 17px;
      border: 1px solid #DCE1E8;
      border-radius: 17px;
      background: #F6F8FB;
    }
    .practice-readonly-v2 .student-history-list li.current-attempt {
      border-color: #031049;
      background: rgba(3, 16, 73, .06);
      box-shadow: 0 0 0 2px rgba(80, 135, 111, .08);
    }
    .practice-readonly-v2 .student-history-heading {
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }
    .practice-readonly-v2 .student-history-list .student-attempt-actions {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(180px, .7fr) minmax(260px, 1fr);
      gap: 7px 14px;
      align-items: start;
    }
    .practice-readonly-v2 .student-history-list .student-attempt-review-note {
      grid-column: 1;
    }
    .practice-readonly-v2 .student-history-list .student-repeat-attempt {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
    .practice-readonly-v2 .student-history-title strong {
      color: var(--readonly-ink);
      font-size: 15px;
      line-height: 20px;
    }
    .practice-readonly-v2 .student-history-title span,
    .practice-readonly-v2 .student-history-list li > p {
      color: var(--readonly-muted);
    }
    .practice-readonly-v2 .student-status-chip {
      border-radius: 999px;
    }
    .practice-readonly-v2 .student-attempt-metrics {
      gap: 7px;
    }
    .practice-readonly-v2 .student-attempt-metrics span {
      border-radius: 999px;
      background: #F6F8FB;
    }
    .practice-readonly-v2 .student-attempt-primary-link,
    .practice-readonly-v2 .student-primary-cta {
      min-height: 48px;
      border-radius: 14px;
      background: var(--readonly-accent);
      color: #ffffff;
    }
    .practice-readonly-v2 .student-history-list .student-attempt-primary-link {
      border-color: var(--readonly-accent);
      background: var(--readonly-accent);
      color: #ffffff;
    }
    .practice-readonly-v2 .student-attempt-secondary-link,
    .practice-readonly-v2 .secondary-action,
    .practice-readonly-v2 .student-secondary-action {
      min-height: 44px;
      border-color: #DCE1E8;
      border-radius: 13px;
      color: #54607A;
    }
    /* Barrida de consistencia 08-09-2026: .student-soft-pill solo tenia override a navy en /me
       y /practice/setup -- seguia en teal viejo en las 5 paginas de este scope (exportar datos,
       resultado de borrado, zona sensible, errores de practica, ayuda de practica). */
    .practice-readonly-v2 .student-soft-pill {
      border-color: #DCE1E8;
      background: #F6F8FB;
      color: var(--readonly-accent);
    }
    .practice-readonly-v2 .practice-errors-v2-hero {
      gap: 18px;
      padding: 26px;
      background: #F6F8FB;
    }
    .practice-readonly-v2 .practice-history-objectives > summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: #031049;
      cursor: pointer;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .04em;
      line-height: 15px;
      list-style: none;
      text-transform: uppercase;
    }
    .practice-readonly-v2 .practice-history-objectives > summary::-webkit-details-marker {
      display: none;
    }
    .practice-readonly-v2 .practice-history-objectives > summary small {
      color: #54607A;
      font-size: 11px;
      letter-spacing: 0;
      text-transform: none;
    }
    .practice-readonly-v2 .practice-history-objectives[open] > summary {
      padding-bottom: 14px;
      border-bottom: 1px solid #DCE1E8;
    }
    .practice-readonly-v2 .practice-history-objective-body {
      padding-top: 14px;
    }
    .practice-readonly-v2 .practice-errors-v2-hero .student-summary-actions {
      align-items: stretch;
    }
    .practice-readonly-v2 .practice-errors-v2-empty,
    .practice-readonly-v2 .practice-errors-v2-list {
      padding: 24px;
    }
    .practice-readonly-v2 .practice-errors-v2-list {
      gap: 12px;
    }
    .practice-readonly-v2 .practice-help-v2-hero,
    .practice-readonly-v2 .practice-help-v2-privacy,
    .student-data-v2-shell .student-data-card {
      padding: 24px;
    }
    .practice-readonly-v2 .practice-help-v2-hero {
      gap: 20px;
      background: #F6F8FB;
    }
    .practice-readonly-v2 .student-help-form {
      display: grid;
      gap: 14px;
      margin: 0;
    }
    .practice-readonly-v2 .student-help-form label {
      display: grid;
      gap: 7px;
      color: var(--readonly-ink);
      font-size: 13px;
      font-weight: 800;
      line-height: 18px;
    }
    .practice-readonly-v2 .student-help-form textarea {
      width: 100%;
      min-height: 112px;
      resize: vertical;
      border: 1px solid #DCE1E8;
      border-radius: 14px;
      padding: 13px 14px;
      background: #ffffff;
      color: var(--readonly-ink);
      font: inherit;
      font-size: 14px;
      line-height: 20px;
    }
    .practice-readonly-v2 .student-support-facts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .practice-readonly-v2 .student-support-facts div {
      align-content: start;
      border-color: #DCE1E8;
      border-radius: 15px;
      background: #F6F8FB;
    }
    .student-data-v2-shell .student-data-page {
      gap: 14px;
      align-content: start;
      grid-template-columns: minmax(0, 1fr);
    }
    .student-data-v2-shell .student-data-card {
      gap: 18px;
      border-color: var(--readonly-border);
      border-radius: 22px;
      box-shadow: 0 14px 36px rgba(34, 55, 47, .07);
    }
    .student-data-v2-shell .student-data-heading h2 {
      color: var(--readonly-ink);
      font-size: clamp(1.4rem, 3vw, 1.85rem);
      line-height: 1.18;
    }
    .student-data-v2-shell .student-data-heading p,
    .student-data-v2-shell .student-data-note-list,
    .student-data-v2-shell .student-data-timestamp,
    .student-data-v2-shell .student-data-confirm span {
      color: var(--readonly-muted);
      font-size: 13px;
      line-height: 19px;
    }
    .student-data-v2-shell .student-data-count-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 9px;
    }
    .student-data-v2-shell .student-data-count {
      min-height: 86px;
      align-content: center;
      border: 1px solid #DCE1E8;
      background: #F6F8FB;
    }
    .student-data-v2-shell .student-data-actions {
      gap: 10px;
    }
    .student-data-v2-shell .student-data-secondary-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .student-data-v2-shell .student-data-danger-zone {
      border-color: #e8c7bc;
      background: #fffaf8;
      box-shadow: none;
    }
    .student-data-v2-shell .student-data-danger {
      min-height: 46px;
      border-color: #d8a89b;
      background: #fff1ed;
      color: #8c2f25;
      font-size: 13px;
      font-weight: 850;
    }
    .practice-readonly-v2 .practice-review-item {
      padding: 17px;
      border-color: #e2c8b7;
      border-radius: 16px;
      background: #fffdfb;
    }
    .practice-readonly-v2 .correction-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .practice-readonly-v2 .correction-facts div {
      border-color: #DCE1E8;
      border-radius: 12px;
      background: #ffffff;
    }
    .practice-readonly-v2 :is(a, button, input, select, textarea, summary):focus-visible {
      outline: 3px solid rgba(253, 103, 7, .55);
      outline-offset: 3px;
    }
    @media (max-width: 780px) {
      .private-main:has(.practice-readonly-v2) {
        display: block;
        min-height: 100vh;
        padding: 0;
      }
      .practice-readonly-v2,
      .practice-readonly-v2 .student-dashboard-layout,
      .practice-readonly-v2 .practice-platform-layout {
        max-width: none;
      }
      .practice-readonly-v2 .practice-readonly-frame-v2 {
        width: 100%;
        min-height: 100vh;
        gap: 11px;
        padding: max(12px, env(safe-area-inset-top)) 12px max(22px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        background: #F6F8FB;
        box-shadow: none;
      }
      .practice-readonly-v2 .practice-mobile-header {
        min-height: 44px;
        padding: 0 2px;
        font-size: 13px;
      }
      .practice-readonly-v2 .student-history-overview,
      .practice-readonly-v2 .practice-mode-panel,
      .practice-readonly-v2 .practice-errors-v2-empty,
      .practice-readonly-v2 .practice-errors-v2-list {
        padding: 18px;
        border-radius: 20px;
      }
      .practice-readonly-v2 .student-history-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .practice-readonly-v2 .student-support-facts,
      .student-data-v2-shell .student-data-secondary-actions {
        grid-template-columns: 1fr;
      }
      .student-data-v2-shell .student-data-count-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .practice-readonly-v2 .practice-help-v2-hero,
      .practice-readonly-v2 .practice-help-v2-privacy,
      .student-data-v2-shell .student-data-card {
        padding: 18px;
      }
      .practice-readonly-v2 .student-history-heading,
      .practice-readonly-v2 .student-attempt-actions,
      .practice-readonly-v2 .student-summary-actions {
        grid-template-columns: 1fr;
      }
      .practice-readonly-v2 .student-history-list .student-attempt-actions {
        grid-template-columns: 1fr;
      }
      .practice-readonly-v2 .student-history-list .student-attempt-review-note,
      .practice-readonly-v2 .student-history-list .student-repeat-attempt {
        grid-column: 1;
        grid-row: auto;
      }
      .practice-readonly-v2 .student-attempt-actions,
      .practice-readonly-v2 .student-attempt-actions > *,
      .practice-readonly-v2 .student-repeat-attempt,
      .practice-readonly-v2 .student-repeat-attempt form,
      .practice-readonly-v2 .student-repeat-attempt button {
        width: 100%;
      }
      .practice-readonly-v2 .correction-facts {
        grid-template-columns: 1fr;
      }
      .practice-readonly-v2 .student-bottom-nav {
        margin-top: 2px;
      }
    }
    /* ALUMNO 2.1: shared, progressive student progress system. */
    .student-progress-page,
    .student-objective-detail {
      --student-ink: #031049;
      --student-muted: #54607A;
      --student-border: #DCE1E8;
      --student-surface: #ffffff;
      --student-soft: #F6F8FB;
      --student-accent: #031049;
      display: grid;
      gap: 16px;
      color: var(--student-ink);
    }
    .practice-readonly-v2,
    .practice-readonly-v2 .student-dashboard-layout,
    .practice-readonly-v2 .practice-platform-layout,
    .practice-readonly-v2 .practice-readonly-frame-v2,
    .practice-readonly-v2 .practice-stage-panel,
    .student-progress-page,
    .student-objective-detail,
    .student-objective-detail > * { min-width: 0; max-width: 100%; }
    .practice-readonly-v2 .practice-stage-panel,
    .student-progress-page,
    .student-objective-detail,
    .student-objective-detail > * { width: 100%; }
    .student-progress-page *,
    .student-objective-detail * { box-sizing: border-box; }
    .student-objective-detail > header > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .student-progress-page :is(h1, h2, h3, p),
    .student-objective-detail :is(h1, h2, p) { margin: 0; }
    .student-progress-hero,
    .student-progress-guidance,
    .student-progress-definitions,
    .student-progress-objectives,
    .student-objective-detail > header,
    .student-objective-detail > section {
      border: 1px solid var(--student-border);
      border-radius: 22px;
      background: var(--student-surface);
    }
    .student-progress-hero { display: grid; gap: 13px; padding: 28px; }
    .student-progress-hero h1,
    .student-objective-detail h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.04em; line-height: 1; }
    .student-progress-hero > p:not(.practice-context-label),
    .student-objective-detail header > p:last-child { color: var(--student-muted); line-height: 1.55; }
    .student-progress-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .student-progress-summary-grid > div { display: grid; gap: 3px; min-width: 0; padding: 14px; border: 1px solid var(--student-border); border-radius: 15px; background: var(--student-soft); }
    .student-progress-summary-grid span,
    .student-progress-summary-grid small { color: var(--student-muted); font-size: 12px; line-height: 1.35; }
    .student-progress-summary-grid strong { font-size: clamp(1.35rem, 4vw, 2rem); letter-spacing: -.03em; }
    .student-progress-result-line { font-weight: 750; }
    .student-progress-guidance,
    .student-progress-definitions,
    .student-progress-objectives,
    .student-objective-detail > section,
    .student-objective-detail > header { display: grid; gap: 15px; padding: 22px; }
    .student-progress-guidance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .student-progress-guidance-grid article { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 15px; border-top: 3px solid #FD6707; background: var(--student-soft); }
    .student-progress-guidance-grid article p { display: grid; gap: 2px; }
    .student-progress-guidance-grid article span { color: var(--student-muted); font-size: 12px; line-height: 1.4; }
    .student-next-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 15px; border-top: 1px solid var(--student-border); }
    .student-next-action > div { display: grid; gap: 3px; }
    .student-next-action span { color: var(--student-muted); font-size: 12px; }
    .student-primary-action,
    .student-back-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 15px; border-radius: 12px; font-weight: 800; }
    .student-primary-action { background: var(--student-accent); color: #fff; }
    .student-back-link { justify-self: start; color: var(--student-accent); }
    .practice-readonly-v2 :is(.practice-header-link, .student-bottom-nav a, .student-bottom-action) {
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .student-progress-definitions dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
    .student-progress-definitions dl > div { padding-left: 12px; border-left: 2px solid #DCE1E8; }
    .student-progress-definitions dt { font-weight: 850; }
    .student-progress-definitions dd { margin: 3px 0 0; color: var(--student-muted); font-size: 13px; line-height: 1.45; }
    .student-progress-definitions > p { color: var(--student-muted); font-size: 13px; line-height: 1.5; }
    .student-progress-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
    .student-progress-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .student-progress-row { border: 1px solid var(--student-border); border-radius: 15px; background: #fff; overflow: hidden; }
    .student-progress-row > details > summary,
    .student-exam-history-list summary { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; cursor: pointer; list-style: none; }
    .student-progress-row summary::-webkit-details-marker,
    .student-exam-history-list summary::-webkit-details-marker { display: none; }
    .student-progress-row-title,
    .student-progress-row-status,
    .student-exam-history-list summary > span { display: grid; gap: 2px; min-width: 0; }
    .student-progress-row-title small,
    .student-progress-row-status small,
    .student-exam-history-list summary small { color: var(--student-muted); font-size: 11px; }
    .student-progress-row-title strong { overflow-wrap: anywhere; }
    .student-progress-row-status { flex: 0 0 auto; text-align: right; }
    .student-progress-row-body { display: grid; gap: 14px; padding: 15px; border-top: 1px solid var(--student-border); background: var(--student-soft); }
    .student-progress-bar { display: grid; gap: 6px; }
    .student-progress-bar > div { display: flex; justify-content: space-between; gap: 12px; }
    .student-progress-bar small,
    .student-progress-evidence { color: var(--student-muted); font-size: 12px; }
    .student-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #DCE1E8; }
    .student-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--student-accent); }
    .student-progress-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
    .student-progress-counts > div { padding: 10px; border: 1px solid var(--student-border); border-radius: 11px; background: #fff; }
    .student-progress-counts dt { color: var(--student-muted); font-size: 11px; }
    .student-progress-counts dd { margin: 2px 0 0; font-size: 18px; font-weight: 850; }
    .student-progress-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .student-progress-actions > * { min-height: 44px; }
    .student-objective-detail > header { padding-top: 26px; }
    .student-objective-detail-summary { gap: 18px !important; }
    .student-source-list,
    .student-question-list,
    .student-recent-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
    .student-source-list li,
    .student-question-list li,
    .student-recent-list li { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid var(--student-border); }
    .student-source-list li:first-child,
    .student-question-list li:first-child,
    .student-recent-list li:first-child { border-top: 0; }
    .student-source-list span,
    .student-question-list span,
    .student-question-list small,
    .student-recent-list span { color: var(--student-muted); font-size: 12px; }
    .student-question-list strong,
    .student-question-list span,
    .student-question-list small { overflow-wrap: anywhere; }
    .student-exam-history-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .student-exam-history-list > li { border: 1px solid #DCE1E8; border-radius: 14px; background: #fff; overflow: hidden; }
    .student-exam-history-list summary > span:last-child { text-align: right; }
    .student-exam-history-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #DCE1E8; background: #F6F8FB; }
    .student-exam-history-comparison section { padding: 15px; }
    .student-exam-history-comparison section + section { border-left: 1px solid #DCE1E8; }
    .student-exam-history-comparison h4 { margin: 0 0 10px; }
    .student-exam-history-comparison dl { display: grid; gap: 6px; margin: 0; }
    .student-exam-history-comparison dl > div { display: flex; justify-content: space-between; gap: 10px; }
    .student-exam-history-comparison dt { color: #54607A; }
    .student-exam-history-comparison dd { margin: 0; font-weight: 800; text-align: right; }
    .practice-readonly-v2 :is(a, button, input, select, textarea, summary):focus-visible,
    .student-exam-history-list summary:focus-visible,
    .student-bottom-nav a:focus-visible,
    .student-bottom-nav a:focus { outline: 3px solid #FD6707; outline-offset: 3px; }
    .practice-session-v2 :is(.practice-header-link, details > summary, button, .student-bottom-nav a) {
      min-width: 44px;
      min-height: 44px;
    }
    @media (max-width: 700px) {
      .student-progress-hero,
      .student-progress-guidance,
      .student-progress-definitions,
      .student-progress-objectives,
      .student-objective-detail > header,
      .student-objective-detail > section { padding: 18px; border-radius: 18px; }
      .student-progress-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .student-progress-guidance-grid,
      .student-progress-definitions dl,
      .student-exam-history-comparison { grid-template-columns: minmax(0, 1fr); }
      .student-exam-history-comparison section + section { border-left: 0; border-top: 1px solid #DCE1E8; }
      .student-next-action,
      .student-progress-section-heading { align-items: stretch; flex-direction: column; }
      .student-next-action > a,
      .student-progress-section-heading > a { width: 100%; }
    }
    @media (max-width: 430px) {
      .student-progress-counts { grid-template-columns: minmax(0, 1fr); }
      .student-progress-row > details > summary,
      .student-exam-history-list summary { align-items: start; }
      .student-progress-row-status { max-width: 45%; }
    }
    .autonomous-enrollment-page select,
    .autonomous-enrollment-page input:not([type="checkbox"]),
    .autonomous-enrollment-page button {
      box-sizing: border-box;
      min-width: 0;
      max-width: 100%;
      min-height: 44px;
      height: 44px;
      width: 100%;
    }
    .autonomous-enrollment-page select { overflow: hidden; text-overflow: ellipsis; }
    .autonomous-enrollment-page .auth-layout,
    .autonomous-enrollment-page .auth-panel,
    .autonomous-enrollment-page .form-grid,
    .autonomous-enrollment-page label { min-width: 0; }
    .autonomous-enrollment-page .form-grid {
      grid-template-columns: minmax(0, 1fr) !important;
      width: 100%;
    }
    .autonomous-enrollment-page .form-grid > label,
    .autonomous-enrollment-page .form-grid > input,
    .autonomous-enrollment-page .form-grid > select,
    .autonomous-enrollment-page .form-grid > button { width: 100%; }
    @media (prefers-reduced-motion: reduce) {
      .student-progress-page *, .student-objective-detail * { scroll-behavior: auto !important; transition: none !important; }
    }
    @media (forced-colors: active) {
      .student-progress-track i { background: Highlight; }
      .student-primary-action { border: 1px solid ButtonText; }
    }
    /* CAP-DEMO-ECOSYSTEM-RIBAS-V1: focused public ecosystem story */
    .ecosystem-landing-page {
      --ecosystem-navy: #071b2b;
      --ecosystem-blue: #004d73;
      --ecosystem-blue-dark: #003650;
      --ecosystem-ice: #edf5f8;
      --ecosystem-line: #cbdde5;
      --ecosystem-gold: #9a5a00;
      background:
        radial-gradient(circle at 82% 3%, rgba(0, 77, 115, .08), transparent 28rem),
        #f8fbfd;
    }
    .ecosystem-header {
      min-height: 76px;
      border-bottom: 1px solid rgba(203, 221, 229, .72);
    }
    .ecosystem-header nav {
      gap: 4px;
    }
    .ecosystem-header nav a {
      min-height: 44px;
      padding-inline: 14px;
    }
    .ecosystem-main {
      width: 100%;
      max-width: none;
      overflow: hidden;
    }
    .ecosystem-hero {
      grid-template-columns: minmax(0, 1.04fr) minmax(360px, .78fr);
      min-height: 650px;
      margin-top: 0;
      padding: 68px 0 76px;
      gap: clamp(42px, 6vw, 80px);
    }
    .ecosystem-hero .hero-copy {
      max-width: 700px;
    }
    .ecosystem-hero h1 {
      max-width: 680px;
      margin: 18px 0 22px;
      font-size: clamp(3.4rem, 5.8vw, 5.25rem);
      line-height: .98;
      letter-spacing: -.052em;
    }
    .ecosystem-hero .landing-lead {
      max-width: 660px;
      margin-bottom: 28px;
      font-size: 1.14rem;
      line-height: 1.65;
    }
    .ecosystem-hero .landing-badge {
      border-color: #e0c28d;
      background: #fff8e8;
      color: #744300;
    }
    .ecosystem-inline-link {
      color: var(--ecosystem-blue-dark);
      font-weight: 850;
      text-underline-offset: 3px;
    }
    .ecosystem-proof {
      position: relative;
      display: grid;
      gap: 12px;
      padding: 28px;
      border: 1px solid var(--ecosystem-line);
      border-radius: 26px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 30px 80px rgba(7, 27, 43, .12);
    }
    .ecosystem-proof::before {
      content: "";
      position: absolute;
      inset: 20px auto 20px 47px;
      width: 1px;
      background: var(--ecosystem-line);
    }
    .ecosystem-proof-heading {
      position: relative;
      display: grid;
      gap: 3px;
      margin-bottom: 4px;
      padding: 0 0 18px 42px;
      border-bottom: 1px solid var(--ecosystem-line);
    }
    .ecosystem-proof-heading span {
      color: var(--ecosystem-gold);
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .ecosystem-proof-heading strong {
      color: var(--ecosystem-navy);
      font-size: 1.18rem;
    }
    .ecosystem-proof article {
      position: relative;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      min-height: 94px;
      padding: 15px 16px 15px 0;
      border-radius: 18px;
    }
    .ecosystem-proof article:hover {
      background: var(--ecosystem-ice);
    }
    .ecosystem-role-mark {
      z-index: 1;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--ecosystem-line);
      border-radius: 13px;
      background: #ffffff;
      color: var(--ecosystem-blue-dark);
      font-size: .82rem;
      font-weight: 900;
    }
    .ecosystem-proof article h3 {
      margin: 0;
      color: var(--ecosystem-navy);
      font-size: 1rem;
      font-weight: 900;
    }
    .ecosystem-proof article p {
      margin: 3px 0 0;
      color: #536678;
      font-size: .9rem;
      line-height: 1.45;
    }
    .ecosystem-proof-footer {
      position: relative;
      margin: 6px 0 0;
      padding: 17px 0 0 42px;
      border-top: 1px solid var(--ecosystem-line);
      color: var(--ecosystem-blue-dark);
      font-size: .82rem;
      font-weight: 850;
    }
    .ecosystem-section {
      padding: 84px 0;
    }
    .ecosystem-section .section-heading {
      max-width: 800px;
      margin-bottom: 36px;
    }
    .ecosystem-section .section-heading h2,
    .ribas-proof-section h2,
    .ecosystem-final h2 {
      margin-bottom: 18px;
      font-size: clamp(2.35rem, 4.2vw, 3.7rem);
      letter-spacing: -.04em;
    }
    .ecosystem-section .section-heading > p:last-child {
      max-width: 690px;
      font-size: 1.06rem;
      line-height: 1.65;
    }
    .ecosystem-route-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .ecosystem-route-card {
      min-height: 370px;
      display: flex;
      flex-direction: column;
      padding: 30px;
      border: 1px solid var(--ecosystem-line);
      border-radius: 24px;
      background: #ffffff;
      box-shadow: 0 18px 48px rgba(7, 27, 43, .07);
    }
    .ecosystem-route-card > span {
      margin-bottom: 42px;
      color: var(--ecosystem-gold);
      font-size: .77rem;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .ecosystem-route-card h3 {
      margin: 0 0 14px;
      color: var(--ecosystem-navy);
      font-size: 1.55rem;
      line-height: 1.15;
    }
    .ecosystem-route-card p {
      margin: 0 0 24px;
      line-height: 1.58;
    }
    .ecosystem-route-card ul {
      display: grid;
      gap: 10px;
      margin: auto 0 0;
      padding: 20px 0 0;
      border-top: 1px solid var(--ecosystem-line);
      list-style: none;
    }
    .ecosystem-route-card li {
      position: relative;
      padding-left: 18px;
      color: #334155;
      font-size: .9rem;
      font-weight: 760;
    }
    .ecosystem-route-card li::before {
      content: "";
      position: absolute;
      top: .58em;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ecosystem-blue);
    }
    .ribas-proof-section {
      width: 100%;
      max-width: none;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(360px, .72fr);
      gap: clamp(42px, 7vw, 92px);
      align-items: center;
      padding: 86px max(24px, calc((100vw - 1180px) / 2));
      background: var(--ecosystem-navy);
      color: #ffffff;
    }
    .ribas-proof-section .section-kicker {
      color: #f0c76a;
    }
    .ribas-proof-section h2 {
      max-width: 660px;
      color: #ffffff;
    }
    .ribas-proof-section > div:first-child > p:not(.section-kicker) {
      max-width: 610px;
      margin-bottom: 28px;
      color: #c9d8e2;
      font-size: 1.04rem;
      line-height: 1.65;
    }
    .ribas-proof-section .button.primary {
      border-color: #ffffff;
      background: #ffffff;
      color: var(--ecosystem-blue-dark);
      box-shadow: none;
    }
    .ribas-proof-list {
      display: grid;
      gap: 10px;
    }
    .ribas-proof-list article {
      display: grid;
      gap: 4px;
      padding: 20px 22px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 18px;
      background: rgba(255, 255, 255, .06);
    }
    .ribas-proof-list h3 {
      margin: 0;
      color: #ffffff;
      font-size: 1rem;
      font-weight: 900;
    }
    .ribas-proof-list span {
      color: #c9d8e2;
      font-size: .9rem;
    }
    .ecosystem-final {
      width: min(880px, calc(100% - 32px));
      display: grid;
      justify-items: center;
      margin: 0 auto;
      padding: 92px 0 104px;
      text-align: center;
    }
    .ecosystem-final h2 {
      max-width: 820px;
      margin-top: 8px;
    }
    .ecosystem-final > p:not(.section-kicker) {
      max-width: 620px;
      font-size: 1.08rem;
    }
    .ecosystem-final .landing-actions {
      justify-content: center;
      margin-top: 18px;
    }
    .ecosystem-landing-page :is(a, button, input, textarea, select, summary):focus-visible {
      outline: 3px solid #0b6b91;
      outline-offset: 3px;
    }
    @media (max-width: 1040px) {
      .ecosystem-hero,
      .ribas-proof-section {
        grid-template-columns: 1fr;
      }
      .ecosystem-hero {
        min-height: 0;
      }
      .ecosystem-proof {
        max-width: 680px;
      }
      .ecosystem-route-grid {
        grid-template-columns: 1fr;
      }
      .ecosystem-route-card {
        min-height: 0;
      }
    }
    @media (max-width: 780px) {
      .ecosystem-header {
        min-height: 68px;
      }
      .ecosystem-hero {
        padding: 44px 0 54px;
      }
      .ecosystem-hero h1 {
        font-size: clamp(2.7rem, 13vw, 3.7rem);
      }
      .ecosystem-proof {
        padding: 22px;
        border-radius: 22px;
      }
      .ecosystem-proof::before {
        left: 41px;
      }
      .ecosystem-section {
        padding: 62px 0;
      }
      .ecosystem-route-card {
        padding: 24px;
        border-radius: 20px;
      }
      .ecosystem-route-card > span {
        margin-bottom: 28px;
      }
      .ribas-proof-section {
        padding: 62px 24px;
      }
      .ecosystem-final {
        padding: 70px 0 82px;
      }
    }
    @media (max-width: 440px) {
      .ecosystem-header {
        width: calc(100% - 24px);
        flex-wrap: nowrap;
      }
      .ecosystem-header nav {
        width: auto;
      }
      .ecosystem-header nav a {
        flex: none;
      }
      .ecosystem-hero {
        width: calc(100% - 24px);
      }
      .ecosystem-hero .landing-actions {
        display: grid;
        grid-template-columns: 1fr;
      }
      .ecosystem-proof article {
        grid-template-columns: 40px minmax(0, 1fr);
        padding-right: 0;
      }
      .ecosystem-proof-footer,
      .ecosystem-proof-heading {
        padding-left: 0;
      }
      .ecosystem-proof::before {
        display: none;
      }
      .ribas-proof-section {
        padding-inline: 18px;
      }
    }
    .superadmin-primary-navigation {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 10px;
      margin: 0 0 18px;
    }
    .superadmin-primary-nav {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
      padding: 6px;
      border: 1px solid #d7e2ea;
      border-radius: 10px;
      background: #ffffff;
    }
    .superadmin-primary-nav a {
      min-height: 46px;
      border: 0;
      background: transparent;
      color: #334155;
      gap: 8px;
    }
    .superadmin-primary-nav a[aria-current] {
      background: #031049;
      color: #ffffff;
    }
    .superadmin-primary-nav a strong {
      min-width: 24px;
      padding: 2px 7px;
      border-radius: 999px;
      background: #e8f1f6;
      color: #031049;
      text-align: center;
      font-size: .78rem;
    }
    .role-view-switch {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border: 1px solid #bdd1dd;
      border-radius: 10px;
      background: #f7fbfd;
      color: #031049;
      text-decoration: none;
      font-size: .82rem;
      font-weight: 800;
    }
    .people-hub {
      grid-column: 1 / -1;
      overflow: visible;
    }
    .people-heading {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 24px;
    }
    .add-person {
      flex: 0 0 auto;
      position: relative;
    }
    .add-person > summary {
      list-style: none;
    }
    .add-person > summary::-webkit-details-marker { display: none; }
    .add-person[open] > form {
      display: grid;
    }
    .add-person > form {
      display: none;
      position: absolute;
      right: 0;
      z-index: 20;
      width: min(420px, calc(100vw - 48px));
      gap: 12px;
      margin-top: 8px;
      padding: 18px;
      border: 1px solid #c9d8e2;
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 20px 50px rgba(7, 19, 33, .18);
    }
    .add-person fieldset {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 12px;
      border: 1px solid #d7e2ea;
      border-radius: 8px;
    }
    .add-person p { margin: 0; color: #475569; font-size: .86rem; }
    .people-filters {
      position: sticky;
      top: 10px;
      z-index: 4;
      display: grid;
      grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(140px, 1fr)) auto auto;
      gap: 10px;
      align-items: end;
      margin: 14px 0 10px;
      padding: 10px;
      border: 1px solid #dbe6ed;
      border-radius: 10px;
      background: #f1f6f9;
      box-shadow: 0 8px 22px rgba(17, 43, 62, .07);
    }
    .people-filters label { gap: 4px; font-size: .76rem; color: #475569; }
    .people-filters input,
    .people-filters select { min-height: 40px; padding: 8px 10px; font-size: .86rem; }
    .people-more-filters { min-width: 132px; }
    .people-more-filters > summary { min-height: 40px; display: flex; align-items: center; padding: 0 11px; border: 1px solid #bdd1dd; border-radius: 8px; cursor: pointer; color: #031049; background: #ffffff; font-size: .84rem; font-weight: 800; }
    .people-more-filters[open] { grid-column: 1 / -1; }
    .people-more-filters[open] > summary { margin-bottom: 10px; }
    .people-filter-secondary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
    .people-clear-filters { min-height: 40px; white-space: nowrap; }
    .people-clear-filters:disabled { opacity: .55; cursor: not-allowed; }
    .people-active-filters { margin: -2px 0 10px; padding: 8px 10px; border-radius: 8px; background: #e8f1f6; color: #031049; font-size: .8rem; font-weight: 800; }
    .people-result-count { margin: 0 0 8px; color: #475569; font-size: .86rem; font-weight: 800; }
    .people-table-heading,
    .person-row-main {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, .7fr) minmax(0, .8fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.2fr);
      gap: 14px;
      align-items: center;
    }
    .people-table-heading {
      padding: 8px 12px;
      color: #64748b;
      font-size: .72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .people-results {
      border: 1px solid #d7e2ea;
      border-radius: 10px;
      overflow: hidden;
    }
    .person-row { background: #ffffff; border-bottom: 1px solid #e2e8f0; }
    .person-row:last-child { border-bottom: 0; }
    .person-row[hidden] { display: none; }
    .person-row-main { padding: 10px 12px; }
    .person-row-main strong { display: block; color: #0f172a; font-size: .88rem; }
    .person-row-main span { display: block; margin-top: 3px; color: #64748b; font-size: .76rem; }
    .person-identity { display: flex; gap: 10px; align-items: center; min-width: 0; }
    .person-identity > div { min-width: 0; }
    .person-identity strong,
    .person-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .person-avatar {
      display: grid !important;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      place-items: center;
      margin: 0 !important;
      border-radius: 50%;
      background: #e8f1f6;
      color: #031049 !important;
      font-weight: 900;
    }
    .person-roles { display: flex; flex-wrap: wrap; gap: 5px; }
    .person-roles span { margin: 0; padding: 4px 7px; border-radius: 999px; background: #eef2f6; color: #334155; font-weight: 800; }
    .person-connection strong { display: flex; align-items: center; gap: 6px; }
    .person-connection i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
    .person-connection.online i { background: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
    .person-profile { border-top: 1px solid #edf2f7; }
    .person-profile > summary { padding: 8px 12px; cursor: pointer; color: #031049; font-size: .82rem; font-weight: 850; }
    .person-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 14px 16px; }
    .person-profile-grid > section { min-width: 0; padding: 14px; border: 1px solid #d7e2ea; border-radius: 8px; background: #f9fbfd; }
    .person-profile-grid h3 { margin: 0 0 10px; font-size: 1rem; }
    .person-profile-grid p { color: #475569; font-size: .84rem; }
    .person-profile-grid dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .person-profile-grid dl div { padding: 9px; border-radius: 6px; background: #ffffff; }
    .person-profile-grid dt { color: #64748b; font-size: .72rem; }
    .person-profile-grid dd { margin: 3px 0 0; color: #0f172a; font-size: .84rem; font-weight: 800; }
    .person-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: start; }
    .person-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
    .person-actions .button { min-height: 38px; padding: 8px 10px; font-size: .8rem; }
    .person-suspend-action { border-color: #b7791f; background: #fff8e8; color: #7c4a03; }
    .person-more-actions { padding: 0; border: 0; }
    .person-more-actions > summary { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; color: #334155; font-size: .8rem; font-weight: 800; background: #ffffff; }
    .person-more-actions[open] { width: 100%; padding: 10px; border: 1px solid #e8d4d4; border-radius: 8px; background: #fffafb; }
    .person-more-actions form { margin-top: 8px; }
    .person-more-actions p { width: 100%; margin: 0; }
    .subtle-danger { border-color: #d8aaaa; background: #ffffff; color: #9f1c1c; }
    .person-inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; align-items: end; margin-top: 10px; }
    .person-inline-form label { font-size: .76rem; }
    .person-inline-form input,
    .person-inline-form select { min-height: 38px; padding: 7px 9px; font-size: .82rem; }
    .person-delete-flow { width: 100%; padding: 10px; border: 1px solid #e7c4c4; border-radius: 8px; background: #fff7f7; }
    .person-delete-flow summary { cursor: pointer; color: #9f1c1c; font-weight: 800; }
    .person-delete-flow form { margin-top: 10px; }
    .person-governed-note { color: #64748b; font-size: .8rem; }
    .control-center-kpis-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .control-center-secondary-nav summary { padding: 10px 12px; cursor: pointer; color: #64748b; font-size: .78rem; font-weight: 800; }
    .control-center-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .superadmin-operations-content { padding-bottom: 34px; }
    [data-superadmin-primary-area][hidden] { display: none; }
    .superadmin-operations-content > .admin-header { padding: 8px 0 18px; }
    .superadmin-operations-content > .people-hub { padding: 20px 22px; }
    .superadmin-area-heading { display: grid; gap: 5px; margin: 0 0 18px; padding: 8px 0 4px; }
    .superadmin-area-heading[hidden] { display: none; }
    .superadmin-area-heading h1 { margin: 0; color: #102338; font-size: clamp(2rem, 3vw, 2.65rem); line-height: 1.05; letter-spacing: -.035em; }
    .superadmin-area-heading p { margin: 0; color: #5f7182; }
    .superadmin-advanced-workspace { margin-top: 18px; border: 1px solid #d7e2ea; border-radius: 12px; background: #ffffff; }
    .superadmin-advanced-workspace > summary { padding: 15px 18px; cursor: pointer; color: #031049; font-weight: 850; }
    .superadmin-advanced-content { padding: 0 18px 18px; }
    .superadmin-advanced-workspace[data-primary-area-active] { margin-top: 0; border: 0; border-radius: 0; background: transparent; }
    .superadmin-advanced-workspace[data-primary-area-active] > summary { display: none; }
    .superadmin-advanced-workspace[data-primary-area-active] > .superadmin-advanced-content { padding: 0; }
    .control-center-home-grid > article { padding: 20px; border: 1px solid #d7e2ea; border-radius: 12px; background: #ffffff; }
    .control-center-first-steps-list { display: grid; gap: 12px; margin: 0; padding-left: 22px; }
    .control-center-first-steps-list li { display: grid; gap: 3px; color: #526779; }
    .control-center-first-steps-list a, .control-center-first-steps-list strong { color: #031049; font-weight: 800; }
    .control-center-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .control-center-quick-actions a { padding: 10px; border-radius: 8px; background: #eef5f8; color: #031049; text-decoration: none; font-weight: 800; }
    .activity-content { display: grid; gap: 18px; }
    .activity-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
    .activity-heading h1 { margin: 4px 0 6px; }
    .activity-heading p { margin: 0; color: #475569; }
    .activity-reliable-from, .activity-partial { margin: 0; padding: 12px 14px; border-radius: 9px; background: #eef6f8; color: #153f55; }
    .activity-partial { background: #fff7e6; color: #74480a; }
    .activity-period-grid, .activity-total-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .activity-period-card, .activity-total-grid article { display: grid; gap: 4px; padding: 16px; border: 1px solid #d7e2ea; border-radius: 11px; background: #fff; text-decoration: none; color: #071321; }
    .activity-period-card.is-current { border-color: #031049; box-shadow: inset 0 0 0 1px #031049; }
    .activity-period-card span, .activity-total-grid span { color: #64748b; font-size: .8rem; font-weight: 800; text-transform: uppercase; }
    .activity-period-card small { color: #475569; }
    .activity-total-grid strong { font-size: 1.65rem; }
    .activity-filters { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 10px; padding: 15px; border: 1px solid #d7e2ea; border-radius: 11px; background: #fff; }
    .activity-filters label { display: grid; gap: 5px; color: #334155; font-size: .78rem; font-weight: 800; }
    .activity-filters input, .activity-filters select { width: 100%; min-height: 40px; }
    .activity-filters button { align-self: end; }
    .activity-table-wrap { overflow-x: auto; border: 1px solid #d7e2ea; border-radius: 11px; background: #fff; }
    .activity-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
    .activity-table th, .activity-table td { padding: 9px 8px; border-bottom: 1px solid #e5edf2; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
    .activity-table th { color: #475569; font-size: .68rem; line-height: 1.25; text-transform: uppercase; }
    .activity-table td { font-size: .82rem; line-height: 1.35; }
    .activity-table td small { display: block; margin-top: 4px; color: #64748b; }
    .activity-empty { padding: 28px; border: 1px dashed #b9c8d3; border-radius: 11px; text-align: center; background: #fff; }
    .activity-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; color: #475569; font-weight: 750; }
    @media (max-width: 1100px) {
      .activity-filters { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
      .people-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .people-search { grid-column: span 3; }
      .people-more-filters { grid-column: auto; }
      .people-more-filters[open] { grid-column: 1 / -1; }
      .people-filter-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .people-table-heading { display: none; }
      .person-row-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .person-identity { grid-column: 1 / -1; }
      .control-center-kpis-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .people-filters { top: 74px; }
    }
    @media (max-width: 680px) {
      .activity-heading { display: grid; }
      .activity-period-grid, .activity-total-grid, .activity-filters { grid-template-columns: 1fr; }
      .activity-table { min-width: 860px; }
      .people-heading { display: grid; }
      .add-person { width: 100%; }
      .add-person > summary { width: 100%; }
      .add-person > form { position: static; width: 100%; }
      .people-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .people-search { grid-column: span 2; }
      .people-more-filters { grid-column: auto; }
      .people-more-filters[open] { grid-column: 1 / -1; }
      .people-filter-secondary { grid-template-columns: 1fr; }
      .person-row-main,
      .person-profile-grid,
      .person-profile-grid dl,
      .control-center-home-grid { grid-template-columns: 1fr; }
      .person-identity { grid-column: auto; }
      .control-center-kpis-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }