* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f7f5;
  color: #102018;
}

.app-shell {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: #ffffff;
  padding: 24px;
}

/*.logo {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 6px;
}

.subtitle {
  color: #607066;
  margin-bottom: 28px;
}

.card {
  background: #ffffff;
  border: 1px solid #e3ebe5;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  margin-bottom: 16px;
}

input, select {
  width: 100%;
  padding: 15px;
  border: 1px solid #d7e0da;
  border-radius: 14px;
  font-size: 16px;
  margin-bottom: 14px;
}

button, .btn {
  display: block;
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 16px;
  background: #157347;
  color: white;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  margin-top: 15px;
  margin-bottom: 15px;
}

.btn-secondary {
  background: #edf5ef;
  color: #157347;
}

.metric {
  font-size: 32px;
  font-weight: 800;
}

.small {
  font-size: 14px;
  color: #6b7b70;
}

.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  width: 100%;
  background: white;
  border-top: 1px solid #e3ebe5;
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.nav-bottom a {
  color: #157347;
  text-decoration: none;
  font-weight: 600;
}

.page-with-nav {
  padding-bottom: 80px;
}*/
/*.topbar{
    height:74px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 24px;

    border-bottom:1px solid #ececec;

    background:#ffffff;
}

.topbar-left{
    font-size:20px;
    font-weight:bold;
}

.topbar-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
}
.topbar-right span,

.topbar-right a{
    text-decoration:none;
    display: block;
}*/
.logo{
    height:80px;
    width:auto;
    display:block;
}
.brand{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.brand-logo{
    height:54px;
    width:auto;
    display:block;
}
/*
.user-box{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    
}*/

.header-wrap{
    position:sticky;
    top:0;
    z-index:100;
    background:#fff;
}
/*.user-name{
    font-size:14px;
    font-weight:600;
}
.user-box a{
    text-decoration:none;
    font-size:13px;
    color:#7c3aed;
}*/
/* SECOND BAR */

.navbar{
    background:#fafafa;
    border-bottom:1px solid #ececec;

    padding:10px 18px;
}

.main-nav{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:12px 18px;

    flex-wrap:wrap;
}

.main-nav a{
    text-decoration:none;

    font-size:14px;
    font-weight:500;

    color:#0f172a;

    padding:8px 14px;

    border-radius:10px;

    transition:0.2s;
}

.main-nav a:hover{
    background:#f1f5f9;
    color:#15803d;
}
/*.budget-row{
    border-bottom:1px solid #e5e7eb;
    padding:14px 0;
}

.budget-row:last-child{
    border-bottom:none;
}

.budget-header{
    margin-bottom:10px;
    font-size:16px;
}

.budget-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:12px;
}

.budget-stats span{
    display:block;
    font-size:12px;
    color:#64748b;
}

.budget-stats strong{
    font-size:16px;
}

.budget-actions{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
}

.budget-actions input{
    width:100%;
}

.budget-actions button{
    white-space:nowrap;
}
.default-badge{
    font-size:10px;

    font-weight:400;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#64748b;

    margin-left:6px;

    vertical-align:middle;
}
.category-list{
    width:100%;
}
.category-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    gap:12px;
}
.category-name{
    font-size:15px;
}
.category-update-form{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
}
.category-update-form input[type="text"]{
    flex:1;
}
.category-delete-form{
    flex:1;
}
.category-update-form,
.category-delete-form{
    width:auto;
}
.category-actions{
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.category-actions form{
    display:inline-block;
    margin: 0;
    width:auto;
}
.btn-delete-small{
    background:#dc2626;
    color:white;
    border:none;
    border-radius:8px;
    padding:4px 10px;
    font-size:11px;
    font-weight:500;
    cursor:pointer;
    width:auto !important;
}
.btn-add-small{
    color:white;
    border:none;
    border-radius:8px;
    padding:4px 10px;
    font-size:11px;
    font-weight:500;
    cursor:pointer;
    width:auto !important;
}
.btn-upd-small{
    color:white;
    border:none;
    border-radius:8px;
    padding:4px 10px;
    font-size:11px;
    font-weight:500;
    cursor:pointer;
    width:auto !important;
}*/
.budget-add-form{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    align-items:center;
}

.budget-add-form button{
    grid-column:span 2;
}
.hidden {
    display:none !important;
}
.type-fields {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
}
.dashboard-totals{
    display: grid;
    grid-template-columns: 1fr;
    gap:12px;
}*/