/* Dziki Gon - panel. Kolory z grafik (assets/): po lewej neon AI (cyjan, fiolet, magenta),
   po prawej Dziki Gon (lód, stal, żar). Bez czcionek i skryptów z innych domen. */
:root {
  --bg: #07090d;
  --bg-2: #0d1118;
  --surface: #121722;
  --surface-2: #171d2a;
  --border: #252d3c;
  --text: #e4e8ef;
  --muted: #8a94a3;          /* stal */
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --magenta: #c026d3;
  --ice: #a5d8ff;
  --ember: #ff6a2b;
  --fire: #f59e0b;
  --ok: #34d399;
  --radius: 10px;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 15px/1.5 var(--sans); color: var(--text);
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(139, 92, 246, .14), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(255, 106, 43, .10), transparent 55%),
    linear-gradient(var(--bg), var(--bg-2));
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--ice); text-decoration: underline; }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
h1 { font-size: 1.6rem; margin: .2rem 0 1rem; background: linear-gradient(90deg, var(--ice), var(--cyan) 40%, var(--violet));
     -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: 1rem; margin: 0 0 .75rem; color: var(--ice); }
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.warn { color: var(--ember); }
.break { word-break: break-all; }

/* ── Nagłówek ── */
.top {
  display: flex; align-items: center; gap: 1.25rem; padding: .6rem 1.25rem;
  background: rgba(7, 9, 13, .85); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 0 rgba(34, 211, 238, .15), 0 8px 30px rgba(0, 0, 0, .4);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none !important; }
.brand img { display: block; height: 48px; width: auto; border-radius: 6px; box-shadow: 0 0 14px rgba(139, 92, 246, .35); }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; letter-spacing: .14em; }
.brand-name .ai { color: transparent; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
                  -webkit-background-clip: text; background-clip: text; }
.brand-name .gon { color: #c9d1dc; text-shadow: 0 0 8px rgba(165, 216, 255, .6), 0 0 18px rgba(255, 106, 43, .35); }
.menu { display: flex; gap: .2rem; flex-wrap: wrap; flex: 1; }
.menu a { color: var(--muted); padding: .35rem .7rem; border-radius: 6px; font-size: .9rem; text-decoration: none; }
.menu a:hover { color: var(--text); background: var(--surface); }
.menu a.active { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--cyan); }
.logout { margin: 0; }
.account { color: var(--muted); font-size: .85rem; }
.account.active, .account:hover { color: var(--ice); }

.page { width: 100%; max-width: 1280px; margin: 0 auto; padding: 1.25rem; flex: 1; }
.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 1rem; border-top: 1px solid var(--border); }

/* ── Hero (pulpit) ── */
.hero { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem;
        border: 1px solid var(--border); }
.hero img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: center 35%; }
.hero::after { content: ""; position: absolute; inset: 0;
               background: linear-gradient(0deg, rgba(7, 9, 13, .95) 0%, rgba(7, 9, 13, .35) 55%, rgba(7, 9, 13, .15) 100%); }
