:root { --bg:#f6f7f9; --fg:#1b1f24; --mut:#5b6670; --card:#fff; --line:#d5dae0; --acc:#1d5fa8; --warn:#b3261e; --ok:#1b7a3a; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.4 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; padding:.5rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; flex:1; }
a { color:var(--acc); }
main { padding:1rem; max-width:1400px; margin:0 auto; }
.cols { display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; align-items:start; }
.col { background:#eceff3; border-radius:6px; padding:.5rem; }
.col > summary { font-weight:600; cursor:pointer; margin-bottom:.5rem; }
.item { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:4px; padding:.5rem; margin-bottom:.5rem; display:flex; flex-direction:column; gap:.2rem; }
.item.p1 { border-left-color:var(--warn); } .item.p2 { border-left-color:var(--acc); } .item.gate { background:#fff8e6; }
.key { font-size:.8rem; } .meta,.leer { color:var(--mut); font-size:.85rem; }
.badge { background:#d9dee5; border-radius:10px; padding:0 .5rem; font-size:.8rem; } .badge.warn { background:var(--warn); color:#fff; }
.band { background:#fff3e0; border:1px solid #f0c27a; border-radius:6px; padding:.5rem 1rem; margin-bottom:1rem; }
.warnbox { background:#fdecea; border:1px solid #f1b0ab; border-radius:6px; padding:.5rem 1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:1rem; display:flex; flex-direction:column; gap:.75rem; max-width:640px; }
.card.narrow { max-width:360px; margin:3rem auto; }
label { display:flex; flex-direction:column; gap:.2rem; font-size:.9rem; } label.inline { flex-direction:row; align-items:center; gap:.5rem; }
input,select,textarea,button { font:inherit; padding:.5rem; border:1px solid var(--line); border-radius:4px; background:#fff; min-height:44px; }
button { background:var(--acc); color:#fff; border-color:var(--acc); cursor:pointer; }
button.danger { background:var(--warn); border-color:var(--warn); } button.link { background:none; color:var(--acc); border:0; text-decoration:underline; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; } .actions.big button { min-height:88px; min-width:88px; font-size:1.1rem; }
.move { display:flex; gap:.5rem; margin-top:.25rem; } .move select { flex:1; }
.ok { color:var(--ok); } .err { color:var(--warn); }
@media (max-width:719px) {
  .cols { grid-template-columns:1fr; }
  main { padding:.5rem; } header { padding:.5rem; }
  .card { max-width:none; }
  button,.move select { min-height:88px; }
  .actions.big { flex-direction:column; } .actions.big button { width:100%; }
}