:root,
[data-study-theme="academica-navy"] {
  --ground: #F4F4F5;
  --well: #FFFFFF;
  --panel: #ECECEE;
  --panel-alt: #DCDCDF;
  --grid-stroke: #D4D4D8;
  --hairline-strong: #A1A1AA;
  --ink: #18181B;
  --ink-secondary: #484850;
  --ink-muted: #52525B;
  --on-primary: #FFFFFF;

  /* Primary Brand: Academica Navy (scale.toml [navy]) */
  --primary-fill: #2E4866;
  --primary-hover: #29415C;
  --primary-pressed: #23374E;
  --accent-ink: #182B40;
  --primary-wash: #EEF5FD;
  --primary-wash-deep: #E5EEF9;
  --primary-border: #CFDEEF;
  --tile-primary: #6A8AAF;

  /* Shared Tailwind Pastel Washes & Semantic Tiles */
  --positive: #059669;
  --positive-wash: #D1FAE5;
  --positive-wash-soft: #ECFDF5;
  --on-positive-wash: #065F46;
  --tile-green: #10B981;

  --info: #0891B2;
  --info-wash: #E0F2FE;
  --cyan-wash: #CFFAFE;
  --on-info-wash: #075985;
  --tile-teal: #06B6D4;

  --violet: #5957EB;
  --violet-wash: #EDE9FE;
  --indigo-wash: #E0E7FF;
  --on-violet-wash: #3730A3;
  --tile-violet: #717AF5;

  --warn: #EA580C;
  --warn-wash: #FFEDD5;
  --amber-wash: #FEF3C7;
  --on-warn-wash: #92400E;
  --tile-gold: #F97316;

  --negative: #991B1B;
  --negative-wash: #FEE2E2;
  --rose-wash: #FFE4E6;
  --on-negative-wash: #991B1B;
  --tile-pink: #FB7185;
  --tile-coral: #F0907C;

  --face-display: 'Newsreader', Georgia, serif;
  --face-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-study-theme="clinical-cobalt"] {
  --ground: #F1F5F9;
  --well: #FFFFFF;
  --panel: #E9EEF4;
  --panel-alt: #CBD5E1;
  --grid-stroke: #CBD5E1;
  --ink: #0F172A;
  --ink-secondary: #334155;
  --ink-muted: #475569;
  --primary-fill: #1D4ED8;
  --primary-hover: #1E47C3;
  --primary-pressed: #1E40AF;
  --accent-ink: #1E40AF;
  --primary-wash: #DBEAFE;
  --primary-wash-deep: #DBEAFE;
  --primary-border: #CBD5E1;
  --tile-primary: #3B82F6;
}

[data-study-theme="oxford-indigo"] {
  --ground: #F4F4F5;
  --well: #FFFFFF;
  --panel: #ECECEE;
  --panel-alt: #DCDCDF;
  --grid-stroke: #D4D4D8;
  --ink: #18181B;
  --ink-secondary: #484850;
  --ink-muted: #52525B;
  --primary-fill: #4338CA;
  --primary-hover: #3D34B6;
  --primary-pressed: #3730A3;
  --accent-ink: #3730A3;
  --primary-wash: #E0E7FF;
  --primary-wash-deep: #EDE9FE;
  --primary-border: #D4D4D8;
  --tile-primary: #6366F1;
}

[data-study-theme="surgical-teal"] {
  --ground: #F8FAFC;
  --well: #FFFFFF;
  --panel: #E9EEF4;
  --panel-alt: #CBD5E1;
  --grid-stroke: #CBD5E1;
  --ink: #0F172A;
  --ink-secondary: #334155;
  --ink-muted: #475569;
  --primary-fill: #0F766E;
  --primary-hover: #106A63;
  --primary-pressed: #115E59;
  --accent-ink: #115E59;
  --primary-wash: #CCFBF1;
  --primary-wash-deep: #CFFAFE;
  --primary-border: #CBD5E1;
  --tile-primary: #14B8A6;
}

[data-study-theme="botanical-emerald"] {
  --ground: #F5F5F4;
  --well: #FFFFFF;
  --panel: #EEEDEC;
  --panel-alt: #DEDCDA;
  --grid-stroke: #D6D3D1;
  --ink: #1C1917;
  --ink-secondary: #44403C;
  --ink-muted: #57534E;
  --primary-fill: #047857;
  --primary-hover: #056B4E;
  --primary-pressed: #065F46;
  --accent-ink: #065F46;
  --primary-wash: #D1FAE5;
  --primary-wash-deep: #ECFDF5;
  --primary-border: #D6D3D1;
  --tile-primary: #10B981;
}

