/* --- Вигляд «Графіт» (2026-10-27) ---------------------------------------------------
   Власник: «новий дизайн, класніший»; макет - полотно «Облік — новий дизайн».
   Окремий файл поверх miniapp.css: старі правила лишаються запасом, а відкат - прибрати
   рядок <link> і клас graphite з <html>. Кожне правило починається з
   html.graphite[data-theme], щоб перебити старі, зокрема темні html[data-theme='dark'] …
   Компактність з 2026-10-15 збережена: шапка в один рядок, фільтри стрічкою. */

/* --- Токени ------------------------------------------------------------------------ */
html.graphite[data-theme='dark'] {
  --g-bg: #0b0e10;
  --g-surface: #14181b;
  --g-surface-2: #1b2024;
  --g-raised: #262d32;
  --g-raised-text: #ffffff;
  --g-line: #20262b;
  --g-line-strong: #2a3238;
  --g-text: #eef2f1;
  --g-soft-text: #c9d2cf;
  --g-muted: #96a29f;
  --g-faint: #6f7b78;
  --g-accent: #3ee0c0;
  --g-accent-text: #3ee0c0;
  --g-accent-ink: #04211b;
  --g-accent-soft: rgba(62, 224, 192, .14);
  --g-accent-line: rgba(62, 224, 192, .35);
  --g-hero-bg: #0f2b27;
  --g-hero-line: #1d4740;
  --g-hero-label: #93d6c8;
  --g-hero-sub: #a6cfc6;
  --g-hero-text: #f2fffc;
  --g-hero-profit: #3ee0c0;
  --g-warn: #f5b35c;
  --g-warn-bg: #2e2414;
  --g-warn-line: #5a4426;
  --g-bad: #ff8a80;
  --g-good: #5be38a;
  --g-nav-bg: rgba(11, 14, 16, .9);
  --g-shadow: none;
  --g-gen2: #b7c3cd; --g-gen2-bg: #232c33;
  --g-gen3: #74d39e; --g-gen3-bg: #17301f;
  --g-gen4: #8db8ff; --g-gen4-bg: #182840;
  --g-gen5: #c6a8ff; --g-gen5-bg: #2a2142;
  --g-amd: #ff9a8a; --g-amd-bg: #331c1a;
  --g-lvl-red: #ff6b6b; --g-lvl-orange: #ffae6b; --g-lvl-yellow: #f2d04b; --g-lvl-green: #5be38a;
  --g-lvl-red-text: #ff8a80; --g-lvl-orange-text: #ffb27a; --g-lvl-yellow-text: #f2d04b; --g-lvl-green-text: #5be38a;
  --g-backdrop: rgba(0, 0, 0, .62);
}

html.graphite[data-theme='light'] {
  --g-bg: #f3f5f4;
  --g-surface: #ffffff;
  --g-surface-2: #f2f5f4;
  --g-raised: #0e1513;
  --g-raised-text: #ffffff;
  --g-line: #e6ebe9;
  --g-line-strong: #dce2e0;
  --g-text: #0e1513;
  --g-soft-text: #26302e;
  --g-muted: #5b6764;
  --g-faint: #7c8784;
  --g-accent: #087e72;
  --g-accent-text: #087e72;
  --g-accent-ink: #ffffff;
  --g-accent-soft: rgba(8, 126, 114, .1);
  --g-accent-line: rgba(8, 126, 114, .3);
  --g-hero-bg: #075d55;
  --g-hero-line: rgba(255, 255, 255, .16);
  --g-hero-label: #a9e3d8;
  --g-hero-sub: #a9e3d8;
  --g-hero-text: #ffffff;
  --g-hero-profit: #ffffff;
  --g-warn: #b45309;
  --g-warn-bg: #fdf0e1;
  --g-warn-line: #f2d3a8;
  --g-bad: #c0392b;
  --g-good: #1f7a43;
  --g-nav-bg: rgba(255, 255, 255, .9);
  --g-shadow: 0 1px 2px #10302a0f, 0 6px 18px #10302a0a;
  --g-gen2: #5c6b77; --g-gen2-bg: #edf1f4;
  --g-gen3: #1f7a43; --g-gen3-bg: #e5f4ea;
  --g-gen4: #1e5fb4; --g-gen4-bg: #e6eefb;
  --g-gen5: #6b3fc4; --g-gen5-bg: #efe8fc;
  --g-amd: #b4232a; --g-amd-bg: #fdecec;
  --g-lvl-red: #e5484d; --g-lvl-orange: #f08c2e; --g-lvl-yellow: #d9a90b; --g-lvl-green: #1fa35a;
  --g-lvl-red-text: #c0392b; --g-lvl-orange-text: #b8600f; --g-lvl-yellow-text: #8a6a00; --g-lvl-green-text: #1f7a43;
  --g-backdrop: rgba(14, 21, 19, .45);
}

/* Старі токени - на нові: усе, що читає змінну (ринок, справи, 3DMark), фарбується саме.
   Змінні Telegram стоять інлайном на <html>, тому тут !important. */
html.graphite[data-theme] {
  --surface: var(--g-surface);
  --line: var(--g-line-strong);
  --muted: var(--g-muted);
  --accent: var(--g-accent);
  --brand: var(--g-accent);
  --tg-bg: var(--g-bg) !important;
  --tg-text: var(--g-text) !important;
  --tg-hint: var(--g-muted) !important;
  --tg-link: var(--g-accent-text) !important;
  --tg-secondary-bg: var(--g-surface) !important;
  --mk-accent: var(--g-accent-text);
  --mk-soft: var(--g-surface-2);
  --mk-sold: var(--g-warn);
  --mk-sold-bg: var(--g-warn-bg);
  --mk-open: var(--g-accent-line);
  --mk-shadow: var(--g-shadow);
  --mk-gen2: var(--g-gen2); --mk-gen2-bg: var(--g-gen2-bg);
  --mk-gen3: var(--g-gen3); --mk-gen3-bg: var(--g-gen3-bg);
  --mk-gen4: var(--g-gen4); --mk-gen4-bg: var(--g-gen4-bg);
  --mk-gen5: var(--g-gen5); --mk-gen5-bg: var(--g-gen5-bg);
  --ui-grad: linear-gradient(var(--g-hero-bg), var(--g-hero-bg));
  --ui-grad-shadow: none;
  --ui-warn: var(--g-warn);
  --ui-warn-bg: var(--g-warn-bg);
  --ui-warn-line: var(--g-warn-line);
  background: var(--g-bg);
  color: var(--g-text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Основа ------------------------------------------------------------------------- */
html.graphite[data-theme] body {
  background: var(--g-bg);
  color: var(--g-text);
  font-variant-numeric: tabular-nums;
}

html.graphite[data-theme] button,
html.graphite[data-theme] input,
html.graphite[data-theme] select,
html.graphite[data-theme] textarea {
  font-family: inherit;
}

html.graphite[data-theme] .muted,
html.graphite[data-theme] .date-note,
html.graphite[data-theme] .price-note {
  color: var(--g-muted);
}

html.graphite[data-theme] .positive {
  color: var(--g-good);
}

html.graphite[data-theme] .negative,
html.graphite[data-theme] .price.negative,
html.graphite[data-theme] .form-error {
  color: var(--g-bad);
}

html.graphite[data-theme] button:focus-visible,
html.graphite[data-theme] input:focus-visible,
html.graphite[data-theme] select:focus-visible,
html.graphite[data-theme] a:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 2px;
}

html.graphite[data-theme] .g-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--g-faint);
  vertical-align: 1px;
}

html.graphite[data-theme] .g-dot.ok {
  background: var(--g-accent);
}

/* --- Кнопки ------------------------------------------------------------------------- */
html.graphite[data-theme] .primary,
html.graphite[data-theme] .primary:hover {
  border: 0;
  border-radius: 12px;
  background: var(--g-accent);
  color: var(--g-accent-ink);
  font-weight: 800;
  box-shadow: none;
  filter: none;
}

html.graphite[data-theme] .secondary,
html.graphite[data-theme] .secondary:hover {
  border: 1px solid var(--g-line-strong);
  border-radius: 12px;
  background: var(--g-surface);
  color: var(--g-text);
  font-weight: 700;
  box-shadow: none;
}

html.graphite[data-theme] .quiet {
  color: var(--g-muted);
}

html.graphite[data-theme] .icon-button {
  border-radius: 12px;
  color: var(--g-soft-text);
}

html.graphite[data-theme] .icon-button:hover {
  background: var(--g-surface-2);
}

/* --- Шапка ------------------------------------------------------------------------- */
html.graphite[data-theme] main {
  padding-top: 12px;
}

html.graphite[data-theme] header {
  min-height: 48px;
  margin-bottom: 10px;
}

html.graphite[data-theme] #page-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
}

html.graphite[data-theme] header .header-actions {
  gap: 8px;
}

html.graphite[data-theme] header .header-actions button,
html.graphite[data-theme] header .header-actions .secondary,
html.graphite[data-theme] header:has(#photos-open:not([hidden])) .header-actions button,
html.graphite[data-theme] header:has(#olx-bulk-open:not([hidden])) .header-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 40px;
  min-height: 40px;
  height: 40px;
  margin-top: 0;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}

html.graphite[data-theme] header .header-actions .secondary {
  color: var(--g-soft-text);
}

html.graphite[data-theme] header .header-actions .primary {
  padding: 0 14px;
  font-weight: 800;
}

html.graphite[data-theme] .header-actions .secondary .filter-count {
  margin-left: 0;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
  font-size: 11.5px;
  font-weight: 800;
}

/* --- Фінансова ціль ----------------------------------------------------------------- */
html.graphite[data-theme] .goal-card {
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-surface);
  color: var(--g-text);
  box-shadow: var(--g-shadow);
}

html.graphite[data-theme] .goal-track {
  background: var(--g-surface-2);
}

html.graphite[data-theme] .goal-fill {
  background: var(--g-accent);
}

/* --- Головна картка з підсумком ------------------------------------------------------ */
html.graphite[data-theme] .metrics,
html.graphite[data-theme] body .metrics {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html.graphite[data-theme] .g-hero {
  padding: 14px 14px 13px;
  border: 1px solid var(--g-hero-line);
  border-radius: 18px;
  background: var(--g-hero-bg);
  color: var(--g-hero-text);
}

html.graphite[data-theme] .g-hero-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--g-hero-label);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

html.graphite[data-theme] .g-hero-top span:last-child:not(:first-child) {
  overflow: hidden;
  text-overflow: ellipsis;
}

html.graphite[data-theme] .g-hero-value {
  display: block;
  margin-top: 3px;
  color: var(--g-hero-text);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  white-space: nowrap;
}

html.graphite[data-theme] .g-hero-value.profit {
  color: var(--g-hero-profit);
}

html.graphite[data-theme] .g-hero-bar {
  display: flex;
  gap: 3px;
  height: 6px;
  margin-top: 11px;
}

html.graphite[data-theme] .g-hero-bar span {
  border-radius: 3px;
  background: var(--g-hero-profit);
}

