/* Slovra V6 — PART 1.1 COLOR HOTFIX
   Restores Slovra's playful visual energy without returning to noisy rainbow UI. */
:root{
  --p1-bg:#101826;
  --p1-surface:#182334;
  --p1-surface-2:#202e42;
  --p1-surface-3:#273850;
  --p1-line:rgba(167,188,219,.16);
  --p1-text-main:#f5f8ff;
  --p1-text-muted:#aab7ca;
  --p1-accent:#79dc48;
  --p1-purple:#9b8cff;
  --p1-blue:#55b8ff;
  --p1-cyan:#50d4e8;
  --p1-green:#77da74;
  --p1-amber:#ffbf66;
  --p1-coral:#ff806c;
  --p1-pink:#ff78b8;
  --p1-shadow:0 18px 48px rgba(2,10,25,.27);
}
body.light-mode,body.light,html[data-theme="light"]{
  --p1-bg:#eef4fb;
  --p1-surface:#fbfdff;
  --p1-surface-2:#edf3fb;
  --p1-surface-3:#e5edf8;
  --p1-line:rgba(63,88,122,.13);
  --p1-text-main:#172234;
  --p1-text-muted:#687890;
  --p1-shadow:0 18px 44px rgba(61,81,115,.10);
}
body{background-color:var(--p1-bg)!important}
#app-container{background-color:var(--p1-bg)!important}

/* Softly colorful canvas — not pure black / white. */
#screen-home{
  background:
    radial-gradient(900px 480px at 8% -8%,rgba(155,140,255,.18),transparent 62%),
    radial-gradient(760px 430px at 96% 7%,rgba(80,212,232,.13),transparent 60%),
    linear-gradient(180deg,#101826 0%,#111b2a 48%,#0f1825 100%)!important;
}
body.light-mode #screen-home,body.light #screen-home,html[data-theme="light"] #screen-home{
  background:
    radial-gradient(820px 430px at 4% -5%,rgba(155,140,255,.14),transparent 62%),
    radial-gradient(720px 390px at 98% 5%,rgba(80,212,232,.13),transparent 60%),
    linear-gradient(180deg,#f4f7ff 0%,#eef5fb 52%,#f6f8fc 100%)!important;
}

/* Floating glass keeps color instead of turning gray/white. */
.game-header,.settings-topbar,.contribute-topbar,.v28-topbar,.v31-topbar,.v32-topbar,.v33-top,.v35-top,.v4145-top,.v4650-top,.v70-screen-head,.v30-topbar{
  background:linear-gradient(135deg,rgba(29,42,62,.92),rgba(22,33,51,.86))!important;
  border-color:rgba(160,185,220,.17)!important;
  box-shadow:0 12px 34px rgba(5,13,28,.23)!important;
}
body.light-mode .game-header,body.light-mode .settings-topbar,body.light-mode .contribute-topbar,body.light-mode .v28-topbar,body.light-mode .v70-screen-head,
body.light .game-header,body.light .settings-topbar,body.light .contribute-topbar,html[data-theme="light"] .game-header{
  background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(241,246,255,.88))!important;
  border-color:rgba(78,106,145,.13)!important;
  box-shadow:0 12px 34px rgba(66,84,120,.10)!important;
}