[data-study-theme="parchment-navy"] {
  --ground: #F5F5F4;
  --well: #FAFAF9;
  --panel: #EEEDEC;
  --panel-alt: #DEDCDA;
  --grid-stroke: #D6D3D1;
  --ink: #1C1917;
  --ink-secondary: #44403C;
  --ink-muted: #57534E;
  --primary-fill: #29415C;
  --primary-hover: #23374E;
  --primary-pressed: #182B40;
  --accent-ink: #182B40;
  --primary-wash: #EEF5FD;
  --primary-wash-deep: #E5EEF9;
  --primary-border: #CFDEEF;
  --tile-primary: #51739A;
}

[data-study-theme="royal-plum"] {
  --ground: #F4F4F5;
  --well: #FFFFFF;
  --panel: #ECECEE;
  --panel-alt: #DCDCDF;
  --grid-stroke: #D4D4D8;
  --ink: #18181B;
  --ink-secondary: #484850;
  --ink-muted: #52525B;
  --primary-fill: #6D28D9;
  --primary-hover: #6424C7;
  --primary-pressed: #5B21B6;
  --accent-ink: #5B21B6;
  --primary-wash: #EDE9FE;
  --primary-wash-deep: #E0E7FF;
  --primary-border: #D4D4D8;
  --tile-primary: #8B5CF6;
}

[data-study-theme="academica-bench"] {
  --ground: #F4F4F5;
  --well: #FFFFFF;
  --panel: #ECECEE;
  --panel-alt: #DCDCDF;
  --grid-stroke: #D4D4D8;
  --ink: #18181B;
  --ink-secondary: #484850;
  --ink-muted: #52525B;
  --primary-fill: #C64F4F;
  --primary-hover: #B64848;
  --primary-pressed: #A33333;
  --accent-ink: #A33333;
  --primary-wash: #FCDFDA;
  --primary-wash-deep: #FFE4E6;
  --primary-border: #D4D4D8;
  --tile-primary: #E87070;
}

[data-study-theme="midnight-call"] {
  --ground: #0F172A;
  --well: #162032;
  --panel: #1E293B;
  --panel-alt: #283548;
  --grid-stroke: #334155;
  --ink: #F1F5F9;
  --ink-secondary: #CBD5E1;
  --ink-muted: #94A3B8;
  --primary-fill: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-pressed: #1E40AF;
  --accent-ink: #DBEAFE;
  --primary-wash: #283548;
  --primary-wash-deep: #1E293B;
  --primary-border: #334155;
  --tile-primary: #3B82F6;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: var(--face-sans);
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  background-color: var(--ground);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; flex: none; }

/* Top Switcher Strip (Screens + 9 Selectable Themes + Desktop/Phone Toggle) */
.top-strip {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--well);
  border-bottom: 1px solid var(--grid-stroke);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.strip-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--panel);
  padding: 3px;
  border-radius: 12px;
  flex-wrap: wrap;
}
.strip-tab {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 0;
  background-color: transparent;
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.strip-tab:hover {
  background-color: var(--panel-alt);
  color: var(--ink);
}
.strip-tab[aria-pressed="true"] {
  background-color: var(--primary-fill);
  color: var(--on-primary);
}
.swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #FFFFFF;
  flex: none;
}

/* ============================================================================
   SOLID NAVY WELCOME SPLASH (Web 1440px & Mobile 390px)
   Solid background (`var(--primary-fill)`), crisp white text (`#FFFFFF`)
   ============================================================================ */
.welcome-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - 54px);
  background-color: var(--primary-fill);
  color: var(--on-primary);
  display: flex;
   flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
body[data-viewport="phone"] .welcome-shell {
  width: 390px;
  max-width: 390px;
  margin: 12px auto 32px;
  border-radius: 12px;
  min-height: 844px;
  padding: 24px 18px;
}
.welcome-box {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.welcome-mark {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: var(--on-primary);
  color: var(--primary-fill);
  font-family: var(--face-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-title {
  font-family: var(--face-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
  color: var(--on-primary);
}
.welcome-tagline {
  font-size: 15px;
  line-height: 22px;
  color: var(--primary-wash);
}
.welcome-form {
  width: 100%;
  background-color: var(--primary-hover);
  border: 1px solid var(--tile-primary);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  color: var(--primary-wash);
}
.auth-input {
  height: 36px;
  width: 100%;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--primary-border);
  background-color: var(--on-primary);
  color: var(--ink);
  font-size: 13px;
  line-height: 19px;
}
.btn-invert {
  height: 36px;
  width: 100%;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--on-primary);
  background-color: var(--on-primary);
  color: var(--primary-fill);
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-invert:hover {
  background-color: var(--primary-wash);
}
.btn-ghost-invert {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--tile-primary);
  background-color: var(--primary-pressed);
  color: var(--on-primary);
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-ghost-invert:hover {
  background-color: var(--primary-hover);
}
.welcome-switch-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 17px;
  color: var(--primary-wash);
}

/* ============================================================================
   MAIN SHELL & ONE-THING-AT-A-TIME STAGE
   ============================================================================ */
.shell-outer {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - 54px);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background-color: var(--ground);
}
.shell-outer.rail-collapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}
.shell-outer.full-bleed {
  grid-template-columns: minmax(0, 1fr);
}
body[data-viewport="phone"] .shell-outer {
  width: 390px;
  max-width: 390px;
  margin: 12px auto 32px;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--grid-stroke);
  border-radius: 12px;
  overflow: hidden;
  min-height: 844px;
}

