@charset "UTF-8";

/* Variables */

:root {
    --theatre-primary-default: #86bc3b;
    /* Active/enabled component colors - reusable across components */
    --theatre-active-bg: #e7f3ff;
    --theatre-active-bg-hover: #d1e9ff;
    --theatre-active-border: var(--theatre-primary);
    --theatre-active-text: var(--theatre-primary);
    --theatre-active-icon: var(--theatre-primary);
    /* Autoplay toggle colors - use active colors for consistency */
    --autoplay-enabled-bg: var(--theatre-active-bg);
    --autoplay-enabled-bg-hover: var(--theatre-active-bg-hover);
    --autoplay-enabled-border: var(--theatre-active-border);
    --autoplay-enabled-text: var(--theatre-active-text);
    --autoplay-enabled-icon: var(--theatre-active-icon);
    --scrollbar-track: var(--theatre-active-bg, #e7f3ff);
    --scrollbar-thumb: var(--theatre-primary, var(--theatre-primary-default));
    --scrollbar-thumb-hover: var(--theatre-primary-hover, var(--scrollbar-thumb));
    --scrollbar-thumb-border-width: 2px;
    --scrollbar-size: 12px;
    --bg-light-stars: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAD1BMVEXz9/nt8/X8/Pzw9ff3+fsdudtwAAABK0lEQVRIx+2UUYrEIBBEzcQDpPECjXgAw1xAhtz/TLtGo93lSvZrYGDqI6HhpVKSdJn3aY03wLLp2TIAu9PzAwEiPb88RCDSITwAC5EKYb1nHYHIqQgaWJ/0q2eUEbwXTze54n/4U0caACr5uuoJmrby/qaAFmXuQKoZhYGyCBjzmpVBs2gGzYLNDLBgcA8sfwMMAGRAQHyuEdjzCTXAVgP5KgHOl9CBcqP2scOJdQB1XLevRqWbvngw9gUCYdIXs3UnGoA09AWuO/YFAgH7At6gQ7Q9a3VQC6HXiagU7AMSMtAHXAPCuksDbRGhDxgKxWEfXDMYjKu2g4Gxk0K5AyICPHXADMs/ASeBZPUptlUCr5zPit7M7qsE0hm1A/GM6vCXt9cc62HMp+gHHIo+P3KnB8oAAAAASUVORK5CYII=);
    --bg-dark-stars: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAACVBMVEUvMTYsLjMyNTlqJR8eAAAA0UlEQVQ4y9WSQQqDMBBFf4RAcZ99lyWnyBGyyNzHo7gsOWWZ/HQwDSIUuuggfHz6J4gP341LZ2Dr6TNzmcDeQSjMdQLPDkSYsYMgUggqn7fRRq37EdQ2bLRO1Hvd4hXk1mDHKUjAomB7L9FUMBwbucIAj70CYyWeg+yFH7sSCECwLQQZ8JoPvf5jqAU1mIFpQQ3OQMGHBhOQDmodxRktMC/ME/PC3qAX5ol5YZ7YUvPEfqHpSQ0uwFiJ12BfCUoQAqABSY7gDtw0CxBwnAQ4/GZeZdl6cwu93uMAAAAASUVORK5CYII=);
    --bg-frog-star-green-trans: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsBAMAAADsqkcyAAAAMFBMVEUAAACh0Cay2U2azReWyw2SyQOYzBGTygefzyKdzh6czhuo1Tel0zCv2Eer1j6n0zTD6oDhAAAAAXRSTlMAQObYZgAAAWVJREFUKM9tkrFKw1AUhv/UNtXikEtFW6dwHVVohe4pxl0Rh+IScbCL0C6CWx/B4gsogvgCTi7FB3DQ1xAEV0E8x3uS3OTmJ4HDx+Ef7ncAjNqHMAmU8iBpjDsHLt5/UqrzMAFHUQRf82xqPB4D6bineYB/HPCfr29KB+O0ZUTbkVQDhfIEpjugT/D49qTfk22O4AvgCoXE+aihs/klm2o1HYYy+zqpwqf6GQgM1lob7P3S+IWeqeaAsySjwfJTLol+SDUjaWkRvklxyH/WQs3SjbRwmfAs3abI9upO/LpAIc0JbUeoz/jhs6dH6w6o0D3dqMKNeZellnSfz5XqPgIl3UMe11DW3WQcwdE9lOWS7mmOjyzdZ0qtA47u/uC4DVe3ewT4qTyCuo4c26Lbwd7bu979tI9A/HHMq9rm92jcso/A7K9kAms29lm3dQQo65YjEN3b8ffCOgLR7SXw5b0c3dYR/AG01j4iNgQQbgAAAABJRU5ErkJggg==);
    /* Froggies */
    --header-frog-popular: url(/theatre_assets/images/header/popular.png);
    --header-frog-hot: url(/theatre_assets/images/header/hot.png);
    --header-frog-news: url(/theatre_assets/images/header/news.png);
    --header-frog-spotlight: url(/theatre_assets/images/header/spotlight.png);
    --header-frog-ranking: url(/theatre_assets/images/header/ranking.png);
    --header-frog-recent: url(/theatre_assets/images/header/recent.png);
    --header-frog-comments: url(/theatre_assets/images/header/comments.png);
    --header-frog-random: url(/theatre_assets/images/header/random.png);
    --header-frog-music: url(/theatre_assets/images/header/music.png);
    --header-frog-fans: url(/theatre_assets/images/header/fans.png);
    --header-frog-trophies: url(/theatre_assets/images/header/trophies.png);
}

/* Global */

html {
    -webkit-font-smoothing: antialiased;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

html::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
    border: var(--scrollbar-thumb-border-width) solid var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

div.profile-left {
    float: left;
}

img.flipnote-view-profimg {
    display: inline;
    border: 1px solid #dedede;
}

.sf-header {
    font-size: 25px !important;
    margin-top: -3px;
}

/* Discord Webhook Queue - Layout */

.webhook-queue-container {
    margin-top: 2rem;
}

.webhook-queue-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid;
    border-radius: 8px;
    background: var(--theatre-card-bg);
}

.webhook-queue-thumbnail {
    width: 48px;
    height: 36px;
    border-radius: 4px;
    margin-right: 1rem;
    object-fit: cover;
}

.webhook-queue-details {
    flex: 1;
    min-width: 0;
}

.webhook-queue-title {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
}

.webhook-queue-meta {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.8;
}

.webhook-queue-meta > div {
    margin: 0.1rem 0;
}

.webhook-queue-status {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: 0.75rem;
    white-space: nowrap;
    font-weight: bold;
}

/* Webhook Queue Status Colors */
.webhook-queue-item {
    border-color: var(--webhook-queue-item-border);
}

.status-pending {
    background: var(--webhook-queue-status-pending-bg);
    color: var(--webhook-queue-status-pending-text);
}

.status-sent {
    background: var(--webhook-queue-status-sent-bg);
    color: var(--webhook-queue-status-sent-text);
}

.status-failed {
    background: var(--webhook-queue-status-failed-bg);
    color: var(--webhook-queue-status-failed-text);
}

.status-skipped {
    background: var(--webhook-queue-status-skipped-bg);
    color: var(--webhook-queue-status-skipped-text);
}

.webhook-queue-actions {
    display: flex;
    gap: 0.5rem;
}

.plus-notice-banner {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 2px solid;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.plus-notice-icon {
    font-size: 1.5rem;
}

.plus-notice-content h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
}

.plus-notice-content p {
    margin: 0;
    font-size: 0.95rem;
}

.plus-notice-cta {
    margin-left: auto;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.plus-notice-cta:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

/* Discord Webhook Mobile Responsive Styles */
@media (max-width: 575.98px) {
    .webhook-queue-item {
        flex-direction: column;
        align-items: stretch !important;
        padding: 0.75rem !important;
        gap: 0.75rem;
    }

    .webhook-queue-item > div {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .webhook-queue-thumbnail {
        width: 40px !important;
        height: 30px !important;
        margin-right: 0 !important;
        flex-shrink: 0;
    }

    .webhook-queue-details {
        min-width: 0;
        flex: 1;
    }

    .webhook-queue-title {
        font-size: 0.9rem !important;
        word-break: break-word;
    }

    .webhook-queue-meta {
        font-size: 0.8rem !important;
    }

    .webhook-queue-status {
        margin-right: 0 !important;
        margin-left: auto;
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap;
    }

    .webhook-queue-actions {
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    /* Webhook forms - Mobile */
    .add-webhook-form {
        padding: 1rem !important;
    }

    .webhook-card {
        padding: 0.75rem !important;
    }

    .webhook-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .webhook-url {
        word-break: break-all;
        font-size: 0.8rem !important;
    }

    .webhook-template {
        word-break: break-word;
        font-size: 0.8rem !important;
    }

    .plus-notice-banner {
        flex-direction: column;
        text-align: center;
        gap: 1rem !important;
    }

    .plus-notice-content h4 {
        font-size: 1rem !important;
    }

    .plus-notice-content p {
        font-size: 0.9rem !important;
    }

    .plus-notice-cta {
        margin-left: 0 !important;
        align-self: stretch;
        text-align: center;
    }
}

a {
    color: #428bca;
}

.footnote {
    font-style: italic;
    font-size: 12px;
}

body {
    margin: 0 auto;
    padding: 5em 0 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    /* 1.2em */
    color: #545454;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
}

h2 {
    margin-top: 1.3em;
}

b,
strong {
    font-weight: 600;
}

img {
    background: transparent;
    display: block;
    margin: auto;
    max-width: 95%;
    -webkit-animation: colorize 2s cubic-bezier(0, 0, 0.78, 0.36) 1;
    animation: colorize 2s cubic-bezier(0, 0, 0.78, 0.36) 1;
}

table,
td,
th {
    border: none;
}

/* Channel/Category page styles */

.channels-hero .hero-box {
    display: flex;
    flex-direction: row;
    padding: 10px 0 10px 0px;
    background-image: url("/theatre_assets/images/categories/index/channel_categories_header_bg.svg");
    background-position-x: left;
    background-position-y: bottom;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 150px;
    border: 5px solid #dcdcdc;
    border-radius: 10px; /* outer curve */
    overflow: hidden; /* inner curve */
}

@media (max-width: 575.98px) {
    .channels-hero .hero-box {
        border-radius: unset;
    }
}

.channels-hero .hero-caption {
    margin: 0 auto;
    float: left;
    padding-right: 15px;
}

.channels-hero .hero-title {
    color: #8dc13f;
    font-size: 38px;
    font-weight: bold;
}

.channels-hero .hero-description {
    width: 300px;
    padding-left: 5px;
}

.channels-hero .hero-grid {
    border-spacing: 2px;
    border-collapse: separate;
    margin: 0 auto;
}

.channels-hero .hero-cell {
    overflow: hidden;
    background: #fbfbfb url(/theatre_assets/images/categories/index/category_button_normal.png) no-repeat center center;
    height: 53px;
    width: 82px;
    padding: 0;
    border-radius: 3px;
}

.channels-hero .hero-cell a {
    font-size: 8pt;
    color: #82c300;
    text-decoration: none;
}

.channels-hero .hero-cell .channel-name {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    width: 76px;
    display: block;
}

.channels-hero .hero-cell-wide .channel-name {
    width: 150px;
}

.channels-hero .hero-cell-wide {
    background: #fbfbfb url(/theatre_assets/images/categories/index/category_button_wide.png) no-repeat center center;
    height: 53px;
    width: 165px;
    padding: 0;
}

/* Channel icon styling */
.channel-icon {
    border-radius: 3px;
    flex-shrink: 0;
    margin: unset;
}

.channel-icon-sm {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.channel-icon-md {
    width: 24px;
    height: 24px;
}

.channel-icon-lg {
    width: 32px;
    height: 32px;
    border-radius: 5px;
}

/* Category page styles */
.category-header {
    background: var(--theatre-primary);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.category-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.category-header .breadcrumb {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: inline-block;
    font-size: 14px;
}

.category-header .breadcrumb a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.category-header .breadcrumb a:hover {
    text-decoration: underline;
}

.category-header .breadcrumb i {
    margin: 0 8px;
    font-size: 12px;
    opacity: 0.8;
}

.channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.channel-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.channel-card .rank-number {
    position: absolute;
    top: 10px;
    right: 15px;
    background: linear-gradient(135deg, #86bc3b, #6fa02f);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
    z-index: 10;
}

.channel-card .header {
    padding: 15px 18px 8px;
    background: #e7f6dd;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.channel-card .title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.channel-card .title a {
    color: #2a6a12;
    text-decoration: none;
}

.channel-card .title a:hover {
    color: #1e4a0c;
}

.channel-card .stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: #666;
}

.channel-card .stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.channel-card .description {
    padding: 8px 18px 15px;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
    flex-shrink: 0;
}

.channel-card .category-page-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 15px;
    margin-top: auto;
}

.channel-card .thumb {
    aspect-ratio: 4 / 3;
    background: #f8f8f8;
    border: 1px solid #ececec;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.channel-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-card .thumb.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #aaa;
    background: #f0f0f0;
}

.channel-card .thumb.placeholder {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ececec;
    background-size:
        100% 100%,
        3px 3px,
        2px 2px;
    animation: noise-shift 0.28s steps(4) infinite;
}

.channel-card .thumb.placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.25) 95%),
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 4px);
    mix-blend-mode: multiply;
    pointer-events: none;
    animation: flicker 1.7s infinite;
}

