:root {
  color-scheme: dark;
  --bg: #060914;
  --bg-deep: #03050b;
  --panel: rgba(17, 24, 43, .78);
  --panel-solid: #11182b;
  --panel-elevated: #171f35;
  --panel-soft: rgba(24, 33, 56, .62);
  --ink: #f3f6ff;
  --muted: #98a5bd;
  --line: rgba(154, 170, 202, .16);
  --line-strong: rgba(154, 170, 202, .30);
  --accent: #7c8cff;
  --accent-2: #41d9c7;
  --accent-3: #a970ff;
  --accent-soft: rgba(124, 140, 255, .14);
  --success: #46d58a;
  --warning: #f4b85a;
  --danger: #ff707a;
  --shadow: 0 24px 70px rgba(0, 0, 0, .36);
  --glow: 0 0 40px rgba(124, 140, 255, .15);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 80% 0%, rgba(78, 91, 205, .18), transparent 36%),
    radial-gradient(circle at 3% 45%, rgba(34, 189, 173, .10), transparent 30%),
    linear-gradient(160deg, #080c19 0%, #050711 58%, #02040a 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
body::after {
  content: "";
  position: fixed;
  width: 440px;
  height: 440px;
  right: -170px;
  bottom: -210px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,140,255,.16), transparent 67%);
  filter: blur(8px);
  animation: ambientPulse 9s ease-in-out infinite;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.shell { min-height: 100vh; position: relative; }