.mu-sidebar {
  background-color: var(--well);
  border-right: 1px solid var(--grid-stroke);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
body[data-viewport="phone"] .mu-sidebar {
  display: none;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 6px;
}
.brand-tile {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--face-display);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand-word {
  font-family: var(--face-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.shell-outer.rail-collapsed .brand-word,
.shell-outer.rail-collapsed .nav-label,
.shell-outer.rail-collapsed .nav-cnt,
.shell-outer.rail-collapsed .sidebar-foot-card {
  display: none;
}
.nav-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-row {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 0;
  background-color: var(--panel);
  color: var(--ink);
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  width: 100%;
}
.nav-row > span {
  padding-top: 6px;
}
.nav-row:hover {
  background-color: var(--panel-alt);
}
.nav-row[aria-current="page"] {
  background-color: var(--primary-fill);
  color: var(--on-primary);
}
.nav-cnt {
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-muted);
}
.nav-row[aria-current="page"] .nav-cnt {
  color: var(--on-primary);
}

.mu-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mu-workbar {
  height: 52px;
  background-color: var(--well);
  border-bottom: 1px solid var(--grid-stroke);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.workbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.page-title {
  font-family: var(--face-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
body[data-viewport="phone"] .hide-on-phone {
  display: none !important;
}

.mu-sections {
  height: 40px;
  background-color: var(--well);
  border-bottom: 1px solid var(--grid-stroke);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mu-sections::-webkit-scrollbar { display: none; }
.sec-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sec-tab {
  height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  border: 0;
  background-color: transparent;
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.sec-tab:hover {
  background-color: var(--panel);
  color: var(--ink);
}
.sec-tab[aria-selected="true"] {
  background-color: var(--primary-fill);
  color: var(--on-primary);
}

.btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--grid-stroke);
  background-color: var(--panel);
  color: var(--ink);
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.btn:hover { background-color: var(--panel-alt); }
.btn-sm {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 17px;
}
.btn-primary {
  background-color: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--on-primary);
}
.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.pill {
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  background-color: var(--panel);
  color: var(--ink);
  flex: none;
}
.pill-navy { background-color: var(--primary-wash); color: var(--accent-ink); }
.pill-mint { background-color: var(--positive-wash); color: #065F46; }
.pill-sky { background-color: var(--info-wash); color: #075985; }
.pill-lavender { background-color: var(--violet-wash); color: #3730A3; }
.pill-peach { background-color: var(--warn-wash); color: #92400E; }
.pill-rose { background-color: var(--rose-wash); color: #991B1B; }

/* Stage & Focused Single-Room Containers */
.stage {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.single-stage {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboard-stage {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Dashboard Card Grid (3x2 on Desktop, 1-col on Phone) */
.dash-grid {
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
body[data-viewport="phone"] .dash-grid {
  grid-template-columns: minmax(0, 1fr);
}
.dash-card {
  background-color: var(--well);
  border: 1px solid var(--grid-stroke);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.dash-card:hover {
  border-color: var(--primary-fill);
}
.dash-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-card-title {
  font-family: var(--face-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
}
.dash-card-sub {
  font-size: 12px;
  line-height: 17px;
  color: var(--ink-secondary);
}

/* Onboarding Choice Grid */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body[data-viewport="phone"] .choice-grid {
  grid-template-columns: minmax(0, 1fr);
}
.choice-card {
  background-color: var(--panel);
  border: 1px solid var(--grid-stroke);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  text-align: left;
}
.choice-card:hover {
  background-color: var(--panel-alt);
}
.choice-card.active {
  background-color: var(--primary-wash);
  border-color: var(--primary-fill);
}

.room {
  background-color: var(--well);
  border: 1px solid var(--grid-stroke);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.room-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.room-head-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.room-title {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}
.room-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--grid-stroke);
  flex-wrap: wrap;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-top: 4px;
}
body[data-viewport="phone"] .rating-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.row-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row-card {
  background-color: var(--panel);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
}
.row-card:hover { background-color: var(--panel-alt); }
.row-card.active {
  background-color: var(--primary-wash);
  border-color: var(--primary-fill);
}
.row-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.row-title {
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
  color: var(--ink);
}
.row-sub {
  font-size: 12px;
  line-height: 17px;
  color: var(--ink-secondary);
}

.records-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.records-table th {
  text-align: left;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  color: var(--ink-muted);
  background-color: var(--panel);
  padding: 7px 10px;
  border-bottom: 1px solid var(--grid-stroke);
  overflow-wrap: break-word;
}
.records-table td {
  font-size: 12px;
  line-height: 17px;
  color: var(--ink);
  padding: 8px 10px;
  border-bottom: 1px solid var(--grid-stroke);
  vertical-align: middle;
  overflow-wrap: break-word;
}
.records-table td .btn {
  white-space: normal;
  height: auto;
  min-height: 28px;
  padding: 4px 8px;
  text-align: left;
}
.records-table tr:last-child td { border-bottom: 0; }
body[data-viewport="phone"] .records-table th:nth-child(3),
body[data-viewport="phone"] .records-table td:nth-child(3) {
  display: none;
}
body[data-viewport="phone"] .mu-sections {
  height: auto;
  min-height: 40px;
  padding: 6px 12px;
}
body[data-viewport="phone"] .sec-tabs {
  flex-wrap: wrap;
}
body[data-viewport="phone"] .stage {
  padding: 14px;
}

.prog-track {
  height: 8px;
  border-radius: 999px;
  background-color: var(--ground);
  overflow: hidden;
  width: 100%;
}
.prog-fill {
  height: 100%;
  border-radius: 999px;
  background-color: var(--primary-fill);
}

.check-row {
  background-color: var(--panel);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.check-row:hover { background-color: var(--panel-alt); }
.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  accent-color: var(--primary-fill);
  flex: none;
}

.canvas-well {
  background-color: #FFFFFF;
  border: 1px solid var(--grid-stroke);
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
  position: relative;
}

.plate-stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 300px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-viewport="phone"] .plate-stage {
  height: 230px;
}

.plate-stage img.plate-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

.plate-stage svg.plate-draw-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.plate-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.callout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body[data-viewport="phone"] .callout-grid {
  grid-template-columns: minmax(0, 1fr);
}
.callout-chip {
  height: auto;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--grid-stroke);
  background-color: var(--panel);
  color: var(--ink);
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.callout-chip:hover {
  background-color: var(--panel-alt);
}
.callout-chip.active {
  background-color: var(--primary-wash);
  border-color: var(--primary-fill);
}
.callout-num {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid rgba(24, 24, 27, 0.18);
}

.row-thumb {
  width: 56px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--grid-stroke);
  background-color: #FFFFFF;
  object-fit: contain;
  padding: 2px;
  flex: none;
}

.atlas-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body[data-viewport="phone"] .atlas-grid {
  grid-template-columns: minmax(0, 1fr);
}
.atlas-card {
  background-color: var(--well);
  border: 1px solid var(--grid-stroke);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.atlas-card:hover {
  border-color: var(--primary-fill);
}
.atlas-card.active {
  background-color: var(--primary-wash);
  border-color: var(--primary-fill);
}
.atlas-thumb-wrap {
  width: 100%;
  height: 140px;
  background-color: #FFFFFF;
  border: 1px solid var(--grid-stroke);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.atlas-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hub-banner-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hub-banner-thumb {
  width: 84px;
  height: 68px;
  border-radius: 8px;
  background-color: #FFFFFF;
  border: 1px solid var(--primary-border);
  object-fit: contain;
  padding: 4px;
  flex: none;
}

/* Topic Graph Hub-and-Spoke Board */
.hub-banner {
  background-color: var(--primary-fill);
  color: var(--on-primary);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.hub-banner-badge {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background-color: var(--primary-pressed);
  color: var(--on-primary);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.hub-banner-title {
  font-family: var(--face-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--on-primary);
}
.hub-banner-meta {
  font-size: 12px;
  line-height: 17px;
  color: var(--primary-wash);
}
.graph-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.graph-columns.single-col {
  grid-template-columns: minmax(0, 1fr);
}
body[data-viewport="phone"] .graph-columns {
  grid-template-columns: minmax(0, 1fr);
}
.graph-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.graph-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}
.graph-col-title {
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
  color: var(--ink);
}

.screen-view { display: flex; flex-direction: column; gap: 16px; width: 100%; align-items: center; }

@media (max-width: 959px) {
  .shell-outer { grid-template-columns: minmax(0, 1fr); }
  .mu-sidebar { display: none; }
  .hide-on-phone { display: none !important; }
  .dash-grid, .choice-grid, .graph-columns, .callout-grid, .atlas-grid { grid-template-columns: minmax(0, 1fr); }
  .rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .records-table th:nth-child(3),
  .records-table td:nth-child(3) { display: none; }
  .mu-sections { height: auto; min-height: 40px; padding: 6px 12px; }
  .sec-tabs { flex-wrap: wrap; }
  .stage { padding: 14px; }
}