.segmented {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden
}

.segmented button {
  border:0;
  background:#101c27;
  color:var(--muted);
  padding:10px 8px
}

.segmented button.active {
  background:var(--blue);
  color:#102d42;
  font-weight:700
}

.switch span {
  width:34px;
  height:19px;
  border-radius:20px;
  background:#425462;
  position:relative;
  flex:none
}

.switch span:after {
  content:"";
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:white;
  left:3px;
  top:3px
}

.switch input {
  position:absolute;
  opacity:0
}

.switch input:checked+span {
  background:var(--blue)
}

.switch input:checked+span:after {
  left:18px
}

.inline-input {
  display:grid;
  grid-template-columns:90px 1fr;
  align-items:center;
  gap:8px
}

.upgrade-card {
  display:grid;
  grid-template-columns:190px 1fr;
  gap:20px;
  background:#1b303a;
  border:1px solid #41616d;
  border-radius:13px;
  padding:20px
}

.upgrade-card strong {
  display:block;
  font:800 28px Manrope
}

.upgrade-card small {
  display:block;
  color:var(--muted)
}

.upgrade-parts {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.upgrade-parts>span {
  min-width:190px;
  background:#101e29;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px
}

.flow-columns {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}

.flow-columns>div,.worker-card,.climate-map {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px
}

.flow-columns p {
  font-size:13px;
  border-top:1px solid var(--line);
  padding:9px 0;
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap
}

.flow-columns img {
  width:36px;
  height:36px;
  object-fit:contain
}

.worker-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px
}

.worker-card>* {
  display:block
}

.worker-card span,.worker-card small {
  color:var(--muted);
  font-size:12px;
  margin-top:5px
}

.worker-card em {
  color:var(--gold);
  font-size:11px;
  margin-top:7px;
  font-style:normal
}

.climate-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:12px
}

.climate-map {
  margin:0
}

.climate-map svg {
  display:block;
  width:100%;
  max-height:300px
}

.climate-map figcaption {
  display:flex;
  justify-content:space-between;
  gap:8px
}

.climate-map small {
  display:block;
  color:var(--muted)
}

.layout-controls {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:18px
}

.plot-picker {
  display:grid;
  grid-template-columns:repeat(4,minmax(86px,1fr));
  gap:8px
}

.plot-picker button {
  min-height:58px;
  background:#14212b;
  border:1px solid var(--line);
  color:var(--muted);
  padding:9px;
  border-radius:9px
}

.plot-picker button b,.plot-picker small {
  display:block
}

.plot-picker button.active {
  background:#25485a;
  border-color:var(--blue);
  color:var(--text)
}

.plot-picker button.locked {
  opacity:.42;
  cursor:not-allowed
}

.layout-actions {
  background:var(--panel);
  border:1px solid var(--line);
  padding:15px;
  border-radius:10px
}

.layout-actions label[for="layout-spacing"] {
  display:block;
  margin-top:12px
}

.layout-actions select {
  width:100%;
  margin-top:6px
}

.layout-actions .primary {
  margin:12px 0
}

.layout-scroll {
  overflow:auto;
  max-height:76vh;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0b141d;
  padding:16px
}

.layout-canvas {
  position:relative;
  width:840px;
  height:1120px;
  background-color:#0d1821;
  background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);
  background-size:14px 14px;
  touch-action:none
}

.land-plot {
  position:absolute;
  border:2px dashed #44535e;
  background:#141f27;
  pointer-events:none
}

.land-plot.available {
  border-color:#527080
}

.land-plot.unlocked {
  border-color:#72bdd9;
  background:#203b48
}

.land-plot.locked {
  opacity:.42
}

.land-plot span {
  position:absolute;
  right:8px;
  bottom:7px;
  color:#ffffff82;
  font-size:14px;
  font-weight:800
}

.land-plot small {
  position:absolute;
  left:8px;
  top:7px;
  color:#ffffff55;
  font-size:11px
}

.placed {
  position:absolute;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3px;
  background:#67bfe0b8;
  border:1px solid #c4efff;
  color:white;
  border-radius:4px;
  overflow:hidden;
  cursor:grab;
  user-select:none;
  box-shadow:0 2px 7px #0006
}

.placed b {
  font-size:12px;
  line-height:1.15
}

.placed small {
  font-size:10px;
  line-height:1.15
}

.placed.bad-env {
  background:#d87866d6
}

.placed.climate-device {
  background:#f0c661e8;
  color:#19232b
}

.climate-range {
  position:absolute;
  z-index:2;
  border:2px solid #ffffff70;
  background:#ffffff0b;
  pointer-events:none
}

.climate-range.heat-furnace {
  background:#ef8c4d22;
  border-color:#ef9a62
}

.climate-range.cooling-unit {
  background:#5cc4ff22;
  border-color:#72c8ff
}

.climate-range.sunlamp {
  background:#ffe66b22;
  border-color:#f7df71
}

.access-strip {
  position:absolute;
  z-index:3;
  border:1px dashed var(--gold);
  background:#f4d18b26;
  color:var(--gold);
  font-size:9px;
  display:flex;
  align-items:center;
  justify-content:center
}

.layout-status {
  margin-top:10px;
  color:var(--muted)
}

@media(max-width:740px) {
  .production-grid,.flow-columns,.climate-grid,.upgrade-card,.layout-controls {
    grid-template-columns:1fr
  }
  .plot-picker {
    grid-template-columns:repeat(4,minmax(64px,1fr))
  }
}

.worker-grid {
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))
}

.worker-card>span,.worker-card>small {
  color:var(--muted);
  font-size:12px;
  margin-top:5px
}

.aniimo-options {
  display:flex!important;
  gap:7px;
  margin-top:10px;
  overflow-x:auto;
  padding-bottom:3px
}

.aniimo-options>span {
  display:block;
  min-width:50px;
  text-align:center
}

.aniimo-options .aniimo-icon {
  display:block;
  width:46px;
  height:46px;
  object-fit:contain;
  margin:auto;
  border-radius:10px;
  background:#0d1821
}

.aniimo-options small {
  display:block;
  color:var(--muted);
  font-size:9px;
  line-height:1.1;
  margin-top:3px
}

.coin-icon {
  display:inline-block;
  width:1em!important;
  height:1em!important;
  object-fit:contain!important;
  margin:0 .24em 0 0!important;
  vertical-align:-.12em;
  flex:none
}

.metric strong {
  display:flex;
  align-items:center
}

.metric strong .coin-icon {
  width:30px!important;
  height:30px!important
}

.profit {
  display:inline-flex;
  align-items:center
}

.flow-columns .coin-icon {
  width:18px!important;
  height:18px!important
}

.upgrade-summary {
  align-self:center
}

.upgrade-summary>span {
  font-size:11px;
  letter-spacing:1.6px;
  color:var(--blue);
  font-weight:800
}

.upgrade-parts {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  align-items:stretch
}

.upgrade-part {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0!important
}

.upgrade-part>img,.upgrade-part>.muted {
  width:46px!important;
  height:46px!important;
  object-fit:contain;
  flex:none
}

.upgrade-part>span {
  min-width:0
}

.upgrade-part b {
  display:block;
  font-size:14px
}

.upgrade-part small {
  font-size:12px;
  line-height:1.4;
  margin-top:3px
}

.material-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,320px));
  gap:10px
}

.material-cards>div {
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--raised);
  border:1px solid var(--line);
  padding:12px 15px;
  border-radius:10px
}

.material-cards img {
  width:50px;
  height:50px;
  object-fit:contain
}

.material-cards span,.material-cards small {
  display:block
}

.material-cards small {
  color:var(--muted);
  margin-top:2px
}

.climate-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:14px
}

.climate-map {
  flex:0 1 560px;
  width:100%;
  max-width:560px;
  padding:16px
}

.climate-visual {
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(150px,210px);
  gap:14px;
  align-items:center
}

.climate-map svg {
  width:100%;
  max-height:none;
  min-height:300px
}

.climate-map figcaption {
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:12px;
  align-items:flex-start
}

.climate-map figcaption small {
  max-width:58%;
  text-align:right
}

.climate-key,.layout-legend {
  display:flex;
  flex-direction:column;
  gap:8px
}

.climate-key>div,.layout-legend>div {
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px;
  border-radius:8px;
  background:#101e29
}

.climate-key i,.layout-legend i {
  display:block;
  width:18px;
  height:18px;
  border-radius:4px;
  border:1px solid #ffffff55;
  box-shadow:inset 0 0 0 1px #0002;
  flex:none
}

.climate-key span,.climate-key b,.climate-key small,.layout-legend span,.layout-legend b,.layout-legend small {
  display:block
}

.climate-key b,.layout-legend b {
  font-size:12px;
  line-height:1.25
}

.climate-key small,.layout-legend small {
  font-size:10px;
  line-height:1.3;
  color:var(--muted);
  margin-top:2px
}

.layout-workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:14px;
  align-items:start
}

.layout-preview {
  display:grid;
  gap:8px;
  margin-top:4px
}

.layout-preview-scroll {
  overflow:auto;
  max-height:70vh;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0b141d;
  padding:12px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain
}

.layout-preview-canvas {
  touch-action:none;
  cursor:default
}

.layout-preview-canvas .placed,
.layout-preview-canvas .land-plot {
  pointer-events:none
}

.layout-preview-status {
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#142630;
  color:var(--muted);
  font-size:11px;
  line-height:1.4
}

@media(max-width:740px) {
  .layout-preview-scroll {
    max-height:60dvh;
    padding:8px
  }
}

.layout-scroll {
  padding:18px;
  min-height:520px
}

.layout-canvas {
  width:1440px;
  height:1080px;
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px),linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);
  background-size:18px 18px,18px 18px,4.5px 4.5px,4.5px 4.5px
}

.layout-legend {
  position:sticky;
  top:14px;
  max-height:76vh;
  overflow:auto;
  padding:14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px
}

.placed {
  padding:0;
  background:var(--block-color)!important;
  border:2px solid #e8f8ffb8;
  border-radius:5px;
  opacity:.88;
  transition:opacity .12s,filter .12s;
  box-shadow:0 3px 8px #0008
}

.placed:hover {
  opacity:1;
  filter:brightness(1.15);
  z-index:8
}

.placed.bad-env {
  outline:4px solid #ff665c;
  outline-offset:1px
}

.placed.climate-device {
  border:3px solid #fff;
  color:#19232b;
  opacity:1
}

.access-strip {
  background:repeating-linear-gradient(135deg,#f4d18b38 0 5px,#f4d18b10 5px 10px)
}

.layout-status {
  padding:10px 13px;
  background:#142630;
  border:1px solid var(--line);
  border-radius:9px
}

.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #7ecbfaaa
}

.plot-picker button,.secondary,.segmented button {
  transition:background .15s,border-color .15s,transform .15s
}

.plot-picker button:not(:disabled):hover,.secondary:hover {
  border-color:var(--blue);
  background:#223a49
}

.section-head {
  padding-bottom:4px;
  border-bottom:1px solid #ffffff0d
}

@media(max-width:1120px) {
  .layout-workspace {
    grid-template-columns:1fr
  }
  .layout-legend {
    position:static;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    max-height:none
  }
  .climate-grid {
    grid-template-columns:1fr
  }
}

@media(max-width:740px) {
  .upgrade-parts,.material-cards {
    grid-template-columns:1fr
  }
  .climate-visual {
    grid-template-columns:1fr
  }
  .climate-key {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .climate-map figcaption {
    display:block
  }
  .climate-map figcaption small {
    max-width:none;
    text-align:left;
    margin-top:5px
  }
  .layout-legend {
    grid-template-columns:1fr
  }
  .layout-scroll {
    padding:10px
  }
  .metric strong .coin-icon {
    width:25px!important;
    height:25px!important
  }
}

.metric small,.note,.recipe-stats strong {
  align-items:center
}

.metric small .coin-icon,.note .coin-icon,.recipe-stats .coin-icon,.num .coin-icon {
  width:18px!important;
  height:18px!important
}

.item-card span .coin-icon {
  display:inline-block!important;
  width:18px!important;
  height:18px!important;
  margin:0 4px 0 0!important;
  vertical-align:-4px
}

.worker-card {
  position:relative;
  border-top:3px solid var(--ability-color);
  padding-top:11px
}

.worker-ability {
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:2px
}

.worker-ability b {
  font-size:15px
}

.worker-ability b span {
  color:var(--ability-color)!important
}

.worker-ability>img {
  width:34px;
  height:34px;
  object-fit:contain;
  flex:none
}

.worker-card>span {
  margin-top:0
}

.num.profit .coin-icon {
  vertical-align:-4px
}

.layout-canvas {
  background-color:#0d1821;
  background-image: linear-gradient(#ffffff14 1px,transparent 1px), linear-gradient(90deg,#ffffff14 1px,transparent 1px), linear-gradient(#ffffff07 1px,transparent 1px), linear-gradient(90deg,#ffffff07 1px,transparent 1px);
  background-size:18px 18px,18px 18px,4.5px 4.5px,4.5px 4.5px;
}

:root {
  --planner-accent:#6c3baa;
  --planner-accent-hover:#8050bd;
  --planner-accent-soft:#6c3baa2e
}

header {
  background:linear-gradient(180deg,#14202b 0%,#111b25 100%);
  border-bottom-color:#2b3946
}

nav {
  background:#0d1720;
  border:1px solid #263541;
  border-radius:12px;
  padding:4px;
  gap:3px
}

nav button {
  border-radius:8px;
  padding:10px 14px;
  transition:background .15s,color .15s,transform .15s
}

nav button:hover {
  background:#ffffff08;
  color:var(--text)
}

nav button.active {
  background:var(--planner-accent);
  color:#fff;
  box-shadow:0 5px 16px #0004
}

.version {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:10px;
  letter-spacing:.75px;
  opacity:.82;
  white-space:nowrap;
  line-height:1.15
}

button.version {
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:3px 0;
  margin:0;
  font-family:inherit;
  cursor:pointer;
  text-align:right
}
button.version:hover,button.version:focus-visible {opacity:1;color:#fff}
button.version:focus-visible {outline:2px solid var(--planner-accent);outline-offset:4px;border-radius:5px}

.version small {
  font-size:9px;
  letter-spacing:.02em;
  opacity:.82;
  text-transform:none
}

.primary {
  background:var(--planner-accent);
  color:#fff;
  box-shadow:0 6px 18px #0003;
  transition:background .15s,transform .15s,box-shadow .15s
}

.primary:hover:not(:disabled) {
  background:var(--planner-accent-hover);
  transform:translateY(-1px);
  box-shadow:0 8px 20px #0005
}

.level-buttons button.active,.segmented button.active {
  background:var(--planner-accent);
  border-color:var(--planner-accent);
  color:#fff
}

.switch input:checked+span {
  background:var(--planner-accent)
}

input[type=range],.check input {
  accent-color:var(--planner-accent)
}

.plot-picker button.active {
  background:#39264f;
  border-color:#8a5bc4;
  color:#fff
}

.plot-picker button:not(:disabled):hover,.secondary:hover {
  border-color:#8a5bc4;
  background:#241d31
}

button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid #c4a6e8;
  outline-offset:3px
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}

.worker-card {
  padding:12px 14px 13px
}

.worker-jobs {
  display:grid!important;
  gap:4px;
  margin:5px 0 3px
}

.worker-job {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:8px;
  padding:4px 0;
  border-bottom:1px solid #ffffff0a
}

.worker-job:last-child {
  border-bottom:0
}

.worker-job span {
  margin:0!important;
  color:#dbe6ee!important;
  font-size:11.5px!important;
  line-height:1.25
}

.worker-job span b {
  color:#fff
}

.worker-job small {
  margin:0!important;
  color:var(--muted)!important;
  font-size:10px!important;
  line-height:1.25;
  text-align:right;
  white-space:nowrap
}

.worker-job small b {
  color:#d9c1f5;
  font-weight:700
}

.aniimo-options {
  margin-top:8px
}

.aniimo-options .aniimo-icon {
  width:46px;
  height:46px;
  border-radius:50%;
  background:#0d1821;
  border:1px solid #ffffff18;
  overflow:hidden
}

.worker-card em {
  display:block!important;
  margin-top:8px!important;
  padding-top:7px;
  border-top:1px solid #ffffff0b;
  color:#b9a7cc!important;
  font-size:10.5px!important;
  line-height:1.35
}

@media(max-width:1250px) {
  nav button {
    padding:9px 10px;
    font-size:12px
  }
  .version {
    font-size:9px
  }
}

@media(max-width:740px) {
  .worker-job {
    grid-template-columns:1fr
  }
  .worker-job small {
    text-align:left;
    white-space:normal
  }
}

.food-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(135deg,#182b37,#172633);
  border:1px solid #39505e;
  border-radius:12px;
  padding:13px 16px;
  margin-bottom:12px
}

.food-strip-title>span {
  display:block;
  font-weight:800;
  font-size:15px
}

.food-strip-title small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px
}

.food-items {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap
}

.food-item {
  display:flex;
  align-items:center;
  gap:8px;
  background:#101e29;
  border:1px solid var(--line);
  border-radius:9px;
  padding:7px 10px
}

.food-item>img {
  width:34px;
  height:34px;
  object-fit:contain
}

.food-item>span {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:7px;
  font-size:12px
}

.food-item>span>small {
  flex:0 0 100%;
  color:#9eafbc;
  font-size:10px;
  line-height:1.2
}

.food-item b {
  font-size:14px;
  color:#fff
}

.flow-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.flow-card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  min-width:0
}

.flow-card h3 {
  margin:0 0 10px;
  font-size:16px
}

.compact-flow {
  border:0;
  border-radius:0;
  background:transparent
}

.compact-flow table {
  font-size:12.5px
}

.compact-flow th {
  font-size:10px;
  letter-spacing:.35px;
  color:var(--muted)
}

.compact-flow td,.compact-flow th {
  padding:10px 8px
}

.compact-flow td:first-child {
  display:flex;
  align-items:center;
  gap:7px
}

.compact-flow td:first-child>img {
  width:31px;
  height:31px;
  object-fit:contain;
  flex:none
}

.compact-flow .coin-icon {
  width:17px!important;
  height:17px!important
}

.flow-total td {
  border-top:1px solid #ffffff22!important;
  background:#101e294d
}

.bonus-output-card {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px
}

.bonus-output-card>div {
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--raised);
  border:1px solid var(--line);
  padding:12px 14px;
  border-radius:10px
}

.bonus-output-card>div>img {
  width:52px;
  height:52px;
  object-fit:contain;
  flex:none
}

.bonus-output-card span,.bonus-output-card small {
  display:block
}

.bonus-output-card small {
  color:var(--muted);
  margin-top:3px
}

.bonus-output-card .bonus-total {
  justify-content:space-between;
  border-color:#6c3baa88;
  background:#6c3baa18
}

.bonus-total>strong {
  font-size:22px;
  color:#e7d6fb
}

.upgrade-summary small b {
  display:inline;
  font:inherit;
  color:#fff
}

.upgrade-part small {
  color:var(--muted)
}

@media(max-width:880px) {
  .flow-pair {
    grid-template-columns:1fr
  }
  .food-strip {
    align-items:flex-start;
    flex-direction:column
  }
  .food-items {
    justify-content:flex-start
  }
}

@media(min-width:1101px) {
  .shell {
    max-width:2200px;
    grid-template-columns:310px minmax(0,1fr)
  }
  .shell>aside {
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
    overflow-y:auto;
    padding:28px 26px;
    scrollbar-width:thin;
    background:var(--bg);
    z-index:6
  }
  main {
    padding:38px clamp(28px,3vw,68px) 72px
  }
  .product-row img {
    width:70px;
    height:70px
  }
  .product-row b {
    font-size:15px
  }
  .product-row p,.product-row .qty {
    font-size:13px
  }
  .production-card>h3 {
    font-size:16px
  }
  .metric strong {
    font-size:34px
  }
  .compact-flow table {
    font-size:14px
  }
  .compact-flow th {
    font-size:11px
  }
  .compact-flow td,.compact-flow th {
    padding:12px 10px
  }
  .compact-flow td:first-child>img {
    width:38px;
    height:38px
  }
  .flow-card h3 {
    font-size:18px
  }
  .food-strip-title>span {
    font-size:17px
  }
  .food-item>img {
    width:40px;
    height:40px
  }
}

.compact-flow table {
  table-layout:fixed
}

.compact-flow th:first-child,.compact-flow td:first-child {
  width:58%
}

.compact-flow th:nth-child(2),.compact-flow td:nth-child(2) {
  width:20%
}

.compact-flow th:nth-child(3),.compact-flow td:nth-child(3) {
  width:22%
}

.compact-flow td.num,.compact-flow th.num {
  text-align:right
}

.compact-flow td:first-child {
  min-width:0
}

.compact-flow .flow-total td:first-child {
  display:table-cell
}

.flow-total td:nth-child(2) {
  background:#101e294d
}

.flow-total td:last-child {
  text-align:right
}

.goal-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 8px
}

.goal-btn {
  background:#101c27;
  border:1px solid var(--line);
  color:#d7e3ea;
  border-radius:10px;
  padding:12px 10px;
  font-weight:700;
  line-height:1.25;
  min-height:54px;
  text-align:center
}

.goal-btn.active {
  background:#6C3BAA;
  border-color:#6C3BAA;
  color:#fff;
  box-shadow:0 0 0 1px #8a63be inset
}

.strategy-select-hidden {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}

.worker-grid {
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:12px
}

.worker-card {
  padding:14px 16px 15px
}

.worker-ability b {
  font-size:17px
}

.worker-ability>img {
  width:36px;
  height:36px
}

.worker-jobs {
  gap:8px;
  margin:8px 0 5px
}

.worker-job {
  display:block!important;
  padding:7px 0 9px;
  border-bottom:2px solid rgba(255,255,255,.08)
}

.worker-job:last-child {
  border-bottom:0;
  padding-bottom:4px
}

.worker-job-main {
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0
}

.worker-job-count {
  font-size:18px;
  font-weight:800;
  color:#fff;
  line-height:1;
  flex:none
}

.worker-job-role {
  margin:0!important;
  color:#edf5fb!important;
  font-size:14px!important;
  font-weight:650;
  line-height:1.28;
  min-width:0
}

.worker-job-personality {
  margin-top:5px;
  color:#b8c8d3;
  font-size:12.5px;
  line-height:1.2;
  text-align:right;
  padding-right:2px
}

.worker-job-personality b {
  color:#d9c1f5
}

.aniimo-options .aniimo-icon {
  width:48px;
  height:48px
}

.aniimo-options small {
  font-size:10px
}

.worker-card em {
  font-size:11.25px!important
}

.compact-flow table {
  table-layout:fixed;
  width:100%
}

.compact-flow col.item-col {
  width:54%
}

.compact-flow col.qty-col {
  width:18%
}

.compact-flow col.value-col {
  width:28%
}

.compact-flow td,.compact-flow th {
  padding:11px 10px
}

.compact-flow th {
  font-size:10.5px
}

.flow-item-cell {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

.flow-item-cell .item-link {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.compact-flow td:first-child {
  display:table-cell!important
}

.compact-flow td .coin-icon,.compact-flow .flow-total .coin-icon {
  vertical-align:-4px
}

.flow-total td:nth-child(2) {
  background:#101e294d
}

.flow-total td:nth-child(3) {
  text-align:right
}

@media(min-width:1500px) {
  .shell {
    max-width:2450px;
    grid-template-columns:330px minmax(0,1fr)
  }
  .shell>aside {
    padding-inline:28px
  }
  main {
    padding:38px 46px 70px
  }
  .metric strong {
    font-size:34px
  }
  .production-card>h3 {
    font-size:16px
  }
  .product-row b {
    font-size:15px
  }
  .compact-flow table {
    font-size:13.5px
  }
}

@media(max-width:900px) {
  .goal-grid {
    grid-template-columns:1fr
  }
  .worker-job-role {
    font-size:13px!important
  }
  .worker-job-personality {
    text-align:left
  }
}

.section-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:31px;
  height:27px;
  margin-left:8px;
  padding:0 8px;
  border-radius:999px;
  background:#6c3baa26;
  border:1px solid #8f62c6;
  color:#e7d6fb;
  font:800 14px/1 Manrope,sans-serif;
  vertical-align:2px
}

.compact-flow table {
  table-layout:fixed!important;
  width:100%!important
}

.compact-flow col.item-col {
  width:54%!important
}

.compact-flow col.qty-col {
  width:18%!important
}

.compact-flow col.value-col {
  width:28%!important
}

.compact-flow th,.compact-flow td {
  display:table-cell!important
}

.compact-flow th.num,.compact-flow td.num {
  text-align:right!important
}

.compact-flow td.profit {
  display:table-cell!important;
  text-align:right!important
}

.compact-flow td.profit .coin-icon,.compact-flow td.num .coin-icon {
  display:inline-block!important;
  margin-right:.24em!important;
  vertical-align:-.2em!important
}

.compact-flow .flow-total td {
  display:table-cell!important
}

.compact-flow .flow-total td:last-child {
  text-align:right!important
}

.personality-inline {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
  color:#d9c1f5;
  font-weight:700
}

.personality-inline.no-icon {
  color:#b8c8d3;
  font-weight:600
}

.personality-icon {
  width:20px;
  height:20px;
  object-fit:contain;
  image-rendering:pixelated;
  flex:none
}

.personality-fallback {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 4px;
  border-radius:999px;
  background:#25485a;
  color:#fff;
  font-weight:900;
  font-size:12px;
  line-height:1;
  flex:none
}

.worker-job {
  display:block!important;
  padding:9px 0 11px;
  border-bottom:2px solid rgba(255,255,255,.08)
}

.worker-job-main {
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0
}

.worker-job-count {
  font-size:19px;
  font-weight:900;
  color:#fff;
  line-height:1;
  flex:none
}

.worker-job-role {
  margin:0!important;
  color:#edf5fb!important;
  font-size:15px!important;
  font-weight:700;
  line-height:1.25;
  min-width:0
}

.worker-job-personality {
  margin-top:6px;
  color:#b8c8d3;
  font-size:13.5px;
  line-height:1.2;
  text-align:right;
  padding-right:2px;
  font-weight:600
}

.metric-money {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap
}

.metric-money .coin-icon {
  flex:none
}

.level-guide-table {
  table-layout:fixed;
  width:100%
}

.level-guide-table th:nth-child(1),.level-guide-table td:nth-child(1) {
  width:10%
}

.level-guide-table th:nth-child(2),.level-guide-table td:nth-child(2) {
  width:32%
}

.level-guide-table th:nth-child(3),.level-guide-table td:nth-child(3) {
  width:26%
}

.level-guide-table th:nth-child(4),.level-guide-table td:nth-child(4) {
  width:17%
}

.level-guide-table th:nth-child(5),.level-guide-table td:nth-child(5) {
  width:15%
}

.level-guide-table td.num,.level-guide-table th.num {
  text-align:right
}

.level-change-value {
  display:inline-block;
  min-width:92px;
  text-align:right;
  font-weight:700
}

.level-change-value.positive {
  color:#dfe9ff
}

.level-change-value.negative {
  color:#dfe9ff
}

.level-change-value.neutral {
  color:var(--muted)
}

.goal-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))!important
}

@media(max-width:620px) {
  .goal-grid {
    grid-template-columns:1fr!important
  }
}

.layout-zoom-controls {
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:8px;
  align-items:center;
  margin:12px 0 2px
}

.layout-zoom-controls .secondary {
  margin:0
}

.layout-zoom-value {
  justify-self:end;
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  min-width:48px;
  text-align:right
}

.layout-canvas-stage {
  position:relative;
  width:1440px;
  height:1080px
}

.layout-canvas {
  transform-origin:top left
}

.section-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 10px;
  margin-left:8px;
  border-radius:999px;
  background:#152734;
  border:1px solid var(--line);
  font-size:18px
}

@media(min-width:1500px) {
  .worker-job-role {
    font-size:15.5px!important
  }
  .worker-job-personality {
    font-size:14px
  }
  .flow-card h3 {
    font-size:18px
  }
  .compact-flow table {
    font-size:14px
  }
}

@media(max-width:900px) {
  .worker-job-personality {
    text-align:left
  }
  .personality-inline {
    justify-content:flex-start
  }
}

.production-card>h3 {
  padding:16px 18px 15px
}

