:root {
  --bg: #f6f4f1;
  --bg-deep: #edeae5;
  --panel: #ffffff;
  --ink: #1b1917;
  --muted: #6f6960;
  --line: #e3ded7;
  --accent: #c2410c;
  --accent-ink: #ffffff;
  --accent-soft: #fdf0e7;
  --good: #2c7a52;
  --good-soft: #e8f4ed;
  --bad: #b3261e;
  --bad-soft: #fdeceb;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgb(20 15 10 / .05), 0 8px 24px -12px rgb(20 15 10 / .18);
  --shadow-lift: 0 2px 6px rgb(20 15 10 / .08), 0 16px 32px -14px rgb(20 15 10 / .28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141311;
    --bg-deep: #0e0d0c;
    --panel: #1d1b19;
    --ink: #ece7e0;
    --muted: #9d968b;
    --line: #332f2a;
    --accent: #e2833c;
    --accent-ink: #1b1512;
    --accent-soft: #2b211a;
    --good: #6cc08b;
    --good-soft: #1a2620;
    --bad: #e2796f;
    --bad-soft: #2a1a19;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .7);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / .5), 0 16px 32px -14px rgb(0 0 0 / .8);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.busy { cursor: progress; }
body.busy .workspace { opacity: .72; }
.workspace { transition: opacity .18s ease; }

main { max-width: 1560px; margin: 0 auto; padding: 1.1rem 1rem 4rem; }

h1 { font-size: 1.5rem; margin: 0 0 .6rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }
h3 { font-size: .95rem; margin: 0; }
a { color: var(--accent); }

/* ---- chrome ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(10px);
}
.brand { font-weight: 700; text-decoration: none; color: var(--ink); letter-spacing: -.02em; }
.topbar nav { display: flex; gap: 1.1rem; }
.topbar nav a {
  text-decoration: none; color: var(--muted); font-size: .9rem;
  padding: .2rem 0; border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.lang-switch { margin-left: auto; display: flex; gap: .25rem; }
.lang-switch a {
  text-decoration: none; color: var(--muted); font-size: .78rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .55rem;
  transition: border-color .15s, color .15s, background .15s;
}
.lang-switch a:hover { color: var(--accent); border-color: var(--accent); }
.lang-switch a.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}

.footer {
  max-width: 1560px; margin: 0 auto; padding: 1rem;
  color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line);
}

/* ---- shell layout ------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.controls { grid-row: 1 / span 3; position: sticky; top: 4.2rem; }
.workspace {
  grid-column: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem;
}
.visuals {
  grid-column: 2;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem;
}
.conflicts-pane { grid-column: 2; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: 1fr; }
  .controls { grid-row: auto; position: static; }
  .workspace, .visuals, .conflicts-pane { grid-column: 1; }
  .workspace, .visuals { grid-template-columns: 1fr; }
}

.pane {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .9rem 1rem 1rem; min-width: 0;
}
.pane-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: .7rem; flex-wrap: wrap;
}
.count {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 0 .5rem; font-size: .8rem; font-weight: 700;
}

/* ---- control panel ----------------------------------------------------- */
.controls-inner {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem; max-height: calc(100vh - 5.5rem); overflow-y: auto;
}
.panel-title { font-size: .95rem; margin-bottom: .7rem; }
.panel-sub {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 1rem 0 .4rem;
}
.field, .field-row label { display: block; font-size: .76rem; color: var(--muted); margin-bottom: .6rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.field-row.compact { grid-template-columns: 1fr 1fr .7fr; }

input, select, button, textarea { font: inherit; color: var(--ink); }
input[type="text"], input[type="url"], input[type="date"], input[type="search"],
input[type="number"], select, input[type="file"] {
  width: 100%; padding: .38rem .5rem; margin-top: .18rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips.scroll { max-height: 170px; overflow-y: auto; padding-right: .2rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; margin: 0;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .22rem .6rem; cursor: pointer; background: var(--bg);
  font-size: .78rem; color: var(--ink); user-select: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.chip:hover { transform: translateY(-1px); }
.chip:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
  font-weight: 600;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip em { color: var(--muted); font-style: normal; font-size: .7rem; }
.chip.static { cursor: default; }
a.chip.filter { text-decoration: none; }
a.chip.filter.on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 600;
}
a.chip.filter.on::after { content: " ×"; opacity: .7; }
.cats a {
  font-size: .66rem; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 4px; padding: 0 .25rem;
}
.cats a:hover { color: var(--accent); border-color: var(--accent); }
.chip small { color: var(--muted); font-size: .68rem; }

button {
  padding: .45rem .8rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
button:hover { border-color: var(--accent); transform: translateY(-1px); }
button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 600;
}
button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.control-actions { display: grid; gap: .45rem; margin-top: 1.1rem; }

/* ---- festival cards ---------------------------------------------------- */
.card-list {
  display: grid; gap: .6rem; max-height: 720px; overflow-y: auto;
  padding-right: .25rem;
}
.fcard {
  position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr);
  gap: .75rem; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; cursor: grab;
  transition: box-shadow .16s, border-color .16s, transform .12s;
}
.fcard:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.fcard.dragging { opacity: .45; cursor: grabbing; }
.fcard.picked { border-color: var(--accent); }
.fcard.picked::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--accent); opacity: .05;
}
.fcard-art, .stay-art {
  display: grid; place-items: center; font-size: 1.6rem;
  min-height: 100%; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .35);
}
.fcard-body { padding: .6rem .6rem .6rem 0; min-width: 0; }
.fcard-body h3 { font-size: .95rem; margin-bottom: .15rem; }
.fcard-body p { margin: .12rem 0; font-size: .8rem; }
.fcard-when strong { font-weight: 600; }
.fcard-where { color: var(--muted); }
.fcard-cats { display: flex; flex-wrap: wrap; gap: .25rem; }
.fcard-cats span {
  font-size: .68rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 0 .3rem;
}
.fcard-meta { color: var(--muted); font-size: .75rem; }
.fcard-add {
  position: absolute; top: .5rem; right: .5rem;
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; line-height: 1;
  background: var(--panel);
}
.fcard.picked .fcard-add {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.empty-note { color: var(--muted); font-size: .87rem; padding: 1rem .2rem; }

/* ---- clashes: two festivals asking for the same days -------------------- */
.fcard.clash { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.fcard-clash {
  color: var(--bad); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Focus dims everything unrelated so the collisions are the only thing
   left standing; it is a hover state, so nothing here survives the mouse. */
body.focusing .fcard.faded, body.focusing .tl-row.faded { opacity: .32; }
body.focusing .fcard.focus { border-color: var(--accent); box-shadow: var(--shadow-lift); }
body.focusing .fcard.linked {
  border-color: var(--bad);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 28%, transparent);
}
.fcard, .tl-row { transition: opacity .14s ease, box-shadow .14s ease; }

.clash-banner {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  justify-content: space-between;
  border: 1px solid var(--bad); background: var(--bad-soft);
  border-radius: var(--radius-sm); padding: .5rem .75rem;
  font-size: .84rem; margin-bottom: .5rem;
}
.clash-resolve {
  font-size: .78rem; padding: .2rem .55rem; margin-left: .5rem;
  vertical-align: baseline;
}
.stay.clash { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.stay-clash { color: var(--bad); font-size: .78rem; margin: .15rem 0 0; }

.switch {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.switch input { margin: 0; }

/* ---- the trip ---------------------------------------------------------- */
.pane-trip.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.dropzone-hint {
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 1.6rem 1rem; text-align: center; color: var(--muted); font-size: .87rem;
}
.trip-summary { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.tile {
  flex: 1 1 84px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .45rem .55rem;
}
.tile span { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.tile label { font-size: .68rem; color: var(--muted); }
.tile.total { border-color: var(--accent); background: var(--accent-soft); }
.tile.total span { color: var(--accent); }

.issues { display: grid; gap: .35rem; margin-bottom: .6rem; }
.issue {
  margin: 0; padding: .45rem .6rem; border-radius: var(--radius-sm);
  font-size: .82rem; border: 1px solid;
}
.issue.error { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.issue.warning { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.trip-list { display: grid; gap: 0; }
.stay {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
}
.stay.partial { border-left: 3px solid var(--accent); }
.stay-body { padding: .55rem .65rem; min-width: 0; }
.stay-head { display: flex; justify-content: space-between; gap: .5rem; align-items: start; }
.stay-head h3 { font-size: .92rem; }
.stay-head .remove {
  padding: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted); font-size: .75rem;
}
.stay-head .remove:hover { color: var(--bad); border-color: var(--bad); }
.stay-when { margin: .2rem 0 .45rem; font-size: .8rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

.segmented { display: flex; flex-wrap: wrap; gap: .25rem; }
.seg {
  padding: .18rem .45rem; font-size: .73rem; border-radius: 6px;
  background: var(--bg); color: var(--muted);
}
.seg em { font-style: normal; opacity: .7; }
.seg.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 600;
}
.seg.on em { opacity: .85; }

.leg { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; }
.leg-line {
  justify-self: center; width: 2px; height: 100%; min-height: 42px;
  background: repeating-linear-gradient(to bottom, var(--accent) 0 5px, transparent 5px 10px);
}
.leg-body {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .45rem .65rem; font-size: .8rem; color: var(--muted);
}
.leg-mode { font-size: 1rem; }
.leg-stats strong { color: var(--ink); }
.leg-mode-select { width: auto; max-width: 100%; font-size: .75rem; padding: .15rem .35rem; margin: 0; }
.leg-note, .slack {
  font-size: .7rem; border: 1px solid var(--line); border-radius: 5px; padding: 0 .3rem;
}
.slack.bad { color: var(--bad); border-color: var(--bad); font-weight: 600; }
.leg.broken .leg-body { color: var(--bad); }
.leg.broken .leg-line { background: var(--bad); }

/* ---- map & timeline ---------------------------------------------------- */
#map {
  height: 460px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--bg-deep);
}
.trip-pin span {
  display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
  border-radius: 50%; font-size: .78rem; border: 2px solid var(--panel);
  box-shadow: var(--shadow);
}
.popup-add {
  margin-top: .4rem; font-size: .75rem; padding: .2rem .45rem;
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

#timeline { display: grid; gap: .22rem; max-height: 430px; overflow-y: auto; }
.tl-row {
  display: grid; grid-template-columns: minmax(90px, 150px) 1fr; gap: .5rem;
  align-items: center; cursor: pointer; border-radius: 5px; padding: .05rem .1rem;
}
.tl-row:hover { background: var(--bg); }
.tl-row.on .tl-label { color: var(--ink); font-weight: 600; }
.tl-label {
  font-size: .74rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-track {
  position: relative; height: 15px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px;
}
.tl-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.tl-bar.picked { top: 1px; bottom: 1px; box-shadow: var(--shadow); }

/* The days a candidate would have to share with the trip, hatched over the
   part of the bar they fall on -- the width is the size of the problem. */
.tl-clash {
  position: absolute; top: 0; bottom: 0; border-radius: 2px;
  background: repeating-linear-gradient(
    -45deg, color-mix(in srgb, var(--bad) 55%, transparent) 0 3px,
    transparent 3px 6px);
  border-left: 1px solid var(--bad); border-right: 1px solid var(--bad);
}
.tl-row.clash .tl-label { color: var(--bad); }
#timeline { position: relative; }
.tl-links {
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none; overflow: visible;
}
.tl-link-band { fill: color-mix(in srgb, var(--bad) 12%, transparent); }
.tl-link-line {
  stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .9;
}
.tl-link-dot { fill: var(--bad); }
body.focusing .tl-row.focus .tl-label { color: var(--accent); font-weight: 700; }

.tl-axis {
  display: grid; grid-template-columns: minmax(90px, 150px) 1fr; gap: .5rem;
  align-items: end; position: sticky; top: 0; z-index: 2;
  background: var(--panel); padding-bottom: .15rem;
}
.tl-track.axis { background: transparent; border: none; height: 15px; }
.tl-tick {
  position: absolute; bottom: 0; font-size: .64rem; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: .15rem;
  white-space: nowrap; line-height: 1.1;
}

/* ---- conflicts --------------------------------------------------------- */
.improved-banner {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  justify-content: space-between;
  border: 1px solid var(--good); background: var(--good-soft);
  border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: .8rem;
  font-size: .87rem;
}

.conflict {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--bg);
  padding: .75rem .9rem; margin-bottom: .7rem;
}
.conflict header { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
.conflict-members { list-style: none; padding: 0; margin: .55rem 0; display: grid; gap: .25rem; }
.conflict-members li { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; font-size: .84rem; }
.outcome { font-size: .72rem; border-radius: 5px; padding: 0 .35rem; border: 1px solid var(--line); }
.outcome.full { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.outcome.partial { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.outcome.skipped { color: var(--muted); }
.conflict-options { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.option { text-align: left; display: grid; gap: .12rem; flex: 1 1 210px; padding: .5rem .65rem; }
.option-label { font-weight: 600; font-size: .85rem; }
.option-detail { font-size: .73rem; color: var(--muted); }
.option-delta { font-size: .78rem; color: var(--muted); }
.option-delta.up { color: var(--good); font-weight: 600; }
.option-delta.down { color: var(--bad); font-weight: 600; }

/* ---- shared bits ------------------------------------------------------- */
.badge {
  display: inline-block; border-radius: 5px; padding: 0 .32rem;
  font-size: .68rem; border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.badge.est { border-style: dashed; }
.badge.ann, .badge.conf { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.tag {
  display: inline-block; border-radius: 5px; padding: 0 .35rem;
  font-size: .7rem; border: 1px solid var(--line); white-space: nowrap;
}
.tag.full { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.tag.peak { border-color: var(--good); color: var(--good); }
.tag.warn { border-color: var(--bad); color: var(--bad); }
.muted { color: var(--muted); }
.hint { font-size: .76rem; color: var(--muted); margin: .5rem 0 0; }
.note { font-size: .77rem; color: var(--muted); margin: .3rem 0 0; }

/* ---- database & import pages ------------------------------------------- */
.candidate-table {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .86rem; overflow: hidden;
}
.candidate-table th, .candidate-table td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.candidate-table th {
  font-size: .72rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; background: var(--bg);
}
.candidate-table tr:last-child td { border-bottom: none; }
.cats { display: flex; flex-wrap: wrap; gap: .2rem; }
.cats span {
  font-size: .66rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 .25rem;
}
.button-link {
  display: inline-block; text-decoration: none; font-size: .88rem;
  padding: .45rem .8rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--ink);
  transition: border-color .15s, transform .1s;
}
.button-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.button-link.ghost { color: var(--muted); }
button.danger { color: var(--bad); border-color: transparent; font-size: .8rem; }
button.danger:hover { border-color: var(--bad); }
.row-actions { display: flex; gap: .5rem; align-items: center; white-space: nowrap; }
.row-actions a { font-size: .82rem; }

.editor-form {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .editor-form { grid-template-columns: 1fr; } }
.editor-form fieldset.wide { grid-column: 1 / -1; }
.editor-form .candidate-table input,
.editor-form .candidate-table select { margin: 0; }
.editor-actions {
  grid-column: 1 / -1; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
.warn-box ul { margin: 0; padding-left: 1.1rem; }

.login-wrap { max-width: 26rem; margin: 3rem auto; }
.login-form { display: grid; gap: .8rem; margin: 1rem 0; }
.login-form label { font-size: .8rem; color: var(--muted); }
.logout-form { margin-left: auto; }
.logout-form button { font-size: .78rem; padding: .12rem .55rem; border-radius: 999px; }
.lang-switch { margin-left: 0; }

.run-form {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 1rem 0 1.5rem;
}
.run-form .hint { margin: 0; }

.source-summary { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0 1.2rem; }
.inline { display: inline; }
.import-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 1rem 0 2rem;
}
.import-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: .9rem; display: grid; gap: .5rem;
  align-content: start; box-shadow: var(--shadow);
}
.flash {
  border: 1px solid var(--good); background: var(--good-soft);
  border-radius: var(--radius); padding: .7rem .9rem; margin: 1rem 0;
}
pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem; overflow-x: auto; font-size: .76rem; white-space: pre-wrap;
}
.warn-box {
  border: 1px solid var(--bad); background: var(--bad-soft);
  border-radius: var(--radius); padding: .6rem .9rem; color: var(--bad);
}

@media (max-width: 640px) {
  .field-row, .field-row.compact { grid-template-columns: 1fr; }
  .candidate-table { display: block; overflow-x: auto; }
  .tl-row { grid-template-columns: 84px 1fr; }
}

.summary { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.stat-tile {
  flex: 1 1 150px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .9rem; box-shadow: var(--shadow);
}
.stat-tile span { display: block; font-size: 1.2rem; font-weight: 700; }
.stat-tile span code { font-size: .95rem; }
.stat-tile label { font-size: .74rem; color: var(--muted); }