/* Slovra V6 — PART 1
   Global icon language + floating top bars + home redesign.
   Loaded after Rev5.2 so this file is the final UI authority for these surfaces. */
:root{
  --p1-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Arial,sans-serif;
  --p1-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Arial,sans-serif;
  --p1-bg:#0e1012;
  --p1-surface:#15181b;
  --p1-surface-2:#1b1f23;
  --p1-line:rgba(255,255,255,.095);
  --p1-text-main:#f7f8f8;
  --p1-text-muted:#99a1a8;
  --p1-accent:#58cc02;
  --p1-shadow:0 18px 48px rgba(0,0,0,.22);
}
body.light-mode,body.light,html[data-theme="light"]{
  --p1-bg:#f5f6f6;
  --p1-surface:#ffffff;
  --p1-surface-2:#f0f2f2;
  --p1-line:rgba(19,31,36,.11);
  --p1-text-main:#111517;
  --p1-text-muted:#667078;
  --p1-shadow:0 16px 44px rgba(23,38,44,.09);
}
.slovra-icon{width:1em;height:1em;display:block;overflow:visible;color:currentColor;pointer-events:none;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   Shared floating top bar language
   -------------------------------------------------------------------------- */
.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{
  position:sticky!important;
  top:12px!important;
  z-index:90!important;
  width:min(calc(100% - 28px),1220px)!important;
  max-width:1220px!important;
  margin:12px auto 18px!important;
  border:1px solid var(--p1-line)!important;
  border-radius:22px!important;
  background:color-mix(in srgb,var(--p1-surface) 88%,transparent)!important;
  color:var(--p1-text-main)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.13)!important;
  backdrop-filter:blur(22px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(155%)!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:rgba(255,255,255,.86)!important;
  color:#111517!important;
  border-color:rgba(31,45,51,.10)!important;
  box-shadow:0 10px 34px rgba(35,52,60,.08)!important;
}

/* Home top bar */
#screen-home .game-header{
  min-height:62px!important;
  padding:8px 12px!important;
  border-bottom:1px solid var(--p1-line)!important;
  gap:12px!important;
  overflow:visible!important;
}
#screen-home .left-header-group{flex:1 1 auto!important;min-width:0!important}
#screen-home .flag-box{
  display:flex!important;align-items:center!important;gap:6px!important;
  min-width:0!important;max-width:100%!important;overflow:visible!important;
  padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important
}
#screen-home .flag-icon-small{width:28px!important;height:28px!important;flex:0 0 28px!important;border:1px solid var(--p1-line)!important}
#screen-home .streak-area,#screen-home .xp-area,#screen-home .heart-area,#screen-home .level-area{
  min-width:0!important;height:36px!important;padding:0 10px!important;border:1px solid var(--p1-line)!important;border-radius:12px!important;
  background:var(--p1-surface-2)!important;color:var(--p1-text-main)!important;font:800 12px/1 var(--p1-text)!important;gap:6px!important;
  box-shadow:none!important
}
#screen-home .header-stat-icon{width:16px!important;height:16px!important;display:grid!important;place-items:center!important;color:var(--p1-text-muted)!important}
#screen-home .header-stat-icon .slovra-icon{width:16px;height:16px}
#screen-home .header-controls{gap:7px!important;align-items:center!important}
#screen-home .v21-header-search,#screen-home .notif-btn{
  width:38px!important;height:38px!important;display:grid!important;place-items:center!important;padding:0!important;margin:0!important;
  border:0!important;background:transparent!important;color:var(--p1-text-main)!important;border-radius:11px!important;font-size:20px!important;box-shadow:none!important
}
#screen-home .v21-header-search:hover,#screen-home .notif-btn:hover{background:var(--p1-surface-2)!important}
#screen-home .v21-header-search .slovra-icon,#screen-home .notif-btn .slovra-icon{width:20px;height:20px}
#screen-home .notification-wrapper{margin:0!important}
#screen-home .header-btn{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:11px!important}
#screen-home .header-btn:hover{background:var(--p1-surface-2)!important}
#screen-home .profile-pic{width:38px!important;height:38px!important;border:1px solid var(--p1-line)!important;box-shadow:none!important;margin:0!important}
#screen-home #header-role-badge{margin:0 1px!important}

/* --------------------------------------------------------------------------
   Home — type scale, controlled widths, neutral visual language
   -------------------------------------------------------------------------- */
