:root {
  --bg: #f7fbff;
  --surface: #ffffff;
  --surface-soft: #eef7ff;
  --ink: #152338;
  --muted: #66758a;
  --line: #d8e7f5;
  --primary: #2f80ed;
  --primary-dark: #1d63c7;
  --accent: #21a67a;
  --danger: #c2410c;
  --warn: #b7791f;
  --ok: #15803d;
  --shadow: 0 18px 42px rgba(32, 88, 146, 0.12);
  --soft-shadow: 0 8px 22px rgba(32, 88, 146, 0.08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(47, 128, 237, .14), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(33, 166, 122, .12), transparent 28rem),
    var(--bg);
}
a { color: var(--primary); text-decoration: none; }
h2 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.2; }
h3 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.25; }
p { line-height: 1.35; }
.icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 22px; border-bottom: 1px solid rgba(216, 231, 245, .72);
  background: rgba(255,255,255,0.94); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 850; }
.brand-mark {
  display: grid; width: 34px; height: 34px; place-items: center;
  overflow: hidden;
  border-radius: 10px; color: white;
  background: #0b3268;
  box-shadow: var(--soft-shadow);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nav { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted); font-weight: 750;
  padding: 6px 9px; border-radius: 999px;
}
.nav a:hover { color: var(--primary); background: #edf6ff; }
.nav a[aria-current="page"] { color: var(--primary-dark); background: #eaf4ff; }
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 999px; background: white; box-shadow: var(--soft-shadow);
}
.user-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.user-details { display: grid; line-height: 1.05; }
.user-details strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.user-details small { margin-top: 3px; font-size: .72rem; }
.user-chip a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.user-chip small, .muted { color: var(--muted); }

.shell { width: calc(100% - 4cm); max-width: none; margin: 12px auto 24px; }
.page-title { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.page-title h1 { margin: 0; line-height: 1.08; font-size: clamp(1.55rem, 2.25vw, 2.1rem); }
.hero-panel h1 { margin: 0; line-height: 1.08; font-size: clamp(1.65rem, 2.5vw, 2.3rem); }
.page-title p { margin-top: 6px; margin-bottom: 0; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.eyebrow { margin: 0 0 5px; color: var(--primary); font-weight: 850; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }

.login-grid, .install-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: 16px; align-items: center; }
.hero-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 18px;
  color: white;
  background:
    linear-gradient(135deg, rgba(21, 67, 128, .96), rgba(47, 128, 237, .94)),
    linear-gradient(45deg, rgba(255,255,255,.18), transparent);
  box-shadow: var(--shadow);
}
.hero-panel::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  bottom: -80px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.hero-panel p { color: rgba(255,255,255,.86); font-size: 1rem; }

.install-page {
  min-height: 100dvh;
  overflow-x: hidden;
}
.install-page .topbar {
  min-height: 56px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.install-page .shell {
  display: grid;
  width: calc(100% - 4cm);
  max-width: none;
  min-height: calc(100dvh - 56px);
  height: calc(100dvh - 56px);
  margin: 0 auto;
  padding: clamp(8px, 1.7vh, 14px) 0;
  align-items: center;
  overflow: hidden;
}
.install-page .install-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  grid-template-columns: minmax(320px, 1.05fr) minmax(420px, .95fr);
  gap: clamp(14px, 2.2vw, 28px);
  align-items: stretch;
}
.install-page .hero-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3vw, 34px);
}
.install-page .install-showcase {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  justify-content: center;
  gap: clamp(10px, 1.7vh, 18px);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 72%, rgba(111, 237, 208, .24), transparent 28%),
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .2), transparent 30%),
    linear-gradient(145deg, #092b5d 0%, #1f66ba 55%, #167579 100%);
}
.install-page .install-showcase::after {
  width: 280px;
  height: 280px;
  right: -94px;
  bottom: -118px;
  background: rgba(255,255,255,.13);
}
.install-brand-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  color: white;
  background: rgba(255,255,255,.13);
  box-shadow: 0 12px 28px rgba(5, 20, 45, .18);
}
.install-brand-pill img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  object-fit: cover;
  background: #ffffff;
}
.install-brand-pill strong {
  font-size: 1.08rem;
}
.install-page .install-showcase .eyebrow {
  position: relative;
  z-index: 1;
  margin-top: clamp(8px, 1.6vh, 18px);
  color: rgba(255,255,255,.76);
}
.install-page .install-showcase h1 {
  position: relative;
  z-index: 1;
  max-width: 650px;
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  letter-spacing: 0;
}
.install-lead {
  position: relative;
  z-index: 1;
  max-width: 590px;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: clamp(.98rem, 1.4vw, 1.1rem);
}
.install-tagline {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  margin: 0;
  padding: 11px 13px;
  border-left: 4px solid rgba(111, 237, 208, .88);
  border-radius: 0 14px 14px 0;
  color: #ffffff;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 850;
  line-height: 1.25;
  background: rgba(255,255,255,.12);
}
.install-value-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.install-value-list span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color: rgba(255,255,255,.92);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  background: rgba(255,255,255,.11);
}
.install-dashboard-preview {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.13);
  box-shadow: 0 22px 52px rgba(5, 20, 45, .22);
  backdrop-filter: blur(12px);
}
.install-dashboard-head {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.install-dashboard-head span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.54);
}
.install-dashboard-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}
.install-kpi {
  min-width: 0;
  padding: 9px;
  border-radius: 13px;
  background: rgba(255,255,255,.13);
}
.install-kpi strong {
  display: block;
  color: white;
  font-size: 1.45rem;
  line-height: 1;
}
.install-kpi span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.7);
  font-size: .78rem;
}
.install-bars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  height: clamp(34px, 7vh, 54px);
  align-items: end;
}
.install-bars i {
  display: block;
  border-radius: 7px 7px 3px 3px;
  background: rgba(111, 237, 208, .82);
}
.install-bars i:nth-child(1) { height: 42%; }
.install-bars i:nth-child(2) { height: 72%; }
.install-bars i:nth-child(3) { height: 58%; }
.install-bars i:nth-child(4) { height: 92%; }
.install-page .install-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 10px;
  width: 100%;
  max-width: 540px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  justify-self: stretch;
  align-self: stretch;
  overflow: auto;
  padding: 12px 14px;
}
.install-page .install-card > .form-intro,
.install-page .install-card > .alert,
.install-page .install-card > .card-title,
.install-page .install-card > .inline-fields,
.install-page .install-card > .btn,
.install-page .install-card > .muted {
  grid-column: 1 / -1;
}
.install-page .install-card > label,
.install-page .install-card .inline-fields > label {
  min-width: 0;
}
.install-page .install-card > label:first-of-type {
  grid-column: 1 / -1;
}
.install-page .install-card .card-title {
  margin: 4px 0 2px;
  font-size: 1.04rem;
}
.install-page .install-card .form-intro {
  gap: 9px;
  padding-bottom: 0;
}
.install-page .install-card .form-intro h2 {
  font-size: 1.12rem;
}
.install-page .install-card .form-intro p,
.install-page .install-card .muted {
  font-size: .86rem;
}
.install-page .install-card .soft-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.install-page .install-card label {
  gap: 4px;
  font-size: .9rem;
}
.install-page .install-card input {
  min-height: 38px;
  padding: 7px 10px;
}
.install-page .install-card .inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.install-page .install-card .btn {
  min-height: 40px;
  margin-top: 2px;
}