.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  position: relative;
  z-index: 10;
  background: rgba(5, 8, 18, .78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.brand-wrap { display: flex; align-items: center; gap: 13px; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 30px; height: 27px; }
.brand-mark span { display: block; width: 6px; border-radius: 999px; background: linear-gradient(to top, var(--accent), var(--accent-2)); box-shadow: 0 0 14px rgba(65,217,199,.28); }
.brand-mark span:nth-child(1) { height: 11px; animation: equalize 1.5s ease-in-out infinite; }
.brand-mark span:nth-child(2) { height: 24px; animation: equalize 1.5s ease-in-out -.45s infinite; }
.brand-mark span:nth-child(3) { height: 17px; animation: equalize 1.5s ease-in-out -.85s infinite; }
.brand { font-weight: 800; letter-spacing: -.025em; }
.brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 550; margin-top: 3px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #b9c3da; font-size: 12px; font-weight: 750; margin-right: 3px; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 6px rgba(70,213,138,.09); animation: livePulse 2s ease infinite; }
.container { width: min(1180px, calc(100% - 36px)); margin: 34px auto 60px; position: relative; z-index: 1; }
.page-enter { animation: pageEnter .48s cubic-bezier(.2,.7,.2,1) both; }

.card {
  background: linear-gradient(145deg, rgba(22, 30, 52, .86), rgba(12, 17, 31, .82));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.hero { padding: 40px; overflow: hidden; position: relative; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(124,140,255,.09), transparent 43%, rgba(65,217,199,.04));
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 24px; align-items: center; min-height: 430px; }
.dashboard-hero { min-height: 390px; }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { margin: 7px 0 13px; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.02; letter-spacing: -.055em; max-width: 760px; }
.hero p { color: #aeb9cf; max-width: 740px; line-height: 1.65; font-size: 16px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.hero-tags span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #b7c2d9; background: rgba(255,255,255,.035); font-size: 11px; font-weight: 720; }
.actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }

.btn {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 17px;
  font-weight: 760;
  color: #e8edfa;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--line-strong); background: rgba(255,255,255,.09); }
.btn.primary { border-color: rgba(124,140,255,.52); color: white; background: linear-gradient(135deg, #6878f6, #866af1); box-shadow: 0 10px 26px rgba(87,91,224,.23), inset 0 1px 0 rgba(255,255,255,.22); }
.btn.primary:hover { box-shadow: 0 13px 34px rgba(87,91,224,.32), inset 0 1px 0 rgba(255,255,255,.22); }
.btn.danger { color: #ffc1c5; border-color: rgba(255,112,122,.25); background: rgba(255,112,122,.09); }
.btn.danger.subtle { color: #d9a6aa; }
.btn.ghost { background: transparent; color: #bcc7dc; }
.btn.compact { padding: 9px 13px; font-size: 13px; }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }

.grid { display: grid; gap: 17px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-metrics { margin-top: 18px; }
.metric { padding: 19px; display: flex; gap: 15px; align-items: center; min-height: 112px; transition: transform .2s ease, border-color .2s ease; }
.metric:hover { transform: translateY(-3px); border-color: rgba(124,140,255,.31); }
.metric-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--accent-2); background: rgba(65,217,199,.08); border: 1px solid rgba(65,217,199,.16); font-size: 20px; }
.metric .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 750; }
.metric .value { font-size: 25px; font-weight: 850; margin-top: 5px; }

.section-title { display: flex; justify-content: space-between; align-items: end; margin: 34px 0 14px; }
.section-title h2 { margin: 5px 0 0; letter-spacing: -.03em; font-size: 28px; }
.section-title p { margin: 7px 0 0; color: var(--muted); }
.company-list { display: grid; gap: 11px; }
.company-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 18px; padding: 17px 19px; animation: rowEnter .42s ease both; animation-delay: var(--row-delay); transition: transform .18s ease, border-color .18s ease; }
.company-row:hover { transform: translateX(3px); border-color: rgba(124,140,255,.27); }
.company-identity { display: flex; align-items: center; gap: 13px; }
.company-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 12px; font-weight: 900; color: #d9e0ff; background: rgba(124,140,255,.12); border: 1px solid rgba(124,140,255,.22); }
.company-avatar.ai { color: #aaf3e8; background: rgba(65,217,199,.10); border-color: rgba(65,217,199,.20); }
.company-row strong { font-size: 17px; }
.status-pill { border-radius: 999px; padding: 7px 10px; font-size: 10px; letter-spacing: .055em; font-weight: 850; border: 1px solid transparent; }
.status-pill.ready { color: #8aefb5; background: rgba(70,213,138,.10); border-color: rgba(70,213,138,.18); }
.status-pill.waiting { color: #ffd18b; background: rgba(244,184,90,.10); border-color: rgba(244,184,90,.18); }
.status-pill.bankrupt { color: #ff9ca3; background: rgba(255,112,122,.10); border-color: rgba(255,112,122,.18); }

.kicker { color: var(--accent-2); font-weight: 850; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.hint { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.48; }
.error { color: #ff929a; font-weight: 720; margin-top: 12px; }
.success { color: var(--success); font-weight: 720; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 2, 8, .74); display: grid; place-items: center; padding: 20px; z-index: 30; backdrop-filter: blur(10px); }
.modal { width: min(620px, 100%); padding: 30px; }
.large-modal { width: min(780px, 100%); max-height: 92vh; overflow-y: auto; }
.modal-enter { animation: modalEnter .28s cubic-bezier(.2,.8,.2,1) both; }
.modal h2 { margin: 7px 0 0; font-size: 30px; letter-spacing: -.035em; }
.company-name-list { display: grid; gap: 10px; margin: 0 0 12px; }
.mode-section { margin: 20px 0 24px; }
.mode-section > label { display: block; color: var(--muted); font-size: 12px; font-weight: 780; margin-bottom: 9px; text-transform: uppercase; letter-spacing: .06em; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.mode-card { display: flex; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; transition: .18s ease; }
.mode-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.mode-card.selected { border-color: rgba(124,140,255,.57); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(124,140,255,.06); }
.mode-card input { margin-top: 4px; accent-color: var(--accent); }
.mode-card span { display: grid; gap: 3px; }
.mode-card strong { font-size: 15px; }
.mode-card em { color: var(--accent-2); font-size: 10px; font-style: normal; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.mode-card small { color: var(--muted); line-height: 1.4; }
.single-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.multiplayer-setup { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(220px,.8fr); gap: 18px; margin: 18px 0; align-items: start; }
.ai-selector { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.privacy-note { grid-column: 1 / -1; display: flex; gap: 13px; padding: 15px; border: 1px solid rgba(65,217,199,.17); border-radius: 14px; background: rgba(65,217,199,.055); }
.privacy-note p { margin: 4px 0 0; color: var(--muted); line-height: 1.45; font-size: 12px; }
.privacy-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--accent-2); background: rgba(65,217,199,.10); }

.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 720; }
.input, select.input { width: 100%; border: 1px solid var(--line-strong); background: rgba(5,9,19,.72); border-radius: 11px; padding: 13px 14px; color: var(--ink); outline: none; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124,140,255,.11); }
select.input option { background: #10172a; color: var(--ink); }

.wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.wizard-card { min-height: 600px; padding: 34px; display: flex; flex-direction: column; }
.wizard-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.wizard-card h1 { margin: 7px 0 8px; font-size: 32px; letter-spacing: -.04em; }
.question-area { margin: 42px 0; flex: 1; animation: questionEnter .28s ease both; }
.question-area h2 { font-size: 26px; margin: 0 0 10px; }
.question-area p { color: var(--muted); line-height: 1.58; }
.wizard-controls { display: flex; justify-content: space-between; align-items:center; gap: 10px; border-top: 1px solid var(--line); padding-top: 22px; }
.wizard-controls > div { display:flex; flex-wrap:wrap; gap:8px; }
.progress { height: 7px; background: rgba(255,255,255,.055); border-radius: 999px; overflow: hidden; margin-top: 18px; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .28s ease; box-shadow: 0 0 18px rgba(65,217,199,.22); }
.sidebar { padding: 23px; position: sticky; top: 20px; }
.sidebar h3 { margin: 0 0 18px; }
.budget-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.budget-row:last-child { border: 0; }
.budget-row span:first-child { color: var(--muted); }
.budget-row strong.negative { color: var(--danger); }
.preview-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.preview-block h4 { margin: 0 0 12px; }
.choice-grid { display: grid; gap: 9px; margin-top: 20px; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); transition: .16s ease; }
.choice:hover { border-color: var(--line-strong); background: rgba(255,255,255,.04); }
.choice.selected { border-color: rgba(124,140,255,.55); background: var(--accent-soft); }
.choice input { width: 18px; height: 18px; accent-color: var(--accent); }
.big-number { font-size: 42px; font-weight: 880; letter-spacing: -.045em; margin: 20px 0 8px; }
.range-row { display: grid; grid-template-columns: 1fr 120px; gap: 15px; align-items: center; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.summary-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.summary-table td { border-bottom: 1px solid var(--line); padding: 11px 4px; }
.summary-table td:last-child { text-align: right; font-weight: 760; }

.handoff { min-height: calc(100vh - 140px); display: grid; place-items: center; }
.handoff-card { width: min(760px, 100%); padding: 52px; text-align: center; }
.handoff-card .lock { font-size: 42px; filter: drop-shadow(0 0 20px rgba(124,140,255,.28)); }
.handoff-card h1 { font-size: 42px; margin: 18px 0 8px; }
.handoff-card p { color: var(--muted); line-height: 1.65; }

.reports-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.report-list { display: grid; gap: 9px; position: sticky; top: 20px; }
.report-link { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.026); text-align: left; color: var(--ink); transition: .17s ease; }
.report-link:hover { border-color: rgba(124,140,255,.45); background: var(--accent-soft); transform: translateX(2px); }
.report-link strong { font-size: 13px; }
.report-link span { color: var(--muted); font-size: 10px; word-break: normal; overflow-wrap:anywhere; }
.report-content-empty { min-height: 420px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 15px; color: var(--muted); background: rgba(255,255,255,.018); }
.report-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); }
.report-toolbar-actions,.roster-action-group { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; align-items:center; }
.print-btn { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); }
.report-frame { width: 100%; height: 78vh; min-height: 760px; border: 1px solid var(--line); border-radius: 15px; background: #080c17; box-shadow: var(--shadow); }
.toast { position: fixed; right: 22px; bottom: 22px; padding: 14px 18px; border-radius: 11px; color: white; background: #1a233b; border: 1px solid var(--line-strong); z-index: 50; box-shadow: var(--shadow); animation: toastIn .25s ease both; }

/* Animated market globe */
.globe-stage { position: relative; width: min(380px, 100%); height: 330px; justify-self: center; display: grid; place-items: center; perspective: 800px; }
.market-globe { position: relative; width: 218px; height: 218px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 36% 28%, rgba(191,212,255,.34), rgba(89,105,230,.20) 24%, rgba(15,28,64,.82) 61%, rgba(4,8,19,.98) 100%); border: 1px solid rgba(151,167,255,.35); box-shadow: inset -24px -18px 48px rgba(0,0,0,.52), inset 15px 12px 30px rgba(144,175,255,.10), 0 0 55px rgba(100,118,255,.26); animation: globeFloat 5.8s ease-in-out infinite; }
.market-globe::before { content:""; position:absolute; inset:9%; border-radius:50%; background: radial-gradient(ellipse at 26% 34%, rgba(65,217,199,.25) 0 2%, transparent 3%), radial-gradient(ellipse at 63% 43%, rgba(124,140,255,.44) 0 2.3%, transparent 3.1%), radial-gradient(ellipse at 75% 69%, rgba(65,217,199,.30) 0 1.5%, transparent 2.5%); filter: blur(.2px); }
.globe-longitudes, .globe-latitudes { position: absolute; inset: 0; border-radius: 50%; opacity: .42; }
.globe-longitudes { background: repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(158,178,255,.24) 19px 20px, transparent 21px 36px); transform: scaleX(.46); animation: longitudeShift 8s linear infinite; }
.globe-latitudes { background: repeating-linear-gradient(to bottom, transparent 0 25px, rgba(158,178,255,.22) 26px 27px, transparent 28px 46px); transform: scaleY(.88); }
.globe-scan { position:absolute; left:-20%; right:-20%; height:34px; top:-40px; background:linear-gradient(to bottom, transparent, rgba(65,217,199,.17), transparent); filter: blur(4px); animation: scanGlobe 4.2s linear infinite; }
.node { position:absolute; width:8px; height:8px; border-radius:50%; background:#9cf3e7; box-shadow:0 0 0 4px rgba(65,217,199,.08),0 0 17px rgba(65,217,199,.75); animation: nodePulse 2.2s ease infinite; }
.node-a { left:30%; top:32%; } .node-b { right:25%; top:40%; animation-delay:-.6s; } .node-c { left:48%; bottom:24%; animation-delay:-1.2s; } .node-d { right:16%; bottom:37%; animation-delay:-1.7s; }
.orbit { position:absolute; width:285px; height:112px; border:1px solid rgba(124,140,255,.24); border-radius:50%; transform:rotate(-17deg); animation: orbitSpin 11s linear infinite; }
.orbit-two { width:310px; height:170px; transform:rotate(63deg); animation-duration:15s; animation-direction:reverse; border-color:rgba(65,217,199,.16); }
.orbit span { position:absolute; width:8px; height:8px; border-radius:50%; top:49%; left:-4px; background:var(--accent); box-shadow:0 0 16px var(--accent); }
.signal-card { position:absolute; min-width:112px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(11,17,31,.72); backdrop-filter:blur(12px); box-shadow:0 13px 30px rgba(0,0,0,.24); animation: signalFloat 5s ease-in-out infinite; }
.signal-card b { display:block; color:#dfe5ff; font-size:13px; } .signal-card span { display:block; margin-top:2px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.signal-a { left:0; top:55px; } .signal-b { right:0; bottom:48px; animation-delay:-2s; }

@keyframes pageEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes modalEnter { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes rowEnter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes questionEnter { from { opacity:0; transform:translateX(7px); } to { opacity:1; transform:none; } }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes equalize { 0%,100% { transform:scaleY(.58); opacity:.65; } 50% { transform:scaleY(1); opacity:1; } }
@keyframes livePulse { 0%,100% { transform:scale(.9); opacity:.75; } 50% { transform:scale(1.15); opacity:1; } }
@keyframes ambientPulse { 0%,100% { transform:scale(.95); opacity:.65; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes globeFloat { 0%,100% { transform:translateY(4px) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(1deg); } }
@keyframes longitudeShift { to { transform:scaleX(.46) rotate(360deg); } }
@keyframes scanGlobe { from { top:-45px; } to { top:230px; } }
@keyframes nodePulse { 0%,100% { transform:scale(.7); opacity:.55; } 50% { transform:scale(1.15); opacity:1; } }
@keyframes orbitSpin { to { transform:rotate(343deg); } }
@keyframes signalFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .globe-stage { height: 285px; }
  .wizard-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .company-row { grid-template-columns: 1fr auto; }
  .company-row .secondary-data { display: none; }
  .topbar { padding: 0 18px; }
  .reports-layout { grid-template-columns: 1fr; }
  .report-list { position: static; }
  .mode-grid { grid-template-columns: 1fr; }
  .multiplayer-setup { grid-template-columns: 1fr; }
  .report-frame { min-height: 620px; }
}
@media (max-width: 680px) {
  .container { width: min(100% - 22px, 1180px); margin-top: 18px; }
  .topbar { height: 68px; }
  .brand small, .live-indicator { display: none; }
  .hero { padding: 28px 22px; }
  .hero-grid { min-height: 0; }
  .globe-stage { transform:scale(.82); margin:-20px auto; }
  .single-setup { grid-template-columns: 1fr; }
  .company-row { padding: 14px; gap: 10px; }
  .status-pill { display:none; }
  .wizard-card { padding: 24px 20px; }
  .handoff-card { padding: 36px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Version 1.7 learning center */
.learning-page { padding-bottom: 70px; }
.learning-header { padding: 28px 30px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; }
.learning-header h1 { margin:6px 0 8px; font-size:36px; letter-spacing:-.045em; }
.learning-header p { margin:0; color:var(--muted); max-width:760px; line-height:1.55; }
.lesson-progress { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:0 0 18px; }
.lesson-step { border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--muted); border-radius:12px; padding:11px 8px; display:flex; gap:8px; align-items:center; justify-content:center; cursor:pointer; font:inherit; }
.lesson-step span { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; background:rgba(255,255,255,.05); }
.lesson-step.active { color:var(--ink); border-color:rgba(124,140,255,.55); background:var(--accent-soft); }
.lesson-step.done span { background:rgba(65,217,199,.12); color:var(--accent-2); }
.learning-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:18px; }
.lesson-main,.lesson-side { padding:30px; }
.lesson-main h2 { margin:7px 0 12px; font-size:30px; letter-spacing:-.035em; }
.lesson-main > p,.lead { color:var(--muted); line-height:1.65; }
.concept-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:10px; align-items:center; margin:28px 0; }
.concept-flow > div { padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.022); min-height:120px; }
.concept-flow span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:#dfe3ff; font-weight:800; }
.concept-flow strong,.concept-flow small { display:block; margin-top:10px; }
.concept-flow small { color:var(--muted); line-height:1.4; }
.concept-flow i { color:var(--muted); font-style:normal; }
.callout,.lesson-note,.result-explanation { border:1px solid rgba(65,217,199,.16); background:rgba(65,217,199,.045); border-radius:14px; padding:16px 18px; margin:20px 0; }
.callout p,.lesson-note p,.result-explanation p { color:var(--muted); margin:6px 0 0; line-height:1.5; }
.mini-lessons { display:grid; gap:12px; margin-top:18px; }
.mini-lessons > div { display:flex; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.mini-lessons b { color:var(--accent-2); }
.mini-lessons strong,.mini-lessons small { display:block; }
.mini-lessons small { color:var(--muted); margin-top:4px; line-height:1.4; }
.tutorial-workbench { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:18px; align-items:start; }
.tutorial-workbench.wide { grid-template-columns:minmax(0,1.3fr) minmax(380px,.7fr); }
.teaching-control { margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); }
.control-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:12px; }
.control-heading label { color:var(--muted); font-size:12px; font-weight:750; }
.control-heading strong { font-size:20px; }
.range-labels { display:flex; justify-content:space-between; gap:10px; margin-top:9px; color:var(--muted); font-size:10px; }
.small-value { margin-top:7px; font-weight:800; }
.compact-grid { gap:14px; margin:18px 0; }
.segment-snapshot { display:grid; grid-template-columns:160px 160px 1fr; gap:10px; margin:18px 0; }
.segment-snapshot > div { padding:14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); }
.segment-snapshot span,.segment-snapshot strong { display:block; }
.segment-snapshot span { color:var(--muted); font-size:10px; }
.segment-snapshot strong { margin-top:5px; }
.priority-strip { display:flex; flex-wrap:wrap; gap:8px; align-content:start; }
.priority-strip span { padding:7px 9px; border-radius:999px; background:rgba(124,140,255,.08); color:var(--ink); }
.priority-strip b { color:var(--accent-2); }
.tutorial-results { padding:24px; position:sticky; top:20px; }
.empty-results { min-height:520px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.result-orbit { margin:0 auto 14px; width:62px; height:62px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; font-size:30px; animation:globeFloat 5s ease-in-out infinite; }
.tutorial-results h3 { margin:7px 0 16px; font-size:24px; }
.result-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.result-metric { padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.022); }
.result-metric span,.result-metric strong,.result-metric small { display:block; }
.result-metric span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.result-metric strong { font-size:21px; margin:5px 0; }
.result-metric small { color:var(--muted); line-height:1.35; }
.result-explanation { margin:16px 0; }
.result-explanation p { font-size:12px; }
.result-section { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.result-section h4 { margin:0 0 12px; }
.bar-row,.impact-row { display:grid; grid-template-columns:120px 1fr 60px; gap:9px; align-items:center; margin:9px 0; font-size:11px; }
.bar-row > div,.impact-row > div { height:7px; border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden; }
.bar-row i,.impact-row i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.bar-row strong,.impact-row strong { text-align:right; }
.summary-table tr.you td { background:rgba(65,217,199,.045); }
.market-health { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.market-health span { padding:10px; border:1px solid var(--line); border-radius:10px; }
.market-health small,.market-health b { display:block; }
.market-health small { color:var(--muted); font-size:9px; }
.market-health b { margin-top:4px; }
.challenge-budget { display:flex; justify-content:space-between; gap:16px; padding:15px 16px; border:1px solid rgba(65,217,199,.20); border-radius:13px; background:rgba(65,217,199,.05); margin:18px 0; }
.challenge-budget.over { border-color:rgba(255,105,128,.4); background:rgba(255,105,128,.06); }
.subsection-heading { margin:26px 0 10px; }
.investment-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.investment-grid.three-cols { grid-template-columns:repeat(3,1fr); }
.micro-control { padding:12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.018); }
.micro-control > div { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:10px; }
.micro-control span { color:var(--muted); }
.guide-section { margin-top:34px; }
.guide-hero { margin-bottom:0; }
.flow-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.flow-card { padding:18px; }
.flow-card > b { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:var(--accent-soft); color:#dfe3ff; }
.flow-card strong { display:block; margin:13px 0 7px; }
.flow-card p { color:var(--muted); font-size:11px; line-height:1.5; margin:0; }
.decision-guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.decision-guide { padding:18px; }
.decision-guide h3 { margin:0 0 8px; }
.decision-guide p { color:var(--muted); line-height:1.5; font-size:12px; min-height:74px; }
.decision-guide span { display:inline-block; margin-top:4px; padding:6px 8px; border-radius:999px; background:var(--accent-soft); color:#cdd3ff; font-size:10px; font-weight:750; }
.segment-guide-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.segment-guide { padding:20px; }
.segment-head { display:flex; justify-content:space-between; gap:16px; align-items:start; }
.segment-head h3 { margin:0 0 4px; }
.segment-head span { color:var(--muted); font-size:10px; }
.segment-head > strong { font-size:22px; }
.priority-bars > div { display:grid; grid-template-columns:120px 1fr 28px; gap:8px; align-items:center; margin:9px 0; font-size:10px; }
.priority-bars i { height:7px; background:rgba(255,255,255,.05); border-radius:999px; overflow:hidden; }
.priority-bars b { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.priority-bars em { color:var(--muted); font-style:normal; text-align:right; }
.impact-explorer { padding:22px; }
.impact-controls { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.impact-layout { display:grid; grid-template-columns:1fr .8fr; gap:24px; margin-top:22px; align-items:center; }
.impact-note { padding:20px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.018); }
.impact-note h3 { margin:7px 0 8px; }
.impact-note p { color:var(--muted); line-height:1.55; font-size:12px; }
.metric-glossary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric-glossary article { padding:17px; }
.metric-glossary h3 { margin:0 0 7px; font-size:15px; }
.metric-glossary p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.strategy-principles { padding:26px; display:grid; grid-template-columns:1.1fr .9fr; gap:30px; }
.strategy-principles h2 { margin:7px 0 10px; }
.strategy-principles p { color:var(--muted); line-height:1.6; }
.principle-list { display:grid; gap:9px; }
.principle-list span { padding:13px 14px; border:1px solid var(--line); border-radius:11px; color:var(--muted); }
.principle-list b { color:var(--ink); }

@media (max-width: 980px) {
  .learning-grid,.tutorial-workbench,.tutorial-workbench.wide,.impact-layout,.strategy-principles { grid-template-columns:1fr; }
  .tutorial-results { position:static; }
  .flow-cards { grid-template-columns:repeat(2,1fr); }
  .decision-guide-grid,.metric-glossary { grid-template-columns:repeat(2,1fr); }
  .segment-snapshot { grid-template-columns:1fr 1fr; }
  .segment-snapshot .priority-strip { grid-column:1/-1; }
}
@media (max-width: 680px) {
  .learning-header { align-items:flex-start; flex-direction:column; padding:22px; }
  .learning-header h1 { font-size:30px; }
  .lesson-progress { grid-template-columns:1fr; }
  .lesson-step { justify-content:flex-start; }
  .concept-flow { grid-template-columns:1fr; }
  .concept-flow i { transform:rotate(90deg); text-align:center; }
  .flow-cards,.decision-guide-grid,.segment-guide-grid,.metric-glossary,.investment-grid,.investment-grid.three-cols,.impact-controls { grid-template-columns:1fr; }
  .result-metrics { grid-template-columns:1fr; }
  .market-health { grid-template-columns:1fr; }
  .challenge-budget { flex-direction:column; }
  .bar-row,.impact-row { grid-template-columns:105px 1fr 50px; }
}


/* Version 1.8 — minimal dual-theme interface */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-deep: #ffffff;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-elevated: #f7faf8;
  --panel-soft: #f3f7f4;
  --ink: #111713;
  --muted: #667169;
  --line: #dfe7e1;
  --line-strong: #bccbc0;
  --accent: #148447;
  --accent-2: #0b6b38;
  --accent-3: #38a764;
  --accent-soft: #eaf5ee;
  --success: #148447;
  --warning: #9a6810;
  --danger: #b4232f;
  --shadow: 0 8px 28px rgba(14, 45, 27, .07);
  --glow: none;
  --surface-subtle: #f7faf8;
  --surface-hover: #f1f6f2;
  --topbar-bg: rgba(255,255,255,.94);
  --accent-contrast: #ffffff;
  --composition-0: #0b6b38;
  --composition-1: #2e8b57;
  --composition-2: #5aaa73;
  --composition-3: #8bc49a;
  --composition-4: #b8d9c0;
  --composition-5: #dcecdf;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050505;
  --bg-deep: #050505;
  --panel: #0b0b0b;
  --panel-solid: #0b0b0b;
  --panel-elevated: #111111;
  --panel-soft: #151515;
  --ink: #f7f7f7;
  --muted: #9d9d9d;
  --line: #252525;
  --line-strong: #3a3a3a;
  --accent: #e02d3c;
  --accent-2: #ff4655;
  --accent-3: #b91f2d;
  --accent-soft: #251013;
  --success: #52c978;
  --warning: #d39a38;
  --danger: #ff5a66;
  --shadow: 0 12px 36px rgba(0,0,0,.34);
  --glow: none;
  --surface-subtle: #101010;
  --surface-hover: #171717;
  --topbar-bg: rgba(5,5,5,.94);
  --accent-contrast: #ffffff;
  --composition-0: #ff4655;
  --composition-1: #d93846;
  --composition-2: #ad2b36;
  --composition-3: #81212a;
  --composition-4: #59191f;
  --composition-5: #331114;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
body::before, body::after { display:none; }
button, input, select { color:inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--accent); }

.topbar {
  height:72px;
  padding:0 max(22px, calc((100vw - 1240px)/2));
  background:var(--topbar-bg);
  border-color:var(--line);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
}
.brand-button { border:0; background:none; color:var(--ink); padding:0; cursor:pointer; text-align:left; }
.brand-wrap { gap:11px; }
.brand-mark { width:25px; height:24px; gap:3px; }
.brand-mark span { width:5px; border-radius:2px; background:var(--accent); box-shadow:none; animation:none; }
.brand-mark span:nth-child(1){height:9px}.brand-mark span:nth-child(2){height:23px}.brand-mark span:nth-child(3){height:15px}
.brand strong { display:block; font-size:15px; letter-spacing:.055em; font-weight:900; }
.brand small { margin-top:2px; font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
.top-actions { gap:4px; }
.live-indicator { color:var(--muted); margin-right:8px; }
.live-indicator i { background:var(--accent); box-shadow:none; animation:none; }
.nav-btn { border-color:transparent; }
.theme-toggle { min-width:94px; }

.container { width:min(1240px, calc(100% - 44px)); margin:28px auto 56px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:none; backdrop-filter:none; }
.btn { color:var(--ink); background:var(--panel); border-color:var(--line); border-radius:9px; box-shadow:none; padding:10px 14px; }
.btn:hover { background:var(--surface-hover); border-color:var(--line-strong); transform:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); box-shadow:none; }
.btn.primary:hover { background:var(--accent-2); border-color:var(--accent-2); box-shadow:none; }
.btn.ghost { color:var(--muted); background:transparent; }
.btn.ghost:hover { color:var(--ink); }
.btn.danger { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, var(--line)); background:transparent; }
.kicker { color:var(--accent); }
.error { color:var(--danger); }
.input, select.input { background:var(--panel); border-color:var(--line-strong); color:var(--ink); }
.input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
select.input option { background:var(--panel); color:var(--ink); }
.progress { background:var(--surface-subtle); }
.progress > div { background:var(--accent); box-shadow:none; }

/* Landing: branding is the visual anchor, not decoration. */
.landing-hero { padding:70px 0 54px; border-bottom:1px solid var(--line); }
.brand-eyebrow { color:var(--accent); font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.landing-hero h1 { margin:12px 0 18px; max-width:900px; font-size:clamp(56px,10vw,118px); line-height:.86; letter-spacing:-.075em; }
.landing-hero h1 span { display:block; }
.landing-hero p { max-width:650px; margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.landing-facts { display:grid; grid-template-columns:repeat(4,1fr); margin-top:54px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.landing-facts span { padding:17px 18px 17px 0; display:grid; gap:2px; border-right:1px solid var(--line); }
.landing-facts span:last-child { border-right:0; padding-left:18px; }
.landing-facts span:not(:first-child) { padding-left:18px; }
.landing-facts b { font-size:17px; }
.landing-facts small { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:9px; }
.landing-loop { display:grid; grid-template-columns:repeat(4,1fr); }
.landing-loop > div { padding:24px 22px 24px 0; border-right:1px solid var(--line); }
.landing-loop > div:not(:first-child) { padding-left:22px; }
.landing-loop > div:last-child { border-right:0; }
.landing-loop span { color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.08em; }
.landing-loop strong,.landing-loop small { display:block; }
.landing-loop strong { margin:8px 0 4px; font-size:19px; }
.landing-loop small { color:var(--muted); }

/* Dashboard: one dense command surface instead of floating boxes. */
.dashboard-page { margin-top:22px; }
.dashboard-surface { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); }
.dashboard-head { display:flex; justify-content:space-between; gap:28px; align-items:flex-end; padding:30px 32px 26px; }
.dashboard-head h1 { margin:7px 0 7px; font-size:clamp(34px,5vw,56px); letter-spacing:-.055em; line-height:1; }
.dashboard-head p { margin:0; max-width:690px; color:var(--muted); line-height:1.55; }
.dashboard-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.dashboard-stat-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-subtle); }
.dashboard-stat-strip > div { padding:17px 20px; border-right:1px solid var(--line); }
.dashboard-stat-strip > div:last-child { border-right:0; }
.dashboard-stat-strip span,.dashboard-stat-strip strong,.dashboard-stat-strip small { display:block; }
.dashboard-stat-strip span { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:9px; font-weight:800; }
.dashboard-stat-strip strong { margin-top:5px; font-size:18px; }
.dashboard-stat-strip small { margin-top:3px; color:var(--muted); font-size:10px; }
.submission-progress { padding:16px 32px 18px; border-bottom:1px solid var(--line); }
.submission-progress > div:first-child { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.submission-progress .progress { margin-top:9px; height:6px; }
.roster-head { display:flex; justify-content:space-between; align-items:end; gap:18px; padding:24px 32px 12px; }
.roster-head span { color:var(--accent); text-transform:uppercase; letter-spacing:.1em; font-size:9px; font-weight:900; }
.roster-head h2 { margin:4px 0 0; font-size:27px; letter-spacing:-.035em; }
.roster-head p { margin:0; color:var(--muted); font-size:11px; }
.roster-list { gap:0; padding:0 32px 20px; }
.roster-row { grid-template-columns:minmax(0,1fr) 120px 100px 190px; padding:14px 0; border-top:1px solid var(--line); background:transparent; border-radius:0; box-shadow:none; }
.roster-row:hover { transform:none; background:var(--surface-subtle); margin:0 -12px; padding-left:12px; padding-right:12px; }
.roster-controller span,.roster-controller strong { display:block; }
.roster-controller span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.roster-controller strong { margin-top:3px; font-size:12px; }
.roster-action { text-align:right; }
.company-avatar { color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius:9px; }
.company-avatar.ai { color:var(--muted); background:var(--surface-subtle); border-color:var(--line); }
.company-row strong { font-size:15px; }
.status-pill { justify-self:start; border-radius:6px; padding:6px 8px; }
.status-pill.ready { color:var(--success); background:transparent; border-color:color-mix(in srgb,var(--success) 30%,var(--line)); }
.status-pill.waiting { color:var(--warning); background:transparent; border-color:color-mix(in srgb,var(--warning) 30%,var(--line)); }
.status-pill.bankrupt { color:var(--danger); background:transparent; border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); }

/* Existing pages flattened into the same minimal system. */
.hero { padding:30px; }
.hero::before { display:none; }
.hero p { color:var(--muted); }
.hero-tags span,.mode-card,.ai-selector,.choice,.report-link,.report-content-empty,.teaching-control,.segment-snapshot > div,.concept-flow > div,.mini-lessons > div,.result-metric,.market-health span,.micro-control,.impact-note,.principle-list span { background:var(--surface-subtle); }
.hero-tags span { color:var(--muted); }
.mode-card.selected,.choice.selected,.lesson-step.active { border-color:var(--accent); background:var(--accent-soft); box-shadow:none; }
.mode-card em,.privacy-icon,.mini-lessons b,.priority-strip b { color:var(--accent); }
.privacy-note,.callout,.lesson-note,.result-explanation,.challenge-budget { border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); background:var(--accent-soft); }
.privacy-icon { background:var(--accent-soft); }
.modal-backdrop { background:rgba(0,0,0,.56); }
.choice:hover,.report-link:hover { background:var(--surface-hover); border-color:var(--line-strong); transform:none; }
.sidebar { box-shadow:none; }
.summary-table thead td { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.report-frame { background:var(--panel); box-shadow:none; }
.toast { background:var(--ink); color:var(--bg); border-color:var(--ink); box-shadow:var(--shadow); }
.learning-header { border-left:4px solid var(--accent); }
.lesson-step { background:var(--panel); }
.lesson-step span { background:var(--surface-subtle); }
.lesson-step.done span { color:var(--accent); background:var(--accent-soft); }
.concept-flow span,.flow-card > b { background:var(--accent-soft); color:var(--accent); }
.priority-strip span,.decision-guide span { background:var(--accent-soft); color:var(--ink); }
.summary-table tr.you td { background:var(--accent-soft); }
.priority-bars i,.impact-row > div,.bar-row > div { background:var(--surface-subtle); }
.priority-bars b,.impact-row i,.bar-row i { background:var(--accent); }

/* Composition visuals: every composition is one bar totaling 100%. */
.composition-card { padding:18px 20px; margin-bottom:12px; }
.composition-card-head { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:14px; }
.composition-card-head span,.composition-card-head strong { display:block; }
.composition-card-head span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.composition-card-head strong { margin-top:4px; font-size:18px; }
.composition-card-head small,.composition-help { color:var(--muted); font-size:10px; line-height:1.45; }
.composition-help { margin:-4px 0 12px; }
.composition { display:grid; gap:12px; }
.composition-track { width:100%; height:18px; display:flex; overflow:hidden; border-radius:5px; background:var(--surface-subtle); border:1px solid var(--line); }
.composition-segment { display:block; height:100%; min-width:0; }
.composition-segment + .composition-segment { box-shadow:inset 1px 0 0 color-mix(in srgb,var(--bg) 68%,transparent); }
.composition-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:7px 12px; }
.composition-key { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:7px; align-items:center; font-size:10px; }
.composition-key i { width:8px; height:8px; border-radius:2px; }
.composition-key b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composition-key em { color:var(--muted); font-style:normal; font-variant-numeric:tabular-nums; }
.composition-key small { grid-column:2 / -1; color:var(--muted); font-size:9px; margin-top:-4px; }
.composition-empty { padding:14px; border:1px dashed var(--line-strong); border-radius:8px; color:var(--muted); font-size:11px; }
.channel-composition { margin-top:18px; }
.tone-0 { background:var(--composition-0)!important; }
.tone-1 { background:var(--composition-1)!important; }
.tone-2 { background:var(--composition-2)!important; }
.tone-3 { background:var(--composition-3)!important; }
.tone-4 { background:var(--composition-4)!important; }
.tone-5 { background:var(--composition-5)!important; }

/* Legacy globe is deliberately removed from the v1.8 minimal interface. */
.globe-stage { display:none; }

@media (max-width:900px) {
  .topbar { padding:0 18px; }
  .dashboard-head { align-items:flex-start; flex-direction:column; }
  .dashboard-actions { justify-content:flex-start; }
  .dashboard-stat-strip { grid-template-columns:repeat(2,1fr); }
  .dashboard-stat-strip > div:nth-child(2) { border-right:0; }
  .dashboard-stat-strip > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .roster-row { grid-template-columns:minmax(0,1fr) auto auto; }
  .roster-controller { display:none; }
  .landing-facts,.landing-loop { grid-template-columns:repeat(2,1fr); }
  .landing-facts span:nth-child(2),.landing-loop > div:nth-child(2) { border-right:0; }
  .landing-facts span:nth-child(-n+2),.landing-loop > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}
@media (max-width:680px) {
  .container { width:min(100% - 24px,1240px); }
  .topbar { height:auto; min-height:64px; align-items:center; gap:8px; padding-top:9px; padding-bottom:9px; }
  .brand small { display:none; }
  .brand strong { font-size:12px; }
  .top-actions { gap:2px; }
  .nav-btn { display:none; }
  .theme-toggle { min-width:auto; padding:8px 10px; font-size:11px; }
  .landing-hero { padding:48px 0 40px; }
  .landing-hero h1 { font-size:clamp(52px,19vw,86px); }
  .landing-facts,.landing-loop { grid-template-columns:1fr; }
  .landing-facts span,.landing-facts span:not(:first-child),.landing-loop > div,.landing-loop > div:not(:first-child) { padding:14px 0; border-right:0; border-bottom:1px solid var(--line); }
  .landing-facts span:last-child,.landing-loop > div:last-child { border-bottom:0; }
  .dashboard-head,.submission-progress,.roster-head { padding-left:18px; padding-right:18px; }
  .dashboard-stat-strip { grid-template-columns:1fr 1fr; }
  .dashboard-stat-strip > div { padding:14px; }
  .roster-head { align-items:flex-start; flex-direction:column; }
  .roster-list { padding:0 18px 14px; }
  .roster-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  .roster-row .status-pill { display:none; }
  .composition-legend { grid-template-columns:1fr 1fr; }
  .composition-card-head { flex-direction:column; align-items:flex-start; }
}

/* Version 1.9 — Business Intelligence & Main Menu */
.main-menu-page { margin-top:24px; }
.main-menu-hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:20px; align-items:stretch; padding:28px 0 22px; }
.main-menu-copy { min-height:330px; padding:42px 0; display:flex; flex-direction:column; justify-content:center; }
.main-menu-copy h1 { margin:10px 0 17px; max-width:820px; font-size:clamp(48px,7vw,86px); line-height:.94; letter-spacing:-.065em; }
.main-menu-copy p { margin:0; max-width:680px; color:var(--muted); font-size:16px; line-height:1.65; }
.term-card { padding:28px; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:14px; background:var(--panel); display:flex; flex-direction:column; justify-content:center; }
.term-card > span { color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.term-card h2 { margin:12px 0 10px; font-size:30px; letter-spacing:-.035em; }
.term-card p { margin:0; color:var(--muted); line-height:1.6; font-size:13px; }
.term-card small { margin-top:20px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.menu-game { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface-subtle); }
.menu-game > div:first-child { display:grid; gap:3px; }
.menu-game span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.menu-game strong { font-size:20px; }
.menu-game small { color:var(--muted); }
.menu-game-actions { display:flex; gap:8px; flex-wrap:wrap; }
.menu-game.empty { justify-content:flex-start; }
.menu-action-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
.menu-action { min-height:160px; padding:22px; text-align:left; border:0; border-right:1px solid var(--line); background:transparent; color:var(--ink); display:flex; flex-direction:column; align-items:flex-start; transition:background .15s ease; }
.menu-action:last-child { border-right:0; }
.menu-action:hover { background:var(--surface-hover); }
.menu-action span { color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.08em; }
.menu-action strong { margin-top:auto; font-size:20px; }
.menu-action small { margin-top:6px; color:var(--muted); line-height:1.45; }
.menu-action.primary-action { background:var(--accent-soft); }

.intelligence-page { margin-top:22px; }
.intel-header { display:flex; justify-content:space-between; gap:24px; align-items:end; padding:28px 0 22px; border-bottom:1px solid var(--line); }
.intel-header h1 { margin:8px 0 9px; font-size:clamp(36px,5vw,58px); letter-spacing:-.055em; line-height:1; }
.intel-header p { margin:0; max-width:700px; color:var(--muted); line-height:1.55; }
.intel-company-picker { max-width:430px; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
.intel-company-picker > span { width:100%; text-align:right; color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.market-brief { display:grid; grid-template-columns:repeat(6,1fr); margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
.market-brief > div { min-height:105px; padding:17px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.market-brief > div:last-child { border-right:0; }
.market-brief span,.market-brief strong,.market-brief small { display:block; }
.market-brief span { color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.market-brief strong { margin-top:6px; font-size:18px; }
.market-brief small { margin-top:3px; color:var(--muted); font-size:10px; }
.intel-grid { display:grid; gap:14px; margin-top:14px; }
.three-intel { grid-template-columns:repeat(3,1fr); }
.intel-card,.intel-section,.private-gate { border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.intel-card { padding:18px; }
.intel-card > span { display:block; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.leader-list { margin:0; padding:0; list-style:none; }
.leader-list li { min-height:46px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; border-bottom:1px solid var(--line); }
.leader-list li:last-child { border-bottom:0; }
.leader-rank { width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--line); border-radius:5px; color:var(--accent); font-size:10px; font-weight:900; }
.leader-list strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.leader-list em { color:var(--muted); font-size:11px; font-style:normal; font-variant-numeric:tabular-nums; }
.intel-section { margin-top:14px; padding:22px; }
.compact-title { margin:0 0 16px; }
.compact-title h2 { font-size:25px; }
.intel-empty { padding:24px 8px 8px; color:var(--muted); font-size:12px; line-height:1.5; }
.chart-empty { min-height:240px; display:grid; place-items:center; text-align:center; }
.position-chart { width:100%; overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface-subtle); }
.position-chart svg { display:block; width:100%; min-width:600px; height:auto; }
.position-chart .axis { stroke:var(--line-strong); stroke-width:1; }
.position-chart .axis-label,.position-chart .tick,.position-point text { fill:var(--muted); font-family:Inter,ui-sans-serif,sans-serif; font-size:11px; }
.position-point circle { fill:var(--accent); stroke:var(--panel); stroke-width:3; }
.position-point text { fill:var(--ink); font-size:10px; font-weight:750; }
.private-gate { padding:20px 22px; }
.private-gate p { margin:5px 0 0; color:var(--muted); }
.intel-table { min-width:1040px; }
.intel-table td { font-size:11px; }
.negative { color:var(--danger)!important; }
.mini-explainer { margin:10px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.break-even-preview { border-top-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.post-analysis { display:grid; grid-template-columns:minmax(230px,.6fr) minmax(0,1.4fr); gap:24px; margin-top:14px; padding:22px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; background:var(--panel); }
.post-analysis h2 { margin:6px 0 0; font-size:25px; letter-spacing:-.035em; }
.post-analysis ul { margin:0; padding-left:20px; display:grid; gap:9px; color:var(--muted); line-height:1.5; }
.post-analysis li::marker { color:var(--accent); }
.result-hero { padding:30px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.result-hero h1 { margin:8px 0 8px; font-size:clamp(36px,5vw,58px); letter-spacing:-.055em; }
.result-hero p { max-width:760px; margin:0; color:var(--muted); line-height:1.55; }
.roster-action-group { display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }

@media (max-width:1100px) {
  .top-actions .nav-btn:nth-of-type(4), .top-actions .nav-btn:nth-of-type(5) { display:none; }
  .market-brief { grid-template-columns:repeat(3,1fr); }
  .market-brief > div:nth-child(3n) { border-right:0; }
  .market-brief > div:nth-child(-n+3) { border-bottom:1px solid var(--line); }
  .menu-action-grid { grid-template-columns:repeat(2,1fr); }
  .menu-action:nth-child(2) { border-right:0; }
  .menu-action:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}
@media (max-width:900px) {
  .main-menu-hero { grid-template-columns:1fr; }
  .main-menu-copy { min-height:0; padding:26px 0 8px; }
  .term-card { min-height:230px; }
  .three-intel { grid-template-columns:1fr; }
  .intel-header { align-items:flex-start; flex-direction:column; }
  .intel-company-picker { justify-content:flex-start; max-width:none; }
  .intel-company-picker > span { text-align:left; }
  .post-analysis { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .main-menu-copy h1 { font-size:clamp(44px,16vw,68px); }
  .menu-game { align-items:flex-start; flex-direction:column; }
  .menu-action-grid { grid-template-columns:1fr; }
  .menu-action { min-height:135px; border-right:0; border-bottom:1px solid var(--line); }
  .menu-action:last-child { border-bottom:0; }
  .market-brief { grid-template-columns:1fr 1fr; }
  .market-brief > div { border-right:1px solid var(--line)!important; border-bottom:1px solid var(--line); }
  .market-brief > div:nth-child(2n) { border-right:0!important; }
  .market-brief > div:nth-last-child(-n+2) { border-bottom:0; }
  .intel-section { padding:16px; }
}
.private-chart-block { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.private-chart-block h3 { margin:6px 0 5px; font-size:21px; letter-spacing:-.03em; }
.private-chart-block > p { margin:0 0 14px; color:var(--muted); font-size:12px; line-height:1.5; }
.trajectory-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:5 5; opacity:.65; }
.market-brief { grid-template-columns:repeat(7,1fr); }
@media (max-width:1100px) {
  .market-brief { grid-template-columns:repeat(4,1fr); }
  .market-brief > div { border-bottom:1px solid var(--line); }
  .market-brief > div:nth-child(4n) { border-right:0; }
  .market-brief > div:nth-last-child(-n+3) { border-bottom:0; }
}
@media (max-width:680px) {
  .market-brief { grid-template-columns:1fr 1fr; }
  .market-brief > div:nth-last-child(-n+3) { border-bottom:1px solid var(--line); }
  .market-brief > div:last-child { border-bottom:0; grid-column:1 / -1; border-right:0!important; }
}

/* Version 2.0 — dynamic market + brand/customer intelligence */
.population-widget{display:grid;gap:10px;min-width:0}
.population-head{display:flex;justify-content:space-between;gap:12px;align-items:end;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.population-head strong{color:var(--text);font-size:12px}
.population-bar{display:flex;width:100%;height:18px;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:var(--panel-2)}
.population-bar>i{display:block;height:100%;min-width:0}
.population-1{background:#1f8a55!important}.population-2{background:#56a879!important}.population-3{background:#8ebda2!important}.population-4{background:#b9d3c4!important}.population-5{background:#dce9e1!important}
:root[data-theme="dark"] .population-1{background:#d52334!important}:root[data-theme="dark"] .population-2{background:#a82834!important}:root[data-theme="dark"] .population-3{background:#7e2a32!important}:root[data-theme="dark"] .population-4{background:#59262b!important}:root[data-theme="dark"] .population-5{background:#342124!important}
.population-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.population-legend span{display:grid;grid-template-columns:8px 1fr;grid-template-areas:'swatch name' 'swatch value';gap:0 6px;min-width:0;color:var(--muted);font-size:10px}
.population-legend span>i{grid-area:swatch;width:8px;height:100%;min-height:24px;border-radius:2px}
.population-legend b{grid-area:name;color:var(--text);overflow-wrap:anywhere;font-size:10px}
.population-legend em{grid-area:value;font-style:normal;font-variant-numeric:tabular-nums}
.dashboard-population{margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.dashboard-population p{margin:10px 0 0;color:var(--muted);font-size:12px}
.population-intel{padding:22px}
.customer-leaders{margin-top:14px}
.brand-health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.brand-health-grid>div{padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:0}
.brand-health-grid span,.brand-health-grid small{display:block;color:var(--muted);font-size:10px}
.brand-health-grid strong{display:block;margin-top:5px;font-size:22px;line-height:1.05;overflow-wrap:anywhere}
.market-shift-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:center;margin:18px 0;padding:22px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;background:var(--panel)}
.market-shift-card h2{margin:4px 0 8px}.market-shift-card p{margin:0;color:var(--muted);line-height:1.55}
.brand-memory{border-left:3px solid var(--accent)}
.dashboard-stat-strip strong,.budget-row strong,.market-brief strong,.intel-card em,.company-row strong{overflow-wrap:break-word;word-break:normal;min-width:0}
.summary-table td,.summary-table th{overflow-wrap:break-word;word-break:normal}

@media(max-width:900px){
  .population-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .market-shift-card{grid-template-columns:1fr}
}
@media(max-width:520px){
  .population-legend,.brand-health-grid{grid-template-columns:1fr}
}

/* v2.1 reporting revision: PDF-first reports + accounts/profile */
.menu-action-grid { grid-template-columns:repeat(5,1fr); }
.report-link-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:stretch; }
.report-link-row .report-link { width:100%; }
.pdf-direct { align-self:center; }

.auth-page,.profile-page { margin-top:26px; }
.auth-shell { min-height:620px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,470px); gap:54px; align-items:center; padding:34px 0 64px; }
.auth-copy h1 { margin:10px 0 16px; font-size:clamp(46px,7vw,78px); line-height:.96; letter-spacing:-.06em; }
.auth-copy p { max-width:640px; color:var(--muted); font-size:15px; line-height:1.65; }
.auth-feature { margin-top:28px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; gap:5px; max-width:560px; }
.auth-feature span { color:var(--muted); font-size:12px; }
.auth-card { padding:25px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:22px; }
.auth-tabs button { border:0; padding:11px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; }
.auth-tabs button.active { background:var(--accent-soft); color:var(--accent); }
.auth-card form,.profile-card form { display:grid; gap:14px; }
.auth-card label,.profile-card label { display:grid; gap:6px; color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.auth-card input,.profile-card input,.profile-card textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; background:var(--surface-subtle); color:var(--ink); font:inherit; font-size:13px; text-transform:none; letter-spacing:0; }
.auth-card input:focus,.profile-card input:focus,.profile-card textarea:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
.auth-submit { width:100%; margin-top:4px; }

.profile-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; padding:28px 0 22px; border-bottom:1px solid var(--line); }
.profile-avatar { width:70px; height:70px; display:grid; place-items:center; border-radius:16px; background:var(--accent-soft); color:var(--accent); font-size:24px; font-weight:900; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); }
.profile-head h1 { margin:4px 0 4px; font-size:36px; letter-spacing:-.04em; }
.profile-head p { margin:0; color:var(--muted); }
.profile-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
.profile-stat-grid > div { padding:20px; border-right:1px solid var(--line); }
.profile-stat-grid > div:last-child { border-right:0; }
.profile-stat-grid span,.profile-stat-grid strong,.profile-stat-grid small { display:block; }
.profile-stat-grid span { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.profile-stat-grid strong { margin-top:7px; font-size:28px; }
.profile-stat-grid small { margin-top:4px; color:var(--muted); font-size:10px; }
.profile-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.68fr); gap:16px; margin-top:16px; }
.profile-card,.future-record { padding:22px; }
.future-record h2 { margin:7px 0 9px; }
.future-record > p { color:var(--muted); line-height:1.55; }
.future-row { display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-top:1px solid var(--line); }
.future-row span { color:var(--accent); font-weight:800; }
.future-row.disabled span { color:var(--muted); }

@media (max-width:1000px) {
  .menu-action-grid { grid-template-columns:repeat(2,1fr); }
  .menu-action { border-bottom:1px solid var(--line); }
  .auth-shell,.profile-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .menu-action-grid { grid-template-columns:1fr; }
  .auth-shell { gap:20px; padding-top:14px; }
  .auth-copy h1 { font-size:48px; }
  .profile-head { grid-template-columns:auto 1fr; }
  .profile-head > button { grid-column:1 / -1; justify-self:start; }
  .profile-stat-grid { grid-template-columns:1fr; }
  .profile-stat-grid > div { border-right:0; border-bottom:1px solid var(--line); }
  .profile-stat-grid > div:last-child { border-bottom:0; }
}

/* v2.5 usability pass — clearer navigation, page identity and beginner guidance */
.page-titlebar {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;
  row-gap:2px;
  align-items:baseline;
  margin:0 0 18px;
  padding:0 0 14px;
  border-bottom:1px solid var(--line);
}
.page-titlebar > span {
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.page-titlebar h1 {
  margin:0;
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.035em;
}
.page-titlebar p {
  grid-column:2;
  margin:3px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  max-width:760px;
}

.nav-btn.active {
  color:var(--accent)!important;
  background:var(--accent-soft)!important;
  border-color:color-mix(in srgb,var(--accent) 18%,var(--line))!important;
}
.nav-btn.active:hover { color:var(--accent)!important; background:var(--accent-soft)!important; }

.theme-switch-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:10px;
  font-weight:750;
  cursor:pointer;
  border-radius:8px;
}
.theme-switch-button:hover { color:var(--ink); background:var(--surface-subtle); }
.theme-switch-track {
  width:32px;
  height:18px;
  padding:2px;
  display:block;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--surface-subtle);
  transition:background .15s ease,border-color .15s ease;
}
.theme-switch-track i {
  display:block;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--muted);
  transform:translateX(0);
  transition:transform .16s ease,background .16s ease;
}
.theme-switch-button.is-dark .theme-switch-track { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:var(--accent-soft); }
.theme-switch-button.is-dark .theme-switch-track i { transform:translateX(14px); background:var(--accent); }

.beginner-note,
.next-step-banner {
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:11px;
  background:var(--surface-subtle);
}
.beginner-note {
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  padding:13px 15px;
  font-size:11px;
}
.beginner-note strong { flex:0 0 auto; color:var(--ink); }
.beginner-note span { flex:1; color:var(--muted); line-height:1.45; }
.compact-note { margin-bottom:16px; }
.next-quarter-note { margin-top:14px; }
.next-step-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin:0 0 16px;
  padding:17px 19px;
}
.next-step-banner > div:first-child { min-width:0; }
.next-step-banner span { display:block; color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.next-step-banner strong { display:block; margin-top:4px; font-size:18px; }
.next-step-banner p { margin:4px 0 0; max-width:760px; color:var(--muted); font-size:11px; line-height:1.5; }
.next-step-banner > .actions { flex:0 0 auto; }

.menu-action-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.menu-action { border-bottom:0; }

.intel-header { padding-top:10px; }
.intel-header h2 { margin:8px 0 9px; font-size:clamp(30px,4vw,46px); letter-spacing:-.05em; line-height:1; }
.learning-header h2 { margin:6px 0 8px; font-size:31px; letter-spacing:-.04em; }
.tutorial-integrated {
  margin-top:46px;
  padding-top:32px;
  border-top:2px solid var(--line);
}
.tutorial-inline-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin:16px 0 14px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
}
.tutorial-inline-head h2 { margin:5px 0 7px; font-size:27px; letter-spacing:-.035em; }
.tutorial-inline-head p { margin:0; max-width:720px; color:var(--muted); line-height:1.5; font-size:12px; }

/* The dashboard now prioritizes the next action over secondary market explanation. */
.dashboard-page { margin-top:22px; }
.dashboard-head { padding-top:25px; }

@media (max-width:900px) {
  .next-step-banner { align-items:flex-start; flex-direction:column; }
  .next-step-banner > .actions { width:100%; justify-content:flex-start; }
  .beginner-note { align-items:flex-start; flex-wrap:wrap; }
  .tutorial-inline-head { flex-direction:column; }
}
@media (max-width:680px) {
  .page-titlebar { grid-template-columns:1fr; }
  .page-titlebar p { grid-column:1; }
  .theme-switch-button { padding:7px; }
  .theme-switch-button [data-theme-label] { display:none; }
  .menu-action-grid { grid-template-columns:1fr; }
}

/* v2.5 clarity + year structure */
.game-length-explainer {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0 0 14px;
}
.game-length-explainer .card { padding:18px; }
.game-length-explainer span,
.brand-guide-grid span {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.game-length-explainer strong,
.brand-guide-grid strong {
  display:block;
  margin-top:5px;
  font-size:20px;
  letter-spacing:-.02em;
}
.game-length-explainer p,
.brand-guide-grid p { margin:7px 0 0; color:var(--muted); line-height:1.5; font-size:12px; }
.brand-guide-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.brand-guide-grid .card { padding:18px; }
.brand-guide-grid .brand-influence-card { grid-column:span 2; }
.brand-image-summary { margin:14px 0 18px; }
.brand-image-heading { margin-bottom:10px; }
.brand-image-heading h3 { margin:4px 0 5px; }
.brand-image-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; max-width:760px; }
.year-checkpoint {
  margin:18px 0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}
.year-checkpoint-head {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:14px;
}
.year-checkpoint-head h2 { margin:4px 0 6px; }
.year-checkpoint-head p { margin:0; color:var(--muted); max-width:720px; line-height:1.5; }
.valuation-list { display:grid; gap:7px; }
.valuation-list > div {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
}
.valuation-list > div span { color:var(--muted); font-weight:800; }
.valuation-list > div em { font-style:normal; font-weight:850; }
.metric-footnote {
  margin-top:14px;
  padding:11px 13px;
  border-radius:10px;
  background:var(--accent-soft);
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.metric-footnote strong { color:var(--ink); }

@media (max-width: 900px) {
  .brand-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-guide-grid .brand-influence-card { grid-column:span 2; }
}
@media (max-width: 640px) {
  .game-length-explainer,.brand-guide-grid { grid-template-columns:1fr; }
  .brand-guide-grid .brand-influence-card { grid-column:auto; }
  .year-checkpoint-head { display:block; }
  .year-checkpoint-head .btn { margin-top:12px; }
  .valuation-list > div { grid-template-columns:28px minmax(0,1fr); }
  .valuation-list > div em { grid-column:2; }
}

/* v2.7 branding + online lobby */
.brand-logo-icon{width:32px;height:32px;object-fit:contain;border-radius:7px;display:block;flex:0 0 auto}
.main-menu-logo{display:block;width:min(420px,82%);height:auto;object-fit:contain;margin:0 0 18px}
.online-home,.online-lobby{padding-bottom:70px}
.online-hero{display:flex;align-items:center;gap:22px;padding:26px;margin-bottom:20px}
.online-hero-icon{width:74px;height:74px;border-radius:16px;object-fit:cover;flex:0 0 auto}
.online-hero h2{margin:4px 0 8px;font-size:clamp(1.5rem,3vw,2.2rem)}
.online-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}
.online-choice{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:18px;padding:24px;text-align:left;cursor:pointer;transition:.18s ease;display:flex;flex-direction:column;gap:7px}
.online-choice:hover{transform:translateY(-2px);border-color:var(--accent)}
.online-choice.primary{box-shadow:inset 3px 0 0 var(--accent)}
.online-choice>span{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.online-choice>strong{font-size:1.25rem}
.online-choice>small{color:var(--muted);line-height:1.5}
.lobby-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 24px;margin-bottom:18px}
.lobby-code-line{display:flex;align-items:center;gap:12px;margin:4px 0}
.lobby-code-line>strong{font-size:clamp(2rem,6vw,3.7rem);letter-spacing:.18em;line-height:1;color:var(--accent)}
.lobby-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.7fr);gap:18px;margin-bottom:18px}
.online-player-list{display:flex;flex-direction:column;gap:9px}
.online-player-row{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--border);border-radius:12px;padding:13px 14px;background:var(--surface-2)}
.online-player-row>div{display:flex;flex-direction:column;gap:3px}.online-player-row small{color:var(--muted)}
.lobby-settings{padding:22px}.lobby-settings h2{margin:5px 0 18px}.full-button{width:100%;justify-content:center;margin-top:16px}
.online-results{padding:22px;overflow:auto;margin-top:18px}.lobby-code-input{text-transform:uppercase;letter-spacing:.2em;font-weight:800}
.page-back-actions{margin:-4px 0 18px}.online-action{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent) 40%,transparent)}
@media(max-width:800px){.online-choice-grid,.lobby-grid{grid-template-columns:1fr}.lobby-header{align-items:flex-start}.online-hero{align-items:flex-start}.main-menu-logo{width:min(330px,92%)}}

/* v2.8 — language + matchmaking */
.language-picker{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 8px 5px 9px;color:var(--muted);white-space:nowrap;transition:border-color .18s ease,color .18s ease}
.language-picker:hover{border-color:var(--accent);color:var(--text)}
.language-picker-code{font-size:10px;font-weight:850;letter-spacing:.08em;color:var(--accent-2)}
.language-switch-button{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;padding:0 15px 0 0;font:inherit;font-size:11px;font-weight:750;cursor:pointer;outline:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 6px) 50%,calc(100% - 2px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.language-switch-button option{background:var(--surface-strong);color:var(--text)}
.online-choice-grid.three-choice{grid-template-columns:repeat(3,minmax(0,1fr))}
.matchmaking-choice{position:relative;overflow:hidden}
.matchmaking-choice:after{content:'AUTO';position:absolute;top:14px;right:14px;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.matchmaking-page{max-width:900px}
.matchmaking-search{padding:46px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.matchmaking-search h2{font-size:clamp(28px,4vw,46px);margin:0}
.matchmaking-search p{max-width:610px;margin:0 auto 10px;color:var(--muted);line-height:1.65}
.matchmaking-pulse{width:84px;height:84px;position:relative;margin-bottom:8px}
.matchmaking-pulse i{position:absolute;inset:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--accent);animation:mm-match-pulse 1.65s ease-out infinite}
.matchmaking-pulse i:nth-child(2){animation-delay:.35s}.matchmaking-pulse i:nth-child(3){animation-delay:.7s}
@keyframes mm-match-pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(6);opacity:0}}
.matchmaking-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(620px,100%);margin:10px 0 18px}
.matchmaking-facts span{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);display:flex;flex-direction:column;gap:3px}
.matchmaking-facts b{font-size:16px}.matchmaking-facts small{color:var(--muted);font-size:11px}
@media(max-width:900px){.online-choice-grid.three-choice{grid-template-columns:1fr}.matchmaking-facts{grid-template-columns:1fr}.language-picker-code{display:none}}

/* v2.9 — persistent in-game decision action */
.nav-decision-cta {
  white-space: nowrap;
  font-weight: 850;
  letter-spacing: .01em;
  border-color: var(--accent);
}
@media (max-width: 680px) {
  .topbar .live-indicator { display: none; }
  .nav-decision-cta { display: inline-flex; padding: 8px 11px; font-size: 11px; }
}

/* v2.12 clarity pass */
.game-flow-guide {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  overflow-x:auto;
  white-space:nowrap;
}
.flow-guide-label {
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-right:4px;
}
.game-flow-guide > i { color:var(--muted); font-style:normal; opacity:.65; }
.flow-step {
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:7px;
  cursor:pointer;
  font:inherit;
}
.flow-step b {
  display:inline-grid;
  place-items:center;
  width:19px;
  height:19px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  font-size:10px;
}
.flow-step span { font-size:11px; font-weight:750; }
.flow-step:hover { background:var(--paper-2); color:var(--ink); }
.flow-step.active { background:var(--accent-soft); color:var(--ink); }
.flow-step.active b { border-color:var(--accent); color:var(--accent); }

.feature-impact {
  margin-top:10px;
  padding:10px 12px;
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
  border-radius:6px;
  font-size:12px;
  font-weight:750;
  color:var(--ink);
}
.sidebar-intro { margin:-10px 0 14px; }
.key-row { padding:9px 0; font-size:13px; }
.simple-preview { margin-top:12px; }
.advanced-preview {
  margin-top:14px;
  border-top:1px solid var(--line);
  padding-top:10px;
}
.advanced-preview summary {
  cursor:pointer;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.advanced-preview-body { margin-top:10px; }

@media (max-width: 620px) {
  .game-flow-guide { padding:7px 8px; gap:5px; }
  .flow-guide-label { display:none; }
  .flow-step { padding:6px; }
  .flow-step span { font-size:10px; }
}

/* Product Development lifecycle */
.product-design-page { max-width: 1120px; }
.product-design-intro {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);
  gap:24px;
  align-items:center;
  margin-bottom:18px;
  padding:24px;
}
.product-design-intro h2,
.product-design-card h2 { margin:.25rem 0 .55rem; }
.product-budget-meter {
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper-2);
}
.product-budget-meter > span,
.product-quote-grid span,
.product-project-status span {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.product-budget-meter > strong { display:block; margin:5px 0 10px; font-size:18px; }
.product-budget-meter > small { display:block; margin-top:8px; color:var(--muted); }
.product-design-card { padding:24px; }
.product-design-list { display:grid; gap:9px; margin:18px 0 20px; }
.product-design-feature,
.product-target-row {
  display:grid;
  grid-template-columns:minmax(180px,.8fr) minmax(300px,1.2fr);
  gap:18px;
  align-items:center;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--paper-2);
}
.product-design-feature small,
.product-target-row small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.product-level-control {
  display:grid;
  grid-template-columns:minmax(150px,1fr) 78px 42px;
  gap:10px;
  align-items:center;
}
.product-level-control .input { height:38px; padding:6px 8px; }
.product-level-control b,
.product-target-row b { text-align:right; font-size:16px; }
.product-project-panel { display:grid; gap:16px; margin-top:20px; }
.product-project-status {
  padding:15px 16px;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:11px;
  background:var(--paper-2);
}
.product-project-status.ready { border-left-color:var(--positive); }
.product-project-status strong { display:block; margin:4px 0; font-size:19px; }
.product-project-status small { color:var(--muted); }
.product-target-list { display:grid; gap:8px; }
.product-target-row {
  grid-template-columns:190px minmax(180px,1fr) 48px;
}
.product-comparison {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.product-comparison > div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper-2);
}
.product-comparison span { color:var(--muted); font-size:11px; }
.product-comparison strong { font-size:12px; }
.product-quote-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.product-quote-grid > div {
  padding:12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper-2);
}
.product-quote-grid strong { display:block; margin-top:4px; font-size:14px; }
.launch-choice {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:15px;
  border:1px solid var(--accent);
  border-radius:11px;
  background:var(--accent-soft);
  cursor:pointer;
}
.launch-choice input { margin-top:3px; }
.launch-choice span { display:block; }
.launch-choice strong { display:block; }
.launch-choice small { display:block; margin-top:4px; color:var(--muted); }

