/* Страница товара: дружелюбнее «админской» — цвет по смыслу, значки, плитки вместо таблиц.
   Цвета задач: игры — фиолетовый, монтаж — бирюзовый, нейросети — янтарный, офис — синий. */
/* цвета и тени — в ui.css (общие для всего сайта) */
body.is-product { background: linear-gradient(180deg, #eef1f8 0, #f5f6f9 420px); }
html.theme-dark body.is-product { background: #0b0c0f; }
.pd { max-width: 1040px; margin: 0 auto; padding: 18px 16px 48px; color: var(--c-ink); }
.pd .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* шапка товара: цветная подложка по производителю и рисунок детали */
.pd-hero { position: relative; display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 30px; overflow: hidden;
  color: #fff; background: linear-gradient(135deg, #5b6170, #2b2f38); box-shadow: var(--sh); }
.pd-hero--nvidia { background: radial-gradient(120% 140% at 100% 0, #9be15d 0, transparent 45%), linear-gradient(135deg, #0f7a5a 0, #123a44 70%); }
.pd-hero--amd { background: radial-gradient(120% 140% at 100% 0, #ff9a5a 0, transparent 45%), linear-gradient(135deg, #c8312f 0, #3d1420 75%); }
.pd-hero--intel { background: radial-gradient(120% 140% at 100% 0, #66c6ff 0, transparent 45%), linear-gradient(135deg, #1f5fd1 0, #142a5c 75%); }
.pd-hero .crumbs { color: rgba(255, 255, 255, .65); font-size: 13px; margin: 0 0 14px; }
.pd-hero .crumbs a { color: rgba(255, 255, 255, .85); }
.pd-kind { display: inline-block; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 600; letter-spacing: .2px; }
.pd-hero h1 { margin: 10px 0 14px; font-size: 46px; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 13.5px; backdrop-filter: blur(6px); }
.pd-chips span.warn { background: #ffd56a; color: #4a3300; font-weight: 600; }
.pd-chips .ic { width: 15px; height: 15px; }
.pd-art svg { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.pd-art .a-body { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.pd-art .a-fan { fill: rgba(0, 0, 0, .25); stroke: rgba(255, 255, 255, .6); stroke-width: 2; }
.pd-art .a-legs { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 3; stroke-linecap: round; }
.pd-art .a-blades { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 3; stroke-linecap: round; }
.pd-art .a-pins { fill: #ffd56a; } .pd-art .a-plug { fill: rgba(255, 255, 255, .5); }
/* вентиляторы крутит app.js: плавный разгон при наведении и плавная остановка */
.a-blades path { transform-box: fill-box; transform-origin: center; }

/* цены */
.pd-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 18px; }
.pp-tile { position: relative; padding: 18px 20px 18px 66px; border-radius: 22px; background: var(--c-card); box-shadow: var(--sh); }
.pp-tile > i { position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; }
.pp-tile small { display: block; color: var(--c-mut); font-size: 13px; }
.pp-tile b { display: block; margin: 2px 0; font-size: 26px; letter-spacing: -.5px; }
.pp-tile span { color: var(--c-mut); font-size: 13px; }
.pp-new > i { background: var(--c-office-bg); color: var(--c-office); }
.pp-used > i { background: var(--c-good-bg); color: var(--c-good); }
.pp-trend > i { background: var(--c-soft); color: var(--c-mut); }
.pp-trend.down b { color: var(--c-good); } .pp-trend.up b { color: var(--c-bad); }
.pp-trend.down > i { background: var(--c-good-bg); color: var(--c-good); } .pp-trend.up > i { background: var(--c-bad-bg); color: var(--c-bad); }
.pd-verdict { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 13px 16px; border-radius: 16px; background: var(--c-good-bg); color: var(--c-ink); font-size: 14.5px; line-height: 1.45; }
.pd-verdict .ic { color: var(--c-good); margin-top: 1px; }
.pd-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }

/* оглавление — липкое */
.pd-toc { position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; margin: 22px -4px 0; padding: 8px 4px; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(245, 246, 249, .96), rgba(245, 246, 249, .9)); backdrop-filter: blur(10px); border-radius: 16px; }
html.theme-dark .pd-toc { background: rgba(11, 12, 15, .9); }
.pd-toc::-webkit-scrollbar { display: none; }
.pd-toc a { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--c-card); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); color: var(--c-ink); font-size: 13.5px; font-weight: 500; }
html.theme-dark .pd-toc a { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pd-toc a:hover { text-decoration: none; background: var(--c-office-bg); color: var(--c-office); }

/* разделы */
.pd-sec { margin-top: 22px; padding: 26px 28px; border-radius: 26px; background: var(--c-card); box-shadow: var(--sh); scroll-margin-top: 120px; }
.pd-sec h2 { margin: 0 0 16px; font-size: 21px; letter-spacing: -.3px; }
.pd-sec h3 { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: 16px; }
.pd-sec h3 .ic { color: var(--c-office); }
.pd-sub { margin: -6px 0 14px; color: var(--c-mut); font-size: 14px; }
.pd-sec h3 + .pd-sub { margin-top: -6px; }
.pd-note, .pd-alert { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 15px; border-radius: 14px; background: var(--c-soft); color: var(--c-mut); font-size: 14px; line-height: 1.45; }
.pd-alert { margin: 0 0 14px; background: #fff6dd; color: #5a4300; }
html.theme-dark .pd-alert { background: rgba(255, 196, 0, .12); color: #f3d98c; }
.pd-note .ic, .pd-alert .ic { margin-top: 1px; }
.pd-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; }

/* для чего подходит */
.purp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.purp { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: var(--bgc); }
.purp > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--fg); color: #fff; margin-bottom: 4px; }
.purp > i .ic { width: 21px; height: 21px; }
.purp b { font-size: 16px; }
.purp p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--c-ink); }
.purp .meter { display: flex; gap: 4px; }
.purp .meter em { width: 22px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .1); }
html.theme-dark .purp .meter em { background: rgba(255, 255, 255, .14); }
.purp .meter em.on { background: var(--fg); }
.purp--games { --fg: var(--c-games); --bgc: var(--c-games-bg); }
.purp--work { --fg: var(--c-work); --bgc: var(--c-work-bg); }
.purp--ai { --fg: var(--c-ai); --bgc: var(--c-ai-bg); }
.purp--office { --fg: var(--c-office); --bgc: var(--c-office-bg); }

/* где купить */
.pd-offers { display: flex; flex-direction: column; gap: 8px; }
.pd-offer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 16px; background: var(--c-soft); color: var(--c-ink); }
.pd-offer:hover { text-decoration: none; background: var(--c-office-bg); }
.po-t { font-size: 14.5px; line-height: 1.35; } .po-t small { display: block; margin-top: 3px; }
.po-s { color: var(--c-mut); font-size: 13px; white-space: nowrap; }
.po-p { font-size: 17px; white-space: nowrap; }
.pd-sec .pd-sub:not(:first-child) { margin-top: 18px; }
.pd-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pd-shops a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--c-soft); color: var(--c-ink); }
.pd-shops a:hover { text-decoration: none; background: var(--c-office-bg); }
.pd-shops small { color: var(--c-mut); font-size: 12.5px; }

/* игры */
.pd-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.pd .gtab th { color: var(--c-mut); }
.pd .gtab td { border-bottom-color: rgba(0, 0, 0, .05); }
html.theme-dark .pd .gtab td { border-bottom-color: rgba(255, 255, 255, .06); }
.pd .gtab tbody tr:hover td { background: var(--c-soft); }
.pd .gtab td:first-child { font-weight: 500; }

/* шкала видеопамяти */
.vscale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.vs { position: relative; padding: 14px 14px 16px; border-radius: 18px; background: var(--c-soft); border-top: 5px solid rgba(0, 0, 0, .08); }
.vs.past { border-top-color: rgba(124, 92, 255, .35); }
.vs.on { background: var(--c-games-bg); border-top-color: var(--c-games); box-shadow: inset 0 0 0 2px var(--c-games); }
.vs b { display: block; font-size: 19px; letter-spacing: -.3px; }
.vs em { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--c-games); color: #fff; font-style: normal; font-size: 12px; font-weight: 600; }
.vs p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--c-mut); }
.vs.on p { color: var(--c-ink); }

/* совместимость */
.cgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.crow { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--c-soft); }
.crow > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--c-card); color: var(--c-office); box-shadow: var(--sh); }
.crow small { display: block; color: var(--c-mut); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.crow p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; }
.pd .psu-check { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--c-office-bg); }
.pd-more { margin: 12px 0 0; font-size: 14.5px; }
.pd-pairs { margin-top: 6px; }
.pair-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pair-row a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--c-soft); color: var(--c-ink); }
.pair-row a:hover { text-decoration: none; background: var(--c-office-bg); }
.pair-row span { color: var(--c-mut); font-size: 13.5px; white-space: nowrap; }

