@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap");
/* ANANFX Academy v0.8.7 — SIZE/PIXEL ONLY — YouTube Scale Constitution v3.0
   Scope: geometry, component dimensions, typography scale, media ratio only.
   Intentionally does NOT change text/content, colors, assets, JS behavior, routes, business logic or data. */
:root{
  --highlight-selected-bg:#0F0F0F;
  --highlight-selected-fg:#FFFFFF;
  --highlight-neutral-hover:#E5E5E5;
  --highlight-selected-hover:#272727;
  --highlight-selected-pressed:#3F3F3F;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-page-x:var(--space-6);
  --space-section:var(--space-8);
  --space-heading-content:var(--space-4);
  --space-subheading-body:var(--space-2);
  --space-card:var(--space-4);
  --space-panel:var(--space-6);
  --space-control-gap:var(--space-2);
  --space-chip-gap:var(--space-3);
  --space-grid-x:var(--space-6);
  --space-grid-y:var(--space-8);
  --space-thumb-meta:var(--space-3);
  --space-filter-content:var(--space-6);
  --desktop-min:1280px;
  --layout-inline-size:max(100vw, var(--desktop-min));
  --device-canvas-offset-x:0px;
  --yt-ref-header-h:56px;
  --yt-ref-rail-w:72px;
  --page-gutter:var(--space-page-x);
  --header-pad-x:var(--space-4);
  --header-zone-gap:var(--space-4);
  --icon-hitbox:40px;
  --icon-standard:24px;
  --icon-ui:24px;
  --icon-small:20px;
  --icon-micro:16px;
  --player-hitbox:48px;
  --status-icon:20px;
  --brand-slot-w:129px;
  --brand-slot-h:40px;
  --brand-logo-max-w:120px;
  --brand-logo-max-h:40px;
  --search-h:40px;
  --search-min:640px;
  --search-max:640px;
  --search-button-w:64px;
  --search-radius:20px;
  --search-mic-gap:var(--space-3);
  --search-mic-slot:40px;
  --search-group-w:692px;
  --avatar-header:32px;
  --rail-item-w:72px;
  --rail-item-h:74px;
  --chipbar-h:56px;
  --chip-h:32px;
  --button-m-h:36px;
  --button-m-radius:18px;
  --button-m-pad-x:16px;
  --button-s-h:32px;
  --button-s-radius:16px;
  --button-s-pad-x:12px;
  --button-form-h:40px;
  --button-form-radius:20px;
  --button-capsule-radius:9999px;
  --button-label-size:14px;
  --button-label-line:20px;
  --button-label-weight:500;
  --button-gap:var(--space-2);
  --action-h:var(--button-m-h);
  --form-action-h:var(--button-form-h);
  --thumb-radius:12px;
  --watch-rail-max:402px;
  --watch-rail-min:360px;
  --watch-gap:var(--space-6);
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
html,body{width:100%;min-width:var(--desktop-min);margin:0}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
.app-page{width:100%;max-width:none;margin:0;min-width:0}

/* ---------- GLOBAL HEADER ---------- */
.app-header{position:fixed;inset:0 0 auto 0;width:100%;height:var(--yt-ref-header-h);z-index:1000}
.app-header-inner{height:100%;display:grid;grid-template-columns:minmax(185px,1fr) var(--search-group-w) minmax(239px,1fr);align-items:center;gap:0;padding:0 var(--header-pad-x)}
.app-header-left{display:flex;align-items:center;gap:var(--header-zone-gap);min-width:0;height:100%}
.app-header-center{display:grid;grid-template-columns:var(--search-max) var(--search-mic-gap) var(--search-mic-slot);align-items:center;justify-content:center;width:var(--search-group-w);height:var(--search-h);min-width:var(--search-group-w);justify-self:center}
.app-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);min-width:0;height:100%}
.app-header-menu{position:relative;inset:auto;display:grid;place-items:center;flex:0 0 var(--icon-hitbox);width:var(--icon-hitbox);height:var(--icon-hitbox);min-width:var(--icon-hitbox);min-height:var(--icon-hitbox);margin:0;padding:0;border-radius:50%}
.app-header-menu img,.app-header-menu .icon,.app-header-menu .lw-icon{width:var(--icon-ui);height:var(--icon-ui)}

/* Brand slot: preserve existing asset and aspect ratio; do not stretch. */
.app-header-logo{position:relative;inset:auto;display:flex;align-items:center;justify-content:flex-start;flex:0 0 var(--brand-slot-w);width:var(--brand-slot-w);height:var(--brand-slot-h);min-width:0;margin:0;overflow:visible}
.app-header-logo img{display:block;width:var(--brand-logo-max-w);height:auto;max-width:none;max-height:var(--brand-logo-max-h);object-fit:contain}

