:root {
    --teal:#0E3B39; --teal-2:#14524F; --teal-3:#08282B; --teal-soft:#E4EDEA;
    --amber:#C67C36; --amber-2:#A9662A; --amber-3:#E29B57; --amber-soft:#F6E7D6;
    --bone:#F4EEE3; --bone-2:#EDE4D3; --bone-3:#FAF6EE;
    --ink:#1A2422; --ink-2:#445651; --ink-3:#6B7B76;
    --line:#DDD2BC; --line-2:#E8DFCD; --white:#FFFFFF;
    --good:#1F7A5A; --warn:#B87514; --muted:#8A968F;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --radius:10px; --shadow:0 1px 2px rgba(8,40,43,.06), 0 6px 24px -12px rgba(8,40,43,.18);
  }
  * { box-sizing:border-box; }
  html,body { margin:0; padding:0; }
  body {
    font-family:var(--sans); background:var(--bone); color:var(--ink);
    font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4 { font-family:var(--serif); font-weight:500; color:var(--teal); margin:0; letter-spacing:-.01em; }
  a { color:var(--teal); }
  .serif { font-family:var(--serif); }
  .mono-num { font-variant-numeric:tabular-nums; }

  /* ---------- App shell ---------- */
  .topbar {
    display:flex; align-items:center; gap:20px; padding:0 22px; height:60px;
    background:var(--teal-3); color:var(--bone); position:sticky; top:0; z-index:50;
  }
  .brand { font-family:var(--serif); font-size:20px; color:var(--bone); font-weight:600; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; }
  .brand .dot { color:var(--amber-3); }
  .brand svg { width:22px; height:22px; }
  .viewswitch { display:flex; gap:4px; background:rgba(255,255,255,.08); padding:4px; border-radius:8px; margin-left:6px; }
  .viewswitch button {
    font-family:var(--sans); font-size:13px; font-weight:600; color:var(--bone);
    background:transparent; border:0; padding:7px 16px; border-radius:6px; cursor:pointer; letter-spacing:.01em;
  }
  .viewswitch button.on { background:var(--amber); color:var(--white); }
  .proto-badge { margin-left:auto; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-3); font-weight:700; border:1px solid rgba(226,155,87,.4); padding:4px 10px; border-radius:20px; }

  .shell { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 60px); }
  .side { background:var(--bone-3); border-right:1px solid var(--line); padding:22px 14px; }
  .side .grp { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:6px 10px 10px; }
  .side nav { display:flex; flex-direction:column; gap:2px; }
  .side nav a {
    display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px; text-decoration:none;
    color:var(--ink-2); font-size:14px; font-weight:500; cursor:pointer;
  }
  .side nav a .ic { width:17px; height:17px; flex:0 0 17px; color:currentColor; opacity:.75; }
  .side nav a:hover { background:var(--bone-2); color:var(--teal); }
  .side nav a.on { background:var(--teal); color:var(--bone); }
  .side nav a.on .ic { opacity:1; }
  .side .hint { margin:18px 10px 0; font-size:12px; color:var(--ink-3); line-height:1.5; border-top:1px solid var(--line-2); padding-top:14px; }

  .main { padding:32px 40px 80px; max-width:1120px; }
  .page { display:none; animation:fade .25s ease; }
  .page.on { display:block; }
  @keyframes fade { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
  @media (prefers-reduced-motion:reduce){ .page.on,.toast{animation:none;} }

  .ph { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:6px; }
  .ph h1 { font-size:29px; }
  .ph p.sub, .lead { color:var(--ink-2); font-size:15px; margin:6px 0 0; max-width:60ch; }
  .divider { height:1px; background:var(--line); margin:24px 0; border:0; }
  .eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-2); font-weight:700; }

  /* ---------- buttons / chips ---------- */
  .btn { font-family:var(--sans); font-size:14px; font-weight:600; border-radius:7px; padding:10px 18px; cursor:pointer; border:1px solid transparent; letter-spacing:.01em; }
  .btn.pri { background:var(--amber); color:#fff; }
  .btn.pri:hover { background:var(--amber-2); }
  .btn.ghost { background:transparent; color:var(--teal); border-color:var(--teal); }
  .btn.ghost:hover { background:var(--teal); color:var(--bone); }
  .btn.sm { padding:7px 12px; font-size:13px; }
  .btn.link { background:none; border:0; color:var(--teal); text-decoration:underline; padding:4px; cursor:pointer; font-weight:600; }

  .chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--bone-2); color:var(--ink-2); border:1px solid var(--line-2); }
  .chip.teal { background:var(--teal-soft); color:var(--teal); border-color:#CADED8; }
  .chip.amber { background:var(--amber-soft); color:var(--amber-2); border-color:#EBD3B7; }
  .pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; }
  .pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
  .pill.active { background:rgba(31,122,90,.12); color:var(--good); }
  .pill.new { background:rgba(198,124,54,.14); color:var(--amber-2); }
  .pill.pend { background:rgba(184,117,20,.14); color:var(--warn); }
  .pill.paused { background:rgba(138,150,143,.16); color:var(--muted); }

  .card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
  .pad { padding:22px 24px; }

  /* ---------- KPI tiles ---------- */
  .kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
  .kpi { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px; position:relative; overflow:hidden; }
  .kpi .lab { font-size:12px; color:var(--ink-2); font-weight:600; letter-spacing:.02em; }
  .kpi .val { font-family:var(--serif); font-size:34px; color:var(--teal); line-height:1.1; margin-top:8px; font-variant-numeric:tabular-nums; }
  .kpi .delta { font-size:12px; font-weight:600; margin-top:4px; }
  .kpi .delta.up { color:var(--good); }
  .kpi .rail { position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--amber); }
  @media (max-width:960px){ .kpis{ grid-template-columns:repeat(2,1fr);} }

  /* ---------- tables ---------- */
  .tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
  table { border-collapse:collapse; width:100%; font-size:14px; }
  thead th { text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bone-3); white-space:nowrap; }
  tbody td { padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
  tbody tr:last-child td { border-bottom:0; }
  tbody tr { cursor:pointer; }
  tbody tr:hover { background:var(--bone-3); }
  td .who { font-weight:600; color:var(--ink); }
  td .meta { font-size:12.5px; color:var(--ink-3); }
  .typebadge { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:5px; }
  .typebadge.prov { background:var(--amber-soft); color:var(--amber-2); }
  .typebadge.clin { background:var(--teal-soft); color:var(--teal); }

  .filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
  input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
    font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--white);
    border:1px solid var(--line); border-radius:7px; padding:9px 12px; width:100%;
  }
  input:focus, select:focus, textarea:focus { outline:2px solid var(--amber-3); outline-offset:1px; border-color:var(--amber-3); }
  .search { position:relative; flex:1; min-width:220px; max-width:340px; }
  .search input { padding-left:34px; }
  .search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3); }
  .seg { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
  .seg button { font-family:var(--sans); font-size:13px; font-weight:600; padding:8px 14px; background:var(--white); border:0; border-right:1px solid var(--line); cursor:pointer; color:var(--ink-2); }
  .seg button:last-child { border-right:0; }
  .seg button.on { background:var(--teal); color:var(--bone); }

  /* ---------- match cards ---------- */
  .matchgrid { display:grid; grid-template-columns:1fr; gap:14px; }
  .match { display:grid; grid-template-columns:1fr auto 1fr auto; gap:18px; align-items:center; padding:18px 22px; }
  @media (max-width:820px){ .match{ grid-template-columns:1fr; } }
  .party .role { font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
  .party.prov .role { color:var(--amber-2); }
  .party.clin .role { color:var(--teal); }
  .party .nm { font-family:var(--serif); font-size:18px; color:var(--ink); margin-top:2px; }
  .party .dt { font-size:13px; color:var(--ink-3); margin-top:3px; }
  .party .tags { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; }
  .scorewrap { text-align:center; }
  .scoredial { width:66px; height:66px; }
  .scoredial text { font-family:var(--serif); }
  .matchact { display:flex; flex-direction:column; gap:8px; }
  .matched-on { margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); font-size:13px; color:var(--ink-2); grid-column:1 / -1; }
  .matched-on b { color:var(--teal); font-weight:600; }
  .mini-connect { display:flex; align-items:center; justify-content:center; color:var(--amber); }

  /* ---------- map ---------- */
  .maplayout { display:grid; grid-template-columns:1.35fr .9fr; gap:22px; align-items:start; }
  @media (max-width:960px){ .maplayout{ grid-template-columns:1fr; } }
  .mapcard { padding:18px; }
  .mapcanvas { position:relative; width:100%; }
  .mapcanvas svg { width:100%; height:auto; display:block; }
  .maplegend { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:13px; color:var(--ink-2); }
  .lg { display:inline-flex; align-items:center; gap:7px; }
  .lg .sw { width:12px; height:12px; border-radius:50%; }
  .layerctl { display:flex; gap:8px; margin-bottom:14px; }
  .maptip { position:absolute; pointer-events:none; background:var(--teal-3); color:var(--bone); font-size:12.5px; padding:9px 12px; border-radius:8px; opacity:0; transform:translate(-50%,-118%); transition:opacity .12s; white-space:nowrap; z-index:5; box-shadow:var(--shadow); }
  .maptip b { color:var(--amber-3); }
  .maptip .row { display:flex; justify-content:space-between; gap:16px; }
  .gap-list { display:flex; flex-direction:column; gap:10px; }
  .gap-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:var(--white); }
  .gap-row .barwrap { flex:1; height:8px; background:var(--bone-2); border-radius:6px; overflow:hidden; }
  .gap-row .bar { height:100%; border-radius:6px; }
  .gap-row .city { width:96px; font-weight:600; font-size:13.5px; }
  .gap-row .num { width:auto; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

  /* ---------- member ---------- */
  .signin { max-width:400px; margin:6vh auto 0; }
  .signin .card { padding:34px 32px; }
  .field { margin-bottom:16px; }
  .field label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
  .field .help { font-weight:400; color:var(--ink-3); font-size:12.5px; }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
  .dash-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:start; }
  @media (max-width:820px){ .dash-grid{ grid-template-columns:1fr; } }
  .meter { height:10px; background:var(--bone-2); border-radius:6px; overflow:hidden; }
  .meter > i { display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--amber-3)); border-radius:6px; }
  .todo { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
  .todo .t { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:14px; }
  .todo .t:last-child { border-bottom:0; }
  .todo .t .tick { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); flex:0 0 18px; display:grid; place-items:center; }
  .todo .t.done .tick { background:var(--good); border-color:var(--good); color:#fff; }
  .todo .t.done span { color:var(--ink-3); text-decoration:line-through; }
  .oppo { display:flex; flex-direction:column; gap:12px; }
  .oppo .o { padding:14px 16px; border:1px solid var(--line); border-radius:9px; }
  .oppo .o .top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .oppo .o h4 { font-size:16px; }
  .formsection { margin-bottom:10px; }
  .formsection h3 { font-size:16px; display:flex; align-items:center; gap:10px; margin-bottom:2px; }
  .formsection h3 .n { width:24px; height:24px; border-radius:6px; background:var(--teal); color:var(--bone); font-family:var(--sans); font-size:13px; font-weight:700; display:grid; place-items:center; }
  .formsection .desc { font-size:13px; color:var(--ink-3); margin:0 0 14px 34px; }
  .checks { display:flex; flex-wrap:wrap; gap:8px; }
  .checks label { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; padding:7px 12px; border:1px solid var(--line); border-radius:20px; cursor:pointer; background:var(--white); color:var(--ink-2); }
  .checks input { accent-color:var(--teal); }
  .savebar { position:sticky; bottom:0; background:linear-gradient(0deg,var(--bone) 60%,transparent); padding:18px 0 6px; display:flex; gap:12px; align-items:center; }
  .savebar .note { font-size:13px; color:var(--ink-3); }

  .toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--teal); color:var(--bone); padding:12px 22px; border-radius:8px; font-size:14px; font-weight:600; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100; }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }
  .toast .ok { color:var(--amber-3); margin-right:8px; }

  .drawer-bg { position:fixed; inset:0; background:rgba(8,40,43,.4); opacity:0; pointer-events:none; transition:opacity .2s; z-index:60; }
  .drawer-bg.show { opacity:1; pointer-events:auto; }
  .drawer { position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--bone-3); box-shadow:-8px 0 40px -12px rgba(8,40,43,.4); transform:translateX(100%); transition:transform .25s; z-index:70; overflow-y:auto; }
  .drawer.show { transform:none; }
  .drawer .dhead { padding:22px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bone-3); }
  .drawer .dbody { padding:22px 24px; }
  .kv { display:grid; grid-template-columns:130px 1fr; gap:6px 14px; font-size:14px; margin-top:6px; }
  .kv dt { color:var(--ink-3); }
  .kv dd { margin:0; color:var(--ink); font-weight:500; }
  .close-x { position:absolute; top:18px; right:18px; background:none; border:0; font-size:22px; color:var(--ink-2); cursor:pointer; line-height:1; }
  .stub { color:var(--ink-3); font-size:13px; font-style:italic; }
  .callout { background:var(--teal-soft); border:1px solid #CADED8; border-left:3px solid var(--teal); border-radius:8px; padding:12px 16px; font-size:13.5px; color:var(--teal); }