: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:var(--surface-soft);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)}


/* Home guest state — access visibility only. Global shell/card geometry remains unchanged. */
.home-main .thumbnail-button{isolation:isolate}
.home-main .video-access-badge{
  position:absolute;
  z-index:2;
  left:12px;
  top:12px;
  height:32px;
  padding:0 12px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:14px;
  line-height:20px;
  font-weight:500;
  white-space:nowrap;
  pointer-events:none;
}
.home-main .video-access-badge.is-locked{background:var(--brand-black);color:var(--brand-white)}
.home-main .video-access-badge.is-locked img{width:16px;height:16px;filter:invert(1)}
.home-main .video-item[data-access="locked"] .thumbnail-button::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:rgba(0,0,0,.12);
  pointer-events:none;
}
.home-main .video-item[data-access="locked"] .thumbnail-button,
.home-main .video-item[data-access="locked"] .video-title{
  opacity:1;
  cursor:pointer;
}
.home-main .video-item[data-access="locked"] .thumbnail-button:hover .thumbnail{filter:none}


/* Home video loading review state — feed-only skeletons; shell geometry stays unchanged. */
.home-main .video-grid[aria-busy="true"] .video-skeleton-card{
  min-width:0;
  pointer-events:none;
  user-select:none;
}
.home-main .video-skeleton-thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--thumb-radius);
  background:var(--surface-soft);
}
.home-main .video-skeleton-info{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 40px;
  column-gap:var(--space-3);
  margin-top:var(--space-thumb-meta);
  align-items:start;
}
.home-main .video-skeleton-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--surface-soft);
}
.home-main .video-skeleton-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding-top:2px;
}
.home-main .video-skeleton-line{
  height:16px;
  border-radius:8px;
  background:var(--surface-soft);
}
.home-main .video-skeleton-line.is-title{width:88%}
.home-main .video-skeleton-line.is-title-short{width:64%}
.home-main .video-skeleton-line.is-channel{width:36%;height:12px}
.home-main .video-skeleton-line.is-meta{width:44%;height:12px}
.home-main .video-skeleton-end{width:40px;height:40px}
.app-root.is-video-loading .app-search{opacity:.58}
.app-root.is-video-loading .category-pill:disabled{
  cursor:not-allowed;
  opacity:.58;
}
.app-root.is-video-loading .category-pill.is-active:disabled{
  opacity:.58;
}
.app-root.is-video-loading .category-pill:disabled:not(.is-active):hover{
  background:var(--brand-white);
  color:var(--brand-black);
}
.app-root.is-video-loading .category-pill.is-active:disabled:hover{
  background:var(--highlight-selected-bg);
  color:var(--highlight-selected-fg);
  border-color:var(--highlight-selected-bg);
}
.app-root.is-video-loading .app-search input:disabled,
.app-root.is-video-loading .app-search button:disabled{
  cursor:not-allowed;
}


/* Home video load error review state — feed-only; global shell stays unchanged. */
.home-main .video-load-error-state{
  grid-column:1 / -1;
  min-height:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:32px 24px;
}
.home-main .video-load-error-state h2{
  margin:0;
  color:var(--text-primary);
  font-size:20px;
  line-height:28px;
  font-weight:600;
}
.home-main .video-load-error-state p{
  max-width:560px;
  margin:0;
  color:var(--text-secondary);
  font-size:14px;
  line-height:20px;
  font-weight:400;
}
.home-main .video-load-retry-button{
  height:36px;
  min-height:36px;
  margin-top:8px;
  padding:0 16px;
  border:1px solid var(--brand-black);
  border-radius:18px;
  background:var(--brand-black);
  color:var(--brand-white);
  font-size:14px;
  line-height:20px;
  font-weight:500;
  cursor:pointer;
}
.home-main .video-load-retry-button:hover:not(:disabled){
  opacity:.88;
}
.home-main .video-load-retry-button:disabled{
  cursor:not-allowed;
  opacity:.58;
}
.app-root.is-video-load-error .app-search{opacity:.58}
.app-root.is-video-load-error .category-pill:disabled{
  cursor:not-allowed;
  opacity:.58;
}
.app-root.is-video-load-error .category-pill.is-active:disabled{opacity:.58}
.app-root.is-video-load-error .category-pill:disabled:not(.is-active):hover{
  background:var(--brand-white);
  color:var(--brand-black);
}
.app-root.is-video-load-error .category-pill.is-active:disabled:hover{
  background:var(--highlight-selected-bg);
  color:var(--highlight-selected-fg);
  border-color:var(--highlight-selected-bg);
}
.app-root.is-video-load-error .app-search input:disabled,
.app-root.is-video-load-error .app-search button:disabled{cursor:not-allowed}


