/* ── Cards ── */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.card-title { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text3); margin-bottom: 16px; }

/* ── Stats ── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
}
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
.stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; font-family: 'DM Mono', monospace; }
.stat-change { font-size: 12px; font-family: 'DM Mono', monospace; margin-top: 4px; }
.up   { color: var(--green); }
.down { color: var(--red); }

/* ── Table ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); padding: 0 12px 12px; text-align: left; }
.data-table th:not(:first-child) { text-align: right; }
.data-table td { padding: 12px; border-top: 1px solid var(--border); font-family: 'DM Mono', monospace; font-size: 13px; }
.data-table td:not(:first-child) { text-align: right; }
.data-table tr:hover td { background: var(--bg3); }
.ticker-cell { font-weight: 700; color: var(--accent); font-size: 13px; cursor: pointer; }
.name-cell { color: var(--text2); font-size: 12px; font-family: 'Syne', sans-serif; max-width: clamp(150px, 20vw, 250px); width: clamp(150px, 20vw, 250px); }
.scanner-name-main { display:block; max-width: clamp(150px, 20vw, 250px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.scanner-name-details { font-size:10px; opacity:0.45; margin-top:4px; line-height:1.3; white-space:normal; max-width: clamp(150px, 20vw, 250px); }
.scanner-price-cell { font-family:'DM Mono', monospace; white-space:nowrap; font-weight:700; color: var(--text); }
.scanner-price-empty { opacity: 0.42; font-weight: 500; }
@media (max-width: 1200px) {
  .name-cell,
  .scanner-name-main,
  .scanner-name-details { max-width: 200px; width: 200px; }
}
@media (max-width: 900px) {
  .name-cell,
  .scanner-name-main,
  .scanner-name-details { max-width: 170px; width: 170px; }
}

/* ── Grid layouts ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ── Chart placeholder ── */
.chart-area {
  height: 200px; border-radius: 8px; overflow: hidden;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 13px; font-family: 'DM Mono', monospace;
  margin-top: 12px; position: relative;
}
#asset-chart { height: 280px; }
.mini-chart { height: 52px; }

/* ── Badge ── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  font-family: 'DM Mono', monospace;
}
.badge-green { background: var(--green-dim); color: var(--green); }
.badge-red   { background: var(--red-dim);   color: var(--red); }
.badge-blue  { background: var(--accent-dim); color: var(--accent); }
.badge-gray  { background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); }

/* ── Score bar ── */
.score-bar { display: flex; align-items: center; gap: 10px; }
.score-track { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.score-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.6s; }
.score-fill.high { background: var(--green); }
.score-fill.low  { background: var(--red); }
.score-num { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; width: 32px; text-align: right; }

/* ── Empty state ── */
.empty-state {
  text-align: center; padding: 48px 24px;
  color: var(--text3); font-size: 13px;
}
.empty-state svg { opacity: 0.3; margin-bottom: 12px; }

/* ── Loading skeleton ── */
.skel {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--border) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Buttons ── */
.btn {
  padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
  transition: background 0.2s, opacity 0.2s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #3d99ff; }
.btn-ghost { background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); }
.btn-ghost:hover { color: var(--text); }

/* ── Form ── */
.form-group { margin-bottom: 20px; }
.form-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; display: block; }
.form-input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 10px 14px;
  font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text);
  outline: none; transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--accent); }

/* Engine UX finalisation */
.engine-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;font-family:'DM Mono',monospace}
.engine-meta-strip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}.engine-meta-date{font-size:11px;opacity:.6}
.engine-headline-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.engine-pill-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.engine-section-label{font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.06em}.engine-section-title{font-size:18px;font-weight:800;margin-top:2px}.engine-section-note{font-size:12px;opacity:.72;line-height:1.6;margin-top:6px}
.engine-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.engine-metric-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}.engine-metric-label{opacity:.55}.engine-metric-value{font-family:'DM Mono',monospace}
.engine-history-row{display:flex;gap:6px;flex-wrap:wrap}.engine-status-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--card)}.engine-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:12px}.engine-mini-card{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--bg2)}.engine-mini-label{font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.05em}.engine-mini-value{margin-top:4px;font-size:14px;font-weight:700}
.engine-timeline{display:flex;flex-direction:column;gap:10px}.engine-timeline-item{display:grid;grid-template-columns:110px 1fr;gap:12px;border-bottom:1px solid var(--border);padding-bottom:10px}.engine-timeline-date{font-size:12px;opacity:.6;font-family:'DM Mono',monospace}.engine-timeline-body{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.engine-context-card{border-left:3px solid var(--accent)}
@media (max-width: 900px){.engine-two-col,.engine-timeline-item{grid-template-columns:1fr}}

.asset-engine-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}

.asset-regime-context-card .engine-mini-grid{margin-top:14px;}
.asset-regime-context-note{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);font-size:13px;line-height:1.6;opacity:.82;}

.asset-regime-history-card .engine-timeline{max-height:260px;overflow:auto;}
.asset-regime-history-card .engine-history-row{gap:6px;flex-wrap:wrap;}

.asset-decision-strip .engine-mini-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));}
.asset-decision-strip .engine-mini-note{margin-top:6px;font-size:11px;opacity:.62;line-height:1.45;}
.engine-payload-card .card-title{font-size:13px;}

.asset-explainability-shell .engine-mini-card{min-height:96px}
.asset-explainability-card{display:flex;flex-direction:column;justify-content:flex-start}

.dev-toggle-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);font-size:13px;font-weight:600;}
.dev-toggle-card input{accent-color:var(--red);}
code{font-family:'DM Mono',monospace;font-size:11px;padding:2px 6px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .two-col, .three-col { grid-template-columns: 1fr; }
  .card, .stat-card { padding: 16px; }
  .card-title { margin-bottom: 12px; }
  .data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 20px; }
  .stat-card, .card { border-radius: 10px; padding: 14px; }
  .engine-mini-grid,
  .asset-engine-summary-grid { grid-template-columns: 1fr; }
}

#panel-profile-search,
#panel-standard-scanner,
#scanner-regime-context-shell,
#scanner-summary-shell { position: relative; z-index: 1; }
#panel-profile-search .btn,
#panel-standard-scanner .btn,
#panel-profile-search select,
#panel-standard-scanner select,
#panel-profile-search input,
#panel-standard-scanner input,
#panel-profile-search .ticker-cell,
#panel-standard-scanner .ticker-cell { position: relative; z-index: 2; pointer-events: auto; }