:root {
  --bg: #fbfbfa;
  --panel: #ffffff;
  --text: #1c1d1f;
  --muted: #6b6f76;
  --faint: #9aa0a6;
  --line: #e7e7e4;
  --hover: #f3f3f0;
  --sel: #eaf2ee;
  --accent: #2f6b4f;
  --accent-soft: #e3efe8;
  --amber: #9a6a00;
  --amber-soft: #fbf1d9;
  --red: #a33a2c;
  --radius: 8px;
  --row: 60px;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131415; --panel: #1a1b1d; --text: #e8e8e6; --muted: #9a9ea5; --faint: #6c7078; --line: #2a2c2f;
    --hover: #222427; --sel: #1f2b25; --accent: #6fbf95; --accent-soft: #1f3329; --amber: #e0b04f;
    --amber-soft: #33290f; --red: #e07a6c; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--red); }
kbd { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line); border-bottom-width: 2px;
      border-radius: 4px; padding: 0 4px; background: var(--panel); }

/* login */
.login { display: grid; place-items: center; height: 100%; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 32px 36px; min-width: 300px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* layout */
.app { display: grid; grid-template-rows: auto auto auto 1fr; height: 100%; }
.top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.search { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line);
          border-radius: var(--radius); padding: 0 10px; max-width: 720px; }
.search:focus-within { border-color: var(--accent); }
.search svg { width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 2; flex: none; }
.search input { flex: 1; border: 0; outline: 0; background: transparent; padding: 8px 0; min-width: 0; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
select { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; }
.ghost { background: none; border: 1px solid transparent; border-radius: var(--radius); padding: 4px 8px; cursor: pointer; color: var(--muted); }
.ghost:hover { background: var(--hover); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel);
        border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; user-select: none; }
.chip:hover { background: var(--hover); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip .n { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.chip.on .n { color: inherit; opacity: .75; }
.chip.menu::after { content: "▾"; font-size: 10px; color: var(--faint); }
.sep { width: 1px; background: var(--line); margin: 2px 4px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; }
.active-filters:not(:empty) { padding: 8px 16px; border-bottom: 1px solid var(--line); }
.tag-x { display: inline-flex; gap: 6px; align-items: center; background: var(--accent-soft); color: var(--accent);
         border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px; }
.tag-x button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0 4px; font-size: 14px; line-height: 1; }
.clear-all { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; }

/* popover */
.pop { position: fixed; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
       box-shadow: 0 8px 30px rgba(0,0,0,.12); width: 280px; max-height: 60vh; display: flex; flex-direction: column; }
.pop input { margin: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); outline: 0; }
.pop ul { list-style: none; margin: 0; padding: 4px; overflow: auto; }
.pop li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.pop li:hover, .pop li.kb { background: var(--hover); }
.pop li.on { color: var(--accent); font-weight: 600; }
.pop li .n { color: var(--faint); font-variant-numeric: tabular-nums; }
.pop li.zero { opacity: .45; }

/* list + detail */
.split { display: grid; grid-template-columns: minmax(340px, 42%) 1fr; min-height: 0; }
.list { overflow-y: auto; position: relative; border-right: 1px solid var(--line); outline: 0; }
.list-spacer { position: relative; }
.row { position: absolute; left: 0; right: 0; height: var(--row); padding: 9px 16px; border-bottom: 1px solid var(--line);
       cursor: pointer; overflow: hidden; }
.row:hover { background: var(--hover); }
.row.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.row .l1 { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.row .meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.row .icons { margin-left: auto; display: flex; gap: 4px; color: var(--faint); flex: none; }
.row .l2 { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.xdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.status { font-size: 11px; border-radius: 4px; padding: 0 5px; border: 1px solid var(--line); color: var(--muted); }
.status.shortlist { color: var(--accent); border-color: var(--accent); }
.status.contacted, .status.replied { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.status.skip { text-decoration: line-through; }
.ic { width: 14px; height: 14px; display: inline-block; }
.empty { padding: 40px 16px; color: var(--muted); text-align: center; }

.detail { overflow-y: auto; background: var(--panel); }
.empty-detail { height: 100%; display: grid; place-content: center; text-align: center; color: var(--muted); }
.d { padding: 20px 28px 60px; max-width: 900px; }
.d h1 { font-size: 22px; margin: 0; letter-spacing: -.02em; }
.d .sub { color: var(--muted); margin-top: 4px; }
.d .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.d .links a { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 13px; color: var(--text); }
.d .links a:hover { border-color: var(--accent); text-decoration: none; }
.d section { margin-top: 26px; }
.d h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 8px; font-weight: 600; }
.d .why { font-size: 15px; line-height: 1.55; }
.badge { display: inline-block; font-size: 11px; border-radius: 4px; padding: 1px 6px; background: var(--hover); color: var(--muted); vertical-align: 1px; }
.badge.acc { background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.back { display: none; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--faint); font-weight: 500; font-size: 12px; }
td.nowrap { white-space: nowrap; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; font-size: 13px; }
.kv div:nth-child(odd) { color: var(--muted); }
.ev { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ev .src { color: var(--faint); font-size: 12px; overflow-wrap: anywhere; }
.copy { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 0 6px; cursor: pointer; font-size: 12px; color: var(--muted); }
.copy:hover { color: var(--accent); border-color: var(--accent); }
.review { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d textarea { width: 100%; margin-top: 8px; min-height: 60px; border: 1px solid var(--line); border-radius: 6px;
                   padding: 8px; background: var(--bg); resize: vertical; }
.more { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 6px 0; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg);
         padding: 8px 14px; border-radius: 8px; font-size: 13px; z-index: 30; }
.skeleton { color: var(--faint); padding: 28px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .detail { display: none; }
  .app.show-detail .list { display: none; }
  .app.show-detail .detail { display: block; }
  .back { display: inline-block; margin-bottom: 12px; }
  .top { flex-wrap: wrap; }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .d { padding: 16px; }
  .kv { grid-template-columns: 1fr; }
  .filters { flex-wrap: nowrap; overflow-x: auto; }
}

.sort { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.hidden-note { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 13px; text-decoration: underline dotted; }
.hidden-note:hover { color: var(--accent); }
.clear-btn { margin-left: auto; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 12px; cursor: pointer; color: var(--text); }
.clear-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.clear-btn[disabled] { color: var(--faint); cursor: default; }
.login-form { display: grid; gap: 12px; margin-top: 18px; width: 280px; }
.login-form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.login-form input { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: var(--bg); outline: 0; color: var(--text); }
.login-form input:focus { border-color: var(--accent); }
.primary { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 9px; cursor: pointer; font-weight: 600; }
.primary[disabled] { opacity: .6; cursor: default; }
.login-form .error { margin: 0; font-size: 13px; }
.gsi { margin-top: 18px; min-height: 0; display: flex; justify-content: center; }
.or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: 16px 0 -4px; width: 280px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 40; padding: 16px; }
.modal-card { background: var(--panel); border-radius: 12px; padding: 20px 24px; width: min(760px, 100%); max-height: 90vh; overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal table { margin-top: 12px; }
.modal td .ghost { padding: 2px 6px; font-size: 12px; }
.user-form { display: grid; gap: 8px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.user-form h3 { margin: 0 0 4px; font-size: 14px; }
.user-form input[type=email], .user-form input[type=password] { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: var(--bg); color: var(--text); outline: 0; }
.user-form input:focus { border-color: var(--accent); }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.small { font-size: 12px; margin: 0; }