/* Ultron – Werte aus design/tokens.json */
:root {
  --void: #07070A; --hull: #0E0F13; --plate: #16181E; --seam: #262A33;
  --chrome: #D3D7DE; --steel: #8A909B; --iron: #545A65;
  --core: #FF2B2B; --glow: #FF5A3C; --ember: #7A0B12; --signal: #F2B33D; --pulse: #5BE3B0;
  --r-s: 6px; --r-c: 10px; --fast: 160ms;
  --text: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --display: "Chakra Petch", "Inter", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--void); color: var(--chrome); font: 15px/1.5 var(--text); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h2 { font: 600 13px var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin: 0 0 16px; }
h3 { font: 500 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin: 0 0 8px; }
.mono { font-family: var(--mono); }
.muted { color: var(--steel); }
.error { color: var(--glow); min-height: 1.5em; margin: 0; font-size: 13px; }

input {
  background: var(--plate); color: var(--chrome); border: 1px solid var(--seam); border-radius: var(--r-s);
  padding: 10px 12px; font: inherit; width: 100%; outline: none; transition: border-color var(--fast) ease-out;
}
input:focus { border-color: var(--core); box-shadow: 0 0 0 3px rgba(255,43,43,.15); }
button { font: inherit; cursor: pointer; }
.btn-core {
  background: var(--ember); color: #fff; border: 1px solid var(--core); border-radius: var(--r-s);
  padding: 10px 16px; font-weight: 600; white-space: nowrap; transition: background var(--fast) ease-out, box-shadow var(--fast) ease-out;
}
.btn-core:hover { background: #9a0f18; box-shadow: 0 0 16px rgba(255,43,43,.35); }
.btn-ghost { background: none; border: 1px solid var(--seam); color: var(--steel); border-radius: var(--r-s); padding: 8px 12px; }
.btn-ghost:hover { color: var(--chrome); border-color: var(--iron); }
.small { padding: 4px 8px; font-size: 12px; }

/* Anmeldung */
.login { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px 16px; }
.kern-login { width: 180px; height: 180px; }
.wordmark { font: 600 28px var(--display); letter-spacing: .4em; margin: 0 0 16px; padding-left: .4em; }
.login-form { display: grid; gap: 12px; width: min(340px, 100%); }
.login-form label { display: grid; gap: 6px; font-size: 12px; color: var(--steel); letter-spacing: .06em; }

/* Gerüst */
.shell { display: grid; grid-template-columns: 220px 1fr; height: 100%; }
.rail { background: var(--hull); border-right: 1px solid var(--seam); display: flex; flex-direction: column; padding: 20px 12px; gap: 2px; }
.rail-brand { font: 600 15px var(--display); letter-spacing: .4em; color: var(--chrome); padding: 4px 12px 20px; }
.rail > button {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--steel);
  text-align: left; padding: 9px 12px; border-radius: var(--r-s); transition: color var(--fast), background var(--fast);
}
.rail > button:hover { color: var(--chrome); background: var(--plate); }
.rail > button.active { color: var(--chrome); background: var(--plate); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--iron); }
.rail > button.active .dot { background: var(--core); box-shadow: 0 0 8px var(--core); }
.rail-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 0; }
.status { font: 12px var(--mono); color: var(--iron); }
.status.online { color: var(--pulse); }
.status.syncing { color: var(--steel); }
.status.error { color: var(--signal); }

main { overflow: auto; }
.panel { padding: 32px; max-width: 880px; }

/* Kern */
.kern-panel { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; }
.kern-stage { display: grid; place-items: center; padding: 8px 0 16px; }
.kern { width: 260px; height: 260px; display: block; }
.chat { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.msg { max-width: 80%; padding: 10px 14px; border-radius: var(--r-c); white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--plate); border: 1px solid var(--seam); }
.msg.ultron { align-self: flex-start; color: var(--chrome); border-left: 2px solid var(--core); border-radius: 0; padding-left: 14px; }
.chat-form, .row { display: flex; gap: 8px; }

/* Heute */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.card { background: var(--hull); border: 1px solid var(--seam); border-radius: var(--r-c); padding: 16px; }
.card p { margin: 0; }
.big { font-size: 32px; color: var(--chrome); }

/* Aufgaben */
.todo-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--seam); }
.todo-list li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--seam); }
.todo-list li.done .title { color: var(--iron); text-decoration: line-through; }
.todo-list .title { flex: 1; overflow-wrap: anywhere; }
.check {
  width: 18px; height: 18px; border: 1px solid var(--iron); border-radius: 4px; background: none; padding: 0; flex: none;
}
.done .check { background: var(--ember); border-color: var(--core); color: #fff; font-size: 12px; line-height: 1; }
.done .check::after { content: "✓"; }
.del { background: none; border: 0; color: var(--iron); font-size: 18px; line-height: 1; padding: 4px 8px; }
.del:hover { color: var(--glow); }
.empty { margin-top: 24px; }

@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rail { order: 2; flex-direction: row; overflow-x: auto; border-right: 0; border-top: 1px solid var(--seam); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .rail-brand, .dot { display: none; }
  .rail > button { flex: 1 1 0; justify-content: center; padding: 8px 2px; font-size: 12px; }
  /* Status und Abmelden oben rechts, die untere Leiste hat keinen Platz dafür */
  .rail-foot { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 12px; gap: 8px; padding: 0; margin: 0; z-index: 1; }
  input { font-size: 16px; } /* unter 16px zoomt Safari auf dem iPhone beim Tippen hinein */
  .panel { padding: 20px 16px; }
  .kern { width: 180px; height: 180px; }
  .msg { max-width: 92%; }
}