html.graphite[data-theme] .g-hero-bar span.mid {
  opacity: .55;
}

html.graphite[data-theme] .g-hero-bar span.low {
  opacity: .28;
}

html.graphite[data-theme] .g-hero-legend,
html.graphite[data-theme] .g-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

html.graphite[data-theme] .g-hero-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 10px;
  border-top: 1px solid var(--g-hero-line);
}

html.graphite[data-theme] .g-hero-legend div.dim {
  opacity: .55;
}

html.graphite[data-theme] .g-hero small {
  display: block;
  overflow: hidden;
  color: var(--g-hero-sub);
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .g-hero b {
  display: block;
  margin-top: 2px;
  color: var(--g-hero-text);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

html.graphite[data-theme] .g-hero-grid b {
  font-size: 16px;
}

/* --- Пошук і «Вибрати» ------------------------------------------------------------- */
html.graphite[data-theme] .toolbar {
  gap: 8px;
}

html.graphite[data-theme] .search input,
html.graphite[data-theme] .toolbar .search input,
html.graphite[data-theme] .task-quick input {
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--g-line-strong);
  border-radius: 12px;
  background-color: var(--g-surface);
  color: var(--g-text);
}

html.graphite[data-theme] .search input::placeholder {
  color: var(--g-faint);
}

html.graphite[data-theme] .toolbar #select-mode,
html.graphite[data-theme] .toolbar button {
  min-height: 40px;
  height: 40px;
  padding: 0 13px;
  font-size: 13.5px;
}

/* --- Категорії: сегментований перемикач ---------------------------------------------- */
html.graphite[data-theme] .category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  overflow: visible;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-surface);
}

html.graphite[data-theme] .category-tabs button,
html.graphite[data-theme] .category-tabs button.active {
  min-height: 36px;
  height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--g-muted);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
}

html.graphite[data-theme] .category-tabs button.active {
  background: var(--g-raised);
  color: var(--g-raised-text);
  font-weight: 750;
}

/* --- Фільтри-пігулки ------------------------------------------------------------------ */
html.graphite[data-theme] .location-filters {
  gap: 8px;
  padding-top: 10px;
}

html.graphite[data-theme] .location-filters button,
html.graphite[data-theme] .location-filters button.active {
  min-height: 34px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--g-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--g-soft-text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

html.graphite[data-theme] .location-filters button.active {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
  font-weight: 750;
}

html.graphite[data-theme] .location-filters .filter-count {
  margin-left: 6px;
  color: var(--g-muted);
  opacity: 1;
}

html.graphite[data-theme] .location-filters button.active .filter-count {
  color: inherit;
  opacity: .75;
}

html.graphite[data-theme] .location-filters button.olx-queue {
  border-color: var(--g-warn-line);
  background: var(--g-warn-bg);
  color: var(--g-warn);
}

html.graphite[data-theme] .olx-synced {
  color: var(--g-faint);
  font-size: 11.5px;
}

/* --- Заголовок списку й порядок -------------------------------------------------------- */
html.graphite[data-theme] .list-heading {
  align-items: center;
  padding: 14px 2px 6px;
  color: var(--g-text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

html.graphite[data-theme] #result-count {
  color: var(--g-muted);
  font-weight: 600;
}

html.graphite[data-theme] .list-heading .sort,
html.graphite[data-theme] .sort-label {
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 650;
}

/* --- Картка складу й продажу ------------------------------------------------------------ */
html.graphite[data-theme] #content .item.g-item,
html.graphite[data-theme] .item.g-item,
html.graphite[data-theme] .item.g-item:first-child {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    "lead main right"
    "specs specs specs"
    "chips chips chips";
  column-gap: 12px;
  row-gap: 8px;
  margin: 0 0 8px;
  padding: 12px;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-surface);
  box-shadow: var(--g-shadow);
}

html.graphite[data-theme] .item.g-item.selected {
  border-color: var(--g-accent-line);
  background: var(--g-surface);
  box-shadow: inset 0 0 0 1px var(--g-accent-line);
}

html.graphite[data-theme] .g-lead {
  grid-area: lead;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}

html.graphite[data-theme] .g-lead .item-check {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--g-accent);
}

html.graphite[data-theme] .g-main {
  grid-area: main;
  min-width: 0;
  align-self: center;
}

html.graphite[data-theme] .g-item .item-title {
  display: block;
  min-width: 0;
}

