/* ══════════════════════════════════════════════════════════════════════
   สกินรอบ 3 · "ห้องบัญชาการ" สำหรับโปรแกรมกระแสเงินสด SYNERRY
   ฉีดทับหน้าเดิมด้วย addStyleTag · ไม่แตะช่องข้อมูล แบบฟอร์ม ลำดับ หรือชื่อใด ๆ
   ฟอนต์ทั้งหมดสัญญา SIL OFL 1.1 (Geist · Geist Mono · IBM Plex Sans Thai · Noto Emoji)
   ประกาศฟอนต์ตรงในไฟล์นี้ ไม่ใช้ @import (ไม่ต้องรอไฟล์คำสั่งฟอนต์อีกทอด หน้าจึงไม่ช้าลง)
   โหลดเฉพาะชุดอักษรและน้ำหนักที่ใช้จริง: Geist ละติน 1 ไฟล์ · Geist Mono ละติน 1 ไฟล์
   · IBM Plex Sans Thai เฉพาะอักษรไทย 3 น้ำหนัก (400 500 600) · ไอคอน 1 ไฟล์ · ทุกตัว font-display:swap
   ══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFWNOITd.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmhHkjko.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsansthai/v11/m8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMHdYgR8BKU4cX.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:500;font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsansthai/v11/m8JMje1VVIzcq1HzJq2AEdo2Tj_qvLqE-vU1fuJHeb0eXn9q.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsansthai/v11/m8JMje1VVIzcq1HzJq2AEdo2Tj_qvLqE1vI1fuJHeb0eXn9q.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}

/* ไอคอนขาวดำชุดเดียวกัน · ใช้เฉพาะอีโมจิที่หน้าจอนี้ใช้จริง (จำกัดด้วย unicode-range)
   ตัวอักษรอื่นทุกตัวไม่แตะฟอนต์นี้เลย จึงไม่กระทบตัวเลขหรือภาษาไทย */
@font-face{
  font-family:"CF Icon";
  src:url(https://fonts.gstatic.com/l/font?kit=bMrnmSyK7YY-MEu6aWjPDs-ar6uWaGWuob-Z0jwqS-FGJSsYN3EmL-D4P4t5vk0lW2lXo9L13ih7HmBgWTJB03hVCwnnLKEyeNSZtGLtXhjfqyk8zehmUvW-h46wbqzvaYx22aSHye05lJrDtTZG1aVwOd-CDhgP5UMF2nHq1BFgb0Mse1-t_24OKIxO46A&skey=51363d29afc7180b&v=v65) format('woff2');
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+23F0,U+23F8,U+2600,U+2699,U+26A0,U+FE0E-FE0F,U+1F319,U+1F39A,U+1F3C1,U+1F3E0,U+1F3E6,
    U+1F4B0,U+1F4B8,U+1F4C4-1F4C5,U+1F4CA-1F4CB,U+1F4CE,U+1F501,U+1F50D,U+1F512,U+1F514,U+1F517,
    U+1F558,U+1F5A8,U+1F5D1,U+1F7E1;
}

/* ─────────────── 1. ชุดค่ากลาง · โหมดสว่าง "มุก" ─────────────── */
:root{
  --ui:"CF Icon","Geist","IBM Plex Sans Thai",-apple-system,"Sarabun","Noto Sans Thai",system-ui,sans-serif;
  --num:"CF Icon","Geist Mono","IBM Plex Sans Thai",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);

  --page:#EDF1F7;
  --s2:#FFFFFF;             /* การ์ดและแผง */
  --s3:#FBFCFE;             /* พื้นตาราง · ต่างจากพื้นหน้า */
  --s4:#F1F5FA;             /* ชั้นยก · หัวตาราง แถวหัววัน */
  --row-hover:#E8F2FF;      /* ชี้แถว · สว่างชัดทั้งแถว */
  --picked:#DDEBFF;
  --line:#DCE3EC; --line-soft:rgba(15,40,80,.07); --line-strong:#C5D0DE;
  --row-line:rgba(15,40,80,.065);

  --ink:#0B1628; --ink-2:#26364E; --mute:#556275; --mute-2:#6B778A;
  --green:#047857; --red:#C21F3A; --amber:#A74B07; --blue:#1D4ED8;
  --accent:#0B63CE; --teal:#0E7C86; --gold:#8A5A00; --orange:#C2410C; --today:#E11D48;
  --pink:#BE185D; --violet:#6D28D9; --indigo:#4338CA; --sky:#0369A1; --slate:#64748B;

  --green-soft:#E7F8F0; --red-soft:#FFEFF2; --amber-soft:#FFF5E6; --blue-soft:#EAF1FF; --accent-soft:#E6F0FF;
  --green-bd:rgba(4,120,87,.22); --red-bd:rgba(194,31,58,.22); --amber-bd:rgba(167,75,7,.24); --blue-bd:rgba(29,78,216,.22);
  --amber-tint:rgba(234,146,20,.13); --orange-tint:rgba(234,88,12,.12); --blue-tint:rgba(59,130,246,.11);
  --green-glow:rgba(16,185,129,.20); --red-glow:rgba(225,29,72,.20); --accent-glow:rgba(11,99,206,.35);
  --accent-ring:rgba(11,99,206,.20); --today-glow:rgba(225,29,72,.35);

  --glass:rgba(255,255,255,.70); --glass-bd:rgba(15,40,80,.10); --glass-hi:rgba(255,255,255,.9);
  --hdr-a:rgba(255,255,255,.70); --hdr-b:rgba(247,250,254,.56);
  --frame-bd:linear-gradient(180deg,rgba(14,165,233,.42),rgba(15,40,80,.09) 26%,rgba(15,40,80,.09) 78%,rgba(20,184,166,.30));
  --thead-bg:linear-gradient(180deg,#F7FAFD,#EEF3F9);
  --thead-shadow:0 1px 0 rgba(14,165,233,.20),0 6px 10px -9px rgba(16,40,80,.16);
  --thead-solid:#F2F6FA;
  --field-bg:#F7F9FC; --field-bd:#D5DDE8; --field-bd-hover:#B6C3D4;
  --btn-bg:#FFFFFF; --btn-bd:#D8E0EA; --btn-bg-hover:#F5F9FF; --btn-bd-hover:rgba(11,99,206,.42);
  --chip-bg:#F3F6FA; --chip-bd:#E1E7EF;
  --sticky-shadow:rgba(16,40,80,.16);
  --card-shadow:0 1px 2px rgba(16,40,80,.05),0 10px 28px -14px rgba(37,99,235,.22);
  --card-shadow-hover:0 2px 4px rgba(16,40,80,.06),0 18px 36px -16px rgba(37,99,235,.32);
  --table-shadow:0 1px 2px rgba(16,40,80,.05),0 14px 36px -18px rgba(30,80,160,.26);
  --btn-shadow:0 1px 2px rgba(16,40,80,.06);
  --btn-shadow-hover:0 6px 16px -8px rgba(11,99,206,.35);
  --cta:linear-gradient(135deg,#0B5FD0 0%,#0B7A88 100%); --cta-ink:#FFFFFF;
  --cta-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 20px -8px rgba(11,95,208,.55);
  --cta-shadow-hover:0 1px 0 rgba(255,255,255,.25) inset,0 12px 26px -8px rgba(11,95,208,.6),0 0 0 3px rgba(11,99,206,.14);
  --seg-track:#EEF2F7; --seg-on:#FFFFFF; --seg-on-ink:#0B4FB0;
  --seg-on-shadow:0 1px 2px rgba(16,40,80,.12),0 0 0 1px rgba(11,99,206,.22);
  --foot-bg:linear-gradient(180deg,rgba(255,255,255,.86),rgba(243,247,252,.93));
  --foot-line:rgba(11,99,206,.40); --foot-glow:rgba(11,99,206,.28);
  --scrim:rgba(15,25,45,.34);
  --hero-a:#FFFFFF; --hero-b:#F4FBF8; --hero-glow:rgba(16,185,129,.16);
  --hero-bd:linear-gradient(135deg,rgba(16,185,129,.55),rgba(14,165,233,.35) 45%,rgba(15,40,80,.08) 75%);
  --flow-cyan:#0EA5E9; --flow-green:#14B8A6;
  --grain-op:.035;

  /* ค่าที่หน้าเดิมเรียกใช้ · ชี้มาที่ชุดใหม่ ความหมายสีเดิมทุกตัว */
  --bg:var(--page); --card:var(--s2); --greenbg:var(--green-soft); --redbg:var(--red-soft);
  --amberbg:var(--amber-soft); --bluebg:var(--blue-soft); --limelight:#10B981;
  --header-surface:transparent; --header-nav:transparent; --toolbar-surface:var(--s2); --toolbar-subtle:var(--s4);
  --focus-ring:var(--accent); --hover-surface:var(--row-hover);
  --shadow:var(--btn-shadow); --shadow-lg:var(--card-shadow-hover);
}

/* ─────────────── 2. โหมดมืด "ห้องบัญชาการ" · พื้นกรมท่าเกือบดำ 3 ระดับ ─────────────── */
html[data-theme="dark"]{
  color-scheme:dark;
  --page:#070B13;
  --s2:#0F1829;             /* การ์ดและแผง */
  --s3:#0C1424;             /* พื้นตาราง · สว่างกว่าพื้นหน้า */
  --s4:#131E33;             /* ชั้นยก */
  --row-hover:#172844;
  --picked:#16304F;
  --line:#1E2A40; --line-soft:rgba(148,180,255,.08); --line-strong:#2C3B57;
  --row-line:rgba(148,180,255,.065);

  --ink:#E7EDF7; --ink-2:#C4CFE0; --mute:#8F9DB5; --mute-2:#7A889F;
  --green:#3DDC97; --red:#FF6B81; --amber:#F7C04A; --blue:#6CB6FF;
  --accent:#38BDF8; --teal:#2DD4BF; --gold:#F5C451; --orange:#FB923C; --today:#FF4D6D;
  --pink:#F472B6; --violet:#A78BFA; --indigo:#818CF8; --sky:#7DD3FC; --slate:#94A3B8;

  --green-soft:rgba(61,220,151,.10); --red-soft:rgba(255,107,129,.10); --amber-soft:rgba(247,192,74,.10);
  --blue-soft:rgba(108,182,255,.10); --accent-soft:rgba(56,189,248,.12);
  --green-bd:rgba(61,220,151,.28); --red-bd:rgba(255,107,129,.32); --amber-bd:rgba(247,192,74,.30); --blue-bd:rgba(108,182,255,.30);
  --amber-tint:rgba(247,192,74,.15); --orange-tint:rgba(251,146,60,.15); --blue-tint:rgba(108,182,255,.13);
  --green-glow:rgba(61,220,151,.38); --red-glow:rgba(255,107,129,.40); --accent-glow:rgba(56,189,248,.55);
  --accent-ring:rgba(56,189,248,.22); --today-glow:rgba(255,77,109,.55);

  --glass:rgba(12,19,33,.70); --glass-bd:rgba(148,180,255,.13); --glass-hi:rgba(255,255,255,.06);
  --hdr-a:rgba(11,18,33,.78); --hdr-b:rgba(8,13,24,.70);
  --frame-bd:linear-gradient(180deg,rgba(56,189,248,.40),rgba(148,180,255,.09) 26%,rgba(148,180,255,.09) 78%,rgba(45,212,191,.26));
  --thead-bg:linear-gradient(180deg,#152139,#111B2F);
  --thead-shadow:0 1px 0 rgba(56,189,248,.18),0 10px 16px -12px rgba(0,0,0,.6);
  --thead-solid:#131E34;
  --field-bg:rgba(4,8,16,.55); --field-bd:rgba(148,180,255,.16); --field-bd-hover:rgba(148,180,255,.30);
  --btn-bg:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); --btn-bd:rgba(148,180,255,.15);
  --btn-bg-hover:linear-gradient(180deg,rgba(56,189,248,.12),rgba(56,189,248,.05)); --btn-bd-hover:rgba(56,189,248,.50);
  --chip-bg:rgba(148,180,255,.07); --chip-bd:rgba(148,180,255,.12);
  --sticky-shadow:rgba(0,0,0,.55);
  --card-shadow:0 0 0 1px rgba(0,0,0,.25),0 16px 36px -20px rgba(0,0,0,.75);
  --card-shadow-hover:0 0 0 1px rgba(56,189,248,.18),0 18px 40px -18px rgba(0,0,0,.8),0 0 28px -10px rgba(56,189,248,.30);
  --table-shadow:0 0 0 1px rgba(0,0,0,.3),0 24px 56px -24px rgba(0,0,0,.85);
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  --btn-shadow-hover:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 3px rgba(56,189,248,.08),0 8px 22px -10px rgba(56,189,248,.45);
  --cta:linear-gradient(135deg,#3B9EFF 0%,#22D3C5 100%); --cta-ink:#03111D;
  --cta-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(56,189,248,.35),0 8px 24px -8px rgba(34,211,197,.60);
  --cta-shadow-hover:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(56,189,248,.55),0 10px 30px -6px rgba(34,211,197,.75),0 0 22px rgba(56,189,248,.35);
  --seg-track:rgba(255,255,255,.035); --seg-on:linear-gradient(180deg,rgba(56,189,248,.24),rgba(56,189,248,.12)); --seg-on-ink:#E6F7FF;
  --seg-on-shadow:inset 0 0 0 1px rgba(56,189,248,.50),0 0 14px -3px rgba(56,189,248,.55);
  --foot-bg:linear-gradient(180deg,rgba(21,34,58,.86),rgba(13,21,37,.93));
  --foot-line:rgba(56,189,248,.60); --foot-glow:rgba(56,189,248,.40);
  --scrim:rgba(2,5,11,.62);
  --hero-a:#10263A; --hero-b:#0E1728; --hero-glow:rgba(61,220,151,.26);
  --hero-bd:linear-gradient(135deg,rgba(61,220,151,.65),rgba(56,189,248,.40) 45%,rgba(148,180,255,.08) 75%);
  --flow-cyan:#38BDF8; --flow-green:#2DD4BF;
  --grain-op:.045;
}

/* ─────────────── 3. พื้นหลัง · แสงบรรยากาศ + เกรนบาง ๆ ─────────────── */
html{background:var(--page)}
/* พื้น body ต้องใส ให้ชั้นแสงบรรยากาศกับเกรนด้านหลังโผล่ (หน้าเดิมทาพื้น body ไว้ทั้งสองโหมด) */
html body,html[data-theme="dark"] body{background:transparent;font-family:var(--ui);color:var(--ink);font-variant-emoji:text;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 470px at 8% -14%,rgba(56,189,248,.26),transparent 62%),
    radial-gradient(1000px 480px at 96% -12%,rgba(244,114,182,.13),transparent 60%),
    radial-gradient(760px 420px at 64% 34%,rgba(167,139,250,.06),transparent 70%),
    radial-gradient(1000px 560px at 50% 112%,rgba(45,212,191,.16),transparent 60%),
    linear-gradient(180deg,#F6F9FD 0%,#E9EFF7 100%)}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(1200px 380px at 50% -150px,rgba(56,189,248,.22),rgba(56,189,248,.05) 48%,transparent 72%),
    radial-gradient(760px 460px at 102% 8%,rgba(45,212,191,.07),transparent 65%),
    radial-gradient(900px 620px at -8% 108%,rgba(59,130,246,.08),transparent 60%),
    linear-gradient(180deg,#0A1224 0%,#070B13 52%,#060A11 100%)}
html body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="dark"] body::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html body ::selection{background:rgba(56,189,248,.28)}

/* ─────────────── 4. ปุ่ม ช่องกรอก และปุ่มแบ่งช่วง · ใช้ทั้งระบบ ─────────────── */
:root body .btn{background:var(--btn-bg);border:1px solid var(--btn-bd);color:var(--ink);border-radius:10px;
  box-shadow:var(--btn-shadow);font-weight:500;letter-spacing:0;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),
    color .16s var(--ease),transform .12s var(--ease)}
:root body .btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bd-hover);color:var(--ink);
  transform:translateY(-1px);box-shadow:var(--btn-shadow-hover)}
:root body .btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}
:root body .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root body .btn.primary,:root body .btn.primary.big{background:var(--cta);border:1px solid transparent;color:var(--cta-ink);
  box-shadow:var(--cta-shadow);font-weight:600}
