@font-face{font-family:Kanit;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/kanit-thai-400.woff2') format('woff2');unicode-range:U+0E00-0E7F}
@font-face{font-family:Kanit;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/kanit-latin-400.woff2') format('woff2');unicode-range:U+0-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Kanit;font-style:normal;font-weight:500;font-display:swap;src:url('/assets/kanit-thai-500.woff2') format('woff2');unicode-range:U+0E00-0E7F}
@font-face{font-family:Kanit;font-style:normal;font-weight:500;font-display:swap;src:url('/assets/kanit-latin-500.woff2') format('woff2');unicode-range:U+0-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Kanit;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/kanit-thai-700.woff2') format('woff2');unicode-range:U+0E00-0E7F}
@font-face{font-family:Kanit;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/kanit-latin-700.woff2') format('woff2');unicode-range:U+0-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--paper:#fff9fc;--ink:#3f2944;--muted:#755f77;--rule:#efdeec;--green:#9225a9;--wash:#f8eaf6;--error:#a03550;font-family:Kanit,Tahoma,sans-serif;font-size:16px;line-height:1.7;scroll-behavior:smooth;scrollbar-color:#cfa6ce #fff9fc}::selection{background:#f1cef0;color:#60276b}:focus-visible{outline-color:#b443bd}button{font-weight:500;border-radius:12px}button:hover{background:#781e8c}input{border-color:#d9bfd5;border-radius:10px;caret-color:#9225a9}input::placeholder{color:#846c83;opacity:1}.secondary:hover{background:#faeefa}.sheet{border-radius:16px}.notice{background:#f6e8f3;color:#705273}.payment-aside{background:#f7e9f5;border-radius:16px}.payment-aside .fine{color:#755575}.status{background:#f6e8f3;color:#81408a}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0}.brand img{object-fit:contain;height:70px;width:126px}.brand>span{border-left:1px solid #dfc4dc;padding-left:12px;font-size:.95rem;color:#79577b}.topbar{min-height:98px}.topbar nav{display:flex;align-items:center;gap:32px}.topbar nav a{font-size:.92rem;text-decoration:none;color:#705773}.topbar nav a:hover{color:#9225a9}.topbar nav a span{margin-left:5px}.topbar nav .nav-admin{color:#9225a9;background:#f7eaf5;padding:9px 16px;border-radius:10px}.skip-link{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:10}.skip-link:focus{top:10px}.pay-home .shell{max-width:1216px}.pay-home main{padding:0}.pay-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:90px;align-items:center;padding:76px 0 72px}.hero-copy h1{font-size:clamp(2.4rem,4vw,3.65rem);font-weight:700;line-height:1.4;letter-spacing:-.025em}.hero-copy h1>span{color:#9225a9}.hero-copy>p{font-size:1.12rem;line-height:1.9;color:#795f7b;margin-top:25px;max-width:38ch}.gentle-link{display:inline-flex;align-items:center;gap:28px;margin-top:26px;text-decoration:none;font-weight:500}.gentle-link:hover{text-decoration:underline}.brand-note{display:flex;align-items:center;gap:9px;color:#896786;font-size:.82rem;margin-top:64px}.brand-note svg{flex-shrink:0;color:#b84aad}.open-bill{position:relative;isolation:isolate;border:1px solid #ebd7e8;background:white;border-radius:16px;padding:30px 32px 26px;box-shadow:0 16px 48px -30px #b667ab4d}.bill-art{width:82px;height:82px;background:#f9edf8;display:flex;align-items:center;justify-content:center;border-radius:16px;color:#a533ae;margin-bottom:20px}.open-bill h2{font-size:1.65rem;font-weight:500;margin-bottom:8px}.open-bill>.muted{line-height:1.8;margin-bottom:26px}.open-bill label{font-weight:500;font-size:.88rem}.open-bill input{font-size:.9rem;padding:13px 14px;background:#fffcfe}.open-bill input[aria-invalid=true]{border-color:#a03550}.input-help{color:#806a7e;font-size:.75rem;margin:8px 0 22px}.open-bill button{padding:13px 16px;display:flex;align-items:center;justify-content:space-between}.open-bill .message:empty{margin:0}.open-bill .message{font-size:.84rem}.private-note{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:22px;margin-top:22px;border-top:1px solid #f1e4ef;color:#806a7e;font-size:.74rem}.private-note svg{flex-shrink:0}.how-section{padding:48px 0 44px;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 2fr;gap:50px;scroll-margin-top:24px}.how-intro h2{font-size:1.2rem;font-weight:500;line-height:1.6}.how-intro p{font-size:.85rem;color:#806a7e;margin-top:8px}.how-list{display:flex;gap:30px;list-style:none;margin:0;padding:0}.how-list li{flex:1;min-width:0}.step-index{display:block;color:#a33cb0;background:#f7e8f5;border-radius:8px;width:28px;height:28px;text-align:center;font-size:.83rem;margin-bottom:12px}.how-list h3{font-size:.97rem;font-weight:500;margin:0 0 6px}.how-list p{font-size:.8rem;color:#806a7e;line-height:1.9;margin:0}.payment-notice{display:flex;align-items:center;justify-content:space-between;gap:40px;background:#f8eef7;border-radius:14px;padding:24px 28px;margin-bottom:56px}.payment-notice h2{font-size:1rem;font-weight:500;color:#6a4270;margin-bottom:4px}.payment-notice p{font-size:.83rem;color:#806a7e;max-width:70ch}.payment-notice>a{flex-shrink:0;text-decoration:none;font-size:.88rem}.brand-footer{align-items:center;padding:28px 0 34px}.brand-footer .brand img{width:104px;height:59px}.brand-footer>div:last-child{text-align:right}.brand-footer p{font-size:.8rem;line-height:1.8}.brand-footer>div:first-child>p{font-size:.85rem;color:#a04e9e}.brand-footer a:not(.brand){font-size:.8rem}.brand-footer .copyright{font-size:.7rem;margin-top:8px;color:#896e87}.invoice-layout h1{font-weight:500}.invoice-footer,.bill-ref{font-size:.82rem}.pay-home h1,.open-bill{animation:arrive .45s cubic-bezier(.16,1,.3,1) both}@keyframes arrive{from{transform:translateY(7px);filter:blur(1px)}to{transform:translateY(0);filter:blur(0)}}@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.pay-home h1,.open-bill{animation:none}}
@media(max-width:1000px){.pay-hero{gap:44px;padding:56px 0}.hero-copy h1{font-size:2.65rem}.how-section{grid-template-columns:1fr;gap:26px}.how-intro p br{display:none}.brand-note{margin-top:38px}}
@media(max-width:760px){.pay-hero{grid-template-columns:1fr;gap:34px;padding:38px 0}.hero-copy h1{font-size:2.4rem;line-height:1.4}.hero-copy>p{font-size:1rem;margin-top:18px}.brand-note{margin-top:24px}.open-bill{padding:26px}.bill-art{position:absolute;top:25px;right:24px;width:58px;height:58px}.bill-art svg{width:42px;height:48px}.open-bill>.muted{font-size:.9rem;margin-right:42px}.how-section{padding:30px 0}.how-list{flex-direction:column;gap:22px}.how-list li{display:flex;gap:14px}.step-index{flex-shrink:0}.how-list h3{font-size:1rem}.how-list p{font-size:.85rem}.payment-notice{display:block;padding:24px;margin-bottom:32px}.payment-notice>a{display:inline-block;margin-top:16px}.topbar{min-height:85px}.brand img{width:104px;height:60px}.topbar nav{gap:16px}.topbar nav a{font-size:.8rem}.topbar nav .nav-admin{padding:7px 10px}.topbar nav>a:first-child{display:none}.brand-footer{flex-direction:row;align-items:start;gap:22px}.brand-footer>div:last-child{text-align:right}.brand-footer p,.brand-footer a:not(.brand){font-size:.72rem}.brand-footer .copyright{font-size:.65rem}}
@media(max-width:400px){.brand{gap:8px}.brand>span{padding-left:8px}.hero-copy h1{font-size:2.15rem}.open-bill{padding:24px 20px}.private-note{font-size:.67rem}.brand-footer{flex-direction:column}.brand-footer>div:last-child{text-align:left}.invoice-layout .brand>span{font-size:.8rem}}

/* Keep the form crisp and all text legible across input states. */
.open-bill{box-shadow:none}.bill-art{position:absolute;top:28px;right:26px;background:transparent;border-radius:0;width:58px;height:66px;margin:0}.open-bill h2{padding-right:72px}.open-bill>.muted{margin-right:50px}.payment-notice p{color:#705770}button:disabled,button:disabled:hover{background:#f2e8f0;color:#72566f}.brand-footer .copyright{font-size:.75rem}.private-note{font-size:.78rem}
@media(max-width:760px){.brand-footer p,.brand-footer a:not(.brand){font-size:.78rem}.brand-footer .copyright{font-size:.75rem}}
@media(max-width:400px){.private-note{font-size:.75rem}}

/* User preference: white page canvas, brand colors remain accents. */
:root{--paper:#ffffff;scrollbar-color:#cfa6ce #ffffff}body{background:#ffffff}.sheet{border:1px solid #efdeec}

@media(max-width:760px){.invoice-page .topbar>.muted{display:none}}