@media (max-width: 760px) {
  .product-design-intro { grid-template-columns:1fr; }
  .product-design-feature { grid-template-columns:1fr; }
  .product-level-control { grid-template-columns:1fr 74px 40px; }
  .product-target-row { grid-template-columns:1fr; }
  .product-target-row b { text-align:left; }
  .product-comparison { grid-template-columns:1fr; }
  .product-quote-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* v2.14.2 responsive hardening */
img,svg,canvas,video,iframe{max-width:100%}
.card,.wizard-layout>* ,.reports-layout>* ,.lobby-grid>* ,.grid>* ,.online-choice-grid>* ,.product-design-page>*{min-width:0}
h1,h2,h3,h4,p,span,strong,small,label,.hint,.mini-explainer,.card-subtitle,.page-titlebar p{
  word-break:normal;
  overflow-wrap:break-word;
}
.btn,.menu-action,.online-choice,.report-link{max-width:100%;white-space:normal}
.input,input,select,textarea{max-width:100%;min-width:0}
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.summary-table td,.summary-table th{word-break:normal;overflow-wrap:break-word}
.launch-action-box{display:grid;gap:8px;padding:15px;border:1px solid var(--accent);border-radius:11px;background:var(--accent-soft)}
.launch-action-box small{color:var(--muted);line-height:1.45}
.launch-product-btn{width:100%;justify-content:center;font-size:14px}
.launch-product-btn.selected{border-color:var(--positive);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--positive) 45%,transparent)}