.channel-card .thumb.placeholder span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 2px #000;
    z-index: 1;
}

/* Animations */
@keyframes noise-shift {
    to {
        background-position:
            0 0,
            100% 0,
            0 100%;
    }
}
@keyframes flicker {
    0%,
    100% {
        opacity: 0.96;
        filter: brightness(1);
    }
    50% {
        opacity: 0.86;
        filter: brightness(0.96);
    }
}

/* Categories index styles */
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cat-box {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cat-box .head {
    background: #e7f6dd;
    border-bottom: 1px solid #d7ebc7;
    padding: 10px 12px 8px;
}

.cat-box .title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #2a6a12;
}

.cat-box .title a {
    color: inherit;
    text-decoration: none;
}

.cat-box .title a:hover {
    color: #1e4a0c;
}

.cat-box .subnav {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 13px;
}

.cat-box .subnav a {
    white-space: nowrap;
    color: #666;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cat-box .subnav a:hover {
    color: #2a6a12;
}

.cat-box .category-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
}

.cat-box .thumb {
    width: calc((100% - 8px * 5) / 6);
    min-width: 97px;
    aspect-ratio: 4 / 3;
    background: #f8f8f8;
    border: 1px solid #ececec;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.cat-box .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-box .thumb.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #aaa;
    background: #f0f0f0;
}

/* Channel ranking grid styles */
.ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

/* Sidebar widget styles */
.sidebar .widget {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    overflow: hidden;
}

/* Panel/sunburst only */
.widget.ranking .ranking-header {
    position: relative;
    z-index: 0;
    padding: 14px 16px;
    text-align: center;
    font-weight: 900;
    font-size: 28px;
    line-height: 1.05;
    border-bottom: 1px solid #e9cf58;
    border-radius: 12px 12px 0 0;
    color: #b8860b; /* fallback text color */
}
.widget.ranking .ranking-header::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)) top/100% 12px no-repeat,
        repeating-conic-gradient(
            from 270deg at 50% 90%,
            rgba(255, 255, 255, 0.65) 0 6deg,
            rgba(255, 255, 255, 0) 6deg 18deg
        ),
        linear-gradient(to bottom, #fff7c0, #ffe56a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    z-index: -1;
}
.widget.ranking .ranking-header::after {
    content: "✦";
    position: absolute;
    right: 14px;
    top: 8px;
    font-size: 18px;
    color: #ffd54d;
    text-shadow:
        0 0 3px #fff,
        0 0 8px #fff6b3;
    transform: rotate(8deg);
}

/* TEXT: put everything here; higher specificity, + WebKit fill */
.widget.ranking .ranking-header .heading-text,
.widget.ranking .ranking-header > .heading-text {
    display: inline-block;
    white-space: nowrap;
    font-family: "Segoe UI", "Segoe UI Variable", Arial, Helvetica, sans-serif !important;

    /* gold gradient fill */
    background-image: linear-gradient(to bottom, #fcf5d8 0%, #f9df70 48%, #eec724 100%);
    background-clip: text; /* Firefox */
    -webkit-background-clip: text; /* Chrome/Safari */
    color: transparent; /* Firefox */
    -webkit-text-fill-color: transparent; /* Chrome/Safari */

    /* light-brown outline (works everywhere) */
    text-shadow:
        0 1px 0 #ffffff,
        1px 0 0 #af9428,
        -1px 0 0 #af9428,
        0 1px 0 #af9428,
        0 -1px 0 #af9428,
        1px 1px 0 #af9428,
        -1px 1px 0 #af9428,
        1px -1px 0 #af9428,
        -1px -1px 0 #af9428;
}

/* Sharper stroke on WebKit */
@supports (-webkit-text-stroke: 1px #000) {
    .widget.ranking .ranking-header .heading-text {
        -webkit-text-stroke: 0.8px #af9428;
        text-shadow: 0 1px 0 #ffffff;
    }
}

.ranking-item {
    display: grid;
    grid-template-columns: 36px 44px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
}

.ranking-item + .ranking-item {
    margin-top: 4px;
}

.rank-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.rank-1 {
    background: #f5a623;
}
.rank-2 {
    background: #8aa0b7;
}
.rank-3 {
    background: #c88b3a;
}
.rank-4,
.rank-5 {
    background: #b7c7d8;
}

.ranking-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ececec;
    background: #f7f7f7;
}

.ranking-body a.title {
    display: block;
    font-weight: 700;
    color: #2b2b2b;
    text-decoration: none;
}

.ranking-body a.title:hover {
    color: #1a66cc;
}

.ranking-body .meta {
    font-size: 12px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ranking .see-more {
    display: block;
    text-align: right;
    padding: 6px 8px 10px;
    font-size: 13px;
    color: var(--theatre-primary);
    text-decoration: none;
}

/* Recently viewed widget */
.widget.recent .head {
    background: #dff2cf;
    border-bottom: 1px solid #cce2bb;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2a6a12;
    font-weight: 800;
}

.widget.recent .list {
    padding: 8px;
}

.recent-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
    padding: 6px 6px;
    border-radius: 8px;
}

.recent-item + .recent-item {
    margin-top: 2px;
}

.recent-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f0f0f0;
    border: 1px solid #eaeaea;
}

.recent-item a {
    color: #2b2b2b;
    text-decoration: none;
}

.recent-item a:hover {
    color: #1a66cc;
}

.layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
}

/* Pagination styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.pagination .btn {
    padding: 8px 16px;
    background: #86bc3b;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.pagination .btn:hover {
    background: #6fa02f;
}

.pagination .btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.pagination .current {
    padding: 8px 16px;
    background: #2a6a12;
    color: white;
    border-radius: 5px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.5;
}

/* Responsive design */
@media (max-width: 1024px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .cat-box .thumb {
        width: calc((100% - 8px * 4) / 5);
    }
}

@media (max-width: 860px) {
    .cat-box .thumb {
        width: calc((100% - 8px * 3) / 4);
    }
}

@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr;
    }

    .channels-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ranking-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .channel-card .category-page-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .cat-box .thumb {
        width: calc((100% - 8px * 2) / 3);
    }
}

a.navbar-brand {
    padding: 0px;
    content: url(https://www.sudomemo.net/theatre_assets/images/sudomemo_logo_green.svg);
    margin-top: -3px;
    height: 55px;
    width: 145px;
    margin-left: 10px;
}

.navbar-profile-pic {
    width: 21px;
    display: inline;
    border-radius: 50px;
    border: 1px solid #fff;
    padding: 1px;
}

/* Some changes to make the frog work... might remove this if we switch to a better frog method */

.navbar-custom .navbar-nav li a i {
    font-size: 20px;
}

.navbar-custom .navbar-nav li a i.sf {
    font-size: 20px;
}

.nav-item.navbar-frog-container:hover .frog {
    stroke: var(--theatre-primary);
}

.navbar-frog {
    width: 23px;
    margin-bottom: 2px;
}

.navbar-custom .navbar-toggler:hover,
.navbar-custom .navbar-toggler:focus,
.navbar-custom .navbar-toggler:active {
    outline: none;
}

.social-icons {
    display: flex;
}

@media (max-width: 768px) {
    a.navbar-brand {
        margin-top: 3px;
    }

    li.dropdown.nav-item > ul.dropdown-menu {
        border: none;
    }
}

ul.dropdown-menu.show li.dropdown.nav-item > ul.dropdown-menu > li.dropdown-item {
    padding: 0px;
}

ul.dropdown-menu li.dropdown-item {
    padding: 0px;
}

li.dropdown.nav-item > ul.dropdown-menu > li.dropdown-header {
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}

li.dropdown.nav-item > ul.dropdown-menu {
    padding: 0;
}

.dropdown-menu {
    border-radius: 0;
}

.gs {
    color: #81c106;
}

.wd {
    color: #e47226;
}

.sd {
    color: #ab8d4c;
}

.sk {
    color: #4488e4;
}

.cs {
    color: #2c2182;
}

/* Force min-height of navbar */

@media (max-width: 575.98px) {
    div.navbar {
        min-height: 60px;
    }
}

@media (min-width: 576px) {
    div.navbar {
        min-height: 52px;
    }
}

.navbar-nav .nav-item {
    line-height: 19px;
}

.navbar-custom .navbar-text {
    color: #2e2e2e;
}

.navbar-custom .navbar-nav li a {
    font-size: 15px;
    /* font-weight: 800; */
    padding: 12px 15px 12px 15px;
}

.navbar-custom .navbar-nav .disabled a,
.navbar-custom .navbar-nav .disabled a:hover,
.navbar-custom .navbar-nav .disabled a:focus {
    color: #ccc;
    background-color: transparent;
}

.navbar-custom .navbar-toggler {
    border-color: #fff;
    padding: 8px 10px 9px 10px;
    margin-right: 15px;
    color: #fff;
}

.navbar-custom .navbar-toggler:hover,
.navbar-custom .navbar-toggler:focus {
    background-color: #ddd;
}

.navbar-custom .navbar-toggler .icon-bar {
    background-color: #fff;
}

.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
    border-color: #fff;
}