:root body .btn.primary:hover{background:var(--cta);color:var(--cta-ink);border-color:transparent;
  box-shadow:var(--cta-shadow-hover);filter:saturate(1.08) brightness(1.04)}
:root body .btn.ghost{background:transparent;border:1px solid transparent;box-shadow:none;color:var(--mute)}
:root body .btn.ghost:hover{background:var(--accent-soft);border-color:transparent;color:var(--ink);box-shadow:none}
:root body .btn.on{background:var(--seg-on);color:var(--seg-on-ink);border-color:transparent;box-shadow:var(--seg-on-shadow)}

:root body .ctl,:root body input.ctl,:root body select.ctl,:root body textarea.ctl{background:var(--field-bg);
  border:1px solid var(--field-bd);color:var(--ink);border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.10);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
:root body .ctl:hover{border-color:var(--field-bd-hover)}
:root body .ctl:focus,:root body .ctl:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring),0 0 22px -6px var(--accent-glow)}
:root body .ctl::placeholder,html body #gate .login input::placeholder{color:var(--mute);opacity:1}
:root body input[type=checkbox],:root body input[type=radio],:root body input[type=range]{accent-color:var(--accent)}

:root body .seg{display:inline-flex;gap:2px;padding:3px;background:var(--seg-track);border:1px solid var(--line-soft);
  border-radius:11px;box-shadow:none;overflow:hidden}
:root body .seg button{background:transparent;border:0;border-radius:8px;color:var(--mute);font-weight:500;
  padding:5px 10px;transition:background-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease)}
:root body .seg button:hover{background:var(--accent-soft);color:var(--ink)}
:root body .seg button.on,:root body .rangebar .seg button.on,:root body .rngmini button.on,
:root body .d7seg button.on,:root body .dtool .seg button.on{background:var(--seg-on);color:var(--seg-on-ink);
  box-shadow:var(--seg-on-shadow);font-weight:600}
:root body .lbl{color:var(--mute)}
:root body .badge{background:var(--chip-bg);color:var(--mute);border:1px solid var(--chip-bd);border-radius:99px;
  padding:0 6px;font:600 calc(var(--fs) * .7)/1.55 var(--num);margin-left:6px;display:inline-block;min-width:18px;text-align:center}
:root body .badge.hot,:root body .tabs .badge.hot{background:var(--red);color:#fff;border-color:transparent;
  box-shadow:0 0 12px -2px var(--red-glow)}
html[data-theme="dark"] body .badge.hot{color:#1A0308}

/* ─────────────── 5. หัวเว็บ · กระจกบาง แสงเส้นล่าง ─────────────── */
html body #hdr.app-header{background:linear-gradient(180deg,var(--hdr-a),var(--hdr-b));
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--glass-bd);box-shadow:0 12px 30px -22px rgba(0,0,0,.55)}
#hdr.app-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(56,189,248,.55) 30%,rgba(45,212,191,.45) 70%,transparent 100%)}
/* เส้นคลื่นจางหายก่อนถึงแถบปุ่มขวา · ไม่ลากผ่านช่องระหว่างปุ่ม */
#hdr .cashflow-current{opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 48%);mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 48%)}
#hdr .hero-top{gap:14px}
#hdr .brand{font-weight:600;letter-spacing:-.015em;color:var(--ink)}
#hdr .brand small{color:var(--mute);font-weight:400;letter-spacing:.01em}
#hdr .logobtn img{box-shadow:0 0 0 1px rgba(255,255,255,.10),0 8px 22px -8px rgba(20,184,166,.55)}
html[data-theme="dark"] #hdr .logobtn img{box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 22px -4px rgba(45,212,191,.55)}
/* รวมปุ่มขวาบนเป็นแถบกระจกแถบเดียว */
#hdr .header-actions{gap:2px;padding:4px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-bd);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 26px -16px rgba(0,0,0,.55)}
#hdr .header-actions>.btn,#hdr .header-actions>.seg{background:transparent;border:1px solid transparent;box-shadow:none;
  min-height:36px;border-radius:10px;color:var(--ink-2)}
