:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1c2733; --muted:#68788c;
  --brand:#0d5ca8; --brand-dark:#0a4a87; --line:#dde4ec;
  --ok:#1a7f4b; --warn:#b26a00; --danger:#b3261e;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Sarabun','Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--ink);font-size:16px}
.topbar{display:flex;justify-content:space-between;align-items:center;background:var(--brand);color:#fff;padding:.6rem 1.2rem;flex-wrap:wrap;gap:.5rem}
.topbar .brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem}
.topbar .brand span{font-weight:400;opacity:.85;font-size:.85rem;margin-left:.5rem}
.topbar nav a{color:#fff;text-decoration:none;margin-left:1.1rem;opacity:.9}
.topbar nav a:hover{opacity:1;text-decoration:underline}
.wrap{max-width:960px;margin:1.5rem auto;padding:0 1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.4rem;margin-bottom:1.2rem;box-shadow:0 1px 2px rgba(16,32,54,.05)}
h1{font-size:1.35rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:0 0 .8rem}
a{color:var(--brand)}
table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.list th{color:var(--muted);font-weight:600;font-size:.85rem}
.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:7px;padding:.5rem 1rem;font-size:.95rem;font-family:inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--brand-dark)}
.btn.secondary{background:#e8eef5;color:var(--brand)}
.btn.small{padding:.25rem .65rem;font-size:.85rem}
.btn.danger{background:#fbeaea;color:var(--danger)}
label{display:block;font-size:.85rem;color:var(--muted);margin:.6rem 0 .2rem}
input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%;padding:.45rem .6rem;border:1px solid var(--line);border-radius:7px;font-family:inherit;font-size:.95rem;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #bcd6ef;border-color:var(--brand)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.grid3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 1.2rem}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.badge{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.78rem;font-weight:600}
.badge.draft{background:#fff3e0;color:var(--warn)}
.badge.done{background:#e5f4ec;color:var(--ok)}
.items-table{width:100%;border-collapse:collapse;margin:.4rem 0}
.items-table td{padding:.25rem .3rem;vertical-align:middle}
.items-table th{font-size:.8rem;color:var(--muted);font-weight:600;text-align:left;padding:.2rem .3rem}
.items-table input.amt{text-align:right;width:110px}
.items-table input.rate,.items-table input.qty{text-align:right}
.items-table .rm{color:var(--danger);cursor:pointer;font-weight:700;padding:0 .5rem}
.totalline{text-align:right;font-weight:700;font-size:1.05rem;margin:.5rem 0}
.savebar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:.7rem 0;display:flex;gap:.8rem;align-items:center}
.savestate{color:var(--muted);font-size:.85rem}
.muted{color:var(--muted);font-size:.88rem}
.login-box{max-width:360px;margin:14vh auto}
.flash{background:#e5f4ec;color:var(--ok);border:1px solid #bfe3cf;border-radius:8px;padding:.55rem .9rem;margin-bottom:1rem}
.flash.err{background:#fbeaea;color:var(--danger);border-color:#efc5c2}
.radio-row{display:flex;gap:1.4rem;flex-wrap:wrap;margin:.3rem 0}
.radio-row label{display:flex;align-items:center;gap:.35rem;margin:0;font-size:.95rem;color:var(--ink)}
.filecard{display:flex;align-items:center;gap:.7rem;background:#f2f7fc;border:1px solid #d7e6f4;border-radius:8px;padding:.5rem .8rem;margin:.4rem 0}

.calcbox{background:#f2f7fc;border:1px solid #d7e6f4;border-radius:8px;padding:.55rem .8rem;margin:.7rem 0 .2rem;font-size:.93rem;line-height:1.7}

.notice{background:#fff8e1;border:1px solid #f2d27a;border-left:5px solid #e6a700;border-radius:8px;padding:.6rem .9rem;margin:.6rem 0 .3rem;font-size:.97rem;line-height:1.6}

.calcrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem;padding:.3rem 0}
@media(max-width:640px){.calcrow{grid-template-columns:1fr}}
.calcrow+.calcrow{border-top:1px dashed #c9dcee}
.calcbox .big{font-size:1.15rem;color:var(--brand)}
.btn.apply{background:var(--ok);color:#fff;font-weight:600;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.15);padding:.35rem .8rem;font-size:.88rem;min-width:15rem;text-align:center}
.btn.apply:hover{background:#156a3e}

.topbar .whoami{opacity:.85;margin-right:.6rem;font-size:.9rem}