@media (max-width: 767px) {
    .navbar-custom .navbar-collapse,
    .navbar-custom .navbar-form {
        border-top: 1px solid #fff;
    }
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.navbar-custom .dropdown-menu li a {
    font-size: 13px;
    display: block;
    margin: 0px;
}

.navbar-custom .navbar-link {
    color: #fff;
}

.navbar-custom .navbar-link:hover {
    color: #172e09;
}

.navbar {
    border-bottom: 2px solid white;
}

/* On mobile, fix scrolling and max-height for navbar */

@media (max-width: 767px) {
    .navbar-collapse {
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .collapsing {
        overflow-y: hidden;
        overflow-x: hidden;
    }
}

.color-facebook,
.share-color-facebook {
    color: #3b5998;
}

.color-twitter,
.share-color-twitter {
    color: #55acee;
}

.color-tumblr,
.share-color-tumblr {
    color: #35465c;
}

.color-reddit,
.share-color-reddit {
    color: #ff5700;
}

.share-color-link {
    color: #428bca;
}

.color-sudomemo {
    color: #db611d;
}

a.color-sudomemo {
    color: #db611d;
}

.social-share-button {
    width: 32px;
    height: 32px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    text-align: center;
    color: white;
    border-radius: 3px;
    padding-top: 4px;
    font-size: 18px;
    cursor: pointer;
}

.copy-input-transition {
    transition: background-color 0.5s ease;
}

.sbc-fb {
    background-color: #3b5998;
}

.sbc-twitter {
    background-color: #55acee;
}

.sbc-tumblr {
    background-color: #35465c;
}

.sbc-reddit {
    background-color: #ff5700;
}

.sbc-pinterest {
    background-color: #c8232c;
}

.sbc-whatsapp {
    background-color: #25d366;
}

.card {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 7px;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.bg-light-stars {
    background-image: var(--bg-light-stars);
}

.bg-dark-stars {
    background-image: var(--bg-dark-stars);
}

span.card-title {
    font-size: 16px;
}

.card-header {
    padding: 10px;
}

.panel-common > .card-header {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-common > .card-body {
    background-color: #fff;
}

.panel-common > .card-footer {
    font-size: 12px;
    text-align: right;
    background-color: #fff;
    padding: 2px 15px;
    border: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.panel-header-only > .card-header {
    border-radius: 5px;
}

.panel-body-only > .card-body {
    border-radius: 5px;
}

.panel-notice-closed {
    display: none;
}

.panel-notice .card-header {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAKElEQVQImWP09fVlYGA4tHMnAwMDE5xl5+7OyM/GBmFBZSCsQzt3AgAL8AoJAtCiQQAAAABJRU5ErkJggg==);
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-notice .close-icon {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    float: right;
}

.panel-notice .card-body {
    background-color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.panel-body-only > .card-body {
    background-color: #fff;
    border-radius: 5px;
}

.panel-comments > .card-header {
    color: #fff;
    background-color: #85a600;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-comments > .card-body {
    background-color: #fff;
}

.panel-comments > .card-footer {
    border: none;
    background-color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.user-badges {
    float: right;
    margin-right: 15px;
}

.user-badges li {
    float: left;
}

.sharing-icons {
    list-style: none;
    float: right;
}

.sharing-icons li {
    float: left;
    padding: 2px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.list {
    list-style: initial;
    margin: initial;
    padding: initial;
}

.flipnote-grid,
.grid-body {
    margin-bottom: 10px;
    background: transparent;
}

.flipnote-grid .grid-footer {
    text-align: right;
    background: transparent;
}

/* Flipnote List - Container Styles */
ul.flipnote-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: center;
}

/* Flipnote List - Individual Item Styles */
ul.flipnote-list > li.flipnote-list-item {
    position: relative;
    background-color: rgba(256, 256, 256, 0.5);
    border: none;
    background-color: #fff;
    border-radius: 7px;
    padding: 0;
    overflow: clip;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

/* Thumbnail Link */
ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-thumb > a {
    height: 122.25px;
    width: 149px;
    text-decoration: none;
    color: #100;
}

/* Thumbnail Container */
ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-thumb {
    min-height: 107.25px;
    /* border-bottom: 1px solid #f3f3f3; */
}

/* Thumbnail Image */
ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-thumb > a > img {
    margin: 0;
}

ul.flipnote-list li.flipnote-list-item img.thumb {
    margin: 7px 8px 0 8px;
}

/* Blocked Content Styles */
ul.flipnote-list li.flipnote-list-item .flipnote-item-thumb {
    overflow: hidden;
}

ul.flipnote-list li.flipnote-list-item img.thumb.blocked-thumbnail {
    filter: blur(10px);
}

.blocked-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    font-size: 24px;
    color: #fff;
    z-index: 10;
    pointer-events: none;
}

/* Badge Overlay */
ul.flipnote-list
    > li.flipnote-list-item
    > div.flipnote-item-thumb
    > .flipnote-item-badge-wrapper
    > .flipnote-item-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 24px;
    height: 24px;
    background-color: white;
    color: black;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Optional shadow */
    z-index: 10;
    /* Ensure it appears above other elements */
}

.flipnote-item-badge-wrapper {
    position: absolute;
    display: inline-block;
}

.flipnote-alert {
    position: relative;
    top: 17px;
    left: 12px;
    transform: translateY(-50%);
    background: var(--theatre-primary);
    color: white;
    font-size: 12px;
    padding: 3px 10px 3px 15px;
    border-radius: 0 8px 8px 0;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out;
}

.flipnote-item-badge-wrapper:hover .flipnote-alert {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(5px);
}

/* Item Info - Container */
ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-info {
    font-size: 75%;
    padding: 2px 8px;
    line-height: 20px;
    height: 24px;
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    /* Fix starcount wrapping bug */
}

/* Item Info - Username */
ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-info > span.username {
    display: block;
    width: 60%;
    float: left;
    text-align: left;
    flex: fit-content;
}

/* Item Info - Spinoff Icon */
ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-info > span.flipnote-item-badge {
    padding-right: 3px;
    position: relative;
    bottom: 1px;
}

ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-info > span.flipnote-item-badge > img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: inline;
    vertical-align: middle;
}

/* Item Info - Star Count */
ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-info > span.starcount {
    font-weight: bold;
    color: #f58206;
    display: inherit;
}

/* Responsive Adjustments */
@media (max-width: 344px) {
    div.thumb-container {
        min-height: unset;
    }

    ul.flipnote-list {
        grid-template-columns: repeat(auto-fill, 41vw);
    }
}

ul.commentlist .comment {
    background-color: #efefef;
    border-radius: 5px;
    padding: 13px;
    margin-bottom: 10px;
    position: relative;
}

ul.commentlist .comment.pinned-comment {
    border: 2px solid gold;
    margin-bottom: 10px;
    padding: 13px;
    border-radius: 8px;
}

ul.commentlist li.hidden-comment div.comment-container {
    margin-bottom: unset;
    padding-bottom: unset;
}

ul.commentlist .comment-body {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.comment-info {
    padding-left: 4px;
    display: flex;
}

.comment-info span.time {
    color: #8d8c9b;
    display: flex;
    gap: 5px;
}

.comment-body img.thumb {
    height: 50px;
    width: 50px;
    object-fit: cover;
    object-position: center;
    margin: 2px 10px 2px 2px !important;
}

ul.commentlist .comment-content {
    width: 100%;
}

ul.commentlist .comment-meta {
    display: flex;
    justify-content: space-between;
}

ul.commentlist .name {
    font-weight: bold;
    margin-right: 4px;
}

ul.commentlist li.comment span.comment-text p {
    margin-bottom: 0px;
}

ul.commentlist li.comment img.thumb {
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-right: 8px;
}

ul.commentlist li.comment .deleted-text {
    font-style: italic;
    margin-bottom: unset;
}

ul.commentlist li.deleted-comment div.comment-container {
    margin-bottom: unset;
    padding-bottom: unset;
}

ul.commentlist li.comment .comment-actions {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    gap: 8px;
    padding: 4px;
}

ul.commentlist li.comment .action-options {
    display: flex;
    gap: 8px;
}

/* Hide options (except the pinned indicator) by default */
ul.commentlist li.comment .action-options i:not(.pinned-indicator) {
    opacity: 0;
    transition: opacity 0.2s;
}

/* Show non‑pinned options on hover */
ul.commentlist li.comment:hover .action-options i:not(.pinned-indicator) {
    opacity: 1;
}

ul.commentlist li.comment .comment-actions i {
    cursor: pointer;
    color: #888;
}

ul.commentlist li.comment .comment-actions i:hover {
    color: #ff6666;
}

/* Reply button should be green on hover instead of red */
ul.commentlist li.comment .comment-actions i.fa-reply:hover {
    color: #86bc3b;
}

ul.commentlist li.comment .comment-actions i.fa-thumbtack:hover {
    color: gold;
}

ul.commentlist li.comment .pinned-indicator {
    color: gold !important;
    opacity: 1 !important;
}

/* Comment reply indicators */
.comment-reply-indicator {
    font-size: 0.75rem;
    margin-bottom: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: var(--autoplay-enabled-bg, #f0f8e8);
    border: 1px solid var(--autoplay-enabled-border, #86bc3b);
    color: var(--autoplay-enabled-text, #62882d);
    display: inline-block;
}

.comment-reply-indicator i {
    margin-right: 4px;
    color: var(--autoplay-enabled-icon, #62882d);
}

.comment-reply-indicator .reply-ref {
    color: var(--autoplay-enabled-text, #62882d);
    text-decoration: none;
    font-weight: 500;
}

.comment-reply-indicator .reply-ref:hover {
    text-decoration: underline;
}

/* Reply composition indicator */
.reply-indicator {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: var(--autoplay-enabled-bg, #f0f8e8);
    border: 1px solid var(--autoplay-enabled-border, #86bc3b);
    color: var(--autoplay-enabled-text, #62882d);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-indicator i {
    margin-right: 6px;
    color: var(--autoplay-enabled-icon, #62882d);
}

.reply-indicator .cancel-reply {
    background: transparent;
    border: 1px solid var(--autoplay-enabled-border, #86bc3b);
    color: var(--autoplay-enabled-text, #62882d);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reply-indicator .cancel-reply:hover {
    background-color: var(--autoplay-enabled-bg-hover, #e6f4db);
}

/* Two-column comment layout experiment */
.comment-two-column .comment-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.comment-two-column .comment-user-info {
    display: flex;
    flex-direction: column;
    min-width: 80px;
    flex-shrink: 0;
}

.comment-two-column .comment-user-avatar {
    margin-bottom: 8px;
}

.comment-two-column .comment-user-avatar .thumb {
    margin: 0 !important;
}

.comment-two-column .comment-user-meta {
    text-align: left;
    margin-bottom: 4px;
    font-size: 0.9rem;
    line-height: 1.2;
}

.comment-two-column .comment-user-meta .comment-timestamp {
    font-size: 0.8rem;
    color: #8d8c9b;
}

.comment-two-column .comment-user-meta .comment-id {
    font-size: 0.75rem;
    color: #999;
}

.comment-two-column .comment-content-column {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/*
.comment-two-column .comment-content {
    margin-bottom: 8px;
}
*/

.comment-two-column .comment-actions {
    position: static;
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 768.1px) {
    /* next two rules are to make the first line leave room for comment actions */
    .comment-text p {
        position: relative;
        display: flow-root; /* contains the float */
    }

    /* Reserve space on the right for ONLY the first line */
    .comment-text p::before {
        content: "";
        float: right;
        width: 80px; /* = width of your top-right buttons/icon area */
        height: 1lh; /* height of one line; use 1.35em if 1lh unsupported */
        pointer-events: none; /* so it doesn't block selection/clicks */
    }

    .comment-user-meta .comment-timestamp,
    .comment-user-meta .comment-id {
        margin-top: 5px;
    }
    .comment-container img {
        margin: unset !important;
    }
}

/* Mobile responsive: revert to single column layout on small screens */
@media (max-width: 768px) {
    .comment-two-column .comment-body {
        flex-direction: column;
        gap: 8px;
    }

    .comment-two-column .comment-user-info {
        display: block;
        min-width: auto;
        width: 100%;
    }

    /* Create a container for the top row (avatar + username) */
    .comment-two-column .comment-user-info::before {
        content: "";
        display: table;
        clear: both;
    }

    .comment-two-column .comment-user-info::after {
        content: "";
        display: table;
        clear: both;
    }

    /* First row: user avatar and username side by side */
    .comment-two-column .comment-user-avatar {
        float: left;
        margin-bottom: 0;
        margin-right: 10px;
    }

    .comment-two-column .comment-user-meta {
        float: left;
        margin-bottom: 0;
        line-height: 1.2;
        text-align: left;
    }

    /* Second row: timestamp and comment id (clear the float to start new row) */
    .comment-two-column .comment-timestamp {
        clear: both;
        float: left;
        text-align: left;
        margin-bottom: 0;
        margin-right: 8px;
        margin-top: 4px;
    }

    .comment-two-column .comment-id {
        float: left;
        text-align: left;
        margin-bottom: 0;
        margin-top: 4px;
    }

    .comment-two-column .comment-actions {
        position: absolute;
        right: 0;
        top: -3px;
    }

    /* Ensure comment images are centered on mobile */
    .comment-two-column .comment-container {
        clear: both; /* Clear any floated elements above */
    }
}

/* end comments */
#header-locale-selector ul {
    text-align: center;
}

.footer-text {
    font-size: 13px;
    font-weight: 600;
}

table.info {
    font-size: 16px;
    margin-top: 10px;
    font-weight: 600;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    empty-cells: show;
}

table.info td {
    padding: 4px;
}

table.info span {
    border-radius: 3px;
    padding: 3px 10px;
    color: #fff;
    font-size: 80%;
}

span.normal {
    background-color: #8e8e8e;
}

td.normal-data {
    color: #8e8e8e;
}

span.stars {
    background-color: #f58206;
}

td.stars-data {
    color: #f58206;
}

span.flipnotes {
    background-color: #ff9c4b;
}

td.flipnotes-data {
    color: #ff9c4b;
}

span.creators {
    background-color: #abdb0c;
}

td.creators-data {
    color: #abdb0c;
}

span.comments {
    background-color: #85a600;
}

td.comments-data {
    color: #85a600;
}

span.follow {
    background-color: #f5487d;
}

td.follow-data {
    color: #f5487d;
}

span.cost {
    background-color: #db611d;
}

td.cost-data {
    color: #db611d;
}

span.downloads {
    background-color: #48b2f5;
}

td.downloads-data {
    color: #48b2f5;
}

span.flipnote-id {
    background-color: #5870eb;
}

td.flipnote-id-data {
    color: #5870eb;
}

.page-counter {
    float: right;
}

.info-buttons {
    border-top: 2px solid #efefef;
    margin-top: 6px;
    padding-top: 6px;
}

.info-buttons table {
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    border-spacing: 0;
}

.info-buttons span {
    float: right;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 80%;
}

.info-buttons span a {
    color: #fff;
}

.btn-custom {
    background-color: #fff;
    color: #81c106;
    border: solid 1px #81c106;
}

/* The next three rules have to do with some fun HTML layout trickery we're doing to enable the sticky player on mobile */

/* NOTE: the sticky player is currently disabled due to cross-device viewport issues, but we've left these layout changes in case we want to re-enable it */

@media (max-width: 575.98px) {
    .flipnote-player-card {
        border-top: 0 !important;
    }
}

.flipnote-player-card,
.flipnote-player-card > .card-body {
    border-bottom: none !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    box-shadow: none;
    padding-bottom: 0px !important;
}

.flipnote-details-card,
.flipnote-details-card > .card-body {
    border-top: none !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    padding-top: 0px !important;
}

.no-title-warning {
    padding: 0.5rem;
    margin-bottom: 0.8rem;
    border: 1px solid #ffc107;
    border-radius: 7px;
    background: #57421a;
    color: #fff;
}

.no-title-warning a {
    font-weight: bold;
    color: #fff;
}

.btn-custom-active {
    background-color: #81c106;
    color: #fff;
    border: solid 1px #81c106;
}

.fsid {
    text-transform: uppercase;
    font-size: 11px;
    font-style: italic;
}

.channel-item span.flipnotes {
    font-weight: bold;
    float: right;
    border-radius: 3px;
    padding: 3px 10px;
    color: #fff;
    font-size: 70%;
}

.channel-item .channel-flipnotes {
    margin-top: 15px;
}

.channel-item img.thumb {
    border: 1px solid #c2c2c2;
    width: 64px;
    height: 48px;
}

.welcome-frog {
    stroke: #86bc3b;
}

.welcome-to {
    font-family:
        "Arial Rounded MT Bold",
        Helvetica Neue,
        Helvetica,
        sans-serif;
    padding-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.welcome-to h3 {
    color: #fff;
    font-size: 22px;
    margin-top: 0;
}

.welcome-to h4 {
    color: #fff;
    font-size: 16px;
    margin-top: 0;
}

.welcome-user-preview-profile-image img {
    width: 80px;
    border-radius: 10px;
    border: 3px solid #e0e0e0;
}

#welcome-user-preview-stats-2 .star-span {
    margin-right: 4px;
}

#welcome-user-preview-stats-2 .star-span:last-child {
    margin-right: 0px;
}

/* new stats styles */
.welcome-stats-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background-color: #f5f5f5;
}

.welcome-stats-star-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    margin: 2px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background-color: #ffeeba;
}

.welcome-stats-badge i {
    margin-right: 4px;
}

.welcome-stats-badge .rank-delta i {
    margin-left: 4px;
    margin-right: 0px;
}

/* Specific styling for each type of badge */
.badge-rank {
    background-color: #ffeeba;
    color: #856404;
}

.badge-fans {
    background-color: #d4edda;
    color: #155724;
}

.badge-trophies {
    background-color: #cce5ff;
    color: #004085;
}

.badge-achievements {
    background-color: #ffe5b4;
    color: #997404;
}

.rank-display {
    margin-top: 10px;
}

/* end new stats styles */

.about-sudomemo {
    border: 1px solid #dfeef2;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    font-weight: bold;
    flex: 1;
}

.about-sudomemo p {
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 8px;
    border-radius: 5px;
    border: 3px solid #efefef;
}

.about-sudomemo .room {
    display: inline-block;
    width: 85%;
    color: #81c106;
    background-color: #fff;
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 3px solid #81c106;
    border-radius: 5px;
    margin-bottom: 10px;
}

.about-sudomemo .little {
    display: inline-block;
    width: 13%;
    color: #81c106;
    background-color: #fff;
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 3px solid #81c106;
    border-radius: 5px;
    margin-bottom: 10px;
}

.about-sudomemo .big {
    display: block;
    color: #81c106;
    background-color: #fff;
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 3px solid #81c106;
    border-radius: 5px;
    margin-bottom: 10px;
}

.about-sudomemo .left,
.about-sudomemo .right {
    background-color: #fff;
    border: 3px solid #81c106;
    border-radius: 5px;
    color: #81c106;
    display: inline-block;
    font-size: 16px;
    padding-bottom: 6px;
    padding-top: 6px;
    text-align: center;
    width: 48%;
}

.about-sudomemo .right {
    float: right;
}

.about-sudomemo a:hover {
    text-decoration: none;
}

.card-body.panel-welcome {
    background-color: var(--theatre-primary);
}

/* filmstrip */

.filmstrip {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEUAAAD9+f//+vKyNnkwAAAAA3RSTlMA+cXUBqgVAAAAH0lEQVQI12NAB1PDGBiYQkMbGBhDQx1wEmAlYMVoAACAbQmxPJIZAAAAAABJRU5ErkJggg==)
        repeat;
    -webkit-animation: filmstrip-scrolling 120s linear infinite;
    -moz-animation: filmstrip-scrolling 120s linear infinite;
    -o-animation: filmstrip-scrolling 120s linear infinite;
    animation: filmstrip-scrolling 120s linear infinite;
}

.filmstrip {
    height: 16px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

@-webkit-keyframes filmstrip-scrolling {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0% 0;
    }
}

@keyframes filmstrip-scrolling {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0% 0;
    }
}

div#frog1 img,
div#frog2 img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.panel-welcome .social-icons {
    list-style-type: none;
    float: left;
}

.panel-welcome .social-icons li {
    float: left;
    margin-right: 5px;
}

img {
    max-width: 100%;
}

body > .row {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}

.page-inner {
    padding: 0 1rem 1rem;
}

@media (min-width: 992px) {
    body > .row {
        max-width: 860px;
        margin: 0 auto;
    }

    .col-md-6.col-lg-8 {
        width: 100%;
    }

    .col-md-6.col-lg-5 {
        width: 60%;
    }

    .col-md-6.col-lg-3 {
        width: 40%;
    }
}

@media (min-width: 1200px) {
    body > .row {
        max-width: 1045px;
        margin: 0 auto;
    }

    body > .row > .col-lg-offset-2 {
        margin: 0;
    }

    body > .row > .col-lg-8 {
        width: 100%;
    }

    body > .row > .col-lg-5 {
        width: 65%;
    }

    body > .row > .col-lg-3 {
        width: 35%;
    }

    /*
  .flipnote-container img {
      width: 512px;
      box-sizing: content-box
  }
  */
}

.card,
.advert {
    padding: 0;
    height: auto;
}

.card {
    background-color: rgba(192, 192, 192, 0.7);
}

.card > *:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.card > *:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

ul.flipnote-list li img.thumb {
    width: 100%;
    height: auto;
    max-width: 256px;
    margin: 0 auto;
    padding: 0px;
}

.sharing-icons {
    padding: 0 6px;
}

.sharing-icons a i {
    font-size: 30px;
    padding: 0 1px;
}

.info {
    table-layout: fixed;
}

.info span {
    width: 90%;
    display: inline-block;
}

.info tr td:nth-of-type(2n) {
    text-align: right;
    width: 40%;
}

.advert {
    border-radius: 6px;
    overflow: hidden;
}

.advert table {
    width: 100% !important;
}

.advert a {
    display: block;
    color: #6d6d6d !important;
    line-height: 24px !important;
}

.advert td > a {
    padding: 3px;
}

.advert img {
    display: block;
    width: 100%;
}

.about-sudomemo {
    font-family:
        "Arial Rounded MT Bold",
        Helvetica Neue,
        Helvetica,
        sans-serif;
}

.about-sudomemo p {
    font-weight: normal;
}

.about-sudomemo .big {
    font-size: 18px;
}

@media (max-width: 560px) {
    /*
  ul.flipnote-list li:nth-of-type(2n) {
    margin-right: 0
  }
  */
    .sharing-icons {
        margin: 4px;
    }
}

.panel.panel-special {
    border: 3px solid #d68220;
    background-color: #fff;
    box-shadow: 0 0 0 3px #fff;
    margin: 3px;
    margin-bottom: 24px;
    padding: 0;
}

.panel.panel-special .card-header {
    color: #d68220;
    padding: 10px 12px;
    margin: 0;
    border-bottom: 1px solid #d68220;
}

.panel.panel-special .card-body {
    padding: 16px 12px;
    color: #d65920;
    font-size: 1.125em;
}

/* Sudoplayer Fixes */

.flipnote-container {
    /* slightly rounded corners on player */
    border-radius: 6px;
    overflow: hidden;
}

.player__video {
    width: -webkit-fill-available;
    width: -moz-available !important;
}

.player__stage {
    width: -webkit-fill-available;
    width: -moz-available !important;
    height: fit-content;
    height: -moz-fit-content !important;
}

.player {
    width: -webkit-fill-available;
    width: -moz-available !important;
}

.player__controls .controls__frameCounter {
    font-family: sans-serif;
    font-size: 18px;
}

/* Search page badges */

.search--resultcount {
    margin-left: 4px;
    border-radius: 24px;
    background-color: #fff;
    color: var(--theatre-primary);
    padding: 5px 8px;
    vertical-align: text-bottom;
}

.search--viewmore {
    float: right;
}

/*
.search--viewmore > a,
.search--viewmore:active > a {
    color: white;
}
*/

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.has-search input::placeholder {
    font-style: unset;
    font-size: 16px;
}

.search-badge {
    font-weight: bold;
    border-radius: 3px;
    padding: 3px 5px;
    color: #fff;
    font-size: 70%;
    margin-left: 3px;
}

.search-badge-flipnotes {
    background-color: #ff9c4b;
}

.search-badge-follows {
    background-color: #ed4956;
}

.search-badge-stars {
    background-color: #f6b64a;
}

div.flipnote-options {
    overflow: auto;
}

div.flipnote-title-name {
    width: fit-content;
    width: -moz-fit-content;
}

h1.entry-title {
    font-size: 18px;
}

div.flipnote-description {
    margin: 4px 12px 0 12px;
    padding: 10px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #efefef;
    color: #666;
    word-break: break-word;
}

.flipnote-badges {
    margin: 7px 0px 0px 12px;
}

/* flipnote badges */
.flipnote-badge {
    margin: 0px 7px 4px 0px;
    display: inline-block;
    padding: 0.3em 0.4em;
    border-radius: 0.25rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 1rem;
    color: white;
}

/* Featured Flipnote - Shiny Golden Gradient */
.badge-featured-flipnote {
    background: linear-gradient(45deg, #ffd700, #ff8c00);
}

/* Most Popular - Shiny Golden Gradient */
.badge-most-popular {
    background: linear-gradient(45deg, #ffd700, #ffb347);
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

/* Position in Hot Flipnotes - Fiery Gradient */
.badge-hot-flipnotes {
    background: linear-gradient(45deg, #ff4500, #ff6347);
}

/* Weekly Topic Winner - Blue Gradient */
.badge-weekly-topic-winner {
    background: linear-gradient(45deg, #1e90ff, #00bfff);
}

.badge-rewind-2021 {
    /* shiny red gradient */
    background: linear-gradient(45deg, #ff0000, #ff6347);
}

.badge-rewind-2022,
.badge-rewind-2023 {
    /* shiny lime green gradient */
    background: linear-gradient(45deg, #3fe83f, #a8d056);
}

.badge-rewind-2024 {
    /* dark magenta to deep blue gradient */
    background: linear-gradient(45deg, #8b008b, #00008b);
}

.badge-ffc-fall-2025 {
    /* fiery autumn gradient */
    background: linear-gradient(45deg, #ff7f50, #ff4500);
    box-shadow: 0 2px 4px rgba(255, 99, 71, 0.35);
}

.search-result-item {
    display: flex;
}

.search-result-thumbnail img {
    width: 168px;
    height: 94px;
    object-fit: cover;
    outline: 1px solid gray;
}

.search-result-details {
    flex: 1;
    margin-left: 15px;
}

.search-result-title a {
    color: #000;
    text-decoration: none;
}

.search-result-uploader a {
    color: #606060;
    text-decoration: none;
}

.search-result-meta {
    font-size: 0.9em;
    color: #606060;
}

.search-result-description {
    font-size: 0.9em;
    color: #606060;
}

/* FontAwesome upgrade fix for main page */

ul.social-icons span.fa-stack {
    width: 2em !important;
}

ul.social-icons .fab.fa-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background: -webkit-radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
    background-clip: text;
    -webkit-background-clip: text;
}

ul.social-icons > li > a > .fa-stack > i.color-background {
    border-radius: 8px;
    overflow: clip;
    color: white;
    width: 20px;
    height: 25px;
    margin: 1px 0 0 4px;
}

.starcolor-yellow {
    color: #f6b64a !important;
}

.starcolor-green {
    color: #2ba516 !important;
}

.starcolor-red {
    color: #f14b60 !important;
}

.starcolor-blue {
    color: #21bdfe !important;
}

.starcolor-purple {
    color: #bb2ad0 !important;
}

/* Comment Section */

ul.commentlist > li.comment > span.name img.thumb {
    border: 1px solid #c2c2c2;
    width: 49px;
    height: 49px;
    float: left;
    margin-right: 4px;
    border-radius: 5px;
}

ul.commentlist li div.comment-container {
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 30px;
}

ul.commentlist li div.comment-container img {
    margin: 0 auto;
    border-radius: 4px;
    display: block;
}

.comment-content sudo-star {
    position: absolute;
    bottom: 2px;
}

/* fix for flipnotes being too close to each other */

ul.flipnote-list li {
    box-shadow: 2px 3px 3px -4px black;
}

.dropdown-menu {
    min-width: 200px !important;
    /* bootstrap override */
}

.dropdown-header {
    font-size: initial !important;
    color: initial !important;
}

/* Weekly Topic Banner */

a.topic-banner {
    /* display block so that we can apply a background on it for the dark/light theme */
    display: block;
    border-radius: 6px;
}

a.topic-banner > img {
    border-radius: 6px;
}

/* Sudomemo SVG Logo Defaults */

#sudomemo-welcome-logo {
    width: 60%;
    margin-right: auto;
    margin-bottom: 1px;
}

/* Default */

.sudomemo-logo-svg-outline {
    fill: black;
}

.sudomemo-logo-svg-fill,
.sudomemo-logo-svg-play-button {
    fill: white;
}

.sudomemo-logo-svg-play-button {
    stroke: black;
}

.sudomemo-logo-svg-play-button {
    stroke-miterlimit: 10;
    stroke-width: 13px;
}

/* Webfont */

/* TODO: We should not need to use !important to make this work - update the old main.css stuff */

.theme-body {
    font-family: "fot-seurat-pron", sans-serif !important;
}

body,
h1,
h2,
h3,
h4,
h5,
div,
span,
p {
    font-family: "fot-seurat-pron", sans-serif !important;
}

/* css from profile */

.profile-details {
    border: 1px solid var(--theatre-primary);
    border-radius: 5px;
    padding: 4px;
}

ul.recent-channel-list li {
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px;
    zoom: 1;
    padding-top: 5px;
}

ul.recent-channel-list li a {
    text-decoration: none;
}

/* Profile Trophy List */

ul.profile-trophy-list {
    justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
}

ul.profile-trophy-list li {
    display: inline-block;
    margin: 1px 1px 5px 1px;
}

ul.profile-trophy-list li img {
    height: 48px;
    width: 48px;
    border-radius: 2px;
}

/* Profile Fan Sample */

ul.profile-fan-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

ul.profile-fan-list li {
    display: inline-block;
    margin: 2px 2px 5px 2px;
}

ul.profile-fan-list li img {
    height: 30px;
    width: 30px;
    border: 1px solid white;
    outline: 1px solid gray;
    border-radius: 3px;
}

/* Countries stars received from */

div.star-country {
    padding: 0 15px 7px;
}

ul.star-country-flag li {
    display: inline-block;
    height: 21px;
    line-height: 1em;
    margin-right: 5px;
}

div.star-country-index {
    padding-bottom: 5px;
}

/* Recent Comments */

ul.recent-comment-list li img.thumb {
    border: 1px solid #dedede;
    margin-top: 3px;
    width: 64px;
    height: 48px;
    float: left;
    margin-right: 7px;
}

ul.recent-comment-list li span.comment {
    padding-top: 6px;
    padding-bottom: 3px;
    display: block;
    text-align: left;
    word-break: break-word;
    /* fix wrapping issues */
    min-height: 25px;
}

ul.recent-comment-list li span.username {
    font-size: 90%;
    margin-right: 5px;
}

ul.recent-comment-list li span.timestamp {
    color: #999;
    font-size: 80%;
}

ul.recent-comment-list li a {
    text-decoration: none;
}

ul.recent-comment-list li a img {
    margin: 0;
}

ul.recent-comment-list li img {
    margin: 0;
}

ul.recent-comment-list li {
    border-bottom: 1px solid #efefef;
    font-size: 90%;
    padding-bottom: 10px;
    zoom: 1;
    padding-top: 5px;
}

/* Flipnote view page */

h1,
h2,
h3,
h4,
h5 {
    word-break: break-word;
    font-size: 1.3em;
}

/* Flipnote view page: Related Flipnotes */

.related-flipnote-container .related-preview {
    display: inline;
}

.related-flipnote-container .related-preview > a {
    float: left;
    width: 85px;
    height: 64px;
}

.related-flipnote-container .related-preview > a > img {
    border-radius: 4px;
}

.related-flipnote-container .related-details {
    float: left;
    font-size: 16px;
    margin-left: 10px;
    margin-top: -4px;
}

.related-flipnote-container .related-details > p {
    margin-bottom: 0px;
}

.related-flipnote-container .related-details > span {
    font-size: 14px;
}

.related-flipnote-container .related-details p.related-title {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Spinoff Flipnotes */

div.spinoff-flipnote-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

div.spinoff-flipnote-list div.related-flipnote-container {
    overflow: hidden;
    border-bottom: 1px solid gray;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

div.spinoff-flipnote-list div.related-flipnote-container:last-child {
    overflow: hidden;
    border-bottom: none;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

div.related-stats > span {
    border-radius: 3px;
    color: #fff;
    font-size: 80%;
    padding: 4px;
    margin-right: 5px;
}

div.related-stats > .stats-follows {
    background-color: #f5487d;
}

div.related-stats > span.stats-views {
    background-color: #ff9c4b;
}

div.related-stats > span.stats-downloads {
    background-color: #48b2f5;
}

div.related-stats > span.stats-comments {
    background-color: #85a600;
}

/* New Profile Bar */

.profile-head {
    overflow: auto;
}

#profile-wrapper {
    display: flex;
    width: 100%;
}

/*
.profile-block {
  height: 100%;
}
*/

div.profile-block:nth-child(1) > img:nth-child(1) {
    margin: 10px 10px 10px 10px;
    border-radius: 10px;
    border: 3px solid var(--theatre-primary);
}

.profile-image {
    max-width: 128px;
    order: 1;
}

.profile-user-details {
    flex: 1;
    order: 2;
    margin-left: 24px;
    width: 100%;
}

span.profile-username {
    display: block;
    font-size: 18px;
    width: max-content;
    font-weight: bold;
}

span.profile-username > img {
    display: inline;
    margin-left: 2px;
}

.profile-user-details > h4 > img {
    display: inline;
}

.profile-bio {
    word-break: break-word;
}

span.small-caps {
    font-variant-caps: all-small-caps;
}

div.follow-button {
    padding: 10px 10px 10px 0px;
}

div.follow-button button {
    font-size: larger;
    border-radius: 5px;
    border: 1px solid;
}

div.profile-block.sort-buttons {
    padding: 10px;
}

.profile-actions {
    /* width: 60%; */
    order: 3;
}

.sort-buttons {
    width: 100%;
}

@media all and (max-width: 470px) {
    #profile-wrapper {
        flex-wrap: wrap;
    }

    .profile-actions {
        /* width: 100%; */
        order: 4;
    }

    .profile-image {
        width: 25%;
        min-width: 128px;
    }

    .profile-image img {
        max-width: 128px;
    }

    .profile-user-details {
        order: 2;
        flex: 1;
    }
}

/* Trending Users */

div.trending-user-list {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

div.trending-user-list div.related-user-container {
    border-bottom: 1px solid rgb(239, 239, 239);
    margin-top: 10px;
    margin-bottom: 10px;
}

div.trending-user-list div.related-user-container:last-child {
    overflow: hidden;
    border-bottom: none;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

span.ranking-number {
    padding: 8px 10px;
    margin: 7px 10px 7px 7px;
    border-radius: 5px;
    width: auto;
    font-size: 20px;
    font-weight: bold;
}

.rank-1 {
    color: #fff;
    background:
        radial-gradient(
            ellipse farthest-corner at right top,
            #fedb37 0%,
            #fdb931 8%,
            #906f29 30%,
            #7d6736 40%,
            transparent 80%
        ),
        radial-gradient(
            ellipse farthest-corner at left top,
            #ffffff 0%,
            #ffffac 8%,
            #d1b464 25%,
            #d29b1e 62.5%,
            #ffd013 100%
        );
    box-shadow: 0 0 15px 0 #fdb931;
}

.rank-2 {
    color: #fff;
    background:
        radial-gradient(
            ellipse farthest-corner at right top,
            #e0d8d8 0%,
            #f3ebeb 8%,
            #9c988e 30%,
            #a7a299 40%,
            #d0d0ce75 80%
        ),
        radial-gradient(
            ellipse farthest-corner at left top,
            #ffffff 0%,
            #fdfdf3 8%,
            #bfbcb3 25%,
            #eff3f5 62.5%,
            #fffdf6 100%
        );
    box-shadow: 0 0 15px 0 #e0d8d8;
}

.rank-3 {
    color: #fff;
    background:
        radial-gradient(
            ellipse farthest-corner at right top,
            #d27f4b 0%,
            #b79663 8%,
            #d45f15 30%,
            #c5672b 40%,
            #d0d0ce75 80%
        ),
        radial-gradient(
            ellipse farthest-corner at left top,
            #ffffff 0%,
            #fdfdf3 8%,
            #d45b0f 25%,
            #cd6e32 62.5%,
            #cd6e32 100%
        );
    box-shadow: 0 0 15px 0 #d27f4b;
}

.rank-4,
.rank-5 {
    color: #fff;
    background-color: #c0d1d9;
}

div.trending-user {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    border-bottom: 1px solid rgb(239, 239, 239);
    padding-bottom: 5px;
}

div.trending-user:last-child {
    border-bottom: none !important;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

div.trending-user > a {
    /* profile pic */
    display: inherit;
    /* flex */
}

div.trending-user > a > img {
    border-radius: 5px;
}

div.trending-user .trending-user-details {
    font-size: 16px;
    margin: 3px 0 0 8px;
}

div.trending-user .trending-user-details > p {
    margin-bottom: 0px;
}

div.trending-user .trending-user-details > span {
    font-size: 14px;
}

div.trending-user .trending-user-details p.trending-user-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Article */

div.bodycontent {
    word-break: break-word;
}

/* Theatre dropdowns for sort menus. */

div.theatre-dropdown-container {
    position: relative;
    /* display: block; */
    display: inline-block;
    width: 200px;
    height: 32px;
    line-height: 2;
    background: #ff00ff;
    overflow: hidden;
    border-radius: 0.25em;
}

div.theatre-dropdown-container::after,
select.theatre-dropdown::after {
    background: var(--theatre-primary);
    pointer-events: none;
    border-left: 1px solid white;
    content: "\25BC";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    color: white;
}

div.theatre-dropdown-container::after {
    padding: 2px 9px 0px 9px;
}

div.theatre-dropdown-container:hover::after {
    color: #f0f0f0;
}

div.theatre-dropdown-container::after {
    -webkit-transition: 0.25s all ease;
    -o-transition: 0.25s all ease;
    transition: 0.25s all ease;
}

select.theatre-dropdown {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0 0 0.5em;
    color: #fff;
    cursor: pointer;
    border: 1px solid var(--theatre-primary);
    background-color: var(--theatre-primary);
}

select.theatre-dropdown::-ms-expand {
    display: none;
}

select.theatre-dropdown::after {
    padding: 0 1em;
}

/* Flipnote Stats (New) */

div#flipnote-stats > ul {
    display: grid;
    grid-column-gap: 16px;
    justify-content: center;
    width: 100%;
}

div#flipnote-stats > ul > li:nth-child(1) {
    grid-area: views;
    border: 1px solid #ff9c4b;
    color: #ff9c4b;
}

div#flipnote-stats > ul > li:nth-child(2) {
    grid-area: downloads;
    border: 1px solid #48b2f5;
    color: #48b2f5;
}

div#flipnote-stats > ul > li:nth-child(3) {
    grid-area: comments;
    border: 1px solid #85a600;
    color: #85a600;
}

div#flipnote-stats > ul > li:nth-child(4) {
    grid-area: flipnote-id;
    border: 1px solid #5870eb;
    color: #5870eb;
}

div#flipnote-stats > ul > li:nth-child(5) {
    grid-area: channel;
    border: 1px solid #5870eb;
    color: #5870eb;
}

div#flipnote-stats > ul > li:nth-child(6) {
    grid-area: region;
    border: 1px solid #8e8e8e;
    color: #8e8e8e;
}

div#flipnote-stats > ul {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "views downloads" "comments flipnote-id" "channel channel" "region region";
}

@media (min-width: 450px) {
    div#flipnote-stats > ul {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "views downloads comments" "flipnote-id region region" "channel channel channel";
    }
}

@media (min-width: 992px) {
    div#flipnote-stats > ul {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "views downloads" "comments flipnote-id" "region region" "channel channel";
    }
}

div#flipnote-stats > ul > li {
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 10px;
    border-radius: 5px;
    padding-left: 0;
    padding-right: 0;
}

div#flipnote-stats > ul > li > span:first-child {
    color: #fff;
}

div#flipnote-stats > ul > li > span:nth-child(2) {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Profile Stats (new) */

div#profile-stats > ul {
    display: grid;
    grid-column-gap: 16px;
    justify-content: center;
    width: 100%;
}

div#profile-stats > ul > li:nth-child(1) {
    grid-area: rank;
    border: 1px solid #ff9c4b;
    color: #ff9c4b;
}

div#profile-stats > ul > li:nth-child(2) {
    grid-area: flipnotes;
    border: 1px solid #ff9c4b;
    color: #ff9c4b;
}

div#profile-stats > ul > li:nth-child(3) {
    grid-area: views;
    border: 1px solid #85a600;
    color: #85a600;
}

div#profile-stats > ul > li:nth-child(4) {
    grid-area: downloads;
    border: 1px solid #48b2f5;
    color: #48b2f5;
}

div#profile-stats > ul > li:nth-child(5) {
    grid-area: following;
    border: 1px solid #f5487d;
    color: #f5487d;
}

div#profile-stats > ul > li:nth-child(6) {
    grid-area: followers;
    border: 1px solid #f5487d;
    color: #f5487d;
}

div#profile-stats > ul > li:nth-child(7) {
    grid-area: stars;
    border: 1px solid #ff9c4b;
    color: #ff9c4b;
}

div#profile-stats > ul > li:nth-child(8) {
    grid-area: hatena-id;
    border: 1px solid #f5487d;
    color: #f5487d;
}

div#profile-stats > ul {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "rank flipnotes" "views downloads" "following followers" "stars stars" "hatena-id hatena-id";
}

@media (min-width: 450px) {
    div#profile-stats > ul {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "rank flipnotes views" "downloads following followers" "stars stars stars" "hatena-id hatena-id hatena-id";
    }
}

@media (min-width: 992px) {
    div#profile-stats > ul {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "rank flipnotes" "views downloads" "following followers" "stars stars" "hatena-id hatena-id";
    }
}

