/* ===== Step 2.1: Compact Category -> Subcategory Browser ===== */

.compact-lecture-hero{padding:38px 0}
.compact-browser-section{padding-top:28px}

.breadcrumb-lite{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:13px;
  color:#c9d9ff;
  margin-bottom:12px;
}
.breadcrumb-lite a{color:#fff}

.lecture-type-tabs{
  display:flex;
  gap:9px;
  overflow-x:auto;
  padding:2px 1px 12px;
  margin-bottom:18px;
}
.lecture-type-tab{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:11px;
  font-weight:700;
  box-shadow:0 4px 14px rgba(14,43,92,.05);
}
.lecture-type-tab.active{
  background:linear-gradient(135deg,#1763ef,#073ca9);
  color:#fff;
  border-color:transparent;
}

.browser-toolbar,
.subcategory-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.browser-toolbar h2{margin:0;font-size:26px}
.browser-toolbar p{margin:3px 0 0;color:var(--muted)}
.browser-app-btn{white-space:nowrap}

.category-group-list{
  display:grid;
  gap:15px;
}

.category-group-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:17px;
}

.category-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

.category-mini-identity{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

.category-mini-thumb{
  flex:0 0 64px;
  width:64px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(135deg,#edf3ff,#fff5ce);
  display:grid;
  place-items:center;
  font-size:27px;
}
.category-mini-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.category-heading-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.category-heading-line h3{
  margin:0;
  font-size:20px;
  line-height:1.3;
}
.category-summary{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:5px;
  font-size:13px;
  color:var(--muted);
}

.category-open-app{
  color:var(--blue);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.subcategory-chip-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding-top:14px;
}

.subcategory-chip{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:11px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#f9fbff;
  transition:.15s ease;
}
.subcategory-chip:hover{
  border-color:#b7cdf8;
  background:#f1f6ff;
  transform:translateY(-1px);
}

.subcategory-chip-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  display:grid;
  place-items:center;
}
.subcategory-chip-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.subcategory-chip-content{
  min-width:0;
  flex:1;
}
.subcategory-chip-content strong{
  display:block;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subcategory-chip-content small{
  display:block;
  color:var(--muted);
  margin-top:2px;
}
.subcategory-arrow{
  color:var(--blue);
  font-weight:800;
}

.no-subcategory-inline,
.subcategory-load-error,
.more-subcategory-note{
  margin-top:13px;
  padding:11px 13px;
  border-radius:11px;
  background:#f6f8fc;
  color:var(--muted);
  font-size:13px;
}
.no-subcategory-inline a{color:var(--blue);font-weight:700;margin-left:4px}
.subcategory-load-error{background:#fff2f2;color:#9a3333}
.more-subcategory-note span{display:block;margin-top:2px}

.compact-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:26px;
  flex-wrap:wrap;
}
.page-numbers{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}
.page-btn,.page-number{
  display:inline-flex;
  min-height:39px;
  min-width:39px;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:9px;
  color:var(--blue);
  font-weight:700;
}
.page-number.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}

.subcategory-lecture-hero{padding:38px 0}
.back-to-categories{
  color:var(--blue);
  font-weight:700;
}
.subcategory-lecture-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.empty-state{
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:40px 24px;
}
.empty-icon{font-size:45px}
.empty-state h3{margin:7px 0}
.empty-state p{color:var(--muted)}

@media(max-width:1050px){
  .subcategory-chip-grid{grid-template-columns:repeat(2,1fr)}
  .subcategory-lecture-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:760px){
  .category-group-header{
    align-items:flex-start;
    flex-direction:column;
  }
  .category-open-app{white-space:normal}
  .subcategory-chip-grid{grid-template-columns:1fr}
  .subcategory-lecture-grid{grid-template-columns:repeat(2,1fr)}
  .browser-toolbar,
  .subcategory-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .browser-app-btn,
  .subcategory-toolbar .btn{width:100%}
}

@media(max-width:480px){
  .subcategory-lecture-grid{grid-template-columns:1fr}
  .category-mini-thumb{width:54px;height:54px;flex-basis:54px}
  .category-heading-line h3{font-size:18px}
}