/* 88BB Learning Education System v4.0
   Core Academy + Pro System Labs, risk-first ordering and app-friendly mobile reader. */
:root{
  --learn-core:#49e9ff;
  --learn-pro:#f066e8;
  --learn-pro-violet:#9d79ff;
  --learn-surface:#102b49;
  --learn-surface-2:#182b52;
}

.learning-command-hero{
  background:
    radial-gradient(circle at 82% 12%,rgba(249,92,225,.18),transparent 30%),
    radial-gradient(circle at 5% 90%,rgba(65,231,255,.14),transparent 33%),
    linear-gradient(135deg,rgba(18,63,91,.97),rgba(27,43,82,.98) 52%,rgba(60,28,86,.97));
}
.learning-hero-badges span:last-child{border-color:rgba(255,216,91,.28);color:#fff0a8;background:rgba(255,198,72,.075)}
.learning-stat-pro{border-color:rgba(240,102,232,.24)!important;color:#ffd7fb!important;background:linear-gradient(145deg,rgba(63,30,89,.86),rgba(25,39,75,.78))!important}

.academy-track-section{position:relative;margin-top:30px}
.pro-track-section{
  padding:24px;
  border:1px solid rgba(233,102,255,.18);
  border-radius:27px;
  background:
    radial-gradient(circle at 92% 4%,rgba(239,74,223,.13),transparent 30%),
    radial-gradient(circle at 4% 96%,rgba(74,218,255,.09),transparent 32%),
    linear-gradient(145deg,rgba(20,49,78,.72),rgba(39,28,75,.72));
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 24px 65px rgba(2,7,27,.20);
}
.section-index.is-pro{border-color:rgba(240,102,232,.36);color:#ff9af4;background:linear-gradient(145deg,rgba(240,102,232,.14),rgba(157,121,255,.13));box-shadow:0 0 24px rgba(240,102,232,.12)}

.track-callout{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:13px 16px;border-radius:16px;font-size:13px}
.track-callout strong{font-size:14px;color:#fff}
.track-callout span{color:#aebfd1;text-align:right}
.core-callout{border:1px solid rgba(68,234,255,.16);background:linear-gradient(90deg,rgba(47,206,225,.10),rgba(42,75,121,.08))}
.pro-callout{border:1px solid rgba(240,102,232,.20);background:linear-gradient(90deg,rgba(240,102,232,.105),rgba(157,121,255,.09))}

.learning-pro-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.learning-pro-category{
  min-height:218px;
  border-color:rgba(235,110,255,.24)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(240,91,222,.15),transparent 36%),
    linear-gradient(148deg,rgba(29,57,91,.97),rgba(44,27,78,.98))!important;
}
.learning-pro-category:hover,.learning-pro-category.active{border-color:rgba(255,120,238,.58)!important;box-shadow:0 24px 60px rgba(0,8,30,.32),0 0 28px rgba(240,90,220,.11)!important}
.learning-pro-category .cat-sequence{color:#ffb2f5}
.learning-pro-category .cat-icon{border-color:rgba(240,102,232,.26)!important;background:linear-gradient(145deg,rgba(240,102,232,.13),rgba(92,210,255,.10))!important}
.learning-pro-category .cat-progress i{background:linear-gradient(90deg,#65e8ff,#a67cff,#ff63dc)}

.stage-track-label{flex:0 0 auto;align-self:center;padding:5px 9px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.16em;color:#7ff4ff;background:rgba(55,213,238,.09);border:1px solid rgba(75,225,255,.14)}
.stage-track-label.is-pro{color:#ff9bf2;background:rgba(237,88,223,.09);border-color:rgba(237,88,223,.18)}
.learning-stage-dot.is-pro i{border-color:rgba(242,103,231,.30);color:#ff9df3;background:#35214f}
.learning-stage-dot.is-pro.active{background:linear-gradient(90deg,rgba(240,102,232,.11),rgba(157,121,255,.10))}
.learning-stage-dot.is-pro.active i{border-color:#f066e8;box-shadow:0 0 0 3px rgba(240,102,232,.10),0 0 18px rgba(240,102,232,.20)}

.lesson-row.is-pro-lab{border-color:rgba(235,102,248,.17);background:linear-gradient(145deg,rgba(25,55,87,.97),rgba(43,28,77,.97))}
.lesson-row.is-pro-lab:hover,.lesson-row.is-pro-lab.active{border-color:rgba(244,110,235,.44);background:linear-gradient(145deg,rgba(31,70,102,.98),rgba(58,32,92,.98))}
.lesson-row.is-pro-lab .lesson-check{color:#ffb0f4;border-color:rgba(240,102,232,.24);background:rgba(95,40,108,.42)}
.reader-track-chip.is-pro{color:#ffd3fa!important;border-color:rgba(240,102,232,.30)!important;background:rgba(240,102,232,.11)!important}

.lesson-path-card{display:grid;gap:12px;margin:16px 0 18px;padding:15px 17px;border-radius:18px;border:1px solid rgba(72,220,255,.16);background:linear-gradient(135deg,rgba(24,64,92,.56),rgba(23,41,75,.58))}
.lesson-path-card.is-pro{border-color:rgba(237,102,244,.22);background:linear-gradient(135deg,rgba(29,66,94,.60),rgba(55,31,86,.62))}
.lesson-role-line,.lesson-outcomes,.lesson-prerequisites{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:start}
.lesson-path-card span{font-size:11px;font-weight:900;letter-spacing:.08em;color:#80efff;text-transform:uppercase}
.lesson-path-card.is-pro span{color:#ff9fee}
.lesson-role-line strong{font-size:13px;line-height:1.65;color:#e6f2fb}
.lesson-outcomes>div,.lesson-prerequisites>div{display:flex;flex-wrap:wrap;gap:7px}
.lesson-outcomes em{font-style:normal;font-size:12px;color:#dff8ff;padding:6px 9px;border-radius:999px;background:rgba(61,213,237,.08);border:1px solid rgba(75,226,255,.12)}
.lesson-path-card.is-pro .lesson-outcomes em{background:rgba(224,90,230,.08);border-color:rgba(237,102,244,.14);color:#f8e7ff}
.lesson-prerequisites button{appearance:none;border:1px solid rgba(102,194,255,.16);background:rgba(8,27,49,.65);color:#dbeaf6;padding:6px 9px;border-radius:10px;font-size:12px;cursor:pointer}
.lesson-prerequisites button:hover{border-color:rgba(118,234,255,.38);color:#fff}
.pro-lab-unlock-notice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 18px;align-items:center;margin:14px 0 16px;padding:14px 16px;border:1px solid rgba(243,210,123,.28);background:rgba(243,210,123,.065);border-radius:8px;color:#edf6ff}.pro-lab-unlock-notice strong{font-size:14px}.pro-lab-unlock-notice span{color:#aebdce;font-size:12px;text-align:right}.pro-lab-unlock-notice i{grid-column:1/-1;display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}.pro-lab-unlock-notice i b{display:block;height:100%;background:linear-gradient(90deg,#65e9db,#f3d27b)}.pro-track-section:not(.is-core-locked) .pro-lab-unlock-notice{border-color:rgba(101,233,219,.28);background:rgba(101,233,219,.055)}.learning-category.is-route-locked,.learning-stage-dot.is-route-locked{opacity:.62;cursor:not-allowed}.learning-category.is-route-locked:hover{transform:none;border-color:rgba(255,255,255,.08)}

@media(max-width:1180px){.learning-pro-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){
  .academy-track-section{margin-top:18px}
  .pro-track-section{padding:14px 10px;border-radius:20px}
  .track-callout{display:block;margin:0 8px 12px;padding:11px 12px}
  .track-callout strong,.track-callout span{display:block;text-align:left}
  .track-callout span{margin-top:4px;font-size:12px}
  .learning-pro-grid{grid-template-columns:1fr}
  .learning-pro-category{min-height:0}
  .stage-track-label{display:none}
  .lesson-path-card{margin:12px 0;padding:12px}
  .lesson-role-line,.lesson-outcomes,.lesson-prerequisites{grid-template-columns:1fr;gap:6px}
  .pro-lab-unlock-notice{grid-template-columns:1fr}.pro-lab-unlock-notice span{text-align:left}
  .lesson-path-card span{font-size:10px}
  .lesson-outcomes>div,.lesson-prerequisites>div{display:grid;grid-template-columns:1fr}
  .lesson-prerequisites button{text-align:left;width:100%}
}
@media(max-width:520px){
  .learning-hero-badges span:last-child{display:inline-flex}
  .learning-stat-pro{display:none}
  .pro-track-section{margin-left:8px;margin-right:8px}
}