:root{
    /* light — clean, airy, near-monochrome + one restrained accent */
    --page:#ffffff; --surface:#ffffff; --surface-2:#eef1f3;
    --ink:#14171a; --ink-2:#454b52; --muted:#6c727a; --rule:#d6dade;
    --accent:#16716a; --accent-ink:#ffffff; --accent-weak:rgba(22,113,106,.12);
    --shadow:0 1px 2px rgba(20,25,30,.06),0 6px 24px rgba(20,25,30,.09);
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
    --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
    --maxw:1180px;
  }

  *{box-sizing:border-box}
  body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
    font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer}
  ::selection{background:var(--accent-weak)}

  /* ---------- masthead ---------- */
  header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--page) 90%,transparent);
    backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--rule);}
  .top .wrap{display:flex;align-items:center;gap:18px;height:60px;}
  .brand{display:flex;align-items:center;gap:9px;}
  .reel{width:22px;height:22px;color:var(--accent);flex:none}
  .brand b{font-weight:700;font-size:16px;letter-spacing:.2px}
  .brand .sub{color:var(--muted);font-size:12.5px;max-width:250px;line-height:1.25;
    border-left:1px solid var(--rule);padding-left:10px;margin-left:1px}
  .top nav{margin-left:auto;display:flex;align-items:center;gap:4px}
  .top nav a{padding:7px 11px;border-radius:8px;font-size:13.5px;color:var(--ink-2)}
  .top nav a:hover{background:var(--surface-2);color:var(--ink)}
  .iconbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--rule);
    background:var(--surface);color:var(--ink-2)}
  .iconbtn:hover{color:var(--ink);border-color:var(--muted)}
  .btn{border:1px solid var(--rule);background:var(--surface);color:var(--ink);padding:7px 14px;border-radius:8px;
    font-size:13.5px;font-weight:600}
  .btn.accent{background:var(--accent);color:var(--accent-ink);border-color:transparent}
  .btn.accent:hover{filter:brightness(1.06)}
  .btn.ghost:hover{border-color:var(--muted)}

  /* ---------- search hero ---------- */
  .hero{padding:38px 0 24px}
  .hero h1{font-weight:600;font-size:26px;line-height:1.2;margin:0 0 6px;text-wrap:balance;letter-spacing:-.02em}
  .hero .kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:12px}
  .hero p.lede{color:var(--ink-2);font-size:15px;margin:0;max-width:60ch}
  .searchrow{display:flex;gap:10px;margin-top:22px;max-width:720px}
  .searchbox{position:relative;flex:1}
  .searchbox svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}
  .searchbox input{width:100%;padding:13px 14px 13px 44px;border-radius:11px;border:1px solid var(--rule);
    background:#ffffff;color:#14171a;font-size:15.5px;box-shadow:var(--shadow)}
  .searchbox input::placeholder{color:#8b9199}
  .searchbox svg{color:#8b9199}
  .searchbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
  .stats{margin-top:16px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;
    display:flex;gap:7px;flex-wrap:wrap;align-items:center}
  .stats b{color:var(--ink-2);font-weight:600}
  .stats .dot{opacity:.4}
  .quicktags{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .quicktags .lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:2px}

  .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--rule);
    background:var(--surface);color:var(--ink-2);font-size:12.5px;line-height:1}
  .chip:hover{border-color:var(--accent);color:var(--ink)}
  .chip.on{background:var(--accent-weak);border-color:transparent;color:var(--accent);font-weight:600}
  .chip .x{font-size:14px;opacity:.7}

  /* ---------- layout ---------- */
  .grid{display:grid;grid-template-columns:240px 1fr;gap:40px;padding:8px 0 60px;align-items:start}
  aside{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;padding-right:6px}
  .facet{border-bottom:1px solid var(--rule);padding:2px 0 14px;margin-bottom:14px}
  .facet:last-child{border-bottom:0}
  .facet h3{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 8px;font-weight:700}
  .opt{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px;cursor:pointer;user-select:none}
  .opt:hover{background:var(--surface-2)}
  .opt .box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--muted);flex:none;display:grid;place-items:center}
  .opt.on .box{background:var(--accent);border-color:var(--accent)}
  .opt.on .box::after{content:"";width:8px;height:8px;background:var(--accent-ink);clip-path:polygon(14% 44%,0 60%,42% 100%,100% 22%,84% 8%,40% 66%)}
  .opt .nm{font-size:13.5px;color:var(--ink-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .opt.on .nm{color:var(--ink);font-weight:500}
  .opt .ct{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .morelink{font-size:12.5px;color:var(--accent);padding:6px;cursor:pointer;font-weight:600}
  .morelink:hover{text-decoration:underline}

  /* ---------- results ---------- */
  .resbar{display:flex;align-items:center;gap:14px;margin-bottom:2px;flex-wrap:wrap}
  .rescount{font-size:14px;color:var(--ink-2)}
  .rescount b{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
  .sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
  .sort select{font-family:inherit;font-size:13px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);
    border-radius:8px;padding:6px 8px}
  .activefilters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 2px}

  .rec{padding:20px 2px;border-bottom:1px solid var(--rule);cursor:pointer}
  .rec:hover .rec-title{color:var(--accent)}
  .rec-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:6px}
  .rec-meta .pub{color:var(--ink-2);font-weight:600}
  .rec-meta .yr{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .rec-meta .sep{opacity:.4}
  .badge{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:2px 7px;border-radius:5px;
    border:1px solid var(--rule);color:var(--muted)}
  .badge.image{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
  .rec-id{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);opacity:.55}
  .rec-title{font-size:18px;line-height:1.3;color:var(--ink);margin:0 0 6px;font-weight:600;text-wrap:balance;letter-spacing:-.01em}
  .rec-snip{color:var(--ink-2);font-size:14px;line-height:1.55;margin:0 0 10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:78ch}
  .rec-tags{display:flex;gap:6px;flex-wrap:wrap}
  .tag{font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid transparent;
    padding:3px 9px;border-radius:999px}
  .tag:hover{border-color:var(--accent);color:var(--ink)}
  .empty{padding:60px 10px;text-align:center;color:var(--muted)}
  .empty b{color:var(--ink-2);font-size:18px;display:block;margin-bottom:6px;font-weight:600}

  /* ---------- drawer ---------- */
  .scrim{position:fixed;inset:0;background:rgba(15,20,25,.38);opacity:0;pointer-events:none;transition:opacity .22s;z-index:40}
  .scrim.on{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,94vw);background:var(--surface);
    box-shadow:var(--shadow);transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.1,1);z-index:41;
    display:flex;flex-direction:column;border-left:1px solid var(--rule)}
  .drawer.on{transform:none}
  .drawer-head{padding:18px 22px;border-bottom:1px solid var(--rule);display:flex;align-items:flex-start;gap:12px}
  .drawer-head .close{margin-left:auto}
  .drawer-body{overflow:auto;padding:22px;flex:1}
  .d-pub{color:var(--ink-2);font-weight:600;font-size:12.5px;margin-bottom:5px}
  .d-title{font-size:21px;line-height:1.28;margin:0;font-weight:600;text-wrap:balance;letter-spacing:-.01em}
  .d-sec{margin-top:22px}
  .d-sec h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 10px;font-weight:700;
    padding-bottom:6px;border-bottom:1px solid var(--rule)}
  .field{display:grid;grid-template-columns:132px 1fr;gap:10px;padding:5px 0;font-size:14px}
  .field .k{color:var(--muted);font-size:12.5px;padding-top:1px}
  .field .v{color:var(--ink)}
  .field .v.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .abstract{font-family:var(--serif);font-size:15px;line-height:1.66;color:var(--ink);white-space:pre-wrap;max-width:64ch}
  .drawer-foot{padding:14px 22px;border-top:1px solid var(--rule);display:flex;gap:10px;align-items:center;background:var(--surface-2)}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--page);
    padding:11px 18px;border-radius:10px;font-size:13.5px;opacity:0;pointer-events:none;transition:.2s;z-index:60}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ---------- design notes ---------- */
  .notes{border-top:1px solid var(--rule);background:var(--surface-2);margin-top:30px}
  .notes .wrap{padding:34px 24px 44px}
  .notes .ey{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
  .notes h2{font-size:20px;margin:6px 0 20px;font-weight:600}
  .ncols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .ncols h5{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
  .sw{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12.5px;color:var(--ink-2)}
  .sw i{width:22px;height:22px;border-radius:6px;border:1px solid var(--rule);flex:none}
  .sw code{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto}
  .spec{margin-bottom:12px}
  .spec .big{font-size:20px;color:var(--ink)}
  .spec .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
  .notes p{font-size:13px;color:var(--ink-2);line-height:1.6;max-width:36ch}
  .disclaim{font-size:12px;color:var(--muted);margin-top:24px}

  @media (max-width:860px){
    .grid{grid-template-columns:1fr;gap:8px}
    aside{position:static;order:2;border-top:1px solid var(--rule);padding-top:16px}
    .brand .sub{display:none}
    .ncols{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- app additions ---------- */
.pager{display:flex;gap:6px;justify-content:center;align-items:center;padding:26px 0 6px}
.pager button{min-width:36px;height:36px;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  border-radius:8px;font-size:13px;padding:0 10px}
.pager button:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
.pager button.on{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.pager button:disabled{opacity:.4;cursor:default}
.loading{padding:50px;text-align:center;color:var(--muted);font-size:14px}
.flash{background:var(--accent-weak);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  padding:10px 14px;border-radius:9px;margin:14px 0;font-size:14px}

/* login */
.authwrap{min-height:70vh;display:grid;place-items:center;padding:40px 20px}
.authcard{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:30px 28px;box-shadow:var(--shadow)}
.authcard h1{font-size:20px;margin:0 0 4px;font-weight:600}
.authcard p{color:var(--muted);font-size:13.5px;margin:0 0 22px}
.authcard label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:0 0 6px;font-weight:600}
.authcard input{width:100%;padding:11px 13px;border:1px solid var(--rule);border-radius:10px;background:#fff;
  color:#14171a;font-size:15px;margin-bottom:16px}
.authcard input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.authcard .btn.accent{width:100%;justify-content:center;padding:11px;font-size:15px}

/* record form */
.formwrap{max-width:820px;margin:0 auto;padding:26px 0 70px}
.formwrap h1{font-size:23px;font-weight:600;margin:0 0 4px}
.formwrap .crumb{color:var(--muted);font-size:13px;margin-bottom:22px}
.fset{border:1px solid var(--rule);border-radius:14px;padding:20px 22px;margin-bottom:18px;background:var(--surface)}
.fset h3{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 16px;font-weight:700}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.frow.one{grid-template-columns:1fr}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:2px}
.f label{font-size:12.5px;color:var(--ink-2);font-weight:600}
.f .hint{font-size:11.5px;color:var(--muted);font-weight:400}
.f input,.f select,.f textarea{padding:9px 11px;border:1px solid var(--rule);border-radius:9px;background:#fff;
  color:#14171a;font-size:14px;font-family:inherit;width:100%}
.f textarea{min-height:90px;resize:vertical;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.req{color:var(--accent)}
.tagpick{display:flex;flex-wrap:wrap;gap:7px;max-height:210px;overflow:auto;padding:12px;border:1px solid var(--rule);
  border-radius:10px;background:var(--surface-2)}
.tagpick label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);padding:5px 10px;border-radius:999px;font-weight:400}
.tagpick label:has(input:checked){background:var(--accent-weak);border-color:transparent;color:var(--accent);font-weight:600}
.tagpick input{accent-color:var(--accent);width:auto;flex:none;padding:0;margin:0;border:0;box-shadow:none}
.formbar{display:flex;gap:10px;align-items:center;margin-top:8px}
.formbar .danger{margin-left:auto;color:#c0392b;border-color:color-mix(in srgb,#c0392b 30%,transparent)}
.formbar .danger:hover{background:color-mix(in srgb,#c0392b 10%,transparent)}
.detailpage{max-width:820px;margin:0 auto;padding:26px 0 70px}
.detailpage .backlink{color:var(--muted);font-size:13px;margin-bottom:14px;display:inline-block}
.detailpage .backlink:hover{color:var(--accent)}
@media(max-width:680px){.frow{grid-template-columns:1fr}}
.facetfilter{width:100%;padding:6px 10px;border:1px solid var(--rule);border-radius:8px;background:#fff;
  color:#14171a;font-size:13px;margin:0 0 8px}
.facetfilter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.synced{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--rule);
  border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:12.5px;font-weight:500}
.synced svg{color:var(--accent)}
.synced b{color:var(--ink);font-weight:600}

/* ---------- dashboard + anomalies ---------- */
.dash{padding:26px 0 64px}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.dash-head h1{font-size:24px;font-weight:600;margin:2px 0 0;letter-spacing:-.02em}
.muted-count{color:var(--muted);font-weight:400;font-size:20px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.kpi{border:1px solid var(--rule);border-radius:13px;padding:15px 16px;background:var(--surface)}
.kpi .num{font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.kpi .num .sub2{font-size:11px;color:var(--muted);font-weight:600;margin:0 1px 0 1px}
.kpi .lbl{font-size:11.5px;color:var(--muted);margin-top:5px}
.problems-kpi{display:block;transition:border-color .15s}
.problems-kpi:hover{border-color:var(--muted)}
.problems-kpi.has .num{color:#B45309}
.problems-kpi.ok .num{color:#15803D}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.chart-card{border:1px solid var(--rule);border-radius:14px;padding:18px 20px;background:var(--surface)}
.chart-card h3{font-size:13px;font-weight:700;margin:0 0 15px;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.seeall{font-size:12px;color:var(--accent);font-weight:600}
.seeall:hover{text-decoration:underline}
.barlist{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:148px 1fr 42px;align-items:center;gap:10px}
.bar-label{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:999px;min-width:3px}
.bar-val{font-size:12px;font-family:var(--mono);color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.meters{display:flex;flex-direction:column;gap:15px}
.meter-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);margin-bottom:7px}
.meter-top b{color:var(--ink);font-variant-numeric:tabular-nums}
.probs{display:flex;flex-direction:column}
.prob-row{display:flex;align-items:center;gap:11px;padding:10px 6px;border-bottom:1px solid var(--rule);color:inherit}
.prob-row:last-child{border-bottom:0}
.prob-row:hover{background:var(--surface-2)}
.sev{width:9px;height:9px;border-radius:50%;flex:none}
.sev-critical{background:#B42318}.sev-warning{background:#B45309}.sev-info{background:#6c727a}.sev-ok{background:#15803D}
.prob-title{flex:1;font-size:13.5px;color:var(--ink)}
.prob-count{font-family:var(--mono);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.prob-count.zero{color:var(--muted);font-weight:400}
/* anomalies detail */
.anom{margin-bottom:26px;scroll-margin-top:80px}
.anom-head h3{font-size:15px;margin:0 0 3px;font-weight:600}
.anom-head p{color:var(--muted);font-size:13px;margin:0 0 12px}
.anom-n{font-family:var(--mono);font-size:12px;background:var(--accent-weak);color:var(--accent);padding:2px 9px;border-radius:999px;margin-left:6px;font-weight:600}
.anom-n.zero{background:var(--surface-2);color:var(--muted);font-weight:400}
.anom-list{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.anom-item{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 15px;border-bottom:1px solid var(--rule);color:inherit;align-items:baseline}
.anom-item:last-child{border-bottom:0}
.anom-item:hover{background:var(--surface-2)}
.ai-title{font-weight:600;font-size:14px}
.ai-meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:right}
.ai-detail{grid-column:1/-1;font-size:12.5px;color:#B45309}
.anom-more{padding:10px 15px;color:var(--muted);font-size:12.5px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(3,1fr)}.dash-grid{grid-template-columns:1fr}}
@media(max-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}.bar-row{grid-template-columns:110px 1fr 38px}}
.idlinks{display:flex;flex-wrap:wrap;gap:7px}
.idlinks a{font-family:var(--mono);font-size:12.5px;color:var(--accent);background:var(--accent-weak);
  padding:1px 7px;border-radius:6px;line-height:1.5}
.idlinks a:hover{filter:brightness(.94);text-decoration:none}
.bar-row.wide{grid-template-columns:minmax(0,1fr) 200px 44px}
.bar-row.wide .bar-label{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row.wide a.bar-label:hover{color:var(--accent)}
.bl-pub{color:var(--muted);font-weight:400}
@media(max-width:560px){.bar-row.wide{grid-template-columns:minmax(0,1fr) 90px 38px}}