/* SabaiTalk's new visual layer. Every rule is opt-in; classic remains the original UI. */
html[data-design="2026"]{--bg:#101d24;--surface:#172831;--surface2:#20353e;--border:#30444d;--text:#f2f5ef;--ink:#f2f5ef;--muted:#9ab2ba;--sub:#adc1c6;--green:#80dfc6;--greenTint:#203e39;--blue:#8fdcdb;--blueTint:#203c43;--accent:#f2a389;--coin:#edcc8d;--new-shadow:0 12px 36px #030d141c;--new-primary:#a0e8d2;--new-primary-ink:#143c36;--new-nav:#182b33f5;color-scheme:dark}
html[data-design="2026"][data-theme="light"]{--bg:#f4f4ed;--surface:#fffef9;--surface2:#e9eee7;--border:#d8e0d8;--text:#203b3b;--ink:#203b3b;--muted:#637d7d;--sub:#597573;--green:#216b5d;--greenTint:#dceee6;--blue:#267c86;--blueTint:#e1efed;--accent:#b96043;--coin:#92661e;--new-shadow:0 12px 36px #1e493408;--new-primary:#286d60;--new-primary-ink:#fffef8;--new-nav:#fffef9f5;color-scheme:light}
html[data-design="2026"] body{background:var(--bg);color:var(--text);font-weight:500;-webkit-font-smoothing:antialiased}
html[data-design="2026"] :is(h1,h2,h3){font-family:Outfit,'Noto Sans Thai',sans-serif;font-weight:650;letter-spacing:-.45px}
html[data-design="2026"] :is(button,input,select,textarea){border-radius:16px}
html[data-design="2026"] :is(.primary,.secondary,.option,.questCard,.pathGuide,.pathSectionSelect){transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
html[data-design="2026"] .primary{background:var(--new-primary);color:var(--new-primary-ink);border:1px solid transparent;border-bottom:2px solid color-mix(in srgb,var(--new-primary-ink) 18%,var(--new-primary));box-shadow:0 5px 16px #00000010;letter-spacing:.25px;font-weight:800}
html[data-design="2026"] .primary:hover{filter:brightness(1.04)}html[data-design="2026"] .primary:active{transform:translateY(1px);box-shadow:none}
html[data-design="2026"] .primary:disabled{background:var(--surface2);color:var(--muted);border-color:transparent;box-shadow:none;filter:none}
html[data-design="2026"] .secondary{background:var(--surface2);border:1px solid var(--border);color:var(--text);box-shadow:none}
html[data-design="2026"] :is(.card,.hubRailCard,.badgeSection,.socialPanel,.profileHero){background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--new-shadow)}
html[data-design="2026"] :is(.close,.themeToggle){background:var(--surface2);border:0;box-shadow:none;border-radius:50%}
html[data-design="2026"] :is(#modal,.pathPeek){background:var(--surface);color:var(--text);border-radius:26px;border:1px solid var(--border);box-shadow:0 24px 80px #020b1450}
html[data-design="2026"] #modal::backdrop{background:#06101899;backdrop-filter:blur(9px)}
html[data-design="2026"] .stats{font-variant-numeric:tabular-nums;font-weight:750;color:var(--text)}
html[data-design="2026"] .stats .illustratedIcon{filter:saturate(.88)}
html[data-design="2026"] .pathHome .workspace>header{background:var(--bg);padding-bottom:12px}
html[data-design="2026"] .cleanJourney{--trail:#8cddca;--trailDepth:#3f998d;--trailSoft:#dff7ed}
html[data-design="2026"] .pathSectionBanner{background:#b6e7d4;color:#173e38;border:1px solid #ceeedd;border-bottom:0;border-radius:24px;box-shadow:0 7px 24px #0000000d;min-height:104px;grid-template-columns:minmax(0,1fr) 66px;overflow:hidden}
html[data-design="2026"] .pathSectionSelect{padding:21px 22px}
html[data-design="2026"] .pathSectionSelect small{color:#3d6b5b;letter-spacing:1.05px;font-size:10px;font-weight:800}
html[data-design="2026"] .pathSectionSelect h1{font-size:25px;font-weight:650;letter-spacing:-.65px;line-height:1.15}
html[data-design="2026"] .pathGuide{border:0;border-radius:17px;background:#173e380c;margin:14px 14px 14px 0;color:#28584c}html[data-design="2026"] .pathGuide:focus-visible{outline-offset:-4px}
html[data-design="2026"] .pathGuide .uiIcon{stroke-width:1.8;width:25px;height:25px}
html[data-design="2026"] .trailDisc{box-shadow:inset 0 1px 0 #ffffff12,inset 0 -3px 0 var(--disc-depth),0 6px 16px #020b1429;border:1px solid #ffffff0c}
html[data-design="2026"] .trailStop:not(.isCurrent):not(.isDone) .trailNode{--disc-color:var(--surface2);--disc-depth:color-mix(in srgb,var(--border) 75%,var(--bg));color:#7d9ba4}
html[data-design="2026"] .isDone>.trailNode{--disc-color:#527c72;--disc-depth:#345b53;color:#daf9eb}
html[data-design="2026"] .isCurrent>.trailNode{--disc-color:#a1e7d1;--disc-depth:#56a891;color:#174d43}
html[data-design="2026"] .isCurrent>.trailNode:before{border-width:3px;border-color:var(--border);border-top-color:#a1e7d1;border-right-color:#a1e7d1}
html[data-design="2026"] .nodeStart{background:#efb299;color:#352c29;border:0;border-radius:10px;padding:9px 13px;font-size:10px;letter-spacing:1px;box-shadow:0 4px 12px #0000000f}
html[data-design="2026"] .nodeStart:after{background:#efb299;border:0;width:8px;height:8px;bottom:-4px}
html[data-design="2026"] .routeSegment{stroke:var(--border);stroke-width:3;stroke-dasharray:2 8;opacity:.7}
html[data-design="2026"] .routeSegment.routeDone{stroke:#6ca895;stroke-dasharray:none}html[data-design="2026"] .routeSegment.routeNext{stroke:#81c9b6}
html[data-design="2026"] .pathPopover:before{background:var(--surface)}
html[data-design="2026"] .pathPopover .pathPeek{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:0 18px 60px #020b1459;border-radius:22px}
html[data-design="2026"] .pathPeek :is(small,p){color:var(--sub)}
html[data-design="2026"] .pathPeek h2{font-size:24px;font-weight:650;letter-spacing:-.5px}
html[data-design="2026"] .pathPeek .peekClose{color:var(--sub);background:none}
html[data-design="2026"] .pathPeek .primary{background:var(--new-primary);color:var(--new-primary-ink);border:0;box-shadow:none;border-radius:14px;min-height:50px}
html[data-design="2026"] nav button{border:0;box-shadow:none;font-weight:650;color:var(--sub);border-radius:14px}
html[data-design="2026"] nav button.active{background:var(--surface2);color:var(--green)}
html[data-design="2026"] nav .illustratedIcon{opacity:.65;filter:saturate(.7)}html[data-design="2026"] nav button.active .illustratedIcon{opacity:1;filter:none}
html[data-design="2026"] :is(.focusPhrase,.studyPhrase,.answerExplanation,.readingHelp,.storyBubble){border:1px solid var(--border);background:var(--surface);border-radius:24px;box-shadow:none}
html[data-design="2026"] .option{border:1px solid var(--border);border-bottom-width:2px;background:var(--surface);box-shadow:none;border-radius:19px;color:var(--text)}
html[data-design="2026"] .option.selected{border-color:var(--green);background:var(--greenTint)}
html[data-design="2026"] .option.correct{border-color:#82c7a0;background:color-mix(in srgb,#82c7a0 13%,var(--surface))}
html[data-design="2026"] .option.wrong{border-color:#d58c86;background:color-mix(in srgb,#d58c86 13%,var(--surface))}
html[data-design="2026"] .choiceNumber{background:var(--surface2);border:0;color:var(--sub);border-radius:9px}
html[data-design="2026"] .reading{color:#d0b1db}html[data-design="2026"][data-theme="light"] .reading{color:#86628d}
html[data-design="2026"] :is(.search,.productionInput,.dictationInput){border:1px solid var(--border);background:var(--surface2);border-radius:16px;color:var(--text)}
html[data-design="2026"] .portraitPicker button{border-radius:18px;border-width:1px;box-shadow:none}
html[data-design="2026"] .portraitPicker button.selected{border-color:var(--green);background:var(--greenTint)}
html[data-design="2026"] .questHero{background:var(--surface2);border:0;border-radius:20px}
html[data-design="2026"] .questCard{border-width:1px;border-radius:18px;background:var(--surface2)}
html[data-design="2026"] .questArt{background:var(--surface);border-radius:13px}
html[data-design="2026"] :is(.streakMessage,.streakMonthStats>span,.streakCalendar,.streakMilestone,.streakProtection){border-width:1px;border-radius:20px;background:var(--surface)}
html[data-design="2026"] :is(.streakSheet,.streakFooter,.streakHeader){background:var(--bg)}
html[data-design="2026"] .streakHero strong{color:#edb093;font-weight:700}
html[data-design="2026"] .streakDates .practiced{background:#eeb499;color:#3c3028}
html[data-design="2026"] .streakTabs{border-bottom-width:1px}html[data-design="2026"] .streakTabs button{transition:color .18s ease}
html[data-design="2026"] .streakTabs button[aria-selected=true]{border-bottom-width:2px}
html[data-design="2026"] .supportDetails{border:1px solid var(--border);border-radius:16px;background:var(--surface2)}
html[data-design="2026"] .settingsrow{border-bottom:1px solid var(--border)}
html[data-design="2026"] .settingsrow select{background:var(--surface2);border-width:1px;border-radius:12px}
/* The selector is available in both styles, so returning never depends on the new layer. */
.designPreference{padding:20px 0;border-bottom:1px solid var(--border)}.designPreference h3{font-size:16px;letter-spacing:0;margin:0}.designPreference p{font-size:12px;color:var(--muted);margin:6px 0 15px;line-height:1.5}.designChoices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.designChoices button{display:grid;grid-template-columns:1fr 20px;align-items:center;gap:10px;padding:12px;border:2px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);text-align:left;box-shadow:none}.designChoices button[aria-pressed=true]{border-color:var(--green)}.designChoices strong{font-size:13px}.designChoices button>.uiIcon{width:18px;height:18px;color:var(--green);opacity:0}.designChoices button[aria-pressed=true]>.uiIcon{opacity:1}.designSwatch{grid-column:span 2;display:flex;align-items:center;gap:6px;height:46px;padding:10px;border-radius:10px}.designSwatch i{display:block;width:17px;height:17px;border-radius:50%;background:#8cd7bc}.designSwatch i:nth-child(2){background:#e8ad95}.designSwatch i:nth-child(3){background:#edf2e9}.newDesignSwatch{background:#14252d}.classicDesignSwatch{background:#142d39}.classicDesignSwatch i{background:#32bac4}.classicDesignSwatch i:nth-child(2){background:#69d5c7}.classicDesignSwatch i:nth-child(3){background:#f4a38c}
.designCompare{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:10px;background:var(--surface2);color:var(--text);white-space:nowrap;min-height:36px}.designCompare>.uiIcon{width:15px;height:15px}.phonePreviewToolbar{flex-wrap:wrap;gap:10px}.phonePreviewToolbar>div{flex:1;min-width:130px}.phonePreviewToolbar .phonePreviewClose{flex-shrink:0}.phonePreviewToolbar:has(.designCompare)>div small{display:none}
@media(min-width:761px){html[data-design="2026"] #sidebar{inset:14px auto 14px 14px;width:220px;border:1px solid var(--border);border-radius:26px;background:var(--surface);padding:28px 18px 18px}html[data-design="2026"] .brand{font-size:30px;letter-spacing:-1.2px}html[data-design="2026"] .sidebarbottom{margin-left:6px;margin-right:6px}html[data-design="2026"] .workspace>header{border-color:var(--border)}}
@media(max-width:760px){html[data-design="2026"] .pathHome .workspace>header{padding:calc(9px + env(safe-area-inset-top)) 18px 12px!important;gap:9px}html[data-design="2026"] .pathSectionBanner{min-height:100px;border-radius:22px;grid-template-columns:minmax(0,1fr) 62px}html[data-design="2026"] .pathSectionSelect{padding:20px}html[data-design="2026"] .pathSectionSelect h1{font-size:23px}html[data-design="2026"] .pathSectionSelect small{font-size:10px}html[data-design="2026"] #sidebar{background:var(--new-nav);border:1px solid var(--border);border-radius:23px;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));width:calc(100% - 20px);padding:6px 5px!important;box-shadow:0 8px 30px #020b1430;backdrop-filter:blur(20px)}html[data-design="2026"] #sidebar nav{gap:2px;padding:0!important}html[data-design="2026"] #sidebar nav button{border-radius:17px;padding:10px 2px 9px;min-height:62px;font-size:9px!important;gap:6px}html[data-design="2026"] #sidebar nav button.active{background:#7ee1c319;color:var(--green);border:0}html[data-design="2026"] nav .illustratedIcon{width:25px!important;height:25px!important}html[data-design="2026"] .trailDisc{--disc-size:70px}html[data-design="2026"] .streakSheet{border-radius:0}html[data-design="2026"] #modal.streakMode{border-radius:0;border:0}html[data-design="2026"] #main{padding-bottom:125px!important}}
@media(max-width:360px){html[data-design="2026"] .pathHome .workspace>header{padding-left:14px!important;padding-right:14px!important}html[data-design="2026"] .pathSectionSelect{padding:18px 16px}html[data-design="2026"] .pathSectionSelect h1{font-size:21px}.designCompare{font-size:9px;padding:7px}.phonePreviewToolbar>div{min-width:110px}}
@media(prefers-reduced-motion:reduce){html[data-design="2026"] *,html[data-design="2026"] *:before,html[data-design="2026"] *:after{animation-duration:.01ms!important;transition:none!important}}
@media(min-width:761px){html[data-design="2026"] .workspace{margin-left:258px}html[data-design="2026"] #sidebar .brand{font-size:27px;gap:5px;white-space:nowrap}}
html[data-design="2026"] .trailStop.isLocked .trailDisc{background:var(--surface2);color:var(--muted);box-shadow:inset 0 -3px 0 var(--border),0 6px 16px #020b1418}
html[data-design="2026"] .badgeSection{padding:22px}html[data-design="2026"] .badgeSection .panelHeading{gap:12px;flex-wrap:wrap}html[data-design="2026"] .badgeSection .badgeGrid{margin-top:16px}
@media(max-width:380px){html[data-design="2026"] .badgeSection{padding:16px}}
html[data-design="2026"] .pathHome .stats>.avatar{display:none}html[data-design="2026"] .mobilePreviewButton{font-size:11px;min-height:40px;padding:8px 12px;flex-shrink:0}