#hdr .header-actions>.btn{padding:6px 11px}
#hdr .header-actions>.btn:hover{background:var(--accent-soft);border-color:transparent;color:var(--ink);transform:none;box-shadow:none}
#hdr .header-actions>.seg{padding:0;gap:0}
#hdr .header-actions>.seg button{min-height:34px;padding:4px 9px;color:var(--ink-2)}
#hdr .header-actions>.seg #fsNow{font-family:var(--num);font-size:.86em;color:var(--mute)}
#hdr .header-actions>*+*{position:relative}
#hdr .header-actions>.seg,#hdr .header-actions>#themeBtn,#hdr .header-actions>.me{margin-left:6px}
#hdr .header-actions>.seg::before,#hdr .header-actions>#themeBtn::before,#hdr .header-actions>.me::before{content:"";
  position:absolute;left:-4px;top:9px;bottom:9px;width:1px;background:var(--line-soft)}
#hdr .me{padding:0 6px 0 4px;color:var(--ink)}
#hdr .me .av{box-shadow:0 0 0 2px var(--s2),0 0 0 3px rgba(56,189,248,.45),0 0 16px -2px rgba(56,189,248,.45);
  width:32px;height:32px;font-size:calc(var(--fs) * .9)}
#hdr .me .mm b{font-family:"Geist",var(--ui);font-weight:600;letter-spacing:.06em;font-size:calc(var(--fs) * .88)}
#hdr .me .mm small{color:var(--mute);font-weight:400}
#hdr .paneledge{background:transparent}
#hdr .paneledge span{background:var(--line-strong);height:4px;width:56px}
#hdr .paneledge:hover span{background:var(--accent);box-shadow:0 0 12px var(--accent-glow);width:96px}

/* แท็บ · ที่เลือกมีเส้นใต้เรือง */
html body #hdr .tabs{background:transparent;border-top:1px solid var(--line-soft);padding:4px 18px 0;gap:2px}
#hdr .tabs button{background:transparent;color:var(--mute);font-weight:500;border-radius:10px 10px 0 0;
  padding:9px 14px 11px;min-height:42px;box-shadow:none}
#hdr .tabs button:hover:not(.on){background:var(--accent-soft);color:var(--ink);transform:none}
#hdr .tabs button.on{background:linear-gradient(180deg,transparent 0%,var(--accent-soft) 100%);color:var(--ink);box-shadow:none;font-weight:600}
#hdr .tabs button.on::after{left:12px;right:12px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--teal));box-shadow:0 0 12px var(--accent-glow),0 0 2px var(--accent)}

/* ─────────────── 6. แผงสรุป · จุดโฟกัสเดียวที่เงินในมือวันนี้ ─────────────── */
html body #hdr #topPanel,html body #hdr .hero-stats{background:transparent}
#hdr .hero-stats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;padding:14px 18px 12px}
#hdr .hs{background:var(--s2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-height:86px;
  box-shadow:var(--card-shadow);backdrop-filter:none;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
#hdr .hs:hover{transform:translateY(-2px);border-color:var(--btn-bd-hover);box-shadow:var(--card-shadow-hover)}
#hdr .hs::after{display:none}
#hdr .hs .l{font-size:calc(var(--fs) * .78);color:var(--mute);font-weight:500;letter-spacing:0}
#hdr .hs .v{font-family:var(--num);font-weight:500;font-size:calc(var(--fs) * 1.3);letter-spacing:-.02em;
  line-height:1.15;margin-top:8px;font-variant-numeric:tabular-nums}
#hdr .hs .s2{font-family:var(--num);font-size:calc(var(--fs) * .72);color:var(--mute);margin-top:3px}
#hdr .hs[data-k="bal_today"]{grid-column:span 2;padding:14px 18px 13px;border:1px solid transparent;
  background:
    radial-gradient(360px 190px at 0% 0%,var(--hero-glow),transparent 70%) padding-box,
    linear-gradient(135deg,var(--hero-a),var(--hero-b)) padding-box,
    var(--hero-bd) border-box}
#hdr .hs[data-k="bal_today"] .l{font-size:calc(var(--fs) * .9);color:var(--ink-2);font-weight:600}
#hdr .hs[data-k="bal_today"] .v{font-size:38px;font-weight:500;letter-spacing:-.035em;margin-top:4px;
  text-shadow:0 0 24px var(--green-glow)}
#hdr .hs[data-k="bal_today"] .v[style*="--red"]{text-shadow:0 0 24px var(--red-glow)}
/* ป้ายสีที่หน้าเดิมเขียนตายตัว · ปรับให้เข้ากับโหมด และยอดตามแผนเป็นสีกลาง แดงเฉพาะติดลบ */
#hdr .hs .v[style*="#b54708"],#hdr .hs:hover .v[style*="#b54708"]{color:var(--amber)!important}
#hdr .hs[data-k="last_bal"] .v[style*="--green"],#hdr .hs[data-k="last_bal"]:hover .v[style*="--green"]{color:var(--ink)!important}
#hdr .hs:hover .v[style*="--green"]{color:var(--green)!important}
#hdr .hs:hover .v[style*="--red"]{color:var(--red)!important}
#hdr .hs:hover .v[style*="--mute"]{color:var(--mute)!important}
#hdr .hs:hover .v[style*="--ink"]{color:var(--ink)!important}
/* ไอคอน ≡ บนการ์ด · ซ่อนจนกว่าจะชี้ */
:root body .drillable::after{opacity:0;color:var(--accent);transition:opacity .16s var(--ease)}
:root body .drillable:hover::after,:root body .drillable:focus-visible::after{opacity:1}

/* แถบ 7 วันข้างหน้า · ตัวเลขฟอนต์ตัวเลขเดียวกันทั้งประโยค */
html body #hdr .due7{margin:0 18px 12px;background:var(--s2);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--card-shadow)}
html body #hdr .due7.short{border-color:var(--red-bd)}
#hdr .due7 .d7h{padding:10px 14px;gap:12px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--amber-soft),transparent 60%)}
#hdr .due7.short .d7h{background:linear-gradient(90deg,var(--red-soft),transparent 60%)}
#hdr .due7 .d7h>b{font-weight:600;color:var(--ink)}
#hdr .due7 .d7sum,#hdr .due7 .d7short,#hdr .due7 .d7ok{font-family:var(--num);font-size:calc(var(--fs) * .88);
  letter-spacing:-.01em;color:var(--ink-2);font-weight:500}
#hdr .due7 .d7sum b{font-weight:600}
#hdr .due7 .d7sum .g,#hdr .due7 .d7ok{color:var(--green)}
#hdr .due7 .d7sum .r,#hdr .due7 .d7short{color:var(--red)}
#hdr .due7 .d7cols{background:var(--line);border-top:0;gap:1px}
#hdr .due7 .d7side{background:var(--s2)}
html body #hdr .d7side.in .d7sh{background:linear-gradient(90deg,var(--green-soft),transparent 75%);color:var(--green)}
html body #hdr .d7side.out .d7sh{background:linear-gradient(90deg,var(--red-soft),transparent 75%);color:var(--red)}
#hdr .d7sh{border-bottom:1px solid var(--line-soft);padding:8px 14px}
#hdr .d7sh .tot,#hdr .d7r .a{font-family:var(--num);font-weight:500;letter-spacing:-.02em}
#hdr .d7r{border-top:1px solid var(--line-soft);padding:7px 14px;color:var(--ink);grid-template-columns:96px minmax(0,1fr) 92px 108px}
#hdr .d7r .t{min-width:0}
@media(max-width:900px){#hdr .d7r{grid-template-columns:88px minmax(0,1fr) auto}}
#hdr .d7r:hover{background:var(--row-hover);box-shadow:inset 3px 0 0 var(--accent)}
#hdr .d7r .d{font-family:var(--num);font-size:.92em;color:var(--mute)}
#hdr .d7r .c{color:var(--mute)}

/* ─────────────── 7. แถบเครื่องมือ · กระจก ปุ่มเด่นปุ่มเดียว ─────────────── */
html body #mainWrap .workspace-toolbar{background:var(--glass);border:1px solid var(--glass-bd);border-radius:16px;
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--card-shadow)}
#mainWrap .workspace-toolbar .tool-row{border-bottom:1px solid var(--line-soft);padding:8px 12px;gap:8px}
#mainWrap .workspace-toolbar .tool-row:last-child{border-bottom:0}
#mainWrap .workspace-toolbar .btn,#mainWrap .workspace-toolbar .ctl{min-height:40px}
#mainWrap .workspace-toolbar .btn{background:var(--btn-bg);border:1px solid var(--btn-bd);color:var(--ink);
  box-shadow:var(--btn-shadow);font-weight:500;padding-inline:13px}
#mainWrap .workspace-toolbar .btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bd-hover);color:var(--ink);
  box-shadow:var(--btn-shadow-hover);transform:translateY(-1px)}
#mainWrap .workspace-toolbar .btn:active{transform:scale(.97)}
/* ปุ่มหน้าหลักและรายการประจำ · ลดเหลือปุ่มรอง */
#mainWrap .workspace-toolbar .btn.primary:not(.add-row-cta){background:var(--btn-bg);border:1px solid var(--btn-bd);
  color:var(--ink);box-shadow:var(--btn-shadow);font-weight:500}
#mainWrap .workspace-toolbar .btn.primary:not(.add-row-cta):hover{background:var(--btn-bg-hover);border-color:var(--btn-bd-hover);
  color:var(--ink);box-shadow:var(--btn-shadow-hover)}
/* ปุ่มเด่นปุ่มเดียว · เพิ่มรายการ */
#mainWrap .workspace-toolbar .btn.add-row-cta{background:var(--cta);border:1px solid transparent;color:var(--cta-ink);
  box-shadow:var(--cta-shadow);font-weight:600;padding-inline:16px;transform:none}
#mainWrap .workspace-toolbar .btn.add-row-cta:hover{background:var(--cta);color:var(--cta-ink);border-color:transparent;
  box-shadow:var(--cta-shadow-hover);transform:translateY(-1px);filter:saturate(1.1) brightness(1.05)}
