cardd inspired JAI profile

<--- PROFILE CARD · café claro · JAI ABOUT ME -->

<div class="rh-wrap">

  <!-- TOPBAR -->
  <div class="rh-topbar">
    <a class="rh-toplink" href="LINK" target="_blank">MORE</a>
    <a class="rh-toplink" href="LINK" target="_blank">MORE</a>
    <span class="rh-ham">≡</span>
  </div>

  <!-- TRENDING -->
  <div class="rh-trendbar">
    <div class="rh-tlabel">TRENDING</div>
    <div class="rh-tags">
      <a class="rh-tag" href="https://janitorai.com/search?q=mlm" target="_blank">#MLM</a>
      <a class="rh-tag rh-ta" href="https://janitorai.com/search?q=doll" target="_blank">#DOLL</a>
      <a class="rh-tag" href="https://janitorai.com/search?q=wlw" target="_blank">#WLW</a>
      <a class="rh-tag" href="https://janitorai.com/search?q=angst" target="_blank">#?</a>
      <a class="rh-tag" href="https://janitorai.com/search?q=roleplay" target="_blank">#YOU</a>
    </div>
  </div>

  <!-- BANNER -->
  <div class="rh-banner">
    <img class="rh-banner-img" src="https://files.catbox.moe/fmh863.jpg" alt="banner">
    <div class="rh-banner-overlay">
      <p class="rh-w2">WELCOME 2</p>
      <p class="rh-sn">HARUs' SITE...</p>
      <p class="rh-pg">01. 02. 03. 04. 05.</p>
    </div>
  </div>

  <!-- YOU CAN CHANGE THE IMAGE BUT DON'T REMOVE THE CREDITS -->
  <div class="rh-row">
    <div class="rh-c1">
      <img class="rh-charimg" src="https://files.catbox.moe/h4blzg.jpg" alt="char">
      <p class="rh-cr">cr @Shadzzw</p>
    </div>
    <div class="rh-c2">
      <p class="rh-nm">I'M <span class="rh-ac">HARU</span></p>
      <p class="rh-ds">prn prn · xteen · xx
      <p class="rh-ds">abt abt · mbti</p>
      <p class="rh-ds">more ahhh texttext</p>
      <div class="rh-nb"><p><b>notes</b> notes notes ahh</p></div>
    </div>
    <div class="rh-c3">
      <div class="rh-ll">LINKS</div>
      <a class="rh-li" href="LINK" target="_blank">KOFI??</a>
      <div class="rh-dv"></div>
      <a class="rh-li" href="LINK" target="_blank">CARD??</a>
      <div class="rh-dv"></div>
      <a class="rh-li" href="LINK" target="_blank">DISCORD??</a>
    </div>
  </div>

  <!-- NOW PLAYING -->
  <div class="rh-np">
    NOW PLAYING ▶ <b>DISEASE</b> Lady Gaga
  </div>

</div>


<style>

/* ══ ABOUT ME reset ══ */
.pp-uc-about-me,
.profile-about-me {
  padding: 0 !important;
  background: transparent !important;
}

/* ══ PROFILE BOX ══ */
.pp-uc-background,
.profile-uc-background-flex,
.profile-info-wrapper-box,
.css-vqimyu {
  background-color: #3b2a1a !important;
}
.profile-background-box-1,
.profile-background-box-2,
.profile-background-box-3 {
  background: transparent !important;
  opacity: 0 !important;
}

/* ══ PROFILE HSTACK ══ */
.profile-info-hstack,
.css-1uodvt1 {
  background-color: #3b2a1a !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border-bottom: 2px solid #c9a97a !important;
  align-items: flex-start !important;
}