@media (max-width: 900px){
  .report-toolbar{align-items:flex-start;flex-direction:column}
  .report-toolbar-actions{justify-content:flex-start;width:100%}
  .reports-layout{grid-template-columns:1fr}
  .report-list{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-link-row{min-width:0}
}

@media (max-width: 900px){
  .topbar{height:auto;min-height:68px;padding:9px 12px;gap:10px;align-items:center}
  .brand-wrap{flex:0 0 auto;min-width:0}
  .brand-logo-icon{flex:0 0 auto}
  .brand strong{font-size:12px;white-space:nowrap}
  .brand small{display:none}
  .top-actions{min-width:0;max-width:calc(100vw - 150px);overflow-x:auto;overflow-y:hidden;justify-content:flex-start;gap:7px;padding:3px 2px 5px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .top-actions>.btn,.top-actions>.theme-switch-button,.top-actions>.language-picker{flex:0 0 auto}
  .container{width:min(100% - 18px,1180px);margin-top:16px}
  .card{border-radius:14px}
  .page-titlebar h1{font-size:clamp(26px,8vw,38px)}
  .actions,.wizard-controls,.menu-game-actions{gap:8px}
  .actions>.btn,.wizard-controls>.btn,.wizard-controls>div>.btn{min-height:42px}
  .choice{align-items:flex-start}
  .range-row{grid-template-columns:minmax(0,1fr) 88px;gap:8px}
  .product-design-card{padding:18px}
  .product-design-intro{padding:18px}
  .product-design-feature,.product-target-row{padding:12px}
  .product-level-control{grid-template-columns:minmax(0,1fr) 72px 36px;gap:7px}
  .product-quote-grid{grid-template-columns:1fr 1fr}
  .report-frame{height:72vh;min-height:520px;border-radius:10px}
  .report-list{grid-template-columns:1fr}
  .report-link span{word-break:normal;overflow-wrap:anywhere}
}

@media (max-width: 480px){
  .topbar{align-items:flex-start}
  .brand-logo-icon{width:30px;height:30px}
  .brand strong{font-size:10px}
  .top-actions{max-width:calc(100vw - 92px)}
  .top-actions .btn,.nav-decision-cta{padding:8px 10px;font-size:10px}
  .theme-switch-button{font-size:10px}
  .language-picker{padding:4px 6px}
  .hero,.wizard-card,.handoff-card,.lobby-settings,.online-results{padding:20px 16px}
  .big-number{font-size:34px}
  .product-level-control{grid-template-columns:1fr 64px 34px}
  .product-quote-grid{grid-template-columns:1fr}
  .product-comparison>div{align-items:flex-start}
  .report-toolbar-actions>.btn,.report-toolbar-actions>a{width:100%;justify-content:center}
  .question-area .summary-table,.question-area .summary-table tbody{display:block;width:100%}
  .question-area .summary-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
  .question-area .summary-table td{display:block;border:0;padding:0;min-width:0;text-align:left}
  .question-area .summary-table td:last-child{text-align:right;overflow-wrap:break-word;word-break:normal}
}

/* Product lifecycle strategy */
.rollover-preview{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px;display:grid;gap:3px;background:color-mix(in srgb,var(--panel) 88%,var(--positive) 12%)}
.rollover-preview span,.rollover-preview small{color:var(--muted)}
.rollover-preview b{font-size:20px}
.early-launch-box{border-color:color-mix(in srgb,#d9a441 55%,var(--border));background:color-mix(in srgb,var(--panel) 90%,#d9a441 10%)}
.btn.warning{border-color:#d9a441;background:color-mix(in srgb,#d9a441 18%,var(--panel));color:var(--text)}
.btn.warning:hover{background:color-mix(in srgb,#d9a441 28%,var(--panel))}
.early-launch-preview{width:100%;margin-bottom:10px}
.product-comparison strong small{display:block;font-size:10px;font-weight:500;color:var(--muted);margin-top:2px}

/* v2.17 Academic / Semester Mode */
.online-choice-grid.four-choice{grid-template-columns:repeat(2,minmax(0,1fr))}
.academic-choice{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 92%,var(--accent) 8%),var(--panel))}
.academic-hero{padding:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.academic-hero>div:first-child{max-width:760px}
.academic-course-list{padding:24px;margin-top:18px}
.course-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.course-card{appearance:none;text-align:left;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:14px;padding:18px;display:grid;gap:7px;cursor:pointer;transition:.18s ease}
.course-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.course-card span{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--accent)}
.course-card strong{font-size:17px}
.course-card small{color:var(--muted);line-height:1.45}
.academic-course-header{align-items:center}
.academic-course-header h2{margin:8px 0 4px}
.academic-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);gap:18px;margin-top:18px}
.academic-grid>.card{padding:24px}
.academic-control-card{align-self:start;display:grid;gap:14px}
.academic-team-list{display:grid;gap:10px}
.academic-team-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--border);border-radius:12px;padding:13px 14px;background:color-mix(in srgb,var(--panel) 96%,var(--bg) 4%)}
.academic-team-row>div:first-child{display:grid;gap:3px;min-width:0}
.academic-team-row small{color:var(--muted)}
.academic-team-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.academic-team-meta code,.academic-course-header code,.academic-course code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;border:1px solid var(--border);padding:6px 8px;border-radius:8px;background:var(--bg)}
.academic-deadline{margin:14px 0;border:1px solid var(--border);border-radius:12px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--panel)}
.academic-deadline span{color:var(--muted);font-size:12px}
.member-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.member-chip{padding:7px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;background:var(--bg)}
.academic-result-card{padding:24px;margin-top:18px}
.academic-release-card{margin-top:18px;padding:24px}
.waiting-state{padding:36px;text-align:center;margin-top:18px}
.waiting-state h2{margin:8px 0}

