:root {
           --bg-app: #f3f4f6;
           --surface: #ffffff;
           --text-main: #1f2937;
           --text-muted: #6b7280;
           --primary: #1c1c1f;
           --border: #e5e7eb;
           --safe-bottom: env(safe-area-inset-bottom, 0px);
       }

       * {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
           -webkit-tap-highlight-color: transparent;
       }

       body {
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
           background-color: var(--bg-app);
           color: var(--text-main);
           min-height: 100vh;
       }

       .app-container {
           display: flex;
           flex-direction: column;
           padding-bottom: calc(80px + var(--safe-bottom));
       }

       .app-header {
           background-color: var(--surface);
           padding: 20px 16px 10px 16px;
           position: sticky;
           top: 0;
           z-index: 10;
           border-bottom: 1px solid var(--border);
       }

       .header-title {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 12px;
       }

       .header-title h1 {
           font-size: 1.35rem;
           font-weight: 800;
           letter-spacing: -0.5px;
       }

       .month-selector {
           display: flex;
           gap: 8px;
           overflow-x: auto;
           padding-bottom: 6px;
           scrollbar-width: none;
       }

       .month-selector::-webkit-scrollbar {
           display: none;
       }

       .month-tab {
           background-color: var(--bg-app);
           color: var(--text-muted);
           border: none;
           padding: 8px 16px;
           border-radius: 20px;
           font-size: 0.85rem;
           font-weight: 600;
           white-space: nowrap;
           cursor: pointer;
       }

       .month-tab.active {
           background-color: var(--primary);
           color: white;
       }

       .balance-card {
           background: linear-gradient(135deg, var(--primary), #585858);
           color: white;
           margin: 16px;
           padding: 24px;
           border-radius: 20px;
           box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2);
       }

       .balance-card p {
           font-size: 0.85rem;
           opacity: 0.8;
           text-transform: uppercase;
           letter-spacing: 1px;
           margin-bottom: 4px;
       }

       .balance-amount {
           font-size: 2.25rem;
           font-weight: 800;
       }

       .kpi-section {
           margin: 16px 16px 0 16px;
       }

       .kpi-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
           gap: 10px;
       }

       .kpi-card {
           background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 244, 246, 0.96));
           border: 1px solid rgba(229, 231, 235, 0.9);
           border-radius: 16px;
           padding: 14px;
           min-height: 92px;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
       }

       .kpi-card-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           gap: 8px;
           margin-bottom: 10px;
       }

       .kpi-rank {
           width: 28px;
           height: 28px;
           border-radius: 999px;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           font-size: 0.82rem;
           font-weight: 800;
           color: white;
           background: linear-gradient(135deg, var(--primary), #505052);
           flex-shrink: 0;
       }

       .kpi-label {
           font-size: 0.9rem;
           font-weight: 700;
           color: var(--text-main);
           line-height: 1.2;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
       }

       .kpi-amount {
           font-size: 1.25rem;
           font-weight: 800;
           color: var(--text-main);
       }

       .kpi-empty {
           color: var(--text-muted);
           font-size: 0.95rem;
           padding: 12px 4px 0;
       }

       .day-selector {
           display: flex;
           align-items: center;
           gap: 8px;
           background-color: var(--surface);
           border: 1px solid var(--border);
           border-radius: 16px;
           padding: 10px 12px;
           margin-bottom: 12px;
       }

       .day-nav-btn {
           border: none;
           background-color: var(--bg-app);
           color: var(--text-main);
           width: 36px;
           height: 36px;
           border-radius: 10px;
           font-size: 1.1rem;
           font-weight: 700;
           cursor: pointer;
           flex-shrink: 0;
       }

       .day-date-input {
           flex: 1;
           width: 100%;
           border: 1px solid var(--border);
           border-radius: 12px;
           padding: 10px 12px;
           font-size: 0.98rem;
           color: var(--text-main);
           background-color: var(--bg-app);
           outline: none;
       }

       .day-total {
           font-size: 0.85rem;
           color: var(--text-muted);
           font-weight: 600;
           white-space: nowrap;
       }

       .main-content {
           display: flex;
           flex-direction: column;
           gap: 16px;
           padding: 0 16px;
       }

       .section-title {
           font-size: 1rem;
           font-weight: 700;
           color: var(--text-muted);
           margin-bottom: 8px;
           padding-left: 4px;
       }

       .history-container {
           display: flex;
           flex-direction: column;
           gap: 8px;
       }

       .expense-card {
           background-color: var(--surface);
           padding: 16px;
           border-radius: 14px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           border: 1px solid var(--border);
       }

       .expense-info {
           display: flex;
           flex-direction: column;
           gap: 2px;
       }

       .expense-meta {
           display: flex;
           gap: 8px;
           align-items: center;
       }

       .expense-date-badge {
           font-size: 0.75rem;
           background-color: var(--bg-app);
           padding: 2px 6px;
           border-radius: 6px;
           color: var(--text-muted);
           font-weight: 500;
       }

       .expense-concept {
           font-weight: 600;
           font-size: 0.95rem;
       }

       .expense-sub {
           font-size: 0.85rem;
           color: var(--text-muted);
       }

       .expense-amount {
           font-weight: 700;
           font-size: 1.1rem;
       }

       .expense-right {
           display: flex;
           align-items: center;
           gap: 8px;
           margin-left: 12px;
       }

       .expense-delete-btn {
           border: none;
           background: rgba(239, 68, 68, 0.08);
           color: #ef4444;
           width: 34px;
           height: 34px;
           border-radius: 10px;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           flex-shrink: 0;
       }

       .expense-delete-btn svg {
           width: 16px;
           height: 16px;
       }

       .expense-delete-btn:active {
           transform: scale(0.96);
       }

       .fab {
           position: fixed;
           bottom: calc(20px + var(--safe-bottom));
           right: 20px;
           background-color: var(--primary);
           color: white;
           border: none;
           width: 56px;
           height: 56px;
           border-radius: 50px;
           font-size: 1.75rem;
           display: flex;
           align-items: center;
           justify-content: center;
           box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
           cursor: pointer;
           z-index: 20;
       }

       .modal-overlay {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background-color: rgba(0, 0, 0, 0.4);
           display: flex;
           align-items: flex-end;
           z-index: 30;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.3s ease;
       }

       .modal-overlay.active {
           opacity: 1;
           pointer-events: auto;
       }

       .modal-sheet {
           background-color: var(--surface);
           width: 100%;
           border-top-left-radius: 24px;
           border-top-right-radius: 24px;
           padding: 24px 20px calc(24px + var(--safe-bottom));
           transform: translateY(100%);
           transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
       }

       .modal-overlay.active .modal-sheet {
           transform: translateY(0);
       }

       .modal-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 20px;
       }

       .modal-header h2 {
           font-size: 1.2rem;
           font-weight: 700;
       }

       .close-btn {
           background: none;
           border: none;
           font-size: 1.5rem;
           color: var(--text-muted);
           cursor: pointer;
       }

       .form-group {
           margin-bottom: 16px;
       }

       .form-group label {
           display: block;
           font-size: 0.85rem;
           font-weight: 600;
           color: var(--text-muted);
           margin-bottom: 6px;
       }

       .form-group input,
       .form-group select {
           width: 100%;
           padding: 14px;
           border: 1px solid var(--border);
           border-radius: 12px;
           font-size: 1rem;
           background-color: var(--bg-app);
           color: var(--text-main);
           outline: none;
       }

       .btn-submit {
           background-color: var(--primary);
           color: white;
           border: none;
           width: 100%;
           padding: 16px;
           border-radius: 12px;
           font-size: 1rem;
           font-weight: 600;
           cursor: pointer;
       }
       .detail-toggle-btn{
            background-color: var(--primary);
    padding: 7px;
    border: none;
    border-radius: 10px;
    color: white;
       }