:root { --hp-mobilebar-height: 58px; }
.hp-mobile-bar, .hp-menu-backdrop { display: none; }
.hp-mode-toggle { display: none; }
.hp-mode-toggle, .hp-mobile-mode-toggle {
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.12);
    color: #fff;
    border-radius: 999px;
    padding: .38rem .7rem;
    font-weight: 700;
    cursor: pointer;
}
.hp-nav-count { font-weight: 800; }
.hp-side-nav a.has-count { border-left: 3px solid var(--hp-yellow); }
.hp-bank-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin: 1rem 0; }
.hp-bank-account-card { border: 1px solid var(--hp-border); border-radius: .6rem; background: #fff; padding: .8rem; }
.hp-bank-account-card strong { display:block; }
.hp-bank-account-card small { color: var(--hp-muted); }
.hp-chart-wrap { display: grid; grid-template-columns: minmax(220px, 420px) 1fr; gap: 1rem; align-items: center; }
.hp-chart-wrap canvas { width: 100%; max-width: 420px; height: auto; }
.hp-chart-legend { display: grid; gap: .35rem; }
.hp-legend-row { display:flex; align-items:center; gap:.45rem; }
.hp-legend-swatch { width: 12px; height: 12px; border-radius: 2px; display:inline-block; }
.hp-table-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
@media (max-width: 780px) {
    body.hp-shell { padding-top: var(--hp-mobilebar-height); }
    .hp-mobile-bar {
        position: fixed; inset: 0 0 auto 0; height: var(--hp-mobilebar-height); z-index: 95;
        display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: 0 .85rem;
        background: linear-gradient(135deg, var(--hp-green-dark), var(--hp-green)); color: #fff; border-bottom: 3px solid var(--hp-yellow);
    }
    .hp-mobile-brand { display:flex; align-items:center; gap:.5rem; min-width:0; }
    .hp-mobile-brand img { width: 34px; height: 34px; object-fit:contain; border-radius:8px; background:#fff; }
    .hp-mobile-brand strong { white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
    .hp-mobile-menu-toggle { border:0; background: var(--hp-yellow); color: var(--hp-green-dark); border-radius:.5rem; width:42px; height:38px; font-size:1.4rem; font-weight:900; }
    .hp-sidebar { position: fixed; left:0; top:var(--hp-mobilebar-height); bottom:0; width:min(86vw, 310px); transform: translateX(-105%); transition: transform .18s ease; z-index:90; box-shadow:0 20px 50px rgba(0,0,0,.28); }
    body.hp-menu-open .hp-sidebar { transform: translateX(0); }
    .hp-menu-backdrop { position: fixed; inset: var(--hp-mobilebar-height) 0 0 0; background: rgba(0,0,0,.35); z-index:80; }
    body.hp-menu-open .hp-menu-backdrop { display:block; }
    .hp-main-shell { margin-left: 0; }
    .hp-topbar { display:none; }
    .hp-content { padding: .85rem .75rem 1.4rem; }
    .hp-side-nav { display:block; }
    .hp-side-nav a { display:block; margin:.15rem 0; }
    body[data-hp-mobile-mode="simple"] .hp-advanced-only { display:none !important; }
    body[data-hp-mobile-mode="simple"] .hp-advanced-only-inline { display:none !important; }
    .grid.two, .hp-chart-wrap { grid-template-columns: 1fr !important; }
    table { font-size: .92rem; }
    .table-wrap { overflow-x:auto; }
}
.hp-bank-account-card.active { border-color: var(--hp-green); box-shadow: 0 0 0 3px rgba(43, 122, 75, .12); }
.hp-bank-account-card[href] { color: inherit; text-decoration: none; display: block; }
.money.negative { color: #9b1c1c; }
.money.positive { color: #146c2e; }
.hp-bank-ledger-table td.num, .hp-bank-ledger-table th.num { text-align: right; white-space: nowrap; }
.hp-details summary { cursor: pointer; font-weight: 800; }
.kpi-grid.compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); min-width: min(460px, 100%); }