/* Slovra V6 — PART 1.4
   Desktop full-bleed canvas + light-mode contrast + Nunito Bold polish.
   Keeps Part 1.3 colors intact. */

:root{
  --p14-font:'Nunito',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* --------------------------------------------------------------------------
   Typography: keep the bold hierarchy, but use Nunito rather than the heavy
   system/display face. 700/800 are used instead of synthetic 850/950 weights.
   -------------------------------------------------------------------------- */
#screen-home,
#screen-home button,
#screen-home input,
#screen-home select,
#screen-home textarea{
  font-family:var(--p14-font)!important;
}
#screen-home.slovra-home-simple #welcome-msg{
  font-family:var(--p14-font)!important;
  font-weight:800!important;
  letter-spacing:-.026em!important;
}
#screen-home .slovra-simple-continue,
#screen-home .slovra-simple-action>span,
#screen-home .slovra-preview-head strong,
#screen-home .slovra-preview-unit>div:not(.card-icon-circle):not(.test-count),
#screen-home .slovra-tool-dock b,
#screen-home .slovra-simple-stats b{
  font-family:var(--p14-font)!important;
  font-weight:800!important;
}
#screen-home .slovra-simple-top>span,
#screen-home .progress-label,
#screen-home .slovra-preview-unit .test-count,
#screen-home .slovra-preview-head button,
#screen-home .streak-area,
#screen-home .xp-area,
#screen-home .heart-area,
#screen-home .level-area{
  font-family:var(--p14-font)!important;
  font-weight:700!important;
}

/* --------------------------------------------------------------------------
   Desktop: one continuous canvas. The previous screen gradient lived only
   inside the max-width app shell, exposing flat side bands on wide monitors.
   Draw the atmosphere on the viewport and let Home sit transparently on it.
   -------------------------------------------------------------------------- */
@media (min-width:960px){
  html,
  body{
    background-color:#111214!important;
    background-image:
      radial-gradient(820px 500px at 8% 3%,rgba(136,86,255,.22),transparent 61%),
      radial-gradient(760px 460px at 94% 5%,rgba(20,205,235,.18),transparent 61%),
      radial-gradient(700px 420px at 79% 82%,rgba(255,78,145,.12),transparent 65%),
      radial-gradient(620px 380px at 18% 95%,rgba(255,174,62,.10),transparent 66%),
      linear-gradient(180deg,#111214 0%,#171719 48%,#101012 100%)!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-attachment:fixed!important;
  }
  #app-container{
    background:transparent!important;
    background-color:transparent!important;
  }
  #screen-home{
    background:transparent!important;
  }

  body.light-mode,
  body.light,
  html[data-theme="light"],
  html[data-theme="light"] body{
    background-color:#f5f4f8!important;
    background-image:
      radial-gradient(820px 500px at 8% 3%,rgba(130,83,255,.17),transparent 61%),
      radial-gradient(760px 460px at 94% 5%,rgba(27,196,225,.14),transparent 61%),
      radial-gradient(700px 420px at 79% 82%,rgba(255,86,151,.09),transparent 65%),
      radial-gradient(620px 380px at 18% 95%,rgba(255,174,62,.08),transparent 66%),
      linear-gradient(180deg,#f7f5fb 0%,#f1f3f7 52%,#f7f5f8 100%)!important;
  }
  body.light-mode #app-container,
  body.light #app-container,
  html[data-theme="light"] #app-container,
  body.light-mode #screen-home,
  body.light #screen-home,
  html[data-theme="light"] #screen-home{
    background:transparent!important;
    background-color:transparent!important;
  }
}

/* --------------------------------------------------------------------------
   Light mode: preserve the saturated Part 1.3 cards. Earlier high-specificity
   light rules were turning the cards white while their labels stayed white.
   -------------------------------------------------------------------------- */
