:root{--lm-bg:#0f1016;--lm-surface:#171922;--lm-raised:#20232e;--lm-border:#303442;--lm-primary:#8b5cf6;--lm-strong:#7c3aed;--lm-magenta:#c026d3;--lm-lavender:#d9d6ee;--lm-text:#f4f3fb;--lm-muted:#a6a0c4}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--lm-bg);color:var(--lm-text)}
.app-shell,.app-shell main,[data-section],.lm-surface,.lm-chart{min-width:0}
button,input,select{max-width:100%}
.lm-surface{background:var(--lm-surface);border-color:var(--lm-border)}
.lm-raised{background:var(--lm-raised);border-color:var(--lm-border)}
.lm-muted{color:var(--lm-muted)}
.lm-primary{background:linear-gradient(135deg,var(--lm-primary),var(--lm-magenta))}
.lm-input{background:var(--lm-bg);border:1px solid var(--lm-border);color:var(--lm-text)}
.lm-input:focus{outline:none;border-color:var(--lm-primary);box-shadow:0 0 0 3px rgb(139 92 246 / .18)}
select option{background:var(--lm-bg)}
::selection{background:rgb(139 92 246 / .35)}
.lm-surface tbody td{color:var(--lm-text)}
.lm-surface tbody tr:hover{background:rgb(255 255 255 / .035)}
.lm-chip{border:1px solid var(--lm-border);border-radius:.75rem;padding:.45rem .75rem;color:var(--lm-muted);font-size:.78rem}
.lm-chip-active{background:rgb(139 92 246 / .2);border-color:var(--lm-primary);color:var(--lm-text)}
.lm-metric,.lm-chart{background:rgb(0 0 0 / .12);border:1px solid var(--lm-border);border-radius:1rem;padding:1rem}
.lm-metric small{display:block;color:var(--lm-muted);font-size:.75rem}
.lm-metric strong{display:block;font-size:1.1rem;margin-top:.4rem}
.lm-chart h3{font-size:.9rem;font-weight:600}
.chart-row{display:grid;grid-template-columns:80px minmax(0,1fr) 100px;align-items:center;gap:.65rem;margin:.55rem 0;font-size:.7rem}
.chart-row>div{display:grid;gap:3px;min-width:0}.chart-row b{text-align:right}
.mobile-header,.mobile-menu-overlay,.sidebar-mobile-title{display:none}

@media (max-width:767px){
  body.menu-open{overflow:hidden}
  .mobile-header{
    position:sticky;
    top:0;
    z-index:40;
    display:flex;
    height:4.25rem;
    align-items:center;
    gap:.65rem;
    padding:.8rem 1rem;
    border-bottom:1px solid var(--lm-border);
  }
  .mobile-header img{width:8.5rem}
  .mobile-header>span{color:var(--lm-muted);font-size:.72rem}
  #mobileMenuButton{
    width:2.75rem;
    height:2.75rem;
    margin-left:auto;
    display:grid;
    place-content:center;
    gap:5px;
    border:1px solid var(--lm-border);
    border-radius:.8rem;
    background:var(--lm-raised);
  }
  #mobileMenuButton span{display:block;width:20px;height:2px;border-radius:2px;background:var(--lm-text)}
  .mobile-menu-overlay{
    position:fixed;
    inset:0;
    z-index:48;
    display:block;
    visibility:hidden;
    opacity:0;
    background:rgb(0 0 0 / .68);
    backdrop-filter:blur(2px);
    transition:opacity .2s ease,visibility .2s ease;
  }
  .mobile-menu-overlay.open{visibility:visible;opacity:1}
  .app-shell{display:block}
  .app-shell>aside{
    position:fixed!important;
    inset:0 auto 0 0!important;
    z-index:50;
    display:flex!important;
    width:min(19rem,86vw)!important;
    min-height:100dvh;
    padding:1.25rem;
    border-right:1px solid var(--lm-border);
    border-bottom:0;
    box-shadow:1rem 0 3rem rgb(0 0 0 / .35);
    transform:translateX(-105%);
    visibility:hidden;
    transition:transform .24s ease,visibility .24s ease;
  }
  .app-shell>aside.open{transform:translateX(0);visibility:visible}
  .app-shell>aside>div:first-child{display:block}
  .sidebar-mobile-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;font-weight:700}
  #mobileMenuClose{font-size:2rem;line-height:1;color:var(--lm-muted);padding:.2rem .45rem}
  .app-shell>aside>div:first-child img{width:8.5rem}
  .app-shell>aside>div:first-child p{margin-top:.4rem}
  .app-shell>aside nav{
    display:grid;
    gap:.5rem;
    margin-top:2rem;
    overflow:visible;
  }
  .app-shell>aside nav button{
    width:100%;
    white-space:nowrap;
    padding:.8rem 1rem;
  }
  .app-shell>aside>div:last-child{display:block}
  .app-shell main{width:100%;margin-left:0!important;padding:1rem!important}
  [data-section]>header{align-items:stretch}
  [data-section]>header h1{font-size:1.75rem;line-height:2.1rem}
  #overviewSection>header #newBtn,
  #usersSection>header #newUserBtn,
  #reportSection>.no-print #printBtn{width:100%}
  #overviewSection .lm-surface>.p-5{padding:1rem}
  #search,#typeFilter,#statusFilter{width:100%}
  #startDate,#endDate{min-width:0}

  .lm-chip{flex:1 1 calc(33.333% - .5rem);text-align:center;white-space:nowrap}
  #dashboardView{flex:1 1 100%;width:100%}
  .lm-metric,.lm-chart{padding:.9rem}
  .chart-row{
    grid-template-columns:58px minmax(0,1fr) 78px;
    gap:.45rem;
    font-size:.65rem;
  }
  .chart-row>span{overflow-wrap:anywhere}
  .chart-row b{font-size:.62rem;overflow-wrap:anywhere}

  #overviewSection table,#overviewSection thead,#overviewSection tbody,
  #overviewSection tr,#overviewSection td,
  #usersSection table,#usersSection thead,#usersSection tbody,
  #usersSection tr,#usersSection td{display:block;width:100%}
  #overviewSection thead,#usersSection thead{display:none}
  #overviewSection tbody,#usersSection tbody{padding:.65rem}
  #overviewSection tbody tr,#usersSection tbody tr{
    margin-bottom:.75rem;
    padding:.85rem;
    border:1px solid var(--lm-border);
    border-radius:1rem;
    background:rgb(0 0 0 / .12);
  }
  #overviewSection tbody tr:last-child,#usersSection tbody tr:last-child{margin-bottom:0}
  #overviewSection tbody td,#usersSection tbody td{
    display:grid;
    grid-template-columns:minmax(88px,35%) minmax(0,1fr);
    gap:.75rem;
    align-items:start;
    padding:.5rem 0;
    text-align:left;
    white-space:normal;
  }
  #overviewSection tbody td::before,#usersSection tbody td::before{
    color:var(--lm-muted);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  #overviewSection tbody td:nth-child(1)::before{content:"Descrição"}
  #overviewSection tbody td:nth-child(2)::before{content:"Tipo"}
  #overviewSection tbody td:nth-child(3)::before{content:"Forma"}
  #overviewSection tbody td:nth-child(4)::before{content:"Vencimento"}
  #overviewSection tbody td:nth-child(5)::before{content:"Valor"}
  #overviewSection tbody td:nth-child(6)::before{content:"Status"}
  #overviewSection tbody td:nth-child(7)::before{content:"Ações"}
  #usersSection tbody td:nth-child(1)::before{content:"Nome"}
  #usersSection tbody td:nth-child(2)::before{content:"E-mail"}
  #usersSection tbody td:nth-child(3)::before{content:"Perfil"}
  #usersSection tbody td:nth-child(4)::before{content:"Situação"}
  #usersSection tbody td:nth-child(5)::before{content:"Ação"}
  #overviewSection tbody td:last-child,#usersSection tbody td:last-child{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    padding-top:.75rem;
    border-top:1px solid var(--lm-border);
  }
  #overviewSection tbody td:last-child::before,#usersSection tbody td:last-child::before{
    flex:0 0 100%;
  }
  #overviewSection tbody td:last-child button,
  #usersSection tbody td:last-child button{margin-left:0!important}

  #accountModal,#userModal,#confirmModal,#paymentModal{padding:.5rem}
  #accountForm,#userForm,#confirmModal>div,#paymentForm{
    padding:1.1rem;
    border-radius:1.25rem;
    max-height:calc(100dvh - 1rem);
    overflow-y:auto;
  }
  #accountForm .border,#installmentBox,#paymentHistoryBox{padding:.8rem}
  #accountForm .border>div:first-child{align-items:flex-start;flex-wrap:wrap}
  .remove-item,.remove-installment{min-height:2.5rem}
  #toast{left:1rem;right:1rem;bottom:1rem;text-align:center}

  #reportSection>.no-print{display:block}
  .print-page{min-width:900px}
  #reportSection{overflow-x:auto}
}
.bar{display:block;height:5px;border-radius:99px;min-width:2px}.bar.revenue{background:#34d399}.bar.expense{background:#fb7185}