#screen-home.slovra-home-simple{font-family:var(--p1-text)!important}
#screen-home.slovra-home-simple .hero-banner-container,
#screen-home.slovra-home-simple .slovra-home-preview,
#screen-home.slovra-home-simple #v21-feature-panel{
  width:min(calc(100% - 28px),1120px)!important;max-width:1120px!important;margin-left:auto!important;margin-right:auto!important
}
#screen-home.slovra-home-simple .slovra-simple-home{
  width:min(calc(100% - 28px),980px)!important;max-width:980px!important;margin-left:auto!important;margin-right:auto!important
}
#screen-home.slovra-home-simple .hero-banner{
  min-height:0!important;padding:24px 26px!important;border:1px solid var(--p1-line)!important;border-radius:26px!important;
  background:var(--p1-surface)!important;box-shadow:none!important
}
#screen-home.slovra-home-simple .hero-banner:after{display:none!important}
#screen-home.slovra-home-simple #welcome-msg{
  margin:0 0 18px!important;font-family:var(--p1-display)!important;font-size:clamp(24px,2.5vw,36px)!important;line-height:1.06!important;
  letter-spacing:-.035em!important;font-weight:850!important;color:var(--p1-text-main)!important
}
#screen-home.slovra-home-simple .overall-progress{height:7px!important;background:var(--p1-surface-2)!important}
#screen-home.slovra-home-simple .overall-progress-fill{background:var(--p1-accent)!important;box-shadow:none!important}
#screen-home.slovra-home-simple .progress-label{font-size:11px!important;font-weight:750!important;color:var(--p1-text-muted)!important;opacity:1!important;margin-top:8px!important}

.slovra-simple-focus{
  padding:20px!important;border:1px solid var(--p1-line)!important;border-radius:28px!important;background:var(--p1-surface)!important;
  box-shadow:var(--p1-shadow)!important;overflow:hidden!important
}
.slovra-simple-top{margin:0 2px 14px!important}
.slovra-simple-top>span{font:850 11px/1 var(--p1-text)!important;letter-spacing:.13em!important;color:var(--p1-text-muted)!important}
.slovra-simple-top button{width:38px!important;height:36px!important;border:0!important;background:transparent!important;color:var(--p1-text-muted)!important;border-radius:11px!important}
.slovra-simple-top button:hover{background:var(--p1-surface-2)!important;color:var(--p1-text-main)!important}
.slovra-simple-top button .slovra-icon{width:20px;height:20px}

.slovra-simple-continue{
  min-height:72px!important;padding:0 22px!important;border:0!important;border-radius:20px!important;
  background:#f5f6f6!important;color:#101315!important;box-shadow:none!important;font-family:var(--p1-display)!important;font-size:19px!important;font-weight:850!important;
  letter-spacing:-.018em!important
}
body.light-mode .slovra-simple-continue,body.light .slovra-simple-continue,html[data-theme="light"] .slovra-simple-continue{background:#111517!important;color:#fff!important}
.slovra-simple-continue span:first-child{gap:13px!important}.slovra-simple-continue b{width:38px!important;height:38px!important;border-radius:12px!important;background:rgba(17,21,23,.08)!important;color:inherit!important}.slovra-simple-continue b .slovra-icon{width:18px;height:18px}
body.light-mode .slovra-simple-continue b,body.light .slovra-simple-continue b{background:rgba(255,255,255,.12)!important}
.slovra-simple-continue>span:last-child .slovra-icon{width:22px;height:22px}

.slovra-simple-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:11px!important;margin-top:14px!important}
.slovra-simple-action,.slovra-simple-action.tone-units,.slovra-simple-action.tone-review,.slovra-simple-action.tone-social,.slovra-simple-action.tone-speech{
  min-height:132px!important;padding:17px!important;border:1px solid var(--p1-line)!important;border-radius:21px!important;
  background:var(--p1-surface-2)!important;color:var(--p1-text-main)!important;box-shadow:none!important;text-align:left!important;
  justify-content:space-between!important;align-items:flex-start!important;transition:transform .16s ease,border-color .16s ease,background .16s ease!important
}
.slovra-simple-action:after{display:none!important}
.slovra-simple-action:hover{transform:translateY(-2px)!important;border-color:color-mix(in srgb,var(--p1-text-main) 24%,transparent)!important}
.slovra-simple-action i{width:44px!important;height:44px!important;border-radius:14px!important;background:var(--p1-surface)!important;color:var(--p1-text-main)!important;font-style:normal!important;display:grid!important;place-items:center!important}
.slovra-simple-action i .slovra-icon{width:22px;height:22px}
.slovra-simple-action>span{font-family:var(--p1-display)!important;font-size:19px!important;line-height:1.05!important;letter-spacing:-.025em!important;font-weight:850!important}
.slovra-simple-action.active{outline:0!important;border-color:var(--p1-accent)!important}

