@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

html,
body,
textarea,
button,
input,
.dark * {
    font-family: 'Comic Neue', cursive !important;
}
html,
body,
.dark {
    background: url("https://cdn.prod.website-files.com/6768f29a6d5da42209173f20/6768f29b6d5da42209177129_dik%20(32).svg") center/cover no-repeat fixed !important;
    background-color: #ffeef7 !important;
    color: #4b003b !important;
    font-family: "Quicksand", sans-serif !important;
}

/* Override more background layers */
.dark .bg-token-default,
.dark .bg-token-surface-primary,
.dark .bg-token-surface-secondary,
.dark .bg-token-surface-tertiary,
.dark .bg-token-sidebar-surface,
.dark .sidebar-header,
.dark .h-full,
.dark .overflow-hidden,
.dark .relative,
.dark .flex,
.dark .items-center,
.dark .flex-col,
.dark .w-full,
.dark .postform-style,
.row,
.dark, .rlabel, .label, .threadstats,
.dark .min-h-screen {
    background-color: rgba(255, 245, 250, 0.92) !important;
    color: #4b003b !important;
}

/* ===== JSCHAN/VICHAN POST TARGETING ===== */
/* Target all post containers */
.post,
.post-container,
div.post,
div[id^="reply_"],
div[id^="thread_"],
.thread,
.reply,
div.reply,
table.post,
.post.reply,
div.post.reply,
blockquote.post,
.post-cell,
.post-wrapper {
    background: rgba(255, 240, 250, 0.85) !important;
    border-radius: 1px !important;
    padding: 1rem !important;
    border: 1px solid #ffcade !important;
    box-shadow: 0 0 10px rgba(255, 170, 210, 0.4) !important;
    color: #4b003b !important;
}

/* OP posts might have different styling */
.post.op,
div.post.op,
.op,
div[id^="thread_"].op {
    background: rgba(255, 230, 245, 0.9) !important;
    border: 2px solid #ffaad4 !important;
}

/* Chat messages */
.dark .group.w-full.border-b,
.dark .markdown.prose,
.dark .bg-token-message-surface {
    background-color: rgba(255, 240, 250, 0.85) !important;
    color: #872657 !important;
    border-radius: 1px;
    padding: 1rem;
    border: 1px solid #ffcade;
}

/* Sidebar, thread list, nav */
.dark nav,
.dark .bg-token-sidebar-surface-primary,
.dark .bg-token-sidebar-surface {
    background-color: #fff1f7 !important;
    color: #4b003b !important;
    border-right: 1px solid #ffc6da;
}

/* Header texts and share button background unified */
.dark nav,
.dark nav * {
    color: #4b003b !important;
    background-color: #fff1f7 !important;
}

/* Buttons, dropdowns, icons */
.dark button,
.dark svg,
.dark [class*="text-token"] {
    color: #872657 !important;
}

/* Text input area */
.dark textarea,
.dark .relative.flex.h-full.max-w-full,
.dark form {
    background-color: #fffafc !important;
    color: #4b003b !important;
    border: 1px solid #ffc6da !important;
    border-radius: 1px !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: #ffb5d6;
    border-radius: 1px;
}
::-webkit-scrollbar-track {
    background: #fff0f5;
}

/* Fix any leftover white text */
.dark *,
.dark *:not(code):not(pre) {
    color: #82176b !important;
    text-shadow: none !important;
}

/* Optional cute touches */
.dark ::selection {
    background: #ffdef4;
    color: #ff6ce0;
}

.dark .group.w-full.text-token-text-primary {
    border: 2px solid #ffc1e3 !important;
    border-radius: 1px !important;
    padding: 12px !important;
    margin: 8px 0 !important;
    background: rgba(255, 240, 250, 0.85) !important;
    box-shadow: 0 0 10px rgba(255, 170, 210, 0.4);
}
.dark [data-message-author-role="assistant"] .group.w-full.text-token-text-primary {
    border-color: #ffaad4 !important;
    background: rgba(255, 230, 245, 0.9) !important;
}

