:root {
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans, system-ui, sans-serif);
}

.app-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.topbar, .panel, .column, .card {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
}

.topbar, .panel { padding: 1rem; }
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}
.eyebrow, .subtitle, .message { color: hsl(var(--muted-foreground)); }
.eyebrow { margin: 0 0 .35rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
h1, h2, p { margin: 0; }
.subtitle { margin-top: .35rem; }
.board { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.column { padding: 1rem; min-height: 18rem; }
.cards { display: grid; gap: .75rem; margin-top: .75rem; }
.card { padding: .9rem; background: hsl(var(--popover)); }
.card header { display: flex; justify-content: space-between; gap: .75rem; align-items: start; }
.card h3 { font-size: 1rem; margin: 0; }
.meta { font-size: .85rem; color: hsl(var(--muted-foreground)); margin-top: .4rem; }
.card p { margin-top: .55rem; color: hsl(var(--foreground)); white-space: pre-wrap; }
form { display: grid; gap: .75rem; margin-top: .75rem; }
label { display: grid; gap: .35rem; font-size: .95rem; }
input, textarea, select, button {
  font: inherit;
  color: inherit;
}
input, textarea, select {
  width: 100%;
  border: 1px solid hsl(var(--border-input));
  border-radius: 0.75rem;
  background: transparent;
  padding: .75rem .85rem;
}
.grid, .actions { display: flex; gap: .75rem; }
.grid > *, .actions > * { flex: 1; }
button {
  min-height: 2.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: transparent;
  cursor: pointer;
}
.primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.ghost { background: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.actions-inline { display: flex; gap: .5rem; margin-top: .75rem; }
.actions-inline button { flex: 1; }
.pill { display: inline-flex; padding: .2rem .5rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; font-size: .75rem; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } .topbar, .actions, .grid { flex-direction: column; } }