:root{
  --bg:#0a0e14; --panel:#11161f; --panel2:#0d1219; --line:#1f2a3a;
  --gold:#e8b648; --gold2:#f5d97e; --green:#2ecc71; --red:#e74c3c;
  --txt:#dfe6ee; --muted:#7a8799;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:14px/1.45 'Segoe UI',system-ui,sans-serif}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:12px}
.msg{min-height:18px;color:var(--gold);font-size:13px;margin-top:8px}

.brand{font-size:26px;font-weight:800;letter-spacing:2px;color:var(--gold2)}
.brand span{color:#5f6b7d}
.brand.sm{font-size:18px}
.brand em{font-style:normal;font-size:12px;color:var(--red);letter-spacing:1px}

.view{max-width:980px;margin:0 auto;padding:20px}
#view-auth{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px}
.auth-wrap{display:flex;align-items:center;gap:34px;width:100%;max-width:860px}
.hero{flex:1;min-width:0;border-radius:16px;overflow:hidden;
  border:1px solid #3a2c10;box-shadow:0 0 40px #e8b64822,0 8px 32px #000a}
.hero img{display:block;width:100%;height:auto}
.auth-card{flex:0 0 340px;text-align:center}

/* mobile: hero jako banner nad kartą */
@media (max-width:899px){
  .auth-wrap{flex-direction:column;gap:16px;max-width:420px}
  .hero{flex:none;width:100%;max-height:38vh}
  .hero img{width:100%;height:38vh;object-fit:cover;object-position:center 30%}
  .auth-card{flex:none;width:100%}
}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px}
.sect{margin:20px 0 8px;font-size:15px;color:var(--gold);letter-spacing:1px}

.topbar{display:flex;align-items:center;gap:14px;padding:10px 0 18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.topbar .btn{margin-left:auto}

.tabs{display:flex;gap:6px;margin:14px 0}
.tab{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
     padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:600;letter-spacing:.5px}
.tab.active{color:var(--gold2);border-color:var(--gold)}

input,select{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:10px 12px;border-radius:8px;margin:5px 0;font-size:14px}
input:focus,select:focus{outline:none;border-color:var(--gold)}
.row{display:flex;gap:8px}.row>*{flex:1}
.row .btn{flex:0 0 auto;min-width:110px}

.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600;letter-spacing:.5px}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1408;border:none}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn.ghost{background:transparent}
.btn.tiny{padding:4px 10px;font-size:12px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.tile label{display:block;font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.tile .val{font-size:24px;font-weight:800;margin-top:6px}
.val.gold{color:var(--gold2)}.val.green{color:var(--green)}

.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:10px}
.tbl th{text-align:left;color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  padding:8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid var(--panel);vertical-align:top;word-break:break-word;max-width:280px}
.tbl tr:hover td{background:#ffffff08}
.key{display:block;background:var(--panel2);padding:10px;border-radius:8px;
  word-break:break-all;color:var(--green);font-size:13px}
.badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}
.badge.on{background:#2ecc7122;color:var(--green)}
.badge.off{background:#e74c3c22;color:var(--red)}

.pager{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:8px}
.pager .btn{min-width:30px}
.pager .btn[disabled]{opacity:.35;cursor:default}
.btn.primary{background:var(--gold);color:#1a1206}

/* ---------- responsywność ---------- */
.tblw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblw .tbl{margin-bottom:0}
input.num{width:74px;min-width:58px;padding:6px 8px;margin:0}
@media (max-width:640px){
  .view{padding:12px}
  .topbar{flex-wrap:wrap;gap:8px;padding-bottom:12px}
  .topbar .brand.sm{width:100%}
  .tabs{flex-wrap:wrap}
  .tabs .tab{flex:1;text-align:center;padding:10px 8px}
  .row{flex-direction:column}
  .row .btn{width:100%;min-width:0}
  .card{padding:12px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile{padding:10px}
  .tile .val{font-size:19px}
  .tbl{font-size:12px}
  .tbl th,.tbl td{padding:6px;max-width:none}
  input.num{width:64px}
  input,select{font-size:16px}   /* iOS: brak auto-zoom przy fokusie */
  .key{font-size:12px}
  code{word-break:break-all}
}