:root {
  --bg: #050b14; --panel: rgba(8, 18, 28, .82); --panel2: rgba(18, 44, 56, .7); --line: rgba(80, 200, 190, .16);
  --text: #e3eef0; --muted: #8ea7b0;
  /* poświata w rogach – ta sama maska wyznacza, gdzie widać kratkę */
  --corners:
    radial-gradient(ellipse 55% 50% at 0% 0%, #000, transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 100%, #000, transparent 70%),
    radial-gradient(ellipse 35% 35% at 100% 0%, rgba(0,0,0,.55), transparent 70%),
    radial-gradient(ellipse 35% 35% at 0% 100%, rgba(0,0,0,.55), transparent 70%); --accent: #d6b25e; --good: #5ec98a; --bad: #e46a6a;
  --elyos: #7fb8ff; --asmo: #c48bff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.45 system-ui, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(ellipse 55% 50% at 0% 0%, rgba(0, 150, 135, .22), transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 100%, rgba(0, 125, 155, .24), transparent 70%),
    radial-gradient(ellipse 35% 35% at 100% 0%, rgba(0, 120, 140, .12), transparent 70%),
    radial-gradient(ellipse 35% 35% at 0% 100%, rgba(0, 140, 120, .12), transparent 70%)
    var(--bg);
  background-attachment: fixed;
}
/* ledwo widoczna kratka, tylko tam, gdzie jest poświata */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(90, 230, 210, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 230, 210, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: var(--corners); mask-image: var(--corners); }
a { color: var(--accent); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px 12px; margin: 8px 0 28px; }
header h1 { grid-column: 2; text-align: center; }
header > span { grid-column: 2; grid-row: 2; text-align: center; }
header .right { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: 12px; align-items: center; }
h1 { margin: 0; font: 900 34px/1.1 Orbitron, system-ui, sans-serif; color: var(--accent); letter-spacing: 2px; text-transform: uppercase;
  text-shadow: 0 0 18px rgba(214, 178, 94, .35); }
h1 a { color: inherit; text-decoration: none; }
@media (max-width: 640px) { h1 { font-size: 22px; letter-spacing: 1px; } }
header span, .muted-link { color: var(--muted); }
.muted-link { font-size: 13px; text-decoration: none; }
.muted-link:hover { color: var(--text); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px;
  backdrop-filter: blur(6px); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
select option, select optgroup { background: #0b1a24; }
form.add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
select, input, button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
input { min-width: 0; }
button { cursor: pointer; }
button.primary { background: var(--accent); color: #1a1405; border-color: var(--accent); font-weight: 600; }
button.danger:hover { border-color: var(--bad); color: var(--bad); }
button.small { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: wait; }
.msg { width: 100%; font-size: 14px; min-height: 1em; }
.msg.err { color: var(--bad); } .msg.ok { color: var(--good); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 8px 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: 13px; user-select: none; white-space: nowrap; }
th[data-sort] { cursor: pointer; }
tbody tr.clickable { cursor: pointer; } tbody tr.clickable:hover { background: var(--panel2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; object-position: top; background: var(--panel2); flex: none; }
.name { font-weight: 600; }
.sub { color: var(--muted); font-size: 13px; }
.race-1 { color: var(--elyos); } .race-2 { color: var(--asmo); }
.up { color: var(--good); font-size: 12px; } .down { color: var(--bad); font-size: 12px; }
.cp { color: var(--accent); font-weight: 700; }
.owner { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); font-size: 13px; }
.owner-input { width: 140px; padding: 4px 8px; font-size: 13px; }
.empty { color: var(--muted); text-align: center; padding: 30px; }
@media (max-width: 640px) { .hide-sm { display: none; } th, td { padding: 8px 4px; } }

.login { max-width: 340px; margin: 60px auto; display: grid; gap: 10px; }
.login h2 { margin: 0 0 6px; }

dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #08141d; color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.d-head { display: flex; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); position: relative; flex-wrap: wrap; }
.d-head img { width: 140px; height: 180px; object-fit: cover; object-position: top; border-radius: 10px; background: var(--panel2); }
.d-head h2 { margin: 0 0 4px; }
.close { position: absolute; top: 12px; right: 12px; }
.big { display: flex; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.big div b { display: block; font-size: 22px; color: var(--accent); }
.big div span { color: var(--muted); font-size: 13px; }
.d-body { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .d-body { grid-template-columns: 1fr; } }
h3 { margin: 0 0 10px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.stats .v { text-align: right; font-weight: 600; }
.stats .s2 { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin: -2px 0 4px 8px; }
.items { display: grid; gap: 6px; }
.item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.item img { width: 32px; height: 32px; border-radius: 4px; background: var(--panel2); }
.item .slot { color: var(--muted); font-size: 12px; }
.g-Common { color: #cfd5df; } .g-Rare { color: #5ab0ff; } .g-Legend { color: #e9a23b; }
.g-Unique { color: #e8d35a; } .g-Epic { color: #c07bff; } .g-Mythic { color: #ff6b6b; }
.bar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; margin: 3px 0 8px; }
.bar i { display: block; height: 100%; background: var(--accent); }
.d-foot { padding: 12px 20px 20px; display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
svg.spark { width: 100%; height: 80px; }