:root{--navy-deep: #0D2347;--navy: #1B3A6B;--navy-mid: #244E8A;--blue: #2E6DB4;--blue-lt: #5B8FCE;--sky: #A8C4E0;--white: #FFFFFF;--off-white: #F4F7FB;--gray-lt: #E8EEF6;--gray: #7A92B0;--dark-gray: #3D5475;--ok: #1D9E75;--warn: #BA7517;--danger: #E24B4A}*{box-sizing:border-box;margin:0;padding:0}body{font-family:LINESeedSansTH,IBM Plex Sans Thai,sans-serif;background:var(--off-white);color:var(--dark-gray);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--off-white)}.loading{padding:40px;text-align:center;color:var(--gray)}.app-header{background:var(--navy);color:var(--white);padding:16px 18px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:10}.app-header .title{font-size:16px;font-weight:700}.app-header .sub{font-size:12px;color:var(--sky)}.app-header .spacer{flex:1}.role-badge{font-size:11px;background:#ffffff26;padding:3px 8px;border-radius:6px}.container{padding:16px}.card{background:var(--white);border-radius:12px;border:1px solid var(--gray-lt);padding:16px;margin-bottom:12px}.card-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:12px}label{font-size:12px;color:var(--gray);display:block;margin-bottom:4px}input,select,textarea{width:100%;font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--gray-lt);border-radius:8px;background:var(--white);color:var(--dark-gray)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}.field{margin-bottom:14px}.fuel-box{border:1.5px solid var(--blue);border-radius:12px;padding:12px;background:var(--off-white);margin-bottom:14px}.fuel-head{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--blue);font-size:14px;margin-bottom:10px}.origin-row{display:flex;gap:8px;margin-bottom:10px}.origin-opt{flex:1;border:1px solid var(--gray-lt);border-radius:8px;padding:8px;background:var(--white);cursor:pointer}.origin-opt.near{border:2px solid var(--blue)}.origin-opt .lbl{font-size:11px;color:var(--gray)}.origin-opt.near .lbl{color:var(--blue)}.origin-opt .km{font-size:15px;font-weight:700;color:var(--dark-gray)}.origin-opt.near .km{color:var(--blue)}.fuel-calc{background:var(--white);border-radius:8px;padding:10px;font-size:12px}.calc-row{display:flex;justify-content:space-between;padding:2px 0;color:var(--gray)}.calc-row.total{font-weight:700;color:var(--dark-gray);border-top:1px solid var(--gray-lt);margin-top:4px;padding-top:6px}.item-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:8px 0;border-bottom:1px solid var(--gray-lt)}.item-row input{width:110px;text-align:right}.total-bar{background:var(--navy);border-radius:8px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin:14px 0}.total-bar .lbl{color:var(--sky);font-size:13px}.total-bar .val{color:var(--white);font-size:20px;font-weight:700}.btn{width:100%;padding:12px;border:none;border-radius:8px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}.btn-primary{background:var(--blue);color:var(--white)}.btn-navy{background:var(--navy);color:var(--white)}.btn-outline{background:transparent;border:1px solid var(--gray-lt);color:var(--danger)}.btn-row{display:flex;gap:8px}.btn-row .btn{flex:1}.claim-item{background:var(--white);border:1px solid var(--gray-lt);border-radius:12px;padding:14px;margin-bottom:10px}.claim-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.avatar{width:36px;height:36px;border-radius:50%;background:var(--gray-lt);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.claim-name{font-size:14px;font-weight:700;color:var(--dark-gray)}.claim-meta{font-size:12px;color:var(--gray)}.pills{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.pill{font-size:11px;background:var(--off-white);color:var(--gray);padding:3px 8px;border-radius:6px}.pill.ok{color:var(--ok)}.level-tag{font-size:11px;padding:2px 8px;border-radius:6px}.level-tag.mgr{background:#e6f1fb;color:#185fa5}.level-tag.pre{background:#faeeda;color:#854f0b}.status{font-size:11px;padding:2px 8px;border-radius:6px}.status.submitted{background:#faeeda;color:#854f0b}.status.approved{background:#e1f5ee;color:#0f6e56}.status.rejected{background:#fcebeb;color:#a32d2d}.status.draft{background:var(--gray-lt);color:var(--gray)}.amount{font-size:16px;font-weight:700;color:var(--dark-gray)}.tabbar{display:flex;background:var(--white);border-top:1px solid var(--gray-lt);position:sticky;bottom:0}.tab{flex:1;text-align:center;padding:8px 10px;font-size:12px;color:var(--gray);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tab.active{color:var(--navy);font-weight:700;border-top:2px solid var(--navy)}.tab .t-ic{font-size:18px;line-height:1}.tab .t-lb{font-size:11px}.empty{text-align:center;color:var(--gray);padding:40px 20px;font-size:14px}.toast{position:sticky;top:60px;margin:8px 16px;padding:10px 14px;border-radius:8px;font-size:13px}.toast.ok{background:#e1f5ee;color:#0f6e56}.toast.err{background:#fcebeb;color:#a32d2d}@media (min-width: 720px){#app{max-width:860px;display:flex;flex-direction:column}#app.wide{max-width:1280px}.app-header{order:0}.tabbar{order:1;position:static;bottom:auto;border-top:none;border-bottom:1px solid var(--gray-lt)}#view{order:2}}