/* Slovra V6 — PART 1.6
   Full unit-grid design parity + stronger left-aligned unit typography + Premium modal redesign/animation. */

/* --------------------------------------------------------------------------
   UNIT CARDS — preview and full category grid now share one visual language.
   -------------------------------------------------------------------------- */
#screen-home .slovra-preview-unit,
#screen-home #category-grid .duo-card{
  position:relative!important;
  min-width:0!important;
  overflow:hidden!important;
  text-align:left!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  border-radius:22px!important;
  padding:64px 18px 16px!important;
  min-height:154px!important;
  height:154px!important;
  border:1px solid rgba(255,255,255,.17)!important;
  box-shadow:0 15px 30px rgba(0,0,0,.20)!important;
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease!important;
}
#screen-home #category-grid .duo-card{display:flex!important;flex-direction:column!important;gap:7px!important}
#screen-home #category-grid .duo-card .flag-badge{display:none!important}

#screen-home .slovra-preview-unit.theme-0,
#screen-home #category-grid .duo-card.theme-0{background:linear-gradient(145deg,#5d45d9 0%,#8a62f2 58%,#a774ff 100%)!important}
#screen-home .slovra-preview-unit.theme-1,
#screen-home #category-grid .duo-card.theme-1{background:linear-gradient(145deg,#087f8c 0%,#12a9c0 48%,#1cb0f6 100%)!important}
#screen-home .slovra-preview-unit.theme-2,
#screen-home #category-grid .duo-card.theme-2{background:linear-gradient(145deg,#db7d09 0%,#f29c19 50%,#ffb938 100%)!important}
#screen-home .slovra-preview-unit.theme-3,
#screen-home #category-grid .duo-card.theme-3{background:linear-gradient(145deg,#c12c78 0%,#dc4c91 50%,#8d54ea 100%)!important}

body.light-mode #screen-home .slovra-preview-unit.theme-0,
body.light-mode #screen-home #category-grid .duo-card.theme-0,
body.light #screen-home .slovra-preview-unit.theme-0,
body.light #screen-home #category-grid .duo-card.theme-0{background:linear-gradient(145deg,#6650df,#9a70fa)!important}
body.light-mode #screen-home .slovra-preview-unit.theme-1,
body.light-mode #screen-home #category-grid .duo-card.theme-1,
body.light #screen-home .slovra-preview-unit.theme-1,
body.light #screen-home #category-grid .duo-card.theme-1{background:linear-gradient(145deg,#078994,#1ab6e8)!important}
body.light-mode #screen-home .slovra-preview-unit.theme-2,
body.light-mode #screen-home #category-grid .duo-card.theme-2,
body.light #screen-home .slovra-preview-unit.theme-2,
body.light #screen-home #category-grid .duo-card.theme-2{background:linear-gradient(145deg,#de800d,#f6ae28)!important}
body.light-mode #screen-home .slovra-preview-unit.theme-3,
body.light-mode #screen-home #category-grid .duo-card.theme-3,
body.light #screen-home .slovra-preview-unit.theme-3,
body.light #screen-home #category-grid .duo-card.theme-3{background:linear-gradient(145deg,#c8327e,#9257e7)!important}

/* Folder tab stays inside the card, so it never clips or creates broken seams. */
#screen-home .slovra-preview-unit::before,
#screen-home #category-grid .duo-card::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:54%!important;
  height:27px!important;
  border:0!important;
  border-radius:0 0 14px 0!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.10)!important;
  pointer-events:none!important;
}
#screen-home .slovra-preview-unit::after,
#screen-home #category-grid .duo-card::after{
  content:""!important;
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  top:50px!important;
  height:1px!important;
  background:rgba(255,255,255,.20)!important;
  pointer-events:none!important;
}

#screen-home .slovra-preview-unit .card-icon-circle,
#screen-home #category-grid .duo-card .card-icon-circle{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  width:40px!important;
  height:40px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  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,.11)!important;
}
#screen-home .slovra-preview-unit .card-icon-circle .slovra-icon,
#screen-home #category-grid .duo-card .card-icon-circle .slovra-icon{width:21px!important;height:21px!important;--icon-main:#fff;--icon-accent:#eafcff;--icon-soft:rgba(255,255,255,.16)}

