:root {
  --bg: #eceef1; --paper: #ffffff; --fg: #111c2a; --fg2: #34425a; --muted: #56677c;
  --line: #d9e0ea; --accent: #2f63c4; --soft: #dfe9fa; --warn: #9c5b00; --warn-soft: #faf0dd;
  --bad: #d32f2f; --bad-soft: #fbe6e6; --ok: #1e8e4e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1428; --paper: #161f2e; --fg: #eef3fb; --fg2: #c0ccdc; --muted: #9aabc0;
    --line: #2a3648; --accent: #86b6ff; --soft: #1c2c47; --warn: #f2ce8c; --warn-soft: #3a2d14;
    --bad: #ff7a7e; --bad-soft: #3d1c1e; --ok: #5fd38d;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1428; --paper: #161f2e; --fg: #eef3fb; --fg2: #c0ccdc; --muted: #9aabc0;
  --line: #2a3648; --accent: #86b6ff; --soft: #1c2c47; --warn: #f2ce8c; --warn-soft: #3a2d14;
  --bad: #ff7a7e; --bad-soft: #3d1c1e; --ok: #5fd38d;
}
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 Roboto, "Segoe UI", system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header { background: var(--paper); border-bottom: 1px solid var(--line); }
.bar { max-width: 1200px; margin: auto; padding: 10px max(16px, env(safe-area-inset-left)); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 17px; color: var(--fg); margin-right: 8px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
nav a { padding: 6px 10px; border-radius: 8px; color: var(--fg2); }
nav a.on { background: var(--soft); color: var(--fg); font-weight: 600; }
.who { color: var(--muted); font-size: 13px; display: flex; gap: 10px; align-items: center; }
main { max-width: 1200px; margin: auto; padding: 20px max(16px, env(safe-area-inset-left)) 48px; display: grid; gap: 18px; }
h1 { margin: 0; font-size: 24px; }
h2 { margin: 0 0 8px; font-size: 17px; }
.period { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.period label { display: grid; font-size: 12px; color: var(--muted); }
input, select, button { font: inherit; color: var(--fg); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
button { background: var(--soft); color: var(--accent); font-weight: 600; cursor: pointer; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.card b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.card span { color: var(--muted); font-size: 13px; }
.box { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
td.n, th.n { text-align: right; }
.barcell { width: 40%; }
.meter { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--soft); color: var(--accent); }
.tag.high { background: var(--warn-soft); color: var(--warn); }
.tag.veryhigh { background: var(--bad-soft); color: var(--bad); }
.note { color: var(--muted); font-size: 13px; }
.msg { background: var(--soft); border-radius: 10px; padding: 10px 14px; }
.token { font-family: Consolas, monospace; word-break: break-all; background: var(--warn-soft); padding: 8px; border-radius: 8px; }
form.inline { display: inline; }
.login { max-width: 360px; margin: 12vh auto; display: grid; gap: 10px; }
.err { color: var(--bad); }
a.btn { display: inline-block; font-weight: 600; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
a.btn:hover { text-decoration: none; }
table.papers td { vertical-align: middle; }
td.acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
details > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 4px 0; }
details.mail { margin-top: 12px; }
details.mail form, details.danger form { display: grid; gap: 10px; max-width: 560px; margin-top: 10px; }
details.mail label, details.danger label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.ticks { display: flex; gap: 14px; flex-wrap: wrap; }
.ticks label { display: flex !important; gap: 6px; align-items: center; color: var(--fg) !important; font-size: 15px !important; }
textarea { font: inherit; color: var(--fg); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
details.danger summary { color: var(--bad); }
button.bad { background: var(--bad-soft); color: var(--bad); justify-self: start; }
.msg.err { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 640px) { td.acts { justify-content: flex-start; } table.papers tr { display: grid; } }
.combined { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.combined .note { display: block; }
.combined .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.combined a.btn, .combined button { background: var(--paper); }
details.separate { margin-top: 10px; }
details.mail label.tick { display: flex; gap: 6px; align-items: center; color: var(--fg); font-size: 14px; }
.crumbs { margin: 0; font-size: 15px; }
table.lib td { vertical-align: middle; }
table.lib form { display: inline; }
.uploads { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
label.btn { cursor: pointer; color: var(--accent); }
form.row { display: flex; gap: 8px; flex-wrap: wrap; }
form.row input { flex: 1; min-width: 160px; }
ul.err { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.grow { flex: 1; }
.switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.switch a { padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.switch a.on { background: var(--soft); color: var(--accent); }
.switch a:hover { text-decoration: none; }
button.theme { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; color: var(--fg2); }
button.theme svg { width: 17px; height: 17px; }
button.theme .sun { display: none; }
:root[data-theme="dark"] button.theme .sun { display: block; }
:root[data-theme="dark"] button.theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.theme .sun { display: block; }
  :root:not([data-theme="light"]) button.theme .moon { display: none; }
}
/* Flight log */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar .grow { min-width: 8px; }
table.log { font-size: 13.5px; }
table.log th, table.log td { padding: 5px 6px; }
table.log td.route { min-width: 220px; }
table.log tr.edit:hover td { background: var(--soft); cursor: pointer; }
table.log tr.total td { font-weight: 700; border-top: 2px solid var(--fg2); }
.src { font-size: 11px; color: var(--muted); }
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--fg); padding: 18px; width: min(680px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog form.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
dialog form.grid label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
dialog form.grid label.wide { grid-column: 1 / -1; }
dialog .acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
details.codes { font-size: 13px; }
details.codes .cols3 { columns: 3 220px; margin-top: 8px; }
details.codes .cols3 div { break-inside: avoid; }
.print-only { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root, :root[data-theme="dark"] { --bg: #fff; --paper: #fff; --fg: #000; --fg2: #000; --muted: #333; --line: #999; --soft: #fff; --accent: #000; color-scheme: light; }
  body { font-size: 10px; background: #fff; }
  .noprint, header, .period { display: none !important; }
  .print-only { display: block; }
  main { max-width: none; padding: 0; gap: 6px; }
  .box { border: 0; padding: 0; }
  .scroll { overflow: visible; }
  table.log { font-size: 9px; }
  table.log th, table.log td { padding: 2px 3px; border: 1px solid #999; }
  table.log thead { display: table-header-group; }
  table.log tr { break-inside: avoid; }
  a { color: #000; }
}