html.graphite[data-theme] .g-item .model-button {
  display: block;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--g-text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.3;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .g-sub {
  margin-top: 3px;
  overflow: hidden;
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .g-id {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
}

html.graphite[data-theme] .g-item .item-right {
  grid-area: right;
  align-self: center;
  min-width: 0;
  text-align: right;
}

html.graphite[data-theme] .g-item .price {
  display: block;
  color: var(--g-text);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

html.graphite[data-theme] .g-item .price.positive {
  color: var(--g-accent-text);
}

html.graphite[data-theme] .g-item .price.negative {
  color: var(--g-bad);
}

html.graphite[data-theme] .g-item .price-note {
  display: block;
  margin: 3px 0 0;
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

html.graphite[data-theme] .g-specs {
  grid-area: specs;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

html.graphite[data-theme] .g-specs .specs,
html.graphite[data-theme] .g-sale {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--g-soft-text);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

html.graphite[data-theme] .g-sale {
  font-size: 12.5px;
}

html.graphite[data-theme] .g-sale i {
  color: var(--g-faint);
  font-style: normal;
}

html.graphite[data-theme] .g-specs .g-tools {
  margin-left: auto;
}

html.graphite[data-theme] .g-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

html.graphite[data-theme] .g-tools {
  display: inline-flex;
  flex: none;
  gap: 6px;
  margin-left: auto;
}

/* Монограма бренду */
html.graphite[data-theme] .g-mono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--g-surface-2);
  color: var(--g-soft-text);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

html.graphite[data-theme='dark'] .g-mono.brand-msi { background: #2b1517; color: #ff8f94; }
html.graphite[data-theme='dark'] .g-mono.brand-asus { background: #1b2036; color: #aeb9ff; }
html.graphite[data-theme='dark'] .g-mono.brand-acer { background: #18260f; color: #a7e36b; }
html.graphite[data-theme='dark'] .g-mono.brand-lenovo { background: #2d1b12; color: #ffab7a; }
html.graphite[data-theme='dark'] .g-mono.brand-hp { background: #102733; color: #7fd4ff; }
html.graphite[data-theme='dark'] .g-mono.brand-dell { background: #14223a; color: #8db8ff; }
html.graphite[data-theme='dark'] .g-mono.brand-razer { background: #13290f; color: #6be25a; }
html.graphite[data-theme='dark'] .g-mono.brand-gigabyte { background: #2c2210; color: #f5c15c; }
html.graphite[data-theme='light'] .g-mono.brand-msi { background: #fdecec; color: #b4232a; }
html.graphite[data-theme='light'] .g-mono.brand-asus { background: #eceefc; color: #3a47b5; }
html.graphite[data-theme='light'] .g-mono.brand-acer { background: #edf6e2; color: #3a7210; }
html.graphite[data-theme='light'] .g-mono.brand-lenovo { background: #fdeee4; color: #a8460f; }
html.graphite[data-theme='light'] .g-mono.brand-hp { background: #e3f4fb; color: #0b6a8f; }
html.graphite[data-theme='light'] .g-mono.brand-dell { background: #e6eefb; color: #1e5fb4; }
html.graphite[data-theme='light'] .g-mono.brand-razer { background: #e8f6e4; color: #2c7a1c; }
html.graphite[data-theme='light'] .g-mono.brand-gigabyte { background: #fbf1dc; color: #8a5a00; }

/* Бейдж відеокарти за поколінням */
html.graphite[data-theme] .g-gpu {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--g-gen2-bg);
  color: var(--g-gen2);
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}

html.graphite[data-theme] .g-gpu.gen-3 { background: var(--g-gen3-bg); color: var(--g-gen3); }
html.graphite[data-theme] .g-gpu.gen-4 { background: var(--g-gen4-bg); color: var(--g-gen4); }
html.graphite[data-theme] .g-gpu.gen-5 { background: var(--g-gen5-bg); color: var(--g-gen5); }
html.graphite[data-theme] .g-gpu.gen-amd { background: var(--g-amd-bg); color: var(--g-amd); }

/* Значки місця, OLX, eBay, резерву */
html.graphite[data-theme] .badge,
html.graphite[data-theme] .g-chips .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--g-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--g-soft-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

html.graphite[data-theme] .badge::before {
  width: 6px;
  height: 6px;
  background: var(--g-faint);
}

html.graphite[data-theme] .badge.ukraine::before { background: var(--g-gen3); }
html.graphite[data-theme] .badge.germany::before { background: var(--g-gen4); }
html.graphite[data-theme] .badge.in_transit::before { background: var(--g-warn); }
html.graphite[data-theme] .badge.olx-published { color: var(--g-accent-text); border-color: var(--g-accent-line); }
html.graphite[data-theme] .badge.olx-published::before { background: var(--g-accent); }
html.graphite[data-theme] .badge.olx-pending::before { background: var(--g-lvl-yellow); }
html.graphite[data-theme] .badge.olx-inactive { color: var(--g-bad); }
html.graphite[data-theme] .badge.olx-inactive::before { background: var(--g-bad); }
html.graphite[data-theme] .badge.olx-none { color: var(--g-muted); border-style: dashed; }
html.graphite[data-theme] .badge.reserved,
html.graphite[data-theme] .badge.in_transit { border-color: var(--g-warn-line); color: var(--g-warn); }
html.graphite[data-theme] .badge.reserved::before { background: var(--g-warn); }
html.graphite[data-theme] .badge.ebay::before { background: var(--g-gen4); }

html.graphite[data-theme] .badge-move {
  cursor: pointer;
}

/* Копіювання опису й пошук на OLX - значками праворуч */
html.graphite[data-theme] .copy-chip,
html.graphite[data-theme] .olx-chip {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--g-line-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--g-soft-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

html.graphite[data-theme] .olx-chip {
  color: var(--g-accent-text);
}

/* --- Нижнє меню --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  html.graphite[data-theme] aside nav {
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--g-line);
    background: var(--g-nav-bg);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }

  html.graphite[data-theme] aside nav button,
  html.graphite[data-theme] aside nav button.active {
    position: relative;
    gap: 4px;
    min-height: 52px;
    padding: 4px 0 2px;
    border-radius: 0;
    background: transparent;
    color: var(--g-muted);
    font-size: 10.5px;
    font-weight: 650;
  }

  html.graphite[data-theme] aside nav button::before {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    margin-top: 3px;
  }

  html.graphite[data-theme] aside nav button::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: transparent;
    transform: translateX(-50%);
  }

  html.graphite[data-theme] aside nav button.active {
    color: var(--g-accent-text);
    font-weight: 800;
  }

  html.graphite[data-theme] aside nav button.active::after {
    background: var(--g-accent-soft);
  }
}

/* --- Вікна й форми ------------------------------------------------------------------------ */
html.graphite[data-theme] dialog {
  border: 1px solid var(--g-line);
  border-radius: 20px;
  background: var(--g-bg);
  color: var(--g-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

html.graphite[data-theme] dialog::backdrop {
  background: var(--g-backdrop);
}

html.graphite[data-theme] .dialog-heading h2,
html.graphite[data-theme] dialog h2 {
  font-weight: 800;
  letter-spacing: -.02em;
}

html.graphite[data-theme] .eyebrow {
  color: var(--g-muted);
  letter-spacing: .06em;
}

html.graphite[data-theme] input,
html.graphite[data-theme] select,
html.graphite[data-theme] textarea,
html.graphite[data-theme] .form-grid input,
html.graphite[data-theme] .form-grid select,
html.graphite[data-theme] .form-grid textarea {
  border: 1px solid var(--g-line-strong);
  border-radius: 12px;
  background-color: var(--g-surface);
  color: var(--g-text);
}

html.graphite[data-theme] input:focus,
html.graphite[data-theme] select:focus,
html.graphite[data-theme] textarea:focus {
  border-color: var(--g-accent);
  box-shadow: 0 0 0 3px var(--g-accent-soft);
}

html.graphite[data-theme] .form-grid label {
  color: var(--g-muted);
  font-weight: 650;
}

html.graphite[data-theme] .sheet-panel {
  background: var(--g-bg);
  color: var(--g-text);
}

html.graphite[data-theme] .chip,
html.graphite[data-theme] .sheet-option {
  border-color: var(--g-line-strong);
  background: var(--g-surface);
  color: var(--g-text);
}

html.graphite[data-theme] .destination:has(input:checked) {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
}

/* Картка товару */
html.graphite[data-theme] #detail-body .detail-photos {
  display: block;
  margin: 0 0 14px;
}

html.graphite[data-theme] .g-photo-hero {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  background: var(--g-surface-2);
}

html.graphite[data-theme] .g-photo-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html.graphite[data-theme] .g-photo-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 12px;
  background: rgba(11, 14, 16, .66);
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
}

html.graphite[data-theme] .g-photo-strip {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

html.graphite[data-theme] .g-photo-strip::-webkit-scrollbar {
  display: none;
}

html.graphite[data-theme] .g-photo-strip .photo-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
}

html.graphite[data-theme] .g-photo-strip .photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.graphite[data-theme] .g-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

html.graphite[data-theme] .g-detail-head .g-mono {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 12.5px;
}

html.graphite[data-theme] .g-detail-head > div {
  min-width: 0;
}

html.graphite[data-theme] #detail-body .detail-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

html.graphite[data-theme] .g-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

html.graphite[data-theme] .g-tags .g-gpu {
  height: 26px;
  border-radius: 8px;
  font-size: 12px;
}

html.graphite[data-theme] .g-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

html.graphite[data-theme] .g-tiles > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-surface);
}

html.graphite[data-theme] .g-tiles small {
  display: block;
  overflow: hidden;
  color: var(--g-muted);
  font-size: 11.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .g-tiles b {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}

html.graphite[data-theme] .g-tiles b.positive { color: var(--g-accent-text); }

html.graphite[data-theme] #detail-body .details-grid {
  display: block;
  margin: 14px 0 0;
  padding: 2px 14px;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-surface);
}

html.graphite[data-theme] #detail-body .details-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--g-line);
}

html.graphite[data-theme] #detail-body .details-grid > div:last-child {
  border-bottom: 0;
}

html.graphite[data-theme] #detail-body .details-grid dt {
  flex: none;
  margin: 0;
  color: var(--g-muted);
  font-size: 13px;
}

html.graphite[data-theme] #detail-body .details-grid dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Дії - смугою знизу вікна, «Продати» найпомітніша. */
html.graphite[data-theme] #detail-body .detail-actions {
  position: sticky;
  bottom: -24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px -24px -24px;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--g-line);
  background: var(--g-nav-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

html.graphite[data-theme] #detail-body .detail-actions button {
  flex: 1 1 auto;
  min-height: 46px;
  border-radius: 14px;
}

html.graphite[data-theme] #detail-body .detail-actions .primary {
  order: -1;
  flex: 1 1 100%;
  font-size: 15px;
}

/* --- Статистика ----------------------------------------------------------------------------- */
html.graphite[data-theme] .stat-section {
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--g-line);
  border-radius: 18px;
  background: var(--g-surface);
  box-shadow: var(--g-shadow);
}

html.graphite[data-theme] .stat-section h2 {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}

html.graphite[data-theme] .stats-basis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 12px;
  background: var(--g-surface-2);
}

html.graphite[data-theme] .stats-basis button,
html.graphite[data-theme] .stats-basis button.active {
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--g-muted);
  font-size: 12.5px;
  font-weight: 650;
  box-shadow: none;
}

html.graphite[data-theme] .stats-basis button.active {
  background: var(--g-raised);
  color: var(--g-raised-text);
  font-weight: 750;
}

/* Стовпчики місяців: найкращий яскравий, поточний пунктиром, збитковий червоний. */
html.graphite[data-theme] .g-cols {
  display: grid;
  grid-auto-columns: minmax(52px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  height: 168px;
  overflow-x: auto;
  scrollbar-width: none;
  direction: rtl;
}

html.graphite[data-theme] .g-cols::-webkit-scrollbar {
  display: none;
}

html.graphite[data-theme] .g-col {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 168px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--g-soft-text);
  direction: ltr;
}

html.graphite[data-theme] .g-col-value {
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}

html.graphite[data-theme] .g-col-bar {
  align-self: end;
  width: 100%;
  border-radius: 9px 9px 4px 4px;
  background: var(--g-accent);
  opacity: .45;
}

html.graphite[data-theme] .g-col.best .g-col-bar {
  opacity: 1;
}

html.graphite[data-theme] .g-col.best .g-col-value {
  color: var(--g-accent-text);
}

html.graphite[data-theme] .g-col.current .g-col-bar {
  border: 1.5px dashed var(--g-accent-line);
  background: var(--g-accent-soft);
  opacity: 1;
}

html.graphite[data-theme] .g-col.negative .g-col-bar {
  background: var(--g-bad);
  opacity: .7;
}

html.graphite[data-theme] .g-col.negative .g-col-value {
  color: var(--g-bad);
}

html.graphite[data-theme] .g-col-month {
  margin-top: 7px;
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

html.graphite[data-theme] .g-col-month small {
  display: block;
  color: var(--g-faint);
  font-size: 10.5px;
  font-weight: 600;
}

html.graphite[data-theme] .breakdown-row,
html.graphite[data-theme] .eb-row {
  border-color: var(--g-line);
  font-size: 13.5px;
}

html.graphite[data-theme] .breakdown-row span {
  color: var(--g-muted);
}

html.graphite[data-theme] .breakdown-row strong,
html.graphite[data-theme] .eb-row strong {
  font-weight: 750;
}

html.graphite[data-theme] .eb-total strong {
  font-weight: 800;
  letter-spacing: -.02em;
}

/* --- Ринок, справи, 3DMark: картки на токенах ------------------------------------------------ */
html.graphite[data-theme] .mk-card,
html.graphite[data-theme] .task-row,
html.graphite[data-theme] .rule-gpu,
html.graphite[data-theme] .guide-card,
html.graphite[data-theme] .olx-card {
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-surface);
  box-shadow: var(--g-shadow);
}

html.graphite[data-theme] .mk-hero:not(.kf-hero) {
  border: 1px solid var(--g-hero-line);
  border-radius: 18px;
  background: var(--g-hero-bg);
  color: var(--g-hero-text);
  box-shadow: none;
}

html.graphite[data-theme] .mk-segment {
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-surface);
}

html.graphite[data-theme] .mk-segment button.active {
  background: var(--g-raised);
  color: var(--g-raised-text);
  box-shadow: none;
}

/* --- Інше ---------------------------------------------------------------------------------- */
html.graphite[data-theme] .empty h2 {
  color: var(--g-text);
}

html.graphite[data-theme] .toast {
  border-radius: 14px;
  background: var(--g-raised);
  color: var(--g-raised-text);
}

html.graphite[data-theme] .bulk {
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-surface);
}

/* --- Знахідки як у Kleinanzeigen --------------------------------------------------------------- */
html.graphite[data-theme] .kf-tabs {
  display: flex;
  gap: 18px;
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--g-line);
  scrollbar-width: none;
}

html.graphite[data-theme] .kf-tabs::-webkit-scrollbar {
  display: none;
}

html.graphite[data-theme] .kf-tabs button {
  flex: none;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--g-muted);
  font-size: 14px;
  font-weight: 650;
}

html.graphite[data-theme] .kf-tabs button.active {
  border-bottom-color: var(--g-accent);
  color: var(--g-text);
  font-weight: 800;
}

html.graphite[data-theme] .kf-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
}

html.graphite[data-theme] .kf-chips {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

html.graphite[data-theme] .kf-chips::-webkit-scrollbar {
  display: none;
}

html.graphite[data-theme] .kf-chips button,
html.graphite[data-theme] .kf-chips button.active {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--g-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--g-soft-text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

html.graphite[data-theme] .kf-chips button.active {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
  font-weight: 750;
}

html.graphite[data-theme] .kf-chips .kf-count {
  color: var(--g-muted);
}

html.graphite[data-theme] .kf-chips button.active .kf-count {
  color: inherit;
  opacity: .75;
}

html.graphite[data-theme] .kf-chips .kf-star {
  display: inline-flex;
  color: #f5c15c;
}

html.graphite[data-theme] .kf-sort {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  border: 1px solid var(--g-line-strong);
  border-radius: 12px;
  color: var(--g-soft-text);
}

html.graphite[data-theme] .kf-sort select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

html.graphite[data-theme] .kf-list {
  position: relative;
  margin-top: 4px;
}

/* Зміна площадки: рядки в'їжджають збоку, а сторінка не гортається вбік. */
html.graphite[data-theme] .kf-list.slide-next,
html.graphite[data-theme] .kf-list.slide-prev {
  overflow-x: clip;
}

html.graphite[data-theme] .kf-list.slide-next > * {
  animation: kf-slide-next .22s ease-out;
}

html.graphite[data-theme] .kf-list.slide-prev > * {
  animation: kf-slide-prev .22s ease-out;
}

@keyframes kf-slide-next {
  from { opacity: 0; transform: translateX(32px); }
}

@keyframes kf-slide-prev {
  from { opacity: 0; transform: translateX(-32px); }
}

@media (prefers-reduced-motion: reduce) {
  html.graphite[data-theme] .kf-list.slide-next > *,
  html.graphite[data-theme] .kf-list.slide-prev > * {
    animation: none;
  }
}

html.graphite[data-theme] .kf-new-items {
  position: sticky;
  z-index: 3;
  top: 8px;
  display: block;
  min-height: 30px;
  margin: 8px auto -38px;
  padding: 0 14px;
  border: 0;
  border-radius: 15px;
  background: var(--g-accent);
  color: var(--g-accent-ink);
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

html.graphite[data-theme] .kf-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--g-line);
}

html.graphite[data-theme] .kf-row.gone {
  opacity: .6;
}

html.graphite[data-theme] .kf-media {
  position: relative;
  width: 112px;
  height: 112px;
}

html.graphite[data-theme] .kf-media > a {
  display: block;
  width: 112px;
  height: 112px;
}

html.graphite[data-theme] .kf-media img,
html.graphite[data-theme] .kf-media .kf-noimg {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 12px;
  background: var(--g-surface);
  object-fit: cover;
}

html.graphite[data-theme] .kf-media .kf-new {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 10px;
  background: var(--g-accent);
  color: var(--g-accent-ink);
  font-size: 10.5px;
  font-weight: 800;
}

/* Площадка у вкладці «Усі» - суцільною кольоровою позначкою на початку рядка «коли й де»
   (власник, 2026-10-27: на фото її не видно). Кольори - як значки сповіщень апки. */
html.graphite[data-theme] .kf-meta .kf-src {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 6px;
  background: #3a3f44;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}

html.graphite[data-theme] .kf-meta .kf-src.ka { background: #2f7d24; }
html.graphite[data-theme] .kf-meta .kf-src.ebay { background: #0064d2; }
html.graphite[data-theme] .kf-meta .kf-src.vinted { background: #007782; }

html.graphite[data-theme] .kf-media .kf-watch {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: rgba(11, 14, 16, .6);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html.graphite[data-theme] .kf-media .kf-watch.on {
  color: #f5c15c;
}

html.graphite[data-theme] .kf-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

html.graphite[data-theme] .kf-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 550;
}

html.graphite[data-theme] .kf-where {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .kf-checked {
  flex: none;
  color: var(--g-faint);
  font-size: 11.5px;
}

html.graphite[data-theme] .kf-hide {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: -9px -9px -9px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--g-muted);
}

/* Хрестик «Нецікаво» більший (власник, 2026-10-27). */
html.graphite[data-theme] .kf-hide svg {
  width: 20px;
  height: 20px;
}

html.graphite[data-theme] .kf-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--g-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.graphite[data-theme] .kf-spec {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

html.graphite[data-theme] .kf-spec .g-gpu {
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
}

html.graphite[data-theme] .kf-spec span:last-child:not(.g-gpu) {
  min-width: 0;
  overflow: hidden;
  color: var(--g-soft-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .kf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

html.graphite[data-theme] .kf-tag {
  display: inline-block;
  max-width: 100%;
  height: 20px;
  line-height: 20px;
  padding: 0 7px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--g-surface-2);
  color: var(--g-soft-text);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .kf-tag.warn {
  background: var(--g-warn-bg);
  color: var(--g-warn);
}

html.graphite[data-theme] .kf-tag.gone {
  background: var(--g-warn-bg);
  color: var(--g-warn);
}

html.graphite[data-theme] .kf-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

html.graphite[data-theme] .kf-price {
  color: var(--g-text);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

html.graphite[data-theme] .kf-price s {
  margin-right: 4px;
  color: var(--g-faint);
  font-size: 11.5px;
  font-weight: 600;
}

html.graphite[data-theme] .kf-row .kf-profit,
html.graphite[data-theme] .kf-row a.kf-profit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-decoration: none;
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

html.graphite[data-theme] .kf-profit .kf-lvl {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-faint);
}

html.graphite[data-theme] .kf-row .kf-profit.level-red { color: var(--g-lvl-red-text); }
html.graphite[data-theme] .kf-row .kf-profit.level-red .kf-lvl { background: var(--g-lvl-red); }
html.graphite[data-theme] .kf-row .kf-profit.level-orange { color: var(--g-lvl-orange-text); }
html.graphite[data-theme] .kf-row .kf-profit.level-orange .kf-lvl { background: var(--g-lvl-orange); }
html.graphite[data-theme] .kf-row .kf-profit.level-yellow { color: var(--g-lvl-yellow-text); }
html.graphite[data-theme] .kf-row .kf-profit.level-yellow .kf-lvl { background: var(--g-lvl-yellow); }
html.graphite[data-theme] .kf-row .kf-profit.level-green { color: var(--g-lvl-green-text); }
html.graphite[data-theme] .kf-row .kf-profit.level-green .kf-lvl { background: var(--g-lvl-green); }

html.graphite[data-theme] .kf-unsure {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--g-warn-bg);
  color: var(--g-bad);
  font-size: 10px;
  font-weight: 800;
}

html.graphite[data-theme] .kf-note {
  color: var(--g-faint);
  font-size: 11.5px;
  font-weight: 600;
}

html.graphite[data-theme] .kf-more {
  width: 100%;
  margin-top: 12px;
}

/* Вузький екран або збільшений шрифт Samsung (як і раніше, до 350 px): підписи не злипаються. */
@media (max-width: 350px) {
  html.graphite[data-theme] aside nav button,
  html.graphite[data-theme] aside nav button.active {
    font-size: 9.5px;
    letter-spacing: -.2px;
  }

  html.graphite[data-theme] .category-tabs button,
  html.graphite[data-theme] .category-tabs button.active {
    font-size: 11.5px;
  }
}

/* Вікно місяця: підсумки не переносяться посеред суми, рядок продажу - у два рядки. */
html.graphite[data-theme] .month-summary small {
  color: var(--g-muted);
}

html.graphite[data-theme] .month-summary strong {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

html.graphite[data-theme] #month-list .g-sale {
  white-space: normal;
}

/* Потягнути «Знахідки» вниз - оновити (2026-10-27). */
.pull-refresh {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 40;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--g-surface);
  border: 1px solid var(--g-line-strong);
  color: var(--g-muted);
  font: 700 20px/1 Manrope, system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -48px);
  transition: opacity .15s, color .15s;
}
.pull-refresh.shown { opacity: 1; }
.pull-refresh.ready { color: var(--g-accent); border-color: var(--g-accent-line); }
.pull-refresh span { display: block; transform: rotate(var(--turn, 0deg)); }
.pull-refresh.busy span { animation: pull-spin .8s linear infinite; }
@keyframes pull-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* --- 2026-10-27: власник - «компактніше відеокарти й пам'ять, ціна рівно, категорії кольорами» --- */
/* Ціна - на рівні назви, а не посередині картки: ряд цін читається рівно. */
html.graphite[data-theme] .g-item .item-right {
  align-self: start;
  padding-top: 1px;
}

/* Без рядка значків картка закінчується рядком характеристик; копіювання - праворуч у ньому. */
html.graphite[data-theme] .g-specs .g-tools .copy-chip,
html.graphite[data-theme] .g-specs .g-tools .olx-chip {
  height: 26px;
  min-height: 26px;
  width: 30px;
  min-width: 30px;
}

/* Категорії на смузі - кожна своїм кольором. */
html.graphite[data-theme='dark'] {
  --g-k-laptop: #3ee0c0;
  --g-k-gpu: #6fa8ff;
  --g-k-memory: #ff7a85;
}

html.graphite[data-theme='light'] {
  --g-k-laptop: #ffffff;
  --g-k-gpu: #a9c8ff;
  --g-k-memory: #ffb3b8;
}

html.graphite[data-theme] .g-hero-bar span.k-laptop { background: var(--g-k-laptop); }
html.graphite[data-theme] .g-hero-bar span.k-graphics_card { background: var(--g-k-gpu); }
html.graphite[data-theme] .g-hero-bar span.k-memory { background: var(--g-k-memory); }

html.graphite[data-theme] .g-hero-bar span.dim {
  opacity: .3;
}

html.graphite[data-theme] .g-kind-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
}

html.graphite[data-theme] .k-laptop .g-kind-dot { background: var(--g-k-laptop); }
html.graphite[data-theme] .k-graphics_card .g-kind-dot { background: var(--g-k-gpu); }
html.graphite[data-theme] .k-memory .g-kind-dot { background: var(--g-k-memory); }

/* Картка без рядка значків - лише два ряди сітки, без порожнього проміжку знизу. */
html.graphite[data-theme] #content .item.g-item.g-two-rows,
html.graphite[data-theme] .item.g-item.g-two-rows {
  grid-template-areas:
    "lead main right"
    "specs specs specs";
}

/* Рядок «коли · місто · відстань»: місто скорочується, решта - ні. */
html.graphite[data-theme] .kf-meta .kf-where {
  display: flex;
  min-width: 0;
  white-space: pre;
}

html.graphite[data-theme] .kf-where .kf-fix {
  flex: none;
}

html.graphite[data-theme] .kf-where .kf-city {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* --- Комп'ютер (2026-10-28, власник: «щоб у браузері було теж читабельно») ----------------------
   Ширше 700 px: бічне меню з тими самими значками, що й нижнє на телефоні; від 1180 px склад,
   продажі й знахідки - у дві колонки, щоб картки не розтягувались на весь монітор. */
@media (min-width: 701px) {
  html.graphite[data-theme] aside nav button[data-view='finds'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3Cpath d='M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
  html.graphite[data-theme] aside nav button[data-view='stock'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
  html.graphite[data-theme] aside nav button[data-view='sales'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4'/%3E%3C/svg%3E"); }
  html.graphite[data-theme] aside nav button[data-view='stats'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Crect x='5' y='11' width='3.2' height='7' rx='1'/%3E%3Crect x='10.4' y='5' width='3.2' height='13' rx='1'/%3E%3Crect x='15.8' y='8' width='3.2' height='10' rx='1'/%3E%3C/svg%3E"); }
  html.graphite[data-theme] aside nav button[data-view='valuation'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); }
  html.graphite[data-theme] aside nav button[data-view='tasks'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.6'/%3E%3C/svg%3E"); }

  html.graphite[data-theme] .shell {
    max-width: 1360px;
    grid-template-columns: 228px minmax(0, 1fr);
  }

  html.graphite[data-theme] aside {
    padding: 26px 16px 24px;
    border-right: 1px solid var(--g-line);
    background: var(--g-bg);
  }

  html.graphite[data-theme] aside .brand {
    padding: 0 8px;
    color: var(--g-text);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  html.graphite[data-theme] aside .brand-mark {
    border-radius: 9px;
    background: var(--g-accent);
    color: var(--g-accent-ink);
    font-weight: 800;
  }

  html.graphite[data-theme] .private-label {
    margin: 8px 8px 24px;
    color: var(--g-muted);
  }

  html.graphite[data-theme] aside nav {
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  html.graphite[data-theme] aside nav button,
  html.graphite[data-theme] aside nav button.active {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 11px;
    background: transparent;
    color: var(--g-soft-text);
    font-size: 14.5px;
    font-weight: 650;
  }

  html.graphite[data-theme] aside nav button::before {
    content: '';
    flex: none;
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: var(--nav-icon) center / contain no-repeat;
    mask: var(--nav-icon) center / contain no-repeat;
  }

  html.graphite[data-theme] aside nav button:hover {
    background: var(--g-surface);
  }

  html.graphite[data-theme] aside nav button.active {
    background: var(--g-accent-soft);
    color: var(--g-accent-text);
    font-weight: 800;
  }

  html.graphite[data-theme] main {
    padding: 26px 32px 64px;
  }

  html.graphite[data-theme] header .eyebrow {
    color: var(--g-muted);
    font-size: 10.5px;
    letter-spacing: .1em;
  }

  /* Вікна на комп'ютері - ширші, картка товару не тісна. */
  html.graphite[data-theme] dialog#detail {
    width: min(620px, calc(100% - 48px));
  }

  /* Нижня смуга вибору - під змістом, а не під бічним меню. */
  html.graphite[data-theme] .bulk {
    left: calc(50% + 114px);
  }
}

@media (min-width: 1180px) {
  html.graphite[data-theme] body[data-view='stock'] #content,
  html.graphite[data-theme] body[data-view='sales'] #content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
  }

  html.graphite[data-theme] body[data-view='stock'] #content > .empty,
  html.graphite[data-theme] body[data-view='sales'] #content > .empty {
    grid-column: 1 / -1;
  }

  html.graphite[data-theme] #content .item.g-item,
  html.graphite[data-theme] #content .item.g-item:first-child {
    margin: 0;
  }

  html.graphite[data-theme] .kf-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  html.graphite[data-theme] .kf-list > .kf-new-items,
  html.graphite[data-theme] .kf-list > .empty {
    grid-column: 1 / -1;
  }
}

/* --- Продавець у картці «Ринку» - як картка продавця на OLX (власник, 2026-10-31) ------------- */
html.graphite[data-theme] .g-seller {
  margin: 14px 0;
  padding: 14px 16px 4px;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-surface);
}

html.graphite[data-theme] .g-seller-kind {
  color: var(--g-soft-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html.graphite[data-theme] .g-seller-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 12px;
}

html.graphite[data-theme] .g-seller-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: hsl(var(--hue) 32% 24%);
  color: hsl(var(--hue) 70% 78%);
  font-size: 22px;
  font-weight: 800;
}

html.graphite[data-theme] .g-seller-who {
  min-width: 0;
}

html.graphite[data-theme] .g-seller-name {
  overflow: hidden;
  color: var(--g-text);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .g-seller-score {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--g-text);
  font-size: 15px;
}

html.graphite[data-theme] .g-seller-score b {
  font-weight: 800;
}

/* Зірки: сірі п'ять, поверх - жовті на частку оцінки. */
html.graphite[data-theme] .g-stars {
  position: relative;
  display: inline-block;
  color: #3a4248;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 1;
}

html.graphite[data-theme] .g-stars::before {
  content: '★★★★★';
}

html.graphite[data-theme] .g-stars span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #f5c15c;
  white-space: nowrap;
}

html.graphite[data-theme] .g-stars span::before {
  content: '★★★★★';
}

html.graphite[data-theme] .g-seller-count {
  display: inline-block;
  margin-top: 3px;
  color: var(--g-soft-text);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.graphite[data-theme] .g-seller-meta {
  margin-top: 3px;
  color: var(--g-muted);
  font-size: 13.5px;
}

html.graphite[data-theme] .g-seller-meta.warn {
  color: var(--g-warn);
  font-weight: 700;
}

html.graphite[data-theme] .g-seller-bad {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--g-warn-line);
  border-radius: 12px;
  background: var(--g-warn-bg);
  color: var(--g-warn);
  font-size: 13px;
  font-weight: 600;
}

html.graphite[data-theme] .g-seller-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--g-soft-text);
  font-size: 14px;
}

html.graphite[data-theme] .g-seller-row b {
  color: var(--g-text);
  font-weight: 800;
}

html.graphite[data-theme] .g-seller-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--g-surface-2);
  color: var(--g-soft-text);
}

/* Доставки - жовтим кружком, як на OLX. */
html.graphite[data-theme] .g-seller-icon.truck {
  background: #f5c15c;
  color: #2b2208;
}

html.graphite[data-theme] .g-seller-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  margin-top: 12px;
  border-top: 1px solid var(--g-line);
  color: var(--g-text);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}

html.graphite[data-theme] .g-seller-all svg {
  color: var(--g-muted);
}

/* --- «Ринок → eBay.de · продане» (2026-11-04): продані на eBay.de, лише з Німеччини. --------------- */
html.graphite[data-theme] .es-source {
  margin: 0 0 6px;
}

html.graphite[data-theme] .es-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

html.graphite[data-theme] .es-recent .mk-pill {
  padding: 6px 12px;
  border: 1px solid var(--g-line-strong);
  background: var(--g-surface);
  color: var(--g-soft-text);
  font-size: 13px;
}

html.graphite[data-theme] .es-hero {
  margin-top: 10px;
}

html.graphite[data-theme] .es-list {
  margin-top: 4px;
}

html.graphite[data-theme] .es-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--g-line);
  color: var(--g-text);
  text-decoration: none;
}

html.graphite[data-theme] .es-photo {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--g-surface-2);
  object-fit: cover;
}

html.graphite[data-theme] .es-main {
  min-width: 0;
}

html.graphite[data-theme] .es-main strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

html.graphite[data-theme] .es-main small {
  display: block;
  margin-top: 3px;
  color: var(--g-muted);
  font-size: 12px;
}

html.graphite[data-theme] .es-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

html.graphite[data-theme] .es-side small {
  color: var(--g-muted);
  font-size: 11px;
  white-space: nowrap;
}

html.graphite[data-theme] .es-offer {
  color: var(--g-warn);
}

html.graphite[data-theme] .es-more {
  display: block;
  width: 100%;
  min-height: 42px;
  margin: 12px 0 4px;
  border: 1px solid var(--g-line-strong);
  border-radius: 12px;
  background: var(--g-surface);
  color: var(--g-accent-text);
  font-size: 14px;
  font-weight: 700;
}

html.graphite[data-theme] .es-more:disabled {
  color: var(--g-muted);
}

html.graphite[data-theme] .es-problem {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--g-warn-line);
  border-radius: 12px;
  background: var(--g-warn-bg);
  color: var(--g-warn);
  font-size: 13px;
  font-weight: 650;
}

