:root{
    --bg:#0f1216; --panel:#161b22; --line:#242c37; --ink:#e6edf3; --dim:#8b98a5;
    --acc:#3b82f6; --ok:#3fb950; --warn:#d29922; --bad:#f85149; --chip:#1f2733;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
       font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
  header{display:flex;align-items:baseline;gap:16px;padding:14px 22px;
         border-bottom:1px solid var(--line);background:var(--panel)}
  .brand{font-weight:650;letter-spacing:.2px}
  .brand span{font-weight:400;color:var(--dim);margin-left:6px}
  .hint{color:var(--dim);font-size:12.5px}
  main{display:grid;grid-template-columns:290px 1fr;height:calc(100vh - 53px)}
  aside{border-right:1px solid var(--line);background:var(--panel);overflow:auto}
  .aside-head{display:flex;align-items:center;justify-content:space-between;
              padding:14px 16px 10px}
  .aside-head h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim)}
  .new{background:var(--acc);color:#fff;border:0;border-radius:6px;padding:5px 10px;
       font-size:12.5px;font-weight:550;cursor:pointer}
  .orders{list-style:none;margin:0;padding:0 8px 8px}
  .order{width:100%;text-align:left;background:transparent;border:0;color:inherit;
         padding:9px 10px;border-radius:7px;cursor:pointer;display:block}
  .order:hover{background:#1c2430}
  .order.active{background:#1d2b45;box-shadow:inset 2px 0 0 var(--acc)}
  .order-name{display:block;font-weight:520}
  .order-meta{display:block;color:var(--dim);font-size:12px;margin-top:2px}
  em{font-style:normal;padding:1px 6px;border-radius:99px;font-size:11px;margin-left:6px}
  .dot-ok{background:rgba(63,185,80,.15);color:var(--ok)}
  .dot-run{background:rgba(59,130,246,.15);color:#79b8ff}
  .dot-wait{background:var(--chip);color:var(--dim)}
  .dot-bad{background:rgba(248,81,73,.15);color:var(--bad)}
  section{padding:20px 24px;overflow:auto}
  .order-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
  .order-head h2{margin:0;font-size:19px}
  .folder{color:var(--dim);font-size:12.5px;font-family:ui-monospace,SFMono-Regular,monospace}
  .drop{border:1.5px dashed #33404f;border-radius:10px;background:#12171e;
        padding:22px;text-align:center;margin-bottom:18px}
  .drop-icon{display:block;font-size:22px;color:var(--dim);margin-bottom:6px}
  .drop-title{display:block;font-weight:550;margin-bottom:4px}
  .drop-sub{display:block;color:var(--dim);font-size:12.5px;max-width:520px;margin:0 auto}
  .drop.over{border-color:var(--acc);background:var(--chip)}
  .drop.busy{pointer-events:none;opacity:.7}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  h3{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);
     margin:0 0 9px}
  table{width:100%;border-collapse:collapse}
  td{padding:6px 8px;border-bottom:1px solid #1d242e;vertical-align:top}
  .kind{width:88px}
  .kind span{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--chip);color:var(--dim)}
  .kind .k-formatka{background:rgba(59,130,246,.16);color:#79b8ff}
  .kind .k-siatki{background:rgba(163,113,247,.16);color:#c297ff}
  .fname{font-size:13px}
  .obj{display:block;color:var(--dim);font-size:11.5px;font-family:ui-monospace,monospace}
  .st{width:74px}
  .st span{font-size:11px;padding:2px 7px;border-radius:5px}
  .s-done{background:rgba(63,185,80,.15);color:var(--ok)}
  .s-run{background:rgba(59,130,246,.15);color:#79b8ff}
  .s-queued{background:var(--chip);color:var(--dim)}
  .s-bad{background:rgba(248,81,73,.15);color:var(--bad)}
  .tlog{display:block;color:var(--dim);font-size:11.5px}
  .events{background:#12171e;border:1px solid var(--line);border-radius:9px;
          padding:12px 14px;max-height:420px;overflow:auto}
  .ev{display:flex;gap:9px;padding:6px 0;border-bottom:1px solid #1a2029;font-size:13px}
  .ev:last-child{border-bottom:0}
  .ev time{color:#5d6b7a;font-size:11.5px;font-family:ui-monospace,monospace;flex:0 0 42px}
  .ev.err .msg{color:#ffb3ae}
  .ev.warn .msg{color:#e3c07b}
  .ev .msg strong{font-weight:600}
  .ev .sugg{display:block;margin-top:3px;color:var(--dim);font-size:12px}
  .ev .sugg code{background:var(--chip);padding:1px 5px;border-radius:4px;
                 font-family:ui-monospace,monospace;font-size:11.5px}
  .live{display:inline-flex;align-items:center;gap:5px;color:var(--dim);font-size:11.5px;
        margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0}
  .pulse{width:6px;height:6px;border-radius:99px;background:var(--ok)}
  .head-row{display:flex;align-items:center}
  #offline{background:var(--bad);color:#fff;text-align:center;padding:6px;font-size:12.5px}
  /* Pole nazwy zlecenia pojawia się dopiero po kliknięciu — stan spoczynku nagłówka ma
     wyglądać dokładnie jak zatwierdzona makieta, czyli jeden przycisk. Przełącznikiem jest
     klasa na rodzicu, a nie atrybut `hidden`: `hidden` przegrywa z `display:flex`. */
  #new-order-form{display:none;gap:6px;flex:1}
  .aside-head.adding #new-order-form{display:flex}
  .aside-head.adding #new-order{display:none}
  /* Kropka przy wskaźniku „online/offline" — czerwona, gdy panel stracił serwer. */
  body.offline .pulse{background:var(--bad)}
  /* Ekran logowania i odmowy. Kafel wzorem `.events`: tło #12171e, obwódka var(--line),
     promień 9px. Przycisk dziedziczy `.new` z makiety. */
  .gate{display:flex;align-items:center;justify-content:center;padding:40px 16px}
  .gate-box{background:#12171e;border:1px solid var(--line);border-radius:9px;
            padding:24px;max-width:440px}
  .gate-box h1{font-size:19px;margin:0 0 10px;color:var(--ink)}
  /* Selektor elementu w `.gate-box h1` (specyficzność 0,1,1) bije gołe `.gate-bad`
     (0,1,0) — bez `.gate-box` z przodu nagłówek odmowy zostałby w kolorze `--ink`
     zamiast `--bad`. Złapane dopiero w przeglądarce (krok 8), nie przez testy treści. */
  .gate-box h1.gate-bad{color:var(--bad)}
  .gate-note{font-size:12.5px;color:var(--dim);margin:10px 0 0;line-height:1.5}
  /* Link bez klasy w makiecie brief'u dziedziczyłby domyślny niebieski przeglądarki
     (#0000EE), obcy wobec `--acc`. Ten sam wzorzec co `.account a` niżej. */
  .gate-note a{color:var(--acc)}
  .gate-go{display:inline-block;margin-top:14px;text-decoration:none}
  /* Pasek konta w nagłówku — ten sam rozmiar i kolor co `.hint`. */
  .account{margin-left:auto;font-size:12.5px;color:var(--dim)}
  .account a{color:var(--acc)}