@media(max-width:900px){
  .online-choice-grid.four-choice{grid-template-columns:1fr}
  .academic-hero{align-items:flex-start;flex-direction:column}
  .academic-hero .actions{width:100%}
  .academic-grid{grid-template-columns:1fr}
  .course-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .course-card-grid{grid-template-columns:1fr}
  .academic-team-row{align-items:flex-start;flex-direction:column}
  .academic-team-meta{justify-content:flex-start;width:100%}
  .academic-deadline{align-items:flex-start;flex-direction:column}
  .academic-hero,.academic-grid>.card,.academic-course-list,.academic-result-card,.academic-release-card{padding:18px 16px}
}


/* v2.18 moderator / game archive */
.moderator-page{margin-top:26px}.moderator-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);margin:18px 0 22px}.moderator-stat-grid>div{padding:18px;border-right:1px solid var(--line);min-width:0}.moderator-stat-grid>div:last-child{border-right:0}.moderator-stat-grid span,.moderator-stat-grid strong{display:block}.moderator-stat-grid span{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:850}.moderator-stat-grid strong{font-size:26px;margin-top:7px;overflow-wrap:break-word}.moderator-text-stat{font-size:18px!important;text-transform:capitalize}.moderator-date-stat{font-size:14px!important;line-height:1.35}.moderator-search{display:flex;gap:10px;align-items:center;margin:0 0 22px}.moderator-search .input{flex:1;min-width:0}.moderator-table-wrap{padding:0;overflow:auto}.moderator-table{width:100%;border-collapse:collapse;min-width:760px}.moderator-table.wide{min-width:1040px}.moderator-table th,.moderator-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:normal;word-break:normal;overflow-wrap:break-word}.moderator-table th{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.moderator-table small,.moderator-link small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.moderator-link{border:0;background:none;color:inherit;padding:0;text-align:left;cursor:pointer;font:inherit}.moderator-link:hover strong{text-decoration:underline}.moderator-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--accent-soft)}.moderator-status.complete{opacity:.8}.moderator-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.moderator-detail-card{padding:20px}.moderator-game-list{display:grid;gap:10px}.moderator-game-card{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:14px 16px;text-align:left;color:inherit;cursor:pointer}.moderator-game-card:hover{border-color:var(--accent)}.moderator-game-card span,.moderator-game-card strong,.moderator-game-card small{display:block}.moderator-game-card span,.moderator-game-card small{color:var(--muted);font-size:10px}.moderator-game-card strong{margin:4px 0}.moderator-raw{margin-top:18px;padding:18px}.moderator-raw summary{cursor:pointer;font-weight:800}.moderator-raw pre{max-height:520px;overflow:auto;font-size:10px;white-space:pre-wrap;overflow-wrap:anywhere}.moderator-profile-head{margin-top:16px}
@media(max-width:900px){.moderator-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.moderator-stat-grid>div{border-bottom:1px solid var(--line)}.moderator-detail-grid{grid-template-columns:1fr}}
@media(max-width:560px){.moderator-stat-grid{grid-template-columns:1fr}.moderator-stat-grid>div{border-right:0}.moderator-search{align-items:stretch;flex-direction:column}.moderator-search .btn{width:100%}}

