/* SCRAAPS — identidade oficial roxo profundo + coral (2026-08-28) */
:root{
  --sc-purple:#4c2a85;
  --sc-purple-dark:#32195f;
  --sc-violet:#7655c5;
  --sc-coral:#ff5e6c;
  --sc-coral-dark:#d94857;
  --sc-orange:#ff8a1f;
  --sc-lavender:#f6f3fc;
  --sc-lavender-2:#eee8f8;
  --sc-card:#fff;
  --sc-text:#292633;
  --sc-muted:#746f7d;
  --sc-online:#24b47e;
  --comunia-blue:#4c2a85!important;
  --comunia-blue-dark:#32195f!important;
  --comunia-lilac:#7655c5!important;
  --orkut-blue:#4c2a85!important;
  --orkut-blue-2:#7655c5!important;
  --orkut-blue-dark:#32195f!important;
  --orkut-pink:#ff5e6c!important;
  --orkut-bg:#f6f3fc!important;
  --orkut-card:#fff!important;
  --orkut-text:#292633!important;
  --orkut-muted:#746f7d!important;
  --brand-primary:#4c2a85!important;
  --brand-secondary:#7655c5!important;
  --brand-accent:#ff5e6c!important;
}

html{background:var(--sc-lavender)!important;accent-color:var(--sc-coral);}
body:not(.deejai-app-shell-body){background:var(--sc-lavender)!important;color:var(--sc-text);}
::selection{background:rgba(255,94,108,.24);color:var(--sc-purple-dark);}
a{transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid rgba(255,94,108,.38)!important;
  outline-offset:2px!important;
}

/* Cabeçalhos, barras e marca */
.topbar,.header-tools,.global-topbar,.deejai-global-topbar,.profile-topbar,
body:not(.auth-body) > header:not(.forum-header),.app-header{
  background:linear-gradient(135deg,var(--sc-purple-dark),var(--sc-purple) 58%,var(--sc-violet))!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#fff!important;
}
.topbar a,.topbar button,.header-tools a,.header-tools button,.global-topbar a,.global-topbar button{
  color:#fff!important;
}
.logo img,.brand-logo img,.topbar-logo img,.deejai-logo img{filter:none!important;}
.notif b,.notification-badge,.chat-nav-badge,.badge-count,.unread-badge{
  background:var(--sc-coral)!important;color:#fff!important;border-color:#fff!important;
}

/* Superfícies e cartões */
.app,.app-shell,.container,.profile-page,.profile-shell,.feed-shell,.main-content{
  background-color:var(--sc-lavender)!important;
}
.card,.feed-card,.social-card,.profile-card,.form-card,.topic-card,.memory-card,
.status-composer,.composer,.news-card,.event-feed-card,.playlist-card,.radio-card,
.community-detail,.profile-head,.instant-article-sheet,.comments-panel,.modal-content,
.popup-card,.notification-panel,.quick-menu-panel{
  background:var(--sc-card)!important;
  border-color:rgba(76,42,133,.12)!important;
  box-shadow:0 10px 28px rgba(76,42,133,.08)!important;
}
.muted,.small-text,.feed-time,.post-time,.profile-meta,.card small,.card .meta{
  color:var(--sc-muted)!important;
}
h1,h2,h3,h4,.page-title,.profile-name,.feed-title{color:var(--sc-text);}

