.m-public-course-hub,
.m-public-course-hub *,
.d-public-course-hub,
.d-public-course-hub *{
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

.m-public-course-hub{
  --fc-blue:#1C8BFD;
  --fc-blue-dark:#0F6FE4;
  --fc-text:#081427;
  --fc-sub:#8A95A8;
  --fc-line:#DCE6F1;
  --fc-card:#fff;
  --fc-soft:#F6FAFE;
  --fc-gap:12px;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

.newapp-shell.flamo-desktop-mode .m-public-course-hub,
.newapp-shell:not(.flamo-desktop-mode) .d-public-course-hub{
  display:none !important;
}

.m-public-course-section{
  position:relative;
  width:100%;
  min-width:0;
  margin:0 0 16px;
}

.m-public-course-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--fc-gap);
  overflow:visible;
  padding:0;
  align-items:flex-start;
  width:100%;
  max-width:100%;
  min-width:0;
}

.m-public-course-grid::-webkit-scrollbar{
  display:none;
}

.m-public-course-item{
  width:100%;
  min-width:0;
  max-width:none;
  align-self:flex-start;
}

.m-public-course-card{
  background:var(--fc-card);
  border:1px solid var(--fc-line);
  border-radius:18px;
  padding:8px;
  overflow:hidden;
  min-height:0;
  height:auto;
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 26px rgba(25,48,83,.06);
}

.m-public-course-cover{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#DCE4EE;
  aspect-ratio:16/9;
  margin-bottom:14px;
}

.m-public-course-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.m-public-course-badge{
  position:absolute;
  top:5px;
  left:5px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 10px;
  border-radius:9px;
  background:#06062996;
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:600;
}

.m-public-course-badge svg{
  width:13px;
  height:13px;
  flex:0 0 13px;
}

.m-public-course-category{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#7B879B;
  font-size:11px;
  font-weight:600;
  margin-bottom:10px;
}

.m-public-course-category span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:7px 10px;
  border-radius:999px;
  background:#F3F6FA;
  line-height:1;
  max-width:50%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.m-public-course-title{
  margin:0 0 8px;
  color:var(--fc-text);
  font-size:18px;
  line-height:1.22;
  font-weight:500;
  letter-spacing:0;
}

.m-public-course-desc{
  margin:0 0 14px;
  color:var(--fc-sub);
  font-size:12px;
  line-height:1.42;
  font-weight:500;
}

.m-public-course-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 12px;
}

.m-public-course-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  background:#EEF2F7;
  color:#6D7685;
  font-size:11px;
  line-height:1;
  font-weight:600;
}

.m-public-course-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
}

.m-public-btn{
  appearance:none;
  border:none;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  gap:6px;
  padding:10px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  transition:.2s ease;
}

.m-public-btn:hover{
  transform:translateY(-2px);
}

.m-public-btn--ghost{
  width:100%;
  justify-content:space-between;
  background:#F7FAFE;
  border:1px solid #DCE6F1;
  color:#66748A;
  box-shadow:none;
  margin-bottom:10px;
}

.m-public-btn--ghost::after{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease;
}

.m-public-btn--ghost:hover,
.m-public-btn--ghost.is-active{
  background:#EAF4FF;
  border-color:#BBD8FA;
  color:#1C8BFD;
}

.m-public-btn--ghost.is-active::after{
  transform:rotate(180deg);
}

.m-public-btn--video{
  margin-left:auto;
  background:var(--fc-blue);
  color:#fff;
  box-shadow:0 8px 20px rgba(31,134,255,.24);
}

.m-public-btn--video:hover{
  background:var(--fc-blue-dark);
  color:#fff;
}

.m-public-course-author{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}

.m-public-course-author img{
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:cover;
  flex:0 0 32px;
  background:#EAF4FF;
}

