/* PeptideTech design system v3.1 (Night Glass), scoped to .pt-root. Generated by scripts/hub/port-ds.mjs. Do not edit. */
/* PeptideTech tokens for the canvas — generated from ds/pt/tokens.json (v3.1, Night Glass). */

.pt-root {
  color-scheme: dark;
  --surface-100: #090c13; --surface-200: #131824; --surface-300: #1a2030; --surface-inverse: #1b2246;
  --ink-inverse: #eef1fb; --ink-inverse-muted: #aeb6d6;
  --line: rgba(255,255,255,0.08); --line-strong: #7a849b;
  --ink: #eef1f8; --ink-muted: #a6aec0; --ink-subtle: #959eb2;
  --brand: #8fa3ff; --brand-strong: #b4c2ff; --on-brand: #0b1233; --brand-soft: #1e2752;
  --accent: #78f0cc; --accent-strong: #a6f7df; --on-accent: #05241b; --accent-text: #78f0cc; --accent-soft: #123a31;
  --pos: #5ee08f; --pos-strong: #90eeb3; --pos-soft: #10301e;
  --info: #7cbcff; --info-soft: #132a45;
  --amber: #f2c14e; --amber-soft: #33280b;
  --clay: #f69c5e; --clay-soft: #3a2013;
  --danger: #ff7373; --danger-soft: #3d1717;
  --grade-b: #bce35e; --grade-b-soft: #222e0e;
  --glass-top: rgba(44,52,68,0.70); --glass-bottom: rgba(18,22,30,0.55); --glass-rim: rgba(255,255,255,0.14);
  --glass-highlight: rgba(255,255,255,0.12); --glass-shadow: rgba(0,0,0,0.75);
  --shadow-glass: inset 0 1px 0 0 rgba(255,255,255,0.12), 0 14px 30px -18px rgba(0,0,0,0.85);
  --shadow-float: inset 0 1px 0 0 rgba(255,255,255,0.14), 0 24px 48px -20px rgba(0,0,0,0.9);
  --shadow-glow: 0 10px 28px -10px rgba(120,240,204,0.55);
  --shadow-focus: 0 0 0 2px #090c13, 0 0 0 4px #78f0cc;
  --shadow-sm: inset 0 1px 0 0 rgba(255,255,255,0.10), 0 6px 16px -10px rgba(0,0,0,0.8);
  --glow-brand: rgba(143,163,255,0.16); --glow-accent: rgba(120,240,204,0.11); --grid-ink: rgba(255,255,255,0.035);
}
[data-theme="light"] .pt-root, .pt-root[data-theme="light"] {
  color-scheme: light;
  --surface-100: #eceff6; --surface-200: #ffffff; --surface-300: #e3e7f0; --surface-inverse: #121827;
  --ink-inverse: #eef1f8; --ink-inverse-muted: #a6aec2;
  --line: rgba(16,22,40,0.09); --line-strong: #737b8f;
  --ink: #0e1220; --ink-muted: #434a5c; --ink-subtle: #596175;
  --brand: #3a4bd8; --brand-strong: #2a38b0; --on-brand: #ffffff; --brand-soft: #e3e7fd;
  --accent: #14b88f; --accent-strong: #0f9a77; --on-accent: #04231a; --accent-text: #08725a; --accent-soft: #d5f3ea;
  --pos: #15703c; --pos-strong: #0e552c; --pos-soft: #d7efdf;
  --info: #1d5fa8; --info-soft: #e0ebf8;
  --amber: #7a5200; --amber-soft: #f5e9c8;
  --clay: #a8441a; --clay-soft: #f7e1d4;
  --danger: #a02c1c; --danger-soft: #f8ddd7;
  --grade-b: #4a6a0b; --grade-b-soft: #e6efcf;
  --glass-top: rgba(255,255,255,0.80); --glass-bottom: rgba(255,255,255,0.58); --glass-rim: rgba(16,22,40,0.10);
  --glass-highlight: rgba(255,255,255,0.95); --glass-shadow: rgba(24,30,60,0.22);
  --shadow-glass: inset 0 1px 0 0 rgba(255,255,255,0.95), 0 14px 30px -18px rgba(24,30,60,0.28);
  --shadow-float: inset 0 1px 0 0 rgba(255,255,255,0.95), 0 24px 48px -20px rgba(24,30,60,0.35);
  --shadow-glow: 0 10px 24px -12px rgba(15,154,119,0.55);
  --shadow-focus: 0 0 0 2px #eceff6, 0 0 0 4px #08725a;
  --shadow-sm: inset 0 1px 0 0 rgba(255,255,255,0.95), 0 6px 16px -10px rgba(24,30,60,0.25);
  --glow-brand: rgba(58,75,216,0.10); --glow-accent: rgba(20,184,143,0.10); --grid-ink: rgba(14,18,32,0.035);
}
.pt-root {
  --link: var(--brand); --focus: var(--accent-text);
  --grade-a: var(--pos); --grade-a-soft: var(--pos-soft); --grade-c: var(--amber); --grade-c-soft: var(--amber-soft);
  --grade-d: var(--clay); --grade-d-soft: var(--clay-soft); --grade-f: var(--danger); --grade-f-soft: var(--danger-soft);
  --price-down: var(--pos); --price-up: var(--clay);
  --font-sans: var(--hub-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--hub-mono), ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: var(--hub-serif), "Iowan Old Style", Georgia, serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px;
  --control-sm: 32px; --control-md: 40px; --control-lg: 52px; --content-max: 1240px; --measure: 68ch;
}

/* The ground: blue-black under a periwinkle and a mint glow and a faint 44px grid. */
.pt-root .pt-ground {
  background:
    radial-gradient(900px 600px at 8% -4%, var(--glow-brand), transparent 70%),
    radial-gradient(800px 560px at 96% 2%, var(--glow-accent), transparent 70%),
    linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--surface-100);
  color: var(--ink); font-family: var(--font-sans);
}

/* Text styles */
.pt-root .display-xl { font: 700 64px/64px var(--font-sans); letter-spacing: -0.045em; }
.pt-root .display-lg { font: 700 44px/48px var(--font-sans); letter-spacing: -0.035em; }
.pt-root .heading-1 { font: 700 32px/36px var(--font-sans); letter-spacing: -0.03em; }
.pt-root .heading-2 { font: 700 24px/28px var(--font-sans); letter-spacing: -0.025em; }
.pt-root .heading-3 { font: 650 17px/22px var(--font-sans); letter-spacing: -0.01em; }
.pt-root .body-lg { font: 400 17px/27px var(--font-sans); }
.pt-root .body { font: 400 15px/22px var(--font-sans); }
.pt-root .body-sm { font: 400 13px/18px var(--font-sans); }
.pt-root .eyebrow { font: 500 13px/18px var(--font-sans); color: var(--ink-subtle); }
.pt-root .data-xl { font: 600 40px/44px var(--font-mono); letter-spacing: -0.04em; }
.pt-root .data-lg { font: 600 24px/28px var(--font-mono); letter-spacing: -0.03em; }
.pt-root .data { font: 450 14px/20px var(--font-mono); }
.pt-root .data-sm { font: 400 12px/16px var(--font-mono); }
.pt-root .article-title { font: 480 34px/40px var(--font-serif); letter-spacing: -0.01em; }
.pt-root .standfirst { font: italic 400 20px/30px var(--font-serif); }
@media (max-width: 720px) {
  .pt-root .display-xl { font-size: 42px; line-height: 44px; }
  .pt-root .display-lg { font-size: 34px; line-height: 38px; }
}

