/* ============================================================
   ABSTRICT · Design v5 Overhaul
   Appended via <link> AFTER styles.css so it wins the cascade
   without touching the original. Activates globally.
   ============================================================= */

:root {
  /* === Refined Palette · "Cyber-Industrial" === */
  --bg:           #f5f5f7;
  --bg-alt:       #ececef;
  --bg-warm:      #f0eee9;
  --surface:      #ffffff;
  --border:       #d4d4d8;
  --border-subtle:#e4e4e7;
  --text:         #09090b;
  --text-secondary:#52525b;
  --text-muted:   #a1a1aa;
  --accent:       #6d28d9;          /* electric violet */
  --accent-hover: #5b21b6;
  --accent-soft:  rgba(109,40,217,.08);
  --danger:       #e11d48;
  --success:      #059669;
  --warning:      #d97706;
  --teal:         #0891b2;
  --stamp:        #b91c1c;
  --shimmer:      linear-gradient(90deg,
                   rgba(0,0,0,0) 0%,
                   rgba(109,40,217,.08) 50%,
                   rgba(0,0,0,0) 100%);

  /* === Typography v5 === */
  --font:         'Inter Tight', 'Inter', -apple-system, sans-serif;
  --mono:         'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --type-xs:      11px;
  --type-sm:      12px;
  --type-base:    13px;
  --type-md:      14px;
  --type-lg:      16px;
  --type-xl:      20px;
  --type-2xl:     28px;
  --type-3xl:     36px;
  --lh-tight:     1.25;
  --lh-base:      1.5;

  /* === 4px-base Spacing === */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;
  --space-9: 64px;

  /* === Sharper Radii === */
  --radius:   4px;
  --radius-lg:6px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(9,9,11,.04);
  --shadow-sm: 0 1px 3px rgba(9,9,11,.06), 0 1px 2px rgba(9,9,11,.04);
  --shadow:    0 4px 16px rgba(9,9,11,.05), 0 1px 4px rgba(9,9,11,.03);
  --shadow-md: 0 8px 24px rgba(9,9,11,.08), 0 2px 8px rgba(9,9,11,.04);
  --shadow-lg: 0 16px 36px rgba(9,9,11,.10), 0 4px 12px rgba(9,9,11,.06);

  /* === Easing — refined spring curves === */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.175,.885,.32,1.275);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

body {
  font-family: var(--font);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  background: var(--bg);
  background-image: radial-gradient(circle at 20% 0%, rgba(109,40,217,.04), transparent 50%),
                    radial-gradient(circle at 80% 100%, rgba(217,119,6,.04), transparent 50%);
  background-attachment: fixed;
}

/* tabular numbers everywhere for prices/specs */
.card-price, .perf-num, .total-value, .perf-bar-fill, .spec-val,
.workload-value, .wattage-total, .budget-amt, .elec-amount, .price {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'cv11', 'tnum';
}

/* === Wider Sidebar · breathing layout === */
.builder {
  grid-template-columns: 380px 1fr;
  max-width: 1440px;
}
.sidebar {
  width: 380px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--border);
  padding: var(--space-6);
}
body.dark .sidebar {
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border-right-color: var(--border);
}

/* === Picker head: sticky toolbar === */
.picker-head {
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 50;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.picker-title {
  font-size: var(--type-xl);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* === Cards v5: gradient surface + tier stripe + sharper corners === */
.card {
  background: linear-gradient(180deg,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 0%) 0%,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 1%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs), inset 0 1px 1px rgba(255,255,255,.4);
  overflow: hidden;
  position: relative;
  transition: transform 250ms var(--ease-spring),
              box-shadow 200ms var(--ease),
              border-color 150ms var(--ease);
}
body.dark .card {
  box-shadow: var(--shadow-xs), inset 0 1px 1px rgba(255,255,255,.04);
  background: linear-gradient(180deg,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 1.5%) 0%,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 0.6%) 100%);
}
.card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--border); pointer-events: none;
}
.card[data-tier="budget"]::after      { background: var(--success); }
.card[data-tier="mid"]::after         { background: var(--teal); }
.card[data-tier="high"]::after        { background: var(--accent); }
.card[data-tier="enthusiast"]::after  { background: var(--danger); }

/* === BUG FIX v5.1: Disable features-v4.js's border-left tier stripe ===
   Two competing tier stripes (v4 left + v5 top) = noisy visuals. Keep top, nullify left. */
