:root{
  --bg:#f7f8fa; --panel:#ffffff; --ink:#101828; --muted:#667085; --line:#e4e7ec;
  --accent:#0f766e; --accent-ink:#ffffff; --accent-soft:#e6f4f1;
  --high:#b42318; --high-bg:#fef3f2;
  --medium:#b54708; --medium-bg:#fffaeb;
  --low:#027a48; --low-bg:#ecfdf3;
  --na:#475467; --na-bg:#f2f4f7;
  --top-h:56px;
  --sticky-h:126px;
  --nav-h:60px;
  --radius:14px; --tap:48px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --panel:#121a2b; --ink:#e6edf7; --muted:#94a3b8; --line:#22304a;
         --accent:#2dd4bf; --accent-ink:#062a26; --accent-soft:#10312c;
         --high:#fda4a4; --high-bg:#2a1518; --medium:#fbbf24; --medium-bg:#2a2110; --low:#6ee7b7; --low-bg:#0f2a22;
         --na:#cbd5e1; --na-bg:#1c2740; }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  overflow-x:hidden;
  background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-text-size-adjust:100%;
  /* room for the fixed bottom navigation */
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
.muted{color:var(--muted)}
.small{font-size:.85rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* top bar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.1rem}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);display:inline-block}

.icon-btn{
  min-width:var(--tap); min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:12px; font-weight:650; font-size:1.3rem; line-height:1; cursor:pointer;
}
.icon-btn:active{transform:scale(.98)}

/* search + filter */
.searchwrap{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px 6px; background:var(--bg);
}
.searchbox{
  flex:1 1 auto; min-width:0;
  display:flex;align-items:center;gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:0 12px; min-height:var(--tap);
}
.searchbox svg{color:var(--muted);flex:0 0 auto}
.searchbox input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--ink);
  font-size:1.05rem; padding:12px 0; min-height:var(--tap); outline:none;
}
.searchbox input::-webkit-search-cancel-button{display:none}
.clear{
  border:0;background:transparent;color:var(--muted);font-size:1.6rem;line-height:1;
  min-width:44px;min-height:44px;cursor:pointer;
}
.filter-btn{
  position:relative; flex:0 0 auto;
  width:var(--tap); height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:var(--radius); cursor:pointer;
}
.filter-btn.has-filters{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.filter-count{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  border:2px solid var(--bg); border-radius:999px;
  font-size:.72rem; font-weight:700; line-height:1;
}

/* meta */
.meta{margin:2px 16px 6px;color:var(--muted);font-size:.9rem}

/* list */
.list{list-style:none;margin:0;padding:0 16px 10px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.group{margin-bottom:4px;min-width:0}
.grouphead{
  position:sticky; top:var(--top-h,56px); z-index:10;
  display:flex; align-items:center;
  padding:10px 16px 8px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  font-size:.95rem; font-weight:700; letter-spacing:.01em;
  color:var(--ink);
}
.card{
  display:flex;align-items:center;gap:12px;
  width:100%; min-width:0; max-width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; min-height:var(--tap); cursor:pointer;
  color:inherit; font:inherit;
}
.card:active{transform:scale(.995)}
.card .grow{flex:1;min-width:0}
.card .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .sub{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codes{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.codechip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px; padding:1px 6px; border-radius:6px;
  background:var(--na-bg); color:var(--na);
  font-size:.72rem; font-weight:700; letter-spacing:.02em; line-height:1.5;
}
.codechip.q{opacity:.75}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;font-size:.82rem;font-weight:650;white-space:nowrap;
}
.badge.r0{background:var(--low-bg);color:var(--low)}
.badge.r1{background:var(--medium-bg);color:var(--medium)}
.badge.r2,.badge.r3{background:var(--high-bg);color:var(--high)}
.badge.rna{background:var(--na-bg);color:var(--na)}
.pip{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.pip.r0{background:var(--low)} .pip.r1{background:var(--medium)} .pip.r2,.pip.r3{background:var(--high)} .pip.rna{background:var(--na)}

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

/* views */
.view-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px 12px}
.view-head h1{font-size:1.35rem}
.link-btn{border:0;background:transparent;color:var(--accent);font-size:.9rem;padding:8px 10px;cursor:pointer;min-height:var(--tap)}
.link-btn.danger{color:var(--high)}

/* recent view */
.recentv{list-style:none;margin:0;padding:0 16px;display:grid;gap:8px}
.recent-row{display:flex;align-items:stretch;gap:8px;min-width:0}
.row-open{
  flex:1 1 auto; min-width:0; min-height:56px;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  color:inherit; font:inherit; cursor:pointer;
}
.row-open .grow{flex:1;min-width:0}
.row-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-cat{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-open .badge{font-size:.76rem;padding:4px 9px}
.row-remove{
  flex:0 0 auto; width:var(--tap); min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); color:var(--muted); cursor:pointer;
}
.row-remove:active{color:var(--high);border-color:var(--high)}

/* confirm bar */
.confirmbar{
  margin:0 16px 12px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel);
}
.confirmbar p{margin:0 0 10px;font-size:.92rem}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px}
.confirm-actions .btn{flex:0 0 auto;padding:0 16px}

/* buttons */
.btn{
  min-height:var(--tap); border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font:inherit; font-weight:650;
  padding:0 18px; cursor:pointer;
}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.danger{background:var(--high); color:#fff; border-color:transparent}
.btn.ghost{background:transparent}
.btn:active{transform:scale(.99)}

/* info view */
.info{padding:4px 16px 8px;line-height:1.55}
.info h1{font-size:1.4rem;margin-bottom:10px}
.info h2{font-size:1.02rem;margin:24px 0 8px}
.info p{margin:0 0 10px}
.steps{margin:0 0 8px;padding-left:22px}
.steps li{margin:6px 0}
.legend{margin:0 0 8px}
.legend .lrow{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:.92rem}
.legend .lrow .badge{min-width:58px;justify-content:center;flex:0 0 auto}
.legend .lrow .codechip{min-width:28px;flex:0 0 auto;margin-top:2px}
.info a{color:var(--accent)}
.info .disclaimer{color:var(--ink);font-size:.9rem;font-weight:650;margin-top:22px;margin-bottom:4px}

/* footer */
.foot{padding:10px 16px 24px;border-top:1px solid var(--line);margin-top:14px}
.foot a{color:var(--accent)}
.fineprint{color:var(--muted);font-size:.75rem;margin:0}

/* bottom navigation */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(3,minmax(0,160px)); justify-content:center;
  background:var(--panel);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 12px rgba(6,10,18,.06);
}
.navbtn{
  position:relative; min-height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:0; background:transparent; color:var(--muted);
  font:inherit; font-size:.72rem; font-weight:600; letter-spacing:.01em;
  cursor:pointer; padding:6px 4px;
}
.navbtn svg{display:block}
.navbtn.is-active{color:var(--accent)}
.navbtn.is-active::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--accent);
}
.navbtn:active{background:var(--accent-soft)}

/* sheets / dialogs */
.sheet{
  border:1px solid var(--line); border-radius:18px 18px 0 0;
  background:var(--panel); color:var(--ink);
  width:100%; max-width:640px; max-height:88vh; margin:auto auto 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
}
.sheet::backdrop{background:rgba(6,10,18,.55);backdrop-filter:blur(2px)}
/* A closed <dialog> must not render. The class rules below set display:flex, which otherwise
   overrides the browser's built-in dialog:not([open]) { display: none }. */
dialog.sheet:not([open]){display:none !important}
@media (min-width:720px){
  .sheet{border-radius:18px;margin:auto;max-height:80vh}
}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.sheet-head h2{font-size:1.15rem}
.sheet-head .icon-btn{font-size:1.4rem;line-height:1}

/* filter sheet */
.filtersheet{display:flex;flex-direction:column;padding:18px 0 0;overflow:hidden;max-height:min(88vh,720px)}
.filtersheet .sheet-head{padding:0 18px;flex:0 0 auto}
.fs-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 18px;-webkit-overflow-scrolling:touch}
.fs-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 8px}
.optgroup{display:grid;gap:8px}
.optrow{
  width:100%; min-height:52px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px; text-align:left;
  background:transparent; color:var(--ink); font:inherit;
  border:1px solid var(--line); border-radius:12px; cursor:pointer;
}
.optrow:active{transform:scale(.995)}
.optrow.is-on{border-color:var(--accent);background:var(--accent-soft);font-weight:650}
.optlabel{display:flex;align-items:center;gap:10px;min-width:0}
.optlabel .codechip{min-width:28px}
.optcheck{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line); display:grid; place-items:center;
  color:var(--accent-ink); font-size:.8rem; line-height:1; background:transparent;
}
.optrow.is-on .optcheck{border-color:var(--accent);background:var(--accent)}
.optrow.is-on .optcheck::after{content:"✓"}
.fs-count{margin:14px 0 16px;color:var(--muted);font-size:.9rem}
.fs-actions{
  flex:0 0 auto; display:flex; gap:10px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--panel);
}
.fs-actions .btn{flex:1}

/* detail sheet */
.riskline{display:flex;align-items:center;gap:10px;margin:6px 0 12px;flex-wrap:wrap}
.riskline .badge{font-size:.9rem}
.flaglist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.flaglist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.flaglist .codetext{color:var(--muted);font-size:.9rem}
.note{margin-top:14px;line-height:1.5}
.note:empty{display:none}
.sheet-hint{margin-top:12px;color:var(--muted);font-size:.78rem}