/* ===== FLOATING DECORATIONS ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.33;

  background-image:
    url("https://i.ibb.co/bnPd2T5/XiPv.gif"),
    url("https://i.ibb.co/bnPd2T5/XiPv.gif"),
    url("https://i.ibb.co/xS7BLq7W/revolver.gif"),
    url("https://i.ibb.co/xS7BLq7W/revolver.gif"),
    url("https://i.ibb.co/bnPd2T5/XiPv.gif");

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

  background-size:
    122px, 88px,
    77px, 55px,
    77px;

  background-position:
    9% 18%, 84% 27%,
    11% 68%, 57% 31%,
    41% 52%;

  animation: float1 25s ease-in-out infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3;
  opacity: 0.44;

  background-image:
    url("https://i.ibb.co/Qh259wG/batswoop.gif"),
    url("https://i.ibb.co/7dnKF7WR/output-onlinegiftools.gif"),
    url("https://i.ibb.co/Qh259wG/batswoop.gif"),
    url("https://i.ibb.co/7dnKF7WR/output-onlinegiftools.gif");

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  background-size:
    52px, 62px, 50px, 59px;

  background-position:
    73% 79%,
    19% 83%, 88% 13%,
    35% 24%;

  animation: float2 25s ease-in-out infinite;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.24;

  background-image: url("https://i.ibb.co/5X4L7jfL/33Hn.gif");
  background-repeat: repeat;
  background-size: 377px;
  background-position: 68% 59%;

  animation: float3 25s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% {
    background-position:
      3% 10%, 90% 5%,
      5% 80%, 60% 20%,
      30% 50%;
  }
  50% {
    background-position:
      5% 12%, 88% 7%,
      10% 75%, 55% 25%,
      32% 52%;
  }
}

@keyframes float2 {
  0%, 100% {
    background-position:
      85% 95%,
      10% 90%,
      95% 10%,
      20% 30%;
  }
  50% {
    background-position:
      30% 50%,
      50% 10%,
      70% 40%,
      60% 5%;
  }
}

@keyframes float3 {
  0%, 100% {
    background-position: 75% 65%;
  }
  50% {
    background-position: 75% 65%;
  }
}

.dark .group-data-scrolled-from-top\/scrollport\:shadow-\(--sharp-edge-top-shadow\).px-2.z-30.top-0.sticky.bg-token-bg-elevated-secondary {
    background-color: rgba(255, 222, 227, .85) !important;
    border: 3px ridge #ffc6da !important;
    color: #4b003b !important;
}

/* Fix text container backgrounds for better purple text contrast */
.dark .markdown.prose,
.dark .bg-token-message-surface,
.dark .group.w-full.border-b {
    background-color: rgba(255, 240, 250, 0.85) !important;
    color: #4b003b !important;
    border-radius: 1px;
    padding: 0.8rem;
    border: 3px hidden #ffcade;
    box-shadow: 0 0 10px rgba(255, 170, 210, 0.35);
}

/* Remove or tone down any gray backdrops on text */
.dark .some-gray-backdrop-class {
    background-color: transparent !important;
}

/* Kill dark gray backdrops on text containers */
.dark [class*="bg-token-surface-primary"],
.dark [class*="bg-token-surface-secondary"],
.dark [class*="bg-token-surface-tertiary"],
.dark [class*="bg-token-bg-elevated-secondary"],
.dark [class*="bg-token-bg-elevated-primary"] {
    background-color: rgba(255, 240, 250, 0.85) !important;
    box-shadow: none !important;
    border: 1px solid #ffcade !important;
    color: #4b003b !important;
}

.dark nav,
.dark .sticky,
.dark .top-0.sticky {
    background-color: #fff1f7 !important;
    color: #4b003b !important;
    box-shadow: none !important;
}

