@font-face { font-family: Heebo; src: url("/vendor/Heebo.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

  :root { --bg:#e4e4e6; --app:#fff; --panel:#f6f6f8; --line:#ececef; --ink:#1d1d22; --mute:#8b8b96;
          --p:#7c5cf0; --pl:#ece7ff; --g:#3fbf55; --gl:#e3f7e7; --o:#f5992a; --ol:#fdeed8; --b:#4f8ff7; --bl:#e1ecff; --r:#e5594f; --rl:#fde5e3; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,"Heebo",system-ui,sans-serif; font-size:14px; }
  .app { max-width:1280px; margin:24px auto; background:var(--app); border-radius:24px; display:grid; grid-template-columns:230px 1fr; overflow:hidden; box-shadow:0 8px 40px #0001; min-height:760px; }
  aside { padding:22px 16px; border-inline-end:1px solid var(--line); }
  .logo { font-weight:800; font-size:18px; margin:0 8px 22px; display:flex; align-items:center; gap:8px; }
  .logo i { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--p),var(--o)); display:inline-block; }
  .grp { color:var(--mute); font-size:11px; letter-spacing:.06em; margin:18px 10px 6px; }
  nav button { display:flex; width:100%; gap:10px; align-items:center; border:0; background:none; padding:10px 12px; border-radius:12px; font:600 14px inherit; color:#444; cursor:pointer; text-align:start; }
  nav button:hover { background:var(--panel); } nav button.on { background:var(--panel); color:var(--ink); }
  nav button span { width:18px; text-align:center; opacity:.8; }
  main { padding:22px; background:var(--panel); }
  .top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; color:var(--mute); }
  .top b { color:var(--ink); }
  .sim { background:var(--ol); color:#b86400; border-radius:99px; padding:4px 12px; font-size:12px; font-weight:700; }
  .sheet { background:var(--app); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
  .hello { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; gap:10px; flex-wrap:wrap; }
  .hello h1 { margin:0 0 4px; font-size:22px; } .hello p { margin:0; color:var(--mute); }
  select { font:600 13px inherit; padding:9px 14px; border-radius:12px; border:1px solid var(--line); background:#fff; }
  .kpis { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }
  .kpi { padding:16px 18px; border-inline-start:1px solid var(--line); } .kpi:first-child { border-inline-start:0; }
  .kpi .h { display:flex; align-items:center; gap:8px; font-weight:600; }
  .tile { width:24px; height:24px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; color:#fff; }
  .kpi .v { display:flex; align-items:center; justify-content:space-between; margin:10px 0 6px; }
  .kpi .v b { font-size:28px; }
  .pill { font-size:12px; font-weight:700; padding:3px 8px; border-radius:99px; } .up { background:var(--gl); color:#1f8f38; } .down { background:var(--rl); color:var(--r); }
  .kpi small { color:var(--mute); }
  .row { display:grid; grid-template-columns:1.7fr 1fr; border-top:1px solid var(--line); }
  .row.eq { grid-template-columns:1fr 1fr; }
  .cell { padding:18px 22px; } .cell + .cell { border-inline-start:1px solid var(--line); }
  h2 { margin:0 0 2px; font-size:16px; } .sub { color:var(--mute); margin:0 0 12px; font-size:13px; }
  svg { width:100%; height:auto; display:block; }
  .rank { display:grid; grid-template-columns:34px 1fr auto 110px; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--line); }
  .rank:first-of-type { border-top:0; }
  .rank .name { font-weight:600; } .rank .n { font-weight:700; font-variant-numeric:tabular-nums; }
  .bar { height:8px; border-radius:9px; background:var(--panel); overflow:hidden; } .bar i { display:block; height:100%; border-radius:9px; }
  .legend { display:grid; gap:8px; margin-top:6px; } .legend div { display:flex; justify-content:space-between; align-items:center; } .legend i { width:10px; height:10px; border-radius:50%; display:inline-block; margin-inline-end:8px; }
  table { width:100%; border-collapse:collapse; } th { text-align:start; color:var(--mute); font-weight:600; padding:10px 22px; background:var(--panel); border-block:1px solid var(--line); }
  td { padding:12px 22px; border-bottom:1px solid var(--line); } td.n, th.n { text-align:end; }
  .tag { font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px; } .tag.s { background:var(--gl); color:#1f8f38; } .tag.d { background:var(--pl); color:var(--p); } .tag.x { background:var(--panel); color:var(--mute); }
  .ins { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line); } .ins:first-of-type { border-top:0; }
  .ins b { display:block; } .ins small { color:var(--mute); }
  .tab { display:none; } .tab.on { display:block; }
  @media (max-width:900px) { .app { grid-template-columns:1fr; } aside { border-inline-end:0; border-bottom:1px solid var(--line); } nav { display:flex; flex-wrap:wrap; gap:4px; } nav button { width:auto; } .grp { display:none; }
    .kpis { grid-template-columns:repeat(2,1fr); } .row, .row.eq { grid-template-columns:1fr; } .cell + .cell { border-inline-start:0; border-top:1px solid var(--line); } .rank { grid-template-columns:34px 1fr auto; } .rank .bar { display:none; } }

  [hidden] { display:none !important; }
  .login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
  .login .card { background:#fff; border-radius:24px; padding:28px; width:min(380px,100%); display:grid; gap:12px; box-shadow:0 8px 40px #0001; }
  .login h1 { margin:0; font-size:24px; } .login .sub { margin:0 0 6px; color:var(--mute); }
  .login input { font:inherit; padding:12px 14px; border-radius:12px; border:1px solid var(--line); }
  .login button { font:700 15px inherit; padding:12px; border:0; border-radius:12px; background:var(--p); color:#fff; cursor:pointer; }
  .err { color:var(--r); margin:0; min-height:1.2em; font-size:13px; }
  .out { margin:18px 10px 0; border:0; background:none; color:var(--mute); cursor:pointer; font:600 13px inherit; }
  .status { color:var(--mute); font-size:12px; }
  .empty { padding:40px 22px; text-align:center; color:var(--mute); }
  .donut { display:block; width:100%; max-width:170px; margin:0 auto; }
  .dev { color:var(--mute); font-weight:400; }
  .step { margin:14px 0; } .stephead { display:flex; justify-content:space-between; }
  .bar.big { height:16px; margin-top:6px; }
  .logo img { border-radius:8px; display:block; }
  .login .brand { border-radius:14px; justify-self:center; }
  /* Interaction: hover details, motion, cards that respond. */
  .tip { position:fixed; z-index:50; pointer-events:none; background:#1d1d22; color:#fff; font-size:12px; font-weight:600; padding:7px 11px;
         border-radius:10px; white-space:nowrap; transform:translate(-50%, calc(-100% - 12px)); box-shadow:0 8px 24px #0003; }
  .kpi { transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
  .kpi[data-go] { cursor:pointer; }
  .kpi[data-go]:hover { transform:translateY(-3px); background:#fcfcfe; box-shadow:0 10px 24px #00000012; position:relative; z-index:1; }
  .bar i { transition:width .9s cubic-bezier(.2,.8,.2,1); }
  .donut circle { transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1), stroke-width .2s ease, opacity .2s ease; cursor:pointer; }
  .donut:has(circle.hot) circle:not(.hot) { opacity:.45; }
  .donut circle.hot { stroke-width:27; }
  .legend div { border-radius:8px; padding:3px 6px; margin:0 -6px; transition:background .15s; cursor:default; }
  .legend div.hot { background:var(--panel); }
  svg rect.on { animation:pop .5s cubic-bezier(.2,.8,.2,1) both; transform-box:fill-box; transform-origin:center bottom; }
  svg rect:hover { filter:brightness(1.25); }
  @keyframes pop { from { opacity:0; transform:scaleY(.2); } to { opacity:1; transform:none; } }
  .rank { transition:background .15s; border-radius:10px; } .rank:hover { background:var(--panel); }
  .ins { transition:transform .15s; } .ins:hover { transform:translateX(-3px); }
  nav button { transition:background .15s; }
  #view.fade { animation:fade .35s ease both; }
  @keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }