/* Search dropdown */
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-alt); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  z-index: 300; overflow: hidden; display: none;
}
.search-dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; transition: background var(--transition);
}
.search-dropdown-item:hover { background: var(--bg-muted); }
.search-dropdown-item img {
  width: 48px; height: 34px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
}
.search-dropdown-title { font-size: .875rem; font-weight: 500; color: var(--text); }
.search-dropdown-sub   { font-size: .75rem; color: var(--text-3); }

/* Cert banner */
.cert-banner {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--success); color: #fff;
  border-radius: var(--radius-md); padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 12px;
  box-shadow: var(--shadow-lg); z-index: 500;
  max-width: 320px;
  animation: slideUp .3s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
}
.cert-banner svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.cert-banner strong { display: block; margin-bottom: 4px; }
.cert-banner p { font-size: .875rem; opacity: .9; }
.cert-banner a { color: #fff; text-decoration: underline; }

/* Wishlisted state */
.wishlisted { color: var(--error); border-color: var(--error); }

/* Tutorial cover (compact banner, not full-height) */
.tut-cover {
  width: 100%; max-height: 260px; object-fit: cover;
  border-radius: var(--radius-md); margin-bottom: 24px; display: block;
}
@media (max-width: 600px) { .tut-cover { max-height: 180px; } }

/* Like button */
.like-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border); background: var(--bg-alt);
  font-size: .8125rem; font-weight: 600; color: var(--text-2);
  transition: all var(--transition);
}
.like-btn svg { width: 16px; height: 16px; transition: transform var(--transition); }
.like-btn:hover { border-color: var(--accent); color: var(--accent); }
.like-btn.liked { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.like-btn.liked svg { transform: scale(1.12); animation: likePop .3s ease; }
@keyframes likePop { 50% { transform: scale(1.4); } }

/* ============ Tech Hub ============ */
.hub-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0F172A, #2563EB);
  padding: 56px 0 60px;
}
/* Faded background photo behind the blue header */
.hub-hero::after {
  content: ''; position: absolute; inset: 0;
  background: var(--hub-img) center/cover no-repeat;
  opacity: .16; pointer-events: none; z-index: 0;
}
.hub-hero .container { position: relative; z-index: 1; }

/* Tab buttons (segmented) */
.hub-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-bottom: none; margin-bottom: 28px;
}
.hub-tabs .tab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-full);
  font-size: .9rem; font-weight: 600; color: var(--text-2);
  background: var(--bg-alt); border: 1.5px solid var(--border);
  margin-bottom: 0; transition: all var(--transition);
  text-decoration: none; cursor: pointer;
}
.hub-tabs .tab-btn svg { width: 17px; height: 17px; }
.hub-tabs .tab-btn:hover { border-color: var(--border-2); color: var(--text); }
.hub-tabs .tab-btn.active {
  background: var(--text); color: var(--bg); border-color: var(--text);
}
.tab-count {
  font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--text-3);
}
.hub-tabs .tab-btn.active .tab-count { background: rgba(255,255,255,.2); color: var(--bg); }
.hub-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.hub-panel-head p { font-size: .9rem; color: var(--text-3); max-width: 560px; }
@media (max-width: 600px) {
  .hub-tabs .tab-btn { padding: 9px 13px; font-size: .8125rem; }
}
/* Category sub-tabs (tutorials) */
.hub-subtabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.hub-subtab {
  font-size: .8rem; font-weight: 600; padding: 6px 13px;
  border-radius: var(--radius-full); background: var(--bg-alt);
  border: 1.5px solid var(--border); color: var(--text-2);
  text-decoration: none; transition: all var(--transition);
}
.hub-subtab:hover { border-color: var(--border-2); color: var(--text); }
.hub-subtab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Compact tutorial cards */
.tut-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
}
.tut-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-alt); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); text-decoration: none;
  transition: all var(--transition);
}
.tut-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.tut-card__thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bg-muted); display: flex; align-items: center; justify-content: center;
}
.tut-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.tut-card:hover .tut-card__thumb img { transform: scale(1.04); }
.tut-card__thumb svg { width: 32px; height: 32px; color: var(--text-4); }
.tut-card__pdf {
  position: absolute; top: 8px; right: 8px;
  font-size: .62rem; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: var(--radius-full);
  background: var(--accent); color: #fff;
}
.tut-card__body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.tut-card__cat {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent);
}
.tut-card__title {
  font-size: .875rem; font-weight: 650; line-height: 1.32; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tut-card__meta { font-size: .72rem; color: var(--text-4); margin-top: auto; }

/* Pagination */
.tut-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 32px; }
.tut-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--bg-alt); border: 1.5px solid var(--border);
  color: var(--text); font-size: 1.1rem; text-decoration: none;
  transition: all var(--transition);
}
.tut-page-btn:hover { border-color: var(--accent); color: var(--accent); }
.tut-page-btn.is-disabled { opacity: .4; pointer-events: none; }
.tut-page-info { font-size: .85rem; font-weight: 600; color: var(--text-3); }
@media (max-width: 560px) {
  .tut-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

.hub-card {
  background: var(--bg-alt); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column; transition: all var(--transition);
}
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.hub-card__icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.hub-card__icon svg { width: 28px; height: 28px; }
.hub-card__icon--blue   { background: var(--accent-light); color: var(--accent); }
.hub-card__icon--green  { background: var(--success-bg); color: var(--success); }
.hub-card__icon--purple { background: #EDE9FE; color: #7C3AED; }
.hub-card h3 { margin-bottom: 8px; }
.hub-card p { font-size: .9rem; color: var(--text-3); flex: 1; }
.hub-card__meta { font-size: .8125rem; color: var(--text-3); margin: 14px 0 16px; font-weight: 500; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-full);
  font-size: .8125rem; font-weight: 500; color: var(--text-2);
  background: var(--bg-alt); border: 1.5px solid var(--border);
  transition: all var(--transition);
}
.chip:hover { border-color: var(--border-2); }
.chip--active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Software cards */
/* Library platform (OS) filter — icons only */
.lib-platform-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.lib-os-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-full);
  font-size: .8125rem; font-weight: 600; color: var(--text-2);
  background: var(--bg-alt); border: 1.5px solid var(--border);
  text-decoration: none; transition: all var(--transition);
}
.lib-os-btn:hover { border-color: var(--border-2); color: var(--text); }
.lib-os-btn.active { background: var(--text); border-color: var(--text); color: var(--bg); }
/* icon-only variant: square button, larger glyph */
.lib-os-btn--icon { padding: 8px; width: 40px; height: 40px; }
.lib-os-btn__icon { display: inline-flex; }
.lib-os-btn--icon .lib-os-btn__icon svg { width: 19px; height: 19px; }

/* Compact app-tile software grid — 9 per row */
.sw-grid {
  display: grid; gap: 20px 10px;
  grid-template-columns: repeat(9, 1fr);
}
.sw-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 7px; padding: 12px 6px; border-radius: var(--radius-md);
  text-decoration: none; transition: background var(--transition);
}
.sw-card:hover { background: var(--bg-muted); }
.sw-card__logo {
  width: 62px; height: 62px; border-radius: 15px; flex-shrink: 0; overflow: hidden;
  background: var(--bg-muted); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sw-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.sw-card__logo svg { width: 26px; height: 26px; color: var(--text-4); }
.sw-card__name {
  width: 100%;
  font-size: .8rem; font-weight: 650; color: var(--text); line-height: 1.25;
  /* always one line, never wraps — "…" if too long */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-card__desc {
  font-size: .7rem; color: var(--text-3); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;   /* equal 2-line height across tiles, "…" if longer */
}
.sw-card__ver {
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); margin-top: 1px;
}
@media (max-width: 1080px) { .sw-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 768px)  { .sw-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px)  { .sw-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Software detail page (modern) ===== */
.sw-detail { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.sw-detail__main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }

/* Hero */
.sw-hero {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  padding: 28px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-alt) 70%);
  border: 1.5px solid var(--border);
}
.sw-hero__logo {
  width: 104px; height: 104px; border-radius: 24px; flex-shrink: 0; overflow: hidden;
  background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.25);
}
.sw-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.sw-hero__logo svg { width: 44px; height: 44px; color: var(--text-4); }
.sw-hero__body { flex: 1; min-width: 220px; }
.sw-hero__cat {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent);
}
.sw-hero__name { font-size: 1.7rem; line-height: 1.15; margin: 4px 0 14px; }
.sw-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.sw-stat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: var(--bg-alt); border: 1px solid var(--border);
  font-size: .8rem; color: var(--text-2);
}
.sw-stat svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.sw-stat strong { color: var(--text); font-weight: 700; }
.sw-hero__dl { gap: 8px; }

