/* SLOVRA UI REV5.1 — settings + header polish hotfix
   Fixes monochrome quick-action emoji, settings desktop flow,
   V28 profile button overlap, and removes the search icon bubble. */

/* Quick account actions: force real color-emoji rendering instead of the UI text font. */
#screen-settings .settings-account-quick button > span{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif!important;
  font-weight:400!important;
  font-style:normal!important;
  font-variant:normal!important;
  line-height:1!important;
  color:initial!important;
  -webkit-text-fill-color:initial!important;
  text-shadow:none!important;
  filter:none!important;
  opacity:1!important;
}
body.light-mode #screen-settings .settings-account-quick button,
body.light #screen-settings .settings-account-quick button{
  background:#fff!important;
  color:#30434b!important;
  border-color:#dbe5e9!important;
  box-shadow:none!important;
}

/* V28 settings shortcut must always participate in normal document flow. */
#screen-settings #v28-settings-profile-btn{
  position:static!important;
  inset:auto!important;
  float:none!important;
  clear:both!important;
  transform:none!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-height:43px!important;
  margin:0 0 10px!important;
  padding:10px 13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  z-index:auto!important;
}

/* Search: icon only, no ellipse/circle/chip around it. */
#v21-header-search.v21-header-search{
  appearance:none!important;
  -webkit-appearance:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
  color:inherit!important;
}
#v21-header-search.v21-header-search::before,
#v21-header-search.v21-header-search::after{content:none!important;display:none!important}
body.light-mode #v21-header-search.v21-header-search,
body.light #v21-header-search.v21-header-search{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#1b2d35!important;
}
#v21-header-search.v21-header-search:hover,
#v21-header-search.v21-header-search:focus,
#v21-header-search.v21-header-search:active{background:transparent!important;box-shadow:none!important}

/* Desktop settings is a control center, not a two-column phone-card grid. */
@media (min-width:960px){
  #screen-settings .settings-area{
    width:min(100%,1120px)!important;
    max-width:1120px!important;
    margin:0 auto!important;
    display:block!important;
    padding:22px 22px 54px!important;
    box-sizing:border-box!important;
  }
  #screen-settings .settings-profile-hero{
    width:100%!important;
    margin:0 0 14px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:20px!important;
    align-items:center!important;
    padding:22px!important;
    box-sizing:border-box!important;
  }
  #screen-settings .settings-profile-copy{min-width:0!important}
  #screen-settings .settings-profile-stats{display:flex!important;flex-wrap:wrap!important;gap:8px!important}

  #screen-settings .settings-category-nav{
    position:sticky!important;
    top:66px!important;
    z-index:19!important;
    width:100%!important;
    margin:0 0 14px!important;
    padding:8px 0 10px!important;
    box-sizing:border-box!important;
  }
  #screen-settings .settings-account-quick{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin:0 0 12px!important;
  }
  #screen-settings .settings-account-quick button{
    min-height:72px!important;
    padding:12px 10px!important;
    font-size:10px!important;
  }
  #screen-settings .settings-account-quick button > span{font-size:20px!important;margin-bottom:5px!important}

  #screen-settings #v28-settings-profile-btn{
    width:auto!important;
    min-width:230px!important;
    max-width:320px!important;
    margin:0 0 14px auto!important;
    padding:11px 18px!important;
  }

  #screen-settings .settings-section-card{
    width:100%!important;
    max-width:none!important;
    margin:0 0 16px!important;
    padding:20px!important;
    box-sizing:border-box!important;
  }
  #screen-settings .settings-section-card.settings-category-active{display:block!important}
  #screen-settings .settings-section-head{margin-bottom:13px!important}
  #screen-settings .settings-section-head strong,
  #screen-settings .settings-section-head h3{font-size:15px!important}

  /* Known base settings cards use the extra desktop width internally. */
  #screen-settings .settings-section-card:has(#settings-theme-options),
  #screen-settings .settings-section-card:has(#settings-daily-goal-options),
  #screen-settings .settings-section-card:has(.settings-section-icon.games){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:24px!important;
    row-gap:0!important;
    align-items:start!important;
  }
  #screen-settings .settings-section-card:has(#settings-theme-options) > .settings-section-head,
  #screen-settings .settings-section-card:has(#settings-daily-goal-options) > .settings-section-head,
  #screen-settings .settings-section-card:has(.settings-section-icon.games) > .settings-section-head{
    grid-column:1/-1!important;
  }
  #screen-settings .settings-control-block,
  #screen-settings .settings-toggle-row{min-width:0!important}

  #screen-settings .settings-action-list{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #screen-settings .settings-action-list button{
    min-height:68px!important;
    border:1px solid var(--border-color,#2b3545)!important;
    border-radius:14px!important;
    background:color-mix(in srgb,var(--input-bg,#101722) 92%,transparent)!important;
    padding:11px!important;
  }
  body.light-mode #screen-settings .settings-action-list button,
  body.light #screen-settings .settings-action-list button{
    background:#f7fafb!important;
    border-color:#dfe8eb!important;
  }
  #screen-settings .settings-premium-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  #screen-settings .settings-logout-btn{width:100%!important;margin:2px 0 0!important}
}

/* Compact phones: no negative margins and no collision with the category strip. */
@media (max-width:959px){
  #screen-settings #v28-settings-profile-btn{margin:0 0 10px!important}
  #screen-settings .settings-account-quick{position:static!important;z-index:auto!important}
}