:root{
  --bg:#f6f5f2; --panel:#fff; --ink:#1c1e21; --muted:#6b7280; --line:#e3e1dc;
  --accent:#1f5c4a; --accent-ink:#fff; --chip:#efeeea; --chip-on:#1f5c4a;
  --a:#1f5c4a; --b:#9a7b2f; --c:#8a8a8a; --warn:#8c3b28; --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
  --r:10px;
}
:root:not([data-theme=light]) { }
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --bg:#14161a; --panel:#1c1f24; --ink:#e7e5e0; --muted:#98a0ab; --line:#2c3038;
    --accent:#6cc0a1; --accent-ink:#0d1013; --chip:#262a31; --chip-on:#6cc0a1;
    --a:#6cc0a1; --b:#d6b45f; --c:#9aa2ad; --warn:#e08a72;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme=dark]{
  --bg:#14161a; --panel:#1c1f24; --ink:#e7e5e0; --muted:#98a0ab; --line:#2c3038;
  --accent:#6cc0a1; --accent-ink:#0d1013; --chip:#262a31; --chip-on:#6cc0a1;
  --a:#6cc0a1; --b:#d6b45f; --c:#9aa2ad; --warn:#e08a72;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--chip);padding:1px 5px;border-radius:5px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; gap:14px; align-items:center;
  padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
.topbar h1{font-size:17px; white-space:nowrap}
.search-wrap{flex:1; min-width:0}
#search{
  width:100%; max-width:520px; padding:8px 12px; border:1px solid var(--line);
  border-radius:999px; background:var(--bg); outline:none;
}
#search:focus{border-color:var(--accent)}
.topbar-actions{display:flex; gap:8px; align-items:center}
.icon-btn{
  width:34px; height:34px; border:1px solid var(--line); background:var(--bg);
  border-radius:8px; display:grid; place-items:center; font-size:15px;
}
.icon-btn:hover{border-color:var(--accent)}
.seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{border:0; background:var(--bg); padding:7px 12px; font-size:13px}
.seg button.on{background:var(--accent); color:var(--accent-ink)}

/* ---------- layout ---------- */
.layout{display:grid; grid-template-columns:290px minmax(0,1fr); gap:18px; padding:18px; align-items:start}
main{min-width:0}

.sidebar{
  position:sticky; top:73px; max-height:calc(100vh - 90px); overflow:auto;
  display:flex; flex-direction:column; gap:12px; padding-right:4px;
}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:12px 13px}
.panel h2{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:9px}
.hint{margin:8px 0 0; font-size:12px; color:var(--muted); line-height:1.45}
.side-head{display:none; justify-content:space-between; align-items:center; padding:2px}

.brief-toggle{
  display:flex; gap:10px; align-items:flex-start; background:var(--panel);
  border:1px solid var(--accent); border-radius:var(--r); padding:12px 13px; cursor:pointer;
}
.brief-toggle input{margin-top:3px; accent-color:var(--accent); width:16px; height:16px}
.brief-toggle strong{display:block; font-size:14px}
.brief-toggle em{display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:2px}

.slider{margin-bottom:10px}
.slider label{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:3px}
.slider output{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
input[type=range]{width:100%; accent-color:var(--accent)}
.field{display:block; font-size:12.5px; color:var(--muted); margin-bottom:10px}
.field output{color:var(--ink); font-weight:600}
.field select{
  width:100%; margin-top:4px; padding:7px 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg);
}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips.scroll{max-height:172px; overflow:auto}
.chip{
  border:1px solid var(--line); background:var(--chip); color:var(--ink);
  border-radius:999px; padding:4px 10px; font-size:12.5px; white-space:nowrap;
}
.chip.on{background:var(--chip-on); border-color:var(--chip-on); color:var(--accent-ink)}
.chip .n{opacity:.6; margin-left:5px; font-variant-numeric:tabular-nums}

.reset{
  border:1px solid var(--line); background:var(--panel); border-radius:var(--r);
  padding:9px; font-size:13px; color:var(--muted);
}
.reset:hover{color:var(--ink); border-color:var(--accent)}

