:root {
  color-scheme: dark;
  --bg: #0c1118;
  --panel: #121a24;
  --panel-2: #172331;
  --line: #263548;
  --text: #eef4fb;
  --muted: #91a2b7;
  --accent: #5fb0ff;
  --accent-2: #7bd389;
  --danger: #ff7b7b;
  --warning: #f5c15c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 15% 0%, rgba(72, 129, 201, 0.16), transparent 34rem),
    var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }

.page-shell {
  width: min(1600px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 12px;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(30px, 4vw, 50px); line-height: 1; }
h2 { margin-bottom: 8px; font-size: 18px; }
.subtitle, .muted { color: var(--muted); }
.subtitle { margin-bottom: 0; }

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent), var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.config-panel { padding: 20px; }
.grid { display: grid; gap: 14px; }
.grid-main { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wide-2 { grid-column: span 2; }

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

input, select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e1620;
  color: var(--text);
  outline: none;
}

input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(95, 176, 255, 0.12);
}

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

fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

legend { color: var(--muted); padding: 0 6px; font-size: 12px; font-weight: 700; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label {
  display: inline-flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.checks input { width: auto; min-height: 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

button {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 750;
}
button:hover { border-color: #46617d; }
button:disabled { opacity: 0.55; cursor: wait; }
button.primary { background: var(--accent); border-color: var(--accent); color: #07111d; }
button.ghost { background: transparent; }

.refresh-box { text-align: right; }
.status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 750;
}
.status.loading { color: var(--warning); }
.status.ok { color: var(--accent-2); }
.status.error { color: var(--danger); }
.countdown { margin-top: 7px; color: var(--muted); font-size: 12px; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.stat-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}
.stat-card span { display: block; color: var(--muted); font-size: 12px; }
.stat-card strong { display: block; margin-top: 4px; font-size: 25px; }

.table-panel { margin-top: 16px; overflow: hidden; }
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.table-toolbar p { margin-bottom: 0; }
.search-label { width: min(340px, 100%); }

.table-wrap { overflow: auto; max-height: 72vh; }
table { width: 100%; border-collapse: collapse; min-width: 1180px; }
th, td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}
th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #101925;
  color: var(--muted);
  font-size: 12px;
}
th:first-child, th:nth-child(2), td:first-child, td:nth-child(2) { text-align: left; }
tbody tr:hover { background: rgba(95, 176, 255, 0.05); }
.item-name { font-weight: 800; }
.item-id { display: block; color: var(--muted); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.profit { color: var(--accent-2); font-weight: 800; }
.roi { color: #b89cff; font-weight: 800; }
.empty { padding: 40px; text-align: center !important; color: var(--muted); }

.error-box {
  margin: 16px 20px 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 123, 123, 0.4);
  border-radius: 10px;
  background: rgba(255, 123, 123, 0.08);
  color: #ffd0d0;
}

.note-panel { margin-top: 16px; padding: 18px 20px; color: var(--muted); }
.note-panel p:last-child { margin-bottom: 0; }
code { color: #b7d9ff; }

@media (max-width: 1200px) {
  .grid-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-shell { width: min(100% - 20px, 1600px); padding-top: 18px; }
  .topbar, .table-toolbar { align-items: stretch; flex-direction: column; }
  .refresh-box { text-align: left; }
  .grid-main { grid-template-columns: 1fr 1fr; }
  .wide-2 { grid-column: span 2; }
  .choice-groups, .summary-grid { grid-template-columns: 1fr 1fr; }
  .search-label { width: 100%; }
}

@media (max-width: 520px) {
  .grid-main, .choice-groups, .summary-grid { grid-template-columns: 1fr; }
  .wide-2 { grid-column: span 1; }
}

.sort-button {
  min-height: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  white-space: nowrap;
}
.sort-button:hover,
.sort-button:focus-visible {
  border: 0;
  color: var(--text);
  outline: none;
}
.sort-button.active { color: var(--accent); }
.sort-indicator {
  display: inline-block;
  min-width: 1em;
  margin-left: 4px;
  opacity: 0.7;
}
.sort-button.active .sort-indicator { opacity: 1; }

/* V3: wielokrotny wybor drzewek */
.choice-groups-extended {
  grid-template-columns: minmax(360px, 2fr) repeat(3, minmax(0, 1fr));
}
.tree-fieldset { min-width: 0; }
.fieldset-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 10px;
}
.fieldset-heading legend {
  padding: 0;
}
.mini-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mini-actions button {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
}
.checks-scroll {
  max-height: 180px;
  overflow: auto;
  padding-right: 4px;
}

@media (max-width: 1200px) {
  .choice-groups-extended { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree-fieldset { grid-column: span 2; }
}

@media (max-width: 760px) {
  .choice-groups-extended { grid-template-columns: 1fr 1fr; }
  .tree-fieldset { grid-column: span 2; }
}

@media (max-width: 520px) {
  .choice-groups-extended { grid-template-columns: 1fr; }
  .tree-fieldset { grid-column: span 1; }
}

/* V4: wielokolumnowe sortowanie Shift + klik */
.table-tools {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.sort-help {
  max-width: 420px;
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.sort-button.active .sort-indicator {
  min-width: 2.2em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .table-tools {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
}


/* V7: osobne ceny/ages dla miasta zakupu i docelowego + timestamp po najechaniu */
table { min-width: 1480px; }
.price-cell .price-value {
  display: block;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cell-subline {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}
.timestamp-cell {
  cursor: help;
}
.timestamp-cell:hover {
  background: rgba(95, 176, 255, 0.07);
}
.hover-hint {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
}

/* V10: tabela dopasowana do szerokosci strony bez poziomego scrolla na desktopie */
.page-shell {
  width: calc(100% - 16px);
  max-width: none;
}

.table-panel {
  width: 100%;
}

.table-wrap {
  overflow-y: auto;
  overflow-x: hidden;
}

.table-wrap table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 13px;
}

.table-wrap th,
.table-wrap td {
  padding: 9px 7px;
  min-width: 0;
}

.table-wrap th {
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.table-wrap .sort-button {
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Proporcje 11 kolumn - suma ~100% */
.table-wrap th:nth-child(1),
.table-wrap td:nth-child(1) { width: 16%; }

.table-wrap th:nth-child(2),
.table-wrap td:nth-child(2) { width: 11%; }

.table-wrap th:nth-child(3),
.table-wrap td:nth-child(3) { width: 5%; }

.table-wrap th:nth-child(4),
.table-wrap td:nth-child(4) { width: 7%; }

.table-wrap th:nth-child(5),
.table-wrap td:nth-child(5) { width: 11%; }

.table-wrap th:nth-child(6),
.table-wrap td:nth-child(6) { width: 7%; }

.table-wrap th:nth-child(7),
.table-wrap td:nth-child(7) { width: 12%; }

.table-wrap th:nth-child(8),
.table-wrap td:nth-child(8) { width: 8%; }

.table-wrap th:nth-child(9),
.table-wrap td:nth-child(9) { width: 8%; }

.table-wrap th:nth-child(10),
.table-wrap td:nth-child(10) { width: 7%; }

.table-wrap th:nth-child(11),
.table-wrap td:nth-child(11) { width: 6%; }

.table-wrap td:first-child,
.table-wrap td:nth-child(2),
.table-wrap td:nth-child(4) {
  white-space: normal;
  overflow-wrap: anywhere;
}

.table-wrap td:nth-child(3),
.table-wrap td:nth-child(5),
.table-wrap td:nth-child(6),
.table-wrap td:nth-child(7),
.table-wrap td:nth-child(8),
.table-wrap td:nth-child(9),
.table-wrap td:nth-child(10),
.table-wrap td:nth-child(11) {
  white-space: nowrap;
}

.item-name {
  display: block;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.item-id {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.price-cell .cell-subline {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Na mniejszych ekranach przywracamy scroll poziomy jako bezpieczny fallback. */
@media (max-width: 1180px) {
  .page-shell {
    width: min(100% - 12px, 1600px);
  }

  .table-wrap {
    overflow-x: auto;
  }

  .table-wrap table {
    min-width: 1180px;
    table-layout: auto;
  }

  .table-wrap th,
  .table-wrap td {
    width: auto !important;
  }
}


/* V11: ceny obok siebie + przeciaganie kolumn przez uzytkownika */
.column-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.compact-button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 11px;
  white-space: nowrap;
}

.table-wrap th[data-column-key] {
  cursor: grab;
  user-select: none;
}

.table-wrap th[data-column-key]:active {
  cursor: grabbing;
}

.table-wrap th.column-dragging {
  opacity: 0.45;
}

.table-wrap th.column-drop-before {
  box-shadow: inset 3px 0 0 var(--accent);
}

.table-wrap th.column-drop-after {
  box-shadow: inset -3px 0 0 var(--accent);
}

/* Szerokosci sa przypisane do typu kolumny, nie do jej pozycji. */
.table-wrap th[data-column-key="item"],
.table-wrap td[data-column-key="item"] { width: 15%; text-align: left; white-space: normal; overflow-wrap: anywhere; }

.table-wrap th[data-column-key="drzewko"],
.table-wrap td[data-column-key="drzewko"] { width: 10%; text-align: left; white-space: normal; overflow-wrap: anywhere; }

.table-wrap th[data-column-key="tier_enchant"],
.table-wrap td[data-column-key="tier_enchant"] { width: 5%; white-space: nowrap; }

.table-wrap th[data-column-key="quality"],
.table-wrap td[data-column-key="quality"] { width: 7%; white-space: normal; overflow-wrap: anywhere; }

.table-wrap th[data-column-key="buy_price"],
.table-wrap td[data-column-key="buy_price"],
.table-wrap th[data-column-key="target_price"],
.table-wrap td[data-column-key="target_price"] { width: 12%; white-space: nowrap; }

.table-wrap th[data-column-key="buy_age"],
.table-wrap td[data-column-key="buy_age"],
.table-wrap th[data-column-key="target_age"],
.table-wrap td[data-column-key="target_age"] { width: 7%; white-space: nowrap; }

.table-wrap th[data-column-key="profit"],
.table-wrap td[data-column-key="profit"] { width: 8%; white-space: nowrap; }

.table-wrap th[data-column-key="roi"],
.table-wrap td[data-column-key="roi"] { width: 6%; white-space: nowrap; }

.table-wrap th[data-column-key="volume"],
.table-wrap td[data-column-key="volume"] { width: 6%; white-space: nowrap; }

/* Kasujemy skutki starych selektorow nth-child po przestawieniu kolumn. */
.table-wrap td[data-column-key] {
  min-width: 0;
}

@media (max-width: 900px) {
  .column-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .compact-button {
    align-self: flex-start;
  }
}

/* V11: stabilne wyrownanie niezaleznie od pozycji po drag & drop */
.table-wrap th[data-column-key="tier_enchant"],
.table-wrap td[data-column-key="tier_enchant"],
.table-wrap th[data-column-key="quality"],
.table-wrap td[data-column-key="quality"],
.table-wrap th[data-column-key="buy_price"],
.table-wrap td[data-column-key="buy_price"],
.table-wrap th[data-column-key="target_price"],
.table-wrap td[data-column-key="target_price"],
.table-wrap th[data-column-key="buy_age"],
.table-wrap td[data-column-key="buy_age"],
.table-wrap th[data-column-key="target_age"],
.table-wrap td[data-column-key="target_age"],
.table-wrap th[data-column-key="profit"],
.table-wrap td[data-column-key="profit"],
.table-wrap th[data-column-key="roi"],
.table-wrap td[data-column-key="roi"],
.table-wrap th[data-column-key="volume"],
.table-wrap td[data-column-key="volume"] {
  text-align: right;
}


/* V13.3: zakladka Karmienie HO */
.tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(18, 26, 36, 0.8);
}

.tab-button {
  min-height: 38px;
  padding: 7px 16px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.tab-button.active {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--text);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}

.tab-view[hidden] { display: none !important; }

.ho-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 280px)) auto auto;
  align-items: end;
  gap: 14px;
}

.ho-controls button { min-height: 42px; }
.ho-config-note { margin: 14px 0 0; }
.ho-table-panel { width: 100%; min-width: 0; }
.ho-table-wrap {
  max-height: 72vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.ho-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.ho-table th,
.ho-table td {
  padding: 7px 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ho-table th {
  white-space: normal;
  line-height: 1.1;
  overflow-wrap: normal;
  hyphens: none;
}
.ho-table td {
  text-align: center;
  white-space: nowrap;
}

.ho-table th:nth-child(1), .ho-table td:nth-child(1) { width: 14%; }
.ho-table th:nth-child(2), .ho-table td:nth-child(2) { width: 4%; }
.ho-table th:nth-child(3), .ho-table td:nth-child(3) { width: 15%; }
.ho-table th:nth-child(4), .ho-table td:nth-child(4) { width: 9%; }
.ho-table th:nth-child(5), .ho-table td:nth-child(5) { width: 8%; }
.ho-table th:nth-child(6), .ho-table td:nth-child(6) { width: 8%; }
.ho-table th:nth-child(7), .ho-table td:nth-child(7) { width: 11%; }
.ho-table th:nth-child(8), .ho-table td:nth-child(8) { width: 11%; }
.ho-table th:nth-child(9), .ho-table td:nth-child(9) { width: 10%; }
.ho-table th:nth-child(10), .ho-table td:nth-child(10) { width: 10%; }
.ho-table .sort-button {
  width: 100%;
  min-width: 0;
  padding: 0;
  white-space: normal;
  line-height: 1.1;
  font-size: inherit;
  justify-content: center;
  gap: 2px;
}
.ho-table th:first-child .sort-button,
.ho-table th:nth-child(3) .sort-button { justify-content: center; }
.ho-table .item-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ho-table .item-id {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78em;
}
.ratio-good { color: var(--accent-2); font-weight: 800; }
.ratio-best { color: #b89cff; font-weight: 800; }
.best-food-row { background: rgba(123, 211, 137, 0.08); }
.best-food-row:hover { background: rgba(123, 211, 137, 0.13); }

@media (max-width: 900px) {
  .ho-controls { grid-template-columns: 1fr 1fr; }
  .ho-controls button { width: 100%; }
}

@media (max-width: 520px) {
  .tabs { flex-direction: column; }
  .ho-controls { grid-template-columns: 1fr; }
}


/* V13.3.1: preferowane jedzenie stacji */
.favorite-station-badge {
  display: inline-block;
  padding: 0.2rem 0.48rem;
  border: 1px solid rgba(98, 181, 255, 0.42);
  border-radius: 999px;
  background: rgba(98, 181, 255, 0.10);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
  font-size: 0.78rem;
  font-weight: 650;
}
.muted-cell { opacity: 0.55; }


/* V13.3.4: czcionka tabeli Karmienie HO dopasowana do tabeli Flipy */
@media (max-width: 1100px) {
  .ho-table { font-size: 12px; }
  .ho-table th, .ho-table td { padding: 6px 3px; }
  .ho-table .item-id { display: none; }
  .favorite-station-badge { padding: 0.12rem 0.25rem; font-size: 9px; }
}
@media (max-width: 760px) {
  .ho-table th:nth-child(6), .ho-table td:nth-child(6),
  .ho-table th:nth-child(8), .ho-table td:nth-child(8),
  .ho-table th:nth-child(9), .ho-table td:nth-child(9) { display: none; }
  .ho-table th:nth-child(1), .ho-table td:nth-child(1) { width: 20%; }
  .ho-table th:nth-child(2), .ho-table td:nth-child(2) { width: 6%; }
  .ho-table th:nth-child(3), .ho-table td:nth-child(3) { width: 20%; }
  .ho-table th:nth-child(4), .ho-table td:nth-child(4) { width: 12%; }
  .ho-table th:nth-child(5), .ho-table td:nth-child(5) { width: 10%; }
  .ho-table th:nth-child(7), .ho-table td:nth-child(7) { width: 12%; }
  .ho-table th:nth-child(8), .ho-table td:nth-child(8) { width: 12%; }
  .ho-table th:nth-child(11), .ho-table td:nth-child(11) { width: 8%; }
}

/* V13.3.3: usunieta kolumna cena/nutrition i wycentrowana zawartosc */
.ho-table th, .ho-table td { text-align: center; vertical-align: middle; }
.ho-table .item-name, .ho-table .item-id { text-align: center; }

/* V13.3.4: desktopowa tabela HO używa tej samej wielkości tekstu co Flipy */
@media (min-width: 1101px) {
  .ho-table { font-size: 13px; }
}


/* V13.3.5: rozbudowane filtry i konfigurowalne kolumny karmienia HO */
.ho-filter-grid { display:grid; grid-template-columns: repeat(5,minmax(130px,1fr)); gap:10px 12px; margin-top:14px; align-items:end; }
.ho-filter-grid label { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; }
.ho-filter-grid input,.ho-filter-grid select { width:100%; min-width:0; }
.ho-tier-filter { grid-column:span 2; margin:0; padding:8px 10px; }
.compact-checks { display:flex; flex-wrap:wrap; gap:6px 10px; }
.compact-checks label { flex-direction:row; align-items:center; font-weight:500; }
.check-filter { flex-direction:row!important; align-items:center; min-height:38px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.check-filter input { width:auto; }
.ho-column-actions { position:relative; display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; }
.ho-column-chooser { display:none; position:absolute; z-index:20; right:0; top:calc(100% + 6px); width:220px; padding:10px; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.ho-column-chooser.open { display:block; }
.ho-column-options { display:grid; gap:6px; }
.ho-column-options label { display:flex; align-items:center; gap:8px; font-size:12px; cursor:pointer; }
.ho-column-options input { width:auto; }
.ho-table th[hidden] { display:none; }
.ho-table th { cursor:grab; }
.ho-table th:active { cursor:grabbing; }
.ho-table-tools { align-items:flex-end; }
@media (max-width:1100px) { .ho-filter-grid { grid-template-columns:repeat(3,minmax(135px,1fr)); } }
@media (max-width:700px) { .ho-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ho-tier-filter { grid-column:1/-1; } .ho-column-chooser { position:fixed; right:12px; left:12px; top:auto; width:auto; } }


/* V13.4.3: Ancient Lands Portale - ergonomiczny formularz obserwacji */
.ancient-hero {
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px;
}
.ancient-hero h2 { margin-bottom:6px; font-size:24px; }
.ancient-hero .muted { max-width:760px; margin-bottom:0; }
.ancient-meta { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ancient-meta > div { min-width:150px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.ancient-meta span,.ancient-meta small { display:block; color:var(--muted); font-size:11px; }
.ancient-meta strong { display:block; margin:2px 0; font-size:18px; font-variant-numeric:tabular-nums; }
.ancient-zones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.ancient-zone { padding:18px; min-width:0; }
.ancient-zone-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ancient-zone-heading h2 { margin:0; font-size:22px; }
.ancient-zone-kicker { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.ancient-zone-badge { padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; }
.ancient-zone-lethal .ancient-zone-badge { color:#ff9e9e; border-color:rgba(255,123,123,.35); background:rgba(255,123,123,.07); }
.ancient-zone-nonlethal .ancient-zone-badge { color:#9ee9b0; border-color:rgba(123,211,137,.35); background:rgba(123,211,137,.07); }
.portal-cards { display:grid; gap:12px; }
.portal-card { padding:15px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent),#0f1721; }
.portal-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.portal-size { display:block; font-size:18px; font-weight:850; }
.portal-respawn { display:block; margin-top:2px; color:var(--accent); font-size:11px; line-height:1.35; }
.portal-state { padding:4px 8px; border-radius:999px; border:1px solid var(--line); font-size:10px; font-weight:800; white-space:nowrap; }
.portal-state.empty { color:var(--muted); }
.portal-state.active { color:var(--accent-2); border-color:rgba(123,211,137,.32); background:rgba(123,211,137,.06); }
.portal-observation { margin-top:13px; }
.portal-mode-title { color:var(--muted); font-size:11px; font-weight:800; margin-bottom:6px; }
.portal-mode-options { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.portal-mode-options label { margin:0; cursor:pointer; }
.portal-mode-options input { position:absolute; opacity:0; pointer-events:none; }
.portal-mode-options span { display:flex; min-height:38px; align-items:center; justify-content:center; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:#0b141f; text-align:center; font-size:11px; font-weight:750; transition:.12s ease; }
.portal-mode-options input:checked + span { border-color:var(--accent); background:rgba(95,176,255,.13); color:#e6f4ff; box-shadow:inset 0 0 0 1px rgba(95,176,255,.12); }
.portal-entry-grid { display:grid; grid-template-columns:1fr; gap:9px; margin-top:10px; }
.portal-input-label { margin-top:0; }
.portal-input-label > span { display:block; font-size:11px; font-weight:800; color:var(--muted); }
.portal-input-label small { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.35; }
.portal-time-row,.portal-remaining-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin-top:5px; }
.portal-time-row input,.portal-remaining-row input { width:100%; min-width:0; margin:0; }
.portal-now-button,.portal-full-button { white-space:nowrap; min-height:38px; padding:7px 10px; }
.portal-preview { margin-top:9px; padding:8px 10px; border:1px dashed rgba(95,176,255,.28); border-radius:9px; background:rgba(95,176,255,.035); font-size:11px; color:var(--muted); }
.portal-preview strong { color:#cfe8ff; font-variant-numeric:tabular-nums; }
.portal-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.portal-actions button { min-height:36px; padding:7px 11px; font-size:12px; }
.portal-actions .primary { flex:1 1 150px; }
.portal-timing { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.portal-timing > div { padding:9px 10px; border-radius:10px; background:var(--panel-2); min-width:0; }
.portal-timing span { display:block; color:var(--muted); font-size:10px; }
.portal-timing strong { display:block; margin-top:2px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.portal-countdown { margin-top:9px; padding:9px 10px; border:1px solid rgba(95,176,255,.22); border-radius:10px; background:rgba(95,176,255,.06); color:#cfe8ff; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
.ancient-note { margin-top:16px; }
#ancientErrorBox { margin:16px 0 0; }
@media (max-width:1000px) { .ancient-hero{align-items:stretch;flex-direction:column}.ancient-meta{justify-content:flex-start}.ancient-zones{grid-template-columns:1fr} }
@media (max-width:560px) { .ancient-meta{display:grid;grid-template-columns:1fr 1fr}.ancient-meta button{grid-column:1/-1}.portal-mode-options{grid-template-columns:1fr}.portal-timing{grid-template-columns:1fr}.portal-actions button{flex:1 1 auto}.portal-time-row,.portal-remaining-row{grid-template-columns:1fr}.portal-now-button,.portal-full-button{width:100%} }


/* V13.4.4: bardzo widoczne aktywne odliczanie - tylko zapisane portale */
.ancient-active-timers {
  margin-top:16px;
  padding:18px;
  border-color:rgba(95,176,255,.38);
  background:linear-gradient(180deg,rgba(95,176,255,.07),rgba(95,176,255,.015));
}
.ancient-active-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.ancient-active-heading .eyebrow { margin-bottom:2px; }
.ancient-active-heading h2 { margin:0; font-size:22px; }
.ancient-live-pill { padding:5px 9px; border:1px solid rgba(123,211,137,.42); border-radius:999px; background:rgba(123,211,137,.08); color:#9ee9b0; font-size:11px; font-weight:900; letter-spacing:.12em; }
.ancient-active-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.ancient-active-card { padding:14px 15px; border:1px solid var(--line); border-radius:13px; background:#0b141f; min-width:0; }
.ancient-active-card-lethal { border-color:rgba(255,123,123,.28); }
.ancient-active-card-nonlethal { border-color:rgba(123,211,137,.28); }
.ancient-active-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.ancient-active-card-head strong { color:#e8f2ff; font-size:14px; }

.ancient-active-status { margin-top:10px; color:var(--muted); font-size:11px; font-weight:950; letter-spacing:.11em; }
.ancient-active-card.is-open { border-color:rgba(123,211,137,.62); box-shadow:0 0 0 1px rgba(123,211,137,.08), 0 0 28px rgba(123,211,137,.08); }
.ancient-active-card.is-open .ancient-active-status { color:#9ee9b0; }
.ancient-active-card.is-open .ancient-active-countdown { color:#bdf5c8; }
.ancient-active-card.is-waiting .ancient-active-status { color:#9fcfff; }
.ancient-active-countdown { margin-top:7px; font-size:clamp(28px,3.2vw,44px); line-height:1; font-weight:950; letter-spacing:-.03em; color:#d9efff; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ancient-active-time { margin-top:7px; color:var(--accent); font-size:12px; font-weight:750; font-variant-numeric:tabular-nums; }
@media (max-width:560px) { .ancient-active-grid{grid-template-columns:1fr}.ancient-active-countdown{font-size:34px} }


/* V13.4.5: poprawny cykl respawnu + brak poziomego scrolla calej strony */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body { min-width: 0; }
.page-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 12px 56px;
  overflow-x: clip;
}
.topbar, .tabs, .tab-view, .panel, .ancient-hero, .ancient-zones,
.ancient-zone, .portal-cards, .portal-card, .ancient-active-timers,
.ancient-active-grid, .table-panel, .ho-table-panel {
  min-width: 0;
  max-width: 100%;
}
.tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.tab-button { flex: 0 0 auto; }
input[type="datetime-local"] { min-width: 0; max-width: 100%; }
img, svg, canvas { max-width: 100%; }
.ancient-active-card.is-locked {
  border-color: rgba(95,176,255,.45);
  box-shadow: 0 0 0 1px rgba(95,176,255,.05);
}
.ancient-active-card.is-locked .ancient-active-status { color: #9fcfff; }
.ancient-active-card.is-cooldown {
  border-color: rgba(245,193,92,.38);
  box-shadow: 0 0 0 1px rgba(245,193,92,.04);
}
.ancient-active-card.is-cooldown .ancient-active-status { color: #f5c15c; }
.ancient-active-card.is-cooldown .ancient-active-countdown { color: #ffe0a0; }
@media (max-width: 760px) {
  .page-shell { width: 100%; padding: 18px 10px 44px; }
}