/* ============================================================================
   montra.css — front-end público dos cursos (cursos.academiadigital.ao).
   Chrome autónomo (sem a sidebar do LAB). Tema escuro «cibersegurança».
   Usado por montra-header.php / montra-footer.php, cursos.php e curso.php.
   Prefixo .mo- para não colidir com o style.css do LAB (que aqui NÃO é carregado).
   ============================================================================ */
:root{
  --mo-bg:#070b16; --mo-bg2:#0b1120; --mo-surface:#0f172a; --mo-surface2:#131c33;
  --mo-line:rgba(148,163,184,.14); --mo-line2:rgba(148,163,184,.22);
  --mo-text:#e8eefc; --mo-muted:#94a3b8; --mo-muted2:#64748b;
  --mo-accent:#22d3ee; --mo-accent2:#38bdf8; --mo-ink:#04141a;
  --mo-gold:#fbbf24; --mo-green:#34d399; --mo-red:#fb7185; --mo-violet:#a78bfa;
  --mo-radius:16px; --mo-radius-lg:22px; --mo-maxw:1760px;
  --mo-shadow:0 18px 50px -24px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 560px at 8% 4%, rgba(167,139,250,.10), transparent 55%),
    var(--mo-bg);
  color:var(--mo-text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
}
h1,h2,h3,.mo-brand,.mo-price-num{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.mo-wrap{max-width:var(--mo-maxw);margin:0 auto;padding:0 clamp(18px,2.6vw,46px)}
.mo-wrap.narrow{max-width:1480px}

/* ---------- top bar ---------- */
.mo-topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(7,11,22,.92),rgba(7,11,22,.72));border-bottom:1px solid var(--mo-line)}
.mo-topbar .mo-wrap{display:flex;align-items:center;gap:18px;height:64px}
.mo-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.mo-logo{width:36px;height:36px;display:grid;place-items:center;flex:none}
.mo-logo svg{display:block}
.mo-brand small{display:block;font:500 10.5px/1 Inter;color:var(--mo-muted);letter-spacing:.14em;text-transform:uppercase}
.mo-nav{display:flex;gap:4px;margin-left:8px}
.mo-nav a{padding:8px 12px;border-radius:9px;color:var(--mo-muted);font-weight:500;font-size:14px}
.mo-nav a:hover,.mo-nav a.on{color:var(--mo-text);background:var(--mo-surface)}
.mo-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.mo-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:600 14px Inter;
  padding:10px 16px;border-radius:11px;transition:.15s;white-space:nowrap;text-align:center;justify-content:center}
.mo-btn.ghost{background:var(--mo-surface);color:var(--mo-text);border:1px solid var(--mo-line2)}
.mo-btn.ghost:hover{border-color:var(--mo-accent);color:var(--mo-accent)}
.mo-btn.primary{background:linear-gradient(135deg,var(--mo-accent),var(--mo-accent2));color:var(--mo-ink);box-shadow:0 10px 24px -10px rgba(34,211,238,.6)}
.mo-btn.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.mo-btn.lg{padding:14px 22px;font-size:15px;border-radius:13px}
.mo-btn.sm{padding:8px 13px;font-size:13px;border-radius:9px}
.mo-btn[disabled],.mo-btn.off{opacity:.6;cursor:default;pointer-events:none}
.mo-ava{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--mo-surface2);border:1px solid var(--mo-line2);color:var(--mo-text);font:700 13px Inter}
.mo-ava:hover{border-color:var(--mo-accent);color:var(--mo-accent)}

.mo-main{display:block}
.mo-form{background:var(--mo-surface);border:1px solid var(--mo-line2);border-radius:10px;
  padding:10px 13px;color:var(--mo-text);font:500 14px Inter;outline:0;width:100%}
.mo-form::placeholder{color:var(--mo-muted2)}
.mo-form:focus{border-color:var(--mo-accent)}

