:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --ink:#13213d; --muted:#71809c; --line:#dce4ef; --green:#05a66f; --teal:#16be9e; --blue:#0b83e8; --bg:#fbfdff; }
* {box-sizing:border-box;} html {min-height:100%;-webkit-text-size-adjust:100%;} body{margin:0;background:#e8f1f7;color:var(--ink);font-family:inherit;}
button,input {font:inherit;} button {cursor:pointer;} button:focus-visible,input:focus-visible,a:focus-visible {outline:3px solid #238ee8;outline-offset:3px;}
.app-shell { width:100%;max-width:520px;min-height:100dvh;margin:0 auto;background:var(--bg);position:relative;overflow:hidden;padding:calc(20px + env(safe-area-inset-top,0px)) 22px calc(24px + env(safe-area-inset-bottom,0px));box-shadow:0 6px 35px #163a5b16; }
.app-shell:before { content:""; position:absolute;right:-96px;top:-108px;width:330px;height:330px;background:radial-gradient(circle at 60% 40%,#c6ecfa 0%,#daf8f0 50%,#ffffff00 72%);pointer-events:none; }
.header {display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1;margin:0 0 54px;min-height:60px;}
.brand {display:flex;align-items:center;gap:12px;min-width:0;} .brand-icon {height:52px;width:52px;flex:none;object-fit:cover;border-radius:13px;box-shadow:0 2px 12px #137cc228;} h1 {font-size:clamp(21px,5vw,25px);letter-spacing:-.75px;margin:0;line-height:1.1;white-space:nowrap;}
.add-button {display:inline-flex;justify-content:center;align-items:center;gap:7px;border:0;border-radius:999px;min-width:105px;padding:13px 17px;background:linear-gradient(115deg,#52dba0,#03a879);color:white;font-size:16px;font-weight:800;box-shadow:0 5px 12px #0daf8738;touch-action:manipulation;}
.add-button:active {transform:scale(.98)} .add-button[disabled]{opacity:.55;cursor:default;} .add-icon {width:25px;height:25px;background:#ffffffed;color:#00ad78;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:22px;line-height:1;}
.form {position:relative;z-index:1;} .field {margin-bottom:48px;} .label-row {display:flex;align-items:center;gap:12px;margin-bottom:16px;} .mini-icon {height:40px;width:40px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:linear-gradient(145deg,#edf9ff,#d8f5f6);color:#0785db;} .mini-icon.green {color:#0ba974;background:linear-gradient(145deg,#effff8,#d5f6ed);} h2 {margin:0;font-size:22px;line-height:1.25;letter-spacing:-.3px;font-weight:780;}
.money-wrapper {position:relative;border:2px solid transparent;border-radius:18px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(100deg,#64edac,#1597f3) border-box;box-shadow:0 5px 20px #1aa6d413;height:68px;display:flex;align-items:center;} .money-wrapper:focus-within{box-shadow:0 0 0 3px #1ba7d521,0 4px 20px #1aa6d41c;} .money-input{width:100%;min-width:0;height:100%;border:0;background:transparent;padding:0 18px;outline:0!important;font-size:27px;font-weight:700;letter-spacing:.2px;color:#12274c;} .money-input::placeholder {font-size:clamp(16px,4.5vw,20px);font-weight:450;color:#97a3b7;} .dong {margin-right:13px;padding:5px 12px;border-radius:12px;background:#e0faf6;color:#087dba;font-weight:850;font-size:26px;}
.text-input {width:100%;height:62px;border:1.6px solid #d6dde9;border-radius:18px;background:#fff;padding:0 18px;font-size:19px;font-weight:500;color:#15294a;outline:0;} .text-input::placeholder {color:#99a4b9;font-weight:450;} .text-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1896f31c;}
.category-section {margin-top:2px;} .chips {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;} .chip {border:1.5px solid #dce3ed;border-radius:999px;background:#fff;min-height:55px;padding:10px 12px;display:flex;gap:9px;align-items:center;justify-content:center;text-align:center;color:#17416e;font-size:14px;font-weight:670;line-height:1.25;transition:background .12s ease,border-color .12s ease,transform .12s ease;touch-action:manipulation;} .chip svg {flex:none;width:21px;height:21px;} .chip:active {transform:scale(.98);} .chip[aria-pressed="true"] {border-color:#58d6a1;background:linear-gradient(115deg,#d6fae8,#21c789);color:#06674d;box-shadow:0 2px 8px #2dcda324;} .tick {font-size:13px;display:none;border-radius:100%;background:#fff;color:#039e70;width:18px;height:18px;place-items:center;flex:none;} .chip[aria-pressed="true"] .tick {display:grid;}
.message {min-height:20px;margin:17px 0 0;position:relative;z-index:1;font-size:13px;color:#b44736;line-height:1.5;} .message[hidden] {display:none;} .toast {position:fixed;bottom:calc(23px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(15px);width:max-content;max-width:calc(100% - 36px);padding:13px 18px;background:#102c40;color:#fff;border-radius:14px;z-index:20;font-size:14px;box-shadow:0 8px 30px #122f4a40;opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease;text-align:center;} .toast.visible {opacity:1;transform:translateX(-50%) translateY(0);} .visually-hidden {position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
@media(min-width:600px) {body{padding:28px 0;} .app-shell{border-radius:30px;min-height:830px;padding:34px 30px 28px;border:1px solid #e0e8f0;} } @media(max-width:370px){.app-shell{padding-left:15px;padding-right:15px;} .header{margin-bottom:39px;} .brand-icon{width:43px;height:43px;} h1{font-size:19px;} .add-button{padding:11px 12px;min-width:90px;font-size:14px;} .chips{gap:9px;} .chip{font-size:12px;padding:9px 7px;gap:5px;} h2{font-size:20px;} .field{margin-bottom:36px;}} @media(prefers-reduced-motion:reduce){.toast,.chip{transition:none;}}