/* Glass for plain-markup blocks that are not a component */
.pt-root .pt-g { background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); border: 1px solid var(--glass-rim); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* PeptideTech v2 — every value reads a token from tokens.css */
.pt-root { margin: 0; background: var(--surface-100); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; }
.pt-root .pt-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); box-sizing: border-box; }
.pt-root .pt-muted { color: var(--ink-subtle); }
.pt-root .pt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-root .pt-icon { flex: none; display: inline-block; vertical-align: middle; }
.pt-root .pt-meta { font: 400 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .pt-eyebrow { margin: 0 0 var(--space-2); font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.pt-root .pt-textlink { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--link); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.pt-root .pt-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-root .pt-mono-txt { font: 450 14px/20px var(--font-mono); }
.pt-root :where(.pt-btn, .pt-chip, .pt-tab, .pt-seg-opt, .pt-tier, .pt-coupon, a, button, input):focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pt-root .pt-search:focus-within, .pt-root .pt-field-box:focus-within, .pt-root .pt-coa-input:focus-within { box-shadow: var(--shadow-focus); border-color: var(--focus); }

/* Grade colour hooks */
.pt-root .pt-g-a { --g: var(--grade-a); --g-soft: var(--grade-a-soft); }
.pt-root .pt-g-b { --g: var(--grade-b); --g-soft: var(--grade-b-soft); }
.pt-root .pt-g-c { --g: var(--grade-c); --g-soft: var(--grade-c-soft); }
.pt-root .pt-g-d { --g: var(--grade-d); --g-soft: var(--grade-d-soft); }
.pt-root .pt-g-f { --g: var(--grade-f); --g-soft: var(--grade-f-soft); }
.pt-root .pt-g-brand { --g: var(--brand); --g-soft: var(--brand-soft); }

/* Logo */
.pt-root .pt-logo { display: block; flex: none; }
.pt-root .pt-logo-brand .pt-logo-stroke { stroke: var(--accent-text); } .pt-root .pt-logo-brand .pt-logo-fill { fill: var(--accent-text); } .pt-root .pt-logo-brand .pt-logo-text { fill: var(--ink); }
.pt-root .pt-logo-ink .pt-logo-stroke { stroke: var(--ink); } .pt-root .pt-logo-ink .pt-logo-fill, .pt-root .pt-logo-ink .pt-logo-text { fill: var(--ink); }
.pt-root .pt-logo-inverse .pt-logo-stroke { stroke: var(--accent); } .pt-root .pt-logo-inverse .pt-logo-fill { fill: var(--accent); } .pt-root .pt-logo-inverse .pt-logo-text { fill: var(--ink-inverse); }
.pt-root .pt-logo-on-brand .pt-logo-stroke { stroke: var(--on-brand); } .pt-root .pt-logo-on-brand .pt-logo-fill, .pt-root .pt-logo-on-brand .pt-logo-text { fill: var(--on-brand); }
.pt-root .pt-logo-icon .pt-logo-tile { fill: var(--brand); } .pt-root .pt-logo-icon .pt-logo-onstroke { stroke: var(--on-brand); } .pt-root .pt-logo-icon .pt-logo-onfill { fill: var(--on-brand); }
.pt-root .pt-logo-icon.pt-logo-ink .pt-logo-tile { fill: var(--ink); } .pt-root .pt-logo-icon.pt-logo-ink .pt-logo-onstroke { stroke: var(--surface-100); } .pt-root .pt-logo-icon.pt-logo-ink .pt-logo-onfill { fill: var(--surface-100); }

/* Button */
.pt-root .pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; height: var(--control-md); padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font: 600 14px/20px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.pt-root .pt-btn-sm { height: var(--control-sm); padding: 0 12px; font-size: 13px; gap: 6px; }
.pt-root .pt-btn-lg { height: var(--control-lg); padding: 0 22px; font-size: 15px; }
.pt-root .pt-btn-icononly { padding: 0; width: var(--control-md); } .pt-root .pt-btn-sm.pt-btn-icononly { width: var(--control-sm); }
.pt-root .pt-btn-primary { background: var(--brand); color: var(--on-brand); } .pt-root .pt-btn-primary:hover { background: var(--brand-strong); }
.pt-root .pt-btn-secondary { background: var(--surface-200); color: var(--ink); border-color: var(--line-strong); } .pt-root .pt-btn-secondary:hover { border-color: var(--ink); }
.pt-root .pt-btn-ghost { background: transparent; color: var(--ink-muted); } .pt-root .pt-btn-ghost:hover { background: var(--surface-300); color: var(--ink); }
.pt-root .pt-btn-inverse { background: var(--ink); color: var(--surface-100); } .pt-root .pt-btn-inverse:hover { opacity: .88; }
.pt-root .pt-btn-link { background: transparent; color: var(--link); padding: 0; height: auto; text-decoration: underline; text-underline-offset: 3px; }
.pt-root .pt-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Badge, status, provenance */
.pt-root .pt-badge, .pt-root .pt-status, .pt-root .pt-prov { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: var(--radius-xs); font: 600 12px/16px var(--font-sans); white-space: nowrap; box-sizing: border-box; }
.pt-root .pt-badge { background: var(--surface-300); color: var(--ink-muted); }
.pt-root .pt-badge-positive { background: var(--pos-soft); color: var(--pos-strong); } .pt-root .pt-badge-info { background: var(--info-soft); color: var(--info); }
.pt-root .pt-badge-amber { background: var(--amber-soft); color: var(--amber); } .pt-root .pt-badge-clay { background: var(--clay-soft); color: var(--clay); }
.pt-root .pt-badge-danger { background: var(--danger-soft); color: var(--danger); } .pt-root .pt-badge-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.pt-root .pt-badge-solid { background: var(--ink); color: var(--surface-100); }
.pt-root .pt-status { background: var(--surface-300); color: var(--ink-muted); }
.pt-root .pt-status-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.pt-root .pt-status-positive { background: var(--pos-soft); color: var(--pos-strong); } .pt-root .pt-status-info { background: var(--info-soft); color: var(--info); }
.pt-root .pt-status-amber { background: var(--amber-soft); color: var(--amber); } .pt-root .pt-status-danger { background: var(--danger-soft); color: var(--danger); }
.pt-root .pt-prov { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 500; }
.pt-root .pt-prov-pos { background: var(--pos-soft); color: var(--pos-strong); box-shadow: none; }
.pt-root .pt-prov-pos-outline { color: var(--pos); box-shadow: inset 0 0 0 1px var(--pos); }
.pt-root .pt-prov-danger { background: var(--danger-soft); color: var(--danger); box-shadow: none; }

/* Search */
.pt-root .pt-search { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; height: var(--control-md); margin: 0; padding: 0 6px 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-200); color: var(--ink-subtle); }
.pt-root .pt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.pt-root .pt-search input::placeholder { color: var(--ink-subtle); } .pt-root .pt-search input::-webkit-search-cancel-button { display: none; }
.pt-root .pt-search-lg { height: 64px; padding: 0 8px 0 20px; gap: var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.pt-root .pt-search-lg input { font-size: 17px; } .pt-root .pt-search-lg .pt-btn { height: 46px; padding: 0 22px; }
.pt-root .pt-kbd { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--surface-300); color: var(--ink-subtle); font: 400 11px/1 var(--font-mono); }

/* Chips, segmented, tabs, crumbs */
.pt-root .pt-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pt-root .pt-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-200); color: var(--ink); font: 600 13px/18px var(--font-sans); cursor: pointer; }
.pt-root .pt-chip:hover { border-color: var(--ink); } .pt-root .pt-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface-100); }
.pt-root .pt-chip-count { font: 400 11px/1 var(--font-mono); color: var(--ink-subtle); } .pt-root .pt-chip.is-on .pt-chip-count { color: var(--surface-300); }
.pt-root .pt-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-sm); background: var(--surface-300); }
.pt-root .pt-seg-opt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-muted); font: 600 13px/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.pt-root .pt-seg-opt:hover { color: var(--ink); } .pt-root .pt-seg-opt.is-on { background: var(--surface-200); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.pt-root .pt-seg-sm .pt-seg-opt { height: 24px; padding: 0 9px; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; }
.pt-root .pt-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pt-root .pt-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0 12px; border: 0; background: none; color: var(--ink-muted); font: 600 14px/20px var(--font-sans); cursor: pointer; white-space: nowrap; }
.pt-root .pt-tab:hover, .pt-root .pt-tab.is-on { color: var(--ink); } .pt-root .pt-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-text); }
.pt-root .pt-tab-count { font: 400 11px/1 var(--font-mono); color: var(--ink-subtle); }
.pt-root .pt-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font: 400 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .pt-crumbs li + li::before { content: "/"; margin-right: 6px; } .pt-root .pt-crumbs a { color: var(--ink-muted); text-decoration: none; } .pt-root .pt-crumbs a:hover { color: var(--brand); } .pt-root .pt-crumbs [aria-current] { color: var(--ink); }

/* Header */
.pt-root .pt-header { background: var(--surface-100); border-bottom: 1px solid var(--line); }
.pt-root .pt-livebar { background: var(--surface-300); border-bottom: 1px solid var(--line); font: 400 11px/14px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }
.pt-root .pt-livebar-in { display: flex; align-items: center; gap: var(--space-3); height: 30px; }
.pt-root .pt-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-text); text-transform: uppercase; letter-spacing: .08em; }
.pt-root .pt-live-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 0 3px var(--brand-soft); }
.pt-root .pt-livebar-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-root .pt-livebar-right { margin-left: auto; white-space: nowrap; color: var(--ink-subtle); }
.pt-root .pt-header-main { display: flex; align-items: center; gap: var(--space-6); height: 64px; }
.pt-root .pt-header-logo { display: flex; border-radius: var(--radius-xs); }
.pt-root .pt-header-nav { display: flex; gap: 18px; }
.pt-root .pt-header-nav a { position: relative; padding: 6px 0; color: var(--ink-muted); text-decoration: none; font: 600 14px/20px var(--font-sans); white-space: nowrap; }
.pt-root .pt-header-nav a:hover, .pt-root .pt-header-nav a.is-on { color: var(--ink); }
.pt-root .pt-header-nav a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 2px; background: var(--accent-text); }
.pt-root .pt-header-tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.pt-root .pt-header-search { width: 200px; }
@media (max-width: 1180px) { .pt-root .pt-header-search { display: none; } }
@media (max-width: 920px) { .pt-root .pt-header-nav { display: none; } }
@media (max-width: 760px) { .pt-root .pt-livebar-right { display: none; } }
@media (max-width: 560px) { .pt-root .pt-wrap { padding: 0 var(--space-4); } }

/* Footer */
.pt-root .pt-footer { background: var(--surface-300); border-top: 1px solid var(--line); padding: var(--space-8) 0 var(--space-6); color: var(--ink-muted); font-size: 14px; }
.pt-root .pt-footer-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--space-6); }
.pt-root .pt-footer-brand p { margin: var(--space-3) 0 0; color: var(--ink-muted); }
.pt-root .pt-footer-brand .pt-footer-ind { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--ink); max-width: 30ch; }
.pt-root .pt-footer-ind .pt-icon { margin-top: 2px; color: var(--accent-text); }
.pt-root .pt-footer-col h4 { margin: 0 0 var(--space-3); font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.pt-root .pt-footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.pt-root .pt-footer-col a { color: var(--ink-muted); text-decoration: none; } .pt-root .pt-footer-col a:hover { color: var(--brand); text-decoration: underline; }
.pt-root .pt-footer-legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); display: grid; gap: var(--space-2); }
.pt-root .pt-footer-legal p { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-subtle); max-width: 100ch; }
@media (max-width: 860px) { .pt-root .pt-footer-top { grid-template-columns: 1fr 1fr; } .pt-root .pt-footer-brand { grid-column: 1 / -1; } }

/* SectionHeader */
.pt-root .pt-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.pt-root .pt-sechead-title { margin: 0; font: 600 24px/30px var(--font-sans); letter-spacing: -.02em; }
.pt-root .pt-sechead-desc { margin: 6px 0 0; color: var(--ink-muted); max-width: 64ch; }
.pt-root .pt-sechead-side { display: flex; align-items: center; gap: var(--space-4); flex: none; }

/* GradeSeal */
.pt-root .pt-seal-sm { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.pt-root .pt-seal-sm-l { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-xs); background: var(--g-soft); color: var(--g); font: 700 13px/1 var(--font-sans); box-shadow: inset 0 0 0 1px var(--g); }
.pt-root .pt-seal-sm-s { font: 600 13px/1 var(--font-mono); color: var(--ink); min-width: 2ch; text-align: right; }
.pt-root .pt-seal { display: inline-flex; align-items: center; gap: var(--space-3); }
.pt-root .pt-seal-ring { position: relative; flex: none; }
.pt-root .pt-seal-ring svg { display: block; }
.pt-root .pt-seal-bg { fill: var(--g-soft); } .pt-root .pt-seal-track { stroke: var(--line); } .pt-root .pt-seal-arc { stroke: var(--g); }
.pt-root .pt-seal-letter { position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px/1 var(--font-sans); color: var(--g); letter-spacing: -.02em; }
.pt-root .pt-seal-lg .pt-seal-letter { font-size: 38px; }
.pt-root .pt-seal-txt { display: flex; flex-direction: column; gap: 2px; }
.pt-root .pt-seal-score { font: 600 24px/28px var(--font-mono); letter-spacing: -.03em; color: var(--ink); } .pt-root .pt-seal-score span { font-size: 13px; font-weight: 400; color: var(--ink-subtle); letter-spacing: 0; }
.pt-root .pt-seal-lg .pt-seal-score { font-size: 40px; line-height: 44px; } .pt-root .pt-seal-lg .pt-seal-score span { font-size: 15px; }
.pt-root .pt-seal-label { font: 400 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }

/* ScoreBar */
.pt-root .pt-scorebar { display: grid; gap: 6px; }
.pt-root .pt-scorebar-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font: 600 14px/20px var(--font-sans); }
.pt-root .pt-scorebar-val { display: inline-flex; gap: var(--space-3); align-items: baseline; font: 600 14px/20px var(--font-mono); }
.pt-root .pt-scorebar-w { font: 400 11px/14px var(--font-mono); letter-spacing: .04em; color: var(--ink-subtle); text-transform: uppercase; }
.pt-root .pt-scorebar-track { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--surface-300); overflow: hidden; }
.pt-root .pt-scorebar-track span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--g); }
.pt-root .pt-scorebar-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* EvidenceTiers */
.pt-root .pt-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.pt-root .pt-tier { display: grid; grid-template-rows: auto auto 1fr; gap: 6px; text-align: left; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-200); color: var(--ink); cursor: pointer; font: inherit; }
.pt-root .pt-tier:hover { border-color: var(--g); } .pt-root .pt-tier.is-on { border-color: var(--g); box-shadow: inset 0 0 0 1px var(--g); background: var(--g-soft); }
.pt-root .pt-tier-letter { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--g-soft); color: var(--g); font: 700 22px/1 var(--font-sans); box-shadow: inset 0 0 0 1px var(--g); }
.pt-root .pt-tier-count { font: 600 20px/24px var(--font-mono); letter-spacing: -.02em; } .pt-root .pt-tier-count span { font: 400 11px/14px var(--font-mono); letter-spacing: .04em; color: var(--ink-subtle); text-transform: uppercase; }
.pt-root .pt-tier-def { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 760px) { .pt-root .pt-tiers { grid-template-columns: 1fr 1fr; } }