/* ---------- hero ---------- */
.mo-hero{padding:46px 0 10px}
.mo-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.mo-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--mo-accent);font:600 12.5px Inter;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.mo-eyebrow::before{content:"";width:22px;height:1px;background:var(--mo-accent)}
.mo-hero h1{font-size:clamp(30px,4.4vw,48px);line-height:1.05;margin:0 0 14px}
.mo-hero h1 .hl{background:linear-gradient(120deg,var(--mo-accent),var(--mo-violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.mo-hero p{color:var(--mo-muted);font-size:17px;max-width:46ch;margin:0 0 22px}
.mo-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.mo-stats{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.mo-stats b{font-family:"Space Grotesk";font-size:22px;display:block}
.mo-stats span{color:var(--mo-muted);font-size:13px}
.mo-hero-card{position:relative;border-radius:var(--mo-radius-lg);overflow:hidden;border:1px solid var(--mo-line2);
  background:linear-gradient(135deg,#0c1a2e,#0a1424);box-shadow:var(--mo-shadow);aspect-ratio:4/3}
.mo-hero-card .cover{position:absolute;inset:0;background-size:cover;background-position:center}
.mo-hero-card .lines{position:absolute;inset:0;opacity:.5;background-image:
  linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);background-size:30px 30px}
.mo-hero-card .body{position:absolute;inset:0;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(to top,rgba(7,11,22,.96) 8%,rgba(7,11,22,.6) 40%,transparent 72%)}
.mo-hero-card .chip{position:absolute;top:18px;left:18px;font:600 11px Inter;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mo-accent);background:rgba(4,20,26,.6);border:1px solid rgba(34,211,238,.35);padding:5px 10px;border-radius:999px}
.mo-hero-card .glyph{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-size:60px;opacity:.9}
.mo-hero-card h3{margin:0 0 6px;font-size:22px}
.mo-hero-card .meta{color:var(--mo-muted);font-size:13px}

/* ---------- sticky filter bar ---------- */
.mo-filters{position:sticky;top:64px;z-index:30;background:rgba(7,11,22,.86);backdrop-filter:blur(10px);
  border-top:1px solid var(--mo-line);border-bottom:1px solid var(--mo-line);padding:14px 0;margin-top:34px}
.mo-filters .row{display:flex;gap:12px;align-items:center}
.mo-search{flex:1;display:flex;align-items:center;gap:10px;background:var(--mo-surface);border:1px solid var(--mo-line2);
  border-radius:12px;padding:11px 14px;min-width:0}
.mo-search input{flex:1;background:0;border:0;color:var(--mo-text);font:500 14.5px Inter;outline:0;min-width:0}
.mo-search input::placeholder{color:var(--mo-muted2)}
.mo-search svg{color:var(--mo-muted);flex:none}
.mo-sort{background:var(--mo-surface);border:1px solid var(--mo-line2);color:var(--mo-text);border-radius:12px;
  padding:11px 14px;font:500 14px Inter;cursor:pointer}
.mo-chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 2px;scrollbar-width:none}
.mo-chips::-webkit-scrollbar{display:none}
.mo-chip{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;cursor:pointer;
  font:600 13.5px Inter;color:var(--mo-muted);background:var(--mo-surface);border:1px solid var(--mo-line);transition:.15s}
.mo-chip:hover{color:var(--mo-text);border-color:var(--mo-line2)}
.mo-chip.on{color:var(--mo-ink);background:linear-gradient(135deg,var(--mo-accent),var(--mo-accent2));border-color:transparent}
.mo-chip .n{font-size:11px;opacity:.7}
.mo-chip.on .n{opacity:.85}

/* ---------- section head ---------- */
.mo-sechead{display:flex;align-items:baseline;justify-content:space-between;margin:38px 0 16px;gap:12px;flex-wrap:wrap}
.mo-sechead h2{font-size:21px;margin:0}
.mo-sechead .sub{color:var(--mo-muted);font-size:13.5px}

/* ---------- packages ---------- */
.mo-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mo-pack{position:relative;border:1px solid var(--mo-line2);border-radius:var(--mo-radius);padding:20px;overflow:hidden;
  background:linear-gradient(135deg,var(--mo-surface2),var(--mo-surface));display:block}
.mo-pack:hover{border-color:var(--mo-accent)}
.mo-pack::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.18),transparent 70%)}
.mo-pack .tag{font:700 11px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--mo-gold)}
.mo-pack h3{margin:8px 0 6px;font-size:17px}
.mo-pack p{color:var(--mo-muted);font-size:13px;margin:0 0 14px}
.mo-pack .pp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;position:relative}
.mo-pack .pp b{font-family:"Space Grotesk";font-size:20px;color:var(--mo-accent)}
.mo-pack .pp s{color:var(--mo-muted2);font-size:13px}
.mo-pack .pp .kz{color:var(--mo-muted);font-size:12.5px}
.mo-pack .ok{color:var(--mo-green);font-weight:700;font-size:12.5px}