/* ══ PFP ══ */
.pp-uc-avatar,
.profile-avatar,
.css-18bnokj,
.css-79elbk img,
.profile-avatar-container img,
.pp-uc-avatar-container img {
  width: 78px !important;
  height: 78px !important;
  border-radius: 8px !important;
  border: 3px solid #c9a97a !important;
  object-fit: cover !important;
  filter: sepia(15%) brightness(1.04) !important;
}
.pp-uc-avatar-container,
.profile-avatar-container,
.css-79elbk {
  width: 78px !important;
  height: 78px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* ══ USERNAME ══ */
.pp-uc-title,
.profile-title-heading,
.css-o5an2m,
.css-70qvj9 h2,
.profile-info-stack-inner h2 {
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #f5e6c8 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

/* ══ FOLLOWERS ══ */
.pp-uc-followers-count,
.profile-followers-count {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 10px !important;
  color: #c9a97a !important;
}
.pp-uc-followers-count span:nth-of-type(1),
.profile-followers-count span:nth-of-type(1) {
  font-weight: bold !important;
  color: #e8c898 !important;
  font-size: 12px !important;
}
.pp-uc-followers-count span:nth-of-type(2),
.profile-followers-count span:nth-of-type(2) {
  color: #a07850 !important;
}

/* ══ MEMBER SINCE ══ */
.pp-uc-member-since,
.profile-member-since-box {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 9px !important;
  color: #987050 !important;
}

/* ══ FOLLOW BUTTON ══ */
.Btn {
  background: #c9a97a !important;
  border-radius: 6px !important;
  border: 2px solid #e8c898 !important;
}
.Btn:before {
  background: #a08858 !important;
  border-radius: 6px !important;
}
.Btn span {
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 10px !important;
  color: #2a1c0e !important;
  font-weight: 900 !important;
}

/* ══ FONDO PÁGINA ══ */
.pp-page-background,
.profile-page-background {
  background-color: #2a1c0e !important;
}

/* ═══════════════════════
   ABOUT ME layout
   ═══════════════════════ */

.rh-wrap {
  width: 100%;
  border: 3px solid #c9a97a;
  background: #3b2a1a;
  overflow: hidden;
  font-family: "Arial Black", Arial, sans-serif;
}

/* TOPBAR */
.rh-topbar {
  background: #f0ddb8;
  border-bottom: 3px solid #c9a97a;
  padding: 7px 0;
  text-align: center;
}
.rh-toplink {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: #3b2a1a;
  text-decoration: none;
  letter-spacing: .1em;
  margin: 0 10px;
}
.rh-toplink:hover { color: #7a4a1a; }
.rh-ham {
  font-size: 20px;
  font-weight: 900;
  color: #3b2a1a;
  margin: 0 6px;
}

/* TRENDING */
.rh-trendbar {
  background: #4a3322;
  border-bottom: 3px solid #c9a97a;
  padding: 8px 12px;
}
.rh-tlabel {
  background: #2a1c0e;
  color: #f0ddb8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  text-align: center;
  padding: 5px 0;
  margin-bottom: 8px;
  border: 2px solid #c9a97a;
}
.rh-tags { line-height: 2.2; }
.rh-tag {
  display: inline-block;
  background: #3b2a1a;
  color: #f0ddb8;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px solid #c9a97a;
  text-decoration: none;
  margin-right: 4px;
}
.rh-tag:hover { background: #c9a97a; color: #2a1c0e; }
.rh-ta { background: #c9a97a !important; color: #2a1c0e !important; }

/* BANNER */
.rh-banner {
  position: relative;
  height: 120px;
  border-bottom: 3px solid #c9a97a;
  overflow: hidden;
  background: linear-gradient(135deg, #4a3322 0%, #7a5a38 50%, #c9a97a 100%);
}
.rh-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.6;
  filter: sepia(20%) brightness(0.85);
}
.rh-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  background: linear-gradient(to right, rgba(42,28,14,.65) 0%, transparent 65%);
}
.rh-w2 {
  font-size: 10px;
  font-weight: 900;
  color: #f0ddb8;
  letter-spacing: .18em;
  margin: 0 0 2px;
  text-shadow: 1px 1px 4px #1a0e04;
}
.rh-sn {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
  text-shadow: 2px 2px 6px #1a0e04;
  line-height: 1.1;
}
.rh-pg {
  font-size: 10px;
  font-weight: 900;
  color: #f0ddb8;
  text-align: right;
  margin: 0;
  text-shadow: 1px 1px 4px #1a0e04;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* ── CUERPO: overflow hidden en padre, float en hijos ── */
.rh-row {
  overflow: hidden;
  border-bottom: 3px solid #c9a97a;
  background: #3b2a1a;
}

.rh-c1 {
  float: left;
  width: 27%;
  background: #2a1c0e;
  border-right: 3px solid #c9a97a;
  text-align: center;
}
.rh-charimg {
  width: 100%;
  height: 108px;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: sepia(10%) brightness(1.02);
}
.rh-cr {
  font-family: "Courier New", Courier, monospace;
  font-size: 7px;
  color: #987050;
  margin: 4px 2px;
  display: block;
}

.rh-c2 {
  float: left;
  width: 44%;
  background: #4a3322;
  border-right: 3px solid #c9a97a;
  padding: 9px 7px;
}
.rh-nm {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #f0ddb8;
  margin: 0 0 4px;
  line-height: 1;
}
.rh-ac { color: #c9a97a; font-style: italic; }
.rh-ds {
  font-family: "Courier New", Courier, monospace;
  font-size: 8.5px;
  color: #d4bc90;
  margin: 0 0 2px;
  line-height: 1.45;
}
.rh-nb {
  border: 2px solid #c9a97a;
  padding: 4px 5px;
  margin-top: 5px;
  background: #2a1c0e;
}
.rh-nb p {
  font-family: "Courier New", Courier, monospace;
  font-size: 8px;
  color: #d4bc90;
  margin: 0;
  line-height: 1.4;
}
.rh-nb b { color: #f0ddb8; }

.rh-c3 {
  float: left;
  width: 26%;
  background: #2a1c0e;
}
.rh-ll {
  color: #f0ddb8;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-align: center;
  padding: 6px 2px;
  border-bottom: 2px solid #c9a97a;
  background: #3b2a1a;
}
.rh-li {
  font-family: "Courier New", Courier, monospace;
  font-size: 7.5px;
  color: #d4bc90;
  text-decoration: none;
  padding: 7px 5px;
  display: block;
  line-height: 1.3;
}
.rh-li:hover { background: #4a3322; color: #f0ddb8; }
.rh-dv {
  height: 1px;
  background: #c9a97a;
  opacity: .3;
}

/* NOW PLAYING */
.rh-np {
  background: #f0ddb8;
  color: #2a1c0e;
  font-family: "Courier New", Courier, monospace;
  font-size: 9px;
  padding: 7px 10px;
  letter-spacing: .04em;
  text-align: center;
}
.rh-np b {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 9px;
}

</style>

<style>
/* ═══════════════════════════════════════
   HEADER COMPLETO · café oscuro
   para pegar en el CSS EDITOR de JAI
   (perfil → ícono paleta → CSS editor)
   ═══════════════════════════════════════ */

/* ── FONDO HEADER ── */
._header_1lgb1_1,
header,
.profile-top-bar-flex-outer,
.pp-top-bar-outer {
  background-color: #2a1c0e !important;
  border-bottom: 2px solid #c9a97a !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}

/* ── BARRA INTERNA ── */
._bar_1lgb1_26,
.pp-top-bar,
.profile-top-bar,
.pp-top-bar-inner {
  background-color: #2a1c0e !important;
}

/* ── LOGO "Janitor" ── */
.pp-top-bar-logo,
.profile-top-bar-logo,
.glow-logo,
.css-1bmggo3 {
  background: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  box-shadow: 0 0 8px rgba(201,169,122,.25) !important;
  backdrop-filter: none !important;
}

/* texto "Janitor" */
.pp-top-bar-logo-name,
.profile-top-bar-logo-name,
.glow-logo h2 {
  color: #f0ddb8 !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  letter-spacing: .04em !important;
  text-shadow: 0 0 10px rgba(201,169,122,.5) !important;
}

/* texto "Beta" */
.pp-top-bar-logo-sub-name,
.profile-top-bar-logo-sub-name,
.glow-logo p {
  color: #c9a97a !important;
  font-family: "Courier New", Courier, monospace !important;
}

/* ── BARRA DE BÚSQUEDA ── */
.pp-top-bar-search,
.profile-top-bar-search,
.search-input,
.pp-top-bar-search-input,
._inputContainer_1d69i_26 {
  background-color: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  color: #f0ddb8 !important;
}

/* contenedor búsqueda */
.profile-top-bar-search-box,
.pp-top-bar-search-box,
._container_fgb7n_1 {
  background-color: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  border-radius: 20px !important;
}

/* ícono lupa */
.pp-top-bar-search-icon svg,
._searchIcon_1d69i_21 svg {
  color: #c9a97a !important;
  fill: #c9a97a !important;
}

/* placeholder "Search characters" */
#search-input {
  color: #987050 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 12px !important;
}
#search-input::placeholder {
  color: #987050 !important;
}

/* ── BOTÓN "Create character" ── */
.pp-top-bar-create-char,
.profile-top-bar-create-char,
.glow-on-hover {
  background: #3b2a1a !important;
  border: 2px solid #c9a97a !important;
  color: #f0ddb8 !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
}
.glow-on-hover:before {
  background: #c9a97a !important;
}
.glow-on-hover:hover {
  color: #2a1c0e !important;
  border-color: #c9a97a !important;
}

/* ── CAMPANA NOTIFICACIONES ── */
[aria-label="Notifications"],
._notificationsButton_abfem_7 {
  color: #c9a97a !important;
}
[aria-label="Notifications"] svg,
._notificationsButton_abfem_7 svg {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}

/* bolita de notif no leída */
._notificationsBadge_abfem_41 {
  background: #e8c898 !important;
  color: #2a1c0e !important;
}

/* ── AVATAR USUARIO (esquina derecha) ── */
.pp-top-bar-app-menu,
.profile-top-bar-app-menu,
.css-rvct59 {
  border: 2px solid #c9a97a !important;
  border-radius: 50% !important;
}

/* ── MENÚ DESPLEGABLE USUARIO ── */
.pp-top-bar-app-menu-list,
.profile-top-bar-app-menu-list,
.css-15hrz07 {
  background-color: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}

/* items del menú */
.pp-top-bar-app-menu-list a,
.css-15hrz07 a {
  color: #d4bc90 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 12px !important;
}
.pp-top-bar-app-menu-list a:hover,
.css-15hrz07 a:hover {
  background-color: #4a3322 !important;
  color: #f0ddb8 !important;
}

/* íconos del menú */
.css-15hrz07 a svg {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}

/* separadores del menú */
.css-15hrz07 hr {
  border-color: #c9a97a !important;
  opacity: .25 !important;
}

/* ── HISTORIAL DE BÚSQUEDA ── */
.pp-top-bar-search-history,
._dropdown_1d69i_108 {
  background-color: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
}
._historyItem_dg9q2_1 {
  color: #d4bc90 !important;
}
._historyItem_dg9q2_1:hover {
  background: #4a3322 !important;
}
._queryText_dg9q2_67 {
  color: #d4bc90 !important;
  font-family: "Courier New", Courier, monospace !important;
}
._iconWrapper_dg9q2_61 svg {
  fill: #c9a97a !important;
}

/* ── MOBILE HEADER ── */
.css-1n2ma9q,
.pp-top-header {
  background-color: #2a1c0e !important;
  border-bottom: 2px solid #c9a97a !important;
}
.css-1hv2wai {
  background-color: #2a1c0e !important;
}

/* título móvil "janitorai" */
.pp-top-bar-title,
.profile-top-bar-title,
.css-16g2f4q {
  color: #f0ddb8 !important;
  font-family: "Courier New", Courier, monospace !important;
}

/* botón back móvil */
.pp-top-bar-back-button,
.profile-top-bar-back-button,
.css-1v7jfo7 {
  color: #c9a97a !important;
}
.css-1v7jfo7 svg,
.css-1dwr89y {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}

/* ── MOBILE FOOTER NAV ── */
.pp-mnb-wrapper,
.css-1qf4tpw {
  background-color: #2a1c0e !important;
  border-top: 2px solid #c9a97a !important;
}
.pp-mnb-container a,
.css-1cyxci9 a {
  color: #c9a97a !important;
}
.pp-mnb-container svg,
.css-1cyxci9 svg {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}


/* ═══════════════════════════════════════
   SECCIÓN CHARACTERS + FILTROS
   ═══════════════════════════════════════ */

/* ── TAB "CHARACTERS" ── */
.pp-tabs-button,
.profile-tabs-button,
.css-1jj3srb {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 12px !important;
  color: #987050 !important;
  background: transparent !important;
  letter-spacing: .06em !important;
}

/* tab seleccionado */
.css-1jj3srb[aria-selected=true],
.css-1jj3srb[data-selected] {
  color: #f0ddb8 !important;
  font-weight: bold !important;
  background: transparent !important;
}

/* línea azul bajo tab → dorada */
.pp-tabs-indicator,
.profile-tabs-indicator,
.css-1y3jyt3 {
  background: #c9a97a !important;
  height: 2px !important;
}

/* ── BARRA BÚSQUEDA DE PERSONAJES (móvil) ── */
.pp-fl-search-input,
.profile-character-search-input,
.css-3rot3 {
  background-color: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  color: #f0ddb8 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
  border-radius: 20px !important;
}
.profile-character-search-input-group,
.css-1jy826p > .css-1y0e7gb {
  background: transparent !important;
}

/* ── BOTÓN FILTRO (embudo) ── */
.pp-fl-filter-button,
.profile-filter-button,
.css-1n2in4t {
  background: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  color: #c9a97a !important;
  border-radius: 8px !important;
}
.pp-fl-filter-button svg,
.profile-filter-button svg,
.css-1n2in4t svg {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}

/* ── MENÚ "LATEST" (dropdown) ── */
.transparent .react-select__control {
  background-color: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.transparent .react-select__value-container > div,
.transparent .react-select__single-value {
  color: #f0ddb8 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
}
.transparent .react-select__dropdown-indicator svg,
.css-8mmkcg {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}
.css-1wy0on6 span {
  background: #c9a97a !important;
  opacity: .4 !important;
}

/* menú desplegable latest abierto */
.transparent .react-select__menu,
.css-1nmdiq5-menu {
  background-color: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
.react-select__menu-list,
.css-qr46ko {
  background-color: #3b2a1a !important;
}
.transparent .react-select__option {
  color: #d4bc90 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
  background: transparent !important;
}
.transparent .react-select__option:hover {
  background-color: #4a3322 !important;
  color: #f0ddb8 !important;
}
.transparent .react-select__option--is-selected {
  background-color: #c9a97a !important;
  color: #2a1c0e !important;
}

/* ── BADGE "1 characters" ── */
.pp-pg-total,
.profile-badge-flex-outer,
.Btn2-purple {
  background: #3b2a1a !important;
  border: 2px solid #c9a97a !important;
  border-radius: 20px !important;
}
.pp-pg-total:before,
.Btn2-purple:before {
  background: #4a3322 !important;
  border-radius: 20px !important;
}
.pp-pg-total-count,
.profile-badge-total-count,
.Btn2-purple > .css-wd8hou strong {
  color: #f0ddb8 !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 12px !important;
}
.pp-pg-total-text,
.profile-badge-total-text,
.Btn2-purple > .css-wd8hou p {
  color: #c9a97a !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 10px !important;
}

/* ── PAGINACIÓN (flechas y números) ── */
.pp-pg-prev-button,
.pp-pg-next-button,
.profile-pagination-prev-button,
.profile-pagination-next-button-icon,
.css-1gpctw1 {
  color: #c9a97a !important;
  border-color: #c9a97a !important;
}
.css-1gpctw1 svg {
  fill: #c9a97a !important;
}
.pp-pg-page-button,
.css-1bejyq4 > div {
  color: #d4bc90 !important;
  font-family: "Courier New", Courier, monospace !important;
}
.pp-pg-page-button-active,
.profile-pagination-page-button-active {
  color: #f0ddb8 !important;
  font-weight: bold !important;
  border-bottom: 2px solid #c9a97a !important;
}

/* ── MENÚ NOTIFICACIONES popup ── */
._notificationsPopover_abfem_72 {
  background-color: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}
._popoverTitle_abfem_109 {
  color: #f0ddb8 !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 13px !important;
}
._notificationItem_k9ox5_2 {
  border-bottom: 1px solid rgba(201,169,122,.2) !important;
}
._subject_k9ox5_116,
._subjectUnread_k9ox5_125 {
  color: #f0ddb8 !important;
  font-family: "Courier New", Courier, monospace !important;
}
._body_k9ox5_132 {
  color: #d4bc90 !important;
  font-family: "Courier New", Courier, monospace !important;
}
._timestamp_k9ox5_145 {
  color: #987050 !important;
  font-family: "Courier New", Courier, monospace !important;
}
._unreadIndicator_k9ox5_23 {
  background: #c9a97a !important;
}
._markAllReadButton_abfem_123 svg,
._closeButton_abfem_124 svg,
._deleteAllButton_abfem_496 svg {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}
._loadMoreButton_abfem_382 {
  color: #c9a97a !important;
  border-color: #c9a97a !important;
  font-family: "Courier New", Courier, monospace !important;
}

/* ── POPUP FILTRO DE TAGS ── */
.css-16r55pk {
  background-color: #3b2a1a !important;
}
.css-1dljitb header,
.css-dcyl1x {
  background-color: #2a1c0e !important;
  color: #f0ddb8 !important;
  border-bottom: 1px solid #c9a97a !important;
}
._tag_1fwqk_6,
._collapsedContainer_1lgbq_78 button {
  background: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  color: #d4bc90 !important;
  font-family: "Courier New", Courier, monospace !important;
}
._tag_1fwqk_6:hover {
  background: #c9a97a !important;
  color: #2a1c0e !important;
}
.css-lyo4r5 svg {
  fill: #c9a97a !important;
}


/* ═══════════════════════════════════════
   FIX: línea turquesa → café + notif popup
   ═══════════════════════════════════════ */

/* ── QUITAR/REEMPLAZAR línea turquesa bajo tabs ── */
[role="tablist"] *,
.chakra-tabs__tab-indicator,
.css-1pnfobv,
.css-1y3jyt3,
.css-o15dxe {
  background: #c9a97a !important;
}

/* línea activa turquesa específica de JAI */
[data-active] + .css-o15dxe,
.css-1jj3srb[aria-selected=true]::after,
.chakra-tabs__tab[aria-selected=true]::after {
  background-color: #c9a97a !important;
  border-color: #c9a97a !important;
}

/* forzar cualquier borde/outline turquesa a café */
*:focus,
*[data-focus] {
  box-shadow: 0 0 0 2px #c9a97a !important;
  outline-color: #c9a97a !important;
}

/* color global turquesa → café en bordes de tabs */
.css-vqimyu [role="tablist"],
.css-vqimyu .chakra-tabs__tablist {
  border-bottom: 2px solid #c9a97a !important;
}
.chakra-tabs__tab[aria-selected=true] {
  border-bottom-color: #c9a97a !important;
  color: #f0ddb8 !important;
}
.chakra-tabs__tab {
  color: #987050 !important;
  font-family: "Courier New", Courier, monospace !important;
  letter-spacing: .08em !important;
}

/* ── POPUP NOTIFICACIONES (caja gris) ── */
/* fondo principal */
[role="dialog"],
.chakra-popover__content,
.css-1qh7fz2,
.css-r6z5ec,
.css-1q1jsfr {
  background-color: #2a1c0e !important;
  border: 2px solid #c9a97a !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.6) !important;
  border-radius: 10px !important;
}

/* header "notifications" */
[role="dialog"] header,
.chakra-popover__header,
.css-kdh0hh,
.css-1k4xzf4 {
  background-color: #3b2a1a !important;
  border-bottom: 1px solid #c9a97a !important;
  color: #f0ddb8 !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  border-radius: 8px 8px 0 0 !important;
}

/* body scroll área */
[role="dialog"] .chakra-popover__body,
.css-1jgp07q {
  background-color: #2a1c0e !important;
}

/* botones X y 🗑️ */
[role="dialog"] button[aria-label],
.chakra-popover__close-btn,
._closeButton_abfem_124,
._markAllReadButton_abfem_123,
._deleteAllButton_abfem_496 {
  background: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  border-radius: 8px !important;
  color: #c9a97a !important;
}
[role="dialog"] button[aria-label] svg {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}

/* cada notificación */
._notificationItem_k9ox5_2,
.css-1hnm4y4 {
  background: transparent !important;
  border-bottom: 1px solid rgba(201,169,122,.15) !important;
}
._notificationItem_k9ox5_2:hover {
  background: #3b2a1a !important;
}

/* icono de notif (logo JAI gris) */
._notificationItem_k9ox5_2 img,
._notificationItem_k9ox5_2 .chakra-avatar {
  border: 1.5px solid #c9a97a !important;
  border-radius: 8px !important;
}

/* texto "new follower" / texto principal */
._subject_k9ox5_116,
._subjectUnread_k9ox5_125,
.css-1g6bpzq {
  color: #f0ddb8 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 12px !important;
}

/* "@usuario posted..." en rosa → café claro */
._subject_k9ox5_116 b span,
._subjectUnread_k9ox5_125 b span,
.css-1g6bpzq span[style*="color"] {
  color: #c9a97a !important;
}

/* nombre del character en azul → dorado */
._subject_k9ox5_116 a,
._subjectUnread_k9ox5_125 a,
.css-1g6bpzq a {
  color: #c9a97a !important;
  text-decoration: none !important;
}

/* texto secundario "someone started following you" */
._body_k9ox5_132,
.css-bjn8wh {
  color: #987050 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
}

/* timestamp "6 days ago" */
._timestamp_k9ox5_145,
.css-1sjnpkq {
  color: #705030 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 10px !important;
}

/* punto indicador no leído */
._unreadIndicator_k9ox5_23 {
  background: #c9a97a !important;
}

/* botón "load more" */
._loadMoreButton_abfem_382 {
  color: #c9a97a !important;
  border: 1.5px solid #c9a97a !important;
  background: #3b2a1a !important;
  font-family: "Courier New", Courier, monospace !important;
}


/* ═══════════════════════════════════════
   NOTIFICACIONES POPUP - selectores correctos
   según guía de Puppy (rentry.co/jaielements)
   ═══════════════════════════════════════ */

/* ── Contenedor popup notificaciones ── */
[class*="notificationsPopover_"],
[class*="notificationsContainer_"] {
  background-color: #2a1c0e !important;
  border: 2px solid #c9a97a !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.7) !important;
  border-radius: 10px !important;
}

/* ── Header "notifications" ── */
[class*="popoverTitle_"],
[class*="notificationsHeader_"] {
  background-color: #3b2a1a !important;
  color: #f0ddb8 !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  border-bottom: 1px solid #c9a97a !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 14px !important;
}

/* ── Botones X y basura ── */
[class*="closeButton_"],
[class*="deleteAllButton_"],
[class*="markAllReadButton_"] {
  background: #3b2a1a !important;
  border: 1.5px solid #c9a97a !important;
  border-radius: 8px !important;
  color: #c9a97a !important;
}
[class*="closeButton_"] svg,
[class*="deleteAllButton_"] svg,
[class*="markAllReadButton_"] svg {
  fill: #c9a97a !important;
  color: #c9a97a !important;
}

/* ── Cada item de notificación ── */
[class*="notificationItem_"] {
  background: transparent !important;
  border-bottom: 1px solid rgba(201,169,122,.15) !important;
}
[class*="notificationItem_"]:hover {
  background: #3b2a1a !important;
}

/* ── Texto principal (new follower / @user posted) ── */
[class*="subject_"],
[class*="subjectUnread_"] {
  color: #f0ddb8 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 12px !important;
}

/* ── Nombre de usuario en rosa → dorado ── */
[class*="subject_"] b span,
[class*="subjectUnread_"] b span,
[class*="subject_"] [style*="color"],
[class*="subjectUnread_"] [style*="color"] {
  color: #c9a97a !important;
}

/* ── Links de personajes en azul → dorado ── */
[class*="subject_"] a,
[class*="subjectUnread_"] a {
  color: #c9a97a !important;
  text-decoration: none !important;
}
[class*="subject_"] a:hover,
[class*="subjectUnread_"] a:hover {
  color: #f0ddb8 !important;
}

/* ── Texto secundario "someone started following you" ── */
[class*="body_"] {
  color: #987050 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
}

/* ── Timestamp "6 days ago" ── */
[class*="timestamp_"] {
  color: #705030 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 10px !important;
}

/* ── Punto indicador no leído ── */
[class*="unreadIndicator_"] {
  background: #c9a97a !important;
}

/* ── Avatar de notif ── */
[class*="notificationItem_"] .chakra-avatar,
[class*="notificationItem_"] img {
  border: 1.5px solid #c9a97a !important;
  border-radius: 8px !important;
}

/* ── Botón "load more" ── */
[class*="loadMoreButton_"] {
  color: #c9a97a !important;
  border: 1.5px solid #c9a97a !important;
  background: #3b2a1a !important;
  font-family: "Courier New", Courier, monospace !important;
  border-radius: 6px !important;
}
[class*="loadMoreButton_"]:hover {
  background: #4a3322 !important;
}

/* ── Línea turquesa CHARACTERS → dorada ── */
[class*="tabIndicator_"],
.chakra-tabs__tab-indicator {
  background: #c9a97a !important;
}
.chakra-tabs__tab[aria-selected=true] {
  border-bottom-color: #c9a97a !important;
  color: #f0ddb8 !important;
  box-shadow: inset 0 -2px 0 #c9a97a !important;
}
.chakra-tabs__tab {
  color: #987050 !important;
  font-family: "Courier New", Courier, monospace !important;
}


/* ═══════════════════════════════════════
   FIX LÍNEA TURQUESA - tab CHARACTERS
   ═══════════════════════════════════════ */

.pp-tabs-wrapper {
    background: #2a1c0e;
    border-bottom: 2px solid #c9a97a;
}
.css-1jj3srb[aria-selected=true], .css-1jj3srb[data-selected] {
    color: #f0ddb8;
}
.pp-tabs-indicator {
    background: #c9a97a;
    box-shadow: none;
}
/* Tab no seleccionado */
.chakra-tabs__tab {
  color: #987050 !important;
  border-bottom: 3px solid transparent !important;
  box-shadow: none !important;
}

/* La barra indicadora animada que desliza */
.chakra-tabs__tab-indicator {
  background: #c9a97a !important
</style>

<!-- BOT CARD · app style · café oscuro · JAI -->
<style>

/* ── WRAPPER ── */
.pp-cc-wrapper,
.profile-character-card-wrapper {
  background: #1e1508 !important;
  border: 2px solid #3b2a1a !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
  min-width: 220px !important;
  width: 100% !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.pp-cc-wrapper:hover,
.profile-character-card-wrapper:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.65) !important;
}

/* ── APAGAR GRADIENTES ── */
.pp-cc-gradient-1,
.pp-cc-gradient-2,
.pp-cc-gradient-3 {
  background: transparent !important;
  opacity: 0 !important;
}

/* ── TOOLBAR SUPERIOR ── */
.pp-cc-wrapper::before {
  content: "📅 jan 7, 2026        💬 chat now   ● ● ●" !important;
  display: block !important;
  background: #2a1c0e !important;
  color: #c9a97a !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 8px !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid #3b2a1a !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* ── BARRA SECUNDARIA ── */
.pp-cc-wrapper .profile-character-card-stack::before {
  content: "♡  ↻   haru.jpg                              ⋮" !important;
  display: block !important;
  background: #2a1c0e !important;
  color: #987050 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 7.5px !important;
  padding: 5px 8px !important;
  border-bottom: 1px solid #3b2a1a !important;
}

/* ── IMAGEN — más alta para dar sensación de más espacio ── */
.pp-cc-avatar,
.profile-character-card-avatar-image {
  width: 100% !important;
  height: 170px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #3b2a1a !important;
  filter: sepia(15%) contrast(1.05) brightness(0.92) !important;
}

.profile-character-card-avatar-aspect-ratio {
  border-radius: 0 !important;
  aspect-ratio: unset !important;
  height: 170px !important;
  width: 100% !important;
}

/* ── RIBBON ── */
.pp-cc-ribbon-wrap,
.profile-character-card-ribbon-wrap {
  background: #c9a97a !important;
  box-shadow: none !important;
  clip-path: none !important;
  border-radius: 4px 0 0 4px !important;
}
.pp-cc-chats svg { fill: #1e1508 !important; }
.pp-cc-chats-count,
.profile-character-card-chats-count {
  color: #1e1508 !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 9px !important;
}

/* ── NOMBRE (About heading) ── */
.pp-cc-name,
.profile-character-card-name-box {
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #f0ddb8 !important;
  padding: 8px 8px 2px !important;
  letter-spacing: .02em !important;
}

/* ── DESCRIPCIÓN ── */
.pp-cc-description,
.profile-character-card-description-markdown-container {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 8.5px !important;
  color: #d4bc90 !important;
  line-height: 1.6 !important;
  padding: 0 8px 4px !important;
}
.pp-cc-description p,
.profile-character-card-description-markdown-container p {
  margin: 0 !important;
}

/* ── STAR LINE → Navigation label ── */
.pp-cc-star-line,
.profile-character-card-star-line {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pp-cc-star-line::before,
.profile-character-card-star-line::before {
  content: "Navigation" !important;
  display: block !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #f0ddb8 !important;
  padding: 7px 8px 3px !important;
}
.pp-cc-star,
.profile-character-card-star { display: none !important; }

/* ── TAGS → nav buttons ── */
.pp-cc-tags,
.profile-character-card-tags {
  padding: 0 8px 8px !important;
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
.pp-cc-tags-item,
.pp-cc-tags-regular {
  background: #2a1c0e !important;
  border: 1.5px solid #c9a97a !important;
  color: #c9a97a !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 8.5px !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}
.pp-cc-tags-item::after,
.pp-cc-tags-regular::after {
  content: " ›" !important;
}

/* ── TOKEN → search bar ── */
.profile-character-card-box,
.css-1c9wmts {
  background: #2a1c0e !important;
  border-top: 1px solid #3b2a1a !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  width: 100% !important;
}
.pp-cc-tokens-count,
.profile-character-card-tokens-count {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 8.5px !important;
  color: #705030 !important;
  display: block !important;
  width: 100% !important;
}
.pp-cc-tokens-count::before,
.profile-character-card-tokens-count::before {
  content: "🔍  " !important;
}

/* ── USERNAME ── */
.pp-cc-creator-name,
.profile-character-card-creator-name-box {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 7.5px !important;
  color: #c9a97a !important;
  text-decoration: underline !important;
}

/* ── GRID de botcards — más columnas/más ancho ── */
.pp-cc-list-container,
.css-2n7zf2>div>div:nth-child(2) {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}

</style>