@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/Nunito-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Material Symbols Rounded";
  src: url("assets/fonts/MaterialSymbolsRounded-subset.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

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

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

@font-face {
  font-family: "Prompt";
  src: url("assets/fonts/Prompt-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src: url("assets/fonts/Prompt-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/Roboto-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #171b2e;
  --muted: #74798c;
  --paper: #ffffff;
  --surface: #ffffff;
  --soft: #eff8ff;
  --red: #bc002d;
  --red-dark: #8f0022;
  --pink: #fde9e8;
  --gold: #f4c84b;
  --green: #19875e;
  --blue: #315fbd;
  --sky: #dff3ff;
  --sky-strong: #2f91cf;
  --line: #e4e8ef;
  --line-strong: #d7dce6;
  --shadow: 0 5px 0 #e3e7ed;
  --radius: 20px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --sans: "Nunito", system-ui, -apple-system, sans-serif;
  --jp: "Noto Sans JP", var(--sans);
}
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

* { box-sizing: border-box; }
html { max-width:100%; scroll-behavior: smooth; overflow-x:clip; }
body {
  margin: 0;
  min-width: 320px;
  max-width:100%;
  overflow-x:clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, video, audio, canvas { max-width:100%; }
.material-symbols-rounded {
  display:inline-block;
  flex:0 0 auto;
  width:1em;
  overflow:hidden;
  font-family:"Material Symbols Rounded";
  font-size:24px;
  font-style:normal;
  font-weight:400;
  font-variant:normal;
  line-height:1;
  letter-spacing:normal;
  text-align:center;
  text-transform:none;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"liga";
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(244, 200, 75, 0.55);
  outline-offset: 2px;
}
.jp { font-family: var(--jp); }
.muted { color: var(--muted); }
.red { color: var(--red); }
.green { color: var(--green); }
.tiny { font-size: 12px; }
.hide { display: none !important; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: clamp(38px, 6vw, 72px); line-height: 0.98; letter-spacing: -0.055em; }
h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.035em; }
h3 { letter-spacing: -0.018em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--red);
  color: #fff;
  box-shadow:0 4px 0 var(--red-dark);
  font-weight: 800;
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-1px); background: #cf0737; }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--red-dark); }
.btn:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.btn-secondary { border-color:#bde3f5; background:#eef9ff; color:#17658f; box-shadow:0 4px 0 #b6dceb; }
.btn-secondary:hover { border-color:#9ed9f4; background:var(--sky); color:#104e72; }
.btn-secondary:active { box-shadow:0 1px 0 #b6dceb; }
.btn-dark { background: var(--ink); box-shadow:0 4px 0 #080a12; }
.btn-dark:hover { background: #000; }
.btn-ghost { border-color:var(--line); background:#fff; color: var(--muted); box-shadow:0 3px 0 var(--line); }
.btn-ghost:hover { background: var(--soft); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 14px; border-radius: 13px; font-size: 13px; }
.btn-icon { width: 46px; padding: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; }
.brand img { width: 42px; height: 42px; border-radius:13px; object-fit:cover; box-shadow:0 4px 14px rgba(25,31,55,.08); }
.brand span span { color: var(--red); }
.brand small { display: block; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.splash {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: var(--red);
  color: white;
}
.splash::before, .splash::after {
  position: absolute;
  width: 42vw; height: 42vw;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  content: "";
}
.splash::before { top: -20vw; right: -10vw; }
.splash::after { bottom: -25vw; left: -10vw; }
.splash-content { position: relative; z-index: 1; text-align: center; animation: rise .55s ease both; }
.splash-logo { width: 98px; filter: drop-shadow(0 15px 24px rgba(60, 0, 4, .25)); }
.splash h1 { margin: 18px 0 8px; font-size: 54px; letter-spacing: -.05em; }
.splash p { color: rgba(255,255,255,.78); }
.splash .btn { margin-top: 24px; background: white; color: var(--red); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.auth-shell {
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(480px, 1.08fr);
  min-height: 100vh;
}
.auth-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(32px, 5vw, 72px);
  overflow: hidden;
  background: #221d1d;
  color: #fff;
}
.auth-art::after {
  position: absolute;
  right: -12%; bottom: -10%;
  width: 80%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--red) 0 24%, transparent 25%), repeating-conic-gradient(from 0deg, rgba(179,38,45,.6) 0 12deg, transparent 12deg 24deg);
  content: "";
  opacity: .7;
}
.auth-art > * { position: relative; z-index: 1; }
.auth-art .brand small { color: rgba(255,255,255,.55); }
.auth-art h1 { max-width: 660px; margin: 80px 0 24px; }
.auth-art p { max-width: 520px; color: rgba(255,255,255,.63); font-size: 17px; line-height: 1.7; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: rgba(255,255,255,.7); }
.trust-row span::before { margin-right: 8px; color: var(--gold); content: "●"; }
.auth-panel { display: grid; place-items: center; padding: 38px; background: var(--paper); }
.auth-card { width: min(100%, 470px); }
.auth-card h2 { margin-bottom: 10px; }
.auth-card > p { margin-bottom: 30px; color: var(--muted); line-height: 1.6; }
.field { margin-bottom: 17px; }
.field label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.field input, .field select {
  width: 100%; min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.field input::placeholder { color: #aaa09b; }
.auth-role-field { padding:14px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.auth-role-field label { color:var(--red-dark); }
.auth-role-field select { border-color:#dfe3ec; background:#f8f9fc; font-weight:700; }
.auth-role-field small { display:block; margin-top:8px; color:var(--muted); font-size:10px; line-height:1.45; }
.code-input { font-size: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-card .btn-primary { width: 100%; min-height: 52px; }
.demo-codes { margin-top: 24px; padding: 16px; border: 1px dashed #d8c9bc; border-radius: 14px; background: #fffdf9; font-size: 13px; line-height: 1.8; }
.demo-codes code { padding: 3px 7px; border-radius: 6px; background: var(--soft); color: var(--red-dark); font-weight: 700; }
.login-error { min-height: 22px; color: var(--red); font-size: 13px; }

.pending-shell { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--soft); }
.pending-card { width: min(100%, 600px); padding: 42px; border-radius: 26px; background: white; box-shadow: var(--shadow); text-align: center; }
.pending-icon { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 23px; border-radius: 50%; background: var(--pink); color: var(--red); font-size: 30px; }
.request-details { display: grid; grid-template-columns: 1fr 1fr; margin: 28px 0; border: 1px solid var(--line); border-radius: 15px; text-align: left; }
.request-details div { padding: 15px; }
.request-details div + div { border-left: 1px solid var(--line); }
.request-details small { display:block; color:var(--muted); }

.app-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0;
  display: flex; flex-direction: column;
  height: 100vh;
  padding: 27px 18px 20px;
  border-right: 1px solid var(--line);
  background: #fffdf9;
}
.sidebar .brand { padding: 0 10px 24px; }
.side-nav { display: flex; flex:1; flex-direction: column; gap: 5px; margin-top: 12px; overflow-y:auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 45px;
  padding: 0 12px;
  border: 0; border-radius: 11px;
  background: transparent; color: var(--muted);
  font-weight: 600; text-align: left;
}
.nav-item:hover { background: var(--soft); color: var(--ink); }
.nav-item.active { background: var(--pink); color: var(--red-dark); }
.nav-icon { display: grid; place-items: center; width: 23px; font-size: 17px; }
.side-user { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.user-line { display: flex; align-items: center; gap: 10px; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: var(--red); color:#fff; font-weight:800; }
.side-user strong, .side-user small { display:block; }
.side-user small { color:var(--muted); font-size:11px; }
.logout-link { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; }

.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items:center; justify-content:space-between;
  min-height: 76px; padding: 0 clamp(20px,4vw,52px);
  border-bottom:1px solid var(--line);
  background: rgba(255,250,242,.88); backdrop-filter: blur(14px);
}
.mobile-menu { display:none; }
.top-actions { display:flex; align-items:center; gap:10px; }
.security-pill { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #cfe4da; border-radius:100px; background:#f2fbf6; color:var(--green); font-size:12px; font-weight:700; }
.page { width:min(100%, 1500px); margin:0 auto; padding: clamp(25px,4vw,52px); }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.page-head h2 { margin:0; }
.page-head p { max-width:620px; margin:8px 0 0; color:var(--muted); }

.hero {
  position:relative; display:grid; grid-template-columns:1.45fr .55fr; min-height:280px;
  padding:clamp(28px,4vw,48px); overflow:hidden;
  border-radius:28px; background:#211d1d; color:#fff;
}
.hero::after { position:absolute; right:-65px; top:-80px; width:340px; height:340px; border-radius:50%; background:var(--red); content:""; }
.hero-copy { position:relative; z-index:1; }
.hero h2 { max-width:700px; margin:0 0 15px; font-size:clamp(34px,4vw,55px); }
.hero p { max-width:600px; color:rgba(255,255,255,.62); line-height:1.65; }
.hero .button-row { margin-top:24px; }
.hero .btn-secondary { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; }
.hero-mark { position:relative; z-index:1; display:grid; place-items:center; }
.hero-mark span { font-family:var(--jp); font-size:110px; font-weight:700; opacity:.9; }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:18px 0 34px; }
.stat-card { padding:20px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.stat-card small { color:var(--muted); }
.stat-value { margin:8px 0 2px; font-size:29px; font-weight:800; letter-spacing:-.04em; }
.stat-meta { color:var(--green); font-size:11px; font-weight:700; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin:32px 0 16px; }
.section-head h3 { margin:0; font-size:20px; }
.section-head button { border:0; background:none; color:var(--red); font-size:13px; font-weight:700; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.card { position:relative; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 9px 24px rgba(65,39,32,.04); }
.card h3 { margin:14px 0 7px; }
.card p { color:var(--muted); font-size:14px; line-height:1.6; }
.card-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:var(--soft); font-size:20px; }
.card-meta { display:flex; justify-content:space-between; gap:12px; margin:18px 0; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.tag { display:inline-flex; align-items:center; gap:5px; min-height:25px; padding:0 9px; border-radius:100px; background:var(--soft); color:var(--muted); font-size:11px; font-weight:700; }
.tag-red { background:var(--pink); color:var(--red-dark); }
.tag-green { background:#e1f1e9; color:var(--green); }
.tag-gold { background:#fff0c8; color:#815c0a; }
.tag-blue { background:#e3f0f5; color:var(--blue); }
.lock-layer { position:absolute; inset:0; display:grid; place-items:center; padding:20px; border-radius:inherit; background:rgba(255,255,255,.91); backdrop-filter:blur(3px); text-align:center; }
.lock-layer .lock { font-size:27px; }

.progress { height:7px; overflow:hidden; border-radius:100px; background:var(--soft); }
.progress span { display:block; height:100%; border-radius:inherit; background:var(--red); }
.catalog-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:18px 0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--line); }
.catalog-strip div { padding:15px 18px; background:#fff; }
.catalog-strip strong, .catalog-strip span { display:block; }
.catalog-strip strong { font-size:22px; }
.catalog-strip span, .attempt-summary { color:var(--muted); font-size:11px; }
.course-select { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.course-card { padding:28px; border:1px solid var(--line); border-radius:24px; background:#fff; transition:.18s; }
.course-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.course-card.selected { border:2px solid var(--red); }
.course-symbol { display:grid; place-items:center; width:64px; height:64px; margin-bottom:28px; border-radius:18px; background:var(--red); color:white; font-family:var(--jp); font-size:27px; font-weight:700; }
.course-card:nth-child(2) .course-symbol { background:var(--blue); }
.course-points { display:grid; gap:10px; margin:22px 0; }
.course-points span { font-size:14px; }
.course-points span::before { margin-right:8px; color:var(--green); content:"✓"; }

.test-list { display:grid; gap:14px; }
.test-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:18px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.test-number { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--soft); color:var(--red-dark); font-weight:800; }
.test-row h3 { margin:0 0 5px; font-size:16px; }
.test-row p { margin:0; color:var(--muted); font-size:12px; }
.test-action { text-align:right; }
.test-action small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }

.upload-panel { display:grid; grid-template-columns:1fr .9fr; gap:20px; }
.upload-zone { display:grid; place-items:center; min-height:280px; padding:30px; border:2px dashed #d8c8b9; border-radius:20px; background:#fffdf9; text-align:center; }
.upload-zone.drag { border-color:var(--red); background:#fff5f4; }
.upload-zone input { position:absolute; opacity:0; pointer-events:none; }
.upload-icon { font-size:38px; }
#payment-preview { margin-top:14px; }
#payment-preview img { display:block; width:min(100%,220px); max-height:150px; margin:0 auto; object-fit:contain; border:1px solid var(--line); border-radius:10px; background:#fff; }
.receipt { position:relative; padding:28px; overflow:hidden; border-radius:20px; background:#241f1f; color:#fff; }
.receipt::after { position:absolute; right:-50px; bottom:-50px; width:170px; height:170px; border-radius:50%; background:var(--red); content:""; }
.receipt > * { position:relative; z-index:1; }
.receipt-number { margin:25px 0; font-size:25px; font-weight:800; letter-spacing:.06em; }
.receipt-line { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.7); font-size:13px; }
.receipt-line strong { color:white; }

.material-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.material { padding:0; overflow:hidden; }
.material-cover { display:grid; place-items:center; height:150px; background:var(--soft); color:var(--red); font-family:var(--jp); font-size:48px; font-weight:700; }
.material:nth-child(2) .material-cover { background:#dcebef; color:var(--blue); }
.material:nth-child(3) .material-cover { background:#e5ede2; color:var(--green); }
.material:nth-child(4) .material-cover { background:#eee3d0; color:#906516; }
.material-body { padding:17px; }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:17px; background:#fff; }
table { width:100%; border-collapse:collapse; }
th, td { padding:15px 17px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--muted); font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
td { font-size:13px; }
tbody tr:last-child td { border-bottom:0; }
.rank { font-weight:800; color:var(--red); }

.profile-grid { display:grid; grid-template-columns:320px 1fr; gap:20px; }
.profile-card { text-align:center; }
.profile-avatar { display:grid; place-items:center; width:92px; height:92px; margin:8px auto 17px; border-radius:28px; background:var(--red); color:white; font-size:35px; font-weight:800; }
.details-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.detail { padding:14px; border:1px solid var(--line); border-radius:12px; }
.detail small { display:block; margin-bottom:5px; color:var(--muted); }

.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(32,27,27,.62); backdrop-filter:blur(5px); }
.modal { width:min(100%, 620px); max-height:90vh; overflow:auto; padding:28px; border-radius:24px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.23); }
.modal-head { display:flex; justify-content:space-between; gap:15px; }
.modal-close { width:36px; height:36px; border:0; border-radius:10px; background:var(--soft); }
.instruction-list { display:grid; gap:13px; margin:25px 0; }
.instruction { display:flex; gap:13px; padding:14px; border-radius:13px; background:var(--soft); }
.instruction strong { display:block; margin-bottom:3px; }
.instruction p { margin:0; color:var(--muted); font-size:12px; }
.source-links { display:grid; gap:8px; margin:0 0 20px; }
.source-links a { padding:11px 13px; border:1px solid var(--line); border-radius:10px; color:var(--red-dark); font-size:13px; font-weight:700; text-decoration:none; }
.source-links a:hover { background:var(--soft); }
.guide-copy { line-height:1.8; }

.exam-shell { min-height:100vh; background:#f4f1ed; user-select:none; }
.exam-top { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:72px; padding:0 24px; border-bottom:1px solid var(--line); background:#fff; }
.official-top { grid-template-columns:auto minmax(230px,1fr) auto auto auto; gap:22px; min-height:88px; }
.exam-top .brand { justify-self:start; }
.exam-identity, .exam-candidate { min-width:0; }
.exam-identity small, .exam-candidate small, .exam-timer small { display:block; margin-bottom:2px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.exam-identity strong, .exam-identity span, .exam-candidate strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exam-identity strong { font-size:13px; }
.exam-identity span { margin-top:3px; color:var(--muted); font-size:10px; }
.exam-candidate strong { max-width:145px; font-size:12px; }
.exam-timer { display:flex; align-items:center; gap:10px; padding:9px 16px; border-radius:11px; background:#241f1f; color:#fff; font-variant-numeric:tabular-nums; font-size:20px; font-weight:800; }
.exam-timer small { margin:0; color:rgba(255,255,255,.6); }
.exam-actions { justify-self:end; display:flex; gap:8px; }
.exam-security { display:flex; align-items:center; justify-content:center; gap:8px; min-height:34px; background:#f7e6e4; color:var(--red-dark); font-size:11px; font-weight:700; }
.section-progress { position:sticky; top:88px; z-index:19; display:flex; justify-content:center; gap:8px; padding:12px 20px; overflow:auto; border-bottom:1px solid var(--line); background:#fff; }
.section-step { display:flex; align-items:center; gap:8px; min-width:170px; padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--muted); }
.section-step > span { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; border-radius:8px; background:var(--soft); font-size:11px; font-weight:800; }
.section-step strong, .section-step small { display:block; }
.section-step strong { color:inherit; font-size:11px; }
.section-step small { margin-top:2px; font-size:9px; }
.section-step.current { border-color:#c88f91; background:#fff6f5; color:var(--red-dark); }
.section-step.current > span { background:var(--red); color:#fff; }
.section-step.complete { border-color:#b9d5c8; background:#f2faf6; color:var(--green); }
.section-step.complete > span { background:var(--green); color:#fff; }
.section-step.upcoming { opacity:.72; }
.exam-layout { display:grid; grid-template-columns:1fr 270px; gap:20px; width:min(100%,1300px); margin:0 auto; padding:25px; }
.question-card { min-height:650px; padding:clamp(24px,4vw,45px); border:1px solid var(--line); border-radius:22px; background:#fff; }
.question-meta { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:30px; }
.section-chip { display:inline-flex; padding:7px 11px; border-radius:8px; background:var(--pink); color:var(--red-dark); font-size:11px; font-weight:700; }
.category-chip { display:inline-flex; margin-left:7px; padding:7px 11px; border-radius:8px; background:#e8f1f4; color:var(--blue); font-size:11px; font-weight:700; }
.question-count { color:var(--muted); font-size:12px; }
.question-help-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.your-language, .flag-control { padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--blue); font-size:12px; font-weight:700; }
.flag-control { color:var(--muted); }
.one-way-note { color:var(--red-dark); font-size:11px; font-weight:700; }
.question-situation { margin-bottom:15px; padding:14px 16px; border-left:3px solid var(--gold); background:#fffaf0; color:#665d55; font-size:14px; line-height:1.65; }
.question-text { margin:23px 0; white-space:pre-line; font-family:var(--jp); font-size:clamp(21px,2.3vw,29px); font-weight:600; line-height:1.65; }
.reading-box { margin:17px 0; padding:20px; white-space:pre-line; border:1px solid #bbb3aa; background:#fffdf8; font-family:var(--jp); font-size:17px; line-height:1.9; }
.image-prompt { display:grid; place-items:center; min-height:160px; margin:17px 0; border-radius:16px; background:var(--soft); font-size:65px; }
.question-photo { display:block; width:100%; max-height:360px; margin:17px 0; object-fit:contain; border:1px solid var(--line); border-radius:16px; background:#f8f5f0; }
.audio-box { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:16px 0 24px; padding:17px; border-radius:14px; background:#292424; color:white; }
.audio-box p { margin:0; color:rgba(255,255,255,.62); font-size:12px; }
.audio-button { display:flex; align-items:center; gap:9px; border:0; background:transparent; color:white; font-weight:700; }
.audio-button:disabled { opacity:.35; cursor:not-allowed; }
.options { display:grid; gap:12px; }
.option { display:grid; grid-template-columns:36px 1fr; align-items:center; gap:12px; width:100%; min-height:59px; padding:11px 16px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); text-align:left; transition:.14s; }
.option:hover { border-color:#c89597; background:#fff9f8; }
.option.selected { border:2px solid var(--red); background:#fff2f1; }
.option-letter { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--soft); font-size:12px; font-weight:800; }
.option.selected .option-letter { background:var(--red); color:white; }
.option-text { font-family:var(--jp); font-size:16px; }
.image-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.image-option { min-height:110px; }
.image-option .option-text { font-size:44px; text-align:center; }
.question-footer { display:flex; justify-content:space-between; gap:12px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line); }
.exam-nav { position:sticky; top:174px; align-self:start; padding:19px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.exam-nav h3 { margin:0 0 5px; font-size:15px; }
.exam-nav > p { margin:0 0 15px; color:var(--muted); font-size:11px; }
.question-map { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; max-height:360px; overflow:auto; }
.q-dot { aspect-ratio:1; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--muted); font-size:11px; font-weight:700; }
.q-dot.current { border:2px solid var(--red); color:var(--red); }
.q-dot.answered { border-color:var(--green); background:#e6f2ec; color:var(--green); }
.q-dot.flagged::after { content:"•"; color:var(--gold); }
.q-dot.locked { cursor:not-allowed; opacity:.5; background:#eeeae5; }
.legend { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:17px 0; color:var(--muted); font-size:10px; }
.legend i { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:3px; background:var(--soft); }
.legend .done { background:#dceee5; }
.legend .current-key { border:2px solid var(--red); background:#fff; }
.legend .flag-key { background:var(--gold); }
.language-overlay { position:fixed; z-index:80; inset:0; display:grid; place-items:center; padding:20px; background:rgba(32,27,27,.64); backdrop-filter:blur(5px); }
.language-dialog { width:min(100%,720px); max-height:90vh; overflow:auto; padding:28px; border-radius:22px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.25); }
.language-choices { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:20px 0; }
.language-choice { display:flex; align-items:center; gap:8px; min-height:55px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); text-align:left; }
.language-choice.selected { border:2px solid var(--red); background:#fff3f2; color:var(--red-dark); }
.language-situation p { margin:7px 0 0; }

.result-hero { padding:38px; border-radius:25px; background:#221e1e; color:white; text-align:center; }
.score-ring { display:grid; place-items:center; width:170px; height:170px; margin:10px auto 24px; border-radius:50%; background:conic-gradient(var(--red) var(--score), rgba(255,255,255,.12) 0); }
.score-ring-inner { display:grid; place-items:center; width:135px; height:135px; border-radius:50%; background:#221e1e; }
.score-ring strong { display:block; font-size:43px; line-height:1; }
.score-ring small { color:rgba(255,255,255,.55); }
.result-badge { display:inline-block; padding:7px 15px; border-radius:100px; background:#dff1e8; color:var(--green); font-size:12px; font-weight:800; }
.result-badge.fail { background:#f8ddda; color:var(--red-dark); }
.analysis-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.topic-row { margin:16px 0; }
.topic-label { display:flex; justify-content:space-between; margin-bottom:7px; font-size:12px; }
.suggestion { display:flex; gap:12px; margin-top:12px; padding:14px; border-radius:12px; background:var(--soft); }
.practice-disclaimer { display:block; margin-top:12px; color:rgba(255,255,255,.48); }
.category-summary { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.category-summary > small { grid-column:1 / -1; color:var(--muted); font-weight:700; }
.category-summary span { padding:9px 10px; border-radius:9px; background:var(--soft); color:var(--muted); font-size:10px; }
.category-summary strong { display:block; margin-bottom:3px; color:var(--ink); }
.nepali-tip { display:block; margin-top:7px; color:var(--muted); line-height:1.55; }
.answer-review-list { display:grid; gap:10px; margin-top:16px; }
.answer-review-item { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:12px; border:1px solid var(--line); border-radius:11px; }
.answer-review-item strong { display:block; font-size:13px; line-height:1.55; }
.answer-review-item p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.answer-state { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; font-weight:800; }
.answer-state.correct { background:#e1f1e9; color:var(--green); }
.answer-state.wrong { background:#f6dcda; color:var(--red-dark); }

.pending-shell.result-page { display:block; padding:24px; }
.result-screen { width:min(100%,1200px); margin:0 auto; padding:6px 0 34px; }
.result-topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.result-report { margin-top:18px; padding:0; overflow:hidden; }
.result-report-head { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding:28px 30px 22px; border-bottom:1px solid var(--line); }
.result-report-head > div { max-width:760px; }
.result-report-head h2 { margin-bottom:9px; font-size:clamp(25px,3vw,36px); }
.result-report-head p:last-child { margin:0; color:var(--muted); line-height:1.65; }
.result-report-head .btn { flex:0 0 auto; }
.result-report-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.result-report-summary > span { display:grid; gap:2px; min-height:84px; padding:18px 24px; background:#fff; color:var(--muted); font-size:11px; font-weight:700; }
.result-report-summary strong { color:var(--ink); font-size:26px; line-height:1; }
.result-report-summary .correct strong { color:var(--green); }
.result-report-summary .wrong strong { color:var(--red); }
.result-section-group { padding:25px 30px 7px; }
.result-section-group + .result-section-group { border-top:1px solid var(--line); }
.result-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:13px; }
.result-section-heading small { color:var(--red); font-size:9px; font-weight:900; letter-spacing:.14em; }
.result-section-heading h3 { margin:4px 0 0; font-size:19px; }
.result-section-heading > span { flex:0 0 auto; padding:7px 11px; border-radius:100px; background:var(--soft); color:var(--muted); font-size:10px; font-weight:800; }
.result-answer-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
.result-answer-table { width:100%; min-width:900px; border-collapse:collapse; table-layout:fixed; }
.result-answer-table th { padding:11px 12px; background:#f4f6fa; color:#5f6578; font-size:9px; font-weight:900; letter-spacing:.06em; text-align:left; text-transform:uppercase; }
.result-answer-table th:nth-child(1) { width:58px; text-align:center; }
.result-answer-table th:nth-child(2) { width:150px; }
.result-answer-table th:nth-child(3) { width:30%; }
.result-answer-table th:nth-child(4), .result-answer-table th:nth-child(5) { width:17%; }
.result-answer-table th:nth-child(6) { width:100px; }
.result-answer-table td { padding:13px 12px; border-top:1px solid var(--line); color:#303548; font-size:11px; line-height:1.55; vertical-align:top; overflow-wrap:anywhere; }
.result-answer-table td:first-child { text-align:center; }
.result-answer-table td:nth-child(2) strong, .result-answer-table td:nth-child(2) small { display:block; }
.result-answer-table td:nth-child(2) strong { color:var(--ink); font-size:10px; line-height:1.45; }
.result-answer-table td:nth-child(2) small { margin-top:4px; color:#989dad; font-size:8px; }
.result-answer-table .result-question { color:var(--ink); font-size:13px; font-weight:600; line-height:1.7; }
.result-answer-table tr.correct-row { background:#fcfffd; }
.result-answer-table tr.wrong-row { background:#fffafa; }
.result-answer-table tr.correct-row td:first-child { box-shadow:inset 3px 0 0 #38a37b; }
.result-answer-table tr.wrong-row td:first-child { box-shadow:inset 3px 0 0 var(--red); }
.result-serial { display:inline-grid; place-items:center; width:29px; height:29px; border-radius:9px; background:#f0f2f7; color:var(--ink); font-size:10px; font-weight:900; }
.result-status { display:inline-flex; align-items:center; justify-content:center; min-width:72px; min-height:28px; padding:4px 9px; border-radius:100px; font-size:9px; font-weight:900; white-space:nowrap; }
.result-status.correct { background:#e3f4ec; color:#11734f; }
.result-status.wrong { background:#fbe4e6; color:var(--red-dark); }
.answer-correct-text { color:#11734f; font-family:var(--jp); font-weight:700; }
.answer-wrong-text { color:var(--red-dark); font-family:var(--jp); font-weight:700; }
.result-print-document { display:none; }

.practice-special { border-style:dashed; }
.mistake-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.mistake-summary-item { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-align:left; }
.mistake-summary-item:hover { border-color:#cba7a8; background:#fff8f7; }
.mistake-summary-item > span { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--soft); color:var(--red); font-size:19px; font-weight:800; }
.mistake-summary-item strong, .mistake-summary-item small { display:block; }
.mistake-summary-item strong { font-size:22px; }
.mistake-summary-item small { color:var(--muted); }
.mistake-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.mistake-card { padding:19px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 7px 18px rgba(57,37,30,.035); }
.mistake-card-head, .mistake-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mistake-card-head > div { display:flex; flex-wrap:wrap; gap:7px; }
.mistake-card-head > small, .mistake-card-foot > small { color:var(--muted); }
.mistake-card h3 { min-height:52px; margin:17px 0; font-size:16px; line-height:1.6; }
.mistake-answer-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:15px; }
.mistake-answer-grid > div { padding:11px; border-radius:10px; background:var(--soft); }
.mistake-answer-grid small, .mistake-answer-grid strong { display:block; }
.mistake-answer-grid small { margin-bottom:5px; color:var(--muted); font-size:10px; }
.mistake-answer-grid strong { font-family:var(--jp); font-size:13px; line-height:1.45; }
.wrong-answer { color:var(--red-dark); }
.correct-answer { color:var(--green); }

.level-update { display:grid; grid-template-columns:1.4fr .6fr; gap:18px; margin-bottom:18px; padding:25px; border-radius:20px; background:#262120; color:#fff; }
.level-update h3 { margin:13px 0 8px; font-size:25px; }
.level-update p { color:rgba(255,255,255,.68); line-height:1.65; }
.level-update a { color:#f1c96f; font-size:13px; font-weight:800; text-decoration:none; }
.readiness-card { display:flex; flex-direction:column; justify-content:center; padding:20px; border:1px solid rgba(255,255,255,.13); border-radius:15px; background:rgba(255,255,255,.06); }
.readiness-card small { color:rgba(255,255,255,.55); }
.readiness-card > strong { margin:7px 0 10px; font-size:33px; }
.readiness-card p { margin:9px 0 0; font-size:11px; }
.readiness-band { display:inline-flex; align-items:center; width:max-content; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; }
.readiness-band.green { background:#dff1e8; color:var(--green); }
.readiness-band.blue { background:#e3f0f5; color:var(--blue); }
.readiness-band.gold { background:#fff0c8; color:#815c0a; }
.readiness-band.red { background:#f7dedd; color:var(--red-dark); }
.result-readiness { margin-left:8px; vertical-align:middle; }
.checklist-progress { height:10px; margin:-10px 0 18px; }
.checklist-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:34px; }
.checklist-item { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; }
.checklist-item.done { border-color:#b6d2c5; background:#f3faf6; }
.checklist-item input { width:19px; height:19px; margin-top:2px; accent-color:var(--green); }
.checklist-item strong, .checklist-item small, .checklist-item em { display:block; }
.checklist-item strong { margin-bottom:5px; }
.checklist-item small { color:var(--muted); line-height:1.5; }
.checklist-item em { margin-top:6px; color:var(--green); font-size:9px; font-style:normal; font-weight:800; text-transform:uppercase; }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-bottom:24px; }
.resource-card { display:grid; grid-template-columns:auto 1fr; gap:15px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); text-decoration:none; transition:.16s ease; }
.resource-card:hover { transform:translateY(-2px); border-color:#cca7a8; box-shadow:var(--shadow); }
.resource-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--soft); color:var(--red); font-size:22px; font-weight:800; }
.resource-card h3 { margin:9px 0 5px; }
.resource-card p { margin:0 0 10px; color:var(--muted); font-size:12px; line-height:1.5; }
.resource-card > div > strong { color:var(--red); font-size:11px; }
.facts-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fact-list { margin:0; padding-left:19px; color:var(--muted); font-size:13px; line-height:1.75; }

.trend-card { margin-bottom:18px; }
.trend-chart { display:flex; align-items:flex-end; gap:12px; height:220px; margin-top:22px; overflow-x:auto; }
.trend-column { display:grid; grid-template-rows:auto 1fr auto; flex:1 0 54px; min-width:54px; height:100%; text-align:center; }
.trend-value { margin-bottom:6px; font-size:11px; font-weight:800; }
.trend-track { position:relative; width:24px; height:155px; margin:0 auto; border-radius:8px; background:var(--soft); overflow:hidden; }
.trend-track i { position:absolute; right:0; bottom:0; left:0; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#d05a5e,var(--red)); }
.trend-track b { position:absolute; right:0; left:0; height:2px; background:#e2aa38; }
.trend-column small { margin-top:7px; color:var(--muted); white-space:nowrap; }
.result-table-note { margin:10px 4px 0; }

.flashcard-modal { text-align:center; }
.flashcard-progress { display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:var(--muted); font-size:11px; }
.flashcard-progress .progress { flex:1; }
.flashcard-progress .progress i { display:block; height:100%; border-radius:inherit; background:var(--red); }
.flashcard { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:290px; padding:28px; border:1px solid #d9c9bd; border-radius:20px; background:linear-gradient(145deg,#fffdf9,#f6ece1); color:var(--ink); box-shadow:0 18px 35px rgba(70,43,34,.08); }
.flashcard small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.flashcard strong { margin:23px 0 18px; font-size:46px; }
.flashcard span { min-height:28px; color:var(--red-dark); font-size:18px; font-weight:800; }
.flashcard.revealed { border-color:#b7888a; background:#fff8f6; }
.flashcard-actions { justify-content:space-between; margin-top:16px; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.danger-zone p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.danger-button { width:100%; background:var(--red-dark); }

.coverage-audit { margin:0 0 18px; padding:18px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.coverage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.coverage-head h3 { margin:0; }
.coverage-media { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.coverage-media span { padding:7px 9px; border-radius:9px; background:var(--soft); color:var(--muted); font-size:10px; }
.coverage-media strong { color:var(--ink); }
.coverage-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.coverage-category { padding:10px; border:1px solid var(--line); border-radius:10px; }
.coverage-category small, .coverage-category strong, .coverage-category span { display:block; }
.coverage-category small { color:var(--muted); font-size:9px; }
.coverage-category strong { margin:4px 0; font-size:11px; }
.coverage-category span { color:var(--green); font-size:10px; }
.coverage-category.missing { border-color:#e4b7b7; background:#fff5f4; }
.coverage-category.missing span { color:var(--red); }

.admin-shell { min-height:100vh; background:#f4f1ed; }
.admin-top { display:flex; align-items:center; justify-content:space-between; min-height:70px; padding:0 clamp(20px,4vw,50px); background:#201c1c; color:#fff; }
.admin-top .brand small { color:rgba(255,255,255,.5); }
.admin-nav { display:flex; gap:6px; padding:15px clamp(20px,4vw,50px); overflow:auto; border-bottom:1px solid var(--line); background:white; }
.admin-page { padding:32px clamp(20px,4vw,50px); }
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0; }
.admin-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; }
.admin-list { display:grid; gap:10px; }
.admin-item { display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; padding:15px; border:1px solid var(--line); border-radius:13px; }
.admin-item h4 { margin:0 0 4px; }
.admin-item p { margin:0; color:var(--muted); font-size:11px; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--gold); }
.status-dot.approved { background:var(--green); }
.monitor-event { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.monitor-event:last-child { border-bottom:0; }
.monitor-icon { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:10px; background:#f6dcda; }
.generated-code { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; border-color:#dfb45e; background:#fffaf0; }
.generated-code h3 { margin:0 0 8px; }
.generated-code code { display:inline-block; padding:9px 12px; border-radius:9px; background:#241f1f; color:#fff; font-size:18px; font-weight:800; letter-spacing:.06em; }
.generated-code p:last-child { margin:10px 0 0; color:var(--muted); font-size:12px; }
.question-admin-grid { grid-template-columns:.85fr 1.15fr; margin-bottom:18px; }
.check-row { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; }
.check-row input { width:17px; height:17px; accent-color:var(--red); }
.author-steps { margin:14px 0 20px; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.8; }
.question-editor textarea { width:100%; min-height:520px; padding:16px; resize:vertical; border:1px solid var(--line); border-radius:12px; background:#211e1e; color:#f8f3ed; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; tab-size:2; }
.question-editor textarea:focus { border-color:var(--red); outline:3px solid rgba(177,47,51,.12); }
.question-editor .section-head .btn { min-height:40px; padding:0 16px; border:1px solid transparent; border-radius:10px; background:var(--red); color:#fff; }

.reference-note { margin:0 0 20px; padding:14px 17px; border:1px solid #ead59b; border-radius:13px; background:#fff9e8; color:#65552f; font-size:13px; line-height:1.55; }
.processing-notice { margin-bottom:18px; border-color:var(--gold); }
.processing-notice p { margin:5px 0 0; }
.paper-settings { display:grid; grid-template-columns:1.2fr 1.2fr 1.6fr .8fr .65fr .8fr auto auto; align-items:end; gap:12px; margin:0 0 18px; padding:17px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.paper-settings .field { position:relative; margin:0; }
.paper-settings .field input, .paper-settings .field select { min-height:43px; }
.paper-settings .field small { position:absolute; right:10px; bottom:13px; color:var(--muted); font-size:10px; }
.paper-settings .check-row { min-height:43px; padding:0 8px; white-space:nowrap; }
.paper-settings .save-paper { min-height:43px; }
.form-builder-toolbar { position:sticky; z-index:12; top:0; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; padding:13px 16px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(55,35,28,.08); backdrop-filter:blur(8px); }
.form-builder-toolbar strong, .form-builder-toolbar span { display:block; }
.form-builder-toolbar span { margin-top:3px; color:var(--muted); font-size:11px; }
.form-builder { display:grid; gap:16px; width:min(100%,1040px); margin:0 auto; }
.form-question-card { position:relative; padding:23px 24px 24px; overflow:hidden; border:1px solid #ded3ca; border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(57,37,30,.04); }
.form-question-card:focus-within { border-color:#b8898b; box-shadow:0 0 0 2px rgba(179,38,45,.08); }
.form-question-card.collapsed { padding:16px 20px; }
.collapsed-question-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; }
.collapsed-question-summary small, .collapsed-question-summary strong { display:block; }
.collapsed-question-summary small { margin-bottom:4px; color:var(--muted); font-size:10px; }
.collapsed-question-summary strong { overflow:hidden; font-family:var(--jp); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.form-question-accent { position:absolute; top:0; right:0; bottom:0; left:0; width:6px; background:var(--red); }
.form-question-head { display:grid; grid-template-columns:auto minmax(220px,340px) 1fr; align-items:center; gap:12px; margin-bottom:18px; }
.form-question-head .button-row { justify-self:end; }
.question-index { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--soft); color:var(--red-dark); font-size:13px; font-weight:800; }
.form-question-head select { min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.question-classification { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.question-classification label small { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; font-weight:700; }
.question-classification select { width:100%; }
.danger-text { color:var(--red); }
.form-question-card .field textarea { width:100%; min-height:86px; padding:12px 14px; resize:vertical; border:1px solid var(--line); border-radius:10px; background:#fff; font:14px/1.6 var(--jp); }
.form-question-card .form-question-text { min-height:105px; font-size:18px; }
.form-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:8px 0 5px; }
.form-media-grid > div, .form-media-grid > .field { min-width:0; margin:0; }
.photo-uploader, .audio-uploader { display:grid; place-items:center; min-height:112px; padding:14px; border:2px dashed #d8c8b9; border-radius:12px; background:#fffdf9; color:var(--red); text-align:center; cursor:pointer; transition:.16s ease; }
.photo-uploader:hover, .audio-uploader:hover { border-color:#b98789; background:#fff7f6; }
.photo-uploader input, .audio-uploader input { position:absolute; width:1px; height:1px; opacity:0; }
.photo-uploader span, .audio-uploader span { font-size:14px; font-weight:800; }
.photo-uploader small, .audio-uploader small { margin-top:4px; color:var(--muted); font-size:10px; }
.audio-uploader { min-height:78px; margin-top:9px; color:var(--blue); }
.voice-field textarea { min-height:92px; }
.editor-audio-preview { display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; margin-top:9px; padding:9px; border:1px solid var(--line); border-radius:11px; background:#f6fafb; }
.editor-audio-preview audio, .preview-media audio { width:100%; min-width:0; height:38px; }
.voice-fallback { display:block; margin-top:7px; color:var(--muted); font-size:10px; line-height:1.45; }
.compact-field { margin-top:10px !important; }
.editor-image-preview { position:relative; }
.editor-image-preview .question-photo { max-height:240px; }
.editor-image-preview .image-prompt { min-height:110px; font-size:45px; }
.remove-photo { position:absolute; top:8px; right:8px; }
.icon-button { display:grid; place-items:center; flex:0 0 auto; width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--muted); font-size:18px; }
.form-options { display:grid; gap:9px; }
.form-option-row { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:10px; }
.form-option-row input[type="radio"] { width:18px; height:18px; accent-color:var(--red); }
.form-option-row input[type="text"], .form-option-row input:not([type]) { width:100%; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.add-option { margin:9px 0 0 65px; }
.support-language { margin-top:17px; padding-top:15px; border-top:1px solid var(--line); }
.support-language summary, .advanced-json summary { cursor:pointer; color:var(--muted); font-size:13px; font-weight:700; }
.support-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.support-grid .field { margin:0; }

/* Streamlined question editor */
.form-builder { gap:11px; }
.form-question-card { padding:20px 22px 22px; background:#fcfbfa; box-shadow:0 4px 14px rgba(57,37,30,.035); }
.form-question-card.collapsed { padding:13px 17px; background:#fff; }
.form-question-head { grid-template-columns:minmax(170px,.65fr) minmax(310px,1fr) auto; padding-bottom:16px; border-bottom:1px solid var(--line); }
.question-heading { display:flex; align-items:center; gap:10px; }
.question-heading small, .question-heading strong { display:block; }
.question-heading small { margin-bottom:2px; color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.question-heading strong { font-size:14px; }
.question-card-actions { flex-wrap:nowrap; }
.editor-block { margin-top:13px; padding:17px; border:1px solid #e5dcd4; border-radius:14px; background:#fff; }
.editor-block-title { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.editor-block-title > span { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; border-radius:8px; background:#f7e4e2; color:var(--red-dark); font-size:11px; font-weight:900; }
.editor-block-title strong, .editor-block-title small { display:block; }
.editor-block-title strong { font-size:13px; }
.editor-block-title small { margin-top:2px; color:var(--muted); font-size:10px; }
.editor-block textarea { width:100%; min-height:100px; padding:13px 14px; resize:vertical; border:1px solid var(--line); border-radius:11px; background:#fff; font:17px/1.65 var(--jp); }
.editor-block textarea:focus, .form-option-row input:focus { border-color:#b8898b; outline:3px solid rgba(179,38,45,.08); }
.form-options { gap:7px; }
.form-option-row { grid-template-columns:auto auto minmax(0,1fr) 54px auto; min-height:53px; padding:6px 8px; border:1px solid #e5dcd4; border-radius:12px; background:#fff; }
.form-option-row.correct-option { border-color:#77ad92; background:#f0f8f4; box-shadow:inset 3px 0 #4b9874; }
.form-option-row input[type="text"], .form-option-row input:not([type]) { border-color:transparent; background:transparent; font-family:var(--jp); font-size:14px; }
.form-option-row input[type="text"]:hover, .form-option-row input:not([type]):hover { border-color:var(--line); background:#fff; }
.correct-answer-label { color:var(--green); font-size:10px; font-weight:900; text-align:center; text-transform:uppercase; letter-spacing:.05em; }
.add-option { margin:9px 0 0 4px; }
.editor-details { margin-top:12px; overflow:hidden; border:1px solid #e5dcd4; border-radius:13px; background:#fff; }
.editor-details > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; cursor:pointer; list-style:none; }
.editor-details > summary::-webkit-details-marker { display:none; }
.editor-details > summary strong, .editor-details > summary small { display:block; }
.editor-details > summary strong { color:var(--ink); font-size:12px; }
.editor-details > summary small { margin-top:3px; color:var(--muted); font-size:9px; font-weight:500; }
.editor-details > summary::after { content:"＋"; flex:0 0 auto; color:var(--red); font-size:18px; font-weight:500; }
.editor-details[open] > summary::after { content:"−"; }
.detail-status { margin-left:auto; color:var(--muted); font-size:9px; font-weight:800; }
.editor-details-body { padding:16px; border-top:1px solid var(--line); background:#fdfbf9; }
.editor-details.support-language { margin-top:10px; padding:0; border-top:1px solid #e5dcd4; }
.editor-details .support-grid, .editor-details-body.support-grid { margin-top:0; }
.toolbar-menu { position:relative; }
.toolbar-menu > summary { list-style:none; cursor:pointer; }
.toolbar-menu > summary::-webkit-details-marker { display:none; }
.toolbar-menu > div { position:absolute; z-index:25; top:calc(100% + 7px); right:0; display:grid; width:220px; gap:4px; padding:7px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); }
.toolbar-menu > div .btn { justify-content:flex-start; width:100%; }
.sticky-save { position:sticky; z-index:11; bottom:14px; display:flex; align-items:center; justify-content:space-between; width:min(100%,1040px); margin:18px auto; padding:12px 15px; border:1px solid #d9c6b6; border-radius:14px; background:#241f1f; color:#fff; box-shadow:0 15px 35px rgba(35,31,32,.24); }
.sticky-save span { color:rgba(255,255,255,.7); font-size:12px; }
.sticky-save strong { color:#fff; }
.advanced-json { margin:24px 0; }
.advanced-json[open] summary { margin-bottom:12px; }
.advanced-json textarea { width:100%; min-height:360px; margin:10px 0; padding:16px; resize:vertical; border:1px solid #3c3636; border-radius:12px; background:#211e1e; color:#f8f3ed; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.admin-preview-modal { width:min(100%,960px); }
.preview-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; }
.preview-summary span { padding:12px; border-radius:11px; background:var(--soft); color:var(--muted); font-size:11px; }
.preview-summary strong { display:block; color:var(--ink); font-size:22px; }
.preview-question-list { display:grid; gap:12px; margin-bottom:18px; }
.preview-question { padding:18px; border:1px solid var(--line); border-radius:13px; }
.preview-question h3 { margin:14px 0; font-size:17px; line-height:1.6; }
.preview-media { margin:12px 0; padding:12px; border-radius:10px; background:#292424; color:#fff; font-size:12px; }
.preview-media strong { display:block; margin-bottom:8px; }
.preview-options { display:grid; gap:7px; }
.preview-options div { display:flex; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-family:var(--jp); font-size:13px; }
.preview-options div span { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:var(--soft); font-family:var(--sans); font-size:10px; font-weight:800; }
.preview-options .correct-preview { border-color:#79ae97; background:#edf7f2; color:var(--green); font-weight:700; }
.preview-photo { max-height:260px; }

.shadowing-stage { display:grid; justify-items:center; gap:16px; margin:18px 0; padding:30px 24px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#fff,#f7f1eb); text-align:center; }
.shadowing-stage > strong { font-size:clamp(22px,4vw,34px); line-height:1.65; }
.shadowing-stage > p { max-width:520px; margin:0; color:var(--muted); }
.shadowing-answer { display:grid; width:100%; gap:5px; padding:16px; border-radius:13px; background:#fff; box-shadow:0 8px 25px rgba(50,38,31,.07); }
.shadowing-answer small { margin-top:7px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.shadowing-answer b { line-height:1.5; }

.empty { padding:45px 20px; border:1px dashed #d7c9bd; border-radius:17px; text-align:center; }
.empty-icon { font-size:36px; }
.toast-region { position:fixed; z-index:100; right:20px; bottom:20px; display:grid; gap:9px; }
.toast { min-width:260px; max-width:390px; padding:14px 17px; border-radius:12px; background:#252020; color:white; box-shadow:var(--shadow); font-size:13px; animation:toast-in .25s ease both; }
.toast.success { border-left:4px solid #5fb28c; }
.toast.error { border-left:4px solid #dd6b70; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } }

@media (max-width: 1050px) {
  .stats-grid, .admin-stats { grid-template-columns:repeat(2,1fr); }
  .card-grid { grid-template-columns:repeat(2,1fr); }
  .material-grid { grid-template-columns:repeat(2,1fr); }
  .hero { grid-template-columns:1fr; }
  .hero-mark { display:none; }
  .exam-layout { grid-template-columns:1fr 230px; }
  .official-top { grid-template-columns:auto minmax(190px,1fr) auto auto; gap:12px; }
  .exam-candidate { display:none; }
  .official-top .exam-actions .btn-secondary { display:none; }
  .section-step { min-width:145px; }
  .paper-settings { grid-template-columns:repeat(3,1fr); }
  .paper-settings .settings-description { grid-column:span 2; }
  .coverage-categories { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 800px) {
  .auth-shell { grid-template-columns:1fr; }
  .auth-art { min-height:300px; padding:30px; }
  .auth-art h1 { margin:45px 0 16px; font-size:42px; }
  .auth-art .trust-row { display:none; }
  .auth-panel { padding:35px 22px; }
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:40; left:-280px; width:260px; transition:.2s; box-shadow:var(--shadow); }
  .sidebar.open { left:0; }
  .mobile-menu { display:inline-flex; }
  .security-pill span { display:none; }
  .page { padding:25px 20px; }
  .course-select, .upload-panel, .profile-grid, .admin-grid { grid-template-columns:1fr; }
  .exam-layout { grid-template-columns:1fr; padding:13px; }
  .exam-nav { position:static; order:-1; }
  .question-map { grid-template-columns:repeat(10,1fr); max-height:none; }
  .exam-top { grid-template-columns:1fr auto; padding:0 12px; }
  .official-top { grid-template-columns:auto 1fr auto; gap:8px; min-height:78px; }
  .exam-top .brand span { display:none; }
  .official-top .exam-identity { display:none; }
  .exam-timer { justify-self:end; font-size:16px; }
  .exam-timer small { display:none; }
  .exam-actions { position:fixed; z-index:21; right:12px; bottom:12px; }
  .official-top .exam-actions .btn-secondary { display:inline-flex; }
  .section-progress { justify-content:flex-start; padding:9px 12px; }
  .section-progress { top:78px; }
  .section-step { min-width:132px; }
  .question-card { min-height:auto; }
  .form-builder-toolbar { position:static; align-items:flex-start; flex-direction:column; }
  .form-builder-toolbar > .button-row { width:100%; flex-wrap:wrap; }
  .form-question-head { grid-template-columns:1fr; align-items:start; }
  .form-question-head .question-card-actions { grid-column:auto; justify-self:start; flex-wrap:wrap; }
  .form-media-grid, .support-grid { grid-template-columns:1fr; }
  .detail-status { display:none; }
  .paper-settings { grid-template-columns:1fr 1fr; }
  .paper-settings .settings-description { grid-column:1 / -1; }
  .level-update, .facts-grid { grid-template-columns:1fr; }
  .mistake-summary { grid-template-columns:1fr 1fr; }
  .mistake-list, .checklist-grid, .resource-grid { grid-template-columns:1fr; }
  .coverage-head { flex-direction:column; }
  .coverage-media { justify-content:flex-start; }
  .coverage-categories { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px) {
  .topbar { padding:0 16px; }
  .topbar .page-title { display:none; }
  .stats-grid, .card-grid, .material-grid, .admin-stats, .analysis-grid { grid-template-columns:1fr; }
  .catalog-strip { grid-template-columns:1fr 1fr; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .hero { min-height:0; padding:28px 23px; }
  .hero h2 { font-size:36px; }
  .test-row { grid-template-columns:auto 1fr; }
  .test-action { grid-column:1 / -1; text-align:left; }
  .test-action .btn { width:100%; }
  .request-details, .details-grid { grid-template-columns:1fr; }
  .request-details div + div { border-left:0; border-top:1px solid var(--line); }
  .question-map { grid-template-columns:repeat(5,1fr); }
  .question-card { padding:22px 17px; }
  .question-footer { display:grid; grid-template-columns:1fr 1fr; }
  .question-footer .btn { padding:0 9px; }
  .question-help-row { align-items:flex-start; flex-direction:column; }
  .category-chip { margin:6px 0 0; }
  .language-choices, .category-summary { grid-template-columns:1fr; }
  .category-summary > small { grid-column:auto; }
  .modal { padding:22px 18px; }
  .paper-settings { grid-template-columns:1fr; }
  .paper-settings .settings-description { grid-column:auto; }
  .form-question-card { padding:20px 15px 20px 20px; }
  .form-question-card.collapsed { padding:14px 12px 14px 18px; }
  .collapsed-question-summary { grid-template-columns:auto minmax(0,1fr); }
  .collapsed-question-summary .btn { grid-column:1 / -1; width:100%; }
  .form-question-head { grid-template-columns:1fr; }
  .form-question-head select { min-width:0; width:100%; }
  .question-classification { grid-template-columns:1fr; }
  .editor-block { padding:14px 12px; }
  .editor-block-title small { display:none; }
  .form-option-row { grid-template-columns:auto auto minmax(0,1fr) auto; }
  .correct-answer-label { display:none; }
  .toolbar-menu > div { right:auto; left:0; }
  .editor-audio-preview { grid-template-columns:1fr; }
  .editor-audio-preview .icon-button { justify-self:end; }
  .preview-summary { grid-template-columns:1fr 1fr; }
  .sticky-save { bottom:8px; }
  .mistake-answer-grid { grid-template-columns:1fr; }
  .mistake-card-foot, .danger-zone { align-items:flex-start; flex-direction:column; }
  .mistake-card-foot .btn, .danger-zone .btn { width:100%; }
  .resource-card { grid-template-columns:1fr; }
  .coverage-categories { grid-template-columns:1fr; }
}

/* Mobile-first product shell and advanced admin workspace */
.splash {
  background:
    radial-gradient(circle at 50% 36%, rgba(244,200,75,.24) 0 16%, transparent 16.2%),
    linear-gradient(155deg,#fff 0%,#fffdf5 58%,#f7f8fb 100%);
  color:var(--ink);
}
.splash::before, .splash::after { border-color:rgba(23,27,46,.08); }
.splash::before { background:rgba(244,200,75,.14); }
.splash::after { background:rgba(199,47,53,.035); }
.splash-content { display:grid; justify-items:center; width:min(92%,480px); }
.splash-logo { width:116px; border-radius:30px; filter:drop-shadow(0 18px 30px rgba(25,31,55,.12)); }
.splash-kicker { margin-top:24px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.splash h1 { color:var(--ink); }
.splash p { color:var(--muted); font-size:17px; }
.splash .btn { min-width:190px; background:var(--ink); color:#fff; }
.splash .btn:hover { background:#272d49; }

.auth-art { background:#171b2e; }
.auth-art::after {
  right:-18%; bottom:-24%; width:86%;
  background:radial-gradient(circle at 50% 50%,var(--gold) 0 24%,transparent 24.5%),repeating-conic-gradient(from 0deg,rgba(244,200,75,.12) 0 10deg,transparent 10deg 22deg);
  opacity:1;
}
.auth-art .brand > span, .auth-art .brand > span > span { color:#fff; }
.auth-art .brand img { box-shadow:0 9px 25px rgba(0,0,0,.2); }
.auth-panel { background:#f7f8fb; }
.demo-codes { border-color:#e2e5ed; background:#fff; }

.app-shell { grid-template-columns:264px minmax(0,1fr); background:var(--paper); }
.sidebar { padding:24px 16px 18px; border-color:var(--line); background:#fff; }
.sidebar .brand { padding:0 9px 22px; }
.side-nav { gap:4px; margin-top:6px; }
.nav-item { min-height:48px; border-radius:13px; color:#74798c; }
.nav-item:hover { background:#f4f6fa; }
.nav-item.active { background:#fff7d8; color:var(--ink); box-shadow:inset 3px 0 var(--gold); }
.nav-item.active .nav-icon { color:var(--red); }
.side-user { border-color:var(--line); border-radius:16px; background:#f8f9fc; }
.avatar, .top-avatar { background:var(--ink); }
.topbar {
  min-height:72px;
  border-color:rgba(229,232,240,.9);
  background:rgba(255,255,255,.9);
}
.topbar-left, .top-actions { display:flex; align-items:center; gap:12px; }
.mobile-brand, .mobile-bottom-nav { display:none; }
.top-avatar, .admin-avatar {
  display:grid; place-items:center; width:40px; height:40px; padding:0;
  border:0; border-radius:13px; color:#fff; font-size:12px; font-weight:800;
}
.security-pill { border-color:#cfeadf; background:#f2fbf6; }
.page { width:min(100%,1480px); }
.page-head h2 { color:var(--ink); }

.mobile-greeting { display:none; }
.hero {
  grid-template-columns:minmax(0,1.35fr) minmax(230px,.65fr);
  min-height:300px;
  background:linear-gradient(135deg,#fff9dd 0%,#f4c84b 100%);
  color:var(--ink);
  box-shadow:0 24px 50px rgba(105,84,18,.12);
}
.hero::after { right:-110px; top:-165px; width:470px; height:470px; background:rgba(255,255,255,.28); }
.hero::before { position:absolute; right:120px; bottom:-80px; width:185px; height:185px; border:35px solid rgba(199,47,53,.08); border-radius:50%; content:""; }
.hero h2 { font-size:clamp(34px,4vw,56px); }
.hero p { color:rgba(23,27,46,.7); }
.hero .eyebrow { margin-top:13px; color:var(--red-dark); }
.hero .btn { background:var(--ink); }
.hero .btn:hover { background:#2a304e; }
.hero .btn-secondary { border-color:rgba(23,27,46,.13); background:rgba(255,255,255,.68); color:var(--ink); }
.hero-badge { display:inline-flex; padding:7px 10px; border:1px solid rgba(23,27,46,.1); border-radius:100px; background:rgba(255,255,255,.55); font-size:9px; font-weight:900; letter-spacing:.11em; }
.hero-score { position:relative; z-index:1; align-self:center; justify-self:center; display:grid; justify-items:center; width:205px; height:205px; padding:29px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(255,255,255,.58); box-shadow:inset 0 0 0 9px rgba(255,255,255,.2),0 18px 35px rgba(84,68,19,.1); backdrop-filter:blur(10px); }
.hero-score > span { align-self:end; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.hero-score > strong { margin:-2px 0; font-size:54px; line-height:1; letter-spacing:-.07em; }
.hero-score > small { color:var(--muted); }
.hero-score-progress { align-self:start; width:100%; height:6px; overflow:hidden; border-radius:20px; background:rgba(23,27,46,.09); }
.hero-score-progress i { display:block; height:100%; border-radius:inherit; background:var(--red); }
.hero-mark { display:none; }

.quick-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:18px 0 8px; }
.quick-actions button { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; gap:2px 12px; min-width:0; padding:15px; border:1px solid var(--line); border-radius:17px; background:#fff; color:var(--ink); text-align:left; box-shadow:0 7px 20px rgba(25,31,55,.035); }
.quick-actions button:hover { border-color:#d4d9e5; transform:translateY(-1px); box-shadow:var(--shadow); }
.quick-actions button > span { grid-row:1 / 3; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:#fff5cc; color:var(--red-dark); font-family:var(--jp); font-size:17px; font-weight:800; }
.quick-actions strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.quick-actions small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.section-kicker { display:block; margin-bottom:5px; color:var(--red); font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.stat-card, .card, .test-row { border-color:var(--line); box-shadow:0 9px 26px rgba(25,31,55,.035); }
.stat-card { border-radius:19px; }
.stat-meta { color:var(--muted); }
.card-icon { background:#fff6d7; color:var(--red-dark); }
.test-number { background:#fff6d7; color:var(--ink); }

/* Admin workspace */
.admin-shell { display:grid; grid-template-columns:270px minmax(0,1fr); background:#f4f6fa; }
.admin-sidebar {
  position:sticky; top:0; z-index:25; display:flex; flex-direction:column;
  min-width:0; height:100vh; padding:24px 17px 20px; overflow:auto;
  background:#171b2e; color:#fff;
}
.admin-brand { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 8px 27px; }
.admin-brand .brand { min-width:0; }
.admin-brand .brand > span, .admin-brand .brand > span > span { color:#fff; }
.admin-brand .brand small { color:rgba(255,255,255,.48); }
.admin-brand .brand img { box-shadow:0 10px 25px rgba(0,0,0,.2); }
.admin-badge { padding:5px 7px; border-radius:7px; background:var(--gold); color:var(--ink); font-size:8px; font-weight:900; letter-spacing:.08em; }
.admin-nav-label { margin:0 11px 9px; color:rgba(255,255,255,.36); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.admin-nav { display:flex; flex:1; flex-direction:column; gap:5px; padding:0; overflow:visible; border:0; background:transparent; }
.admin-nav-item { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; min-height:47px; padding:0 12px; border:0; border-radius:13px; background:transparent; color:rgba(255,255,255,.62); text-align:left; }
.admin-nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.admin-nav-item.active { background:var(--gold); color:var(--ink); box-shadow:0 10px 24px rgba(0,0,0,.16); }
.admin-nav-item > span { font-size:16px; text-align:center; }
.admin-nav-item strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.admin-nav-item i { display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:8px; background:var(--red); color:#fff; font-size:9px; font-style:normal; font-weight:900; }
.admin-system-card { margin-top:24px; padding:13px; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:rgba(255,255,255,.04); }
.admin-system-card span, .admin-system-card small { display:block; }
.admin-system-card span { font-size:11px; font-weight:700; }
.admin-system-card span i, .admin-live i, .health-list strong i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#45d196; box-shadow:0 0 0 4px rgba(69,209,150,.12); }
.admin-system-card small { margin-top:6px; color:rgba(255,255,255,.42); font-size:9px; }
.admin-signout { min-height:40px; margin-top:10px; border:0; border-radius:11px; background:transparent; color:rgba(255,255,255,.52); font-size:11px; text-align:left; }
.admin-signout:hover { background:rgba(255,255,255,.06); color:#fff; }
.admin-workspace { min-width:0; }
.admin-top { position:sticky; top:0; z-index:20; min-height:74px; padding:0 30px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.93); color:var(--ink); backdrop-filter:blur(16px); }
.admin-top > div:first-child small, .admin-top > div:first-child strong { display:block; }
.admin-top > div:first-child small { margin-bottom:3px; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.11em; }
.admin-top > div:first-child strong { font-size:17px; }
.admin-top-actions { display:flex; align-items:center; gap:14px; }
.admin-live { display:inline-flex; align-items:center; color:var(--green); font-size:10px; font-weight:800; }
.admin-avatar { background:var(--ink); }
.admin-page { width:min(100%,1600px); margin:0 auto; padding:28px 30px 48px; }
.admin-command-card { position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); align-items:center; min-height:260px; padding:35px 39px; overflow:hidden; border-radius:24px; background:linear-gradient(135deg,#171b2e 0%,#252b49 100%); color:#fff; box-shadow:0 20px 50px rgba(23,27,46,.18); }
.admin-command-card::before { position:absolute; right:-95px; top:-135px; width:390px; height:390px; border:58px solid rgba(244,200,75,.07); border-radius:50%; content:""; }
.admin-command-card > div { position:relative; z-index:1; }
.admin-command-label { display:inline-block; margin-bottom:13px; color:var(--gold); font-size:9px; font-weight:900; letter-spacing:.15em; }
.admin-command-card h1 { margin-bottom:12px; font-size:clamp(32px,4vw,50px); letter-spacing:-.045em; }
.admin-command-card p { max-width:700px; color:rgba(255,255,255,.6); line-height:1.6; }
.admin-command-card .button-row { margin-top:24px; }
.admin-command-card .btn { background:var(--gold); color:var(--ink); }
.admin-command-card .btn-secondary { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; }
.command-orbit { display:grid; justify-items:center; gap:11px; }
.command-orbit img { width:128px; height:128px; border-radius:34px; object-fit:cover; box-shadow:0 22px 38px rgba(0,0,0,.24); }
.command-orbit span { padding:8px 11px; border:1px solid rgba(255,255,255,.1); border-radius:100px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.65); font-size:10px; }
.command-orbit strong { color:#fff; }
.admin-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:17px 0; }
.admin-metrics article { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; min-width:0; padding:18px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 8px 25px rgba(25,31,55,.035); }
.metric-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; font-family:var(--jp); font-size:16px; font-weight:800; }
.metric-icon.yellow { background:#fff6cf; color:#7d630c; }
.metric-icon.blue { background:#eaf0ff; color:var(--blue); }
.metric-icon.green { background:#e6f6ef; color:var(--green); }
.metric-icon.red { background:#fdeaea; color:var(--red); }
.admin-metrics small, .admin-metrics strong, .admin-metrics p { display:block; }
.admin-metrics small { color:var(--muted); font-size:10px; }
.admin-metrics strong { margin:2px 0; font-size:26px; letter-spacing:-.04em; }
.admin-metrics p { margin:0; overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.admin-operations-grid { display:grid; grid-template-columns:minmax(0,1.38fr) minmax(285px,.62fr); gap:17px; margin-top:17px; }
.admin-operations-grid.lower { grid-template-columns:minmax(0,1fr) minmax(340px,.75fr); }
.admin-panel { min-width:0; padding:21px; border:1px solid var(--line); border-radius:19px; background:#fff; box-shadow:0 8px 25px rgba(25,31,55,.03); }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:17px; }
.panel-head small, .panel-head h3 { display:block; }
.panel-head small { margin-bottom:4px; color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.1em; }
.panel-head h3 { margin:0; font-size:16px; }
.panel-head > button { padding:0; border:0; background:transparent; color:var(--red); font-size:10px; font-weight:800; }
.admin-empty-state { display:grid; justify-items:center; padding:30px 15px; text-align:center; }
.admin-empty-state > span { display:grid; place-items:center; width:50px; height:50px; margin-bottom:12px; border-radius:16px; background:#e7f7f0; color:var(--green); font-size:20px; }
.admin-empty-state p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.admin-empty-state.compact { padding:15px; }
.admin-item { border-radius:14px; background:#fafbfc; }
.health-list { display:grid; margin-bottom:18px; }
.health-list > div { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:48px; border-bottom:1px solid var(--line); font-size:11px; }
.health-list > div:last-child { border-bottom:0; }
.health-list span { color:var(--muted); }
.health-list strong { font-size:10px; }
.health-list strong i { float:right; margin:3px 0 0 7px; width:6px; height:6px; }
.activity-timeline { display:grid; }
.activity-timeline > div { position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px; padding:0 0 18px; }
.activity-timeline > div:not(:last-child)::after { position:absolute; left:16px; top:34px; bottom:0; width:1px; background:var(--line); content:""; }
.activity-timeline > div > span { display:grid; place-items:center; z-index:1; width:33px; height:33px; border-radius:11px; background:#fff2c7; color:#8a6a08; font-size:11px; font-weight:900; }
.activity-timeline p, .activity-timeline strong, .activity-timeline small { display:block; }
.activity-timeline p { margin:2px 0 0; }
.activity-timeline strong { font-size:11px; }
.activity-timeline small { margin-top:4px; color:var(--muted); font-size:9px; }
.quick-admin > div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick-admin > div:last-child button { display:grid; grid-template-columns:auto 1fr; gap:2px 9px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:13px; background:#fafbfc; color:var(--ink); text-align:left; }
.quick-admin > div:last-child button:hover { border-color:#d5dae5; background:#fff; }
.quick-admin button span { grid-row:1 / 3; display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:#fff5cc; }
.quick-admin button strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.quick-admin button small { overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.table-wrap { border-color:var(--line); border-radius:17px; background:#fff; }
.paper-settings, .form-question-card, .editor-block, .form-option-row, .editor-details { border-color:var(--line); }
.form-question-card { background:#f9fafc; }
.form-question-accent { background:var(--gold); }
.question-index, .editor-block-title > span { background:#fff5cc; color:var(--ink); }
.sticky-save { border-color:#303755; background:var(--ink); }

/* JFT Test — modern white, crimson, and sky product layer */
body, .app-shell, .main { background:#fff; }
.main { min-height:100vh; }
.sidebar { border-color:#e8edf4; background:linear-gradient(180deg,#fff 0%,#f8fcff 100%); }
.side-user { background:#fff; box-shadow:0 12px 30px rgba(23,27,46,.05); }
.nav-item.active { background:var(--sky); color:#0f5c85; box-shadow:inset 3px 0 var(--red); }
.nav-item.active .nav-icon { color:var(--red); }
.topbar { background:rgba(255,255,255,.94); }
.page { width:min(100%,1440px); padding-top:38px; }
.page-head { align-items:center; }
.page-head h2 { font-size:clamp(34px,4vw,52px); font-weight:800; }
.page-head p { max-width:760px; font-size:14px; line-height:1.65; }
.card, .stat-card, .test-row, .admin-panel, .admin-metrics article { border-color:#e7ebf2; border-radius:22px; box-shadow:0 14px 38px rgba(31,47,78,.055); }

.hero { min-height:310px; border:1px solid #e6eaf1; background:#fff; color:var(--ink); box-shadow:0 22px 60px rgba(31,47,78,.075); }
.hero::after { right:-150px; top:-200px; width:520px; height:520px; background:var(--sky); }
.hero::before { right:150px; bottom:-120px; width:230px; height:230px; border:42px solid rgba(188,0,45,.09); }
.hero p { color:#697184; }
.hero .eyebrow { color:var(--red); }
.hero .btn { background:var(--red); color:#fff; }
.hero .btn:hover { background:var(--red-dark); }
.hero .btn-secondary { border-color:#bfe6f8; background:#eef9ff; color:#155f88; }
.hero-badge { border-color:#f0c4ce; background:#fff2f5; color:var(--red-dark); }
.hero-score { border-color:#bfe7fa; background:rgba(239,249,255,.94); box-shadow:inset 0 0 0 9px rgba(255,255,255,.72),0 18px 38px rgba(47,145,207,.13); }
.quick-actions button > span, .card-icon, .test-number, .quick-admin button span { background:var(--sky); color:#125f89; }
.quick-actions button:hover { border-color:#b8e1f4; }

.mock-catalog-page .reference-note { border-color:#dcecf4; background:#f5fbff; color:#475b6d; }
.catalog-strip { border-radius:20px; background:#e8edf4; }
.catalog-strip div { padding:18px 20px; }
.catalog-strip div:nth-child(2), .catalog-strip div:nth-child(4) { background:#f5fbff; }
.test-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.test-row { grid-template-columns:auto minmax(0,1fr); align-content:start; min-height:238px; padding:22px; }
.test-number { width:54px; height:54px; border-radius:18px; background:linear-gradient(145deg,#eef9ff,#d9f1ff); color:#145f87; }
.test-copy { min-width:0; }
.test-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:9px; }
.test-title-row h3 { margin:0; font-size:17px; }
.test-row p { min-height:39px; font-size:12px; line-height:1.6; }
.test-facts { display:flex; flex-wrap:wrap; gap:7px; margin:13px 0 8px; }
.test-facts span { padding:6px 9px; border-radius:100px; background:#f5f7fa; color:#6e7586; font-size:9px; font-weight:700; }
.test-action { grid-column:1 / -1; align-self:end; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--line); text-align:left; }
.test-action-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.test-action small { max-width:230px; margin:0; text-align:right; }

.topic-practice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.topic-practice-card { display:grid; align-content:start; min-width:0; padding:22px; border:1px solid #e5eaf1; border-radius:22px; background:#fff; box-shadow:0 13px 35px rgba(31,47,78,.05); }
.topic-practice-top { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:13px; }
.topic-symbol, .learning-resource-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; background:var(--sky); color:#135f88; font-size:21px; font-weight:800; }
.topic-practice-top small, .learning-resource-card small { color:var(--red); font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.topic-practice-top h3 { margin:3px 0 0; font-size:17px; }
.topic-practice-card > p { min-height:42px; margin:14px 0; color:var(--muted); font-size:12px; line-height:1.6; }
.choice-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:2px 0 17px; }
.choice-preview span { display:grid; place-items:center; min-height:38px; border:1px solid #d8eaf4; border-radius:12px; background:#f7fcff; color:#226f98; font-size:10px; font-weight:900; }
.topic-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:15px; border-top:1px solid var(--line); }
.topic-card-foot small { color:var(--muted); font-size:9px; }
.learning-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.learning-resource-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:14px; min-width:0; padding:20px; border:1px solid #e5eaf1; border-radius:21px; background:#fff; color:var(--ink); text-align:left; text-decoration:none; box-shadow:0 11px 30px rgba(31,47,78,.045); transition:.16s ease; }
.learning-resource-card:hover { transform:translateY(-2px); border-color:#aedaef; box-shadow:0 18px 42px rgba(47,145,207,.12); }
.learning-resource-card h3 { margin:5px 0 7px; font-size:15px; }
.learning-resource-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.learning-resource-card > b { color:var(--red); font-size:16px; }
.practice-resource-grid .resource-card { border-radius:21px; }
.resource-icon { background:var(--sky); color:#135f88; }
.compact-tools .card { min-height:290px; }

.history-count { display:grid; place-items:center; min-width:95px; min-height:82px; padding:12px; border-radius:22px; background:var(--sky); color:#135f88; font-size:29px; font-weight:800; }
.history-count small { display:block; font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.result-filter { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:18px 0; padding:14px 17px; border:1px solid #cdeafa; border-radius:17px; background:#f2faff; }
.result-filter small, .result-filter strong { display:block; }
.result-filter small { color:#4f7c95; font-size:8px; font-weight:900; letter-spacing:.1em; }
.result-filter strong { margin-top:3px; }
.result-history-list { display:grid; gap:15px; margin-top:18px; }
.result-history-card { display:grid; grid-template-columns:92px minmax(0,1fr); overflow:hidden; border:1px solid #e4e9f1; border-radius:24px; background:#fff; box-shadow:0 14px 38px rgba(31,47,78,.055); }
.receipt-stamp { display:grid; place-items:center; align-content:center; gap:5px; background:linear-gradient(160deg,var(--red),#8f0022); color:#fff; }
.receipt-stamp span { font-size:26px; font-weight:800; }
.receipt-stamp small { font-size:7px; font-weight:900; letter-spacing:.13em; }
.result-history-main { min-width:0; padding:22px; }
.result-history-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.result-history-head small { color:var(--red); font-size:8px; font-weight:900; letter-spacing:.08em; }
.result-history-head h3 { margin:5px 0; font-size:18px; }
.result-history-head p { margin:0; color:var(--muted); font-size:10px; }
.result-history-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:17px 0; }
.result-history-metrics span { padding:11px 12px; border-radius:14px; background:#f6f8fb; }
.result-history-metrics small, .result-history-metrics strong { display:block; }
.result-history-metrics small { color:var(--muted); font-size:8px; font-weight:700; }
.result-history-metrics strong { margin-top:3px; font-size:20px; }
.result-history-metrics strong b { color:var(--muted); font-size:8px; }
.result-history-metrics .correct { background:#ecf8f2; color:var(--green); }
.result-history-metrics .wrong { background:#fff0f3; color:var(--red); }
.result-history-sections { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.result-history-sections span { position:relative; display:grid; grid-template-columns:1fr auto; gap:3px 8px; overflow:hidden; padding:9px; border-radius:12px; background:#f7f9fc; }
.result-history-sections i { position:absolute; bottom:0; left:0; height:3px; background:var(--sky-strong); }
.result-history-sections small { color:var(--muted); font-size:8px; }
.result-history-sections strong { font-size:10px; }
.result-history-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:17px; }
.result-receipt-bar { display:grid; grid-template-columns:1fr 1.4fr 1fr auto; align-items:center; gap:1px; margin-bottom:16px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--line); }
.result-receipt-bar > div, .receipt-saved { min-height:66px; padding:13px 16px; background:#fff; }
.result-receipt-bar small, .result-receipt-bar strong { display:block; }
.result-receipt-bar small { color:var(--muted); font-size:7px; font-weight:900; letter-spacing:.1em; }
.result-receipt-bar strong { margin-top:4px; font-size:11px; }
.receipt-saved { display:flex; align-items:center; background:#eaf8f1; color:var(--green); font-size:10px; font-weight:800; }

.instruction-modal { width:min(100%,850px); }
.instruction-summary { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:1px; margin:18px 0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--line); }
.instruction-summary > div { padding:13px; background:#fff; }
.instruction-summary small, .instruction-summary strong { display:block; }
.instruction-summary small { color:var(--muted); font-size:7px; font-weight:900; letter-spacing:.1em; }
.instruction-summary strong { margin-top:4px; font-size:11px; }
.secure-terms-banner { display:flex; gap:13px; padding:16px; border:1px solid #bfe6f8; border-radius:17px; background:#f0faff; }
.secure-terms-banner > span { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:13px; background:var(--sky); color:#14638d; }
.secure-terms-banner strong { display:block; margin-bottom:4px; }
.secure-terms-banner p { margin:0; color:#587083; font-size:11px; line-height:1.6; }
.instruction-list.full-terms { grid-template-columns:1fr 1fr; gap:10px; }
.instruction { border:1px solid #e8ecf2; background:#fafbfd; }
.instruction > span { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:11px; background:var(--sky); color:#145f88; font-weight:800; }
.terms-note { margin-bottom:16px; padding:12px 14px; border-left:4px solid var(--red); background:#fff5f7; color:#6a4e55; font-size:11px; line-height:1.6; }
.exam-agreement { display:flex; align-items:flex-start; gap:10px; padding:14px; border:1px solid #dde3ec; border-radius:14px; font-size:12px; font-weight:700; }
.exam-agreement input { width:18px; height:18px; accent-color:var(--red); }
.language-choices { grid-template-columns:repeat(3,1fr); }
.support-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

.admin-device-table td { white-space:normal; vertical-align:top; }
.admin-device-table td > small, .admin-device-table td > strong, #admin-user-form small { display:block; }
.admin-device-table td > small { margin-top:4px; color:var(--muted); font-size:8px; }
.learner-cell { display:flex; align-items:center; gap:9px; min-width:125px; }
.learner-cell small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.presence-dot { width:9px; height:9px; border-radius:50%; }
.presence-dot.online { background:#24a572; box-shadow:0 0 0 4px rgba(36,165,114,.12); }
.presence-dot.offline { background:#adb3c0; }
.admin-user-modal { width:min(100%,760px); }
.admin-user-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; margin:16px 0 20px; padding:17px; border-radius:18px; background:#f5faff; }
.admin-user-summary .profile-avatar { width:56px; height:56px; margin:0; border-radius:17px; font-size:21px; }
.admin-user-summary h3 { margin:5px 0 3px; }
.presence { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.presence i { width:7px; height:7px; border-radius:50%; background:#aeb4c1; }
.presence.online { color:var(--green); }
.presence.online i { background:var(--green); }
.admin-user-times { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:15px 0; }
.admin-user-times span { padding:11px; border:1px solid var(--line); border-radius:12px; }
.admin-user-times small, .admin-user-times strong { display:block; }
.admin-user-times small { color:var(--muted); font-size:8px; }
.admin-user-times strong { margin-top:4px; font-size:10px; }
.admin-user-checks { display:flex; flex-wrap:wrap; gap:10px 18px; margin:15px 0; }

/* Phone-first app system: friendly type, crisp icons, stable spacing, and tactile controls. */
#app, .app-shell, .main, .page, .admin-shell, .admin-workspace, .admin-page { min-width:0; max-width:100%; }
.page > *, .card-grid > *, .stats-grid > *, .quick-actions > *, .test-list > *, .learning-resource-grid > * { min-width:0; }
.brand img { border:2px solid #fff; box-shadow:0 3px 0 #dfe4eb; }
.nav-icon .material-symbols-rounded { font-size:22px; }
.nav-item { min-height:50px; border-radius:15px; font-weight:800; }
.nav-item.active { box-shadow:inset 4px 0 var(--red), 0 3px 0 #cfe7f3; }

.card, .stat-card, .test-row, .topic-practice-card, .learning-resource-card,
.result-history-card, .admin-panel, .admin-metrics article, .pending-card {
  border:2px solid var(--line);
  box-shadow:0 4px 0 #e3e7ed;
}
.card, .stat-card, .test-row, .topic-practice-card, .learning-resource-card,
.result-history-card, .admin-panel { border-radius:20px; }
.card:hover, .topic-practice-card:hover, .learning-resource-card:hover {
  transform:translateY(-1px);
  border-color:#cbd2de;
  box-shadow:0 5px 0 #dce1e8;
}
.card-icon, .topic-symbol, .learning-resource-icon, .resource-icon, .metric-icon {
  width:52px;
  height:52px;
  border-radius:17px;
}
.card-icon .material-symbols-rounded, .metric-icon .material-symbols-rounded { font-size:28px; }
.section-head { gap:16px; }
.section-head h3 { font-size:22px; font-weight:900; }
.section-head button { min-height:44px; padding:0 4px; font-weight:900; }
.tag { min-height:28px; padding:0 11px; font-weight:800; }
.progress { height:9px; border:1px solid #dae0e9; }

.quick-actions { gap:14px; }
.quick-actions button {
  min-height:88px;
  padding:16px;
  border:2px solid var(--line);
  border-radius:19px;
  box-shadow:0 4px 0 #e3e7ed;
  transition:transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.quick-actions button:hover { transform:translateY(-1px); box-shadow:0 5px 0 #dce1e8; }
.quick-actions button:active { transform:translateY(3px); box-shadow:0 1px 0 #dce1e8; }
.quick-actions button > span { width:50px; height:50px; border-radius:16px; }
.quick-actions button > span .material-symbols-rounded { font-size:28px; }
.quick-actions strong { font-size:14px; font-weight:900; }
.quick-actions small { font-size:11px; font-weight:700; }

.stat-card { display:flex; flex-direction:column; justify-content:center; min-height:130px; }
.stat-card > small { font-size:13px; font-weight:700; }
.stat-value { font-weight:900; }
.stat-meta { overflow-wrap:anywhere; font-weight:800; }
.test-number { width:56px; height:56px; border:2px solid #cbe9f7; box-shadow:0 3px 0 #c8e4f1; font-size:17px; }
.test-title-row h3 { font-weight:900; }
.result-history-main, .test-copy, .learning-resource-card > div, .topic-practice-top > div { min-width:0; }

.admin-nav-item > span { display:grid; place-items:center; }
.admin-nav-item .material-symbols-rounded { font-size:22px; }
.admin-nav-item.active { box-shadow:0 4px 0 #b28d1c; }
.admin-command-card .btn { box-shadow:0 4px 0 #b89525; }
.admin-command-card .btn-secondary { box-shadow:0 4px 0 rgba(0,0,0,.26); }
.admin-metrics article { border-radius:19px; }
.admin-panel { padding:24px; }
.admin-nav-item, .admin-signout, .quick-admin button { font-family:var(--sans); }
.admin-device-table td, .admin-device-table th { line-height:1.45; }

@media (max-width: 800px) {
  body { padding:0; }
  .main { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .topbar {
    min-height:72px;
    padding:0 16px;
    border-bottom:2px solid #edf0f4;
    background:rgba(255,255,255,.97);
  }
  .mobile-brand .brand { gap:9px; }
  .mobile-brand .brand img { width:43px; height:43px; border-radius:14px; }
  .mobile-brand .brand > span { font-size:16px; }
  .top-avatar { width:43px; height:43px; border:2px solid #f0bdc9; border-radius:14px; box-shadow:0 3px 0 #ead4da; font-size:14px; }
  .page { padding:22px 16px 34px; }
  .page-head { align-items:flex-start; gap:14px; margin-bottom:24px; }
  .page-head h2 { font-size:34px; line-height:1.05; }
  .page-head p { font-size:13px; line-height:1.55; }

  .mobile-bottom-nav {
    min-height:78px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top:2px solid #e8ebf0;
    background:rgba(255,255,255,.98);
    box-shadow:0 -7px 20px rgba(23,27,46,.07);
  }
  .mobile-bottom-nav button { gap:4px; min-height:58px; border-radius:16px; }
  .mobile-bottom-nav button > span { width:42px; height:34px; border-radius:13px; }
  .mobile-bottom-nav .material-symbols-rounded { font-size:27px; }
  .mobile-bottom-nav button small { font-size:10px; font-weight:900; line-height:1; }
  .mobile-bottom-nav button.active > span { background:var(--sky); box-shadow:0 3px 0 #c2e4f4; }

  .mobile-greeting { margin:2px 2px 20px; }
  .mobile-greeting > div { min-width:0; }
  .mobile-greeting small { font-size:11px; font-weight:700; }
  .mobile-greeting h2 { margin:4px 0; overflow-wrap:anywhere; font-size:25px; font-weight:900; }
  .mobile-greeting p { max-width:270px; font-size:12px; line-height:1.45; }
  .mobile-greeting img { flex:0 0 auto; width:58px; height:58px; border:2px solid #fff; border-radius:18px; box-shadow:0 4px 0 #e2e6ec; }

  .home-page .hero {
    min-height:0;
    padding:24px 20px;
    border:2px solid var(--line);
    border-radius:22px;
    box-shadow:0 5px 0 #e3e7ed;
  }
  .home-page .hero::after { right:-95px; top:-100px; width:240px; height:240px; opacity:.72; }
  .home-page .hero::before { right:65px; bottom:-125px; width:180px; height:180px; border-width:28px; }
  .home-page .hero-copy { min-width:0; }
  .home-page .hero h2 { max-width:300px; margin-bottom:12px; font-size:34px; line-height:1.04; font-weight:900; }
  .home-page .hero p:not(.eyebrow) { max-width:310px; font-size:13px; line-height:1.52; }
  .home-page .hero .button-row { margin-top:20px; }
  .hero-badge { padding:7px 10px; font-size:9px; }

  .quick-actions { gap:12px; margin:14px 0 26px; }
  .quick-actions button {
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    align-content:start;
    min-height:142px;
    padding:16px;
    gap:6px;
    border-radius:19px;
  }
  .quick-actions button > span { grid-row:auto; width:52px; height:52px; margin-bottom:4px; }
  .quick-actions strong, .quick-actions small { overflow:visible; text-overflow:clip; white-space:normal; }
  .quick-actions strong { font-size:14px; line-height:1.2; }
  .quick-actions small { font-size:11px; line-height:1.3; }

  .stats-grid { gap:12px; margin-bottom:30px; }
  .stat-card { min-height:138px; padding:17px; border-radius:19px; }
  .stat-card > small { font-size:12px; line-height:1.25; }
  .stat-value { margin:9px 0 4px; font-size:27px; line-height:1.05; }
  .stat-meta { font-size:10px; line-height:1.35; }
  .section-head { align-items:flex-end; margin:30px 0 15px; }
  .section-head h3 { font-size:21px; line-height:1.2; }
  .section-head button { flex:0 0 auto; font-size:12px; }

  .card-grid { gap:15px; }
  .card { padding:20px; }
  .card h3 { font-size:20px; font-weight:900; }
  .card p { font-size:13px; line-height:1.55; }
  .card > .btn:last-child { width:100%; }
  .card-meta { gap:10px; font-size:11px; }
  .compact-tools .card { min-height:0; }
  .topic-practice-grid, .learning-resource-grid, .test-list { gap:15px; }
  .topic-practice-card, .learning-resource-card { padding:18px; }
  .learning-resource-card { grid-template-columns:auto minmax(0,1fr) auto; gap:12px; }

  .catalog-strip { grid-template-columns:1fr 1fr; border:2px solid var(--line); }
  .catalog-strip div { min-height:76px; padding:14px; }
  .test-row { min-height:0; padding:18px; gap:14px; }
  .test-action { align-items:stretch; flex-direction:column; }
  .test-action-buttons { display:grid; grid-template-columns:1fr; width:100%; }
  .test-action-buttons .btn { width:100%; }
  .test-action small { max-width:none; text-align:left; }

  .modal-backdrop { align-items:end; padding:0; }
  .modal {
    width:100%;
    max-height:calc(100dvh - 28px);
    padding:24px 18px calc(24px + env(safe-area-inset-bottom));
    border:2px solid var(--line);
    border-bottom:0;
    border-radius:28px 28px 0 0;
    box-shadow:0 -12px 40px rgba(23,27,46,.18);
  }
  .modal-close { width:44px; height:44px; border:2px solid var(--line); border-radius:14px; font-size:20px; }
  .instruction { padding:15px; }

  .toast-region { right:12px; bottom:calc(94px + env(safe-area-inset-bottom)); left:12px; }
  .toast { width:100%; min-width:0; max-width:none; border-radius:15px; }

  .auth-art { min-height:235px; padding:24px 20px; }
  .auth-art h1 { margin:34px 0 12px; font-size:36px; }
  .auth-art p { margin-bottom:0; font-size:14px; line-height:1.55; }
  .auth-panel { padding:28px 18px calc(30px + env(safe-area-inset-bottom)); }
  .auth-card { width:100%; }
  .field input, .field select { min-height:54px; border:2px solid var(--line); border-radius:15px; }

  .admin-shell { background:#f7f9fc; }
  .admin-sidebar {
    min-height:84px;
    padding:10px 10px 8px;
    border-bottom:2px solid #e7ebf1;
    background:rgba(255,255,255,.98);
    color:var(--ink);
  }
  .admin-nav { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82px; gap:6px; padding-bottom:2px; }
  .admin-nav-item { min-height:64px; padding:7px 5px; border-radius:15px; color:#7b8191; }
  .admin-nav-item:hover { background:#f2f7fa; color:var(--ink); }
  .admin-nav-item.active { background:var(--sky); color:#125f89; box-shadow:0 3px 0 #c3e2f0; }
  .admin-nav-item .material-symbols-rounded { font-size:25px; }
  .admin-nav-item strong { font-size:9px; line-height:1.05; white-space:normal; }
  .admin-top { top:84px; min-height:66px; padding:0 16px; }
  .admin-page { padding:18px 14px 38px; }
  .admin-command-card { padding:26px 20px; border:2px solid #2e3555; border-radius:22px; box-shadow:0 5px 0 #0e1120; }
  .admin-command-card h1 { font-size:34px; line-height:1.04; }
  .admin-metrics { gap:11px; }
  .admin-metrics article { min-height:148px; padding:16px; border-radius:18px; }
  .admin-panel { padding:18px; }
  .table-wrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width: 560px) {
  .page { padding-right:15px; padding-left:15px; }
  .page-head { display:block; }
  .page-head > .tag { margin-top:12px; }
  .home-page .hero .button-row { gap:12px; }
  .home-page .hero .btn { min-height:52px; }
  .section-head { align-items:flex-start; }
  .section-head > button { margin-top:-8px; }
  .result-history-main { padding:18px; }
  .result-answer-table td { grid-template-columns:76px minmax(0,1fr); }
  .exam-layout { padding:10px; }
  .question-card { padding:18px 15px; border-radius:20px; }
  .official-top { padding:0 10px; }
  .exam-timer { min-width:72px; padding:8px 11px; border-radius:13px; }
  .admin-metrics article { min-height:140px; }
}

@media (max-width: 1200px) {
  .test-list { grid-template-columns:1fr; }
  .learning-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1180px) {
  .admin-shell { grid-template-columns:220px minmax(0,1fr); }
  .admin-brand .brand small, .admin-badge { display:none; }
  .admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-operations-grid, .admin-operations-grid.lower { grid-template-columns:1fr; }
}

@media (max-width: 800px) {
  .pending-shell.result-page { padding:12px; }
  .result-screen { padding:2px 0 24px; }
  .result-topbar { align-items:flex-start; margin-bottom:14px; }
  .result-topbar .brand small { display:none; }
  .result-topbar .button-row { justify-content:flex-end; }
  .result-topbar .btn { min-height:40px; padding:0 12px; font-size:10px; }
  .result-hero { padding:29px 17px; border-radius:20px; }
  .score-ring { width:145px; height:145px; }
  .score-ring-inner { width:115px; height:115px; }
  .score-ring strong { font-size:37px; }
  .analysis-grid { grid-template-columns:1fr; gap:12px; }
  .result-report-head { display:block; padding:22px 18px 18px; }
  .result-report-head .btn { width:100%; margin-top:10px; }
  .result-report-summary { grid-template-columns:1fr 1fr; }
  .result-report-summary > span { min-height:72px; padding:15px 17px; }
  .result-section-group { padding:21px 15px 5px; }
  .result-section-heading { align-items:flex-start; }
  .result-section-heading h3 { font-size:16px; }
  .result-answer-table-wrap { overflow:visible; border:0; border-radius:0; }
  .result-answer-table, .result-answer-table tbody { display:block; width:100%; min-width:0; }
  .result-answer-table thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .result-answer-table tr { display:block; margin-bottom:11px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; }
  .result-answer-table tr.correct-row { border-left:4px solid #38a37b; }
  .result-answer-table tr.wrong-row { border-left:4px solid var(--red); }
  .result-answer-table td { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:10px 12px; border-top:1px solid var(--line); font-size:10px; text-align:left; }
  .result-answer-table td::before { color:#8b90a0; content:attr(data-label); font-size:8px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
  .result-answer-table td:first-child { border-top:0; text-align:left; box-shadow:none !important; }
  .result-answer-table .result-question { font-size:13px; }
  .result-serial { width:27px; height:27px; }

  .app-shell { display:block; }
  .sidebar { display:none; }
  .main { min-height:100vh; padding-bottom:calc(79px + env(safe-area-inset-bottom)); }
  .topbar { min-height:65px; padding:0 16px; }
  .mobile-menu { display:none; }
  .mobile-brand { display:block; }
  .mobile-brand .brand img { width:38px; height:38px; border-radius:12px; }
  .mobile-brand .brand > span { font-size:14px; }
  .mobile-brand .brand small { display:none; }
  .topbar .page-title, .security-pill { display:none; }
  .top-avatar { width:38px; height:38px; }
  .mobile-bottom-nav {
    position:fixed; right:0; bottom:0; left:0; z-index:45;
    display:grid; grid-template-columns:repeat(5,1fr);
    min-height:70px; padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line); background:rgba(255,255,255,.96);
    box-shadow:0 -10px 35px rgba(25,31,55,.08); backdrop-filter:blur(18px);
  }
  .mobile-bottom-nav button { display:grid; justify-items:center; align-content:center; gap:3px; min-width:0; min-height:52px; padding:4px 2px; border:0; border-radius:14px; background:transparent; color:#8a8fa0; }
  .mobile-bottom-nav button span { display:grid; place-items:center; width:31px; height:27px; border-radius:10px; font-size:17px; }
  .mobile-bottom-nav button small { font-size:9px; font-weight:700; }
  .mobile-bottom-nav button.active { color:var(--ink); }
  .mobile-bottom-nav button.active span { background:var(--sky); color:#146d9f; }
  .page { padding:19px 16px 25px; }
  .mobile-greeting { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:1px 2px 18px; }
  .mobile-greeting small { color:var(--muted); font-size:10px; }
  .mobile-greeting h2 { margin:3px 0 4px; font-size:23px; letter-spacing:-.04em; }
  .mobile-greeting p { margin:0; color:var(--muted); font-size:10px; }
  .mobile-greeting img { width:57px; height:57px; border-radius:17px; object-fit:cover; box-shadow:0 10px 24px rgba(25,31,55,.09); }
  .home-page .hero { grid-template-columns:1fr; min-height:0; padding:25px 22px; border-radius:23px; }
  .home-page .hero::before { right:-15px; bottom:-75px; }
  .home-page .hero::after { right:-180px; top:-180px; }
  .home-page .hero h2 { max-width:260px; font-size:33px; }
  .home-page .hero p:not(.eyebrow) { font-size:12px; line-height:1.55; }
  .hero-score { display:none; }
  .quick-actions { grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 22px; }
  .quick-actions button { grid-template-columns:1fr; grid-template-rows:auto auto auto; align-content:start; min-height:132px; padding:14px; gap:6px; border-radius:18px; }
  .quick-actions button > span { grid-row:auto; width:39px; height:39px; margin-bottom:3px; }
  .quick-actions small { white-space:normal; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; margin:0 0 27px; }
  .stat-card { padding:15px; }
  .stat-value { font-size:23px; }
  .stat-meta { font-size:9px; line-height:1.4; }
  .section-head { margin-top:26px; }
  .card-grid { grid-template-columns:1fr; }
  .test-row { padding:15px; }
  .topic-practice-grid { grid-template-columns:1fr; }
  .learning-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .instruction-list.full-terms { grid-template-columns:1fr; }
  .instruction-summary { grid-template-columns:1fr 1fr; }
  .result-history-card { grid-template-columns:58px minmax(0,1fr); }
  .result-history-metrics, .result-history-sections { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .result-receipt-bar { grid-template-columns:1fr 1fr; }
  .result-receipt-bar .receipt-saved { grid-column:1/-1; }
  .admin-user-times { grid-template-columns:1fr 1fr; }
  .btn { min-height:46px; }
  .splash-logo { width:104px; }

  .admin-shell { display:block; }
  .admin-sidebar { position:sticky; top:0; z-index:30; display:block; width:100%; height:auto; padding:11px 14px; overflow:hidden; }
  .admin-brand, .admin-nav-label, .admin-system-card, .admin-signout { display:none; }
  .admin-nav { display:grid; grid-template-columns:repeat(6,minmax(65px,1fr)); gap:5px; overflow-x:auto; scrollbar-width:none; }
  .admin-nav::-webkit-scrollbar { display:none; }
  .admin-nav-item { display:grid; grid-template-columns:1fr; justify-items:center; gap:3px; min-height:54px; padding:6px; border-radius:11px; text-align:center; }
  .admin-nav-item strong { width:100%; font-size:8px; }
  .admin-nav-item i { position:absolute; top:4px; right:4px; }
  .admin-top { position:sticky; top:76px; min-height:64px; padding:0 16px; }
  .admin-live { display:none; }
  .admin-page { padding:16px 14px 35px; }
  .admin-command-card { grid-template-columns:1fr; min-height:0; padding:26px 22px; border-radius:20px; }
  .admin-command-card h1 { font-size:34px; }
  .admin-command-card p { font-size:12px; }
  .command-orbit { display:none; }
  .admin-command-card .button-row .btn { flex:1 1 160px; }
  .admin-metrics { grid-template-columns:1fr 1fr; gap:9px; }
  .admin-metrics article { grid-template-columns:1fr; align-content:start; gap:9px; min-height:148px; padding:14px; }
  .admin-metrics p { white-space:normal; }
  .admin-panel { padding:16px; }
  .quick-admin > div:last-child { grid-template-columns:1fr; }
  .paper-settings { border-radius:15px; }
}

@media (max-width: 560px) {
  .result-topbar { display:grid; }
  .result-topbar .button-row { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .result-topbar .btn { width:100%; }
  .result-report-summary strong { font-size:23px; }
  .result-section-heading { display:block; }
  .result-section-heading > span { display:inline-block; margin-top:9px; }
  .result-answer-table td { grid-template-columns:80px minmax(0,1fr); padding:9px 10px; }

  .auth-art { min-height:250px; }
  .auth-art h1 { font-size:36px; }
  .page-head { margin-bottom:22px; }
  .home-page .hero .button-row { display:grid; }
  .home-page .hero .btn { width:100%; }
  .stats-grid, .admin-metrics { grid-template-columns:1fr 1fr; }
  .test-row { grid-template-columns:auto minmax(0,1fr); }
  .learning-resource-grid { grid-template-columns:1fr; }
  .topic-card-foot, .result-history-head { align-items:flex-start; flex-direction:column; }
  .result-history-card { display:block; }
  .result-history-card .receipt-stamp { display:inline-flex; width:auto; min-width:58px; margin-bottom:12px; padding:9px 12px; }
  .result-history-metrics { grid-template-columns:1fr 1fr; }
  .result-history-sections { grid-template-columns:1fr; }
  .result-history-actions { display:grid; grid-template-columns:1fr; }
  .result-history-actions .btn { width:100%; }
  .result-receipt-bar, .instruction-summary, .admin-user-times { grid-template-columns:1fr; }
  .result-receipt-bar .receipt-saved { grid-column:auto; }
  .admin-user-summary { grid-template-columns:auto minmax(0,1fr); }
  .admin-user-summary > :last-child { grid-column:1/-1; }
  .admin-top > div:first-child strong { font-size:15px; }
  .admin-command-card .button-row { display:grid; }
  .admin-command-card .button-row .btn { width:100%; }
  .panel-head { align-items:flex-start; }
  .admin-item { grid-template-columns:1fr; }
  .admin-item > div:last-child .btn { width:100%; }
}

/* Keep the final phone rules last so legacy responsive declarations cannot shrink or clip the app UI. */
@media (max-width: 800px) {
  .main { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .topbar { min-height:72px; border-bottom-width:2px; }
  .mobile-brand .brand img { width:43px; height:43px; border-radius:14px; }
  .mobile-brand .brand > span { font-size:16px; }
  .top-avatar { width:43px; height:43px; border:2px solid #f0bdc9; border-radius:14px; box-shadow:0 3px 0 #ead4da; }
  .page { padding:22px 16px 34px; }
  .btn { min-height:50px; }
  .mobile-bottom-nav { min-height:78px; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); border-top-width:2px; box-shadow:0 -7px 20px rgba(23,27,46,.07); }
  .mobile-bottom-nav button { gap:4px; min-height:58px; border-radius:16px; }
  .mobile-bottom-nav button > span { width:42px; height:34px; border-radius:13px; }
  .mobile-bottom-nav button > span > .material-symbols-rounded { width:1em; height:1em; font-size:27px; }
  .mobile-bottom-nav button small { font-size:10px; font-weight:900; }
  .mobile-bottom-nav button.active > span { box-shadow:0 3px 0 #c2e4f4; }
  .mobile-greeting { margin:2px 2px 20px; }
  .mobile-greeting small { font-size:11px; }
  .mobile-greeting h2 { margin:4px 0; font-size:25px; font-weight:900; }
  .mobile-greeting p { font-size:12px; line-height:1.45; }
  .mobile-greeting img { width:58px; height:58px; border:2px solid #fff; border-radius:18px; box-shadow:0 4px 0 #e2e6ec; }
  .home-page .hero { padding:24px 20px; border:2px solid var(--line); border-radius:22px; box-shadow:0 5px 0 #e3e7ed; }
  .home-page .hero::after { right:-95px; top:-100px; width:240px; height:240px; }
  .home-page .hero::before { right:65px; bottom:-125px; width:180px; height:180px; border-width:28px; }
  .home-page .hero h2 { max-width:300px; font-size:34px; line-height:1.04; }
  .home-page .hero p:not(.eyebrow) { max-width:310px; font-size:13px; line-height:1.52; }
  .quick-actions { gap:12px; margin:14px 0 26px; }
  .quick-actions button { min-height:142px; padding:16px; border:2px solid var(--line); border-radius:19px; }
  .quick-actions button > span { width:52px; height:52px; margin-bottom:4px; }
  .quick-actions button > span > .material-symbols-rounded { width:1em; height:1em; font-size:28px; }
  .quick-actions strong { overflow:visible; font-size:14px; white-space:normal; }
  .quick-actions small { overflow:visible; font-size:11px; line-height:1.3; text-overflow:clip; white-space:normal; }
  .stats-grid { gap:12px; margin-bottom:30px; }
  .stat-card { min-height:138px; padding:17px; }
  .stat-value { font-size:27px; }
  .stat-meta { font-size:10px; }
  .card { padding:20px; }
  .card-grid, .test-list, .topic-practice-grid, .learning-resource-grid { gap:15px; }
  .test-row { padding:18px; }
  .test-action { align-items:stretch; flex-direction:column; }
  .test-action-buttons { display:grid; grid-template-columns:1fr; width:100%; }
  .test-action-buttons .btn { width:100%; }
  .test-action small { max-width:none; text-align:left; }
  .admin-sidebar { min-height:84px; padding:10px 10px 8px; border-bottom:2px solid #e7ebf1; background:rgba(255,255,255,.98); color:var(--ink); }
  .admin-nav { grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:auto; gap:6px; overflow-x:hidden; }
  .admin-nav-item { min-height:64px; padding:7px 5px; border-radius:15px; color:#7b8191; }
  .admin-nav-item:hover { background:#f2f7fa; color:var(--ink); }
  .admin-nav-item.active { background:var(--sky); color:#125f89; box-shadow:0 3px 0 #c3e2f0; }
  .admin-nav-item > span > .material-symbols-rounded { width:1em; height:1em; font-size:25px; }
  .admin-nav-item strong { font-size:9px; line-height:1.05; white-space:normal; }
  .admin-top { top:84px; min-height:66px; }
  .admin-page { padding:18px 14px 38px; }
  .admin-command-card { padding:26px 20px; border:2px solid #2e3555; border-radius:22px; box-shadow:0 5px 0 #0e1120; }
  .admin-panel { padding:18px; }
  .trend-chart { gap:5px; overflow-x:visible; }
  .trend-column { flex:1 1 0; min-width:0; }
  .trend-track { width:18px; }
  .trend-column small { font-size:9px; }
}

@media (max-width: 560px) {
  .page { padding-right:15px; padding-left:15px; }
  .page-head { display:block; }
  .page-head > .tag { margin-top:12px; }
  .result-answer-table td { grid-template-columns:76px minmax(0,1fr); }
  .auth-art { min-height:0; padding:18px 18px 20px; }
  .auth-art .brand img { width:40px; height:40px; border-radius:13px; }
  .auth-art .brand > span { font-size:15px; }
  .auth-art .eyebrow { margin:16px 0 8px; font-size:9px; }
  .auth-art h1 { margin:0; font-size:31px; line-height:1.02; }
  .auth-art > div:nth-child(2) > p:last-child { display:none; }
  .auth-panel { padding:24px 16px calc(28px + env(safe-area-inset-bottom)); }
  .auth-card > .eyebrow { margin-bottom:7px; }
  .auth-card h2 { margin-bottom:8px; font-size:30px; }
  .auth-card > p { margin-bottom:22px; font-size:13px; }
  .auth-role-field { padding:13px; }
  .demo-codes { margin-top:20px; }
}

/* Premium interaction layer — an original JFT system inspired by modern open UI patterns. */
:root {
  --premium-shadow:0 12px 30px rgba(29,53,87,.09), 0 3px 0 #dfe5ec;
  --premium-shadow-hover:0 18px 38px rgba(35,90,125,.14), 0 4px 0 #d7e0e9;
  --premium-ring:0 0 0 4px rgba(47,145,207,.17);
  --premium-red:linear-gradient(145deg,#d40b3e 0%,#bc002d 55%,#970023 100%);
  --premium-sky:linear-gradient(145deg,#f7fcff 0%,#e5f7ff 55%,#d8f0fc 100%);
}

body { background:linear-gradient(180deg,#fff 0%,#fbfdff 48%,#f6f9fc 100%); }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }

.btn {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(255,255,255,.28);
  background:var(--premium-red);
  box-shadow:0 5px 0 #85001f, 0 12px 25px rgba(188,0,45,.16), inset 0 1px rgba(255,255,255,.34);
  letter-spacing:.005em;
  transform:translateZ(0);
  transition:transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease, filter 160ms ease;
}
.btn::before {
  position:absolute;
  inset:-40% auto -40% -70%;
  z-index:-1;
  width:55%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  transition:left 420ms ease;
  content:"";
}
.btn:hover { background:var(--premium-red); filter:saturate(1.06) brightness(1.04); transform:translateY(-2px); }
.btn:hover::before { left:125%; }
.btn:active { transform:translateY(4px) scale(.99); box-shadow:0 1px 0 #85001f, 0 4px 10px rgba(188,0,45,.12), inset 0 1px rgba(255,255,255,.24); }
.btn .material-symbols-rounded { position:relative; z-index:1; font-size:20px; }
.btn-secondary {
  border-color:#a8ddef;
  background:var(--premium-sky);
  color:#135f88;
  box-shadow:0 5px 0 #b3dce9, 0 11px 22px rgba(47,145,207,.11), inset 0 1px #fff;
}
.btn-secondary:hover { border-color:#85cfe9; background:var(--premium-sky); color:#0b5279; }
.btn-secondary:active { box-shadow:0 1px 0 #b3dce9, 0 4px 9px rgba(47,145,207,.09); }
.btn-dark { background:linear-gradient(145deg,#30364e,#171b2e 60%,#0c0f1b); box-shadow:0 5px 0 #070914,0 12px 24px rgba(23,27,46,.18),inset 0 1px rgba(255,255,255,.18); }
.btn-ghost { border-color:#d9e0e9; background:linear-gradient(145deg,#fff,#f7f9fc); color:#5f6679; box-shadow:0 4px 0 #dfe4eb,0 9px 18px rgba(31,47,78,.05),inset 0 1px #fff; }
.btn-ghost:hover { background:linear-gradient(145deg,#fff,#eef7fc); color:var(--ink); }
.btn:disabled { filter:grayscale(.2); box-shadow:0 3px 0 #d4d8df; }

.btn-icon, .icon-button, .modal-close, .audio-button, .top-avatar {
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  min-width:44px;
  min-height:44px;
}
.icon-button, .modal-close {
  width:44px;
  height:44px;
  border:1px solid #d8e1eb;
  border-radius:14px;
  background:linear-gradient(145deg,#fff,#edf6fb);
  color:#526276;
  box-shadow:0 4px 0 #dce4ec,0 10px 20px rgba(31,47,78,.07),inset 0 1px #fff;
  transition:transform 150ms ease,box-shadow 150ms ease,color 150ms ease;
}
.icon-button:hover, .modal-close:hover { color:var(--red); transform:translateY(-2px); box-shadow:0 5px 0 #d8e1e9,0 14px 24px rgba(31,47,78,.1); }
.icon-button:active, .modal-close:active { transform:translateY(3px); box-shadow:0 1px 0 #d8e1e9; }
.icon-button .material-symbols-rounded, .modal-close .material-symbols-rounded { font-size:22px; }

[data-tooltip]::after {
  position:absolute;
  right:0;
  bottom:-36px;
  z-index:120;
  padding:6px 9px;
  border-radius:8px;
  background:#171b2e;
  color:#fff;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translateY(-3px);
  transition:.16s ease;
  content:attr(data-tooltip);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity:1; transform:none; }

.card, .stat-card, .test-row, .topic-practice-card, .learning-resource-card,
.result-history-card, .admin-panel, .admin-metrics article, .course-card, .question-card,
.exam-nav, .table-wrap, .pending-card {
  border-color:#dfe6ee;
  background:linear-gradient(155deg,#fff 0%,#fff 72%,#f8fbfe 100%);
  box-shadow:var(--premium-shadow);
}
.card, .stat-card, .test-row, .topic-practice-card, .learning-resource-card,
.result-history-card, .admin-panel, .course-card { position:relative; overflow:hidden; }
.card::before, .stat-card::before, .topic-practice-card::before, .learning-resource-card::before,
.result-history-card::before, .admin-panel::before, .course-card::before {
  position:absolute;
  top:0;
  right:18px;
  left:18px;
  height:2px;
  border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,transparent,#8ed5f1 35%,#f4c84b 66%,transparent);
  opacity:.75;
  content:"";
}
.card:hover, .topic-practice-card:hover, .learning-resource-card:hover, .course-card:hover {
  border-color:#bcddec;
  box-shadow:var(--premium-shadow-hover);
  transform:translateY(-3px);
}
.card-icon, .topic-symbol, .learning-resource-icon, .resource-icon, .metric-icon,
.quick-actions button > span, .test-number {
  border:1px solid rgba(116,194,228,.38);
  background:linear-gradient(145deg,#f6fcff,#dff3ff);
  box-shadow:0 4px 0 #cae8f5,inset 0 1px #fff;
}
.card-icon .material-symbols-rounded, .quick-actions .material-symbols-rounded { filter:drop-shadow(0 1px rgba(255,255,255,.8)); }

.quick-actions button {
  position:relative;
  overflow:hidden;
  border-color:#dfe7ef;
  background:linear-gradient(150deg,#fff,#f7fbfe);
  box-shadow:0 5px 0 #dfe5ec,0 13px 28px rgba(31,47,78,.07);
}
.quick-actions button::after {
  position:absolute;
  right:-32px;
  bottom:-42px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(86,182,224,.13),transparent 68%);
  content:"";
}
.quick-actions button:hover { border-color:#9bd4e9; box-shadow:0 6px 0 #d7e5ec,0 18px 32px rgba(47,145,207,.12); transform:translateY(-2px); }
.quick-actions button:active { transform:translateY(4px); box-shadow:0 1px 0 #d7e5ec; }

.field label { color:#30374b; font-weight:900; }
.field input, .field select, .field textarea,
.question-classification select, .form-option-row input:not([type="radio"]), .paper-settings input, .paper-settings select {
  border:2px solid #dfe6ee;
  border-radius:15px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:inset 0 1px 2px rgba(31,47,78,.035),0 3px 0 #edf0f4;
  transition:border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color:#bfd9e6; }
.field input:focus, .field select:focus, .field textarea:focus,
.form-option-row input:not([type="radio"]):focus {
  border-color:#4ba8d1;
  outline:0;
  box-shadow:var(--premium-ring),0 3px 0 #c7e2ee;
  transform:translateY(-1px);
}

input[type="checkbox"], input[type="radio"] {
  appearance:none;
  display:inline-grid;
  place-content:center;
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin:0;
  border:2px solid #cbd6e1;
  background:#fff;
  box-shadow:0 2px 0 #dce3ea,inset 0 1px #fff;
  transition:.14s ease;
}
input[type="checkbox"] { border-radius:7px; }
input[type="radio"] { border-radius:50%; }
input[type="checkbox"]::before { color:#fff; font-size:15px; font-weight:1000; line-height:1; content:"✓"; transform:scale(0); transition:transform 120ms ease; }
input[type="radio"]::before { width:10px; height:10px; border-radius:50%; background:#fff; content:""; transform:scale(0); transition:transform 120ms ease; }
input[type="checkbox"]:checked, input[type="radio"]:checked { border-color:var(--red); background:var(--premium-red); box-shadow:0 2px 0 #870020,0 0 0 3px rgba(188,0,45,.1); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform:scale(1); }
.check-row { min-height:44px; padding:10px 12px; border:1px solid #e1e7ee; border-radius:14px; background:#fbfdff; }

.tag, .section-chip, .category-chip, .readiness-band {
  border:1px solid rgba(86,126,154,.12);
  box-shadow:inset 0 1px rgba(255,255,255,.8),0 2px 0 rgba(90,111,130,.08);
  letter-spacing:.01em;
}
.progress, .hero-score-progress { overflow:hidden; background:#e8eef4; box-shadow:inset 0 2px 3px rgba(31,47,78,.1),0 1px #fff; }
.progress span, .progress i, .hero-score-progress i { background:linear-gradient(90deg,#bc002d,#ee3f67,#f4c84b); box-shadow:0 0 12px rgba(188,0,45,.25); }
.stat-symbol { display:inline-grid; place-items:center; width:29px; height:29px; margin-left:5px; border-radius:10px; background:#fff0f3; color:var(--red); vertical-align:middle; }
.stat-symbol .material-symbols-rounded { font-size:18px; }

.nav-item, .admin-nav-item, .mobile-bottom-nav button { transition:transform 150ms ease,background 150ms ease,color 150ms ease,box-shadow 150ms ease; }
.nav-item:hover, .admin-nav-item:hover { transform:translateX(2px); }
.mobile-bottom-nav button.active > span { background:linear-gradient(145deg,#ecfaff,#d8f2ff); box-shadow:0 4px 0 #bcdfea,0 7px 16px rgba(47,145,207,.15); }
.mobile-bottom-nav button.active { color:#0d5e88; transform:translateY(-2px); }

.option, .language-choice, .q-dot, .your-language, .flag-control {
  border:2px solid #e0e6ed;
  background:linear-gradient(145deg,#fff,#fbfdff);
  box-shadow:0 3px 0 #e3e8ee,inset 0 1px #fff;
  transition:transform 140ms ease,border-color 140ms ease,box-shadow 140ms ease,background 140ms ease;
}
.option:hover, .language-choice:hover, .your-language:hover, .flag-control:hover { border-color:#9dd4e8; background:#f4fbff; transform:translateY(-1px); }
.option.selected, .language-choice.selected { border-color:var(--red); background:linear-gradient(145deg,#fff8f9,#fde9ee); box-shadow:0 4px 0 #edbdc8,0 0 0 3px rgba(188,0,45,.08); }
.option-letter { border:1px solid #d5e5ed; box-shadow:0 2px 0 #dce8ee; }
.option.selected .option-letter { box-shadow:0 3px 0 #8f0022; }
.audio-box { border:1px solid #39415b; background:linear-gradient(145deg,#2e3650,#171b2e); box-shadow:0 5px 0 #0a0d18,0 15px 28px rgba(23,27,46,.16); }
.audio-button { min-width:122px; padding:9px 13px; border:1px solid rgba(255,255,255,.18); border-radius:13px; background:rgba(255,255,255,.08); }

.modal-backdrop, .language-overlay { background:rgba(15,22,36,.65); backdrop-filter:blur(12px) saturate(.85); }
.modal, .language-dialog {
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(248,252,255,.98));
  box-shadow:0 34px 90px rgba(8,18,34,.28),inset 0 1px #fff;
  animation:premium-modal-in 240ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes premium-modal-in { from { opacity:0; transform:translateY(18px) scale(.985); } }
.modal-head { align-items:flex-start; }
.modal-head h2 { margin-bottom:5px; }
.toast { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:11px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(145deg,#2c344c,#171b2e); box-shadow:0 16px 42px rgba(12,19,34,.25),inset 0 1px rgba(255,255,255,.12); }
.toast > .material-symbols-rounded { font-size:24px; color:#78dfb5; }
.toast.error > .material-symbols-rounded { color:#ff899f; }
.upload-zone, .photo-uploader, .audio-uploader { border:2px dashed #9fcfe3; background:linear-gradient(145deg,#fbfeff,#eaf8ff); box-shadow:inset 0 0 0 4px rgba(255,255,255,.7); transition:.16s ease; }
.upload-zone:hover, .photo-uploader:hover, .audio-uploader:hover { border-color:#4aa6cf; background:#e2f5ff; transform:translateY(-1px); }
.upload-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 12px; border:1px solid #b8dce9; border-radius:18px; background:#fff; color:#17678f; box-shadow:0 5px 0 #cce4ed; }
.upload-icon .material-symbols-rounded { font-size:30px; }

.table-wrap { border-width:2px; }
table th { background:#f5f9fc; color:#636d80; letter-spacing:.045em; }
table tbody tr { transition:background 140ms ease; }
table tbody tr:hover { background:#f5fbff; }
.security-pill { gap:7px; border:1px solid #bbe5d4; box-shadow:0 3px 0 #cde8dd,inset 0 1px #fff; }
.security-pill .material-symbols-rounded { font-size:16px; }

@media (max-width:800px) {
  [data-tooltip]::after { display:none; }
  .mobile-menu { display:none !important; }
  .page { background:linear-gradient(180deg,#fff 0,#fbfdff 100%); }
  .topbar, .mobile-bottom-nav, .admin-sidebar { backdrop-filter:blur(18px) saturate(1.15); }
  .mobile-bottom-nav { border-top-color:#dbe6ee; }
  .quick-actions button { min-height:146px; }
  .modal::before, .language-dialog::before { display:block; width:48px; height:5px; margin:-10px auto 18px; border-radius:99px; background:#d6e0e8; content:""; }
  .option { min-height:64px; border-radius:16px; }
  .question-card { box-shadow:0 6px 0 #dfe5ec,0 15px 34px rgba(31,47,78,.08); }
  .exam-nav { order:1; }
  .exam-actions { display:none !important; }
  .field input, .field select { min-height:56px; }
  .btn { min-height:52px; }
  .btn-sm { min-height:44px; }
  .test-row { box-shadow:0 5px 0 #dde4eb,0 13px 28px rgba(31,47,78,.07); }
}

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

/* LearnIO-inspired Japan edition — red/white identity, Prompt headings, Roboto UI. */
:root {
  --ink:#17171b;
  --muted:#77777f;
  --paper:#ffffff;
  --surface:#ffffff;
  --soft:#f7f7f8;
  --red:#bc002d;
  --red-dark:#8e0022;
  --pink:#fff0f3;
  --gold:#bc002d;
  --green:#bc002d;
  --blue:#bc002d;
  --sky:#fff0f3;
  --sky-strong:#bc002d;
  --line:#e7e7eb;
  --line-strong:#d8d8de;
  --shadow:0 12px 34px rgba(30,24,27,.08);
  --radius:18px;
  --sans:"Roboto",system-ui,-apple-system,sans-serif;
  --display:"Prompt","Roboto",system-ui,sans-serif;
  --jp:"Noto Sans JP","Roboto",system-ui,sans-serif;
  --premium-shadow:0 14px 34px rgba(35,25,29,.09);
  --premium-shadow-hover:0 18px 42px rgba(40,22,29,.13);
  --premium-ring:0 0 0 4px rgba(188,0,45,.14);
  --premium-red:#bc002d;
  --premium-sky:#fff5f7;
}

body {
  color:var(--ink);
  background:#fff;
  font-family:var(--sans);
}

h1,h2,h3,h4,.brand,.btn,.nav-item,.mobile-bottom-nav,.stat-value,.test-number,.tag {
  font-family:var(--display);
}

h1 { font-weight:600; letter-spacing:-.045em; }
h2 { font-weight:600; letter-spacing:-.035em; }
h3 { font-weight:600; letter-spacing:-.022em; }

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline-color:rgba(188,0,45,.45);
}

.page { background:#fff; }
.main { background:#fff; }

.brand { gap:10px; }
.brand img {
  width:44px;
  height:44px;
  border:1px solid #ededf0;
  border-radius:15px;
  background:#fff;
  box-shadow:0 7px 18px rgba(40,26,31,.08);
}
.brand > span { color:var(--ink); font-size:18px; font-weight:600; }
.brand span span { color:var(--red); }
.brand small { margin-top:1px; color:#96969d; font-family:var(--sans); font-size:8px; letter-spacing:.13em; }

.btn {
  min-height:50px;
  border:1px solid var(--red);
  border-radius:10px;
  background:#bc002d;
  box-shadow:0 8px 18px rgba(188,0,45,.17);
  font-weight:600;
  letter-spacing:0;
}
.btn::before { display:none; }
.btn:hover { background:#a90028; box-shadow:0 11px 22px rgba(188,0,45,.22); transform:translateY(-1px); }
.btn:active { background:#960024; box-shadow:0 3px 8px rgba(188,0,45,.18); transform:translateY(1px); }
.btn-secondary {
  border-color:#e6c2cb;
  background:#fff;
  color:var(--red);
  box-shadow:none;
}
.btn-secondary:hover { border-color:var(--red); background:#fff5f7; color:var(--red-dark); }
.btn-ghost { border-color:#dfdfe3; background:#fff; color:#5f5f67; box-shadow:none; }
.btn-ghost:hover { border-color:#c9c9ce; background:#f8f8f9; }
.btn-dark { border-color:#222226; background:#222226; box-shadow:0 8px 18px rgba(20,20,23,.14); }
.btn-sm { min-height:42px; border-radius:9px; }

.splash {
  background:#fff;
  color:var(--ink);
}
.splash::before,.splash::after { border-color:rgba(188,0,45,.12); }
.splash::before { background:#fff3f5; }
.splash-logo-orbit { display:inline-grid; place-items:center; padding:12px; border:1px solid #eeeef1; border-radius:30px; background:#fff; box-shadow:0 22px 55px rgba(45,27,34,.12); }
.splash-logo { width:108px; border-radius:25px; filter:none; }
.splash-kicker { color:var(--red); }
.splash h1 { color:var(--ink); font-family:var(--display); font-weight:600; }
.splash p { color:var(--muted); }
.splash .btn { background:var(--red); color:#fff; }

.learnio-auth {
  grid-template-columns:minmax(390px,.92fr) minmax(460px,1.08fr);
  background:#fff;
}
.learnio-auth .auth-art {
  padding:clamp(34px,5vw,68px);
  background:#bc002d;
  color:#fff;
}
.learnio-auth .auth-art::before {
  position:absolute;
  right:-90px;
  top:-90px;
  width:340px;
  height:340px;
  border:55px solid rgba(255,255,255,.1);
  border-radius:50%;
  content:"";
}
.learnio-auth .auth-art::after {
  right:-170px;
  bottom:-210px;
  width:540px;
  height:540px;
  border:85px solid rgba(255,255,255,.08);
  border-radius:50%;
  background:transparent;
  opacity:1;
}
.learnio-auth .auth-art .brand > span,
.learnio-auth .auth-art .brand > span > span { color:#fff; }
.learnio-auth .auth-art .brand small { color:rgba(255,255,255,.64); }
.learnio-auth .auth-art-copy { position:relative; z-index:2; width:min(100%,620px); }
.learnio-auth .auth-art-copy .eyebrow { margin-bottom:18px; color:#fff; opacity:.75; }
.learnio-auth .auth-art h1 { margin:0 0 24px; color:#fff; font-size:clamp(48px,5.5vw,76px); line-height:1.02; }
.learnio-auth .auth-art h1 span { color:#fff; }
.learnio-auth .auth-art p { color:rgba(255,255,255,.78); font-size:17px; line-height:1.65; }
.auth-art-poster {
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  align-items:center;
  gap:18px;
  width:min(100%,480px);
  margin-top:36px;
  padding:18px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:18px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(10px);
}
.auth-art-poster img { width:88px; border-radius:22px; box-shadow:0 13px 28px rgba(73,0,17,.2); }
.auth-art-poster small,.auth-art-poster strong,.auth-art-poster span { display:block; }
.auth-art-poster small { margin-bottom:5px; color:rgba(255,255,255,.66); font-size:10px; font-weight:700; letter-spacing:.12em; }
.auth-art-poster strong { color:#fff; font-family:var(--display); font-size:22px; font-weight:600; }
.auth-art-poster span { margin-top:4px; color:rgba(255,255,255,.72); font-size:12px; }
.learnio-auth .trust-row { position:relative; z-index:2; gap:22px; color:rgba(255,255,255,.76); }
.learnio-auth .trust-row span { display:inline-flex; align-items:center; gap:7px; }
.learnio-auth .trust-row span::before { display:none; }
.learnio-auth .trust-row .material-symbols-rounded { color:#fff; font-size:18px; }

.learnio-auth .auth-panel { padding:40px; background:#fff; }
.learnio-auth .auth-card { width:min(100%,480px); }
.auth-logo { display:flex; align-items:center; gap:14px; margin-bottom:38px; }
.auth-logo img { width:76px; height:76px; border:1px solid #ececef; border-radius:23px; box-shadow:0 14px 30px rgba(44,27,34,.1); }
.auth-logo strong,.auth-logo span { display:block; }
.auth-logo strong { font-family:var(--display); font-size:28px; font-weight:600; letter-spacing:-.035em; }
.auth-logo span { margin-top:2px; color:#8a8a91; font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; }
.learnio-auth .auth-card > .eyebrow { margin-bottom:10px; }
.learnio-auth .auth-card h2 { margin-bottom:12px; font-size:clamp(32px,3vw,43px); }
.learnio-auth .auth-card > p { margin-bottom:28px; color:#74747c; }
.learnio-auth .field label { color:#29292e; font-family:var(--display); font-size:14px; font-weight:500; }
.learnio-auth .field input,.learnio-auth .field select {
  min-height:56px;
  border:1px solid #e3e3e7;
  border-radius:10px;
  background:#f8f8f9;
  box-shadow:none;
}
.learnio-auth .field input:hover,.learnio-auth .field select:hover { border-color:#cfcfd4; }
.learnio-auth .field input:focus,.learnio-auth .field select:focus { border-color:var(--red); box-shadow:var(--premium-ring); transform:none; }
.learnio-auth .auth-role-field { padding:0; border:0; background:transparent; }
.learnio-auth .auth-role-field select { background:#f8f8f9; }
.learnio-auth .auth-role-field small { margin-top:7px; color:#929298; font-size:11px; }
.learnio-auth .code-input { font-family:var(--display); font-size:17px; font-weight:500; }
.learnio-auth .auth-card .btn-primary { min-height:56px; border-radius:10px; }
.auth-access-note { display:flex; align-items:center; gap:8px; margin-top:17px; color:#77777f; font-size:12px; }
.auth-access-note .material-symbols-rounded { color:var(--red); font-size:18px; }
.learnio-auth .demo-codes { margin-top:18px; padding:0; overflow:hidden; border:1px solid #e5e5e8; border-radius:10px; background:#fff; line-height:1.7; }
.learnio-auth .demo-codes summary { padding:12px 14px; color:#66666d; font-weight:500; cursor:pointer; }
.learnio-auth .demo-codes > div { padding:0 14px 13px; }
.learnio-auth .demo-codes code { background:#fff1f4; color:var(--red-dark); }

.topbar { border-color:#ececef; background:rgba(255,255,255,.96); }
.sidebar { border-color:#ececef; background:#fff; }
.nav-item.active { background:#fff0f3; color:var(--red); }
.nav-item:hover { background:#f8f8f9; }
.avatar,.top-avatar { background:var(--red); }
.security-pill { border-color:#e7c5cd; background:#fff6f7; color:var(--red-dark); box-shadow:none; }

.learnio-home-hero {
  grid-template-columns:minmax(0,1fr) 310px;
  min-height:430px;
  padding:clamp(34px,5vw,62px);
  overflow:hidden;
  border:0;
  border-radius:24px;
  background:#bc002d;
  color:#fff;
  box-shadow:0 22px 50px rgba(96,0,23,.16);
}
.learnio-home-hero::after {
  right:-150px;
  top:-185px;
  width:500px;
  height:500px;
  border:85px solid rgba(255,255,255,.09);
  background:transparent;
}
.learnio-home-hero::before {
  right:190px;
  bottom:-170px;
  width:300px;
  height:300px;
  border:60px solid rgba(255,255,255,.075);
}
.learnio-home-hero .hero-copy { position:relative; z-index:2; }
.learnio-home-hero .hero-badge { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.13); color:#fff; }
.learnio-home-hero .eyebrow { margin-top:20px; color:rgba(255,255,255,.72); }
.learnio-home-hero h2 { max-width:650px; color:#fff; font-size:clamp(42px,5vw,65px); font-weight:600; }
.learnio-home-hero p:not(.eyebrow) { max-width:620px; color:rgba(255,255,255,.8); font-size:16px; line-height:1.65; }
.learnio-home-hero .button-row { gap:12px; }
.learnio-home-hero .btn { border-color:#fff; background:#fff; color:var(--red); box-shadow:0 10px 25px rgba(86,0,20,.18); }
.learnio-home-hero .btn:hover { background:#fff7f8; }
.learnio-home-hero .btn-secondary { border-color:rgba(255,255,255,.55); background:transparent; color:#fff; box-shadow:none; }
.learnio-home-hero .btn-secondary:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.hero-benefits { display:flex; flex-wrap:wrap; gap:16px; margin-top:25px; color:rgba(255,255,255,.82); font-size:12px; }
.hero-benefits span { display:inline-flex; align-items:center; gap:5px; }
.hero-benefits .material-symbols-rounded { font-size:16px; }
.hero-poster {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  align-self:center;
  flex-direction:column;
  justify-content:center;
  min-height:300px;
  padding:28px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 22px 42px rgba(83,0,20,.2);
  text-align:center;
  transform:rotate(2.5deg);
}
.hero-j-mark { display:grid; place-items:center; width:106px; height:106px; margin-bottom:19px; border-radius:30px; background:#fff; }
.hero-j-mark img { width:106px; border-radius:28px; }
.hero-poster > span { color:var(--red); font-size:10px; font-weight:700; letter-spacing:.16em; }
.hero-poster > strong { margin:6px 0 4px; font-family:var(--display); font-size:42px; font-weight:600; letter-spacing:-.05em; }
.hero-poster > small { color:var(--muted); font-size:11px; }

.quick-actions button,.stat-card,.card,.test-row,.topic-practice-card,.learning-resource-card {
  border:1px solid #e8e8eb;
  background:#fff;
  box-shadow:0 10px 28px rgba(32,27,29,.06);
}
.card::before,.stat-card::before,.topic-practice-card::before,.learning-resource-card::before,
.result-history-card::before,.admin-panel::before,.course-card::before { display:none; }
.course-card { border-color:#e7e7eb; background:#fff; box-shadow:0 12px 30px rgba(32,27,29,.07); }
.quick-actions button::after { background:radial-gradient(circle,rgba(188,0,45,.075),transparent 68%); }
.quick-actions button:hover { border-color:#e2abb8; box-shadow:0 14px 32px rgba(89,20,37,.09); }
.quick-actions button > span,.card-icon,.topic-symbol,.learning-resource-icon {
  background:#fff0f3;
  color:var(--red);
  box-shadow:none;
}
.quick-actions strong { color:#252529; }
.stat-card { min-height:142px; }
.stat-symbol { background:#fff0f3; color:var(--red); }
.progress,.hero-score-progress { background:#efeff1; }
.progress span,.progress i,.hero-score-progress i { background:#bc002d; box-shadow:none; }

.tag,.section-chip,.category-chip,.readiness-band { box-shadow:none; }
.tag-blue,.tag-green,.tag-gold,.tag-red { border-color:#efc2cc; background:#fff0f3; color:var(--red-dark); }
.green { color:var(--red); }
.test-number { background:#fff0f3; color:var(--red); box-shadow:none; }
.test-number { border:1px solid #efc2cc; }
.reference-note { border-color:#e8c3cc; background:#fff7f8; color:#61575a; }
.catalog-strip { border-color:#e8e8eb; background:#fff; }
.secure-terms-banner { border-color:#efc2cc; background:#fff5f7; }
.secure-terms-banner > span,.instruction > span { background:#fff0f3; color:var(--red); }
.secure-terms-banner p { color:#70666a; }
.instruction { border-color:#e8e8eb; background:#fff; }
.option:hover,.language-choice:hover,.your-language:hover,.flag-control:hover { border-color:#e6a9b8; background:#fff5f7; }
.upload-zone,.photo-uploader,.audio-uploader { border-color:#e1a4b3; background:#fff5f7; }
.upload-zone:hover,.photo-uploader:hover,.audio-uploader:hover { border-color:var(--red); background:#fff0f3; }
.upload-icon { border-color:#efc2cc; color:var(--red); box-shadow:none; }

.mobile-bottom-nav { border-color:#ececef; background:rgba(255,255,255,.98); }
.mobile-bottom-nav button.active { color:var(--red); transform:none; }
.mobile-bottom-nav button.active > span { background:#fff0f3; color:var(--red); box-shadow:none; }
.mobile-bottom-nav button.active > span > .material-symbols-rounded { color:var(--red) !important; }
.admin-nav-item.active { background:#fff0f3; color:var(--red); box-shadow:none; }
.admin-shell { background:#f7f7f8; }
.admin-metrics article,.admin-panel { border-color:#e6e6ea; background:#fff; box-shadow:0 10px 28px rgba(32,27,29,.06); }
.metric-icon.yellow,.metric-icon.blue,.metric-icon.green,.metric-icon.red {
  border:1px solid #efc6cf;
  background:#fff0f3;
  color:var(--red);
}
.admin-command-card { border-color:#3a2027; background:#221b1d; box-shadow:0 20px 45px rgba(29,19,22,.16); }
.admin-command-card .btn { border-color:var(--red); background:var(--red); color:#fff; box-shadow:0 8px 20px rgba(188,0,45,.18); }
.admin-command-card .btn-secondary { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; box-shadow:none; }
.generated-code { border-color:#edc0ca; background:#fff5f7; }

@media (max-width:1000px) {
  .learnio-auth { grid-template-columns:1fr; }
  .learnio-auth .auth-art { min-height:330px; }
  .learnio-auth .auth-art h1 { margin-top:0; }
  .learnio-auth .auth-panel { padding:40px 22px; }
  .learnio-home-hero { grid-template-columns:minmax(0,1fr) 260px; }
}

@media (max-width:800px) {
  .topbar { min-height:64px; }
  .page { padding-top:18px; }
  .mobile-brand .brand img { border-radius:13px; }
  .mobile-bottom-nav { min-height:72px; border-top-width:1px; box-shadow:0 -8px 24px rgba(25,21,22,.07); }
  .mobile-bottom-nav button { min-height:54px; border-radius:10px; }
  .mobile-bottom-nav button > span { width:36px; height:31px; border-radius:10px; }
  .mobile-bottom-nav button small { font-family:var(--sans); font-size:10px; font-weight:500; }
  .learnio-home-hero { grid-template-columns:1fr; min-height:0; padding:30px 24px; }
  .learnio-home-hero h2 { max-width:480px; font-size:42px; }
  .hero-poster { min-height:220px; margin-top:28px; transform:none; }
  .hero-j-mark,.hero-j-mark img { width:88px; height:88px; }
  .quick-actions button { min-height:124px; border-radius:16px; box-shadow:0 8px 22px rgba(32,27,29,.055); }
  .stat-card { min-height:126px; }
}

@media (max-width:560px) {
  .learnio-auth .auth-art { display:block; min-height:196px; padding:22px 20px 28px; }
  .learnio-auth .auth-art .brand { margin-bottom:28px; }
  .learnio-auth .auth-art-copy .eyebrow { margin:0 0 8px; }
  .learnio-auth .auth-art h1 { margin:0; font-size:36px; }
  .learnio-auth .auth-art h1 span { display:inline; }
  .learnio-auth .auth-art-copy > p:last-of-type,.auth-art-poster,.learnio-auth .trust-row { display:none; }
  .learnio-auth .auth-panel { padding:28px 20px calc(32px + env(safe-area-inset-bottom)); }
  .auth-logo { justify-content:center; margin-bottom:30px; text-align:left; }
  .auth-logo img { width:68px; height:68px; border-radius:21px; }
  .auth-logo strong { font-size:25px; }
  .learnio-auth .auth-card > .eyebrow { text-align:center; }
  .learnio-auth .auth-card h2 { font-size:32px; text-align:center; }
  .learnio-auth .auth-card > p { font-size:14px; text-align:center; }
  .learnio-auth .field input,.learnio-auth .field select { min-height:56px; }
  .learnio-home-hero { padding:28px 22px; border-radius:18px; }
  .learnio-home-hero h2 { max-width:310px; font-size:38px; }
  .learnio-home-hero p:not(.eyebrow) { max-width:330px; font-size:14px; }
  .learnio-home-hero .button-row { display:grid; }
  .learnio-home-hero .button-row .btn { width:100%; }
  .hero-benefits { display:grid; gap:8px; }
  .hero-poster { min-height:190px; padding:22px; }
  .hero-poster > strong { font-size:35px; }
  .quick-actions { gap:10px; }
  .quick-actions button { min-height:118px; padding:14px; }
  .quick-actions button > span { width:44px; height:44px; }
  .stats-grid { gap:10px; }
  .stat-card { min-height:120px; padding:15px; }
}

/* v43 — annotated J Test PDF completion */
.request-status-card {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:14px 16px;
  margin:22px 0 8px;
  padding:20px;
  border:1px solid #efc4ce;
  border-radius:18px;
  background:#fff7f9;
}
.request-status-card > p,.request-status-card > button { grid-column:1/-1; }
.request-status-card small,.request-status-card strong { display:block; }
.request-status-card small { margin-bottom:4px; color:#8a7c80; font-size:10px; font-weight:800; letter-spacing:.12em; }
.request-status-card p { margin:2px 0; color:#6f6266; font-size:13px; line-height:1.65; }
.request-waiting-icon { display:grid; grid-row:span 2; place-items:center; width:56px; height:56px; border-radius:17px; background:#fff; color:var(--red); box-shadow:0 8px 20px rgba(188,0,45,.1); }
.request-waiting-icon > span { width:24px; height:24px; border:3px solid #f2c9d3; border-top-color:var(--red); border-radius:50%; animation:request-spin .8s linear infinite; }
.request-waiting-icon .material-symbols-rounded { font-size:30px; }
.request-status-card.approved { border-color:#bfe3d4; background:#f2fbf7; }
@keyframes request-spin { to { transform:rotate(360deg); } }

.learner-notice-stack { display:grid; gap:10px; margin-bottom:18px; }
.learner-notice-stack article { display:flex; align-items:flex-start; gap:13px; padding:15px 17px; border:1px solid #efc9d2; border-radius:15px; background:#fff8fa; }
.learner-notice-stack article > span { display:grid; flex:0 0 38px; place-items:center; width:38px; height:38px; border-radius:12px; background:#fff0f3; color:var(--red); }
.learner-notice-stack small,.learner-notice-stack strong { display:block; }
.learner-notice-stack small { color:var(--red); font-size:9px; font-weight:900; letter-spacing:.12em; }
.learner-notice-stack strong { margin:3px 0; font-size:14px; }
.learner-notice-stack p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }

.section-link-button { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--red); font-weight:800; }
.section-link-button .material-symbols-rounded { font-size:18px; }
.protection-pill { display:inline-flex; align-items:center; gap:10px; max-width:280px; padding:11px 14px; border:1px solid #bfe0f0; border-radius:15px; background:#eff9ff; color:#12638a; }
.protection-pill > .material-symbols-rounded { flex:0 0 auto; font-size:24px; }
.protection-pill strong,.protection-pill small { display:block; }
.protection-pill strong { font-size:12px; }
.protection-pill small { margin-top:2px; color:#607d8b; font-size:10px; }
.capture-status,.one-way-note { display:inline-flex; align-items:center; gap:6px; padding:9px 11px; border:1px solid #cbe5f1; border-radius:11px; background:#f1faff; color:#17658b; font-size:11px; font-weight:800; }
.capture-status .material-symbols-rounded,.one-way-note .material-symbols-rounded { font-size:17px; }

.payment-booking-modal { width:min(100%,1040px); }
.payment-method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.payment-method-grid article { display:grid; grid-template-columns:44px 1fr auto; align-items:start; gap:12px; min-width:0; padding:15px; border:1px solid #e4e5e9; border-radius:15px; background:#fff; }
.payment-method-grid h3,.payment-method-grid p { margin:2px 0; }
.payment-method-grid p,.payment-method-grid code { overflow-wrap:anywhere; color:var(--muted); font-size:11px; }
.payment-method-grid code { display:inline-block; margin-top:5px; padding:4px 7px; border-radius:7px; background:#f5f5f7; }
.payment-method-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#fff0f3; color:var(--red); }
.payment-method-empty { display:flex; align-items:flex-start; gap:12px; margin:18px 0; padding:16px; border:1px dashed #d8d9df; border-radius:15px; color:var(--muted); }
.payment-method-empty > .material-symbols-rounded { color:var(--red); }
.payment-method-empty strong { display:block; margin-bottom:3px; color:var(--ink); }
.payment-method-empty p { margin:0; font-size:12px; line-height:1.55; }

.admin-publishing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.publish-card { min-width:0; padding:20px; }
.publish-card-head { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.publish-card-head > span { display:grid; flex:0 0 42px; place-items:center; width:42px; height:42px; border-radius:13px; background:#fff0f3; color:var(--red); }
.publish-card-head small,.publish-card-head h3 { display:block; margin:0; }
.publish-card-head small { color:var(--red); font-size:9px; font-weight:900; letter-spacing:.11em; }
.publish-card textarea { min-height:92px; }
.managed-upload { display:grid; gap:4px; margin:12px 0; padding:14px; border:1.5px dashed #e1a4b3; border-radius:13px; background:#fff7f9; cursor:pointer; }
.managed-upload input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.managed-upload span { display:flex; align-items:center; gap:7px; color:var(--red); font-size:12px; font-weight:800; }
.managed-upload small { color:var(--muted); font-size:10px; line-height:1.45; }
.publishing-lists { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.publishing-lists .card { min-width:0; padding:18px; }
.publishing-lists .admin-item { align-items:flex-start; }
.publishing-lists .admin-item p { overflow-wrap:anywhere; }

.profile-photo-picker { display:grid; justify-items:center; gap:8px; cursor:pointer; }
.profile-photo-picker input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.profile-photo-picker b { display:inline-flex; align-items:center; gap:6px; color:var(--red); font-size:12px; }
.profile-photo-picker small { color:var(--muted); font-size:10px; }
.profile-photo { overflow:hidden; }
.profile-photo img,.admin-user-summary .profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-access-card { min-width:0; }
.profile-location { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:13px; margin-top:18px; padding:15px; border:1px solid #e4e5e9; border-radius:15px; background:#fafafd; }
.profile-location > span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#eff9ff; color:#17658b; }
.profile-location small,.profile-location strong { display:block; }
.profile-location small { color:var(--muted); font-size:10px; }
.profile-location strong { margin:2px 0; font-size:13px; }
.profile-location p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.profile-actions { margin-top:20px; }

.masked-code { display:inline-flex; align-items:center; gap:6px; max-width:100%; }
.masked-code code { overflow-wrap:anywhere; }
.masked-code .icon-button { display:grid; flex:0 0 34px; place-items:center; width:34px; height:34px; }
.masked-code .material-symbols-rounded { font-size:18px; }
.admin-device-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }
.admin-device-facts > span { display:grid; grid-template-columns:34px 1fr; gap:8px; min-width:0; padding:12px; border:1px solid #e5e6ea; border-radius:13px; background:#fafafd; }
.admin-device-facts > span > .material-symbols-rounded { color:var(--red); }
.admin-device-facts small,.admin-device-facts strong { display:block; }
.admin-device-facts small { color:var(--muted); font-size:9px; }
.admin-device-facts strong { overflow-wrap:anywhere; margin:2px 0; font-size:12px; }
.admin-device-facts p { margin:0; color:var(--muted); font-size:9px; }
.monitoring-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.monitoring-summary article { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:10px; min-width:0; padding:14px; border:1px solid #e5e6ea; border-radius:14px; background:#fff; }
.monitoring-summary strong,.monitoring-summary small { display:block; }
.monitoring-summary small { overflow:hidden; margin-top:3px; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.monitoring-summary b { color:var(--red); font-size:11px; white-space:nowrap; }

.paste-uploader { outline:none; }
.paste-uploader:focus-visible { border-color:var(--red); box-shadow:0 0 0 4px rgba(188,0,45,.1); }
.photo-uploader span,.audio-uploader span { display:flex; align-items:center; justify-content:center; gap:7px; }
.translation-assistant { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; padding:13px; border:1px solid #cbe5f1; border-radius:13px; background:#f2faff; }
.translation-assistant > div:first-child { display:flex; align-items:flex-start; gap:8px; }
.translation-assistant p,.translation-assistant strong,.translation-assistant small { display:block; margin:0; }
.translation-assistant > div:first-child > span { color:#17658b; }
.translation-assistant small { margin-top:2px; color:var(--muted); font-size:10px; }
.bulk-format-guide { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0; }
.bulk-format-guide > div { padding:11px; border:1px solid #e4e5e9; border-radius:11px; background:#fafafd; }
.bulk-format-guide strong,.bulk-format-guide code { display:block; }
.bulk-format-guide strong { margin-bottom:5px; font-size:11px; }
.bulk-format-guide code { overflow-wrap:anywhere; color:var(--red); font-size:10px; }
.bulk-code-sample { max-height:260px; overflow:auto; padding:14px; border-radius:12px; background:#211e1e; color:#f8f3ed; font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.advanced-json > .field { margin-top:12px; }
.advanced-json > .field > span { color:var(--ink); font-size:12px; font-weight:800; }
.advanced-json textarea { margin-bottom:0; }

.course-card { text-align:left; }
.course-card h2 { margin:14px 0 8px; font-size:29px; }
.course-card .btn { display:inline-flex; align-items:center; margin-top:20px; }
.form-builder-toolbar,.paper-settings,.form-question-card { max-width:100%; }
.toolbar-menu > div { max-width:min(240px,calc(100vw - 40px)); }
.btn-secondary { border-color:#bfe0f0; background:#eff9ff; color:#155f84; }

@media (max-width:1100px) {
  .admin-publishing-grid,.publishing-lists { grid-template-columns:1fr 1fr; }
  .admin-publishing-grid > :last-child,.publishing-lists > :last-child { grid-column:1/-1; }
  .monitoring-summary { grid-template-columns:1fr 1fr; }
}

@media (max-width:800px) {
  .page-head { align-items:flex-start; gap:16px; }
  .protection-pill { width:100%; max-width:none; }
  .payment-method-grid,.admin-publishing-grid,.publishing-lists,.monitoring-summary,.admin-device-facts { grid-template-columns:1fr; }
  .admin-publishing-grid > :last-child,.publishing-lists > :last-child { grid-column:auto; }
  .payment-method-grid article { grid-template-columns:42px 1fr; }
  .payment-method-grid article > .btn { grid-column:1/-1; width:100%; }
  .translation-assistant { align-items:stretch; flex-direction:column; }
  .translation-assistant .button-row { display:grid; grid-template-columns:1fr; width:100%; }
  .translation-assistant .btn { width:100%; }
  .bulk-format-guide { grid-template-columns:1fr; }
  .form-builder-toolbar > .button-row { display:grid; grid-template-columns:1fr 1fr; }
  .form-builder-toolbar > .button-row > * { min-width:0; width:100%; }
  .toolbar-menu > div { right:auto; left:0; }
}

@media (max-width:560px) {
  .mobile-greeting { align-items:flex-start; }
  .mobile-greeting h2 { overflow-wrap:normal; word-break:keep-all; font-size:24px; }
  .mobile-greeting p { max-width:none; }
  .mobile-greeting img { display:none; }
  .admin-sidebar { overflow:hidden; }
  .admin-nav {
    display:grid;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:calc((100vw - 38px)/4);
    gap:6px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .admin-nav::-webkit-scrollbar { display:none; }
  .admin-nav-item { min-height:64px; scroll-snap-align:start; }
  .admin-nav-item strong { overflow:visible; font-size:9px; line-height:1.15; text-overflow:clip; white-space:normal; }
  .request-status-card { grid-template-columns:52px 1fr; padding:16px; }
  .request-waiting-icon { width:48px; height:48px; }
  .learner-notice-stack article { padding:13px; }
  .profile-location { grid-template-columns:40px 1fr; }
  .profile-location > .btn { grid-column:1/-1; width:100%; }
  .profile-actions { display:grid; width:100%; }
  .profile-actions .btn { width:100%; }
  .form-builder-toolbar > .button-row { grid-template-columns:1fr; }
  .course-card { padding:20px; }
  .course-card h2 { font-size:25px; }
  .question-help-row { align-items:stretch; flex-direction:column; }
  .question-help-row > * { justify-content:center; width:100%; }
  .capture-status { text-align:center; }
}

/* Responsive contract — the single final authority for screen layouts. */
:root {
  --touch-target:44px;
  --page-gutter:clamp(16px,3.2vw,48px);
  --section-gap:clamp(16px,2.4vw,30px);
}

html, body, #app { width:100%; min-width:0; max-width:100%; }
body { overflow-x:clip; }
:where(main,section,article,aside,header,footer,nav,div,form,fieldset,label) { min-width:0; }
:where(h1,h2,h3,h4,p,strong,small,span,code,a,button,label,td,th) { overflow-wrap:anywhere; }
.jp, [lang="ja"] { overflow-wrap:normal; word-break:normal; line-break:strict; }
img, svg, video, canvas, iframe { max-width:100%; height:auto; }
audio { width:100%; max-width:100%; }
.btn, .btn-sm, .icon-button, .modal-close, summary, .nav-item, .admin-nav-item, .mobile-bottom-nav button, .q-dot, .audio-button { min-height:var(--touch-target); }
.btn-sm { padding-inline:14px; }
.icon-button, .modal-close { min-width:var(--touch-target); width:var(--touch-target); height:var(--touch-target); padding:0; }
.field input, .field select, .field textarea { min-height:48px; max-width:100%; }
.check-row { display:flex; align-items:center; min-height:var(--touch-target); gap:10px; }
.check-row input, .exam-agreement input { flex:0 0 auto; width:22px; height:22px; }
.material-symbols-rounded { font-size:clamp(20px,1.6rem,26px); }
.modal-close, .upload-icon, .remove-photo, .editor-audio-preview .icon-button { font-size:0; }
.modal-close::before, .upload-icon::before, .remove-photo::before, .editor-audio-preview .icon-button::before {
  display:inline-block;
  font-family:"Material Symbols Rounded";
  font-size:24px;
  font-style:normal;
  font-weight:400;
  line-height:1;
  font-feature-settings:"liga";
}
.modal-close::before { content:"close"; }
.upload-icon::before { content:"cloud_upload"; font-size:30px; }
.remove-photo::before, .editor-audio-preview .icon-button::before { content:"close"; }
.button-row > * { min-width:0; }
.table-wrap, .bulk-code-sample, .advanced-json textarea { max-width:100%; }
.bulk-code-sample, .advanced-json textarea { overflow:auto; }
.splash, .pending-shell, .app-shell, .main, .exam-shell, .admin-shell { min-height:100vh; min-height:100svh; }
.sidebar, .admin-sidebar { height:100vh; height:100svh; }

/* Login and access requests: stacked by default, wide only at a true desktop width. */
.learnio-auth {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-height:100vh;
  min-height:100svh;
  background:#fff;
}
.learnio-auth .auth-art {
  display:grid;
  grid-template-rows:auto auto;
  align-content:center;
  gap:clamp(22px,4vw,38px);
  min-height:clamp(270px,36vw,410px);
  padding:clamp(28px,5vw,54px) var(--page-gutter);
}
.learnio-auth .auth-art-copy { width:min(100%,720px); }
.learnio-auth .auth-art-copy .eyebrow { margin-bottom:10px; }
.learnio-auth .auth-art h1 { margin:0; font-size:clamp(38px,7vw,64px); }
.learnio-auth .auth-art-copy > p:last-of-type { max-width:620px; margin:16px 0 0; }
.learnio-auth .auth-art-poster, .learnio-auth .trust-row { display:none; }
.learnio-auth .auth-panel {
  display:grid;
  place-items:start center;
  min-height:0;
  padding:clamp(30px,5vw,58px) var(--page-gutter) calc(clamp(34px,5vw,64px) + env(safe-area-inset-bottom));
}
.learnio-auth .auth-card { width:min(100%,520px); }
.auth-logo { margin-bottom:clamp(24px,4vw,38px); }
.learnio-auth .auth-card h2 { font-size:clamp(30px,5vw,43px); }
.learnio-auth .field input, .learnio-auth .field select, .learnio-auth .auth-card .btn-primary { min-height:56px; }
.request-status-card { max-width:100%; }

.course-shell { padding:clamp(18px,4vw,42px); }
.course-shell-inner { width:min(100%,960px); }
.course-shell-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; }

/* Fluid application foundations. */
.main { overflow-x:clip; container-name:student-main; container-type:inline-size; }
.admin-workspace { overflow-x:clip; container-name:admin-main; container-type:inline-size; }
.page { width:min(100%,1240px); padding-inline:var(--page-gutter); }
.admin-page { width:min(100%,1320px); padding-inline:var(--page-gutter); }
.hero, .learnio-home-hero, .admin-command-card { min-width:0; }
.card-grid, .stats-grid, .quick-actions, .learning-resource-grid, .topic-practice-grid, .material-grid, .admin-metrics { align-items:stretch; }
.card, .stat-card, .test-row, .learning-resource-card, .topic-practice-card, .admin-panel, .admin-metrics article { min-width:0; }
.test-row, .result-history-card, .learning-resource-card, .admin-item, .monitor-event { max-width:100%; }
.test-copy, .test-title-row, .test-action, .result-history-main, .learning-resource-card > div { min-width:0; }
.test-title-row, .page-head, .section-head, .panel-head, .result-topbar, .result-report-head { flex-wrap:wrap; }
.test-action-buttons .btn, .result-history-actions .btn { white-space:normal; }
.page img, .page video, .page canvas, .admin-page img, .admin-page video, .admin-page canvas { max-width:100%; }
.app-icon { display:block; flex:0 0 auto; width:1em; height:1em; overflow:visible; }
button, [role="button"] { min-width:var(--touch-target); min-height:46px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { min-height:46px; }
.admin-avatar { width:var(--touch-target); height:var(--touch-target); }
.page a[href], .admin-page a[href], .pending-shell a[href] {
  display:inline-flex; align-items:center; min-height:var(--touch-target); overflow-wrap:anywhere;
}
.page button, .page select, .page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.admin-page button, .admin-page select, .admin-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.result-page .btn { min-height:46px; }
.section-head > *, .page-head > *, .panel-head > *, .modal-head > * { min-width:0; }
.section-head > button, .page-head button, .panel-head > button, .section-link-button { min-width:var(--touch-target); }
.section-head button, .section-link-button {
  display:inline-flex; align-items:center; justify-content:flex-end; gap:8px;
  max-width:100%; white-space:normal; text-align:right;
}
.section-head button .app-icon, .section-link-button .app-icon, .btn .app-icon { flex:0 0 auto; }
.home-page > .card-grid .card { display:flex; flex-direction:column; padding:clamp(20px,2vw,26px); }
.home-page > .card-grid .card > .btn { align-self:flex-start; margin-top:auto; }
.home-page > .card-grid .card-meta { width:100%; }
.history-count { flex:0 0 auto; align-content:center; text-align:center; }
.catalog-strip > div, .test-row > *, .result-history-card > *, .profile-location > *, .admin-user-summary > * { min-width:0; }
.catalog-strip span, .test-action small, .managed-upload span, .managed-upload small, .upload-zone, .photo-uploader, .audio-uploader { overflow-wrap:anywhere; }
.protection-pill { flex:0 1 280px; min-width:0; }
.protection-pill > span { min-width:0; }
.form-question-card, .question-editor-body, .question-classification, .form-media-grid, .support-grid { min-width:0; }
.form-question-card input, .form-question-card textarea, .form-question-card select { max-width:100%; }
.mobile-bottom-nav { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
.modal-backdrop, .language-overlay { min-height:100vh; min-height:100svh; }
.modal, .language-dialog { max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); max-height:calc(100svh - 32px); overflow:auto; overscroll-behavior:contain; }

/* Important copy must wrap instead of disappearing behind an ellipsis. */
.quick-actions strong,
.quick-actions small,
.quick-admin button strong,
.quick-admin button small,
.admin-metrics p,
.monitoring-summary small,
.collapsed-question-summary strong,
.test-row p,
.exam-identity strong,
.exam-identity span,
.exam-candidate strong {
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}
.paper-settings .check-row { min-height:44px; white-space:normal; }
.quick-admin > div:last-child button { align-content:start; }
.quick-admin button strong { line-height:1.25; }
.quick-admin button small { line-height:1.35; }

/* Exam and result content never depends on fixed card heights. */
.exam-shell { min-width:0; }
.question-card { min-height:0; }
.exam-layout > *, .question-meta > *, .question-help-row > *, .audio-box > * { min-width:0; }
.question-photo { max-height:min(42vh,420px); }
.reading-box, .question-text, .option-text { max-width:100%; overflow-wrap:anywhere; }
.q-dot { min-width:var(--touch-target); }
.result-screen, .result-report, .result-answer-table-wrap { max-width:100%; }
.result-receipt-bar > *, .result-report-summary > *, .analysis-grid > * { min-width:0; }

/* Desktop auth and application. */
@media (min-width:1280px) {
  .learnio-auth { grid-template-columns:minmax(470px,.95fr) minmax(500px,1.05fr); }
  .learnio-auth .auth-art {
    grid-template-rows:auto minmax(0,1fr) auto;
    align-content:stretch;
    min-height:100vh;
    min-height:100svh;
    padding:clamp(34px,4.5vw,68px);
  }
  .learnio-auth .auth-art-copy { align-self:center; }
  .learnio-auth .auth-art h1 { font-size:clamp(50px,5vw,76px); }
  .learnio-auth .auth-art-copy > p:last-of-type { margin-top:22px; }
  .learnio-auth .auth-art-poster { display:grid; }
  .learnio-auth .trust-row { display:flex; align-self:end; }
  .learnio-auth .auth-panel { place-items:center; min-height:100vh; min-height:100svh; padding:clamp(32px,4vw,64px); }
  .admin-more-nav { display:none; }
}

/* Compact desktop and tablet landscape. */
@media (min-width:801px) and (max-width:1279px) {
  .app-shell { grid-template-columns:96px minmax(0,1fr); }
  .sidebar { width:auto; padding:18px 9px 12px; overflow-y:auto; }
  .sidebar .brand { justify-content:center; padding:0 0 15px; }
  .sidebar .brand img { width:48px; height:48px; border-radius:15px; }
  .sidebar .brand > span { display:none; }
  .side-nav { gap:5px; margin-top:0; overflow:visible; }
  .nav-item { flex-direction:column; justify-content:center; gap:4px; min-height:57px; padding:7px 3px; font-size:9px; line-height:1.15; text-align:center; white-space:normal; }
  .nav-icon { width:auto; }
  .side-user { display:grid; justify-items:center; padding:8px 5px; }
  .side-user .user-line > div:last-child { display:none; }
  .logout-link { display:grid; place-items:center; width:44px; min-height:44px; margin-top:7px; font-size:0; }
  .logout-link .app-icon { font-size:22px; }
  .page { padding:clamp(24px,3vw,38px); }
  .stats-grid, .quick-actions, .card-grid, .learning-resource-grid, .material-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .test-list, .admin-operations-grid, .admin-operations-grid.lower { grid-template-columns:1fr; }
  .admin-shell { grid-template-columns:96px minmax(0,1fr); }
  .admin-sidebar { width:auto; padding:18px 9px 12px; overflow-y:auto; }
  .admin-brand { justify-content:center; padding:0 0 17px; }
  .admin-brand .brand > span, .admin-badge, .admin-nav-label, .admin-system-card { display:none; }
  .admin-nav { gap:5px; }
  .admin-nav-item { grid-template-columns:1fr; grid-template-rows:24px auto; justify-items:center; align-content:center; gap:4px; min-height:58px; padding:6px 3px; text-align:center; }
  .admin-nav-item strong { overflow:visible; font-size:9px; line-height:1.12; text-overflow:clip; white-space:normal; }
  .admin-nav-item > span { font-size:22px; }
  .admin-nav-item i { position:absolute; top:2px; right:5px; }
  .admin-signout { display:grid; place-items:center; min-height:46px; padding:0; font-size:0; text-align:center; }
  .admin-signout .app-icon { font-size:22px; }
  .admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-command-card { grid-template-columns:minmax(0,1fr) 180px; }
  .admin-more-nav { display:none; }
  .official-top { grid-template-columns:auto minmax(180px,1fr) auto auto; gap:12px; padding-inline:16px; }
  .official-top .exam-candidate { display:none; }
  .exam-layout { grid-template-columns:minmax(0,1fr) 230px; padding:18px; }
  .section-step { min-width:145px; }
}

/* Phone and tablet portrait. */
@media (max-width:800px) {
  body { min-width:0; }
  .app-shell, .admin-shell { display:block; }
  .main { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .page { padding:20px var(--page-gutter) 34px; }
  .page-head { align-items:flex-start; gap:14px; }
  .page-head h2 { font-size:clamp(30px,8vw,40px); }
  .page-head > .button-row { width:100%; }
  .page-head > .button-row .btn { flex:1 1 180px; }
  .hero, .learnio-home-hero { grid-template-columns:minmax(0,1fr); min-height:0; padding:clamp(22px,5vw,30px); }
  .hero-copy { min-width:0; }
  .hero-score { display:none; }
  .learnio-home-hero h2, .home-page .hero h2 { max-width:100%; font-size:clamp(32px,9vw,42px); }
  .hero-poster { min-height:180px; margin-top:24px; }
  .quick-actions, .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card-grid, .test-list, .topic-practice-grid, .material-grid { grid-template-columns:1fr; }
  .learning-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .test-row { grid-template-columns:auto minmax(0,1fr); align-items:start; }
  .test-action { grid-column:1/-1; width:100%; }
  .test-action-buttons { display:grid; grid-template-columns:1fr; width:100%; }
  .result-history-card { grid-template-columns:auto minmax(0,1fr); }
  .result-history-actions { grid-column:1/-1; width:100%; }
  .course-shell { align-items:start; }
  .course-shell-top { margin-bottom:22px; }
  .course-select { grid-template-columns:1fr; }

  .modal-backdrop { align-items:end; padding:0; }
  .modal {
    width:100%; max-width:100%; max-height:calc(100vh - 20px); max-height:calc(100svh - 20px);
    padding:24px 18px calc(24px + env(safe-area-inset-bottom));
    border-radius:26px 26px 0 0;
  }
  .modal-head { align-items:flex-start; }
  .details-grid, .support-grid, .form-media-grid, .upload-panel, .profile-grid, .admin-grid, .payment-method-grid { grid-template-columns:1fr; }

  .official-top {
    position:sticky;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"identity timer" "actions actions";
    gap:10px 12px;
    min-height:0;
    padding:10px 12px;
  }
  .official-top > .brand { display:none; }
  .official-top .exam-identity { display:block; grid-area:identity; }
  .official-top .exam-candidate { display:none; }
  .official-top .exam-timer { grid-area:timer; align-self:start; min-width:82px; padding:9px 11px; font-size:16px; }
  .official-top .exam-timer small { display:none; }
  .official-top .exam-actions { position:static; grid-area:actions; display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .official-top .exam-actions .btn { display:inline-flex; width:100%; }
  .exam-security { min-height:40px; padding:8px 12px; text-align:center; line-height:1.4; }
  .section-progress { position:static; justify-content:flex-start; padding:9px 12px; }
  .section-step { flex:0 0 min(70vw,190px); min-width:0; }
  .exam-layout { grid-template-columns:1fr; gap:12px; padding:12px; }
  .exam-nav { position:static; order:-1; padding:15px; }
  .question-map { grid-template-columns:repeat(5,minmax(44px,1fr)); max-height:none; }
  .question-card { padding:clamp(18px,4vw,26px); border-radius:18px; }
  .question-meta, .question-help-row { align-items:flex-start; flex-direction:column; }
  .question-meta { margin-bottom:20px; }
  .question-count { align-self:flex-start; }
  .question-text { font-size:clamp(21px,6vw,28px); }
  .audio-box { align-items:stretch; flex-direction:column; }
  .audio-button { justify-content:center; width:100%; border:1px solid rgba(255,255,255,.24); border-radius:12px; }
  .option { grid-template-columns:36px minmax(0,1fr); padding:12px; }
  .question-footer { display:grid; grid-template-columns:1fr 1fr; }
  .question-footer .btn { width:100%; padding-inline:12px; }
  .question-footer .btn:nth-child(3) { grid-column:1/-1; }
  .language-overlay { align-items:end; padding:0; }
  .language-dialog { width:100%; max-width:100%; max-height:calc(100svh - 20px); padding:24px 18px calc(24px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; }
  .language-choices { grid-template-columns:1fr; }

  .pending-shell.result-page { padding:12px; }
  .result-topbar { align-items:flex-start; }
  .result-topbar .button-row { flex:1 1 320px; justify-content:flex-end; }
  .analysis-grid { grid-template-columns:1fr; }
  .result-report-head { display:block; padding:22px 18px; }
  .result-report-head .btn { width:100%; margin-top:12px; }
  .result-report-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .result-section-group { padding:20px 14px 6px; }
  .result-answer-table-wrap { overflow:visible; border:0; }
  .result-answer-table, .result-answer-table tbody { display:block; width:100%; min-width:0; }
  .result-answer-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .result-answer-table tr { display:block; margin-bottom:12px; overflow:hidden; border:1px solid var(--line); border-radius:14px; }
  .result-answer-table td { display:grid; grid-template-columns:minmax(80px,30%) minmax(0,1fr); gap:10px; padding:11px 12px; border-top:1px solid var(--line); text-align:left; }
  .result-answer-table td::before { color:var(--muted); content:attr(data-label); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
  .result-answer-table td:first-child { border-top:0; box-shadow:none !important; }

  .admin-sidebar {
    position:sticky; top:0; z-index:50;
    display:block; width:100%; height:auto; min-height:0;
    padding:8px 8px calc(8px + env(safe-area-inset-top)); overflow:visible;
    border-bottom:1px solid var(--line); background:rgba(255,255,255,.98); color:var(--ink); box-shadow:0 7px 24px rgba(23,27,46,.08);
  }
  .admin-brand, .admin-nav-label, .admin-system-card, .admin-signout { display:none; }
  .admin-nav {
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:minmax(0,1fr);
    gap:6px; width:100%; overflow:visible;
  }
  .admin-nav-item { display:grid; grid-template-columns:1fr; grid-template-rows:28px auto; justify-items:center; align-content:center; gap:3px; min-height:58px; padding:5px 3px; border-radius:12px; color:#73798a; text-align:center; }
  .admin-nav-item.active, .admin-more-nav.active > summary { background:#fff0f3; color:var(--red); box-shadow:none; }
  .admin-nav-item > span { font-size:23px; }
  .admin-nav-item strong { overflow:visible; font-size:9px; line-height:1.08; text-overflow:clip; white-space:normal; }
  .admin-nav-item i { position:absolute; top:1px; right:7px; }
  .admin-nav > .admin-nav-secondary { display:none; }
  .admin-more-nav { position:relative; display:block; min-width:0; }
  .admin-more-nav > summary { width:100%; list-style:none; }
  .admin-more-nav > summary::-webkit-details-marker { display:none; }
  .admin-more-sheet { position:absolute; z-index:80; top:calc(100% + 10px); right:0; display:grid; gap:5px; width:min(310px,calc(100vw - 20px)); padding:9px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 20px 45px rgba(23,27,46,.18); }
  .admin-more-item { display:grid; grid-template-columns:34px minmax(0,1fr) 24px; align-items:center; gap:8px; min-height:50px; padding:7px 10px; border:0; border-radius:11px; background:#fff; color:var(--ink); text-align:left; }
  .admin-more-item.active { background:#fff0f3; color:var(--red); }
  .admin-more-item > span { display:grid; place-items:center; }
  .admin-top { position:sticky; top:74px; min-height:64px; padding:0 14px; }
  .admin-live { display:none; }
  .admin-page { padding:18px var(--page-gutter) 36px; }
  .admin-command-card { grid-template-columns:1fr; min-height:0; padding:24px 20px; }
  .admin-command-card h1 { font-size:clamp(30px,9vw,42px); }
  .command-orbit { display:none; }
  .admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-operations-grid, .admin-operations-grid.lower, .admin-publishing-grid, .publishing-lists, .monitoring-summary, .admin-device-facts { grid-template-columns:1fr; }
  .admin-publishing-grid > :last-child, .publishing-lists > :last-child { grid-column:auto; }
  .admin-panel, .admin-page .card { padding:18px; }
  .admin-item { grid-template-columns:minmax(0,1fr) auto; }
  .form-question-head, .question-classification, .paper-settings, .support-grid, .form-media-grid { grid-template-columns:1fr; }
  .form-question-head .question-card-actions { justify-self:stretch; }
  .form-builder-toolbar { align-items:stretch; flex-direction:column; }
  .form-builder-toolbar > .button-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .form-builder-toolbar > .button-row > * { width:100%; }
  .sticky-save { right:12px; bottom:12px; left:12px; width:auto; max-width:none; }

  .table-wrap { overflow:visible; border:0; background:transparent; }
  .table-wrap table, .table-wrap tbody { display:block; width:100%; min-width:0; }
  .table-wrap thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); }
  .table-wrap tr { display:block; margin-bottom:12px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 7px 20px rgba(23,27,46,.04); }
  .table-wrap td { display:grid; grid-template-columns:minmax(92px,32%) minmax(0,1fr); align-items:start; gap:10px; min-height:44px; padding:11px 12px; border-top:1px solid var(--line); text-align:left; }
  .table-wrap td:first-child { border-top:0; }
  .table-wrap td::before { color:var(--muted); content:attr(data-label); font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
  .table-wrap td .button-row { display:grid; grid-template-columns:1fr; width:100%; }
  .table-wrap td .btn { width:100%; }
}

/* Compact phones. */
@media (max-width:560px) {
  :root { --page-gutter:16px; }
  .learnio-auth .auth-art { display:grid; min-height:0; padding:20px 18px 24px; gap:18px; }
  .learnio-auth .auth-art .brand { margin:0; }
  .learnio-auth .auth-art h1 { font-size:clamp(30px,10vw,38px); }
  .learnio-auth .auth-art-copy > p:last-of-type { display:none; }
  .learnio-auth .auth-panel { padding:26px 16px calc(30px + env(safe-area-inset-bottom)); }
  .auth-logo { justify-content:flex-start; margin-bottom:24px; }
  .auth-logo img { width:58px; height:58px; border-radius:18px; }
  .auth-logo strong { font-size:23px; }
  .learnio-auth .auth-card > .eyebrow, .learnio-auth .auth-card h2, .learnio-auth .auth-card > p { text-align:left; }
  .learnio-auth .auth-card h2 { font-size:clamp(29px,9vw,34px); }
  .request-status-card { grid-template-columns:48px minmax(0,1fr); padding:15px; }
  .request-status-card > * { min-width:0; }
  .request-details { grid-template-columns:1fr; }
  .request-details div + div { border-top:1px solid var(--line); border-left:0; }
  .pending-card { padding:28px 18px; }
  .pending-card .button-row, .course-shell-top { align-items:stretch; flex-direction:column; }
  .pending-card .btn, .course-shell-top .btn { width:100%; }

  .mobile-greeting h2 { font-size:clamp(22px,7vw,26px); }
  .quick-actions { gap:10px; }
  .quick-actions button { min-height:124px; padding:14px; }
  .quick-actions button > span { width:44px; height:44px; }
  .stats-grid { gap:10px; }
  .stat-card { min-height:120px; padding:15px; }
  .learning-resource-grid { grid-template-columns:1fr; }
  .home-page .hero .button-row, .result-topbar .button-row, .result-history-actions, .profile-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .home-page .hero .btn, .result-topbar .btn, .result-history-actions .btn, .profile-actions .btn { width:100%; }
  .result-topbar { grid-template-columns:minmax(0,1fr); justify-content:stretch; align-items:stretch; width:100%; }
  .result-topbar > *, .result-topbar .button-row { width:100%; min-width:0; }
  .test-row, .result-history-card { grid-template-columns:1fr; }
  .test-number, .receipt-stamp { justify-self:start; }
  .test-title-row { align-items:flex-start; }
  .result-report-summary { grid-template-columns:1fr 1fr; }
  .result-answer-table td, .table-wrap td { grid-template-columns:82px minmax(0,1fr); padding:10px; }
  .result-section-heading { display:block; }
  .result-section-heading > span { display:inline-block; margin-top:8px; }

  .official-top { grid-template-columns:minmax(0,1fr) auto; }
  .official-top .exam-identity strong { font-size:12px; white-space:normal; }
  .official-top .exam-actions { grid-template-columns:1fr; }
  .section-step { flex-basis:74vw; }
  .question-help-row > * { width:100%; }
  .your-language, .flag-control { justify-content:center; }
  .image-options { grid-template-columns:1fr 1fr; }
  .question-footer { grid-template-columns:1fr; }
  .question-footer .btn:nth-child(3) { grid-column:auto; }

  .admin-top > div:first-child strong { font-size:14px; }
  .admin-page .page-head > .button-row, .admin-command-card .button-row, .form-builder-toolbar > .button-row, .question-card-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .admin-page .page-head .btn, .admin-command-card .btn, .form-builder-toolbar .btn, .question-card-actions .btn { width:100%; }
  .admin-metrics { grid-template-columns:1fr; }
  .admin-item { grid-template-columns:1fr; }
  .admin-item > div:last-child, .admin-item > button { width:100%; }
  .admin-item > div:last-child .btn, .admin-item > button { width:100%; }
  .sticky-save { align-items:stretch; flex-direction:column; }
  .sticky-save .btn { width:100%; }
  .form-question-card { padding:18px 14px; }
  .collapsed-question-summary { grid-template-columns:44px minmax(0,1fr); }
  .collapsed-question-summary .btn { grid-column:1/-1; width:100%; }
}

/* Component-width logic keeps grids balanced even beside a rail or at browser zoom. */
@container student-main (min-width:960px) {
  .quick-actions, .stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .home-page > .card-grid, .compact-tools { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .learning-resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .topic-practice-grid, .material-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .test-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@container student-main (min-width:620px) and (max-width:959px) {
  .quick-actions, .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-page > .card-grid, .compact-tools, .learning-resource-grid, .topic-practice-grid, .material-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-page > .card-grid > .card:last-child:nth-child(odd),
  .compact-tools > .card:last-child:nth-child(odd) { grid-column:1/-1; }
  .test-list { grid-template-columns:1fr; }
}

@container admin-main (min-width:1040px) {
  .admin-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .admin-operations-grid, .admin-operations-grid.lower { grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); }
  .admin-publishing-grid, .publishing-lists { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@container admin-main (min-width:620px) and (max-width:1039px) {
  .admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-operations-grid, .admin-operations-grid.lower, .admin-publishing-grid, .publishing-lists { grid-template-columns:1fr; }
}

@media (max-width:800px) {
  .page, .admin-page { width:100%; }
  .section-head { align-items:flex-end; }
  .section-head button, .section-link-button { flex:0 1 auto; }
  .page-head .history-count { align-self:flex-start; }
  .protection-pill { flex-basis:100%; width:100%; max-width:100%; }
  .catalog-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-strip > div { padding:14px; }
  .test-action { align-items:stretch; flex-direction:column; }
  .test-action small { max-width:none; text-align:left; }
  .profile-location { grid-template-columns:42px minmax(0,1fr); }
  .profile-location > .btn { grid-column:1/-1; width:100%; }
  .admin-user-summary { grid-template-columns:auto minmax(0,1fr); }
  .admin-user-summary > .btn { grid-column:1/-1; width:100%; }
}

@media (max-width:560px) {
  .section-head { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; }
  .section-head button, .section-link-button { justify-self:start; justify-content:flex-start; width:auto; text-align:left; }
  .results-history-page .page-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  .history-count { min-width:78px; min-height:72px; padding:9px; font-size:24px; border-radius:18px; }
  .card-meta, .topic-card-foot, .result-history-head, .result-filter { align-items:flex-start; flex-wrap:wrap; }
  .test-title-row h3, .card h3, .learning-resource-card h3, .topic-practice-card h3 { overflow-wrap:anywhere; }
  .question-map { grid-template-columns:repeat(4,minmax(44px,1fr)); }
  .managed-upload span, .profile-photo-picker b { align-items:flex-start; flex-wrap:wrap; }
}

/* v55: restore natural page scrolling and share the login's crimson/white dashboard theme. */
html {
  min-height:100%;
  overflow-x:clip;
  overflow-y:auto;
  scroll-behavior:auto;
}
body {
  min-height:100%;
  overflow-x:clip;
  overflow-y:auto;
  overscroll-behavior-y:auto;
}
#app,
.app-shell,
.admin-shell,
.main,
.admin-workspace {
  height:auto;
  max-height:none;
  overflow-y:visible;
}
.app-shell,
.admin-shell {
  align-items:start;
  min-height:100vh;
  min-height:100svh;
  background:linear-gradient(180deg,#fff 0%,#fff8fa 58%,#fff 100%);
}
.main,
.admin-workspace {
  min-height:100vh;
  min-height:100svh;
  background:transparent;
}
.page,
.admin-page { background:transparent; }
.admin-page { padding-bottom:clamp(48px,7vw,88px); }

/* The save action now belongs to the form flow instead of covering the editor. */
.sticky-save {
  position:static;
  inset:auto;
  width:100%;
  max-width:none;
  margin:20px 0 0;
  padding:14px 16px;
  border:1px solid #edc2cc;
  border-radius:18px;
  background:#fff4f6;
  color:#272327;
  box-shadow:0 12px 28px rgba(94,23,40,.08);
}
.sticky-save span { color:#746a6e; }
.sticky-save strong { color:#272327; }

.topbar,
.admin-top {
  border-bottom-color:#f0d6dc;
  background:rgba(255,255,255,.96);
  box-shadow:0 7px 24px rgba(95,20,38,.05);
}
.security-pill,
.admin-live {
  border-color:#edc2cc;
  background:#fff4f6;
  color:#9f0026;
}
.top-avatar,
.admin-avatar,
.avatar { background:#bc002d; }

.learnio-home-hero,
.admin-command-card {
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,#bc002d 0%,#a40027 58%,#8f0022 100%);
  box-shadow:0 22px 48px rgba(120,0,29,.2);
}
.admin-command-card::before {
  border-color:rgba(255,255,255,.09);
}
.admin-command-card p { color:rgba(255,255,255,.8); }
.admin-command-card .btn {
  border-color:#fff;
  background:#fff;
  color:#bc002d;
  box-shadow:0 10px 24px rgba(87,0,21,.2);
}
.admin-command-card .btn:hover { background:#fff6f8; }
.admin-command-card .btn-secondary {
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.1);
  color:#fff;
  box-shadow:none;
}

.home-page .quick-actions button,
.home-page .stat-card,
.home-page > .card-grid .card,
.admin-page .admin-panel,
.admin-page .admin-metrics article,
.admin-page .card,
.admin-page .form-question-card,
.admin-page .form-builder-toolbar,
.admin-page .table-wrap tr {
  border-color:#efd3da;
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fffafb 100%);
  box-shadow:0 12px 30px rgba(95,20,38,.07);
}
.home-page .quick-actions button:hover,
.home-page > .card-grid .card:hover,
.admin-page .admin-panel:hover {
  border-color:#e3a8b6;
  box-shadow:0 16px 34px rgba(95,20,38,.1);
}
.home-page .quick-actions button > span,
.home-page .card-icon,
.home-page .stat-symbol,
.admin-page .metric-icon {
  border:1px solid #efc2cc;
  border-radius:16px;
  background:#fff0f3;
  color:#bc002d;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),0 8px 18px rgba(110,10,34,.07);
}
.home-page .btn,
.admin-page .btn { border-radius:14px; }
.home-page .btn-secondary,
.admin-page .btn-secondary {
  border-color:#edbac6;
  background:#fff3f6;
  color:#9f0026;
}
.home-page .btn-secondary:hover,
.admin-page .btn-secondary:hover {
  border-color:#bc002d;
  background:#ffecef;
}
.admin-badge {
  border:1px solid rgba(255,255,255,.38);
  background:rgba(255,255,255,.14);
  color:#fff;
}

@media (min-width:801px) {
  .sidebar,
  .admin-sidebar {
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:auto;
    border-right:0;
    background:linear-gradient(180deg,#bc002d 0%,#a40027 58%,#8f0022 100%);
    color:#fff;
    box-shadow:12px 0 34px rgba(96,0,23,.14);
    scrollbar-color:rgba(255,255,255,.4) transparent;
  }
  .side-nav { overflow:visible; }
  .sidebar .brand > span,
  .sidebar .brand > span > span,
  .admin-brand .brand > span,
  .admin-brand .brand > span > span { color:#fff; }
  .sidebar .brand small,
  .admin-brand .brand small { color:rgba(255,255,255,.64); }
  .sidebar .brand img,
  .admin-brand .brand img { border-color:rgba(255,255,255,.68); box-shadow:0 12px 26px rgba(87,0,21,.22); }
  .nav-item,
  .admin-nav-item { color:rgba(255,255,255,.76); }
  .nav-item:hover,
  .admin-nav-item:hover { background:rgba(255,255,255,.11); color:#fff; }
  .nav-item.active,
  .admin-nav-item.active {
    background:#fff;
    color:#bc002d;
    box-shadow:0 10px 24px rgba(78,0,19,.2);
  }
  .nav-item.active .nav-icon { color:#bc002d; }
  .admin-nav-label { color:rgba(255,255,255,.54); }
  .side-user,
  .admin-system-card {
    border-color:rgba(255,255,255,.24);
    background:rgba(255,255,255,.11);
    color:#fff;
    backdrop-filter:blur(10px);
  }
  .side-user small,
  .admin-system-card small { color:rgba(255,255,255,.64); }
  .logout-link,
  .admin-signout { color:rgba(255,255,255,.76); }
  .logout-link:hover,
  .admin-signout:hover { background:rgba(255,255,255,.11); color:#fff; }
}

@media (max-width:800px) {
  .admin-sidebar {
    border-bottom-color:#efd3da;
    background:rgba(255,255,255,.98);
    box-shadow:0 8px 24px rgba(95,20,38,.07);
  }
  .mobile-bottom-nav { border-color:#efd3da; box-shadow:0 -8px 24px rgba(95,20,38,.07); }
  .sticky-save { align-items:stretch; width:100%; }
}

/* v56: one responsive component system for learner and admin application surfaces. */
:is(.prep-card,.practice-special,.managed-resource,.notification-item,.profile-identity-card,.profile-streak-card,.payment-qr-preview,.replacement-code-panel),
:is(.prep-card,.practice-special,.managed-resource,.notification-item,.profile-identity-card,.profile-streak-card,.payment-qr-preview,.replacement-code-panel) * {
  min-width:0;
}
:is(.prep-card,.practice-special,.managed-resource,.notification-item,.profile-identity-card,.profile-streak-card) :is(h2,h3,h4,p,strong,small,span,button),
.btn {
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}
.btn {
  max-width:100%;
  min-height:44px;
  line-height:1.25;
}
.card-icon,
.card-icon .app-icon,
.practice-tool-head .app-icon,
.prep-card-head .app-icon {
  overflow:visible;
}

/* Learner notifications stay beside the profile avatar without crowding the header. */
.notification-wrap { position:relative; flex:0 0 auto; }
.notification-button {
  position:relative;
  display:grid;
  place-items:center;
  width:46px;
  min-width:46px;
  height:46px;
  padding:0;
  border:1px solid #efc2cc;
  border-radius:15px;
  background:#fff7f9;
  color:#bc002d;
  box-shadow:0 7px 18px rgba(95,20,38,.07);
}
.notification-button .app-icon { width:22px; height:22px; }
.notification-button > i {
  position:absolute;
  top:-4px;
  right:-4px;
  display:grid;
  place-items:center;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border:2px solid #fff;
  border-radius:20px;
  background:#bc002d;
  color:#fff;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}
.notification-panel {
  position:absolute;
  z-index:120;
  top:calc(100% + 12px);
  right:0;
  width:min(390px,calc(100vw - 24px));
  max-height:min(70svh,560px);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid #efd3da;
  border-radius:20px;
  background:#fff;
  box-shadow:0 24px 60px rgba(70,12,27,.18);
}
.notification-panel-head {
  position:sticky;
  z-index:1;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid #f0dce1;
  background:rgba(255,255,255,.97);
}
.notification-panel-head div { display:grid; gap:2px; }
.notification-panel-head small { color:#bc002d; font-size:10px; font-weight:900; letter-spacing:.11em; }
.notification-panel-head strong { font-size:18px; }
.notification-panel-head button {
  min-height:44px;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:#a40027;
  font-weight:800;
}
.notification-list { display:grid; padding:8px; }
.notification-item {
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  align-items:start;
  gap:10px;
  width:100%;
  min-height:64px;
  padding:12px 10px;
  border:0;
  border-radius:13px;
  background:#fff;
  color:#171b2e;
  text-align:left;
}
.notification-item:hover { background:#fff5f7; }
.notification-item > i { width:7px; height:7px; margin-top:7px; border-radius:50%; background:#d9dce4; }
.notification-item.unread > i { background:#bc002d; }
.notification-item > span { display:grid; gap:3px; }
.notification-item small { color:#bc002d; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.notification-item strong { line-height:1.25; }
.notification-item p { margin:0; color:#707585; font-size:13px; line-height:1.4; }
.notification-item time { color:#8a8e9c; font-size:11px; }
.notification-empty { padding:24px 16px; text-align:center; }
.notification-empty p { margin:5px 0 0; color:#777c8c; font-size:13px; line-height:1.45; }

/* Recommendation cards: the icon and label are one header, not separate floating rows. */
.preparation-grid { align-items:stretch; gap:18px; }
.prep-card {
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:0;
  padding:26px;
}
.prep-card-head,
.practice-tool-head {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
}
.prep-card-head .card-icon,
.practice-tool-head .card-icon {
  flex:0 0 54px;
  width:54px;
  height:54px;
  margin:0;
}
.prep-card-head .tag,
.practice-tool-head .tag {
  align-self:center;
  width:auto;
  max-width:calc(100% - 66px);
  margin:0;
}
.prep-card-copy { display:grid; gap:8px; }
.prep-card h3,
.practice-special h3 { margin:0; font-size:clamp(21px,2vw,25px); line-height:1.2; }
.prep-card p,
.practice-special p { margin:0; color:#737785; line-height:1.55; }
.prep-card .card-meta,
.practice-special .card-meta { margin-top:auto; }
.prep-card > .btn,
.practice-special > .btn { justify-content:center; width:100%; margin-top:0; }

/* Personal practice cards never use fixed heights or become a clipped horizontal strip. */
.compact-tools { align-items:stretch; gap:18px; }
.compact-tools .practice-special {
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:0;
  padding:26px;
}

/* Admin-published resources include a clear in-app save state. */
.managed-resource {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:start;
  gap:16px;
  min-height:0;
}
.managed-resource > .card-icon { grid-row:1 / span 2; margin:0; }
.managed-resource-copy { display:grid; gap:7px; }
.managed-resource-copy h3,
.managed-resource-copy p { margin:0; }
.managed-resource-actions {
  grid-column:2;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}
.managed-resource-actions .btn { flex:1 1 150px; }
.favourite-resource-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  padding:9px 13px;
  border:1px solid #edbac6;
  border-radius:13px;
  background:#fff7f9;
  color:#9f0026;
  font-weight:800;
}
.favourite-resource-button.active { background:#bc002d; color:#fff; }

/* Learner profile is intentionally simple: photo, name, and study streak only. */
.profile-simple-grid {
  display:grid;
  grid-template-columns:minmax(270px,.68fr) minmax(0,1.32fr);
  align-items:start;
  gap:18px;
}
.profile-identity-card,
.profile-streak-card { padding:clamp(20px,3vw,30px); }
.profile-identity-card { display:grid; gap:18px; }
.profile-identity-card form { display:grid; gap:4px; }
.profile-identity-card form .btn { width:100%; }
.profile-signout { justify-content:center; width:100%; border-top:1px solid #efdce1; }
.profile-streak-card { display:grid; gap:20px; }
.profile-streak-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.profile-streak-summary span {
  display:grid;
  gap:4px;
  padding:14px;
  border:1px solid #efdce1;
  border-radius:14px;
  background:#fff9fa;
}
.profile-streak-summary strong { font-size:clamp(22px,3vw,30px); }
.profile-streak-summary small { color:#777c8c; font-size:11px; }
.activity-heatmap {
  display:grid;
  grid-template-rows:repeat(7,12px);
  grid-auto-flow:column;
  grid-auto-columns:12px;
  gap:4px;
  max-width:100%;
  padding:3px 0 7px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
}
.activity-heatmap .activity-day { display:block; width:12px; height:12px; border-radius:3px; background:#f1e6e9; }
.activity-heatmap .level-1,
.activity-legend .level-1 { background:#f6c8d2; }
.activity-heatmap .level-2,
.activity-legend .level-2 { background:#e87f96; }
.activity-heatmap .level-3,
.activity-legend .level-3 { background:#cf3155; }
.activity-heatmap .level-4,
.activity-legend .level-4 { background:#9f0026; }
.activity-legend { display:flex; align-items:center; justify-content:flex-end; gap:5px; color:#777c8c; font-size:11px; }
.activity-legend i { width:12px; height:12px; border-radius:3px; background:#f1e6e9; }

/* Payment QR stays inside the booking modal so payment and upload remain one flow. */
.payment-qr-preview {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(160px,220px);
  align-items:center;
  gap:20px;
  padding:20px;
  border:1px solid #efc2cc;
  border-radius:18px;
  background:#fff7f9;
}
.payment-qr-preview > div { display:grid; gap:6px; }
.payment-qr-preview small { color:#bc002d; font-size:10px; font-weight:900; letter-spacing:.1em; }
.payment-qr-preview h3,
.payment-qr-preview p { margin:0; }
.payment-qr-preview p { color:#747887; line-height:1.5; }
.payment-qr-preview img {
  grid-row:1 / span 2;
  grid-column:2;
  width:100%;
  max-height:220px;
  object-fit:contain;
  border:10px solid #fff;
  border-radius:16px;
}
.payment-qr-preview > .btn { justify-self:start; }

/* A replacement learner code is displayed exactly once inside the edit modal. */
.replacement-code-panel {
  display:grid;
  gap:10px;
  margin:16px 0;
  padding:16px;
  border:1px solid #e9aebc;
  border-radius:16px;
  background:#fff3f6;
}
.replacement-code-panel code {
  display:block;
  padding:12px;
  overflow-wrap:anywhere;
  border-radius:11px;
  background:#19161a;
  color:#fff;
  font-size:clamp(16px,3vw,21px);
  font-weight:900;
  letter-spacing:.07em;
}
.admin-user-summary .masked-code { width:100%; margin-top:8px; }
.masked-code-note { display:block; margin:8px 0 0; color:#777c8c; font-size:12px; line-height:1.45; }

/* Foundation resource cards wrap inside the available pane at every zoom level. */
.learning-resource-card {
  width:100%;
  max-width:100%;
  grid-template-columns:56px minmax(0,1fr) 24px;
  align-items:center;
}
.learning-resource-card > * { min-width:0; }
.learning-resource-card > div { overflow:hidden; }
.learning-resource-card :is(h3,p,small) {
  max-width:100%;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}
.learning-resource-card > b { display:grid; place-items:center; width:24px; height:24px; overflow:visible; }

/* The touch-first admin navigation is used through small laptops and tablets. */
@media (max-width:1100px) {
  .app-shell { display:block; }
  .sidebar { display:none; }
  .main { min-height:100vh; min-height:100svh; padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .topbar {
    min-height:64px;
    padding:0 16px;
    border-bottom:1px solid #efd3da;
    background:rgba(255,255,255,.98);
  }
  .mobile-menu { display:none; }
  .mobile-brand { display:block; }
  .mobile-brand .brand img { width:40px; height:40px; border-radius:13px; }
  .mobile-brand .brand > span { font-size:15px; }
  .mobile-brand .brand small,
  .topbar .page-title { display:none; }
  .mobile-bottom-nav {
    position:fixed;
    z-index:60;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:72px;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top:1px solid #efd3da;
    background:rgba(255,255,255,.98);
    box-shadow:0 -8px 24px rgba(95,20,38,.08);
    backdrop-filter:blur(16px);
  }
  .mobile-bottom-nav button {
    display:grid;
    justify-items:center;
    align-content:center;
    gap:3px;
    min-width:0;
    min-height:54px;
    padding:4px 2px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:#858a99;
  }
  .mobile-bottom-nav button > span { display:grid; place-items:center; width:38px; height:32px; border-radius:10px; }
  .mobile-bottom-nav button small { overflow:visible; font-size:10px; line-height:1; text-overflow:clip; white-space:normal; }
  .mobile-bottom-nav button.active { color:#bc002d; }
  .mobile-bottom-nav button.active > span { background:#fff0f3; color:#bc002d; }

  .admin-shell { display:block; }
  .admin-sidebar {
    position:sticky;
    z-index:70;
    top:0;
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    padding:calc(8px + env(safe-area-inset-top)) 8px 8px;
    overflow:visible;
    border-right:0;
    border-bottom:1px solid #efd3da;
    background:rgba(255,255,255,.98);
    color:#171b2e;
    box-shadow:0 8px 24px rgba(95,20,38,.08);
  }
  .admin-brand,
  .admin-nav-label,
  .admin-system-card,
  .admin-signout { display:none; }
  .admin-nav {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-auto-flow:row;
    gap:6px;
    width:100%;
    overflow:visible;
  }
  .admin-nav-item {
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:28px auto;
    justify-items:center;
    align-content:center;
    gap:3px;
    min-height:58px;
    padding:5px 3px;
    border-radius:12px;
    color:#73798a;
    text-align:center;
  }
  .admin-nav-item:hover { background:#fff6f8; color:#9f0026; }
  .admin-nav-item.active,
  .admin-more-nav.active > summary { background:#fff0f3; color:#bc002d; box-shadow:none; }
  .admin-nav-item > span { font-size:23px; }
  .admin-nav-item strong { overflow:visible; color:inherit; font-size:10px; line-height:1.1; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
  .admin-nav-item i { position:absolute; top:1px; right:7px; }
  .admin-nav > .admin-nav-secondary { display:none; }
  .admin-more-nav { position:relative; display:block; min-width:0; }
  .admin-more-nav > summary { width:100%; list-style:none; }
  .admin-more-nav > summary::-webkit-details-marker { display:none; }
  .admin-more-sheet {
    position:absolute;
    z-index:90;
    top:calc(100% + 10px);
    right:0;
    display:grid;
    gap:5px;
    width:min(330px,calc(100vw - 20px));
    padding:9px;
    border:1px solid #efd3da;
    border-radius:16px;
    background:#fff;
    box-shadow:0 20px 45px rgba(60,15,28,.18);
  }
  .admin-more-item {
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 24px;
    align-items:center;
    gap:8px;
    min-height:50px;
    padding:7px 10px;
    border:0;
    border-radius:11px;
    background:#fff;
    color:#171b2e;
    text-align:left;
  }
  .admin-more-item.active { background:#fff0f3; color:#bc002d; }
  .admin-top { top:74px; }
  .admin-live { display:none; }
  .admin-workspace { min-width:0; }
  .admin-page { width:100%; }
}

@container student-main (min-width:960px) {
  .home-page > .preparation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .compact-tools { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container student-main (min-width:700px) and (max-width:959px) {
  .home-page > .preparation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-page > .preparation-grid > .card:last-child:nth-child(odd) { grid-column:auto; }
  .compact-tools { grid-template-columns:1fr; }
  .compact-tools > .card:last-child:nth-child(odd) { grid-column:auto; }
  .learning-resource-grid { grid-template-columns:1fr; }
}
@container student-main (min-width:560px) and (max-width:699px) {
  .home-page > .preparation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-page > .preparation-grid > .card:last-child:nth-child(odd) { grid-column:auto; }
  .compact-tools { grid-template-columns:1fr; }
  .compact-tools > .card:last-child:nth-child(odd) { grid-column:auto; }
  .learning-resource-grid { grid-template-columns:1fr; }
}
@container student-main (max-width:559px) {
  .home-page > .preparation-grid,
  .compact-tools,
  .learning-resource-grid { grid-template-columns:1fr; }
  .home-page > .preparation-grid > .card:last-child:nth-child(odd),
  .compact-tools > .card:last-child:nth-child(odd) { grid-column:auto; }
}

@media (max-width:800px) {
  .profile-simple-grid { grid-template-columns:1fr; }
  .payment-qr-preview { grid-template-columns:1fr; }
  .payment-qr-preview img { grid-row:auto; grid-column:auto; width:min(100%,260px); justify-self:center; }
  .payment-qr-preview > .btn { width:100%; }
  .managed-resource { grid-template-columns:54px minmax(0,1fr); }
  .managed-resource > .card-icon { width:54px; height:54px; }
  .notification-panel { position:fixed; top:calc(68px + env(safe-area-inset-top)); right:12px; left:12px; width:auto; max-height:calc(100svh - 90px - env(safe-area-inset-top)); }
}

@media (max-width:560px) {
  .learnio-home-hero h2,
  .home-page .hero h2 { max-width:100%; font-size:clamp(30px,8vw,36px); line-height:1.08; overflow-wrap:anywhere; }
  .prep-card,
  .compact-tools .practice-special { gap:16px; padding:18px; }
  .prep-card-head,
  .practice-tool-head { align-items:center; min-height:50px; }
  .prep-card-head .card-icon,
  .practice-tool-head .card-icon { flex-basis:50px; width:50px; height:50px; }
  .prep-card-head .tag,
  .practice-tool-head .tag { max-width:calc(100% - 62px); }
  .prep-card h3,
  .practice-special h3 { font-size:22px; }
  .prep-card .card-meta,
  .practice-special .card-meta { display:flex; gap:10px; }
  .prep-card .card-meta span:last-child,
  .practice-special .card-meta span:last-child { margin-left:auto; text-align:right; }
  .managed-resource { grid-template-columns:1fr; }
  .managed-resource > .card-icon { grid-row:auto; }
  .managed-resource-actions { grid-column:1; display:grid; grid-template-columns:1fr; }
  .learning-resource-card { grid-template-columns:50px minmax(0,1fr) 22px; gap:12px; padding:17px; }
  .learning-resource-icon { width:50px; height:50px; }
  .profile-streak-summary { grid-template-columns:1fr; }
  .profile-streak-summary span { grid-template-columns:auto minmax(0,1fr); align-items:center; }
  .profile-streak-summary small { justify-self:end; text-align:right; }
  .security-pill { display:none; }
  .top-actions { gap:8px; }
  .notification-button { width:44px; min-width:44px; height:44px; border-radius:14px; }
}

/* Short landscape windows keep both panes useful without scaling the UI down. */
@media (min-width:1280px) and (max-height:700px) {
  .learnio-auth .auth-art { padding:24px clamp(30px,4vw,54px); }
  .learnio-auth .auth-art h1 { font-size:clamp(42px,4.4vw,60px); }
  .learnio-auth .auth-art-copy > p:last-of-type { margin-top:14px; font-size:14px; line-height:1.5; }
  .auth-art-poster { grid-template-columns:64px minmax(0,1fr); margin-top:18px; padding:12px; }
  .auth-art-poster img { width:64px; border-radius:18px; }
  .auth-art-poster strong { font-size:18px; }
  .learnio-auth .auth-panel { align-content:center; padding:24px clamp(28px,4vw,52px); }
  .auth-logo { margin-bottom:20px; }
  .auth-logo img { width:58px; height:58px; border-radius:18px; }
  .auth-logo strong { font-size:24px; }
  .learnio-auth .auth-card > p { margin-bottom:18px; }
  .learnio-auth .field { margin-bottom:12px; }
}

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

@media print {
  @page { size:A4 portrait; margin:10mm 9mm 12mm; }

  html, body { min-width:0; background:#fff !important; color:#171b2e !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body > * { display:none !important; }
  body > #app { display:block !important; }
  #app > * { display:none !important; }
  #app > .result-page { display:block !important; min-height:0; padding:0; background:#fff; }
  .result-page > .result-screen { display:none !important; }
  .result-page > .result-print-document { display:block !important; }

  .result-print-document { width:100%; color:#171b2e; font-family:"Noto Sans JP", "Hiragino Sans", system-ui, sans-serif; font-size:8pt; }
  .print-report-header { display:flex; align-items:center; justify-content:space-between; padding:0 0 5mm; border-bottom:2px solid #bc002d; }
  .print-brand { display:flex; align-items:center; gap:3mm; }
  .print-brand img { width:12mm; height:12mm; border-radius:3mm; object-fit:cover; }
  .print-brand strong, .print-brand small { display:block; }
  .print-brand strong { font-size:15pt; letter-spacing:-.03em; }
  .print-brand small { margin-top:1mm; color:#6f7485; font-size:6pt; font-weight:800; letter-spacing:.14em; }
  .print-result-mark { padding:2.4mm 3.5mm; border-radius:100px; background:#f7e4e8; color:#8f0022; font-size:6.5pt; font-weight:900; letter-spacing:.08em; }
  .print-result-mark.pass { background:#dff2e9; color:#126d4d; }

  .print-report-title { padding:7mm 0 5mm; }
  .print-report-title span, .print-answer-heading span { color:#bc002d; font-size:6.5pt; font-weight:900; letter-spacing:.13em; }
  .print-report-title h1 { margin:2mm 0 1.4mm; font-size:22pt; line-height:1.12; letter-spacing:-.035em; }
  .print-report-title p { margin:0; color:#6f7485; font-size:8pt; }

  .print-meta-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #dfe2e9; border-radius:2.5mm; overflow:hidden; }
  .print-meta-grid > div { min-width:0; padding:3mm; border-right:1px solid #dfe2e9; }
  .print-meta-grid > div:last-child { border-right:0; }
  .print-meta-grid small, .print-meta-grid strong { display:block; overflow-wrap:anywhere; }
  .print-meta-grid small { margin-bottom:1mm; color:#777c8d; font-size:6pt; font-weight:800; text-transform:uppercase; }
  .print-meta-grid strong { font-size:8pt; }

  .print-score-summary { display:grid; grid-template-columns:1.35fr repeat(4,1fr); gap:1px; margin-top:4mm; overflow:hidden; border:1px solid #171b2e; border-radius:2.5mm; background:#dfe2e9; }
  .print-score-summary > div { padding:3mm; background:#fff; }
  .print-score-summary > .primary { background:#171b2e; color:#fff; }
  .print-score-summary small, .print-score-summary strong { display:block; }
  .print-score-summary small { margin-bottom:1mm; color:#777c8d; font-size:6pt; font-weight:800; text-transform:uppercase; }
  .print-score-summary .primary small { color:#c8ccd6; }
  .print-score-summary strong { font-size:14pt; }
  .print-score-summary strong b { margin-left:1mm; color:#9da3b1; font-size:7pt; }

  .print-section-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:2mm; margin:3mm 0 7mm; }
  .print-section-overview > div { display:flex; align-items:center; justify-content:space-between; gap:2mm; padding:2.5mm 3mm; border-radius:2mm; background:#f2f4f8; }
  .print-section-overview span { color:#656b7d; font-size:6pt; font-weight:700; }
  .print-section-overview strong { font-size:9pt; }

  .print-answer-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:5mm; margin-bottom:3mm; }
  .print-answer-heading h2 { margin:1mm 0 0; font-size:15pt; letter-spacing:-.025em; }
  .print-answer-heading p { margin:0; color:#666c7d; font-size:7pt; }
  .print-dot { display:inline-block; width:2mm; height:2mm; margin:0 1mm 0 2mm; border-radius:50%; vertical-align:middle; }
  .print-dot.correct { background:#19875e; }
  .print-dot.wrong { background:#bc002d; }

  .result-print-document .result-section-group { padding:0; border:0; }
  .result-print-document .print-section-group + .print-section-group { break-before:page; page-break-before:always; }
  .result-print-document .result-section-heading { margin:0 0 2.5mm; padding:2.5mm 3mm; border-left:1.3mm solid #bc002d; background:#f5f6f9; }
  .result-print-document .result-section-heading small { font-size:5.5pt; }
  .result-print-document .result-section-heading h3 { margin:1mm 0 0; font-size:11pt; }
  .result-print-document .result-section-heading > span { padding:1.5mm 2.5mm; font-size:6pt; }
  .result-print-document .result-answer-table-wrap { overflow:visible; border:1px solid #d9dde6; border-radius:0; }
  .result-print-document .result-answer-table { display:table; width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; }
  .result-print-document .result-answer-table thead { display:table-header-group; position:static; width:auto; height:auto; clip:auto; white-space:normal; }
  .result-print-document .result-answer-table tbody { display:table-row-group; }
  .result-print-document .result-answer-table tr { display:table-row; break-inside:avoid; page-break-inside:avoid; border:0; }
  .result-print-document .result-answer-table th { padding:1.8mm 1.4mm; background:#171b2e; color:#fff; font-size:5.6pt; }
  .result-print-document .result-answer-table th:nth-child(1) { width:8mm; }
  .result-print-document .result-answer-table th:nth-child(2) { width:27mm; }
  .result-print-document .result-answer-table th:nth-child(3) { width:53mm; }
  .result-print-document .result-answer-table th:nth-child(4), .result-print-document .result-answer-table th:nth-child(5) { width:31mm; }
  .result-print-document .result-answer-table th:nth-child(6) { width:19mm; }
  .result-print-document .result-answer-table td { display:table-cell; padding:2mm 1.4mm; border-top:1px solid #e1e4eb; color:#252a3b; font-size:6.1pt; line-height:1.45; vertical-align:top; }
  .result-print-document .result-answer-table td::before { display:none; content:none; }
  .result-print-document .result-answer-table .result-question { font-size:7.1pt; line-height:1.55; }
  .result-print-document .result-answer-table tr.correct-row td:first-child { box-shadow:inset 1mm 0 0 #19875e !important; }
  .result-print-document .result-answer-table tr.wrong-row td:first-child { box-shadow:inset 1mm 0 0 #bc002d !important; }
  .result-print-document .result-serial { width:6mm; height:6mm; border-radius:1.5mm; font-size:6pt; }
  .result-print-document .result-status { min-width:0; min-height:0; padding:1.2mm 1.5mm; font-size:5.5pt; }
  .result-print-document .result-status .material-symbols-rounded { font-size:7pt; }
  .result-print-document .result-answer-table td:nth-child(2) strong { font-size:6pt; }
  .result-print-document .result-answer-table td:nth-child(2) small { font-size:5pt; }
  .print-report-note { margin-top:5mm; padding:3mm; border-top:1px solid #dfe2e9; color:#707687; font-size:6pt; line-height:1.55; }
  .print-report-note strong { color:#171b2e; }
}