/* =========================================================================
   OMEGA — Dashboard mockup (Grow UP / BI look)
   Self-contained light "product screenshot". Scales with its container
   via container queries (cqw units), so it stays proportional in any frame.
   ========================================================================= */
.dash-wrap{container-type:inline-size;width:100%;
  background:#f6f8fb;overflow:hidden}
.dash{--d-card:#ffffff;--d-bg:#f6f8fb;--d-line:#e7edf3;--d-line-2:#f0f4f8;
  --d-ink:#0c2440;--d-dim:#6b8197;--d-faint:#9bb0c2;
  --d-green:#1f9d6b;--d-green-bg:#e7f6ef;--d-amber:#e8923a;--d-amber-bg:#fdefe1;
  --d-teal:#1aa7c8;--d-teal-bg:#e4f4f9;--d-navy:#0e2f53;--d-blue:#2e74d6;
  --d-purple:#7c5cff;--d-purple-bg:#efebff;--d-red:#e2574c;--d-red-bg:#fdeceb;
  font-family:var(--font-body),system-ui,sans-serif;color:var(--d-ink);
  font-size:1.5cqw;line-height:1.3;padding:3.2cqw;display:flex;
  flex-direction:column;gap:2.4cqw;width:100%}

/* KPI row */
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw}
.dash-kpi{position:relative;background:var(--d-card);border:1px solid var(--d-line);
  border-radius:1.1em;padding:1.05em 1.05em .6em;overflow:hidden;min-width:0}
.dash-kpi__top{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:.7em}
.dash-kpi__ico{width:2.6em;height:2.6em;border-radius:.7em;display:grid;
  place-items:center;flex:none}
.dash-kpi__ico svg{width:1.4em;height:1.4em}
.dash-kpi__badge{display:inline-flex;align-items:center;gap:.25em;font-size:.72em;
  font-weight:700;padding:.32em .55em;border-radius:2em;white-space:nowrap}
.dash-kpi__num{font-family:var(--font-display),sans-serif;font-weight:700;
  font-size:1.75em;letter-spacing:-.02em;line-height:1}
.dash-kpi__lbl{color:var(--d-dim);font-size:.82em;margin-top:.25em;font-weight:500}
.dash-kpi__spark{margin-top:.5em;width:100%;height:2.6em;display:block}
.dash-kpi__blob{position:absolute;top:-2.4em;right:-2.4em;width:6.5em;height:6.5em;
  border-radius:50%;opacity:.5}

.is-teal .dash-kpi__ico{background:var(--d-teal-bg);color:var(--d-teal)}
.is-green .dash-kpi__ico{background:var(--d-green-bg);color:var(--d-green)}
.is-amber .dash-kpi__ico{background:var(--d-amber-bg);color:var(--d-amber)}
.is-purple .dash-kpi__ico{background:var(--d-purple-bg);color:var(--d-purple)}
.badge-up{background:var(--d-green-bg);color:var(--d-green)}
.badge-warn{background:var(--d-red-bg);color:var(--d-red)}
.badge-info{background:var(--d-purple-bg);color:var(--d-purple)}
.blob-teal{background:var(--d-teal-bg)}.blob-green{background:var(--d-green-bg)}
.blob-amber{background:var(--d-amber-bg)}.blob-purple{background:var(--d-purple-bg)}

/* chips row */
.dash-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqw}
.dash-chip{background:var(--d-card);border:1px solid var(--d-line);border-radius:.9em;
  padding:.85em;display:flex;align-items:center;gap:.6em;min-width:0}
.dash-chip__ico{width:2.1em;height:2.1em;border-radius:.55em;display:grid;
  place-items:center;flex:none}
.dash-chip__ico svg{width:1.15em;height:1.15em}
.dash-chip__num{font-family:var(--font-display),sans-serif;font-weight:700;
  font-size:1.15em;line-height:1}
.dash-chip__lbl{color:var(--d-dim);font-size:.7em;line-height:1.1;font-weight:500}

/* section label */
.dash-seclbl{display:flex;align-items:center;gap:.6em;font-family:var(--font-mono),monospace;
  font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:var(--d-faint);
  font-weight:600}
.dash-seclbl::before{content:"";width:.3em;height:1.1em;border-radius:2em;
  background:var(--d-teal)}

/* charts */
.dash-charts{display:grid;grid-template-columns:1.55fr 1fr;gap:1.6cqw}
.dash-card{background:var(--d-card);border:1px solid var(--d-line);border-radius:1.1em;
  padding:1.2em 1.3em;display:flex;flex-direction:column;min-width:0}
.dash-card__hd{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:.4em}
.dash-card__t{font-family:var(--font-display),sans-serif;font-weight:700;font-size:1.05em}
.dash-card__s{color:var(--d-dim);font-size:.78em;margin-top:.15em}
.dash-pill{font-size:.7em;font-weight:700;color:var(--d-teal);background:var(--d-teal-bg);
  padding:.35em .7em;border-radius:2em}
.dash-bars{width:100%;height:15em;display:block;margin-top:.6em}
.dash-legend{display:flex;flex-wrap:wrap;gap:.4em 1.1em;justify-content:center;margin-top:.5em}
.dash-legend span{display:inline-flex;align-items:center;gap:.4em;font-size:.74em;
  color:var(--d-dim);font-weight:500}
.dash-legend i{width:.65em;height:.65em;border-radius:50%;flex:none}
.dash-donut-wrap{display:grid;place-items:center;margin:.4em 0}
.dash-donut{width:auto;height:11.5em;max-height:13em}
.dash-legend--grid{display:grid;grid-template-columns:1fr 1fr;gap:.45em .8em;
  justify-content:start}
.dash-legend--grid span{justify-content:flex-start}

@container (max-width:520px){
  .dash{font-size:2.05cqw}
}

/* reusable browser/app frame (works on any page without page-extras) */
.app-frame{border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface-solid);box-shadow:var(--shadow)}
.app-frame__bar{display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.app-frame__dots{display:flex;gap:7px}
.app-frame__dots i{width:11px;height:11px;border-radius:50%;background:var(--border-strong)}
.app-frame__url{font-family:var(--font-mono);font-size:.72rem;color:var(--text-faint)}