/* ============================================================
   Demo dashboard — усвояемость. Selective Team vocabulary.
   ============================================================ */
.dash{ background:var(--bg); min-height:100vh; }

/* sticky filter bar */
.dash-filters{ position:sticky; top:65px; z-index:30; background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); }
.dash-filters__row{ max-width:1320px; margin:0 auto; padding:14px var(--gutter); display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.dfilter{ display:flex; flex-direction:column; gap:5px; }
.dfilter > span{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.dfilter select{ font:inherit; font-size:14px; font-weight:600; color:var(--ink); padding:9px 12px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:#fff; cursor:pointer; transition:border-color .18s; }
.dfilter select:focus{ outline:0; border-color:var(--orange); }
.df-range{ min-width:210px; }
.df-range__track{ position:relative; height:6px; border-radius:var(--r-pill); background:var(--line); margin-top:9px; touch-action:none; cursor:pointer; }
.df-range__fill{ position:absolute; height:100%; border-radius:var(--r-pill); background:var(--orange); left:18%; right:14%; }
.df-range__knob{ position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--orange);
  transform:translate(-50%,-50%); box-shadow:var(--sh-1); touch-action:none; cursor:grab; }
.df-range__knob:active{ cursor:grabbing; transform:translate(-50%,-50%) scale(1.15); }
.df-clear{ margin-left:auto; border:0; background:transparent; color:var(--orange); font-weight:600; font-size:14px; cursor:pointer;
  display:flex; align-items:center; gap:6px; }
.df-clear svg{ width:15px; height:15px; }

/* dashboard top heading */
.dash-head{ max-width:1320px; margin:0 auto; padding:30px var(--gutter) 6px; display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.dash-head h1{ font-size:clamp(24px,2.6vw,34px); text-transform:uppercase; font-weight:800; letter-spacing:-.01em; }
.demo-badge{ display:inline-flex; align-items:center; gap:7px; background:var(--orange-soft); color:var(--orange-700);
  border:1px solid #f3cdbd; padding:6px 13px; border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.demo-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--orange); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* grid */
.dash-grid{ max-width:1320px; margin:0 auto; padding:20px var(--gutter) 60px; display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:24px; box-shadow:var(--sh-1); }
.panel__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px; }
.panel__title{ font-weight:800; font-size:18px; color:var(--ink); letter-spacing:-.01em; }
.panel__sub{ font-size:12.5px; color:var(--faint); font-weight:600; }
.col-3{ grid-column:span 3; } .col-4{ grid-column:span 4; } .col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; } .col-7{ grid-column:span 7; } .col-8{ grid-column:span 8; } .col-12{ grid-column:span 12; }

/* KPI card */
.kpi{ position:relative; overflow:hidden; }
.kpi__icon{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:var(--r-xs); display:grid; place-items:center;
  background:var(--orange-soft); color:var(--orange); }
.kpi__label{ font-size:13px; font-weight:600; color:var(--muted); }
.kpi__val{ font-weight:800; font-size:clamp(30px,3.4vw,44px); color:var(--ink); letter-spacing:-.02em; line-height:1; margin:14px 0 8px; font-variant-numeric:tabular-nums; }
.kpi__foot{ font-size:12px; color:var(--faint); }
.kpi__foot b{ color:var(--green); font-weight:700; }
.kpi--accent{ background:var(--navy); border-color:var(--navy); }
.kpi--accent .kpi__label{ color:#a9bcd2; } .kpi--accent .kpi__val{ color:#fff; }
.kpi--accent .kpi__icon{ background:rgba(255,255,255,.12); color:#fff; } .kpi--accent .kpi__foot{ color:#8ea2ba; }

/* funnel */
.funnel{ display:flex; flex-direction:column; gap:11px; }
.fstage{ display:grid; grid-template-columns:1fr; gap:6px; }
.fstage__bar-wrap{ display:flex; align-items:center; gap:14px; }
.fstage__bar{ height:46px; border-radius:var(--r-sm); width:0; transition:width 1.1s var(--ease-out);
  background:linear-gradient(90deg,#ff7a40,var(--orange)); display:flex; align-items:center; padding-left:16px;
  color:#fff; font-weight:700; font-size:15px; min-width:46px; box-shadow:inset 0 -2px 8px rgba(120,30,0,.25); }
.fstage.is-green .fstage__bar{ background:linear-gradient(90deg,#37b873,var(--green)); box-shadow:inset 0 -2px 8px rgba(10,80,40,.28); }
.fstage__meta{ display:flex; justify-content:space-between; font-size:13.5px; }
.fstage__name{ color:var(--body); font-weight:600; }
.fstage__pct{ color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; }
.fstage.is-green .fstage__pct{ color:var(--green); }

/* horizontal value bars (specialty / materials) — deck slide 23 style */
.hbars{ display:flex; flex-direction:column; }
.hbar{ display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:14px; padding:9px 0; border-top:1px dotted #e2e1df; }
.hbar:first-child{ border-top:0; }
.hbar__name{ font-size:14px; color:var(--body); font-weight:600; }
.hbar__track{ position:relative; height:26px; background:var(--surface-2); border-radius:var(--r-xs); overflow:hidden; }
.hbar__fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:var(--r-xs); background:var(--orange-soft);
  transition:width 1s var(--ease-out); }
.hbar__fill.is-strong{ background:linear-gradient(90deg,#ffd9c7,#ffb38e); }
.hbar__val{ font-weight:800; color:var(--orange); font-size:15px; font-variant-numeric:tabular-nums; min-width:46px; text-align:right; }
.hbar.is-sel{ background:var(--orange-soft-2); border-radius:var(--r-xs); }
.hbar.is-sel .hbar__name{ color:var(--orange-700); font-weight:800; }
.hbar.is-sel .hbar__fill{ background:linear-gradient(90deg,#ff9a63,var(--orange)) !important; }
.hbar.is-sel .hbar__val{ color:var(--orange-700); }

/* histogram (vertical) */
.histo{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:end; height:230px; padding-top:10px; }
.hcol{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:10px; }
.hcol__bar{ width:100%; max-width:90px; height:0; border-radius:var(--r-sm) var(--r-sm) 0 0; transition:height 1.1s var(--ease-out);
  background:linear-gradient(180deg,#ffb38e,var(--orange)); position:relative; }
.hcol__bar.is-green{ background:linear-gradient(180deg,#52c98a,var(--green)); }
.hcol__bar span{ position:absolute; top:-26px; left:0; right:0; text-align:center; font-weight:800; font-size:15px; color:var(--ink); }
.hcol__bar.is-green span{ color:var(--green); }
.hcol__lab{ font-size:12.5px; color:var(--muted); font-weight:600; text-align:center; }

/* line chart */
.linechart{ width:100%; height:auto; display:block; }
.lc-legend{ display:flex; gap:22px; margin-bottom:6px; }
.lc-legend span{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); }
.lc-legend i{ width:14px; height:3px; border-radius:2px; display:inline-block; }
.lc-draw{ stroke-dasharray:1; stroke-dashoffset:1; }

@media (max-width:1100px){
  .col-3{ grid-column:span 6; } .col-4{ grid-column:span 6; } .col-5,.col-7,.col-8{ grid-column:span 12; } .col-6{ grid-column:span 12; }
  .hbar{ grid-template-columns:150px 1fr auto; }
}
@media (max-width:620px){
  .col-3,.col-4{ grid-column:span 12; }
  .hbar{ grid-template-columns:1fr; gap:6px; } .hbar__val{ text-align:left; }
  .dash-filters{ top:60px; }
}