/* ---------- course grid ---------- */
.mo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px}
.mo-grid.cols3{grid-template-columns:repeat(3,1fr)}
.mo-card{display:flex;flex-direction:column;border:1px solid var(--mo-line);border-radius:var(--mo-radius);overflow:hidden;
  background:var(--mo-surface);cursor:pointer;transition:.18s;will-change:transform}
.mo-card:hover{transform:translateY(-4px);border-color:var(--mo-line2);box-shadow:var(--mo-shadow)}
.mo-cov{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a111f}
.mo-cov .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.mo-cov .glyph{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.mo-cov .lines{position:absolute;inset:0;opacity:.35;background-image:
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:26px 26px}
.mo-cov .off{position:absolute;top:10px;right:10px;background:var(--mo-green);color:#06281c;font:700 12px Inter;padding:4px 9px;border-radius:999px}
.mo-cov .soon{position:absolute;top:10px;right:10px;background:var(--mo-violet);color:#140a2a;font:700 11px Inter;padding:4px 9px;border-radius:999px}
.mo-cov .brandmini{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;
  background:rgba(4,8,16,.5);border:1px solid rgba(255,255,255,.12);padding:4px 8px;border-radius:8px;font:600 10px Inter;color:#dce6fb}
.mo-cov .brandmini i{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,var(--mo-accent),var(--mo-accent2))}
.mo-card .body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.mo-kat{display:flex;align-items:center;gap:8px;font:600 11px Inter;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.mo-kat .dot{width:7px;height:7px;border-radius:50%}
.mo-lvl{margin-left:auto;color:var(--mo-muted);text-transform:none;letter-spacing:0;font-weight:500;
  border:1px solid var(--mo-line);padding:2px 7px;border-radius:6px;font-size:10.5px}
.mo-card h3{font-size:15.5px;margin:0 0 6px;line-height:1.25}
.mo-desc{color:var(--mo-muted);font-size:12.8px;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mo-cstats{display:flex;flex-wrap:wrap;gap:12px;color:var(--mo-muted);font-size:12px;margin-bottom:12px}
.mo-cstats span{display:inline-flex;align-items:center;gap:5px}
.mo-stars{color:var(--mo-gold)}
.mo-novo{color:var(--mo-muted2)}
.mo-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--mo-line)}
.mo-price-num{font-size:19px;font-weight:700}
.mo-price .kz{color:var(--mo-muted);font-size:12px;display:block}
.mo-price s{color:var(--mo-muted2);font-size:11.5px}
.mo-estado{font:700 12px Inter;padding:5px 10px;border-radius:999px}
.mo-estado.ok{color:var(--mo-green);background:rgba(52,211,153,.12)}
.mo-estado.prog{color:var(--mo-accent);background:rgba(34,211,238,.12)}
.mo-go{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--mo-surface2);
  border:1px solid var(--mo-line2);color:var(--mo-accent);flex:none;transition:.15s}
.mo-card:hover .mo-go{background:var(--mo-accent);color:var(--mo-ink)}
.mo-bar{height:4px;border-radius:999px;background:var(--mo-surface2);overflow:hidden;margin-top:10px}
.mo-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mo-accent),var(--mo-accent2))}
.mo-barwrap{margin-top:4px}
.mo-barwrap .lbl{display:flex;justify-content:space-between;color:var(--mo-muted);font-size:11px;margin-bottom:4px}

