/* ==========================================================
   Cards And Panels
   ========================================================== */

.tab-panels{
  margin-top:12px;
}

.tab-panel{
  display:none;
}

.tab-panel.active{
  display:block;
}

.panel{
  position:relative;
  border-radius:var(--radius-lg);
  padding:16px;
  border:1px solid var(--border-strong);
  background:
    radial-gradient(circle at top left, rgba(214, 192, 168, 0.06), transparent 40%),
    var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:var(--shimmer);
}

.panel h2{
  margin:0 0 4px;
  font-size:17px;
}

.panel-sub{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed rgba(148, 163, 184, 0.35);
}

body.light .panel-sub{
  border-top:1px dashed rgba(15, 23, 42, 0.22);
}

.panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

@media(max-width:720px){
  .panel-header{
    flex-direction:column;
    align-items:flex-start;
  }
}

.panel-footer-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(148, 163, 184, 0.20);
}

body.light .panel-footer-actions{
  border-top:1px solid rgba(15, 23, 42, 0.12);
}

.results-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

@media(max-width:960px){
  .results-grid{
    grid-template-columns:1fr;
  }
}

.results-card{
  position:relative;
  border-radius:var(--radius-md);
  padding:10px 11px;
  background:radial-gradient(circle at top left, rgba(22,22,24,0.95), rgba(12,12,14,1));
  border:1px solid var(--border-strong);
  overflow:hidden;
}

.results-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:var(--shimmer);
}

body.light .results-card{
  background:rgba(255,255,255,0.92);
  box-shadow:var(--shadow-2);
}

.results-card h3{
  margin:0 0 6px;
  font-size:14px;
}

.result-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:3px 0;
  color:var(--muted);
}

.result-row strong{
  color:var(--text);
}

body:not(.light) .panel,
body:not(.light) .results-card,
body:not(.light) .analysis-card,
body:not(.light) .overview-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,246,232,.026) 0%, rgba(255,246,232,.008) 16%, rgba(255,255,255,0) 34%),
    radial-gradient(1200px 440px at 14% -6%, rgba(255,238,220,.024), transparent 48%),
    linear-gradient(180deg, rgba(19,19,21,.96) 0%, rgba(11,11,13,.92) 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.34),
    0 18px 42px rgba(0,0,0,.40);
}

body:not(.light) .panel::before,
body:not(.light) .results-card::before,
body:not(.light) .analysis-card::before,
body:not(.light) .overview-hero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,247,236,.05), transparent 14%),
    linear-gradient(90deg, transparent 0%, rgba(255,244,230,.022) 50%, transparent 100%);
  opacity:.90;
}

body.light .panel,
body.light .results-card,
body.light .analysis-card,
body.light .overview-hero{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(15,23,42,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.92) 100%);
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--radius-lg);
  box-shadow:
    0 18px 50px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
}