:root {
  color-scheme: dark;
  --bg: #0b0d0d;
  --sidebar: rgba(15, 18, 18, 0.96);
  --panel: #171c1b;
  --panel-2: #14181a;
  --panel-3: #1b2021;
  --line: #2a3133;
  --line-strong: #3d484a;
  --text: #dfe3e0;
  --muted: #a7afa8;
  --subtle: #6b7570;
  --green: #9fb08a;
  --orange: #e0642e;
  --yellow: #f0a638;
  --pink: #b0483a;
  --blue: #4a9fb0;
  --accent: #f0a638;
  --accent-ink: #1a1305;
  --danger: #e0642e;
  --ae-black: #050706;
  --ae-ink: #090c0b;
  --ae-surface: rgba(13, 17, 15, 0.94);
  --ae-surface-raised: rgba(20, 25, 22, 0.96);
  --ae-line: rgba(132, 147, 123, 0.2);
  --ae-line-hot: rgba(240, 166, 56, 0.5);
  --ae-phosphor: #a6b684;
  --ae-cyan: #6eb8c3;
  --ae-rust: #d9653c;
  --ae-amber: #f0a638;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --radius-control: 4px;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

@media (max-width: 900px) {
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .store-grid { grid-template-columns: 1fr; }
  .store-heading { align-items: start; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(circle at 60% -20%, rgba(240, 166, 56, 0.12), transparent 34rem),
    linear-gradient(180deg, #0d1211, var(--bg) 24rem);
  color: var(--text);
}

button {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
}

.portal-frame {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  min-height: 100vh;
}

.side-feed {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  background: rgba(1, 11, 8, 0.92);
  padding: 0.8rem;
  overflow: auto;
}

.brand {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}

.brand strong,
.page-title h1,
.dino-name strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brand small,
.eyebrow,
.feed-type,
.nav-badge {
  color: var(--green);
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
}

.online-card,
.feed-item,
.role-panel,
.panel {
  border: 1px solid var(--line);
  background: rgba(6, 18, 15, 0.78);
}

.online-card {
  margin: 1rem 0;
  padding: 0.75rem;
  color: var(--green);
}

.feed-list {
  display: grid;
  gap: 0.75rem;
}

.feed-item {
  padding: 0.75rem;
}

.feed-item p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.main-area {
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  min-height: 4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(1, 11, 8, 0.88);
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 2;
}

.main-nav {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.main-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 1.45rem 0.75rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav-item.active,
.nav-item:hover {
  color: var(--text);
  border-bottom-color: var(--green);
}

.nav-item.restricted {
  color: #f3bb50;
}

.account-strip {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
  font-weight: 700;
}

.balance.premium {
  color: #ffc55a;
}

.profile-pill {
  border-left: 1px solid var(--line);
  padding-left: 0.8rem;
}

.content {
  padding: 2rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

.page-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.page-title h1 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
}

.role-panel {
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}

.control-banner {
  border: 1px solid rgba(255, 106, 26, 0.58);
  background: rgba(255, 106, 26, 0.1);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.control-banner strong {
  display: block;
  margin-top: 0.2rem;
}

.control-banner-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.control-banner-item {
  min-width: 10rem;
  border: 1px solid rgba(255, 106, 26, 0.38);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.65rem;
}

.control-banner-item span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.role-chip {
  border: 1px solid var(--line);
  background: rgba(124, 138, 82, 0.06);
  color: var(--text);
  padding: 0.55rem 0.75rem;
}

.role-chip.active {
  border-color: var(--line-strong);
  color: var(--green);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: 1.25rem;
}

.console-card,
.panel {
  border: 1px solid var(--line);
  background: rgba(6, 18, 15, 0.82);
}

.console-card {
  min-width: 0;
}

.console-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
}

.live {
  color: var(--green);
}

.dino-hero {
  position: relative;
  min-height: 18rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(124, 138, 82, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 138, 82, 0.05) 1px, transparent 1px);
  background-size: 1rem 1rem;
}

.watermark {
  position: absolute;
  font-size: clamp(3rem, 11vw, 9rem);
  font-weight: 900;
  color: rgba(124, 138, 82, 0.045);
  text-transform: uppercase;
}

.dino-hero img {
  width: min(34rem, 68%);
  max-height: 14rem;
  object-fit: contain;
  position: relative;
  filter: drop-shadow(0 1rem 1.4rem rgba(0, 0, 0, 0.45));
}

.dino-name,
.growth-readout {
  position: absolute;
  bottom: 1.5rem;
}

.dino-name {
  left: 1.5rem;
}

.dino-name span,
.growth-readout span,
.metric span,
.garage-item span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.dino-name strong,
.growth-readout strong {
  font-size: 1.7rem;
}

.growth-readout {
  right: 1.5rem;
  color: var(--green);
  text-align: right;
}

.metrics {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
}

.metric {
  display: grid;
  gap: 0.35rem;
}

.metric-line {
  height: 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.metric-line span {
  display: block;
  height: 100%;
  background: var(--green);
}

.metric.health .metric-line span {
  background: var(--pink);
}

.metric.stamina .metric-line span {
  background: var(--yellow);
}

.metric.hunger .metric-line span {
  background: var(--orange);
}

.metric.thirst .metric-line span {
  background: var(--blue);
}

.prime-checklist {
  border-top: 1px solid var(--line);
  padding: 1rem 1.25rem 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.status-note {
  margin: 0 1.25rem 1.25rem;
  border: 1px solid rgba(245, 169, 57, 0.32);
  background: rgba(245, 169, 57, 0.08);
  color: var(--text);
  padding: 0.75rem;
  font-size: 0.82rem;
}

.confirmation-dock[hidden] {
  display: none;
}

.confirmation-card {
  align-items: center;
  background: rgba(8, 17, 15, 0.96);
  border: 1px solid rgba(245, 169, 57, 0.42);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0.8rem 0;
  padding: 0.85rem;
}

.confirmation-card strong,
.confirmation-card p {
  display: block;
  margin: 0.2rem 0 0;
}

.confirmation-card p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.confirmation-actions button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  padding: 0.55rem 0.75rem;
}

.confirmation-actions button:last-child {
  background: rgba(124, 138, 82, 0.16);
  border-color: var(--line-strong);
  color: var(--green);
}

.prime-checklist-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.prime-task-list {
  display: grid;
  gap: 0.5rem;
}

.prime-task {
  border: 1px solid rgba(16, 222, 166, 0.16);
  background: rgba(0, 0, 0, 0.18);
  padding: 0.7rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.prime-task.complete {
  border-color: var(--line-strong);
}

.prime-task span {
  display: block;
  color: var(--muted);
  margin-top: 0.25rem;
  font-size: 0.78rem;
}

.prime-task b {
  color: var(--green);
  white-space: nowrap;
}

.engine-prime {
  margin: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.engine-prime summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.engine-prime > p { color: var(--muted); font-size: 0.78rem; max-width: 52rem; }
.engine-prime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.group-status { border-top: 1px solid var(--line); padding: 16px 20px; }
.section-heading, .group-member { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.group-member-list { display: grid; gap: 8px; margin-top: 10px; }
.group-member { border: 1px solid var(--line); padding: 10px 12px; }
.group-member span:first-child { display: grid; gap: 2px; }
.group-member small, .group-member > span:last-child { color: var(--muted); }
.map-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 18rem; min-width: 0; }
.map-surface { min-width: 0; }
.group-map { background: #07100d; border: 1px solid var(--line); height: clamp(22rem, calc(100dvh - 17.5rem), 50rem); min-height: 0; overflow: hidden; position: relative; width: 100%; }
.map-toolbar { align-items: center; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; display: grid; gap: 0.75rem; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 3.25rem; padding: 0.55rem 0.75rem; }
.map-toolbar-heading { display: grid; gap: 0.1rem; min-width: 8rem; }
.map-toolbar-heading strong { font-size: 0.78rem; }
.map-toolbar-heading span { color: var(--muted); font-size: 0.64rem; }
.map-layer-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; justify-content: center; }
.map-toolbar label { align-items: center; color: var(--muted); cursor: pointer; display: flex; font-size: 0.7rem; gap: 0.35rem; white-space: nowrap; }
.map-toolbar input { accent-color: var(--green); }
.map-recenter { min-height: 2.15rem; padding: 0.35rem 0.65rem; }
.map-demo-notice { background: rgba(214, 174, 0, 0.1); border: 1px solid rgba(214, 174, 0, 0.45); color: #e0c04e; font-size: 0.7rem; padding: 0.45rem 0.7rem; }
.map-roster { align-content: start; display: grid; max-height: calc(100dvh - 12rem); overflow: auto; }
.map-roster-item { border-top: 1px solid var(--line); display: grid; gap: 0.35rem; padding: 0.75rem 0; }
.map-roster-item:first-of-type { border-top: 0; }
.map-roster-item div { display: flex; justify-content: space-between; gap: 0.75rem; }
.map-roster-item span, .map-roster-item small, .map-privacy, .map-empty p { color: var(--muted); font-size: 0.74rem; }
.map-privacy { border-top: 1px solid var(--line); line-height: 1.45; margin: 0.5rem 0 0; padding-top: 0.75rem; }
.map-attribution { color: var(--muted); font-size: 0.66rem; margin: 0.4rem 0 0; }
.map-attribution a { color: var(--muted); }
.map-runtime-error { color: var(--muted); left: 50%; margin: 0; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -50%); width: min(24rem, 80%); }
.map-player-tooltip { color: #f3f6f2; font: 700 0.68rem/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; white-space: nowrap; }
.map-player-label { background: rgba(4, 12, 9, 0.94); border: 1px solid rgba(198, 216, 205, 0.38); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34); padding: 0.3rem 0.45rem; }
.map-player-label-self { border-color: rgba(247, 209, 74, 0.72); }
.map-player-label-member { border-color: rgba(54, 201, 138, 0.65); }
.map-location-anchor { background: transparent; border: 0; }
.leaflet-tooltip.map-location-label { background: rgba(4, 12, 9, 0.82); border: 1px solid rgba(198, 216, 205, 0.32); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32); color: #dce7df; font-size: 0.53rem; font-weight: 650; height: auto !important; line-height: 1.1; padding: 0.15rem 0.28rem; text-align: center; transition: opacity 100ms ease; white-space: nowrap; width: auto !important; }
.leaflet-tooltip.map-location-label.is-decluttered { opacity: 0 !important; pointer-events: none; }
.leaflet-tooltip.map-location-label-water { border-color: rgba(74, 195, 213, 0.5); color: #c7edf2; }
.leaflet-tooltip.map-location-label-landmark { border-color: rgba(247, 209, 74, 0.4); color: #f1edd9; }
.leaflet-tooltip.map-location-label-outpost { background: rgba(4, 12, 9, 0.7); color: #b9c8bf; font-size: 0.47rem; font-weight: 600; }
/* Leaflet 1.9.4 layout primitives (BSD-2-Clause). The Nest supplies the visual controls. */
.leaflet-container { -webkit-tap-highlight-color: transparent; cursor: grab; overflow: hidden; }
.leaflet-container.leaflet-dragging { cursor: grabbing; }
.leaflet-container .leaflet-image-layer { max-height: none !important; max-width: none !important; }
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-map-pane svg, .leaflet-map-pane canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { left: 0; position: absolute; top: 0; }
.leaflet-map-pane, .leaflet-control { position: absolute; }
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-zoom-animated { transform-origin: 0 0; }
.leaflet-zoom-anim .leaflet-zoom-animated { transition: transform 250ms cubic-bezier(0, 0, 0.25, 1); }
.leaflet-fade-anim .leaflet-popup { opacity: 0; transition: opacity 200ms linear; }
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; }
.leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; }
.leaflet-control { pointer-events: auto; z-index: 800; }
.leaflet-top, .leaflet-bottom { pointer-events: none; position: absolute; z-index: 1000; }
.leaflet-top { top: 0; }
.leaflet-right { right: 0; }
.leaflet-bottom { bottom: 0; }
.leaflet-left { left: 0; }
.leaflet-control-zoom { border: 1px solid var(--line-strong); margin: 0.75rem; }
.leaflet-control-zoom a { align-items: center; background: rgba(7, 16, 13, 0.94); color: var(--text); display: flex; font-size: 1.1rem; height: 2rem; justify-content: center; text-decoration: none; width: 2rem; }
.leaflet-control-zoom a + a { border-top: 1px solid var(--line-strong); }
.leaflet-control-zoom a:hover, .leaflet-control-zoom a:focus-visible { background: #1a2b23; }
.leaflet-tooltip { background: rgba(4, 12, 9, 0.94); border: 1px solid var(--line-strong); pointer-events: none; position: absolute; user-select: none; }
.leaflet-tooltip-top::before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--line-strong); bottom: -6px; content: ""; left: 50%; margin-left: -6px; position: absolute; }
.map-empty { max-width: 44rem; }
.skin-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 20rem; }
.skin-presets { margin-top: 1rem; }
.skin-preset-row { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding: 0.75rem 0; }
.skin-preset-row:first-of-type { border-top: 0; }
.skin-preset-row > div { display: grid; gap: 0.25rem; }
.skin-preset-row > div:last-child { justify-items: end; text-align: right; }
.skin-preset-row small, .skin-preset-note { color: var(--muted); font-size: 0.7rem; }
.skin-preset-note { border-top: 1px solid var(--line); margin: 0; padding-top: 0.75rem; }
.skin-meta { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 1rem; }
.skin-meta div { background: #111614; padding: 0.75rem; }
.skin-meta dt { color: var(--muted); font-size: 0.66rem; text-transform: uppercase; }
.skin-meta dd { font-size: 0.84rem; font-weight: 700; margin: 0.3rem 0 0; }
.skin-palette { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skin-color-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 0.7rem; min-width: 0; padding: 0.75rem 0; }
.skin-color-row:nth-child(odd) { padding-right: 0.75rem; }
.skin-color-row:nth-child(even) { border-left: 1px solid var(--line); padding-left: 0.75rem; }
.skin-swatch { border: 1px solid rgba(255,255,255,0.28); flex: 0 0 2rem; height: 2rem; }
.skin-color-row div { display: grid; gap: 0.2rem; min-width: 0; }
.skin-color-row strong { font-size: 0.78rem; }
.skin-color-row small, .skin-safety p, .skin-safety li, .skin-safety > small { color: var(--muted); font-size: 0.72rem; }
.skin-safety { align-content: start; display: grid; gap: 0.7rem; }
.skin-safety h2, .skin-safety p, .skin-safety ul { margin: 0; }
.skin-safety ul { display: grid; gap: 0.4rem; padding-left: 1rem; }
.skin-safety button { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); padding: 0.65rem; }
.skin-creator { display: grid; gap: 1rem; }
.skin-creator-header { align-items: end; display: flex; gap: 1.5rem; justify-content: space-between; }
.skin-creator-header h2 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.skin-creator-header p { color: var(--muted); margin: 0; max-width: 49rem; }
.skin-creator-header .skin-meta { margin: 0; min-width: 21rem; }
.skin-safety .skin-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skin-creator-grid { align-items: stretch; display: grid; gap: 1rem; grid-template-columns: minmax(30rem, 1.55fr) minmax(25rem, 0.85fr); }
.skin-stage-panel { align-content: start; display: grid; overflow: hidden; padding: 0; }
.skin-palette-editor { display: grid; gap: 0.45rem; grid-template-columns: 1fr; }
.skin-editor-panel > .panel-heading p { color: var(--muted); font-size: 0.7rem; margin: 0.25rem 0 0; }
.skin-palette-strip { background: var(--panel-2); border: 1px solid var(--line); display: flex; height: 2.25rem; margin-bottom: 0.75rem; overflow: hidden; padding: 0.22rem; }
.skin-presets > summary { cursor: pointer; list-style: none; }
.skin-presets > summary::-webkit-details-marker { display: none; }
.skin-presets[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 0.8rem; padding-bottom: 0.8rem; }
.skin-palette-strip > span { flex: 1 1 0; min-width: 0.4rem; }
.skin-palette-strip > span + span { border-left: 2px solid var(--panel-2); }
.skin-palette-strip.compact { border: 0; height: 1.15rem; margin: 0.45rem 0 0; max-width: 22rem; padding: 0; }
.skin-palette-strip.compact > span + span { border-left-width: 1px; }
.skin-color-control { align-items: center; background: rgba(5, 14, 10, 0.52); border: 1px solid var(--line); display: grid; gap: 0.55rem; grid-template-columns: 2.1rem minmax(0, 1fr) 2.1rem 3rem; min-height: 3.55rem; padding: 0.52rem 0.65rem; }
.skin-color-control:hover { border-color: var(--line-strong); }
.skin-color-control .skin-swatch { height: 2.1rem; width: 2.1rem; }
.skin-color-control > span:nth-child(2) { display: grid; gap: 0.2rem; min-width: 0; }
.skin-color-control small { color: var(--muted); font-size: 0.68rem; }
.skin-color-control input[type="color"] { background: var(--panel-2); border: 1px solid var(--line-strong); cursor: pointer; height: 2.1rem; padding: 0.15rem; width: 3rem; }
.skin-palette-heading-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.skin-palette-heading-actions .tool-button { min-width: 8.75rem; }
.skin-structure-controls { background: rgba(9, 16, 12, 0.45); border: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0.8rem; padding: 0.75rem; }
.skin-structure-controls label { display: grid; gap: 0.35rem; }
.skin-structure-controls label > span { color: var(--muted); font-size: 0.66rem; text-transform: uppercase; }
.skin-structure-controls input, .skin-structure-controls select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; color: var(--text); font: inherit; min-height: 2.45rem; min-width: 0; padding: 0.55rem 0.65rem; width: 100%; }
.skin-channel-randomize { align-items: center; background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; display: inline-flex; height: 2.1rem; justify-content: center; padding: 0; width: 2.1rem; }
.skin-channel-randomize:hover { border-color: var(--accent); color: var(--text); }
.skin-channel-randomize svg { height: 0.9rem; width: 0.9rem; }
.skin-channel-randomize:disabled { cursor: not-allowed; opacity: 0.45; }
.skin-color-control.unavailable { opacity: 0.58; }
.skin-color-control.unavailable input[type="color"] { cursor: not-allowed; }
.skin-editor-panel { align-content: start; display: grid; }
.skin-editor-actions { align-self: end; }
.skin-save-row { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: minmax(12rem, 1fr) auto; margin-top: 0.9rem; padding-top: 0.9rem; }
.skin-save-row label { display: grid; gap: 0.35rem; }
.skin-save-row label > span { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; }
.skin-save-row label > span small { color: var(--muted); font-size: inherit; margin-left: 0.35rem; text-transform: none; }
.skin-apply-row { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; margin-top: 0.9rem; padding-top: 0.9rem; }
.skin-apply-row > div { display: grid; gap: 0.2rem; }
.skin-apply-row small { color: var(--muted); }
.skin-apply-row .tool-button { min-width: 7.75rem; }
.skin-workflow { align-items: center; display: grid; gap: 1rem; grid-template-columns: minmax(11rem, 0.45fr) minmax(0, 1.55fr); }
.skin-workflow h2 { margin: 0.25rem 0 0; }
.skin-behaviour-list { counter-reset: skin-step; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.skin-behaviour-list li { border-left: 1px solid var(--line); display: grid; gap: 0.18rem; min-height: 3.8rem; padding: 0.35rem 0.9rem; }
.skin-behaviour-list li:first-child { border-left: 0; }
.skin-behaviour-list strong { font-size: 0.72rem; }
.skin-behaviour-list span { color: var(--muted); font-size: 0.68rem; line-height: 1.45; }
.skin-model-preview { background: #07100c; display: grid; margin: 0; min-width: 0; overflow: hidden; }
.skin-stage-toolbar { align-items: center; background: #101713; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; min-height: 3.75rem; padding: 0.7rem 0.9rem; }
.skin-stage-title { align-items: center; display: flex; gap: 0.55rem; min-width: 0; }
.skin-stage-title > span:last-child { display: grid; gap: 0.12rem; min-width: 0; }
.skin-stage-title strong { font-size: 0.76rem; }
.skin-stage-title small { color: var(--muted); font-size: 0.62rem; }
.skin-preview-state-dot { background: var(--muted); border-radius: 50%; height: 0.45rem; width: 0.45rem; }
.skin-model-preview[data-skin-preview-state="ready"] .skin-preview-state-dot { background: var(--green); }
.skin-model-preview[data-skin-preview-state="loading"] .skin-preview-state-dot,
.skin-model-preview[data-skin-preview-state="checking"] .skin-preview-state-dot { animation: skin-preview-pulse 1.1s ease-in-out infinite; background: var(--accent); }
.skin-model-preview[data-skin-preview-state="error"] .skin-preview-state-dot { background: var(--danger); }
.skin-stage-actions { display: flex; gap: 0.4rem; }
.skin-stage-actions button { align-items: center; background: transparent; border: 1px solid var(--line); color: var(--text); display: flex; font-size: 0.66rem; gap: 0.35rem; min-height: 2.15rem; padding: 0.4rem 0.58rem; }
.skin-stage-actions button svg { height: 0.85rem; width: 0.85rem; }
.skin-stage-actions button:hover:not(:disabled), .skin-stage-actions button.active { background: var(--panel-3); border-color: var(--accent); }
.skin-stage-actions button:disabled { cursor: not-allowed; opacity: 0.4; }
.skin-model-viewport { background: #07100c; min-height: 34rem; position: relative; }
.skin-model-preview canvas { cursor: grab; display: block; height: 34rem; outline: 0; touch-action: none; width: 100%; }
.skin-model-preview canvas[hidden] { display: none; }
.skin-model-preview canvas:active { cursor: grabbing; }
.skin-preview-unavailable { align-items: center; color: var(--muted); display: flex; flex-direction: column; inset: 0; justify-content: center; padding: 2rem; position: absolute; text-align: center; }
.skin-preview-unavailable[hidden] { display: none; }
.skin-preview-unavailable svg { color: var(--accent); height: 2.1rem; margin-bottom: 0.8rem; width: 2.1rem; }
.skin-preview-unavailable strong { color: var(--text); font-size: 0.88rem; }
.skin-preview-unavailable span { font-size: 0.7rem; line-height: 1.5; margin-top: 0.35rem; max-width: 24rem; }
.skin-stage-gesture { bottom: 0.7rem; display: flex; gap: 0.35rem; left: 0.7rem; pointer-events: none; position: absolute; }
.skin-stage-gesture span { background: rgba(4, 12, 9, 0.86); border: 1px solid var(--line); color: var(--muted); font-size: 0.58rem; padding: 0.28rem 0.42rem; }
.skin-model-preview:not([data-skin-preview-state="ready"]) .skin-stage-gesture { display: none; }
.skin-model-preview figcaption { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.64rem; line-height: 1.45; min-height: 2.75rem; padding: 0.65rem 0.9rem; }
.skin-stage-metrics { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.skin-stage-metrics > div { border-left: 1px solid var(--line); display: grid; gap: 0.25rem; padding: 0.75rem 0.9rem; }
.skin-stage-metrics > div:first-child { border-left: 0; }
.skin-stage-metrics dt { color: var(--muted); font-size: 0.6rem; text-transform: uppercase; }
.skin-stage-metrics dd { font-size: 0.78rem; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes skin-preview-pulse { 50% { opacity: 0.35; } }
.skin-preset-summary { min-width: 0; }
.skin-preset-actions { align-items: center; display: flex !important; flex-flow: row wrap; gap: 0.5rem !important; justify-content: flex-end; }
.skin-review-workspace { display: grid; gap: 0.85rem; margin-top: 1rem; }
.skin-review-groups { display: grid; gap: 0.85rem; }
.skin-review-groups > section, .skin-review-groups > details { border: 1px solid var(--line); }
.skin-review-groups > details > summary, .skin-review-heading { align-items: center; cursor: pointer; display: flex; justify-content: space-between; padding: 0.75rem; }
.skin-review-groups > details > div { border-top: 1px solid var(--line); }
.skin-review-heading > div { display: grid; gap: 0.15rem; }
.skin-review-heading small { color: var(--muted); }
.skin-review-row { border-top: 1px solid var(--line); display: grid; gap: 0.7rem; padding: 0.8rem; }
.skin-review-row:first-of-type { border-top: 0; }
.skin-review-row > header { align-items: start; display: flex; gap: 0.75rem; justify-content: space-between; }
.skin-review-row > header > div { display: grid; gap: 0.15rem; min-width: 0; }
.skin-review-row > header span:not(.status) { color: var(--muted); font-size: 0.68rem; overflow-wrap: anywhere; }
.skin-review-row > dl { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.skin-review-row > dl > div { background: var(--panel-2); padding: 0.55rem; }
.skin-review-row dt { color: var(--muted); font-size: 0.6rem; text-transform: uppercase; }
.skin-review-row dd { font-size: 0.72rem; font-weight: 700; margin: 0.2rem 0 0; }
.skin-review-colors { border: 1px solid var(--line); }
.skin-review-colors > summary { cursor: pointer; padding: 0.6rem; }
.skin-review-colors > div { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skin-review-colors > div > div { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 0.5rem; grid-template-columns: 1.5rem minmax(6rem, 0.7fr) minmax(0, 1fr); min-width: 0; padding: 0.45rem 0.55rem; }
.skin-review-colors .skin-swatch { height: 1.5rem; width: 1.5rem; }
.skin-review-colors code { color: var(--muted); font-size: 0.62rem; overflow-wrap: anywhere; }
.skin-review-actions { align-items: end; display: grid; gap: 0.65rem; grid-template-columns: minmax(12rem, 1fr) auto; }
.skin-review-actions .control-reason { display: grid; gap: 0.3rem; }
.skin-review-actions .control-reason > span { color: var(--muted); font-size: 0.65rem; text-transform: uppercase; }
.skin-review-actions .staff-inline-actions { display: flex; gap: 0.45rem; }
.moderation-policy-editor { border-top: 1px solid var(--line); display: grid; gap: 0.85rem; padding-top: 0.9rem; }
.moderation-ladder-grid { display: grid; gap: 0; border: 1px solid var(--line); }
.moderation-ladder-row { display: grid; grid-template-columns: minmax(7rem, 0.7fr) repeat(3, minmax(10rem, 1fr)); gap: 0.75rem; align-items: end; padding: 0.75rem; }
.moderation-ladder-row + .moderation-ladder-row { border-top: 1px solid var(--line); }
.moderation-ladder-row label:not(.control-check) { display: grid; gap: 0.3rem; }
.moderation-ladder-row label span { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
@media (max-width: 900px) { .moderation-ladder-row { grid-template-columns: 1fr; align-items: stretch; } }
.moderation-strike-role-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.moderation-escalation-roles { border: 1px solid var(--line); display: grid; gap: 0.6rem; margin: 0; min-width: 0; padding: 0.75rem; }
.moderation-escalation-roles legend { font-size: 0.68rem; font-weight: 700; padding: 0 0.25rem; }
.moderation-escalation-roles > p { color: var(--muted); font-size: 0.65rem; margin: 0; }
.moderation-escalation-roles > div { display: grid; gap: 0.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.runtime-readiness { border-top: 1px solid var(--line); display: grid; gap: 0.75rem; padding-top: 0.9rem; }
.runtime-readiness-summary { display: grid; gap: 0.2rem; }
.runtime-readiness-summary small { color: var(--muted); font-size: 0.65rem; line-height: 1.45; }
.runtime-readiness-list { border: 1px solid var(--line); display: grid; }
.runtime-readiness-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: 0.5rem minmax(0, 1fr) auto; min-height: 3rem; padding: 0.55rem 0.65rem; }
.runtime-readiness-row:last-child { border-bottom: 0; }
.runtime-readiness-row > span { background: var(--yellow); border-radius: 50%; height: 0.45rem; width: 0.45rem; }
.runtime-readiness-row.is-ready > span { background: var(--green); }
.runtime-readiness-row.is-optional > span { background: var(--muted); }
.runtime-readiness-row > div { display: grid; gap: 0.12rem; min-width: 0; }
.runtime-readiness-row strong { font-size: 0.7rem; }
.runtime-readiness-row small { color: var(--muted); font-size: 0.62rem; line-height: 1.4; }
.runtime-readiness-row b { color: var(--yellow); font-size: 0.6rem; text-transform: uppercase; }
.runtime-readiness-row.is-ready b { color: var(--green); }
.runtime-readiness-row.is-optional b { color: var(--muted); }
.access-preview-list { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.access-preview-role { border: 1px solid var(--line); }
.access-preview-role > summary { align-items: center; cursor: pointer; display: flex; gap: 0.75rem; justify-content: space-between; list-style: none; padding: 0.7rem 0.8rem; }
.access-preview-role > summary::-webkit-details-marker { display: none; }
.access-preview-role > summary span:first-child { display: grid; gap: 0.2rem; min-width: 0; }
.access-preview-role > summary small { color: var(--muted); overflow-wrap: anywhere; }
.access-preview-role > div { border-top: 1px solid var(--line); padding: 0.75rem 0.8rem; }
.access-preview-role dl { display: grid; gap: 0.45rem; margin: 0; }
.access-preview-role dl > div { display: grid; gap: 0.15rem; grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr); }
.access-preview-role dt { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; }
.access-preview-role dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.access-preview-role ul { column-count: 2; column-gap: 1.5rem; margin: 0.4rem 0 0; padding-left: 1.1rem; }
.access-preview-role li { break-inside: avoid; margin-bottom: 0.3rem; }
@media (max-width: 1250px) { .skin-creator-grid { grid-template-columns: 1fr; } .skin-palette-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .skin-creator-header { align-items: start; flex-direction: column; } .skin-creator-header .skin-meta { min-width: 0; width: 100%; } .skin-review-colors > div { grid-template-columns: 1fr; } .skin-workflow { align-items: start; grid-template-columns: 1fr; } }
@media (max-width: 900px) { .moderation-strike-role-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .skin-palette-editor, .skin-structure-controls { grid-template-columns: 1fr; } .skin-save-row { grid-template-columns: 1fr; } .skin-apply-row { align-items: stretch; flex-direction: column; } .skin-behaviour-list { grid-template-columns: 1fr; } .skin-behaviour-list li { border-left: 0; border-top: 1px solid var(--line); min-height: 0; padding: 0.65rem 0; } .skin-behaviour-list li:first-child { border-top: 0; } .skin-review-row > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skin-review-actions { align-items: stretch; grid-template-columns: 1fr; } .skin-review-actions .staff-inline-actions { flex-wrap: wrap; } .moderation-escalation-roles > div, .access-preview-role dl > div { grid-template-columns: 1fr; } .access-preview-role ul { column-count: 1; } }
.engine-prime-condition { display: grid; grid-template-columns: 3rem 6rem minmax(0, 1fr); gap: 0.6rem; padding: 0.55rem 0.7rem; background: var(--surface); font-size: 0.76rem; }
.engine-prime-condition b { color: var(--muted); }
.engine-prime-condition.complete b { color: var(--accent); }
.engine-prime-condition small { color: var(--muted); }

@media (max-width: 720px) {
  .engine-prime-grid { grid-template-columns: 1fr; }
}

.right-stack {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.panel {
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.panel h2 {
  margin: 0.2rem 0 0.9rem;
  font-size: 1rem;
}

.panel-heading {
  align-items: start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.panel-heading h2 {
  margin-bottom: 0;
}

.panel-count {
  border: 1px solid rgba(16, 222, 166, 0.22);
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0.35rem 0.5rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.weather-panel {
  display: grid;
  gap: 0.55rem;
}

.weather-panel p {
  color: var(--muted);
  margin: 0;
}

.weather-panel small {
  color: var(--muted);
}

.weather-readout {
  align-items: end;
  display: flex;
  gap: 0.5rem;
}

.weather-readout strong {
  color: var(--blue);
  font-size: 2rem;
  line-height: 1;
}

.weather-readout span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
}

.wallet-grid {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr auto;
}

.wallet-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.wallet-grid strong {
  display: block;
  margin-top: 0.2rem;
}

.wallet-grid button {
  border: 1px solid var(--line-strong);
  background: rgba(124, 138, 82, 0.14);
  color: var(--green);
  cursor: pointer;
  padding: 0.6rem 0.8rem;
}

.action-grid,
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.action-button,
.tool-button {
  border: 1px solid var(--line);
  background: rgba(124, 138, 82, 0.06);
  color: var(--text);
  cursor: pointer;
  padding: 0.75rem 0.55rem;
  text-align: left;
}

.action-button {
  display: grid;
  gap: 0.28rem;
  min-height: 4.5rem;
}

.action-button strong {
  color: var(--green);
  font-size: 0.92rem;
  text-transform: uppercase;
}

.action-button small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.action-field {
  border: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
  grid-column: 1 / -1;
  padding: 0.65rem;
}

.action-field label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.action-field select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  min-width: 0;
  padding: 0.6rem;
  width: 100%;
}

.action-field .action-button {
  min-height: 3.5rem;
}

.action-field-empty {
  color: var(--muted);
  font-size: 0.78rem;
}

.action-button:hover:not(:disabled),
.tool-button:hover:not(:disabled),
.garage-actions button:hover:not(:disabled),
.wallet-grid button:hover:not(:disabled),
.confirmation-actions button:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: rgba(124, 138, 82, 0.12);
}

.action-button.danger {
  border-color: rgba(255, 106, 26, 0.55);
}

.action-button.danger strong {
  color: #ffb088;
}

.tool-button.danger {
  border-color: rgba(255, 106, 26, 0.55);
  color: #ffb088;
}

.staff-service-note {
  border: 1px solid rgba(255, 208, 79, 0.34);
  background: rgba(255, 208, 79, 0.08);
  display: grid;
  gap: 0.25rem;
  margin: 0.85rem 0;
  padding: 0.75rem;
}

.staff-service-note strong {
  color: var(--gold);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.staff-service-note span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.action-button:disabled,
.tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.control-reason {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.control-reason span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.control-reason input,
.control-reason textarea,
.tool-select select {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  padding: 0.7rem;
  font: inherit;
  resize: vertical;
}

.tool-select {
  display: grid;
  gap: 0.35rem;
}

.tool-select span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.control-check {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.82rem;
  gap: 0.5rem;
}

.control-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.75rem 0;
}

.form-help {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0.35rem 0 0.75rem;
}

.catalog-summary {
  border: 1px solid var(--line);
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem;
}

.catalog-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.catalog-summary strong {
  color: var(--text);
}

.profile-lookup-result,
.ticket-queue-result {
  margin-top: 0.75rem;
}

.profile-result-card {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.75rem;
}

.profile-result-card strong {
  display: block;
  margin-top: 0.2rem;
}

.profile-result-card dl {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}

.profile-result-card dl div {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.5rem;
}

.profile-result-card dt {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.profile-result-card dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-operations {
  align-items: end;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(14rem, 1fr) auto;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}

.profile-search-field, .player-picker { position: relative; }
.profile-search-suggestions {
  background: #111a15;
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  display: grid;
  left: 0;
  max-height: 18rem;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
}
.profile-search-suggestions[hidden] { display: none; }
.profile-search-suggestions button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  text-align: left;
}
.profile-search-suggestions button:hover,
.profile-search-suggestions button:focus-visible { background: var(--panel-2); }
.profile-search-suggestions small,
.profile-search-suggestions p { color: var(--muted); font-size: 0.68rem; margin: 0; padding: 0.65rem 0.75rem; }

.case-list {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  margin-top: 0.65rem;
  padding: 0.75rem;
  display: grid;
  gap: 0.65rem;
}

.case-list p {
  margin: 0;
  color: var(--muted);
}

.garage-migration-tool { border: 1px solid var(--line); background: rgba(9, 16, 12, 0.5); }
.garage-migration-tool > summary { cursor: pointer; font-size: 0.78rem; font-weight: 700; list-style: none; padding: 0.7rem 0.8rem; }
.garage-migration-tool > summary::-webkit-details-marker { display: none; }
.garage-migration-tool > summary::after { color: var(--muted); content: "+"; float: right; font-weight: 400; }
.garage-migration-tool[open] > summary { border-bottom: 1px solid var(--line); }
.garage-migration-tool[open] > summary::after { content: "-"; }
.garage-migration-tool .staff-subsection-body { display: grid; gap: 0.75rem; padding: 0.8rem; }
.garage-migration-tool label { color: var(--muted); display: grid; font-size: 0.68rem; gap: 0.3rem; }
.garage-migration-tool input, .garage-migration-tool select, .garage-migration-tool textarea { margin: 0; width: 100%; }
.garage-migration-tool .form-grid { display: grid; gap: 0.65rem; }
.garage-migration-tool .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.garage-migration-tool .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.garage-migration-tool .checkbox-field { align-items: center; align-self: end; display: flex; min-height: 42px; }
.garage-migration-tool .checkbox-field input { accent-color: var(--accent); height: 1rem; width: 1rem; }
.garage-migration-tool .compact-disclosure { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.garage-migration-tool .compact-disclosure > summary { color: var(--muted); cursor: pointer; font-size: 0.7rem; margin-bottom: 0.65rem; }

@media (max-width: 720px) {
  .garage-migration-tool .form-grid-2, .garage-migration-tool .form-grid-3 { grid-template-columns: 1fr; }
}

.case-list-item {
  border-top: 1px solid rgba(16, 222, 166, 0.16);
  padding-top: 0.65rem;
  display: grid;
  gap: 0.35rem;
}

.case-list-item div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.case-list-item span,
.case-list-item a,
.case-list-item small {
  color: var(--muted);
  font-size: 0.78rem;
}

.case-list-item a {
  color: var(--green);
}

.ticket-list-state {
  display: grid;
  gap: 0.15rem;
  justify-items: end;
  text-align: right;
}

.ticket-list-state small {
  color: var(--text);
  font-size: 0.72rem;
}

@media (max-width: 720px) {
  .case-list-item > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .ticket-list-state {
    justify-items: start;
    text-align: left;
  }
}

.log-sample-result {
  margin-top: 0.75rem;
}

.log-sample-item code {
  color: var(--text);
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(16, 222, 166, 0.16);
  padding: 0.5rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.transcript-content {
  color: var(--text);
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(16, 222, 166, 0.16);
  margin: 0;
  max-height: 28rem;
  overflow: auto;
  padding: 0.75rem;
  white-space: pre-wrap;
}

.internal-note {
  background: rgba(255, 160, 0, 0.08);
  padding-left: 0.5rem;
}

.garage-list {
  display: grid;
  gap: 0.65rem;
}

.garage-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
}

.item-card {
  border: 1px solid rgba(16, 222, 166, 0.12);
}

.item-card strong {
  display: block;
  margin: 0.3rem 0;
}

.item-card small {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
}

.bridge-state-note {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.16);
  display: grid;
  gap: 0.2rem;
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem;
}

.bridge-state-note strong {
  color: var(--text);
  font-size: 0.78rem;
  margin: 0;
}

.bridge-state-note span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
  text-transform: none;
}

.bridge-state-note.pending {
  border-color: rgba(214, 174, 0, 0.32);
  background: rgba(214, 174, 0, 0.08);
}

.bridge-state-note.blocked {
  border-color: rgba(255, 77, 131, 0.32);
  background: rgba(255, 77, 131, 0.08);
}

.item-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.status-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--muted);
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  padding: 0.22rem 0.38rem;
  text-transform: uppercase;
}

.status-chip.ready {
  border-color: rgba(124, 138, 82, 0.42);
  color: var(--green);
}

.status-chip.pending {
  border-color: rgba(214, 174, 0, 0.45);
  color: #ffd86a;
}

.status-chip.blocked {
  border-color: rgba(255, 77, 131, 0.45);
  color: #ff8bad;
}

.status-chip.premium {
  border-color: rgba(255, 197, 90, 0.45);
  color: #ffc55a;
}

.garage-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.garage-actions button {
  border: 1px solid var(--line);
  background: rgba(124, 138, 82, 0.1);
  color: var(--text);
  cursor: pointer;
  padding: 0.5rem 0.65rem;
  white-space: nowrap;
}

.garage-actions button:last-child:not(:first-child) {
  border-color: rgba(255, 106, 26, 0.45);
  color: #ffb088;
}

.garage-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.portal-loading-shell {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.portal-loading-rail {
  padding: 0.8rem;
  border-right: 1px solid var(--line);
  background: #0d1211;
}

.portal-loading-brand {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.portal-loading-brand img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
.portal-loading-brand span, .portal-loading-main header > span { display: grid; gap: 0.1rem; }
.portal-loading-brand small, .portal-loading-main header small { color: var(--muted); font-size: 0.65rem; text-transform: uppercase; }
.portal-loading-line, .portal-loading-nav i, .portal-loading-panel > div { display: block; background: rgba(123, 145, 139, 0.16); }
.portal-loading-line { height: 0.65rem; }
.portal-loading-line.wide { width: 100%; height: 2.4rem; margin: 1rem 0; border: 1px solid rgba(123, 145, 139, 0.08); }
.portal-loading-nav { display: grid; gap: 0.45rem; }
.portal-loading-nav i { height: 2rem; border-radius: 3px; }
.portal-loading-main { min-width: 0; }
.portal-loading-main header { display: flex; align-items: center; justify-content: space-between; min-height: 3.7rem; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--line); }
.portal-loading-line.balance { width: 8rem; }
.portal-loading-main section { max-width: 78rem; margin: 0 auto; padding: 2rem 1.5rem; }
.portal-loading-line.title { width: 14rem; height: 1.2rem; }
.portal-loading-line.subtitle { width: min(24rem, 70%); margin-top: 0.65rem; }
.portal-loading-panel { display: grid; grid-template-columns: 2fr 1fr; gap: 0.8rem; min-height: 22rem; margin-top: 1.8rem; padding: 1rem; border: 1px solid var(--line); background: var(--panel); }
.portal-loading-panel > div:first-child { grid-row: span 2; }
.portal-loading-shell .portal-loading-line,
.portal-loading-shell .portal-loading-nav i,
.portal-loading-shell .portal-loading-panel > div { animation: portal-loading-pulse 1.2s ease-in-out infinite alternate; }

html.portal-navigating::after {
  content: "";
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 32%;
  height: 2px;
  background: var(--green);
  animation: portal-navigation-progress 900ms ease-in-out infinite;
}

@keyframes portal-loading-pulse { from { opacity: 0.45; } to { opacity: 0.9; } }
@keyframes portal-navigation-progress { from { transform: translateX(-110%); } to { transform: translateX(420%); } }

@media (max-width: 980px) {
  .portal-loading-shell { grid-template-columns: 1fr; }
  .portal-loading-rail { display: none; }
  .portal-loading-panel { grid-template-columns: 1fr; }
  .portal-loading-panel > div:first-child { grid-row: auto; min-height: 14rem; }
  .portal-frame {
    grid-template-columns: 1fr;
  }

  .side-feed {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    padding: 0.75rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .garage-item {
    align-items: stretch;
    flex-direction: column;
  }

  .garage-actions {
    justify-content: stretch;
  }

  .garage-actions button {
    flex: 1;
  }

  .profile-operations { grid-template-columns: 1fr; }

  .confirmation-card {
    align-items: stretch;
    flex-direction: column;
  }

  .confirmation-actions {
    justify-content: stretch;
  }

  .confirmation-actions button {
    flex: 1;
  }

  .content {
    padding: 1rem;
  }
}

/* Production portal UI */
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); }
button, input, select, textarea { border-radius: var(--radius-control); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.portal-frame { grid-template-columns: 15rem minmax(0, 1fr); }
.side-feed {
  background: #111614;
  border-right-color: var(--line);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
}
.brand { border: 0; padding: 0 0.5rem 1.25rem; text-transform: none; }
.brand strong, .page-title h1, .dino-name strong { font-family: inherit; letter-spacing: 0; }
.brand strong { font-size: 1rem; }
.brand small { color: var(--muted); font-size: 0.75rem; letter-spacing: 0; text-transform: none; }
.online-card {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  display: flex;
  font-size: 0.78rem;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.5rem;
}
.online-card > span:first-child, .telemetry-state > span:first-child {
  background: var(--green);
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  height: 0.45rem;
  width: 0.45rem;
}
.side-nav { display: grid; gap: 0.2rem; grid-template-columns: 1fr; }
.side-nav .nav-item {
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  justify-content: space-between;
  padding: 0.7rem 0.75rem;
  text-transform: none;
}
.side-nav .nav-item:hover, .side-nav .nav-item.active { background: var(--panel-2); color: var(--text); }
.side-nav .nav-item.active { box-shadow: inset 2px 0 var(--green); }
.nav-badge, .side-nav .nav-badge { color: var(--muted); font-size: 0.65rem; letter-spacing: 0; text-transform: uppercase; }
.side-account {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.2rem;
  margin-top: auto;
  padding: 1rem 0.5rem 0;
}
.side-account strong { font-size: 0.85rem; }
.side-account span { color: var(--muted); font-size: 0.72rem; }

.topbar { background: #111614; border-bottom-color: var(--line); min-height: 3.75rem; padding: 0 1.5rem; }
.server-heading { display: grid; gap: 0.1rem; }
.server-heading strong { font-size: 0.84rem; }
.server-heading span { color: var(--muted); font-size: 0.7rem; }
.account-strip { color: var(--muted); font-size: 0.76rem; font-weight: 400; gap: 1.2rem; }
.account-strip b { color: var(--text); }
.balance.premium { color: var(--muted); }

.content { gap: 1rem; margin: 0 auto; max-width: 94rem; padding: 1.5rem; width: 100%; }
.page-title { align-items: center; }
.page-title h1 { font-size: 1.45rem; margin: 0; }
.page-title p { color: var(--muted); font-size: 0.82rem; margin: 0.3rem 0 0; }
.telemetry-state { align-items: center; color: var(--muted); display: flex; font-size: 0.78rem; gap: 0.45rem; }
.telemetry-state [data-telemetry-label] { min-width: 0; overflow-wrap: anywhere; }
.telemetry-state.stale { color: var(--yellow); }
.telemetry-state.stale > span:first-child { background: var(--yellow); }
.telemetry-state.unavailable { color: var(--muted); }
.telemetry-state.unavailable > span:first-child { background: var(--muted); }
.status-bar[hidden], [hidden] { display: none !important; }
.status-bar {
  background: var(--panel);
  border-color: var(--line);
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  min-height: 2.25rem;
  padding: 0.6rem 0.75rem;
}
.dashboard-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; }
.resource-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1rem; align-items: start; }
.console-card, .panel, .online-card, .feed-item, .role-panel {
  background: var(--panel);
  border-color: var(--line);
  border-radius: 4px;
  box-shadow: none;
}
.console-top { border-bottom-color: var(--line); padding: 0.65rem 1rem; }
.console-top span:nth-child(3) { margin-left: auto; }
.dino-hero { background: #111614; min-height: 15rem; place-items: center; }
.dino-hero:has(img[hidden]) { min-height: 9rem !important; }
.watermark { display: none; }
.dino-hero img { filter: none; max-height: 10rem; width: min(28rem, 58%); }
.dino-name, .growth-readout { bottom: 1.15rem; }
.dino-name { left: 1.15rem; }
.growth-readout { right: 1.15rem; }
.dino-name strong, .growth-readout strong { font-size: 1.35rem; }
.metrics { gap: 0.65rem; padding: 1rem; }
.metric { align-items: center; display: grid; gap: 0.75rem; grid-template-columns: 5rem 1fr 3rem; }
.metric strong { font-size: 0.76rem; grid-column: 3; grid-row: 1; text-align: right; }
.metric-line { grid-column: 2; grid-row: 1; height: 0.3rem; }
.metric-line span, .metric.health .metric-line span, .metric.stamina .metric-line span,
.metric.hunger .metric-line span, .metric.thirst .metric-line span { background: var(--green); }

.right-stack { gap: 0.75rem; }
.panel { padding: 1rem; }
.panel-heading, .panel h2 { margin-bottom: 0.75rem; }
.panel h2 { font-size: 0.95rem; }
.eyebrow, .feed-type { color: var(--muted); font-size: 0.65rem; letter-spacing: 0.04rem; }
.panel-count, .status-chip, .role-chip { background: transparent; border-color: var(--line); border-radius: 3px; }
.action-grid, .tool-grid { gap: 0.45rem; }
.action-button, .tool-button, .garage-actions button, .wallet-grid button, .confirmation-actions button {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--text);
  min-height: auto;
  padding: 0.65rem 0.7rem;
}
.action-button { min-height: 3.8rem; }
.action-button strong { color: var(--text); font-size: 0.8rem; text-transform: none; }
.action-button:hover:not(:disabled), .tool-button:hover:not(:disabled),
.garage-actions button:hover:not(:disabled), .wallet-grid button:hover:not(:disabled),
.confirmation-actions button:hover:not(:disabled) { background: #202825; border-color: var(--line-strong); }
.action-button:first-child, .wallet-grid button, .garage-actions button:first-child { border-color: var(--line-strong); }
.action-button.danger, .tool-button.danger { border-color: #72433d; }
.action-requirements {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
  margin-top: 0.8rem;
  padding-top: 0.45rem;
}
.action-requirements span {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  gap: 0.55rem;
  justify-content: space-between;
  padding: 0.3rem 0;
}
.action-requirements b { color: var(--green); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
.action-requirements .failed b { color: var(--yellow); }
.garage-list { gap: 0; }
.garage-item, .item-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line);
  padding: 0.85rem 0;
}
.garage-item:first-child, .item-card:first-child { border-top: 0; padding-top: 0; }
.garage-vitals {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.6rem;
}
.garage-vitals span {
  background: #111614;
  border: 1px solid var(--line);
  display: grid;
  gap: 0.2rem;
  padding: 0.45rem 0.5rem;
}
.garage-vitals small { color: var(--muted); font-size: 0.62rem; }
.garage-vitals strong { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.retrieval-guidance {
  border-left: 2px solid var(--green);
  display: grid;
  gap: 0.2rem;
  margin-top: 0.65rem;
  padding: 0.35rem 0.6rem;
}
.retrieval-guidance.blocked { border-left-color: var(--yellow); }
.retrieval-guidance strong { font-size: 0.72rem; }
.retrieval-guidance span { color: var(--muted); font-size: 0.72rem; line-height: 1.45; }
.garage-dossier { border-top: 1px solid var(--line); margin-top: 0.65rem; padding-top: 0.55rem; }
.garage-dossier summary { color: var(--muted); cursor: pointer; font-size: 0.72rem; font-weight: 600; }
.garage-dossier dl { display: grid; gap: 0; margin: 0.55rem 0 0; }
.garage-dossier dl div { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 0.75rem; grid-template-columns: 7rem minmax(0, 1fr); padding: 0.45rem 0; }
.garage-dossier dt { color: var(--muted); font-size: 0.68rem; }
.garage-dossier dd { font-size: 0.7rem; margin: 0; overflow-wrap: anywhere; text-align: right; }
.garage-rename { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 0.55rem; grid-template-columns: minmax(0, 1fr) auto; padding-top: 0.65rem; }
.garage-rename label { display: grid; gap: 0.3rem; }
.garage-rename label span { color: var(--muted); font-size: 0.68rem; }
.garage-rename input { min-width: 0; }
.garage-rename .tool-button { min-height: 2.45rem; }
.empty-state { color: var(--muted); font-size: 0.82rem; margin: 0; padding: 0.25rem 0 0.75rem; }
.garage-history { border-top: 1px solid var(--line); margin-top: 0.75rem; padding-top: 0.75rem; }
.garage-history summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  list-style-position: inside;
}
.garage-history summary span { float: right; font-variant-numeric: tabular-nums; }
.garage-history-list { margin-top: 0.65rem; }
.garage-history-item {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.65rem 0;
}
.garage-history-item:first-child { border-top: 0; }
.garage-history-item > div { display: grid; gap: 0.15rem; min-width: 0; }
.garage-history-item strong { font-size: 0.8rem; }
.garage-history-item > div span { color: var(--muted); font-size: 0.72rem; }

.garage-capacity-summary { align-items: center; background: rgba(9, 16, 12, 0.45); border: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; margin-top: 0.8rem; padding: 0.65rem 0.75rem; }
.garage-capacity-summary > span { display: grid; gap: 0.1rem; }
.garage-capacity-summary strong { font-size: 0.78rem; }
.garage-capacity-summary small { color: var(--muted); font-size: 0.66rem; }
.garage-species-browser { display: grid; gap: 0.45rem; margin-top: 0.65rem; }
.garage-species-group { background: rgba(9, 16, 12, 0.45); border: 1px solid var(--line); border-radius: 4px; }
.garage-species-group > summary { align-items: center; cursor: pointer; display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr) auto 1rem; list-style: none; min-height: 3.45rem; padding: 0.7rem 0.8rem; }
.garage-species-group > summary::-webkit-details-marker { display: none; }
.garage-species-group > summary:hover { background: var(--panel-2); }
.garage-species-group > summary > span:first-child { display: grid; gap: 0.1rem; }
.garage-species-group > summary strong { font-size: 0.78rem; }
.garage-species-group > summary small { color: var(--subtle); font-size: 0.63rem; }
.garage-species-group > summary > svg { color: var(--subtle); height: 0.9rem; transition: transform 140ms ease; width: 0.9rem; }
.garage-species-group[open] > summary { border-bottom: 1px solid var(--line); }
.garage-species-group[open] > summary > svg { transform: rotate(180deg); }
.species-count { border: 1px solid var(--line-strong); border-radius: 3px; color: var(--green); font-size: 0.62rem; padding: 0.25rem 0.4rem; }
.garage-species-entries { display: grid; gap: 0; padding: 0.75rem; }
.species-entry-heading { align-items: center; display: flex; justify-content: space-between; padding: 0.1rem 0 0.65rem; }
.species-entry-heading strong { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; }
.species-entry-heading span { color: var(--subtle); font-size: 0.63rem; }
.garage-species-entries .garage-item:first-of-type { border-top: 1px solid var(--line); padding-top: 0.85rem; }
.marketplace-listing-form, .case-list, .profile-result-card, .staff-service-note,
.bridge-state-note, .status-note, .control-banner, .control-banner-item {
  background: #111614;
  border-color: var(--line);
  border-radius: 4px;
}
.prime-task { background: transparent; border-color: var(--line); border-radius: 3px; }

.marketplace-workspace { display: grid; gap: 0.9rem; }
  .marketplace-intro { align-items: center; display: flex; justify-content: space-between; min-height: 8rem; padding: 1.25rem 1.4rem; }
  .marketplace-intro h2 { font-size: 1.35rem; margin: 0.2rem 0 0.45rem; }
  .marketplace-intro p:not(.eyebrow) { color: var(--muted); line-height: 1.5; margin: 0; max-width: 46rem; }
  .marketplace-summary { border-left: 1px solid var(--line); display: grid; min-width: 8rem; padding: 0.4rem 0 0.4rem 1.4rem; }
  .marketplace-summary strong { color: var(--accent); font-size: 1.6rem; }
  .marketplace-summary span { color: var(--muted); font-size: 0.72rem; }
  .marketplace-toolbar { align-items: end; display: grid; gap: 0.8rem; grid-template-columns: minmax(10rem, 14rem) minmax(10rem, 14rem) auto 1fr; padding: 0.85rem 1rem; }
  .marketplace-toolbar .tool-button { justify-self: end; }
  .marketplace-toolbar .tool-button.is-active { border-color: var(--accent); color: var(--accent); }
  .marketplace-check { align-items: center; color: var(--muted); display: flex; font-size: 0.78rem; gap: 0.5rem; min-height: 42px; }
  .marketplace-check input { accent-color: var(--accent); height: 1rem; width: 1rem; }
  .marketplace-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marketplace-card { display: grid; min-width: 0; overflow: hidden; padding: 0; }
  .marketplace-card[hidden] { display: none; }
  .marketplace-card-visual { align-items: end; background: linear-gradient(145deg, #0b1712, #101a16); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; min-height: 10.5rem; overflow: hidden; padding: 1rem; position: relative; }
  .marketplace-card-visual::after { background-image: linear-gradient(rgba(51, 120, 85, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 120, 85, 0.08) 1px, transparent 1px); background-size: 28px 28px; content: ""; inset: 0; pointer-events: none; position: absolute; }
  .marketplace-card-badges { display: flex; gap: 0.35rem; left: 0.8rem; position: absolute; top: 0.8rem; z-index: 2; }
  .marketplace-card-badges .prime { border-color: var(--accent); color: var(--accent); }
  .marketplace-species-mark { color: rgba(102, 196, 150, 0.07); font-size: 7rem; font-weight: 800; line-height: 0.75; position: absolute; right: 1rem; top: 2.6rem; }
  .marketplace-card-visual > div:not(.marketplace-card-badges), .marketplace-growth { position: relative; z-index: 1; }
  .marketplace-card-visual h3 { font-size: 1.2rem; margin: 0.15rem 0 0; }
  .marketplace-growth { color: var(--accent); font-size: 1.4rem; }
  .marketplace-card-body { display: grid; gap: 0.9rem; padding: 1rem; }
  .marketplace-vitals { display: grid; gap: 0.45rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .marketplace-vitals span { display: grid; gap: 0.2rem; min-width: 0; }
  .marketplace-vitals small, .marketplace-card-meta small, .marketplace-card-purchase small, .marketplace-sell-value small { color: var(--subtle); font-size: 0.58rem; text-transform: uppercase; }
  .marketplace-vitals strong { font-size: 0.75rem; }
  .marketplace-vitals i { background: var(--line); display: block; height: 2px; overflow: hidden; position: relative; }
  .marketplace-vitals i::after { background: var(--accent); content: ""; inset: 0 auto 0 0; position: absolute; width: var(--market-value); }
  .marketplace-mutations { border-top: 1px solid var(--line); display: grid; gap: 0.45rem; padding-top: 0.75rem; }
  .marketplace-mutations > small { color: var(--subtle); font-size: 0.58rem; text-transform: uppercase; }
  .marketplace-mutations > span { color: var(--muted); font-size: 0.72rem; }
  .marketplace-mutations ul { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
  .marketplace-mutations li { border: 1px solid var(--line); color: var(--text); font-size: 0.68rem; padding: 0.25rem 0.4rem; }
  .marketplace-card-meta { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: 1fr 1fr; padding: 0.7rem 0; }
  .marketplace-card-meta span { display: grid; gap: 0.15rem; min-width: 0; }
  .marketplace-card-meta strong { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marketplace-card-purchase { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; }
  .marketplace-card-purchase > span { display: grid; gap: 0.15rem; }
  .marketplace-card-purchase > span strong { color: var(--accent); font-size: 1rem; }
  .marketplace-empty { grid-column: 1 / -1; padding: 2rem; text-align: left; }
  .marketplace-empty p { color: var(--muted); margin: 0.4rem 0 0; }
  .marketplace-sell { padding: 0; }
  .marketplace-sell > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 1rem 1.15rem; }
  .marketplace-sell > summary::-webkit-details-marker { display: none; }
  .marketplace-sell > summary > span:first-child { display: grid; gap: 0.2rem; }
  .marketplace-sell > summary small, .marketplace-sell > summary > span:last-child { color: var(--muted); font-size: 0.72rem; }
  .marketplace-sell-body { border-top: 1px solid var(--line); padding: 1rem 1.15rem 1.15rem; }
  .marketplace-duration { max-width: 14rem; }
  .marketplace-sell-list { display: grid; gap: 0.55rem; margin-top: 0.9rem; }
  .marketplace-sell-item { align-items: center; border: 1px solid var(--line); display: grid; gap: 0.8rem; grid-template-columns: minmax(12rem, 1fr) minmax(11rem, auto) auto; padding: 0.75rem; }
  .marketplace-sell-item > div:first-child, .marketplace-sell-value { display: grid; gap: 0.15rem; }
  .marketplace-sell-item span { color: var(--muted); font-size: 0.72rem; }
  .marketplace-sell-value strong { color: var(--accent); font-size: 0.82rem; }

.portal-gate { align-items: center; background: var(--bg); display: flex; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.gate-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; max-width: 30rem; padding: 1.5rem; width: 100%; }
.gate-brand { color: var(--green); font-size: 0.75rem; font-weight: 700; margin-bottom: 1.25rem; text-transform: uppercase; }
.gate-panel h1 { font-size: 1.35rem; margin: 0; }
.gate-panel > p { color: var(--muted); line-height: 1.5; margin: 0.65rem 0 1.25rem; }
.gate-steam-button { align-items: center; background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; color: #fff; display: inline-flex; font-weight: 700; justify-content: center; margin-bottom: 1.25rem; min-height: 42px; padding: 0 18px; text-decoration: none; }
.gate-steam-button:hover, .gate-steam-button:focus-visible { filter: brightness(1.12); }
.gate-retry-button { align-items: center; background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; color: var(--accent-ink); cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; justify-content: center; margin-bottom: 1.25rem; min-height: 44px; padding: 0 18px; }
.gate-retry-button:hover, .gate-retry-button:focus-visible { filter: brightness(1.12); }
.gate-help { border-top: 1px solid var(--line); display: grid; gap: 0.35rem; padding-top: 1rem; }
.gate-help strong { font-size: 0.8rem; }
.gate-help span { color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

@media (max-width: 1050px) {
  .portal-frame { grid-template-columns: 12.5rem minmax(0, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-grid { grid-template-columns: 1fr; }
  .right-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-layout { grid-template-columns: 1fr; }
  .skin-layout { grid-template-columns: 1fr; }
  .map-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
  .map-roster .panel-heading, .map-roster .map-privacy { grid-column: 1 / -1; }
  .marketplace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .marketplace-intro { align-items: start; display: grid; gap: 1rem; }
  .marketplace-summary { border-left: 0; border-top: 1px solid var(--line); padding: 0.75rem 0 0; width: 100%; }
  .marketplace-toolbar { align-items: stretch; grid-template-columns: 1fr 1fr; }
  .marketplace-toolbar .tool-button { justify-self: stretch; }
  .marketplace-grid { grid-template-columns: 1fr; }
  .marketplace-sell-item { align-items: stretch; grid-template-columns: 1fr; }
  .marketplace-card-purchase { align-items: stretch; flex-direction: column; }
}

@media (max-width: 760px) {
  .portal-frame { display: block; }
  .side-feed { height: auto; padding: 0.75rem; position: static; }
  .brand, .online-card, .side-account { display: none; }
  .side-nav { display: flex; overflow-x: auto; }
  .side-nav .nav-item { white-space: nowrap; }
  .topbar { align-items: center; flex-direction: row; padding: 0 1rem; }
  .server-heading span, .balance.premium { display: none; }
  .content { padding: 1rem; }
  .page-title { align-items: flex-start; display: grid; }
  .resource-grid, .right-stack { grid-template-columns: 1fr; }
  .dino-hero { min-height: 13rem; }
  .dino-hero img { width: 62%; }
  .console-top span:nth-child(3), .console-top span:nth-child(4) { display: none; }
  .confirmation-card { align-items: stretch; display: grid; }
  .garage-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garage-rename { grid-template-columns: 1fr; }
  .garage-rename .tool-button { width: 100%; }
  .group-map { height: min(72dvh, 36rem); min-height: 24rem; }
  .map-toolbar { align-items: start; grid-template-columns: minmax(0, 1fr) auto; }
  .map-layer-controls { grid-column: 1 / -1; justify-content: start; order: 3; }
  .map-recenter { grid-column: 2; grid-row: 1; }
  .map-roster { grid-template-columns: 1fr; }
  .skin-meta, .skin-palette { grid-template-columns: 1fr; }
  .skin-color-row:nth-child(odd), .skin-color-row:nth-child(even) { border-left: 0; padding-left: 0; padding-right: 0; }
}

/* The Nest visual system
   Workspace: <=1100px. Compact navigation: <=780px. Dense component reflow: <=640px. */
body {
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

body::before {
  background-image: url("/portal/assets/sunny-isle-jungle.jpg");
  background-position: center top;
  background-size: cover;
  content: "";
  height: 24rem;
  left: 0;
  opacity: 0.07;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

select {
  color-scheme: dark;
}

select option,
select optgroup {
  background: #0d1712;
  color: #f3f1e9;
}

select option:checked {
  background-color: #35483c;
  color: #ffffff;
}

select option:disabled {
  color: #8b958e;
}

button {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

button:active:not(:disabled) { transform: translateY(1px); }
button.is-busy, [data-portal-action].is-busy { cursor: wait; opacity: 0.72; }
button.is-busy::after, [data-portal-action].is-busy::after { animation: portal-action-spin 700ms linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; display: inline-block; height: 0.75rem; margin-left: 0.5rem; vertical-align: -0.08rem; width: 0.75rem; }
@keyframes portal-action-spin { to { transform: rotate(360deg); } }

.portal-frame { grid-template-columns: 17rem minmax(0, 1fr); }

.side-feed {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 1.1rem 0.9rem;
}

.brand {
  align-items: center;
  border-bottom: 0;
  display: flex;
  gap: 0.75rem;
  padding: 0.2rem 0.55rem 1.15rem;
}

.brand-mark {
  align-items: center;
  background: #13231a;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-size: 0.72rem;
  font-weight: 800;
  height: 2.35rem;
  justify-content: center;
  letter-spacing: 0.02rem;
  width: 2.35rem;
}

.brand-mark img {
  display: block;
  height: 1.85rem;
  object-fit: contain;
  width: 1.85rem;
}

.brand-copy { display: grid; gap: 0.1rem; min-width: 0; }
.brand-copy strong { font-size: 0.96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { color: var(--subtle); font-size: 0.67rem; font-weight: 650; letter-spacing: 0.055rem; text-transform: uppercase; }
.mobile-page-selector { display: none; }

.online-card {
  background: #101813;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.73rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
}

.online-card strong { color: var(--text); font-variant-numeric: tabular-nums; }

.side-nav { gap: 0.22rem; }
.side-nav .nav-item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  display: grid;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 0.7rem;
  grid-template-columns: 1.05rem minmax(0, 1fr) auto;
  padding: 0.68rem 0.72rem;
}

.side-nav .nav-item svg { height: 1rem; width: 1rem; }
.side-nav .nav-item:hover { background: var(--panel); border-color: var(--line); color: var(--text); }
.side-nav .nav-item.active {
  background: #1c261f;
  border-color: #394a3f;
  box-shadow: inset 3px 0 var(--accent);
  color: var(--text);
}
.side-nav .nav-item.active svg { color: var(--accent); }
.side-nav .nav-item.restricted { color: #dcc690; }
.nav-badge { color: var(--subtle); font-size: 0.58rem; }

.side-credit {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.18rem;
  margin-top: auto;
  padding: 1rem 0.5rem 0.75rem;
}
.side-credit > span { color: var(--subtle); font-size: 0.59rem; font-weight: 650; letter-spacing: 0.055rem; text-transform: uppercase; }
.side-credit > strong { font-size: 0.78rem; }
.side-credit button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.69rem;
  gap: 0.4rem;
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0.28rem 0;
}
.side-credit button:hover { color: var(--accent); }
.side-credit button svg { height: 0.85rem; width: 0.85rem; }

.side-account {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 2rem minmax(0, 1fr) 0.9rem;
  margin-top: 0;
  padding: 0.85rem 0.5rem 0;
  text-align: left;
  width: 100%;
}
.side-account:hover, .side-account:focus-visible { background: var(--panel-2); border-color: transparent; }
.account-avatar {
  align-items: center;
  background: var(--panel-3);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 750;
  height: 2rem;
  justify-content: center;
  position: relative;
  width: 2rem;
}
.account-avatar > span { position: relative; z-index: 0; }
.account-avatar > img { border-radius: 50%; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; z-index: 1; }
.account-presence { background: var(--subtle); border: 2px solid var(--sidebar); border-radius: 50%; bottom: -0.08rem; height: 0.55rem; position: absolute; right: -0.08rem; width: 0.55rem; }
.account-presence.is-verified { background: var(--green); }
.account-copy { display: grid; gap: 0.1rem; min-width: 0; }
.account-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { color: var(--subtle); font-size: 0.66rem; }
.side-account > svg { color: var(--subtle); height: 0.9rem; width: 0.9rem; }
.topbar-profile { align-items: center; display: none; height: 2.2rem; justify-content: center; min-width: 2.2rem; padding: 0; }
.topbar-profile svg { height: 1rem; width: 1rem; }

.topbar {
  backdrop-filter: blur(12px);
  background: rgba(14, 21, 17, 0.94);
  min-height: 4.2rem;
  padding: 0 1.7rem;
  z-index: 5;
}
.server-heading strong { font-size: 0.8rem; }
.server-heading span { color: var(--green); font-size: 0.66rem; }
.server-heading .server-availability { align-items: center; color: var(--muted); display: inline-flex; gap: 0.35rem; }
.server-heading .server-availability i { background: currentColor; border-radius: 50%; display: inline-block; height: 0.42rem; width: 0.42rem; }
.server-heading .server-availability.online { color: var(--green); }
.server-heading .server-availability.degraded { color: var(--gold); }
.server-heading .server-availability.offline { color: #d7786b; }
.server-heading .server-availability.unknown { color: var(--muted); }
.server-heading .server-availability > span { color: inherit; font-size: inherit; }
.side-utility-links { display: grid; gap: 0.15rem; margin-top: 0.45rem; }
.side-utility-links a,
.side-utility-links button { align-items: center; color: var(--muted); display: inline-flex; font-size: 0.72rem; gap: 0.45rem; justify-content: flex-start; padding: 0.35rem 0; text-decoration: none; }
.side-utility-links a:hover,
.side-utility-links button:hover { color: var(--text); }
.side-utility-links svg { height: 0.85rem; width: 0.85rem; }
.account-strip { gap: 0.65rem; }
.account-strip > span {
  align-items: center;
  border-left: 1px solid var(--line);
  display: flex;
  gap: 0.55rem;
  min-width: 8rem;
  padding-left: 0.9rem;
}
.account-strip svg { color: var(--accent); height: 1rem; width: 1rem; }
.account-strip > span > span { display: grid; gap: 0; }
.account-strip b { font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.account-strip small { color: var(--subtle); font-size: 0.59rem; font-weight: 600; text-transform: uppercase; }
.portal-announcement-bar {
  align-items: center;
  color: var(--text);
  display: flex;
  flex: 1 1 18rem;
  gap: 0.55rem;
  justify-content: center;
  margin: 0 auto;
  max-width: 42rem;
  min-width: 0;
  padding: 0.45rem 0.75rem;
}
.portal-announcement-bar[hidden] { display: none; }
.portal-announcement-bar svg { color: var(--accent); flex: 0 0 auto; height: 0.95rem; width: 0.95rem; }
.portal-announcement-bar span { font-size: 0.72rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-announcement-bar b { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); flex: 0 0 auto; font-size: 0.58rem; padding: 0.12rem 0.32rem; }
.portal-notification-center { position: relative; }
.portal-notification-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  display: inline-flex;
  height: 2.35rem;
  justify-content: center;
  min-width: 2.35rem;
  padding: 0;
  position: relative;
}
.portal-notification-button:hover, .portal-notification-button[aria-expanded="true"] { background: var(--panel-2); border-color: var(--line-strong); color: var(--text); }
.portal-notification-button > span {
  align-items: center;
  background: var(--danger);
  border: 2px solid #0e1511;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.58rem;
  font-weight: 800;
  height: 1.1rem;
  justify-content: center;
  min-width: 1.1rem;
  padding: 0 0.22rem;
  position: absolute;
  right: -0.25rem;
  top: -0.2rem;
}
.portal-notification-popover {
  background: #111916;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  color: var(--text);
  max-height: min(34rem, calc(100vh - 5.5rem));
  overflow: hidden;
  position: absolute;
  right: 0;
  top: calc(100% + 0.65rem);
  width: min(25rem, calc(100vw - 2rem));
  z-index: 20;
}
.portal-notification-popover[hidden] { display: none; }
.portal-notification-popover > header { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding: 0.85rem 1rem; }
.portal-notification-popover > header > div { display: grid; gap: 0.15rem; }
.portal-notification-popover > header strong { font-size: 0.82rem; }
.portal-notification-popover > header small { color: var(--muted); font-size: 0.65rem; font-weight: 400; text-transform: none; }
.portal-notification-list { max-height: min(29rem, calc(100vh - 10rem)); overflow-y: auto; }
.portal-notification-item { align-items: start; background: rgba(44, 194, 139, 0.08); border: 0; border-bottom: 1px solid var(--line); color: var(--text); display: grid; gap: 0.4rem; padding: 0.8rem 1rem; text-align: left; width: 100%; }
.portal-notification-item:hover { background: rgba(44, 194, 139, 0.13); }
.portal-notification-item.is-read { background: transparent; }
.portal-notification-item > span { display: grid; gap: 0.2rem; min-width: 0; }
.portal-notification-item strong { font-size: 0.75rem; }
.portal-notification-item small { color: var(--muted); font-size: 0.67rem; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; text-transform: none; white-space: normal; }
.portal-notification-item time { color: var(--subtle); font-size: 0.6rem; }

.content { gap: 1.15rem; max-width: 92rem; padding: 1.6rem 1.8rem 2.5rem; }
#portalPageContent { min-width: 0; }
.page-title {
  align-items: center;
  border-bottom: 1px solid var(--line);
  min-height: 4.4rem;
  padding-bottom: 1rem;
}
.page-title h1 { font-family: inherit; font-size: 1.55rem; font-weight: 720; }
.page-title p { color: var(--muted); font-size: 0.79rem; max-width: 42rem; }
.telemetry-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.45rem 0.62rem;
}

.dashboard-grid { gap: 1rem; grid-template-columns: minmax(0, 1fr) 21.5rem; }
.workspace-grid { gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem); }
.right-stack { gap: 0.8rem; }

.panel,
.console-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.panel { padding: 1.05rem; }
.panel h2 { font-size: 0.95rem; font-weight: 700; }
.eyebrow { color: var(--accent); font-size: 0.59rem; letter-spacing: 0.075rem; }
.panel-count { color: var(--muted); font-size: 0.66rem; }

.console-card { overflow: hidden; }
.console-top {
  background: #101713;
  border-bottom: 1px solid var(--line);
  color: var(--subtle);
  font-size: 0.62rem;
  min-height: 2.65rem;
  padding: 0.75rem 1rem;
}
.console-top .player-presence.online { color: var(--green); }
.console-top .player-presence.offline { color: var(--muted); }
.console-top .player-presence.pending { color: var(--gold); }

.dino-hero {
  background: #111713;
  min-height: 20rem;
  overflow: hidden;
  position: relative;
}
.dino-hero::after {
  background: linear-gradient(90deg, rgba(5, 8, 6, 0.92) 0%, rgba(5, 8, 6, 0.34) 52%, rgba(5, 8, 6, 0.18) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.dino-hero .dino-environment {
  filter: saturate(0.72) contrast(1.05);
  height: 100%;
  inset: 0;
  max-height: none;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.live-dino-model-stage {
  bottom: 5%;
  left: 31%;
  pointer-events: none;
  position: absolute;
  right: 5%;
  top: 4%;
  z-index: 2;
}
.live-dino-model-stage[data-live-dino-model-state="ready"] { display: block; }
.live-dino-model-stage canvas { display: block; height: 100%; width: 100%; }
.dino-name, .growth-readout { bottom: 1.4rem; z-index: 3; }
.dino-name { left: 1.4rem; }
.dino-name span { color: var(--accent); font-size: 0.65rem; letter-spacing: 0.085rem; }
.dino-name strong { font-family: inherit; font-size: 1.75rem; font-weight: 740; }
.growth-readout { right: 1.4rem; text-align: right; }
.growth-readout span { color: #d7ddd8; font-size: 0.62rem; }
.growth-readout strong { color: var(--accent); font-size: 1.7rem; }

.metrics {
  background: #101713;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
}
.metric {
  border-left: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 1fr auto;
  padding: 0.8rem 0.9rem;
}
.metric:first-child { border-left: 0; }
.metric > span { color: var(--subtle); font-size: 0.62rem; }
.metric strong { font-size: 0.72rem; grid-column: 2; grid-row: 1; }
.metric-line { background: #28312b; grid-column: 1 / -1; grid-row: 2; height: 0.24rem; }
.metric-line span,
.metric.health .metric-line span,
.metric.stamina .metric-line span,
.metric.hunger .metric-line span,
.metric.thirst .metric-line span { background: var(--green); }
.metric.growth .metric-line span { background: var(--accent); }

.prime-checklist,
.engine-prime,
.group-status { border-top: 1px solid var(--line); padding: 1rem; }
.prime-checklist { display: grid; gap: 0.8rem; }
.prime-checklist-head { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.prime-checklist-head > div { display: grid; gap: 0.18rem; }
.prime-checklist-head > div > strong { font-size: 0.86rem; }
.prime-checklist-head small { color: var(--muted); font-size: 0.66rem; line-height: 1.45; }
.prime-checklist-count { border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 0.66rem; font-weight: 650; padding: 0.35rem 0.5rem; white-space: nowrap; }
.prime-checklist-count.complete { border-color: rgba(74, 201, 142, 0.42); color: var(--green); }
.prime-overall-progress { background: #28312b; height: 0.28rem; overflow: hidden; }
.prime-overall-progress > span { background: var(--accent); display: block; height: 100%; transition: width 180ms ease; }
.prime-task-list { display: grid; gap: 0.65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prime-task { background: #101713; border: 1px solid var(--line); border-radius: 4px; display: block; min-height: 0; overflow: hidden; padding: 0; }
.prime-task.pending { border-color: rgba(216, 108, 92, 0.38); }
.prime-task.complete { border-color: rgba(74, 201, 142, 0.42); }
.prime-task > summary { align-content: start; cursor: pointer; display: grid; gap: 0.45rem 0.65rem; grid-template-columns: 2.7rem minmax(0, 1fr) 0.9rem; grid-template-rows: auto auto; list-style: none; min-height: 6.4rem; padding: 0.75rem; }
.prime-task > summary::-webkit-details-marker { display: none; }
.prime-task > summary:hover { background: var(--panel-2); }
.prime-task-state { align-items: center; background: rgba(216, 108, 92, 0.09); border: 1px solid rgba(216, 108, 92, 0.48); border-radius: 4px; color: var(--danger); display: inline-flex; grid-row: 1 / span 2; height: 2.7rem; justify-content: center; position: relative; width: 2.7rem; }
.prime-task-state > svg:first-child { height: 1.35rem; width: 1.35rem; }
.prime-task-result { background: #101713; border-radius: 50%; bottom: -0.28rem; height: 0.85rem; padding: 0.08rem; position: absolute; right: -0.28rem; width: 0.85rem; }
.prime-task.complete .prime-task-state { background: rgba(74, 201, 142, 0.1); border-color: var(--green); color: var(--green); }
.prime-task-title { color: inherit; display: grid; gap: 0.12rem; margin-top: 0; min-width: 0; }
.prime-task-title strong { font-size: 0.74rem; line-height: 1.35; }
.prime-task-title small { color: var(--subtle); font-size: 0.61rem; }
.prime-task > summary > b { align-self: end; color: var(--danger); font-size: 0.65rem; font-weight: 650; grid-column: 2; white-space: nowrap; }
.prime-task.complete > summary > b { color: var(--green); }
.prime-task-chevron { color: var(--subtle); grid-column: 3; grid-row: 1 / span 2; height: 0.85rem; justify-self: end; transition: transform 140ms ease; width: 0.85rem; }
.prime-task[open] .prime-task-chevron { transform: rotate(180deg); }
.prime-task-detail { background: rgba(5, 10, 7, 0.34); border-top: 1px solid var(--line); display: grid; gap: 0.65rem; padding: 0.75rem; }
.prime-task:not([open]) > .prime-task-detail { display: none; }
.prime-task-detail p { color: var(--muted); font-size: 0.67rem; line-height: 1.5; margin: 0; }
.prime-task-detail dl { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }
.prime-task-detail dl > div { display: grid; gap: 0.1rem; }
.prime-task-detail dt { color: var(--subtle); font-size: 0.58rem; text-transform: uppercase; }
.prime-task-detail dd { font-size: 0.65rem; margin: 0; }
.prime-checklist-empty { color: var(--muted); font-size: 0.68rem; margin: 0; padding: 0.8rem; }

.action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-button,
.tool-button,
.garage-actions button,
.wallet-grid button,
.confirmation-actions button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
}
.action-button { min-height: 4.15rem; text-align: left; }
.action-button strong { font-size: 0.79rem; }
.action-button small { color: var(--subtle); }
.action-button:first-child,
.garage-actions button:first-child,
.wallet-grid button { border-color: #587261; }
.action-button:hover:not(:disabled),
.tool-button:hover:not(:disabled),
.garage-actions button:hover:not(:disabled),
.wallet-grid button:hover:not(:disabled) { background: var(--panel-3); border-color: var(--accent); }
.action-requirements span { border-top: 1px solid rgba(41, 54, 46, 0.65); }
.action-requirements span:first-child { border-top: 0; }
.action-requirements b { color: var(--green); }
.action-requirements .failed b { color: var(--accent); }

.live-action-panel h2 { margin-bottom: 0.8rem; }
.live-action-list { border-top: 1px solid var(--line); display: grid; }
.live-action,
.live-action-group .live-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1.15rem minmax(0, 1fr) 0.9rem;
  min-height: 4rem;
  padding: 0.65rem 0.15rem;
  text-align: left;
  width: 100%;
}
.live-action > svg { color: var(--muted); height: 1rem; width: 1rem; }
.live-action > svg:last-child { height: 0.85rem; justify-self: end; width: 0.85rem; }
.live-action > span { display: grid; gap: 0.2rem; min-width: 0; }
.live-action strong { color: var(--text); font-size: 0.78rem; }
.live-action small { color: var(--subtle); font-size: 0.68rem; line-height: 1.35; }
.live-action.primary > svg:first-child,
.live-action.primary strong { color: var(--accent); }
.live-action:hover:not(:disabled) { background: rgba(255, 255, 255, 0.025); }
.live-action:hover:not(:disabled) > svg:last-child { color: var(--accent); transform: translateX(2px); }
.live-action:disabled { cursor: not-allowed; opacity: 0.42; }
.live-action-group { display: grid; }
.live-action-group label { color: var(--subtle); font-size: 0.65rem; padding: 0.7rem 0.15rem 0.35rem; text-transform: uppercase; }
.live-action-group select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; color: var(--text); margin-bottom: 0.25rem; min-width: 0; padding: 0.55rem; width: 100%; }
.live-action-list + .action-requirements { margin-top: 0.7rem; }

.earn-panel { padding-bottom: 0.65rem; }
.earn-panel h2 { margin-bottom: 0.2rem; }
.earn-intro { color: var(--muted); font-size: 0.72rem; line-height: 1.45; margin: 0 0 0.7rem; }
.earn-action-list { border-top: 1px solid var(--line); display: grid; }
.earn-action-list > a,
.earn-action-list > button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1.1rem minmax(0, 1fr) 0.9rem;
  min-height: 3.35rem;
  padding: 0.55rem 0.1rem;
  text-align: left;
  text-decoration: none;
}
.earn-action-list > :last-child { border-bottom: 0; }
.earn-action-list > a:hover,
.earn-action-list > button:hover:not(:disabled) { color: var(--accent); }
.earn-action-list > button:disabled { cursor: not-allowed; opacity: 0.66; }
.earn-action-list > a > svg:first-child,
.earn-action-list > button > svg:first-child { color: var(--accent); height: 1rem; width: 1rem; }
.earn-action-list > a > svg:last-child,
.earn-action-list > button > svg:last-child { color: var(--subtle); height: 0.85rem; width: 0.85rem; }
.earn-action-list > a > span,
.earn-action-list > button > span { display: grid; gap: 0.08rem; }
.earn-action-list strong { font-size: 0.75rem; }
.earn-action-list small { color: var(--subtle); font-size: 0.64rem; font-variant-numeric: tabular-nums; }

.gambling-lobby { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }
.game-table-card {
  background-image: linear-gradient(rgba(19, 27, 22, 0.9), rgba(19, 27, 22, 0.97)), url("/portal/assets/sunny-isle-jungle.jpg");
  background-position: center;
  background-size: cover;
  min-height: 20rem;
  padding: 1.4rem;
}
.game-table-card h2 { font-size: 1.3rem; margin-top: 0.45rem; }
.game-table-card p,
.game-safety-card p { color: var(--muted); font-size: 0.79rem; line-height: 1.55; max-width: 38rem; }

.event-wheel-page { display: grid; gap: 1rem; }
.event-wheel-page-heading { align-items: end; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 1rem; }
.event-wheel-page-heading h2 { font-size: 1.55rem; letter-spacing: 0.035em; margin: 0.25rem 0; text-transform: uppercase; }
.event-wheel-page-heading p { color: var(--muted); margin: 0; }
.event-wheel-balance { border-left: 1px solid var(--line); display: grid; min-width: 9rem; padding-left: 1rem; text-align: right; }
.event-wheel-balance span,
.event-wheel-balance small { color: var(--subtle); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.event-wheel-balance strong { color: var(--accent); font-size: 1.5rem; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(239, 184, 74, 0.18); }
.event-wheel-layout { align-items: stretch; display: grid; gap: 1rem; grid-template-columns: minmax(24rem, 1fr) minmax(18rem, 24rem); }
.event-wheel-stage {
  align-items: center;
  background:
    linear-gradient(rgba(125, 139, 84, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 139, 84, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 46%, rgba(117, 131, 78, 0.11), transparent 49%),
    #080d0a;
  background-size: 2rem 2rem, 2rem 2rem, auto, auto;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 35rem;
  overflow: hidden;
  padding: 4.65rem 1rem 1.25rem;
  position: relative;
}
.event-wheel-stage::after {
  background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.12) 50%);
  background-size: 100% 4px;
  content: "";
  inset: 0;
  opacity: 0.26;
  pointer-events: none;
  position: absolute;
  z-index: 6;
}
.event-wheel-instrument-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  left: 1rem;
  padding: 0.85rem 0;
  position: absolute;
  right: 1rem;
  top: 0;
}
.event-wheel-instrument-heading span { align-items: center; color: var(--accent); display: flex; font-size: 0.7rem; font-weight: 700; gap: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; }
.event-wheel-instrument-heading i { background: var(--green); box-shadow: 0 0 8px rgba(98, 182, 141, 0.55); height: 0.45rem; width: 0.45rem; }
.event-wheel-instrument-heading small { color: var(--subtle); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.58rem; letter-spacing: 0.08em; }
.event-wheel-pointer { border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-top: 1.35rem solid var(--accent); filter: drop-shadow(0 0 7px rgba(239, 184, 74, 0.45)); height: 0; position: relative; top: 0.48rem; width: 0; z-index: 5; }
.event-wheel-disc {
  background: conic-gradient(var(--wheel-segments));
  border: 0.38rem solid #9b813d;
  border-radius: 50%;
  box-shadow: 0 0 0 0.2rem #111c15, 0 0 0 0.45rem #4e5938, 0 0 0 0.55rem #080d0a, 0 0 0 0.62rem rgba(124, 138, 82, 0.42), 0 1rem 2.4rem rgba(0,0,0,.55);
  height: min(27rem, 62vw);
  max-height: 27rem;
  max-width: 27rem;
  position: relative;
  transform: rotate(0);
  transition: transform 4.2s cubic-bezier(.12,.68,.08,1);
  width: min(27rem, 62vw);
}
.event-wheel-disc::before {
  border: 1px dashed rgba(235, 220, 168, 0.36);
  border-radius: 50%;
  content: "";
  inset: 0.6rem;
  pointer-events: none;
  position: absolute;
}
.event-wheel-disc.is-spinning { transform: rotate(var(--wheel-result-rotation)); }
.event-wheel-segment-label { height: 50%; left: calc(50% - 4rem); pointer-events: none; position: absolute; text-align: center; top: 0; transform: rotate(var(--segment-angle)); transform-origin: 50% 100%; width: 8rem; }
.event-wheel-segment-label b { color: #f3ecd3; display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: clamp(.55rem, 1vw, .68rem); letter-spacing: 0.02em; line-height: 1.1; padding: 1.15rem 0.35rem 0; text-shadow: 0 1px 4px #000; text-transform: uppercase; }
.event-wheel-spin { align-items: center; background: radial-gradient(circle, #17231a 0, #0b120e 72%); border: 0.2rem solid #9b813d; border-radius: 50%; box-shadow: 0 0 0 0.25rem #111a14, 0 0.35rem 1rem rgba(0,0,0,.55); color: var(--text); display: flex; flex-direction: column; height: 7rem; justify-content: center; left: calc(50% - 3.5rem); position: absolute; top: calc(50% - 3.5rem); width: 7rem; z-index: 3; }
.event-wheel-spin:hover:not(:disabled) { background: radial-gradient(circle, #243221 0, #101912 74%); border-color: var(--accent); box-shadow: 0 0 0 0.25rem #111a14, 0 0 18px rgba(239, 184, 74, 0.22); }
.event-wheel-spin:disabled { cursor: not-allowed; opacity: .72; }
.event-wheel-spin strong { color: var(--accent); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; }
.event-wheel-spin small { color: var(--muted); font-size: .58rem; letter-spacing: 0.04em; margin-top: .25rem; }
.event-wheel-result { border-top: 1px solid var(--line); display: grid; gap: .2rem; margin-top: 1.15rem; min-height: 3rem; padding-top: 0.85rem; text-align: center; width: min(31rem, 90%); }
.event-wheel-result strong { color: var(--accent); font-size: 1rem; }
.event-wheel-result span { color: var(--muted); font-size: .74rem; }
.event-wheel-prizes { background: linear-gradient(180deg, rgba(20, 29, 23, 0.97), rgba(11, 17, 13, 0.98)); padding: 1rem; }
.event-wheel-prizes ol { list-style: none; margin: .75rem 0 0; padding: 0; }
.event-wheel-prizes li { align-items: center; border-top: 1px solid var(--line); display: grid; gap: .65rem; grid-template-columns: .65rem minmax(0,1fr) auto; padding: .82rem 0; }
.event-wheel-prizes li:first-child { border-top: 0; }
.event-wheel-prizes li div { display: grid; gap: .12rem; }
.event-wheel-prizes li small { color: var(--muted); font-size: .66rem; }
.event-wheel-prizes li > b { color: var(--accent); font-size: .72rem; font-variant-numeric: tabular-nums; }
.event-prize-swatch { background: var(--green); box-shadow: 0 0 5px rgba(98, 182, 141, 0.35); height: .5rem; width: .5rem; }
.event-wheel-note { align-items: center; color: var(--muted); display: flex; font-size: .72rem; gap: .55rem; }
.event-wheel-note svg { color: var(--green); height: .95rem; width: .95rem; }
.event-wheel-note p { margin: 0; }
.event-wheel-loading,
.event-wheel-closed { min-height: 12rem; padding: 1.4rem; }
.event-wheel-closed h3 { margin: .4rem 0; }
.event-wheel-closed p { color: var(--muted); max-width: 38rem; }

.event-credit-grant-panel { padding: 1rem; }
.event-credit-grant-form { align-items: end; display: grid; gap: .75rem; grid-template-columns: minmax(14rem, 1.2fr) 7rem minmax(14rem, 1fr) auto; }
.event-credit-grant-form .tool-button { min-height: 2.65rem; }
.event-wheel-config { display: grid; gap: 1rem; }
.event-wheel-config-basics { align-items: end; display: grid; gap: 1rem; grid-template-columns: 1fr 10rem; }
.event-wheel-config-heading { align-items: end; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: .6rem; }
.event-wheel-config-heading div { display: grid; gap: .15rem; }
.event-wheel-config-heading small { color: var(--muted); }
.event-wheel-config-heading > strong { color: var(--green); font-variant-numeric: tabular-nums; }
.event-wheel-config-heading > strong.is-invalid { color: #eaa69b; }
.event-wheel-config-rows { display: grid; gap: .5rem; }
.event-wheel-config-row { align-items: end; border: 1px solid var(--line); display: grid; gap: .55rem; grid-template-columns: minmax(10rem,1.4fr) minmax(9rem,1fr) 7rem 7rem auto; padding: .65rem; }
.event-wheel-config-row label { display: grid; gap: .25rem; }
.event-wheel-config-row label span { color: var(--subtle); font-size: .62rem; text-transform: uppercase; }
.event-wheel-config-row input,
.event-wheel-config-row select { min-width: 0; width: 100%; }
.event-wheel-config-row .text-action { min-height: 2.5rem; }

.garage-list { gap: 0.7rem; }
.garage-item,
.item-card {
  background: #101713;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.9rem;
}
.garage-item:first-child,
.item-card:first-child { border-top: 1px solid var(--line); padding-top: 0.9rem; }
.garage-item > div:first-child { flex: 1; min-width: 0; }
.garage-item > div > strong { font-size: 1rem; }
.garage-vitals span { background: var(--panel); }
.retrieval-guidance { background: rgba(98, 182, 141, 0.055); border-left-color: var(--green); }
.retrieval-guidance.blocked { background: rgba(239, 184, 74, 0.055); border-left-color: var(--accent); }
.garage-dossier summary:hover { color: var(--text); }
.garage-actions button:first-child { background: #203329; color: #dff5e8; }
.garage-actions button:last-child:not(:first-child) { background: transparent; border-color: #754940; color: #eaa69b; }

#store .garage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.store-workspace { display: grid; gap: 1rem; }
.store-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.store-heading h2, .store-category-heading h3, .store-card h3 { margin: 0; }
.store-heading p:not(.eyebrow), .store-category-heading p { margin: 0.3rem 0 0; color: var(--muted); }
.store-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.store-tabs button { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 9rem; justify-content: center; padding: 0.8rem 1rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.store-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.store-tabs button span { min-width: 1.4rem; font-size: 0.78rem; color: var(--muted); }
.store-category { display: grid; gap: 0.9rem; }
.store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.store-card { min-width: 0; border: 1px solid var(--line); background: var(--panel); }
.store-card-media { aspect-ratio: 16 / 8; display: flex; flex-direction: column; justify-content: end; padding: 0.9rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(4, 17, 12, 0.16), rgba(4, 17, 12, 0.92)), url('/portal/assets/sunny-isle-jungle.jpg') center/cover; overflow: hidden; }
.store-card-media span { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.store-card-media small { color: var(--muted); }
.store-card-body { display: grid; gap: 0.65rem; padding: 0.9rem; }
.store-card-body p { margin: 0; color: var(--muted); }
.store-card-details { min-height: 2.5rem; }
.store-delivery { min-height: 3rem; font-size: 0.85rem; }
.store-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.store-card-footer strong { color: var(--accent); font-size: 1.1rem; }
.store-card-footer strong span { color: var(--muted); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; }
.store-card-footer .store-base-price { color: var(--muted); font-size: 0.85rem; text-decoration: line-through; margin-right: 0.3rem; }
.store-empty { grid-column: 1 / -1; display: grid; gap: 0.35rem; padding: 2rem; border: 1px dashed var(--line); color: var(--muted); }
.store-empty strong { color: var(--text); }
#store .garage-item { align-items: stretch; display: grid; grid-template-rows: 1fr auto; }
#store .garage-actions { justify-content: stretch; }
#store .garage-actions button { width: 100%; }

.group-map { border-color: var(--line-strong); border-radius: 4px; }
.map-toolbar { background: var(--panel); border-color: var(--line); border-radius: 4px; }
.map-toolbar label { color: var(--muted); }
.map-roster-item { border-color: var(--line); }

.skin-layout { gap: 1rem; }
.skin-swatch { border-color: var(--line-strong); }
.skin-color-row { background: #101713; }

.portal-toast {
  background: #202b24;
  border: 1px solid #4c6755;
  border-radius: 4px;
  bottom: 1.25rem;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36);
  color: var(--text);
  font-size: 0.76rem;
  left: auto;
  line-height: 1.45;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  position: fixed;
  right: 1.25rem;
  top: auto;
  z-index: 30;
}
.portal-toast::before {
  background: var(--green);
  border-radius: 50%;
  content: "";
  height: 0.55rem;
  left: 1rem;
  position: absolute;
  top: 0.95rem;
  width: 0.55rem;
}
.portal-toast.error { border-color: #794a42; }
.portal-toast.error::before { background: var(--danger); }
.portal-toast.progress::before { animation: portal-pulse 1.2s ease-in-out infinite; background: var(--accent); }
@keyframes portal-pulse { 50% { opacity: 0.35; transform: scale(0.72); } }

.portal-dialog {
  background: transparent;
  border: 0;
  color: var(--text);
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  width: 100%;
}
.portal-dialog::backdrop { background: rgba(4, 7, 5, 0.78); backdrop-filter: blur(3px); }
.dialog-surface {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 0.9rem 1rem;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding: 1.2rem;
}
.dialog-icon {
  align-items: center;
  background: rgba(239, 184, 74, 0.1);
  border: 1px solid rgba(239, 184, 74, 0.32);
  border-radius: 50%;
  color: var(--accent);
  display: flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}
.dialog-icon svg { height: 1.15rem; width: 1.15rem; }
.dialog-copy h2 { font-size: 1.05rem; margin: 0.18rem 0 0.45rem; }
.dialog-copy p { color: var(--muted); font-size: 0.79rem; line-height: 1.55; margin: 0; }
.confirmation-actions {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.55rem;
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 0.9rem;
}
.confirmation-actions button { min-width: 6.5rem; padding: 0.62rem 0.9rem; }
.confirmation-actions button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 750; }
.confirmation-actions button:hover:not(:disabled) { background: var(--panel-3); border-color: var(--line-strong); }
.confirmation-actions button.primary:hover:not(:disabled) { background: #ffd071; border-color: #ffd071; }

.bug-report-form { grid-template-columns: 2.5rem minmax(0, 1fr); }
.bug-report-fields { display: grid; gap: 0.75rem; grid-column: 1 / -1; }
.bug-report-fields label { display: grid; gap: 0.35rem; }
.bug-report-fields label > span { color: var(--muted); font-size: 0.7rem; font-weight: 650; }
.bug-report-fields label small { color: var(--subtle); font-size: 0.62rem; font-weight: 500; }
.bug-report-fields input,
.bug-report-fields textarea {
  background: #0e1511;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.45;
  padding: 0.62rem 0.7rem;
  resize: vertical;
  width: 100%;
}
.bug-report-fields input::placeholder,
.bug-report-fields textarea::placeholder { color: #667169; }
.bug-report-fields input:focus,
.bug-report-fields textarea:focus { border-color: var(--accent); outline: 0; }

.profile-surface { display: block; padding: 0; }
.profile-heading { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 0.8rem; grid-template-columns: 2.5rem minmax(0, 1fr) 2rem; padding: 1rem; }
.profile-heading .account-avatar { height: 2.5rem; width: 2.5rem; }
.profile-heading h2 { font-size: 1rem; margin: 0.12rem 0; }
.profile-heading p { color: var(--muted); font-size: 0.7rem; margin: 0; }
.icon-button { align-items: center; display: flex; height: 2rem; justify-content: center; min-width: 2rem; padding: 0; }
.icon-button svg { height: 0.95rem; width: 0.95rem; }
.profile-connections { display: grid; margin: 0; padding: 0.4rem 1rem; }
.profile-connections > div { align-items: center; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 5rem 1fr; padding: 0.75rem 0; }
.profile-connections dt { align-items: center; color: var(--muted); display: flex; font-size: 0.68rem; gap: 0.45rem; }
.profile-connections dt svg { height: 0.85rem; width: 0.85rem; }
.profile-connections dd { display: grid; gap: 0.1rem; margin: 0; }
.profile-connections strong { align-items: center; display: flex; font-size: 0.75rem; gap: 0.4rem; }
.profile-connections small { color: var(--subtle); font-size: 0.65rem; }
.connection-state { background: var(--subtle); border-radius: 50%; height: 0.45rem; width: 0.45rem; }
.connection-state.is-connected { background: var(--green); box-shadow: 0 0 0 3px rgba(74, 201, 142, 0.1); }
.profile-actions { display: grid; gap: 0.35rem; padding: 0.65rem; }
.profile-moderation { border-bottom: 1px solid var(--line); display: grid; gap: 0.6rem; margin: 0 1rem; padding: 0.9rem 0; }
.profile-moderation h3 { font-size: 0.85rem; margin: 0.15rem 0 0; }
.profile-moderation-empty { display: grid; gap: 0.15rem; }
.profile-moderation-empty strong { font-size: 0.75rem; }
.profile-moderation-empty small { color: var(--muted); font-size: 0.65rem; }
.profile-strike-list { display: grid; gap: 0.5rem; max-height: 14rem; overflow-y: auto; }
.profile-strike { border-left: 2px solid var(--line-strong); display: grid; gap: 0.3rem; padding: 0.35rem 0 0.35rem 0.65rem; }
.profile-strike.is-active { border-left-color: var(--yellow); }
.profile-strike > div { display: flex; gap: 0.5rem; justify-content: space-between; }
.profile-strike strong { font-size: 0.72rem; }
.profile-strike small, .profile-strike p { color: var(--muted); font-size: 0.63rem; margin: 0; }
.profile-strike .text-action { font-size: 0.65rem; justify-self: start; }
.account-action { align-items: center; background: transparent; border: 0; color: var(--text); display: grid; gap: 0.75rem; grid-template-columns: 1.25rem 1fr; padding: 0.7rem; text-align: left; text-decoration: none; width: 100%; }
.account-action:hover { background: var(--panel-2); border-color: transparent; }
.account-action svg { color: var(--accent); height: 1rem; width: 1rem; }
.account-action span { display: grid; gap: 0.1rem; }
.account-action strong { font-size: 0.74rem; }
.account-action small { color: var(--subtle); font-size: 0.65rem; }
.account-action.danger-text svg, .account-action.danger-text strong { color: var(--danger); }

.staff-workspace { display: grid; gap: 0.75rem; }
.staff-duty-panel { align-items: center; display: grid; gap: 1rem; grid-template-columns: minmax(14rem, 0.8fr) minmax(20rem, 1.2fr); padding: 1rem 1.1rem; }
.staff-duty-panel h3 { font-size: 0.86rem; margin: 0.2rem 0; }
.staff-duty-panel > div > p { color: var(--muted); font-size: 0.7rem; line-height: 1.5; margin: 0; }
.announcement-manager { display: grid; gap: 1rem; padding: 1rem 1.1rem; }
.announcement-manager-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.announcement-manager-heading h3 { font-size: 0.86rem; margin: 0.2rem 0; }
.announcement-manager-heading p { color: var(--muted); font-size: 0.7rem; line-height: 1.5; margin: 0; max-width: 48rem; }
.announcement-manager-heading > svg { color: var(--accent); height: 1.1rem; width: 1.1rem; }
.announcement-compose { align-items: end; display: grid; gap: 0.75rem; grid-template-columns: minmax(18rem, 1fr) minmax(9rem, 0.25fr) auto; }
.announcement-compose label { display: grid; gap: 0.35rem; }
.announcement-compose label > span { color: var(--muted); font-size: 0.63rem; text-transform: uppercase; }
.announcement-compose textarea { min-height: 4.2rem; resize: vertical; }
.announcement-compose label > small { color: var(--subtle); font-size: 0.6rem; justify-self: end; }
.announcement-manager-list { border-top: 1px solid var(--line); display: grid; }
.announcement-manager-item { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; padding: 0.75rem 0; }
.announcement-manager-item:last-child { border-bottom: 0; padding-bottom: 0; }
.announcement-manager-item > div { display: grid; gap: 0.3rem; min-width: 0; }
.announcement-manager-item strong { font-size: 0.74rem; font-weight: 600; overflow-wrap: anywhere; }
.announcement-manager-item small { color: var(--muted); font-size: 0.62rem; }
.staff-duty-loading { color: var(--muted); font-size: 0.7rem; }
.staff-duty-control { align-items: end; display: grid; gap: 0.65rem; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto; }
.staff-duty-state { align-items: center; display: flex; gap: 0.55rem; min-width: 0; }
.staff-duty-state > span { background: var(--muted); border-radius: 50%; height: 0.55rem; width: 0.55rem; }
.staff-duty-state.is-on-duty > span { background: var(--green); box-shadow: 0 0 0 3px rgba(74, 201, 142, 0.12); }
.staff-duty-state > div, .staff-duty-state.is-unavailable { display: grid; gap: 0.15rem; }
.staff-duty-state strong { font-size: 0.75rem; }
.staff-duty-state small, .staff-duty-timing { color: var(--muted); font-size: 0.62rem; line-height: 1.45; }
.staff-duty-note { display: grid; gap: 0.3rem; }
.staff-duty-note > span { color: var(--muted); font-size: 0.62rem; text-transform: uppercase; }
.staff-duty-note input { min-height: 2.3rem; }
.staff-duty-timing { grid-column: 1 / -1; }
.case-desk { display: grid; gap: 0.75rem; min-width: 0; }
.case-desk > * { max-width: 100%; min-width: 0; width: 100%; }
.case-desk-header { align-items: center; display: flex; justify-content: space-between; padding: 1rem 1.1rem; }
.case-desk-header h2 { font-size: 1rem; margin: 0.2rem 0; }
.case-desk-header p { color: var(--muted); font-size: 0.72rem; margin: 0; }
.case-desk-header-actions { align-items: flex-end; display: grid; gap: 0.6rem; justify-items: end; }
.case-queue-presets { background: var(--panel); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0; padding: 0.3rem; }
.case-queue-preset { background: transparent; border: 0; border-radius: 3px; color: var(--muted); font-size: 0.7rem; min-height: 2.35rem; padding: 0.45rem 0.8rem; }
.case-queue-preset:hover { background: var(--panel-2); color: var(--text); }
.case-queue-preset.is-active { background: rgba(198, 166, 91, 0.12); color: var(--accent); }
.case-queue-preset span { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; color: var(--text); display: inline-flex; font-variant-numeric: tabular-nums; justify-content: center; margin-left: 0.35rem; min-width: 1.35rem; padding: 0.05rem 0.3rem; }
.case-queue-preset.is-active span { border-color: rgba(198, 166, 91, 0.35); color: var(--accent); }
.case-queue-overview, .case-queue-surface { padding: 1rem; }
.case-queue-filters-panel > summary, .ticket-bulk-tools-panel > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 0.85rem 1rem; }
.case-queue-filters-panel > summary::-webkit-details-marker, .ticket-bulk-tools-panel > summary::-webkit-details-marker { display: none; }
.case-queue-filters-panel > summary > span, .ticket-bulk-tools-panel > summary > span { display: grid; gap: 0.15rem; }
.case-queue-filters-panel > summary small, .ticket-bulk-tools-panel > summary small { color: var(--muted); font-size: 0.65rem; font-weight: 400; }
.case-queue-filters-panel > summary > svg, .ticket-bulk-tools-panel > summary > svg { color: var(--muted); height: 0.9rem; transition: transform 140ms ease; width: 0.9rem; }
.case-queue-filters-panel[open] > summary, .ticket-bulk-tools-panel[open] > summary { border-bottom: 1px solid var(--line); }
.case-queue-filters-panel[open] > summary > svg, .ticket-bulk-tools-panel[open] > summary > svg { transform: rotate(180deg); }
.case-queue-filters-panel .ticket-queue-filters, .ticket-bulk-tools-panel .ticket-bulk-tools { border: 0; padding: 1rem; }
.case-desk-entry .staff-section-body { align-items: center; grid-template-columns: minmax(0, 1fr) auto; }
.case-desk-entry h3 { font-size: 0.86rem; margin: 0.2rem 0; }
.case-desk-entry p { color: var(--muted); font-size: 0.7rem; margin: 0; }
.case-notification-button { align-items: center; display: inline-flex; gap: 0.45rem; }
.case-notification-button span {
  align-items: center;
  background: var(--danger);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 700;
  height: 1.25rem;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.25rem;
}
.case-notification-dialog { max-width: min(44rem, calc(100vw - 2rem)); }
.case-notification-surface { display: grid; gap: 0; grid-template-columns: 1fr; padding: 0; }
.case-notification-heading { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding: 1.15rem; }
.case-notification-heading h2 { font-size: 1.05rem; margin: 0.2rem 0 0.35rem; }
.case-notification-heading p, .case-notification-inbox-heading p { color: var(--muted); font-size: 0.72rem; line-height: 1.5; margin: 0; }
.case-notification-preferences, .case-notification-inbox { padding: 1rem 1.15rem; }
.case-notification-preferences { border-bottom: 1px solid var(--line); }
.case-notification-preferences h3, .case-notification-inbox h3 { font-size: 0.78rem; margin: 0 0 0.6rem; }
.case-notification-preferences h3:not(:first-child) { margin-top: 1rem; }
.preference-row { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; min-height: 2.8rem; padding: 0.55rem 0; }
.preference-row span { display: grid; gap: 0.15rem; }
.preference-row strong { font-size: 0.72rem; }
.preference-row small { color: var(--muted); font-size: 0.65rem; }
.preference-row input { accent-color: var(--accent); height: 1rem; width: 1rem; }
.case-notification-preferences > .tool-button { margin-top: 0.85rem; }
.case-notification-inbox-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 0.7rem; }
.case-notification-list { border: 1px solid var(--line); display: grid; max-height: 18rem; overflow-y: auto; }
.case-notification-item { align-items: center; background: rgba(198, 166, 91, 0.07); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr) auto; min-height: 3.5rem; padding: 0.65rem 0.75rem; text-align: left; }
.case-notification-item:last-child { border-bottom: 0; }
.case-notification-item:hover { background: var(--panel-2); }
.case-notification-item.is-read { background: transparent; color: var(--muted); }
.case-notification-item span { display: grid; gap: 0.2rem; min-width: 0; }
.case-notification-item strong { font-size: 0.72rem; }
.case-notification-item small { color: var(--muted); font-size: 0.65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-notification-item time { color: var(--muted); font-size: 0.62rem; }
.case-detail-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 0.65rem; }
.staff-intro { align-items: center; display: flex; justify-content: space-between; padding: 1rem 1.1rem; }
.staff-intro h2 { font-size: 1rem; margin: 0.2rem 0; }
.staff-intro p { color: var(--muted); font-size: 0.72rem; margin: 0; }
.staff-access-state { align-items: center; color: var(--green); display: inline-flex; font-size: 0.68rem; gap: 0.4rem; white-space: nowrap; }
.staff-access-state svg { height: 0.95rem; width: 0.95rem; }
.staff-section { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
.staff-section > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; min-height: 4.4rem; padding: 0.9rem 1rem; }
.staff-section > summary::-webkit-details-marker { display: none; }
.staff-section > summary > span { align-items: center; display: grid; flex: 1; gap: 0.12rem 0.7rem; grid-template-columns: 1.25rem minmax(0, 1fr); min-width: 0; }
.staff-section > summary > span > svg,
.staff-section > summary > span > i[data-lucide] { color: var(--accent); display: block; grid-row: 1 / 3; height: 1rem; width: 1rem; }
.staff-section > summary strong { font-size: 0.8rem; }
.staff-section > summary small { color: var(--muted); font-size: 0.68rem; font-weight: 400; }
.staff-section > summary > svg,
.staff-section > summary > i[data-lucide] { color: var(--subtle); display: block; flex: 0 0 auto; height: 0.95rem; margin-left: 0.75rem; transition: transform 140ms ease; width: 0.95rem; }
.staff-section[open] > summary { border-bottom: 1px solid var(--line); }
.staff-section[open] > summary > svg,
.staff-section[open] > summary > i[data-lucide] { transform: rotate(180deg); }
.staff-section > summary:hover { background: var(--panel-2); }
.staff-section-caution > summary > span > svg,
.staff-section-caution > summary > span > i[data-lucide] { color: var(--yellow); }
.staff-section-body { display: grid; gap: 0.85rem; padding: 1rem; }
.staff-section-toolbar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.staff-section-toolbar p { color: var(--muted); font-size: 0.72rem; margin: 0; max-width: 46rem; }
.staff-action-row { align-items: end; display: grid; gap: 0.65rem; grid-template-columns: minmax(16rem, 1fr) auto; }
.staff-action-row .control-reason { margin: 0; }
.primary-tool { border-color: var(--accent); color: var(--text); }
.staff-inline-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.7rem; }
.emergency-control-panel { background: rgba(198, 166, 91, 0.04); border: 1px solid rgba(198, 166, 91, 0.28); display: grid; gap: 0.8rem; padding: 0.9rem; }
.emergency-control-panel h3, .staff-config-panel h3 { font-size: 0.85rem; margin: 0.2rem 0; }
.emergency-control-panel p, .staff-config-panel > p { color: var(--muted); font-size: 0.7rem; margin: 0; }
.staff-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.staff-config-panel { border: 1px solid var(--line); display: grid; gap: 0.75rem; padding: 0.9rem; }
.policy-summary-table { border: 1px solid var(--line); display: grid; }
.policy-summary-table > div { align-items: baseline; border-bottom: 1px solid var(--line); display: grid; gap: 0.75rem; grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr); padding: 0.6rem 0.7rem; }
.policy-summary-table > div:last-child { border-bottom: 0; }
.policy-summary-table strong { font-size: 0.7rem; }
.policy-summary-table span { color: var(--muted); font-size: 0.65rem; line-height: 1.45; }
.discord-log-routing-panel { grid-column: 1 / -1; }
.cross-chat-panel { grid-column: 1 / -1; }
.developer-credentials-panel { grid-column: 1 / -1; }
.cross-chat-editor { border-top: 1px solid var(--line); display: grid; gap: 0.9rem; padding-top: 0.9rem; }
.cross-chat-primary-controls { align-items: end; display: grid; gap: 0.75rem; grid-template-columns: minmax(12rem, 0.75fr) minmax(14rem, 1fr) minmax(12rem, 0.75fr); }
.cross-chat-primary-controls .control-reason { margin: 0; }
.cross-chat-primary-controls small { color: var(--muted); display: block; font-size: 0.62rem; line-height: 1.4; margin-top: 0.3rem; }
.cross-chat-pairs { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.65rem; padding: 0.75rem; }
.cross-chat-pair-form { align-items: center; display: grid; gap: 0.55rem; grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr) auto; }
.cross-chat-pair-form select { background: var(--panel); border: 1px solid var(--line); color: var(--text); min-height: 2.35rem; padding: 0 0.65rem; }
.cross-chat-pair-list { display: grid; gap: 0.35rem; }
.cross-chat-pair { align-items: center; border-top: 1px solid var(--line); display: flex; font-size: 0.7rem; justify-content: space-between; min-height: 2.65rem; padding-top: 0.35rem; }
.staff-credentials-editor { border-top: 1px solid var(--line); display: grid; gap: 0.8rem; padding-top: 0.9rem; }
.staff-credential-add { align-items: end; display: grid; gap: 0.6rem; grid-template-columns: minmax(15rem, 1fr) auto; }
.staff-self-credential { align-items: center; background: var(--panel-2); border: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding: 0.8rem; }
.staff-self-credential div { display: grid; gap: 0.2rem; }
.staff-self-credential small { color: var(--muted); }
.staff-credential-add .control-reason { margin: 0; }
.staff-credential-list { background: var(--panel-2); border: 1px solid var(--line); display: grid; padding: 0 0.7rem; }
.staff-credential-row { align-items: center; display: flex; justify-content: space-between; min-height: 3rem; }
.staff-credential-row + .staff-credential-row { border-top: 1px solid var(--line); }
.staff-credential-row code { color: var(--text); font-size: 0.7rem; }
.discord-log-editor { display: grid; gap: 0.8rem; }
.discord-log-form { align-items: end; display: grid; gap: 0.65rem; grid-template-columns: minmax(13rem, 1.1fr) minmax(16rem, 2fr); }
.discord-log-categories { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.discord-log-category { align-items: center; background: var(--panel-2); border: 1px solid var(--line); display: inline-flex; font-size: 0.68rem; gap: 0.35rem; min-height: 2rem; padding: 0.35rem 0.55rem; }
.discord-log-category:has(input:checked) { border-color: var(--accent); color: var(--text); }
.discord-log-route-list { border-top: 1px solid var(--line); display: grid; }
.discord-log-route { align-items: center; display: grid; gap: 0.75rem; grid-template-columns: minmax(10rem, 0.8fr) minmax(14rem, 2fr) auto; padding: 0.75rem 0; }
.discord-log-route + .discord-log-route { border-top: 1px solid var(--line); }
.discord-log-route strong { font-size: 0.75rem; }
.discord-log-route small { color: var(--muted); display: block; font-size: 0.65rem; margin-top: 0.2rem; }
.staff-config-panel .catalog-admin-panel { margin-top: 0.25rem; }
.store-catalog-manager-panel { grid-column: 1 / -1; }
.store-mode-actions { grid-template-columns: repeat(2, minmax(12rem, max-content)); }
.catalog-admin-panel { border-top: 1px solid var(--line); display: grid; gap: 0.85rem; min-width: 0; padding-top: 0.9rem; }
.catalog-admin-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.catalog-admin-heading h4, .catalog-editor-heading h4 { font-size: 0.86rem; margin: 0.18rem 0 0; }
.catalog-admin-heading p { color: var(--muted); font-size: 0.68rem; margin: 0.25rem 0 0; }
.catalog-new-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.catalog-new-actions .tool-button { align-items: center; display: inline-flex; gap: 0.35rem; }
.catalog-new-actions svg { height: 0.8rem; width: 0.8rem; }
.catalog-editor-layout { align-items: start; display: grid; gap: 0.85rem; grid-template-columns: minmax(15rem, 0.7fr) minmax(29rem, 1.7fr); min-width: 0; }
.catalog-product-browser, .catalog-product-editor { background: rgba(0, 0, 0, 0.12); border: 1px solid var(--line); min-width: 0; }
.catalog-product-row[hidden], .catalog-product-group[hidden], .catalog-search-empty[hidden], .catalog-teleport-fields[hidden], [data-store-product-field][hidden] { display: none; }
.catalog-product-browser { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: 39rem; overflow: hidden; }
.catalog-search { align-items: center; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); }
.catalog-search svg { color: var(--muted); height: 0.9rem; margin-left: 0.7rem; width: 0.9rem; }
.catalog-search input { background: transparent; border: 0; color: var(--text); font: inherit; font-size: 0.72rem; min-height: 2.75rem; min-width: 0; outline: 0; padding: 0 0.7rem; width: 100%; }
.catalog-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.catalog-product-groups { overflow-y: auto; overscroll-behavior: contain; padding: 0 0.7rem 0.7rem; }
.catalog-product-group > header { align-items: center; color: var(--muted); display: flex; font-size: 0.62rem; justify-content: space-between; min-height: 2.5rem; padding-top: 0.35rem; text-transform: uppercase; }
.catalog-product-group > header span { border: 1px solid var(--line); min-width: 1.55rem; padding: 0.15rem 0.3rem; text-align: center; }
.catalog-product-group > div { border: 1px solid var(--line); display: grid; }
.catalog-product-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); cursor: pointer; display: grid; gap: 0.55rem; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 3.25rem; padding: 0.55rem 0.65rem; text-align: left; width: 100%; }
.catalog-product-row:last-child { border-bottom: 0; }
.catalog-product-row:hover { background: var(--panel-2); }
.catalog-product-row.is-selected { background: rgba(39, 203, 151, 0.08); box-shadow: inset 2px 0 0 var(--green); }
.catalog-product-row > span { display: grid; gap: 0.12rem; min-width: 0; }
.catalog-product-row > span:nth-child(2) { text-align: right; }
.catalog-product-row strong { font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-product-row small { color: var(--muted); font-size: 0.59rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-product-row svg { color: var(--subtle); height: 0.8rem; width: 0.8rem; }
.catalog-group-empty, .catalog-search-empty { color: var(--muted); font-size: 0.64rem; margin: 0; padding: 0.75rem; }
.catalog-product-editor { display: grid; }
.catalog-editor-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 3.8rem; padding: 0.7rem 0.85rem; }
.catalog-form-section { border-bottom: 1px solid var(--line); display: grid; gap: 0.65rem; padding: 0.8rem 0.85rem; }
.catalog-form-section h5 { font-size: 0.67rem; margin: 0; }
.catalog-form-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-form-grid .control-reason, .catalog-form-grid .tool-select { margin: 0; }
.catalog-field-wide { grid-column: 1 / -1; }
.catalog-availability-section .control-check-row { margin: 0; }
.catalog-teleport-fields { padding: 0; }
.catalog-teleport-fields > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 0.8rem 0.85rem; }
.catalog-teleport-fields > summary::-webkit-details-marker { display: none; }
.catalog-teleport-fields > summary span { display: grid; gap: 0.15rem; }
.catalog-teleport-fields > summary strong { font-size: 0.68rem; }
.catalog-teleport-fields > summary small { color: var(--muted); font-size: 0.6rem; }
.catalog-teleport-fields > summary svg { color: var(--subtle); height: 0.85rem; transition: transform 140ms ease; width: 0.85rem; }
.catalog-teleport-fields[open] > summary svg { transform: rotate(180deg); }
.catalog-teleport-fields > .catalog-form-grid { border-top: 1px solid var(--line); padding: 0.8rem 0.85rem; }
.catalog-editor-footer { align-items: end; display: grid; gap: 0.65rem; grid-template-columns: minmax(0, 1fr) auto; padding: 0.8rem 0.85rem; }
.catalog-editor-footer .control-reason { margin: 0; }
.catalog-editor-footer .tool-button { min-height: 2.55rem; }
.ticket-accused-panel { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.75rem; padding: 0.85rem; }
.ticket-accused-heading { align-items: center; display: flex; justify-content: space-between; }
.ticket-accused-heading h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.ticket-accused-heading > strong { border: 1px solid var(--line); min-width: 2rem; padding: 0.35rem 0.5rem; text-align: center; }
.ticket-accused-list { border-bottom: 1px solid var(--line); display: grid; }
.ticket-accused-item { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.65rem 0; }
.ticket-accused-item + .ticket-accused-item { border-top: 1px solid var(--line); }
.ticket-accused-item strong, .ticket-accused-item small { display: block; }
.ticket-accused-item small { color: var(--muted); font-size: 0.63rem; margin-top: 0.2rem; }
.ticket-accused-form { align-items: end; display: grid; gap: 0.65rem; grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 1.5fr) auto; }
.ticket-accused-form .control-reason { margin: 0; }
.ticket-reporter-override { grid-column: 1 / -1; }
.ticket-close-panel { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.8rem; padding: 0.85rem; }
.ticket-close-panel h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.ticket-metrics-toolbar { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 0.75rem; grid-template-columns: minmax(14rem, 1fr) auto auto; padding-bottom: 0.85rem; }
.ticket-metrics-toolbar > div, .ticket-metrics-toolbar > label { display: grid; gap: 0.2rem; }
.ticket-metrics-toolbar small, .ticket-metrics-toolbar label span { color: var(--muted); font-size: 0.65rem; }
.ticket-metrics-toolbar select { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); min-height: 2.35rem; padding: 0.45rem 0.55rem; }
.ticket-metrics-result:empty { display: none; }
.ticket-metrics-grid { border: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(7rem, 0.75fr)) minmax(14rem, 1.6fr); margin-bottom: 0.85rem; }
.ticket-metrics-grid > div { display: grid; gap: 0.2rem; min-width: 0; padding: 0.75rem; }
.ticket-metrics-grid > div + div { border-left: 1px solid var(--line); }
.ticket-metrics-grid span, .ticket-metrics-grid small { color: var(--muted); font-size: 0.62rem; }
.ticket-metrics-grid strong { font-size: 1rem; }
.ticket-metrics-grid small { line-height: 1.35; overflow-wrap: anywhere; }
.staff-panel-links { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.staff-performance-table { border: 1px solid var(--line); margin-top: 1rem; overflow: hidden; }
.staff-performance-row { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: minmax(12rem, 2fr) repeat(4, minmax(6rem, 0.75fr)); padding: 0.75rem 0.9rem; }
.staff-performance-row:first-child { border-top: 0; }
.staff-performance-row > span { min-width: 0; }
.staff-performance-row > span:not(:first-child) { text-align: right; }
.staff-performance-row strong, .staff-performance-row small { display: block; }
.staff-performance-row small { color: var(--muted); font-size: 0.66rem; margin-top: 0.18rem; overflow-wrap: anywhere; }
.staff-performance-heading { background: var(--surface-raised); color: var(--muted); font-size: 0.62rem; text-transform: uppercase; }
.ticket-queue-filters { align-items: end; display: grid; gap: 0.65rem; grid-template-columns: minmax(15rem, 1.5fr) repeat(3, minmax(9rem, 1fr)) auto auto auto; }
.ticket-queue-filters > label:not(.control-check) { display: grid; gap: 0.3rem; }
.ticket-queue-filters > label > span { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; }
.ticket-queue-filters select, .ticket-queue-filters input { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); min-height: 2.35rem; padding: 0.45rem 0.55rem; }
.ticket-bulk-tools { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: minmax(11rem, 0.8fr) minmax(10rem, 0.8fr) minmax(14rem, 1fr) minmax(15rem, 1.2fr) auto; padding-top: 0.85rem; }
.ticket-bulk-tools > div, .ticket-bulk-tools label { display: grid; gap: 0.25rem; }
.ticket-bulk-tools small, .ticket-bulk-tools label span { color: var(--muted); font-size: 0.65rem; }
.ticket-bulk-tools select, .ticket-bulk-tools input { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); min-height: 2.35rem; padding: 0.45rem 0.55rem; }
.ticket-bulk-select { align-items: center; color: var(--muted); display: flex; font-size: 0.65rem; gap: 0.35rem; justify-self: start; }
.ticket-operations-panel { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.8rem; padding: 0.85rem; }
.ticket-operations-panel h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.ticket-tags-panel { align-items: end; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.75rem; grid-template-columns: minmax(15rem, 1fr) minmax(14rem, 1fr) minmax(16rem, 1.2fr) auto; padding: 0.85rem; }
.ticket-tags-panel h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.ticket-tags-panel p { color: var(--muted); font-size: 0.65rem; margin: 0.2rem 0 0; }
.ticket-tags-panel .control-reason { margin: 0; }
.ticket-draft-tools { align-items: end; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: minmax(13rem, 1fr) auto minmax(15rem, 1.2fr) auto; padding: 0.75rem; }
.ticket-draft-tools label { display: grid; gap: 0.3rem; }
.ticket-draft-tools label span { color: var(--muted); font-size: 0.65rem; text-transform: uppercase; }
.ticket-draft-tools select { background: var(--panel); border: 1px solid var(--line); color: var(--text); min-height: 2.35rem; padding: 0.45rem 0.55rem; }
.ticket-operations-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticket-watchers-panel { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.7rem; padding: 0.85rem; }
.ticket-watchers-panel h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.ticket-watcher-list { display: grid; gap: 0.45rem; }
.ticket-watcher-list > div { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 0.75rem; justify-content: space-between; padding-top: 0.45rem; }
.ticket-watcher-list span { display: grid; gap: 0.1rem; }
.ticket-watcher-list small { color: var(--muted); }
.ticket-watcher-form { align-items: end; display: grid; gap: 0.7rem; grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr) auto; }
.ticket-close-grid { display: grid; gap: 0.65rem; grid-template-columns: minmax(11rem, 0.7fr) minmax(16rem, 1.35fr) minmax(16rem, 1.35fr); }
.ticket-close-grid .control-reason { margin: 0; }
.ticket-evidence-panel { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.75rem; padding: 0.85rem; }
.ticket-evidence-panel h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.ticket-log-panel { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.75rem; padding: 0.85rem; }
.ticket-log-panel-heading > .staff-inline-actions { align-items: center; margin-top: 0; }
.ticket-log-panel h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.ticket-log-list { display: grid; }
.ticket-log-item { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.7rem 0; }
.ticket-log-item strong, .ticket-log-item small, .ticket-log-item code { display: block; overflow-wrap: anywhere; }
.ticket-log-item small { color: var(--muted); font-size: 0.62rem; margin-top: 0.2rem; }
.ticket-log-item .ticket-log-warning { color: var(--yellow); font-weight: 700; }
.ticket-log-item code { color: var(--text-soft); font-size: 0.58rem; margin-top: 0.25rem; }
.ticket-log-item .tool-button { text-decoration: none; white-space: nowrap; }
.ticket-log-form { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.6fr) minmax(15rem, 1.2fr) auto; padding-top: 0.75rem; }
.ticket-log-form .control-reason { margin: 0; }
.ticket-log-history { border-top: 1px solid var(--line); }
.ticket-log-history > summary { align-items: center; color: var(--text-soft); cursor: pointer; display: flex; font-size: 0.68rem; font-weight: 700; justify-content: space-between; list-style: none; padding: 0.7rem 0; }
.ticket-log-history > summary::-webkit-details-marker { display: none; }
.ticket-log-history > summary small { color: var(--muted); font-weight: 400; }
.ticket-log-history[open] > summary { border-bottom: 1px solid var(--line); }
.ticket-log-capture { border-top: 1px solid var(--line); }
.ticket-log-capture:first-child { border-top: 0; }
.ticket-log-capture .ticket-log-item { border-top: 0; }
.ticket-log-review { background: #0b130f; border: 1px solid var(--line-strong); margin: 0 0 0.85rem; }
.ticket-log-review[hidden] { display: none; }
.ticket-log-combined-review { margin: 0; }
.ticket-log-combined-header { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); }
.ticket-log-combined-header .ticket-log-review-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticket-log-combined-header .staff-inline-actions { grid-column: 1 / -1; }
.ticket-log-review-header { align-items: start; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); padding: 0.85rem; }
.ticket-log-review-header h4 { font-size: 0.86rem; margin: 0.15rem 0; }
.ticket-log-review-header p { color: var(--muted); font-size: 0.68rem; margin: 0; }
.ticket-log-review-header .ticket-log-player-id { margin: 0.25rem 0; }
.ticket-log-player-id code, .ticket-log-event-player code { color: var(--text-soft); font-size: 0.62rem; overflow-wrap: anywhere; }
.ticket-log-review-tools { display: grid; gap: 0.55rem; }
.ticket-log-review-tools .tool-select { margin: 0; }
.ticket-log-review-tools .staff-inline-actions { margin-top: 0; }
.ticket-log-events { max-height: 32rem; overflow-x: hidden; overflow-y: auto; }
.ticket-log-event { align-items: start; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; gap: 0.7rem; grid-template-columns: auto minmax(0, 1fr); padding: 0.75rem 0.85rem; }
.ticket-log-event[hidden] { display: none; }
.ticket-log-event:last-child { border-bottom: 0; }
.ticket-log-event:hover { background: var(--panel-2); }
.ticket-log-event:has(input:checked) { background: #10241b; box-shadow: inset 3px 0 var(--green); }
.ticket-log-event > input { margin-top: 0.2rem; }
.ticket-log-event-content, .ticket-log-event-heading { display: grid; gap: 0.25rem; }
.ticket-log-event-heading { align-items: baseline; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) auto; }
.ticket-log-event-heading time, .ticket-log-event-heading small, .ticket-log-event-context { color: var(--muted); font-size: 0.62rem; }
.ticket-log-event-player { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ticket-log-event-player strong { font-size: 0.67rem; }
.ticket-log-event-summary { color: var(--text); font-size: 0.74rem; line-height: 1.45; }
.ticket-log-event-context { overflow-wrap: anywhere; }
.ticket-log-event details { margin-top: 0.35rem; }
.ticket-log-event details summary { color: var(--text-soft); font-size: 0.62rem; }
.ticket-log-event pre { background: #080e0b; border: 1px solid var(--line); color: var(--muted); font-size: 0.58rem; margin: 0.45rem 0 0; max-height: 12rem; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; padding: 0.55rem; white-space: pre-wrap; }
.ticket-log-evidence-bar { align-items: end; background: var(--panel-2); border-top: 1px solid var(--line-strong); display: grid; gap: 0.65rem; grid-template-columns: auto minmax(12rem, 1fr) minmax(14rem, 1.2fr) auto; padding: 0.85rem; }
.ticket-log-evidence-bar > span { align-self: center; color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
.ticket-log-evidence-bar .control-reason { margin: 0; }
.ticket-evidence-review-state { align-items: start; display: grid; gap: 0.4rem; }
.ticket-evidence-review-state > span { color: var(--muted); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; }
.ticket-evidence-review-state > span.is-relevant { color: var(--green); }
.ticket-evidence-review-state > span.is-inconclusive { color: var(--yellow); }
.ticket-evidence-review-state > span.is-rejected { color: var(--red); }
.case-add-evidence { border-top: 1px solid var(--line); padding-top: 0.65rem; }
.case-add-evidence > summary { cursor: pointer; font-size: 0.7rem; font-weight: 700; }
.case-add-evidence > div { display: grid; gap: 0.7rem; padding-top: 0.7rem; }

.case-detail-active { overflow: hidden; }
.content.case-detail-mode { height: calc(100dvh - 4rem); overflow: hidden; padding: 1rem 1.25rem; }
.content.case-detail-mode > .page-title { display: none; }
.content.case-detail-mode > #portalPageContent { height: 100%; min-height: 0; }
.case-desk.is-case-open { height: 100%; min-height: 0; }
.case-desk.is-case-open > .case-desk-header,
.case-desk.is-case-open > .case-queue-presets,
.case-desk.is-case-open > .case-queue-overview,
.case-desk.is-case-open > .case-queue-filters-panel,
.case-desk.is-case-open > .ticket-bulk-tools-panel { display: none; }
.case-desk.is-case-open > .case-queue-surface { background: transparent; border: 0; height: 100%; min-height: 0; padding: 0; }
.case-desk.is-case-open .case-queue-result { height: 100%; min-height: 0; }
.case-desk.is-case-open .case-workspace { height: 100%; min-height: 0; }
.case-workspace { display: grid; gap: 0.65rem; grid-template-rows: auto minmax(0, 1fr); margin: 0 auto; max-width: 96rem; }
.case-workspace-header { background: #07130f; border: 1px solid var(--line); border-top: 2px solid var(--line-strong); display: grid; gap: 0.4rem; padding: 0.5rem 0.8rem 0; }
.case-workspace-header .case-detail-toolbar { align-items: center; display: flex; justify-content: space-between; padding-bottom: 0.4rem; }
.case-workspace-header .case-detail-toolbar > span { color: var(--muted); font-family: var(--font-mono); font-size: 0.62rem; }
.case-view-switch { align-items: center; border: 1px solid var(--line); display: inline-flex; justify-self: start; padding: 0.15rem; }
.case-view-switch button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.68rem; font-weight: 700; min-height: 1.9rem; padding: 0.3rem 0.65rem; }
.case-view-switch button[aria-pressed="true"] { background: rgba(16, 222, 166, 0.12); color: var(--text); }
.case-workspace[data-case-view="conversation"] .case-investigation-only { display: none; }
.case-heading-row { align-items: center; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; }
.case-heading-actions { align-items: end; display: flex; gap: 0.75rem; }
.case-title-row { min-width: 0; }
.case-title-row h2 { font-size: clamp(1rem, 1.45vw, 1.3rem); line-height: 1.15; margin: 0.12rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-title-row p { color: var(--muted); font-size: 0.7rem; margin: 0; }
.case-heading-state { display: flex; }
.case-heading-state > div { display: grid; gap: 0.12rem; min-width: 8.5rem; padding: 0.15rem 0.7rem; }
.case-heading-state > div + div { border-left: 1px solid var(--line); }
.case-heading-state span { color: var(--muted); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; }
.case-heading-state strong { font-size: 0.78rem; }
.case-status { border: 0; font-size: 0.78rem; font-weight: 700; padding: 0; text-transform: none; }
.case-status.is-under_investigation, .case-status.is-reopened { border-color: var(--yellow); color: var(--yellow); }
.case-status.is-closed, .case-status.is-resolved { border-color: var(--green); color: var(--green); }
.case-stage-nav { border-top: 1px solid var(--line); display: flex; gap: 0; margin: 0 -0.8rem; overflow-x: auto; padding: 0 0.8rem; scrollbar-width: none; }
.case-stage-nav::-webkit-scrollbar { display: none; }
.case-stage-nav a { align-items: center; border-bottom: 2px solid transparent; color: var(--muted); display: inline-flex; flex: 0 0 auto; font-size: 0.64rem; font-weight: 700; gap: 0.35rem; min-height: 2rem; padding: 0.25rem 0.7rem; text-decoration: none; text-transform: uppercase; }
.case-stage-nav a:hover, .case-stage-nav a:focus-visible { border-bottom-color: var(--green); color: var(--text); outline: 0; }
.case-stage-nav a > span, .case-stage-index, .case-stage-label > span { align-items: center; border: 1px solid var(--line-strong); color: var(--green); display: inline-flex; font-size: 0.58rem; height: 1.25rem; justify-content: center; width: 1.25rem; }
.case-workspace-grid { align-items: stretch; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 23rem; min-height: 0; overflow: hidden; }
.case-workspace-main, .case-workspace-sidebar { align-content: start; display: grid; gap: 1rem; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.45rem; scrollbar-color: var(--line-strong) transparent; scrollbar-gutter: stable; scrollbar-width: thin; }
.case-workspace-sidebar { border-left: 1px solid var(--line); padding-left: 1rem; position: static; }
.case-workspace-sidebar > * { max-width: 100%; min-width: 0; }
.case-workspace-main::-webkit-scrollbar, .case-workspace-sidebar::-webkit-scrollbar { width: 0.45rem; }
.case-workspace-main::-webkit-scrollbar-thumb, .case-workspace-sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); }
.case-report-card, .case-conversation-panel, .case-activity, .case-decision-panel, .case-sidebar-panel { background: #091610; border: 1px solid rgba(16, 222, 166, 0.3); padding: 1rem; }
.case-report-card { border-left: 3px solid var(--yellow); }
.case-report-card > header { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.case-report-card h3, .case-conversation-panel h3, .case-decision-panel h3, .case-sidebar-panel h3 { font-size: 0.88rem; margin: 0.2rem 0; }
.case-report-card > header > span { color: var(--muted); font-size: 0.65rem; }
.case-report-body { font-size: 0.84rem; line-height: 1.65; margin: 1rem 0; white-space: pre-wrap; }
.case-conversation-panel { display: grid; gap: 0.75rem; }
.case-conversation-list { border: 1px solid var(--line); max-height: 28rem; overflow: auto; }
.case-evidence-writeups { border-left: 3px solid var(--gold); display: grid; gap: 0.65rem; padding: 0.75rem 0.9rem; }
.case-evidence-writeups article { border-top: 1px solid var(--line); display: grid; gap: 0.35rem; padding-top: 0.65rem; }
.case-evidence-writeups article:first-of-type { border-top: 0; padding-top: 0; }
.case-evidence-writeups header { align-items: baseline; display: flex; gap: 0.75rem; justify-content: space-between; }
.case-evidence-writeups p { margin: 0; white-space: pre-wrap; }
.case-evidence-writeup-form { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); display: grid; gap: 0.65rem; padding: 0.8rem; }
.case-evidence-writeup-form .tool-button { justify-self: start; }
.evidence-sequence { align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-strong); color: var(--gold); display: inline-flex; font-size: 0.62rem; font-weight: 800; min-height: 1.55rem; padding: 0.15rem 0.45rem; text-transform: uppercase; }
.case-message { border-bottom: 1px solid var(--line); display: grid; gap: 0.4rem; padding: 0.75rem; }
.case-message:last-child { border-bottom: 0; }
.case-message.is-internal { background: #19170d; border-left: 3px solid var(--yellow); }
.case-message header { align-items: baseline; display: flex; gap: 0.75rem; justify-content: space-between; }
.case-message header strong { font-size: 0.7rem; }
.case-message time { color: var(--muted); font-size: 0.6rem; }
.case-message p { font-size: 0.74rem; line-height: 1.5; margin: 0; white-space: pre-wrap; }
.case-reply-composer { border-top: 1px solid var(--line); display: grid; gap: 0.65rem; padding-top: 0.75rem; }
.case-reply-actions { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.case-stage-label { align-items: center; color: var(--green); display: inline-flex; font-size: 0.62rem; font-weight: 700; gap: 0.45rem; letter-spacing: 0.06em; text-transform: uppercase; }
.case-work-section { background: #06110d; border: 1px solid rgba(16, 222, 166, 0.36); scroll-margin-top: 0.5rem; }
.case-work-section > summary, .case-sidebar-panel > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 0.85rem 1rem; }
.case-work-section > summary::-webkit-details-marker, .case-sidebar-panel > summary::-webkit-details-marker { display: none; }
.case-work-section > summary > span:not(.case-stage-summary), .case-sidebar-panel > summary span { display: grid; gap: 0.15rem; }
.case-stage-summary { align-items: center; display: flex; gap: 0.75rem; min-width: 0; }
.case-stage-summary > span:last-child { display: grid; gap: 0.16rem; min-width: 0; }
.case-stage-index { flex: 0 0 auto; height: 1.55rem; width: 1.55rem; }
.case-work-section > summary strong, .case-sidebar-panel > summary strong { font-size: 0.75rem; }
.case-work-section > summary small, .case-sidebar-panel > summary small { color: var(--muted); font-size: 0.62rem; }
.case-work-section[open] > summary { background: #0b1b15; border-bottom: 1px solid var(--line-strong); }
.case-sidebar-panel[open] > summary { border-bottom: 1px solid var(--line); }
.case-work-section-body { display: grid; gap: 1rem; padding: 1rem; }
.case-work-section-body > section + section { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.case-work-section-body > section { background: transparent; }
.case-sidebar-panel { display: grid; gap: 0.65rem; min-width: 0; }
.case-sidebar-panel input, .case-sidebar-panel select, .case-sidebar-panel textarea { max-width: 100%; min-width: 0; width: 100%; }
.case-sidebar-panel .staff-inline-actions { flex-wrap: wrap; }
.case-sidebar-panel > dl { display: grid; gap: 0.45rem; margin: 0; }
.case-sidebar-panel > dl div { display: flex; gap: 0.5rem; justify-content: space-between; }
.case-sidebar-panel dt { color: var(--muted); font-size: 0.62rem; }
.case-sidebar-panel dd { font-size: 0.68rem; margin: 0; max-width: 12rem; overflow-wrap: anywhere; text-align: right; }
.case-sidebar-details { display: grid; gap: 0.65rem; padding: 0.75rem; }
.case-status-actions { display: grid; gap: 0.35rem; grid-template-columns: 1fr 1fr; }
.case-status-actions .tool-button { min-height: 2.25rem; }
.ticket-readiness-panel { padding: 0.8rem; }
.ticket-readiness-list { grid-template-columns: 1fr; }
.ticket-readiness-item { padding: 0.55rem 0; }
.ticket-readiness-item > span { min-width: 4.5rem; }
.case-activity, .case-decision-panel { scroll-margin-top: 0.5rem; }
.case-decision-panel { border-top: 3px solid var(--yellow); display: grid; gap: 0.8rem; }
.case-review-confirm { align-items: center; border: 1px solid var(--green); cursor: pointer; display: flex; gap: 0.7rem; padding: 0.75rem; }
.case-review-confirm > span { display: grid; gap: 0.15rem; }
.case-review-confirm strong { font-size: 0.72rem; }
.case-review-confirm small { color: var(--muted); font-size: 0.62rem; }
.case-review-blocked { background: #19170d; border: 1px solid #665718; padding: 0.75rem; }
.case-review-blocked strong { color: var(--yellow); font-size: 0.72rem; }
.case-review-blocked ul { color: var(--muted); display: grid; font-size: 0.65rem; gap: 0.35rem; margin: 0.5rem 0 0; padding-left: 1rem; }
.case-review-blocked li b { color: var(--text); }
.case-decision-panel fieldset { border: 0; display: grid; gap: 0.8rem; margin: 0; min-width: 0; padding: 0; }
.case-decision-panel fieldset:disabled { opacity: 0.45; }
.case-strike-panel { border-top: 1px solid var(--line-strong); display: grid; gap: 0.65rem; padding-top: 0.8rem; }
.case-strike-panel p { color: var(--muted); font-size: 0.65rem; margin: 0.2rem 0 0; }
.case-action-result { background: rgba(44, 194, 139, 0.08); border: 1px solid var(--green); color: var(--text) !important; line-height: 1.5; padding: 0.65rem 0.75rem; }
.case-strike-grid { display: grid; gap: 0.65rem; grid-template-columns: 8rem 10rem minmax(15rem, 1fr); }
.ticket-evidence-log-review { border-top: 1px solid var(--line); grid-column: 1 / -1; margin-top: 0.75rem; padding-top: 0.75rem; }
.ticket-evidence-log-review[hidden] { display: none; }
.ticket-log-events.is-evidence-review { max-height: 24rem; }
.ticket-readiness-panel { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.7rem; padding: 0.85rem; }
.ticket-readiness-panel h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.ticket-readiness-list { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ticket-readiness-item { align-items: start; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr); min-width: 0; padding: 0.65rem; }
.ticket-readiness-item > span { color: var(--muted); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ticket-readiness-item > div { display: grid; gap: 0.2rem; min-width: 0; }
.ticket-readiness-item strong { font-size: 0.78rem; overflow-wrap: anywhere; }
.ticket-readiness-item small { color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.ticket-readiness-item.is-complete > span { color: var(--green); }
.ticket-readiness-item.is-needed > span { color: var(--yellow); }
@media (max-width: 980px) {
  .ticket-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-metrics-grid > div + div { border-left: 0; }
  .ticket-metrics-grid > div { border-bottom: 1px solid var(--line); }
  .ticket-queue-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-tags-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-draft-tools { grid-template-columns: minmax(0, 1fr) auto; }
  .ticket-bulk-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ticket-metrics-toolbar, .ticket-metrics-grid, .ticket-queue-filters, .ticket-bulk-tools, .ticket-operations-grid, .ticket-tags-panel, .ticket-draft-tools, .ticket-watcher-form { grid-template-columns: 1fr; }
  .case-desk-header { align-items: flex-start; flex-direction: column; gap: 0.8rem; }
  .case-desk-header-actions { align-items: start; justify-items: start; }
  .case-desk-entry .staff-section-body { grid-template-columns: 1fr; }
  .case-notification-item { align-items: start; grid-template-columns: 1fr; }
  .case-notification-inbox-heading { align-items: flex-start; flex-direction: column; }
  .staff-duty-panel, .staff-duty-control, .announcement-compose { grid-template-columns: 1fr; }
  .staff-duty-timing { grid-column: 1; }
}
.ticket-evidence-list { display: grid; }
.ticket-evidence-item { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: minmax(12rem, 1.5fr) auto minmax(13rem, 1fr); padding: 0.7rem 0; }
.ticket-evidence-item strong, .ticket-evidence-item small { display: block; overflow-wrap: anywhere; }
.ticket-evidence-item small { color: var(--muted); font-size: 0.62rem; margin-top: 0.2rem; }
.ticket-evidence-item p { color: var(--text-soft); font-size: 0.65rem; margin: 0.3rem 0 0; }
.ticket-evidence-item > a { color: var(--accent); font-size: 0.68rem; white-space: nowrap; }
.ticket-evidence-item .control-reason { margin: 0; }
.ticket-evidence-item .staff-inline-actions { grid-column: 1 / -1; margin-top: 0; }
.ticket-evidence-form { align-items: end; border-top: 1px solid var(--line); display: grid; gap: 0.65rem; grid-template-columns: minmax(10rem, 0.75fr) minmax(16rem, 1.5fr) auto; padding-top: 0.75rem; }
.ticket-evidence-form .control-reason { margin: 0; }
.case-participant-workspace { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-activity { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.7rem; padding: 0.85rem; }
.case-activity h3 { font-size: 0.86rem; margin: 0.15rem 0 0; }
.case-activity-filters { align-items: end; display: grid; gap: 0.65rem; grid-template-columns: minmax(10rem, 1fr) repeat(2, minmax(8.5rem, 0.7fr)) auto; }
.case-activity-filters label { display: grid; gap: 0.3rem; }
.case-activity-filters label > span { color: var(--muted); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; }
.case-activity-filters input, .case-activity-filters select { background: var(--panel); border: 1px solid var(--line); color: var(--text); min-height: 2.25rem; padding: 0.45rem 0.55rem; width: 100%; }
.case-activity-list { display: grid; }
.case-activity-item { display: grid; gap: 0.65rem; grid-template-columns: 0.65rem minmax(0, 1fr); padding: 0.7rem 0; position: relative; }
.case-activity-item + .case-activity-item { border-top: 1px solid var(--line); }
.case-activity-marker { background: var(--muted); border: 2px solid var(--panel-2); border-radius: 50%; height: 0.55rem; margin-top: 0.2rem; width: 0.55rem; }
.case-activity-item.internal-note .case-activity-marker { background: var(--warning); }
.case-activity-item.evidence-event .case-activity-marker { background: var(--accent); }
.case-activity-item.rule-event .case-activity-marker { background: var(--success); }
.case-activity-item header { align-items: baseline; display: flex; gap: 0.75rem; justify-content: space-between; }
.case-activity-item header strong { font-size: 0.72rem; }
.case-activity-item header span, .case-activity-item small { color: var(--muted); font-size: 0.6rem; }
.case-activity-item p { color: var(--text-soft); font-size: 0.68rem; margin: 0.35rem 0 0; overflow-wrap: anywhere; }
.case-activity-item a { color: var(--accent); display: inline-block; font-size: 0.65rem; margin-top: 0.35rem; }
.case-activity-more { justify-self: start; }
@media (max-width: 760px) { .case-activity-filters { grid-template-columns: 1fr 1fr; } .case-activity-filters label:first-child { grid-column: 1 / -1; } }
.case-participant-workspace > div { display: grid; gap: 0.5rem; min-width: 0; }
.case-accused-profiles { display: grid; gap: 0.65rem; }
.case-participant-card { background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 0.7rem; padding: 0.85rem; }
.case-participant-card > header { align-items: start; display: flex; gap: 0.75rem; justify-content: space-between; }
.case-participant-card > header strong, .case-participant-card > header span { display: block; }
.case-participant-card > header strong { font-size: 0.8rem; }
.case-participant-card > header div > span { color: var(--muted); font-size: 0.64rem; margin-top: 0.2rem; }
.case-data-state { border: 1px solid var(--line); color: var(--text-soft); font-size: 0.6rem; padding: 0.25rem 0.4rem; white-space: nowrap; }
.case-participant-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.case-participant-card dl > div { border-top: 1px solid var(--line); min-width: 0; padding: 0.55rem 0.4rem 0.55rem 0; }
.case-participant-card dt { color: var(--muted); font-size: 0.58rem; text-transform: uppercase; }
.case-participant-card dd { font-size: 0.68rem; margin: 0.18rem 0 0; overflow-wrap: anywhere; }
.case-profile-notices { border-left: 2px solid var(--yellow); display: grid; gap: 0.25rem; padding-left: 0.6rem; }
.case-profile-notices p { color: var(--muted); font-size: 0.64rem; margin: 0; }
.case-profile-history { border-top: 1px solid var(--line); padding-top: 0.55rem; }
.case-profile-history > summary { cursor: pointer; font-size: 0.66rem; font-weight: 650; }
.case-profile-history > div { display: grid; margin-top: 0.45rem; }
.case-profile-history p { border-top: 1px solid var(--line); display: grid; gap: 0.12rem; margin: 0; padding: 0.45rem 0; }
.case-profile-history p:first-child { border-top: 0; }
.case-profile-history p strong { font-size: 0.66rem; }
.case-profile-history p span, .case-profile-history p small { color: var(--muted); font-size: 0.59rem; }
.support-workspace { display: grid; gap: 1rem; grid-template-columns: minmax(25rem, 1.1fr) minmax(24rem, 0.9fr); }
.support-workspace.is-ticket-open { grid-template-columns: 1fr; }
.support-workspace.is-ticket-open .support-create-panel { display: none; }
.support-create-panel, .support-list-panel { align-content: start; display: grid; gap: 1rem; }
.support-create-panel h2, .support-list-panel h2 { font-size: 1rem; margin: 0.15rem 0; }
.support-create-header { border-bottom: 1px solid var(--line); padding-bottom: 0.85rem; }
.support-create-header p { color: var(--muted); font-size: 0.68rem; line-height: 1.5; margin: 0.3rem 0 0; max-width: 42rem; }
.support-step-heading { align-items: center; display: flex; gap: 0.65rem; }
.support-step-heading > span { align-items: center; background: var(--surface-strong); border: 1px solid var(--line-strong); color: var(--accent); display: inline-flex; flex: 0 0 1.65rem; font-size: 0.7rem; font-weight: 750; height: 1.65rem; justify-content: center; }
.support-step-heading strong, .support-step-heading small { display: block; }
.support-step-heading strong { font-size: 0.73rem; }
.support-step-heading small { color: var(--muted); font-size: 0.61rem; line-height: 1.4; margin-top: 0.12rem; }
.support-form-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.support-appeal-strike { margin: 0.65rem 0; }
.support-appeal-strike small { color: var(--muted); display: block; font-size: 0.62rem; margin-top: 0.25rem; }
.case-appeal-reference { align-items: center; background: var(--panel-2); border-left: 2px solid var(--yellow); display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.55rem 0.7rem; }
.case-appeal-reference span { color: var(--muted); font-family: ui-monospace, "Cascadia Code", monospace; font-size: 0.7rem; }
.case-appealed-strike { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--yellow); margin: 0 0 0.85rem; padding: 0.8rem; }
.case-appealed-strike h3 { font-size: 1rem; margin: 0.15rem 0 0; }
.case-appealed-strike dl { display: grid; gap: 0.65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0.75rem 0 0; }
.case-appealed-strike dl > div { min-width: 0; }
.case-appealed-strike dt { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; }
.case-appealed-strike dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
.case-appealed-strike .appealed-strike-reason { grid-column: 1 / -1; }
.appealed-strike-resolution { border-top: 1px solid var(--line); margin-top: 0.75rem; padding-top: 0.75rem; }
.appealed-strike-resolution .control-reason { margin: 0; }
.appealed-strike-resolution .staff-inline-actions { margin-top: 0.6rem; }
@media (max-width: 760px) { .case-appealed-strike dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.support-form-grid .control-reason, .support-create-panel > .control-reason { margin: 0; }
.support-form-grid small { color: var(--muted); display: block; font-size: 0.62rem; margin-top: 0.25rem; }
.support-reported-player { border-left: 2px solid var(--accent); padding-left: 0.75rem; }
.support-evidence-entry { background: var(--surface-soft); border: 1px solid var(--line); display: grid; gap: 0.75rem; padding: 0.8rem; }
.player-upload-dropzone { background: var(--surface); border: 1px dashed var(--line-strong); cursor: pointer; display: grid; gap: 0.18rem; min-height: 6.5rem; padding: 0.85rem; place-content: center; text-align: center; }
.player-upload-dropzone:hover { border-color: var(--accent); }
.player-upload-dropzone > span { color: var(--accent); font-size: 0.58rem; font-weight: 750; text-transform: uppercase; }
.player-upload-dropzone > strong { font-size: 0.72rem; }
.player-upload-dropzone > small { color: var(--muted); font-size: 0.59rem; line-height: 1.45; }
.player-upload-dropzone input { font-size: 0.62rem; margin-top: 0.45rem; max-width: 100%; }
.player-upload-dropzone.is-checking, .player-upload-dropzone.is-disabled { cursor: default; opacity: 0.72; }
.player-upload-dropzone.is-checking:hover, .player-upload-dropzone.is-disabled:hover { border-color: var(--line-strong); }
.player-upload-selection { border-left: 2px solid var(--accent); display: grid; gap: 0.25rem; padding: 0.35rem 0.65rem; }
.player-upload-selection span, .player-upload-selection strong { font-size: 0.62rem; overflow-wrap: anywhere; }
.player-upload-selection .is-invalid { color: var(--danger); }
.support-submit-row { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding-top: 0.9rem; }
.support-submit-row .tool-button { min-width: 9rem; }
.section-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.player-ticket-list { border-top: 1px solid var(--line); display: grid; }
.player-ticket-row { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.75rem 0; }
.player-ticket-row + .player-ticket-row { border-top: 1px solid var(--line); }
.player-ticket-row strong, .player-ticket-row span, .player-ticket-row small { display: block; }
.player-ticket-row span { color: var(--text-soft); font-size: 0.7rem; margin-top: 0.2rem; }
.player-ticket-row small, .player-ticket-detail small { color: var(--muted); font-size: 0.61rem; margin-top: 0.15rem; }
.player-ticket-detail { display: grid; gap: 1rem; }
.player-ticket-detail h3 { margin: 0.15rem 0; }
.player-ticket-detail-header { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: auto minmax(0, 1fr) auto; padding-bottom: 0.85rem; }
.player-ticket-detail-header > div p { color: var(--muted); font-size: 0.62rem; margin: 0.25rem 0 0; }
.player-ticket-detail-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 0.8fr); }
.player-ticket-conversation, .player-ticket-evidence { background: var(--surface-soft); border: 1px solid var(--line); display: grid; gap: 0.8rem; padding: 0.9rem; }
.player-ticket-conversation { align-content: start; }
.player-ticket-evidence { align-content: start; }
.player-ticket-section-heading { border-bottom: 1px solid var(--line); padding-bottom: 0.65rem; }
.player-ticket-section-heading > span { align-items: center; display: flex; gap: 0.45rem; }
.player-ticket-section-heading p { color: var(--muted); font-size: 0.61rem; line-height: 1.45; margin: 0.25rem 0 0; }
.ticket-live-indicator { align-items: center; color: var(--accent); display: inline-flex; font-size: 0.62rem; font-weight: 700; gap: 0.3rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ticket-live-indicator::before { background: var(--accent); border-radius: 50%; content: ""; height: 0.4rem; width: 0.4rem; }
.player-ticket-messages { display: grid; gap: 0.55rem; }
.player-ticket-messages article { background: var(--surface); border: 1px solid var(--line); padding: 0.75rem; }
.player-ticket-messages article.is-player { border-left: 2px solid var(--accent); }
.player-ticket-messages article.is-staff { border-left: 2px solid var(--success); }
.player-ticket-messages article > div { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; }
.player-ticket-messages article p { line-height: 1.5; margin: 0.4rem 0 0; white-space: pre-wrap; }
.player-ticket-reply { border-top: 1px solid var(--line); display: grid; gap: 0.65rem; padding-top: 0.8rem; }
.player-evidence-list { display: grid; gap: 0.5rem; }
.player-evidence-list > article { align-items: center; background: var(--surface); border: 1px solid var(--line); display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.65rem; }
.player-evidence-list strong, .player-evidence-list small { display: block; overflow-wrap: anywhere; }
.player-ticket-upload { border-top: 1px solid var(--line); display: grid; gap: 0.65rem; padding-top: 0.8rem; }
.player-evidence-link { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.player-evidence-link > summary { cursor: pointer; font-size: 0.64rem; font-weight: 650; }
.player-evidence-link > div { display: grid; gap: 0.6rem; margin-top: 0.65rem; }
.support-empty { border: 1px dashed var(--line); padding: 1rem; }
.support-empty p { color: var(--muted); margin: 0.3rem 0 0; }

.portal-gate {
  background-image: linear-gradient(rgba(8, 13, 10, 0.58), rgba(8, 13, 10, 0.88)), url("/portal/assets/sunny-isle-jungle.jpg");
  background-position: center;
  background-size: cover;
}
.gate-panel { background: rgba(14, 21, 17, 0.95); border-color: var(--line-strong); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42); }
.gate-brand { color: var(--accent); }
.gate-steam-button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

@media (max-width: 1100px) {
  .portal-frame { grid-template-columns: 14rem minmax(0, 1fr); }
  .dashboard-grid, .workspace-grid { grid-template-columns: 1fr; }
  .prime-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-workspace-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .ticket-log-evidence-bar { grid-template-columns: 1fr 1fr; }
  .right-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .right-stack > .panel:first-child { grid-column: 1 / -1; }
  .catalog-editor-layout { grid-template-columns: 1fr; }
  .catalog-product-browser { max-height: 22rem; }
}

@media (max-width: 780px) {
  .event-wheel-page-heading { align-items: start; gap: .75rem; }
  .event-wheel-layout { grid-template-columns: 1fr; }
  .event-wheel-stage { min-height: 30rem; padding-inline: .5rem; }
  .event-wheel-disc { height: min(25rem, 86vw); width: min(25rem, 86vw); }
  .event-credit-grant-form,
  .event-wheel-config-basics,
  .event-wheel-config-row { grid-template-columns: 1fr; }
  .event-wheel-config-row .text-action { justify-self: start; }
  .staff-performance-row { grid-template-columns: 1fr 1fr; }
  .staff-performance-heading { display: none; }
  .staff-performance-row > span:not(:first-child) { text-align: left; }
  .case-detail-active { overflow: auto; }
  .portal-frame { display: block; }
  .side-feed { border-bottom: 1px solid var(--line); height: auto; padding: 0.65rem; position: static; }
  .brand { display: flex; padding: 0.2rem 0.25rem 0.6rem; }
  .brand-mark { height: 2rem; width: 2rem; }
  .online-card, .side-account { display: none; }
  .side-nav { display: none; }
  .mobile-page-selector { display: grid; gap: 0.3rem; }
  .mobile-page-selector > span { color: var(--subtle); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.055rem; text-transform: uppercase; }
  .mobile-page-selector select { appearance: auto; background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); min-height: 2.75rem; padding: 0.55rem 0.65rem; width: 100%; }
  .nav-badge { display: none; }
  .side-credit { align-items: center; display: flex; gap: 0.45rem; margin-top: 0.55rem; padding: 0.55rem 0.25rem 0; }
  .side-credit > span { font-size: 0.55rem; }
  .side-credit > strong { font-size: 0.66rem; }
  .side-utility-links { display: flex; margin: 0 0 0 auto; }
  .side-utility-links button { margin: 0; }
  .topbar { min-height: 3.6rem; padding: 0 0.8rem; position: static; }
  .server-heading { display: none; }
  .portal-announcement-bar { flex-basis: 100%; justify-content: flex-start; max-width: none; order: 2; padding: 0.55rem 0; }
  .topbar:has(.portal-announcement-bar:not([hidden])) { flex-wrap: wrap; padding-bottom: 0.35rem; }
  .account-strip { justify-content: space-between; width: 100%; }
  .account-strip > span { border-left: 0; min-width: 0; padding-left: 0; }
  .portal-notification-popover { left: 0.75rem; position: fixed; right: 0.75rem; top: 4.25rem; width: auto; }
  .topbar-profile { display: inline-flex; }
  .staff-intro, .staff-section-toolbar { align-items: start; display: grid; }
  .staff-access-state { margin-top: 0.35rem; }
  .staff-action-row, .staff-config-grid, .discord-log-form, .discord-log-route, .cross-chat-primary-controls, .cross-chat-pair-form, .ticket-accused-form, .ticket-close-grid, .ticket-evidence-item, .ticket-evidence-form, .ticket-log-form, .ticket-readiness-list, .case-participant-workspace, .support-workspace, .support-form-grid, .player-ticket-detail-grid, .player-ticket-detail-header { grid-template-columns: 1fr; }
  .catalog-admin-heading, .catalog-editor-footer { align-items: stretch; display: grid; grid-template-columns: 1fr; }
  .catalog-new-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-new-actions .tool-button { justify-content: center; }
  .catalog-form-grid, .store-mode-actions { grid-template-columns: 1fr; }
  .catalog-field-wide { grid-column: auto; }
  .support-submit-row { align-items: stretch; flex-direction: column; }
  .support-submit-row .tool-button { width: 100%; }
  .player-ticket-detail-header .case-status { justify-self: start; }
  .player-evidence-list > article { align-items: stretch; flex-direction: column; }
  .content.case-detail-mode { height: auto; overflow: visible; padding: 1rem 0.8rem 5rem; }
  .content.case-detail-mode > .page-title { display: grid; }
  .content.case-detail-mode > #portalPageContent { height: auto; }
  .case-desk.is-case-open, .case-desk.is-case-open > .case-queue-surface, .case-desk.is-case-open .case-queue-result, .case-desk.is-case-open .case-workspace { height: auto; }
  .case-workspace { grid-template-rows: auto auto; }
  .case-workspace-grid, .case-strike-grid, .ticket-log-evidence-bar { grid-template-columns: 1fr; overflow: visible; }
  .case-workspace-main, .case-workspace-sidebar { overflow: visible; padding-right: 0; }
  .case-workspace-sidebar { border-left: 0; padding-left: 0; position: static; }
  .case-heading-row { align-items: stretch; grid-template-columns: 1fr; }
  .case-heading-actions { align-items: center; flex-wrap: wrap; justify-content: space-between; }
  .case-title-row, .ticket-log-review-header { align-items: start; flex-direction: column; }
  .case-heading-state > div { min-width: 0; padding-left: 0; padding-right: 0.65rem; }
  .case-heading-state > div + div { border-left: 1px solid var(--line); padding-left: 0.65rem; }
  .ticket-log-review-header { grid-template-columns: 1fr; }
  .case-stage-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .case-stage-nav a { min-width: 0; }
  .ticket-log-event-heading { grid-template-columns: 1fr; }
  .ticket-log-item { align-items: stretch; flex-direction: column; }
  .cross-chat-pair-form > span { display: none; }
  .staff-credential-add { grid-template-columns: 1fr; }
  .staff-section > summary { min-height: 4rem; padding: 0.75rem; }
  .staff-section > summary small { line-height: 1.35; }
  .garage-species-group > summary { grid-template-columns: minmax(0, 1fr) auto 0.9rem; }
  .species-entry-heading { align-items: start; display: grid; gap: 0.2rem; }
  .content { padding: 1rem 0.8rem 5rem; }
  .content, .main-area, .map-layout, .map-surface { min-width: 0; }
  .group-map { min-height: 24rem; width: 100%; }
  button, .tool-button, .action-button, .garage-actions button, .wallet-grid button, .account-action, .icon-button { min-height: 2.75rem; }
  .icon-button { min-width: 2.75rem; }
  .page-title { align-items: start; display: grid; }
  .telemetry-state { justify-self: start; }
  .right-stack, .resource-grid, #store .garage-list { grid-template-columns: 1fr; }
  .gambling-lobby { grid-template-columns: 1fr; }
  .right-stack > .panel:first-child { grid-column: auto; }
  .dino-hero { min-height: 17rem; }
  .prime-checklist-head { align-items: stretch; display: grid; }
  .prime-checklist-count { justify-self: start; }
  .prime-task-list { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 4.5rem 1fr 2.8rem; padding: 0.65rem 0.8rem; }
  .metric:first-child { border-top: 0; }
  .metric > span { grid-column: 1; }
  .metric-line { grid-column: 2; grid-row: 1; }
  .metric strong { grid-column: 3; grid-row: 1; text-align: right; }
  .garage-item { align-items: stretch; flex-direction: column; }
  .garage-actions { justify-content: stretch; }
  .garage-actions button { flex: 1; }
  .portal-toast { bottom: 0.8rem; left: 0.8rem; right: 0.8rem; }
  .dialog-surface { grid-template-columns: 1fr; }
  .bug-report-form { grid-template-columns: 1fr; }
  .dialog-icon { display: none; }
  .confirmation-actions { grid-column: 1; }
  .confirmation-actions button { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .event-wheel-disc { transition-duration: .25s; }
}

/* Claude handoff structural port: production data and actions, reference layout. */
.portal-frame { grid-template-columns: 17.75rem minmax(0, 1fr); }
.side-feed { padding: 0; }
.brand {
  margin: 0;
  min-height: 7.2rem;
  padding: 1.35rem 1.25rem;
}
.brand-mark { background: transparent; border: 0; height: 2.55rem; width: 2.55rem; }
.brand-copy strong { font-size: 1rem; }
.terminal-clearance {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--olive-light);
  display: flex;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  gap: 0.55rem;
  letter-spacing: 0.1em;
  min-height: 2.65rem;
  padding: 0 1.15rem;
  text-transform: uppercase;
}
.terminal-clearance i {
  background: var(--olive);
  box-shadow: 0 0 8px rgba(124, 138, 82, 0.7);
  height: 0.4rem;
  width: 0.4rem;
}
.online-card {
  align-items: center;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  margin: 0;
  min-height: 3.2rem;
  padding: 0 1.15rem;
  text-transform: uppercase;
}
.online-card b { color: var(--olive-light); font-size: 0.66rem; }
.online-card strong { color: var(--muted); font-size: 0.68rem; font-weight: 500; }
.online-card small { color: var(--muted); font-size: 0.58rem; }
.nav-section-label {
  color: #4f5753;
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  padding: 1.25rem 1.3rem 0.45rem;
  text-transform: uppercase;
}
.side-nav { gap: 0; padding: 0 0.45rem; }
.side-nav a {
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  display: grid;
  grid-template-columns: 1.35rem 0 1fr auto;
  min-height: 2.55rem;
  padding: 0.62rem 0.85rem;
}
.side-nav a > b { color: #57605c; font-size: 0.61rem; font-weight: 500; }
.side-nav a > svg { display: none; }
.side-nav a.active { border-left-color: var(--accent); }
.side-nav a.active > b { color: var(--accent); }
.side-credit { margin: auto 0.85rem 0; }
.side-account { margin: 0.65rem 0.85rem 0.9rem; }

.main-area { min-width: 0; }
.topbar {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
  position: relative;
  z-index: 30;
}
.server-heading { display: none; }
.account-strip { position: absolute; right: 1.8rem; top: 1.05rem; }
.content { max-width: none; padding: 0 2.25rem 2rem; }
.page-title {
  align-items: center;
  border-bottom: 1px solid var(--line);
  margin: 0 -2.25rem 1.4rem;
  min-height: 6.35rem;
  padding: 1.1rem 2.25rem;
}
.page-title p { display: none; }
.terminal-page-code {
  color: var(--olive);
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}
.page-title h1 { font-size: 1.72rem; margin: 0; }
.telemetry-state { margin-right: 3.1rem; }

.terminal-overview { gap: 1.1rem; }
.specimen-strip {
  align-items: center;
  background: linear-gradient(180deg, rgba(28, 34, 33, 0.96), rgba(21, 26, 25, 0.96));
  border: 1px solid #333d3c;
  border-radius: 3px;
  display: grid;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  grid-template-columns: auto auto 1fr auto;
  min-height: 4.8rem;
  padding: 0.8rem 1.15rem;
}
.specimen-strip-state {
  color: var(--olive-light);
  font-size: 0.61rem;
  letter-spacing: 0.12em;
  margin-right: 1rem;
  text-transform: uppercase;
}
.specimen-strip-state i {
  background: var(--olive);
  box-shadow: 0 0 8px rgba(124, 138, 82, 0.7);
  display: inline-block;
  height: 0.42rem;
  margin-right: 0.65rem;
  width: 0.42rem;
}
.specimen-strip > strong { font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; }
.specimen-strip > span:nth-of-type(2) { color: var(--muted); font-size: 0.67rem; margin-left: 0.65rem; }
.specimen-strip > a {
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--olive-light);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 0.65rem 0.95rem;
  text-decoration: none;
  text-transform: uppercase;
}

.dashboard-grid {
  align-items: start;
  gap: 1.35rem;
  grid-template-columns: minmax(0, 1fr) 32.5rem;
}
.specimen-workspace { display: grid; gap: 1.25rem; min-width: 0; }
.console-card { overflow: hidden; }
.console-top { display: none; }
.dino-hero { min-height: 21.5rem; }
.terminal-feed-label::after {
  color: var(--muted);
  content: " · CAM-04 · ENCLOSURE FEED";
  margin-left: 0.2rem;
}
.live-dino-model-stage { left: 36%; }
.dino-name { bottom: 1.45rem; }
.dino-name::before {
  color: var(--accent);
  content: "SPECIES // ";
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.dino-name span { display: inline; }
.growth-readout {
  align-items: center;
  background: rgba(8, 10, 9, 0.72);
  border: 0.38rem solid #343d3c;
  border-right-color: var(--accent);
  border-radius: 50%;
  bottom: 1.15rem;
  display: flex;
  flex-direction: column-reverse;
  height: 5.25rem;
  justify-content: center;
  width: 5.25rem;
}
.growth-readout strong { font-size: 1.2rem; }
.growth-readout span { font-size: 0.49rem; }
.metrics { border-top: 1px solid var(--line); }
.metric { padding: 0.85rem 1.2rem; }
.status-note { border-radius: 0; margin: 0; }

.prime-checklist { padding: 0.5rem 0; }
.prime-checklist-head {
  align-items: center;
  border-bottom: 1px dashed #303735;
  min-height: 2.5rem;
}
.prime-checklist-head > div > strong,
.prime-checklist-head small,
.prime-overall-progress { display: none; }
.prime-checklist-head .eyebrow::before { color: var(--accent); content: "/// "; }
.prime-checklist-count { border: 0; }
.prime-task-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prime-task { border-top: 1px solid #202625; }
.prime-task:nth-child(3n + 2),
.prime-task:nth-child(3n + 3) { border-left: 1px solid #202625; }
.prime-task > summary {
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  min-height: 2.7rem;
  padding: 0.45rem 0.55rem;
}
.prime-task-state { height: 1.15rem; width: 1.15rem; }
.prime-task-state > svg:first-child { display: none; }
.prime-task-state::before {
  border: 1px solid #46504d;
  content: "";
  height: 0.85rem;
  width: 0.85rem;
}
.prime-task.complete .prime-task-state::before { background: var(--olive); box-shadow: 0 0 8px rgba(124, 138, 82, 0.55); }
.prime-task-result { display: none; }
.prime-task-title small,
.prime-task-chevron { display: none; }
.prime-task-title strong { font-size: 0.66rem; }
.prime-task > summary > b { color: var(--muted); font-size: 0.58rem; grid-column: 3; }
.prime-task-detail { grid-column: 1 / -1; }

.right-stack { gap: 1.2rem; }
.live-action-panel { padding: 1.1rem 1.25rem 1.25rem; }
.command-panel-heading { display: grid; gap: 0.3rem; margin-bottom: 1rem; }
.command-panel-heading .eyebrow { color: var(--accent); font-size: 0.76rem; font-weight: 700; }
.command-panel-heading small { color: var(--subtle); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }
.action-command-grid { display: grid; gap: 0.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.command-option {
  align-items: center;
  background: #141817;
  border: 1px solid #303837;
  border-radius: 2px;
  color: var(--muted);
  display: flex;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  gap: 0.45rem;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.55rem;
  text-transform: uppercase;
}
.command-option svg { height: 0.9rem; width: 0.9rem; }
.command-option strong { font-size: 0.62rem; letter-spacing: 0.05em; }
.command-option.selected { background: rgba(124, 138, 82, 0.1); border-color: var(--olive); color: var(--olive-light); }
.command-option:disabled { cursor: not-allowed; opacity: 0.42; }
.command-product-select { display: grid; gap: 0.35rem; margin-top: 0.65rem; }
.command-product-select span { color: var(--subtle); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; }
.command-product-select select { background: #101413; border: 1px solid var(--line); color: var(--text); padding: 0.55rem; width: 100%; }
.command-description {
  border-left: 2px solid var(--danger);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.55;
  margin: 0.9rem 0;
  padding: 0.1rem 0 0.1rem 0.75rem;
}
.execute-command {
  background: linear-gradient(180deg, #f4b24c, #d98b28);
  border: 1px solid #f6c274;
  border-radius: 2px;
  color: #1a1305;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-height: 3.1rem;
  text-transform: uppercase;
  width: 100%;
}
.execute-command span::before { content: "◢  "; }
.execute-command span::after { content: "  ◣"; }
.execute-command:disabled { filter: grayscale(0.8); opacity: 0.45; }

.weather-panel { border-top: 1px solid #4a3f22 !important; padding: 1rem 0.25rem !important; }
.weather-panel .eyebrow::before { content: "Enclosure climate · "; }
.weather-panel .eyebrow { color: var(--olive-light); }
.weather-panel h2 { font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; }
.weather-readout { float: right; margin-top: -3rem; }
.weather-readout strong { font-size: 1.75rem; }
.weather-readout span { display: none; }
.earn-panel { border-top: 1px solid #4a3f22 !important; padding: 1rem 0.25rem !important; }
.earn-panel .eyebrow { color: var(--accent); }
.earn-panel h2 { font-size: 0.95rem; text-transform: uppercase; }
.earn-action-list { border-top: 1px solid var(--line); }
.earn-action-list > * { min-height: 2.8rem; }

@media (max-width: 1380px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 25rem; }
}
@media (max-width: 1100px) {
  .portal-frame { grid-template-columns: 14rem minmax(0, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .right-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-action-panel { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .portal-frame { grid-template-columns: 1fr; }
  .content { padding-inline: 1rem; }
  .page-title { margin-inline: -1rem; padding-inline: 1rem; }
  .specimen-strip { grid-template-columns: 1fr auto; gap: 0.35rem; }
  .specimen-strip > span:nth-of-type(2) { margin: 0; }
  .specimen-strip > a { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 680px) {
  .account-strip { right: 0.75rem; }
  .page-title { min-height: 5.4rem; }
  .telemetry-state { display: none; }
  .specimen-strip { grid-template-columns: 1fr; }
  .specimen-strip > a { grid-column: 1; grid-row: auto; justify-self: start; }
  .dino-hero { min-height: 18rem; }
  .prime-task-list { grid-template-columns: 1fr; }
  .prime-task:nth-child(3n + 2),
  .prime-task:nth-child(3n + 3) { border-left: 0; }
  .right-stack { grid-template-columns: 1fr; }
}


@media (max-width: 760px) {
  .skin-creator-header .skin-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skin-stage-toolbar { align-items: start; flex-direction: column; }
  .skin-stage-actions { width: 100%; }
  .skin-stage-actions button { flex: 1; justify-content: center; }
  .skin-model-viewport { min-height: 22rem; }
  .skin-model-preview canvas { height: 22rem; }
  .skin-stage-metrics { grid-template-columns: 1fr; }
  .skin-stage-metrics > div { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 6rem minmax(0, 1fr); }
  .skin-stage-metrics > div:first-child { border-top: 0; }
  .skin-stage-metrics dd { text-align: right; }
  .skin-preset-row { align-items: stretch; flex-direction: column; }
  .skin-preset-row > div:last-child { justify-items: start; text-align: left; }
  .skin-preset-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}
.group-map.is-calibrating,
.group-map.is-calibrating .leaflet-grab {
  cursor: crosshair;
}

.map-calibration-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line, #294238);
  border-top: 0;
  background: #0b1711;
}

.map-calibration-panel[hidden] {
  display: none;
}

.map-calibration-panel p {
  margin: 4px 0 0;
  color: var(--muted, #a9bbb2);
  max-width: 72ch;
}

.map-calibration-actions {
  display: flex;
  gap: 8px;
}

.map-calibration-panel pre {
  grid-column: 1 / -1;
  max-height: 220px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line, #294238);
  background: #07100c;
  color: #d8e7df;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .map-calibration-panel {
    grid-template-columns: 1fr;
  }

  .map-calibration-actions {
    justify-content: flex-start;
  }
}
.telemetry-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-width: 1px 0 0 1px;
}

.telemetry-metric-grid > div {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-width: 0 1px 1px 0;
}

.telemetry-metric-grid span {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .telemetry-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Moderation log workspace */
.mod-log-dashboard {
  display: grid;
  gap: 0;
  overflow: visible;
  padding: 0;
}

.mod-log-heading {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.1rem 0.85rem;
}

.mod-log-heading h3 { margin: 0.15rem 0 0.2rem; }
.mod-log-heading p { color: var(--text-muted); font-size: 0.72rem; margin: 0; }
.mod-log-live-state { align-items: center; color: var(--text-muted); display: inline-flex; flex: 0 0 auto; font-size: 0.68rem; gap: 0.4rem; }
.mod-log-live-state svg { color: var(--green); height: 0.9rem; width: 0.9rem; }

.mod-log-tabs {
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0;
  padding: 0 1.1rem;
}

.mod-log-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.75rem 0.9rem;
}

.mod-log-tabs button:hover { color: var(--text); }
.mod-log-tabs button.is-active { border-bottom-color: var(--accent); color: var(--text); }

.mod-log-filters {
  align-items: end;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(13rem, 1.5fr) repeat(4, minmax(9rem, 1fr)) auto;
  padding: 0.9rem 1.1rem 0.65rem;
}

.mod-log-filters label { min-width: 0; }
.mod-log-filters label > span { color: var(--text-muted); display: block; font-size: 0.62rem; margin-bottom: 0.3rem; text-transform: uppercase; }
.mod-log-filters input,
.mod-log-filters select { min-height: 2.35rem; width: 100%; }
.mod-log-filters .primary-tool { min-height: 2.35rem; white-space: nowrap; }
.mod-log-audit-filter { grid-column: span 2; }
.mod-log-help { border-bottom: 1px solid var(--border); margin: 0; padding: 0 1.1rem 0.85rem; }
.mod-log-results { min-height: 10rem; padding: 1rem 1.1rem 1.1rem; }

.mod-log-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
}

.mod-log-summary > div { display: grid; gap: 0.25rem; padding: 0.65rem 0.8rem; }
.mod-log-summary > div + div { border-left: 1px solid var(--border); }
.mod-log-summary span { color: var(--text-muted); font-size: 0.62rem; text-transform: uppercase; }
.mod-log-summary strong { font-size: 1rem; }

.gameplay-log-list { border: 1px solid var(--border); }
.gameplay-log-event {
  align-items: start;
  background: rgba(5, 16, 11, 0.38);
  border-left: 3px solid var(--border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  padding: 0.75rem 0.85rem;
}

.gameplay-log-event + .gameplay-log-event { border-top: 1px solid var(--border); }
.gameplay-log-event.category-combat { border-left-color: #d86a6a; }
.gameplay-log-event.category-chat { border-left-color: #67aeda; }
.gameplay-log-event.category-group { border-left-color: #8abf74; }
.gameplay-log-event.category-staff { border-left-color: var(--accent); }
.gameplay-log-icon { align-items: center; background: var(--surface-raised); border: 1px solid var(--border); display: flex; height: 1.8rem; justify-content: center; width: 1.8rem; }
.gameplay-log-icon svg { height: 0.9rem; width: 0.9rem; }
.gameplay-log-main { min-width: 0; }
.gameplay-log-title { align-items: baseline; display: flex; gap: 0.75rem; justify-content: space-between; }
.gameplay-log-title strong { font-size: 0.76rem; overflow-wrap: anywhere; }
.gameplay-log-title time { color: var(--text-muted); flex: 0 0 auto; font-size: 0.62rem; }
.gameplay-log-identities { color: var(--text-muted); display: flex; flex-wrap: wrap; font-size: 0.64rem; gap: 0.4rem 1rem; margin-top: 0.3rem; }
.gameplay-log-identities span { align-items: baseline; display: inline-flex; gap: 0.35rem; }
.gameplay-log-identities b { color: var(--text); font-weight: 600; }
.gameplay-log-identities code { color: var(--text-muted); font-size: 0.6rem; overflow-wrap: anywhere; }
.gameplay-log-meta { align-items: end; display: grid; gap: 0.35rem; justify-items: end; }
.log-category,
.log-attribution { border: 1px solid var(--border); color: var(--text-muted); font-size: 0.58rem; padding: 0.2rem 0.35rem; text-transform: uppercase; }
.log-attribution.is-verified { border-color: rgba(74, 201, 142, 0.5); color: var(--green); }
.log-attribution.is-inferred { border-color: rgba(229, 179, 63, 0.5); color: var(--accent); }
.gameplay-log-details { margin-top: 0.45rem; }
.gameplay-log-details summary { color: var(--text-muted); cursor: pointer; font-size: 0.64rem; width: max-content; }
.gameplay-log-detail-grid { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0.55rem 0 0.35rem; border: 1px solid var(--border); }
.gameplay-log-detail-grid > div { display: grid; gap: 0.15rem; min-width: 0; padding: 0.5rem; }
.gameplay-log-detail-grid dt { color: var(--text-muted); font-size: 0.56rem; text-transform: uppercase; }
.gameplay-log-detail-grid dd { font-size: 0.65rem; margin: 0; overflow-wrap: anywhere; }
.gameplay-log-event-id { color: var(--text-muted); font-size: 0.56rem; overflow-wrap: anywhere; }
.mod-log-more { display: block; margin: 0.85rem auto 0; }
.mod-log-end { margin: 0.85rem 0 0; text-align: center; }
.mod-log-results .case-list { margin: 0; }

@media (max-width: 1240px) {
  .mod-log-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mod-log-filters .player-picker { grid-column: span 2; }
}

@media (max-width: 760px) {
  .mod-log-heading { display: grid; }
  .mod-log-filters { grid-template-columns: 1fr; }
  .mod-log-filters .player-picker,
  .mod-log-audit-filter { grid-column: 1; }
  .mod-log-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-log-summary > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .mod-log-summary > div:nth-child(4) { border-top: 1px solid var(--border); }
  .gameplay-log-event { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .gameplay-log-meta { grid-column: 2; grid-row: 2; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .gameplay-log-title { align-items: start; display: grid; gap: 0.25rem; }
  .gameplay-log-detail-grid { grid-template-columns: 1fr; }
}

/* Terminal visual system: presentation only; production actions and data stay unchanged. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/portal/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/portal/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/portal/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/portal/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/portal/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/portal/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(124, 138, 82, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 138, 82, 0.018) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--text);
}

button,
input,
select,
textarea { font-family: inherit; }

.portal-frame { grid-template-columns: 15rem minmax(0, 1fr); }
.side-feed {
  background: var(--sidebar);
  border-right-color: var(--line);
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.2);
  padding: 1rem 0.85rem;
}
.brand {
  border-bottom: 1px solid var(--line);
  margin: 0 -0.85rem 0.85rem;
  min-height: 4.2rem;
  padding: 0 1rem 0.9rem;
}
.brand-mark { border-radius: 2px; height: 2.35rem; width: 2.35rem; }
.brand-copy strong,
.page-title h1,
.panel h2,
.dino-name strong,
.prime-checklist-head strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.brand-copy strong {
  color: var(--accent);
  font-size: 0.86rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.brand-copy small {
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.online-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  margin: 0 -0.85rem 0.6rem;
  padding: 0.7rem 1rem 0.9rem;
}
.online-card span { background: #7c8a52; }
.side-nav { gap: 0.16rem; }
.side-nav a {
  border: 1px solid transparent;
  border-radius: 2px;
  color: #8a938f;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  min-height: 2.35rem;
  padding: 0.58rem 0.68rem;
}
.side-nav a:hover { background: #141817; border-color: var(--line); color: var(--text); }
.side-nav a.active {
  background: linear-gradient(90deg, rgba(240, 166, 56, 0.14), rgba(240, 166, 56, 0.025));
  border-color: rgba(240, 166, 56, 0.2);
  border-left: 2px solid var(--accent);
  color: #f2f4f1;
  box-shadow: inset 0 0 18px rgba(240, 166, 56, 0.035);
}
.side-credit,
.side-account { border-color: var(--line); }
.side-account { background: #141817; border-radius: 2px; }

.topbar {
  background: rgba(11, 13, 13, 0.9);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  min-height: 4.25rem;
  padding: 0.75rem 1.8rem;
}
.server-heading strong,
.server-availability,
.account-strip {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.server-heading strong { letter-spacing: 0.08em; text-transform: uppercase; }
.content { max-width: 110rem; padding: 1.3rem 1.8rem 2.5rem; }
.page-title { min-height: 4.6rem; }
.page-title h1 {
  font-size: 1.55rem;
  letter-spacing: 0.13em;
  text-shadow: 0 0 12px rgba(240, 166, 56, 0.18);
  text-transform: uppercase;
}
.page-title p { font-size: 0.76rem; }
.telemetry-state { background: #14181a; border-radius: 2px; font-family: "IBM Plex Mono", ui-monospace, monospace; }

.terminal-overview { display: grid; gap: 1rem; }
.dashboard-grid { gap: 1.15rem; grid-template-columns: minmax(0, 1fr) 25rem; }
.panel,
.console-card {
  background: linear-gradient(180deg, #1a201f, #151a19);
  border-color: #333d3c;
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(223, 227, 224, 0.045);
}
.terminal-device,
.live-action-panel { position: relative; }
.terminal-device::before,
.terminal-device::after,
.live-action-panel::before,
.live-action-panel::after {
  content: "";
  height: 9px;
  pointer-events: none;
  position: absolute;
  width: 9px;
  z-index: 8;
}
.terminal-device::before,
.live-action-panel::before { border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); left: -1px; top: -1px; }
.terminal-device::after,
.live-action-panel::after { border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); bottom: -1px; right: -1px; }

.console-top {
  background: #141817;
  color: #6b7570;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  min-height: 2.85rem;
  padding: 0.78rem 1.1rem;
  text-transform: uppercase;
}
.console-top .player-presence { align-items: center; display: inline-flex; gap: 0.42rem; }
.console-top .player-presence::before { background: currentColor; box-shadow: 0 0 8px currentColor; content: ""; height: 0.36rem; width: 0.36rem; }
.console-top .player-presence.online { color: #9fb08a; }
.console-top .console-captured { margin-left: auto; }
.dino-hero { min-height: 24rem; }
.dino-hero::after {
  background:
    linear-gradient(90deg, rgba(7, 9, 8, 0.93) 0%, rgba(7, 9, 8, 0.54) 33%, rgba(7, 9, 8, 0.14) 72%),
    linear-gradient(0deg, rgba(7, 9, 8, 0.65), transparent 42%);
}
.dino-hero::before {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.09) 3px 4px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}
.terminal-feed-label {
  align-items: center;
  color: #8a938f;
  display: flex;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  gap: 0.42rem;
  left: 1.1rem;
  letter-spacing: 0.12em;
  position: absolute;
  text-transform: uppercase;
  top: 1rem;
  z-index: 6;
}
.terminal-feed-label i { background: var(--danger); box-shadow: 0 0 8px rgba(224, 100, 46, 0.65); height: 0.38rem; width: 0.38rem; }
.live-dino-model-stage { bottom: 4%; left: 34%; right: 3%; top: 2%; z-index: 3; }
.dino-name { bottom: 1.6rem; left: 1.55rem; }
.dino-name span,
.growth-readout span,
.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.dino-name span { color: var(--accent); }
.dino-name strong { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: 0.03em; text-transform: uppercase; }
.growth-readout { bottom: 1.55rem; right: 1.55rem; }
.growth-readout strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 2rem; }

.metrics { background: #141817; }
.metric { gap: 0.48rem; padding: 0.84rem 1rem; }
.metric > span,
.metric strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.metric-line { background: #242b2a; height: 0.3rem; }
.metric.health .metric-line span { background: #b0483a; }
.metric.stamina .metric-line span { background: #7c8a52; }
.metric.hunger .metric-line span { background: #d98b28; }
.metric.thirst .metric-line span { background: #4a9fb0; }
.metric.growth .metric-line span { background: var(--accent); }

.prime-checklist {
  background: transparent;
  border-top-color: var(--line);
  gap: 0.9rem;
  padding: 1.25rem 0.25rem 0.2rem;
}
.prime-checklist-head { padding: 0 0.2rem; }
.prime-checklist-head .eyebrow { font-size: 0.68rem; }
.prime-checklist-head > div > strong { font-size: 0.8rem; }
.prime-overall-progress { background: #242b2a; }
.prime-task-list { gap: 0; grid-template-columns: 1fr; }
.prime-task {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid #1e2425;
}
.prime-task.pending,
.prime-task.complete { border-color: #1e2425; }
.prime-task > summary {
  align-items: center;
  grid-template-columns: 2rem minmax(0, 1fr) auto 0.9rem;
  grid-template-rows: auto;
  min-height: 3.8rem;
  padding: 0.55rem 0.2rem;
}
.prime-task-state { border-radius: 2px; grid-row: 1; height: 2rem; width: 2rem; }
.prime-task-state > svg:first-child { height: 1.05rem; width: 1.05rem; }
.prime-task-title { display: flex; gap: 0.4rem; align-items: baseline; }
.prime-task-title strong { font-size: 0.72rem; }
.prime-task > summary > b { align-self: center; grid-column: 3; grid-row: 1; }
.prime-task-chevron { grid-column: 4; grid-row: 1; }
.prime-task-detail { background: rgba(20, 24, 26, 0.72); }

.live-action-panel { padding: 1rem 1.2rem 1.15rem; }
.live-action-panel h2 { font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }
.live-action-list { border-top-color: var(--line); }
.live-action { min-height: 4.15rem; padding: 0.7rem 0.2rem; }
.live-action strong,
.live-action-group label,
.live-action-group select {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.live-action.primary {
  background: linear-gradient(180deg, #f4b24c, #d98b28);
  border: 1px solid #f6c274;
  color: #1a1305;
  grid-template-columns: 1.15rem minmax(0, 1fr) 0.9rem;
  margin: 0.75rem 0;
  padding: 0.65rem 0.8rem;
}
.live-action.primary strong,
.live-action.primary small,
.live-action.primary > svg:first-child,
.live-action.primary > svg:last-child { color: #1a1305; }
.live-action.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f6c274, #e99d31); box-shadow: 0 0 18px rgba(240, 166, 56, 0.24); }
.right-stack .panel:not(.live-action-panel) { background: transparent; border-left: 0; border-right: 0; box-shadow: none; }

@media (max-width: 1180px) {
  .portal-frame { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 21rem; }
  .dino-hero { min-height: 21rem; }
}

@media (max-width: 980px) {
  .portal-frame { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .right-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-action-panel { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .content { padding: 1rem 0.75rem 2rem; }
  .topbar { padding-inline: 0.75rem; }
  .page-title h1 { font-size: 1.12rem; }
  .dashboard-grid { gap: 0.75rem; }
  .dino-hero { min-height: 18rem; }
  .live-dino-model-stage { left: 22%; right: 0; }
  .dino-name strong { font-size: 1.45rem; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { border-bottom: 1px solid var(--line); }
  .metric:nth-child(odd) { border-left: 0; }
  .metric:last-child { grid-column: 1 / -1; }
  .console-top .console-uid { display: none; }
  .console-top .console-captured { margin-left: 0; }
  .right-stack { grid-template-columns: 1fr; }
  .live-action-panel { grid-column: auto; }
  .prime-task-title { align-items: start; display: grid; gap: 0.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  .prime-overall-progress > span,
  .prime-task-chevron,
  .live-action > svg:last-child { transition: none; }
  .dino-hero::before { display: none; }
}

/* Final handoff alignment. Keep this last so legacy portal rules cannot override it. */
@media (min-width: 981px) {
  .portal-frame { grid-template-columns: 17.75rem minmax(0, 1fr); }
  .side-feed { padding: 0; }
  .brand {
    border-bottom: 1px solid var(--line);
    margin: 0;
    min-height: 7.2rem;
    padding: 1.35rem 1.25rem;
  }
  .brand-mark { background: transparent; border: 0; height: 2.55rem; width: 2.55rem; }
  .brand-copy strong { font-size: 1rem; }
  .terminal-clearance { min-height: 2.65rem; padding-inline: 1.15rem; }
  .online-card { margin: 0; min-height: 3.2rem; padding: 0 1.15rem; }
  .side-nav { gap: 0; padding: 0 0.45rem; }
  .side-nav a {
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    display: grid;
    grid-template-columns: 1.35rem 0 1fr auto;
    min-height: 2.55rem;
    padding: 0.62rem 0.85rem;
  }
  .side-nav a.active { border-left-color: var(--accent); }
  .side-credit {
    border-top: 1px solid var(--line);
    margin: auto 0 0;
    padding: 0.8rem 0.8rem 0;
  }
  .side-utility-links { display: grid; gap: 0.45rem; }
  .side-utility-links a,
  .side-utility-links button {
    align-items: center;
    border: 1px dashed #313937;
    border-radius: 2px;
    color: var(--olive-light);
    display: flex;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.61rem;
    gap: 0.55rem;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.5rem;
    text-transform: uppercase;
    width: 100%;
  }
  .side-utility-links a { display: none; }
  .side-wallet { display: grid; gap: 0.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.7rem; }
  .side-wallet > span {
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 0.55rem 0.6rem;
  }
  .side-wallet svg { color: var(--accent); grid-row: 1 / 3; height: 0.8rem; margin-right: 0.45rem; width: 0.8rem; }
  .side-wallet small { color: var(--subtle); font: 0.5rem "IBM Plex Mono", ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  .side-wallet strong { color: var(--accent); font: 700 0.72rem "IBM Plex Mono", ui-monospace, monospace; }
  .side-account { margin: 0.55rem 0.8rem 0.85rem; }

  .topbar {
    background: transparent;
    border: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    position: relative;
    z-index: 30;
  }
  .server-heading { display: none; }
  .account-strip { position: absolute; right: 2.25rem; top: 1.25rem; }
  .account-strip > span { display: none; }
  .topbar-profile { display: none; }
  .content { max-width: none; padding: 0 2.25rem 2rem; }
  .page-title {
    align-items: center;
    border-bottom: 1px solid var(--line);
    margin: 0 -2.25rem 1.35rem;
    min-height: 6.35rem;
    padding: 1.05rem 2.25rem;
  }
  .page-title p { display: none; }
  .page-title h1 { font-size: 1.72rem; }
  .telemetry-state { margin-right: 3.2rem; }

  .terminal-overview { gap: 1rem; }
  .specimen-strip { min-height: 4.25rem; padding: 0.7rem 1.1rem; }
  .dashboard-grid { gap: 1.25rem; grid-template-columns: minmax(0, 1fr) 25rem; }
  .specimen-workspace { gap: 1rem; }
  .console-top { display: none; }
  .dino-hero { min-height: 17rem; }
  .dino-name { bottom: 1.15rem; }
  .dino-name strong { font-size: clamp(1.55rem, 2.4vw, 2.15rem); }
  .growth-readout { bottom: 0.95rem; height: 4.65rem; right: 1.2rem; width: 4.65rem; }
  .growth-readout strong { font-size: 1.35rem; }
  .metric { padding: 0.65rem 0.9rem; }
  .terminal-overview .group-status { display: none; }

  .prime-checklist { gap: 0.4rem; padding: 0.45rem 0.25rem 0; }
  .prime-checklist-head { border-bottom: 1px dashed #303735; min-height: 2.25rem; padding: 0 0.2rem; }
  .prime-checklist-head > div > strong,
  .prime-checklist-head small,
  .prime-overall-progress { display: none; }
  .prime-task-list { gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prime-task { border: 0; border-top: 1px solid #202625; }
  .prime-task:nth-child(3n + 2),
  .prime-task:nth-child(3n + 3) { border-left: 1px solid #202625; }
  .prime-task > summary {
    grid-template-columns: 1.55rem minmax(0, 1fr) auto;
    grid-template-rows: auto;
    min-height: 2.55rem;
    padding: 0.38rem 0.5rem;
  }
  .prime-task-state { height: 1.1rem; width: 1.1rem; }
  .prime-task-state > svg:first-child { display: none; }
  .prime-task-state::before { border: 1px solid #46504d; content: ""; height: 0.8rem; width: 0.8rem; }
  .prime-task.complete .prime-task-state::before { background: var(--olive); box-shadow: 0 0 8px rgba(124, 138, 82, 0.55); }
  .prime-task-title { display: block; }
  .prime-task-title small,
  .prime-task-chevron,
  .prime-task-result { display: none; }
  .prime-task-title strong { font-size: 0.62rem; }
  .prime-task > summary > b { color: var(--muted); font-size: 0.56rem; grid-column: 3; grid-row: 1; }
  .prime-task-detail { grid-column: 1 / -1; }

  .right-stack { gap: 1rem; }
  .live-action-panel { padding: 1rem 1.15rem 1.05rem; }
  .action-command-grid { gap: 0.38rem; }
  .command-option { min-height: 2.55rem; }
  .command-description { margin: 0.7rem 0; }
  .execute-command { min-height: 2.65rem; }
  .weather-panel,
  .earn-panel { padding: 0.9rem 0.2rem !important; }
  .earn-action-list > * { min-height: 2.35rem; }
}

@media (min-width: 981px) and (max-width: 1380px) {
  .portal-frame { grid-template-columns: 15rem minmax(0, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 22rem; }
}

/* Terminal garage vault */
#garage.panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

#garage .panel-heading {
  align-items: center;
  background: linear-gradient(90deg, rgba(124, 138, 82, 0.08), rgba(20, 24, 23, 0.82));
  border: 1px solid var(--line);
  display: flex;
  min-height: 4.5rem;
  padding: 0.85rem 1rem;
}

#garage .panel-heading h2 {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin: 0.12rem 0 0;
  text-transform: uppercase;
}

#garage .panel-count {
  border-color: rgba(124, 138, 82, 0.5);
  color: var(--olive-light);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  margin-left: auto;
}

#garage .garage-capacity-summary {
  background: #101413;
  border: 1px solid var(--line);
  border-top: 0;
  margin: 0;
  min-height: 2.7rem;
  padding: 0.55rem 0.8rem;
}

#garage .garage-capacity-summary strong,
#garage .garage-capacity-summary small {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

#garage .garage-species-browser {
  gap: 0.75rem;
  margin-top: 1rem;
}

#garage .garage-species-group {
  background: rgba(14, 18, 17, 0.78);
  border-color: #303837;
  border-radius: 2px;
}

#garage .garage-species-group > summary {
  background: linear-gradient(90deg, rgba(240, 166, 56, 0.045), transparent 55%);
  min-height: 2.8rem;
  padding: 0.55rem 0.75rem;
}

#garage .garage-species-group > summary strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#garage .garage-species-group > summary small { display: none; }
#garage .species-count { font-family: "IBM Plex Mono", ui-monospace, monospace; }
#garage .garage-species-entries {
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.8rem;
}

#garage .species-entry-heading {
  border-bottom: 1px dashed #303735;
  grid-column: 1 / -1;
  padding: 0 0 0.55rem;
}

#garage .garage-item,
#garage .garage-species-entries .garage-item:first-of-type {
  align-content: space-between;
  background:
    linear-gradient(rgba(124, 138, 82, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 138, 82, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, #181d1c, #121615);
  background-size: 22px 22px, 22px 22px, auto;
  border: 1px solid #343d3b;
  border-radius: 2px;
  display: grid;
  gap: 0.75rem;
  min-height: 16rem;
  padding: 0.9rem;
  position: relative;
}

#garage .garage-item::before,
#garage .garage-item::after {
  content: "";
  height: 7px;
  pointer-events: none;
  position: absolute;
  width: 7px;
}

#garage .garage-item::before {
  border-left: 1px solid var(--accent);
  border-top: 1px solid var(--accent);
  left: -1px;
  top: -1px;
}

#garage .garage-item::after {
  border-bottom: 1px solid var(--accent);
  bottom: -1px;
  right: -1px;
}

#garage .garage-item > div:first-child { display: grid; gap: 0.45rem; }
#garage .garage-item > div > strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#garage .garage-item > div > small { color: var(--muted); font-size: 0.65rem; }
#garage .garage-vitals {
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.25rem;
}

#garage .garage-vitals > span { min-width: 0; padding: 0.45rem 0.5rem; }
#garage .garage-vitals > span:nth-child(even) { border-left: 1px solid var(--line); }
#garage .garage-vitals > span:nth-child(n + 3) { border-top: 1px solid var(--line); }
#garage .garage-vitals small { font: 0.54rem "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; }
#garage .garage-vitals strong { font: 700 0.72rem "IBM Plex Mono", ui-monospace, monospace; }

#garage .retrieval-guidance {
  background: rgba(124, 138, 82, 0.055);
  border-left: 2px solid var(--olive);
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
}

#garage .retrieval-guidance.blocked { border-left-color: var(--danger); }
#garage .retrieval-guidance strong { font: 600 0.61rem "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; }
#garage .retrieval-guidance span { color: var(--muted); font-size: 0.61rem; line-height: 1.45; }
#garage .garage-dossier { border-top: 1px solid var(--line); padding-top: 0.45rem; }
#garage .garage-dossier > summary { color: var(--muted); font: 0.6rem "IBM Plex Mono", ui-monospace, monospace; }
#garage .garage-actions { display: grid; gap: 0.4rem; grid-template-columns: 1fr 0.8fr 0.8fr; }
#garage .garage-actions button {
  border-radius: 2px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  min-height: 2.35rem;
  text-transform: uppercase;
}
#garage .garage-actions button:first-child {
  background: linear-gradient(180deg, #f4b24c, #d98b28);
  border-color: #f6c274;
  color: #1a1305;
}
#garage .garage-history { margin-top: 0.8rem; }

@media (max-width: 1280px) {
  #garage .garage-species-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #garage .garage-capacity-summary { align-items: start; display: grid; }
  #garage .garage-species-entries { grid-template-columns: 1fr; padding: 0.55rem; }
  #garage .garage-actions { grid-template-columns: 1fr; }
}

/* Terminal requisition catalogue */
#store.store-workspace { gap: 0.9rem; }
#store .store-heading {
  align-items: center;
  background: linear-gradient(90deg, rgba(124, 138, 82, 0.07), rgba(15, 19, 18, 0.78));
  border: 1px solid var(--line);
  min-height: 4.2rem;
  padding: 0.75rem 0.9rem;
}
#store .store-heading h2 {
  font: 700 0.95rem "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#store .store-heading p:not(.eyebrow) { font-size: 0.66rem; }
#store .store-access-strip {
  align-items: center;
  background: rgba(124, 138, 82, 0.055);
  border: 1px solid var(--line);
  color: var(--olive-light);
  display: flex;
  font: 0.58rem "IBM Plex Mono", ui-monospace, monospace;
  justify-content: space-between;
  min-height: 2.45rem;
  padding: 0.5rem 0.7rem;
  text-transform: uppercase;
}
#store .store-access-strip span { align-items: center; display: inline-flex; gap: 0.4rem; }
#store .store-access-strip svg { height: 0.8rem; width: 0.8rem; }
#store .store-category { gap: 0.55rem; }
#store .store-category-heading {
  align-items: baseline;
  border-bottom: 1px dashed #303735;
  display: flex;
  min-height: 2rem;
  padding: 0.35rem 0.2rem;
}
#store .store-category-heading h3 {
  color: var(--accent);
  font: 700 0.7rem "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#store .store-category-heading p { display: inline; font-size: 0.6rem; margin-left: 0.7rem; }
#store .store-grid { gap: 0.65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#store .store-card {
  background:
    linear-gradient(rgba(124, 138, 82, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 138, 82, 0.025) 1px, transparent 1px),
    #151a19;
  background-size: 20px 20px;
  border-color: #343d3b;
  border-radius: 2px;
  display: grid;
  grid-template-rows: 6.1rem 1fr;
  min-height: 16.5rem;
  overflow: hidden;
  position: relative;
}
#store .store-card-media {
  aspect-ratio: auto;
  background: linear-gradient(180deg, rgba(5, 9, 8, 0.08), rgba(5, 9, 8, 0.72)), url('/portal/assets/sunny-isle-jungle.jpg') center/cover;
  min-height: 0;
  padding: 0.65rem 0.75rem;
}
#store .store-card-media span {
  font: 700 0.78rem "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#store .store-card-media small { font-size: 0.56rem; }
#store .store-card-body { align-content: start; gap: 0.42rem; padding: 0.65rem 0.75rem; }
#store .store-card-body h3 {
  font: 700 0.74rem "IBM Plex Mono", ui-monospace, monospace;
  line-height: 1.25;
  text-transform: uppercase;
}
#store .store-card-body p { font-size: 0.6rem; line-height: 1.35; }
#store .store-card-details { min-height: 0; }
#store .store-delivery { display: none; }
#store .status-chip { font-size: 0.5rem; }
#store .store-card-footer { align-items: end; margin-top: auto; padding-top: 0.55rem; }
#store .store-card-footer strong { font: 700 0.92rem "IBM Plex Mono", ui-monospace, monospace; }
#store .store-card-footer button {
  background: linear-gradient(180deg, #f4b24c, #d98b28);
  border-color: #f6c274;
  border-radius: 2px;
  color: #1a1305;
  font: 700 0.58rem "IBM Plex Mono", ui-monospace, monospace;
  min-height: 2rem;
  min-width: 5.25rem;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  #store .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #store .store-access-strip { align-items: start; display: grid; gap: 0.35rem; }
  #store .store-grid { grid-template-columns: 1fr; }
  #store .store-category-heading p { display: none; }
}

/* Terminal CRT finish. All layers are decorative and ignore pointer input. */
.app-shell::before,
.app-shell::after,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.app-shell::before {
  z-index: 60;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.app-shell::after {
  z-index: 61;
  opacity: 0.3;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
  animation: tm-scan 6s linear infinite;
}
body::after {
  z-index: 62;
  box-shadow: inset 0 0 140px 24px rgba(0, 0, 0, 0.55);
}
.page-title h1 { text-shadow: 0 0 12px rgba(240, 166, 56, 0.22); }
.brand-mark img { animation: tm-logoflick 7s infinite; }
.brand-copy strong { animation: tm-neon 7s infinite; }
.dino-hero::before { animation: tm-flick 5s infinite; }
.metrics .metric-line span {
  transform-origin: left center;
  animation: tm-fill 0.8s ease-out both;
}
.growth-readout { animation: tm-ringin 0.8s ease-out both; }
.main-area { position: relative; }
.main-area::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(240, 166, 56, 0.55), transparent);
}
.main-area[data-sweep="a"]::after { animation: tm-sweep 0.5s ease-out; }
.main-area[data-sweep="b"]::after { animation: tm-sweep2 0.5s ease-out; }
@keyframes tm-scan { from { transform: translateY(0); } to { transform: translateY(3px); } }
@keyframes tm-logoflick { 0%, 90%, 100% { opacity: 1; filter: none; } 92% { opacity: .7; } 94% { opacity: 1; } 96% { opacity: .82; } 97% { opacity: 1; } }
@keyframes tm-neon { 0%, 89%, 100% { opacity: 1; } 91% { opacity: .72; } 93% { opacity: 1; } 95% { opacity: .88; } 96% { opacity: 1; } }
@keyframes tm-flick { 0%, 95%, 100% { opacity: 1; } 96% { opacity: .5; } 97.5% { opacity: .85; } 99% { opacity: .62; } }
@keyframes tm-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tm-ringin { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes tm-sweep { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(100vh); } }
@keyframes tm-sweep2 { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(100vh); } }

@media (prefers-reduced-motion: reduce) {
  .app-shell::after,
  .brand-mark img,
  .brand-copy strong,
  .dino-hero::before,
  .metrics .metric-line span,
  .growth-readout,
  .main-area::after { animation: none !important; }
}

/* Production alignment with the approved terminal reference. */
.main-area {
  background-color: #090c0b;
  background-image:
    linear-gradient(180deg, rgba(7, 9, 8, 0.76), rgba(7, 9, 8, 0.94)),
    url("/portal/assets/sunny-isle-jungle.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

body::after {
  box-shadow: inset 0 0 160px 36px rgba(0, 0, 0, 0.68);
}

.dino-hero::after {
  background:
    linear-gradient(var(--accent), var(--accent)) left 1rem top 1rem / 1.2rem 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 1rem top 1rem / 1px 1.2rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 1rem top 1rem / 1.2rem 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 1rem top 1rem / 1px 1.2rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 1rem bottom 1rem / 1.2rem 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 1rem bottom 1rem / 1px 1.2rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 1rem bottom 1rem / 1.2rem 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 1rem bottom 1rem / 1px 1.2rem no-repeat,
    linear-gradient(90deg, rgba(7, 9, 8, 0.93) 0%, rgba(7, 9, 8, 0.54) 33%, rgba(7, 9, 8, 0.14) 72%),
    linear-gradient(0deg, rgba(7, 9, 8, 0.65), transparent 42%);
}

.metric-line { height: 0.48rem; }
.metric-line span {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 6px, rgba(0, 0, 0, 0.18) 6px 8px);
}
.metric.health .metric-line span { box-shadow: 0 0 10px rgba(176, 72, 58, 0.5); }
.metric.stamina .metric-line span { box-shadow: 0 0 10px rgba(124, 138, 82, 0.5); }
.metric.hunger .metric-line span { box-shadow: 0 0 10px rgba(217, 139, 40, 0.5); }
.metric.thirst .metric-line span { box-shadow: 0 0 10px rgba(74, 159, 176, 0.5); }
.metric.growth .metric-line span { box-shadow: 0 0 10px rgba(240, 166, 56, 0.5); }

/* Live specimen telemetry: the growth ring is the single growth readout. */
.specimen-workspace .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.specimen-workspace .metric-line {
  background: #1b2220;
  box-shadow: inset 0 0 0 1px rgba(151, 168, 157, 0.12);
  height: 0.56rem;
  overflow: hidden;
}
.specimen-workspace .metric-line span {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 7px, rgba(2, 5, 4, 0.78) 7px 9px);
}
.live-dino-model-stage { bottom: 0; left: 29%; right: 2%; top: 9%; }

.wallet-ledger { border-top: 1px solid var(--line); margin-top: 0.75rem; padding-top: 0.75rem; }
.wallet-ledger-heading,
.wallet-ledger-row { align-items: center; display: grid; gap: 0.65rem; }
.wallet-ledger-heading { grid-template-columns: 1fr auto; margin-bottom: 0.4rem; }
.wallet-ledger-heading span { color: var(--accent); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase; }
.wallet-ledger-heading small { color: var(--subtle); font-size: 0.6rem; }
.wallet-ledger-row { border-top: 1px solid rgba(91, 104, 99, 0.22); grid-template-columns: 3.2rem minmax(0, 1fr) auto; min-height: 2.15rem; }
.wallet-ledger-row time { color: var(--subtle); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.6rem; }
.wallet-ledger-row span { color: var(--muted); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-ledger-row strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.68rem; }
.wallet-ledger-row strong.credit { color: #9baa5d; }
.wallet-ledger-row strong.debit { color: #d8663f; }
.wallet-ledger-empty { color: var(--subtle); font-size: 0.68rem; margin: 0.5rem 0 0; }

@media (max-width: 680px) {
  .specimen-workspace .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-dino-model-stage { left: 18%; right: 0; top: 12%; }
}

.side-feed { overflow-x: hidden; }
.command-option > svg,
.command-option small { display: none; }

.execute-command span::before { content: "\25E2  "; }
.execute-command span::after { content: "  \25E3"; }

@media (min-width: 981px) {
  .portal-frame { grid-template-columns: 15rem minmax(0, 1fr); }
  .side-nav a { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .side-nav a > b {
    color: #57605c;
    font-size: 0.61rem;
    font-weight: 500;
  }
  .side-nav a.active > b { color: var(--accent); }
}

/* Production terminal composition: measured against the approved handoff. */
html { background: #070908; }

body {
  font-size: 15px;
  line-height: 1.45;
}

body::after {
  box-shadow: inset 0 0 210px 54px rgba(0, 0, 0, 0.78);
}

.main-area {
  background-image:
    linear-gradient(180deg, rgba(6, 8, 7, 0.86), rgba(6, 8, 7, 0.965)),
    url("/portal/assets/sunny-isle-jungle.jpg");
  background-position: center top;
  background-size: cover;
}

.panel,
.console-card,
.role-panel,
.feed-item {
  backdrop-filter: blur(2px);
}

.panel > .panel-heading,
.panel > header,
.case-section-heading {
  border-bottom-color: rgba(51, 61, 60, 0.8);
}

button,
a,
input,
select,
textarea,
summary {
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

input,
select,
textarea {
  background: rgba(12, 16, 15, 0.94);
  border-color: #303837;
  border-radius: 2px;
}

input:hover,
select:hover,
textarea:hover { border-color: #4a5553; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(240, 166, 56, 0.14), 0 0 16px rgba(240, 166, 56, 0.06);
}

table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th {
  color: var(--subtle);
  font: 600 0.58rem "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

tbody tr { border-bottom: 1px solid rgba(42, 49, 51, 0.72); }
tbody tr:hover { background: rgba(240, 166, 56, 0.025); }

details > summary { cursor: pointer; }
details > summary:hover { color: var(--text); }

@media (min-width: 981px) {
  .portal-frame { grid-template-columns: 14rem minmax(0, 1fr); }

  .brand {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 0.75rem;
    margin: 0;
    min-height: 4.25rem;
    padding: 0.8rem 1rem;
  }

  .brand-mark {
    flex: 0 0 2.5rem;
    height: 2.5rem;
    width: 2.5rem;
  }

  .brand-copy { min-width: 0; }
  .brand-copy strong { font-size: 0.82rem; line-height: 1.15; }
  .brand-copy small { display: block; font-size: 0.51rem; margin-top: 0.25rem; }

  .terminal-clearance {
    font-size: 0.55rem;
    min-height: 2.1rem;
    padding: 0 1rem;
  }

  .online-card {
    grid-template-columns: auto 1fr auto auto;
    min-height: 2.75rem;
    padding: 0 1rem;
  }

  .nav-section-label {
    font-size: 0.49rem;
    padding: 0.9rem 1rem 0.32rem;
  }

  .side-nav { padding: 0 0.4rem; }
  .side-nav a {
    gap: 0;
    grid-template-columns: 1.45rem minmax(0, 1fr) auto;
    min-height: 2.12rem;
    padding: 0.42rem 0.72rem;
  }
  .side-nav a > span:not(.nav-badge) { font-size: 0.63rem; }
  .side-nav a > b { font-size: 0.56rem; }
  .nav-badge { font-size: 0.45rem; padding: 0.15rem 0.25rem; }

  .side-credit { padding: 0.6rem 0.7rem 0; }
  .side-utility-links a,
  .side-utility-links button { min-height: 2rem; }
  .side-wallet { margin-top: 0.48rem; }
  .side-wallet > span { padding: 0.42rem 0.48rem; }
  .side-account { margin: 0.45rem 0.7rem 0.7rem; min-height: 2.8rem; }

  .content { padding: 0 1.5rem 1.75rem; }
  .page-title {
    margin: 0 -1.5rem 1.05rem;
    min-height: 5.9rem;
    padding: 1rem 1.5rem;
  }
  .page-title h1 { font-size: 1.58rem; }
  .terminal-page-code { font-size: 0.58rem; margin-bottom: 0.38rem; }
  .account-strip { right: 1.5rem; top: 1rem; }
  .telemetry-state { margin-right: 2.8rem; }

  .terminal-overview { gap: 0.85rem; }
  .specimen-strip {
    min-height: 3.5rem;
    padding: 0.56rem 0.95rem;
  }
  .specimen-strip > strong { font-size: 0.76rem; }
  .specimen-strip > a { padding: 0.5rem 0.76rem; }

  .dashboard-grid {
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 21.5rem;
  }
  .specimen-workspace { gap: 0.8rem; }
  .dino-hero { height: 18rem; min-height: 18rem; }
  .terminal-feed-label { font-size: 0.54rem; top: 0.85rem; }
  .dino-name { bottom: 1rem; left: 1.25rem; }
  .dino-name strong { font-size: clamp(1.55rem, 2.5vw, 2.15rem); }
  .growth-readout { bottom: 0.85rem; height: 4.5rem; right: 1rem; width: 4.5rem; }
  .metrics .metric { min-width: 0; padding: 0.58rem 0.72rem; }
  .metric-line { height: 0.5rem; }

  .prime-checklist { padding-top: 0.25rem; }
  .prime-checklist-head { min-height: 2rem; }
  .prime-task > summary { min-height: 2.35rem; padding: 0.32rem 0.42rem; }
  .prime-task-title strong { font-size: 0.59rem; }

  .right-stack { gap: 0.85rem; }
  .live-action-panel { padding: 0.9rem 1rem 1rem; }
  .command-panel-heading { margin-bottom: 0.75rem; }
  .command-option { min-height: 2.35rem; }
  .execute-command { min-height: 3rem; }
  .weather-panel,
  .earn-panel { padding: 0.78rem 0.15rem !important; }
}

@media (min-width: 1381px) {
  .portal-frame { grid-template-columns: 15rem minmax(0, 1fr); }
  .content { padding-inline: 2rem; }
  .page-title { margin-inline: -2rem; padding-inline: 2rem; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 25rem; }
  .dino-hero { height: 20rem; min-height: 20rem; }
}

@media (max-width: 1100px) and (min-width: 981px) {
  .portal-frame { grid-template-columns: 13rem minmax(0, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 19rem; }
  .side-nav a { padding-inline: 0.55rem; }
}

@media (max-width: 980px) {
  html,
  body,
  .portal-frame { max-width: 100%; overflow-x: hidden; }

  .main-area { background-attachment: scroll; min-width: 0; }
  .side-feed {
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    display: grid;
    height: auto;
    padding: 0;
    position: static;
  }
  .brand {
    border-bottom: 1px solid var(--line);
    min-height: 4rem;
    padding: 0.72rem 0.9rem;
  }
  .brand-mark { height: 2.15rem; width: 2.15rem; }
  .brand-copy strong { font-size: 0.78rem; }
  .brand-copy small { font-size: 0.48rem; margin-top: 0.18rem; }
  .terminal-clearance {
    font-size: 0.5rem;
    min-height: 1.9rem;
    padding: 0 0.9rem;
  }
  .mobile-page-selector {
    border-top: 1px solid rgba(42, 49, 51, 0.55);
    display: grid;
    gap: 0.28rem;
    padding: 0.62rem 0.9rem 0.72rem;
  }
  .mobile-page-selector select {
    background: rgba(15, 18, 18, 0.96);
    min-height: 2.5rem;
    padding: 0.48rem 0.62rem;
  }
  .online-card,
  .side-nav,
  .side-credit,
  .side-account { display: none; }

  .topbar {
    align-items: center;
    background: rgba(10, 12, 12, 0.96);
    border-bottom: 1px solid var(--line);
    display: flex;
    height: 3.35rem;
    min-height: 3.35rem;
    padding: 0 0.75rem;
    position: relative;
  }
  .server-heading { display: none; }
  .account-strip {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    position: static;
    width: 100%;
  }
  .account-strip > span {
    border-left: 0;
    display: flex;
    min-width: 0;
    padding: 0;
  }
  .account-strip > .balance.premium { display: flex; }
  .account-strip > span svg { height: 0.78rem; width: 0.78rem; }
  .account-strip > span b { font-size: 0.66rem; }
  .account-strip > span small { display: none; }
  .topbar-profile { display: inline-flex; }
  .portal-notification-button,
  .topbar-profile { height: 2.25rem; min-height: 2.25rem; min-width: 2.25rem; width: 2.25rem; }
  .portal-announcement-bar { order: -1; }

  .page-title { min-height: 5rem; }
}

@media (max-width: 680px) {
  .content { padding-bottom: 1.25rem; }
  .specimen-strip { padding: 0.7rem; }
  .dino-hero { height: 16rem; min-height: 16rem; }
  .action-command-grid { grid-template-columns: 1fr 1fr; }
  .prime-task-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  button,
  a,
  input,
  select,
  textarea,
  summary { transition: none; }
}

/* Live sidebar telemetry and restrained terminal-brand illumination. */
.brand-mark img {
  filter: drop-shadow(0 0 0.3rem rgba(159, 177, 104, 0.35));
  animation: terminal-logo-glow 8s linear infinite;
}

.brand-copy strong {
  text-shadow:
    0 0 0.35rem rgba(240, 166, 56, 0.46),
    0 0 1.1rem rgba(240, 166, 56, 0.14);
  animation: terminal-wordmark-glow 8s linear infinite;
}

.online-card {
  align-items: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 0.42rem;
}

.online-card .server-node-indicator {
  background: #5d6662;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(93, 102, 98, 0);
  display: block;
  height: 0.42rem;
  width: 0.42rem;
}

.online-card.server-online .server-node-indicator {
  background: #65d69a;
  box-shadow: 0 0 0.55rem rgba(101, 214, 154, 0.72);
  animation: server-live-pulse 2.8s ease-in-out infinite;
}

.online-card.server-degraded .server-node-indicator {
  background: var(--accent);
  box-shadow: 0 0 0.45rem rgba(240, 166, 56, 0.48);
}

.online-card.server-offline .server-node-indicator {
  background: #b85b52;
  box-shadow: 0 0 0.35rem rgba(184, 91, 82, 0.38);
}

.online-card strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  justify-self: end;
}

.online-card small {
  color: var(--subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes server-live-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.88); box-shadow: 0 0 0.25rem rgba(101, 214, 154, 0.34); }
  50% { opacity: 1; transform: scale(1); box-shadow: 0 0 0.75rem rgba(101, 214, 154, 0.88); }
}

@keyframes terminal-logo-glow {
  0%, 88%, 100% { opacity: 1; filter: brightness(1.34) drop-shadow(0 0 .42rem rgba(233, 239, 218, .76)) drop-shadow(0 0 1.1rem rgba(178, 198, 111, .46)); }
  90% { opacity: 0.86; filter: brightness(1.16) drop-shadow(0 0 .24rem rgba(219, 229, 203, .48)) drop-shadow(0 0 .7rem rgba(159, 177, 104, .24)); }
  91.5% { opacity: 1; filter: brightness(1.48) drop-shadow(0 0 .62rem rgba(241, 245, 229, .94)) drop-shadow(0 0 1.4rem rgba(178, 198, 111, .62)); }
  93% { opacity: 0.91; }
  94.5% { opacity: 1; }
}

@keyframes terminal-wordmark-glow {
  0%, 88%, 100% { opacity: 1; text-shadow: 0 0 .1rem rgba(255, 232, 189, .84), 0 0 .42rem rgba(240, 166, 56, .3); }
  90% { opacity: .88; text-shadow: 0 0 .08rem rgba(255, 225, 169, .68), 0 0 .3rem rgba(240, 166, 56, .2); }
  91.5% { opacity: 1; text-shadow: 0 0 .14rem rgba(255, 239, 207, .94), 0 0 .52rem rgba(240, 166, 56, .4); }
  93% { opacity: 0.94; }
  94.5% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark img,
  .brand-copy strong,
  .online-card.server-online .server-node-indicator { animation: none !important; }
}

/*
 * Apollo Engineering player experience
 *
 * This final layer deliberately leaves operational markup and JavaScript hooks
 * unchanged. It gives public routes one coherent containment-terminal language:
 * cinematic where the specimen is the subject, precise where players transact.
 */
html { scrollbar-color: #4b533f #080b09; }

body {
  background: var(--ae-black);
  color: #e4e8e2;
}

body::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at 76% 8%, rgba(240,166,56,.04), transparent 27rem);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 30;
}

.main-area {
  background-image:
    linear-gradient(90deg, rgba(5,7,6,.96) 0%, rgba(5,7,6,.78) 34%, rgba(5,7,6,.9) 100%),
    linear-gradient(180deg, rgba(5,7,6,.72), rgba(5,7,6,.98)),
    url("/portal/assets/sunny-isle-jungle.jpg");
  background-position: center top;
  background-size: cover;
}

.side-feed {
  background:
    radial-gradient(circle at 18% 8%, rgba(76, 92, 60, .13), transparent 28%),
    linear-gradient(180deg, rgba(13,19,16,.97), rgba(7,11,9,.99)),
    url("/portal/assets/sunny-isle-jungle.jpg") center/cover;
  border-right-color: rgba(151, 166, 146, .32);
  box-shadow:
    inset -1px 0 rgba(194, 207, 185, .04),
    14px 0 42px rgba(0,0,0,.24);
}

.brand {
  background:
    linear-gradient(90deg, rgba(240,166,56,.045), transparent 72%),
    rgba(7, 11, 9, .22);
}

.brand-copy strong {
  color: #ffd58e;
  filter: brightness(1.08) saturate(1.08);
  font-size: .9rem !important;
  font-weight: 800;
  letter-spacing: .18em;
  -webkit-text-stroke: .15px rgba(255, 232, 184, .48);
}

.brand-copy small {
  color: #abb4ad;
  letter-spacing: .16em;
  text-shadow: 0 0 .5rem rgba(190, 203, 190, .14);
}

/* Keep The Nest identity legible against the dark containment shell. */
.brand-mark img {
  border-radius: 50%;
  height: 100%;
  object-fit: cover;
  width: 100%;
  filter:
    brightness(1.34)
    drop-shadow(0 0 .42rem rgba(233, 239, 218, .76))
    drop-shadow(0 0 1.1rem rgba(178, 198, 111, .46));
}

.brand-copy strong {
  text-shadow:
    0 0 .1rem rgba(255, 232, 189, .84),
    0 0 .42rem rgba(240, 166, 56, .3);
}

.terminal-clearance {
  background: rgba(17, 25, 20, .56);
  border-bottom: 1px solid rgba(128,145,131,.24);
  color: #a6b29f;
}

.online-card {
  background: linear-gradient(90deg, rgba(20, 31, 25, .86), rgba(12, 19, 15, .76));
  border-bottom: 1px solid rgba(128,145,131,.25);
  border-top: 1px solid rgba(128,145,131,.25);
}

.online-card b { color: #aeb8b1; }

.online-card strong {
  color: #dce2dd;
  text-shadow: 0 0 .5rem rgba(220, 226, 221, .12);
}

.online-card small { color: #879189; }

.nav-section-label {
  color: #b7c1ba;
  font-weight: 600;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .72),
    0 0 .5rem rgba(185, 200, 187, .14);
}

.side-nav a {
  border: 1px solid transparent;
  color: #bbc4be;
  position: relative;
}

.side-nav a > b { color: #99a49d; }

.side-nav a::before {
  background: transparent;
  content: "";
  inset: .35rem auto .35rem 0;
  position: absolute;
  width: 2px;
}

.side-nav a:hover {
  background: rgba(159,176,138,.085);
  border-color: rgba(159,176,138,.18);
  color: #e3e7e3;
}

.side-nav a.active {
  background: linear-gradient(90deg, rgba(240,166,56,.16), rgba(93,116,94,.17));
  border-color: rgba(159,176,138,.34);
  box-shadow:
    inset 0 0 24px rgba(159,176,138,.045),
    0 0 0 1px rgba(0,0,0,.18);
  color: #f4f2e9;
}

.side-nav a.active::before {
  background: var(--ae-amber);
  box-shadow: 0 0 10px rgba(240,166,56,.48);
}

.side-wallet > span {
  background: linear-gradient(145deg, rgba(27,38,31,.96), rgba(15,23,19,.94));
  border-color: rgba(154,169,146,.42);
  box-shadow: inset 0 1px rgba(225, 233, 222, .025);
}

.side-wallet small {
  color: #d0d7d2;
  font-weight: 550;
  text-shadow: 0 0 .45rem rgba(177, 190, 178, .1);
}

.side-wallet b { color: var(--ae-amber); text-shadow: 0 0 10px rgba(240,166,56,.18); }

.side-account {
  background: linear-gradient(90deg, rgba(30,40,34,.98), rgba(17,25,21,.96));
  border: 1px solid rgba(185,157,91,.62);
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 0 .8rem rgba(166, 137, 66, .055);
  grid-template-columns: 2.15rem minmax(0, 1fr) .9rem;
  min-height: 3.45rem;
  padding: .55rem .65rem;
  width: auto;
}

.side-account strong {
  color: #f0f2ef;
  text-shadow: 0 0 .5rem rgba(224, 231, 225, .13);
}
.side-account span { color: #d0d7d2; }
.side-account > svg { color: #bdc7c0; }

.content { isolation: isolate; }

.page-title {
  background:
    linear-gradient(90deg, rgba(6,9,8,.94), rgba(6,9,8,.64) 62%, rgba(6,9,8,.9)),
    url("/portal/assets/sunny-isle-jungle.jpg") center 38%/cover;
  border-bottom-color: rgba(130,144,127,.2);
  box-shadow: 0 16px 38px rgba(0,0,0,.13);
}

.terminal-page-code { color: #778269; letter-spacing: .19em; }

.page-title h1 {
  color: #eceee9;
  letter-spacing: .13em;
  text-shadow: 0 0 24px rgba(237,240,232,.08);
}

.panel,
.console-card,
.role-panel,
.feed-item {
  background: linear-gradient(145deg, rgba(19,25,21,.94), rgba(9,13,11,.96));
  border-color: var(--ae-line);
  box-shadow: 0 16px 46px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.015);
}

.panel,
.console-card { position: relative; }

.panel::after,
.console-card::after {
  border-right: 1px solid rgba(240,166,56,.68);
  border-top: 1px solid rgba(240,166,56,.68);
  content: "";
  height: .55rem;
  pointer-events: none;
  position: absolute;
  right: -1px;
  top: -1px;
  width: .55rem;
}

.panel h2,
.panel h3,
.console-card h2,
.console-card h3 { color: #edf0ea; }

.eyebrow,
.feed-type { color: var(--ae-amber); letter-spacing: .14em; }

.tool-button,
.text-action,
.garage-actions button,
.store-card button {
  align-items: center;
  border-radius: 2px;
  display: inline-flex;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  gap: .4rem;
  justify-content: center;
  letter-spacing: .055em;
  line-height: 1.2;
  min-height: 2.45rem;
  padding: .62rem .85rem;
  text-align: center;
  white-space: nowrap;
}

.tool-button > svg { flex: 0 0 auto; height: .95rem; width: .95rem; }

.tool-button.primary-tool,
.execute-command {
  background: linear-gradient(180deg, #f3b247, #d68a20);
  border-color: #ffc35c;
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 8px 22px rgba(197,119,18,.12);
  color: #211703;
  font-weight: 750;
}

.tool-button.primary-tool:hover:not(:disabled),
.execute-command:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffc65e, #e89a28);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 0 22px rgba(240,166,56,.19);
}

/* Live specimen: cinematic focal point with a stable, readable instrument rail. */
.specimen-strip {
  background: linear-gradient(90deg, rgba(25,33,28,.94), rgba(12,17,14,.92));
  border-color: rgba(145,159,137,.22);
}

.specimen-strip-state i { box-shadow: 0 0 10px rgba(159,176,138,.72); }

.dino-hero {
  background: #090c0a;
  box-shadow: 0 20px 54px rgba(0,0,0,.28);
  overflow: hidden;
}

.dino-hero::before {
  background: linear-gradient(90deg, rgba(2,5,4,.72), rgba(2,5,4,.04) 54%, rgba(2,5,4,.18)), linear-gradient(0deg, rgba(2,5,4,.76), transparent 55%);
}

.dino-environment { filter: brightness(.72) saturate(.78) contrast(1.08); }

.live-dino-model-stage {
  bottom: 14%;
  left: 22%;
  right: 5%;
  top: 7%;
  transform: scale(1.34);
  transform-origin: center bottom;
}

.dino-name strong { text-shadow: 0 3px 20px #000, 0 0 1px rgba(255,255,255,.2); }

.metrics {
  background: rgba(12,17,14,.97);
  border-bottom: 1px solid rgba(130,144,127,.2);
}

.metric-line {
  background: repeating-linear-gradient(90deg, #27302c 0, #27302c calc(8% - 2px), transparent calc(8% - 2px), transparent 8%);
  border: 1px solid rgba(110,124,115,.12);
  height: .62rem;
}

.metric-line span {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0, rgba(255,255,255,.09) calc(8% - 2px), transparent calc(8% - 2px), transparent 8%);
  box-shadow: 0 0 12px currentColor;
}

.metric.health .metric-line span { color: #c9544d; }
.metric.stamina .metric-line span { color: #9cab72; }
.metric.hunger .metric-line span { color: #d8942d; }
.metric.thirst .metric-line span { color: #5bb1c1; }

.growth-readout {
  background: radial-gradient(circle, rgba(18,22,19,.96) 54%, rgba(7,10,8,.96) 55%);
  border-color: rgba(240,166,56,.5);
  box-shadow: 0 0 0 5px rgba(12,17,14,.72), 0 0 24px rgba(240,166,56,.1);
}

.prime-checklist {
  background: linear-gradient(180deg, rgba(6,9,7,.46), rgba(6,9,7,.14));
  border-top: 1px solid rgba(240,166,56,.2);
  padding: 1rem .4rem .4rem;
}

.prime-checklist-head { border-bottom: 1px dashed rgba(132,147,123,.2); padding-bottom: .65rem; }
.prime-task { background: rgba(14,19,16,.72); border: 1px solid rgba(122,136,122,.15); }
.prime-task:hover { background: rgba(25,31,26,.78); border-color: rgba(159,176,138,.28); }
.prime-task.is-complete { background: rgba(40,71,49,.22); border-color: rgba(99,199,142,.3); }

.live-action-panel {
  background: linear-gradient(145deg, rgba(24,31,27,.97), rgba(10,15,12,.98));
  border-color: rgba(240,166,56,.26);
}

.command-option { background: rgba(12,17,14,.86); border-color: rgba(130,144,127,.18); }
.command-option:hover:not(:disabled) { background: rgba(33,42,35,.82); border-color: rgba(159,176,138,.36); }
.weather-panel { border-top: 1px solid rgba(240,166,56,.28) !important; }

/* Player transaction pages: product-led, scannable and deliberately less cinematic. */
.store-heading,
.event-wheel-page-heading {
  background: linear-gradient(90deg, rgba(22,29,24,.8), transparent);
  border: 1px solid var(--ae-line);
  padding: 1rem 1.1rem;
}

.store-tabs {
  background: rgba(10,14,12,.78);
  border: 1px solid var(--ae-line);
  padding-inline: .35rem;
}

.store-tabs button { min-height: 3.2rem; }
.store-tabs button[aria-selected="true"] { background: rgba(240,166,56,.055); }

.store-grid { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }

.store-card {
  background: linear-gradient(155deg, rgba(22,28,24,.96), rgba(9,13,11,.98));
  border-color: rgba(132,147,123,.2);
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.store-card:hover {
  border-color: rgba(240,166,56,.38);
  box-shadow: 0 22px 52px rgba(0,0,0,.28), 0 0 20px rgba(240,166,56,.035);
  transform: translateY(-2px);
}

.store-card-media {
  aspect-ratio: 16 / 7.5;
  background: linear-gradient(0deg, rgba(5,8,6,.97), rgba(5,8,6,.12) 78%), url('/portal/assets/sunny-isle-jungle.jpg') center/cover;
}

.store-card-media::before {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.store-card-media { position: relative; }
.store-card-footer { min-height: 3.8rem; }

.marketplace-workspace > .panel:first-child,
.garage-list,
.garage-species-list {
  background: rgba(9,13,11,.82);
}

.garage-item {
  background: linear-gradient(145deg, rgba(23,30,25,.96), rgba(11,15,13,.98));
  border-color: rgba(132,147,123,.22);
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
}

.garage-item:hover { border-color: rgba(159,176,138,.38); }
.garage-vitals span { border: 1px solid rgba(132,147,123,.15); }

/* Skins: the verified 3D specimen remains the hero, controls become a lab console. */
.skin-creator-header {
  background: linear-gradient(90deg, rgba(24,32,26,.96), rgba(8,13,10,.94));
  border-left: 2px solid var(--ae-amber);
}

.skin-stage-panel {
  background: #050807;
  border-color: rgba(110,126,114,.28);
  box-shadow: inset 0 0 80px rgba(0,0,0,.42), 0 20px 54px rgba(0,0,0,.2);
}

.skin-model-viewport {
  background:
    linear-gradient(rgba(97,116,101,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(97,116,101,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 70%, rgba(108,138,108,.08), transparent 36%),
    #050807;
  background-size: 2rem 2rem, 2rem 2rem, auto, auto;
}

.skin-editor-panel { background: rgba(13,18,15,.96); }
.skin-color-control { background: rgba(17,23,19,.8); border-color: rgba(125,140,125,.18); }
.skin-color-control:hover { background: rgba(25,33,27,.88); border-color: rgba(159,176,138,.32); }

/* Live map is one uninterrupted tactical surface, with controls treated as overlays. */
.map-layout { background: #050807; border: 1px solid var(--ae-line); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.map-surface { background: #050807; }
.map-toolbar {
  background: rgba(8,13,10,.92);
  border-color: rgba(139,153,134,.26);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
.map-roster { background: linear-gradient(180deg, rgba(16,22,18,.97), rgba(8,12,10,.98)); }

/* Support is a calm incident desk, not another game mechanic. */
.support-workspace { align-items: start; }
.support-create-panel { border-top: 2px solid var(--ae-amber); }
.support-list-panel { border-top: 2px solid var(--ae-phosphor); }
.support-step-heading > span {
  background: rgba(240,166,56,.08);
  border-color: rgba(240,166,56,.38);
  color: var(--ae-amber);
}
.support-evidence-entry { background: rgba(7,11,9,.66); }
.player-upload-dropzone { background: rgba(16,23,18,.64); border-color: rgba(139,153,134,.3); }
.player-upload-dropzone:hover { background: rgba(24,33,26,.7); border-color: rgba(240,166,56,.45); }

/* Event allocation: unsettling AE resource lottery, never a bright casino. */
.event-wheel-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(113,136,93,.08), transparent 34%),
    linear-gradient(145deg, rgba(17,23,19,.97), rgba(6,10,8,.99));
}
.event-wheel-disc { filter: saturate(.72) brightness(.9); }
.event-wheel-spin { background: radial-gradient(circle, #20291f 0, #080d0a 72%); }
.event-wheel-prizes { background: linear-gradient(180deg, rgba(18,25,20,.97), rgba(7,11,9,.99)); }

@media (min-width: 981px) {
  .portal-frame { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .content { padding-inline: clamp(1.25rem, 2vw, 2.25rem); }
  .page-title { margin-inline: clamp(-2.25rem, -2vw, -1.25rem); padding-inline: clamp(1.25rem, 2vw, 2.25rem); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) clamp(20rem, 24vw, 24.5rem); }
  .dino-hero { height: clamp(20rem, 31vw, 28rem); min-height: 20rem; }
  .skin-creator-grid { grid-template-columns: minmax(0, 1.45fr) minmax(22rem, .75fr); }
}

@media (max-width: 1100px) {
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-dino-model-stage { left: 12%; right: 0; transform: scale(1.18); }
}

@media (max-width: 760px) {
  .store-grid,
  .support-workspace { grid-template-columns: 1fr; }
  .store-heading,
  .event-wheel-page-heading { align-items: start; flex-direction: column; }
  .live-dino-model-stage { bottom: 20%; left: 0; right: 0; top: 10%; transform: scale(1.05); }
  .panel::after,
  .console-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .store-card { transition: none; }
  .store-card:hover { transform: none; }
}

/* Live specimen launch polish: restrained AE surveillance instrumentation. */
.specimen-strip-state i,
.terminal-feed-label > i { border-radius: 50%; }

.specimen-strip.is-live .specimen-strip-state i {
  animation: specimen-live-pulse 2.8s ease-in-out infinite;
  background: #65d69a;
  box-shadow: 0 0 0 rgba(101, 214, 154, 0), 0 0 0.65rem rgba(101, 214, 154, 0.64);
}

.terminal-feed-label {
  align-items: center;
  color: #e0642e;
  display: flex;
  gap: 0.45rem;
  z-index: 8;
}

.terminal-feed-label > i {
  animation: recorder-live-pulse 2.2s ease-in-out infinite;
  background: #e0642e;
  box-shadow: 0 0 0.7rem rgba(224, 100, 46, 0.78);
  height: 0.45rem;
  width: 0.45rem;
}

.terminal-feed-label small {
  color: #a5aaa4;
  font: inherit;
  letter-spacing: inherit;
}

/* The camera identifier is now real markup so it can remain accessible. */
.terminal-feed-label::after { content: none; }

.dino-hero::before {
  animation: none !important;
  background:
    linear-gradient(90deg, rgba(2, 5, 4, 0.76), rgba(2, 5, 4, 0.12) 58%, rgba(2, 5, 4, 0.2)),
    linear-gradient(0deg, rgba(2, 5, 4, 0.78), transparent 56%);
  z-index: 4;
}

.dino-hero::after {
  animation: surveillance-interference 9s steps(3, end) infinite;
  background:
    linear-gradient(var(--accent), var(--accent)) left 1rem top 1rem / 1.2rem 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 1rem top 1rem / 1px 1.2rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 1rem top 1rem / 1.2rem 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 1rem top 1rem / 1px 1.2rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 1rem bottom 1rem / 1.2rem 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 1rem bottom 1rem / 1px 1.2rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 1rem bottom 1rem / 1.2rem 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 1rem bottom 1rem / 1px 1.2rem no-repeat,
    repeating-linear-gradient(0deg, rgba(190, 208, 195, 0.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(93deg, rgba(214, 226, 216, 0.025) 0 1px, transparent 1px 7px);
  background-position: left 1rem top 1rem, left 1rem top 1rem, right 1rem top 1rem, right 1rem top 1rem, left 1rem bottom 1rem, left 1rem bottom 1rem, right 1rem bottom 1rem, right 1rem bottom 1rem, 0 0, 0 0;
  mix-blend-mode: soft-light;
  opacity: 0.38;
  z-index: 7;
}

.dino-environment { filter: brightness(0.56) saturate(0.68) contrast(1.18) sepia(0.08); }

.live-dino-model-stage {
  bottom: -12%;
  left: 25%;
  right: 0;
  top: 23%;
  transform: translateY(30%) scale(1.48);
  transform-origin: center bottom;
  z-index: 3;
}

.dino-name,
.growth-readout { z-index: 8; }

.specimen-workspace .metric-line {
  background: repeating-linear-gradient(90deg, #202925 0 8px, #101613 8px 10px);
  border: 1px solid rgba(142, 159, 147, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.44);
  height: 0.62rem;
  position: relative;
}

.specimen-workspace .metric-line span {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 8px, rgba(0, 0, 0, 0.32) 8px 10px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 52%);
}

.specimen-workspace .metric-line::after {
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(2, 5, 4, 0.78) 8px 10px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.prime-task-list {
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prime-task {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(125, 140, 130, 0.16);
  border-radius: 0;
}

.prime-task:nth-child(odd) { border-right: 1px solid rgba(125, 140, 130, 0.16); }
.prime-task:hover { background: rgba(159, 176, 138, 0.045); border-color: rgba(125, 140, 130, 0.24); }
.prime-task.complete { background: rgba(62, 108, 74, 0.09); }
.prime-task summary { min-height: 2.75rem; padding: 0.55rem 0.7rem; }
.prime-task-title small { display: none; }
.prime-task-state { border-radius: 1px; height: 1.35rem; width: 1.35rem; }

.command-option.restricted-command {
  background: repeating-linear-gradient(135deg, rgba(66, 43, 25, 0.25) 0 7px, rgba(15, 18, 16, 0.92) 7px 14px);
  border-color: rgba(224, 100, 46, 0.34);
  color: #5f6862;
  opacity: 1;
  overflow: hidden;
  position: relative;
}

.command-option.restricted-command > span {
  align-items: center;
  background: rgba(8, 11, 9, 0.72);
  color: #d69a46;
  display: flex;
  font: 700 0.48rem "IBM Plex Mono", ui-monospace, monospace;
  gap: 0.25rem;
  inset: 0;
  justify-content: center;
  letter-spacing: 0.12em;
  position: absolute;
  text-transform: uppercase;
}

.command-option.restricted-command > strong,
.command-option.restricted-command > svg { opacity: 0.22; }

.command-option.restricted-command > span svg { height: 0.68rem; width: 0.68rem; }
.command-option.destructive-command { border-color: rgba(198, 69, 58, 0.52); }
.command-option.destructive-command > span { color: #d9665a; }

.ledger-title {
  align-items: center;
  border-bottom: 1px dashed rgba(132, 147, 123, 0.2);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  padding-bottom: 0.55rem;
}

.ledger-title h2 { color: var(--ae-amber); font-size: 0.83rem; letter-spacing: 0.13em; margin: 0; text-transform: uppercase; }
.ledger-title h2 span { margin-right: 0.45rem; }
.ledger-title small { color: var(--subtle); font: 0.52rem "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; }
.earn-panel { padding-top: 0.75rem !important; }
.earn-panel .earn-action-list { margin-top: 0; }

.side-utility-links button { color: #65d69a; }
.side-utility-links button:hover { color: #93e8b6; }
.side-wallet > span:nth-child(2) svg,
.side-wallet > span:nth-child(2) strong,
.side-wallet > span:nth-child(2) b { color: #65d69a; text-shadow: 0 0 0.6rem rgba(101, 214, 154, 0.28); }

@keyframes specimen-live-pulse {
  0%, 100% { opacity: 0.58; box-shadow: 0 0 0 0 rgba(101, 214, 154, 0.34), 0 0 0.4rem rgba(101, 214, 154, 0.45); }
  50% { opacity: 1; box-shadow: 0 0 0 0.25rem rgba(101, 214, 154, 0), 0 0 0.8rem rgba(101, 214, 154, 0.78); }
}

@keyframes recorder-live-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes surveillance-interference {
  0%, 100% { background-position: left 1rem top 1rem, left 1rem top 1rem, right 1rem top 1rem, right 1rem top 1rem, left 1rem bottom 1rem, left 1rem bottom 1rem, right 1rem bottom 1rem, right 1rem bottom 1rem, 0 0, 0 0; }
  33% { background-position: left 1rem top 1rem, left 1rem top 1rem, right 1rem top 1rem, right 1rem top 1rem, left 1rem bottom 1rem, left 1rem bottom 1rem, right 1rem bottom 1rem, right 1rem bottom 1rem, 0 1px, 1px 0; }
  66% { background-position: left 1rem top 1rem, left 1rem top 1rem, right 1rem top 1rem, right 1rem top 1rem, left 1rem bottom 1rem, left 1rem bottom 1rem, right 1rem bottom 1rem, right 1rem bottom 1rem, 0 -1px, -1px 0; }
}

@media (max-width: 760px) {
  .prime-task-list { grid-template-columns: 1fr; }
  .prime-task:nth-child(odd) { border-right: 0; }
  .terminal-feed-label small { display: none; }
  .live-dino-model-stage { bottom: 4%; left: 2%; right: 0; top: 16%; transform: translateY(16%) scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .specimen-strip.is-live .specimen-strip-state i,
  .terminal-feed-label > i,
  .dino-hero::after { animation: none !important; }
}