/* Slovra V6 — PART 1.3 COLORFUL RESTORE
   Bring back Slovra's playful saturated identity while keeping neutral graphite dark mode.
   Color is allowed to live on card surfaces again; no navy canvas. */
:root{
  --p13-purple-1:#6547e8;
  --p13-purple-2:#9b67ff;
  --p13-orange-1:#f08c00;
  --p13-orange-2:#ffb020;
  --p13-pink-1:#d63384;
  --p13-pink-2:#7c4dff;
  --p13-cyan-1:#087f8c;
  --p13-cyan-2:#1cb0f6;
  --p13-green-1:#25a65a;
  --p13-green-2:#58cc72;
  --p13-red-1:#f25f71;
  --p13-red-2:#ff8b6b;
  --p13-yellow-1:#eaa62f;
  --p13-yellow-2:#ffd166;
  --p13-ink:#111214;
  --p13-dark-card:#202124;
}

/* Neutral canvas, but with visible colorful atmosphere. */
#screen-home{
  background:
    radial-gradient(760px 430px at -4% 3%,rgba(136,86,255,.22),transparent 60%),
    radial-gradient(680px 390px at 104% 7%,rgba(20,205,235,.18),transparent 60%),
    radial-gradient(620px 360px at 82% 78%,rgba(255,78,145,.12),transparent 64%),
    radial-gradient(520px 320px at 16% 94%,rgba(255,174,62,.10),transparent 65%),
    linear-gradient(180deg,#111214 0%,#171719 48%,#101012 100%)!important;
}
body.light-mode #screen-home,body.light #screen-home,html[data-theme="light"] #screen-home{
  background:
    radial-gradient(760px 430px at -4% 3%,rgba(127,85,255,.18),transparent 60%),
    radial-gradient(680px 390px at 104% 7%,rgba(25,196,230,.15),transparent 60%),
    radial-gradient(620px 360px at 82% 78%,rgba(255,75,143,.10),transparent 64%),
    radial-gradient(520px 320px at 16% 94%,rgba(255,171,54,.09),transparent 65%),
    linear-gradient(180deg,#f7f5fb 0%,#f2f4f8 52%,#f8f6fa 100%)!important;
}

/* Floating topbar remains neutral but visibly belongs to a colorful app. */
#screen-home .game-header{
  background:
    linear-gradient(135deg,rgba(126,82,255,.08),rgba(25,210,232,.055)),
    rgba(30,30,32,.93)!important;
  border-color:rgba(171,132,255,.24)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.30),0 0 30px rgba(126,82,255,.06)!important;
}
body.light-mode #screen-home .game-header,body.light #screen-home .game-header{
  background:
    linear-gradient(135deg,rgba(125,78,255,.07),rgba(25,198,224,.055)),
    rgba(252,251,254,.94)!important;
  border-color:rgba(116,80,210,.15)!important;
}
#screen-home .streak-area{background:linear-gradient(135deg,rgba(255,124,76,.18),rgba(255,185,65,.10))!important;border-color:rgba(255,145,72,.24)!important}
#screen-home .xp-area{background:linear-gradient(135deg,rgba(41,196,231,.18),rgba(85,139,255,.10))!important;border-color:rgba(52,196,232,.24)!important}
#screen-home .heart-area{background:linear-gradient(135deg,rgba(255,88,132,.17),rgba(255,126,166,.09))!important;border-color:rgba(255,102,145,.22)!important}
#screen-home .level-area{background:linear-gradient(135deg,rgba(155,103,255,.18),rgba(111,81,235,.09))!important;border-color:rgba(154,108,255,.23)!important}
body.light-mode #screen-home .streak-area,body.light #screen-home .streak-area{background:linear-gradient(135deg,#fff0e9,#fff9ee)!important}
body.light-mode #screen-home .xp-area,body.light #screen-home .xp-area{background:linear-gradient(135deg,#eafaff,#eff5ff)!important}
body.light-mode #screen-home .heart-area,body.light #screen-home .heart-area{background:linear-gradient(135deg,#fff0f4,#fff7fa)!important}
body.light-mode #screen-home .level-area,body.light #screen-home .level-area{background:linear-gradient(135deg,#f3edff,#faf7ff)!important}

