@font-face{font-family:"Sarabun";src:url("../fonts/Sarabun-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Sarabun";src:url("../fonts/Sarabun-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Sarabun";src:url("../fonts/Sarabun-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Sarabun";src:url("../fonts/Sarabun-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --paper:#f4f5f8; --surface:#fff; --sunk:#eef1f5; --ink:#16202d; --muted:#5a6475; --faint:#8a93a3; --line:#dce0e7;
  --accent:#1f4e8c; --accent-2:#173c6d; --accent-soft:#e7eef8;
  /* สีสถานะเงิน ใช้ทั้งระบบ: จัดสรร=เทาเข้ม ใช้จริง=น้ำเงิน กันเงิน=ม่วง รออนุมัติ=อำพัน คงเหลือ=เขียว */
  --school-pink:#FFA6C9; --school-blue:#BBDEFB;   /* สีโรงเรียน (ชื่อระบบ/ชื่อโรงเรียนบนแถบบน) */
  --st-all:#334155; --st-used:#1c5cab; --st-res:#8b5cf6; --st-pend:#f5b83d; --st-left:#15803d;
  --ok:#1d7349; --ok-soft:#e3f2ea; --warn:#9a5c0c; --warn-soft:#fbf0de;
  --stop:#a8281f; --stop-soft:#fae6e4; --hold:#5a4a9e; --hold-soft:#ece9f7;
  --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:15px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Sarabun","Leelawadee UI",Tahoma,sans-serif;line-height:1.6}
a{color:var(--accent)}
h1,h2,h3{line-height:1.3;margin:0;font-weight:600}
h1{font-size:1.55rem}
h2{font-size:1.2rem}
h3{font-size:1.02rem}
p{margin:0}
small,.small{font-size:.86rem}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:Consolas,ui-monospace,monospace}
.nowrap{white-space:nowrap}

/* top bar */
.topbar{background:var(--accent-2);color:#fff}
.topbar .in{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:50%;padding:1px;flex:none}
.brand b{display:block;font-size:1.08rem;font-weight:700;line-height:1.25;color:#FFA6C9}
.brand span{display:block;font-size:.82rem;line-height:1.3;color:#BBDEFB}
.userbox{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:.88rem}
.userbox .who{text-align:right;line-height:1.25}
.userbox .who span{display:block;opacity:.7;font-size:.78rem}
.userbox button,.userbox a.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:6px;padding:4px 10px;font:inherit;cursor:pointer;text-decoration:none}
.userbox a.btn-cta{background:#FFA6C9;color:#3b0d22;border:0;border-radius:6px;padding:5px 12px;font-weight:700;text-decoration:none;white-space:nowrap}
.userbox a.btn-cta:hover{background:#ffc2da}
.bell{position:relative;color:#fff;text-decoration:none;font-size:1.1rem;padding:2px 6px}
.bell i{position:absolute;top:-4px;right:-6px;background:#e0564a;color:#fff;font-style:normal;font-size:.7rem;border-radius:999px;padding:0 5px;line-height:1.5}
.nav{background:var(--accent);position:relative;z-index:40}
.nav .in{max-width:1240px;margin:0 auto;padding:0 12px;display:flex;align-items:center;gap:10px}
.nav-links{display:flex;flex-wrap:wrap;align-items:stretch;gap:2px;flex:1;min-width:0}
.nav-links>a,.nav-menu summary{color:#e4ecf8;text-decoration:none;padding:9px 12px;white-space:nowrap;font-size:.93rem;border-bottom:3px solid transparent;display:block}
.nav-links>a:hover,.nav-menu summary:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-links>a.on,.nav-menu.on>summary{color:#fff;border-bottom-color:#fff;font-weight:600}
.nav .badge{background:#fff;color:var(--accent);border-radius:999px;padding:0 7px;font-size:.76rem;font-weight:700;margin-left:4px}
.nav .sep{border-left:1px solid rgba(255,255,255,.2);margin:8px 6px}
.nav-menu{position:relative}
.nav-menu summary{list-style:none;cursor:pointer;user-select:none}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu .caret{font-size:.75rem;opacity:.85;display:inline-block;transition:transform .15s}
.nav-menu[open] .caret{transform:rotate(180deg)}
.nav-menu .menu{position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(15,30,55,.18);padding:6px;display:grid;gap:1px;z-index:50}
.nav-menu .menu a{color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:6px;font-size:.93rem;display:flex;justify-content:space-between;align-items:center;gap:10px}
.nav-menu .menu a:hover{background:var(--sunk)}
.nav-menu .menu a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-menu .menu .badge{background:var(--accent);color:#fff}
/* ปุ่มเขียนใบ: ชมพูทึบ ตัวกรมท่าเข้ม ชิดขวาแถบเมนู · มือถือเป็นปุ่มลอยมุมล่างขวา */
.nav-cta{flex:none;background:#FFA6C9;color:#0f2a4f;font-weight:700;text-decoration:none;border-radius:8px;padding:6px 16px;margin:5px 0;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.nav-cta:hover{background:#ffc2da}
.fab{display:none}
.demo-bar{background:#fff7e0;color:#6b4a00;font-size:.84rem;text-align:center;padding:4px 16px;border-bottom:1px solid #f0dca6}

.wrap{max-width:1240px;margin:0 auto;padding:22px 16px 60px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.grid-main>*,.grid2>*,.grid3>*{min-width:0}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;justify-content:space-between}
.page-head .sub{color:var(--muted);font-size:.92rem;margin-top:2px}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:2px}
.crumbs a{color:var(--muted)}

/* cards & panels */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.card-h{padding:11px 16px;background:var(--accent);color:#fff;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card-h h2,.card-h h3{color:#fff}
.card-h .muted,.card-h .small,.card-h .bar-legend{color:#dbe6f6}
.card-h b{color:#fff}
.card-h a:not(.btn){color:#fff}
.card-h .bar-legend span::before{outline:1px solid rgba(255,255,255,.6)}
.card.accent-card{border-color:var(--accent);border-width:2px}
.card-b{padding:14px 16px}
.card-b.tight{padding:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media (max-width:980px){.grid-main{grid-template-columns:1fr}}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}

.stat{padding:14px 16px;display:grid;gap:2px}
.stat .k{font-size:.84rem;color:var(--muted)}
.stat .v{font-size:1.45rem;font-weight:600;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.8rem;font-weight:400;color:var(--muted)}

/* tables */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--sunk);font-weight:600;color:var(--muted);font-size:.83rem;white-space:nowrap}
tbody tr:hover td{background:#fafbfd}
tr.lvl1 td{background:#f3f6fb;font-weight:600}
tr.lvl2 td{font-weight:500}
tr.total td{font-weight:700;border-top:2px solid var(--line);background:var(--sunk)}
td .code{font-family:Consolas,monospace;font-size:.82rem;color:var(--faint);margin-right:6px}
.indent-2{padding-left:26px!important}
.indent-3{padding-left:46px!important}
.clickrow{cursor:pointer}

/* pills */
.pill{display:inline-block;font-size:.78rem;line-height:1.55;padding:0 9px;border-radius:999px;white-space:nowrap;font-weight:500}
.p-ok{background:var(--ok-soft);color:var(--ok)} .p-warn{background:var(--warn-soft);color:var(--warn)}
.p-stop{background:var(--stop-soft);color:var(--stop)} .p-hold{background:var(--hold-soft);color:var(--hold)}
.p-acc{background:var(--accent-soft);color:var(--accent)} .p-mute{background:var(--sunk);color:var(--muted)}

/* progress */
.bar{height:8px;background:var(--sunk);border-radius:999px;overflow:hidden;display:flex;min-width:80px}
.bar i{display:block;height:100%}
.bar .b-used{background:var(--st-used)}
.bar .b-res{background:var(--st-res)}
.bar .b-pend{background:var(--st-pend)}
.bar-legend{display:flex;gap:14px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.bar-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--sunk)}
.bar-legend .l-used::before{background:var(--st-used)} .bar-legend .l-res::before{background:var(--st-res)} .bar-legend .l-pend::before{background:var(--st-pend)}

/* buttons & forms */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 14px;font:inherit;font-size:.93rem;cursor:pointer;text-decoration:none;line-height:1.3;white-space:nowrap}
.btn:hover{border-color:#b9c1ce}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-warn{background:var(--warn-soft);border-color:#e9c98f;color:var(--warn)}
.btn-hold{background:var(--hold-soft);border-color:#cfc6ef;color:var(--hold)}
.btn-stop{background:var(--stop-soft);border-color:#efb9b3;color:var(--stop)}
.btn-sm{padding:3px 10px;font-size:.84rem}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
label{font-size:.88rem;font-weight:500;color:var(--muted);display:block;margin-bottom:3px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input[type=file],select,textarea{width:100%;font:inherit;font-size:.95rem;padding:7px 10px;border:1px solid #cfd5df;border-radius:7px;background:#fff;color:var(--ink)}
textarea{min-height:70px;resize:vertical}
.field{display:grid;gap:2px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.radio-row{display:flex;gap:16px;flex-wrap:wrap;padding-top:4px}
.radio-row label{display:flex;gap:6px;align-items:center;color:var(--ink);font-weight:400;font-size:.95rem;margin:0}
.check{display:flex;gap:8px;align-items:center;color:var(--ink);font-weight:400}

/* alerts */
.alert{border-radius:8px;padding:10px 14px;font-size:.93rem;border:1px solid}
.alert ul{margin:4px 0 0;padding-left:20px}
.alert-ok{background:var(--ok-soft);border-color:#bfe0cd;color:#155c3a}
.alert-err{background:var(--stop-soft);border-color:#efc1bb;color:#86211a}
.alert-warn{background:var(--warn-soft);border-color:#ecd3a5;color:#7a4808}
.alert-info{background:var(--accent-soft);border-color:#c5d5ee;color:#193f72}

/* stepper — เขียว = ผ่านแล้ว · เหลือง = กำลังพิจารณา · แดง = ขั้นที่มีปัญหา · ขอบเทา = ยังไม่ถึง */
:root{--st-done:#1D9E75;--st-now:#F2C037;--st-now-line:#B7791F;--st-now-ink:#5c3d00;--st-bad:#E24B4A;--st-bad-ink:#b3261e}
.stepper{display:grid;grid-template-columns:repeat(var(--n,7),1fr);gap:0}
.stepper .st{position:relative;text-align:center;padding:0 4px;font-size:.78rem;color:var(--muted)}
.stepper .st::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.stepper .st:first-child::before{display:none}
.stepper .dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;margin:0 auto 4px;display:grid;place-items:center;font-weight:700;font-size:.82rem;background:var(--surface);border:2px solid #c4cad4;color:var(--faint)}
.stepper .st.done .dot{background:var(--st-done);border-color:var(--st-done);color:#fff}
.stepper .st.done+.st::before{background:var(--st-done)}
.stepper .st.now .dot{background:var(--st-now);border-color:var(--st-now-line);color:var(--st-now-ink);box-shadow:0 0 0 4px #fdf1cc}
.stepper .st.now{color:var(--st-now-ink);font-weight:600}
.stepper .st.bad .dot{background:var(--st-bad);border-color:var(--st-bad);color:#fff;box-shadow:0 0 0 4px #fbe0df}
.stepper .st.bad{color:var(--st-bad-ink);font-weight:600}
.stepper .st.paper:not(.done):not(.now):not(.bad) .dot{border-style:dashed}
.stepper .when{display:block;font-weight:400;color:var(--faint);font-size:.72rem}
.stepper .dot.wide{width:44px;border-radius:14px;font-size:.76rem}
.md.wide{width:30px;border-radius:10px;font-size:.6rem}
@media (max-width:640px){.stepper{grid-template-columns:repeat(4,1fr);row-gap:12px}.stepper .st:nth-child(5)::before{display:none}}
.st-text{text-align:center;font-size:.9rem}
.t-done{color:var(--st-done)} .t-now{color:var(--st-now-line)} .t-bad{color:var(--st-bad-ink)} .t-mute{color:var(--muted)}
.st-text.t-done,.st-text.t-now,.st-text.t-bad{font-weight:500}
/* แถบขั้นตอนแบบย่อในรายการใบ */
.ministep{display:grid;gap:3px;min-width:150px}
.md-row{display:flex;align-items:center}
.md{position:relative;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:.66rem;font-weight:700;line-height:1;background:#fff;border:1.5px solid #c4cad4;color:var(--faint);flex:none}
.md+.md{margin-left:4px}
.md+.md::before{content:"";position:absolute;right:100%;top:50%;width:5px;height:1.5px;background:#c4cad4;margin-right:.5px}
.md.done{background:var(--st-done);border-color:var(--st-done);color:#fff}
.md.now{background:var(--st-now);border-color:var(--st-now-line);color:var(--st-now-ink)}
.md.bad{background:var(--st-bad);border-color:var(--st-bad);color:#fff}
.md.done+.md::before{background:var(--st-done)}
.ms-text{font-size:.8rem;line-height:1.35;font-weight:600}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:14px 1fr;gap:10px;padding-bottom:12px;position:relative}
.timeline li::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .d{width:14px;height:14px;border-radius:50%;margin-top:4px;background:var(--faint)}
.timeline .d.ok{background:var(--ok)} .timeline .d.warn{background:var(--warn)} .timeline .d.stop{background:var(--stop)} .timeline .d.hold{background:var(--hold)} .timeline .d.acc{background:var(--accent)}
.timeline .t{font-size:.9rem}
.timeline .t b{font-weight:600}
.timeline .t .c{background:var(--sunk);border-radius:6px;padding:4px 8px;margin-top:3px;font-size:.88rem}

.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:.93rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
@media (max-width:560px){.kv{grid-template-columns:1fr}.kv dt{margin-top:6px}}

.item-table{min-width:760px}
.item-table input{padding:5px 7px;font-size:.9rem}
.item-table td{padding:5px 6px;vertical-align:middle}
.item-table .del{border:0;background:none;color:var(--stop);cursor:pointer;font-size:1.1rem}
.fund-row{display:grid;grid-template-columns:1fr 150px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.fund-row:last-child{border-bottom:0}
.fund-row .meta{font-size:.82rem;color:var(--muted)}
.fund-row.over .meta{color:var(--stop)}
.sumline{display:flex;justify-content:space-between;gap:10px;font-size:.95rem;padding:3px 0}
.sumline.big{font-size:1.08rem;font-weight:700;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}

.qr-box{display:flex;gap:12px;align-items:center}
.qr-box img{width:96px;height:96px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:4px}

.empty{padding:28px 16px;text-align:center;color:var(--muted)}

/* เลือกสังกัด → กลุ่ม → โครงการ → กิจกรรม */
.picker{display:grid;gap:14px}
.pick-step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start}
.pick-step select{max-width:100%;min-width:0;text-overflow:ellipsis}
.pick-no{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.88rem;margin-top:22px}
.group-chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.group-chips .chip{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 14px;border-radius:999px;border:2px solid color-mix(in srgb,var(--c) 45%,#fff);background:color-mix(in srgb,var(--c) 8%,#fff);color:var(--ink);font-weight:500;cursor:pointer}
.group-chips .chip input{accent-color:var(--c);margin:0}
.group-chips .chip:has(input:checked){background:var(--c);border-color:var(--c);color:#fff}
.form-main{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);min-width:0}
#req-rest.locked{opacity:.45;pointer-events:none;filter:grayscale(.4)}
.add-src{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:10px;margin-top:4px;border-top:1px dashed var(--line)}
.add-src select{width:auto;min-width:220px}
.fund-row{grid-template-columns:1fr auto}

/* ลายเซ็น */
.sigpad{position:relative;border:2px dashed #b9c4d6;border-radius:10px;background:#fff;height:160px;touch-action:none;user-select:none;-webkit-user-select:none}
.sigpad canvas{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:8px;cursor:crosshair;touch-action:none}
/* เส้นเซ็นอยู่กลางกรอบ (ราว 2/3 ความสูง) + เครื่องหมาย ✕ จุดเริ่ม — เหมือนช่องลงชื่อบนกระดาษ */
.sigpad::after{content:"";position:absolute;left:12%;right:12%;top:64%;border-bottom:1.5px solid #c3cddd;pointer-events:none}
.sigpad::before{content:"✕";position:absolute;left:calc(12% - 4px);top:calc(64% - 24px);font-size:15px;line-height:1;color:#9aa8bf;pointer-events:none}
.sigpad .sig-clear{position:absolute;z-index:2;top:8px;right:8px}
.sigpad .sig-hint{position:absolute;left:0;right:0;top:calc(64% + 8px);text-align:center;font-size:.82rem;color:var(--faint);pointer-events:none}
.sigpad.inked .sig-hint{display:none}
.sig-preview{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:8px 14px;background:#fff}
.sig-preview img{display:block;max-height:80px;max-width:280px}
.sig-choice{display:grid;gap:8px}
.sig-choice label.opt{display:flex;gap:8px;align-items:center;color:var(--ink);font-weight:500;margin:0}
.tl-sig{display:block;max-height:34px;margin-top:4px}
.who a{color:#fff;text-decoration:none}
.who a:hover{text-decoration:underline}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(160deg,#173c6d,#1f4e8c 55%,#2c63a8)}
.login-card{width:100%;max-width:860px;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(8,20,40,.3)}
.login-card .l{padding:28px;display:grid;gap:14px;align-content:start}
.login-card .r{padding:24px;background:var(--sunk);display:grid;gap:8px;align-content:start;max-height:560px;overflow:auto}
.login-card .r form{margin:0}
.demo-user{width:100%;text-align:left;display:grid;gap:0;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font:inherit}
.demo-user:hover{border-color:var(--accent)}
.demo-user b{font-size:.9rem;font-weight:600}
.demo-user span{font-size:.78rem;color:var(--muted)}
@media (max-width:760px){.login-card{grid-template-columns:1fr}}
.hide-sm{}
.show-sm{display:none}
@media (max-width:700px){.hide-sm{display:none}.show-sm{display:block}}

/* ---------------------------------------------------------------- ฟอร์มหลายคอลัมน์ */
.form-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.form-grid.cols-unit{grid-template-columns:2fr 1fr 1.4fr 1.6fr auto;align-items:end}

/* ---------------------------------------------------------------- มือถือ / แท็บเล็ต */
@media (max-width:980px){
  .grid-main.act-first>aside{order:-1}
  .grid-main>aside.card{position:static!important}
}
@media (max-width:700px){
  /* iOS จะซูมหน้าจอถ้าช่องกรอกเล็กกว่า 16px */
  input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{font-size:16px}
  .wrap{padding:14px 12px 60px;gap:14px}
  h1{font-size:1.3rem}
  .card-h{padding:10px 12px}
  .card-h h2{font-size:1.05rem}
  .card-b{padding:12px}
  .page-head .btn-row{width:100%}
  .form-grid,.form-grid.cols-4,.form-grid.cols-unit{grid-template-columns:1fr}
  .form-grid>*{grid-column:1/-1!important}
  .btn{padding:9px 14px}
  .btn-sm{padding:5px 11px}

  /* แถบบนแบบกระชับ */
  .topbar .in{padding:8px 12px;gap:8px;flex-wrap:nowrap}
  .brand{min-width:0;gap:8px}
  .brand img{width:38px;height:38px}
  .brand b{font-size:.98rem}
  .brand span{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand div{min-width:0}
  .userbox{gap:6px;flex:none}
  .userbox .who{display:none}
  .userbox a.btn-ghost{padding:4px 8px;font-size:.8rem}
  .userbox a.btn-cta{padding:5px 9px;font-size:.8rem}
  .demo-bar{font-size:.74rem;padding:3px 10px}

  /* ตารางรายการที่ขอซื้อ/จ้าง → การ์ดทีละรายการ */
  .item-table{min-width:0}
  .item-table thead{display:none}
  .item-table tbody tr{display:grid;grid-template-columns:repeat(6,1fr);gap:8px 10px;padding:12px;border-bottom:6px solid var(--paper);grid-template-areas:"seq seq kind kind kind del" "desc desc desc desc desc desc" "qty qty unit unit price price" "amt amt amt amt amt amt"}
  .item-table tbody tr:hover td{background:none}
  .item-table td{padding:0;border:0;display:block}
  .item-table td::before{content:attr(data-label);display:block;font-size:.76rem;color:var(--muted);margin-bottom:2px}
  .item-table td:nth-child(1){grid-area:seq;font-weight:700;color:var(--accent)}
  .item-table td:nth-child(1)::before{display:inline;margin-right:4px}
  .item-table td:nth-child(2){grid-area:kind}
  .item-table td:nth-child(3){grid-area:desc}
  .item-table td:nth-child(4){grid-area:qty}
  .item-table td:nth-child(5){grid-area:unit}
  .item-table td:nth-child(6){grid-area:price}
  .item-table td:nth-child(7){grid-area:amt;display:flex;justify-content:space-between;align-items:baseline;font-weight:700;border-top:1px dashed var(--line);padding-top:6px}
  .item-table td:nth-child(7)::before{margin:0}
  .item-table td:nth-child(8){grid-area:del;text-align:right}
  .item-table td:nth-child(8)::before{display:none}
  .item-table .del{font-size:1.5rem;line-height:1;padding:2px 6px}
  .item-table input,.item-table select{width:100%}

  /* แหล่งงบ: ช่องกรอกลงบรรทัดใหม่ */
  .fund-row{grid-template-columns:1fr!important}
  .fund-row>div:last-child input{flex:1}
  .add-src select{width:100%;min-width:0}

  .kv{gap:2px}
  .qr-box img{width:84px;height:84px}
  .sigpad{height:140px}
  .picker{gap:12px}
  .pick-step{grid-template-columns:26px minmax(0,1fr)}
  .pick-no{width:24px;height:24px;font-size:.8rem}
  .group-chips .chip{padding:7px 12px}
  .stat .v{font-size:1.25rem}
}
@media (max-width:700px){
  /* รายการใบขอใช้เงิน → การ์ด */
  .req-table thead{display:none}
  .req-table tbody tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ref amt" "proj proj" "st st";gap:4px 8px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .req-table td{padding:0;border:0}
  .req-table .c-ref{grid-area:ref;font-weight:600}
  .req-table .c-st{grid-area:st;padding-top:2px}
  .req-table .c-proj{grid-area:proj}
  .req-table .c-amt{grid-area:amt;text-align:right;font-weight:700}
  .req-table .show-sm[style]{display:inline!important}
}
@media (min-width:701px){.req-table .show-sm[style]{display:none!important}}

/* ประวัติรายการที่ใช้ */
.hist-sum{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:.92rem}
.hist-sum input{margin-left:auto;max-width:280px}
.hist-list{display:grid;gap:10px}
.hist{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:4px;background:#fcfdfe}
.hist header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.hist-top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.hist-total{font-variant-numeric:tabular-nums;font-size:1.05rem}
.hist-items{list-style:none;margin:4px 0 0;padding:6px 0 0;border-top:1px dashed var(--line);display:grid;gap:4px}
.hist-items li{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 10px;align-items:baseline;font-size:.9rem}
.hist-items .q{color:var(--muted);font-size:.84rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.hist-items .a{font-variant-numeric:tabular-nums;text-align:right;min-width:90px}
.hist-items li.vat{grid-template-columns:1fr auto}
@media (max-width:700px){
  .hist-sum input{margin-left:0;max-width:none;width:100%}
  .hist-items li{grid-template-columns:auto 1fr auto;grid-template-areas:"k d a" "k q a"}
  .hist-items li .pill{grid-area:k}.hist-items li .d{grid-area:d}.hist-items li .q{grid-area:q}.hist-items li .a{grid-area:a;min-width:0}
}

.hist-search input[type=search]{flex:1;min-width:0;font-size:1.1rem;padding:10px 14px;font-family:inherit}
.hist-search .btn{padding:10px 20px}

/* นำเข้างบ — ตารางแบบแผ่นงาน "รวมโครงการ" */
.imp-group td{background:#e4e7ec;font-weight:700}
.imp-l1 td{background:#e2efd9;font-weight:700}
.imp-l2 td{background:#fff2cc}
.imp-layout th,.imp-layout td{white-space:nowrap}
.imp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.imp-stats div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.imp-stats b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.imp-stats span{font-size:.85rem;color:var(--muted,#667)}
.imp-details summary{cursor:pointer;font-weight:600}
.imp-details ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.imp-preview td.num,.imp-preview th.num{white-space:nowrap}

/* ---------------------------------------------------------------- หัวข้อกรอบตามความหมาย */
.card-h.h-todo{background:#C2410C}
.card-h.h-todo .btn{background:#fff;border-color:#fff;color:#9a3412}
.card-h.h-mine,.card-h.h-info{border-left:6px solid;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;border-bottom:1px solid var(--line)}
.card-h.h-mine{background:#CCFBF1;border-left-color:#0F766E}
.card-h.h-mine h2,.card-h.h-mine a:not(.btn){color:#115E59}
.card-h.h-info{background:#DBEAFE;border-left-color:#1E4A8A}
.card-h.h-info h2,.card-h.h-info a:not(.btn){color:#1E3A8A}
.card-h.h-info .bar-legend{color:#1E3A8A}
.card-h.h-info .bar-legend span::before{outline:0}
.card-h.h-mine .btn,.card-h.h-info .btn{background:#fff}

/* ---------------------------------------------------------------- การ์ดตัวเลข หน้าของฉัน */
.home-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.home-stats.has-todo{grid-template-columns:2fr 1fr 1fr}
.home-stats .stat.mine{text-decoration:none;color:inherit;background:#F0FDFA;border-color:#99E0D5;border-left:5px solid #0F766E}
.home-stats .stat.mine .k{color:#115E59}
.home-stats .stat.mine .v{color:#0b4f4a}
.home-stats .stat.mine:hover{border-color:#0F766E}
.todo-card{background:#C2410C;color:#fff;border-radius:var(--radius);padding:14px 18px;display:grid;gap:4px;align-content:center}
.todo-card .k{font-size:.95rem;font-weight:600;color:#ffe8dc}
.todo-card .v{font-size:2.2rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.todo-card .v small{font-size:1rem;font-weight:500;color:#ffe8dc}
.todo-card .btn-row{margin-top:4px;gap:14px}
.todo-card .btn-todo{background:#fff;color:#9a3412;border-color:#fff;font-weight:700;font-size:1rem;padding:8px 18px}
.todo-card .btn-todo:hover{background:#fff4ee}
.todo-card .all{color:#fff;font-size:.9rem}
.todo-card.calm{background:#F1F5F4;color:#35524d;border:1px solid #cfe0dc}
.todo-card.calm .k{color:#5b706c}
.todo-card.calm .v{font-size:1.3rem;font-weight:600;color:#1d6b5c}

/* ---------------------------------------------------------------- กล่องสถานะการแบ่งแหล่งเงิน (ฟอร์มเขียนใบ) */
.fund-status{margin-top:8px;border-radius:8px;border:1px solid;padding:10px 12px;font-size:.9rem;line-height:1.5}
.fund-status b{display:block;font-size:.97rem;margin-bottom:2px}
.fund-status ul{margin:4px 0;padding-left:18px}
.fund-status .how{margin-top:6px;font-size:.86rem}
.fund-status .btn-help{margin-top:8px;white-space:normal;text-align:left}
.fs-ok{background:var(--ok-soft);border-color:#bfe0cd;color:#155c3a}
.fs-warn{background:var(--warn-soft);border-color:#ecd3a5;color:#7a4808}
.fs-bad{background:var(--stop-soft);border-color:#efb9b3;color:#86211a}
.fs-bad .btn-help{background:#fff;border-color:#c9433a;color:#a8281f;font-weight:600}
.btn:disabled{opacity:.5;cursor:not-allowed}

@media (max-width:700px){
  .nav .in{padding:0 8px;gap:6px}
  .nav-links>a,.nav-menu summary{padding:7px 9px;font-size:.88rem}
  .nav .sep{display:none}
  .nav-cta{display:none}
  .nav-menu{position:static}
  .nav-menu[open]{flex-basis:100%}
  .nav-menu .menu{position:static;min-width:0;background:rgba(255,255,255,.08);border:0;box-shadow:none;margin:0 0 6px;padding:4px}
  .nav-menu .menu a{color:#e4ecf8}
  .nav-menu .menu a:hover{background:rgba(255,255,255,.08)}
  .nav-menu .menu a.on{background:rgba(255,255,255,.16);color:#fff}
  .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:18px;width:58px;height:58px;border-radius:50%;background:#FFA6C9;color:#0f2a4f;font-size:2.1rem;font-weight:700;line-height:1;text-decoration:none;box-shadow:0 6px 18px rgba(15,30,55,.32);z-index:60}
  .wrap{padding-bottom:96px}
  .home-stats,.home-stats.has-todo{grid-template-columns:1fr 1fr;gap:8px}
  .home-stats .todo-card{grid-column:1/-1}
  .home-stats .stat{padding:10px}
  .home-stats .stat .k{font-size:.78rem;line-height:1.3}
  .home-stats .stat .v{font-size:1.2rem}
  .todo-card .v{font-size:1.9rem}
}

/* ---------------------------------------------------------------- รอบ 2: การ์ดยอด 4 ช่อง / ปิดยอด / สแกน */
.stat4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat.stat-ok{border-color:#9fd3b5;background:#f1faf4}
.stat.stat-ok .v{color:var(--ok)}
.close-card{border:2px solid #C2410C}
.close-line{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.close-line .cl-in{font-size:1.05rem;font-weight:600}
.close-line .pull-box{grid-column:1/-1;margin:0;padding:8px 10px;background:#fff7e6;border:1px solid #f3d9a4;border-radius:8px}
.close-line .pull-box select{width:100%}
.close-sum{font-size:.92rem;font-weight:600;color:var(--ink)}
.btn-big{justify-content:center;font-size:1.05rem;font-weight:700;padding:11px 18px}
details.more>summary{cursor:pointer;font-size:.9rem;color:var(--accent);font-weight:500}
.pay-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.pay-list li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:3px 0}
.scan-box{display:grid;gap:6px}
.scan-box input{max-width:340px;font-size:1.05rem}
.pick-table tr.picked td{background:#fff4e8}
.go-box input{width:230px}
.scan-card h2{font-size:1.25rem}
@media (max-width:760px){.stat4{grid-template-columns:1fr 1fr;gap:8px}}
@media (max-width:700px){
  /* แถบบนหน้าสาธารณะ (หน้าสแกน QR): ชื่อระบบแถวบน ปุ่มแถวล่าง */
  .topbar.pub .in{flex-wrap:wrap}
  .topbar.pub .userbox{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .close-line{grid-template-columns:1fr}
  .go-box,.go-box input{width:100%}
  .go-box input{flex:1}
}

/* ---------------------------------------------------------------- รอบ 6: งบแบบพับ 3 ชั้น (/budget) */
.acc{display:grid;gap:10px}
.acc-head,.acc-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 150px 130px 130px;gap:10px;align-items:center}
.acc-head{padding:0 16px;font-size:.8rem;color:var(--muted);font-weight:600}
.acc-head .an{text-align:right}.acc-head .an-bar{text-align:left}
.acc-g{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--c,var(--accent));border-radius:var(--radius)}
.acc-row{list-style:none;cursor:pointer;padding:10px 16px;border-radius:8px}
.acc-row::-webkit-details-marker{display:none}
.acc-row:hover{background:#f6f8fb}
.acc-g>.acc-row{font-size:1.05rem;font-weight:700;padding:13px 16px}
.acc-g[open]>.acc-row{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.acc-count{font-size:.8rem;font-weight:400;color:var(--muted);margin-left:6px}
.acc-name{display:flex;align-items:baseline;gap:6px;min-width:0}
.acc-name .code{font-family:Consolas,monospace;font-size:.82rem;color:var(--faint);flex:none}
.caret{flex:none;display:inline-block;width:0;height:0;border-left:6px solid var(--muted);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-right:4px;transition:transform .15s;transform:translateY(-1px)}
details[open]>.acc-row .caret{transform:translateY(-1px) rotate(90deg)}
.an{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.92rem}
.an-bar{text-align:left;display:grid;gap:1px}
.an-bar small{font-size:.74rem;color:var(--muted)}
.an-av{font-weight:600;color:var(--ok)}
.acc-body{padding:4px 0 8px 18px}
.acc-p>.acc-row{font-weight:600}
.acc-p.d2>.acc-row{font-weight:500}
.acc-p[open]{background:#fbfcfe;border-radius:8px}
.acc-a>.acc-row{font-weight:400}
.acc-a[open]{background:#f3f7fd;border-radius:8px;margin:2px 0}
.acc-detail{padding:4px 16px 12px 34px;display:grid;gap:8px;justify-items:start}
.src-mini{width:auto;min-width:min(520px,100%);background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.src-mini th,.src-mini td{padding:6px 12px}
.acc-flash>.acc-row{box-shadow:inset 0 0 0 2px #f6c343}
@media (max-width:760px){
  .acc-head{display:none}
  .acc-row{grid-template-columns:1fr 1fr;gap:4px 10px;padding:10px 12px}
  .acc-row .acc-name{grid-column:1/-1}
  .acc-row .an{text-align:left;font-size:.84rem}
  .acc-row .an[data-l]::before{content:attr(data-l) " ";color:var(--muted);font-size:.76rem}
  .acc-row .an-av:empty{display:none}
  .acc-body{padding-left:10px}
  .acc-detail{padding:4px 10px 12px 14px}
  .src-mini{min-width:0;width:100%}
}

/* หน้ารายละเอียดกิจกรรม: แถบย้อนกลับ + ก่อนหน้า/ถัดไป */
.act-nav{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.btn-back{background:#1e4a8a;border-color:#1e4a8a;color:#fff;font-weight:700}
.btn-back:hover{background:#173c6d;border-color:#173c6d}
.chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.88rem;min-width:0}
.chip-link{display:inline-block;max-width:100%;padding:3px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-link:hover{background:#d6e3f5}
.chips .sep{color:var(--faint)}
.btn-cta-pink{background:#FFA6C9;border-color:#FFA6C9;color:#0f2a4f;font-weight:700}
.btn-cta-pink:hover{background:#ffc2da}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pn{display:grid;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);min-width:0}
.pn:hover{border-color:var(--accent);background:#f6f9fe}
.pn .k{font-size:.82rem;color:var(--accent);font-weight:600}
.pn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn small{color:var(--muted);font-size:.78rem}
.pn.next{text-align:right}
.pn.empty-pn{color:var(--faint);align-content:center;justify-items:center;border-style:dashed;background:none}
@media (max-width:600px){.prevnext{grid-template-columns:1fr 1fr;gap:8px}.pn b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}

/* ช่องเลือกบุคคลแบบพิมพ์ค้นหา (app.js) */
.pp{position:relative;max-width:360px;min-width:200px}
.pp-list{position:fixed;z-index:60;margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid #b9c1ce;border-radius:8px;box-shadow:0 8px 22px rgba(15,30,55,.16);max-height:260px;overflow:auto}
.pp-list li{padding:6px 10px;border-radius:6px;cursor:pointer;font-size:.92rem}
.pp-list li:hover,.pp-list li.hi{background:var(--accent-soft)}
.pp-list li.on{font-weight:600;color:var(--accent)}
.pp-list li.none{color:var(--muted);cursor:default}

/* ---------------------------------------------------------------- เมนูบนแบบ ค: ไอคอนอยู่บนชื่อเมนู · เมนูที่เปิดเป็นป้ายขาว */
.nav .in{align-items:center;padding-top:6px;padding-bottom:6px}
.nav-links{align-items:center;gap:4px}
.nav-links>a,.nav-menu summary{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:76px;padding:6px 10px;border:0;border-radius:10px;font-size:.84rem;line-height:1.25;color:#e4ecf8;transition:background .12s,color .12s}
.nav-links>a .ic,.nav-menu summary>.ic{width:24px;height:24px}
.nav-links>a:hover,.nav-menu summary:hover{background:rgba(255,255,255,.14);color:#fff}
.nav-links>a.on,.nav-menu.on>summary{background:#fff;color:#1f4e8c;font-weight:600;border-bottom:0}
.nav-links>a:active,.nav-menu summary:active{transform:scale(.97)}
.nav-menu summary{list-style:none}
.nav-menu summary::marker{content:""}
.nav-menu summary>span{display:inline-flex;align-items:center;gap:2px}
.nav-menu .caret{display:none}
.nav .badge{position:absolute;top:2px;left:calc(50% + 6px);margin:0;min-width:18px;text-align:center;background:#ffa6c9;color:#0f2a4f;font-size:.72rem;line-height:1.45;padding:0 5px}
.nav-links>a.on .badge{background:#1f4e8c;color:#fff}
.nav .sep{height:40px;margin:0 4px}
.nav-menu .menu a{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.nav-menu .menu a .ml{flex:1}
.nav-menu .menu .badge{position:static;background:var(--accent);color:#fff}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px}
@media (max-width:700px){
  .nav .in{padding:4px 6px}
  .nav-links{gap:2px}
  .nav-links>a,.nav-menu summary{min-width:62px;padding:5px 6px;font-size:.72rem}
  .nav-links>a .ic,.nav-menu summary>.ic{width:21px;height:21px}
  .nav-menu[open]>summary{margin:0 auto}
  .nav-cta{display:none}
}

/* ปุ่มแถบบนหน้าสาธารณะ: ไอคอนหน้าชื่อ */
.topbar.pub .userbox a.btn-ghost,.topbar.pub .userbox a.btn-cta{display:inline-flex;align-items:center;gap:6px}
.topbar.pub .userbox a.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------------------------------------------------------------- ประวัติรายการ: ตัวกรอง + กลุ่ม → โครงการ → ใบ */
.hx-filter{margin-bottom:0}
.hx-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hx-row #hx-q{flex:2 1 320px}
.hx-row #hx-project{flex:2 1 260px;width:auto}
.hx-row #hx-src{flex:1 1 180px;width:auto}
.hx-row input[type=date]{width:auto}
.hx-lbl{font-size:.82rem;color:var(--muted);font-weight:600;min-width:62px}
.hx-sp{flex:1}
.hx-chips{display:flex;flex-wrap:wrap;gap:6px}
.hx-chip{font:inherit;font-size:.85rem;padding:3px 12px;border-radius:999px;border:1.5px solid var(--c,#c9d3e3);background:#fff;color:var(--ink);cursor:pointer}
.hx-chip:hover{background:#f3f6fb}
.hx-chip.on{background:var(--c,var(--accent));border-color:var(--c,var(--accent));color:#fff;font-weight:600}
.hx-chip.st-wait{--c:#d4a106}.hx-chip.st-return{--c:#d97706}.hx-chip.st-paper{--c:#2563eb}.hx-chip.st-close{--c:#0f766e}.hx-chip.st-done{--c:#1D9E75}.hx-chip.st-stop{--c:#E24B4A}
.hx-sum{font-size:.88rem;color:var(--muted)}
.hx-sum b{color:var(--ink)}
.hx-list{display:grid;gap:12px}
.hx-head{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;font-weight:700;font-size:1.02rem}
.hx-head::-webkit-details-marker{display:none}
.hx-head::before{content:"▸";color:var(--c,var(--accent));margin-right:4px;transition:transform .15s;display:inline-block}
details[open]>.hx-head::before{transform:rotate(90deg)}
.hx-head>span:first-child{flex:1}
.hx-head.sub{font-size:.93rem;font-weight:600;padding:9px 16px;background:#f8fafc;border-top:1px solid var(--line)}
.hx-amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.hx-g[open]>.hx-head{border-bottom:1px solid var(--line)}
.hx-p .tbl{margin:0}
.hx-table .src-chips{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end;margin-top:3px}
.hx-table .src-chip{font-size:.72rem;padding:0 7px;border-radius:999px;background:#eef2f8;color:#334155;white-space:nowrap}
.hx-items summary{cursor:pointer;color:var(--muted)}
.hx-items ol{margin:4px 0 0 18px;padding:0}
@media (max-width:700px){.hx-lbl{min-width:0;width:100%}}
.hx-row>*{min-width:0}
@media (max-width:700px){
  .hx-row #hx-q,.hx-row #hx-project,.hx-row #hx-src{flex:1 1 100%}
  .hx-row input[type=date]{flex:1 1 130px;width:auto}
  .hx-sp{display:none}
  .hx-head{padding:10px 12px;font-size:.95rem}
  .hx-head.sub{padding:8px 12px;font-size:.86rem}
}
.hx-list>*,.hx-g,.hx-p,.hx-body{min-width:0;max-width:100%}
.hx-filter .card-b>*{min-width:0}.hx-row select,.hx-row input{max-width:100%}
.hx-s{cursor:pointer;user-select:none;white-space:nowrap}
.hx-s:hover{color:var(--accent)}
.hx-s::after{content:" ⇅";opacity:.35;font-size:.8em}
.hx-s.asc::after{content:" ▲";opacity:1;color:var(--accent)}
.hx-s.desc::after{content:" ▼";opacity:1;color:var(--accent)}
/* หัวข้องานคนละประเภท คนละสี (ตรงกับป้ายสถานะ): รอพิจารณา = ส้ม · รอเอกสารกลับ = น้ำเงิน · รอตัดเงินจริง = เขียวอมฟ้า */
.card-h.h-todo.h-paper{background:#1D4ED8}
.card-h.h-todo.h-paper .btn{color:#1E3A8A}
.card-h.h-todo.h-close{background:#0F766E}
.card-h.h-todo.h-close .btn{color:#115E59}

/* ตัวเลือกปีงบ (ข้างหัวเรื่อง) */
.year-pick{display:inline-flex;align-items:center;gap:8px;margin:2px 0 4px;flex-wrap:wrap}
.year-pick select{width:auto;padding:3px 8px;font-size:.88rem;border-radius:999px;border-color:#b9c4d6;background:#fff}

/* นำเข้า Excel: ตั้งค่าการอ่านไฟล์ */
.imp-cfg .imp-box{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;display:grid;gap:6px}
.imp-cfg .radio-row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.imp-cfg .radio-row label{display:inline-flex;gap:6px;align-items:center;margin:0;font-weight:400;color:var(--ink)}
.imp-colors td{vertical-align:middle}
.swatch{display:inline-block;width:26px;height:18px;border:1px solid #b9c4d6;border-radius:4px;vertical-align:middle}
.imp-colors td:first-child{white-space:nowrap}
.imp-preview td:nth-child(3){min-width:340px}

/* table-tools.js: เรียง/กรองทุกตาราง */
.tt-s{cursor:pointer;user-select:none;white-space:nowrap}
.tt-s:hover,.tt-s:focus-visible{color:var(--accent)}
.tt-s::after{content:" ⇅";opacity:.35;font-size:.8em}
.tt-s.asc::after{content:" ▲";opacity:1;color:var(--accent)}
.tt-s.desc::after{content:" ▼";opacity:1;color:var(--accent)}
.tt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:#fafbfd}
.tt-bar>*{min-width:0}
.tt-bar input[type=search]{flex:1 1 220px;max-width:360px}
.tt-bar select{width:auto;max-width:100%}
.tt-sum{font-size:.82rem;color:var(--muted);margin-left:auto}
tr.tt-dim{opacity:.55}
@media print{.tt-bar{display:none}.tt-s::after{content:""}}

/* การ์ดยอดเงินตามสีสถานะ — .mcard + m-all/m-used/m-res/m-pend/m-left (ภาพรวม, หน้ากิจกรรม, หน้าโครงการสาธารณะ) */
.mcard{--kc:var(--st-all);--kt:var(--st-all);background:color-mix(in srgb,var(--kc) 12%,#fff);border:1px solid color-mix(in srgb,var(--kc) 40%,#fff);border-top:6px solid var(--kc);box-shadow:0 1px 2px rgba(15,23,42,.06)}
.mcard .k{display:flex;align-items:center;gap:7px;color:var(--kt);font-weight:700;font-size:.9rem}
.mcard .k::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--kc);flex:none}
.mcard .v{color:var(--kt);font-weight:700}
.mcard .s,.mcard .small.muted{color:color-mix(in srgb,var(--kt) 65%,#475569)}
.m-used{--kc:var(--st-used);--kt:#174a8b} .m-res{--kc:var(--st-res);--kt:#5b21b6} .m-pend{--kc:var(--st-pend);--kt:#92400e} .m-left{--kc:var(--st-left);--kt:#166534}

/* ปุ่มกิจกรรมก่อนหน้า/ถัดไป: พื้นเข้ม ลูกศรใหญ่ */
.prevnext .pn:not(.empty-pn){grid-template-columns:auto 1fr;align-items:center;column-gap:14px;background:var(--accent-2);border-color:var(--accent-2);color:#fff;padding:12px 16px;box-shadow:0 2px 6px rgba(23,60,109,.25);transition:background .15s,transform .15s}
.prevnext .pn.next:not(.empty-pn){grid-template-columns:1fr auto}
.prevnext .pn:not(.empty-pn):hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.prevnext .pn:not(.empty-pn):focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.prevnext .pn .pn-ico{grid-row:1 / span 3;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.prevnext .pn.next .pn-ico{grid-column:2}
.prevnext .pn .pn-ico svg{width:30px;height:30px}
.prevnext .pn:not(.empty-pn) .k{color:var(--pn-c);font-size:.84rem}
/* กิมมิกสีโรงเรียน: ก่อนหน้า = กรอบชมพู · ถัดไป = กรอบฟ้า */
.prevnext .pn.prev{--pn-c:var(--school-pink)} .prevnext .pn.next{--pn-c:var(--school-blue)}
.prevnext .pn:not(.empty-pn){border:3px solid var(--pn-c);box-shadow:inset 0 0 0 2px var(--accent-2),inset 0 0 0 3px color-mix(in srgb,var(--pn-c) 45%,transparent),0 2px 6px rgba(23,60,109,.25)}
.prevnext .pn:not(.empty-pn):hover{border-color:var(--pn-c)}
.prevnext .pn .pn-ico{background:var(--pn-c);color:var(--accent-2)}
.prevnext .pn:not(.empty-pn) b{color:#fff}
.prevnext .pn:not(.empty-pn) b .faint{color:#bcd0ec}
.prevnext .pn:not(.empty-pn) small{color:#c7d6ee}
.prevnext .pn.next>:not(.pn-ico){grid-column:1}
@media (max-width:600px){.prevnext .pn:not(.empty-pn){column-gap:10px;padding:10px 12px}.prevnext .pn .pn-ico{width:38px;height:38px}.prevnext .pn .pn-ico svg{width:24px;height:24px}}

/* สีเตือนยอดคงเหลือ: ต่ำกว่า 30% ส้ม · หมด แดง (amt_tone) */
.amt{display:inline-block;font-weight:700;border-radius:6px;padding:0 6px;margin-right:-6px}
.amt-low{color:#c2410c;background:#ffedd5}
.amt-zero{color:#dc2626;background:#fee2e2;font-weight:800}
.an-av .amt,.an-rem .amt{margin-right:0}
/* แถบใช้ไป · คงเหลือ (partials/usebar) */
.ubar-col{min-width:170px}
.ubar{display:grid;gap:3px;min-width:150px}
.ubar-t{height:12px;border-radius:999px;background:var(--sunk);overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,23,42,.12)}
.ubar-f{display:flex;height:100%;transform-origin:left;animation:ubar-grow .7s cubic-bezier(.2,.7,.2,1) both}
.ubar-f i{display:block;height:100%}
.ubar-f .u{background:var(--st-used)} .ubar-f .k{background:var(--st-res)} .ubar-f .p{background:var(--st-pend)}
.ubar-f .l{background:color-mix(in srgb,var(--st-left) 55%,#fff)}
.ubar-l{display:flex;justify-content:space-between;gap:8px;font-size:.74rem;color:var(--muted);white-space:nowrap}
.ubar-l .ubar-ok{color:var(--st-left);font-weight:600}
.ubar-l .amt{padding:0 5px;margin:0}
@keyframes ubar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ubar-f{animation:none}}
@media print{.ubar-f{animation:none}}

/* ปุ่มกลับหน้าที่มาจาก (?back=) — สีชมพูโรงเรียน */
.btn-return{background:var(--school-pink);border-color:var(--school-pink);color:#0f2a4f;font-weight:700}
.btn-return:hover{filter:brightness(.95)}

/* ใช้จริงเทียบยอดที่ขอ (paid_cell) */
.paid{display:inline-block;font-weight:700;border-radius:6px;padding:1px 7px;margin-right:-7px}
.paid-eq{color:#15803d} span.paid-eq{background:#dcfce7}
.paid-under{color:#1d4ed8} span.paid-under{background:#dbeafe}
.paid-over{color:#dc2626} span.paid-over{background:#fee2e2}
.paid-note{font-size:.74rem;font-weight:600;white-space:nowrap;margin-top:3px;color:var(--faint)}
.paid-note.paid-eq{color:#15803d}.paid-note.paid-under{color:#1d4ed8}.paid-note.paid-over{color:#dc2626}

/* สีประจำแหล่งเงิน (class s-<id> ตั้ง --sc) */
.src-dot::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--sc,#94a3b8);margin-right:6px;vertical-align:-1px;flex:none}
.src-tag,.src-chip.src-tag{display:inline-block;background:color-mix(in srgb,var(--sc,#94a3b8) 15%,#fff);color:color-mix(in srgb,var(--sc,#94a3b8) 78%,#000);border:1px solid color-mix(in srgb,var(--sc,#94a3b8) 40%,#fff);border-radius:999px;padding:0 8px;font-size:.74rem;font-weight:600;white-space:nowrap}
.src-chip.src-tag.hit{background:var(--sc);color:#fff;border-color:var(--sc)}
.src-color{width:44px;height:32px;padding:2px;border-radius:6px;cursor:pointer}

/* /budget: หัวกลุ่มสีเข้ม · โครงการสีกลุ่มจาง · กิจกรรมแถบสลับบรรทัด */
.acc-g{overflow:hidden}
.acc-g>.acc-row{background:var(--c,var(--accent));color:#fff;border-radius:0}
.acc-g>.acc-row:hover{background:color-mix(in srgb,var(--c,var(--accent)) 88%,#000)}
.acc-g[open]>.acc-row{border-radius:0;border-bottom-color:transparent}
.acc-g>.acc-row .acc-count,.acc-g>.acc-row .an-bar small{color:rgba(255,255,255,.85)}
.acc-g>.acc-row .an-av{color:#fff}
.acc-g>.acc-row .bar{background:rgba(255,255,255,.35)}
.acc-g>.acc-row .caret{border-left-color:#fff}
.acc-g>.acc-row .amt{margin-right:0}
.acc-p>.acc-row{background:color-mix(in srgb,var(--c,var(--accent)) 16%,#fff);border-left:4px solid var(--c,var(--accent));margin-top:6px}
.acc-p>.acc-row:hover{background:color-mix(in srgb,var(--c,var(--accent)) 24%,#fff)}
.acc-p.d2>.acc-row,.acc-p.d3>.acc-row,.acc-p.d4>.acc-row{background:color-mix(in srgb,var(--c,var(--accent)) 8%,#fff);border-left-width:3px}
.acc-p[open]{background:transparent}
.acc-a>.acc-row{border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--c,var(--accent)) 12%,var(--line))}
.acc-a.zb>.acc-row{background:color-mix(in srgb,var(--c,var(--accent)) 6%,#fff)}
.acc-a>.acc-row:hover{background:color-mix(in srgb,var(--c,var(--accent)) 15%,#fff)}
.acc-a[open]>.acc-row{background:color-mix(in srgb,var(--c,var(--accent)) 15%,#fff);font-weight:600}
.acc-a[open]{background:color-mix(in srgb,var(--c,var(--accent)) 4%,#fff)}
.acc-g>.acc-row{background:color-mix(in srgb,var(--c,var(--accent)) 80%,#000);text-shadow:0 1px 1px rgba(0,0,0,.25)}
.acc-g>.acc-row:hover{background:color-mix(in srgb,var(--c,var(--accent)) 70%,#000)}
.acc-g>.acc-row .amt{text-shadow:none}
.acc-g>.acc-row .an[data-l]::before{color:rgba(255,255,255,.82)}

/* แท็บหน้ารออนุมัติ / ที่ฉันพิจารณาแล้ว */
.ap-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:-4px}
.ap-tabs a{padding:9px 16px;border-radius:10px 10px 0 0;text-decoration:none;color:var(--muted);font-weight:600;border:1px solid transparent;border-bottom:0;margin-bottom:-2px}
.ap-tabs a:hover{color:var(--accent);background:var(--accent-soft)}
.ap-tabs a.on{color:var(--accent-2);background:var(--surface);border-color:var(--line);border-bottom:2px solid var(--surface)}
.ap-tabs .n{display:inline-block;min-width:22px;text-align:center;font-size:.78rem;border-radius:999px;background:var(--sunk);padding:0 7px;margin-left:4px}
.ap-tabs a.on .n{background:var(--accent);color:#fff}
/* ผลที่ฉันให้ */
.dec{display:inline-block;font-weight:700;font-size:.84rem;border-radius:999px;padding:1px 10px;white-space:nowrap}
.dec-ok{color:#15803d;background:#dcfce7}.dec-ret{color:#b45309;background:#ffedd5}.dec-hold{color:#7c3aed;background:#ede9fe}.dec-stop{color:#dc2626;background:#fee2e2}
.dec-sum{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dec-all{margin-top:4px;font-size:.78rem}
.dec-all summary{cursor:pointer;color:var(--accent)}
.dec-all ol{margin:4px 0 0 18px;padding:0;color:var(--muted)}
.sign-tag{font-size:.78rem;color:var(--muted);white-space:nowrap}
.sign-tag.e{color:#1d4ed8;font-weight:600}
/* หน้าแรก: การ์ดที่ฉันพิจารณาแล้ว */
.home-stats.has-todo.has-done{grid-template-columns:2fr 1fr 1fr 1fr}
.home-stats.has-done:not(.has-todo){grid-template-columns:repeat(3,1fr)}
.home-stats .stat.done-stat{text-decoration:none;color:inherit;background:#EEF2FF;border-color:#C7D2FE;border-left:5px solid #4F46E5}
.home-stats .stat.done-stat .k{color:#3730A3}.home-stats .stat.done-stat .v{color:#312E81}
.home-stats .stat.done-stat:hover{border-color:#4F46E5}
@media (max-width:900px){.home-stats.has-todo.has-done,.home-stats.has-done{grid-template-columns:1fr 1fr}}

/* เทียบปีงบ */
.cmp-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cmp-pick select{width:auto}
.cmp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.cmp-kpis{grid-template-columns:1fr 1fr}}
.cmp-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.cmp-charts{grid-template-columns:1fr}}
.cmp-chart{position:relative;height:280px}
.cmp-d{font-weight:700;white-space:nowrap}
.cmp-d small{display:block;font-size:.74rem;font-weight:600}
.cmp-d.up{color:#15803d}.cmp-d.down{color:#dc2626}.cmp-d.same{color:var(--faint)}.cmp-d.new{color:#7c3aed;font-weight:600}
.cmp-legend{display:flex;flex-wrap:wrap;gap:6px}
.mt{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:0 8px;margin-left:6px;white-space:nowrap;vertical-align:1px}
.mt-name{background:#dcfce7;color:#15803d}.mt-similar{background:#fef3c7;color:#92400e}.mt-manual{background:#dbeafe;color:#1d4ed8}
.mt-new{background:#ede9fe;color:#6d28d9}.mt-gone{background:#fee2e2;color:#b91c1c}
.cmp-legend .mt{margin-left:0}
.cmp-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.cmp-tools input[type=search]{flex:1 1 240px;max-width:360px}
.cmp-tree .cmp-gh th{background:var(--accent-2);color:#fff;text-align:left;font-size:.95rem}
.cmp-tree .cmp-r td:first-child{padding-left:calc(10px + var(--ind,0) * 22px)}
.cmp-tree .cmp-r.d1{--ind:1}.cmp-tree .cmp-r.d2{--ind:2}.cmp-tree .cmp-r.d3{--ind:3}.cmp-tree .cmp-r.d4{--ind:4}.cmp-tree .cmp-r.d5{--ind:5}
.cmp-tree .cmp-r.d0 td{background:#f1f5f9;font-weight:600}
.cmp-tree .cmp-r.d1:not(.leaf) td{background:#f8fafc}
.cmp-tree .cmp-r:hover td{background:#eef2ff}
.cmp-tree .cmp-r.gone td{color:#64748b;background:#fff7f7}
.cmp-tg{all:unset;cursor:pointer;display:inline-block;width:18px;text-align:center;color:var(--accent);font-weight:700}
.cmp-name{display:inline}
.links-t select{max-width:100%;width:100%}
@media print{.cmp-tools,.cmp-pick{display:none}.cmp-tree .cmp-r[hidden]{display:table-row}}
/* หน้าเข้าสู่ระบบ: ตราโรงเรียน */
.login-logo{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--school-pink),0 2px 8px rgba(15,23,42,.18)}

/* หน้าเข้าสู่ระบบ: หัวกลาง · ปุ่มลัดไม่ต้องเข้าระบบ */
.login-head{display:grid;justify-items:center;text-align:center;gap:6px}
.login-head h1{margin:6px 0 0}
.login-head p{margin:0}
.login-logo{width:88px;height:88px}
.login-submit{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;font-size:1.02rem}
.login-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.84rem;margin-top:4px}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}
.login-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lq{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;text-decoration:none;color:var(--ink);border:2px solid var(--lq);background:color-mix(in srgb,var(--lq) 10%,#fff);transition:transform .15s,box-shadow .15s,background .15s}
.lq:hover,.lq:focus-visible{background:color-mix(in srgb,var(--lq) 20%,#fff);transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.12)}
.lq-budget{--lq:#2563eb}.lq-track{--lq:#db2777}
.lq-ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--lq);color:#fff}
.lq b{display:block;font-size:.95rem;line-height:1.3}
.lq small{display:block;color:var(--muted);font-size:.78rem;line-height:1.35;margin-top:2px}
@media (max-width:420px){.login-quick{grid-template-columns:1fr}}
/* ไม่มีแผงทดลอง (ปิด demo บนเซิร์ฟเวอร์จริง) → การ์ดคอลัมน์เดียวกลางจอ */
.login-card:not(:has(.r)){max-width:470px;grid-template-columns:1fr}

/* ช่องใช้จริง: ตัดส่วนเกินจากกิจกรรมไหน */
.pull-from{font-size:.74rem;color:var(--muted);margin-top:3px;white-space:normal;text-align:right;line-height:1.5}
.pull-from a{color:#b91c1c;text-decoration:none;border-bottom:1px dashed #fca5a5}
.pull-from a:hover{border-bottom-style:solid}
.pull-from .code{font-size:.7rem}
.login-quick.one{grid-template-columns:1fr}