/* The title is deliberately the visual anchor: bigger, heavier and left aligned. */
#screen-home .slovra-preview-unit>div:not(.card-icon-circle):not(.test-count),
#screen-home #category-grid .duo-card>div:not(.card-icon-circle):not(.test-count){
  display:block!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  color:#fff!important;
  text-align:left!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  font-family:'Nunito',system-ui,sans-serif!important;
  font-size:20px!important;
  line-height:1.06!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-shadow:0 1px 1px rgba(0,0,0,.12)!important;
}
#screen-home .slovra-preview-unit .test-count,
#screen-home #category-grid .duo-card .test-count{
  position:static!important;
  display:block!important;
  width:100%!important;
  margin:4px 0 0!important;
  padding:0!important;
  background:transparent!important;
  color:rgba(255,255,255,.84)!important;
  text-align:left!important;
  font-family:'Nunito',system-ui,sans-serif!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:800!important;
  opacity:1!important;
}
#screen-home .slovra-preview-unit:hover,
#screen-home #category-grid .duo-card:hover{transform:translateY(-4px)!important;filter:saturate(1.08) brightness(1.035)!important;box-shadow:0 20px 38px rgba(0,0,0,.24)!important}

/* Full list gets the same disciplined three-column geometry as preview. */
#screen-home.slovra-home-simple.slovra-units-open>#category-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  max-width:980px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* --------------------------------------------------------------------------
   PREMIUM — colorful Slovra card, SVG-only iconography and smooth motion.
   -------------------------------------------------------------------------- */
#pro-modal.modal-overlay{
  background:rgba(8,8,10,.58)!important;
  backdrop-filter:blur(14px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15)!important;
  opacity:0;
  transition:opacity .24s ease!important;
  padding:18px!important;
}
#pro-modal.modal-overlay.is-open{opacity:1}
#pro-modal .pro-modal{
  position:relative!important;
  overflow:hidden!important;
  width:min(560px,calc(100vw - 36px))!important;
  max-width:560px!important;
  padding:24px!important;
  border:1px solid rgba(177,125,255,.30)!important;
  border-radius:28px!important;
  color:#f8f7fb!important;
  text-align:left!important;
  background:
    radial-gradient(460px 220px at 0% 0%,rgba(132,74,255,.28),transparent 62%),
    radial-gradient(390px 210px at 100% 100%,rgba(29,199,226,.18),transparent 63%),
    linear-gradient(145deg,#202024,#171719)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 50px rgba(141,83,255,.10)!important;
  transform:translateY(20px) scale(.955);
  opacity:0;
  transition:transform .30s cubic-bezier(.2,.8,.2,1),opacity .22s ease!important;
}
#pro-modal.is-open .pro-modal{transform:translateY(0) scale(1);opacity:1}
#pro-modal.is-closing .pro-modal{transform:translateY(10px) scale(.975);opacity:0}