/* Home system-empty review state — successful load with zero videos; feed only. */
.home-main .video-system-empty-state{
  grid-column:1 / -1;
  min-height:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  padding:32px 24px;
}
.home-main .video-system-empty-state h2{
  margin:0;
  color:var(--text-primary);
  font-size:20px;
  line-height:28px;
  font-weight:600;
}
.home-main .video-system-empty-state p{
  margin:0;
  color:var(--text-secondary);
  font-size:14px;
  line-height:20px;
  font-weight:400;
}
.app-root.is-video-empty .app-search{opacity:.58}
.app-root.is-video-empty .category-pill:disabled{
  cursor:not-allowed;
  opacity:.58;
}
.app-root.is-video-empty .category-pill.is-active:disabled{opacity:.58}
.app-root.is-video-empty .category-pill:disabled:not(.is-active):hover{
  background:var(--brand-white);
  color:var(--brand-black);
}
.app-root.is-video-empty .category-pill.is-active:disabled:hover{
  background:var(--highlight-selected-bg);
  color:var(--highlight-selected-fg);
  border-color:var(--highlight-selected-bg);
}
.app-root.is-video-empty .app-search input:disabled,
.app-root.is-video-empty .app-search button:disabled{cursor:not-allowed}


/* Home incomplete video-data review state — card-only fallbacks; shell and shared geometry stay unchanged. */
.home-main .video-item.is-video-incomplete-review .thumbnail.is-review-placeholder,
.home-main .video-item.is-video-incomplete-review .thumbnail-placeholder-surface{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:var(--thumb-radius);
  background:var(--surface-soft);
}
.home-main .video-item.is-video-incomplete-review .video-data-fallback{
  margin-top:4px;
  color:var(--text-secondary);
  font-size:14px;
  line-height:20px;
  font-weight:400;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-main .video-item[data-route-ready="false"] .thumbnail-button:disabled,
.home-main .video-item[data-route-ready="false"] .video-title:disabled{
  opacity:1;
  cursor:not-allowed;
}
.home-main .video-item[data-route-ready="false"] .thumbnail-button:disabled:hover .thumbnail{
  filter:none;
}

/* Home video-open error review dialog — frontend-only route failure state. */
.video-open-error-overlay{
  position:fixed;
  z-index:1600;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.36);
}
.video-open-error-dialog{
  position:relative;
  width:min(480px, calc(100vw - 48px));
  border:1px solid var(--divider);
  border-radius:12px;
  background:var(--brand-white);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  padding:32px;
  text-align:left;
}
.video-open-error-dialog h2{
  margin:0 48px 8px 0;
  color:var(--text-primary);
  font-size:20px;
  line-height:28px;
  font-weight:600;
  outline:none;
}
.video-open-error-dialog .video-open-error-video-name{
  margin:0 0 8px;
  color:var(--text-primary);
  font-size:16px;
  line-height:20px;
  font-weight:500;
  overflow-wrap:anywhere;
}
.video-open-error-dialog .video-open-error-message{
  margin:0;
  color:var(--text-secondary);
  font-size:16px;
  line-height:20px;
  font-weight:400;
}
.video-open-error-close{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
}
.video-open-error-close .icon{width:24px;height:24px}
.video-open-error-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:24px;
}
.video-open-error-retry{
  height:36px;
  min-height:36px;
  padding:0 16px;
  border:1px solid var(--brand-black);
  border-radius:18px;
  background:var(--brand-black);
  color:var(--brand-white);
  font-size:14px;
  line-height:20px;
  font-weight:500;
  cursor:pointer;
}
.video-open-error-retry:hover:not(:disabled){opacity:.88}
.video-open-error-retry:disabled{
  cursor:not-allowed;
  opacity:.58;
}

/* Home restricted-video access dialog — frontend-only permission explanation. */
.video-access-dialog-overlay{
  position:fixed;
  z-index:1600;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.36);
}
.video-access-dialog{
  width:min(480px, calc(100vw - 48px));
  border:1px solid var(--divider);
  border-radius:12px;
  background:var(--brand-white);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  padding:32px;
  text-align:left;
}
.video-access-dialog h2{
  margin:0 0 8px;
  color:var(--text-primary);
  font-size:20px;
  line-height:28px;
  font-weight:600;
}
.video-access-dialog-video-name{
  margin:0 0 8px;
  color:var(--text-primary);
  font-size:16px;
  line-height:20px;
  font-weight:500;
  overflow-wrap:anywhere;
}
.video-access-dialog-description{
  margin:0;
  color:var(--text-secondary);
  font-size:16px;
  line-height:20px;
  font-weight:400;
}
.video-access-dialog-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:24px;
}
.video-access-dialog-close{
  height:36px;
  min-height:36px;
  padding:0 16px;
  border:1px solid var(--brand-black);
  border-radius:18px;
  background:var(--brand-black);
  color:var(--brand-white);
  font-size:14px;
  line-height:20px;
  font-weight:500;
  cursor:pointer;
}
.video-access-dialog-close:hover{opacity:.88}


/* Home search/filter no-results exit — page-local state only. */
.home-main .video-filter-clear-button{
  height:36px;
  min-height:36px;
  margin-top:8px;
  padding:0 16px;
  border:1px solid var(--brand-black);
  border-radius:18px;
  background:var(--brand-black);
  color:var(--brand-white);
  font-size:14px;
  line-height:20px;
  font-weight:500;
  cursor:pointer;
}
.home-main .video-filter-clear-button:hover:not(:disabled){opacity:.88}
.home-main .video-filter-clear-button:disabled{cursor:not-allowed;opacity:.58}