/* Hero is colorful again, but not navy. */
#screen-home.slovra-home-simple .hero-banner{
  background:
    radial-gradient(95% 170% at 100% -5%,rgba(49,221,235,.30),transparent 48%),
    radial-gradient(90% 150% at -5% 105%,rgba(255,92,154,.22),transparent 51%),
    linear-gradient(125deg,#292035 0%,#242126 46%,#1e2929 100%)!important;
  border-color:rgba(163,108,255,.33)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24),0 0 34px rgba(139,92,246,.07)!important;
}
body.light-mode #screen-home.slovra-home-simple .hero-banner,
body.light #screen-home.slovra-home-simple .hero-banner{
  background:
    radial-gradient(95% 170% at 100% -5%,rgba(54,208,226,.24),transparent 48%),
    radial-gradient(90% 150% at -5% 105%,rgba(255,91,153,.18),transparent 51%),
    linear-gradient(125deg,#f0e9ff 0%,#fff2f7 48%,#eafcff 100%)!important;
  border-color:rgba(139,91,225,.20)!important;
}
#screen-home.slovra-home-simple .overall-progress-fill{
  background:linear-gradient(90deg,#9b67ff,#24c9e5,#58cc72,#ffb020,#ff6f9f)!important;
  background-size:220% 100%!important;
  animation:slovraP13Progress 9s linear infinite!important;
}
@keyframes slovraP13Progress{to{background-position:220% 0}}

