/* Functional placeholder styling. Real design comes later (Lennart). */
:root {
  --ink: #0E0E14;
  --accent: #EFBD30;
  --canvas: #E4E4EC;
  --surface: #F8F9FA;
  --muted: #55555F;
  --danger: #A3261F;
  --line: #C9C9D4;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.5 var(--font-sans); }
header.bar { display: flex; gap: 1rem; align-items: center; padding: .75rem 1.5rem; background: var(--ink); color: var(--surface); }
header.bar a, header.bar button { color: var(--surface); }
header.bar .grow { flex: 1; }
main { max-width: 56rem; margin: 2rem auto; padding: 0 1.5rem; }
h1 { font-size: 1.75rem; line-height: 1.1; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; line-height: 1.2; margin: 2rem 0 .5rem; }
.panel { background: var(--surface); border: 1px solid var(--line); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.panel.attention { border-left: 6px solid var(--accent); }
.panel.internal { border-left: 6px solid var(--danger); }
.meta, label small { font: .8rem/1.2 var(--font-mono); color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); }
input, select, textarea { width: 100%; padding: .6rem; font: inherit; border: 1px solid var(--ink); background: #fff; }
button { padding: .6rem 1rem; font: inherit; background: var(--accent); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; min-height: 44px; }
header.bar button { background: transparent; border-color: var(--surface); }
.error { color: var(--danger); }
.flash { background: var(--accent); padding: .75rem 1rem; margin-bottom: 1rem; }
form.inline { display: inline; }
code { font-family: var(--font-mono); word-break: break-all; }
.pre { white-space: pre-wrap; }
select.auto { width: auto; }
.qr { margin: 1rem 0; }
.qr svg { display: block; width: 200px; height: 200px; }