/* Global Search size contract. Existing text, color and behavior are preserved. */
.app-header-center .app-search{position:relative;inset:auto;grid-column:1;display:flex;align-items:center;width:var(--search-max);max-width:var(--search-max);min-width:var(--search-max);height:var(--search-h);margin:0;padding:0;overflow:hidden;border-radius:var(--search-radius)}
.app-header-center .app-search input{position:relative;flex:1 1 auto;width:auto;min-width:0;height:var(--search-h);min-height:var(--search-h);margin:0;padding:0 16px;font-size:16px;line-height:24px;border-radius:var(--search-radius) 0 0 var(--search-radius)}
.app-header-center .app-search button{position:relative;inset:auto;flex:0 0 var(--search-button-w);width:var(--search-button-w);height:var(--search-h);min-width:var(--search-button-w);min-height:var(--search-h);margin:0;padding:0;border-radius:0 var(--search-radius) var(--search-radius) 0;display:grid;place-items:center}
.app-header-center .app-search button img,.app-header-center .app-search button .icon,.app-header-center .app-search button .lw-icon{width:var(--icon-ui);height:var(--icon-ui)}
/* Calculator's legacy search markup has an image instead of a button. Keep markup/content untouched, size it as the same right segment. */
.app-header-center .app-search>img{flex:0 0 var(--search-button-w);width:var(--search-button-w);height:var(--search-h);padding:8px 20px;object-fit:contain;border-radius:0 var(--search-radius) var(--search-radius) 0}
/* Icon Constitution v1.0 targeted fix: Calculator search glyph itself is 24x24; margins preserve the original 64px right-side footprint without changing content/layout. */
.app-header-center .calc-search.app-search>img{flex:0 0 var(--icon-ui);width:var(--icon-ui);height:var(--icon-ui);padding:0;margin:0 20px;object-fit:contain;border-radius:0}

.app-header-bell{position:relative;inset:auto;display:grid;place-items:center;flex:0 0 var(--icon-hitbox);width:var(--icon-hitbox);height:var(--icon-hitbox);min-width:var(--icon-hitbox);min-height:var(--icon-hitbox);margin:0;padding:0;border-radius:50%}
.app-header-bell img,.app-header-bell .icon,.app-header-bell .lw-icon{width:var(--icon-ui);height:var(--icon-ui)}
.app-header-extra{position:relative;inset:auto;flex:0 0 var(--avatar-header);width:var(--avatar-header);height:var(--avatar-header);margin:0;object-fit:cover;border-radius:50%}
.app-account-cluster{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);width:auto;max-width:199px;flex:0 1 199px;min-width:0;height:100%}
.app-account-cluster .app-header-account,.app-header-account{position:relative;inset:auto;display:flex;align-items:center;min-width:0;max-width:199px;margin:0;min-height:40px;font-size:14px;line-height:20px}
.app-account-cluster .account-avatar,.app-account-cluster .tools-avatar,.app-account-cluster .lw-account>img:first-child,.app-account-cluster .account-button>img:first-child,.app-account-cluster .course-account>img:first-child{width:var(--avatar-header);height:var(--avatar-header);min-width:var(--avatar-header);object-fit:cover;border-radius:50%}

/* ---------- GLOBAL COMPACT RAIL ---------- */
.app-rail{position:fixed;left:0;top:var(--yt-ref-header-h);bottom:0;width:var(--yt-ref-rail-w);z-index:900;display:flex;flex-direction:column;align-items:stretch;padding:0;overflow-y:auto;overflow-x:hidden}
.app-rail>a{position:relative;inset:auto;width:var(--rail-item-w);height:var(--rail-item-h);min-height:var(--rail-item-h);flex:0 0 var(--rail-item-h);margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);border-radius:10px;font-size:10px;line-height:14px}
.app-rail>a img,.app-rail>a .icon{width:var(--icon-ui);height:var(--icon-ui);object-fit:contain}
.app-rail .active-rail{top:0;height:var(--rail-item-h)}

/* ---------- CANONICAL MAIN / PAGE SHELL ---------- */
.app-main{position:relative;margin-left:var(--yt-ref-rail-w);margin-top:var(--yt-ref-header-h);width:auto;min-width:0;max-width:none;min-height:calc(100vh - var(--yt-ref-header-h))}
.app-main > .page-shell{width:100%;min-width:0;max-width:none;padding:var(--page-gutter)}
.app-main > .page-shell > *{min-width:0}