/* Acceso */
.auth-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #f4f7fb;
}
.auth-page .topbar {
  position: relative;
  min-height: 64px;
  padding: 12px clamp(20px, 4vw, 64px);
  border-bottom-color: #e5ebf3;
  background: rgba(255,255,255,.96);
}
.auth-page .brand { font-size: .96rem; }
.auth-page .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(47, 128, 237, .2);
}
.auth-page .shell {
  width: calc(100% - 4cm);
  max-width: none;
  margin: 0 auto;
  min-height: calc(100vh - 64px);
  padding: clamp(14px, 2.4vw, 28px) 0;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  align-items: stretch;
  min-height: min(620px, calc(100dvh - 112px));
  gap: clamp(16px, 2.5vw, 34px);
}
.auth-layout, .auth-form-side, .auth-card, .auth-field, .auth-input { min-width: 0; }
.auth-showcase {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(255,255,255,.14);
  border-bottom-color: rgba(255,255,255,.28);
  border-radius: 28px;
  color: white;
  background:
    radial-gradient(circle at 90% 12%, rgba(76, 194, 181, .3), transparent 25%),
    radial-gradient(circle at 8% 88%, rgba(66, 135, 245, .32), transparent 30%),
    linear-gradient(145deg, #102f5c 0%, #174b86 52%, #126e7b 100%);
  box-shadow: 0 24px 60px rgba(15, 39, 75, .18);
}
.auth-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom right, black, transparent 72%);
}
.auth-showcase-copy { position: relative; z-index: 1; max-width: 660px; }
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #dff8f4;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
}
.auth-showcase h1 {
  max-width: 610px;
  margin: 0;
  font-size: clamp(1.95rem, 3.05vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.auth-lead {
  max-width: 560px;
  margin: 14px 0 18px;
  color: rgba(255,255,255,.78);
  font-size: clamp(.94rem, 1.12vw, 1.04rem);
  line-height: 1.45;
}
.auth-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 660px;
}
.auth-benefits > div {
  display: flex;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(5, 25, 54, .18);
  backdrop-filter: blur(7px);
}
.auth-benefit-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: #d9fffa;
  background: rgba(62, 203, 177, .2);
}
.auth-benefits p { margin: 0; }
.auth-benefits strong { display: block; font-size: .85rem; }
.auth-benefits small { display: block; margin-top: 3px; color: rgba(255,255,255,.67); font-size: .75rem; line-height: 1.3; }
.auth-mentor-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(360px, 100%);
  margin-top: 14px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.1);
  box-shadow: 0 18px 45px rgba(5, 20, 45, .16);
  backdrop-filter: blur(10px);
}
.auth-mentor-card img {
  width: 68px;
  height: 78px;
  flex: 0 0 auto;
  border-radius: 15px;
  object-fit: cover;
  object-position: 50% 12%;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 24px rgba(5, 20, 45, .22);
}
.auth-mentor-card strong {
  display: block;
  margin-bottom: 3px;
  font-size: .9rem;
}
.auth-mentor-card span {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: .78rem;
  line-height: 1.35;
}
.auth-preview {
  position: absolute;
  z-index: 0;
  top: 10%;
  right: clamp(-170px, -9vw, -80px);
  width: 235px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  opacity: .55;
  background: rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(5, 20, 45, .28);
  transform: rotate(5deg);
  backdrop-filter: blur(12px);
}
.auth-preview-head { display: flex; gap: 5px; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.auth-preview-head span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); }
.auth-preview-body { padding: 18px; }
.preview-score strong { display: block; font-size: 1.85rem; }
.preview-score span { color: rgba(255,255,255,.72); }
.preview-bars { display: flex; align-items: end; gap: 6px; height: 58px; margin: 14px 0; }
.preview-bars i { width: 20px; border-radius: 5px 5px 2px 2px; background: rgba(111, 237, 208, .78); }
.preview-bars i:nth-child(1) { height: 35%; }
.preview-bars i:nth-child(2) { height: 55%; }
.preview-bars i:nth-child(3) { height: 45%; }
.preview-bars i:nth-child(4) { height: 72%; }
.preview-bars i:nth-child(5) { height: 64%; }
.preview-bars i:nth-child(6) { height: 92%; }
.preview-status { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
.auth-showcase-foot { display: none; }
.auth-form-side {
  display: grid;
  place-items: center;
  padding: clamp(20px, 3.5vw, 48px);
  background:
    radial-gradient(circle at top right, rgba(47,128,237,.08), transparent 22rem),
    #f8fafc;
}
.auth-card {
  width: min(100%, 460px);
  padding: clamp(22px, 2.5vw, 34px);
  border: 1px solid #e1e8f0;
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 28px 70px rgba(27, 54, 93, .12);
}
.auth-back-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 16px;
  padding: 9px 12px;
  border: 1px solid #dbe6f2;
  border-radius: 999px;
  color: #246fdb;
  font-size: .83rem;
  font-weight: 900;
  background: #f6faff;
}
.auth-back-home:hover {
  color: #1758b4;
  background: #eef6ff;
  transform: translateY(-1px);
}
.auth-back-home .icon {
  width: 16px;
  height: 16px;
}
.auth-form-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #edf1f6; }
.auth-form-mark {
  display: grid;
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 18px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, #2f80ed, #21a67a);
  box-shadow: 0 10px 22px rgba(47,128,237,.22);
}
.auth-form-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.auth-form-heading p { margin: 0 0 2px; font-weight: 900; }
.auth-form-heading span:last-child { color: var(--muted); font-size: .86rem; }
.auth-title { margin: 22px 0 18px; }
.auth-title .eyebrow { margin-bottom: 8px; font-size: .72rem; }
.auth-title h2 { margin-bottom: 8px; font-size: clamp(1.7rem, 2.4vw, 2.05rem); letter-spacing: -.025em; }
.auth-title > span { color: var(--muted); line-height: 1.5; }
.auth-field { gap: 7px; margin-top: 14px; color: #27364a; font-size: .9rem; }
.auth-input {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input > .icon {
  position: absolute;
  z-index: 1;
  left: 15px;
  width: 18px;
  height: 18px;
  color: #8492a6;
}
.auth-input input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px 12px 46px;
  border-color: #dbe3ec;
  border-radius: 13px;
  background: #f9fbfd;
}
.auth-input input::placeholder { color: #9aa6b6; }
.auth-input input:focus { background: white; }
.auth-input:focus-within > .icon { color: var(--primary); }
.auth-input input[type="password"], .auth-input input[type="text"] { padding-right: 78px; }
.password-toggle {
  position: absolute;
  z-index: 2;
  right: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  color: var(--primary-dark);
  font-size: .76rem;
  background: transparent;
  box-shadow: none;
}
.password-toggle:hover { transform: none; background: #edf6ff; }
.password-field {
  position: relative;
  display: block;
}
.password-field input {
  padding-right: 86px;
}
.password-field .inline-password-toggle {
  top: 50%;
  transform: translateY(-50%);
}
.password-field .inline-password-toggle:hover {
  transform: translateY(-50%);
}
.auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 13px;
  color: white;
  font-weight: 900;
  background: linear-gradient(105deg, #246fdb, #169b7a);
  box-shadow: 0 14px 28px rgba(36,111,219,.2);
}
.auth-submit:hover { background: linear-gradient(105deg, #1e62c4, #12866a); box-shadow: 0 17px 32px rgba(36,111,219,.27); }
.auth-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  color: #7b8798;
  font-size: .78rem;
}
.auth-error { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }

.setup-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.setup-list span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-weight: 800;
}

.card, .stat-card, .timer-card { border: 1px solid rgba(216, 231, 245, .94); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.card { padding: 14px; }
.install-card, .login-card { max-width: 520px; justify-self: stretch; }
.form-intro { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }
.form-intro h2 { margin: 0 0 2px; font-size: 1.25rem; }
.form-intro p { margin: 0; color: var(--muted); }
.soft-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: var(--soft-shadow);
}
.soft-icon .icon {
  width: 20px;
  height: 20px;
}
.card-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.card-title .icon {
  color: var(--primary);
}
.grid { display: grid; gap: 12px; margin-bottom: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.uneven { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat-card { padding: 12px; transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(32, 88, 146, .14); }
.stat-card span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.stat-card strong { display: block; margin-top: 4px; font-size: 1.45rem; }

.academic-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.mini-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(216, 231, 245, .94);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--soft-shadow);
}
.mini-stat span { color: var(--muted); font-weight: 800; }
.mini-stat span,
.role-card strong,
.workflow-card strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mini-stat strong { font-size: 1.35rem; }

.workflow-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.workflow-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  box-shadow: var(--soft-shadow);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.workflow-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 128, 237, .36);
  background: #ffffff;
}
.workflow-card.active {
  border-color: rgba(47, 128, 237, .55);
  background: linear-gradient(135deg, #ffffff, #eef7ff);
  box-shadow: var(--shadow);
}
.workflow-card.is-locked { opacity: .72; }
.workflow-number {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.workflow-number .icon {
  width: 18px;
  height: 18px;
}
.workflow-card strong { display: block; margin-bottom: 2px; color: var(--ink); }
.workflow-card p { margin: 0; color: var(--muted); }

.academic-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}
.smart-form-panel { min-height: 0; }
.smart-form-panel form {
  margin-top: 10px;
}
.guidance-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,247,255,.94));
}
.guidance-card h2 { margin-top: 0; }
.guidance-card .btn { width: fit-content; }