div#profile-stats > ul > li {
    display: inline-flex;
    flex-direction: column;
    margin-bottom: 10px;
    border-radius: 5px;
    padding-left: 0;
    padding-right: 0;
}

div#profile-stats > ul > li > span:first-child {
    color: #fff;
}

div#profile-stats > ul > li > span:nth-child(2) {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Sudomemo News Index Page */

ul#sudomemo-news-list > li.news {
    display: flex;
    transition: background-color 0.2s ease;
    padding: 0.25rem 0; /* light vertical padding */
}

ul#sudomemo-news-list .news:hover {
    background-color: rgba(0, 0, 0, 0.03); /* subtle hover */
}

ul#sudomemo-news-list > li.news > div:nth-child(1) {
    display: block;
}

ul#sudomemo-news-list > li.news > div:nth-child(1) > img {
    justify-content: center;
    background-color: white;
}

@media (min-width: 576px) {
    ul#sudomemo-news-list > li.news > div:nth-child(1) > img {
        max-width: 200px;
    }
}

ul#sudomemo-news-list > li.news > div > span {
    display: block;
}

ul#sudomemo-news-list > li.news > div > span.article-date {
    font-variant-caps: all-small-caps;
}

#sudomemo-news-list .news-item a {
    font-size: 0.95rem;
    line-height: 1.3;
}