#mainWrap .workspace-toolbar .btn.add-row-cta:active{transform:scale(.97)}
/* Notify · ลดความเด่น เหลือขอบและตัวอักษรสีทอง */
#mainWrap .workspace-toolbar .btn.notifyb{background:transparent;border:1px solid var(--amber-bd);color:var(--gold);box-shadow:none}
html[data-theme="dark"] #mainWrap .workspace-toolbar .btn.notifyb{color:var(--gold)}
#mainWrap .workspace-toolbar .btn.notifyb:hover{background:var(--amber-soft);border-color:var(--amber);color:var(--gold);box-shadow:none}
#mainWrap .workspace-toolbar .btn.notifyb.on{background:var(--amber-soft);border-color:var(--amber);color:var(--gold)}
#mainWrap .workspace-toolbar .btn.notifyb .badge{background:var(--amber-soft);color:var(--gold);border-color:var(--amber-bd)}
#mainWrap .workspace-toolbar #routQuickCount{background:var(--accent-soft);color:var(--accent);border-color:transparent}
/* ช่องค้นหา · เรืองตอนกด */
#mainWrap .workspace-toolbar .searchbox .ctl{border-radius:12px;padding:9px 14px;background:var(--field-bg)}
#mainWrap .workspace-toolbar .seg{min-height:40px;border-radius:11px}
#mainWrap .workspace-toolbar .seg button{min-height:32px;padding:5px 10px}
#mainWrap .workspace-toolbar .seg button:hover{background:var(--accent-soft);color:var(--ink)}
#mainWrap .workspace-toolbar .seg button.on{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-shadow)}
#mainWrap .workspace-toolbar .tool-row-title{color:var(--ink-2);font-weight:600}
/* ข้อความสรุปช่วงเวลา · ไม่ตัดทิ้ง ให้ขึ้นบรรทัดใหม่แทน */
#mainWrap .workspace-toolbar .result-count{max-width:none;flex:1 1 300px;min-width:220px;white-space:normal;overflow:visible;
  text-overflow:clip;line-height:1.4;font-size:calc(var(--fs) * .76);color:var(--mute)}
#mainWrap .workspace-toolbar .date-tools>.spacer{flex:0 0 4px}
#mainWrap .alert-inline{background:var(--red-soft);border:1px solid var(--red-bd);border-left:3px solid var(--red);color:var(--red);
  border-radius:10px;box-shadow:0 0 18px -8px var(--red-glow);font-weight:600}
#mainWrap .notify-filterbar{background:linear-gradient(90deg,var(--amber-soft),var(--s2) 70%);border:1px solid var(--amber-bd);border-radius:14px}
#mainWrap .notify-filter-chip{background:var(--s2);border:1px solid var(--line);color:var(--ink);border-radius:10px}
#mainWrap .notify-filter-chip.on{background:var(--seg-on);color:var(--seg-on-ink);border-color:transparent;box-shadow:var(--seg-on-shadow)}
#mainWrap .notify-filter-chip b{background:var(--red-soft);color:var(--red);font-family:var(--num)}

/* ─────────────── 8. ตารางหลัก · ห้องบัญชาการ ─────────────── */
html body #mainWrap .tablewrap{border:1px solid transparent;border-radius:16px;box-shadow:var(--table-shadow);
  background:linear-gradient(var(--s3),var(--s3)) padding-box,var(--frame-bd) border-box}
/* ขอบไล่สีบาง ๆ ที่แถบเครื่องมือ (กระจก จึงวาดเป็นเส้นขอบแยกชั้น ไม่ให้สีขอบทะลุพื้น) */
#mainWrap .workspace-toolbar::before,#hdr .header-actions::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;background:var(--frame-bd);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#hdr .header-actions{position:relative}
#hdr .header-actions::before{background:linear-gradient(90deg,rgba(56,189,248,.45),rgba(148,180,255,.10) 40%,rgba(148,180,255,.10) 70%,rgba(45,212,191,.35))}
#mainWrap .tablewrap::-webkit-scrollbar{width:10px;height:10px}
#mainWrap .tablewrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:2px solid var(--s3)}
#mainWrap .tablewrap::-webkit-scrollbar-thumb:hover{background:var(--accent)}
#mainWrap .tablewrap::-webkit-scrollbar-track,#mainWrap .tablewrap::-webkit-scrollbar-corner{background:transparent}
#mainWrap .tablewrap>table{font-size:calc(var(--fs) * .9)}

/* หัวตาราง · สีเทา ไม่ใช้ตัวพิมพ์ใหญ่ เส้นเรืองบาง ๆ ใต้หัว */
#mainWrap .tablewrap>table>thead th{background:var(--thead-bg)!important;color:var(--mute);font-weight:500;
  font-size:calc(var(--fs) * .8);letter-spacing:0;text-transform:none;padding:11px 8px;
  border-bottom:1px solid var(--line)!important;
  box-shadow:var(--thead-shadow)}
#mainWrap .tablewrap>table>thead th:hover{color:var(--ink)}
#mainWrap .tablewrap>table>thead th.act{color:var(--accent)}
#mainWrap .tablewrap>table>thead th .ar{opacity:.35}
#mainWrap .tablewrap>table>thead th .sno{background:var(--accent);color:var(--cta-ink)}
#mainWrap .tablewrap>table>thead th.payallh label{color:var(--mute);font-size:calc(var(--fs) * .7)}
/* จับลากความกว้าง · อยู่ในหัวคอลัมน์ทั้งอัน จับง่าย ไม่ทับคอลัมน์ข้าง */
#mainWrap .tablewrap>table>thead th .rz{right:0;width:10px;z-index:9}
#mainWrap .tablewrap>table>thead th .rz::after{left:4px;width:2px;top:24%;height:52%}
#mainWrap .tablewrap>table>thead th:hover .rz::after{background:var(--line-strong)}
#mainWrap .tablewrap>table>thead th .rz:hover::after,#mainWrap .tablewrap>table>thead th .rz.on::after{background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow)}

/* คืนความกว้าง 3 คอลัมน์ที่หน้าเดิมบีบจน 0 (รายละเอียด 280 · หมายเหตุ 200 · 200)
   ไม่ใช้ !important · ถือค่าไว้ด้วยชั้นแอนิเมชันที่หยุดนิ่ง เฉพาะตอนที่ช่อง style ยังเป็นเปอร์เซ็นต์ของหน้าเดิม
   พอผู้ใช้ลากขอบ app.js เขียนความกว้างเป็นพิกเซลลงช่อง style ตัวเลือกนี้ไม่ตรงอีก ความกว้างที่ลากจึงมีผลทันที */
@keyframes cf-hold-280{from,to{width:280px}}
@keyframes cf-hold-200{from,to{width:200px}}
#mainWrap thead th[data-k="detail"][style*="%"]{animation:cf-hold-280 1s linear 0s 1 normal both paused}
#mainWrap thead th[data-col="note_nat"][style*="%"],
#mainWrap thead th[data-col="note_mind"][style*="%"]{animation:cf-hold-200 1s linear 0s 1 normal both paused}
/* กดดับเบิลคลิกคืนค่า (ช่อง style ว่าง) · ยังเห็นคอลัมน์อยู่ ไม่หดกลับเป็น 0 */
#mainWrap thead th[data-k="detail"]:not([style*="width"]){width:280px}
#mainWrap thead th[data-col="note_nat"]:not([style*="width"]),
#mainWrap thead th[data-col="note_mind"]:not([style*="width"]){width:200px}

/* แถวข้อมูล · เส้นคั่นจาง ใช้ที่ว่างแทนเส้น */
#tb td{border:0;border-bottom:1px solid var(--row-line);padding:0 6px;height:37px;color:var(--ink);vertical-align:middle;
  background-clip:padding-box}
#tb td.c{padding:0 9px;border:0;border-bottom:1px solid var(--row-line);border-radius:0}
#tb td.c:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:8px}
#tb tr{background:transparent;transition:background-color .14s var(--ease)}
#tb tr[data-id]:hover{background:var(--row-hover)}
/* ชี้แถว · แถบฟ้าเรืองซ้าย ต่างจากแถวยอดธนาคารที่เป็นแถบน้ำเงินทึบ
   เงาช่องแรกมี 3 ชั้นคงที่เสมอ (แถบ · แสงเรือง · เงาช่องตรึง) เปลี่ยนแค่สีผ่านตัวแปร แถบจึงค่อย ๆ เรืองขึ้นได้จริง */
#tb td.grip{--bar:transparent;--glow:transparent;--tline:transparent;--tglow:transparent}
#tb tr[data-id]:hover>td.grip{--bar:var(--accent);--glow:var(--accent-glow)}
#tb td[data-f="date"],#tb td[data-f="due"]{font-family:var(--num);font-size:.94em;color:var(--ink-2);letter-spacing:-.01em}
#tb td[data-f="detail"]{font-weight:500;color:var(--ink)}
#tb td[data-f="inst"]{font-family:var(--num);color:var(--mute);font-size:.92em}
#tb td[data-f="note_nat"],#tb td[data-f="note_mind"]{color:var(--ink-2);font-size:.94em}
#tb td.num,#tb td.cin,#tb td.cout,#tb td.balcell{font-family:var(--num);font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
#tb td.num[style*="#c8cdd6"]{color:var(--mute-2)!important}
/* รับ = เขียว ▲ · จ่าย = แดง ▼ · เลิกทาสีเต็มช่อง */
#tb td.cin{color:var(--green);background:transparent}
#tb td.cout{color:var(--red);background:transparent}
#tb td.cin:not(.empty)::before,#tb td.cout:not(.empty)::before{font-size:.6em;margin-right:6px;vertical-align:.2em;opacity:.85}
#tb td.cin:not(.empty)::before{content:"▲"}
#tb td.cout:not(.empty)::before{content:"▼"}
/* แถวยอดธนาคารไม่ใช่เงินเข้า · ไม่ใส่ลูกศร ▲ (Codex ข้อ 3 · เจ้าของอนุมัติแก้ 24 ก.ย.) */
#tb tr.bal td.cin:not(.empty)::before{content:none}
#tb td.cin:focus-within::before,#tb td.cout:focus-within::before{content:none}
#tb td.c.empty::after{color:var(--mute-2)}
/* ยอดตามแผน · สีกลาง แดงเฉพาะติดลบ · แถวยอดธนาคารเป็นสีฟ้า */
#tb td.balcell,#tb td.balcell.pos{color:var(--ink);background:transparent;font-weight:500}
#tb td.balcell.neg{color:var(--red);background:transparent;font-weight:600}
#tb td.balcell.editable{color:var(--blue);font-weight:600}
/* ป้ายหมวด · จุดสีนำหน้า ตัวอักษรกลาง */
#mainWrap .chip2{background:var(--chip-bg)!important;color:var(--ink-2)!important;border:1px solid var(--chip-bd);
  border-radius:99px;padding:1px 9px 1px 7px;font-weight:500;font-size:.86em;box-shadow:none;
  display:inline-flex;align-items:center;gap:6px;line-height:1.55}
