Just gray template for janitor ai

Just gray free template!
By: @BerryTheBunny on JAL

<div class="profile-container">

<div class="main-hero-bg">

<div class="faded-banner">
<img class="banner-img-src" src="https://files.catbox.moe/mdg9u5.jpeg" alt="Banner Image">

<div class="profile-badges">
<div class="profile"></div>
</div>

<div class="banner-content">
<h1>ARCHIVE_X</h1>
<p>A minimalist catalogued data profile structured cleanly within gray environments.</p>
</div>
</div>

<div class="profile-split-row">
<div class="content-left-panel">
<div class="identity-left">
<h2 class="username-display">@UserSystem</h2>
<div class="pp-uc-followers-count"></div>
</div>

<div class="quote-container">
<div class="quote-text">Everything that can be imagined is real, provided you configure the parameters correctly within your own reality script.</div>
</div>

<div class="status-wrapper">
<div class="status-label">Status</div>
<div class="status-info-box">
<p>Currently processing system optimization updates. Operational metrics look green. Building components autonomously.</p>
</div>
</div>

<div class="action-zone" style="margin-top: 10px;">
<div class="dummy-text-left">System access panel options defined below:</div>
<div class="button-grid-3">
<a href="https://google.com" class="grid-btn" target="_blank">
<span>Button1</span>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/></svg>" alt="">
</a>
<a href="https://google.com" class="grid-btn" target="_blank">
<span>Button2</span>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/></svg>" alt="">
</a>
<a href="https://google.com" class="grid-btn" target="_blank">
<span>Button3</span>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/></svg>" alt="">
</a>
</div>
</div>
</div>

<div class="pfp-right-zone">
<div class="pfp-right">
<img class="pfp-img-src" src="https://files.catbox.moe/qmxvgc.jpeg" alt="Profile Picture">
</div>
</div>
</div>

</div>

<div class="content-layout-box">
<div class="blended-header" style="margin-left: 0; margin-top: 10px;">CONTENT</div>

<div class="grid-3-boxes">
<div class="info-card-sub">
<h4>Database Node A</h4>
<p>Detailed analysis parameter logs indicating stable runtime environments, consistent structural configuration, and responsive layout adjustments.</p>
</div>
<div class="info-card-sub">
<h4>Database Node B</h4>
<p>Data packets processing metadata variables successfully. CSS architecture holds custom alignment values safely within design guidelines.</p>
</div>
<div class="info-card-sub">
<h4>Database Node C</h4>
<p>System runtime logs showcase absolute grid mapping efficiency. Custom aesthetic features match original user specifications cleanly.</p>
</div>
</div>

<div class="scrollable-content-wrapper">
<div class="scroll-inner-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis feugiat erat. Cras pulvinar elementum neque, vitae sodales sapien luctus nec. Mauris pulvinar feugiat dictum. Sed pulvinar ligula ut est interdum, sed aliquet lectus eleifend. Proin gravida varius elit elementum tristique. Mauris feugiat nisl diam, non elementum elit rhoncus non. Donec scelerisque purus a feugiat imperdiet. Proin at risus sed velit facilisis tempus nec vel sem. Aliquam efficitur ex metus, at ultrices eros finibus sit amet. Curabitur sed arcu varius, sollicitudin mi at, feugiat ipsum. Maecenas tristique sem sit amet magna finibus, vitae vulputate velit molestie. Etiam feugiat, turpis vitae varius sodales, lectus ipsum congue diam, sit amet feugiat sapien augue pellentesque dolor.</p>
</div>
</div>

<div class="bottom-faded-indicator">&lt;- These boxes are scrollable! -&gt;</div>
</div>

<div class="blended-header">Gallery</div>
<div class="gallery-scroll-container">
<img src="https://picsum.photos/300/400?random=1" alt="" class="gallery-img">
<img src="https://picsum.photos/300/400?random=2" alt="" class="gallery-img">
<img src="https://picsum.photos/300/400?random=3" alt="" class="gallery-img">
<img src="https://picsum.photos/300/400?random=4" alt="" class="gallery-img">
<img src="https://picsum.photos/300/400?random=5" alt="" class="gallery-img">
<img src="https://picsum.photos/300/400?random=6" alt="" class="gallery-img">
</div>

<div class="series-scroll-container">

<div class="series-card">
<div class="series-img-wrapper">
<span class="series-badge">Series #1</span>
<img src="https://picsum.photos/400/500?random=10" alt="Series 1 Cover">
</div>
<div class="series-content-pane">
<h3>TagSerieshere</h3>
<div class="series-tags-row">
<div class="series-tiny-tag">Alpha</div>
<div class="series-tiny-tag">Beta</div>
<div class="series-tiny-tag">Gamma</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<a href="https://google.com" class="bots-nav-btn" target="_blank">Go to bots -></a>
</div>
</div>

<div class="series-card">
<div class="series-img-wrapper">
<span class="series-badge">Series #2</span>
<img src="https://picsum.photos/400/500?random=11" alt="Series 2 Cover">
</div>
<div class="series-content-pane">
<h3>TagSerieshere</h3>
<div class="series-tags-row">
<div class="series-tiny-tag">Delta</div>
<div class="series-tiny-tag">Eps</div>
<div class="series-tiny-tag">Zeta</div>
</div>
<p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper.</p>
<a href="https://google.com" class="bots-nav-btn" target="_blank">Go to bots -></a>
</div>
</div>