.product-row img {
  width:68px;
  height:68px
}

.product-row b {
  font-size:15px
}

.product-row p,.product-row .qty {
  font-size:13px
}

.settings-subsection {
  padding:13px 0;
  border-top:1px solid var(--line)
}

.settings-subsection:first-of-type {
  border-top:0;
  padding-top:4px
}

.settings-subsection h3 {
  margin:0 0 4px;
  font-size:14px
}

.settings-subsection>.hint {
  margin:0 0 10px
}

.module-controls {
  display:grid;
  gap:8px
}

.module-control {
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#101e29
}

.module-control b,.module-control small {
  display:block
}

.module-control b {
  font-size:12px;
  color:var(--text)
}

.module-control small {
  margin-top:2px;
  font-size:10px;
  color:var(--muted)
}

.module-control select {
  margin:0;
  padding:7px 8px;
  font-size:11px
}

.recipe-toggle-list {
  display:grid;
  gap:6px;
  max-height:340px;
  overflow:auto;
  padding-right:2px
}

.recipe-toggle-row {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  margin:0;
  padding:7px 8px;
  border:1px solid #ffffff12;
  border-radius:8px;
  background:#101e2966;
  color:var(--text);
  cursor:pointer
}

.recipe-toggle-row:hover {
  background:#172a38
}

.recipe-toggle-row>img {
  width:34px;
  height:34px;
  object-fit:contain;
  margin:0
}

.recipe-toggle-row>span {
  min-width:0
}

.recipe-toggle-row b,.recipe-toggle-row small {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.recipe-toggle-row b {
  font-size:11.5px;
  font-weight:700;
  color:var(--text)
}

.recipe-toggle-row small {
  font-size:9.5px;
  color:var(--muted);
  margin-top:1px
}

.recipe-toggle-row input {
  accent-color:#6C3BAA
}

.avoid-recipes-details {
  margin-top:4px;
  border-top:1px solid var(--line)
}

.avoid-recipes-details>summary {
  font-weight:700
}

.avoid-recipes-details #avoid-search {
  margin:2px 0 9px;
  padding:8px 9px;
  font-size:11px
}

.recipe-module-note {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:5px
}

.recipe-module-note>span {
  font-size:10px;
  color:#d9c1f5;
  background:#6c3baa18;
  border:1px solid #6c3baa55;
  border-radius:999px;
  padding:2px 6px
}

.recipe-lock-btn {
  border:1px solid #7d5960;
  background:#2a1c21;
  color:#efb9c0;
  border-radius:6px;
  padding:3px 7px;
  font-size:10px;
  line-height:1.2
}

.recipe-lock-btn:hover {
  background:#3a242b
}

.level-guide-table td.profit {
  display:table-cell!important;
  text-align:right!important
}

.level-guide-table td.profit .metric-money {
  display:inline-flex!important;
  justify-content:flex-end!important
}

.level-guide-table td.level-change {
  display:table-cell!important;
  text-align:right!important
}

.level-guide-table th:nth-child(4),.level-guide-table td:nth-child(4),.level-guide-table th:nth-child(5),.level-guide-table td:nth-child(5) {
  font-variant-numeric:tabular-nums
}

.sidebar-dropdown {
  border-top:1px solid var(--line);
  margin-top:0;
  padding:0
}

.sidebar-dropdown>summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 0;
  font-weight:700;
  color:#d9e5ed
}

.sidebar-dropdown>summary>span {
  min-width:0
}

.summary-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:25px;
  height:22px;
  padding:0 7px;
  border:1px solid #74539d;
  border-radius:999px;
  background:#6c3baa24;
  color:#e5d6f6;
  font:800 11px/1 Manrope,sans-serif
}

.sidebar-dropdown>.hint {
  margin:0 0 9px
}

.sidebar-dropdown #avoid-search {
  margin:0 0 9px;
  padding:8px 9px;
  font-size:11px
}

.sidebar-dropdown .settings-subsection:first-of-type {
  padding-top:2px
}

.planner-settings-disclosure {
  margin:12px 0;
  padding:0 11px;
  border:1px solid #3a4654;
  border-radius:9px;
  background:linear-gradient(145deg,#192632,#151f29)
}

.planner-settings-disclosure>summary {
  display:flex!important;
  min-height:46px;
  padding:10px 0;
  color:#e5d6f6;
  list-style:none
}

.planner-settings-disclosure>summary::-webkit-details-marker {
  display:none
}

.planner-settings-disclosure>summary::after {
  content:"+";
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:none;
  border:1px solid #76549a;
  border-radius:7px;
  background:#6c3baa24;
  color:#d8c2ef;
  font-size:17px;
  line-height:1
}

.planner-settings-disclosure[open]>summary {
  border-bottom:1px solid #ffffff12
}

.planner-settings-disclosure[open]>summary::after {
  content:"−"
}

.planner-settings-disclosure>label:first-of-type {
  margin-top:12px
}

.recipe-settings-disclosure>summary {
  min-height:46px;
  padding:10px 0
}

.recipe-settings-disclosure>summary {
  grid-template-columns:auto minmax(0,1fr) 24px
}

.recipe-settings-disclosure>summary>.summary-count {
  justify-self:start;
  min-width:23px;
  margin:0
}

.recipe-settings-disclosure>summary>span {
  grid-column:2;
  min-width:0
}

.recipe-toggle-row small strong {
  display:inline;
  color:#d9c1f5;
  font-weight:700
}

.recipe-lock-dialog {
  max-width:620px;
  padding:26px
}

.lock-dialog-head {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px
}

.lock-dialog-head>img {
  width:68px;
  height:68px;
  object-fit:contain;
  flex:none
}

.lock-dialog-head h2 {
  margin:3px 0 2px;
  font-size:23px
}

.lock-dialog-head p {
  margin:0;
  color:var(--muted);
  font-size:13px
}

.lock-dialog-note {
  padding:13px 15px;
  margin:15px 0;
  border:1px solid var(--line);
  border-radius:10px;
  background:#101e29;
  color:#c7d4dc;
  font-size:13px;
  line-height:1.65
}

.lock-dialog-note b {
  color:#fff
}

.lock-dialog-actions {
  display:grid;
  grid-template-columns:1fr 1.45fr .8fr;
  gap:9px;
  margin-top:20px
}

.lock-dialog-actions button {
  width:auto!important;
  margin:0!important;
  justify-content:center;
  min-height:44px
}

.lock-dialog-actions .danger-soft {
  border-color:#7d5960;
  background:#2a1c21;
  color:#efb9c0
}

.lock-dialog-actions .lock-until-btn {
  background:#6C3BAA;
  color:#fff
}

@media(max-width:620px) {
  .lock-dialog-actions {
    grid-template-columns:1fr
  }
  .recipe-lock-dialog {
    padding:22px 18px
  }
}

.recipe-premium-tag {
  display:inline-flex;
  align-items:center;
  border:1px solid #d8ad45;
  background:#3b3014;
  color:#f6d56e;
  border-radius:999px;
  padding:3px 8px;
  font-size:10px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap
}

.dream-spark-link {
  display:inline;
  border:0;
  background:none;
  color:#cba4ff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  padding:0;
  font:inherit;
  font-weight:800;
  cursor:pointer
}

.dream-spark-link:hover {
  color:#e2caff
}

.dream-spark-info {
  margin:12px auto 4px;
  max-width:330px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:auto;
  max-height:440px;
  background:#101923
}

.dream-spark-info[hidden] {
  display:none
}

.dream-spark-info img {
  display:block;
  width:100%;
  height:auto;
  margin:0
}

.lock-until-btn[hidden] {
  display:none!important
}

#premium-count,#avoid-count {
  font-variant-numeric:tabular-nums
}

.recipe-lock-dialog[data-mode="premium"] .lock-dialog-actions {
  grid-template-columns:1fr .8fr
}

@media(max-width:620px) {
  .recipe-lock-dialog[data-mode="premium"] .lock-dialog-actions {
    grid-template-columns:1fr
  }
}

.setup-mode-switch {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:12px 0 14px
}

.setup-mode-switch button {
  background:#101c27;
  border:1px solid var(--line);
  color:#cbd8e1;
  border-radius:9px;
  padding:10px 8px;
  font-weight:700
}

.setup-mode-switch button.active {
  background:#6c3baa;
  border-color:#8f62c6;
  color:#fff
}

#advanced-setup-summary {
  padding:11px 0
}

#advanced-setup-summary .secondary {
  width:100%;
  margin-top:4px
}

.facility-no-level {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted)
}

.advanced-setup-dialog {
  width:min(1180px,calc(100vw - 34px));
  max-width:1180px;
  max-height:min(900px,calc(100vh - 34px));
  max-height:min(900px,calc(100dvh - 34px));
  padding:0;
  overflow:hidden;
  background:#111b25;
  border:1px solid #3b4d5b;
  border-radius:16px
}

/* Keep dialog actions reachable at every effective viewport height/zoom.
   The header/toolbar/footer stay in place and only the content area scrolls. */
.advanced-setup-dialog[open] {
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden
}

.advanced-setup-dialog .advanced-setup-head,
.advanced-setup-dialog .advanced-setup-toolbar {
  flex:0 1 auto;
  min-height:0;
  overflow:auto
}

.advanced-setup-dialog .advanced-setup-footer {
  flex:0 0 auto;
  min-height:0
}

.advanced-setup-dialog::backdrop {
  background:#030b13c7
}

.advanced-setup-head {
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--line);
  background:#14222e
}

.advanced-setup-head h2 {
  margin:5px 0 2px;
  font-size:24px
}

.advanced-setup-head p {
  margin:0;
  color:var(--muted);
  font-size:13px
}

.advanced-dialog-close {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:30px;
  line-height:1;
  padding:0 4px
}

.advanced-setup-toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  background:#101923
}

.advanced-setup-tabs {
  display:flex;
  gap:7px;
  overflow-x:auto;
  flex:1;
  padding-bottom:1px
}

.advanced-setup-tabs button {
  white-space:nowrap;
  background:#162532;
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:8px;
  padding:8px 11px;
  font-size:12px;
  font-weight:700
}

.advanced-setup-tabs button.active {
  background:#263f50;
  border-color:#5b859d;
  color:#dff4ff
}

.advanced-setup-toolbar>.secondary {
  flex:none
}

.advanced-setup-content {
  padding:18px 20px;
  overflow:auto;
  flex:1 1 auto;
  max-height:none;
  min-height:0;
  overscroll-behavior:contain
}

.advanced-card-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.advanced-facility-card {
  background:#1b222b;
  border:1px solid #27333e;
  border-radius:11px;
  padding:14px;
  min-width:0
}

.advanced-facility-card.unavailable {
  opacity:.48
}

.advanced-facility-card header {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px
}

.advanced-facility-card h3 {
  margin:0;
  font-size:14px;
  color:#fff
}

.advanced-facility-card header small {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px
}

.advanced-level-rows {
  display:grid;
  gap:8px
}

.advanced-level-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px;
  gap:8px;
  align-items:end
}

.advanced-level-row:has(>label:only-child) {
  grid-template-columns:1fr
}

.advanced-level-row label,.advanced-component-level {
  margin:0;
  color:var(--muted);
  font-size:10px
}

.advanced-level-row label span,.advanced-component-level span {
  display:block;
  margin-bottom:4px
}

.advanced-level-row input,.advanced-level-row select,.advanced-component-level select {
  padding:8px 9px;
  border-radius:7px;
  font-size:12px
}

.advanced-remove-row {
  width:28px;
  height:34px;
  border-radius:7px;
  border:1px solid #6c4650;
  background:#312229;
  color:#ffb9c1;
  font-weight:800
}

.advanced-add-level {
  margin-top:9px;
  border:0;
  background:transparent;
  color:var(--blue);
  padding:2px 0;
  font-size:11px;
  text-decoration:underline
}

.advanced-component-level {
  display:block
}

.advanced-setup-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 20px;
  border-top:1px solid var(--line);
  background:#14222e;
  position:relative;
  z-index:2
}

.advanced-setup-footer>div {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap
}

.advanced-setup-footer .primary {
  width:auto;
  margin:0;
  padding:10px 22px
}

.advanced-setup-footer .secondary {
  margin:0
}

#advanced-setup-status {
  color:#ffbd92
}

@media(max-width:980px) {
  .advanced-card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:660px) {
  .setup-mode-switch {
    grid-template-columns:1fr
  }
  .advanced-card-grid {
    grid-template-columns:1fr
  }
  .advanced-setup-toolbar {
    align-items:stretch;
    flex-direction:column
  }
  .advanced-setup-footer {
    align-items:stretch;
    flex-direction:column
  }
  .advanced-setup-footer>div {
    justify-content:flex-end
  }
}

.setup-mode-main {
  margin:16px 0 8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line)
}

.setup-mode-main button {
  min-height:58px;
  font-size:15px
}

.advanced-setup-dialog {
  width:min(1475px,calc(100vw - 24px));
  max-width:1475px;
  max-height:92vh;
  max-height:min(92dvh,calc(100dvh - 24px))
}

.advanced-setup-content {
  max-height:none;
  min-height:0
}

.advanced-card-grid {
  grid-template-columns:repeat(3,minmax(250px,1fr));
  gap:14px
}

.worker-job-meta {
  display:grid;
  gap:4px;
  margin-top:7px;
  text-align:right
}

.worker-job-trait {
  color:#d8e5ed;
  font-size:12.5px;
  font-weight:750
}

.worker-job-family {
  color:#f4d18b;
  font-size:12.5px;
  font-weight:750
}

.family-requirement {
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:6px 0 2px!important;
  padding:5px 7px;
  border-radius:7px;
  background:#f4d18b12;
  border:1px solid #f4d18b33;
  color:#f4d18b!important;
  font-size:11.5px!important
}

.family-requirement b {
  color:#f4d18b!important;
  font-size:11.5px!important
}

.family-requirement span {
  color:#c9d7e0!important;
  white-space:nowrap
}

@media(max-width:1180px) {
  .advanced-card-grid {
    grid-template-columns:repeat(2,minmax(230px,1fr))
  }
}

@media(max-width:760px) {
  .advanced-setup-dialog {
    width:calc(100vw - 12px);
    max-height:96vh;
    max-height:96dvh
  }
  .advanced-setup-content {
    min-height:0;
    max-height:none
  }
  .advanced-card-grid {
    grid-template-columns:1fr
  }
  .worker-job-meta {
    text-align:left
  }
  .family-requirement {
    align-items:flex-start;
    flex-direction:column
  }
}

.event-mode-toggle {
  margin-bottom:4px
}

.event-mode-toggle.disabled-option {
  opacity:.48
}

.event-mode-hint {
  margin:-2px 0 10px 29px;
  font-size:11px
}

.order-dock {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none
}

.order-dock>* {
  pointer-events:auto
}

.order-fab {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #74539d;
  background:#241b31;
  color:#efe5f9;
  border-radius:999px;
  padding:10px 13px 10px 16px;
  box-shadow:0 14px 35px #0008;
  font-weight:800
}

.order-fab b {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  background:#6c3baa;
  color:#fff;
  font:800 11px/1 Manrope,sans-serif
}

.order-fab.has-orders {
  border-color:#9c72cc;
  background:#312044
}

.order-panel {
  width:min(430px,calc(100vw - 24px));
  max-height:min(76vh,780px);
  overflow:auto;
  background:#111b25;
  border:1px solid #3c4d5b;
  border-radius:16px;
  box-shadow:0 18px 55px #000b;
  padding:16px
}

.order-panel[hidden] {
  display:none
}

.order-panel>header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line)
}

.order-panel h3 {
  margin:2px 0 0;
  font-size:19px
}

.order-close {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:27px;
  line-height:1;
  padding:0 2px
}

.order-intro {
  color:var(--muted);
  font-size:11.5px;
  line-height:1.5;
  margin:10px 0
}

.order-add {
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px auto;
  gap:7px;
  margin:10px 0 12px
}

.order-add input {
  margin:0;
  padding:9px 10px;
  font-size:12px
}

.order-add button {
  border:1px solid #8e64bd;
  background:#6c3baa;
  color:#fff;
  border-radius:8px;
  padding:0 12px;
  font-weight:800
}

.order-run-summary {
  border:1px solid #4d3d61;
  background:#1c1724;
  border-radius:11px;
  padding:11px 12px;
  margin:10px 0 12px
}

.order-run-summary>div:first-child {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline
}

.order-run-summary>div:first-child small {
  color:#cbb9df;
  font-size:10px;
  text-align:right
}

.order-run-summary p {
  margin:8px 0 0;
  font-size:11px;
  color:#c9d5dd;
  line-height:1.45
}

.order-run-summary ol {
  margin:9px 0 0;
  padding-left:20px;
  display:grid;
  gap:6px
}

.order-run-summary li {
  font-size:11px;
  color:#dfe8ee;
  line-height:1.42
}

.order-run-summary .order-rule {
  border-top:1px solid #ffffff13;
  padding-top:8px;
  color:var(--muted)
}

.order-list {
  display:grid;
  gap:8px
}

.order-card {
  position:relative;
  border:1px solid var(--line);
  background:#172430;
  border-radius:11px;
  padding:10px
}

.order-card-main {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 62px;
  align-items:center;
  gap:9px
}

.order-card-main>img {
  width:42px;
  height:42px;
  object-fit:contain
}

.order-card-main b {
  display:block;
  font-size:12.5px
}

.order-card-main input {
  margin:0;
  padding:7px 8px;
  text-align:center;
  font-size:12px
}

.order-status {
  display:inline-flex;
  margin-top:3px;
  border-radius:999px;
  padding:2px 6px;
  font-size:9px;
  font-weight:800
}

.order-status.ready {
  background:#183d30;
  color:#a3e5c1;
  border:1px solid #386253
}

.order-status.blocked {
  background:#3d261f;
  color:#ffc2a4;
  border:1px solid #7c4a38
}

.order-blocked-text {
  margin:8px 0;
  color:#e9b59e;
  font-size:10.5px;
  line-height:1.4
}

.order-mini-btn,.order-done {
  border:0;
  background:transparent;
  padding:3px 0;
  font-size:10px;
  text-decoration:underline;
  text-underline-offset:2px
}

.order-mini-btn {
  color:#cfa9ff;
  margin-right:12px
}

.order-done {
  color:#9eb0bf
}

.order-recipe-dialog .order-lock-actions {
  grid-template-columns:1.5fr 1fr .7fr
}

@media(max-width:620px) {
  .order-dock {
    right:8px;
    bottom:8px
  }
  .order-panel {
    width:calc(100vw - 16px);
    max-height:78vh
  }
  .order-add {
    grid-template-columns:1fr 65px
  }
  .order-add button {
    grid-column:1/-1;
    min-height:38px
  }
  .order-recipe-dialog .order-lock-actions {
    grid-template-columns:1fr
  }
}

#event-mode-option,#event-mode-hint {
  display:none!important
}

.event-center-btn {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:190px;
  border:1px solid #8b63b8;
  background:linear-gradient(135deg,#342047,#25172f);
  color:#f5ecff;
  border-radius:14px;
  padding:9px 12px;
  box-shadow:0 8px 24px #0005;
  text-align:left
}

.event-center-btn img {
  width:38px;
  height:38px;
  object-fit:contain;
  flex:0 0 auto
}

.event-center-btn span {
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.15
}

.event-center-btn b {
  font-size:14px
}

.event-center-btn small {
  margin-top:4px;
  color:#c9b6df;
  font-size:10px;
  font-weight:600
}

.event-center-btn strong {
  margin-left:auto;
  min-width:42px;
  text-align:center;
  border-radius:999px;
  padding:5px 7px;
  background:#6b3aa4;
  color:white;
  font:800 10px/1 Manrope,sans-serif
}

.event-center-btn.event-active {
  border-color:#c38af5;
  background:linear-gradient(135deg,#4b2869,#2d183e)
}

.event-center-btn.event-locked {
  opacity:.72
}

.event-center-dialog {
  width:min(1120px,calc(100vw - 28px));
  max-width:1120px;
  max-height:92vh;
  padding:0;
  overflow:hidden;
  background:#111a24;
  border:1px solid #5c456f;
  border-radius:20px
}

.event-center-dialog::backdrop {
  background:#03060bd4
}

.event-dialog-head {
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 24px;
  background:linear-gradient(135deg,#25182f,#17212c);
  border-bottom:1px solid #4d3b5d
}

.event-dialog-head>div:first-child {
  min-width:0
}

.event-dialog-head h2 {
  margin:3px 0 2px;
  font-size:25px
}

.event-dialog-head p {
  margin:0;
  color:#b9a9ca;
  font-size:12px
}

.event-currency-box {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid #6e5282;
  border-radius:12px;
  background:#191222
}

.event-currency-box img {
  width:38px;
  height:38px;
  object-fit:contain
}

.event-currency-box label {
  margin:0;
  color:#cdbadd;
  font-size:10px
}

.event-currency-box input {
  display:block;
  width:130px;
  margin-top:3px;
  padding:5px 8px;
  border-radius:7px;
  font-size:18px;
  font-weight:800;
  color:#fff;
  background:#0e1118;
  border:1px solid #604875
}

.event-dialog-close {
  border:0;
  background:transparent;
  color:#c9b9d8;
  font-size:30px;
  line-height:1;
  padding:4px 6px
}

.event-tabs {
  display:flex;
  gap:8px;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  background:#121d27
}

.event-tabs button {
  border:1px solid #3e4d5b;
  background:#172632;
  color:#b8c8d3;
  border-radius:9px;
  padding:9px 15px;
  font-weight:750
}

.event-tabs button.active {
  border-color:#8d62bb;
  background:#43275d;
  color:#fff
}

.event-dialog-body {
  padding:18px 22px 24px;
  overflow:auto;
  max-height:calc(92vh - 145px)
}

.event-mode-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  margin-bottom:16px;
  border:1px solid #563f6d;
  background:#1d1725;
  border-radius:12px
}

.event-mode-row label {
  margin:0
}

.event-mode-row small {
  color:#b9a9ca;
  text-align:right;
  max-width:460px
}

.event-subhead {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin:22px 0 10px
}

.event-subhead h3 {
  margin:0;
  font-size:17px
}

.event-subhead p {
  margin:3px 0 0;
  color:var(--muted);
  font-size:11px
}

.event-subhead .secondary {
  white-space:nowrap
}

.event-order-list,.event-task-list {
  display:grid;
  gap:8px
}

.event-order-row,.event-task-row {
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 150px auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  background:#172430;
  border:1px solid #324553;
  border-radius:11px
}

.event-order-row>img {
  width:48px;
  height:48px;
  object-fit:contain
}

.event-order-name b,.event-task-row b {
  display:block
}

.event-order-name small,.event-task-row small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:2px
}

.event-order-row label,.event-task-row label {
  margin:0;
  font-size:10px;
  color:#baa9ca
}

.event-order-row input,.event-task-row input {
  margin-top:3px;
  padding:6px 7px;
  font-size:13px
}

.event-task-row {
  grid-template-columns:minmax(0,1fr) 150px auto
}

.event-task-row.done {
  opacity:.58
}

.event-complete-btn {
  border:1px solid #6d4d90;
  background:#5b3282;
  color:#fff;
  border-radius:8px;
  padding:8px 11px;
  font-weight:800;
  white-space:nowrap
}

.event-complete-btn:disabled {
  opacity:.55;
  cursor:default
}

.event-empty {
  padding:18px;
  border:1px dashed #405260;
  border-radius:10px;
  color:var(--muted);
  font-size:12px
}

.event-unlock-summary {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
  padding:11px 13px;
  border-radius:10px;
  background:#172430;
  border:1px solid var(--line)
}

.event-unlock-summary span {
  color:#d3bdf0;
  font-size:12px
}

.event-unlock-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.event-unlock-card {
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid #394b59;
  border-radius:12px;
  background:#172430
}

.event-unlock-card>img {
  width:62px;
  height:62px;
  object-fit:contain
}

.event-unlock-card small,.event-furniture-card small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}

.event-unlock-card button,.event-furniture-card button {
  border:1px solid #75529c;
  background:#57317b;
  color:#fff;
  border-radius:8px;
  padding:8px 10px;
  font-size:11px;
  font-weight:800
}

.event-unlock-card button:disabled,.event-furniture-card button:disabled {
  opacity:.62
}

.event-unlock-card.owned,.event-furniture-card.owned {
  border-color:#386253;
  background:#153027
}

.event-footnote {
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
  margin:14px 2px 0
}

.event-furniture-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}

.event-furniture-card {
  overflow:hidden;
  border:1px solid #394b59;
  border-radius:12px;
  background:#172430;
  padding-bottom:10px
}

.event-furniture-card>img {
  display:block;
  width:100%;
  aspect-ratio:275/350;
  object-fit:cover;
  object-position:top
}

.event-furniture-card>div {
  padding:8px 9px 4px;
  min-height:54px
}

.event-furniture-card b {
  display:block;
  font-size:11px;
  line-height:1.3
}

.event-furniture-card button {
  margin:4px 9px 0;
  width:calc(100% - 18px)
}

.order-panel {
  width:min(520px,calc(100vw - 24px));
  padding:18px
}

.order-panel h3 {
  font-size:21px
}

.order-intro {
  font-size:13px;
  line-height:1.55
}

.order-add {
  grid-template-columns:minmax(0,1fr) 78px auto
}

.order-search-wrap {
  position:relative
}

.order-search-wrap>input {
  width:100%
}

.order-suggestions {
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:calc(100% + 4px);
  max-height:320px;
  overflow:auto;
  background:#111b25;
  border:1px solid #735496;
  border-radius:10px;
  box-shadow:0 14px 35px #000b;
  padding:5px
}

.order-suggestions[hidden] {
  display:none
}

.order-suggestions button {
  display:flex;
  width:100%;
  align-items:center;
  gap:9px;
  padding:8px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#eaf2f8;
  text-align:left
}

.order-suggestions button:hover {
  background:#2c2039
}

.order-suggestions img {
  width:38px;
  height:38px;
  object-fit:contain
}

.order-suggestions span {
  display:block;
  font-size:13px;
  font-weight:700
}

.order-suggestions small {
  display:block;
  color:#9eb0bf;
  font-size:10px;
  margin-top:2px
}

.order-card {
  padding:12px
}

.order-card-main {
  grid-template-columns:48px minmax(0,1fr) 70px
}

.order-card-main>img {
  width:48px;
  height:48px
}

.order-card-main b {
  font-size:14px
}

.order-card-reward {
  margin:8px 0 4px
}

.order-card-reward label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  color:#c7b3dc;
  font-size:11px
}

.order-card-reward input {
  width:100px;
  margin:0;
  padding:6px 8px
}

.order-card-actions {
  display:flex;
  gap:8px;
  margin-top:8px
}

.order-complete {
  border:1px solid #6a4d88;
  background:#533173;
  color:#fff;
  border-radius:7px;
  padding:6px 9px;
  font-size:11px;
  font-weight:800
}

.order-done {
  padding:6px 4px
}

.order-run-summary {
  display:none!important
}

.order-plan-section {
  margin:4px 0 2px
}

.order-plan-section>.section-head {
  margin-top:22px
}

.order-plan-card {
  border:1px solid #70518d;
  background:linear-gradient(145deg,#21192b,#18212b);
  border-radius:14px;
  padding:14px
}

.order-plan-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}

.order-plan-head b {
  font-size:15px
}

.order-plan-head small {
  display:block;
  color:#c7b4dc;
  font-size:11px;
  margin-top:2px
}

.order-switch-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}

.order-switch-row {
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
  background:#172430;
  border:1px solid #344b58;
  border-radius:10px
}

.order-switch-row>img {
  width:48px;
  height:48px;
  object-fit:contain
}

.order-switch-row b {
  font-size:12.5px;
  line-height:1.35
}

.order-switch-row small {
  display:block;
  margin-top:4px;
  color:#aebdc7;
  font-size:10px;
  line-height:1.35
}

.order-switch-row>span {
  font-size:11px;
  color:#d5c1e8;
  white-space:nowrap
}

.order-plan-warning {
  padding:12px;
  border:1px solid #7c4a38;
  background:#3a251f;
  border-radius:10px;
  color:#ffd0bb
}

.order-borrowed-row {
  background:#1c2631
}

.order-borrow-note {
  color:#d1b6ef;
  font-weight:700
}