/* Hero gets a quiet Slovra identity instead of a flat panel. */
#screen-home.slovra-home-simple .hero-banner{
  background:
    radial-gradient(130% 180% at 100% 0%,rgba(80,212,232,.15),transparent 48%),
    linear-gradient(135deg,color-mix(in srgb,var(--p1-surface) 90%,#806cff 10%),var(--p1-surface))!important;
  border-color:rgba(155,140,255,.22)!important;
  box-shadow:0 16px 38px rgba(4,12,27,.13)!important;
}
body.light-mode #screen-home.slovra-home-simple .hero-banner,
body.light #screen-home.slovra-home-simple .hero-banner{
  background:
    radial-gradient(130% 180% at 100% 0%,rgba(80,212,232,.16),transparent 48%),
    linear-gradient(135deg,#f8f6ff,#f4fbff)!important;
  border-color:rgba(119,101,224,.17)!important;
}

/* Today block keeps depth and color. */
.slovra-simple-focus{
  background:
    radial-gradient(620px 280px at 0% 0%,rgba(155,140,255,.11),transparent 62%),
    linear-gradient(145deg,color-mix(in srgb,var(--p1-surface) 95%,#4caee8 5%),var(--p1-surface))!important;
  border-color:rgba(137,158,195,.18)!important;
}
body.light-mode .slovra-simple-focus,body.light .slovra-simple-focus{
  background:
    radial-gradient(520px 260px at 0% 0%,rgba(155,140,255,.11),transparent 62%),
    linear-gradient(145deg,#ffffff,#f7faff)!important;
}
.slovra-simple-continue{
  background:linear-gradient(135deg,#7b6cf6 0%,#5b79ee 55%,#4da9ef 100%)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(78,92,231,.22)!important;
}
body.light-mode .slovra-simple-continue,body.light .slovra-simple-continue,html[data-theme="light"] .slovra-simple-continue{
  background:linear-gradient(135deg,#7263ef 0%,#536fe4 58%,#3f9fe6 100%)!important;
  color:#fff!important;
}
.slovra-simple-continue b{background:rgba(255,255,255,.15)!important;--icon-main:#fff;--icon-accent:#b8f0ff;--icon-soft:rgba(255,255,255,.10)}
.slovra-simple-continue>span:last-child{--icon-main:#fff;--icon-accent:#c7f4ff}

/* Action cards: each action has a controlled identity color. */
.slovra-simple-action{position:relative!important;isolation:isolate!important;overflow:hidden!important}
.slovra-simple-action:before{content:"";position:absolute;inset:auto -35px -52px auto;width:120px;height:120px;border-radius:50%;background:var(--p1-action-glow,transparent);filter:blur(2px);opacity:.72;z-index:-1}
.slovra-simple-action.tone-units{
  --p1-action:#9b8cff;--p1-action-glow:rgba(155,140,255,.22);--icon-main:#a99cff;--icon-accent:#d8d1ff;--icon-soft:rgba(155,140,255,.16);
  background:linear-gradient(145deg,color-mix(in srgb,var(--p1-surface-2) 83%,#8e7df5 17%),var(--p1-surface-2))!important;
  border-color:rgba(155,140,255,.30)!important;
}
.slovra-simple-action.tone-review{
  --p1-action:#75d87c;--p1-action-glow:rgba(117,216,124,.20);--icon-main:#78de83;--icon-accent:#bef6c2;--icon-soft:rgba(117,216,124,.15);
  background:linear-gradient(145deg,color-mix(in srgb,var(--p1-surface-2) 84%,#66cf77 16%),var(--p1-surface-2))!important;
  border-color:rgba(117,216,124,.28)!important;
}
.slovra-simple-action.tone-social{
  --p1-action:#55b8ff;--p1-action-glow:rgba(85,184,255,.21);--icon-main:#63beff;--icon-accent:#b9e4ff;--icon-soft:rgba(85,184,255,.15);
  background:linear-gradient(145deg,color-mix(in srgb,var(--p1-surface-2) 84%,#4aaaf5 16%),var(--p1-surface-2))!important;
  border-color:rgba(85,184,255,.28)!important;
}
.slovra-simple-action.tone-speech{
  --p1-action:#ff806c;--p1-action-glow:rgba(255,128,108,.20);--icon-main:#ff8a76;--icon-accent:#ffd0c7;--icon-soft:rgba(255,128,108,.15);
  background:linear-gradient(145deg,color-mix(in srgb,var(--p1-surface-2) 84%,#ef745f 16%),var(--p1-surface-2))!important;
  border-color:rgba(255,128,108,.27)!important;
}
body.light-mode .slovra-simple-action.tone-units,body.light .slovra-simple-action.tone-units{background:linear-gradient(145deg,#f1efff,#fbfbff)!important}
body.light-mode .slovra-simple-action.tone-review,body.light .slovra-simple-action.tone-review{background:linear-gradient(145deg,#edf9ef,#fbfefb)!important}
body.light-mode .slovra-simple-action.tone-social,body.light .slovra-simple-action.tone-social{background:linear-gradient(145deg,#edf8ff,#fbfdff)!important}
body.light-mode .slovra-simple-action.tone-speech,body.light .slovra-simple-action.tone-speech{background:linear-gradient(145deg,#fff1ee,#fffaf9)!important}
.slovra-simple-action i{background:color-mix(in srgb,var(--p1-action,#9b8cff) 15%,var(--p1-surface))!important;color:var(--p1-action,#9b8cff)!important;border:1px solid color-mix(in srgb,var(--p1-action,#9b8cff) 30%,transparent)!important}
.slovra-simple-action.active{border-color:var(--p1-action,var(--p1-accent))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--p1-action,var(--p1-accent)) 13%,transparent)!important}

/* Stat icons regain semantic colors. */
#screen-home .streak-area,.slovra-simple-stats>span:nth-child(1){--icon-main:#ff885c;--icon-accent:#ffc45f;--icon-soft:rgba(255,136,92,.16)}
#screen-home .xp-area,.slovra-simple-stats>span:nth-child(2){--icon-main:#49c8e9;--icon-accent:#9cecff;--icon-soft:rgba(73,200,233,.16)}
#screen-home .heart-area{--icon-main:#ff6f91;--icon-accent:#ffadc0;--icon-soft:rgba(255,111,145,.16)}
#screen-home .header-stat-icon,.slovra-simple-stats i{color:var(--icon-main,var(--p1-text-muted))!important}

/* Unit cards — stable folder layout with restrained theme color. */
.slovra-unit-preview{align-items:stretch!important}
.slovra-preview-unit,.slovra-preview-unit.theme-0,.slovra-preview-unit.theme-1,.slovra-preview-unit.theme-2,.slovra-preview-unit.theme-3{
  --unit-accent:#9b8cff;--unit-soft:rgba(155,140,255,.14);
  height:156px!important;min-height:156px!important;
  padding:67px 17px 16px!important;
  overflow:hidden!important;
  justify-content:flex-end!important;
  background:
    radial-gradient(150px 100px at 100% 0%,var(--unit-soft),transparent 72%),
    linear-gradient(150deg,color-mix(in srgb,var(--p1-surface) 91%,var(--unit-accent) 9%),var(--p1-surface))!important;
  border:1px solid color-mix(in srgb,var(--unit-accent) 32%,var(--p1-line))!important;
  box-shadow:0 12px 25px rgba(3,11,25,.10)!important;
}
.slovra-preview-unit.theme-0{--unit-accent:#9b8cff;--unit-soft:rgba(155,140,255,.17);--icon-main:#9b8cff;--icon-accent:#d3ccff;--icon-soft:rgba(155,140,255,.18)}
.slovra-preview-unit.theme-1{--unit-accent:#4db9e8;--unit-soft:rgba(77,185,232,.16);--icon-main:#4db9e8;--icon-accent:#b6ebff;--icon-soft:rgba(77,185,232,.17)}
.slovra-preview-unit.theme-2{--unit-accent:#f5ae55;--unit-soft:rgba(245,174,85,.17);--icon-main:#f5ae55;--icon-accent:#ffe0ad;--icon-soft:rgba(245,174,85,.18)}
.slovra-preview-unit.theme-3{--unit-accent:#ef729f;--unit-soft:rgba(239,114,159,.16);--icon-main:#ef729f;--icon-accent:#ffc3d7;--icon-soft:rgba(239,114,159,.17)}
.slovra-preview-unit:before{
  content:""!important;position:absolute!important;left:0!important;top:0!important;width:54%!important;height:24px!important;
  border:0!important;border-radius:0 0 13px 0!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--unit-accent) 25%,var(--p1-surface)),color-mix(in srgb,var(--unit-accent) 10%,var(--p1-surface)))!important;
  opacity:1!important;
}
.slovra-preview-unit:after{
  content:"";position:absolute;left:17px;right:17px;top:53px;height:1px;background:color-mix(in srgb,var(--unit-accent) 22%,transparent)
}
.slovra-preview-unit .card-icon-circle{
  top:13px!important;right:14px!important;width:39px!important;height:39px!important;
  background:color-mix(in srgb,var(--unit-accent) 16%,var(--p1-surface-2))!important;
  color:var(--unit-accent)!important;border:1px solid color-mix(in srgb,var(--unit-accent) 34%,transparent)!important;
}
.slovra-preview-unit .card-icon-circle .slovra-icon{width:21px!important;height:21px!important}
.slovra-preview-unit>div:not(.card-icon-circle):not(.test-count){font-size:18px!important;line-height:1.08!important;min-height:38px!important;display:flex!important;align-items:flex-end!important}
.slovra-preview-unit .test-count{font-size:10px!important;color:color-mix(in srgb,var(--p1-text-main) 55%,var(--p1-text-muted))!important}
body.light-mode .slovra-preview-unit,body.light .slovra-preview-unit{
  background:
    radial-gradient(150px 100px at 100% 0%,var(--unit-soft),transparent 72%),
    linear-gradient(150deg,color-mix(in srgb,#fff 91%,var(--unit-accent) 9%),#fbfdff)!important;
  box-shadow:0 11px 24px rgba(71,88,120,.08)!important;
}

/* Three quick tools stay equal, but each gets life and a colorful SVG. */
#screen-home .slovra-tool-dock button{position:relative!important;overflow:hidden!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}
#screen-home .slovra-tool-dock button:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-38px;bottom:-46px;background:var(--tool-glow,transparent);pointer-events:none}
#screen-home .slovra-tool-dock button:nth-child(1){--tool:#9b8cff;--tool-glow:rgba(155,140,255,.17);--icon-main:#9b8cff;--icon-accent:#d6d0ff;--icon-soft:rgba(155,140,255,.16);background:linear-gradient(145deg,color-mix(in srgb,var(--p1-surface) 91%,#9b8cff 9%),var(--p1-surface))!important;border-color:rgba(155,140,255,.25)!important}
#screen-home .slovra-tool-dock button:nth-child(2){--tool:#5bcf8c;--tool-glow:rgba(91,207,140,.16);--icon-main:#5bcf8c;--icon-accent:#b9f1cf;--icon-soft:rgba(91,207,140,.16);background:linear-gradient(145deg,color-mix(in srgb,var(--p1-surface) 91%,#5bcf8c 9%),var(--p1-surface))!important;border-color:rgba(91,207,140,.24)!important}
#screen-home .slovra-tool-dock button:nth-child(3){--tool:#55b8ff;--tool-glow:rgba(85,184,255,.17);--icon-main:#55b8ff;--icon-accent:#bee5ff;--icon-soft:rgba(85,184,255,.16);background:linear-gradient(145deg,color-mix(in srgb,var(--p1-surface) 91%,#55b8ff 9%),var(--p1-surface))!important;border-color:rgba(85,184,255,.25)!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(145deg,#f3f1ff,#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(145deg,#effaf4,#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(145deg,#eef8ff,#fff)!important}
#screen-home .slovra-tool-dock button:hover{transform:translateY(-2px)!important;box-shadow:0 10px 22px color-mix(in srgb,var(--tool) 13%,transparent)!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:color-mix(in srgb,var(--tool) 14%,var(--p1-surface-2))!important;color:var(--tool)!important;border:1px solid color-mix(in srgb,var(--tool) 28%,transparent)!important
}

/* Home feature SVGs get contextual colors instead of gray line art. */
#community-home-card{--icon-main:#f0ad43;--icon-accent:#ffe09a;--icon-soft:rgba(240,173,67,.15)}
#tools-home-card{--icon-main:#58bfff;--icon-accent:#bee9ff;--icon-soft:rgba(88,191,255,.14)}
#v14-social-home-card,#v6170-social-home{--icon-main:#6ca8ff;--icon-accent:#c1d9ff;--icon-soft:rgba(108,168,255,.14)}
#v15-reading-home{--icon-main:#a18cff;--icon-accent:#d8d0ff;--icon-soft:rgba(161,140,255,.14)}
#v16-writing-home{--icon-main:#ff82a6;--icon-accent:#ffc7d6;--icon-soft:rgba(255,130,166,.14)}
#v17-program-home{--icon-main:#ffb45f;--icon-accent:#ffe0ae;--icon-soft:rgba(255,180,95,.14)}
#v6170-speech-home{--icon-main:#ff806c;--icon-accent:#ffd0c7;--icon-soft:rgba(255,128,108,.14)}
#ai-teacher-home-card{--icon-main:#8e82ff;--icon-accent:#62d5ff;--icon-soft:rgba(142,130,255,.14)}
#learning-home-card{--icon-main:#64d37e;--icon-accent:#baf1c5;--icon-soft:rgba(100,211,126,.14)}

/* Default SVG palette: still colorful when a component does not provide its own. */
.slovra-icon{--icon-main:currentColor;--icon-accent:color-mix(in srgb,currentColor 55%,#66cfff 45%);--icon-soft:color-mix(in srgb,currentColor 14%,transparent)}

@media(max-width:959px){
  .slovra-preview-unit,.slovra-preview-unit.theme-0,.slovra-preview-unit.theme-1,.slovra-preview-unit.theme-2,.slovra-preview-unit.theme-3{height:138px!important;min-height:138px!important;padding:61px 13px 13px!important}
  .slovra-preview-unit:before{height:21px!important;width:58%!important}
  .slovra-preview-unit:after{left:13px;right:13px;top:49px}
  .slovra-preview-unit .card-icon-circle{top:11px!important;right:11px!important;width:34px!important;height:34px!important}
  .slovra-preview-unit>div:not(.card-icon-circle):not(.test-count){font-size:15px!important;min-height:32px!important}
}
@media(max-width:430px){
  #screen-home{background:linear-gradient(180deg,#111a29 0%,#0f1826 100%)!important}
  body.light-mode #screen-home,body.light #screen-home,html[data-theme="light"] #screen-home{background:linear-gradient(180deg,#f2f6fd 0%,#eef4fa 100%)!important}
  .slovra-simple-action:before{width:92px;height:92px;right:-34px;bottom:-44px}
}