.slovra-simple-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-top:11px!important}
.slovra-simple-stats>span{min-height:42px!important;padding:8px 11px!important;border:1px solid var(--p1-line)!important;border-radius:13px!important;background:transparent!important;color:var(--p1-text-main)!important;gap:7px!important}
.slovra-simple-stats i{width:16px!important;height:16px!important;display:grid!important;place-items:center!important;color:var(--p1-text-muted)!important}.slovra-simple-stats i .slovra-icon{width:16px;height:16px}
.slovra-simple-stats b{font:800 12px/1 var(--p1-text)!important}

/* Units — one calm folder family rather than rainbow cards */
.slovra-home-preview{gap:14px!important}
.slovra-preview-head{padding:0 3px!important}.slovra-preview-head strong{font-family:var(--p1-display)!important;font-size:24px!important;line-height:1!important;letter-spacing:-.035em!important;font-weight:850!important;color:var(--p1-text-main)!important}.slovra-preview-head button{font:800 12px/1 var(--p1-text)!important;color:var(--p1-text-muted)!important}
.slovra-unit-preview{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.slovra-preview-unit,.slovra-preview-unit.theme-0,.slovra-preview-unit.theme-1,.slovra-preview-unit.theme-2,.slovra-preview-unit.theme-3{
  position:relative!important;height:154px!important;min-height:154px!important;padding:25px 18px 16px!important;border:1px solid var(--p1-line)!important;border-radius:19px!important;
  background:var(--p1-surface)!important;color:var(--p1-text-main)!important;box-shadow:none!important;align-items:flex-start!important;justify-content:flex-end!important;text-align:left!important;gap:8px!important;overflow:visible!important
}
.slovra-preview-unit:before{content:"";position:absolute;left:17px;top:-8px;width:74px;height:16px;border:1px solid var(--p1-line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--p1-surface)}
.slovra-preview-unit .card-icon-circle{position:absolute!important;top:20px!important;right:18px!important;width:40px!important;height:40px!important;margin:0!important;border:0!important;border-radius:12px!important;background:var(--p1-surface-2)!important;color:var(--p1-text-muted)!important;display:grid!important;place-items:center!important}
.slovra-preview-unit .card-icon-circle .slovra-icon{width:20px;height:20px}
.slovra-preview-unit>div:not(.card-icon-circle):not(.test-count){width:100%!important;margin:0!important;font-family:var(--p1-display)!important;font-size:17px!important;line-height:1.08!important;letter-spacing:-.022em!important;font-weight:850!important;color:var(--p1-text-main)!important;white-space:normal!important;overflow-wrap:anywhere!important}
.slovra-preview-unit .test-count{margin:0!important;padding:0!important;background:transparent!important;color:var(--p1-text-muted)!important;font:750 10px/1 var(--p1-text)!important;opacity:1!important}

/* Quick tools — exactly three equal centered controls */
#screen-home .slovra-tool-dock{
  width:min(100%,720px)!important;max-width:720px!important;margin:2px auto 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important
}
#screen-home .slovra-tool-dock button{
  min-width:0!important;min-height:90px!important;padding:14px 12px!important;border:1px solid var(--p1-line)!important;border-radius:18px!important;background:var(--p1-surface)!important;color:var(--p1-text-main)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:9px!important;text-align:center!important;box-shadow:none!important
}
#screen-home .slovra-tool-dock button:hover{background:var(--p1-surface-2)!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{
  flex:0 0 36px!important;width:36px!important;height:36px!important;border-radius:11px!important;background:var(--p1-surface-2)!important;color:var(--p1-text-main)!important;display:grid!important;place-items:center!important
}
#screen-home .slovra-tool-dock span .slovra-icon{width:19px;height:19px}
#screen-home .slovra-tool-dock b{font-family:var(--p1-display)!important;font-size:15px!important;line-height:1!important;letter-spacing:-.015em!important;font-weight:820!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

/* Home drawer icons */
#screen-home #v21-feature-panel .home-feature-icon{display:grid!important;place-items:center!important;color:var(--p1-text-main)!important}
#screen-home #v21-feature-panel .home-feature-icon .slovra-icon{width:22px;height:22px}
#screen-home .slovra-simple-more-tools button{display:inline-flex!important;align-items:center!important;gap:7px!important;font-size:12px!important}.slovra-simple-more-tools .slovra-icon{width:17px;height:17px}

/* Light home must stay genuinely light */
body.light-mode #screen-home .slovra-simple-focus,body.light-mode #screen-home .slovra-preview-unit,body.light-mode #screen-home .slovra-tool-dock button,
body.light #screen-home .slovra-simple-focus,body.light #screen-home .slovra-preview-unit,html[data-theme="light"] #screen-home .slovra-simple-focus{
  background:var(--p1-surface)!important;color:var(--p1-text-main)!important;border-color:var(--p1-line)!important
}
body.light-mode #screen-home .slovra-preview-unit:before{background:var(--p1-surface)!important;border-color:var(--p1-line)!important}