/* Stat */
.pt-root .pt-stat { display: flex; flex-direction: column; gap: 4px; }
.pt-root .pt-stat-value { font: 600 32px/36px var(--font-mono); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pt-root .pt-stat-label { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .pt-stat-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* PriceRange */
.pt-root .pt-range { display: grid; gap: var(--space-2); min-width: 160px; }
.pt-root .pt-range-head { display: flex; justify-content: space-between; align-items: baseline; }
.pt-root .pt-range-med { font: 600 20px/24px var(--font-mono); letter-spacing: -.03em; } .pt-root .pt-range-med span { margin-left: 4px; font: 400 11px/14px var(--font-mono); letter-spacing: .04em; color: var(--ink-subtle); text-transform: uppercase; }
.pt-root .pt-range-row { display: flex; align-items: center; gap: var(--space-2); }
.pt-root .pt-range-end { font: 400 12px/16px var(--font-mono); color: var(--ink-subtle); }
.pt-root .pt-range-track { position: relative; flex: 1; height: 8px; min-width: 60px; }
.pt-root .pt-range-fill { position: absolute; top: 3px; height: 2px; background: var(--line-strong); border-radius: 2px; }
.pt-root .pt-range-iqr { position: absolute; top: 1px; height: 6px; background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); border-radius: 3px; }
.pt-root .pt-range-dot { position: absolute; top: -1px; width: 10px; height: 10px; margin-left: -5px; border-radius: var(--radius-pill); background: var(--brand); box-shadow: 0 0 0 2px var(--surface-200); }
.pt-root .pt-range-mark { position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; background: var(--ink); }
.pt-root .pt-range-cap { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.pt-root .pt-range-compact { min-width: 140px; } .pt-root .pt-range-compact .pt-range-end { font-size: 11px; }
.pt-root .pt-delta { display: inline-flex; gap: 3px; align-items: baseline; font: 500 12px/16px var(--font-mono); }
.pt-root .pt-delta span { font-size: 9px; } .pt-root .pt-delta-down { color: var(--price-down); } .pt-root .pt-delta-up { color: var(--price-up); } .pt-root .pt-delta-flat { color: var(--ink-subtle); }

/* PriceTag */
.pt-root .pt-price { display: inline-flex; flex-direction: column; gap: 2px; }
.pt-root .pt-price-label { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .pt-price-main { font: 600 20px/24px var(--font-mono); letter-spacing: -.03em; } .pt-root .pt-price-unit { margin-left: 2px; font-size: 12px; font-weight: 400; color: var(--ink-subtle); letter-spacing: 0; }
.pt-root .pt-price-lg .pt-price-main { font-size: 32px; line-height: 36px; } .pt-root .pt-price-sm .pt-price-main { font-size: 15px; line-height: 20px; }
.pt-root .pt-price-sub { display: inline-flex; gap: var(--space-3); font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }

/* Sparkline + chart */
.pt-root .pt-spark polyline { stroke: var(--ink-subtle); } .pt-root .pt-spark circle { fill: var(--ink-subtle); }
.pt-root .pt-spark-down polyline { stroke: var(--price-down); } .pt-root .pt-spark-down circle { fill: var(--price-down); }
.pt-root .pt-spark-up polyline { stroke: var(--price-up); } .pt-root .pt-spark-up circle { fill: var(--price-up); }
.pt-root .pt-chart { margin: 0; padding: var(--space-5); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pt-root .pt-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-3); }
.pt-root .pt-chart-head figcaption { display: flex; flex-direction: column; gap: 2px; }
.pt-root .pt-chart-title { font: 600 16px/22px var(--font-sans); } .pt-root .pt-chart-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pt-root .pt-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pt-root .pt-chart-grid { stroke: var(--line); } .pt-root .pt-chart-tick { font: 400 11px var(--font-mono); fill: var(--ink-subtle); }
.pt-root .pt-chart-band { fill: var(--brand-soft); } .pt-root .pt-chart-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.pt-root .pt-chart-last { fill: var(--brand); stroke: var(--surface-200); stroke-width: 2; }
.pt-root .pt-chart-legend { display: flex; gap: var(--space-5); margin-top: var(--space-2); font: 400 11px/14px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .pt-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pt-root .pt-lg-line { width: 14px; height: 2px; background: var(--brand); } .pt-root .pt-lg-band { width: 14px; height: 8px; background: var(--brand-soft); border-radius: 2px; }

/* Monogram */
.pt-root .pt-mono { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--surface-300); color: var(--ink-muted); font: 600 11px/1 var(--font-mono); box-shadow: inset 0 0 0 1px var(--line); }
.pt-root .pt-mono-lg { width: 44px; height: 44px; border-radius: var(--radius-sm); font-size: 14px; }

/* Leaderboard */
.pt-root .pt-lb { display: flex; flex-direction: column; background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pt-root .pt-lb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); }
.pt-root .pt-lb-title { margin: 0 0 4px; font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; } .pt-root .pt-lb-title a { color: inherit; text-decoration: none; } .pt-root .pt-lb-title a:hover { text-decoration: underline; }
.pt-root .pt-lb-table { width: 100%; border-collapse: collapse; }
.pt-root .pt-lb-table th { padding: 7px var(--space-3); background: var(--surface-300); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; font: 500 10px/12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .pt-lb-table td { padding: 9px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.pt-root .pt-lb-table .num { text-align: right; }
.pt-root .pt-lb-table th:first-child, .pt-root .pt-lb-table td:first-child { padding-left: var(--space-4); width: 16px; } .pt-root .pt-lb-table th:last-child, .pt-root .pt-lb-table td:last-child { padding-right: var(--space-4); }
.pt-root .pt-lb-rank { font: 500 12px/1 var(--font-mono); color: var(--ink-subtle); } .pt-root .is-top .pt-lb-rank { color: var(--ink); font-weight: 700; }
.pt-root .pt-lb-vendor { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .pt-root .pt-lb-vendor > div { display: flex; flex-direction: column; min-width: 0; }
.pt-root .pt-lb-name { color: var(--ink); font-weight: 600; font-size: 14px; line-height: 18px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-root .pt-lb-name:hover { text-decoration: underline; }
.pt-root .pt-lb-sub { display: inline-flex; gap: var(--space-2); font: 400 11px/14px var(--font-mono); color: var(--ink-subtle); }
.pt-root .pt-lb-report { display: inline-flex; align-items: center; gap: 3px; color: var(--brand); text-decoration: none; } .pt-root .pt-lb-report:hover { text-decoration: underline; }
.pt-root .pt-lb-price { font: 450 13px/1 var(--font-mono); white-space: nowrap; }
.pt-root .pt-lb-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding: 10px var(--space-4); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px; } .pt-root .pt-lb-foot .pt-meta { margin-left: auto; }
.pt-root .pt-lb-foot:hover { background: var(--surface-300); }

/* CompoundTable */
.pt-root .pt-ctable-wrap { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; overflow-x: auto; }
.pt-root .pt-ctable { width: 100%; border-collapse: collapse; min-width: 720px; }
.pt-root .pt-ctable thead th { padding: 9px var(--space-4); text-align: left; font: 500 10px/12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pt-root .pt-ctable td { padding: 10px var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.pt-root .pt-ctable .num { text-align: right; }
.pt-root .pt-ctable-group th { position: relative; padding: 8px var(--space-4); background: var(--surface-300); text-align: left; font: 600 13px/18px var(--font-sans); color: var(--ink); border-bottom: 1px solid var(--line); }
.pt-root .pt-ctable-group .pt-textlink { position: absolute; right: var(--space-4); top: 8px; font-size: 12px; }
.pt-root .pt-ctable td:first-child { min-width: 200px; }
.pt-root .pt-ctable-name { display: block; color: var(--ink); font-weight: 600; text-decoration: none; } .pt-root .pt-ctable-name:hover { text-decoration: underline; }
.pt-root .pt-ctable-aka { display: block; font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.pt-root .pt-ctable-price { font: 600 14px/1 var(--font-mono); white-space: nowrap; }
.pt-root .pt-ctable-link { color: var(--brand); font: 500 13px/1 var(--font-mono); text-decoration: none; } .pt-root .pt-ctable-link:hover { text-decoration: underline; }
.pt-root .pt-ctable tbody:last-child tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) { .pt-root .pt-hide-sm { display: none; } .pt-root .pt-ctable { min-width: 0; } }

/* LabResultFeed */
.pt-root .pt-labfeed { margin: 0; padding: 0; list-style: none; background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pt-root .pt-lab { display: grid; grid-template-columns: minmax(170px, 1.4fr) 88px minmax(124px, 1fr) minmax(168px, 1.1fr) 32px; gap: var(--space-4); align-items: center; padding: 12px var(--space-4); border-bottom: 1px solid var(--line); }
.pt-root .pt-lab:last-child { border-bottom: 0; }
.pt-root .pt-lab-title { display: flex; gap: var(--space-2); align-items: baseline; } .pt-root .pt-lab-title a { color: var(--ink); font-weight: 600; text-decoration: none; } .pt-root .pt-lab-title a:hover { text-decoration: underline; }
.pt-root .pt-lab-size { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.pt-root .pt-lab-vendor { display: flex; flex-wrap: wrap; column-gap: var(--space-2); align-items: baseline; font-size: 13px; line-height: 18px; color: var(--ink-muted); } .pt-root .pt-lab-vendor .pt-meta { white-space: nowrap; }
.pt-root .pt-lab-purity { display: flex; flex-direction: column; } .pt-root .pt-lab-pval { font: 600 18px/22px var(--font-mono); letter-spacing: -.02em; color: var(--g); }
.pt-root .pt-lab-checks { display: flex; flex-direction: column; gap: 3px; }
.pt-root .pt-check { display: inline-flex; align-items: center; gap: 5px; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.pt-root .pt-check.is-pass .pt-icon { color: var(--pos); } .pt-root .pt-check.is-fail { color: var(--danger); } .pt-root .pt-check.is-warn .pt-icon { color: var(--amber); }
.pt-root .pt-lab-src { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pt-root .pt-lab-when { font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
@media (max-width: 860px) { .pt-root .pt-lab { grid-template-columns: 1fr auto; } .pt-root .pt-lab-checks, .pt-root .pt-lab-src { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); } .pt-root .pt-lab-btn { display: none; } }

/* Cards */
.pt-root .pt-card { box-sizing: border-box; color: var(--ink); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); }
.pt-root .pt-compound { display: flex; flex-direction: column; gap: var(--space-4); transition: border-color .15s ease; } .pt-root .pt-compound:hover { border-color: var(--line-strong); }
.pt-root .pt-compound-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pt-root .pt-compound-name { margin: 0; font: 600 20px/26px var(--font-sans); letter-spacing: -.02em; }
.pt-root .pt-compound-name a, .pt-root .pt-vendor-name a, .pt-root .pt-provider-name a, .pt-root .pt-article-title a { color: inherit; text-decoration: none; }
.pt-root .pt-compound-name a:hover, .pt-root .pt-vendor-name a:hover, .pt-root .pt-provider-name a:hover, .pt-root .pt-article-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-root .pt-compound-aka { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pt-root .pt-compound-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-root .pt-compound-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); flex-wrap: wrap; }
.pt-root .pt-compound-top-v { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; }

.pt-root .pt-vendor { display: flex; flex-direction: column; gap: var(--space-4); }
.pt-root .pt-vendor-head { display: flex; align-items: center; gap: var(--space-3); } .pt-root .pt-vendor-id { flex: 1; min-width: 0; }
.pt-root .pt-vendor-name { margin: 0 0 2px; font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; }
.pt-root .pt-vendor-facts { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pt-root .pt-vendor-facts dt { font: 500 10px/12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .pt-vendor-facts dd { margin: 4px 0 0; font: 600 15px/20px var(--font-mono); letter-spacing: -.02em; }
.pt-root .pt-vendor-flags { display: flex; flex-wrap: wrap; gap: 6px; }

.pt-root .pt-provider { display: flex; flex-direction: column; gap: var(--space-3); }
.pt-root .pt-provider-head { display: flex; gap: var(--space-3); align-items: center; }
.pt-root .pt-provider-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info); }
.pt-root .pt-provider-name { margin: 0 0 2px; font: 600 16px/22px var(--font-sans); }
.pt-root .pt-provider-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pt-root .pt-provider-checks li { display: grid; grid-template-columns: 16px 1fr; column-gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pt-root .pt-provider-checks li .pt-meta { grid-column: 2; } .pt-root .pt-provider-checks b { color: var(--ink); font-weight: 600; }
.pt-root .pt-provider-checks .is-pass .pt-icon { color: var(--pos); margin-top: 1px; } .pt-root .pt-provider-checks .is-fail .pt-icon { color: var(--danger); margin-top: 1px; }
.pt-root .pt-provider-cmp { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; gap: var(--space-2); align-items: baseline; font-size: 13px; }

.pt-root .pt-breakdown { display: flex; flex-direction: column; gap: var(--space-5); }
.pt-root .pt-breakdown-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .pt-root .pt-breakdown-head h3 { margin: 0; font: 600 18px/24px var(--font-sans); text-align: right; }
.pt-root .pt-breakdown-items { display: grid; gap: var(--space-4); }
.pt-root .pt-breakdown-foot { margin: 0; display: flex; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); } .pt-root .pt-breakdown-foot .pt-icon { color: var(--accent-text); margin-top: 2px; } .pt-root .pt-breakdown-foot > span { flex: 1; }

.pt-root .pt-claim { display: flex; flex-direction: column; gap: var(--space-3); }
.pt-root .pt-claim-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .pt-root .pt-claim-top .pt-eyebrow { margin: 0; color: var(--ink-subtle); }
.pt-root .pt-claim-q { margin: 0; font: italic 400 22px/30px var(--font-serif); font-variation-settings: 'opsz' 22; color: var(--ink); }
.pt-root .pt-claim-sum { margin: 0; color: var(--ink-muted); }

.pt-root .pt-compare { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pt-root .pt-compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pt-root .pt-compare th, .pt-root .pt-compare td { padding: 12px var(--space-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 14px; }
.pt-root .pt-compare tbody tr:last-child > * { border-bottom: 0; }
.pt-root .pt-compare thead th { background: var(--surface-300); vertical-align: bottom; }
.pt-root .pt-compare tbody th { width: 28%; font: 500 11px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .pt-compare-name { display: block; font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; }

/* COA verifier + calculator */
.pt-root .pt-coa, .pt-root .pt-calc { display: flex; flex-direction: column; gap: var(--space-4); }
.pt-root .pt-coa-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.pt-root .pt-coa-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-strong); }
.pt-root .pt-coa-head h3 { margin: 0; font: 600 18px/24px var(--font-sans); } .pt-root .pt-coa-head p { margin: 2px 0 0; font-size: 14px; color: var(--ink-muted); }
.pt-root .pt-coa-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pt-root .pt-coa-input { flex: 1; min-width: 180px; display: flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 12px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-200); }
.pt-root .pt-coa-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 450 14px/20px var(--font-mono); color: var(--ink); } .pt-root .pt-coa-input input::placeholder { color: var(--ink-subtle); }
.pt-root .pt-coa-res { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 14px; }
.pt-root .pt-coa-res p { margin: 0; } .pt-root .pt-coa-res > div { flex: 1; } .pt-root .pt-coa-res-t { font-weight: 600; }
.pt-root .pt-coa-res.is-match { background: var(--pos-soft); } .pt-root .pt-coa-res.is-match > .pt-icon { color: var(--pos-strong); }
.pt-root .pt-coa-res.is-match .pt-prov-pos-outline { background: var(--surface-200); }
.pt-root .pt-coa-res.is-bad { background: var(--danger-soft); } .pt-root .pt-coa-res.is-bad > .pt-icon, .pt-root .pt-coa-res.is-bad .pt-coa-res-t { color: var(--danger); }
.pt-root .pt-coa-res.is-warn { background: var(--amber-soft); } .pt-root .pt-coa-res.is-warn > .pt-icon, .pt-root .pt-coa-res.is-warn .pt-coa-res-t { color: var(--amber); }
.pt-root .pt-calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.pt-root .pt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pt-root .pt-field-label { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
.pt-root .pt-field-box { display: flex; align-items: center; height: var(--control-md); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-200); overflow: hidden; box-sizing: border-box; }
.pt-root .pt-field-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 12px; font: 450 14px/20px var(--font-mono); color: var(--ink); }
.pt-root .pt-field-suffix { align-self: stretch; display: grid; place-items: center; padding: 0 10px; background: var(--surface-300); border-left: 1px solid var(--line); font: 400 12px/1 var(--font-mono); color: var(--ink-muted); }
.pt-root .pt-calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-300); }
.pt-root .pt-calc-out .pt-stat-value { font-size: 26px; line-height: 30px; }
@media (max-width: 640px) { .pt-root .pt-calc-grid, .pt-root .pt-calc-out { grid-template-columns: 1fr; } }

/* TestingLanes */
.pt-root .pt-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pt-root .pt-lane { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pt-root .pt-lane.is-rec { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pt-root .pt-lane-flag { position: absolute; top: -10px; left: var(--space-5); padding: 2px 8px; border-radius: var(--radius-xs); background: var(--ink); color: var(--surface-100); font: 500 10px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pt-root .pt-lane-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); } .pt-root .pt-lane-top h3 { margin: 0; font: 600 17px/22px var(--font-sans); }
.pt-root .pt-lane-price { font: 600 22px/26px var(--font-mono); letter-spacing: -.03em; }
.pt-root .pt-lane ul { margin: 0 0 var(--space-2); padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--ink-muted); } .pt-root .pt-lane li { display: flex; gap: var(--space-2); align-items: center; }
.pt-root .pt-lane .pt-btn { margin-top: auto; }
@media (max-width: 760px) { .pt-root .pt-lanes { grid-template-columns: 1fr; } }

/* ArticleCard */
.pt-root .pt-article { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--ink); }
.pt-root .pt-article-meta { display: flex; justify-content: space-between; gap: var(--space-3); } .pt-root .pt-article-meta .pt-eyebrow { margin: 0; color: var(--clay); }
.pt-root .pt-article-title { margin: 0; font: 480 24px/30px var(--font-serif); font-variation-settings: 'opsz' 24; letter-spacing: -.005em; }
.pt-root .pt-article-excerpt { margin: 0; color: var(--ink-muted); }
.pt-root .pt-article-src { display: inline-flex; gap: 6px; align-items: center; margin: var(--space-1) 0 0; }

/* Notice */
.pt-root .pt-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: 12px var(--space-4); border-radius: var(--radius-sm); background: var(--surface-300); font-size: 14px; line-height: 20px; }
.pt-root .pt-notice > .pt-icon { margin-top: 1px; color: var(--ink-muted); } .pt-root .pt-notice > div { flex: 1; }
.pt-root .pt-notice-title { margin: 0 0 2px; font-weight: 600; } .pt-root .pt-notice-body p { margin: 0; }
.pt-root .pt-notice-ruo { background: var(--amber-soft); } .pt-root .pt-notice-ruo > .pt-icon, .pt-root .pt-notice-ruo .pt-notice-title { color: var(--amber); }
.pt-root .pt-notice-info { background: var(--info-soft); } .pt-root .pt-notice-info > .pt-icon { color: var(--info); }
.pt-root .pt-notice-success { background: var(--pos-soft); } .pt-root .pt-notice-success > .pt-icon { color: var(--pos-strong); }
.pt-root .pt-notice-warning { background: var(--amber-soft); } .pt-root .pt-notice-warning > .pt-icon, .pt-root .pt-notice-warning .pt-notice-title { color: var(--amber); }
.pt-root .pt-notice-danger { background: var(--danger-soft); } .pt-root .pt-notice-danger > .pt-icon, .pt-root .pt-notice-danger .pt-notice-title { color: var(--danger); }
.pt-root .pt-notice-independence { background: var(--surface-inverse); color: var(--ink-inverse); } .pt-root .pt-notice-independence > .pt-icon { color: var(--accent); }
.pt-root .pt-notice-independence .pt-textlink { color: var(--ink-inverse); }

/* Coupon */
.pt-root .pt-coupon { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-xs); background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.pt-root .pt-coupon-code { font: 600 12px/1 var(--font-mono); letter-spacing: .06em; } .pt-root .pt-coupon-off { font-size: 12px; font-weight: 600; color: var(--clay); }
.pt-root .pt-coupon .pt-icon { color: var(--ink-subtle); } .pt-root .pt-coupon.is-copied .pt-icon { color: var(--pos); }

/* Newsletter */
.pt-root .pt-news { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--ink-inverse); flex-wrap: wrap; }
.pt-root .pt-news h3 { margin: 0 0 4px; font: 600 20px/26px var(--font-sans); letter-spacing: -.01em; } .pt-root .pt-news p { margin: 0; color: var(--ink-inverse-muted); max-width: 52ch; }
.pt-root .pt-news-form { display: flex; gap: var(--space-2); flex: 1; max-width: 420px; min-width: 260px; }
.pt-root .pt-news-form input { flex: 1; min-width: 0; height: var(--control-md); padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--ink-inverse-muted); background: transparent; color: var(--ink-inverse); font: 400 14px/20px var(--font-sans); }
.pt-root .pt-news-form input::placeholder { color: var(--ink-inverse-muted); }
.pt-root .pt-news .pt-news-ok { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--ink-inverse); } .pt-root .pt-news-ok .pt-icon { color: var(--accent); }

/* Preview helpers */
.pt-root .pt-pv { padding: var(--space-5); box-sizing: border-box; }
.pt-root .pt-pv-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pt-root .pt-pv-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.pt-root .pt-pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

/* =====================================================================
   v3 · Night Glass layer — overrides the base rules above
   ===================================================================== */
.pt-root { background-color: var(--surface-100); color: var(--ink);
  background-image:
    radial-gradient(1000px 560px at 8% -12%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%),
    radial-gradient(760px 480px at 102% 6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--ink) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 3.5%, transparent) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px; }

/* The glass recipe */
.pt-root .pt-glass, .pt-root .pt-card, .pt-root .pt-lb, .pt-root .pt-ctable-wrap, .pt-root .pt-labfeed, .pt-root .pt-chart, .pt-root .pt-compare, .pt-root .pt-lane, .pt-root .pt-tier, .pt-root .pt-panel, .pt-root .pt-action, .pt-root .pt-dock, .pt-root .pt-news {
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  border: 1px solid var(--glass-rim); box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.pt-root .pt-card, .pt-root .pt-tier, .pt-root .pt-action { border-radius: var(--radius-md); }
.pt-root .pt-lb, .pt-root .pt-ctable-wrap, .pt-root .pt-labfeed, .pt-root .pt-chart, .pt-root .pt-compare, .pt-root .pt-lane { border-radius: var(--radius-lg); }
.pt-root .pt-panel, .pt-root .pt-dock, .pt-root .pt-news { border-radius: var(--radius-xl); }

/* Type: lowercase, bold, accent full stop */
.pt-root .pt-dot::after { content: "."; color: var(--accent-text); }
.pt-root .pt-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font: 500 13px/18px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-subtle); }
.pt-root .pt-meta { font: 400 12px/16px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-subtle); }
.pt-root .pt-sechead-title, .pt-root .pt-panel-title { font: 700 24px/28px var(--font-sans); letter-spacing: -.025em; color: var(--ink); }
.pt-root .pt-textlink { color: var(--brand); font-weight: 650; }
.pt-root .pt-mono-txt { font-family: var(--font-mono); }

/* Panel */
.pt-root .pt-panel { padding: var(--space-5); color: var(--ink); }
.pt-root .pt-panel-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.pt-root .pt-panel-titles { flex: 1; min-width: 0; }
.pt-root .pt-panel-title { margin: 0; }
.pt-root .pt-panel-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-strong); box-shadow: inset 0 1px 0 var(--glass-highlight); }

/* Buttons */
.pt-root .pt-btn { border-radius: var(--radius-sm); font-weight: 650; }
.pt-root .pt-btn-primary { color: var(--on-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #ffffff), var(--brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-glow); }
.pt-root .pt-btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-strong) 82%, #ffffff), var(--brand-strong)); }
.pt-root .pt-btn-secondary { background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); border-color: var(--line-strong); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.pt-root .pt-btn-ghost:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pt-root .pt-btn-inverse { background: var(--ink); color: var(--surface-100); }

/* Pills */
.pt-root .pt-badge, .pt-root .pt-status, .pt-root .pt-prov { height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-weight: 600; }
.pt-root .pt-badge-outline { box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Search, inputs */
.pt-root .pt-search { border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-200) 70%, transparent); border-color: var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.pt-root .pt-search-lg { border-radius: var(--radius-lg); height: 64px; background: color-mix(in srgb, var(--surface-200) 75%, transparent); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-glass); }
.pt-root .pt-search-lg .pt-btn { height: 48px; border-radius: 14px; }
.pt-root .pt-kbd { border-radius: var(--radius-xs); background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--glass-rim); }
.pt-root .pt-field-box, .pt-root .pt-coa-input { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-100) 55%, transparent); border-color: var(--line-strong); }
.pt-root .pt-field-suffix { background: color-mix(in srgb, var(--ink) 6%, transparent); border-left-color: var(--line); }
.pt-root .pt-field-label { font-weight: 500; color: var(--ink-subtle); }

/* Chips, segmented, tabs */
.pt-root .pt-chip { border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); border-color: var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.pt-root .pt-chip.is-on { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--ink); }
.pt-root .pt-chip.is-on .pt-chip-count { color: var(--brand-strong); }
.pt-root .pt-seg { border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-100) 60%, transparent); box-shadow: inset 0 0 0 1px var(--glass-rim); }
.pt-root .pt-seg-opt { border-radius: var(--radius-pill); }
.pt-root .pt-seg-opt.is-on { background: var(--brand-soft); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent); }
.pt-root .pt-seg-sm .pt-seg-opt { font: 600 11px/1 var(--font-sans); letter-spacing: 0; }
.pt-root .pt-tab.is-on::after { background: var(--brand); height: 2px; border-radius: 2px; }
.pt-root .pt-crumbs ol { font: 500 13px/18px var(--font-sans); letter-spacing: 0; text-transform: none; }

/* Header + live bar */
.pt-root .pt-header { background: transparent; border-bottom: 0; }
.pt-root .pt-livebar { background: transparent; border-bottom: 1px solid var(--line); font: 500 12px/16px var(--font-sans); letter-spacing: 0; }
.pt-root .pt-live { color: var(--accent-text); text-transform: none; letter-spacing: 0; font-weight: 650; }
.pt-root .pt-live-dot { background: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
.pt-root .pt-header-nav a { font-weight: 600; }
.pt-root .pt-header-nav a.is-on::after { background: var(--brand); bottom: -8px; height: 2px; border-radius: 2px; }

/* Footer */
.pt-root .pt-footer { background: color-mix(in srgb, var(--surface-100) 60%, transparent); border-top: 1px solid var(--line); }
.pt-root .pt-footer-col h4 { font: 650 13px/18px var(--font-sans); letter-spacing: 0; text-transform: none; }
.pt-root .pt-footer-ind .pt-icon { color: var(--accent-text); }

/* Glow grades */
.pt-root .pt-seal-sm-l { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; background: var(--g-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 55%, transparent), 0 0 14px -4px color-mix(in srgb, var(--g) 70%, transparent); }
.pt-root .pt-seal-arc { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g) 70%, transparent)); }
.pt-root .pt-seal-letter { text-shadow: 0 0 18px color-mix(in srgb, var(--g) 60%, transparent); }
.pt-root .pt-seal-bg { fill: color-mix(in srgb, var(--g-soft) 85%, transparent); }
.pt-root .pt-tiers { gap: var(--space-3); }
.pt-root .pt-tier { position: relative; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; justify-items: start; padding: var(--space-4) var(--space-4) var(--space-5); }
.pt-root .pt-tier::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -36px; height: 64px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 45%, transparent), transparent); pointer-events: none; }
.pt-root .pt-tier-letter { width: auto; height: auto; background: none; box-shadow: none; font: 800 44px/1 var(--font-sans); letter-spacing: -.03em; color: var(--g); text-shadow: 0 0 22px color-mix(in srgb, var(--g) 55%, transparent); }
.pt-root .pt-tier:hover, .pt-root .pt-tier.is-on { border-color: color-mix(in srgb, var(--g) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--g) 12%, var(--glass-top)), var(--glass-bottom)); box-shadow: var(--shadow-glass), inset 0 0 0 1px color-mix(in srgb, var(--g) 40%, transparent); }
.pt-root .pt-tier-count { font-size: 18px; } .pt-root .pt-tier-count span { font: 500 12px/16px var(--font-sans); letter-spacing: 0; text-transform: none; }

/* Stats */
.pt-root .pt-stat-value { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.04em; }
.pt-root .pt-stat-label { font: 500 13px/18px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-subtle); }
.pt-root .pt-stat-inline { flex-direction: row; align-items: center; gap: var(--space-3); }
.pt-root .pt-stat-inline .pt-stat-value { font-size: 30px; line-height: 34px; }
.pt-root .pt-stat-inline .pt-stat-label { max-width: 11ch; line-height: 16px; color: var(--ink-muted); }

/* Ranges, prices, charts */
.pt-root .pt-range-med span, .pt-root .pt-price-label, .pt-root .pt-chart-legend, .pt-root .pt-scorebar-w { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.pt-root .pt-range-dot { box-shadow: 0 0 0 2px var(--surface-100), 0 0 10px color-mix(in srgb, var(--brand) 80%, transparent); }
.pt-root .pt-range-iqr { background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent); }
.pt-root .pt-chart-band { fill: color-mix(in srgb, var(--brand) 18%, transparent); }
.pt-root .pt-chart-line { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 60%, transparent)); }
.pt-root .pt-chart-last { stroke: var(--surface-100); }
.pt-root .pt-lg-band { background: color-mix(in srgb, var(--brand) 25%, transparent); }
.pt-root .pt-scorebar-track { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.pt-root .pt-scorebar-track span { box-shadow: 0 0 10px color-mix(in srgb, var(--g) 60%, transparent); }

/* Tables inside glass */
.pt-root .pt-lb-table th, .pt-root .pt-ctable thead th { background: color-mix(in srgb, var(--ink) 4%, transparent); border-color: var(--line); font: 500 12px/16px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-subtle); }
.pt-root .pt-ctable-group th { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pt-root .pt-lb-foot:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pt-root .pt-lb-sub { font-family: var(--font-sans); }
.pt-root .pt-mono { border-radius: 8px; background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px var(--glass-rim); font-family: var(--font-sans); font-weight: 700; }
.pt-root .pt-mono-lg { border-radius: 12px; }
.pt-root .pt-check { font-family: var(--font-sans); }

/* Cards inside panels get a nested glass */
.pt-root .pt-panel .pt-card, .pt-root .pt-panel .pt-action, .pt-root .pt-panel .pt-tier, .pt-root .pt-panel .pt-labfeed { background: linear-gradient(180deg, color-mix(in srgb, var(--glass-top) 80%, transparent), color-mix(in srgb, var(--glass-bottom) 70%, transparent)); }
.pt-root .pt-calc-out { background: color-mix(in srgb, var(--surface-100) 50%, transparent); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--glass-rim); }
.pt-root .pt-coa-icon, .pt-root .pt-provider-icon { border-radius: var(--radius-sm); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.pt-root .pt-coa-head h3, .pt-root .pt-compound-name, .pt-root .pt-vendor-name, .pt-root .pt-provider-name, .pt-root .pt-lb-title { font-weight: 700; letter-spacing: -.02em; }
.pt-root .pt-coa-res { border-radius: var(--radius-md); }
.pt-root .pt-lane.is-rec { border-color: color-mix(in srgb, var(--brand) 60%, transparent); box-shadow: var(--shadow-glass), inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent); }
.pt-root .pt-lane-flag { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-pill); font: 650 11px/16px var(--font-sans); letter-spacing: 0; text-transform: none; padding: 2px 10px; }
.pt-root .pt-article { border-top: 0; padding: var(--space-5); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); border: 1px solid var(--glass-rim); box-shadow: var(--shadow-glass); }
.pt-root .pt-article-meta .pt-eyebrow { color: var(--clay); }
.pt-root .pt-notice { border-radius: var(--radius-md); }
.pt-root .pt-news { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 22%, var(--glass-top)), var(--glass-bottom)); color: var(--ink); }
.pt-root .pt-news p { color: var(--ink-muted); }
.pt-root .pt-news-form input { border-radius: var(--radius-sm); border-color: var(--line-strong); color: var(--ink); background: color-mix(in srgb, var(--surface-100) 55%, transparent); }
.pt-root .pt-news-form input::placeholder { color: var(--ink-subtle); }
.pt-root .pt-news .pt-news-ok { color: var(--ink); }