/* v2.19 Academic Classroom Management */
.academic-admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.academic-admin-nav .btn{flex:0 0 auto}
.academic-course-header{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.9fr) auto;gap:22px;padding:22px 24px;margin-top:12px}
.academic-course-header>div{min-width:0}.academic-course-header p{color:var(--muted);overflow-wrap:break-word}
.academic-course-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;overflow:hidden}
.academic-course-facts>div{padding:12px;border-right:1px solid var(--border);min-width:0}.academic-course-facts>div:last-child{border-right:0}
.academic-course-facts span,.academic-course-facts strong{display:block}.academic-course-facts span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}.academic-course-facts strong{font-size:13px;margin-top:4px;overflow-wrap:break-word;text-transform:capitalize}
.academic-dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel);margin:16px 0}
.academic-dashboard-metrics>div{padding:17px;border-right:1px solid var(--border);min-width:0}.academic-dashboard-metrics>div:last-child{border-right:0}
.academic-dashboard-metrics span,.academic-dashboard-metrics strong{display:block}.academic-dashboard-metrics span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:800}.academic-dashboard-metrics strong{font-size:21px;margin-top:5px;overflow-wrap:break-word}
.status-pill.progressing{background:color-mix(in srgb,#d9a441 15%,var(--panel));border-color:color-mix(in srgb,#d9a441 45%,var(--border))}.status-pill.late{background:color-mix(in srgb,#d95f41 14%,var(--panel));border-color:color-mix(in srgb,#d95f41 48%,var(--border))}
.academic-team-meta .btn.tiny,.academic-member-actions .btn.tiny{padding:6px 9px;font-size:10px;min-height:0}.btn.danger{border-color:color-mix(in srgb,#d95f41 50%,var(--border));color:color-mix(in srgb,#d95f41 75%,var(--text))}
.academic-activity-card{padding:22px 24px;margin-top:18px}.academic-activity-list{display:grid;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}.academic-activity-row{display:flex;justify-content:space-between;gap:16px;padding:11px 13px;border-bottom:1px solid var(--border);align-items:center}.academic-activity-row:last-child{border-bottom:0}.academic-activity-row>div{min-width:0;display:grid;gap:2px}.academic-activity-row strong{font-size:12px;overflow-wrap:break-word}.academic-activity-row small,.academic-activity-row time{font-size:10px;color:var(--muted)}.academic-activity-row time{white-space:nowrap}
.academic-setting-choice,.academic-late-choice{margin:10px 0}.academic-late-choice{padding:11px 12px}.academic-create-modal{max-width:620px}.course-card em{font-style:normal;font-size:10px;color:var(--muted)}
.academic-team-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;margin:18px 0}.academic-team-tools h2{margin:5px 0}.academic-manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.academic-team-manage-card{padding:20px;min-width:0}.academic-member-list{display:grid;gap:8px}.academic-member-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:10px;padding:10px}.academic-member-row>div:first-child{display:grid;gap:2px;min-width:0}.academic-member-row small{color:var(--muted)}.academic-member-actions{display:flex;align-items:center;gap:6px;min-width:0}.compact-select{width:auto;min-width:130px;padding:7px 9px;font-size:11px}
.academic-autosave-status{display:block;margin-top:5px;color:var(--muted);font-size:10px}.academic-rationale-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.academic-rationale-input{min-height:130px;resize:vertical;line-height:1.5}
.academic-history-quarter{margin:20px 0}.academic-history-item{padding:0;overflow:hidden;margin:10px 0}.academic-history-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 18px}.academic-history-item summary::-webkit-details-marker{display:none}.academic-history-item summary>div{display:grid;gap:3px}.academic-history-item summary>div:last-child{text-align:right;justify-items:end}.academic-history-item summary small{color:var(--muted)}.academic-history-body{border-top:1px solid var(--border);padding:18px;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(300px,1.1fr);gap:18px}.academic-rationale-read{border:1px solid var(--border);border-radius:12px;padding:14px}.academic-rationale-read span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800}.academic-rationale-read p{line-height:1.55;margin:8px 0;white-space:pre-wrap}.academic-rationale-read small{color:var(--muted)}.academic-outcome-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;overflow:hidden}.academic-outcome-grid>div{padding:12px;border-right:1px solid var(--border)}.academic-outcome-grid>div:last-child{border-right:0}.academic-outcome-grid span,.academic-outcome-grid strong{display:block}.academic-outcome-grid span{font-size:9px;color:var(--muted);text-transform:uppercase}.academic-outcome-grid strong{font-size:13px;margin-top:3px}
@media(max-width:1050px){.academic-course-header{grid-template-columns:1fr}.academic-course-facts{max-width:none}.academic-manage-grid{grid-template-columns:1fr}.academic-history-body{grid-template-columns:1fr}.academic-outcome-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.academic-outcome-grid>div:nth-child(3){border-right:0}}
@media(max-width:700px){.academic-course-facts,.academic-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.academic-course-facts>div:nth-child(2),.academic-dashboard-metrics>div:nth-child(2){border-right:0}.academic-course-facts>div:nth-child(-n+2),.academic-dashboard-metrics>div:nth-child(-n+2){border-bottom:1px solid var(--border)}.academic-team-tools,.academic-member-row{align-items:flex-start;flex-direction:column}.academic-member-actions{width:100%;flex-wrap:wrap}.compact-select{flex:1;min-width:150px}.academic-activity-row{align-items:flex-start;flex-direction:column;gap:4px}.academic-outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.academic-outcome-grid>div{border-bottom:1px solid var(--border)}.academic-history-item summary{align-items:flex-start;flex-direction:column}.academic-history-item summary>div:last-child{text-align:left;justify-items:start}.academic-admin-nav{overflow-x:auto;flex-wrap:nowrap}.academic-admin-nav .btn{white-space:nowrap}}
@media(max-width:430px){.academic-course-facts,.academic-dashboard-metrics,.academic-outcome-grid{grid-template-columns:1fr}.academic-course-facts>div,.academic-dashboard-metrics>div,.academic-outcome-grid>div{border-right:0;border-bottom:1px solid var(--border)}.academic-course-facts>div:last-child,.academic-dashboard-metrics>div:last-child,.academic-outcome-grid>div:last-child{border-bottom:0}.academic-course-header,.academic-activity-card,.academic-team-manage-card{padding:17px 14px}}

/* v2.20 Academic Analytics + Reporting */
.academic-quarter-picker{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.academic-quarter-picker .input{width:auto;min-width:190px;padding:8px 10px}
.academic-analytics-card,.academic-debrief-card,.academic-discussion-card,.academic-export-card{padding:22px 24px;margin-top:18px}.academic-analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}.academic-analytics-grid>.card{padding:20px}.academic-god-table table{min-width:1900px}.academic-god-table td small{display:block;color:var(--muted);font-size:9px;line-height:1.4;margin-top:3px;max-width:280px}.academic-god-table td.negative,.negative{color:#d95f41}.academic-metric-bars{display:grid;gap:9px}.academic-metric-bar{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(130px,1.4fr) minmax(80px,.55fr);gap:10px;align-items:center;font-size:11px}.academic-metric-bar>span{font-weight:700;overflow-wrap:break-word}.academic-metric-bar>div{height:10px;border-radius:999px;background:var(--bg);border:1px solid var(--border);overflow:hidden}.academic-metric-bar i{height:100%;display:block;background:var(--accent);border-radius:999px}.academic-metric-bar strong{text-align:right;font-variant-numeric:tabular-nums}.academic-award-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.academic-award{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--panel);min-width:0}.academic-award span,.academic-award strong,.academic-award em{display:block}.academic-award span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:800}.academic-award strong{font-size:15px;margin-top:7px;overflow-wrap:break-word}.academic-award em{font-size:11px;color:var(--accent);font-style:normal;margin-top:4px}.academic-alert-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.academic-alert-columns>section{border:1px solid var(--border);border-radius:12px;padding:16px}.academic-alert-columns h3{margin:0 0 10px;font-size:13px}.academic-ops-alert{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}.academic-ops-alert:last-child{border-bottom:0}.academic-ops-alert span{color:var(--muted);font-size:10px;text-align:right}.academic-discussion-card ol{list-style:none;padding:0;margin:0;display:grid;gap:10px}.academic-discussion-card li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;padding:12px;border:1px solid var(--border);border-radius:11px}.academic-discussion-card li>span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-weight:900;font-size:10px}.academic-discussion-card li p{margin:4px 0;line-height:1.5}.academic-export-card{display:flex;justify-content:space-between;gap:22px;align-items:center}.academic-export-card h2{margin:6px 0}.academic-export-card p{color:var(--muted);margin:0}.academic-report-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}.academic-report-row .report-link{width:100%}.btn.compact{padding:7px 10px;font-size:10px}.beginner-note.warning{border-color:color-mix(in srgb,#d9a441 45%,var(--border));background:color-mix(in srgb,var(--panel) 90%,#d9a441 10%)}
.academic-presentation{min-height:100vh;background:var(--bg);color:var(--text);padding:34px clamp(22px,4vw,70px) 50px}.academic-presentation-toolbar{display:flex;gap:10px;justify-content:flex-end;margin-bottom:18px}.academic-presentation header{text-align:center;margin:10px auto 28px}.academic-presentation header span{font-size:11px;font-weight:900;letter-spacing:.15em;color:var(--accent)}.academic-presentation header h1{font-size:clamp(34px,6vw,72px);margin:8px 0;letter-spacing:-.04em}.academic-presentation header p{font-size:clamp(18px,2.2vw,28px);color:var(--muted);margin:0}.academic-presentation-awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}.academic-presentation-awards>div{border:1px solid var(--border);border-radius:15px;padding:16px 18px;background:var(--panel)}.academic-presentation-awards span,.academic-presentation-awards strong,.academic-presentation-awards em{display:block}.academic-presentation-awards span{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.06em}.academic-presentation-awards strong{font-size:20px;margin:6px 0}.academic-presentation-awards em{font-style:normal;color:var(--accent)}.academic-presentation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.academic-presentation-grid>section{border:1px solid var(--border);border-radius:16px;padding:20px;background:var(--panel)}.academic-presentation-grid h2{margin:0 0 15px;font-size:18px}.academic-presentation .academic-metric-bar{font-size:13px;grid-template-columns:minmax(130px,.75fr) minmax(160px,1.4fr) minmax(110px,.55fr)}.academic-presentation .academic-metric-bar>div{height:14px}
@media(max-width:1000px){.academic-award-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.academic-presentation-grid{grid-template-columns:1fr}.academic-presentation-awards{grid-template-columns:repeat(2,minmax(0,1fr))}.academic-export-card{align-items:flex-start;flex-direction:column}.academic-analytics-grid{grid-template-columns:1fr}}
@media(max-width:650px){.academic-award-grid,.academic-presentation-awards,.academic-alert-columns{grid-template-columns:1fr}.academic-metric-bar,.academic-presentation .academic-metric-bar{grid-template-columns:minmax(85px,.8fr) minmax(90px,1.2fr);}.academic-metric-bar strong{grid-column:2;text-align:left}.academic-quarter-picker{align-items:flex-start;flex-direction:column}.academic-quarter-picker .input{min-width:0;width:100%}.academic-report-row{grid-template-columns:1fr}.academic-report-row .btn.compact{width:100%}.academic-presentation{padding:20px 14px 36px}.academic-presentation-toolbar{justify-content:flex-start;flex-wrap:wrap}}

