/* ADMIN – štýl v duchu Minecraft GUI (rovnaký ako obchod) */
/* Font Mojangles - súbor mojangles-v2.otf musí byť v rovnakom priečinku ako admin.css */
@font-face {
  font-family: 'Mojangles';
  src: url('mojangles-v2.woff2') format('woff2'),       /* 21 kB – načíta sa hneď (preload v <head>) */
       url('mojangles-v2.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;   /* žiadne záložné písmo na zlomok sekundy – počká na Mojangles */
}

:root {
  --font: 'Mojangles', 'VT323', monospace;
  --panel: #c6c6c6;
  --slot: #8b8b8b;
  --dark: #373737;
  --light: #ffffff;
  --ink: #1a1a1a;
  --gold: #ffaa00;
  --green: #55ff55;
  --red: #ff5555;
  --aqua: #55ffff;
  /* VEĽKOSŤ ADMINU: 1 = ako mierka prehliadača 100 %, 0.9 = ako 90 %, 0.8 = ako 80 %.
     Platí pre admin predajcu aj správu webu, len na počítači (na mobile ostáva 1). */
  --ui-zoom: 0.9;
  --vh: calc(1vh / var(--z, 1));   /* 1 % výšky okna aj pri zmenšení (100vh by inak bolo kratšie) */
}
@media (min-width: 900px) {
  html { zoom: var(--ui-zoom); }
  :root { --z: var(--ui-zoom); }
}

* { box-sizing: border-box; image-rendering: pixelated; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--font);
  font-size: 20px;
  color: var(--ink);
  background: #2b1d0f url('icons/bg/dirt.png') repeat;
  background-size: 64px 64px;
  position: relative;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

h1, h2 { margin: 0; font-weight: normal; }
.muted { color: #3b3b3b; margin: 0 0 8px; }

/* ---------- prvky ---------- */
.panel {
  background: var(--panel);
  border: 4px solid;
  border-color: var(--dark) var(--light) var(--light) var(--dark);
  padding: 12px;
}
.panel h2 {
  font-size: 24px; margin-bottom: 8px;
  color: #fff; text-shadow: 2px 2px 0 #000;
}

.btn {
  font-family: var(--font);
  font-size: 19px;
  padding: 4px 12px;
  background: #727272;
  color: #fff;
  border: 3px solid;
  border-color: #dbdbdb #3b3b3b #3b3b3b #dbdbdb;
  text-shadow: 2px 2px 0 #000;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
}
.btn:hover { background: #8b8b8b; }
.btn:active { border-color: #3b3b3b #dbdbdb #dbdbdb #3b3b3b; }
.btn.green { background: #2f8f2f; border-color: #8cf08c #0f4a0f #0f4a0f #8cf08c; }
.btn.green:hover { background: #3aa83a; }
.btn.red { background: #a02a2a; border-color: #ff9a9a #5a0f0f #5a0f0f #ff9a9a; }
.btn.red:hover { background: #bd3434; }
.btn.small { font-size: 16px; padding: 0 6px; min-width: 26px; }
.btn.wide { width: 100%; margin-top: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.pulse { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { filter: brightness(1.35); } }

.field {
  font-family: var(--font);
  font-size: 20px;
  width: 100%;
  padding: 4px 8px;
  color: #fff;
  background: #111;
  border: 3px solid;
  border-color: var(--dark) #dbdbdb #dbdbdb var(--dark);
  outline: none;
}
.field:focus { background: #1d1d1d; box-shadow: 0 0 0 2px var(--gold); }
select.field { cursor: pointer; }

.lbl { display: block; margin: 10px 0 3px; font-size: 18px; color: #202020; }
.err { margin-top: 12px; padding: 6px 8px; background: #5a0f0f; color: #ffbcbc; border: 2px solid #ff5555; }

/* ---------- prihlásenie ---------- */
.login-wrap { min-height: calc(100 * var(--vh)); display: flex; align-items: center; justify-content: center; padding: 16px; }
.login { width: 380px; max-width: 100%; }
.login-title { font-size: 34px; color: var(--gold); text-shadow: 3px 3px 0 #3f2a00; text-align: center; margin-bottom: 12px; }
.login-title span, .brand span { color: #fff; }

/* ---------- horná lišta ---------- */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: #3b2a16;
  border-bottom: 4px solid #1a0f05;
  position: sticky; top: 0; z-index: 20;
}
.brand { font-size: 30px; color: var(--gold); text-shadow: 3px 3px 0 #3f2a00; margin-right: 6px; }
.status { font-size: 20px; color: #bfffbf; text-shadow: 2px 2px 0 #000; flex: 1; min-width: 160px; }
.status.dirty { color: var(--gold); }
.top-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; margin: 0; }

/* ---------- rozloženie ---------- */
.app {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 360px;
  gap: 12px;
  padding: 12px;
  align-items: start;
}
#editor { position: sticky; top: 84px; max-height: calc(calc(100 * var(--vh)) - 100px); overflow-y: auto; }
#catPanel { position: sticky; top: 84px; max-height: calc(calc(100 * var(--vh)) - 100px); overflow-y: auto; }

@media (max-width: 1150px) {
  .app { grid-template-columns: 230px minmax(0, 1fr); }
  #editor { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  #catPanel { position: static; max-height: none; }
}

/* ---------- kategórie ---------- */
.cat-row {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; margin-bottom: 6px;
  background: var(--slot);
  border: 3px solid;
  border-color: var(--dark) var(--light) var(--light) var(--dark);
  cursor: pointer;
}
.cat-row:hover { background: #9a9a9a; }
.cat-row.active { background: #55ff55; }
.cat-row.active .cat-name { color: #003300; text-shadow: none; }
.cat-name { flex: 1; color: #fff; text-shadow: 2px 2px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count { font-size: 16px; color: #fff; background: rgba(0,0,0,.45); padding: 0 6px; }
/* tlačidlá kategórie sa ukážu len pri prejdení myšou a na aktívnom riadku (názov má viac miesta) */
.cat-actions { display: none; gap: 2px; }
.cat-row:hover .cat-actions, .cat-row.active .cat-actions { display: flex; }
.add-cat { display: flex; gap: 6px; margin-top: 10px; }
.add-cat .btn { padding: 0 12px; }

/* ---------- stred ---------- */
.toolbar { display: flex; gap: 8px; margin-bottom: 6px; }
.toolbar .field { flex: 1; }
.hint { font-size: 17px; color: #3b3b3b; margin-bottom: 8px; min-height: 1.2em; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.empty { grid-column: 1 / -1; text-align: center; color: #555; padding: 40px 10px; font-size: 22px; }

.card {
  background: var(--slot);
  border: 3px solid;
  border-color: var(--dark) var(--light) var(--light) var(--dark);
  padding: 8px;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  position: relative;
}
.card:hover { background: #9a9a9a; }
.card.sel { outline: 4px solid var(--gold); outline-offset: -1px; }
.card.oos { opacity: .65; }
.card.oos .c-name, .card.oos .c-level, .card.oos .c-price span { text-decoration: line-through; }

.slot {
  width: 64px; height: 64px;
  background: var(--slot);
  border: 3px solid;
  border-color: var(--dark) var(--light) var(--light) var(--dark);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  margin-bottom: 6px;
}
.slot img { width: 48px; height: 48px; object-fit: contain; z-index: 2; }
.slot img.broken { opacity: .25; }
/* Trblietanie enchantov – replika Minecraftu (1.20):
   originálna textúra enchanted_glint_item, pripočítaná k farbám itemu (aditívne miešanie),
   len na tvare itemu (maska z ikony), pootočená o 10°, posun doprava za 27,5 s a hore za 7,5 s
   (rovnako ako v hre pri predvolenej rýchlosti trblietania). */
.glint {
  --gs: 48px;                                   /* veľkosť ikony */
  position: absolute; left: 50%; top: 50%; width: var(--gs); height: var(--gs);
  transform: translate(-50%, -50%);
  overflow: hidden; pointer-events: none; z-index: 3;
  mix-blend-mode: screen;                       /* starší prehliadač */
  mix-blend-mode: plus-lighter;                 /* aditívne ako v hre */
  image-rendering: auto;
}
.glint.masked { -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.glint::before {
  content: ""; position: absolute; inset: -25%;
  transform: rotate(10deg);
  background: url('icons/bg/enchanted_glint.png') repeat;
  background-size: calc(var(--gs) * 8) calc(var(--gs) * 8);
  animation: glintX 27.5s linear infinite, glintY 7.5s linear infinite;
  animation-delay: var(--d1, 0s), var(--d2, 0s);   /* podľa hodín – nezačína odznova pri prekreslení */
}
@keyframes glintX { from { background-position-x: 0; } to { background-position-x: calc(var(--gs) * 8); } }
@keyframes glintY { from { background-position-y: 0; } to { background-position-y: calc(var(--gs) * -8); } }
.ed-preview .glint { --gs: 56px; }
.x {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; line-height: 1; color: var(--red); text-shadow: 3px 3px 0 #000;
  pointer-events: none;
}

.c-name { font-size: 17px; color: #fff; text-shadow: 2px 2px 0 #000; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
.c-level { font-size: 16px; color: var(--aqua); text-shadow: 2px 2px 0 #000; min-height: 1em; }
.c-price {
  display: flex; align-items: center; gap: 5px; margin-top: 4px;
  background: rgba(0,0,0,.3); padding: 1px 8px; border: 1px solid rgba(0,0,0,.5);
}
.c-price span { font-size: 20px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.c-price img { width: 18px; height: 18px; }
.c-moves { display: flex; gap: 4px; margin-top: 6px; }

/* ---------- editor ---------- */
.ed-empty { color: #444; padding: 24px 6px; text-align: center; font-size: 21px; }
.ed-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ed-preview .slot { margin: 0; width: 76px; height: 76px; flex: none; }
.ed-preview .slot img { width: 56px; height: 56px; }
.ed-sub { font-size: 16px; color: #3b3b3b; overflow-wrap: anywhere; }

.chk { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; user-select: none; }
.chk input { width: 22px; height: 22px; accent-color: #2f8f2f; cursor: pointer; flex: 0 0 auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tex { display: grid; grid-template-columns: 1fr 96px auto; gap: 6px; }
.warn[hidden] { display: none; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ed-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 3px solid var(--dark); }
.ed-actions .btn { flex: 1; }
.warn { margin-top: 6px; font-size: 16px; color: #8a0000; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px);
  z-index: 50; opacity: 0; pointer-events: none;
  background: #1c1c1c; color: #fff; padding: 8px 18px;
  border: 3px solid #55ff55; font-size: 21px; text-shadow: 2px 2px 0 #000;
  transition: opacity .2s, transform .2s;
  max-width: 90vw;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { border-color: var(--red); color: #ffcaca; }

/* ---------- tooltip editor ---------- */
textarea.field { resize: vertical; min-height: 90px; line-height: 1.2; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.swatch { width: 24px; height: 24px; padding: 0; border: 2px solid #000; cursor: pointer; }
.swatch:hover { outline: 2px solid var(--gold); }
.btn.fmt { min-width: 28px; height: 24px; line-height: 1; padding: 0 6px; }
.tip-prev {
  margin-top: 8px; padding: 6px 9px;
  background: rgba(16, 0, 16, 0.94);
  border: 2px solid #28007f;
  box-shadow: inset 0 0 0 1px #5000ff;
  color: #fff; font-size: 20px; line-height: 1.25;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tip-l { min-height: 1.25em; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
.tip-title:not(:last-child) { margin-bottom: 4px; }
.tip-empty { color: #888; font-size: 17px; }
.tip-prev .mc-ico { height: 1.2em; width: auto; max-width: 3em; vertical-align: -0.22em; margin: 0 2px; image-rendering: pixelated; }

/* ---------- farba názvu ---------- */
.name-prev {
  margin-top: 6px; padding: 4px 8px; min-height: 1.7em;
  background: var(--slot);
  border: 3px solid; border-color: var(--dark) var(--light) var(--light) var(--dark);
  color: #fff; text-shadow: 2px 2px 0 #000; font-size: 20px; overflow-wrap: anywhere;
}
.hexpick { width: 32px; height: 24px; padding: 0; border: 2px solid #000; background: none; cursor: pointer; }

/* ---------- záložky, online prepínač, objednávky ---------- */
.tabs { display: flex; gap: 6px; }
.btn.tab { font-size: 20px; }
.btn.tab.active { background: #2f8f2f; border-color: #8cf08c #0f4a0f #0f4a0f #8cf08c; }
.badge { display: inline-block; min-width: 24px; padding: 0 6px; margin-left: 4px; background: #c22; color: #fff; border: 2px solid #ff9a9a; text-align: center; font-size: 17px; line-height: 1.2; }
.badge[hidden] { display: none; }
body[data-view="orders"] .edit-only { display: none; }
body[data-view="orders"] #status { visibility: hidden; }

/* Minecraft-style stavová bodka (štvorec) */
.mc-dot { display: inline-block; width: 16px; height: 16px; border: 3px solid; flex: 0 0 auto; }
.mc-dot.on  { background: #55ff55; border-color: #aaffaa #00aa00 #00aa00 #aaffaa; box-shadow: 0 0 8px #55ff55; }
.mc-dot.off { background: #ff3b3b; border-color: #ff9a9a #7a0000 #7a0000 #ff9a9a; box-shadow: 0 0 8px #ff3b3b; }
.online-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 20px; color: #fff; text-shadow: 2px 2px 0 #000;
  padding: 4px 12px; background: #5a1a1a; cursor: pointer;
  border: 3px solid; border-color: #ff9a9a #3a0a0a #3a0a0a #ff9a9a;
}
.online-toggle.is-on { background: #1d5a1d; border-color: #8cf08c #0a3a0a #0a3a0a #8cf08c; }
.online-toggle:hover { filter: brightness(1.2); }
.online-toggle:disabled { opacity: .5; cursor: wait; }

.orders-app { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; padding: 12px; align-items: start; }
.orders-app[hidden], .app[hidden] { display: none; }
.orders-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.orders-bar .field { flex: 1; min-width: 160px; width: auto; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg .btn.active { background: #2f8f2f; border-color: #8cf08c #0f4a0f #0f4a0f #8cf08c; }
.ord-summary { margin: 0 0 10px; padding: 6px 10px; background: #3b3b3b; color: #55ffff; text-shadow: 2px 2px 0 #000; border: 2px solid #1a1a1a; }
.ord-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.ord-empty { padding: 30px; text-align: center; color: #3b3b3b; grid-column: 1 / -1; }
.ord { background: #8b8b8b; border: 3px solid; border-color: #373737 #fff #fff #373737; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ord.st-pending { box-shadow: 0 0 0 3px #ffaa00; }
.ord.st-accepted { box-shadow: 0 0 0 3px #55ffff; }
.ord.st-done { opacity: .85; }
.ord.st-cancel { opacity: .6; }
.ord-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: #fff; text-shadow: 2px 2px 0 #000; }
.ord-id { color: #ffaa00; font-size: 24px; }
.ord-nick { font-size: 24px; }
.ord-badge { padding: 0 8px; font-size: 16px; border: 2px solid #000; background: #ffaa00; color: #3a2200; text-shadow: none; }
.st-accepted .ord-badge { background: #55ffff; color: #003a3a; }
.st-done .ord-badge { background: #55ff55; color: #003300; }
.st-cancel .ord-badge { background: #ff5555; color: #330000; }
.ord-time { font-size: 16px; color: #ddd; margin-left: auto; }
.ord-items { list-style: none; margin: 0; padding: 4px 8px; background: #6a6a6a; border: 2px solid #3b3b3b; color: #fff; text-shadow: 2px 2px 0 #000; }
.ord-items li { display: flex; gap: 8px; align-items: center; padding: 1px 0; }
.li-name { flex: 1; }
.li-qty { color: #aaa; }
.li-sum { color: #ffaa00; min-width: 70px; text-align: right; display: inline-flex; gap: 4px; justify-content: flex-end; align-items: center; }
.dia { width: 20px; height: 20px; vertical-align: middle; image-rendering: pixelated; }
.ord-total { color: #fff; text-shadow: 2px 2px 0 #000; font-size: 22px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ord-total b { color: #ffaa00; font-weight: normal; }
.stk { color: #55ffff; font-size: 18px; }
.ord-foot { display: grid; gap: 6px; }
.ord-foot .note { font-size: 18px; }
.ord-note { color: #fff; text-shadow: 2px 2px 0 #000; font-size: 18px; }
.ord-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.players-panel { position: sticky; top: 84px; max-height: calc(calc(100 * var(--vh)) - 100px); overflow-y: auto; }
.player { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-bottom: 6px; padding: 4px 8px; text-align: left; font-family: var(--font); background: #8b8b8b; border: 3px solid; border-color: #373737 #fff #fff #373737; cursor: pointer; color: #fff; text-shadow: 2px 2px 0 #000; }
.player:hover { background: #9a9a9a; }
.pn { font-size: 21px; }
.pm { font-size: 16px; color: #ffe08a; display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 900px) {
  .orders-app { grid-template-columns: 1fr; }
  .players-panel { position: static; max-height: none; }
  .ord-list { grid-template-columns: 1fr; }
}

/* ---------- mobil ---------- */
@media (max-width: 720px) {
  body { font-size: 18px; }
  .topbar { position: relative; padding: 8px; gap: 6px; }
  .brand { font-size: 22px; width: 100%; }
  .tabs { flex: 1 1 100%; }
  .tabs .btn.tab { flex: 1; font-size: 18px; padding: 4px 6px; }
  .online-toggle { flex: 1 1 100%; justify-content: center; font-size: 18px; }
  .status { min-width: 0; flex: 1 1 100%; font-size: 17px; }
  .top-actions { width: 100%; }
  .top-actions { gap: 6px; }
  .top-actions .btn, .top-actions form { flex: 1 1 30%; text-align: center; font-size: 16px; padding: 3px 4px; }
  .top-actions form .btn { width: 100%; }
  .app, .orders-app { padding: 8px; gap: 8px; }
  .panel { padding: 8px; }
  #editor { position: static; max-height: none; }
  .orders-bar .field { flex: 1 1 100%; }
  .seg { width: 100%; }
  .seg .btn { flex: 1; padding: 4px 4px; font-size: 16px; }
  .ord-time { margin-left: 0; width: 100%; }
  .ord-actions .btn { flex: 1; }
  #toast { width: max-content; max-width: 92vw; }
}

.ed-box { margin-top: 8px; padding: 6px 8px; background: #b5b5b5; border: 2px solid #8b8b8b; }
.fee-row[hidden] { display: none; }

/* objednávky: doručenie, úprava */
.ord-deliv { color: #fff; text-shadow: 2px 2px 0 #000; font-size: 18px; overflow-wrap: anywhere; }
.ord-deliv .coords { color: #55ffff; }
.ord-deliv .fee { color: #ffaa00; }
.ord-pnote { color: #ffe08a; text-shadow: 2px 2px 0 #000; font-size: 17px; overflow-wrap: anywhere; }
.set-h { margin-top: 14px; }
.ord-settings { display: grid; gap: 6px; }
.ord-settings .field { font-size: 17px; }
body.a-open { overflow: hidden; }
.a-back { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 12px; }
.a-box { width: 640px; max-width: 100%; max-height: calc(calc(100 * var(--vh)) - 24px); max-height: calc(100dvh / var(--z, 1) - 24px); overflow-y: auto; background: var(--panel); border: 4px solid; border-color: #fff #373737 #373737 #fff; box-shadow: 0 0 0 4px #000; padding: 12px 14px; }
.a-box h2 { color: #fff; text-shadow: 2px 2px 0 #000; font-size: 24px; margin-bottom: 4px; }
.a-lines { display: grid; gap: 4px; background: #8b8b8b; padding: 6px; border: 2px solid #373737; }
.a-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 70px 56px auto; gap: 6px; align-items: center; color: #fff; text-shadow: 2px 2px 0 #000; }
.a-name { overflow-wrap: anywhere; }
.a-unit { font-size: 15px; color: #ddd; }
.a-sum { color: #ffaa00; text-align: right; }
.a-qty { padding: 2px 4px; text-align: center; }
.a-add { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 6px; margin-top: 6px; }
.a-home { display: grid; gap: 6px; margin-top: 6px; }
.a-home[hidden] { display: none; }
.a-coords { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.a-total { margin: 10px 0 4px; padding: 6px 10px; background: #555; color: #fff; text-shadow: 2px 2px 0 #000; font-size: 21px; }
.a-total b { color: #ffaa00; font-weight: normal; }
.a-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .a-line { grid-template-columns: minmax(0, 1fr) 64px 52px auto; }
  .a-unit { display: none; }
  .a-add { grid-template-columns: minmax(0, 1fr) 64px; }
  .a-add .btn { grid-column: 1 / -1; }
}
.ord-settings .chk { color: #1a1a1a; text-shadow: none; font-size: 18px; }
.set-fee { display: flex; align-items: center; gap: 6px; font-size: 17px; color: #1a1a1a; }
.set-fee .field { width: 90px; padding: 2px 6px; font-size: 18px; }
.a-fee { width: 140px; }

/* odberné miesta v nastaveniach */
.pts { display: grid; gap: 6px; }
.pt { display: grid; gap: 4px; padding: 6px; background: #b5b5b5; border: 2px solid #8b8b8b; }
.pt-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.pt-xyz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pt .field { font-size: 17px; padding: 2px 6px; }

/* nastavenia obchodu, PIN hráča, predĺženie online, sklad */
.set-sub { margin-top: 6px; font-size: 18px; color: #1a1a1a; border-bottom: 2px solid #8b8b8b; }
.set-sub:first-child { margin-top: 0; }
.pin-reset { display: grid; gap: 6px; margin-bottom: 4px; }
.ord-settings .muted { font-size: 15px; margin: 0; }
.pin-reset .field { font-size: 17px; padding: 2px 6px; }
.pin-info { font-size: 15px; }
#onlineExtend[hidden] { display: none; }
.c-stock { font-size: 15px; color: #fff; text-shadow: 2px 2px 0 #000; }
.c-stock.low { color: #ff5555; }

.btn.blue { background: #2a6fa8; border-color: #8cc8f0 #0f3a5a #0f3a5a #8cc8f0; color: #fff; }

.pt-bot { display: grid; gap: 4px; }
.pt-fee { display: flex; align-items: center; gap: 6px; font-size: 16px; color: #1a1a1a; white-space: nowrap; }
.pt-fee .field { flex: 1 1 auto; min-width: 0; }

/* tlačidlo zvuku (♪) vľavo dole */
#sfxToggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 30;
  width: 36px; height: 36px; padding: 0;
  font-family: var(--mc-font, 'Mojangles', 'VT323', monospace); font-size: 22px; line-height: 1;
  color: #fff; background: #727272; cursor: pointer;
  border: 3px solid; border-color: #dbdbdb #3b3b3b #3b3b3b #dbdbdb;
  text-shadow: 2px 2px 0 #000;
}
#sfxToggle:hover { background: #8b8b8b; }
#sfxToggle.off { color: #aaa; }
#sfxToggle.off::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; background: #ff5555; transform: rotate(-45deg); box-shadow: 1px 1px 0 #000; }

/* zľava na objednávku */
.a-disc { color: #55ff55 !important; }
.a-old { color: #bbb; }
.a-pay { color: #55ff55 !important; font-size: 24px; }
.a-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.a-quick-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #1a1a1a; }
.a-quick-row .field { width: 120px; }
.ord-total .a-disc { font-size: 16px; }

/* ---------- nápoveda „i“ (na PC myšou, na mobile ťuknutím) ---------- */
.lbl, .hint, .set-fee, .set-h { position: relative; }
.hi {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; margin-left: 6px; vertical-align: 2px;
  background: #3a6ea5; color: #fff; font-size: 14px; line-height: 1; cursor: help; user-select: none;
  border: 2px solid #1d1d1d; box-shadow: inset -2px -2px 0 #2a4f78, inset 2px 2px 0 #6a9fd6;
}
.hi.open, .hi:focus-visible { background: #4c86c4; outline: none; }
.hi .bub {
  display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 50;
  background: #100010f0; border: 2px solid #2a0a6a; outline: 2px solid #100010;
  color: #e0e0e0; font-size: 15px; line-height: 1.25; padding: 8px 10px; text-align: left;
  white-space: normal; overflow-wrap: anywhere; cursor: auto;
}
.hi.open .bub { display: block; }
@media (hover: hover) { .hi:hover .bub { display: block; } }
.set-h .hi { vertical-align: 3px; }

/* ---------- obchody hráčov: prihlásenie predajcu, založenie obchodu, správa webu ---------- */
.login-wrap { flex-direction: column; gap: 10px; }
.login-links { display: flex; justify-content: space-between; margin-top: 12px; }
a.muted { text-decoration: underline; }
.small { font-size: 15px; }
.logout-under { text-align: center; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ok-msg { margin: 8px 0; padding: 6px 8px; background: #0f4a0f; color: #c8ffc8; border: 2px solid #55ff55; }

.panel.super { width: 1040px; max-width: 100%; }
.panel.super .login-title { text-align: left; }
.shops-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 18px; }
.shops-tbl th { text-align: left; color: #3b3b3b; border-bottom: 3px solid #555; padding: 4px 6px; }
.shops-tbl td { padding: 6px; border-bottom: 2px solid #9a9a9a; vertical-align: top; }
.shops-tbl td a:not(.btn) { color: #1b3f8f; }
.shops-tbl tr.blocked td { background: rgba(160, 42, 42, .15); }
.shops-tbl .acts { white-space: nowrap; text-align: right; }
.shops-tbl .acts .btn { margin-left: 4px; }
.tag { padding: 0 6px; color: #fff; font-size: 16px; }
.tag.green { background: #2f8f2f; }
.tag.red { background: #a02a2a; }
.panel.super .pin-reset { display: flex; gap: 6px; max-width: 420px; margin-bottom: 14px; }

.shop-info { display: flex; flex-direction: column; }
.shop-info textarea { resize: vertical; }
.shop-info .muted.small { margin: 6px 0 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .shops-tbl thead { display: none; }
  .shops-tbl tr { display: block; border-bottom: 3px solid #555; padding: 4px 0; }
  .shops-tbl td { display: inline-block; border: 0; padding: 2px 6px; }
  .shops-tbl .acts { display: block; text-align: left; }
}
.panel.super .pin-reset .btn { white-space: nowrap; }
.login .login-title span, .panel.super .login-title span { display: block; font-size: 24px; }
.panel.super .login-title span { display: inline; }

/* ======================================================================
   SPRÁVA WEBU (super.php) – bočné menu + prehľad
   ====================================================================== */
.su-wrap { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.su-side { width: 230px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 76px; }
.su-side a {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #8b8b8b; color: #fff; text-decoration: none;
  border: 3px solid; border-color: #dbdbdb #3b3b3b #3b3b3b #dbdbdb; text-shadow: 2px 2px 0 #000; font-size: 20px;
}
.su-side a:hover { background: #9b9b9b; }
.su-side a.on { background: #2f8f2f; border-color: #8cf08c #0f4a0f #0f4a0f #8cf08c; }
.su-side a img { width: 28px; height: 28px; }
.su-badge { margin-left: auto; background: #ff3b3b; color: #fff; padding: 0 6px; font-size: 16px; text-shadow: none; }
.su-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.su-row { display: flex; gap: 12px; align-items: flex-start; }
.su-grow { flex: 1; min-width: 0; }
.su-col { width: 380px; flex: 0 0 380px; min-width: 0; }
.su-flash { margin: 0; }
.su-maint { color: #ff9a9a; }
.su-red { color: #a02a2a; }
.su-h2b { margin-top: 16px !important; }
.mini { font-size: 15px; color: #444; }
.small { font-size: 15px; }
a.nick, .su-t a { color: #0b4f8a; }

.su-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.su-tile { background: #8b8b8b; border: 3px solid; border-color: #373737 #fff #fff #373737; padding: 8px 10px; color: #fff; text-shadow: 2px 2px 0 #000; display: flex; gap: 10px; align-items: center; }
.su-tile img { width: 40px; height: 40px; flex: 0 0 auto; }
.su-tile .n { font-size: 32px; color: var(--gold); line-height: 1; }
.su-tile .l { font-size: 17px; }
.su-tile .d { font-size: 15px; color: #8cf08c; }

.su-bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 22px 4px 0; border-bottom: 3px solid #555; }
.su-bars div { flex: 1; background: #2f8f2f; border: 2px solid; border-color: #8cf08c #0f4a0f #0f4a0f #8cf08c; position: relative; }
.su-bars div span { position: absolute; top: -21px; left: 0; right: 0; text-align: center; font-size: 16px; color: #222; }
.su-bars-l { display: flex; gap: 8px; padding: 2px 4px; font-size: 16px; color: #444; }
.su-bars-l span { flex: 1; text-align: center; }

.su-t { width: 100%; border-collapse: collapse; font-size: 18px; }
.su-t th { text-align: left; color: #3b3b3b; border-bottom: 3px solid #555; padding: 4px 6px; font-weight: normal; }
.su-t td { padding: 5px 6px; border-bottom: 2px solid #9a9a9a; vertical-align: middle; }
.su-t tr.ban td { background: rgba(160, 42, 42, .15); }
.su-t tr.sel td { background: rgba(42, 111, 168, .2); }
.su-t tr.su-done td { opacity: .65; }
.su-t .acts { white-space: nowrap; text-align: right; }
.su-t .acts .btn, .su-t .acts form .btn { margin-left: 3px; }
.su-t input[type=checkbox] { width: 18px; height: 18px; accent-color: #2f8f2f; }
.su-small { font-size: 16px; }
.su-items { font-size: 16px; color: #333; }
.su-rtext { font-size: 16px; color: #333; overflow-wrap: anywhere; }
.tag { padding: 0 6px; color: #fff; font-size: 16px; white-space: nowrap; }
.tag.gold { background: #b07800; } .tag.blue { background: #2a6fa8; } .tag.gray { background: #6b6b6b; }

.su-todo { list-style: none; margin: 0; padding: 0; font-size: 18px; }
.su-todo li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 2px solid #9a9a9a; line-height: 1.15; }
.su-log { font-size: 16px; line-height: 1.5; color: #222; max-height: 360px; overflow-y: auto; }
.su-log .tm { color: #666; margin-right: 6px; }
.su-log b { font-weight: normal; color: #0b4f8a; }

.su-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.su-filter .field { width: 300px; max-width: 100%; }
.su-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 1px 10px; background: #8b8b8b; color: #fff; text-decoration: none; border: 3px solid; border-color: #dbdbdb #3b3b3b #3b3b3b #dbdbdb; font-size: 18px; text-shadow: 1px 1px 0 #000; cursor: pointer; }
.chip.on, .su-radio .chip:has(input:checked) { background: #2a6fa8; border-color: #8cc8f0 #0f3a5a #0f3a5a #8cc8f0; }
.su-radio input { display: none; }
.su-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; background: #2a2a2a; color: #fff; border: 3px solid #555; font-size: 18px; margin-bottom: 4px; }
.su-chk { display: flex; align-items: center; gap: 6px; font-size: 18px; margin: 4px 0; cursor: pointer; }
.su-chk input { width: 18px; height: 18px; accent-color: #2f8f2f; }

.su-detail h2 { margin-bottom: 6px; }
.su-pname { font-size: 30px !important; color: var(--gold) !important; text-shadow: 3px 3px 0 #3f2a00 !important; overflow-wrap: anywhere; }
.su-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: 18px; }
.su-kv b { font-weight: normal; color: #3b3b3b; }
.su-kv span { overflow-wrap: anywhere; }
.su-form .btn.wide, .su-detail form .btn.wide { margin-top: 8px; }
.su-inline { display: flex; gap: 6px; }
.su-sep { border: 0; border-top: 3px solid #8b8b8b; margin: 12px 0; }

.su-settings { max-width: 720px; }
.su-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 19px; padding: 8px 0; border-bottom: 2px solid #9a9a9a; cursor: pointer; }
.su-switch small { display: block; font-size: 15px; color: #444; }
.su-switch input { display: none; }
.su-switch i { width: 50px; height: 24px; flex: 0 0 auto; border: 3px solid #222; background: #6b6b6b; position: relative; }
.su-switch i::after { content: ""; position: absolute; top: 1px; left: 1px; width: 18px; height: 16px; background: #dbdbdb; }
.su-switch input:checked + i { background: #2f8f2f; }
.su-switch input:checked + i::after { left: auto; right: 1px; }
.su-num { width: 140px; }

@media (max-width: 1100px) {
  .su-row { flex-direction: column; align-items: stretch; }
  .su-col { width: auto; flex: 1 1 auto; }
  .su-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .su-wrap { flex-direction: column; padding: 8px; align-items: stretch; }
  .su-side { width: auto; position: static; flex-direction: row; flex-wrap: wrap; }
  .su-side a { font-size: 17px; padding: 4px 6px; }
  .su-side a img { width: 22px; height: 22px; }
  .su-t thead { display: none; }
  .su-t tr { display: block; border-bottom: 3px solid #555; padding: 4px 0; }
  .su-t td { display: inline-block; border: 0; padding: 2px 6px; }
  .su-t .acts { display: block; text-align: left; }
}
.su-t .nw, .su-t td:has(> .tag) { white-space: nowrap; }
.su-t td { overflow-wrap: anywhere; }
.su-col { width: 350px; flex-basis: 350px; }
.su-detail .su-t td { font-size: 16px; padding: 3px 4px; }
.su-detail .su-t td .tag { font-size: 14px; }
.su-t a.btn, .su-todo a.btn { color: #fff; text-decoration: none; }
.su-inline .field { flex: 1; min-width: 0; width: auto; }
.su-inline .btn { flex: 0 0 auto; }
.su-main { overflow-x: hidden; }

/* ---------- Správa webu: Záloha a obnova ---------- */
.bk-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.bk-card { display: flex; align-items: center; gap: 10px; text-align: left; font-family: var(--font); color: #fff; text-shadow: 2px 2px 0 #000;
  background: #727272; border: 3px solid; border-color: #dbdbdb #3b3b3b #3b3b3b #dbdbdb; padding: 10px 12px; cursor: pointer; }
.bk-card:hover { background: #2f8f2f; border-color: #8cf08c #0f4a0f #0f4a0f #8cf08c; }
.bk-card:disabled { opacity: .4; cursor: not-allowed; }
.bk-card img { width: 40px; height: 40px; flex: 0 0 auto; }
.bk-card span { flex: 1; min-width: 0; }
.bk-card b { display: block; font-weight: normal; font-size: 22px; color: var(--gold); }
.bk-card small { display: block; font-size: 15px; line-height: 1.15; }
.bk-card i { font-style: normal; font-size: 16px; color: #8cf08c; white-space: nowrap; }
.bk-up { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bk-up .field { flex: 1; min-width: 200px; width: auto; font-size: 16px; }
.bk-snap-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.bk-snap-head h2 { margin: 0; }
.bk-snap-new { flex: 0 1 460px; }
.bk-imp { border-color: #8cc8f0 #0f3a5a #0f3a5a #8cc8f0; }
.bk-imp-head { display: flex; gap: 12px; align-items: center; }
.bk-imp-head img { width: 44px; height: 44px; }
.bk-imp-head h2 { margin: 0; }
.bk-meta { font-size: 17px; color: #333; }
.bk-meta b { font-weight: normal; color: #0b4f8a; }
.bk-safe { background: #2a2a2a; color: #dfffdf; border: 3px solid #555; padding: 6px 10px; font-size: 17px; margin: 10px 0; }
.bk-safe b { font-weight: normal; color: #8cf08c; }
.bk-h3 { font-weight: normal; font-size: 21px; margin: 14px 0 4px; color: #2b2b2b; }
.bk-shops .su-chk { margin: 0; font-size: 16px; white-space: nowrap; }
.bk-sel { font-size: 16px; padding: 2px 4px; width: auto; max-width: 100%; }
.bk-shops tr.bk-new td { background: rgba(255, 170, 0, .14); }
.bk-web { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.bk-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 18px; padding: 6px 0; border-bottom: 2px solid #9a9a9a; cursor: pointer; }
.bk-opt small { display: block; font-size: 15px; color: #444; }
.bk-opt input[type=checkbox] { width: 20px; height: 20px; accent-color: #2f8f2f; flex: 0 0 auto; }
.bk-actions { display: flex; gap: 8px; margin-top: 14px; }
.bk-orphans { border-color: #ffd27a #6b4a00 #6b4a00 #ffd27a; }
@media (max-width: 900px) {
  .bk-dl, .bk-web { grid-template-columns: 1fr; }
  .bk-shops thead { display: none; }
  .bk-shops tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; border-bottom: 2px solid #9a9a9a; padding: 4px 0; }
  .bk-shops td { border: 0; padding: 2px 4px; }
  .bk-shops td:first-child { grid-row: span 6; }
  .bk-stack thead { display: none; }
  .bk-stack tr { display: block; border-bottom: 2px solid #9a9a9a; padding: 4px 0; }
  .bk-stack td { display: block; border: 0; padding: 1px 4px; text-align: left !important; white-space: normal; }
  .bk-actions { flex-wrap: wrap; }
}

/* =====================================================================
   ADMIN PREDAJCU – záložky ako v kreatívnom inventári (rozloženie „B“)
   ===================================================================== */
.hdr-info { color: #ddd; min-width: 0; flex: 1 1 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-info b { color: var(--gold); font-weight: normal; }
.mctabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 0; position: relative; z-index: 2; }
.mctab {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 9px; cursor: pointer;
  font-family: var(--font); font-size: 21px; color: #fff; text-shadow: 2px 2px 0 #000;
  background: #6f6f6f; border: 3px solid; border-color: #fff #373737 transparent #fff; position: relative; top: 3px;
}
.mctab:hover { background: #7f7f7f; }
.mctab img { width: 28px; height: 28px; image-rendering: pixelated; }
.mctab.active { background: #c6c6c6; color: #3b3b3b; text-shadow: none; padding-bottom: 12px; top: 3px; z-index: 3; }
.mctab .badge { margin-left: 2px; }
.sheet {
  margin: 0 12px 12px; padding: 12px; background: #c6c6c6; border: 3px solid; border-color: #fff #555 #555 #fff;
  min-height: calc(calc(100 * var(--vh)) - 150px); position: relative; z-index: 1;
}
.sheet > .view[hidden] { display: none !important; }
.sheet .panel { box-shadow: none; }
.sheet .app, .sheet .orders-app { padding: 0; }
.sheet .orders-app:not([hidden]) { display: block; }

/* prehľad */
#homeView { display: flex; flex-direction: column; gap: 12px; }
.su-tile[data-go] { cursor: pointer; }
.su-tile[data-go]:hover { background: #9a9a9a; }
.su-tile .d.bad { color: #ff9a9a; }
.b-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.b-col { display: grid; gap: 12px; }
.b-split .ord-list { grid-template-columns: 1fr; }
.home-ok { padding: 20px; text-align: center; color: #3b3b3b; font-size: 20px; }

/* katalóg: lišta, kategórie ako tlačidlá, editor sa vysunie sprava */
.cat-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.cat-bar #search { width: 260px; max-width: 100%; flex: 0 1 260px; }
.cat-bar .status { color: #2f6f2f; text-shadow: none; text-align: right; min-width: auto; flex: 1 1 auto; white-space: nowrap; }
.cat-bar .status.dirty { color: #a05a00; }
.cat-bar .hint { font-size: 17px; color: #3b3b3b; }
.cat-bar .btn { font-size: 18px; padding: 0 8px; }
.cat-bar .status { font-size: 18px; }
#catPanel.cat-chips { position: static; max-height: none; overflow: visible; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.cat-chips #cats { display: contents; }
.cat-chips .cat-row { margin: 0; padding: 2px 10px; gap: 6px; max-width: 320px; border: 3px solid; border-color: #dbdbdb #3b3b3b #3b3b3b #dbdbdb; background: #8b8b8b; }
.cat-chips .cat-row.active { background: #2f8f2f; border-color: #8cf08c #0f4a0f #0f4a0f #8cf08c; }
.cat-chips .cat-row.active .cat-name { color: #fff; text-shadow: 2px 2px 0 #000; }
.cat-chips .cat-row:hover .cat-actions { display: none; }
.cat-chips .cat-row.active .cat-actions { display: flex; }
.cat-chips .add-cat { display: flex; gap: 4px; margin: 0; }
.cat-chips .add-cat .field { width: 230px; }
.sheet #center { min-width: 0; }
.sheet .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sheet .app.view:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; align-items: start; }
body.ed-open .sheet .app.view:not([hidden]) { grid-template-columns: minmax(0, 1fr) 390px; }
.sheet .app > .cat-bar, .sheet .app > #catPanel { grid-column: 1 / -1; }
.sheet #center { grid-column: 1; }
.sheet #editor { display: none; grid-column: 2; grid-row: 3; position: sticky; top: 84px; max-height: calc(calc(100 * var(--vh)) - 100px); overflow-y: auto; }
body.ed-open .sheet #editor { display: block; }
.ed-close { float: right; }

/* zákazníci */
.cust-t tr { cursor: pointer; }
.cust-t tr:hover td { background: rgba(255, 255, 255, .25); }
.cust-t .pm { color: #a06a00; }

/* nastavenia */
.b-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; align-items: start; }
.b-settings .players-panel { position: static; max-height: none; }

@media (max-width: 1100px) {
  .b-split, .b-settings { grid-template-columns: 1fr; }
  .sheet .su-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.ed-open .sheet .app.view:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .sheet #editor { position: fixed; top: 0; right: 0; left: 0; bottom: 0; max-height: none; z-index: 40; }
  body.ed-open[data-view="shop"] { overflow: hidden; }
}
@media (max-width: 720px) {
  .mctabs { padding: 6px 6px 0; gap: 2px; }
  .mctab { flex: 1 1 auto; justify-content: center; font-size: 16px; padding: 4px 6px 7px; gap: 4px; }
  .mctab img { width: 20px; height: 20px; }
  .sheet { margin: 0 6px 6px; padding: 8px; }
  .sheet .su-tiles { grid-template-columns: 1fr 1fr; gap: 6px; }
  .sheet .su-tile .n { font-size: 24px; }
  .sheet .su-tile { min-width: 0; padding: 6px; gap: 6px; }
  .sheet .su-tile img { width: 26px; height: 26px; }
  .sheet .su-tile .l, .sheet .su-tile .d { font-size: 14px; overflow-wrap: anywhere; }
  .cat-bar #search { flex: 1 1 100%; width: auto; }
  .sheet .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ---------- správa webu: zakázané slová (súbor) ---------- */
.bw { background: #b5b5b5; border: 3px solid; border-color: #555 #fff #fff #555; padding: 8px 10px; }
.bw-h { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: 17px; margin-bottom: 8px; }
.bw-h b { font-weight: normal; color: #0b4f8a; }
.bw-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.bw-chip { display: inline-flex; align-items: center; gap: 4px; background: #3b3b3b; color: #fff; padding: 0 2px 0 7px; font-size: 16px; border: 2px solid #111; }
.bw-chip button { font-family: var(--font); font-size: 14px; color: #ff9a9a; background: none; border: 0; cursor: pointer; padding: 0 3px; }
.bw-chip button:hover { color: #fff; }
.bw-more { background: #6b6b6b; padding-right: 7px; }
.bw-add { margin-bottom: 8px; }
.bw-file { display: flex; flex-wrap: wrap; gap: 8px; }
.bw-file label.btn { cursor: pointer; }

/* ---------- správa webu: pod-záložky nastavení ---------- */
.su-subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: -12px; position: relative; z-index: 2; }
.su-subtabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px 9px; font-size: 19px; color: #fff; text-decoration: none; text-shadow: 2px 2px 0 #000;
  background: #6f6f6f; border: 3px solid; border-color: #fff #373737 transparent #fff; position: relative; top: 3px; }
.su-subtabs a:hover { background: #7f7f7f; }
.su-subtabs a.on { background: #c6c6c6; color: #3b3b3b; text-shadow: none; padding-bottom: 12px; }
.su-cnt { background: #3b3b3b; color: #fff; text-shadow: none; padding: 0 6px; font-size: 15px; }
.su-tabpane[hidden] { display: none !important; }
.su-settings.su-tabpane { max-width: 980px; }
.su-gen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; align-items: start; }
.su-gen > div > .lbl:first-child { margin-top: 8px; }

/* Discord – podrobné udalosti */
.hk-common { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.hk-common .hk-wide { grid-column: 1 / -1; }
.hk-style { margin-top: 2px; }
details.hk { margin-top: 8px; background: #b5b5b5; border: 3px solid; border-color: #555 #fff #fff #555; }
details.hk summary { display: flex; align-items: center; gap: 10px; padding: 6px 8px; cursor: pointer; list-style: none; }
details.hk summary::-webkit-details-marker { display: none; }
details.hk summary::after { content: "▼"; font-size: 13px; color: #555; margin-left: 4px; }
details.hk[open] summary::after { content: "▲"; }
details.hk summary img { width: 28px; height: 28px; }
.hk-sw { padding: 0; border: 0; flex: 0 0 auto; }
.hk-t { flex: 1; min-width: 0; font-size: 19px; }
.hk-t small { display: block; font-size: 15px; color: #444; }
.hk-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hk-body { padding: 0 10px 10px; border-top: 2px solid #8b8b8b; }
.hk-msg { font-size: 17px; resize: vertical; }
.hk-vars { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 5px; }
.hk-var { font-family: var(--font); font-size: 15px; padding: 0 6px; cursor: pointer; color: #fff; background: #2a6fa8; border: 2px solid; border-color: #8cc8f0 #0f3a5a #0f3a5a #8cc8f0; }
.hk-var:hover { filter: brightness(1.15); }
.hk-vars .muted { margin: 0 0 0 6px; }
.hk-prev { margin-top: 8px; padding: 8px 12px; background: #313338; color: #dbdee1; font: 15px/1.4 "gg sans", "Segoe UI", Arial, sans-serif; border-radius: 6px; text-shadow: none; overflow-wrap: anywhere; }
.hk-prev b { color: #fff; }
.hk-prev .dc-n { color: #f2f3f5; font-weight: 600; margin-bottom: 2px; }
.hk-prev .dc-n span { background: #5865f2; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 3px; vertical-align: 2px; }
.hk-prev .dc-e { margin-top: 4px; padding: 8px 12px; background: #2b2d31; border-left: 4px solid; border-radius: 4px; }
.hk-prev .q { display: inline-block; border-left: 4px solid #4e5058; padding-left: 8px; }
.hk-prev .m { background: rgba(88, 101, 242, .3); color: #c9cdfb; padding: 0 2px; border-radius: 3px; }
.hk-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto; gap: 0 12px; align-items: end; }
.hk-grid .su-inline .field { min-width: 0; }
.hk-ptype { width: auto; flex: 0 0 auto; }
.hk-color { width: 56px; height: 38px; padding: 0; border: 3px solid #222; background: none; cursor: pointer; }
@media (max-width: 900px) {
  .su-gen, .hk-common, .hk-grid { grid-template-columns: 1fr; }
  .su-subtabs a { font-size: 16px; padding: 5px 10px 8px; }
  .hk-tags { display: none; }
}

/* malé ikony namiesto emoji (sada podľa UI_ICONS v lib.php) */
.uic { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: -4px; flex: 0 0 auto; }
.btn .uic { vertical-align: -4px; }
.btn.small .uic { width: 18px; height: 18px; vertical-align: -4px; }
.su-subtabs .uic { width: 22px; height: 22px; vertical-align: -5px; }
.btn > .uic:only-child { width: 24px; height: 24px; vertical-align: -6px; }

/* ---------- Správa webu → Nastavenia → Databáza ---------- */
.dbi-pane { display: flex; flex-direction: column; gap: 12px; }
.dbi-pane[hidden] { display: none; }
.dbi-status { display: flex; align-items: center; gap: 14px; }
.dbi-status .mc-dot { width: 22px; height: 22px; }
.dbi-status .big { font-size: 28px; color: #1f7a1f; line-height: 1; }
.dbi-status .big.bad { color: #a02a2a; }
.dbi-status .sub, .dbi-head .sub { font-size: 16px; color: #444; }
.dbi-status .btn, .dbi-head .btn, .dbi-status form { margin-left: auto; }
.dbi-note { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; }
.dbi-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dbi-code { font-size: 15px; color: #555; }
.su-t td.num { text-align: right; white-space: nowrap; }
.su-t tr.dbi-total td { border-top: 3px solid #555; border-bottom: 0; color: #1a1a1a; }
.dbi-test { background: #1e1e1e; border: 3px solid; border-color: #373737 #8b8b8b #8b8b8b #373737; padding: 8px 10px; font-size: 17px; color: #ddd; }
.dbi-test > div { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.dbi-test .n { width: 260px; }
.dbi-test .m { width: 80px; text-align: right; color: #ffaa00; }
.dbi-test .d { color: #9a9a9a; overflow-wrap: anywhere; }
.dbi-test .bad .n { color: #ff8080; }
.dbi-test .sum { border-top: 2px solid #444; margin-top: 4px; padding-top: 6px; color: #8cf08c; }
.dbi-test .sum.bad { color: #ff8080; }
.dbi-bar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; align-items: center; gap: 10px; font-size: 17px; padding: 3px 0; }
.dbi-bar .b { height: 16px; background: #8b8b8b; border: 2px solid; border-color: #373737 #fff #fff #373737; }
.dbi-bar .b i { display: block; height: 100%; background: #2f8f2f; }
.dbi-bar .v { text-align: right; font-size: 15px; color: #333; white-space: nowrap; }
.dbi-actions { margin-top: 10px; }
.dbi-checks { list-style: none; margin: 0; padding: 0; font-size: 18px; }
.dbi-checks li { display: grid; grid-template-columns: 22px 300px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 0; border-bottom: 2px solid #9a9a9a; }
.dbi-checks li .d { font-size: 16px; color: #444; }
.dbi-checks li.warn .n { color: #8a5a00; }
.dbi-more summary { cursor: pointer; font-size: 20px; }
.dbi-more[open] summary { margin-bottom: 8px; }
@media (max-width: 900px) {
  .dbi-checks li { grid-template-columns: 22px minmax(0, 1fr); }
  .dbi-checks li .d { grid-column: 2; }
  .dbi-bar { grid-template-columns: 110px minmax(0, 1fr); }
  .dbi-bar .v { grid-column: 2; text-align: left; }
  .dbi-test .n { width: auto; flex: 1; }
}
.dbi-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 900px) { .dbi-2col { grid-template-columns: 1fr; } }

/* ---------- diagnostika výpadku databázy (dbdiag.php) ---------- */
.dd-wrap { display: flex; flex-direction: column; gap: 12px; padding: 12px; max-width: 1400px; margin: 0 auto; }
.dbi-test .skip { opacity: .55; }
.dd-skip { display: inline-block; width: 16px; text-align: center; }
.dd-steps { margin: 0; padding-left: 26px; font-size: 18px; }
.dd-steps li { margin-bottom: 12px; }
.dd-l { margin-bottom: 4px; }
.dd-cmd { display: flex; gap: 8px; align-items: stretch; }
.dd-cmd code { flex: 1; min-width: 0; background: #1e1e1e; color: #8cf08c; border: 3px solid; border-color: #373737 #8b8b8b #8b8b8b #373737;
  padding: 6px 8px; font-family: Consolas, 'Courier New', monospace; font-size: 15px; overflow-wrap: anywhere; }
.dbi-status .btn { white-space: nowrap; flex: 0 0 auto; }

/* ---------- Nastavenia → Údržba (texty stránky údržby, živý náhľad) ---------- */
.ud-auto { flex: 0 0 auto; width: 50px; text-align: center; font-size: 14px; color: #fff; background: #2a6fa8; border: 3px solid #0f3a5a; padding: 2px 0; }
.ud-on { background: #a02a2a; color: #fff; }
.ud-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ud-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.ud-fields .ud-wide { grid-column: 1 / -1; }
.ud-fields textarea { resize: vertical; font-size: 17px; }
.ud-prev { margin-top: 10px; position: relative; min-height: 290px; padding: 22px 16px 40px; border: 3px solid #222; text-align: center;
  background: linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)), url('icons/bg/dirt.png') 0 0 / 40px 40px, #2b1d0f;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font); image-rendering: pixelated; }
.ud-prev .ud-logo { font-size: 30px; color: #ffaa00; margin-bottom: 16px; overflow-wrap: anywhere;
  text-shadow: 3px 3px 0 #3f2a00, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; }
.ud-prev .ud-msg { color: #fff; font-size: 17px; margin-bottom: 9px; text-shadow: 2px 2px 0 #3f3f3f; white-space: pre-line; overflow-wrap: anywhere; }
.ud-prev .ud-bar { width: 80%; height: 12px; border: 2px solid #fff; padding: 2px; margin-bottom: 6px; }
.ud-prev .ud-bar i { display: block; height: 100%; width: 40%; background: #55ff55; }
.ud-prev .ud-st { color: #bdbdbd; font-size: 14px; text-shadow: 1px 1px 0 #000; margin-bottom: 14px; }
.ud-prev .ud-btn { width: 70%; color: #fff; font-size: 16px; padding: 6px 0; background: #6f6f6f; border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #a9a9a9, inset -2px -3px 0 #4a4a4a; text-shadow: 2px 2px 0 #3f3f3f; }
.ud-prev .ud-tip { position: absolute; left: 8px; right: 8px; bottom: 10px; color: #ffff55; font-size: 13px; text-shadow: 1px 1px 0 #3f3f00; }
.ud-tiplist { font-size: 17px; resize: vertical; }
@media (max-width: 900px) {
  .ud-body, .ud-fields { grid-template-columns: 1fr; }
}