/* Kill any ::before or ::after overlays on text containers in .dark mode */
.dark [class*="bg-token-surface-primary"]::before,
.dark [class*="bg-token-surface-primary"]::after,
.dark [class*="bg-token-surface-secondary"]::before,
.dark [class*="bg-token-surface-secondary"]::after,
.dark [class*="bg-token-bg-elevated-secondary"]::before,
.dark [class*="bg-token-bg-elevated-secondary"]::after,
.dark [class*="text-token-text-primary"]::before,
.dark [class*="text-token-text-primary"]::after {
    content: "" !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Code blocks */
.dark code,
.dark pre,
.dark .markdown code,
.dark .markdown pre,
.dark [class*="code"],
.dark [class*="syntax"] {
    background: rgba(254, 216, 255, .35) !important;
    box-shadow: none !important;
    border: none !important;
    color: #872657 !important;
    text-shadow: none !important;
    padding: 0 !important;
}

/* Pinker whites throughout */
.dark nav,
.dark .bg-token-sidebar-surface-primary,
.dark .bg-token-sidebar-surface,
.dark .bg-token-default,
.dark .bg-token-surface-primary,
.dark .bg-token-surface-secondary,
.dark .bg-token-surface-tertiary,
.dark .bg-token-sidebar-surface,
.dark .h-full,
.dark .overflow-hidden,
.dark .relative,
.dark .flex,
.dark .items-center,
.dark .flex-col,
.dark .w-full,
.dark .min-h-screen,
.dark .group.w-full.border-b,
.dark .markdown.prose,
.dark .bg-token-message-surface,
.dark textarea,
.dark .relative.flex.h-full.max-w-full,
dark -webkit-scrollbar,
.dark -webkit-scrollbar-track,
.dark -webkit-scrollbar-thumb,
.dark form {
    background-color: rgba(255, 240, 245, .95) !important;
}

/* Override pink-washed background in main content only */
.dark .flex {
    background-color: rgba(255, 240, 245, 0) !important;
}

/* Scrollbar track pink tweak */
::-webkit-scrollbar-track {
    background: #fff0f5;
}

/* Selection pink tweak */
.dark ::selection {
    background: #ffdef4;
}

#floating-emoji-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.floating-emoji {
    position: absolute;
    width: 48px;
    height: 48px;
    opacity: 0.18;
    animation: floatEmoji 12s ease-in-out infinite;
    will-change: transform, top, left;
}

@keyframes floatEmoji {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-40px) rotate(180deg);
    }
    100% {
        transform: translateY(0) rotate(360deg);
    }
}

/* Custom cursor */
html,
body {
    cursor: url('https://i.ibb.co/v6PfHb4m/rosey.gif') 0 0, auto !important;
}
html,
body,
a,
button,
input,
textarea,
select,
label,
summary,
[role="button"],
[type="submit"],
[type="button"],
* {
    cursor: url('https://i.ibb.co/v6PfHb4m/rosey.gif') 0 0, auto !important;
}

.dark ::-webkit-scrollbar,
.dark ::-webkit-scrollbar-track,
.dark ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 220, 230, 0.6) !important;
    border-radius: 1px;
    border: 1px solid rgba(255, 180, 200, 0.5);
}

/* ===== ADDITIONAL JSCHAN/VICHAN SPECIFIC TARGETING ===== */
/* Post info sections */
.postInfo,
.intro {
    background: rgba(255, 230, 245, 0.7) !important;
    border-radius: 1px !important;
    padding: 4px 8px !important;
}

/* Post messages/body */
.body,
.postMessage,
.post-message,
blockquote {
    background: transparent !important;
    color: #4b003b !important;
}

/* Thread containers */
#threads,
.threads,
.thread-container,
form[name="postcontrols"] {
    background: transparent !important;
}

/* ===== HOMEPAGE SPECIFIC TARGETING ===== */
/* Main container */
.container,
main,
main .container {
    background: transparent !important;
}

/* All tables on homepage */
.table-container,
.table-container table,
table.newstable,
table.boardtable,
.table-container table tr,
.table-container table td,
.table-container table th {
    background: rgba(255, 240, 250, 0.85) !important;
    color: #4b003b !important;
}

/* Table containers themselves */
.table-container {
    border-radius: 1px !important;
    border: 1px solid #ffcade !important;
    box-shadow: 0 0 10px rgba(255, 170, 210, 0.4) !important;
    overflow: hidden;
}

/* Table headers */
table th,
.table-container table th,
th.alt {
    background: rgba(255, 220, 235, 0.9) !important;
    border-bottom: 2px solid #ffaad4 !important;
    color: #872657 !important;
    padding: 8px !important;
}

/* Table cells */
table td,
.table-container table td {
    background: rgba(255, 240, 250, 0.85) !important;
    border-color: #ffcade !important;
    padding: 8px !important;
}

/* Pre tags in tables */
.table-container pre,
pre.no-m-p {
    background: transparent !important;
    color: #4b003b !important;
}

