/* PalBreederTool – single dark theme. Colors are tokens; element hues follow the in-game palette. */
:root {
  color-scheme: dark;
  --bg: #0b1020;
  --bg-2: #0f162b;
  --surface: #141c34;
  --surface-2: #1a2442;
  --surface-3: #222e52;
  --line: rgba(148, 170, 230, .12);
  --line-strong: rgba(148, 170, 230, .22);
  --text: #e8edf8;
  --muted: #93a0c0;
  --faint: #5f6b8c;
  --accent: #4cc9f0;
  --accent-2: #7b8cff;
  --accent-grad: linear-gradient(135deg, #4cc9f0 0%, #7b8cff 100%);
  --good: #3ddc97;
  --warn: #ffc857;
  --bad: #ff6b6b;
  --gold: #ffd166;
  --male: #5aa9ff;
  --female: #ff7eb6;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  --el-Normal: #c9bfa8;
  --el-Fire: #ff7043;
  --el-Water: #3fa7ff;
  --el-Leaf: #5fd068;
  --el-Electricity: #ffd43b;
  --el-Ice: #7fe3f5;
  --el-Earth: #c98b4f;
  --el-Dark: #a77bf3;
  --el-Dragon: #e45fd0;

  --wk-EmitFlame: #ff7a45;
  --wk-Watering: #45a8ff;
  --wk-Seeding: #6fd46a;
  --wk-GenerateElectricity: #ffd43b;
  --wk-Handcraft: #e0b27a;
  --wk-Collection: #4fd1c5;
  --wk-Deforest: #b98552;
  --wk-Mining: #a9b4c8;
  --wk-OilExtraction: #9d8cff;
  --wk-ProductMedicine: #ff86c8;
  --wk-Cool: #8fe6ff;
  --wk-Transport: #c3a6ff;
  --wk-MonsterFarm: #b8e05a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow: hidden; }
body {
  margin: 0;
  font: 14px/1.45 var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(123, 140, 255, .14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(76, 201, 240, .10), transparent 60%),
    var(--bg);
  overflow: hidden;
  user-select: none;
}
input, select, textarea, button { font: inherit; color: inherit; }
::selection { background: rgba(76, 201, 240, .35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(148, 170, 230, .18); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 170, 230, .32); }
::-webkit-scrollbar-track { background: transparent; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 14px; height: 14px; }
svg.i.lg { width: 22px; height: 22px; }
.hidden { display: none !important; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; height: 100vh; }
.sidebar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px;
  background: linear-gradient(180deg, rgba(20, 28, 52, .9), rgba(11, 16, 32, .9));
  border-right: 1px solid var(--line);
  min-height: 0; overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; flex: none; }
.brand-logo {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-grad); box-shadow: 0 6px 20px rgba(76, 201, 240, .35);
}
.brand-logo svg { width: 24px; height: 24px; stroke: #0b1020; stroke-width: 2.2; }
.brand strong { display: block; font: 700 17px/1.1 var(--font-display); letter-spacing: .2px; }
.brand span { font-size: 12px; color: var(--muted); }
/* The menu scrolls on its own when it is taller than the window; logo and footer stay in place. */
.nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--faint); padding: 14px 12px 6px; }
.nav button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
  color: var(--muted); cursor: pointer; text-align: left; font-weight: 500;
  transition: background .15s, color .15s;
}
.nav button:hover { background: rgba(148, 170, 230, .07); color: var(--text); }
.nav button.active { background: linear-gradient(90deg, rgba(76, 201, 240, .16), rgba(123, 140, 255, .08)); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.nav button.active svg { color: var(--accent); }
.sidebar-foot { margin-top: auto; flex: none; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.data-chip {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--muted); cursor: pointer;
}
.data-chip b { color: var(--text); font-weight: 600; display: block; font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--bad); box-shadow: 0 0 0 3px rgba(255, 107, 107, .15); }
.dot.ok { background: var(--good); box-shadow: 0 0 0 3px rgba(61, 220, 151, .15); }
.lang-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); }
.lang-switch button { border: 0; background: transparent; padding: 6px; border-radius: 8px; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 12px; }
.lang-switch button.active { background: var(--surface-3); color: var(--text); }
.disclaimer-foot { font-size: 10.5px; color: var(--faint); padding: 0 6px; line-height: 1.35; }

