/* Reset & Basic Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.container {
    padding: 20px 15px 100px 15px; /* Padding bawah untuk ruang bottom nav */
    max-width: 600px;
    margin: 0 auto;
}

/* =================================
   LOGIN PAGE STYLES (PERBAIKAN)
   ================================= */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
}

.login-box {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
    text-align: center;
}
.login-box h2 {
    margin-bottom: 8px;
    color: #212529;
    font-weight: 600;
}
.login-box p {
    margin-bottom: 24px;
    color: #6c757d;
}
.error-message {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.9em;
}

/* =================================
   GENERIC FORM STYLES (PERBAIKAN)
   ================================= */
.form-group {
    margin-bottom: 20px;
    text-align: left; /* Membuat label rata kiri */
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #495057;
}

/* Style untuk semua input, select, textarea */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 1em;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.add-form textarea {
    resize: vertical;
}

/*LOGIN PAGE SPECIFIC */
/* BACKGROUND */
.brutal-bg {
    background: #F7CA45;
}

/* CARD */
.brutal-card {
    border: 3px solid #000;
    box-shadow: 6px 6px 0 #000;
    background: #fff;
    transform: rotate(-1deg);
}

/* LOGO */
.login-logo {
    font-size: 40px;
    margin-bottom: 10px;

    border: 3px solid #000;
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;

    background: #FE90EA;
    box-shadow: 3px 3px 0 #000;
}

/* TITLE */
.login-box h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
}

/* SUBTITLE */
.login-box p {
    font-size: 12px;
    margin-bottom: 20px;
}

/* INPUT */
.form-group input {
    border: 2px solid #000;
    background: #fff;
}

.form-group input:focus {
    background: #fff8cc;
}

/* BUTTON */
.brutal-btn {
    background: #A0FF92;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    font-weight: 800;
}

.brutal-btn:hover {
    transform: translateY(-2px);
}

.floating-shape {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #FF6B6B;
    top: 10%;
    left: 10%;
    border: 3px solid #000;
    transform: rotate(15deg);
    z-index: 0;
}