#sudomemo-news-list .article-date {
    font-size: 0.8rem;
    margin-top: 2px;
}

/* no borders on xs */

@media (max-width: 575.98px) {
    .border-xs-left-none {
        border-left: none !important;
    }

    .border-xs-right-none {
        border-right: none !important;
    }

    .border-xs-top-none {
        border-top: none !important;
    }

    .border-xs-bottom-none {
        border-bottom: none !important;
    }

    .page-inner {
        padding: 0 0 1rem !important;
    }
}

@media (max-width: 767.98px) {
    .border-sm-left-none {
        border-left: none !important;
    }

    .border-sm-right-none {
        border-right: none !important;
    }

    .border-sm-top-none {
        border-top: none !important;
    }

    .border-sm-bottom-none {
        border-bottom: none !important;
    }

    .footer-top {
        display: block !important;
    }

    .footer-right,
    .footer-left,
    .social-icons {
        width: fit-content;
        margin: 0 auto;
    }

    .footer-left {
        margin: 0px auto 0px !important;
    }

    .footer-right {
        margin: 30px auto -14px auto !important;
        gap: 80px !important;
    }

    .centering-mobile {
        text-align: center;
    }
    /* 
    .theatre-footer {
        font-size: 130%;
    } */

    .social-icons {
        font-size: 14px;
        transform: scale(1.3);
    }

    .footer-link {
        margin-top: 10px;
    }
}