html.graphite[data-theme] .es-wait {
  margin: 18px 0;
}

/* --- Огляд 2026-11-05 («переглянь міні-апку, де підправити») ------------------------------- */
/* Склад і продажі: назва й рядок «L048 · дата · дні» - до двох рядків, а не «ASUS ROG Str…». */
html.graphite[data-theme] .g-item .model-button {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.graphite[data-theme] .g-sub {
  white-space: normal;
}


/* Знахідки без фото - значок ноутбука, а не порожній квадрат. */
html.graphite[data-theme] .kf-media .kf-noimg {
  display: grid;
  place-items: center;
  border: 1px dashed var(--g-line-strong);
  color: var(--g-faint);
}

/* Фішки знахідок гортаються вбік - край тьмяніє, щоб це було видно. */
html.graphite[data-theme] .kf-chips {
  padding-right: 24px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

/* Незадана ціль не липне згори: при прокрутці вона накривала статистику. Задана - липне, але
   з тінню, щоб під нею не просвічував список. */
html.graphite[data-theme] .goal-card.unset {
  position: static;
}

html.graphite[data-theme] .goal-card:not(.unset) {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

/* Статистика: пошук і «Аналітика покупок» її не фільтрують - і на комп'ютері їх немає;
   між вкладками категорій і першим блоком - відступ. */
html.graphite[data-theme] body[data-view='stats'] .toolbar,
html.graphite[data-theme] body[data-view='stats'] .list-heading {
  display: none;
}

html.graphite[data-theme] body[data-view='stats'] #content {
  margin-top: 12px;
}

/* Стовпчики місяців на широкому екрані - не ширші за 140 px і зліва. */
html.graphite[data-theme] .g-cols {
  grid-auto-columns: minmax(52px, 140px);
  justify-content: end;
}

/* Форми: вибір і поля - одним шрифтом; підказка «Обери або введи» вміщається в половину рядка. */
html.graphite[data-theme] .form-grid input,
html.graphite[data-theme] .form-grid select,
html.graphite[data-theme] .form-grid textarea {
  padding-left: 12px;
  padding-right: 12px;
  font-size: 15px;
  font-weight: 600;
}

html.graphite[data-theme] .form-grid input::placeholder,
html.graphite[data-theme] .form-grid textarea::placeholder {
  color: var(--g-faint);
  font-size: 13.5px;
  font-weight: 500;
}

/* «Ринок»: монограми брендів - приглушеним тлом бренду, як на складі, а не суцільною плямою. */
html.graphite[data-theme] .mk-mark {
  border: 0;
  background: color-mix(in srgb, var(--brand) 26%, var(--g-surface));
  color: color-mix(in srgb, var(--brand) 40%, #ffffff);
  font-weight: 800;
}

/* 3DMark: шапка - як усі картки-підсумки «Графіта»; фільтри не впритул до списку. */
html.graphite[data-theme] .mk-hero.kf-hero {
  border: 1px solid var(--g-hero-line);
  border-radius: 18px;
  background: var(--g-hero-bg);
  color: var(--g-hero-text);
  box-shadow: none;
}

html.graphite[data-theme] .mk-hero.kf-hero .mk-hero-head {
  color: var(--g-hero-label);
}

html.graphite[data-theme] body[data-view='bench'] .kf-filters {
  margin-bottom: 10px;
}

/* --- «Ринок» компактно (2026-11-05, власник: «стисни») ---------------------------------------
   Було шість рядів керування перед списком, стало чотири тонші: вкладки джерела з часом перепису,
   цифри одним рядком, пошук поруч із «Серії · Відеокарти», фільтри, статус поруч із періодом. */
html.graphite[data-theme] .kf-tabs.es-source {
  align-items: center;
  margin: 0 -16px 10px;
}

html.graphite[data-theme] .es-source .es-updated {
  flex: none;
  margin-left: auto;
  color: var(--g-faint);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

html.graphite[data-theme] .mk-hero.mk-hero-slim,
html.graphite[data-theme] .mk-hero.mk-hero-slim:not(.kf-hero) {
  margin: 0 0 10px;
  padding: 10px 14px;
}

html.graphite[data-theme] .mk-hero-slim .mk-hero-stats,
html.graphite[data-theme] .mk-hero.mk-hero-slim:not(.kf-hero) .mk-hero-stats {
  gap: 8px;
  margin-top: 0;
}

html.graphite[data-theme] .mk-hero-slim .mk-hero-stats strong,
html.graphite[data-theme] .mk-hero.mk-hero-slim:not(.kf-hero) .mk-hero-stats strong {
  font-size: 19px;
}

html.graphite[data-theme] .mk-hero-slim .mk-hero-stats span,
html.graphite[data-theme] .mk-hero.mk-hero-slim:not(.kf-hero) .mk-hero-stats span {
  margin-top: 1px;
  overflow: hidden;
  color: var(--g-hero-sub);
  font-size: 11px;
  opacity: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .mk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

html.graphite[data-theme] .mk-bar .mk-search,
html.graphite[data-theme] body[data-view='valuation'] .mk-bar .mk-search {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

html.graphite[data-theme] .mk-bar .mk-search input,
html.graphite[data-theme] body[data-view='valuation'] .mk-bar .mk-search input {
  height: 40px;
  min-height: 40px;
}

html.graphite[data-theme] .mk-bar .mk-segment {
  flex: none;
  margin: 0;
  padding: 3px;
}

html.graphite[data-theme] .mk-bar .mk-segment button,
html.graphite[data-theme] body[data-view='valuation'] .mk-bar .mk-segment button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
}

html.graphite[data-theme] body[data-view='valuation'] .mk-filters {
  margin-top: 8px;
}

html.graphite[data-theme] .mk-bar.mk-bar-status {
  justify-content: space-between;
  margin: 6px 0 10px;
  border-bottom: 1px solid var(--g-line);
}

html.graphite[data-theme] .mk-bar-status .mk-tabs,
html.graphite[data-theme] body[data-view='valuation'] .mk-bar-status .mk-tabs {
  flex: 1;
  gap: 18px;
  margin: 0;
  border-bottom: 0;
}

html.graphite[data-theme] .mk-bar-status .mk-tabs button {
  min-height: 40px;
  border-bottom-width: 3px;
}

html.graphite[data-theme] .mk-bar-status .mk-period {
  flex: none;
}

/* --- Склад, продажі, статистика, справи компактно (2026-11-05, власник: «склад і всі інші меню так само») ---
   Як у «Ринку»: вкладки категорій - тонкі з підкресленням одразу під заголовком; підсумок - сума зліва,
   цифри стовпчиком праворуч; сортування - значок біля пошуку; місце й OLX - в одному ряду фішок;
   заголовка «На складі · N записів» немає (кількість - у підсумку й на фішці). */
html.graphite[data-theme] .category-tabs {
  display: flex;
  gap: 18px;
  margin: 0 -16px 10px;
  padding: 0 16px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--g-line);
  border-radius: 0;
  background: none;
  scrollbar-width: none;
}

html.graphite[data-theme] .category-tabs::-webkit-scrollbar {
  display: none;
}

html.graphite[data-theme] .category-tabs button,
html.graphite[data-theme] .category-tabs button.active {
  flex: none;
  min-height: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--g-muted);
  font-size: 14px;
  font-weight: 650;
}

html.graphite[data-theme] .category-tabs button.active {
  border-bottom-color: var(--g-accent);
  color: var(--g-text);
  font-weight: 800;
}

html.graphite[data-theme] .category-tabs button[data-kind='graphics_card'].active {
  border-bottom-color: var(--g-k-gpu);
}

html.graphite[data-theme] .category-tabs button[data-kind='memory'].active {
  border-bottom-color: var(--g-k-memory);
}

html.graphite[data-theme] .g-hero.g-hero-slim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 11px 14px 12px;
}

html.graphite[data-theme] .g-hero-slim .g-hero-main {
  min-width: 0;
}

html.graphite[data-theme] .g-hero-slim .g-hero-main small {
  color: var(--g-hero-label);
  font-size: 11.5px;
  font-weight: 650;
}

html.graphite[data-theme] .g-hero-slim .g-hero-value {
  margin-top: 1px;
  font-size: 26px;
}

html.graphite[data-theme] .g-hero-slim .g-hero-main .g-hero-note {
  margin-top: 1px;
  color: var(--g-hero-sub);
  font-weight: 600;
}

html.graphite[data-theme] .g-hero-slim .g-hero-legend {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}

html.graphite[data-theme] .g-hero-slim .g-hero-legend > div {
  display: contents;
}

html.graphite[data-theme] .g-hero-slim .g-hero-legend small {
  font-size: 11.5px;
}

html.graphite[data-theme] .g-hero-slim .g-hero-legend b {
  margin: 0;
  font-size: 13.5px;
  text-align: right;
}

html.graphite[data-theme] .g-hero-slim .g-hero-legend div.dim > * {
  opacity: .5;
}

html.graphite[data-theme] .g-hero-slim .g-hero-bar {
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 10px;
}

/* Пошук, значок порядку й «Вибрати» - один ряд. */
html.graphite[data-theme] .toolbar {
  align-items: center;
}

html.graphite[data-theme] .toolbar .sort {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--g-line-strong);
  border-radius: 12px;
  background: var(--g-surface);
  color: var(--g-soft-text);
}

html.graphite[data-theme] .toolbar .sort.active {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
}

html.graphite[data-theme] .toolbar .sort .sort-label {
  display: none;
}

html.graphite[data-theme] .list-heading {
  display: none;
}

/* Місце (список) і фішки OLX - один ряд, що гортається вбік. */
html.graphite[data-theme] .g-filter-row {
  display: flex;
  gap: 8px;
  margin: 8px -16px 0;
  padding: 0 40px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

html.graphite[data-theme] .g-filter-row::-webkit-scrollbar {
  display: none;
}

html.graphite[data-theme] .g-filter-row:not(:has(> :not([hidden]))) {
  display: none;
}

html.graphite[data-theme] .g-filter-row .location-filters {
  display: contents;
}

html.graphite[data-theme] .g-filter-row .location-filters > * {
  flex: none;
  order: 2;
}

html.graphite[data-theme] .g-filter-row .g-select-chip {
  order: 0;
}

html.graphite[data-theme] .g-filter-row .olx-filters > button {
  order: 1;
}

html.graphite[data-theme] .g-filter-row .olx-filters > button.olx-queue {
  order: 2;
}

html.graphite[data-theme] .g-filter-row .olx-synced {
  align-self: center;
  order: 3;
  white-space: nowrap;
}

html.graphite[data-theme] .g-filter-row button .g-dot {
  margin-right: 6px;
}

html.graphite[data-theme] .g-select-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 10px 0 13px;
  border: 1px solid var(--g-line-strong);
  border-radius: 999px;
  color: var(--g-soft-text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

html.graphite[data-theme] .g-select-chip.active {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
  font-weight: 750;
}

html.graphite[data-theme] .g-select-chip .filter-count {
  margin-left: 6px;
  color: var(--g-muted);
}

html.graphite[data-theme] .g-select-chip.active .filter-count {
  color: inherit;
  opacity: .75;
}

html.graphite[data-theme] .g-select-chip .g-chevron {
  margin-left: 4px;
  opacity: .7;
}

html.graphite[data-theme] .g-select-chip select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

html.graphite[data-theme] .g-select-chip:has(select:focus-visible),
html.graphite[data-theme] .toolbar .sort:has(select:focus-visible) {
  outline: 3px solid var(--g-accent);
  outline-offset: 2px;
}

html.graphite[data-theme] body[data-view='stock'] #content,
html.graphite[data-theme] body[data-view='sales'] #content {
  margin-top: 10px;
}

/* Справи: швидке додавання - значок, а не друга велика м'ятна кнопка поруч із «+ Справа». */
html.graphite[data-theme] .task-quick {
  margin: 0 0 12px;
}

html.graphite[data-theme] .task-quick .task-quick-add {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--g-accent-line);
  border-radius: 12px;
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
}

@media (max-width: 350px) {
  html.graphite[data-theme] .category-tabs {
    gap: 14px;
  }

  html.graphite[data-theme] .category-tabs button,
  html.graphite[data-theme] .category-tabs button.active {
    font-size: 13px;
  }

  html.graphite[data-theme] .g-hero-slim .g-hero-value {
    font-size: 22px;
  }

  html.graphite[data-theme] .g-hero-slim .g-hero-legend {
    column-gap: 8px;
  }
}

@media (min-width: 701px) {
  html.graphite[data-theme] .category-tabs {
    margin: 0 0 12px;
    padding: 0;
  }

  html.graphite[data-theme] .g-filter-row {
    margin: 10px 0 0;
    padding: 0;
    flex-wrap: wrap;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  html.graphite[data-theme] .g-hero.g-hero-slim {
    padding: 14px 18px 15px;
  }

  html.graphite[data-theme] .g-hero-slim .g-hero-legend {
    grid-template-columns: repeat(3, auto);
    gap: 0 28px;
  }

  html.graphite[data-theme] .g-hero-slim .g-hero-legend > div {
    display: block;
  }

  html.graphite[data-theme] .g-hero-slim .g-hero-legend b {
    margin-top: 2px;
    font-size: 16px;
    text-align: left;
  }

  html.graphite[data-theme] .g-hero-slim .g-hero-legend div.dim {
    opacity: .5;
  }

  html.graphite[data-theme] .g-hero-slim .g-hero-legend div.dim > * {
    opacity: 1;
  }
}

/* «Статистика»: картка eBay - час оновлення в рядку заголовка, рядки акаунтів нижчі. */
html.graphite[data-theme] .eb-section h2.eb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

html.graphite[data-theme] .eb-head .eb-updated {
  margin: 0;
  color: var(--g-faint);
  font-size: 11.5px;
  font-weight: 600;
}

html.graphite[data-theme] .eb-section .eb-row {
  padding: 9px 0;
}

/* 3DMark: цифри одним рядком, як у «Ринку»; четверта - час оновлення. */
html.graphite[data-theme] .mk-hero.bn-hero .mk-hero-stats {
  display: grid;
  grid-template-columns: none;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

html.graphite[data-theme] .mk-hero.bn-hero .mk-hero-stats > div:last-child:nth-child(4) strong {
  color: var(--g-hero-sub);
  font-weight: 700;
}


/* --- «Гермес» (2026-11-09): перегляд сесій і стану моделей --------------------------- */
html.graphite[data-theme] .hm-machines { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
html.graphite[data-theme] .hm-machine {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--g-line-strong); border-radius: 999px;
  background: var(--g-surface); color: var(--g-soft-text); font-size: 13px; font-weight: 600;
}
html.graphite[data-theme] .hm-machine.active { border-color: var(--g-accent-line); color: var(--g-text); }
html.graphite[data-theme] .hm-machine i { width: 8px; height: 8px; border-radius: 50%; background: var(--g-bad); }
html.graphite[data-theme] .hm-machine.on i { background: var(--g-good); }
html.graphite[data-theme] .hm-list { display: flex; flex-direction: column; gap: 8px; }
html.graphite[data-theme] .hm-row {
  display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 12px 14px; text-align: left;
  border: 1px solid var(--g-line); border-radius: 14px; background: var(--g-surface); color: var(--g-text);
}
html.graphite[data-theme] .hm-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
html.graphite[data-theme] .hm-title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
}
html.graphite[data-theme] .hm-meta { color: var(--g-muted); font-size: 12px; }
html.graphite[data-theme] .hm-running {
  flex: none; padding: 2px 8px; border-radius: 999px; background: var(--g-accent-soft);
  color: var(--g-accent-text); font-size: 11px; font-weight: 700;
}
html.graphite[data-theme] .hm-back { margin: 0 0 10px; }
html.graphite[data-theme] .hm-heading { margin: 0 0 12px; color: var(--g-text); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
html.graphite[data-theme] .hm-chat { display: flex; flex-direction: column; gap: 8px; }
html.graphite[data-theme] .hm-message {
  max-width: 92%; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 14px; background: var(--g-surface);
}
html.graphite[data-theme] .hm-message.user { align-self: flex-end; border-color: var(--g-accent-line); background: var(--g-accent-soft); }
html.graphite[data-theme] .hm-message.assistant { align-self: flex-start; }
html.graphite[data-theme] .hm-text { color: var(--g-text); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
html.graphite[data-theme] .hm-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
html.graphite[data-theme] .hm-text + .hm-tools { margin-top: 8px; }
html.graphite[data-theme] .hm-tools span {
  padding: 2px 7px; border-radius: 7px; background: var(--g-raised); color: var(--g-soft-text);
  font: 500 11px 'JetBrains Mono', monospace;
}
html.graphite[data-theme] .hm-message time { display: block; margin-top: 6px; color: var(--g-faint); font-size: 11px; }

/* --- Розділи всередині «Статистики»: стрілка «назад» поруч із заголовком (2026-11-09) ------- */
html.graphite[data-theme] body:is([data-view='sales'], [data-view^='hermes']) header > div:first-child {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
html.graphite[data-theme] body:is([data-view='sales'], [data-view^='hermes']) header .eyebrow { display: none; }
html.graphite[data-theme] body:is([data-view='sales'], [data-view^='hermes']) #page-title { margin: 0; }
html.graphite[data-theme] .view-up {
  display: inline-grid;
  flex: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--g-text);
  place-items: center;
}
html.graphite[data-theme] .view-up[hidden] { display: none; }

/* Рядок «Продажі» в «Статистиці». */
html.graphite[data-theme] .g-sales-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin: 0 0 6px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-surface);
  color: var(--g-text);
  font-size: 15px;
  font-weight: 750;
  text-align: left;
}
html.graphite[data-theme] .g-sales-link svg:first-child { flex: none; color: var(--g-accent-text); }
html.graphite[data-theme] .g-sales-link span { flex: 1; }
html.graphite[data-theme] .g-sales-link small { color: var(--g-muted); font-size: 13px; font-weight: 650; }
html.graphite[data-theme] .g-sales-link svg:last-child { flex: none; color: var(--g-muted); }

/* === Практичний вигляд (2026-11-10) ========================================================== */
/* «+ Покупка» лише на «Складі»; на телефоні - кнопкою внизу праворуч, під великим пальцем. */
@media (max-width: 700px) {
  html.graphite[data-theme] body[data-view='stock'] header .header-actions #add {
    position: fixed;
    right: 16px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 5;
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    font-size: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  }

  /* Смуга «Вибрано: N» стоїть на тому ж місці. */
  html.graphite[data-theme] body[data-view='stock']:has(#bulk:not([hidden])) #add {
    display: none;
  }
}

/* «Знахідки»: вигода плашкою на фото, зірка й «сховати» - кнопками в рядку ціни. */
html.graphite[data-theme] .kf-media,
html.graphite[data-theme] .kf-media > a,
html.graphite[data-theme] .kf-media img,
html.graphite[data-theme] .kf-media .kf-noimg {
  height: 124px;
}

html.graphite[data-theme] .kf-body {
  gap: 4px;
}

html.graphite[data-theme] .kf-media .kf-pill {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 12px);
  box-sizing: border-box;
  padding: 2px 7px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(11, 14, 16, .82);
  color: var(--g-soft-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html.graphite[data-theme] .kf-media .kf-pill.level-red { color: var(--g-lvl-red-text); }
html.graphite[data-theme] .kf-media .kf-pill.level-orange { color: var(--g-lvl-orange-text); }
html.graphite[data-theme] .kf-media .kf-pill.level-yellow { color: var(--g-lvl-yellow-text); }
html.graphite[data-theme] .kf-media .kf-pill.level-green { color: var(--g-lvl-green-text); }

html.graphite[data-theme] .kf-media .kf-pill.level-green.sure {
  background: var(--g-lvl-green);
  color: #06240f;
}

html.graphite[data-theme] .kf-media .kf-pill.level-green.unsure {
  padding: 1px 6px;
  border: 1.5px solid var(--g-lvl-green);
}

/* Діапазон Vinted («−490…−30 €») - дрібніше, щоб уміщався на фото. */
html.graphite[data-theme] .kf-media .kf-pill.range {
  font-size: 11.5px;
}

html.graphite[data-theme] .kf-media .kf-pill.note {
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 700;
}

html.graphite[data-theme] .kf-bottom {
  align-items: center;
  gap: 6px;
}

html.graphite[data-theme] .kf-bottom .kf-price {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.graphite[data-theme] .kf-row .kf-act,
html.graphite[data-theme] .kf-row .kf-act:hover {
  position: static;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--g-line-strong);
  border-radius: 12px;
  background: none;
  color: var(--g-soft-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.graphite[data-theme] .kf-row .kf-act svg {
  width: 18px;
  height: 18px;
}

html.graphite[data-theme] .kf-row .kf-act.kf-watch.on {
  border-color: rgba(245, 193, 92, .45);
  color: #f5c15c;
}

html.graphite[data-theme] .kf-tag.new {
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
}

html.graphite[data-theme] .kf-section {
  grid-column: 1 / -1;
  margin: 10px 0 -4px;
  color: var(--g-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 20px;
  text-transform: uppercase;
}

/* --- Склад: практичний вигляд (2026-11-10) ------------------------------------------------- */
/* Пошук - значком у шапці; рядок пошуку видно, лише коли він відкритий. */
html.graphite[data-theme] body[data-view='stock']:not(.search-open) .toolbar {
  display: none;
}

html.graphite[data-theme] body[data-view='stock'] .toolbar {
  margin-top: 8px;
}

html.graphite[data-theme] header .header-actions #search-open[aria-pressed='true'] {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
}

/* Скільки чого - числом на вкладці. */
html.graphite[data-theme] .category-tabs button[data-count]:not([data-count=''])::after {
  content: attr(data-count);
  margin-left: 5px;
  color: var(--g-muted);
  font-weight: 650;
}

html.graphite[data-theme] .category-tabs button.active[data-count]:not([data-count=''])::after {
  color: var(--g-accent-text);
}

/* Підсумок - один тонкий рядок замість великої картки. */
html.graphite[data-theme] .g-sumline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 650;
}

html.graphite[data-theme] .g-sumline b {
  color: var(--g-text);
  font-size: 15px;
  font-weight: 800;
}

html.graphite[data-theme] .g-sumline small {
  margin-left: auto;
  font-size: 12px;
}

/* ⇅ - першою фішкою в ряду фільтрів складу. */
html.graphite[data-theme] .g-filter-row .sort {
  position: relative;
  display: inline-flex;
  flex: none;
  order: -1;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--g-line-strong);
  border-radius: 999px;
  background: var(--g-surface);
  color: var(--g-soft-text);
}

html.graphite[data-theme] .g-filter-row .sort.active {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
}

html.graphite[data-theme] .g-filter-row .sort .sort-label {
  display: none;
}

/* Заголовок групи: місце · скільки, праворуч сума. */
html.graphite[data-theme] .g-group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 4px 8px;
  color: var(--g-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 20px;
  text-transform: uppercase;
}

html.graphite[data-theme] .g-group span:last-child {
  color: var(--g-soft-text);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
}

html.graphite[data-theme] #content > .g-group:first-child {
  margin-top: 10px;
}

/* Картка складу з трьох рядків. */
html.graphite[data-theme] .g-stock {
  position: relative;
  display: flex;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-surface);
}