/* v2.20 Academic Analytics & Reporting */

/* v2.21 Academic Adoption */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.academic-adoption-hero,
.academic-public-entry,
.demo-cta,
.academic-resource-intro,
.academic-adoption-checklist,
.academic-privacy { display:grid; gap:20px; }
.academic-public-entry,
.demo-cta { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.academic-demo-nav { position:sticky; top:72px; z-index:5; background:var(--bg); padding:10px 0; }
.demo-course-header { border-style:dashed; }
.academic-objective-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.academic-objective { display:grid; grid-template-columns:42px 1fr; gap:12px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--panel-soft); }
.academic-objective > span { font-weight:800; opacity:.55; font-variant-numeric:tabular-nums; }
.academic-objective strong { display:block; margin-bottom:5px; }
.academic-objective p { margin:0; color:var(--muted); line-height:1.5; }
.academic-format-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.academic-format-card h3 { margin:8px 0; }
.academic-format-card p { margin:0; color:var(--muted); line-height:1.55; }
.academic-adoption-checklist ol { margin:10px 0 0; padding-left:22px; display:grid; gap:10px; }
.academic-privacy-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.academic-privacy ul { margin:8px 0 0; padding-left:20px; display:grid; gap:7px; }
.instructor-tour { max-width:620px; }
.tour-progress { height:7px; border-radius:99px; background:var(--border); overflow:hidden; margin:10px 0 22px; }
.tour-progress i { display:block; height:100%; background:currentColor; border-radius:99px; }
.tour-step-visual { min-height:120px; display:flex; align-items:center; justify-content:center; gap:18px; margin:22px 0; border:1px solid var(--border); border-radius:18px; background:var(--panel-soft); }
.tour-step-visual span { font-size:42px; font-weight:900; opacity:.3; }
.tour-step-visual strong { font-size:26px; }
.academic-history-mini { display:flex; flex-wrap:wrap; gap:10px; }
.academic-history-mini span { border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.moderator-feedback-message { min-width:280px; white-space:normal; line-height:1.45; }
@media (max-width: 900px) {
  .academic-format-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .academic-objective-grid { grid-template-columns:1fr; }
  .academic-public-entry, .demo-cta { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .academic-format-grid, .academic-privacy-grid { grid-template-columns:1fr; }
  .academic-demo-nav { position:static; overflow-x:auto; flex-wrap:nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* v2.21.1 Academic classroom UX hotfix */
.academic-home-welcome{margin-top:16px;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 94%,var(--accent) 6%),var(--panel))}
.academic-home-welcome>div:first-child{max-width:760px}.academic-home-welcome h2{margin:7px 0 8px;font-size:clamp(24px,3vw,36px)}.academic-home-welcome p{margin:0;color:var(--muted);line-height:1.6}.academic-home-primary{flex:0 0 auto;min-width:190px}
.academic-home-counts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.academic-home-counts span{display:flex;align-items:baseline;gap:6px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);font-size:10px;color:var(--muted);white-space:nowrap}.academic-home-counts strong{font-size:18px;color:var(--text)}
.academic-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}.academic-role-card{position:relative;padding:24px;display:grid;grid-template-rows:1fr auto;gap:20px;min-height:250px;overflow:hidden}.academic-role-card.instructor{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 92%,var(--accent) 8%),var(--panel))}.academic-role-card.student{background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel) 95%,var(--bg) 5%))}.academic-role-card h2{margin:7px 0 8px;font-size:24px}.academic-role-card p{margin:0;color:var(--muted);line-height:1.55;max-width:580px}.academic-role-number{position:absolute;right:20px;top:14px;font-size:46px;font-weight:900;letter-spacing:-.05em;color:color-mix(in srgb,var(--muted) 16%,transparent);pointer-events:none}.academic-role-actions{display:flex;gap:9px;flex-wrap:wrap}.academic-role-card>.btn.full-button{margin:0;justify-self:stretch}.academic-mini-steps{display:flex;gap:7px;flex-wrap:wrap;list-style:none;padding:0;margin:15px 0 0;counter-reset:mmstep}.academic-mini-steps li{counter-increment:mmstep;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:10px;color:var(--muted);background:var(--bg)}.academic-mini-steps li::before{content:counter(mmstep) ". ";font-weight:900;color:var(--accent)}
.academic-quick-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}.academic-quick-tools>div:first-child{display:grid;gap:3px}.academic-quick-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.academic-quick-actions .btn{padding:8px 11px;font-size:10px}.academic-empty-start{grid-column:1/-1;padding:24px;border:1px dashed var(--border);border-radius:12px;display:grid;gap:6px;text-align:center;color:var(--muted)}.academic-empty-start strong{color:var(--text);font-size:15px}
@media(max-width:800px){.academic-home-welcome{align-items:flex-start;flex-direction:column}.academic-home-primary{width:100%}.academic-home-counts{justify-content:flex-start}.academic-role-grid{grid-template-columns:1fr}.academic-role-card{min-height:0}.academic-quick-tools{align-items:flex-start;flex-direction:column}.academic-quick-actions{width:100%;justify-content:flex-start}}
@media(max-width:520px){.academic-home-welcome,.academic-role-card{padding:19px 16px}.academic-role-actions,.academic-quick-actions{display:grid;grid-template-columns:1fr;width:100%}.academic-role-actions .btn,.academic-quick-actions .btn{width:100%}.academic-role-number{font-size:38px}}
.academic-admin-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.academic-admin-nav .btn{width:100%;justify-content:center;text-align:center;min-height:38px}
.academic-course-header>.actions{display:grid;grid-template-columns:1fr;align-content:start;min-width:150px}
@media(max-width:900px){.academic-admin-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.academic-course-header>.actions{display:flex;min-width:0}}
@media(max-width:520px){.academic-admin-nav{grid-template-columns:1fr}.academic-course-header>.actions{display:grid;width:100%}.academic-course-header>.actions .btn{width:100%}}

/* v2.24 information hierarchy */
.advanced-detail { margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(127,127,127,.035); }
.advanced-detail summary { cursor:pointer; padding:12px 14px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.advanced-detail[open] summary { border-bottom:1px solid var(--line); }
.advanced-detail .result-metrics { padding:12px; }

/* ==========================================================================\n   v2.26 visual identity unification — Markup Markets website + simulation\n   Presentation-only overrides. The product logic and information architecture\n   remain unchanged. These tokens intentionally mirror the WordPress theme.\n   ========================================================================== */
:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-deep: #ffffff;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-elevated: #f6f5f3;
  --panel-soft: #fbfbfa;
  --ink: #171717;
  --muted: #6d6d6d;
  --line: #deddd9;
  --line-strong: #c9c7c1;
  --accent: #e52e40;
  --accent-2: #c92435;
  --accent-3: #f05b69;
  --accent-soft: #fff1f3;
  --success: #167b4b;
  --warning: #9a6508;
  --danger: #b4232f;
  --shadow: 0 8px 28px rgba(35, 28, 23, .07);
  --surface-subtle: #f6f5f3;
  --surface-hover: #efeeeb;
  --topbar-bg: rgba(255, 255, 255, .94);
  --accent-contrast: #ffffff;
  --border: var(--line);
  --text: var(--ink);
  --surface: var(--panel);
  --surface-2: var(--panel-elevated);
  --surface-soft: var(--panel-soft);
  --surface-strong: var(--panel-elevated);
  --panel-2: var(--panel-elevated);
  --positive: var(--success);
  --composition-0: #e52e40;
  --composition-1: #ce5964;
  --composition-2: #b97980;
  --composition-3: #c99da1;
  --composition-4: #dec2c5;
  --composition-5: #f0dfe1;
}

:root[data-theme="dark"] {
  --bg: #111110;
  --bg-deep: #111110;
  --panel: #171716;
  --panel-solid: #171716;
  --panel-elevated: #1c1c1b;
  --panel-soft: #1b1b19;
  --ink: #f3f1ed;
  --muted: #aaa8a2;
  --line: #3b3a37;
  --line-strong: #55524c;
  --accent: #e52e40;
  --accent-2: #ff5665;
  --accent-3: #c92435;
  --accent-soft: #2d181c;
  --success: #52b984;
  --warning: #d2a14f;
  --danger: #ff6873;
  --shadow: 0 12px 34px rgba(0,0,0,.25);
  --surface-subtle: #1c1c1b;
  --surface-hover: #252523;
  --topbar-bg: rgba(17, 17, 16, .94);
  --accent-contrast: #ffffff;
  --border: var(--line);
  --text: var(--ink);
  --surface: var(--panel);
  --surface-2: #1c1c1b;
  --surface-soft: #1b1b19;
  --surface-strong: #252523;
  --panel-2: #1c1c1b;
  --positive: var(--success);
  --composition-0: #f05b69;
  --composition-1: #d84b59;
  --composition-2: #b73b47;
  --composition-3: #8d3039;
  --composition-4: #63252c;
  --composition-5: #3e1b20;
}

body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Shared site/app header language. */
.topbar {
  min-height: 78px;
  height: 78px;
  padding: 0 max(24px, calc((100vw - 1280px) / 2));
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.025);
  backdrop-filter: blur(16px);
}
.brand-wrap { gap: 10px; }
.brand-logo-wordmark {
  width: 166px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}
.brand-product-label {
  display: inline-flex;
  min-height: 22px;
  padding: 0 7px;
  align-items: center;
  border-left: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.brand-logo-icon { display: none; }
.top-actions { gap: 3px; }
.nav-btn,
.theme-switch-button {
  border-radius: 4px;
}
.nav-btn {
  padding: 9px 10px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  font-size: 11px;
  font-weight: 700;
}
.nav-btn:hover { color: var(--ink); background: var(--surface-subtle); border-color: transparent; }
.nav-btn.active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: transparent !important;
}
.nav-decision-cta { margin-left: 4px; }
.language-picker {
  border-color: var(--line);
  border-radius: 4px;
  padding: 5px 7px 5px 8px;
}
.language-picker:hover { border-color: var(--line-strong); }
.language-picker-code { color: var(--accent); }
.theme-switch-button { border-radius: 4px; }
.theme-switch-track { border-radius: 999px; }
.live-indicator i { background: var(--success); }

/* Website-compatible spacing, surfaces, and controls. */
.container { width: min(1180px, calc(100% - 48px)); margin: 30px auto 58px; }
.card,
.dashboard-surface,
.intel-card,
.intel-section,
.private-gate,
.online-choice,
.online-player-row,
.course-card,
.academic-team-row,
.academic-deadline,
.academic-dashboard-metrics,
.academic-course-facts,
.academic-objective,
.tour-step-visual,
.academic-quick-tools,
.academic-activity-list,
.academic-history-item,
.academic-rationale-read,
.academic-outcome-grid,
.academic-alert-columns > section,
.academic-discussion-card li,
.academic-award,
.academic-presentation-awards > div,
.academic-presentation-grid > section {
  border-radius: 8px;
}
.card { box-shadow: none; }
.btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 750;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { border-color: transparent; }
.input,
select.input,
textarea.input,
.auth-card input,
.profile-card input,
.profile-card textarea {
  border-radius: 4px;
  background: var(--panel);
  border-color: var(--line-strong);
}
.input:focus,
.auth-card input:focus,
.profile-card input:focus,
.profile-card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.kicker,
.brand-eyebrow,
.page-titlebar > span { color: var(--accent); }

/* Typography mirrors the public site: strong hierarchy, calmer support copy. */
.page-titlebar {
  padding-bottom: 15px;
  border-bottom-color: var(--line);
}
.page-titlebar h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 720; }
.page-titlebar p { font-size: 12px; line-height: 1.6; }
.section-title h2,
.roster-head h2,
.compact-title h2 { font-weight: 700; }

