:root {  --thumb-radius: 8px;
  --pill-height: 42px;
  --pill-radius: 21px;
  --brand-yellow: #FDC806;
  --brand-white: #FDFDFD;
  --brand-black: #000000;
  --text-primary: #171717;
  --text-secondary: #666666;
  --divider: #E6E6E6;
  --surface-soft: #F7F7F7;
  --transition-fast: 150ms ease;
}
* { box-sizing: border-box; }
html, body { margin:0; background:var(--brand-white); color:var(--text-primary); }
body { font-family:"Noto Sans Thai","Noto Sans",Arial,sans-serif; font-size:16px;  }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--brand-black); outline-offset:2px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* SVG asset masks preserve the provided paths while allowing current-state color. */
.icon { display:inline-block; width:24px; height:24px; background:currentColor; -webkit-mask:var(--icon-url) center/contain no-repeat; mask:var(--icon-url) center/contain no-repeat; flex:0 0 auto; }
.icon-menu{--icon-url:url("assets/icons/menu.svg")}.icon-home{--icon-url:url("assets/icons/home.svg")}
.side-item.is-active .icon-home,.side-item[aria-current="page"] .icon-home{--icon-url:url("assets/nav-active/home-filled.svg")}.icon-courses{--icon-url:url("assets/icons/courses.svg")}.icon-documents{--icon-url:url("assets/icons/documents.svg")}.icon-calculator{--icon-url:url("assets/icons/calculator.svg")}.icon-tools{--icon-url:url("assets/icons/tools.svg")}.icon-profile{--icon-url:url("assets/icons/profile.svg")}.icon-search{--icon-url:url("assets/icons/search.svg")}.icon-notifications{--icon-url:url("assets/icons/notifications.svg")}.icon-chevron-down{--icon-url:url("assets/icons/chevron-down.svg")}.icon-more{--icon-url:url("assets/icons/more-vertical.svg")}.icon-close{--icon-url:url("assets/icons/close.svg")}