/* ---------- próximos ---------- */
.mo-soongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mo-soongrid .c{border:1px dashed var(--mo-line2);border-radius:var(--mo-radius);padding:18px;background:rgba(15,23,42,.4)}
.mo-soongrid .c .kat{font:600 11px Inter;text-transform:uppercase;letter-spacing:.07em;color:var(--mo-violet);display:flex;gap:8px;align-items:center}
.mo-soongrid .c h3{font-size:15px;margin:8px 0 10px}
.mo-soongrid .c .notify{display:flex;gap:8px}
.mo-soongrid .c .notify input{flex:1}
.mo-msg{font-size:12px;margin-top:6px;flex-basis:100%}

.mo-empty{text-align:center;color:var(--mo-muted);padding:60px 0;grid-column:1/-1}

/* ============================================================================
   PÁGINA DE CURSO (curso.php)
   ============================================================================ */
.mo-back{display:inline-flex;align-items:center;gap:8px;color:var(--mo-muted);font:600 13.5px Inter;margin:22px 0 14px;cursor:pointer}
.mo-back:hover{color:var(--mo-accent)}
.mo-crumbs{display:flex;align-items:center;gap:8px;color:var(--mo-muted);font-size:13px;margin:20px 0 6px;flex-wrap:wrap}
.mo-crumbs a:hover{color:var(--mo-accent)}
.mo-crumbs .sep{color:var(--mo-muted2)}
.mo-draft{color:var(--mo-gold);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);padding:4px 10px;border-radius:999px;font:700 12px Inter}

/* hero */
.mo-chero{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start;margin-bottom:8px}
.mo-tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mo-tag{display:inline-flex;align-items:center;gap:6px;font:600 12px Inter;color:var(--mo-muted);
  background:var(--mo-surface);border:1px solid var(--mo-line2);padding:5px 11px;border-radius:999px}