.card[data-tier="budget"],
.card[data-tier="mid"],
.card[data-tier="high"],
.card[data-tier="enthusiast"] {
  border-left-width: 3px !important;
  border-left-style: solid !important;
  border-left-color: transparent !important;
}
.card:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255,255,255,.5);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
  background: linear-gradient(180deg,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 4%) 0%,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 1.5%) 100%);
}

/* === Card-ill — better component silhouettes via gradient + icon === */
.card-ill {
  height: 120px;
  background: linear-gradient(135deg,
                              color-mix(in srgb, var(--bg-alt) 100%, var(--accent) 3%) 0%,
                              color-mix(in srgb, var(--bg-alt) 100%, var(--accent) 0%) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
body.dark .card-ill {
  background: linear-gradient(135deg,
                              color-mix(in srgb, var(--bg-alt) 100%, var(--accent) 6%) 0%,
                              color-mix(in srgb, var(--bg-alt) 100%, var(--accent) 2%) 100%);
}
.card-ill svg.ill-icon {
  color: var(--accent); opacity: .35;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease-spring);
}
.card:hover .card-ill svg.ill-icon {
  opacity: .55;
  transform: scale(1.08);
}

/* === Hero stat display — dashboard-like === */
.perf-summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(135deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.perf-summary::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: shimmerSweep 5s linear infinite;
}
@keyframes shimmerSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.perf-stat {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border-right: 1px solid var(--border-subtle);
}
.perf-num {
  font-family: var(--mono);
  font-size: var(--type-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--accent);
  display: inline-block;
}
.perf-num::after {
  content: ''; display: inline-block; width: 100%; height: 1px;
  background: var(--border); margin-top: var(--space-1);
}

/* === Tech chips — instrument style === */
.tech-chip {
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  transition: all 200ms var(--ease);
  position: relative; overflow: hidden;
}
.tech-chip.active {
  border-color: var(--accent);
  background: linear-gradient(180deg,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 3%) 0%,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 0.5%) 100%);
}
.tech-chip-val {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tech-chip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); opacity: 0; transition: opacity 200ms var(--ease);
}
.tech-chip.active::before { opacity: 1; }

/* === Slot row refinement === */
.slot {
  display: grid; grid-template-columns: 24px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  transition: background 150ms var(--ease), transform 150ms var(--ease-spring);
}
.slot.filled {
  background: linear-gradient(90deg,
                              color-mix(in srgb, var(--accent) 4%, transparent) 0%,
                              transparent 60%);
  border-left-color: var(--accent);
}
.slot.val-name { font-weight: 500; letter-spacing: -.01em; }
.slot-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-sm);
  font-weight: 500;
}

/* === Tier bar — segmented pills === */
.tier-bar {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  background: var(--bg-alt);
}
.tier-seg {
  font-family: var(--font);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 200ms var(--ease);
}

/* === Buttons v5 === */
.btn {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--type-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  transition: all 150ms var(--ease);
}
.btn:hover {
  background: var(--bg-alt);
  border-color: var(--text-muted);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-xs), inset 0 1px 1px rgba(255,255,255,.2);
  font-weight: 600;
  letter-spacing: -.005em;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255,255,255,.2);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

/* === Empty state SVG wireframes === */
.slot-val.empty::before {
  content: ''; display: inline-block;
  width: 60px; height: 1px; background: var(--border);
  vertical-align: middle; margin-right: var(--space-2);
}
.slot-val.empty {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font); font-weight: 400; color: var(--text-muted);
}
.lib-empty p {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-9);
  color: var(--text-muted);
  font-size: var(--type-base);
}
.lib-empty p::before {
  content: ''; display: block;
  width: 64px; height: 64px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg,
                              color-mix(in srgb, var(--surface) 100%, var(--accent) 4%),
                              transparent);
}

/* === Compatibility list — checked rows === */
.compat-list li {
  display: grid; grid-template-columns: 22px 1fr auto;
  gap: var(--space-2); align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 2px solid transparent;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
  position: relative;
}
.compat-list li.ok {
  background: linear-gradient(90deg,
                              color-mix(in srgb, var(--success) 5%, transparent) 0%,
                              transparent 80%);
  border-left-color: var(--success);
}
.compat-list li.warn {
  background: linear-gradient(90deg,
                              color-mix(in srgb, var(--warning) 5%, transparent) 0%,
                              transparent 80%);
  border-left-color: var(--warning);
}
.compat-list li.bad {
  background: linear-gradient(90deg,
                              color-mix(in srgb, var(--danger) 5%, transparent) 0%,
                              transparent 80%);
  border-left-color: var(--danger);
}