#mainWrap .chip2::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--dot,var(--slate));
  box-shadow:0 0 7px -1px var(--dot,transparent)}
#mainWrap .chip2[style*="#175cd3"]{--dot:var(--blue)}
#mainWrap .chip2[style*="#4d7c0f"]{--dot:var(--green)}
#mainWrap .chip2[style*="#a11a6b"]{--dot:var(--pink)}
#mainWrap .chip2[style*="#b42318"]{--dot:var(--red)}
#mainWrap .chip2[style*="#b54708"]{--dot:var(--amber)}
#mainWrap .chip2[style*="#475467"]{--dot:var(--slate)}
#mainWrap .chip2[style*="#5925dc"]{--dot:var(--violet)}
#mainWrap .chip2[style*="#3538cd"]{--dot:var(--indigo)}
#mainWrap .chip2[style*="#026aa2"]{--dot:var(--sky)}
#mainWrap .chip2[style*="#c4320a"]{--dot:var(--orange)}
#mainWrap .chip2[style*="#344054"]{--dot:var(--mute)}
/* คอลัมน์หมวดแคบ (104) · ป้ายต้องพอดีช่อง ไม่ถูกตัดเป็นจุดสามจุด */
#tb td[data-f="cat"]{padding:0 5px}
#tb td[data-f="cat"] .chip2{padding:1px 7px 1px 6px;gap:5px;font-size:.82em}
/* อนุมัติ · สีบอกความหมาย */
#tb td[data-f="approval"] .chip2[style*="#4d7c0f"]{color:var(--green)!important;border-color:var(--green-bd)}
#tb td[data-f="approval"] .chip2[style*="#b54708"]{color:var(--amber)!important;border-color:var(--amber-bd)}
#tb td[data-f="approval"] .chip2[style*="#b42318"]{color:var(--red)!important;border-color:var(--red-bd)}
/* สถานะ */
#mainWrap .status-chip{border-radius:99px;padding:1px 9px;font-weight:500;font-size:.86em;border:1px solid transparent;line-height:1.55}
#mainWrap .status-paid{background:var(--green-soft);color:var(--green);border-color:var(--green-bd)}
#mainWrap .status-wait{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-bd)}
#mainWrap .status-partial{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-bd)}
#mainWrap .status-plan{background:transparent;color:var(--ink-2);border-color:var(--line-strong)}
#mainWrap .status-skip{background:var(--chip-bg);color:var(--mute);border-color:var(--chip-bd)}
/* เลยกำหนด · เรืองแดงเบา ๆ */
#mainWrap .age{font-family:var(--num);font-weight:500;font-size:.84em;border-radius:99px;padding:2px 8px;box-shadow:none;letter-spacing:-.01em}
#mainWrap .age.od{background:var(--red-soft);color:var(--red);box-shadow:0 0 0 1px var(--red-bd),0 0 14px -3px var(--red-glow)}
#mainWrap .age.soon{background:var(--amber-soft);color:var(--amber);box-shadow:0 0 0 1px var(--amber-bd)}
#mainWrap .age.ok{background:var(--green-soft);color:var(--green)}
#mainWrap .age.non{background:transparent;color:var(--mute-2);box-shadow:none}
#tb td.editby{color:var(--mute)}
#tb .hbadge{background:var(--chip-bg);color:var(--mute)}
/* ปุ่มแทรก · หน้าเดิมจางทั้งช่องด้วย opacity ทำให้เส้นคั่นใต้ช่องจางตาม · จางเฉพาะเครื่องหมายแทน */
#tb td.ins{opacity:1;color:color-mix(in srgb,var(--accent) 76%,var(--s3))}
#tb tr:hover td.ins,#tb td.ins:hover{opacity:1;color:var(--accent)}
#tb .grip{color:var(--mute-2)}

/* ช่องตรึงซ้าย (ลากสลับ) และขวา (จัดการ) · พื้นทึบตามแถว
   หน้าเดิมให้หัว "จัดการ" อยู่ชั้นต่ำกว่าหัวคอลัมน์อื่น (7 กับ 12) หัวอื่นเลยทับจนมองไม่เห็น · ยกขึ้นให้ตรงกับไอคอน */
html body #tb td.grip,html body #tb td.rowact{background:var(--s3)}
html body #mainWrap .tablewrap>table>thead th.rowact{text-align:center;padding:11px 6px;z-index:14}
html body #mainWrap .tablewrap>table>thead th.grip{z-index:14}
#tb td.grip{padding:0 2px;text-align:center;overflow:visible;
  transition:box-shadow .18s var(--ease),background-color .14s var(--ease)}
#tb td.ins{padding:0 2px;text-align:center}
#tb td[style*="text-align:center"]{padding:0 4px}
html body #tb td.grip{box-shadow:inset 3px 0 0 var(--bar),inset 22px 0 18px -16px var(--glow),inset 0 -2px 0 var(--tline),
  inset 0 -9px 10px -9px var(--tglow),10px 0 14px -12px var(--sticky-shadow)}
#tb td.rowact,#mainWrap .tablewrap>table>thead th.rowact{box-shadow:-12px 0 16px -12px var(--sticky-shadow)}
#tb td.rowact{padding:0 6px;transition:background-color .14s var(--ease)}
#tb td.rowact .rowactions{gap:5px}
#tb td.rowact .rowaction{color:var(--mute);border-radius:8px;width:25px;height:25px;
  transition:background-color .14s var(--ease),color .14s var(--ease)}
#tb td.rowact .rowaction.rowrec{border:1px solid var(--line-strong);color:var(--accent);background:transparent}
/* ปุ่มแก้ไข ✎ · ปุ่มหลักของแถว สีน้ำเงินเด่นกว่าปุ่มอื่น (เพิ่ม 24 ก.ย.) */
#tb td.rowact .rowaction.rowedit{color:var(--accent);background:var(--accent-soft);font-size:1.02em}
#tb td.rowact button.rowaction:hover{background:var(--accent-soft);color:var(--accent);transform:none}
#tb td.rowact button.rowaction[data-act="del"]:hover{background:var(--red-soft);color:var(--red)}
#tb td.rowact .flagb.on{color:var(--orange)}
html body #tb tr[data-id]:hover td.grip,html body #tb tr[data-id]:hover td.rowact{background:var(--row-hover)}
/* ขอบซ้ายของช่องจัดการ · ไล่จางทับของที่เลื่อนมาอยู่ใต้ช่องตรึง ไม่เหลือเศษขีดเล็ก ๆ ค้างให้ดูเหมือนภาพเสีย */
#tb tr{--rowbg:var(--s3)}
#tb tr[data-id]:hover,#tb tr.fresh{--rowbg:var(--row-hover)}
#tb tr.picked{--rowbg:var(--picked)}
#tb td.rowact::before,#mainWrap .tablewrap>table>thead th.rowact::before{content:"";position:absolute;top:0;bottom:0;
  left:-22px;width:22px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--rowbg))}
#mainWrap .tablewrap>table>thead th.rowact::before{--rowbg:var(--thead-solid)}

/* ประมาณการ = แถบอำพันซ้าย ไล่จางออก · ถูกทัก = แถบส้ม · ยอดธนาคาร = แถบน้ำเงินทึบ */
#tb tr.fc{background:linear-gradient(90deg,var(--amber-tint) 0,transparent 36%)}
#tb tr.flag{background:linear-gradient(90deg,var(--orange-tint) 0,transparent 36%)}
#tb tr.bal{background:linear-gradient(90deg,var(--blue-tint) 0,transparent 55%)}
html body #tb tr.fc td,html body #tb tr.flag td,html body #tb tr.bal td{background-color:transparent}
html body #tb tr.fc td.grip{background:linear-gradient(var(--amber-tint),var(--amber-tint)),var(--s3);--bar:var(--amber)}
html body #tb tr.flag td.grip{background:linear-gradient(var(--orange-tint),var(--orange-tint)),var(--s3);--bar:var(--orange)}
html body #tb tr.bal td.grip{background:linear-gradient(var(--blue-tint),var(--blue-tint)),var(--s3);--bar:var(--blue)}
html body #tb tr.fc td.rowact,html body #tb tr.flag td.rowact,html body #tb tr.bal td.rowact{background:var(--s3)}
#tb tr.fc:hover{background:linear-gradient(90deg,var(--amber-tint) 0,transparent 36%),var(--row-hover)}
#tb tr.flag:hover{background:linear-gradient(90deg,var(--orange-tint) 0,transparent 36%),var(--row-hover)}
#tb tr.bal:hover{background:linear-gradient(90deg,var(--blue-tint) 0,transparent 55%),var(--row-hover)}
html body #tb tr.fc:hover td.grip{background:linear-gradient(var(--amber-tint),var(--amber-tint)),var(--row-hover);--bar:var(--amber);--glow:var(--accent-glow)}
html body #tb tr.flag:hover td.grip{background:linear-gradient(var(--orange-tint),var(--orange-tint)),var(--row-hover);--bar:var(--orange);--glow:var(--accent-glow)}
html body #tb tr.bal:hover td.grip{background:linear-gradient(var(--blue-tint),var(--blue-tint)),var(--row-hover);--bar:var(--blue);--glow:var(--accent-glow)}
/* แถวที่เลือก */
html body #tb tr.picked td{background:var(--picked)}
html body #tb tr.picked td.grip{--bar:var(--accent)}
html body #tb tr.fresh{background:var(--accent-soft)!important}
html body #tb tr.fresh td.rowact,html body #tb tr.fresh td.grip{background:var(--row-hover)}
/* วันนี้ · เส้นกุหลาบเรือง · ป้ายวันนี้อยู่บนแถวหัววัน อ่านออกเต็มคำ */
#tb tr.today td{box-shadow:inset 0 -2px 0 var(--today),inset 0 -9px 10px -9px var(--today-glow)!important}
html body #tb tr.today td.grip{--tline:var(--today);--tglow:var(--today-glow);
  box-shadow:inset 3px 0 0 var(--bar),inset 22px 0 18px -16px var(--glow),inset 0 -2px 0 var(--tline),
  inset 0 -9px 10px -9px var(--tglow),10px 0 14px -12px var(--sticky-shadow)!important}