/* ---------- HOME / FEED ---------- */
.category-bar{position:fixed;z-index:800;left:var(--yt-ref-rail-w);top:var(--yt-ref-header-h);right:0;width:auto;height:var(--chipbar-h);min-width:0}
.category-bar .category-row{min-width:0;width:100%;max-width:100%;height:var(--chipbar-h);overflow:hidden;display:flex;align-items:center;gap:var(--space-chip-gap)}
.category-pill{height:var(--chip-h);min-height:var(--chip-h);width:auto;padding:0 12px;border-radius:var(--button-capsule-radius);font-size:14px;line-height:20px;font-weight:500}
.category-pill:nth-child(n){width:auto;padding:0 12px}
.category-pill.is-active{font-weight:500}
.home-main.app-main{margin-top:var(--yt-ref-header-h);padding:0;width:auto;min-width:0}
.home-main.app-main > .page-shell--home{padding:calc(var(--chipbar-h) + var(--space-filter-content) + var(--space-1)) var(--page-gutter) var(--space-8)}
.video-grid{width:100%;max-width:none;margin-left:0;margin-right:0;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-grid-x);row-gap:var(--space-grid-y)}
.home-main .video-grid>.video-item{width:auto;margin-left:0;min-width:0}
.thumbnail-button,.home-main .video-grid>.video-item .thumbnail-button{width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--thumb-radius)}
.thumbnail{width:100%;height:100%;object-fit:cover;border-radius:var(--thumb-radius)}
.video-info{grid-template-columns:36px minmax(0,1fr) 40px;column-gap:var(--space-3);margin-top:var(--space-thumb-meta);min-height:0}
.teacher-avatar{width:36px;height:36px}
.video-title{font-size:16px;line-height:22px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.channel-name,.metadata{font-size:14px;line-height:20px}
.more-button{width:40px;height:40px}.more-button img,.more-button .icon{width:var(--icon-ui);height:var(--icon-ui)}

/* ---------- COURSES ---------- */
.courses-content.app-main > .page-shell--courses{padding:var(--page-gutter) var(--page-gutter) var(--space-12)}
.course-filters{height:auto;min-height:32px;display:flex;flex-wrap:wrap;gap:var(--space-chip-gap)}
.course-filters + .course-section{margin-top:var(--space-filter-content)}
.course-section + .course-section{margin-top:var(--space-section)}
.filter-chip{height:32px;min-height:32px;width:auto;padding:0 12px;border-radius:var(--button-capsule-radius);font-size:14px;line-height:20px}
.course-filters .filter-chip[data-filter]{width:auto;padding:0 12px;font-weight:500}
.course-filters .filter-chip.is-active{font-weight:500}
.course-section{position:relative;left:auto;right:auto;top:auto}
.course-grid{width:100%;max-width:none;margin-left:0;margin-right:0;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-grid-x);row-gap:var(--space-grid-y);margin-top:var(--space-heading-content)}
.course-card{min-width:0}.course-media{width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--thumb-radius)}
.course-media>img{width:100%;height:100%;object-fit:cover}
.course-title{font-size:16px;line-height:22px;font-weight:500;max-height:44px}
.course-meta{padding-top:var(--space-thumb-meta)}
.facts{font-size:14px;line-height:20px;font-weight:400}

/* ---------- DOCUMENTS ---------- */
.documents-content.app-main > .page-shell--documents{padding:var(--page-gutter)}
.document-filters{height:auto;display:flex;flex-wrap:wrap;gap:var(--space-chip-gap);margin-bottom:var(--space-6)}
.document-filters .filter-chip[data-filter]{height:32px;width:auto;padding:0 12px;border-radius:var(--button-capsule-radius);font-size:14px;line-height:20px}
.documents-grid{position:relative;left:auto;top:auto;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:var(--space-8) var(--space-4);padding-bottom:var(--space-16)}
.document-card,.cover-button,.cover-placeholder,.document-meta{width:100%}
.cover-button,.cover-placeholder{height:auto;aspect-ratio:2/3;border-radius:var(--thumb-radius)}
.document-title-button{font-size:16px;line-height:22px;max-height:44px}

