@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap";:root{font-family:IBM Plex Sans Thai,sans-serif;line-height:1.5;font-weight:400;color:#28423b;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-top: #f7f1e6;--bg-bottom: #edf3ee;--card: rgba(255, 252, 247, .86);--line: rgba(26, 54, 49, .08);--ink: #28423b;--ink-strong: #1f342f;--muted: #7f8a82;--muted-strong: #5c6a62;--shadow-soft: 0 22px 60px rgba(22, 47, 43, .1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 0% 0%,rgba(255,201,134,.2),transparent 24%),radial-gradient(circle at 100% 18%,rgba(37,124,108,.18),transparent 24%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);color:var(--ink)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.24),transparent 84%);mask-image:linear-gradient(180deg,rgba(0,0,0,.24),transparent 84%)}body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.26),transparent 35%),radial-gradient(circle at 50% 120%,rgba(255,255,255,.18),transparent 28%)}a{color:inherit;text-decoration:none}button,input{font:inherit}#root{width:100%}.app-shell{width:min(1480px,calc(100vw - 32px));margin:0 auto;padding:34px 0 60px;position:relative}.hero-card,.nav-panel,.search-panel,.panel,.metric-card{position:relative;overflow:hidden}.hero-card,.nav-panel,.search-panel,.panel,.metric-card{border:1px solid var(--line);box-shadow:var(--shadow-soft)}.hero-card{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:26px;margin-bottom:26px;padding:32px;border-radius:34px;background:linear-gradient(135deg,#fffaf4f5,#f4ede0e0),linear-gradient(180deg,#fff6,#fff0)}.hero-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 18%,rgba(28,110,96,.2),transparent 24%),radial-gradient(circle at 14% 88%,rgba(255,160,81,.18),transparent 24%);pointer-events:none}.hero-card:after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#ffffffb8,#fff0);pointer-events:none}.hero-copy,.hero-status{position:relative;z-index:1}.hero-copy{display:grid;align-content:start;gap:14px}.hero-copy h1{margin:0;max-width:10ch;font-family:Chakra Petch,sans-serif;font-size:clamp(2.7rem,5vw,5.35rem);line-height:.9;letter-spacing:-.055em;color:var(--ink-strong);text-wrap:balance}.hero-text{margin:0;max-width:60ch;font-size:1.03rem;color:var(--muted-strong)}.hero-status{align-self:stretch;display:grid;align-content:space-between;gap:18px;padding:22px;border-radius:28px;background:linear-gradient(180deg,#113732f5,#1a5045eb),radial-gradient(circle at top right,rgba(104,203,178,.18),transparent 34%);color:#edf7f2;box-shadow:inset 0 1px #ffffff14}.hero-status:before{content:"";position:absolute;inset:auto -10% -30% auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#ffb75e33,#ffb75e00);pointer-events:none}.status-pill{display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:10px 14px;border-radius:999px;background:#ffffff1f;color:#f6faf8;font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-dot{width:10px;height:10px;border-radius:999px;background:#5ce4ab;box-shadow:0 0 0 6px #5ce4ab1f}.status-meta{display:grid;gap:10px;font-size:.95rem;color:#edf7f2c7}.status-meta a{width:fit-content;padding:10px 14px;border-radius:999px;background:#ffffff1f;color:#fff;font-weight:700;transition:transform .18s ease,background-color .18s ease}.status-meta a:hover{transform:translateY(-1px);background:#ffffff2e}.top-grid{display:grid;grid-template-columns:minmax(260px,316px) minmax(0,1fr);gap:26px;margin-bottom:26px}.nav-panel,.search-panel,.panel{padding:24px;border-radius:30px;background:#fffcf8d6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.nav-panel{background:linear-gradient(180deg,#fffdf9eb,#f2eee6eb),var(--card)}.search-panel{background:linear-gradient(140deg,#fffaf5f5,#f1f6f1e0),var(--card)}.panel{background:linear-gradient(180deg,#fffdfaf0,#f8f5eee6),var(--card)}.panel-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-heading h2{margin:6px 0 0;font-family:Chakra Petch,sans-serif;font-size:1.5rem;line-height:1;color:var(--ink-strong)}.eyebrow{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.menu-grid{display:grid;gap:12px}.menu-card{position:relative;border:1px solid rgba(28,110,96,.08);border-radius:24px;padding:18px;text-align:left;background:linear-gradient(180deg,#ffffffc2,#f4efe4d1);color:var(--ink);display:grid;gap:6px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.menu-card:after{content:"";position:absolute;inset:auto 18px 0;height:3px;border-radius:999px;background:transparent;transition:background .18s ease}.menu-card:hover{transform:translateY(-2px);border-color:#1c6e602e;box-shadow:0 18px 38px #1b2e291a}.menu-card.active{background:linear-gradient(135deg,#133d37fa,#22705df0),linear-gradient(180deg,#ffffff0f,#fff0);color:#fff;border-color:#5ce4ab38;box-shadow:0 28px 50px #0e2d293d}.menu-card.active:after{background:linear-gradient(90deg,#5ce4ab,#ffd08e)}.menu-label{font-size:1.02rem;font-weight:800}.menu-hint{font-size:.88rem;opacity:.76}.search-field{display:grid;gap:8px;font-weight:700}.search-field input{width:100%;border:1px solid rgba(28,110,96,.12);border-radius:20px;padding:16px 18px;background:#ffffffd6;color:var(--ink-strong);box-shadow:inset 0 1px #fffc;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.search-field input:focus{outline:none;border-color:#1c6e6057;box-shadow:0 0 0 4px #1c6e601f,inset 0 1px #ffffffe6;transform:translateY(-1px)}.resident-card{margin-top:18px;padding:20px;border-radius:26px;border:1px solid rgba(28,110,96,.12);background:linear-gradient(135deg,#ffffffeb,#f1f7f5db),radial-gradient(circle at top right,rgba(28,110,96,.14),transparent 32%);box-shadow:0 22px 44px #1e342f14;display:grid;gap:18px}.resident-card h3{margin:4px 0 0;font-family:Chakra Petch,sans-serif;font-size:2rem;color:var(--ink-strong)}.resident-card p{margin:0;color:var(--muted-strong)}.resident-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.resident-grid div,.summary-list div{display:grid;gap:6px}.resident-grid span,.summary-list span{font-size:.84rem;color:var(--muted)}.resident-grid strong,.summary-list strong{font-size:1rem;color:var(--ink-strong)}.action-row{display:flex;flex-wrap:wrap;gap:10px}.action-button{border:0;border-radius:999px;padding:12px 16px;background:linear-gradient(135deg,#173f39,#226f5e);color:#fff;font-weight:700;box-shadow:0 12px 24px #14403a2e;transition:transform .18s ease,box-shadow .18s ease}.action-button:hover{transform:translateY(-1px);box-shadow:0 16px 28px #14403a3d}.action-button.secondary{background:#1c6e6014;color:var(--ink-strong);box-shadow:none}.match-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.match-chip{border:1px solid rgba(28,110,96,.08);border-radius:999px;padding:8px 12px;background:#ffffffb3;color:var(--ink);font-weight:700;transition:background-color .18s ease,transform .18s ease}.match-chip:hover{transform:translateY(-1px);background:#1c6e6014}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:26px}.stats-grid.compact{margin:20px 0}.metric-card{min-height:152px;padding:22px;border-radius:28px;display:grid;align-content:space-between;gap:16px;background:linear-gradient(180deg,#ffffffdb,#f5f1e8db)}.metric-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:28px 28px 0 0}.metric-card:after{content:"";position:absolute;right:-28px;bottom:-28px;width:100px;height:100px;border-radius:50%;opacity:.16}.metric-card span{display:block;max-width:18ch;color:var(--muted);font-size:.88rem}.metric-card strong{font-family:Chakra Petch,sans-serif;font-size:clamp(1.55rem,2.4vw,2.25rem);line-height:1;color:var(--ink-strong)}.metric-card.green:before{background:linear-gradient(90deg,#1f7c62,#58cf98)}.metric-card.green:after{background:#58cf98}.metric-card.blue:before{background:linear-gradient(90deg,#2667c8,#5db2ff)}.metric-card.blue:after{background:#5db2ff}.metric-card.sand:before{background:linear-gradient(90deg,#c9851e,#f2be61)}.metric-card.sand:after{background:#f2be61}.metric-card.rose:before{background:linear-gradient(90deg,#b84e59,#f18d8f)}.metric-card.rose:after{background:#f18d8f}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(340px,.78fr);gap:26px;margin-bottom:26px}.summary-table-panel{background:linear-gradient(180deg,#fffcf8f5,#f1ede3eb),var(--card)}.summary-table-shell{overflow-x:auto;border-radius:22px;border:1px solid rgba(22,53,48,.08);box-shadow:inset 0 1px #ffffffb3}.summary-sheet-table{width:100%;min-width:1040px;border-collapse:collapse;font-size:.92rem;background:linear-gradient(180deg,#faf7f1fa,#f0ede5fa)}.summary-sheet-table th,.summary-sheet-table td{border:1px solid rgba(22,53,48,.09);padding:12px;text-align:center}.summary-sheet-table thead th{background:linear-gradient(180deg,#f9f7f2,#e6dfd4);font-weight:700;color:var(--ink-strong)}.summary-sheet-table thead th:first-child,.summary-sheet-table tbody th{text-align:left;min-width:230px}.summary-sheet-table tbody th{background:#eae4dac7;font-weight:700}.summary-row:hover td,.summary-row:hover th{background:#1c6e600a}.summary-row.income td{color:#1d6ed5}.summary-row.expense td{color:#c44a52}.summary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.highlight-card{padding:22px;border-radius:28px;background:linear-gradient(135deg,#173f39,#237160),radial-gradient(circle at top right,rgba(255,208,142,.16),transparent 30%);color:#f7fffb;display:grid;gap:8px;box-shadow:0 24px 40px #123a3538}.highlight-card span{opacity:.76}.highlight-card strong{font-family:Chakra Petch,sans-serif;font-size:clamp(2rem,4vw,3.1rem);line-height:.95}.highlight-card p{margin:0;opacity:.88}.summary-chart-board{display:grid;gap:28px}.summary-overview-bars,.summary-month-bars{display:grid;gap:14px}.month-compare-row{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;align-items:start}.month-compare-label{font-weight:800;color:var(--ink-strong);padding-top:8px}.month-compare-bars{display:grid;gap:8px}.chart-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center}.chart-row.large{grid-template-columns:180px minmax(0,1fr) auto}.chart-label,.chart-series{font-size:.9rem;font-weight:700;color:var(--ink)}.chart-series.income{color:#1d6ed5}.chart-series.expense{color:#c44a52}.chart-track{width:100%;height:12px;background:#16353014;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 3px #0000000d}.chart-fill{height:100%;border-radius:inherit}.chart-fill.income{background:linear-gradient(90deg,#1d6ed5,#5db2ff)}.chart-fill.expense{background:linear-gradient(90deg,#c44a52,#f18d8f)}.chart-fill.carry{background:linear-gradient(90deg,#2d9f57,#68c889)}.chart-fill.balance{background:linear-gradient(90deg,#d98b1b,#f1c15c)}.month-switcher{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}.month-switch{min-width:190px;border:1px solid rgba(22,53,48,.08);border-radius:22px;padding:15px 16px;text-align:left;background:linear-gradient(180deg,#fffc,#f3efe6e6);color:inherit;display:grid;gap:8px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.month-switch:hover{transform:translateY(-2px);box-shadow:0 16px 26px #1b2e2914}.month-switch.active{background:linear-gradient(135deg,#173f39,#237160);color:#fff;border-color:#5ce4ab38;box-shadow:0 20px 34px #123a3538}.month-switch span{font-size:.82rem;opacity:.82}.month-switch strong{font-family:Chakra Petch,sans-serif;font-size:1.22rem}.table-scroll{overflow-x:auto;border-radius:20px}.data-table{width:100%;min-width:920px;border-collapse:separate;border-spacing:0;overflow:hidden}.data-table thead th{position:sticky;top:0;z-index:1;background:linear-gradient(180deg,#f5f1ea,#ebe4d8);color:var(--muted-strong);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.data-table th,.data-table td{padding:14px 12px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(22,53,48,.08)}.data-table tbody td{background:#ffffff8a}.data-table tbody tr:hover td,.data-table tbody tr.is-highlight td{background:#1c6e6014}.month-tags{display:flex;flex-wrap:wrap;gap:8px}.month-tag{padding:6px 10px;border-radius:999px;border:1px solid rgba(217,139,27,.12);background:#ffd5942e;font-size:.8rem;white-space:nowrap}.muted-text,.empty-panel,.helper-text{color:var(--muted)}.empty-panel{padding:18px 0 4px}.loading-state,.error-state{min-height:300px;align-items:center}.reveal{animation:rise-in .56s cubic-bezier(.2,.7,.2,1) both}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1120px){.hero-card,.top-grid,.dashboard-grid,.stats-grid,.summary-list,.resident-grid{grid-template-columns:1fr}.hero-copy h1{max-width:12ch}}@media(max-width:760px){.app-shell{width:min(100vw - 18px,1480px);padding-top:14px;padding-bottom:34px}.hero-card,.nav-panel,.search-panel,.panel,.metric-card{border-radius:24px}.hero-card,.nav-panel,.search-panel,.panel{padding:16px}.hero-card{gap:16px}.hero-copy h1{max-width:11ch;font-size:clamp(1.9rem,9vw,3rem);line-height:.94;letter-spacing:-.045em}.hero-text{font-size:.95rem}.hero-status{padding:16px;border-radius:22px}.status-meta{font-size:.9rem}.status-meta a,.status-pill{padding:9px 12px}.top-grid,.dashboard-grid,.stats-grid{gap:16px;margin-bottom:16px}.panel-heading{margin-bottom:14px}.panel-heading h2{font-size:1.24rem}.metric-card{min-height:124px;padding:18px}.metric-card strong{font-size:clamp(1.3rem,6vw,1.8rem)}.resident-card{padding:16px}.resident-card h3{font-size:1.6rem}.chart-row,.chart-row.large,.month-compare-row{grid-template-columns:1fr}.month-compare-label{padding-top:0}}