:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fafafa;--surface:#fff;--primary:#16803c;--primary-hover:#146c33;--primary-soft:#eaf6ee;--text:#16181b;--muted:#7a8087;--danger:#dc2626;--danger-soft:#fdecec;--border:#ececed;--radius:14px;--radius-sm:10px;--shadow-sm:0 1px 2px #1018200a;--shadow-md:0 4px 16px #1018200f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans Thai,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0}#root{background:var(--bg);max-width:480px;min-height:100vh;margin:0 auto}.center-screen{text-align:center;height:100vh;color:var(--muted);justify-content:center;align-items:center;padding:24px;display:flex}.navbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:10;justify-content:space-between;align-items:center;padding:16px 20px;display:flex;position:sticky;top:0}.navbar-title{letter-spacing:-.01em;color:var(--text);font-size:16px;font-weight:700}.navbar-user{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.avatar{border-radius:50%;width:24px;height:24px}.app-main{padding:20px 20px 56px}.page-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;display:flex}.page-header h2{letter-spacing:-.01em;margin:0;font-size:20px;font-weight:700}.back-link{color:var(--muted);margin-bottom:14px;font-size:13px;font-weight:500;text-decoration:none;display:inline-block}.back-link:hover{color:var(--text)}.section-title{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:28px 0 10px;font-size:13px;font-weight:600}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:12px;padding:18px}.card h3{margin:0 0 16px;font-size:15px;font-weight:700}.form label{color:var(--muted);margin-bottom:14px;font-size:12px;font-weight:600;display:block}.form input,.form select{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);background:var(--surface);margin-top:6px;padding:10px 12px;font-family:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s;display:block}.form input:focus,.form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%237A8087' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.checkbox-row{align-items:center;gap:8px;font-weight:500;flex-direction:row!important;display:flex!important}.checkbox-row input{accent-color:var(--primary);width:auto!important;margin:0!important}.form-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:10px 18px;font-size:14px;font-weight:600;transition:background .15s,transform .1s}.btn-primary:hover{background:var(--primary-hover)}.btn-primary:disabled{opacity:.5;cursor:default}.btn-primary:active{transform:scale(.98)}.btn-secondary{color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:10px 18px;font-size:14px;font-weight:600;transition:background .15s}.btn-secondary:hover{background:var(--bg)}.btn-link{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:6px;padding:4px;font-size:12px;font-weight:600}.btn-link:hover{background:var(--bg);color:var(--text)}.btn-link.danger{color:var(--danger)}.btn-link.danger:hover{background:var(--danger-soft)}.vehicle-grid{flex-direction:column;gap:10px;display:flex}.vehicle-card{justify-content:space-between;align-items:center;gap:8px;padding:14px;display:flex}.vehicle-card-link{color:inherit;flex:1;align-items:center;gap:14px;min-width:0;text-decoration:none;display:flex}.vehicle-icon{background:var(--primary-soft);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.vehicle-name{text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;overflow:hidden}.vehicle-meta{color:var(--muted);margin-top:2px;font-size:13px}.hero-card{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);color:#fff;box-shadow:var(--shadow-md);border-radius:20px;margin-bottom:14px;padding:22px 20px}.hero-label{opacity:.85;margin-bottom:6px;font-size:13px}.hero-amount{letter-spacing:-.02em;font-size:30px;font-weight:800}.hero-delta{background:#ffffff29;border-radius:999px;margin-top:8px;padding:3px 9px;font-size:12px;font-weight:600;display:inline-block}.hero-tiles{gap:10px;margin-top:18px;display:flex}.hero-tile{background:#ffffff24;border-radius:14px;flex:1;align-items:center;gap:10px;min-width:0;padding:10px 12px;display:flex}.hero-tile-icon{background:#fff3;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:flex}.hero-tile-value{font-size:15px;font-weight:700}.hero-tile-label{opacity:.85;font-size:11px}.period-tabs{background:var(--surface);border:1px solid var(--border);border-radius:999px;gap:2px;margin-bottom:16px;padding:4px;display:flex}.period-tab{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:999px;flex:1;padding:7px 0;font-size:12px;font-weight:600;transition:background .15s,color .15s}.period-tab.active{background:var(--primary);color:#fff}.tx-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.tx-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);align-items:flex-start;gap:12px;padding:14px;display:flex}.tx-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:17px;display:flex}.tx-icon-amber{background:#fef3e2}.tx-icon-sky{background:#e5f2ff}.tx-main{flex:1;min-width:0}.tx-title{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;overflow:hidden}.tx-sub{color:var(--muted);margin-top:3px;font-size:12px}.tx-sub.muted{color:#a7abaf}.tx-right{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:6px;display:flex}.tx-amount{color:var(--danger);white-space:nowrap;font-size:14px;font-weight:700}.empty-text{color:var(--muted);text-align:center;padding:40px 20px;font-size:14px}.error-text{color:var(--danger);background:var(--danger-soft);border-radius:var(--radius-sm);margin-bottom:12px;padding:10px 14px;font-size:13px}