:root {
  --ground:#0A0F14; --panel:#111922; --raise:#16202B; --line:#1E2A36;
  --ink:#E6EDF3; --muted:#7D8FA1; --dim:#4E5D6B;
  --accent:#FF6B35; --ok:#2ED3A7; --warn:#F5C518; --crit:#FF4D6D;
  --glow:rgba(255,107,53,.14);
  --sans: ui-sans-serif, -apple-system, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --s1:.35rem; --s2:.7rem; --s3:1.1rem; --s4:1.8rem; --s5:2.8rem;
}
@media (prefers-color-scheme: light) {
  :root {
    --ground:#EEF1F4; --panel:#FFF; --raise:#F7F9FA; --line:#DBE1E7;
    --ink:#101820; --muted:#566574; --dim:#8B99A6;
    --accent:#D2500F; --ok:#08886C; --warn:#96700A; --crit:#C8203F;
    --glow:rgba(210,80,15,.10);
  }
}
:root[data-theme="light"] {
  --ground:#EEF1F4; --panel:#FFF; --raise:#F7F9FA; --line:#DBE1E7;
  --ink:#101820; --muted:#566574; --dim:#8B99A6;
  --accent:#D2500F; --ok:#08886C; --warn:#96700A; --crit:#C8203F;
  --glow:rgba(210,80,15,.10);
}
:root[data-theme="dark"] {
  --ground:#0A0F14; --panel:#111922; --raise:#16202B; --line:#1E2A36;
  --ink:#E6EDF3; --muted:#7D8FA1; --dim:#4E5D6B;
  --accent:#FF6B35; --ok:#2ED3A7; --warn:#F5C518; --crit:#FF4D6D;
  --glow:rgba(255,107,53,.14);
}

* { box-sizing: border-box; }

/* Atrybut hidden działa przez `display:none` w arkuszu przeglądarki, a każda
   reguła z tego pliku ją przebija — wystarczy `display:grid` na tym samym
   elemencie i `hidden` przestaje cokolwiek znaczyć. Ta reguła przywraca mu
   pierwszeństwo raz dla całej strony. */
[hidden] { display: none !important; }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.wrap { max-width:1180px; margin:0 auto; padding:var(--s4) var(--s3) var(--s5); }

/* --- Logowanie --- */
.gate { position:fixed; inset:0; display:grid; place-items:center; background:var(--ground); z-index:50; }
.gate-box { display:grid; gap:var(--s2); width:min(300px, calc(100vw - 3rem)); }
.gate-box input, .gate-box button {
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:.6rem .8rem; border-radius:2px; font:inherit;
}
.gate-box button { border-color:var(--accent); color:var(--accent); cursor:pointer; }
.gate-err { color:var(--crit); font-size:.82rem; margin:0; }

/* --- Nagłówek --- */
.top {
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding-bottom:var(--s3); border-bottom:1px solid var(--line); margin-bottom:var(--s4);
}
.mark { font-family:var(--mono); font-size:1.05rem; letter-spacing:.22em; font-weight:600;
        color:var(--accent); text-transform:uppercase; }
.mark span { color:var(--dim); letter-spacing:.1em; }
.top .spacer { flex:1 1 auto; }
.clock { font-family:var(--mono); font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.ghost {
  background:none; border:1px solid var(--line); color:var(--muted);
  padding:.3rem .7rem; border-radius:2px; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
}
.ghost:hover { border-color:var(--accent); color:var(--accent); }

/* --- Siatka --- */
.grid { display:grid; grid-template-columns:1fr; gap:var(--s4); }
@media (min-width:900px) { .grid { grid-template-columns:1.05fr 1fr; gap:var(--s5); } }
/* Elementy siatki domyślnie nie kurczą się poniżej swojej zawartości.
   Bez tego długa nazwa hosta rozpycha kolumnę i strona jedzie w bok. */
.grid > * { min-width:0; }

h2 {
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); font-weight:600; margin:0 0 var(--s2);
  display:flex; align-items:baseline; gap:var(--s2);
}
h2 .n { color:var(--muted); letter-spacing:.05em; font-variant-numeric:tabular-nums; }
section + section { margin-top:var(--s4); }

/* --- Hosty --- */
.host { border:1px solid var(--line); background:var(--panel); padding:var(--s3);
        margin-bottom:var(--s2); position:relative; min-width:0; overflow:hidden; }
.host::before { content:""; position:absolute; inset:-1px auto -1px -1px; width:2px;
                background:var(--ok); transition:background .4s; }
