/* Hamburgos Finanças — v1.21.7
   Auditoria mobile global.
   Corrige responsividade de Início, Movimentações, Contas e cartões,
   Planejamento, Família, Configurações, Faturas e telas de autenticação.
   Desktop permanece inalterado. */

@media (max-width: 900px){
  :root{
    --hf-mobile-gutter:14px;
    --hf-mobile-radius:20px;
  }

  html,body{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body{overscroll-behavior-x:none}
  *,*::before,*::after{box-sizing:border-box!important}

  /* ---------- Topo / navegação ---------- */
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:850!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:66px!important;
    padding:8px 12px!important;
    padding-top:max(8px,env(safe-area-inset-top))!important;
    gap:9px!important;
    overflow:hidden!important;
  }
  .sidebar-mobile-toggle{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:14px!important;
  }
  .topbar .brand{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .topbar .brand-mark.brand-mark-image{
    width:48px!important;
    height:44px!important;
    min-width:48px!important;
    flex:0 0 48px!important;
    border-radius:9px!important;
  }
  .topbar .brand>span:last-child{
    min-width:0!important;
    max-width:100%!important;
    font-size:.9rem!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .topbar nav{
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
  }
  .topbar .account-link{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    border-radius:50%!important;
    overflow:hidden!important;
  }
  .topbar .account-link img,.topbar .mini-avatar{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
  .topbar .account-link>span:last-child{display:none!important}

  .app-sidebar,
  body.sidebar-collapsed .app-sidebar{
    top:0!important;
    width:min(86vw,320px)!important;
    max-width:320px!important;
    padding-top:max(10px,env(safe-area-inset-top))!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
    box-shadow:24px 0 60px rgba(14,45,42,.18)!important;
  }
  .sidebar-backdrop{z-index:980!important}
  .app-sidebar{z-index:1000!important}
  .sidebar-item,.sidebar-new{min-height:46px!important}

  /* ---------- Área principal / cabeçalhos ---------- */
  .dashboard,
  main.dashboard,
  .invoice-dashboard,
  .account-dashboard{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px var(--hf-mobile-gutter) calc(92px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  .dashboard>*,.invoice-dashboard>*,.account-dashboard>*{min-width:0!important;max-width:100%!important}

  .page-head,.overview-head,.movements-head,.invoice-page-head,.settings-head{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    margin:0 0 16px!important;
  }
  .page-head h1,.overview-head h1,.movements-head h1,.invoice-page-head h1,.settings-head h1{
    width:100%!important;
    margin:2px 0 5px!important;
    font-size:clamp(1.8rem,8vw,2.25rem)!important;
    line-height:1.05!important;
    letter-spacing:-.04em!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  .page-head .muted,.overview-head .muted,.movements-head .muted,.invoice-page-head .muted,.settings-head .muted{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:.9rem!important;
    line-height:1.45!important;
  }
  .eyebrow{line-height:1.25!important}

  .head-actions,.overview-actions,.movements-head-actions,.accounts-head-actions,.invoice-head-actions{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  .overview-primary,.head-actions .primary,.invoice-new-purchase,.invoice-manage-link{
    width:100%!important;
    min-height:48px!important;
    justify-content:center!important;
  }

  /* Espaço pessoal/família */
  .space-switch{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:8px!important;
    align-items:end!important;
  }
  .space-switch .space-label{grid-column:1/-1!important}
  .space-switch .space-menu{width:100%!important;min-width:0!important;max-width:100%!important}
  .space-switch .space-menu summary{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:0 12px!important;
  }
  .space-switch .space-menu summary>span:nth-child(2){
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .space-switch .family-only-manage{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
  }
  .space-switch .family-only-manage span:last-child{display:none!important}
  .space-options{
    left:0!important;
    right:auto!important;
    width:min(100%,360px)!important;
    max-width:calc(100vw - 28px)!important;
  }

  /* Seletor de mês */
  .overview-month-wrap,.invoice-month-picker,.pretty-month-picker,.pretty-month-picker details{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .pretty-month-picker summary{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:0 12px 0 14px!important;
    font-size:.95rem!important;
  }
  .month-popover,.pretty-month-picker .month-popover{
    left:0!important;
    right:auto!important;
    width:min(360px,calc(100vw - 28px))!important;
    max-width:calc(100vw - 28px)!important;
  }

  /* ---------- Cartões/painéis genéricos ---------- */
  .panel,.settings-card,.dashboard-focus-card,.financial-glance{
    min-width:0!important;
    max-width:100%!important;
    border-radius:var(--hf-mobile-radius)!important;
  }
  .panel-head,.invoice-panel-head{padding:16px!important}
  .panel-head h2,.invoice-panel-head h2{font-size:1.08rem!important}

  .summary-grid,.card-grid,.analytics-grid,.dashboard-focus-grid,.settings-grid,.admin-grid,
  .invoice-summary-grid,.invoice-card-grid,.family-overview-grid,.planning-grid,.account-forms-grid{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  /* ---------- Dashboard / Início ---------- */
  .financial-glance{
    padding:15px!important;
    margin:0 0 12px!important;
    overflow:hidden!important;
  }
  .financial-glance-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding-bottom:12px!important;
  }
  .financial-glance-heading{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .financial-month-status{
    justify-self:start!important;
    width:max-content!important;
    max-width:100%!important;
    min-height:36px!important;
    padding:6px 11px 6px 7px!important;
    gap:7px!important;
    font-size:.78rem!important;
    line-height:1!important;
    overflow:hidden!important;
  }
  .financial-month-status-icon{width:23px!important;height:23px!important;flex:0 0 23px!important}
  .financial-month-status>span:last-child{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .financial-month-message{
    width:100%!important;
    margin:0!important;
    font-size:.78rem!important;
    line-height:1.45!important;
    text-align:left!important;
  }
  .financial-glance-metrics{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-top:12px!important;
  }
  .financial-glance-metrics article{
    min-width:0!important;
    min-height:108px!important;
    padding:12px!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:center!important;
  }
  .financial-metric-icon{width:34px!important;height:34px!important;flex:0 0 34px!important}
  .financial-glance-metrics article>div{min-width:0!important;text-align:left!important}
  .financial-glance-metrics article>div>span{font-size:.62rem!important;line-height:1.25!important}
  .financial-glance-metrics article strong{font-size:1.02rem!important;line-height:1.1!important}
  .financial-glance-metrics article small{font-size:.64rem!important;line-height:1.35!important;white-space:normal!important}

  .dashboard-focus-grid{margin-bottom:12px!important}
  .dashboard-focus-card{padding:16px!important}
  .dashboard-focus-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }
  .dashboard-focus-head .secondary{width:100%!important;justify-content:center!important;min-height:44px!important}
  .planning-overview-total{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .commitments-empty{min-height:96px!important;padding:10px 4px!important}
  .commitment-item{min-width:0!important}

  .grouped-accounts-panel{margin-top:12px!important}
  .bank-account-grid{grid-template-columns:1fr!important;gap:12px!important}
  .bank-account-card{grid-template-columns:1fr!important;min-width:0!important}
  .bank-account-main,.linked-credit-card{min-width:0!important;padding:16px!important}
  .bank-account-card .linked-credit-card{border-left:0!important;border-top:1px solid rgba(255,255,255,.2)!important}
  .bank-brand-line,.credit-brand-line{min-width:0!important}
  .bank-brand-line strong,.credit-brand-line strong{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  .overview-recent-panel{margin-top:12px!important}
  .overview-recent-list{min-width:0!important}
  .overview-recent-list>*,.overview-recent-copy{min-width:0!important}

  .analytics-grid{margin-top:12px!important}
  .chart-card{min-width:0!important}
  .bar-chart,.donut-layout{min-width:0!important;max-width:100%!important}
  .donut-layout{grid-template-columns:1fr!important;gap:14px!important}
  canvas{max-width:100%!important}

  /* ---------- Movimentações ---------- */
  .movements-toolbar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .movements-toolbar .export-btn{width:100%!important;justify-content:center!important;min-height:44px!important}
  .movement-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .movement-summary{min-width:0!important;padding:12px!important}
  .movement-filters{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:16px!important;
  }
  .movement-filter-buttons{
    grid-column:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  .movement-filter-buttons .primary{width:100%!important}
  .movement-list-v2{gap:9px!important}
  .movement-row-v2{
    min-width:0!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:8px 10px!important;
    padding:12px!important;
  }
  .movement-kind-icon{width:40px!important;height:40px!important}
  .movement-copy,.movement-title-line{min-width:0!important}
  .movement-title-line{flex-wrap:wrap!important;row-gap:4px!important}
  .movement-account-chip{max-width:100%!important}
  .movement-copy small{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.35!important;
  }
  .movement-value{
    grid-column:2!important;
    justify-self:start!important;
    font-size:.96rem!important;
  }
  .movement-row-actions{
    grid-column:1/-1!important;
    grid-row:auto!important;
    width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:7px!important;
    padding-top:3px!important;
  }
  .movement-row-actions .edit-btn,.movement-row-actions .delete-btn,.movement-row-actions .recurring-cancel-btn{
    min-height:40px!important;
  }
  .transfer-row-v2{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:10px!important;
  }
  .transfer-row-v2>b,.transfer-row-v2>.amount{grid-column:2!important;justify-self:start!important}

  /* ---------- Contas e cartões / Faturas ---------- */
  .invoice-head-actions{align-items:stretch!important}
  .invoice-space-switch,.invoice-space-switch label,.invoice-space-switch select,
  .invoice-family-manage,.invoice-new-purchase,.invoice-manage-link{width:100%!important;min-width:0!important;max-width:100%!important}
  .invoice-toolbar{
    width:100%!important;
    min-width:0!important;
    padding:13px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .invoice-summary-card{padding:15px!important;min-width:0!important}
  .invoice-card-grid{padding:12px!important}
  .invoice-credit-card{min-width:0!important;min-height:220px!important;padding:17px!important}
  .invoice-credit-brand{min-width:0!important}
  .invoice-credit-brand>div{min-width:0!important}
  .invoice-credit-brand strong{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .invoice-credit-meta,.invoice-credit-dates{gap:8px!important;flex-wrap:wrap!important}
  .invoice-panel-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .invoice-detail-actions{width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .invoice-add-selected{width:100%!important}
  .invoice-detail-total{text-align:left!important}
  .invoice-transaction-row{
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:8px 10px!important;
    padding:13px!important;
  }
  .invoice-transaction-icon{width:38px!important;height:38px!important}
  .invoice-transaction-main{min-width:0!important}
  .invoice-transaction-main strong{white-space:normal!important;overflow-wrap:anywhere!important}
  .invoice-transaction-value{grid-column:2!important;text-align:left!important}

  /* ---------- Configurações ---------- */
  .settings-grid,.admin-grid{grid-template-columns:1fr!important;gap:12px!important}
  .settings-card,.panel.settings-card,.subpanel{padding:15px!important;border-radius:18px!important}
  .settings-card h2{font-size:1.25rem!important}
  .profile-summary{padding:12px!important;gap:10px!important}
  .profile-avatar{width:54px!important;height:54px!important;flex:0 0 54px!important}
  .profile-summary>div{min-width:0!important}
  .profile-summary strong,.profile-summary small{overflow-wrap:anywhere!important}
  .form-row.two{grid-template-columns:1fr!important}
  .profile-action-row,.security-button-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .profile-action-row>* ,.security-button-row>*{width:100%!important}
  .default-space-options{grid-template-columns:1fr!important}
  .twofactor-manage-grid{grid-template-columns:1fr!important}
  .totp-qr-setup{grid-template-columns:1fr!important}
  .totp-qr-frame{width:min(250px,100%)!important;max-width:100%!important;margin-inline:auto!important}
  .totp-qr-frame canvas,.totp-qr-frame img{width:100%!important;height:auto!important;max-width:230px!important}
  .recovery-code-grid{grid-template-columns:1fr 1fr!important}
  .reset-data-form{grid-template-columns:1fr!important}
  .admin-grid .form-row.two{grid-template-columns:1fr!important}
  .callback,.totp-setup-key{overflow-wrap:anywhere!important;word-break:break-word!important}

  /* ---------- Dialogs / modais ---------- */
  dialog,#familyDialog,#accountsDialog,#newTransaction,#editTransaction,.planning-dialog,.movement-dialog{
    width:calc(100dvw - 12px)!important;
    max-width:calc(100dvw - 12px)!important;
    min-width:0!important;
    max-height:calc(100dvh - 12px)!important;
    margin:auto!important;
    padding:0!important;
    border-radius:20px!important;
  }
  dialog::backdrop{backdrop-filter:blur(3px)!important}
  .modal-form,.family-modal,.planning-modal,.movement-modal,.movement-modal-v2,.accounts-modal{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:calc(100dvh - 12px)!important;
    padding:16px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .modal-head,.movement-modal-head,.planning-head{
    min-width:0!important;
    gap:10px!important;
  }
  .modal-head h2,.movement-modal-head h2,.planning-head h2{font-size:1.45rem!important;line-height:1.1!important}
  .modal-head .close,.planning-head .close{flex:0 0 42px!important;width:42px!important;height:42px!important}
  .movement-type-selector{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .movement-type-option{
    grid-template-columns:38px minmax(0,1fr)!important;
    min-height:82px!important;
    padding:11px!important;
    gap:8px!important;
  }
  .movement-type-option>span{width:38px!important;height:38px!important}
  .movement-type-option strong{font-size:.88rem!important}
  .movement-type-option small{font-size:.68rem!important;line-height:1.3!important}
  .movement-form-grid{grid-template-columns:1fr!important;gap:10px!important}
  .movement-field.wide{grid-column:auto!important}
  .movement-field input,.movement-field select,.movement-field textarea,
  .form-grid input,.form-grid select,.form-grid textarea,
  .planning-create input,.planning-create select,
  .settings-form input,.settings-form select,.settings-form textarea{
    font-size:16px!important; /* evita zoom automático do Safari/iOS */
  }
  .movement-selected-kind{grid-template-columns:34px 38px minmax(0,1fr)!important;padding:9px!important}
  .movement-selected-icon{width:38px!important;height:38px!important}
  .purchase-mode-switch{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  .purchase-mode-switch span{min-height:44px!important;padding:6px!important;font-size:.72rem!important;text-align:center!important}
  .installment-fields,.recurring-fields{grid-template-columns:1fr!important}
  .installment-preview{grid-column:auto!important}

  /* Planejamento */
  .planning-head{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .planning-head-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:8px!important;
    align-items:end!important;
    margin-top:4px!important;
  }
  .planning-month-picker{width:100%!important;min-width:0!important}
  .planning-summary{grid-template-columns:1fr!important;gap:8px!important}
  .planning-summary article{min-width:0!important;padding:12px!important}
  .planning-grid{grid-template-columns:1fr!important}
  .planning-budget-card{padding:13px!important}
  .planning-budget-top,.planning-budget-values,.planning-budget-foot{min-width:0!important}
  .planning-budget-values{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .planning-create{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding-top:14px!important;
  }
  .planning-create-title{grid-column:auto!important}
  .planning-create .primary{width:100%!important;min-height:48px!important}
  .planning-category-picker.is-open .category-color-menu{
    grid-template-columns:1fr!important;
    max-height:min(230px,36dvh)!important;
  }

  /* Família */
  #familyDialog .family-modal{padding:16px!important}
  .family-title{padding:12px!important;gap:8px!important}
  .member-list{grid-template-columns:1fr!important}
  .member-item{min-width:0!important;padding:10px!important}
  .member-item>div{min-width:0!important}
  .member-item strong,.member-item small{overflow-wrap:anywhere!important}
  .family-permissions-section{padding-top:14px!important}
  .family-permission-list,.permission-toggle-grid{grid-template-columns:1fr!important;gap:8px!important}
  .family-permission-card{padding:12px!important}
  .permission-toggle-grid .permission-toggle{min-width:0!important;padding:10px!important}
  .invite-box{grid-template-columns:1fr!important}
  .invite-box .primary{width:100%!important}

  /* Contas / cadastro */
  #accountsDialog .account-form-columns{grid-template-columns:1fr!important;gap:14px!important}
  #accountsDialog .account-form-column{min-width:0!important;padding:0!important;border:0!important}
  #accountsDialog .account-form-column+ .account-form-column{border-top:1px solid #e4efed!important;padding-top:14px!important}
  #accountsDialog .account-manager-list.account-manager-pairs{grid-template-columns:1fr!important}
  #accountsDialog .account-manager-pairs .manager-bank-pair{grid-template-columns:1fr!important;min-width:0!important}
  #accountsDialog .account-manager-pairs .manager-pair-pane{min-width:0!important;padding:14px!important}
  #accountsDialog .account-manager-pairs .manager-card-pane{border-left:0!important;border-top:1px solid rgba(255,255,255,.18)!important}
  #accountsDialog .manager-pane-head{align-items:flex-start!important;gap:8px!important}
  #accountsDialog .manager-pane-actions{flex-wrap:wrap!important;justify-content:flex-end!important}
  #accountsDialog .product-toggle{min-width:0!important;padding:10px!important}
  #accountsDialog .day-grid{grid-template-columns:1fr 1fr!important}
  #accountsDialog .account-create-submit{width:100%!important}

  /* ---------- Login / recuperação ---------- */
  .auth-body{padding:14px!important;padding-bottom:max(14px,env(safe-area-inset-bottom))!important}
  .auth-shell{width:100%!important;grid-template-columns:1fr!important;gap:0!important}
  .auth-intro{display:none!important}
  .auth-card{
    width:100%!important;
    max-width:470px!important;
    padding:24px 18px!important;
    border-radius:22px!important;
    justify-self:center!important;
  }
  .auth-card h2{font-size:1.65rem!important}
  .social-row{grid-template-columns:1fr!important}
  .recovery-shell{width:min(100%,470px)!important;padding:20px 0!important;gap:14px!important}
  .recovery-card{padding:22px 18px!important;border-radius:22px!important}
  .recovery-brand{max-width:100%!important}

  /* Elementos que nunca devem forçar rolagem lateral */
  img,svg,canvas,video{max-width:100%!important}
  input,select,textarea,button{max-width:100%}
}

@media (max-width: 560px){
  :root{--hf-mobile-gutter:11px}

  .topbar .brand>span:last-child{font-size:.82rem!important}
  .page-head h1,.overview-head h1,.movements-head h1,.invoice-page-head h1,.settings-head h1{font-size:1.9rem!important}

  .financial-glance-metrics{grid-template-columns:1fr!important}
  .financial-glance-metrics article{
    min-height:0!important;
    padding:12px 13px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
  }
  .financial-metric-icon{width:38px!important;height:38px!important;flex-basis:38px!important}
  .financial-glance-metrics article strong{font-size:1.08rem!important}

  .planning-overview-total{grid-template-columns:1fr!important}
  .movement-summary-strip{grid-template-columns:1fr!important}
  .movement-filter-buttons{grid-template-columns:1fr!important}
  .movement-filter-buttons .clear-filter{min-height:42px!important;text-align:center!important}

  .movement-type-selector{grid-template-columns:1fr!important}
  .movement-type-option{min-height:70px!important}
  .purchase-mode-switch{grid-template-columns:1fr!important}
  .purchase-mode-switch span{min-height:42px!important;font-size:.8rem!important}

  .planning-budget-values{grid-template-columns:1fr!important}
  .recovery-code-grid{grid-template-columns:1fr!important}

  .invoice-credit-card{min-height:205px!important}
  .invoice-credit-dates{display:grid!important;grid-template-columns:1fr 1fr!important}

  .category-color-menu{max-height:min(250px,38dvh)!important}
}

@media (max-width: 390px){
  .topbar .brand-mark.brand-mark-image{width:44px!important;height:40px!important;min-width:44px!important;flex-basis:44px!important}
  .topbar .brand>span:last-child{font-size:.76rem!important}
  .space-switch{grid-template-columns:minmax(0,1fr) 46px!important}
  .space-switch .family-only-manage{width:46px!important;min-width:46px!important;height:46px!important}
  .financial-month-status{font-size:.72rem!important}
  .dashboard-focus-card,.settings-card,.panel.settings-card{padding:14px!important}
}