:root {
  --bg: #f5f3ed;
  --panel: #fffdf9;
  --panel-2: #f0eee7;
  --ink: #1d2a25;
  --muted: #6d756f;
  --line: #ddd9cf;
  --green: #234f3d;
  --green-2: #dfe9e2;
  --green-3: #eef4ef;
  --red: #9a433b;
  --red-bg: #f8e9e6;
  --amber: #8f6a22;
  --amber-bg: #f8f0d9;
  --shadow: 0 16px 45px rgba(30, 45, 37, .08);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.positive { color: var(--green); }
.negative { color: var(--red); }

#loginView {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 20%, rgba(76, 113, 92, .16), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(158, 126, 67, .12), transparent 30%),
    var(--bg);
}
.login-card {
  width: min(430px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 38px;
}
.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  font-size: 25px;
  margin-bottom: 24px;
}
.login-card h1 { font-size: 30px; margin: 0 0 8px; letter-spacing: -.04em; }
.login-card p { margin: 0 0 28px; color: var(--muted); line-height: 1.55; }

.field { display: grid; gap: 7px; }
.field label { font-size: 12px; font-weight: 750; color: #4f5752; letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid #d7d2c8; background: #fff; color: var(--ink);
  border-radius: 12px; padding: 12px 13px; outline: none; transition: .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: #6f8f7e; box-shadow: 0 0 0 3px rgba(57, 91, 72, .10); }
.field textarea { min-height: 90px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #506159 50%),
    linear-gradient(135deg, #506159 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select:hover, .field input:hover, .field textarea:hover { border-color: #bdb8ae; }

.date-shell { position: relative; }
.date-shell .date-display { padding-right: 46px; }
.date-trigger {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: var(--panel-2); color: var(--green); font-size: 17px;
}
.date-trigger:hover { background: var(--green-2); }
.date-popover {
  position: absolute; z-index: 20; top: calc(100% + 8px); right: 0;
  width: 300px; padding: 12px; border: 1px solid var(--line);
  border-radius: 16px; background: #fff; box-shadow: 0 18px 55px rgba(24,38,31,.18);
}
.calendar-head { display:grid; grid-template-columns:34px 1fr 34px; align-items:center; gap:6px; margin-bottom:8px; }
.calendar-head strong { text-align:center; font-size:13px; }
.calendar-head button {
  width:34px; height:34px; border:0; border-radius:9px; background:var(--panel-2); color:var(--ink); font-size:18px;
}
.calendar-head button:hover { background:var(--green-2); color:var(--green); }
.calendar-week, .calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.calendar-week span { text-align:center; padding:5px 0; color:var(--muted); font-size:10px; font-weight:800; }
.calendar-day {
  border:0; background:transparent; border-radius:9px; aspect-ratio:1; color:var(--ink);
  font-size:12px; font-weight:650;
}
.calendar-day:hover { background:var(--green-2); color:var(--green); }
.calendar-day.muted-day { color:#a8ada9; }
.calendar-day.today { box-shadow: inset 0 0 0 1px #a9b9b0; }
.calendar-day.selected { background:var(--green); color:#fff; box-shadow:none; }
.calendar-foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid #eeeae2; }
.calendar-link { border:0; background:transparent; color:var(--green); font-size:11px; font-weight:800; padding:5px; }

.check-field {
  display:flex; align-items:flex-start; gap:11px; padding:13px 14px;
  border:1px solid #d7d2c8; border-radius:14px; background:#faf9f5; cursor:pointer;
}
.check-field input { position:absolute; opacity:0; pointer-events:none; }
.check-box {
  width:22px; height:22px; flex:0 0 22px; border-radius:7px; display:grid; place-items:center;
  border:1px solid #c9c6bd; background:#fff; color:transparent; font-size:13px; font-weight:900;
}
.check-field input:checked + .check-box { background:var(--green); border-color:var(--green); color:#fff; }
.check-field strong { display:block; font-size:13px; }
.check-field small { display:block; margin-top:3px; color:var(--muted); line-height:1.45; font-size:11px; font-weight:500; }
.form-note {
  padding:12px 14px; border-radius:13px; background:var(--green-3); color:#42544b;
  font-size:11px; line-height:1.55; border:1px solid #d9e5dc;
}

.btn {
  border: 0; border-radius: 12px; padding: 11px 15px; font-weight: 750;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-soft { background: var(--green-2); color: var(--green); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-danger { background: var(--red-bg); color: var(--red); }
.btn-small { padding: 7px 10px; border-radius: 10px; font-size: 12px; }
.login-card .btn { width: 100%; margin-top: 16px; }
.error-text { color: var(--red); min-height: 20px; margin-top: 10px; font-size: 13px; }

#appView { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 26px 18px;
  background: #1f3f32; color: #f8fbf9; display: flex; flex-direction: column; z-index: 5;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 24px; }
.sidebar-brand .brand-mark { width: 42px; height: 42px; font-size: 20px; margin: 0; background: rgba(255,255,255,.12); }
.sidebar-brand strong { display:block; font-size: 15px; }
.sidebar-brand span { display:block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.63); }
.nav { display: grid; gap: 5px; }
.nav button {
  border: 0; width: 100%; text-align: left; color: rgba(255,255,255,.72); background: transparent;
  padding: 11px 12px; border-radius: 12px; font-weight: 650; display:flex; align-items:center; gap:10px;
}
.nav button:hover, .nav button.active { background: rgba(255,255,255,.11); color: #fff; }
.nav .nav-icon { width: 24px; text-align:center; font-size: 16px; }
.sidebar-foot { margin-top: auto; padding: 12px 10px 0; }
.sidebar-foot button { width: 100%; color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.16); }

.main { min-width: 0; padding: 28px 32px 60px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap: 20px; margin-bottom: 26px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 850; color: #7e857f; }
.topbar h1 { margin: 4px 0 0; font-size: 30px; letter-spacing: -.04em; }
.top-actions { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; justify-content:flex-end; }
.month-picker { display:flex; align-items:center; gap: 7px; background: var(--panel); border:1px solid var(--line); padding: 5px; border-radius: 12px; }
.month-picker button { width:32px; height:32px; border:0; background:transparent; border-radius:9px; }
.month-picker button:hover { background:var(--panel-2); }
.month-label { min-width: 125px; text-align:center; font-weight: 750; font-size: 13px; }
.mobile-menu { display:none; }

.grid { display:grid; gap: 16px; }
.metrics { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(33,47,40,.035); }
.metric { padding: 20px; }
.metric .label { font-size: 12px; color: var(--muted); font-weight: 700; }
.metric .value { margin-top: 9px; font-size: 27px; letter-spacing: -.045em; font-weight: 800; }
.metric .sub { margin-top: 7px; font-size: 11px; color: var(--muted); }
.info-wrap { position:relative; display:inline-flex; vertical-align:middle; margin-left:4px; }
.info-btn {
  width:17px; height:17px; border-radius:50%; border:1px solid #b9c4bd; background:transparent;
  color:#627169; font-size:10px; font-weight:850; line-height:1; padding:0; display:inline-grid; place-items:center;
}
.info-btn:hover, .info-btn:focus { background:var(--green-2); color:var(--green); border-color:#8fa597; outline:none; }
.info-popover {
  pointer-events:none; opacity:0; visibility:hidden; transform:translateY(-3px);
  position:absolute; z-index:35; left:50%; top:calc(100% + 9px); width:260px; margin-left:-130px;
  padding:11px 12px; border-radius:12px; background:#162d24; color:#fff;
  font-size:11px; font-weight:500; line-height:1.5; letter-spacing:0; text-transform:none;
  box-shadow:0 14px 36px rgba(0,0,0,.2); transition:.12s ease;
}
.info-wrap:hover .info-popover, .info-wrap:focus-within .info-popover {
  opacity:1; visibility:visible; transform:translateY(0);
}
.metric.featured .info-btn { border-color:rgba(255,255,255,.45); color:#fff; }
.metric.featured .info-btn:hover, .metric.featured .info-btn:focus { background:rgba(255,255,255,.16); }
.metric.featured { background: var(--green); color: #fff; border-color: var(--green); }
.metric.featured .label, .metric.featured .sub { color: rgba(255,255,255,.7); }

.dashboard-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-top: 16px; }
.panel { padding: 22px; min-width:0; }
.panel-head { display:flex; justify-content:space-between; gap: 16px; align-items:center; margin-bottom: 18px; }
.panel h2 { font-size: 17px; margin:0; letter-spacing:-.02em; }
.panel-head p { margin: 4px 0 0; color:var(--muted); font-size: 12px; }

.cash-track { display:grid; gap: 10px; }
.cash-row { display:grid; grid-template-columns: 76px minmax(0,1fr) auto; gap: 12px; align-items:center; padding: 12px 0; border-bottom:1px solid #eeeae2; }
.cash-row:last-child { border-bottom:0; }
.cash-date { font-size:12px; color:var(--muted); }
.cash-title { font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cash-meta { font-size:11px; color:var(--muted); margin-top:3px; }
.cash-amount { font-weight:800; font-size:13px; text-align:right; }
.status-pill { font-size:10px; padding:4px 7px; border-radius:999px; font-weight:750; display:inline-block; margin-left:5px; }
.status-paid { background:var(--green-3); color:var(--green); }
.status-planned { background:var(--amber-bg); color:var(--amber); }
.neutral-pill { background:#efefec; color:#606a64; }
.budget-note { margin-bottom:14px; padding:14px 17px; background:#f8faf7; border-color:#dce6df; }
.budget-note div { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.budget-note strong { font-size:12px; color:var(--green); }
.budget-note span { color:var(--muted); font-size:11px; line-height:1.5; }

.progress-item { margin-bottom: 17px; }
.progress-line { display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:12px; }
.progress-title { font-weight:750; display:flex; align-items:center; gap:7px; }
.progress-track { height:8px; border-radius:99px; background:#ebe7df; overflow:hidden; margin-top:8px; }
.progress-bar { height:100%; border-radius:99px; background:var(--green); max-width:100%; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar-left { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:7px 11px; font-size:12px; font-weight:700; color:var(--muted); }
.chip.active { background:var(--green); color:#fff; border-color:var(--green); }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
table { width:100%; border-collapse:collapse; min-width:780px; }
th { text-align:left; padding:12px 14px; color:#707872; font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:#faf8f3; border-bottom:1px solid var(--line); }
td { padding:13px 14px; border-bottom:1px solid #ede9e1; font-size:12px; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
.row-title { font-weight:750; font-size:13px; }
.row-sub { color:var(--muted); font-size:11px; margin-top:3px; }
.actions { display:flex; gap:6px; justify-content:flex-end; }
.amount { font-weight:800; white-space:nowrap; }

.empty { padding: 35px 20px; text-align:center; color:var(--muted); }
.empty strong { color:var(--ink); display:block; margin-bottom:5px; }

.section-heading { display:flex; justify-content:space-between; gap:15px; align-items:flex-end; margin: 0 0 16px; }
.section-heading h2 { margin:0; font-size:20px; letter-spacing:-.03em; }
.section-heading p { margin:5px 0 0; color:var(--muted); font-size:12px; }

.list-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.item-card { padding:18px; }
.item-card-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.item-card h3 { margin:0; font-size:15px; }
.item-card .big { margin-top:14px; font-size:23px; font-weight:850; letter-spacing:-.04em; }
.item-card .meta { margin-top:5px; font-size:11px; color:var(--muted); }
.item-card .footer { margin-top:16px; display:flex; gap:7px; flex-wrap:wrap; }

.settings-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.settings-list { display:grid; gap:9px; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #ece8e0; }
.setting-row:last-child { border-bottom:0; }
.category-badge { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; }

.modal-backdrop { position:fixed; inset:0; z-index:30; background:rgba(15,26,20,.42); display:grid; place-items:center; padding:20px; backdrop-filter:blur(3px); }
.modal { width:min(650px,100%); max-height:90vh; overflow:auto; background:var(--panel); border-radius:26px; box-shadow:0 30px 90px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.6); }
.modal-head { padding:22px 24px 15px; display:flex; justify-content:space-between; align-items:flex-start; gap:15px; position:sticky; top:0; background:var(--panel); z-index:2; }
.modal-head h2 { margin:0; font-size:20px; }
.modal-head p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.close-btn { width:35px; height:35px; border:0; border-radius:10px; background:var(--panel-2); color:var(--ink); font-size:20px; }
.modal-body { padding: 4px 24px 24px; }
.modal-form { display:grid; gap:14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:4px; }

.toast-wrap { position:fixed; right:20px; bottom:20px; z-index:50; display:grid; gap:8px; }
.toast { background:#1e2e26; color:#fff; border-radius:13px; padding:12px 15px; box-shadow:var(--shadow); font-size:12px; max-width:340px; animation:toastIn .18s ease; }
.toast.error { background:#803c36; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

.loading { position:fixed; inset:0; background:rgba(245,243,237,.72); z-index:40; display:grid; place-items:center; backdrop-filter:blur(2px); }
.spinner { width:36px; height:36px; border:4px solid #d8ded9; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 1100px) {
  .metrics { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .list-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 850px) {
  #appView { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:-270px; transition:.2s ease; width:250px; box-shadow:20px 0 60px rgba(0,0,0,.18); }
  .sidebar.open { left:0; }
  .main { padding:20px 18px 50px; }
  .mobile-menu { display:inline-flex; }
  .dashboard-grid, .settings-grid { grid-template-columns:1fr; }
  .topbar { align-items:flex-start; }
  .topbar h1 { font-size:25px; }
}
@media (max-width: 620px) {
  .metrics, .list-cards { grid-template-columns:1fr; }
  .field-row, .field-row.three { grid-template-columns:1fr; }
  .topbar { flex-direction:column; }
  .top-actions { justify-content:flex-start; width:100%; }
  .month-picker { flex:1; justify-content:space-between; }
  .top-actions > .btn-primary { flex:1; }
  .cash-row { grid-template-columns:62px minmax(0,1fr); }
  .cash-amount { grid-column:2; text-align:left; }
  .login-card { padding:28px 24px; }
  .date-popover { width:min(300px, calc(100vw - 64px)); right:auto; left:0; }
  .info-popover { width:220px; margin-left:-110px; }
}

/* V1.2 icon polish */
.brand-mark { overflow: hidden; }
.brand-icon, .nav-svg, .ui-svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-icon { width: 25px; height: 25px; stroke-width: 1.9; }
.sidebar-brand .brand-icon { width: 21px; height: 21px; }
.nav .nav-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.62);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-svg { width: 17px; height: 17px; }
.nav button:hover .nav-icon {
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.07);
}
.nav button.active .nav-icon {
  color: #fff;
  background: rgba(255,255,255,.12);
}
.nav button.active .nav-icon { transform: translateX(1px); }
.ui-svg { width: 17px; height: 17px; stroke-width: 2; }
.btn .ui-svg { flex: 0 0 auto; }
.icon-only { width: 42px; height: 42px; padding: 0; }
.month-picker button { display: grid; place-items: center; color: var(--ink); }
.month-picker button .ui-svg { width: 15px; height: 15px; }
.sidebar-foot .ui-svg { width: 16px; height: 16px; }