/* Navbar */
nav.navbar,
.navbar {
    background: rgba(255, 235, 245, 0.95) !important;
    border-bottom: 2px solid #ffcade !important;
    color: #4b003b !important;
}

.navbar .nav-item,
.navbar a {
    color: #872657 !important;
}

/* Footer */
.footer,
div.footer {
    background: rgba(255, 235, 245, 0.95) !important;
    border-top: 2px solid #ffcade !important;
    color: #4b003b !important;
}

.footer a {
    color: #872657 !important;
}

/* Logo container */
.home-logo {
    background: transparent !important;
}

/* ===== CATALOG PAGE SPECIFIC TARGETING ===== */
/* Catalog container */
.catalog {
    background: transparent !important;
}

/* Catalog tiles */
.catalog-tile {
    background: rgba(255, 240, 250, 0.85) !important;
    border: 1px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 0.5rem !important;
    box-shadow: 0 0 10px rgba(255, 170, 210, 0.4) !important;
}

.catalog-tile:hover {
    background: rgba(255, 230, 245, 0.9) !important;
    border-color: #ffaad4 !important;
}

/* Catalog tile post info */
.catalog-tile .post-info {
    background: transparent !important;
    color: #872657 !important;
}

/* Catalog tile post subject */
.catalog-tile .post-subject {
    color: #872657 !important;
}

/* Wrapbar for filter/sort controls */
.wrapbar {
    background: rgba(255, 240, 250, 0.85) !important;
    border: 1px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 0.5rem !important;
}

/* Filter and sort inputs */
#catalogfilter,
#catalogsort {
    background: rgba(255, 250, 252, 0.9) !important;
    border: 1px solid #ffcade !important;
    color: #4b003b !important;
}

/* Fix any invisible text by removing problem color declarations */
.catalog-tile *,
.catalog-tile a,
.catalog-tile span,
.catalog-tile pre {
    color: #4b003b !important;
}

/* Make sure links are visible */
a,
a:link,
a:visited {
    color: #872657 !important;
}

/* Post message text in catalog */
.catalog-tile .post-message {
    color: #4b003b !important;
}

/* ===== THREAD PAGE SPECIFIC TARGETING ===== */
/* Thread stats */
#threadstats {
    background: rgba(255, 240, 250, 0.85) !important;
    border: 1px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 0.5rem !important;
    color: #4b003b !important;
}

/* Live update indicator */
#livetext {
    background: rgba(255, 240, 250, 0.85) !important;
    border: 1px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 0.5rem !important;
    color: #4b003b !important;
}

/* Update button */
#updatepostsbutton {
    background: rgba(255, 220, 235, 0.9) !important;
    border: 1px solid #ffaad4 !important;
    color: #872657 !important;
}

/* Bottom reply button */
.bottom-reply {
    background: rgba(255, 235, 245, 0.9) !important;
    color: #872657 !important;
    border: 1px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 0.5rem 1rem !important;
    display: inline-block !important;
}

/* Post file info */
.post-file-info {
    color: #4b003b !important;
}

.post-file-info a,
.post-file-info span {
    color: #872657 !important;
}

/* Filename links */
.filename {
    color: #872657 !important;
}

/* Hide/show image links */
.hide-image {
    color: #872657 !important;
}

/* ===== SETTINGS MENU AND MODAL POPUPS ===== */
/* Modal overlays */
.modal,
.modal-bg,
.modal-content,
[class*="modal"],
[id*="modal"] {
    background: rgba(255, 240, 250, 0.95) !important;
    border: 2px solid #ffcade !important;
    border-radius: 1px !important;
    color: #4b003b !important;
}

/* Settings panel */
#settingsmodal,
.settings-modal,
[id*="settings"] {
    background: rgba(255, 240, 250, 0.95) !important;
    border: 2px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 1rem !important;
    color: #4b003b !important;
}

/* Settings menu items */
.settings-modal *,
#settingsmodal *,
[id*="settings"] * {
    color: #4b003b !important;
}

/* Settings inputs */
.settings-modal input,
.settings-modal select,
.settings-modal textarea,
#settingsmodal input,
#settingsmodal select,
#settingsmodal textarea {
    background: rgba(255, 250, 252, 0.9) !important;
    border: 1px solid #ffcade !important;
    color: #4b003b !important;
}

