:root {
  color-scheme: dark;
  --page: #102433;
  --panel: rgba(26, 52, 66, 0.94);
  --panel-2: rgba(31, 64, 81, 0.96);
  --panel-flat: #233d4d;
  --text: #ffffff;
  --muted: #c7d8e2;
  --navy: #142c3a;
  --blue: #1d9fe8;
  --blue-2: #00c8fa;
  --teal: #00ff62;
  --teal-2: #74e2a1;
  --gold: #f0b83a;
  --red: #ef5959;
  --green: #51c85d;
  --good: #51c85d;
  --warn: #ef5959;
  --amber: #f0b83a;
  --line: rgba(214, 238, 245, 0.28);
  --line-strong: rgba(244, 253, 255, 0.42);
  --shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  --radius: 7px;
  --radius-size: 7px;
  --ticker-speed: 120s;
}
* { box-sizing: border-box; }
html, body {
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #142c3a 0%, #183545 50%, #102433 100%);
}
/* Desktop browser atmosphere only. Android/WebView keeps the compact game background. */
@media (min-width: 900px) {
  html:not([data-native-app="1"]) body {
    background:
      linear-gradient(180deg, rgba(5, 18, 28, 0.82) 0%, rgba(7, 25, 36, 0.78) 48%, rgba(4, 14, 23, 0.88) 100%),
      url("assets/hq-hero-v2.png") center / cover fixed no-repeat;
    background-color: #071722;
  }
}

/* Build 633: compact wealth cockpit with symbolic value legend. */
.hq-asset-breakdown { padding: 14px 15px 13px; background: linear-gradient(145deg, rgba(6,22,32,.94), rgba(5,14,24,.84)); border-color: rgba(74,218,228,.28); box-shadow: inset 0 0 22px rgba(25,182,205,.08), 0 0 18px rgba(0,210,220,.06); }
.hq-asset-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hq-asset-heading > div { display:grid; gap:2px; }
.hq-asset-heading span { color:var(--muted); font-size:.9rem; }
.hq-asset-heading strong { color:#f4fbff; font-size:1.16rem; letter-spacing:.01em; }
.hq-asset-heading em { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(91,255,219,.28); border-radius:9px; color:#5bffdb; font-size:.72rem; font-style:normal; font-weight:900; }
.hq-asset-cockpit-bar { display:flex; gap:3px; align-items:stretch; height:30px; margin:12px 0 14px; padding:4px; overflow:hidden; border:1px solid rgba(91,255,219,.28); border-radius:12px; background:rgba(2,12,20,.82); box-shadow:inset 0 0 14px rgba(91,255,219,.12), 0 0 12px rgba(0,200,250,.08); }
.hq-asset-cockpit-bar i { position:relative; display:grid; place-items:center; min-width:8px; overflow:hidden; border-radius:7px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -7px 12px rgba(0,0,0,.2); }
.hq-asset-cockpit-bar i b { color:rgba(255,255,255,.9); font-size:.72rem; line-height:1; text-shadow:0 1px 4px rgba(0,0,0,.65); }
.hq-asset-cockpit-bar .asset-cash { background:linear-gradient(90deg,#34f89a,#06c984); }
.hq-asset-cockpit-bar .asset-storage { background:linear-gradient(90deg,#64d7ff,#236dff); }
.hq-asset-cockpit-bar .asset-market { background:linear-gradient(90deg,#ffc44c,#ff8844); }
.hq-asset-cockpit-bar .asset-stocks { background:linear-gradient(90deg,#c7a6ff,#735dff); }
.hq-asset-cockpit-bar .asset-production { background:linear-gradient(90deg,#25fff0,#06a9d8); }
.hq-asset-legend { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 9px; }
.hq-asset-legend span { display:grid; grid-template-columns:24px minmax(0,1fr); grid-template-rows:auto auto; column-gap:7px; align-items:center; padding:7px 8px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(7,25,36,.7); }
.hq-asset-legend span > i { grid-row:1 / span 2; display:grid; place-items:center; width:24px; height:24px; border-radius:8px; color:currentColor; background:rgba(255,255,255,.08); font-size:.84rem; font-style:normal; font-weight:900; }
.hq-asset-legend span > small { overflow:hidden; color:var(--muted); font-size:.67rem; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.hq-asset-legend span > b { overflow:hidden; color:#f4fbff; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.hq-asset-legend .asset-cash { color:#5bffb0; }
.hq-asset-legend .asset-storage { color:#58b9ff; }
.hq-asset-legend .asset-market { color:#ffb74d; }
.hq-asset-legend .asset-stocks { color:#b89bff; }
.hq-asset-legend .asset-production { color:#42e9e0; }
@media (max-width:420px) { .hq-asset-breakdown { padding:12px 10px; } .hq-asset-legend span { padding:6px; } .hq-asset-legend span > small { font-size:.62rem; } .hq-asset-legend span > b { font-size:.72rem; } }
a { color: inherit; text-decoration: none; }
.app-shell {
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow-x: clip;
  padding: 10px 10px 92px;
}
.topbar {
  position: static;
  display: grid;
  grid-template-columns: minmax(190px, 260px) 1fr auto;
  gap: 8px;
  align-items: stretch;
  min-height: 48px;
  padding: 48px 7px 7px;
  background: rgba(18, 42, 56, 0.97);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.brand, .top-actions a {
  border: 1px solid rgba(205, 231, 238, 0.14);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(38, 73, 91, 0.98), rgba(22, 48, 64, 0.98));
}
.brand {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  z-index: 20;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 4px 10px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.brand span { min-width: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #061018;
  font-weight: 900;
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
}
.brand strong, .brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand small { color: var(--muted); font-size: 0.74rem; }
.resource-strip {
  position: relative;
  display: block;
  min-width: 0;
  border: 1px solid rgba(205, 231, 238, 0.14);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(40, 78, 96, 0.94), rgba(24, 53, 70, 0.98));
  overflow: hidden;
}
.resource-strip::before,
.resource-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 34px;
  pointer-events: none;
}
.resource-strip::before { left: 0; background: linear-gradient(90deg, rgba(5, 15, 22, 0.98), transparent); }
.resource-strip::after { right: 0; background: linear-gradient(270deg, rgba(5, 15, 22, 0.98), transparent); }
.ticker-track {
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  min-height: 31px;
  will-change: transform;
  animation: tickerScroll var(--ticker-speed) linear infinite;
  transform: translate3d(0, 0, 0);
}
.ticker-group {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
}
.resource-strip:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-grid;
  grid-template-columns: 16px auto auto auto;
  gap: 5px;
  align-items: center;
  min-width: max-content;
  padding: 4px 9px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.ticker-item img {
  width: 16px;
  height: 16px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}
.ticker-item b { font-size: 0.78rem; }
.ticker-item strong { color: var(--teal-2); font-size: 0.78rem; }
.ticker-item small { color: var(--muted); font-size: 0.68rem; }
.ticker-item:hover { background: rgba(255,255,255,0.055); }
.market-trend {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  white-space: nowrap;
  font-weight: 950;
}
.market-trend.trend-up { color: var(--good); }
.market-trend.trend-down { color: var(--warn); }
.market-trend.trend-flat { color: var(--muted); }
.market-demand-pill {
  display: inline-flex;
  justify-content: flex-end;
  white-space: nowrap;
  font-weight: 950;
}
.market-demand-pill.demand-up { color: var(--teal-2); }
.market-demand-pill.demand-down { color: #ff9aa5; }
.market-demand-pill.demand-flat { color: var(--muted); }
@keyframes tickerScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.top-actions { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; }
.top-actions a { display: grid; place-items: center; min-width: 82px; padding: 0 10px; color: var(--muted); font-weight: 700; }
.top-actions a:hover { color: white; border-color: var(--teal); }
main {
  width: 100%;
  max-width: 1600px;
  min-width: 0;
  margin: 0 auto;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 0.8fr) minmax(260px, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.hq-panel, .economy-phase, .manager-panel, .map-panel, .main-column, .detail-panel, .production-card, .market-card, .quality-card, .chain-card, .building-detail-panel, .market-detail-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.hq-panel, .economy-phase, .manager-panel { min-height: 126px; padding: 12px; }
.panel-title, .section-head, .manager-row, .metric, .market-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.panel-title span, .section-head span, .metric span, .manager-row span, .market-row span { color: var(--muted); }
.panel-title strong { font-size: 1.25rem; color: var(--teal-2); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.metric { align-items: flex-start; flex-direction: column; min-height: 60px; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.035); }
.metric b { font-size: 1.15rem; }
.metric-link {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.metric-link:hover,
.metric-link:focus-visible {
  border-color: rgba(116, 226, 161, 0.55);
  background: rgba(73, 209, 125, 0.09);
}
.metric-link:focus-visible {
  outline: 2px solid rgba(116, 226, 161, 0.55);
  outline-offset: 2px;
}
.economy-phase strong { display: block; margin: 5px 0 8px; color: var(--gold); font-size: 1.6rem; }
.economy-phase strong.phase-up { color: var(--good); }
.economy-phase strong.phase-down { color: var(--warn); }
.economy-phase strong.phase-flat { color: var(--gold); }
.market-phase-chart {
  overflow: hidden;
  border: 1px solid rgba(116, 226, 161, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 100% 25%,
    rgba(255,255,255,0.035);
}
.market-phase-chart svg {
  display: block;
  width: 100%;
  height: 72px;
}
.phase-area { fill: rgba(73, 209, 125, 0.16); }
.phase-line {
  fill: none;
  stroke: var(--teal-2);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(73, 209, 125, 0.28));
}
.phase-line-up { stroke: var(--good); }
.phase-line-down { stroke: var(--warn); }
.phase-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}
.phase-summary {
  display: block;
  padding: 0 8px 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}
.manager-row { padding: 9px 0; border-top: 1px solid var(--line); }
.workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr) 310px; gap: 10px; align-items: start; }
.map-panel, .main-column, .detail-panel { padding: 12px; }
.section-head { margin-bottom: 10px; }
.page-view > .section-head {
  display: none;
}
h2 { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
.building-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.building-tile {
  min-height: 106px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(19, 50, 62, 0.92), rgba(9, 25, 34, 0.92));
}
.building-tile.locked {
  opacity: 0.55;
  filter: grayscale(0.55);
  border-color: rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(25, 35, 42, 0.78), rgba(8, 18, 25, 0.88));
}
.building-tile.locked:hover {
  opacity: 0.72;
  filter: grayscale(0.25);
}
.building-tile { cursor: pointer; }
.building-tile:hover, .production-card:hover {
  border-color: rgba(116, 226, 161, 0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 28px rgba(0,0,0,0.22);
}
.building-detail-panel {
  margin-bottom: 10px;
  padding: 9px;
}
.building-detail-panel:empty { display: none; }
.dashboard-notice {
  margin: 0 0 8px;
}
.dashboard-notice:empty,
.dashboard-notice[hidden] {
  display: none;
}
.dashboard-notice-card {
  position: relative;
  width: 100%;
  max-height: 136px;
  overflow: hidden;
  padding: 8px 40px 8px 12px;
  border: 1px solid rgba(116, 226, 161, 0.24);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(17, 42, 54, 0.96), rgba(9, 27, 36, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.22;
}
.dashboard-notice-body {
  max-height: 118px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  scrollbar-width: thin;
}
.dashboard-notice-body::-webkit-scrollbar {
  width: 6px;
}
.dashboard-notice-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(116, 226, 161, 0.45);
}
.dashboard-notice-card span {
  display: block;
}
.dashboard-notice-card span:empty {
  min-height: 5px;
}
.dashboard-notice-close {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(205, 231, 238, 0.14);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,0.035);
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}
.dashboard-notice-mini {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(116, 226, 161, 0.22);
  border-radius: 7px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(17, 42, 54, 0.86), rgba(9, 27, 36, 0.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
}
.dashboard-notice-mini span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-notice-mini strong {
  color: var(--teal-2);
  font-size: 0.76rem;
}
.building-detail-grid {
  display: grid;
  grid-template-columns: minmax(112px, 150px) minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
  align-items: stretch;
}
.building-detail-art {
  position: relative;
  width: 100%;
  min-height: 112px;
  max-height: 132px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: radial-gradient(circle at 42% 44%, rgba(29, 217, 216, 0.11), rgba(255,255,255,0.04) 58%, rgba(5, 15, 22, 0.2));
}
.building-detail-image {
  width: 100%;
  height: 100%;
  min-height: 112px;
  max-height: 132px;
  object-fit: contain;
}
.building-detail-building {
  position: relative;
  z-index: 2;
  padding: 0;
  filter: contrast(1.06) saturate(1.08) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.34));
}
.building-detail-resource {
  position: absolute;
  z-index: 1;
  right: 4px;
  bottom: 4px;
  width: clamp(48px, 42%, 78px);
  height: clamp(48px, 42%, 78px);
  object-fit: contain;
  opacity: 0.82;
  filter: contrast(1.08) saturate(1.14) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.38));
  pointer-events: none;
}
.building-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}
.building-stat-grid .metric {
  min-height: 44px;
  padding: 6px 7px;
}
.building-stat-grid .metric b {
  font-size: 0.86rem;
  line-height: 1.2;
}
.building-stat-grid .metric span {
  font-size: 0.74rem;
}
.building-recipe-list {
  margin-top: 10px;
}
.building-recipe-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto auto auto;
  gap: 9px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.building-recipe-row.selected {
  margin: 8px -8px 0;
  padding: 9px 8px;
  border: 1px solid rgba(116, 226, 161, 0.34);
  border-radius: var(--radius);
  background: rgba(78, 211, 141, 0.07);
}
.building-recipe-row img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
}
.building-recipe-row span,
.building-recipe-row small { display: block; min-width: 0; }
.building-recipe-row small {
  margin-top: 2px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.building-recipe-row b { color: var(--teal-2); white-space: nowrap; }
.building-recipe-row em {
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.building-recipe-row em.good { color: var(--teal-2); }
.building-recipe-row em.warn { color: var(--gold); }
.building-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.building-flow-grid .metric {
  min-height: 48px;
  padding: 7px;
}
.building-flow-grid .metric b {
  font-size: 0.9rem;
  line-height: 1.25;
}
.building-production-panel,
.retail-production-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(116, 226, 161, 0.28);
  border-radius: var(--radius);
  background: rgba(78, 211, 141, 0.055);
}
.tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #061018;
  font-weight: 900;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}
.building-tile strong { display: block; margin-top: 8px; font-size: 0.92rem; }
.building-tile span { color: var(--muted); font-size: 0.78rem; }
.production-list { display: grid; gap: 8px; margin-bottom: 18px; }
.production-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(0, 2fr) repeat(3, minmax(86px, 0.55fr)) minmax(140px, 0.85fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
}
.production-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 0 0 34%;
  background: radial-gradient(circle at 72% 44%, rgba(116, 226, 161, 0.12), rgba(0, 221, 255, 0.06) 36%, transparent 68%);
  pointer-events: none;
}
.production-card > :not(.production-card-art):not(.production-building-art) {
  position: relative;
  z-index: 1;
}
.production-building-art {
  position: absolute;
  z-index: 0;
  right: clamp(104px, 30%, 260px);
  top: 50%;
  width: clamp(118px, 19vw, 184px);
  height: clamp(118px, 19vw, 184px);
  transform: translateY(-50%);
  object-fit: contain;
  opacity: 0.36;
  pointer-events: none;
  filter: contrast(1.08) saturate(1.12) brightness(1.12) drop-shadow(0 16px 22px rgba(0, 0, 0, 0.38));
}
.production-card-art {
  position: absolute;
  z-index: 0;
  right: clamp(22px, 18%, 150px);
  top: 50%;
  width: clamp(108px, 18vw, 170px);
  height: clamp(108px, 18vw, 170px);
  transform: translateY(-50%);
  object-fit: contain;
  opacity: 0.48;
  pointer-events: none;
  filter: contrast(1.08) saturate(1.16) brightness(1.08) drop-shadow(0 16px 22px rgba(0, 0, 0, 0.42));
}
.retail-production-card {
  border-color: rgba(116, 226, 161, 0.2);
}
.retail-card-actions,
.production-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.retail-group span {
  color: var(--teal-2);
}
.production-main strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.15;
  letter-spacing: 0;
}
.production-main span, .production-main small, .input-list, .stat span { color: var(--muted); font-size: 0.8rem; }
.production-main small { display: block; margin-top: 4px; color: var(--gold); }
.input-list { display: grid; gap: 4px; line-height: 1.35; }
.input-list span { display: block; }
.input-list em { color: var(--muted); font-style: normal; }
.input-ok { color: var(--teal-2); }
.input-missing { color: #ff6f6f !important; }
.stat b { display: block; margin-top: 3px; }
.good { color: var(--teal-2); }
.warn { color: var(--gold); }
.market-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.market-card { padding: 8px 10px; min-height: auto; }
.compact-market-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(118px, auto);
  gap: 10px;
  align-items: center;
  cursor: pointer;
}
.compact-market-row:hover {
  border-color: rgba(116, 226, 161, 0.48);
  background: rgba(73, 209, 125, 0.07);
}
.compact-market-row .market-main {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.market-name {
  display: block;
  min-width: 0;
}
.compact-market-row strong,
.compact-market-row .market-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-market-row small { color: var(--muted); font-weight: 800; white-space: nowrap; }
.market-price-cell {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 112px;
}
.market-price-cell b { white-space: nowrap; }
.market-detail-panel {
  margin-bottom: 8px;
  padding: 12px;
}
.market-detail-panel:empty { display: none; }
.world-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.world-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
}
.world-card.active {
  border-color: rgba(113, 235, 155, 0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(113,235,155,0.16);
}
.world-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.world-card-head span,
.world-card-head small,
.world-rules span {
  display: block;
  color: var(--muted);
}
.world-card-head strong {
  display: block;
  margin-top: 2px;
  font-size: 1.2rem;
}
.world-card-head b {
  color: var(--teal-2);
}
.world-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}
.world-rules section {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.world-rules b {
  display: block;
  margin-top: 3px;
  font-size: 0.9rem;
}
.market-detail-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
  margin-top: 8px;
  overflow: hidden;
}
.market-detail-grid-after-max {
  margin: 10px 0 8px;
}
.market-detail-grid::before {
  content: "";
  position: absolute;
  inset: 2px 8px auto auto;
  width: min(38%, 168px);
  aspect-ratio: 1;
  background-image: var(--market-detail-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.11;
  filter: saturate(1.15);
  pointer-events: none;
}
.market-detail-image {
  display: none;
  width: 68px;
  height: 68px;
  padding: 6px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
}
.market-detail-grid .plan-metrics {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 0;
}
.market-detail-grid .metric {
  min-height: 58px;
  padding: 8px 9px;
  background: linear-gradient(135deg, rgba(255,255,255,0.062), rgba(255,255,255,0.028));
}
.market-detail-grid .metric span {
  font-size: 0.72rem;
}
.market-detail-grid .metric b {
  font-size: 0.95rem;
  line-height: 1.15;
}
.market-detail-grid .metric b small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}
.market-control-label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}
.market-quality-select {
  display: grid;
  grid-template-columns: minmax(70px, 0.35fr) minmax(110px, 1fr);
  gap: 8px;
  align-items: center;
  margin: 8px 0 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.market-quality-select span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}
.market-quality-select select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(8, 22, 31, 0.94);
  padding: 0 10px;
  font: inherit;
  font-weight: 900;
}
.market-time-control {
  grid-template-columns: 50px minmax(96px, 1fr) 50px;
  margin-top: 5px;
}
.market-time-control.stepped-amount-control {
  grid-template-columns: 52px 52px minmax(76px, 1fr) 52px 52px;
}
.market-time-control.stepped-amount-control button {
  min-width: 0;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 0.88rem;
}
.market-time-control.stepped-amount-control input {
  min-width: 0;
}
.market-time-control .market-max-button {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
  text-align: center;
}
.retail-max-button {
  width: 100%;
  min-height: 42px;
  margin: 8px 0 10px;
  text-align: center;
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.market-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.market-toolbar input,
.market-toolbar select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(8, 22, 31, 0.94);
  padding: 0 10px;
  font: inherit;
}
.market-toolbar input::placeholder { color: var(--muted); }
.market-sort-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.market-sort-buttons .mini-button {
  min-height: 40px;
}
.market-sort-buttons .mini-button.active {
  border-color: rgba(116, 226, 161, 0.62);
  background: linear-gradient(135deg, var(--accent), var(--teal));
  color: #f4fffb;
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
}
.market-stock-sort-button small {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.1;
}
.segmented.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.market-card header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; justify-content: space-between; gap: 8px; align-items: start; margin-bottom: 10px; }
.market-icon, .card-image img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
}
.card-image img { width: 54px; height: 54px; }
.market-card header strong { font-size: 1rem; }
.market-card header span { color: var(--muted); font-size: 0.75rem; }
.market-row { padding: 5px 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.market-order-book {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.market-offer-price {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.market-offer-price span {
  color: var(--muted);
  font-weight: 800;
}
.market-offer-price input {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  font: inherit;
  font-weight: 900;
}
.market-price-stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 48px;
  gap: 6px;
  align-items: stretch;
}
.market-price-step {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--teal-2);
  background: rgba(116, 226, 161, 0.1);
  font: inherit;
  font-weight: 950;
  cursor: pointer;
}
.market-price-step:hover {
  border-color: rgba(116, 226, 161, 0.58);
  background: rgba(116, 226, 161, 0.16);
}
.market-undercut-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 205, 78, 0.58);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 197, 46, 0.18), rgba(0, 214, 199, 0.12));
  color: #ffe8a0;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.market-undercut-button:hover:not(:disabled) {
  border-color: rgba(255, 219, 112, 0.9);
  box-shadow: 0 0 18px rgba(255, 197, 46, 0.18);
}
.market-undercut-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.market-offer-price small {
  color: var(--muted);
}
.market-value-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.market-value-preview div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.market-value-preview span,
.market-value-preview small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}
.market-value-preview strong {
  display: block;
  margin-top: 3px;
  color: var(--teal-2);
  font-size: 0.95rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.market-value-preview small {
  margin-top: 2px;
}
.market-value-preview div.market-cost-highlight {
  border-color: rgba(240, 184, 58, 0.58);
  background: linear-gradient(135deg, rgba(240, 184, 58, 0.16), rgba(240, 184, 58, 0.045));
}
.market-value-preview div.market-cost-highlight span,
.market-value-preview div.market-cost-highlight strong {
  color: var(--gold);
}
.market-value-preview div.market-profit-highlight {
  border-color: rgba(128, 239, 170, 0.56);
  background: linear-gradient(135deg, rgba(13, 240, 140, 0.14), rgba(28, 198, 236, 0.055));
}
.market-value-preview div.market-profit-highlight span,
.market-value-preview div.market-profit-highlight strong {
  color: var(--green);
}
.market-value-preview div.market-profit-highlight.negative {
  border-color: rgba(240, 184, 58, 0.58);
  background: linear-gradient(135deg, rgba(240, 184, 58, 0.16), rgba(239, 89, 89, 0.06));
}
.market-value-preview div.market-profit-highlight.negative span,
.market-value-preview div.market-profit-highlight.negative strong {
  color: var(--gold);
}
.market-offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.market-offer-row.own-offer-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.market-offer-row .market-player-link {
  color: var(--text);
}
.market-offer-row.own-offer-row strong,
.market-offer-row.own-offer-row .market-player-link,
.market-offer-row .own-offer-value {
  color: var(--green);
}
.market-offer-row span,
.market-offer-row small {
  display: block;
  min-width: 0;
}
.market-offer-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}
.market-offer-row b {
  color: var(--teal-2);
  white-space: nowrap;
}
.market-offer-row .mini-button {
  min-height: 32px;
  padding: 0 8px;
}
.market-offer-row.fill b {
  color: var(--gold);
}
.quality-card, .chain-card { padding: 12px; margin-bottom: 10px; }
.quality-ring {
  width: 104px;
  height: 104px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 8px solid rgba(73, 209, 125, 0.28);
  background: radial-gradient(circle, rgba(73,209,125,0.18), rgba(29,159,232,0.06));
}
.quality-ring span { font-size: 1.8rem; font-weight: 900; color: var(--teal-2); }
.quality-card p { color: var(--muted); line-height: 1.45; margin: 0; }
.quality-summary p { margin-bottom: 12px; }
.quality-meter {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  margin-bottom: 12px;
}
.quality-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue-2));
}
.quality-stats,
.quality-bonus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.quality-bonus-grid {
  align-items: stretch;
}
.quality-stats div {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.quality-stats span { display: block; color: var(--muted); font-size: 0.78rem; }
.quality-stats b { display: block; margin-top: 3px; color: var(--teal-2); }
.quality-rule {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(73, 209, 125, 0.24);
  border-radius: var(--radius);
  background: rgba(73, 209, 125, 0.06);
}
.quality-rule strong { color: var(--teal-2); overflow-wrap: anywhere; }
.quality-rule span { color: var(--muted); line-height: 1.42; }
.quality-info-tile {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.quality-info-tile span,
.quality-info-tile b {
  display: block;
}
.quality-info-tile span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}
.quality-info-tile b {
  margin-top: 4px;
  color: var(--teal-2);
  line-height: 1.22;
}
.quality-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 10px;
}
.quality-resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.quality-resource {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.quality-resource img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.quality-resource-main {
  min-width: 0;
}
.quality-resource-main strong,
.quality-resource-main small,
.quality-resource-main em {
  display: block;
}
.quality-resource-main strong {
  color: var(--text);
  font-size: 1rem;
}
.quality-resource-main small {
  margin-top: 3px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.35;
}
.quality-resource-main em {
  margin-top: 5px;
  color: var(--teal-2);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}
.quality-resource-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.quality-resource-levels span {
  display: block;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(0,0,0,0.12);
  font-size: 0.74rem;
  font-weight: 800;
}
.quality-resource-levels b {
  display: block;
  margin-top: 3px;
  color: var(--teal-2);
  font-size: 1rem;
}
.quality-resource .mini-button {
  width: 100%;
  min-height: 38px;
}
.quality-missing {
  color: var(--danger);
  font-weight: 900;
}
.quality-help-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(116, 226, 161, 0.22);
  border-radius: var(--radius);
  background: rgba(73, 209, 125, 0.055);
}
.quality-help-card + .quality-help-card {
  margin-top: 8px;
}
.quality-help-card strong {
  color: var(--teal-2);
}
.quality-help-card span {
  color: var(--muted);
  line-height: 1.4;
}
.chain-item { padding: 8px 0; border-top: 1px solid var(--line); }
.chain-item strong { display: block; }
.chain-item span { color: var(--muted); font-size: 0.8rem; }
@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr; position: static; }
  .app-shell { padding-top: 10px; }
  .resource-strip { overflow: hidden; }
  .top-actions { overflow-x: auto; }
  .hero-grid, .workspace { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .metrics-grid, .production-card { grid-template-columns: 1fr; }
  .production-card {
    padding-right: min(38vw, 150px);
    min-height: 190px;
  }
  .production-card::before {
    inset: 0 0 0 24%;
    background: radial-gradient(circle at 76% 38%, rgba(116, 226, 161, 0.14), rgba(0, 221, 255, 0.07) 38%, transparent 70%);
  }
  .production-card-art {
    right: 14px;
    top: 42%;
    width: min(34vw, 132px);
    height: min(34vw, 132px);
    opacity: 0.5;
  }
  .production-building-art {
    right: min(25vw, 104px);
    top: 37%;
    width: min(36vw, 142px);
    height: min(36vw, 142px);
    opacity: 0.38;
  }
  .production-main strong {
    font-size: 1.22rem;
  }
  .production-card-actions {
    margin-right: calc(-1 * min(38vw, 150px));
  }
  .market-grid { grid-template-columns: 1fr; }
  .market-value-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-value-preview div:last-child { grid-column: 1 / -1; }
  .compact-market-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .compact-market-row small {
    grid-column: span 1;
  }
  .building-map { grid-template-columns: 1fr 1fr; }
  .top-actions { grid-template-columns: repeat(4, minmax(80px, 1fr)); }
}

.tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tile-top b {
  color: var(--teal-2);
  font-size: 0.86rem;
}
.building-tile.owned {
  border-color: rgba(73, 209, 125, 0.45);
}
.building-tile.under-construction {
  border-color: rgba(240, 184, 58, 0.42);
  background: linear-gradient(180deg, rgba(52, 51, 28, 0.92), rgba(9, 25, 34, 0.92));
}
.building-tile.build-flash {
  animation: buildFlash 900ms ease-out 2;
  box-shadow: 0 0 0 1px rgba(116, 226, 161, 0.7), 0 0 26px rgba(73, 209, 125, 0.28);
}
.building-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.78rem;
}
.building-meta b { color: var(--text); font-size: 0.8rem; }
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.status-row small { color: var(--muted); font-size: 0.75rem; }
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  background: rgba(255,255,255,0.04);
}
.good-chip {
  color: var(--teal-2);
  border-color: rgba(73, 209, 125, 0.42);
  background: rgba(73, 209, 125, 0.08);
}
.bad-chip {
  color: var(--gold);
  border-color: rgba(240, 184, 58, 0.42);
  background: rgba(240, 184, 58, 0.08);
}
.build-chip {
  color: var(--gold);
  border-color: rgba(240, 184, 58, 0.54);
  background: rgba(240, 184, 58, 0.12);
}
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
}
.segmented button {
  flex: 1 1 120px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}
.segmented button.active {
  color: #f4fffb;
  border-color: rgba(116, 226, 161, 0.8);
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
}
.segmented button.inactive,
.segmented button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  background: rgba(255,255,255,0.025);
}
.group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.group-title span { color: var(--text); font-weight: 900; }
.group-title b { color: var(--teal-2); }
.action-button, .manager-choice {
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.action-button {
  width: 100%;
  margin-top: 8px;
  padding: 7px 9px;
}
.action-button.primary, .manager-choice.active {
  color: #f4fffb;
  border-color: rgba(116, 226, 161, 0.8);
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
}
.tutorial-pulse-target {
  position: relative;
  z-index: 45;
  scroll-margin-block: 38vh;
  scroll-margin-inline: 20vw;
  border-color: rgba(255, 92, 92, 0.96) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.72), 0 0 22px rgba(255, 80, 80, 0.36) !important;
  animation: tutorialButtonPulse 1.05s ease-in-out infinite;
}
@keyframes tutorialButtonPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.68), 0 0 20px rgba(255, 80, 80, 0.32);
  }
  50% {
    transform: translateY(-1px) scale(1.025);
    box-shadow: 0 0 0 7px rgba(255, 80, 80, 0.08), 0 0 28px rgba(255, 80, 80, 0.48);
  }
}
.action-button.premium {
  border-color: rgba(240, 184, 58, 0.52);
  color: var(--gold);
  background: rgba(240, 184, 58, 0.08);
}
.warehouse-surplus-sell-all {
  width: 100%;
  margin-top: 10px;
}
.premium-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.premium-layout {
  display: grid;
  gap: 12px;
  width: min(1180px, 100%);
  margin: 0 auto;
}
.premium-hero-card,
.premium-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.premium-hero-card {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  align-items: stretch;
  border-color: rgba(240, 184, 58, 0.35);
  background: linear-gradient(135deg, rgba(20, 44, 58, 0.98), rgba(28, 53, 58, 0.96));
}
.premium-hero-copy {
  display: grid;
  align-content: center;
  gap: 6px;
}
.premium-hero-copy span,
.premium-status-card span,
.daily-bonus-main span,
.premium-benefit-list span,
.daily-streak-day span,
.daily-streak-day small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}
.premium-hero-copy strong {
  color: var(--gold);
  font-size: 1.65rem;
}
.premium-hero-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--text);
  line-height: 1.35;
}
.premium-status-card {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(240, 184, 58, 0.32);
  border-radius: var(--radius);
  background: rgba(240, 184, 58, 0.08);
}
.premium-status-card b {
  color: var(--gold);
  font-size: 1.55rem;
}
.daily-bonus-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.daily-bonus-main strong {
  display: block;
  margin-bottom: 3px;
  font-size: 1.18rem;
}
.daily-bonus-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(240, 184, 58, 0.45);
  border-radius: 8px;
  color: #061018;
  background: linear-gradient(135deg, var(--gold), var(--green));
  font-weight: 950;
}
.daily-bonus-box {
  display: grid;
  gap: 10px;
}
.daily-bonus-box.compact {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 320px);
  align-items: center;
  min-width: 0;
}
.daily-bonus-box.compact .premium-hint {
  grid-column: 1 / -1;
}
.daily-bonus-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.video-bonus-panel {
  border-color: rgba(240, 184, 58, 0.38);
  background:
    radial-gradient(circle at 7% 16%, rgba(240, 184, 58, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(240,184,58,0.08), rgba(0,188,212,0.08)),
    var(--panel);
}
.video-bonus-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  gap: 10px;
  align-items: center;
}
.video-bonus-layout.video-loans-reward-large {
  grid-template-columns: minmax(142px, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 12px;
}
.video-loans-reward-art {
  min-height: 160px;
}
.video-loans-reward-art img {
  width: min(190px, 136%);
}
.video-loans-reward-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 10px;
}
.video-loans-reward-main {
  grid-template-columns: 1fr;
}
.video-bonus-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.video-bonus-main strong {
  display: block;
  margin-bottom: 3px;
  color: var(--green);
  font-size: 1.12rem;
}
.video-bonus-main span,
.video-bonus-claim small {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}
.video-bonus-claim {
  display: grid;
  gap: 8px;
}
.video-bonus-meter {
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(0,0,0,0.24);
}
.video-bonus-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--green), var(--teal));
}
.video-bonus-title strong {
  padding: 3px 10px;
  border: 1px solid rgba(240, 184, 58, 0.34);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(240, 184, 58, 0.11);
}
.video-reward-box {
  position: relative;
  padding: 4px 0 0;
}
.daily-bonus-box.compact.video-reward-large {
  grid-template-columns: minmax(148px, 0.92fr) minmax(0, 1.08fr);
  gap: 12px;
  align-items: stretch;
}
.video-reward-art {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 166px;
  margin: 0;
  place-items: center;
  border: 1px solid rgba(240, 184, 58, 0.24);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 58%, rgba(17, 223, 184, 0.25), transparent 56%),
    linear-gradient(180deg, rgba(240, 184, 58, 0.12), rgba(4, 18, 27, 0.18));
  overflow: hidden;
}
.video-reward-art::before {
  content: "";
  position: absolute;
  inset: auto 12% 6px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(17, 223, 184, 0.32), transparent 68%);
  filter: blur(4px);
}
.video-reward-art img {
  position: relative;
  z-index: 1;
  width: min(198px, 130%);
  max-width: none;
  height: auto;
  transform: translateY(4px);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.34)) drop-shadow(0 0 18px rgba(17, 223, 184, 0.16));
}
.video-reward-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 9px;
}
.video-reward-main {
  min-width: 0;
}
.video-reward-icon {
  position: relative;
  overflow: hidden;
  border-color: rgba(240, 184, 58, 0.62);
  border-radius: 14px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.36), transparent 24%),
    linear-gradient(135deg, #f3c647 0%, #79dc87 58%, #12c8c0 100%);
  box-shadow: 0 12px 26px rgba(0,0,0,0.22), 0 0 20px rgba(240, 184, 58, 0.16);
}
.video-reward-chest {
  isolation: isolate;
  color: transparent;
}
.video-reward-chest span {
  display: block;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.chest-lid {
  left: 10px;
  right: 10px;
  top: 13px;
  height: 19px;
  border: 2px solid rgba(4, 17, 24, 0.86);
  border-bottom: 0;
  border-radius: 16px 16px 4px 4px;
  background:
    linear-gradient(90deg, rgba(4,17,24,0.52) 0 12%, transparent 12% 42%, rgba(255,255,255,0.2) 42% 58%, transparent 58% 88%, rgba(4,17,24,0.52) 88%),
    linear-gradient(180deg, #ffe07b, #d9952e);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.28);
}
.chest-body {
  left: 8px;
  right: 8px;
  bottom: 10px;
  height: 31px;
  border: 2px solid rgba(4, 17, 24, 0.86);
  border-radius: 5px 5px 10px 10px;
  background:
    linear-gradient(90deg, rgba(4,17,24,0.45) 0 14%, transparent 14% 42%, rgba(255,255,255,0.18) 42% 58%, transparent 58% 86%, rgba(4,17,24,0.45) 86%),
    linear-gradient(180deg, #f4b748, #b96c25);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.14), 0 5px 10px rgba(0,0,0,0.18);
}
.chest-band {
  left: 28px;
  top: 14px;
  width: 11px;
  height: 45px;
  border: 1px solid rgba(4, 17, 24, 0.74);
  border-radius: 4px;
  background: linear-gradient(180deg, #f8f3b8, #cda54f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.3);
}
.chest-lock {
  left: 24px;
  bottom: 18px;
  width: 19px;
  height: 15px;
  border: 2px solid rgba(4, 17, 24, 0.82);
  border-radius: 5px;
  background: linear-gradient(180deg, #fff3a8, #d8aa38);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 2px 4px rgba(0,0,0,0.18);
}
.chest-lock::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 3px;
  height: 5px;
  border-radius: 999px;
  background: rgba(4, 17, 24, 0.72);
}
.video-reward-claim {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.video-reward-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.video-reward-steps i {
  display: grid;
  min-height: 28px;
  place-items: center;
  border: 1px solid rgba(240, 184, 58, 0.42);
  border-radius: 8px;
  color: #061018;
  background: linear-gradient(135deg, var(--gold), var(--green));
  font-style: normal;
  font-weight: 950;
}
.video-reward-steps i.used {
  border-color: rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.055);
}
@media (max-width: 460px) {
  .video-bonus-layout.video-loans-reward-large {
    grid-template-columns: minmax(132px, 0.86fr) minmax(0, 1.14fr);
    gap: 10px;
  }
  .video-loans-reward-art {
    min-height: 146px;
  }
  .video-loans-reward-art img {
    width: min(174px, 138%);
  }
  .daily-bonus-box.compact.video-reward-large {
    grid-template-columns: minmax(138px, 0.88fr) minmax(0, 1.12fr);
    gap: 10px;
  }
  .video-reward-art {
    min-height: 156px;
  }
  .video-reward-art img {
    width: min(184px, 136%);
  }
  .video-reward-main strong {
    font-size: 1.05rem;
  }
  .video-reward-steps {
    gap: 5px;
  }
  .video-reward-steps i {
    min-height: 25px;
  }
}
.daily-streak-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}
.daily-streak-grid.compact {
  display: flex;
  grid-template-columns: none;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  overscroll-behavior-inline: contain;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.daily-streak-grid.compact .daily-streak-day {
  flex: 0 0 92px;
  min-width: 0;
  touch-action: pan-x;
}
.daily-streak-day {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.daily-streak-day.active {
  border-color: rgba(0, 245, 140, 0.65);
  background: linear-gradient(135deg, rgba(0,245,140,0.16), rgba(0,188,212,0.09));
  box-shadow: inset 0 0 0 1px rgba(0,245,140,0.12);
}
.daily-streak-day.claimed {
  border-color: rgba(126, 244, 160, 0.5);
  opacity: 0.72;
}
.daily-streak-day b {
  display: block;
  margin: 5px 0 3px;
  color: var(--green);
  font-size: 0.92rem;
}
.daily-streak-day small {
  display: block;
  line-height: 1.25;
}
.daily-reward-icon {
  display: grid;
  place-items: center;
  height: 30px;
  margin-top: 5px;
}
.daily-reward-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.daily-reward-symbol {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 950;
}
.daily-reward-symbol.cash {
  color: #04131b;
  background: linear-gradient(135deg, var(--green), var(--cyan));
}
.daily-reward-symbol.gold {
  color: #241300;
  background: linear-gradient(135deg, #ffe88b, #d99a18);
  box-shadow: 0 0 12px rgba(240,184,58,0.28);
}
.daily-bonus-popup {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(104px + env(safe-area-inset-bottom));
  z-index: 760;
  display: grid;
  gap: 9px;
  width: min(540px, calc(100vw - 24px));
  padding: 13px;
  border: 1px solid rgba(0,245,140,0.48);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(6,27,38,0.985), rgba(13,46,53,0.985));
  box-shadow: 0 18px 50px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06);
}
.daily-bonus-popup-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding-right: 26px;
}
.daily-bonus-popup-head .daily-bonus-icon {
  width: 44px;
  height: 44px;
}
.daily-bonus-popup-head strong,
.daily-bonus-popup-head span {
  display: block;
}
.daily-bonus-popup-head strong {
  color: var(--green);
  font-size: 1rem;
}
.daily-bonus-popup-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.daily-bonus-popup-close {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 30px;
  height: 30px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.daily-bonus-popup .daily-streak-grid.compact {
  gap: 5px;
  direction: rtl;
}
.daily-bonus-popup .daily-streak-grid.compact .daily-streak-day {
  flex-basis: 68px;
  padding: 6px;
  text-align: center;
  direction: ltr;
}
.daily-bonus-popup .daily-streak-day span,
.daily-bonus-popup .daily-streak-day small {
  font-size: 0.66rem;
}
.daily-bonus-popup .daily-streak-day b {
  margin: 2px 0;
  font-size: 0.8rem;
}
.daily-bonus-popup-claim {
  min-height: 39px;
}
@media (max-width: 520px) {
  .daily-bonus-popup {
    right: 8px;
    bottom: calc(98px + env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    padding: 10px;
  }
}
.premium-benefit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.premium-benefit-list div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.premium-benefit-list b {
  display: block;
  margin-bottom: 4px;
  color: var(--teal-2);
}
.premium-shop-card {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(240, 184, 58, 0.42);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(19, 45, 58, 0.98), rgba(13, 32, 43, 0.98)),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.premium-shop-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--green), var(--teal));
}
.premium-shop-card > * {
  position: relative;
  z-index: 1;
}
.menu-kicker {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.premium-shop-card h2 {
  margin: 0 0 2px;
  color: var(--text);
  font-size: 1.65rem;
}
.premium-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.premium-plan-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(240, 184, 58, 0.32);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.premium-plan-card.is-owned {
  border-color: rgba(126, 244, 160, 0.62);
  background: rgba(0, 245, 140, 0.08);
}
.premium-plan-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.15;
}
.premium-plan-card p,
.premium-plan-card small {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.35;
}
.premium-plan-card .action-button {
  margin-top: auto;
}
.premium-plan-price {
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff7d4;
  background: linear-gradient(180deg, rgba(240, 184, 58, 0.95), rgba(133, 89, 20, 0.95));
  font-weight: 1000;
  box-shadow: inset 0 -2px 0 rgba(41, 23, 4, 0.22);
}
.adfree-stamp {
  position: absolute;
  top: 9px;
  right: -24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transform: rotate(12deg);
  padding: 7px 28px;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #fff8d2;
  background: linear-gradient(135deg, rgba(240, 184, 58, 0.98), rgba(37, 185, 111, 0.9));
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
}
.adfree-stamp small {
  display: block;
  color: inherit;
  font-size: 0.54rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.premium-lifetime-callout {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: #fff5c2;
  background: linear-gradient(90deg, rgba(23, 37, 34, 0.98), rgba(122, 83, 19, 0.92), rgba(37, 185, 111, 0.74));
  font-size: 0.95rem;
  text-align: center;
  text-transform: uppercase;
}
.premium-pro-callout {
  color: #fff9d8;
  background: linear-gradient(90deg, rgba(13, 19, 23, 0.98), rgba(138, 90, 18, 0.96), rgba(242, 198, 75, 0.86));
}
.premium-plan-lifetime {
  border-color: rgba(240, 184, 58, 0.52);
  background: linear-gradient(145deg, rgba(240, 184, 58, 0.11), rgba(255,255,255,0.035));
}
.premium-plan-pro {
  border-color: rgba(240, 184, 58, 0.74);
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.11), transparent 30%),
    linear-gradient(145deg, rgba(240, 184, 58, 0.16), rgba(37, 185, 111, 0.06), rgba(255,255,255,0.035));
}
.premium-test-card {
  border-color: rgba(116, 226, 161, 0.32);
  background:
    radial-gradient(circle at 12% 4%, rgba(255,255,255,0.08), transparent 35%),
    linear-gradient(135deg, rgba(240, 184, 58, 0.08), rgba(116, 226, 161, 0.06));
}
.detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.detail-stat-grid span {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255,255,255,0.035);
  font-weight: 800;
}
.detail-stat-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
}
.detail-stat-grid small {
  display: block;
  margin-top: 2px;
}
.premium-benefit-list {
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}
.premium-benefit-list li {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.045);
  font-weight: 900;
}
.premium-benefit-list li::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 0.78rem;
}
.premium-plan-card .premium-benefit-list {
  grid-template-columns: 1fr;
}
.timer-boost-card {
  border-color: rgba(91, 255, 179, 0.42);
}
.timer-boost-meter {
  margin: 10px 0;
}
.timer-boost-inline {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(91, 255, 179, 0.38);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}
.premium-shop-card > small {
  display: block;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.35;
}
@media (max-width: 820px) {
  .premium-hero-card,
  .premium-benefit-list,
  .premium-plan-grid,
  .detail-stat-grid,
  .daily-bonus-box.compact {
    grid-template-columns: 1fr;
  }
  .daily-streak-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .daily-bonus-actions {
    grid-template-columns: 1fr;
  }
  .video-bonus-layout {
    grid-template-columns: 1fr;
  }
  .stock-market-summary,
  .stock-row,
  .stock-detail-head,
  .stock-detail-grid,
  .stock-trade-panel,
  .stock-detail-actions {
    grid-template-columns: 1fr;
  }
  .stock-sparkline {
    width: 100%;
  }
  .stock-price {
    text-align: left;
  }
}
.action-button:disabled, .manager-choice:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 80;
  width: min(360px, calc(100vw - 28px));
  padding: 11px 14px;
  border: 1px solid rgba(116, 226, 161, 0.42);
  border-radius: var(--radius);
  color: #061018;
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
  font-size: 0.88rem;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.app-toast.error,
.app-toast.reminder {
  color: var(--text);
  border-color: rgba(240, 184, 58, 0.58);
  background: linear-gradient(180deg, rgba(25, 48, 59, 0.98), rgba(9, 24, 33, 0.98));
  box-shadow: 0 16px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.07);
}
.app-toast.reminder {
  border-color: rgba(128, 239, 170, 0.5);
}
.app-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.manager-choice {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  text-align: left;
}
.active-manager-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 86px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(123, 213, 239, 0.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.active-manager-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--radius);
}
.active-manager-preview strong,
.active-manager-preview span {
  display: block;
}
.active-manager-preview span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.job-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.job-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.55fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(73, 209, 125, 0.26);
  border-radius: var(--radius);
  background: rgba(73, 209, 125, 0.065);
}
.job-card strong, .job-card span { display: block; }
.job-card span { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.job-card i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.job-card i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue-2));
  transition: width 0.35s linear;
}
.job-timer-boost {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(110px, 1fr) minmax(190px, auto);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(82, 220, 190, 0.3);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(26, 126, 112, 0.16), rgba(31, 111, 173, 0.1));
}
.job-timer-boost-head strong {
  color: var(--accent);
  font-size: 0.84rem;
}
.job-timer-boost-pips {
  display: grid;
  grid-template-columns: repeat(5, minmax(18px, 1fr));
  gap: 4px;
}
.job-timer-boost-pips span {
  height: 7px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.job-timer-boost-pips span.is-filled {
  background: linear-gradient(90deg, var(--green), var(--teal));
  box-shadow: 0 0 8px rgba(65, 231, 172, 0.3);
}
.job-timer-boost-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.job-timer-boost-actions .mini-button {
  min-height: 38px;
  min-width: 0;
  padding: 7px 9px;
  white-space: normal;
  font-size: 0.76rem;
}
.job-timer-boost-actions .boost-video {
  border-color: rgba(55, 208, 255, 0.56);
  color: #d7f6ff;
  background: linear-gradient(135deg, rgba(15, 120, 142, 0.38), rgba(19, 79, 125, 0.4));
}
.job-timer-boost-actions .boost-gold {
  border-color: rgba(255, 224, 126, 0.74);
  color: #2b1b00;
  background: linear-gradient(135deg, #ffe59a, #f1b72f 58%, #ffda68);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.job-timer-boost-actions .mini-button:disabled {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--line);
  text-shadow: none;
}
.job-timer-boost-max {
  justify-self: end;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.76rem;
}
.mini-button.danger {
  color: #ffd8d8;
  border-color: rgba(239, 89, 89, 0.48);
  background: rgba(239, 89, 89, 0.12);
}
@media (max-width: 680px) {
  .job-timer-boost {
    grid-template-columns: minmax(90px, auto) minmax(110px, 1fr);
    gap: 7px;
  }
  .job-timer-boost-actions,
  .job-timer-boost-max {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 420px) {
  .job-timer-boost-actions {
    grid-template-columns: 1fr;
  }
  .quick-production-collapsed {
    align-items: stretch;
    flex-direction: column;
  }
  .quick-production-collapsed b {
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}
.mini-button.danger:hover { border-color: var(--red); color: #fff; }
.empty-state {
  padding: 11px;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
.market-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.production-duration {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.section-toggle-button {
  width: 100%;
  min-height: 38px;
  display: grid;
  place-items: center;
  align-items: center;
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.035);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
}
.section-toggle-button:hover {
  border-color: rgba(116, 226, 161, 0.48);
  background: rgba(116, 226, 161, 0.08);
}
.global-menu-toggle {
  min-height: 30px;
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
}
.global-menu-content[hidden] {
  display: none;
}
.quick-production-panel,
.production-detail-panel {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(240, 184, 58, 0.32);
  border-radius: var(--radius);
  background: rgba(240, 184, 58, 0.055);
}
.quick-production-panel:has(.quick-production-collapsed) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(246, 194, 67, 0.9);
  background: linear-gradient(135deg, rgba(246, 194, 67, 0.1), rgba(0, 200, 250, 0.08));
  box-shadow:
    0 0 0 1px rgba(246, 194, 67, 0.12),
    0 0 18px rgba(246, 194, 67, 0.16),
    inset 0 0 22px rgba(246, 194, 67, 0.05);
  animation: quickProductionGoldPulse 2.6s ease-in-out infinite;
}
.quick-production-panel:has(.quick-production-collapsed)::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -45% auto -45% -32%;
  width: 24%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 235, 166, 0.34), transparent);
  animation: quickProductionGoldSweep 3.8s ease-in-out infinite;
}
.quick-production-collapsed {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 218, 105, 0.52);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 50%, rgba(246, 194, 67, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(14, 61, 59, 0.94), rgba(11, 52, 68, 0.96));
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.quick-production-collapsed strong,
.quick-production-collapsed small {
  display: block;
}
.quick-production-collapsed strong {
  color: #ffe59a;
  font-size: 1.05rem;
  text-shadow: 0 0 12px rgba(246, 194, 67, 0.28);
}
.quick-production-collapsed small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}
.quick-production-collapsed b {
  white-space: nowrap;
  border: 1px solid rgba(255, 232, 154, 0.86);
  color: #211704;
  background: linear-gradient(135deg, #ffe59a, #f1b72f 58%, #ffda68);
  border-radius: var(--radius);
  padding: 8px 10px;
  box-shadow:
    0 0 0 1px rgba(246, 194, 67, 0.14),
    0 0 16px rgba(246, 194, 67, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
  animation: quickProductionCtaPulse 1.9s ease-in-out infinite;
}
.quick-production-collapsed:hover {
  border-color: rgba(255, 232, 154, 0.86);
  background:
    radial-gradient(circle at 12% 50%, rgba(246, 194, 67, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(15, 71, 64, 0.98), rgba(12, 61, 78, 0.98));
}
.quick-production-collapsed:active b {
  transform: translateY(1px);
}
@keyframes quickProductionGoldPulse {
  0%, 100% {
    border-color: rgba(246, 194, 67, 0.68);
    box-shadow: 0 0 0 1px rgba(246, 194, 67, 0.1), 0 0 12px rgba(246, 194, 67, 0.12), inset 0 0 18px rgba(246, 194, 67, 0.04);
  }
  50% {
    border-color: rgba(255, 226, 133, 1);
    box-shadow: 0 0 0 1px rgba(255, 226, 133, 0.25), 0 0 26px rgba(246, 194, 67, 0.28), inset 0 0 24px rgba(246, 194, 67, 0.08);
  }
}
@keyframes quickProductionGoldSweep {
  0%, 58% { left: -32%; opacity: 0; }
  66% { opacity: 1; }
  88%, 100% { left: 118%; opacity: 0; }
}
@keyframes quickProductionCtaPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(246, 194, 67, 0.14), 0 0 12px rgba(246, 194, 67, 0.22); }
  50% { box-shadow: 0 0 0 3px rgba(246, 194, 67, 0.12), 0 0 22px rgba(246, 194, 67, 0.46); }
}
@media (prefers-reduced-motion: reduce) {
  .quick-production-panel:has(.quick-production-collapsed),
  .quick-production-panel:has(.quick-production-collapsed)::before,
  .quick-production-collapsed b {
    animation: none;
  }
}
.city-loan-video-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(246, 194, 67, 0.9);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(246, 194, 67, 0.1), rgba(0, 200, 250, 0.08));
  box-shadow: 0 0 0 1px rgba(246, 194, 67, 0.12), 0 0 18px rgba(246, 194, 67, 0.16), inset 0 0 22px rgba(246, 194, 67, 0.05);
  animation: quickProductionGoldPulse 2.6s ease-in-out infinite;
}
.city-loan-video-wrap::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -45% auto -45% -32%;
  width: 24%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 235, 166, 0.34), transparent);
  animation: quickProductionGoldSweep 3.8s ease-in-out infinite;
}
.city-loan-video-button {
  min-height: 72px;
}
.city-loan-video-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
.city-loan-video-wrap:has(.city-loan-video-button:disabled),
.city-loan-video-wrap:has(.city-loan-video-button:disabled)::before {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .city-loan-video-wrap,
  .city-loan-video-wrap::before,
  .city-loan-video-button b {
    animation: none;
  }
}
.production-detail-panel:empty { display: none; }
.quick-panel-head,
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.quick-panel-head span,
.quick-panel-head strong,
.detail-head span,
.detail-head strong,
.detail-head small {
  display: block;
}
.quick-panel-head span,
.detail-head span,
.detail-head small {
  color: var(--muted);
  font-size: 0.8rem;
}
.quick-panel-head strong,
.detail-head strong {
  margin-top: 2px;
  color: var(--gold);
}
.quick-panel-head b {
  color: var(--teal-2);
  text-align: right;
}
.quick-panel-head b em {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.2;
}
.quick-retail-selectors {
  display: grid;
  gap: 7px;
  margin: 8px 0 10px;
}
.quick-retail-select {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(120px, 1.05fr);
  gap: 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(128, 239, 170, 0.26);
  border-radius: var(--radius);
  background: rgba(12, 245, 119, 0.045);
}
.quick-retail-select span,
.quick-retail-select small {
  min-width: 0;
  color: var(--muted);
  font-weight: 800;
}
.quick-retail-select span {
  color: var(--text);
}
.quick-retail-select small {
  grid-column: 1 / -1;
  font-size: 0.76rem;
}
.quick-retail-select select {
  width: 100%;
  min-width: 0;
  height: 38px;
  border-radius: var(--radius);
  border: 1px solid rgba(128, 239, 170, 0.36);
  background: rgba(2, 12, 20, 0.76);
  color: var(--text);
  font-weight: 900;
  padding: 0 10px;
}
.construction-material-card {
  display: grid;
  gap: 7px;
  margin: 8px 0 10px;
  padding: 8px;
  border: 1px solid rgba(240, 184, 58, 0.26);
  border-radius: var(--radius);
  background: rgba(240, 184, 58, 0.045);
}
.construction-material-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.construction-material-list button,
.construction-material-empty {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.construction-material-list button:hover,
.construction-material-list button:focus-visible {
  border-color: rgba(116, 226, 161, 0.56);
  background: rgba(116, 226, 161, 0.08);
}
.construction-material-list button.ready {
  border-color: rgba(128, 239, 170, 0.35);
}
.construction-material-list button.missing {
  border-color: rgba(240, 184, 58, 0.56);
  background: rgba(240, 184, 58, 0.1);
}
.construction-material-list span,
.construction-material-list small,
.construction-material-empty {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}
.construction-material-list span {
  position: relative;
  min-height: 34px;
  padding-left: 38px;
}
.construction-material-list span img {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
}
.construction-material-list b {
  display: block;
  margin-top: 2px;
  color: var(--green);
  font-size: 0.88rem;
}
.construction-material-list .missing b {
  color: var(--gold);
}
.quick-panel-head b small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}
.duration-stepper {
  display: grid;
  grid-template-columns: minmax(54px, 0.52fr) minmax(110px, 1.7fr) minmax(54px, 0.52fr);
  gap: 6px;
  margin-bottom: 10px;
}
.duration-stepper button,
.quick-time-control button,
.quick-time-control input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.04);
  font: inherit;
  font-weight: 900;
}
.duration-stepper button { cursor: pointer; font-size: 0.8rem; }
.production-setup-control {
  display: grid;
  grid-template-columns: 66px minmax(118px, 1fr) 66px;
  gap: 7px;
  margin-bottom: 10px;
}
.production-setup-control button,
.production-setup-control select {
  min-height: 38px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.04);
  font: inherit;
  font-weight: 900;
}
.production-setup-control select {
  text-align: center;
  color: var(--teal-2);
}
.production-setup-control.duration-tuner {
  position: relative;
  overflow: hidden;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(29, 232, 213, 0.38);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(29, 232, 213, 0.055) 50%, transparent 50.3%),
    radial-gradient(circle at 50% 34%, rgba(29, 232, 213, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(7, 27, 39, 0.96), rgba(4, 17, 26, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), inset 0 -22px 42px rgba(0,0,0,0.18), 0 12px 30px rgba(0,0,0,0.24);
}
.production-setup-control.duration-tuner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,0.014) 35px 36px);
  opacity: 0.8;
}
.duration-tuner-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--teal-2);
  font-size: 0.96rem;
  font-weight: 950;
  text-align: center;
}
.duration-tuner-title::before,
.duration-tuner-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(29, 232, 213, 0.55));
}
.duration-tuner-title::after {
  background: linear-gradient(90deg, rgba(29, 232, 213, 0.55), transparent);
}
.duration-button-picker {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}
.duration-command-deck {
  display: grid;
  grid-template-columns: minmax(68px, 0.78fr) minmax(118px, 1.45fr) minmax(68px, 0.78fr);
  align-items: stretch;
  gap: 8px;
}
.duration-button-readout {
  position: relative;
  display: grid;
  min-height: 108px;
  padding: 12px 8px 16px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(29, 232, 213, 0.72);
  border-radius: var(--radius);
  color: var(--teal-2);
  background:
    linear-gradient(180deg, rgba(29, 232, 213, 0.11), transparent 58%),
    rgba(2, 14, 23, 0.9);
  box-shadow: inset 0 0 18px rgba(29, 232, 213, 0.08), 0 0 22px rgba(29, 232, 213, 0.08);
}
.duration-button-readout::before,
.duration-button-readout::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29, 232, 213, 0.7), transparent);
}
.duration-button-readout::before { top: 7px; }
.duration-button-readout::after { bottom: 7px; }
.duration-button-readout .duration-readout-icon {
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
  opacity: 0.9;
}
.duration-button-readout strong {
  overflow-wrap: anywhere;
  font-size: clamp(1.55rem, 5vw, 2.25rem);
  line-height: 1;
  font-weight: 1000;
  text-align: center;
  text-shadow: 0 0 18px rgba(116, 226, 161, 0.28);
}
.duration-button-readout .duration-planned-amount {
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}
.retail-duration-tuner {
  margin-top: 10px;
  border-color: rgba(241, 193, 76, 0.4);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(241, 193, 76, 0.045) 50%, transparent 50.3%),
    radial-gradient(circle at 50% 34%, rgba(29, 232, 213, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(7, 27, 39, 0.96), rgba(4, 17, 26, 0.94));
}
.duration-button-readout i {
  display: block;
  width: min(110px, 82%);
  height: 4px;
  margin: 5px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.duration-button-readout i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00dca6, #22c7ef);
  box-shadow: 0 0 10px rgba(29, 232, 213, 0.6);
  transition: width 0.2s ease;
}
.duration-adjust-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.duration-adjust-stack button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 50px;
  padding: 5px 7px;
  align-items: center;
  border-color: rgba(205, 231, 238, 0.24);
  background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 6px 15px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.duration-adjust-stack button span {
  color: var(--teal-2);
  font-size: 1.45rem;
  line-height: 1;
}
.duration-adjust-stack button small {
  min-width: 0;
  color: var(--text);
  font-size: 0.67rem;
  font-weight: 950;
  line-height: 1.05;
}
.duration-adjust-negative button {
  grid-template-columns: auto minmax(0, 1fr);
}
.duration-adjust-positive button {
  grid-template-columns: minmax(0, 1fr) auto;
}
.duration-adjust-positive button span { order: 2; }
.duration-adjust-positive button small { order: 1; }
.duration-adjust-stack button:hover:not(:disabled) {
  border-color: rgba(29, 232, 213, 0.56);
  background: linear-gradient(180deg, rgba(29, 232, 213, 0.14), rgba(255,255,255,0.025));
}
.duration-adjust-stack button:active,
.production-preset-row button:active {
  transform: scale(0.96);
}
.duration-adjust-stack button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.duration-tuner > select[data-production-quality-select] {
  position: relative;
  z-index: 1;
  min-height: 38px;
  border-color: rgba(29, 232, 213, 0.25);
  color: var(--teal-2);
  background: linear-gradient(90deg, rgba(29, 232, 213, 0.06), rgba(255,255,255,0.035), rgba(29, 232, 213, 0.06));
}
.production-setup-control select {
  appearance: none;
  text-align-last: center;
}
.production-preset-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 231, 238, 0.22);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.16);
}
.production-preset-row button {
  position: relative;
  min-height: 39px;
  min-width: 0;
  padding: 5px 2px;
  border: 0;
  border-right: 1px solid rgba(205, 231, 238, 0.16);
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.production-preset-row button:last-child { border-right: 0; }
.production-preset-row button.active {
  color: #f4fffb;
  background: linear-gradient(180deg, rgba(0, 220, 166, 0.76), rgba(0, 147, 180, 0.7));
  box-shadow: inset 0 2px 0 rgba(180,255,225,0.5), 0 0 18px rgba(29, 232, 213, 0.18);
}
.quality-selector {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 10px;
}
.quality-selector button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.04);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}
.quality-selector button.active {
  color: #f4fffb;
  border-color: rgba(116, 226, 161, 0.8);
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
}
.quality-selector button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.quick-time-control {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 7px;
  margin-bottom: 10px;
}
.quick-time-control input {
  text-align: center;
}
.plan-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.quick-production-panel .plan-metrics,
.production-detail-panel .plan-metrics,
.building-production-panel .plan-metrics,
.retail-production-panel .plan-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.quick-production-panel .metric,
.production-detail-panel .metric,
.building-production-panel .metric,
.retail-production-panel .metric {
  min-height: 46px;
  padding: 7px;
}
.quick-production-panel .metric span,
.production-detail-panel .metric span,
.building-production-panel .metric span,
.retail-production-panel .metric span {
  font-size: 0.72rem;
}
.quick-production-panel .metric b,
.production-detail-panel .metric b,
.building-production-panel .metric b,
.retail-production-panel .metric b {
  font-size: 0.95rem;
  line-height: 1.15;
}
.metric.metric-highlight-cost {
  border-color: rgba(240, 184, 58, 0.56);
  background: linear-gradient(135deg, rgba(240, 184, 58, 0.16), rgba(240, 184, 58, 0.045));
}
.metric.metric-highlight-cost span {
  color: #f3d58a;
}
.metric.metric-highlight-cost b {
  color: var(--gold);
}
.metric.metric-neutral-cost {
  border-color: rgba(199, 216, 226, 0.36);
  background: linear-gradient(135deg, rgba(199, 216, 226, 0.10), rgba(255, 255, 255, 0.035));
}
.metric.metric-neutral-cost span {
  color: var(--muted);
}
.metric.metric-neutral-cost b {
  color: var(--text);
}
.metric-arrow-to-profit {
  position: relative;
  overflow: visible;
}
.metric-arrow-to-profit::after {
  content: "=>";
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-size: 1.2rem;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.metric-arrow-to-profit.positive::after {
  color: var(--green);
}
.metric-arrow-to-profit.negative::after {
  color: #ff6f6f;
}
.metric.metric-highlight-loss {
  border-color: rgba(239, 89, 89, 0.58);
  background: linear-gradient(135deg, rgba(239, 89, 89, 0.17), rgba(239, 89, 89, 0.045));
}
.metric.metric-highlight-loss span,
.metric.metric-highlight-loss b {
  color: #ff9b9b;
}
.metric.metric-highlight-value {
  border-color: rgba(116, 226, 161, 0.58);
  background: linear-gradient(135deg, rgba(13, 240, 140, 0.14), rgba(28, 198, 236, 0.055));
}
.metric.metric-highlight-value span {
  color: #95f1bd;
}
.metric.metric-highlight-value b {
  color: var(--green);
}
.plan-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}
.flow-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(116, 226, 161, 0.22);
  border-radius: var(--radius);
  background: rgba(73, 209, 125, 0.055);
}
.flow-card span,
.flow-card small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.flow-card strong {
  display: block;
  margin: 3px 0;
  overflow: hidden;
  color: var(--teal-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-arrow {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 1.3rem;
  font-weight: 900;
}
.plan-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.plan-resource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.plan-resource span,
.plan-resource small {
  display: block;
}
.plan-resource small {
  color: var(--muted);
  margin-top: 2px;
}
.plan-resource b {
  color: var(--teal-2);
  white-space: nowrap;
}
.plan-resource.missing b {
  color: #ff6f6f !important;
}
.plan-resource.missing span,
.plan-resource.missing small {
  color: #ffd0d0;
}
.quick-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.retail-action-row {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.retail-action-row .action-button,
.retail-card-actions .freight-quick-buy,
.freight-quick-purchase-row .freight-quick-buy {
  min-height: 50px;
  white-space: normal;
  line-height: 1.2;
}
.action-button small,
.mini-button small,
.freight-quick-buy span,
.freight-quick-buy b,
.freight-quick-buy small {
  display: block;
}
.action-button small,
.mini-button small,
.freight-quick-buy small {
  margin-top: 4px;
  color: #ffd0d0;
  font-size: 0.72rem;
  font-weight: 700;
}
.freight-quick-buy {
  border-color: rgba(0, 221, 255, 0.48);
  background: linear-gradient(135deg, rgba(0, 221, 255, 0.13), rgba(116, 226, 161, 0.08));
}
.freight-quick-buy span {
  color: var(--muted);
  font-size: 0.72rem;
}
.freight-quick-buy b {
  margin-top: 3px;
  color: var(--teal-2);
}
.freight-quick-purchase-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.freight-quick-purchase-row[hidden] { display: none; }
.retail-purchase-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(116, 226, 161, 0.28);
  border-radius: var(--radius);
  background: rgba(116, 226, 161, 0.07);
}
.retail-purchase-status span { color: var(--muted); }
.retail-purchase-status strong { color: var(--teal-2); text-align: right; }
.retail-purchase-status.blocked {
  border-color: rgba(240, 184, 58, 0.48);
  background: rgba(240, 184, 58, 0.09);
}
.retail-purchase-status.blocked strong { color: var(--gold); }
.retail-production-panel .panel-title > span,
.retail-production-panel .panel-title > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.retail-production-panel .panel-title > strong { text-align: right; }
.duration-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr)) minmax(150px, 1.1fr);
  gap: 8px;
  margin-top: 10px;
}
.duration-controls button,
.duration-controls input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.04);
  font: inherit;
  font-weight: 900;
}
.duration-controls button {
  cursor: pointer;
}
.duration-controls button.active {
  color: #f4fffb;
  border-color: rgba(116, 226, 161, 0.8);
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
}
.duration-controls label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
}
.duration-controls input {
  width: 100%;
  padding: 0 9px;
}
.production-card { cursor: pointer; }
.production-card:hover {
  border-color: rgba(116, 226, 161, 0.34);
}
.warehouse-list {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.warehouse-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.warehouse-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.warehouse-row {
  display: grid;
  grid-template-columns: 34px minmax(130px, 0.8fr) minmax(190px, 1.25fr) auto minmax(98px, 0.35fr);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}
.warehouse-row img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.warehouse-row span { color: var(--muted); flex: 1; }
.warehouse-main strong { display: block; color: var(--text); }
.warehouse-row span small { display: block; margin-top: 2px; color: var(--teal-2); }
.warehouse-flow {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
}
.warehouse-flow small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warehouse-flow b {
  color: var(--teal-2);
  margin-right: 4px;
}
.warehouse-market-button {
  width: 100%;
  min-height: 36px;
}
.warehouse-sell-control {
  display: grid;
  grid-template-columns: 42px 42px minmax(58px, 1fr) 50px 54px;
  gap: 6px;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.warehouse-sell-control button,
.warehouse-sell-control input {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.04);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
}
.warehouse-sell-control input {
  min-width: 0;
  text-align: center;
}
.warehouse-sell-control button:disabled,
.warehouse-sell-control input:disabled {
  opacity: 0.45;
}
.warehouse-sell-control .mini-button {
  grid-column: 1 / -1;
  width: 100%;
}
.construction-overview-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.construction-overview-panel:empty {
  display: none;
}
.construction-overview-card {
  margin: 0;
}
.insight-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(260px, 0.95fr);
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.insight-row img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.insight-row span { color: var(--text); font-size: 0.86rem; }
.insight-row span small { display: block; color: var(--muted); margin-top: 2px; }
.mini-button {
  min-height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 4px 8px;
  cursor: pointer;
}
.mini-button.primary {
  color: #061018;
  border-color: rgba(116, 226, 161, 0.76);
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
}
.mini-button:disabled { opacity: 0.45; cursor: not-allowed; }
.event-log {
  display: grid;
  gap: 6px;
  min-height: 0;
  max-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
}
.event-log:focus-visible {
  outline: 2px solid var(--teal-2);
  outline-offset: 3px;
  border-radius: 8px;
}
.event-log > div {
  padding: 7px 0;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.35;
}
.event-log .log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
}
.log-row span,
.log-row small {
  min-width: 0;
}
.log-row strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.72rem;
  text-transform: uppercase;
}
.log-row strong time {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: none;
  white-space: nowrap;
}
.log-row b {
  color: var(--muted);
  font-size: 0.88rem;
  white-space: nowrap;
}
.log-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.76rem;
}
.log-row.income b {
  color: var(--green);
}
.log-row.expense b {
  color: var(--gold);
}
@media (max-width: 720px) {
  .job-card, .market-actions, .duration-controls, .duration-controls label, .quality-selector, .plan-metrics, .plan-columns, .quick-action-row, .market-order-book { grid-template-columns: 1fr; }
  .quick-production-panel .plan-metrics,
  .production-detail-panel .plan-metrics,
  .building-production-panel .plan-metrics,
  .retail-production-panel .plan-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .quick-production-panel .plan-columns,
  .production-detail-panel .plan-columns,
  .building-production-panel .plan-columns,
  .retail-production-panel .plan-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .quick-production-panel .metric,
  .production-detail-panel .metric,
  .building-production-panel .metric,
  .retail-production-panel .metric {
    min-height: 42px;
    padding: 6px;
  }
  .quick-production-panel .metric b,
  .production-detail-panel .metric b,
  .building-production-panel .metric b,
  .retail-production-panel .metric b {
    font-size: 0.88rem;
  }
  .retail-purchase-status { grid-template-columns: 1fr; }
  .retail-purchase-status strong { text-align: left; }
  .plan-resource {
    gap: 6px;
    font-size: 0.78rem;
  }
  .plan-resource.missing b,
  .input-list .input-missing,
  .production-card.missing .input-missing {
    color: #ff6f6f !important;
  }
  .plan-resource small {
    font-size: 0.72rem;
  }
  .duration-stepper { grid-template-columns: minmax(54px, 0.55fr) minmax(110px, 1.6fr) minmax(54px, 0.55fr); }
  .warehouse-list,
  .warehouse-list.large { grid-template-columns: 1fr; }
  .warehouse-row { grid-template-columns: 34px minmax(0, 1fr) auto; min-width: 0; }
  .warehouse-flow { grid-column: 2 / -1; }
  .warehouse-market-button { grid-column: 1 / -1; }
  .warehouse-row .warehouse-sell-control { grid-column: 1 / -1; }
  .insight-row { grid-template-columns: 34px minmax(0, 1fr); }
  .insight-row .warehouse-sell-control { grid-column: 1 / -1; }
  .warehouse-sell-control { grid-template-columns: 44px 44px minmax(0, 1fr) 52px 58px; }
  .duration-command-deck { grid-template-columns: minmax(62px, 0.74fr) minmax(112px, 1.38fr) minmax(62px, 0.74fr); gap: 6px; }
  .duration-adjust-stack { gap: 6px; }
  .duration-adjust-stack button { min-height: 48px; padding: 4px 5px; }
  .duration-adjust-stack button span { font-size: 1.3rem; }
  .duration-adjust-stack button small { font-size: 0.61rem; }
  .duration-button-readout { min-height: 102px; padding-inline: 5px; }
  .production-preset-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .production-preset-row button { font-size: 0.64rem; }
}

.manager-choice.ghost { color: var(--muted); background: transparent; }

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 18px 18px calc(92px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(6, 16, 24, 0.22), rgba(6, 16, 24, 0.72));
  pointer-events: none;
}
.tutorial-overlay.tutorial-top { place-items: start center; }
.tutorial-overlay.tutorial-bottom { place-items: end center; }
.tutorial-overlay.is-minimized {
  place-items: start start;
  padding: 12px;
  background: transparent;
}
.tutorial-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  width: min(720px, calc(100vw - 36px));
  max-width: 100%;
  max-height: calc(100dvh - 126px - env(safe-area-inset-bottom));
  min-width: 0;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid rgba(116, 226, 161, 0.42);
  border-radius: var(--radius);
  background: rgba(8, 22, 31, 0.98);
  box-shadow: var(--shadow);
  pointer-events: auto;
}
.tutorial-minimize {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.06);
  font-weight: 900;
  cursor: pointer;
}
.tutorial-chip {
  width: min(190px, calc(100vw - 24px));
  padding: 9px 11px;
  border: 1px solid rgba(0, 255, 98, 0.45);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(8, 22, 31, 0.96);
  box-shadow: var(--shadow);
  pointer-events: auto;
  text-align: left;
  cursor: pointer;
}
.tutorial-chip span,
.tutorial-chip strong {
  display: block;
}
.tutorial-chip span {
  color: var(--teal-2);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.tutorial-chip strong {
  margin-top: 2px;
  font-size: 0.86rem;
}
.tutorial-pointer {
  position: fixed;
  z-index: 41;
  display: none;
  place-items: center;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid rgba(0, 255, 98, 0.92);
  background: rgba(0, 200, 250, 0.16);
  box-shadow: 0 0 0 8px rgba(0, 255, 98, 0.13), 0 0 26px rgba(0, 200, 250, 0.55);
  animation: tutorialPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
.tutorial-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -42px;
  width: 3px;
  height: 42px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--teal), transparent);
}
.tutorial-pointer span::before {
  content: "↓";
  display: block;
  color: var(--teal);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}
.tutorial-guide {
  display: grid;
  align-items: end;
  min-height: 260px;
  overflow: hidden;
}
.tutorial-pointer::after,
.tutorial-pointer span::before {
  display: none;
  content: none;
}
.tutorial-guide img {
  width: min(220px, 34vw);
  max-height: 330px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.42));
}
.tutorial-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}
.tutorial-kicker {
  color: var(--teal-2);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.tutorial-demo-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(0, 200, 250, 0.44);
  border-radius: 6px;
  color: #b9f3ff;
  background: rgba(0, 200, 250, 0.12);
  font-size: 0.72rem;
  font-weight: 900;
}
.tutorial-card h2 {
  margin: 7px 0 8px;
  font-size: 1.25rem;
}
.tutorial-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}
.tutorial-language-note {
  margin-top: 8px !important;
  font-size: 0.92rem;
}
.tutorial-hint {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(0, 200, 250, 0.42);
  border-radius: var(--radius);
  color: #ffffff;
  background: rgba(0, 200, 250, 0.12);
  font-size: 0.9rem;
  font-weight: 800;
}
.tutorial-task-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.tutorial-task-actions .action-button:only-child {
  grid-column: 1 / -1;
}
.tutorial-check {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 6px 9px;
  border: 1px solid rgba(240, 184, 58, 0.55);
  border-radius: var(--radius);
  color: var(--gold);
  background: rgba(240, 184, 58, 0.12);
  font-size: 0.82rem;
  font-weight: 900;
}
.tutorial-check.done {
  border-color: rgba(0, 255, 98, 0.55);
  color: var(--teal);
  background: rgba(0, 255, 98, 0.12);
}
.tutorial-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 14px 0;
}
.tutorial-progress i {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}
.tutorial-progress i.active {
  background: linear-gradient(90deg, var(--teal), var(--blue-2));
}
.tutorial-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  min-width: 0;
}
.tutorial-language-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}
.tutorial-actions .action-button,
.tutorial-task-actions .action-button {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .tutorial-overlay { align-items: end; padding: 10px 10px calc(84px + env(safe-area-inset-bottom)); }
  .tutorial-overlay.tutorial-top { align-items: start; }
  .tutorial-overlay.tutorial-bottom { align-items: end; }
  .tutorial-overlay.is-minimized { align-items: start; justify-items: start; }
  .tutorial-card {
    grid-template-columns: minmax(74px, 96px) minmax(0, 1fr);
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom));
    gap: 10px;
    padding: 12px;
  }
  .tutorial-guide { min-height: 210px; }
  .tutorial-guide img { width: 122px; max-height: 230px; }
  .tutorial-task-actions { grid-template-columns: 1fr; }
  .tutorial-actions { grid-template-columns: 1fr; }
  .building-detail-grid { grid-template-columns: 104px minmax(0, 1fr); }
  .building-detail-image { min-height: 104px; max-height: 118px; }
  .building-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .building-stat-grid .metric { min-height: 40px; padding: 5px 6px; }
  .building-stat-grid .metric b { font-size: 0.8rem; }
  .building-stat-grid .metric span { font-size: 0.68rem; }
  .building-flow-grid { grid-template-columns: 1fr 1fr; }
  .market-detail-grid { grid-template-columns: 1fr; }
  .market-detail-grid .plan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-detail-grid .market-freight-metric { grid-column: 2; }
  .market-detail-grid .metric { min-height: 56px; padding: 7px; }
  .market-detail-grid .metric b { font-size: 0.88rem; }
  .building-recipe-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }
  .building-recipe-row em,
  .building-recipe-row .mini-button {
    grid-column: 2 / -1;
  }
}

@keyframes tutorialPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.78; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

.auth-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(3, 11, 17, 0.82);
  backdrop-filter: blur(8px);
}
.auth-gate-card {
  display: grid;
  grid-template-columns: minmax(118px, 150px) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  width: min(680px, 100%);
  padding: 16px;
  border: 1px solid rgba(0, 255, 98, 0.42);
  border-radius: var(--radius);
  background: rgba(8, 22, 31, 0.98);
  box-shadow: var(--shadow);
}
.auth-gate-card img {
  width: min(150px, 100%);
  max-height: 320px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.42));
}
.auth-gate-card h2 {
  margin: 7px 0 8px;
}
.auth-gate-card p,
.auth-gate-card small {
  color: var(--muted);
  line-height: 1.48;
}
.auth-gate-actions {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
  margin: 16px 0 10px;
}
.auth-gate-actions .action-button {
  width: 100%;
  min-height: 44px;
}
.auth-tutorial-button {
  border-color: rgba(86, 235, 165, 0.72);
  background: linear-gradient(135deg, rgba(20, 101, 76, 0.78), rgba(15, 79, 111, 0.84));
  color: #f4fff9;
  font-weight: 800;
  box-shadow: inset 0 0 18px rgba(31, 226, 151, 0.12);
}
.auth-tutorial-button:active {
  transform: translateY(1px) scale(0.99);
}
.auth-bot-protection {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(74, 226, 177, 0.28);
  border-radius: 12px;
  background: rgba(3, 14, 21, 0.7);
}
.auth-bot-protection[hidden] { display: none; }
.auth-bot-protection > strong {
  color: #dffcf2;
  font-size: 0.86rem;
}
.auth-bot-widget {
  width: 100%;
  min-height: 65px;
  overflow: hidden;
}
.auth-bot-protection small[data-state="ready"] { color: #68e5a5; }
.auth-bot-protection small[data-state="unavailable"] { color: #ffbd73; }
.auth-bot-retry {
  width: 100%;
  min-height: 48px;
}
.auth-bot-retry[hidden] { display: none; }
.auth-email-form button:disabled {
  cursor: wait;
  opacity: 0.55;
}
.app-update-overlay {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(3, 11, 17, 0.72);
  backdrop-filter: blur(7px);
}
.app-update-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: min(560px, 100%);
  padding: 15px;
  border: 1px solid rgba(0, 245, 140, 0.48);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(12, 42, 55, 0.98), rgba(5, 21, 31, 0.98));
  box-shadow: var(--shadow);
}
.app-update-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.app-update-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.38));
}
.app-update-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.app-update-copy span {
  color: var(--green);
  font-weight: 900;
}
.app-update-copy h2 {
  margin: 0;
  font-size: 1.35rem;
}
.app-update-copy p {
  margin: 0;
  color: var(--text);
  line-height: 1.42;
}
.app-update-copy small {
  color: var(--muted);
  font-weight: 800;
}
.app-update-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.45fr);
  gap: 8px;
  margin-top: 5px;
}
.app-update-actions .action-button {
  min-height: 44px;
}
.alpha-request-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(0, 245, 140, 0.45);
  background: rgba(255,255,255,0.045);
  font-size: 0.98rem;
  font-weight: 800;
  text-align: center;
}
.google-login-button,
.google-login-host {
  margin: 0;
  min-height: 40px;
}
.google-login-host {
  display: grid;
  align-items: center;
  justify-items: stretch;
  overflow: hidden;
}
.google-native-login {
  width: 100%;
}
@media (max-width: 720px) {
  .auth-gate-card { grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .auth-gate-card img { width: 92px; max-height: 230px; }
  .auth-gate-actions { width: 100%; }
  .app-update-card { grid-template-columns: 1fr; }
  .app-update-icon { width: 58px; height: 58px; }
  .app-update-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* V3 page navigation */
.app-shell { padding-top: 10px; padding-bottom: 92px; }
.topbar { grid-template-columns: 1fr; padding: 48px 7px 7px; }
.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
}
.app-tabs {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px;
  overflow: hidden;
  scrollbar-width: none;
  background: rgba(5, 15, 22, 0.95);
  border-bottom: 1px solid var(--line);
}
.app-tabs.compact-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.app-tabs::-webkit-scrollbar { display: none; }
.tab-button {
  flex: 1 1 126px;
  min-width: 112px;
  min-height: 40px;
  border: 1px solid rgba(205, 231, 238, 0.14);
  border-radius: var(--radius);
  color: var(--muted);
  background: linear-gradient(180deg, rgba(20, 43, 56, 0.96), rgba(8, 22, 31, 0.96));
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.compact-tabs .tab-button {
  min-width: 0;
  min-height: 50px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 4px;
  line-height: 1.05;
}
.tab-icon {
  font-size: 1.18rem;
  line-height: 1;
}
.tab-button.active {
  color: #f4fffb;
  border-color: rgba(116, 226, 161, 0.8);
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.hub-grid.compact-hub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hub-card {
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(205, 231, 238, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background:
    radial-gradient(circle at 18% 22%, rgba(116, 226, 161, 0.15), transparent 42%),
    linear-gradient(180deg, rgba(20, 43, 56, 0.96), rgba(8, 22, 31, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hub-card:hover {
  border-color: rgba(116, 226, 161, 0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 28px rgba(0,0,0,0.22);
}
.hub-card.active {
  color: #f4fffb;
  border-color: rgba(116, 226, 161, 0.8);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.25), transparent 38%),
    linear-gradient(135deg, var(--teal), var(--blue-2));
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
}
.hub-card > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(116, 226, 161, 0.12);
  font-size: 1.1rem;
}
.hub-card strong {
  min-width: 0;
  color: inherit;
  font-size: 0.92rem;
  line-height: 1.08;
  text-align: left;
}
.hub-card small {
  display: none;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.18;
  text-align: left;
}
.hub-grid:not(.compact-hub) .hub-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.profile-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.tab-button.has-alert {
  color: var(--gold);
  border-color: rgba(240, 184, 58, 0.52);
  box-shadow: inset 0 0 0 1px rgba(240, 184, 58, 0.16), 0 0 16px rgba(240, 184, 58, 0.1);
}
.bottom-nav {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 8px 7px calc(8px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(13, 34, 47, 0.82), rgba(4, 14, 22, 0.98)),
    rgba(5, 15, 22, 0.97);
  border-top: 1px solid rgba(116, 226, 161, 0.24);
  box-shadow: 0 -18px 45px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
}
.bottom-nav-button {
  position: relative;
  isolation: isolate;
  min-height: 50px;
  overflow: hidden;
  border: 1px solid rgba(205, 231, 238, 0.16);
  border-radius: 10px;
  color: var(--muted);
  background:
    radial-gradient(circle at 50% 0%, rgba(205, 231, 238, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(28, 58, 73, 0.9), rgba(7, 21, 31, 0.96));
  font: inherit;
  font-size: clamp(0.62rem, 2.15vw, 0.74rem);
  font-weight: 900;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 1px;
  line-height: 1.05;
  padding: 5px 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.38);
  transform: translateY(0) scale(1);
  transition: transform 120ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.bottom-nav-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, rgba(205, 231, 238, 0.12), rgba(0, 200, 250, 0.08));
  opacity: 0;
  transition: opacity 140ms ease;
}
.bottom-nav-button::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(205, 231, 238, 0.74), transparent);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 140ms ease, transform 140ms ease;
}
.bottom-nav-button:hover,
.bottom-nav-button:focus-visible {
  color: #f4fffb;
  border-color: rgba(205, 231, 238, 0.34);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}
.bottom-nav-button:hover::before,
.bottom-nav-button:focus-visible::before {
  opacity: 0.48;
}
.bottom-nav-button:active {
  transform: translateY(1px) scale(0.965);
}
.bottom-nav-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  font-size: 1.02rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.bottom-nav-button.active {
  color: #f4fffb;
  border-color: rgba(116, 226, 161, 0.8);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.28), transparent 46%),
    linear-gradient(135deg, rgba(0, 255, 98, 0.95), rgba(0, 200, 250, 0.92));
  text-shadow: 0 1px 2px rgba(0,0,0,0.42);
  box-shadow: 0 12px 28px rgba(0, 215, 180, 0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.bottom-nav-button.active::before {
  opacity: 1;
}
.bottom-nav-button.active::after {
  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg, transparent, rgba(116, 226, 161, 0.95), transparent);
}
.bottom-nav-button.active .bottom-nav-icon {
  background: rgba(5, 15, 22, 0.16);
  color: #06131b;
}
@keyframes navButtonPulse {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(0) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}
.bottom-nav-button.nav-clicked {
  animation: navButtonPulse 210ms ease-out;
}
.page-view { display: none; }
.page-view.active {
  display: block;
  animation: pageIn 150ms ease-out;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes buildFlash {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-2px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}
.dashboard-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(116, 226, 161, 0.28);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(9, 28, 37, 0.98), rgba(5, 15, 22, 0.98));
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 16px 34px rgba(0,0,0,0.22);
}
.dashboard-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
}
.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 13, 19, 0.58), rgba(4, 13, 19, 0.92)),
    radial-gradient(circle at 18% 8%, rgba(0, 215, 179, 0.22), transparent 34%),
    linear-gradient(90deg, rgba(6,16,24,0.96), rgba(6,16,24,0.58));
}
.dashboard-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  min-height: 520px;
  max-width: 760px;
  padding: 20px;
}
.dashboard-copy > span { color: var(--muted); font-weight: 800; }
.dashboard-copy > strong {
  margin: 6px 0 6px;
  color: var(--teal-2);
  font-size: 2.25rem;
  line-height: 1;
  text-shadow: 0 0 18px rgba(116, 226, 161, 0.24);
}
.hq-trend-chip {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 5px 9px;
  border: 1px solid rgba(116, 226, 161, 0.28);
  border-radius: 999px;
  color: var(--teal-2);
  background: rgba(16, 178, 138, 0.13);
  font-size: 0.74rem;
  font-weight: 900;
}
.dashboard-copy .metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 0;
}
.hq-value-card {
  position: relative;
  min-height: 92px;
  padding: 11px;
  border-color: rgba(165, 221, 255, 0.19);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    rgba(9, 24, 32, 0.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.hq-value-card i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  font-style: normal;
  font-size: 1.18rem;
}
.hq-value-card span {
  min-height: 2.2em;
  font-size: 0.78rem;
  line-height: 1.1;
}
.hq-value-card b {
  overflow: hidden;
  width: 100%;
  color: #f4fbff;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq-asset-breakdown {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(116, 226, 161, 0.22);
  border-radius: var(--radius);
  background: rgba(7, 22, 30, 0.72);
}
.hq-asset-breakdown .panel-title strong {
  font-size: 0.98rem;
}
.hq-asset-bar {
  display: flex;
  overflow: hidden;
  height: 13px;
  margin: 10px 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
}
.hq-asset-bar i {
  min-width: 3%;
  height: 100%;
}
.asset-cash { background: linear-gradient(90deg, #75e5a1, #23cf87); }
.asset-storage { background: linear-gradient(90deg, #64c7ff, #2b8cff); }
.asset-market { background: linear-gradient(90deg, #f0b83a, #ff8a48); }
.asset-stocks { background: linear-gradient(90deg, #b99cff, #7d63ff); }
.asset-production { background: linear-gradient(90deg, #1de0d0, #13a3c7); }
.hq-asset-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
}
.hq-asset-legend span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.74rem;
}
.hq-asset-legend i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.hq-asset-legend b {
  overflow: hidden;
  color: #f4fbff;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq-quick-access {
  margin-top: 12px;
}
.hq-quick-access > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}
.hq-quick-access > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.hq-quick-access button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  place-items: center;
  gap: 3px;
  padding: 8px 6px;
  border: 1px solid rgba(165, 221, 255, 0.2);
  border-radius: var(--radius);
  color: #f4fbff;
  background: linear-gradient(180deg, rgba(28, 62, 78, 0.78), rgba(9, 24, 32, 0.76));
  font: inherit;
  cursor: pointer;
}
.hq-quick-access button:focus-visible,
.hq-quick-access button:hover {
  border-color: rgba(116, 226, 161, 0.58);
  background: linear-gradient(180deg, rgba(25, 153, 129, 0.45), rgba(9, 24, 32, 0.78));
}
.hq-quick-access button span {
  font-size: 1.2rem;
}
.hq-quick-access button b {
  overflow: hidden;
  max-width: 100%;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(260px, 1fr) minmax(220px, 0.75fr);
  gap: 10px;
  min-width: 0;
  margin-bottom: 10px;
}
.next-action-card,
.dashboard-card {
  min-width: 0;
  min-height: 160px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.dashboard-status-card,
.hq-upgrade-card {
  border-color: rgba(165, 221, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(12, 31, 40, 0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 24px rgba(0,0,0,0.16);
}
.dashboard-status-card .panel-title strong,
.hq-upgrade-title strong {
  padding: 3px 9px;
  border: 1px solid rgba(116, 226, 161, 0.27);
  border-radius: 999px;
  background: rgba(16, 178, 138, 0.11);
  font-size: 1.05rem;
}
.dashboard-card.wide {
  grid-column: 1 / -1;
  margin-bottom: 10px;
}
.web-ad-card {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(165, 221, 255, 0.18);
  border-radius: var(--radius);
  background: var(--panel);
  min-height: 112px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.web-ad-card > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.web-ad-card ins {
  min-height: 90px;
}
.web-ad-card small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}
html[data-web-ads="native_app"] .web-only-ad,
html[data-web-ads="disabled"] .web-only-ad,
html[data-web-ads="premium-off"] .web-only-ad {
  display: none;
}
.hq-log-card {
  margin-top: 12px;
  min-height: 0;
}
.next-action-card.contract-attention,
.contract-card.contract-attention {
  border-color: rgba(240, 184, 58, 0.5);
  background: linear-gradient(180deg, rgba(52, 51, 28, 0.92), rgba(9, 25, 34, 0.94));
}
.hq-upgrade-meter {
  overflow: hidden;
  height: 12px;
  margin: 10px 0 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.hq-upgrade-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #15f28b, #16d8cb, #27a8ff);
  box-shadow: 0 0 16px rgba(22, 216, 203, 0.35);
}
.hq-upgrade-progress {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}
.hq-upgrade-ring {
  display: grid;
  width: 92px;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(116, 226, 161, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(12, 30, 40, 0.98) 0 57%, transparent 58%),
    conic-gradient(#16ef95 0 var(--hq-progress), rgba(255,255,255,0.1) var(--hq-progress) 360deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 26px rgba(22, 216, 203, 0.13);
}
.hq-upgrade-ring strong,
.hq-upgrade-ring span,
.hq-upgrade-next span,
.hq-upgrade-next b,
.hq-upgrade-next small {
  display: block;
}
.hq-upgrade-ring strong {
  color: #f4fbff;
  font-size: 1.05rem;
  line-height: 1;
}
.hq-upgrade-ring span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}
.hq-upgrade-next {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(116, 226, 161, 0.2);
  border-radius: var(--radius);
  background: rgba(6, 19, 27, 0.48);
}
.hq-upgrade-next span {
  color: var(--muted);
  font-size: 0.76rem;
}
.hq-upgrade-next b {
  margin-top: 4px;
  color: var(--teal-2);
  font-size: 1.28rem;
}
.hq-upgrade-next small {
  margin-top: 4px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
}
.hq-upgrade-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}
.hq-upgrade-stats div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(165, 221, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.045);
}
.hq-upgrade-stats span,
.hq-upgrade-stats b {
  display: block;
}
.hq-upgrade-stats span {
  color: var(--muted);
  font-size: 0.76rem;
}
.hq-upgrade-stats b {
  margin-top: 3px;
  overflow: hidden;
  color: var(--teal-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cashflow-card {
  border-color: rgba(165, 221, 255, 0.22);
  background:
    radial-gradient(circle at 50% 25%, rgba(116, 226, 161, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018)),
    rgba(12, 31, 40, 0.9);
}
.cashflow-title strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(116, 226, 161, 0.24);
  border-radius: 999px;
  background: rgba(116, 226, 161, 0.09);
  font-size: 1rem;
}
.cashflow-title strong i {
  font-style: normal;
  font-weight: 1000;
}
.cashflow-title strong.expense {
  border-color: rgba(255, 107, 107, 0.3);
  color: #ff8b8b;
  background: rgba(255, 107, 107, 0.08);
}
.cashflow-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 11px 0;
}
.cashflow-tabs button {
  min-height: 40px;
  padding: 7px 4px;
  border-radius: 8px;
  font-size: 0.78rem;
}
.cashflow-layout {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(180px, 0.9fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
}
.cashflow-cockpit {
  grid-template-columns: 1fr;
  gap: 12px;
}
.cashflow-cockpit-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(28px, 0.36fr) minmax(132px, 1.14fr) minmax(28px, 0.36fr) minmax(100px, 1fr);
  align-items: center;
  gap: 0;
  min-height: 218px;
  padding: 14px 8px;
  overflow: hidden;
  border: 1px solid rgba(165, 221, 255, 0.16);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 50%, rgba(29, 232, 213, 0.13), transparent 0 28%, transparent 44%),
    linear-gradient(90deg, rgba(47,255,178,0.05), transparent 32% 68%, rgba(255,88,103,0.05)),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
}
.cashflow-cockpit-stage::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  border: 1px solid rgba(165, 221, 255, 0.08);
  pointer-events: none;
}
.cashflow-flow-panel {
  position: relative;
  z-index: 3;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 128px;
  align-content: center;
  gap: 7px;
  padding: 11px 8px;
  border: 1px solid rgba(165, 221, 255, 0.17);
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,0.10), transparent 0 34%, transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(7, 20, 29, 0.58);
}
.cashflow-flow-panel.income { grid-column: 1; justify-self: stretch; }
.cashflow-flow-panel.expense { grid-column: 5; justify-self: stretch; }
.cashflow-flow-panel em,
.cashflow-value em {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  font-style: normal;
  font-weight: 1000;
}
.cashflow-flow-panel em svg,
.cashflow-value em svg,
.cashflow-mini-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}
.cashflow-flow-panel em svg .icon-orbit,
.cashflow-value em svg .icon-orbit,
.cashflow-mini-icon svg .icon-orbit {
  opacity: 0.62;
  stroke-width: 1.45;
  stroke-dasharray: 2.2 2.8;
  animation: cashflowIconOrbit 2.8s linear infinite;
}
.cashflow-mini-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
}
.cashflow-mini-icon svg {
  width: 16px;
  height: 16px;
}
.cashflow-balance-core .cashflow-mini-icon {
  display: none;
}
.cashflow-flow-panel.income em,
.cashflow-value.income em {
  color: #06261d;
  background: linear-gradient(145deg, #89ffc0, #08d6c5);
  box-shadow: 0 0 16px rgba(47, 255, 178, 0.24);
}
.cashflow-flow-panel.expense em,
.cashflow-value.expense em {
  color: #2b060a;
  background: linear-gradient(145deg, #ff9aa4, #ff5867);
  box-shadow: 0 0 16px rgba(255, 88, 103, 0.22);
}
.cashflow-flow-panel span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}
.cashflow-flow-panel b {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.76rem, 2.45vw, 0.95rem);
  line-height: 1.13;
  text-overflow: clip;
  white-space: nowrap;
}
.cashflow-flow-panel.income b { color: var(--teal-2); }
.cashflow-flow-panel.expense b { color: #ff8b8b; }
.cashflow-vein {
  position: relative;
  z-index: 1;
  width: 132%;
  height: 104px;
  overflow: visible;
  opacity: 0.95;
  pointer-events: none;
  justify-self: center;
}
.cashflow-vein::before,
.cashflow-vein::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.cashflow-vein::before {
  top: 49%;
  left: -12px;
  right: -12px;
  height: 18px;
  opacity: 0.16;
  filter: blur(8px);
  transform: translateY(-50%);
}
.cashflow-vein::after {
  top: 50%;
  left: -20px;
  right: -20px;
  height: 1px;
  opacity: 0.38;
  transform: translateY(-50%);
}
.cashflow-vein i {
  position: absolute;
  left: -18px;
  right: -18px;
  height: 5px;
  border-radius: 999px;
  opacity: 0.52;
  background-size: 220% 100%;
  filter: drop-shadow(0 0 7px currentColor);
  transform-origin: center;
  animation: cashflowPulse 1.72s ease-in-out infinite;
}
.cashflow-vein i:nth-child(1) { top: 33%; transform: rotate(12deg) scaleX(0.88); }
.cashflow-vein i:nth-child(2) { top: 44%; height: 4px; animation-delay: 0.34s; transform: rotate(4deg) scaleX(1.03); }
.cashflow-vein i:nth-child(3) { top: 55%; height: 6px; animation-delay: 0.68s; transform: rotate(-7deg) scaleX(0.96); }
.cashflow-vein i:nth-child(4) { top: 66%; height: 3px; animation-delay: 1.02s; transform: rotate(-14deg) scaleX(0.82); }
.cashflow-vein.income {
  grid-column: 2;
  color: rgba(59, 255, 177, 0.98);
}
.cashflow-vein.expense {
  grid-column: 4;
  color: rgba(255, 101, 116, 0.98);
}
.cashflow-vein.income::before,
.cashflow-vein.income::after,
.cashflow-vein.income i {
  background: linear-gradient(90deg, transparent, rgba(59, 255, 177, 0.25) 12%, rgba(0, 231, 211, 0.92) 48%, rgba(59, 255, 177, 0.28) 82%, transparent);
  box-shadow: 0 0 22px rgba(59, 255, 177, 0.34);
  clip-path: polygon(0 12%, 72% 34%, 100% 46%, 100% 58%, 72% 66%, 0 88%);
}
.cashflow-vein.expense::before,
.cashflow-vein.expense::after,
.cashflow-vein.expense i {
  background: linear-gradient(270deg, transparent, rgba(255, 82, 100, 0.24) 12%, rgba(255, 112, 126, 0.92) 48%, rgba(255, 162, 126, 0.26) 82%, transparent);
  box-shadow: 0 0 22px rgba(255, 82, 100, 0.30);
  clip-path: polygon(100% 12%, 28% 34%, 0 46%, 0 58%, 28% 66%, 100% 88%);
}
.cashflow-vein.income i:nth-child(1),
.cashflow-vein.income i:nth-child(4) {
  clip-path: polygon(0 28%, 78% 38%, 100% 47%, 100% 55%, 78% 62%, 0 72%);
}
.cashflow-vein.expense i:nth-child(1),
.cashflow-vein.expense i:nth-child(4) {
  clip-path: polygon(100% 28%, 22% 38%, 0 47%, 0 55%, 22% 62%, 100% 72%);
}
.cashflow-balance-core {
  position: relative;
  z-index: 4;
  display: grid;
  min-width: 0;
  grid-column: 3;
  width: min(136px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(116, 226, 161, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,0.12), transparent 0 28%, transparent 29%),
    radial-gradient(circle, rgba(11, 35, 44, 0.96), rgba(4, 16, 25, 0.98));
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,0.025),
    inset 0 -18px 28px rgba(0,0,0,0.36),
    0 0 32px rgba(47, 255, 178, 0.14);
  text-align: center;
}
.cashflow-balance-core.expense {
  border-color: rgba(255, 107, 107, 0.34);
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,0.025),
    inset 0 -18px 28px rgba(0,0,0,0.36),
    0 0 34px rgba(255, 88, 103, 0.18);
}
.cashflow-balance-core::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: conic-gradient(from 210deg, rgba(47,255,178,0.85) 0 var(--income-pct), rgba(255,88,103,0.82) var(--income-pct) 100%);
  opacity: 0.34;
  filter: blur(0.4px);
  z-index: -1;
}
.cashflow-balance-core span,
.cashflow-balance-core small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}
.cashflow-balance-core strong {
  display: grid;
  justify-items: center;
  gap: 0;
  min-width: 0;
  color: var(--teal-2);
  font-size: clamp(1.02rem, 3.55vw, 1.26rem);
  line-height: 1.05;
  font-weight: 1000;
}
.cashflow-balance-core.expense strong { color: #ff8b8b; }
.cashflow-balance-core strong span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.cashflow-balance-core small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cashflow-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cashflow-donut {
  width: min(210px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(165, 221, 255, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(12, 30, 40, 0.96) 0 48%, transparent 49%),
    conic-gradient(#72e0a0 0 var(--income-deg), #ff6b6b var(--income-deg) 360deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 32px rgba(0,0,0,0.26), 0 0 28px rgba(116, 226, 161, 0.1);
}
.cashflow-donut > div {
  width: 57%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 25%, rgba(31, 60, 72, 0.9), rgba(7, 18, 26, 0.94));
  text-align: center;
}
.cashflow-donut strong,
.cashflow-donut span {
  display: block;
}
.cashflow-donut strong {
  color: var(--teal-2);
  font-size: 1.38rem;
}
.cashflow-donut span {
  color: var(--muted);
  font-size: 0.72rem;
}

/* Build 629: data-driven neon-glass cashflow ring. The SVG stays lightweight
   and lets the live income/expense proportions animate without a static chart image. */
.cashflow-main-ring {
  position: relative;
  isolation: isolate;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.cashflow-main-ring::before {
  content: "";
  position: absolute;
  inset: 9%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 41, 51, 0.92) 0 48%, rgba(7, 19, 28, 0.72) 70%, transparent 72%);
  box-shadow: 0 0 34px rgba(29, 232, 213, 0.18), inset 0 0 22px rgba(116, 226, 161, 0.08);
}
.cashflow-ring-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}
.cashflow-ring-svg circle {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.cashflow-ring-track {
  stroke: rgba(165, 221, 255, 0.12);
  stroke-width: 8;
}
.cashflow-ring-segment {
  stroke-linecap: round;
  stroke-width: 8;
  transition: stroke-dasharray 520ms cubic-bezier(.22,.7,.24,1), stroke-dashoffset 520ms cubic-bezier(.22,.7,.24,1);
  filter: url(#cashflowRingGlow);
}
.cashflow-ring-segment.income {
  stroke: #55efb0;
}
.cashflow-ring-segment.expense {
  stroke: #ff7180;
}
.cashflow-ring-inner {
  stroke: rgba(86, 235, 218, 0.72);
  stroke-width: 1.25;
  opacity: 0.78;
}
.cashflow-ring-inner.expense {
  stroke: rgba(255, 126, 139, 0.72);
}
.cashflow-ring-scan {
  stroke: rgba(147, 255, 232, 0.74);
  stroke-width: 1.05;
  stroke-dasharray: 2.2 97.8;
  stroke-linecap: round;
  opacity: 0.72;
  animation: cashflowRingScan 6.8s linear infinite;
}
.cashflow-main-ring > div {
  position: relative;
  z-index: 2;
  background: radial-gradient(circle at 50% 24%, rgba(31, 66, 77, 0.92), rgba(5, 17, 25, 0.96));
  border: 1px solid rgba(116, 226, 161, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(29, 232, 213, 0.10);
}
@keyframes cashflowRingScan {
  from { stroke-dashoffset: 0; opacity: 0.34; }
  45% { opacity: 0.82; }
  to { stroke-dashoffset: -100; opacity: 0.34; }
}
@media (prefers-reduced-motion: reduce) {
  .cashflow-ring-segment { transition: none; }
  .cashflow-ring-scan { animation: none; opacity: 0.48; }
}
.cashflow-side {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.cashflow-split-row {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(165, 221, 255, 0.17);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
}
.cashflow-split-row span,
.cashflow-split-row b {
  position: relative;
  z-index: 1;
  display: block;
}
.cashflow-split-row span {
  color: var(--muted);
  font-size: 0.76rem;
}
.cashflow-split-row b {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(0.9rem, 3vw, 1.04rem);
}
.cashflow-split-row i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  border-radius: 0 999px 999px 0;
}
.cashflow-split-row.income b { color: var(--teal-2); }
.cashflow-split-row.income i { background: linear-gradient(90deg, var(--teal-2), var(--green)); }
.cashflow-split-row.expense b { color: #ff8b8b; }
.cashflow-split-row.expense i { background: linear-gradient(90deg, #ff6b6b, #ff9b9b); }
.cashflow-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cashflow-cockpit-values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cashflow-value {
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(165, 221, 255, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(7, 20, 29, 0.35);
}
.cashflow-value span,
.cashflow-value b {
  display: block;
}
.cashflow-value span {
  color: var(--muted);
  font-size: 0.76rem;
}
.cashflow-value b {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(0.92rem, 2.9vw, 1.08rem);
  text-overflow: clip;
  white-space: nowrap;
}
.cashflow-value.income b { color: var(--teal-2); }
.cashflow-value.expense b { color: #ff8b8b; }
.cashflow-value.income,
.cashflow-value.expense,
.cashflow-value.balance {
  position: relative;
}
.cashflow-value em + span {
  margin-top: 7px;
}
.cashflow-value:not(.income):not(.expense) em {
  color: var(--teal-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(165, 221, 255, 0.15);
}
@keyframes cashflowPulse {
  0% { opacity: 0.18; filter: brightness(0.78) drop-shadow(0 0 3px currentColor); background-position: 0% 50%; }
  28% { opacity: 0.95; filter: brightness(1.38) drop-shadow(0 0 10px currentColor); }
  66% { opacity: 0.58; }
  100% { opacity: 0.24; filter: brightness(0.88) drop-shadow(0 0 4px currentColor); background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cashflow-vein i {
    animation: none;
    opacity: 0.55;
  }
}
.cashflow-cockpit {
  width: min(100%, 780px);
  margin-inline: auto;
}
.cashflow-cockpit-stage {
  grid-template-columns: minmax(128px, 1fr) clamp(132px, 25%, 166px) minmax(128px, 1fr);
  grid-template-rows: minmax(154px, auto) minmax(176px, auto);
  gap: 18px 12px;
  min-height: clamp(440px, 74vw, 520px);
  padding: clamp(16px, 2.6vw, 24px) clamp(12px, 2.2vw, 20px) clamp(15px, 2.2vw, 20px);
  border-color: rgba(116, 226, 161, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 43%, rgba(29, 232, 213, 0.17), transparent 0 28%, transparent 48%),
    radial-gradient(circle at 24% 42%, rgba(47,255,178,0.12), transparent 0 28%, transparent 48%),
    radial-gradient(circle at 76% 42%, rgba(255,88,103,0.12), transparent 0 28%, transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.14));
}
.cashflow-cockpit-stage::before {
  inset: 10px;
  border-color: rgba(165, 221, 255, 0.10);
}
.cashflow-cockpit-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(47,255,178,0.14), transparent 28% 72%, rgba(255,88,103,0.14));
  opacity: 0.22;
}
.cashflow-vein-map {
  position: absolute;
  z-index: 1;
  inset: 112px 16px 38px;
  width: auto;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.cashflow-vein-path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 0.48;
  stroke-dasharray: 1.6 3.1;
  opacity: 0.66;
  filter: url(#cashflowGlow);
  animation: cashflowVeinTravel 2.35s linear infinite;
}
.cashflow-vein-path.income {
  stroke: rgba(89, 255, 190, 0.92);
}
.cashflow-vein-path.expense {
  stroke: rgba(255, 111, 128, 0.92);
}
.cashflow-vein-path.p2,
.cashflow-vein-path.p5,
.cashflow-vein-path.p7 {
  stroke-width: 0.30;
  opacity: 0.44;
  animation-duration: 2.8s;
}
.cashflow-vein-path.p3,
.cashflow-vein-path.p6,
.cashflow-vein-path.p8 {
  stroke-width: 0.58;
  opacity: 0.78;
  animation-duration: 1.95s;
}
.cashflow-vein-path.p4 {
  stroke-width: 0.72;
  opacity: 0.86;
  animation-duration: 1.72s;
}
.cashflow-vein-dot {
  filter: url(#cashflowGlow);
  animation: cashflowDotPulse 1.9s ease-in-out infinite;
}
.cashflow-vein-dot.income { fill: rgba(89, 255, 190, 0.95); }
.cashflow-vein-dot.expense { fill: rgba(255, 111, 128, 0.95); }
.cashflow-vein-dot.d2 { animation-delay: 0.28s; }
.cashflow-vein-dot.d3 { animation-delay: 0.56s; }
.cashflow-vein-dot.d4 { animation-delay: 0.84s; }
.cashflow-flow-panel {
  z-index: 4;
  min-height: clamp(128px, 19vw, 150px);
  padding: 14px 10px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,0.10), transparent 0 32%, transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12)),
    rgba(5, 18, 28, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.20);
}
.cashflow-flow-panel.income {
  grid-column: 1;
  grid-row: 1;
  border-color: rgba(89, 255, 190, 0.30);
}
.cashflow-flow-panel.expense {
  grid-column: 3;
  grid-row: 1;
  border-color: rgba(255, 111, 128, 0.30);
}
.cashflow-flow-panel em,
.cashflow-value em,
.cashflow-bookings-card em {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.cashflow-flow-panel em svg,
.cashflow-value em svg,
.cashflow-bookings-card em svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke-width: 2.05;
}
.cashflow-flow-panel span {
  font-size: 0.9rem;
  color: var(--text);
}
.cashflow-flow-panel b {
  font-size: clamp(0.92rem, 3vw, 1.2rem);
  line-height: 1.12;
}
.cashflow-balance-core {
  grid-column: 2;
  grid-row: 1;
  z-index: 5;
  width: min(158px, 100%);
  margin-top: clamp(20px, 3.2vw, 34px);
  padding: 14px 10px;
  border-width: 1px;
  background:
    radial-gradient(circle at 50% 36%, rgba(76, 238, 214, 0.16), transparent 0 24%, transparent 25%),
    radial-gradient(circle, rgba(8, 28, 38, 0.98), rgba(3, 12, 20, 0.99));
  box-shadow:
    inset 0 0 0 9px rgba(255,255,255,0.025),
    inset 0 0 0 16px rgba(29, 232, 213, 0.025),
    inset 0 -20px 26px rgba(0,0,0,0.42),
    0 0 28px rgba(47,255,178,0.14);
  animation: cashflowCorePulse 2.6s ease-in-out infinite;
}
.cashflow-balance-core em {
  position: relative;
  display: grid;
  width: 32px;
  height: 28px;
  place-items: center;
  margin-bottom: 1px;
  color: rgba(102, 245, 218, 0.95);
}
.cashflow-balance-core em svg {
  width: 30px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}
.cashflow-balance-core::before {
  inset: -13px;
  background:
    repeating-conic-gradient(from 0deg, rgba(94,255,208,0.0) 0 10deg, rgba(94,255,208,0.72) 12deg 14deg, rgba(255,111,128,0.0) 18deg 31deg, rgba(255,111,128,0.48) 33deg 35deg, rgba(94,255,208,0.0) 38deg 48deg);
  opacity: 0.55;
  filter: blur(0.25px);
  animation: cashflowCoreSpin 7s linear infinite;
}
.cashflow-balance-core::after {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -2;
  border-radius: inherit;
  border: 1px solid rgba(94, 255, 208, 0.14);
  background:
    radial-gradient(circle, transparent 0 57%, rgba(94,255,208,0.16) 58% 59%, transparent 60% 66%, rgba(255,111,128,0.10) 67% 68%, transparent 69%);
  box-shadow: 0 0 24px rgba(29, 232, 213, 0.14);
  animation: cashflowCorePulse 2.6s ease-in-out infinite reverse;
}
.cashflow-balance-core > span {
  color: var(--text);
  font-size: 0.86rem;
}
.cashflow-balance-core strong {
  font-size: clamp(1.02rem, 3.75vw, 1.38rem);
}
.cashflow-balance-core small {
  color: var(--muted);
  font-size: 0.64rem;
}
.cashflow-flow-list {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 8px;
  align-self: start;
  min-width: 0;
}
.cashflow-flow-list.income {
  grid-column: 1;
  grid-row: 2;
}
.cashflow-flow-list.expense {
  grid-column: 3;
  grid-row: 2;
}
.cashflow-flow-list div {
  position: relative;
  min-width: 0;
  padding: 0 0 8px 14px;
  border-bottom: 1px solid rgba(165, 221, 255, 0.10);
}
.cashflow-flow-list div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  box-shadow: 0 0 10px currentColor;
}
.cashflow-flow-list.income div::before { color: rgba(89, 255, 190, 0.95); background: currentColor; }
.cashflow-flow-list.expense div::before { color: rgba(255, 111, 128, 0.95); background: currentColor; }
.cashflow-flow-list span,
.cashflow-flow-list b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cashflow-flow-list span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}
.cashflow-flow-list b {
  margin-top: 2px;
  font-size: clamp(0.78rem, 2.45vw, 0.95rem);
}
.cashflow-flow-list.income b { color: var(--teal-2); }
.cashflow-flow-list.expense b { color: #ff8b8b; }
.cashflow-bookings-card {
  position: relative;
  z-index: 4;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: clamp(116px, 18vw, 142px);
  padding: 12px 8px;
  border: 1px solid rgba(165, 221, 255, 0.20);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(29,232,213,0.16), transparent 0 36%, transparent 37%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18)),
    rgba(5, 18, 28, 0.74);
}
.cashflow-bookings-card em {
  display: grid;
  place-items: center;
  color: var(--teal-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(116, 226, 161, 0.30);
}
.cashflow-bookings-card span {
  margin-top: 8px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 900;
}
.cashflow-bookings-card b {
  margin-top: 3px;
  color: var(--teal-2);
  font-size: 1.46rem;
  line-height: 1;
}
.cashflow-bookings-card small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}
.cashflow-cockpit-values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cashflow-value {
  min-height: 116px;
  padding: 11px 9px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 8%, rgba(255,255,255,0.07), transparent 0 34%, transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(0,0,0,0.13)),
    rgba(7, 20, 29, 0.48);
}
@keyframes cashflowVeinTravel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -18; }
}
@keyframes cashflowDotPulse {
  0%, 100% { opacity: 0.38; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.28); }
}
@keyframes cashflowIconOrbit {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -18; }
}
@keyframes cashflowCorePulse {
  0%, 100% { transform: scale(0.985); filter: brightness(0.96); }
  50% { transform: scale(1.018); filter: brightness(1.16); }
}
@keyframes cashflowCoreSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.cashflow-cockpit-stage {
  grid-template-columns: minmax(116px, 1fr) clamp(150px, 28%, 184px) minmax(116px, 1fr);
  grid-template-rows: minmax(174px, auto) minmax(116px, auto);
  min-height: clamp(356px, 61vw, 438px);
  gap: 16px 12px;
  padding: clamp(16px, 2.4vw, 22px);
  background:
    radial-gradient(circle at 50% 38%, rgba(29, 232, 213, 0.18), transparent 0 22%, transparent 42%),
    radial-gradient(circle at 22% 42%, rgba(47,255,178,0.12), transparent 0 24%, transparent 46%),
    radial-gradient(circle at 78% 42%, rgba(255,88,103,0.12), transparent 0 24%, transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.14));
}
.cashflow-reactor-map {
  position: absolute;
  z-index: 2;
  inset: 74px clamp(18px, 4vw, 42px) 132px;
  width: auto;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.cashflow-reactor-beam {
  fill: none;
  stroke-linecap: round;
  filter: url(#cashflowGlow);
  stroke-width: 1.05;
  stroke-dasharray: 4 7;
  opacity: 0.82;
  animation: cashflowBeamPulse 2.2s ease-in-out infinite, cashflowBeamTravel 1.9s linear infinite;
}
.cashflow-reactor-beam.income { stroke: url(#cashflowIncomeBeam); }
.cashflow-reactor-beam.expense { stroke: url(#cashflowExpenseBeam); }
.cashflow-reactor-beam.b1,
.cashflow-reactor-beam.b3 {
  stroke-width: 0.62;
  opacity: 0.58;
  animation-delay: 0.28s;
}
.cashflow-reactor-particle {
  filter: url(#cashflowGlow);
  animation: cashflowParticle 2s ease-in-out infinite;
}
.cashflow-reactor-particle.income { fill: rgba(89, 255, 190, 0.95); }
.cashflow-reactor-particle.expense { fill: rgba(255, 111, 128, 0.95); }
.cashflow-reactor-particle.p2 { animation-delay: 0.38s; }
.cashflow-reactor-particle.p3 { animation-delay: 0.76s; }
.cashflow-balance-core {
  grid-column: 2;
  grid-row: 1;
  width: min(174px, 100%);
  margin-top: 0;
  border-color: rgba(98, 255, 215, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(0,0,0,0.16)),
    radial-gradient(circle at 50% 36%, rgba(74, 238, 214, 0.28), transparent 0 21%, transparent 22%),
    radial-gradient(circle, rgba(8, 30, 42, 0.98), rgba(3, 12, 20, 0.99));
  box-shadow:
    inset 0 0 0 7px rgba(255,255,255,0.018),
    inset 0 0 0 18px rgba(29, 232, 213, 0.025),
    inset 0 -20px 28px rgba(0,0,0,0.42),
    0 0 34px rgba(29, 232, 213, 0.20);
}
.cashflow-balance-core::before {
  inset: -14px;
  opacity: 0.70;
  background:
    repeating-conic-gradient(from 0deg, transparent 0 15deg, rgba(95,255,216,0.88) 16deg 18deg, transparent 19deg 33deg, rgba(255,190,92,0.42) 34deg 35deg, transparent 36deg 52deg);
  animation: cashflowCoreSpin 8s linear infinite;
}
.cashflow-balance-core::after {
  inset: -25px;
  border-color: rgba(98, 255, 215, 0.15);
  background:
    radial-gradient(circle, transparent 0 48%, rgba(98,255,215,0.14) 49% 50%, transparent 51% 62%, rgba(255,111,128,0.10) 63% 64%, transparent 65%);
}
.cashflow-balance-core em::before,
.cashflow-balance-core em::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(98,255,215,0.25), rgba(98,255,215,0.95));
  transform: translateX(-50%);
  animation: cashflowHoloBar 1.4s ease-in-out infinite;
}
.cashflow-balance-core em::before {
  height: 20px;
  margin-left: -9px;
}
.cashflow-balance-core em::after {
  height: 26px;
  margin-left: 9px;
  animation-delay: 0.42s;
}
.cashflow-bookings-card {
  grid-column: 2;
  grid-row: 2;
  min-height: 112px;
  align-self: stretch;
}
.cashflow-cockpit-values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@keyframes cashflowBeamTravel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -28; }
}
@keyframes cashflowBeamPulse {
  0%, 100% { opacity: 0.46; }
  50% { opacity: 0.98; }
}
@keyframes cashflowParticle {
  0%, 100% { opacity: 0.18; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1.22); }
}
@keyframes cashflowHoloBar {
  0%, 100% { height: 14px; opacity: 0.42; }
  50% { height: 30px; opacity: 0.95; }
}
.cashflow-cockpit-stage {
  grid-template-columns: minmax(116px, 1fr) clamp(138px, 28%, 178px) minmax(116px, 1fr);
  grid-template-rows: minmax(128px, auto) minmax(122px, auto) minmax(106px, auto);
  min-height: clamp(500px, 92vw, 590px);
  gap: 12px 12px;
  padding: clamp(16px, 2.5vw, 22px);
}
.cashflow-reactor-map {
  inset: 112px clamp(16px, 4vw, 42px) 236px;
}
.cashflow-flow-panel {
  min-height: 128px;
  align-content: center;
  border-width: 1px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.09), transparent 24% 76%, rgba(255,255,255,0.045)),
    radial-gradient(circle at 50% 8%, rgba(255,255,255,0.10), transparent 0 32%, transparent 33%),
    rgba(4, 15, 25, 0.76);
}
.cashflow-flow-panel.income {
  grid-column: 1;
  grid-row: 1;
}
.cashflow-flow-panel.expense {
  grid-column: 3;
  grid-row: 1;
}
.cashflow-reactor-core {
  position: relative;
  z-index: 5;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  align-content: end;
  min-height: 164px;
  align-self: stretch;
  pointer-events: none;
}
.cashflow-reactor-cylinder {
  position: relative;
  width: min(118px, 100%);
  height: 126px;
  border-radius: 999px 999px 18px 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(91,255,219,0.34), transparent 0 28%, transparent 29%),
    linear-gradient(90deg, transparent, rgba(91,255,219,0.10) 28% 72%, transparent),
    rgba(2, 14, 24, 0.64);
  border: 1px solid rgba(91, 255, 219, 0.24);
  box-shadow: inset 0 0 28px rgba(91,255,219,0.10), 0 0 28px rgba(91,255,219,0.18);
  overflow: hidden;
}
.cashflow-reactor-cylinder::before {
  content: "";
  position: absolute;
  inset: 10px 18px 12px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(91,255,219,0.16) 19% 20%, transparent 21% 38%, rgba(91,255,219,0.20) 39% 40%, transparent 41% 62%, rgba(91,255,219,0.15) 63% 64%, transparent 65%),
    radial-gradient(circle at 50% 100%, rgba(91,255,219,0.34), transparent 0 46%, transparent 47%);
  opacity: 0.8;
  animation: cashflowReactorGlow 2.4s ease-in-out infinite;
}
.cashflow-reactor-cylinder .bar {
  position: absolute;
  bottom: 16px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(91,255,219,0.10), rgba(91,255,219,0.95));
  box-shadow: 0 0 10px rgba(91,255,219,0.75);
  animation: cashflowReactorBar 1.6s ease-in-out infinite;
}
.cashflow-reactor-cylinder .b1 { left: 18%; height: 28px; animation-delay: 0.1s; }
.cashflow-reactor-cylinder .b2 { left: 29%; height: 54px; animation-delay: 0.36s; }
.cashflow-reactor-cylinder .b3 { left: 41%; height: 40px; animation-delay: 0.62s; }
.cashflow-reactor-cylinder .b4 { left: 50%; height: 92px; animation-delay: 0.18s; }
.cashflow-reactor-cylinder .b5 { left: 60%; height: 48px; animation-delay: 0.78s; }
.cashflow-reactor-cylinder .b6 { left: 71%; height: 70px; animation-delay: 0.44s; }
.cashflow-reactor-cylinder .b7 { left: 82%; height: 34px; animation-delay: 0.9s; }
.cashflow-reactor-base {
  position: relative;
  width: min(142px, 100%);
  height: 34px;
  margin-top: -8px;
  border: 1px solid rgba(240, 184, 58, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(0,0,0,0.24)), rgba(7, 20, 29, 0.92);
  box-shadow: 0 0 18px rgba(91,255,219,0.18), inset 0 2px 8px rgba(240,184,58,0.10);
}
.cashflow-reactor-base i {
  position: absolute;
  top: 12px;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: rgba(240,184,58,0.8);
  box-shadow: 0 0 10px rgba(240,184,58,0.45);
}
.cashflow-reactor-base i:nth-child(1) { left: 22px; }
.cashflow-reactor-base i:nth-child(2) { left: calc(50% - 9px); }
.cashflow-reactor-base i:nth-child(3) { right: 22px; }
.cashflow-flow-list {
  border: 1px solid rgba(165, 221, 255, 0.12);
  border-radius: 14px;
  padding: 10px;
  background: rgba(3, 15, 24, 0.40);
}
.cashflow-flow-list.income {
  grid-column: 1;
  grid-row: 2 / span 2;
}
.cashflow-flow-list.expense {
  grid-column: 3;
  grid-row: 2 / span 2;
}
.cashflow-balance-core {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  min-height: 112px;
  aspect-ratio: auto !important;
  margin: 0;
  border-radius: 16px;
  padding: 12px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(0,0,0,0.22)),
    radial-gradient(circle at 50% 0%, rgba(240,184,58,0.12), transparent 0 38%, transparent 39%),
    rgba(4, 15, 25, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 14px 28px rgba(0,0,0,0.24),
    0 0 20px rgba(240,184,58,0.08);
}
.cashflow-balance-core::before,
.cashflow-balance-core::after {
  content: none !important;
  display: none !important;
}
.cashflow-balance-core em {
  display: none;
}
.cashflow-balance-core > span {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}
.cashflow-balance-core strong {
  color: #ff8b8b;
  font-size: clamp(1.06rem, 3.4vw, 1.34rem);
}
.cashflow-balance-core small {
  margin-top: 4px;
  color: var(--gold);
  font-size: 0.68rem;
}
.cashflow-bookings-card {
  grid-column: 2;
  grid-row: 3;
  min-height: 104px;
}
@keyframes cashflowReactorBar {
  0%, 100% { transform: scaleY(0.72); opacity: 0.48; }
  50% { transform: scaleY(1.1); opacity: 1; }
}
@keyframes cashflowReactorGlow {
  0%, 100% { opacity: 0.58; transform: translateY(4px); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@media (orientation: landscape) and (min-width: 721px) {
  .cashflow-cockpit {
    width: min(100%, 900px);
  }
  .cashflow-cockpit-stage {
    grid-template-columns: minmax(170px, 1fr) clamp(138px, 21%, 170px) minmax(170px, 1fr);
    grid-template-rows: minmax(150px, auto) minmax(112px, auto);
    min-height: clamp(310px, 43vw, 392px);
    gap: 14px 16px;
    padding: 16px 22px 16px;
  }
  .cashflow-reactor-map {
    inset: 78px 44px 188px;
  }
  .cashflow-flow-panel {
    min-height: 118px;
  }
  .cashflow-balance-core {
    width: min(142px, 100%);
    margin-top: 14px;
  }
  .cashflow-bookings-card {
    min-height: 110px;
  }
  .cashflow-cockpit-values {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cashflow-cockpit-stage {
  box-sizing: border-box;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 42vw, 218px) minmax(0, 1fr);
  grid-template-rows: minmax(176px, auto) minmax(124px, auto) minmax(112px, auto);
  min-height: clamp(560px, 130vw, 650px);
  gap: 12px;
  padding: clamp(16px, 3vw, 22px);
}
.cashflow-reactor-map {
  display: none;
}
.cashflow-flow-panel,
.cashflow-flow-list,
.cashflow-balance-core,
.cashflow-bookings-card {
  min-width: 0;
  max-width: 100%;
}
.cashflow-flow-panel {
  min-height: 138px;
  padding: 12px 10px;
  overflow: hidden;
}
.cashflow-flow-panel em {
  width: 52px;
  height: 52px;
}
.cashflow-flow-panel span,
.cashflow-flow-panel b,
.cashflow-flow-list span,
.cashflow-flow-list b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cashflow-flow-panel b {
  font-size: clamp(0.84rem, 3.2vw, 1.02rem);
  white-space: nowrap;
}
.cashflow-reactor-core {
  position: relative;
  z-index: 5;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 176px;
  pointer-events: none;
  isolation: isolate;
}
.cashflow-reactor-core::before,
.cashflow-reactor-core::after {
  content: "";
  position: absolute;
  top: 56%;
  width: min(112px, 25vw);
  height: 9px;
  border-radius: 999px;
  opacity: 0.78;
  filter: blur(0.2px);
  animation: cashflowReactorPipePulse 1.9s ease-in-out infinite;
  z-index: -1;
}
.cashflow-reactor-core::before {
  right: 76%;
  background: linear-gradient(90deg, rgba(91,255,219,0), rgba(91,255,219,0.95));
  box-shadow: 0 0 18px rgba(91,255,219,0.48);
}
.cashflow-reactor-core::after {
  left: 76%;
  background: linear-gradient(90deg, rgba(255,101,120,0.95), rgba(255,101,120,0));
  box-shadow: 0 0 18px rgba(255,101,120,0.42);
  animation-delay: 0.24s;
}
.cashflow-reactor-core img {
  display: block;
  width: clamp(176px, 48vw, 246px);
  max-width: 142%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.42)) drop-shadow(0 0 22px rgba(91,255,219,0.20));
}
.cashflow-flow-list {
  overflow: hidden;
}
.cashflow-flow-list.income {
  grid-column: 1;
  grid-row: 2 / span 2;
}
.cashflow-flow-list.expense {
  grid-column: 3;
  grid-row: 2 / span 2;
}
.cashflow-balance-core {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  min-height: 116px;
}
.cashflow-bookings-card {
  grid-column: 2;
  grid-row: 3;
  min-height: 110px;
}
@keyframes cashflowReactorPipePulse {
  0%, 100% { opacity: 0.48; transform: scaleX(0.94); }
  50% { opacity: 0.96; transform: scaleX(1.03); }
}
@media (orientation: landscape) and (min-width: 721px) {
  .cashflow-cockpit-stage {
    width: min(100%, 920px);
    grid-template-columns: minmax(180px, 1fr) minmax(210px, 0.78fr) minmax(180px, 1fr);
    grid-template-rows: minmax(196px, auto) minmax(110px, auto);
    min-height: clamp(420px, 54vw, 520px);
    margin-inline: auto;
  }
  .cashflow-reactor-core {
    min-height: 196px;
  }
  .cashflow-reactor-core img {
    width: clamp(240px, 28vw, 330px);
  }
  .cashflow-flow-list.income,
  .cashflow-flow-list.expense {
    grid-row: 2;
  }
}
.comparison-card {
  min-height: auto;
}
.comparison-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.comparison-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.comparison-table th,
.comparison-table td {
  padding: 7px 7px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.comparison-table th {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0;
  background: rgba(255,255,255,0.035);
}
.comparison-table th:first-child,
.comparison-table td:first-child,
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
  text-align: left;
}
.comparison-table tr:last-child td {
  border-bottom: 0;
}
.comparison-building {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0 8px;
  align-items: center;
  min-width: 0;
}
.comparison-building img {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.comparison-building b,
.comparison-building small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comparison-building small {
  color: var(--muted);
  font-size: 0.72rem;
}
.next-action-card h2 {
  margin: 10px 0 6px;
  font-size: 1.35rem;
}
.next-action-card p {
  min-height: 48px;
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.45;
}
.dashboard-warnings,
.quick-actions {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}
.quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-check {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(165, 221, 255, 0.16);
  border-radius: var(--radius);
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dashboard-check::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(240, 184, 58, 0.5);
}
.dashboard-check i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  font-style: normal;
}
.dashboard-check span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-check b {
  overflow: hidden;
  max-width: 160px;
  padding-right: 8px;
  color: var(--text);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-check.good {
  border-color: rgba(73, 209, 125, 0.32);
  background: linear-gradient(180deg, rgba(73, 209, 125, 0.1), rgba(255,255,255,0.025));
}
.dashboard-check.good::after {
  background: var(--teal-2);
  box-shadow: 0 0 12px rgba(116, 226, 161, 0.55);
}
.dashboard-check.good b { color: var(--teal-2); }
.dashboard-check.warn {
  border-color: rgba(240, 184, 58, 0.42);
  background: linear-gradient(180deg, rgba(240, 184, 58, 0.12), rgba(255,255,255,0.025));
}
.dashboard-check.warn b { color: var(--gold); }
.compact-grid { grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1fr) minmax(260px, 1fr); }
.building-map { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.building-tile { min-height: 310px; display: flex; flex-direction: column; }
.building-image {
  position: relative;
  height: clamp(156px, 30vw, 210px);
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 8px;
  background: radial-gradient(circle at 42% 44%, rgba(29, 217, 216, 0.11), rgba(255,255,255,0.035) 58%, rgba(5, 15, 22, 0.18));
}
.building-image-building {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  filter: contrast(1.06) saturate(1.08) drop-shadow(0 16px 22px rgba(0, 0, 0, 0.34));
}
.building-image-resource {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 8px;
  width: clamp(62px, 34%, 96px);
  height: clamp(62px, 34%, 96px);
  object-fit: contain;
  opacity: 0.82;
  pointer-events: none;
  filter: contrast(1.08) saturate(1.14) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4));
}
.building-tile .action-button { margin-top: auto; }
.quality-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(280px, 1fr);
  gap: 10px;
}
.warehouse-list.large { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.warehouse-list.large .warehouse-row {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
}
.warehouse-list.large .warehouse-flow,
.warehouse-list.large .warehouse-market-button,
.warehouse-list.large .warehouse-sell-control {
  grid-column: 1 / -1;
}
.warehouse-list.large .warehouse-flow small {
  white-space: normal;
}
.warehouse-list.large .warehouse-market-button {
  min-height: 34px;
}
@media (max-width: 720px) {
  .warehouse-list.large { grid-template-columns: 1fr; }
}
.admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(280px, 0.9fr);
  gap: 10px;
}
.admin-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.admin-costs {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.admin-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.admin-cost-row span,
.admin-manager-card p,
.admin-effect-grid span { color: var(--muted); }
.admin-manager-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.admin-manager-card {
  min-height: 285px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.manager-portrait-wrap {
  height: 170px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid rgba(123, 213, 239, 0.22);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 28%, rgba(60, 196, 220, 0.18), rgba(7, 18, 26, 0.96) 68%);
}
.manager-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  display: block;
}
.manager-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.option-card {
  min-height: 230px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.option-card h3 {
  margin: 14px 0 8px;
  font-size: 1.15rem;
}
.option-card p {
  min-height: 70px;
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.45;
}
.legal-option-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.legal-option-actions .action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  margin-top: 0;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.legal-option-actions > :last-child {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .legal-option-actions {
    grid-template-columns: 1fr;
  }
  .legal-option-actions > :last-child {
    grid-column: auto;
  }
}
.confirm-field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.confirm-field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.confirm-field input {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(8, 22, 31, 0.94);
  padding: 0 10px;
  font: inherit;
}
.account-panel {
  display: grid;
  gap: 10px;
}
.account-current {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 22, 31, 0.7);
}
.account-current span,
.account-current small,
.account-form small {
  color: var(--muted);
  font-size: 0.78rem;
}
.account-current strong {
  font-size: 1rem;
}
.account-form {
  display: grid;
  gap: 8px;
}
.account-form input {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(8, 22, 31, 0.94);
  padding: 0 10px;
  font: inherit;
}
.account-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.diagnostics-panel {
  display: grid;
  gap: 10px;
}
.diagnostics-lines {
  display: grid;
  gap: 7px;
}
.diagnostics-lines span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
  color: var(--muted);
  font-weight: 800;
}
.diagnostics-lines strong {
  color: var(--text);
  overflow-wrap: anywhere;
}
.diagnostics-lines small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.network-status-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(380px, calc(100vw - 32px));
  z-index: 60;
  display: grid;
  gap: 0;
  padding: 17px 22px;
  border: 1px solid rgba(89, 196, 255, 0.82);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(12, 70, 111, 0.98), rgba(8, 39, 70, 0.98));
  color: var(--text);
  text-align: center;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 26px rgba(32, 164, 237, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%);
}
.network-status-banner span {
  color: #e8f8ff;
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.mini-button.danger {
  border-color: rgba(255, 98, 98, 0.45);
  color: #ffd3d3;
}
.legal-page {
  width: min(880px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 28px 0 44px;
}
.legal-page h1,
.legal-page h2 {
  margin: 16px 0 8px;
  letter-spacing: 0;
}
.legal-page p {
  color: var(--muted);
  line-height: 1.55;
}
.legal-page a:not(.action-button) {
  color: var(--teal);
}

.legal-footer {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  padding: 14px 14px calc(132px + env(safe-area-inset-bottom));
  color: rgba(224, 245, 255, 0.62);
  font-size: 0.76rem;
}

html[data-native-app="1"] .legal-footer {
  display: none !important;
}

/* Build 582: native HQ banner lives in the page flow below the logbook. */
.native-banner-slot {
  display: none;
}

html[data-native-app="1"] .native-banner-slot {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 12px 0 8px;
  border-radius: 12px;
}

.global-menu-essential-list button,
.global-menu-essential-list a,
.global-menu-language {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid rgba(205, 231, 238, 0.16);
  border-radius: 9px;
  color: var(--text);
  background: linear-gradient(100deg, rgba(255,255,255,0.055), rgba(26, 91, 105, 0.16));
  text-align: left;
  text-decoration: none;
}

.global-menu-panel {
  width: min(310px, 86vw);
}

.global-menu-essential-list button:hover,
.global-menu-essential-list button:focus-visible,
.global-menu-essential-list a:hover,
.global-menu-essential-list a:focus-visible,
.global-menu-language:focus-within {
  border-color: rgba(116, 226, 161, 0.64);
  background: rgba(116, 226, 161, 0.10);
  outline: none;
}

.global-menu-essential-list > * > span {
  width: 26px;
  flex: 0 0 26px;
  color: #9ff5d0;
  text-align: center;
}

.global-menu-essential-list b {
  font-size: 0.84rem;
}

.global-menu-essential-list a.danger {
  border-color: rgba(255, 109, 120, 0.35);
}

.global-menu-language {
  flex-wrap: wrap;
}

.global-menu-language select,
.option-language-select {
  width: 100%;
  min-height: 44px;
  padding: 8px 38px 8px 11px;
  border: 1px solid rgba(205, 231, 238, 0.22);
  border-radius: 9px;
  color: var(--text);
  background: #0b2834;
  font: inherit;
}

.global-menu-language select {
  width: calc(100% - 37px);
  margin-left: 37px;
}

.world-card.locked {
  border-color: rgba(205, 231, 238, 0.14);
  box-shadow: none;
  opacity: 0.68;
}

.world-card.locked .world-card-head b {
  color: var(--muted);
}

.world-card.locked button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.legal-footer a,
.legal-footer button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
}

.legal-footer a:hover,
.legal-footer button:hover,
.legal-footer a:focus-visible,
.legal-footer button:focus-visible {
  color: var(--teal);
  outline: none;
}

.cookie-consent {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(3, 11, 17, 0.58);
  backdrop-filter: blur(6px);
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent-card {
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(141, 229, 255, 0.25);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 56, 70, 0.98), rgba(7, 24, 34, 0.98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
}

.cookie-consent-card h2 {
  margin: 12px 0 8px;
  font-size: 1.25rem;
}

.cookie-consent-card p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.45;
}

.cookie-options {
  display: grid;
  gap: 9px;
}

.cookie-options label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(141, 229, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.cookie-options span {
  display: grid;
  gap: 3px;
}

.cookie-options small {
  color: var(--muted);
  line-height: 1.35;
}

.cookie-options input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
}

.cookie-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 560px) {
  .cookie-consent {
    padding: 10px;
  }

  .cookie-consent-card {
    max-height: calc(100vh - 20px);
    padding: 14px;
  }

  .cookie-actions {
    grid-template-columns: 1fr;
  }
}

/* Tutorial V2 and Academy */
.tutorial-progress {
  grid-template-columns: repeat(14, minmax(4px, 1fr));
  gap: 4px;
}

.tutorial-spotlight {
  position: fixed;
  z-index: 58;
  border: 2px solid #55f2af;
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(2, 12, 19, 0.64),
    0 0 0 6px rgba(85, 242, 175, 0.16),
    0 0 28px rgba(0, 210, 255, 0.72);
  pointer-events: none;
  animation: tutorialTargetGlow 1.25s ease-in-out infinite;
}

.tutorial-spotlight::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -24px;
  width: 16px;
  height: 16px;
  border-right: 4px solid #55f2af;
  border-bottom: 4px solid #55f2af;
  transform: translateX(-50%) rotate(45deg);
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.8));
}

.tutorial-pulse-target {
  position: relative;
  z-index: 59 !important;
  isolation: isolate;
}

.tutorial-find-target {
  position: fixed;
  left: 12px;
  top: 78px;
  z-index: 61;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgba(0, 210, 255, 0.65);
  border-radius: 7px;
  color: #effcff;
  background: rgba(7, 38, 54, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36);
  font-size: 0.78rem;
  font-weight: 800;
  pointer-events: auto;
}

.tutorial-starter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}

.tutorial-starter-grid button {
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(85, 242, 175, 0.44);
  border-radius: 7px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(15, 65, 72, 0.96), rgba(8, 29, 42, 0.96));
  cursor: pointer;
}

.tutorial-starter-grid strong,
.tutorial-starter-grid small {
  display: block;
}

.tutorial-starter-grid small {
  margin-top: 5px;
  color: var(--muted);
}

@keyframes tutorialTargetGlow {
  50% { filter: brightness(1.18); }
}

.academy-layout {
  display: grid;
  gap: 14px;
}

.academy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(85, 242, 175, 0.3);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(8, 44, 51, 0.94), rgba(8, 24, 36, 0.96));
}

.academy-hero span {
  color: var(--teal-2);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.academy-hero h2 {
  margin: 5px 0 7px;
  font-size: 1.35rem;
}

.academy-hero p,
.academy-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.academy-badge {
  display: grid;
  place-items: center;
  width: 104px;
  min-height: 104px;
  padding: 10px;
  border: 1px solid rgba(240, 184, 58, 0.48);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(240, 184, 58, 0.08);
  text-align: center;
}

.academy-badge strong {
  font-size: 1.35rem;
}

.academy-badge span {
  font-size: 0.66rem;
}

.academy-badge.earned {
  border-color: rgba(85, 242, 175, 0.7);
  color: #55f2af;
  background: rgba(85, 242, 175, 0.12);
}

.academy-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.academy-progress > span {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #55f2af 0 var(--academy-progress), rgba(255,255,255,0.12) var(--academy-progress) 100%);
}

.academy-progress b {
  font-size: 0.78rem;
}

.academy-grid {
  display: grid;
  gap: 9px;
}

.academy-context-hint {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 10px;
  margin: 8px 0 12px;
  padding: 11px 12px;
  border: 1px solid rgba(0, 210, 255, 0.36);
  border-radius: 7px;
  background: rgba(7, 40, 53, 0.92);
}

.academy-context-hint span,
.academy-context-hint strong,
.academy-context-hint p {
  display: block;
}

.academy-context-hint span {
  color: var(--teal-2);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.academy-context-hint strong {
  margin-top: 2px;
}

.academy-context-hint p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.academy-context-hint button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.academy-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(132px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(9, 32, 43, 0.88);
}

.academy-card.done {
  border-color: rgba(85, 242, 175, 0.36);
}

.academy-number {
  color: var(--teal-2);
  font-size: 1.15rem;
  font-weight: 900;
  text-align: center;
}

.academy-card h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
}

.onboarding-rollout {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 11, 17, 0.76);
}

.onboarding-rollout-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: end;
  gap: 14px;
  width: min(620px, 100%);
  padding: 18px;
  border: 1px solid rgba(85, 242, 175, 0.5);
  border-radius: 8px;
  background: rgba(7, 24, 34, 0.99);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}

.onboarding-rollout-card img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  object-position: bottom;
}

.onboarding-rollout-card > div > span {
  color: var(--teal-2);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.onboarding-rollout-card h2 {
  margin: 6px 0 8px;
}

.onboarding-rollout-card p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.48;
}

@media (max-width: 620px) {
  .tutorial-card {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .tutorial-guide {
    min-height: 225px;
  }
  .tutorial-guide img {
    width: 118px;
    max-width: none;
    transform: translateX(-12px);
  }
  .tutorial-starter-grid,
  .academy-hero,
  .onboarding-rollout-card {
    grid-template-columns: 1fr;
  }
  .academy-badge {
    width: 88px;
    min-height: 88px;
    border-radius: 50%;
  }
  .academy-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .academy-card .action-button {
    grid-column: 1 / -1;
  }
  .onboarding-rollout-card {
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
  }
  .onboarding-rollout-card img {
    max-height: 170px;
  }
}

/* Build 582 final mobile menu width override. */
.global-menu-panel {
  width: min(310px, 86vw);
}
.danger-zone {
  border-color: rgba(239, 89, 89, 0.34);
}
.action-button.danger {
  color: #fff4f4;
  border-color: rgba(239, 89, 89, 0.62);
  background: rgba(239, 89, 89, 0.15);
}
.admin-manager-card.active {
  border-color: rgba(73, 209, 125, 0.45);
  background: linear-gradient(180deg, rgba(20, 60, 57, 0.88), rgba(9, 25, 34, 0.92));
}
.admin-manager-card h3 {
  margin: 12px 0 6px;
  font-size: 1.15rem;
}
.admin-manager-card p {
  min-height: 54px;
  margin: 0 0 12px;
  line-height: 1.42;
}
.admin-effect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.admin-effect-grid div {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.admin-effect-grid span,
.admin-effect-grid b { display: block; }
.admin-effect-grid b {
  margin-top: 3px;
  color: var(--teal-2);
}
.city-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.city-tabs.city-tabs-compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.city-tabs.city-tabs-compact button {
  min-height: 44px;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 3px;
  padding: 6px 3px;
}
.city-tabs.city-tabs-compact button span {
  width: 24px;
  height: 24px;
  font-size: 0.95rem;
}
.city-tabs.city-tabs-compact button strong {
  max-width: 100%;
  font-size: 0.7rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.city-tabs button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 8px;
  padding: 8px 10px;
  border-color: rgba(205, 231, 238, 0.18);
  background:
    radial-gradient(circle at 18% 22%, rgba(116, 226, 161, 0.15), transparent 42%),
    linear-gradient(180deg, rgba(20, 43, 56, 0.96), rgba(8, 22, 31, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}
.city-tabs button span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(116, 226, 161, 0.12);
  font-size: 1.1rem;
}
.city-tabs button strong {
  min-width: 0;
  color: inherit;
  font-size: 0.92rem;
  line-height: 1.08;
}
.city-tabs button.active {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.25), transparent 38%),
    linear-gradient(135deg, var(--teal), var(--blue-2));
}
.city-tabs button.active span {
  background: rgba(5, 15, 22, 0.18);
}
.city-content {
  display: grid;
  gap: 10px;
}
.city-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.city-card p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.city-hub-modern {
  display: grid;
  gap: 10px;
  padding: 10px;
}
.city-hub-hero {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid rgba(0, 245, 190, 0.26);
  border-radius: var(--radius);
  background: #06131b;
}
.city-hub-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.48;
}
.city-hub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 15, 22, 0.2), rgba(5, 15, 22, 0.86));
}
.city-hub-hero > div {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  min-height: 180px;
  padding: 14px;
}
.city-hub-hero span,
.city-hub-hero small {
  color: var(--muted);
  font-weight: 850;
}
.city-hub-hero strong {
  max-width: 560px;
  margin: 3px 0;
  font-size: 1.35rem;
  line-height: 1.08;
}
.city-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.city-hub-card.visual {
  position: relative;
  min-height: 132px;
  display: grid;
  align-content: end;
  gap: 4px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(205, 231, 238, 0.2);
  border-radius: var(--radius);
  color: var(--text);
  text-align: left;
  background:
    radial-gradient(circle at 78% 18%, rgba(0, 215, 250, 0.24), transparent 32%),
    linear-gradient(145deg, rgba(27, 69, 82, 0.98), rgba(8, 22, 31, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.city-hub-card.visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.09), transparent 32%),
    radial-gradient(circle at 20% 12%, rgba(116,226,161,0.16), transparent 28%);
}
.city-hub-card.visual span {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(5, 15, 22, 0.38);
  font-size: 1.35rem;
}
.city-hub-card.visual strong,
.city-hub-card.visual b,
.city-hub-card.visual small {
  position: relative;
  z-index: 1;
}
.city-hub-card.visual strong {
  font-size: 1.03rem;
  line-height: 1.08;
}
.city-hub-card.visual b {
  color: var(--teal-2);
  font-size: 1rem;
}
.city-hub-card.visual small {
  color: var(--muted);
  line-height: 1.2;
}
.city-hub-card.visual:hover {
  border-color: rgba(0, 255, 170, 0.56);
  transform: translateY(-1px);
}
.city-card-missions { background-image: linear-gradient(145deg, rgba(50, 78, 105, 0.95), rgba(8, 22, 31, 0.98)); }
.city-card-buildings { background-image: linear-gradient(145deg, rgba(79, 63, 34, 0.95), rgba(8, 22, 31, 0.98)); }
.city-card-options { background-image: linear-gradient(145deg, rgba(38, 69, 91, 0.96), rgba(8, 22, 31, 0.98)); }
.city-card-bank { background-image: linear-gradient(145deg, rgba(38, 73, 91, 0.98), rgba(16, 34, 45, 0.98)); }
.city-card-lobby { background-image: linear-gradient(145deg, rgba(34, 73, 68, 0.98), rgba(8, 22, 31, 0.98)); }
.city-card-profile { background-image: linear-gradient(145deg, rgba(54, 61, 92, 0.96), rgba(8, 22, 31, 0.98)); }
.city-card-admin { background-image: linear-gradient(145deg, rgba(42, 70, 86, 0.98), rgba(8, 22, 31, 0.98)); }
.city-card-casino { background-image: linear-gradient(145deg, rgba(82, 48, 82, 0.96), rgba(8, 22, 31, 0.98)); }
.city-card-townhall { background-image: linear-gradient(145deg, rgba(76, 71, 50, 0.96), rgba(8, 22, 31, 0.98)); }
.stock-market-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.stock-market-summary div,
.stock-row,
.stock-detail-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.stock-market-summary div {
  padding: 8px;
}
.stock-market-summary span,
.stock-main span,
.stock-price span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}
.stock-market-summary b,
.stock-main strong {
  color: var(--text);
}
.stock-market-summary b small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
}
.stock-list {
  display: grid;
  gap: 8px;
}
.stock-sector-group {
  display: grid;
  gap: 7px;
}
.stock-sector-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}
.stock-sector-title b {
  color: var(--gold);
}
.stock-row {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(78px, auto) 88px;
  gap: 8px;
  align-items: center;
  padding: 9px;
  overflow: hidden;
}
.stock-row:hover,
.stock-row.active {
  border-color: rgba(0, 245, 140, 0.52);
  background: rgba(0, 245, 140, 0.07);
}
.stock-row.up {
  border-color: rgba(128, 239, 170, 0.32);
}
.stock-row.down {
  border-color: rgba(240, 184, 58, 0.28);
}
.stock-row.active {
  border-color: rgba(0, 245, 140, 0.52);
}
.stock-main {
  min-width: 0;
}
.stock-main strong,
.stock-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stock-sparkline {
  display: block;
  justify-self: end;
  width: 88px;
  max-width: 100%;
  height: 30px;
  min-width: 0;
  overflow: hidden;
}
.stock-sparkline-grid {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.stock-sparkline polyline {
  fill: none;
  stroke: var(--teal-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(116,226,161,0.18));
}
.stock-sparkline.down polyline,
.stock-row.down .stock-sparkline polyline {
  stroke: var(--gold);
  filter: drop-shadow(0 0 2px rgba(240,184,58,0.16));
}
.stock-price {
  text-align: right;
}
.stock-price b {
  display: block;
  color: var(--teal-2);
  white-space: nowrap;
}
.stock-row.down .stock-price b,
.stock-row.down .stock-price span {
  color: var(--gold);
}
.stock-detail-panel {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
}
.stock-detail-top,
.stock-inline-detail {
  border-color: rgba(0, 245, 140, 0.42);
  background:
    linear-gradient(135deg, rgba(0,245,140,0.08), rgba(0,188,212,0.055)),
    rgba(255,255,255,0.035);
}
.stock-inline-detail {
  margin: -2px 0 8px;
}
.stock-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
  gap: 12px;
  align-items: center;
}
.stock-detail-head .stock-sparkline {
  justify-self: stretch;
  width: 100%;
  height: 78px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(0,0,0,0.14);
}
.stock-detail-head strong,
.stock-detail-head span {
  display: block;
}
.stock-detail-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}
.stock-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.stock-detail-sections {
  display: grid;
  gap: 10px;
}
.stock-detail-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.12);
}
.stock-detail-section > strong {
  font-size: 0.9rem;
}
.stock-detail-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.stock-detail-grid div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.stock-detail-grid span,
.stock-trade-preview span,
.stock-trade-panel label span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}
.stock-detail-grid b {
  display: block;
  color: var(--text);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.trade-summary {
  gap: 6px;
}
.stock-summary-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.stock-summary-line span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.stock-summary-line b {
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}
.stock-summary-line.total b {
  color: var(--green);
}
.stock-summary-line.total.negative b {
  color: var(--amber);
}
.stock-summary-line.fee b {
  color: var(--muted);
}
.stock-trade-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
}
.stock-trade-panel input {
  width: 100%;
  margin-top: 5px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}
.stock-trade-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.stock-trade-preview span {
  flex: 1 1 170px;
}
.stock-detail-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.stock-subtitle,
.stock-lot-row,
.stock-trade-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(92px, 0.8fr) minmax(90px, 0.8fr);
  gap: 8px;
  align-items: center;
}
.stock-subtitle {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 6px;
}
.stock-subtitle span,
.stock-lot-row span,
.stock-trade-row small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}
.stock-subtitle b,
.stock-lot-row b,
.stock-trade-row b {
  color: var(--text);
}
.stock-lot-list,
.stock-trade-history {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}
.stock-market-modern {
  display: grid;
  gap: 10px;
  padding: 10px;
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 200, 250, 0.12), transparent 32%),
    var(--panel);
}
.stock-page-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}
.stock-page-title span,
.stock-page-title b {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}
.stock-page-title strong {
  display: block;
  margin-top: 2px;
  font-size: 1.28rem;
  line-height: 1.08;
}
.stock-top-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.16);
}
.stock-top-tabs button {
  min-height: 40px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 900;
}
.stock-top-tabs button:last-child { border-right: 0; }
.stock-top-tabs button.active {
  color: #edfffb;
  background: rgba(0, 245, 190, 0.14);
  box-shadow: inset 0 -2px 0 rgba(0, 255, 170, 0.8);
}
.stock-market-summary-modern {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.stock-market-summary-modern div {
  background: rgba(0,0,0,0.14);
}
.stock-watch-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.stock-watch-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.035);
  font: inherit;
  text-align: left;
}
.stock-watch-card img {
  grid-row: span 3;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.stock-watch-card span,
.stock-watch-card b,
.stock-watch-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stock-watch-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}
.stock-watch-card b {
  font-size: 0.86rem;
}
.stock-watch-card small {
  color: var(--green);
  font-weight: 900;
}
.stock-watch-card.down small { color: var(--red); }
.stock-watch-card.active {
  border-color: rgba(0, 255, 170, 0.62);
  background: rgba(0, 245, 190, 0.1);
}
.stock-broker-detail {
  margin: 0;
  padding: 10px;
  border-color: rgba(0, 245, 190, 0.46);
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 245, 190, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(21, 60, 72, 0.96), rgba(7, 21, 30, 0.98));
}
.stock-broker-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.stock-broker-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  background: rgba(0,0,0,0.16);
}
.stock-broker-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.stock-broker-title {
  min-width: 0;
}
.stock-broker-title span,
.stock-broker-title small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}
.stock-broker-title strong {
  display: block;
  margin: 2px 0;
  font-size: 1.25rem;
  line-height: 1.08;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stock-broker-price {
  text-align: right;
}
.stock-broker-price b {
  display: block;
  font-size: 1.15rem;
}
.stock-broker-price span {
  color: var(--green);
  font-weight: 950;
}
.stock-broker-price.down span { color: var(--red); }
.stock-broker-chart {
  min-height: 112px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 100% 25%,
    rgba(0,0,0,0.14);
}
.stock-broker-chart .stock-sparkline {
  width: 100%;
  height: 112px;
}
.stock-broker-chart .stock-sparkline polyline {
  stroke-width: 2.4;
}
.stock-broker-owned {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.stock-broker-owned div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.stock-broker-owned span,
.stock-broker-owned small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}
.stock-broker-owned b {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.stock-order-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.12);
}
.stock-order-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stock-order-tabs button {
  min-height: 42px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 950;
}
.stock-order-tabs button.active {
  color: #06131b;
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
}
.stock-order-main {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.stock-amount-control {
  display: grid;
  align-content: start;
  gap: 5px;
}
.stock-amount-control span,
.stock-amount-control small,
.stock-order-preview span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}
.stock-amount-control input {
  width: 100%;
  min-height: 52px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(0,0,0,0.24);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 950;
  text-align: center;
}
.stock-order-preview {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}
.stock-order-preview div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.stock-order-preview b {
  text-align: right;
}
.stock-order-preview .total {
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.stock-order-preview .total b {
  color: var(--green);
  font-size: 1.05rem;
}
.stock-order-preview .total.negative b {
  color: var(--gold);
}
.stock-fee-details {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.025);
}
.stock-fee-details summary,
.stock-news-collapsible summary {
  cursor: pointer;
  padding: 10px;
  color: var(--muted);
  font-weight: 900;
}
.stock-news-collapsible {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.025);
}
.stock-news-collapsible .stock-news-list {
  padding: 0 8px 8px;
}
@media (max-width: 620px) {
  .city-tabs.city-tabs-compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .city-tabs.city-tabs-compact button strong {
    font-size: 0.62rem;
  }
  .city-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .city-hub-card.visual {
    min-height: 122px;
    padding: 10px;
  }
  .stock-market-summary-modern,
  .stock-watch-strip,
  .stock-broker-owned {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stock-order-main {
    grid-template-columns: 1fr;
  }
  .stock-broker-head {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .stock-broker-price {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    text-align: left;
  }
}
.stock-trade-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}
.stock-trade-history summary::-webkit-details-marker {
  display: none;
}
.stock-trade-history summary::after {
  content: "anzeigen";
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}
.stock-trade-history[open] summary::after {
  content: "ausblenden";
}
.stock-trade-history-list {
  display: grid;
  gap: 6px;
}
.stock-lot-row,
.stock-trade-row {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.15);
}
.stock-lot-row em,
.stock-trade-row em {
  justify-self: end;
  color: var(--green);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.stock-lot-row.locked em,
.stock-trade-row.buy em {
  color: var(--gold);
}
.stock-trade-row span,
.stock-trade-row strong,
.stock-trade-row small {
  display: block;
  min-width: 0;
}
.stock-news-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.stock-news-list div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(0, 188, 212, 0.22);
  border-radius: var(--radius);
  background: rgba(0, 188, 212, 0.055);
  text-align: center;
}
.stock-news-list span {
  display: block;
  color: var(--teal-2);
  font-size: 0.76rem;
  font-weight: 900;
}
.stock-news-list b {
  display: block;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.35;
}
.city-hub-panel .city-placeholder-grid {
  margin-top: 10px;
}
.city-hub-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.city-hub-card:hover {
  border-color: rgba(0,245,140,0.42);
  background: rgba(0,245,140,0.06);
}
.city-hub-card span,
.city-hub-card small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.city-hub-card b {
  display: block;
  margin: 4px 0;
  color: var(--text);
}
.city-impulses {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.loan-panel {
  display: grid;
  gap: 10px;
}
.loan-modern {
  gap: 12px;
}
.loan-summary-modern {
  gap: 8px;
}
.loan-summary-modern > div {
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(0,0,0,0.14));
}
.loan-create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
  align-items: end;
}
.loan-create-grid label span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}
.loan-create-grid input,
.loan-create-grid select,
.loan-accept-line input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.24);
  color: var(--text);
  font: inherit;
  font-weight: 900;
}
.loan-request-create > .panel-title,
.loan-request-create > .loan-request-explainer,
.loan-request-create > .loan-request-terms,
.loan-request-create > .action-button {
  grid-column: 1 / -1;
}
.loan-request-explainer {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(18, 232, 162, 0.7);
  background: rgba(18, 232, 162, 0.06);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}
.loan-request-terms {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.loan-request-terms label {
  display: grid;
  gap: 6px;
}
.loan-request-terms select {
  min-height: 54px;
  font-size: 1rem;
}
.loan-offer-preview {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(128, 239, 170, 0.42);
  border-radius: var(--radius);
  background: rgba(19, 80, 54, 0.14);
}
.loan-offer-preview span,
.loan-offer-preview small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}
.loan-offer-preview b {
  display: block;
  margin-top: 2px;
  color: var(--green);
}
.loan-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.loan-columns section,
.loan-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}
.loan-columns section {
  padding: 9px;
}
.loan-list {
  display: grid;
  gap: 7px;
}
.loan-row {
  display: grid;
  gap: 5px;
  padding: 8px;
}
.loan-card {
  position: relative;
  gap: 9px;
  padding: 12px;
  overflow: hidden;
  border-color: rgba(123, 219, 255, 0.22);
  background:
    radial-gradient(circle at 14% 0%, rgba(40, 232, 182, 0.17), transparent 36%),
    linear-gradient(145deg, rgba(29, 70, 85, 0.82), rgba(9, 31, 42, 0.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 24px rgba(0,0,0,0.18);
}
.loan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent 38%, rgba(0, 234, 255, 0.05));
  opacity: 0.65;
}
.loan-card > * {
  position: relative;
  z-index: 1;
}
.loan-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
.loan-card-head > div:nth-child(2) {
  min-width: 0;
}
.loan-card-head strong,
.loan-lender-link {
  display: block;
  min-width: 0;
}
.loan-card-head strong {
  color: var(--text);
  font-size: 1.02rem;
}
.loan-lender-link {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 900;
}
.loan-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(128, 239, 170, 0.45);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(21, 242, 146, 0.34), rgba(11, 158, 195, 0.24));
  color: #eafff4;
  font-size: 0.82rem;
  font-weight: 1000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 18px rgba(29, 242, 165, 0.18);
}
.loan-avatar.debt {
  border-color: rgba(255, 211, 102, 0.42);
  background: linear-gradient(145deg, rgba(255, 211, 102, 0.30), rgba(0, 206, 255, 0.16));
}
.loan-avatar.offer {
  color: #082017;
  background: linear-gradient(145deg, #ffd766, #16e79f 72%, #0dc8ff);
}
.loan-avatar.lent {
  background: linear-gradient(145deg, rgba(82, 178, 255, 0.34), rgba(22, 238, 157, 0.20));
}
.loan-rate {
  justify-self: end;
  max-width: 116px;
  padding: 6px 8px;
  border: 1px solid rgba(128, 239, 170, 0.34);
  border-radius: 999px;
  background: rgba(19, 80, 54, 0.22);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 1000;
  text-align: right;
  white-space: nowrap;
}
.loan-rate.warn {
  border-color: rgba(255, 211, 102, 0.46);
  color: #ffd766;
}
.loan-rate.danger {
  border-color: rgba(255, 107, 107, 0.52);
  color: #ff8d9a;
}
.loan-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.loan-meta-grid span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(0,0,0,0.16);
}
.loan-meta-grid small,
.loan-meta-grid b {
  display: block;
}
.loan-meta-grid small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}
.loan-meta-grid b {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loan-risk-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(0,0,0,0.26);
}
.loan-risk-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffcf5c, #38f28f, #05d4ff);
  box-shadow: 0 0 16px rgba(21, 242, 146, 0.24);
}
.loan-risk-meter.danger span {
  background: linear-gradient(90deg, #ff5b6b, #ffcf5c);
}
.loan-warning {
  color: #ff8d9a;
  font-size: 0.76rem;
  font-weight: 900;
}
.loan-row span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}
.loan-row.is-overdue {
  border-color: rgba(255, 107, 107, 0.55);
  background: rgba(255, 107, 107, 0.08);
}
.loan-accept-line {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(130px, 1.4fr);
  gap: 6px;
}
.loan-action-line {
  grid-template-columns: minmax(86px, 0.72fr) minmax(152px, 1.4fr);
}
.loan-action-line input {
  border-color: rgba(123, 219, 255, 0.24);
  border-radius: 12px;
  background: rgba(4, 22, 30, 0.72);
}
.loan-action-line .mini-button {
  border-radius: 12px;
  font-weight: 1000;
}
.casino-machine {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.casino-reel {
  --casino-symbol-size: min(62px, 15vw);
  --casino-symbol-gap: 10px;
  --casino-row-step: calc(var(--casino-symbol-size) + var(--casino-symbol-gap));
  --casino-cycle: calc(var(--casino-row-step) * 5);
  display: grid;
  grid-template-rows: 74px 18px;
  place-items: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
  height: 118px;
  min-height: 0;
  padding: 10px 6px;
  border: 1px solid rgba(116, 226, 161, 0.24);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20, 43, 56, 0.9), rgba(8, 22, 31, 0.96));
}
.casino-reel.spinning {
  padding: 10px 6px;
  border-color: rgba(39, 192, 232, 0.48);
  box-shadow: inset 0 0 18px rgba(39, 192, 232, 0.16);
}
.casino-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--casino-symbol-gap);
  width: 100%;
  height: 74px;
  min-height: 0;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}
.casino-reel.spinning .casino-strip {
  justify-content: flex-start;
  animation: casinoReelSpin var(--reel-speed, 0.64s) linear infinite;
  animation-delay: var(--reel-delay, 0ms);
}
.casino-reel img {
  width: var(--casino-symbol-size);
  height: var(--casino-symbol-size);
  object-fit: contain;
  flex: 0 0 auto;
}
.casino-symbol { transform-origin: 50% 50%; }
.casino-reel span {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.casino-machine.is-spinning .casino-reel::before,
.casino-machine.is-spinning .casino-reel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 28px;
  pointer-events: none;
}
.casino-machine.is-spinning .casino-reel::before {
  top: 0;
  background: linear-gradient(180deg, rgba(8,22,31,0.98), transparent);
}
.casino-machine.is-spinning .casino-reel::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(8,22,31,0.98), transparent);
}
@keyframes casinoReelSpin {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, calc(var(--casino-cycle) * -1), 0); }
}
.casino-controls {
  display: grid;
  grid-template-columns: 64px minmax(90px, 1fr) 64px minmax(160px, 1.2fr);
  gap: 8px;
  margin-bottom: 10px;
}
.casino-controls button,
.casino-controls input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.04);
  font: inherit;
  font-weight: 900;
}
.casino-controls input {
  text-align: center;
}
.casino-stats,
.city-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.city-placeholder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.casino-stats div,
.city-placeholder-grid div,
.casino-result {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.casino-stats span,
.casino-stats b,
.city-placeholder-grid span,
.city-placeholder-grid b,
.casino-result strong,
.casino-result span {
  display: block;
}
.casino-stats span,
.city-placeholder-grid span,
.casino-result span {
  color: var(--muted);
  font-size: 0.74rem;
}
.casino-stats b,
.city-placeholder-grid b,
.casino-result strong {
  margin-top: 2px;
  color: var(--teal-2);
}
.casino-result {
  margin-top: 10px;
}
.casino-hall-of-fame {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  margin-top: 10px;
}
.casino-jackpot-winner,
.casino-top-wins {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(240, 194, 72, 0.38);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(240, 194, 72, 0.12), rgba(12, 31, 43, 0.78) 58%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.casino-hall-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f4cf63;
  font-size: 0.78rem;
}
.casino-hall-title > span {
  font-size: 1rem;
}
.casino-winner-company {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 11px 0 6px;
  padding: 0;
  border: 0;
  color: var(--text);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.casino-winner-company > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(240, 194, 72, 0.55);
  border-radius: 50%;
  color: #10242e;
  background: linear-gradient(145deg, #ffe28a, #c99121);
  font-weight: 950;
}
.casino-winner-company > strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
.casino-jackpot-winner > b {
  display: block;
  color: #f4cf63;
  font-size: 1.25rem;
}
.casino-jackpot-winner > small,
.casino-jackpot-winner > p {
  display: block;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}
.casino-ranking {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}
.casino-ranking-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(3, 18, 27, 0.42);
}
.casino-ranking-row > i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #10242e;
  background: #f4cf63;
  font-style: normal;
  font-weight: 950;
}
.casino-ranking-row > button {
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.casino-ranking-row strong,
.casino-ranking-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.casino-ranking-row small,
.casino-ranking-empty {
  color: var(--muted);
  font-size: 0.68rem;
}
.casino-ranking-row > b {
  color: var(--teal-2);
  font-size: 0.82rem;
  white-space: nowrap;
}
.casino-ranking-empty {
  margin: 5px 0 0;
}
.casino-win-history {
  min-width: 0;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(39, 192, 232, 0.3);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(39, 192, 232, 0.09), rgba(8, 25, 35, 0.82));
}
.casino-win-log {
  display: grid;
  align-content: start;
  gap: 5px;
  max-height: 314px;
  margin-top: 8px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(2, 14, 22, 0.38);
}
.casino-win-log:focus-visible {
  outline: 2px solid var(--teal-2);
  outline-offset: 2px;
}
.casino-win-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 56px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: calc(var(--radius) - 3px);
  background: rgba(255,255,255,0.035);
}
.casino-win-log-row > button {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--text);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.casino-win-log-row > button strong,
.casino-win-log-row > button small,
.casino-win-log-row > span small,
.casino-win-log-row > span b {
  display: block;
}
.casino-win-log-row > button strong,
.casino-win-log-row > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.casino-win-log-row > button small,
.casino-win-log-row > span small,
.casino-win-log-status {
  color: var(--muted);
  font-size: 0.7rem;
}
.casino-win-log-row > span {
  text-align: right;
  white-space: nowrap;
}
.casino-win-log-row > span b {
  color: var(--teal-2);
  font-size: 0.86rem;
}
.casino-win-log-status {
  margin: 8px;
}
.knowledge-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}
.knowledge-card {
  min-width: 0;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.knowledge-card.wide {
  grid-column: 1 / -1;
}
.knowledge-card p {
  margin: 8px 0 10px;
  color: var(--muted);
  line-height: 1.45;
}
.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.knowledge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  min-width: 0;
}
.knowledge-list.resources {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.knowledge-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
  min-width: 0;
}
.knowledge-item.compact {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}
.knowledge-item img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
}
.knowledge-item.compact img {
  width: 38px;
  height: 38px;
}
.knowledge-item strong,
.knowledge-item small,
.knowledge-item p,
.knowledge-row span,
.knowledge-row small {
  display: block;
}
.knowledge-item small,
.knowledge-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}
.knowledge-item p {
  grid-column: 1 / -1;
  min-height: 38px;
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}
.knowledge-flow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}
.knowledge-flow span {
  display: block;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.knowledge-flow b {
  color: var(--text);
  font-weight: 800;
}
.knowledge-item b,
.knowledge-row b {
  color: var(--teal-2);
  white-space: normal;
  text-align: right;
}
.knowledge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.knowledge-row em {
  flex: 1 0 100%;
  min-width: 0;
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.35;
}
.knowledge-row.economy-row b {
  font-size: 0.82rem;
}
.knowledge-row.economy-row.surplus strong {
  color: var(--green);
}
.knowledge-row.economy-row.shortage strong {
  color: var(--orange);
}
.wide-admin-card {
  grid-column: 1 / -1;
}
.admin-filter-tabs {
  margin: 10px 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.admin-stat-grid,
.admin-data-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.admin-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-stat-grid div,
.admin-data-columns section {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.admin-stat-grid span,
.admin-data-columns span,
.moderation-row small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}
.admin-stat-grid b,
.admin-data-columns b {
  display: block;
  margin-top: 3px;
  color: var(--teal-2);
}
.moderation-list {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.moderation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.moderation-row > span {
  min-width: 0;
}
.moderation-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moderation-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}
.moderation-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  font-weight: 800;
}
.moderation-actions button:hover {
  border-color: rgba(0,255,98,0.55);
}
.moderation-actions button.danger {
  border-color: rgba(255,104,104,0.45);
  color: #ffb2b2;
}
.moderation-actions button.danger:hover {
  border-color: rgba(255,104,104,0.8);
}
.player-admin-row {
  display: block;
  padding: 0;
}
.player-admin-row summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 7px 0;
  cursor: pointer;
  list-style: none;
}
.player-admin-row summary::-webkit-details-marker {
  display: none;
}
.player-admin-row summary img {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.05);
}
.player-admin-row summary span {
  min-width: 0;
}
.player-admin-row summary strong,
.player-admin-row summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-admin-row summary.standard-name strong {
  color: var(--gold);
}
.player-admin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 0 7px 42px;
}
.player-admin-chips span {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,0.035);
  font-size: 0.68rem;
  font-weight: 800;
}
.player-admin-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 0 7px 42px;
}
.player-admin-details section {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}
.player-admin-details span,
.player-admin-details small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}
.player-admin-details b {
  display: block;
  margin: 2px 0;
  color: var(--teal-2);
  font-size: 0.9rem;
}
.player-admin-row .moderation-actions {
  padding: 0 0 8px 42px;
}
.profile-card {
  display: grid;
  gap: 12px;
  max-width: 760px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.contract-card p {
  margin: 0;
  color: var(--muted);
}
.dealroom-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.dealroom-mode-toggle button {
  min-height: 42px;
  border: 1px solid rgba(205, 231, 238, 0.16);
  border-radius: 10px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(0,14,24,0.42));
  font: inherit;
  font-weight: 950;
}
.dealroom-mode-toggle button.active {
  border-color: rgba(128, 239, 170, 0.58);
  color: #062219;
  background: linear-gradient(135deg, #0df08c, #13cceb);
  box-shadow: 0 0 20px rgba(13, 240, 140, 0.18);
}
.contract-form-grid,
.contract-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.contract-form-grid label,
.contract-preview div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.contract-form-grid span,
.contract-preview span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}
.contract-form-grid input,
.contract-form-grid select {
  width: 100%;
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,14,24,0.7);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  padding: 9px;
}
.contract-preview b {
  display: block;
  margin-top: 3px;
  color: var(--teal-2);
}
.contract-preview div.contract-cost-highlight {
  border-color: rgba(240, 184, 58, 0.58);
  background: linear-gradient(135deg, rgba(240, 184, 58, 0.16), rgba(240, 184, 58, 0.045));
}
.contract-preview div.contract-cost-highlight span {
  color: #f3d58a;
}
.contract-preview div.contract-cost-highlight b {
  color: var(--gold);
}
.contract-preview div.contract-profit-highlight {
  border-color: rgba(128, 239, 170, 0.56);
  background: linear-gradient(135deg, rgba(13, 240, 140, 0.14), rgba(28, 198, 236, 0.055));
}
.contract-preview div.contract-profit-highlight span {
  color: #95f1bd;
}
.contract-preview div.contract-profit-highlight b {
  color: var(--green);
}
.contract-preview div.contract-profit-highlight.negative {
  border-color: rgba(240, 184, 58, 0.58);
  background: linear-gradient(135deg, rgba(240, 184, 58, 0.16), rgba(239, 89, 89, 0.06));
}
.contract-preview div.contract-profit-highlight.negative span,
.contract-preview div.contract-profit-highlight.negative b {
  color: var(--gold);
}
.contract-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.contract-summary div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.028);
  text-align: center;
}
.contract-summary div.has-value {
  border-color: rgba(128, 239, 170, 0.35);
  background: rgba(19, 80, 54, 0.16);
}
.contract-summary span,
.contract-group-title small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}
.contract-summary b {
  display: block;
  margin-top: 2px;
  color: var(--green);
  font-size: 1.04rem;
}
.contract-group {
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(205, 231, 238, 0.12);
}
.contract-group-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
}
.contract-group-title span {
  font-weight: 950;
}
.contract-group-title small {
  grid-column: 1 / -1;
  line-height: 1.25;
}
.contract-group-title strong {
  color: var(--green);
}
.contract-list {
  display: grid;
  gap: 8px;
}
.contract-row {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}
.contract-row-incoming {
  border-color: rgba(240, 184, 58, 0.46);
  background: rgba(240, 184, 58, 0.07);
}
.contract-row-incoming .contract-row-head > b {
  color: var(--gold);
}
.contract-row-active {
  border-color: rgba(128, 239, 170, 0.28);
}
.contract-row-closed {
  opacity: 0.78;
}
.contract-row-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.contract-row-head img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}
.contract-row-head strong,
.contract-row-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-row-head small {
  color: var(--muted);
}
.contract-route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.contract-route div {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(205, 231, 238, 0.14);
  border-radius: 8px;
  background: rgba(0, 14, 24, 0.28);
}
.contract-route span,
.contract-route b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-route span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}
.contract-route b {
  color: var(--teal-2);
  font-size: 0.86rem;
}
.contract-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}
.contract-flow-party {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(205, 231, 238, 0.14);
  border-radius: 8px;
  background: rgba(0, 14, 24, 0.28);
}
.contract-flow-party span,
.contract-flow-party b,
.contract-flow-party small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-flow-party span,
.contract-flow-party small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}
.contract-flow-party b {
  margin-top: 2px;
  color: var(--teal-2);
  font-size: 0.92rem;
}
.contract-flow-arrow {
  display: grid;
  place-items: center;
  min-width: 30px;
  color: var(--green);
  font-size: 1.15rem;
  font-weight: 950;
}
.contract-status-pill {
  max-width: 112px;
  padding: 5px 7px;
  border: 1px solid rgba(205, 231, 238, 0.16);
  border-radius: 8px;
  background: rgba(0, 14, 24, 0.42);
  color: var(--green);
  font-size: 0.76rem;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}
.contract-preview-compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.contract-preview-compact div {
  padding: 7px;
}
.contract-preview-compact b {
  font-size: 0.86rem;
  line-height: 1.18;
}
.contract-preview-clear .contract-main-value {
  border-color: rgba(128, 239, 170, 0.42);
  background: rgba(19, 80, 54, 0.16);
}
.contract-preview-clear .contract-main-value b {
  color: var(--green);
}
.contract-reminder {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgba(205, 231, 238, 0.14);
  border-radius: 8px;
  background: rgba(0, 14, 24, 0.28);
}
.contract-reminder strong {
  color: var(--muted);
  font-size: 0.8rem;
}
.contract-reminder span {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}
.contract-reminder.is-due {
  border-color: rgba(128, 239, 170, 0.48);
  background: rgba(19, 80, 54, 0.18);
  box-shadow: inset 3px 0 0 rgba(0, 255, 122, 0.72);
}
.contract-reminder.is-due strong {
  color: var(--green);
}
.contract-info-line {
  border-color: rgba(70, 190, 210, 0.24);
  background: rgba(70, 190, 210, 0.06);
}
.contract-info-line strong {
  color: var(--teal-2);
}
.contract-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}
.contracts-hub {
  display: grid;
  gap: 10px;
  width: min(1180px, 100%);
  margin: 0 auto;
}
.contracts-hub > .contract-card,
.contracts-hub > #contractOfferHost,
.contracts-hub > #contractOfferHost > .contract-card {
  width: 100%;
  max-width: none;
}
.contract-search-input {
  width: 100%;
  min-height: 48px;
  margin: 4px 0 9px;
  padding: 0 12px;
  border: 1px solid rgba(205, 231, 238, 0.18);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(5, 15, 22, 0.82);
  font: inherit;
  font-weight: 800;
  outline: 0;
}
.contract-search-input:focus {
  border-color: rgba(29, 217, 216, 0.62);
  box-shadow: 0 0 0 2px rgba(29, 217, 216, 0.12);
}
.contract-player-list {
  display: grid;
  gap: 7px;
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}
.contract-player-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.03);
  text-align: left;
  font: inherit;
}
.contract-player-row.active {
  border-color: rgba(29, 217, 216, 0.56);
  background: linear-gradient(180deg, rgba(22, 66, 74, 0.66), rgba(8, 27, 36, 0.76));
}
.contract-player-row img {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  object-fit: cover;
}
.contract-player-row span {
  min-width: 0;
}
.contract-player-row strong,
.contract-player-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contract-player-row small {
  color: var(--muted);
  font-size: 0.82rem;
}
.contract-player-row b {
  color: var(--green);
  font-size: 0.82rem;
}
.contract-counter-panel {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(29, 217, 216, 0.34);
  border-radius: var(--radius);
  background: rgba(6, 24, 32, 0.72);
}
.contract-counter-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}
.contract-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: var(--text);
  font-weight: 900;
}
.contract-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}
.account-contract-toggle {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
@media (max-width: 540px) {
  .contract-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contract-preview-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contract-preview-clear .contract-main-value {
    grid-column: 1 / -1;
  }
  .contract-flow {
    grid-template-columns: 1fr;
  }
  .contract-flow-arrow {
    min-height: 16px;
    transform: rotate(90deg);
  }
  .contract-route {
    grid-template-columns: 1fr;
  }
  .contract-row-head {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .contract-status-pill {
    grid-column: 1 / -1;
    max-width: none;
    justify-self: stretch;
  }
}
.npc-mission-panel,
.leaderboard-card {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.npc-mission-panel {
  margin-top: 12px;
}
.mission-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}
.mission-mini-row span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.84rem;
}
.mission-mini-row b {
  color: var(--green);
  white-space: nowrap;
}
.city-contract-empty-note {
  margin: 0;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}
.empty-state.city-contract-empty-note {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
}
.npc-mission-list,
.leaderboard-list,
.leaderboard-layout {
  display: grid;
  gap: 6px;
}
.npc-mission-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(128px, auto) minmax(132px, auto);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}
.npc-mission-row.accepted {
  border-color: rgba(29, 217, 216, 0.42);
  background: rgba(29, 217, 216, 0.055);
}
.npc-mission-row img,
.leaderboard-row img {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  object-fit: cover;
}
.npc-mission-main,
.leaderboard-row span {
  min-width: 0;
}
.npc-mission-main strong,
.npc-mission-main span,
.leaderboard-row strong,
.leaderboard-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.npc-mission-main span,
.leaderboard-row small,
.npc-mission-reward span,
.npc-mission-meta span {
  color: var(--muted);
  font-size: 0.78rem;
}
.npc-mission-reward b,
.npc-mission-meta b {
  display: block;
  color: var(--green);
  font-size: 0.88rem;
  line-height: 1.2;
}
.npc-mission-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.npc-mission-meta div {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(205, 231, 238, 0.14);
  border-radius: 8px;
  background: rgba(0, 14, 24, 0.28);
}
.npc-mission-meta span,
.npc-mission-meta b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.npc-mission-meta .mission-cost-highlight {
  border-color: rgba(240, 184, 58, 0.5);
  background: rgba(240, 184, 58, 0.1);
}
.npc-mission-meta .mission-cost-highlight span,
.npc-mission-meta .mission-cost-highlight b {
  color: var(--gold);
}
.npc-mission-meta .mission-profit-highlight {
  border-color: rgba(128, 239, 170, 0.48);
  background: rgba(19, 80, 54, 0.16);
}
.npc-mission-meta .mission-profit-highlight span,
.npc-mission-meta .mission-profit-highlight b {
  color: var(--green);
}
.npc-mission-meta .mission-profit-highlight.negative {
  border-color: rgba(240, 184, 58, 0.5);
  background: rgba(240, 184, 58, 0.1);
}
.npc-mission-meta .mission-profit-highlight.negative span,
.npc-mission-meta .mission-profit-highlight.negative b {
  color: var(--gold);
}
.npc-mission-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.leaderboard-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.leaderboard-card {
  gap: 5px;
  padding: 8px;
}
.leaderboard-card .panel-title {
  gap: 6px;
}
.leaderboard-card .panel-title strong {
  font-size: 0.95rem;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 24px 28px minmax(0, 1fr) minmax(74px, auto);
  gap: 5px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 4px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255,255,255,0.03);
  text-align: left;
}
.leaderboard-row img {
  width: 28px;
  height: 28px;
}
.leaderboard-row > b {
  color: var(--gold);
  text-align: center;
  font-size: 0.74rem;
}
.leaderboard-row em {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
  font-size: 0.72rem;
  text-align: right;
  white-space: nowrap;
}
.leaderboard-row strong {
  font-size: 0.78rem;
}
.leaderboard-row small {
  font-size: 0.64rem;
}
.profile-card-required {
  border-color: rgba(0,255,98,0.45);
}
.profile-card p,
.profile-field small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.profile-field {
  display: grid;
  gap: 7px;
}
.profile-field > span {
  color: var(--muted);
  font-weight: 800;
}
.profile-name-notice {
  padding: 9px 10px;
  border: 1px solid rgba(240, 184, 58, 0.42);
  border-radius: var(--radius);
  color: var(--gold);
  background: rgba(240, 184, 58, 0.075);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.35;
}
.profile-field input,
.profile-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
}
.avatar-picker.single-avatar {
  grid-template-columns: 76px;
}
.avatar-picker button {
  min-height: 82px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
}
.avatar-picker button.active {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(0,255,98,0.18);
}
.avatar-picker button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.avatar-picker img,
.profile-preview img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.profile-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
}
.profile-preview strong,
.profile-preview small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-preview small {
  color: var(--muted);
  margin-top: 2px;
}
.public-profile-head {
  background: rgba(0,255,98,0.04);
}
.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.profile-reputation-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.profile-reputation-card div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(128, 239, 170, 0.38);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(0, 245, 140, 0.12), rgba(28, 198, 236, 0.045));
}
.profile-reputation-card span,
.profile-reputation-card small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}
.profile-reputation-card b {
  display: block;
  margin: 3px 0;
  color: var(--green);
  font-size: 1.08rem;
}
.link-button {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 900;
  text-align: left;
}
.link-button:hover {
  text-decoration: underline;
}
.market-players {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
}
.market-player-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  text-align: left;
}
.market-player-button.own-offer {
  grid-template-columns: 42px minmax(0, 1fr) minmax(96px, auto);
}
.market-player-button:hover {
  border-color: rgba(0,255,98,0.45);
}
.market-player-button img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.market-player-button strong,
.market-player-button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-player-button small {
  color: var(--muted);
}
@media (max-width: 480px) {
  .market-player-button.own-offer {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .market-player-button.own-offer .mini-button {
    grid-column: 1 / -1;
  }
}
@media (max-width: 1180px) {
  .app-shell { padding-top: 10px; padding-bottom: 92px; }
  .app-tabs { position: static; }
  .compact-grid, .quality-layout, .market-toolbar, .warehouse-insights, .dashboard-grid, .quality-panels, .admin-layout, .admin-manager-grid, .options-grid, .knowledge-layout, .knowledge-grid, .city-placeholder-grid, .admin-data-columns, .leaderboard-layout { grid-template-columns: 1fr; }
  .cashflow-layout { grid-template-columns: 1fr; }
  .cashflow-donut { width: min(176px, 72vw); }
  .cashflow-cockpit-stage {
    grid-template-columns: minmax(96px, 1fr) minmax(112px, 0.76fr) minmax(96px, 1fr);
    grid-template-rows: minmax(142px, auto) minmax(172px, auto);
    min-height: clamp(430px, 108vw, 486px);
    padding: 15px 10px 14px;
    gap: 16px 8px;
  }
  .cashflow-flow-panel {
    min-height: 124px;
    padding: 11px 8px;
  }
  .cashflow-flow-panel em,
  .cashflow-value em {
    width: 38px;
    height: 38px;
  }
  .cashflow-flow-panel em svg,
  .cashflow-value em svg {
    width: 22px;
    height: 22px;
  }
  .cashflow-flow-panel b {
    font-size: clamp(0.78rem, 2.7vw, 0.94rem);
  }
  .cashflow-balance-core {
    width: min(124px, 100%);
    margin-top: 22px;
    padding: 10px 8px;
  }
  .cashflow-vein-map {
    inset: 104px 8px 34px;
  }
  .cashflow-reactor-map {
    inset: 82px 10px 126px;
  }
  .cashflow-cockpit-stage {
    grid-template-columns: minmax(96px, 1fr) minmax(124px, 0.86fr) minmax(96px, 1fr);
    grid-template-rows: minmax(126px, auto) minmax(112px, auto) minmax(104px, auto);
    min-height: clamp(500px, 126vw, 580px);
  }
  .cashflow-balance-core {
    width: 100%;
  }
  .cashflow-flow-list {
    gap: 6px;
  }
  .cashflow-cockpit-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .npc-mission-row { grid-template-columns: 42px minmax(0, 1fr); }
  .npc-mission-reward, .npc-mission-meta, .npc-mission-actions { grid-column: 1 / -1; }
  .npc-mission-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaderboard-row { grid-template-columns: 24px 28px minmax(0, 1fr) minmax(68px, auto); }
  .leaderboard-row img { width: 28px; height: 28px; }
  .leaderboard-row em { grid-column: auto; text-align: right; }
  .casino-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .casino-stats div { min-height: 58px; padding: 7px 8px; }
  .casino-stats span { font-size: 0.7rem; }
  .casino-stats b { font-size: 0.86rem; line-height: 1.16; }
  .casino-hall-of-fame { grid-template-columns: 1fr; gap: 7px; }
  .casino-jackpot-winner, .casino-top-wins { padding: 9px; }
  .casino-ranking-row { grid-template-columns: 22px minmax(0, 1fr) auto; padding: 6px; }
  .casino-ranking-row > i { width: 22px; height: 22px; }
  .casino-ranking-row > b { font-size: 0.76rem; }
}
@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr; padding: 48px 7px 7px; }
  .app-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 5px 7px 6px;
  }
  .tab-button {
    flex: none;
    min-width: 0;
    min-height: 34px;
    padding: 5px 4px;
    border-radius: 8px;
    font-size: clamp(0.72rem, 2.6vw, 0.86rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .compact-tabs .tab-button {
    min-height: 44px;
    font-size: clamp(0.68rem, 2.35vw, 0.8rem);
  }
  .tab-icon {
    font-size: 1.02rem;
  }
  .hub-grid,
  .hub-grid.compact-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-action-row {
    grid-template-columns: 1fr;
  }
  .dashboard-copy {
    min-height: 560px;
    padding: 16px;
  }
  .dashboard-copy > strong { font-size: 1.8rem; }
  .dashboard-hero { min-height: 560px; }
  .dashboard-copy .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hq-value-card {
    min-height: 86px;
    padding: 9px;
  }
  .hq-asset-legend {
    grid-template-columns: 1fr;
  }
  .warehouse-summary { grid-template-columns: 1fr 1fr; }
  .quality-stats, .quality-bonus-grid, .admin-summary { grid-template-columns: 1fr; }
  .profile-stat-grid,
  .profile-reputation-card,
  .stock-market-summary { grid-template-columns: 1fr 1fr; }
  .knowledge-flow { grid-template-columns: 1fr; }
  .comparison-table { min-width: 660px; font-size: 0.76rem; }
  .comparison-table th,
  .comparison-table td { padding: 6px 6px; }
  .comparison-building { grid-template-columns: 26px minmax(0, 1fr); gap: 0 5px; }
  .comparison-building img { width: 26px; height: 26px; }
  .knowledge-list,
  .knowledge-list.resources { grid-template-columns: 1fr; }
  .knowledge-item { grid-template-columns: 38px minmax(0, 1fr); padding: 8px; }
  .knowledge-item img { width: 38px; height: 38px; }
  .admin-filter-tabs,
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moderation-actions { grid-template-columns: 1fr; }
  .player-admin-details { grid-template-columns: 1fr; }
  .casino-machine { grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: 5px; overflow-x: auto; }
  .casino-reel { --casino-symbol-size: 42px; --casino-symbol-gap: 8px; grid-template-rows: 58px 16px; height: 92px; min-height: 0; padding: 8px 4px; }
  .casino-reel.spinning { padding: 8px 4px; }
  .casino-strip { height: 58px; }
  .casino-controls { grid-template-columns: 52px minmax(70px, 1fr) 52px; }
  .casino-controls .action-button { grid-column: 1 / -1; }
  .stock-news-list { grid-template-columns: 1fr; }
  .stock-lot-row,
  .stock-trade-row { grid-template-columns: 1fr; gap: 3px; }
  .stock-lot-row em,
  .stock-trade-row em { justify-self: start; }
  .loan-create-grid,
  .loan-columns,
  .loan-accept-line { grid-template-columns: 1fr; }
  .loan-card { padding: 11px; }
  .loan-card-head { grid-template-columns: 38px minmax(0, 1fr); }
  .loan-avatar { width: 38px; height: 38px; border-radius: 11px; }
  .loan-rate {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    margin-top: -3px;
  }
  .loan-meta-grid { grid-template-columns: 1fr; }
  .loan-action-line { grid-template-columns: 1fr; }
}

.admin-section-tabs { margin: 10px 0; }
.admin-newsletter-panel { display: grid; gap: 10px; }
.newsletter-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.newsletter-field, .newsletter-form-grid label { display: grid; gap: 5px; color: var(--muted); font-weight: 800; }
.newsletter-field input, .newsletter-field textarea, .newsletter-form-grid input, .newsletter-form-grid select {
  width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.05); color: var(--text); padding: 9px; font: inherit;
}
.newsletter-field textarea { resize: vertical; line-height: 1.35; }
.newsletter-preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: rgba(255,255,255,0.035); }
.newsletter-preview-body { color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.newsletter-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.newsletter-history { display: grid; gap: 7px; }
.newsletter-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; background: rgba(255,255,255,0.035); }
.newsletter-history-row span, .newsletter-history-row strong, .newsletter-history-row small { display: block; min-width: 0; }
.newsletter-history-row small { color: var(--muted); }
@media (max-width: 720px) { .newsletter-form-grid, .newsletter-actions { grid-template-columns: 1fr; } }
.admin-manager-card .newsletter-actions {
  gap: 12px;
  margin: 12px 0;
}
.admin-manager-card .newsletter-actions button {
  min-height: 56px;
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 950;
}
@media (max-width: 720px) {
  .admin-manager-card .newsletter-actions {
    gap: 10px;
  }
  .admin-manager-card .newsletter-actions button {
    min-height: 58px;
    font-size: 1.02rem;
  }
}
.admin-manager-card > .newsletter-actions button[data-admin-section] {
  border: 1px solid rgba(116, 226, 161, 0.42);
  background: linear-gradient(180deg, rgba(28, 82, 96, 0.98), rgba(9, 30, 42, 0.98));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.22);
}
.admin-manager-card > .newsletter-actions button[data-admin-section].primary,
.admin-manager-card > .newsletter-actions button[data-admin-section]:hover {
  border-color: rgba(0, 255, 98, 0.72);
  background: linear-gradient(135deg, var(--teal), var(--blue-2));
  color: #061018;
}

/* Build 459: final cashflow reactor format guard. Keep this after mobile rules. */
.cashflow-card,
.cashflow-layout,
.cashflow-cockpit {
  max-width: 100%;
  overflow: hidden;
}
.cashflow-cockpit-stage {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) clamp(112px, 32vw, 170px) minmax(0, 1fr);
  grid-template-rows: minmax(164px, auto) minmax(118px, auto) minmax(108px, auto);
  gap: 10px;
  padding: 14px 10px;
}
.cashflow-flow-panel.income {
  grid-column: 1;
  grid-row: 1;
  justify-self: stretch;
}
.cashflow-flow-panel.expense {
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
}
.cashflow-reactor-core {
  grid-column: 2;
  grid-row: 1;
  min-height: 164px;
}
.cashflow-reactor-core img {
  width: clamp(148px, 38vw, 210px);
  max-width: 122%;
}
.cashflow-reactor-core::before,
.cashflow-reactor-core::after {
  width: min(84px, 18vw);
}
.cashflow-reactor-core::before {
  right: 68%;
}
.cashflow-reactor-core::after {
  left: 68%;
}
.cashflow-flow-list.income {
  grid-column: 1;
  grid-row: 2 / span 2;
}
.cashflow-flow-list.expense {
  grid-column: 3;
  grid-row: 2 / span 2;
}
.cashflow-balance-core {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.cashflow-bookings-card {
  grid-column: 2;
  grid-row: 3;
}
@media (max-width: 480px) {
  .cashflow-cockpit-stage {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 128px) minmax(0, 1fr);
    grid-template-rows: minmax(152px, auto) minmax(114px, auto) minmax(104px, auto);
    min-height: clamp(540px, 126vw, 600px);
    gap: 8px 6px;
    padding: 12px 8px;
  }
  .cashflow-flow-panel {
    min-height: 124px;
    padding: 10px 7px;
    border-radius: 14px;
  }
  .cashflow-flow-panel em {
    width: 42px;
    height: 42px;
  }
  .cashflow-flow-panel span {
    font-size: clamp(0.86rem, 3.9vw, 1rem);
    line-height: 1.08;
  }
  .cashflow-flow-panel b {
    font-size: clamp(0.74rem, 3.2vw, 0.9rem);
  }
  .cashflow-reactor-core {
    min-height: 152px;
  }
  .cashflow-reactor-core img {
    width: clamp(132px, 37vw, 156px);
    max-width: 116%;
  }
  .cashflow-reactor-core::before,
  .cashflow-reactor-core::after {
    top: 56%;
    width: min(58px, 15vw);
    height: 7px;
  }
  .cashflow-reactor-core::before {
    right: 64%;
  }
  .cashflow-reactor-core::after {
    left: 64%;
  }
  .cashflow-flow-list {
    padding: 8px;
    border-radius: 13px;
  }
  .cashflow-flow-list div {
    min-width: 0;
  }
  .cashflow-flow-list span,
  .cashflow-flow-list b {
    font-size: clamp(0.7rem, 3.25vw, 0.82rem);
    white-space: nowrap;
  }
  .cashflow-balance-core {
    min-height: 108px;
    padding: 10px 7px;
  }
  .cashflow-balance-core strong {
    font-size: clamp(0.84rem, 3.2vw, 1rem);
  }
  .cashflow-balance-core small {
    font-size: clamp(0.62rem, 2.7vw, 0.72rem);
  }
  .cashflow-bookings-card {
    min-height: 104px;
  }
}
@media (orientation: landscape) and (min-width: 721px) {
  .cashflow-cockpit-stage {
    width: min(100%, 920px);
    grid-template-columns: minmax(180px, 1fr) minmax(190px, 230px) minmax(180px, 1fr);
    grid-template-rows: minmax(180px, auto) minmax(112px, auto);
    min-height: clamp(400px, 50vw, 500px);
    margin-inline: auto;
  }
  .cashflow-reactor-core img {
    width: clamp(230px, 25vw, 300px);
    max-width: 126%;
  }
}

/* Build 460: cashflow category comparison under balance, no bookings block. */
.cashflow-icon-asset {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.cashflow-flow-panel em:has(.cashflow-icon-asset),
.cashflow-value em:has(.cashflow-icon-asset) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.cashflow-flow-panel span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.08;
}
.cashflow-cockpit-stage {
  grid-template-columns: minmax(0, 1fr) clamp(112px, 32vw, 170px) minmax(0, 1fr);
  grid-template-rows: minmax(164px, auto) minmax(112px, auto) auto;
  min-height: clamp(500px, 116vw, 590px);
}
.cashflow-balance-core {
  grid-column: 2;
  grid-row: 2;
}
.cashflow-pair-list {
  position: relative;
  z-index: 4;
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(165, 221, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(84,255,190,0.07), transparent 44% 56%, rgba(255,101,120,0.07)),
    rgba(3, 15, 24, 0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}
.cashflow-pair-row {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) minmax(78px, 0.85fr) 1px minmax(78px, 0.85fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 12px;
  background: rgba(4, 15, 25, 0.58);
}
.cashflow-pair-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: clamp(0.76rem, 3vw, 0.88rem);
  font-weight: 850;
}
.cashflow-pair-row > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.74rem, 3vw, 0.88rem);
  font-weight: 950;
}
.cashflow-pair-row > b.income {
  color: var(--teal-2);
  text-align: right;
}
.cashflow-pair-row > b.expense {
  color: #ff8b8b;
  text-align: left;
}
.cashflow-pair-row > i {
  width: 1px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.32), transparent);
}
@media (max-width: 480px) {
  .cashflow-cockpit-stage {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 128px) minmax(0, 1fr);
    grid-template-rows: minmax(152px, auto) minmax(108px, auto) auto;
    min-height: clamp(500px, 116vw, 570px);
  }
  .cashflow-flow-panel em:has(.cashflow-icon-asset),
  .cashflow-value em:has(.cashflow-icon-asset) {
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
  }
  .cashflow-pair-list {
    padding: 8px;
    gap: 6px;
    border-radius: 14px;
  }
  .cashflow-pair-row {
    grid-template-columns: minmax(64px, 0.95fr) minmax(70px, 0.9fr) 1px minmax(70px, 0.9fr);
    gap: 5px;
    padding: 7px 7px;
  }
  .cashflow-pair-row > span {
    font-size: clamp(0.68rem, 3.1vw, 0.78rem);
  }
  .cashflow-pair-row > b {
    font-size: clamp(0.66rem, 3vw, 0.78rem);
  }
}
@media (orientation: landscape) and (min-width: 721px) {
  .cashflow-cockpit-stage {
    grid-template-rows: minmax(178px, auto) minmax(108px, auto) auto;
  }
  .cashflow-pair-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Build 462: HQ icon assets and wealth reactor beam. */
.hq-value-card i {
  width: 46px;
  height: 46px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hq-value-card i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(91,255,219,0.16));
}
.hq-value-card {
  overflow: hidden;
}
.hq-value-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0 42%, rgba(91,255,219,0.08) 48%, transparent 55%);
  transform: translateX(-120%);
  animation: hqCardLightSweep 5.4s ease-in-out infinite;
}
.hq-asset-bar {
  position: relative;
  height: 16px;
  border: 1px solid rgba(91,255,219,0.18);
  background:
    linear-gradient(90deg, rgba(91,255,219,0.08), rgba(255,255,255,0.05), rgba(255,111,128,0.08)),
    rgba(2, 12, 20, 0.78);
  box-shadow:
    inset 0 0 12px rgba(91,255,219,0.14),
    0 0 16px rgba(91,255,219,0.10);
}
.hq-asset-bar::before,
.hq-asset-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.hq-asset-bar::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,0.18) 16px, transparent 18px),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
  mix-blend-mode: screen;
  opacity: 0.44;
  animation: hqWealthBeamScan 2.8s linear infinite;
}
.hq-asset-bar::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 16px rgba(91,255,219,0.22);
  animation: hqWealthBeamPulse 2.2s ease-in-out infinite;
}
.hq-asset-bar i {
  position: relative;
  box-shadow: inset 0 0 12px rgba(255,255,255,0.16);
}
.asset-cash { background: linear-gradient(90deg, #79ffb5, #13df8f); }
.asset-storage { background: linear-gradient(90deg, #64d7ff, #236dff); }
.asset-market { background: linear-gradient(90deg, #ffc44c, #ff8844); }
.asset-stocks { background: linear-gradient(90deg, #c7a6ff, #735dff); }
.asset-production { background: linear-gradient(90deg, #25fff0, #06a9d8); }
@keyframes hqCardLightSweep {
  0%, 58%, 100% { transform: translateX(-120%); opacity: 0; }
  68% { opacity: 1; }
  82% { transform: translateX(120%); opacity: 0; }
}
@keyframes hqWealthBeamScan {
  0% { transform: translateX(-34%); }
  100% { transform: translateX(34%); }
}
@keyframes hqWealthBeamPulse {
  0%, 100% { opacity: 0.54; }
  50% { opacity: 1; }
}

/* Build 465: wealth bar HUD reactor rail. */
.hq-asset-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 3px;
  overflow: hidden;
  height: 22px;
  padding: 4px;
  margin: 12px 0 13px;
  border: 1px solid rgba(66, 222, 231, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015)),
    radial-gradient(circle at 50% 50%, rgba(38, 255, 225, 0.16), transparent 0 58%),
    rgba(2, 12, 20, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -10px 18px rgba(0,0,0,0.28),
    0 0 18px rgba(0, 210, 220, 0.14);
}
.hq-asset-bar i {
  position: relative;
  min-width: max(3%, 8px);
  height: auto;
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -8px 12px rgba(0,0,0,0.22),
    0 0 10px currentColor;
}
.hq-asset-bar i::before,
.hq-asset-bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.hq-asset-bar i::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36), transparent 34% 66%, rgba(0,0,0,0.20)),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,0.20) 13px, transparent 15px);
  opacity: 0.48;
}
.hq-asset-bar i::after {
  background: linear-gradient(90deg, transparent 0 26%, rgba(255,255,255,0.75) 48%, transparent 70%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: hqWealthSegmentSweep 3.4s ease-in-out infinite;
}
.hq-asset-bar::before {
  z-index: 3;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(91,255,219,0.42) 35%, rgba(255,255,255,0.58) 50%, rgba(0,200,250,0.35) 66%, transparent 82%);
  mix-blend-mode: screen;
  opacity: 0.42;
  transform: translateX(-115%);
  animation: hqWealthRailScan 2.9s linear infinite;
}
.hq-asset-bar::after {
  z-index: 4;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 14px rgba(91,255,219,0.22),
    0 0 12px rgba(0,200,250,0.12);
  animation: hqWealthRailPulse 2.4s ease-in-out infinite;
}
.asset-cash {
  color: rgba(83,255,177,0.72);
  background: linear-gradient(90deg, #34f89a, #06c984);
}
.asset-storage {
  color: rgba(91,178,255,0.72);
  background: linear-gradient(90deg, #48cbff, #1b72ff);
}
.asset-market {
  color: rgba(255,172,68,0.74);
  background: linear-gradient(90deg, #ffc04d, #ff7e34);
}
.asset-stocks {
  color: rgba(172,132,255,0.78);
  background: linear-gradient(90deg, #b996ff, #7054ff);
}
.asset-production {
  color: rgba(36,242,235,0.78);
  background: linear-gradient(90deg, #22fff1, #05a4d3);
}
@keyframes hqWealthSegmentSweep {
  0%, 58%, 100% { transform: translateX(-120%); opacity: 0; }
  70% { opacity: 0.95; }
  88% { transform: translateX(120%); opacity: 0; }
}
@keyframes hqWealthRailScan {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(115%); }
}
@keyframes hqWealthRailPulse {
  0%, 100% { opacity: 0.66; }
  50% { opacity: 1; }
}

/* Build 466: cashflow income/expense amounts without currency prefix need room for larger values. */
.cashflow-flow-panel b,
.cashflow-pair-row > b,
.cashflow-value.income b,
.cashflow-value.expense b {
  min-width: 0;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.cashflow-flow-panel b {
  font-size: clamp(0.72rem, 2.9vw, 0.94rem);
  overflow: visible;
  text-overflow: clip;
}
.cashflow-pair-row {
  grid-template-columns: minmax(68px, 0.9fr) minmax(88px, 1.1fr) 1px minmax(88px, 1.1fr);
}
.cashflow-pair-row > b {
  font-size: clamp(0.7rem, 2.85vw, 0.84rem);
  overflow: visible;
  text-overflow: clip;
}
.cashflow-value.income b,
.cashflow-value.expense b {
  font-size: clamp(0.86rem, 3.5vw, 1.08rem);
  overflow: visible;
  text-overflow: clip;
}
@media (max-width: 480px) {
  .cashflow-pair-row {
    grid-template-columns: minmax(56px, 0.8fr) minmax(86px, 1.12fr) 1px minmax(86px, 1.12fr);
    gap: 4px;
  }
  .cashflow-pair-row > span {
    font-size: clamp(0.62rem, 2.9vw, 0.74rem);
  }
  .cashflow-pair-row > b {
    font-size: clamp(0.62rem, 2.85vw, 0.76rem);
  }
}

/* Build 468: desktop/laptop uses the same mobile-first app structure in a centered frame. */
@media (min-width: 900px) {
  :root {
    --desktop-app-width: 720px;
  }
  html {
    background: #061018;
  }
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(0, 200, 250, 0.18), transparent 0 34%, transparent 35%),
      linear-gradient(90deg, #061018 0%, #0c1d27 26%, #102433 50%, #0c1d27 74%, #061018 100%);
  }
  .app-shell {
    width: min(100%, var(--desktop-app-width));
    max-width: var(--desktop-app-width);
    margin: 0 auto;
    padding-right: 12px;
    padding-left: 12px;
    border-right: 1px solid rgba(116, 226, 161, 0.20);
    border-left: 1px solid rgba(116, 226, 161, 0.20);
    background:
      linear-gradient(180deg, rgba(16, 36, 51, 0.96), rgba(7, 19, 27, 0.98)),
      var(--page);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.035),
      0 0 54px rgba(0, 200, 250, 0.10),
      0 28px 80px rgba(0, 0, 0, 0.42);
  }
  .brand {
    right: auto;
    left: 50%;
    width: min(100%, var(--desktop-app-width));
    transform: translateX(-50%);
    border-right: 1px solid rgba(116, 226, 161, 0.20);
    border-left: 1px solid rgba(116, 226, 161, 0.20);
  }
  .bottom-nav {
    right: auto;
    left: 50%;
    width: min(100%, var(--desktop-app-width));
    transform: translateX(-50%);
    border-right: 1px solid rgba(116, 226, 161, 0.20);
    border-left: 1px solid rgba(116, 226, 161, 0.20);
  }
  main {
    max-width: 100%;
  }
  .topbar {
    grid-template-columns: 1fr;
    padding-right: 0;
    padding-left: 0;
    background: transparent;
    border-bottom-color: rgba(214, 238, 245, 0.18);
    box-shadow: none;
  }
  .top-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hero-grid,
  .dashboard-grid,
  .compact-grid,
  .quality-layout,
  .cashflow-layout,
  .admin-layout,
  .knowledge-layout,
  .leaderboard-layout,
  .city-placeholder-grid,
  .admin-data-columns,
  .admin-manager-grid,
  .warehouse-insights,
  .quality-panels,
  .options-grid {
    grid-template-columns: 1fr;
  }
  .metrics-grid,
  .hq-value-grid,
  .cashflow-cockpit-values,
  .quality-resource-grid,
  .building-stat-grid,
  .market-detail-grid .plan-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .building-map,
  .market-grid,
  .warehouse-list.large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market-toolbar,
  .stock-order-main,
  .video-bonus-card,
  .daily-bonus-card,
  .premium-card,
  .loan-card,
  .contract-card {
    grid-template-columns: 1fr;
  }
  .cashflow-cockpit,
  .cashflow-cockpit-stage {
    width: 100%;
  }
}

@media (min-width: 1280px) {
  :root {
    --desktop-app-width: 760px;
  }
}

/* Build 471: centered content inside game cards/blocks. */
.metric,
.metric-link,
.hq-value-card,
.cashflow-flow-panel,
.cashflow-balance-core,
.cashflow-value,
.stock-market-summary div,
.stock-market-summary-modern div,
.stock-broker-owned div,
.stock-order-preview,
.dashboard-check,
.bottom-nav-button {
  text-align: center;
  justify-items: center;
  align-items: center;
}

.metric,
.metric-link,
.hq-value-card,
.cashflow-flow-panel,
.cashflow-balance-core,
.cashflow-value,
.dashboard-check,
.bottom-nav-button {
  justify-content: center;
}

.metric span,
.metric b,
.hq-value-card span,
.hq-value-card b,
.cashflow-flow-panel span,
.cashflow-flow-panel b,
.cashflow-balance-core > span,
.cashflow-balance-core strong,
.cashflow-balance-core small,
.cashflow-value span,
.cashflow-value b,
.stock-market-summary span,
.stock-market-summary b,
.stock-market-summary small,
.stock-broker-owned span,
.stock-broker-owned b,
.stock-broker-owned small,
.dashboard-check span,
.dashboard-check b,
.bottom-nav-button span {
  text-align: center;
}

.hq-value-card i,
.cashflow-flow-panel em,
.cashflow-value em {
  margin-right: auto;
  margin-left: auto;
}

.stock-watch-card {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.stock-watch-card img {
  grid-row: auto;
  margin-right: auto;
  margin-left: auto;
}

.stock-watch-card span,
.stock-watch-card b,
.stock-watch-card small {
  text-align: center;
}

.stock-order-preview div {
  display: grid;
  justify-items: center;
  text-align: center;
}

.stock-order-preview b {
  text-align: center;
}

/* Build 473: Luxury Black Gold / Dark Corporate icon set for HQ and bottom menu. */
.bottom-nav-icon {
  display: grid;
  width: 30px;
  height: 30px;
  margin: 0 auto 2px;
  place-items: center;
}

.bottom-nav-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55));
}

.bottom-nav-button.active .bottom-nav-icon img {
  filter: drop-shadow(0 0 9px rgba(126, 225, 255, 0.46)) drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55));
}

.hq-value-card {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  isolation: isolate;
}

.hq-value-card i {
  position: absolute;
  inset: 4px;
  z-index: 0;
  display: grid;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.23;
  pointer-events: none;
}

.hq-value-card i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  filter: saturate(1.02) contrast(1.08);
}

.hq-value-card span,
.hq-value-card b {
  position: relative;
  z-index: 1;
  max-width: 94%;
  justify-self: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82), 0 0 16px rgba(0, 6, 10, 0.86);
}

/* Build 474: keep large HQ background icons fully visible inside each block. */
.hq-value-card i {
  inset: 14px 28px;
  opacity: 0.21;
}

.hq-value-card i img {
  width: min(78%, 220px);
  height: min(78%, 132px);
  object-fit: contain;
}

@media (max-width: 520px) {
  .hq-value-card i {
    inset: 12px 18px;
  }

  .hq-value-card i img {
    width: min(76%, 170px);
    height: min(76%, 118px);
  }
}

/* Build 508: compact stock exchange terminal */
.stock-terminal {
  --stock-up: #18e69a;
  --stock-down: #ff667d;
  --stock-gold: #efbd4e;
  --stock-line: rgba(137, 190, 207, 0.2);
  display: grid;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  border-color: rgba(83, 177, 183, 0.42);
  background: #0b2631;
}

.stock-terminal-header,
.stock-terminal-subhead,
.stock-chart-toolbar,
.stock-order-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stock-terminal-brand {
  display: grid;
  gap: 1px;
}

.stock-terminal-brand span,
.stock-terminal-brand small,
.stock-terminal-subhead,
.stock-chart-toolbar span,
.stock-chart-toolbar small,
.stock-signal-grid span,
.stock-signal-grid small,
.stock-position-grid span,
.stock-position-grid small,
.stock-order-heading span {
  color: #a9c0c9;
}

.stock-terminal-brand strong {
  font-size: 21px;
  line-height: 1.1;
}

.stock-terminal-brand small {
  font-size: 12px;
}

.stock-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--stock-up);
  font-size: 12px;
  font-weight: 900;
}

.stock-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(24, 230, 154, 0.1);
  animation: stock-live-pulse 1.8s ease-in-out infinite;
}

.stock-pulse-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--stock-line);
  border-radius: 8px;
  background: #071d26;
}

.stock-mood-gauge {
  display: grid;
  min-height: 126px;
  place-items: center;
  position: relative;
}

.stock-mood-gauge::before {
  width: 142px;
  height: 71px;
  position: absolute;
  top: 13px;
  content: "";
  border-radius: 142px 142px 0 0;
  background:
    radial-gradient(circle at 50% 100%, #071d26 0 46%, transparent 47%),
    conic-gradient(from 270deg at 50% 100%, #ff667d 0 24%, #efbd4e 24% 50%, #18e69a 50% 75%, transparent 75%);
  opacity: 0.92;
}

.stock-mood-gauge::after {
  width: 58px;
  height: 3px;
  position: absolute;
  top: 81px;
  left: 50%;
  content: "";
  border-radius: 4px;
  background: #eef7f8;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  transform: translateX(-2px) rotate(calc(-90deg + (var(--mood) * 1.8deg)));
  transform-origin: 2px 50%;
  transition: transform 420ms ease;
}

.stock-mood-gauge > div {
  display: grid;
  align-self: end;
  z-index: 1;
  gap: 2px;
  text-align: center;
}

.stock-mood-gauge span,
.stock-mood-gauge small {
  color: #9db5bf;
  font-size: 11px;
}

.stock-mood-gauge b {
  color: var(--stock-gold);
  font-size: 17px;
}

.stock-mood-gauge.panic b,
.stock-mood-gauge.weak b {
  color: var(--stock-down);
}

.stock-mood-gauge.strong b,
.stock-mood-gauge.euphoric b {
  color: var(--stock-up);
}

.stock-pulse-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--stock-line);
  border-radius: 6px;
  background: var(--stock-line);
}

.stock-pulse-metrics > div {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
  padding: 10px;
  background: #0d2b36;
}

.stock-pulse-metrics span,
.stock-pulse-metrics small {
  overflow: hidden;
  color: #9fb6bf;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-pulse-metrics b {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-terminal .up {
  color: var(--stock-up);
}

.stock-terminal .down {
  color: var(--stock-down);
}

.stock-terminal-subhead {
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--stock-line);
  font-size: 12px;
}

.stock-terminal-subhead span {
  color: #eff8f8;
  font-size: 15px;
  font-weight: 900;
}

.stock-terminal-list {
  display: grid;
  gap: 4px;
}

.stock-terminal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #0d2b36;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.stock-terminal-row:hover,
.stock-terminal-row.active {
  border-color: rgba(24, 230, 154, 0.5);
  background: #123541;
}

.stock-terminal-row:active {
  transform: scale(0.995);
}

.stock-terminal-open {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(150px, 1.4fr) minmax(80px, 0.75fr) minmax(92px, 0.65fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.stock-terminal-company {
  display: grid;
  min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.stock-terminal-company img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.34));
}

.stock-terminal-company > span,
.stock-terminal-quote {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.stock-terminal-company strong,
.stock-terminal-company small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-terminal-company strong {
  color: #f1f8f8;
  font-size: 14px;
}

.stock-terminal-company small {
  color: #95adb7;
  font-size: 11px;
}

.stock-terminal-mini-chart svg {
  display: block;
  width: 100%;
  height: 32px;
}

.stock-terminal-quote {
  justify-items: end;
  text-align: right;
}

.stock-terminal-quote b {
  color: #f5fbfb;
  font-size: 15px;
}

.stock-terminal-row.up .stock-terminal-quote small {
  color: var(--stock-up);
}

.stock-terminal-row.down .stock-terminal-quote small {
  color: var(--stock-down);
}

.stock-row-watch,
.stock-watch-toggle {
  display: grid;
  place-items: center;
  border: 0;
  color: #708d98;
  background: transparent;
  font-size: 22px;
}

.stock-row-watch {
  border-left: 1px solid var(--stock-line);
}

.stock-row-watch.active,
.stock-watch-toggle.active {
  color: var(--stock-gold);
}

.stock-terminal-detail {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(24, 230, 154, 0.35);
  border-radius: 8px;
  background: #081f29;
  animation: stock-panel-enter 220ms ease-out both;
}

.stock-terminal-detail .stock-broker-head {
  grid-template-columns: 46px minmax(0, 1fr) auto 34px;
}

.stock-terminal-detail .stock-broker-price {
  display: block;
  grid-column: auto;
  text-align: right;
}

.stock-terminal-detail .stock-broker-icon {
  width: 46px;
  height: 46px;
}

.stock-terminal-chart {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--stock-line);
  border-radius: 7px;
  background: #061923;
}

.stock-chart-toolbar {
  padding: 9px 10px 4px;
}

.stock-chart-toolbar > div:first-child {
  display: grid;
  gap: 1px;
}

.stock-chart-toolbar b {
  font-size: 18px;
}

.stock-range-tabs,
.stock-order-tabs {
  display: grid;
  grid-auto-flow: column;
  gap: 3px;
}

.stock-range-tabs button,
.stock-order-tabs button {
  min-width: 46px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--stock-line);
  border-radius: 5px;
  color: #9eb5be;
  background: #0d2b36;
  font-weight: 800;
}

.stock-range-tabs button.active,
.stock-order-tabs button.active {
  border-color: var(--stock-up);
  color: #03251a;
  background: var(--stock-up);
}

.stock-order-tabs button.sell.active {
  border-color: var(--stock-down);
  color: #2d0810;
  background: var(--stock-down);
}

.stock-terminal-chart svg {
  display: block;
  width: 100%;
  height: clamp(180px, 33vw, 250px);
}

.stock-terminal-chart svg text {
  fill: #77939d;
  font-size: 11px;
}

.stock-terminal-chart .terminal-grid {
  fill: none;
  stroke: rgba(126, 168, 181, 0.16);
  stroke-width: 1;
}

.stock-terminal-chart .terminal-line {
  fill: none;
  stroke: var(--stock-up);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: stock-line-draw 520ms ease-out both;
}

.stock-terminal-chart.down .terminal-line {
  stroke: var(--stock-down);
}

.stock-terminal-chart .terminal-last {
  fill: #061923;
  stroke: var(--stock-up);
  stroke-width: 3;
}

.stock-terminal-chart.down .terminal-last {
  stroke: var(--stock-down);
}

.stock-chart-cursor {
  width: calc(100% - 76px);
  height: 20px;
  margin: -5px 38px 5px;
  accent-color: var(--stock-up);
}

.stock-signal-grid,
.stock-position-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.stock-signal-grid > div,
.stock-position-grid > div {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--stock-line);
  border-radius: 6px;
  background: #0d2b36;
}

.stock-signal-grid b,
.stock-position-grid b {
  overflow-wrap: anywhere;
  color: #eef7f8;
  font-size: 14px;
}

.stock-signal-grid > .up b {
  color: var(--stock-up);
}

.stock-signal-grid > .down b {
  color: var(--stock-down);
}

.stock-signal-grid > .warn b {
  color: var(--stock-gold);
}

.stock-risk-dots {
  display: flex;
  gap: 3px;
}

.stock-risk-dots i {
  width: 19px;
  height: 4px;
  border-radius: 2px;
  background: rgba(147, 177, 188, 0.18);
}

.stock-risk-dots i.active {
  background: currentColor;
}

.stock-position-grid b {
  display: grid;
  gap: 3px;
}

.stock-position-grid small {
  font-weight: 600;
}

.stock-terminal-order {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(239, 189, 78, 0.32);
  border-radius: 7px;
  background: #0b2631;
}

.stock-order-heading b {
  color: #eef7f8;
}

.stock-terminal-order .stock-order-main {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1.35fr);
  gap: 10px;
}

.stock-terminal-order .stock-order-preview {
  display: grid;
  gap: 1px;
  overflow: hidden;
  align-items: stretch;
  justify-items: stretch;
  border: 1px solid var(--stock-line);
  border-radius: 6px;
  background: var(--stock-line);
  text-align: left;
}

.stock-terminal-order .stock-order-preview[hidden] {
  display: none;
}

.stock-terminal-order .stock-order-preview > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  background: #0d2b36;
}

.stock-terminal-order .stock-order-preview span {
  color: #a8bdc5;
  font-size: 12px;
  text-align: left;
}

.stock-terminal-order .stock-order-preview b {
  color: #f0f8f8;
  text-align: right;
}

.stock-terminal-order .stock-order-preview .total b {
  color: var(--stock-up);
}

.stock-terminal-order .stock-order-preview .total.negative b {
  color: var(--stock-down);
}

.stock-sell-action {
  border-color: var(--stock-down);
  color: #fff;
  background: #a82f48;
}

.stock-terminal-empty {
  min-height: 96px;
}

@keyframes stock-live-pulse {
  50% {
    opacity: 0.45;
    transform: scale(0.75);
  }
}

@keyframes stock-panel-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes stock-line-draw {
  from {
    opacity: 0;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
  }
  to {
    opacity: 1;
    stroke-dasharray: 1600;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 700px) {
  .stock-terminal {
    padding: 8px;
  }

  .stock-pulse-panel {
    grid-template-columns: 1fr;
  }

  .stock-mood-gauge {
    min-height: 112px;
  }

  .stock-terminal-open {
    grid-template-columns: minmax(130px, 1.4fr) minmax(68px, 0.65fr) minmax(82px, 0.7fr);
    gap: 6px;
    padding: 8px;
  }

  .stock-signal-grid,
  .stock-position-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-terminal-order .stock-order-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .stock-terminal-brand strong {
    font-size: 18px;
  }

  .stock-pulse-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-terminal-open {
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  }

  .stock-terminal-mini-chart {
    display: none;
  }

  .stock-terminal-company {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .stock-terminal-company img {
    width: 32px;
    height: 32px;
  }

  .stock-terminal-detail .stock-broker-head {
    grid-template-columns: 40px minmax(0, 1fr) auto 30px;
    gap: 7px;
  }

  .stock-terminal-detail .stock-broker-price b {
    font-size: 14px;
  }

  .stock-chart-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .stock-range-tabs {
    width: 100%;
    grid-auto-flow: initial;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stock-range-tabs button {
    min-width: 0;
  }

  .stock-terminal-chart svg {
    height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-live-badge i,
  .stock-terminal-detail,
  .stock-terminal-chart .terminal-line {
    animation: none;
  }
}

/* Build 491: cleaner HQ metrics and cashflow ring overview. */
#cashValue:empty {
  display: none;
}

.dashboard-check i {
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
}

.dashboard-check i img {
  display: block;
  width: 38px;
  height: 38px;
  max-width: 38px;
  max-height: 38px;
  object-fit: contain;
}

.dashboard-copy .metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
}

.dashboard-metric-item {
  position: relative;
  min-width: 0;
}

.dashboard-metric-item .hq-value-card {
  width: 100%;
  height: 100%;
}

.dashboard-metric-controls {
  display: none;
  position: absolute;
  z-index: 6;
  right: 8px;
  bottom: 8px;
  grid-template-columns: repeat(2, 48px);
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(55, 226, 191, 0.48);
  border-radius: 11px;
  background: rgba(4, 22, 30, 0.94);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.3);
}

.metrics-grid.is-editing .dashboard-metric-item {
  outline: 1px dashed rgba(46, 230, 189, 0.58);
  outline-offset: 3px;
}

.metrics-grid.is-editing .dashboard-metric-controls {
  display: grid;
}

.dashboard-metric-controls button {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid #4f7482;
  border-radius: 9px;
  background: #102d39;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}

.dashboard-metric-controls button:disabled {
  opacity: 0.3;
}

.metrics-grid.is-editing .dashboard-metric-item {
  min-height: 178px;
}

.dashboard-metric-empty {
  min-width: 0;
  min-height: 1px;
  visibility: hidden;
}
.metrics-grid.is-editing .dashboard-metric-empty {
  min-height: 178px;
  visibility: visible;
  border: 1px dashed rgba(89, 232, 200, .2);
  border-radius: 13px;
  background: rgba(5, 24, 32, .22);
}

/* Build 616: keep metric name and value readable above the four-way controls. */
.metrics-grid.is-editing .dashboard-metric-item .hq-value-card {
  min-height: 178px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 13px 12px 118px;
  background:
    linear-gradient(180deg, rgba(4, 22, 30, .96) 0 37%, rgba(5, 24, 32, .84) 58%, rgba(3, 17, 24, .96) 100%),
    rgba(8, 31, 41, .96);
}
.metrics-grid.is-editing .dashboard-metric-item .hq-value-card i {
  display: none;
}
.metrics-grid.is-editing .dashboard-metric-item .hq-value-card span,
.metrics-grid.is-editing .dashboard-metric-item .hq-value-card b {
  position: relative;
  z-index: 7;
  width: 100%;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .78);
}
.metrics-grid.is-editing .dashboard-metric-item .hq-value-card span {
  color: #c7dce2;
  font-size: .72rem;
  font-weight: 850;
}
.metrics-grid.is-editing .dashboard-metric-item .hq-value-card b {
  margin-top: 5px;
  color: #fff;
  font-size: clamp(.9rem, 2.2vw, 1.12rem);
}
.metrics-grid.is-editing .dashboard-metric-controls {
  right: 8px;
  bottom: 8px;
  left: 8px;
  justify-content: end;
}

/* Build 615: compact premium wallet and distinct event-style gold packs. */
.premium-wallet-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(180px, 280px);
  align-items: center;
  gap: 14px;
  overflow: hidden;
  min-height: 116px;
  padding: 13px 15px;
  border: 1px solid rgba(244, 198, 74, 0.48);
  border-radius: 17px;
  background:
    radial-gradient(circle at 9% 28%, rgba(255, 208, 79, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(55, 38, 11, 0.82), rgba(8, 39, 43, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 32px rgba(0,0,0,0.2);
}
.premium-wallet-card > img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 12px 15px rgba(0,0,0,0.38));
}
.premium-wallet-card > span { display: grid; gap: 3px; }
.premium-wallet-card > span small { color: #f4cf6d; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.premium-wallet-card > span strong { color: #fff4c0; font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1; }
.premium-wallet-card > .action-button { margin: 0; }
.premium-wallet-card > small { grid-column: 3; color: var(--muted); font-size: .67rem; }

.premium-gold-pack-card {
  border-color: rgba(244, 197, 71, 0.56);
  background:
    radial-gradient(circle at 18% 22%, rgba(252, 205, 70, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(56, 38, 11, 0.86), rgba(7, 43, 44, 0.96));
}
.premium-gold-pack-hero {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 120px;
  margin: 2px -2px 0;
  padding: 8px 10px;
  border: 1px solid rgba(244, 197, 71, 0.3);
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(244, 190, 55, 0.12), rgba(15, 100, 88, 0.18));
}
.premium-gold-pack-hero img { width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 13px 18px rgba(0,0,0,.42)); }
.premium-gold-pack-hero span { display: grid; gap: 3px; }
.premium-gold-pack-hero small { color: #f4d16f; font-size: .7rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.premium-gold-pack-hero strong { color: #fff4ba; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1; text-shadow: 0 0 22px rgba(245, 196, 65, .22); }

.premium-purchase-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(173, 207, 216, .2);
  border-radius: 11px;
  background: rgba(5, 25, 34, .62);
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.35;
}
.premium-purchase-consent input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; }
.premium-purchase-consent a { color: #c7e9ed; }

@media (max-width: 620px) {
  .premium-wallet-card { grid-template-columns: 78px minmax(0, 1fr); }
  .premium-wallet-card > img { width: 78px; height: 78px; }
  .premium-wallet-card > .action-button,
  .premium-wallet-card > small { grid-column: 1 / -1; }
  .premium-gold-pack-hero { grid-template-columns: 88px minmax(0, 1fr); }
  .premium-gold-pack-hero img { width: 88px; height: 88px; }
}

.hq-trend-chip {
  display: none;
}

.cashflow-ring-overview .cashflow-cockpit-stage,
.cashflow-ring-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(138px, 30vw, 220px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(29, 232, 213, 0.12), transparent 0 34%, transparent 54%),
    linear-gradient(90deg, rgba(47,255,178,0.055), transparent 37% 63%, rgba(255,88,103,0.052)),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.13));
}

.cashflow-ring-overview .cashflow-reactor-map,
.cashflow-ring-overview .cashflow-reactor-core,
.cashflow-ring-overview .cashflow-icon-asset,
.cashflow-ring-overview .cashflow-flow-panel em,
.cashflow-ring-overview .cashflow-value em {
  display: none;
}

.cashflow-ring-overview .cashflow-flow-panel {
  min-height: clamp(94px, 19vw, 132px);
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 12px 10px;
  border-radius: 14px;
}

.cashflow-ring-overview .cashflow-flow-panel.income {
  grid-column: 1;
  grid-row: 1;
}

.cashflow-ring-overview .cashflow-flow-panel.expense {
  grid-column: 3;
  grid-row: 1;
}

.cashflow-main-ring {
  grid-column: 2;
  grid-row: 1;
  width: clamp(138px, 30vw, 220px);
  max-width: 100%;
  align-self: center;
  background:
    radial-gradient(circle, rgba(5, 18, 28, 0.98) 0 47%, transparent 48%),
    conic-gradient(from -90deg, rgba(89,255,190,0.95) 0 var(--income-deg), rgba(255,112,126,0.92) var(--income-deg) 360deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 0 12px rgba(0,0,0,0.10),
    0 18px 34px rgba(0,0,0,0.30),
    0 0 28px rgba(29,232,213,0.12);
}

.cashflow-main-ring > div {
  width: 62%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,0.10), transparent 0 33%, transparent 34%),
    linear-gradient(180deg, rgba(15, 38, 50, 0.96), rgba(3, 14, 23, 0.98));
  border: 1px solid rgba(165, 221, 255, 0.12);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.36);
}

.cashflow-main-ring small {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: var(--teal-2);
  font-size: clamp(0.64rem, 2.1vw, 0.76rem);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cashflow-main-ring small.expense {
  color: #ff8b8b;
}

.cashflow-ring-overview .cashflow-balance-core {
  grid-column: 2;
  grid-row: 2;
  width: min(190px, 100%);
  aspect-ratio: auto;
  min-height: 96px;
  border-radius: 16px;
}

.cashflow-ring-overview .cashflow-balance-core::before,
.cashflow-ring-overview .cashflow-balance-core::after {
  display: none;
}

.cashflow-ring-overview .cashflow-pair-list {
  grid-column: 1 / -1;
  grid-row: 3;
}

.cashflow-ring-overview .cashflow-cockpit-values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cashflow-ring-overview .cashflow-value {
  min-height: 74px;
  justify-items: center;
  text-align: center;
}

@media (max-width: 520px) {
  .dashboard-copy .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-copy .metrics-grid .hq-value-card:first-child {
    grid-column: auto;
  }

  .cashflow-ring-overview .cashflow-cockpit-stage,
  .cashflow-ring-stage {
    grid-template-columns: minmax(0, 1fr) minmax(122px, 140px) minmax(0, 1fr);
    gap: 9px 7px;
    padding: 12px 8px;
  }

  .cashflow-main-ring {
    width: min(140px, 100%);
  }

  .cashflow-ring-overview .cashflow-flow-panel {
    min-height: 100px;
    padding: 10px 7px;
  }

  .cashflow-ring-overview .cashflow-balance-core {
    min-height: 92px;
  }

  .cashflow-ring-overview .cashflow-cockpit-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Build 475: Cashflow treasury hub and Luxury Corporate reward assets. */
.cashflow-reactor-core {
  width: clamp(150px, 34vw, 220px);
  min-height: clamp(116px, 28vw, 170px);
  filter: none;
}

.cashflow-reactor-core::before,
.cashflow-reactor-core::after {
  opacity: 0.22;
  background: radial-gradient(circle, rgba(240, 184, 58, 0.24), transparent 66%);
}

.cashflow-reactor-core img {
  width: min(100%, 220px);
  max-width: 100%;
  transform: translateY(0);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 12px rgba(240, 184, 58, 0.14));
}

.cashflow-flow-panel em:has(.cashflow-icon-asset),
.cashflow-value em:has(.cashflow-icon-asset) {
  width: 50px;
  height: 50px;
}

.cashflow-value em:has(.cashflow-icon-asset) {
  width: 58px;
  height: 58px;
}

.cashflow-icon-asset {
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.42));
}

.video-reward-art {
  border-color: rgba(240, 184, 58, 0.30);
  background:
    radial-gradient(circle at 50% 54%, rgba(17, 223, 184, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(240, 184, 58, 0.10), rgba(4, 18, 27, 0.18));
}

.video-reward-art img,
.video-loans-reward-art img {
  width: min(220px, 118%);
  transform: translateY(0);
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 12px rgba(240, 184, 58, 0.12));
}

.video-reward-steps {
  gap: 8px;
}

.video-reward-steps i {
  display: grid;
  min-width: 0;
  min-height: 34px;
  place-items: center;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.video-reward-steps i img {
  display: block;
  width: 72px;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.34));
}

.video-reward-steps i.used img {
  opacity: 0.34;
  filter: grayscale(0.28) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.22));
}

.bottom-nav-icon {
  width: 38px;
  height: 36px;
  overflow: visible;
}

.bottom-nav-icon img {
  width: 116%;
  height: 116%;
  transform: translateY(-3px);
}

@media (max-width: 520px) {
  .cashflow-reactor-core {
    width: clamp(136px, 36vw, 188px);
    min-height: clamp(108px, 30vw, 146px);
  }

  .cashflow-reactor-core img {
    width: min(100%, 188px);
  }

  .bottom-nav-icon {
    width: 34px;
    height: 33px;
  }
}

/* Build 510: one-piece command dock with aligned navigation assets. */
.bottom-nav {
  position: fixed;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 1px solid rgba(104, 151, 166, 0.34);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(18, 49, 62, 0.97), rgba(5, 24, 34, 0.99)),
    #071d28;
  box-shadow:
    0 -10px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(162, 224, 231, 0.10);
  backdrop-filter: blur(16px);
  isolation: isolate;
}

.bottom-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(16, 225, 186, 0.055), transparent),
    radial-gradient(circle at 50% 0, rgba(77, 210, 229, 0.08), transparent 48%);
}

.bottom-nav-button {
  position: relative;
  min-width: 0;
  min-height: 62px;
  padding: 3px 1px 4px;
  gap: 1px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(218, 231, 235, 0.72);
  transform: none;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.bottom-nav-button + .bottom-nav-button {
  border-left: 1px solid rgba(126, 174, 185, 0.10);
}

.bottom-nav-button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(10, 244, 160, 0.17), transparent 65%);
  opacity: 0;
  transform: scale(0.72);
}

.bottom-nav-button::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 0;
  left: 22%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #00eb84, #14d7e8);
  box-shadow: 0 0 11px rgba(5, 235, 159, 0.72);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 160ms ease, transform 160ms ease;
}

.bottom-nav-button:hover,
.bottom-nav-button:focus-visible {
  border-color: transparent;
  background: rgba(98, 181, 192, 0.055);
  color: rgba(239, 249, 250, 0.92);
  transform: none;
}

.bottom-nav-button.active {
  border-color: transparent;
  background: radial-gradient(circle at 50% 45%, rgba(0, 235, 139, 0.15), transparent 68%);
  box-shadow: none;
  color: #a7f7cf;
  transform: none;
}

.bottom-nav-button.active::before {
  opacity: 1;
  transform: scale(1);
}

.bottom-nav-button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.bottom-nav-icon,
.bottom-nav-button.active .bottom-nav-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.bottom-nav-icon img,
.bottom-nav-button.active .bottom-nav-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.74;
  transform: none;
  filter:
    saturate(0.76)
    brightness(0.88)
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.46));
  transition: opacity 160ms ease, filter 160ms ease;
}

.bottom-nav-button.active .bottom-nav-icon img {
  opacity: 1;
  filter:
    saturate(1.08)
    brightness(1.08)
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 7px rgba(0, 238, 151, 0.40));
}

.bottom-nav-button > span:last-child {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(0.61rem, 2.35vw, 0.72rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav-button.nav-clicked {
  animation: commandDockTap 220ms ease-out;
}

.bottom-nav-button.nav-clicked::before {
  animation: commandDockLight 260ms ease-out;
}

@keyframes commandDockTap {
  0% { transform: scale(1); }
  44% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes commandDockLight {
  0% { opacity: 0; transform: scale(0.62); }
  46% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}

/* Build 542: compact right-side navigation panel. */
.global-menu-button {
  position: fixed;
  top: 5px;
  right: 8px;
  z-index: 65;
  display: grid;
  width: 38px;
  height: 35px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(205, 231, 238, 0.28);
  border-radius: 10px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(43, 81, 98, 0.96), rgba(13, 34, 47, 0.98));
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.08);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.global-menu-button:hover,
.global-menu-button:focus-visible,
.global-menu-button.is-open {
  border-color: rgba(116, 226, 161, 0.82);
  background: linear-gradient(180deg, rgba(0, 211, 154, 0.78), rgba(0, 155, 185, 0.86));
  outline: none;
}
.global-menu-button:active { transform: scale(0.95); }
.global-menu-button > span { display: grid; gap: 4px; width: 17px; }
.global-menu-button i { display: block; height: 2px; border-radius: 999px; background: currentColor; }
.global-menu-backdrop {
  position: fixed;
  z-index: 70;
  inset: 0;
  background: rgba(2, 10, 16, 0.64);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 180ms ease;
}
.global-menu-backdrop.is-open { opacity: 1; }
.global-menu-panel {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(400px, 92vw);
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(116, 226, 161, 0.38);
  background:
    radial-gradient(circle at 90% 0, rgba(0, 220, 174, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(18, 47, 61, 0.99), rgba(5, 19, 28, 0.995));
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.42);
  transform: translateX(104%);
  transition: transform 220ms cubic-bezier(0.22, 0.8, 0.24, 1);
}
.global-menu-panel[hidden],
.global-menu-backdrop[hidden],
.global-submenu[hidden] { display: none; }
.global-menu-panel.is-open { transform: translateX(0); }
.global-menu-header {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid rgba(205, 231, 238, 0.15);
  background: rgba(8, 28, 39, 0.68);
}
.global-menu-company { display: flex; min-width: 0; align-items: center; gap: 10px; }
.global-menu-company img { width: 42px; height: 42px; object-fit: contain; }
.global-menu-company span { min-width: 0; }
.global-menu-company strong,
.global-menu-company small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-menu-company strong { font-size: 1rem; }
.global-menu-company small { margin-top: 2px; color: var(--muted); font-size: 0.75rem; }
.global-menu-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid rgba(205, 231, 238, 0.24);
  border-radius: 9px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  font: inherit;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}
.global-menu-close:hover,
.global-menu-close:focus-visible { border-color: var(--teal-2); outline: none; background: rgba(116, 226, 161, 0.14); }
.global-menu-world-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px 12px 4px; }
.global-menu-world-actions button,
.global-menu-link-list button,
.global-menu-group,
.global-menu-premium {
  border: 1px solid rgba(205, 231, 238, 0.16);
  color: var(--text);
  background: rgba(255,255,255,0.045);
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.global-menu-world-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; border-radius: 8px; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.global-menu-world-actions button:hover,
.global-menu-world-actions button:focus-visible,
.global-menu-link-list button:hover,
.global-menu-link-list button:focus-visible,
.global-menu-group:hover,
.global-menu-group:focus-visible { border-color: rgba(116, 226, 161, 0.64); background: rgba(116, 226, 161, 0.10); outline: none; }
.global-menu-scroll { min-height: 0; overflow-y: auto; padding: 10px 12px 24px; }
.global-menu-premium { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 9px 10px; border-color: rgba(240, 184, 58, 0.62); border-radius: 10px; background: linear-gradient(135deg, rgba(240, 184, 58, 0.16), rgba(116, 226, 161, 0.08)); text-align: left; box-shadow: 0 0 22px rgba(240, 184, 58, 0.08); }
.global-menu-premium:hover,
.global-menu-premium:focus-visible { border-color: var(--gold); background: linear-gradient(135deg, rgba(240, 184, 58, 0.24), rgba(116, 226, 161, 0.13)); outline: none; }
.global-menu-premium strong,
.global-menu-premium small { display: block; }
.global-menu-premium strong { color: #ffd66a; font-size: 0.96rem; }
.global-menu-premium small { margin-top: 3px; color: var(--muted); font-size: 0.7rem; line-height: 1.25; }
.global-menu-premium b { color: #ffe29a; font-size: 0.7rem; white-space: nowrap; }
.global-menu-tile-icon { display: grid; width: 40px; height: 40px; place-items: center; overflow: hidden; border-radius: 9px; background: rgba(5, 15, 22, 0.26); }
.global-menu-tile-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.global-menu-group-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.global-menu-group { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 8px; min-height: 75px; padding: 9px; border-radius: 9px; text-align: left; }
.global-menu-group .global-menu-tile-icon { grid-row: 1 / span 2; width: 36px; height: 36px; }
.global-menu-group strong { font-size: 0.82rem; }
.global-menu-group small { color: var(--muted); font-size: 0.64rem; line-height: 1.18; }
.global-submenu { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding-bottom: 20px; background: linear-gradient(180deg, rgba(18, 47, 61, 0.99), rgba(5, 19, 28, 0.995)); animation: globalSubmenuIn 180ms ease-out; }
.global-submenu-header { display: flex; min-height: 72px; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; border-bottom: 1px solid rgba(205, 231, 238, 0.15); }
.global-submenu-header button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(205, 231, 238, 0.24); border-radius: 8px; color: var(--text); background: rgba(255,255,255,0.06); font: inherit; font-size: 1.5rem; cursor: pointer; }
.global-submenu-header button:hover,
.global-submenu-header button:focus-visible { border-color: var(--teal-2); outline: none; background: rgba(116, 226, 161, 0.14); }
.global-submenu-header strong { font-size: 1rem; }
.global-menu-link-list { display: grid; gap: 8px; padding: 14px 12px; overflow-y: auto; }
.global-menu-link-list button { display: flex; min-height: 48px; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 9px; text-align: left; }
.global-menu-link-list button > span { width: 26px; text-align: center; font-size: 1.12rem; }
.global-menu-link-list b { font-size: 0.84rem; }
@keyframes globalSubmenuIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
body.global-menu-is-open { overflow: hidden; }
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 720px) {
  .global-menu-panel { width: min(430px, 46vw); }
}
@media (prefers-reduced-motion: reduce) {
  .global-menu-panel, .global-menu-backdrop, .global-submenu { transition: none; animation: none; }
}

@media (max-width: 520px) {
  .bottom-nav {
    padding-right: 5px;
    padding-left: 5px;
  }

  .bottom-nav-button {
    min-height: 60px;
  }

  .bottom-nav-icon,
  .bottom-nav-button.active .bottom-nav-icon {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav-button,
  .bottom-nav-button::after,
  .bottom-nav-icon img {
    transition: none;
  }

  .bottom-nav-button.nav-clicked,
  .bottom-nav-button.nav-clicked::before {
    animation: none;
  }
}

/* Build 511: city submenu matches the command dock. */
.city-tabs.city-tabs-compact {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 10px;
  padding: 6px 7px;
  overflow: hidden;
  border: 1px solid rgba(104, 151, 166, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18, 49, 62, 0.97), rgba(5, 24, 34, 0.99)),
    #071d28;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(162, 224, 231, 0.10);
  isolation: isolate;
}

.city-tabs.city-tabs-compact::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(16, 225, 186, 0.055), transparent),
    radial-gradient(circle at 50% 0, rgba(77, 210, 229, 0.08), transparent 48%);
}

.city-tabs.city-tabs-compact button {
  position: relative;
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px 1px 4px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(218, 231, 235, 0.72);
  transform: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.city-tabs.city-tabs-compact button + button {
  border-left: 1px solid rgba(126, 174, 185, 0.10);
}

.city-tabs.city-tabs-compact button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(10, 244, 160, 0.17), transparent 65%);
  opacity: 0;
  transform: scale(0.72);
}

.city-tabs.city-tabs-compact button::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 0;
  left: 22%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #00eb84, #14d7e8);
  box-shadow: 0 0 11px rgba(5, 235, 159, 0.72);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 160ms ease, transform 160ms ease;
}

.city-tabs.city-tabs-compact button:hover,
.city-tabs.city-tabs-compact button:focus-visible {
  border-color: transparent;
  background: rgba(98, 181, 192, 0.055);
  color: rgba(239, 249, 250, 0.92);
  transform: none;
}

.city-tabs.city-tabs-compact button.active {
  border-color: transparent;
  background: radial-gradient(circle at 50% 45%, rgba(0, 235, 139, 0.15), transparent 68%);
  box-shadow: none;
  color: #a7f7cf;
  transform: none;
}

.city-tabs.city-tabs-compact button.active::before {
  opacity: 1;
  transform: scale(1);
}

.city-tabs.city-tabs-compact button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.city-tabs.city-tabs-compact button .city-tab-icon,
.city-tabs.city-tabs-compact button.active .city-tab-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  transform: none;
}

.city-tabs.city-tabs-compact .city-tab-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.74;
  transform: none;
  filter:
    saturate(0.76)
    brightness(0.88)
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.46));
  transition: opacity 160ms ease, filter 160ms ease;
}

.city-tabs.city-tabs-compact button.active .city-tab-icon img {
  opacity: 1;
  filter:
    saturate(1.08)
    brightness(1.08)
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 7px rgba(0, 238, 151, 0.40));
}

.city-tabs.city-tabs-compact button strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: clamp(0.61rem, 2.35vw, 0.72rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-tabs.city-tabs-compact button.city-tab-clicked {
  animation: commandDockTap 220ms ease-out;
}

.city-tabs.city-tabs-compact button.city-tab-clicked::before {
  animation: commandDockLight 260ms ease-out;
}

@media (max-width: 520px) {
  .city-tabs.city-tabs-compact {
    padding-right: 5px;
    padding-left: 5px;
  }

  .city-tabs.city-tabs-compact button {
    min-height: 60px;
  }

  .city-tabs.city-tabs-compact button .city-tab-icon,
  .city-tabs.city-tabs-compact button.active .city-tab-icon {
    width: 37px;
    height: 37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-tabs.city-tabs-compact button,
  .city-tabs.city-tabs-compact button::after,
  .city-tabs.city-tabs-compact .city-tab-icon img {
    transition: none;
  }

  .city-tabs.city-tabs-compact button.city-tab-clicked,
  .city-tabs.city-tabs-compact button.city-tab-clicked::before {
    animation: none;
  }
}

/* Build 513: HQ quick access uses the command dock design. */
.hq-quick-access > div {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 6px 7px;
  overflow: hidden;
  border: 1px solid rgba(104, 151, 166, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18, 49, 62, 0.97), rgba(5, 24, 34, 0.99)),
    #071d28;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(162, 224, 231, 0.10);
  isolation: isolate;
}

.hq-quick-access > div::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(16, 225, 186, 0.055), transparent),
    radial-gradient(circle at 50% 0, rgba(77, 210, 229, 0.08), transparent 48%);
}

.hq-quick-access button {
  position: relative;
  min-width: 0;
  min-height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px 1px 4px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(218, 231, 235, 0.78);
  transform: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.hq-quick-access button + button {
  border-left: 1px solid rgba(126, 174, 185, 0.10);
}

.hq-quick-access button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(10, 244, 160, 0.19), transparent 65%);
  opacity: 0;
  transform: scale(0.72);
}

.hq-quick-access button::after {
  content: "";
  position: absolute;
  right: 28%;
  bottom: 0;
  left: 28%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #00eb84, #14d7e8);
  box-shadow: 0 0 11px rgba(5, 235, 159, 0.72);
  opacity: 0;
  transform: scaleX(0.4);
}

.hq-quick-access button:hover,
.hq-quick-access button:focus-visible {
  border-color: transparent;
  background: radial-gradient(circle at 50% 45%, rgba(0, 235, 139, 0.13), transparent 68%);
  color: #a7f7cf;
  transform: none;
}

.hq-quick-access button:hover::before,
.hq-quick-access button:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.hq-quick-access button:hover::after,
.hq-quick-access button:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.hq-quick-access button .hq-quick-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  transform: none;
}

.hq-quick-access .hq-quick-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.86;
  transform: none;
  filter:
    saturate(0.90)
    brightness(0.96)
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.46));
}

.hq-quick-access button b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: clamp(0.66rem, 2.35vw, 0.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hq-quick-access button.nav-clicked {
  animation: commandDockTap 220ms ease-out;
}

.hq-quick-access button.nav-clicked::before {
  animation: commandDockLight 260ms ease-out;
}

@media (max-width: 520px) {
  .hq-quick-access > div {
    padding-right: 5px;
    padding-left: 5px;
  }

  .hq-quick-access button {
    min-height: 60px;
  }

  .hq-quick-access button .hq-quick-icon {
    width: 37px;
    height: 37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hq-quick-access button {
    transition: none;
  }

  .hq-quick-access button.nav-clicked,
  .hq-quick-access button.nav-clicked::before {
    animation: none;
  }
}

/* Build 548: direct menu links and centered lower navigation menu button. */
.global-menu-direct-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 2px 0 18px;
}
.global-menu-direct-list button {
  min-height: 48px;
  background: linear-gradient(100deg, rgba(255,255,255,0.055), rgba(26, 91, 105, 0.16));
}
.global-menu-direct-list button > span {
  width: 28px;
  color: #9ff5d0;
  text-align: center;
  font-size: 1.08rem;
}
.global-menu-direct-list b {
  font-size: 0.86rem;
}
.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bottom-nav-menu-button {
  color: rgba(226, 242, 244, 0.84);
}
.bottom-nav-menu-button.is-open,
.bottom-nav-menu-button:hover,
.bottom-nav-menu-button:focus-visible {
  color: #a7f7cf;
  background: radial-gradient(circle at 50% 45%, rgba(0, 235, 139, 0.15), transparent 68%);
}
.bottom-nav-menu-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-content: center;
  gap: 5px;
}
.bottom-nav-menu-icon i {
  display: block;
  width: 27px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 7px rgba(99, 228, 203, 0.28);
  transition: transform 160ms ease, opacity 160ms ease;
}
.bottom-nav-menu-button.is-open .bottom-nav-menu-icon i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bottom-nav-menu-button.is-open .bottom-nav-menu-icon i:nth-child(2) { opacity: 0; }
.bottom-nav-menu-button.is-open .bottom-nav-menu-icon i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Build 549: compact menu width and typography. */
.global-menu-panel {
  width: min(180px, 74vw);
}
.global-menu-direct-list button {
  min-height: 40px;
  padding: 6px 6px;
  gap: 5px;
}
.global-menu-direct-list button > span {
  width: 21px;
  font-size: 0.9rem;
}
.global-menu-direct-list b {
  font-size: 0.72rem;
}
.global-menu-company strong { font-size: 0.9rem; }
.global-menu-company small { font-size: 0.68rem; }
.global-menu-close { width: 32px; height: 32px; flex-basis: 32px; font-size: 1.35rem; }
/* Stock safety budget and real-time market limits */
.stock-budget-card {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(76, 224, 178, 0.32);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(9, 38, 48, 0.96), rgba(10, 29, 39, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.stock-budget-head,
.stock-budget-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stock-budget-head > span {
  display: grid;
  gap: 2px;
  font-weight: 800;
}

.stock-budget-head small {
  color: var(--muted, #9db4bd);
  font-size: 0.72rem;
  font-weight: 500;
}

.stock-budget-head > b {
  color: #68e6a7;
  font-size: 1.05rem;
}

.stock-budget-track {
  height: 8px;
  margin: 11px 0;
  overflow: hidden;
  border: 1px solid rgba(130, 176, 190, 0.26);
  border-radius: 4px;
  background: rgba(2, 15, 22, 0.72);
}

.stock-budget-track i {
  display: block;
  width: calc(min(100, var(--stock-budget-usage, 0)) * 1%);
  height: 100%;
  background: linear-gradient(90deg, #00e895, #18c8e6);
  box-shadow: 0 0 12px rgba(0, 232, 149, 0.42);
  transition: width 180ms ease;
}

.stock-budget-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stock-budget-values span {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted, #9db4bd);
  font-size: 0.72rem;
}

.stock-budget-values b {
  overflow: hidden;
  color: #eef8fa;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-guard-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.stock-guard-strip > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(116, 166, 181, 0.28);
  border-radius: 7px;
  background: rgba(7, 29, 39, 0.72);
}

.stock-guard-strip span,
.stock-guard-strip small {
  overflow: hidden;
  color: var(--muted, #9db4bd);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-guard-strip b {
  color: #eef8fa;
  font-size: 0.9rem;
}

.stock-guard-strip b.up {
  color: #68e6a7;
}

.stock-guard-strip b.down {
  color: #ff7183;
}

@media (max-width: 560px) {
  .stock-budget-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .stock-guard-strip {
    grid-template-columns: 1fr 1fr;
  }

  .stock-guard-strip > div:last-child {
    grid-column: 1 / -1;
  }
}
/* Public trade orders and banking market */
.trade-hub,.trade-order-list{display:grid;gap:12px}
.trade-tabs,.segmented-control{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.trade-tabs button,.segmented-control button{min-height:48px;border:1px solid rgba(127,186,202,.35);background:#112b37;color:#dcebf0;font-weight:700}
.trade-tabs button.active,.segmented-control button.active{border-color:#12e8a2;background:linear-gradient(135deg,#05c985,#09b8d7);color:#06221f}
.trade-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.trade-form .segmented-control{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
.trade-form label{display:grid;gap:5px;color:#a9c2cb;font-size:.85rem}
.trade-form input,.trade-form select,.trade-order-action input{width:100%;min-height:48px;border:1px solid rgba(127,186,202,.35);background:#0b202b;color:#fff;padding:8px}
.trade-create-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.player-contract-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.player-contract-tabs button{min-height:48px;padding:10px 12px;border:1px solid rgba(127,186,202,.35);border-radius:8px;background:#112b37;color:#dcebf0;font-weight:800}
.player-contract-tabs button.active{border-color:#12e8a2;background:linear-gradient(135deg,#05c985,#09b8d7);color:#06221f}
.trade-direction-note{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:10px 12px;border:1px solid rgba(127,186,202,.28);border-radius:8px;background:rgba(7,29,39,.62);color:#b8ccd3;font-size:.82rem}
.trade-direction-note strong{color:#68e6b0;text-align:right}
.trade-direction-note.is-locked{border-color:rgba(18,232,162,.45)}
.trade-hub button:disabled{cursor:not-allowed;opacity:.48;filter:saturate(.45)}
.trade-create-head .panel-title{flex:1;margin:0}
.trade-create-toggle{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 9px;border:1px solid rgba(127,186,202,.32);border-radius:6px;background:rgba(9,31,41,.7);color:#bfd1d7;font-size:.76rem;font-weight:800}
.trade-create-toggle b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(17,232,162,.12);color:#67e5b6;font-size:1rem}
.trade-form-compact{grid-template-columns:minmax(0,1.25fr) minmax(92px,.7fr) minmax(110px,.85fr);margin-bottom:8px}
.trade-price-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
.trade-price-preview>div{display:grid;gap:3px;min-height:58px;padding:9px 10px;border:1px solid rgba(127,186,202,.27);border-radius:6px;background:rgba(7,29,39,.56)}
.trade-price-preview span{color:#9fb7c0;font-size:.76rem}
.trade-price-preview b{color:#72e2ae;font-size:.94rem}
.trade-advanced-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px;padding:10px;border:1px solid rgba(127,186,202,.22);border-radius:6px;background:rgba(7,27,36,.46)}
.trade-advanced-fields .segmented-control{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
.trade-advanced-fields label{display:grid;gap:5px;color:#a9c2cb;font-size:.85rem}
.trade-advanced-fields select{width:100%;min-height:48px;border:1px solid rgba(127,186,202,.35);background:#0b202b;color:#fff;padding:8px}
.trade-create>.action-button{min-height:48px}
.trade-order-card{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid rgba(80,170,188,.38);background:rgba(10,34,44,.78)}
.trade-order-card img{width:52px;height:52px;object-fit:contain}
.trade-order-main{display:grid;gap:3px;min-width:0}.trade-order-main span,.trade-order-main small{color:#afc6cd}
.trade-order-action{display:grid;grid-template-columns:90px auto;gap:6px;align-items:center}
.loan-credit-card{display:grid;grid-template-columns:1.3fr 1fr;gap:9px;margin:10px 0;padding:15px;border:1px solid #d5b85b;background:linear-gradient(135deg,#18313a,#0a1c27 65%,#3a3020);box-shadow:inset 0 0 24px rgba(220,183,78,.08)}
.loan-credit-card>div{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end}.loan-credit-card strong{color:#f1d77a;font-size:1.3rem}
.loan-credit-card span{display:grid;color:#9fb7c0}.loan-credit-card b{color:#fff}
.loan-request-market{margin-top:14px}.loan-request-create{border-top:1px solid rgba(127,186,202,.25);padding-top:14px}
@media(max-width:420px){.loan-request-terms{grid-template-columns:minmax(0,1fr);gap:8px}.loan-request-terms select{min-height:52px;padding:8px;font-size:.92rem}}
@media(max-width:620px){.trade-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.trade-order-card{grid-template-columns:46px minmax(0,1fr)}.trade-order-card img{width:44px;height:44px}.trade-order-action,.trade-order-card>.mini-button{grid-column:1/-1;width:100%}.trade-form{grid-template-columns:1fr}.trade-form-compact{grid-template-columns:1fr 1fr}.trade-form-compact label:first-child{grid-column:1/-1}.trade-create-toggle span{display:none}.trade-price-preview{grid-template-columns:1fr 1fr}.trade-advanced-fields{grid-template-columns:1fr}.trade-direction-note{align-items:flex-start;flex-direction:column}.trade-direction-note strong{text-align:left}}
.loan-view-hidden {
  display: none !important;
}

.loan-tabs {
  margin: 12px 0;
}

.loan-alert {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(255, 96, 111, 0.55);
  border-radius: 8px;
  background: rgba(126, 24, 39, 0.28);
  color: #ffd7dc;
  font-weight: 700;
}

/* Build 579: playable Academy chapters and a clearer credit market. */
.academy-lesson-overlay {
  z-index: 66;
}
.academy-lesson-overlay .tutorial-spotlight {
  z-index: 67;
}
.academy-lesson-target {
  position: relative;
  z-index: 68 !important;
  isolation: isolate;
  cursor: pointer;
}
.academy-lesson-card {
  z-index: 69;
}
.academy-lesson-progress {
  grid-template-columns: repeat(3, minmax(18px, 1fr));
}
.academy-card-status {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  color: #62e7aa;
  font-size: .76rem;
  font-weight: 900;
}
.academy-lesson-overlay.is-inspection {
  place-items: end center;
  padding-bottom: calc(98px + env(safe-area-inset-bottom));
  background: transparent;
}
.academy-lesson-overlay.is-inspection .academy-lesson-card {
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  width: min(620px, calc(100vw - 24px));
  max-height: min(245px, calc(100dvh - 130px));
  padding: 12px;
  border-color: rgba(85, 242, 175, .72);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .58), 0 0 22px rgba(0, 210, 255, .18);
}
.academy-lesson-overlay.is-inspection .tutorial-guide {
  min-height: 108px;
}
.academy-lesson-overlay.is-inspection .tutorial-guide img {
  width: 86px;
  max-height: 128px;
}

.loan-market-hero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(219, 185, 86, .64);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(219, 185, 86, .11), transparent 42%),
    linear-gradient(145deg, #173642, #091c27 68%, #292719);
  box-shadow: inset 0 0 30px rgba(219, 185, 86, .06), 0 10px 24px rgba(0, 0, 0, .2);
}
.loan-market-emblem {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(241, 215, 122, .62);
  border-radius: 8px;
  color: #f1d77a;
  background: rgba(241, 215, 122, .08);
  box-shadow: inset 0 0 18px rgba(241, 215, 122, .09);
  font-size: 2rem;
  font-weight: 900;
}
.loan-market-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.loan-market-title span,
.loan-market-availability small,
.loan-credit-strip small {
  color: #9fb7c0;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}
.loan-market-title strong {
  color: #f1d77a;
  font-size: 1.28rem;
}
.loan-market-title small {
  color: #c2d3d8;
  line-height: 1.32;
}
.loan-market-availability {
  display: grid;
  gap: 3px;
  min-width: 120px;
  padding-left: 12px;
  border-left: 1px solid rgba(219, 185, 86, .28);
  text-align: right;
}
.loan-market-availability b {
  color: #69e7af;
  font-size: 1.15rem;
}
.loan-credit-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.loan-credit-strip > span {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(127, 186, 202, .3);
  border-radius: 7px;
  background: rgba(7, 29, 39, .64);
}
.loan-credit-strip b {
  color: #fff;
  font-size: 1rem;
}
.loan-tabs {
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(127, 186, 202, .28);
  border-radius: 8px;
  background: rgba(5, 23, 32, .76);
}
.loan-tabs button {
  min-height: 44px;
  border-color: transparent;
}
.loan-tabs button.active {
  border-color: rgba(85, 242, 175, .54);
  background: linear-gradient(135deg, rgba(0, 224, 126, .25), rgba(0, 190, 230, .22));
  box-shadow: inset 0 -2px 0 #55f2af;
}
.loan-summary-modern {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.loan-request-create {
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(219, 185, 86, .38);
  border-left: 3px solid #d9b956;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(30, 51, 57, .74), rgba(7, 26, 36, .8));
}

@media (max-width: 620px) {
  .academy-lesson-overlay.is-inspection .academy-lesson-card {
    grid-template-columns: 54px minmax(0, 1fr);
    max-height: min(270px, calc(100dvh - 118px));
  }
  .academy-lesson-overlay.is-inspection .tutorial-guide {
    min-height: 90px;
  }
  .academy-lesson-overlay.is-inspection .tutorial-guide img {
    width: 68px;
  }
  .academy-lesson-overlay.is-inspection .tutorial-card h2 {
    margin: 4px 0;
    font-size: 1rem;
  }
  .academy-lesson-overlay.is-inspection .tutorial-card p {
    font-size: .8rem;
    line-height: 1.32;
  }
  .loan-market-hero {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 0;
    padding: 12px;
  }
  .loan-market-emblem {
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
  }
  .loan-market-availability {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 9px 0 0;
    border-top: 1px solid rgba(219, 185, 86, .22);
    border-left: 0;
    text-align: left;
  }
  .loan-credit-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .loan-credit-strip > span {
    min-height: 58px;
    padding: 8px;
  }
  .loan-credit-strip small {
    font-size: .62rem;
  }
  .loan-summary-modern {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Build 582: keep the essential mobile menu readable. */
.global-menu-panel {
  width: min(310px, 86vw);
}

/* Build 585: cleaned 12-entry menu with mobile-friendly direct rows. */
.global-menu-direct-list {
  gap: 7px;
  padding: 2px 0 18px;
}
.global-menu-direct-list button {
  min-height: 50px;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
}
.global-menu-direct-list button > span {
  width: 26px;
  font-size: 1.05rem;
}
.global-menu-direct-list b {
  font-size: 0.88rem;
}

@media (max-width: 360px) {
  .global-menu-direct-list button {
    min-height: 48px;
    gap: 7px;
    padding: 7px 8px;
  }
  .global-menu-direct-list b {
    font-size: 0.82rem;
  }
}

/* Build 596: reusable seasonal community events. */
.season-event-banner {
  margin: 16px 0;
  border-radius: 19px;
  overflow: hidden;
  border: 1px solid rgba(255, 205, 104, .52);
  background: #08212b;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .26), 0 0 30px rgba(255, 184, 76, .08);
}
.season-event-banner[hidden] { display: none; }
.season-event-banner-button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 124px;
  grid-template-columns: minmax(0, 1fr) 30px;
  grid-template-areas: "kicker arrow" "copy arrow" "progress arrow";
  align-content: center;
  gap: 8px 12px;
  padding: 18px;
  overflow: hidden;
  border: 0;
  color: #fff;
  text-align: left;
  background: linear-gradient(90deg, rgba(4, 26, 34, .97) 0%, rgba(5, 32, 40, .85) 56%, rgba(5, 26, 34, .35) 100%), var(--event-banner-image) center 42% / cover;
}
.season-event-banner-button::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 48%,rgba(255,219,131,.13)); }
.season-event-kicker { grid-area:kicker; display:flex; align-items:center; gap:8px; z-index:1; }
.season-event-kicker b { padding:4px 8px; border-radius:999px; background:#efad3b; color:#231706; font-size:.67rem; letter-spacing:.05em; text-transform:uppercase; }
.season-event-kicker small { color:#ffe6b0; font-weight:700; }
.season-event-banner-copy { grid-area:copy; display:grid; gap:3px; z-index:1; }
.season-event-banner-copy strong { font-size:1.2rem; }
.season-event-banner-copy small { color:#c8e0e5; }
.season-event-mini-progress { grid-area:progress; display:block; width:min(270px, 84%); height:5px; border-radius:999px; background:#ffffff24; overflow:hidden; z-index:1; }
.season-event-mini-progress i,.event-progress i,.event-overall-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#20d4ad,#f4c258); box-shadow:0 0 12px #39dfb980; }
.season-event-arrow { grid-area:arrow; align-self:center; justify-self:end; z-index:1; color:#ffe5a4; font-size:2.4rem; }

.event-hero { position:relative; min-height:360px; margin-bottom:18px; overflow:hidden; border:1px solid #f0bd5d69; border-radius:24px; background:var(--event-hero-image) center / cover no-repeat; box-shadow:0 18px 45px #0006; }
.event-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#061b25f5 0%,#08212dd9 50%,#09202c69 100%),linear-gradient(0deg,#061923aa,transparent 55%); }
.event-hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:end; max-width:720px; min-height:360px; padding:34px; }
.event-hero-copy>span { width:max-content; padding:6px 10px; border:1px solid #ffd37982; border-radius:999px; background:#5b3c12b8; color:#ffe2a4; font-size:.72rem; font-weight:900; text-transform:uppercase; }
.event-hero-copy h2 { margin:12px 0 4px; color:#fff6db; font-size:clamp(2rem,5vw,3.5rem); line-height:1; text-shadow:0 3px 16px #000; }
.event-hero-copy strong { color:#64efd0; font-size:1rem; }
.event-hero-copy p { max-width:620px; margin:14px 0 10px; color:#e2edf0; line-height:1.55; }
.event-hero-copy em { color:#ffd98d; font-size:.8rem; font-style:normal; }
.ai-content-badge {
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  min-width:28px;
  min-height:22px;
  padding:2px 6px;
  border:1px solid rgba(255,220,133,.72);
  border-radius:999px;
  color:#fff1c6;
  background:linear-gradient(135deg,rgba(73,45,8,.94),rgba(22,43,49,.94));
  box-shadow:0 5px 18px rgba(0,0,0,.36),0 0 14px rgba(243,189,70,.16);
  font-size:.58rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  justify-content:center;
  text-decoration:none;
  backdrop-filter:blur(7px);
}
.ai-content-badge:hover,.ai-content-badge:focus-visible { color:#fff8df; border-color:#ffe099; box-shadow:0 0 0 3px rgba(255,210,102,.16),0 7px 20px rgba(0,0,0,.4); }
.ai-content-badge-compact { top:auto; right:9px; bottom:7px; min-width:23px; min-height:19px; padding:2px 5px; font-size:.5rem; }
.season-event-banner-button .ai-content-badge-compact { pointer-events:none; }
.ai-transparency-link { border-color:rgba(236,190,82,.52); color:#ffe3a0; }
.ai-transparency-page .panel-title { display:grid; grid-template-columns:minmax(0,1fr) minmax(74px,110px); align-items:start; gap:8px; }
.ai-transparency-page .panel-title>span,.ai-transparency-page .panel-title>strong { min-width:0; overflow-wrap:anywhere; }
.ai-transparency-page .panel-title>strong { text-align:right; }
.ai-transparency-page .ai-language-control { display:grid; gap:7px; max-width:360px; margin:0 0 24px; color:#bdd0d6; font-size:.8rem; }
.ai-transparency-page .ai-language-control select { min-height:48px; padding:9px 12px; border:1px solid #476573; border-radius:12px; color:#edf7f8; background:#0a202a; font:inherit; }
.ai-transparency-page .ai-disclosure-lead { padding:16px; border:1px solid rgba(238,191,82,.46); border-radius:16px; background:linear-gradient(135deg,rgba(97,64,12,.2),rgba(10,37,46,.74)); color:#edf5f2; }
.ai-transparency-page .ai-status-list { display:grid; gap:10px; padding:0; list-style:none; }
.ai-transparency-page .ai-status-list li { padding:11px 13px; border:1px solid #315361; border-radius:12px; background:#0a222c; }
.ai-transparency-page [data-ai-page][hidden] { display:none; }
.event-chapter-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 34%); gap:12px; margin:0 0 18px; padding:2px 1px 10px; overflow-x:auto; scroll-snap-type:x proximity; }
.event-chapter-card { scroll-snap-align:start; overflow:hidden; border:1px solid #375e6b; border-radius:18px; background:linear-gradient(145deg,#10323d,#081e29); opacity:.72; }
.event-chapter-card.is-current { border-color:#49e1bb; opacity:1; box-shadow:0 0 24px #20dcb423; }
.event-chapter-card.is-completed { opacity:.92; }
.event-chapter-image { position:relative; height:135px; overflow:hidden; }
.event-chapter-image>img { width:100%; height:100%; object-fit:cover; }
.event-chapter-image .ai-content-badge-compact { max-width:calc(100% - 16px); }
.event-chapter-card-body { display:grid; gap:8px; padding:14px; }
.event-chapter-card-body>span { color:#f5c968; font-size:.7rem; font-weight:900; text-transform:uppercase; }
.event-chapter-card h3 { margin:0; color:#f4fbfa; font-size:1rem; }
.event-chapter-card p { margin:0; color:#afc5cc; font-size:.76rem; line-height:1.4; }
.event-progress-label { display:flex; justify-content:space-between; gap:8px; color:#a9c3cb; font-size:.69rem; }
.event-progress-label strong { color:#69e6c5; }
.event-progress,.event-overall-progress { height:8px; overflow:hidden; border-radius:999px; background:#06151e; box-shadow:inset 0 1px 3px #0008; }
.event-resource-mini { display:flex; flex-wrap:wrap; gap:6px; }
.event-resource-mini span { display:flex; align-items:center; gap:4px; padding:4px 7px; border:1px solid #385c68; border-radius:999px; background:#071d27; }
.event-resource-mini img { width:20px; height:20px; object-fit:contain; }
.event-resource-mini small { color:#d5e4e8; font-size:.62rem; }
.event-result { padding:8px; border-radius:10px; background:#102a34; color:#b8cbd1; font-size:.7rem; line-height:1.35; }
.event-result.is-gold { background:#5c4318; color:#ffe397; }
.event-result.is-silver { background:#31434b; color:#e3f0f4; }
.event-result.is-bronze { background:#4b3023; color:#ffc09b; }
.event-panel { margin:0 0 18px; padding:20px; border:1px solid #356270; border-radius:20px; background:linear-gradient(145deg,#0f303bd9,#071e29ed); box-shadow:0 14px 34px #0003; }
.event-panel-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.event-panel-head>span { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border:1px solid #4ce0bc69; border-radius:14px; background:#18cfa91a; font-size:1.3rem; }
.event-panel-head h3 { margin:0 0 3px; color:#f2fbf8; }
.event-panel-head p,.event-panel-head small { margin:0; color:#9db8c0; font-size:.76rem; }
.event-stage-row,.event-weekly-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.event-stage-row span,.event-weekly-grid span { min-height:48px; padding:11px; border:1px solid #42636e; border-radius:12px; background:#0a222d; color:#d8e7eb; font-size:.73rem; font-weight:800; text-align:center; }
.event-stage-row .bronze { border-color:#bd754d80; color:#ffc19d; }.event-stage-row .silver { border-color:#bcd2d980; color:#e5f4f7; }.event-stage-row .gold { border-color:#edbe5c8c; color:#ffe093; }
.event-helper-line { color:#8fb0b9; font-size:.75rem; text-align:center; }
.event-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.event-resource-card { display:grid; grid-template-columns:66px minmax(0,1fr); gap:12px; padding:14px; border:1px solid #345d69; border-radius:16px; background:#071e29c7; }
.event-resource-card>img { width:66px; height:66px; object-fit:contain; filter:drop-shadow(0 8px 12px #0007); }
.event-resource-copy { display:grid; gap:5px; min-width:0; }.event-resource-copy h4 { margin:0; color:#edf9f7; }.event-resource-copy small { color:#91acb5; }
.event-resource-values { display:flex; justify-content:space-between; gap:8px; color:#bad0d6; font-size:.72rem; }.event-resource-values b { color:#5be4c1; }
.event-resource-card label { grid-column:1/-1; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; color:#a9c0c7; font-size:.75rem; }
.event-resource-card input,.event-showcase-select select { min-height:48px; border:1px solid #47717d; border-radius:12px; background:#061923; color:#fff; padding:0 12px; }
.event-resource-card .action-button { grid-column:1/-1; min-height:48px; }
.event-final-warning { display:grid; gap:3px; margin-top:14px; padding:12px; border:1px solid #d7a74e73; border-radius:12px; background:#4a340e42; }.event-final-warning b { color:#ffdb88; }.event-final-warning span { color:#d7c9a6; font-size:.72rem; }
.event-overall-progress { height:12px; margin:4px 0 15px; }
.event-reward-grid { display:grid; grid-template-columns:repeat(7,minmax(94px,1fr)); gap:8px; overflow-x:auto; padding-bottom:4px; }
.event-reward-card { display:grid; place-items:center; align-content:center; min-height:130px; padding:10px; border:1px solid #395b66; border-radius:14px; background:#071d27; text-align:center; opacity:.65; }
.event-reward-card>span { font-size:1.45rem; }.event-reward-card b { color:#eac568; }.event-reward-card small { min-height:31px; color:#c3d3d8; font-size:.64rem; }.event-reward-card em { color:#78939c; font-size:.6rem; font-style:normal; text-transform:uppercase; }
.event-reward-card.is-earned { border-color:#45dbb4; background:#0a3c35; opacity:1; box-shadow:0 0 16px #2fe3b522; }.event-reward-card.is-earned em { color:#6af0cd; }
.event-award-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.event-award-checks input { position:absolute; opacity:0; pointer-events:none; }.event-award-checks label>span { display:flex; align-items:center; gap:8px; min-height:62px; padding:9px; border:1px solid #41636e; border-radius:13px; background:#071d27; }.event-award-checks input:checked+span { border-color:#f2c867; box-shadow:0 0 18px #f2bd4222; }.event-award-checks img { width:42px; height:42px; object-fit:contain; }.event-award-checks b { color:#e5f0f2; font-size:.72rem; }
.event-showcase-select { display:grid; gap:6px; margin-top:12px; color:#a8c0c7; font-size:.72rem; }.event-showcase-panel .action-button { margin-top:14px; min-height:48px; }
.event-profile-frame.event-frame-summer_lights_2026 { border-color:#f4ca6e; box-shadow:0 0 30px #f1bc4a2c,inset 0 0 30px #ec9a3120; }
.event-profile-title { display:block; margin-top:4px; color:#f3c85f; font-size:.7rem; font-style:normal; }
.event-profile-badges { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }.event-profile-badges span { display:flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid #d5aa536e; border-radius:999px; background:#47330e4a; }.event-profile-badges img { width:26px; height:26px; object-fit:contain; }.event-profile-badges b { color:#ffe19a; font-size:.65rem; }
@media(max-width:760px){.event-hero,.event-hero-copy{min-height:330px}.event-hero-copy{padding:22px}.event-chapter-track{grid-auto-columns:minmax(260px,86%)}.event-resource-grid{grid-template-columns:1fr}.event-stage-row,.event-weekly-grid{grid-template-columns:1fr}.event-award-checks{grid-template-columns:1fr}.event-reward-grid{grid-template-columns:repeat(7,102px)}}
@media(max-width:390px){.event-hero,.event-hero-copy{min-height:310px}.event-hero-copy{padding:48px 17px 17px}.event-hero-copy h2{font-size:1.9rem}.event-hero-copy p{font-size:.78rem}.event-panel{padding:14px}.event-resource-card{grid-template-columns:54px minmax(0,1fr);padding:11px}.event-resource-card>img{width:54px;height:54px}.season-event-banner-button{padding:14px}.season-event-banner-copy strong{font-size:1.05rem}.ai-content-badge{top:9px;right:9px;font-size:.54rem}.ai-content-badge-compact{top:auto;bottom:6px;font-size:.46rem}.ai-transparency-page .panel-title{grid-template-columns:minmax(0,1fr)}.ai-transparency-page .panel-title>strong{display:none}}
@media(prefers-reduced-motion:reduce){.season-event-banner-button::after,.event-progress i,.event-overall-progress i{transition:none;animation:none}}

/* Build 586: keep the menu only as wide as its compact content requires. */
.global-menu-panel {
  width: min(250px, 80vw);
}

/* Build 587: narrower drawer with labels docked to the right edge. */
.global-menu-panel {
  width: min(215px, 72vw);
}
.global-menu-header {
  gap: 8px;
  padding-right: 10px;
  padding-left: 10px;
}
.global-menu-company {
  gap: 8px;
}
.global-menu-company img {
  width: 36px;
  height: 36px;
}
.global-menu-direct-list button {
  gap: 8px;
  padding-right: 8px;
  padding-left: 8px;
}
.global-menu-direct-list b {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Build 588: keep each icon directly beside its right-aligned label. */
.global-menu-direct-list button {
  justify-content: flex-end;
  gap: 6px;
}
.global-menu-direct-list button > span {
  flex: 0 0 26px;
}
.global-menu-direct-list b {
  margin-left: 0;
}

/* Build 589: ultra-narrow drawer with left-aligned icon-label groups. */
.global-menu-panel {
  width: min(130px, 44vw);
}
.global-menu-header {
  gap: 4px;
  padding-right: 6px;
  padding-left: 6px;
}
.global-menu-company {
  gap: 4px;
}
.global-menu-company img {
  width: 24px;
  height: 24px;
}
.global-menu-company strong {
  font-size: 0.72rem;
}
.global-menu-company small {
  font-size: 0.56rem;
}
.global-menu-close {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  font-size: 1.2rem;
}
.global-menu-scroll {
  padding-right: 6px;
  padding-left: 6px;
}
.global-menu-direct-list button {
  justify-content: flex-start;
  gap: 5px;
  padding-right: 6px;
  padding-left: 6px;
}
.global-menu-direct-list button > span {
  width: 22px;
  flex-basis: 22px;
  font-size: 0.95rem;
}
.global-menu-direct-list b {
  font-size: 0.74rem;
  text-align: left;
}

/* Build 590: mobile-first warehouse cockpit. */
.warehouse-cockpit-shell {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.warehouse-hero {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  min-height: 118px;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(71, 225, 177, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 18%, rgba(0, 214, 188, 0.20), transparent 38%),
    linear-gradient(135deg, rgba(15, 58, 68, 0.98), rgba(6, 25, 35, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 38px rgba(0,0,0,0.24);
}
.warehouse-hero::after {
  content: '';
  position: absolute;
  right: -35px;
  bottom: -52px;
  width: 155px;
  height: 155px;
  border: 1px solid rgba(89, 232, 200, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(89, 232, 200, 0.035), 0 0 0 44px rgba(89, 232, 200, 0.025);
  pointer-events: none;
}
.warehouse-hero > img {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.45));
}
.warehouse-hero > span {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  min-width: 0;
}
.warehouse-hero small {
  color: #79edbd;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.warehouse-hero strong {
  color: #f4fcff;
  font-size: clamp(1.55rem, 6vw, 2.35rem);
  line-height: 1;
  text-shadow: 0 0 18px rgba(90, 235, 189, 0.16);
}
.warehouse-hero b {
  max-width: 520px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}
.warehouse-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.warehouse-kpi {
  display: grid;
  min-height: 66px;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(170, 211, 220, 0.16);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(17, 55, 67, 0.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.warehouse-kpi span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
}
.warehouse-kpi b {
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warehouse-kpi.reserved { border-color: rgba(76, 194, 239, 0.28); }
.warehouse-kpi.shortage { border-color: rgba(255, 120, 105, 0.30); }
.warehouse-kpi.surplus { border-color: rgba(242, 190, 76, 0.30); }
.warehouse-alerts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.warehouse-alert-card {
  overflow: hidden;
  border: 1px solid rgba(178, 211, 220, 0.17);
  border-radius: 11px;
  background: rgba(8, 31, 41, 0.86);
}
.warehouse-alert-card.has-items.warehouse-alert-shortage { border-color: rgba(255, 115, 103, 0.48); box-shadow: 0 0 18px rgba(255, 92, 78, 0.07); }
.warehouse-alert-card.has-items.warehouse-alert-surplus { border-color: rgba(242, 190, 76, 0.44); box-shadow: 0 0 18px rgba(242, 190, 76, 0.06); }
.warehouse-alert-card.is-clear { border-color: rgba(82, 211, 156, 0.23); }
.warehouse-alert-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.warehouse-alert-card summary::-webkit-details-marker { display: none; }
.warehouse-alert-card summary > span { display: flex; min-width: 0; align-items: center; gap: 7px; }
.warehouse-alert-card summary i { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 7px; color: #fff; background: rgba(255,255,255,0.09); font-style: normal; font-weight: 950; }
.warehouse-alert-card.is-clear summary i { color: #74e2a1; }
.warehouse-alert-card summary b { overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-alert-card summary strong { color: var(--teal-2); font-size: 0.76rem; }
.warehouse-alert-card summary em { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform 150ms ease; }
.warehouse-alert-card[open] summary em { transform: rotate(225deg) translate(-2px, -1px); }
.warehouse-alert-content { padding: 0 10px 10px; border-top: 1px solid rgba(178, 211, 220, 0.10); }
.warehouse-alert-content .insight-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
.warehouse-alert-content .insight-row img { width: 32px; height: 32px; object-fit: contain; }
.warehouse-alert-content .empty-state { margin-top: 9px; }
.warehouse-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.38fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(172, 211, 221, 0.16);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(10, 38, 49, 0.97), rgba(7, 28, 38, 0.97));
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.warehouse-search-field {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(171, 211, 221, 0.20);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.warehouse-search-field > span { color: var(--teal-2); font-size: 1.2rem; }
.warehouse-search-field input,
.warehouse-sort-field select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  outline: none;
}
.warehouse-sort-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid rgba(171, 211, 221, 0.20);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.warehouse-sort-field > span { color: var(--muted); font-size: 0.68rem; font-weight: 800; }
.warehouse-sort-field option { color: #eaf6f8; background: #0b2631; }
.warehouse-category-chips {
  display: flex;
  grid-column: 1 / -1;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 0 3px;
  scrollbar-width: thin;
}
.warehouse-category-chip {
  min-height: 48px;
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(173, 213, 222, 0.16);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,0.035);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}
.warehouse-category-chip.active {
  border-color: rgba(78, 226, 178, 0.68);
  color: #eafff5;
  background: linear-gradient(135deg, rgba(0, 235, 139, 0.20), rgba(0, 194, 219, 0.16));
  box-shadow: 0 0 14px rgba(0, 221, 173, 0.10);
}
.warehouse-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 2px 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}
.warehouse-results-head strong { color: var(--teal-2); }
.warehouse-list.large {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.warehouse-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(176, 214, 223, 0.17);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(29, 126, 137, 0.14), transparent 42%),
    linear-gradient(155deg, rgba(16, 45, 57, 0.98), rgba(7, 27, 37, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 12px 26px rgba(0,0,0,0.18);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.warehouse-card:hover { border-color: rgba(96, 222, 186, 0.34); }
.warehouse-card.expanded { grid-column: 1 / -1; border-color: rgba(73, 227, 180, 0.48); box-shadow: 0 0 24px rgba(0, 221, 173, 0.09), 0 18px 34px rgba(0,0,0,0.24); }
.warehouse-card.has-shortage { border-left-color: rgba(255, 105, 91, 0.68); }
.warehouse-card.has-surplus { border-bottom-color: rgba(242, 190, 76, 0.44); }
.warehouse-card-toggle {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 13px;
  width: 100%;
  min-height: 112px;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.warehouse-card-art {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(175, 215, 224, 0.14);
  border-radius: 13px;
  background: radial-gradient(circle, rgba(85, 218, 191, 0.13), rgba(4, 20, 28, 0.24));
}
.warehouse-card-art img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 9px 10px rgba(0,0,0,0.38)); }
.warehouse-card-title { display: grid; min-width: 0; gap: 3px; }
.warehouse-card-title > small { overflow: hidden; color: #66dcb5; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.warehouse-card-title > strong { overflow: hidden; color: var(--text); font-size: 0.94rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-card-statuses { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.warehouse-status-chip { padding: 2px 5px; border-radius: 999px; font-size: 0.56rem; font-weight: 900; line-height: 1.3; }
.warehouse-status-chip.shortage { color: #ffd2cc; background: rgba(255, 102, 86, 0.16); }
.warehouse-status-chip.surplus { color: #ffe2a0; background: rgba(242, 190, 76, 0.15); }
.warehouse-status-chip.reserved { color: #c9ecff; background: rgba(76, 194, 239, 0.14); }
.warehouse-card-numbers { display: grid; min-width: 82px; gap: 5px; text-align: right; }
.warehouse-card-numbers > span { display: grid; gap: 1px; }
.warehouse-card-numbers small { color: var(--muted); font-size: 0.58rem; font-weight: 750; }
.warehouse-card-numbers b { color: #f2fbfd; font-size: 0.78rem; white-space: nowrap; }
.warehouse-card-chevron { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform 160ms ease; }
.warehouse-card.expanded .warehouse-card-chevron { transform: rotate(225deg) translate(-2px, -1px); }
.warehouse-quality-chips { display: flex; grid-column: 2 / -1; min-width: 0; flex-wrap: wrap; gap: 4px; }
.warehouse-quality-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border: 1px solid rgba(87, 224, 178, 0.20); border-radius: 999px; color: #b8eed9; background: rgba(54, 188, 147, 0.07); font-size: 0.59rem; font-weight: 750; }
.warehouse-quality-chip b { color: #effffa; font-size: inherit; }
.warehouse-quality-chip small { color: #9fdcff; font-size: inherit; }
.warehouse-quality-chip.reserved-only { border-color: rgba(76, 194, 239, 0.24); color: #bfe9ff; background: rgba(76, 194, 239, 0.07); }
.warehouse-card-detail {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(176, 214, 223, 0.11);
  animation: warehouseDetailOpen 170ms ease-out;
}
.warehouse-card-detail[hidden] { display: none; }
@keyframes warehouseDetailOpen { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.warehouse-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding-top: 10px; }
.warehouse-detail-summary > div,
.warehouse-usage-grid > div { display: grid; min-width: 0; gap: 4px; padding: 8px; border: 1px solid rgba(176, 214, 223, 0.12); border-radius: 9px; background: rgba(255,255,255,0.028); }
.warehouse-detail-summary span,
.warehouse-usage-grid span { color: var(--muted); font-size: 0.62rem; font-weight: 750; }
.warehouse-detail-summary b,
.warehouse-usage-grid b { overflow: hidden; color: var(--text); font-size: 0.75rem; line-height: 1.3; text-overflow: ellipsis; }
.warehouse-detail-section { display: grid; gap: 7px; }
.warehouse-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 0.7rem; font-weight: 850; }
.warehouse-detail-heading strong { color: var(--teal-2); }
.warehouse-quality-table { display: grid; gap: 5px; }
.warehouse-quality-row { display: grid; grid-template-columns: 42px repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; padding: 7px; border: 1px solid rgba(176, 214, 223, 0.10); border-radius: 8px; background: rgba(4, 19, 27, 0.26); }
.warehouse-quality-row > strong { color: #76e7b8; font-size: 0.78rem; }
.warehouse-quality-row > span { display: grid; min-width: 0; gap: 2px; }
.warehouse-quality-row small { overflow: hidden; color: var(--muted); font-size: 0.56rem; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-quality-row b { overflow: hidden; color: var(--text); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.warehouse-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.warehouse-card-actions .action-button { min-height: 48px; }
.warehouse-empty-filter .empty-state { display: grid; justify-items: center; gap: 10px; padding: 22px 12px; }

@media (min-width: 1280px) {
  .warehouse-list.large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .warehouse-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-alerts,
  .warehouse-list.large { grid-template-columns: 1fr; }
  .warehouse-card.expanded { grid-column: auto; }
  .warehouse-toolbar { grid-template-columns: minmax(0, 1fr) 126px; padding: 8px; }
  .warehouse-sort-field { grid-template-columns: 1fr; gap: 0; }
  .warehouse-sort-field > span { display: none; }
  .warehouse-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-quality-row { grid-template-columns: 34px repeat(2, minmax(0, 1fr)); }
  .warehouse-quality-row > span:nth-of-type(n+3) { grid-column: auto; }
  .warehouse-usage-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .warehouse-hero { grid-template-columns: 62px minmax(0, 1fr); min-height: 104px; gap: 10px; padding: 12px; }
  .warehouse-hero > img { width: 62px; height: 62px; }
  .warehouse-hero strong { font-size: 1.45rem; }
  .warehouse-toolbar { grid-template-columns: 1fr 112px; gap: 6px; padding: 7px; }
  .warehouse-search-field { padding: 0 6px; }
  .warehouse-card-toggle { grid-template-columns: 50px minmax(0, 1fr) auto 10px; gap: 7px; padding: 9px; }
  .warehouse-card-art { width: 50px; height: 50px; }
  .warehouse-card-art img { width: 45px; height: 45px; }
  .warehouse-card-numbers { min-width: 70px; }
  .warehouse-quality-chips { grid-column: 1 / -1; }
  .warehouse-quality-row { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); }
  .warehouse-quality-row > span:nth-of-type(3),
  .warehouse-quality-row > span:nth-of-type(4) { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .warehouse-card,
  .warehouse-card-chevron,
  .warehouse-alert-card summary em,
  .warehouse-card-detail { transition: none; animation: none; }
}
/* Build 593: premium strategy, dashboard layout and city credit */
.dashboard-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.dashboard-layout>[data-dashboard-block]{position:relative;min-width:0}.dashboard-edit-button{margin:0 0 14px auto;min-height:48px}.dashboard-reorder-controls{display:none;position:absolute;z-index:5;right:10px;top:10px;gap:6px;align-items:center;padding:5px;border-radius:12px;background:#071b26e8;border:1px solid #29d8b566}.dashboard-layout.is-editing>[data-dashboard-block]{outline:1px dashed #2ee6bd88;outline-offset:4px}.dashboard-layout.is-editing .dashboard-reorder-controls{display:flex}.dashboard-reorder-controls button{width:42px;height:42px;border:1px solid #4f7482;border-radius:10px;background:#102d39;color:#fff;font-size:20px}.dashboard-reorder-controls span{color:#55e8c7}.supporter-badge{display:inline-flex;margin-left:6px;padding:2px 7px;border-radius:999px;border:1px solid #38d7b3;color:#72f1d3;font-size:10px;font-style:normal;vertical-align:middle}.supporter-badge.top,.supporter-badge.top_supporter{border-color:#ffd76a;color:#ffe08a;background:#6b4a122e}.city-loan-card,.premium-strategy-cockpit{margin-top:16px;padding:18px;border:1px solid #2bdcb073;border-radius:18px;background:linear-gradient(145deg,#10323dd9,#081e2ae8);box-shadow:0 0 28px #16d8ad12}.city-loan-card label,.premium-strategy-cockpit label{display:grid;gap:7px}.premium-cosmetic-grid,.finance-scenario-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.premium-cosmetic-grid .action-button,.scenario-result{grid-column:1/-1}.premium-finance-bars{display:flex;align-items:end;gap:8px;height:150px;margin:16px 0 22px;padding:12px;border-radius:14px;background:#061923}.premium-finance-bars>div{position:relative;display:flex;align-items:end;gap:2px;flex:1;height:112px}.premium-finance-bars i,.premium-finance-bars b{display:block;width:50%;min-height:2px;border-radius:5px 5px 1px 1px}.premium-finance-bars i{background:#24deb1}.premium-finance-bars b{background:#ff6f7d}.premium-finance-bars small{position:absolute;top:116px;left:50%;transform:translateX(-50%);font-size:9px;color:#8da9b4}.scenario-result{padding:14px;border-radius:12px;background:#0c4438;color:#70f0c7}.scenario-result.negative{background:#49202a;color:#ff9cab}.premium-alert-builder{display:grid;grid-template-columns:1.4fr .7fr auto;gap:10px}.premium-alert-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.premium-alert-list span{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #416271;border-radius:999px}.premium-alert-list button{border:0;background:none;color:#ff9aa5;font-size:18px}
@media(max-width:720px){.dashboard-layout{grid-template-columns:1fr}.premium-cosmetic-grid,.finance-scenario-grid{grid-template-columns:1fr}.premium-alert-builder{grid-template-columns:1fr}.dashboard-edit-button{width:100%}}
.premium-profile-frame.frame-emerald{border-color:#35e2b3;box-shadow:0 0 24px #35e2b31c}.premium-profile-frame.frame-gold{border-color:#ffd568;box-shadow:0 0 24px #ffd56820}.premium-profile-frame.frame-violet{border-color:#b48cff;box-shadow:0 0 24px #b48cff20}.premium-profile-frame.accent-gold .panel-title strong{color:#ffd568}.premium-profile-frame.accent-violet .panel-title strong{color:#c6a8ff}.premium-profile-frame.accent-blue .panel-title strong{color:#6fb8ff}.premium-profile-frame.accent-emerald .panel-title strong{color:#5de6bc}.stock-sell-action small{display:block;font-size:10px;opacity:.78}
.premium-smart-alerts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.premium-smart-alerts span{padding:9px 12px;border:1px solid #e9bb5266;border-radius:12px;background:#49390d4d;color:#ffe098;font-size:12px}
.dashboard-layout>.wide{grid-column:1/-1}
.top-gold-balance {
  color: #f5c85b;
  font-weight: 800;
  white-space: nowrap;
}
.quick-production-unlock-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}.quick-production-unlock-row .quick-production-collapsed{width:100%}.quick-production-gold-button,.stock-sell-gold-action,.market-stock-sort-gold{min-width:58px;border:1px solid #d8aa3f88;border-radius:12px;background:#382b0fe8;color:#ffd76b;font-weight:800}.stock-detail-actions .stock-sell-gold-action{min-height:48px}@media(max-width:440px){.quick-production-unlock-row{grid-template-columns:1fr}.quick-production-gold-button{min-height:48px}}
.gold-confirm-open{overflow:hidden}.gold-confirm-overlay{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:14px;background:rgba(2,10,16,.78);backdrop-filter:blur(8px);animation:gold-confirm-in .18s ease-out}.gold-confirm-card{width:min(460px,calc(100vw - 24px));box-sizing:border-box;padding:20px;border:1px solid rgba(255,211,102,.76);border-radius:20px;background:linear-gradient(145deg,rgba(14,50,62,.98),rgba(5,27,38,.99) 58%,rgba(57,42,13,.98));box-shadow:0 0 0 1px rgba(35,227,185,.16),0 24px 80px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.08);color:#effffb}.gold-confirm-head{display:grid;grid-template-columns:56px minmax(0,1fr);gap:13px;align-items:center}.gold-confirm-icon{display:grid;width:56px;height:56px;place-items:center;border:1px solid #f8ce5e;border-radius:17px;background:linear-gradient(145deg,#ffd86a,#a97018);box-shadow:0 0 25px #f3c94a40;color:#2b2008;font-size:1.55rem}.gold-confirm-kicker{display:block;margin-bottom:4px;color:#6ff1d1;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.gold-confirm-card h2{margin:0;color:#fff0b0;font-size:1.32rem}.gold-confirm-card p{margin:18px 0 20px;color:#dcf8f1;font-size:1rem;line-height:1.5}.gold-confirm-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.gold-confirm-actions button{min-width:0;min-height:48px;padding:10px 12px;border-radius:12px;font:inherit;font-weight:800;cursor:pointer}.gold-confirm-cancel{border:1px solid #35d8b2aa;background:#0d2c38;color:#9ee9d7}.gold-confirm-accept{border:1px solid #ffe18a;background:linear-gradient(145deg,#ffe58a,#d89b2b);box-shadow:0 7px 20px #d69f3638;color:#2b2008}.gold-confirm-actions button:focus-visible{outline:3px solid #70f5d3;outline-offset:2px}@keyframes gold-confirm-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@media(max-width:360px){.gold-confirm-card{padding:16px}.gold-confirm-head{grid-template-columns:46px minmax(0,1fr);gap:10px}.gold-confirm-icon{width:46px;height:46px;border-radius:14px}.gold-confirm-card h2{font-size:1.16rem}.gold-confirm-card p{font-size:.92rem}}@media(prefers-reduced-motion:reduce){.gold-confirm-overlay{animation:none}}

/* Build 595: visible dashboard customization and stable warehouse rendering. */
.dashboard-customize-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
  padding: 10px 11px;
  border: 1px solid rgba(55, 211, 179, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13, 47, 59, 0.94), rgba(7, 29, 40, 0.96));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.03);
}
.dashboard-customize-bar[hidden] { display: none; }
.dashboard-customize-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.dashboard-customize-copy > span:last-child { display: grid; min-width: 0; gap: 2px; }
.dashboard-customize-copy strong { color: #edfdf9; font-size: 0.86rem; line-height: 1.15; }
.dashboard-customize-copy small { color: #e9c866; font-size: 0.68rem; line-height: 1.2; }
.dashboard-customize-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgba(74, 227, 194, 0.42);
  border-radius: 11px;
  background: rgba(34, 200, 167, 0.10);
  color: #6ff1d1;
  font-size: 1.05rem;
}
.dashboard-customize-bar .dashboard-edit-button {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid rgba(75, 233, 200, 0.58);
  border-radius: 999px;
  background: linear-gradient(135deg, #12cfa2, #0aa9c5);
  box-shadow: 0 7px 18px rgba(0, 200, 164, 0.18);
  color: #031a22;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}
.dashboard-customize-bar .dashboard-edit-button:active { transform: translateY(1px); }
.dashboard-customize-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.dashboard-customize-bar .dashboard-edit-cancel-button {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(220, 235, 239, 0.34);
  border-radius: 999px;
  background: rgba(7, 28, 38, 0.82);
  color: #e7f4f6;
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}
.dashboard-customize-bar .dashboard-edit-cancel-button[hidden] { display: none; }
.dashboard-customize-bar .dashboard-edit-cancel-button:active { transform: translateY(1px); }
@media (max-width: 360px) {
  .dashboard-customize-bar { gap: 7px; padding: 9px; }
  .dashboard-customize-copy { gap: 6px; }
  .dashboard-customize-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .dashboard-customize-copy strong { font-size: 0.78rem; }
  .dashboard-customize-copy small { font-size: 0.62rem; }
  .dashboard-customize-bar .dashboard-edit-button { min-height: 42px; padding: 0 11px; font-size: 0.72rem; }
  .dashboard-customize-actions { gap: 5px; }
  .dashboard-customize-bar .dashboard-edit-cancel-button { min-height: 42px; padding: 0 9px; font-size: 0.7rem; }
}

/* Build 621: cinematic HQ metric cards using one cached 2x3 image atlas. */
.dashboard-metric-item .hq-value-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px 14px;
  border-color: rgba(68, 190, 172, 0.36);
  background: #0b2732;
  text-align: left;
}
.dashboard-metric-item .hq-value-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("assets/hq-metric-scenes-atlas-v1.png?v=622-hq-fictional-art-no-badge-1");
  background-repeat: no-repeat;
  background-size: 200% 300%;
  background-position: var(--hq-metric-position, 0 0);
  filter: saturate(1.02) contrast(1.04);
  transform: scale(1.015);
}
.dashboard-metric-item .hq-value-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 18, 25, 0.2), rgba(3, 18, 25, 0.4) 44%, rgba(3, 17, 24, 0.94) 100%),
    linear-gradient(90deg, rgba(2, 15, 22, 0.32), transparent 70%);
}
.dashboard-metric-item[data-dashboard-metric-id="cash"] { --hq-metric-position: 0% 0%; }
.dashboard-metric-item[data-dashboard-metric-id="company"] { --hq-metric-position: 100% 0%; }
.dashboard-metric-item[data-dashboard-metric-id="production"] { --hq-metric-position: 0% 50%; }
.dashboard-metric-item[data-dashboard-metric-id="market"] { --hq-metric-position: 100% 50%; }
.dashboard-metric-item[data-dashboard-metric-id="storage"] { --hq-metric-position: 0% 100%; }
.dashboard-metric-item[data-dashboard-metric-id="stocks"] { --hq-metric-position: 100% 100%; }
.dashboard-metric-item .hq-value-card > span,
.dashboard-metric-item .hq-value-card > b {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #f7ffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.92);
}
.dashboard-metric-item .hq-value-card > span {
  font-weight: 850;
}
.dashboard-metric-item .hq-value-card > b {
  font-size: clamp(1rem, 2vw, 1.26rem);
}
.metrics-grid.is-editing .dashboard-metric-item .hq-value-card::before {
  opacity: 0.2;
}
.metrics-grid.is-editing .dashboard-metric-item .hq-value-card::after {
  background: linear-gradient(180deg, rgba(3, 18, 25, 0.93), rgba(3, 17, 24, 0.98));
}

/* Build 623: web-only Android app flyover, shown once after each fresh login. */
.web-android-promo {
  position: fixed;
  z-index: 74;
  right: 14px;
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  width: min(540px, calc(100vw - 28px));
  pointer-events: none;
}
.web-android-promo-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(241, 194, 73, 0.68);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 20%, rgba(35, 214, 145, 0.2), transparent 36%),
    linear-gradient(135deg, rgba(9, 38, 49, 0.98), rgba(5, 24, 34, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), 0 0 24px rgba(19, 193, 178, 0.15);
  pointer-events: auto;
  animation: webAndroidPromoIn 240ms ease-out both;
}
.web-android-promo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #e9b72f, #66e89a, #11c9df);
}
.web-android-promo-link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 116px;
  padding: 15px 54px 15px 15px;
  color: #f5fbfc;
  text-decoration: none;
}
.web-android-promo-link > img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.4));
}
.web-android-promo-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.web-android-promo-copy small {
  color: #f5c84e;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.web-android-promo-copy strong {
  font-size: 1rem;
  line-height: 1.18;
}
.web-android-promo-copy > span {
  color: #c6d9dd;
  font-size: 0.78rem;
  line-height: 1.32;
}
.web-android-promo-copy b {
  margin-top: 3px;
  color: #69eda8;
  font-size: 0.78rem;
}
.web-android-promo-link:focus-visible,
.web-android-promo-close:focus-visible {
  outline: 2px solid #70efae;
  outline-offset: -3px;
}
.web-android-promo-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(166, 207, 214, 0.34);
  border-radius: 12px;
  background: rgba(5, 24, 34, 0.86);
  color: #f5fbfc;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
html[data-native-app="1"] .web-android-promo { display: none !important; }
@keyframes webAndroidPromoIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 390px) {
  .web-android-promo { right: 8px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 16px); }
  .web-android-promo-link { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; min-height: 108px; padding: 13px 50px 13px 12px; }
  .web-android-promo-link > img { width: 52px; height: 52px; }
  .web-android-promo-copy strong { font-size: 0.9rem; }
  .web-android-promo-copy > span { font-size: 0.72rem; }
  .web-android-promo-close { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-android-promo-card { animation: none; }
}

/* Build 633 final cascade: keep the wealth cockpit legible above legacy bar rules. */
.hq-asset-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hq-asset-heading > div { display:grid; gap:2px; }
.hq-asset-heading span { color:var(--muted); font-size:.9rem; }
.hq-asset-heading strong { color:#f4fbff; font-size:1.16rem; }
.hq-asset-heading em { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(91,255,219,.28); border-radius:9px; color:#5bffdb; font-size:.72rem; font-style:normal; font-weight:900; }
.hq-asset-cockpit-bar { display:flex; gap:3px; align-items:stretch; height:30px; margin:12px 0 14px; padding:4px; overflow:hidden; border:1px solid rgba(91,255,219,.28); border-radius:12px; background:rgba(2,12,20,.82); box-shadow:inset 0 0 14px rgba(91,255,219,.12), 0 0 12px rgba(0,200,250,.08); }
.hq-asset-cockpit-bar i { position:relative; display:grid; place-items:center; min-width:8px; overflow:hidden; border-radius:7px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -7px 12px rgba(0,0,0,.2); }
.hq-asset-cockpit-bar i b { color:rgba(255,255,255,.9); font-size:.72rem; line-height:1; text-shadow:0 1px 4px rgba(0,0,0,.65); }
.hq-asset-cockpit-bar .asset-cash { background:linear-gradient(90deg,#34f89a,#06c984); }
.hq-asset-cockpit-bar .asset-storage { background:linear-gradient(90deg,#64d7ff,#236dff); }
.hq-asset-cockpit-bar .asset-market { background:linear-gradient(90deg,#ffc44c,#ff8844); }
.hq-asset-cockpit-bar .asset-stocks { background:linear-gradient(90deg,#c7a6ff,#735dff); }
.hq-asset-cockpit-bar .asset-production { background:linear-gradient(90deg,#25fff0,#06a9d8); }
.hq-asset-breakdown .hq-asset-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 9px; }
.hq-asset-breakdown .hq-asset-legend span { display:grid; grid-template-columns:24px minmax(0,1fr); grid-template-rows:auto auto; column-gap:7px; align-items:center; min-width:0; padding:7px 8px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(7,25,36,.7); }
.hq-asset-breakdown .hq-asset-legend span > i { grid-row:1 / span 2; display:grid; place-items:center; width:24px; height:24px; border-radius:8px; color:currentColor; background:rgba(255,255,255,.08); font-size:.84rem; font-style:normal; font-weight:900; }
.hq-asset-breakdown .hq-asset-legend span > small { overflow:hidden; color:var(--muted); font-size:.67rem; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.hq-asset-breakdown .hq-asset-legend span > b { overflow:hidden; color:#f4fbff; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.hq-asset-breakdown .hq-asset-legend .asset-cash { color:#5bffb0; }
.hq-asset-breakdown .hq-asset-legend .asset-storage { color:#58b9ff; }
.hq-asset-breakdown .hq-asset-legend .asset-market { color:#ffb74d; }
.hq-asset-breakdown .hq-asset-legend .asset-stocks { color:#b89bff; }
.hq-asset-breakdown .hq-asset-legend .asset-production { color:#42e9e0; }
@media (max-width:420px) { .hq-asset-breakdown .hq-asset-legend span { padding:6px; } .hq-asset-breakdown .hq-asset-legend span > small { font-size:.62rem; } .hq-asset-breakdown .hq-asset-legend span > b { font-size:.72rem; } }
/* Build 660: direct city destinations and the unified contract selector. */
.contracts-choice-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(61, 224, 188, .3);
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 20%, rgba(26, 204, 221, .18), transparent 38%),
    linear-gradient(145deg, rgba(12, 49, 61, .98), rgba(5, 24, 34, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.2);
}
.contracts-choice-hero > span { color: #61e6bd; font-size: .76rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.contracts-choice-hero h2 { margin: 7px 0 5px; font-size: clamp(1.45rem, 4vw, 2rem); }
.contracts-choice-hero p { margin: 0; color: #bdd0d7; }
.contracts-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.contracts-choice-card {
  min-height: 190px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 14px;
  padding: 20px;
  text-align: left;
  color: #f5fbfd;
  border: 1px solid rgba(93, 227, 195, .32);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(22, 66, 75, .96), rgba(8, 32, 42, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.2);
}
.contracts-choice-card.city { border-color: rgba(246, 190, 69, .38); background: linear-gradient(145deg, rgba(67, 57, 25, .88), rgba(12, 38, 44, .98)); }
.contracts-choice-card:hover, .contracts-choice-card:focus-visible { transform: translateY(-2px); border-color: #55edc1; box-shadow: 0 0 24px rgba(46, 221, 190, .18); }
.contracts-choice-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(62, 225, 194, .12); font-size: 1.9rem; }
.contracts-choice-card > span:nth-child(2) { display: grid; align-content: center; gap: 6px; }
.contracts-choice-card strong { font-size: 1.18rem; }
.contracts-choice-card small { color: #bad0d6; line-height: 1.4; }
.contracts-choice-card > b { grid-column: 1 / -1; color: #62edc2; }
.contracts-choice-card.city > b { color: #ffd665; }
.contracts-back-button { min-height: 48px; margin: 0 0 12px; padding: 0 16px; color: #d9edf1; border: 1px solid rgba(119, 169, 181, .45); border-radius: 14px; background: rgba(12, 39, 49, .9); font-weight: 800; }
.contracts-player-view, .contracts-city-view { display: grid; gap: 12px; }
.contract-partner-picker { display: grid; gap: 12px; }
.contract-search-field { display: grid; gap: 7px; }
.contract-search-field span { color: #b9ced4; font-weight: 800; }
.contract-search-field input { min-height: 50px; width: 100%; }

@media (max-width: 620px) {
  .contracts-choice-grid { grid-template-columns: 1fr; }
  .contracts-choice-card { min-height: 158px; padding: 17px; }
  .contracts-choice-hero { padding: 20px 18px; }
}
/* Build 666: feedback center */
.feedback-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;overflow:visible;margin:0 0 1rem;padding-bottom:.2rem}.feedback-tabs button{min-width:0;min-height:48px;padding:.7rem .35rem;border:1px solid var(--line,#2d5e6c);border-radius:12px;background:#0b2430;color:var(--text,#edf7f9);font-size:clamp(.76rem,3.3vw,.95rem);font-weight:700;line-height:1.15;white-space:normal}.feedback-tabs button.active{background:linear-gradient(110deg,#08ef7c,#0dc6e6);color:#04131a}.feedback-layout{display:grid;gap:1rem}.feedback-card{border:1px solid var(--line,#2d5e6c);border-radius:16px;background:linear-gradient(145deg,rgba(17,53,65,.94),rgba(5,24,34,.96));padding:1rem;box-shadow:0 0 22px rgba(0,218,198,.08)}.feedback-form{display:grid;gap:.8rem}.feedback-form label{display:grid;gap:.35rem;color:var(--muted,#b8ced4);font-weight:600}.feedback-form input,.feedback-form textarea,.feedback-form select{width:100%;box-sizing:border-box;border:1px solid #4a7884;border-radius:10px;background:#071d27;color:#fff;padding:.8rem;font:inherit}.feedback-form textarea{min-height:150px;resize:vertical}.feedback-hint{color:var(--muted,#b8ced4);font-size:.9rem}.feedback-list{display:grid;gap:.7rem}.feedback-item{border:1px solid rgba(73,176,180,.45);border-radius:13px;padding:.85rem;background:rgba(7,30,40,.7)}.feedback-item h3{margin:0 0 .35rem}.feedback-meta{display:flex;flex-wrap:wrap;gap:.45rem;color:var(--muted,#b8ced4);font-size:.85rem}.feedback-status{display:inline-flex;padding:.2rem .5rem;border-radius:999px;background:rgba(44,219,151,.16);color:#65efae;font-weight:700}.feedback-progress{height:8px;background:#0a1b25;border-radius:999px;overflow:hidden;margin:.65rem 0}.feedback-progress i{display:block;height:100%;background:linear-gradient(90deg,#00ef8b,#0bc8e7);border-radius:inherit}.feedback-timeline{position:relative;display:grid;gap:.9rem;margin-top:1rem;padding-left:2rem}.feedback-timeline h4{margin:0 0 .15rem -2rem;color:var(--text,#edf7f9)}.feedback-timeline::before{content:"";position:absolute;left:.48rem;top:2rem;bottom:.6rem;width:2px;background:linear-gradient(180deg,#17efaa,#19cde8 75%,rgba(25,205,232,.18));box-shadow:0 0 12px rgba(25,205,232,.38)}.feedback-timeline-entry{position:relative;min-width:0}.feedback-timeline-node{position:absolute;left:-1.86rem;top:1rem;width:.72rem;height:.72rem;border:2px solid #a7fff0;border-radius:50%;background:#0a2633;box-shadow:0 0 0 4px rgba(17,232,163,.12),0 0 14px rgba(17,232,163,.58)}.feedback-timeline-panel{min-width:0;border:1px solid rgba(83,220,198,.3);border-radius:12px;padding:.85rem .95rem;background:linear-gradient(135deg,rgba(10,43,53,.96),rgba(7,29,42,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.feedback-timeline-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.feedback-timeline-heading strong{color:#eafdf8}.feedback-timeline-heading b{color:#69efb2;font-size:1.05rem}.feedback-timeline-panel p{margin:.4rem 0;color:var(--text,#edf7f9);white-space:pre-wrap;overflow-wrap:anywhere}.feedback-timeline-panel time{display:block;color:var(--muted,#b8ced4);font-size:.78rem}.feedback-empty{color:var(--muted,#b8ced4);padding:1rem;text-align:center}@media(min-width:720px){.feedback-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Build 683: compact, persistent feedback accordions. */
.feedback-item{padding:0;overflow:hidden}.feedback-item>summary{display:flex;align-items:center;justify-content:space-between;gap:.7rem;min-height:48px;padding:.72rem .85rem;cursor:pointer;list-style:none}.feedback-item>summary::-webkit-details-marker{display:none}.feedback-item>summary::before{content:'›';flex:0 0 auto;color:#65efae;font-size:1.35rem;line-height:1;transition:transform .16s ease}.feedback-item[open]>summary::before{transform:rotate(90deg)}.feedback-item>summary:focus-visible{outline:2px solid #31e6d1;outline-offset:-3px}.feedback-summary-title{min-width:0;flex:1;font-weight:750;overflow-wrap:anywhere}.feedback-summary-state{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;flex-wrap:wrap}.feedback-summary-state>b{color:#7cf4bb;white-space:nowrap}.feedback-item-body{padding:0 .85rem .85rem;border-top:1px solid rgba(73,176,180,.22)}.feedback-item-body>p{white-space:pre-wrap;overflow-wrap:anywhere}.feedback-item-body>.feedback-meta{padding-top:.7rem}@media(max-width:390px){.feedback-item>summary{align-items:flex-start;flex-wrap:wrap}.feedback-summary-title{flex-basis:calc(100% - 2rem)}.feedback-summary-state{width:100%;padding-left:1.6rem;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.feedback-item>summary::before{transition:none}}

/* Build 679: consistent pointer, keyboard, press and selected button feedback. */
button:not(:disabled),[role="button"]:not([aria-disabled="true"]){transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,filter .16s ease,transform .12s ease}
@media (hover:hover) and (pointer:fine){button:not(:disabled):hover,[role="button"]:not([aria-disabled="true"]):hover{border-color:rgba(102,255,211,.88)!important;filter:brightness(1.13) saturate(1.08);box-shadow:0 0 0 2px rgba(66,238,195,.18),0 8px 22px rgba(0,0,0,.26)}}
button:not(:disabled):focus-visible,[role="button"]:not([aria-disabled="true"]):focus-visible{outline:3px solid rgba(96,244,207,.92)!important;outline-offset:3px;border-color:#7affdc!important;box-shadow:0 0 0 5px rgba(52,229,190,.2),0 8px 22px rgba(0,0,0,.28)}
button:not(:disabled):active,[role="button"]:not([aria-disabled="true"]):active{transform:translateY(1px) scale(.975);filter:brightness(1.2) saturate(1.14);box-shadow:inset 0 2px 8px rgba(0,0,0,.3),0 0 0 3px rgba(76,245,203,.3)}
button.active:not(:disabled),button.selected:not(:disabled),button.is-active:not(:disabled),button[aria-selected="true"]:not(:disabled),button[aria-pressed="true"]:not(:disabled),[role="button"].active:not([aria-disabled="true"]),[role="button"][aria-selected="true"]:not([aria-disabled="true"]),[role="button"][aria-pressed="true"]:not([aria-disabled="true"]){border-color:#70f5ce!important;box-shadow:inset 0 -3px 0 rgba(3,83,72,.45),0 0 0 2px rgba(89,247,205,.3),0 0 20px rgba(22,226,180,.22)}
@media (prefers-reduced-motion:reduce){button:not(:disabled),[role="button"]:not([aria-disabled="true"]){transition:none}}

/* Build 691: cinematic startup layer keeps the empty dashboard out of view while the real state loads. */
body:not(.startup-complete) > .app-shell { visibility: hidden; }
.startup-splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); color: #f4fbff; background: #06131d; }
.startup-splash-backdrop { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,17,27,.74), rgba(2,11,18,.94)), url("assets/hq-hero-mobile.jpg") center / cover no-repeat; filter: saturate(.88); }
.startup-splash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 38%, rgba(0,230,210,.15), transparent 42%), linear-gradient(120deg, transparent 25%, rgba(255,193,65,.08) 50%, transparent 75%); animation: startup-sweep 4.8s ease-in-out infinite; }
.startup-splash-card { position: relative; z-index: 1; display: grid; justify-items: center; width: min(100%, 430px); padding: 36px 24px 30px; border: 1px solid rgba(91,255,219,.32); border-radius: 24px; background: linear-gradient(145deg, rgba(8,32,44,.88), rgba(3,15,25,.9)); box-shadow: 0 24px 80px rgba(0,0,0,.52), inset 0 0 44px rgba(0,220,210,.08), 0 0 30px rgba(0,218,213,.12); text-align: center; isolation: isolate; }
.startup-splash-logo { width: clamp(92px, 24vw, 132px); height: auto; margin-bottom: 12px; border-radius: 50%; filter: drop-shadow(0 0 18px rgba(255,193,65,.42)); animation: startup-logo-pulse 2.4s ease-in-out infinite; }
.startup-splash-kicker { margin: 0 0 7px; color: #f0b83a; font-size: .72rem; font-weight: 850; letter-spacing: .22em; }
.startup-splash h1 { margin: 0; color: #f4fbff; font-size: clamp(1.25rem, 4vw, 1.65rem); letter-spacing: .01em; }
.startup-splash-progress { width: min(100%, 290px); height: 7px; margin: 26px 0 13px; overflow: hidden; border: 1px solid rgba(91,255,219,.28); border-radius: 99px; background: rgba(2,12,20,.84); box-shadow: inset 0 0 12px rgba(0,0,0,.42); }
.startup-splash-progress span { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00c8fa, #5bffb0, #f0b83a); box-shadow: 0 0 14px rgba(91,255,176,.7); transition: width .35s ease; }
.startup-splash-status { min-height: 1.4em; margin: 0; color: #c7d8e2; font-size: .92rem; }
.startup-splash-error { max-width: 300px; margin: 15px 0 0; color: #ffbd73; font-size: .86rem; line-height: 1.45; }
.startup-splash-retry { min-height: 48px; margin-top: 18px; }
.startup-splash-orbit { position: absolute; z-index: -1; width: 190px; height: 190px; border: 1px solid rgba(91,255,219,.14); border-radius: 50%; pointer-events: none; }
.startup-splash-orbit-one { transform: rotate(28deg) scaleX(1.65); }
.startup-splash-orbit-two { transform: rotate(-34deg) scaleX(1.65); border-color: rgba(240,184,58,.12); }
body.startup-complete .startup-splash { opacity: 0; pointer-events: none; transition: opacity .42s ease; }
body.startup-complete > .app-shell { visibility: visible; }
body.startup-failed .startup-splash { background: #07131b; }
@keyframes startup-logo-pulse { 0%,100% { transform: scale(.98); } 50% { transform: scale(1.04); } }
@keyframes startup-sweep { 0%,100% { transform: translateX(-18%); opacity: .55; } 50% { transform: translateX(18%); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .startup-splash::after, .startup-splash-logo { animation: none; } .startup-splash-progress span { transition: none; } body.startup-complete .startup-splash { transition: none; } }
@media (max-width: 420px) { .startup-splash-card { padding: 30px 18px 24px; border-radius: 20px; } }