:root{
  --bg:#191c20; --panel:#21252a; --panel2:#292e34; --line:#3a3f47;
  --ink:#e8e5df; --muted:#8b8f96; --accent:#c8873c; --accent2:#8a6a3a;
  --ok:#7bb661; --warn:#d9a441; --radius:10px;
}
:root[data-theme="light"]{
  --bg:#f7f4ee; --panel:#fff; --panel2:#f0ebe1; --line:#ddd3c2;
  --ink:#231e18; --muted:#6d6355; --accent:#a4652a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:16px;flex-wrap:wrap;background:var(--panel)}
.brand{font-size:20px;font-weight:700;letter-spacing:.02em}
.mark{color:var(--accent)}
.tagline{color:var(--muted);font-size:14px;flex:1;min-width:200px}
.status{font-size:12px;color:var(--muted);font-family:ui-monospace,monospace;
  border:1px solid var(--line);padding:4px 10px;border-radius:99px}
.status.ready{color:var(--ok);border-color:var(--ok)}
.status.err{color:#e06c5a;border-color:#e06c5a}
main{max-width:1180px;margin:0 auto;padding:24px}
.hidden{display:none !important}

.dropzone{border:2px dashed var(--line);border-radius:16px;padding:60px 24px;
  text-align:center;background:var(--panel);transition:.15s}
.dropzone.over{border-color:var(--accent);background:var(--panel2)}
.dz-icon{font-size:44px}
.dropzone h2{margin:12px 0 6px}
.dropzone p{color:var(--muted);max-width:520px;margin:6px auto}
.fineprint{font-size:13px;opacity:.8;margin-top:18px !important}
code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:13px}

.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}

.summary{display:flex;gap:22px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:14px}
.stat b{display:block;font-size:22px}
.stat span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.stat.warn b{color:var(--warn)}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input[type=search]{background:var(--panel);border:1px solid var(--line);
  color:var(--ink);padding:8px 12px;border-radius:8px;min-width:210px}
.chk{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:6px;cursor:pointer}
.selcount{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

.folder{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.folder-head{display:flex;align-items:center;gap:10px;padding:11px 14px;
  cursor:pointer;background:var(--panel2);user-select:none}
.folder-head h3{margin:0;font-size:15px;flex:1}
.pill{font-size:11px;color:var(--muted);border:1px solid var(--line);
  padding:2px 8px;border-radius:99px;white-space:nowrap}
.pill.warn{color:var(--warn);border-color:var(--warn)}
.caret{color:var(--muted);width:14px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.attention td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
tr:hover td{background:var(--panel2)}
tr.sel td{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.name-in{background:transparent;border:1px solid transparent;color:var(--ink);
  width:100%;padding:4px 6px;border-radius:6px;font-size:14px;font-family:inherit}
.name-in:hover{border-color:var(--line)}
.name-in:focus{border-color:var(--accent);background:var(--bg);outline:none}
.chipbtn{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);
  border:1px solid var(--line);border-radius:99px;padding:3px 11px 3px 5px;
  cursor:pointer;font-size:13px;color:var(--ink);max-width:190px}
.chipbtn:hover{border-color:var(--accent)}
.swatch{width:15px;height:15px;border-radius:50%;border:1px solid rgba(128,128,128,.55);flex:none}
.kindtag{font-size:10px;color:var(--muted);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;text-transform:uppercase}
.dim{color:var(--muted)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;
  align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:min(560px,100%);max-height:78vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;flex:1;font-size:16px}
.x{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}
#modal-filter{margin:12px 16px;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);padding:8px 12px;border-radius:8px}
.modal-body{overflow:auto;padding:6px 16px 16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:7px}
.opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;background:var(--panel2);font-size:13px}
.opt:hover{border-color:var(--accent)}
.opt.cur{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}

.done-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.done-head h2{margin:0;flex:1}
.runbook-intro{color:var(--muted);border-left:3px solid var(--accent);
  padding:2px 0 2px 14px;margin:14px 0 20px;max-width:760px}
.runbook{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px 20px 20px}
.rb-step{border-bottom:1px solid var(--line);padding:16px 0}
.rb-step:last-child{border-bottom:none}
.rb-step.done{opacity:.5}
.rb-title{display:flex;align-items:center;gap:11px;font-weight:600;margin-bottom:9px}
.rb-title input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.rb-files{margin:7px 0 7px 28px;display:flex;gap:7px;flex-wrap:wrap}
.rb-file{font-family:ui-monospace,monospace;font-size:12px;background:var(--panel2);
  border:1px solid var(--line);padding:3px 8px;border-radius:6px}
.rb-file.kml{border-color:var(--warn);color:var(--warn)}
.rb-do{margin:0 0 0 28px;color:var(--muted);font-size:14px}
.rb-rename{margin:9px 0 0 28px;font-size:14px}
.rb-rename code{background:var(--panel2);border:1px solid var(--accent);
  color:var(--accent);padding:3px 9px;border-radius:6px;font-size:14px}
.note{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:11px 14px;margin:14px 0;font-size:14px;color:var(--muted)}
.note.warn{border-color:var(--warn);color:var(--warn)}

/* icon glyphs + select-all */
.glyph{font-size:15px;line-height:1;width:18px;text-align:center;flex:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.chipbtn .glyph{margin-right:1px}
.opt .glyph{font-size:16px}
.folder-head input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);
  cursor:pointer;flex:none}
.toolbar .chk input{accent-color:var(--accent)}
.toolbar{row-gap:8px}
.divider{width:1px;height:22px;background:var(--line);margin:0 2px}
.toolbar .btn{white-space:nowrap}

/* primary actions live beside the summary, not among the filters */
.summary-row{display:flex;gap:14px;align-items:stretch;margin-bottom:14px;flex-wrap:wrap}
.summary-row .summary{flex:1;margin-bottom:0;min-width:280px}
.summary-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* "why is this icon?" affordance */
.whymark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  margin-left:6px;border-radius:50%;border:1px solid var(--warn);color:var(--warn);
  font-size:11px;font-weight:700;cursor:help;vertical-align:middle}