@media(max-width:1180px) {
  .event-center-btn {
    min-width:160px
  }
  .event-furniture-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .order-switch-grid {
    grid-template-columns:1fr
  }
}

@media(max-width:760px) {
  .event-center-btn {
    width:100%;
    margin:10px 0
  }
  .event-center-dialog {
    width:calc(100vw - 12px);
    max-height:96vh
  }
  .event-dialog-head {
    align-items:flex-start;
    flex-wrap:wrap;
    padding:16px
  }
  .event-currency-box {
    margin-left:0
  }
  .event-dialog-body {
    max-height:calc(96vh - 190px);
    padding:14px
  }
  .event-tabs {
    overflow:auto
  }
  .event-unlock-grid {
    grid-template-columns:1fr
  }
  .event-furniture-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .event-order-row,.event-task-row {
    grid-template-columns:44px minmax(0,1fr)
  }
  .event-task-row {
    grid-template-columns:1fr
  }
  .event-order-row label,.event-order-row button,.event-task-row label,.event-task-row button {
    grid-column:1/-1
  }
  .order-panel {
    width:calc(100vw - 16px)
  }
  .order-switch-row {
    grid-template-columns:44px minmax(0,1fr)
  }
  .order-switch-row>span {
    grid-column:2
  }
  .event-mode-row,.event-subhead {
    align-items:stretch;
    flex-direction:column
  }
  .event-mode-row small {
    text-align:left
  }
}

.order-dock {
  gap:10px
}

.order-fab-row {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  max-width:calc(100vw - 24px)
}

.order-quick-icons {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  max-width:min(58vw,620px);
  overflow-x:auto;
  padding:4px 1px;
  scrollbar-width:thin
}

.order-quick-icon {
  position:relative;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border:2px solid #6b526f;
  background:#172430;
  border-radius:14px;
  padding:4px;
  box-shadow:0 8px 22px #0008;
  transition:background .16s,border-color .16s,transform .16s,filter .16s
}

.order-quick-icon:hover {
  transform:translateY(-2px);
  border-color:#ae7fdf
}

.order-quick-icon.event-order {
  border-color:#9b67ce;
  background:#2a1c39
}

.order-quick-icon img {
  width:100%;
  height:100%;
  object-fit:contain
}

.order-quick-icon>span {
  position:absolute;
  right:-3px;
  bottom:-3px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#354653;
  border:2px solid #111b25;
  color:#d9e4eb;
  font-size:10px;
  font-weight:900
}

.order-quick-icon.completed {
  background:#173e2d;
  border-color:#57c987;
  filter:brightness(1.15);
  transform:scale(.94)
}

.order-quick-icon.completed>span {
  background:#3ba56c;
  color:white
}

.order-panel {
  overflow:auto
}

.order-suggestions {
  position:fixed!important;
  z-index:6000!important;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  max-height:320px
}

.event-order-add {
  display:grid;
  grid-template-columns:minmax(260px,1fr) 88px auto;
  gap:8px;
  margin:10px 0 14px;
  padding:12px;
  border:1px solid #493a5a;
  border-radius:11px;
  background:#171d29
}

.event-order-search-wrap {
  position:relative;
  min-width:0
}

.event-order-add input {
  margin:0;
  width:100%;
  padding:9px 10px
}

.event-order-add>button {
  border:1px solid #8e64bd;
  background:#6c3baa;
  color:#fff;
  border-radius:8px;
  padding:0 13px;
  font-weight:800
}

.event-order-suggestions {
  z-index:9000!important
}

.override-order-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:8px;
  margin:10px 0
}

.override-order-card {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  background:#15232d;
  border:1px solid #3a4e5c;
  border-radius:11px;
  padding:9px 10px
}

.override-order-card>img {
  width:42px;
  height:42px;
  object-fit:contain
}

.override-order-card b {
  display:block;
  font-size:12.5px
}

.override-order-card small {
  display:block;
  color:#9fb0bc;
  font-size:10px;
  margin-top:2px
}

.override-order-card.blocked {
  border-color:#7c4a38;
  background:#30211f
}

.override-complete {
  font-size:11px;
  white-space:nowrap
}

.order-plan-card {
  border-width:2px
}

.order-plan-head {
  padding:2px 2px 9px;
  border-bottom:1px solid #ffffff13
}

.order-switch-grid {
  margin-top:10px
}

.order-switch-row {
  display:block;
  padding:12px;
  border:1px solid #526674;
  background:#13212b
}

.order-switch-change {
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
  gap:9px;
  align-items:stretch
}

.order-switch-side {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:9px;
  align-items:center;
  border-radius:9px;
  padding:9px
}

.order-switch-side>img,.order-idle-icon {
  width:40px;
  height:40px;
  object-fit:contain
}

.order-idle-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#26343e;
  color:#8fa2af
}

.order-switch-side small {
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px;
  margin:0 0 3px
}

.order-switch-side b {
  display:block;
  font-size:13px;
  line-height:1.3
}

.order-switch-side em {
  display:block;
  font-size:9.5px;
  color:#aebdc7;
  font-style:normal;
  margin-top:2px
}

.order-switch-from {
  background:#342421;
  border:1px solid #75493f
}

.order-switch-from small {
  color:#ffb79e
}

.order-switch-to {
  background:#182e2a;
  border:1px solid #3f725f
}

.order-switch-to small {
  color:#83ddb2
}

.order-switch-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d1b0ef;
  font-size:25px;
  font-weight:900
}

.order-switch-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #ffffff10
}

.order-switch-meta>span {
  font-size:12px;
  font-weight:850;
  color:#d8c1ed;
  white-space:nowrap
}

.order-switch-meta small {
  color:#aebdc7;
  font-size:10px;
  line-height:1.35;
  text-align:right
}

@media(max-width:760px) {
  .event-order-add {
    grid-template-columns:minmax(0,1fr) 70px
  }
  .event-order-add>button {
    grid-column:1/-1;
    min-height:38px
  }
  .order-fab-row {
    max-width:calc(100vw - 16px)
  }
  .order-quick-icons {
    max-width:calc(100vw - 128px)
  }
  .order-switch-change {
    grid-template-columns:1fr
  }
  .order-switch-arrow {
    height:20px;
    transform:rotate(90deg)
  }
  .order-switch-meta {
    align-items:flex-start;
    flex-direction:column
  }
  .order-switch-meta small {
    text-align:left
  }
  .override-order-list {
    grid-template-columns:1fr
  }
}

.event-order-search-wrap .event-order-suggestions {
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 5px)!important;
  bottom:auto!important;
  width:auto!important;
  max-height:300px!important
}

.facility-name-cell {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

.facility-mini-icon {
  width:30px;
  height:30px;
  object-fit:contain;
  border-radius:8px;
  background:#0f1822;
  border:1px solid rgba(255,255,255,.06);
  padding:2px;
  flex:0 0 auto
}

.aniimo-options.grouped {
  display:block!important
}

.aniimo-options.grouped .aniimo-group {
  display:block;
  min-width:0;
  text-align:left;
  margin-top:8px
}

.aniimo-options.grouped .aniimo-group>b {
  display:block;
  color:#f1e7ff;
  font-size:11px;
  margin-bottom:4px
}

.aniimo-options.grouped .aniimo-group>span {
  display:inline-block;
  min-width:58px;
  text-align:center;
  margin:0 5px 5px 0
}

.flex-support-card .worker-ability>img {
  background:#0d1821;
  border-radius:9px;
  padding:4px
}

.event-unlock-card.owned button {
  opacity:1!important;
  background:#245a41;
  border-color:#4e9c7a
}

.event-unlock-card button[disabled] {
  opacity:.62
}

.event-currency-box img {
  background:#101a24;
  border-radius:10px;
  padding:4px
}

.order-card-reward label,.event-order-row label,.event-task-row label {
  display:grid;
  gap:4px
}

.metric-money.moonray-money img,.moonray-icon {
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))
}

.production-card h3 .facility-card-title {
  display:inline-flex;
  align-items:center;
  gap:10px
}

.production-card h3 .facility-card-title .facility-mini-icon {
  width:42px;
  height:42px;
  border-radius:10px;
  padding:4px;
  background:#102030
}

.facility-hint-inline {
  display:inline-flex;
  align-items:center;
  gap:6px
}

.facility-hint-inline .facility-mini-icon {
  width:18px;
  height:18px;
  padding:1px;
  border-radius:5px
}

.climate-visual-toggle {
  margin-bottom:10px
}

.climate-key-icon,.layout-legend-icon {
  width:22px;
  height:22px;
  object-fit:contain;
  border-radius:6px;
  background:#0f1822;
  border:1px solid rgba(255,255,255,.06);
  padding:2px;
  flex:none
}

.placed.icon-view {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.placed .placed-icon {
  width:88%;
  height:88%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))
}

.placed.climate-device .placed-icon {
  width:82%;
  height:82%
}

.production-card h3 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.production-card h3 small {
  margin-left:auto
}

.flow-card .moonray-money {
  justify-content:flex-end
}

.layout-actions .check {
  margin:0
}

.facility-mini-icon,.climate-key-icon,.layout-legend-icon {
  background:none!important;
  border:none!important;
  padding:0!important;
  box-shadow:none!important;
  border-radius:0!important
}

.facility-mini-icon {
  width:32px;
  height:32px;
  object-fit:contain;
  display:block
}

.production-card h3 .facility-card-title .facility-mini-icon {
  width:36px;
  height:36px
}

.facility-hint-inline .facility-mini-icon {
  width:15px;
  height:15px
}

.production-card h3 .facility-card-title {
  gap:8px
}

.facility-hint-inline {
  gap:5px
}

.layout-legend-icon,.climate-key-icon {
  width:20px;
  height:20px
}

.placed .placed-icon {
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));
  background:none
}

.placed.icon-view {
  background:var(--block-color)!important
}

.event-currency-box img,.metric-money img {
  background:none!important;
  padding:0!important;
  border-radius:0!important
}

.craft-product-facility {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
  min-height:64px
}

.craft-facility-icon {
  grid-row:1/3;
  grid-column:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px
}

.craft-facility-icon .facility-mini-icon {
  width:54px!important;
  height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  object-fit:contain
}

.craft-product-info {
  grid-column:2;
  min-width:0;
  align-self:center
}

.craft-product-title {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:14px;
  font-weight:700
}

.craft-product-title>img {
  width:30px!important;
  height:30px!important;
  object-fit:contain;
  flex:0 0 auto
}

.craft-product-title .item-link {
  min-width:0
}

.craft-facility-name {
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.25
}

.metric-money.moonray-money .moonray-icon,.event-currency-box img {
  object-fit:contain
}

.layout-legend-icon,.climate-key-icon {
  background:transparent!important
}

.craft-product-facility {
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:12px;
  align-items:center;
  min-height:68px
}

.craft-facility-icon {
  grid-row:1/3;
  grid-column:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px
}

.craft-facility-icon .facility-mini-icon {
  width:58px!important;
  height:58px!important;
  max-width:58px!important;
  max-height:58px!important;
  object-fit:contain
}

.craft-product-info {
  grid-column:2;
  min-width:0;
  align-self:center
}

.craft-product-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}

.craft-product-title {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-size:14px;
  font-weight:700;
  flex:1 1 auto
}

.craft-product-title>img {
  width:34px!important;
  height:34px!important;
  object-fit:contain;
  flex:0 0 auto
}

.craft-product-title .item-link {
  min-width:0
}

.craft-facility-name {
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.25
}

.recipe-module-note {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:0;
  flex:0 0 auto
}

.recipe-module-note>span {
  font-size:10px;
  color:#d9c1f5;
  background:#6c3baa18;
  border:1px solid #6c3baa55;
  border-radius:999px;
  padding:2px 6px
}

.recipe-module-note .recipe-premium-tag {
  background:#3b3014!important;
  border-color:#d8ad45!important;
  color:#f6d56e!important
}

.order-switch-side small {
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px;
  margin:0 0 3px
}

.order-switch-side em {
  display:block;
  font-size:10px;
  color:#aebdc7;
  font-style:normal;
  margin-top:3px
}

.advanced-card-title {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}

.advanced-card-title .facility-mini-icon {
  width:34px;
  height:34px;
  flex:0 0 auto
}

.craft-product-facility {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  column-gap:14px;
  align-items:center;
  min-height:70px
}

.craft-facility-icon {
  grid-row:1 / span 2;
  grid-column:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px
}

.craft-facility-icon .facility-mini-icon {
  width:60px!important;
  height:60px!important;
  max-width:60px!important;
  max-height:60px!important;
  object-fit:contain
}

.craft-product-info {
  grid-column:2;
  display:grid;
  gap:6px;
  min-width:0
}

.craft-product-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-width:0
}

.craft-product-title {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-size:14.5px;
  font-weight:800;
  line-height:1.2
}

.craft-product-title>img {
  width:36px!important;
  height:36px!important;
  object-fit:contain;
  flex:0 0 auto
}

.craft-product-title .item-link {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.craft-facility-name {
  margin-top:0;
  color:#9eb2c0;
  font-size:12.5px;
  line-height:1.2;
  font-weight:600
}

.recipe-module-note {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:0;
  flex:0 0 auto;
  align-self:start
}

.recipe-module-note>span,.recipe-module-note .recipe-premium-tag {
  font-size:10.5px!important;
  padding:3px 8px!important
}

.recipe-lock-btn {
  white-space:nowrap
}

@media(max-width:980px) {
  .craft-product-top {
    grid-template-columns:1fr
  }
  .recipe-module-note {
    justify-content:flex-start
  }
}

.worker-grid {
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:14px
}

.worker-card {
  padding:15px 16px 16px;
  background:linear-gradient(180deg,#15293a 0%,#132638 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.14)
}

.worker-ability {
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.06)
}

.worker-ability b {
  font-size:18px;
  line-height:1.15
}

.worker-ability>img {
  width:38px;
  height:38px
}

.worker-jobs {
  gap:10px;
  margin:8px 0 6px
}

.worker-job {
  display:block!important;
  padding:10px 0 11px;
  border-bottom:1px solid rgba(255,255,255,.08)
}

.worker-job:last-child {
  padding-bottom:6px
}

.worker-job-main {
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0
}

.worker-job-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:16px;
  font-weight:900;
  line-height:1;
  color:#fff;
  flex:none
}

.worker-job-role {
  margin:0!important;
  color:#edf5fb!important;
  font-size:14px!important;
  font-weight:700;
  line-height:1.25;
  min-width:0
}

.worker-job-meta {
  display:grid;
  gap:5px;
  margin-top:8px;
  text-align:right
}

.worker-job-personality {
  margin-top:0;
  color:#d1dde5;
  font-size:12.5px;
  line-height:1.25;
  font-weight:650
}

.worker-job-personality b {
  color:#d9c1f5
}

.worker-job-trait,.worker-job-family {
  font-size:12px;
  font-weight:760
}

.worker-job-trait {
  color:#e4edf3
}

.worker-job-family {
  color:#f4d18b
}

.aniimo-options {
  display:flex!important;
  gap:8px;
  margin-top:11px;
  overflow-x:auto;
  padding:4px 0 5px
}

.aniimo-options>span {
  display:block;
  min-width:58px;
  text-align:center
}

.aniimo-options .aniimo-icon {
  display:block;
  width:52px;
  height:52px;
  object-fit:contain;
  margin:auto;
  border-radius:50%;
  background:#0d1821;
  border:1px solid rgba(255,255,255,.12)
}

.aniimo-options small {
  display:block;
  color:#c6d4dd;
  font-size:10px;
  line-height:1.15;
  margin-top:4px
}

.aniimo-options.grouped .aniimo-group>b {
  font-size:11.5px;
  letter-spacing:.15px;
  color:#fff3c7
}

.worker-card em {
  display:block!important;
  margin-top:10px!important;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#b9a7cc!important;
  font-size:10.75px!important;
  line-height:1.4
}

@media(max-width:900px) {
  .worker-grid {
    grid-template-columns:1fr
  }
  .worker-job-meta {
    text-align:left
  }
  .worker-job-role {
    font-size:13.5px!important
  }
}

.craft-product-facility {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  column-gap:14px;
  align-items:center;
  min-height:70px;
}

.craft-facility-icon {
  grid-column:1;
  grid-row:1 / span 2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
}

.craft-facility-icon .facility-mini-icon {
  width:60px!important;
  height:60px!important;
  max-width:60px!important;
  max-height:60px!important;
  object-fit:contain;
}

.craft-product-info {
  grid-column:2;
  min-width:0;
  display:grid;
  gap:5px;
  align-content:center;
}

.craft-product-top {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  min-width:0;
  width:auto!important;
}

.craft-product-title {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:0 1 auto!important;
  width:auto!important;
  font-size:14.5px;
  font-weight:800;
  line-height:1.2;
}

.craft-product-title>img {
  width:38px!important;
  height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  object-fit:contain;
  flex:0 0 auto;
}

.craft-product-title .item-link {
  flex:0 1 auto;
  width:auto!important;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.craft-product-top .recipe-module-note {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  width:auto!important;
  gap:8px!important;
  margin:0!important;
  align-self:center!important;
}

.craft-product-top .recipe-module-note>span, .craft-product-top .recipe-module-note .recipe-premium-tag, .craft-product-top .recipe-lock-btn {
  white-space:nowrap;
}

.craft-facility-name {
  margin:0;
  color:#9eb2c0;
  font-size:12.5px;
  line-height:1.2;
  font-weight:600;
}

@media(max-width:980px) {
  .craft-product-top {
    flex-wrap:wrap!important;
    gap:8px 12px!important
  }
}

.brand-site-icon {
  width:38px;
  height:38px;
  object-fit:contain;
  flex:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.3))
}

.brand {
  gap:10px
}

.brand>span {
  line-height:1.05
}

.brand>span small {
  display:block;
  margin-top:3px
}

.worker-ability b {
  font-size:22px;
  line-height:1.15
}

.worker-job-role {
  font-size:17px!important;
  line-height:1.25
}

.worker-job-count {
  font-size:20px
}

.worker-card .worker-job-trait,.worker-card .worker-job-family {
  font-size:13px;
  color:#d2dde5;
  line-height:1.28;
  text-align:right
}

.worker-card .worker-job-family {
  color:#f1db97;
  font-weight:600
}

.flex-support-card .worker-ability>img {
  width:42px;
  height:42px;
  border-radius:50%;
  padding:2px;
  background:#0d1821;
  border:1px solid rgba(255,255,255,.12)
}

.site-footer {
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 22px 28px;
  color:#9fb1bf;
  font-size:13px
}

.site-footer a {
  color:#cfe4f1;
  text-decoration:none
}

.site-footer .made-by {
  color:#6C3BAA;
  font-weight:800
}

@media(max-width:900px) {
  .site-footer {
    padding:12px 16px 24px;
    font-size:12px
  }
  .worker-ability b {
    font-size:20px
  }
  .worker-job-role {
    font-size:15px!important
  }
  .worker-card .worker-job-trait,.worker-card .worker-job-family {
    text-align:left
  }
}

.site-footer {
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:5px!important;
  text-align:left!important;
  padding-right:170px!important
}

.site-footer>span {
  display:block!important
}

.worker-extra-note {
  display:inline!important;
  margin-left:8px!important;
  color:#9eb3c3!important;
  font-size:11px!important;
  font-weight:650!important;
  white-space:nowrap
}

.watering-support-job .worker-job-role {
  color:#82c9ff!important
}

@media(max-width:900px) {
  .site-footer {
    padding-right:18px!important
  }
  .worker-extra-note {
    display:block!important;
    margin:4px 0 0!important;
    white-space:normal
  }
}