/* === Modal — centred architecture === */
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modalIn 300ms var(--ease-spring);
}
.modal-card h3 {
  font-size: var(--type-lg);
  font-weight: 600;
  letter-spacing: -.015em;
}
.modal-close {
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 150ms var(--ease);
}
.modal-close:hover {
  background: var(--bg-alt);
  border-color: var(--text-muted);
  color: var(--text);
}

/* === Workload / stress / wattage cards v5 === */
.workload-card,
.stress-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: all 200ms var(--ease);
}
.workload-card:hover,
.stress-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow-sm);
}
.workload-value {
  font-family: var(--mono);
  font-size: var(--type-xl);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
}

/* === Bundle SVG workflow icon === */
.workload-card::before, .stress-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); opacity: .3;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transition: opacity 200ms var(--ease);
}
.workload-card:hover::before, .stress-card:hover::before { opacity: 1; }
.workload-card, .stress-card { position: relative; overflow: hidden; }

/* === Tier-color stat bar === */
.perf-bar-fill {
  border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.perf-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
                              rgba(255,255,255,0) 0%,
                              rgba(255,255,255,.18) 50%,
                              rgba(255,255,255,0) 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: perfShimmer 2s linear infinite;
}
@keyframes perfShimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* === Focus v5 === */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* === Brand mark — sharper === */
.brand-mark {
  color: var(--accent);
}
.brand-name {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* === Topbar v5 === */
.topbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  height: 56px;
}
body.dark .topbar {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

/* === Stamp — restrained === */
.stamp {
  opacity: .55;
  filter: grayscale(.3);
}

/* === Footer v5 === */
.footer {
  font-size: var(--type-xs);
  padding: var(--space-6);
  letter-spacing: .01em;
  color: var(--text-muted);
}

/* === Toast — refined === */
.toast {
  font-family: var(--font);
  font-size: var(--type-sm);
  font-weight: 500;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--text); color: var(--bg);
  left: var(--space-6);
  bottom: var(--space-6);
  transform: translateY(8px);
}
.toast.show { transform: translateY(0); }
.toast.error  { background: var(--danger); color: #fff; }
.toast.success { background: var(--success); color: #fff; }

/* === Multi-cart widget v5 === */
.multi-cart {
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: cartIn 300ms var(--ease-spring);
}
@keyframes cartIn {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.multi-cart-toggle-floater {
  position: fixed; right: var(--space-6); bottom: var(--space-6);
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 95;
  display: flex; align-items: center; justify-content: center;
  transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease);
}
.multi-cart-toggle-floater:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}

/* === Compat badge — pill style === */
.compat-badge {
  font-family: var(--mono);
  font-size: var(--type-xs);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* === Price tier pill === */
.price-tier {
  font-family: var(--mono);
  font-size: var(--type-xs);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px var(--space-2);
  border-radius: var(--radius);
}

/* === DNA radar / Spec badge === */
.spec-badge {
  font-family: var(--mono);
}
.spec-badge-main {
  font-family: var(--mono);
  font-size: var(--type-2xl);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
}

/* === Section title === */
.section-head h2 {
  font-family: var(--font);
  font-size: var(--type-2xl);
  font-weight: 700;
  letter-spacing: -.025em;
}
.section-head h3 {
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--type-lg);
  letter-spacing: -.015em;
}

/* === Reduce stamp visual noise === */
.stamp {
  width: 72px; height: 72px;
  opacity: .4;
}

/* === Responsive refinement === */
@media (max-width: 1100px) {
  .builder { grid-template-columns: 340px 1fr; }
  .sidebar { width: 340px; }
}
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .sidebar { width: 100%; position: static; height: auto; }
}

/* === Skeleton loader for catalog === */
@keyframes skeletonPulse {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
                              var(--bg-alt) 0%,
                              color-mix(in srgb, var(--bg-alt) 100%, var(--accent) 6%) 50%,
                              var(--bg-alt) 100%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}

/* === Light, ambient brand corner mark (subtle decoration) === */
body::before {
  content: 'Abstrict v5';
  position: fixed; bottom: var(--space-2); right: var(--space-3);
  font-family: var(--mono);
  font-size: 10px; color: var(--text-muted);
  opacity: .3; letter-spacing: .1em;
  pointer-events: none;
  z-index: 10000;
}