/* =====================================================================
   Cyleria v2 -- motyw BASTION (twierdza, klimat Tibii)
   Etap 1 przebudowy wygladu (2026-10-09): kamien + zloto, szeryfowe
   naglowki (Cinzel z Google Fonts, zapasowo Georgia). Wszystkie kolory
   ida przez zmienne ponizej -- zmiana motywu = zmiana tego bloku.
   ===================================================================== */

:root {
  /* 2026-10-17 (runda 87): paleta z logo BASTION -- czern + kamien/kosc
     (zamiast brazu i zlota). Zmiana motywu = zmiana tego bloku. */
  --bg: #0b0b0c;
  --panel: #161617;          /* karty, kafelki */
  --side: #050505;           /* pasek boczny (czarny jak tlo logo) */
  --border: #353330;
  --border-soft: #252422;
  --text: #ebe6dc;           /* kosc */
  --muted: #9c968c;
  --accent: #d5cec1;         /* kamien z logo */
  --accent-text: #e9e3d7;
  --accent-soft: rgba(213,206,193,0.10);
  --on-accent: #141414;      /* tekst na kamiennym przycisku */
  --ok: #8fc76a;
  --warn: #e08a3c;
  --err: #e0554f;
  --input-bg: #0e0e0f;
  --btn2: #262523;           /* przycisk drugorzedny */
  --card: var(--panel);      /* alias uzywany w czesci modulow */
  --radius: 6px;
  --stone: linear-gradient(180deg, #e6e0d4 0%, #cfc8ba 55%, #b3ab9d 100%);
  --head-font: Cinzel, Georgia, 'Times New Roman', serif;
  --body-font: 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body-font);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 70% -10%, rgba(213,206,193,0.06), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  color: var(--text);
}

a { color: var(--accent-text); }