<div class="series-card">
<div class="series-img-wrapper">
<span class="series-badge">Series #3</span>
<img src="https://picsum.photos/400/500?random=12" alt="Series 3 Cover">
</div>
<div class="series-content-pane">
<h3>TagSerieshere</h3>
<div class="series-tags-row">
<div class="series-tiny-tag">Eta</div>
<div class="series-tiny-tag">Theta</div>
<div class="series-tiny-tag">Iota</div>
</div>
<p>Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<a href="https://google.com" class="bots-nav-btn" target="_blank">Go to bots -></a>
</div>
</div>

</div>

<div class="blended-header">MOSTLY USED TAGS:</div>
<div class="tags-wrapper">
<div class="tags-container-grid">
<div class="profile-meta-tag">OC</div>
<div class="profile-meta-tag">Female</div>
<div class="profile-meta-tag">Male</div>
<div class="profile-meta-tag">fempov</div>
<div class="profile-meta-tag">horror</div>
<div class="profile-meta-tag">Sci-Fi</div>
<div class="profile-meta-tag">Fantasy</div>
<div class="profile-meta-tag">Angst</div>
<div class="profile-meta-tag">Fluff</div>
<div class="profile-meta-tag">Mystery</div>
<div class="profile-meta-tag">Action</div>
<div class="profile-meta-tag">Comedy</div>
<div class="profile-meta-tag">Dark</div>
<div class="profile-meta-tag">Cyber</div>
<div class="profile-meta-tag">Retro</div>
</div>
</div>

</div>



<style>
/* Base Styles & Font Setup */
* {
box-sizing: border-box;
font-family: 'Monstra', sans-serif;
font-weight: 200;
}

body {
margin: 0;
background-color: #121212;
color: #e0e0e0;
overflow-x: hidden;
}

/* Profile Container Constraints */
.profile-container {
width: 100vw;
margin: 0 auto;
margin-left: -60px;
position: relative;
background-color: #1a1a1a;
padding-bottom: 50px;
}

/* Main Wide Background setup */
.main-hero-bg {
background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
position: relative;
width: 100%;
padding-bottom: 30px;
}

/* Faded Wide Banner Container */
.faded-banner {
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
}

/* Banner Image Element with bottom fade mask */
.banner-img-src {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

.banner-content {
max-width: 600px;
z-index: 2;
position: relative;
text-align: center;
}

.banner-content h1 {
font-size: 3rem;
margin: 0 0 10px 0;
text-transform: uppercase;
letter-spacing: 2px;
}

.banner-content p {
font-size: 1rem;
color: #cccccc;
line-height: 1.4;
}

/* Target Selectors for Badges injected on top corner of banner */
.profile-badges, .profile, .css-1n7vfh0, .css-hjkukh, .css-1uodvt1>.css-8g8ihq>div:nth-child(3) {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
display: flex;
gap: 8px;
}

/* Username system hooks for background styling/positioning rules */
.profile-info-stack-inner-flex, .css-70qvj9or, .css-1uodvt1>.css-8g8ihq>div:nth-child(1), .pp-uc-title, .profile-title-heading {
position: absolute;
top: 70px;
right: 40px;
z-index: 10;
text-align: right;
color: rgba(255, 255, 255, 0.4);
font-size: 1.1rem;
letter-spacing: 1px;
}

/* Split Main Row Layout */
.profile-split-row {
display: flex;
padding: 0 40px;
margin-top: -120px;
position: relative;
z-index: 5;
gap: 40px;
align-items: flex-start;
}

/* Left side layout panel for info, quote, and status */
.content-left-panel {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 130px;
}

/* Right side layout panel for PFP and grid buttons below it */
.pfp-right-zone {
width: 400px;
display: flex;
flex-direction: column;
gap: 20px;
flex-shrink: 0;
}

/* Profile Picture Container and Image Element styles */
.pfp-right {
width: 400px;
height: 500px;
border-radius: 12px;
border: 4px solid #1a1a1a;
overflow: hidden;
background: #333;
}

.pfp-img-src {
width: 100%;
height: 100%;
object-fit: cover;
}

.identity-left {
width: 100%;
}

.username-display {
font-size: 2.5rem;
margin: 0;
color: #ffffff;
}

/* Quote Block with pseudo element scaling */
.quote-container {
padding: 0;
}

.quote-text {
font-size: 1.2rem;
font-style: italic;
color: #b5b5b5;
position: relative;
}

.quote-text::first-letter {
font-size: 3rem;
font-weight: bold;
color: #666;
float: left;
line-height: 0.65;
margin-right: 5px;
margin-top: 5px;
}

/* Status Info Box */
.status-wrapper {
padding: 0;
}

.status-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #888;
margin-bottom: 6px;
padding-left: 5px;
}

.status-info-box {
background-color: #222222;
border: 1px solid #2d2d2d;
border-radius: 6px;
padding: 20px;
width: 100%;
}

.status-info-box p {
margin: 0;
line-height: 1.5;
color: #cccccc;
}

/* 3 Button Grid Section positioned below the Profile Picture */
.action-zone {
padding: 0;
width: 100%;
}

.dummy-text-left {
font-size: 0.9rem;
color: #777;
margin-bottom: 15px;
}

.button-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.grid-btn {
display: flex;
align-items: center;
justify-content: space-between;
background: #262626;
border: 1px solid #333;
padding: 10px 15px;
border-radius: 4px;
text-decoration: none;
color: #bbb;
font-size: 0.85rem;
position: relative;
overflow: hidden;
transition: background 0.2s;
}

.grid-btn:hover {
background: #333333;
color: #fff;
}