@media(min-width:960px){
  #screen-home.slovra-home-simple .hero-banner-container{margin-top:2px!important}
  #screen-home.slovra-home-simple .slovra-simple-home{margin-top:16px!important;margin-bottom:22px!important}
  #screen-home.slovra-home-simple .slovra-home-preview{margin-bottom:24px!important}
}
@media(max-width:959px){
  .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{
    top:8px!important;width:calc(100% - 20px)!important;margin:8px auto 14px!important;border-radius:19px!important
  }
  #screen-home .game-header{min-height:58px!important;padding:7px 9px!important}
  #screen-home .flag-icon-small{width:25px!important;height:25px!important;flex-basis:25px!important}
  #screen-home .streak-area,#screen-home .xp-area,#screen-home .heart-area,#screen-home .level-area{height:34px!important;padding:0 8px!important;font-size:11px!important}
  #screen-home .v21-header-search,#screen-home .notif-btn,#screen-home .header-btn{width:35px!important;height:35px!important}
  #screen-home .profile-pic{width:35px!important;height:35px!important}
  #screen-home.slovra-home-simple .hero-banner-container,#screen-home.slovra-home-simple .slovra-simple-home,#screen-home.slovra-home-simple .slovra-home-preview,#screen-home.slovra-home-simple #v21-feature-panel{width:calc(100% - 24px)!important}
  #screen-home.slovra-home-simple .hero-banner{padding:20px!important;border-radius:23px!important}
  #screen-home.slovra-home-simple #welcome-msg{font-size:25px!important;margin-bottom:15px!important}
  .slovra-simple-focus{padding:15px!important;border-radius:23px!important;box-shadow:0 12px 30px rgba(0,0,0,.12)!important}
  .slovra-simple-continue{min-height:64px!important;padding:0 17px!important;font-size:17px!important;border-radius:17px!important}
  .slovra-simple-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .slovra-simple-action,.slovra-simple-action.tone-units,.slovra-simple-action.tone-review,.slovra-simple-action.tone-social,.slovra-simple-action.tone-speech{min-height:112px!important;padding:14px!important;border-radius:18px!important}
  .slovra-simple-action i{width:39px!important;height:39px!important;border-radius:12px!important}.slovra-simple-action i .slovra-icon{width:20px;height:20px}.slovra-simple-action>span{font-size:18px!important}
  .slovra-preview-head strong{font-size:21px!important}
  .slovra-unit-preview{gap:8px!important}
  .slovra-preview-unit,.slovra-preview-unit.theme-0,.slovra-preview-unit.theme-1,.slovra-preview-unit.theme-2,.slovra-preview-unit.theme-3{height:132px!important;min-height:132px!important;padding:22px 12px 13px!important;border-radius:16px!important}
  .slovra-preview-unit:before{left:12px;top:-7px;width:62px;height:14px}
  .slovra-preview-unit .card-icon-circle{top:15px!important;right:12px!important;width:34px!important;height:34px!important}
  .slovra-preview-unit>div:not(.card-icon-circle):not(.test-count){font-size:14px!important}.slovra-preview-unit .test-count{font-size:9px!important}
  #screen-home .slovra-tool-dock{width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  #screen-home .slovra-tool-dock button{min-height:82px!important;padding:11px 7px!important;border-radius:16px!important;gap:7px!important}
  #screen-home .slovra-tool-dock b{font-size:13px!important}
}
@media(max-width:430px){
  #screen-home .game-header{gap:5px!important;padding-left:8px!important;padding-right:8px!important}
  #screen-home .flag-box{gap:4px!important}
  #screen-home .flag-icon-small{width:22px!important;height:22px!important;flex-basis:22px!important}
  #screen-home .streak-area,#screen-home .xp-area,#screen-home .heart-area,#screen-home .level-area{height:32px!important;padding:0 6px!important;font-size:10px!important;gap:4px!important}
  #screen-home .header-stat-icon,#screen-home .header-stat-icon .slovra-icon{width:14px!important;height:14px!important}
  #screen-home .header-controls{gap:3px!important}
  #screen-home .v21-header-search,#screen-home .notif-btn,#screen-home .header-btn{width:32px!important;height:32px!important}
  #screen-home .profile-pic{width:32px!important;height:32px!important}
  #screen-home #header-role-badge{display:none!important}
  .slovra-simple-stats>span{padding:7px 6px!important}
}
@media(max-width:360px){
  #screen-home .xp-area{display:none!important}
  .slovra-unit-preview{grid-template-columns:repeat(2,minmax(0,1fr))!important}.slovra-unit-preview>*:nth-child(3){display:none!important}
  #screen-home .slovra-tool-dock b{font-size:12px!important}
}