/* слабые места */
.pd-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-notes li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 14px; background: #fff7e6; font-size: 14px; line-height: 1.45; }
html.theme-dark .pd-notes li { background: rgba(255, 196, 0, .08); }
.pd-notes .ic { color: #c98500; margin-top: 1px; }

/* аналоги */
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.an { display: flex; flex-direction: column; gap: 4px; padding: 15px 16px; border-radius: 18px; background: var(--c-soft); color: var(--c-ink); transition: transform .15s, background .15s; }
.an:hover { text-decoration: none; background: var(--c-office-bg); transform: translateY(-2px); }
.an b { font-size: 16px; } .an small { color: var(--c-mut); font-size: 13px; }
.an .pm { margin: 8px 0 0; }

/* проверка б/у: шаги с номерами */
.steps { list-style: none; counter-reset: st; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.steps li { counter-increment: st; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--c-soft); font-size: 14.5px; line-height: 1.45; }
.steps li::before { content: counter(st); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-office); color: #fff; font-size: 13px; font-weight: 700; }

/* почитать */
.pd-reads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.pd-reads a { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--c-soft); color: var(--c-ink); }
.pd-reads a:hover { text-decoration: none; background: var(--c-office-bg); }
.pd-reads small { display: flex; align-items: center; gap: 6px; color: var(--c-mut); font-size: 12.5px; }
.pd-reads small .ic { width: 15px; height: 15px; }
.pd-reads b { font-size: 14.5px; line-height: 1.4; font-weight: 600; }
.pd-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--c-soft); color: var(--c-ink); font-size: 13.5px; }
.pd-links a:hover { text-decoration: none; background: var(--c-office-bg); color: var(--c-office); }
.pd-links .ic { width: 16px; height: 16px; color: var(--c-office); }

