@layer reset, tokens, base, layout, components, utilities;
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
}
@layer tokens {
:root {
  --navy-900: #13263b;
  --blue-500: #336699;
  --orange-500: #ff6600;
  --mist-100: #eef2f6;
  --slate-700: #3d4654;
  --white: #ffffff;
  --color-canvas: light-dark(#eef2f6, #0e1b2a);
  --color-surface: light-dark(#ffffff, #13263b);
  --color-surface-sunken: light-dark(#f7f9fb, #223448);
  --color-brand: light-dark(#13263b, #0a131e);
  --color-brand-line: light-dark(#2e3e50, #243445);
  --color-text: light-dark(#3d4654, #cbd1d8);
  --color-text-strong: light-dark(#13263b, #eff3f6);
  --color-text-muted: light-dark(#606773, #96a0ab);
  --color-on-brand: light-dark(#ffffff, #eff3f6);
  --color-on-brand-muted: light-dark(#b3bac0, #b3bac0);
  --color-border: light-dark(#dee7ef, #324355);
  --color-control-border: light-dark(#818790, #76828f);
  --color-primary: light-dark(#336699, #99b2cc);
  --color-primary-hover: light-dark(#2d5986, #adc2d6);
  --color-primary-soft: light-dark(#ebf0f5, #1e3c5c);
  --color-accent: #ff6600;
  --color-accent-hover: #ff7d26;
  --color-on-accent: #13263b;
  --color-focus-surface: light-dark(#336699, #adc2d6);
  --color-focus: var(--color-focus-surface);
  --color-focus-on-brand: #ff6600;
  --color-success: light-dark(#1d6d4a, #2fbf71);
  --color-success-soft: light-dark(#e9f2ee, #173f40);
  --color-warning: light-dark(#925d0c, #f2b134);
  --color-warning-soft: light-dark(#f4eadb, #433b29);
  --color-danger: light-dark(#b4322e, #e38580);
  --color-danger-soft: light-dark(#faebea, #442a37);
  --color-rating: light-dark(#b06d00, #f2b134);
  --color-skeleton: light-dark(#e3e9ef, #2b3f55);
  --color-skeleton-shine: light-dark(#f3f6f9, #36495f);
  --color-photo-1: light-dark(#d3dee9, #2a3d52);
  --color-photo-2: light-dark(#a9bdd1, #1b2d41);
  --color-photo-ink: light-dark(#f7f9fb, #496078);
  --color-qr-ink: #13263b;
  --color-qr-bg: #ffffff;
  --color-scrim: light-dark(rgb(19 38 59 / 0.55), rgb(0 0 0 / 0.65));
  --color-shadow: light-dark(rgb(19 38 59 / 0.16), rgb(0 0 0 / 0.5));
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-display: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --text-price: 1.5rem;
  --text-input: 1rem;
  --leading-tight: 1.15;
  --leading-body: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 900;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --gutter: 1rem;
  --content-max: 75rem;
  --radius-sm: 4px;
  --radius-control: 8px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --ring: 0 0 0 1px var(--color-border);
  --shadow-raise: 0 12px 32px -8px var(--color-shadow), 0 0 0 1px var(--color-border);
  --control-height: 2.75rem;
  --duration: 160ms;
}
@media (min-width: 48rem) { :root { --gutter: 1.5rem; } }
@media (pointer: fine) and (min-width: 64rem) {
  :root { --control-height: 2.5rem; --text-input: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { :root { --duration: 0ms; } }
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
}
@layer base {
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.bf7828e2c258cffc.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.4ba7d3d096695818.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font: var(--weight-regular) var(--text-sm) / var(--leading-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  color: var(--color-text-strong);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
strong { color: var(--color-text-strong); font-weight: var(--weight-bold); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus-visible { outline-offset: 4px; }
main[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--color-primary-soft); color: var(--color-text-strong); }
time, data, .num { font-variant-numeric: tabular-nums; }
}
@layer layout {
body { display: flex; flex-direction: column; min-block-size: 100dvh; }
body > main { flex: 1 0 auto; }
body > main { padding-block-end: var(--space-12); }
@media (min-width: 48rem) { body > main { padding-block-end: var(--space-16); } }
body > main:has(> .section:nth-last-child(1 of :not([hidden], [data-island="report-dialog"]))) { padding-block-end: 0; }
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 36rem; }
.container--medium { max-width: 60rem; }
.section { padding-block: var(--space-12); }
.section--surface { background: var(--color-surface); box-shadow: var(--ring); }
.section--brand { background: var(--color-brand); color: var(--color-on-brand-muted); --color-focus: var(--color-focus-on-brand); }
.section--surface:has(+ .section--surface) { background: var(--color-canvas); box-shadow: none; }
@media (min-width: 48rem) { .section { padding-block: var(--space-16); } }
.section__head { display: grid; gap: var(--space-2); margin-block-end: var(--space-8); max-width: 44rem; }
.section__head--split { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
.section__head--flush { margin-block-end: 0; }
.section__eyebrow {
  color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.section__title { font-size: var(--text-2xl); }
.section__lead { font-size: var(--text-md); color: var(--color-text-muted); max-width: 40rem; }
.section--brand .section__title { color: var(--color-on-brand); }
.section--brand .section__eyebrow { color: var(--color-accent); }
.section--brand .section__lead { color: var(--color-on-brand-muted); }
@media (min-width: 48rem) { .section__title { font-size: 2.125rem; } }
.grid { display: grid; gap: var(--space-4); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.stack { --stack-gap: var(--space-4); display: grid; gap: var(--stack-gap); align-content: start; }
.stack--tight { --stack-gap: var(--space-2); }
.stack--loose { --stack-gap: var(--space-6); }
.stack > :is([role="status"], [aria-live]):empty { position: absolute; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
}
@layer components {
.brand {
  display: inline-flex; align-items: center; flex: none; justify-self: start; min-block-size: 44px;
  padding-inline: var(--space-2); margin-inline: calc(-1 * var(--space-2));
  text-decoration: none;
}
.brand__logo { display: block; block-size: 1.5rem; inline-size: auto; aspect-ratio: 1591 / 378; }
@media (min-width: 60rem) { .brand__logo { block-size: 1.75rem; } }
}
@layer components {
.logo {
  --logo-ink: var(--color-text-strong);
  --logo-accent: var(--logo-ink);
  color: var(--logo-ink); fill: var(--logo-accent);
}
.logo--on-brand { --logo-ink: var(--color-on-brand); --logo-accent: var(--color-accent); }
.logo--mono { --logo-accent: var(--logo-ink); }
}
@layer components {
.skip-link {
  position: fixed; z-index: 30;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + var(--space-2)); inset-inline-start: var(--gutter);
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--space-5);
  background: var(--color-surface); color: var(--color-text-strong);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-raise);
  font-weight: var(--weight-bold); text-decoration: none;
  --color-focus: var(--color-focus-on-brand);
  transform: translateY(calc(-100% - var(--space-4) - env(safe-area-inset-top, 0px)));
  transition: transform var(--duration) ease;
}
.skip-link:focus { transform: none; }
.skip-link:focus-visible { border-radius: var(--radius-pill); }
.skip-link:hover { color: var(--color-text-strong); text-decoration: underline; }
}
@layer components {
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--color-brand); border-block-end: 1px solid var(--color-brand-line);
  --color-focus: var(--color-focus-on-brand);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); min-block-size: 3.5rem; }
.site-header__nav { display: none; gap: var(--space-1); margin-inline-start: var(--space-4); }
.site-header__link {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--space-3);
  color: var(--color-on-brand-muted); font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-control);
}
.site-header__link:hover { color: var(--color-on-brand); background: var(--color-brand-line); text-decoration: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.site-header__actions .button { white-space: nowrap; }
.site-header__actions .site-header__signup { display: none; }
.site-header__logout { display: flex; margin: 0; }
.site-header__logout .button { border-color: transparent; padding-inline: var(--space-3); }
.site-header__logout .button:hover { background: var(--color-brand-line); color: var(--color-on-brand); }
.site-header__actions [aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.site-header--minimal .site-header__nav,
.site-header--minimal .site-header__menu-button,
.site-header--minimal .site-header__menu { display: none; }
@media (min-width: 60rem) {
  .site-header__nav { display: flex; }
  .site-header__menu { display: none; }
  .site-header__actions .site-header__signup { display: inline-flex; }
}
.site-header__menu-button {
  display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; padding: 0;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-on-brand); cursor: pointer;
  anchor-name: --site-header-menu;
  transition: background-color var(--duration) ease;
}
.site-header__menu-button:hover,
.site-header__actions:has(.site-header__menu:popover-open) .site-header__menu-button { background: var(--color-brand-line); }
.site-header__menu[popover] {
  position: fixed; inset: auto; inset-block-start: calc(env(safe-area-inset-top, 0px) + 3.5rem + var(--space-2)); inset-inline-end: var(--gutter);
  inline-size: min(18rem, calc(100vw - 2 * var(--gutter))); max-block-size: calc(100dvh - 3.5rem - 2 * var(--space-4)); overflow-y: auto;
  margin: 0; padding: var(--space-2); border: 0;
  background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-card); box-shadow: var(--shadow-raise);
  --color-focus: var(--color-focus-surface);
  opacity: 0; translate: 0 calc(-1 * var(--space-1));
  transition: opacity var(--duration) ease, translate var(--duration) ease, display var(--duration) allow-discrete, overlay var(--duration) allow-discrete;
}
.site-header__menu[popover]:popover-open { display: grid; gap: var(--space-1); opacity: 1; translate: 0 0; }
@starting-style {
  .site-header__menu[popover]:popover-open { opacity: 0; translate: 0 calc(-1 * var(--space-1)); }
}
.site-header__menu[popover]::backdrop { background: transparent; }
@media (min-width: 60rem) {
  .site-header__menu-button,
  .site-header__menu[popover]:popover-open { display: none; }
}
@supports (anchor-name: --a) {
  .site-header__menu[popover] {
    position-anchor: --site-header-menu;
    inset-block-start: calc(anchor(bottom) + var(--space-2)); inset-inline-end: anchor(right);
  }
}
.site-header__menu a:not(.button) {
  display: flex; align-items: center; min-block-size: 44px; padding-inline: var(--space-3);
  color: var(--color-text-strong); font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-control);
}
.site-header__menu a:not(.button):hover { background: var(--color-surface-sunken); }
.site-header__menu .button { margin-block-start: var(--space-2); }
.site-header__actions .site-header__publish { display: none; }
@media (min-width: 60rem) { .site-header__actions .site-header__publish { display: inline-flex; } }
.site-header__menu .site-header__logout { margin-block-start: var(--space-1); padding-block-start: var(--space-1); border-block-start: 1px solid var(--color-border); }
.site-header__menu .site-header__logout .button { inline-size: 100%; justify-content: flex-start; padding-inline: var(--space-3); background: transparent; color: var(--color-text-strong); border-radius: var(--radius-control); }
.site-header__menu .site-header__logout .button:hover { background: var(--color-surface-sunken); color: var(--color-text-strong); }
.site-header__actions--member > .site-header__logout { display: none; }
@media (min-width: 60rem) { .site-header__actions--member > .site-header__logout { display: flex; } }
.site-header__link[aria-current="page"] { color: var(--color-on-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.site-header__actions--member > .site-header__account { display: none; }
@media (min-width: 30rem) { .site-header__actions--member > .site-header__account { display: inline-flex; } }
.site-header--minimal .site-header__actions--member > .site-header__account { display: inline-flex; }
.site-header__count {
  display: inline-grid; place-items: center; min-inline-size: 1.5rem; block-size: 1.5rem; margin-inline-start: auto; padding-inline: var(--space-1);
  border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-surface);
  font-size: var(--text-xs); font-weight: var(--weight-black); font-variant-numeric: tabular-nums;
}
}
@layer components {
.account-nav { background: var(--color-surface); box-shadow: var(--ring); }
.account-nav__list { margin-inline: calc(-1 * var(--space-3)); display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
.account-nav__list::-webkit-scrollbar { display: none; }
.account-nav__link {
  display: inline-flex; align-items: center; min-block-size: 3rem; padding-inline: var(--space-3);
  color: var(--color-text-muted); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
  transition: color var(--duration) ease, box-shadow var(--duration) ease;
}
.account-nav__link:hover { color: var(--color-text-strong); text-decoration: none; box-shadow: inset 0 -3px 0 var(--color-border); }
.account-nav__link[aria-current="page"] { color: var(--color-text-strong); font-weight: var(--weight-bold); box-shadow: inset 0 -3px 0 var(--color-primary); }
.account-nav__link:focus-visible { outline-offset: -2px; border-radius: var(--radius-control); }
.account-nav__list { container-type: scroll-state; }
.account-nav__link[aria-current="page"] { scroll-initial-target: nearest; scroll-snap-align: center; }
.account-nav__list::before,
.account-nav__list::after {
  content: ""; position: sticky; z-index: 1; flex: none; inline-size: 2rem; pointer-events: none;
  opacity: 0; transition: opacity var(--duration) ease;
}
.account-nav__list::before { inset-inline-start: 0; margin-inline-end: calc(-2rem - var(--space-2)); background: linear-gradient(to right, var(--color-surface), transparent); }
.account-nav__list::after { inset-inline-end: 0; margin-inline-start: calc(-2rem - var(--space-2)); background: linear-gradient(to left, var(--color-surface), transparent); }
@container scroll-state(scrollable: inline-start) { .account-nav__list::before { opacity: 1; } }
@container scroll-state(scrollable: inline-end) { .account-nav__list::after { opacity: 1; } }
.account-nav__list:has(:focus-visible)::before,
.account-nav__list:has(:focus-visible)::after { opacity: 0; }
.account-nav__count {
  display: inline-grid; place-items: center; min-inline-size: 1.25rem; block-size: 1.25rem; margin-inline-start: var(--space-2); padding-inline: var(--space-1);
  border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-surface);
  font-size: var(--text-xs); font-weight: var(--weight-black); font-variant-numeric: tabular-nums;
}
}
@layer components {
.breadcrumbs { font-size: var(--text-xs); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; min-inline-size: 0; }
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "›"; content: "›" / "";
  color: var(--color-text-muted); font-size: var(--text-sm);
}
.breadcrumbs__item a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: var(--weight-semibold); text-decoration: none; }
.breadcrumbs__item a:hover { text-decoration: underline; }
.breadcrumbs__item[aria-current="page"] { color: var(--color-text-muted); }
.breadcrumbs__item[aria-current="page"] { display: block; flex: 1 1 8rem; min-block-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.breadcrumbs__item[aria-current="page"]::before { margin-inline-end: var(--space-2); }
}
@layer components {
.link-button { display: inline; padding: 0; border: 0; background: none; color: var(--color-primary); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link-button:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
}
@layer components {
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--control-height); padding-inline: var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.1; text-align: center;
  padding-block: var(--space-2); text-decoration: none; cursor: pointer; text-wrap: balance;
  transition: background-color var(--duration) ease, border-color var(--duration) ease, color var(--duration) ease;
}
.button:hover { text-decoration: none; }
.button--primary { background: var(--color-accent); color: var(--color-on-accent); }
.button--primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.button--secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.button--secondary:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.button--ghost { background: transparent; color: var(--color-primary); padding-inline: var(--space-3); }
.button--ghost:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.button--on-brand { background: transparent; color: var(--color-on-brand); border-color: var(--color-on-brand-muted); }
.button--on-brand:hover { background: var(--color-brand-line); color: var(--color-on-brand); }
.button--link-on-brand { background: transparent; color: var(--color-on-brand); padding-inline: var(--space-3); }
.button--link-on-brand:hover { background: var(--color-brand-line); color: var(--color-on-brand); }
.button--danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.button--danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.button--large { min-block-size: 3rem; padding-inline: var(--space-6); font-size: var(--text-md); }
.button--block { inline-size: 100%; }
.button:disabled, .button[aria-disabled="true"] {
  background: var(--color-surface-sunken); color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed;
}
.button__icon { flex: none; inline-size: 1.125rem; block-size: 1.125rem; }
.button--ghost-danger { background: transparent; color: var(--color-danger); padding-inline: var(--space-3); }
.button--ghost-danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
}
@layer components {
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start;
  min-block-size: 1.5rem; padding-inline: var(--space-2);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-pill);
  color: var(--color-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap;
  vertical-align: middle;
}
.chip--success { color: var(--color-success); border-color: var(--color-success); }
.chip--warning { color: var(--color-warning); border-color: var(--color-warning); }
.chip--primary { color: var(--color-primary); border-color: var(--color-primary); }
.chip--danger { color: var(--color-danger); border-color: var(--color-danger); }
.chip--accent { color: var(--color-on-brand); border-color: var(--color-accent); }
.chip__icon { inline-size: 0.875rem; block-size: 0.875rem; flex: none; }
.chip__icon--up { rotate: 180deg; }
.chip--hidden { border-style: dashed; color: var(--color-text-muted); }
}
@layer components {
.field { display: grid; align-content: start; gap: var(--space-1); min-inline-size: 0; }
.field__label { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.field__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.field__optional { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.field__hint { color: var(--color-text-muted); font-size: var(--text-xs); }
.field__hint--attached { margin-block-start: calc(-1 * var(--space-2)); }
.field__error {
  display: flex; gap: var(--space-2); align-items: start;
  color: var(--color-danger); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.field__error::before {
  content: "!"; flex: none; display: grid; place-items: center; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.1em;
  border-radius: 50%; background: var(--color-danger); color: var(--color-surface); font-size: 0.75rem; font-weight: var(--weight-black);
}
.field--group { border: 0; padding: 0; margin: 0; }
.field--group > .field__label { padding: 0; margin-block-end: var(--space-1); }
.field__screening { display: flex; align-items: start; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.field__screening::before {
  content: ""; flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.0625rem;
  background: var(--color-primary); mask: url("/assets/images/icons/shield.1f353f2ae2f2a697.svg") center / contain no-repeat;
}
.field--suggested :is(.input, .select) { background-color: var(--color-primary-soft); border-color: var(--color-primary); }
}
@layer components {
.input {
  inline-size: 100%; min-block-size: var(--control-height); padding-inline: var(--space-3);
  background: var(--color-surface); color: var(--color-text-strong);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
  font-size: var(--text-input); transition: border-color var(--duration) ease;
}
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover { border-color: var(--color-text-muted); }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); border-radius: var(--radius-control); }
.field--invalid .input { border-color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); }
.input--textarea { display: block; min-block-size: 9rem; padding-block: var(--space-3); line-height: var(--leading-body); resize: vertical; }
.input:disabled { background-color: var(--color-surface-sunken); color: var(--color-text-muted); border-color: var(--color-control-border); border-style: dashed; cursor: not-allowed; }
.input[readonly] { background-color: var(--color-surface-sunken); }
.input[readonly]:hover { border-color: var(--color-control-border); }
}
@layer components {
.select {
  inline-size: 100%; min-block-size: var(--control-height); padding-inline: var(--space-3) var(--space-8);
  background: var(--color-surface); color: var(--color-text-strong);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-control);
  font-size: var(--text-input); transition: border-color var(--duration) ease;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--color-text-muted) 50%);
  background-position: right 1.05rem center, right 0.7rem center; background-size: 0.35rem 0.35rem; background-repeat: no-repeat;
}
.select:hover { border-color: var(--color-text-muted); }
.select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); border-radius: var(--radius-control); }
.field--invalid .select { border-color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); }
.select:disabled { background-color: var(--color-surface-sunken); color: var(--color-text-muted); border-color: var(--color-control-border); border-style: dashed; cursor: not-allowed; }
}
@layer components {
.input-group { position: relative; display: flex; }
.input-group .input { padding-inline-end: 2.5rem; }
.input-group__suffix {
  position: absolute; inset-inline-end: var(--space-3); inset-block: 0; display: grid; place-items: center;
  color: var(--color-text-muted); font-weight: var(--weight-semibold); pointer-events: none;
}
.input-group__toggle {
  position: absolute; inset-inline-end: 2px; inset-block: 2px; padding-inline: var(--space-3);
  border: 0; border-radius: 6px; background: transparent; color: var(--color-primary); font-weight: var(--weight-bold); cursor: pointer;
}
.input-group__toggle:hover { background: var(--color-primary-soft); }
.input-group:has(.input-group__toggle) .input { padding-inline-end: 5.5rem; }
.input-group--days { max-inline-size: 9rem; }
.input-group--days .input { padding-inline-end: 3.25rem; }
.input-group--price { max-inline-size: 14rem; }
.input-group__suffix svg { inline-size: 1rem; block-size: 1rem; }
}
@layer components {
.check { display: flex; gap: var(--space-3); align-items: start; min-block-size: 44px; padding-block: var(--space-2); cursor: pointer; }
.check__box {
  appearance: none; flex: none; display: grid; place-content: center;
  inline-size: 1.25rem; block-size: 1.25rem; margin: 0.05rem 0 0;
  border: 2px solid var(--color-control-border); border-radius: var(--radius-sm);
  background-color: var(--color-surface); color: var(--color-primary); cursor: inherit;
  transition: border-color var(--duration) ease, background-color var(--duration) ease;
}
.check__box[type="radio"] { border-radius: 50%; }
.check__box::before { content: ""; }
.check__box[type="checkbox"]::before {
  inline-size: 0.375rem; block-size: 0.6875rem; margin-block-start: -0.1875rem;
  border: 0 solid var(--color-surface); rotate: 45deg;
}
.check__box[type="checkbox"]:checked { border-color: currentColor; background-color: currentColor; }
.check__box[type="checkbox"]:checked::before { border-width: 0 2px 2px 0; }
.check__box[type="radio"]::before { border: 0 solid currentColor; border-radius: 50%; }
.check__box[type="radio"]:checked { border-color: currentColor; }
.check__box[type="radio"]:checked::before { border-width: 0.25rem; }
:where(.check:hover) > .check__box:enabled { border-color: var(--color-primary); }
.check__box:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.field--invalid .check__box:enabled:not(:checked), .check__box[aria-invalid="true"]:enabled:not(:checked) { border-color: var(--color-danger); background-color: var(--color-danger-soft); }
.check__box:disabled { border-style: dashed; border-color: var(--color-control-border); background-color: var(--color-surface-sunken); color: var(--color-text-muted); }
.check__box[type="checkbox"]:disabled:checked { border-style: solid; }
.check:has(.check__box:disabled) { color: var(--color-text-muted); cursor: not-allowed; }
.check__hint { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-4); min-inline-size: 0; }
.fieldset__legend { padding: 0; margin-block-end: var(--space-1); font-size: var(--text-md); font-weight: var(--weight-heavy); color: var(--color-text-strong); }
.fieldset + .fieldset { padding-block-start: var(--space-6); background: linear-gradient(var(--color-border), var(--color-border)) top / 100% 1px no-repeat; }
}
@layer components {
.form-row {
  --form-row-gap: var(--space-4);
  display: grid; column-gap: var(--form-row-gap); row-gap: 0;
  grid-auto-rows: auto auto auto auto auto var(--form-row-gap);
  margin-block-end: calc(-1 * var(--form-row-gap));
}
.form-row > * { grid-row: span 6; }
.form-row > .field { grid-template-rows: subgrid; row-gap: 0; }
.form-row > .field > * + * { margin-block-start: var(--space-1); }
.form-row > :where(fieldset, :not(.field)) { margin-block-end: var(--form-row-gap); }
.form-row > .field--group > .field__label { margin-block-end: 0; }
@media (min-width: 30rem) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
@layer components {
.code-input {
  inline-size: 100%; max-inline-size: 15rem; min-block-size: 3.5rem; text-align: center;
  font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: 0.35em; padding-inline-start: 0.35em;
  font-variant-numeric: tabular-nums;
}
.code-input--recovery { letter-spacing: 0.12em; font-family: var(--font-mono); font-size: var(--text-xl); text-transform: uppercase; }
}
@layer components {
.notice {
  display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control); background: var(--color-primary-soft); color: var(--color-text-strong);
  border-inline-start: 4px solid var(--color-primary);
}
.notice--info { background: var(--color-primary-soft); border-color: var(--color-primary); }
.notice--info .notice__title { color: var(--color-primary); }
.notice--warning { background: var(--color-warning-soft); border-color: var(--color-warning); }
.notice--warning .notice__title { color: var(--color-warning); }
.notice--danger { background: var(--color-danger-soft); border-color: var(--color-danger); }
.notice--danger .notice__title { color: var(--color-danger); }
.notice--success { background: var(--color-success-soft); border-color: var(--color-success); }
.notice--success .notice__title { color: var(--color-success); }
.notice__title { font-weight: var(--weight-heavy); }
.notice ul { margin: 0; padding-inline-start: var(--space-5); }
}
@layer components {
.notice-bar { padding-block-start: var(--space-6); }
.notice-bar:has(+ .auth) { max-inline-size: 36rem; }
.notice-bar:has(+ .auth .container--medium) { max-inline-size: 60rem; }
.notice-bar + .auth,
.notice-bar + .section { padding-block-start: var(--space-6); }
}
@layer components {
.card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); padding: var(--space-5); min-inline-size: 0; }
@media (min-width: 48rem) { .card--roomy { padding: var(--space-8); } }
.card > :is(h2, h3):first-child { justify-self: start; font-size: var(--text-lg); }
.card.stack > :is(h2, h3):first-child + p { margin-block-start: calc(var(--space-2) - var(--stack-gap)); }
}
@layer components {
.hero { padding-block: var(--space-10) var(--space-12); }
.hero__grid { display: grid; gap: var(--space-8); align-items: start; }
.hero__eyebrow { display: inline-flex; }
.hero__title { font-size: var(--text-display); font-weight: var(--weight-black); letter-spacing: -0.03em; line-height: 1.05; }
.hero__title em { font-style: normal; color: var(--color-primary); }
.hero__lead { font-size: var(--text-md); max-width: 36rem; }
.hero__perks { display: grid; gap: var(--space-2); }
.hero__perk { display: flex; gap: var(--space-2); align-items: start; color: var(--color-text); }
.hero__perk svg { flex: none; inline-size: 1.125rem; block-size: 1.125rem; color: var(--color-success); margin-block-start: 0.1em; }
.hero__seller-link { padding-block: 0.875rem; font-weight: var(--weight-semibold); }
@media (min-width: 60rem) {
  .hero { padding-block: var(--space-16); }
  .hero__grid:has(> :nth-child(2)) { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); }
  .hero__grid:not(:has(> :nth-child(2))) > * { max-inline-size: 48rem; }
}
@media (min-width: 60rem) { .hero__quickstart { grid-column: 2; grid-row: 1 / span 2; } }
.hero {
  --hero-veil: light-dark(color-mix(in srgb, var(--color-canvas) 80%, transparent), color-mix(in srgb, var(--color-canvas) 84%, transparent));
  --hero-veil-soft: light-dark(color-mix(in srgb, var(--color-canvas) 40%, transparent), color-mix(in srgb, var(--color-canvas) 68%, transparent));
  position: relative;
  isolation: isolate;
  background-color: var(--color-canvas);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-image: url("/assets/images/hero/cars-768.13732b5c688fe461.webp");
  background-image: image-set(url("/assets/images/hero/cars-768.615266bb1b205b0e.avif") type("image/avif"), url("/assets/images/hero/cars-768.13732b5c688fe461.webp") type("image/webp"));
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  aspect-ratio: 4 / 5;
  max-block-size: 100%;
  background-image: linear-gradient(var(--hero-veil) 55%, var(--color-canvas));
  pointer-events: none;
}
.hero__eyebrow { background-color: var(--color-surface); }
.hero__seller-link, .hero__seller-link:hover { color: var(--color-text-strong); }
@media (min-width: 48rem) {
  .hero {
    background-image: url("/assets/images/hero/cars-1440.8e6ba2a596e69ff4.webp");
    background-image: image-set(url("/assets/images/hero/cars-1440.ed1474b454535cde.avif") type("image/avif"), url("/assets/images/hero/cars-1440.8e6ba2a596e69ff4.webp") type("image/webp"));
  }
  .hero::before { aspect-ratio: 9 / 4; }
}
@media (min-width: 60rem) {
  .hero { background-position: center; background-size: cover; }
  .hero::before {
    inset: 0;
    aspect-ratio: auto;
    max-block-size: none;
    background-image: linear-gradient(to right, var(--hero-veil) calc(50% + var(--space-2)), var(--hero-veil-soft) calc(50% + 16rem));
  }
}
@media (min-width: 90rem), (min-width: 60rem) and (min-resolution: 1.5x) {
  .hero {
    background-image: url("/assets/images/hero/cars-2560.ddb5d97dcd2b6376.webp");
    background-image: image-set(url("/assets/images/hero/cars-2560.ef39f052f40f351f.avif") type("image/avif"), url("/assets/images/hero/cars-2560.ddb5d97dcd2b6376.webp") type("image/webp"));
  }
}
}
@layer components {
.steps { display: grid; gap: var(--space-4); counter-reset: step; }
.steps__item { position: relative; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); }
.steps__num {
  display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--weight-black); font-size: var(--text-md);
}
.steps__title { font-size: var(--text-lg); }
.steps__text { color: var(--color-text); }
.steps__note { color: var(--color-text-muted); font-size: var(--text-xs); }
@media (min-width: 40rem) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
}
@layer components {
.pro { display: grid; gap: var(--space-8); }
.pro__benefits { display: grid; gap: var(--space-4); }
.pro__benefit { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); color: var(--color-on-brand-muted); }
.pro__benefit svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--color-accent); margin-block-start: 0.1em; }
.pro__benefit strong { color: var(--color-on-brand); display: block; }
@media (min-width: 40rem) { .pro__benefits { grid-template-columns: 1fr 1fr; } }
}
@layer components {
.founders { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-brand-line); color: var(--color-on-brand-muted); --color-focus: var(--color-focus-on-brand); }
.founders__title { color: var(--color-on-brand); font-size: var(--text-2xl); font-weight: var(--weight-black); }
.founders__title span { color: var(--color-accent); }
@media (min-width: 48rem) { .founders { grid-template-columns: 1fr auto; align-items: center; padding: var(--space-8); } }
}
@layer components {
.plans { display: grid; gap: var(--space-4); }
@media (min-width: 56rem) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plans__note { color: var(--color-on-brand-muted); font-size: var(--text-xs); }
}
@layer components {
.plan { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); color: var(--color-text); }
.plan__name { font-size: var(--text-lg); }
.plan__for { color: var(--color-text-muted); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-1); flex-wrap: wrap; }
.plan__amount { color: var(--color-text-strong); font-size: 2.25rem; font-weight: var(--weight-black); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.plan__period { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.plan__extra { color: var(--color-text-muted); font-size: var(--text-xs); }
.plan__list { display: grid; gap: var(--space-2); }
.plan__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); }
.plan__list svg { inline-size: 1rem; block-size: 1rem; color: var(--color-success); margin-block-start: 0.15em; }
.plan__first { margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); }
.plan__first strong { color: var(--color-text-strong); }
}
@layer components {
.trust { display: grid; gap: var(--space-4); }
@media (min-width: 40rem) { .trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__item { display: grid; gap: var(--space-2); align-content: start; }
.trust__icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-control); background: var(--color-primary-soft); color: var(--color-primary); }
.trust__icon svg { inline-size: 1.375rem; block-size: 1.375rem; }
.trust__title { font-size: var(--text-md); }
}
@layer components {
.faq { display: grid; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); overflow: hidden; }
.faq__item + .faq__item { border-block-start: 1px solid var(--color-border); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-block-size: 3.5rem; padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none;
  color: var(--color-text-strong); font-weight: var(--weight-bold); font-size: var(--text-md);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex: none; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:hover { background: var(--color-surface-sunken); }
.faq__q:focus-visible { outline-offset: -2px; border-radius: 0; }
.faq__a { padding: 0 var(--space-5) var(--space-5); max-width: 46rem; }
}
@layer components {
.container:has(> .legal) { max-inline-size: calc(36rem + 2 * var(--gutter)); }
.legal { font-size: var(--text-md); }
.legal__title { font-size: var(--text-2xl); }
.legal__lead { font-size: var(--text-lg); color: var(--color-text); }
.legal__section { padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-border); }
.legal__heading { font-size: var(--text-lg); }
.legal > .notice { font-size: var(--text-sm); }
.legal__holder { display: grid; }
.legal__holder > div { display: grid; gap: var(--space-1); padding-block: var(--space-3); }
.legal__holder > div + div { border-block-start: 1px solid var(--color-border); }
.legal__holder dt { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.legal__holder dd { color: var(--color-text-strong); overflow-wrap: anywhere; }
@media (min-width: 36rem) {
  .legal__holder > div { grid-template-columns: 10rem 1fr; gap: var(--space-4); align-items: baseline; }
}
@media (min-width: 48rem) { .legal__title { font-size: 2.125rem; } }
}
@layer components {
.site-footer { background: var(--color-brand); color: var(--color-on-brand-muted); padding-block: var(--space-12) var(--space-8); --color-focus: var(--color-focus-on-brand); }
.site-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.site-footer__about { display: grid; gap: var(--space-3); max-width: 22rem; align-content: start; }
.site-footer__heading { color: var(--color-on-brand); font-size: var(--text-sm); font-weight: var(--weight-heavy); margin-block-end: var(--space-2); }
.site-footer__links { display: grid; }
.site-footer__links a { display: inline-flex; align-items: center; min-block-size: 2.25rem; color: var(--color-on-brand-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-on-brand); text-decoration: underline; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-10); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-brand-line); font-size: var(--text-xs); }
}
@layer components {
.auth { padding-block-start: var(--space-8); }
.auth__inner { display: grid; gap: var(--space-6); }
.auth__head { display: grid; gap: var(--space-2); }
.auth__title { font-size: var(--text-2xl); }
.auth__subtitle { font-size: var(--text-lg); }
.auth__lead { font-size: var(--text-md); color: var(--color-text); }
.auth__alt { text-align: center; color: var(--color-text-muted); }
.auth__alt a { font-weight: var(--weight-bold); }
.auth__actions { display: grid; gap: var(--space-3); }
@media (min-width: 30rem) { .auth__actions--row { display: flex; flex-wrap: wrap; align-items: center; } }
@media (min-width: 48rem) { .auth__title { font-size: 2.125rem; } }
}
@layer components {
.progress { display: grid; gap: var(--space-2); }
.progress__label { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.progress__label strong { color: var(--color-text-strong); }
.progress__track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); }
.progress__track[data-steps="3"] { grid-template-columns: repeat(3, 1fr); }
.progress__track[data-steps="4"] { grid-template-columns: repeat(4, 1fr); }
.progress__seg { block-size: 0.25rem; border-radius: var(--radius-pill); background: var(--color-border); }
.progress__seg--done { background: var(--color-primary); }
}
@layer components {
.choices { display: grid; gap: var(--space-4); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
@media (min-width: 56rem) { .choices { grid-template-columns: repeat(3, 1fr); } }
}
@layer components {
.choice { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); cursor: pointer; transition: box-shadow var(--duration) ease; }
.choice:hover { box-shadow: 0 0 0 1px var(--color-control-border); }
.choice:has(.choice__input:checked) { box-shadow: 0 0 0 2px var(--color-primary); }
.choice:has(.choice__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.choice__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.choice__top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: start; }
.choice__title { font-size: var(--text-lg); }
.choice__radio { flex: none; inline-size: 1.375rem; block-size: 1.375rem; border-radius: 50%; border: 2px solid var(--color-control-border); display: grid; place-items: center; }
.choice:has(.choice__input:checked) .choice__radio { border-color: var(--color-primary); }
.choice:has(.choice__input:checked) .choice__radio::after { content: ""; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--color-primary); }
.choice__price { color: var(--color-text-strong); font-weight: var(--weight-heavy); }
.choice__desc { color: var(--color-text-muted); }
.choice__can { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
.choice__can > span { display: grid; justify-items: center; gap: 2px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-control); background: var(--color-surface-sunken); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center; }
.choice__yes { color: var(--color-success); }
.choice__no { color: var(--color-text-muted); }
.choice__can b { font-weight: var(--weight-black); }
.choice__meta { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.type-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); box-shadow: var(--ring); }
.type-summary__label { color: var(--color-text-muted); font-size: var(--text-xs); }
.type-summary__value { color: var(--color-text-strong); font-weight: var(--weight-heavy); }
}
@layer components {
.mail-hero { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--radius-card); background: var(--color-primary-soft); color: var(--color-primary); }
.mail-hero svg { inline-size: 2.25rem; block-size: 2.25rem; }
}
@layer components {
.mail-address { overflow-wrap: anywhere; }
}
@layer components {
.checklist { display: grid; gap: var(--space-3); }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.checklist__dot { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--weight-black); font-size: var(--text-xs); }
}
@layer components {
.totp { display: grid; gap: var(--space-6); }
.totp__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); }
.totp__body { display: grid; gap: var(--space-3); min-inline-size: 0; }
.totp__step-title { font-size: var(--text-md); }
}
@layer components {
.qr { inline-size: 11rem; padding: var(--space-3); background: var(--color-qr-bg); border-radius: var(--radius-control); box-shadow: var(--ring); }
.qr svg { inline-size: 100%; block-size: auto; color: var(--color-qr-ink); }
}
@layer components {
.keybox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.keybox__key { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken); box-shadow: var(--ring); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-strong); letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }
}
@layer components {
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(9.5rem, calc(50% - var(--space-2) / 2))), 1fr)); gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); box-shadow: var(--ring); counter-reset: code; }
.recovery-codes li { white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-text-strong); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.recovery-codes li::before { counter-increment: code; content: counter(code) "."; display: inline-block; min-inline-size: 3ch; margin-inline-end: 1ch; text-align: end; color: var(--color-text-muted); font-size: var(--text-xs); }
.dialog .recovery-codes { padding: var(--space-3); }
.dialog .recovery-codes li { font-size: var(--text-sm); }
}
@layer components {
.welcome-mark {
  display: block; inline-size: 4rem; block-size: 4rem; padding: 0.875rem;
  background: var(--color-brand); border-radius: var(--radius-card);
}
}
@layer components {
.next-list { display: grid; gap: var(--space-2); }
.next-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); color: var(--color-text); }
.next-list svg { inline-size: 1rem; block-size: 1rem; color: var(--color-primary); margin-block-start: 0.2em; }
}
@layer components {
.dialog { inline-size: min(36rem, calc(100vw - 2rem)); max-block-size: min(40rem, calc(100dvh - 2rem)); padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-raise); }
.dialog::backdrop { background: var(--color-scrim); }
.dialog__inner { display: grid; gap: var(--space-4); padding: var(--space-6); }
.dialog__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }
.dialog__title { font-size: var(--text-xl); }
.dialog__close { flex: none; inline-size: 44px; block-size: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-surface-sunken); color: var(--color-text-strong); cursor: pointer; font-size: var(--text-lg); }
.dialog ul { display: grid; gap: var(--space-2); padding-inline-start: var(--space-5); }
.dialog .button--danger { background: var(--color-danger); color: var(--color-surface); border-color: var(--color-danger); }
.dialog .button--danger:hover { background: color-mix(in srgb, var(--color-danger) 85%, var(--color-text-strong)); border-color: transparent; color: var(--color-surface); }
.dialog .button--danger:disabled { background: var(--color-surface-sunken); color: var(--color-text-muted); border-color: var(--color-border); }
}
@layer components {
.account-screen { max-inline-size: 48rem; min-inline-size: 0; }
.account-screen__title { justify-self: start; font-size: var(--text-xl); }
.account-screen__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.account-screen__back { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; font-weight: var(--weight-semibold); text-decoration: none; }
.account-screen__back:hover { text-decoration: underline; }
.account-screen__back svg { inline-size: 1rem; block-size: 1rem; rotate: 180deg; }
.account-screen--wide { max-inline-size: none; }
}
@layer components {
.account-home > .notice a { font-weight: var(--weight-bold); }
}
@layer components {
.summary-list { container-type: inline-size; display: grid; }
.summary-list__row { display: grid; gap: var(--space-1); padding-block: var(--space-3); }
.summary-list__row:first-child { padding-block-start: 0; }
.summary-list__row:last-child { padding-block-end: 0; }
.summary-list__row + .summary-list__row { border-block-start: 1px solid var(--color-border); }
.summary-list__term { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.summary-list__value { color: var(--color-text-strong); overflow-wrap: anywhere; }
@container (min-width: 30rem) {
  .summary-list__row { grid-template-columns: 11rem 1fr; gap: var(--space-4); align-items: baseline; }
}
.summary-list__term:has(> .chip) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.summary-list__value--text { white-space: pre-line; overflow-wrap: anywhere; max-inline-size: 65ch; }
}
@layer components {
.session-list { display: grid; }
.session-list__item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4); border-block-start: 1px solid var(--color-border);
}
.session-list__item:last-child { padding-block-end: 0; }
.session-list__main { flex: 1 1 16rem; display: grid; gap: var(--space-1); min-inline-size: 0; }
.session-list__device { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-strong); }
.session-list__meta { overflow-wrap: anywhere; }
.session-list__item > .button { flex: none; }
}
@layer components {
.icon-button {
  display: inline-grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--color-primary); cursor: pointer; text-decoration: none;
  transition: background-color var(--duration) ease, color var(--duration) ease;
}
.icon-button svg { inline-size: 1.25rem; block-size: 1.25rem; }
.icon-button:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.icon-button--danger { color: var(--color-danger); }
.icon-button--danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.icon-button--raised { background: var(--color-surface); color: var(--color-text-strong); box-shadow: var(--shadow-raise); }
.icon-button--raised:hover { background: var(--color-surface-sunken); color: var(--color-text-strong); }
.icon-button:disabled, .icon-button[aria-disabled="true"] { background: transparent; color: var(--color-text-muted); opacity: 0.45; cursor: not-allowed; }
}
@layer components {
.photo-label {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-on-brand);
  font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap;
}
}
@layer components {
.gallery { position: relative; display: grid; min-inline-size: 0; margin-inline: calc(-1 * var(--gutter)); background: var(--color-surface); overflow: hidden; }
.gallery__viewport { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; background: var(--color-surface-sunken); }
.gallery__viewport::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .gallery__viewport { scroll-behavior: smooth; } }
.gallery__slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; scroll-margin-block-start: calc(3.5rem + var(--space-4)); }
.gallery__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__count { position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); }
.gallery__badge { position: absolute; z-index: 1; inset-inline-start: var(--space-3); inset-block-start: var(--space-3); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.gallery__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; display: none; }
.gallery__nav--prev { inset-inline-start: var(--space-3); }
.gallery__nav--next { inset-inline-end: var(--space-3); }
.gallery__thumbs { display: none; gap: var(--space-2); padding: var(--space-3); overflow-x: auto; scrollbar-width: thin; }
.gallery__thumbs > li { flex: none; }
.gallery__thumb { position: relative; display: block; inline-size: 5.5rem; aspect-ratio: 4 / 3; border-radius: var(--radius-control); overflow: hidden; box-shadow: var(--ring); transition: box-shadow var(--duration) ease; }
.gallery__thumb:hover { box-shadow: 0 0 0 2px var(--color-primary); }
.gallery__thumb:focus-visible { border-radius: var(--radius-control); }
.gallery__thumb > * { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__empty { display: grid; place-content: center; justify-items: center; gap: var(--space-2); aspect-ratio: 4 / 3; padding: var(--space-6); background: var(--color-surface-sunken); color: var(--color-text-muted); text-align: center; }
.gallery__empty svg { inline-size: min(40%, 10rem); block-size: auto; aspect-ratio: 278 / 140; color: var(--color-control-border); }
.gallery__empty strong { display: block; }
.gallery--sold .gallery__img { filter: grayscale(0.7); }
@media (min-width: 40rem) {
  .gallery { margin-inline: 0; border-radius: var(--radius-card); box-shadow: var(--ring); }
  .gallery__nav { display: inline-grid; }
  .gallery__thumbs { display: flex; }
}
}
@layer components {
.car-page { display: grid; gap: var(--space-4); }
.car-page__aside, .car-page__main { display: grid; gap: var(--space-4); align-content: start; min-inline-size: 0; }
.car-page__description { white-space: pre-line; max-inline-size: 65ch; overflow-wrap: anywhere; }
.notice + .car-page { margin-block-start: var(--space-2); }
@media (min-width: 60rem) {
  .car-page { grid-template-columns: minmax(0, 1fr) 22.5rem; grid-template-areas: "gallery aside" "main aside"; gap: var(--space-6); align-items: start; }
  .car-page__gallery { grid-area: gallery; }
  .car-page__aside { grid-area: aside; position: sticky; inset-block-start: calc(3.5rem + var(--space-6)); }
  .car-page__main { grid-area: main; }
}
}
@layer components {
.car-summary { display: grid; gap: var(--space-4); }
.car-summary__head { display: grid; gap: var(--space-1); }
.car-summary__title { font-size: var(--text-xl); overflow-wrap: anywhere; }
.car-summary__place { color: var(--color-text-muted); }
.car-summary__sold { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text-strong); font-weight: var(--weight-bold); }
.car-summary__actions { display: grid; gap: var(--space-2); }
@media (min-width: 48rem) { .car-summary__title { font-size: var(--text-2xl); } }
}
@layer components {
.car-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(8rem, calc((100% - 2 * var(--space-2)) / 3)), 1fr)); gap: var(--space-2); }
.car-facts__item { display: grid; gap: 2px; align-content: start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken); }
.car-facts__term { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.car-facts__value { color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; }
}
@layer components {
.avatar { display: grid; place-items: center; flex: none; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-lg); font-weight: var(--weight-black); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
.avatar--organization { border-radius: var(--radius-control); }
.avatar--large { inline-size: 4.5rem; block-size: 4.5rem; font-size: var(--text-2xl); }
@media (min-width: 48rem) { .avatar--large { inline-size: 5.5rem; block-size: 5.5rem; } }
.avatar--anonymous { background: var(--color-surface-sunken); border: 1.5px dashed var(--color-control-border); color: transparent; }
}
@layer components {
.seller-card { position: relative; display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); min-inline-size: 0; transition: box-shadow var(--duration) ease; }
.seller-card:has(.seller-card__link:hover) { box-shadow: 0 0 0 1px var(--color-control-border); }
.seller-card:has(.seller-card__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seller-card__kicker { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.seller-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.seller-card__text { display: grid; gap: 2px; min-inline-size: 0; }
.seller-card__name { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.seller-card__link { color: var(--color-text-strong); text-decoration: none; }
.seller-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.seller-card__link:hover { color: var(--color-primary); text-decoration: underline; }
.seller-card__link:focus-visible { outline: none; }
.seller-card__meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.seller-card__rating { margin-block-start: var(--space-1); }
.seller-card__note { padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.spec-list { columns: 18rem 2; column-gap: var(--space-8); }
.spec-list__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); min-block-size: 2.5rem; padding-block: var(--space-2); border-block-end: 1px solid var(--color-border); break-inside: avoid; }
.spec-list__term { color: var(--color-text-muted); }
.spec-list__value { color: var(--color-text-strong); font-weight: var(--weight-semibold); text-align: end; overflow-wrap: anywhere; }
.spec-list__plate { font-family: var(--font-mono); letter-spacing: 0.08em; }
}
@layer components {
.equipment { display: grid; gap: var(--space-5); }
.equipment__group { display: grid; gap: var(--space-2); }
.equipment__title { font-size: var(--text-sm); }
.equipment__list { columns: 13rem 3; column-gap: var(--space-6); }
.equipment__item { display: flex; gap: var(--space-2); align-items: start; padding-block: var(--space-1); break-inside: avoid; }
.equipment__item svg { flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.2em; color: var(--color-success); }
}
@layer components {
.car-card { position: relative; display: grid; grid-template-rows: auto 1fr; min-inline-size: 0; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); overflow: hidden; transition: box-shadow var(--duration) ease; }
.car-card:has(.car-card__link:hover) { box-shadow: 0 0 0 1px var(--color-control-border); }
.car-card:has(.car-card__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.car-card__photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-sunken); color: var(--color-text-muted); }
.car-card__placeholder { inline-size: 40%; block-size: auto; aspect-ratio: 278 / 140; color: var(--color-control-border); }
.car-card__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.car-card__badge { position: absolute; inset-inline-start: var(--space-3); inset-block-start: var(--space-3); }
.car-card__body { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); }
.car-card__title { font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.car-card__link { color: var(--color-text-strong); text-decoration: none; }
.car-card__link::after { content: ""; position: absolute; inset: 0; }
.car-card__link:hover { color: var(--color-primary); text-decoration: underline; }
.car-card__link:focus-visible { outline: none; }
.car-card__data { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.car-card--sold .car-card__img { filter: grayscale(0.7); }
}
@layer components {
.list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.list-head__title { font-size: var(--text-xl); }
.list-head__count { color: var(--color-text-muted); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
}
@layer components {
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-4); }
.pagination__link {
  display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--control-height); padding-inline: var(--space-4);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); background: var(--color-surface);
  color: var(--color-primary); font-weight: var(--weight-bold); text-decoration: none;
  transition: background-color var(--duration) ease, border-color var(--duration) ease;
}
.pagination__link[href]:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-hover); text-decoration: none; }
.pagination__link[aria-disabled="true"] { background: transparent; border-style: dashed; color: var(--color-text-muted); }
.pagination__link svg { inline-size: 1rem; block-size: 1rem; }
.pagination__status { color: var(--color-text-muted); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
}
@layer components {
.profile-head { padding-block: var(--space-8); background: var(--color-surface); box-shadow: var(--ring); }
.profile-head__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5) var(--space-4); align-items: center; }
.profile-head__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.profile-head__kind { color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.profile-head__title { font-size: var(--text-2xl); overflow-wrap: anywhere; }
.profile-head__meta { color: var(--color-text-muted); }
.profile-head__sites { grid-column: 1 / -1; display: grid; gap: var(--space-3); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); }
.profile-head__subtitle { font-size: var(--text-md); }
@media (min-width: 48rem) {
  .profile-head { padding-block: var(--space-10); }
  .profile-head__inner { column-gap: var(--space-6); }
  .profile-head__title { font-size: 2.125rem; }
}
.profile-head__rating { margin-block-start: var(--space-2); }
}
@layer components {
.site-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-2); }
.site-list__item { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); box-shadow: var(--ring); }
.site-list__name { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.site-list__place { color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; }
.pills__item {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--control-height); padding-inline: var(--space-4);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-strong); font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer;
  transition: background-color var(--duration) ease, border-color var(--duration) ease, color var(--duration) ease;
}
.pills__item:hover { background: var(--color-surface-sunken); color: var(--color-text-strong); text-decoration: none; }
.pills__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.pills__count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pills__item[aria-current="page"],
.pills__item:has(.pills__input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); font-weight: var(--weight-bold); }
.pills__item[aria-current="page"]::before,
.pills__item:has(.pills__input:checked)::before {
  content: ""; inline-size: 0.35rem; block-size: 0.65rem; margin-block-start: -0.2rem;
  border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg;
}
.pills__item[aria-current="page"] .pills__count,
.pills__item:has(.pills__input:checked) .pills__count { color: inherit; }
.pills__item:focus-visible { border-radius: var(--radius-pill); }
.pills__item:has(.pills__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pills__item:has(.pills__input:disabled) { background: var(--color-surface-sunken); border-style: dashed; color: var(--color-text-muted); cursor: not-allowed; }
}
@layer components {
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); column-gap: var(--space-4); }
}
@layer components {
.form-actions {
  position: sticky; inset-block-end: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface); box-shadow: 0 -1px 0 var(--color-border);
}
.form-actions > .button { flex: 1 1 auto; }
@media (min-width: 48rem) {
  .form-actions { inset-block-end: var(--space-4); margin-inline: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); box-shadow: var(--shadow-raise); }
  .form-actions > .button { flex: none; }
}
}
@layer components {
.photo-uploader { container: photos / inline-size; display: grid; gap: var(--space-4); }
.photo-uploader__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.photo-uploader__count { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.photo-uploader__picker {
  position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-4);
  border: 2px dashed var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface-sunken);
  text-align: center; cursor: pointer; transition: border-color var(--duration) ease;
}
.photo-uploader__picker:hover { border-color: var(--color-primary); }
.photo-uploader__picker:has(.photo-uploader__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.photo-uploader__picker:has(.photo-uploader__input:disabled) { cursor: not-allowed; border-color: var(--color-border); }
.photo-uploader__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.photo-uploader__action { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-size: var(--text-md); font-weight: var(--weight-bold); }
.photo-uploader__action svg { inline-size: 1.375rem; block-size: 1.375rem; }
.photo-uploader__rules { color: var(--color-text-muted); font-size: var(--text-xs); }
.photo-uploader__list { display: grid; gap: var(--space-2); }
@container photos (min-width: 21rem) {
  .photo-uploader__list { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-3); }
}
.photo-uploader__privacy { display: flex; align-items: start; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.photo-uploader__privacy svg { flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.0625rem; color: var(--color-primary); }
}
@layer components {
.photo-item { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-2); background: var(--color-surface); border-radius: var(--radius-control); box-shadow: var(--ring); min-inline-size: 0; }
.photo-item__thumb { position: relative; grid-row: span 2; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
.photo-item__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity var(--duration) ease; }
.photo-item__body { display: grid; gap: var(--space-1); align-content: start; min-inline-size: 0; }
.photo-item__label { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.photo-item__status { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.photo-item__progress {
  display: block; inline-size: 100%; block-size: 0.375rem; appearance: none; border: 0; border-radius: var(--radius-pill);
  background: var(--color-surface-sunken); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; color: var(--color-primary);
}
.photo-item__progress::-webkit-progress-bar { background: transparent; }
.photo-item__progress::-webkit-progress-value { background: var(--color-primary); border-radius: var(--radius-pill); }
.photo-item__progress::-moz-progress-bar { background: var(--color-primary); border-radius: var(--radius-pill); }
.photo-item__progress:indeterminate {
  background: repeating-linear-gradient(-45deg, var(--color-primary) 0 0.25rem, transparent 0.25rem 0.5rem) var(--color-surface-sunken);
  animation: photo-item-progress calc(var(--duration) * 9) linear infinite;
}
.photo-item__progress:indeterminate::-webkit-progress-bar { background: transparent; }
.photo-item__progress:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes photo-item-progress {
  from { background: linear-gradient(var(--color-primary), var(--color-primary)) -66.67% 0 / 40% 100% no-repeat var(--color-surface-sunken); }
  to { background: linear-gradient(var(--color-primary), var(--color-primary)) 166.67% 0 / 40% 100% no-repeat var(--color-surface-sunken); }
}
.photo-item__error { display: flex; gap: var(--space-1); align-items: start; color: var(--color-danger); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.photo-item__error::before {
  content: "!"; flex: none; display: grid; place-items: center; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.05em;
  border-radius: 50%; background: var(--color-danger); color: var(--color-surface); font-size: 0.6875rem; font-weight: var(--weight-black);
}
.photo-item__retry { margin-inline-start: calc(-1 * var(--space-3)); }
.photo-item__actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: calc(-1 * var(--space-2)); }
.photo-item__actions > :last-child { margin-inline-start: auto; }
.photo-item__action--before svg { rotate: -90deg; }
.photo-item__action--after svg { rotate: 90deg; }
.photo-item--queued .photo-item__img, .photo-item--uploading .photo-item__img { opacity: 0.5; }
.photo-item--error { box-shadow: 0 0 0 2px var(--color-danger); }
@container photos (min-width: 21rem) {
  .photo-item { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0; overflow: hidden; }
  .photo-item__thumb { grid-row: auto; border-radius: 0; }
  .photo-item__body { padding: var(--space-2) var(--space-3) 0; }
  .photo-item__actions { margin-inline-start: 0; padding: 0 var(--space-1) var(--space-1); }
  .photo-item__action--before svg { rotate: 180deg; }
  .photo-item__action--after svg { rotate: 0deg; }
}
.photo-item__placeholder {
  position: absolute; inset: 0; margin: auto; inline-size: 1.75rem; block-size: 1.75rem; color: var(--color-text-muted);
}
.photo-item--processing .photo-item__img { opacity: 0.5; }
.photo-item--held { box-shadow: 0 0 0 2px var(--color-warning); }
.photo-item--rejected { box-shadow: 0 0 0 2px var(--color-danger); }
}
@layer components {
.screening-status {
  display: flex; align-items: start; gap: var(--space-1); min-inline-size: 0; margin: 0;
  color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.35;
}
.screening-status__icon, .screening-status::before { flex: none; inline-size: 1rem; block-size: 1rem; }
.screening-status__icon { margin-block-start: 0.0625rem; }
.screening-status__body { display: grid; gap: 0.125rem; min-inline-size: 0; overflow-wrap: anywhere; }
.screening-status__title { font-weight: var(--weight-bold); }
.screening-status__hint { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.screening-status--processing::before {
  content: ""; background: radial-gradient(circle, var(--color-primary) 0 0.25rem, transparent calc(0.25rem + 0.5px));
  animation: screening-pulse calc(var(--duration) * 12) ease-in-out infinite;
}
@keyframes screening-pulse { 50% { opacity: 0.3; } }
.screening-status--redacted { color: var(--color-text); }
.screening-status--redacted .screening-status__icon { color: var(--color-primary); }
.screening-status--redacted .screening-status__title { color: var(--color-text-strong); }
.screening-status--held .screening-status__icon,
.screening-status--held .screening-status__title { color: var(--color-warning); }
.screening-status--held:not(:has(> .screening-status__icon))::before {
  content: ""; margin-block-start: 0.0625rem; background: var(--color-warning);
  mask: url("/assets/images/icons/eye.4f0726cd3aeb5e08.svg") center / contain no-repeat;
}
.screening-status--rejected::before {
  content: "!"; display: grid; place-items: center; margin-block-start: 0.0625rem; border-radius: 50%;
  background: var(--color-danger); color: var(--color-surface); font-size: 0.6875rem; font-weight: var(--weight-black); line-height: 1;
}
.screening-status--rejected .screening-status__title { color: var(--color-danger); }
.screening-status--withdrawn .screening-status__title { color: var(--color-text-strong); }
.screening-status--withdrawn::before {
  content: ""; margin-block-start: 0.0625rem; border: 2px solid var(--color-text-muted); border-radius: 50%;
  background: linear-gradient(var(--color-text-muted) 0 0) center / 0.4375rem 2px no-repeat;
}
.card > :is(h2, h3):first-child + .screening-status { font-size: var(--text-sm); }
}
@layer components {
.car-rows { display: grid; gap: var(--space-3); }
}
@layer components {
.car-row__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.car-row__link:focus-visible { outline: none; }
.car-row { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); transition: box-shadow var(--duration) ease; }
.car-row:has(.car-row__link:hover) { box-shadow: 0 0 0 1px var(--color-control-border); }
.car-row:has(.car-row__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.car-row__photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text-muted); }
.car-row__placeholder { inline-size: 60%; block-size: auto; aspect-ratio: 278 / 140; color: var(--color-control-border); }
.car-row__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.car-row__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.car-row__title { font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.car-row__link { color: var(--color-text-strong); text-decoration: none; }
.car-row__link:hover { color: var(--color-primary); text-decoration: underline; }
.car-row__data { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.car-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.car-row__actions { position: relative; z-index: 1; grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: calc(-1 * var(--space-3)); }
@media (min-width: 40rem) {
  .car-row { grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; }
  .car-row__actions { grid-column: auto; margin-inline-start: 0; }
}
}
@layer components {
.stat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); gap: var(--space-2); }
.stat-list__link { display: grid; gap: var(--space-1); align-content: start; min-block-size: 44px; padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken); box-shadow: var(--ring); color: var(--color-text-muted); text-decoration: none; transition: box-shadow var(--duration) ease; }
.stat-list__link:hover { box-shadow: 0 0 0 1px var(--color-control-border); color: var(--color-text-muted); }
.stat-list__link:hover .stat-list__label { text-decoration: underline; }
.stat-list__link:focus-visible { border-radius: var(--radius-control); }
.stat-list__value { color: var(--color-text-strong); font-size: var(--text-2xl); font-weight: var(--weight-black); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-list__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.stat-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 30rem) {
  .stat-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); }
}
.stat-list > li { display: grid; }
.stat-list__label { overflow-wrap: break-word; hyphens: auto; }
}
@layer components {
.empty-state { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-5); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); text-align: center; }
.empty-state__icon { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); }
.empty-state__icon svg { inline-size: 70%; block-size: auto; aspect-ratio: 278 / 140; }
.empty-state__title { font-size: var(--text-lg); }
.empty-state__text { max-inline-size: 30rem; color: var(--color-text-muted); }
.empty-state > .button { margin-block-start: var(--space-2); }
.empty-state--compact { padding: var(--space-6) var(--space-5); }
.empty-state--compact .empty-state__icon { inline-size: 3.5rem; block-size: 3.5rem; }
.empty-state__icon--glyph svg { inline-size: 2.25rem; block-size: 2.25rem; aspect-ratio: 1; }
}
@layer components {
.live { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-success); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.live::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; animation: live-pulse calc(var(--duration) * 12) ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.35; } }
.live--off { color: var(--color-text-muted); }
.live--off::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; animation: none; }
}
@layer components {
.buyer { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.buyer::before { content: ""; flex: none; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 2px; border: 1.5px dashed currentColor; }
}
@layer components {
.deadline { display: grid; gap: var(--space-1); min-inline-size: 0; }
.deadline__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--space-3); }
.deadline__left { color: var(--color-text-strong); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.deadline__date { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.deadline__bar { --elapsed: 0%; position: relative; block-size: 0.375rem; border-radius: var(--radius-pill); background: var(--color-surface-sunken); box-shadow: inset 0 0 0 1px var(--color-border); overflow: hidden; }
.deadline__bar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--elapsed); border-radius: inherit; background: var(--color-primary); }
.deadline__bar[data-elapsed="10"] { --elapsed: 10%; }
.deadline__bar[data-elapsed="20"] { --elapsed: 20%; }
.deadline__bar[data-elapsed="30"] { --elapsed: 30%; }
.deadline__bar[data-elapsed="40"] { --elapsed: 40%; }
.deadline__bar[data-elapsed="50"] { --elapsed: 50%; }
.deadline__bar[data-elapsed="60"] { --elapsed: 60%; }
.deadline__bar[data-elapsed="70"] { --elapsed: 70%; }
.deadline__bar[data-elapsed="80"] { --elapsed: 80%; }
.deadline__bar[data-elapsed="90"] { --elapsed: 90%; }
.deadline__bar[data-elapsed="100"] { --elapsed: 100%; }
.deadline--soon .deadline__left,
.deadline--grace .deadline__left { color: var(--color-warning); }
.deadline--soon .deadline__bar::before,
.deadline--grace .deadline__bar::before { background: var(--color-warning); }
.deadline--closed .deadline__left { color: var(--color-text-muted); }
.deadline--closed .deadline__bar::before { background: var(--color-control-border); }
.deadline--large .deadline__left { font-size: var(--text-md); }
.deadline__note { color: var(--color-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
}
@layer components {
.request-card { position: relative; display: flex; flex-direction: column; block-size: 100%; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); min-inline-size: 0; transition: box-shadow var(--duration) ease; }
.request-card > .request-card__figures { margin-block-start: auto; }
.request-card:has(.request-card__link:hover) { box-shadow: 0 0 0 1px var(--color-control-border); }
.request-card:has(.request-card__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.request-card__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.request-card__kicker { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.request-card__title { font-size: var(--text-lg); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.request-card__link { color: var(--color-text-strong); text-decoration: none; }
.request-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.request-card__link:hover { color: var(--color-primary); text-decoration: underline; }
.request-card__link:focus-visible { outline: none; }
.request-card__specs { color: var(--color-text-muted); overflow-wrap: anywhere; }
.request-card__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); padding-block: var(--space-3); border-block: 1px solid var(--color-border); }
.request-card__figure { display: grid; gap: 2px; align-content: start; }
.request-card__term { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.request-card__value { color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.request-card__figure--budget .request-card__value { font-size: var(--text-price); font-weight: var(--weight-black); line-height: 1.15; }
.request-card__note { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.request-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }
.request-card__value--none { color: var(--color-text-muted); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: 0; }
}
@layer components {
.request-page { display: grid; gap: var(--space-4); }
.request-page__aside, .request-page__main { display: grid; gap: var(--space-4); align-content: start; min-inline-size: 0; }
.request-page__description { white-space: pre-line; max-inline-size: 65ch; overflow-wrap: anywhere; }
.notice + .request-page { margin-block-start: var(--space-2); }
@media (min-width: 60rem) {
  .request-page { grid-template-columns: minmax(0, 1fr) 22.5rem; grid-template-areas: "main aside"; gap: var(--space-6); align-items: start; }
  .request-page__aside { grid-area: aside; position: sticky; inset-block-start: calc(3.5rem + var(--space-6)); }
  .request-page__main { grid-area: main; }
}
}
@layer components {
.request-summary { display: grid; gap: var(--space-4); }
.request-summary__head { display: grid; gap: var(--space-2); }
.request-summary__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.request-summary__kicker { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.request-summary__title { font-size: var(--text-xl); overflow-wrap: anywhere; }
.request-summary__place { color: var(--color-text-muted); }
.request-summary__budget { display: grid; gap: 2px; padding-block: var(--space-3); border-block: 1px solid var(--color-border); }
.request-summary__label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.request-summary__price { color: var(--color-text-strong); font-size: var(--text-price); font-weight: var(--weight-black); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.request-summary__price-note { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.request-summary__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }
.request-summary__closed { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text-strong); font-weight: var(--weight-bold); }
.request-summary__closed span { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.request-summary__actions { display: grid; gap: var(--space-2); }
.request-summary__offers { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px var(--space-3); padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-border); }
.request-summary__offers > .request-summary__label { grid-column: 1; }
.request-summary__best { grid-column: 1; color: var(--color-text-strong); font-size: var(--text-xl); font-weight: var(--weight-heavy); line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.request-summary__best--none { color: var(--color-text-muted); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: 0; }
.request-summary__count { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; min-block-size: 44px; margin-block-end: calc(-1 * var(--space-2)); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.request-summary__hint { color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; text-wrap: balance; }
.request-summary__hint--mine { color: var(--color-text-strong); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.request-summary__budget > .below-market-badge { margin-block-start: var(--space-2); }
}
@layer components {
.request-vehicles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: var(--space-2); }
.request-vehicles__item { display: grid; gap: 2px; align-content: start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken); min-inline-size: 0; }
.request-vehicles__make { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.request-vehicles__model { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.request-vehicles__model--any { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
}
@layer components {
.feed-card { display: grid; padding: 0; }
.feed-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--color-border); }
.feed-card__title { font-size: var(--text-lg); }
.feed-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.feed { display: grid; }
.feed__item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-5); }
.feed__item + .feed__item { border-block-start: 1px solid var(--color-border); }
.feed__item:last-child { border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }
.feed__time { display: grid; align-content: start; gap: 1px; padding-block-start: 1px; color: var(--color-text-strong); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.3; font-variant-numeric: tabular-nums; }
.feed__date { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.feed__main { display: grid; gap: var(--space-1); min-inline-size: 0; }
.feed__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.feed__type { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.feed__type::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 2px; background: currentColor; }
.feed__type--published { color: var(--color-primary); }
.feed__type--updated { color: var(--color-text); }
.feed__type--deadline-approaching,
.feed__type--grace-started { color: var(--color-warning); }
.feed__type--expired,
.feed__type--cancelled,
.feed__type--bought-elsewhere { color: var(--color-text-muted); }
.feed__type--question,
.feed__type--clarification { color: var(--color-text); }
.feed__text { color: var(--color-text); overflow-wrap: anywhere; }
.feed__who { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.feed__who--buyer { display: inline-flex; align-items: center; gap: var(--space-1); }
.feed__who--buyer::before { content: ""; flex: none; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 2px; border: 1.5px dashed var(--color-text-muted); }
.feed__thread { display: grid; gap: var(--space-3); margin-block-start: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-control-border); }
.feed__reply { display: grid; gap: 2px; }
.feed__reply-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.feed__new { display: none; }
.feed__item--new .feed__new { display: inline-flex; min-block-size: 1.25rem; padding-inline: 0.375rem; }
.feed__item--new { animation: feed-arrive calc(var(--duration) * 12) ease-out; }
@keyframes feed-arrive { from { background: var(--color-surface-sunken); } to { background: transparent; } }
.feed__type--offer-submitted,
.feed__type--offer-updated { color: var(--color-success); }
.feed__type--offer-withdrawn,
.feed__type--offer-discarded { color: var(--color-text-muted); }
.feed__type--deadline-extended { color: var(--color-warning); }
.feed__role { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.feed__offer { font-weight: var(--weight-semibold); }
.feed__price { color: var(--color-text-strong); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed__body { color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; max-inline-size: 65ch; }
.feed__changes { display: grid; gap: 2px; }
.feed__change { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-variant-numeric: tabular-nums; }
.feed__field { color: var(--color-text-muted); }
.feed__from { color: var(--color-text-muted); text-decoration: line-through; }
.feed__to { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.feed__arrow { color: var(--color-text-muted); }
.feed__respond { justify-self: start; margin-inline-start: calc(-1 * var(--space-3)); margin-block-end: calc(-1 * var(--space-2)); }
.feed__respond[hidden] { display: none; }
.feed__reply .feed__body { font-size: var(--text-sm); }
.feed__reply--new .feed__new { display: inline-flex; min-block-size: 1.25rem; padding-inline: 0.375rem; }
.feed__reply--new { border-radius: var(--radius-sm); animation: feed-reply-arrive calc(var(--duration) * 12) ease-out; }
@keyframes feed-reply-arrive {
  from { background: var(--color-surface-sunken); box-shadow: 0 0 0 var(--space-2) var(--color-surface-sunken); }
  to { background: transparent; box-shadow: 0 0 0 var(--space-2) transparent; }
}
.feed__who--anonymous { color: var(--color-text-strong); }
.feed__text .rating, .feed__reply-meta .rating { vertical-align: baseline; }
.feed__type--awarded { color: var(--color-success); }
.feed__type--review-published { color: var(--color-text); }
.feed__who--moderation { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.feed__who--moderation::before {
  content: ""; flex: none; align-self: center; inline-size: 0.875rem; block-size: 0.875rem; background: currentColor;
  mask: url("/assets/images/icons/shield.1f353f2ae2f2a697.svg") center / contain no-repeat;
}
.feed__type--moderation { color: var(--color-text-strong); }
.feed__head > :is(.report-button, .button),
.feed__reply-meta > :is(.report-button, .button) { margin-inline-start: auto; margin-block: calc(-1 * var(--space-3)); }
.feed__item--hidden .feed__body:not(.feed__reply .feed__body),
.feed__reply--hidden .feed__body { padding-inline-start: var(--space-3); border-inline-start: 2px dashed var(--color-control-border); color: var(--color-text); }
.feed__moderation { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.feed__moderation .button { margin-inline-start: calc(-1 * var(--space-3)); }
.feed__moderation .chip + .button { margin-inline-start: 0; }
}
@layer components {
.feed-refresh {
  position: fixed; z-index: 15; inset-inline: var(--gutter); inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; max-inline-size: 30rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  background: var(--color-surface); color: var(--color-text-strong); border-radius: var(--radius-card); box-shadow: var(--shadow-raise);
}
.feed-refresh__text { flex: 1 1 10rem; }
.feed-refresh__text strong { display: block; }
}
@layer components {
.search-layout { display: grid; gap: var(--space-4); align-items: start; }
.search-layout__filters, .search-layout__results { min-inline-size: 0; }
@media (min-width: 60rem) { .search-layout { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--space-6); } }
}
@layer components {
.filters { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); }
.filters__toggle { list-style: none; display: flex; align-items: center; gap: var(--space-2); min-block-size: 3rem; padding-inline: var(--space-5) var(--space-4); border-radius: var(--radius-card); color: var(--color-text-strong); font-weight: var(--weight-bold); cursor: pointer; }
.filters__toggle::-webkit-details-marker { display: none; }
.filters__toggle svg { flex: none; inline-size: 1.125rem; block-size: 1.125rem; color: var(--color-primary); }
.filters__toggle::after { content: ""; margin-inline-start: auto; inline-size: 0.5rem; block-size: 0.5rem; border: solid var(--color-text-muted); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -0.15rem; transition: rotate var(--duration) ease; }
.filters[open] > .filters__toggle::after { rotate: -135deg; translate: 0 0.1rem; }
.filters__toggle:hover { background: var(--color-surface-sunken); }
.filters[open] > .filters__toggle { border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: 0 1px 0 var(--color-border); }
.filters__toggle:focus-visible { outline-offset: -2px; border-radius: var(--radius-card); }
.filters__count { display: inline-grid; place-items: center; min-inline-size: 1.5rem; block-size: 1.5rem; padding-inline: var(--space-1); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-surface); font-size: var(--text-xs); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; }
.filters__body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.filters__head { display: grid; gap: var(--space-1); }
.filters__title { font-size: var(--text-lg); }
.filters__hint { color: var(--color-text-muted); font-size: var(--text-xs); }
.filters__actions { display: grid; gap: var(--space-2); padding-block-start: var(--space-2); }
@media (min-width: 30rem) {
  .filters .form-row--2:has(> .field > .field__error) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; margin-block-end: 0; }
  .filters .form-row--2:has(> .field > .field__error) > .field { display: contents; }
  .filters .form-row--2:has(> .field > .field__error) > .field > * { grid-row: 2; }
  .filters .form-row--2:has(> .field > .field__error) > .field > .field__label-row { grid-row: 1; align-self: end; }
  .filters .form-row--2:has(> .field > .field__error) > .field:first-child > * { grid-column: 1; }
  .filters .form-row--2:has(> .field > .field__error) > .field:last-child > * { grid-column: 2; }
  .filters .form-row--2:has(> .field > .field__error) > .field > .field__error { grid-row: auto; grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .filters > .filters__toggle { display: none; }
  .filters::details-content { content-visibility: visible; display: block; }
}
.filters__body > .check, .filters__body > .field > .check { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.filters__body .check__hint { font-weight: var(--weight-regular); }
}
@layer components {
.request-rows { display: grid; gap: var(--space-3); }
}
@layer components {
.request-row { position: relative; display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); transition: box-shadow var(--duration) ease; }
.request-row:has(.request-row__link:hover) { box-shadow: 0 0 0 1px var(--color-control-border); }
.request-row:has(.request-row__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.request-row__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-1) var(--space-4); }
.request-row__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.request-row__title { font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.request-row__link { color: var(--color-text-strong); text-decoration: none; }
.request-row__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.request-row__link:hover { color: var(--color-primary); text-decoration: underline; }
.request-row__link:focus-visible { outline: none; }
.request-row__budget { flex: none; color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-black); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.request-row__data { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.request-row__foot { display: grid; gap: var(--space-2); }
.request-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.request-row__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: calc(-1 * var(--space-3)); margin-block: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)); }
@media (min-width: 40rem) {
  .request-row__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); }
  .request-row__actions { margin-inline-start: 0; margin-block-start: 0; }
}
.request-row__offers { color: var(--color-text); font-variant-numeric: tabular-nums; }
}
@layer components {
.vehicle-picker { display: grid; gap: var(--space-3); }
.vehicle-picker__list { display: grid; gap: var(--space-3); }
.vehicle-picker__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken); }
.vehicle-picker__fields { --form-row-gap: var(--space-2); min-inline-size: 0; }
.vehicle-picker__item .field__label { font-size: var(--text-xs); }
.vehicle-picker__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-2); inline-size: 100%; }
.vehicle-picker__add { justify-self: start; }
}
@layer components {
.deadline-preview { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); }
.deadline-preview__date { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
.deadline-preview__note { color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.quickstart { display: grid; gap: var(--space-4); align-content: start; }
.quickstart__title { font-size: var(--text-lg); }
.quickstart__fine { color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.offer-list { container-type: inline-size; display: grid; gap: var(--space-3); min-inline-size: 0; }
}
@layer components {
.offer-card { position: relative; display: grid; align-items: start; min-inline-size: 0; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); overflow: hidden; transition: box-shadow var(--duration) ease; }
.offer-card:has(.offer-card__link:hover) { box-shadow: 0 0 0 1px var(--color-control-border); }
.offer-card:has(.offer-card__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.offer-card__photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-sunken); }
.offer-card__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.offer-card__badge { position: absolute; inset-inline-start: var(--space-3); inset-block-start: var(--space-3); }
.offer-card__count { position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); }
.offer-card__body { display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0; padding: var(--space-4) var(--space-5) var(--space-4); }
.offer-card__title { font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.offer-card__link { color: var(--color-text-strong); text-decoration: none; }
.offer-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.offer-card__link:hover { color: var(--color-primary); text-decoration: underline; }
.offer-card__link:focus-visible { outline: none; }
.offer-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.offer-card__amount { color: var(--color-text-strong); font-size: var(--text-price); font-weight: var(--weight-black); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.offer-card__before { color: var(--color-text-muted); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; text-decoration: line-through; }
.offer-card__drop { color: var(--color-success); font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.offer-card__terms { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.offer-card__data { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.offer-card__seller { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.offer-card__seller-name { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.offer-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-3); margin-block-start: var(--space-1); padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.offer-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)); margin-inline-end: calc(-1 * var(--space-3)); }
@container (min-width: 34rem) {
  .offer-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; }
  .offer-card__photo { inline-size: 100%; block-size: 100%; }
}
.offer-card--closed { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-radius: 0; box-shadow: none; overflow: visible; }
.offer-card--closed + .offer-card--closed { border-block-start: 1px solid var(--color-border); }
.offer-card--closed:has(.offer-card__link:hover) { box-shadow: none; background: var(--color-surface-sunken); }
.offer-card--closed:has(.offer-card__link:focus-visible) { outline-offset: -2px; }
.offer-card--closed .offer-card__photo { border-radius: var(--radius-control); block-size: auto; }
.offer-card--closed .offer-card__body { gap: var(--space-1); padding: 0; }
.offer-card--closed .offer-card__title { font-size: var(--text-sm); }
.offer-card--closed .offer-card__amount { font-size: var(--text-lg); font-weight: var(--weight-heavy); }
.offer-card--closed .offer-card__link::after { border-radius: 0; }
@container (min-width: 34rem) {
  .offer-card--closed { grid-template-columns: 6.5rem minmax(0, 1fr); }
}
.offer-card__placeholder { position: static; inset: auto; inline-size: 40%; block-size: auto; aspect-ratio: 278 / 140; color: var(--color-control-border); }
.offer-card--closed .offer-card__placeholder { inline-size: 60%; }
.offer-card--won,
.offer-card--won:has(.offer-card__link:hover) { box-shadow: 0 0 0 2px var(--color-success); }
.offer-card__badge svg { inline-size: 0.875rem; block-size: 0.875rem; }
.offer-card--lost .offer-card__img { filter: grayscale(1); opacity: 0.75; }
.offer-card--lost .offer-card__amount { font-size: var(--text-xl); }
.offer-card__seller .rating { font-size: inherit; }
.offer-card__seller-kind { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.offer-card__mine { align-self: center; }
}
@layer components {
.offers { display: grid; gap: var(--space-3); min-inline-size: 0; scroll-margin-block-start: calc(3.5rem + var(--space-4)); }
.offers__note { color: var(--color-text-muted); font-size: var(--text-xs); }
.offers__closed { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); }
.offers__closed-toggle { list-style: none; display: flex; align-items: center; gap: var(--space-2); min-block-size: 3rem; padding-inline: var(--space-5) var(--space-4); border-radius: var(--radius-card); color: var(--color-text-strong); font-weight: var(--weight-bold); cursor: pointer; }
.offers__closed-toggle::-webkit-details-marker { display: none; }
.offers__closed-toggle::after { content: ""; margin-inline-start: auto; inline-size: 0.5rem; block-size: 0.5rem; border: solid var(--color-text-muted); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -0.15rem; transition: rotate var(--duration) ease; }
.offers__closed[open] > .offers__closed-toggle::after { rotate: -135deg; translate: 0 0.1rem; }
.offers__closed-toggle:hover { background: var(--color-surface-sunken); }
.offers__closed[open] > .offers__closed-toggle { border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: 0 1px 0 var(--color-border); }
.offers__closed-toggle:focus-visible { outline-offset: -2px; border-radius: var(--radius-card); }
.offers__closed-count { color: var(--color-text-muted); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.offers__closed .offer-list { gap: 0; padding-block: var(--space-1); }
.offers__group-title { margin-block-start: var(--space-2); font-size: var(--text-md); }
.offers__group-count { color: var(--color-text-muted); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.offers__closed > .card { background: transparent; box-shadow: none; }
}
@layer components {
.feed-composer { container-type: inline-size; display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--color-border); }
.feed-composer__input { min-block-size: 5.5rem; }
.feed-composer__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); }
.feed-composer__as { flex: 1 1 14rem; max-inline-size: 22rem; }
.feed-composer__send { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); margin-inline-start: auto; }
@container (min-width: 30rem) {
  .feed-composer__foot:has(> .feed-composer__as) { display: grid; grid-template-columns: minmax(0, 22rem) auto; grid-template-rows: auto auto auto; justify-content: space-between; gap: 0 var(--space-3); }
  .feed-composer__foot > .feed-composer__as { grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; }
  .feed-composer__foot > .feed-composer__as > * + * { margin-block-start: var(--space-1); }
  .feed-composer__foot > .feed-composer__as ~ .feed-composer__send { grid-area: 2 / 2; margin-block-start: var(--space-1); }
}
.feed-composer__count { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.feed-composer--signin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.feed-composer__text { flex: 1 1 16rem; color: var(--color-text-muted); }
}
@layer components {
.feed-quote { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); border-inline-start: 2px solid var(--color-control-border); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--color-surface-sunken); }
.feed-quote__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.feed-quote__body { color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
}
@layer components {
.offer-ref { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-control); box-shadow: var(--ring); }
.offer-ref__photo { display: grid; place-items: center; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-sunken); }
.offer-ref__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.offer-ref__placeholder { inline-size: 60%; block-size: auto; aspect-ratio: 278 / 140; color: var(--color-control-border); }
.offer-ref__body { display: grid; gap: 2px; min-inline-size: 0; }
.offer-ref__title { color: var(--color-text-strong); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.offer-ref__price { color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-black); line-height: 1.2; font-variant-numeric: tabular-nums; }
.offer-ref__meta { color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.offer-summary { display: grid; gap: var(--space-4); }
.offer-summary__head { display: grid; gap: var(--space-1); }
.offer-summary__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.offer-summary__kicker { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.offer-summary__title { font-size: var(--text-xl); overflow-wrap: anywhere; }
.offer-summary__place { color: var(--color-text-muted); }
.offer-summary__price { display: grid; gap: 2px; padding-block: var(--space-3); border-block: 1px solid var(--color-border); }
.offer-summary__label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.offer-summary__amount { color: var(--color-text-strong); font-size: var(--text-2xl); font-weight: var(--weight-black); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.offer-summary__change { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-variant-numeric: tabular-nums; }
.offer-summary__before { color: var(--color-text-muted); font-weight: var(--weight-semibold); text-decoration: line-through; }
.offer-summary__drop { color: var(--color-success); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.offer-summary__standing { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.offer-summary__standing strong { font-size: var(--text-sm); }
.offer-summary__terms { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.offer-summary__closed { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text-strong); font-weight: var(--weight-bold); }
.offer-summary__closed span { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
@media (min-width: 48rem) { .offer-summary__amount { font-size: 2rem; } }
.offer-summary__outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text-strong); font-weight: var(--weight-bold); }
.offer-summary__outcome svg { inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.1em; }
.offer-summary__outcome span { grid-column: 2; display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.offer-summary__outcome--won { color: var(--color-success); }
.offer-summary__outcome--lost { grid-template-columns: minmax(0, 1fr); }
.offer-summary__outcome--lost span { grid-column: 1; }
.offer-summary__outcome span a { font-weight: var(--weight-bold); white-space: nowrap; }
}
@layer components {
.offer-lines { display: grid; }
.offer-lines__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-block-end: 1px solid var(--color-border); }
.offer-lines__item:has(.offer-lines__title:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.offer-lines__item:first-child { padding-block-start: 0; }
.offer-lines__item:last-child { padding-block-end: 0; border-block-end: 0; }
.offer-lines__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.offer-lines__title { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.offer-lines__title::after { content: ""; position: absolute; inset: 0; }
.offer-lines__title:focus-visible { outline: none; }
.offer-lines__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.offer-lines__price { color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-lines__private { display: inline-flex; flex-basis: 100%; align-items: center; gap: var(--space-1); }
.offer-lines__private svg { flex: none; inline-size: 0.875rem; block-size: 0.875rem; }
.offer-lines__meta:has(> a) { display: block; }
.offer-lines__meta a { position: relative; z-index: 1; }
.offer-lines__item { align-items: start; }
.offer-lines__body { display: contents; }
.offer-lines__title { grid-column: 1; grid-row: 1; }
.offer-lines__meta { grid-column: 1 / -1; }
.offer-lines__price { grid-column: 2; grid-row: 1; }
.offer-lines__meta:has(> .offer-lines__fact) { overflow-x: clip; }
.offer-lines__fact:has(+ .offer-lines__fact) { margin-inline-end: var(--space-1); }
.offer-lines__fact + .offer-lines__fact::before {
  content: "\b7"; content: "\b7" / "";
  display: inline-block; inline-size: var(--space-3); margin-inline-start: calc(-1 * var(--space-3)); text-align: center;
}
@media (min-width: 40rem) {
  .offer-lines__item { align-items: center; }
  .offer-lines__body { display: grid; }
  .offer-lines__title, .offer-lines__meta, .offer-lines__price { grid-column: auto; grid-row: auto; }
}
}
@layer components {
.offer-rows { display: grid; gap: var(--space-3); }
}
@layer components {
.offer-row { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); transition: box-shadow var(--duration) ease; }
.offer-row:has(.offer-row__link:hover) { box-shadow: 0 0 0 1px var(--color-control-border); }
.offer-row:has(.offer-row__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.offer-row__photo { grid-row: 1 / span 3; display: grid; place-items: center; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-sunken); }
.offer-row__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.offer-row__placeholder { inline-size: 60%; block-size: auto; aspect-ratio: 278 / 140; color: var(--color-control-border); }
.offer-row__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.offer-row__title { font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.offer-row__link { color: var(--color-text-strong); text-decoration: none; }
.offer-row__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.offer-row__link:hover { color: var(--color-primary); text-decoration: underline; }
.offer-row__link:focus-visible { outline: none; }
.offer-row__request { color: var(--color-text); font-size: var(--text-xs); overflow-wrap: anywhere; }
.offer-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.offer-row__figures { grid-column: 2; display: grid; gap: 2px; align-content: start; }
.offer-row__price { color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-black); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-row__standing { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.offer-row__actions { position: relative; z-index: 1; grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: calc(-1 * var(--space-3)); margin-block: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)); }
@media (min-width: 40rem) {
  .offer-row { grid-template-columns: 8.5rem minmax(0, 1fr) auto; }
  .offer-row__photo { grid-row: 1 / span 2; }
  .offer-row__figures { grid-column: 3; grid-row: 1; justify-items: end; text-align: end; }
  .offer-row__actions { grid-column: 2 / -1; }
}
}
@layer components {
.offer-standing { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-4); }
.offer-standing__rank { display: grid; place-items: center; min-inline-size: 4.5rem; block-size: 4.5rem; padding-inline: var(--space-2); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text-strong); font-size: var(--text-2xl); font-weight: var(--weight-black); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.offer-standing__text { display: grid; gap: 2px; min-inline-size: 0; }
.offer-standing__title { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-bold); }
.offer-standing__meta { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
}
@layer components {
.car-choices { display: grid; gap: var(--space-2); }
}
@layer components {
.car-choice { position: relative; display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-card); background: var(--color-surface); transition: border-color var(--duration) ease, box-shadow var(--duration) ease; }
.car-choice:has(.car-choice__input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.car-choice:has(.car-choice__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.car-choice:not(.car-choice--disabled):hover { border-color: var(--color-text-muted); }
.car-choice__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.car-choice__label { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-block-size: 44px; cursor: pointer; }
.car-choice__photo { display: grid; place-items: center; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-sunken); }
.car-choice__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.car-choice__placeholder { inline-size: 60%; block-size: auto; aspect-ratio: 278 / 140; color: var(--color-control-border); }
.car-choice__body { display: grid; gap: 2px; min-inline-size: 0; }
.car-choice__title { color: var(--color-text-strong); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.car-choice__data { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.car-choice__radio { flex: none; inline-size: 1.375rem; block-size: 1.375rem; border-radius: 50%; border: 2px solid var(--color-control-border); display: grid; place-items: center; }
.car-choice:has(.car-choice__input:checked) .car-choice__radio { border-color: var(--color-primary); }
.car-choice:has(.car-choice__input:checked) .car-choice__radio::after { content: ""; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--color-primary); }
.car-choice--disabled { border-style: dashed; background: var(--color-surface-sunken); }
.car-choice--disabled .car-choice__label { cursor: not-allowed; }
.car-choice--disabled .car-choice__title { color: var(--color-text-muted); }
.car-choice--disabled .car-choice__photo > * { filter: grayscale(1); }
.car-choice--disabled .car-choice__radio { border-style: dashed; }
.car-choice__reason { color: var(--color-text-strong); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
@media (min-width: 30rem) { .car-choice__reason { padding-inline-start: calc(5rem + var(--space-3)); } }
}
@layer components {
.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.rating__star { flex: none; inline-size: 0.9375rem; block-size: 0.9375rem; color: var(--color-rating); }
.rating__value { color: var(--color-text-strong); font-weight: var(--weight-heavy); }
.rating--none .rating__star { color: var(--color-control-border); }
.rating--none { font-weight: var(--weight-regular); }
.rating--large { gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.rating--large .rating__star { inline-size: 1.5rem; block-size: 1.5rem; }
.rating--large .rating__value { font-size: var(--text-2xl); font-weight: var(--weight-black); line-height: 1; letter-spacing: -0.02em; }
}
@layer components {
.stars { display: inline-flex; gap: 1px; color: var(--color-rating); }
.stars__star { flex: none; inline-size: 1rem; block-size: 1rem; }
.stars__star--off { color: var(--color-control-border); }
}
@layer components {
.rating-input { display: grid; gap: var(--space-1); min-inline-size: 0; border: 0; padding: 0; margin: 0; }
.rating-input > .field__label { padding: 0; }
.rating-input__options { display: flex; flex-wrap: wrap; align-items: center; margin-inline-start: calc(-1 * var(--space-1)); }
.rating-input__option { position: relative; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-control); color: var(--color-control-border); cursor: pointer; }
.rating-input__radio { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.rating-input__star { inline-size: 2rem; block-size: 2rem; }
.rating-input__star--on { display: none; }
.rating-input__option:has(:checked),
.rating-input__option:has(~ .rating-input__option :checked) { color: var(--color-rating); }
.rating-input__option:has(:checked) .rating-input__star--on,
.rating-input__option:has(~ .rating-input__option :checked) .rating-input__star--on { display: block; }
.rating-input__option:has(:checked) .rating-input__star--off,
.rating-input__option:has(~ .rating-input__option :checked) .rating-input__star--off { display: none; }
@media (hover: hover) {
  .rating-input__options:has(.rating-input__option:hover) .rating-input__option { color: var(--color-control-border); }
  .rating-input__options:has(.rating-input__option:hover) .rating-input__star--on { display: none; }
  .rating-input__options:has(.rating-input__option:hover) .rating-input__star--off { display: block; }
  .rating-input__options:has(.rating-input__option:hover) .rating-input__option:hover,
  .rating-input__options:has(.rating-input__option:hover) .rating-input__option:has(~ .rating-input__option:hover) { color: var(--color-rating); }
  .rating-input__options:has(.rating-input__option:hover) .rating-input__option:hover .rating-input__star--on,
  .rating-input__options:has(.rating-input__option:hover) .rating-input__option:has(~ .rating-input__option:hover) .rating-input__star--on { display: block; }
  .rating-input__options:has(.rating-input__option:hover) .rating-input__option:hover .rating-input__star--off,
  .rating-input__options:has(.rating-input__option:hover) .rating-input__option:has(~ .rating-input__option:hover) .rating-input__star--off { display: none; }
}
.rating-input__option:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.rating-input__word { display: none; margin-inline-start: var(--space-2); color: var(--color-text-strong); font-weight: var(--weight-bold); }
.rating-input__word--none { display: inline; color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.rating-input:has(:checked) .rating-input__word--none { display: none; }
.rating-input:has([value="1"]:checked) .rating-input__word--1,
.rating-input:has([value="2"]:checked) .rating-input__word--2,
.rating-input:has([value="3"]:checked) .rating-input__word--3,
.rating-input:has([value="4"]:checked) .rating-input__word--4,
.rating-input:has([value="5"]:checked) .rating-input__word--5 { display: inline; }
.rating-input.field--invalid:not(:has(:checked)) .rating-input__option { color: var(--color-danger); }
.rating-input > .field__error { margin-block-start: var(--space-1); }
}
@layer components {
.review-list { display: grid; }
.review-list > li + li { border-block-start: 1px solid var(--color-border); }
.review-list > li:first-child > .review { padding-block-start: 0; }
.review-list > li:last-child > .review { padding-block-end: 0; }
}
@layer components {
.review { display: grid; gap: var(--space-2); padding-block: var(--space-4); min-inline-size: 0; }
.review__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-4); }
.review__author { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); min-inline-size: 0; }
.review__who { color: var(--color-text-strong); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.review__who--buyer { display: inline-flex; align-items: center; gap: var(--space-1); }
.review__who--buyer::before { content: ""; flex: none; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 2px; border: 1.5px dashed var(--color-text-muted); }
.review__role { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.review__score { display: inline-flex; align-items: center; gap: var(--space-2); }
.review__score-text { color: var(--color-text-strong); font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.review__meta { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.review__request { color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.review__body { color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; max-inline-size: 65ch; }
.review__reply { display: grid; gap: 2px; margin-block-start: var(--space-1); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-control-border); }
.review__reply-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.review__reply-meta strong { font-size: var(--text-xs); }
.review__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin-block-end: calc(-1 * var(--space-2)); color: var(--color-text-muted); font-size: var(--text-xs); }
.review__actions > .button { margin-inline-start: calc(-1 * var(--space-3)); }
.review__status { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text-strong); font-weight: var(--weight-bold); }
.review__status span { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.review--pending { padding: var(--space-4); border: 1px dashed var(--color-control-border); border-radius: var(--radius-control); }
.review__body:has(+ .review__moderation) { padding-inline-start: var(--space-3); border-inline-start: 2px dashed var(--color-control-border); }
.review__moderation { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin-block-end: calc(-1 * var(--space-2)); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.review__moderation .button { margin-inline-start: calc(-1 * var(--space-3)); }
.review__moderation .chip + .button { margin-inline-start: 0; }
}
@layer components {
.reviews { display: grid; gap: var(--space-4); scroll-margin-block-start: calc(3.5rem + var(--space-4)); }
.reviews__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); }
.reviews__title { font-size: var(--text-lg); }
.reviews__note { color: var(--color-text-muted); }
.section + .section:has(> .container > .reviews) { padding-block-start: 0; }
}
@layer components {
.award-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-4) var(--space-5); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); }
.award-banner__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); }
.award-banner__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.award-banner__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.award-banner__title { color: var(--color-success); font-size: var(--text-md); }
.award-banner__offer { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.award-banner__seller { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.award-banner__price { grid-column: 2; color: var(--color-text-strong); font-size: var(--text-2xl); font-weight: var(--weight-black); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.award-banner + .request-page { margin-block-start: var(--space-2); }
@media (min-width: 40rem) {
  .award-banner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .award-banner__price { grid-column: 3; grid-row: 1; }
}
}
@layer components {
.contact-card { display: grid; gap: var(--space-4); }
.contact-card__party { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.contact-card__name { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.contact-card__kind { color: var(--color-text-muted); font-size: var(--text-xs); }
.contact-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contact-card__phone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-card__subtitle { font-size: var(--text-md); }
.contact-card__plate { font-family: var(--font-mono); letter-spacing: 0.08em; }
.contact-card__vin { font-family: var(--font-mono); letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }
}
@layer components {
.make-page { display: grid; grid-template-areas: "models" "main" "awards"; gap: var(--space-4); }
.make-page__main, .make-page__models, .make-page__awards { display: grid; gap: var(--space-4); align-content: start; align-self: start; min-inline-size: 0; }
.make-page__main { grid-area: main; }
.make-page__models { grid-area: models; }
.make-page__awards { grid-area: awards; }
@media (min-width: 60rem) {
  .make-page { grid-template-columns: minmax(0, 1fr) 22.5rem; grid-template-rows: auto 1fr; grid-template-areas: "main models" "main awards"; gap: var(--space-6); }
}
}
@layer components {
.skeleton {
  display: block; inline-size: 100%; block-size: 1rem; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, transparent, var(--color-skeleton-shine), transparent) no-repeat var(--color-skeleton);
  background-size: 40% 100%; background-position: -100% 0;
  animation: skeleton-shine calc(var(--duration) * 10) ease-in-out infinite;
}
@keyframes skeleton-shine { to { background-position: 200% 0; } }
.skeleton--line { block-size: var(--text-sm); margin-block: calc((1lh - var(--text-sm)) / 2); }
.skeleton--line:last-child:not(:first-child) { inline-size: 60%; }
.skeleton--title { inline-size: 70%; block-size: var(--text-lg); margin-block: calc((var(--text-lg) * var(--leading-tight) - var(--text-lg)) / 2); }
.skeleton--avatar { flex: none; inline-size: 3rem; block-size: 3rem; border-radius: 50%; }
.skeleton--card {
  display: grid; gap: var(--space-2); align-content: start; block-size: auto; padding: var(--space-4); overflow: hidden;
  background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); animation: none;
}
.skeleton__photo { display: block; inline-size: auto; block-size: auto; border-radius: 0; aspect-ratio: 4 / 3; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-2); }
.skeleton__media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
}
@layer components {
.feed-pending {
  display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); container: feed-pending / inline-size;
  background: var(--color-surface-sunken); border-block-end: 1px solid var(--color-border);
}
.feed-pending__title { color: var(--color-text-strong); font-size: var(--text-sm); font-weight: var(--weight-heavy); }
.feed-pending__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.feed-pending__item {
  display: grid; gap: var(--space-2); min-inline-size: 0; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-radius: var(--radius-control); box-shadow: var(--ring);
}
.feed-pending__meta { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.feed-pending__body { color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; max-inline-size: 65ch; }
.feed-pending__actions > .button--ghost:first-child { margin-inline-start: calc(-1 * var(--space-3)); }
.feed-pending__edit { display: grid; gap: var(--space-3); }
@container feed-pending (min-width: 34rem) {
  .feed-pending__item { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); }
  .feed-pending__item > * { grid-column: 1; }
  .feed-pending__item > .feed-pending__edit { grid-column: 1 / -1; }
  .feed-pending__actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-content: flex-end; }
  .feed-pending__actions > .button--ghost:first-child { margin-inline-start: 0; }
  .feed-pending__actions > .button--ghost:last-child { margin-inline-end: calc(-1 * var(--space-3)); }
}
.feed-pending__item--processing .feed-pending__body { color: var(--color-text-muted); }
.feed-pending__item--held { box-shadow: 0 0 0 2px var(--color-warning); }
.feed-pending__item--rejected { box-shadow: 0 0 0 2px var(--color-danger); }
}
@layer components {
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.suggest__button { flex: none; }
.suggest__result { flex: 1 1 16rem; display: grid; gap: var(--space-1); min-inline-size: 0; font-size: var(--text-xs); }
.suggest__result:empty { position: absolute; }
.suggest__summary { color: var(--color-text); font-weight: var(--weight-semibold); }
.suggest__list { display: grid; gap: 0.125rem; margin: 0; padding-inline-start: var(--space-4); color: var(--color-text-muted); }
.suggest__warning { display: flex; align-items: start; gap: var(--space-1); color: var(--color-text-strong); }
.suggest__warning::before {
  content: "!"; flex: none; display: grid; place-items: center; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.0625rem;
  border-radius: 50%; background: var(--color-warning); color: var(--color-surface); font-size: 0.6875rem; font-weight: var(--weight-black); line-height: 1;
}
}
@layer components {
.notification-bell {
  position: relative; display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px;
  border-radius: var(--radius-control); color: var(--color-on-brand); text-decoration: none;
  transition: background-color var(--duration) ease;
}
.notification-bell:hover,
.notification-bell[aria-current="page"] { background: var(--color-brand-line); color: var(--color-on-brand); text-decoration: none; }
.notification-bell[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-on-brand); }
.notification-bell__icon { inline-size: 1.375rem; block-size: 1.375rem; }
.notification-bell__count {
  position: absolute; inset-block-start: 5px; inset-inline-start: 22px;
  display: inline-grid; place-items: center; min-inline-size: 1.25rem; block-size: 1.25rem; padding-inline: 0.3125rem;
  border-radius: var(--radius-pill); background: var(--color-on-brand); color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--color-brand);
  font-size: 0.6875rem; font-weight: var(--weight-black); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
}
@layer components {
.notification-list { display: grid; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); overflow: hidden; }
}
@layer components {
.notification + .notification { border-block-start: 1px solid var(--color-border); }
.notification__link {
  display: grid; grid-template-columns: 0.625rem minmax(0, 1fr); align-items: start; gap: var(--space-3);
  min-block-size: 44px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
  color: var(--color-text); text-decoration: none; transition: background-color var(--duration) ease;
}
.notification__link:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
.notification__link:hover .notification__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.notification__link:focus-visible { outline-offset: -2px; border-radius: var(--radius-control); }
.notification__mark { inline-size: 0.625rem; block-size: 0.625rem; margin-block-start: 0.3125rem; border-radius: 50%; }
.notification--unread .notification__mark { background: var(--color-primary); }
.notification__body { display: grid; gap: 2px; min-inline-size: 0; }
.notification__title { color: var(--color-text); overflow-wrap: anywhere; }
.notification--unread .notification__title { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.notification__text { color: var(--color-text-muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.notification__meta { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .notification__link { padding-inline: var(--space-5); } }
}
@layer components {
.notification-settings { display: grid; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); }
.notification-settings__group { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.notification-settings__group + .notification-settings__group { border-block-start: 1px solid var(--color-border); }
.notification-settings__head { display: grid; gap: 2px; min-inline-size: 0; }
.notification-settings__name { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); }
.notification-settings__desc { color: var(--color-text-muted); }
.notification-settings__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notification-settings__modes .pills__item { justify-content: center; padding-inline: var(--space-2); line-height: 1.15; text-align: center; }
.notification-settings__group[aria-invalid="true"] { box-shadow: inset 4px 0 0 var(--color-danger); }
.notification-settings__group:first-child[aria-invalid="true"] { border-start-start-radius: var(--radius-card); }
.notification-settings__group:last-child[aria-invalid="true"] { border-end-start-radius: var(--radius-card); }
@media (min-width: 48rem) {
  .notification-settings__group { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); }
  .notification-settings__modes { grid-template-columns: repeat(3, auto); }
  .notification-settings__modes .pills__item { padding-inline: var(--space-4); }
}
}
@layer components {
.dashboard { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 64rem) {
  .dashboard--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard__wide { grid-column: 1 / -1; }
}
.dashboard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); min-block-size: 44px; margin-block: calc(-1 * var(--space-2)); }
.dashboard__title { font-size: var(--text-lg); }
.dashboard__total { margin-inline-start: var(--space-1); color: var(--color-text-muted); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.dashboard__more { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; font-weight: var(--weight-bold); text-decoration: none; }
.dashboard__more:hover { text-decoration: underline; }
.dashboard__more svg { inline-size: 1rem; block-size: 1rem; }
.dashboard__empty { color: var(--color-text-muted); }
.dashboard__note { color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.rank { display: inline-flex; align-items: baseline; gap: 0.25em; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank__position { color: var(--color-text-strong); font-size: var(--text-sm); font-weight: var(--weight-black); letter-spacing: -0.01em; }
}
@layer components {
.org-card { display: grid; gap: var(--space-4); }
.org-card__head { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.org-card__body { display: grid; gap: 2px; min-inline-size: 0; }
.org-card__name { font-size: var(--text-lg); overflow-wrap: anywhere; }
.org-card__meta { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.org-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.org-card__founders { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
}
@layer components {
.org-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.org-head__body { display: grid; gap: var(--space-2); flex: 1 1 14rem; min-inline-size: 0; }
.org-head__title { font-size: var(--text-xl); overflow-wrap: anywhere; }
.org-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.org-head__body { margin-inline-end: var(--space-3); }
.org-head > .button--ghost { margin-inline-start: calc(-1 * var(--space-3)); }
}
@layer components {
.tabs { box-shadow: inset 0 -1px 0 var(--color-border); }
.tabs__list { display: flex; gap: var(--space-2); margin-inline: calc(-1 * var(--space-3)); overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__link {
  display: inline-flex; align-items: center; min-block-size: 3rem; padding-inline: var(--space-3);
  color: var(--color-text-muted); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent; transition: color var(--duration) ease, box-shadow var(--duration) ease;
}
.tabs__link:hover { color: var(--color-text-strong); text-decoration: none; box-shadow: inset 0 -3px 0 var(--color-border); }
.tabs__link[aria-current="page"] { color: var(--color-text-strong); font-weight: var(--weight-bold); box-shadow: inset 0 -3px 0 var(--color-primary); }
.tabs__link:focus-visible { outline-offset: -2px; border-radius: var(--radius-control); }
}
@layer components {
.breakdown { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.breakdown__caption { padding-block-end: var(--space-2); color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); text-align: start; }
.breakdown :is(th, td) { padding: var(--space-2); border-block-end: 1px solid var(--color-border); text-align: end; vertical-align: bottom; }
.breakdown :is(th, td):first-child { padding-inline-start: 0; text-align: start; overflow-wrap: anywhere; }
.breakdown :is(th, td):first-child { inline-size: 40%; }
.breakdown :is(th, td):last-child { padding-inline-end: 0; }
.breakdown thead th { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.breakdown tbody th { color: var(--color-text-strong); font-weight: var(--weight-semibold); vertical-align: baseline; }
.breakdown tbody td { color: var(--color-text-strong); font-weight: var(--weight-bold); vertical-align: baseline; }
.breakdown tbody tr:last-child > * { border-block-end: 0; }
}
@layer components {
.manage-list { display: grid; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); }
.manage-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); }
.manage-list__item + .manage-list__item { border-block-start: 1px solid var(--color-border); }
.manage-list__main { flex: 1 1 18rem; display: grid; gap: var(--space-1); min-inline-size: 0; }
.manage-list__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.manage-list__line { color: var(--color-text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.manage-list__note { color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.manage-list__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-inline-start: calc(-1 * var(--space-3)); }
@media (min-width: 40rem) { .manage-list__actions { margin-inline-start: 0; } }
.manage-list__item--closed .manage-list__title { color: var(--color-text); font-weight: var(--weight-bold); }
}
@layer components {
.invitation { display: flex; align-items: center; gap: var(--space-4); }
.invitation__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.invitation__kicker { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.invitation .auth__title { overflow-wrap: anywhere; }
}
@layer components {
.admin-shell { display: grid; gap: var(--space-5); padding-block-start: var(--space-4); }
.admin-shell__main { min-inline-size: 0; }
@media (min-width: 64rem) {
  .admin-shell { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); align-items: start; padding-block-start: var(--space-8); }
}
}
@layer components {
.admin-nav { min-inline-size: 0; }
.admin-nav__toggle {
  display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; min-block-size: 3rem; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface);
  color: var(--color-text-strong); font: inherit; font-weight: var(--weight-bold); text-align: start; cursor: pointer;
  anchor-name: --admin-nav; transition: background-color var(--duration) ease;
}
.admin-nav__toggle:hover { background: var(--color-surface-sunken); }
.admin-nav__toggle-label { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.admin-nav__current { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.admin-nav__toggle svg { flex: none; inline-size: 1rem; block-size: 1rem; rotate: 90deg; transition: rotate var(--duration) ease; }
.admin-nav:has(.admin-nav__panel:popover-open) .admin-nav__toggle svg { rotate: -90deg; }
.admin-nav__panel[popover] {
  position: fixed; inset: auto; inset-block-start: calc(env(safe-area-inset-top, 0px) + 3.5rem + var(--space-2)); inset-inline: var(--gutter);
  inline-size: auto; max-block-size: calc(100dvh - 3.5rem - 2 * var(--space-4)); overflow-y: auto;
  margin: 0; padding: var(--space-2); border: 0;
  background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-card); box-shadow: var(--shadow-raise);
  --color-focus: var(--color-focus-surface);
  opacity: 0; translate: 0 calc(-1 * var(--space-1));
  transition: opacity var(--duration) ease, translate var(--duration) ease, display var(--duration) allow-discrete, overlay var(--duration) allow-discrete;
}
.admin-nav__panel[popover]:popover-open { display: grid; align-content: start; opacity: 1; translate: 0 0; }
@starting-style { .admin-nav__panel[popover]:popover-open { opacity: 0; translate: 0 calc(-1 * var(--space-1)); } }
.admin-nav__panel[popover]::backdrop { background: transparent; }
@supports (anchor-name: --a) {
  .admin-nav__panel[popover] {
    position-anchor: --admin-nav; inset: auto; inset-block-start: calc(anchor(bottom) + var(--space-2)); inset-inline: anchor(left) anchor(right);
    max-block-size: calc(100dvh - anchor(bottom) - var(--space-6));
  }
}
.admin-nav__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-block-end: 1px solid var(--color-border); margin-block-end: var(--space-1); }
.admin-nav__name { color: var(--color-text-strong); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.admin-nav__heading { padding: var(--space-3) var(--space-3) var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-nav__list { display: grid; gap: 2px; }
.admin-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: 2.75rem; padding-inline: var(--space-3);
  border-radius: var(--radius-control); color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: none;
  transition: background-color var(--duration) ease;
}
.admin-nav__link:hover { background: var(--color-surface-sunken); color: var(--color-text-strong); text-decoration: none; }
.admin-nav__link[aria-current="page"] { background: var(--color-surface-sunken); color: var(--color-text-strong); font-weight: var(--weight-bold); box-shadow: inset 3px 0 0 var(--color-primary); }
.admin-nav__link:focus-visible { outline-offset: -2px; }
.admin-nav__count {
  display: inline-grid; place-items: center; flex: none; min-inline-size: 1.5rem; block-size: 1.5rem; padding-inline: var(--space-1);
  border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-surface);
  font-size: var(--text-xs); font-weight: var(--weight-black); font-variant-numeric: tabular-nums;
}
.admin-nav__foot { margin-block-start: var(--space-2); padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border); }
.admin-nav__foot svg { inline-size: 1rem; block-size: 1rem; color: var(--color-text-muted); }
@media (min-width: 64rem) {
  .admin-nav__toggle { display: none; }
  .admin-nav__panel[popover],
  .admin-nav__panel[popover]:popover-open {
    display: grid; align-content: start; position: sticky; inset: auto; inset-block-start: calc(3.5rem + var(--space-6));
    max-block-size: calc(100dvh - 3.5rem - var(--space-12)); padding: var(--space-2); box-shadow: var(--ring); opacity: 1; translate: none;
  }
}
}
@layer components {
.admin-screen { display: grid; gap: var(--space-5); min-inline-size: 0; }
.admin-screen__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.admin-screen__id { display: flex; align-items: center; gap: var(--space-3) var(--space-4); flex: 1 1 18rem; min-inline-size: 0; }
.admin-screen__heading { display: grid; gap: var(--space-1); min-inline-size: 0; }
.admin-screen__kicker { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-screen__title { justify-self: start; font-size: var(--text-xl); overflow-wrap: anywhere; }
.admin-screen__lead { color: var(--color-text-muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .admin-screen__title { font-size: var(--text-2xl); } }
.admin-screen__back { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; margin-block: calc(-1 * var(--space-2)); font-weight: var(--weight-semibold); text-decoration: none; }
.admin-screen__back:hover { text-decoration: underline; }
.admin-screen__back svg { inline-size: 1rem; block-size: 1rem; rotate: 180deg; }
.admin-screen__split { display: grid; gap: var(--space-4); align-items: start; }
.admin-screen__main { display: grid; gap: var(--space-4); min-inline-size: 0; }
@media (min-width: 64rem) {
  .admin-screen__split { grid-template-columns: minmax(0, 1fr) 17rem; grid-template-areas: "main aside"; }
  .admin-screen__main { grid-area: main; }
  .admin-screen__aside { grid-area: aside; position: sticky; inset-block-start: calc(3.5rem + var(--space-6)); }
}
}
@layer components {
.admin-actions { display: grid; gap: var(--space-4); }
.admin-actions__group { display: grid; gap: var(--space-2); }
.admin-actions__group + .admin-actions__group { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
.admin-actions__title { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); }
.admin-actions__note { color: var(--color-text-muted); font-size: var(--text-xs); }
}
@layer components {
.admin-toolbar { container-type: inline-size; display: grid; gap: var(--space-3); }
.admin-toolbar__search .input-group { gap: var(--space-2); }
.admin-toolbar__search .input { flex: 1; min-inline-size: 0; padding-inline-end: var(--space-3); }
@container (min-width: 38rem) {
  .admin-toolbar__row { grid-auto-flow: column; grid-auto-columns: minmax(10rem, 14rem); justify-content: start; }
  .admin-toolbar__row:has(> .admin-toolbar__search) { grid-template-columns: minmax(16rem, 1fr); justify-content: stretch; }
}
}
@layer components {
.admin-list { display: grid; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--ring); }
.admin-list__item { position: relative; display: grid; gap: var(--space-2) var(--space-5); padding: var(--space-4); transition: background-color var(--duration) ease; }
.admin-list__item + .admin-list__item { border-block-start: 1px solid var(--color-border); }
.admin-list__item:first-child { border-start-start-radius: var(--radius-card); border-start-end-radius: var(--radius-card); }
.admin-list__item:last-child { border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }
.admin-list__item:has(.admin-list__link:hover) { background: var(--color-surface-sunken); }
.admin-list__item:has(.admin-list__link:hover) .admin-list__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.admin-list__item:has(.admin-list__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.admin-list__main { display: grid; gap: var(--space-1); min-inline-size: 0; }
.admin-list__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.admin-list__title { color: var(--color-text-strong); font-size: var(--text-md); font-weight: var(--weight-heavy); line-height: 1.3; overflow-wrap: anywhere; }
.admin-list__link { color: inherit; text-decoration: none; }
.admin-list__link:hover { color: inherit; text-decoration: none; }
.admin-list__link:focus-visible { outline: 0; }
.admin-list__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.admin-list__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; max-inline-size: 65ch; }
.admin-list__line { color: var(--color-text-strong); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.admin-list__meta { color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.admin-list__aside { display: grid; justify-items: start; align-content: start; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.admin-list__figure { color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-black); line-height: 1.1; font-variant-numeric: tabular-nums; }
.admin-list__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-1); margin-inline-start: calc(-1 * var(--space-3)); }
.admin-list__item--closed .admin-list__title { color: var(--color-text); font-weight: var(--weight-bold); }
@media (min-width: 48rem) {
  .admin-list__item { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-5); }
  .admin-list__item > :not(.admin-list__aside) { grid-column: 1; }
  .admin-list__aside { grid-column: 2; grid-row: 1 / span 2; justify-items: end; text-align: end; }
  .admin-list__aside:has(> .admin-list__actions) { align-self: center; }
  .admin-list__aside > .admin-list__actions { margin-inline: 0 calc(-1 * var(--space-3)); justify-content: flex-end; }
}
}
@layer components {
.moderation-target { display: grid; gap: var(--space-3); }
.moderation-target__quote { margin: 0; padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-control-border); color: var(--color-text-strong); font-size: var(--text-md); white-space: pre-line; overflow-wrap: anywhere; max-inline-size: 65ch; }
.moderation-target--hidden .moderation-target__quote { border-inline-start-style: dashed; color: var(--color-text); }
.moderation-target__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.moderation-target__meta:not(:has(> .chip)) { display: block; overflow-wrap: anywhere; }
.moderation-target__meta:not(:has(> .chip)) + .moderation-target__meta { margin-block-start: calc(-1 * var(--space-2)); }
}
@layer components {
.history-list { display: grid; }
.history-list__item { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); }
.history-list__item:first-child { padding-block-start: 0; }
.history-list__item:last-child { padding-block-end: 0; }
.history-list__item + .history-list__item { border-block-start: 1px solid var(--color-border); }
.history-list__time { display: grid; align-content: start; gap: 1px; color: var(--color-text-strong); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.3; font-variant-numeric: tabular-nums; }
.history-list__date { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.history-list__main { display: grid; gap: 2px; min-inline-size: 0; }
.history-list__text { color: var(--color-text); overflow-wrap: anywhere; }
.history-list__note { margin-block-start: var(--space-1); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-control-border); color: var(--color-text-muted); font-size: var(--text-xs); white-space: pre-line; overflow-wrap: anywhere; }
.history-list__meta { color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
}
@layer components {
.photo-review { display: grid; gap: var(--space-3); margin: 0; }
.photo-review__frame { position: relative; container-type: inline-size; overflow: visible; background: var(--color-surface-sunken); border-radius: var(--radius-control); }
.photo-review__img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-control); }
.photo-review__box {
  position: absolute; inset-inline-start: calc(var(--x) * 100%); inset-block-start: calc(var(--y) * 100%);
  inline-size: calc(var(--w) * 100%); block-size: calc(var(--h) * 100%); min-inline-size: 0.75rem; min-block-size: 0.75rem;
  border-radius: var(--radius-sm);
}
.photo-review__box--covered { border: 3px solid var(--color-on-brand); box-shadow: 0 0 0 1px var(--color-brand), inset 0 0 0 1px var(--color-brand); }
.photo-review__box--uncovered::before {
  content: ""; position: absolute; inset: 0; border: 3px dashed var(--color-on-brand); border-radius: inherit;
  background: var(--color-brand);
  mask: linear-gradient(var(--color-brand) 0 0) padding-box, linear-gradient(var(--color-brand) 0 0) border-box; mask-composite: exclude;
}
.photo-review__tag {
  position: absolute; inset-block-start: -0.875rem; inset-inline-start: -0.875rem; z-index: 1;
  display: inline-grid; place-items: center; min-inline-size: 1.5rem; block-size: 1.5rem; padding-inline: var(--space-1);
  border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-on-brand); box-shadow: 0 0 0 2px var(--color-on-brand);
  font-size: var(--text-xs); font-weight: var(--weight-black); line-height: 1; font-variant-numeric: tabular-nums;
}
.photo-review__legend { display: grid; gap: var(--space-2); }
.photo-review__finding { display: flex; align-items: start; gap: var(--space-2); color: var(--color-text); }
.photo-review__finding strong { color: var(--color-text-strong); }
.photo-review__key {
  position: relative; flex: none; display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 1.5rem; border-radius: var(--radius-sm);
  color: var(--color-on-brand); font-size: var(--text-xs); font-weight: var(--weight-black); font-variant-numeric: tabular-nums;
  background: var(--color-brand);
}
.photo-review__key--covered { box-shadow: inset 0 0 0 3px var(--color-on-brand), inset 0 0 0 4px var(--color-brand); }
.photo-review__key--uncovered::before {
  content: ""; position: absolute; inset: 1px; border: 3px dashed var(--color-on-brand); border-radius: inherit;
}
}
@layer components {
.held-photo { display: grid; gap: var(--space-4); }
.held-photo__body { display: grid; gap: var(--space-3); align-content: start; min-inline-size: 0; }
.held-photo__actions { display: grid; gap: var(--space-2); }
@media (min-width: 64rem) { .held-photo { grid-template-columns: minmax(0, 3fr) minmax(15rem, 2fr); align-items: start; gap: var(--space-5); } }
}
@layer components {
.admin-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--space-4) var(--space-3); }
@media (min-width: 30rem) { .admin-photos { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } }
.admin-photos__item { display: grid; gap: var(--space-1); align-content: start; min-inline-size: 0; }
.admin-photos__figure { display: grid; gap: var(--space-2); margin: 0; min-inline-size: 0; }
.admin-photos__img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: contain;
  border-radius: var(--radius-control); background: var(--color-surface-sunken); box-shadow: var(--ring);
}
.admin-photos__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.admin-photos__actions { display: flex; flex-wrap: wrap; align-items: center; margin-block: calc(-1 * var(--space-1)) 0; margin-inline-start: calc(-1 * var(--space-3)); }
.admin-photos__actions > a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--space-3); font-weight: var(--weight-semibold); }
}
@layer components {
.admin-code {
  margin: 0; padding: var(--space-3); max-block-size: 9.5rem; overflow: auto;
  border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.admin-code:focus-visible { outline-offset: 2px; }
}
@layer components {
.slug { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
}
@layer components {
.hidden-note {
  justify-self: start; display: inline-block; padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--color-control-border); border-radius: var(--radius-control);
  background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm);
}
}
@layer components {
.report-button {
  display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted);
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.report-button:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.18em; }
.report-button svg { flex: none; inline-size: 0.875rem; block-size: 0.875rem; }
}
@layer components {
.report-line { display: flex; justify-content: flex-end; margin-block: calc(-1 * var(--space-2)); }
.report-line:not(:has(> :not([hidden]))) { display: none; }
}
@layer components {
.comments { display: grid; padding: 0; }
.comments__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--color-border); }
.comments__title { font-size: var(--text-lg); }
.comments__count { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.comments__list { display: grid; }
.comments__list > .comment { padding: var(--space-4) var(--space-5); }
.comments__list > .comment + .comment { border-block-start: 1px solid var(--color-border); }
.comments__foot { padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--color-border); }
.comments__list > :is(.comment--pending, .comment--rejected) { margin: var(--space-4) var(--space-5); padding: var(--space-3) var(--space-4); }
.comments__empty { padding: var(--space-4) var(--space-5); color: var(--color-text-muted); }
.comment-composer__fallback { color: var(--color-text-muted); }
.section + .section:has(> .container > :is(.comments, .report-line):first-child) { padding-block-start: 0; }
}
@layer components {
.comment { display: grid; gap: var(--space-1); min-inline-size: 0; }
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.comment__author { color: var(--color-text-strong); font-weight: var(--weight-bold); text-decoration: none; overflow-wrap: anywhere; }
a.comment__author:hover { color: var(--color-primary-hover); text-decoration: underline; }
.comment__role { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.comment__time { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.comment__body { color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; max-inline-size: 65ch; }
.comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); margin-block: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)); margin-inline-start: calc(-1 * var(--space-3)); }
.comment__actions .report-button { padding-inline: var(--space-3); }
.comment__replies { display: grid; gap: var(--space-4); margin-block-start: var(--space-3); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-control-border); }
.comment--pending, .comment--rejected { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); }
.comment--pending { box-shadow: 0 0 0 2px var(--color-warning); }
.comment--rejected { box-shadow: 0 0 0 2px var(--color-danger); }
.comment--pending .comment__body { color: var(--color-text); }
.comment__main { display: grid; gap: var(--space-1); min-inline-size: 0; }
.comment__actions:not(:has(> :not([hidden]))) { display: none; }
}
@layer components {
.comment-composer { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--color-border); }
.comment-composer__input { min-block-size: 5.5rem; }
.comment-composer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.comment-composer__count { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.comment-composer--reply { padding: var(--space-3) 0 0; border: 0; }
}
@layer components {
.below-market-badge { display: flex; flex-wrap: wrap; align-items: center; justify-self: start; gap: var(--space-1) var(--space-3); min-inline-size: 0; max-inline-size: 100%; }
.below-market-badge__seal {
  display: inline-flex; align-items: center; gap: var(--space-1); min-inline-size: 0; max-inline-size: 100%;
  min-block-size: 1.5rem; padding: 0.1875rem var(--space-2);
  border: 1px solid var(--color-warning); border-radius: var(--radius-pill);
  color: var(--color-warning); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.2; text-wrap: balance;
}
.below-market-badge__icon, .below-market-badge__seal > svg { flex: none; inline-size: 0.875rem; block-size: 0.875rem; }
.below-market-badge__more {
  display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -0.625rem; padding: 0 var(--space-2); margin-inline-start: calc(-1 * var(--space-2));
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-primary);
  font: inherit; font-size: var(--text-xs); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; cursor: pointer;
  anchor-name: --below-market-more;
}
.below-market-badge__more:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.below-market-badge__seal + .below-market-badge__more { margin-inline-start: 0; }
.below-market-badge__popover[popover] {
  position: fixed; inset: auto var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); margin: 0;
  inline-size: auto; max-block-size: calc(100dvh - 2 * var(--gutter)); overflow-y: auto;
  padding: var(--space-4); border: 0; border-radius: var(--radius-card);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-raise);
  font-size: var(--text-sm); line-height: var(--leading-body);
  opacity: 0; translate: 0 var(--space-1);
  transition: opacity var(--duration) ease, translate var(--duration) ease, display var(--duration) allow-discrete, overlay var(--duration) allow-discrete;
}
.below-market-badge__popover[popover]:popover-open { display: grid; gap: var(--space-2); opacity: 1; translate: 0 0; }
@starting-style {
  .below-market-badge__popover[popover]:popover-open { opacity: 0; translate: 0 var(--space-1); }
}
.below-market-badge__popover[popover]::backdrop { background: transparent; }
@media (min-width: 48rem) {
  .below-market-badge__popover[popover] { inset: 0; margin: auto; inline-size: min(20rem, calc(100vw - 2 * var(--gutter))); block-size: fit-content; }
  @supports (anchor-name: --a) {
    .below-market-badge__popover[popover] {
      position-anchor: --below-market-more; inset: auto; margin: 0;
      inset-block-start: calc(anchor(bottom) + var(--space-1)); inset-inline-start: anchor(left);
      position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
    }
  }
}
.request-card__figures + .below-market-badge--card { margin-block-start: calc(var(--space-2) - var(--space-3)); }
.below-market-badge--owner {
  display: grid; justify-items: start; justify-self: stretch; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--ring);
}
.below-market-badge__text { max-inline-size: 65ch; color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-body); }
.below-market-badge__text + :is(.button, a) { margin-block-start: var(--space-1); }
}
@layer components {
.budget-vote { display: grid; gap: var(--space-2); min-inline-size: 0; }
.budget-vote__trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); inline-size: 100%;
  min-block-size: max(var(--control-height), 44px); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); background: transparent;
  color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.2;
  text-align: center; text-decoration: none; text-wrap: balance; cursor: pointer;
  transition: background-color var(--duration) ease, color var(--duration) ease;
}
.budget-vote__trigger:hover { background: var(--color-surface-sunken); color: var(--color-primary-hover); text-decoration: none; }
.budget-vote__trigger:disabled, .budget-vote__trigger[aria-disabled="true"] { border-style: dashed; background: transparent; color: var(--color-text-muted); cursor: not-allowed; }
.budget-vote__icon, .budget-vote__trigger > svg, .budget-vote__status > svg { flex: none; inline-size: 1rem; block-size: 1rem; }
.budget-vote__trigger .budget-vote__icon, .budget-vote__trigger > svg { color: var(--color-text-muted); }
.budget-vote__trigger:hover .budget-vote__icon, .budget-vote__trigger:hover > svg { color: inherit; }
.budget-vote__status {
  display: grid; align-items: center; justify-items: start; gap: 0 var(--space-2); min-block-size: 44px;
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-sunken);
  color: var(--color-text-strong); font-weight: var(--weight-semibold);
}
.budget-vote__status:has(> svg) { grid-template-columns: auto minmax(0, 1fr); }
.budget-vote__status:has(> svg) > :not(svg) { grid-column: 2; }
.budget-vote__status > p { padding-block: var(--space-1); }
.budget-vote__status > svg, .budget-vote__status > .budget-vote__icon { color: var(--color-success); }
.budget-vote__status:empty { position: absolute; min-block-size: 0; padding: 0; background: none; }
.budget-vote__withdraw {
  display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 var(--space-2); margin-inline-start: calc(-1 * var(--space-2));
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-primary);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; cursor: pointer;
}
.budget-vote__withdraw:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.budget-vote__dialog { inline-size: min(30rem, calc(100vw - 2rem)); }
.budget-vote__form { display: grid; gap: var(--space-4); }
}
@layer utilities {
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-xs); }
.center { text-align: center; justify-items: center; }
.tabular { font-variant-numeric: tabular-nums; }
}