/* สร้างอัตโนมัติด้วย tools/gen_dark.py — อย่าแก้มือ (แก้ที่ tools/dark_extra.css แล้วรันสคริปต์ใหม่) */
html[data-theme="dark"] body{background:#171c28;color:#c1cfe5}
html[data-theme="dark"] button{background:#1f283a;border:1px solid #384353}
html[data-theme="dark"] button.active,html[data-theme="dark"] .primary{background:#1266dc;color:white}
html[data-theme="dark"] header{background:#1f283a;border-bottom:1px solid #38434f}
html[data-theme="dark"] header b{color:#2377ed}
html[data-theme="dark"] .banner{background:#1266dc;color:white}
html[data-theme="dark"] .card{background:#1f283a;border:1px solid #384351}
html[data-theme="dark"] .muted{color:#8391a7}
html[data-theme="dark"] progress{accent-color:#2377ed}
html[data-theme="dark"] .panel{background:#1f283a;border:1px solid #384351}
html[data-theme="dark"] .player{background:#101c2b;color:white}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{border:1px solid #404c5c;background:#1f283a}
html[data-theme="dark"] .notice{background:#29210c}
html[data-theme="dark"] .empty{color:#8391a7}
html[data-theme="dark"] header nav{background:#1f283a;border-top:1px solid #374353}
html[data-theme="dark"] header nav :is(button,a){border:0;color:#7d8ca4}
html[data-theme="dark"] header nav :is(button,a).active{background:#0c1728;color:#2377ed}
html[data-theme="dark"] header nav :is(button,a):focus-visible{outline:2px solid #2377ed}
html[data-theme="dark"] .sidebar-shell{background:#0e1218;border:1px solid #3c4a5d}
html[data-theme="dark"] .course-info{background:#1f283a;border:1px solid #32445b}
html[data-theme="dark"] .content-card{background:#1f283a;border:1px solid #3c4656}
html[data-theme="dark"] .learning-tabs{border-bottom:1px solid #3a424e}
html[data-theme="dark"] .learning-tabs button{border:0;border-radius:0;color:#7d8ca4}
html[data-theme="dark"] .learning-tabs button[aria-selected=true]{color:#2377ed}
html[data-theme="dark"] .tab-line{background:#1266dc}
html[data-theme="dark"] .chapter-card{border:1px solid #394353;background:#1f283a}
html[data-theme="dark"] .chapter-card.current-chapter{border-color:#084fb6;background:#0f1e34}
html[data-theme="dark"] .chapter-heading{border:0;border-radius:0;background:#131922}
html[data-theme="dark"] .current-chapter .chapter-heading{background:#09111e;color:#4491ef}
html[data-theme="dark"] .chapter-items .lesson{border:0;border-top:1px solid #343f4e;border-radius:0}
html[data-theme="dark"] .chapter-items .lesson.active{color:#2377ed;background:#09101e;border-left:3px solid #2377ed}
html[data-theme="dark"] .file-row{border:0;border-top:1px solid #343f4e;border-radius:0}
html[data-theme="dark"] .demo-play{border:1px solid #61748c;background:#22344b;color:white}
html[data-theme="dark"] .demo-file-note{color:#8391a7}
html[data-theme="dark"] .demo-toast{background:#182840;color:white}
@media(min-width:1101px) and (hover:hover) and (pointer:fine){html[data-theme="dark"] header nav{border:0}}
html[data-theme="dark"] .notice{background:#29210c}
html[data-theme="dark"] .google-btn{background:#1f283a;color:#c1cfe5;border:1px solid #3e4a5a}
html[data-theme="dark"] .google-btn:hover{background:#121b28}
html[data-theme="dark"] .lesson .tick{border:1.5px solid #425773}
html[data-theme="dark"] .lesson.done .tick{background:#1266dc;border-color:#1266dc;color:#fff}
html[data-theme="dark"] .player .loading{color:#374960}
html[data-theme="dark"] .tbl{background:#1f283a;border:1px solid #384351}
html[data-theme="dark"] .tbl th,html[data-theme="dark"] .tbl td{border-bottom:1px solid #313b48}
html[data-theme="dark"] .tbl th{background:#131922}
html[data-theme="dark"] .badge{background:#0f1218;color:#8394ac}
html[data-theme="dark"] .badge.on{background:#0f1a12;color:#99ddb7}
html[data-theme="dark"] .badge.off{background:#2a220c;color:#f8cd7c}
html[data-theme="dark"] .sec{background:#1f283a;border:1px solid #384351}
html[data-theme="dark"] .ch-box{border:1px solid #394353;background:#18202d}
html[data-theme="dark"] .ls-row,html[data-theme="dark"] .fl-row{background:#1f283a;border:1px solid #343f4e}
html[data-theme="dark"] .danger{color:#c54b4b;border-color:#623535}
html[data-theme="dark"] .uploaded{color:#99ddb7}
html[data-theme="dark"] .progress-txt{color:#8394ac}
html[data-theme="dark"] .sticky-save{background:rgba(31,40,58,0.933);border:1px solid #384351}
html[data-theme="dark"]{--glass:rgba(31,40,58,0.58);--glass-strong:rgba(31,40,58,0.78);--glass-edge:rgba(31,40,58,0.75);--glass-shadow:0 1px 0 rgba(31,40,58,0.9) inset,0 10px 30px -12px rgba(193,207,229,0.18),0 2px 6px rgba(193,207,229,0.04)}
html[data-theme="dark"] body{background:radial-gradient(60vmax 45vmax at 8% -5%,#09101e 0,transparent 60%),radial-gradient(50vmax 40vmax at 100% 10%,#0f091e 0,transparent 58%),radial-gradient(55vmax 40vmax at 40% 105%,#132120 0,transparent 60%),#171c28}
html[data-theme="dark"] header{border-bottom-color:rgba(36,46,66,0.7)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-theme="dark"] header,html[data-theme="dark"] header nav{background:rgba(31,40,58,0.62)}}
html[data-theme="dark"] .sidebar-shell{background:rgba(14,18,24,0.55)}
html[data-theme="dark"] .course-info,html[data-theme="dark"] .content-card{border-color:rgba(36,46,66,0.8)}
html[data-theme="dark"] .card::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(31,40,58,0.75),rgba(31,40,58,0) 62%)}
html[data-theme="dark"] .card::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.09),inset 0 1px 0 rgba(255,255,255,0.1);background:linear-gradient(115deg,transparent 35%,rgba(31,40,58,0.35) 48%,transparent 60%) no-repeat}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .card:hover{border-color:#242e42;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 44px -18px rgba(18,102,220,.28),0 8px 18px -8px rgba(24,40,64,.12)}
html[data-theme="dark"] button:not(.primary):not(:disabled):not(.active):hover{background:rgba(31,40,58,0.85);border-color:#242e42}
html[data-theme="dark"] header nav :is(button,a):not(.active):hover{background:rgba(35,119,237,0.07);color:#2377ed}
html[data-theme="dark"] .chapter-heading:hover{background:#0c121a}
html[data-theme="dark"] .chapter-items .lesson:not(.active):hover,html[data-theme="dark"] .file-row:hover{background:rgba(35,119,237,0.06)}
html[data-theme="dark"] .tbl tbody tr:hover{background:rgba(35,119,237,0.05)}}
html[data-theme="dark"] .lesson .dur{color:#7d8ca4}
html[data-theme="dark"] .course-stat{color:#92a4bf}
html[data-theme="dark"] progress.thin{border:0;background:#0f1318}
html[data-theme="dark"] progress.thin::-webkit-progress-bar{background:#0f1318}
html[data-theme="dark"] progress.thin::-webkit-progress-value{background:#1266dc}
html[data-theme="dark"] progress.thin::-moz-progress-bar{background:#1266dc}
html[data-theme="dark"] .chapter-card>progress.thin{border-radius:0}
html[data-theme="dark"] .chapter-heading small{color:#8391a7}
html[data-theme="dark"] .current-chapter .chapter-heading small{color:#4b7dc2}
html[data-theme="dark"] .cs-btn{border:1px solid #404c5c;background:rgba(31,40,58,0.85)}
html[data-theme="dark"] .cs-btn svg{stroke:#8391a7}
html[data-theme="dark"] .cs.open .cs-btn{border-color:#2377ed}
html[data-theme="dark"] .cs-btn:focus-visible{outline:2px solid #2377ed}
html[data-theme="dark"] .cs-list{background:rgba(31,40,58,0.92);border:1px solid #242e42}
html[data-theme="dark"] .cs-list li{outline:none}
html[data-theme="dark"] .cs-list li:hover,html[data-theme="dark"] .cs-list li:focus{background:rgba(35,119,237,0.09)}
html[data-theme="dark"] .cs-list li[aria-selected=true]{color:#2377ed}
html[data-theme="dark"] .cs-list li[aria-selected=true]::after{border:solid #2377ed;border-width:0 2px 2px 0}
html[data-theme="dark"] .modal-bg{background:rgba(193,207,229,0.32)}
html[data-theme="dark"] .modal{background:rgba(31,40,58,0.92);border:1px solid #242e42}
html[data-theme="dark"] .modal p{color:#92a4bf}
html[data-theme="dark"] .primary.danger-fill{background:#c43d3d}
html[data-theme="dark"] .hero{color:#fff;background:linear-gradient(125deg,#0f5bd0 0%,#2f7fee 55%,#69a8ff 100%);box-shadow:0 24px 50px -24px rgba(18,102,220,.6),0 1px 0 rgba(255,255,255,0.04) inset}
html[data-theme="dark"] .hero::before{background:radial-gradient(circle,rgba(31,40,58,0.38),rgba(31,40,58,0) 68%)}
html[data-theme="dark"] .hero::after{background:radial-gradient(circle,rgba(30,19,66,0.5),rgba(30,19,66,0) 68%)}
html[data-theme="dark"] .hero-main{background-image:radial-gradient(rgba(31,40,58,0.2) 1px,transparent 1.3px)}
html[data-theme="dark"] .chip{background:rgba(163,190,243,0.28);border:1px solid rgba(36,46,66,0.45)}
html[data-theme="dark"] .resume{color:#c1cfe5;background:rgba(31,40,58,0.9);border:1px solid #242e42}
html[data-theme="dark"] .resume-tag{color:#2377ed}
html[data-theme="dark"] .resume-go{color:#92a4bf}
html[data-theme="dark"] .go-btn{background:#1266dc;color:#fff}
html[data-theme="dark"] .tile::before,html[data-theme="dark"] .resume::before{background:radial-gradient(240px circle at var(--mx) var(--my),rgba(35,119,237,0.12),rgba(35,119,237,0) 65%)}
html[data-theme="dark"] .tile-ic{background:#09111e;color:#2377ed}
html[data-theme="dark"] .stat:nth-child(2) .tile-ic{background:#0f1a12;color:#8dd4ac}
html[data-theme="dark"] .stat:nth-child(3) .tile-ic{background:#120c1b;color:#724abc}
html[data-theme="dark"] .stat:nth-child(4) .tile-ic{background:#2a220c;color:#f7c464}
html[data-theme="dark"] .feat p{color:#8394ac}
html[data-theme="dark"] .wk-bar{background:rgba(35,119,237,0.06)}
html[data-theme="dark"] .wk-bar i{background:linear-gradient(180deg,#6aa6ff,#1266dc)}
html[data-theme="dark"] .wk-n{color:#92a4bf}
html[data-theme="dark"] .wk-d{color:#7d8ca4}
html[data-theme="dark"] .wk.today .wk-d{color:#2377ed}
html[data-theme="dark"] .wk.today .wk-bar{background:rgba(35,119,237,0.12)}
html[data-theme="dark"] .empty-state{border:1px dashed #40526a}
html[data-theme="dark"] .done-txt{color:#8dd4ac}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .tile:hover,html[data-theme="dark"] .resume:hover{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 40px -18px rgba(18,102,220,.3)}
html[data-theme="dark"] .rec:hover{background:rgba(35,119,237,0.07)}}
html[data-theme="dark"] .hero-main::before{background-image:radial-gradient(rgba(31,40,58,0.22) 1px,transparent 1.3px)}
html[data-theme="dark"] .cs-btn:hover{border-color:#426088!important;background:#1f283a!important}
html[data-theme="dark"] .cs.open .cs-btn:hover{border-color:#2377ed!important}
html[data-theme="dark"] .tip{background:linear-gradient(100deg,rgba(46,40,13,0.75),rgba(31,40,58,0.55))}
html[data-theme="dark"] .tip strong{color:#f8cd7c}
html[data-theme="dark"] .tip p{color:#92a4bf}
html[data-theme="dark"] .ring-bg{stroke:rgba(35,119,237,0.12)}
html[data-theme="dark"] .ring-fg{stroke:#2377ed}
html[data-theme="dark"] .ring.hit .ring-fg{stroke:#51d08c}
html[data-theme="dark"] .ring-c strong small{color:#7d8ca4}
html[data-theme="dark"] .ring-c span{color:#7d8ca4}
html[data-theme="dark"] .goal-txt p{color:#92a4bf}
html[data-theme="dark"] .stepper{background:rgba(35,119,237,0.07)}
html[data-theme="dark"] .heat-d{color:#7d8ca4}
html[data-theme="dark"] .hm{background:rgba(35,119,237,0.07)}
html[data-theme="dark"] .hm.w{background:rgba(35,119,237,0.17)}
html[data-theme="dark"] .hm.l1{background:#122035}
html[data-theme="dark"] .hm.l2{background:#0a3f86}
html[data-theme="dark"] .hm.l3{background:#3d86ea}
html[data-theme="dark"] .hm.l4{background:#1266dc}
html[data-theme="dark"] .heat-lg{color:#7d8ca4}
html[data-theme="dark"] .step-n{background:#1266dc;color:#fff}
html[data-theme="dark"] .mock{background:#1f283a;border:1px solid #344050}
html[data-theme="dark"] .mk-video{background:linear-gradient(135deg,#1b2b46,#34507e)}
html[data-theme="dark"] .mk-play{background:rgba(31,40,58,0.2);border:1px solid rgba(36,46,66,0.5)}
html[data-theme="dark"] .mk-play::after{border-left:15px solid #242e42}
html[data-theme="dark"] .mk-bar{background:rgba(31,40,58,0.25)}
html[data-theme="dark"] .mk-bar i{background:#003f96}
html[data-theme="dark"] .mk-tag{background:#0f1218;color:#8394ac}
html[data-theme="dark"] .mk-row{background:#131922}
html[data-theme="dark"] .mk-row .dur{color:#7d8ca4}
html[data-theme="dark"] .mk-row .tick{border:1.5px solid #425773}
html[data-theme="dark"] .mk-row.on .tick{background:#1266dc;border-color:#1266dc;color:#fff}
html[data-theme="dark"] .cc .cover{background:linear-gradient(135deg,color-mix(in srgb,var(--color) 20%,#1f283a) 0%,var(--tint) 60%,#1f283a 130%)}
html[data-theme="dark"] .cc .cover::after{background:rgba(31,40,58,0.45)}
html[data-theme="dark"] .cv-subj{background:rgba(31,40,58,0.78)}
html[data-theme="dark"] .cv-ring{background:rgba(31,40,58,0.82)}
html[data-theme="dark"] .cv-ring .rg-bg{stroke:color-mix(in srgb,var(--color) 16%,#1f283a)}
html[data-theme="dark"] .cv-ring.full .rg-bg{stroke:rgba(31,40,58,0.3)}
html[data-theme="dark"] .cv-ring.full .rg-fg{stroke:#1f283a}
html[data-theme="dark"] .cv-ring.full b{color:#1f283a}
html[data-theme="dark"] .cv-ring.lock svg{stroke:#8391a7}
html[data-theme="dark"] .cdesc{color:#8391a7}
html[data-theme="dark"] .cmeta span{background:rgba(35,119,237,0.07);color:#92a4bf}
html[data-theme="dark"] .cmeta .draft{background:#2a220c;color:#f8cd7c}
html[data-theme="dark"] .cstat{color:#8394ac}
html[data-theme="dark"] .heat-m{color:#7d8ca4}
html[data-theme="dark"] .hm.today{box-shadow:0 0 0 2px rgba(255,255,255,.06),0 0 0 4px #1266dc}
html[data-theme="dark"] .heat-note{color:#7d8ca4}
html[data-theme="dark"] .phero{background:linear-gradient(120deg,#09111e 0%,#10091e 58%,#0e1917 100%);border:1px solid #242e42}
html[data-theme="dark"] .phero::before{background:radial-gradient(circle,rgba(31,40,58,0.9),rgba(31,40,58,0) 68%)}
html[data-theme="dark"] .phero::after{background:radial-gradient(circle,rgba(0,30,105,0.35),rgba(0,30,105,0) 68%)}
html[data-theme="dark"] .phero-sub{color:#92a4bf}
html[data-theme="dark"] .phero .chip{background:rgba(31,40,58,0.7);border-color:#242e42;color:#9fb3d0}
html[data-theme="dark"] .slot{border:1.5px dashed #40526a!important;background:rgba(31,40,58,0.4)!important}
html[data-theme="dark"] .slot strong{color:#92a4bf}
html[data-theme="dark"] .ibar-t span{color:#8394ac}
html[data-theme="dark"] .av{--c1:#0a50b0;--c2:#2f7bf0}
html[data-theme="dark"] .av-in{background:#1f283a}
html[data-theme="dark"] .pf-hero{border:1px solid #242e42;background:linear-gradient(120deg,color-mix(in srgb,var(--c1) 22%,#1f283a) 0%,#1f283a 62%,color-mix(in srgb,var(--c2) 14%,#1f283a) 100%)}
html[data-theme="dark"] .pf-hello{color:#8394ac}
html[data-theme="dark"] .pf-sub{color:#92a4bf}
html[data-theme="dark"] .pf-hero .chip{background:rgba(31,40,58,0.75);border-color:#242e42;color:#9fb3d0}
html[data-theme="dark"] .pf-bd{background:rgba(31,40,58,0.78);border:1px solid #242e42}
html[data-theme="dark"] .pf-bd-ic{background:#2a220c;color:#f7c464}
html[data-theme="dark"] .pf-bd span:last-child{color:#8394ac}
html[data-theme="dark"] .pf-bd.today{background:linear-gradient(135deg,#201b09,#1f090f)}
html[data-theme="dark"] .pf-form label{color:#92a4bf}
html[data-theme="dark"] .av-o{background:rgba(31,40,58,0.7)}
html[data-theme="dark"] .av-o.on{border-color:#2377ed;background:#1f283a}
html[data-theme="dark"] .av-c{border:3px solid #242e42}
html[data-theme="dark"] .av-c.on{box-shadow:0 0 0 2px rgba(255,255,255,.06),0 0 0 4px var(--c2)}
html[data-theme="dark"] .pf-row{border-bottom:1px solid rgba(193,207,229,0.07)}
html[data-theme="dark"] .pf-out button{color:#c54b4b;border-color:#623535;background:rgba(31,40,58,0.7)}
@media not all and (min-width:1101px) and (hover:hover) and (pointer:fine){html[data-theme="dark"] header{background:rgba(31,40,58,0.92)}}
html[data-theme="dark"] .rem-row{border-bottom:1px solid rgba(193,207,229,0.07)}
html[data-theme="dark"] .dchip{border:1px solid #384353;background:rgba(31,40,58,0.8);color:#8394ac}
html[data-theme="dark"] .dchip.on{background:#1266dc;border-color:#1266dc;color:#fff}
html[data-theme="dark"] .dchip:focus-visible,html[data-theme="dark"] .rem-time:focus-visible{outline:2px solid #2377ed}
html[data-theme="dark"] .rem-warn{background:#2a220c;color:#f9d58b}
html[data-theme="dark"] .sto .sto-row:focus-visible{outline:2px solid #2377ed}
html[data-theme="dark"] .sto tfoot td{background:#131922}
html[data-theme="dark"] .sto-det td{background:rgba(19,25,34,0.7)}
html[data-theme="dark"] .mailcp{border:0}
html[data-theme="dark"] .mailcp svg{stroke:#526075}
html[data-theme="dark"] .mailcp:hover{background:rgba(35,119,237,0.08)}
html[data-theme="dark"] .mailcp:hover svg{stroke:#2377ed}
html[data-theme="dark"] .mailcp:focus-visible{outline:2px solid #2377ed}
html[data-theme="dark"] .mchip{background:rgba(35,119,237,0.09);color:#76a4e5;border:1px solid rgba(35,119,237,0.16)}
html[data-theme="dark"] .mchip button{border:0;color:#76a4e5}
html[data-theme="dark"] .mchip button:hover{background:rgba(35,119,237,0.18)}
html[data-theme="dark"] .mchip button:focus-visible{outline:2px solid #2377ed}
html[data-theme="dark"] .vload{background:rgba(213,224,238,0.45);color:#1f283a}
html[data-theme="dark"] .vspin{border:3px solid rgba(36,46,66,0.35);border-top-color:#242e42}
html[data-theme="dark"] .slow-warn{background:#2a220c;color:#f9d58b}
@media(max-width:760px){html[data-theme="dark"] .utbl,html[data-theme="dark"] .utbl tbody{border:0}
html[data-theme="dark"] .utbl tr{background:#1f283a;border:1px solid #384351}
html[data-theme="dark"] .utbl td{border:0}
html[data-theme="dark"] .utbl td[data-l]::before{color:#7d8ca4}}
@media(max-width:760px){html[data-theme="dark"] .tbl.rt,html[data-theme="dark"] .tbl.rt tbody,html[data-theme="dark"] .tbl.rt tfoot{border:0}
html[data-theme="dark"] .tbl.rt tr{background:#1f283a;border:1px solid #384351}
html[data-theme="dark"] .tbl.rt td{border:0}
html[data-theme="dark"] .tbl.rt td[data-l]::before{color:#7d8ca4}}
html[data-theme="dark"] .foot a{color:#7d8ba2}
html[data-theme="dark"] .un-row{border-bottom:1px solid #313b48}
html[data-theme="dark"] #btn-done.is-done{background:#0e1812;border-color:#3e664b;color:#9ee4bd}
html[data-theme="dark"] .auto-next{color:#7d8ba2}
html[data-theme="dark"] .nextup{background:rgba(16,28,43,.88);color:#fff;border:1px solid rgba(255,255,255,.18)}
html[data-theme="dark"] .skip{background:#1266dc;color:#fff}
html[data-theme="dark"] header .brand{--bc:#2377ed}
html[data-theme="dark"] #app:focus{outline:none}
html[data-theme="dark"] .detail-t a{color:#2f7bf0}
html[data-theme="dark"] .url-warn{color:#f7bf6d;background:#201a09}
html[data-theme="dark"] .btnlink{border:1px solid #384353;background:#1f283a}
html[data-theme="dark"] .is-bad{outline:2px solid #cc2222!important;background:#340f0f!important}
@media(max-width:700px),(prefers-reduced-data:reduce){html[data-theme="dark"] header,html[data-theme="dark"] header nav{background:rgba(31,40,58,0.97)}}
@supports not (background:color-mix(in srgb,red,blue)){html[data-theme="dark"] .cc .cover::before{background:rgba(31,40,58,0.4)}
html[data-theme="dark"] .cv-ring .rg-bg{stroke:#0d1219}
html[data-theme="dark"] .pf-hero{background:linear-gradient(120deg,#09111f,#1f283a)}}
html[data-theme="dark"] .foot .copy{color:#8391a7}
html[data-theme="dark"] .cexp{color:#89cca6}
html[data-theme="dark"] .cexp.soon{color:#f7c464}
html[data-theme="dark"] .cexp.bad{color:#c54b4b}
html[data-theme="dark"] .dev{border:1px solid #323f50;background:rgba(31,40,58,0.6)}
html[data-theme="dark"] .dev.cur{border-color:#0846a5;background:#0e1a2f}
html[data-theme="dark"] .dev-ic{background:#09111e;color:#2377ed}
html[data-theme="dark"] .dev-t em{background:#1266dc;color:#fff}
html[data-theme="dark"] .dev-t small{color:#8391a7}
html[data-theme="dark"] .pf-seg{border:1px solid #3d4a5c}
html[data-theme="dark"] .pf-seg button{border:0;border-radius:0}
html[data-theme="dark"] .pf-seg button[aria-pressed=true]{background:#1266dc;color:#fff}
html[data-theme="dark"] .nx-ring .bg{stroke:rgba(31,40,58,0.22)}
html[data-theme="dark"] .nx-ring b{color:#1f283a}
html[data-theme="dark"] .nf{background:linear-gradient(160deg,#0a1221 0%,#180f32 55%,#1e1809 100%);border:1px solid #242e42}
html[data-theme="dark"] .nf-blob.b1{background:#052961}
html[data-theme="dark"] .nf-blob.b2{background:#1b1039}
html[data-theme="dark"] .nf-blob.b3{background:#754f00}
html[data-theme="dark"] .nf .st{background:#1266dc}
html[data-theme="dark"] .nf .st:nth-child(odd){background:#ffb800}
html[data-theme="dark"] .nf-obj{background:rgba(31,40,58,0.7);color:#2377ed}
html[data-theme="dark"] .nf-obj.o2{color:#2f00b2}
html[data-theme="dark"] .nf-num .dg{background:linear-gradient(160deg,#4f95f5,#7c4dff)}
html[data-theme="dark"] .nf-msg{color:#96a5bc}
html[data-theme="dark"] .nf-actions .primary{background:#1266dc;color:#fff;border-color:#1266dc}
html[data-theme="dark"] .nf-hint{color:#8391a7}
html[data-theme="dark"] .exp-lb{color:#8c9cb5}
html[data-theme="dark"] .exp-ctl input:not([type=hidden]){border:1px solid #404c5c;background:#1f283a}
html[data-theme="dark"] .mchip .mexp,html[data-theme="dark"] .mexp{background:#0f1218;color:#8c9cb5}
html[data-theme="dark"] .mexp.ok{background:#0e1812;color:#98dcb5}
html[data-theme="dark"] .mexp.soon{background:#201809;color:#f8cd7c}
html[data-theme="dark"] .mexp.bad{background:#1c0a0a;color:#d05757}
html[data-theme="dark"] .linkbtn{border:0;color:#2377ed}
html[data-theme="dark"] .exp-edit{border:1px solid rgba(35,119,237,0.25);background:linear-gradient(180deg,rgba(35,119,237,0.07),rgba(35,119,237,0.03))}
html[data-theme="dark"] .mchip button.mexp:hover{background:#0f141a}
html[data-theme="dark"] .mchip button.mexp.ok:hover{background:#16261b}
html[data-theme="dark"] .mchip button.mexp.soon:hover{background:#33260f}
html[data-theme="dark"] .mchip button.mexp.bad:hover{background:#230d0d}
html[data-theme="dark"] .cc .cover.has-img::after{border-radius:0;background:linear-gradient(180deg,rgba(237,239,242,0.18),rgba(237,239,242,0) 45%)}
html[data-theme="dark"] .cc .cover.has-img .cv-subj{background:rgba(31,40,58,0.9)}
html[data-theme="dark"] .cov-prev{border:1px solid #384353;background:#111720}
html[data-theme="dark"] .cov-empty{color:#6c7c94;background:repeating-linear-gradient(135deg,#141b26 0 12px,#0e131a 12px 24px)}
html[data-theme="dark"] .cov-pick{border:1px solid #384353;background:#1f283a}
html[data-theme="dark"] .cov-frame{background:#0f1218}
html[data-theme="dark"] .cov-frame::after{background:linear-gradient(rgba(31,40,58,0.35),rgba(31,40,58,0.35)) 33.33% 0/1px 100% no-repeat,linear-gradient(rgba(31,40,58,0.35),rgba(31,40,58,0.35)) 66.66% 0/1px 100% no-repeat,linear-gradient(rgba(31,40,58,0.35),rgba(31,40,58,0.35)) 0 33.33%/100% 1px no-repeat,linear-gradient(rgba(31,40,58,0.35),rgba(31,40,58,0.35)) 0 66.66%/100% 1px no-repeat}
html[data-theme="dark"] .cov-zoom input{border:0;accent-color:#2377ed}
html[data-theme="dark"] .pk-btn{border:1px solid #404c5c;background:rgba(31,40,58,0.85)}
html[data-theme="dark"] .pk-btn:hover{border-color:#426088;background:#1f283a}
html[data-theme="dark"] .pk-btn[aria-expanded="true"]{border-color:#2377ed}
html[data-theme="dark"] .pk-btn:focus-visible{outline:2px solid #2377ed}
html[data-theme="dark"] .pk-btn svg{stroke:#8391a7}
html[data-theme="dark"] .pk-t.ph{color:#5f6d83}
html[data-theme="dark"] .pk-pop{background:rgba(31,40,58,0.96);border:1px solid #242e42}
html[data-theme="dark"] .pk-nav{border:0}
html[data-theme="dark"] .pk-nav:hover,html[data-theme="dark"] .pk-ttl:hover{background:rgba(35,119,237,0.08)}
html[data-theme="dark"] .pk-nav svg{stroke:#92a4bf}
html[data-theme="dark"] .pk-ttl{border:0}
html[data-theme="dark"] .pk-wk span{color:#6c7c94}
html[data-theme="dark"] .pk-d{border:0}
html[data-theme="dark"] .pk-d:hover:not(:disabled){background:rgba(35,119,237,0.1)}
html[data-theme="dark"] .pk-d.sel{background:#1266dc;color:#fff}
html[data-theme="dark"] .pk-d:disabled{color:#2e3949}
html[data-theme="dark"] .pk-ft{border-top:1px solid #313e50}
html[data-theme="dark"] .pk-y{border:0}
html[data-theme="dark"] .pk-y:hover{background:rgba(35,119,237,0.1)}
html[data-theme="dark"] .pk-y.cur{background:#1266dc;color:#fff}
html[data-theme="dark"] .pk-colon{color:#6c7c94}
html[data-theme="dark"] .pk-c{border:0}
html[data-theme="dark"] .pk-c:hover{background:rgba(35,119,237,0.1)}
html[data-theme="dark"] .pk-c.sel{background:#1266dc;color:#fff}
html[data-theme="dark"] header .brand .bm::before{background:conic-gradient(#ffb300,#ff6ec7,#7c4dff,#1266dc,#2fbf71,#ffb300)}
html[data-theme="dark"] header .brand .bt::after{background:linear-gradient(90deg,#ffb300,#ff6ec7,#7c4dff,#1266dc)}
html[data-theme="dark"] header .brand .bsp{background:#ffc233}
@media(hover:hover){html[data-theme="dark"] header .brand:hover .bt,html[data-theme="dark"] header .brand:focus-visible .bt{background:linear-gradient(105deg,var(--bc) 32%,#ff9d00 44%,#ff5fb0 50%,#8a5cff 56%,var(--bc) 68%) 130% 0/250% 100%}}
html[data-theme="dark"] header .brand.pop .bt{background:linear-gradient(105deg,var(--bc) 32%,#ff9d00 44%,#ff5fb0 50%,#8a5cff 56%,var(--bc) 68%) 130% 0/250% 100%}
html[data-theme="dark"] .nf::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,40%),rgba(31,40,58,0.85),rgba(50,40,15,0.35) 45%,transparent 70%)}
html[data-theme="dark"] .nf-obj:hover{background:rgba(31,40,58,0.95);box-shadow:0 0 0 7px rgba(255,255,255,0.055),0 22px 40px -12px currentColor}
html[data-theme="dark"] .nf .st{color:#2377ed}
html[data-theme="dark"] .nf-t{--tc:#c1cfe5}
html[data-theme="dark"] .nf-t:hover{background:linear-gradient(105deg,var(--tc) 30%,#ff9d00 42%,#ff5fb0 50%,#8a5cff 58%,var(--tc) 70%) 130% 0/250% 100%}
html[data-theme="dark"] .nf-msg:hover{color:#2377ed}
html[data-theme="dark"] .nf-actions .btnlink::after{background:linear-gradient(105deg,transparent,rgba(31,40,58,0.65),transparent)}
html[data-theme="dark"] .nf-hint:hover{color:#2377ed}
html[data-theme="dark"] .bk-own{border:1px solid #2e3e58;background:rgba(31,40,58,0.7)}
html[data-theme="dark"] .bk-hd{border-bottom:1px solid #323f50}
html[data-theme="dark"] .bk-row{border-bottom:1px dashed #323f50}
html[data-theme="dark"] .bk-row:last-child{border-bottom:0}
html[data-theme="dark"] .remember .rm-sub{color:#7d8ca4}
html[data-theme="dark"] .hero-landing .remember{color:#1f283a}
html[data-theme="dark"] .hero-landing .remember .rm-sub{color:rgba(31,40,58,0.82)}
html[data-theme="dark"] .cv-arch{background:rgba(31,40,58,0.9);border:1px solid rgba(193,207,229,0.12)}
html[data-theme="dark"] .cv-arch:hover{background:#1f283a}
html[data-theme="dark"] .verr{background:rgba(16,28,43,.88);color:#fff}
html[data-theme="dark"] .upl-btn{border:1px solid #384353;background:#1f283a}
html[data-theme="dark"] .ch-sum{color:#8391a7;border:1px dashed #3d495b}
html[data-theme="dark"] .ch-sum:hover{background:#121b28}
html[data-theme="dark"] .more-btn{border:0;color:#2f7bf0}
html[data-theme="dark"] .up-err{color:#e7564b}
html[data-theme="dark"] #app.stale::before{background:#1266dc}
html[data-theme="dark"] .chip.ok{background:#0e1812;color:#98deb6;border-color:#416951}
html[data-theme="dark"] .chip.warn{background:#1e1709;color:#f8cd7c;border-color:#9b7417}
html[data-theme="dark"] .tbl tfoot td{border-top:2px solid #384351}
html[data-theme="dark"] a.mini{border:1px solid #424c5b;background:#1f283a}
html[data-theme="dark"] .na-act .btnlink{color:#c6d2e7}
html[data-theme="dark"] .na-act .primary{background:#1266dc;color:#fff;border-color:#1266dc}
html[data-theme="dark"] .cby{color:#96a5bc}
html[data-theme="dark"] .mtag{background:#0f1218;color:#96a5bc}
html[data-theme="dark"] .mtag.na{background:#201909;color:#f8cd7c}
html[data-theme="dark"] .mtag.ok{background:#0f1b14;color:#9fe5bf}
html[data-theme="dark"] .mtag.wait{background:#09101e;color:#598de4}
html[data-theme="dark"] .mtag.bad{background:#1c0a0a;color:#dc5f5f}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#233146}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:#7f9bc4}
html[data-theme="dark"] .quota{background:#0c1728;border:1px solid #2b4262}
html[data-theme="dark"] .quota.full{background:#1e1809;border-color:#9e8018}
html[data-theme="dark"] .quota.over{background:#1f0909;border-color:#6e3232;color:#db7a7a}
html[data-theme="dark"] .over-t{color:#e1544c}
html[data-theme="dark"] .sq{background:#0c1728;border:1px solid #2b4262}
html[data-theme="dark"] .sq-bar{background:#0f1722}
html[data-theme="dark"] .sq-bar i{background:#1266dc}
html[data-theme="dark"] .sq.over{background:#1f0909;border-color:#6e3232}
html[data-theme="dark"] .sq.over .sq-bar{background:#271313}
html[data-theme="dark"] .sq.over .sq-bar i{background:#d93b3b}
html[data-theme="dark"] .fs-note{color:#8397b4}
html[data-theme="dark"] .fs-note.wait{color:#f8cd7c}
html[data-theme="dark"] .fs-note.ok{color:#8adfae}
html[data-theme="dark"] .fs-note.bad,html[data-theme="dark"] .fs-note.slow{color:#e1544c}
html[data-theme="dark"] .chip.bad{background:#1f0909;color:#e36464;border-color:#6e3232}

/* ===== ปรับมือสำหรับโหมดมืด ===== */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] .cc .cover{background:linear-gradient(135deg,color-mix(in srgb,var(--color) 34%,#0f1726),color-mix(in srgb,var(--color) 12%,#0f1726))}
html[data-theme="dark"] .cc .cover,html[data-theme="dark"] .cv-subj{color:color-mix(in srgb,var(--color) 35%,#fff)}
html[data-theme="dark"] .cv-book svg{stroke:color-mix(in srgb,var(--color) 35%,#fff)}
html[data-theme="dark"] .dev{background:rgba(255,255,255,.04)}
html[data-theme="dark"] a{color:#7db3ff}
html[data-theme="dark"] .google-btn,html[data-theme="dark"] .btnlink{color:#e6edf8}
html[data-theme="dark"] .nf-actions .primary{color:#fff}
html[data-theme="dark"] .nf-obj{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .nf-msg{color:#b9c6da}
html[data-theme="dark"] img.av,html[data-theme="dark"] .av{filter:none}
html[data-theme="dark"] ::selection{background:#2a5ab0;color:#fff}
html[data-theme="dark"] .skip{color:#fff}
html[data-theme="dark"] progress.thin,html[data-theme="dark"] progress.thin::-webkit-progress-bar{background:#2a3850}
html[data-theme="dark"] progress.thin::-webkit-progress-value,html[data-theme="dark"] progress.thin::-moz-progress-bar{background:#3b8bff}
html[data-theme="dark"] .nf-actions .primary{background:#1266dc;border-color:#1266dc;color:#fff}
html[data-theme="dark"] .nf-obj.o1{color:#6aa8ff}html[data-theme="dark"] .nf-obj.o2{color:#ab92ff}html[data-theme="dark"] .nf-obj.o3{color:#ffbf45}
html[data-theme="dark"] .hero{filter:brightness(.8) saturate(.92)}

.mexp{background:#252f45;color:#a9b6cc}.mexp.ok{background:rgba(52,168,100,.18);color:#7fdca3}.mexp.soon{background:rgba(230,170,40,.18);color:#f0c46a}.mexp.bad{background:rgba(220,80,80,.2);color:#ff9a9a}
.exp-edit{background:linear-gradient(180deg,rgba(80,140,255,.12),rgba(80,140,255,.05));border-color:rgba(110,160,255,.3)}
.exp-lb{color:#a9b6cc}.linkbtn{color:#7fb0ff}
.mchip button.mexp:hover{background:#2f3b57}.mchip button.mexp.ok:hover{background:rgba(52,168,100,.28)}.mchip button.mexp.soon:hover{background:rgba(230,170,40,.28)}.mchip button.mexp.bad:hover{background:rgba(220,80,80,.3)}

.cov-prev{background:#1b2436;border-color:#2c3850}.cov-empty{color:#8fa0bb;background:repeating-linear-gradient(135deg,#1b2436 0 12px,#202b40 12px 24px)}
.cov-pick{background:#222d43;border-color:#34425c}.cov-frame{background:#101827}

.pk-btn{background:#222d43;border-color:#34425c}.pk-btn:hover{background:#2a3650;border-color:#4a5d80}
.pk-pop{background:rgba(27,36,54,.97);border-color:#34425c}
.pk-ft{border-top-color:#2c3850}.pk-d:disabled{color:#4b5a75}
.pk-nav svg{stroke:#a9b6cc}.pk-wk span{color:#8fa0bb}
.pk-t.ph{color:#8fa0bb}
.pk-pop{background:#1b2436!important;-webkit-backdrop-filter:none;backdrop-filter:none}

html[data-theme="dark"] header .brand{--bc:#4f94ff}
html[data-theme="dark"] header .brand .bo i{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
@media(hover:hover){html[data-theme="dark"] header .brand:hover .bt,html[data-theme="dark"] header .brand:focus-visible .bt{background-image:linear-gradient(105deg,var(--bc) 32%,#ffb020 44%,#ff6ec7 50%,#a98bff 56%,var(--bc) 68%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}}
html[data-theme="dark"] header .brand.pop .bt{background-image:linear-gradient(105deg,var(--bc) 32%,#ffb020 44%,#ff6ec7 50%,#a98bff 56%,var(--bc) 68%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

html[data-theme="dark"] .nf::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,40%),rgba(120,160,255,.22),rgba(150,110,255,.10) 45%,transparent 70%)}
html[data-theme="dark"] .nf-t{--tc:#e6ecf7}
html[data-theme="dark"] .nf-obj:hover{background:rgba(255,255,255,.16)}
html[data-theme="dark"] .nf-msg:hover,html[data-theme="dark"] .nf-hint:hover{color:#7fb0ff}
html[data-theme="dark"] .nf-actions .btnlink::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent)}
@media(hover:hover){html[data-theme="dark"] .nf-t:hover{background-image:linear-gradient(105deg,var(--tc) 30%,#ffb020 42%,#ff6ec7 50%,#a98bff 58%,var(--tc) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}}
html[data-theme="dark"] .hm.w{background:rgba(35,119,237,0.2)}
html[data-theme="dark"] .hm.l1{background:#122035}
html[data-theme="dark"] .hm.l2{background:#0a3f86}
html[data-theme="dark"] .hm.l3{background:#3d86ea}
html[data-theme="dark"] .hm.l4{background:#1266dc}
html[data-theme="dark"] .cv-ring b{color:color-mix(in srgb,var(--color) 38%,#fff)}
html[data-theme="dark"] .cv-ring .rg-fg{stroke:color-mix(in srgb,var(--color) 45%,#fff)}
html[data-theme="dark"] .cv-ring.full{background:color-mix(in srgb,var(--color) 62%,#fff)}
html[data-theme="dark"] .cv-ring.full b{color:#0e1624}

/* แถบเลื่อนโหมดมืด */
html[data-theme="dark"] *{scrollbar-color:#46556e transparent}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#46556e;background-clip:content-box}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:#6a7f9f;background-clip:content-box}
html[data-theme="dark"] .quota{background:#1b2a42;border-color:#2c4264}
html[data-theme="dark"] .quota.full{background:#3a3217;border-color:#6b5a1f}
html[data-theme="dark"] .quota.over{background:#40201f;border-color:#7a3434;color:#ffb4b4}
html[data-theme="dark"] .over-t{color:#ff9d96}
html[data-theme="dark"] .sq{background:#1b2a42;border-color:#2c4264}
html[data-theme="dark"] .sq-bar{background:#2a3b57}
html[data-theme="dark"] .sq.over{background:#40201f;border-color:#7a3434}
html[data-theme="dark"] .sq.over .sq-bar{background:#5a2c2c}
html[data-theme="dark"] .fs-note{color:#9fb3d1}html[data-theme="dark"] .fs-note.wait{color:#f0c36b}html[data-theme="dark"] .fs-note.ok{color:#7fd9a0}html[data-theme="dark"] .fs-note.bad,html[data-theme="dark"] .fs-note.slow{color:#ff9d96}
html[data-theme="dark"] .chip.bad{background:#40201f;color:#ffb4b4;border-color:#7a3434}