.top-header {      background:var(--brand-white); border-bottom:1px solid var(--divider); }
.icon-button { display:grid; place-items:center; width:40px; height:40px; border:0; padding:0; border-radius:50%; color:var(--brand-black); background:transparent; cursor:pointer; transition:background-color var(--transition-fast), color var(--transition-fast); }
.icon-button:hover { background:var(--surface-soft); }
.menu-button {    }
.menu-button .icon { width:24px; height:24px; }
.brand {      overflow:hidden; display:flex; align-items:center; justify-content:center; }
.brand img { display:block; object-fit:contain; }
.search-box {      border:1px solid var(--divider); border-radius:26px; background:var(--brand-white); display:flex; align-items:center; overflow:hidden; transition:border-color var(--transition-fast); }
.search-box:focus-within { border-color:var(--brand-black); }
.search-box input { width:100%; height:50px; border:0; outline:0; background:transparent; padding:0 62px 0 22px; font-size:16px; font-weight:400; color:var(--text-primary); }
.search-box input::placeholder { color:#6B6B6B; opacity:1; }
.search-button { position:absolute; right:5px; top:1px; width:49px; height:49px; border:0; background:transparent; display:grid; place-items:center; color:var(--brand-black); cursor:pointer; border-radius:50%; }
.search-button:hover { background:var(--surface-soft); }
.search-button .icon { width:24px; height:24px; }
.notification-button {    }
.notification-button .icon { width:24px; height:24px; }
.account-button {     padding:0 8px 0 0; border:0; border-radius:12px; background:transparent; color:var(--text-primary); display:flex; align-items:center; cursor:pointer; transition:background-color var(--transition-fast); }
.account-button:hover { background:var(--surface-soft); }
.account-avatar { width:48px; height:48px; object-fit:cover; border-radius:50%; flex:0 0 auto; }
.account-name { margin-left:var(--space-2); font-size:14px; font-weight:500; white-space:nowrap; }
.account-button .icon { margin-left:auto; width:20px; height:20px; color:#686868; }

.sidebar {       background:var(--brand-white); border-right:1px solid var(--divider);  }
.side-item {   text-decoration:none; color:var(--brand-black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); font-size:14px; font-weight:600; line-height:18px; transition:background-color var(--transition-fast),color var(--transition-fast); }
.side-item .icon { width:24px; height:24px; }
.side-item:hover { background:var(--highlight-neutral-hover); color:#0F0F0F; }
.side-item.is-active, .side-item[aria-current="page"] { color:#0F0F0F; background:transparent; }
.side-item.is-active .icon { width:24px; height:24px; }

.category-bar {        background:var(--brand-white); overflow:hidden; }
.category-row { display:flex; align-items:center; gap:var(--space-chip-gap); padding:0 var(--space-page-x); white-space:nowrap; }
.category-pill { height:42px; flex:0 0 auto; padding:0 21px; border:1px solid var(--divider); border-radius:21px; background:var(--brand-white); color:var(--brand-black); font-size:15px; font-weight:500; line-height:40px; cursor:pointer; transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast); }
.category-pill:hover { background:var(--highlight-neutral-hover); color:#0F0F0F; }
.category-pill.is-active { background:var(--highlight-selected-bg); color:var(--highlight-selected-fg); border-color:var(--highlight-selected-bg); font-weight:500; }

.main-content { z-index:1; background:var(--brand-white); }
.video-grid { display:grid; }
.video-item { min-width:0; background:transparent; border:0; box-shadow:none; }
.video-item[hidden] { display:none!important; }
.thumbnail-button { display:block; position:relative; width:100%; border:0; padding:0; border-radius:8px; background:#10151b; overflow:hidden; cursor:pointer; }
.thumbnail { display:block; width:100%; height:100%; object-fit:fill; border-radius:8px; transition:filter var(--transition-fast); }
.thumbnail-button:hover .thumbnail { filter:brightness(.965); }
.video-info { display:grid; grid-template-columns:48px minmax(0,1fr) 40px; column-gap:var(--space-3); margin-top:var(--space-thumb-meta); min-height:73px; align-items:start; }
.teacher-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; margin-top:0; }
.video-text { min-width:0; padding-top:0; }
.video-title { display:block; width:100%; max-width:100%; padding:0; border:0; background:none; text-align:left; color:var(--text-primary); font-size:15px; line-height:21px; font-weight:500; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.video-title:hover { text-decoration:none; }
.channel-name, .metadata { color:var(--text-secondary); font-size:13px; line-height:20px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.channel-name { margin-top:var(--space-1); }
.more-button { width:40px; height:40px; margin-top:0; border:0; padding:0; display:grid; place-items:center; border-radius:50%; background:transparent; color:var(--brand-black); cursor:pointer; transition:background-color var(--transition-fast); }
.more-button:hover { background:var(--surface-soft); }
.more-button .icon { width:24px; height:24px; }
.empty-state { min-height:400px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-secondary); }
.empty-state strong { color:var(--text-primary); font-size:18px; }

.drawer-backdrop { position:fixed; z-index:1100; inset:0; background:rgba(0,0,0,.24); }
.nav-drawer { position:fixed; z-index:1200; left:0; top:0; bottom:0; width:340px; transform:translateX(-100%); transition:transform 160ms ease; background:var(--brand-white); box-shadow:5px 0 20px rgba(0,0,0,.15); padding:var(--space-4) var(--space-3); }
.nav-drawer.is-open { transform:translateX(0); }
.drawer-head { height:72px; display:flex; align-items:center; gap:var(--space-4); }
.drawer-head > img { display:block; width:120px; height:auto; max-width:none; max-height:40px; object-fit:contain; }
.nav-drawer p { margin:var(--space-4) 0; color:var(--text-secondary); }
.popover, .card-menu { position:fixed; z-index:1300; background:var(--brand-white); border:1px solid var(--divider); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:var(--space-2); font-size:14px; }
.popover { top:76px; width:260px; display:flex; flex-direction:column; gap:4px; }
#notificationPopover { left:auto; right:auto; top:auto; }
.account-popover { right:16px; }
.popover span { color:var(--text-secondary); }
.card-menu { width:210px; padding:var(--space-2); }
.card-menu button { width:100%; height:42px; border:0; border-radius:8px; background:transparent; text-align:left; padding:0 var(--space-3); cursor:pointer; }
.card-menu button:hover { background:var(--surface-soft); }
.toast { position:fixed; z-index:1400; left:50%; bottom:30px; transform:translateX(-50%); background:var(--brand-black); color:var(--brand-white); border-radius:8px; padding:var(--space-2) var(--space-4); font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.18); }


/* Pixel-QA corrections measured from the 1536×864 reference image. */
[hidden] { display:none !important; }
.category-row { gap:var(--space-chip-gap); }
.category-pill:nth-child(1){width:102px;padding:0}.category-pill:nth-child(2){width:96px;padding:0}.category-pill:nth-child(3){width:164px;padding:0}.category-pill:nth-child(4){width:67px;padding:0}.category-pill:nth-child(5){width:137px;padding:0}.category-pill:nth-child(6){width:145px;padding:0}.category-pill:nth-child(7){width:152px;padding:0}.category-pill:nth-child(8){width:62px;padding:0}.category-pill:nth-child(9){width:106px;padding:0}.category-pill:nth-child(10){width:125px;padding:0}
.video-item:nth-child(-n/**/+3) .thumbnail-button { }
.brand {     }
.brand img { width:120px; height:auto; max-width:none; max-height:40px; }
/* Final baseline alignment pass for v0.1.0 */
.category-row { transform:translateY(4px); }
.sidebar {  }
.side-item {   }

/* Avatar/info alignment measured from reference */
.video-info { margin-top:var(--space-thumb-meta); }
.video-grid { row-gap:var(--space-grid-y); }
.account-button {  }
.account-name { margin-left:var(--space-2); }

/* Highlight v1.0 — state colors only */
.side-item.is-active:hover,.side-item[aria-current="page"]:hover{background:#F2F2F2;color:#0F0F0F}
.category-pill.is-active:hover{background:var(--highlight-selected-hover);color:var(--highlight-selected-fg);border-color:var(--highlight-selected-hover)}
.category-pill.is-active:active{background:var(--highlight-selected-pressed);color:var(--highlight-selected-fg);border-color:var(--highlight-selected-pressed)}