Apex — SaaS Analytics Dashboard

<div class="ax-shell">
  <button class="ax-burger" data-ax-toggle aria-label="Toggle navigation" aria-expanded="false"><span></span><span></span><span></span></button>
  <div class="ax-overlay" data-ax-overlay hidden></div>

  <aside class="ax-side" data-ax-side aria-label="Primary">
    <a class="ax-logo" href="#"><span class="ax-logo-mark" aria-hidden="true">A</span> Apex<b>Metrics</b></a>
    <nav class="ax-nav" aria-label="Main navigation">
      <span class="ax-nav-label">Overview</span>
      <a href="#" aria-current="page"><i class="ax-i" aria-hidden="true">▦</i> Dashboard</a>
      <a href="#"><i class="ax-i" aria-hidden="true">📈</i> Analytics</a>
      <a href="#"><i class="ax-i" aria-hidden="true">👥</i> Customers</a>
      <span class="ax-nav-label">Revenue</span>
      <a href="#"><i class="ax-i" aria-hidden="true">💳</i> Subscriptions</a>
      <a href="#"><i class="ax-i" aria-hidden="true">🧾</i> Invoices</a>
      <a href="#"><i class="ax-i" aria-hidden="true">⚙</i> Settings</a>
    </nav>
    <div class="ax-side-card">
      <b>Pro plan</b>
      <p>8,940 / 10,000 MTU used</p>
      <div class="ax-mini-bar"><i style="width:89%"></i></div>
      <a href="#">Upgrade →</a>
    </div>
    <footer class="ax-side-foot">Powered by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></footer>
  </aside>

  <main class="ax-main">
    <header class="ax-top">
      <div>
        <h1>Welcome back, Rihards</h1>
        <p class="ax-sub">Here's how NovaFlow is performing this month.</p>
      </div>
      <div class="ax-top-actions">
        <label class="ax-search"><span class="visually-hidden">Search</span><i aria-hidden="true">⌕</i><input type="search" placeholder="Search metrics, customers…"></label>
        <button class="ax-icon-btn" aria-label="Notifications"><i aria-hidden="true">🔔</i><span class="ax-dot" aria-hidden="true"></span></button>
        <div class="ax-profile"><span class="ax-avatar" aria-hidden="true">RO</span><span class="ax-profile-meta"><b>Rihards O.</b><i>Admin</i></span></div>
      </div>
    </header>

    <div class="ax-kpis">
      <article class="ax-kpi">
        <div class="ax-kpi-top"><span class="ax-kpi-ico" style="--c:#6366f1" aria-hidden="true">$</span><span class="ax-trend ax-up">▲ 12.4%</span></div>
        <b class="ax-kpi-val">$48,210</b><span class="ax-kpi-label">Monthly recurring revenue</span>
        <svg class="ax-spark" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,26 15,22 30,24 45,16 60,18 75,10 90,12 105,6 120,4" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
      </article>
      <article class="ax-kpi">
        <div class="ax-kpi-top"><span class="ax-kpi-ico" style="--c:#10b981" aria-hidden="true">👤</span><span class="ax-trend ax-up">▲ 8.1%</span></div>
        <b class="ax-kpi-val">8,940</b><span class="ax-kpi-label">Active users</span>
        <svg class="ax-spark" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,20 15,22 30,16 45,18 60,12 75,14 90,8 105,10 120,6" fill="none" stroke="#10b981" stroke-width="2"/></svg>
      </article>
      <article class="ax-kpi">
        <div class="ax-kpi-top"><span class="ax-kpi-ico" style="--c:#f59e0b" aria-hidden="true">↻</span><span class="ax-trend ax-down">▼ 0.6%</span></div>
        <b class="ax-kpi-val">2.4%</b><span class="ax-kpi-label">Churn rate</span>
        <svg class="ax-spark" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,8 15,12 30,10 45,16 60,14 75,18 90,16 105,20 120,18" fill="none" stroke="#f59e0b" stroke-width="2"/></svg>
      </article>
      <article class="ax-kpi">
        <div class="ax-kpi-top"><span class="ax-kpi-ico" style="--c:#ec4899" aria-hidden="true">⤢</span><span class="ax-trend ax-up">▲ 3.2%</span></div>
        <b class="ax-kpi-val">4.7%</b><span class="ax-kpi-label">Conversion rate</span>
        <svg class="ax-spark" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,22 15,18 30,20 45,14 60,16 75,12 90,10 105,12 120,8" fill="none" stroke="#ec4899" stroke-width="2"/></svg>
      </article>
    </div>

    <div class="ax-grid">
      <section class="ax-card ax-col-2">
        <div class="ax-card-head"><h2>Revenue overview</h2>
          <div class="ax-seg" role="group" aria-label="Range"><button class="is-active" type="button">7D</button><button type="button">30D</button><button type="button">12M</button></div>
        </div>
        <div class="ax-chart">
          <svg viewBox="0 0 600 220" preserveAspectRatio="none" role="img" aria-label="Revenue trending up over the last 7 days">
            <defs><linearGradient id="axFill" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#6366f1" stop-opacity=".45"/><stop offset="1" stop-color="#6366f1" stop-opacity="0"/></linearGradient></defs>
            <line x1="0" y1="55" x2="600" y2="55" stroke="#23304d" stroke-width="1"/><line x1="0" y1="110" x2="600" y2="110" stroke="#23304d" stroke-width="1"/><line x1="0" y1="165" x2="600" y2="165" stroke="#23304d" stroke-width="1"/>
            <path d="M0,170 C60,150 100,120 160,128 C230,138 270,80 340,86 C410,92 450,46 520,40 C560,36 580,32 600,28 L600,220 L0,220 Z" fill="url(#axFill)"/>
            <path d="M0,170 C60,150 100,120 160,128 C230,138 270,80 340,86 C410,92 450,46 520,40 C560,36 580,32 600,28" fill="none" stroke="#818cf8" stroke-width="2.5"/>
          </svg>
          <div class="ax-x-labels"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
        </div>
      </section>

      <section class="ax-card">
        <div class="ax-card-head"><h2>Plan breakdown</h2></div>
        <div class="ax-donut-wrap">
          <svg class="ax-donut" viewBox="0 0 42 42" role="img" aria-label="Subscription plans: Pro 52 percent, Team 31 percent, Free 17 percent">
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#23304d" stroke-width="6"/>
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#6366f1" stroke-width="6" stroke-dasharray="52 48" stroke-dashoffset="25"/>
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#10b981" stroke-width="6" stroke-dasharray="31 69" stroke-dashoffset="-27"/>
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#f59e0b" stroke-width="6" stroke-dasharray="17 83" stroke-dashoffset="-58"/>
          </svg>
          <div class="ax-donut-center"><b>8.9k</b><span>subs</span></div>
        </div>
        <ul class="ax-legend">
          <li><span style="background:#6366f1"></span> Pro <b>52%</b></li>
          <li><span style="background:#10b981"></span> Team <b>31%</b></li>
          <li><span style="background:#f59e0b"></span> Free <b>17%</b></li>
        </ul>
      </section>
    </div>

    <div class="ax-grid">
      <section class="ax-card ax-col-2">
        <div class="ax-card-head"><h2>Recent signups</h2><a class="ax-link" href="#">View all</a></div>
        <div class="ax-table-wrap">
          <table class="ax-table">
            <thead><tr><th>Customer</th><th>Plan</th><th>MRR</th><th>Signed up</th><th>Status</th></tr></thead>
            <tbody>
              <tr><td><span class="ax-cell-user"><i aria-hidden="true">MK</i> Maya Kessler</span></td><td>Pro</td><td>$49</td><td>2 min ago</td><td><span class="ax-badge ax-b-green">● Active</span></td></tr>
              <tr><td><span class="ax-cell-user"><i aria-hidden="true">JD</i> Jonas Dahl</span></td><td>Team</td><td>$199</td><td>26 min ago</td><td><span class="ax-badge ax-b-green">● Active</span></td></tr>
              <tr><td><span class="ax-cell-user"><i aria-hidden="true">AR</i> Ana Reis</span></td><td>Free</td><td>$0</td><td>1 hr ago</td><td><span class="ax-badge ax-b-amber">● Trial</span></td></tr>
              <tr><td><span class="ax-cell-user"><i aria-hidden="true">LP</i> Liam Park</span></td><td>Pro</td><td>$49</td><td>3 hrs ago</td><td><span class="ax-badge ax-b-green">● Active</span></td></tr>
              <tr><td><span class="ax-cell-user"><i aria-hidden="true">SW</i> Sofia Wong</span></td><td>Team</td><td>$199</td><td>5 hrs ago</td><td><span class="ax-badge ax-b-red">● Past due</span></td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="ax-card">
        <div class="ax-card-head"><h2>Activity</h2></div>
        <ul class="ax-feed">
          <li><span class="ax-feed-dot" style="--c:#10b981" aria-hidden="true"></span><div><p><b>NovaFlow Team</b> upgraded to annual billing.</p><time>2 min ago</time></div></li>
          <li><span class="ax-feed-dot" style="--c:#6366f1" aria-hidden="true"></span><div><p>New integration <b>Slack</b> connected by Maya.</p><time>18 min ago</time></div></li>
          <li><span class="ax-feed-dot" style="--c:#f59e0b" aria-hidden="true"></span><div><p>Usage spike detected on <b>API workspace</b>.</p><time>1 hr ago</time></div></li>
          <li><span class="ax-feed-dot" style="--c:#ec4899" aria-hidden="true"></span><div><p><b>Sofia Wong</b> payment failed — retry scheduled.</p><time>5 hrs ago</time></div></li>
        </ul>
        <div class="ax-quick"><span class="ax-quick-label">Quick actions</span><div class="ax-quick-btns"><button type="button">+ Invite</button><button type="button">Export</button><button type="button">Report</button></div></div>
      </section>
    </div>

    <div class="ax-grid">
      <section class="ax-card">
        <div class="ax-card-head"><h2>Product usage</h2></div>
        <ul class="ax-usage">
          <li><span>Boards created</span><div class="ax-mini-bar"><i style="width:78%;background:#6366f1"></i></div><b>78%</b></li>
          <li><span>Automations run</span><div class="ax-mini-bar"><i style="width:62%;background:#10b981"></i></div><b>62%</b></li>
          <li><span>API calls</span><div class="ax-mini-bar"><i style="width:91%;background:#f59e0b"></i></div><b>91%</b></li>
          <li><span>Storage</span><div class="ax-mini-bar"><i style="width:44%;background:#ec4899"></i></div><b>44%</b></li>
        </ul>
      </section>
      <section class="ax-card ax-col-2">
        <div class="ax-card-head"><h2>Customer health</h2><a class="ax-link" href="#">Segments</a></div>
        <div class="ax-health">
          <div class="ax-health-card ax-h-good"><b>6,120</b><span>Healthy</span><i>Engaged daily</i></div>
          <div class="ax-health-card ax-h-warn"><b>1,840</b><span>At risk</span><i>Low activity</i></div>
          <div class="ax-health-card ax-h-bad"><b>980</b><span>Churn risk</span><i>No login 14d+</i></div>
        </div>
      </section>
    </div>
  </main>
