@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #101714;
  --ink-soft: #27312c;
  --paper: #f2f4ee;
  --white: #fbfcf8;
  --line: #d8ddd4;
  --muted: #667068;
  --lime: #b8f24b;
  --lime-deep: #8bc72f;
  --violet: #6d5dfc;
  --coral: #ff795f;
  --sky: #b7ddf7;
  --shadow: 0 22px 60px rgba(16, 23, 20, .09);
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 236px; display: flex; flex-direction: column; padding: 28px 20px 22px; color: #fff; background: var(--ink); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark { position: relative; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.brand-mark::before, .brand-mark::after { position: absolute; content: ''; border: 1px solid rgba(184,242,75,.55); border-radius: 50%; }
.brand-mark::before { width: 21px; height: 21px; }
.brand-mark::after { width: 6px; height: 6px; background: var(--lime); border: 0; box-shadow: 0 0 14px var(--lime); }
.brand-mark i { position: absolute; left: 17px; width: 1px; height: 34px; background: rgba(255,255,255,.12); }
.brand-mark i:nth-child(2) { transform: rotate(60deg); }.brand-mark i:nth-child(3) { transform: rotate(120deg); }
.brand strong, .brand small { display: block; letter-spacing: .08em; }.brand strong { font-size: 14px; }.brand small { margin-top: 2px; color: #91a097; font: 9px var(--mono); }
.side-nav { display: grid; gap: 4px; margin-top: 72px; }
.side-nav a { position: relative; display: flex; gap: 13px; align-items: center; padding: 13px 12px; color: #95a098; border-radius: 9px; font-size: 13px; font-weight: 600; transition: .2s ease; }
.side-nav a span { width: 21px; color: #607068; font: 9px var(--mono); }
.side-nav a:hover { color: white; background: rgba(255,255,255,.05); }
.side-nav a.active { color: var(--ink); background: var(--lime); }
.side-nav a.active span { color: #4f6f19; }
.side-note { margin-top: auto; padding: 18px 16px; background: #19221e; border: 1px solid #2c3731; border-radius: 12px; }
.side-note .live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 5px rgba(184,242,75,.08); animation: pulse 2s infinite; }
.side-note p { display: inline; font-size: 12px; font-weight: 700; }.side-note small { display: block; margin: 9px 0 0; color: #849089; font-size: 10px; line-height: 1.6; }
.side-footer { margin-top: 18px; padding: 0 8px; }.side-footer span, .side-footer strong, .side-footer small { display: block; }.side-footer span { color: #59665f; font: 8px var(--mono); letter-spacing: .12em; }.side-footer strong { margin-top: 5px; color: #a8b2ac; font-size: 10px; font-weight: 500; }.side-footer .build-version { margin-top: 8px; color: #526159; font: 7px var(--mono); letter-spacing: .06em; }

main { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 42px; background: rgba(242,244,238,.84); border-bottom: 1px solid rgba(16,23,20,.09); backdrop-filter: blur(18px); }
.search-box { display: flex; align-items: center; gap: 10px; width: min(520px, 55vw); padding: 10px 12px; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 9px; }
.search-box svg { width: 17px; fill: none; stroke: #6f7872; stroke-width: 1.8; }.search-box input { min-width: 0; flex: 1; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 12px; }.search-box input::placeholder { color: #9ca49f; }.search-box kbd { color: #7c857f; font: 9px var(--mono); padding: 4px 6px; background: #edf0ea; border: 1px solid var(--line); border-radius: 5px; }
.top-status { display: flex; align-items: center; gap: 16px; }.status-pill { padding: 6px 9px; color: #456414; background: #e2f6bd; border-radius: 20px; font: 9px var(--mono); text-transform: uppercase; }.status-pill.warning { color: #7f3e20; background: #ffe1d4; }.scan-time { color: var(--muted); font-size: 10px; }.scan-time b { color: var(--ink); font-weight: 700; }

.section { padding: 88px 5.4vw; }
.hero-section { position: relative; display: grid; grid-template-columns: minmax(380px, .9fr) minmax(390px, 1.1fr); align-items: center; min-height: calc(100vh - 76px); overflow: hidden; }
.hero-section::before { position: absolute; inset: auto -10% -48% 15%; height: 70%; content: ''; background: radial-gradient(ellipse, rgba(109,93,252,.10), transparent 68%); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: var(--violet); font: 10px var(--mono); letter-spacing: .12em; }.eyebrow::before { width: 28px; height: 2px; content: ''; background: var(--violet); }
.hero-copy { position: relative; z-index: 2; max-width: 620px; }.hero-copy h1 { margin: 0; font-size: clamp(52px, 5.4vw, 88px); font-weight: 800; line-height: .98; letter-spacing: -.065em; }.hero-copy h1 em { color: var(--violet); font-style: normal; }.hero-copy p { max-width: 570px; margin: 30px 0; color: #59635d; font-size: 14px; line-height: 1.9; }
.hero-actions { display: flex; gap: 10px; }.button { display: inline-flex; align-items: center; gap: 20px; padding: 14px 18px; border: 1px solid var(--ink); border-radius: 8px; font-size: 11px; font-weight: 700; transition: transform .2s, box-shadow .2s; }.button:hover { transform: translateY(-2px); }.button.primary { color: var(--ink); background: var(--lime); box-shadow: 5px 5px 0 var(--ink); }.button.ghost { background: rgba(255,255,255,.45); }
.radar-visual { position: relative; justify-self: center; width: min(42vw, 580px); aspect-ratio: 1; }
.radar-visual::before { position: absolute; inset: 8%; content: ''; background: repeating-radial-gradient(circle, transparent 0 49px, rgba(16,23,20,.055) 50px 51px), repeating-linear-gradient(0deg, transparent 0 49px, rgba(16,23,20,.035) 50px 51px); border-radius: 50%; }
.orbit { position: absolute; inset: 12%; border: 1px solid rgba(16,23,20,.14); border-radius: 50%; }.orbit-two { inset: 27%; border-color: rgba(109,93,252,.35); }.orbit-three { inset: 40%; border-color: var(--ink); }.orbit-one::after { position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; content: ''; transform-origin: 0 0; border-top: 1px solid rgba(109,93,252,.5); background: linear-gradient(25deg, rgba(109,93,252,.16), transparent 55%); animation: spin 8s linear infinite; }
.radar-core { position: absolute; inset: 42%; z-index: 2; display: grid; place-content: center; text-align: center; color: white; background: var(--ink); border-radius: 50%; box-shadow: 0 0 0 9px rgba(184,242,75,.7), 0 0 0 10px var(--ink); }.radar-core strong { font: 700 clamp(18px,2vw,31px) var(--mono); }.radar-core span { color: #9eaaa3; font: 7px var(--mono); letter-spacing: .12em; }
.node { position: absolute; z-index: 3; width: 11px; height: 11px; background: var(--lime); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 6px rgba(184,242,75,.17); }.node-a { top: 18%; left: 48%; }.node-b { top: 56%; right: 10%; background: var(--coral); box-shadow: 0 0 0 6px rgba(255,121,95,.14); }.node-c { bottom: 15%; left: 34%; background: var(--violet); box-shadow: 0 0 0 6px rgba(109,93,252,.14); }.node-d { top: 35%; left: 18%; }
.radar-label { position: absolute; padding: 6px 9px; background: var(--white); border: 1px solid var(--ink); border-radius: 5px; box-shadow: 3px 3px 0 rgba(16,23,20,.13); font: 8px var(--mono); }.label-a { top: 13%; right: 23%; }.label-b { right: 2%; bottom: 29%; }.label-c { bottom: 9%; left: 16%; }

.metric-strip { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-strip article { min-height: 146px; padding: 27px 25px; background: rgba(255,255,255,.35); border-right: 1px solid var(--line); }.metric-strip article:last-child { border-right: 0; }.metric-strip span, .metric-strip small { display: block; }.metric-strip span { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }.metric-strip strong { display: block; margin: 12px 0 7px; font: 500 clamp(28px,3vw,44px) var(--mono); letter-spacing: -.05em; }.metric-strip small { color: #8c948f; font-size: 9px; }.metric-strip .metric-accent { color: white; background: var(--violet); }.metric-strip .metric-accent span, .metric-strip .metric-accent small { color: rgba(255,255,255,.65); }

.content-section { padding-top: 110px; padding-bottom: 120px; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, 390px); gap: 50px; align-items: end; margin-bottom: 42px; }.section-index { color: var(--violet); font: 9px var(--mono); letter-spacing: .12em; }.section-heading h2 { max-width: 750px; margin: 12px 0 0; font-size: clamp(35px,4.5vw,66px); line-height: 1.05; letter-spacing: -.055em; }.section-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.segmented { display: inline-flex; gap: 4px; padding: 4px; background: #e1e5dd; border-radius: 9px; }.segmented button, .filter-row button { padding: 9px 14px; color: #6f7772; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 700; }.segmented button.active { color: white; background: var(--ink); box-shadow: 0 4px 15px rgba(16,23,20,.15); }
.pick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 22px; }
.pick-card { position: relative; min-height: 385px; padding: 26px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 35px rgba(16,23,20,.04); transition: transform .2s, box-shadow .2s; }.pick-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.pick-card.featured { color: white; background: var(--ink); border-color: var(--ink); }.pick-card::after { position: absolute; right: -55px; bottom: -70px; width: 180px; height: 180px; content: ''; background: var(--card-accent, var(--lime)); border-radius: 50%; opacity: .18; }.pick-top { display: flex; justify-content: space-between; align-items: center; }.rank { color: var(--violet); font: 11px var(--mono); }.featured .rank { color: var(--lime); }.evidence-badge, .type-badge { display: inline-flex; align-items: center; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; font: 8px var(--mono); text-transform: uppercase; }.featured .evidence-badge { color: var(--lime); border-color: #39473f; }.pick-card h3 { margin: 38px 0 4px; font-size: 22px; letter-spacing: -.03em; }.plan-name { color: var(--muted); font: 10px var(--mono); }.featured .plan-name { color: #91a198; }.price { margin: 25px 0 17px; font: 500 31px var(--mono); }.price small { color: var(--muted); font-size: 9px; }.featured .price small { color: #8d9a93; }.pick-reason { min-height: 55px; color: #59645d; font-size: 11px; line-height: 1.7; }.featured .pick-reason { color: #a6b1aa; }.pick-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }.pick-meta span { padding: 5px 7px; color: #55605a; background: #eef1eb; border-radius: 4px; font: 8px var(--mono); }.featured .pick-meta span { color: #bdc6c0; background: #202b25; }.pick-caveat { position: absolute; right: 26px; bottom: 24px; left: 26px; z-index: 1; padding-top: 14px; color: #8b948e; border-top: 1px solid var(--line); font-size: 9px; line-height: 1.55; }.featured .pick-caveat { border-color: #344139; }.pick-caveat b { color: var(--coral); }

.directory-section { background: #e7eae3; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.directory-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }.filter-row { display: flex; flex-wrap: wrap; gap: 4px; }.filter-row button { border: 1px solid transparent; }.filter-row button.active { color: var(--ink); background: var(--lime); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }.toolbar-actions { display: flex; gap: 7px; }.toolbar-actions select, .icon-button { height: 36px; padding: 0 11px; color: var(--ink); background: var(--white); border: 1px solid #cbd1c8; border-radius: 6px; font-size: 9px; cursor: pointer; }
.table-wrap { overflow: hidden; background: var(--white); border: 1px solid #cbd1c8; border-radius: 10px; box-shadow: 0 12px 35px rgba(16,23,20,.04); }.table-wrap table { width: 100%; border-collapse: collapse; }.table-wrap th { padding: 13px 16px; color: #768079; background: #f3f5f0; border-bottom: 1px solid var(--line); font: 8px var(--mono); letter-spacing: .08em; text-align: left; text-transform: uppercase; }.table-wrap td { height: 56px; padding: 10px 16px; border-bottom: 1px solid #ebeee8; color: #59635d; font-size: 10px; }.table-wrap tr:last-child td { border-bottom: 0; }.table-wrap tbody tr { transition: background .15s; }.table-wrap tbody tr:hover { background: #f5f7f2; }.provider-name { color: var(--ink); font-weight: 800; }.provider-name small { display: block; margin-top: 2px; color: #89918c; font: 8px var(--mono); font-weight: 400; }.catalog-count { font: 11px var(--mono); }.catalog-count.zero { color: #a3aaa5; }.tag { display: inline-block; padding: 4px 6px; margin-right: 3px; color: #57605b; background: #e9ede6; border-radius: 4px; font: 7px var(--mono); }.tag.home { color: #4f3ec4; background: #e7e3ff; }.tag.verified { color: #426516; background: #e2f5bf; }.tag.discovery { color: #707772; background: #eef0ec; }.detail-link { padding: 6px 9px; color: var(--violet); background: transparent; border: 0; cursor: pointer; font-size: 9px; font-weight: 700; }.empty-row { padding: 40px !important; text-align: center; }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; color: #717a74; font: 9px var(--mono); }.pagination div { display: flex; align-items: center; gap: 9px; }.pagination button { width: 30px; height: 30px; background: var(--white); border: 1px solid #cbd1c8; border-radius: 6px; cursor: pointer; }.pagination button:disabled { opacity: .35; cursor: default; }.pagination #pageNumber { display: grid; width: 27px; place-items: center; color: var(--ink); }.attribution { margin: 21px 0 0; color: #7f8882; font-size: 9px; }.attribution a { color: var(--violet); text-decoration: underline; }

.tracked-section { background: var(--white); }.product-tabs { margin-bottom: 22px; }.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.product-card { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; transition: .2s; }.product-card:hover { border-color: #abb4ac; transform: translateY(-3px); }.product-card .stock { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 5px; color: #68716b; font: 8px var(--mono); }.product-card .stock::before { width: 7px; height: 7px; content: ''; background: #97a098; border-radius: 50%; }.product-card .stock.in_stock::before { background: var(--lime-deep); box-shadow: 0 0 0 4px rgba(139,199,47,.12); }.product-card .stock.out_of_stock::before { background: var(--coral); }.product-card .type-badge { align-self: flex-start; }.product-card h3 { margin: 25px 0 4px; font-size: 17px; }.product-card .product-name { color: #7c8580; font: 9px var(--mono); }.product-price { margin: 19px 0; font: 500 25px var(--mono); }.product-specs { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 6px; }.product-specs span { min-height: 43px; padding: 8px; background: var(--white); color: #7a837d; font-size: 8px; }.product-specs b { display: block; margin-top: 3px; color: var(--ink); font-size: 9px; }.product-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 18px; }.payments { color: #818984; font-size: 8px; line-height: 1.5; }.evidence-grade { display: grid; width: 26px; height: 26px; place-items: center; color: var(--ink); background: var(--lime); border: 1px solid var(--ink); border-radius: 50%; font: 10px var(--mono); }

.restock-section { color: white; background: var(--ink); }.section-heading.inverse .section-index { color: var(--lime); }.section-heading.inverse p { color: #86928b; }.restock-layout { display: grid; grid-template-columns: 1.55fr .75fr; gap: 14px; }.event-panel, .health-panel { padding: 24px; background: #151f1a; border: 1px solid #2a352f; border-radius: 12px; }.panel-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #2d3932; }.panel-title h3 { margin: 0; font-size: 14px; }.panel-title span { color: #718078; font: 8px var(--mono); }.event-list { display: grid; }.event-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 13px; align-items: start; padding: 17px 0; border-bottom: 1px solid #27332c; }.event-item:last-child { border: 0; }.event-marker { width: 8px; height: 8px; margin-top: 5px; background: var(--sky); border-radius: 50%; box-shadow: 0 0 0 5px rgba(183,221,247,.08); }.event-marker.stock { background: var(--lime); box-shadow: 0 0 0 5px rgba(184,242,75,.08); }.event-marker.price { background: var(--coral); box-shadow: 0 0 0 5px rgba(255,121,95,.08); }.event-item strong { display: block; font-size: 10px; }.event-item p { margin: 5px 0 0; color: #89968e; font-size: 9px; line-height: 1.55; }.event-item time { color: #647169; font: 8px var(--mono); }.empty-events { padding: 45px 0; color: #6e7b73; font-size: 10px; text-align: center; }.scan-score { padding: 3px 0 22px; border-bottom: 1px solid #2d3932; }.scan-score span { display: block; color: #7d8b83; font: 8px var(--mono); }.scan-score strong { display: block; margin-top: 9px; color: var(--lime); font: 500 34px var(--mono); }.health-list { display: grid; gap: 15px; margin-top: 21px; }.health-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; }.health-row span { color: #a0aca5; font-size: 9px; }.health-row b { color: #d7ddd9; font: 8px var(--mono); }.health-bar { grid-column: 1 / -1; height: 3px; overflow: hidden; background: #2c3831; border-radius: 4px; }.health-bar i { display: block; height: 100%; background: var(--lime); border-radius: inherit; }

footer { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 30px; padding: 34px 5.4vw; background: #0b100e; border-top: 1px solid #273029; color: #758078; }.footer strong { color: white; } footer strong { color: white; font-size: 11px; } footer p { margin: 0; font-size: 9px; line-height: 1.6; } footer a { color: var(--lime); font: 9px var(--mono); }

dialog { width: min(660px, calc(100vw - 30px)); max-height: 88vh; padding: 0; overflow: auto; color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: 14px; box-shadow: 12px 12px 0 rgba(16,23,20,.25); } dialog::backdrop { background: rgba(10,15,12,.58); backdrop-filter: blur(5px); }.dialog-close { position: sticky; z-index: 2; top: 15px; float: right; width: 32px; height: 32px; margin: 15px 15px 0 0; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-size: 18px; }.dialog-body { padding: 42px; }.dialog-kicker { color: var(--violet); font: 9px var(--mono); }.dialog-body h2 { margin: 9px 0 5px; font-size: 31px; letter-spacing: -.045em; }.dialog-body > p { color: var(--muted); font-size: 11px; line-height: 1.7; }.detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin: 25px 0; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 8px; }.detail-grid div { min-height: 64px; padding: 12px; background: var(--paper); }.detail-grid span { display: block; color: #89918c; font: 8px var(--mono); }.detail-grid strong { display: block; margin-top: 7px; font-size: 10px; }.dialog-section { margin-top: 22px; }.dialog-section h3 { font-size: 11px; }.dialog-section p, .dialog-section li { color: #66716a; font-size: 10px; line-height: 1.7; }.dialog-section a { color: var(--violet); text-decoration: underline; }.dialog-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }.dialog-actions a { padding: 9px 11px; color: white; background: var(--ink); border-radius: 5px; font-size: 9px; }
.toast { position: fixed; z-index: 50; right: 25px; bottom: 25px; padding: 11px 15px; color: white; background: var(--ink); border: 1px solid #3c4942; border-radius: 7px; opacity: 0; transform: translateY(15px); pointer-events: none; transition: .2s; font-size: 10px; }.toast.show { opacity: 1; transform: none; }
.mobile-nav { display: none; }
.install-button, .scan-button { padding: 7px 10px; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; font: 8px var(--mono); }
.install-button { color: var(--ink); background: var(--lime); }
.install-button[hidden] { display: none; }
.panel-title > div { display: flex; align-items: center; gap: 12px; }
.scan-button { color: var(--lime); background: transparent; border-color: #52645a; }
.scan-button:hover { background: #223028; }
.scan-button:disabled { color: #728078; cursor: wait; opacity: .7; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }
.product-card.detail-link { color: inherit; text-align: left; cursor: pointer; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 190px minmax(0,1fr); }.sidebar { width: 190px; padding-inline: 14px; }.hero-section { grid-template-columns: 1fr .8fr; }.radar-visual { width: 38vw; }.metric-strip { grid-template-columns: repeat(3,1fr); }.metric-strip article:nth-child(3) { border-right: 0; }.metric-strip article:nth-child(n+4) { border-top: 1px solid var(--line); }.pick-grid, .product-grid { grid-template-columns: repeat(2,1fr); }.pick-card:last-child { grid-column: span 2; }.section { padding-inline: 4vw; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }.app-shell { display: block; }.sidebar { display: none; } main { grid-column: auto; padding-bottom: 58px; }.topbar { height: 62px; padding: 0 15px; }.search-box { width: 100%; }.search-box kbd, .top-status .scan-time { display: none; }.top-status { margin-left: 8px; }.status-pill { white-space: nowrap; }.section { padding: 72px 18px; }.hero-section { display: block; min-height: auto; padding-top: 80px; }.hero-copy h1 { font-size: clamp(47px,15vw,68px); }.hero-copy p { margin: 22px 0; }.hero-actions { flex-wrap: wrap; }.radar-visual { width: 88vw; max-width: 430px; margin: 50px auto 0; }.metric-strip { grid-template-columns: repeat(2,1fr); }.metric-strip article { min-height: 123px; padding: 21px 17px; }.metric-strip article:nth-child(2n) { border-right: 0; }.metric-strip article:nth-child(n+3) { border-top: 1px solid var(--line); }.metric-strip .metric-accent { grid-column: span 2; }.section-heading { display: block; margin-bottom: 28px; }.section-heading h2 { font-size: 41px; }.section-heading p { margin-top: 18px; }.pick-grid, .product-grid { grid-template-columns: 1fr; }.pick-card:last-child { grid-column: auto; }.directory-toolbar { align-items: flex-start; flex-direction: column; }.toolbar-actions { width: 100%; }.toolbar-actions select { flex: 1; }.table-wrap { overflow-x: auto; }.table-wrap table { min-width: 720px; }.restock-layout { grid-template-columns: 1fr; } footer { grid-template-columns: 1fr; gap: 12px; padding: 30px 20px; }.mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(4,1fr); height: 56px; color: #adb7b1; background: rgba(16,23,20,.96); border-top: 1px solid #344038; backdrop-filter: blur(10px); }.mobile-nav a { display: grid; place-items: center; font-size: 10px; }.mobile-nav a:active { color: var(--lime); }.dialog-body { padding: 34px 22px; }
}

@media (max-width: 760px) { .top-status { display: none; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }