.chart-panel + .chart-panel{margin-top:20px}
  .panel-t .legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .legend i{display:inline-block;vertical-align:middle;margin-right:7px}
  .lg-line{width:18px;height:3px;border-radius:2px;background:var(--amber)}
  .lg-dash{width:18px;height:0;border-top:2px dashed rgba(249,240,229,.5)}
  .lg-bar{width:11px;height:11px;border-radius:3px;background:var(--amber)}
  .lg-bar.wk{background:var(--ember)}
  .lg-bar.ghost{background:rgba(255,220,180,.16)}

  .kpis{display:flex;gap:12px;flex-wrap:wrap;padding:18px 20px 0}
  .kpi{
    background:rgba(27,19,16,.55);border:1px solid rgba(255,220,180,.08);
    border-radius:var(--r-sm);padding:10px 16px;min-width:118px;
  }
  .kpi b{display:block;font-size:26px;font-weight:900;line-height:1.15;
         font-variant-numeric:tabular-nums;color:var(--cream)}
  .kpi.hot b{color:var(--amber)}
  .kpi span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-dim)}
  .kpi span i{font-style:normal;color:var(--warm)}

  .chart{position:relative;padding:8px 12px 12px;min-height:220px}
  .chart svg{display:block;width:100%;overflow:visible}
  .chart text{font-family:var(--f);font-size:11.5px;font-weight:700;fill:var(--warm-dim);
              font-variant-numeric:tabular-nums}
  .chart .grid{stroke:rgba(255,220,180,.07);stroke-width:1}
  .chart .base{stroke:rgba(255,220,180,.16);stroke-width:1}
  .chart .area{fill:url(#gArea)}
  .chart .line{fill:none;stroke:var(--amber);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
  .chart .peak{fill:none;stroke:rgba(249,240,229,.42);stroke-width:1.6;stroke-dasharray:3 5;stroke-linecap:round}
  .chart .dot{fill:var(--amber);stroke:var(--night);stroke-width:3}
  .chart .guide{stroke:rgba(255,220,180,.28);stroke-width:1}
  .chart .bar{fill:url(#gBar);transition:opacity .2s}
  .chart .bar.wk{fill:url(#gBarWk)}
  .chart .bar.dim{opacity:.45}
  .chart .ghost{fill:rgba(255,220,180,.09)}
  .chart .gap{fill:rgba(255,220,180,.14)}
  .chart .hit{fill:transparent;cursor:crosshair}
  .chart .today-t{fill:var(--amber)}

  .tip{
    position:absolute;pointer-events:none;z-index:5;white-space:nowrap;
    background:rgba(20,13,10,.94);border:1px solid rgba(255,220,180,.16);
    border-radius:12px;padding:8px 12px;font-size:13px;line-height:1.45;
    box-shadow:var(--sh-2);color:var(--warm);font-variant-numeric:tabular-nums;
    transform:translate(-50%,calc(-100% - 14px));
  }
  .tip b{color:var(--cream);font-weight:800}
  .tip em{font-style:normal;color:var(--amber);font-weight:800}

  .seg{
    display:inline-flex;margin-left:auto;padding:4px;gap:4px;
    background:rgba(27,19,16,.6);border:1px solid rgba(255,220,180,.09);border-radius:999px;
  }
  .seg button{
    font-family:var(--f);font-weight:800;font-size:13px;color:var(--warm-dim);
    background:none;border:0;border-radius:999px;padding:6px 14px;cursor:pointer;
    transition:background .2s,color .2s,transform .35s var(--ease);
  }
  .seg button:hover{color:var(--cream)}
  .seg button[aria-selected="true"]{background:linear-gradient(170deg,#FFC470,var(--amber));color:#3A2206}

  .mhead,.mrow{
    display:grid;grid-template-columns:34px 1fr 76px 96px;gap:14px;align-items:center;
    padding:0 20px;
  }
  .mhead{
    padding-top:14px;padding-bottom:8px;font-size:11px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--warm-dim);
  }
  .mhead span:nth-child(n+3),.mrow > span:nth-child(n+3){text-align:right}
  .maplist{list-style:none;margin:0;padding:0 0 10px}
  .mrow{padding-block:10px;transition:background .2s}
  .mrow + .mrow{border-top:1px solid rgba(255,220,180,.05)}
  .mrow:hover{background:rgba(255,220,180,.035)}
  .mrow .place{justify-self:start}
  .mm{min-width:0}
  .mm b{display:block;font-weight:800;font-size:15px;color:var(--cream);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mm .bar{display:block;height:8px;border-radius:99px;margin-top:7px;
           background:rgba(255,220,180,.06);overflow:hidden}
  .mm .bar s{display:block;height:100%;border-radius:99px;
             background:linear-gradient(90deg,var(--ember),var(--amber));
             transition:width .6s cubic-bezier(.2,.9,.3,1)}
  .ms{font-weight:900;color:var(--amber);font-variant-numeric:tabular-nums;font-size:15px}
  .ma{display:flex;align-items:center;justify-content:flex-end;gap:6px;
      font-weight:800;color:var(--warm);font-variant-numeric:tabular-nums;font-size:15px}
  .ma .i{font-size:16px;color:var(--warm-dim)}
  @media (max-width:560px){
    .mhead,.mrow{grid-template-columns:28px 1fr 58px 58px;gap:10px;padding-inline:14px}
  }

  .when-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:stretch}
  .heat-scroll{overflow-x:auto;padding:18px 20px 16px}
  .heat{
    display:grid;grid-template-columns:30px repeat(24,minmax(20px,1fr));gap:4px;
    min-width:620px;
  }
  .heat .hh{font-size:11px;font-weight:700;color:var(--warm-dim);text-align:center;
            font-variant-numeric:tabular-nums;height:18px}
  .heat .hd{font-size:12px;font-weight:800;color:var(--warm);align-self:center}
  .heat i{
    display:block;aspect-ratio:1;border-radius:6px;
    transition:transform .15s,box-shadow .15s;
  }
  .heat i.none{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,220,180,.08)}
  .heat i:hover{transform:scale(1.18);box-shadow:0 0 0 2px var(--cream)}
  .heat-legend{display:flex;align-items:center;gap:10px;padding:0 20px 18px;
               font-size:12px;font-weight:700;color:var(--warm-dim)}
  .heat-legend s{flex:0 0 160px;height:10px;border-radius:99px;
    background:linear-gradient(90deg,#2E211A,#6E3B24,#E8663D,#FFB454,#FFD9A0)}

  .callout{
    background:
      radial-gradient(420px 220px at 50% 0%,rgba(255,180,84,.14),transparent 70%),
      linear-gradient(170deg,var(--room-2),var(--room));
    border:1px solid rgba(255,220,180,.1);border-radius:var(--r-lg);
    padding:26px 24px;box-shadow:var(--sh-2);
    display:flex;flex-direction:column;gap:14px;
  }
  .callout .art{width:84px;height:84px}
  .callout h3{font-size:19px}
  .callout p{color:var(--warm);font-size:15px}
  .callout b{color:var(--amber);font-weight:900}
  .callout .quiet{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,220,180,.07);font-size:14px}
  .callout .quiet b{color:var(--frost)}

  .recs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .rec{
    background:linear-gradient(168deg,var(--room-2),var(--room));
    border:1px solid rgba(255,220,180,.07);border-radius:var(--r-lg);
    padding:24px 20px 22px;display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:6px;box-shadow:var(--sh-2);
    transition:transform .35s cubic-bezier(.2,.9,.3,1.1),border-color .35s ease;
  }
  .rec:hover{transform:translateY(-5px);border-color:rgba(255,220,180,.16)}
  .rec:hover .art{transform:translateY(-4px) scale(1.07)}
  .rec .art{width:78px;height:78px;margin-bottom:8px}
  .rec b{font-size:clamp(30px,3.4vw,40px);font-weight:900;line-height:1.05;color:var(--amber);
         font-variant-numeric:tabular-nums}
  .rec span{font-weight:800;font-size:15px}
  .rec em{font-style:normal;font-size:13px;color:var(--warm-dim)}

  .regs-wrap{max-width:760px;margin:0 auto}
  .regs{list-style:none;margin:0;padding:6px 0 10px}
  .regs li{
    display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;
    padding:10px 20px;
  }
  .regs li + li{border-top:1px solid rgba(255,220,180,.05)}
  .regs .who{min-width:0}
  .regs .who b{display:block;font-weight:700;color:var(--cream);
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .regs .bar{display:block;height:6px;border-radius:99px;margin-top:6px;background:rgba(255,220,180,.06)}
  .regs .bar s{display:block;height:100%;border-radius:99px;background:var(--pine)}
  .regs .hrs{text-align:right;line-height:1.25}
  .regs .hrs b{display:block;font-weight:900;color:var(--amber);font-variant-numeric:tabular-nums}
  .regs .hrs em{font-style:normal;font-size:12px;color:var(--warm-dim);white-space:nowrap}

  .empty-note{padding:26px 20px;text-align:center;color:var(--warm-dim)}

  .when-grid > *,.statgrid > *{min-width:0}
  @media (max-width:640px){
    .chart-panel .panel-t{flex-wrap:wrap}
    .chart-panel .panel-t .legend{width:100%;margin-left:0;justify-content:flex-start;gap:12px}
  }

  .stat-more{display:flex;justify-content:center;margin-top:22px}

  @media (max-width:980px){
    .recs{grid-template-columns:repeat(2,1fr)}
    .when-grid{grid-template-columns:1fr}
  }
  @media (max-width:520px){
    .recs{grid-template-columns:1fr 1fr;gap:12px}
    .rec{padding:18px 12px}
    .rec .art{width:60px;height:60px}
    .kpi{min-width:0;flex:1;padding:10px 12px}
    .kpi span{font-size:10.5px;letter-spacing:.04em}
  }

  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @media (prefers-reduced-motion:no-preference){
    .chart.anim .line{stroke-dasharray:1;animation:draw 1.6s var(--ease) .15s both}
    .chart.anim .area,.chart.anim .peak{animation:fade 1s ease .7s both}
    .chart.anim circle.dot:not([id]){animation:fade .4s ease 1.6s both}
    .chart.anim .bar,.chart.anim .ghost{
      transform-box:fill-box;transform-origin:50% 100%;
      animation:grow .7s var(--ease) calc(var(--i) * 22ms + .1s) both;
    }
    .rv :not(.in) > .chart.anim *{animation-play-state:paused}
  }