body.light-mode #screen-home .slovra-simple-action.tone-units,
body.light #screen-home .slovra-simple-action.tone-units,
html[data-theme="light"] #screen-home .slovra-simple-action.tone-units{
  background:linear-gradient(135deg,#6547e8,#9b67ff)!important;
  color:#fff!important;
  border-color:rgba(101,71,232,.20)!important;
}
body.light-mode #screen-home .slovra-simple-action.tone-review,
body.light #screen-home .slovra-simple-action.tone-review,
html[data-theme="light"] #screen-home .slovra-simple-action.tone-review{
  background:linear-gradient(135deg,#ee8900,#ffb42a)!important;
  color:#fff!important;
  border-color:rgba(238,137,0,.20)!important;
}
body.light-mode #screen-home .slovra-simple-action.tone-social,
body.light #screen-home .slovra-simple-action.tone-social,
html[data-theme="light"] #screen-home .slovra-simple-action.tone-social{
  background:linear-gradient(135deg,#d63384,#8e54ec)!important;
  color:#fff!important;
  border-color:rgba(214,51,132,.18)!important;
}
body.light-mode #screen-home .slovra-simple-action.tone-speech,
body.light #screen-home .slovra-simple-action.tone-speech,
html[data-theme="light"] #screen-home .slovra-simple-action.tone-speech{
  background:linear-gradient(135deg,#078792,#1cb0f6)!important;
  color:#fff!important;
  border-color:rgba(7,135,146,.18)!important;
}
body.light-mode #screen-home .slovra-simple-action>span,
body.light #screen-home .slovra-simple-action>span,
html[data-theme="light"] #screen-home .slovra-simple-action>span,
body.light-mode #screen-home .slovra-simple-action i,
body.light #screen-home .slovra-simple-action i,
html[data-theme="light"] #screen-home .slovra-simple-action i{
  color:#fff!important;
}

/* Unit preview must stay colorful in light mode too. The base Part 1 selector
   had #screen-home specificity and was winning over the color layer. */
body.light-mode #screen-home .slovra-preview-unit.theme-0,
body.light #screen-home .slovra-preview-unit.theme-0,
html[data-theme="light"] #screen-home .slovra-preview-unit.theme-0{
  background:linear-gradient(145deg,#6650df,#9a70fa)!important;
}
body.light-mode #screen-home .slovra-preview-unit.theme-1,
body.light #screen-home .slovra-preview-unit.theme-1,
html[data-theme="light"] #screen-home .slovra-preview-unit.theme-1{
  background:linear-gradient(145deg,#078994,#1ab6e8)!important;
}
body.light-mode #screen-home .slovra-preview-unit.theme-2,
body.light #screen-home .slovra-preview-unit.theme-2,
html[data-theme="light"] #screen-home .slovra-preview-unit.theme-2{
  background:linear-gradient(145deg,#de800d,#f6ae28)!important;
}
body.light-mode #screen-home .slovra-preview-unit.theme-3,
body.light #screen-home .slovra-preview-unit.theme-3,
html[data-theme="light"] #screen-home .slovra-preview-unit.theme-3{
  background:linear-gradient(145deg,#c8327e,#9257e7)!important;
}
body.light-mode #screen-home .slovra-preview-unit>div:not(.card-icon-circle):not(.test-count),
body.light #screen-home .slovra-preview-unit>div:not(.card-icon-circle):not(.test-count),
html[data-theme="light"] #screen-home .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;
}
body.light-mode #screen-home .slovra-preview-unit .test-count,
body.light #screen-home .slovra-preview-unit .test-count,
html[data-theme="light"] #screen-home .slovra-preview-unit .test-count{
  color:rgba(255,255,255,.84)!important;
}
body.light-mode #screen-home .slovra-preview-unit .card-icon-circle,
body.light #screen-home .slovra-preview-unit .card-icon-circle,
html[data-theme="light"] #screen-home .slovra-preview-unit .card-icon-circle{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
}
body.light-mode #screen-home .slovra-preview-unit:before,
body.light #screen-home .slovra-preview-unit:before,
html[data-theme="light"] #screen-home .slovra-preview-unit:before{
  background:rgba(255,255,255,.18)!important;
  border:0!important;
}

/* Tool dock labels also use Nunito Bold without synthetic ultra-heavy weight. */
#screen-home .slovra-tool-dock b{font-weight:800!important}

/* Slightly soften the biggest labels: still confident, less blocky. */
#screen-home .slovra-simple-action>span{letter-spacing:-.015em!important}
#screen-home .slovra-preview-unit>div:not(.card-icon-circle):not(.test-count){letter-spacing:-.012em!important}