:root{font:15px/1.5 Inter,Thonburi,system-ui,sans-serif;color:#183046;background:#f0f5f8;--text:#183046;--muted:#536b7d;--line:#d7e3ea;--green:#006b59;--mint:#dff4ed;--white:#fff;--navy:#142d43}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
button,input,select,textarea{font:inherit}
a{color:var(--green)}
button{cursor:pointer;color:var(--text);background:var(--white);border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-height:39px}
button:disabled{opacity:.6;cursor:wait}
button.primary{background:var(--green);color:white;border-color:var(--green);justify-self:start;font-weight:680}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #278adb;outline-offset:3px}
.top{min-height:65px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 24px}
.brand{font-weight:750;font-size:19px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand span{background:#68e1bc;color:#132c42;border-radius:8px;display:grid;place-items:center;width:32px;height:32px;font-size:22px}
#account{display:flex;align-items:center;text-align:right;gap:9px}
#account button{background:#203f55;color:white;border-color:#456276;white-space:nowrap;font-size:13px}
.shell{display:flex;min-height:calc(100vh - 113px)}
.site-footer{padding:12px 24px;border-top:1px solid var(--line);font-size:13px}
.privacy{max-width:820px;margin:24px auto;padding:clamp(16px,4vw,32px);background:var(--white);border:1px solid var(--line);border-radius:12px}
.privacy h2{margin-top:20px}
nav{width:195px;flex:none;padding:16px 12px;background:#e5edf3;border-right:1px solid var(--line)}
nav button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;text-align:left;margin-bottom:3px}
nav button span{width:23px;text-align:center}
nav button[aria-current="page"]{background:#cde5e7;color:#07594e;font-weight:700}
main{width:100%;min-width:0;max-width:1250px;margin:0 auto;padding:22px}
h1,h2,h3,p{margin:0 0 8px}
h1{font-size:clamp(22px,4vw,34px);line-height:1.25}
h2{font-size:18px}
h3{font-size:16px}
.heading{margin-bottom:14px}
.heading p,small{color:var(--muted)}
.back{display:inline-block;margin-bottom:10px;font-size:14px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.metric{border:1px solid var(--line);background:var(--white);border-radius:10px;padding:10px 12px}
.metric span,.metric strong{display:block}
.metric span{font-size:13px;color:var(--muted)}
.metric strong{font-size:21px;font-variant-numeric:tabular-nums}
.panel,.list,.login,.trip-card{border:1px solid var(--line);border-radius:12px;background:var(--white);margin-bottom:10px}
.login{max-width:440px;margin:25px auto;padding:20px}
.login p{margin-top:12px}
.panel summary{padding:11px 13px;cursor:pointer;font-weight:700}
.panel-body{padding:0 13px 13px}
.panel-body>button{margin-top:8px}
.list{padding:13px}
form{display:grid;gap:9px;margin:6px 0}
label{display:grid;min-width:0;gap:3px;font-weight:650;font-size:13px}
input,select,textarea{min-width:0;width:100%;padding:8px;border-radius:7px;background:#f7fafc;border:1px solid #cbd9e1;color:var(--text);font-weight:400}
textarea{resize:vertical}
.columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.filter{max-width:440px;margin-bottom:10px}
.table-scroll{overflow:auto}
table{border-collapse:collapse;width:100%;text-align:left}
td,th{border-bottom:1px solid var(--line);padding:9px;min-width:90px}
th{background:#f0f5f8;font-size:13px}
td small,.record small,.payment small{display:block}
.badge{display:inline-block;border-radius:30px;padding:2px 8px;background:#e8eff9;color:#284b7f;font-size:12px;white-space:nowrap;vertical-align:middle}
.badge.approved,.badge.paid{background:var(--mint);color:#005c4d}
.badge.review,.badge.pending,.badge.partial{background:#fff0d0;color:#755000}
.badge.changes,.badge.rejected{background:#fce7e6;color:#8c2824}
.trip-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px}
.trip-card{display:grid;justify-items:start;gap:6px;padding:13px;color:var(--text);text-decoration:none;margin:0}
.trip-card strong{font-size:17px}
.trip-card>span:not(.badge){color:var(--muted);font-size:13px}
.trip-card:hover{border-color:var(--green)}
.record,.request,.payment{border-top:1px solid var(--line);padding:8px 0;margin:4px 0;overflow-wrap:anywhere}
.request form{padding:9px;background:#f4f8fa;border-radius:8px}
.facts{display:flex;flex-wrap:wrap;gap:7px 14px;font-size:13px}
.facts span{font-variant-numeric:tabular-nums}
.images{min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.images legend{padding:0 5px;font-size:13px}
.images input{font-size:12px}
.thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.images .thumbs{grid-column:1/-1}
.thumbs a{display:grid;text-align:center;font-size:12px}
.thumbs img{width:80px;height:64px;object-fit:cover;background:#e8eff2;border:1px solid var(--line);border-radius:6px}
.empty,.review-note{padding:10px;background:#f4f8fa;border-radius:7px}
#notice{position:fixed;right:14px;bottom:14px;z-index:1;max-width:min(90%,520px);padding:8px 12px;background:#dff4ed;border:1px solid #a8cebf;color:#07574a;border-radius:8px;box-shadow:0 3px 16px #132c4220}
#notice.error{background:#fce7e6;border-color:#edbcba;color:#8c2824}
@media(max-width:700px){.shell{display:block}nav{display:flex;flex-wrap:wrap;width:100%;padding:4px 6px;border-right:0;border-bottom:1px solid var(--line)}nav button{width:auto;flex:1;white-space:nowrap;padding:6px;font-size:12px}.top{padding:8px 12px}main{padding:14px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric strong{font-size:18px}}
@media(max-width:390px){.images{grid-template-columns:1fr}.columns{grid-template-columns:1fr}.metric strong{font-size:16px}}
@media(pointer:coarse){button{min-height:44px}input,textarea,select{font-size:16px}}