.planner-update {
  width:100%;
  margin:14px 0 -8px;
  padding:12px 13px;
  border:1px solid #7fcfa2;
  background:linear-gradient(135deg,#17392f,#1b4437);
  color:#dff9ea;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  font:inherit;
  cursor:pointer;
  box-shadow:0 8px 24px #0002
}

.planner-update[hidden] {
  display:none
}

.planner-update span {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0
}

.planner-update b {
  font-size:13px
}

.planner-update small {
  font-size:11px;
  color:#add8c0;
  line-height:1.35
}

.planner-update strong {
  font-size:12px;
  white-space:nowrap;
  color:#bff3d2
}

.recipe-upgrade-tag {
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  background:#6b5b2b55;
  border:1px solid #b79a4e;
  color:#f1d58c;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.upgrade-craft-allocation {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px;
  margin:0 0 12px
}

.upgrade-craft-allocation>div {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border:1px solid #6b5b2b;
  background:#27271f;
  border-radius:10px
}

.upgrade-craft-allocation img {
  width:42px;
  height:42px;
  object-fit:contain
}

.upgrade-craft-allocation span {
  display:flex;
  flex-direction:column
}

.upgrade-craft-allocation b {
  font-size:13px;
  color:#f4e1ad
}

.upgrade-craft-allocation small {
  font-size:11px;
  color:#b9ad8b;
  margin-top:2px
}

.climate-placement-note {
  padding:10px 12px;
  border:1px solid #344b58;
  border-radius:9px;
  background:#142631;
  margin:0 0 12px
}

.climate-placement-note b {
  color:#d9eaf3
}

.layout-plan-mismatch {
  margin-bottom:14px
}

.plan-quick-nav {
  position:fixed;
  right:10px;
  top:50%;
  z-index:80;
  transform:translateY(-50%);
  display:flex;
  align-items:stretch;
  filter:drop-shadow(0 10px 22px #0007);
  transition:transform .2s ease
}

.plan-quick-nav[hidden] {
  display:none
}

.plan-quick-nav-inner {
  width:190px;
  max-height:65vh;
  overflow:auto;
  background:#14222d;
  border:1px solid #30414f;
  border-right:0;
  border-radius:12px 0 0 12px;
  padding:12px
}

.plan-quick-nav-inner>b {
  display:block;
  color:#9eb0bf;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  margin:1px 6px 8px
}

.plan-quick-nav-links {
  display:flex;
  flex-direction:column;
  gap:3px
}

.plan-quick-nav-links button {
  border:0;
  background:transparent;
  color:#c8d8e2;
  text-align:left;
  padding:7px 8px;
  border-radius:6px;
  font-size:12px
}

.plan-quick-nav-links button:hover {
  background:#263e4e;
  color:#7ecbfa
}

.plan-quick-nav-toggle {
  align-self:center;
  width:26px;
  height:58px;
  border:1px solid #30414f;
  border-right:0;
  border-radius:9px 0 0 9px;
  background:#1b2c39;
  color:#9eb0bf;
  font-size:22px;
  margin-right:-1px
}

.plan-quick-nav.collapsed {
  transform:translate(calc(190px + 10px),-50%)
}

.plan-quick-nav.collapsed .plan-quick-nav-toggle {
  transform:rotate(180deg)
}

@media(max-width:1200px) {
  .plan-quick-nav {
    display:none!important
  }
}

:root {
  --aniiland-royal-purple:#7851a9;
  --aniiland-royal-purple-bright:#9b74c7;
  --aniiland-royal-purple-soft:#c7afe4
}

.plan-quick-nav {
  right:0;
  filter:drop-shadow(0 16px 32px #0009);
  transition:transform .24s cubic-bezier(.2,.8,.2,1)
}

.plan-quick-nav-inner {
  width:218px;
  max-height:70vh;
  overflow:auto;
  background:linear-gradient(155deg,#211a2b 0%,#171d27 58%,#131b24 100%);
  border:1px solid #7851a999;
  border-right:0;
  border-radius:16px 0 0 16px;
  padding:13px 13px 14px;
  box-shadow:inset 1px 0 0 #a985d533,inset 0 1px 0 #ffffff0c
}

.plan-quick-nav-head {
  display:flex;
  align-items:center;
  gap:9px;
  padding:2px 4px 11px;
  margin-bottom:5px;
  border-bottom:1px solid #7851a944
}

.plan-quick-nav-mark {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:9px;
  background:linear-gradient(145deg,#8e65bf,#62408d);
  color:#f3eaff;
  box-shadow:0 5px 14px #7851a944;
  font-size:11px
}

.plan-quick-nav-head>div {
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0
}

.plan-quick-nav-head small {
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  color:#a98cc9
}

.plan-quick-nav-head b {
  font-size:12px;
  color:#efe6f8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.plan-quick-nav-links {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-left:5px
}

.plan-quick-nav-links:before {
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  bottom:10px;
  width:1px;
  background:linear-gradient(#7851a922,#8e65bf99,#7851a922)
}

.plan-quick-nav-links button {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  color:#d5cfe0;
  text-align:left;
  padding:7px 8px 7px 3px;
  border-radius:8px;
  font-size:12px;
  transition:background .15s ease,color .15s ease,transform .15s ease
}

.plan-quick-nav-links button i {
  position:relative;
  z-index:1;
  width:11px;
  height:11px;
  flex:0 0 11px;
  border:2px solid #7851a9;
  border-radius:50%;
  background:#171d27;
  box-shadow:0 0 0 2px #171d27
}

.plan-quick-nav-links button span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.plan-quick-nav-links button:hover {
  background:linear-gradient(90deg,#7851a92c,#7851a90c);
  color:#f5edff;
  transform:translateX(-2px)
}

.plan-quick-nav-links button:hover i {
  background:#9b74c7;
  border-color:#b798db
}

.plan-quick-nav-toggle {
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:42px;
  height:82px;
  border:1px solid #8c62bb;
  border-right:0;
  border-radius:14px 0 0 14px;
  background:linear-gradient(160deg,#8b5fc0,#684391);
  color:white;
  margin-right:-1px;
  box-shadow:-8px 0 24px #7851a933,inset 1px 1px 0 #ffffff22;
  transition:background .15s ease,transform .24s cubic-bezier(.2,.8,.2,1)
}

.plan-quick-nav-toggle:hover {
  background:linear-gradient(160deg,#9c73c9,#74509b)
}

.plan-quick-nav-toggle-icon {
  font-size:24px;
  line-height:20px;
  font-weight:500
}

.plan-quick-nav-toggle small {
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  opacity:.9
}

.plan-quick-nav.collapsed {
  transform:translate(218px,-50%)
}

.plan-quick-nav.collapsed .plan-quick-nav-toggle {
  transform:none
}

.plan-quick-nav.collapsed .plan-quick-nav-toggle-icon {
  transform:rotate(180deg)
}

.layout-plan-mismatch {
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin:0 0 18px;
  padding:17px 18px;
  border-width:1px;
  font-size:14px;
  line-height:1.55;
  box-shadow:0 9px 24px #0002
}

.layout-plan-mismatch-icon {
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#7851a929;
  border:1px solid #9b74c766;
  color:#c9afe8;
  font-size:21px;
  font-weight:800
}

.layout-plan-mismatch>div {
  display:flex;
  flex-direction:column;
  gap:4px
}

.layout-plan-mismatch b {
  display:block;
  font-size:16px;
  line-height:1.25;
  color:#f4eafa
}

.layout-plan-mismatch span:not(.layout-plan-mismatch-icon) {
  color:#d9d1df
}

.layout-plan-mismatch strong {
  color:#c6a9e8
}

.layout-plan-mismatch-live {
  animation:layoutMismatchPulse .38s ease-out
}

@keyframes layoutMismatchPulse {
  0% {
    transform:translateY(-2px);
    box-shadow:0 0 0 0 #7851a955
  }
  100% {
    transform:none;
    box-shadow:0 9px 24px #0002
  }
}

@media(max-width:1200px) {
  .plan-quick-nav {
    display:none!important
  }
}

.plan-quick-nav-inner {
  box-sizing:border-box
}

.layout-plan-mismatch {
  font-size:15px;
  line-height:1.58
}

.layout-plan-mismatch b {
  font-size:17px
}

.product-row .grow-recipe-availability {
  justify-content:flex-start!important;
  align-items:center!important;
  margin:7px 0 1px!important;
  gap:6px!important;
}

.product-row .grow-recipe-availability>span, .product-row .grow-recipe-availability .recipe-premium-tag {
  font-size:10px!important;
  padding:3px 7px!important;
  line-height:1.15!important;
}

.product-row .grow-recipe-availability .recipe-lock-btn {
  font-size:10px!important;
  padding:3px 7px!important;
  line-height:1.2!important;
}

@media(max-width:740px) {
  .product-row .grow-recipe-availability {
    align-items:flex-start!important
  }
}

@media (max-width:760px), (max-width:960px) and (pointer:coarse) {
  html {
    -webkit-text-size-adjust:100%;
    scroll-padding-top:64px
  }
  body {
    overflow-x:hidden;
    padding-bottom:env(safe-area-inset-bottom,0px)
  }
  button,select,input,summary {
    -webkit-tap-highlight-color:transparent
  }
  button,select,input[type=search],input[type=number] {
    min-height:44px
  }
  header {
    display:block!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 12px 9px!important;
    min-height:0;
    background:#101a25
  }
  .brand {
    margin:0 0 10px!important;
    font-size:18px!important;
    letter-spacing:1.5px
  }
  .brand-site-icon {
    width:34px;
    height:34px
  }
  .brand small {
    font-size:8px!important;
    letter-spacing:1.45px!important
  }
  header nav {
    display:flex;
    gap:6px;
    margin:0 -2px!important;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:2px 2px 5px;
    -webkit-overflow-scrolling:touch
  }
  header nav::-webkit-scrollbar {
    display:none
  }
  header nav button {
    flex:0 0 auto;
    min-height:44px;
    padding:9px 12px!important;
    border:1px solid #ffffff10;
    border-radius:10px!important;
    background:#15232e;
    color:#b7c5cf;
    font-size:12px!important;
    scroll-snap-align:start
  }
  header nav button.active {
    background:var(--planner-accent)!important;
    border-color:var(--planner-accent-hover)!important;
    color:#fff!important
  }
  .version {
    display:none!important
  }
  .shell {
    display:block!important;
    width:100%;
    max-width:none
  }
  .planner-sidebar {
    position:sticky;
    top:0;
    z-index:65;
    width:100%;
    padding:0!important;
    border:0!important;
    border-bottom:1px solid #3b2d4c!important;
    background:#121b24;
    box-shadow:0 7px 22px #0007
  }
  .mobile-planner-bar {
    display:block!important;
    position:sticky;
    top:0;
    z-index:3;
    background:linear-gradient(100deg,#21172d,#141e28)
  }
  .mobile-settings-toggle {
    display:flex;
    width:100%;
    min-height:58px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 14px;
    border:0;
    border-left:4px solid #7851a9;
    background:transparent;
    color:#fff;
    text-align:left
  }
  .mobile-settings-summary {
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:1px
  }
  .mobile-settings-summary small {
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
    color:#a98cc9
  }
  .mobile-settings-summary b {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    color:#f1e8fa
  }
  .mobile-settings-action {
    display:flex;
    align-items:center;
    gap:7px;
    flex:none;
    padding:6px 8px;
    border-radius:9px;
    background:#7851a926;
    color:#d9c1f5;
    font-size:11px;
    font-weight:800
  }
  .mobile-settings-action i {
    font-style:normal;
    font-size:18px;
    line-height:1;
    transition:transform .18s ease
  }
  .planner-sidebar.mobile-settings-open .mobile-settings-action i {
    transform:rotate(180deg)
  }
  .planner-sidebar:not(.mobile-settings-open)>:not(.mobile-planner-bar) {
    display:none!important
  }
  .planner-sidebar.mobile-settings-open {
    max-height:min(82vh,760px);
    max-height:min(82dvh,760px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0 16px calc(18px + env(safe-area-inset-bottom,0px))!important
  }
  .planner-sidebar.mobile-settings-open>.mobile-planner-bar {
    margin:0 -16px 10px
  }
  .planner-sidebar.mobile-settings-open .level-heading {
    margin-top:2px
  }
  .planner-sidebar.mobile-settings-open .level-heading h2 {
    font-size:19px
  }
  .planner-sidebar.mobile-settings-open .level-heading strong {
    font-size:36px
  }
  .planner-sidebar.mobile-settings-open label {
    margin-top:15px
  }
  .planner-sidebar .setup-mode-main {
    grid-template-columns:1fr 1fr!important
  }
  .planner-sidebar .setup-mode-main button {
    min-height:48px;
    font-size:13px
  }
  .planner-sidebar .goal-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px
  }
  .planner-sidebar .goal-btn {
    min-height:50px;
    padding:9px 7px;
    font-size:12px
  }
  .planner-sidebar .primary {
    min-height:48px;
    margin:16px 0
  }
  .planner-sidebar .sidebar-dropdown>summary {
    min-height:46px;
    align-items:center
  }
  .planner-sidebar .recipe-toggle-list {
    max-height:44dvh
  }
  main {
    padding:20px 12px 52px!important;
    width:100%;
    min-width:0
  }
  h1 {
    font-size:24px!important;
    line-height:1.18;
    letter-spacing:-.45px
  }
  .page-title {
    gap:9px;
    margin-bottom:17px!important
  }
  .page-title .badge {
    align-self:flex-start;
    white-space:normal
  }
  .subtitle {
    font-size:13px;
    line-height:1.45
  }
  .metrics {
    gap:8px!important;
    margin:14px 0 18px!important
  }
  .metric {
    padding:14px 13px!important;
    border-radius:11px
  }
  .metric label {
    font-size:10px;
    letter-spacing:.025em
  }
  .metric strong {
    font-size:24px!important;
    margin:5px 0!important;
    line-height:1.16;
    overflow-wrap:anywhere
  }
  .metric small {
    font-size:10.5px;
    line-height:1.35
  }
  .metric strong .coin-icon {
    width:23px!important;
    height:23px!important
  }
  .note {
    margin:14px 0;
    padding:12px 13px;
    font-size:12.5px;
    line-height:1.55;
    border-radius:0 9px 9px 0
  }
  .layout-plan-mismatch {
    padding:14px!important;
    gap:10px!important;
    font-size:13.5px!important
  }
  .layout-plan-mismatch b {
    font-size:16px!important
  }
  .section-head {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end!important;
    gap:4px 8px!important;
    margin:24px 0 11px!important;
    padding-bottom:7px
  }
  .section-head h2 {
    font-size:19px;
    line-height:1.2
  }
  .section-head>span {
    width:100%;
    text-align:left!important;
    font-size:11px!important;
    line-height:1.35
  }
  .section-count {
    min-width:28px!important;
    height:28px!important;
    font-size:14px!important;
    vertical-align:1px
  }
  .production-grid {
    column-count:1!important
  }
  .production-card {
    margin-bottom:10px;
    border-radius:11px
  }
  .production-card>h3 {
    padding:12px 13px!important;
    font-size:14px!important
  }
  .production-card h3 .facility-card-title .facility-mini-icon {
    width:32px;
    height:32px
  }
  .product-row {
    gap:9px;
    padding:10px 12px!important;
    align-items:flex-start
  }
  .product-row>img {
    width:54px!important;
    height:54px!important
  }
  .product-row b {
    font-size:13.5px!important;
    line-height:1.25
  }
  .product-row p,.product-row .qty {
    font-size:11.5px!important;
    line-height:1.42
  }
  .product-row .grow-recipe-availability {
    gap:5px!important
  }
  .recipe-module-note {
    max-width:100%
  }
  .recipe-lock-btn,.recipe-premium-tag,.recipe-module-note>span {
    white-space:normal!important;
    text-align:left
  }
  .upgrade-card {
    gap:12px;
    padding:14px!important
  }
  .upgrade-card strong {
    font-size:24px
  }
  .upgrade-parts {
    gap:7px
  }
  .upgrade-part {
    padding:9px!important
  }
  .upgrade-part>img,.upgrade-part>.muted {
    width:38px!important;
    height:38px!important
  }
  .upgrade-part b {
    font-size:12.5px
  }
  .upgrade-part small {
    font-size:10.5px
  }
  .upgrade-craft-allocation {
    grid-template-columns:1fr!important
  }
  .table-wrap {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:thin
  }
  .table-wrap:not(.compact-flow) {
    border-radius:10px
  }
  .table-wrap:not(.compact-flow)>table {
    min-width:700px
  }
  .level-guide-wrap>table {
    min-width:680px!important
  }
  .compact-flow {
    overflow:visible
  }
  .compact-flow table {
    min-width:0!important;
    table-layout:fixed!important;
    font-size:11px!important
  }
  .compact-flow th,.compact-flow td {
    padding:9px 6px!important
  }
  .compact-flow th {
    font-size:9px!important;
    line-height:1.25
  }
  .compact-flow .flow-item-cell {
    gap:5px
  }
  .compact-flow .flow-item-cell img {
    width:28px!important;
    height:28px!important;
    margin-right:0!important
  }
  .compact-flow .flow-item-cell .item-link {
    font-size:10.5px;
    white-space:normal;
    line-height:1.2
  }
  .metric-money {
    gap:3px
  }
  .flow-pair {
    grid-template-columns:1fr!important;
    gap:10px
  }
  .flow-card {
    min-width:0
  }
  .food-strip {
    padding:12px!important
  }
  .food-items {
    width:100%
  }
  .food-item {
    min-width:0
  }
  .bonus-output-card,.material-cards {
    grid-template-columns:1fr!important
  }
  .worker-grid {
    grid-template-columns:1fr!important
  }
  .worker-card {
    padding:13px!important
  }
  .worker-ability b {
    font-size:18px!important
  }
  .worker-job-role {
    font-size:14px!important
  }
  .worker-job-count {
    font-size:17px
  }
  .worker-job-meta {
    text-align:left!important
  }
  .worker-card .worker-job-trait,.worker-card .worker-job-family {
    text-align:left!important
  }
  .aniimo-options {
    max-width:100%;
    -webkit-overflow-scrolling:touch
  }
  .climate-grid {
    grid-template-columns:1fr!important
  }
  .climate-map {
    padding:11px!important
  }
  .climate-visual {
    grid-template-columns:1fr!important
  }
  .climate-map svg {
    min-height:0!important;
    max-height:none
  }
  .climate-key {
    grid-template-columns:1fr 1fr!important;
    gap:6px
  }
  .climate-key>div {
    padding:7px
  }
  .catalog-controls {
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:14px 0
  }
  .catalog-controls input {
    grid-column:1/-1;
    min-width:0
  }
  .catalog {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }
  .item-card {
    padding:12px 8px;
    border-radius:10px;
    min-width:0
  }
  .item-card img {
    width:72px;
    height:72px;
    margin-bottom:8px
  }
  .item-card b {
    font-size:12.5px;
    overflow-wrap:anywhere
  }
  .item-card small {
    font-size:10px
  }
  .item-card span {
    font-size:12px
  }
  .source-block {
    padding:15px;
    margin:12px 0;
    border-radius:10px
  }
  .source-block h2 {
    font-size:18px
  }
  .source-block p,.source-block li {
    font-size:12.5px;
    line-height:1.58
  }
  dialog {
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    padding:19px 14px!important;
    border-radius:15px!important;
    overscroll-behavior:contain
  }
  .recipe-top {
    align-items:flex-start;
    gap:10px
  }
  .recipe-top img {
    width:72px;
    height:72px
  }
  .recipe-top h2 {
    font-size:20px
  }
  .recipe-stats {
    gap:7px;
    margin:15px 0
  }
  .ingredients {
    gap:6px
  }
  .ingredients button {
    padding:6px;
    font-size:12px
  }
  .lock-dialog-head {
    align-items:flex-start;
    gap:10px
  }
  .lock-dialog-head>img {
    width:52px;
    height:52px
  }
  .lock-dialog-head h2 {
    font-size:19px
  }
  .lock-dialog-actions {
    grid-template-columns:1fr!important
  }
  .advanced-setup-dialog,.event-center-dialog {
    width:calc(100vw - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
    padding:0!important
  }
  .advanced-setup-head,.event-dialog-head {
    padding:14px!important
  }
  .advanced-setup-head h2 {
    font-size:20px
  }
  .advanced-setup-head p {
    font-size:11px
  }
  .advanced-setup-toolbar {
    padding:9px 12px!important
  }
  .advanced-setup-tabs {
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .advanced-setup-tabs::-webkit-scrollbar {
    display:none
  }
  .advanced-setup-content {
    padding:12px!important;
    min-height:0!important;
    max-height:calc(100dvh - 248px)!important
  }
  .advanced-setup-footer {
    padding:10px 12px!important;
    position:sticky;
    bottom:0;
    z-index:2
  }
  .advanced-setup-footer>div {
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr;
    width:100%;
    gap:6px!important
  }
  .advanced-setup-footer button {
    width:100%!important;
    padding:9px 6px!important
  }
  .advanced-level-row {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px
  }
  .order-dock {
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important
  }
  .order-panel {
    width:calc(100vw - 16px)!important;
    max-height:min(78dvh,720px)!important;
    padding:13px!important
  }
  .order-fab {
    min-height:46px;
    padding:9px 12px
  }
  .order-quick-icons {
    max-width:calc(100vw - 126px)!important;
    -webkit-overflow-scrolling:touch
  }
  .order-quick-icon {
    width:44px;
    height:44px;
    flex-basis:44px
  }
  .order-card-main {
    grid-template-columns:42px minmax(0,1fr) 64px!important
  }
  .order-card-main>img {
    width:42px!important;
    height:42px!important
  }
  .layout-controls {
    grid-template-columns:1fr!important;
    gap:10px
  }
  .plot-picker {
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px
  }
  .plot-picker button {
    min-width:0;
    min-height:54px;
    padding:7px 3px;
    font-size:11px
  }
  .plot-picker button small {
    font-size:9px
  }
  .layout-actions {
    padding:12px
  }
  .layout-actions .check {
    min-height:36px
  }
  .layout-zoom-controls {
    grid-template-columns:44px 1fr 44px auto;
    gap:6px
  }
  .layout-zoom-controls button {
    min-width:44px;
    min-height:44px;
    padding:7px
  }
  .layout-scroll {
    min-height:420px!important;
    max-height:65dvh!important;
    padding:8px!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-x pan-y
  }
  .layout-canvas {
    touch-action:pan-x pan-y!important
  }
  .layout-canvas .placed {
    touch-action:none!important
  }
  .layout-legend {
    grid-template-columns:1fr!important;
    padding:10px!important
  }
  .layout-legend>div {
    padding:7px
  }
  .layout-status {
    font-size:11px;
    line-height:1.4
  }
  .planner-update {
    padding:11px;
    gap:8px;
    align-items:flex-start
  }
  .planner-update b {
    font-size:12px
  }
  .planner-update small {
    font-size:10px
  }
  .planner-update strong {
    font-size:10px;
    white-space:normal;
    text-align:right
  }
  .site-footer {
    padding:12px 12px calc(88px + env(safe-area-inset-bottom,0px))!important;
    font-size:11px!important
  }
}

@media (max-width:360px) {
  .planner-sidebar .goal-grid {
    grid-template-columns:1fr!important
  }
  .catalog {
    grid-template-columns:1fr
  }
  .climate-key {
    grid-template-columns:1fr!important
  }
  .metrics {
    grid-template-columns:1fr!important
  }
  .metric:first-child {
    grid-column:auto!important
  }
}

.layout-selection-info {
  display:none
}

@media (max-width:760px), (max-width:960px) and (pointer:coarse) {
  .plan-quick-nav:not([hidden]) {
    display:flex!important;
    right:0!important;
    top:52%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    z-index:1150!important;
    filter:drop-shadow(0 14px 26px #000b)!important
  }
  .plan-quick-nav-inner {
    width:min(72vw,240px)!important;
    max-height:58dvh!important;
    padding:11px 11px 12px!important;
    border-radius:14px 0 0 14px!important
  }
  .plan-quick-nav-head {
    padding-bottom:9px!important;
    margin-bottom:4px!important
  }
  .plan-quick-nav-toggle {
    width:44px!important;
    height:92px!important;
    min-height:92px!important;
    border-radius:14px 0 0 14px!important
  }
  .plan-quick-nav-links button {
    min-height:42px!important;
    padding:8px 7px 8px 3px!important;
    font-size:12px!important
  }
  .plan-quick-nav-links button.active {
    background:linear-gradient(90deg,#7851a944,#7851a912)!important;
    color:#fff!important
  }
  .plan-quick-nav-links button.active i {
    background:#b88ce8!important;
    border-color:#d3b3f3!important;
    box-shadow:0 0 0 3px #7851a933!important
  }
  .plan-quick-nav.collapsed {
    transform:translate(min(72vw,240px),-50%)!important
  }
  .plan-quick-nav.collapsed .plan-quick-nav-toggle {
    transform:none!important
  }
  .plan-quick-nav.collapsed .plan-quick-nav-toggle-icon {
    transform:rotate(180deg)!important
  }
  .layout-selection-info:not([hidden]) {
    display:flex!important;
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(72px + env(safe-area-inset-bottom,0px));
    z-index:1100;
    pointer-events:none;
    flex-direction:column;
    gap:2px;
    padding:10px 12px;
    border:1px solid #a77bd2;
    background:linear-gradient(145deg,#2a1d38f2,#151f2af2);
    border-radius:12px;
    box-shadow:0 12px 32px #000a,0 0 0 1px #7851a922;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)
  }
  .layout-selection-info>span {
    font-size:8px;
    font-weight:900;
    letter-spacing:.16em;
    color:#b995df
  }
  .layout-selection-info>b {
    font-size:14px;
    line-height:1.2;
    color:#f6eeff
  }
  .layout-selection-info>small {
    font-size:10.5px;
    line-height:1.35;
    color:#cbbfd7
  }
  .layout-canvas .placed.layout-selected {
    opacity:1!important;
    filter:brightness(1.16)!important;
    z-index:12!important;
    box-shadow:0 0 0 4px #c9a4ef,0 4px 14px #000c!important
  }
  .layout-legend .layout-legend-row {
    border:1px solid transparent;
    transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
  }
  .layout-legend .layout-legend-row.layout-selected {
    border-color:#a77bd2!important;
    background:linear-gradient(90deg,#7851a93d,#101e29)!important;
    box-shadow:inset 3px 0 0 #9e72cb
  }
}

.plan-duration-note {
  display:flex;
  flex-direction:column;
  gap:5px
}

.plan-duration-note>b {
  color:var(--text);
  font-size:14px
}

.plan-duration-note>span {
  line-height:1.5
}

.layout-fixed-info {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 11px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#111f2a
}

.layout-fixed-info b {
  font-size:13px;
  color:var(--text)
}

.layout-fixed-info small {
  font-size:11px;
  line-height:1.4;
  color:var(--muted)
}

.layout-actions>.muted {
  display:block;
  font-size:11px;
  line-height:1.4;
  margin:-3px 0 9px 27px
}

.level-heading {
  gap:14px;
  align-items:flex-start
}

.level-heading h2 {
  margin:0;
  line-height:1.08;
  white-space:nowrap!important;
  font-size:clamp(26px,1.55vw,32px);
  flex:1 1 auto;
  min-width:0
}

.level-heading strong {
  flex:0 0 auto;
  line-height:1
}

.worker-ability {
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:14px
}

.worker-ability b {
  font-size:clamp(22px,1.8vw,30px)!important;
  line-height:1.1!important
}

.worker-ability b span {
  display:inline-block;
  font-size:inherit!important
}

.worker-ability>img {
  width:42px!important;
  height:42px!important
}

.aniimo-icon-wrap {
  position:relative;
  display:block;
  width:52px;
  height:52px;
  margin:auto
}

.aniimo-options .aniimo-icon {
  display:block;
  width:52px!important;
  height:52px!important;
  object-fit:contain;
  margin:auto;
  border-radius:50%;
  background:#0d1821;
  border:1px solid rgba(255,255,255,.12)
}

.aniimo-icon-fallback {
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(180deg,#21374a 0%,#182937 100%);
  border:1px solid rgba(255,255,255,.14);
  color:#eef6fb;
  font-size:15px;
  font-weight:900;
  letter-spacing:.4px
}

@media(max-width:960px) {
  .level-heading {
    align-items:center
  }
  .level-heading h2 {
    font-size:24px
  }
  .worker-ability b {
    font-size:24px!important
  }
  .worker-job-role {
    font-size:15px!important
  }
  .worker-job-personality,.worker-job-trait,.worker-job-family {
    font-size:13px!important
  }
}

@media(max-width:760px) {
  .planner-sidebar.mobile-settings-open .level-heading h2 {
    font-size:22px!important;
    white-space:nowrap!important
  }
  .worker-ability b {
    font-size:22px!important
  }
  .aniimo-options .aniimo-icon,.aniimo-icon-wrap,.aniimo-icon-fallback {
    width:48px!important;
    height:48px!important
  }
  .aniimo-options small {
    font-size:11px!important
  }
}

@media(max-width:360px) {
  .planner-sidebar.mobile-settings-open .level-heading h2 {
    font-size:20px!important
  }
}

.worker-grid {
  align-items:start!important;
}

.worker-card {
  align-self:start!important;
  height:auto!important;
  min-width:0!important;
}

.worker-ability {
  min-width:0!important;
}

.worker-ability b {
  font-size:24px!important;
  line-height:1.12!important;
}

.worker-job-main, .worker-job-meta {
  min-width:0!important;
}

.worker-job-role {
  overflow-wrap:anywhere;
}

.aniimo-options {
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px 5px!important;
  overflow:visible!important;
  max-width:100%!important;
  padding:5px 0 2px!important;
  scrollbar-width:none;
}

.aniimo-options::-webkit-scrollbar {
  display:none
}

.aniimo-options>span {
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  text-align:center!important;
}

.aniimo-icon-wrap {
  display:block!important;
  position:relative!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  margin:0 auto!important;
}

.aniimo-options .aniimo-icon, .aniimo-icon-fallback {
  width:44px!important;
  height:44px!important;
  margin:0 auto!important;
}

.aniimo-icon-fallback[hidden] {
  display:none!important
}

.aniimo-icon-fallback:not([hidden]) {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.aniimo-options small {
  display:block!important;
  width:100%!important;
  max-width:58px!important;
  margin:4px auto 0!important;
  font-size:10px!important;
  line-height:1.12!important;
  overflow-wrap:anywhere;
}

.aniimo-options.grouped {
  display:block!important;
}

.aniimo-options.grouped .aniimo-group {
  display:block!important;
  min-width:0!important;
  margin-top:9px!important;
}

.aniimo-options.grouped .aniimo-group>b {
  display:block!important;
  margin-bottom:6px!important;
}

.aniimo-options.grouped .aniimo-group>span {
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  min-width:52px!important;
  width:52px!important;
  margin:0 5px 6px 0!important;
  text-align:center!important;
}

@media(max-width:900px) {
  .worker-grid {
    grid-template-columns:1fr!important;
    gap:12px!important
  }
  .worker-ability b {
    font-size:23px!important
  }
  .aniimo-options {
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:9px 7px!important
  }
  .aniimo-icon-wrap,.aniimo-options .aniimo-icon,.aniimo-icon-fallback {
    width:48px!important;
    height:48px!important;
    min-width:48px!important
  }
  .aniimo-options small {
    max-width:62px!important;
    font-size:10.5px!important
  }
}

@media(max-width:380px) {
  .worker-ability b {
    font-size:21px!important
  }
  .aniimo-options {
    grid-template-columns:repeat(4,minmax(0,1fr))!important
  }
}

.worker-level-segmented {
  grid-template-columns:1fr 1.35fr 1fr
}

.worker-level-segmented button {
  font-size:11.5px;
  line-height:1.15;
  padding:10px 5px
}

.experimental-toggle {
  margin-bottom:4px
}

.experimental-hint {
  margin-top:0!important;
  font-size:11px;
  line-height:1.35;
  color:#c8af78!important
}

.experimental-hint b {
  color:#f1cc78
}

.experimental-plan-note {
  border-color:#a98745;
  background:linear-gradient(180deg,rgba(120,92,35,.16),rgba(76,57,22,.12))
}

.experimental-plan-note b {
  color:#f4d18b
}

.homebuilding-card {
  margin:14px 0 16px;
  padding:16px;
  background:linear-gradient(180deg,#182b3a,#142532);
  border:1px solid #385064;
  border-radius:12px
}

.homebuilding-card.locked {
  opacity:.72
}

.homebuilding-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px
}

.homebuilding-head>div>b,.homebuilding-card.locked b {
  display:block;
  font:750 17px Manrope,sans-serif;
  margin-top:3px
}

.homebuilding-head small,.homebuilding-card.locked small {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
  max-width:720px
}

.homebuilding-head label {
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:#d7e4ec;
  font-weight:700
}

.homebuilding-head input {
  width:82px;
  background:#101c27;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px 10px;
  text-align:center
}

.homebuilding-status {
  margin-top:12px;
  padding:11px 12px;
  border-radius:9px;
  border:1px solid #355268;
  background:#10202c
}

.homebuilding-status b,.homebuilding-status span {
  display:block
}

.homebuilding-status span {
  margin-top:3px;
  color:#b7c7d2;
  font-size:12.5px
}

.homebuilding-status.warn {
  border-color:#9c7042;
  background:#2a2119
}

.homebuilding-status.warn b {
  color:#f4d18b
}

.homebuilding-status.safe b {
  color:#a3e5c1
}

.homebuilding-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px
}

.homebuilding-actions button {
  width:auto;
  margin:0;
  padding:9px 12px
}

.homebuilding-energy {
  display:block;
  margin-top:9px;
  color:#9eb0bf;
  font-size:11.5px;
  line-height:1.4
}

@media(max-width:760px) {
  .worker-level-segmented {
    grid-template-columns:1fr 1.3fr 1fr
  }
  .worker-level-segmented button {
    font-size:10.5px;
    padding:9px 4px
  }
  .homebuilding-head {
    display:grid;
    grid-template-columns:1fr;
    gap:10px
  }
  .homebuilding-head label {
    justify-content:space-between;
    width:100%
  }
  .homebuilding-head input {
    width:92px
  }
  .homebuilding-actions {
    display:grid;
    grid-template-columns:1fr
  }
  .homebuilding-actions button {
    width:100%
  }
}

.page-title,.section-head {
  scroll-margin-top:96px
}

.worker-grid {
  display:block!important;
  columns:285px auto;
  column-gap:14px!important
}

.worker-card {
  display:inline-block!important;
  width:100%!important;
  break-inside:avoid!important;
  page-break-inside:avoid!important;
  margin:0 0 14px!important;
  vertical-align:top!important
}

.homebuilding-impact {
  margin-top:10px;
  padding:9px 10px;
  border-radius:8px;
  border:1px solid transparent
}

.homebuilding-impact b,.homebuilding-impact span {
  display:block
}

.homebuilding-impact span {
  margin-top:3px;
  font-size:12px;
  line-height:1.35
}

.homebuilding-impact.checking {
  background:#172633;
  border-color:#456172
}

.homebuilding-impact.checking b {
  color:#b7cad6
}

.homebuilding-impact.delay {
  background:#302716;
  border-color:#b78b3e
}

.homebuilding-impact.delay b {
  color:#ffd47c
}

.homebuilding-impact.delay span {
  color:#e3cfaa
}

.homebuilding-impact.danger {
  background:#35181b;
  border-color:#c65a61
}

.homebuilding-impact.danger b {
  color:#ff9da3
}

.homebuilding-impact.danger span {
  color:#e8bcc0
}

.event-sidebar-controls {
  margin:15px 0 4px
}

.event-sidebar-controls.disabled-option {
  opacity:.52
}

.event-activate-btn {
  width:100%;
  border:1px solid #4a5966;
  border-radius:10px;
  background:#1a2732;
  color:#9eb0bf;
  padding:11px 12px;
  font-weight:800;
  letter-spacing:.01em;
  transition:.15s ease
}

.event-activate-btn:hover:not(:disabled) {
  border-color:#77549b;
  color:#e8dcf4
}

.event-activate-btn.active {
  background:linear-gradient(135deg,#7750a4,#4d3370);
  border-color:#a980ce;
  color:#fff;
  box-shadow:0 0 0 1px #c6a5ea22 inset,0 6px 18px #5d3b7b33
}

.event-activate-btn:disabled {
  opacity:.45;
  cursor:not-allowed
}

.event-sidebar-controls .event-mode-hint {
  margin:6px 1px 12px!important
}

.event-recipes-toggle {
  margin:10px 0 4px!important
}

.event-recipes-toggle.disabled-option {
  opacity:.5
}

.event-recipes-hint {
  margin:0 0 2px!important;
  font-size:11px!important;
  line-height:1.35!important
}

.inline-text-btn {
  display:inline!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#9fcfff!important;
  font:inherit!important;
  font-weight:750!important;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer
}

.event-recipe-production-control {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid #4f3b67;
  background:#1b1723;
  border-radius:11px
}

.event-recipe-production-control label {
  margin:0
}

.event-recipe-production-control small {
  max-width:470px;
  color:#baaaca;
  text-align:right
}

.event-strategy-placeholder {
  display:flex;
  align-items:center;
  gap:22px;
  max-width:860px;
  margin:28px 0;
  padding:26px;
  border:1px solid #4c3c5f;
  border-radius:16px;
  background:linear-gradient(135deg,#211927,#15232f)
}

.event-strategy-placeholder>img {
  width:88px;
  height:88px;
  object-fit:contain
}

.event-strategy-placeholder h2 {
  margin:4px 0 8px;
  font-size:26px
}

.event-strategy-placeholder p {
  margin:0 0 8px;
  color:#c6d2dc
}

.event-strategy-placeholder small {
  color:#aa98ba
}

.plan-quick-nav-links button.active {
  background:linear-gradient(90deg,#7851a944,#7851a912)!important;
  color:#fff!important
}

.plan-quick-nav-links button.active i {
  background:#b88ce8!important;
  border-color:#d3b3f3!important;
  box-shadow:0 0 0 3px #7851a933!important
}

@media(max-width:900px) {
  .worker-grid {
    columns:1!important
  }
  .worker-card {
    display:block!important;
    margin-bottom:12px!important
  }
  .event-recipe-production-control {
    align-items:stretch;
    flex-direction:column
  }
  .event-recipe-production-control small {
    text-align:left;
    max-width:none
  }
  .event-strategy-placeholder {
    align-items:flex-start;
    padding:18px;
    gap:14px
  }
  .event-strategy-placeholder>img {
    width:60px;
    height:60px
  }
  .event-strategy-placeholder h2 {
    font-size:22px
  }
}

@media(max-width:520px) {
  .event-strategy-placeholder {
    display:block
  }
  .event-strategy-placeholder>img {
    margin-bottom:10px
  }
  .event-activate-btn {
    min-height:44px
  }
}

#event-mode-option {
  display:block!important
}

#event-mode-option #event-mode-hint {
  display:block!important
}

.event-center-dialog {
  width:min(1440px,calc(100vw - 32px))!important;
  max-width:1440px!important;
  height:min(920px,calc(100dvh - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  overflow:hidden!important;
}

#event-center-content {
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr)
}

.event-dialog-head,.event-global-controls,.event-tabs {
  flex:0 0 auto
}

.event-dialog-body {
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable
}

.event-tabs {
  overflow-x:auto;
  scrollbar-width:thin;
  white-space:nowrap
}

.event-tabs button {
  flex:0 0 auto
}

.power-preview {
  display:grid;
  gap:9px;
  padding:12px;
  border:1px solid rgba(255,224,87,.14);
  border-radius:12px;
  background:rgba(5,13,20,.42)
}

.power-preview-title {
  display:grid;
  gap:3px
}

.power-preview-title small {
  color:var(--muted);
  line-height:1.35
}

.power-preview svg {
  display:block;
  width:100%;
  max-height:360px;
  min-height:190px;
  border-radius:10px;
  background:#0d1821;
  border:1px solid rgba(255,255,255,.06)
}

.power-preview-key {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.power-preview-key span {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:9px;
  background:rgba(255,255,255,.035);
  font-size:12px
}

.power-preview-key .facility-mini-icon {
  width:25px;
  height:25px
}

@media(max-width:760px) {
  .event-center-dialog {
    inset:0!important;
    margin:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important
  }
  #event-center-content {
    height:100dvh;
    grid-template-rows:auto auto auto minmax(0,1fr)
  }
  .event-dialog-head {
    padding:12px 14px!important;
    position:relative;
    z-index:3
  }
  .event-global-controls {
    padding:10px 12px!important;
    gap:8px!important
  }
  .event-tabs {
    position:sticky;
    top:0;
    z-index:6;
    padding:8px 10px!important;
    background:#121d27!important;
    box-shadow:0 5px 12px rgba(0,0,0,.28)
  }
  .event-tabs button {
    padding:9px 12px!important
  }
  .event-dialog-body {
    padding:12px!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch
  }
  .event-strategy-section,.event-strategy-hero {
    padding:14px!important;
    border-radius:14px!important
  }
  .power-preview svg {
    min-height:170px;
    max-height:300px
  }
}

.goal-shared-note {
  margin:7px 1px 14px;
  color:#8fa5b7;
  font-size:11px;
  line-height:1.38
}

.guide-open-btn {
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  border:1px solid #5c4384;
  background:linear-gradient(180deg,#24183a 0%,#1a1330 100%);
  color:#eadfff;
  border-radius:12px;
  padding:7px 10px;
  font-weight:800;
  font-size:12px;
  cursor:pointer
}

.guide-open-btn:hover {
  border-color:#ba92ff;
  color:#fff
}

.guide-q {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid #b58cff;
  color:#d4b9ff;
  font-weight:900
}

.guide-overlay {
  position:fixed;
  inset:0;
  z-index:3000;
  pointer-events:auto
}

.guide-overlay[hidden] {
  display:none
}

.guide-spotlight {
  position:fixed;
  z-index:3000;
  border:2px solid #9b6dff;
  border-radius:18px;
  box-shadow:0 0 0 9999px rgba(5,8,16,.78),0 0 0 5px rgba(155,109,255,.12);
  pointer-events:none;
  transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease
}

.guide-card {
  position:fixed;
  z-index:3002;
  background:linear-gradient(180deg,#24192e 0%,#182526 100%);
  border:1px solid #6b4fa0;
  border-radius:18px;
  padding:18px 18px 15px;
  color:#f5efff;
  box-shadow:0 22px 60px rgba(0,0,0,.45)
}

.guide-card h2 {
  margin:8px 0 8px;
  font-size:21px;
  line-height:1.2
}

.guide-copy {
  color:#d5cfe2;
  line-height:1.52;
  font-size:14px
}

.guide-copy p {
  margin:7px 0
}

.guide-step-count {
  color:#caa8ff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em
}

.guide-progress {
  display:flex;
  gap:6px;
  position:absolute;
  right:18px;
  top:20px
}

.guide-progress i {
  display:block;
  width:18px;
  height:6px;
  border-radius:8px;
  background:#53495f
}

.guide-progress i.active {
  background:#8ff3d2
}

.guide-actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:15px
}

.guide-actions>div {
  display:flex;
  gap:8px
}

.guide-actions button {
  border:0;
  border-radius:999px;
  padding:9px 15px;
  font-weight:850;
  cursor:pointer
}

.guide-next {
  background:#7d5ad7;
  color:#fff
}

.guide-back {
  background:#3e4250;
  color:#eef5f2
}

.guide-back:disabled {
  opacity:.35
}

.guide-skip {
  background:transparent;
  color:#bcaed6;
  padding-left:0!important
}

.guide-open body {
  overflow:hidden
}

@media(max-width:760px) {
  .guide-open-btn span:last-child {
    display:none
  }
  .guide-open-btn {
    padding:7px
  }
  .guide-card {
    padding:15px;
    border-radius:15px
  }
  .guide-card h2 {
    font-size:19px
  }
  .guide-copy {
    font-size:13px
  }
  .guide-actions button {
    padding:9px 13px
  }
  .goal-shared-note {
    font-size:12px
  }
}

@media(max-width:760px) {
  #event-center-content {
    display:block!important;
    height:100dvh!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
  }
  .event-dialog-head,.event-global-controls {
    position:relative!important;
    top:auto!important
  }
  .event-tabs {
    position:sticky!important;
    top:0!important;
    z-index:12!important;
    margin:0!important
  }
  .event-dialog-body {
    overflow:visible!important;
    max-height:none!important;
    height:auto!important;
    min-height:auto!important;
    padding-bottom:90px!important
  }
}

@media(max-width:760px) {
  #event-center-content {
    overflow-x:hidden!important
  }
  .event-dialog-body,.event-strategy-panel,.event-strategy-hero,.event-strategy-section,.event-strategy-columns,.event-strategy-card {
    min-width:0!important;
    max-width:100%!important;
    width:100%!important
  }
  .event-strategy-panel {
    grid-template-columns:minmax(0,1fr)!important
  }
  .event-strategy-table-wrap {
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch
  }
  .event-tabs {
    max-width:100vw!important;
    overflow-x:auto!important
  }
}

.share-settings {
  margin:12px 0;
  padding:12px 11px;
  border:1px solid #3a4654;
  border-radius:9px;
  background:linear-gradient(145deg,#192632,#151f29)
}

.share-settings-heading {
  display:block;
  margin:0;
  color:#e5d6f6;
  font:700 14px/1.35 Manrope,sans-serif
}

.share-settings[open]>summary {
  margin-bottom:10px;
  border-bottom:1px solid #ffffff12
}

.share-settings>.hint {
  margin:0 0 10px;
  font-size:11px;
  line-height:1.4
}

.share-summary-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:1px solid #74539d;
  border-radius:999px;
  background:#6c3baa24;
  color:#d8c1f2;
  font-size:12px;
  line-height:1
}

.share-settings-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:4px 0 12px
}

.share-settings-actions button {
  width:100%;
  min-width:0;
  margin:0!important;
  padding:9px 8px!important;
  font-size:11px
}

.share-import-label {
  display:block;
  margin:0 0 6px!important;
  color:#d9e5ed;
  font-size:11px;
  font-weight:800
}

#share-import-input {
  display:block;
  width:100%;
  min-height:56px;
  resize:vertical;
  margin:0 0 8px;
  padding:9px 10px;
  border:1px solid #314454;
  border-radius:8px;
  background:#0e1821;
  color:#eaf2f7;
  font:600 10px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
  word-break:break-all
}

#share-import-input:focus {
  outline:0;
  border-color:#8c62c2;
  box-shadow:0 0 0 2px #7851a926
}

.share-import-btn {
  width:100%!important;
  min-height:40px!important;
  margin:0!important;
  padding:9px 12px!important
}

.share-status {
  min-height:17px;
  margin:7px 0 12px!important;
  overflow-wrap:anywhere
}

.share-status[data-state="ok"] {
  color:#8fe2bd
}

.share-status[data-state="ready"] {
  color:#d5bcf2
}

.share-status[data-state="warn"],.share-status[data-state="error"] {
  color:#efc27a
}

@media(max-width:760px) {
  .share-settings-actions {
    grid-template-columns:1fr 1fr
  }
  .share-settings-actions button {
    min-height:42px;
    font-size:12px
  }
  #share-import-input {
    min-height:64px;
    font-size:11px
  }
  .share-import-btn {
    min-height:44px!important
  }
}

@media(max-width:350px) {
  .share-settings-actions {
    grid-template-columns:1fr
  }
}

.owned-materials-panel {
  display:grid;
  gap:16px;
  max-width:980px;
  margin:0 auto
}

.owned-materials-intro {
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#101d27
}

.owned-materials-intro h3 {
  margin:0 0 7px;
  color:#edf8ff;
  font-size:15px
}

.owned-materials-intro p {
  margin:5px 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55
}

.owned-materials-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.owned-home-coins {
  border:1px solid var(--line);
  border-radius:12px;
  background:#101d27;
  padding:13px
}

.owned-home-coins h3 {
  margin:0 0 10px;
  color:#dff4ff;
  font-size:13px
}

.owned-home-coins .owned-material-row {
  border-top:0;
  padding-top:0
}

.owned-home-coins {
  border:1px solid var(--line);
  border-radius:12px;
  background:#101d27;
  padding:13px
}

.owned-home-coins h3 {
  margin:0 0 10px;
  color:#dff4ff;
  font-size:13px
}

.owned-home-coins .owned-material-row {
  border-top:0;
  padding-top:0
}

.owned-material-chain {
  border:1px solid var(--line);
  border-radius:12px;
  background:#101d27;
  padding:13px
}

.owned-material-chain h3 {
  margin:0 0 10px;
  color:#dff4ff;
  font-size:13px
}

.owned-material-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 108px;
  gap:12px;
  align-items:center;
  margin:0;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.06)
}

.owned-material-row:first-of-type {
  border-top:0;
  padding-top:0
}

.owned-material-row>span {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0
}

.owned-material-row>span>span {
  min-width:0
}

.owned-material-row b {
  display:block;
  color:#edf8ff;
  font-size:12px;
  line-height:1.25
}

.owned-material-row small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:2px
}

.owned-material-row img {
  width:34px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto
}

.owned-material-row input {
  width:100%;
  min-width:0;
  padding:8px 9px;
  border-radius:7px;
  text-align:right
}

@media(max-width:760px) {
  .owned-materials-grid {
    grid-template-columns:1fr
  }
  .owned-material-row {
    grid-template-columns:minmax(0,1fr) 92px
  }
  .owned-materials-panel {
    gap:12px
  }
}


.climate-void-map .climate-visual {
  grid-template-columns:minmax(0,1fr) minmax(150px,210px);
  align-items:start
}

.climate-void-map .climate-preview-scroll {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  max-height:none;
  overflow:visible
}

@media(min-width:741px) {
  .climate-void-map .climate-key {
    display:flex;
    flex-flow:row wrap;
    align-content:start;
    gap:6px
  }

  .climate-void-map .climate-key>div {
    flex:1 1 145px;
    min-width:0
  }
}

@media(min-width:1100px) {
  .climate-map.climate-void-map {
    flex-basis:700px;
    max-width:700px
  }
}

.climate-preview-scroll,.power-preview-scroll {
  min-width:0;
  overflow:auto;
  max-width:100%;
  max-height:430px;
  padding:4px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:#0b141d;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch
}

.climate-preview-canvas,.power-preview-canvas {
  position:relative;
  overflow:hidden;
  background:#0d1821;
  border-radius:8px
}

.climate-preview-grid-bg,.power-preview-grid-bg {
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px),linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);
  background-size:18px 18px,18px 18px,4.5px 4.5px,4.5px 4.5px
}

.climate-preview-range {
  position:absolute;
  z-index:1;
  border:1.5px dashed var(--range-color);
  background:color-mix(in srgb,var(--range-color) 8%,transparent);
  box-sizing:border-box;
  pointer-events:auto
}

.climate-preview-device,.climate-preview-facility {
  position:absolute;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  user-select:none;
  transition:filter .12s ease,box-shadow .12s ease,border-color .12s ease;
  z-index:3
}

.climate-preview-device {
  background:var(--crop-color);
  border:1px solid #fff8;
  border-radius:5px
}

.climate-preview-facility {
  background:color-mix(in srgb,var(--crop-color) 78%,#0d1821);
  border:1px solid var(--crop-color);
  border-radius:4px;
  z-index:4
}

.climate-preview-device img,.climate-preview-facility img {
  width:88%;
  height:88%;
  object-fit:contain;
  pointer-events:none
}

.climate-device-key.climate-preview-active,.climate-device-key.climate-preview-selected {
  background:#182c3a!important;
  box-shadow:inset 0 0 0 1px var(--crop-color)
}

.climate-preview-facility.overlap-target {
  box-shadow:inset 0 0 0 1px #fff4
}

.climate-preview-device.climate-preview-active,.climate-preview-device.climate-preview-selected,.climate-preview-facility.climate-preview-active,.climate-preview-facility.climate-preview-selected {
  border-color:#fff;
  box-shadow:0 0 0 2px #fff8,0 0 12px var(--crop-color)
}

.power-preview-scroll {
  max-height:430px
}

.power-preview-canvas {
  background:#0d1821
}

.power-preview-range {
  position:absolute;
  z-index:1;
  box-sizing:border-box;
  border:1px dashed #f2d54a;
  background:#f2d54a12;
  pointer-events:none
}

.power-preview-hardware,.power-preview-facility {
  position:absolute;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:5px;
  z-index:3
}

.power-preview-hardware {
  background:#64551f;
  border:1px solid #fff6b5
}

.power-preview-hardware img,.power-preview-facility img {
  width:88%;
  height:88%;
  object-fit:contain;
  pointer-events:none
}

.power-preview-facility {
  background:#243a4a;
  border:1px solid #bdeaff
}

.climate-target {
  cursor:pointer;
  outline:none
}

.climate-target image {
  pointer-events:none
}

.climate-facility-box {
  transition:stroke-width .12s ease,filter .12s ease,opacity .12s ease
}

.climate-target.climate-preview-active .climate-facility-box,.climate-target.climate-preview-selected .climate-facility-box {
  stroke:#fff;
  stroke-width:.2;
  filter:drop-shadow(0 0 .18px var(--crop-color))
}

.climate-key-row {
  position:relative;
  border-left:3px solid var(--crop-color)!important
}

.climate-key-row.climate-preview-active,.climate-key-row.climate-preview-selected {
  background:#182c3a!important;
  box-shadow:inset 0 0 0 1px var(--crop-color)
}

.climate-crop-swatch {
  width:9px!important;
  height:30px!important;
  border-radius:4px!important;
  flex:none!important;
  border:0!important
}

.climate-selection-info:not([hidden]) {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  padding:9px 12px;
  border:1px solid #456779;
  background:#122633;
  border-radius:10px
}

.climate-selection-info>span {
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  color:#82bad6
}

.climate-selection-info>b {
  font-size:13px
}

.climate-selection-info>small {
  font-size:11px;
  color:var(--muted)
}

.overlap-climate-map {
  grid-column:span 1
}

@media(max-width:740px) {
  .climate-selection-info:not([hidden]) {
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(72px + env(safe-area-inset-bottom,0px));
    z-index:1100;
    pointer-events:none;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin:0;
    padding:10px 12px;
    border-color:#a77bd2;
    background:linear-gradient(145deg,#2a1d38f2,#151f2af2);
    box-shadow:0 12px 32px #000a,0 0 0 1px #7851a922;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)
  }
  .climate-selection-info>span {
    color:#b995df
  }
  .climate-selection-info>b {
    font-size:14px;
    color:#f6eeff
  }
  .climate-selection-info>small {
    font-size:10.5px;
    color:#cbbfd7
  }
}

.language-trigger {
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:62px!important;
  min-height:42px;
  border:1px solid #ffffff18!important;
  background:#15232e!important;
  color:#dce8f0!important;
  padding:7px 9px!important;
  border-radius:9px!important;
  flex:0 0 auto;
  position:relative
}

.language-trigger:hover {
  background:#213443!important;
  border-color:#8f62c6!important
}

.language-trigger img {
  width:31px;
  height:21px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 0 0 1px #ffffff24;
  flex:none
}

.language-trigger span {
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em
}

.language-trigger i {
  font-size:12px;
  font-style:normal;
  color:#91a5b3
}

.language-menu {
  position:fixed;
  z-index:2200;
  overflow:auto;
  background:#111d27;
  color:#eaf2f8;
  border:1px solid #3a4b59;
  border-radius:14px;
  padding:10px;
  box-shadow:0 22px 60px #000b;
  overscroll-behavior:contain
}

.language-menu[hidden] {
  display:none!important
}

.language-menu-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:5px 6px 10px;
  border-bottom:1px solid #ffffff12
}

.language-menu-head b {
  font:800 16px Manrope,sans-serif;
  color:#eaf2f8
}

.language-menu-head span {
  color:var(--muted);
  font-size:10px;
  text-align:right
}

.language-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding-top:8px
}

.language-option {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:9px;
  border:1px solid transparent;
  border-radius:9px;
  background:#15232e;
  color:#eaf2f8;
  text-align:left
}

.language-option:hover {
  background:#1e303e;
  border-color:#ffffff15
}

.language-option.active {
  background:#6c3baa26;
  border-color:#8f62c6
}

.language-option img {
  width:32px;
  height:22px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 0 0 1px #ffffff20
}

.language-option span {
  display:block;
  min-width:0
}

.language-option b {
  display:block;
  font-size:11.5px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.language-option small {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:2px
}

.language-option i {
  visibility:hidden;
  font-style:normal;
  color:#d9c1f5;
  font-weight:900
}

.language-option.active i {
  visibility:visible
}

html[data-locale]:not([data-locale="en-US"]) button,html[data-locale]:not([data-locale="en-US"]) label,html[data-locale]:not([data-locale="en-US"]) summary {
  overflow-wrap:anywhere
}

.placed b,.placed small {
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%
}

@media(max-width:1250px) {
  .language-trigger {
    min-width:54px!important;
    padding-inline:7px!important
  }
  .language-trigger span {
    display:none
  }
}

@media (max-width:760px), (max-width:960px) and (pointer:coarse) {
  header nav .language-trigger {
    min-width:54px!important;
    min-height:44px!important;
    padding:8px 9px!important;
    scroll-snap-align:start
  }
  .language-trigger img {
    width:32px;
    height:22px
  }
  .language-menu {
    padding:8px
  }
  .language-grid {
    grid-template-columns:1fr 1fr
  }
  .language-menu-head span {
    display:none
  }
}

@media(max-width:430px) {
  .language-grid {
    grid-template-columns:1fr
  }
  .language-menu {
    max-height:72dvh!important
  }
  .language-option {
    min-height:48px
  }
}

@media (max-width:760px), (max-width:960px) and (pointer:coarse) {
  header {
    position:relative
  }
  header .brand {
    padding-right:64px
  }
  header nav .language-trigger {
    position:absolute;
    right:12px;
    top:calc(11px + env(safe-area-inset-top,0px));
    z-index:4;
    margin:0!important;
    background:#182733!important;
    border-color:#ffffff24!important
  }
}

.climate-selection-info {
  display:none!important
}

@media (min-width:900px) {
  .language-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px
  }
  .language-menu {
    min-width:min(690px,calc(100vw - 24px))
  }
}

.language-option b {
  font-size:11.5px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.language-option small {
  font-size:9.5px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

@media (max-width:899px) {
  .language-grid {
    grid-template-columns:1fr 1fr
  }
}

@media (max-width:430px) {
  .language-grid {
    grid-template-columns:1fr
  }
}

.language-trigger {
  min-width:54px!important;
  width:auto!important;
  gap:6px!important;
  padding:7px 9px!important
}

.language-trigger img {
  width:34px!important;
  height:23px!important
}

.language-trigger>i {
  font-size:14px!important;
  line-height:1;
  transition:transform .15s ease
}

.language-trigger[aria-expanded="true"]>i {
  transform:rotate(180deg)
}

.language-menu {
  padding:12px!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable;
  max-width:calc(100vw - 24px)
}

.language-menu-head {
  align-items:center!important;
  padding:4px 5px 10px!important
}

.language-menu-head>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-width:0
}

.language-menu-head b {
  font-size:15px!important;
  white-space:nowrap
}

.language-menu-head span {
  min-width:0;
  overflow-wrap:anywhere
}

.language-split {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:10px 0 8px
}

.language-mode {
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  min-height:58px!important;
  margin:0!important;
  padding:8px 10px!important;
  border:1px solid #314657!important;
  border-radius:11px!important;
  background:#13232f!important;
  color:#e9f3fa!important;
  text-align:left!important
}

.language-mode:hover {
  border-color:#72509b!important;
  background:#1a2d3b!important
}

.language-mode.active {
  border-color:#a77ad6!important;
  background:linear-gradient(135deg,#6d3e9f32,#183041)!important;
  box-shadow:inset 0 0 0 1px #b88be92c
}

.language-mode img {
  display:block;
  width:36px;
  height:25px;
  object-fit:cover;
  border-radius:4px;
  box-shadow:0 0 0 1px #ffffff26
}

.language-mode span {
  min-width:0;
  display:block
}

.language-mode b,.language-mode small {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.language-mode b {
  font-size:12px;
  line-height:1.25
}

.language-mode small {
  margin-top:2px;
  color:#aabcc8;
  font-size:10px;
  line-height:1.2
}

.language-mode-note {
  min-height:26px;
  margin:0 0 2px;
  padding:6px 8px;
  border-radius:8px;
  background:#ffffff05;
  color:#9fb2bf;
  font-size:10px;
  line-height:1.35
}

.language-grid {
  padding-top:6px!important
}

.language-option {
  min-height:54px!important
}

.language-option b,.language-option small {
  min-width:0;
  max-width:100%;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap
}

.game-localized-name {
  unicode-bidi:isolate
}

.level-heading {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:8px 14px!important;
  min-width:0!important
}

.level-heading h2 {
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.15!important
}

.level-heading strong {
  justify-self:end!important;
  align-self:start!important;
  min-width:2ch;
  white-space:nowrap!important;
  line-height:1!important
}

.planner-sidebar>label,.planner-sidebar .check,.sidebar-dropdown summary,.setup-mode-main button,.segmented button,.goal-btn,.advanced-setup-tabs button,.event-tabs button,.plan-quick-nav-links button {
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal
}

.goal-grid,.setup-mode-main,.worker-level-segmented,.segmented {
  min-width:0
}

.goal-btn,.setup-mode-main button,.worker-level-segmented button {
  height:auto!important;
  min-height:42px!important;
  line-height:1.25!important
}

.facility-input {
  min-width:0
}

.facility-name-cell,.facility-name-cell>span {
  min-width:0!important
}

.facility-name-cell>.game-localized-name {
  overflow-wrap:anywhere
}

.metric,.metric>* {
  min-width:0
}

.metric label,.metric small {
  overflow-wrap:anywhere
}

.section-head {
  min-width:0
}

.section-head h2,.section-head span {
  min-width:0;
  overflow-wrap:anywhere
}

.production-card h3,.craft-product-info,.worker-job-role,.worker-job-meta,.recipe-toggle-row>span {
  min-width:0;
  overflow-wrap:anywhere
}

.table-wrap {
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch
}

@media(min-width:900px) {
  .language-menu {
    min-width:min(780px,calc(100vw - 24px))!important
  }
  .language-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))!important
  }
}

@media(max-width:899px) {
  .language-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }
}

@media(max-width:520px) {
  .language-menu {
    padding:10px!important
  }
  .language-split {
    grid-template-columns:1fr 1fr;
    gap:6px
  }
  .language-mode {
    grid-template-columns:31px minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px 8px!important;
    min-height:55px!important
  }
  .language-mode img {
    width:30px;
    height:21px
  }
  .language-mode b {
    font-size:11px
  }
  .language-mode small {
    font-size:9px
  }
  .level-heading {
    gap:6px 10px!important
  }
  .level-heading h2 {
    font-size:clamp(16px,5vw,21px)!important
  }
}

@media(max-width:430px) {
  .language-grid {
    grid-template-columns:1fr!important
  }
  .language-option {
    min-height:50px!important
  }
}

.level-heading {
  grid-template-columns:minmax(0,1fr) minmax(36px,max-content)!important
}

.level-heading h2 {
  padding-right:2px!important
}

.level-heading strong {
  position:relative!important;
  z-index:1!important;
  max-width:100%;
  text-align:right!important
}

.planner-sidebar,.planner-sidebar * {
  box-sizing:border-box
}

.planner-sidebar label,.planner-sidebar summary,.planner-sidebar button {
  max-width:100%
}

.setup-mode-main,.worker-level-segmented,.segmented,.goal-grid {
  grid-auto-rows:auto!important
}

.setup-mode-main button,.worker-level-segmented button,.segmented button,.goal-btn {
  min-height:44px!important;
  padding-block:9px!important;
  overflow:visible!important;
  text-overflow:clip!important
}

.sidebar-dropdown:not(.planner-settings-disclosure) summary {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important
}

.sidebar-dropdown summary>span {
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important
}

.sidebar-dropdown summary>strong {
  flex:none!important;
  white-space:nowrap!important
}

.game-localized-name,.personality-inline>span,.worker-ability b span,.worker-job-personality,.facility-name-cell,.production-card h3,.layout-legend b {
  overflow-wrap:anywhere;
  word-break:normal
}

.worker-ability {
  min-width:0
}

.worker-ability b {
  min-width:0;
  white-space:normal;
  line-height:1.22
}

.worker-ability>img {
  flex:0 0 auto
}

.worker-job-meta {
  max-width:100%
}

.worker-job-personality {
  white-space:normal
}

.personality-inline {
  max-width:100%;
  min-width:0
}

.personality-inline>span:last-child {
  min-width:0;
  white-space:normal
}

.aniimo-options>span {
  min-width:0
}

.aniimo-options small {
  display:block;
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:anywhere;
  line-height:1.15
}

.metrics {
  min-width:0
}

.metric {
  min-width:0;
  overflow:hidden
}

.metric label,.metric small {
  white-space:normal!important;
  max-width:100%
}

.metric strong {
  max-width:100%
}

.metric-money {
  max-width:100%
}

.facility-input,.advanced-facility-row,.owned-material-row {
  min-width:0
}

.facility-name-cell {
  min-width:0!important;
  max-width:100%
}

.facility-name-cell .game-localized-name {
  white-space:normal!important
}

@media(max-width:520px) {
  .level-heading {
    grid-template-columns:minmax(0,1fr) minmax(32px,max-content)!important
  }
  .worker-card {
    min-width:0!important;
    overflow:hidden
  }
  .worker-ability {
    align-items:flex-start!important
  }
}

.inline-help-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  min-width:22px;
  margin-left:5px;
  padding:0;
  border:1px solid #7650a1;
  border-radius:50%;
  background:#2b2038;
  color:#dcbcff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  vertical-align:middle;
  cursor:pointer
}

.inline-help-btn:hover {
  background:#432c59;
  border-color:#a477d1;
  color:#fff
}

.section-head h2 {
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap
}

.feature-help-dialog,.facility-price-dialog {
  width:min(660px,calc(100vw - 24px));
  max-height:min(82vh,760px);
  overflow:auto;
  border:1px solid #604875;
  border-radius:16px;
  background:#111d28;
  color:#edf5fa;
  box-shadow:0 24px 80px #000b;
  padding:0
}

.feature-help-dialog::backdrop,.facility-price-dialog::backdrop,.compact-data-dialog::backdrop {
  background:#03070ccb
}

.feature-help-dialog>.close,.facility-price-dialog>.close {
  position:sticky;
  float:right;
  top:10px;
  right:10px;
  z-index:3;
  margin:10px 10px 0 0
}

.feature-dialog-head {
  padding:18px 20px
}

.feature-dialog-head h2 {
  margin:2px 38px 7px 0
}

.feature-dialog-head p {
  margin:0;
  color:#b6c7d1;
  line-height:1.55
}

.advanced-tab-explainer {
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid #3b4f5c;
  border-radius:10px;
  background:#132430
}

.advanced-tab-explainer b {
  display:block;
  margin-bottom:2px
}

.advanced-tab-explainer span {
  display:block;
  color:#a8bbc6;
  font-size:12px;
  line-height:1.45
}

.compact-data-dialog {
  width:min(760px,calc(100vw - 24px));
  max-height:min(88vh,840px)
}

.upgrade-inline-tools {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:7px
}

.mini-action {
  border:1px solid #5f4980;
  background:#281f35;
  color:#dcc5f1;
  border-radius:7px;
  padding:5px 7px;
  font-size:10px;
  font-weight:800;
  cursor:pointer
}

.mini-action:hover {
  background:#3c2950;
  color:#fff
}

.facility-price-list {
  display:grid;
  gap:7px;
  padding:0 18px 14px
}

.facility-price-row {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:8px 9px;
  border:1px solid #304858;
  border-radius:10px;
  background:#142633
}

.facility-price-row>.facility-mini-icon {
  width:36px;
  height:36px
}

.facility-price-row>span b,.facility-price-row>span small {
  display:block
}

.facility-price-row>span small {
  color:#98acb8;
  font-size:10px;
  margin-top:2px
}

.facility-price-row>strong {
  text-align:right;
  font-size:11px
}

.facility-price-row>strong small {
  display:block;
  margin-top:2px;
  color:#9eb1bc
}

.facility-price-row .coin-icon {
  width:16px;
  height:16px;
  vertical-align:-3px;
  margin-right:3px
}

.facility-price-total {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin:0 18px 18px;
  padding:11px 12px;
  border:1px solid #69507c;
  background:#21182a;
  border-radius:10px
}

.facility-price-total span {
  color:#b9a8c8;
  font-size:11px
}

.facility-price-total b {
  font-size:17px;
  white-space:nowrap
}

.facility-price-total .coin-icon {
  width:20px;
  height:20px;
  vertical-align:-4px;
  margin-right:4px
}

#reverse-layout:disabled {
  opacity:.42;
  cursor:not-allowed
}

.crackle-plan-note {
  border-color:#456277!important;
  background:#142634!important
}

.crackle-plan-note b {
  color:#bfe3f5!important
}

#emode-option {
  border-color:inherit!important
}

.experimental-hint {
  color:inherit!important
}

@media(min-width:761px) {
  header {
    position:sticky;
    top:0;
    z-index:70;
    background:rgba(16,25,35,.96);
    backdrop-filter:blur(14px);
    box-shadow:0 1px 0 #ffffff12
  }

  .planner-sidebar {
    background:#131f2a;
    border-right-color:#2c3c49
  }

  main {
    padding:36px clamp(28px,3.2vw,52px) 72px
  }
}

.section-head {
  padding-bottom:11px;
  border-bottom:1px solid #2d3e4b
}

.metric {
  border-color:#334653;
  border-radius:10px;
  background:linear-gradient(155deg,#1b2a36,#172430);
  box-shadow:0 9px 24px #050b121c
}

.metric:first-child {
  border-color:#3a5963;
  background:linear-gradient(145deg,#1d3844,#1a303a)
}

.production-card,.flow-card,.climate-map,.table-wrap {
  border-color:#344653;
  border-radius:10px
}

.table-wrap {
  box-shadow:0 8px 24px #050b1214
}

table {
  background:#15232e
}

th {
  background:#1c2b38;
  color:#bac8d2
}

:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid #c4a6e8;
  outline-offset:3px
}

@media(max-width:760px) {
  .planner-sidebar .planner-settings-disclosure[data-mobile-expand]>summary {
    display:none!important
  }

  .section-head {
    padding-bottom:9px
  }

  main {
    padding-inline:16px
  }
}

@media(min-width:1100px) and (max-width:1599px) {
  .shell {
    grid-template-columns:320px minmax(0,1fr)
  }

  .production-grid {
    column-count:2
  }
}

@media(min-width:1600px) {
  .shell {
    grid-template-columns:320px minmax(0,1fr)
  }
}

.planner-sidebar label:not(.check) {
  font-size:15px
}

.planner-sidebar .check {
  font-size:14px;
  line-height:1.4
}

.planner-sidebar .hint,.goal-shared-note {
  font-size:14px;
  line-height:1.5
}

.planner-settings-disclosure>summary {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 24px;
  gap:10px;
  align-items:center
}

.disclosure-summary-copy {
  display:grid;
  min-width:0;
  gap:3px
}

.disclosure-summary-copy>span {
  color:#e5d6f6;
  font-size:14px;
  line-height:1.3
}

.disclosure-summary-copy>small {
  overflow:hidden;
  color:#aebdca;
  font-size:12px;
  font-weight:500;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.production-card>h3 {
  font-size:16px
}

.product-row b {
  font-size:16px
}

.product-row p,.product-row .qty {
  font-size:14px;
  line-height:1.45
}

.table-wrap table {
  font-size:15px
}

.table-wrap th {
  font-size:13px
}

@media(max-width:760px) {
  .planner-sidebar .planner-settings-disclosure>summary {
    grid-template-columns:minmax(0,1fr) 24px
  }

  .planner-sidebar .hint,.goal-shared-note {
    font-size:13px
  }

  .product-row p,.product-row .qty {
    font-size:12.5px!important
  }

  .section-head>span {
    font-size:12.5px!important
  }
}

@media(max-width:760px) {
  .inline-help-btn {
    width:24px;
    height:24px;
    min-width:24px
  }
  .upgrade-inline-tools {
    width:100%
  }
  .mini-action {
    flex:1 1 145px;
    min-height:34px
  }
  .facility-price-row {
    grid-template-columns:34px minmax(0,1fr);
    gap:7px
  }
  .facility-price-row>strong {
    grid-column:1/-1;
    text-align:left;
    padding-left:41px
  }
  .facility-price-total {
    align-items:flex-start;
    flex-direction:column
  }
  .compact-data-dialog .advanced-setup-footer {
    gap:8px;
    align-items:flex-start
  }
  .compact-data-dialog .advanced-setup-footer>div {
    width:100%;
    display:flex;
    gap:7px
  }
  .compact-data-dialog .advanced-setup-footer button {
    flex:1
  }
}


/* Floor Planner quantity controls */
.layout-quantity-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-bottom:10px
}

.layout-quantity-control {
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#111f2a
}

.layout-quantity-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px
}

.layout-quantity-head label {
  margin:0!important;
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.layout-quantity-max {
  flex:0 0 auto;
  color:var(--muted);
  font-size:10px;
  font-weight:700
}

.layout-quantity-control select {
  margin:0!important;
  min-height:38px;
  width:100%;
  font-weight:800
}

.layout-quantity-control small {
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35
}

.layout-quantity-control .layout-quantity-warning {
  color:#f2b4a9;
  font-weight:800
}

@media (max-width:760px), (max-width:960px) and (pointer:coarse) {
  .layout-quantity-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px
  }

  .layout-quantity-control {
    padding:9px
  }

  .layout-quantity-head {
    align-items:flex-start
  }

  .layout-quantity-head label {
    font-size:11px
  }

  .layout-quantity-max {
    font-size:9px
  }

  .layout-quantity-control select {
    min-height:40px
  }
}

@media (max-width:420px) {
  .layout-quantity-grid {
    grid-template-columns:1fr
  }
}


/* Optional recipe icons and owned-plot grid for the Floor Layout Planner. */
.placed .placed-icon.recipe-icon{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}
.land-plot.plot-grid-visible{background-color:#203b48;background-image:linear-gradient(rgba(177,211,225,.19) 1px,transparent 1px),linear-gradient(90deg,rgba(177,211,225,.19) 1px,transparent 1px);background-size:18px 18px;}

/* Multi-select Homeland goal controls. */
#strategy-grid.goal-grid{display:flex!important;flex-direction:column;gap:9px;grid-template-columns:none!important}
#strategy-grid .goal-toggle-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
#strategy-grid .goal-btn{width:100%;min-width:0;white-space:nowrap;font-size:clamp(10px,2.7vw,13px);letter-spacing:-.02em;padding:10px 4px;line-height:1.15;min-height:46px}
#strategy-grid .goal-toggle-row .goal-btn.active{background:#6C3BAA;border-color:#6C3BAA;color:#fff;box-shadow:0 0 0 1px #8a63be inset}
#strategy-grid .goal-upgrade-btn{background:#142b32;border-color:#35616a;color:#d5f0f1;font-size:13px;letter-spacing:0}
#strategy-grid .goal-upgrade-btn.active{background:#28616b;border-color:#4b9ba6;color:#fff;box-shadow:0 0 0 1px #72b8bf inset}
.goal-prompt{margin:0 0 7px;color:var(--muted,#a9a4b6);font-size:12px;line-height:1.35;font-weight:500}
.goal-shared-note{margin-top:8px}
[data-settings-choice="goal"]{white-space:normal;overflow-wrap:anywhere}
@media(max-width:360px){#strategy-grid .goal-toggle-row{gap:5px}#strategy-grid .goal-btn{padding-inline:3px;font-size:10px}}


/* Mobile custom-setup scroll fix: keep the header, category bar and actions fixed while the full facility list scrolls. */
@media (max-width:760px), (max-width:960px) and (pointer:coarse) {
  #advanced-setup-dialog.advanced-setup-dialog[open] {
    display:flex!important;
    flex-direction:column!important;
    height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #advanced-setup-dialog .advanced-setup-head,
  #advanced-setup-dialog .advanced-setup-toolbar {
    flex:0 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
  }
  #advanced-setup-dialog .advanced-setup-footer {
    flex:0 0 auto!important;
    min-height:0!important;
  }
  #advanced-setup-dialog .advanced-setup-content {
    flex:1 1 0!important;
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    touch-action:pan-y;
    scrollbar-gutter:stable;
  }
  #advanced-setup-dialog .advanced-setup-footer {
    position:relative!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
}


/* Homeland goal summary: allow every selected goal to remain visible. */
#goal-settings-menu>summary .disclosure-summary-copy {
  min-width:0;
  max-width:100%;
}
#goal-settings-menu>summary .disclosure-summary-copy>small {
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Goal summary: show every selected goal; the label is updated by syncStrategyButtons(). */
#goal-settings-menu>summary{align-items:start!important}
#goal-settings-menu>summary .disclosure-summary-copy{display:grid!important;min-width:0!important;max-width:100%!important}
#goal-settings-menu>summary .disclosure-summary-copy>small{display:block!important;height:auto!important;max-height:none!important;min-width:0!important;max-width:100%!important;overflow:visible!important;text-overflow:unset!important;white-space:normal!important;overflow-wrap:anywhere!important}


/* Separate E-mode and Aniimo crafting views while keeping the existing card/table system. */
.crafting-view-stack { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:12px; }
.crafting-view-card { display:block; width:100%; margin:0; }
.crafting-view-card > .table-wrap { margin:0; border:0; border-radius:0; box-shadow:none; }
.crafting-view-card > .empty { margin:14px 16px 16px; }

/* Clarify that generator mode must be enabled on each powered facility. */
.crafting-view-card .emode-building-note { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }

/* ==========================================================
   Aniiland 2.3.0 — RV planning tools + Max Potential
   ========================================================== */
.max-potential-open {
  width:100%;
  margin-top:8px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-color:#5f4980;
  background:#211a2b;
  color:#d9c4ee;
  font-weight:800;
}
.max-potential-open:hover {background:#30213e;color:#fff}
.max-potential-open:disabled {opacity:.5;cursor:wait}

.upgrade-planning-tools {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px;
  margin-top:2px;
  border:1px solid #3b5262;
  border-radius:10px;
  background:#12232e;
}
.upgrade-planning-tools>span {min-width:170px}
.upgrade-planning-tools>span b,
.upgrade-planning-tools>span small {display:block}
.upgrade-planning-tools>span b {font-size:12px;color:#e8f1f7}
.upgrade-planning-tools>span small {font-size:10px;line-height:1.35;margin-top:2px}
.upgrade-tool-actions {display:flex;flex:1;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.upgrade-tool-actions .mini-action {min-height:34px;padding:7px 10px;font-size:10px;line-height:1.2}
.upgrade-tool-actions .mini-action.important {
  border-color:#9b7832;
  background:#332b16;
  color:#ffe18a;
}
.upgrade-tool-actions .mini-action.important:hover {background:#4b3c19;color:#fff0b0}

/* Fit both RV cost columns at once on normal desktop viewports. Each RV column
   itself uses a compact two-column building grid so there is no inner list scroll. */
.facility-price-dialog {
  width:min(1380px,calc(100vw - 20px))!important;
  max-height:calc(100dvh - 20px)!important;
  overflow:visible!important;
}
.facility-price-dialog .feature-dialog-head {padding:10px 16px 7px!important}
.facility-price-dialog .feature-dialog-head h2 {font-size:18px;margin-bottom:4px}
.facility-price-dialog .feature-dialog-head p {font-size:10px!important;line-height:1.3!important}
.facility-price-dialog .facility-price-columns {gap:8px;padding:0 10px 10px!important}
.facility-price-dialog .facility-price-column-head {padding:7px 9px}
.facility-price-dialog .facility-price-column .facility-price-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px!important;
  padding:6px!important;
}
.facility-price-dialog .facility-price-row {
  min-width:0;
  padding:4px 6px!important;
  gap:6px!important;
  grid-template-columns:28px minmax(0,1fr) auto!important;
}
.facility-price-dialog .facility-price-row>.facility-mini-icon {width:27px!important;height:27px!important}
.facility-price-dialog .facility-price-row>span {min-width:0}
.facility-price-dialog .facility-price-row>span b {font-size:10px!important;line-height:1.15;overflow-wrap:anywhere}
.facility-price-dialog .facility-price-row>span small {font-size:8px!important;line-height:1.15!important}
.facility-price-dialog .facility-price-row>strong {font-size:9px!important;white-space:nowrap}
.facility-price-dialog .facility-price-row>strong small {font-size:8px!important}
.facility-price-dialog .important-upgrade-badge {font-size:7px;padding:1px 4px;margin-left:3px}
.facility-price-dialog .facility-price-total {margin:0 6px 6px!important;padding:6px 8px!important}
.facility-price-dialog .facility-price-total b {font-size:13px!important}

.important-upgrades-dialog {
  width:min(1160px,calc(100vw - 24px));
  max-height:min(92dvh,900px);
  overflow:auto;
  border:1px solid #604875;
  border-radius:16px;
  background:#111d28;
  color:#edf5fa;
  box-shadow:0 24px 80px #000b;
  padding:0;
}
.important-upgrades-dialog::backdrop,.max-potential-dialog::backdrop {background:#03070ccb}
.important-upgrades-dialog>.close {position:sticky;float:right;top:10px;right:10px;z-index:4;margin:10px 10px 0 0}
.important-upgrades-columns {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 18px 18px}
.important-rv-section {min-width:0;border:1px solid #334b5c;border-radius:12px;background:#101f2a;overflow:hidden}
.important-rv-head {display:flex;align-items:center;justify-content:space-between;padding:9px 11px;background:#162a38;border-bottom:1px solid #334b5c}
.important-rv-head span {font-size:10px;font-weight:900;color:#b7c8d3;letter-spacing:.05em}
.important-rv-head b {font-size:17px;color:#d9b7f2}
.important-rv-section>h3 {margin:12px 12px 7px;font-size:12px;color:#dce8ef}
.important-upgrade-list,.component-impact-list {display:grid;gap:7px;padding:0 10px 11px}
.important-upgrade-row {display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border:1px solid #67582e;border-radius:9px;background:linear-gradient(135deg,#282416,#152630)}
.important-upgrade-row>.facility-mini-icon {width:32px;height:32px}
.important-upgrade-row>span b,.important-upgrade-row>span small {display:block}
.important-upgrade-row>span b {font-size:11px}
.important-upgrade-row>span small {font-size:9px;color:#9fb0ba;margin-top:2px}
.important-upgrade-row>strong {font-size:11px;white-space:nowrap}
.important-upgrade-row .coin-icon {width:15px;height:15px;vertical-align:-3px;margin-right:3px}
.component-impact-row {padding:9px 10px;border:1px solid #344c5c;border-radius:9px;background:#142631}
.component-impact-head {display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.component-impact-head>span b,.component-impact-head>span small {display:block}
.component-impact-head>span b {font-size:11px}
.component-impact-head>span small {font-size:9px;color:#9eb1bc;margin-top:2px}
.component-impact-head>strong {font-size:11px;text-align:right;white-space:nowrap}
.component-impact-head>strong.profit {color:#87e3a8}
.component-impact-row>p {margin:8px 0;color:#b4c4ce;font-size:10px;line-height:1.45}
.component-impact-comparison {display:flex;gap:6px;flex-wrap:wrap}
.component-impact-comparison>span {padding:4px 6px;border-radius:6px;background:#0f1e28;color:#aebfca;font-size:9px}
.component-impact-comparison .coin-icon {width:13px;height:13px;vertical-align:-2px}
.analysis-loading {display:flex;align-items:center;justify-content:center;gap:10px;min-height:150px;color:#c7d4dc}
.analysis-spinner {width:22px;height:22px;border:3px solid #3c4e59;border-top-color:#9e6bce;border-radius:50%;animation:aniiland-analysis-spin .8s linear infinite}
@keyframes aniiland-analysis-spin {to{transform:rotate(360deg)}}

.max-potential-dialog {
  width:min(1160px,calc(100vw - 24px));
  max-height:min(92dvh,920px);
  min-height:0;
}
.max-potential-dialog[open] {display:flex;flex-direction:column;overflow:hidden}
.max-potential-dialog .advanced-setup-head {flex:0 0 auto}
.max-potential-dialog .advanced-setup-head p {max-width:920px}
.max-potential-content {flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding:14px 16px!important}
.max-potential-footer {flex:0 0 auto!important}
.max-potential-intro .note {margin:0}
.potential-metrics {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.potential-metric-card {min-width:0;display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #34505f;border-radius:10px;background:#142733}
.potential-metric-card>img,.potential-metric-card>.item-icon,.potential-metric-card>.coin-icon {width:32px;height:32px;object-fit:contain;flex:0 0 auto}
.potential-metric-card>span {min-width:0}
.potential-metric-card>span>small {display:block;color:#9fb4c0;font-size:8px;font-weight:900;letter-spacing:.04em;overflow-wrap:anywhere}
.potential-metric-card>span>b {display:block;margin-top:2px;font-size:13px;line-height:1.2;overflow-wrap:anywhere}
.potential-metric-card>span>small:last-child {margin-top:3px;color:#b7a3c9;font-weight:600;letter-spacing:0}
.potential-improvements {margin-top:15px}
.potential-improvements>h3 {margin:0 0 8px;font-size:13px}
.potential-improvement-row {display:grid;grid-template-columns:minmax(160px,.8fr) minmax(0,1.5fr);gap:10px;align-items:start;padding:9px 10px;border:1px solid #344b5a;border-radius:9px;background:#13242f;margin-bottom:7px}
.potential-improvement-row>span b,.potential-improvement-row>span small {display:block}
.potential-improvement-row>span b {font-size:11px}
.potential-improvement-row>span small {font-size:9px;color:#9db0bb;margin-top:2px;line-height:1.3}
.potential-improvement-row>div {display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.potential-improvement-row em {font-style:normal;padding:4px 6px;border-radius:6px;background:#173326;color:#9ce4b4;font-size:9px}
.max-potential-progress {padding:14px;border:1px solid #455d6d;border-radius:11px;background:#142631}
.potential-progress-head {display:flex;justify-content:space-between;gap:12px;align-items:center}
.potential-progress-head>b {font-size:13px}
.potential-progress-head>span {font-variant-numeric:tabular-nums;color:#d9c3ef;font-weight:800}
.potential-progress-track {height:12px;margin:12px 0 9px;border-radius:999px;overflow:hidden;background:#0d1820;border:1px solid #314651}
.potential-progress-track>i {display:block;width:0;height:100%;background:linear-gradient(90deg,#7542b6,#9b64d4);transition:width .18s ease}
.max-potential-progress p {margin:0;font-size:11px;color:#d6e2e9}
.max-potential-progress small {display:block;margin-top:4px;color:#91a7b4;font-size:9px}

@media(max-width:1000px) {
  .facility-price-dialog .facility-price-column .facility-price-list {grid-template-columns:1fr}
  .potential-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:760px), (max-width:960px) and (pointer:coarse) {
  .upgrade-planning-tools {align-items:stretch;flex-direction:column;gap:8px}
  .upgrade-tool-actions {display:grid;grid-template-columns:1fr;gap:6px}
  .upgrade-tool-actions .mini-action {width:100%;min-height:40px;font-size:11px}
  .facility-price-dialog {width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;overflow:auto!important}
  .facility-price-dialog .facility-price-columns {grid-template-columns:1fr!important}
  .facility-price-dialog .facility-price-column .facility-price-list {grid-template-columns:1fr}
  .facility-price-dialog .facility-price-row {grid-template-columns:30px minmax(0,1fr) auto!important}
  .facility-price-dialog .facility-price-row>strong {grid-column:auto!important;padding-left:0!important;text-align:right!important}
  .important-upgrades-dialog {width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
  .important-upgrades-columns {grid-template-columns:1fr;padding:0 9px 12px}
  .important-upgrade-row {grid-template-columns:32px minmax(0,1fr) auto}
  .component-impact-head {flex-direction:column}
  .component-impact-head>strong {text-align:left}
  .max-potential-dialog.advanced-setup-dialog[open] {
    width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .max-potential-dialog .advanced-setup-head {flex:0 1 auto!important;min-height:0!important;overflow:auto!important}
  .max-potential-dialog .max-potential-content {flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  .max-potential-dialog .max-potential-footer {flex:0 0 auto!important;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}
  .max-potential-dialog .max-potential-footer>div {width:100%;display:flex;gap:7px}
  .max-potential-dialog .max-potential-footer button {flex:1}
  .potential-metrics {grid-template-columns:1fr 1fr}
  .potential-improvement-row {grid-template-columns:1fr}
  .potential-improvement-row>div {justify-content:flex-start}
}

@media(max-width:400px) {
  .potential-metrics {grid-template-columns:1fr}
  .facility-price-dialog .facility-price-row {grid-template-columns:28px minmax(0,1fr)!important}
  .facility-price-dialog .facility-price-row>strong {grid-column:1/-1!important;text-align:left!important;padding-left:34px!important}
}

/* Keep the two planner calculation actions together and reachable in the mobile settings sheet. */
@media (max-width:760px), (max-width:960px) and (pointer:coarse) {
  html.aniiland-phone .planner-sidebar.mobile-settings-open > #optimize {
    order:90!important;
    bottom:46px!important;
    margin-bottom:6px!important;
  }
  html.aniiland-phone .planner-sidebar.mobile-settings-open > #max-potential-open {
    order:91!important;
    position:sticky!important;
    bottom:0!important;
    z-index:5!important;
    min-height:40px!important;
    margin:0!important;
    box-shadow:0 0 0 12px #111c27,0 12px 20px #111c27!important;
  }
}


/* ==========================================================
   Aniiland 2.3.0 — gradual E-mode + RV/Max Potential refinements
   ========================================================== */

/* Give the current/next RV cost comparison as much horizontal room as practical. */
.facility-price-dialog {
  width:min(1700px,calc(100vw - 12px))!important;
  max-width:none!important;
  max-height:calc(100dvh - 12px)!important;
}
.facility-price-dialog .feature-dialog-head {padding-left:20px!important;padding-right:48px!important}
.facility-price-dialog .feature-dialog-head h2 {font-size:20px!important;line-height:1.18}
.facility-price-dialog .feature-dialog-head p {font-size:11px!important;max-width:1300px}
.facility-price-dialog .facility-price-columns {gap:12px!important;padding:0 12px 12px!important}
.facility-price-dialog .facility-price-column .facility-price-list {gap:7px!important;padding:8px!important}
.facility-price-dialog .facility-price-row {padding:6px 8px!important;gap:8px!important;grid-template-columns:32px minmax(0,1fr) auto!important}
.facility-price-dialog .facility-price-row>.facility-mini-icon {width:30px!important;height:30px!important}
.facility-price-dialog .facility-price-row>span b {font-size:11px!important;line-height:1.2}
.facility-price-dialog .facility-price-row>span small {font-size:9px!important;line-height:1.2!important}
.facility-price-dialog .facility-price-row>strong {font-size:10px!important}
.facility-price-totals {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:0 8px 8px;
}
.facility-price-totals>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid #344c5b;
  border-radius:8px;
  background:#10212c;
}
.facility-price-totals>span.important {border-color:#80672e;background:#292413}
.facility-price-totals small {font-size:9px;font-weight:900;letter-spacing:.04em;color:#aebfca;text-transform:uppercase}
.facility-price-totals .important small {color:#ffe08a}
.facility-price-totals b {font-size:14px;white-space:nowrap}
.facility-price-totals .coin-icon {width:17px;height:17px;vertical-align:-3px;margin-right:3px}

/* Important Upgrades now focuses only on the current RV level. */
.important-upgrades-columns.single {
  grid-template-columns:minmax(0,1fr)!important;
  max-width:960px;
  margin:0 auto;
}
.analysis-period-toggle {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  margin-top:10px;
}
.analysis-period-toggle>span {
  margin-right:3px;
  color:#9fb1bc;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.analysis-period-toggle button {
  min-width:46px;
  min-height:28px;
  padding:4px 9px;
  border:1px solid #405868;
  border-radius:7px;
  background:#122530;
  color:#b9c8d1;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.analysis-period-toggle button:hover {background:#1b3340;color:#fff}
.analysis-period-toggle button.active {
  border-color:#8f66b7;
  background:#322044;
  color:#f0dcff;
  box-shadow:inset 0 0 0 1px #8f66b733;
}

/* Max Potential: make the wait explicit and make completed results much easier to scan. */
.max-potential-warning {margin:0 0 12px!important}
.max-potential-intro .analysis-period-toggle,
.potential-results>.analysis-period-toggle {margin:0 0 13px}
.potential-metrics {gap:11px!important}
.potential-metric-card {
  min-height:84px;
  gap:11px!important;
  padding:14px!important;
  border-width:1px!important;
  box-shadow:inset 0 1px 0 #ffffff08;
}
.potential-metric-card>img,
.potential-metric-card>.item-icon,
.potential-metric-card>.coin-icon {
  width:42px!important;
  height:42px!important;
}
.potential-metric-card>span>small {font-size:9px!important}
.potential-metric-card>span>b {font-size:17px!important;line-height:1.18!important;margin-top:4px!important}
.potential-metric-card>span>b>em {font-style:normal;font-size:10px;color:#afbec7;font-weight:800}
.potential-metric-card.metric-coins {border-color:#34505f;background:#142733}
.potential-metric-card.metric-coins>span>b {color:#edf7fb}
.potential-metric-card.metric-growth {border-color:#7d55a2;background:linear-gradient(135deg,#2c1d3d,#172733)}
.potential-metric-card.metric-growth>span>small:first-child,
.potential-metric-card.metric-growth>span>b {color:#dcb8ff}
.potential-metric-card.metric-aniipod {border-color:#c58b49;background:linear-gradient(135deg,#30271c,#192833)}
.potential-metric-card.metric-aniipod>span>small:first-child {color:#fff1dc}
.potential-metric-card.metric-aniipod>span>b {color:#ffc978}
.potential-metric-card.metric-wood_block {border-color:#806044;background:linear-gradient(135deg,#2b2119,#172833)}
.potential-metric-card.metric-wood_block>span>small:first-child,
.potential-metric-card.metric-wood_block>span>b {color:#d5ad7c}
.potential-metric-card.metric-mineral_sand {border-color:#697783;background:linear-gradient(135deg,#252c31,#172630)}
.potential-metric-card.metric-mineral_sand>span>small:first-child,
.potential-metric-card.metric-mineral_sand>span>b {color:#cbd4da}

.potential-improvement-row {padding:12px!important;gap:12px!important}
.potential-improvement-row>span b {font-size:12px!important}
.potential-improvement-row>span small {font-size:10px!important}
.potential-improvement-row>div {gap:7px!important}
.potential-improvement-row em {
  padding:7px 9px!important;
  font-size:11px!important;
  line-height:1.25;
  border:1px solid transparent;
}
.potential-change.metric-coins {background:#173326;color:#9ce4b4;border-color:#315c45}
.potential-change.metric-growth {background:#322044;color:#dcb8ff;border-color:#7953a0}
.potential-change.metric-aniipod {background:#38291a;color:#ffd39a;border-color:#9a6b36}
.potential-change.metric-wood_block {background:#332519;color:#dcb58a;border-color:#76583e}
.potential-change.metric-mineral_sand {background:#283139;color:#d0d8de;border-color:#5f6d78}

@media(max-width:760px), (max-width:960px) and (pointer:coarse) {
  .facility-price-dialog {width:calc(100vw - 8px)!important;max-height:calc(100dvh - 8px)!important}
  .facility-price-totals {grid-template-columns:1fr 1fr;margin:0 6px 8px}
  .facility-price-totals>span {padding:7px}
  .analysis-period-toggle {flex-wrap:wrap}
  .potential-metric-card {min-height:76px;padding:11px!important}
  .potential-metric-card>img,
  .potential-metric-card>.item-icon,
  .potential-metric-card>.coin-icon {width:36px!important;height:36px!important}
  .potential-metric-card>span>b {font-size:15px!important}
}

@media(max-width:400px) {
  .facility-price-totals {grid-template-columns:1fr}
}

/* ==========================================================
   Aniiland 2.3.0 R3 — readability + workload/event refinements
   ========================================================== */

/* RV planning actions: slightly larger hit targets and labels. */
.upgrade-tool-actions .mini-action {
  min-height:40px;
  padding:9px 13px;
  font-size:11.5px;
  line-height:1.25;
}

/* Current/next RV cost window: use nearly the full desktop viewport and larger type. */
.facility-price-dialog {
  width:min(1850px,calc(100vw - 4px))!important;
  max-height:calc(100dvh - 4px)!important;
}
.facility-price-dialog .feature-dialog-head {padding:13px 54px 9px 22px!important}
.facility-price-dialog .feature-dialog-head h2 {font-size:22px!important;line-height:1.18!important}
.facility-price-dialog .feature-dialog-head p {font-size:12px!important;line-height:1.38!important;max-width:1500px}
.facility-price-dialog .facility-price-columns {gap:14px!important;padding:0 14px 14px!important}
.facility-price-dialog .facility-price-column-head {padding:9px 11px!important}
.facility-price-dialog .facility-price-column-head span {font-size:11px!important}
.facility-price-dialog .facility-price-column-head b {font-size:16px!important}
.facility-price-dialog .facility-price-column .facility-price-list {gap:8px!important;padding:9px!important}
.facility-price-dialog .facility-price-row {padding:7px 9px!important;gap:9px!important;grid-template-columns:36px minmax(0,1fr) auto!important}
.facility-price-dialog .facility-price-row>.facility-mini-icon {width:34px!important;height:34px!important}
.facility-price-dialog .facility-price-row>span b {font-size:13px!important;line-height:1.2!important}
.facility-price-dialog .facility-price-row>span small {font-size:10px!important;line-height:1.25!important;margin-top:2px}
.facility-price-dialog .facility-price-row>strong {font-size:11.5px!important}
.facility-price-dialog .facility-price-row>strong small {font-size:9.5px!important}
.facility-price-dialog .important-upgrade-badge {font-size:8px!important;padding:2px 5px!important}
.facility-price-totals {gap:9px;margin:0 9px 9px}
.facility-price-totals>span {padding:10px 12px}
.facility-price-totals small {font-size:10px}
.facility-price-totals b {font-size:16px}

/* Important Upgrades: larger explanatory text and result rows. */
.important-upgrades-dialog {width:min(1240px,calc(100vw - 16px))}
.important-upgrades-dialog .feature-dialog-head h2 {font-size:22px!important}
.important-upgrades-dialog .feature-dialog-head p {font-size:12px!important;line-height:1.45!important}
.important-rv-head span {font-size:10px!important}
.important-rv-head b {font-size:19px!important}
.important-rv-section>h3 {font-size:14px!important;margin-top:14px!important}
.important-upgrade-row {grid-template-columns:39px minmax(0,1fr) auto;gap:10px;padding:10px}
.important-upgrade-row>.facility-mini-icon {width:37px;height:37px}
.important-upgrade-row>span b {font-size:13px}
.important-upgrade-row>span small {font-size:10.5px;line-height:1.35}
.important-upgrade-row>strong {font-size:13px}
.component-impact-row {padding:11px 12px}
.component-impact-head>span b {font-size:13px!important}
.component-impact-head>span small {font-size:10.5px!important}
.component-impact-head>strong {font-size:13px!important}
.component-impact-row>p {font-size:11.5px!important;line-height:1.45!important}
.component-impact-comparison {font-size:10.5px!important;gap:9px!important}
.analysis-period-toggle>span {font-size:10px}
.analysis-period-toggle button {min-width:50px;min-height:31px;font-size:11px}

/* Harvest Moon recipes use the normal recipe-lock affordance without relying on the tracker. */
.recipe-event-tag {
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border:1px solid #8d6cb4;
  border-radius:999px;
  background:#30203f;
  color:#ecd6ff;
  font-size:10.5px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
}
.lock-dialog-head .recipe-event-tag {font-size:11px;padding:4px 9px}

/* Max Potential output colors: more gold for AniiPods, warmer brown for wood. */
.potential-metric-card.metric-aniipod {border-color:#d1a632;background:linear-gradient(135deg,#382e12,#192833)}
.potential-metric-card.metric-aniipod>span>small:first-child {color:#fff0b8}
.potential-metric-card.metric-aniipod>span>b {color:#ffdc68}
.potential-metric-card.metric-wood_block {border-color:#8a5330;background:linear-gradient(135deg,#341f13,#172833)}
.potential-metric-card.metric-wood_block>span>small:first-child,
.potential-metric-card.metric-wood_block>span>b {color:#dda06a}
.potential-change.metric-aniipod {background:#40330f;color:#ffe08b;border-color:#aa8225}
.potential-change.metric-wood_block {background:#3a2115;color:#dda16c;border-color:#805034}

@media(max-width:760px), (max-width:960px) and (pointer:coarse) {
  .upgrade-tool-actions .mini-action {min-height:44px;padding:10px 12px;font-size:12px}
  .facility-price-dialog {width:calc(100vw - 6px)!important;max-height:calc(100dvh - 6px)!important}
  .facility-price-dialog .feature-dialog-head h2 {font-size:19px!important}
  .facility-price-dialog .feature-dialog-head p {font-size:11px!important}
  .facility-price-dialog .facility-price-row {grid-template-columns:34px minmax(0,1fr) auto!important}
  .facility-price-dialog .facility-price-row>span b {font-size:12px!important}
  .facility-price-dialog .facility-price-row>span small {font-size:9.5px!important}
  .important-upgrades-dialog .feature-dialog-head h2 {font-size:19px!important}
  .important-upgrades-dialog .feature-dialog-head p {font-size:11px!important}
  .important-upgrade-row {grid-template-columns:35px minmax(0,1fr) auto}
  .important-upgrade-row>.facility-mini-icon {width:34px;height:34px}
  .important-upgrade-row>span b {font-size:12px}
  .important-upgrade-row>span small {font-size:10px}
}


/* ==========================================================
   Aniiland 2.3.0 R5 — Max Potential actions + dialog refinements
   ========================================================== */
.max-potential-dialog {
  width:min(1540px,calc(100vw - 12px))!important;
  max-height:min(96dvh,1080px)!important;
}
.max-potential-dialog .advanced-setup-head p {max-width:1280px!important}
.max-potential-content {padding:16px 18px!important}
.potential-improvement-hint {margin:0 0 9px;color:#91a7b4;font-size:10.5px}
.potential-improvement-row {
  display:block!important;
  padding:0!important;
  overflow:hidden;
}
.potential-improvement-row>summary {
  display:grid;
  grid-template-columns:minmax(190px,.8fr) minmax(0,1.5fr);
  gap:12px;
  align-items:center;
  padding:12px 13px;
  cursor:pointer;
  list-style:none;
}
.potential-improvement-row>summary::-webkit-details-marker {display:none}
.potential-improvement-row>summary::after {
  content:'+';
  grid-column:2;
  grid-row:1;
  justify-self:end;
  align-self:start;
  margin:-3px -2px 0 8px;
  color:#c9a6e9;
  font-size:18px;
  font-weight:900;
  pointer-events:none;
}
.potential-improvement-row[open]>summary::after {content:'−'}
.potential-improvement-row>summary>span b,
.potential-improvement-row>summary>span small {display:block}
.potential-improvement-row>summary>span b {font-size:13px}
.potential-improvement-row>summary>span small {margin-top:3px;color:#9db0bb;font-size:10px;line-height:1.35}
.potential-improvement-row>summary>div {
  display:flex;
  gap:7px;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding-right:24px;
}
.potential-action-copy {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px 13px;
  border-top:1px solid #344b5a;
  background:#0f202a;
}
.potential-action-copy>b {flex:0 0 auto;color:#d9c3ef;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.potential-action-copy>span {flex:1 1 auto;color:#c4d2da;font-size:11px;line-height:1.45}
.potential-action-button {flex:0 0 auto;min-height:34px;padding:7px 11px;font-size:10.5px!important}
.external-recommendation {outline:1px dashed #9b6bc0;outline-offset:3px;border-radius:8px}

@media(max-width:760px), (max-width:960px) and (pointer:coarse) {
  .max-potential-dialog.advanced-setup-dialog[open] {width:calc(100vw - 6px)!important}
  .potential-improvement-row>summary {grid-template-columns:1fr;padding:11px}
  .potential-improvement-row>summary>div {justify-content:flex-start;padding-right:24px}
  .potential-improvement-row>summary::after {grid-column:1;grid-row:1;justify-self:end}
  .potential-action-copy {align-items:flex-start;flex-direction:column}
  .potential-action-button {width:100%}
}


/* ==========================================================
   Aniiland 2.3.0 R5 — supplemental roster + Max Potential plan UI
   ========================================================== */
.worker-roster-first {
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:7px 0 5px!important;
  text-align:left;
}
.worker-roster-first>span {font-weight:800}
.worker-roster-first>small {
  color:#aebdca;
  font-size:9.5px;
  font-weight:700;
  white-space:nowrap;
}
.worker-roster-first.active>small {color:#e1c1f1}
.worker-fill-label {
  margin:7px 0 5px!important;
  color:#95a9b7;
  font-size:10px;
  font-weight:700;
}
.worker-level-segmented {margin-top:0!important}

/* Keep gains on the right and the +/- affordance in its own column. */
.potential-improvement-row>summary {
  grid-template-columns:minmax(220px,1fr) minmax(340px,auto) 24px!important;
  gap:14px!important;
}
.potential-improvement-row>summary::after {
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
}
.potential-improvement-row>summary>.potential-summary-gains {
  grid-column:2!important;
  justify-content:flex-end!important;
  align-items:center;
  padding-right:0!important;
  min-width:0;
}
.potential-summary-gains .potential-change {
  min-width:max-content;
  text-align:center;
}

.potential-action-plan {
  padding:12px 13px 14px;
  border-top:1px solid #344b5a;
  background:#0d1d26;
}
.potential-swap-row.order-switch-row {
  margin:0 0 9px;
  padding:8px;
  border-color:#3b5361;
  border-radius:9px;
  background:#11232e;
}
.potential-swap-row .order-switch-change {
  grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);
  gap:7px;
}
.potential-swap-row .order-switch-side {
  grid-template-columns:34px minmax(0,1fr);
  gap:7px;
  padding:7px 8px;
}
.potential-swap-row .order-switch-side>img,
.potential-swap-row .order-idle-icon,
.potential-mini-icon {
  width:32px;
  height:32px;
  object-fit:contain;
}
.potential-swap-row .order-switch-side b {font-size:11.5px}
.potential-swap-row .order-switch-side small {font-size:8.5px}
.potential-swap-row .order-switch-side em {font-size:9px}
.potential-swap-row .order-switch-arrow {font-size:17px}
.potential-swap-row .order-switch-meta {
  padding:6px 8px 0;
  font-size:9.5px;
}

.potential-metric-plan {
  margin:10px 0 12px;
  padding:10px;
  border:1px solid #2f4857;
  border-radius:9px;
  background:#10212b;
}
.potential-metric-plan>h4 {
  margin:0 0 8px;
  color:#d7e6ee;
  font-size:11px;
}
.potential-plan-note {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
  padding:8px 9px;
  border:1px solid #304957;
  border-radius:8px;
  background:#132832;
}
.potential-plan-note>img {width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.potential-plan-note>span {min-width:0}
.potential-plan-note b,.potential-plan-note small {display:block}
.potential-plan-note b {font-size:10.5px;color:#dbe8ee}
.potential-plan-note small {margin-top:2px;font-size:9.5px;line-height:1.4;color:#9fb3bf}

.potential-premium-action {
  display:flex;
  align-items:center;
  gap:10px;
  padding:3px 2px 0;
}
.potential-premium-action>small {color:#91a7b4;font-size:9.5px}
.potential-queued {color:#9ce4b4;font-size:10px;font-weight:700}
.potential-queued-note {border-color:#3c694d!important}

.potential-add-worker {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #2f4857;
}
.potential-add-worker>small {color:#94a9b6;font-size:9.5px}
.potential-add-aniimo-button {min-height:36px!important}

.potential-aniimo-picker {
  margin-top:12px;
  padding:11px;
  border:1px solid #55416a;
  border-radius:10px;
  background:#171d2a;
}
.potential-picker-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.potential-picker-head>b {font-size:11.5px}
.potential-picker-head>button {min-height:30px;padding:5px 9px}
.potential-aniimo-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  max-height:270px;
  overflow:auto;
  padding:2px;
}
.potential-aniimo-choice {
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:7px;
  min-width:0;
  padding:7px;
  border:1px solid #344b5a;
  border-radius:9px;
  background:#12232d;
  color:#dce8ee;
  text-align:left;
}
.potential-aniimo-choice:hover,.potential-aniimo-choice.active {border-color:#9b67c2;background:#282035}
.potential-aniimo-choice>img {width:40px;height:40px;object-fit:contain}
.potential-aniimo-choice>span {min-width:0}
.potential-aniimo-choice b,.potential-aniimo-choice small,.potential-aniimo-choice em {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.potential-aniimo-choice b {font-size:10.5px}
.potential-aniimo-choice small {font-size:8.5px;color:#9eb0bc}
.potential-aniimo-choice em {margin-top:3px;font-size:8.5px;font-style:normal;color:#c9b2de}
.potential-aniimo-choice>i {
  position:absolute;
  right:5px;
  top:4px;
  font-size:7.5px;
  font-style:normal;
  color:#a2d8b0;
}
.potential-aniimo-selected {
  display:grid;
  grid-template-columns:minmax(230px,1fr) auto auto;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding:10px;
  border:1px solid #654c7d;
  border-radius:9px;
  background:#211a2c;
}
.potential-selected-pet {display:flex;align-items:center;gap:9px;min-width:0}
.potential-selected-pet>img {width:48px;height:48px;object-fit:contain}
.potential-selected-pet b,.potential-selected-pet small {display:block}
.potential-selected-pet b {font-size:11.5px}
.potential-selected-pet small {margin-top:2px;color:#a8b7c0;font-size:9px}
.potential-personality-row {display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.potential-personality-row button {
  width:28px;height:28px;padding:0;
  border:1px solid #4b5e6b;border-radius:7px;
  background:#142630;color:#b8c8d1;font-weight:900;
}
.potential-personality-row button.active {border-color:#b074da;background:#5b3375;color:white}
.potential-add-selected {min-height:38px!important;white-space:nowrap}

@media(max-width:900px) {
  .potential-improvement-row>summary {
    grid-template-columns:minmax(0,1fr) 24px!important;
  }
  .potential-improvement-row>summary>.potential-summary-gains {
    grid-column:1!important;
    grid-row:2!important;
    justify-content:center!important;
    padding:4px 0 0!important;
  }
  .potential-improvement-row>summary::after {grid-column:2!important;grid-row:1!important}
  .potential-aniimo-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .potential-aniimo-selected {grid-template-columns:1fr}
  .potential-personality-row {justify-content:flex-start}
  .potential-add-selected {width:100%}
}
@media(max-width:560px) {
  .worker-roster-first {align-items:flex-start;flex-direction:column;gap:2px}
  .potential-swap-row .order-switch-change {grid-template-columns:1fr}
  .potential-swap-row .order-switch-arrow {transform:rotate(90deg);justify-self:center}
  .potential-add-worker,.potential-premium-action {align-items:stretch;flex-direction:column}
  .potential-aniimo-grid {grid-template-columns:1fr}
}

/* ==========================================================
   Aniiland 2.3.0 R5.2 — simplified Max Potential + roster polish
   ========================================================== */
.potential-improvement-card {
  margin-bottom:8px;
  border:1px solid #344b5a;
  border-radius:10px;
  background:#13242f;
  overflow:hidden;
}
.potential-improvement-head {
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(320px,auto);
  gap:14px;
  align-items:center;
  padding:12px 13px;
}
.potential-improvement-head>span {min-width:0}
.potential-improvement-head>span b,
.potential-improvement-head>span small {display:block}
.potential-improvement-head>span b {font-size:13px;color:#e2edf2}
.potential-improvement-head>span small {margin-top:3px;color:#9db0bb;font-size:10px;line-height:1.35}
.potential-improvement-head>.potential-summary-gains {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
}
.potential-improvement-head .potential-change {
  min-width:max-content;
  text-align:center;
  font-style:normal;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:11px;
  line-height:1.25;
}
.potential-inline-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:0 13px 12px;
}
.potential-inline-actions>small {color:#91a7b4;font-size:9.5px;line-height:1.35}
.potential-inline-actions .potential-action-button,
.potential-inline-actions .potential-add-aniimo-button {min-height:36px!important;white-space:nowrap}
.potential-premium-action {border-top:1px solid #2e4552;padding-top:10px}

/* Max Potential uses the same card/picker language as Custom Aniimo Roster. */
.potential-roster-picker {
  margin:0 12px 12px!important;
  padding:12px!important;
}
.potential-picker-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.potential-picker-head>div {min-width:0}
.potential-picker-head b,
.potential-picker-head small {display:block}
.potential-picker-head b {font-size:12px}
.potential-picker-head small {margin-top:2px;color:#9eafbb;font-size:9.5px}
.potential-picker-head>button {min-height:32px;padding:6px 10px}
.potential-roster-results {max-height:300px}
.potential-roster-selection {margin:12px 0 0!important}
.potential-roster-selection .roster-selection-actions .primary {background:#8964c3;color:white}

/* Old R5 collapsible/swap-plan pieces are intentionally no longer rendered. */
.potential-action-plan,
.potential-swap-row,
.potential-metric-plan,
.potential-plan-note {display:none!important}

@media(max-width:900px) {
  .potential-improvement-head {grid-template-columns:1fr;gap:9px}
  .potential-improvement-head>.potential-summary-gains {justify-content:center}
  .potential-inline-actions {justify-content:center;flex-wrap:wrap}
}
@media(max-width:560px) {
  .potential-improvement-head {padding:11px}
  .potential-improvement-head>.potential-summary-gains {justify-content:flex-start}
  .potential-inline-actions {align-items:stretch;flex-direction:column;padding:0 11px 11px}
  .potential-inline-actions .potential-action-button,
  .potential-inline-actions .potential-add-aniimo-button {width:100%}
  .potential-roster-picker {margin:0 8px 10px!important;padding:10px!important}
  .potential-picker-head {align-items:flex-start;flex-direction:column}
}


/* ==========================================================
   Aniiland 2.5.0 — Max Potential polish
   ========================================================== */
/* Premium actions should behave like compact actions, not stretch across the row. */
.potential-premium-action {
  justify-content:flex-end!important;
  align-items:center!important;
}
.potential-premium-action .potential-action-button {
  flex:0 0 auto!important;
  width:auto!important;
  min-width:132px;
  max-width:260px;
}
.potential-premium-action .potential-queued {
  margin-left:auto;
}
/* Keep Aniimo actions aligned with the right-side result tags on desktop. */
.potential-improvement-card>.potential-inline-actions {
  min-height:48px;
}
@media(max-width:560px) {
  .potential-premium-action .potential-action-button {width:100%!important;max-width:none}
}

/* ==========================================================
   Aniiland 2.5.5 — compact, goal-aware Max Potential UI
   ========================================================== */
.max-potential-dialog {
  width:min(980px,calc(100vw - 24px))!important;
  max-height:min(94dvh,980px)!important;
}
.max-potential-dialog .advanced-setup-head p {max-width:760px!important}
.max-potential-content {padding:12px 14px!important}

/* Three cards per row. Coins / Wood / Sand always occupy the first row;
   optional Growth Fruit / AniiPod naturally wrap to row two. */
.potential-metrics {
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
.potential-metric-card {
  min-height:70px!important;
  padding:10px 12px!important;
}
.potential-metric-card>img,
.potential-metric-card>.item-icon,
.potential-metric-card>.coin-icon {
  width:38px!important;
  height:38px!important;
}
.potential-metric-card>span>b {font-size:16px!important}

.potential-improvements>h3 {margin:14px 0 8px!important}
.potential-improvement-card {
  margin-bottom:8px!important;
  overflow:visible!important;
}
.potential-improvement-rowline {
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(180px,auto) auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
}
.potential-improvement-identity {
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.potential-improvement-identity>.potential-mini-icon,
.potential-improvement-identity>.item-icon,
.potential-improvement-identity>.coin-icon,
.potential-improvement-identity>img {
  width:38px!important;
  height:38px!important;
  object-fit:contain;
  flex:0 0 auto;
}
.potential-improvement-identity>span {min-width:0}
.potential-improvement-identity b,
.potential-improvement-identity small {display:block}
.potential-improvement-identity b {font-size:12px;color:#edf5fa;line-height:1.2}
.potential-improvement-identity small {margin-top:3px;font-size:9px;color:#9db0bb}
.potential-improvement-rowline>.potential-summary-gains {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}
.potential-improvement-rowline .potential-change {
  min-width:max-content;
  text-align:center;
  font-style:normal;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:10px;
  line-height:1.2;
}
.potential-row-action {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding:0!important;
  border:0!important;
  min-height:0!important;
  margin:0!important;
}
.potential-row-action .potential-action-button,
.potential-row-action .potential-add-aniimo-button {
  min-height:38px!important;
  min-width:132px!important;
  width:auto!important;
  padding:8px 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  white-space:nowrap;
}
.potential-row-action .potential-queued {
  margin:0!important;
  white-space:nowrap;
}
.potential-roster-picker {margin:0 10px 10px!important}

@media(max-width:800px) {
  .max-potential-dialog.advanced-setup-dialog[open] {width:calc(100vw - 12px)!important}
  .potential-improvement-rowline {grid-template-columns:minmax(0,1fr) auto}
  .potential-improvement-rowline>.potential-summary-gains {
    grid-column:1/-1;
    grid-row:2;
    justify-content:flex-start;
  }
  .potential-row-action {grid-column:2;grid-row:1}
}
@media(max-width:560px) {
  .potential-metrics {grid-template-columns:1fr 1fr!important}
  .potential-improvement-rowline {grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px}
  .potential-improvement-identity>.potential-mini-icon,
  .potential-improvement-identity>.item-icon,
  .potential-improvement-identity>img {width:32px!important;height:32px!important}
  .potential-row-action .potential-action-button,
  .potential-row-action .potential-add-aniimo-button {min-width:112px!important;padding:8px 10px!important}
  .potential-improvement-rowline>.potential-summary-gains {justify-content:flex-start!important}
}
@media(max-width:380px) {
  .potential-metrics {grid-template-columns:1fr!important}
  .potential-improvement-rowline {grid-template-columns:1fr}
  .potential-row-action {grid-column:1;grid-row:auto;justify-content:stretch!important}
  .potential-row-action .potential-action-button,
  .potential-row-action .potential-add-aniimo-button {width:100%!important}
}

/* 2.6.3 — Max Potential family-specific Leisure improvements */
.potential-row-action .potential-family-toggle {
  min-height:38px!important;
  height:38px!important;
  min-width:46px!important;
  width:46px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:20px!important;
  font-weight:800!important;
  line-height:1!important;
}
.potential-family-count {
  min-width:max-content;
  text-align:center;
  font-style:normal;
  padding:7px 9px;
  border:1px solid #3c5668;
  border-radius:6px;
  background:#182d39;
  color:#a9beca;
  font-size:10px;
  line-height:1.2;
}
.potential-family-count b {color:#e5eef3;font-weight:700}
.potential-family-options {
  border-top:1px solid #304755;
  background:#0f1d26;
  padding:7px 8px 8px;
}
.potential-family-option {
  border:1px solid #2c4351;
  border-radius:8px;
  background:#13242f;
  overflow:visible;
}
.potential-family-option + .potential-family-option {margin-top:7px}
.potential-family-option .potential-improvement-rowline {padding:9px 10px}
.potential-family-option .potential-improvement-identity b {font-size:11.5px}
.potential-family-option .potential-improvement-identity small {max-width:520px;white-space:normal}
.potential-family-option .potential-roster-picker {margin:0 8px 8px!important}

@media(max-width:560px) {
  .potential-row-action .potential-family-toggle {min-width:42px!important;width:42px!important;padding:0 8px!important}
  .potential-family-options {padding:6px}
}
@media(max-width:380px) {
  .potential-family-group>.potential-improvement-rowline {grid-template-columns:minmax(0,1fr) auto!important}
  .potential-family-group>.potential-improvement-rowline>.potential-summary-gains {grid-column:1/-1;grid-row:2}
  .potential-family-group>.potential-improvement-rowline>.potential-row-action {grid-column:2;grid-row:1;justify-content:flex-end!important}
  .potential-family-group>.potential-improvement-rowline>.potential-row-action .potential-family-toggle {width:42px!important}
}

/* 2.6.5 stable QoL: current-plan RV bottlenecks and order ownership/seeds */
.upgrade-worker-busy,
.upgrade-worker-busy span,
.upgrade-worker-bottleneck .aniimo-needed-job-info>b,
.upgrade-worker-bottleneck .aniimo-expanded-role b,
.upgrade-worker-bottleneck .aniimo-expanded-count {
  color:#ff6d78!important
}
.upgrade-worker-advice {
  display:block;
  margin-top:4px;
  color:#ff6d78!important;
  font-weight:800
}
.custom-worker-recommendation .roster-assigned-instance {display:inline-flex}
.custom-worker-recommendation .aniimo-needed-pet.roster-multi-job {
  border:2px solid var(--roster-instance-border)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--roster-instance-border) 34%,transparent)!important
}
.roster-multi-job-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.45
}
.roster-multi-job-note>span:last-child {min-width:0;flex:1;overflow-wrap:anywhere}
.roster-multi-job-swatch {margin-top:1px}
@media(max-width:760px){
  .roster-multi-job-note{gap:7px;font-size:12px;line-height:1.45}
  .roster-multi-job-note .roster-multi-job-swatch{width:16px;height:16px;flex-basis:16px}
}
.roster-multi-job-swatch {
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:2px solid #20b9f2;
  border-radius:6px;
  background:#15232e
}
.order-title-line {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap
}
.order-seed-summary {
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(223,178,76,.48);
  background:rgba(223,178,76,.11);
  color:#f1d58d;
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  font-weight:800;
  line-height:1.25
}
.order-seed-summary.compact { white-space:normal }
.order-seed-warning {
  margin:7px 0 2px;
  padding:7px 9px;
  border:1px solid rgba(223,178,76,.35);
  background:rgba(223,178,76,.08);
  border-radius:8px;
  color:#e8cc84;
  font-size:10px;
  line-height:1.35
}
.order-owned-btn {
  border:1px solid #506d86;
  background:#273c50;
  color:#e7f2fb;
  border-radius:7px;
  padding:6px 9px;
  font-size:11px;
  font-weight:800
}
.order-card-actions .order-owned-btn { order:-1 }
.override-order-actions {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap
}
.order-owned-dialog { width:min(92vw,560px) }
.order-owned-list {
  display:grid;
  gap:8px;
  max-height:min(52vh,480px);
  overflow:auto;
  padding:2px 2px 4px
}
.order-owned-row {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 100px;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(121,96,149,.35);
  background:rgba(31,25,43,.65);
  border-radius:10px
}
.order-owned-row>img { width:38px;height:38px;object-fit:contain }
.order-owned-row input { width:100%;margin:0 }
@media (max-width:560px){
  .order-card-actions { flex-wrap:wrap }
  .order-card-actions .order-owned-btn,
  .order-card-actions .order-complete { flex:1 1 42% }
  .order-owned-row { grid-template-columns:36px minmax(0,1fr) 84px }
  .order-owned-row>img { width:32px;height:32px }
}


/* 2.6.9 Custom Roster exact-instance borders */
@media(max-width:600px){.order-seed-summary {font-size:11.5px;padding:4px 9px}}


/* 2.6.9 Custom Setup infeasible-plan guidance */
.custom-setup-infeasible{display:grid;gap:8px}
.custom-setup-infeasible>p{margin:0}
.custom-setup-shortage-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.custom-setup-shortage-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 9px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.035)}
.custom-setup-shortage-list li span{color:#c8d4dc;white-space:nowrap}
.calculation-error-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media(max-width:760px){
 .custom-setup-shortage-list li{align-items:flex-start;flex-direction:column;gap:3px}
 .custom-setup-shortage-list li span{white-space:normal}
 .calculation-error-actions{display:grid;grid-template-columns:1fr;gap:8px}
 .calculation-error-actions button{width:100%}
}

/* Phone shell can activate up to 960px on coarse/touch devices. */
html.aniiland-phone .custom-setup-shortage-list li{align-items:flex-start;flex-direction:column;gap:3px}
html.aniiland-phone .custom-setup-shortage-list li span{white-space:normal}
html.aniiland-phone .calculation-error-actions{display:grid;grid-template-columns:1fr;gap:8px}
html.aniiland-phone .calculation-error-actions button{width:100%;min-width:0;white-space:normal}


/* 2.6.9 Next-RV duration diagnostics */
.rv-duration-unavailable{display:grid;gap:8px}
.rv-duration-unavailable>span,.rv-duration-unavailable>small{display:block;line-height:1.45}
.rv-duration-blocker-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.rv-duration-blocker-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:7px 9px;border:1px solid rgba(224,178,77,.28);border-radius:8px;background:rgba(224,178,77,.06)}
.rv-duration-blocker-list li b{min-width:0;overflow-wrap:anywhere}
.rv-duration-blocker-list li span{max-width:62%;text-align:right;color:#d8c59b;line-height:1.35}
html.aniiland-phone .rv-duration-blocker-list li{display:grid;gap:3px}
html.aniiland-phone .rv-duration-blocker-list li span{max-width:none;text-align:left}

/* Climate 1 experimental Floor Planner navigation & climate badges */
#layout-root .layout-scroll { touch-action:none; cursor:grab; overscroll-behavior:contain; }
#layout-root .layout-scroll:active { cursor:grabbing; }
#layout-root .layout-canvas .placed { touch-action:none; cursor:move; }
#layout-root .layout-climate-mode { position:absolute;left:50%;bottom:0;transform:translate(-50%,60%);padding:1px 3px;font-size:9px;font-weight:700;line-height:1.1;background:#101f2c;color:#fafbfd;border:1px solid #6d91a0;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:6; }

/* Climate 1 FIX2: expanded planner viewport and more readable/interactive previews. */
#layout-root .layout-workspace {grid-template-columns:minmax(0,1fr) minmax(210px,250px);align-items:stretch}
#layout-root .layout-scroll {height:min(79dvh,930px);min-height:650px;max-width:100%;overflow:auto}
#layout-root .layout-legend {max-height:min(79dvh,930px)}
.climate-v1-map .climate-preview-scroll {min-height:260px;overflow:auto}
.climate-v1-map .climate-visual {grid-template-columns:minmax(290px,1fr) minmax(175px,225px)}
.climate-v1-map .climate-key {display:flex;flex-flow:column nowrap;gap:7px}
.climate-v1-map .climate-key-row {width:100%;padding:8px 9px;min-height:50px;font-size:13px;align-items:center}
.climate-v1-map .climate-key-row b {font-size:13px;line-height:1.25}
.climate-v1-map .climate-key-row small {font-size:11px}
.climate-v1-map .climate-preview-canvas {min-width:210px}
.climate-v1-map .climate-preview-facility {border-width:1.5px}
.climate-v1-map .climate-preview-facility img {width:91%;height:91%}
.climate-recipe-toggle {display:inline-flex;align-items:center;gap:8px;margin:8px 0;padding:8px 12px;border:1px solid var(--line);border-radius:9px}
.climate-v1-power {margin-top:8px}
.climate-v1-power .power-preview-scroll {max-height:480px}
.climate-v1-power-recipes {display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:7px}
.climate-v1-power-recipes .power-recipe-row {display:grid;gap:3px;padding:8px;border-radius:8px;border:1px solid var(--line);background:#111f2b;font-size:12px}
.climate-v1-power-recipes .power-recipe-row small {color:var(--muted)}
.climate-v1-power-recipes .climate-preview-active {outline:2px solid #8edfff;background:#1a3848}
@media(max-width:740px){#layout-root .layout-workspace{grid-template-columns:minmax(0,1fr)}#layout-root .layout-scroll{height:65dvh;min-height:400px}#layout-root .layout-legend{max-height:none}.climate-v1-map .climate-visual{grid-template-columns:minmax(0,1fr)}.climate-v1-map .climate-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){
 .climate-map.climate-void-map.climate-v1-map{flex-basis:930px;max-width:930px}
 .climate-map.climate-void-map.climate-v1-map .climate-visual{grid-template-columns:minmax(420px,1fr) minmax(180px,230px)}
}

/* Climate 1 Fix 3: compact readable preview cards; preserve legacy layout when flag=0. */
.climate-map.climate-void-map.climate-v1-map{align-self:start;height:auto;flex:0 1 auto;max-width:100%;padding:14px;min-width:0}
.climate-map.climate-void-map.climate-v1-map[data-climate-scene="sunlamp"]{width:min(100%,645px);flex-basis:645px;max-width:645px}
.climate-map.climate-void-map.climate-v1-map[data-climate-scene="heatCool"]{width:min(100%,1060px);flex-basis:1060px;max-width:1060px}
.climate-map.climate-void-map.climate-v1-map .climate-visual{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,245px);align-items:start;gap:12px}
.climate-map.climate-void-map.climate-v1-map[data-climate-scene="sunlamp"] .climate-visual{grid-template-columns:minmax(0,1fr) minmax(155px,200px)}
.climate-v1-map .climate-preview-scroll{box-sizing:border-box;width:100%;min-height:unset;max-height:650px;padding:10px;display:block;overflow:auto}
.climate-v1-map .climate-preview-canvas{margin:0 auto;min-width:0}
.climate-v1-map .climate-key{min-width:0;max-height:650px;overflow:auto}
.climate-v1-map .climate-key-row{padding:10px;min-height:62px;line-height:1.4;cursor:pointer}
.climate-v1-map .climate-key-row b{font-size:14px}
.climate-v1-map .climate-key-row small{font-size:12px;line-height:1.3}
.climate-v1-map figcaption{min-height:unset}
.power-setup-card .power-preview.climate-v1-power{max-width:1050px}
.power-setup-card .power-preview.climate-v1-power .power-preview-scroll{max-height:520px;overflow:auto}
.power-setup-card .power-preview.climate-v1-power .power-preview-canvas{max-width:none}
.power-original-legend-card.climate-target{cursor:pointer;transition:background .12s ease,box-shadow .12s ease}
.power-original-legend-card.climate-target:hover{background:#193143;box-shadow:inset 0 0 0 1px #4b849a}
.power-original-legend-card.climate-preview-selected,.power-original-legend-card.climate-preview-active{background:#1d4151;box-shadow:inset 0 0 0 2px #83dfff}
.power-original-legend-card .power-legend-recipe{color:#8edddd;line-height:1.35;overflow-wrap:anywhere}
@media(max-width:740px){.climate-map.climate-void-map.climate-v1-map[data-climate-scene]{flex:1 1 100%;width:100%;max-width:100%}.climate-map.climate-void-map.climate-v1-map .climate-visual{grid-template-columns:minmax(0,1fr)}.climate-v1-map .climate-preview-scroll{min-width:0}.climate-v1-map .climate-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:unset}}


/* Climate 1 Fix 4 — power preview sized to its content, with no inner scrollbar. */
.power-setup-card .power-preview.climate-v1-power {
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  margin-top:6px;
}
.power-setup-card .power-preview.climate-v1-power .power-preview-scroll {
  display:block;
  width:max-content;
  max-width:100%;
  max-height:none;
  overflow:hidden;
  padding:5px;
}
.power-setup-card .power-preview.climate-v1-power .power-preview-canvas {
  display:block;
  max-width:100%;
}
/* Recipe names occupy a proper full-width row, not the 34px icon column. */
.power-load-grid .power-original-legend-card .power-legend-recipe {
  grid-column:1/-1;
  width:100%;
  display:block;
  margin-top:5px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#9ae3df;
  font-size:12px;
  line-height:1.45;
  overflow-wrap:normal;
  word-break:normal;
  white-space:normal;
}
/* Both the selected facility icon and its existing clickable power legend card
   visibly light up from the same data-climate-key selection. */
.climate-v1-power .power-preview-facility.climate-preview-selected,
.climate-v1-power .power-preview-facility.climate-preview-active {
  z-index:7;
  border:2px solid #adf0ff;
  outline:2px solid #fff;
  outline-offset:-2px;
  background:#27566b;
  box-shadow:0 0 0 3px rgba(123,222,255,.55),0 0 18px rgba(114,210,252,.65);
}
.power-original-legend-card.climate-preview-selected,
.power-original-legend-card.climate-preview-active {
  border-color:#9ee7ff;
  background:#1a394b;
  box-shadow:inset 0 0 0 2px #90e6ff,0 0 12px rgba(90,204,240,.2);
}
@media(max-width:740px){
  .power-setup-card .power-preview.climate-v1-power{max-width:100%}
  .power-setup-card .power-preview.climate-v1-power .power-preview-scroll{max-width:100%;overflow:hidden}
}


/* Climate 1 Fix 5 — readable individual climate groups without giant blank cards. */
.climate-map.climate-void-map.climate-v1-map[data-climate-scene="heatCool"][data-source-count="1"]{
 width:min(100%,690px);flex-basis:690px;max-width:690px
}
.climate-map.climate-void-map.climate-v1-map[data-climate-scene="heatCool"][data-source-count="2"]{
 width:min(100%,990px);flex-basis:990px;max-width:990px
}
.climate-v1-map .climate-preview-scroll{max-height:none;overflow-x:auto;overflow-y:visible}
.climate-v1-map .climate-key-row{border-inline-start:3px solid var(--crop-color,#48aaca)}
.climate-v1-map .climate-key-row:hover{background:color-mix(in srgb,var(--crop-color,#48aaca) 15%,#0d1e2a)}
@media(max-width:740px){
 .climate-map.climate-void-map.climate-v1-map[data-climate-scene][data-source-count]{width:100%;max-width:100%;flex:1 1 100%}
}


/* Climate 1 Fix 7 — presentation only. Card spans depend on source count,
   not crop count, and never affect the temperature/power optimizer. */
.climate-grid:has(> .climate-v1-map) {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:16px;
}
.climate-grid:has(> .climate-v1-map)>figure.climate-map {
  box-sizing:border-box;
  width:100%;max-width:none;min-width:0;
  margin:0;align-self:start;
}
.climate-grid>.climate-v1-map[data-climate-scene="heatCool"]:not([data-source-count="1"]) {
  grid-column:1/-1;
}
.climate-grid>.climate-v1-map[data-climate-scene="heatCool"][data-source-count="1"],
.climate-grid>.climate-v1-map[data-climate-scene="sunlamp"] {
  grid-column:span 1;
}
.climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-visual {
  grid-template-columns:minmax(0,1fr) minmax(150px,190px);
  align-items:start;gap:12px;
}
.climate-grid:has(> .climate-v1-map) .climate-v1-map[data-climate-scene="heatCool"]:not([data-source-count="1"]) .climate-visual {
  grid-template-columns:minmax(0,1fr) minmax(180px,240px);
}
.climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key {
  display:flex;flex-direction:column;flex-wrap:nowrap;
  align-self:start;align-content:start;align-items:stretch;
  gap:7px;max-height:none;overflow:visible;
}
.climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key-row {
  box-sizing:border-box;flex:0 0 auto;width:100%;min-height:0;
  padding:9px 10px;gap:7px;align-self:start;
}
.climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key-row b {font-size:13px;line-height:1.25}
.climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key-row small {font-size:11px;line-height:1.35}
.climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-preview-scroll {
  display:flex;align-items:flex-start;justify-content:center;
  width:100%;min-width:0;min-height:0;max-height:none;overflow:hidden;
  padding:8px;
}
.climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-preview-canvas {flex:0 0 auto;max-width:100%}
.climate-grid:has(> .climate-v1-map) .climate-v1-map figcaption {margin-top:12px;padding-top:10px}

/* Use the pre-existing power legend in the free area to the RIGHT of the map.
   Header/rules/icon toggle retain their full-width rows. */
.power-setup-card:has(> .climate-v1-power) {
  grid-template-columns:minmax(335px, min(35%,525px)) minmax(0,1fr);
  align-items:start;column-gap:18px;row-gap:12px;
}
.power-setup-card:has(> .climate-v1-power)>.power-setup-head,
.power-setup-card:has(> .climate-v1-power)>.power-setup-rules,
.power-setup-card:has(> .climate-v1-power)>.climate-recipe-toggle {
  grid-column:1/-1;
}
.power-setup-card:has(> .climate-v1-power)>.climate-v1-power {
  grid-column:1;grid-row:4;
  box-sizing:border-box;width:100%;max-width:100%;min-width:0;
  align-self:start;margin:0;
}
.power-setup-card:has(> .climate-v1-power)>.power-load-grid {
  grid-column:2;grid-row:4;min-width:0;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  align-items:start;align-content:start;grid-auto-rows:max-content;
  gap:9px;
}
.power-setup-card:has(> .climate-v1-power) .power-preview-scroll {
  box-sizing:border-box;max-width:100%;width:100%;overflow:hidden;
  max-height:none;display:flex;justify-content:center;align-items:flex-start;
}
.power-setup-card:has(> .climate-v1-power) .power-preview-canvas {flex:0 0 auto;max-width:100%}
.power-setup-card:has(> .climate-v1-power) .power-original-legend-card {min-width:0;align-self:start}

/* Narrow screens and phones: one card per row, no sideways page scrolling.
   Place power diagram before its existing clickable legend. */
@media(max-width:980px) {
  .climate-grid:has(> .climate-v1-map) {grid-template-columns:minmax(0,1fr)}
  .climate-grid:has(> .climate-v1-map)>figure.climate-map {grid-column:1/-1}
  .climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-visual,
  .climate-grid:has(> .climate-v1-map) .climate-v1-map[data-climate-scene="heatCool"]:not([data-source-count="1"]) .climate-visual {
    grid-template-columns:minmax(0,1fr);gap:12px;
  }
  .climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  }
  .power-setup-card:has(> .climate-v1-power) {grid-template-columns:minmax(0,1fr)}
  .power-setup-card:has(> .climate-v1-power)>.climate-v1-power {grid-column:1;grid-row:auto}
  .power-setup-card:has(> .climate-v1-power)>.power-load-grid {
    grid-column:1;grid-row:auto;grid-template-columns:repeat(auto-fit,minmax(154px,1fr));
  }
}
@media(max-width:490px) {
  .climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key {grid-template-columns:minmax(0,1fr)}
  .climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key-row {padding:7px 9px}
  .climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-preview-scroll {padding:3px}
  .power-setup-card:has(> .climate-v1-power) {padding:10px}
  .power-setup-card:has(> .climate-v1-power)>.power-load-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .power-setup-card:has(> .climate-v1-power) .power-original-legend-card {padding:7px;font-size:11px}
}

/* High-specificity reset of previous experimental max-width/flex-basis caps. */
.climate-grid:has(> .climate-v1-map)>figure.climate-map.climate-void-map.climate-v1-map[data-climate-scene] {
  width:100% !important;max-width:none !important;flex-basis:auto !important;
}
/* Avoid intrinsic-size overflow from the power canvas on narrow handsets. */
.power-setup-card:has(> .climate-v1-power)>.power-preview.climate-v1-power {
  width:100% !important;max-width:100%;min-width:0;
}
.power-setup-card:has(> .climate-v1-power)>.power-preview.climate-v1-power .power-preview-title,
.power-setup-card:has(> .climate-v1-power)>.power-preview.climate-v1-power .power-preview-scroll {
  box-sizing:border-box;width:100% !important;max-width:100%;min-width:0;
}
.power-setup-card:has(> .climate-v1-power)>.power-preview.climate-v1-power .power-preview-canvas {
  max-width:100% !important;
}
@media(max-width:1150px){
  .climate-grid:has(> .climate-v1-map) {grid-template-columns:minmax(0,1fr)}
  .climate-grid:has(> .climate-v1-map)>figure.climate-map {grid-column:1/-1}
  .climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-visual,
  .climate-grid:has(> .climate-v1-map) .climate-v1-map[data-climate-scene="heatCool"]:not([data-source-count="1"]) .climate-visual {
    grid-template-columns:minmax(0,1fr);gap:12px;
  }
  .climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
  }
}

@media(max-width:490px) and (min-width:350px){
 .climate-grid:has(> .climate-v1-map) .climate-v1-map .climate-key {grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Beta 2.8.0: roster opt-out, border legend and used-worker details */
.roster-grid .roster-card.roster-card-enabled {outline:2px solid rgba(181,134,255,.94);outline-offset:2px;border-radius:12px;box-shadow:0 0 0 3px rgba(157,116,231,.14)}
.roster-grid .roster-card.roster-card-disabled {opacity:.67;filter:saturate(.6)}
.roster-entry-use {display:flex;align-items:center;gap:5px;font:600 11px/1.3 inherit;color:#d9caed;padding:4px 2px;cursor:pointer}
.roster-entry-use input {accent-color:#b88bff;flex:none}
.roster-global-use {display:flex;align-items:center;gap:8px;padding:8px 11px;min-height:36px;border-radius:10px;border:1px solid rgba(177,139,240,.4);color:#e6d6f6;font-weight:700;font-size:12px;cursor:pointer}
.roster-global-use input {accent-color:#b68bff}
.aniimo-border-guide {display:flex;flex-wrap:wrap;gap:9px 15px;align-items:center;margin:9px 0 12px;color:#bccfdb;font-size:12px}
.aniimo-border-guide>span {display:flex;align-items:center;gap:7px}
.aniimo-border-swatch {display:inline-block;flex:0 0 18px;height:18px;border-radius:5px;background:#142331}
.aniimo-border-swatch.solid {border:3px solid #51c8f5}
.aniimo-border-swatch.dotted {border:3px dotted #b88dec}
.aniimo-border-swatch.plain {border:1px solid rgba(139,159,178,.28)}
.external-recommendation {outline:2px dotted #b28dde;outline-offset:3px}
.custom-worker-recommendation .aniimo-needed-pet.roster-multi-job {border-width:3px!important}
.used-aniimo-details-button {margin:0 8px;padding:7px 11px;font-size:12px}
.used-aniimo-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:12px;margin-top:12px}
.used-aniimo-card {border:1px solid #3e5265;background:#152431;border-radius:13px;padding:12px;min-width:0}
.used-aniimo-head {display:flex;align-items:center;gap:10px;margin-bottom:11px;min-width:0}
.used-aniimo-head img {width:55px;height:55px;object-fit:contain;border-radius:9px;background:#243749}
.used-aniimo-head>div {min-width:0;flex:1}
.used-aniimo-head b,.used-aniimo-head small {display:block;overflow-wrap:anywhere}
.used-aniimo-head small {font-size:11px;color:#abc0cb;margin-top:3px}
.used-aniimo-head strong {color:#b9e6ff;font-size:15px;white-space:nowrap}
.used-aniimo-job {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:8px 0;border-bottom:1px solid #314657;font-size:12px}
.used-aniimo-job b {min-width:0;overflow-wrap:anywhere}
.used-aniimo-job span {color:#9eb5c5;grid-row:2;grid-column:1;overflow-wrap:anywhere}
.used-aniimo-job strong {grid-column:2;grid-row:1/3;align-self:center}
.used-aniimo-total {display:flex;justify-content:space-between;gap:10px;padding-top:11px;font-size:13px;font-weight:700}
@media(max-width:760px){.roster-entry-use{font-size:10px}.aniimo-border-guide{gap:8px;font-size:11px}.used-aniimo-details-button{font-size:11px;margin:3px}}

/* Beta 2.8.1: roster, climate preview scroll and festival panels */
.roster-actions>.roster-global-use{box-sizing:border-box;min-height:44px;padding:9px 16px;font-size:inherit;line-height:1.25;justify-content:center;white-space:normal}
.roster-personality-edit{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.roster-edit-use{display:inline-flex;align-items:center;min-height:38px;padding:8px 12px;font-size:13px;border-radius:9px;border:1px solid rgba(181,134,255,.42);background:rgba(156,112,230,.09)}
.roster-edit-use input{width:16px;height:16px}
/* Previews are not interactive zoom panels: ordinary mouse-wheel/touch scrolling should move the page. */
.climate-v1-map .climate-preview-scroll,.climate-v1-power .power-preview-scroll{overflow:visible!important;max-height:none!important;touch-action:pan-y}
.climate-v1-map .climate-key{overflow:visible!important;max-height:none!important}
.event-gathering-info{max-width:100%;line-height:1.55}
.event-gathering-info h2{margin:0 0 12px}
.event-gathering-info h3{margin:24px 0 8px}
.event-gathering-info .event-gathering-steps{list-style:none;padding:0;margin:18px 0;display:grid;gap:12px}
.event-gathering-step{padding:14px 16px;background:rgba(135,155,196,.07);border:1px solid rgba(145,170,202,.15);border-radius:12px}
.event-gathering-step h4{margin:0 0 4px;font-size:1rem}
.event-gathering-step time{color:#b9c9e3;font-size:.85rem}
.event-gathering-step p{margin:6px 0 0}
.event-gathering-items{border-left:3px solid #8d94b5;margin-top:10px!important;padding-left:12px;color:#bbc8d4}
.event-gathering-info ul{padding-left:1.5em}
.event-gathering-info li{margin:8px 0}
@media(max-width:760px){.roster-actions>.roster-global-use{min-height:42px;padding:10px;font-size:12px}.roster-edit-use{width:100%}.event-gathering-step{padding:11px 12px}}

/* Aniiland 2.8.2 — responsive layout, tablet navigation, uniform roster controls. */
.roster-dialog .roster-actions>button,
.roster-dialog .roster-actions>.roster-global-use {
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:48px!important;
  height:48px!important;
  padding:10px 17px!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:1.25!important;
  border-radius:10px!important;
  white-space:nowrap!important;
  vertical-align:middle;
}
.roster-dialog .roster-actions>.roster-global-use input {
  flex:0 0 16px;
  width:16px;
  height:16px;
  margin:0;
}
@media(max-width:600px) {
 .roster-dialog .roster-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .roster-dialog .roster-actions>button,.roster-dialog .roster-actions>.roster-global-use {
   width:100%!important;min-width:0!important;height:auto!important;min-height:48px!important;
   padding:9px 8px!important;font-size:12px!important;white-space:normal!important;text-align:center;
 }
 .roster-dialog .roster-actions [data-roster-save] {margin-left:0!important}
}
/* A wide desktop sidebar can exceed the viewport; keep its contents reachable
   while its position follows the page. The phone/tablet settings sheet is separate. */
@media(min-width:1025px) {
 .shell {grid-template-columns:minmax(244px,288px) minmax(0,1fr)}
 .shell>.planner-sidebar {
   position:sticky!important;
   align-self:start!important;
   top:calc(var(--planner-header-height, 78px) + 6px)!important;
   max-height:calc(100dvh - var(--planner-header-height, 78px) - 12px)!important;
   overflow-y:auto!important;
   overscroll-behavior:contain;
   scrollbar-width:thin;
 }
 .shell>main {min-width:0}
}
/* Laptop/tablet-sized content areas keep the full table readable by scrolling
   its own frame instead of squeezing product names to one character per line. */
@media(min-width:1025px) and (max-width:1380px) {
 .shell {grid-template-columns:244px minmax(0,1fr)!important}
 main#content {padding-inline:clamp(13px,2vw,27px)!important}
 .crafting-view-card>.table-wrap, .production-card .mobile-production-table {
   max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;
 }
 .crafting-view-card>.table-wrap>table,.production-card .mobile-production-table>table {
   min-width:780px!important;width:max-content!important;
 }
 .crafting-view-card .craft-product-title,.crafting-view-card .craft-facility-name {
   overflow-wrap:normal!important;word-break:normal!important;white-space:normal!important;
 }
}
/* The touch/tablet layout uses the same persistent, compact settings header as
   phones. Avoid fixed-width content leaking beyond the viewport. */
html.aniiland-phone .shell,html.aniiland-phone main#content {min-width:0;max-width:100%;box-sizing:border-box}
html.aniiland-phone main#content .crafting-view-stack {min-width:0}
html.aniiland-phone .mobile-production-table tbody>tr {grid-template-columns:repeat(3,minmax(0,1fr))!important}
html.aniiland-phone .mobile-production-table .craft-product-title,
html.aniiland-phone .mobile-production-table .craft-facility-name {
  overflow-wrap:break-word!important;word-break:normal!important;
}
@media(min-width:650px) and (max-width:1180px) {
 html.aniiland-phone .mobile-production-table tbody>tr {grid-template-columns:repeat(3,minmax(0,1fr))!important}
 html.aniiland-phone .mobile-production-table .craft-product-facility {grid-template-columns:48px minmax(0,1fr)!important}
 html.aniiland-phone main#content {padding-inline:clamp(18px,3vw,35px)!important}
}
/* Prevent the header's update/version button from extending the viewport at
   mid-sized desktop widths with translated or long navigation labels. */
@media(min-width:1025px) and (max-width:1420px) {
  header {flex-wrap:wrap;gap:10px 18px;padding:13px 20px}
  header .brand {flex:0 1 auto;min-width:0}
  header nav {flex:1 1 620px;min-width:0;flex-wrap:wrap;justify-content:flex-end;margin-left:0}
  header nav button {padding:9px 10px;font-size:12px}
  header .version {margin-left:auto;flex:0 0 auto}
}