.grid-btn img {
width: 16px;
height: 16px;
opacity: 0.25;
transform: rotate(15deg);
position: absolute;
right: 8px;
bottom: 8px;
}

/* Low Opacity Headers */
.blended-header {
font-size: 4rem;
font-weight: 900;
color: white;
letter-spacing: 4px;
text-transform: uppercase;
margin: 40px 0 10px 40px;
user-select: none;
line-height: 1;
}

/* Horizontal Gallery Container */
.gallery-scroll-container {
display: flex;
gap: 15px;
overflow-x: auto;
padding: 0 40px 20px 40px;
scroll-behavior: smooth;
}

.gallery-scroll-container::-webkit-scrollbar {
height: 6px;
}
.gallery-scroll-container::-webkit-scrollbar-thumb {
background: #333;
border-radius: 3px;
}

.gallery-img {
width: 300px;
height: 400px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
border: 1px solid #2a2a2a;
background-color: #222;
}

/* Series Horizontal Container */
.series-scroll-container {
display: flex;
gap: 15px;
overflow-x: auto;
padding: 20px 40px;
}

.series-scroll-container::-webkit-scrollbar {
height: 6px;
}
.series-scroll-container::-webkit-scrollbar-thumb {
background: #333;
border-radius: 3px;
}

.series-card {
display: flex;
background: #1e1e1e;
border: 1px solid #2a2a2a;
border-radius: 6px;
min-width: 500px;
max-width: 500px;
height: 300px;
overflow: hidden;
flex-shrink: 0;
}

.series-img-wrapper {
position: relative;
width: 300px;
height: 400px;
background-color: #2b2b2b;
flex-shrink: 0;
}

.series-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}

.series-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.8);
padding: 2px 5px;
font-size: 0.65rem;
border-radius: 3px;
letter-spacing: 0.5px;
z-index: 2;
}

.series-content-pane {
flex-grow: 1;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: #222222;
overflow: hidden;
}

.series-content-pane h3 {
margin: 0 0 4px 0;
font-size: 0.95rem;
color: #eee;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.series-tags-row {
display: flex;
gap: 4px;
justify-content: center;
margin-bottom: 6px;
}

.series-tiny-tag {
background: #2a2a2a;
padding: 1px 6px;
font-size: 0.65rem;
border-radius: 2px;
position: relative;
color: #aaa;
overflow: hidden;
min-width: 38px;
text-align: center;
}

.series-tiny-tag::after {
content: "#";
position: absolute;
right: 1px;
bottom: -2px;
font-size: 0.55rem;
opacity: 0.15;
transform: rotate(-15deg);
}

.series-content-pane p {
margin: 0 0 6px 0;
font-size: 0.75rem;
color: #888;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.bots-nav-btn {
align-self: flex-start;
background: #333;
color: #fff;
text-decoration: none;
padding: 4px 10px;
font-size: 0.7rem;
border-radius: 3px;
transition: background 0.2s;
margin-top: auto;
}

.bots-nav-btn:hover {
background: #444;
}

/* Mostly Used Tags Section */
.tags-wrapper {
padding: 0 40px;
}

.tags-container-grid {
background: transparent;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 110px;
align-content: flex-start;
gap: 10px;
padding: 10px 0;
overflow-x: auto;
}

.profile-meta-tag {
background: #222;
border: 1px solid #2d2d2d;
padding: 6px 14px;
border-radius: 4px;
font-size: 0.85rem;
color: #ccc;
width: 130px;
text-align: center;
}

/* Content Layout Box: Configured to span the full page width at the bottom */
.content-layout-box {
margin: 40px;
width: calc(100% - 80px);
display: flex;
flex-direction: column;
clear: both;
}

/* Widescreen 3-column setup */
.grid-3-boxes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 25px;
}

.info-card-sub {
background: #222;
border: 1px solid #2d2d2d;
border-radius: 6px;
overflow: hidden;
}

.info-card-sub h4 {
margin: 0;
background: #2a2a2a;
padding: 12px 15px;
font-size: 0.95rem;
color: #fff;
border-bottom: 1px solid #333;
}

.info-card-sub p {
padding: 15px;
margin: 0;
font-size: 0.85rem;
color: #bbb;
line-height: 1.5;
}

/* Scrollable Container Content section */
.scrollable-content-wrapper {
position: relative;
background: #1e1e1e;
border-left: 3px solid #555;
padding: 20px;
margin-top: 10px;
}

.scroll-inner-box {
max-height: 180px;
overflow-y: auto;
padding-right: 10px;
}

.scroll-inner-box::-webkit-scrollbar {
width: 4px;
}
.scroll-inner-box::-webkit-scrollbar-thumb {
background: #444;
}

.scroll-inner-box p {
margin: 0;
font-size: 0.85rem;
line-height: 1.6;
color: #aaa;
}

/* Bottom Faded Label Box */
.bottom-faded-indicator {
margin-top: 25px;
text-align: center;
padding: 12px 0;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(40,40,40,0.8) 50%, rgba(255,255,255,0) 100%);
font-size: 0.8rem;
color: #777;
letter-spacing: 2px;
}