/* ---------- results ---------- */
.results-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.stats{font-size:13px; color:var(--muted)}
.stats b{color:var(--ink)}
.sort{font-size:12.5px; color:var(--muted); display:flex; gap:6px; align-items:center}
.sort select{padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:var(--panel)}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; text-align:left; display:flex; flex-direction:column; gap:8px;
  transition:border-color .12s, transform .12s;
}
.card:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow)}
.card-top{display:flex; gap:10px; align-items:baseline}
.rank{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:26px}
.card h3{font-size:15px; flex:1; line-height:1.3}
.pri{font-variant-numeric:tabular-nums; font-weight:700; font-size:15px}
.tierbadge{
  width:19px; height:19px; border-radius:5px; display:inline-grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff;
}
.tierbadge.A{background:var(--a)} .tierbadge.B{background:var(--b)} .tierbadge.C{background:var(--c)}
.place{font-size:12.5px; color:var(--muted)}
.meta{display:flex; flex-wrap:wrap; gap:5px}
.pill{font-size:11.5px; border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--muted)}
.pill.good{border-color:var(--accent); color:var(--accent)}
.pill.warn{border-color:var(--warn); color:var(--warn)}
.pill.stat{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.snip{font-size:12.5px; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* table view */
.tablewrap{overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{position:sticky; top:0; background:var(--panel); font-size:11.5px; text-transform:uppercase;
   letter-spacing:.05em; color:var(--muted); z-index:1}
tbody tr:hover{background:var(--chip); cursor:pointer}
td.num{text-align:right; font-variant-numeric:tabular-nums}
td.name{white-space:normal; min-width:220px; font-weight:600}

.empty{text-align:center; color:var(--muted); padding:50px 20px}

/* ---------- drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40}
/* .drawer sets display:flex, which would otherwise beat the UA rule for [hidden] */
.drawer[hidden],.scrim[hidden]{display:none}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(560px,100%); z-index:50;
  background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column;
  box-shadow:var(--shadow);
}
.drawer-head{display:flex; gap:12px; justify-content:space-between; align-items:flex-start;
  padding:16px 18px; border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:19px; line-height:1.25}
.drawer-head p{margin:4px 0 0; font-size:13px; color:var(--muted)}
.drawer-body{overflow:auto; padding:16px 18px 40px}
.dsec{margin-bottom:20px}
.dsec h3{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  margin-bottom:8px; padding-bottom:5px; border-bottom:1px solid var(--line)}
.kv{display:grid; grid-template-columns:150px 1fr; gap:5px 12px; font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.prose{font-size:13.5px; line-height:1.55}
.note{background:var(--chip); border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.5; margin-bottom:8px}
.note.warn{border-left:3px solid var(--warn)}
.note.fix{border-left:3px solid var(--accent)}
.note b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:3px}
.mine{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mine label{font-size:12px; color:var(--muted); display:block}
.mine input,.mine select,.mine textarea{
  width:100%; margin-top:3px; padding:7px 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg);
}
.mine .wide{grid-column:1/-1}
.mine textarea{min-height:72px; resize:vertical; font-family:inherit}
.drawer a.ext{color:var(--accent); font-size:13px; word-break:break-all}

/* ---------- dialog ---------- */
dialog{
  border:1px solid var(--line); border-radius:14px; padding:22px; max-width:520px; width:calc(100% - 32px);
  background:var(--panel); color:var(--ink); box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog h2{font-size:18px; margin-bottom:6px}
dialog h3{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:18px 0 6px}
dialog input[type=url]{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg)}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:9px}
.row.end{justify-content:flex-end; margin-top:20px}
.row button{border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:7px 13px; font-size:13px}
.row button:hover{border-color:var(--accent)}
.row button.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tag{font-size:10px; background:var(--chip); color:var(--muted); border-radius:4px; padding:1px 5px;
  letter-spacing:0; text-transform:none; vertical-align:middle}

.only-mobile{display:none}

@media (max-width:900px){
  .layout{grid-template-columns:1fr; padding:12px}
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:min(320px,88%); z-index:60; max-height:none;
    background:var(--bg); padding:12px; border-right:1px solid var(--line);
    transform:translateX(-102%); transition:transform .2s;
  }
  .sidebar.open{transform:none; box-shadow:var(--shadow)}
  .only-mobile{display:grid}
  .side-head{display:flex}
  .topbar h1{display:none}
  .cards{grid-template-columns:1fr}
  /* give the search its own row rather than crushing it next to the buttons */
  .topbar{flex-wrap:wrap; gap:8px}
  .search-wrap{order:3; flex-basis:100%}
  .topbar-actions{margin-left:auto}
}