</div>

*{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ax-shell{--ax-bg:#0b1020;--ax-panel:#121a30;--ax-panel-2:#0f1626;--ax-border:#23304d;--ax-text:#e8edf7;--ax-soft:#94a3c4;--ax-accent:#6366f1;min-height:100vh;display:flex;background:var(--ax-bg);color:var(--ax-text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.ax-side{width:248px;flex:none;background:var(--ax-panel-2);border-right:1px solid var(--ax-border);display:flex;flex-direction:column;padding:20px 16px;position:sticky;top:0;height:100vh}
.ax-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:1.12rem;margin-bottom:24px;padding:0 6px}
.ax-logo b{font-weight:800;color:var(--ax-accent)}
.ax-logo-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.ax-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.ax-nav-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#5c6a8c;margin:16px 8px 6px}
.ax-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--ax-soft);text-decoration:none;font-size:.9rem;font-weight:500;transition:background .15s,color .15s}
.ax-nav a:hover{background:#18233e;color:#fff}
.ax-nav a[aria-current=page]{background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(139,92,246,.12));color:#fff;box-shadow:inset 0 0 0 1px rgba(99,102,241,.3)}
.ax-nav a:focus-visible{outline:2px solid var(--ax-accent);outline-offset:2px}
.ax-i{font-style:normal;width:18px;text-align:center;font-size:.95rem}
.ax-side-card{background:linear-gradient(135deg,#1b243f,#161e35);border:1px solid var(--ax-border);border-radius:13px;padding:14px;margin-top:12px}
.ax-side-card b{font-size:.86rem;color:#fff}
.ax-side-card p{font-size:.76rem;color:var(--ax-soft);margin:4px 0 8px}
.ax-side-card a{font-size:.8rem;color:#a5b4fc;text-decoration:none;font-weight:600}
.ax-side-card a:hover{text-decoration:underline}
.ax-mini-bar{height:7px;border-radius:99px;background:#23304d;overflow:hidden;margin:6px 0}
.ax-mini-bar i{display:block;height:100%;border-radius:99px;background:var(--ax-accent)}
.ax-side-foot{margin-top:14px;font-size:.74rem;color:#5c6a8c;padding:0 6px}
.ax-side-foot a{color:#a5b4fc;text-decoration:none;font-weight:600}
.ax-side-foot a:hover{text-decoration:underline}
.ax-main{flex:1;min-width:0;padding:24px 28px 40px}
.ax-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.ax-top h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;margin:0}
.ax-sub{color:var(--ax-soft);font-size:.9rem;margin:3px 0 0}
.ax-top-actions{display:flex;align-items:center;gap:12px}
.ax-search{position:relative;display:flex;align-items:center}
.ax-search i{position:absolute;left:12px;color:var(--ax-soft);font-size:1rem}
.ax-search input{padding:10px 14px 10px 34px;border-radius:11px;border:1px solid var(--ax-border);background:var(--ax-panel);color:#fff;font:inherit;font-size:.88rem;width:240px}
.ax-search input::placeholder{color:#5c6a8c}
.ax-search input:focus{outline:none;border-color:var(--ax-accent);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
.ax-icon-btn{position:relative;width:42px;height:42px;border-radius:11px;border:1px solid var(--ax-border);background:var(--ax-panel);color:var(--ax-soft);font-size:1.05rem;cursor:pointer;transition:.15s}
.ax-icon-btn:hover{color:#fff}
.ax-icon-btn:focus-visible{outline:2px solid var(--ax-accent);outline-offset:2px}
.ax-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#ec4899;border:2px solid var(--ax-panel)}
.ax-profile{display:flex;align-items:center;gap:9px}
.ax-avatar{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:.82rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.ax-profile-meta{display:flex;flex-direction:column;line-height:1.2}
.ax-profile-meta b{font-size:.86rem;color:#fff}
.ax-profile-meta i{font-style:normal;font-size:.74rem;color:var(--ax-soft)}
.ax-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.ax-kpi{background:var(--ax-panel);border:1px solid var(--ax-border);border-radius:15px;padding:16px 16px 10px;position:relative;overflow:hidden}
.ax-kpi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ax-kpi-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1rem;color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}
.ax-trend{font-size:.76rem;font-weight:700;padding:3px 8px;border-radius:999px}
.ax-up{color:#34d399;background:rgba(52,211,153,.14)}
.ax-down{color:#fb7185;background:rgba(251,113,133,.14)}
.ax-kpi-val{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800;display:block;line-height:1.1}
.ax-kpi-label{font-size:.82rem;color:var(--ax-soft)}
.ax-spark{width:100%;height:30px;margin-top:8px;display:block}
.ax-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.ax-col-2{grid-column:span 2}
.ax-card{background:var(--ax-panel);border:1px solid var(--ax-border);border-radius:15px;padding:18px;min-width:0}
.ax-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.ax-card-head h2{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:700;margin:0}
.ax-link{font-size:.82rem;color:#a5b4fc;text-decoration:none;font-weight:600}.ax-link:hover{text-decoration:underline}
.ax-seg{display:flex;gap:4px;background:var(--ax-panel-2);border:1px solid var(--ax-border);border-radius:9px;padding:3px}
.ax-seg button{border:0;background:transparent;color:var(--ax-soft);font:inherit;font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:7px;cursor:pointer}
.ax-seg button.is-active{background:var(--ax-accent);color:#fff}
.ax-seg button:focus-visible{outline:2px solid var(--ax-accent);outline-offset:1px}
.ax-chart{position:relative}
.ax-chart svg{width:100%;height:200px;display:block}
.ax-x-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem;color:#5c6a8c}
.ax-donut-wrap{position:relative;width:160px;margin:6px auto 14px}
.ax-donut{width:160px;height:160px;transform:rotate(-90deg)}
.ax-donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ax-donut-center b{display:block;font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:800}
.ax-donut-center span{font-size:.74rem;color:var(--ax-soft)}
.ax-legend{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ax-legend li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ax-soft)}
.ax-legend li b{margin-left:auto;color:#fff}
.ax-legend span{width:11px;height:11px;border-radius:3px;flex:none}
.ax-table-wrap{overflow-x:auto}
.ax-table{width:100%;border-collapse:collapse;min-width:480px}
.ax-table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:#5c6a8c;font-weight:600;padding:0 12px 12px}
.ax-table td{padding:12px;border-top:1px solid var(--ax-border);font-size:.88rem}
.ax-cell-user{display:flex;align-items:center;gap:9px;font-weight:600;color:#fff}
.ax-cell-user i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:.7rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#475569,#334155)}
.ax-badge{font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.ax-b-green{color:#34d399;background:rgba(52,211,153,.13)}
.ax-b-amber{color:#fbbf24;background:rgba(251,191,36,.13)}
.ax-b-red{color:#fb7185;background:rgba(251,113,133,.13)}
.ax-feed{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:14px}
.ax-feed li{display:flex;gap:11px}
.ax-feed-dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none;margin-top:5px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
.ax-feed p{margin:0;font-size:.86rem;color:#cdd6ea}.ax-feed b{color:#fff}
.ax-feed time{font-size:.74rem;color:#5c6a8c}
.ax-quick{border-top:1px solid var(--ax-border);padding-top:14px}
.ax-quick-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#5c6a8c}
.ax-quick-btns{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.ax-quick-btns button{flex:1;min-width:80px;border:1px solid var(--ax-border);background:var(--ax-panel-2);color:#cdd6ea;font:inherit;font-size:.8rem;font-weight:600;padding:9px;border-radius:9px;cursor:pointer;transition:.15s}
.ax-quick-btns button:hover{border-color:var(--ax-accent);color:#fff}
.ax-quick-btns button:focus-visible{outline:2px solid var(--ax-accent);outline-offset:2px}
.ax-usage{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
.ax-usage li{display:grid;grid-template-columns:120px 1fr 42px;align-items:center;gap:12px;font-size:.84rem;color:var(--ax-soft)}
.ax-usage li b{text-align:right;color:#fff}
.ax-health{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ax-health-card{border-radius:13px;padding:16px;border:1px solid var(--ax-border)}
.ax-health-card b{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:800;display:block}
.ax-health-card span{font-weight:700;font-size:.9rem}
.ax-health-card i{font-style:normal;font-size:.76rem;color:var(--ax-soft);display:block;margin-top:2px}
.ax-h-good{background:rgba(52,211,153,.08)}.ax-h-good span{color:#34d399}
.ax-h-warn{background:rgba(251,191,36,.08)}.ax-h-warn span{color:#fbbf24}
.ax-h-bad{background:rgba(251,113,133,.08)}.ax-h-bad span{color:#fb7185}
.ax-burger{display:none;position:fixed;top:16px;left:16px;z-index:60;width:44px;height:44px;border-radius:11px;border:1px solid var(--ax-border);background:var(--ax-panel);flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.ax-burger span{width:18px;height:2px;background:#fff;border-radius:2px}
.ax-overlay{position:fixed;inset:0;background:rgba(4,7,15,.6);z-index:40;border:0}
@media(max-width:1080px){.ax-kpis{grid-template-columns:repeat(2,1fr)}.ax-grid{grid-template-columns:1fr}.ax-col-2{grid-column:span 1}.ax-health{grid-template-columns:1fr}}
@media(max-width:760px){
  .ax-burger{display:flex}
  .ax-side{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .25s ease}
  .ax-side.is-open{transform:translateX(0)}
  .ax-main{padding:72px 16px 32px}
  .ax-top-actions{width:100%;justify-content:space-between}
  .ax-search input{width:100%}.ax-search{flex:1}
  .ax-kpis{grid-template-columns:1fr}
  .ax-usage li{grid-template-columns:90px 1fr 36px}
}
@media(prefers-reduced-motion:reduce){.ax-side{transition:none}.ax-nav a,.ax-icon-btn,.ax-quick-btns button{transition:none}}

(function(){
  var side=document.querySelector('[data-ax-side]');
  var btn=document.querySelector('[data-ax-toggle]');
  var ov=document.querySelector('[data-ax-overlay]');
  if(!side||!btn)return;
  function open(o){side.classList.toggle('is-open',o);btn.setAttribute('aria-expanded',o?'true':'false');if(ov)ov.hidden=!o;}
  btn.addEventListener('click',function(){open(!side.classList.contains('is-open'));});
  if(ov)ov.addEventListener('click',function(){open(false);});
  document.querySelectorAll('.ax-seg button').forEach(function(b){b.addEventListener('click',function(){b.parentNode.querySelectorAll('button').forEach(function(x){x.classList.remove('is-active');});b.classList.add('is-active');});});
})();