:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f3f6f8;
  color: #172331;
}
* { box-sizing: border-box; }
body { margin: 0; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem max(1rem, calc((100vw - 1180px) / 2));
  color: #fff;
  background: #183e57;
}
.topbar h1 { margin: 0; font-size: 1.35rem; }
.topbar p { margin: .15rem 0 0; opacity: .8; font-size: .9rem; }
.top-actions { display: flex; align-items: center; gap: .75rem; }
main { max-width: 1200px; margin: 1.25rem auto; padding: 0 1rem 2rem; }
#notice { min-height: 1.5rem; margin-bottom: .5rem; color: #075c3b; }
#notice.error { color: #a72828; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card {
  background: #fff;
  border: 1px solid #dce3e8;
  border-radius: 12px;
  box-shadow: 0 2px 9px #1b34400c;
  margin-bottom: 1rem;
  padding: 1.15rem;
}
h2 { margin: 0 0 1rem; font-size: 1.18rem; }
h3 { margin: 1.4rem 0 .6rem; font-size: 1rem; }
p { line-height: 1.5; }
form { margin: 0 0 .8rem; }
.inline-form, .pathbar { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; font-size: .88rem; }
input, select {
  font: inherit;
  padding: .48rem .62rem;
  border: 1px solid #aab9c3;
  border-radius: 6px;
  color: inherit;
  background: white;
}
input[type="file"] { max-width: 230px; }
input[type="checkbox"] { width: 1rem; height: 1rem; }
button {
  border: 1px solid #166b93;
  border-radius: 6px;
  padding: .48rem .72rem;
  background: #12668d;
  color: #fff;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { background: #0c5577; }
button.secondary { color: #18465d; background: #ecf5f8; border-color: #acc8d5; }
button.secondary:hover { background: #dbeef5; }
button.danger { color: #a22626; background: #fff5f4; border-color: #e5abaa; }
button.danger:hover { background: #ffe8e6; }
button:disabled { opacity: .5; cursor: not-allowed; }
table { border-collapse: collapse; width: 100%; margin-top: .5rem; }
th, td { padding: .55rem .4rem; border-bottom: 1px solid #e5ecef; text-align: left; vertical-align: middle; }
th { font-size: .84rem; color: #496474; }
td { font-size: .87rem; overflow-wrap: anywhere; }
td.actions { white-space: nowrap; }
td.actions button { margin: 0 .25rem .25rem 0; }
.scroll { overflow-x: auto; }
.pathbar { margin: .7rem 0; }
.pathbar code { padding: .35rem .5rem; background: #edf2f4; border-radius: 4px; }
fieldset { border: 1px solid #d2dce1; border-radius: 6px; margin: .65rem 0; }
.user-choices { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.user-choices label { flex-direction: row; align-items: center; }
#rule-path, #preview-path { min-width: min(420px, 75vw); }
.muted { color: #5d7180; }
dialog { border: 1px solid #aab9c3; border-radius: 10px; max-width: min(600px, 95vw); }
dialog::backdrop { background: #081c2bcc; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: .8rem; background: #edf2f4; }
.dialog-actions { display: flex; gap: .6rem; justify-content: end; }
@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  .topbar { padding: 1rem; }
}