/* ระบบการเงินโรงเรียน — app.css
   ธีมสว่าง · Liquid Glass แบบแบน · สีประจำแท็บ (ภาพรวมฟ้า / รายจ่ายแดง / ตั้งค่าเทา)
   ลายพื้นหลังเรขาคณิตอยู่ชั้นหลังสุด จางลงตรงบริเวณ hero เพื่อไม่แย่งซีน */

:root {
  --ink: #141b2d; --ink2: #3f4859; --muted: #646d7e; --line: rgba(20, 27, 45, .09);
  --bg: #f5f6fa; --glass: rgba(255, 255, 255, .74); --glass2: rgba(255, 255, 255, .52);
  --ok: #0f9466; --warn: #c26a00; --bad: #d01c3f;
  --c1: #1262f0; --c2: #3b9bff; --c3: #bfe0ff; --c4: #0a3cb0; /* สีประจำแท็บ (ตั้งใหม่ตาม data-tab) */
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.36, .5, 1);
  --r: 22px; --font: "Geist", "Sarabun", system-ui, sans-serif; --num: "Geist", "Sarabun", system-ui, sans-serif;
  color-scheme: light;
}
body[data-tab="income"] { --c1: #079a55; --c2: #2edc86; --c3: #c2f5dc; --c4: #04703c; }
body[data-tab="expense"] { --c1: #f26a00; --c2: #ffa63d; --c3: #ffd9a8; --c4: #b04800; }
body[data-tab="settings"] { --c1: #7a4dff; --c2: #5aa2ff; --c3: #f3c4ff; --c4: #4a22c4; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; max-width: 100%; overflow-x: clip; }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink);
  background-color: color-mix(in srgb, var(--c2) 5%, var(--bg));
  transition: background-color .7s var(--ease);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
.num, .money { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* ---------- พื้นหลังเรขาคณิต (ชั้นหลังสุด) ---------- */
#bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.18) 240px, #000 560px);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.18) 240px, #000 560px); }
#bg .dots { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--c1) 22%, transparent) 1px, transparent 1.4px); background-size: 24px 24px; opacity: .55; }
#bg svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(24px) scale(1.02);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
body[data-tab="overview"] #bg svg[data-for="overview"],
body[data-tab="income"] #bg svg[data-for="income"],
body[data-tab="expense"] #bg svg[data-for="expense"],
body[data-tab="settings"] #bg svg[data-for="settings"] { opacity: 1; transform: translateY(calc(var(--sy, 0) * -0.04px)); }
#bg .g { fill: url(#bgGlass); stroke: url(#bgRim); stroke-width: 1.4; }
#bg .t { fill: var(--c2); opacity: .07; }
#bg .t2 { fill: var(--c3); opacity: .35; }
#bg .l { fill: none; stroke: color-mix(in srgb, var(--c1) 26%, transparent); stroke-width: 1.4; }
#bg .f1 { animation: drift1 18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
#bg .f2 { animation: drift2 24s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes drift1 { to { transform: translate(-18px, 14px) rotate(4deg); } }
@keyframes drift2 { to { transform: translate(14px, -16px) rotate(-5deg); } }

/* ---------- แถบความคืบหน้าการเลื่อน ---------- */
#prog { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--c3), var(--c2), var(--c1)); pointer-events: none; }

/* ---------- กระจก (flat) ---------- */
.glass {
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--glass), var(--glass2)) padding-box,
              linear-gradient(180deg, #fff, rgba(255,255,255,.35) 55%, rgba(255,255,255,.75)) border-box;
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(20,27,45,.045), 0 12px 30px -22px color-mix(in srgb, var(--c1) 60%, transparent);
}

/* ---------- โครงหน้า ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.top { display: flex; align-items: center; gap: 14px; padding: 18px 0 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.logo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none;
  background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 22px -14px var(--c1); transition: transform .5s var(--spring); }
.logo img { width: 42px; height: 42px; object-fit: contain; }
.logo:hover { transform: rotate(-4deg) scale(1.06); }
.brand h1 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.brand h1 b { color: var(--c1); transition: color .6s; }
.brand small { display: block; color: var(--muted); font-size: 13px; }
.who { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); min-width: 0; }
.who .chip { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabs { position: sticky; top: max(8px, env(safe-area-inset-top, 0px)); z-index: 40; display: flex; gap: 4px; padding: 5px; border-radius: 18px;
  width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 4px 0 18px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; z-index: 1; border: 0; background: none; padding: 9px 18px; border-radius: 13px; cursor: pointer;
  font-weight: 700; color: var(--ink2); white-space: nowrap; transition: color .3s; }
.tab[aria-selected="true"] { color: #fff; }
.tab .n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; font-size: 12px; line-height: 20px;
  background: color-mix(in srgb, var(--c2) 16%, #fff); color: var(--c1); }
.tab[aria-selected="true"] .n { background: rgba(255,255,255,.25); color: #fff; }
.tabs .pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 13px;
  background: linear-gradient(180deg, var(--c2), var(--c1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -6px var(--c1);
  transition: transform .55s var(--spring), width .55s var(--spring), background .6s; }

main { padding-bottom: 96px; }

/* ---------- ปุ่ม ---------- */
.btn { border: 0; border-radius: 13px; padding: 10px 16px; min-height: 42px; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--c2), var(--c1)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -10px var(--c1);
  transition: transform .35s var(--spring), box-shadow .3s, opacity .3s, background .5s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.96); transition-duration: .1s; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.btn.soft { background: color-mix(in srgb, var(--c2) 12%, #fff); color: var(--c1); box-shadow: none; }
.btn.danger { background: #fff; color: var(--bad); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bad) 30%, transparent); }
.btn.sm { min-height: 34px; padding: 6px 12px; font-size: 14px; border-radius: 11px; }
.btn svg { width: 18px; height: 18px; }
.link { border: 0; background: none; padding: 0; color: var(--c1); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--c1); outline-offset: 2px; }

/* ---------- ช่องกรอก ---------- */
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink2); min-width: 0; }
input, select, textarea { width: 100%; min-width: 0; min-height: 42px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.9); color: var(--ink); transition: border-color .25s, box-shadow .25s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c2) 18%, transparent); }
input[readonly] { background: color-mix(in srgb, var(--c2) 4%, #fff); }
input.money { text-align: right; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--c1); }
.th-date { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ---------- การ์ด / hero ---------- */
.card { border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px; }
.card h2 { font-size: 18px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.card h2::before { content: ""; width: 5px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, var(--c3), var(--c1)); }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 10px; }

.hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 24px 26px; color: #fff; margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 78%, var(--c4)) 0%, var(--c1) 55%, color-mix(in srgb, var(--c2) 70%, var(--c1)) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 24px 44px -28px var(--c1); transition: background .7s var(--ease); }
.hero .deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero .deco svg { position: absolute; right: -40px; top: -30px; width: min(520px, 70%); height: auto; opacity: .9; }
.hero .deco .hg { fill: rgba(255,255,255,.13); stroke: rgba(255,255,255,.45); stroke-width: 1.3; }
.hero .deco .hl { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.3; }
.hero .lbl { font-size: 15px; font-weight: 700; opacity: .95; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero .big { font-family: var(--num); font-size: clamp(32px, 5vw, 52px); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 4px; text-shadow: 0 2px 14px rgba(5,10,40,.28); }
.hero .sub { font-size: 14px; opacity: .92; }
.hero input[type="date"] { width: auto; min-height: 36px; padding: 4px 10px; background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); color-scheme: dark; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.tile { border-radius: 18px; padding: 12px 14px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; color: #fff; min-width: 0; transition: transform .45s var(--spring), background .3s; }
button.tile { cursor: pointer; font: inherit; }
button.tile:hover { transform: translateY(-3px); background: rgba(255,255,255,.22); }
.tile .k { font-size: 13px; font-weight: 600; opacity: .92; }
.tile .v { font-family: var(--num); font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
.tile .s { font-size: 12.5px; opacity: .85; }

/* ---------- ขั้นตอน ขบ → ขจ → จ่าย ---------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; margin-top: 16px; }
.flow .arrow { align-self: center; opacity: .7; }
.flow .arrow svg { width: 22px; height: 22px; display: block; }

/* ---------- แถบเลือกย่อย ---------- */
.seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 15px; margin: 2px 0 14px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { border: 0; background: none; padding: 8px 16px; border-radius: 11px; font-weight: 700; color: var(--ink2); cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s, transform .3s var(--spring); }
.seg button[aria-pressed="true"] { background: var(--c1); color: #fff; box-shadow: 0 6px 14px -8px var(--c1); }
.seg button:active { transform: scale(.95); }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; min-width: 180px; }

/* ---------- การ์ดเอกสาร ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.doc { border-radius: 20px; padding: 14px 16px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%;
  transition: transform .45s var(--spring), box-shadow .35s var(--ease); position: relative; overflow: hidden; }
.doc:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(20,27,45,.05), 0 18px 34px -22px var(--c1); }
.doc .no { font-weight: 800; font-size: 18px; color: var(--c1); }
.doc .meta { color: var(--muted); font-size: 14px; }
.doc .amt { font-family: var(--num); font-size: 20px; margin-top: 4px; }
.doc.cancel { opacity: .62; }
.doc.cancel .no { text-decoration: line-through; color: var(--muted); }
.bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--line); margin-top: 10px; }
.bar i { display: block; height: 100%; transition: flex-grow .6s var(--ease); }
.bar .p { background: var(--ok); } .bar .k { background: var(--c2); } .bar .w { background: #f5b13d; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.badge.wait { background: #fff4dd; color: #8a4b00; }
.badge.in { background: color-mix(in srgb, var(--c2) 14%, #fff); color: var(--c1); }
.badge.paid { background: #e2f6ec; color: #0b6b49; }
.badge.cancel { background: #f1f2f5; color: #5b6272; }

/* ---------- ตาราง / รายการ ---------- */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row { display: grid; grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line); transition: background .2s, transform .35s var(--spring); }
.row:hover { background: #fff; }
.row.sel { background: color-mix(in srgb, var(--c2) 9%, #fff); border-color: color-mix(in srgb, var(--c2) 35%, transparent); }
.row .who2 { font-weight: 700; overflow-wrap: anywhere; }
.row .tag { font-size: 13px; color: var(--muted); }
.row .amt { font-family: var(--num); font-weight: 600; text-align: right; white-space: nowrap; }
.grp { margin: 16px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; }
.grp .sum { margin-left: auto; font-family: var(--num); font-weight: 600; color: var(--ink2); }

.tablewrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.8); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-size: 13px; color: var(--ink2); background: color-mix(in srgb, var(--c2) 7%, #fff); position: sticky; top: 0; }
td.money, th.money { text-align: right; white-space: nowrap; }
tr.grp-row td { background: color-mix(in srgb, var(--c2) 9%, #fff); font-weight: 800; color: var(--c1); }
tr.sum-row td { font-weight: 800; background: #f6f7fa; }
.zero { color: #a5acb9; }

/* ---------- แถบล่างติดจอ ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  transform: translateY(110%); transition: transform .5s var(--spring); }
.dock.on { transform: none; }
.dock .in { max-width: 1180px; margin: 0 auto; border-radius: 20px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dock .tot { font-weight: 800; flex: 1; min-width: 160px; }
.dock .tot .money { color: var(--c1); font-size: 19px; }
.dock input { width: auto; flex: 0 1 180px; }

/* ---------- โมดัล ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; padding: 0;
  background: rgba(16, 20, 34, .34); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease); }
.modal.on { opacity: 1; }
.sheet { width: min(1040px, 100%); max-height: 92vh; display: flex; flex-direction: column; border-radius: 26px 26px 0 0;
  background: #fbfbfd; box-shadow: 0 -20px 60px -20px rgba(10,14,30,.4); transform: translateY(40px); transition: transform .5s var(--spring); }
.modal.on .sheet { transform: none; }
@media (min-width: 760px) { .modal { align-items: center; padding: 24px; } .sheet { border-radius: 26px; } }
.sheet header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sheet header h3 { margin: 0; font-size: 19px; flex: 1; min-width: 0; }
.sheet .body { padding: 16px 20px; overflow: auto; -webkit-overflow-scrolling: touch; }
.sheet footer { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sheet footer .sp { flex: 1; }
.x { border: 0; background: #eef0f5; width: 38px; height: 38px; border-radius: 12px; cursor: pointer; font-size: 20px; line-height: 1; }

/* ---------- ฟอร์ม ขบ. ---------- */
.form-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.line { display: grid; grid-template-columns: 30px minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(88px, auto) 40px; gap: 8px 10px; align-items: end; padding: 12px;
  border-radius: 16px; background: #fff; border: 1px solid var(--line); margin-bottom: 8px; animation: pop .45s var(--spring) both; }
.line > .i { grid-column: 1; grid-row: 1; align-self: center; }
.line > [data-c="type"] { grid-column: 2; grid-row: 1; }
.line > [data-c="payee"] { grid-column: 3; grid-row: 1; }
.line > [data-c="gross"] { grid-column: 4; grid-row: 1; }
.line > [data-c="net"] { grid-column: 5; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding-bottom: 8px; }
.line > [data-c="del"] { grid-column: 6; grid-row: 1; }
.line > [data-c="more"] { grid-column: 2 / -1; grid-row: 2; }
.line .nl { font-size: 12px; color: var(--muted); font-weight: 600; }
.more summary { cursor: pointer; list-style: none; font-size: 13.5px; color: var(--ink2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 2px 0; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "▸"; color: var(--c1); transition: transform .25s var(--ease); display: inline-block; }
.more[open] summary::before { transform: rotate(90deg); }
.more summary:hover { color: var(--c1); }
.morebody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
@media (max-width: 760px) {
  .line { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .line > [data-c="type"] { grid-column: 2 / 4; }
  .line > [data-c="payee"] { grid-column: 2 / 4; grid-row: 2; }
  .line > [data-c="gross"] { grid-column: 2; grid-row: 3; }
  .line > [data-c="net"] { grid-column: 3; grid-row: 3; }
  .line > [data-c="del"] { grid-column: 4; grid-row: 1; }
  .line > [data-c="more"] { grid-column: 2 / -1; grid-row: 4; }
  .line > .i { grid-row: 1; }
  .morebody { grid-template-columns: 1fr 1fr; }
}
.line .i { font-weight: 800; color: var(--c1); align-self: center; text-align: center; }
.line .net { font-family: var(--num); font-weight: 700; font-size: 18px; white-space: nowrap; color: var(--c1); }
.line .del { border: 0; background: #f4f5f8; border-radius: 10px; width: 38px; height: 42px; cursor: pointer; color: var(--bad); font-size: 18px; }
.line.locked { background: #f8f9fb; }
.taxrow { display: flex; gap: 4px; }
.taxrow input { flex: 1; }
.taxrow select { width: 64px; flex: none; padding: 8px 2px; font-size: 13px; }
.totals { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; font-size: 15px; margin-top: 8px; }
.totals b { font-family: var(--num); font-size: 18px; }
.totals .g b { color: var(--c1); font-size: 22px; }

/* ---------- สายโยง ---------- */
.links { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 160px) minmax(0, 1fr); gap: 0; }
.links .col { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.links .col h4 { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.node { border-radius: 16px; padding: 10px 12px; cursor: pointer; transition: transform .35s var(--spring), box-shadow .3s, opacity .3s; text-align: left; font: inherit; color: inherit; width: 100%; }
.node b { color: var(--c1); }
.node .meta { color: var(--muted); font-size: 13px; }
.node.dim { opacity: .35; }
.node.hot { transform: scale(1.02); box-shadow: 0 0 0 2px var(--c2), 0 14px 26px -18px var(--c1); }
.node.waitnode { border-style: dashed; }
.links svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.links path { fill: none; stroke-linecap: round; transition: opacity .3s, stroke-width .3s; }
.links path.paid { stroke: var(--ok); }
.links path.in { stroke: var(--c2); stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; }
.links path.wait { stroke: #f2a93b; stroke-dasharray: 2 7; }
.links path.dim { opacity: .12; }
@keyframes dash { to { stroke-dashoffset: -24; } }

/* ---------- ภาพรวม ---------- */
.cards { display: none; }
.tc { border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; background: rgba(255,255,255,.8); border: 1px solid var(--line); }
.tc-h { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.tc-h span:first-child, .tc-l span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tc-g { font-size: 13px; color: var(--c1); font-weight: 800; margin: 14px 0 6px; }
.tc-l { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--ink2); }

/* ---------- ตั้งค่า ---------- */
.erow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; padding: 10px; border-radius: 16px;
  background: rgba(255,255,255,.8); border: 1px solid var(--line); margin-bottom: 8px; }
.erow .chk { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; font-weight: 600; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- เอกสาร A4 ---------- */
.paperwrap { background: #e9ebf0; border-radius: 18px; padding: 16px; overflow: auto; }
.paper { width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; color: #000; padding: 14mm 16mm 14mm 26mm; position: relative;
  font-family: "TH SarabunPSK", "TH Sarabun New", "Sarabun", serif; font-size: 17px; line-height: 1.5; box-shadow: 0 8px 26px rgba(0,0,0,.14); }
.paper h1 { text-align: center; font-size: 27px; margin: 0 0 10px; }
.paper p { margin: 0; }
.paper .mh { display: flex; justify-content: space-between; gap: 12px; }
.paper .rule { border-bottom: 1px solid #000; margin: 4px 0 8px; }
.paper .ind { text-indent: 2.2cm; }
.paper h3 { font-size: 15.5px; margin: 10px 0 4px; }
.paper table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.paper th, .paper td { border: 1px solid #000; padding: 2px 6px; position: static; background: none; color: #000; font-size: 14.5px; }
.paper th { background: #efefef; text-align: center; }
.paper td.c { text-align: center; } .paper td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paper tr.tot td { font-weight: 700; }
.paper .bt { text-align: right; margin: 2px 0 6px; }
.paper .sign { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; text-align: center; margin-top: 30px; }
.paper .sign .sp { height: 28px; }
.paper .dir { text-align: center; margin-top: 26px; }
.paper .void { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 110px; font-weight: 800; color: rgba(208,28,63,.16); transform: rotate(-24deg); }

/* ---------- ข้อความแจ้ง ---------- */
#toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 200; transform: translate(-50%, 30px); opacity: 0;
  padding: 12px 18px; border-radius: 16px; background: #1b2236; color: #fff; font-weight: 600; max-width: calc(100% - 32px); box-shadow: 0 16px 34px -14px rgba(0,0,0,.5);
  transition: transform .5s var(--spring), opacity .3s; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.err { background: var(--bad); } #toast.good { background: var(--ok); }
.err-box { border-radius: 16px; padding: 14px 16px; background: #fff1f3; border: 1px solid #f6c2cc; color: #8f1230; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 34px 16px; color: var(--muted); border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--c2) 30%, transparent); }
.empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.skel { border-radius: 14px; background: linear-gradient(90deg, #eceef3 25%, #f6f7fa 50%, #eceef3 75%); background-size: 300% 100%; animation: shimmer 1.3s infinite; min-height: 80px; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- ทางเข้า ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login .box { width: min(420px, 100%); border-radius: 28px; padding: 28px 24px; text-align: center; }
.login .logo { width: 84px; height: 84px; border-radius: 24px; margin: 0 auto 12px; }
.login .logo img { width: 70px; height: 70px; }
.login h1 { margin: 0 0 4px; font-size: 23px; }

/* ---------- การเคลื่อนไหว ---------- */
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.stagger > * { animation: rise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.view-in { animation: rise .8s cubic-bezier(.22,1,.36,1) both; }
::view-transition-old(root) { animation: vtOut .42s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vtIn .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes vtOut { to { opacity: 0; transform: scale(.992); filter: blur(5px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px) scale(1.004); filter: blur(6px); } }
.tabs { view-transition-name: tabs; }

/* ---------- มือถือ ---------- */
@media (max-width: 860px) {
  .tablewrap.bal { display: none; } .cards { display: block; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .flow .arrow { display: none; }
  .flow .tile { padding: 10px; } .flow .tile .v { font-size: 15px; } .flow .tile .k { font-size: 12px; line-height: 1.35; }
  .links { grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); }
}
@media (max-width: 640px) {
  .brand h1 { font-size: 18px; }
  .hero { padding: 20px 18px; border-radius: 24px; }
  .hero .deco svg { width: 90%; right: -30%; opacity: .55; }
  .tiles { grid-template-columns: 1fr; }
  .form-head { grid-template-columns: 1fr; }
  .row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .row .tag.hide-sm { display: none; }
  .seg button { padding: 8px 11px; font-size: 15px; }
  .card { padding: 16px 14px; }
  .dock input { flex: 1 1 140px; }
  .paperwrap { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- พิมพ์: เฉพาะกระดาษ ---------- */
@media print {
  @page { size: A4; margin: 0; }
  body.printing > *:not(.modal) { display: none !important; }
  body.printing .modal { position: static; background: none; backdrop-filter: none; opacity: 1; display: block; }
  body.printing .sheet { box-shadow: none; max-height: none; transform: none; width: auto; border-radius: 0; background: #fff; }
  body.printing .sheet header, body.printing .sheet footer { display: none; }
  body.printing .sheet .body { padding: 0; overflow: visible; }
  body.printing .paperwrap { background: none; padding: 0; }
  body.printing .paper { box-shadow: none; margin: 0; zoom: 1 !important; }
  body.printing .paper tr, body.printing .paper .sign, body.printing .paper .dir { break-inside: avoid; }
}

/* ---------- วางจาก Excel · ร่างอัตโนมัติ · งานค้าง · รายรับ ---------- */
.bad, select.bad, input.bad { border-color: var(--bad) !important; background: #fff1f3 !important; box-shadow: 0 0 0 3px rgba(208,28,63,.14); }
.badge.bad { background: #ffe3e8; color: #9b1030; }
.autotag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 8px; border-radius: 10px; margin-left: 4px; background: color-mix(in srgb, var(--c2) 16%, #fff); color: var(--c1); }
.warnnote { display: inline-block; font-size: 12px; font-weight: 700; color: #8a4b00; background: #fff4dd; border-radius: 10px; padding: 0 8px; margin-left: 6px; }
.paste { margin: 0 0 14px; padding: 12px; border-radius: 16px; background: var(--glass2); border: 1.5px dashed color-mix(in srgb, var(--c2) 40%, transparent); }
.paste textarea, #rPaste { width: 100%; min-height: 84px; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.draftbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: 14px; background: #fff4dd; color: #7a4300; font-weight: 600; }
.link { background: none; border: 0; padding: 0; color: var(--c1); font-weight: 700; text-decoration: underline; cursor: pointer; }
.todo { display: flex; gap: 12px; align-items: center; padding: 11px 14px; margin-bottom: 8px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); }
.todo .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.todo.draft .dot { background: #f5b13d; } .todo.wait .dot { background: #fb5476; } .todo.pay .dot { background: #38a8ff; } .todo.rcv .dot { background: #25c08a; }
.todo .tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todo .btn { flex: none; }
.cnt { font-size: 13px; font-weight: 700; padding: 0 9px; border-radius: 12px; background: var(--c1); color: #fff; }
.form-head.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rline { grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 36px; }
.pvsum { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 8px; }
.pvtable { max-height: 340px; overflow: auto; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.pvtable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pvtable th, .pvtable td { padding: 6px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.pvtable td:last-child { white-space: normal; min-width: 180px; }
.pvtable th { position: sticky; top: 0; background: #f2f4f9; }
.pvtable .r, .mrow .r { text-align: right; }
.pvtable tr.error td { background: #fff6f7; } .pvtable tr.same td { color: var(--muted); }
.chk { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-weight: 600; }
.chk input { width: 18px; height: 18px; }
.mon summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; flex-wrap: wrap; }
.mon summary::-webkit-details-marker { display: none; }
.mon .sp { flex: 1; } .mon .tot { font-size: 20px; font-weight: 600; }
.mrow { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.mrow.head { color: var(--muted); font-weight: 700; font-size: 13px; margin-top: 10px; }
.mrow.foot { font-weight: 700; border-bottom: 0; }
.rrow { grid-template-columns: auto minmax(0, 1.6fr) auto auto; }
.rrow .no { font-family: var(--num); font-weight: 600; color: var(--c1); }
.rrow.cancelled { opacity: .55; }
@media (max-width: 640px) {
  .form-head.r4 { grid-template-columns: 1fr 1fr; }
  .rline { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 34px; }
  .rline [data-c="type"] { grid-column: 2 / 4; }
  .rline [data-c="gross"] { grid-column: 2 / 4; }
  .rrow { grid-template-columns: 1fr auto; }
  .mrow { font-size: 14px; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 4px; }
}
.line.rline > [data-c="type"] { grid-column: 2; grid-row: 1; }
.line.rline > [data-c="method"] { grid-column: 3; grid-row: 1; }
.line.rline > [data-c="gross"] { grid-column: 4; grid-row: 1; }
.line.rline > [data-c="del"] { grid-column: 5; grid-row: 1; }
.line.rline { grid-template-columns: 30px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 40px; }
.line.rline > .i { grid-row: 1; }
@media (max-width: 640px) {
  .line.rline { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .line.rline > [data-c="type"] { grid-column: 2 / 4; grid-row: 1; }
  .line.rline > [data-c="method"] { grid-column: 2; grid-row: 2; }
  .line.rline > [data-c="gross"] { grid-column: 3; grid-row: 2; }
  .line.rline > [data-c="del"] { grid-column: 4; grid-row: 1; }
  .line.rline > .i { grid-row: 1 / 3; }
}

/* ---------- ลิ้นชักงาน (แฟ้มแก้ว) ---------- */
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin: -2px 0 14px; }
.drawer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; justify-items: center; align-items: start; padding-bottom: 6px; }
.gfhost { max-width: 100%; }
.gfhost .gf-root { font-family: var(--font); }
.gfhost { --k: .7; }
.gfhost .gf-title { font-size: calc(14.5px / var(--k)); }
.gfhost .gf-meta { font-family: var(--font); letter-spacing: 0; font-size: calc(11.5px / var(--k)); white-space: normal; line-height: 1.3; }
.gfhost .gf-label { max-width: 250px; gap: 2px; }
.gfhost .gf-sheet-name { font-family: var(--font); font-size: calc(12.5px / var(--k)); }
.gfhost .gf-sheet-meta { font-family: var(--num); font-size: calc(11.5px / var(--k)); }
@media (max-width: 560px) { .drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; } }
.form-head.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rpayer { margin: -2px 0 12px; }
.rpayer .f { margin-top: 8px; }
.pastecard > summary { list-style: none; cursor: pointer; }
.pastecard > summary::-webkit-details-marker { display: none; }
.pastecard > summary h2 { margin: 0; }
.pastecard[open] > summary h2 { margin-bottom: 12px; }
.pastecard > summary h2::after { content: "▾ กดเพื่อเปิด"; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.pastecard[open] > summary h2::after { content: "▴ ซ่อน"; }
@media (max-width: 640px) { .form-head.r3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 430px) { .tab { padding-left: 11px !important; padding-right: 11px !important; font-size: 15px; } }

/* ---------- กลุ่มตามเดือน (ยุบ/ขยาย) ---------- */
.mgrp { margin-bottom: 12px; border-radius: 20px; background: var(--glass2); border: 1px solid var(--line); overflow: clip; }
.mgrp > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; flex-wrap: wrap; transition: background .3s var(--ease); }
.mgrp > summary::-webkit-details-marker { display: none; }
.mgrp > summary:hover { background: color-mix(in srgb, var(--c2) 7%, transparent); }
.mgrp .mn { font-weight: 800; font-size: 17px; }
.mgrp .sp { flex: 1; }
.mgrp .tot { font-size: 18px; font-weight: 600; color: var(--c1); }
.mgrp .chev { width: 10px; height: 10px; border-right: 2.4px solid var(--c1); border-bottom: 2.4px solid var(--c1); transform: rotate(45deg); transition: transform .35s var(--spring); margin: 0 4px 3px 2px; }
.mgrp[open] > summary .chev { transform: rotate(-135deg); margin-top: 5px; }
.mgrp > .grid { padding: 4px 14px 14px; }

/* ---------- ความนุ่มของการเปลี่ยน/เลื่อน ---------- */
:root { interpolate-size: allow-keywords; }
html { scroll-behavior: smooth; }
.mgrp::details-content, .more::details-content, .pastecard::details-content { block-size: 0; opacity: 0; overflow: clip;
  transition: block-size .5s cubic-bezier(.22,1,.36,1), opacity .4s var(--ease), content-visibility .5s allow-discrete; }
.mgrp[open]::details-content, .more[open]::details-content, .pastecard[open]::details-content { block-size: auto; opacity: 1; }
.stagger > * { animation-duration: .9s !important; animation-delay: calc(var(--i, 0) * 60ms) !important; }

/* ---------- พื้นหลัง: แสงออโรร่านุ่ม ๆ + เรขาคณิตลอย ---------- */
#bg .aur { position: absolute; inset: -10% -10%; }
#bg .aur i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
#bg .aur i:nth-child(1) { width: 46vmax; height: 46vmax; right: -12vmax; top: 22vh; background: radial-gradient(circle at 35% 35%, var(--c2), transparent 68%); animation: aur1 26s ease-in-out infinite alternate; }
#bg .aur i:nth-child(2) { width: 40vmax; height: 40vmax; left: -14vmax; top: 56vh; background: radial-gradient(circle at 50% 50%, var(--c3), transparent 66%); animation: aur2 32s ease-in-out infinite alternate; }
#bg .aur i:nth-child(3) { width: 30vmax; height: 30vmax; left: 38vw; top: 88vh; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c2) 60%, #fff), transparent 66%); opacity: .35; animation: aur3 38s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform: translate(-9vw, 12vh) scale(1.18) rotate(20deg); } }
@keyframes aur2 { to { transform: translate(12vw, -10vh) scale(1.12) rotate(-16deg); } }
@keyframes aur3 { to { transform: translate(-14vw, -14vh) scale(1.3); } }
#bg { transition: opacity .8s var(--ease); }
#bg .dots { transform: translateY(calc(var(--sy, 0) * -0.02px)); }
#bg .f1 { animation-duration: 22s; } #bg .f2 { animation-duration: 30s; }
@keyframes drift1 { 50% { transform: translate(-14px, 16px) rotate(3deg); } to { transform: translate(-26px, 6px) rotate(6deg) scale(1.03); } }
@keyframes drift2 { 50% { transform: translate(12px, -14px) rotate(-3deg); } to { transform: translate(22px, -22px) rotate(-7deg) scale(1.04); } }

/* ---------- hero: ขยับนิด ๆ ให้ดูมีชีวิต (ไม่แย่งตัวเลข) ---------- */
.hero .deco .orb { position: absolute; border-radius: 50%; filter: blur(34px); will-change: transform; mix-blend-mode: soft-light; }
.hero .deco .o1 { width: 300px; height: 300px; right: -60px; top: -90px; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%); animation: orb1 14s ease-in-out infinite alternate; }
.hero .deco .o2 { width: 240px; height: 240px; right: 24%; bottom: -130px; background: radial-gradient(circle, var(--c3), transparent 70%); opacity: .75; animation: orb2 18s ease-in-out infinite alternate; }
.hero .deco .o3 { width: 180px; height: 180px; left: 38%; top: -70px; background: radial-gradient(circle, rgba(255,255,255,.4), transparent 70%); animation: orb3 20s ease-in-out infinite alternate; }
@keyframes orb1 { to { transform: translate(-70px, 50px) scale(1.2); } }
@keyframes orb2 { to { transform: translate(-90px, -26px) scale(1.15); } }
@keyframes orb3 { to { transform: translate(80px, 34px) scale(.9); } }
.hero .deco svg { transform: translateY(calc(var(--sy, 0) * 0.05px)); }
.hero .deco svg > * { transform-box: fill-box; transform-origin: center; animation: heroFloat 11s ease-in-out infinite alternate; }
.hero .deco svg > *:nth-child(2n) { animation-duration: 15s; animation-direction: alternate-reverse; }
.hero .deco svg > *:nth-child(3n) { animation-duration: 19s; }
.hero .deco svg circle.hl { animation-name: heroSpin; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-duration: 70s; }
@keyframes heroFloat { to { transform: translate(-12px, 10px) rotate(3deg); } }
@keyframes heroSpin { to { transform: rotate(360deg); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 60%); background-size: 260% 100%;
  animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -60% 0; } }
.hero { transition: background .7s var(--ease), transform .8s var(--ease); }

/* ---------- ทั้งหน้ามี dynamic: การ์ด/ปุ่มตอบสนองนุ่ม ๆ ---------- */
.doc, .tile, .node, .todo, .row { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s var(--ease), background .3s var(--ease); }
.doc:hover, .tile:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px var(--c1); }
.btn { transition: transform .35s var(--spring), box-shadow .35s var(--ease), background .3s var(--ease), filter .3s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.96); }
.card.glass, .mgrp { transition: box-shadow .5s var(--ease), transform .6s cubic-bezier(.22,1,.36,1); }
.card.glass:hover { box-shadow: 0 0 0 1px rgba(20,27,45,.05), 0 22px 40px -26px color-mix(in srgb, var(--c1) 70%, transparent); }
@media (prefers-reduced-motion: reduce) {
  #bg .aur i, .hero .deco .orb, .hero .deco svg > *, .hero::after, #bg .f1, #bg .f2 { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- เมนูข้างแบบพับได้ (จอกว้าง) ---------- */
.shell { display: block; }
.side { display: none; }
@media (min-width: 960px) {
  .shell { display: flex; align-items: flex-start; }
  .side { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; width: 248px; flex: none; padding: 14px 10px 66px; gap: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.6)); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    border-right: 1px solid var(--line); box-shadow: 8px 0 30px -26px var(--c1); z-index: 45; transition: width .45s cubic-bezier(.22,1,.36,1); overflow: hidden; }
  .side.mini { width: 70px; }
  .shell > .wrap { flex: 1; min-width: 0; margin: 0; max-width: none; padding-left: clamp(18px, 3vw, 40px); padding-right: clamp(18px, 3vw, 40px); }
  .shell > .wrap > .tabs { display: none; }
  .shell > .wrap > .top .brand { display: none; }
  .shell > .wrap > .top { justify-content: flex-end; }
  .shell > .wrap > main, .shell > .wrap > .top { max-width: 1180px; margin-left: auto; margin-right: auto; width: 100%; }
}
.stitle { display: flex; align-items: center; gap: 10px; padding: 6px 4px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); min-height: 64px; }
.stitle .logo { width: 44px; height: 44px; border-radius: 14px; }
.stitle .logo img { width: 34px; height: 34px; }
.stx { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; transition: opacity .25s; }
.stx b { font-size: 15.5px; line-height: 1.2; } .stx small { color: var(--muted); font-size: 12.5px; }
.sopts { display: flex; flex-direction: column; gap: 3px; }
.ssec { margin: 14px 12px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.sopt { position: relative; display: flex; align-items: center; height: 44px; width: 100%; border: 0; background: none; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink2);
  white-space: nowrap; text-align: left; transition: background .3s var(--ease), color .3s, transform .3s var(--spring); }
.sopt:hover { background: color-mix(in srgb, var(--c2) 9%, transparent); color: var(--ink); }
.sopt:active { transform: scale(.97); }
.sopt:focus-visible { outline: 2px solid var(--c2); outline-offset: 1px; }
.sic { display: grid; place-items: center; width: 46px; height: 100%; flex: none; }
.sic svg { width: 19px; height: 19px; }
.slb { transition: opacity .25s; }
.side.mini .slb, .side.mini .stx, .side.mini .ssec { opacity: 0; pointer-events: none; }
.side.mini .ssec { height: 0; margin: 6px 0; }
.sopt[aria-current="page"] { background: color-mix(in srgb, var(--c2) 15%, #fff); color: var(--c1); box-shadow: inset 3px 0 0 var(--c1), 0 8px 18px -14px var(--c1); }
.sopt[data-tab="overview"] { --t: #1262f0; } .sopt[data-tab="income"] { --t: #079a55; } .sopt[data-tab="expense"] { --t: #f26a00; } .sopt[data-tab="settings"] { --t: #7a4dff; } .sopt[data-tab="request"] { --t: #0891b2; } .sopt[data-tab="approve"] { --t: #d81b72; }
.sopt[data-tab] .sic { color: var(--t); }
.sopt[data-tab][aria-current="page"] { background: color-mix(in srgb, var(--t) 12%, #fff); color: var(--t); box-shadow: inset 3px 0 0 var(--t); }
.sopt.q .sic { color: var(--c1); }
.sn { position: absolute; right: 10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--t, var(--c1)); color: #fff; font-size: 12px; display: grid; place-items: center; }
.side.mini .sn { right: 6px; top: 3px; height: 18px; min-width: 18px; font-size: 11px; }
.sfoot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.sfoot .chv { transition: transform .45s var(--spring); transform: rotate(180deg); }
.side.mini .chv { transform: none; }
#toast { z-index: 120; }

/* ---------- การ์ดสรุป (Analytics Bento) ---------- */
#bento { margin-bottom: 14px; }
.bgrid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bcard { grid-column: span 12; min-width: 0; overflow: hidden; border-radius: 28px; padding: 22px 24px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72)); border: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 20px 40px -32px var(--c1); transition: box-shadow .5s var(--ease), transform .6s cubic-bezier(.22,1,.36,1); }
.bcard:hover { box-shadow: 0 1px 0 #fff inset, 0 28px 50px -30px var(--c1); }
@media (min-width: 1080px) { .bcard.c5 { grid-column: span 5; } .bcard.c7 { grid-column: span 7; } }
.bcard.enter { animation: rise .9s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.brow { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; height: 100%; }
.bhead { flex: none; min-width: 190px; }
.bk { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.bbig { font-family: var(--num); font-size: clamp(30px, 4vw, 42px); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.bd { display: inline-block; font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: -.01em; margin-left: 10px; vertical-align: 6px; }
.bd.up { color: #0f9466; } .bd.dn { color: #d01c3f; }
.bnote { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.bpanel { position: relative; flex: 1; min-width: 220px; min-height: 150px; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--c2) 5%, #f5f6fa); border: 1px solid var(--line); }
.bcap { position: absolute; left: 12px; top: 9px; font-size: 12px; color: var(--muted); pointer-events: none; z-index: 1; }
.bsvg { display: block; }
.bgrid { stroke: rgba(20,27,45,.1); stroke-width: 1; fill: none; } .btick { stroke: rgba(20,27,45,.25); stroke-width: 1; }
.blbl { fill: var(--muted); font-size: 10px; font-family: var(--num); }
.bcur { stroke: rgba(20,27,45,.35); stroke-width: 1; }
.bhub { fill: #fff; stroke: rgba(20,27,45,.12); } .bhubi { stroke: var(--muted); }
.blegend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.blegend span { display: inline-flex; align-items: center; gap: 6px; } .blegend i { width: 12px; height: 4px; border-radius: 2px; display: inline-block; }
.bhd { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .bhd h3 { margin: 0; font-size: 17px; }
.bhd .blegend { margin: 0; } .bhd .blegend i { height: 9px; width: 9px; border-radius: 2px; }
.bper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 12px; }
.bper button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 14px; cursor: pointer; transition: background .3s; min-width: 0; }
.bper button:hover { background: color-mix(in srgb, var(--c2) 8%, transparent); }
.bper button b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; } .bper button b i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: background .3s; }
.bper button[aria-pressed="true"] b i { background: #12b863; }
.bper .bnum { display: block; margin-top: 6px; font-family: var(--num); font-size: clamp(16px, 2.4vw, 25px); letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bper small { color: var(--muted); font-size: 12px; }
.bcard.c7:has(.btree) { display: flex; flex-direction: column; }
.btree { position: relative; flex: 1; min-height: 320px; margin-top: 4px; }
.btile { position: absolute; border-radius: 14px; padding: 9px 11px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  transition: left .8s cubic-bezier(.2,.9,.25,1), top .8s cubic-bezier(.2,.9,.25,1), width .8s cubic-bezier(.2,.9,.25,1), height .8s cubic-bezier(.2,.9,.25,1), filter .3s; }
.btile:hover { filter: brightness(1.08); }
.btile .bn { font-size: 12.5px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.btile .bv { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; }
.btile .bv span { font-family: var(--num); letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.btile .bv em { font-style: normal; font-family: var(--num); font-size: 10.5px; background: rgba(0,0,0,.78); color: #fff; padding: 3px 5px; border-radius: 6px; }
.bseg { display: inline-flex; padding: 2px; border-radius: 10px; background: color-mix(in srgb, var(--c2) 10%, #eef0f5); }
.bseg button { border: 0; background: none; padding: 5px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; transition: background .3s, color .3s; }
.bseg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(20,27,45,.08), 0 0 0 1px var(--line); }
.brad { margin: 6px auto 0; width: 100%; max-width: 420px; min-height: 280px; }
.brad .radar { margin: 0 auto; }
.bstats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.bstat { font-family: var(--num); font-size: clamp(20px, 2.6vw, 28px); letter-spacing: -.04em; margin-top: 6px; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.brw { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; margin-top: 0; }
.brw:first-child { margin-top: 12px; } .brw b { font-family: var(--num); font-weight: 500; }
.btip { position: fixed; z-index: 130; pointer-events: none; opacity: 0; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; white-space: nowrap; background: rgba(255,255,255,.96); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -14px rgba(20,27,45,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .15s; }
.btip.on { opacity: 1; } .btip .tt { color: var(--muted); margin-bottom: 4px; }
.btip .tr { display: flex; justify-content: space-between; gap: 14px; } .btip .tr span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .btip .tr i { width: 8px; height: 8px; border-radius: 2px; }
.btip .tr b { font-family: var(--num); font-weight: 500; }
@media (max-width: 640px) { .bcard { padding: 18px 16px; border-radius: 24px; } .btree { min-height: 280px; } .bhead { min-width: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .bcard.enter { animation: none; } .btile { transition: none; } }

/* ---------- ปรับให้กลมกล่อม: สดแต่ไม่แสบ ลดของตกแต่งที่ไม่ช่วยงาน ---------- */
.hero { background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 92%, var(--c4)) 0%, var(--c1) 45%, var(--c2) 130%); }
#bg .aur i { opacity: .28; filter: blur(80px); }
.hero .deco .o1 { opacity: .55; } .hero .deco .o3 { opacity: .5; }
.hero::after { opacity: .6; }
@media (min-width: 960px) { .quick { display: none; } }
.bsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 12px; }
.bsum.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bnum2 { font-family: var(--num); font-size: clamp(20px, 2.6vw, 28px); letter-spacing: -.04em; margin-top: 6px; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bnum2.g { color: #079a55; } .bnum2.r { color: #e8173f; }
.bsum .bd { margin: 6px 0 0; vertical-align: baseline; font-size: 12.5px; display: block; }
.bpanel.tall { min-height: 210px; height: 210px; flex: none; }
.blbl.now { fill: var(--c1); font-weight: 700; }
@media (max-width: 640px) { .bsum { grid-template-columns: 1fr 1fr; } .bsum > :last-child { grid-column: 1 / -1; } }

/* ---------- หน้ารายงาน (ภาพรวม) ---------- */
.wstrip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -2px 0 14px; }
.wl { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 2px; } .wl.ok { color: #079a55; }
.wchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.8); border-radius: 999px; padding: 6px 14px 6px 11px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .35s var(--spring), box-shadow .3s; }
.wchip:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -14px var(--c1); }
.wchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c1); }
.wchip.draft i { background: #ffb020; } .wchip.wait i { background: #ffa63d; } .wchip.pay i { background: #3b9bff; }
.rseg { margin-top: 0; }
.rhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .rhead h2 { margin: 0 !important; }
.rfil { display: flex; gap: 10px; flex-wrap: wrap; }
.f.inl { flex-direction: row; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; } .f.inl select, .f.inl input { width: auto; min-width: 150px; }
.rsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.rsum > div { padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--c2) 7%, #fff); border: 1px solid var(--line); min-width: 0; }
.rsum span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rsum b { font-size: clamp(16px, 2.2vw, 22px); font-weight: 600; overflow-wrap: anywhere; } .rsum b.g { color: #079a55; } .rsum b.r { color: #e8173f; }
.rt { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rt th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--c2) 6%, #fff); position: sticky; top: 0; white-space: nowrap; }
.rt td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rt td.doc { white-space: normal; min-width: 180px; } .rt td.doc small { color: var(--muted); }
.rt .money { text-align: right; } .rt th.money { text-align: right; } .rt .zero { color: #b6bccb; }
.rt .b { font-weight: 700; color: #079a55; } .rt .neg { color: #e8173f; }
.rt tr:hover td { background: color-mix(in srgb, var(--c2) 5%, #fff); }
.rt tr.now td:first-child { box-shadow: inset 3px 0 0 var(--c1); font-weight: 700; } .rt tr.open td { background: #fafbfd; color: var(--muted); }
.rt .sum-row td { font-weight: 800; background: color-mix(in srgb, var(--c2) 11%, #fff); border-top: 2px solid var(--c1); }
.rt .led td.doc { min-width: 220px; }
@media (max-width: 640px) { .rsum { grid-template-columns: 1fr 1fr; } .rt { font-size: 13.5px; } }

/* ---------- พื้นหลัง: กระจกเหลวลอย (เบา ๆ ไม่แย่งเนื้อหา) ---------- */
#bg .liq { position: absolute; inset: 0; }
#bg .liq i { position: absolute; display: block; border: 1px solid rgba(255,255,255,.75); will-change: transform, border-radius;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.7), rgba(255,255,255,.12) 55%), linear-gradient(145deg, color-mix(in srgb, var(--c2) 22%, transparent), color-mix(in srgb, var(--c3) 20%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -14px 30px -18px color-mix(in srgb, var(--c1) 40%, transparent), 0 24px 50px -34px var(--c1);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: .6; }
#bg .liq i:nth-child(1) { width: 230px; height: 230px; right: 5%; top: 38%; animation: morph 17s ease-in-out infinite alternate, lift1 26s ease-in-out infinite alternate; }
#bg .liq i:nth-child(2) { width: 150px; height: 150px; left: 2%; top: 62%; animation: morph 21s ease-in-out -6s infinite alternate, lift2 30s ease-in-out infinite alternate; }
#bg .liq i:nth-child(3) { width: 90px; height: 90px; left: 44%; top: 82%; animation: morph 14s ease-in-out -3s infinite alternate, lift1 22s ease-in-out infinite alternate; }
#bg .liq i:nth-child(4) { width: 300px; height: 300px; left: -90px; top: 28%; opacity: .38; animation: morph 25s ease-in-out -9s infinite alternate, lift2 34s ease-in-out infinite alternate; }
#bg .liq i:nth-child(5) { width: 120px; height: 120px; right: 26%; top: 70%; opacity: .5; animation: morph 19s ease-in-out -12s infinite alternate, lift1 28s ease-in-out infinite alternate; }
@keyframes morph { 0% { border-radius: 58% 42% 36% 64% / 52% 38% 62% 48%; } 33% { border-radius: 38% 62% 56% 44% / 62% 50% 50% 38%; } 66% { border-radius: 64% 36% 44% 56% / 40% 62% 38% 60%; } 100% { border-radius: 46% 54% 62% 38% / 56% 44% 56% 44%; } }
@keyframes lift1 { to { transform: translate(-28px, -34px) rotate(16deg); } }
@keyframes lift2 { to { transform: translate(34px, -26px) rotate(-18deg); } }
#bg .liq { transform: translateY(calc(var(--sy, 0) * -0.03px)); }
@media (max-width: 640px) { #bg .liq i:nth-child(1) { width: 150px; height: 150px; } #bg .liq i:nth-child(4) { width: 180px; height: 180px; } }

/* ---------- hero: กระจกเหลว เรขาคณิต ทรงกลม ขยับตามเมาส์ ---------- */
.hero .deco > * { --px: calc(var(--mx, 0) * 1px); --py: calc(var(--my, 0) * 1px); }
.hero .deco .blob { position: absolute; border: 1.5px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); will-change: transform, border-radius;
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.65), rgba(255,255,255,.08) 62%), linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -18px 34px -20px rgba(0,0,0,.28), 0 30px 50px -30px rgba(0,0,0,.4); }
.hero .deco .bl1 { width: 210px; height: 210px; right: 7%; top: -40px; animation: morph 13s ease-in-out infinite alternate; translate: calc(var(--mx, 0) * -26px) calc(var(--my, 0) * -18px); transition: translate .6s cubic-bezier(.22,1,.36,1); }
.hero .deco .bl2 { width: 130px; height: 130px; right: 30%; bottom: -46px; animation: morph 16s ease-in-out -5s infinite alternate; translate: calc(var(--mx, 0) * 34px) calc(var(--my, 0) * 22px); transition: translate .6s cubic-bezier(.22,1,.36,1); opacity: .9; }
.hero .deco .sph { position: absolute; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 32% 26%, #fff 0 7%, rgba(255,255,255,.65) 15%, rgba(255,255,255,.16) 52%, rgba(255,255,255,.05) 78%);
  border: 1px solid rgba(255,255,255,.6); box-shadow: inset -8px -12px 22px rgba(0,0,0,.16), 0 18px 28px -16px rgba(0,0,0,.5); }
.hero .deco .s1 { width: 64px; height: 64px; right: 21%; top: 26px; animation: bob 7s ease-in-out infinite alternate; translate: calc(var(--mx, 0) * 40px) calc(var(--my, 0) * 28px); transition: translate .5s cubic-bezier(.22,1,.36,1); }
.hero .deco .s2 { width: 34px; height: 34px; right: 4%; bottom: 34px; animation: bob 9s -2s ease-in-out infinite alternate; translate: calc(var(--mx, 0) * -48px) calc(var(--my, 0) * -30px); transition: translate .5s cubic-bezier(.22,1,.36,1); }
.hero .deco .s3 { width: 20px; height: 20px; right: 41%; top: 18px; animation: bob 6s -4s ease-in-out infinite alternate; translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 38px); transition: translate .5s cubic-bezier(.22,1,.36,1); }
@keyframes bob { to { transform: translateY(-16px) scale(1.06); } }
.hero .deco svg.ring { position: absolute; right: 2%; top: -50px; width: 260px; height: 260px; opacity: .8; animation: heroSpin 60s linear infinite; }
.hero .deco svg.ring circle { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.2; stroke-dasharray: 2 7; } .hero .deco svg.ring circle:nth-child(2) { stroke-dasharray: none; stroke: rgba(255,255,255,.25); }
.hero .deco svg.ring .dot { fill: #fff; stroke: none; filter: drop-shadow(0 0 6px #fff); }
.hero .deco svg.geo { right: -30px; top: -20px; }
@media (max-width: 640px) { .hero .deco .bl1 { width: 130px; height: 130px; right: -20px; top: -30px; } .hero .deco .bl2, .hero .deco .s3 { display: none; } .hero .deco svg.ring { width: 170px; height: 170px; right: -30px; top: -30px; } .hero .deco .s1 { width: 40px; height: 40px; right: 16%; top: 14px; } }
@media (prefers-reduced-motion: reduce) { #bg .liq i, .hero .deco .blob, .hero .deco .sph, .hero .deco svg.ring { animation: none !important; } }

/* ---------- hero: ฉากเฉพาะแต่ละแท็บ (แบน บางเบา) ---------- */
.hero .deco .blob, .hero .deco .sph, .hero .deco svg.ring, .hero .deco svg.geo { display: none; }
.hero .deco svg.scene { position: absolute; right: 0; top: 0; width: min(62%, 640px); height: 100%; opacity: 1; animation: none; transform: none; overflow: visible; }
.hero .deco svg.scene * { transform-box: fill-box; }
.hero .deco svg.scene > * { animation: none; }
.hero .deco svg.scene > g.par { transform: translate(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -9px)); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.hero .deco svg.scene .ln { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero .deco svg.scene .dash { stroke-dasharray: 2 8; stroke: rgba(255,255,255,.45); }
.hero .deco svg.scene .gl, .hero .deco svg.scene .gcard, .hero .deco svg.scene .gbar, .hero .deco svg.scene .slat, .hero .deco svg.scene .gpill, .hero .deco svg.scene .drop, .hero .deco svg.scene .knob, .hero .deco svg.scene .gear { stroke-opacity: 1; }
.hero .deco svg.scene .gl, .hero .deco svg.scene .gcard, .hero .deco svg.scene .gbar, .hero .deco svg.scene .slat, .hero .deco svg.scene .gpill, .hero .deco svg.scene .drop, .hero .deco svg.scene .knob { stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.hero .deco svg.scene .dotw { fill: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,.9)); }
/* ภาพรวม */
.k-overview .spin { transform-origin: 430px 150px; transform-box: view-box; animation: heroSpin 80s linear infinite; }
.k-overview .orbit { transform-origin: 430px 150px; transform-box: view-box; animation: heroSpin 16s linear infinite; }
.k-overview .gauge { stroke-width: 6; stroke-opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 0; animation: gauge 7s ease-in-out infinite alternate; }
.k-overview .spark { stroke-dasharray: 1; animation: draw 6s ease-in-out infinite alternate; stroke-width: 2.5; stroke: #fff; }
.k-overview .gcard { animation: bob 8s ease-in-out infinite alternate; } .k-overview .c2 { animation-duration: 10s; animation-delay: -3s; } .k-overview .c3 { animation-duration: 7s; animation-delay: -1s; }
@keyframes gauge { from { stroke-dashoffset: .55; } to { stroke-dashoffset: 0; } }
@keyframes draw { from { stroke-dashoffset: .7; } to { stroke-dashoffset: 0; } }
/* รายรับ */
.k-income .gbar { transform-origin: 50% 100%; animation: barGrow 4.4s ease-in-out infinite alternate; }
.k-income .trend { stroke-dasharray: 1; stroke: #fff; stroke-width: 2.6; animation: draw 5s ease-in-out infinite alternate; }
.k-income .drop { animation: dropUp 6s ease-in infinite; } .k-income .d2 { animation-delay: -2s; } .k-income .d3 { animation-delay: -4s; animation-duration: 8s; } .k-income .d4 { animation-delay: -1s; animation-duration: 7s; }
@keyframes barGrow { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes dropUp { 0% { transform: translateY(40px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
/* รายจ่าย */
.k-expense .slat { animation: slide 9s ease-in-out infinite alternate; }
.k-expense .gflow { stroke-dasharray: 3 11; stroke: #fff; stroke-width: 2.4; animation: flow 3.2s linear infinite; } .k-expense .gf2 { stroke-width: 1.5; stroke-opacity: .6; animation-duration: 4.5s; }
.k-expense .gpill { animation: slide 6s ease-in-out infinite alternate; }
@keyframes slide { from { transform: translateX(-16px); } to { transform: translateX(22px); } }
@keyframes flow { to { stroke-dashoffset: -28; } }
/* ตั้งค่า */
.k-settings .gear { transform-origin: 50% 50%; animation: heroSpin 46s linear infinite; } .k-settings .gear.rev { animation-direction: reverse; animation-duration: 32s; }
.k-settings .rays { stroke: rgba(255,255,255,.28); stroke-width: 1.2; transform-origin: 450px 150px; transform-box: view-box; animation: heroSpin 120s linear infinite; }
.k-settings .trk { stroke: rgba(255,255,255,.5); stroke-width: 3; stroke-linecap: round; }
.k-settings .knob { animation: knob 5s ease-in-out infinite alternate; } .k-settings .k1 { animation-duration: 7s; animation-delay: -2s; } .k-settings .k2 { animation-duration: 6s; animation-delay: -4s; }
@keyframes knob { from { transform: translateX(0); } to { transform: translateX(86px); } }
.hero .deco .o1 { right: -30px; top: -80px; } 
.k-income .o2 { background: radial-gradient(circle, #d6ffe9, transparent 70%); } .k-expense .o2 { background: radial-gradient(circle, #ffd2da, transparent 70%); } .k-settings .o2 { background: radial-gradient(circle, #fff2b8, transparent 70%); }
@media (max-width: 640px) { .hero .deco svg.scene { width: 92%; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .hero .deco svg.scene * { animation: none !important; } }

/* ---------- hero: เมชเกรเดียนต์หลายสี + คลื่นกระจกเหลวแบบแบน ---------- */
:root { --h1: #00b8ff; --h2: #7a5cff; --h3: #64e3ff; --h4: #2e6bff; }
body[data-tab="income"] { --h1: #00c2a0; --h2: #a6e81c; --h3: #86ffc4; --h4: #00a86b; }
body[data-tab="expense"] { --h1: #ff3d7f; --h2: #ff8a3d; --h3: #ffa3bd; --h4: #c4116b; }
body[data-tab="settings"] { --h1: #ffd000; --h2: #ff6b3d; --h3: #fff0a0; --h4: #ff9a00; }
.hero { background: linear-gradient(115deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 58%, var(--h1)) 58%, var(--h1) 130%); }
.hero::before { content: ""; position: absolute; inset: -25%; z-index: -2; pointer-events: none; will-change: transform;
  background:
    radial-gradient(38% 46% at 82% 18%, color-mix(in srgb, var(--h3) 85%, transparent), transparent 70%),
    radial-gradient(34% 48% at 66% 92%, color-mix(in srgb, var(--h2) 70%, transparent), transparent 72%),
    radial-gradient(40% 50% at 96% 78%, color-mix(in srgb, var(--h4) 80%, transparent), transparent 70%),
    radial-gradient(30% 42% at 30% 105%, color-mix(in srgb, var(--h1) 55%, transparent), transparent 72%);
  animation: mesh 20s ease-in-out infinite alternate; }
@keyframes mesh { 0% { transform: translate(0, 0) rotate(0) scale(1); } 50% { transform: translate(-4%, 3%) rotate(5deg) scale(1.08); } 100% { transform: translate(3%, -3%) rotate(-4deg) scale(1.04); } }
.hero .deco svg.wave { position: absolute; left: 0; bottom: -2px; width: 200%; height: 62%; opacity: 1; animation: waveMove 26s linear infinite; transform: none; }
.hero .deco svg.wave path { stroke: rgba(255,255,255,.55); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.hero .deco svg.wave.w2 { height: 52%; opacity: .75; animation-duration: 38s; animation-direction: reverse; }
.hero .deco svg.wave.w2 path { stroke: rgba(255,255,255,.35); }
@keyframes waveMove { to { transform: translateX(-50%); } }
.hero .deco .orb { mix-blend-mode: normal; filter: blur(30px); opacity: .5; }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero .deco svg.wave { animation: none !important; } }

/* ---------- hero v3: ป้ายกระจกพร้อมไอคอน ---------- */
.hero .deco svg.scene .gbadge rect { stroke: rgba(255,255,255,.6); stroke-width: 1.2; }
.hero .deco svg.scene .gbadge .hl { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.4; stroke-linecap: round; }
.hero .deco svg.scene .ic { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.hero .deco svg.scene .gbadge { animation: bob 7s ease-in-out infinite alternate; } .hero .deco svg.scene .gbadge.b2 { animation-duration: 9s; } .hero .deco svg.scene .gbadge.b3 { animation-duration: 8s; }
.hero .deco svg.scene .spin2 { transform-origin: 50% 50%; animation: heroSpin 50s linear infinite; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-9px); } }
/* ---------- เมนูล่างบนมือถือ ---------- */
.bnav { display: none; }
@media (max-width: 959px) {
  .shell > .wrap > .tabs { display: none; }
  body.authed .bnav { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; gap: 2px; padding: 6px;
    border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.78)); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 40px -18px rgba(20,27,45,.45), 0 0 0 1px var(--line); }
  .bn { position: relative; flex: 1; min-width: 0; border: 0; background: none; border-radius: 16px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); transition: background .35s, color .3s, transform .35s var(--spring); }
  .bn svg { width: 22px; height: 22px; } .bn:active { transform: scale(.94); }
  .bn[data-tab="overview"] { --t: #1262f0; } .bn[data-tab="income"] { --t: #079a55; } .bn[data-tab="expense"] { --t: #f26a00; } .bn[data-tab="settings"] { --t: #7a4dff; } .bn[data-tab="request"] { --t: #0891b2; } .bn[data-tab="approve"] { --t: #d81b72; }
  .bn[aria-current="page"] { color: var(--t); background: color-mix(in srgb, var(--t) 13%, #fff); }
  .bn em { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--t); color: #fff; font-style: normal; font-size: 11px; display: grid; place-items: center; }
  main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  #toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .top { padding-top: 12px; }
  .hero { padding: 18px 18px 16px; border-radius: 24px; }
  .hero .big { font-size: clamp(30px, 9.5vw, 42px); }
}
/* ---------- แตะง่าย อ่านง่าย ---------- */
@media (pointer: coarse) { input, select, textarea { min-height: 46px; font-size: 16px; } .btn { min-height: 46px; } .btn.sm { min-height: 40px; } }
input:focus-visible, select:focus-visible { outline: none; }
label.f { font-weight: 600; }
/* ---------- การ์ดพับได้ (หน้าตั้งค่า) ---------- */
.chd { cursor: pointer; user-select: none; position: relative; padding-right: 34px; transition: color .3s; }
.chd:hover { color: var(--c1); }
.chd::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2.4px solid var(--c1); border-bottom: 2.4px solid var(--c1); transform: translateY(-70%) rotate(-135deg); transition: transform .4s var(--spring); }
.card.col .chd::after { transform: translateY(-70%) rotate(45deg); }
.card.col > h2 { margin-bottom: 0; }
.cwrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1), opacity .4s; }
.cbody { min-height: 0; overflow: hidden; }
.card.col .cwrap { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.card.col .cbody { visibility: hidden; transition: visibility 0s .5s; }

.hero .deco svg.scene { top: -26%; height: 152%; right: -2%; }
@media (max-width: 640px) { .hero .deco svg.scene { opacity: .4; width: 96%; top: -20%; height: 140%; } }
body[data-tab="settings"] .hero { min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
body[data-tab="settings"] .hero .deco svg.scene { right: 2%; }

/* ================= แถบนำทางล่าง: กระจกเหลวแบบแบน (ทุกขนาดจอ) ================= */
.side { display: none !important; }
.shell, .shell > .wrap { display: block; }
.shell > .wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.shell > .wrap > .tabs { display: none !important; }
.shell > .wrap > .top .brand { display: flex !important; }
.shell > .wrap > .top { justify-content: flex-start !important; }
.shell > .wrap > main, .shell > .wrap > .top { max-width: none; width: auto; }
main { padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important; }
body.authed .bnav { position: fixed; left: 50%; translate: -50% 0; width: min(560px, calc(100% - 20px)); right: auto; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: stretch; gap: 2px; padding: 6px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); -webkit-backdrop-filter: blur(22px) saturate(1.8) brightness(1.04); backdrop-filter: blur(22px) saturate(1.8) brightness(1.04);
  border: 1px solid transparent; background-clip: padding-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55), 0 14px 34px -20px rgba(20,27,45,.5); animation: dockIn .9s cubic-bezier(.22,1,.36,1) both; }
body.authed .bnav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.1) 40%, rgba(255,255,255,.7) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes dockIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.bnav .bpill { position: absolute; top: 6px; bottom: 6px; left: 6px; width: 0; border-radius: 20px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 88%, #fff), var(--c1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -10px var(--c1); transition: transform .6s var(--spring), width .6s var(--spring), background .6s; }
.bnav .bn { position: relative; z-index: 1; flex: 1; min-width: 0; min-height: 54px; border: 0; background: none; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--ink2); padding: 6px 4px; transition: color .35s, transform .35s var(--spring); }
.bnav .bn svg { width: 22px; height: 22px; } .bnav .bn:hover { color: var(--ink); } .bnav .bn:active { transform: scale(.94); }
.bnav .bn[aria-current="page"] { color: #fff; background: none; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.bnav .bn em { position: absolute; top: 4px; right: calc(50% - 24px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e8173f; color: #fff; font-style: normal; font-size: 11px; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.bnav .bsep { width: 1px; margin: 10px 4px; background: rgba(20,27,45,.12); flex: none; }
.bnav .bn.add { flex: 0 0 64px; color: var(--c1); } .bnav .bn.add svg { width: 24px; height: 24px; transition: transform .45s var(--spring); } .bnav .bn.add[aria-expanded="true"] svg { transform: rotate(135deg); }
.addmenu { position: fixed; z-index: 75; left: 50%; translate: -50% 0; bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 82px); width: min(330px, calc(100% - 28px)); padding: 8px; border-radius: 24px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 22px 44px -22px rgba(20,27,45,.55); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96); transform-origin: 50% 100%; transition: opacity .25s, transform .45s var(--spring), visibility 0s .45s; }
.addmenu.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.addmenu button { display: flex; align-items: center; gap: 12px; border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 16px; cursor: pointer; transition: background .25s; }
.addmenu button:hover, .addmenu button:focus-visible { background: color-mix(in srgb, var(--c2) 12%, transparent); outline: none; }
.addmenu i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(180deg, var(--c2), var(--c1)); } .addmenu i svg { width: 20px; height: 20px; }
.addmenu b { display: block; font-size: 15px; } .addmenu small { color: var(--muted); font-size: 12.5px; }
#toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 420px) { .bnav .bn { font-size: 11.5px; } .bnav .bn.add { flex-basis: 52px; } }
@media (prefers-reduced-motion: reduce) { body.authed .bnav { animation: none; } }

/* ================= แถบนำทาง: อยู่ใต้ hero แล้วค้างด้านบนตอนเลื่อน ================= */
main { padding-bottom: 96px !important; }
body.authed .bnav { position: sticky !important; top: max(8px, env(safe-area-inset-top, 0px)); left: auto !important; right: auto !important; bottom: auto !important; translate: none !important; width: 100% !important; max-width: 780px; margin: 0 auto 18px; animation: navIn .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes navIn { from { opacity: 0; transform: translateY(-10px); } }
#toast { bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; }
.addmenu { bottom: auto !important; translate: none !important; transform-origin: 100% 0; transform: translateY(-10px) scale(.96); }
.addmenu.on { transform: none; }
@media (max-width: 959px) { body.authed .bnav { max-width: none; } main { padding-bottom: 40px !important; } }

/* ================= ตารางกรอกแบบ Excel ================= */
.xcard { padding: 18px 18px 14px; }
.xbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.xtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xl { overflow: auto; max-height: min(68vh, 760px); border: 1px solid #b9c0cf; border-radius: 10px; background: #fff; }
.xlt { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 14.5px; table-layout: fixed; }
.xlt th, .xlt td { border-right: 1px solid #dfe3ec; border-bottom: 1px solid #dfe3ec; padding: 0; height: 33px; }
.xlt thead th { position: sticky; background: #eef1f7; color: #3f4859; font-weight: 700; z-index: 3; text-align: center; font-size: 13px; }
.xlt thead tr.ltr th { top: 0; height: 22px; font-weight: 500; color: #8a93a6; font-size: 12px; }
.xlt thead tr.lbl th { top: 22px; height: 34px; padding: 0 8px; white-space: nowrap; box-shadow: 0 1px 0 #b9c0cf; background: color-mix(in srgb, var(--c2) 10%, #eef1f7); color: var(--ink); }
.xlt th.rn { position: sticky; left: 0; z-index: 4; background: #eef1f7; color: #8a93a6; font-weight: 500; font-size: 12.5px; text-align: center; width: 46px; }
.xlt thead th.rn { z-index: 6; }
.xlt tbody th.rn { z-index: 2; }
.xlt tr.cur th.rn { background: color-mix(in srgb, var(--c2) 22%, #eef1f7); color: var(--c1); font-weight: 700; }
.xlt td.xc { position: relative; }
.xlt td.xc input { display: block; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; background: transparent; padding: 0 9px; font-size: 14.5px; box-shadow: none; text-overflow: ellipsis; }
.xlt td.xc input:focus { outline: 2px solid var(--c1); outline-offset: -2px; background: #fff; box-shadow: none; z-index: 1; position: relative; }
.xlt td.mn input, .xlt td.mn span { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.xlt td.ro { background: #f7f8fb; color: #5b6272; }
.xlt td.ro span { display: block; padding: 0 9px; line-height: 33px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xlt td.ro input { color: #5b6272; cursor: default; }
.xlt td.bad { background: #ffe9ed !important; box-shadow: inset 0 0 0 1.5px #e8173f; }
.xlt tr.cur td.xc:not(.ro):not(.bad) { background: color-mix(in srgb, var(--c2) 6%, #fff); }
.xlt tr.pre td, .xlt tr.pre th { height: 29px; color: #6c7384; font-size: 13.5px; }
.xlt tr.pre td.ro { background: #fafbfd; } .xlt tr.pre td.ro span { line-height: 29px; }
.xlt tr.sepr td { background: color-mix(in srgb, var(--c2) 12%, #fff); color: var(--c1); font-weight: 700; padding: 6px 12px; font-size: 13px; height: 30px; border-top: 2px solid var(--c1); }
.xlt .rx { position: absolute; inset: 0; opacity: 0; border: 0; background: #ffe9ed; color: #e8173f; cursor: pointer; font-size: 17px; font-weight: 700; transition: opacity .15s; }
.xlt tbody tr:not(.pre):hover .rx { opacity: 1; } .xlt tbody tr:not(.pre):hover th.rn span { opacity: 0; }
.xlt tfoot th, .xlt tfoot td { position: sticky; bottom: 0; background: #eef1f7; font-weight: 700; z-index: 3; padding: 0 9px; height: 34px; border-top: 1.5px solid #b9c0cf; border-bottom: 0; }
.xlt tfoot .mn { text-align: right; font-family: var(--num); } .xlt tfoot .tl { color: var(--muted); font-weight: 600; }
.xstat { min-height: 22px; margin-top: 8px; font-size: 13.5px; color: var(--c1); font-weight: 700; }

/* ---------- ตารางครบวงจร ขบ. → ขจ. → จ่าย ---------- */
.xflow { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--c2) 7%, #fff); border: 1px solid var(--line); }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--ink2); transition: background .3s, color .3s, transform .3s var(--spring); }
.fchip b { font-family: var(--num); margin-left: 4px; }
.fchip[aria-pressed="true"] { background: linear-gradient(180deg, var(--c2), var(--c1)); color: #fff; border-color: transparent; }
.fchip:active { transform: scale(.95); }
.fact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fstep { font-weight: 700; color: var(--c1); font-size: 13.5px; }
.xlt td.chk { text-align: center; background: #f7f8fb; }
.xlt td.chk input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--c1); cursor: pointer; }
.xlt thead th input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; accent-color: var(--c1); vertical-align: middle; cursor: pointer; }
.xlt tr.old.st-wait td.xc { background: #fff; color: var(--ink); }
.xlt tr.old.st-wait td.xc.ro { background: #fffaf0; }
.xlt tr.old.st-in td.xc.ro { background: #f4f8ff; }
.xlt tr.old.st-in td.xc:not(.ro) { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2) 35%, transparent); }
.xlt tr.old.st-paid td.xc { background: #f3faf6; color: #4b6b5b; }
.xlt tr.old.st-cancel td.xc { background: #f3f3f6; color: #9aa0ad; text-decoration: line-through; }
.xlt tr.old th.rn { box-shadow: inset 3px 0 0 transparent; }
.xlt tr.st-wait th.rn { box-shadow: inset 3px 0 0 #ffb020; } .xlt tr.st-in th.rn { box-shadow: inset 3px 0 0 #3b9bff; } .xlt tr.st-paid th.rn { box-shadow: inset 3px 0 0 #12b863; } .xlt tr.st-cancel th.rn { box-shadow: inset 3px 0 0 #b6bccb; }
.xlt tr.sel td.xc { background: color-mix(in srgb, var(--c2) 14%, #fff) !important; }
.xlt td.tag input { font-weight: 700; text-align: center; }
.xlt tr.st-wait td.tag input { color: #a35f00; } .xlt tr.st-in td.tag input { color: #1262f0; } .xlt tr.st-paid td.tag input { color: #079a55; }
.xlt tr.old td.xc { height: 31px; }


/* ================= v5: สีประจำแท็บใหม่ + hero เป็นแก้วใสที่มีของเหลวไหลช้า ๆ ภายใน ================= */
:root { --h1: #19c3ff; --h2: #6a7cff; --h3: #8fe8ff; --h4: #1d5dff; }
body[data-tab="income"] { --h1: #12d6a0; --h2: #b5f04a; --h3: #9bffd0; --h4: #0a9b5a; }
body[data-tab="expense"] { --h1: #ffb12e; --h2: #ff6a3d; --h3: #ffe08a; --h4: #e0480a; }
body[data-tab="settings"] { --h1: #4fa8ff; --h2: #ff6fc2; --h3: #d7b8ff; --h4: #8a4dff; }
.hero { background: linear-gradient(125deg, var(--c4) -30%, var(--c1) 38%, color-mix(in srgb, var(--c1) 45%, var(--h1)) 78%, var(--h1) 125%);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -22px 40px -26px rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 26px 48px -30px var(--c1); }
body[data-tab="settings"] .hero { background: linear-gradient(125deg, #5b2fe0 -20%, #7a4dff 30%, #5aa2ff 68%, #ff6fc2 128%); }
/* น้ำไหลในแก้ว: สามชั้นเลื่อนช้าไม่เท่ากัน + เมชสีไหลวน */
.hero .deco svg.wave { bottom: -6%; height: 78%; width: 200%; animation: waveMove 48s linear infinite, liqBob 11s ease-in-out infinite alternate; }
.hero .deco svg.wave path { stroke: rgba(255,255,255,.5); stroke-width: 1.2; }
.hero .deco svg.wave.w1 { height: 84%; animation-duration: 70s, 14s; animation-direction: reverse, alternate; }
.hero .deco svg.wave.w1 path { stroke: rgba(255,255,255,.22); }
.hero .deco svg.wave.w2 { height: 70%; opacity: 1; animation-duration: 56s, 10s; animation-direction: normal, alternate-reverse; }
.hero .deco svg.wave.w3 { height: 56%; opacity: .9; animation-duration: 40s, 8s; animation-direction: reverse, alternate; }
.hero .deco svg.wave.w3 path { stroke: rgba(255,255,255,.7); }
@keyframes liqBob { from { translate: 0 6px; } to { translate: 0 -12px; } }
.hero::before { animation-duration: 34s; filter: saturate(1.15); }
.hero .deco .o3 { background: radial-gradient(circle, color-mix(in srgb, var(--h2) 80%, transparent), transparent 70%); opacity: .55; filter: blur(38px); mix-blend-mode: normal; }
.hero::after { background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.2) 46%, rgba(255,255,255,.04) 54%, transparent 66%); background-size: 280% 100%; animation-duration: 14s; opacity: 1; }
/* รูปทรงเรขาคณิตกระจก */
.hero .deco svg.scene .gs { transform-box: fill-box; transform-origin: center; stroke: rgba(255,255,255,.62); stroke-width: 1.3; animation: gsA 16s ease-in-out infinite alternate; }
.hero .deco svg.scene .gs.g2 { animation-name: gsB; animation-duration: 21s; } .hero .deco svg.scene .gs.g3 { animation-name: gsC; animation-duration: 25s; }
.hero .deco svg.scene .gs.sp { animation: heroSpin 90s linear infinite; } .hero .deco svg.scene .gs.sp.rev { animation-direction: reverse; animation-duration: 60s; }
.hero .deco svg.scene .gs .ln, .hero .deco svg.scene .gs.slat { stroke: rgba(255,255,255,.6); }
.hero .deco svg.scene .slat { animation: gsB 20s ease-in-out infinite alternate; }
.hero .deco svg.scene circle.ln { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.3; } .hero .deco svg.scene circle.ln.dash { stroke-dasharray: 3 9; stroke-linecap: round; }
@keyframes gsA { to { transform: translate(-8px, -12px) rotate(8deg); } }
@keyframes gsB { to { transform: translate(10px, 8px) rotate(-10deg) scale(1.05); } }
@keyframes gsC { to { transform: translate(-6px, 12px) rotate(14deg) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .hero .deco svg.wave, .hero .deco svg.scene .gs { animation: none !important; } }


/* ================= v6: สามโหมด (ครู / การเงิน / ผู้บริหาร) + ขั้นอนุมัติ ขบ. ================= */
body[data-tab="request"] { --c1: #0891b2; --c2: #22c3e6; --c3: #b8f0fb; --c4: #05607a; --h1: #2ee6d6; --h2: #4d8dff; --h3: #a6f4ff; --h4: #0a6fb0; }
body[data-tab="approve"] { --c1: #d81b72; --c2: #ff5aa5; --c3: #ffc7e0; --c4: #9a0f50; --h1: #ff7a59; --h2: #b14dff; --h3: #ffc1dc; --h4: #e0006e; }
/* hero: องค์ประกอบน้อยลงแต่ชัดขึ้น */
.hero .deco svg.scene .gdots { opacity: .32; }
.hero .deco svg.scene path.ln.arc { stroke: rgba(255,255,255,.7); stroke-width: 1.6; stroke-linecap: round; fill: none; stroke-dasharray: 2 7; }
.hero .deco svg.scene path.ln.trail { stroke: rgba(255,255,255,.75); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; animation: trail 3.4s linear infinite; }
@keyframes trail { to { stroke-dashoffset: -40; } }
.hero .deco svg.scene .orbit { transform-origin: 466px 146px; transform-box: view-box; animation: heroSpin 26s linear infinite; }
.hero .deco svg.scene .dotw { fill: #fff; opacity: .9; }
/* ตัวสลับโหมด (admin) */
.modesw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.modesw button { border: 0; background: none; padding: 5px 11px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink2); cursor: pointer; transition: background .3s, color .3s; }
.modesw button[aria-pressed="true"] { background: linear-gradient(180deg, var(--c2), var(--c1)); color: #fff; }
/* สถานะใหม่: รออนุมัติ / ส่งกลับ / รอรับเรื่อง */
.badge.appr { background: #f1e9ff; color: #6a2fd6; } .badge.back { background: #ffe5ec; color: #b0124a; } .badge.ok { background: #e3f7ff; color: #046b8c; }
.xlt tr.old.st-appr td.xc { background: #faf7ff; color: #4b4560; } .xlt tr.old.st-back td.xc { background: #fff6f8; color: #6b4050; } .xlt tr.old.st-ok td.xc { background: #f3fbff; }
.xlt tr.st-appr th.rn { box-shadow: inset 3px 0 0 #8b5cf6; } .xlt tr.st-back th.rn { box-shadow: inset 3px 0 0 #e8336d; } .xlt tr.st-ok th.rn { box-shadow: inset 3px 0 0 #22b8e6; }
.xlt tr.st-appr td.tag input { color: #6a2fd6; } .xlt tr.st-back td.tag input { color: #b0124a; } .xlt tr.st-ok td.tag input { color: #046b8c; }
.xlt tr.fresh td.xc { animation: fresh 2.4s ease-out 1; }
@keyframes fresh { 0%, 30% { background: #fff1c9; } 100% { } }
.wchip.appr i { background: #8b5cf6; } .wchip.cloud i { background: #22b8e6; }
/* หน้ารายจ่าย: แถบย่อยสองชั้น */
.flow.f4 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
.seg2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; }
.seg2 button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: inherit; cursor: pointer; text-align: left; color: var(--ink); transition: background .35s, box-shadow .35s, transform .4s var(--spring); }
.seg2 button b { font-size: 16.5px; } .seg2 button small { font-size: 12.5px; color: var(--muted); }
.seg2 button:hover { transform: translateY(-2px); }
.seg2 button[aria-selected="true"] { background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 55%, var(--h1))); color: #fff; border-color: transparent; box-shadow: 0 14px 30px -18px var(--c1); }
.seg2 button[aria-selected="true"] small { color: rgba(255,255,255,.88); }
.seg2 em { position: absolute; top: 10px; right: 12px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #e8336d; color: #fff; font-style: normal; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.subseg { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.steps3 { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: s; color: var(--ink2); font-size: 13.5px; }
.steps3 li { counter-increment: s; display: flex; gap: 6px; align-items: center; }
.steps3 li::before { content: counter(s); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--c1); flex: none; }
.chkline { display: inline-flex; gap: 7px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--ink2); cursor: pointer; white-space: nowrap; }
.chkline input { width: 17px; height: 17px; min-height: 0; margin: 0; accent-color: var(--c1); }
.warnline { color: #9a4b00; background: #fff5e2; padding: 8px 12px; border-radius: 12px; }
/* ขจ.: เรื่องที่อนุมัติแล้วลอยรอบนคลาวด์ */
.cloud { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 18px; margin-bottom: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, #22b8e6 16%, #fff), #fff 60%); border: 1px solid color-mix(in srgb, #22b8e6 22%, transparent); box-shadow: 0 18px 40px -30px #0a6fb0; }
.cloud.empty { padding: 14px 18px; text-align: left; border-style: solid; }
.cl-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cl-sky i { position: absolute; border-radius: 999px; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); animation: cloudDrift 38s linear infinite; }
.cl-sky i:nth-child(1) { width: 260px; height: 90px; top: 8px; left: -260px; }
.cl-sky i:nth-child(2) { width: 200px; height: 70px; top: 60%; left: -200px; animation-duration: 52s; animation-delay: -18s; }
.cl-sky i:nth-child(3) { width: 320px; height: 110px; top: 30%; left: -320px; animation-duration: 64s; animation-delay: -40s; opacity: .7; }
@keyframes cloudDrift { to { transform: translateX(calc(100vw + 400px)); } }
.cl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #22b8e6, #2e6bff); box-shadow: 0 10px 22px -12px #2e6bff; flex: none; }
.cl-ic svg { width: 24px; height: 24px; }
.cl-t { flex: 1; min-width: 200px; } .cl-t h2 { margin: 0; font-size: 18px; } .cl-t p { margin: 2px 0 0; color: var(--ink2); font-size: 14px; }
.cl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.cl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 30px -22px #0a6fb0, inset 0 1px 0 #fff;
  animation: floaty 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); transition: opacity .4s, transform .45s var(--ease); }
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.cl-card:hover, .cl-card:focus-within { animation-play-state: paused; }
.cl-card.gone { animation: none; opacity: 0; transform: translateY(40px) scale(.92); }
.cl-open { position: absolute; inset: 0; border: 0; background: none; border-radius: inherit; cursor: pointer; }
.cl-card > *:not(.cl-open) { position: relative; pointer-events: none; } .cl-card .cl-take { pointer-events: auto; }
.cl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-card .no { font-size: 16px; } .cl-who { font-weight: 700; color: var(--ink2); font-size: 14px; }
.cl-sum { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-amt { font-family: var(--num); font-size: 20px; font-weight: 600; color: #046b8c; }
.cl-ap { font-size: 12.5px; color: #046b8c; background: #e8f8ff; border-radius: 10px; padding: 4px 8px; }
.cl-take { align-self: flex-end; margin-top: 2px; }
/* แถบขั้นตอน 5 ขั้น */
.stp { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.stp li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 0 4px; min-width: 0; }
.stp li::before { content: ""; position: absolute; top: 9px; right: 50%; width: 100%; height: 3px; background: #e6e8ef; z-index: 0; }
.stp li:first-child::before { display: none; }
.stp li.done::before, .stp li.cur::before, .stp li.back::before { background: var(--c1); }
.stp i { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #d9dce5; transition: background .4s, border-color .4s; }
.stp li.done i { background: var(--c1); border-color: var(--c1); box-shadow: inset 0 0 0 3px #fff; }
.stp li.cur i { border-color: var(--c1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c1) 18%, transparent); animation: pulse 2.2s ease-in-out infinite; }
.stp li.back i { border-color: #e8336d; background: #e8336d; box-shadow: 0 0 0 5px #ffe0ea; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c1) 6%, transparent); } }
.stp b { font-size: 12.5px; line-height: 1.3; color: var(--ink2); } .stp li.done b, .stp li.cur b { color: var(--ink); } .stp li.back b { color: #b0124a; }
.stp small { font-size: 11.5px; color: var(--muted); min-height: 1.2em; overflow-wrap: anywhere; }
/* โหมดครู */
.tiles.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile.on { background: rgba(255,255,255,.34); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }
.tile .v small { font-size: 13px; opacity: .85; font-family: var(--font); }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-radius: 22px; margin: 0 0 14px; }
.cta h2 { margin: 0; } .cta .hint { margin: 2px 0 0; max-width: 60ch; }
.btn.big { min-height: 52px; padding: 0 24px; font-size: 16.5px; border-radius: 16px; }
.rqf { margin: 0 0 12px; }
.rqlist { display: grid; gap: 12px; }
.rq { padding: 16px 18px; border-radius: 22px; }
.rq header, .ap header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rq .no, .ap .no { font-size: 17px; } .rq .meta, .ap .meta { color: var(--muted); font-size: 13.5px; }
.rq-amt, .ap-amt { font-family: var(--num); font-size: 21px; font-weight: 600; color: var(--c1); }
.rq-sub { margin: 4px 0 0; color: var(--ink2); font-size: 14px; overflow-wrap: anywhere; }
.rq-back { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff0f4; color: #7d0f37; border: 1px solid #ffd0de; font-size: 14px; }
.rq footer, .ap footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; justify-content: flex-end; }
.rq.is-back { box-shadow: inset 4px 0 0 #e8336d, 0 16px 32px -26px #e8336d; }
.rq.cancel { opacity: .6; }
/* โหมดผู้บริหาร */
.apbar { position: sticky; top: 94px; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 18px; margin: 0 0 12px; }
.aplist { display: grid; gap: 12px; margin-bottom: 16px; }
.ap { display: flex; gap: 12px; padding: 16px 18px; border-radius: 22px; transition: opacity .4s, transform .45s var(--ease), box-shadow .3s; }
.ap.sel { box-shadow: inset 0 0 0 2px var(--c1), 0 16px 32px -24px var(--c1); }
.ap.gone { opacity: 0; transform: translateX(60px) scale(.97); } .ap.gone.back { transform: translateX(-60px) scale(.97); }
.ap-chk { padding-top: 4px; } .ap-chk input { width: 20px; height: 20px; min-height: 0; accent-color: var(--c1); cursor: pointer; }
.ap-main { flex: 1; min-width: 0; }
.ap-who { margin: 4px 0 8px; color: var(--ink2); font-size: 14px; overflow-wrap: anywhere; }
.ap-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.ap-lines td { padding: 6px 4px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.ap-lines td.t { color: var(--muted); font-size: 13px; } .ap-lines td.m { text-align: right; white-space: nowrap; font-family: var(--num); }
.ap-lines td.more { color: var(--muted); font-size: 13px; text-align: center; }
.ap-fund { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fund { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: #eefaf3; color: #0b6b49; }
.fund b { font-family: var(--num); font-weight: 700; } .fund.neg { background: #ffe9ee; color: #a3123f; }
.warnbtn { color: #b0124a; }
.empty.ok { border-color: color-mix(in srgb, #12b863 40%, transparent); }
.aphist h2 { margin-top: 0; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 14px; }
.hist li:first-child { border-top: 0; } .hist em { color: var(--ink2); font-style: normal; } .hist small { margin-left: auto; color: var(--muted); }
@media (max-width: 760px) {
  .seg2 { gap: 6px; } .seg2 button { padding: 10px 10px; } .seg2 button b { font-size: 14.5px; } .seg2 button small { display: none; }
  .flow.f4 { grid-template-columns: 1fr 1fr; } .flow.f4 .arrow { display: none; }
  .tiles.t4 { grid-template-columns: 1fr 1fr; }
  .stp b { font-size: 11px; } .stp small { display: none; }
  .apbar { top: 84px; }
  .ap { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cl-card, .cl-sky i, .stp li.cur i, .hero .deco svg.scene .orbit, .hero .deco svg.scene path.ln.trail { animation: none !important; } }
body.authed .bnav.one { max-width: 400px; }
.modesw button { white-space: nowrap; }
@media (max-width: 640px) { .who { flex-wrap: wrap; } .modesw { order: 3; width: 100%; } .modesw button { flex: 1; } }
/* ระดับของเหลวต่ำกว่าบรรทัดคำอธิบาย ไม่ให้เส้นคลื่นพาดตัวหนังสือ */
.hero .deco svg.wave.w1 { height: 64%; } .hero .deco svg.wave.w2 { height: 56%; } .hero .deco svg.wave.w3 { height: 46%; }

/* ================= v7: hero เคลื่อนไหวแบบ gif · เปลี่ยนหน้าแบบ morph · เฟดตามการเลื่อน ================= */
/* hero: รูปทรงเดินวนเป็นเส้นทางหลายจุด (ต่อเนื่องไม่สะดุด) แต่ละรูปจังหวะไม่เท่ากัน */
.hero .deco svg.scene .gs { animation: wander1 11s cubic-bezier(.45,.05,.55,.95) infinite; }
.hero .deco svg.scene .gs.g2 { animation-name: wander2; animation-duration: 13s; }
.hero .deco svg.scene .gs.g3 { animation-name: wander3; animation-duration: 9s; }
.hero .deco svg.scene .gs.sp { animation: heroSpin 36s linear infinite; } .hero .deco svg.scene .gs.sp.rev { animation-duration: 28s; animation-direction: reverse; }
@keyframes wander1 { 0%, 100% { transform: translate(0, 0) rotate(0) scale(1); } 25% { transform: translate(-16px, -12px) rotate(9deg) scale(1.05); } 50% { transform: translate(-4px, -24px) rotate(-5deg) scale(.97); } 75% { transform: translate(14px, -8px) rotate(-11deg) scale(1.03); } }
@keyframes wander2 { 0%, 100% { transform: translate(0, 0) rotate(0) scale(1); } 20% { transform: translate(22px, 10px) rotate(-14deg) scale(.94); } 45% { transform: translate(30px, -16px) rotate(8deg) scale(1.08); } 70% { transform: translate(6px, -26px) rotate(20deg) scale(1); } }
@keyframes wander3 { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(-20px, 16px) rotate(-30deg); } 60% { transform: translate(12px, 24px) rotate(25deg); } 80% { transform: translate(18px, -6px) rotate(-10deg); } }
/* แท่งรายรับขึ้นลงแบบอีควอไลเซอร์ */
.k-income svg.scene .gs.g1 { animation: none; }
.k-income svg.scene .gs.g1 rect { transform-box: fill-box; transform-origin: 50% 100%; animation: eq 3.6s cubic-bezier(.45,.05,.55,.95) infinite; }
.k-income svg.scene .gs.g1 rect:nth-child(2) { animation-delay: -1.2s; animation-duration: 4.2s; } .k-income svg.scene .gs.g1 rect:nth-child(3) { animation-delay: -2.4s; animation-duration: 3.2s; }
@keyframes eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
/* ภาพรวม: ดวงสีเน้นโคจรรอบดวงใหญ่ */
.k-overview svg.scene .gs.g2 { animation: orbitA 14s linear infinite; }
@keyframes orbitA { 0% { transform: translate(0, 0); } 25% { transform: translate(-40px, 30px) scale(.9); } 50% { transform: translate(-80px, 70px) scale(.82); } 75% { transform: translate(-30px, 66px) scale(.95); } 100% { transform: translate(0, 0); } }
/* อนุมัติ: วงแหวนหนาหมุน ดวงในเต้นเบา ๆ เหมือนตราประทับ */
.k-approve svg.scene .gs.g1 { animation: heroSpin 18s linear infinite; }
.k-approve svg.scene .gs.g2 { animation: stamp 3.4s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes stamp { 0%, 100% { transform: scale(1); } 40% { transform: scale(.82); } 55% { transform: scale(1.08); } }
.k-approve svg.scene .gs.g1 circle { stroke-dasharray: 26 10; }
/* รายจ่าย: แผ่นเอกสารโยกเอียงซ้ายขวา */
.k-expense svg.scene .gs.g1 { animation: sway 7s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes sway { 0%, 100% { transform: rotate(0) translate(0, 0); } 50% { transform: rotate(-12deg) translate(-12px, 8px); } }
.hero .deco svg.scene .gdots { animation: dotsDrift 8s ease-in-out infinite alternate; }
@keyframes dotsDrift { from { opacity: .18; transform: translate(0, 0); } to { opacity: .4; transform: translate(10px, -8px); } }
.hero .deco svg.scene .orbit { animation-duration: 12s; }
.hero .deco svg.wave { animation-duration: 30s, 8s; } .hero .deco svg.wave.w1 { animation-duration: 44s, 10s; } .hero .deco svg.wave.w2 { animation-duration: 36s, 7s; } .hero .deco svg.wave.w3 { animation-duration: 24s, 6s; }
.hero::before { animation-duration: 18s; }

/* เปลี่ยนหน้า: จับคู่ hero ↔ hero, ตัวเลขใหญ่ ↔ ตัวเลขใหญ่, แถบเมนู ↔ แถบเมนู แล้วย่อขยายเข้าหากัน */
.hero { view-transition-name: hero; }
.hero .big { view-transition-name: hero-big; }
.hero .lbl { view-transition-name: hero-lbl; }
#bnav { view-transition-name: nav; }
#bnav .bpill { view-transition-name: navpill; }
::view-transition-group(*) { animation-duration: .62s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; width: 100%; object-fit: cover; object-position: left top; overflow: clip; }
::view-transition-old(hero) { animation: vtFadeOut .36s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(hero) { animation: vtFadeIn .62s cubic-bezier(.32, .72, 0, 1) both; }
::view-transition-old(hero-big), ::view-transition-new(hero-big), ::view-transition-old(hero-lbl), ::view-transition-new(hero-lbl) { height: 100%; object-fit: none; object-position: left center; }
::view-transition-old(root) { animation: vtRootOut .34s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: vtRootIn .62s cubic-bezier(.32, .72, 0, 1) .06s both; }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; } }
@keyframes vtRootOut { to { opacity: 0; transform: scale(.965); filter: blur(4px); } }
@keyframes vtRootIn { from { opacity: 0; transform: scale(1.025); filter: blur(4px); } }

/* เลื่อนขึ้นลง: เนื้อหาค่อย ๆ ปรากฏตอนเข้าจอ และค่อย ๆ จางเฉพาะช่วงท้ายก่อนลับใต้แถบเมนู (ไม่จางทั้งก้อนแม้การ์ดจะสูง) */
@supports (animation-timeline: view()) {
  #view > :not(.hero):not(#bnav):not(#dv):not(.apbar), #dv > *, .rqlist > *, .aplist > *, .mgrp .grid > *, .cl-cards {
    animation: sfIn linear both, sfOut linear both;
    animation-timeline: view(block 92px 0px), view(block 92px 0px);
    animation-range: cover 0px cover 140px, cover calc(100% - 150px) cover 100%;
  }
  #view > .reveal, #dv > .reveal, .rqlist > .reveal, .aplist > .reveal { opacity: 1; transform: none; transition: none; }
  .hero { animation: heroOut linear both; animation-timeline: view(block 92px 0px); animation-range: cover calc(100% - 240px) cover 100%; }
  @keyframes sfIn { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes sfOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px) scale(.985); } }
  @keyframes heroOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px) scale(.97); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero .deco svg.scene .gs, .hero .deco svg.scene .gs rect, .hero .deco svg.scene .gdots { animation: none !important; }
  #view > *, #dv > *, .rqlist > *, .aplist > *, .mgrp .grid > *, .cl-cards, .hero { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ================= v8: เปลี่ยนหน้าแบบแก้วใส (ซูมเข้า/ออก + morph + แสงกวาด) · hero เปลี่ยนรูปช้า ๆ ================= */
/* ซูมตามทิศ: ไปหน้าถัดไป = หน้าเก่าขยายเข้าหาแล้วจางเป็นฝ้า · หน้าใหม่ค่อยหดจากใหญ่มาพอดี | ย้อนกลับ = กลับกัน */
html { --vt-d: 1.05s; --vt-e: cubic-bezier(.32, .72, 0, 1); }
::view-transition-group(*) { animation-duration: var(--vt-d); animation-timing-function: var(--vt-e); }
::view-transition-old(root) { animation: vtGlassOut var(--vt-d) var(--vt-e) both; }
::view-transition-new(root) { animation: vtGlassIn var(--vt-d) var(--vt-e) both; }
html[data-vt="back"]::view-transition-old(root) { animation-name: vtGlassOutB; }
html[data-vt="back"]::view-transition-new(root) { animation-name: vtGlassInB; }
@keyframes vtGlassOut { 0% { opacity: 1; filter: blur(0) saturate(1) brightness(1); transform: scale(1); } 55% { opacity: .55; filter: blur(14px) saturate(1.35) brightness(1.06); } 100% { opacity: 0; filter: blur(22px) saturate(1.5) brightness(1.1); transform: scale(1.07); } }
@keyframes vtGlassIn { 0%, 12% { opacity: 0; filter: blur(22px) saturate(1.5) brightness(1.1); transform: scale(.93); } 62% { opacity: .85; filter: blur(8px) saturate(1.2); } 100% { opacity: 1; filter: blur(0) saturate(1) brightness(1); transform: scale(1); } }
@keyframes vtGlassOutB { 0% { opacity: 1; filter: blur(0); transform: scale(1); } 55% { opacity: .55; filter: blur(14px) saturate(1.35) brightness(1.06); } 100% { opacity: 0; filter: blur(22px) saturate(1.5) brightness(1.1); transform: scale(.93); } }
@keyframes vtGlassInB { 0%, 12% { opacity: 0; filter: blur(22px) saturate(1.5) brightness(1.1); transform: scale(1.07); } 62% { opacity: .85; filter: blur(8px) saturate(1.2); } 100% { opacity: 1; filter: blur(0); transform: scale(1); } }
/* hero / ตัวเลข / เมนู จับคู่ย่อขยาย มุมโค้งตามขอบแก้ว */
::view-transition-old(hero), ::view-transition-new(hero) { border-radius: 28px; overflow: clip; mix-blend-mode: normal; }
::view-transition-old(hero) { animation: vtFadeOut calc(var(--vt-d) * .7) var(--vt-e) both; }
::view-transition-new(hero) { animation: vtFadeIn var(--vt-d) var(--vt-e) both; }
::view-transition-group(hero) { animation-duration: calc(var(--vt-d) * 1.05); }
::view-transition-group(nav), ::view-transition-group(navpill) { animation-duration: calc(var(--vt-d) * .9); }
/* แสงแก้วกวาดผ่านจอ 1 ครั้งตอนเปลี่ยนหน้า (อยู่ในชั้น top-layer ของ transition) */
#vtveil { position: fixed; top: -20vh; left: 0; width: 46vw; height: 140vh; pointer-events: none; opacity: 0; z-index: 80; transform: rotate(14deg); transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38) 40%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.38) 60%, transparent); }
#vtveil.on { opacity: 1; view-transition-name: veil; }
::view-transition-old(veil) { display: none; }
::view-transition-new(veil) { animation: none; opacity: .9; }
::view-transition-group(veil) { animation: veilSweep calc(var(--vt-d) * 1.15) var(--vt-e) both; }
html[data-vt="back"]::view-transition-group(veil) { animation-name: veilSweepB; }
@keyframes veilSweep { from { transform: translateX(-60vw) rotate(14deg); opacity: 0; } 25% { opacity: 1; } 80% { opacity: .8; } to { transform: translateX(120vw) rotate(14deg); opacity: 0; } }
@keyframes veilSweepB { from { transform: translateX(120vw) rotate(14deg); opacity: 0; } 25% { opacity: 1; } 80% { opacity: .8; } to { transform: translateX(-60vw) rotate(14deg); opacity: 0; } }
/* hero: ช้าลงและค่อย ๆ เปลี่ยน — รูปหลักเปลี่ยนทรงเอง สีไล่เฉดช้า ๆ */
.hero .deco svg.scene .gs { animation-duration: 26s; } .hero .deco svg.scene .gs.g2 { animation-duration: 31s; } .hero .deco svg.scene .gs.g3 { animation-duration: 22s; }
.hero .deco svg.scene .gs.sp { animation-duration: 90s; } .hero .deco svg.scene .gs.sp.rev { animation-duration: 70s; }
.hero .deco svg.scene .gs.lqd { stroke: rgba(255,255,255,.7); stroke-width: 1.4; }
.k-income svg.scene .gs.g1 rect { animation-duration: 9s; } .k-income svg.scene .gs.g1 rect:nth-child(2) { animation-duration: 11s; } .k-income svg.scene .gs.g1 rect:nth-child(3) { animation-duration: 8s; }
.k-overview svg.scene .gs.g2 { animation-duration: 34s; } .k-approve svg.scene .gs.g1 { animation-duration: 60s; } .k-approve svg.scene .gs.g2 { animation-duration: 9s; } .k-expense svg.scene .gs.g1 { animation-duration: 18s; }
.hero .deco svg.scene .orbit { animation-duration: 40s; } .hero .deco svg.scene .gdots { animation-duration: 18s; }
.hero .deco svg.wave { animation-duration: 70s, 18s; } .hero .deco svg.wave.w1 { animation-duration: 110s, 22s; } .hero .deco svg.wave.w2 { animation-duration: 90s, 16s; } .hero .deco svg.wave.w3 { animation-duration: 60s, 14s; }
.hero::before { animation: mesh 44s ease-in-out infinite alternate, hueSlow 38s ease-in-out infinite alternate; }
@keyframes hueSlow { from { filter: saturate(1.15) hue-rotate(-14deg); } to { filter: saturate(1.3) hue-rotate(16deg); } }
.hero .deco .orb { animation-duration: 28s; } .hero .deco .o2 { animation-duration: 36s; }
@media (prefers-reduced-motion: reduce) { #vtveil { display: none; } .hero::before { animation: none !important; } }

/* ================= v9: เปลี่ยนหน้าให้นุ่มขึ้น — ไม่มีจังหวะสะดุดกลางทาง ================= */
/* เดิมใช้ keyframe หลายช่วงแล้วใส่ easing ทุกช่วง ความเร็วจึงชะงักตรงกลาง และเบลอหนัก ๆ ทั้งจอทำให้กระตุก
   ตอนนี้ใช้ 2 keyframe (from→to) กับ easing เดียวต่อเนื่อง เบลอน้อยลง และซ้อนกันแบบไม่มีช่วงจอว่าง */
html { --vt-d: 1.25s; --vt-e: cubic-bezier(.45, 0, .15, 1); --vt-soft: cubic-bezier(.33, 0, .2, 1); }
::view-transition-group(*) { animation-duration: var(--vt-d); animation-timing-function: var(--vt-e); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; will-change: transform, opacity, filter; }
::view-transition-old(root) { animation: vtSoftOut calc(var(--vt-d) * .8) var(--vt-soft) both; }
::view-transition-new(root) { animation: vtSoftIn var(--vt-d) var(--vt-soft) both; }
html[data-vt="back"]::view-transition-old(root) { animation-name: vtSoftOutB; }
html[data-vt="back"]::view-transition-new(root) { animation-name: vtSoftInB; }
@keyframes vtSoftOut { from { opacity: 1; filter: blur(0); transform: scale(1); } to { opacity: 0; filter: blur(7px); transform: scale(1.035); } }
@keyframes vtSoftIn { from { opacity: 0; filter: blur(7px); transform: scale(.965); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes vtSoftOutB { from { opacity: 1; filter: blur(0); transform: scale(1); } to { opacity: 0; filter: blur(7px); transform: scale(.965); } }
@keyframes vtSoftInB { from { opacity: 0; filter: blur(7px); transform: scale(1.035); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
::view-transition-old(hero) { animation: vtFadeOut calc(var(--vt-d) * .9) var(--vt-soft) both; }
::view-transition-new(hero) { animation: vtFadeIn var(--vt-d) var(--vt-soft) both; }
::view-transition-old(hero-big), ::view-transition-old(hero-lbl) { animation: vtFadeOut calc(var(--vt-d) * .6) var(--vt-soft) both; }
::view-transition-new(hero-big), ::view-transition-new(hero-lbl) { animation: vtFadeIn var(--vt-d) var(--vt-soft) both; }
::view-transition-group(hero) { animation-duration: var(--vt-d); }
::view-transition-group(nav), ::view-transition-group(navpill) { animation-duration: var(--vt-d); }
#vtveil { background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 35%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 65%, transparent); filter: blur(6px); }
::view-transition-new(veil) { opacity: .7; }
::view-transition-group(veil) { animation-duration: calc(var(--vt-d) * 1.2); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }

/* เลื่อนขึ้นลง: ใช้หลายจุดไล่แบบ smoothstep ให้ค่อย ๆ เฟดเนียน ไม่เป็นเส้นตรงแข็ง ๆ และช่วงเฟดยาวขึ้น */
@supports (animation-timeline: view()) {
  #view > :not(.hero):not(#bnav):not(#dv):not(.apbar), #dv > *, .rqlist > *, .aplist > *, .mgrp .grid > *, .cl-cards {
    animation-range: cover 0px cover 220px, cover calc(100% - 240px) cover 100%;
  }
  .hero { animation-range: cover calc(100% - 340px) cover 100%; }
  @keyframes sfIn { 0% { opacity: 0; transform: translateY(22px) scale(.99); } 20% { opacity: .06; transform: translateY(17px) scale(.9925); } 50% { opacity: .5; transform: translateY(8px) scale(.9955); } 80% { opacity: .94; transform: translateY(1px) scale(.999); } 100% { opacity: 1; transform: none; } }
  @keyframes sfOut { 0% { opacity: 1; transform: none; } 20% { opacity: .94; transform: translateY(-1px); } 50% { opacity: .5; transform: translateY(-5px) scale(.992); } 80% { opacity: .06; transform: translateY(-9px) scale(.988); } 100% { opacity: 0; transform: translateY(-10px) scale(.987); } }
  @keyframes heroOut { 0% { opacity: 1; transform: none; } 20% { opacity: .94; } 50% { opacity: .5; transform: translateY(-6px) scale(.985); } 80% { opacity: .06; transform: translateY(-11px) scale(.975); } 100% { opacity: 0; transform: translateY(-12px) scale(.972); } }
}
@media (prefers-reduced-motion: reduce) { #vtveil { display: none; } }

/* ================= v10: แถบนำทางอยู่บนสุด + ตัวสลับโหมด (สวิตช์สีส้ม) · เปลี่ยนหน้าแบบเรียบ ================= */
.topdock { position: sticky; top: max(8px, env(safe-area-inset-top, 0px)); z-index: 70; display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
body.authed .topdock .bnav { position: relative !important; top: auto !important; flex: 1 1 auto; order: 1; width: auto !important; max-width: none; margin: 0 !important; }
body.authed .topdock .bnav.one { flex: 0 1 400px; }
.modesw2 { order: 2; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; min-height: 78px; border-radius: 26px; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55), 0 14px 34px -20px rgba(20,27,45,.5); }
.modesw2 .ml { color: var(--muted); cursor: pointer; transition: color .4s; user-select: none; }
.modesw2 .ml.on { color: #d9560a; }
.modesw2 .tgl { position: relative; width: 56px; height: 32px; padding: 0; border: 0; border-radius: 16px; cursor: pointer; flex: none;
  background: linear-gradient(180deg, #ffb877, #ff8a2b); box-shadow: inset 0 1px 2px rgba(150,60,0,.25), 0 6px 14px -8px #ff7a1a; transition: filter .4s; }
.modesw2 .tgl[aria-checked="false"] { filter: saturate(.55) brightness(1.08); }
.modesw2 .tgl i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(80,30,0,.32); transition: transform .55s var(--spring); }
.modesw2 .tgl[aria-checked="true"] i { transform: translateX(24px); }
.modesw2 .tgl:active i { width: 31px; } .modesw2 .tgl[aria-checked="true"]:active i { transform: translateX(19px); }
.modesw2 .tgl:focus-visible { outline: 2px solid #d9560a; outline-offset: 3px; }
@media (max-width: 640px) {
  .topdock { display: contents; }
  .modesw2 { order: -1; width: max-content; margin: 8px auto 0; min-height: 52px; padding: 0 16px; }
  body.authed .topdock .bnav { position: sticky !important; top: max(8px, env(safe-area-inset-top, 0px)) !important; width: 100% !important; margin: 8px 0 4px !important; z-index: 70; }
  body.authed .topdock .bnav.one { max-width: 400px; }
}
@media (min-width: 641px) and (max-width: 860px) { .modesw2 { flex-direction: column; gap: 4px; padding: 8px 12px; } .modesw2 .ml { display: none; } .modesw2 .ml.on { display: block; font-size: 12px; } }

/* เปลี่ยนหน้าแบบเรียบ: เลื่อน+เฟดเบา ๆ ตามทิศ · hero ย่อขยายนุ่ม ๆ · แถบสีบนเมนูสไลด์แบบสปริง (ไม่มีเบลอ/แสงกวาด/ตัวเลขกระโดด) */
html { --vt-d: .75s; --vt-e: cubic-bezier(.32, .72, 0, 1); }
#vtveil { display: none !important; }
.hero .big, .hero .lbl { view-transition-name: none; }
::view-transition-group(*) { animation-duration: var(--vt-d); animation-timing-function: var(--vt-e); }
::view-transition-old(root) { animation: vtSimpOut .4s ease both; }
::view-transition-new(root) { animation: vtSimpIn var(--vt-d) var(--vt-e) both; }
html[data-vt="back"]::view-transition-old(root) { animation-name: vtSimpOutB; }
html[data-vt="back"]::view-transition-new(root) { animation-name: vtSimpInB; }
@keyframes vtSimpOut { to { opacity: 0; transform: translateX(-28px); } }
@keyframes vtSimpIn { from { opacity: 0; transform: translateX(34px); } }
@keyframes vtSimpOutB { to { opacity: 0; transform: translateX(28px); } }
@keyframes vtSimpInB { from { opacity: 0; transform: translateX(-34px); } }
::view-transition-old(root), ::view-transition-new(root) { filter: none !important; }
::view-transition-old(hero) { animation: vtFadeOut .4s ease both; }
::view-transition-new(hero) { animation: vtFadeIn var(--vt-d) var(--vt-e) both; }
::view-transition-group(hero) { animation-duration: var(--vt-d); }

/* ================= v12: เมนูกับสวิตช์แยกเป็นคนละเกาะ · เร็วและนิ่งขึ้น · ฟอนต์ Anuphan ================= */
/* สองเกาะแยกกัน: แต่ละเกาะเป็นแก้วของตัวเอง ไม่มีฟิลเตอร์ร่วม จึงเบาและไม่กระตุกตอนเลื่อน */
.topdock { --sw: 214px; gap: 14px; }
.modesw2 { flex: 0 0 auto; min-height: 78px; border-radius: 26px; padding: 0 20px; }
.topdock.hasSw .modesw2 { justify-content: center; }
/* hero: ไม่เคลื่อนเฉดสีด้วย filter (วาดใหม่ทั้งภาพทุกเฟรม) เหลือแค่เลื่อนพื้นหลังเบา ๆ · หยุดภาพเมื่อ hero พ้นจอ */
.hero::before { animation: mesh 44s ease-in-out infinite alternate; }
.hero.off::before, .hero.off .deco, .hero.off .deco * { animation-play-state: paused !important; }
/* เฟดตอนเลื่อน: ใช้เฉพาะก้อนใหญ่ ไม่ผูกกับรายการย่อยจำนวนมาก (ลดภาระตอนรายการยาว) */
@supports (animation-timeline: view()) { .rqlist > *, .aplist > *, .mgrp .grid > * { animation: none; } }
/* จอสัมผัส/จอเล็ก: ตัด backdrop-filter ของการ์ดเนื้อหา (วาดหนักที่สุด) ใช้พื้นขาวโปร่งแทน */
@media (max-width: 900px), (pointer: coarse) {
  .card.glass, .xcard { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.86); }
}
.xlt tr.fresh td { animation: rowSaved 1.6s ease-out both; }
@keyframes rowSaved { from { background: rgba(26,170,98,.22); } to { background: transparent; } }
@media (max-width: 640px) { .modesw2 { min-height: 52px; padding: 0 16px; } }
.topdock { align-items: stretch; }
.modesw2 { min-height: 0; }
@media (max-width: 640px) { .modesw2 { min-height: 52px; } }

/* ================= v13: เปลี่ยนหน้าต่อเนื่อง (ครอสเฟดซ้อนกัน) · เฟดตอนเลื่อนเอาออก (ข้อความอยู่ตลอด) · liquid glass แบบแบน ================= */
/* ครอสเฟดจริง: หน้าเก่าจางลงพร้อมกับหน้าใหม่ค่อยขึ้น (ผลรวมความทึบคงที่) ไม่มีจังหวะจอว่างหรือ "ตัดหน้า" */
html { --vt-d: .7s; --vt-e: cubic-bezier(.4, 0, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: plus-lighter; will-change: auto; }
::view-transition-old(root) { animation: vtXOut var(--vt-d) var(--vt-e) both; }
::view-transition-new(root) { animation: vtXIn var(--vt-d) var(--vt-e) both; }
html[data-vt="back"]::view-transition-old(root) { animation-name: vtXOut; }
html[data-vt="back"]::view-transition-new(root) { animation-name: vtXInB; }
@keyframes vtXOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes vtXIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes vtXInB { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
/* เมนู/สวิตช์อยู่กับที่ ไม่ถูกครอสเฟดไปด้วย (มีชื่อของตัวเอง) */
.topdock { view-transition-name: topdock; }
::view-transition-group(topdock) { animation-duration: 0s; }
::view-transition-old(topdock) { display: none; } ::view-transition-new(topdock) { animation: none; }
::view-transition-old(hero) { animation: vtXOut var(--vt-d) var(--vt-e) both; }
::view-transition-new(hero) { animation: vtXInH var(--vt-d) var(--vt-e) both; }
@keyframes vtXInH { from { opacity: 0; } to { opacity: 1; } }
::view-transition-group(hero) { animation-duration: var(--vt-d); animation-timing-function: var(--vt-e); }
/* เลื่อนหน้า: ข้อความไม่เฟดหายอีกแล้ว มีแต่แถบเมนูที่ตอบสนอง */
@supports (animation-timeline: view()) {
  #view > :not(.hero):not(#bnav):not(#dv):not(.apbar), #dv > *, .rqlist > *, .aplist > *, .mgrp .grid > *, .cl-cards, .hero { animation: none; opacity: 1; transform: none; }
}
/* liquid glass แบบแบน: ใสนุ่ม ขอบบาง ไม่นูน (ไม่มีไฮไลต์หนา/เงาลึก) */
body.authed .topdock .bnav, .modesw2 { background: rgba(255,255,255,.34) !important; -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 18px -12px rgba(20,27,45,.3), inset 0 1px 0 rgba(255,255,255,.35) !important; transition: background .45s ease, box-shadow .45s ease, border-color .45s ease; }
body.authed .topdock .bnav::before { display: none; }
body.scrolled .topdock .bnav, body.scrolled .modesw2 { background: rgba(255,255,255,.58) !important; box-shadow: 0 10px 26px -16px rgba(20,27,45,.38), inset 0 1px 0 rgba(255,255,255,.4) !important; }
.bnav .bpill { background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 78%, #fff), var(--c1)); box-shadow: 0 3px 10px -7px var(--c1); }
.modesw2 .tgl { box-shadow: inset 0 1px 1px rgba(150,60,0,.18); }
.modesw2 .tgl i { box-shadow: 0 1px 3px rgba(80,30,0,.25); }
body.scrolled .topdock .bnav, body.scrolled .modesw2 { background: rgba(255,255,255,.78) !important; -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); }

/* ================= v14: หน้ารายจ่ายให้เรียบ · ตัวอย่างไฟล์ Excel (ฟอนต์ราชการ) ================= */
/* ปุ่มเลือก ขบ./ขจ./สายโยง: แถบเล็กแถวเดียว (เลิกการ์ดใหญ่ 3 ใบ) */
.segbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 12px; }
.seg2 { display: inline-flex; grid-template-columns: none; gap: 4px; margin: 0; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.seg2 button { flex-direction: row; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; border: 0; background: none; box-shadow: none; }
.seg2 button:hover { transform: none; background: color-mix(in srgb, var(--c2) 10%, transparent); }
.seg2 button b { font-size: 15px; } .seg2 button small { display: none; }
.seg2 button[aria-selected="true"] { background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 60%, var(--h1))); box-shadow: 0 8px 18px -12px var(--c1); }
.seg2 em { position: static; min-width: 20px; height: 20px; font-size: 11.5px; }
.subseg { margin: 0; }
.xcard { padding: 16px 18px 14px; }
.xcard .xbar { align-items: center; margin-bottom: 10px; }
.xcard .xbar h2 { font-size: 19px; }
.xcard .xhint { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
.xflow { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 0 0; margin: 0 0 8px; }
.fchip { padding: 5px 12px; font-size: 13.5px; }
.xmore { position: relative; }
.xmore > summary { list-style: none; cursor: pointer; } .xmore > summary::-webkit-details-marker { display: none; }
.xmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 8px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -20px rgba(20,27,45,.45); }
.xmenu .btn, .xmenu .chkline { width: 100%; justify-content: flex-start; text-align: left; border: 0; background: none; box-shadow: none; padding: 9px 12px; border-radius: 10px; color: var(--ink); }
.xmenu .btn:hover, .xmenu .chkline:hover { background: color-mix(in srgb, var(--c2) 10%, transparent); }
.xmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
/* ตัวอย่างไฟล์ Excel: ฟอนต์ TH SarabunPSK เท่านั้น (ส่วนอื่นของแอปใช้ Geist) */
.paper.land { width: 297mm; min-height: 0; padding: 10mm 12mm; }
.paper.land h1 { text-align: left; font-size: 26px; margin: 0; }
.paper.land .xsub { color: #6b7385; font-size: 15px; margin: 0 0 8px; }
.paper.land table { font-size: 15.5px; } .paper.land th, .paper.land td { font-size: 15.5px; padding: 3px 8px; }
.paper.land td.l { text-align: left; }
.paper.land tr.tot td { background: #f1f2f5; }
.xpnote { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.paper.land { width: max-content; min-width: 100%; box-sizing: border-box; } .paper.land td, .paper.land th { white-space: nowrap; }

/* ================= v15: กรอก ขบ. ทีละรายการ / วางจาก Excel · แฟ้ม ขบ. ================= */
.qe-card { padding: 18px; margin-bottom: 4px; }
.qe-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.qe-head h2 { margin: 0; font-size: 19px; } .qe-head .xhint { margin: 3px 0 0; }
.qe-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qe-strip { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--c2) 7%, #fff); border: 1px solid var(--line); }
.qe-strip .f { margin: 0; }
.qe-add kbd { font: inherit; opacity: .8; margin-left: 4px; }
.qe-chips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 14px 2px 0; }
.qe-cg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qe-cg > span { font-size: 12.5px; color: var(--muted); font-weight: 700; } .qe-cg > div { display: flex; gap: 6px; flex-wrap: wrap; }
.qchip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 13px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .3s var(--spring), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.qchip:hover { transform: translateY(-1px); } .qchip:active { transform: scale(.95); }
.qchip[aria-pressed="true"] { background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 60%, var(--h1))); color: #fff; border-color: transparent; box-shadow: 0 8px 16px -10px var(--c1); }
.qe-info { min-height: 26px; margin: 12px 2px 0; font-size: 14px; color: var(--ink2); }
.qe-tag { display: inline-block; padding: 2px 10px; margin-right: 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--c2) 14%, #fff); color: var(--c1); }
.qe-tag.ok { background: rgba(26,170,98,.14); color: #0d7a45; } .qe-tag.bad { background: rgba(232,23,63,.12); color: var(--bad); }
.qe-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .qe-recent > span { font-size: 12.5px; color: var(--muted); } .qchip.rp { font-weight: 500; }
.qe-folds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 26px 18px; margin: 22px 0 16px; }
.qe-fold { position: relative; padding-top: 30px; }
.qe-tab { position: absolute; top: 0; left: 14px; height: 36px; padding: 6px 16px 0; border-radius: 14px 14px 0 0; background: linear-gradient(135deg, var(--c2), color-mix(in srgb, var(--c1) 70%, var(--h1))); color: #fff; display: flex; gap: 10px; align-items: baseline; font-size: 14px; z-index: 0; }
.qe-tab span { font-size: 12px; opacity: .9; }
.qe-front { position: relative; z-index: 1; border-radius: 6px 22px 22px 22px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 14px 30px -22px rgba(20,27,45,.4), inset 0 1px 0 #fff; padding: 12px 14px; transform-origin: 50% 100%; transition: transform .6s var(--spring), box-shadow .4s; }
.qe-fold:hover .qe-front { transform: perspective(900px) rotateX(2.2deg) translateY(-3px); box-shadow: 0 22px 38px -24px rgba(20,27,45,.5), inset 0 1px 0 #fff; }
.qe-fold.cur .qe-tab { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2) 25%, transparent); }
.qe-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink2); margin-bottom: 6px; }
.qe-count { display: inline-block; font-weight: 800; color: var(--c1); } .qe-count.roll { animation: qRoll .6s var(--spring); }
@keyframes qRoll { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
.qe-lines { max-height: 260px; overflow: auto; display: flex; flex-direction: column; }
.qe-line { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto 26px; gap: 8px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--line); }
.qe-line:first-child { border-top: 0; }
.qe-line i { font-style: normal; font-size: 12px; color: var(--muted); text-align: center; }
.qe-line .py { min-width: 0; } .qe-line .py b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qe-line .py small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-line .am { font-weight: 600; text-align: right; } .qe-line .tx { font-size: 12.5px; color: var(--bad); min-width: 56px; text-align: right; }
.qe-line .del { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 8px; padding: 2px 6px; opacity: 0; transition: opacity .2s, background .2s; }
.qe-line:hover .del, .qe-line .del:focus-visible { opacity: 1; } .qe-line .del:hover { color: var(--bad); background: rgba(232,23,63,.08); }
.qe-line.drop { animation: qDrop .65s var(--spring) both; }
@keyframes qDrop { from { opacity: 0; transform: translateY(-24px) scale(.96); background: color-mix(in srgb, var(--c2) 24%, transparent); } to { opacity: 1; transform: none; } }
.qe-line.bad { background: rgba(232,23,63,.07); border-radius: 10px; }
.qe-miss { color: var(--bad); font-style: normal; font-weight: 700; } .qe-warn { color: #b86a00; font-style: normal; font-weight: 700; }
.qe-empty { grid-column: 1 / -1; text-align: center; padding: 28px; color: var(--muted); border: 1.5px dashed var(--line); border-radius: 22px; } .qe-empty b { display: block; color: var(--ink); margin-bottom: 4px; }
.qe-send { position: sticky; bottom: 12px; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border-radius: 20px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: 0 14px 34px -20px rgba(20,27,45,.45); }
.qe-sum { font-size: 14.5px; } .qe-sact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qe-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.qe-fmt { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: transform .35s var(--spring), box-shadow .35s; }
.qe-fmt:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(20,27,45,.4); } .qe-fmt small { color: var(--muted); font-size: 12.5px; }
textarea.qe-paste { font-family: var(--num); font-size: 13px; border-radius: 16px; min-height: 120px; resize: vertical; border: 1.5px dashed color-mix(in srgb, var(--c2) 50%, var(--line)); background: color-mix(in srgb, var(--c2) 4%, #fff); }
.qe-pstat { margin-top: 10px; font-size: 14px; } .qe-pdoc { margin-top: 10px; }
@media (max-width: 700px) { .qe-strip { grid-template-columns: 1fr 1fr; } .qe-payee, .qe-add { grid-column: 1 / -1; } .qe-formats { grid-template-columns: 1fr; } .qe-folds { grid-template-columns: 1fr; } .qe-line .del { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qe-line.drop, .qe-count.roll { animation: none; } .qe-fold:hover .qe-front { transform: none; } }

/* ================= v16: บันทึกใบเสร็จ (แพ็กเกจ) · สรุปรายวัน ================= */
.qr-card { padding: 18px; margin-bottom: 14px; }
.qr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.qr-head h2, .qr-head h3 { margin: 0; } .qr-head h3 { font-size: 17px; }
.qr-last { font-size: 13.5px; color: var(--muted); }
.qr-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: end; margin: 4px 0 10px; }
.qr-tot input { font-size: 22px; font-weight: 600; min-height: 52px; }
.qr-cg { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; } .qr-cg > span { font-size: 12.5px; color: var(--muted); font-weight: 700; } .qr-cg > div { display: flex; gap: 6px; }
.qr-pk { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-height: 6px; margin-bottom: 8px; }
.qr-pkn { font-size: 13.5px; color: var(--ink2); width: 100%; }
.qchip.pk { text-align: left; border-radius: 14px; padding: 7px 12px; font-weight: 500; line-height: 1.35; }
.qr-line { grid-template-columns: 26px auto minmax(0, 1.5fr) 82px minmax(0, 1fr) 34px !important; align-items: center; }
.qr-line .f { margin: 0; } .qr-line > [data-c] { grid-column: auto !important; grid-row: auto !important; }
.qr-g { display: flex; gap: 4px; } .qr-g .qchip { padding: 4px 10px; font-size: 12.5px; }
.qr-line.drop { animation: qDrop .6s var(--spring) both; animation-delay: calc(var(--i) * 45ms); }
.qr-diff { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 2px 4px; font-size: 14.5px; min-height: 26px; }
.qr-diff .ok { color: #0d7a45; font-weight: 600; } .qr-diff .bad { color: var(--bad); font-weight: 600; }
.qr-rcs { display: flex; flex-direction: column; }
.qr-rc { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 74px; gap: 4px 12px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); }
.qr-rc:first-child { border-top: 0; } .qr-rc .no { font-family: var(--num); color: var(--c1); }
.qr-rc .sm { font-size: 13px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-rc .am { font-weight: 600; text-align: right; } .qr-rc.cx { opacity: .55; } .qr-rc.cx .sm { text-decoration: line-through; }
.qr-day { padding: 0; margin-bottom: 12px; } .qr-day > summary { list-style: none; cursor: pointer; padding: 14px 18px; } .qr-day > summary::-webkit-details-marker { display: none; }
.qr-day[open] > summary { border-bottom: 1px solid var(--line); }
.qd-top { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; } .qd-date { font-size: 16.5px; } .qd-no { font-size: 13.5px; color: var(--ink2); } .qd-n { font-size: 12.5px; color: var(--muted); } .qd-top .sp { flex: 1; } .qd-top .tot { font-size: 18px; }
.qr-day .qr-gsum, .qr-day .qr-rcs { padding: 12px 18px 4px; } .qr-day .qr-rcs { padding-bottom: 12px; }
.qr-gsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qr-gb { border-radius: 16px; padding: 10px 14px; background: color-mix(in srgb, var(--c2) 7%, #fff); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.qr-gb.z { opacity: .5; } .qr-gb .gl { font-size: 12.5px; font-weight: 700; color: var(--muted); } .qr-gb b { font-size: 19px; } .qr-gb small { font-size: 12.5px; color: var(--ink2); }
.qr-mon { padding: 14px 18px; margin-bottom: 14px; } .qr-mon > .gl { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.qr-map { margin-top: 12px; } .qr-map h4 { margin: 0 0 8px; }
.qr-maprows { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 12px; }
.qr-mr { display: flex; flex-direction: column; gap: 3px; font-size: 13px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; } .qr-mr.un { border-color: var(--bad); background: rgba(232,23,63,.05); } .qr-mr select { min-height: 36px; padding: 4px 8px; }
.qr-pkstat { margin: 12px 0 4px; font-size: 14px; } .qr-pkcur { margin: 6px 0 10px; font-size: 14px; }
@media (max-width: 700px) {
  .qr-total { grid-template-columns: 1fr; }
  .qr-line { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 34px !important; }
  .qr-line .qr-g { grid-column: 2 / 4; } .qr-line [data-c="type"] { grid-column: 2 / 4 !important; } .qr-line [data-c="method"] { grid-column: 2 !important; } .qr-line [data-c="gross"] { grid-column: 3 !important; }
  .qr-gsum { grid-template-columns: 1fr; } .qr-rc { grid-template-columns: 64px minmax(0, 1fr) auto; } .qr-rc .btn { grid-column: 1 / -1; justify-self: end; }
}

/* ===== v17: ตารางใบเสร็จบรรทัดเดียว · หน้าต่างแยกกองทุน ===== */
.xlt tr.cxd td { opacity: .5; } .xlt tr.cxd td input { text-decoration: line-through; }
.xlt td.xc input[data-k="split"] { font-size: 13px; color: var(--ink2); cursor: pointer; }
.qs-line { display: grid; grid-template-columns: minmax(0, 2fr) 90px minmax(0, 1fr) 34px; gap: 8px; align-items: center; margin-bottom: 6px; } .qs-line .f { margin: 0; }
.qs-alts { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c2) 7%, #fff); border: 1px solid var(--line); } .qs-alts > b { display: block; font-size: 13px; margin-bottom: 6px; }
.qs-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .qs-alt > span { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 110px; }
.qs-diff { margin: 10px 2px; font-size: 14.5px; } .qs-diff .ok { color: #0d7a45; font-weight: 600; } .qs-diff .bad { color: var(--bad); font-weight: 600; }
@media (max-width: 700px) { .qs-line { grid-template-columns: 1fr 80px; } .qs-line [data-f="amount"] { grid-column: 1 / 2; } }

/* ===== v18: นำเข้าข้อมูลเดิม ===== */
.im-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; } .im-sum > div { border-radius: 14px; padding: 10px 14px; background: color-mix(in srgb, var(--c2) 7%, #fff); border: 1px solid var(--line); display: flex; flex-direction: column; } .im-sum b { font-size: 22px; } .im-sum span { font-size: 12.5px; color: var(--muted); }
.im-t { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0; } .im-t th, .im-t td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; } .im-t th.r, .im-t td.r { text-align: right; } .im-t em { font-style: normal; font-size: 12px; color: #b86a00; font-weight: 700; }
.im-warn { margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: rgba(255,170,0,.12); border: 1px solid rgba(255,170,0,.4); font-size: 13.5px; } .im-warn ul { margin: 4px 0 0 18px; padding: 0; }
.im-opts { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
@media (max-width: 700px) { .im-sum { grid-template-columns: 1fr 1fr; } }