/* Today card gets a richer aurora rather than flat charcoal. */
.slovra-simple-focus{
  background:
    radial-gradient(520px 260px at -5% 0%,rgba(126,82,255,.20),transparent 61%),
    radial-gradient(430px 230px at 105% 105%,rgba(20,203,229,.13),transparent 60%),
    linear-gradient(145deg,#232126,#1d1d1f)!important;
  border-color:rgba(153,107,255,.23)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.26)!important;
}
body.light-mode .slovra-simple-focus,body.light .slovra-simple-focus{
  background:
    radial-gradient(520px 260px at -5% 0%,rgba(126,82,255,.14),transparent 61%),
    radial-gradient(430px 230px at 105% 105%,rgba(20,203,229,.11),transparent 60%),
    linear-gradient(145deg,#fffaff,#f4f7fb)!important;
  border-color:rgba(129,84,216,.16)!important;
}

/* Keep the animated RGB primary CTA, make it more saturated. */
.slovra-simple-continue{
  background:linear-gradient(110deg,#7246f5 0%,#c94ee8 22%,#19bedd 46%,#38c96c 67%,#ff9d26 84%,#f5577f 100%)!important;
  background-size:320% 320%!important;
  animation:slovraP12RgbShift 9s ease-in-out infinite!important;
  box-shadow:0 14px 32px rgba(0,0,0,.25),0 8px 28px rgba(120,80,255,.18)!important;
}

/* Core home actions are genuinely colorful surfaces again. */
.slovra-simple-action.tone-units{
  --p1-action:#a58bff;--p1-action-glow:rgba(194,157,255,.40);
  --icon-main:#fff;--icon-accent:#e9dcff;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(135deg,var(--p13-purple-1),var(--p13-purple-2))!important;
  border-color:rgba(218,201,255,.30)!important;color:#fff!important;
  box-shadow:0 14px 28px rgba(101,71,232,.20)!important;
}
.slovra-simple-action.tone-review{
  --p1-action:#ffcb61;--p1-action-glow:rgba(255,194,73,.38);
  --icon-main:#fff;--icon-accent:#fff0bc;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(135deg,var(--p13-orange-1),var(--p13-orange-2))!important;
  border-color:rgba(255,224,156,.30)!important;color:#fff!important;
  box-shadow:0 14px 28px rgba(240,140,0,.18)!important;
}
.slovra-simple-action.tone-social{
  --p1-action:#ff7dbd;--p1-action-glow:rgba(255,109,185,.38);
  --icon-main:#fff;--icon-accent:#ffd8ef;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(135deg,var(--p13-pink-1),var(--p13-pink-2))!important;
  border-color:rgba(255,190,229,.27)!important;color:#fff!important;
  box-shadow:0 14px 28px rgba(214,51,132,.18)!important;
}
.slovra-simple-action.tone-speech{
  --p1-action:#54e8f3;--p1-action-glow:rgba(56,213,236,.37);
  --icon-main:#fff;--icon-accent:#d4fbff;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(135deg,var(--p13-cyan-1),var(--p13-cyan-2))!important;
  border-color:rgba(179,244,255,.28)!important;color:#fff!important;
  box-shadow:0 14px 28px rgba(28,176,246,.17)!important;
}
body.light-mode .slovra-simple-action.tone-units,body.light .slovra-simple-action.tone-units,
body.light-mode .slovra-simple-action.tone-review,body.light .slovra-simple-action.tone-review,
body.light-mode .slovra-simple-action.tone-social,body.light .slovra-simple-action.tone-social,
body.light-mode .slovra-simple-action.tone-speech,body.light .slovra-simple-action.tone-speech{
  color:#fff!important;
}
.slovra-simple-action i{
  background:rgba(255,255,255,.17)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13)!important;
}
.slovra-simple-action:hover{filter:saturate(1.10) brightness(1.04)!important;transform:translateY(-3px) scale(1.01)!important}

/* Stats are colorful mini-pills instead of gray chips. */
.slovra-simple-stats>span:nth-child(1){background:linear-gradient(135deg,rgba(255,118,75,.19),rgba(255,181,65,.09))!important;border-color:rgba(255,136,73,.22)!important}
.slovra-simple-stats>span:nth-child(2){background:linear-gradient(135deg,rgba(35,194,227,.19),rgba(81,125,255,.09))!important;border-color:rgba(44,196,230,.22)!important}
.slovra-simple-stats>span:nth-child(3){background:linear-gradient(135deg,rgba(88,204,114,.18),rgba(43,191,151,.09))!important;border-color:rgba(88,204,114,.22)!important}
body.light-mode .slovra-simple-stats>span:nth-child(1),body.light .slovra-simple-stats>span:nth-child(1){background:linear-gradient(135deg,#fff0e9,#fff9ed)!important}
body.light-mode .slovra-simple-stats>span:nth-child(2),body.light .slovra-simple-stats>span:nth-child(2){background:linear-gradient(135deg,#eafaff,#f0f4ff)!important}
body.light-mode .slovra-simple-stats>span:nth-child(3),body.light .slovra-simple-stats>span:nth-child(3){background:linear-gradient(135deg,#eefbef,#effaf7)!important}

/* Unit cards: strong themed folder cards. */
.slovra-preview-unit,.slovra-preview-unit.theme-0,.slovra-preview-unit.theme-1,.slovra-preview-unit.theme-2,.slovra-preview-unit.theme-3{
  color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.19)!important;
}
.slovra-preview-unit.theme-0{
  --unit-accent:#c9b9ff;--unit-soft:rgba(255,255,255,.13);--icon-main:#fff;--icon-accent:#e9e1ff;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(145deg,#5d45d9 0%,#8a62f2 58%,#a774ff 100%)!important;
}
.slovra-preview-unit.theme-1{
  --unit-accent:#b7f7ff;--unit-soft:rgba(255,255,255,.13);--icon-main:#fff;--icon-accent:#dcfbff;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(145deg,#087f8c 0%,#12a9c0 48%,#1cb0f6 100%)!important;
}
.slovra-preview-unit.theme-2{
  --unit-accent:#fff0bc;--unit-soft:rgba(255,255,255,.13);--icon-main:#fff;--icon-accent:#fff5d4;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(145deg,#db7d09 0%,#f29c19 50%,#ffb938 100%)!important;
}
.slovra-preview-unit.theme-3{
  --unit-accent:#ffd3e6;--unit-soft:rgba(255,255,255,.13);--icon-main:#fff;--icon-accent:#ffe7f1;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(145deg,#c12c78 0%,#dc4c91 50%,#8d54ea 100%)!important;
}
body.light-mode .slovra-preview-unit.theme-0,body.light .slovra-preview-unit.theme-0{background:linear-gradient(145deg,#6650df,#9a70fa)!important}
body.light-mode .slovra-preview-unit.theme-1,body.light .slovra-preview-unit.theme-1{background:linear-gradient(145deg,#078994,#1ab6e8)!important}
body.light-mode .slovra-preview-unit.theme-2,body.light .slovra-preview-unit.theme-2{background:linear-gradient(145deg,#de800d,#f6ae28)!important}
body.light-mode .slovra-preview-unit.theme-3,body.light .slovra-preview-unit.theme-3{background:linear-gradient(145deg,#c8327e,#9257e7)!important}
.slovra-preview-unit:before{
  background:rgba(255,255,255,.18)!important;
  border:0!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.11)!important;
}
.slovra-preview-unit:after{background:rgba(255,255,255,.17)!important}
.slovra-preview-unit .card-icon-circle{
  background:rgba(255,255,255,.17)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.slovra-preview-unit>div:not(.card-icon-circle):not(.test-count){color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.12)!important}
.slovra-preview-unit .test-count{color:rgba(255,255,255,.80)!important}

/* Tool dock: three colorful equal tiles, not neutral buttons. */
.slovra-tool-dock{
  background:linear-gradient(145deg,rgba(34,32,38,.88),rgba(25,25,27,.91))!important;
  border:1px solid rgba(159,112,255,.16)!important;
  border-radius:24px!important;
  padding:9px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
body.light-mode .slovra-tool-dock,body.light .slovra-tool-dock{
  background:linear-gradient(145deg,#fbf8ff,#f2f6fb)!important;
  border-color:rgba(120,77,213,.12)!important;
}
#screen-home .slovra-tool-dock button:nth-child(1){
  --tool:#c89fff;--tool-glow:rgba(183,105,255,.34);--icon-main:#fff;--icon-accent:#f0e4ff;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(135deg,#7047d9,#ab60e8)!important;border-color:rgba(238,213,255,.24)!important;color:#fff!important;
}
#screen-home .slovra-tool-dock button:nth-child(2){
  --tool:#ffe079;--tool-glow:rgba(255,178,53,.32);--icon-main:#fff;--icon-accent:#fff1bd;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(135deg,#e78212,#ffb238)!important;border-color:rgba(255,235,175,.25)!important;color:#fff!important;
}
#screen-home .slovra-tool-dock button:nth-child(3){
  --tool:#99f3ff;--tool-glow:rgba(41,208,232,.34);--icon-main:#fff;--icon-accent:#dcfbff;--icon-soft:rgba(255,255,255,.16);
  background:linear-gradient(135deg,#07818c,#1bb8eb)!important;border-color:rgba(188,248,255,.25)!important;color:#fff!important;
}
body.light-mode #screen-home .slovra-tool-dock button:nth-child(1),body.light #screen-home .slovra-tool-dock button:nth-child(1){background:linear-gradient(135deg,#7750dc,#ae66e9)!important;color:#fff!important}
body.light-mode #screen-home .slovra-tool-dock button:nth-child(2),body.light #screen-home .slovra-tool-dock button:nth-child(2){background:linear-gradient(135deg,#df8014,#f8ac31)!important;color:#fff!important}
body.light-mode #screen-home .slovra-tool-dock button:nth-child(3),body.light #screen-home .slovra-tool-dock button:nth-child(3){background:linear-gradient(135deg,#078793,#1ab4e7)!important;color:#fff!important}
#screen-home .slovra-tool-dock span,#screen-home .slovra-tool-dock button:nth-child(1) span,#screen-home .slovra-tool-dock button:nth-child(2) span,#screen-home .slovra-tool-dock button:nth-child(3) span{
  background:rgba(255,255,255,.17)!important;color:#fff!important;border-color:rgba(255,255,255,.22)!important;
}
#screen-home .slovra-tool-dock b{color:#fff!important}

/* Keep SVGs visually richer: stronger secondary color and fill. */
.slovra-icon{filter:drop-shadow(0 1px 0 rgba(255,255,255,.04))}
.slovra-simple-action .slovra-icon,.slovra-preview-unit .slovra-icon,.slovra-tool-dock .slovra-icon{--icon-soft:rgba(255,255,255,.17)!important}

@media(max-width:720px){
  #screen-home{
    background:
      radial-gradient(520px 310px at -12% 2%,rgba(136,86,255,.20),transparent 58%),
      radial-gradient(470px 280px at 112% 6%,rgba(21,203,231,.15),transparent 58%),
      linear-gradient(180deg,#111214,#161618 52%,#101012)!important;
  }
  body.light-mode #screen-home,body.light #screen-home,html[data-theme="light"] #screen-home{
    background:
      radial-gradient(520px 310px at -12% 2%,rgba(136,86,255,.14),transparent 58%),
      radial-gradient(470px 280px at 112% 6%,rgba(21,203,231,.11),transparent 58%),
      linear-gradient(180deg,#f7f5fb,#f2f4f8)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #screen-home.slovra-home-simple .overall-progress-fill{animation:none!important}
}
body.reduce-motion #screen-home.slovra-home-simple .overall-progress-fill,.reduce-motion #screen-home.slovra-home-simple .overall-progress-fill{animation:none!important}