html.graphite[data-theme] .g-stock.selected {
  border-color: var(--g-accent-line);
  box-shadow: inset 0 0 0 1px var(--g-accent-line);
}

html.graphite[data-theme] .g-stock .g-lead {
  flex: none;
  width: 38px;
  height: 38px;
}

html.graphite[data-theme] .g-stock .g-mono {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

html.graphite[data-theme] .g-stock .g-lead .item-check {
  position: relative;
  z-index: 1;
}

html.graphite[data-theme] .g-stock-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

html.graphite[data-theme] .g-row1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

html.graphite[data-theme] .g-stock .model-button {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: var(--g-text);
  font-size: 15px;
  font-weight: 750;
  line-height: 20px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Уся картка - одна велика кнопка «відкрити»; посилання й позначки - поверх неї. */
html.graphite[data-theme] .g-stock .model-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

html.graphite[data-theme] .g-stock.selecting .model-button::after {
  display: none;
}

html.graphite[data-theme] .g-price {
  flex: none;
  color: var(--g-text);
  font-size: 15.5px;
  font-weight: 800;
  white-space: nowrap;
}

html.graphite[data-theme] .g-row2,
html.graphite[data-theme] .g-row3 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 550;
  line-height: 20px;
  white-space: nowrap;
}

html.graphite[data-theme] .g-row2 .g-gpu {
  flex: none;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11.5px;
}

html.graphite[data-theme] .g-specs-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--g-soft-text);
  text-overflow: ellipsis;
}