/* Mobile Media Query Rules */
@media (max-width: 768px) {
  .profile-container {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    min-height: 100vh !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    text-align: center;
  }

  /* Reset layout structure to display PFP zone above descriptions */
  .profile-split-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 0 15px;
    margin-top: -60px; /* Pulls PFP up into the faded banner area */
    gap: 20px;
  }

  /* Target the username wrapper and force it above the text panel, directly beneath PFP */
  .identity-left {
    width: 100%;
    order: -1; /* Shifts username and follower element directly underneath the PFP container */
    margin-bottom: 10px;
  }

  /* Force profile picture container to scale naturally on smaller views */
  .pfp-right-zone {
    width: 100% !important;
    max-width: 280px;
    height: auto !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .pfp-right {
    width: 100% !important;
    max-width: 280px;
    height: 400px !important;
    aspect-ratio: 4 / 5;
  }

  .content-left-panel {
    padding-top: 10px;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  /* Absolute header/badge positions cleanup for compressed views */
  .profile-badges, .profile-info-stack-inner-flex, .css-70qvj9or {
    position: static !important;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
  }

  /* Component text layout alignments */
  .quote-text::first-letter {
    float: none;
    display: inline;
  }

  .blended-header {
    font-size: 2.2rem;
    margin: 30px 0 10px 0;
    text-align: center;
  }

  .gallery-scroll-container, .series-scroll-container, .tags-wrapper {
    padding: 0 15px;
  }

  .series-card {
    min-width: 280px;
    max-width: 280px;
    flex-direction: column;
    height: auto;
  }

  .series-img-wrapper {
    width: 100%;
    height: 180px;
  }

  .content-layout-box {
    margin: 20px 0;
    width: 100%;
  }

  .grid-3-boxes {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
</style>



<style>
.css-credit{
Top:0px;
font-size:15px;
font-family:Arial,sans-serif;
opacity:.25;
z-index:9999;
color:#bdbdbd;
user-select:none;
}

.css-credit a{
color:#8fd3ff; /* Change this to any color you like */
text-decoration:none;
font-weight:600;
}

.css-credit a:hover{
text-decoration:underline;
}
</style>
<div class="css-credit">
CSS entirely made by:
<a href="https://janitorai.com/profiles/bc38b096-7c9f-401a-b83c-68f5a9d74e0d_profile-of-berry-the-bunny" target="_blank">@BerryTheBunny</a>
</div>

<style>
.pp-uc-avatar {
Display: none;
}
.pp-uc-title {
Display: none;
}
.pp-uc-followers-count {
Display: none;
}
.pp-uc-member-since {
Display: none;
}
/*bio on top, bot cards at the bottom*/
.profile-page-flex {
  flex-direction: column;
  display: flex;
  z-index: 0;
  gap: 10; /*change if you want a gap between them*/
}
.pp-uc-background, .pp-uc-background > div {
  box-shadow: none !important;
}
.profile-info-hstack {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-1wfbrwg {
  flex-direction: column;
  display: flex;
}
</style>

<style>
/* --- Global Popover & Typography Rules --- */
[class*="notificationsPopover_"],
.pp-top-bar-notifications-popover,
.profile-top-bar-notifications-popover {
  background-color: #222222; /* Dark gray background */
  color: #e0e0e0;            /* Light gray text */
  font-family: 'Monsta', sans-serif;
  font-weight: 300;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Remove shadows globally from all children */
[class*="notificationsPopover_"] *,
.pp-top-bar-notifications-popover * {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- Header Section --- */
[class*="popoverHeader_"],
.pp-top-bar-notifications-popover-header,
.profile-top-bar-notifications-popover-header {
  border-bottom: 1px solid #444444; /* Medium gray border */
}

[class*="popoverTitle_"],
.pp-top-bar-notifications-popover-title,
.profile-top-bar-notifications-popover-title {
  color: #f0f0f0;
  font-family: 'Monsta', sans-serif;
  font-weight: 300;
}

/* --- Buttons & Icons (Trash, Read All, Close) --- */
[class*="deleteAllButton_"],
.pp-top-bar-notifications-delete-all,
[class*="markAllReadButton_"],
.pp-top-bar-notifications-mark-all-read,
[class*="closeButton_"],
.pp-top-bar-notifications-close {
  background: transparent;
  color: #cccccc;
}

[class*="deleteAllButton_"] svg,
.pp-top-bar-notifications-delete-all svg,
[class*="markAllReadButton_"] svg,
.pp-top-bar-notifications-mark-all-read svg,
[class*="closeButton_"] svg,
.pp-top-bar-notifications-close svg {
  fill: #cccccc; /* Light gray icons */
}

/* --- Notification Items List --- */
[class*="notificationItem_"],
.pp-top-bar-notifications-item {
  background-color: #2b2b2b; /* Slightly lighter dark gray for contrast */
  border-bottom: 1px solid #3a3a3a;
}

/* --- Image / Avatar Sizing --- */
/* Target outer, inner, bot, and user avatar wrappers/elements to enforce 500x600px */
[class*="avatarSection_"],
.pp-top-bar-notifications-item-avatar-section,
[class*="avatarContainer_"],
.pp-top-bar-notifications-item-avatar,
[class*="notificationItem_"] img:nth-of-type(1),
[class*="characterAvatar_"],
[class*="notificationItem_"] img:nth-of-type(2),
[class*="userAvatar_"] {
  width: 500px !important;
  height: 600px !important;
  max-width: 500px !important;
  max-height: 600px !important;
  object-fit: cover; /* Ensures images scale beautifully without stretching */
}

/* --- Notification Text & Highlighting --- */
[class*="subject_"],
.pp-top-bar-notifications-item-subject {
  color: #f0f0f0; /* Crisp light gray */
  font-family: 'Monsta', sans-serif;
  font-weight: 300;
}

[class*="body_"],
.pp-top-bar-notifications-item-body {
  color: #cccccc; /* Muted light gray */
  font-family: 'Monsta', sans-serif;
  font-weight: 300;
}

[class*="timestamp_"],
.pp-top-bar-notifications-item-timestamp {
  color: #888888; /* Darker gray timestamp */
  font-family: 'Monsta', sans-serif;
  font-weight: 300;
}

/* Highlights */
[class*="highlightUsername_"],
[class*="highlightCharacterBody_"] {
  color: #ffffff; /* Off-white highlight */
  font-weight: 300;
}

/* --- Unread Notification States --- */
[class*="subjectUnread_"] {
  color: #ffffff; /* Bright white for unread */
  font-weight: 300;
}

[class*="unreadIndicator_"],
.pp-top-bar-notifications-item-unread {
  background-color: #888888; /* Mid-gray unread bar instead of a bright color */
}

/* --- Individual Item Actions (Archive / Trash Icon) --- */
[class*="archiveSection_"],
.pp-top-bar-notifications-item-archive-section,
[aria-label="Archive notification"] {
  background: transparent;
}

[aria-label="Archive notification"] svg,
.pp-top-bar-notifications-item-archive svg {
  fill: #cccccc;
}
</style>





<style>
/* --- TOP BAR & NAVIGATION --- */
.pp-top-bar {
background: #222 !important;
border-bottom: 1px solid #2d2d2d !important;
border-radius: 18px;
box-shadow: none !important;
backdrop-filter: blur(6px);
padding: 8px 12px;
position: relative;
}

.pp-top-bar::after {
display: none !important; /* Removes duplicate bottom line rule */
}

.pp-top-bar-logo-name,
.pp-top-bar-logo-name::first-letter,
.pp-top-bar-logo-sub-name,
.pp-mnb-wrapper,
.pp-mnb-wrapper * {
font-family: 'Monstra', sans-serif !important;
font-weight: 200 !important;
color: #bbb !important;
}

.pp-top-bar-logo-name {
font-size: 40px;
}
.pp-top-bar-logo-name {
Text-shadow: none;
}
.pp-top-bar-logo-sub-name {
Text-shadow: none;
}
.pp-top-bar-logo-name::first-letter {
font-size: 50px;
}

.pp-top-bar-logo-sub-name {
font-size: 30px;
}

.pp-top-bar-create-char {
display: none;
}

.pp-mnb-wrapper {
background: #222 !important;
margin-left: 0;
position: fixed;
z-index: 9999;
border-bottom: 1px solid #2d2d2d !important;
box-shadow: none !important;
padding: 6px 10px;
}

.pp-mnb-wrapper::after {
display: none !important;
}

.pp-mnb-container a {
background: #1a1a1a !important;
border: 1px solid #2d2d2d !important;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
}

.pp-mnb-container>div:last-child {
border-radius: 50%;
overflow: hidden;
}

.pp-mnb-container>div:last-child img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}

.pp-mnb-container svg {
fill: #bbb !important;
}
</style>


<style>
/* User menu */
:has(> .profile-top-bar-app-menu-list)
.profile-top-bar-app-menu-list > *{
display:contents;
}

:has(> .profile-top-bar-app-menu-list){
visibility:visible!important;
transform:unset!important;
}

.profile-top-bar-app-menu-list{
max-height:unset;
min-width:unset;
max-width:unset;
margin:0;
overflow:visible;
opacity:1!important;
visibility:visible!important;
width:300px;

transform:unset!important;
transition:transform .5s ease;

position:fixed;
top:0;
bottom:0;
left:100%;

/* Colors and styling applied here */
background:#222!important;
border-left:1px solid #2d2d2d!important;
box-shadow:-4px 0 20px rgba(0,0,0,.5)!important;

color:#bbb!important;
font-family:'Monstra', sans-serif!important;
font-weight: 200!important;

padding:20px;
}

.profile-top-bar-app-menu-list[style*="none"]{
transform:translateX(-100%)!important;
}

.profile-top-bar-app-menu-list *{
color:#bbb!important;
font-family:'Monstra', sans-serif!important;
font-weight: 200!important;
}

.profile-top-bar-app-menu-list button{
background:#1a1a1a!important;
border:1px solid #2d2d2d!important;
color:#bbb!important;
font-family:'Monstra', sans-serif!important;
font-weight: 200!important;
border-radius:12px;
box-shadow:none;
transition:.3s ease;
}

.profile-top-bar-app-menu-list button:hover{
background:#2d2d2d!important;
color:#fff!important;
}

.profile-top-bar-app-menu-list a{
color:#bbb!important;
font-family:'Monstra', sans-serif!important;
font-weight: 200!important;
text-decoration:none;
}

.profile-top-bar-app-menu-list a:hover{
color: #fff!important;
text-shadow:none;
}
</style>



<style>
.pp-tabs-button,
.pp-tabs-indicator {
  display: none;
}

/* ==========================================================================
   2. SYSTEM COUNTERS & INFRASTRUCTURE
   ========================================================================== */
.Btn2-purple {
  background: transparent;
  border: none !important;
  box-shadow: none;
  text-shadow: none;
  margin-top: -1.7rem;
  margin-bottom: .75rem;
  gap: .4rem;
}

.Btn2-purple::before {
  background: transparent;
  transition: none;
}

.Btn2-purple:hover {
  text-shadow: none;
}

.profile-badge-flex-inner {
  width: 100%;
  font-weight: 200 !important;
}

.pp-pg-total p {
  width: 100%;
  text-align: center;
  font-size: 0;
}

/* System logs applied right next to numerical data indicators */
.Btn2-purple strong {
  font-family: 'Monstra', sans-serif !important;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 200 !important;
  line-height: 1;
  color: #bbb !important;
  text-shadow: none;
}

.Btn2-purple strong::before {
  content: "";
  color: #bbb !important;
  font-size: 1.1rem;
  text-shadow: none;
  display: inline-block;
  margin-right: 5px;
  font-weight: 200 !important;
}

.Btn2-purple strong::after {
  content: " Your Text";
  color: #bbb !important;
  font-size: 1.1rem;
  text-shadow: none;
  font-weight: 200 !important;
}

.profile-pagination-flex-outer:first-of-type {
  order: -1;
}

.character-list-pagination-flex {
  flex-flow: row wrap;
  justify-content: center;
  padding: 10px;
  align-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  gap: 8px;
}

.profile-filters-flex-inner-hassearchfilter {
  flex: 1 0 100%;
  order: -1;
}

.profile-filters-flex-inner, .profile-filters-flex-outer, .character-list-pagination-flex>div:nth-child(1) {
    display: contents;
}

/* ==========================================================================
   3. SEARCH BAR INTERFACE
   ========================================================================== */
.pp-fl-search-input {
  color: #bbb !important;
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
  font-size: 14px;
  border-radius: 20px;
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  box-shadow: none;
  transition: background .35s ease, color .35s ease;
  padding: 10px 15px;
}

.pp-fl-search-input:hover,
.pp-fl-search-input:focus,
.pp-fl-search-input:focus-visible {
  background: #1a1a1a !important;
  border-color: #2d2d2d !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* ==========================================================================
   4. CONSOLE CONTROL BUTTONS
   ========================================================================== */
.pp-fl-filter-button {
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 20px;
  transition: .35s ease;
  z-index: 1;
  padding: 10px;
}

.pp-fl-filter-button:hover {
  background: #1a1a1a !important;
  box-shadow: none;
}

.pp-fl-filter-button svg {
  color: #bbb !important;
  transform: scale(1.3);
}

.profile-filter-modal-body-flex [class*="tagsContainer"] {
  width: calc(100% - 3rem);
}
/* ==========================================================================
GLOBAL MATRIX FONTS & SECTION HEADER (FIXED ELEMENT TARGET)
========================================================================== */
.profile-page-container-flex-box::before {
  content: "Your Text";
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-family: 'Monstra', sans-serif !important;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 200 !important;
  line-height: 1.2;
  letter-spacing: 0px;
  pointer-events: none;
  color: #bbb !important;
  text-shadow: none;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.profile-filter-modal-body-flex [class*="Button"] {
  width: fit-content;
  padding: .75rem 1.75rem;
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 4px;
  color: #bbb !important;
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
  font-size: 13px;
  transition: .35s ease;
}

.profile-filter-modal-body-flex [class*="Button"]:hover {
  background: #1a1a1a !important;
}

/* ==========================================================================
   5. AGENT MODAL POPUPS & INTERFACE OVERLAYS
   ========================================================================== */
#root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > * {
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 4px;
  box-shadow: none;
  padding: 1.5rem;
  max-width: 50rem;
  position: relative;
}

/* Grid overlay opacity reduced further for clarity */
#root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > *::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-size: 100% 4px;
  z-index: 99;
  pointer-events: none;
}

[class*="gradient"] {
  background: transparent;
}

/* MODAL TERMINAL HEADER */
div:has(.profile-filter-modal-body-flex) .chakra-modal__header {
  font-size: 0;
  padding: 1rem 1rem .15rem;
}

div:has(.profile-filter-modal-body-flex) .chakra-modal__header::before {
  content: "FILTER SELECTION MENU";
  display: block;
  font-family: 'Monstra', sans-serif !important;
  font-size: 18px;
  font-weight: 200 !important;
  letter-spacing: 0px;
  color: #bbb !important;
  text-shadow: none;
}

/* SUBTITLE LOGS */
.profile-filter-modal-body-tags-flex-box-heading {
  font-size: 0;
  padding: 0 1rem .75rem;
  margin-top: -.45rem;
}

.profile-filter-modal-body-tags-flex-box-heading::after {
  content: "Database parameters configuration...";
  display: block;
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
  font-size: 13px;
  color: #bbb !important;
}

/* CLOSE CONSOLE TERMINAL BUTTON */
[class*="close-btn"] {
  top: .9rem;
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 4px;
  color: #bbb !important;
  font-size: 14px;
  font-weight: 200 !important;
  transition: .35s ease;
}

[class*="close-btn"]:hover {
  color: #ffffff !important;
  background: #1a1a1a !important;
}

/* MAIN BODY AREA */
.chakra-modal__body {
  margin-top: .25rem;
  padding: .9rem;
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 4px;
}

.profile-filter-modal-body-flex [class*="container"] {
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border-radius: 0;
}

[class*="collapsedContainer"] {
  padding-left: 0;
}

[class*="motionDiv"] {
  margin-bottom: 0 !important;
}

/* COLLAPSIBLE STRUCTURE BUTTONS */
[class*="expandButton"] {
  width: fit-content;
  padding: .6rem 1.5rem;
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 4px;
  color: #bbb !important;
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
  font-size: 13px;
  margin-bottom: 1rem;
  transition: .35s ease;
}

[class*="expandButton"]:hover {
  background: #1a1a1a !important;
}

[class*="expandButton"]::before {
  content: "OPEN SECTION";
  margin: 0 .75rem;
  font-weight: 200 !important;
}

.profile-filter-modal-body-flex
[class*="container"]:has([class*="expanded"])
[class*="expandButton"]::before {
  content: "CLOSE SECTION";
}

/* SYSTEM SELECTION TAG NODES */
button[class*="tag"] {
  width: 100%;
  justify-content: center;
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 4px;
  color: #bbb !important;
  padding: 10px;
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
  font-size: 13px;
  box-shadow: none !important;
  transition: .35s ease;
}

button[class*="tag"]:hover {
  color: #ffffff !important;
  background: #1a1a1a !important;
  border-color: #2d2d2d !important;
}

button[class*="tagSelected"] {
  background: #1a1a1a !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 4px;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: 'Monstra', sans-serif !important;
  font-size: 13px;
  font-weight: 200 !important;
}

.profile-filters-flex-inner-onorderchanged {
  margin-right: -20px;
}

/* ==========================================================================
   6. SORT MENU CONSOLE SELECTS
   ========================================================================== */
.css-b62m3t-container {
  z-index: 14;
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 20px;
  box-shadow: none;
  backdrop-filter: none;
  transform: scale(1.1);
  transform-origin: left;
  transition: .35s ease;
}

.css-b62m3t-container * {
  box-shadow: none !important;
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
  color: #bbb !important;
}

:is(
  .react-select__control.css-13cymwt-control,
  .react-select__control--is-focused
) {
  background: transparent !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: none;
}

.react-select__value-container--has-value {
  border-right: none !important;
}

.react-select__single-value.css-1dimb5e-singleValue {
  color: #bbb !important;
  font-family: 'Monstra', sans-serif !important;
  font-size: 14px;
  font-weight: 200 !important;
}

.react-select__dropdown-indicator.css-1xc3v61-indicatorContainer svg,
.transparent .react-select__dropdown-indicator {
  color: #2d2d2d !important;
  fill: #2d2d2d !important;
  transition: transform .35s ease,color .35s ease;
}

.react-select__indicator-separator.css-1u9des2-indicatorSeparator {
  display: none !important;
}

.react-select__menu {
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 20px;
  overflow: hidden;
}

.react-select__option {
  background: #222 !important;
  color: #bbb !important;
  font-family: 'Monstra', sans-serif !important;
  font-size: 13px;
  border-radius: 20px;
  font-weight: 200 !important;
  padding: 10px 15px;
  transition: .3s ease;
}

.react-select__option:hover,
.react-select__option--is-focused {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

.react-select__option--is-selected {
  display: none;
}

/* ==========================================================================
   7. INTERFACE TOOLTIPS & PAGINATION
   ========================================================================== */
.css-jdhqy4 > div {
  background: #222 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 4px;
  color: #bbb !important;
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
  font-size: 13px;
  box-shadow: none;
  padding: 10px;
}

.css-jdhqy4 > div * {
  background: transparent !important;
  color: #bbb !important;
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
}

.profile-pagination-prev-hstack {
  margin: 0 auto;
  width: fit-content;
}

.pp-pg-page-button {
  font-family: 'Monstra', sans-serif !important;
  font-weight: 200 !important;
  font-size: 15px;
  color: #bbb !important;
}
</style>

<style>
.transparent .react-select__control:hover .css-8mmkcg {
  transform: rotate(180deg) scale(1.2);
  filter: none;
  color: #ffffff !important;
}

.css-8mmkcg {
  font-weight: 200 !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              filter 0.3s ease,
              color 0.3s ease;
}
</style>


<style>
div:has(>.profile-uc-follow-flex){
margin-top: 0px;
position: relative;
width: 100vw;
margin-left: -60px;
}
.pp-uc-follow-button,
.pp-uc-follow-button:before{
background: #222 !important;
padding: 15px;
text-align: center;
border: 1px solid #2d2d2d !important;
transition: background 0.3s;
font-size: 28px !important;
/* Faded at both sides */
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
border-radius:30px;
font-family: 'Monstra', sans-serif !important;
font-weight: 200 !important;
color: #bbb !important;
}
.pp-uc-follow-button:hover {
background: #1a1a1a !important;
}
.profile-uc-follow-text,
.css-15w88gn>span:nth-child(1){
font-family: 'Monstra', sans-serif !important;
font-weight: 200 !important;
color: #bbb !important;
}
.pp-uc-options-menu span:first-child{
font-size:0;
line-height:0;
margin:0;
padding:0;
}
.css-1hzyiq5{
display:none;
}

.pp-uc-options-menu{
background: #222 !important;
padding: 15px;
text-align: center;
border: 1px solid #2d2d2d !important;
transition: background 0.3s;
font-size: 28px !important;
/* Faded at both sides */
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
border-radius:30px;
font-family: 'Monstra', sans-serif !important;
font-weight: 200 !important;
color: #bbb !important;
}

.pp-uc-options-menu:hover {
background: #1a1a1a !important;
}

.pp-uc-options-menu span:first-child::after{
content:"☰";
font-size:30px;
font-family: 'Monstra', sans-serif !important;
font-weight: 200 !important;
color: #bbb !important;
}
</style>


<style>
/* code by @BerryTheBunny (Modified with custom styling variables) */
/* Global font application across target botcard properties */
.css-1s5evre, .pp-cc-name, .profile-character-card-description-box, .pp-cc-tags-item {
    font-family: 'Monstra', sans-serif !important;
    font-weight: 200 !important;
    color: #bbb !important;
}

/* setting botcard backgrounds to transparent */
.pp-cc-wrapper, .pp-cc-wrapper>*:not(.css-1s5evre){
    background: transparent !important;
}

/* Default 2-column grid layout for desktop, laptops, and tablets */
.pp-cc-list-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 550px)) !important;
    gap: 20px;
    justify-content: center !important;
    align-items: start !important;
    width: 100% !important;
}

/* sizing of the botcard */
.pp-cc-wrapper{
    width: 100% !important;
    max-width: 550px;
    height: 450px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    transition: all 300ms ease;
    position: relative;
}

.css-1s5evre a{
    display: contents;
}

/* Main card wrapper styled to requested theme properties */
.css-1s5evre {
    background: #222 !important;
    border: 1px solid #2d2d2d !important;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto 1fr auto; /* Explicitly structures top, middle, and bottom rows */
    gap: 0px;
    height: 100%;
    margin: 15px auto !important;
    border-radius: 10px;
    position: relative;
    z-index: 5;
    align-items: start !important;
    outline: none !important;
}
/* Image column (Avatar Container) - Taller Adjustment */
.css-1q7rmf0 {
    grid-area: 1 / 1 / 4 / 2; /* Extended down to row 4 to stand tall alongside the new description+tags stack */
    margin: 45px 15px 15px 15px !important;
    height: calc(100% - 60px) !important;
    overflow: hidden !important;
    position: relative;
    border-radius: 8px !important;
    align-self: stretch !important;
    border: 2px solid #2d2d2d !important;
}
/* Avatar wrapper */
.css-1q7rmf0 > *{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Bot Name - Moved slightly up */
.pp-cc-name {
    position: absolute;
    left: 15px;
    top: -5px;
    z-index: 10;
    font-size: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
.pp-cc-name::first-letter {
Font-size: 40px;
}
/* Bot card Description container */
.profile-character-card-description-box {
    grid-area: 1 / 2 / 2 / 3;
    margin: 0;
    margin-top: 55px;
    padding: 10px 15px 10px 10px;
    max-height: 190px;
    overflow: hidden auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid #2d2d2d;
}

/* botcard tags - Placed at the bottom left side of the description column */
.pp-cc-tags {
    grid-area: 2 / 2 / 3 / 3; /* Placed explicitly under the description inside column 2 */
    margin: 15px 15px 15px 10px !important;
    padding: 0;
    max-height: 200px;
    overflow: hidden auto;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 6;
    justify-content: flex-start; /* Aligns tags to the left side */
}

/* Individual tag nodes styled within style sheet color rules */
.pp-cc-tags-item {
    border-radius: 4px;
    padding: 3px 8px;
    background: #1a1a1a !important;
    border: 1px solid #2d2d2d !important;
    font-size: 0.8rem;
}

/* getting rid of the star separator and username */
.pp-cc-star-line, .pp-cc-creator-name{
    display: none;
}

/* botcard effect on hover */
.pp-cc-wrapper:hover{
    transform: scale(1.05);
}

.pp-cc-description p {
Color: white;
}
.pp-cc-description p::first-letter {
    font-size: 30px;
}

/* Limitless Tag Reset */
.pp-cc-tags-wrap:has(.pp-tag-limitless) {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    z-index: auto !important;
    pointer-events: auto !important;
}

.pp-tag-limitless {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    z-index: auto !important;
    text-transform: none !important;
    opacity: 1 !important;
    font-weight: normal !important;
    font-size: inherit !important;
    color: inherit !important;
    border: none;
}

/* --- CHAT RIBBON POSITIONING AND BADGE SHAPE --- */
.profile-character-card-stats-box{
    position: absolute !important;
    right: 15px !important;
    bottom: 15px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 10 !important;
    width: auto !important;
}

.pp-cc-ribbon, .profile-character-card-ribbon {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
}

.pp-cc-ribbon-wrap, .profile-character-card-ribbon-wrap {
    background: #1a1a1a !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border: 1px solid #2d2d2d !important;
}

.pp-cc-chats, .profile-character-card-chats- {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
}

.pp-cc-chats-count, .profile-character-card-chats-count {
    color: #bbb !important;
    font-weight: 600;
    font-size: 13px;
    font-family: 'Monstra', sans-serif;
}

/* Cleaning up unnecessary properties */
.pp-cc-wrapper:hover, .pp-cc-wrapper[data-hover]{box-shadow:none}
.css-1s5evre a{display:contents}
.css-1awld45,.css-1cui3us,.css-1wqmh16,.css-1x04uxb,.css-5v5qgx,.css-8828od,.css-nip9dx,.css-xrg4vd,.pp-cc-creator-name{display:none}
.pp-cc-wrapper>*{box-shadow:none!important}
.pp-cc-star-line{visibility:hidden}
div:has(> .css-1s5evre),div:has(~ .css-1s5evre){background:0 0!important}
.css-0,.css-1henxb,.css-effh3d{background:0 0!important}
._content_1chl9_11 {box-shadow:none;background:0 0;}
.pp-cc-tokens-count, .profile-character-card-box {
    display: none;
}

/* --- MOBILE & IPHONE RESPONSIVE OVERRIDES --- */
@media (max-width: 768px) {
    .pp-cc-list-container {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 20px;
    }
}
</style>

<style>
/* Creates a low-opacity image container locked strictly to the right side */
.css-1s5evre::before {
  content: "✦" !important;
  position: absolute !important;
Font-size: 30px;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  opacity: 0.15;
  background-size: contain !important;
  background-position: bottom right !important;
  background-repeat: no-repeat !important;
  z-index: 1;
  pointer-events: none;
}
</style>

<style>
.profile-badge, .profile-badges {
Display: none;
Margin: 0px;
</style>