::selection { background: rgba(213,206,193,0.35); color: #fff; }

/* przewijanie w ciemnym stylu (Chrome/Edge) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--btn2); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #45423d; }

.layout {
  display: flex;
  min-height: 100vh;
}

/* ---------- pasek boczny ---------- */
.sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--side);
  border-right: 1px solid var(--border);
  padding: 18px 0 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.sidebar .brand .logo {
  font-family: var(--head-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(213,206,193,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.sidebar .brand .logo img { display: block; width: 100%; max-width: 200px; height: auto; }
.sidebar .brand .logo { text-shadow: none; }
.sidebar .brand .sub {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

.sidebar .nav-group {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  padding: 14px 18px 4px;
  opacity: 0.8;
}

.sidebar .nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  line-height: 1.25;
}
.sidebar .nav a .ic { width: 18px; text-align: center; flex-shrink: 0; opacity: 0.85; }
.sidebar .nav a .nsub { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.sidebar .nav a:hover { background: rgba(255,255,255,0.04); }
.sidebar .nav a.active {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}
.sidebar .nav a.disabled { color: var(--muted); cursor: default; }
.sidebar .nav a.disabled:hover { background: none; }

.sidebar .foot {
  margin-top: auto;
  padding: 12px 18px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.sidebar .foot strong { color: var(--text); }
.sidebar .foot a { color: var(--accent-text); text-decoration: none; }
.sidebar .foot a:hover { text-decoration: underline; }
.sidebar .foot .ver { margin-top: 8px; font-size: 11px; opacity: 0.6; }

/* ---------- tresc ---------- */
.content {
  flex: 1;
  padding: 24px 32px;
  max-width: 1180px;
  min-width: 0;
}

.content h2, .content h3, .card h2, .card h3 {
  font-family: var(--head-font);
  letter-spacing: 0.03em;
  font-weight: 700;
}
.content h2 { margin-top: 0; color: var(--text); text-shadow: 0 1px 0 #000, 0 0 12px rgba(213,206,193,0.08); }
.content h3 { color: var(--accent-text); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 10px rgba(0,0,0,0.25);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border-soft); }
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom-color: var(--border);
}
tbody tr:hover td { background: rgba(255,255,255,0.025); }

input, select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(213,206,193,0.18);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

button {
  background: var(--accent);
  background-image: var(--stone);
  color: var(--on-accent);
  border: 1px solid #8f887c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  border-radius: 4px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.12s ease, background 0.12s ease;
}

button:hover { filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: default; filter: none; }
button.secondary { background: var(--btn2); background-image: none; color: var(--text); border-color: var(--border); box-shadow: none; text-shadow: none; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge-ok { background: rgba(143,199,106,0.16); color: var(--ok); }
.badge-warn { background: rgba(224,138,60,0.16); color: var(--warn); }
.badge-err { background: rgba(224,85,79,0.16); color: var(--err); }
.badge { font-family: var(--body-font); letter-spacing: 0; }

/* Kropka statusu "na zywo" (zakladka Dashboard, 2026-09-23) -- te same
   kolory co badge-ok/warn/err wyzej, zeby caly panel trzymal sie jednej
   palety zamiast wprowadzac nowe kolory tylko dla tego jednego widoku. */
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; cursor: help; }
.status-dot-green { background: var(--ok); }
.status-dot-yellow { background: var(--warn); }
.status-dot-red { background: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 25%, transparent); }
.status-dot-offline { background: var(--muted); opacity: .6; }
.dash-important { color: var(--err); font-size: 12px; font-weight: 600; margin-top: 2px; }
.dash-loc { font-size: 13px; }

.form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); font-size: 13px; }
.status-line { margin-bottom: 12px; font-size: 13px; }
/* pasek statusu (cylShowStatus w api.js dokleja badge-ok/badge-err) */
.status-line.badge-ok, .status-line.badge-err {
  display: block;
  border-radius: var(--radius);
  padding: 6px 12px;
  border-left: 3px solid currentColor;
}

/* zakladki-kafelki w Trasach (routes.php ma wlasny styl z niebieskim
   podswietleniem z poprzedniego motywu -- tu nadpisane na zloto) */
.content .route-tab { background: var(--panel); border-color: var(--border); }
.content .route-tab.active { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- stan postaci (cylStatePill w api.js) ---------- */
.state-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.state-pill .ic { font-size: 11px; line-height: 1; }
.state-pill.st-profit   { background: rgba(143,199,106,0.15); color: var(--ok);          border-color: rgba(143,199,106,0.25); }
.state-pill.st-walerian { background: var(--accent-soft);      color: var(--accent-text); border-color: rgba(213,206,193,0.3); }
.state-pill.st-leveling { background: rgba(224,138,60,0.15);  color: var(--warn);        border-color: rgba(224,138,60,0.28); }
.state-pill.st-farming  { background: rgba(111,184,201,0.14); color: #8ccbdb;            border-color: rgba(111,184,201,0.28); }
.state-pill.st-dead     { background: rgba(224,85,79,0.15);   color: var(--err);         border-color: rgba(224,85,79,0.3); }
.state-pill.st-other    { background: var(--btn2);            color: var(--muted); }

/* ---------- ekran logowania ---------- */
.login-wrap { max-width: 380px; margin: 90px auto; padding: 0 16px; }
.login-brand { text-align: center; margin-bottom: 18px; }
.login-brand .logo {
  font-family: var(--head-font);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(213,206,193,0.3);
}
.login-brand .logo img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto 6px; }
.login-brand .logo { text-shadow: none; }
.login-brand .sub { font-size: 11px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.login-ver { font-size: 11px; opacity: 0.5; text-align: center; }

/* ---------- telefon / waskie okno ---------- */
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; }
  .content { padding: 16px; }
}

/* Magazyn -- kafelki itemow ("Stan Magazynu") */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.item-tile {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  position: relative;
}

.item-tile-adj {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: none;
  background: var(--btn2);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.item-tile-adj:hover { background: var(--accent); }
.item-tile-adj.minus:hover { background: var(--err); }

.item-tile-body { flex: 1; min-width: 0; text-align: center; }

.item-tile-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px;
  image-rendering: pixelated;
}

.item-tile-icon-fallback {
  width: 30px;
  height: 30px;
  margin: 0 auto 4px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-tile-name {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-tile-qty {
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.item-tile-qty:hover { color: var(--accent); }
.item-tile-unit { font-size: 10px; color: var(--muted); font-weight: 400; }

.item-tile-gear {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.item-tile-gear:hover { color: var(--text); }

.item-tile-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

/* Raporty -- dashboard 4 duzych kafelkow (EXP/Profit/Items/Custom) */
.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .report-grid { grid-template-columns: 1fr; }
}

/* Kafelki sa teraz klikalne -- caly kafelek to link (<a>) do strony
   szczegolow (web/modules/reports.php, ?view=...), wiec potrzebuje wlasnego
   display/kolorow zeby <a> nie "splaszczylo" wygladu, plus wyrazny hover
   jako podpowiedz ze mozna kliknac. */
.report-tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.report-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.report-tile-link:hover .report-tile { border-color: var(--accent); transform: translateY(-1px); }

.report-tile.placeholder { opacity: 0.55; justify-content: center; align-items: center; text-align: center; }

.report-tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.report-tile-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.report-tile-icon-emoji {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}

.report-tile-title { font-family: var(--head-font); font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.report-tile-headline { font-family: var(--head-font); font-size: 30px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.report-tile-sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

.report-tile-list { font-size: 13px; list-style: none; padding: 0; margin: 0; overflow-y: auto; max-height: 120px; }
.report-tile-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.report-tile-list li:last-child { border-bottom: none; }

.report-tile-more {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
  text-align: right;
}

/* Raporty -- strona szczegolow po klikniecu kafelka */
.report-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.report-back-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.report-back-link:hover { text-decoration: underline; }

/* Trasy -- male ikonki akcji w prawym gornym rogu karty configu/fragmentu */
.card-header-icons {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.card-icon-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
}
.card-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* ---------- uprawnienia (2026-10-10) ---------- */
body.not-admin .admin-only { display: none !important; }
.ro-note {
  background: var(--accent-soft);
  border: 1px solid rgba(213,206,193,0.3);
  border-left: 3px solid var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}
.sidebar .nav a.disabled { opacity: 0.45; filter: grayscale(1); }

/* =====================================================================
   Etap 2 wygladu (2026-10-10): naglowki zakladek, zwijane wstepy,
   telefon (menu, tabele jako karty), kafelki Komnaty.
   ===================================================================== */

/* ---------- jednolity naglowek zakladki ---------- */
.page-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.page-head .ph-ic {
  width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: 10px; background: var(--accent-soft); border: 1px solid rgba(213,206,193,0.35);
}
.page-head h1 { font-family: var(--head-font); font-size: 24px; letter-spacing: 0.03em; margin: 0; line-height: 1.15; }
.page-head .ph-desc { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ---------- wstep zwiniety pod "Jak to dziala" ---------- */
details.intro-more { margin: -4px 0 16px; }
details.intro-more > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--accent-text); padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
}
details.intro-more > summary::-webkit-details-marker { display: none; }
details.intro-more > summary:hover { border-color: var(--accent); }
details.intro-more[open] > summary { margin-bottom: 8px; }
details.intro-more > p { margin: 0; padding: 10px 14px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); line-height: 1.55; }

/* ---------- kafelki podsumowania (Komnata) ---------- */
.sum-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.sum-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
  cursor: pointer; user-select: none; transition: border-color .15s, transform .1s; text-decoration: none; color: inherit; display: block;
}
.sum-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.sum-tile.active { border-color: var(--accent); background: var(--accent-soft); }
.sum-tile .n { font-family: var(--head-font); font-size: 28px; font-weight: 700; line-height: 1; }
.sum-tile .l { font-size: 12px; color: var(--muted); margin-top: 6px; }
.sum-tile.t-ok .n { color: var(--ok); }
.sum-tile.t-warn .n { color: var(--warn); }
.sum-tile.t-err .n { color: var(--err); }
.sum-tile.t-dim .n { color: var(--muted); }
.sum-tile.zero { opacity: 0.55; }

/* ---------- menu na telefonie ---------- */
.menu-toggle { display: none; }

@media (max-width: 760px) {
  .sidebar { padding: 10px 0; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar .brand { display: flex; align-items: center; justify-content: space-between; border-bottom: none; margin: 0; padding: 0 14px; }
  .sidebar .brand .sub { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 6px; background: var(--btn2); color: var(--text);
    border: 1px solid var(--border); padding: 6px 12px; font-size: 14px;
  }
  .sidebar .nav, .sidebar .foot { display: none; }
  .sidebar.open .nav { display: block; margin-top: 8px; border-top: 1px solid var(--border); }
  .sidebar.open .foot { display: block; }
  .sidebar .nav a { padding: 10px 18px; }

  .content { padding: 14px 12px; }
  .card { padding: 12px 12px; }
  .page-head .ph-ic { width: 38px; height: 38px; font-size: 19px; }
  .page-head h1 { font-size: 20px; }
  .form-row input:not([type=checkbox]):not([type=radio]), .form-row select { max-width: 100%; }
  .form-row > input:not([type=checkbox]):not([type=radio]), .form-row > select, .form-row > textarea { flex: 1 1 100%; width: 100% !important; }

  /* tabele -> karty (etykiety kolumn dokleja skrypt w index.php: data-label) */
  table.cyl-cards, table.cyl-cards tbody { display: block; width: 100%; }
  table.cyl-cards thead { display: none; }
  table.cyl-cards tr {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px;
    border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 12px 8px;
    background: rgba(255,255,255,0.02);
  }
  table.cyl-cards tbody tr:hover td { background: none; }
  table.cyl-cards td { display: block; border: none; padding: 4px 0; text-align: left; min-width: 0; word-break: break-word; }
  table.cyl-cards td::before {
    content: attr(data-label); display: block; color: var(--muted); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.07em; margin-bottom: 1px; font-weight: 400;
  }
  table.cyl-cards td:first-child {
    grid-column: 1 / -1; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--border-soft);
    padding-bottom: 7px; margin-bottom: 3px;
  }
  table.cyl-cards td:first-child::before, table.cyl-cards td[data-label=""]::before, table.cyl-cards td.cyl-full::before { display: none; }
  table.cyl-cards td[data-label=""], table.cyl-cards td.cyl-full { grid-column: 1 / -1; }
  table.cyl-cards td[data-label=""] { text-align: right; }
  table.cyl-cards td input:not([type=checkbox]):not([type=radio]), table.cyl-cards td select, table.cyl-cards td textarea { width: 100%; max-width: 100%; }

  table.cyl-cards td.m-hide { display: none; }

  /* szerokie macierze -- przewijanie w poziomie zamiast kart */
  table.no-cards { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- runda 65: kompaktowe wiersze na telefonie (Postacie) ---------- */
td.m-sum { display: none; }
@media (max-width: 760px) {
  table.cyl-cards tr.m-compact { padding: 4px 12px; margin-bottom: 6px; }
  table.cyl-cards tr.m-compact:not(.m-open) > td:not(.m-sum) { display: none; }
  table.cyl-cards tr.m-compact > td.m-sum {
    display: flex; order: -1; grid-column: 1 / -1; align-items: center; justify-content: space-between;
    gap: 8px; text-align: left; padding: 4px 0; font-weight: 400; font-size: 14px; border-bottom: none; margin: 0;
  }
  table.cyl-cards tr.m-compact > td.m-sum::before { display: none; }
  table.cyl-cards tr.m-compact.m-open > td.m-sum { border-bottom: 1px solid var(--border-soft); padding-bottom: 7px; margin-bottom: 3px; }
  table.cyl-cards tr.m-compact.m-open > td:first-child { border-bottom: none; font-size: 14px; font-weight: 400; padding-bottom: 4px; margin-bottom: 0; }
  td.m-sum .m-sum-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  td.m-sum .m-sum-btn { flex: 0 0 auto; padding: 4px 10px; font-size: 13px; }
  /* naglowek grupy (urzadzenie) -- zwykly podpis, nie karta */
  table.cyl-cards tr.m-group { display: block; border: none; background: none; padding: 8px 2px 2px; margin: 4px 0 4px; }
  table.cyl-cards tr.m-group > td { padding: 0 !important; border: none !important; font-size: 13px; }
}

/* ----- 2026-10-13 (runda 71): zakladka Mapa ----- */
.map-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.map-side { position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; }
.map-list details { margin-top: 10px; }
.map-list summary { cursor: pointer; font-weight: 600; color: var(--accent-text); }
.map-item { padding: 4px 6px; margin: 2px 0 2px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1.3; }
.map-item:hover { background: var(--accent-soft); }
.map-item.active { background: var(--accent-soft); outline: 1px solid var(--accent); }
.map-box { overflow: hidden; height: 72vh; min-height: 360px; background: #000; border: 1px solid var(--border); border-radius: var(--radius); }
.map-box canvas { display: block; image-rendering: pixelated; touch-action: none; user-select: none; }
.map-mobile-only { display: none; }
.map-charpick { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.map-charpick select { flex: 1; min-width: 0; font-size: 15px; padding: 8px; }
.map-edit { margin-top: 8px; padding: 8px 10px; border: 1px solid #5ab0ff55; border-radius: var(--radius); background: rgba(90,176,255,.06); }
button.map-on { outline: 2px solid #5ab0ff; }
@media (max-width: 760px) {
  .map-wrap { grid-template-columns: minmax(0, 1fr); }
  .map-side { position: static; max-height: none; }
  .map-list { display: none; }
  .map-mobile-only { display: block; }
  .map-box { height: 62vh; min-height: 300px; }
}

/* ---------- runda 87: motyw z logo (czern + kamien) ---------- */
.page-head h1 { color: var(--accent-text); text-shadow: 0 2px 0 #000, 0 0 14px rgba(213,206,193,0.10); }
.sidebar .nav a.active { box-shadow: inset 0 0 0 1px rgba(213,206,193,0.06); }
.card { background-image: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 60%); }
@media (max-width: 760px) {
  .sidebar .brand .logo img { max-width: 150px; }
}