.mo-tag.cat{color:var(--cor,var(--mo-accent));border-color:color-mix(in srgb,var(--cor,var(--mo-accent)) 40%,transparent)}
.mo-tag.off{color:var(--mo-green);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.07)}
.mo-tag.soon{color:var(--mo-violet);border-color:rgba(167,139,250,.35);background:rgba(167,139,250,.07)}
.mo-chead h1{font-size:clamp(25px,3.3vw,37px);line-height:1.08;margin:0 0 12px}
.mo-lede{color:var(--mo-muted);font-size:16px;max-width:54ch;margin:0 0 16px}
.mo-cmeta{display:flex;flex-wrap:wrap;gap:18px;color:var(--mo-muted);font-size:13.5px;margin-bottom:16px}
.mo-cmeta b{color:var(--mo-text)}
.mo-cmeta .mo-stars{color:var(--mo-gold)}
.mo-cmeta a{color:var(--mo-accent)}
.mo-people{display:flex;flex-wrap:wrap;gap:16px}
.mo-person{display:flex;align-items:center;gap:10px}
.mo-avat{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--mo-violet),var(--mo-accent));color:#0b0520;font:700 14px "Space Grotesk"}
.mo-avat.lg{width:54px;height:54px;font-size:18px}
.mo-person b{font-size:14px;display:block}.mo-person small{color:var(--mo-muted);font-size:12.5px}
.mo-cvideo{position:relative;border-radius:var(--mo-radius-lg);overflow:hidden;border:1px solid var(--mo-line2);margin-top:16px}
.mo-cvideo video{display:block;width:100%;background:#05080f}
.mo-cvideo .cap{padding:10px 14px;color:var(--mo-muted);font-size:13px;background:var(--mo-surface)}

/* buy card */
.mo-buy{position:sticky;top:84px;border:1px solid var(--mo-line2);border-radius:var(--mo-radius-lg);overflow:hidden;background:var(--mo-surface);box-shadow:var(--mo-shadow);border-top:3px solid var(--cor,var(--mo-accent))}
.mo-buy .top{padding:20px 20px 16px;border-bottom:1px solid var(--mo-line)}
.mo-buy .offtag{display:inline-block;background:var(--mo-green);color:#06281c;font:700 12px Inter;padding:3px 9px;border-radius:999px;margin-bottom:10px}
.mo-buy .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mo-buy .price .n{font-family:"Space Grotesk";font-size:30px;font-weight:700;color:var(--cor,var(--mo-accent))}
.mo-buy .price s{color:var(--mo-muted2);font-size:14px}
.mo-buy .price .free{color:var(--mo-green)}
.mo-buy .kz{color:var(--mo-muted);font-size:13px;margin-top:4px}
.mo-buy .acts{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.mo-buy .mo-btn{width:100%}
.mo-buy ul{list-style:none;margin:2px 20px 18px;padding:0}
.mo-buy ul li{display:flex;gap:10px;align-items:flex-start;color:var(--mo-muted);font-size:13.5px;padding:6px 0}
.mo-buy ul li svg{color:var(--mo-green);flex:none;margin-top:3px}
.mo-buy .note{text-align:center;color:var(--mo-muted2);font-size:12px;padding:0 20px 18px}
.mo-buy .saldo{display:flex;justify-content:space-between;align-items:center;color:var(--mo-muted);font-size:13px;padding:0 20px 4px}
.mo-buy .falta{color:var(--mo-muted);font-size:12.5px;padding:2px 20px 0}
.mo-buy .falta a{color:var(--mo-accent)}
.mo-buy .prog{padding:16px 20px}
.mo-buy .prog .lbl{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px}
.mo-flash{margin:14px 16px 0;padding:11px 13px;border-radius:10px;font-size:13.5px}
.mo-flash.ok{background:rgba(52,211,153,.12);color:var(--mo-green)}
.mo-flash.erro{background:rgba(251,113,133,.12);color:var(--mo-red)}
.mo-flash a{font-weight:700;text-decoration:underline}
.mo-waitlist{padding:0 20px 18px;display:flex;flex-direction:column;gap:9px}

/* layout main + aside */
.mo-clayout{display:grid;grid-template-columns:minmax(0,1fr) 358px;gap:28px;margin-top:22px;align-items:start}
.mo-main{min-width:0}
.mo-side{min-width:0}
.mo-chead{margin-bottom:6px}
.mo-block{border:1px solid var(--mo-line);border-radius:var(--mo-radius);background:var(--mo-surface);padding:22px;margin-bottom:18px}
.mo-block h2{font-size:18px;margin:0 0 14px}
.mo-block .desc{color:var(--mo-muted);font-size:14.5px;line-height:1.7;max-width:90ch}
.mo-block .desc h2,.mo-block .desc h3{color:var(--mo-text);font-size:16px;margin:16px 0 8px}
.mo-learn{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.mo-learn div{display:flex;gap:10px;color:var(--mo-muted);font-size:14px}
.mo-learn svg{color:var(--mo-accent);flex:none;margin-top:3px}
.mo-ul{margin:0;padding-left:20px;color:var(--mo-muted);font-size:14px;line-height:1.8}

/* curriculum */
.mo-curtop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mo-curtop .sub{color:var(--mo-muted);font-size:13px}
.mo-mod{border:1px solid var(--mo-line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--mo-bg2)}
.mo-mod>summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;align-items:center;gap:12px}
.mo-mod>summary::-webkit-details-marker{display:none}
.mo-mnum{width:26px;height:26px;border-radius:8px;background:var(--mo-surface2);border:1px solid var(--mo-line2);display:grid;place-items:center;font:700 12px Inter;color:var(--mo-accent);flex:none}
.mo-mt{font-weight:600;font-size:14.5px;min-width:0}
.mo-mc{margin-left:auto;color:var(--mo-muted);font-size:12px;white-space:nowrap}
.mo-mc.ok{color:var(--mo-green)}
.mo-caret{color:var(--mo-muted);transition:.2s;flex:none}
.mo-mod[open] .mo-caret{transform:rotate(180deg)}
.mo-modstate{padding:2px 16px 8px;font-size:12px;color:var(--mo-muted)}
.mo-modstate.ok{color:var(--mo-green)}
.mo-lessons{border-top:1px solid var(--mo-line);padding:6px 0}
.mo-lesson{display:flex;align-items:center;gap:12px;padding:9px 16px;color:var(--mo-text);font-size:13.5px}
.mo-lesson:hover{background:var(--mo-surface)}
.mo-lesson.locked{color:var(--mo-muted2)}
.mo-lesson.done .mo-lic{background:rgba(52,211,153,.14);color:var(--mo-green)}
.mo-lic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;font-size:12px;background:var(--mo-surface2);color:var(--mo-muted)}
.mo-lic.video{background:rgba(56,189,248,.14);color:var(--mo-accent2)}
.mo-lic.lab{background:rgba(52,211,153,.14);color:var(--mo-green)}
.mo-ll{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-lmeta{display:flex;align-items:center;gap:8px;color:var(--mo-muted);font-size:12px;flex:none}
.mo-free{font:700 10px Inter;color:var(--mo-green);border:1px solid rgba(52,211,153,.35);padding:2px 7px;border-radius:999px;text-transform:uppercase}

/* aside boxes */
.mo-sbox{border:1px solid var(--mo-line);border-radius:var(--mo-radius);background:var(--mo-surface);padding:18px;margin-bottom:16px}
.mo-sbox h3{font-size:14px;margin:0 0 12px;color:var(--mo-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.mo-frow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--mo-line);font-size:13.5px}
.mo-frow:first-of-type{border-top:0}
.mo-frow .k{color:var(--mo-muted)}
.mo-lab-hi{display:flex;gap:14px;align-items:center;border:1px solid rgba(52,211,153,.3);background:rgba(52,211,153,.06);border-radius:12px;padding:14px;margin-bottom:12px}
.mo-lab-hi .ic{width:42px;height:42px;border-radius:12px;background:rgba(52,211,153,.14);color:var(--mo-green);display:grid;place-items:center;flex:none}
.mo-lab-hi b{display:block;font-size:14px}.mo-lab-hi span{color:var(--mo-muted);font-size:12.5px}
.mo-cert{display:flex;gap:14px;align-items:center;border:1px solid var(--mo-line2);border-radius:12px;padding:14px;background:linear-gradient(135deg,rgba(251,191,36,.08),transparent)}
.mo-cert .seal{width:44px;height:44px;border-radius:12px;background:rgba(251,191,36,.14);color:var(--mo-gold);display:grid;place-items:center;flex:none}
.mo-cert b{font-size:14px}.mo-cert span{color:var(--mo-muted);font-size:12.5px}
.mo-sidelink{display:block;padding:12px 14px;border:1px solid var(--mo-line2);border-radius:12px;margin-top:8px}
.mo-sidelink:hover{border-color:var(--mo-accent)}
.mo-sidelink b{font-size:13.5px}.mo-sidelink span{display:block;color:var(--mo-muted);font-size:12px;margin-top:3px}
.mo-share{display:flex;gap:8px}
.mo-share input{flex:1;font-size:12.5px}

/* reviews */
.mo-avalhead{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.mo-media{text-align:center}
.mo-media .num{font-family:"Space Grotesk";font-size:40px;font-weight:700;line-height:1}
.mo-media .mo-stars{color:var(--mo-gold);font-size:15px}
.mo-media small{display:block;color:var(--mo-muted);font-size:12px;margin-top:4px}
.mo-dist{flex:1;min-width:200px;display:flex;flex-direction:column;gap:5px}
.mo-distrow{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mo-muted)}
.mo-distrow .bar{flex:1;height:7px;border-radius:999px;background:var(--mo-surface2);overflow:hidden}
.mo-distrow .bar i{display:block;height:100%;background:var(--mo-gold)}
.mo-rev{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--mo-line)}
.mo-rev:first-of-type{border-top:0}
.mo-rev .mo-avat{width:38px;height:38px;font-size:13px}
.mo-rev b{font-size:14px}
.mo-rev .mo-stars{color:var(--mo-gold);font-size:12px}
.mo-rev p{margin:5px 0 0;color:var(--mo-muted);font-size:13.5px;line-height:1.6}
.mo-rev .resp{margin-top:8px;padding:10px 12px;background:var(--mo-bg2);border-radius:10px;border:1px solid var(--mo-line)}
.mo-rev .resp b{font-size:12.5px;color:var(--mo-accent)}
.mo-revyou{font:700 10px Inter;color:var(--mo-accent);border:1px solid rgba(34,211,238,.3);padding:1px 6px;border-radius:999px}
/* rating form */
.mo-ratestars{display:inline-flex;flex-direction:row-reverse;gap:4px;font-size:26px}
.mo-ratestars input{display:none}
.mo-ratestars label{color:var(--mo-muted2);cursor:pointer;transition:.1s}
.mo-ratestars input:checked ~ label,.mo-ratestars label:hover,.mo-ratestars label:hover ~ label{color:var(--mo-gold)}
.mo-textarea{width:100%;background:var(--mo-bg2);border:1px solid var(--mo-line2);border-radius:10px;padding:11px 13px;color:var(--mo-text);font:500 14px Inter;resize:vertical;outline:0;margin:10px 0}
.mo-textarea:focus{border-color:var(--mo-accent)}
.mo-forum{display:flex;gap:14px;align-items:center}
.mo-forum .ic{font-size:26px}
.mo-forum b{font-size:14.5px}.mo-forum p{margin:3px 0 0;color:var(--mo-muted);font-size:13px}
.mo-relwrap{margin-top:34px}

@media(max-width:1000px){
  .mo-chero,.mo-clayout{grid-template-columns:1fr}
  .mo-buy{position:static}
  .mo-learn{grid-template-columns:1fr}
}

/* ---------- footer ---------- */
.mo-footer{border-top:1px solid var(--mo-line);margin-top:60px;padding:30px 0;color:var(--mo-muted2);font-size:13px}
.mo-footer .mo-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mo-footer a:hover{color:var(--mo-accent)}

@media(max-width:1000px){
  .mo-grid,.mo-grid.cols3{grid-template-columns:repeat(2,1fr)}
  .mo-hero-grid{grid-template-columns:1fr}.mo-hero-card{display:none}
  .mo-packs,.mo-soongrid{grid-template-columns:1fr}
  .mo-nav{display:none}
}
@media(max-width:560px){
  .mo-grid,.mo-grid.cols3{grid-template-columns:1fr}
  .mo-stats{gap:18px}
  .mo-filters .row{flex-direction:column;align-items:stretch}
  .mo-sort{width:100%}
  .mo-wrap{padding:0 16px}
  .mo-topbar .mo-wrap{gap:8px;height:58px}
  .mo-brand{font-size:14px;gap:8px}
  .mo-brand small{display:none}
  .mo-right{gap:6px}
  .mo-right .mo-btn{padding:8px 11px;font-size:12.5px}
}