/* ---------- WORKSPACE: CALCULATOR ---------- */
.calc-main.app-main > .page-shell--calculator{padding:var(--page-gutter)}
.calc-title{margin-bottom:var(--space-heading-content);}
.calc-tabs{height:32px;gap:var(--space-3);margin-bottom:var(--space-4)}.calc-tab{height:32px;min-height:32px;padding:0 16px;border-radius:var(--button-capsule-radius);font-size:14px;line-height:20px}
.calc-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:var(--space-6)}
.bottom-row{grid-template-columns:minmax(0,.76fr) minmax(0,1fr);gap:var(--space-6);margin-top:var(--space-6)}
.field-wrap{height:40px}.field-wrap input,.field-wrap select{font-size:14px;line-height:20px}
.calc-button{height:var(--button-form-h);min-height:var(--button-form-h);padding:0 var(--button-m-pad-x);border-radius:var(--button-form-radius);}

/* ---------- WORKSPACE: TOOLS ---------- */
.tools-main.app-main > .page-shell--tools{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:var(--space-6);row-gap:var(--space-4);padding:var(--page-gutter)}
.tools-main>.page-shell--tools>h1{grid-column:1/-1;margin:0;font-size:20px;line-height:28px}
.tools-main>.page-shell--tools>.category-filters{grid-column:1/-1;display:flex;gap:var(--space-chip-gap)}
.category-filters button,.category-filters button[data-filter]{height:32px;min-height:32px;width:auto;min-width:0;padding:0 12px;border-radius:var(--button-capsule-radius);font-size:14px;line-height:20px}
.video-block{position:relative;left:auto;top:auto;width:100%;grid-column:1;grid-row:3;margin-top:var(--space-2)}
.video-placeholder{width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--thumb-radius)}
.unlock-panel{position:relative;left:auto;top:auto;width:100%;height:auto;grid-column:2;grid-row:3;align-self:start;margin-top:var(--space-2)}

/* ---------- WORKSPACE: PROFILE ---------- */
.profile-main.app-main > .page-shell--profile{padding:var(--page-gutter);display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);grid-template-areas:'hero right' 'tabs right' 'stats right' 'left right';column-gap:var(--space-6);row-gap:0;align-items:start;min-width:0}
.member-hero{position:relative;width:100%;height:160px;grid-area:hero}
.avatar-wrap{width:96px;height:96px}.member-avatar{width:96px;height:96px}.member-copy{left:132px}
.profile-tabs{height:36px}.profile-tabs button{height:36px;padding:0 16px 8px;font-size:14px;line-height:20px}
.profile-stat-row{grid-area:stats;margin-top:var(--space-4)}
.profile-columns{display:contents}.profile-left{width:100%;grid-area:left;margin-top:var(--space-4)}.profile-right{position:relative;right:auto;top:auto;width:100%;grid-area:right}
.course-row{grid-template-columns:169px minmax(0,1fr) 70px 115px;column-gap:var(--space-4)}.course-thumb{width:169px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--thumb-radius)}

/* ---------- LEARNING DETAIL ---------- */
.course-canvas.app-page{width:100%;min-width:0;max-width:none;margin:0}
.learning-main.app-main{margin-left:0;width:auto;padding:0}
.learning-main.app-main > .page-shell--learning{padding:var(--page-gutter);display:grid;grid-template-columns:minmax(0,1fr) clamp(var(--watch-rail-min),26vw,var(--watch-rail-max));column-gap:var(--watch-gap);align-items:start;min-width:0}
.course-left,.course-rail,.preview-player,.preview-poster,.rail-panel,.curriculum-row{width:100%}
.preview-player{height:auto;aspect-ratio:16/9;border-radius:var(--thumb-radius)}.preview-poster{height:calc(100% - 61px);object-fit:cover}

.primary-button,.secondary-button,.resource-actions button{height:var(--button-m-h);min-height:var(--button-m-h);padding:0 var(--button-m-pad-x);border-radius:var(--button-m-radius);}
.rail-tabs{height:32px}.rail-tab{height:32px;line-height:20px;font-size:14px;padding:0 16px}
.curriculum-row{min-height:94.5px;grid-template-columns:168px minmax(0,1fr) 40px;column-gap:var(--space-3)}.thumb-wrap,.thumb-wrap>img{width:168px;height:94.5px;aspect-ratio:16/9}.thumb-wrap>img{object-fit:cover}

/* ---------- WATCH ---------- */
.lesson-watch-page{min-width:var(--desktop-min)}
.watch-main.app-main{margin-left:0;width:auto;padding:0}
.watch-main.app-main > .page-shell--watch{padding:var(--page-gutter);display:grid;grid-template-columns:minmax(0,1fr) clamp(var(--watch-rail-min),26vw,var(--watch-rail-max));gap:var(--watch-gap);align-items:start;min-width:0;max-width:1746px;margin:0 auto}
.lesson-watch-page .lw-left,.lesson-watch-page .lw-rail{position:relative;left:auto;top:auto;width:100%}
.lesson-watch-page .lw-player,.lesson-watch-page .lw-poster{width:100%}
.lesson-watch-page .lw-player{height:auto;aspect-ratio:16/9;border-radius:var(--thumb-radius)}.lesson-watch-page .lw-poster{height:calc(100% - 63px);object-fit:cover}