.pd .faq details { border-bottom-color: rgba(0, 0, 0, .06); }
.pd .faq summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pd .faq summary::after { content: '+'; color: var(--c-office); font-size: 20px; line-height: 1; }
.pd .faq details[open] summary::after { content: '−'; }
.pd .faq p { color: var(--c-mut); }

@media (max-width: 860px) {
  .pd-hero { grid-template-columns: 1fr; padding: 22px 20px; }
  .pd-art { display: none; }
  .pd-hero h1 { font-size: 34px; }
  .purp-grid, .cgrid, .pd-reads { grid-template-columns: 1fr; }
  .vscale { grid-template-columns: 1fr; }
  .vs { border-top: 0; border-left: 5px solid rgba(0, 0, 0, .08); }
  .vs.on { border-left-color: var(--c-games); }
  .pd-two { grid-template-columns: 1fr; gap: 20px; }
  .pd-sec { padding: 20px 18px; border-radius: 22px; }
  .pd-offer { grid-template-columns: 1fr auto; } .po-s { grid-column: 1; grid-row: 2; }
  .pd-toc { top: 56px; }
}
@media (max-width: 600px) {
  .pp-tile { padding: 14px; } .pp-tile > i { position: static; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 10px; }
  .pp-tile b { font-size: 20px; } .pp-tile span { font-size: 12px; }
}