html body #tb tr.today td.rowact{box-shadow:inset 0 -2px 0 var(--today),inset 0 -9px 10px -9px var(--today-glow),-12px 0 16px -12px var(--sticky-shadow)!important}
html body #tb tr.today td:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;padding:0;
  margin:0 2px 0 0;background:var(--today);box-shadow:0 0 8px var(--today);vertical-align:2px}
#tb tr.daysum:has(+ tr.today)>td:first-child::after{content:"วันนี้";display:inline-block;margin-left:10px;padding:0 8px;
  border-radius:99px;font:600 calc(var(--fs) * .7)/1.6 var(--ui);color:#fff;background:var(--today);
  box-shadow:0 0 14px -2px var(--today-glow);vertical-align:1px}
/* ป้ายวันนี้สำรอง · แถววันนี้แถวแรกที่ไม่มีแถวหัววันอยู่ข้างบน (ปิดเส้นแบ่งวัน เรียงแบบอื่น หรือเป็นแถวแรกที่วาดบนจอ)
   ติดป้ายหน้ารายละเอียด ให้อ่านออกทุกสภาพ (Codex ข้อ 1 · เจ้าของอนุมัติแก้ 24 ก.ย.) */
html body #tb tr:not(.daysum):not(.today)+tr.today>td[data-f="detail"]::before,
html body #tb tr.today:first-child>td[data-f="detail"]::before{content:"วันนี้";display:inline-block;margin-right:8px;
  padding:0 8px;border-radius:99px;font:600 calc(var(--fs) * .7)/1.6 var(--ui);color:#fff;background:var(--today);
  box-shadow:0 0 14px -2px var(--today-glow);vertical-align:1px}
/* ตอนกดแก้รายละเอียด ป้ายยังอยู่ · ย้ายไปลอยมุมขวาในช่อง และเว้นที่ในช่องพิมพ์ ไม่บีบไม่ทับ (Codex ตรวจซ้ำ ข้อ 1) */
html body #tb tr:not(.daysum):not(.today)+tr.today>td[data-f="detail"]:focus-within::before,
html body #tb tr.today:first-child>td[data-f="detail"]:focus-within::before{position:absolute;top:50%;right:6px;
  transform:translateY(-50%);margin:0;pointer-events:none;z-index:2}
html body #tb tr:not(.daysum):not(.today)+tr.today>td[data-f="detail"]:focus-within input.cell,
html body #tb tr.today:first-child>td[data-f="detail"]:focus-within input.cell{padding-right:64px}
/* จอใหญ่ช่องรายละเอียดไม่ได้ตรึง จึงต้องเป็นกรอบอ้างอิงให้ป้ายลอย · จอเล็กตรึงอยู่แล้ว ห้ามเปลี่ยน */
@media(min-width:721px){
  html body #tb tr:not(.daysum):not(.today)+tr.today>td[data-f="detail"]:focus-within,
  html body #tb tr.today:first-child>td[data-f="detail"]:focus-within{position:relative}
}
/* แถวหัววัน · สูงเท่าแถวปกติ มีแถบสีซ้าย */
html body #tb tr.daysum td{background:var(--s4);color:var(--ink);font-weight:600;font-size:.94em;
  border-bottom:1px solid var(--line);box-shadow:none}
html body #tb tr.daysum td:first-child{font-family:var(--num);letter-spacing:-.01em;
  box-shadow:inset 3px 0 0 var(--line-strong)}
#tb tr.daysum .dn,#tb tr.daysum .dsl{font-family:var(--ui);color:var(--mute);font-weight:400}
#tb tr.daysum td.num{font-family:var(--num);font-weight:500;letter-spacing:-.02em;text-align:right;padding-right:9px}
#tb tr.daysum td.dsin,#tb tr.daysum td.dsnet.up{color:var(--green)}
#tb tr.daysum td.dsout,#tb tr.daysum td.dsnet.down{color:var(--red)}

/* แถวยอดรวม · แถบกระจกขอบเรือง ตัวเลขใหญ่ขึ้น (ยังไม่แก้บั๊กช่องเลื่อน · ดูภาพจำลองแยก) */
html body #mainWrap tfoot#foot td{background:var(--foot-bg);border-top:0;color:var(--ink);font-family:var(--num);
  font-size:calc(var(--fs) * 1.02);font-weight:600;letter-spacing:-.02em;padding:13px 8px;
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 var(--foot-line),0 -12px 26px -16px var(--foot-glow)}
html body #mainWrap tfoot#foot td:nth-child(2){font-family:var(--ui);font-weight:500;color:var(--ink-2);font-size:calc(var(--fs) * .84);letter-spacing:0}
#mainWrap tfoot#foot #fRows{font-family:var(--num);color:var(--ink);font-size:1.08em}
#mainWrap tfoot#foot .fskip{color:var(--amber)}
#mainWrap tfoot#foot #sumIn{color:var(--green)}
#mainWrap tfoot#foot #sumOut{color:var(--red)}
#mainWrap tfoot#foot td[colspan="2"]{font-family:var(--ui);color:var(--mute)!important}
#mainWrap tfoot#foot #sumNet{font-family:var(--num);font-weight:600}

/* คำอธิบายใต้ตาราง */
#mainWrap .hint{color:var(--mute);border-top:1px dashed var(--line)}
#mainWrap .hint b{color:var(--ink-2);font-weight:600}
#mainWrap .hint b[style]{background:linear-gradient(90deg,var(--amber-tint),transparent)!important;
  border:0!important;box-shadow:inset 3px 0 0 var(--amber);color:var(--amber)}

/* ─────────────── 9. แผงทั่วไป · แดชบอร์ด ต้องเก็บเงิน รายการประจำ ถังขยะ ประวัติ ─────────────── */
html body #mainWrap .panel,html body #mainWrap .kpi,html body #mainWrap .laybar,html body #mainWrap .dashsum{
  background:var(--s2);border:1px solid var(--line);border-radius:16px;box-shadow:var(--card-shadow);color:var(--ink)}
#mainWrap .panel h3,#mainWrap .laybar,#mainWrap .dsline{letter-spacing:-.01em}
#mainWrap .panel h3{font-weight:600;color:var(--ink)}
#mainWrap .panel .q{color:var(--mute)}
#mainWrap .hpanel{border-left:1px solid var(--line);box-shadow:inset 3px 0 0 var(--accent),var(--card-shadow)}
#mainWrap .dashsum{border-left:1px solid var(--line);box-shadow:inset 3px 0 0 var(--green),var(--card-shadow)}
#mainWrap .dsline b{font-family:var(--num);font-weight:600;letter-spacing:-.02em}
#mainWrap .dsline b.good{color:var(--green)} #mainWrap .dsline b.bad{color:var(--red)}
#mainWrap .dsrun{color:var(--mute)} #mainWrap .dsrun.hot{color:var(--red)}
html body #mainWrap .hcard,html body #mainWrap .wic,html body #mainWrap .rtmetric,html body #mainWrap .pocell{
  background:var(--s3);border:1px solid var(--line);border-radius:14px;color:var(--ink)}
#mainWrap .hcard:hover{border-color:var(--btn-bd-hover);box-shadow:var(--card-shadow-hover)}
#mainWrap .hcard .l,#mainWrap .kpi .lab,#mainWrap .wic .l{color:var(--mute)}
#mainWrap .hcard .v,#mainWrap .kpi .val,#mainWrap .wic .v,#mainWrap .rtmetric b,#mainWrap .rtleft,#mainWrap .pocell .v{
  font-family:var(--num);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#mainWrap .hcard .s2,#mainWrap .kpi .sub{color:var(--mute)}
#mainWrap .hcard .v[style*="#b54708"],#mainWrap .kpi .val[style*="#b54708"]{color:var(--amber)!important}
#mainWrap .kpi::before{background:linear-gradient(90deg,var(--accent),var(--teal));opacity:.8}
#mainWrap .whatif,#mainWrap .nb,#mainWrap .agebar,#mainWrap .rcg,#mainWrap .mbchart{border-color:var(--line)}
#mainWrap .wih,#mainWrap .nbh,#mainWrap .abh,#mainWrap .rcgh{background:var(--s4);color:var(--ink)}
#mainWrap .nbr,#mainWrap .abr,#mainWrap .rcr{border-top:1px solid var(--line-soft)}
#mainWrap .nbr:hover,#mainWrap .rcr:hover{background:var(--row-hover)}
#mainWrap .nbr .a,#mainWrap .abr .vl,#mainWrap .rcr .a,#mainWrap .rcgh .tot,#mainWrap .rank .vl,#mainWrap .dupi .a{
  font-family:var(--num);font-weight:500;letter-spacing:-.02em}