main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 26px 34px 18px; }
.topbar h1 { margin: 0; font: 700 26px/1.15 var(--font-display); letter-spacing: -.2px; display: flex; align-items: center; gap: 12px; }
.topbar h1 .h-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); }
.topbar p { margin: 6px 0 0; color: var(--muted); max-width: 760px; }
.content { flex: 1; overflow: auto; padding: 4px 34px 34px; }
.view { display: none; animation: fade .22s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Primitives ---------- */
.card { background: linear-gradient(180deg, var(--surface), rgba(20, 28, 52, .85)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 15px var(--font-display); }
.card-title svg { color: var(--accent); }
.card-title .spacer { flex: 1; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.split { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 20px; align-items: start; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 600; white-space: nowrap;
  transition: transform .08s, background .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.btn:hover { background: var(--surface-3); border-color: rgba(148, 170, 230, .35); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.primary { border: 0; color: #07101f; background: var(--accent-grad); box-shadow: 0 8px 22px rgba(76, 201, 240, .28); }
.btn.primary:hover { box-shadow: 0 10px 28px rgba(76, 201, 240, .42); filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: rgba(148, 170, 230, .08); color: var(--text); }
.btn.icon { padding: 9px; border-radius: 11px; }
.btn.lg { padding: 13px 22px; font-size: 15px; border-radius: 14px; }
.btn .spin { display: none; }
.btn.busy .spin { display: inline-block; }
.btn.busy > svg.i:not(.spin) { display: none; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.input {
  width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--text); outline: none; user-select: text;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76, 201, 240, .15); }
.input-icon { position: relative; }
.input-icon > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.input-icon > .input { padding-left: 36px; }
input[type=number].input { width: 110px; }
input[type=number]::-webkit-inner-spin-button { opacity: .5; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--muted); border: 1px solid var(--line); white-space: nowrap;
}
.badge.special { color: #1a1300; background: linear-gradient(135deg, #ffe08a, #ffb84d); border: 0; }
.badge.same { color: var(--accent); background: rgba(76, 201, 240, .12); border-color: rgba(76, 201, 240, .25); }
.badge.good { color: var(--good); background: rgba(61, 220, 151, .12); border-color: rgba(61, 220, 151, .25); }
.badge.warn { color: var(--warn); background: rgba(255, 200, 87, .12); border-color: rgba(255, 200, 87, .25); }
.badge.bad { color: var(--bad); background: rgba(255, 107, 107, .12); border-color: rgba(255, 107, 107, .28); }

/* Element badges */
.el { --c: var(--el-Normal); display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; }
.el .el-dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #0b1020; }
.el .el-dot svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.el.compact { padding: 0; border: 0; background: transparent; }
.el.compact .el-dot { width: 20px; height: 20px; }
.els { display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* Pal avatars */
.avatar {
  --c: var(--el-Normal); --c2: var(--c); --s: 48px;
  position: relative; width: var(--s); height: var(--s); flex: none; border-radius: 50%;
  padding: 2px; background: conic-gradient(from 200deg, var(--c), var(--c2), var(--c));
}
.avatar-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2a3763, #121a33 70%); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .initials { font: 700 calc(var(--s) * .34) var(--font-display); color: var(--c); }
.avatar.avatar-empty { background: var(--line-strong); }
.avatar.avatar-empty .avatar-inner { color: var(--faint); }
.avatar.avatar-empty .avatar-inner svg { width: calc(var(--s) * .45); height: calc(var(--s) * .45); }
.avatar .num { position: absolute; bottom: -4px; right: -6px; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line-strong); color: var(--muted); }

/* Pal picker */
.picker { position: relative; }
.picker-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--line-strong); background: var(--bg-2); text-align: left; transition: border-color .15s, background .15s;
}
.picker-btn:hover { border-color: rgba(148, 170, 230, .4); background: #121a33; }
.picker.open .picker-btn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76, 201, 240, .15); }
.picker-btn .pb-text { flex: 1; min-width: 0; }
.picker-btn .pb-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-btn .pb-sub { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--muted); }
.picker-btn > svg.i { color: var(--faint); }
.picker-pop {
  position: fixed; z-index: 50; width: 360px; max-height: 440px; display: flex; flex-direction: column;
  background: #121a33; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); overflow: hidden;
  animation: pop .14s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.picker-pop .pp-search { padding: 10px; border-bottom: 1px solid var(--line); }
.picker-pop .pp-filters { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pp-filters button { border: 0; background: transparent; padding: 0; cursor: pointer; opacity: .45; border-radius: 50%; transition: opacity .12s, transform .12s; }
.pp-filters button:hover { opacity: .8; }
.pp-filters button.on { opacity: 1; transform: scale(1.08); }
.picker-pop .pp-list { overflow: auto; padding: 6px; }
.pp-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.pp-item:hover, .pp-item.hl { background: rgba(76, 201, 240, .10); }
.pp-item.sel { background: rgba(76, 201, 240, .18); }
.pp-item .pp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-item .pp-name { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-detail { display: flex; min-width: 0; overflow: hidden; }
.pp-stats { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-stats i { width: 6px; }
.pp-stats svg { color: var(--faint); }
.picker-pop .pp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.picker-pop .pp-bar .input { width: auto; padding: 6px 10px; font-size: 12.5px; }
.wks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wk { --w: var(--muted); display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 4px; border-radius: 7px; font-size: 11px; color: var(--w); background: color-mix(in srgb, var(--w) 12%, transparent); border: 1px solid color-mix(in srgb, var(--w) 25%, transparent); }
.wk b { color: var(--text); font-weight: 700; }
.wk.on { background: color-mix(in srgb, var(--w) 30%, transparent); border-color: var(--w); }
.wk-toggle { --w: var(--muted); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px !important; color: var(--w); border: 1px solid transparent !important; }
.wk-toggle.on { background: color-mix(in srgb, var(--w) 22%, transparent) !important; border-color: var(--w) !important; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.work-tile { --w: var(--muted); display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--w) 10%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--w) 25%, transparent); font-size: 12.5px; }
.work-tile svg { color: var(--w); }
.work-tile span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-tile b { font: 700 14px var(--font-display); }
.pp-item .pp-no { font-size: 11.5px; color: var(--faint); width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.pp-empty { padding: 20px; text-align: center; color: var(--muted); }

/* Segmented control */
.seg { display: inline-grid; grid-auto-flow: column; padding: 3px; gap: 2px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--surface-3); color: var(--text); }
.seg button.active[data-v=Male] { color: var(--male); }
.seg button.active[data-v=Female] { color: var(--female); }

/* ---------- Breeding ---------- */
.breed-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.breed-stage .op.eq { display: none; }
.breed-stage .child-card { grid-column: 1 / -1; }
.child-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 1.3fr; gap: 32px; align-items: center; position: relative; }
.child-grid .stat-list { margin-top: 0; }
@media (min-width: 1600px) {
  .breed-stage { grid-template-columns: 1fr auto 1fr auto 1.2fr; }
  .breed-stage .op.eq { display: flex; }
  .breed-stage .child-card { grid-column: auto; }
  .child-grid { grid-template-columns: 1fr; gap: 18px; }
}
.parent-card { display: flex; flex-direction: column; gap: 14px; }
.pc-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.pc-label .tag { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent); font-size: 12px; }
.op { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.op-sign { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--muted); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-stat { padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.mini-stat span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.mini-stat b { font: 700 16px var(--font-display); }
.child-card { position: relative; overflow: hidden; border-color: rgba(76, 201, 240, .35); }
.child-card::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow, #4cc9f0) 30%, transparent), transparent 65%); pointer-events: none; }
.child-head { position: relative; display: flex; gap: 18px; align-items: center; }
.child-head h2 { margin: 0; font: 700 26px/1.1 var(--font-display); }
.child-head .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.stat-list { display: grid; gap: 9px; margin-top: 18px; position: relative; }
.stat { display: grid; grid-template-columns: 22px 110px 1fr 52px; align-items: center; gap: 8px; font-size: 12.5px; }
.stat svg { color: var(--muted); }
.stat .bar { height: 7px; border-radius: 6px; background: rgba(148, 170, 230, .1); overflow: hidden; }
.stat .bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent-grad); transition: width .4s ease; }
.stat b { text-align: right; font-variant-numeric: tabular-nums; }
.gender-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; margin: 6px 0 2px; background: var(--surface-3); }
.gender-bar .m { background: var(--male); }
.gender-bar .f { background: var(--female); }
.gender-legend { display: flex; justify-content: space-between; font-size: 12px; }
.gender-legend .m { color: var(--male); } .gender-legend .f { color: var(--female); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.kpi span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.kpi b { display: block; margin-top: 4px; font: 700 22px var(--font-display); font-variant-numeric: tabular-nums; }
.kpi b small { font-size: 13px; color: var(--muted); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stars { color: var(--gold); letter-spacing: 1px; }

/* ---------- Tables / lists ---------- */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .grow { flex: 1; min-width: 220px; }
.pair-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.pair {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .12s, background .15s;
}
.pair:hover { border-color: rgba(76, 201, 240, .45); background: var(--surface-2); transform: translateY(-1px); }
.pair .pal-cell { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.pair .pal-cell .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair .pal-cell .sub { font-size: 11.5px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.pair .plus { color: var(--faint); }
.g-male { color: var(--male); } .g-female { color: var(--female); }
.table-wrap { overflow: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 11px 14px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
table.data th:hover { color: var(--text); }
table.data th .sort { opacity: .7; margin-left: 4px; }
table.data td { padding: 8px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:hover td { background: rgba(76, 201, 240, .05); }
table.data tbody tr { cursor: pointer; }
.cell-pal { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* ---------- Planner ---------- */
.passive-list { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 4px; }
.passive-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.passive-row:hover { background: rgba(148, 170, 230, .07); }
.passive-row.on { background: rgba(76, 201, 240, .12); }
.passive-row .check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.passive-row.on .check { background: var(--accent); border-color: var(--accent); color: #07101f; }
.passive-row .check svg { width: 12px; height: 12px; stroke-width: 3; }
.passive-row .pn { flex: 1; min-width: 0; }
.passive-row .pn div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passive-row .pn small { display: block; color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank { --r: var(--muted); min-width: 26px; text-align: center; padding: 2px 6px; border-radius: 7px; font-size: 11px; font-weight: 700; color: var(--r); background: color-mix(in srgb, var(--r) 14%, transparent); border: 1px solid color-mix(in srgb, var(--r) 30%, transparent); }
.rank.r4 { --r: var(--gold); } .rank.r3 { --r: #c792ff; } .rank.r2 { --r: #6cb8ff; } .rank.r1 { --r: #9fd8c0; } .rank.neg { --r: var(--bad); }
.pchip { --r: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--r) 14%, transparent); border: 1px solid color-mix(in srgb, var(--r) 35%, transparent); }
.pchip.r4 { --r: var(--gold); } .pchip.r3 { --r: #c792ff; } .pchip.r2 { --r: #6cb8ff; } .pchip.neg { --r: var(--bad); }
.pchip button { border: 0; background: rgba(0, 0, 0, .2); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text); padding: 0; }
.pchip.static { padding-right: 11px; }
.pchip.toggle { cursor: pointer; opacity: .45; padding-right: 11px; }
.pchip.toggle.on { opacity: 1; }
.slots { display: flex; gap: 8px; }
.slot-dot { width: 26px; height: 6px; border-radius: 4px; background: var(--surface-3); }
.slot-dot.on { background: var(--accent-grad); }
.owned-row { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--bg-2); }
.owned-row .row { flex-wrap: nowrap; }
.owned-row .picker { flex: 1; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 14px; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.step::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -14px; width: 2px; background: linear-gradient(var(--line-strong), transparent); }
.step:last-child::before { display: none; }
.step-no { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 700 17px var(--font-display); background: var(--surface-3); border: 1px solid var(--line-strong); color: var(--accent); }
.step-body { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.step-pals { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step-pals .sp { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.step-pals .arrow { color: var(--accent); }
.progress { height: 8px; border-radius: 6px; background: rgba(148, 170, 230, .1); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent-grad); border-radius: 6px; }
.banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid; }
.banner.good { background: rgba(61, 220, 151, .08); border-color: rgba(61, 220, 151, .3); }
.banner.good > svg { color: var(--good); }
.banner.warn { background: rgba(255, 200, 87, .07); border-color: rgba(255, 200, 87, .3); }
.banner.warn > svg { color: var(--warn); }
.banner.info { background: rgba(76, 201, 240, .06); border-color: rgba(76, 201, 240, .22); }
.banner.info > svg { color: var(--accent); }
.banner b { display: block; margin-bottom: 2px; }
.ring { --p: 0; --c: var(--accent); width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 79% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), rgba(148, 170, 230, .12) 0); }
.ring b { font: 700 22px var(--font-display); }
.ring small { display: block; text-align: center; font-size: 11px; color: var(--muted); margin-top: -4px; }

/* ---------- Tower ---------- */
.boss-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.boss {
  position: relative; padding: 16px; border-radius: 16px; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .12s;
}
.boss::after { content: ""; position: absolute; inset: auto -30px -50px auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%); }
.boss:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.boss.active { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 10px 30px color-mix(in srgb, var(--c) 25%, transparent); }
.boss .lv { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 1px; }
.boss h4 { margin: 6px 0 10px; font: 700 15px/1.2 var(--font-display); }
.boss .hp { font-size: 12px; color: var(--muted); margin-top: 8px; }
.team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.team-slot { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.team-slot .ts-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.team-slot .picker-btn { flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; gap: 8px; }
.team-slot .pb-text { width: 100%; }
.team-slot .pb-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-slot .picker-btn .pb-sub { justify-content: center; }
.team-slot .picker-btn > svg.i { display: none; }
.team-slot .lvl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.team-slot input[type=range] { flex: 1; accent-color: var(--accent); }
.chart { width: 100%; height: auto; display: block; }
.chart .bar-win { fill: url(#gWin); }
.chart .bar-lose { fill: url(#gLose); }
.chart .hp-line { stroke: var(--bad); stroke-dasharray: 5 5; stroke-width: 1.5; }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .grid { stroke: rgba(148, 170, 230, .08); }

/* ---------- Setup ---------- */
.hero { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
.hero-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-grad); color: #07101f; box-shadow: 0 10px 30px rgba(76, 201, 240, .3); }
.hero-icon.off { background: linear-gradient(135deg, #ff8a8a, #ff6b6b); box-shadow: 0 10px 30px rgba(255, 107, 107, .25); }
.hero-icon svg { width: 30px; height: 30px; }
.hero h3 { margin: 0 0 4px; font: 700 19px var(--font-display); }
.steps { display: grid; gap: 14px; }
.setup-step { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.setup-step .n { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; background: var(--surface-3); color: var(--accent); border: 1px solid var(--line-strong); }
.path-row { display: flex; gap: 8px; }
.path-row .input { flex: 1; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.log { margin: 0; max-height: 260px; overflow: auto; padding: 14px; border-radius: 12px; background: #070b17; border: 1px solid var(--line); font: 12px/1.55 "Cascadia Mono", Consolas, monospace; color: #b9c6e6; white-space: pre-wrap; user-select: text; }
.log .w { color: var(--warn); }

/* ---------- Empty state, toasts ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 56px 24px; color: var(--muted); }
.empty .e-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); }
.empty .e-icon svg { width: 28px; height: 28px; }
.empty h3 { margin: 0; color: var(--text); font: 600 17px var(--font-display); }
.empty p { margin: 0; max-width: 460px; }
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px; color: var(--muted); }
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; gap: 12px; align-items: flex-start; max-width: 460px; padding: 14px 16px; border-radius: 14px; background: #1b2546; border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); animation: pop .18s ease; user-select: text; white-space: pre-line; }
.toast.error { border-color: rgba(255, 107, 107, .45); }
.toast.error > svg { color: var(--bad); }
.toast.success > svg { color: var(--good); }
.toast .close { margin-left: auto; }

@media (max-width: 1240px) {
  .boss-grid, .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
table.data .wks { flex-wrap: nowrap; }

/* ---------- Global search ---------- */
.topbar { align-items: flex-end; }
.global-search { position: relative; width: 300px; flex: none; }
.gs-results { position: absolute; right: 0; top: calc(100% + 6px); width: 380px; z-index: 60; padding: 6px; border-radius: 14px; background: #121a33; border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.gs-results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.gs-results button:hover { background: rgba(76, 201, 240, .1); }
.gs-results button > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

/* ---------- Paldeck ---------- */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dex-card { --c: var(--el-Normal); position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 10px 12px; border-radius: 16px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--surface)), var(--surface)); border: 1px solid var(--line); transition: transform .12s, border-color .15s, box-shadow .15s; }
.dex-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 18%, transparent); }
.dex-no { position: absolute; top: 8px; left: 10px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dex-name { font-weight: 700; font-size: 14px; }
.dex-work .wks { justify-content: center; }
.dex-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; margin-bottom: 18px; }
.dex-hero::before { content: ""; position: absolute; inset: -60% auto auto -10%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 22%, transparent), transparent 65%); pointer-events: none; }
.dex-hero h2 { margin: 0; font: 700 32px/1.1 var(--font-display); }
.dex-desc { margin: 0; color: var(--muted); max-width: 640px; white-space: pre-line; line-height: 1.55; user-select: text; }
.partner { position: relative; align-self: start; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); max-width: 240px; }
.partner b { font: 700 16px var(--font-display); }
.dex-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.drops { display: grid; gap: 6px; }
.drop { display: grid; grid-template-columns: auto 1fr auto 60px; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.drop .muted { text-align: right; }
table.skills td { padding: 7px 12px; }
table.skills tbody tr { cursor: default; }
.pair.mini { padding: 8px 12px; }
.pair.mini .sp { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-weight: 600; }

/* ---------- Passives ---------- */
.passive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.passive-card { --r: var(--line-strong); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--r); }
.passive-card.r4 { --r: var(--gold); } .passive-card.r3 { --r: #c792ff; } .passive-card.r2 { --r: #6cb8ff; } .passive-card.r1 { --r: #9fd8c0; } .passive-card.neg { --r: var(--bad); }
.passive-card p { margin: 0; color: var(--muted); font-size: 12.5px; user-select: text; }

/* ---------- Types ---------- */
table.types { border-collapse: separate; border-spacing: 4px; margin: 0 auto; }
table.types th { padding: 4px 8px; text-align: left; font-weight: 600; }
table.types th.corner { font-size: 11px; color: var(--faint); font-weight: 500; }
table.types td.hit { width: 48px; height: 36px; text-align: center; border-radius: 8px; background: var(--bg-2); font-size: 13px; }
table.types td.strong { background: rgba(61, 220, 151, .18); color: var(--good); font-weight: 700; }
table.types td.weak { background: rgba(255, 107, 107, .14); color: var(--bad); font-weight: 700; }
.type-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.type-card { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--c); }

/* ---------- World map ---------- */
.map-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; height: calc(100vh - 150px); min-height: 520px; }
.map-side { overflow-y: auto; overflow-x: hidden; }
.map-card { padding: 0; overflow: hidden; }
.map-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: grab; background: #0a1224; touch-action: none; }
.map-viewport.dragging { cursor: grabbing; }
.map-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; --inv: 1; }
.map-stage img { width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }
.map-spawns { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-spawns circle { fill: var(--spawn, #ff4fd8); fill-opacity: .55; stroke: #fff; stroke-opacity: .35; stroke-width: calc(.6px * var(--inv)); r: calc(3.2px * var(--inv)); }
.map-markers { position: absolute; inset: 0; pointer-events: none; }
.mk { position: absolute; transform: translate(-50%, -50%) scale(var(--inv)); pointer-events: auto; }
.mk-statue { width: 11px; height: 11px; border-radius: 3px; rotate: 45deg; background: var(--c); border: 2px solid rgba(8, 12, 24, .85); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 70%, transparent); }
.mk-boss { cursor: pointer; display: grid; place-items: center; }
.mk-boss .avatar { background: conic-gradient(#ff6b6b, #ffd166, #ff6b6b) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.mk-boss i { position: absolute; bottom: -6px; right: -8px; font: 700 9.5px var(--font); font-style: normal; padding: 1px 4px; border-radius: 6px; background: #ff6b6b; color: #1a0710; }
.mk-boss:hover { z-index: 5; filter: brightness(1.15); }
.map-zoom { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.map-zoom .btn { background: rgba(20, 28, 52, .9); }
.layer { display: flex; align-items: center; gap: 10px; padding: 6px 2px; cursor: pointer; font-weight: 500; }
.layer input { accent-color: var(--accent); width: 16px; height: 16px; }
.layer b { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 12px; }
.swatch { width: 12px; height: 12px; border-radius: 50%; }
.sw-spawn { background: #ff4fd8; } .sw-boss { background: #ff6b6b; } .sw-statue { background: #7ee081; border-radius: 3px; rotate: 45deg; }
.legend { display: grid; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend b { margin-left: auto; font-weight: 600; }
.dot-s { width: 9px; height: 9px; border-radius: 2px; rotate: 45deg; flex: none; }
@media (max-width: 1240px) {
  .dex-cols { grid-template-columns: 1fr; }
  .dex-hero { grid-template-columns: auto 1fr; }
  .dex-hero .partner { grid-column: 1 / -1; max-width: none; }
  .map-layout { grid-template-columns: 260px 1fr; }
  .global-search { width: 220px; }
}
.txt-good { color: var(--good); font-weight: 600; } .txt-bad { color: var(--bad); font-weight: 600; }
.passive-card p { white-space: pre-line; }
.avatar { min-width: var(--s); max-width: var(--s); min-height: var(--s); max-height: var(--s); display: inline-block; }

/* ---------- Where to get a Pal ---------- */
.sources { display: flex; flex-direction: column; gap: 8px; }
.src { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.src-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(76, 201, 240, .12); color: var(--accent); }
.src-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.src-text > span { color: var(--muted); font-size: 12.5px; }
.src .btn { padding: 7px 11px; font-size: 12.5px; align-self: center; }
.src-pairs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.src-pairs .pair.mini { width: 100%; text-align: left; color: inherit; font: inherit; }
.sources-card { border-color: rgba(76, 201, 240, .35); }
.map-tabs { display: grid; grid-auto-columns: 1fr; width: 100%; }
.map-focus { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 14px;
  background: rgba(20, 28, 52, .92); border: 1px solid rgba(76, 201, 240, .45); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); font-weight: 600; font-size: 13px; }
.map-focus .btn { padding: 6px; }
#spawnCount a { color: var(--accent); }
.map-side .src { flex-wrap: wrap; }
.map-side .src .btn { margin-left: 46px; }
.map-regions { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Items ---------- */
:root { --rar0: #9aa6c2; --rar1: #5fd068; --rar2: #4cb3ff; --rar3: #b57cff; --rar4: #ffc24d; }
.item-icon { --s: 44px; --r: var(--rar0); width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; border-radius: calc(var(--s) * .22);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--r) 22%, #1d2848), #121a33 75%); border: 1px solid color-mix(in srgb, var(--r) 45%, transparent); color: var(--muted); }
.item-icon img { width: 88%; height: 88%; object-fit: contain; }
.item-icon svg { width: 50%; height: 50%; }
.r1 { --r: var(--rar1); } .r2 { --r: var(--rar2); } .r3 { --r: var(--rar3); } .r4 { --r: var(--rar4); }
.item-icon.r1 { --r: var(--rar1); } .item-icon.r2 { --r: var(--rar2); } .item-icon.r3 { --r: var(--rar3); } .item-icon.r4 { --r: var(--rar4); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.item-card { --r: var(--rar0); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--r); transition: transform .12s, border-color .15s; }
.item-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--r) 60%, transparent); }
.item-card-text { min-width: 0; display: flex; flex-direction: column; }
.item-card-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-card-text span { font-size: 11.5px; color: var(--muted); }
.item-hero { grid-template-columns: auto 1fr; }
.badge.rarity { --r: var(--rar0); color: var(--r); background: color-mix(in srgb, var(--r) 14%, transparent); border-color: color-mix(in srgb, var(--r) 35%, transparent); }
.item-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.item-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 10px; cursor: pointer; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--line); }
.item-chip:hover { border-color: rgba(76, 201, 240, .5); }
.item-chip b { color: var(--accent); }
.drop[data-item] { cursor: pointer; }
.drop[data-item]:hover { border-color: rgba(76, 201, 240, .45); }
.gs-item { width: 30px; height: 30px; object-fit: contain; }
.mk-poi { --c: var(--accent); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #0b1020;
  background: var(--c); border: 2px solid rgba(8, 12, 24, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.mk-poi svg.i { width: 12px; height: 12px; stroke-width: 2.4; }
.mk-poi:hover { z-index: 4; filter: brightness(1.15); }
.layer-icon { --c: var(--accent); width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--c); color: #0b1020; flex: none; }
.layer-icon svg.i { width: 11px; height: 11px; stroke-width: 2.6; }

/* ---------- Mutation preview ---------- */
.mutation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mutation { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, rgba(181, 124, 255, .12), var(--surface)); border: 1px solid rgba(181, 124, 255, .3); transition: transform .12s, border-color .15s; }
.mutation:hover { transform: translateY(-1px); border-color: rgba(181, 124, 255, .7); }
.mutation-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mutation-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mutation-pct { display: flex; flex-direction: column; align-items: flex-end; }
.mutation-pct b { font: 700 16px var(--font-display); color: #c9a7ff; }
.mutation-pct small { color: var(--faint); font-size: 10.5px; white-space: nowrap; }

/* ---------- History navigation ---------- */
.topbar-main { display: flex; align-items: flex-end; gap: 16px; min-width: 0; }
.history-nav { display: flex; gap: 6px; padding-bottom: 4px; }
.history-nav .btn { padding: 7px; }
.history-nav .btn:disabled { opacity: .35; }
.history-menu { position: relative; }
.history-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; width: 360px; max-height: 420px; overflow: auto; padding: 6px;
  border-radius: 14px; background: #121a33; border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.history-list .hl-title { padding: 6px 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.history-list button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; font-size: 13px; }
.history-list button:hover { background: rgba(76, 201, 240, .1); }
.history-list button.current { background: rgba(76, 201, 240, .16); color: var(--accent); }
.history-list button span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-list .hl-clear { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; color: var(--muted); font-weight: 600; font-size: 20px; }
.link-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; color: var(--accent); background: rgba(76, 201, 240, .08); border: 1px solid rgba(76, 201, 240, .25); }
.link-chip:hover { background: rgba(76, 201, 240, .16); }
.mk-pin { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 12px; white-space: nowrap; color: #07101f;
  background: var(--accent-grad); box-shadow: 0 4px 16px rgba(0, 0, 0, .6); transform: translate(-50%, -110%) scale(var(--inv)); font-size: 12px; }
.mk-pin svg { width: 16px; height: 16px; }

/* ---------- Loot ---------- */
.src.loot .src-text { overflow: hidden; }
table.loot-table td, table.loot-table th { padding: 6px 10px; }

/* ---------- Technologies ---------- */
.tech-level { margin-bottom: 20px; }
.tech-level-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lv-badge { display: inline-block; padding: 3px 10px; border-radius: 8px; font: 700 13px var(--font-display); background: var(--accent-grad); color: #07101f; }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tech-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.tech-card.ancient { background: linear-gradient(135deg, rgba(255, 194, 77, .08), var(--surface)); border-color: rgba(255, 194, 77, .3); }
.tech-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(76, 201, 240, .35); }
.tech-head { display: flex; gap: 12px; align-items: center; }
.tech-title { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tech-title b { font-size: 14px; }
.tech-desc { margin: 0; font-size: 12px; color: var(--muted); white-space: pre-line; }

/* ---------- Missions ---------- */
.mission-card { margin-bottom: 14px; }
.reward-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.reward { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.reward .item-chip { background: transparent; border: 0; padding: 0; flex: 1; min-width: 0; }
.reward .item-chip span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-title { font: 600 15px var(--font-display); margin: 18px 0 10px; }
.quest-list { display: flex; flex-direction: column; gap: 8px; }
.quest { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.quest-main { flex: 1; min-width: 0; }
.quest-main p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; white-space: pre-line; }
.nowrap { white-space: nowrap; }

/* ---------- Breeding planner ---------- */
.planner-grid { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .planner-grid { grid-template-columns: minmax(0, 1fr); } }
/* Grid items default to min-width:auto and would grow to the family tree's width; the tree scrolls inside instead. */
.planner-grid > *, .collections-grid > * { min-width: 0; }
.check-line { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check-line input { accent-color: var(--accent); width: 16px; height: 16px; }
.passive-row.disabled { cursor: not-allowed; }
.passive-row .pn .badge { margin-left: 6px; padding: 1px 7px; font-size: 10.5px; vertical-align: 1px; }
.pselect-chosen { align-items: center; }
.source-list { display: flex; flex-direction: column; gap: 6px; }
.source { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; }
.source.on { border-color: rgba(76, 201, 240, .45); background: rgba(76, 201, 240, .07); }
.source input { accent-color: var(--accent); }
.source b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.route-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.route-tab { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: left; }
.route-tab span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.route-tab.active { border-color: var(--accent); background: rgba(76, 201, 240, .1); }
.route-tab.active b { color: var(--accent); }

/* Family tree: parents stacked on the left, the child to their right, joined by connector lines. */
.ftree-wrap { overflow-x: auto; padding: 6px 2px 12px; }
.ftree { display: inline-flex; min-width: min-content; }
.tn { display: flex; align-items: center; }
/* Parents end flush at the right edge, so each connector starts exactly at its card; short branches get space on the left. */
.tn-parents { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-right: 20px; position: relative; }
.tn-parents > .tn { position: relative; }
.tn-parents > .tn::after { content: ""; position: absolute; right: -20px; top: 50%; width: 20px; border-top: 2px solid var(--line-strong); }
.tn-parents > .tn:first-child::before { content: ""; position: absolute; right: -20px; top: 50%; bottom: -6px; border-right: 2px solid var(--line-strong); }
.tn-parents > .tn:last-child::before { content: ""; position: absolute; right: -20px; top: -6px; bottom: 50%; border-right: 2px solid var(--line-strong); }
.tn-link { width: 18px; border-top: 2px solid var(--line-strong); flex: none; }
.tn-card { position: relative; width: 196px; flex: none; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--k, var(--line-strong)); display: flex; flex-direction: column; gap: 7px; cursor: pointer; }
.tn-card:hover { border-color: var(--accent); border-left-color: var(--k); }
.tn-card.owned { --k: var(--good); }
.tn-card.catch { --k: var(--muted); }
.tn-card.wild { --k: var(--warn); }
.tn-card.breed { --k: var(--accent); background: linear-gradient(135deg, rgba(76, 201, 240, .07), var(--surface)); }
.tn-card .chips { gap: 4px; }
.tn-card .pchip { font-size: 11px; padding: 2px 7px; }
.tn-head { display: flex; align-items: center; gap: 9px; }
.tn-name { display: flex; flex-direction: column; min-width: 0; }
.tn-name b { font-size: 13px; display: flex; align-items: center; gap: 4px; }
.tn-name span { line-height: 1.3; }
.tn-step { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px var(--font-display); background: var(--accent-grad); color: #07101f; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend .lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg.owned { background: var(--good); } .lg.catch { background: var(--muted); } .lg.wild { background: var(--warn); } .lg.breed { background: var(--accent); }
.plan-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.plan-steps li { padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.plan-steps li::marker { font-weight: 700; color: var(--accent); }

/* ---------- My Pals ---------- */
.collections-grid { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .collections-grid { grid-template-columns: minmax(0, 1fr); } }
.coll-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: left; }
.coll-card:hover { border-color: var(--line-strong); }
.coll-card.active { border-color: var(--accent); background: rgba(76, 201, 240, .08); }
.coll-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); color: var(--accent); flex: none; }
.coll-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.coll-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll-avatars { display: flex; }
.coll-avatars .avatar { margin-left: -8px; }
.title-input { flex: 1; font: 700 18px var(--font-display); background: transparent; border-color: transparent; }
.title-input:hover, .title-input:focus { border-color: var(--line-strong); background: var(--bg-2); }
.btn.danger { background: rgba(255, 107, 107, .15); border-color: rgba(255, 107, 107, .5); color: var(--bad); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
button.plain { background: none; border: 0; padding: 0; cursor: pointer; }
.owned-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 14px; }
.owned-card { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.owned-card .pchip { font-size: 11.5px; }
.editor-card { margin-top: 14px; border-color: rgba(76, 201, 240, .35); }
.world-list { display: flex; flex-direction: column; gap: 8px; }
.world { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; text-align: left; width: 100%; }
.world:hover { border-color: var(--accent); }
.world > span:first-of-type { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.world.busy .btn .spin { display: inline-block; }

/* Passive picker: full, multi-line descriptions so every choice is understandable at a glance. */
.pselect .passive-list { max-height: 460px; }
.pselect .passive-row { align-items: flex-start; padding: 9px 10px; border-bottom: 1px solid var(--line); border-radius: 0; }
.pselect .passive-row:last-child { border-bottom: 0; }
.pselect .passive-row .check { margin-top: 2px; }
.pselect .passive-row .rank { margin-top: 1px; }
.pselect .pn { display: flex; flex-direction: column; gap: 4px; }
.pselect .pname { font-size: 13.5px; }
.pselect .pdesc { white-space: pre-line; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pselect .ptags { display: flex; flex-wrap: wrap; gap: 5px; }
.pselect .ptags .badge { padding: 1px 8px; font-size: 11px; }
.cap-hint { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--warn); min-height: 16px; }

.route-tab small { display: block; max-width: 220px; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-tab.active small { color: var(--muted); }
.tn-card .tn-sub { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.planner-full { grid-column: 1 / -1; }
.planner-full:empty { display: none; }

/* ---------- Passive plates as in the game ---------- */
.pskill { --pc: #dfe4ee; display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 3px 7px 3px 10px; border-radius: 3px;
  font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--pc); white-space: nowrap; cursor: default; position: relative;
  background: linear-gradient(180deg, rgba(38, 50, 82, .96), rgba(17, 24, 44, .96));
  border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); border-left: 3px solid var(--pc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .4); text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.pskill-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pskill.r0 { --pc: #9aa3b5; }
.pskill.r1 { --pc: #e4e8f0; }
.pskill.r2 { --pc: #e4e8f0; }
.pskill.r3 { --pc: #f2c14e; }
.pskill.r4 { --pc: #4fe0d2; }
.pskill.r5 { --pc: #d79bff; }
.pskill.neg { --pc: #ff5a64; }
.pskill-arrow { width: 16px; height: 16px; flex: none; margin-left: auto; background: var(--pc); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pc) 60%, transparent)); }
.pskill-arrow.text { background: none; -webkit-mask: none; mask: none; width: auto; height: auto; font-size: 9px; letter-spacing: -2px; color: var(--pc); }
.pskill button { display: grid; place-items: center; margin-left: -2px; padding: 0; border: 0; background: none; color: #c7cede; cursor: pointer; opacity: .6; }
.pskill button:hover { opacity: 1; color: #fff; }
.pskill button svg { width: 12px; height: 12px; }
.pskill:hover { background: linear-gradient(180deg, rgba(48, 63, 102, .98), rgba(22, 31, 56, .98)); }
.tn-card .pskill, .owned-card .pskill { font-size: 11px; min-height: 20px; padding: 2px 5px 2px 7px; gap: 6px; }
.tn-card .pskill-arrow, .owned-card .pskill-arrow { width: 13px; height: 13px; }
.pskill.wide { display: flex; width: 100%; }
.pselect .pname { display: block; margin-bottom: 4px; }
.pselect .pname .pskill { min-width: 230px; max-width: 100%; }
.pselect-chosen .pskill { min-width: 180px; }

.tooltip { position: fixed; z-index: 200; max-width: 320px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: #0d1428; border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); font-size: 12.5px; }
.tooltip .tt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tooltip .tt-rank { color: var(--muted); font-size: 11.5px; }
.tooltip .tt-title { font-weight: 700; margin-bottom: 4px; }
.tooltip .tt-body { white-space: pre-line; color: var(--text); line-height: 1.45; }

/* ---------- Free breeding tree ---------- */
.tn-actions { display: flex; gap: 6px; align-items: center; }
.tn-actions .btn.sm { padding: 4px 9px; font-size: 11.5px; }
.tn-actions .btn.icon.sm { padding: 4px; }
.tn-card.wild { border-style: dashed; }
.tn-card.choosing { box-shadow: 0 0 0 2px var(--accent); }
.chooser { padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid rgba(76, 201, 240, .35); }
.pair-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: auto; margin-top: 10px; }
.pair-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; text-align: left; }
.pair-row:hover { border-color: var(--accent); }
.pair-row .sp { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.pair-row .badge { padding: 1px 7px; font-size: 10.5px; }
.saved-tree { cursor: default; }
.saved-tree b { font-size: 13px; }

/* ---------- Teleport points ---------- */
.tp-list { display: flex; flex-direction: column; gap: 6px; }
.tp { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; text-align: left; }
.tp:hover { border-color: var(--accent); }
.tp-no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 11px var(--font-display); background: #4cc9f0; color: #07101f; }
.tp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-text b { font-size: 13px; }
.tp-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tp-inline .pchip { cursor: pointer; }
.mk-poi.hl { z-index: 6; transform: translate(-50%, -50%) scale(calc(var(--inv) * 1.6)); box-shadow: 0 0 0 3px #fff, 0 0 18px #4cc9f0; }

/* ---------- Pan & zoom tree viewport ---------- */
.pz-viewport { position: relative; height: min(72vh, 760px); min-height: 380px; overflow: hidden; border-radius: 14px; cursor: grab;
  background: radial-gradient(circle at 1px 1px, rgba(148, 170, 230, .12) 1px, transparent 0) 0 0 / 22px 22px, var(--bg-2); border: 1px solid var(--line); touch-action: none; }
.pz-viewport.dragging { cursor: grabbing; }
.pz-viewport.dragging .tn-card { pointer-events: none; }
.pz-content { position: absolute; left: 0; top: 0; transform-origin: 0 0; padding: 12px; width: max-content; }
.pz-tools { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; align-items: center; }
.pz-tools .seg button { padding: 6px 9px; }
.pz-hint { position: absolute; left: 12px; bottom: 8px; font-size: 11.5px; color: var(--faint); pointer-events: none; }

/* Upright tree: the child sits on top, its parents side by side below. */
.ftree.vertical .tn { flex-direction: column-reverse; align-items: center; }
.ftree.vertical .tn-parents { flex-direction: row; align-items: flex-start; gap: 14px; padding: 20px 0 0; }
.ftree.vertical .tn-link { width: 0; height: 18px; border-top: 0; border-left: 2px solid var(--line-strong); }
.ftree.vertical .tn-parents > .tn::after { right: auto; left: 50%; top: -20px; width: 0; height: 20px; border-top: 0; border-left: 2px solid var(--line-strong); }
.ftree.vertical .tn-parents > .tn:first-child::before { right: -7px; left: 50%; top: -20px; bottom: auto; height: 0; border-right: 0; border-top: 2px solid var(--line-strong); }
.ftree.vertical .tn-parents > .tn:last-child::before { left: -7px; right: 50%; top: -20px; bottom: auto; height: 0; border-right: 0; border-top: 2px solid var(--line-strong); }

/* ---------- World map sidebar (accordion, one group open) ---------- */
.map-layout { grid-template-columns: 330px 1fr; }
.map-side { display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.map-search { margin-bottom: 4px; }
.acc { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; flex: none; }
.acc.open { border-color: rgba(76, 201, 240, .35); }
.acc-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px; cursor: pointer; user-select: none; }
.acc-head:hover { background: rgba(148, 170, 230, .05); }
.acc-head b { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--bg-2); color: var(--accent); }
.acc-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.acc-chevron { color: var(--muted); transition: transform .15s; }
.acc.open .acc-chevron { transform: rotate(180deg); }
.acc-body { display: none; padding: 4px 12px 12px; }
.acc.open .acc-body { display: block; }
.acc-sub { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.acc-body .layer { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.acc-body .layer:hover { background: rgba(148, 170, 230, .06); }
.acc-body .layer .layer-name { flex: 1; min-width: 0; }
.acc-body .layer b { font-size: 11.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-body .layer[hidden] { display: none; }
.map-tabs-float { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.map-focus { top: 56px; }
.mk-poi.dense { width: 16px; height: 16px; border-radius: 5px; border-width: 1.5px; }
.mk-poi.dense svg.i { width: 9px; height: 9px; }

/* ---------- Tier list ---------- */
.tier-list { display: flex; flex-direction: column; gap: 8px; }
.tier-row { display: grid; grid-template-columns: 84px 1fr; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); min-height: 104px; }
.tier-label { display: grid; place-items: center; font: 800 38px var(--font-display); color: #0b1020; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.tier-label.t-S { background: linear-gradient(160deg, #ff8f8f, #ff5d73); }
.tier-label.t-A { background: linear-gradient(160deg, #ffc38a, #ff9f43); }
.tier-label.t-B { background: linear-gradient(160deg, #ffe38a, #ffd166); }
.tier-label.t-C { background: linear-gradient(160deg, #c6f28f, #7ee081); }
.tier-label.t-D { background: linear-gradient(160deg, #9fd4ff, #6cb8ff); }
.tier-pals { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; align-content: flex-start; }
.tier-pal { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 6px 4px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; cursor: pointer; }
.tier-pal:hover { background: var(--bg-2); border-color: var(--line-strong); }
.tier-pal span { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.partner-desc { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); white-space: pre-line; line-height: 1.45; }

/* ---------- Technology board (in-game layout) ---------- */
.tech-board { border-radius: 14px; overflow: hidden; border: 1px solid rgba(76, 201, 240, .25); background: linear-gradient(180deg, #0c2231, #0a1624); }
.tech-board-head { display: grid; grid-template-columns: 1fr 220px; font: 700 18px var(--font-display); color: #eaf6ff; }
.tech-board-head span { padding: 8px 16px; background: linear-gradient(90deg, #0f6a78, #0b4d5a); }
.tech-board-head .ancient { background: linear-gradient(90deg, #5d2a8c, #43206b); }
.tech-row { display: grid; grid-template-columns: 76px 1fr 220px; border-top: 1px solid rgba(76, 201, 240, .14); min-height: 150px; }
.tech-lv { position: relative; display: grid; place-items: center; }
.tech-lv::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid rgba(76, 201, 240, .55); }
.tech-lv span { position: relative; width: 50px; height: 50px; display: grid; place-items: center; transform: rotate(45deg); border: 2px solid #4cc9f0;
  background: #0b1d2b; color: #7fe3ff; font: 700 18px var(--font-display); }
.tech-lv span::after { content: attr(data-lv); transform: rotate(-45deg); }
.tech-tiles { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; align-content: flex-start; }
.tech-tiles.ancient { background: linear-gradient(180deg, rgba(93, 42, 140, .55), rgba(67, 32, 107, .55)); justify-content: center; }
.tech-tile { position: relative; width: 124px; display: flex; flex-direction: column; border: 1px solid rgba(76, 201, 240, .45); background: #0f2638;
  padding: 0; cursor: pointer; color: #eaf6ff; }
.tech-tile:hover, .tech-tile.selected { border-color: #7fe3ff; box-shadow: 0 0 0 2px rgba(127, 227, 255, .45); }
.tech-tile.ancient { border-color: rgba(201, 162, 255, .6); background: #2a1845; }
.tech-type { font-size: 11px; text-align: center; padding: 2px 4px; background: rgba(0, 0, 0, .35); color: #b8d6e8; }
.tech-icon { position: relative; height: 82px; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(60, 140, 200, .45), rgba(10, 30, 50, .2) 70%); }
.tech-tile.ancient .tech-icon { background: radial-gradient(circle at 50% 45%, rgba(160, 90, 220, .5), rgba(40, 20, 70, .2) 70%); }
.tech-icon img { max-width: 76px; max-height: 76px; object-fit: contain; }
.tech-cost { position: absolute; font: 800 30px var(--font-display); color: #62e3ff; text-shadow: 0 2px 4px #000, 0 0 10px rgba(0, 0, 0, .8); }
.tech-tile.ancient .tech-cost { color: #e3b3ff; }
.tech-name { font-size: 12px; text-align: center; padding: 4px; line-height: 1.2; min-height: 30px; display: grid; place-items: center; background: rgba(0, 0, 0, .25); }
.tech-detail { margin-top: 14px; }

/* Game icons on the map (fast travel eagle, watch tower, tower, dungeon, …). */
.mk-game { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; box-shadow: none; }
.mk-game img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px rgba(0, 0, 0, .6)); pointer-events: none; }
.mk-game.dense { width: 20px; height: 20px; }
.mk-game.hl { box-shadow: none; filter: drop-shadow(0 0 8px #4cc9f0); }
.layer-icon.game { background: #0b1d2b; padding: 1px; }
.layer-icon.game img { width: 100%; height: 100%; object-fit: contain; }
.boss-pal { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--muted); }
.boss.hard { border-color: rgba(255, 107, 107, .45); }
.boss-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }

/* ---------- Paldeck in the in-game layout ---------- */
.dex-game { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1150px) { .dex-game { grid-template-columns: minmax(0, 1fr); } .dex-list { display: none; } }
.dex-list { position: sticky; top: 0; display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 420px; border: 1px solid rgba(148, 170, 230, .2);
  background: rgba(10, 16, 32, .75); border-radius: 12px; overflow: hidden; }
.dex-list-items { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.dex-list-search { padding: 8px; border-top: 1px solid var(--line); }
.dex-entry { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 8px;
  border: 1px solid rgba(148, 170, 230, .16); background: linear-gradient(90deg, rgba(20, 30, 55, .9), rgba(20, 30, 55, .5)); cursor: pointer; text-align: left; }
.dex-entry .avatar { grid-row: 1 / 3; grid-column: 3; }
.dex-entry-no { font-size: 12px; color: var(--muted); }
.dex-entry-no b { font: 700 16px var(--font-display); color: #cfe3ff; }
.dex-entry-el { display: flex; gap: 3px; }
.dex-entry-name { grid-column: 1 / 3; font: 600 15px var(--font-display); color: #eef4ff; }
.dex-entry.active { background: linear-gradient(90deg, #2a8fe0, #1d5fa8); border-color: #7fc8ff; }
.dex-entry.active .dex-entry-no, .dex-entry.active .dex-entry-no b { color: #fff; }
.dex-stage { min-width: 0; }
.dex-tabs { display: grid; grid-template-columns: 1fr 1fr; max-width: 520px; margin: 0 auto 14px; border: 1px solid rgba(148, 170, 230, .3); }
.dex-tabs button { padding: 6px; border: 0; background: rgba(20, 30, 55, .7); color: var(--muted); font: 600 15px var(--font-display); cursor: pointer; }
.dex-tabs button.active { background: #b9c9d6; color: #0b1020; }
.dex-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
@media (max-width: 1350px) { .dex-body { grid-template-columns: minmax(0, 1fr); } }
.dex-center { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dex-portrait { padding: 14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 35%, transparent), transparent 70%); }
.dex-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.dex-title h2 { margin: 0; font: 700 26px var(--font-display); }
.dex-no-big { font: 700 18px var(--font-display); color: var(--muted); }
.dex-descbox { width: 100%; max-width: 640px; padding: 14px 16px; border: 1px solid rgba(148, 170, 230, .35); background: rgba(8, 12, 24, .85); font-size: 14px; line-height: 1.6; white-space: pre-line; }
.dex-panels { display: flex; flex-direction: column; gap: 12px; }
.gpanel-title { padding: 3px 10px; background: linear-gradient(90deg, #5b6b7d, #3d4a59 70%, transparent); color: #eef4ff; font: 600 14px var(--font-display); letter-spacing: .3px; }
.gpanel-body { padding: 8px 4px 2px; }
.gpanel-name { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(8, 12, 24, .9); font: 600 15px var(--font-display); }
.gpanel-text { margin: 8px 0 0; padding: 8px 10px; background: rgba(20, 28, 48, .7); font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.work-grid-game { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.work-cell { display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: rgba(20, 28, 48, .85); border-bottom: 2px solid rgba(76, 201, 240, .35); font-size: 13px; }
.work-cell b { margin-left: auto; font-size: 12.5px; }
.work-cell.off { opacity: .35; border-bottom-color: transparent; }
.work-cell svg { width: 16px; height: 16px; flex: none; }
.food-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: rgba(20, 28, 48, .85); font-size: 12.5px; }
.food-icons { display: flex; gap: 3px; }
.food-icons i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.food-icons i.on { background: #ffb347; box-shadow: 0 0 4px rgba(255, 179, 71, .7); }
.drop-game { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; margin-bottom: 3px; border: 0; background: rgba(20, 28, 48, .85); color: inherit; cursor: pointer; text-align: left; font: 500 14px var(--font); }
.drop-game:hover { background: rgba(40, 60, 100, .85); }
.drop-game small { margin-left: auto; color: var(--muted); }

/* ---------- Missions in the in-game layout ---------- */
.mq { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .mq { grid-template-columns: minmax(0, 1fr); } }
.mq-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.mq-tabs button { flex: 1; padding: 7px 10px; border: 1px solid rgba(148, 170, 230, .3); background: rgba(20, 30, 55, .7); color: var(--muted); font: 600 15px var(--font-display); cursor: pointer; }
.mq-tabs button.active { background: linear-gradient(90deg, #2a8fe0, #1d6fc4); color: #fff; border-color: #7fc8ff; }
.mq-list { display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 290px); overflow-y: auto; padding-right: 4px; }
.mq-entry { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-bottom: 1px dashed rgba(148, 170, 230, .25); background: rgba(14, 22, 40, .85);
  color: #eef4ff; font: 500 15px var(--font); text-align: left; cursor: pointer; }
.mq-entry.active { box-shadow: inset 4px 0 0 #ffd166; background: rgba(40, 52, 80, .9); }
.mq-mark { color: #3ddc97; display: grid; place-items: center; }
.mq-entry.Sub .mq-mark { color: #6cb8ff; }
.mq-detail { border: 1px solid rgba(148, 170, 230, .3); background: rgba(12, 18, 34, .9); }
.mq-head { padding: 14px 20px; background: linear-gradient(135deg, #b8961f, #8a6d12); border-bottom: 3px solid #ffd166; }
.mq-head.Sub, .mq-head.Hidden { background: linear-gradient(135deg, #3d6a96, #264a70); border-bottom-color: #7fc8ff; }
.mq-head h3 { margin: 0 0 6px; font: 700 24px var(--font-display); color: #fff; }
.mq-head span { display: flex; align-items: center; gap: 6px; color: #b8f5c9; font-weight: 600; }
.mq-section { padding: 14px 20px 4px; }
.mq-rewards { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 4px; }
.mq-exp { display: inline-flex; align-items: center; gap: 8px; font: 700 20px var(--font-display); color: #7fe3ff; }
.mq-exp b { font-size: 13px; padding: 2px 6px; border: 1.5px solid #7fe3ff; transform: rotate(-8deg); }
.mq-text { margin: 8px 4px; white-space: pre-line; line-height: 1.6; }
.mq-actions { padding: 12px 20px 16px; display: flex; justify-content: flex-end; }

/* ---------- Base simulator ---------- */
.base-grid { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .base-grid { grid-template-columns: minmax(0, 1fr); } }
.base-grid > * { min-width: 0; }
.check-list { display: flex; flex-direction: column; gap: 2px; }
.check-list .check-line { margin-top: 4px; }
.worker-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 520px; overflow-y: auto; }
.worker { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.worker-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.worker-work { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); }
.worker-work .wk { display: inline-flex; align-items: center; gap: 3px; }
.worker-work svg { width: 13px; height: 13px; }
.effect-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.effect-list > div { display: flex; align-items: center; gap: 8px; }
.work-table tr.off td { opacity: .45; }
.work-table svg { width: 16px; height: 16px; }
.dex-game > *, .dex-body > * { min-width: 0; }
.dex-descbox, .gpanel-text, .gpanel-name { box-sizing: border-box; }
/* Narrow windows: the list gives way to the page itself (neighbors stay reachable via the arrows). */
@media (max-width: 1150px) { .dex-game .dex-list { display: none; } }

/* ---------- Passive recommendations (planner mode "builds") ---------- */
.builds-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.builds-pal { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.builds-pal .picker { min-width: 220px; }
.builds-help { flex: 1 1 280px; margin: 0; }
.builds-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.builds-nav { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.builds-nav button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.builds-nav button:hover { background: rgba(148, 170, 230, .07); color: var(--text); }
.builds-nav button.active { background: rgba(76, 201, 240, .14); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.build-boss { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.build-boss select { max-width: 320px; }
.build-plates { display: flex; flex-direction: column; gap: 6px; max-width: 420px; padding: 12px; border-radius: 6px; background: rgba(8, 12, 24, .55); border: 1px solid var(--line); }
.build-slot { display: flex; align-items: center; gap: 8px; }
.build-no { width: 18px; flex: none; color: var(--faint); font-size: 11px; font-weight: 700; text-align: right; }
.build-slot .pskill { min-height: 30px; font-size: 13.5px; }
.build-slot .pskill-arrow { width: 18px; height: 18px; }
.build-totals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.build-total { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; background: rgba(148, 170, 230, .08); border: 1px solid var(--line); }
.build-total small { color: var(--faint); font-size: 10.5px; }
.build-total.good b { color: var(--good, #5fd38d); }
.build-total.bad b { color: var(--bad, #ff6b6b); }
.build-alt { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.build-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.build-pals { display: flex; flex-direction: column; gap: 6px; }
.build-pal { padding: 2px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.build-pal:hover { border-color: var(--line-strong); }
.build-pal.on { border-color: var(--accent); }
.build-card .banner { margin-bottom: 12px; }
@media (max-width: 820px) {
  .builds-layout { grid-template-columns: minmax(0, 1fr); }
  .builds-nav { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Mini world map in the Paldeck habitat tab ---------- */
.mini-map-panel { order: 1; width: 100%; }
.mini-map-panel .gpanel-title { display: flex; align-items: center; gap: 6px; }
.mini-map-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mini-map-bar .btn { margin-left: auto; }
.mini-map-bar .seg button { padding: 4px 9px; }
.mini-map { position: relative; height: 420px; overflow: hidden; border-radius: 6px; border: 1px solid var(--line); background: #0a1224; cursor: grab; touch-action: none; }
.mini-map.dragging { cursor: grabbing; }
.mini-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; --inv: 1; }
.mini-stage img { width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }
.mk-mini-tp { display: grid; place-items: center; width: 26px; height: 26px; }
.mk-mini-tp img { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); }
.mk-mini-tp b { position: absolute; bottom: -5px; right: -6px; min-width: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent); color: #07101f; font-size: 9.5px; text-align: center; }
.mini-tp-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mini-tp { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; background: rgba(148, 170, 230, .08); border: 1px solid var(--line); }
.mini-tp b { color: var(--accent); }
.mini-tp small { color: var(--faint); }

/* ---------- Planner: implants and missing passives ---------- */
.tn-card.implant { --k: #c792ff; border-style: dashed; }
.lg.implant { background: #c792ff; }
.howto { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(8, 12, 24, .45); border: 1px solid var(--line); }
.howto-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.howto ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.card[hidden] { display: none; }
.cake-table tr.best td { background: rgba(61, 220, 151, .07); }
.cake-table td.small { font-size: 12px; color: var(--muted); }

/* ---------- Type chart: "my Pal" answers ---------- */
.types-pick-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.types-pick-row .picker { min-width: 240px; }
.types-el-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.types-el-buttons button { padding: 2px; border: 2px solid transparent; border-radius: 999px; background: none; cursor: pointer; opacity: .75; }
.types-el-buttons button:hover { opacity: 1; }
.types-el-buttons button.on { border-color: var(--accent); opacity: 1; }
.types-answer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 980px) { .types-answer { grid-template-columns: minmax(0, 1fr); } }
.types-side.attack { border-top: 3px solid var(--good); }
.types-side.defend { border-top: 3px solid var(--warn); }
.types-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.types-block { padding: 10px 12px; border-radius: 10px; background: rgba(8, 12, 24, .35); border: 1px solid var(--line); margin-bottom: 10px; }
.types-block-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.types-line { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; }
.types-line > span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.types-line.good > span { color: var(--good); } .types-line.bad > span { color: var(--bad); }
.types-line > div { display: flex; flex-wrap: wrap; gap: 6px; }
.types-hit { display: inline-flex; align-items: center; gap: 4px; }
.types-hit b { font-size: 12px; }
.types-line.bad .types-hit b { color: var(--bad); } .types-line.good .types-hit b { color: var(--good); }
.types-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
.types-legend .hit { padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.types-legend .hit.strong { background: rgba(61, 220, 151, .18); color: var(--good); }
.types-legend .hit.weak { background: rgba(255, 107, 107, .14); color: var(--bad); margin-left: 6px; }
table.types th.corner { display: flex; flex-direction: column; gap: 2px; }
table.types th[data-row] { cursor: pointer; border-radius: 8px; }
table.types th[data-row]:hover { background: rgba(148, 170, 230, .08); }
table.types th.row-on, table.types th.col-on { background: rgba(76, 201, 240, .14); }
table.types td.row-on, table.types td.col-on { box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .45); }
table.types td.row-on.col-on { box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 700px) { .types-line { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Missions like the game: objectives, letter text, follow-ups ---------- */
.mq-entry-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.mq-entry-text small { color: var(--faint); font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-no { flex: none; min-width: 24px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 209, 102, .14); color: #ffd166; font-size: 11px; font-weight: 700; text-align: center; }
.mq-entry .badge { flex: none; }
.mq-head.expedition { background: linear-gradient(135deg, #2f7d5a, #1d5a40); border-bottom-color: #3ddc97; }
.mq-goals { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px; }
.mq-goal { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(20, 30, 55, .7); border-left: 3px solid #ffd166; }
.mq-goal > span:nth-child(2) { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mq-goal > b { margin-left: auto; font: 700 15px var(--font-display); color: #ffd166; font-variant-numeric: tabular-nums; }
.mq-goal .item-chip { flex: 1; }
.mq-check { flex: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 2px; display: grid; place-items: center; }
.mq-check.time { border: 0; color: var(--muted); }
.mq-letter { padding: 14px 16px; background: rgba(236, 226, 200, .06); border: 1px solid rgba(236, 226, 200, .18); font-size: 13.5px; color: #e9e2cf; }
.mq-next { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 4px; }
.mq-reward-list { padding: 8px 4px; }

/* ---------- "Where do I get it" dialog and the planner's list of Pals to get ---------- */
.sd-backdrop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; background: rgba(3, 6, 14, .7); backdrop-filter: blur(3px); }
.sd-backdrop[hidden] { display: none; }
.sd { width: min(1100px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; border-radius: 14px; background: var(--surface, #111a30); border: 1px solid var(--line-strong); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); overflow: hidden; }
.sd-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sd-title { flex: 1; display: flex; align-items: center; gap: 10px; font: 700 20px var(--font-display); }
.sd-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; padding: 16px 18px; overflow: auto; }
.sd-body .mini-map { height: 380px; }
.sd-nomap { padding: 20px; }
@media (max-width: 900px) { .sd-body { grid-template-columns: minmax(0, 1fr); } }
.tn-head .src-btn { margin-left: auto; flex: none; opacity: .75; }
.tn-head .src-btn:hover { opacity: 1; }
.needed-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.needed { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid var(--line); background: rgba(8, 12, 24, .45); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.needed:hover { border-color: var(--accent); }
.needed span { display: flex; flex-direction: column; }
.needed small { color: var(--muted); font-size: 11.5px; }
.needed .needed-go { flex-direction: row; align-items: center; gap: 4px; color: var(--accent); font-size: 12px; margin-left: 6px; }

/* ---------- Base simulator: health & sanity ---------- */
.health-card .food-line { margin: -4px 0 12px; font-size: 13px; }
.health-card .gpanel-title { margin-bottom: 6px; }
.health-notes { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }
.health-notes li.muted { color: var(--faint); }
.sanity-table td:first-child b { color: #ffd166; }
.calib { margin: 4px 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(8, 12, 24, .35); }
.calib summary { cursor: pointer; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.calib-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 10px; }
@media (max-width: 800px) { .calib-grid { grid-template-columns: minmax(0, 1fr); } }
table.data.health-table th, table.data.sanity-table th { white-space: normal; line-height: 1.25; letter-spacing: .3px; }
table.data.health-table th, table.data.health-table td, table.data.sanity-table th, table.data.sanity-table td { padding: 8px 8px; }
table.data.health-table .badge { white-space: nowrap; }
.health-table .cell-pal { white-space: nowrap; }

/* ---------- Work guide ---------- */
.wg-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; }
.wg-nav { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); position: sticky; top: 0; }
.wg-nav button { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.wg-nav button:hover { background: rgba(148, 170, 230, .07); color: var(--text); }
.wg-nav button.active { background: rgba(76, 201, 240, .14); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.wg-intro { margin-bottom: 14px; }
.wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.wg-why { margin: -6px 0 10px; min-height: 32px; }
.wg-list { display: flex; flex-direction: column; gap: 4px; }
.wg-pal { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.wg-pal:hover { background: rgba(148, 170, 230, .07); }
.wg-rank { width: 16px; flex: none; color: var(--faint); font-weight: 700; font-size: 12px; text-align: right; }
.wg-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wg-name small { color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-stats { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex: none; }
.wg-stats > span { display: inline-flex; align-items: center; gap: 3px; }
.wg-lv { color: var(--text); font-weight: 700; }
.wg-food { gap: 1px !important; }
.wg-food i { width: 4px; height: 10px; border-radius: 1px; background: rgba(148, 170, 230, .2); }
.wg-food i.on { background: #f2c14e; }
.wg-night { color: #9d8cff; }
.wg-work { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.wg-work:hover { color: var(--accent); }
.wg-table .cell-pal { cursor: pointer; }
table.data.wg-table th { white-space: normal; padding: 9px 8px; }
table.data.wg-table td { padding: 7px 8px; }
.wg-cell { display: flex; flex-direction: column; line-height: 1.2; }
.wg-cell b { font-weight: 600; font-size: 12.5px; }
.wg-cell small { font-size: 11px; }
.wg-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.wg-phase { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(8, 12, 24, .4); border: 1px solid var(--line); font-size: 12.5px; }
@media (max-width: 900px) { .wg-layout { grid-template-columns: minmax(0, 1fr); } .wg-nav { position: static; flex-direction: row; flex-wrap: wrap; } .wg-phases { grid-template-columns: minmax(0, 1fr); } }

/* Base simulator: hot spring count and medicine per sickness */
.spa-row { display: grid; grid-template-columns: 1fr 84px; gap: 8px; align-items: end; }
.spa-row:has(> :only-child) { grid-template-columns: 1fr; }
.effect-list > div.spa-line { align-items: flex-start; }
.spa-line > svg { margin-top: 2px; flex: none; }
.spa-note { margin-top: 3px; line-height: 1.45; }
.spa-note .badge { margin-top: 4px; }
table.data.sick-table td { vertical-align: middle; }
table.data.sick-table td.sick-effect span { display: block; white-space: nowrap; }
table.data.sick-table .med-chip { white-space: normal; text-align: left; }
.med-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.med-chip:hover { border-color: var(--accent); color: var(--accent); }
.med-summary { display: grid; gap: 6px; margin-top: 10px; }
.med-summary > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }

/* Paldeck: partner skill per condensation rank, work comparison */
.rank-value { color: inherit; }
.star-pick { display: flex; align-items: center; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.star-pick .muted { margin-right: 4px; }
.star-pick button { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--gold);
  font: inherit; font-size: 12px; cursor: pointer; }
.star-pick button.active { background: var(--gold); color: #1a1405; border-color: var(--gold); }
.star-pick button.none { color: var(--muted); }
.star-pick button.none.active { color: #1a1405; }
.tier-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tier-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.tier-chip:hover { border-color: var(--line-strong); }
.tier-badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 800 13px var(--font-display); color: #0b1020; }
.tier-badge.t-S { background: #ff6f7d; } .tier-badge.t-A { background: #ffab5a; } .tier-badge.t-B { background: #ffd966; }
.tier-badge.t-C { background: #8fe08a; } .tier-badge.t-D { background: #7cc2ff; }
.wc-tools { gap: 10px; margin-bottom: 8px; align-items: center; }
.wc-now { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.wc-bar { width: 90px; flex: none; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.wc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--good), var(--gold)); border-radius: inherit; }
table.data.wc-table td { vertical-align: middle; }
table.data.wc-table th { white-space: normal; }
.linkish { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* Work guide details: passives, builds, base helpers, all-Pals table */
.wx-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.wx-jumps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wx-levels { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 12px; }
.wx-levels > .muted { margin-right: 6px; }
.wx-levels > span:not(.muted) { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 3px 6px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line); line-height: 1.15; }
.wx-levels small { font-size: 10px; color: var(--muted); }
.wx-levels b { font-size: 12.5px; }
.wx-group + .wx-group { margin-top: 12px; }
.wx-group-why { margin-left: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.wx-passive { display: grid; grid-template-columns: 210px 64px minmax(120px, 1fr) auto auto; align-items: center; gap: 10px; padding: 5px 4px;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.wx-passive:last-child { border-bottom: 0; }
.wx-passive.bad { opacity: .72; }
.wx-side { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.wx-origin { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.wx-carriers { display: flex; align-items: center; gap: 2px; min-width: 60px; }
.wx-mini { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.wx-builds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.wx-build { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.wx-build-head { display: flex; flex-direction: column; gap: 2px; }
.wx-build-fx { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; font-weight: 600; }
.wx-build-out { color: var(--muted); }
.wx-helpers { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.wx-helper { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.wx-helper:hover { border-color: var(--line-strong); }
.wx-helper-text { margin-top: 4px; color: var(--muted); line-height: 1.45; white-space: pre-line; }
.wx-filters { gap: 16px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
table.data.wx-table th { white-space: nowrap; padding: 9px 8px; }
table.data.wx-table td { padding: 6px 8px; vertical-align: middle; }
table.data.wx-table tbody tr { cursor: pointer; }
table.data.wx-table th.sortable { cursor: pointer; user-select: none; }
table.data.wx-table th.sorted { color: var(--text); }
table.data.wx-table th.sorted.desc::after { content: " ▼"; font-size: 9px; }
table.data.wx-table th.sorted.asc::after { content: " ▲"; font-size: 9px; }
.wx-works { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 1100px) { .wx-passive { grid-template-columns: 1fr auto; } .wx-side, .wx-origin, .wx-carriers { grid-column: 1 / -1; justify-content: flex-start; } }

/* Paldeck: condensation stars and alpha toggle */
.boost-panel .gpanel-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.boost-panel .star-pick { margin-top: 0; }
.alpha-toggle { font-size: 13px; }
.boost-note { flex-basis: 100%; }
.work-cell b small, .stat b small { font-size: 10.5px; font-weight: 700; }

/* Base planner */
.bp-toolbar { align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.bp-size { width: 170px; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 16px; }
.bp-card { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bp-card:hover { border-color: var(--line-strong); }
.bp-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.bp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bp-card-jobs { display: flex; gap: 4px; flex-wrap: wrap; }
.bp-card-pals { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; }
.badge.stage-early { background: rgba(126, 224, 129, .15); color: #8fe08a; }
.badge.stage-mid { background: rgba(255, 209, 102, .15); color: #ffd966; }
.badge.stage-end { background: rgba(255, 111, 125, .15); color: #ff8f9a; }
.bp-detail { margin-bottom: 14px; }
.bp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.bp-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.bp-member { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.bp-member.new { border-color: var(--good); }
.bp-member-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.bp-member-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-member-name small { font-size: 11px; }
.bp-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.bp-badges .badge { font-size: 10.5px; padding: 1px 6px; }
.bp-helpers { display: flex; flex-direction: column; gap: 6px; }
.bp-helpers > div { cursor: pointer; line-height: 1.45; }
.bp-change-tools { gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bp-change-tools .field { min-width: 150px; }
.bp-change-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.bp-swaps { display: flex; flex-direction: column; gap: 6px; }
.bp-swap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); }
.bp-swap .cell-pal { cursor: pointer; }
table.data.bp-works td, table.data.bp-works th { padding: 6px 8px; }
@media (max-width: 1100px) { .bp-cols, .bp-change-cols { grid-template-columns: minmax(0, 1fr); } }

/* Base planner: own line-up */
.bp-custom { margin-bottom: 14px; }
.bp-add { display: grid; grid-template-columns: minmax(220px, 320px) minmax(180px, 260px) auto; gap: 10px; align-items: end; }
.bp-custom-list { display: flex; flex-direction: column; gap: 6px; }
.bp-custom-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(130px, 190px) auto; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.bp-custom-row.new { border-color: var(--good); }
.bp-custom-row.moved { border-color: var(--gold); }
.bp-custom-row .bp-job { padding: 5px 8px; font-size: 12.5px; }
@media (max-width: 900px) { .bp-add { grid-template-columns: minmax(0, 1fr); } }

/* Settings page */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.settings-options { display: flex; flex-direction: column; gap: 6px; }
.settings-option { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); cursor: pointer; }
.settings-option:hover { border-color: var(--line-strong); }
.settings-option.active { border-color: var(--accent); background: rgba(76, 201, 240, .08); }
.settings-option input { margin-top: 3px; accent-color: var(--accent); }
.settings-option span { display: flex; flex-direction: column; gap: 2px; }
.settings-option small { font-size: 12px; }
@media (max-width: 700px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }

/* Meine Pals: save path and player choice */
.save-path-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.player-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.player-btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.player-btn:hover { border-color: var(--accent); }
.player-btn.last { border-color: var(--line-strong); }
.player-btn > span:not(.badge) { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* Planner: catch filter */
.catch-filter { margin-top: 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.catch-filter summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.catch-level { max-width: 180px; margin-top: 6px; }
.catch-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }

/* Team planner */
.tm-options, .tm-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 14px; }
.tm-options .field, .tm-controls .field { min-width: 180px; }
.tm-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tm-foe { display: flex; align-items: center; gap: 6px; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.tm-member { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.tm-member:last-child { border-bottom: 0; }
.tm-member.support { background: rgba(126, 224, 129, .05); border-radius: 10px; }
.tm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tm-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tm-skill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); }
.tm-support { line-height: 1.45; white-space: pre-line; }
.tm-passives .pskill { font-size: 11.5px; }
.tm-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.tm-activities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tm-activities button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.tm-activities button.active { color: var(--text); border-color: var(--accent); background: rgba(76, 201, 240, .12); }

.tm-survive { display: flex; flex-wrap: wrap; gap: 4px; font-weight: 600; }

/* Planner: best passives menu and panel */
.planner-builds summary { cursor: pointer; list-style: none; }
.planner-builds summary::-webkit-details-marker { display: none; }
.planner-build-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.planner-build-nav button { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.planner-build-nav button:hover { color: var(--text); }
.planner-build-nav button.active { color: var(--text); border-color: var(--accent); background: rgba(76, 201, 240, .12); }
.build-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.build-manual-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.build-share { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.build-share .wc-bar { flex: 1; width: auto; }
@media (max-width: 1200px) { .build-compare, .build-manual-grid { grid-template-columns: minmax(0, 1fr); } }

/* A hidden badge stays hidden (.badge sets display) */
.catch-filter [data-catch-active][hidden] { display: none; }

/* Planner top bar: sources, options, catch filter and the plan button – stays visible while scrolling */
.planner-topbar { position: sticky; top: 0; z-index: 12; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel, var(--surface)) 94%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.ptb-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ptb-sources { flex: 1 1 420px; min-width: 0; }
.ptb-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.planner-topbar #sources { min-width: 0; }
.planner-topbar .source-list { display: flex; flex-wrap: wrap; gap: 6px; }
.planner-topbar .source { padding: 4px 9px; }
.planner-topbar .banner { padding: 6px 10px; margin: 0; }
.planner-topbar .check-line { margin: 0; font-size: 13px; }
.planner-topbar #run { margin-left: auto; min-width: 230px; }
.planner-topbar .catch-filter { position: relative; margin: 0; padding: 5px 10px; }
.planner-topbar .catch-body { position: absolute; top: calc(100% + 6px); right: 0; width: min(440px, 90vw); z-index: 20; padding: 12px;
  border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); }
/* "Best" mode: the chosen passives stay (removable), the list of every passive is hidden */
.pselect-compact .pselect > :not(.pselect-chosen) { display: none; }
#passiveMode button { padding: 5px 10px; font-size: 12.5px; }
@media (min-width: 1500px) { .planner-grid { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); } }
@media (min-width: 2200px) { .planner-grid { grid-template-columns: minmax(420px, 480px) minmax(0, 1fr); } }

/* Planner: talent and attack goals */
.goal-label { margin: 10px 0 6px; font-weight: 600; }
.goal-presets { margin-bottom: 8px; }
.goal-ivs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.goal-ivs label { display: flex; flex-direction: column; gap: 4px; }
.goal-ivs .input { width: 100%; }
.goal-time { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.goal-row { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
#goalCard #atkAdd { width: 100%; margin-top: 6px; }
#goalCard .chips:empty { display: none; }
#goalCard .card-title .badge { margin-left: auto; }
.goal-panel .kpi small { font: 500 12px var(--font-body, inherit); color: var(--muted); }
.goal-attacks { margin: 10px 0 0; padding-left: 18px; }
.goal-attacks li { margin: 3px 0; }