/* overlay */
.loading-screen {
    position: fixed;
    inset: 0;
    background: #F7CA45;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* hidden */
.hidden {
    display: none;
}

/* box */
.loading-box {
    border: 3px solid #000;
    background: #fff;
    padding: 20px;
    box-shadow: 6px 6px 0 #000;
    text-align: center;
}

/* bar */
.loading-bar {
    width: 200px;
    height: 20px;
    border: 3px solid #000;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}

/* fill animasi */
.loading-fill {
    width: 40%;
    height: 100%;
    background: #FF6B6B;
    animation: brutal-loading 1s infinite linear;
}

/* text */
.loading-box p {
    font-weight: 800;
    font-size: 12px;
}

/* animasi geser */
@keyframes brutal-loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}


/* Utility Classes */
.income { color: #16A800; }
.expense { color: #ff543e; }
.btn {
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.2s;
}
.btn-primary { background-color: #007bff; color: white; }
.btn-primary:hover { background-color: #0056b3; }
.btn-danger { background-color: #dc3545; color: white; }
.btn-danger:hover { background-color: #c82333; }
.btn-block { width: 100%; padding: 12px; font-size: 1em; }
.btn-sm { padding: 5px 10px; font-size: 0.8em; }


/* Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.page-header.sticky-header {
    position: sticky; top: 10px; background: #F7F6F2;  z-index: 10;
}
.sticky-header {
    background: #F7F6F2;
}
.page-header h1 { font-size: 1.5em; font-weight: 600; }
.logout-button, .back-button { text-decoration: none; color: #007bff; font-weight: 500; padding: 5px; }
.back-button svg { vertical-align: middle; }

/* Card Element */
.card {
    background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); overflow: hidden;
}
.card-header { padding: 15px; border-bottom: 1px solid #e9ecef; }
.card-header.no-border {
    border-bottom: none;
}
.card-header h3 { font-size: 1.1em; font-weight: 600; }
.card-subtitle { font-size: 0.8em; color: #6c757d; margin-top: 4px; }
.card-body { padding: 15px; }

/* Balance Summary */
.balance-summary-card { display: flex; justify-content: space-around; padding: 6px; text-align: center; }
.balance-summary-card.small { padding: 10px; }
.balance-item { display: flex; flex-direction: column; }
.balance-item .label { font-size: 0.8em; color: #6c757d; margin-bottom: 4px; }
.balance-item .amount { font-size: 1.1em; font-weight: 600; }
.balance-item.net-worth .amount { font-size: 1.2em; color: #007bff; }

/* Transaction List */
.transaction-list { list-style: none; }
.transaction-item-link { text-decoration: none; color: inherit; display: block; }
.transaction-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #e9ecef; }
.transaction-item:last-child { border-bottom: none; }
.transaction-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5em; margin-right: 15px; background-color: #e9ecef; }
.transaction-details { flex-grow: 1; }
.transaction-details .title { font-weight: 500; display: block; }
.transaction-details .category { font-size: 0.8em; color: #6c757d; }
.transaction-amount { font-weight: 600; white-space: nowrap; }

/* Account List */
.account-list { list-style: none; }
.account-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #e9ecef; }
.account-item:last-child { border-bottom: none; }
.account-name { font-weight: 500; font-size: 1em; }
.account-balance { font-weight: 600; font-size: 1em; }

/* Type Selector (Radio Button) */
.type-selector { display: flex; border: 1px solid #ced4da; border-radius: 8px; overflow: hidden; }
.type-selector input[type="radio"] { display: none; }
.type-selector label { flex: 1; text-align: center; padding: 10px; cursor: pointer; margin: 0; transition: background-color 0.2s; user-select: none; }
.type-selector input[type="radio"]:checked + label { background-color: #007bff; color: white; font-weight: 600; }
.type-selector input#expense:checked + label, .type-selector input#toggle-expense:checked + label { background-color: #FE90EA; }
.type-selector input#income:checked + label, .type-selector input#toggle-income:checked + label { background-color: #A0FF92; }
.chart-toggle { padding: 0; margin: 0; border: none; }

/* Filter & Dynamic Headers */
.filter-form { display: flex; gap: 10px; margin-bottom: 20px; }
.filter-form select { flex-grow: 1; padding: 8px; border: 1px solid #ced4da; border-radius: 8px; }
.empty-state { text-align: center; padding: 30px; color: #6c757d; }
.toggle-chart-btn { width: 100%; padding: 15px; background: #f8f9fa; border: none; border-bottom: 1px solid #e9ecef; text-align: left; font-size: 1em; font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.toggle-chart-btn svg { transition: transform 0.3s ease; }
.dynamic-list-header { display: flex; justify-content: space-between; align-items: center;   }
.dynamic-list-header h3 { margin: 0; font-size: 1.1em; font-weight: 600; }
#subcategory-summary-container h4 { margin-bottom: 10px; font-weight: 600; border-bottom: 1px solid #e9ecef; padding-bottom: 10px; }
.subcategory-item { cursor: pointer; transition: background-color 0.2s; }
.subcategory-item:hover { background-color: #f8f9fa; }
.user-input { font-style: italic; color: #007bff; font-weight: 500; }

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: 8px;

    background: #111;
    padding: 8px;
    border-radius: 20px;
    border: 2px solid #000;

    box-shadow: 4px 4px 0 #000;
    z-index: 1000;
}

/* Floating Action Button (FAB) */
.fab { position: fixed; bottom: 80px; right: 25px; width: 56px; height: 56px; background-color: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); text-decoration: none; z-index: 1001; }
.fab1 { position: fixed; bottom: 150px; right: 25px; width: 56px; height: 56px; background-color: #379223; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); text-decoration: none; z-index: 1001; }

.fab svg { width: 28px; height: 28px; }

.chart-wrapper {
  position: relative;
  max-width: 350px;
  height: 250px;         /* <- tambahkan tinggi eksplisit agar proporsional */
  margin: 0 auto;
}


.chart-wrapper-account {
    position: relative;
    max-width: 450px; /* Sedikit lebih lebar untuk memberi ruang bagi legenda */
    height: 250px; /* Beri tinggi tetap agar konsisten */
    margin: 0 auto;
}


/* /public/css/style.css */
/* ... tambahkan di akhir file ... */

/* Kartu Akun/Kantong (Light Theme) */
.account-scroller {
    display: flex; gap: 15px; overflow-x: auto; padding-bottom: 6px;
    margin-bottom: 15px; -ms-overflow-style: none; scrollbar-width: none;
}
.account-scroller::-webkit-scrollbar { display: none; }
.account-card-light {
    flex: 0 0 auto; width: 150px; padding: 12px;
    background-color: #FFFFFF; border-radius: 12px;
    border: 1px solid #E5E5EA;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.account-name-home { font-weight: 600; font-size: 0.9em; color: #8A8A8E; }
.account-balance-home { font-size: 1.2em; font-weight: 600; margin: 4px 0; color: #1C1C1E; }

/* Info Grid (Light Theme) */
.info-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 15px; margin-bottom: 15px;
}
.info-card-light {
    background-color: #FFFFFF; border-radius: 12px; padding: 12px;
    border: 1px solid #E5E5EA;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* EXPENSE CARD (KUNING BRUTAL) */
.expense-card {
    background: #F7CA45;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
}

.expense-card .info-label,
.expense-card .info-amount,
.expense-card .info-tx-count {
    color: #000;
}

/* optional biar lebih bold kayak referensi */
.expense-card .info-amount {
    font-weight: 800;
}

/* INCOME CARD ( BRUTAL) */
.income-card {
    background: #FE90EA;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
}

.income-card .info-label,
.income-card .info-amount,
.income-card .info-tx-count {
    color: #000;
}

/* optional biar lebih bold kayak referensi */
.income-card .info-amount {
    font-weight: 800;
}

.info-card-light.net-worth-card { 
    margin-bottom: 15px; 
    text-align: center;
}
.info-label { font-size: 0.8em; font-weight: 600; color: #8A8A8E; margin-bottom: 4px; }
.info-amount { font-size: 1.2em; font-weight: 600; margin-bottom: 4px; }
.info-amount-lg { font-size: 1.2em; font-weight: 600; color: #1a1a1a; }

.info-tx-count {
    font-size: 0.7em; /* <-- UBAH NILAI INI UNTUK MENGATUR UKURAN */
    color: #8A8A8E;
}

/* Wrapper untuk chart baru */
.chart-wrapper-tall {
    position: relative;
    height: 200px;
    margin: 0px;
}

.card-body .chart-wrapper-tall {
    padding: 10px;
}

.chart-wrapper-tall-custom {
    position: relative;
    height: 300px;
    margin: 0px;
}

.card-body .chart-wrapper-tall-custom {
    padding: 10px;
}

.card-body select {
  position: relative;
  z-index: 10;
}

/* /public/css/style.css */
/* ... tambahkan di akhir file ... */

.skeleton {
    background-color: #e0e0e0;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #f0f0f0, transparent);
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

/* /public/css/style.css */
/* ... tambahkan di akhir file ... */

/* Mengatur ukuran teks untuk ringkasan kategori */
.category-summary-list .account-item {
    padding: 10px 0; /* Sedikit mengurangi jarak atas-bawah agar lebih pas */
}

.category-summary-list .account-name {
    /* Atur ukuran teks nama kategori di sini */
    font-size: 0.8em; 
}

.category-summary-list .account-balance {
    /* Atur ukuran teks nominal di sini */
    font-size: 0.8em;
}

.d-flex-space {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.modern-dropdown {
  padding: 10px 25px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  appearance: none;
  background: white url('data:image/svg+xml;utf8,<svg fill="gray" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 1rem center;
  background-size: 1rem;
  cursor: pointer;
  /* Hapus margin-top di sini */
}

.dropdown-container {
  margin: 8px 16px; /* atas-bawah 8px, kiri-kanan 16px */
}

.modern-dropdown.small {
  padding: 6px 12px;
  font-size: 0.9rem;
  margin: 0;
}

/* Tambahkan kode ini di akhir file CSS Anda */

.form-row {
  display: flex; /* Membuat elemen di dalamnya berjajar ke samping */
  align-items: center; /* Menyejajarkan secara vertikal jika tingginya beda */
  gap: 15px; /* Memberi jarak 15px antara input tanggal dan waktu */
}

.form-row .form-group {
  flex: 1; /* Membuat setiap grup (tanggal & waktu) memiliki lebar yang sama */
}

.liability-category {
    border-bottom: 1px solid #e9ecef;
    padding: 10px 0;
}
.liability-category:last-child {
    border-bottom: none;
}
.category-header {
    cursor: pointer;
    padding: 5px 0;
}
.category-header .total-amount {
    display: block;
    color: #6c757d;
    font-size: 0.9em;
}
.category-header .arrow {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}
.category-header.active .arrow {
    transform: rotate(180deg);
}
.category-items {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-left: 15px; /* Sedikit indentasi untuk item detail */
    margin-top: 5px;
}
.item-detail {
    padding: 8px 0;
    font-size: 0.9em;
    color: #343a40;
}
.item-detail small {
    color: #495057;
}

/* Kelas untuk konten accordion yang bisa disembunyikan */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Memutar ikon SVG saat tombol memiliki kelas 'active' */
.toggle-chart-btn.active svg {
    transform: rotate(180deg);
}

    /* Gaya untuk Tombol PENGELUARAN saat aktif.
      Berlaku untuk ID di halaman home (#toggle-expense) 
      dan halaman transaksi (#tx-toggle-expense).
    */
#toggle-expense:checked + label,
#tx-toggle-expense:checked + label {
    background-color: #FE90EA; /* Warna Merah */
    border-color: #1a1a1a;
    color: #1a1a1a;
}

    /* Gaya untuk Tombol PEMASUKAN saat aktif.
      Berlaku untuk ID di halaman home (#toggle-income) 
      dan halaman transaksi (#tx-toggle-income).
    */
#toggle-income:checked + label,
#tx-toggle-income:checked + label {
    background-color: #27ae60; /* Warna Hijau */
    border-color: #1a1a1a;
    color: #1a1a1a;
}







/* =========================
   GLOBAL RESET (NEW STYLE)
   ========================= */

body {
    font-family: 'Inter', sans-serif;
    background: #F7F6F2;
    color: #1a1a1a;
}

/* container lebih lega */
.container {
    max-width: 480px;
    padding: 16px;
}

/* =========================
   TYPOGRAPHY MOBILE FIX
   ========================= */

h1 {
    font-size: 20px;
    font-weight: 700;
}

h2 {
    font-size: 18px;
    font-weight: 700;
}

p {
    font-size: 13px;
    color: #555;
}

/* =========================
   CARD STYLE (SOFT BRUTAL)
   ========================= */

.card {
    background: #fff;
    border: 2px solid #000;
    border-radius: 16px;
    box-shadow: 4px 4px 0 #000;
    overflow: hidden;
}

.card-header {
    padding: 12px 16px;
    border-bottom: 2px solid #000;
    font-size: 14px;
    font-weight: 600;
}

.card-body {
    padding: 14px;
}

/* =========================
   ACCOUNT CARD
   ========================= */

.account-card-light {
    background: #fff;
    border: 2px solid #000;
    border-radius: 14px;
    box-shadow: 3px 3px 0 #000;
    padding: 10px;
}

.account-name-home {
    font-size: 12px;
}

.account-balance-home {
    font-size: 14px;
    font-weight: 700;
}

/* =========================
   INFO CARD
   ========================= */

.info-card-light {
    border: 2px solid #000;
    border-radius: 14px;
    box-shadow: 3px 3px 0 #000;
    padding: 12px;
}

.info-label {
    font-size: 11px;
}

.info-amount {
    font-size: 15px;
    font-weight: 700;
}

.info-amount-lg {
    font-size: 16px;
    font-weight: 800;
}

/* =========================
   HEADER
   ========================= */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 2px solid #000;
    border-radius: 14px;
    box-shadow: 3px 3px 0 #000;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.logout-button {
    font-size: 12px;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 6px 10px;
    background: #FE90EA;
    color: #1a1a1a;
    font-weight: 600;
}

/* =========================
   TRANSACTION LIST
   ========================= */

.transaction-item {
    padding: 10px 0;
    border-bottom: 1px solid #000;
}

.transaction-details .title {
    font-size: 13px;
}

.transaction-details .category {
    font-size: 11px;
}

.transaction-amount {
    font-size: 13px;
    font-weight: 600;
}

/* =========================
   TYPE SELECTOR
   ========================= */

.type-selector {
    border: 2px solid #000;
    border-radius: 12px;
}

.type-selector label {
    font-size: 12px;
    font-weight: 600;
}

.type-selector input:checked + label {
    background: #000;
    color: #fff;
}

/* =========================
   NAVBAR (BOTTOM)
   ========================= */

.bottom-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: #1a1a1a;
    border-top: 2px solid #000;
}

.bottom-nav {
    width: fit-content;
    margin: 0 auto;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 3px 3px 0 #000;
}

.nav-item.active {
    background: #F7CA45;
    padding: 8px 16px;
    transform: scale(1.05);
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 2px solid #000;
    background: #eee;
    text-decoration: none;
    color: #000;
    font-size: 12px;
    font-weight: bolder;

    transition: all 0.2s ease;
}

/* icon */

.nav-item svg {
    width: 20px;
    height: 20px;
}

.nav-item .icon {
    font-size: 16px;
}

/* label default hidden */
.nav-item .label {
    display: none;
}

/* ACTIVE */
.nav-item.active {
    background: #F7CA45;
    padding: 8px 14px;
}

/* munculin text saat aktif */
.nav-item.active .label {
    display: inline;
}

/* efek gede */
.nav-item.active {
    transform: scale(1.05);
}

/* =========================
   FAB BUTTON
   ========================= */



.fab {
    background: #A0FF92;
    color: #000;
}

.fab1 {
    background: #fff;
    color: #000;
}

.fab, .fab1 {
    border: 2px solid #000;
    border-radius: 14px;
    box-shadow: 3px 3px 0 #000;
    transition: all 0.15s ease;
}

.fab:hover, .fab1:hover {
    transform: translateY(-2px);
}

/* =========================
   CHART WRAPPER
   ========================= */

.chart-wrapper,
.chart-wrapper-tall {
        border: 2px solid #000;
    border-radius: 14px;
    padding: 10px;
    background: #fff;
}


/* =========================
   LOGIN (FINAL FIX)
   ========================= */

.login-container {
    background: #f4c542;
}

.login-box {
    background: #fff;
    border: 2px solid #000;
    border-radius: 16px;
    box-shadow: 4px 4px 0 #000;
    padding: 24px;
}

.login-box h2 {
    font-size: 18px;
    font-weight: 700;
}

.login-box p {
    font-size: 13px;
}

/* input */
.form-group input {
    border: 2px solid #000;
    border-radius: 10px;
    font-size: 13px;
}

/* button baru (ganti brutal-btn) */
.brutal-btn {
    background: #ffd43b;
    border: 2px solid #000;
    border-radius: 12px;
    font-weight: 700;
    color: #000;
}

.brutal-btn {
    padding: 12px;
}

.delete-btn {
    padding: 12px;
}

.delete-btn {
    background: #FF6B6B;
    border: 2px solid #000;
    border-radius: 12px;
    font-weight: 700;
    color: #000;
}

.small-btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 10px;
}

.brutal-toggle {
    border: 2px solid #000;
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
}


.page-content {
    padding-bottom: 120px; /* ruang untuk bottom nav + FAB */
}

/* =========================
   FORM STYLE (GLOBAL)
   ========================= */

.add-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    border: 2px solid #000;
    border-radius: 10px;
    background: #fff;
}

/* focus */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    background: #fff8cc;
}

.type-selector {
    display: flex;
    border: 2px solid #000;
    border-radius: 12px;
    overflow: hidden;
}

.type-selector label {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
}

.type-selector input:checked + label {
    background: #F7CA45;
    color: #000;
}

.form-group.type-group {
    margin-bottom: 10px;
}

.type-selector input[type="radio"] {
    display: none;
}

.type-selector label {
    flex: 1;
    margin: 0;
}




.btn-block {
    width: 100%;
}

.asset-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.asset-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 2px solid #000;
    border-radius: 14px;
    background: #fff;
    box-shadow: 3px 3px 0 #000;
}

.asset-left {
    display: flex;
    flex-direction: column;
}

.asset-title {
    font-size: 13px;
    font-weight: 600;
}

.asset-category {
    font-size: 11px;
    color: #666;
}

.asset-right {
    text-align: right;
}

.asset-amount {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.asset-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.liability-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.liability-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 2px solid #000;
    border-radius: 14px;
    background: #fff;
    box-shadow: 3px 3px 0 #000;
}

.liability-left {
    display: flex;
    flex-direction: column;
}

.liability-title {
    font-size: 13px;
    font-weight: 600;
}

.liability-category {
    font-size: 11px;
    color: #666;
}

.liability-sub {
    font-size: 11px;
    color: #999;
}

.liability-right {
    display: flex;
    gap: 6px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-box {
    background: #fff;
    border: 2px solid #000;
    border-radius: 16px;
    box-shadow: 4px 4px 0 #000;
    padding: 20px;
    width: 80%;
    max-width: 300px;
    text-align: center;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.modal-actions button {
    flex: 1;
}

.budget-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.budget-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 2px solid #000;
    border-radius: 14px;
    background: #fff;
    box-shadow: 3px 3px 0 #000;
}

.budget-title {
    font-size: 13px;
    font-weight: 600;
}

.budget-amount {
    font-size: 12px;
    color: #666;
}

.budget-right {
    display: flex;
}

.input-currency {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    border: 2px solid #000;
    border-radius: 10px;
    background: #fff;
}

.input-currency:focus {
    outline: none;
    background: #fff8cc;
}














/* SPLASH */