@media (max-width: 991.98px) {
    .border-md-left-none {
        border-left: none !important;
    }

    .border-md-right-none {
        border-right: none !important;
    }

    .border-md-top-none {
        border-top: none !important;
    }

    .border-md-bottom-none {
        border-bottom: none !important;
    }
}

@media (max-width: 1199.98px) {
    .border-lg-left-none {
        border-left: none !important;
    }

    .border-lg-right-none {
        border-right: none !important;
    }

    .border-lg-top-none {
        border-top: none !important;
    }

    .border-lg-bottom-none {
        border-bottom: none !important;
    }
}

.border-xl-left-none {
    border-left: none !important;
}

.border-xl-right-none {
    border-right: none !important;
}

.border-xl-top-none {
    border-top: none !important;
}

.border-xl-bottom-none {
    border-bottom: none !important;
}

/*** Panel header froggies etc ***/

/* popular flipnotes */

.panel-header-popular {
    background: var(--theatre-primary) var(--header-frog-popular) right no-repeat;
    background-position-y: center;
}

/* hot flipnotes */

.panel-header-hot {
    background: var(--theatre-primary) var(--header-frog-hot) right no-repeat;
    background-position-y: center;
}

/* recent flipnotes */

.panel-header-recent {
    background: var(--theatre-primary) var(--header-frog-recent) right no-repeat;
}

/* flipnote spotlight */

.panel-header-spotlight {
    background: var(--theatre-primary) var(--header-frog-spotlight) right no-repeat;
}

/* ranking */

.panel-header-ranking {
    background: var(--theatre-primary) var(--header-frog-ranking) right no-repeat;
}

/* news */

.panel-header-news {
    background: var(--theatre-primary) var(--header-frog-news) right no-repeat;
}

/* flipnote comments */

.panel-header-comments {
    background: var(--theatre-primary) var(--header-frog-comments) right no-repeat;
    background-position-y: -5px;
}

/* random flipnotes */

.panel-header-random {
    background: var(--theatre-primary) var(--header-frog-random) right no-repeat;
    /* background-position-y: -5px; */
}

/* music */

.panel-header-music {
    background: var(--theatre-primary) var(--header-frog-music) right no-repeat;
    background-position-y: -4px;
}

/* fans */

.panel-header-fans {
    background: var(--theatre-primary) var(--header-frog-fans) right no-repeat;
}

/* trophy case */

.panel-header-trophies {
    background: var(--theatre-primary) var(--header-frog-trophies) right no-repeat;
}

/* all panel headers get image-rendering: pixelated */

.panel-header-hot,
.panel-header-news,
.panel-header-popular,
.panel-header-ranking,
.panel-header-spotlight,
.panel-header-comments,
.panel-header-random,
.panel-header-music,
.panel-header-fans,
.panel-header-trophies {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* pagination -- rough port from archive paginator (thanks james!) */

.pagination {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

.pagination__button,
.pagination__button:hover,
.pagination__counter {
    background: var(--theatre-primary);
    border-radius: 100px;
    color: white;
    margin: 0 0.5rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

.pagination__button {
    font-weight: 900;
    width: 4ch;
}

.pagination__button--disabled,
.pagination__button--disabled:hover {
    background: #d0d0d0;
}

.pagination__counter {
    background: white;
    border: 1px solid var(--theatre-primary);
    color: var(--theatre-primary);
    font-variant: tabular-nums;
    min-width: 12ch;
}

.theatre-footer-spacer {
    flex-grow: 1;
}

.theatre-footer {
    background-color: var(--theatre-primary);
    margin-top: 1rem;
    padding: 20px;
    border-top: solid 2px #fff;
}

.footer-inner {
    margin: 0 auto;
    max-width: 1000px;
}

.footer-left {
    margin-right: auto;
}

.footer-right {
    margin: auto 0 auto auto;
    display: flex;
    gap: 30px;
}

.footer-top {
    display: flex;
}

.footer-links {
    margin: 0 0 10px;
}

.link-divider {
    max-width: 100px;
    height: 2px;
    background-color: white;
    margin: 2px 0 6px;
}

/* Creator's Room - Playlists */

ul.playlist-list li {
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px;
    zoom: 1;
    padding-top: 5px;
}

/* View Flipnote - Playlists */

.playlist-flipnotes-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: solid 1px #fff;
    border-radius: 8px;
    padding: 6px;
    margin-top: 12px;
    max-height: 551px;
    overflow-y: scroll;
}

.playlist-visibility {
    color: #fff;
    background-color: var(--secondary);
    padding: 6px 12px;
    border-radius: 8px;
}

/* Playlist Autoplay Toggle */
.playlist-autoplay-container {
    margin-top: 12px;
    margin-bottom: 12px;
    position: relative;
}

.playlist-autoplay-toggle {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.playlist-autoplay-toggle.no-transition {
    transition: none !important;
}

.playlist-autoplay-toggle:hover {
    background-color: #e9ecef;
}

.playlist-autoplay-toggle.autoplay-enabled {
    background-color: var(--autoplay-enabled-bg);
    border-color: var(--autoplay-enabled-border);
}

.playlist-autoplay-toggle.autoplay-enabled:hover {
    background-color: var(--autoplay-enabled-bg-hover);
}

.autoplay-icon {
    margin-right: 8px;
    color: #666;
}

.playlist-autoplay-toggle.autoplay-enabled .autoplay-icon {
    color: var(--autoplay-enabled-icon);
}

.autoplay-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-right: auto;
}

.playlist-autoplay-toggle.autoplay-enabled .autoplay-text {
    color: var(--autoplay-enabled-text);
}

.autoplay-switch {
    width: 36px;
    height: 20px;
}

.autoplay-switch-track {
    width: 100%;
    height: 100%;
    background-color: #ccc;
    border-radius: 10px;
    position: relative;
    transition: background-color 0.2s ease;
}

.playlist-autoplay-toggle.autoplay-enabled .autoplay-switch-track {
    background-color: var(--autoplay-enabled-border);
}

.autoplay-switch-thumb {
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.playlist-autoplay-toggle.autoplay-enabled .autoplay-switch-thumb {
    transform: translateX(16px);
}

/* Autoplay Help Tooltip */
.autoplay-help-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    font-size: 13px;
    line-height: 1.4;
}

/*
.autoplay-help-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 12px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ddd;
}
*/
.autoplay-help-tooltip::after {
    content: "";
    position: absolute;
    top: -7px;
    /*  left: 12px; */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}

.autoplay-help-header {
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    font-size: 14px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.autoplay-help-close {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin-left: 8px;
}

.autoplay-help-close:hover {
    color: #666;
    background-color: #f0f0f0;
}

.autoplay-help-message {
    color: #666;
    line-height: 1.5;
}

.playlist-flipnote {
    background-color: #e7f5d5;
    display: flex;
    padding: 8px;
    cursor: pointer;
    min-height: 76px;
    border-radius: 8px;
    margin: 2px 0;
}

#playlist-current {
    background-color: #b4db82;
    border-radius: 8px;
}

.playlist-flipnote-thumb {
    margin: auto 0;
    min-width: 64px;
    max-width: 64px;
    height: 48px;
}

.playlist-flipnote-info {
    display: flex;
    flex-direction: column;
    margin: auto 6px;
}

.playlist-flipnote-title {
    word-break: break-word;
    max-width: 186px;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-flipnote-author {
    max-width: 186px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-flipnote-index {
    margin-left: auto;
    margin-top: auto;
    margin-bottom: -6px;
    color: #999;
}

/* Playlist selection menu */
#playlist-selection-menu {
    background-color: #44444480;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    display: flex;
}

#playlist-selection-menu-card {
    width: 380px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

#playlist-selection-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    max-height: 446px;
    overflow-x: scroll;
}

.playlist-selection-menu-item {
    border: 2px solid var(--theatre-primary);
    border-radius: 7px;
    padding: 4px;
    display: flex;
    cursor: pointer;
}

.playlist-selection-menu-item-thumb {
    margin: 0;
    width: 48px;
    height: 48px;
    font-size: 48px;
}

.playlist-selection-menu-item-title {
    align-self: center;
    margin-left: 8px;
    min-width: 0;
}

#new-playlist-title {
    width: 100%;
}

#new-playlist-desc {
    width: 100%;
    height: 150px;
}

#playlist-selection-error {
    width: 100%;
    border: 2px dotted var(--danger);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    margin-bottom: 10px;
    background-color: #dc354580;
}

/* Playlist management menu */
#playlist-manage-menu {
    background-color: #44444480;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    display: flex;
}