#pro-modal .pro-modal::before{
  content:"";
  position:absolute;
  width:240px;height:240px;border-radius:50%;
  right:-110px;top:-120px;
  background:radial-gradient(circle,rgba(255,87,160,.20),rgba(142,84,236,.10) 45%,transparent 70%);
  pointer-events:none;
}
.premium-modal-head{position:relative;z-index:1;display:grid!important;grid-template-columns:auto 1fr auto!important;gap:14px!important;align-items:center!important;margin-bottom:18px!important}
.premium-crown{
  width:54px!important;height:54px!important;border-radius:17px!important;display:grid!important;place-items:center!important;
  background:linear-gradient(135deg,#ffb21d,#ff7a45)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(255,137,36,.25),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.premium-crown .slovra-icon{width:27px;height:27px;--icon-main:#fff;--icon-accent:#fff5c7;--icon-soft:rgba(255,255,255,.16)}
.premium-title-copy{min-width:0}.premium-eyebrow{display:block;margin-bottom:3px;color:#c8a7ff;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.premium-modal-head h2{margin:0!important;font-family:'Nunito',system-ui,sans-serif!important;font-size:25px!important;line-height:1.05!important;font-weight:900!important;letter-spacing:-.025em!important;color:#fff!important}
.premium-modal-head p{margin:4px 0 0!important;color:#b8b6c1!important;font-size:12px!important;line-height:1.35!important;font-weight:700!important}
.premium-close{width:38px!important;height:38px!important;padding:0!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:12px!important;background:rgba(255,255,255,.06)!important;color:#e7e5ec!important;display:grid!important;place-items:center!important;cursor:pointer!important;transition:transform .18s ease,background .18s ease!important}
.premium-close:hover{background:rgba(255,255,255,.12)!important;transform:rotate(5deg) scale(1.04)}
.premium-close .slovra-icon{width:17px;height:17px;--icon-main:currentColor;--icon-accent:currentColor}

.premium-benefits{position:relative;z-index:1;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0 0 16px!important}
.premium-benefit{
  min-height:112px;
  padding:14px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  gap:11px!important;
  align-items:start!important;
  text-align:left!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  transform:translateY(8px);opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease!important;
}
#pro-modal.is-open .premium-benefit{transform:translateY(0);opacity:1}
#pro-modal.is-open .premium-benefit:nth-child(1){transition-delay:.04s}
#pro-modal.is-open .premium-benefit:nth-child(2){transition-delay:.08s}
#pro-modal.is-open .premium-benefit:nth-child(3){transition-delay:.12s}
#pro-modal.is-open .premium-benefit:nth-child(4){transition-delay:.16s}
.premium-benefit.tone-ai{background:linear-gradient(135deg,rgba(118,70,245,.30),rgba(152,79,232,.15))!important}
.premium-benefit.tone-explain{background:linear-gradient(135deg,rgba(25,183,219,.25),rgba(25,112,219,.13))!important}
.premium-benefit.tone-heart{background:linear-gradient(135deg,rgba(236,68,131,.26),rgba(255,115,106,.13))!important}
.premium-benefit.tone-tests{background:linear-gradient(135deg,rgba(241,151,24,.27),rgba(255,196,62,.13))!important}
.premium-benefit-icon{width:38px;height:38px;border-radius:12px;display:grid!important;place-items:center!important;background:rgba(255,255,255,.11)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important}
.premium-benefit-icon .slovra-icon{width:20px;height:20px;--icon-main:#fff;--icon-accent:#fff;--icon-soft:rgba(255,255,255,.12)}
.premium-benefit-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.premium-benefit b{margin:0!important;color:#fff!important;font-family:'Nunito',system-ui,sans-serif!important;font-size:13px!important;line-height:1.2!important;font-weight:900!important}.premium-benefit small{margin:0!important;color:rgba(240,239,245,.72)!important;font-size:10px!important;line-height:1.38!important;font-weight:700!important}

.premium-foot{position:relative;z-index:1;padding:14px;border-radius:19px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.premium-expiry-box{display:flex!important;align-items:center!important;gap:9px!important;margin:0 0 10px!important;padding:10px 11px!important;border-radius:13px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.09)!important;color:#d8d6df!important;font-size:11px!important;font-weight:800!important}
.premium-expiry-box.active{background:rgba(70,200,116,.11)!important;border-color:rgba(88,204,114,.30)!important;color:#c8ffd6!important}
.premium-expiry-box .slovra-icon{width:17px;height:17px;flex:0 0 auto;--icon-main:currentColor;--icon-accent:currentColor;--icon-soft:rgba(255,255,255,.08)}
#premium-action-btn{width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin:0!important;border:0!important;border-radius:14px!important;padding:13px 16px!important;background:linear-gradient(100deg,#7047ee,#bb4bea,#16b9d8)!important;background-size:180% 100%!important;color:#fff!important;font-family:'Nunito',system-ui,sans-serif!important;font-size:13px!important;font-weight:900!important;box-shadow:0 8px 22px rgba(113,71,238,.24)!important;transition:transform .18s ease,filter .18s ease,background-position .35s ease!important}
#premium-action-btn:hover{transform:translateY(-2px);filter:saturate(1.08) brightness(1.04);background-position:100% 0!important}
#premium-action-btn .slovra-icon{width:17px;height:17px;--icon-main:#fff;--icon-accent:#dffaff}
.premium-foot>small{display:block!important;margin-top:9px!important;color:#8f8d97!important;font-size:9px!important;line-height:1.45!important;font-weight:700!important;text-align:center!important}

/* Light mode keeps color; it does not become a flat white dialog. */
body.light-mode #pro-modal .pro-modal,
body.light #pro-modal .pro-modal,
html[data-theme="light"] #pro-modal .pro-modal{
  color:#1e1b25!important;
  border-color:rgba(124,76,219,.18)!important;
  background:
    radial-gradient(460px 220px at 0% 0%,rgba(132,74,255,.16),transparent 62%),
    radial-gradient(390px 210px at 100% 100%,rgba(29,199,226,.13),transparent 63%),
    linear-gradient(145deg,#fffafd,#f5f6fb)!important;
  box-shadow:0 28px 74px rgba(40,29,62,.22),0 0 44px rgba(141,83,255,.08)!important;
}
body.light-mode .premium-modal-head h2,body.light .premium-modal-head h2,html[data-theme="light"] .premium-modal-head h2{color:#201b2b!important}
body.light-mode .premium-modal-head p,body.light .premium-modal-head p,html[data-theme="light"] .premium-modal-head p{color:#746f7e!important}
body.light-mode .premium-close,body.light .premium-close,html[data-theme="light"] .premium-close{background:rgba(52,39,72,.06)!important;border-color:rgba(52,39,72,.09)!important;color:#4c4657!important}
body.light-mode .premium-benefit,body.light .premium-benefit,html[data-theme="light"] .premium-benefit{border-color:rgba(66,50,92,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important}
body.light-mode .premium-benefit b,body.light .premium-benefit b,html[data-theme="light"] .premium-benefit b{color:#2a2432!important}
body.light-mode .premium-benefit small,body.light .premium-benefit small,html[data-theme="light"] .premium-benefit small{color:#686271!important}
body.light-mode .premium-benefit-icon,body.light .premium-benefit-icon,html[data-theme="light"] .premium-benefit-icon{background:rgba(255,255,255,.58)!important;border-color:rgba(255,255,255,.75)!important;color:#393043!important}
body.light-mode .premium-benefit-icon .slovra-icon,body.light .premium-benefit-icon .slovra-icon,html[data-theme="light"] .premium-benefit-icon .slovra-icon{--icon-main:#30283a;--icon-accent:#5f41bb;--icon-soft:rgba(112,71,238,.10)}
body.light-mode .premium-foot,body.light .premium-foot,html[data-theme="light"] .premium-foot{background:rgba(255,255,255,.64)!important;border-color:rgba(79,61,105,.08)!important}
body.light-mode .premium-expiry-box,body.light .premium-expiry-box,html[data-theme="light"] .premium-expiry-box{background:#f4f1f8!important;border-color:#e6deef!important;color:#5e5868!important}
body.light-mode .premium-expiry-box.active,body.light .premium-expiry-box.active,html[data-theme="light"] .premium-expiry-box.active{background:#effbf2!important;border-color:#cdeed6!important;color:#26723c!important}
body.light-mode .premium-foot>small,body.light .premium-foot>small,html[data-theme="light"] .premium-foot>small{color:#827b89!important}

/* Mobile keeps the modal compact and the unit cards readable. */
@media(max-width:720px){
  #screen-home .slovra-preview-unit,
  #screen-home #category-grid .duo-card{height:138px!important;min-height:138px!important;padding:58px 13px 13px!important;border-radius:17px!important}
  #screen-home .slovra-preview-unit::before,
  #screen-home #category-grid .duo-card::before{height:23px!important;width:58%!important}
  #screen-home .slovra-preview-unit::after,
  #screen-home #category-grid .duo-card::after{left:13px!important;right:13px!important;top:46px!important}
  #screen-home .slovra-preview-unit .card-icon-circle,
  #screen-home #category-grid .duo-card .card-icon-circle{top:10px!important;right:10px!important;width:34px!important;height:34px!important}
  #screen-home .slovra-preview-unit>div:not(.card-icon-circle):not(.test-count),
  #screen-home #category-grid .duo-card>div:not(.card-icon-circle):not(.test-count){font-size:16px!important;line-height:1.08!important}
  #screen-home.slovra-home-simple.slovra-units-open>#category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #pro-modal.modal-overlay{padding:10px!important;align-items:center!important;overflow:hidden!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  #pro-modal .pro-modal{width:100%!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;border-radius:22px!important;padding:0!important;transform:translateY(18px) scale(.985);-webkit-overflow-scrolling:touch}
  #pro-modal.is-open .pro-modal{transform:translateY(0) scale(1)}
  .premium-modal-head{gap:10px!important;margin-bottom:14px!important}.premium-crown{width:46px!important;height:46px!important;border-radius:15px!important}.premium-modal-head h2{font-size:21px!important}.premium-modal-head p{font-size:10px!important}
  .premium-benefits{grid-template-columns:1fr 1fr!important;gap:8px!important}.premium-benefit{min-height:104px;padding:11px!important;grid-template-columns:1fr!important;gap:8px!important}.premium-benefit-icon{width:34px;height:34px}.premium-benefit b{font-size:12px!important}.premium-benefit small{font-size:9px!important}
}
@media(max-width:390px){.premium-benefits{grid-template-columns:1fr!important}.premium-benefit{min-height:0;grid-template-columns:auto 1fr!important}}

@media(prefers-reduced-motion:reduce){
  #pro-modal.modal-overlay,#pro-modal .pro-modal,.premium-benefit,#premium-action-btn,#screen-home .slovra-preview-unit,#screen-home #category-grid .duo-card{transition:none!important;animation:none!important}
}
body.reduce-motion #pro-modal.modal-overlay,body.reduce-motion #pro-modal .pro-modal,body.reduce-motion .premium-benefit{transition:none!important;animation:none!important}
body.slovra-modal-open{overflow:hidden!important}
#premium-action-btn:disabled,#premium-action-btn.is-active-plan{cursor:default!important;opacity:.88!important;filter:saturate(.78)!important;transform:none!important;background:linear-gradient(100deg,#3fa565,#58cc72)!important;box-shadow:0 8px 22px rgba(58,174,99,.18)!important}