html.graphite[data-theme] .g-est {
  flex: none;
  color: var(--g-soft-text);
  font-weight: 700;
}

html.graphite[data-theme] .g-row3 .g-age.old {
  color: var(--g-warn);
  font-weight: 750;
}

html.graphite[data-theme] .g-fill {
  flex: 1;
}

html.graphite[data-theme] .g-chip {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--g-surface-2);
  color: var(--g-soft-text);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-decoration: none;
}

html.graphite[data-theme] .g-chip.ok { background: var(--g-accent-soft); color: var(--g-accent-text); }
html.graphite[data-theme] .g-chip.warn { background: var(--g-warn-bg); color: var(--g-warn); }
html.graphite[data-theme] .g-chip.wait { background: var(--g-warn-bg); color: var(--g-lvl-yellow-text); }
html.graphite[data-theme] .g-chip.bad { background: var(--g-warn-bg); color: var(--g-bad); }
html.graphite[data-theme] .g-chip.ebay { background: #182840; color: #8db8ff; }

/* «+ Покупка» внизу не накриває останню картку. */
@media (max-width: 700px) {
  html.graphite[data-theme] body[data-view='stock'] #content {
    padding-bottom: 64px;
  }
}

@media (min-width: 1180px) {
  html.graphite[data-theme] body[data-view='stock'] #content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    align-items: start;
  }

  html.graphite[data-theme] body[data-view='stock'] #content > .g-group,
  html.graphite[data-theme] body[data-view='stock'] #content > .empty {
    grid-column: 1 / -1;
  }
}