#playlist-manage-menu-card {
    min-width: 380px;
    max-width: 600px;
    width: max-content;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

#edit-playlist-title {
    width: 100%;
}

#edit-playlist-desc {
    width: 100%;
    height: 150px;
}

#edit-playlist-visibility-flex {
    display: flex;
    border: 2px solid var(--theatre-primary-default);
    border-radius: 7px;
    width: fit-content;
    margin: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.edit-playlist-visibility-opt:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.edit-playlist-visibility-opt:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.edit-playlist-visibility-opt:nth-child(2) {
    border-left: 2px solid var(--theatre-primary-default);
    border-right: 2px solid var(--theatre-primary-default);
}

.edit-playlist-visibility-opt {
    background-color: #e7f5d5;
    color: #000;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 4px;
    cursor: pointer;
}

.edit-playlist-visibility-opt > i {
    font-size: 32px;
}

.edit-playlist-visibility-opt.opt-active {
    background-color: #b4db82;
}

#manage-playlist-error {
    width: 100%;
    border: 2px dotted var(--danger);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    margin-bottom: 10px;
    background-color: #dc354580;
}

/* ticket gifting */
#ticketModal .modal-content {
    border: none;
}

.ticket-gifting-banner {
    border-bottom: solid 1px #eeecec;
    margin-bottom: 1rem;
}

/* rank deltas */
/* Default old styling for .trending-user-list and .welcome-user-preview-stats-1 */
.trending-user-list .rank-delta,
.welcome-user-preview-stats-1 .rank-delta {
    font-family: "Courier New", Courier, monospace;
    display: inline-flex;
    align-items: center;
}

.trending-user-list .rank-delta i,
.welcome-user-preview-stats-1 .rank-delta i {
    margin-right: 5px;
}

.trending-user-list .rank-delta span:nth-child(2),
.welcome-user-preview-stats-1 .rank-delta span:nth-child(2) {
    font-size: 14px;
}

/* Specific new styling for .profile-stats */
.profile-stats .rank-delta-profile {
    font-family: "Courier New", Courier, monospace !important;
    display: inline-flex;
    align-items: center;
}

.profile-stats .rank-delta-profile i {
    /* No margin-right in new styling */
}

.profile-stats .rank-delta-profile span:nth-child(2) {
    padding-left: 0px !important;
    margin: 0px !important;
    padding: 0 !important;
    font-size: 14px;
}

.profile-stats .rank-delta-profile .fa-arrow-up {
    font-size: 12px;
}

/* Recommendation feed (watch page) */
.recommended-feed {
    padding: 0.5rem;
    /* Less padding than before */
}

.recommended-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recommended-item {
    display: flex;
    align-items: center;
    /* Keep items aligned vertically */
    margin-bottom: 0.5rem;
    /* Tighter spacing */
}

.thumbnail-link {
    flex-shrink: 0;
    margin-right: 0.5rem;
    /* Reduced margin */
}

.rec-thumbnail {
    width: 90px;
    /* Smaller thumbnail width */
    height: auto;
    border-radius: 4px;
    border: 1px solid #dedede;
}

.recommended-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rec-title {
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 0.15rem;
    text-decoration: none;
    line-break: anywhere;
}

.rec-meta,
.rec-creator {
    font-size: 0.75rem;
}

.rec-username {
    text-decoration: none;
    /* override color here as well */
}

.rec-title:hover,
.rec-username:hover {
    text-decoration: underline;
}

/* end recommendation feed */

ul.recent-comment-list li:last-child,
.profile-head #profile-wrapper:last-child,
ul.playlist-list li:last-child,
ul.recent-channel-list li:last-child,
ul.flipnote-list > li.flipnote-list-item > div.flipnote-item-thumb {
    border-bottom: none !important;
}

/* Notification System - Base Styles */

.notification-badge {
    position: relative;
    top: -12px;
    right: 10px;
    font-size: 0.7em;
    border-radius: 25px;
    min-width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
}

.notification-badge-mobile {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.6em;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
}

.notification-dropdown {
    width: 350px;
    max-width: 90vw;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0 !important;
    position: fixed !important;
    top: 60px !important;
    right: 15px !important;
    z-index: 1050;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Mobile specific positioning */
@media (max-width: 767.98px) {
    .notification-dropdown {
        top: 36px !important;
        right: 15px !important;
        left: 15px !important;
        width: auto !important;
    }
}

.notification-header {
    padding: 8px 16px;
    font-weight: 600;
    color: #fff;
    background-color: #86bc3b;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px 5px 0 0;
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}

.dropdown-item {
    border-radius: 0 0 5px 5px;
}

.notification-item:hover {
    background-color: #f8f9fa;
    text-decoration: none;
    color: inherit;
}

.notification-item.unread {
    background-color: #e7f3ff;
}

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-text {
    line-height: 1.3;
    margin-bottom: 4px;
    word-break: break-word;
}

.notification-time {
    font-size: 0.8em;
    color: #6c757d;
}

.notification-link {
    text-decoration: none;
    font-weight: normal !important;
    background-color: unset !important;
    padding: unset !important;
    color: #86bc3b !important;
}

.notification-link:hover {
    text-decoration: underline;
    background-color: transparent !important;
    color: #75a434 !important;
}

.notification-user {
    font-weight: 600;
    color: #86bc3b !important;
    text-decoration: none;
    background-color: unset !important;
    padding: unset !important;
}

.notification-user:hover {
    color: #75a434 !important;
    text-decoration: underline;
    background-color: transparent !important;
}

.empty-notifications {
    text-align: center;
    padding: 30px 20px;
    color: #6c757d;
}

.empty-notifications i {
    font-size: 2em;
    margin-bottom: 10px;
    opacity: 0.5;
}

.star-icon {
    display: inline-block;
    vertical-align: baseline;
}

#mark-all-read {
    color: #fff;
    text-decoration: none;
    transition: none;
    border-radius: 10px;
}

#mark-all-read:hover {
    color: var(--theatre-primary-default) !important;
    background: #fff;
}

#notifications-dropdown-menu .dropdown-divider {
    margin: 0;
}

/* Genealogy System Base Styles */

.flipnote-genealogy-container {
    max-width: fit-content;
    padding: 8px;
    top: -14px;
    position: relative;
    z-index: 1001; /* Ensure header and content appear above the background graph */
}

.flipnote-genealogy-header {
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    background: var(--theme-bg, white); /* Use theme background */
    z-index: 1002; /* Higher than container */
}

.flipnote-genealogy-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4e92ef, #94d040, #ef6d4e, #ffc107);
    z-index: 1;
}

.flipnote-genealogy-header .content {
    position: relative;
    z-index: 2;
}

.flipnote-genealogy-back-link {
    float: left;
    margin-bottom: 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.flipnote-genealogy-title {
    font-size: 2.2em;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    clear: both;
    text-align: center;
}

.flipnote-genealogy-subtitle {
    font-size: 1.1em;
    margin: 0;
    font-weight: 500;
    text-align: center;
}

.flipnote-genealogy-tree {
    position: relative;
    overflow-x: auto;
    padding: 20px 0;
}

.flipnote-genealogy-tree-level {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 20px 0;
    flex-wrap: wrap;
    position: relative;
    gap: 15px;
}

.flipnote-genealogy-tree-node {
    position: relative;
    margin: 10px 20px;
    text-align: center;
    min-width: 200px;
}

.flipnote-genealogy-card {
    border-radius: 8px;
    padding: 0;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    overflow: hidden;
    background: #fff;
    /* Fix overflow issues by preventing cytoscape from controlling card dimensions */
    height: unset !important;
    width: unset !important;
    /* Prevent text selection during panning */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.flipnote-genealogy-card:hover {
    transform: translateY(-1px);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

.flipnote-genealogy-thumb-container {
    position: relative;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.flipnote-genealogy-thumb-container img.thumb {
    max-width: 128px;
    max-height: 96px;
    border-radius: 4px;
}

/* Special layouts for missing and removed cards */
.flipnote-genealogy-card.missing-special-layout {
    border-width: 3px !important;
    border-style: dashed !important;
    padding: 20px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flipnote-genealogy-card.removed-special-layout {
    border-width: 3px !important;
    padding: 15px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.missing-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.missing-main-icon {
    font-size: 40px !important;
    margin-bottom: 5px;
}

.missing-text {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.removed-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.removed-main-icon {
    font-size: 36px !important;
    margin-bottom: 5px;
}

.removed-text {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.removed-username {
    font-size: 12px;
    margin: 0;
    opacity: 0.9;
}

/* Legacy styles for old thumbnail-based missing/removed cards */
.flipnote-genealogy-thumb-container .missing-icon,
.flipnote-genealogy-thumb-container .tombstone-icon {
    font-size: 32px;
    color: #6c757d;
}

.flipnote-genealogy-info {
    padding: 8px 10px;
}

.flipnote-genealogy-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.3;
    color: #333;
}

.flipnote-genealogy-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #000;
    margin-bottom: 4px;
}

.flipnote-genealogy-username {
    flex: 1;
    margin-right: 8px;
}

.flipnote-genealogy-view-count {
    display: flex;
    align-items: center;
    font-size: 11px;
    margin-right: 4px;
}

.flipnote-genealogy-view-count i {
    margin-right: 2px;
}

.flipnote-genealogy-date {
    font-size: 10px;
    color: #575757;
    line-height: 1.2;
}

.genealogy-nav-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 11px;
    color: #666;
}

.genealogy-nav-link:hover {
    transform: scale(1.1);
    color: #333;
}

.genealogy-nav-icon,
.genealogy-nav-spinner {
    width: 1em;
    height: 1em;
    line-height: 1;
}

.genealogy-nav-spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.flipnote-genealogy-large-family-notice {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
}

.flipnote-genealogy-grid-layout {
    max-height: 600px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
}

/* Connection lines for family tree */
.flipnote-genealogy-tree-level:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 25px;
    z-index: -1;
}

.flipnote-genealogy-tree-level .flipnote-genealogy-tree-node:not(:only-child)::after {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    height: 5px;
    z-index: -1;
}

.flipnote-genealogy-tree-level .flipnote-genealogy-tree-node:first-child::after {
    left: 50%;
}

.flipnote-genealogy-tree-level .flipnote-genealogy-tree-node:last-child::after {
    right: 50%;
}

.flipnote-genealogy-legend {
    border-radius: 8px;
    padding: 15px;
    margin-top: 30px;
    font-size: 12px;
    box-shadow: 0px 3px 8px -2px rgba(0, 0, 0, 0.2);
}

.flipnote-genealogy-legend h4 {
    margin-bottom: 10px;
    font-size: 14px;
}

.flipnote-genealogy-legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 5px 10px;
    align-items: center;
}

.flipnote-genealogy-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.flipnote-genealogy-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 8px;
    border: 2px solid;
}

/* Genealogy zoom controls styling */
.genealogy-zoom-controls {
    position: fixed;
    top: 70px;
    right: 15px;
    z-index: 1003;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.genealogy-zoom-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 4px;
}

.genealogy-zoom-btn.zoom-reset {
    font-size: 12px;
}

/* Back to flipnote link styling */
.flipnote-genealogy-back-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1003;
    text-decoration: none;
    font-size: 18px;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Stats container improved styling */
.flipnote-genealogy-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 4px 0;
}

.genealogy-nav-link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding: 2px;
}

