/* 88BB Learning Neon Knowledge System v3.5.0 */
:root{
  --learn-neon-cyan:#42ecff;
  --learn-neon-blue:#5d88ff;
  --learn-neon-violet:#a967ff;
  --learn-neon-magenta:#f04cff;
  --learn-neon-gold:#ffd35d;
  --learn-surface:#0d2039;
  --learn-surface-2:#102845;
  --learn-surface-3:#132d4b;
  --learn-readable:#dce9f7;
}
body[data-page="learning-center"]{
  background:
    radial-gradient(circle at 8% 2%,rgba(66,236,255,.22),transparent 30%),
    radial-gradient(circle at 94% 7%,rgba(240,76,255,.20),transparent 32%),
    radial-gradient(circle at 50% 48%,rgba(93,136,255,.10),transparent 40%),
    linear-gradient(180deg,#081a31 0%,#07162a 45%,#09162b 100%);
  color:#eef7ff;
}
body[data-page="learning-center"]:before{
  opacity:.34;
  background-image:
    linear-gradient(rgba(89,202,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(89,202,255,.055) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 58%,transparent 100%);
}
body[data-page="learning-center"]:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.24;
  background:
    radial-gradient(circle at 17% 24%,rgba(66,236,255,.17),transparent 18%),
    radial-gradient(circle at 84% 64%,rgba(169,103,255,.15),transparent 22%);
}
.learning-app{position:relative;z-index:1}
.learning-top{
  border-color:rgba(92,216,255,.19);
  background:linear-gradient(120deg,rgba(12,34,60,.94),rgba(20,28,61,.90));
  box-shadow:0 18px 58px rgba(0,10,30,.35),inset 0 1px rgba(255,255,255,.06);
}
.learning-brand img{
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 24px rgba(240,76,255,.34),0 0 38px rgba(66,236,255,.20)
}
.learning-pill-btn{border-color:rgba(101,211,255,.18);background:rgba(18,54,86,.70)}
.learning-pill-btn:hover{border-color:rgba(66,236,255,.48);background:rgba(66,236,255,.11);box-shadow:0 0 24px rgba(66,236,255,.11)}

.learning-command-hero{
  background:
    radial-gradient(circle at 83% 18%,rgba(240,76,255,.20),transparent 28%),
    radial-gradient(circle at 12% 100%,rgba(66,236,255,.16),transparent 34%),
    linear-gradient(132deg,rgba(14,42,72,.98),rgba(14,29,57,.98) 48%,rgba(37,20,68,.97));
  border-color:rgba(87,219,255,.28);
  box-shadow:0 34px 100px rgba(0,8,28,.42),0 0 0 1px rgba(171,101,255,.06),inset 0 1px rgba(255,255,255,.07);
}
.learning-command-hero:before{
  width:520px;height:520px;right:-145px;top:-260px;
  background:radial-gradient(circle,rgba(247,75,255,.24),rgba(82,154,255,.12) 43%,transparent 69%);
  filter:blur(1px)
}
.learning-command-hero:after{height:3px;background:linear-gradient(90deg,transparent,var(--learn-neon-cyan),var(--learn-neon-magenta),var(--learn-neon-gold),transparent);opacity:.9;box-shadow:0 0 16px rgba(240,76,255,.45)}
.learning-hero-badges span{
  border-color:rgba(66,236,255,.28);background:linear-gradient(90deg,rgba(66,236,255,.11),rgba(169,103,255,.10));color:#d9feff;
  box-shadow:inset 0 1px rgba(255,255,255,.05)
}
.learning-hero-title{font-size:clamp(30px,3.7vw,48px);line-height:1.1;background:linear-gradient(92deg,#fff 0%,#d7f9ff 44%,#eccdff 74%,#ffe89a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(105,215,255,.08)}
.learning-hero-description{color:#c6d9ea!important;max-width:820px!important}
.learning-progress-card,.learning-stat{
  border-color:rgba(101,203,255,.16)!important;
  background:linear-gradient(145deg,rgba(12,38,66,.82),rgba(15,28,57,.76))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 8px 26px rgba(0,5,22,.18)
}
.learning-progress-card strong{color:#73f7ee!important;text-shadow:0 0 16px rgba(66,236,255,.28)}
.learning-progress-track span,.cat-progress i{background:linear-gradient(90deg,var(--learn-neon-cyan),var(--learn-neon-violet),var(--learn-neon-magenta),var(--learn-neon-gold));box-shadow:0 0 12px rgba(66,236,255,.32)}

.learning-next-card{
  border-color:rgba(243,100,255,.30);
  background:
    radial-gradient(circle at 78% 13%,rgba(240,76,255,.17),transparent 32%),
    linear-gradient(155deg,rgba(23,53,84,.93),rgba(39,21,69,.94));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 20px 54px rgba(4,10,30,.25)
}
.learning-next-card>p{color:#ffdb72;text-shadow:0 0 12px rgba(255,211,93,.22)}
.learning-next-card>strong{max-width:315px}
.learning-next-card>span{color:#b5c9dc}
.learning-next-card>button{
  background:linear-gradient(92deg,#54e8ff 0%,#8c75ff 46%,#ef5cff 100%);color:#fff;
  box-shadow:0 14px 34px rgba(143,83,255,.28),inset 0 1px rgba(255,255,255,.35)
}
.learning-next-card>button:hover{filter:brightness(1.08);box-shadow:0 16px 40px rgba(143,83,255,.36)}
.learning-next-brand{position:absolute;right:18px;top:16px;display:grid;justify-items:center;gap:3px;width:126px;pointer-events:none}
.learning-next-brand span{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle,rgba(248,95,255,.18),rgba(74,219,255,.08) 58%,transparent 70%);filter:drop-shadow(0 0 17px rgba(240,76,255,.40)) drop-shadow(0 0 22px rgba(66,236,255,.24))}
.learning-next-brand img{display:block;width:96px;height:96px;object-fit:contain}
.learning-next-brand small{font-size:8px;font-weight:900;letter-spacing:.16em;color:#c9a8ff;text-shadow:0 0 10px rgba(240,76,255,.5)}

.learning-stage-track{border-color:rgba(76,199,255,.13);background:rgba(10,31,55,.82);box-shadow:inset 0 1px rgba(255,255,255,.035)}
.learning-stage-dot i{background:#102b49;border-color:rgba(94,194,255,.14)}
.learning-stage-dot.active{background:linear-gradient(90deg,rgba(66,236,255,.10),rgba(169,103,255,.10));color:#effcff}
.learning-stage-dot.active i{border-color:#42ecff;color:#72f7ff;box-shadow:0 0 0 3px rgba(66,236,255,.10),0 0 18px rgba(66,236,255,.18)}
.section-index{border-color:rgba(66,236,255,.30);background:linear-gradient(145deg,rgba(66,236,255,.12),rgba(169,103,255,.10));color:#7ff8ff;box-shadow:0 0 22px rgba(66,236,255,.08)}

.learning-category{
  background:
    radial-gradient(circle at 100% 0,rgba(103,105,255,.10),transparent 36%),
    linear-gradient(148deg,rgba(17,51,83,.96),rgba(12,29,55,.98));
  border-color:rgba(101,196,255,.17);
  box-shadow:0 18px 48px rgba(0,7,26,.24),inset 0 1px rgba(255,255,255,.045)
}
.learning-category:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 32%)}
.learning-category:hover,.learning-category.active{border-color:rgba(66,236,255,.43);box-shadow:0 23px 58px rgba(0,8,30,.32),0 0 26px rgba(90,139,255,.08)}
.learning-category .cat-icon{background:linear-gradient(145deg,rgba(66,236,255,.11),rgba(169,103,255,.13));border-color:rgba(121,207,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.05)}
.learning-category small,.cat-card-footer span,.learning-category em{color:#a7bbd0}

.lesson-row{
  background:linear-gradient(145deg,rgba(17,50,82,.95),rgba(12,29,54,.97));
  border-color:rgba(101,190,255,.12)
}
.lesson-row:hover{border-color:rgba(66,236,255,.34);background:linear-gradient(145deg,rgba(20,61,94,.97),rgba(16,35,66,.98))}
.lesson-row.active{border-color:rgba(66,236,255,.46);background:linear-gradient(145deg,rgba(19,70,91,.97),rgba(24,35,75,.98));box-shadow:0 13px 32px rgba(0,7,25,.26),0 0 21px rgba(66,236,255,.07)}
.lesson-row.active:before{background:linear-gradient(#42ecff,#ef4cff);box-shadow:0 0 12px rgba(66,236,255,.54)}

.reader-panel{
  background:linear-gradient(180deg,#10243f 0%,#0b1b33 48%,#0a172c 100%);
  border-color:rgba(97,197,255,.17);
  box-shadow:0 24px 70px rgba(0,7,27,.33),inset 0 1px rgba(255,255,255,.035)
}
.reader-hero{
  background:
    radial-gradient(circle at 87% 24%,rgba(240,76,255,.19),transparent 27%),
    radial-gradient(circle at 9% 100%,rgba(66,236,255,.14),transparent 31%),
    linear-gradient(135deg,#173455,#111f40 57%,#2a174d);
}
.reader-hero:after{background:linear-gradient(90deg,#42ecff,#8d72ff,#ef4cff);box-shadow:0 0 16px rgba(240,76,255,.35)}
.reader-body{background:linear-gradient(180deg,rgba(12,31,56,.36),rgba(7,20,39,.10))}
.guide-box{
  border-color:rgba(180,112,255,.28);background:linear-gradient(135deg,rgba(169,103,255,.10),rgba(66,236,255,.055));
  box-shadow:inset 3px 0 rgba(174,100,255,.55),0 12px 34px rgba(0,7,24,.13)
}
.voice-guide-player.voice-guide-compact{border-color:rgba(66,236,255,.24);background:linear-gradient(110deg,rgba(25,78,103,.62),rgba(48,31,83,.62))}
.voice-guide-compact .voice-main-play{background:linear-gradient(110deg,#47dcff,#8c71ff,#ee58ed);color:#fff;box-shadow:0 8px 24px rgba(112,90,255,.23)}
.voice-options-toggle{background:rgba(17,51,83,.72);border-color:rgba(88,196,255,.18)}
.lesson-diagram-section{background:linear-gradient(145deg,rgba(17,47,77,.52),rgba(29,22,61,.52));border-color:rgba(86,205,255,.13)}
.lesson-visual{background:linear-gradient(145deg,#0d2340,#171b3c);border-color:rgba(82,212,255,.21);box-shadow:0 15px 38px rgba(0,7,26,.22)}
.lesson-visual img{background:#091a31}
.lesson-content{color:#d8e5f2}.lesson-content h2{border-color:rgba(66,236,255,.18);color:#fff}.lesson-content h3{color:#f3f8ff}.lesson-content blockquote{border-left-color:#f04cff;background:linear-gradient(90deg,rgba(240,76,255,.09),rgba(255,211,93,.045));color:#f0e8f7}

.lesson-quiz{border-color:rgba(169,103,255,.35);background:linear-gradient(145deg,rgba(20,44,78,.96),rgba(31,22,67,.96));box-shadow:0 20px 58px rgba(0,8,29,.26)}
.lesson-quiz:before{background:linear-gradient(#42ecff,#a967ff,#f04cff);box-shadow:0 0 13px rgba(240,76,255,.30)}
.quiz-option{background:rgba(11,34,61,.58);border-color:rgba(108,194,255,.14)}
.quiz-option:hover{border-color:rgba(169,103,255,.50);background:rgba(169,103,255,.10)}
.quiz-option:has(input:checked){border-color:#b276ff;background:linear-gradient(90deg,rgba(169,103,255,.17),rgba(66,236,255,.08))}
.quiz-primary{background:linear-gradient(110deg,#42cfff,#795cff,#eb4ce4);box-shadow:0 10px 28px rgba(118,79,233,.28)}

@media(max-width:860px){
  body[data-page="learning-center"]{background:linear-gradient(180deg,#091b32,#08162b 58%,#09162a)}
  .learning-mobile-nav{background:rgba(9,28,51,.97);border-color:rgba(66,236,255,.17);box-shadow:0 10px 30px rgba(0,8,27,.25)}
  .learning-command-hero{background:linear-gradient(145deg,rgba(17,52,84,.98),rgba(36,22,69,.98));border-color:rgba(89,209,255,.24)}
  .learning-next-card{background:linear-gradient(145deg,rgba(19,57,88,.93),rgba(39,24,73,.94))}
  .learning-next-brand{display:none}
  body[data-learning-view="reader"] .reader-panel{background:linear-gradient(180deg,#0e2744,#091a31)}
  .reader-hero{background:linear-gradient(135deg,#163b5e,#1c2852 58%,#311c58)}
  .reader-body{background:transparent}
}
@media(max-width:420px){
  .learning-hero-title{font-size:24px}
  .learning-command-hero{margin-left:8px;margin-right:8px}
  #categorySection,#lessonArea{padding-left:8px;padding-right:8px}
  .learning-category{background:linear-gradient(145deg,rgba(19,55,87,.98),rgba(16,31,61,.98))}
  .lesson-quiz{padding:14px}
}

/* v3.5.1 Neon Contrast Guard
   Neon stays on the perimeter; button interiors remain dark for reliable white-text contrast. */
.learning-next-card>button,
.voice-guide-compact .voice-main-play,
.quiz-primary{
  border:1px solid transparent!important;
  background:
    linear-gradient(135deg,rgba(8,27,49,.98),rgba(24,24,57,.98)) padding-box,
    linear-gradient(100deg,var(--learn-neon-cyan),var(--learn-neon-violet) 48%,var(--learn-neon-magenta)) border-box!important;
  color:#f8fcff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.78),0 0 8px rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(66,236,255,.05),
    0 0 20px rgba(105,103,255,.20),
    0 10px 26px rgba(0,7,27,.24)!important;
}
.learning-next-card>button:hover,
.voice-guide-compact .voice-main-play:hover,
.quiz-primary:hover{
  background:
    linear-gradient(135deg,rgba(15,44,72,.99),rgba(43,29,80,.99)) padding-box,
    linear-gradient(100deg,#7af4ff,#ad85ff 48%,#ff76f2) border-box!important;
  color:#fff!important;
  filter:none!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 0 25px rgba(66,236,255,.19),
    0 0 31px rgba(240,76,255,.16),
    0 12px 30px rgba(0,7,27,.28)!important;
}
.learning-next-card>button:focus-visible,
.voice-guide-compact .voice-main-play:focus-visible,
.quiz-primary:focus-visible{
  outline:2px solid #d7fbff;
  outline-offset:3px;
}
.learning-next-card>button em,
.voice-guide-compact .voice-main-play span,
.voice-guide-compact .voice-main-play strong,
.quiz-primary{color:#f8fcff!important}
.quiz-primary:disabled{
  border-color:rgba(138,157,184,.20)!important;
  background:rgba(16,35,58,.78)!important;
  color:#8ea2b8!important;
  text-shadow:none;
  box-shadow:none!important;
}
@media(max-width:860px){
  .learning-next-card>button,
  .voice-guide-compact .voice-main-play,
  .quiz-primary{box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 15px rgba(118,87,255,.16)!important}
}