/* --- Картка товару - окрема сторінка (практичний вигляд, 2026-11-10) ---------------------- */
html.graphite[data-theme] .g-page-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
}

html.graphite[data-theme] .g-page-head .g-back {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  color: var(--g-text);
}

html.graphite[data-theme] .g-page-head .g-id {
  flex: 1;
  color: var(--g-muted);
  font-size: 14px;
}

html.graphite[data-theme] .g-page-tools .secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 13.5px;
}

html.graphite[data-theme] #detail-body .detail-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

html.graphite[data-theme] .g-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

html.graphite[data-theme] .g-spec-chips > span {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--g-surface-2);
  color: var(--g-soft-text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 20px;
}

html.graphite[data-theme] .g-spec-chips > .g-gpu {
  height: auto;
  font-size: 12.5px;
  font-weight: 800;
}

html.graphite[data-theme] .g-photo-row {
  display: flex;
  gap: 8px;
  margin: 0 -16px 12px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

html.graphite[data-theme] .g-photo-row[hidden] {
  display: none;
}

html.graphite[data-theme] .g-photo-row::-webkit-scrollbar {
  display: none;
}

html.graphite[data-theme] .g-photo-row .photo-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--g-surface-2);
}

html.graphite[data-theme] .g-photo-row .photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.graphite[data-theme] #detail-body .g-tiles {
  margin-bottom: 12px;
}

