/* ============================================================
   ABSTRICT · Features v13 — 10 Features CSS
   Comparator, Bottleneck, Export, Smart upgrade,
   Budget pie, Fan advisor, VR check, Perf/€, OC, Thermal
   ============================================================= */

/* ---- 1. COMPARATOR ---- */
.compare-panel { margin-top: 12px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.compare-head { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.compare-head svg { flex-shrink: 0; }
.compare-select {
  margin-left: auto; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 11px; padding: 3px 6px; border-radius: 4px;
  max-width: 160px; cursor: pointer;
}
.compare-body { margin-top: 8px; }
.compare-row { display: grid; grid-template-columns: 60px 1fr 1fr; gap: 6px; align-items: center; padding: 3px 0; font-size: 11px; }
.compare-header { border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; margin-bottom: 2px; }
.compare-label { color: var(--text-muted); font-weight: 500; text-transform: uppercase; font-size: 9px; letter-spacing: .3px; }
.compare-val { color: var(--text-secondary); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-bar-wrap { display: flex; align-items: center; gap: 4px; height: 6px; background: var(--border-subtle); border-radius: 3px; overflow: hidden; position: relative; }
.compare-bar { height: 100%; border-radius: 3px; transition: width 500ms var(--ease); }
.compare-num { position: absolute; right: 4px; font-family: var(--mono); font-size: 8px; font-weight: 600; color: var(--text); }

/* ---- 2. BOTTLENECK ---- */
.bottleneck-viz { margin-top: 12px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.bn-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.bn-gauge { margin-bottom: 6px; }
.bn-gauge-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; position: relative; }
.bn-gauge-fill { height: 100%; border-radius: 4px; transition: width 800ms var(--ease); }
.bn-gauge-marker { position: absolute; top: -2px; width: 2px; height: 12px; background: var(--text-muted); border-radius: 1px; }
.bn-labels { display: flex; justify-content: space-between; font-size: 8px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .3px; }
.bn-info { font-size: 12px; font-weight: 600; }
.bn-diff { font-weight: 400; font-size: 10px; color: var(--text-muted); }

/* ---- 3. EXPORT IMAGE (btn styled via share-bar) ---- */

/* ---- 4. SMART UPGRADE ---- */
.smart-upgrade { margin-top: 12px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.su-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.su-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); font-size: 11px; }
.su-row:last-child { border-bottom: none; }
.su-cat { font-family: var(--mono); font-size: 9px; color: var(--accent); font-weight: 600; text-transform: uppercase; min-width: 32px; }
.su-detail { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-price { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--warning); white-space: nowrap; }

/* ---- 5. BUDGET PIE ---- */
.budget-pie { margin-top: 12px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.pie-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.pie-body { display: flex; align-items: center; gap: 12px; }
.pie-svg { width: 80px; height: 80px; flex-shrink: 0; }
.pie-legend { display: flex; flex-direction: column; gap: 3px; }
.pie-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-secondary); }
.pie-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ---- 6. FAN ADVISOR ---- */
.fan-advisor { margin-top: 12px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.fan-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.fan-diagram { display: flex; gap: 16px; margin-bottom: 6px; }
.fan-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fan-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.fan-dots { display: flex; gap: 4px; }
.fan-dot { font-size: 14px; font-weight: 700; }
.fan-in { color: var(--success); }
.fan-out { color: var(--warning); }
.fan-count { font-size: 9px; color: var(--text-muted); font-family: var(--mono); }
.fan-ratio { font-size: 10px; color: var(--text-secondary); text-align: center; }

/* ---- 7. VR CHECK ---- */
.vr-check { margin-top: 12px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.vr-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.vr-status { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.vr-icon { font-weight: 700; }
.vr-specs { font-size: 10px; color: var(--text-muted); font-family: var(--mono); }

/* ---- 8. PERF PER EURO ---- */
.ppe-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; margin-bottom: 10px;
  border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--bg-alt); border: 1px solid var(--border-subtle);
}
.ppe-num { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.ppe-great { border-color: var(--success); color: var(--success); }
.ppe-great .ppe-num { color: var(--success); }
.ppe-good { border-color: var(--accent); color: var(--accent); }
.ppe-good .ppe-num { color: var(--accent); }
.ppe-low { border-color: var(--warning); color: var(--warning); }
.ppe-low .ppe-num { color: var(--warning); }

/* ---- 9. OC HEADROOM ---- */
.oc-panel { margin-top: 12px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.oc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.oc-potential { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.oc-detail { font-size: 10px; color: var(--text-muted); }

/* ---- 10. THERMAL HEATMAP ---- */
.thermal-map { margin-top: 12px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.thermal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.thermal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.thermal-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.thermal-icon {
  width: 40px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--mono);
}
.thermal-val { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); }