/* ActionCard */
.pt-root .pt-action { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px var(--space-4) var(--space-4); color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.pt-root .pt-action:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.pt-root .pt-action-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pt-root .pt-action-eyebrow { font: 650 13px/18px var(--font-sans); color: var(--tone); }
.pt-root .pt-action-title { font: 700 17px/22px var(--font-sans); letter-spacing: -.01em; }
.pt-root .pt-action-sub { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.pt-root .pt-action-lock { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--tone); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent); }
.pt-root .pt-action-tile { align-items: center; padding: 12px var(--space-4); }
.pt-root .pt-action-tile .pt-action-eyebrow { font: 500 12px/16px var(--font-sans); color: var(--ink-subtle); }
.pt-root .pt-action-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent); }
.pt-root .pt-tone-brand { --tone: var(--brand); } .pt-root .pt-tone-accent { --tone: var(--accent-text); } .pt-root .pt-tone-pos { --tone: var(--pos); } .pt-root .pt-tone-info { --tone: var(--info); } .pt-root .pt-tone-amber { --tone: var(--amber); } .pt-root .pt-tone-clay { --tone: var(--clay); }

/* Dock */
.pt-root .pt-dock { display: flex; align-items: center; gap: var(--space-4); height: 72px; padding: 0 12px 0 22px; box-shadow: var(--shadow-float); color: var(--ink); box-sizing: border-box; }
.pt-root .pt-dock.is-floating { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(var(--content-max), calc(100% - 32px)); z-index: 50; }
.pt-root .pt-dock-logo { display: flex; border-radius: var(--radius-xs); }
.pt-root .pt-dock-items { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pt-root .pt-dock-item { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 14px; color: var(--ink-muted); text-decoration: none; font: 650 14px/1 var(--font-sans); position: relative; }
.pt-root .pt-dock-item:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pt-root .pt-dock-item.is-on { color: var(--ink); background: var(--brand-soft); box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent); }
.pt-root .pt-dock-item.is-on .pt-icon { color: var(--brand); }
.pt-root .pt-dock-item.is-on::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--brand); }
.pt-root .pt-dock-orb { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: -34px 8px 0; flex: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink); background: radial-gradient(circle at 50% 30%, var(--glass-top), var(--surface-100)); box-shadow: var(--shadow-float); }
.pt-root .pt-dock-orb-ring { position: absolute; inset: -3px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, var(--brand), var(--accent), var(--brand)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pt-root .pt-dock-orb .pt-icon { color: var(--accent-text); }
.pt-root .pt-dock-orb-label { position: absolute; top: 70px; font: 600 12px/1 var(--font-sans); color: var(--ink-subtle); }
.pt-root .pt-dock-search { display: flex; align-items: center; gap: 8px; width: 260px; height: 48px; padding: 0 8px 0 16px; box-sizing: border-box; border-radius: 14px; background: color-mix(in srgb, var(--surface-100) 60%, transparent); box-shadow: inset 0 0 0 1px var(--glass-rim); }
.pt-root .pt-dock-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 14px/20px var(--font-sans); }
.pt-root .pt-dock-search input::placeholder { color: var(--ink-subtle); }
.pt-root .pt-dock-search:focus-within { box-shadow: var(--shadow-focus); }
@media (max-width: 1080px) { .pt-root .pt-dock-search { display: none; } }
@media (max-width: 720px) { .pt-root .pt-dock-logo { display: none; } .pt-root .pt-dock-item span { display: none; } .pt-root .pt-dock-item { padding: 0 14px; } .pt-root .pt-dock { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .pt-root * { transition: none !important; } }
/* LabResultFeed compact (panels, sidebars) */
.pt-root .pt-labfeed.is-compact { display: flex; flex-direction: column; gap: 10px; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; border-radius: 0; }
.pt-root .pt-lab-c { display: grid; gap: 6px; padding: 14px var(--space-4); border-radius: var(--radius-md); background: linear-gradient(180deg, color-mix(in srgb, var(--glass-top) 80%, transparent), color-mix(in srgb, var(--glass-bottom) 70%, transparent)); border: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.pt-root .pt-lab-c-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.pt-root .pt-lab-c-title { display: inline-flex; gap: 8px; align-items: baseline; color: var(--ink); font-weight: 700; text-decoration: none; } .pt-root .pt-lab-c-title:hover { text-decoration: underline; }
.pt-root .pt-lab-c .pt-lab-pval { font-size: 17px; }
.pt-root .pt-lab-c-mid { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--ink-muted); }
.pt-root .pt-lab-c-bot { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
/* v3: remaining label styles + logo colours */
.pt-root .pt-seal-label, .pt-root .pt-vendor-facts dt, .pt-root .pt-compare tbody th { font: 500 13px/18px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-subtle); }
.pt-root .pt-logo-brand .pt-logo-stroke { stroke: var(--ink); } .pt-root .pt-logo-brand .pt-logo-fill { fill: var(--accent-text); } .pt-root .pt-logo-brand .pt-logo-text { fill: var(--ink); }
.pt-root .pt-logo-inverse .pt-logo-stroke { stroke: var(--ink-inverse); } .pt-root .pt-logo-inverse .pt-logo-fill { fill: var(--accent); }
.pt-root .pt-logo-icon .pt-logo-tile { fill: var(--surface-inverse); } .pt-root .pt-logo-icon .pt-logo-onstroke { stroke: var(--ink-inverse); } .pt-root .pt-logo-icon .pt-logo-onfill { fill: var(--accent); }

/* =====================================================================
   v3.1 · mint-forward + tier list, prices, FAQ, sponsor
   ===================================================================== */
.pt-root { background-image:
    radial-gradient(1000px 560px at 8% -12%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%),
    radial-gradient(820px 520px at 102% 4%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--ink) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 3.5%, transparent) 1px, transparent 1px); }

/* Mint leads: primary actions, selection, toggles */
.pt-root .pt-btn-primary { color: var(--on-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #ffffff), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--shadow-glow); }
.pt-root .pt-btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-strong) 78%, #ffffff), var(--accent-strong)); }
.pt-root .pt-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.pt-root .pt-btn-secondary[aria-pressed="true"], .pt-root .pt-btn-secondary.is-starred { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pt-root .pt-btn-secondary[aria-pressed="true"] .pt-icon { color: var(--accent-text); }
.pt-root .pt-chip.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.pt-root .pt-chip.is-on .pt-chip-count, .pt-root .pt-chip.is-on .pt-icon { color: var(--accent-text); }
.pt-root .pt-chip .pt-icon { color: var(--ink-subtle); }
.pt-root .pt-chip.is-empty { opacity: .55; }
.pt-root .pt-seg-opt.is-on { background: var(--accent-soft); box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.pt-root .pt-seg-opt.is-on .pt-icon { color: var(--accent-text); }
.pt-root .pt-tab.is-on::after, .pt-root .pt-header-nav a.is-on::after { background: var(--accent-text); }
.pt-root .pt-lane.is-rec { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: var(--shadow-glass), inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.pt-root .pt-lane-flag { background: var(--accent); color: var(--on-accent); }
.pt-root .pt-news { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, var(--glass-top)), var(--glass-bottom)); }
.pt-root .pt-dock-orb-ring { background: conic-gradient(from 200deg, var(--accent), var(--brand), var(--accent)); }

/* Select + Toggle + FilterBar */
.pt-root .pt-select { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 0 1 auto; }
.pt-root .pt-select-l { padding-left: 2px; font: 500 12px/16px var(--font-sans); color: var(--ink-subtle); }
.pt-root .pt-select-box { position: relative; display: flex; align-items: center; }
.pt-root .pt-select select { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; padding: 0 34px 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface-200) 80%, transparent); color: var(--ink); font: 600 14px/1 var(--font-sans); cursor: pointer; }
.pt-root .pt-select select:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.pt-root .pt-select-box .pt-icon { position: absolute; right: 10px; pointer-events: none; color: var(--ink-subtle); }
.pt-root .pt-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: var(--radius-pill); border: 1px solid var(--glass-rim); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--ink); font: 600 13px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
.pt-root .pt-toggle:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.pt-root .pt-toggle:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.pt-root .pt-toggle .pt-icon { color: var(--ink-subtle); }
.pt-root .pt-toggle-track { position: relative; flex: none; width: 28px; height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: background .15s ease; }
.pt-root .pt-toggle-track span { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform .15s ease; }
.pt-root .pt-toggle.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pt-root .pt-toggle.is-on .pt-toggle-track { background: var(--accent); }
.pt-root .pt-toggle.is-on .pt-toggle-track span { transform: translateX(12px); background: var(--on-accent); }
.pt-root .pt-toggle.is-on .pt-icon, .pt-root .pt-toggle.is-on .pt-chip-count { color: var(--accent-text); }
.pt-root .pt-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); border: 1px solid var(--glass-rim); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.pt-root .pt-filterbar .pt-toggle { height: 40px; }
.pt-root .pt-filterbar-res { margin-left: auto; align-self: center; font: 500 13px/18px var(--font-sans); color: var(--ink-subtle); }
.pt-root .pt-panel .pt-filterbar { background: color-mix(in srgb, var(--surface-100) 40%, transparent); box-shadow: inset 0 0 0 1px var(--glass-rim); border: 0; }

