:root,[data-theme=purple-pink]{--bg:#faf7ff;--bg-elevated:#fff;--bg-subtle:#f3eefc;--border:#e7e0f5;--text:#241c35;--text-secondary:#6e6584;--text-inverse:#fff;--accent:#7c5cfc;--accent-2:#ff6fa5;--accent-gradient:linear-gradient(135deg, var(--accent), var(--accent-2));--danger:#dc2626;--danger-bg:#fee2e2;--success:#16a34a;--success-bg:#dcfce7;--warning:#d97706;--warning-bg:#fef3c7}[data-theme=green-blue]{--bg:#f5fbf9;--bg-elevated:#fff;--bg-subtle:#e7f6f1;--border:#d8eee6;--text:#143028;--text-secondary:#4b7267;--text-inverse:#fff;--accent:#10b981;--accent-2:#38bdf8;--accent-gradient:linear-gradient(135deg, var(--accent), var(--accent-2));--danger:#dc2626;--danger-bg:#fee2e2;--success:#16a34a;--success-bg:#dcfce7;--warning:#d97706;--warning-bg:#fef3c7}[data-theme=orange-cream]{--bg:#fffbf5;--bg-elevated:#fff;--bg-subtle:#fdf0e4;--border:#f5e1cc;--text:#3a2314;--text-secondary:#8a6b52;--text-inverse:#fff;--accent:#f97316;--accent-2:#fbbf24;--accent-gradient:linear-gradient(135deg, var(--accent), var(--accent-2));--danger:#dc2626;--danger-bg:#fee2e2;--success:#16a34a;--success-bg:#dcfce7;--warning:#d97706;--warning-bg:#fef3c7}[data-theme=navy-dark]{--bg:#111827;--bg-elevated:#1b2436;--bg-subtle:#232e45;--border:#2e3b57;--text:#e7ecf5;--text-secondary:#9aa7c2;--text-inverse:#fff;--accent:#8b5cf6;--accent-2:#22d3ee;--accent-gradient:linear-gradient(135deg, var(--accent), var(--accent-2));--danger:#f87171;--danger-bg:#f8717126;--success:#4ade80;--success-bg:#4ade8026;--warning:#fbbf24;--warning-bg:#fbbf2426}:root{--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--shadow-card:0 10px 15px -3px #00000014, 0 4px 6px -2px #0000000a;--sans:"Noto Sans Thai", system-ui, "Segoe UI", Roboto, sans-serif;font:16px/145% var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=navy-dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}#root{box-sizing:border-box;flex-direction:column;min-height:100svh;display:flex}body{background:var(--bg);color:var(--text);margin:0;transition:background .2s,color .2s}h1,h2,h3{font-family:var(--sans);color:var(--text);font-weight:700}h1{letter-spacing:-.02em;margin:1.5rem 0;font-size:2.4rem}h2{letter-spacing:-.01em;margin:0 0 .5rem;font-size:1.4rem}p{margin:0}.coming-soon{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;min-height:100vh;padding:2rem;display:flex}*{box-sizing:border-box}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-nav{background:var(--bg-elevated);border-bottom:1px solid var(--border);box-shadow:var(--shadow-card);z-index:10;align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex;position:sticky;top:0}.app-nav a{color:var(--text-secondary);padding:.3rem .1rem;font-weight:500;text-decoration:none}.app-nav a.active{color:var(--accent);font-weight:700}.app-nav button{margin-left:auto}main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:1.25rem 1rem 3rem}.login-page{text-align:center;background:var(--accent-gradient);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-height:100vh;padding:2rem;display:flex}.login-page form{background:var(--bg-elevated);border-radius:var(--radius-lg);width:100%;max-width:320px;box-shadow:var(--shadow-card);flex-direction:column;gap:.75rem;padding:1.5rem;display:flex}.mode-toggle{text-align:left;flex-direction:column;gap:.25rem;font-size:.9rem;display:flex}input,select,button,textarea{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-size:1rem;font-family:var(--sans);padding:.55rem .7rem}button{cursor:pointer;background:var(--bg-subtle)}button:hover{filter:brightness(.95)}.btn-primary{background:var(--accent-gradient);color:var(--text-inverse);border-radius:var(--radius-sm);border:none;padding:.6rem 1.1rem;font-weight:600;text-decoration:none}.error{color:var(--danger)}.hint{color:var(--text-secondary);font-size:.85rem}.room-form{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.color-field{align-items:center;gap:.4rem;font-size:.85rem;display:flex}.color-hint{color:var(--text-secondary)}.no-expiry-check{color:var(--text-secondary);align-items:center;gap:.4rem;margin-top:-.5rem;margin-bottom:.5rem;font-size:.85rem;display:flex}.room-list{flex-direction:column;gap:.5rem;padding:0;list-style:none;display:flex}.room-list li{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:.5rem;padding:.6rem .85rem;display:flex}.floor-tabs{flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem;display:flex}.floor-tab{border:1px solid var(--border);background:0 0;border-radius:999px;padding:.35rem .8rem}.floor-tab.active{background:var(--accent-gradient);border-color:var(--accent);color:var(--text-inverse)}.floor-form{gap:.5rem;margin-bottom:1rem;display:flex}.floor-plan-grid{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);gap:2px;margin-bottom:1rem;padding:4px;display:grid;overflow-x:auto}.floor-plan-room{color:#0f172a;cursor:grab;white-space:nowrap;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:.25rem;justify-content:center;align-items:center;gap:.25rem;padding:0 .25rem;font-size:.75rem;display:flex;position:relative;overflow:hidden}.floor-plan-room.dragging{cursor:grabbing;opacity:.85;box-shadow:0 0 0 2px var(--bg-elevated)}.resize-handle{background:var(--text);border:2px solid var(--bg-elevated);cursor:nwse-resize;touch-action:none;border-radius:3px;width:12px;height:12px;position:absolute;bottom:2px;right:2px}.grid-field{align-items:center;gap:.3rem;font-size:.85rem;display:flex}.grid-field input{width:3.5rem}.room-label{flex:1}.item-list-header{justify-content:space-between;align-items:center;display:flex}.item-list{flex-direction:column;gap:.75rem;padding:0;list-style:none;display:flex}.item-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);align-items:center;gap:.75rem;padding:.75rem;display:flex}.item-card img,.photo-thumb,.photo-placeholder{object-fit:cover;border-radius:var(--radius-sm);background:var(--bg-subtle);width:56px;height:56px}.item-info{flex-direction:column;flex:1;display:flex}.item-meta{color:var(--text-secondary);align-items:center;gap:.3rem;font-size:.8rem;display:flex}.category-chip{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block}.item-price{color:var(--success);font-size:.85rem}.item-actions{gap:.5rem;display:flex}.item-form-page form{flex-direction:column;gap:.75rem;display:flex}.item-form-page label{flex-direction:column;gap:.25rem;display:flex}.photo-gallery{flex-wrap:wrap;gap:.5rem;display:flex}.photo-item{flex-direction:column;align-items:center;gap:.25rem;display:flex}.photo-item .photo-thumb,.photo-item .photo-placeholder{width:96px;height:96px}.plan-section{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1rem}.plan-list{flex-direction:column;gap:.5rem;padding:0;list-style:none;display:flex}.plan-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);box-shadow:var(--shadow-card);padding:.75rem 1rem}.plan-card-header{cursor:pointer;flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.plan-card-header strong{margin-right:auto}.plan-status{background:var(--bg-subtle);border-radius:999px;padding:.15rem .6rem;font-size:.75rem;font-weight:600}.plan-status-active{background:color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));color:var(--accent)}.plan-status-completed{background:var(--success-bg);color:var(--success)}.plan-status-cancelled{background:var(--bg-subtle);color:var(--text-secondary)}.plan-amount{color:var(--text-secondary);font-size:.85rem}.plan-card-body{margin-top:.5rem;overflow-x:auto}.payment-table{border-collapse:collapse;width:100%;font-size:.85rem}.payment-table th{text-align:left;background:var(--bg-subtle);color:var(--text-secondary);padding:.4rem .5rem;font-weight:600;position:sticky;top:0}.payment-table td{text-align:left;border-bottom:1px solid var(--border);padding:.4rem .5rem}.payment-table tbody tr:nth-child(2n){background:var(--bg-subtle)}.payment-table tr.overdue td{color:var(--danger);font-weight:600}.overdue-badge{background:var(--danger-bg);color:var(--danger);border-radius:999px;margin-left:.4rem;padding:.05rem .4rem;font-size:.7rem}.plan-form{flex-direction:column;gap:.5rem;max-width:24rem;margin-top:.5rem;display:flex}.plan-form label{flex-direction:column;gap:.2rem;font-size:.85rem;display:flex}.plan-form-actions{gap:.5rem;display:flex}button.danger{color:var(--danger);border-color:var(--danger)}.expiry-badge{border-radius:999px;align-self:flex-start;padding:.1rem .5rem;font-size:.75rem}.expiry-badge-soon{background:var(--warning-bg);color:var(--warning)}.expiry-badge-expired{background:var(--danger-bg);color:var(--danger)}.dashboard-page section{margin-top:1.5rem}.stat-row{flex-wrap:wrap;gap:1rem;margin:1rem 0;display:flex}.stat-card{border-radius:var(--radius-md);background:var(--bg-subtle);flex-direction:column;flex:1;gap:.2rem;min-width:140px;padding:1rem 1.25rem;display:flex}.stat-accent-1{background:color-mix(in srgb, var(--accent) 16%, var(--bg-elevated))}.stat-accent-1 .stat-value{color:var(--accent)}.stat-accent-2{background:color-mix(in srgb, var(--accent-2) 18%, var(--bg-elevated))}.stat-accent-2 .stat-value{color:var(--accent-2)}.stat-accent-3{background:color-mix(in srgb, var(--danger) 14%, var(--bg-elevated))}.stat-accent-3 .stat-value{color:var(--danger)}.stat-accent-4{background:color-mix(in srgb, var(--warning) 16%, var(--bg-elevated))}.stat-accent-4 .stat-value{color:var(--warning)}.stat-value{font-size:1.6rem;font-weight:800}.stat-label{color:var(--text-secondary);font-size:.8rem}.today-label{color:var(--text-secondary);font-size:.85rem}.calendar-grid{grid-template-columns:repeat(7,1fr);gap:4px;margin-top:.5rem;display:grid}.calendar-weekday{text-align:center;color:var(--text-secondary);padding-bottom:.25rem;font-size:.75rem}.calendar-day{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--bg-elevated);border:1px solid var(--border);flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:.8rem;display:flex}.calendar-day.empty{background:0 0;border:none}.calendar-day.today{border-color:var(--accent);border-width:2px}.calendar-day-num{font-weight:600}.calendar-day-dots{gap:2px;display:flex}.calendar-dot{border-radius:50%;width:6px;height:6px}.dot-installment{background:var(--accent)}.dot-loan{background:var(--accent-2)}.dashboard-filter-bar{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.dashboard-filter-bar h3{margin:0 auto 0 0}.dashboard-filter-bar input{flex:1;min-width:140px}.due-card{border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid var(--border);align-items:center;gap:.6rem;padding:.6rem .85rem;display:flex}.due-card.overdue{background:var(--danger-bg)}.due-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.due-info{flex-direction:column;flex:1;display:flex}.due-amount{color:var(--text);font-weight:700}.dashboard-list{flex-direction:column;gap:.5rem;padding:0;list-style:none;display:flex}.dashboard-list li{border-radius:var(--radius-sm);background:var(--bg-subtle);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex}.dashboard-list li.overdue{background:var(--danger-bg)}.loan-tabs{flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem;display:flex}.loan-tabs button{border-radius:999px}.loan-tabs button.active{background:var(--accent-gradient);border-color:var(--accent);color:var(--text-inverse)}.extra-input{align-items:center;gap:.25rem;display:flex}.refinance-calc{margin-top:.5rem}.settings-page section{margin-top:1.5rem}.theme-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;display:grid}.theme-swatch{border-radius:var(--radius-md);border:2px solid var(--border);background:var(--bg-elevated);cursor:pointer;text-align:left;flex-direction:column;gap:.5rem;padding:.75rem;display:flex}.theme-swatch.active{border-color:var(--accent);box-shadow:var(--shadow-card)}.theme-swatch-preview{border-radius:var(--radius-sm);height:40px}.theme-swatch-name{color:var(--text);font-size:.85rem;font-weight:600}