:root{
  --bg:#0c1118; --panel:#141c26; --panel2:#1a2430; --line:#26323f;
  --fg:#e9eef5; --muted:#8b9aab; --accent:#4aa8ff; --ok:#43c98b; --warn:#ffc45b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:linear-gradient(180deg,#101823 0%,var(--bg) 55%);
  color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;padding:24px 18px 40px;max-width:1150px;margin:0 auto;
}
header h1{font-size:1.55rem;letter-spacing:-.02em}
header p{color:var(--muted);font-size:.9rem;margin-top:2px}
main{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
@media (max-width:780px){main{grid-template-columns:1fr}}
.spalte{display:flex;flex-direction:column;gap:8px}
.kopf{display:flex;align-items:center;gap:10px;min-height:34px}
select{
  background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;font-size:.88rem;flex:1;max-width:280px;min-width:0;
}
textarea{
  background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:14px;
  padding:14px;min-height:280px;resize:vertical;font:inherit;line-height:1.5;
}
textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea[readonly]{background:var(--panel2)}
.fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}
.knoepfe{display:flex;gap:8px}
button{
  border-radius:9px;padding:8px 13px;font-size:.83rem;cursor:pointer;border:1px solid var(--line);
  background:var(--panel2);color:var(--fg);
}
button.primär{background:var(--accent);color:#04121f;border-color:var(--accent);font-weight:600}
button:disabled{opacity:.5;cursor:default}
button:hover:not(:disabled){filter:brightness(1.12)}
.ghost{background:transparent}
.kbd-hint{font-size:.7rem;font-weight:400;opacity:.65;margin-left:6px;white-space:nowrap}
.erkannt,.engine{font-size:.76rem;color:var(--muted)}
#status.aktiv{color:var(--accent)}
#status.fehler{color:#ff8f9a}
.verlauf{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.verlauf .kopf{justify-content:space-between}
.verlauf h2{font-size:.95rem;font-weight:600}
.verlauf ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.verlauf li{
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  font-size:.82rem;cursor:pointer;color:var(--muted);
}
.verlauf li:hover{border-color:var(--accent)}
.verlauf li b{color:var(--fg);font-weight:500;display:block;margin-bottom:2px}
footer{margin-top:28px;color:var(--muted);font-size:.75rem;border-top:1px solid var(--line);padding-top:12px}