.lesson-watch-page .lw-secondary-button{height:var(--button-m-h);min-height:var(--button-m-h);padding:0 var(--button-m-pad-x);border-radius:var(--button-m-radius);}.lesson-watch-page .lw-round-button{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:18px}.lesson-watch-page .lw-tabs button{height:32px;min-height:32px;font-size:14px;line-height:20px}
.lesson-watch-page .lw-player-btn{width:var(--player-hitbox);height:var(--player-hitbox)}.lesson-watch-page .lw-player-btn .lw-icon{width:var(--icon-ui);height:var(--icon-ui)}
.lesson-watch-page .lw-playlist-item{width:100%;min-height:94.5px;grid-template-columns:168px minmax(0,1fr) 28px;column-gap:var(--space-3)}
.lesson-watch-page .lw-playlist-thumb,.lesson-watch-page .lw-playlist-item:nth-child(n) .lw-playlist-thumb{width:168px;height:94.5px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.lesson-watch-page .lw-playlist-item:nth-child(n){min-height:94.5px}
.lesson-watch-page .lw-playlist-copy h3{font-size:14px;line-height:20px}.lesson-watch-page .lw-playlist-copy p,.lesson-watch-page .lw-playlist-copy div{font-size:12px;line-height:18px}

/* Flexible child/media safety */
.course-grid>*,.documents-grid>*,.calc-grid>*,.bottom-row>*,.page-shell--tools>*,.page-shell--profile>*,.page-shell--learning>*,.page-shell--watch>*{min-width:0}
img,video{max-width:100%}
@media (max-width:1279px){html,body,.app-page,.lesson-watch-page{min-width:var(--desktop-min)}}


/* ICON SIZE CONSTITUTION v1.0 — active role mapping only. */
.app-header-account .account-chevron,.app-header-account .chev,.app-header-account .lw-icon-chevron-down,.app-header-account>img[src*="chevron"]{width:var(--icon-small);height:var(--icon-small)}
.course-card .lock-overlay img,.course-card .facts img,.course-card .locked-row>img,.course-card .member-row img{width:var(--icon-small);height:var(--icon-small)}
.document-card .status-row img,.warning img,.recent img,.meta-line img,.doc-status img,.tool-meta img,.demo-warning img,.premium-chip img,.member-meta img,.view-all img,.course-facts img,.description-header img,.rail-next img{width:var(--icon-small);height:var(--icon-small)}
.document-card .file-row img,.document-menu img,.action-row img,.workflow-row>img,.line-button img,.camera-btn img,.member-actions img,.stat-icon img,.cert-icon img,.setting-icon img,.player-button img,.icon-text-button img,.resource-actions img,.dialog-close img{width:var(--icon-ui);height:var(--icon-ui)}
.activity-icon img{width:var(--icon-micro);height:var(--icon-micro)}
/* Icon Constitution v1.0 targeted fix: curriculum Lock/Complete overlay is a Small Status role (20x20), not Micro. */
.state-badge img{width:var(--icon-small);height:var(--icon-small)}
.player-row button,.player-button{width:var(--player-hitbox);height:var(--player-hitbox);border-radius:50%}
.player-row button img{width:var(--icon-ui);height:var(--icon-ui)}
.drawer-close,.dialog-close,.modal-close,.icon-button{width:var(--icon-hitbox);height:var(--icon-hitbox);border-radius:50%}.camera-btn{width:36px;height:36px;border-radius:18px}
.lesson-watch-page .lw-icon-button{width:var(--icon-hitbox);height:var(--icon-hitbox);border-radius:50%}.lesson-watch-page .lw-round-button{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:18px}
.lesson-watch-page .lw-menu-button .lw-icon,.lesson-watch-page .lw-search .lw-icon,.lesson-watch-page .lw-notification .lw-icon,.lesson-watch-page .lw-secondary-button .lw-icon,.lesson-watch-page .lw-round-button .lw-icon,.lesson-watch-page .lw-comments-head .lw-icon{width:var(--icon-ui);height:var(--icon-ui)}
.lesson-watch-page .lw-account .lw-icon,.lesson-watch-page .lw-tab-next .lw-icon,.lesson-watch-page .lw-item-more .lw-icon{width:var(--icon-small);height:var(--icon-small)}

/* HEADING FONT SIZE CONSTITUTION v1.0 — HEADING ONLY.
   Scope: Page/Watch H1, Section H2 and Dialog H2 only.
   Excludes card titles, metadata, body, buttons, chips, navigation, inputs and H3/subheadings. */
:root{
  --heading-size:20px;
  --heading-line:28px;
  --heading-weight-page:700;
  --heading-weight-section:600;
}

/* Page / Watch Heading — 20/28/700 */
.section-head h1,
.calc-title,
.tools-main>.page-shell--tools>h1,
.member-copy h1,
.course-info h1,
.lesson-watch-page .lw-title{
  font-family:Roboto,"Noto Sans Thai",Arial,sans-serif;
  font-size:var(--heading-size);
  line-height:var(--heading-line);
  font-weight:var(--heading-weight-page);
  letter-spacing:normal;
}

/* Section / Dialog Heading — 20/28/600 */
.section-head h2,
.input-panel h2,
.result-panel h2,
.video-meta h2,
.identity-copy h2,
.continue-section h2,
.activity-section h2,
.progress-card h2,
.cert-card h2,
.profile-modal .modal-card h2,
.course-access-dialog h2,
.access-dialog h2,
.course-dialog h2,
.lesson-watch-page .lw-comments h2{
  font-family:Roboto,"Noto Sans Thai",Arial,sans-serif;
  font-size:var(--heading-size);
  line-height:var(--heading-line);
  font-weight:var(--heading-weight-section);
  letter-spacing:normal;
}

/* SUBHEADING FONT SIZE CONSTITUTION v1.0 — SUBHEADING ONLY.
   Semantic role only: supporting Subheading/H3 inside Section/Panel/Detail module.
   Explicitly excludes H1/H2, dialog headings, card/playlist titles, field labels, metadata, body, buttons and navigation. */
:root{
  --subheading-size:16px;
  --subheading-line:20px;
  --subheading-weight:500;
}

/* Existing semantic subheading roles in this build. */
.description-card h3,
.formula-title,
.unlock-panel>h3{
  font-family:Roboto,"Noto Sans Thai",Arial,sans-serif;
  font-size:var(--subheading-size);
  line-height:var(--subheading-line);
  font-weight:var(--subheading-weight);
  letter-spacing:normal;
}



/* BODY / CONTENT FONT SIZE CONSTITUTION v1.0 — BODY CONTENT ONLY.
   Scope: paragraph/description/explanation/instruction/dialog body/panel body/notice sentence.
   Explicitly excludes headings, subheadings, card titles, metadata, labels, helper/caption, buttons, navigation, chips, search/input and badges. */
:root{
  --body-content-size:14px;
  --body-content-line:20px;
  --body-content-weight:400;
  --body-content-emphasis-weight:500;
}

.nav-drawer p,
.course-access-dialog p,
.documents-lead,
.access-dialog p,
.description-body p,
.course-dialog p,
.tool-description,
.tools-page .modal-card p,
.demo-warning,
.activity p,
.profile-modal .modal-card p,
.lesson-watch-page .lw-info-body,
.warning,
#modal .modal-card p,
.description-card .step > span:not(.step-num){
  font-family:Roboto,"Noto Sans Thai",Arial,sans-serif;
  font-size:var(--body-content-size);
  line-height:var(--body-content-line);
  font-weight:var(--body-content-weight);
  letter-spacing:normal;
}

.nav-drawer p strong,
.course-access-dialog p strong,
.documents-lead strong,
.access-dialog p strong,
.description-body p strong,
.course-dialog p strong,
.tool-description strong,
.tools-page .modal-card p strong,
.demo-warning strong,
.activity p strong,
.profile-modal .modal-card p strong,
.lesson-watch-page .lw-info-body strong,
.warning strong,
#modal .modal-card p strong,
.description-card .step > span:not(.step-num) strong{
  font-size:inherit;
  line-height:inherit;
  font-weight:var(--body-content-emphasis-weight);
}

/* v0.8.7.16 — Button Text Font Size Constitution v1.0: visible action labels only. */
.continue-button,
.section-link,
.locked-row button,
.courses-empty button,
.dialog-secondary,
.dialog-primary,
.documents-empty button,
.access-dialog button,
.calc-button,
.save-button,
.text-action,
#modal .modal-card button,
.member-actions button,
.course-cta,
.view-all,
.plan-btn,
.cert-row button,
.setting-card button,
.modal-ok,
.primary-button,
.secondary-button,
.resource-actions button,
.action-row button,
.doc-row button,
.line-button,
.modal-actions button,
.lesson-watch-page .lw-secondary-button,
.lesson-watch-page .lw-comments-head button{
  font-size:var(--button-label-size);
  line-height:var(--button-label-line);
  font-weight:var(--button-label-weight);
}


/* v0.8.7.19 — targeted spacing corrections only */
/* Tools: Tabs -> Panel = 16px */
.tools-page .content-tabs{margin-bottom:var(--space-4)}

/* Documents: lead/top copy -> filter controls = 16px; filter -> grid remains 24px */
.documents-content .documents-lead{margin-bottom:var(--space-4)}

/* Lesson Watch: major Info -> Comments block = 24px without changing inner content geometry */
.lesson-watch-page .lw-comments{padding-top:0;margin-top:var(--space-6)}

/* Lesson Watch: clip/scroll the rail tab strip locally so wide tab labels never create page-level overflow.
   Button sizes, padding, typography and rail width remain unchanged. */
.lesson-watch-page .lw-tabs{max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.lesson-watch-page .lw-tabs::-webkit-scrollbar{display:none}


/* DEVICE & VIEWPORT ADAPTIVE LAYOUT CONSTITUTION v1.0 — DEVICE/LAYOUT ONLY.
   Baseline: fluid desktop >=1280px; below 1280px keep the SAME desktop DOM/layout
   on a 1280px minimum canvas with horizontal scrolling. Passed component sizes are preserved. */
html,body{
  width:100%;
  min-width:var(--desktop-min);
  margin:0;
  -webkit-text-size-adjust:100%;
}
.app-page,.lesson-watch-page{
  width:100%;
  min-width:var(--desktop-min);
  max-width:none;
}
/* Fixed shell covers the same desktop canvas on small viewports and is horizontally
   synchronized by device-viewport-v1.js so horizontal scroll exposes the matching shell region. */
.app-header{
  left:0;
  right:auto;
  top:0;
  bottom:auto;
  width:var(--layout-inline-size);
  min-width:var(--desktop-min);
  transform:translateX(var(--device-canvas-offset-x));
  will-change:transform;
}
.app-rail{
  transform:translateX(var(--device-canvas-offset-x));
  will-change:transform;
}
.category-bar{
  left:var(--yt-ref-rail-w);
  right:auto;
  width:calc(var(--layout-inline-size) - var(--yt-ref-rail-w));
  min-width:calc(var(--desktop-min) - var(--yt-ref-rail-w));
  transform:translateX(var(--device-canvas-offset-x));
  will-change:transform;
}
/* Flexible layout children: device adaptation must not create min-content overflow. */
.app-main,
.app-main>.page-shell,
.video-grid,.course-grid,.documents-grid,.calc-grid,
.page-shell--tools,.page-shell--profile,.page-shell--learning,.page-shell--watch{
  min-width:0;
}
@media (max-width:1279px){
  html,body,.app-page,.lesson-watch-page{min-width:var(--desktop-min)}
  /* SAME DESKTOP PAGE — no stack/hide/mobile redesign. */
  .video-grid,.course-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* Sidebar Highlight Constitution v1.1 — compact rail current state only */
.app-rail > a[aria-current="page"],
.app-rail > a.is-active,
.app-rail > a.active{background:transparent;color:#0F0F0F;border-color:transparent}
.app-rail > a[aria-current="page"]:hover,
.app-rail > a.is-active:hover,
.app-rail > a.active:hover{background:#F2F2F2;color:#0F0F0F}
.app-rail > a[aria-current="page"] img,
.app-rail > a.is-active img,
.app-rail > a.active img{width:24px;height:24px;filter:none;transform:none}
.app-rail .active-rail{display:none!important;width:0!important}


/* FONT FAMILY & FONT WEIGHT TECHNIQUE CONSTITUTION v1.0 — FONT PROPERTIES ONLY.
   Scope: font-family, font-weight, font-style, font-synthesis and font resource declaration.
   Locked exclusion: .app-rail / Compact Sidebar remains inherited from its v0.8.7.24 baseline and is NOT modified here.
   Geometry, font-size, line-height, spacing, color, border, radius, assets, routes and JS are intentionally untouched. */
:root{
  --font-ui:"Roboto","Noto Sans Thai",Arial,sans-serif;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
}

/* Canonical family for every visible product-UI descendant except the locked Compact Sidebar. */
body *:not(.app-rail):not(.app-rail *):not(:has(.app-rail)){
  font-family:var(--font-ui);
  font-synthesis:none;
}

/* Product UI defaults: controls and interactive text scan at Medium 500 without state jumps. */
body button:not(.app-rail *),
body [role="tab"]:not(.app-rail *),
.category-pill,
.filter-chip,
.section-link,
.app-header-account,
.nav-drawer nav a,
.courses-drawer nav a,
.documents-drawer nav a,
.course-drawer>a{
  font-weight:var(--font-weight-medium);
}
body button:not(.app-rail *):hover,
body button:not(.app-rail *):focus,
body button:not(.app-rail *):active,
body button:not(.app-rail *)[aria-selected="true"],
body button:not(.app-rail *)[aria-pressed="true"],
body button:not(.app-rail *):disabled{
  font-weight:var(--font-weight-medium);
}

/* Regular 400: searchable/readable/supporting information. */
.app-header-center .app-search input,
.channel-name,
.metadata,
.facts,
.publisher,
.file-row,
.status-row:not(.free),
.course-facts,
.lesson-meta,
.lesson-watch-page .lw-playlist-copy p,
.lesson-watch-page .lw-playlist-copy div,
.tool-meta,
.meta-line,
.doc-title small,
.doc-status,
.setting-card small,
.cert-row small,
.progress-copy p,
.metric,
.risk-line,
.formula-box span{
  font-weight:var(--font-weight-regular);
}

/* Medium 500: Card / playlist titles and non-heading emphasized UI labels. */
.video-title,
.course-title,
.document-title-button,
.cover-placeholder strong,
.lesson-copy h2,
.lesson-watch-page .lw-playlist-copy h3,
.profile-page .course-info h3,
.field-label,
.course-badge,
.progress-row strong,
.metric strong,
.risk-line strong,
.formula-box strong,
.recent strong,
.step-num,
.cert-row strong,
.setting-card strong,
.progress-copy strong,
.tools-page .doc-title b,
.tools-page .workflow-row strong,
.tools-page .workflow-summary b,
.tools-page .step-number,
.tools-page .ea-panel-placeholder strong{
  font-weight:var(--font-weight-medium);
}

/* SemiBold 600: true Section / Panel / Dialog headings only. */
body button.description-header:not(.app-rail *),
#modal .modal-card h3,
.tools-page .doc-head,
.tools-page .popover>b,
.tools-page .modal-card h3,
.courses-empty strong,
.course-popover strong{
  font-weight:var(--font-weight-semibold);
}

/* Bold 700 remains reserved for Primary headings and approved numeric/data displays. */
.primary-result,
.course-price,
.profile-page .stat strong,
.profile-page .ring span,
.tools-page .video-copy strong{
  font-weight:var(--font-weight-bold);
}

/* Normal style for standard UI semantics; no decorative italic in controls/status. */
body button:not(.app-rail *),
body [role="tab"]:not(.app-rail *),
.category-pill,
.filter-chip,
.video-title,
.course-title,
.document-title-button,
.field-label,
.setting-card em{
  font-style:normal;
}


/* COURSES LAKSUT v2.0 — GLOBAL EXPANDED SIDEBAR ALIGNMENT */
:root{--yt-ref-rail-w:176px;--rail-item-w:176px;}
html body .app-rail{width:var(--yt-ref-rail-w);align-items:stretch;background:var(--brand-white);border-right:1px solid var(--color-border);}
html body .app-rail>a{position:relative;width:100%;height:var(--rail-item-h);min-height:var(--rail-item-h);flex:0 0 var(--rail-item-h);display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:0 16px;border-radius:0;color:var(--color-text-primary);text-decoration:none;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:visible;}
html body .app-rail>a img,html body .app-rail>a .icon{flex:0 0 24px;width:24px;height:24px;object-fit:contain;}
html body .app-rail>a:hover{background:var(--highlight-neutral-hover);color:#0F0F0F;}
html body .app-rail>a.active,html body .app-rail>a.is-active,html body .app-rail>a[aria-current="page"]{background:rgba(253,200,6,.14);color:#0F0F0F;font-weight:500;}
html body .app-rail>a.active::before,html body .app-rail>a.is-active::before,html body .app-rail>a[aria-current="page"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand-yellow);border-radius:0 3px 3px 0;}
html body .app-rail>a.active:hover,html body .app-rail>a.is-active:hover,html body .app-rail>a[aria-current="page"]:hover{background:rgba(253,200,6,.18);color:#0F0F0F;}
html body .app-rail .active-rail{display:none;}


/* BUTTON CAPSULE v1.1 — icon-only circle shape; dimensions remain owned by existing size roles. */
.more-button,.rail-next{border-radius:50%;}