/* Main menu becomes a direct visual continuation of markup.markets. */
.main-menu-page { margin-top: 18px; }
.main-menu-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
  gap: 58px;
  padding: 44px 0 38px;
  border-bottom: 1px solid var(--line);
}
.main-menu-copy { min-height: 310px; padding: 18px 0; }
.main-menu-logo { width: min(300px, 75%); margin-bottom: 24px; }
.main-menu-copy h1 {
  max-width: 760px;
  margin: 13px 0 20px;
  font-size: clamp(48px, 6.4vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 720;
}
.main-menu-copy p { max-width: 650px; font-size: 17px; line-height: 1.68; }
.term-card {
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0;
  padding: 30px;
  background: var(--surface-subtle);
}
.term-card h2 { font-weight: 700; }
.menu-game {
  margin-top: 22px;
  border-radius: 6px;
  background: var(--surface-subtle);
}
.menu-action-grid { border-radius: 0; margin-top: 18px; }
.menu-action { min-height: 175px; padding: 24px; }
.menu-action:hover { background: var(--surface-subtle); }
.menu-action.primary-action { background: var(--accent-soft); }
.menu-action.primary-action strong { color: var(--accent-2); }
.menu-action strong { font-size: 19px; }
.menu-action span { color: var(--accent); }

/* Game command surfaces: neutral information, red interaction, semantic status. */
.dashboard-surface { border-radius: 8px; }
.dashboard-head { padding-top: 34px; }
.dashboard-head h1 { font-weight: 720; }
.dashboard-stat-strip,
.market-brief { background: var(--surface-subtle); border-radius: 0; }
.metric:hover,
.company-row:hover,
.mode-card:hover,
.online-choice:hover,
.course-card:hover { transform: none; }
.company-avatar {
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}
.status-pill { border-radius: 999px; }
.status-pill.ready { color: var(--success); border-color: color-mix(in srgb,var(--success) 35%,var(--line)); }
.status-pill.waiting,
.status-pill.progressing { color: var(--warning); border-color: color-mix(in srgb,var(--warning) 35%,var(--line)); }
.status-pill.bankrupt,
.status-pill.late { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 35%,var(--line)); }
.progress > div,
.academic-metric-bar i { background: var(--accent); }

/* Decisions and selection states use the brand red instead of a second identity. */
.mode-card,
.choice,
.ai-selector,
.report-link,
.teaching-control,
.micro-control,
.impact-note,
.principle-list span,
.lesson-step span,
.academic-mini-steps li,
.member-chip {
  border-radius: 6px;
}
.mode-card.selected,
.choice.selected,
.lesson-step.active,
.launch-product-btn.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}
.choice:hover,
.report-link:hover { border-color: var(--line-strong); }

/* Academic Mode now looks like the educator marketing surface. */
.academic-home-welcome,
.academic-role-card.instructor,
.academic-choice {
  background: linear-gradient(145deg, color-mix(in srgb,var(--panel) 94%,var(--accent) 6%), var(--panel));
  border-color: color-mix(in srgb,var(--accent) 32%,var(--line));
}
.academic-role-card.student { background: var(--panel); }
.academic-role-number { color: color-mix(in srgb,var(--accent) 12%,transparent); }
.academic-admin-nav {
  border-radius: 6px;
  background: var(--surface-subtle);
}
.academic-admin-nav .btn { background: var(--panel); }
.academic-admin-nav .btn.primary { background: var(--accent); }
.academic-course-facts,
.academic-dashboard-metrics { background: var(--panel); }
.academic-metric-bar > div { background: var(--surface-subtle); }
.academic-discussion-card li > span {
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Charts / reports maintain readable semantic distinctions while using red as brand. */
.position-point circle { fill: var(--accent); }
.leader-rank { color: var(--accent); }
.metric-footnote,
.beginner-note,
.next-step-banner { border-radius: 6px; }
.beginner-note,
.next-step-banner { border-left-color: var(--accent); }
.report-frame { border-radius: 6px; }
.summary-table th { background: var(--surface-subtle); }

/* Modals read like the website's product frames rather than floating game UI. */
.modal-backdrop { background: rgba(17,17,16,.66); backdrop-filter: blur(6px); }
.modal { border-radius: 8px; padding: 30px; }
.mode-card { border-radius: 6px; }

/* Educator landing bundled with the app inherits the same public brand system. */
.educator-landing header img { width: 178px; max-width: 46vw; }
.educator-panel { border-left: 4px solid var(--accent); }

@media (max-width: 1050px) {
  .brand-logo-wordmark { width: 145px; }
  .brand-product-label { display: none; }
  .top-actions { max-width: calc(100vw - 180px); }
  .main-menu-hero { gap: 34px; }
}

@media (max-width: 900px) {
  .topbar { min-height: 68px; height: auto; padding: 9px 14px; }
  .brand-logo-wordmark { width: 132px; }
  .top-actions { max-width: calc(100vw - 165px); }
  .container { width: min(100% - 30px, 1180px); margin-top: 18px; }
  .main-menu-hero { grid-template-columns: 1fr; gap: 14px; padding-top: 30px; }
  .main-menu-copy { min-height: 0; }
  .term-card { max-width: 720px; }
}

@media (max-width: 680px) {
  .brand-logo-wordmark { width: 118px; }
  .top-actions { max-width: calc(100vw - 145px); }
  .nav-btn { display: none; }
  .nav-decision-cta { display: inline-flex; }
  .main-menu-logo { width: min(250px, 75%); }
  .main-menu-copy h1 { font-size: clamp(43px, 14vw, 64px); }
  .menu-action-grid { grid-template-columns: 1fr; }
  .menu-action { min-height: 128px; border-right: 0; border-bottom: 1px solid var(--line); }
  .menu-action:last-child { border-bottom: 0; }
}

@media (max-width: 430px) {
  .brand-logo-wordmark { width: 106px; }
  .top-actions { max-width: calc(100vw - 128px); }
  .container { width: min(100% - 22px, 1180px); }
  .btn { min-height: 42px; }
}
/* Remove two residual pre-v1.8 purple label colors from legacy selectors. */
.concept-flow span,
.flow-card > b { color: var(--accent); }


/* v2.27 pilot analytics: moderator decision archive */
.moderator-stat-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.moderator-stat-grid-compact{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
.moderator-decision-list{display:grid;gap:12px;margin:18px 0 28px}
.moderator-decision-card{padding:0;overflow:hidden}
.moderator-decision-card>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px;cursor:pointer}
.moderator-decision-card>summary::-webkit-details-marker{display:none}
.moderator-decision-card>summary>div{min-width:0}
.moderator-decision-card>summary strong,.moderator-decision-card>summary small{display:block}
.moderator-decision-card>summary strong{font-size:17px;margin:4px 0}
.moderator-decision-card>summary small{color:var(--muted);font-size:10px;line-height:1.45}
.moderator-decision-open{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}
.moderator-decision-body{border-top:1px solid var(--line);padding:18px 19px 20px}
.moderator-decision-bits{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}
.moderator-decision-bits span{display:inline-flex;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);font-size:10px;font-weight:750}
.moderator-decision-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:12px 0}
.moderator-decision-grid>div{padding:11px 12px;border-right:1px solid var(--line);min-width:0}.moderator-decision-grid>div:last-child{border-right:0}
.moderator-decision-grid span,.moderator-decision-grid strong{display:block}.moderator-decision-grid span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}.moderator-decision-grid strong{font-size:11px;margin-top:4px;overflow-wrap:anywhere}
.moderator-rationale{padding:14px 15px;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;margin:12px 0}.moderator-rationale p{margin:5px 0 0;line-height:1.55}
.moderator-decision-json{margin:12px 0}.moderator-decision-json summary{cursor:pointer;font-size:11px;font-weight:800}.moderator-decision-json pre{max-height:420px;overflow:auto;padding:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;font-size:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.moderator-empty-decisions{padding:22px}.moderator-empty-decisions p{color:var(--muted);margin:6px 0 0}
@media(max-width:1100px){.moderator-stat-grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}.moderator-decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.moderator-decision-grid>div:nth-child(2){border-right:0}.moderator-decision-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:700px){.moderator-stat-grid-five,.moderator-stat-grid-compact{grid-template-columns:1fr}.moderator-decision-grid{grid-template-columns:1fr}.moderator-decision-grid>div{border-right:0;border-bottom:1px solid var(--line)}.moderator-decision-grid>div:last-child{border-bottom:0}.moderator-decision-card>summary{align-items:flex-start}.moderator-decision-open{padding-top:4px}}


/* v2.27.1 readability polish: keep copy away from card borders. */
.academic-adoption-hero,
.academic-public-entry,
.academic-resource-intro,
.academic-adoption-checklist,
.academic-privacy,
.demo-cta {
  padding: 24px 26px;
}
.academic-format-card {
  padding: 20px 21px;
}
.academic-resource-intro > p,
.academic-adoption-checklist > p,
.academic-privacy > p,
.demo-cta p {
  line-height: 1.6;
}
.academic-objective {
  padding: 16px 18px;
  gap: 14px;
}
.academic-privacy-grid > div {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
}
.academic-demo .academic-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 18px;
  margin-top: 18px;
}
.academic-demo .academic-overview-grid > .card {
  padding: 22px 24px;
}
.academic-decision-record {
  padding: 0;
  overflow: hidden;
  margin: 10px 0;
}
.academic-decision-record > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  cursor: pointer;
}
.academic-decision-record > summary::-webkit-details-marker { display: none; }
.academic-history-detail {
  padding: 18px;
  border-top: 1px solid var(--border);
}
.instructor-tour > p {
  margin: 10px 0 0;
  line-height: 1.65;
}
.tour-step-visual {
  padding: 18px 20px;
}
@media (max-width: 900px) {
  .academic-demo .academic-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .academic-adoption-hero,
  .academic-public-entry,
  .academic-resource-intro,
  .academic-adoption-checklist,
  .academic-privacy,
  .demo-cta,
  .academic-format-card,
  .academic-demo .academic-overview-grid > .card {
    padding: 18px 16px;
  }
  .academic-objective {
    grid-template-columns: 34px minmax(0,1fr);
    padding: 14px;
  }
  .academic-decision-record > summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* v2.27.2 — guided instructor tour + invitation workflow */
.academic-invite-modal { max-width: 720px; }
.academic-invite-modal > p { line-height: 1.65; color: var(--muted); }
.academic-invite-class-code {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; margin: 18px 0 12px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--panel-soft);
}
.academic-invite-class-code span,
.academic-invite-row span { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.academic-invite-class-code code { font-size: 20px; letter-spacing: .12em; }
.academic-invite-list { display: grid; gap: 9px; }
.academic-invite-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
}
.academic-invite-code { display: flex; align-items: center; gap: 9px; }
.academic-invite-code code { min-width: 74px; text-align: center; font-weight: 800; letter-spacing: .08em; }
.academic-demo-control-panel { margin: 16px 0; }
.academic-demo-control-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.academic-demo-control-panel .hint { margin: 14px 0 0; line-height: 1.55; }

.instructor-tour-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.instructor-tour-spotlight {
  position: fixed; z-index: 91; border: 2px solid var(--accent); border-radius: 13px;
  box-shadow: 0 0 0 9999px rgba(10, 10, 10, .70), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  background: transparent; pointer-events: auto; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.instructor-tour-popover {
  position: fixed; z-index: 92; max-width: 390px; margin: 0; padding: 20px 21px;
  box-shadow: 0 18px 55px rgba(0,0,0,.30); pointer-events: auto;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}
.instructor-tour-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.instructor-tour-head .kicker { margin: 0; }
.tour-close {
  appearance: none; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text);
  border-radius: 9px; width: 34px; height: 34px; display: grid; place-items: center;
  font: inherit; font-size: 22px; cursor: pointer; flex: 0 0 auto;
}
.tour-close:hover { border-color: var(--accent); }
.instructor-tour .tour-progress { margin: 12px 0 16px; }
.instructor-tour .tour-progress i { background: var(--accent); }
.tour-target-label {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 10px;
  padding: 6px 9px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.tour-target-label strong { color: var(--accent); }
.instructor-tour-popover h2 { margin: 0 0 8px; font-size: clamp(21px, 2.5vw, 28px); }
.instructor-tour-popover > p { margin: 0; line-height: 1.65; color: var(--muted); }
.instructor-tour-actions { margin-top: 18px; }
.tour-key-hint { display: block; margin-top: 12px; color: var(--muted); line-height: 1.45; }
body.instructor-tour-active { overflow-x: hidden; }

@media (max-width: 760px) {
  .instructor-tour-popover { max-width: none; padding: 17px 16px; }
  .instructor-tour-spotlight { box-shadow: 0 0 0 9999px rgba(10,10,10,.64), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  .tour-key-hint { display: none; }
}
@media (max-width: 620px) {
  .academic-invite-class-code, .academic-invite-row { align-items: flex-start; flex-direction: column; }
  .academic-invite-code { width: 100%; justify-content: space-between; }
  .academic-demo-control-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .academic-demo-control-actions .btn { width: 100%; }
}
@media (max-width: 420px) {
  .academic-demo-control-actions { grid-template-columns: 1fr; }
}
.academic-demo-practice-setting { margin: 14px 0 0; cursor: default; }
.academic-demo-practice-setting input { pointer-events: none; }
.instructor-tour-layer { pointer-events: auto; }
.instructor-tour-popover::before {
  content:""; position:absolute; width:12px; height:12px; background:var(--panel);
  border-left:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));
  transform:rotate(45deg); z-index:-1;
}
.instructor-tour-popover[data-placement="right"]::before { left:-7px; top:28px; }
.instructor-tour-popover[data-placement="left"]::before { right:-7px; top:28px; transform:rotate(225deg); }
.instructor-tour-popover[data-placement="below"]::before { top:-7px; left:28px; transform:rotate(135deg); }
.instructor-tour-popover[data-placement="bottom"]::before { display:none; }

/* v1.0 Academic Mode collaboration safety */
.academic-recovery-panel {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.academic-recovery-panel summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--text);
}
.academic-recovery-panel[open] summary { margin-bottom: 14px; }
.academic-recovery-modal { max-width: 620px; }
.academic-recovery-modal > p { color: var(--muted); line-height: 1.65; }
.academic-recovery-code {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
}
.academic-recovery-code span { color: var(--muted); font-size: 12px; }
.academic-recovery-code code { font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.academic-autosave-status .btn { margin-left: 8px; vertical-align: middle; }
@media (max-width: 620px) {
  .academic-recovery-code { grid-template-columns: 1fr; align-items: start; }
  .academic-recovery-code .btn { width: 100%; }
}
\n\n/* v1.0.1 — shared website/game theme control + simplified Online Play heading */\n.theme-toggle {\n  width:40px;height:40px;padding:0;display:inline-grid;grid-template-columns:1fr 1fr;place-items:center;\n  border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;font-size:11px;overflow:hidden;flex:0 0 auto;\n}\n.theme-toggle span{display:grid;place-items:center;width:100%;height:100%;}\n.theme-toggle-moon{opacity:.45;}\n[data-theme=\"dark\"] .theme-toggle-sun{opacity:.4;}\n[data-theme=\"dark\"] .theme-toggle-moon{opacity:1;}\n.theme-toggle:hover{background:var(--surface-subtle);}\n.online-options-heading{margin:2px 0 18px;padding:4px 0;}\n.online-options-heading .kicker{display:block;margin-bottom:6px;}\n.online-options-heading h2{margin:0;font-size:clamp(1.35rem,3vw,2rem);}\n.moderator-support-course{box-shadow:inset 3px 0 0 var(--accent);}\n@media(max-width:700px){.theme-toggle{width:38px;height:38px;}}\n