.hero-text { position: absolute; left: 1.5rem; bottom: 1rem; z-index: 1; max-width: 640px; }
.hero-text h1 { font-size: 2rem; margin: 0; }
.hero-text p { margin: .25rem 0 0; color: #c9d1dc; }

/* ── Karty ── */
.grid.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.card { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; position: relative; }
.grid .card { margin-bottom: 0; }
.card.ai { border-color: rgba(139, 92, 246, .45); box-shadow: 0 0 0 1px rgba(34, 211, 238, .06), 0 0 24px rgba(139, 92, 246, .12); }
.card.ember { border-color: rgba(255, 106, 43, .4); box-shadow: 0 0 24px rgba(255, 106, 43, .08); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .25rem 0; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: .2rem 0; border-bottom: 1px dashed var(--border); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.stats div { display: flex; flex-direction: column; }
.stats b { font-family: var(--serif); font-size: 1.8rem; color: var(--ice); line-height: 1.1; }
.stats b.warn { color: var(--ember); }
.stats span { color: var(--muted); font-size: .8rem; }

/* ── Tabele ── */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: .78rem; text-transform: uppercase;
     letter-spacing: .06em; border-bottom: 1px solid var(--border); padding: .45rem .5rem; }
td { border-bottom: 1px solid rgba(37, 45, 60, .6); padding: .5rem; vertical-align: top; }
tr:hover td { background: rgba(34, 211, 238, .03); }
tr.off td { opacity: .5; }

/* ── Znaczniki statusów ── */
.tag { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .75rem; font-weight: 600;
       border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.tag.ok, .tag.sent { color: var(--ok); border-color: rgba(52, 211, 153, .4); }
.tag.error, .tag.failed { color: var(--ember); border-color: rgba(255, 106, 43, .5); box-shadow: 0 0 8px rgba(255, 106, 43, .25); }
.tag.running, .tag.pending, .tag.ice { color: var(--ice); border-color: rgba(165, 216, 255, .4); }
.tag.skipped { color: var(--violet); border-color: rgba(139, 92, 246, .4); }
.tag.baseline { color: var(--muted); }
.tag.ember { color: var(--fire); border-color: rgba(245, 158, 11, .4); }

/* ── Formularze ── */
input, select, button { font: inherit; }
input:not([type=checkbox]):not([type=radio]), select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: .4rem .55rem;
}
input:focus, select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
input[type=checkbox], input[type=radio] { accent-color: var(--violet); }
.stack { display: flex; flex-direction: column; gap: .75rem; max-width: 640px; }
.stack label { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); font-size: .85rem; }
.stack label.check { flex-direction: row; align-items: center; color: var(--text); font-size: .95rem; }
.inline { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .25rem 0 .6rem; }
.inline.wide input[name=note] { flex: 1; min-width: 140px; }
label.check { display: inline-flex; align-items: center; gap: .35rem; color: var(--text); }
fieldset { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
legend { color: var(--ice); font-family: var(--serif); letter-spacing: .05em; padding: 0 .3rem; }

.btn { display: inline-block; cursor: pointer; border-radius: 6px; padding: .42rem .9rem; font-weight: 600;
       border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none !important; }
.btn:hover { border-color: var(--cyan); }
.btn.primary { border: 0; color: #fff; background: linear-gradient(90deg, #0e7490, var(--violet) 60%, var(--magenta));
               box-shadow: 0 0 14px rgba(139, 92, 246, .35); }
.btn.primary:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; color: var(--ember); border-color: rgba(255, 106, 43, .5); }
.btn.danger:hover { background: rgba(255, 106, 43, .12); }
.btn.small { padding: .2rem .6rem; font-size: .82rem; }

details.danger > summary { cursor: pointer; color: var(--muted); font-size: .82rem; }
details.danger[open] > summary { color: var(--ember); }

.flash { padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--border); background: var(--surface); }
.flash.ok { border-color: rgba(34, 211, 238, .4); }
.flash.error { border-color: rgba(255, 106, 43, .55); color: #ffd2bf; }

.filters { display: flex; gap: .3rem; margin-bottom: .8rem; flex-wrap: wrap; }
.filters a { padding: .25rem .7rem; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); font-size: .85rem; text-decoration: none; }
.filters a.active { color: var(--text); border-color: var(--violet); box-shadow: 0 0 10px rgba(139, 92, 246, .3); }

details.note { border-bottom: 1px solid var(--border); padding: .5rem 0; }
details.note > summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.note-title { flex: 1; }
pre.snapshot { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--border);
               border-radius: 8px; padding: .8rem; font: .85rem/1.45 var(--mono); color: #cfd6e0; max-height: 70vh; overflow: auto; }
pre.summary { white-space: pre-wrap; margin: 0; font: .8rem/1.4 var(--mono); color: var(--muted); }

/* pole-pułapka na boty (formularz logowania) - poza ekranem, nie display:none (część botów to pomija) */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Logowanie: grafika nagłówka (bitwa AI z Dzikim Gonem) na całe tło, przyciemniona ── */
.login-page { flex: 1; display: grid; place-items: center; padding: 1.5rem; position: relative; }
.login-bg { position: fixed; inset: 0; z-index: 0; }
.login-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.1); }
.login-bg::after { content: ""; position: absolute; inset: 0;
                   background: radial-gradient(ellipse at center, rgba(7, 9, 13, .55) 0%, rgba(7, 9, 13, .85) 70%, rgba(7, 9, 13, .95) 100%); }
.login-body .foot { background: rgba(7, 9, 13, .7); border-top-color: rgba(37, 45, 60, .6); position: relative; z-index: 1; }
.login-card { position: relative; z-index: 1; width: min(460px, 100%); background: rgba(13, 17, 24, .82); backdrop-filter: blur(4px); border: 1px solid rgba(139, 92, 246, .4);
              border-radius: 14px; padding: 1.4rem; box-shadow: 0 0 40px rgba(139, 92, 246, .18), 0 0 60px rgba(255, 106, 43, .06); }
.login-logo { width: 100%; height: auto; border-radius: 8px; margin-bottom: 1rem; }
.login-card .stack { max-width: none; }

@media (max-width: 1000px) {
  .grid.cards { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; }
  .menu { order: 3; flex-basis: 100%; }
}
@media (max-width: 700px) {
  .hero img { height: 170px; }
  table, thead, tbody, tr, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--border); padding: .4rem 0; }
  td { border: 0; padding: .2rem 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }