:root{
    --vs-red:#E10A0A;
    --vs-red-deep:#A80808;
    --vs-purple:#5C2D91;
    --ink:#1A1A1A;
    --ink-mid:#55555C;
    --ink-soft:#7A7A82;
    --rule:#E2E2E6;
    --surface:#FFFFFF;
    --surface-alt:#F7F7F9;
    --api-bg:#FDEDED;
    --portal-bg:#F1EBF8;
    --radius:4px;
  }

  *{box-sizing:border-box;}

  .wrap{max-width:960px;margin:0 auto;padding:0 24px;}

  /* ---------- Page head ---------- */

  .masthead{background:var(--surface);border-bottom:3px solid var(--vs-red);}
  .masthead .wrap{padding-top:22px;padding-bottom:22px;}
  .masthead .brand{
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--vs-red);font-weight:700;margin:0;
  }

  .pagehead{padding:44px 0 28px;}
  .pagehead h1{
    margin:0 0 6px;font-size:38px;line-height:1.15;font-weight:700;letter-spacing:-.015em;
  }
  .pagehead .kicker{
    margin:0 0 20px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  }

  /* ---------- Controls ---------- */

  .controls{
    display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;
    justify-content:space-between;
    padding:0 0 18px;border-bottom:1px solid var(--rule);margin-bottom:34px;
  }
  .ctrl-group{display:flex;flex-direction:column;gap:7px;}
  .ctrl-label{
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;
  }
  .segmented{display:inline-flex;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
  .segmented button{
    appearance:none;border:0;background:transparent;
    font:inherit;font-size:14px;padding:9px 16px;cursor:pointer;color:var(--ink-mid);
    border-right:1px solid var(--rule);
  }
  .segmented button:last-child{border-right:0;}
  .segmented button[aria-pressed="true"]{background:var(--ink);color:#fff;}
  .segmented button:focus-visible{outline:2px solid var(--vs-red);outline-offset:-2px;}
  .segmented button:hover:not([aria-pressed="true"]){background:var(--surface-alt);}

  .counts{font-size:13px;color:var(--ink-soft);padding-bottom:9px;}

  /* ---------- Groups ---------- */

  .group{margin-bottom:46px;}
  .group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
  .group-head h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em;}
  .group-head .count{font-size:13px;color:var(--ink-soft);}
  .group-note{margin:0 0 18px;font-size:14px;color:var(--ink-mid);}
  .group-rule{height:3px;border-radius:2px;margin-bottom:18px;}
  .group-rule.api{background:var(--vs-red);}
  .group-rule.portal{background:var(--vs-purple);}
  .group-rule.time{background:var(--ink);}

  /* ---------- Cards ---------- */

  .items{display:grid;gap:14px;}

  .item{
    background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
    padding:20px 22px;border-left:4px solid var(--rule);
  }
  .item[data-type="api"]{border-left-color:var(--vs-red);}
  .item[data-type="portal"]{border-left-color:var(--vs-purple);}

  .item-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px;}
  .item h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;}

  .tags{display:flex;gap:7px;flex-wrap:wrap;}
  .tag{
    font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
    padding:4px 9px;border-radius:2px;white-space:nowrap;
  }
  .tag.api{background:var(--api-bg);color:var(--vs-red-deep);}
  .tag.portal{background:var(--portal-bg);color:var(--vs-purple);}
  .tag.when{background:var(--surface-alt);color:var(--ink-mid);border:1px solid var(--rule);}

  .item p{margin:0 0 10px;color:var(--ink-mid);font-size:16px;}
  .item p:last-of-type{margin-bottom:0;}
  .item p b{color:var(--ink);}
  .item ol{margin:0 0 10px;padding-left:20px;color:var(--ink-mid);font-size:16px;}
  .item ol li{margin-bottom:3px;}

  .status{
    display:flex;gap:26px;flex-wrap:wrap;
    margin-top:16px;padding-top:13px;border-top:1px solid var(--rule);
    font-size:13px;color:var(--ink-soft);
  }
  .status span b{color:var(--ink);font-weight:700;}

  /* ---------- Empty state ---------- */

  .empty{
    background:var(--surface);border:1px dashed #C9C9D0;border-radius:var(--radius);
    padding:26px 22px;color:var(--ink-mid);font-size:15px;
  }
  .empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:6px;}
  .empty p{margin:0;max-width:62ch;}

  /* ---------- Foot ---------- */

  .pagefoot{
    margin-top:14px;padding:26px 0 60px;border-top:1px solid var(--rule);
    font-size:13px;color:var(--ink-soft);
  }
  .pagefoot p{margin:0;}

  @media (max-width:640px){
    .pagehead{padding:30px 0 22px;}
    .pagehead h1{font-size:29px;}
    .controls{align-items:flex-start;}
    .counts{padding-bottom:0;}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important;}
  }