html.graphite[data-theme] .g-tiles small.g-tile-sub {
  margin-top: 1px;
  color: var(--g-accent-text);
  font-size: 12px;
  font-weight: 700;
}

html.graphite[data-theme] .g-tiles b.old {
  color: var(--g-warn);
}

html.graphite[data-theme] .g-facts {
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-surface);
}

html.graphite[data-theme] .g-fact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--g-line);
}

html.graphite[data-theme] .g-fact:last-child {
  border-bottom: 0;
}

html.graphite[data-theme] .g-fact > div {
  flex: 1;
  min-width: 0;
}

html.graphite[data-theme] .g-fact small {
  display: block;
  color: var(--g-muted);
  font-size: 12px;
  line-height: 16px;
}

html.graphite[data-theme] .g-fact > div > span {
  display: block;
  color: var(--g-text);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 20px;
  overflow-wrap: anywhere;
}

html.graphite[data-theme] .g-fact-soft {
  color: var(--g-soft-text);
  font-weight: 600;
}

html.graphite[data-theme] .g-fact-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--g-faint);
  vertical-align: 1px;
}

html.graphite[data-theme] .g-fact-dot.ok { background: var(--g-accent); }
html.graphite[data-theme] .g-fact-dot.wait { background: var(--g-lvl-yellow); }
html.graphite[data-theme] .g-fact-dot.bad { background: var(--g-bad); }
html.graphite[data-theme] .g-fact-dot.off { background: var(--g-warn); }

html.graphite[data-theme] .g-fact .g-act,
html.graphite[data-theme] .g-fact .g-act:hover {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--g-accent-line);
  border-radius: 11px;
  background: none;
  color: var(--g-accent-text);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

html.graphite[data-theme] #detail-body .detail-actions .primary,
html.graphite[data-theme] #detail-body .detail-actions .secondary {
  flex: 1 1 100%;
  min-height: 52px;
  border-radius: 16px;
  font-size: 16px;
}

/* На телефоні - сторінка на весь екран, а не вікно поверх списку. */
@media (max-width: 700px) {
  html.graphite[data-theme] dialog#detail {
    width: 100%;
    max-width: 100%;
    height: var(--tg-viewport, 100dvh);
    max-height: none;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html.graphite[data-theme] dialog#detail[open] {
    display: flex;
    flex-direction: column;
  }

  html.graphite[data-theme] dialog#detail .g-page-head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -16px;
    padding: 8px 16px 4px;
    background: var(--g-bg);
  }

  html.graphite[data-theme] dialog#detail #detail-body {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }

  html.graphite[data-theme] #detail-body .detail-actions {
    bottom: 0;
    margin: auto -16px 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  }

  html.graphite[data-theme] #detail-body .g-facts {
    margin-bottom: 14px;
  }

  html.graphite.tg-fullscreen[data-theme] dialog#detail .g-page-head {
    padding-top: calc(8px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  }
}

/* --- «Нова покупка»: перемикачі й фішки замість списків (практичний вигляд, 2026-11-10) ---- */
html.graphite[data-theme] .g-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--g-line);
  border-radius: 13px;
  background: var(--g-surface);
}

html.graphite[data-theme] .g-seg-kind {
  margin: 0 0 14px;
}

html.graphite[data-theme] .g-seg label {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

html.graphite[data-theme] .g-seg input,
html.graphite[data-theme] .g-chip-radios input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

html.graphite[data-theme] .g-seg span {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 36px;
  padding: 0 6px;
  overflow: hidden;
  border-radius: 10px;
  color: var(--g-muted);
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

html.graphite[data-theme] .g-seg input:checked + span {
  background: var(--g-raised);
  color: var(--g-text);
  font-weight: 800;
}

html.graphite[data-theme] .g-seg input:focus-visible + span,
html.graphite[data-theme] .g-chip-radios input:focus-visible + span {
  outline: 2px solid var(--g-accent);
  outline-offset: 1px;
}

/* «Валюта» стоїть поруч із сумою - такої ж висоти, як поле. */
html.graphite[data-theme] .g-seg-field,
html.graphite[data-theme] .g-chip-field {
  display: grid;
  gap: 7px;
  align-content: start;
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 650;
}

html.graphite[data-theme] .g-seg-field .g-seg span {
  min-height: 40px;
  font-size: 13px;
}

html.graphite[data-theme] .g-chip-field[hidden] {
  display: none;
}

html.graphite[data-theme] .g-chip-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html.graphite[data-theme] .g-chip-radios label {
  position: relative;
  display: flex;
}

html.graphite[data-theme] .g-chip-radios span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--g-line-strong);
  border-radius: 18px;
  background: var(--g-surface);
  color: var(--g-soft-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

html.graphite[data-theme] .g-chip-radios input:checked + span {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
  font-weight: 800;
}

html.graphite[data-theme] .g-more {
  border-top: 1px solid var(--g-line);
}

html.graphite[data-theme] .g-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--g-soft-text);
  font-size: 13.5px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

html.graphite[data-theme] .g-more summary::-webkit-details-marker {
  display: none;
}

html.graphite[data-theme] .g-more summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

html.graphite[data-theme] .g-more[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

html.graphite[data-theme] .g-more > .form-grid {
  padding-bottom: 6px;
}

/* «Нова покупка» на телефоні - сторінкою на весь екран, як картка товару: ширше, фішки
   вміщаються в рядок; «Далі» - велика кнопка внизу, закрити - хрестиком згори. */
@media (max-width: 700px) {
  html.graphite[data-theme] dialog#purchase {
    width: 100%;
    max-width: 100%;
    height: var(--tg-viewport, 100dvh);
    max-height: none;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Коротка форма (відеокарта, пам'ять) - «Далі» однаково внизу екрана. */
  html.graphite[data-theme] dialog#purchase[open] {
    display: flex;
    flex-direction: column;
  }

  html.graphite[data-theme] #purchase-form {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }

  html.graphite[data-theme] #purchase-form .dialog-actions {
    margin-top: auto;
  }

  html.graphite[data-theme] dialog#purchase > .dialog-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -16px 4px;
    padding: 8px 8px 4px 16px;
    background: var(--g-bg);
  }

  html.graphite.tg-fullscreen[data-theme] dialog#purchase > .dialog-heading {
    padding-top: calc(8px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  }

  html.graphite[data-theme] #purchase-form .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-right: -16px;
    margin-bottom: 0;
    margin-left: -16px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--g-line);
    background: var(--g-bg);
  }

  html.graphite[data-theme] #purchase-form .form-grid + .form-error:empty {
    margin: 0;
  }

  html.graphite[data-theme] #purchase-form .dialog-actions .secondary {
    display: none;
  }

  html.graphite[data-theme] #purchase-form .dialog-actions .primary {
    flex: 1;
    min-height: 52px;
    border-radius: 16px;
    font-size: 16px;
  }
}

/* --- «Статистика»: вкладки й плитки (практичний вигляд, 2026-11-10) ----------------------- */
html.graphite[data-theme] body.view-stats-family .category-tabs:not(.g-view-tabs) {
  display: none;
}

html.graphite[data-theme] .g-view-tabs[hidden] {
  display: none;
}

html.graphite[data-theme] .g-view-tabs button[data-count]::after {
  content: attr(data-count);
  margin-left: 5px;
  color: var(--g-muted);
  font-weight: 650;
}

html.graphite[data-theme] .g-view-tabs button.active[data-count]::after {
  color: var(--g-accent-text);
}

html.graphite[data-theme] header .header-actions .g-kind-select {
  height: 40px;
  border-radius: 12px;
  background: var(--g-surface);
  color: var(--g-text);
  font-size: 14px;
  font-weight: 700;
}

html.graphite[data-theme] header .header-actions .g-kind-select.active {
  border-color: var(--g-accent-line);
  background: var(--g-accent-soft);
  color: var(--g-accent-text);
}

html.graphite[data-theme] .g-kind-select .g-chevron {
  margin-left: 4px;
}

html.graphite[data-theme] .g-kind-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
}

html.graphite[data-theme] body[data-view='purchases'] .toolbar,
html.graphite[data-theme] body[data-view='purchases'] .list-heading,
html.graphite[data-theme] body[data-view='purchases'] #metrics {
  display: none;
}

html.graphite[data-theme] body[data-view='purchases'] #content {
  margin-top: 12px;
}

html.graphite[data-theme] .g-stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

html.graphite[data-theme] .g-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  padding: 10px 10px 9px;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-surface);
  color: var(--g-text);
  text-align: left;
}

html.graphite[data-theme] .g-stat-tile svg {
  margin-bottom: 4px;
  color: var(--g-accent-text);
}

html.graphite[data-theme] .g-stat-tile b {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .g-stat-tile small {
  max-width: 100%;
  overflow: hidden;
  color: var(--g-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.graphite[data-theme] .g-stat-tile.warn {
  border-color: #5a4426;
  background: var(--g-warn-bg);
}

html.graphite[data-theme] .g-stat-tile.warn svg,
html.graphite[data-theme] .g-stat-tile.warn small {
  color: var(--g-warn);
}

/* «Виставити на OLX» у «Продажах» - у ряду пошуку, такої ж висоти. */
html.graphite[data-theme] .toolbar #olx-bulk-open {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--g-soft-text);
}

html.graphite[data-theme] .toolbar #olx-bulk-open[hidden] {
  display: none;
}

/* 3DMark відкривається плиткою «Огляду» - зі стрілкою «назад», як Гермес. */
html.graphite[data-theme] body[data-view='bench'] header > div:first-child {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

html.graphite[data-theme] body[data-view='bench'] header .eyebrow { display: none; }
html.graphite[data-theme] body[data-view='bench'] #page-title { margin: 0; }

/* Підсумок складу - знову карткою (власник, 2026-11-11), але нижчою за колишню. */
html.graphite[data-theme] .g-hero.g-hero-slim.g-hero-mini {
  margin-top: 10px;
  padding: 9px 13px 10px;
  border-radius: 16px;
}

html.graphite[data-theme] .g-hero-mini .g-hero-value {
  font-size: 24px;
  line-height: 1.1;
}

html.graphite[data-theme] .g-hero-mini .g-hero-main small,
html.graphite[data-theme] .g-hero-mini .g-hero-legend small {
  font-size: 11px;
}

html.graphite[data-theme] .g-hero-mini .g-hero-legend {
  row-gap: 1px;
}

html.graphite[data-theme] .g-hero-mini .g-hero-legend b {
  font-size: 12.5px;
}

html.graphite[data-theme] .g-hero-mini .g-hero-bar {
  height: 3px;
  margin-top: 8px;
}