:root {
  color-scheme: dark;
  --bg: #020907;
  --panel: #07130f;
  --panel-2: #0a1b16;
  --line: rgba(16, 222, 166, 0.22);
  --line-strong: rgba(16, 222, 166, 0.64);
  --text: #effffb;
  --muted: #7b918b;
  --green: #00d99d;
  --orange: #ff6a1a;
  --yellow: #d6ae00;
  --pink: #ff4d83;
  --blue: #18bde0;
  font-family: Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 60% -20%, rgba(0, 210, 150, 0.12), transparent 34rem),
    linear-gradient(180deg, #03100c, 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: "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.03rem;
}

.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;
}

.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(0, 217, 157, 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(0, 217, 157, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 157, 0.05) 1px, transparent 1px);
  background-size: 1rem 1rem;
}

.watermark {
  position: absolute;
  font-size: clamp(3rem, 11vw, 9rem);
  font-weight: 900;
  color: rgba(0, 217, 157, 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(0, 217, 157, 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) 20rem; }
.group-map { aspect-ratio: 1 / 1; background: #0a1210; border: 1px solid var(--line); min-height: 26rem; overflow: hidden; position: relative; }
.gateway-map-image { display: block; height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
.gateway-map-layer { height: 100%; inset: 0; object-fit: contain; pointer-events: none; position: absolute; width: 100%; z-index: 1; }
.heatmap-layer { inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.heatmap-cell { background: rgba(40, 193, 114, 0.34); border-radius: 50%; filter: blur(12px); height: 15%; position: absolute; transform: translate(-50%, -50%); width: 15%; }
.heatmap-cell.medium { background: rgba(230, 183, 48, 0.4); height: 18%; width: 18%; }
.heatmap-cell.high { background: rgba(220, 66, 66, 0.46); height: 22%; width: 22%; }
.map-toolbar { align-items: center; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; display: flex; flex-wrap: wrap; gap: 1rem; min-height: 2.75rem; padding: 0.55rem 0.75rem; }
.map-toolbar strong { font-size: 0.74rem; margin-right: auto; }
.map-toolbar label { align-items: center; color: var(--muted); cursor: pointer; display: flex; font-size: 0.72rem; gap: 0.4rem; }
.map-toolbar input { accent-color: var(--green); }
.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-grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 10% 10%; inset: 0; opacity: 0.42; position: absolute; }
.map-marker { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.map-marker > span { background: var(--green); border: 3px solid #06251d; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); display: block; height: 15px; width: 15px; }
.map-marker.self > span { background: var(--text); }
.map-marker.garage > span { background: var(--yellow); border-radius: 2px; transform: rotate(45deg); }
.map-marker strong, .map-marker small { background: rgba(2, 9, 7, 0.88); display: block; font-size: 0.72rem; margin-left: 0.65rem; padding: 0.15rem 0.3rem; white-space: nowrap; }
.map-marker strong { margin-top: -0.9rem; }
.map-marker small { color: var(--muted); font-size: 0.64rem; }
.map-scale { bottom: 0.75rem; color: var(--muted); font-size: 0.68rem; left: 0.75rem; position: absolute; }
.map-roster { align-content: start; display: grid; }
.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-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; }
.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(0, 217, 157, 0.14);
  color: var(--green);
  cursor: pointer;
  padding: 0.6rem 0.8rem;
}

.account-panel {
  display: grid;
  gap: 0.45rem;
}

.account-panel h2,
.account-panel p {
  margin: 0;
}

.account-panel p,
.account-panel small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.account-panel code {
  color: var(--text);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.account-link-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.account-link-row span:first-child { color: var(--muted); }
.account-link-row a { color: var(--accent); font-weight: 700; }

.steam-sign-in {
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--text);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  justify-content: center;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
}

.steam-sign-in:hover {
  background: #202825;
}

.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(0, 217, 157, 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(0, 217, 157, 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;
}

.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);
}

.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);
}

.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(0, 217, 157, 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(0, 217, 157, 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;
}

.loading-state {
  padding: 2rem;
  color: var(--muted);
}

@media (max-width: 980px) {
  .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;
  }

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

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

  .confirmation-actions button {
    flex: 1;
  }

  .content {
    padding: 1rem;
  }
}