.role-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.role-card {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 92px;
  align-content: start;
  text-align: left;
  border-radius: 14px;
  padding: 11px;
  background: rgba(255,255,255,.74);
}
.role-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--primary-dark);
  background: #eaf4ff;
}
.role-icon .icon { width: 20px; height: 20px; }
.role-card.active {
  border-color: rgba(47, 128, 237, .58);
  background: linear-gradient(135deg, #ffffff, #eef7ff);
  box-shadow: var(--shadow);
}
.role-count {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 12px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.role-card strong { color: var(--ink); }
.role-card small { color: var(--muted); line-height: 1.35; }

@media (min-width: 701px) {
  .role-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .role-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    min-height: 72px;
    align-content: center;
    align-items: center;
    padding: 9px 12px;
  }
  .role-card .role-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
  }
  .role-card strong { grid-column: 2; grid-row: 1; align-self: end; }
  .role-card small { grid-column: 2; grid-row: 2; align-self: start; }
  .role-card .role-count {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    align-self: center;
  }
}

.user-admin-layout {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  gap: 12px;
  align-items: start;
}
.user-list-card {
  min-width: 0;
}
.users-table td {
  vertical-align: middle;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}
.user-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: break-word;
}
.avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: white;
  font-weight: 900;
  background: linear-gradient(135deg, #2f80ed, #21a67a);
}
.role-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 10px;
  color: #22577a;
  font-size: .85rem;
  font-weight: 850;
  background: #edf6ff;
  white-space: nowrap;
}

