/* PCBuilder — shared UI polish across the main app, guides and utility pages. */
:root {
  --ui-accent: #866213;
  --ui-accent-strong: #866213;
  --ui-accent-wash: rgba(134,98,19,0.11);
  --ui-line: rgba(37,70,126,0.12);
  --ui-line-hover: rgba(134,98,19,0.4);
  --ui-surface: rgba(235,232,224,0.92);
  --ui-surface-raised: #ebe8e0;
  --ui-focus: 0 0 0 3px rgba(12,102,154,0.24);
  --ui-ease-out: cubic-bezier(.23, 1, .32, 1);
  --ui-ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
::selection { color: #efece5; background: #866213; }

a, button, input, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus) !important;
}

button { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ui-ease-out); }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
button:not(:disabled):not(.node):not(.node-remove):active,
a[href]:active,
[role="button"]:active {
  transform: scale(.97);
  transition-duration: 130ms;
}
.node:active { transform: translate(-50%, -50%) scale(.97); transition: transform 130ms var(--ui-ease-out); }
.node-remove:active { transform: translate(25px, 25px) scale(.97); transition: transform 130ms var(--ui-ease-out); }

/* Main navigation and actionable controls */
.studio-nav a, .back-link, .article-back, .back {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  padding: 0 15px;
  background: rgba(13,18,28,0.025);
  color: #29477a;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ui-ease-out);
}
.studio-nav a:hover, .back-link:hover, .article-back:hover, .back:hover {
  color: #0d121c;
  border-color: var(--ui-line-hover);
  background: var(--ui-accent-wash);
  transform: translateY(-1px);
}
.studio-nav .nav-guides { border-color: rgba(134,98,19,0.25); background: var(--ui-accent-wash); color: #866213; }
.studio-nav .nav-build { border-color: rgba(134,98,19,0.28); background: linear-gradient(135deg,rgba(134,98,19,0.16),rgba(134,98,19,0.06)); color: #866213; }

.search-button, .save-build-button, .confirm-save, .confirm-catalog, .apply-filters,
.cookie-accept, .use, .preset-card button, .article-cta a {
  border: 1px solid rgba(134,98,19,0.52) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,#866213,#866213) !important;
  color: #ebe8e0 !important;
  font-weight: 750 !important;
  box-shadow: 0 8px 22px rgba(134,98,19,0.16), inset 0 1px rgba(13,18,28,0.32) !important;
}
.search-button:hover, .save-build-button:hover, .confirm-save:hover, .confirm-catalog:hover,
.apply-filters:hover, .cookie-accept:hover, .use:hover, .preset-card button:hover,
.article-cta a:hover {
  border-color: #866213 !important;
  background: linear-gradient(135deg,#866213,#866213) !important;
  box-shadow: 0 10px 26px rgba(134,98,19,0.24), inset 0 1px rgba(13,18,28,0.42) !important;
  transform: translateY(-1px);
}
.filter-toggle, .favorites-toggle, #clearBtn, .clear-build-button, .build-part-btn,
.compare-build-btn, .favorite-part-btn, .remove-compare, .remove-build,
.close-filters, .dialog-close, .clear-filters, .footer-button,
.mobile-compare-actions > button, .mobile-compare-actions > a,
.saved-build-actions button, .catalog-toggle {
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: rgba(13,18,28,0.035);
  color: #1d273b;
}
.filter-toggle:hover, .favorites-toggle:hover, #clearBtn:hover, .clear-build-button:hover,
.build-part-btn:hover, .compare-build-btn:hover, .favorite-part-btn:hover,
.remove-compare:hover, .remove-build:hover, .close-filters:hover, .dialog-close:hover,
.clear-filters:hover, .footer-button:hover, .mobile-compare-actions > button:hover,
.mobile-compare-actions > a:hover, .saved-build-actions button:hover {
  border-color: var(--ui-line-hover);
  background: var(--ui-accent-wash);
  color: #0d121c;
}
.affiliate-link, .amazon-link { transition: transform 150ms var(--ui-ease-out), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.affiliate-link:hover, .amazon-link:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(134,98,19,0.12); }

/* Inputs feel related to the buttons and expose a clear active state. */
.part-search, .filter-field select, input, select, textarea {
  accent-color: var(--ui-accent);
}
.part-search:hover, .filter-field select:hover, input:hover, select:hover, textarea:hover { border-color: rgba(41,74,122,0.24); }
.part-search:focus, .filter-field select:focus, input:focus, select:focus, textarea:focus {
  border-color: rgba(134,98,19,0.64) !important;
}

/* Cards and panels share a calmer edge and a small lift on hover. */
.visual-panel, .selection-panel, .compare-panel, .build-panel,
.guide-card, .article-body, .card, .status, .empty-state {
  backdrop-filter: blur(14px);
}
.guide-card, .preset-card, .saved-build-card, .mobile-compare-card, #cardsGrid .part-card, .card {
  transition: transform 180ms var(--ui-ease-out), border-color 160ms ease, background-color 160ms ease, box-shadow 180ms ease;
}
.guide-card { position: relative; overflow: hidden; }
.guide-card::after {
  content: "";
  position: absolute;
  inset: auto -25% -80% 35%;
  height: 150px;
  pointer-events: none;
  background: radial-gradient(ellipse,rgba(134,98,19,0.09),transparent 68%);
}
.guide-card .read { display: inline-flex; align-items: center; gap: 8px; }
.guide-card .read::after { content: "↗"; transition: transform 160ms var(--ui-ease-out); }

.article-page, .guides-page { padding-inline: clamp(14px, 2.5vw, 28px); }
.article-top, .guides-top { position: sticky; top: 0; z-index: 20; background: rgba(246,244,239,0.78); backdrop-filter: blur(18px); }
.article-actions { display: flex; align-items: center; gap: 9px; }
.article-cta a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; text-decoration: none; }
.article-footer { border-top: 1px solid var(--ui-line); padding-top: 15px; }

/* Utility pages use the same surfaces and accent instead of their older red theme. */
.shell { max-width: 1500px !important; }
.top { padding: 16px 0 20px; border-bottom: 1px solid var(--ui-line); }
.brand { letter-spacing: -.05em; }
.brand span { color: var(--ui-accent-strong) !important; }
.intro { padding: 34px 0 10px; }
.intro h1 { font-family: Sora, Manrope, sans-serif; letter-spacing: -.06em; }
.intro p { font-family: Manrope, sans-serif; }
.group { margin-top: 28px; }
.group-title h2 { font-family: Sora, Manrope, sans-serif; letter-spacing: -.035em; }
.card { border-color: var(--ui-line) !important; background: linear-gradient(145deg,#ebe8e0,#eeebe4) !important; border-radius: 18px !important; }
.tag { color: #187951 !important; }
.price { color: #866213 !important; }

body:has(> main) { background: radial-gradient(ellipse at 12% 0%,#ebe8e0 0,transparent 40%),#f6f4ef !important; }
body > main {
  width: min(820px,calc(100% - 32px)) !important;
  margin: clamp(20px,5vh,58px) auto !important;
  padding: clamp(22px,5vw,42px) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg,rgba(236,232,223,0.97),rgba(242,240,234,0.98)) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.122), inset 0 1px rgba(13,18,28,0.035) !important;
}
body > main > a { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: 24px; padding: 0 13px; border: 1px solid var(--ui-line); border-radius: 11px; color: #29457a; background: rgba(13,18,28,0.035); text-decoration: none; }
body > main > a:hover { border-color: var(--ui-line-hover); color: #0d121c; background: var(--ui-accent-wash); }
body > main h1, body > main h2 { font-family: Sora, Manrope, sans-serif; letter-spacing: -.045em; }
body > main h2 { margin-top: 30px; }
body > main p { line-height: 1.8; }
body > main .note { border-left-color: var(--ui-accent); border-radius: 0 12px 12px 0; background: var(--ui-accent-wash); }

@media (max-width: 700px) {
  .article-top, .guides-top { gap: 10px; }
  .article-actions { align-items: stretch; gap: 6px; }
  .article-back, .back-link { min-height: 40px; padding-inline: 10px; font-size: .65rem; white-space: nowrap; }
  .guide-card { min-height: 160px; }
  .group-title { gap: 8px; }
  body > main { width: calc(100% - 20px) !important; margin: 10px auto !important; padding: 21px !important; border-radius: 17px !important; }
}
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover, .preset-card:hover, .saved-build-card:hover, .mobile-compare-card:hover, .card:hover {
    border-color: var(--ui-line-hover);
    box-shadow: 0 14px 35px rgba(0,0,0,0.084), inset 0 1px rgba(13,18,28,0.035);
    transform: translateY(-2px);
  }
  .guide-card:hover .read::after { transform: translate(2px,-2px); }
}
@media (hover: none) {
  .studio-nav a:hover, .back-link:hover, .article-back:hover, .back:hover,
  .affiliate-link:hover, .amazon-link:hover,
  .guide-card:hover, .preset-card:hover, .saved-build-card:hover,
  .mobile-compare-card:hover, #cardsGrid .part-card:hover, .card:hover {
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .brand-mark::before, .brand-mark img, .wheel-incompatibility.visible, .node.has-build-part .node-build-status { animation: none !important; }
  button, a[href], [role="button"], .guide-card, .preset-card, .saved-build-card, .mobile-compare-card, #cardsGrid .part-card, .card {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease !important;
  }
  button:active, a[href]:active, [role="button"]:active { transform: none !important; }
}

/* Logo nova (traço fino dourado): sem filtros RGB nem brilho da logo antiga. */
.brand-mark::before { display:none !important; }
.brand-mark img, .guides-brand img, .article-brand img { filter:none !important; animation:none !important; mix-blend-mode:normal !important; object-fit:contain; }
.brand { cursor:pointer; }