.m-public-course-author div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.m-public-course-author strong{
  color:#0E1830;
  font-size:11px;
  font-weight:600;
  line-height:1.1;
  max-width:92px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.m-public-course-author span{
  color:#8A95A8;
  font-size:9px;
  font-weight:500;
  line-height:1.1;
}

.m-public-card-panel{
  display:none;
  width:100%;
  margin:0 0 10px;
  padding:8px;
  border-radius:14px;
  background:var(--fc-soft);
  border:1px solid #E2EAF4;
  box-shadow:none;
  flex:0 0 auto;
}

.m-public-card-panel.is-open{
  display:block;
  animation:mPublicPanelFade .22s ease;
}

@keyframes mPublicPanelFade{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.m-public-materi-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.m-public-materi-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:34px;
  padding:8px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid #E3EAF3;
  box-shadow:none;
  overflow:hidden;
  text-decoration:none;
  transition:.18s ease;
  cursor:pointer;
}

.m-public-materi-item:hover{
  transform:translateY(-1px);
  border-color:#BBD8FA;
  background:#F8FBFF;
  box-shadow:none;
}

.m-public-materi-content{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.m-public-materi-title{
  margin:0;
  font-size:11px;
  font-weight:600;
  line-height:1.25;
  color:#526174;
}

.m-public-materi-sub{
  margin:0;
  font-size:9px;
  font-weight:500;
  line-height:1.2;
  color:#8A95A8;
}

.m-public-access-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:6px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.m-public-access-badge.is-free{
  background:#EAF4FF;
  color:#1C8BFD;
  border:1px solid #BBD8FA;
}

.m-public-access-badge.is-premium{
  background:#FFF4D8;
  color:#B45309;
  border:1px solid #FFD58A;
}

.m-public-error,
.d-public-error{
  background:#fff;
  border:1px solid #DCE6F1;
  border-radius:14px;
  width:100%;
  padding:18px;
  color:#6B7A93;
  font-size:12px;
  font-weight:500;
}

.m-public-video-popup{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.m-public-video-popup.is-open{
  display:flex;
  animation:mPublicPopupFade .22s ease;
}

.m-public-video-backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,17,31,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.m-public-video-modal{
  position:relative;
  width:min(920px, 100%);
  border-radius:22px;
  background:#071323;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 80px rgba(0,0,0,.34);
  padding:10px;
  z-index:2;
}

.m-public-video-close{
  position:absolute;
  top:-14px;
  right:-10px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:#fff;
  color:#0E1830;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.m-public-video-frame{
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:#000;
}

.m-public-video-frame iframe{
  width:100%;
  height:100%;
  display:block;
}

@keyframes mPublicPopupFade{
  from{opacity:0}
  to{opacity:1}
}

.d-public-course-hub{
  --fd-blue:#1C8BFD;
  --fd-blue-dark:#0F6FE4;
  --fd-text:#081427;
  --fd-sub:#8A95A8;
  --fd-line:#DCE6F1;
  --fd-card:#fff;
  --fd-soft:#F4F8FD;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:visible;
}

.d-public-section{
  position:relative;
  width:100%;
  min-width:0;
}

.d-public-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.d-public-item{
  min-width:0;
  align-self:start;
}

.d-public-card{
  background:var(--fd-card);
  border:1px solid var(--fd-line);
  border-radius:18px;
  padding:8px;
  overflow:hidden;
  min-height:0;
  height:auto;
  display:flex;
  flex-direction:column;
}

.d-public-cover{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#DCE4EE;
  aspect-ratio:16/9;
  margin-bottom:14px;
}

.d-public-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.d-public-badge{
  position:absolute;
  top:5px;
  left:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:9px;
  background:#06062996;
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1;
}

.d-public-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.d-public-type-tag,
.d-public-app-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  font-weight:600;
}

.d-public-type-tag{
  background:#F3F6FA;
  color:#7B879B;
}

.d-public-app-tag.app-ae{background:#EAF1FF;color:#2563EB}
.d-public-app-tag.app-pr{background:#F1EAFE;color:#7C3AED}
.d-public-app-tag.app-capcut{background:#EEF2F7;color:#111827}
.d-public-app-tag.app-resolve{background:#FFF0E5;color:#EA580C}
.d-public-app-tag.app-ai{background:#FFF4D8;color:#C26A00}
.d-public-app-tag.app-default{background:#EEF2F7;color:#64748B}

.d-public-title{
  margin:0 0 8px;
  color:var(--fd-text);
  font-size:18px;
  line-height:1.22;
  font-weight:500;
  letter-spacing:0;
}

.d-public-desc{
  margin:0 0 14px;
  color:var(--fd-sub);
  font-size:12px;
  line-height:1.42;
  font-weight:500;
}

.d-public-parts-btn{
  appearance:none;
  border:1px solid #DCE6F1;
  background:#F7FAFE;
  color:#66748A;
  width:100%;
  min-height:38px;
  border-radius:12px;
  padding:9px 11px;
  margin:0 0 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  transition:.2s ease;
}

.d-public-parts-btn:hover,
.d-public-parts-btn.is-open{
  background:#EAF4FF;
  border-color:#BBD8FA;
  color:#1C8BFD;
}

.d-public-parts-btn svg{
  width:16px;
  height:16px;
  display:block;
  transition:transform .2s ease;
}

.d-public-parts-btn.is-open svg{
  transform:rotate(180deg);
}

.d-public-parts-list{
  display:none;
  width:100%;
  margin:0 0 10px;
  padding:8px;
  border-radius:14px;
  background:var(--fd-soft);
  border:1px solid #E2EAF4;
  flex-direction:column;
  gap:7px;
}

.d-public-parts-list.is-open{
  display:flex;
  animation:dPublicPartsFade .22s ease;
}

@keyframes dPublicPartsFade{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.d-public-parts-list a{
  display:flex;
  align-items:center;
  min-height:34px;
  padding:8px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid #E3EAF3;
  color:#526174;
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  line-height:1.25;
  transition:.18s ease;
}

.d-public-parts-list a:hover{
  color:#1C8BFD;
  border-color:#BBD8FA;
  background:#F8FBFF;
  transform:translateY(-1px);
}

.d-public-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
}

.d-public-author{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}

.d-public-author img{
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:cover;
  flex:0 0 32px;
}

.d-public-author div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.d-public-author strong{
  color:#0E1830;
  font-size:11px;
  font-weight:600;
  line-height:1.1;
  max-width:92px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.d-public-author span{
  color:#8A95A8;
  font-size:9px;
  font-weight:500;
  line-height:1.1;
}

.d-public-open-btn{
  flex:0 0 auto;
  appearance:none;
  border:none;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  width:fit-content;
  max-width:fit-content;
  padding:10px 14px;
  border-radius:10px;
  background:var(--fd-blue);
  color:#fff;
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  transition:.2s ease;
}

.d-public-open-btn:hover{
  transform:translateY(-2px);
  background:var(--fd-blue-dark);
  color:#fff;
}

body.flamo-desktop-mode-active .d-public-course-hub{
  --fd-blue:#1C8BFD;
  --fd-blue-dark:#0F6FE4;
  --fd-text:#EAF2FF;
  --fd-sub:rgba(206,221,241,.76);
  --fd-line:rgba(129,169,222,.18);
  --fd-card:rgba(13,31,52,.82);
  --fd-soft:rgba(8,20,36,.78);
}

body.flamo-desktop-mode-active .d-public-card,
body.flamo-desktop-mode-active .d-public-error{
  background:rgba(13,31,52,.82);
  border-color:rgba(129,169,222,.18);
  box-shadow:0 16px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

body.flamo-desktop-mode-active .d-public-cover{background:#10233A}
body.flamo-desktop-mode-active .d-public-cover img{opacity:.72}
body.flamo-desktop-mode-active .d-public-title,
body.flamo-desktop-mode-active .d-public-author strong{color:#F3F8FF}
body.flamo-desktop-mode-active .d-public-desc,
body.flamo-desktop-mode-active .d-public-author span{color:rgba(206,221,241,.76)}
body.flamo-desktop-mode-active .d-public-type-tag{background:rgba(255,255,255,.08);color:rgba(230,240,255,.72)}
body.flamo-desktop-mode-active .d-public-app-tag.app-ae{background:rgba(37,99,235,.20);color:#8BB7FF}
body.flamo-desktop-mode-active .d-public-app-tag.app-pr{background:rgba(124,58,237,.20);color:#C4A6FF}
body.flamo-desktop-mode-active .d-public-app-tag.app-capcut{background:rgba(255,255,255,.12);color:#F4F8FF}
body.flamo-desktop-mode-active .d-public-app-tag.app-resolve{background:rgba(234,88,12,.18);color:#FFB17C}
body.flamo-desktop-mode-active .d-public-app-tag.app-ai{background:rgba(245,158,11,.18);color:#FFD166}
body.flamo-desktop-mode-active .d-public-app-tag.app-default{background:rgba(148,163,184,.18);color:#D4E1F2}
body.flamo-desktop-mode-active .d-public-parts-btn{background:rgba(255,255,255,.06);border-color:rgba(129,169,222,.16);color:rgba(225,237,252,.78)}
body.flamo-desktop-mode-active .d-public-parts-btn:hover,
body.flamo-desktop-mode-active .d-public-parts-btn.is-open{background:rgba(28,139,253,.14);border-color:rgba(28,139,253,.42);color:#86C5FF}
body.flamo-desktop-mode-active .d-public-parts-list{background:rgba(8,20,36,.78);border-color:rgba(129,169,222,.16)}
body.flamo-desktop-mode-active .d-public-parts-list a{background:rgba(255,255,255,.06);border-color:rgba(129,169,222,.14);color:rgba(220,233,250,.78)}
body.flamo-desktop-mode-active .d-public-parts-list a:hover{background:rgba(28,139,253,.13);border-color:rgba(28,139,253,.36);color:#8DCAFF}
body.flamo-desktop-mode-active .d-public-open-btn{background:linear-gradient(135deg,#1C8BFD,#4F7BFF);color:#fff;box-shadow:0 12px 24px rgba(28,139,253,.25)}

@media (max-width:1024px){
  .m-public-course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .d-public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:767px){
  .m-public-course-grid{grid-template-columns:1fr;gap:10px}
  .d-public-grid{grid-template-columns:1fr;gap:10px}
  .d-public-title{font-size:18px}
  .d-public-desc{font-size:12px}
  .d-public-card-footer{gap:8px}
  .d-public-open-btn{padding:10px 13px}
}