.form-grid { display: grid; gap: 10px; }
.narrow { max-width: 720px; }
label { display: grid; gap: 5px; font-weight: 500; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  background: #fbfdff;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(47, 128, 237, .72);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, .12);
}
input[type="file"] {
  padding: 7px 10px;
  background: #ffffff;
}
.field-help {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 500;
}
textarea { resize: vertical; }
.inline-fields, .section-head, .meta-row, .record-controls, .filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-fields > label { flex: 1 1 160px; }
.list-filter {
  width: 100%;
  margin: 10px 0 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-items: end;
}
.list-filter > label {
  flex: 1 1 190px;
  max-width: 300px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.list-filter > label.filter-search { flex-basis: 250px; }
.list-filter .btn { margin-bottom: 1px; }
.pagination-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pagination-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.checkbox-line, .radio-line { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.checkbox-line input, .radio-line input { width: auto; }

.btn, button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 38px; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 13px; color: var(--ink); font: inherit; font-weight: 850;
  cursor: pointer; background: white; box-shadow: var(--soft-shadow);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover, button:hover { transform: translateY(-1px); }
.btn.primary, button.primary { border-color: transparent; color: white; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.btn.primary:hover, button.primary:hover { background: var(--primary-dark); }
.btn.excel {
  color: #166534;
  border-color: #bbf7d0;
  background: #ecfdf5;
}
.btn.excel:hover {
  background: #dcfce7;
}
.btn.manual-download {
  color: #155293;
  border-color: #cfe3fb;
  background: #f4f9ff;
}
.btn.manual-download:hover {
  background: #eaf4ff;
}
.btn.danger { border-color: var(--danger); color: white; background: var(--danger); }
.btn.danger.ghost,
button.danger.ghost {
  color: #9a3412;
  border-color: #fed7aa;
  background: #fff7ed;
}
button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
button:disabled:hover {
  transform: none;
}

.alert { padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-weight: 750; }
.alert-error { color: #7c2d12; background: #ffedd5; }
.alert-success { color: #14532d; background: #dcfce7; }
.flash-toast-region {
  position: fixed;
  z-index: 120;
  top: 16px;
  right: 16px;
  display: grid;
  gap: 9px;
  width: min(430px, calc(100% - 32px));
  pointer-events: none;
}
.flash-toast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid rgba(20, 83, 45, .16);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(16, 45, 78, .2);
  pointer-events: auto;
  animation: flash-toast-in .22s ease-out;
}
.flash-toast.alert-error { border-color: rgba(154, 52, 18, .18); }
.flash-toast.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.flash-toast-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  margin: -5px -6px -5px 0;
  border: 0;
  border-radius: 9px;
  padding: 0;
  color: currentColor;
  font-size: 1.25rem;
  line-height: 1;
  background: transparent;
  box-shadow: none;
}
.flash-toast-close:hover { transform: none; background: rgba(255,255,255,.55); }
@keyframes flash-toast-in { from { opacity: 0; transform: translateY(-10px); } }
.session-timeout-alert {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 18px;
  display: flex;
  width: min(430px, calc(100% - 28px));
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(183, 121, 31, .26);
  border-radius: 16px;
  background: #fff7ed;
  box-shadow: 0 24px 54px rgba(27, 54, 93, .18);
  color: #7c2d12;
}
.session-timeout-alert[hidden] { display: none; }
.session-timeout-alert > div { display: grid; gap: 3px; min-width: 0; }
.session-timeout-alert strong { font-size: .96rem; }
.session-timeout-alert span { color: #9a3412; line-height: 1.35; }
.session-timeout-alert .btn { flex: 0 0 auto; white-space: nowrap; }
.report-pending-toast {
  position: fixed;
  z-index: 150;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(430px, calc(100% - 32px));
  padding: 22px 24px;
  border: 1px solid rgba(33, 166, 122, .22);
  border-radius: 16px;
  color: #12365f;
  line-height: 1.45;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  box-shadow: 0 24px 70px rgba(9, 35, 70, .28);
  transform: translate(-50%, -50%);
  animation: report-pending-in .18s ease-out;
}
.report-pending-toast strong {
  font-size: 1.08rem;
}
.report-pending-toast > span:not(.report-pending-icon) {
  max-width: 340px;
  color: #526f89;
  font-size: .92rem;
}
.report-pending-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 900;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 10px 24px rgba(47, 128, 237, .24);
}
.report-pending-toast.is-leaving {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 8px));
  transition: opacity .18s ease, transform .18s ease;
}
@keyframes report-pending-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 8px)); }
}
.alert-item { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.alert-item span { color: var(--muted); }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.empty { color: var(--muted); text-align: center; }

.status, .pill { display: inline-flex; border-radius: 999px; padding: 4px 9px; color: var(--primary); font-size: .8rem; font-weight: 850; background: #e8f1ff; }
.pill.danger { color: #9a3412; background: #ffedd5; }
.pill.warn { color: #92400e; background: #fef3c7; }
.pill.ok { color: #166534; background: #dcfce7; }
.legend { display: grid; gap: 10px; }
.steps { padding-left: 22px; }
.steps li { margin: 8px 0; }

.question-box { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fbfdff; }
.question-box legend { padding: 0 6px; font-weight: 850; }
.text-list { display: grid; gap: 9px; }
.text-item { border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: #fbfdff; }
.text-item h3 { margin: 0 0 4px; }
.item-actions { margin-top: 8px; }
.table-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.compact-actions {
  gap: 5px;
  flex-wrap: nowrap;
}
.compact-actions form {
  display: inline-flex;
  margin: 0;
}
.compact-actions .btn {
  width: 38px;
  min-width: 38px;
  padding: 0;
}
.compact-actions .icon {
  width: 18px;
  height: 18px;
}
.inline-action-form { display: inline-flex; margin: 0; }
.btn.icon-only {
  width: 38px;
  min-width: 38px;
  padding: 0;
  justify-content: center;
}
.btn.icon-only .icon { width: 18px; height: 18px; }
.report-row-actions { flex-wrap: nowrap; align-items: center; }
.report-row-actions .inline-action-form { flex: 0 0 auto; }

.text-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 12px;
  align-items: start;
}
.text-builder {
  min-width: 0;
}
.builder-section {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
}
.builder-section h3 {
  margin-bottom: 0;
}
.question-accordion {
  display: grid;
  gap: 7px;
}
.ai-question-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px auto minmax(180px, .8fr);
  gap: 9px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(47, 128, 237, .22);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #eef7ff);
}
.ai-question-panel strong {
  display: block;
  margin-bottom: 2px;
}
.ai-question-panel label {
  gap: 4px;
}
.ai-status {
  align-self: center;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 750;
}
.ai-status[data-tone="ok"] {
  color: var(--ok);
}
.ai-status[data-tone="error"] {
  color: var(--danger);
}
.question-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}
.question-details summary {
  cursor: pointer;
  padding: 9px 11px;
  font-weight: 800;
  color: var(--ink);
  background: #f4f9ff;
}
.question-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.answer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.builder-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.text-library {
  min-width: 0;
}
.text-library-list {
  display: grid;
  gap: 8px;
}
.text-library-list.is-scrollable {
  max-height: min(560px, 68vh);
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.text-library-list.is-scrollable::-webkit-scrollbar { width: 9px; }
.text-library-list.is-scrollable::-webkit-scrollbar-track { background: #eef6ff; border-radius: 999px; }
.text-library-list.is-scrollable::-webkit-scrollbar-thumb { background: #9cc8ee; border-radius: 999px; }
.text-scroll-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.35;
}
.text-library-tabs,
.text-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.text-bulk-form {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7fbff;
}
.text-library-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fbfdff;
}
.text-library-item.is-deleted {
  border-color: #fed7aa;
  background: #fff7ed;
}
.text-select-box {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
}
.text-select-box input {
  width: 18px;
  height: 18px;
}
.text-library-item h3 {
  margin-bottom: 2px;
}
.text-library-item p {
  margin: 0 0 6px;
  color: var(--muted);
}

.reading-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(480px, .75fr); gap: 14px; }
.reading-card { min-height: 0; }
.reading-text {
  min-height: 220px;
  max-height: none;
  overflow: visible;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1.08rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  background: #fbfdff;
}
.reading-font-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
}
.reading-font-tools .btn {
  min-height: 32px;
  padding: 5px 8px;
  border-radius: 8px;
  font-weight: 850;
}
.reading-font-tools .btn.icon-only {
  width: 34px;
  min-width: 34px;
  padding: 0;
}
.reading-font-tools > span {
  min-width: 42px;
  color: var(--muted);
  text-align: center;
  font-size: .78rem;
  font-weight: 800;
}
.reading-focus-font-tools {
  align-self: flex-start;
  background: #ffffff;
}
.reading-time-tools { display: flex; gap: 10px; align-items: stretch; }
.duration-control {
  display: grid;
  gap: 4px;
  min-width: 210px;
  padding: 9px 12px;
  border: 1px solid rgba(216, 231, 245, .94);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
}
.duration-control > span { color: var(--muted); font-size: .76rem; font-weight: 850; }
.duration-control > small { color: var(--muted); font-size: .68rem; font-weight: 650; }
.duration-fields { display: flex; gap: 6px; align-items: center; }
.duration-fields > span { color: var(--muted); font-size: 1.1rem; font-weight: 900; }
.duration-fields label { display: flex; gap: 5px; align-items: center; }
.duration-fields input { width: 58px; padding: 6px 8px; text-align: center; }
.duration-fields small { color: var(--muted); font-size: .72rem; }
.timer-card { min-width: 110px; padding: 10px 14px; text-align: center; }
.timer-card strong { display: block; font-size: 1.45rem; }
.timer-card strong small { color: var(--muted); font-size: .72rem; font-weight: 750; }
.reading-focus-dialog {
  width: calc(100vw - 48px);
  height: calc(100vh - 48px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 30px 90px rgba(9, 35, 70, .35);
}
.reading-focus-dialog::backdrop {
  background: rgba(7, 22, 42, .58);
  backdrop-filter: blur(4px);
}
.reading-focus-dialog[open] { display: block; }
.reading-focus-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  height: 100%;
  padding: 22px;
}
.reading-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.reading-focus-head h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}
.reading-focus-head span {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 750;
}
.reading-focus-head-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.reading-focus-timer {
  display: grid;
  gap: 1px;
  min-width: 94px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  background: #fbfdff;
}
.reading-focus-timer > span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
}
.reading-focus-timer strong {
  font-size: 1rem;
  line-height: 1.1;
}
.reading-focus-timer small {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 750;
}
.reading-focus-text {
  min-height: 0;
  overflow: auto;
  padding: clamp(18px, 3vw, 42px);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 1.35rem;
  line-height: 1.8;
  background: #fbfdff;
  overflow-wrap: anywhere;
}
.reading-focus-controls {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.reading-focus-controls .status { margin-left: auto; }
.reading-focus-report-message {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 2;
  width: min(430px, calc(100% - 48px));
}
.reading-focus-report-message[hidden] {
  display: none !important;
}
.reading-summary-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}
.reading-summary-card h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: .96rem;
}
.summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.summary-head > strong {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #126b58;
  font-size: 1.35rem;
}
.summary-head small { color: var(--muted); font-size: .72rem; }
.result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.result-grid span { padding: 8px; border: 1px solid var(--line); border-radius: 12px; text-align: center; background: #fbfdff; }
.result-grid strong { display: block; font-size: 1.2rem; }
.grade-grid { grid-template-columns: 1fr; }
.result-grid .grade-preview { color: #14532d; background: #ecfdf5; }
.result-grid .grade-preview small { display: block; margin-top: 3px; font-size: .68rem; line-height: 1.2; }
.prosody-summary { background: #f3fbf8; border-color: #b9dfd3; }
.prosody-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prosody-grid span {
  min-width: 0;
  padding: 8px;
  border: 1px solid #cce9df;
  border-radius: 12px;
  text-align: center;
  background: #fbfffd;
}
.prosody-grid strong {
  display: block;
  color: #126b58;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.marked-transcript {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
}
.marked-transcript-head {
  display: grid;
  gap: 2px;
}
.marked-transcript-head strong {
  color: var(--primary-dark);
  font-size: .92rem;
}
.marked-transcript-head span {
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.25;
}
.marked-transcript-words {
  display: flex;
  max-height: 156px;
  overflow: auto;
  flex-wrap: wrap;
  gap: 3px 4px;
  align-content: flex-start;
  padding: 7px;
  border: 1px solid #e5eef8;
  border-radius: 10px;
  background: white;
}
.reading-word {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: .86rem;
  line-height: 1.08;
}
.reading-word.is-ok { background: #f8fafc; color: #334155; }
.reading-word.is-misread {
  border-color: #fecaca;
  color: #7f1d1d;
  background: #fee2e2;
}
.reading-word.is-intonation {
  border-color: #fde68a;
  color: #713f12;
  background: #fef3c7;
}
.reading-word.is-empty {
  color: var(--muted);
  background: #f8fafc;
}
.automatic-prosody-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #b9dfd3;
  border-radius: 12px;
  background: #f3fbf8;
}
.prosody-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.prosody-metrics-grid span {
  min-width: 0;
  padding: 8px;
  border: 1px solid #cce9df;
  border-radius: 10px;
  color: #126b58;
  text-align: center;
  background: #fbfffd;
}
.prosody-metrics-grid strong {
  display: block;
  font-size: 1.06rem;
  overflow-wrap: anywhere;
}
.prosody-metrics-grid small {
  margin-left: 2px;
  color: var(--muted);
  font-size: .72rem;
}
.prosody-metrics-grid .prosody-level { grid-column: 1 / -1; }
.comprehension-panel { grid-column: 1 / -1; }
.rubric-panel { grid-column: 1 / -1; }
.rubric-total {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 13px;
  border-radius: 12px;
  color: white;
  background: linear-gradient(135deg, #1d63c7, #158f78);
}
.rubric-total strong { font-size: 1.7rem; line-height: 1; }
.rubric-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #b9dfd3;
  border-radius: 14px;
  background: #effbf7;
}
.rubric-category span { color: var(--muted); font-weight: 800; }
.rubric-category strong { color: #126b58; font-size: 1.05rem; }
.rubric-category small { color: #345f57; }
.rubric-indicators { display: grid; gap: 7px; }
.rubric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr);
  gap: 12px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
}
.rubric-row > span { font-weight: 750; }
.rubric-auto-row strong { color: var(--primary-dark); text-align: right; }
.rubric-scale { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rubric-scale summary { padding: 11px 13px; cursor: pointer; color: var(--primary-dark); font-weight: 850; background: #f3f8fd; }
.rubric-scale .table-wrap { padding: 0 10px 10px; }
.app-confirm-dialog {
  width: min(470px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(9, 35, 70, .3);
}
.app-confirm-dialog::backdrop { background: rgba(7, 22, 42, .62); backdrop-filter: blur(4px); }
.app-confirm-dialog[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 22px; }
.app-confirm-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 900;
  background: #c2410c;
}
.app-confirm-copy h2 { margin-bottom: 7px; }
.app-confirm-copy > p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.5; }
.app-confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.permission-dialog {
  width: min(460px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: white;
  box-shadow: 0 28px 80px rgba(9, 35, 70, .3);
}
.permission-dialog::backdrop { background: rgba(7, 22, 42, .62); backdrop-filter: blur(4px); }
.permission-dialog[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 22px; }
.permission-dialog-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.permission-dialog-icon .icon { width: 23px; height: 23px; }
.permission-dialog-copy h2 { margin-bottom: 7px; }
.permission-dialog-copy > p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.5; }
.permission-note { margin-top: 12px; padding: 10px 11px; border-radius: 11px; color: #36546f; font-size: .86rem; line-height: 1.4; background: #edf6ff; }
.permission-note.is-warning { color: #854d0e; background: #fef3c7; }
.permission-note.is-error { color: #9a3412; background: #ffedd5; }
.permission-help-link { display: inline-flex; margin-top: 11px; font-weight: 850; }
.permission-dialog-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.result-processing-dialog {
  width: min(470px, calc(100% - 28px));
  padding: 24px;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: white;
  box-shadow: 0 28px 80px rgba(9, 35, 70, .3);
}
.result-processing-dialog::backdrop { background: rgba(7, 22, 42, .68); backdrop-filter: blur(4px); }
.result-processing-dialog[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; align-items: start; }
.result-processing-dialog h2 { margin: 3px 0 7px; font-size: 1.35rem; }
.result-processing-dialog p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.5; }
.result-processing-dialog > .btn { grid-column: 1 / -1; justify-self: end; }
.result-processing-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.result-processing-dialog.is-ready .result-processing-icon::before { content: "✓"; font-size: 1.6rem; font-weight: 900; }
.result-processing-dialog.is-error .result-processing-icon { background: #c2410c; }
.result-processing-dialog.is-error .result-processing-icon::before { content: "!"; font-size: 1.6rem; font-weight: 900; }
.result-processing-dialog.is-ready .loading-spinner,
.result-processing-dialog.is-error .loading-spinner { display: none; }
.loading-spinner {
  width: 23px;
  height: 23px;
  border: 3px solid rgba(255,255,255,.42);
  border-top-color: white;
  border-radius: 50%;
  animation: result-spin .8s linear infinite;
}
@keyframes result-spin { to { transform: rotate(360deg); } }
.risk-row { background: #fff7ed; }
audio { max-width: 220px; }
.audio-play-button {
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}
.audio-play-button:hover { transform: translateY(-1px); }
.audio-player-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 28px 80px rgba(9, 35, 70, .32);
}
.audio-player-dialog::backdrop {
  background: rgba(7, 22, 42, .62);
  backdrop-filter: blur(4px);
}
.audio-player-dialog[open] {
  display: grid;
  gap: 16px;
  padding: 20px;
}
.audio-player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.audio-player-head h2 {
  margin: 2px 0 0;
  font-size: 1.15rem;
}
.audio-player-control {
  width: 100%;
  max-width: none;
}
.audio-player-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.center { text-align: center; }
.certificate-layout { display: grid; min-height: calc(100vh - 110px); place-items: center; padding: 20px 0; }
.certificate-card { width: min(680px, 100%); padding: clamp(22px, 4vw, 38px); border-radius: 22px; }
.certificate-card h1 { margin: 10px 0; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.certificate-download { width: 100%; min-height: 50px; margin: 14px 0 18px; }
.certificate-steps { display: grid; gap: 12px; padding-left: 24px; }
.certificate-steps li { padding-left: 4px; }
.certificate-steps strong, .certificate-steps span { display: block; }
.certificate-steps span { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.https-address { display: block; margin: 18px 0 10px; padding: 13px; border-radius: 12px; text-align: center; font-size: 1.08rem; font-weight: 900; background: #edf6ff; }
.certificate-hosting-note {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d7e8f8;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f6fbff);
}
.certificate-hosting-note h2 {
  margin: 0;
  color: #10233d;
}
.certificate-hosting-note p,
.certificate-hosting-note span {
  margin: 0;
  color: #55708f;
  line-height: 1.4;
}
.certificate-hosting-note span {
  font-weight: 800;
}
.settings-page .page-title { margin-bottom: 6px; }
.settings-page .page-title p { margin-top: 3px; }
.settings-grid { display: grid; grid-template-columns: minmax(280px, .84fr) minmax(420px, 1.16fr); gap: 10px; align-items: start; }
.settings-column { display: grid; gap: 10px; align-content: start; min-width: 0; }
.settings-card { display: grid; gap: 8px; min-width: 0; }
.settings-page .settings-card { padding: 10px; }
.settings-page .settings-card .form-intro { gap: 7px; align-items: flex-start; padding-bottom: 0; }
.settings-page .settings-card .form-intro h2 { font-size: 1.02rem; }
.settings-page .settings-card .form-intro p { font-size: .8rem; line-height: 1.22; }
.settings-page .settings-card .soft-icon { width: 32px; height: 32px; border-radius: 10px; }
.settings-page .settings-card .soft-icon .icon { width: 16px; height: 16px; }
.settings-page .settings-card .form-grid { gap: 7px; }
.settings-page .settings-card label { gap: 3px; font-size: .86rem; }
.settings-page .settings-card input,
.settings-page .settings-card select,
.settings-page .settings-card textarea { min-height: 34px; padding: 6px 8px; }
.settings-page .settings-card textarea { min-height: 58px; }
.settings-general-form,
.settings-establishment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-general-card {
  position: relative;
  overflow: hidden;
  border-color: #b9dafb;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.98));
  box-shadow: 0 18px 38px rgba(25, 92, 156, .12);
}
.settings-general-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #2f80ed, #20a784, #7dd3fc);
}
.settings-general-card .form-intro {
  position: relative;
  margin: 2px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(185, 218, 251, .9);
  border-radius: 13px;
  background: #f6fbff;
}
.settings-general-card .soft-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(47,128,237,.18);
}
.settings-general-card .form-intro h2 {
  color: #10233d;
  font-size: 1.08rem;
}
.settings-general-card .form-intro p {
  color: #55708f;
}
.settings-general-form {
  gap: 10px 12px;
}
.settings-general-form label {
  position: relative;
  padding: 10px;
  border: 1px solid #d7e8f8;
  border-radius: 13px;
  color: #17324d;
  background: rgba(255,255,255,.86);
}
.settings-general-form label:focus-within {
  border-color: #8ac3fb;
  box-shadow: 0 0 0 3px rgba(47,128,237,.12);
}
.settings-general-form input,
.settings-general-form textarea {
  border-color: #c6dcf2;
  border-radius: 10px;
  background: #fbfdff;
}
.settings-general-form input:focus,
.settings-general-form textarea:focus {
  background: #ffffff;
}
.settings-general-form > .settings-wide-field,
.settings-general-form > button,
.settings-establishment-form > .insignia-editor,
.settings-establishment-form > .checkbox-line,
.settings-establishment-form > label,
.settings-establishment-form > .inline-fields,
.settings-establishment-form > button { grid-column: 1 / -1; }
.settings-general-form > button,
.settings-session-form > button,
.settings-establishment-form > button,
.settings-rubric-form > button { justify-self: start; }
.settings-selector { padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #f6faff; }
.insignia-editor { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 9px; align-items: center; }
.insignia-preview {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #aac2d8;
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
  background: #f7fbff;
}
.insignia-preview img { width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.insignia-preview .icon { width: 25px; height: 25px; }
.insignia-preview span { margin-top: -22px; font-size: .75rem; font-weight: 750; }
.settings-duration { display: flex; gap: 7px; align-items: center; }
.settings-duration > span { display: flex; gap: 5px; align-items: center; }
.settings-duration input { width: 58px; text-align: center; }
.settings-duration small { color: var(--muted); }
.settings-general-form .settings-duration {
  width: fit-content;
  padding: 7px;
  border: 1px solid #d7e8f8;
  border-radius: 14px;
  background: #f6fbff;
}
.settings-general-form .settings-duration input {
  width: 62px;
  min-height: 38px;
  border-radius: 10px;
  font-weight: 850;
}
.settings-general-form .settings-duration strong {
  color: #5b7896;
  font-size: 1.15rem;
}
.settings-general-form .field-help {
  margin-top: 3px;
  color: #5a7390;
}
.settings-general-form > button {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(33, 166, 122, .18);
}
.settings-session-card,
.settings-status-card,
.settings-identity-card,
.settings-rubric-card {
  position: relative;
  overflow: hidden;
  border-color: #cfe1f3;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,255,.96));
  box-shadow: 0 14px 30px rgba(25, 92, 156, .09);
}
.settings-session-card::before,
.settings-status-card::before,
.settings-identity-card::before,
.settings-rubric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
}
.settings-session-card::before { background: linear-gradient(90deg, #0ea5e9, #22c55e); }
.settings-status-card::before { background: linear-gradient(90deg, #2563eb, #06b6d4); }
.settings-identity-card::before { background: linear-gradient(90deg, #21a67a, #84cc16); }
.settings-rubric-card::before { background: linear-gradient(90deg, #2f80ed, #f59e0b); }
.settings-session-card .form-intro,
.settings-identity-card .form-intro,
.settings-rubric-card .form-intro {
  margin: 2px 0 4px;
  padding: 10px 12px;
  border: 1px solid #d7e8f8;
  border-radius: 13px;
  background: #f7fbff;
}
.settings-session-card .soft-icon,
.settings-identity-card .soft-icon,
.settings-rubric-card .soft-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.settings-session-card .soft-icon { background: linear-gradient(135deg, #0ea5e9, #22c55e); }
.settings-identity-card .soft-icon { background: linear-gradient(135deg, #21a67a, #84cc16); }
.settings-rubric-card .soft-icon { background: linear-gradient(135deg, #2f80ed, #f59e0b); }
.settings-session-card label,
.settings-establishment-form label,
.settings-rubric-form label {
  padding: 10px;
  border: 1px solid #d7e8f8;
  border-radius: 13px;
  background: rgba(255,255,255,.88);
}
.settings-session-card label:focus-within,
.settings-establishment-form label:focus-within,
.settings-rubric-form label:focus-within {
  border-color: #8ac3fb;
  box-shadow: 0 0 0 3px rgba(47,128,237,.11);
}
.settings-session-card input,
.settings-establishment-form input,
.settings-establishment-form select,
.settings-rubric-form input {
  border-color: #c6dcf2;
  border-radius: 10px;
  background: #fbfdff;
}
.settings-session-card .settings-duration {
  width: fit-content;
  padding: 7px;
  border: 1px solid #d7e8f8;
  border-radius: 14px;
  background: #f6fbff;
}
.settings-session-card .settings-duration input {
  width: 70px;
  min-height: 38px;
  border-radius: 10px;
  font-weight: 850;
}
.settings-status-card {
  gap: 10px;
}
.settings-status-card .card-title {
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid #d7e8f8;
  border-radius: 13px;
  color: #10233d;
  background: #f7fbff;
}
.settings-status-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.settings-status-list > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid #d7e8f8;
  border-radius: 12px;
  background: #ffffff;
}
.settings-status-list strong {
  color: #17324d;
}
.settings-status-list em { font-style: normal; }
.settings-ssl-actions {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #d7e8f8;
  border-radius: 13px;
  background: #f6fbff;
}
.settings-ssl-actions .btn {
  justify-self: start;
}
.settings-ssl-actions small {
  color: #5a7390;
  line-height: 1.35;
}
.settings-selector {
  border-color: #c6dcf2;
  border-radius: 13px;
  background: #f7fbff;
}
.settings-selector label {
  padding: 0;
  border: 0;
  background: transparent;
}
.settings-establishment-form .inline-fields {
  padding: 10px;
  border: 1px solid #d7e8f8;
  border-radius: 13px;
  background: rgba(255,255,255,.88);
}
.settings-establishment-form .inline-fields label {
  padding: 0;
  border: 0;
  background: transparent;
}
.settings-establishment-form > button,
.settings-session-form > button,
.settings-rubric-form > button {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(33, 166, 122, .16);
}
.insignia-editor {
  padding: 10px;
  border: 1px solid #d7e8f8;
  border-radius: 14px;
  background: #f7fbff;
}
.insignia-editor label {
  padding: 0;
  border: 0;
  background: transparent;
}
.insignia-preview {
  border-color: #b9dafb;
  background:
    linear-gradient(180deg, #ffffff, #eef7ff);
  box-shadow: 0 10px 22px rgba(25, 92, 156, .1);
}
.rubric-settings-block {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #d7e8f8;
  border-radius: 14px;
  background: #f7fbff;
}
.rubric-settings-block h3 {
  margin: 0;
  font-size: .9rem;
}
.rubric-block-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.rubric-block-head span,
.rubric-auto-row span {
  font-size: .78rem;
  font-weight: 800;
  color: var(--primary);
}
.rubric-auto-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid #bfe8dc;
  border-radius: 10px;
  background: #f0fbf7;
}
.rubric-indicator-list {
  display: grid;
  gap: 6px;
}
.rubric-characteristic-row {
  display: grid;
  gap: 7px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid #e6eef6;
  border-radius: 10px;
  background: #fff;
}
.rubric-characteristic-row {
  grid-template-columns: minmax(180px, 1fr) auto auto;
}
.rubric-characteristic-row > span {
  color: var(--primary);
  font-size: .78rem;
  font-weight: 800;
}
.rubric-characteristic-row.is-editing {
  border-color: #9fc7ff;
  background: #f8fbff;
}
.rubric-characteristic-row.is-delete-pending {
  border-color: #fecaca;
  background: #fff7f7;
}
.rubric-characteristic-row.is-delete-pending .rubric-characteristic-name {
  text-decoration: line-through;
  color: #8a1f1f;
}
.rubric-characteristic-name[readonly] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: default;
}
.rubric-characteristic-name:not([readonly]) {
  background: #fff;
}
.rubric-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.rubric-row-actions .btn.icon-only {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}
.rubric-new-indicator .inline-fields {
  align-items: end;
}

@media (max-width: 980px) {
  .login-grid, .install-layout, .grid.two, .grid.three, .grid.uneven, .reading-layout, .stats-grid, .academic-summary, .workflow-picker, .academic-workspace, .role-picker, .user-admin-layout, .text-builder-layout, .answer-grid, .text-library-item, .ai-question-panel, .settings-grid { grid-template-columns: 1fr; }
  .shell { width: calc(100% - 24px); max-width: none; }
  .text-library-list.is-scrollable { max-height: min(500px, 64vh); }
  .prosody-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-general-card,
  .settings-session-card,
  .settings-identity-card,
  .settings-rubric-card,
  .settings-status-card { grid-column: auto; grid-row: auto; }
  .page-title { align-items: flex-start; flex-direction: column; }
  .rubric-characteristic-row { grid-template-columns: 1fr auto; }
  .rubric-characteristic-row > span { grid-column: 1; }
  .rubric-row-actions { grid-column: 2; grid-row: 1 / 3; }
  .hero-panel { padding: 18px; }
  .install-page .shell {
    width: calc(100% - 24px);
    max-width: none;
    min-height: auto;
    padding: 16px 0 24px;
    align-items: start;
  }
  .install-page .install-layout {
    grid-template-columns: 1fr;
  }
  .install-page .hero-panel {
    min-height: auto;
  }
  .install-page .install-showcase {
    min-height: auto;
  }
  .install-value-list {
    grid-template-columns: 1fr;
  }
  .install-dashboard-preview {
    max-width: 560px;
  }
  .install-page .install-card {
    max-width: none;
    max-height: none;
    overflow: visible;
  }
  .auth-layout { grid-template-columns: 1fr; min-height: auto; }
  .auth-showcase { min-height: auto; padding: 34px 28px 36px; border-radius: 24px; }
  .auth-showcase h1 { max-width: 680px; font-size: clamp(1.85rem, 5vw, 2.65rem); line-height: 1.12; }
  .auth-lead { max-width: 680px; margin-bottom: 16px; }
  .auth-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; }
  .auth-benefits > div:nth-child(n+3) { display: none; }
  .auth-mentor-card { max-width: 420px; }
  .auth-preview { display: none; }
  .auth-form-side { min-height: auto; padding: 36px 24px; }
}

@media (min-width: 981px) and (max-height: 760px) {
  .install-page .topbar {
    min-height: 50px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .install-page .shell {
    height: calc(100dvh - 50px);
    min-height: calc(100dvh - 50px);
    padding: 8px 0;
  }
  .install-page .install-showcase {
    gap: 9px;
    padding: 20px;
  }
  .install-brand-pill {
    padding: 8px 12px;
  }
  .install-brand-pill img {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .install-page .install-showcase h1 {
    font-size: clamp(1.7rem, 3vw, 2.45rem);
  }
  .install-lead {
    font-size: .92rem;
    line-height: 1.3;
  }
  .install-tagline {
    padding: 9px 11px;
    font-size: .95rem;
  }
  .install-value-list span {
    padding: 8px 9px;
    font-size: .78rem;
  }
  .install-dashboard-head {
    padding: 9px 12px;
  }
  .install-dashboard-body {
    padding: 10px;
  }
  .install-kpi {
    padding: 8px;
  }
  .install-kpi strong {
    font-size: 1.2rem;
  }
  .install-page .install-card {
    gap: 7px 9px;
    padding: 10px 12px;
  }
  .install-page .install-card .form-intro h2 {
    font-size: 1.04rem;
  }
  .install-page .install-card .form-intro p,
  .install-page .install-card .muted {
    font-size: .8rem;
  }
  .install-page .install-card .soft-icon {
    width: 34px;
    height: 34px;
  }
  .install-page .install-card .card-title {
    margin: 2px 0 0;
    font-size: .98rem;
  }
  .install-page .install-card label {
    font-size: .84rem;
  }
  .install-page .install-card input {
    min-height: 34px;
    padding: 6px 9px;
  }
  .install-page .install-card .btn {
    min-height: 36px;
  }
}

@media (min-width: 981px) and (max-height: 610px) {
  .install-dashboard-preview {
    display: none;
  }
  .install-page .install-showcase {
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .install-page .topbar {
    position: sticky;
    min-height: 58px;
    padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  }
  .install-page .shell {
    width: calc(100% - 24px);
    max-width: none;
    padding: 14px 0 max(22px, env(safe-area-inset-bottom));
  }
  .install-page .install-layout {
    gap: 12px;
  }
  .install-page .hero-panel {
    padding: 18px;
    border-radius: 18px;
  }
  .install-page .hero-panel h1 {
    font-size: clamp(1.45rem, 8vw, 1.85rem);
  }
  .install-page .install-showcase h1 {
    font-size: clamp(1.75rem, 9vw, 2.25rem);
  }
  .install-page .hero-panel p {
    font-size: .92rem;
  }
  .install-dashboard-body {
    grid-template-columns: 1fr;
  }
  .install-bars {
    height: 42px;
  }
  .install-page .install-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
  }
  .install-page .install-card .inline-fields {
    grid-template-columns: 1fr;
  }
  .auth-page { background: #ffffff; }
  .auth-page .topbar {
    position: sticky;
    min-height: 58px;
    padding: max(10px, env(safe-area-inset-top)) 16px 10px;
    background: #ffffff;
  }
  .auth-page .brand-mark { width: 34px; height: 34px; }
  .auth-page .shell, .auth-layout { min-height: calc(100dvh - 58px); }
  .auth-layout { display: block; width: 100%; }
  .auth-showcase { display: none; }
  .auth-form-side {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: calc(100dvh - 58px);
    width: 100%;
    max-width: 100vw;
    padding: 22px 18px max(28px, env(safe-area-inset-bottom));
    background: #ffffff;
  }
  .auth-card {
    width: 100%;
    max-width: 440px;
    min-width: 0;
    padding: 10px 0 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
  }
  .auth-form-heading { display: none; }
  .auth-title { margin: 8px 0 24px; }
  .auth-title .eyebrow { margin-bottom: 10px; }
  .auth-title h2 { font-size: 1.85rem; }
  .auth-title > span { display: block; max-width: 340px; }
  .auth-field { margin-top: 18px; }
  .auth-input input { min-height: 56px; border-radius: 15px; font-size: 16px; }
  .auth-submit { min-height: 56px; margin-top: 24px; border-radius: 15px; }
  .auth-security { margin-top: 18px; }
}

@media (min-width: 981px) and (max-height: 680px) {
  .auth-page .topbar { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .auth-page .brand-mark { width: 34px; height: 34px; }
  .auth-page .shell { min-height: calc(100dvh - 56px); padding-top: 12px; padding-bottom: 12px; }
  .auth-layout { min-height: min(560px, calc(100dvh - 80px)); }
  .auth-showcase { padding-top: 28px; padding-bottom: 34px; }
  .auth-showcase h1 { max-width: 590px; font-size: clamp(2rem, 3.25vw, 3rem); }
  .auth-badge { margin-bottom: 14px; padding-top: 6px; padding-bottom: 6px; }
  .auth-lead { margin: 14px 0 18px; font-size: .98rem; }
  .auth-benefits > div { padding: 9px; }
  .auth-benefits small { font-size: .75rem; }
  .auth-mentor-card { width: 360px; margin-top: 14px; padding: 8px 12px 8px 8px; }
  .auth-mentor-card img { width: 70px; height: 82px; border-radius: 15px; }
  .auth-mentor-card span { font-size: .78rem; }
  .auth-showcase-foot { display: none; }
  .auth-preview { top: 7%; transform: scale(.86) rotate(5deg); transform-origin: top right; }
  .auth-form-side { padding-top: 14px; padding-bottom: 14px; }
  .auth-card { padding: 22px 28px; }
  .auth-form-heading { padding-bottom: 14px; }
  .auth-form-mark { width: 58px; height: 58px; border-radius: 16px; }
  .auth-title { margin: 15px 0 12px; }
  .auth-title h2 { margin-bottom: 5px; font-size: 1.65rem; }
  .auth-field { margin-top: 10px; }
  .auth-input input { min-height: 44px; }
  .auth-submit { min-height: 44px; margin-top: 14px; }
  .auth-security { margin-top: 8px; }
}

/* Navegación y panel como aplicación móvil */
@media (max-width: 700px) {
  body:not(.auth-page) {
    padding-bottom: env(safe-area-inset-bottom);
    background: #f3f7fc;
  }
  .flash-toast-region { top: 72px; right: 12px; width: calc(100% - 24px); }
  .session-timeout-alert {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    align-items: stretch;
    flex-direction: column;
  }
  .session-timeout-alert .btn { width: 100%; justify-content: center; }
  body:not(.auth-page) .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: block;
    min-height: 62px;
    padding: 0;
    flex-wrap: nowrap;
    border-bottom: 1px solid #e4ebf3;
    background: rgba(255,255,255,.97);
    backdrop-filter: none;
  }
  body:not(.auth-page) .brand {
    display: none;
  }
  body:not(.auth-page) .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  body:not(.auth-page) .brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.auth-page) .nav {
    position: relative;
    z-index: 1;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(58px, 1fr);
    justify-content: stretch;
    gap: 0;
    width: 100%;
    height: 62px;
    margin: 0;
    padding: 5px 4px;
    overflow-x: auto;
    border-top: 0;
    border-bottom: 1px solid #dce5ef;
    background: rgba(255,255,255,.98);
    box-shadow: 0 8px 18px rgba(21, 48, 82, .06);
    scrollbar-width: none;
  }
  body:not(.auth-page) .nav::-webkit-scrollbar { display: none; }
  body:not(.auth-page) .nav a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 58px;
    padding: 6px 3px 4px;
    border-radius: 12px;
    font-size: .65rem;
    line-height: 1;
    text-align: center;
  }
  body:not(.auth-page) .nav a .icon { width: 21px; height: 21px; }
  body:not(.auth-page) .nav a[aria-current="page"] { background: #edf6ff; }
  body:not(.auth-page) .nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 1px;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--primary);
  }
  body:not(.auth-page) .user-chip {
    display: none;
  }
  body:not(.auth-page) .user-avatar { width: 36px; height: 36px; }
  body:not(.auth-page) .user-details { display: none; }
  body:not(.auth-page) .logout-link {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
    color: #64748b;
  }
  body:not(.auth-page) .logout-link > span { display: none; }

  body:not(.auth-page) .shell {
    width: calc(100% - 24px);
    max-width: none;
    margin: 16px auto 20px;
  }
  body:not(.auth-page) .page-title {
    gap: 14px;
    margin-bottom: 16px;
  }
  body:not(.auth-page) .page-title h1 {
    max-width: 350px;
    font-size: clamp(1.7rem, 8vw, 2.15rem);
    letter-spacing: -.03em;
  }
  body:not(.auth-page) .page-title .eyebrow { font-size: .72rem; }
  body:not(.auth-page) .page-title .btn {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
  }
  body:not(.auth-page) .page-actions {
    width: 100%;
    justify-content: stretch;
  }
  body:not(.auth-page) .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }
  body:not(.auth-page) .stat-card {
    min-width: 0;
    min-height: 86px;
    padding: 10px;
    border-radius: 17px;
  }
  body:not(.auth-page) .stat-card span {
    align-items: flex-start;
    gap: 4px;
    font-size: clamp(.61rem, 2.7vw, .76rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  body:not(.auth-page) .stat-card span .icon { width: 15px; height: 15px; }
  body:not(.auth-page) .stat-card strong { margin-top: 10px; font-size: 1.5rem; }
  body:not(.auth-page) .card { padding: 16px; border-radius: 18px; }
  body:not(.auth-page) .grid { gap: 12px; }
  body:not(.auth-page) .section-head { align-items: flex-start; }
  body:not(.auth-page) .section-head .btn { min-height: 36px; }

  .academic-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .academic-summary .mini-stat {
    min-width: 0;
    min-height: 86px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
    border-radius: 17px;
  }
  .academic-summary .mini-stat span {
    min-width: 0;
    align-items: flex-start;
    gap: 4px;
    font-size: clamp(.61rem, 2.7vw, .76rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .academic-summary .mini-stat span .icon { width: 15px; height: 15px; }
  .academic-summary .mini-stat strong { font-size: 1.5rem; }

  .role-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-bottom: 14px;
  }
  .role-card {
    min-width: 0;
    min-height: 142px;
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding: 13px 6px 9px;
    border-radius: 17px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(32, 88, 146, .07);
  }
  .role-card .role-count {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 23px;
    height: 23px;
    border-radius: 8px;
    font-size: .72rem;
  }
  .role-card .role-icon { width: 38px; height: 38px; margin-top: 3px; }
  .role-card strong {
    display: block;
    max-width: 100%;
    font-size: clamp(.68rem, 3.1vw, .82rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .role-card small {
    display: block;
    font-size: clamp(.57rem, 2.55vw, .68rem);
    line-height: 1.22;
  }
  .role-card.is-locked { opacity: .62; }
  .user-admin-layout .form-intro { align-items: flex-start; }
  .user-admin-layout .form-intro .soft-icon { width: 44px; height: 44px; }
  .user-admin-layout .form-intro h2 { font-size: 1.18rem; }
  .user-admin-layout .form-intro p { font-size: .82rem; line-height: 1.35; }
  body:not(.auth-page) input,
  body:not(.auth-page) select,
  body:not(.auth-page) textarea { font-size: 16px; }

  .rubric-panel .section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .reading-time-tools { display: grid; grid-template-columns: minmax(0, 1fr) 116px; width: 100%; }
  .duration-control { min-width: 0; }
  .duration-control > small { display: none; }
  .duration-fields input { width: 46px; padding-inline: 5px; }
  .timer-card { min-width: 0; display: grid; align-content: center; padding-inline: 8px; }
  .timer-card > span { font-size: .7rem; }
  .timer-card strong { font-size: 1.2rem; }
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prosody-grid { grid-template-columns: 1fr; }
  .prosody-metrics-grid { grid-template-columns: 1fr; }
  .reading-font-tools { width: 100%; justify-content: space-between; }
  .settings-status-list { grid-template-columns: 1fr; }
  .insignia-editor { grid-template-columns: 92px minmax(0, 1fr); }
  .insignia-preview { width: 92px; height: 92px; border-radius: 15px; }
  .rubric-total { align-self: start; padding: 8px 10px; }
  .rubric-total strong { font-size: 1.35rem; }
  .rubric-category { grid-template-columns: 1fr; gap: 3px; }
  .rubric-row { grid-template-columns: 1fr; gap: 7px; }
  .rubric-auto-row strong { text-align: left; }
  .app-confirm-dialog[open], .permission-dialog[open] { grid-template-columns: 1fr; padding: 20px; }
  .app-confirm-actions, .permission-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }

  .recent-table-wrap { overflow: visible; }
  .recent-table, .recent-table tbody { display: block; }
  .recent-table thead { display: none; }
  .recent-table tr {
    display: grid;
    gap: 0;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfdff;
  }
  .recent-table td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid #edf2f7;
    text-align: right;
  }
  .recent-table td:last-child { border-bottom: 0; }
  .recent-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
  }
  .recent-table td.empty { display: block; text-align: center; }
  .recent-table td.empty::before { content: none; }

  .reports-page .shell,
  .reports-page .grid,
  .reports-page .card,
  .reports-page .table-wrap {
    min-width: 0;
    max-width: 100%;
  }
  .reports-page .shell { overflow: hidden; }
  .reports-page .filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .reports-page .filter-bar label,
  .reports-page .filter-bar select { min-width: 0; }
  .list-filter > label,
  .list-filter > label.filter-search { flex-basis: min(100%, 280px); max-width: none; }
  .reports-page .legend .pill {
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
  }
  .report-table-wrap { overflow: visible; }
  .report-mobile-table,
  .report-mobile-table tbody { display: block; width: 100%; }
  .report-mobile-table thead { display: none; }
  .report-mobile-table tr {
    display: grid;
    width: 100%;
    gap: 0;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfdff;
  }
  .report-mobile-table tr.risk-row { background: #fff7ed; }
  .report-mobile-table td {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid #edf2f7;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .report-mobile-table td:last-child { border-bottom: 0; }
  .report-mobile-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
  }
  .report-mobile-table td.empty { display: block; text-align: center; }
  .report-mobile-table td.empty::before { content: none; }
  .report-mobile-table audio { width: min(190px, 100%); }
  .report-mobile-table .table-actions { justify-content: flex-end; }
}