/* Busca, formulários e campos */
.search-box,.search-bar,.global-search,.input-like,
input:not([type=checkbox]):not([type=radio]),textarea,select{
  background:#fff!important;
  border-color:rgba(76,42,133,.35)!important;
  color:var(--sc-text)!important;
}
.search-box,.search-bar,.global-search{
  border-color:var(--sc-purple)!important;
  box-shadow:0 8px 24px rgba(76,42,133,.07)!important;
}
input::placeholder,textarea::placeholder{color:#9a94a3!important;}
input:focus,textarea:focus,select:focus{border-color:var(--sc-coral)!important;box-shadow:0 0 0 4px rgba(255,94,108,.12)!important;}

/* Botões, links e estados ativos */
.btn-primary,.btn-gradient,.main-play,.follow-btn.is-following,
button[type=submit]:not(.danger):not(.btn-danger),.primary-action,
.profile-action-primary,.forum-primary-action{
  background:linear-gradient(135deg,var(--sc-purple),var(--sc-violet))!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 9px 22px rgba(76,42,133,.18)!important;
}
.btn-primary:hover,.btn-gradient:hover,.primary-action:hover{filter:brightness(1.06);transform:translateY(-1px);}
.link-blue,.active-link,.logout-mini,.profile-verified,.verified-badge,.category-label{
  color:var(--sc-coral)!important;
}
.badge,.chip,.category-chip,.profile-sponsored-badge,.sponsored-badge{
  background:rgba(255,94,108,.09)!important;
  border-color:rgba(255,94,108,.35)!important;
  color:var(--sc-coral-dark)!important;
}

/* Avatares e presença */
.avatar,.mini-avatar,.story-avatar,.profile-avatar{border-color:var(--sc-violet)!important;}
.online-dot,.status-online,.presence-dot,.avatar-online::after{background:var(--sc-online)!important;border-color:#fff!important;}

/* Navegação inferior */
.bottom-nav,.bottom-menu{
  background:rgba(255,255,255,.97)!important;
  border-color:rgba(76,42,133,.12)!important;
  box-shadow:0 -10px 30px rgba(76,42,133,.10)!important;
}
.bottom-nav .nav-item,.bottom-menu a{color:#746f7d!important;}
.bottom-nav .nav-item.active,.bottom-menu a.active{color:var(--sc-coral)!important;background:rgba(255,94,108,.06)!important;}
.nav-plus,.bottom-nav .nav-plus,#quickMenuOpen .nav-plus,.nav-create-clean .nav-plus{
  background:linear-gradient(135deg,var(--sc-coral),#ff7a85)!important;
  color:#fff!important;border-color:#fff!important;
  box-shadow:0 12px 28px rgba(255,94,108,.28)!important;
}

/* Perfil */
.profile-cover,.profile-hero,.profile-action-bar{
  background:linear-gradient(135deg,rgba(76,42,133,.10),rgba(255,94,108,.06))!important;
}
.profile-link,.profile-bio a{color:var(--sc-purple)!important;}
.profile-action-btn,.profile-menu-btn{
  background:#fff!important;border-color:var(--sc-purple)!important;color:var(--sc-purple)!important;
  box-shadow:0 7px 18px rgba(76,42,133,.08)!important;
}

/* Fóruns, modais e Instant Article */
.forum-hero,.verify-hero,.admin-verify-head,.forum-cover{
  background:linear-gradient(135deg,var(--sc-purple-dark),var(--sc-violet))!important;
}
.instant-article-backdrop{background:rgba(40,22,68,.62)!important;}
.instant-article-handle-wrap,.instant-article-topbar{
  background:linear-gradient(135deg,var(--sc-purple-dark),var(--sc-purple),var(--sc-violet))!important;
}
.instant-article-divider{background:linear-gradient(90deg,var(--sc-purple),var(--sc-coral))!important;}
.instant-article-content blockquote{border-left-color:var(--sc-coral)!important;}

/* Login, cadastro e telas de acesso */
.auth-body,.auth-page,.login-page{
  background:radial-gradient(circle at 18% 12%,rgba(255,94,108,.20),transparent 30%),
             linear-gradient(145deg,var(--sc-purple-dark),var(--sc-purple) 58%,var(--sc-violet))!important;
}
.auth-card,.login-card{background:rgba(255,255,255,.96)!important;color:var(--sc-text)!important;border-color:rgba(255,255,255,.34)!important;}
.auth-card h1,.auth-card p,.auth-card label,.login-card h1,.login-card p,.login-card label{color:var(--sc-text)!important;}

/* Área administrativa */
body.admin-body,body:has(.admin-home),body:has(.admin-premium-wrap){
  background:#211333!important;color:#f8f5fc!important;
}
.admin-card,.admin-hero,.premium-head,.user-card,.admin-panel{
  background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.12)!important;
}
.admin-card a,header nav a{color:#fff!important;}

/* Stories, player e componentes multimídia */
.story-ring,.profile-story-ring{background:linear-gradient(135deg,var(--sc-coral),var(--sc-violet))!important;}
.progress i,.player-progress i,.audio-progress-fill{background:linear-gradient(90deg,var(--sc-coral),var(--sc-violet))!important;}
.play-button,.player-play,.floating-play{background:var(--sc-coral)!important;color:#fff!important;}

/* Browser do Instagram e desktop preservam a mesma identidade */
html.instagram-webview body{background:var(--sc-lavender)!important;}
@media(min-width:760px){
  body{background:linear-gradient(135deg,#eee8f8,#f8f6fc 48%,#f4edf2)!important;}
  .app,.app-shell,.desktop-main{border-color:rgba(76,42,133,.10)!important;}
}

@media(prefers-color-scheme:dark){
  /* A marca permanece clara por padrão; modo escuro não deve substituir a identidade. */
  body:not(.deejai-app-shell-body):not(.admin-body){background:var(--sc-lavender)!important;color:var(--sc-text)!important;}
}

/* V2 — correspondência visual exata com o mockup aprovado.
   Seletores intencionalmente específicos para vencer os temas legados. */
html body:not(.auth-body) header.scraaps-topbar{
  background:#f8f6fc!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
html body:not(.auth-body) header.scraaps-topbar .scraaps-topline{
  background:linear-gradient(135deg,#32195f 0%,#4c2a85 58%,#7655c5 100%)!important;
  background-color:#4c2a85!important;
  border:0!important;
  border-bottom:1px solid rgba(50,25,95,.34)!important;
  box-shadow:0 4px 14px rgba(50,25,95,.18)!important;
}
html body:not(.auth-body) header.scraaps-topbar .scraaps-round-icon{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.28)!important;
  color:#fff!important;
  box-shadow:none!important;
}
html body:not(.auth-body) header.scraaps-topbar .scraaps-avatar-btn{
  border-color:var(--sc-online)!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.18)!important;
}
html body.is-logged header.scraaps-topbar .scraaps-global-search,
html body.is-logged header.scraaps-topbar form.scraaps-global-search{
  border:2px solid #4c2a85!important;
  background:#fff!important;
  color:#4c2a85!important;
  box-shadow:0 7px 20px rgba(76,42,133,.08)!important;
}
html body.is-logged header.scraaps-topbar .scraaps-global-search:focus-within{
  border-color:#7655c5!important;
  box-shadow:0 0 0 3px rgba(118,85,197,.12),0 7px 20px rgba(76,42,133,.08)!important;
}
html body.is-logged header.scraaps-topbar .scraaps-global-search > svg,
html body.is-logged header.scraaps-topbar .scraaps-global-search button,
html body.is-logged header.scraaps-topbar .scraaps-global-search button svg{
  color:#4c2a85!important;
  stroke:#4c2a85!important;
  fill:currentColor!important;
}
html body.is-logged header.scraaps-topbar .scraaps-global-search input,
html body.is-logged header.scraaps-topbar .scraaps-global-search input:not([type=checkbox]):not([type=radio]){
  color:#292633!important;
  -webkit-text-fill-color:#292633!important;
  caret-color:#ff5e6c!important;
}
html body.is-logged header.scraaps-topbar .scraaps-global-search input::placeholder{
  color:#746f7d!important;
  -webkit-text-fill-color:#746f7d!important;
}

html body:not(.auth-body),
html body:not(.auth-body) .app-shell,
html body.page-index .container,
html body.active-inicio .container{
  background:#f8f6fc!important;
  background-image:radial-gradient(circle at 12% 18%,rgba(255,94,108,.025),transparent 27%),
                   radial-gradient(circle at 88% 44%,rgba(118,85,197,.035),transparent 30%)!important;
}
html body.page-index .home-welcome-card .welcome-line,
html body.active-inicio .home-welcome-card .welcome-line{
  background:#ff5e6c!important;
  background-image:none!important;
}
html body.page-index .home-welcome-card a.welcome-exit,
html body.active-inicio .home-welcome-card a.welcome-exit{
  color:#ff5e6c!important;
  -webkit-text-fill-color:#ff5e6c!important;
}

html body.page-index .home-composer-card.home-composer-launcher,
html body.active-inicio .home-composer-card.home-composer-launcher,
html body.page-index article.feed-card,
html body.active-inicio article.feed-card{
  background:#fff!important;
  border-color:rgba(76,42,133,.10)!important;
  box-shadow:0 9px 24px rgba(76,42,133,.075)!important;
}
html body.page-index .composer-avatar,
html body.active-inicio .composer-avatar,
html body.page-index .mini-avatar,
html body.active-inicio .mini-avatar{
  border-color:#7655c5!important;
  box-shadow:0 0 0 3px #fff!important;
}
html body.page-index .sponsored-badge,
html body.page-index .sponsor-badge,
html body.page-index .profile-sponsored-badge,
html body.page-index [class*="sponsored"] .badge,
html body.active-inicio .sponsored-badge,
html body.active-inicio .sponsor-badge,
html body.active-inicio .profile-sponsored-badge{
  background:#fff5f6!important;
  border-color:rgba(255,94,108,.48)!important;
  color:#d94857!important;
  -webkit-text-fill-color:#d94857!important;
}

html body .app-shell .bottom-nav,
html body.is-logged .app-shell .bottom-nav,
html body:not(.auth-body) .bottom-nav{
  background:#fff!important;
  border-top:1px solid rgba(76,42,133,.10)!important;
  box-shadow:0 -10px 28px rgba(76,42,133,.08)!important;
}
html body .app-shell .bottom-nav > a.nav-item,
html body .app-shell .bottom-nav > button.nav-item{
  color:#746f7d!important;
  -webkit-text-fill-color:#746f7d!important;
}
html body .app-shell .bottom-nav > a.nav-item.active,
html body .app-shell .bottom-nav > button.nav-item.active{
  color:#ff5e6c!important;
  -webkit-text-fill-color:#ff5e6c!important;
  background:#fff7f8!important;
}
html body .app-shell .bottom-nav > button#quickMenuOpen.nav-item.nav-create-clean > .nav-plus,
html body .app-shell .bottom-nav > a.nav-item.nav-create-clean > .nav-plus,
html body.is-logged .app-shell .bottom-nav .nav-create-clean .nav-plus,
html body .bottom-nav > button#quickMenuOpen .nav-plus{
  background:linear-gradient(145deg,#ff5e6c 0%,#ff7a85 100%)!important;
  background-color:#ff5e6c!important;
  background-image:linear-gradient(145deg,#ff5e6c 0%,#ff7a85 100%)!important;
  border:1px solid rgba(217,72,87,.42)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 12px 26px rgba(255,94,108,.26)!important;
}
.pwa-install-btn{
  background:#fff!important;
  border:2px solid #4c2a85!important;
  color:#292633!important;
  box-shadow:0 12px 30px rgba(76,42,133,.16)!important;
}
.pwa-install-btn b{color:#292633!important;}
.pwa-install-btn small{color:#746f7d!important;}
.pwa-install-close{color:#4c2a85!important;}