/* Production portal UI */
:root {
  --bg: #0d1110;
  --panel: #151a18;
  --panel-2: #1a201e;
  --line: #2b3330;
  --line-strong: #3d8f70;
  --text: #f1f4f2;
  --muted: #9ba6a1;
  --green: #4fb68d;
  --orange: #d36b5d;
  --yellow: #c6a65b;
  --pink: #d36b5d;
  --blue: #4fb68d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); }
button, input, select, textarea { border-radius: 4px; }
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, .telemetry-state span {
  background: var(--green);
  border-radius: 50%;
  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.75rem; gap: 0.45rem; }
.telemetry-state.stale { color: var(--yellow); }
.telemetry-state.stale span { background: var(--yellow); }
.telemetry-state.unavailable { color: var(--muted); }
.telemetry-state.unavailable span { 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; }
.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-species-browser { display: grid; gap: 0.45rem; margin-top: 0.85rem; }
.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; }

.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-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)); }
  .map-roster .panel-heading, .map-roster .map-privacy { grid-column: 1 / -1; }
}

@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)); }
  .group-map { aspect-ratio: 1 / 1; min-height: 22rem; }
  .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; }
}

/* Sunny Isle visual system */
:root {
  --bg: #0b100d;
  --sidebar: #0e1511;
  --panel: #131b16;
  --panel-2: #18221c;
  --panel-3: #1d2921;
  --line: #29362e;
  --line-strong: #526b5a;
  --text: #f3f1e9;
  --muted: #a7afa8;
  --subtle: #747f77;
  --green: #62b68d;
  --orange: #d86c5c;
  --yellow: #efb84a;
  --pink: #d86c5c;
  --blue: #62b68d;
  --accent: #efb84a;
  --accent-ink: #201708;
  --danger: #d86c5c;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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;
}

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

button:active:not(:disabled) { transform: translateY(1px); }

.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: var(--accent);
  border: 1px solid #ffd071;
  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-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; }

.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;
  width: 2rem;
}
.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; }
.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; }

.content { gap: 1.15rem; max-width: 92rem; padding: 1.6rem 1.8rem 2.5rem; }
.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 .live { color: var(--green); }

.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;
}
.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%;
}
.dino-identity-mark {
  align-items: center;
  background: rgba(239, 184, 74, 0.12);
  border: 1px solid rgba(239, 184, 74, 0.5);
  border-radius: 50%;
  color: var(--accent);
  display: flex;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  font-weight: 800;
  height: 4.5rem;
  justify-content: center;
  left: 1.35rem;
  position: absolute;
  top: 1.35rem;
  width: 4.5rem;
  z-index: 1;
}
.dino-name, .growth-readout { bottom: 1.4rem; z-index: 1; }
.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-task { background: #101713; }

.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); }

.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; }

.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 .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 { color: var(--muted); font-size: 0.68rem; }
.profile-connections dd { display: grid; gap: 0.1rem; margin: 0; }
.profile-connections strong { font-size: 0.75rem; }
.profile-connections small { color: var(--subtle); font-size: 0.65rem; }
.profile-actions { display: grid; gap: 0.35rem; padding: 0.65rem; }
.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-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; gap: 0.12rem 0.7rem; grid-template-columns: 1.25rem 1fr; }
.staff-section > summary > span > svg { color: var(--accent); 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 { color: var(--subtle); height: 0.95rem; transition: transform 140ms ease; width: 0.95rem; }
.staff-section[open] > summary { border-bottom: 1px solid var(--line); }
.staff-section[open] > summary > svg { transform: rotate(180deg); }
.staff-section > summary:hover { background: var(--panel-2); }
.staff-section-caution > summary > span > svg { 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; }
.staff-config-panel .catalog-admin-panel { margin-top: 0.25rem; }

.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; }
  .right-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .right-stack > .panel:first-child { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .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.65rem; }
  .brand-mark { height: 2rem; width: 2rem; }
  .online-card, .side-account { display: none; }
  .side-nav { display: flex; gap: 0.25rem; overflow-x: auto; padding-bottom: 0.1rem; }
  .side-nav { scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav .nav-item { display: flex; flex: 0 0 auto; gap: 0.45rem; padding: 0.6rem 0.7rem; white-space: nowrap; }
  .side-nav .nav-item.active { box-shadow: inset 0 -2px var(--accent); }
  .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-credit button { margin: 0 0 0 auto; }
  .topbar { min-height: 3.6rem; padding: 0 0.8rem; position: static; }
  .server-heading { display: none; }
  .account-strip { justify-content: space-between; width: 100%; }
  .account-strip > span { border-left: 0; min-width: 0; padding-left: 0; }
  .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 { 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; }
  .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; }
  .dino-identity-mark { height: 3.6rem; width: 3.6rem; }
  .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) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}