/* Settings buttons */
.settings-modal button,
#settingsmodal button {
    background: rgba(255, 220, 235, 0.9) !important;
    border: 1px solid #ffaad4 !important;
    color: #872657 !important;
}

/* Popup menus */
.postmenu,
select.postmenu {
    background: rgba(255, 250, 252, 0.9) !important;
    border: 1px solid #ffcade !important;
    color: #4b003b !important;
}

/* Any generic popup/dropdown */
[class*="popup"],
[class*="dropdown"],
[class*="menu"] {
    background: rgba(255, 240, 250, 0.9) !important;
    border: 1px solid #ffcade !important;
    color: #4b003b !important;
}

/* Modal headers */
.modal-header,
[class*="modal"] h1,
[class*="modal"] h2,
[class*="modal"] h3,
[class*="modal"] h4 {
    background: rgba(255, 220, 235, 0.9) !important;
    color: #872657 !important;
    border-bottom: 2px solid #ffaad4 !important;
}

/* Close buttons in modals */
.close,
.modal-close,
[class*="close"] {
    color: #872657 !important;
}

/* Overlay backgrounds */
[class*="overlay"],
[id*="overlay"] {
    background: rgba(255, 200, 220, 0.3) !important;
}

/* ===== BOARD PAGE SPECIFIC TARGETING ===== */
/* Board header */
.board-header,
.board-banner,
.board-title,
.board-description {
    background: transparent !important;
    color: #4b003b !important;
}

/* Form wrapper and post form */
.form-wrapper,
.form-post,
#postform,
section.form-wrapper {
    background: rgba(255, 240, 250, 0.85) !important;
    border: 1px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 1rem !important;
    box-shadow: 0 0 10px rgba(255, 170, 210, 0.4) !important;
}

/* Form rows and labels */
.form-post section.row,
.form-post .row,
.form-post .label {
    background: transparent !important;
    color: #4b003b !important;
}

/* Form inputs */
.form-post input[type="text"],
.form-post input[type="password"],
.form-post textarea,
.form-post select {
    background: rgba(255, 250, 252, 0.9) !important;
    border: 1px solid #ffcade !important;
    color: #4b003b !important;
}

/* Submit buttons */
.form-post input[type="submit"],
#submitpost,
.post-button {
    background: rgba(255, 220, 235, 0.9) !important;
    border: 2px solid #ffaad4 !important;
    color: #872657 !important;
    border-radius: 1px !important;
    padding: 8px 16px !important;
}

/* Sticky nav */
.stickynav,
nav.stickynav {
    background: rgba(255, 235, 245, 0.95) !important;
    border: 1px solid #ffcade !important;
    color: #4b003b !important;
}

/* Pages navigation */
.pages {
    background: rgba(255, 240, 250, 0.85) !important;
    border: 1px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 8px !important;
    color: #4b003b !important;
}

.pages a {
    color: #872657 !important;
}

/* Thread containers and dividers */
.thread {
    background: transparent !important;
}

hr {
    border-color: #ffcade !important;
}

/* Post action form */
#actionform,
details.toggle-label,
.actions {
    background: rgba(255, 240, 250, 0.85) !important;
    border: 1px solid #ffcade !important;
    border-radius: 1px !important;
    padding: 1rem !important;
    color: #4b003b !important;
}

.actions label,
.actions h4 {
    color: #4b003b !important;
}

.actions input[type="text"],
.actions input[type="password"],
.captchafield {
    background: rgba(255, 250, 252, 0.9) !important;
    border: 1px solid #ffcade !important;
    color: #4b003b !important;
}

.actions input[type="submit"] {
    background: rgba(255, 220, 235, 0.9) !important;
    border: 2px solid #ffaad4 !important;
    color: #872657 !important;
    border-radius: 1px !important;
}

/* File label styling */
.filelabel {
    background: rgba(255, 220, 235, 0.9) !important;
    border: 2px solid #ffaad4 !important;
    color: #872657 !important;
    border-radius: 1px !important;
}

/* Collapse buttons */
.collapse,
summary.collapse {
    background: rgba(255, 235, 245, 0.9) !important;
    color: #872657 !important;
}