.host[data-state="warn"]::before { background:var(--warn); }
.host[data-state="crit"]::before { background:var(--crit); }
.host-head { display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
.host-name { font-family:var(--mono); font-size:1rem; font-weight:600; overflow-wrap:anywhere; }
.host-meta { font-size:.78rem; color:var(--dim); min-width:0; overflow-wrap:anywhere; }
.host-err { font-family:var(--mono); font-size:.78rem; color:var(--crit); margin-top:var(--s1);
            overflow-x:auto; }

.bars { display:grid; gap:var(--s1); margin-top:var(--s2); }
/* Etykieta dostaje tyle miejsca, ile realnie potrzebuje, ale nie więcej niż
   9rem — inaczej przy jednej długiej nazwie wszystkie paski byłyby krótkie. */
.bar { display:grid; grid-template-columns:minmax(0,max-content) 1fr 4.2rem;
       align-items:center; gap:var(--s2); }
.bar-l { font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--dim);
         text-transform:uppercase; max-width:9rem;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Na wąskim ekranie nazwa dostaje własny wiersz — mieści się w całości,
   zamiast być przycięta do kilku znaków. */
@media (max-width:620px) {
  .bar { grid-template-columns:1fr auto; grid-template-areas:"label label" "track value";
         row-gap:.25rem; }
  .bar-l { grid-area:label; max-width:none; }
  .bar-t { grid-area:track; }
  .bar-v { grid-area:value; }
}
.bar-t { height:3px; background:var(--line); position:relative; overflow:hidden; }
.bar-f { position:absolute; inset:0 auto 0 0; background:var(--ok);
         transition:width .9s cubic-bezier(.2,.7,.3,1), background .5s; }
.bar-f[data-lvl="warn"] { background:var(--warn); }
.bar-f[data-lvl="crit"] { background:var(--crit); }
.bar-v { font-family:var(--mono); font-size:.78rem; text-align:right;
         font-variant-numeric:tabular-nums; color:var(--muted); }

/* --- Maszyny wirtualne --- */
.vms { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
       gap:1px; background:var(--line); border:1px solid var(--line); }
.vm { background:var(--panel); padding:.5rem .6rem; display:flex; align-items:center; gap:.5rem;
      font-family:var(--mono); font-size:.76rem; min-width:0; }
.vm span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--ok); transition:background .3s; }
.vm[data-s="off"] { color:var(--dim); } .vm[data-s="off"] .dot { background:var(--dim); }
.vm[data-s="warn"] .dot { background:var(--warn); }
.vm[data-s="crit"] { background:var(--raise); }
.vm[data-s="crit"] .dot { background:var(--crit); animation:blip 1.1s steps(1) infinite; }
@keyframes blip { 50% { opacity:.25; } }

/* --- Czujniki --- */
/* Szersze kolumny: nazwy czujników po polsku bywają długie, a ucięte
   w połowie nie niosą już żadnej informacji. */
.sensors { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
           gap:var(--s2) var(--s3); }
.sensor { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);
          border-bottom:1px solid var(--line); padding-bottom:.3rem; min-width:0; }
.sensor .k { font-size:.78rem; color:var(--muted); min-width:0;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sensor .v { font-family:var(--mono); font-size:.82rem; font-variant-numeric:tabular-nums;
             flex:0 0 auto; white-space:nowrap; }
@media (max-width:620px) {
  /* Na telefonie jedna kolumna — nazwa dostaje całą szerokość ekranu. */
  .sensors { grid-template-columns:1fr; }
}
.sensor .v[data-h="yellow"] { color:var(--warn); }
.sensor .v[data-h="red"] { color:var(--crit); }
.empty { color:var(--dim); font-size:.82rem; }

/* --- Rozmowa --- */
.chat { border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; min-height:460px; }
.chat-head { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3);
             border-bottom:1px solid var(--line); }
.pulse { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--accent); position:relative; }
.pulse::after { content:""; position:absolute; inset:-6px; border-radius:50%;
                border:1px solid var(--accent); opacity:0; }
.chat[data-speaking="1"] .pulse::after { animation:ring 1.6s ease-out infinite; }
@keyframes ring { 0% { transform:scale(.5); opacity:.9; } 100% { transform:scale(1.5); opacity:0; } }
.chat-head .who { font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
                  text-transform:uppercase; color:var(--muted); }
.chat-head .st { margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--dim); }

