:root{
  --accent:#F43676;
  --bg:#ffffff;
  --text:#222222;
  --muted:#6b7280;
  --border:#e5e7eb;
}
.qca-wrap.dark{
  --bg:#0f1115; --text:#e6e6e6; --border:#2a2f3b; --muted:#9aa0a6;
}

.qca-wrap{
  max-width:1024px;
  margin:12px auto;
  padding:14px;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Header & Tabs */
.qca-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.qca-header h2{ color:var(--accent); margin:0; font-size:1.15rem; }
.qca-tabs{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.tab{ padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:transparent; cursor:pointer; }
.tab.active{ border-color:var(--accent); box-shadow: 0 6px 18px rgba(244,54,118,0.06); }

/* Cards & grid */
.card, .card-slim{ background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:12px; margin:8px 0; }
.panel-note{ padding:10px 12px; border-left:4px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); border-radius:8px; margin-bottom:8px; }
.row{ display:grid; gap:10px; grid-template-columns: repeat(12, 1fr); align-items:end; }
.col{ grid-column: span 12; }
@media (min-width:640px){ .col{ grid-column: span 4; } .col.grow{ grid-column: span 5; } }
@media (min-width:980px){ .col.grow{ grid-column: span 6; } .col{ grid-column: span 3; } }

/* Inputs */
label{ font-weight:700; display:block; margin-bottom:6px; font-size:0.92rem; }
input, select{ width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); }
.btn{ background:var(--accent); color:#fff; border:none; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700; }
.btn.outline{ background:transparent; border:1px solid var(--accent); color:var(--accent); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.bar.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Remove button (pink) */
.m-remove{ background:var(--accent); color:#fff; border-radius:8px; padding:8px 10px; border:none; cursor:pointer; }

/* Results */
.metric{ padding:10px; border-radius:10px; border:1px dashed var(--border); }
.metric .label{ color:var(--muted); font-size:0.85rem; margin-bottom:6px; }
.metric .value{ font-weight:700; }
.metric .value.big{ font-size:1.4rem; }

/* Badges */
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; }
.badge.first{ background:#22c55e20; color:#22c55e; border:1px solid #22c55e; }
.badge.second1{ background:#3b82f620; color:#3b82f6; border:1px solid #3b82f6; }
.badge.second2{ background:#f9731620; color:#f97316; border:1px solid #f97316; }
.badge.third{ background:#a855f720; color:#a855f7; border:1px solid #a855f7; }
.badge.pass{ background:#ef444420; color:#ef4444; border:1px solid #ef4444; }

/* Tooltip */
.tooltip-icon{ cursor:pointer; color:var(--accent); margin-left:6px; font-size:0.95rem; }
.tooltip-box{ position:fixed; display:none; z-index:9999; max-width:300px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); box-shadow:0 8px 24px rgba(0,0,0,0.08); font-size:0.9rem; }

/* Module list */
.modules-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.module-row .m-remove{ width:100%; }

/* Print */
@media print{ .btn, .tab, .tooltip-icon{ display:none !important; } }