/* ธีมมืด — สร้างอัตโนมัติด้วย tools/dark-css.mjs จาก styles.css · ห้ามแก้ไฟล์นี้ด้วยมือ (แก้ VARS ที่ dark-vars-office.css แล้วรันใหม่) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e6edf6; --ink2:#b7c5d8; --ink3:#8596ad;
  --line:#2a3a52; --line2:#1c293d; --surface:#152033; --bg:#0c1524;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.45);
  --accent:#5aaef0; --accent-soft:#16304f; --accent-line:#2f5f91;
  --brand-deep:#8fb6ff; --brand-sky:#2f5f91;
  --pink:#ff6f9a; --pink-soft:#3a1828; --pink-line:#6d2b45;
  --ok:#4cc79a; --ok-soft:#10352a; --ok-line:#1f5c46;
  --warn:#f2b45a; --warn-soft:#382a12; --warn-line:#6b5220;
  --danger:#ff7d95; --danger-soft:#3d1621; --danger-line:#6e2b3b;
  --rail:#101a2b; --rail-2:#1a2840; --rail-line:#22324a;
  --rail-ink:#a9c8ff; --rail-ink2:#86b0f2; --rail-on:#1f5fbf; --rail-hover:#e3eeff;
  --s8:#90a4ae;
}
:root[data-theme="dark"] body{background-image:none}
:root[data-theme="dark"] img.logo-img,:root[data-theme="dark"] .rail img{filter:none}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:var(--ink3)}


:root[data-theme="dark"] tbody tr:hover td{background:color-mix(in srgb, #f8fbfe 16%, #152033)}
:root[data-theme="dark"] .p-mut{background:color-mix(in srgb, #eef1f3 16%, #152033)}
:root[data-theme="dark"] .btn{background:#152033}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#152033}
:root[data-theme="dark"] .prline input{background:#152033}
:root[data-theme="dark"] .prtag.new{color:color-mix(in srgb, #6b4a12 40%, #ffffff)}
:root[data-theme="dark"] .note{color:color-mix(in srgb, #123f6d 40%, #ffffff)}
:root[data-theme="dark"] .note.warn{color:color-mix(in srgb, #6b4a12 40%, #ffffff)}
:root[data-theme="dark"] .tbd{color:color-mix(in srgb, #6b5a2a 40%, #ffffff);background:color-mix(in srgb, #f3ecd9 16%, #152033)}
:root[data-theme="dark"] .modal{background:#152033}
:root[data-theme="dark"] .modal .ch{background:#152033}
:root[data-theme="dark"] .modal .mfoot{background:#152033}
:root[data-theme="dark"] .htile.locked{background:color-mix(in srgb, #f5f7f8 16%, #152033)}
:root[data-theme="dark"] .htile.locked .hico{background:color-mix(in srgb, #dfe4e8 16%, #152033)}
:root[data-theme="dark"] .navtoggle{background:#152033}
:root[data-theme="dark"] .navtoggle:hover{background:color-mix(in srgb, #f2f5f7 16%, #152033)}
:root[data-theme="dark"] .htile.soft{background:color-mix(in srgb, #f7f9fa 16%, #152033)}
:root[data-theme="dark"] .htile.soft .hico{background:color-mix(in srgb, #dfe4e8 16%, #152033)}
:root[data-theme="dark"] .padbtn .pbadge{background:color-mix(in srgb, #eef1f3 16%, #152033)}
:root[data-theme="dark"] .padbtn.off{background:color-mix(in srgb, #f5f7f8 16%, #152033)}
:root[data-theme="dark"] .padbtn.off .pico{background:color-mix(in srgb, #dfe4e8 16%, #152033)}
:root[data-theme="dark"] .phase2bar{color:color-mix(in srgb, #6b4a12 40%, #ffffff)}
:root[data-theme="dark"] .phase2bar b{color:color-mix(in srgb, #5a3e0f 40%, #ffffff)}
:root[data-theme="dark"] .bigval{background:#152033}
:root[data-theme="dark"] .bigval.on{background:#152033}
:root[data-theme="dark"] .bigval.lock{background:color-mix(in srgb, #f7f9fa 16%, #152033)}
:root[data-theme="dark"] .kpad button{background:#152033}
:root[data-theme="dark"] .kpad button:hover{background:color-mix(in srgb, #f7f9fa 16%, #152033)}
:root[data-theme="dark"] .stp{background:#152033}
:root[data-theme="dark"] .stp b{background:color-mix(in srgb, #eef1f3 16%, #152033)}
:root[data-theme="dark"] .stp.done{color:color-mix(in srgb, #12563a 40%, #ffffff)}
:root[data-theme="dark"] .stp.now{color:color-mix(in srgb, #0f3b66 40%, #ffffff)}
:root[data-theme="dark"] .lrow button.lin{background:#152033}
:root[data-theme="dark"] .lrow button.lin.on{background:#152033}
:root[data-theme="dark"] .tile.pink{background:linear-gradient(140deg,color-mix(in srgb, #fef2f7 16%, #152033),var(--pink-soft))}
:root[data-theme="dark"] .tile.blue{background:linear-gradient(140deg,color-mix(in srgb, #f2f9ff 16%, #152033),var(--accent-soft))}
:root[data-theme="dark"] .chip{background:#152033}
:root[data-theme="dark"] .note.ok{color:color-mix(in srgb, #0d4a33 40%, #ffffff)}
:root[data-theme="dark"] .note.bad{color:color-mix(in srgb, #7a1830 40%, #ffffff)}
:root[data-theme="dark"] .stsel.st-mut{background:color-mix(in srgb, #eef1f3 16%, #152033)}
:root[data-theme="dark"] .stsel option{background:#152033}
:root[data-theme="dark"] .skuchip{background:#152033}
:root[data-theme="dark"] .ava{background:color-mix(in srgb, #f3e3ea 16%, #152033)}
:root[data-theme="dark"] .ava-btn>span{background:#152033}
:root[data-theme="dark"] .tl-i::before{background:#152033}
:root[data-theme="dark"] .lg-role{background:#152033}
:root[data-theme="dark"] .orgn{background:#152033}
:root[data-theme="dark"] .orgn-exec{background:linear-gradient(180deg,#152033,color-mix(in srgb, #fde7ee 16%, #152033))}
:root[data-theme="dark"] .orgn-exec .orgn-t{color:color-mix(in srgb, #B02050 40%, #ffffff)}
:root[data-theme="dark"] .orgn-o{background:#152033}
:root[data-theme="dark"] .orgn-add{background:#152033}
:root[data-theme="dark"] .gdata.warn{color:color-mix(in srgb, #7a4a00 40%, #ffffff)}
:root[data-theme="dark"] .crc.cr-aff .crc-tag{background:color-mix(in srgb,var(--s4) 12%,#152033)}
:root[data-theme="dark"] .qc-paper{background:#152033;color:#e6edf6}
:root[data-theme="dark"] .qc-t th,:root[data-theme="dark"] .qc-t td{color:#e6edf6;background:#152033}
:root[data-theme="dark"] .qc-t thead th{background:color-mix(in srgb, #e9e9e9 16%, #152033)}
:root[data-theme="dark"] .qc-sec td{background:color-mix(in srgb, #d9d9d9 16%, #152033) !important}
:root[data-theme="dark"] .qc-in{background:#152033}
:root[data-theme="dark"] .qc-in.bad{background:color-mix(in srgb, #fde8ea 16%, #152033)}
:root[data-theme="dark"] .qc-in:focus{background:#152033}
:root[data-theme="dark"] .qc-v{color:color-mix(in srgb, #1a3fbf 40%, #ffffff)}
:root[data-theme="dark"] .qc-box{color:color-mix(in srgb, #1a3fbf 40%, #ffffff)}
:root[data-theme="dark"] .qc-phys td[data-c],:root[data-theme="dark"] .qc-phys #qc-tg,:root[data-theme="dark"] .qc-phys #qc-tb,:root[data-theme="dark"] .qc-phys #qc-tgp,:root[data-theme="dark"] .qc-phys #qc-tbp{color:color-mix(in srgb, #1a3fbf 40%, #ffffff)}
:root[data-theme="dark"] .qc-sv{color:color-mix(in srgb, #1a3fbf 40%, #ffffff)}
:root[data-theme="dark"] .qc-iname{color:color-mix(in srgb, #1a3fbf 40%, #ffffff)}
:root[data-theme="dark"] .qd-doc{background:#152033;color:#e6edf6}
:root[data-theme="dark"] .mpage .mfoot{background:#152033}