.chipbtn.unresolved{border-style:dashed;color:var(--muted)}
.stat[title],.pill[title],.chk[title]{cursor:help}

/* type filter, exclusion, description, help */
#type-filter{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;border-radius:8px;font-size:14px}
.desc-in{background:transparent;border:1px solid transparent;color:var(--muted);
  width:100%;padding:4px 6px;border-radius:6px;font-size:13px;font-family:inherit}
.desc-in:hover{border-color:var(--line)}
.desc-in:focus{border-color:var(--accent);background:var(--bg);color:var(--ink);outline:none}
.th-note{font-weight:400;text-transform:none;letter-spacing:0;opacity:.65}
.inc-box{accent-color:var(--accent);cursor:pointer}
tr.excluded td{opacity:.4}
tr.excluded .name-in{text-decoration:line-through}
#help-btn{flex:none}
.modal-card.wide{width:min(760px,100%)}
.help-body{overflow:auto;padding:4px 22px 22px;line-height:1.62}
.help-body h4{margin:20px 0 6px;font-size:14px;color:var(--accent);
  text-transform:uppercase;letter-spacing:.04em}
.help-body p,.help-body li{color:var(--ink);font-size:14px;margin:6px 0}
.help-body ul{padding-left:20px}
.help-tbl{width:100%;margin-top:6px}
.help-tbl th{width:130px;text-align:left;vertical-align:top;color:var(--accent);
  font-size:13px;text-transform:none;letter-spacing:0;border:none;padding:5px 10px 5px 0}
.help-tbl td{font-size:14px;border:none;padding:5px 0}
.linkbtn{background:none;border:none;color:var(--accent);cursor:pointer;
  font-size:12px;text-decoration:underline;padding:0 0 0 4px}
.help-note{color:var(--muted) !important;font-size:13px !important;
  border-left:2px solid var(--line);padding-left:12px;margin-top:12px !important}

/* ---- persistent control bar: filters and edit tools together ----
   Two sub-groups so that, if the bar runs out of room, the whole action
   cluster wraps to its own line together -- never just one stranded button. */
.bar{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px 16px;margin-bottom:14px;min-height:38px}
.bar-filters,.bar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.selcount{color:var(--ink);font-weight:600;font-size:13px;
  padding-right:2px;font-variant-numeric:tabular-nums}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.clear{border-color:var(--warn);color:var(--warn);font-weight:600}
.btn.clear:hover{background:color-mix(in srgb,var(--warn) 16%,transparent)}
.btn.ghost:hover{color:var(--ink);border-color:var(--line)}
.muted-note{color:var(--muted);font-size:13px}

/* overflow menu */
.menu-wrap{position:relative}
.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:230px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.menu button{display:block;width:100%;text-align:left;background:none;border:none;
  color:var(--ink);padding:9px 11px;border-radius:7px;cursor:pointer;font-size:14px}
.menu button:hover{background:var(--panel2)}

/* header select column + excluded state */
th.selcol{padding-left:12px}
th.selcol input{accent-color:var(--accent);cursor:pointer;width:16px;height:16px}
.exc-chip{margin-left:10px;background:transparent;border:1px solid var(--warn);
  color:var(--warn);font-size:11px;padding:1px 8px;border-radius:99px;cursor:pointer}
.exc-chip:hover{background:color-mix(in srgb,var(--warn) 18%,transparent)}
tr.excluded td{opacity:.55}
tr.excluded .name-in{text-decoration:line-through;opacity:.75}
#filter{min-width:200px;flex:0 1 340px}