/* ============================================================
   Simplified concept mockups — skeleton style, NocTel Desk colors.
   These communicate ONE idea; they are deliberately NOT the real
   dashboard. Real text only for the point; everything else = bars.
   ============================================================ */
.sm-stage{
  --sm-card:#FFFFFF; --sm-soft:#F9F9F7; --sm-cream:#ECEAE4; --sm-navy:#091524;
  --sm-ink:#091524; --sm-muted:rgba(9,21,36,0.45); --sm-line:rgba(9,21,36,0.10);
  --sm-bar:rgba(9,21,36,0.09); --sm-blue:#2A528E; --sm-ok:#0F7D5D;
  position:relative; padding:12px; background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.sm-card{ width:100%; max-width:382px; background:var(--sm-card); border-radius:18px;
  border:1px solid rgba(9,21,36,0.08); overflow:hidden;
  font-family:var(--sans,'Geist',system-ui,sans-serif); color:var(--sm-ink); }

.sm-strip{ background:var(--sm-navy); padding:18px 20px; display:flex; align-items:center; justify-content:space-between; }
.sm-strip .lg{ height:17px; width:auto; display:block; }
.sm-strip .lines{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.sm-strip .sm-bar{ background:rgba(255,255,255,0.22); }

.sm-pad{ padding:20px; }
.sm-bar{ height:8px; border-radius:999px; background:var(--sm-bar); display:block; }
.sm-label{ font-size:11.5px; color:var(--sm-muted); margin-bottom:8px; }
.sm-value{ font-size:18px; font-weight:600; color:var(--sm-ink); letter-spacing:-0.01em; }
.sm-num{ font-size:30px; font-weight:700; letter-spacing:-0.02em; color:var(--sm-ink); }

.sm-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sm-field{ border:1px solid var(--sm-line); border-radius:12px; padding:14px; }
.sm-field .sm-bar{ margin-top:11px; width:70%; }

.sm-band{ margin-top:14px; background:var(--sm-cream); border-radius:12px; padding:17px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.sm-band .sm-bar{ width:44%; }

.sm-big{ text-align:center; padding:30px 20px; }
.sm-big .sm-value{ font-size:24px; }

.sm-btn{ margin:0 20px 20px; background:var(--sm-navy); color:#fff; border-radius:12px; padding:15px; text-align:center;
  font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; }
.sm-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.sm-rows{ display:flex; flex-direction:column; gap:10px; }
.sm-row{ display:flex; align-items:center; gap:13px; border:1px solid var(--sm-line); border-radius:12px; padding:13px 15px; }
.sm-row .ic{ width:34px; height:34px; border-radius:9px; background:rgba(9,21,36,0.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sm-row .ic svg{ width:16px; height:16px; stroke:var(--sm-blue); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sm-row .rmid{ flex:1; min-width:0; }
.sm-row .rmid .sm-value{ font-size:14.5px; font-weight:600; }
.sm-row .rmid .sm-bar{ width:58%; margin-top:8px; }

.sm-pill{ font-size:12px; font-weight:500; color:var(--sm-muted); background:var(--sm-cream); border-radius:999px; padding:6px 13px; white-space:nowrap; }
.sm-pill.ok{ color:var(--sm-ok); background:rgba(15,125,93,0.10); }
.sm-pill.blue{ color:var(--sm-blue); background:rgba(42,82,142,0.10); }

.sm-chart{ display:flex; align-items:flex-end; gap:7px; height:66px; margin-top:18px; }
.sm-cbar{ flex:1; background:var(--sm-bar); border-radius:4px 4px 0 0; }
.sm-cbar.on{ background:linear-gradient(180deg,#2A528E,#38B6FF); }
.sm-cap{ font-size:12px; color:var(--sm-muted); margin-top:11px; }