body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1e1e1e;
    color: #ffffff;
    white-space: normal;
}
.post-preview {
    display: none;
}

.post-preview.expanded {
    display: block;
}
.title-container {
    max-width: 70%; 
    overflow-wrap: break-word; 
    white-space: normal; 
}
.body-text {
    max-width: 100%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: auto;
    white-space: pre-wrap;
}
.hash {
    font-size: 13px;
    font-family: 'Courier New', Courier, monospace;
    background-color: #d3d3d3;
    word-wrap: break-word;
    overflow-wrap: break-word; 
}
.flair {
    display: inline-block;
    width: 12ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
.flair:hover {
    overflow: visible;
    white-space: normal;
    z-index: 1;
}
.ww-anchor {
    display: inline-block;
    max-width: 300px; 
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.toggle-switch {
    width: 37.5px;
    height: 18px;
    background-color: #ccc;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}
.toggle-thumb {
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: -1px;
    transition: transform 0.2s;
}
.toggle-thumb.on {
    transform: translateX(26px);
}

.toggle-switch.on {
    background-color: #4caf50;
}

::-webkit-scrollbar {
    display: none;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #888;
}
code {
    background-color: #2c2c2c;
    color: #f8f8f2;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 90%;
}
pre {
    background-color: #2c2c2c;
    color: #f8f8f2;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 90%;
    overflow-x: auto;
}
.inactive {
    color: #6c7f9c;
}
.active {
    color: white;
}

.bg-gray-700 {
    background-color: #374151;
}

.text-white {
    color: #ffffff;
}

.text-gray-400 {
    color: #cbd5e1;
}

.bg-gray-600 {
    background-color: #4b5563;
}
h1, h2, h3, h4, h5, h6 {
    max-width: 100%;
    word-wrap: break-word;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

img {
    max-width: 100%;
    height: auto;
}
button {
    margin-left: 10px;
}

blockquote {
    border-left: 4px solid #ccc;
    padding-left: 10px;
    color: #999;
    margin: 10px 0;
    font-style: italic;
}

.spoiler {
    cursor: pointer;
    position: relative;
    display: inline-block;
    color: transparent; 
    overflow: hidden; 
}
.spoiler::before {
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(33, 31, 55, 0.7); 
    backdrop-filter: blur(5px); 
    transition: opacity 0.6s ease;
    animation: sparkle 5s infinite; 
}

.spoiler.revealed {
    color: inherit; 
}

.spoiler.revealed::before {
    opacity: 0; 
    animation: none; 
}

@keyframes sparkle {
    0%, 100% {
        background: rgba(33, 31, 55); 
    }
    50% {
        background: rgba(31, 41, 55, 1); 
    }
    25%, 75% {
        background: rgba(33, 31, 55, 0.5); 
    }
}

.sky .bg-gray-700 {
    background-color: #b3e5fc;
}

.sky .bg-gray-600 {
    background-color: #81d4fa;
}

.sky .bg-gray-800 {
    background-color: #4fc3f7;
}

.sky .bg-red-600 {
    background-color: #ffcccb;
}

.sky .bg-gray-900 {
    background-color: #b0e5fc;
}

.sky .text-white {
    color: #0d47a1;
}

.sky .text-gray-400 {
    color: #0d47a1;
}

.sky .text-blue-500 {
    color: #6f93c9;
}

.sky .border-gray-700 {
    border-color: #4fc3f7;
}

.sky .border-gray-500 {
    border-color: #81d4fa;
}

.sky .bg-black {
    background-color: #e3f2fd;
}

.sky .bg-opacity-50 {
    background-color: rgba(224, 242, 254, 0.5);
}

.forest .bg-gray-700 {
    background-color: #2e3a24; 
}

.forest .bg-gray-600 {
    background-color: #3b4d3a; 
}

.forest .bg-gray-800 {
    background-color: #4a6b4d; 
}

.forest .bg-red-600 {
    background-color: #4a1c1c; 
}

.forest .bg-gray-900 {
    background-color: #1b2a1b; 
}

.forest .text-white {
    color: #e0f2e9; 
}

.forest .text-gray-400 {
    color: #b0c4a1; 
}

.forest .text-blue-500 {
    color: #4a8b4a; 
}

.forest .border-gray-700 {
    border-color: #4fc3f7; 
}

.forest .border-gray-500 {
    border-color: #81d4fa; 
}

.forest .bg-black {
    background-color: #1b2a1b; 
}

.forest .bg-opacity-50 {
    background-color: rgba(224, 242, 254, 0.5); 
}

.bamboo .bg-gray-700 {
    background-color: #d9f0d9; 
}

.bamboo .bg-gray-600 {
    background-color: #b2e0b2; 
}

.bamboo .bg-gray-800 {
    background-color: #8bcf8b; 
}

.bamboo .bg-red-600 {
    background-color: #ffcccb; 
}

.bamboo .bg-gray-900 {
    background-color: #e1feea; 
}

.bamboo .text-white {
    color: #2e3a24; 
}

.bamboo .text-gray-400 {
    color: #4a6e4a; 
}

.bamboo .text-blue-500 {
    color: #4a6e4a; 
}

.bamboo .border-gray-700 {
    border-color: #4fc3f7; 
}

.bamboo .border-gray-500 {
    border-color: #81d4fa; 
}

.bamboo .bg-black {
    background-color: #e3f2fd; 
}

.bamboo .bg-opacity-50 {
    background-color: rgba(224, 242, 254, 0.5); 
}

.crimson .bg-gray-700 {
    background-color: #4a1c1c; 
}

.crimson .bg-gray-600 {
    background-color: #6b2a2a; 
}

.crimson .bg-gray-800 {
    background-color: #8b3b3b; 
}

.crimson .bg-red-600 {
    background-color: #ffcccb; 
}

.crimson .bg-gray-900 {
    background-color: #2a1b1b; 
}

.crimson .text-white {
    color: #f2d6d6; 
}

.crimson .text-gray-400 {
    color: #c1a1a1; 
}

.crimson .text-blue-500 {
    color: #d84c4c; 
}

.crimson .border-gray-700 {
    border-color: #6b2a2a; 
}

.crimson .border-gray-500 {
    border-color: #8b3b3b; 
}

.crimson .bg-black {
    background-color: #4a1c1c; 
}

.crimson .bg-opacity-50 {
    background-color: rgba(224, 242, 254, 0.5); 
}

.blush .bg-gray-700 {
    background-color: #f2d6d6; 
}

.blush .bg-gray-600 {
    background-color: #f5b2b2; 
}

.blush .bg-gray-800 {
    background-color: #f5a3a3; 
}

.blush .bg-red-600 {
    background-color: #ffcccb; 
}

.blush .bg-gray-900 {
    background-color: #fee1e7; 
}

.blush .text-white {
    color: #4a1c1c; 
}

.blush .text-gray-400 {
    color: #6b2a2a; 
}

.blush .text-blue-500 {
    color: #4a1c1c; 
}

.blush .border-gray-700 {
    border-color: #f5b2b2; 
}

.blush .border-gray-500 {
    border-color: #f5a3a3; 
}

.blush .bg-black {
    background-color: #f2d6d6; 
}

.blush .bg-opacity-50 {
    background-color: rgba(224, 242, 254, 0.5); 
}

.petal .bg-gray-700 {
    background-color: #f8d3e0; 
}

.petal .bg-gray-600 {
    background-color: #f5a3b5; 
}

.petal .bg-gray-800 {
    background-color: #f5a3c1; 
}

.petal .bg-red-600 {
    background-color: #ffcccb; 
}

.petal .bg-gray-900 {
    background-color: #fc97ac; 
}

.petal .text-white {
    color: #3c2a2a; 
}

.petal .text-gray-400 {
    color: #6b4a4a; 
}

.petal .text-blue-500 {
    color: #4a1c1c; 
}

.petal .border-gray-700 {
    border-color: #f5a3b5; 
}

.petal .border-gray-500 {
    border-color: #f5a3c1; 
}

.petal .bg-black {
    background-color: #f8d3e0; 
}

.petal .bg-opacity-50 {
    background-color: rgba(224, 242, 254, 0.5); 
}

.lotus .bg-gray-700 {
    background-color: #4a1c2a; 
}

.lotus .bg-gray-600 {
    background-color: #6b2a3b; 
}

.lotus .bg-gray-800 {
    background-color: #8b3b4a; 
}

.lotus .bg-red-600 {
    background-color: #ffcccb; 
}

.lotus .bg-gray-900 {
    background-color: #2a1b2a; 
}

.lotus .text-white {
    color: #f2d6e0; 
}

.lotus .text-gray-400 {
    color: #c1a1b1; 
}

.lotus .text-blue-500 {
    color: #d86386; 
}

.lotus .border-gray-700 {
    border-color: #6b2a3b; 
}

.lotus .border-gray-500 {
    border-color: #8b3b4a; 
}

.lotus .bg-black {
    background-color: #4a1c2a; 
}

.lotus .bg-opacity-50 {
    background-color: rgba(224, 242, 254, 0.5); 
}

.amethyst .bg-gray-700 {
    background-color: #3e2a6b; 
}

.amethyst .bg-gray-600 {
    background-color: #5b4a8b; 
}

.amethyst .bg-gray-800 {
    background-color: #7a6b9b; 
}

.amethyst .bg-red-600 {
    background-color: #ffcccb; 
}

.amethyst .bg-gray-900 {
    background-color: #2a1b3e; 
}

.amethyst .text-white {
    color: #e0d6f2; 
}

.amethyst .text-gray-400 {
    color: #b0a1c1; 
}

.amethyst .text-blue-500 {
    color: #4a1c6b; 
}

.amethyst .border-gray-700 {
    border-color: #5b4a8b; 
}

.amethyst .border-gray-500 {
    border-color: #7a6b9b; 
}

.amethyst .bg-black {
    background-color: #3e2a6b; 
}

.amethyst .bg-opacity-50 {
    background-color: rgba(224, 242, 254, 0.5); 
}