@media (max-width: 768px) {
    .genealogy-zoom-controls {
        top: 180px;
    }

    .flipnote-genealogy-container {
        padding: 5px;
    }

    .flipnote-genealogy-tree-node {
        margin: 5px 10px;
        min-width: 160px;
    }

    .flipnote-genealogy-card {
        font-size: 12px;
    }

    .flipnote-genealogy-thumb-container {
        height: 72px;
    }

    .flipnote-genealogy-thumb-container img.thumb {
        max-width: 96px;
        max-height: 72px;
    }

    .flipnote-genealogy-info {
        padding: 6px 8px;
    }

    .flipnote-genealogy-grid-layout {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        max-height: 400px;
    }

    .flipnote-genealogy-legend-item {
        margin-right: 15px;
        font-size: 11px;
    }

    /* Mobile-specific genealogy container */
    #genealogy-container {
        height: calc(100vh - 80px) !important; /* Account for mobile navbar */
        touch-action: none;
    }

    /* Fix overflow issues by preventing cytoscape from controlling card dimensions */
    .flipnote-genealogy-card {
        height: unset !important;
        width: unset !important;
    }

    /* Mobile responsive styles for special missing/removed layouts */
    .flipnote-genealogy-card.missing-special-layout {
        padding: 15px;
        min-height: 100px;
    }

    .missing-main-icon {
        font-size: 32px;
    }

    .missing-text {
        font-size: 12px;
    }

    .flipnote-genealogy-card.removed-special-layout {
        padding: 12px;
        min-height: 85px;
    }

    .removed-main-icon {
        font-size: 28px;
    }

    .removed-text {
        font-size: 12px;
    }

    .removed-username {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .flipnote-genealogy-title {
        font-size: 1.8em;
    }

    .flipnote-genealogy-subtitle {
        font-size: 1em;
    }

    .flipnote-genealogy-card {
        font-size: 11px;
    }

    .flipnote-genealogy-thumb-container {
        height: 60px;
    }

    .flipnote-genealogy-thumb-container img.thumb {
        max-width: 80px;
        max-height: 60px;
    }

    .flipnote-genealogy-info {
        padding: 5px 6px;
    }

    .flipnote-genealogy-title {
        font-size: 12px;
    }

    .flipnote-genealogy-meta {
        font-size: 10px;
    }

    .flipnote-genealogy-date {
        font-size: 9px;
    }

    /* Extra small mobile genealogy container */
    #genealogy-container {
        height: calc(100vh - 100px) !important; /* Account for smaller mobile navbar + spacing */
    }

    /* Fix overflow issues by preventing cytoscape from controlling card dimensions */
    .flipnote-genealogy-card {
        height: unset !important;
        width: unset !important;
    }

    /* Extra small mobile responsive styles for special missing/removed layouts */
    .flipnote-genealogy-card.missing-special-layout {
        padding: 12px;
        min-height: 85px;
    }

    .missing-main-icon {
        font-size: 28px;
    }

    .missing-text {
        font-size: 11px;
    }

    .flipnote-genealogy-card.removed-special-layout {
        padding: 10px;
        min-height: 75px;
    }

    .removed-main-icon {
        font-size: 24px;
    }

    .removed-text {
        font-size: 11px;
    }

    .removed-username {
        font-size: 9px;
    }
}

/* Simplified Survey System Styles - Floating Popup Only */
.survey-floating-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 380px;
    width: calc(100vw - 40px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.survey-content {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
}

.survey-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    line-height: 1;
}

.survey-close:hover {
    background: #f5f5f5;
    color: #333;
}

.survey-title {
    padding: 16px 40px 8px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f0f0;
}

.survey-question {
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

.survey-options {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.survey-option {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
    width: 100%;
}

.survey-option:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
}

.survey-option:active {
    transform: translateY(0);
}

.survey-yes {
    background: linear-gradient(135deg, #28a745, #20873a);
    color: white;
    border-color: #1e7530;
}

.survey-yes:hover {
    background: linear-gradient(135deg, #218838, #1c6f2e);
}

.survey-no {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border-color: #b21e2d;
}

.survey-no:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a);
}

.survey-stars {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.survey-star {
    background: none;
    border: none;
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.survey-star:hover {
    color: #ffc107;
}

.survey-star-highlighted {
    color: #ffc107 !important;
}

.survey-emoji-row {
    width: max-content;
    margin: 0 auto;
}

.survey-emoji {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.survey-emoji:hover {
    background: #e9ecef;
    transform: scale(1.1);
}

.survey-nps {
    text-align: center;
}

.nps-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.nps-buttons {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.survey-nps-option {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.survey-nps-option:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.survey-text-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.survey-text-input textarea {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.survey-text-input textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.survey-submit {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.survey-submit:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
}

.survey-thank-you {
    padding: 24px 16px;
    text-align: center;
}

.thank-you-icon {
    font-size: 32px;
    color: #28a745;
    margin-bottom: 8px;
}

.thank-you-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .survey-floating-popup {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: none;
        width: 100%;
    }

    .survey-content {
        border-radius: 16px 16px 0 0;
        margin: 0;
    }

    .survey-options {
        gap: 12px;
    }

    .survey-stars {
        gap: 8px;
    }

    .nps-buttons {
        gap: 2px;
    }

    .survey-nps-option {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
}

/* Focus styles for accessibility */
.survey-option:focus,
.survey-close:focus,
.survey-star:focus,
.survey-emoji:focus,
.survey-nps-option:focus,
.survey-submit:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Flipnote Studio-inspired button styling */
.ugobtn {
    display: inline-block;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
    padding: 8px 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: none;
    box-shadow: none;
    outline: none;
    user-select: none;
    vertical-align: middle;
}

.ugobtn:hover {
    text-decoration: none;
}

.ugobtn:active,
.ugobtn.ugobtn-selected {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ugobtn:focus {
    outline: none;
}

/* YouTube Upload Button - Special styling to keep red colors */
.ugobtn-youtube-upload {
    color: #fff !important;
    background-color: #de0e08 !important;
    border-color: #b80c06 !important;
}

.ugobtn-youtube-upload:active,
.ugobtn-youtube-upload.ugobtn-selected {
    background-color: #900802 !important;
    border-color: #700601 !important;
    color: #ddd !important;
}

/* Playlist Buttons styling */
.ugobtn-playlist-add {
    width: 100%;
}

.ugobtn-playlist-remove {
    width: 100%;
    margin-top: 8px;
    display: none;
}

/* More -> Button styling */
.ugobtn-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Standard anchor links that may need button styling */
a.ugobtn {
    text-decoration: none;
    color: inherit;
}

a.ugobtn:hover {
    text-decoration: none;
    color: inherit;
}

/* Full width button utility */
.ugobtn-full-width {
    width: 100%;
    display: block;
}

/* Account Switcher Layout Styles - Theme-agnostic */

/* Modal z-index and positioning */
#account-switcher-modal {
    z-index: 1060;
}

#account-switcher-modal .modal-backdrop {
    z-index: 1050;
}

#account-switcher-modal .modal-dialog {
    max-width: 500px;
    z-index: 1061;
}

#account-switcher-modal .modal-content {
    border-radius: 0.5rem;
    overflow: clip;
}
/* Force modal to appear above competing elements */
.modal.show #account-switcher-modal,
.modal.show {
    z-index: 1060 !important;
}

.modal-backdrop.show {
    z-index: 1050 !important;
}

/* Account switcher content area */
#account-switcher-content {
    min-height: 100px;
}

/* Account list item styling */
.account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

.account-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: #007bff;
}

.account-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.account-profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.account-profile-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    text-align: center;
    line-height: 32px;
    background-color: #6c757d;
    color: white;
    border-radius: 50%;
    font-size: 14px;
}

.account-username {
    flex: 1;
    font-weight: 500;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-account {
    background-color: var(--theatre-active-bg);
    border-color: var(--theatre-active-border);
}

.current-account .account-username {
    font-weight: 600;
    color: var(--theatre-active-text);
}

.master-account {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
}

/* Styling for the "(Original)" text when added via JavaScript */
.original-account-label {
    font-size: 0.8em;
    color: #28a745;
    font-weight: 500;
}

.notification-count {
    font-size: 0.75rem;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-left: 4px;
}

.account-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Account action buttons sizing */
.account-actions .ugobtn {
    padding: 4px 12px;
    font-size: 0.8rem;
    line-height: 1.2;
    border-width: 2px;
}

.account-actions .ugobtn i {
    font-size: 0.75rem;
}

/* Alert positioning */
.account-switcher-alert {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1060;
    max-width: 350px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Mobile responsive */
@media (max-width: 767px) {
    #account-switcher-modal .modal-dialog {
        margin: 10px;
        max-width: none;
    }

    .account-item {
        padding: 14px;
    }

    .account-username {
        font-size: 0.9rem;
    }

    .account-actions .ugobtn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .account-switcher-alert {
        top: 60px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* Loading states */
.account-item.loading {
    opacity: 0.6;
    pointer-events: none;
}

.account-actions .ugobtn:disabled {
    opacity: 0.6;
}

/* Accessibility improvements */
.account-item:focus {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.account-actions .ugobtn:focus {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .account-item {
        border-width: 2px;
    }

    .account-item:hover {
        border-color: #000;
        background-color: #f8f9fa;
    }

    .current-account,
    .master-account {
        border-width: 3px;
    }
}

/* YouTube Playlist Selector Component */
.youtube-playlist-selector {
    border: 1px solid #ddd;
    border-radius: 5px;
    max-height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.youtube-playlist-search-container {
    padding: 10px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.youtube-playlist-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.youtube-playlist-search-icon {
    position: absolute;
    left: 10px;
    color: #999;
    font-size: 14px;
    z-index: 1;
}

.youtube-playlist-search-input {
    width: 100%;
    padding: 8px 35px 8px 30px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.youtube-playlist-search-input:focus {
    border-color: var(--theatre-primary);
}

.youtube-playlist-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 12px;
    transition: color 0.2s ease;
}

.youtube-playlist-search-clear:hover {
    color: #666;
}

.youtube-playlist-container {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
    padding: 10px;
}

.youtube-playlist-item {
    margin-bottom: 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.youtube-playlist-item:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.youtube-playlist-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.youtube-playlist-item .custom-control {
    margin: 0 0 0 10px;
    padding: 9px 5px 5px 24px;
}

.youtube-playlist-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.youtube-playlist-thumbnail {
    flex-shrink: 0;
}

.youtube-playlist-thumb-img {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.youtube-playlist-thumb-icon {
    width: 24px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 14px;
}

.youtube-playlist-info {
    flex: 1;
    min-width: 0;
}

.youtube-playlist-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.youtube-playlist-meta {
    font-size: 11px;
    line-height: 1;
    color: #666;
}

.youtube-playlist-privacy-separator {
    margin: 0 4px;
}

.youtube-playlist-privacy-icon {
    font-size: 10px;
    margin-right: 2px;
}

.youtube-playlist-empty {
    text-align: center;
    padding: 20px;
    color: #666;
}

.youtube-playlist-empty i {
    margin-right: 8px;
}

/* Comment Editor Component Structure */
.comment-editor {
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid;
}

.comment-editor__textarea {
    background: transparent !important;
    border: none !important;
    resize: none;
    min-height: 68px;
    outline: none !important;
    font-size: 14px;
    width: 100%;
    font-family: inherit;
    box-shadow: none !important;
}

.comment-editor__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.comment-editor__button-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.comment-editor__button-group button {
    outline: none;
}

.comment-editor__post-button {
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
}

.comment-editor__post-button:disabled {
    cursor: not-allowed;
}

.comment-editor__emote-button {
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
}

.comment-editor__colorful-button {
    background: linear-gradient(
        90deg,
        #2563eb,
        #4f46e5,
        #7c3aed,
        #c026d3,
        #db2777,
        #dc2626,
        #ea580c,
        #65a30d,
        #16a34a,
        #14b8a6
    );
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.comment-editor__colorful-button--disabled {
    filter: grayscale(0.9);
}

.comment-editor__colorful-button:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.comment-editor__tooltip {
    position: relative;
    display: inline-block;
}

.comment-editor__tooltip-text {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 1000;
    border: 1px solid;
}

.comment-editor__tooltip:hover .comment-editor__tooltip-text {
    opacity: 1;
}

.comment-editor__picker {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.comment-editor__picker--show {
    display: flex;
}

.comment-editor__swatch {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
    background: none;
    padding: 0;
}

.comment-editor__swatch--selected {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.comment-editor__swatch--reset {
    background: transparent;
    border: 2px dashed;
}

.comment-editor__swatch-lock {
    position: absolute;
    right: -6px;
    bottom: -8px;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 999px;
    border: 1px solid;
}

/* Responsive design for small screens */
@media (max-width: 350px) {
    .comment-editor__button-text {
        display: none;
    }

    .comment-editor__button-icon {
        display: inline;
    }
}

@media (min-width: 351px) {
    .comment-editor__button-text {
        display: inline;
    }

    .comment-editor__button-icon {
        display: none;
    }
}

.comment-editor__emoji {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
    border: 1px solid;
}

.comment-editor__hidden-input {
    display: none;
}

/* Discord Webhook Management - Layout styles (colors in theme files) */
.webhook-card {
    border: 1px solid;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.webhook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.webhook-url {
    font-family: monospace;
    font-size: 0.875rem;
    word-break: break-all;
}

.webhook-template {
    font-style: italic;
    margin-top: 0.5rem;
}

.webhook-edit {
    border-top: 1px solid;
    padding-top: 1rem;
    margin-top: 1rem;
}

.add-webhook-form {
    border: 2px dashed;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.form-help {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Mobile responsive styles for Discord webhook management */
@media (max-width: 575.98px) {
    .webhook-template {
        font-size: 0.85rem !important;
    }

    /* Plus notice banner - Mobile */
    .plus-notice-banner {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem !important;
    }

    .plus-notice-content h4 {
        font-size: 1rem !important;
    }

    .plus-notice-content p {
        font-size: 0.9rem !important;
    }

    .plus-notice-cta {
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }

    .comment-info {
        display: block;
    }

    .d-sm-block {
        display: none;
    }
}