.log { flex:1 1 auto; padding:var(--s3); display:flex; flex-direction:column; gap:var(--s3);
       overflow-y:auto; max-height:min(56vh, 520px); }
.msg { max-width:92%; }
.msg .lbl { font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
            color:var(--dim); margin-bottom:.25rem; }
.msg p { margin:0 0 .5rem; } .msg p:last-child { margin-bottom:0; }
.msg.me { margin-left:auto; text-align:right; }
.msg.me .body { border-right:2px solid var(--line); padding-right:var(--s2); color:var(--muted); }
.msg.ai .body { border-left:2px solid var(--accent); padding-left:var(--s2); }
.msg.sys .body { border-left:2px solid var(--crit); padding:var(--s2); background:var(--raise);
                 font-family:var(--mono); font-size:.8rem; line-height:1.5; }
.msg.sys[data-sev="warning"] .body { border-left-color:var(--warn); }
.msg.sys[data-sev="recovery"] .body { border-left-color:var(--ok); }
.msg.sys[data-sev="info"] .body { border-left-color:var(--dim); }
/* Zdarzenie z aplikacji: relacja, nie awaria — dlatego spokojniejsze
   niż alert i wyraźnie odróżnialne od wypowiedzi Jarvisa. */
.msg.feed { max-width:100%; }
.msg.feed .body { border-left:2px dashed var(--line); padding-left:var(--s2);
                  font-size:.88rem; color:var(--muted); }
.msg.feed .body strong { color:var(--ink); font-weight:600; }
.msg.feed[data-prio="high"] .body { border-left-style:solid; border-left-color:var(--warn); }

.msg.sys .body b { color:var(--crit); font-weight:600; }
.msg.sys[data-sev="warning"] .body b { color:var(--warn); }
.msg.sys[data-sev="recovery"] .body b { color:var(--ok); }

.compose { border-top:1px solid var(--line); padding:var(--s2) var(--s3);
           display:flex; gap:var(--s2); align-items:center; }
.compose input { flex:1 1 auto; background:none; border:none; color:var(--ink); font:inherit; padding:.4rem 0; }
.compose input::placeholder { color:var(--dim); }
.mic { width:34px; height:34px; flex:0 0 34px; border:1px solid var(--line); background:none;
       border-radius:50%; cursor:pointer; color:var(--muted); display:grid; place-items:center; }
.mic:hover { border-color:var(--accent); color:var(--accent); }
.mic[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); background:var(--glow); }

.tools { margin-top:var(--s3); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.tools button { background:none; border:1px solid var(--line); color:var(--ink); padding:.45rem .9rem;
                cursor:pointer; border-radius:2px; font-family:var(--mono); font-size:.76rem; }
.tools button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.tools button:disabled { opacity:.35; cursor:default; }
.spend { font-family:var(--mono); font-size:.72rem; color:var(--dim); font-variant-numeric:tabular-nums; }
/* Wynik diagnostyki — stan czytelny z kształtu, nie tylko z koloru. */
.diag { margin-top:var(--s3); border:1px solid var(--line); background:var(--panel); }
.diag-row { display:grid; grid-template-columns:1.6rem minmax(0,11rem) 1fr; gap:var(--s2);
            align-items:baseline; padding:.5rem var(--s3);
            border-bottom:1px solid var(--line); font-size:.82rem; }
.diag-row:last-child { border-bottom:none; }
.diag-m { font-family:var(--mono); font-weight:600; }
.diag-row[data-s="ok"]  .diag-m { color:var(--ok); }
.diag-row[data-s="err"] .diag-m { color:var(--crit); }
.diag-row[data-s="off"] .diag-m { color:var(--dim); }
.diag-row[data-s="err"] { background:var(--raise); }
.diag-n { font-family:var(--mono); color:var(--ink); overflow-wrap:anywhere; }
.diag-row[data-s="off"] .diag-n { color:var(--muted); }
.diag-d { color:var(--muted); overflow-wrap:anywhere; }
.diag .note { margin:var(--s2) var(--s3); }
@media (max-width:620px) {
  .diag-row { grid-template-columns:1.6rem 1fr; }
  .diag-d { grid-column:2; }
}

.note { margin:var(--s2) 0 0; font-size:.82rem; color:var(--muted); max-width:62ch;
        border-left:2px solid var(--line); padding-left:var(--s2); }
.note[data-state="ok"]  { border-left-color:var(--ok); }
.note[data-state="err"] { border-left-color:var(--crit); color:var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition-duration:.01ms !important; }
}