/* PriceTicker */
.pt-root .pt-ticker { display: flex; align-items: stretch; height: 44px; overflow: hidden; border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); border: 1px solid var(--glass-rim); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.pt-root .pt-ticker-tag { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-text); font: 650 13px/1 var(--font-sans); white-space: nowrap; }
.pt-root .pt-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.pt-root .pt-ticker-track { display: flex; width: max-content; animation: ptds-marquee 40s linear infinite; }
.pt-root .pt-ticker:hover .pt-ticker-track, .pt-root .pt-ticker:focus-within .pt-ticker-track, .pt-root .pt-ticker.is-paused .pt-ticker-track { animation-play-state: paused; }
.pt-root .pt-ticker-row { display: flex; margin: 0; padding: 0; list-style: none; }
.pt-root .pt-ticker-row a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; white-space: nowrap; font: 650 13px/1 var(--font-sans); }
.pt-root .pt-ticker-row a:hover .pt-ticker-name { text-decoration: underline; }
.pt-root .pt-ticker-px { font: 500 13px/1 var(--font-mono); color: var(--ink-muted); }
.pt-root .pt-ticker .pt-delta { font-size: 12px; }
.pt-root .pt-ticker-more { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-left: 1px solid var(--line); color: var(--brand); font: 650 13px/1 var(--font-sans); text-decoration: none; white-space: nowrap; }
@keyframes ptds-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px) { .pt-root .pt-ticker-more { display: none; } }
@media (prefers-reduced-motion: reduce) { .pt-root .pt-ticker-track { animation: none; } .pt-root .pt-ticker-viewport { overflow-x: auto; } .pt-root .pt-ticker-row[aria-hidden] { display: none; } }

/* OfferCard */
.pt-root .pt-offer { position: relative; display: flex; flex-direction: column; gap: 12px; padding: var(--space-4); }
.pt-root .pt-offer.is-best { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: var(--shadow-glass), inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 32px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.pt-root .pt-offer-flag { position: absolute; top: -11px; left: 16px; height: 22px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font: 700 11px/22px var(--font-sans); }
.pt-root .pt-offer-head { display: flex; align-items: center; gap: 10px; }
.pt-root .pt-offer-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-root .pt-offer-vendor { color: var(--ink); text-decoration: none; font: 700 15px/20px var(--font-sans); } .pt-root .pt-offer-vendor:hover { text-decoration: underline; }
.pt-root .pt-offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pt-root .pt-offer-main { font: 600 28px/32px var(--font-mono); letter-spacing: -.03em; color: var(--ink); }
.pt-root .pt-offer-list { font: 400 14px/1 var(--font-mono); color: var(--ink-subtle); }
.pt-root .pt-offer-permg { margin-left: auto; padding: 4px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font: 600 13px/1 var(--font-mono); }
.pt-root .pt-offer-meta, .pt-root .pt-offer-code { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pt-root .pt-offer-stock { display: inline-flex; align-items: center; gap: 6px; color: var(--pos); font: 600 13px/18px var(--font-sans); } .pt-root .pt-offer-stock.is-out { color: var(--ink-subtle); }
.pt-root .pt-offer-coa { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface-100) 45%, transparent); box-shadow: inset 0 0 0 1px var(--glass-rim); }
.pt-root .pt-offer-coa-top, .pt-root .pt-offer-coa-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pt-root .pt-offer-coa-t { display: inline-flex; align-items: center; gap: 6px; font: 650 13px/18px var(--font-sans); color: var(--ink); }
.pt-root .pt-offer-tests { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.pt-root .pt-offer-tests li { display: inline-flex; align-items: center; gap: 4px; }
.pt-root .pt-offer-tests .is-pass .pt-icon { color: var(--pos); } .pt-root .pt-offer-tests .is-fail .pt-icon { color: var(--danger); } .pt-root .pt-offer-tests .is-na { color: var(--ink-subtle); }
.pt-root .pt-offer-cta { width: 100%; justify-content: center; margin-top: auto; }

/* FAQ */
.pt-root .pt-faq { display: grid; gap: 8px; }
.pt-root .pt-faq-item { border-radius: var(--radius-md); border: 1px solid var(--glass-rim); background: linear-gradient(180deg, color-mix(in srgb, var(--glass-top) 85%, transparent), color-mix(in srgb, var(--glass-bottom) 75%, transparent)); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.pt-root .pt-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; list-style: none; cursor: pointer; color: var(--ink); font: 650 15px/22px var(--font-sans); border-radius: var(--radius-md); }
.pt-root .pt-faq-item summary::-webkit-details-marker { display: none; }
.pt-root .pt-faq-item summary:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.pt-root .pt-faq-item summary .pt-icon { flex: none; color: var(--ink-subtle); transition: transform .2s ease-out; }
.pt-root .pt-faq-item[open] summary .pt-icon { transform: rotate(180deg); color: var(--accent-text); }
.pt-root .pt-faq-a { padding: 0 18px 16px; color: var(--ink-muted); font: 400 14px/22px var(--font-sans); max-width: 72ch; }

/* SponsoredSlot */
.pt-root .pt-sponsor { display: grid; gap: 12px; padding: var(--space-4); border-radius: var(--radius-md); border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--surface-200) 35%, transparent); color: var(--ink); }
.pt-root .pt-sponsor-top, .pt-root .pt-sponsor-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pt-root .pt-sponsor-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-muted); font: 650 11px/1 var(--font-sans); }
.pt-root .pt-sponsor-body { display: flex; gap: 12px; align-items: flex-start; }
.pt-root .pt-sponsor-copy { min-width: 0; }
.pt-root .pt-sponsor-name { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font: 700 15px/20px var(--font-sans); }
.pt-root .pt-sponsor-text { margin: 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }

/* TierBoard */
.pt-root .pt-tierboard { display: grid; gap: var(--space-4); }
.pt-root .pt-tierboard > *, .pt-root .pt-tb-panel > * { min-width: 0; }
.pt-root .pt-tierboard.has-tray { padding-bottom: 72px; }
.pt-root .pt-tb-panel { display: grid; gap: 14px; }
.pt-root .pt-tb-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.pt-root .pt-tb-titles { min-width: 0; }
.pt-root .pt-tb-title { margin: 0; font: 700 40px/44px var(--font-sans); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.pt-root .pt-tb-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.pt-root .pt-tb-search { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 16px; box-sizing: border-box; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-200) 70%, transparent); box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 var(--glass-highlight); color: var(--ink-subtle); }
.pt-root .pt-tb-search:focus-within { box-shadow: var(--shadow-focus); }
.pt-root .pt-tb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 15px/20px var(--font-sans); }
.pt-root .pt-tb-search input::placeholder { color: var(--ink-subtle); }
.pt-root .pt-tb-areas { gap: 6px; }
.pt-root .pt-tb-areas .pt-chip { height: 34px; }
.pt-root .pt-tb-legend { display: flex; gap: 6px; }
.pt-root .pt-tb-leg { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 5px; border-radius: 12px; border: 1px solid var(--glass-rim); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--ink); cursor: pointer; font: 600 13px/1 var(--font-mono); transition: border-color .15s ease, opacity .15s ease; }
.pt-root .pt-tb-leg-l { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--g-soft); color: var(--g); font: 800 15px/1 var(--font-sans); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 50%, transparent), 0 0 14px -4px color-mix(in srgb, var(--g) 70%, transparent); }
.pt-root .pt-tb-leg:hover, .pt-root .pt-tb-leg.is-on { border-color: color-mix(in srgb, var(--g) 65%, transparent); }
.pt-root .pt-tb-leg.is-on { background: linear-gradient(180deg, color-mix(in srgb, var(--g) 16%, var(--glass-top)), var(--glass-bottom)); }
.pt-root .pt-tb-leg.is-dim { opacity: .5; }
.pt-root .pt-tb-leg:focus-visible, .pt-root .pt-tb-chip:focus-visible, .pt-root .pt-tb-cell:focus-visible, .pt-root .pt-tb-name:focus-visible, .pt-root .pt-tb-iconbtn:focus-visible, .pt-root .pt-tb-sort:focus-visible, .pt-root .pt-tb-clear:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.pt-root .pt-tb-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-root .pt-tb-count { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--ink-subtle); font: 500 13px/18px var(--font-sans); }
.pt-root .pt-tb-count b { color: var(--ink); font: 600 14px/1 var(--font-mono); }
.pt-root .pt-tb-clear { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); cursor: pointer; font: 600 13px/1 var(--font-sans); }
.pt-root .pt-tb-board { display: grid; gap: 10px; }
.pt-root .pt-tb-tier { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--glass-rim); background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
.pt-root .pt-tb-tier-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--g) 15%, transparent), transparent 85%); }
.pt-root .pt-tb-tier-head::after { content: ""; position: absolute; left: -40px; top: 50%; width: 140px; height: 110px; margin-top: -55px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 30%, transparent), transparent); pointer-events: none; }
.pt-root .pt-tb-tier-l { position: relative; z-index: 1; min-width: 38px; color: var(--g); font: 800 52px/1 var(--font-sans); letter-spacing: -.04em; text-shadow: 0 0 24px color-mix(in srgb, var(--g) 60%, transparent); }
.pt-root .pt-tb-tier-head > div { position: relative; z-index: 1; min-width: 0; }
.pt-root .pt-tb-tier-n { display: block; color: var(--ink); font: 700 14px/18px var(--font-sans); }
.pt-root .pt-tb-tier-d { display: block; margin-top: 2px; color: var(--ink-subtle); font: 500 12px/16px var(--font-sans); }
.pt-root .pt-tb-tier.is-empty .pt-tb-tier-head { opacity: .55; }
.pt-root .pt-tb-chips { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; margin: 0; padding: 14px 16px; list-style: none; }
.pt-root .pt-tb-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--glass-rim); background: color-mix(in srgb, var(--surface-200) 55%, transparent); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--ink); cursor: pointer; font: 600 14px/1 var(--font-sans); white-space: nowrap; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.pt-root .pt-tb-chip:hover { border-color: color-mix(in srgb, var(--g) 70%, transparent); background: color-mix(in srgb, var(--g) 10%, var(--surface-200)); transform: translateY(-1px); }
.pt-root .pt-tb-chip.is-sel { border-color: var(--g); }
.pt-root .pt-tb-chip.is-cmp { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pt-root .pt-tb-star, .pt-root .pt-tb-cmpi { color: var(--accent-text); }
.pt-root .pt-tb-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-subtle); }
.pt-root .pt-tb-dot[data-s="approved"] { background: var(--pos); box-shadow: 0 0 8px color-mix(in srgb, var(--pos) 70%, transparent); }
.pt-root .pt-tb-dot[data-s="investigational"] { background: var(--info); }
.pt-root .pt-tb-dot[data-s="restricted"], .pt-root .pt-tb-dot[data-s="pending"] { background: var(--amber); }
.pt-root .pt-tb-dot[data-s="discontinued"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-subtle); }
.pt-root .pt-tb-dot[data-s="withdrawn"] { background: var(--danger); }
.pt-root .pt-tb-none { align-self: center; margin: 0; padding: 16px; color: var(--ink-subtle); font: 500 13px/18px var(--font-sans); }
.pt-root .pt-tb-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; border-radius: var(--radius-lg); border: 1px dashed var(--line-strong); color: var(--ink-muted); text-align: center; }
.pt-root .pt-tb-empty p { margin: 0; }
.pt-root .pt-tb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 0 4px; }
.pt-root .pt-tb-foot p { margin: 0; }
.pt-root .pt-tb-key { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.pt-root .pt-tb-key > span { display: inline-flex; align-items: center; gap: 6px; }
/* list */
.pt-root .pt-tb-table { min-width: 860px; }
.pt-root .pt-tb-table td:first-child { min-width: 0; width: 44px; }
.pt-root .pt-tb-table tbody tr:hover, .pt-root .pt-tb-table tbody tr.is-sel { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pt-root .pt-tb-rank { color: var(--ink-subtle); font: 500 13px/1 var(--font-mono); }
.pt-root .pt-tb-name { display: block; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ink); cursor: pointer; font: 700 15px/20px var(--font-sans); text-align: left; }
.pt-root .pt-tb-name:hover { text-decoration: underline; }
.pt-root .pt-tb-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; font: inherit; }
.pt-root .pt-tb-sort.is-on { color: var(--ink); }
.pt-root .pt-tb-areaicons { display: inline-flex; gap: 6px; color: var(--ink-subtle); }
.pt-root .pt-tb-basis { color: var(--ink-muted); font: 400 13px/18px var(--font-sans); max-width: 220px; }
.pt-root .pt-tb-actions { display: inline-flex; gap: 2px; }
.pt-root .pt-tb-iconbtn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-subtle); cursor: pointer; }
.pt-root .pt-tb-iconbtn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.pt-root .pt-tb-iconbtn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 1080px) { .pt-root .pt-tb-hide-md { display: none; } .pt-root .pt-tb-table { min-width: 680px; } }
@media (max-width: 760px) { .pt-root .pt-tb-table { min-width: 560px; } }
/* area map */
.pt-root .pt-tb-map table { width: 100%; min-width: 560px; border-collapse: collapse; }
.pt-root .pt-tb-map th, .pt-root .pt-tb-map td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.pt-root .pt-tb-map thead th { padding: 12px 8px 8px; color: var(--ink-subtle); font: 500 12px/16px var(--font-sans); }
.pt-root .pt-tb-map thead th:first-child, .pt-root .pt-tb-map tbody th { padding-left: 18px; text-align: left; }
.pt-root .pt-tb-map tbody tr:last-child > * { border-bottom: 0; }
.pt-root .pt-tb-map-l { color: var(--g); font: 800 20px/1 var(--font-sans); text-shadow: 0 0 16px color-mix(in srgb, var(--g) 55%, transparent); }
.pt-root .pt-tb-map-area { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 600 14px/20px var(--font-sans); white-space: nowrap; }
.pt-root .pt-tb-map-area .pt-icon { color: var(--ink-subtle); }
.pt-root .pt-tb-cell { display: grid; place-items: center; width: 100%; min-width: 44px; height: 38px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--g-soft) var(--k, 50%), transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) var(--k, 50%), transparent); color: var(--ink); cursor: pointer; font: 650 15px/1 var(--font-mono); transition: transform .15s ease; }
.pt-root .pt-tb-cell:hover { transform: scale(1.04); box-shadow: inset 0 0 0 1px var(--g), 0 0 16px -4px color-mix(in srgb, var(--g) 70%, transparent); }
.pt-root .pt-tb-cell.is-zero { background: none; box-shadow: none; color: var(--ink-subtle); cursor: default; font-weight: 400; }
.pt-root .pt-tb-map-tot { color: var(--ink-muted); font: 500 14px/1 var(--font-mono); padding-right: 18px !important; text-align: right !important; }
.pt-root .pt-tb-map-note { margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--line); color: var(--ink-subtle); font: 500 12px/16px var(--font-sans); }
/* sheet, modal, tray, toast */
.pt-root .pt-tb-overlay { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; background: color-mix(in srgb, var(--surface-100) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ptds-fade .2s ease-out; }
.pt-root .pt-tb-overlay.is-center { align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.pt-root .pt-tb-sheet { display: flex; flex-direction: column; gap: 16px; width: min(460px, 100%); height: 100%; overflow-y: auto; box-sizing: border-box; padding: calc(14px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 24px; border-left: 1px solid var(--glass-rim); background: color-mix(in srgb, var(--surface-200) 94%, transparent); box-shadow: var(--shadow-float); color: var(--ink); animation: ptds-slide .22s ease-out; }
.pt-root .pt-tb-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-root .pt-tb-sheet-nav { display: flex; gap: 2px; }
.pt-root .pt-tb-sheet-head { display: flex; align-items: center; gap: 14px; }
.pt-root .pt-tb-sheet-id { min-width: 0; }
.pt-root .pt-tb-sheet-title { margin: 0; color: var(--ink); font: 700 30px/34px var(--font-sans); letter-spacing: -.03em; }
.pt-root .pt-tb-sheet-aka { margin: 2px 0 0; color: var(--ink-muted); font: 500 14px/20px var(--font-sans); }
.pt-root .pt-tb-sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-root .pt-tb-verdict { margin: 0; color: var(--ink); font: 400 16px/25px var(--font-sans); }
.pt-root .pt-tb-facts { display: grid; gap: 0; margin: 0; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--glass-rim); background: color-mix(in srgb, var(--surface-100) 35%, transparent); }
.pt-root .pt-tb-facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pt-root .pt-tb-facts > div:last-child { border-bottom: 0; }
.pt-root .pt-tb-facts dt { color: var(--ink-subtle); font: 500 13px/20px var(--font-sans); }
.pt-root .pt-tb-facts dd { margin: 0; color: var(--ink); font: 500 14px/20px var(--font-sans); }
.pt-root .pt-tb-g { color: var(--g); font-weight: 800; }
.pt-root .pt-tb-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-root .pt-tb-sheet-actions .pt-btn:first-child { flex: 1 1 100%; justify-content: center; }
.pt-root .pt-tb-sheet-actions .pt-btn-secondary { flex: 1 1 0; justify-content: center; }
.pt-root .pt-tb-sheet-keys { display: flex; align-items: center; gap: 4px; margin: auto 0 0; }
.pt-root .pt-tb-modal { display: flex; flex-direction: column; gap: 14px; width: min(980px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; padding: 20px; border-radius: var(--radius-xl); border: 1px solid var(--glass-rim); background: color-mix(in srgb, var(--surface-200) 95%, transparent); box-shadow: var(--shadow-float); color: var(--ink); animation: ptds-pop .2s ease-out; }
.pt-root .pt-tb-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pt-root .pt-tb-modal-body { overflow-x: auto; }
.pt-root .pt-tb-modal-body .pt-compare { min-width: 560px; }
.pt-root .pt-tb-modal > .pt-meta { margin: 0; }
.pt-root .pt-tb-tray { position: fixed; z-index: 70; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: min(780px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); box-sizing: border-box; padding: 8px 8px 8px 16px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--glass-rim)); background: color-mix(in srgb, var(--surface-200) 90%, transparent); box-shadow: var(--shadow-float), 0 0 40px -18px color-mix(in srgb, var(--accent) 70%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); color: var(--ink); animation: ptds-rise .2s ease-out; }
.pt-root .pt-tb-tray-l { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--ink-muted); font: 600 13px/1 var(--font-sans); }
.pt-root .pt-tb-tray-l .pt-icon { color: var(--accent-text); } .pt-root .pt-tb-tray-l b { color: var(--ink); font: 600 13px/1 var(--font-mono); }
.pt-root .pt-tb-tray-items { flex: 1; min-width: 0; display: flex; gap: 6px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.pt-root .pt-tb-tray-items li { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 36px; padding: 0 2px 0 5px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 7%, transparent); font: 600 13px/1 var(--font-sans); white-space: nowrap; }
.pt-root .pt-tb-tray-items li .pt-seal-sm-l { width: 24px; height: 24px; font-size: 12px; }
.pt-root .pt-tb-tray-items button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--ink-subtle); cursor: pointer; }
.pt-root .pt-tb-tray-items button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.pt-root .pt-tb-toast { position: fixed; z-index: 90; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); padding: 10px 16px; border-radius: var(--radius-pill); background: var(--surface-inverse); color: var(--ink-inverse); font: 600 13px/18px var(--font-sans); box-shadow: var(--shadow-float); animation: ptds-pop .2s ease-out; pointer-events: none; white-space: nowrap; }
@keyframes ptds-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ptds-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ptds-rise { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes ptds-pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.pt-root .pt-tb-toast { animation-name: ptds-fade; }
@media (max-width: 720px) {
  .pt-root .pt-tb-title { font-size: 30px; line-height: 34px; }
  .pt-root .pt-tb-tier { grid-template-columns: minmax(0, 1fr); }
  .pt-root .pt-tb-tier-head { padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pt-root .pt-tb-tier-l { min-width: 28px; font-size: 34px; }
  .pt-root .pt-tb-chips { padding: 12px; gap: 6px; }
  .pt-root .pt-tb-chip { height: 34px; padding: 0 10px; font-size: 13px; }
  .pt-root .pt-tb-count { margin-left: 0; }
  .pt-root .pt-tb-legend { width: 100%; gap: 5px; } .pt-root .pt-tb-leg { flex: 1; justify-content: center; gap: 5px; padding: 0 5px 0 4px; } .pt-root .pt-tb-leg-l { width: 24px; height: 24px; font-size: 14px; }
  .pt-root .pt-tb-overlay { align-items: flex-end; }
  .pt-root .pt-tb-sheet { width: 100%; height: auto; max-height: 88%; padding: 12px max(18px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); border-left: 0; border-top: 1px solid var(--glass-rim); border-radius: 26px 26px 0 0; animation-name: ptds-up; }
  .pt-root .pt-tb-sheet-title { font-size: 24px; line-height: 28px; }
  .pt-root .pt-tb-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pt-root .pt-tb-tray-l span { display: none; }
  .pt-root .pt-tb-tray-items li > span:not(.pt-seal-sm) { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
}
@keyframes ptds-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pt-root .pt-tb-overlay, .pt-root .pt-tb-sheet, .pt-root .pt-tb-modal, .pt-root .pt-tb-tray, .pt-root .pt-tb-toast { animation: none; } .pt-root .pt-tb-chip:hover, .pt-root .pt-tb-cell:hover { transform: none; } }
@media (max-width: 720px) {
  .pt-root .pt-tb-panel { padding: 16px; gap: 12px; }
  .pt-root .pt-tb-top .pt-seg { display: flex; width: 100%; } .pt-root .pt-tb-top .pt-seg-opt { flex: 1; justify-content: center; padding: 0 8px; }
  .pt-root .pt-tb-row > .pt-seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .pt-root .pt-tb-row > .pt-seg .pt-seg-opt { flex: none; }
  .pt-root .pt-tb-areas, .pt-root .pt-tb-toggles { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
  .pt-root .pt-tb-areas::-webkit-scrollbar, .pt-root .pt-tb-toggles::-webkit-scrollbar, .pt-root .pt-tb-row > .pt-seg::-webkit-scrollbar { display: none; }
  .pt-root .pt-tb-areas .pt-chip, .pt-root .pt-tb-toggles .pt-toggle { flex: none; }
  .pt-root .pt-tb-toggles { flex: 1 1 100%; min-width: 0; }
  .pt-root .pt-tb-sheet-keys { display: none; }
}
@media (hover: none) { .pt-root .pt-tb-sheet-keys { display: none; } }