/* каталоги деталей (parts.php): шапка в цвете категории, фильтры-чипы, «как выбрать» */
.pd-hero--cat { grid-template-columns: 1fr; }
.pd-hero--games { background: radial-gradient(120% 140% at 100% 0, #b9a6ff 0, transparent 45%), linear-gradient(135deg, #6a4cf0 0, #2b1f63 75%); }
.pd-hero--office { background: radial-gradient(120% 140% at 100% 0, #8fb4ff 0, transparent 45%), linear-gradient(135deg, #2f6bff 0, #18306f 75%); }
.pd-hero--work { background: radial-gradient(120% 140% at 100% 0, #7fe3d3 0, transparent 45%), linear-gradient(135deg, #0f9f8f 0, #0f3d3a 75%); }
.pd-hero--ai { background: radial-gradient(120% 140% at 100% 0, #ffd27a 0, transparent 45%), linear-gradient(135deg, #e08a00 0, #5a3300 75%); }
.pd-kind .ic { width: 14px; height: 14px; vertical-align: -2px; }
.pd-lead { margin: 0; max-width: 640px; color: rgba(255, 255, 255, .85); font-size: 16px; line-height: 1.45; }
.pd-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-how li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--c-soft); font-size: 14.5px; line-height: 1.45; }
.pd-how .ic { color: var(--c-good); margin-top: 1px; }
.an .an-p { margin-top: 6px; font-size: 18px; font-weight: 700; }
.an > small:first-child { color: var(--c-office); font-weight: 600; }
.pf { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; background: var(--c-soft); }
.pf-g { display: flex; flex-direction: column; gap: 6px; }
.pf-g small { color: var(--c-mut); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.pf-g > div { display: flex; flex-wrap: wrap; gap: 6px; }
.pf button { padding: 7px 13px; border: 0; border-radius: 999px; background: var(--c-card); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); color: var(--c-ink); font: 500 13.5px var(--text); cursor: pointer; }
html.theme-dark .pf button { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pf button:hover { background: var(--c-office-bg); }
.pf button.on { background: var(--c-office); color: #fff; box-shadow: none; }
.pf-q { flex: 1 1 200px; }
.pf-q input { width: 100%; box-sizing: border-box; padding: 8px 13px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; background: var(--c-card); color: var(--c-ink); font: 14px var(--text); }
html.theme-dark .pf-q input { border-color: rgba(255, 255, 255, .14); }
.po-t small { color: var(--c-mut); font-size: 12.5px; }
.po-trust { color: var(--c-good); font-weight: 600; }
.pf-more { margin-top: 12px; }
.pf-more[hidden] { display: none; }
.pd-offer[hidden] { display: none; }
.pd-cta-sec { text-align: center; }

/* готовые сборки: состав списком со значками, итог, карточки бюджетов */
.sb-list { display: flex; flex-direction: column; gap: 8px; }
.sb-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--c-soft); }
.sb-row > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--c-card); color: var(--c-office); box-shadow: var(--sh); }
.sb-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-t small { color: var(--c-mut); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.sb-t b { font-size: 15px; line-height: 1.35; } .sb-t b a { color: var(--c-ink); } .sb-t b a:hover { color: var(--c-office); }
.sb-t span { color: var(--c-mut); font-size: 13px; }
.sb-p { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sb-p b { font-size: 16px; white-space: nowrap; } .sb-p a { font-size: 13px; white-space: nowrap; }
.sb-total { grid-template-columns: 1fr auto; background: var(--c-office-bg); }
.sb-total .sb-p b { font-size: 22px; }
.sb-card { border-top: 4px solid var(--c-office); }
.sb-card--games { border-top-color: var(--c-games); } .sb-card--work { border-top-color: var(--c-work); } .sb-card--ai { border-top-color: var(--c-ai); }
@media (max-width: 600px) { .sb-row { grid-template-columns: 1fr auto; } .sb-row > i { display: none; } .sb-total { grid-template-columns: 1fr auto; } }
/* страница игры: строки целей, две сборки рядом */
.sg-list { display: flex; flex-direction: column; gap: 10px; }
.sg-row { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 10px; align-items: stretch; }
.sg-h { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--c-games-bg); }
.sg-h small { color: var(--c-mut); font-size: 12.5px; }
.sg-b { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px; background: var(--c-soft); color: var(--c-ink); }
a.sg-b:hover { text-decoration: none; background: var(--c-office-bg); }
.sg-b small { color: var(--c-mut); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.sg-b b { font-size: 15px; } .sg-b span { color: var(--c-mut); font-size: 13.5px; } .sg-b em { font-style: normal; color: var(--c-office); font-size: 13px; }
.sg-same { justify-content: center; }
@media (max-width: 760px) { .sg-row { grid-template-columns: 1fr; } }

/* сравнение пары: две карточки рядом, таблица «для чего подходит» */
.sr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.sr-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 22px; background: var(--c-card); box-shadow: var(--sh); color: var(--c-ink); border-top: 5px solid #8a8f99; }
.sr-card:hover { text-decoration: none; transform: translateY(-2px); }
.sr-card--nvidia { border-top-color: #4caf50; } .sr-card--amd { border-top-color: #e53935; } .sr-card--intel { border-top-color: #2f6bff; }
.sr-card > small { color: var(--c-mut); font-size: 12.5px; font-weight: 600; }
.sr-card > b { font-size: 24px; letter-spacing: -.3px; } .sr-card > span { color: var(--c-mut); font-size: 14px; }
.sr-pr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.sr-pr > div { padding: 10px 12px; border-radius: 14px; background: var(--c-soft); } .sr-pr small { display: block; color: var(--c-mut); font-size: 12px; } .sr-pr b { font-size: 15px; }
.sr-card em { font-style: normal; color: var(--c-office); font-size: 13.5px; }
.sr-tab td { vertical-align: top; } .sr-tab td small { display: block; margin-top: 6px; color: var(--c-ink); font-size: 13px; line-height: 1.4; white-space: normal; }
.sr-m { display: flex; gap: 4px; } .sr-m em { width: 18px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .1); }
html.theme-dark .sr-m em { background: rgba(255, 255, 255, .14); }
.sr-m--games em.on { background: var(--c-games); } .sr-m--work em.on { background: var(--c-work); } .sr-m--ai em.on { background: var(--c-ai); } .sr-m--office em.on { background: var(--c-office); }
@media (max-width: 760px) { .sr-two { grid-template-columns: 1fr; } }
/* пресс-фото модели в шапке: карта/процессор на прозрачном фоне поверх градиента */
.pd-art--photo { position: relative; display: grid; justify-items: center; align-content: center; }
.pd-art--photo img { width: 100%; max-width: 260px; aspect-ratio: 3 / 2; height: auto; object-fit: contain; border-radius: 20px; background: #fff; box-shadow: 0 18px 36px rgba(0, 0, 0, .35); }
.pd-art--photo small { position: absolute; right: 0; bottom: -14px; font-size: 11px; color: rgba(255, 255, 255, .55); }
@media (max-width: 700px) { .pd-art--photo img { max-width: 220px; } .pd-art--photo small { position: static; margin-top: 6px; } }

/* рисунок модели в шапке (art-lib.php): без плашки и фона, с тенью */
.pd-hero:has(.pd-art--draw) { grid-template-columns: 1fr 340px; }
.pd-art--draw { display: grid; place-items: center; }
.pd-art--draw svg { width: 100%; height: auto; max-height: 230px; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .45)) drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.is-cpu .pd-art--draw svg, .pd-art--draw svg[viewBox="0 0 240 240"] { max-width: 220px; }
@media (max-width: 860px) { .pd-hero:has(.pd-art--draw) { grid-template-columns: 1fr; } .pd-art.pd-art--draw { display: grid; } .pd-art--draw svg { max-width: 300px; max-height: 170px; } }
/* рисунок модели: при наведении рисунок чуть приподнимается, вентиляторы плавно разгоняются и выбегом останавливаются (app.js); блик — один раз при открытии (art-lib) */
.pd-art--draw svg { transition: transform 1.1s cubic-bezier(.45, 0, .25, 1); will-change: transform; }
.pd-art--draw:hover svg { transform: translateY(-7px); }
@media (prefers-reduced-motion: reduce) { .art-glint { display: none; } .pd-art--draw:hover svg { transform: none; } }

/* образец отчёта о проверке видеокарты (otchet.php) */
.rp { --rp-warn: #b86e00; --rp-warn-bg: #fff3dc; }
html.theme-dark .rp { --rp-warn: #f0b44c; --rp-warn-bg: rgba(240, 180, 76, .14); }
.rp-verdict { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; }
.rp-verdict .ic { width: 28px; height: 28px; flex: none; }
.rp-verdict b { display: block; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.rp-verdict span { display: block; margin-top: 4px; font-size: 15px; color: var(--c-ink); opacity: .8; }
.rp-verdict--ok { background: var(--c-good-bg); color: var(--c-good); }
.rp-verdict--warn { background: var(--rp-warn-bg); color: var(--rp-warn); }
.rp-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.rp-meta div { padding: 12px 14px; border-radius: 14px; background: var(--c-soft); }
.rp-meta dt { font-size: 12.5px; color: var(--c-mut); }
.rp-meta dd { margin: 3px 0 0; font-weight: 600; font-size: 15px; }
.rp-meta dd small { display: block; font-weight: 400; font-size: 12.5px; color: var(--c-mut); }
.rp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-rows li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; background: var(--c-soft); }
.rp-rows b { display: block; font-size: 15px; }
.rp-rows li span:not(.rp-tag) { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--c-mut); }
.rp-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; min-width: 78px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.rp-tag .ic { width: 14px; height: 14px; }
.rp-ok .rp-tag { background: var(--c-good-bg); color: var(--c-good); }
.rp-warn .rp-tag { background: var(--rp-warn-bg); color: var(--rp-warn); }
.rp-bad .rp-tag { background: var(--c-bad-bg); color: var(--c-bad); }
.rp-warn { box-shadow: inset 0 0 0 1.5px var(--rp-warn); }
.rp-mine { margin: 0 0 8px; padding: 14px 16px; border-radius: 14px; background: var(--c-soft); font-size: 16px; }
.rp-soon { margin-top: 18px; padding: 18px 20px; border-radius: 18px; border: 1.5px dashed var(--c-mut); }
.rp-soon b { display: block; font-size: 16px; }
.rp-soon span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--c-mut); }
@media (max-width: 860px) { .rp-meta { grid-template-columns: 1fr 1fr; } .rp-rows li { flex-direction: column; gap: 8px; } .rp-verdict b { font-size: 19px; } }
.rp-print { margin-top: 14px; }

/* сравнения: выбор двух моделей, поиск, строки по моделям */
.sr-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 18px; padding: 20px 22px; border-radius: 24px; background: var(--c-card); box-shadow: var(--sh); }
.sr-pick label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c-mut); font-weight: 600; }
.sr-pick select { height: 48px; padding: 0 40px 0 14px; border-radius: 14px; border: 1px solid transparent; background-color: var(--c-soft); color: var(--c-ink); font: 600 15.5px var(--text, inherit); }
.sr-pick .btn { height: 48px; }
.sr-vs { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 2px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5260, #22262e 55%, #0d0f12); color: #fff; font: 700 13px Unbounded, var(--text, sans-serif); letter-spacing: -.3px; border: 3px solid #b9bec5; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .15); }
.sr-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.sr-sec-h h2 { margin: 0; }
.sr-q { flex: 0 1 300px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid transparent; background: var(--c-soft); color: var(--c-ink); font: 15px var(--text, inherit); }
.sr-q:focus, .sr-pick select:focus { outline: none; border-color: var(--s, #3b4ce0); }
.sr-rows { display: grid; gap: 8px; }
.sr-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--s, #3b4ce0) 6%, var(--c-card)); }
.sr-row[hidden] { display: none; }
.sr-m { display: flex; align-items: center; gap: 12px; color: var(--c-ink); text-decoration: none; }
.sr-m b { font-size: 15.5px; }
.sr-m:hover b { color: var(--s, #3b4ce0); }
.sr-vs-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-vs-list a { padding: 6px 12px; border-radius: 999px; background: var(--c-card); color: var(--c-ink); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.sr-vs-list a small { color: var(--c-mut); font-weight: 500; }
.sr-vs-list a:hover { background: var(--s, #3b4ce0); color: #fff; } .sr-vs-list a:hover small { color: rgba(255, 255, 255, .8); }
.sr-none { margin: 10px 0 0; color: var(--c-mut); }
@media (max-width: 760px) {
  .sr-pick { grid-template-columns: 1fr; } .sr-vs { justify-self: center; margin: -4px 0; }
  .sr-row { grid-template-columns: 1fr; gap: 8px; } .sr-q { flex-basis: 100%; }
}
/* 01.11.2026: пустые клетки в сетке готовых сборок — собранный компьютер и приглашение в конструктор */
.sb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-fill { grid-column: span var(--rest); display: flex; align-items: center; gap: 14px; min-height: 100%; padding: 12px 18px 12px 8px; border-radius: 18px;
  background: linear-gradient(135deg, #171b2b, #0c0f1a); color: #fff; overflow: hidden; }
.sb-fill:hover { text-decoration: none; filter: brightness(1.08); }
.sb-fill-art { flex: none; width: 128px; }
.sb-fill-art svg { display: block; width: 100%; height: auto; }
.sb-fill-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sb-fill-tx b { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; }
.sb-fill-tx span { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.sb-fill-tx em { font-style: normal; font-weight: 700; font-size: 14.5px; margin-top: 2px; color: #b9acff; }
.sb-fill--work .sb-fill-tx em { color: #6fe3d2; } .sb-fill--office .sb-fill-tx em { color: #a9c0ff; } .sb-fill--ai .sb-fill-tx em { color: #ffc867; }
.sb-fill--work { background: linear-gradient(135deg, #10241f, #0a1412); } .sb-fill--ai { background: linear-gradient(135deg, #2a1f0e, #140f07); }
.sb-fill--narrow { flex-direction: column; text-align: center; padding: 12px; }
@media (max-width: 760px) { .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb-fill { grid-column: 1 / -1; } }
@media (max-width: 460px) { .sb-grid { grid-template-columns: 1fr; } .sb-fill-art { width: 104px; } }