/* ============================================================
   LCK – dunkles Industrie-Theme, Schwarz/Rot, harte Kanten
   ============================================================ */
:root{
  color-scheme: dark;
  --bg:#070707;
  --panel:#111111;
  --panel-2:#0b0b0b;
  --line:#2a2a2a;
  --line-hi:#3c3c3c;
  --ink:#ece8e4;
  --muted:#8a827a;
  --red:#c8102e;
  --red-hi:#ff2b40;
  --red-dk:#390510;
  --green:#1f7a3d;
  --green-dk:#0c2a16;
  --font:"Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--ink);
  font:600 16px/1.4 var(--font);
  letter-spacing:.02em;
  min-height:100vh;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background:
    radial-gradient(130% 55% at 50% -10%, rgba(200,16,46,.18), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:460px;margin:0 auto;padding:22px 16px 40px;
  display:flex;flex-direction:column;gap:16px}

/* ---------- Überschriften ---------- */
h1{
  font-size:30px;font-weight:800;letter-spacing:.32em;
  margin:6px 0 2px;text-align:center;text-transform:uppercase;
  color:var(--ink);
  border-top:2px solid var(--red);border-bottom:2px solid var(--red);
  padding:10px 0;
}
h2{
  font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 12px;color:var(--muted);
  border-left:4px solid var(--red);padding-left:10px;
}

/* ---------- Kopfzeile ---------- */
.top{display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.top b{color:var(--ink)}
.logout{color:var(--red-hi);text-decoration:none;border:1px solid var(--line);
  padding:5px 10px}
.logout:active{background:var(--red-dk)}

/* ---------- Platten (keine runden Ecken) ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-top-color:var(--line-hi);
  border-radius:0;
  padding:18px 16px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.03);
}

/* ---------- Eingaben ---------- */
label{display:flex;flex-direction:column;gap:6px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
input{
  padding:13px 12px;border:1px solid var(--line);border-radius:0;
  background:#000;color:var(--ink);font:600 16px var(--mono);
}
input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 1px var(--red)}

/* ---------- Knöpfe ---------- */
.btn{
  appearance:none;border:1px solid var(--line-hi);border-radius:0;
  background:linear-gradient(180deg,#1c1c1c,#121212);
  color:var(--ink);
  font:800 15px var(--font);letter-spacing:.18em;text-transform:uppercase;
  padding:15px 16px;cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.big{font-size:20px;padding:22px;letter-spacing:.24em}

/* Hauptaktion (Öffnen / Anmelden) = rot */
#btnOpen, button[name="login"], .btn.ok{
  background:linear-gradient(180deg,var(--red),#8f0b20);
  border-color:var(--red-hi);color:#fff;
  box-shadow:0 0 18px rgba(200,16,46,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
#btnOpen:disabled{
  background:linear-gradient(180deg,#1a1113,#120b0d);
  border-color:var(--line);box-shadow:none;color:var(--muted);
}
.btn.block{
  background:linear-gradient(180deg,#1c1c1c,#121212);
  border-color:var(--line-hi);color:var(--ink);
}

/* ---------- Statusanzeige ---------- */
.status{
  font-size:16px;font-weight:800;text-align:center;
  letter-spacing:.18em;text-transform:uppercase;
  padding:22px 16px;border-left-width:6px;
}
.status.ok{
  background:var(--green-dk);border-color:var(--line);
  border-left-color:var(--green);color:#7bd99a;
}
.status.block{
  background:var(--red-dk);border-color:var(--line);
  border-left-color:var(--red-hi);color:var(--red-hi);
}

/* ---------- Zeile (Zeitsperre) ---------- */
.row{display:flex;gap:10px}
.row input{flex:1;text-align:center}

/* ---------- Hinweise / Fehler ---------- */
.muted{color:var(--muted);font-size:13px;letter-spacing:.06em;margin:0}
.err{color:var(--red-hi);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;margin:0}

/* ---------- Protokoll ---------- */
.log{list-style:none;margin:0;padding:0;font:500 12px/1.5 var(--mono);
  display:flex;flex-direction:column;gap:0;max-height:50vh;overflow:auto}
.log li{border-bottom:1px solid var(--line);padding:7px 0;color:var(--ink)}
.log li:first-child{color:var(--red-hi)}
.log .t{color:var(--dim,#5a544e);margin-right:8px}
.log b{color:var(--muted);text-transform:uppercase;letter-spacing:.1em}