#mainWrap .nbr .d,#mainWrap .rcr .d{font-family:var(--num);font-size:.94em}
#mainWrap .abr.zero{opacity:1}
#mainWrap .abr.zero .nm,#mainWrap .abr.zero .n,#mainWrap .abr.zero .vl{color:var(--mute)}
#mainWrap .abr .bar2{background:linear-gradient(90deg,rgba(255,107,129,.55),var(--red));box-shadow:0 0 10px -2px var(--red-glow)}
#mainWrap .rcr.fc{background:linear-gradient(90deg,var(--amber-tint),transparent 40%);box-shadow:inset 3px 0 0 var(--amber)}
#mainWrap .recvlegend{background:var(--s3);border-color:var(--line)}
#mainWrap .recvkey.forecast i{background:linear-gradient(90deg,var(--amber-tint),transparent);border-color:var(--amber)}
#mainWrap .recvkey.confirmed i{background:var(--s2)}
/* กระดานรายเดือน · เลิกทาสีเต็มคอลัมน์ */
html body #mainWrap .mbtb td.cin,html body #mainWrap .mbtb td.cout,html body #mainWrap .mbtb td.cbal{background:transparent;font-family:var(--num);font-weight:500}
#mainWrap .mbtb td.cin{color:var(--green)} #mainWrap .mbtb td.cout{color:var(--red)}
#mainWrap .mbtb td.cbal{color:var(--blue)} #mainWrap .mbtb td.cbal.neg{color:var(--red)}
#mainWrap .mbtb td.num{font-family:var(--num);letter-spacing:-.02em}
#mainWrap .mbtb tr.nowm td{background:var(--accent-soft)}
#mainWrap .mbtb tr.futm td:first-child,#mainWrap .mbtb tr.futm td.mute{color:var(--mute)}
#mainWrap .rcr .ag{color:var(--mute)}
#mainWrap .rcr .ag.warn{color:var(--amber)}
#mainWrap .rcr .ag.bad{color:var(--red)}
#mainWrap .mbtb tr.dangerm td:first-child{border-left:0;box-shadow:inset 3px 0 0 var(--red)}
#mainWrap .tb2 td,#mainWrap .tb2 th{border-bottom:1px solid var(--line-soft)}
#mainWrap .tb2 th{color:var(--mute);font-weight:500;background:var(--s4)}
#mainWrap .tb2 tbody tr:hover td{background:var(--row-hover)}
/* ตารางไขว้ */
html body #mainWrap .heat tr.rowin td,html body #mainWrap .heat tr.rowout td,html body #mainWrap .heat tr.rowbal td{background:var(--s2)}
#mainWrap .heat tr.rowin td{color:var(--green);border-top:1px solid var(--green-bd)}
#mainWrap .heat tr.rowout td{color:var(--red);border-top:1px solid var(--red-bd)}
#mainWrap .heat tr.rowbal td{color:var(--blue);border-top:1px solid var(--blue-bd)}
#mainWrap .heat th,#mainWrap .heat td:first-child,#mainWrap .heat td:last-child{background:var(--s2)}
#mainWrap .heat td,#mainWrap .heat th{font-family:var(--num);border-bottom-color:var(--line-soft)}
#mainWrap .heat td:first-child,#mainWrap .heat th.hcol{font-family:var(--ui)}
#mainWrap .heat th.z-now,#mainWrap .heat th.tot{background:var(--s4);color:var(--accent)}
#mainWrap .heat tr.zhead.zin td{background:var(--green-soft);color:var(--green)}
#mainWrap .heat tr.zhead.zout td{background:var(--red-soft);color:var(--red)}
#mainWrap .heatwrap{border-color:var(--line)}
#mainWrap .insight{background:var(--accent-soft);border-color:var(--blue-bd);color:var(--ink)}
#mainWrap .rank{border-bottom-color:var(--line-soft)}
#mainWrap .rank:hover{background:var(--row-hover)}
#mainWrap .rank .bar2{background:linear-gradient(90deg,rgba(255,107,129,.45),var(--red))}
#mainWrap .legend{color:var(--mute)}
#mainWrap .dn.ok{background:var(--s3);color:var(--mute);border-color:var(--line)}
#mainWrap .dn.bad{background:var(--red-soft);color:var(--red);border-color:var(--red-bd)}
/* สีกราฟที่หน้าเดิมเขียนตายตัว · ย้อมตามโหมด */
#mainWrap svg [fill="#4d7c0f"]{fill:var(--green)}
#mainWrap svg [stroke="#4d7c0f"]{stroke:var(--green)}
#mainWrap svg [fill="#b42318"]{fill:var(--red)}
#mainWrap svg [stroke="#b42318"]{stroke:var(--red)}
#mainWrap svg [fill="#0b5cff"]{fill:var(--blue)}
#mainWrap svg [stroke="#0b5cff"]{stroke:var(--blue)}
#mainWrap svg [stroke="#e4e7ec"]{stroke:var(--line)}
#mainWrap svg [fill="#98a2b3"],#mainWrap svg [fill="#667085"]{fill:var(--mute)}
#mainWrap svg [fill="#b54708"]{fill:var(--amber)}
#mainWrap svg [fill="#e11d48"]{fill:var(--today)}
#mainWrap svg [stroke="#e11d48"]{stroke:var(--today)}
/* รายการประจำ */
html body #mainWrap .rtc,html body #mainWrap .detc,html body #mainWrap .dupc{background:var(--s3);border:1px solid var(--line);border-radius:14px}
#mainWrap .rtc:hover{border-color:var(--btn-bd-hover);box-shadow:var(--card-shadow-hover)}
#mainWrap .rtb,#mainWrap .rtf{color:var(--mute)}
#mainWrap .rtf b{color:var(--ink)}
#mainWrap .rtmetric span,#mainWrap .rtmetric small{color:var(--mute)}
#mainWrap .rtbar{background:var(--line);height:6px}
#mainWrap .rtbar span{background:linear-gradient(90deg,var(--teal),var(--accent));box-shadow:0 0 10px var(--accent-glow)}
#mainWrap .tag{border:1px solid transparent}
#mainWrap .tag.done,#mainWrap .tag.in{background:var(--green-soft);color:var(--green);border-color:var(--green-bd)}
#mainWrap .tag.loan,#mainWrap .tag.vary,#mainWrap .tag.auto{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-bd)}
#mainWrap .tag.out{background:var(--red-soft);color:var(--red);border-color:var(--red-bd)}
#mainWrap .tag.same{background:var(--accent-soft);color:var(--accent)}
#mainWrap .loan-summary-panel{padding:0}
#mainWrap .loan-summary-head>span{background:var(--accent-soft);color:var(--accent)}
/* ชื่อเงินกู้เห็นเต็ม */
#mainWrap .loan-summary-table th:first-child{width:260px}
#mainWrap .loan-summary-table td:first-child{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
#mainWrap .loan-summary-table td:first-child b{font-weight:600}
#mainWrap .loan-summary-table td.num{font-family:var(--num);letter-spacing:-.02em}
#mainWrap .loan-summary-table td small{color:var(--mute);font-family:var(--num)}
#mainWrap .adoptbar{background:linear-gradient(135deg,var(--amber-soft),var(--s2));border-color:var(--amber-bd)}
#mainWrap .dupi{background:var(--s3)}
#mainWrap .dupi:hover{background:var(--row-hover)}
#mainWrap .dupr{background:var(--line)}
#mainWrap .rangebar{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#mainWrap .whochip{background:var(--accent-soft);color:var(--accent)}

/* ─────────────── 10. หน้าต่างและลิ้นชัก · เบลอพื้นหลัง หัวหน้าต่างไล่สี ─────────────── */
html body .modal{background:var(--scrim);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%)}
html body .modal.attach-modal,html body .modal.attach-confirm-modal{background:var(--scrim)}
html body .mbox{background:var(--s2);color:var(--ink);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.55),inset 0 1px 0 var(--glass-hi)}
html body .mbox p,html body .mbox .q{color:var(--mute)}
html body #attachModal .attach-box{background:var(--s2);border-left:1px solid var(--line);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.6)}
html body #attachModal .attach-head{background:linear-gradient(115deg,var(--accent-soft) 0%,var(--green-soft) 42%,transparent 78%),var(--s2);
  border-bottom:1px solid var(--line)}
#attachModal .attach-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent),var(--teal) 45%,transparent)}
#attachModal .attach-head{position:relative}
#attachModal .attach-kicker{color:var(--accent)}
#attachModal .attach-head h3{color:var(--ink);letter-spacing:-.015em;font-weight:600}
#attachModal .attach-manual-intro{border-bottom-color:var(--line)}
#attachModal .attach-manual-intro b{color:var(--ink);font-weight:600}
#attachModal .attach-review-grid label{color:var(--ink-2);font-weight:500}
#attachModal .attach-review-grid .ctl{min-height:42px}
#attachModal #attachAmount{font-family:var(--num)}
/* หน้าต่างแก้ไขรายการ (ปุ่ม ✎) · กล่องการจ่ายจริง และช่องที่เพิ่งกรอกจากภาพ */
#attachModal .attach-edit-pay{display:grid;align-content:start;gap:4px;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--s3);font-size:.9em;color:var(--ink-2)}
#attachModal .attach-edit-pay b{font-family:var(--num);font-weight:600;color:var(--ink)}
#attachModal .attach-edit-pay .btn{justify-self:start}
#attachModal .attach-edit-pay-label{font-weight:500}
#attachModal .attach-review-grid .ctl.edit-filled{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 3px var(--accent-ring)}
#attachModal .attach-review-grid .ctl:disabled{opacity:.7;cursor:not-allowed}
/* ช่องที่อยู่แถวเดียวกับกล่องการจ่ายจริง (สูงกว่า) · ป้ายกับช่องกรอกต้องติดกันด้านบน ไม่ถูกดึงห่าง */
#attachModal.attach-edit-mode .attach-review-grid label{align-content:start}
/* มือถือ · หน้าต่างแก้ไขเอาฟอร์มขึ้นก่อน แล้วค่อยพรีวิวภาพ (หน้าต่างไฟล์แนบเดิมยังพรีวิวขึ้นก่อนเหมือนเดิม) */
@media (max-width:700px){
  #attachModal.attach-edit-mode .attach-work-main{order:0}
  #attachModal.attach-edit-mode .attach-preview-panel{order:1}
}
#attachModal .attach-expand{background:transparent;border:1px dashed var(--line-strong);color:var(--accent)}
#attachModal .attach-expand:hover{background:var(--accent-soft);border-color:var(--accent)}
#attachModal .attach-work-footer{background:var(--s2);border-top:1px solid var(--line)}
#attachModal .attach-preview-panel,#attachModal .attach-context-card,#attachModal .attach-decision{background:var(--s3);border-color:var(--line)}
#attachModal .attach-drop,#attachModal .attach-mode,#attachModal .attach-scan-progress{background:var(--accent-soft)}
html body .filter-panel{background:var(--s2);border-left:1px solid var(--line);color:var(--ink)}
html body .filter-backdrop{background:var(--scrim)}
html body .filter-drawer .advanced-section{background:var(--s3);border-color:var(--line)}
html body .stepmark{background:var(--cta);color:var(--cta-ink)}
html body #drillPanel,html body #drillPanel .dh,html body #drillPanel .dtool,html body #drillPanel .dfoot,html body #drillPanel .dlist{background:var(--s2);border-color:var(--line)}
html body #drillPanel .dsum{background:var(--s4)}
html body .drillbd{background:var(--scrim)}
html body #bulkBar{background:var(--glass);border:1px solid var(--btn-bd-hover);color:var(--ink);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(56,189,248,.18),0 0 30px -10px var(--accent-glow)}
html body #bulkBar .btn{background:var(--btn-bg);border:1px solid var(--btn-bd);color:var(--ink)}
html body #bulkBar .btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bd-hover);color:var(--ink)}
html body #bulkBar .bdel{color:var(--red);border-color:var(--red-bd)}
html body #bulkBar .bcount{color:var(--accent);font-family:var(--num)}
html body #toast{background:var(--s4);color:var(--ink);border:1px solid var(--glass-bd);border-radius:12px;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.6),0 0 0 1px rgba(56,189,248,.12)}
html body #tip{background:#0B1322;border:1px solid rgba(148,180,255,.16);box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
html body #tip .r span:last-child{font-family:var(--num)}