/* Content blocks */
.sw-block {
  background: var(--bg-alt); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
}
.sw-block__title { font-size: 1.05rem; margin-bottom: 12px; }
.sw-block__text { font-size: .95rem; line-height: 1.75; color: var(--text-2); }
.sw-notes {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--bg-muted); font-size: .875rem; line-height: 1.65; color: var(--text-2);
}
.sw-video { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.sw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Sidebar: similar software */
.sw-detail__side {
  position: sticky; top: calc(var(--nav-h) + 20px);
  background: var(--bg-alt); border: 1.5px solid var(--border);
  border-radius: 0; padding: 20px; min-width: 0;
}
.sw-side__title { font-size: .95rem; line-height: 1.4; margin-bottom: 16px; }
.sw-side__list { display: flex; flex-direction: column; gap: 12px; }
/* Each similar software = a framed detail card */
.sw-side__item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border-radius: 0;            /* square corners */
  background: var(--bg); border: 1.5px solid var(--border);
  text-decoration: none; transition: all var(--transition);
}
.sw-side__item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.sw-side__head { display: flex; gap: 11px; align-items: center; min-width: 0; }
.sw-side__logo {
  width: 46px; height: 46px; border-radius: 0; flex-shrink: 0; overflow: hidden;
  background: var(--bg-muted); display: flex; align-items: center; justify-content: center;
}
.sw-side__logo img { width: 100%; height: 100%; object-fit: cover; }
.sw-side__logo svg { width: 21px; height: 21px; color: var(--text-4); }
.sw-side__name {
  font-size: .9rem; font-weight: 650; color: var(--text); line-height: 1.25; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-side__desc {
  font-size: .78rem; color: var(--text-3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.2em;   /* always reserve 2 lines */
}
.sw-side__meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: .72rem; font-weight: 600; color: var(--text-4);
}
.sw-side__meta span { white-space: nowrap; }
@media (max-width: 900px) {
  .sw-detail { grid-template-columns: 1fr; }
  .sw-detail__side { position: static; }
}

/* Forum rows */
.forum-row {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border-bottom: 1px solid var(--border); transition: background var(--transition);
}
.forum-row:last-child { border-bottom: none; }
.forum-row:hover { background: var(--bg-muted); }
.forum-row__votes { text-align: center; min-width: 46px; }
.forum-row__votes-n { font-size: 1.05rem; font-weight: 700; }
.forum-row__votes-l { font-size: .65rem; color: var(--text-4); text-transform: uppercase; }
.forum-row__title { font-size: .95rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.forum-row__meta { font-size: .78rem; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.forum-row__stats { text-align: right; font-size: .78rem; color: var(--text-3); min-width: 80px; }

/* ===== Course catalog ===== */
.promo-banner {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  background: linear-gradient(120deg, #f97316, #ea580c 60%, #db2777);
  color: #fff; border-radius: 16px; padding: 14px 22px; margin-bottom: 26px;
  box-shadow: 0 12px 30px -14px rgba(234,88,12,.6);
}
.promo-banner__tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; }
.promo-banner__tag svg { width: 17px; height: 17px; }
.promo-banner__tag strong { background: rgba(255,255,255,.22); padding: 2px 10px; border-radius: var(--radius-full); letter-spacing: .03em; }
.promo-banner__msg { font-size: .9rem; opacity: .95; }
.promo-banner__msg b { font-weight: 800; }

.catalog-head { margin-bottom: 18px; }
.catalog-head h1 { font-size: 1.55rem; margin-bottom: 2px; }
.catalog-head p { color: var(--text-3); font-size: .875rem; }

.catalog-filters {
  display: flex; gap: 2px; overflow-x: auto; margin-bottom: 26px;
  border-bottom: 1.5px solid var(--border); scrollbar-width: thin;
}
.catalog-filters::-webkit-scrollbar { height: 5px; }
.catalog-filters::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; }
.ftab {
  flex-shrink: 0; position: relative; padding: 12px 16px; margin-bottom: -1.5px;
  font-size: .88rem; font-weight: 600; color: var(--text-3); white-space: nowrap;
  text-decoration: none; border-bottom: 2.5px solid transparent; transition: color var(--transition), border-color var(--transition);
}
.ftab:hover { color: var(--text); }
.ftab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ftab--lvl.active { color: #16a34a; border-bottom-color: #16a34a; }

.courses-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1200px) { .courses-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px)  { .courses-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .courses-grid { grid-template-columns: 1fr; } }

.ccard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 0;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ccard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.ccard:hover .ccard__title { color: var(--accent); }
.ccard:hover .ccard__btn { background: var(--accent-hover); }
.ccard__media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-muted); overflow: hidden; }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ccard:hover .ccard__media img { transform: scale(1.06); }
.ccard__icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ccard__icon svg { width: 42px; height: 42px; color: var(--border-2); }
.ccard__badge {
  position: absolute; top: 10px; left: 10px; font-size: .68rem; font-weight: 700;
  padding: 4px 11px; border-radius: var(--radius-full); color: #fff; backdrop-filter: blur(4px);
}
.ccard__badge--beginner     { background: rgba(22,163,74,.92); }
.ccard__badge--intermediate { background: rgba(217,119,6,.92); }
.ccard__badge--advanced     { background: rgba(220,38,38,.92); }
.ccard__badge--all          { background: rgba(37,99,235,.92); }
.ccard__body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ccard__cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.ccard__title { font-size: .95rem; line-height: 1.3; color: var(--text); transition: color var(--transition); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard__desc { font-size: .8rem; color: var(--text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard__info { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .73rem; color: var(--text-3); margin-top: 2px; }
.ccard__info span { display: inline-flex; align-items: center; gap: 4px; }
.ccard__info svg { width: 13px; height: 13px; }
.ccard__rating { color: var(--text-2); font-weight: 600; }
.ccard__rating svg { color: #f59e0b; }
.ccard__rating small { color: var(--text-4); font-weight: 400; }
.course-hero__langs { display: inline-flex; align-items: center; gap: 7px; }
.course-hero__langs svg { width: 15px; height: 15px; opacity: .9; }
.course-hero__langs b { color: #F8F8F5; font-weight: 700; }
.ccard__langs { display: inline-flex; align-items: center; gap: 2px; color: var(--text-4); }
.ccard__langs > svg { width: 13px; height: 13px; }
.ccard__langs b { font-size: .78rem; font-weight: 800; line-height: 1; }
.ccard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.ccard__price { font-size: 1.05rem; font-weight: 800; color: var(--text); display: flex; align-items: baseline; gap: 6px; }
.ccard__old { font-size: .8rem; font-weight: 600; color: var(--text-4); text-decoration: line-through; }
.ccard__btn {
  font-size: .8rem; font-weight: 700; color: #fff; background: var(--accent);
  padding: 8px 16px; border-radius: var(--radius-full); transition: background var(--transition);
}

/* ===== Student dashboard (redesigned) ===== */
.dash2-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(120deg, #1f2440, #4f2d8f 55%, #ea580c);
  color: #fff; border-radius: var(--radius-lg); padding: 26px 30px; margin-bottom: 22px;
  box-shadow: 0 22px 50px -26px rgba(79,45,143,.8);
}
.dash2-hero__greet { display: flex; align-items: center; gap: 16px; }
.dash2-hero__avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; border: 2px solid rgba(255,255,255,.4); }
.dash2-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash2-hero__greet h1 { color: #fff; font-size: 1.5rem; margin-bottom: 3px; }
.dash2-hero__greet p { color: rgba(255,255,255,.8); font-size: .92rem; }
.dash2-resume { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-md); padding: 12px 16px; text-decoration: none; color: #fff; transition: background var(--transition); max-width: 360px; }
.dash2-resume:hover { background: rgba(255,255,255,.24); }
.dash2-resume__ring { --p: 0; position: relative; width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.25) 0); display: flex; align-items: center; justify-content: center; }
.dash2-resume__ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #4a2c84; }
.dash2-resume__ring span { position: relative; font-size: .72rem; font-weight: 800; }
.dash2-resume__lbl { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.dash2-resume__info strong { display: block; font-size: .95rem; line-height: 1.25; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash2-resume__go { width: 20px; height: 20px; opacity: .85; }

.dash2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
@media (max-width: 720px) { .dash2-stats { grid-template-columns: repeat(2, 1fr); } }
.metric { display: flex; align-items: center; gap: 14px; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.metric__ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.metric__ico svg { width: 22px; height: 22px; }
.metric--blue   .metric__ico { background: #dbeafe; color: #2563eb; }
.metric--green  .metric__ico { background: #dcfce7; color: #16a34a; }
.metric--orange .metric__ico { background: #ffedd5; color: #ea580c; }
.metric--purple .metric__ico { background: #ede9fe; color: #7c3aed; }
.metric__num { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--text); }
.metric__lbl { font-size: .78rem; color: var(--text-3); margin-top: 3px; }

.dash2-grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
@media (max-width: 980px) {
  /* Single column: flatten the two wrappers and reorder so badges sit just before "Mes cours" */
  .dash2-grid { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
  .dash2-main, .dash2-rail { display: contents; }
  .d-continue { order: 1; }
  .d-badges   { order: 2; }
  .d-courses  { order: 3; }
  .d-notifs   { order: 4; }
  .d-continue { margin-bottom: 0 !important; }
  /* Quick links live in the header on mobile — hide the duplicate card */
  .d-links { display: none; }
}
.dash2-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dash2-head a { font-size: .82rem; color: var(--accent); font-weight: 600; }
.dash2-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ccard2 { display: flex; flex-direction: column; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 0; overflow: hidden; text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.ccard2:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ccard2__thumb { position: relative; aspect-ratio: 16/9; background: var(--bg-muted); }
.ccard2__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ccard2__ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg-muted), var(--border)); }
.ccard2__done { position: absolute; top: 8px; left: 8px; background: #16a34a; color: #fff; font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); }
.ccard2__body { padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; }
.ccard2__body h4 { font-size: .88rem; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard2__sub { font-size: .75rem; color: var(--text-3); }
.ccard2__bar { height: 6px; border-radius: 4px; background: var(--bg-muted); overflow: hidden; }
.ccard2__bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ccard2__meta { font-size: .73rem; color: var(--text-3); font-weight: 600; }

.dash2-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 980px) { .dash2-rail { position: static; } }
.rail-card { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.rail-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rail-card__head h4 { font-size: .95rem; }
.rail-card__head a { font-size: .78rem; color: var(--accent); font-weight: 600; }
.qlinks { display: flex; flex-direction: column; gap: 2px; }
.qlinks a { display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: .88rem; font-weight: 500; transition: background var(--transition), color var(--transition); }
.qlinks a:hover { background: var(--bg-muted); color: var(--accent); }
.qlinks svg { width: 18px; height: 18px; }
.rail-badges { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.rb { position: relative; }
.rb__ico { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c); color: #fff; }
.rb__ico svg { width: 26px; height: 26px; }
.rb.off .rb__ico { background: var(--bg-muted); color: var(--text-4); }
/* Pulsing halo around each earned badge */
.rb.on .rb__ico { animation: rb-halo 1.8s ease-out infinite; }
@keyframes rb-halo {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  70%  { box-shadow: 0 0 0 11px color-mix(in srgb, var(--c) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); }
}
.rail-notifs { list-style: none; display: flex; flex-direction: column; }
.rail-notifs li { padding: 10px 0; border-bottom: 1px solid var(--border); position: relative; }
.rail-notifs li:last-child { border-bottom: 0; }
.rail-notifs li.unread { padding-left: 12px; }
.rail-notifs li.unread::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.rail-notifs__t { font-size: .82rem; font-weight: 600; color: var(--text); }
.rail-notifs__b { font-size: .76rem; color: var(--text-3); margin-top: 2px; line-height: 1.35; }
.rail-notifs time { font-size: .7rem; color: var(--text-4); }

/* ===== Dashboard — full mobile responsive ===== */
@media (max-width: 640px) {
  .dash2-hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; border-radius: var(--radius-md); }
  .dash2-hero__greet h1 { font-size: 1.2rem; }
  .dash2-hero__greet p { font-size: .85rem; }
  .dash2-hero__avatar { width: 50px; height: 50px; font-size: 1.25rem; }
  .dash2-resume { max-width: none; width: 100%; }
  .dash2-resume__info { flex: 1; min-width: 0; }
  .dash2-resume__info strong { max-width: 100%; }
  .dash2-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
  .metric { padding: 13px; gap: 11px; }
  .metric__ico { width: 38px; height: 38px; }
  .metric__num { font-size: 1.25rem; }
  .metric__lbl { font-size: .72rem; }
  .dash2-courses { grid-template-columns: 1fr; }
  .dash2-head h2 { font-size: 1.15rem; }
}
@media (max-width: 380px) {
  .dash2-stats { grid-template-columns: 1fr; }
}

/* ===== Achievements page (redesigned) ===== */
.ach-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(125deg, #1f2440, #3b2d6b 55%, #7c3aed);
  color: #fff; border-radius: var(--radius-lg); padding: 30px 32px; margin-bottom: 30px;
  box-shadow: 0 20px 50px -24px rgba(124,58,237,.7);
}
.ach-hero__text h1 { color: #fff; margin-bottom: 6px; font-size: 1.7rem; }
.ach-hero__text p { color: rgba(255,255,255,.78); font-size: .95rem; max-width: 480px; }
.ach-hero__stats { display: flex; gap: 14px; }
.ach-stat { background: rgba(255,255,255,.12); backdrop-filter: blur(4px); border-radius: var(--radius-md); padding: 14px 20px; text-align: center; min-width: 92px; }
.ach-stat__num { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1; }
.ach-stat__lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }

.ach-medallions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 14px; }
@media (max-width: 860px) { .ach-medallions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ach-medallions { grid-template-columns: 1fr; } }
.medallion { text-align: center; padding: 8px 6px; }
.medallion__ring { position: relative; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; padding: 5px; background: conic-gradient(var(--c), color-mix(in srgb, var(--c) 40%, #fff) , var(--c)); display: flex; }
.medallion.off .medallion__ring { background: var(--border); }
.medallion__disc { flex: 1; border-radius: 50%; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; color: var(--c); }
.medallion.off .medallion__disc { color: var(--text-4); }
.medallion__disc svg { width: 40px; height: 40px; }
.medallion.off { filter: grayscale(1); opacity: .55; }
.medallion__check { position: absolute; right: 2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; border: 3px solid var(--bg-alt); display: flex; align-items: center; justify-content: center; }
.medallion__check svg { width: 14px; height: 14px; }
.medallion__name { font-weight: 800; color: var(--text); }
.medallion__meta { font-size: .76rem; color: var(--text-3); margin-top: 3px; line-height: 1.35; }

.ach-section-head { margin: 40px 0 20px; }
.ach-section-head h2 { position: relative; padding-left: 14px; }
.ach-section-head h2::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 3px; background: var(--accent); }

.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cert-grid { grid-template-columns: 1fr; } }
.diploma {
  position: relative; background: var(--bg-alt); border: 1.5px solid var(--border);
  border-top: 4px solid var(--accent); border-radius: var(--radius-lg); padding: 20px;
  display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition);
}
.diploma:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.diploma__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.diploma__seal { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.diploma__seal svg { width: 22px; height: 22px; }
.diploma__ribbon { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.diploma__course { font-size: 1.05rem; line-height: 1.3; margin-bottom: 14px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.diploma__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--text-3); padding: 5px 0; border-bottom: 1px dashed var(--border); }
.diploma__row b { color: var(--text-2); font-weight: 600; }
.diploma__code { font-size: .72rem; color: var(--text-4); margin: 12px 0 16px; }
.diploma__code code { color: var(--text-2); }
.diploma__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* ===== Certificates page — full mobile responsive ===== */
@media (max-width: 640px) {
  .ach-page .container { padding-left: 16px; padding-right: 16px; }
  .ach-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 18px; margin-bottom: 22px; border-radius: var(--radius-md); }
  .ach-hero__text h1 { font-size: 1.3rem; }
  .ach-hero__text p { font-size: .88rem; }
  .ach-hero__stats { width: 100%; gap: 10px; }
  .ach-stat { flex: 1; min-width: 0; padding: 12px; }
  .ach-stat__num { font-size: 1.45rem; }
  .ach-section-head { margin: 26px 0 16px; }
  .ach-section-head h2 { font-size: 1.15rem; }
  .diploma { padding: 18px; }
  .diploma__course { font-size: 1rem; }
  .diploma__actions { gap: 7px; }
  .diploma__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ===== Achievements / badges (legacy tiles, still used on dashboard strip) ===== */
.badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .badges-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .badges-grid { grid-template-columns: 1fr; } }
.badge-tile {
  text-align: center; padding: 22px 16px; border-radius: var(--radius-lg);
  border: 1.5px solid var(--border); background: var(--bg-alt);
  transition: transform var(--transition), box-shadow var(--transition);
}
.badge-tile.earned:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.badge-tile__icon {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.badge-tile__icon svg { width: 32px; height: 32px; }
.badge-tile.earned .badge-tile__icon { background: var(--badge-color); color: #fff; box-shadow: 0 8px 18px -8px var(--badge-color); }
.badge-tile.locked .badge-tile__icon { background: var(--bg-muted); color: var(--text-4); }
.badge-tile__title { font-weight: 800; margin-bottom: 4px; color: var(--text); }
.badge-tile.locked .badge-tile__title { color: var(--text-3); }
.badge-tile__desc { font-size: .8rem; color: var(--text-3); line-height: 1.4; min-height: 34px; }
.badge-tile__date { margin-top: 10px; font-size: .72rem; font-weight: 700; color: var(--badge-color); }
.badge-tile__lock { margin-top: 10px; font-size: .72rem; font-weight: 700; color: var(--text-4); text-transform: uppercase; letter-spacing: .04em; }

/* Dashboard badge strip */
.dash-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-full); font-size: .82rem; font-weight: 700; border: 1.5px solid var(--border); }
.dash-badge__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--badge-color); }
.dash-badge.on { color: var(--text); background: var(--bg-alt); }
.dash-badge.off { color: var(--text-4); }
.dash-badge.off .dash-badge__dot { background: var(--border-2); }

/* ===== Certificate (public view = embedded PDF) ===== */
.cert-embed { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg-muted); }
.cert-embed__frame { display: block; width: 100%; aspect-ratio: 297 / 210; border: 0; }
.cert-embed__fallback { display: flex; flex-direction: column; align-items: center; gap: 14px; justify-content: center; height: 100%; padding: 40px; text-align: center; color: var(--text-2); }
.cert-share { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ===== Certificate verification ===== */
.verify-badge { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.verify-badge svg { width: 32px; height: 32px; }
.verify-result { border-radius: var(--radius-md); padding: 22px; border: 1.5px solid var(--border); background: var(--bg-alt); }
.verify-result__head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.verify-result__head svg { width: 24px; height: 24px; }
.verify-result--ok { border-color: #16a34a55; }
.verify-result--ok .verify-result__head { color: #16a34a; }
.verify-result--bad { border-color: #dc262655; }
.verify-result--bad .verify-result__head { color: #dc2626; }
.verify-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 480px) { .verify-dl { grid-template-columns: 1fr; } }
.verify-dl dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); margin-bottom: 2px; }
.verify-dl dd { font-weight: 600; color: var(--text); }

/* ===== Dashboard sub-pages (completed / hours) ===== */
.subpage-back { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--text-3); text-decoration: none; }
.subpage-back:hover { color: var(--accent); }
.subpage-back svg { width: 16px; height: 16px; }

.hours-total { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, #1f2440, #ea580c); color: #fff; border-radius: var(--radius-lg); padding: 22px 26px; margin: 14px 0 26px; box-shadow: 0 18px 44px -22px rgba(234,88,12,.7); }
.hours-total__ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
.hours-total__ico svg { width: 26px; height: 26px; }
.hours-total__num { font-size: 2rem; font-weight: 800; line-height: 1; }
.hours-total__lbl { font-size: .82rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }

.hours-list { display: flex; flex-direction: column; gap: 10px; }
.hours-row { display: flex; align-items: center; gap: 14px; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; text-decoration: none; transition: border-color var(--transition), transform var(--transition); }
.hours-row:hover { border-color: var(--accent); transform: translateX(2px); }
.hours-row img, .hours-row__ph { width: 64px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg-muted); }
.hours-row__info { flex: 1; min-width: 0; }
.hours-row__title { font-weight: 600; font-size: .9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hours-row__sub { font-size: .76rem; color: var(--text-3); }
.hours-row__time { font-weight: 800; color: var(--accent); font-size: .95rem; flex-shrink: 0; }

/* ===== Payments ===== */
.pay-grid { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-summary { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 18px; position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 760px) { .pay-summary { position: static; } }
.pay-summary__thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 12px; }
.pay-summary h3 { font-size: 1rem; line-height: 1.3; margin-bottom: 4px; }
.pay-summary__sub { font-size: .82rem; color: var(--text-3); margin-bottom: 14px; }
.pay-summary__total { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 12px; }
.pay-summary__total strong { font-size: 1.4rem; color: var(--accent); }
.pay-old { font-size: .9rem; font-weight: 600; color: var(--text-4); text-decoration: line-through; margin-right: 6px; }
.promo-form { display: flex; gap: 8px; margin-top: 14px; }
.promo-form input { flex: 1; min-width: 0; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: .85rem; text-transform: uppercase; }
.promo-form input:focus { outline: none; border-color: var(--accent); }
.promo-form button { padding: 9px 16px; border: 0; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); font-weight: 700; font-size: .82rem; cursor: pointer; transition: background var(--transition); }
.promo-form button:hover { background: var(--accent); color: #fff; }
.promo-msg { font-size: .8rem; margin-top: 8px; font-weight: 600; }
.promo-msg--ok { color: #16a34a; }
.promo-msg--bad { color: #dc2626; }
.pay-hint { font-weight: 600; margin-bottom: 14px; color: var(--text-2); }
.paym-list { display: flex; flex-direction: column; gap: 12px; }
.paym { position: relative; display: flex; align-items: center; gap: 13px; border: 1.5px solid var(--brand); border-radius: var(--radius-md); padding: 10px 13px; cursor: pointer; transition: box-shadow var(--transition), transform var(--transition); background: var(--brand); color: #fff; }
.paym:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px var(--brand); }
.paym input { position: absolute; opacity: 0; pointer-events: none; }
.paym__logo { width: 58px; height: 42px; flex-shrink: 0; border-radius: var(--radius-sm); background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px; }
.paym__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.paym__info { flex: 1; min-width: 0; }
.paym__name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; color: #fff; }
.paym__numwrap { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.paym__num { font-size: .98rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.paym__copy { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.15); color: #fff; cursor: pointer; transition: all var(--transition); }
.paym__copy:hover { background: #fff; color: var(--brand); }
.paym__copy svg { width: 15px; height: 15px; }
.paym__copy.copied { background: #fff; color: #16a34a; border-color: #fff; }
.paym__holder { display: block; font-size: .74rem; color: rgba(255,255,255,.85); margin-top: 3px; }
.paym__holder b { color: #fff; font-weight: 700; }
.paym .pay-tag--manual { background: rgba(255,255,255,.25); color: #fff; }
.paym__check { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; color: var(--brand); transition: all var(--transition); }
.paym__check svg { width: 14px; height: 14px; opacity: 0; }
.paym:has(input:checked) { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--brand); }
.paym:has(input:checked) .paym__check { background: #fff; border-color: #fff; }
.paym:has(input:checked) .paym__check svg { opacity: 1; }
/* Steps + cash memo (shown in the summary column on desktop, before methods on mobile) */
.pay-steps-box { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.pay-steps-box h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 10px; }
.pay-steps-list { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: .86rem; color: var(--text-2); line-height: 1.4; }
.pay-steps-list li::marker { color: var(--accent); font-weight: 700; }
.pay-cash-memo { display: flex; align-items: flex-start; gap: 9px; background: var(--accent-light); border-radius: var(--radius-md); padding: 11px 13px; font-size: .82rem; color: var(--text-2); line-height: 1.45; }
.pay-cash-memo svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pay-cash-memo b { color: var(--text); }
.pay-tag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--radius-full); background: var(--bg-muted); color: var(--text-3); }
.pay-tag--manual { background: #fef3c7; color: #b45309; }
.pay-upload { margin-top: 16px; }
.pay-upload small { display: block; color: var(--text-3); margin-top: 6px; font-size: .78rem; }
.pay-alert { border-radius: var(--radius-md); padding: 18px 20px; }
.pay-alert--pending { background: #fef9c3; border: 1.5px solid #fde047; color: #854d0e; }
.pay-alert p { margin: 6px 0 12px; font-size: .9rem; }
.pay-badge { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap; }
.pay-badge--pending  { background: #fef3c7; color: #b45309; }
.pay-badge--approved { background: #dcfce7; color: #15803d; }
.pay-badge--rejected { background: #fee2e2; color: #b91c1c; }

/* ===== Explore by theme (3 main categories + sub-categories) ===== */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .theme-grid { grid-template-columns: 1fr; } }
.tcard {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 20px 22px; border-radius: var(--radius-lg);
  text-decoration: none; color: #fff;
  transition: transform var(--transition), box-shadow var(--transition);
}
.tcard--1 { background: linear-gradient(140deg, #2563eb, #1e1b4b); }
.tcard--2 { background: linear-gradient(140deg, #f97316, #be123c); }
.tcard--3 { background: linear-gradient(140deg, #14b8a6, #6d28d9); }
.tcard:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(0,0,0,.55); }
/* Decorative glow blob */
.tcard__glow { position: absolute; width: 160px; height: 160px; border-radius: 50%; right: -45px; top: -55px; background: rgba(255,255,255,.16); z-index: -1; transition: transform var(--transition); }
.tcard:hover .tcard__glow { transform: scale(1.35); }
/* Top row: icon + title aligned horizontally */
.tcard__top { display: flex; align-items: center; gap: 13px; }
.tcard__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; background: rgba(255,255,255,.18); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.tcard__icon svg { width: 24px; height: 24px; }
.tcard__title { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
/* Bottom row: count + CTA aligned horizontally */
.tcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tcard__count { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.2); padding: 5px 12px; border-radius: var(--radius-full); }
.tcard__cta { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 700; opacity: .92; }
.tcard__cta svg { width: 17px; height: 17px; transition: transform var(--transition); }
.tcard:hover .tcard__cta svg { transform: translateX(4px); }

/* ===== Lesson builder (modern) ===== */
.lb-header { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(120deg, #1f2440, #4f2d8f); color: #fff; border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 22px; }
.lb-header__title { color: #fff; font-size: 1.4rem; margin-bottom: 4px; }
.lb-header__meta { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: rgba(255,255,255,.82); }
.lb-pill { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--radius-full); }
.lb-pill--draft { background: rgba(255,255,255,.25); color: #fff; }
.lb-pill--live { background: #16a34a; color: #fff; }
.lb-pill--free { background: var(--accent-light); color: var(--accent); }

.lb-addmod { display: flex; align-items: center; gap: 12px; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 22px; }
.lb-addmod svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.lb-addmod input { flex: 1; border: 0; background: transparent; color: var(--text); font-size: .95rem; outline: none; }

.lb-module { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
.lb-module__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.lb-module__num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.lb-module__title { flex: 1; font-size: 1rem; }
.lb-module__count { font-size: .78rem; color: var(--text-3); }
.lb-module__actions { display: flex; gap: 4px; }
.lb-iconbtn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--bg); color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition); }
.lb-iconbtn svg { width: 16px; height: 16px; }
.lb-iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.lb-iconbtn--danger:hover { color: #dc2626; border-color: #dc2626; }

.lb-lessons { display: flex; flex-direction: column; }
.lb-lgroup { border-bottom: 1px solid var(--border); }
.lb-lgroup:last-child { border-bottom: 0; }
.lb-lesson { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
/* Sub-lessons: indented with a tree guide */
.lb-sublessons { display: flex; flex-direction: column; }
.lb-lesson--sub { position: relative; padding-left: 46px; background: var(--bg-muted); }
.lb-lesson--sub::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 50%; width: 2px; background: var(--border-2); }
.lb-lesson--sub::after { content: ""; position: absolute; left: 26px; top: 50%; width: 12px; height: 2px; background: var(--border-2); }
.lb-lesson--sub .lb-lesson__icon { width: 24px; height: 24px; }
.lb-lesson--sub .lb-lesson__title { font-size: .85rem; color: var(--text-2); }
.lf-banner { background: var(--accent-light); color: var(--accent); font-size: .82rem; font-weight: 700; padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.lf-banner[hidden] { display: none; }
.lf-reslist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.lf-resitem { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); font-size: .85rem; }
.lf-resitem svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.lf-resitem span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-resitem em { font-style: normal; font-size: .72rem; color: var(--text-4); }
.lf-resdel { width: 26px; height: 26px; flex-shrink: 0; border: 1.5px solid var(--border); background: var(--bg); color: var(--text-3); border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; line-height: 1; }
.lf-resdel:hover { color: #dc2626; border-color: #dc2626; }
.lb-lesson__icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--bg-muted); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.lb-lesson__icon svg { width: 15px; height: 15px; }
.lb-lesson__title { flex: 1; font-size: .9rem; }
.lb-lesson__dur { font-size: .78rem; color: var(--text-4); }
.lb-lesson__actions { display: flex; gap: 4px; opacity: .55; transition: opacity var(--transition); }
.lb-lesson:hover .lb-lesson__actions { opacity: 1; }
.lb-addlesson { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px dashed var(--border-2); background: transparent; color: var(--accent); font-weight: 700; font-size: .85rem; cursor: pointer; }
.lb-addlesson:hover { background: var(--accent-light); }
.lb-lessonform { padding: 18px; border-top: 1px solid var(--border); background: var(--bg-muted); }

/* Lesson form */
.lf .lf-top { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 600px) { .lf .lf-top { grid-template-columns: 1fr; } }
.lf .lf-panel { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-alt); }
.lf .lf-panel .form-group + .form-group { margin-top: 12px; }
.lf-preview { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .875rem; margin-top: 14px; }
.lf-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Rich text editor */
.rte { border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.rte__tb { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--bg-muted); }
.rte__btn { min-width: 32px; height: 30px; padding: 0 8px; border: 0; background: transparent; color: var(--text-2); border-radius: var(--radius-xs); cursor: pointer; font-size: .9rem; }
.rte__btn:hover { background: var(--accent-light); color: var(--accent); }
.rte__ed { min-height: 150px; padding: 12px 14px; font-size: .9rem; line-height: 1.6; color: var(--text); outline: none; }
.rte__ed:focus { background: var(--bg); }
.rte__ed h3 { margin: 8px 0; }
.rte__ed ul, .rte__ed ol { padding-left: 22px; margin: 8px 0; }

/* Quiz builder */
.quiz-builder .quiz-pass { max-width: 200px; margin-bottom: 14px; }
.quiz-q { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; }
.quiz-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.quiz-q-text { flex: 1; font-weight: 600; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.quiz-opt { display: flex; align-items: center; gap: 10px; }
.quiz-correct { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: .72rem; font-weight: 700; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.quiz-correct input { width: 17px; height: 17px; accent-color: #16a34a; }
.quiz-opt .quiz-opt-text { flex: 1; }
.quiz-opt:has(.quiz-opt-correct:checked) { }
.quiz-opt:has(.quiz-opt-correct:checked) .quiz-correct { color: #16a34a; }
.quiz-opt:has(.quiz-opt-correct:checked) .quiz-opt-text { border-color: #16a34a; }
.quiz-del-q, .quiz-del-opt { width: 30px; height: 30px; flex-shrink: 0; border: 1.5px solid var(--border); background: var(--bg); color: var(--text-3); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.quiz-del-q:hover, .quiz-del-opt:hover { color: #dc2626; border-color: #dc2626; }
.btn--xs { padding: 5px 10px; font-size: .76rem; }

/* Preview modal */
.lb-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lb-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.lb-modal__box { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 88vh; overflow: auto; background: var(--bg-alt); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-lg); }
.lb-modal__close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 1.8rem; line-height: 1; color: var(--text-3); cursor: pointer; }
.lb-pv__title { margin-bottom: 16px; }
.lb-pv__video { aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: #000; margin-bottom: 16px; }
.lb-pv__video iframe, .lb-pv__video video { width: 100%; height: 100%; border: 0; }
.lb-pv__text { font-size: .95rem; line-height: 1.7; color: var(--text-2); }
.lb-pv__q { margin-bottom: 16px; }
.lb-pv__q ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-pv__q li { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .88rem; }
.lb-pv__q li.ok { border-color: #16a34a; background: #16a34a18; color: #15803d; font-weight: 600; }

/* ===== Cisco-style course player ===== */
body.cna-body-mode { overflow: hidden; }
body.cna-body-mode .footer, body.cna-body-mode .nav__mobilesearch { display: none !important; }

/* Sits below the site header (which stays present) */
.cna { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; background: var(--bg-alt); }
.cna-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 18px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cna-top__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); min-width: 0; }
.cna-top__brand img { height: 30px; width: auto; }
.cna-top__brand span { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cna-top__actions { display: flex; align-items: center; gap: 6px; }
.cna-top__icon { width: 42px; height: 42px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cna-top__icon svg { width: 22px; height: 22px; }
.cna-top__icon:hover { background: var(--bg-muted); color: var(--accent); }
.cna-top__close { color: var(--text-3); border-radius: 0; height: 60px; width: 60px; margin-right: -18px; border-left: 1px solid var(--border); }
.cna-top__close:hover { background: #fee2e2; color: #dc2626; }

.cna-grid { flex: 1; display: flex; min-height: 0; }

/* Sidebar */
.cna-side { width: 340px; flex-shrink: 0; background: var(--bg-alt); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; transition: margin-left var(--transition); }
.cna-side.collapsed { margin-left: -340px; }
.cna-side__course { padding: 16px 16px 4px; flex-shrink: 0; }
.cna-side__eyebrow { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.cna-side__course h2 { font-size: 1.12rem; line-height: 1.3; margin: 4px 0 10px; }
.cna-side__cbar { height: 6px; border-radius: 4px; background: var(--bg-muted); overflow: hidden; }
.cna-side__cbar span { position: relative; display: block; height: 100%; background: linear-gradient(90deg, #ffb88c, #ffa674); border-radius: 4px; overflow: hidden; transition: width .5s ease; }
.cna-side__cbar span::after, .cna-mod__bar span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%); animation: cna-shine 1.8s infinite;
}
@keyframes cna-shine { 100% { transform: translateX(100%); } }
.cna-side__course small { display: block; margin-top: 6px; font-size: .74rem; color: var(--text-3); }

.cna-search { display: flex; align-items: center; gap: 8px; padding: 14px; flex-shrink: 0; }
.cna-search__field { position: relative; flex: 1; min-width: 0; }
.cna-search__field input { width: 100%; padding: 11px 40px 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: .88rem; }
.cna-search__field input:focus { outline: none; border-color: var(--accent); }
.cna-search__field svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-4); }
.cna-side__act { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--bg); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cna-side__act svg { width: 20px; height: 20px; }
.cna-side__act:hover { border-color: var(--accent); color: var(--accent); }
.cna-side__act--close:hover { border-color: #dc2626; color: #dc2626; }
.cna-res-wrap { position: relative; }
.cna-res-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 240px; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; }
.cna-res-menu[hidden] { display: none; }
.cna-res-menu__head { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 8px 10px 6px; }
.cna-res-menu__item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-2); font-size: .85rem; }
.cna-res-menu__item:hover { background: #fff1e8; color: #9a4a1f; }
.cna-res-menu__item svg { width: 16px; height: 16px; flex-shrink: 0; color: #ffa674; }
.cna-res-menu__item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cna-res-menu__item em { font-style: normal; font-size: .72rem; color: var(--text-4); }
.cna-res-menu__empty { padding: 10px; font-size: .82rem; color: var(--text-4); }
.cna-modules { flex: 1; overflow-y: auto; padding: 0 8px 16px; }

.cna-mod { border-bottom: 1px solid var(--border); padding: 14px 8px; }
.cna-mod__head { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cna-mod__title { flex: 1; font-weight: 800; font-size: .92rem; line-height: 1.35; color: var(--text); }
.cna-mod__btn { width: 30px; height: 30px; flex-shrink: 0; border-radius: 7px; border: 0; background: #ffa674; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cna-mod__btn svg { width: 16px; height: 16px; transition: transform .2s; transform: rotate(180deg); }
.cna-mod.open .cna-mod__btn svg { transform: rotate(0); }
.cna-mod__bar { position: relative; height: 6px; border-radius: 4px; background: var(--bg-muted); margin: 10px 0 4px; overflow: hidden; }
.cna-mod__bar span { position: relative; display: block; height: 100%; background: linear-gradient(90deg, #ffb88c, #ffa674); border-radius: 4px; overflow: hidden; transition: width .5s ease; }
.cna-mod__bar em { position: absolute; right: 0; top: 8px; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--text-3); }

.cna-lessons { display: none; margin-top: 18px; }
.cna-mod.open .cna-lessons { display: block; }
.cna-lesson { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-2); }
.cna-lesson:hover { background: var(--bg-muted); }
.cna-circle { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--border-2); display: flex; align-items: center; justify-content: center; color: #fff; }
.cna-circle.done { background: #ffa674; border-color: #ffa674; }
.cna-circle svg { width: 12px; height: 12px; }
.cna-lesson__num { font-weight: 700; font-size: .82rem; color: var(--text); flex-shrink: 0; }
.cna-lesson__title { flex: 1; font-size: .85rem; line-height: 1.3; }
.cna-lesson__count { font-size: .76rem; color: var(--text-4); flex-shrink: 0; }
.cna-lesson.active { background: #fff1e8; color: #9a4a1f; }
.cna-lesson.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 3px; background: #ffa674; }
.cna-lesson.active .cna-lesson__num, .cna-lesson.active .cna-lesson__title { color: #9a4a1f; }
[data-theme="dark"] .cna-lesson.active { background: #ffa67426; color: #ffd9c2; }
[data-theme="dark"] .cna-lesson.active .cna-lesson__num, [data-theme="dark"] .cna-lesson.active .cna-lesson__title { color: #ffd9c2; }

/* Sub-lessons: indented under the parent, smaller circles, dotted connector line */
.cna-sublessons { position: relative; margin-left: 16px; }
.cna-sublessons::before { content: ""; position: absolute; left: 20px; top: -2px; bottom: 16px;
  border-left: 2px dotted var(--border-2); z-index: 0; }
.cna-lesson--sub { padding-top: 7px; padding-bottom: 7px; }
.cna-circle--sub { width: 16px; height: 16px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg-alt); }
.cna-circle--sub svg { width: 9px; height: 9px; }
.cna-lesson--sub .cna-lesson__num { font-size: .74rem; font-weight: 700; color: var(--text-2); }
.cna-lesson--sub .cna-lesson__title { font-size: .8rem; color: var(--text-2); }
.cna-lesson--sub.completed .cna-lesson__title, .cna-lesson--sub.completed .cna-lesson__num { color: var(--text-3); }

/* Main */
.cna-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.cna-toolbar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--bg-alt); flex-shrink: 0; }
.cna-toolbar__title { flex: 1; font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cna-toolbar__icons { display: flex; gap: 2px; }
.cna-tool { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cna-tool svg { width: 19px; height: 19px; }
.cna-tool:hover { background: var(--bg-muted); color: var(--accent); }
.cna-tool--comment { position: relative; }
.cna-tool__badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: #6d5dfc; color: #fff; font-size: .65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; }
.cna-tool__badge[hidden] { display: none !important; }

/* Slim lesson header (replaces the big "Scroll to begin" hero) */
.cna-content--flush { padding-top: 28px; }
/* Quiz takes the full width of the player's main area */
.cna-content.cna-content--quiz { max-width: none; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); }
/* Name-check reminder before the certificate (80%+) */
.cna-namecue { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding: 14px 18px;
  background: linear-gradient(120deg, #fff7ed, #fef3c7); border: 1.5px solid #f59e0b66; border-radius: var(--radius-md); }
.cna-namecue[hidden] { display: none !important; }
.cna-namecue svg { width: 26px; height: 26px; color: #d97706; flex-shrink: 0; }
.cna-namecue__txt { flex: 1; min-width: 0; }
.cna-namecue__txt strong { display: block; color: #92400e; font-size: .95rem; margin-bottom: 2px; }
.cna-namecue__txt p { font-size: .85rem; color: #b45309; line-height: 1.5; }
.cna-namecue__x { border: 0; background: transparent; color: #b45309; font-size: 1.3rem; line-height: 1;
  cursor: pointer; flex-shrink: 0; padding: 0 4px; }
[data-theme="dark"] .cna-namecue { background: #78350f33; border-color: #f59e0b55; }
[data-theme="dark"] .cna-namecue__txt strong { color: #fcd34d; }
[data-theme="dark"] .cna-namecue__txt p { color: #fde68a; }

/* Mobile: stack the reminder cleanly (icon + text, then a full-width button) */
@media (max-width: 600px) {
  .cna-namecue { position: relative; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 16px 14px 14px; }
  .cna-namecue svg { width: 22px; height: 22px; }
  .cna-namecue__txt { flex: 1 1 0; padding-right: 22px; }
  .cna-namecue__txt strong { font-size: .9rem; }
  .cna-namecue__txt p { font-size: .82rem; }
  .cna-namecue .btn { flex: 1 1 100%; justify-content: center; }
  .cna-namecue__x { position: absolute; top: 6px; right: 8px; font-size: 1.4rem; padding: 0; }
}

/* Inactivity lock — covers only the player area (sidebar stays visible) */
.cna-idlelock { position: absolute; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: color-mix(in srgb, var(--bg) 76%, transparent); backdrop-filter: blur(9px) saturate(1.1); animation: qxIn .3s ease; }
.cna-idlelock[hidden] { display: none !important; }
.cna-idlelock__box { max-width: 400px; width: 100%; text-align: center; background: var(--bg);
  border: 1px solid var(--border); border-radius: 20px; padding: 40px 32px; box-shadow: 0 24px 60px -20px rgba(17,17,26,.4); }
.cna-idlelock__ring { width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%);
  position: relative; }
.cna-idlelock__ring::before, .cna-idlelock__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); animation: idlePulse 2s ease-out infinite; }
.cna-idlelock__ring::after { animation-delay: 1s; }
@keyframes idlePulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.cna-idlelock__ring svg { width: 40px; height: 40px; position: relative; }
.cna-idlelock__box h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; }
.cna-idlelock__box p { color: var(--text-2); font-size: .94rem; line-height: 1.65; margin-bottom: 26px; }
.cna-idlelock__box .btn { display: inline-flex; align-items: center; gap: 8px; }

/* ===== Interactive code lab (player) ===== */
.lab { display: flex; flex-direction: column; gap: 16px; }
.lab__instructions { display: flex; gap: 12px; background: var(--accent-light); border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-md); padding: 14px 16px; font-size: .92rem; line-height: 1.6; color: var(--text); }
.lab__instructions svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.lab__split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 420px; }
.lab__editor, .lab__console { display: flex; flex-direction: column; min-height: 260px; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; background: var(--bg-alt); }
.lab__tabs, .lab__bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--bg-muted); border-bottom: 1.5px solid var(--border); }
.lab-tab { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; font-weight: 700; font-size: .82rem; color: var(--text-2); cursor: pointer; }
.lab-tab.active { background: var(--bg); color: var(--accent); }
.lab__tag { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.lab .lab-code { flex: 1; width: 100%; border: 0; resize: none; padding: 14px; tab-size: 2;
  font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; background: var(--bg); color: var(--text); }
.lab .lab-code:focus { outline: none; }
.lab-out { flex: 1; margin: 0; padding: 14px; white-space: pre-wrap; overflow: auto; background: var(--bg); color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.lab__preview { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 860px) { .lab__split { grid-template-columns: 1fr; } }
/* Admin lab code fields */
.lf-panel .lab-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; tab-size: 2; }

/* Audio at the head of a lesson */
.cna-audio { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding: 12px 16px;
  background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-md); }
.cna-audio svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.cna-audio audio { flex: 1; height: 38px; min-width: 0; }
.cna-lessonhead { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.cna-lessonhead__module { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cna-lessonhead__title { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; line-height: 1.15; margin: 0; color: var(--text); }

/* Comments slide-in panel */
.cna-comments { --qa: #6d5dfc; position: fixed; top: var(--nav-h); right: 0; bottom: 0;
  width: min(440px, 92vw); background: var(--bg-alt); border-left: 1.5px solid var(--border);
  box-shadow: none; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 220; }
/* Shadow only when open, otherwise it bleeds gray onto the lesson content */
.cna-comments.open { transform: translateX(0); box-shadow: -12px 0 40px rgba(0,0,0,.18); }
.cna-comments__head { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1.5px solid var(--border); }
.cna-comments__head h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 800; margin: 0; }
.cna-comments__head h3 svg { width: 20px; height: 20px; color: #6d5dfc; }
.cna-comments__head .qa__count { background: #6d5dfc; color: #fff; font-size: .72rem; font-weight: 700;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.cna-comments__close { width: 34px; height: 34px; border: 0; background: transparent; border-radius: var(--radius-sm);
  color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cna-comments__close:hover { background: var(--bg-muted); color: var(--text); }
.cna-comments__close svg { width: 18px; height: 18px; }
.cna-comments__body { flex: 1; overflow-y: auto; padding: 22px; }
.cna-comments-overlay { position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(0,0,0,.35); z-index: 210; }

/* Replies under a comment (e.g. admin / HealTech answers) */
.comment-reply { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px;
  background: var(--bg-muted); border-radius: 10px; border-left: 3px solid var(--accent); }
.comment-avatar--sm { width: 28px; height: 28px; font-size: .7rem; }
.comment-staff { display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 5px; vertical-align: middle; margin-left: 4px; }

/* ===== Quiz wizard — minimal "focus" design ===== */
.quizx-wrap { --qx: #2563eb; width: 100%; }
/* Form and result are mutually exclusive — [hidden] must beat the display below */
.quizx[hidden], .quizx-resultpage[hidden] { display: none !important; }
/* Hidden nav buttons (.btn sets display, which would otherwise override [hidden]) */
.quizx [hidden], .quizx-resultpage [hidden] { display: none !important; }

/* Hide the player scrollbar on quiz lessons (keeps scrolling, no visible bar) */
.cna-scroll:has(.quizx-wrap) { scrollbar-width: none; }
.cna-scroll:has(.quizx-wrap)::-webkit-scrollbar { width: 0; height: 0; display: none; }

.quizx { display: flex; flex-direction: column; gap: 26px; width: 100%; }

/* Top: step number + thin progress line + pass target */
.quizx__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.quizx__step { font-size: .8rem; font-weight: 700; color: var(--text-3); letter-spacing: .02em; white-space: nowrap;
  text-transform: uppercase; }
.quizx__step b { color: var(--qx); font-size: .95rem; }
.quizx__bar { flex: 1 1 120px; height: 4px; border-radius: 4px; background: var(--bg-muted); overflow: hidden; }
.quizx__bar span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--qx);
  transition: width .45s cubic-bezier(.4,0,.2,1); }
.quizx__pass { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: .78rem; font-weight: 700; color: var(--text-2); }
.quizx__pass svg { width: 15px; height: 15px; color: var(--qx); }

/* Question */
.quizx__stage { width: 100%; }
.quizx-q { display: none; animation: qxIn .4s ease; }
.quizx-q.is-active { display: block; }
@keyframes qxIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.quizx-q__kicker { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--qx); margin-bottom: 14px; }
.quizx-q__text { font-size: 1.55rem; font-weight: 800; line-height: 1.3; margin-bottom: 26px; color: var(--text); }
.quizx-q__opts { display: flex; flex-direction: column; gap: 11px; }
.quizx-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border-radius: 12px; cursor: pointer; background: var(--bg-muted);
  border: 2px solid transparent; transition: background .15s, border-color .15s, transform .08s; }
.quizx-opt:hover { background: color-mix(in srgb, var(--qx) 7%, var(--bg-muted)); }
.quizx-opt:active { transform: scale(.995); }
.quizx-opt input { position: absolute; opacity: 0; pointer-events: none; }
.quizx-opt__key { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  flex-shrink: 0; border-radius: 8px; background: var(--bg); font-weight: 800; font-size: .85rem;
  color: var(--text-3); transition: all .15s; }
.quizx-opt__txt { font-size: 1.02rem; font-weight: 500; color: var(--text); flex: 1; }
.quizx-opt:has(input:checked) { border-color: var(--qx); background: color-mix(in srgb, var(--qx) 10%, transparent); }
.quizx-opt:has(input:checked) .quizx-opt__key { background: var(--qx); color: #fff; }
.quizx-opt:has(input:checked)::after { content: ""; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--qx) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat; }
.quizx-q.is-missing .quizx-q__opts { animation: qxShake .3s; }
@keyframes qxShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.quizx-q__warn { margin-top: 14px; font-size: .85rem; font-weight: 600; color: #dc2626; }

/* Footer navigation */
.quizx__nav { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.quizx__lasthint { font-size: .82rem; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; }
.quizx__lasthint::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--qx); animation: qxPulse 1.4s ease-in-out infinite; }
@keyframes qxPulse { 0%,100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.2); } }

/* ===== Result — minimal centered screen ===== */
.quizx-resultpage { --qx: #2563eb; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  width: 100%; min-height: 56vh; justify-content: center; padding: 30px 20px;
  animation: qxIn .45s ease; }
.quizx-ring { position: relative; width: 190px; height: 190px; margin-bottom: 8px; }
.quizx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quizx-ring__bg { fill: none; stroke: var(--bg-muted); stroke-width: 9; }
.quizx-ring__fg { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }
.quizx-ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; }
.quizx-ring__num b { font-size: 3rem; font-weight: 800; line-height: 1; }
.quizx-ring__num small { font-size: 1.3rem; font-weight: 700; color: var(--text-3); }
.quizx-result__title { font-size: 1.9rem; font-weight: 800; margin: 4px 0 0; }
.quizx-resultpage.is-pass .quizx-result__title { color: #16a34a; }
.quizx-resultpage.is-fail .quizx-result__title { color: #dc2626; }
.quizx-result__detail { color: var(--text-2); font-size: .98rem; max-width: 400px; }
.quizx-result__stats { display: flex; gap: 16px; margin: 20px 0 10px; flex-wrap: wrap; justify-content: center; }
.quizx-result__stats > div { background: var(--bg-muted); border-radius: 14px; padding: 14px 26px; min-width: 110px; }
.quizx-result__stats span { display: block; font-size: 1.45rem; font-weight: 800; color: var(--text); }
.quizx-result__stats small { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.quizx-result__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

@media (max-width: 640px) {
  .quizx-q__text { font-size: 1.3rem; }
}

/* ===== Dedicated full-width quiz page ===== */
.quiz-page { width: 100%; padding: 32px 0 72px; background: var(--bg); }
.quiz-page__inner { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.quiz-page__head { margin-bottom: 26px; }
.quiz-page__back { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600;
  color: var(--text-2); margin-bottom: 18px; }
.quiz-page__back:hover { color: var(--accent); }
.quiz-page__back svg { width: 17px; height: 17px; }
.quiz-page__module { display: inline-block; font-size: .76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--qx, #6d5dfc); margin-bottom: 8px; }
.quiz-page__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.15; margin: 0 0 10px; }
.quiz-page__meta { display: flex; gap: 10px; align-items: center; color: var(--text-2); font-size: .92rem; }
.quiz-page__meta b { color: var(--text); }
.quiz-page__passed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px;
  padding: 14px 18px; border-radius: var(--radius-md); background: #16a34a14; border: 1.5px solid #16a34a55; color: #15803d; font-weight: 600; }
.quiz-page__passed svg { width: 22px; height: 22px; flex-shrink: 0; }
.quiz-page__passed .btn { margin-left: auto; }

/* Locked lessons in the player sidebar */
.cna-lesson.is-locked { cursor: not-allowed; opacity: .55; }
.cna-lesson.is-locked:hover { background: transparent; }
.cna-circle--lock { background: var(--bg-muted) !important; color: var(--text-4) !important; }
.cna-circle--lock svg { width: 13px; height: 13px; }
.cna-lesson.is-quiz .cna-circle:not(.done) { color: var(--accent); }

.cna-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }

/* Hero */
.cna-hero { position: relative; height: calc(100vh - var(--nav-h) - 56px); min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.cna-hero__bg { position: absolute; inset: 0; background:
   radial-gradient(120% 90% at 85% 50%, #1e4fd6 0%, #0a1a3f 38%, #05070f 72%),
   linear-gradient(90deg, #04060d 0%, #04060d 35%, transparent 70%); }
.cna-hero__bg::after { content: ""; position: absolute; inset: 0; background-image:
   linear-gradient(rgba(80,140,255,.07) 1px, transparent 1px),
   linear-gradient(90deg, rgba(80,140,255,.07) 1px, transparent 1px);
   background-size: 44px 44px; mask: radial-gradient(80% 80% at 80% 50%, #000, transparent 75%); }
.cna-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,4,10,.92) 0%, rgba(2,4,10,.55) 45%, transparent 80%); }
.cna-hero__inner { position: relative; z-index: 1; padding: 0 clamp(28px, 7vw, 90px); max-width: 760px; color: #fff; }
.cna-hero__module { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6ea8ff; margin-bottom: 14px; }
.cna-hero__title { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; line-height: 1.05; color: #fff; margin: 0 0 28px; }
.cna-hero__scroll { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: rgba(255,255,255,.85); font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.cna-hero__scroll svg { width: 26px; height: 26px; animation: cna-bounce 1.8s infinite; }
@keyframes cna-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Content */
.cna-content { padding: 32px clamp(20px, 5vw, 56px) 64px; max-width: 1000px; margin: 0 auto; }
.cna-video { aspect-ratio: 16/9; background: #000; border-radius: var(--radius-md); overflow: hidden; }
.cna-video iframe, .cna-video video { width: 100%; height: 100%; display: block; border: 0; }
.cna-article, .cna-prose { font-size: 1rem; line-height: 1.8; color: var(--text); }
.cna-article h1, .cna-article h2, .cna-article h3 { margin: 1em 0 .5em; }
/* Rich text content (TinyMCE output) */
.cna-article, .cna-prose { overflow: hidden; }   /* contain floated (wrapped) images */
.cna-article img, .cna-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.cna-article img[style*="float: left"], .cna-prose img[style*="float: left"] { margin: .2em 1.2em .6em 0; }
.cna-article img[style*="float: right"], .cna-prose img[style*="float: right"] { margin: .2em 0 .6em 1.2em; }
.cna-article figure, .cna-prose figure { margin: 1em 0; }
.cna-article figcaption, .cna-prose figcaption { font-size: .82rem; color: var(--text-3); text-align: center; margin-top: 6px; }
.cna-article iframe, .cna-prose iframe { max-width: 100%; border: 0; border-radius: 8px; }
.cna-article a, .cna-prose a { color: var(--accent); text-decoration: underline; }
.cna-article table, .cna-prose table { border-collapse: collapse; max-width: 100%; margin: 1em 0;
  border: 1px solid var(--border); }
/* Override the dark beveled look of <table border="1"> with clean light borders */
.cna-article table td, .cna-article table th, .cna-prose table td, .cna-prose table th {
  border: 1px solid var(--border) !important; border-style: solid !important; padding: 8px 12px; }
.cna-article table[border], .cna-prose table[border] { border-width: 1px !important; border-color: var(--border) !important; }
.cna-article ul, .cna-article ol { padding-left: 24px; margin: .6em 0; }
.cna-controls { display: flex; align-items: center; gap: 10px; margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--border); }
.cna-doneflag { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: #e07a3c; }
.cna-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--border); margin-bottom: 4px; }
.cna-cmavatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Stacked sections (content / notes / comments) */
.cna-sections { display: flex; flex-direction: column; gap: 18px; }
.cna-block { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; }
.cna-block__title { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; margin-bottom: 16px; }
.cna-block__title svg { width: 18px; height: 18px; color: #ffa674; }
.cna-cmcount { color: var(--text-3); font-weight: 600; font-size: .9rem; }

/* Questions & comments (purple) */
.qa { --qa: #6d5dfc; }
.qa__title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; margin-bottom: 18px; color: var(--text); }
.qa__title svg { width: 22px; height: 22px; color: var(--qa); }
.qa__count { font-size: .85rem; font-weight: 700; color: var(--qa); background: color-mix(in srgb, var(--qa) 14%, transparent); padding: 2px 10px; border-radius: var(--radius-full); }
.qa__form { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.qa__avatar { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #8b7bff, #6d5dfc); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; }
.qa__field { flex: 1; min-width: 0; }
.qa__field textarea { width: 100%; min-height: 76px; padding: 16px 18px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-muted); color: var(--text); font-size: .95rem; font-family: inherit; resize: vertical; transition: border-color var(--transition), box-shadow var(--transition); }
.qa__field textarea:focus { outline: none; border-color: var(--qa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qa) 18%, transparent); background: var(--bg); }
.qa__send { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 20px; border: 0; border-radius: var(--radius-md); background: var(--qa); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background var(--transition), transform var(--transition); }
.qa__send:hover { background: #5a49e8; transform: translateY(-1px); }
.qa__send svg { width: 17px; height: 17px; }

/* Language dropdown */
.cna-lang-wrap { position: relative; }
.cna-lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 200px; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; }
.cna-lang-menu[hidden] { display: none; }
.cna-lang-menu__head { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 8px 10px 6px; }
.cna-lang-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent; color: var(--text-2); font-size: .9rem; border-radius: var(--radius-sm); cursor: pointer; }
.cna-lang-opt:hover { background: #fff1e8; color: #9a4a1f; }
.cna-lang-opt small { color: var(--text-4); }
.cna-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* Hide every Google Translate UI element (banner, logo, tooltip, loading bar) — keep only the translation */
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; position: static !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
/* "Powered by Google Translate" logo / gadget + hover icon */
.goog-te-gadget, .goog-te-gadget-icon, .goog-te-gadget-simple,
img[src*="translate"], .goog-logo-link, .goog-te-gadget span,
#goog-gt-tt, .goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-te-gadget { font-size: 0 !important; }
#google_translate_element { display: none !important; }
/* Modern Google Translate widget (obfuscated VIpgJd-* classes): top banner, logo, spinner */
.VIpgJd-ZVi9od-ORHb-OEVmcd,           /* top banner frame */
.VIpgJd-ZVi9od-l4eHX-hSRGPd,          /* "Translated by Google" logo */
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,         /* loading spinner overlay */
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-yAWNEb-L7lbkb,                 /* loading bar */
.VIpgJd-suEOdc { display: none !important; }
iframe[id^="goog"], iframe.skiptranslate { display: none !important; visibility: hidden !important; }

/* Backdrop behind the mobile sidebar (hidden on desktop) */
.cna-backdrop { display: none; }

@media (max-width: 860px) {
  /* Sidebar is an off-canvas overlay, CLOSED by default (no flash on each lesson load) */
  .cna-side { position: fixed; z-index: 60; top: var(--nav-h); bottom: 0; left: 0;
    width: min(86vw, 340px); margin-left: 0; box-shadow: none;
    transition: transform var(--transition); transform: translateX(-100%); }
  /* Shadow only when the panel is open (otherwise it bleeds gray onto the content) */
  .cna-side.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .cna-backdrop:not([hidden]) { display: block; position: fixed; inset: var(--nav-h) 0 0 0;
    background: rgba(0,0,0,.4); z-index: 55; }

  .cna-toolbar { height: 52px; padding: 0 10px; gap: 6px; }
  .cna-toolbar__title { font-size: .9rem; }
  .cna-content { padding: 20px 16px 56px; }
  .cna-content--flush { padding-top: 16px; }
  .cna-lessonhead { margin-bottom: 18px; padding-bottom: 16px; }
  .cna-lessonhead__title { font-size: 1.3rem; }
  .cna-controls { flex-wrap: wrap; gap: 8px; }
  .cna-controls .btn { flex: 1 1 auto; justify-content: center; }

  /* Comments panel takes the full width on phones */
  .cna-comments { top: var(--nav-h); width: 100vw; border-left: 0; }
  .cna-comments-overlay { display: none; }
}

/* ===== Course detail: about + instructor block (below hero) ===== */
.course-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .course-intro { grid-template-columns: 1fr; } }
.course-intro__card { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 22px 24px; }
.course-intro__card h3 { margin-bottom: 12px; }
.course-intro__card p { font-size: .94rem; line-height: 1.65; color: var(--text-2); }
.course-intro__inst { display: flex; align-items: flex-start; gap: 16px; }
.course-intro__avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.course-intro__avatar--init { background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; }
.course-intro__inst strong { display: block; margin-bottom: 4px; font-size: 1rem; }

/* ===== Multilingual course form (language tabs) ===== */
.ml-block { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 0; overflow: hidden; }
.ml-tabnav { display: flex; flex-wrap: wrap; gap: 2px; background: var(--bg-muted); border-bottom: 1.5px solid var(--border); padding: 6px 6px 0; }
.ml-tab { appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 9px 16px; font-size: .875rem; font-weight: 600; color: var(--text-2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; border: 1.5px solid transparent; border-bottom: 0; }
.ml-tab:hover { color: var(--text); }
.ml-tab.active { background: var(--bg); color: var(--accent); border-color: var(--border); }
.ml-pane { display: none; padding: 20px; }
.ml-pane.active { display: block; }
.ml-pane .form-group:last-child { margin-bottom: 0; }
.ml-hint { font-size: .82rem; color: var(--text-2); background: var(--bg-alt);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 16px; }

/* ===== Course detail: "À propos de ce cours" in hero (desktop) / below hero (mobile) ===== */
.course-hero__extra { display: none; }

@media (min-width: 1081px) {
  /* "À propos de ce cours" lives inside the hero info column. */
  .course-hero__extra { display: block; margin-top: 28px; max-width: 720px; }
  .course-hero__extra .course-intro__card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
  .course-hero__extra .course-intro__card h3 { color: #F8F8F5; }
  .course-hero__extra .course-intro__card p { color: rgba(248,248,245,.78); }

  /* Hide the mobile About block below the hero; main content spans full width. */
  .course-intro--mobile { display: none; }
  .course-body { grid-template-columns: 1fr; }
}

/* ===== Modern forum ===== */
.forum-hero {
  background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 55%, #9333ea 100%);
  color: #fff; padding: 26px 0 28px;
}
.forum-hero__back { font-size: .8125rem; color: rgba(255,255,255,.85); text-decoration: none; }
.forum-hero__back:hover { color: #fff; }
.forum-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.forum-hero__title { display: flex; align-items: center; gap: 11px; font-size: 1.7rem; color: #fff; margin: 0; }
.forum-hero__title svg { width: 26px; height: 26px; }
.forum-hero__sub { color: rgba(255,255,255,.82); font-size: .9rem; margin-top: 6px; }
.forum-hero__new { background: #fff !important; color: #5b21b6 !important; border: none; font-weight: 700; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.forum-hero__new:hover { transform: translateY(-1px); }

.forum-search { max-width: 520px; margin: 0 auto 22px; }

.forum-cats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.forum-cat {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: var(--radius-full);
  background: var(--bg-alt); border: 1.5px solid var(--border);
  text-decoration: none; transition: all var(--transition);
}
.forum-cat__ic { display: inline-flex; color: var(--cc); }
.forum-cat__ic svg { width: 17px; height: 17px; }
.forum-cat__lbl { font-size: .85rem; font-weight: 600; color: var(--text-2); }
.forum-cat__n { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); background: var(--bg-muted); color: var(--text-4); }
.forum-cat:hover { border-color: var(--cc); transform: translateY(-1px); }
.forum-cat.active { background: var(--cc); border-color: var(--cc); }
.forum-cat.active .forum-cat__ic, .forum-cat.active .forum-cat__lbl { color: #fff; }
.forum-cat.active .forum-cat__n { background: rgba(255,255,255,.25); color: #fff; }

.forum-list { display: flex; flex-direction: column; gap: 12px; }
.topic-card {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px;
  background: var(--bg-alt); border: 1.5px solid var(--border);
  border-left: 4px solid var(--cc); border-radius: var(--radius-lg);
  text-decoration: none; transition: all var(--transition);
}
.topic-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-2); border-left-color: var(--cc); }
.topic-card__avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--cc);
  background: linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc) 55%, #000));
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
.topic-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.topic-card__main { flex: 1; min-width: 0; }
.topic-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.topic-card__cat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full);
}
.topic-card__cat svg { width: 12px; height: 12px; }
.topic-card__solved {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full);
  background: var(--success-bg, #16a34a1a); color: var(--success, #16a34a);
}
.topic-card__solved svg { width: 11px; height: 11px; }
.topic-card__title { font-size: 1.02rem; font-weight: 650; color: var(--text); line-height: 1.3; }
.topic-card__excerpt {
  font-size: .85rem; color: var(--text-3); line-height: 1.5; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-card__foot { font-size: .76rem; color: var(--text-4); margin-top: 8px; }
.topic-card__foot strong { color: var(--text-2); font-weight: 600; }
.topic-card__stats { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.tstat {
  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start;
  min-width: 64px; padding: 5px 11px; border-radius: var(--radius-full);
  background: var(--bg-muted); font-size: .78rem; color: var(--text-3);
}
.tstat svg { width: 14px; height: 14px; }
.tstat strong { color: var(--text); font-weight: 700; }
.tstat--hl { background: var(--accent-light); color: var(--accent); }
.tstat--hl strong { color: var(--accent); }

/* ===== Forum topic (detail) ===== */
.f-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--cc, var(--accent)); color: #fff; font-weight: 700; font-size: 1.05rem;
}
.f-avatar img { width: 100%; height: 100%; object-fit: cover; }
.f-avatar--muted {
  width: 34px; height: 34px; font-size: .8rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--text-3), var(--text-4));
}
.ftopic__head {
  background: var(--bg-alt); border: 1.5px solid var(--border);
  border-left: 4px solid var(--cc); border-radius: var(--radius-lg);
  padding: 24px; margin-bottom: 28px;
}
.ftopic__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ftopic__by { font-size: .85rem; color: var(--text-3); }
.ftopic__by strong { color: var(--text); font-weight: 600; }
.ftopic__time { font-size: .75rem; color: var(--text-4); margin-top: 1px; }
.ftopic__title { font-size: 1.55rem; line-height: 1.25; margin-bottom: 14px; }
.ftopic__body { font-size: .97rem; line-height: 1.75; color: var(--text-2); }
.ftopic__actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* horizontal vote widget (topic & replies) */
.vote-box--row { display: inline-flex; align-items: center; gap: 9px; min-width: 0; text-align: left; }
.vote-box--row .vote-count { margin-top: 0; font-size: .85rem; }

.freplies__title { font-size: 1.05rem; margin-bottom: 14px; }
/* All replies live in ONE card; each reply is a divided row */
.freplies {
  display: flex; flex-direction: column; margin-bottom: 22px; overflow: hidden;
  background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-lg);
}
.freply {
  display: flex; gap: 11px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.freply:last-child { border-bottom: none; }
.freply--best { background: var(--success-bg, #16a34a0d); box-shadow: inset 3px 0 0 var(--success); }
.freply__main { flex: 1; min-width: 0; }
.freply__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.freply__head strong { font-size: .82rem; color: var(--text); }
.freply__time { font-size: .72rem; color: var(--text-4); }
.freply__best {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--success-bg, #16a34a1a); color: var(--success, #16a34a);
}
.freply__best svg { width: 10px; height: 10px; }
.freply__body { font-size: .86rem; line-height: 1.55; color: var(--text-2); }
.freply__foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
/* compact vote widget inside replies */
.freply__foot .vote-btn { padding: 5px 11px; font-size: .72rem; }
.freply__foot .vote-btn svg { width: 13px; height: 13px; }
.freply__foot .vote-count { font-size: .78rem; }
.best-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 0;
  font-size: .72rem; font-weight: 600; color: var(--text-3);
  padding: 5px 11px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg); transition: all var(--transition);
}
.best-btn:hover { border-color: var(--success); color: var(--success); text-decoration: none; }

/* Reply form */
.freply-form {
  background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 20px;
}
.freply-form__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .9rem; }
.freply-form__file {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: .8rem; font-weight: 600; color: var(--text-2);
  padding: 7px 13px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border); background: var(--bg); transition: all var(--transition);
}
.freply-form__file:hover { border-color: var(--accent); color: var(--accent); }
.freply-form__fileinfo { font-size: .78rem; color: var(--text-4); }
.freplies__empty { font-size: .9rem; color: var(--text-3); padding: 18px; }
@media (max-width: 640px) {
  .topic-card { flex-wrap: wrap; }
  .topic-card__stats { flex-direction: row; width: 100%; margin-left: 62px; }
  .forum-hero__title { font-size: 1.4rem; }
}

/* Vote box */
.vote-box { text-align: center; min-width: 70px; }
.vote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border); background: var(--bg-alt);
  color: var(--text-2); font-size: .8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.vote-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft, var(--bg-muted)); }
.vote-btn.voted { background: var(--accent); border-color: var(--accent); color: #fff; }
.vote-btn svg { width: 15px; height: 15px; }
.vote-count { font-size: .8rem; font-weight: 700; margin-top: 5px; color: var(--text-3); }

/* ===== Split-screen login ===== */
.login-body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: var(--bg-alt); }
.login-split { display: flex; min-height: 100vh; }

/* LEFT — navy hero with abstract shapes */
.login-hero {
  flex: 1 1 50%; position: relative; overflow: hidden; display: flex; align-items: center;
  padding: 56px clamp(32px, 5vw, 72px); color: #fff;
  background:
    radial-gradient(60% 50% at 18% 18%, rgba(124,58,237,.45), transparent 60%),
    radial-gradient(55% 55% at 88% 85%, rgba(37,99,235,.40), transparent 60%),
    linear-gradient(135deg, #0b1437 0%, #16235c 55%, #1c2e6e 100%);
}
.login-hero__shapes { position: absolute; inset: 0; z-index: 0; }
.lh-blob { position: absolute; border-radius: 50%; filter: blur(64px); }
.lh-blob--1 { width: 360px; height: 360px; background: #7c3aed; top: -90px; right: -70px; opacity: .55; }
.lh-blob--2 { width: 320px; height: 320px; background: #2563eb; bottom: -110px; left: -80px; opacity: .5; }
.lh-blob--3 { width: 240px; height: 240px; background: #0ea5e9; top: 42%; left: 34%; opacity: .28; }
.lh-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .25; }
.login-hero__content { position: relative; z-index: 2; max-width: 470px; }
.login-hero__logo {
  display: inline-flex; background: #fff; padding: 10px 16px; border-radius: 14px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); margin-bottom: 38px;
}
.login-hero__logo img { height: 38px; width: auto; display: block; }
.login-hero h1 { font-size: clamp(2rem, 3.2vw, 2.85rem); font-weight: 800; line-height: 1.12; margin: 0 0 20px; color: #fff; }
.login-hero p { font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,.82); margin: 0; }

/* RIGHT — form panel */
.login-panel { flex: 1 1 50%; position: relative; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--bg-alt); }
.login-card { width: 100%; max-width: 410px; }

/* Paired fields (2 columns) to save vertical space on auth pages */
.form-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; column-gap: 0; } }

/* Language switcher (top-right of the form panel) */
.auth-lang { position: absolute; top: 18px; right: 20px; display: flex; gap: 3px; z-index: 5; }
.auth-lang a { font-size: .72rem; font-weight: 700; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--text-3); text-decoration: none; transition: all var(--transition); }
.auth-lang a:hover { background: var(--bg-muted); color: var(--text); }
.auth-lang a.active { background: var(--text); color: var(--bg); }

/* Reset-password step toggle */
.auth-steps { display: flex; gap: 6px; background: var(--bg-muted); padding: 4px; border-radius: var(--radius-full); margin-bottom: 22px; }
.auth-step-tab { flex: 1; padding: 8px 10px; border-radius: var(--radius-full); font-size: .8rem; font-weight: 600; color: var(--text-3); background: transparent; border: none; cursor: pointer; transition: all var(--transition); }
.auth-step-tab.active { background: var(--bg-alt); color: var(--text); box-shadow: var(--shadow-sm); }
.login-back { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 500; color: var(--text-3); text-decoration: none; margin-bottom: 30px; transition: color var(--transition); }
.login-back:hover { color: var(--text); }
.login-back svg { width: 16px; height: 16px; }
.login-title { font-size: 1.95rem; font-weight: 800; margin: 0 0 6px; color: var(--text); }
.login-sub { color: var(--text-3); margin: 0 0 26px; font-size: .95rem; }
.login-link { font-size: .82rem; color: var(--accent); text-decoration: none; font-weight: 500; }
.login-link:hover { text-decoration: underline; }
.login-btn { border-radius: var(--radius-full); background: #2563eb; color: #fff; border: none; font-weight: 700; }
.login-btn:hover { background: #1d4ed8; }
.login-foot { text-align: center; margin-top: 24px; font-size: .9rem; color: var(--text-3); }
.login-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

/* Responsive: stack (hero on top, form below) */
@media (max-width: 860px) {
  .login-split { flex-direction: column; min-height: 100vh; }
  .login-hero { flex: 0 0 auto; padding: 40px 28px 44px; }
  .login-hero__logo { margin-bottom: 22px; }
  .login-hero h1 { font-size: 1.7rem; margin-bottom: 14px; }
  .login-hero p { font-size: .95rem; }
  .login-panel { flex: 1 1 auto; padding: 34px 24px 48px; }
  .login-card { max-width: 460px; }
}

/* Auth: "or" divider + Google button */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-4); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn--google {
  gap: 10px; background: var(--bg-alt); color: var(--text);
  border: 1.5px solid var(--border); font-weight: 600;
}
.btn--google:hover { background: var(--bg-muted); border-color: var(--border-2); }

/* Homepage hero sits on a FIXED light image → keep light-theme colours even in dark mode
   (so the headline, subtitle, buttons and stats stay dark and readable) */
[data-theme="dark"] .hero {
  --bg: #F8F8F5; --bg-alt: #FFFFFF; --bg-muted: #F0F0EC;
  --text: #1A1A1A; --text-2: #4A4A4A; --text-3: #7A7A7A; --text-4: #ABABAB;
  --border: #E4E4DF; --border-2: #D0D0CB; --accent-light: #EEF3FE;
}
/* Hero headline always dark (both themes) — it sits on a light image */
.hero h1 { color: #1a1a1a; }
.hero__subtitle { color: #4a4a4a; }

/* ===== Upcoming-events scrolling ribbon ===== */
.evt-ribbon {
  display: flex; align-items: stretch; overflow: hidden;
  background: linear-gradient(90deg, rgba(253,160,108,.16), rgba(254,243,199,.18), rgba(187,247,208,.14));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.evt-ribbon__label {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 0 18px;
  font-size: .8rem; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #fb923c, #f97316);
}
.evt-ribbon__label svg { width: 16px; height: 16px; }
.evt-ribbon__viewport {
  flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;          /* manual swipe enabled */
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.evt-ribbon__viewport::-webkit-scrollbar { display: none; }
.evt-ribbon__track {
  display: flex; align-items: center; gap: 14px; width: max-content; padding: 12px 16px;
}

.evt-chip {
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 10px 8px 8px; box-shadow: 0 6px 16px -10px rgba(0,0,0,.18);
}
.evt-chip__date {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, #fed7aa, #fdba74); color: #7c2d12;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.evt-chip__day { font-size: 1.1rem; font-weight: 800; line-height: 1; }
.evt-chip__mon { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.evt-chip__date svg { width: 22px; height: 22px; color: #9a3412; }
.evt-chip__info { min-width: 0; max-width: 210px; text-decoration: none; }
.evt-chip__title { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 650; color: var(--text); }
.evt-chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt-chip__hot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #16a34a;
  animation: hotBlink 1.1s ease-in-out infinite;
}
.evt-chip__meta { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--text-3); white-space: nowrap; margin-top: 3px; }
.evt-chip__meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.evt-chip__meta > span:not(.evt-chip__price) { overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.evt-chip__price { font-weight: 700; color: var(--accent); flex-shrink: 0; }
.evt-chip__btn {
  flex-shrink: 0; white-space: nowrap; font-size: .75rem; font-weight: 700; text-decoration: none;
  padding: 8px 15px; border-radius: var(--radius-full); color: #fff;
  background: linear-gradient(135deg, #fb923c, #f97316); transition: filter var(--transition);
}
.evt-chip__btn:hover { filter: brightness(1.07); }
@media (max-width: 640px) {
  .evt-ribbon__label { display: none; }
  .evt-ribbon__track { gap: 10px; padding: 10px 12px; }
  .evt-chip__info { max-width: 150px; }
  /* Single event on mobile: keep it STABLE (one centered chip, no scrolling) */
  .evt-ribbon--single .evt-chip:not(:first-child) { display: none; }
  .evt-ribbon--single .evt-ribbon__viewport { overflow: hidden; }
  .evt-ribbon--single .evt-ribbon__track { width: 100%; justify-content: center; padding-left: 0; padding-right: 0; }
}

/* Blog layout: events (left/top) before articles, responsive */
.blog-layout {
  display: grid; grid-template-columns: 300px 1fr;
  gap: 40px; align-items: start;
}
.blog-events { position: sticky; top: calc(var(--nav-h) + 20px); min-width: 0; }
.blog-articles { min-width: 0; }
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 28px; }
  .blog-events { position: static; }
}

/* Video stats chip */
.video-stats {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--text-3);
  font-size: .75rem; font-weight: 600;
}
.video-stats svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }

/* Full-page PDF viewer */
.pdf-viewer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 32px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pdf-viewer__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 12px 24px;
}
.pdf-viewer__frame {
  display: block; width: 100%; height: calc(100vh - 90px);
  min-height: 520px; border: none; background: #525659;
}

/* Reply */
.reply--best { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); }
.reply__best-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700;
  color: var(--success); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px;
}
.best-btn { margin-top: 10px; font-size: .78rem; color: var(--text-3); }
.best-btn:hover { color: var(--success); text-decoration: underline; }

/* Attachments */
.att-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.att--img img { width: 110px; height: 80px; object-fit: cover; border-radius: 8px; display: block; }
.att--vid { width: 180px; border-radius: 8px; }
.att--file {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--bg-muted); border-radius: 8px; font-size: .8rem; color: var(--text-2);
}
.att--file svg { width: 15px; height: 15px; }

/* Hot event indicator — just a small green blinking dot (no text) */
.badge-hot {
  display: inline-block; vertical-align: middle;
  width: 10px; height: 10px; border-radius: 50%;
  background: #16A34A; flex-shrink: 0;
  /* hide any inner label text — we only want the dot */
  font-size: 0; line-height: 0; color: transparent; padding: 0; overflow: hidden;
  box-shadow: 0 0 0 0 rgba(22,163,74,.6);
  animation: hotBlink 1.1s ease-in-out infinite, hotGlow 1.6s ease-out infinite;
}
@keyframes hotBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
@keyframes hotGlow {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-hot { animation: none; }
}

/* Presence (online/offline) indicator */
.presence {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 500;
}
.presence__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.presence--on  { color: var(--success); }
.presence--on .presence__dot {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);
  animation: presence-pulse 2s infinite;
}
.presence--off { color: var(--text-4); }
.presence--off .presence__dot { background: var(--text-4); }
@keyframes presence-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); }
  70%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); }
}

/* Player fullscreen button */
.player-fullscreen-btn {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(0,0,0,.6); color: #fff;
  border: none; border-radius: var(--radius-xs);
  padding: 6px 8px; cursor: pointer; display: flex;
  transition: background .2s;
}
.player-fullscreen-btn:hover { background: rgba(0,0,0,.8); }
.player-fullscreen-btn svg { width: 16px; height: 16px; }

/* Admin module block */
.admin-module-block {
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 14px;
}

/* Filters aside */
@media (max-width: 768px) {
  .filters-aside { display: none; }
  .filters-aside.mobile-open { display: block; }
}

/* Player body overrides */
body.player-body { overflow: hidden; }
body.player-body .footer { display: none; }
body.player-body .nav { position: fixed; left: 0; right: 0; width: 100%; }
body.player-body .player-layout { margin-top: var(--nav-h); height: calc(100vh - var(--nav-h)); }

/* Smooth page transitions */
main, .dashboard, .admin-layout {
  animation: fadeIn .2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
}

/* ===== Admin mobile navigation (off-canvas sidebar) ===== */
.admin-mtop { display:none; align-items:center; gap:12px; position:sticky; top:var(--nav-h); z-index:60;
  background:var(--bg-alt); border-bottom:1px solid var(--border); padding:10px 14px; }
.admin-burger { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1.5px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); cursor:pointer; }
.admin-burger svg { width:20px; height:20px; }
.admin-mtop__title { font-weight:700; }
.admin-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1100; }
.admin-backdrop.show { display:block; }

/* ===== Admin pages — full mobile responsiveness ===== */
@media (max-width: 768px) {
  .admin-main { padding: 14px; }
  /* Force every inline/class grid to a single column on phones */
  .admin-main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .admin-main [style*="display:flex"], .admin-main [style*="display: flex"] { flex-wrap: wrap; }
  /* Page headers & toolbars wrap instead of overflowing */
  .admin-page-head { flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .admin-page-head > * { min-width: 0; max-width: 100%; }
  .admin-main form { max-width: 100%; }
  .admin-main .card { padding: 16px; }
  /* Long inline-width elements never exceed the screen */
  .admin-main img, .admin-main video, .admin-main iframe { max-width: 100%; height: auto; }
  .admin-main [style*="max-width"] { max-width: 100% !important; }
}
@media (max-width: 480px) {
  .admin-main { padding: 12px; }
}

/* ===== Quiz : entraînement + révision en place ===== */
.quizx-practice-note{margin:10px 0 0;padding:8px 12px;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;color:#92400e;font-size:.86rem;text-align:center}

/* Mode révision : bonne réponse en vert, mauvais choix de l'étudiant en rouge */
.quizx--review .quizx-opt{cursor:default;position:relative}
.quizx--review .quizx-opt::after{display:none !important}          /* masque la coche bleue native */
.quizx--review .quizx-opt__mark{margin-left:auto;font-size:.74rem;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap;color:#fff}
.quizx--review .quizx-opt__mark.ok{background:#16a34a}
.quizx--review .quizx-opt__mark.bad{background:#dc2626}
/* Bonne réponse → vert (toujours, même si non choisie) */
.quizx-opt--correct{border-color:#16a34a !important;background:#ecfdf5 !important}
.quizx-opt--correct .quizx-opt__key{background:#16a34a !important;color:#fff !important}
.quizx-opt--correct .quizx-opt__txt{color:#065f46}
/* Mauvais choix de l'étudiant → rouge + barré */
.quizx-opt--wrong{border-color:#dc2626 !important;background:#fef2f2 !important}
.quizx-opt--wrong .quizx-opt__key{background:#dc2626 !important;color:#fff !important}
.quizx-opt--wrong .quizx-opt__txt{color:#991b1b;text-decoration:line-through}