/* ─────────────── 11. หน้าเข้าระบบ · การ์ดกระจก แสงบรรยากาศ ปุ่มไล่สีเรือง ─────────────── */
html body #gate{background:
    radial-gradient(900px 420px at 50% -10%,rgba(56,189,248,.22),transparent 65%),
    radial-gradient(700px 500px at 100% 100%,rgba(45,212,191,.12),transparent 60%),
    radial-gradient(700px 500px at 0% 100%,rgba(244,114,182,.08),transparent 60%),
    linear-gradient(180deg,#F4F8FC,#E6EDF6)}
html[data-theme="dark"] body #gate{background:
    radial-gradient(900px 420px at 50% -10%,rgba(56,189,248,.26),transparent 65%),
    radial-gradient(700px 520px at 100% 100%,rgba(45,212,191,.12),transparent 60%),
    radial-gradient(800px 560px at 0% 100%,rgba(59,130,246,.12),transparent 60%),
    linear-gradient(180deg,#0A1224,#060A11)}
#gate::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="dark"] #gate::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html body #gate .gatebox{position:relative;z-index:1;border:1px solid transparent;border-radius:22px;padding:38px 40px 30px;
  background:linear-gradient(var(--glass),var(--glass)) padding-box,
    linear-gradient(135deg,rgba(56,189,248,.55),rgba(45,212,191,.25) 40%,rgba(148,180,255,.10) 75%) border-box;
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55),inset 0 1px 0 var(--glass-hi),0 0 60px -20px rgba(56,189,248,.35)}
html body #gate .gatebox h1{color:var(--ink);font-weight:600;letter-spacing:-.02em;font-size:calc(var(--fs) * 1.5)}
html body #gate .gatebox p,html body #gate .pinrow,html body #gate .remember{color:var(--mute)}
html body #gate .pinrow{border-top:1px dashed var(--line-strong)}
html body #gate .login input:not([type=checkbox]){background:var(--field-bg);border:1px solid var(--field-bd);color:var(--ink);
  border-radius:12px;padding:12px 14px;min-height:46px;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
html body #gate .login input:not([type=checkbox]):focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring),0 0 24px -6px var(--accent-glow)}
html body #gate .login button{background:var(--cta);color:var(--cta-ink);border:0;border-radius:12px;min-height:48px;
  font-weight:600;box-shadow:var(--cta-shadow);transition:box-shadow .16s var(--ease),transform .12s var(--ease),filter .16s var(--ease)}
html body #gate .login button:hover{box-shadow:var(--cta-shadow-hover);transform:translateY(-1px);filter:brightness(1.05)}
html body #gate .login button:active{transform:scale(.98)}

/* ─────────────── 12. จอเล็ก 375 · ไม่ล้นขอบ ─────────────── */
@media(max-width:1100px){
  #hdr .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:720px){
  main#mainWrap{padding-inline:10px}
  #hdr .hero-top{flex-wrap:wrap;padding:8px 10px 10px 60px;gap:8px}
  #hdr .brand{width:100%;min-height:36px;justify-content:center}
  /* ปุ่มหัวเว็บขึ้นบรรทัดใหม่ได้ ไม่เลื่อนหลุดขอบ */
  html body #hdr .header-actions{flex:1 1 100%;flex-wrap:wrap;overflow:visible;margin-left:-50px;min-width:0;
    justify-content:flex-start;row-gap:2px}
  #hdr .header-actions>.btn{padding:5px 9px;min-height:36px;font-size:calc(var(--fs) * .86)}
  #hdr .header-actions>.seg button{padding:4px 7px}
  /* ป้ายสิทธิ์ผู้ใช้ (ผู้ดูแลระบบ/ผู้ใช้งาน) ต้องเห็นบนมือถือด้วย แค่ย่อลง (Codex ข้อ 2 · เจ้าของอนุมัติแก้ 24 ก.ย.) */
  #hdr .header-actions>.me .mm small{font-size:.72em;line-height:1.15}
  #hdr .tabs{padding:4px 10px 0;overflow-x:auto;scrollbar-width:none}
  #hdr .tabs::-webkit-scrollbar{display:none}
  #hdr .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}
  #hdr .due7{margin:0 10px 10px}
  /* แถบเครื่องมือ */
  #mainWrap .workspace-toolbar{overflow:hidden}
  #mainWrap .workspace-toolbar .command-tools{grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  #mainWrap .workspace-toolbar .home-action{grid-column:1/-1}
  #mainWrap .workspace-toolbar .command-tools .primary-actions{grid-template-columns:1fr 1fr;gap:8px}
  #mainWrap .workspace-toolbar .primary-actions .btn{min-width:0;padding-inline:8px;font-size:calc(var(--fs) * .9)}
  #mainWrap .workspace-toolbar .btn,#mainWrap .workspace-toolbar .ctl{min-height:44px}
  /* แถบช่วงเวลา · อยู่ในกรอบ เลื่อนข้างในได้ถ้ายาว */
  #mainWrap .workspace-toolbar .date-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px;overflow:hidden}
  #mainWrap .workspace-toolbar .date-tools>*{min-width:0}
  #mainWrap .workspace-toolbar .date-tools>.spacer{display:none}
  #mainWrap .workspace-toolbar .date-tools .field-group{display:grid;grid-template-columns:62px minmax(0,1fr);width:100%;gap:6px}
  #mainWrap .workspace-toolbar .date-tools .seg{width:100%;max-width:100%;overflow-x:auto;scrollbar-width:none;min-height:40px}
  #mainWrap .workspace-toolbar .date-tools .seg::-webkit-scrollbar{display:none}
  #mainWrap .workspace-toolbar .date-tools .seg button{flex:1 0 auto;min-width:30px;padding:4px 6px;font-size:calc(var(--fs) * .84)}
  #mainWrap .workspace-toolbar .result-count{flex:none;min-width:0}
  #mainWrap .workspace-toolbar .alert-inline{white-space:normal}
  /* ตาราง · เลิกตรึงคอลัมน์จัดการและช่องลาก ตรึงวันที่กับรายละเอียดแทน */
  html body #mainWrap .tablewrap>table>thead th.rowact,html body #tb td.rowact,
  html body #mainWrap .tablewrap>table>thead th.grip,html body #tb td.grip{position:static;box-shadow:none}
  html body #tb tr.today td.grip,html body #tb tr.today td.rowact{box-shadow:inset 0 -2px 0 var(--today)!important}
  #tb td.rowact::before,#mainWrap .tablewrap>table>thead th.rowact::before{content:none}
  #mainWrap .tablewrap>table>thead th[data-k="date"]{position:sticky;left:0;z-index:13}
  #mainWrap .tablewrap>table>thead th[data-k="detail"]{position:sticky;left:104px;z-index:13;
    box-shadow:var(--thead-shadow),12px 0 16px -12px var(--sticky-shadow)!important}
  #tb td[data-f="date"]{position:sticky;left:0;z-index:4;background:var(--s3)}
  #tb td[data-f="detail"]{position:sticky;left:104px;z-index:4;background:var(--s3);box-shadow:12px 0 16px -12px var(--sticky-shadow)}
  #tb tr[data-id]:hover td[data-f="date"],#tb tr[data-id]:hover td[data-f="detail"]{background:var(--row-hover)}
  #tb tr.fc td[data-f="date"],#tb tr.fc td[data-f="detail"]{background:linear-gradient(var(--amber-tint),var(--amber-tint)),var(--s3)}
  #tb tr.flag td[data-f="date"],#tb tr.flag td[data-f="detail"]{background:linear-gradient(var(--orange-tint),var(--orange-tint)),var(--s3)}
  #tb tr.bal td[data-f="date"],#tb tr.bal td[data-f="detail"]{background:linear-gradient(var(--blue-tint),var(--blue-tint)),var(--s3)}
  #tb tr.picked td[data-f="date"],#tb tr.picked td[data-f="detail"]{background:var(--picked)}
  #tb tr.today td[data-f="detail"]{box-shadow:inset 0 -2px 0 var(--today),12px 0 16px -12px var(--sticky-shadow)!important}
  /* จอเล็ก · รายละเอียด 130 จุด พอดีให้คอลัมน์ยอดเงินหนึ่งคอลัมน์ต่อท้ายส่วนที่ตรึงได้เต็มตัว */
  @keyframes cf-hold-130{from,to{width:130px}}
  #mainWrap thead th[data-k="detail"][style*="%"]{animation-name:cf-hold-130}
  /* จอเล็ก · คอลัมน์วันที่กว้างคงที่ 104 จุด ให้รายละเอียดที่ตรึงไว้ที่ 104 จุดชิดพอดี ไม่ทับวันที่และไม่เว้นช่อง
     แม้เคยลากความกว้างวันที่ไว้บนจอใหญ่ (Codex ข้อ 4 · เจ้าของอนุมัติแก้ 24 ก.ย.) · มือถือลากความกว้างไม่ได้อยู่แล้ว */
  @keyframes cf-hold-104{from,to{width:104px}}
  #mainWrap thead th[data-k="date"]{animation:cf-hold-104 1s linear 0s 1 normal both paused}
  #mainWrap thead th[data-k="detail"]:not([style*="width"]){width:130px}
  #mainWrap .hint span{white-space:normal}
}

/* ─────────────── 13. การเคลื่อนไหว · ปิดทั้งหมดเมื่อเครื่องตั้งไม่เอาการเคลื่อนไหว ─────────────── */
@media(prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{transition-duration:.01ms!important;transition-delay:0s!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;scroll-behavior:auto!important}
  :root body .btn:hover,:root body .btn:active,#hdr .hs:hover,#mainWrap .workspace-toolbar .btn:hover,
  #mainWrap .workspace-toolbar .btn:active,#mainWrap .workspace-toolbar .btn.add-row-cta:hover,
  html body #gate .login button:hover,html body #gate .login button:active{transform:none!important}
}