/* ============================================================
   AnimeHistory.org - main.css
   ============================================================ */

/* == RESET == */
* { margin:0; padding:0; box-sizing:border-box; }

/* == BODY == */
body {
    background:#242424;
    font-family:Arial, sans-serif;
    font-size:13px;
    padding:15px;
}

/* == SITE BOX == */
.site {
    max-width:1920px;
    margin:0 auto;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 0 60px rgba(0,0,0,0.8);
    border:3px solid rgba(255,255,255,0.06);
}

/* Sticky sidebar/inspector need a non-clipping ancestor (Manage Gallery). */
body:has(.ag-workspace) .site {
    overflow: visible;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
   nav {
    background:#111;
    border-bottom:1px solid rgba(255,255,255,0.05);
    width:100%;
}

.nav-inner {
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:46px;
    position:relative;
}

.nav-logo {
    color:#5b8dd9;
    font-size:16px;
    letter-spacing:2px;
    text-transform:uppercase;
    text-decoration:none;
    font-weight:bold;
    white-space:nowrap;
    margin-right:20px;
}

.nav-logo span {
    color:#e8a87c;
    font-size:11px;
    font-weight:normal;
    letter-spacing:1px;
}

.nav-right {
    display:flex;
    align-items:center;
    gap:2px;
}

.nav-right a {
    color:#777;
    text-decoration:none;
    padding:6px 10px;
    border-right:2px solid transparent;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:all 0.2s;
    white-space:nowrap;
}

.nav-right a:hover {
    color:#aaa;
    border-right-color:#5b8dd9;
}

.nav-right a.active {
    color:#ccc;
    border-right-color:#e8a87c;
}

.nav-search { margin-left:10px; }

.nav-search input {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-right:2px solid #5b8dd9;
    color:#ccc;
    padding:5px 10px;
    border-radius:4px;
    font-size:11px;
    outline:none;
    width:140px;
    transition:all 0.2s;
}

.nav-search input:focus {
    border-right-color:#e8a87c;
    background:rgba(255,255,255,0.08);
    width:180px;
}

.nav-search input::placeholder { color:#444; }

.nav-auth {
    margin-left:10px;
    display:flex;
    align-items:center;
    gap:5px;
    position:relative;
}

.nav-auth a {
    background:rgba(91,141,217,0.15);
    border:1px solid #5b8dd9 !important;
    color:#5b8dd9 !important;
    padding:5px 14px !important;
    border-radius:4px;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
    transition:all 0.2s;
    white-space:nowrap;
    border-right:1px solid #5b8dd9 !important;
    display:inline-flex;
    align-items:center;
    height:28px;
}

.nav-auth a:hover {
    background:rgba(91,141,217,0.3);
    color:#fff !important;
}

.nav-auth a.profile {
    background:rgba(232,168,124,0.15);
    border-color:#e8a87c !important;
    color:#e8a87c !important;
    border-right:1px solid #e8a87c !important;
}

.nav-auth a.profile:hover {
    background:rgba(232,168,124,0.3);
    color:#fff !important;
}

.nav-logout {
    background:transparent !important;
    border:1px solid rgba(255,255,255,0.1) !important;
    color:#555 !important;
    padding:5px 10px !important;
    border-radius:4px;
    font-size:10px !important;
    letter-spacing:1px;
    text-transform:uppercase;
    border-right:1px solid rgba(255,255,255,0.1) !important;
    display:inline-flex;
    align-items:center;
    height:28px;
}

.nav-logout:hover {
    border-color:#ff6b6b !important;
    color:#ff6b6b !important;
    border-right-color:#ff6b6b !important;
    background:rgba(255,107,107,0.05) !important;
}

/* ============================================================
   BANNER
   ============================================================ */
.banner-wrap {
    width:100%;
    line-height:0;
}

.banner-wrap img {
    width:100%;
    height:auto;
    display:block;
    border-bottom: 2px solid #6a655c;
}

/* ============================================================
   SUB NAV — slanted bar; flat catalog row; angled series tabs
   ============================================================ */
.subnav {
    --subnav-slope: 10px;
    --subnav-tab-slope: 9px;
    margin: -30px -30px 24px -30px;
    padding: 5px 22px calc(5px + var(--subnav-slope)) 20px;
    position: relative;
    z-index: 1500;
    overflow: visible;
    background: transparent;
    border: none;
}

.subnav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #faf6ee;
    border: 1px solid #e2dccf;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--subnav-slope)),
        0 100%
    );
    pointer-events: none;
}

.subnav-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
    font-size: 11px;
    line-height: 1.35;
}

/* Anime: catalog + series on one row (all /anime/, /movies/, detail pages) */
#anime-subnav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 10px 14px;
    min-height: 40px;
}

.subnav-catalog {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    min-height: 32px;
    flex-shrink: 0;
}

.subnav-catalog-link {
    color: #6a655c !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    padding: 6px 0;
    white-space: nowrap;
    background: transparent !important;
    border: none;
    clip-path: none;
    box-shadow: none;
    margin: 0;
    transition: color .15s;
}

.subnav-catalog-link:hover {
    color: #c87a48 !important;
}

.subnav-catalog-link.active {
    color: #b8682a !important;
    font-weight: 700;
}

/* Series strip — same line as catalog; grows on the right */
.subnav-series {
    display: flex;
    align-items: stretch;
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 12px;
    border-top: none;
    border-left: 1px solid #e2dccf;
    min-height: 34px;
}

#anime-nav-window,
.subnav-series-window {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

#anime-nav-window a,
.subnav-series-window a,
.subnav-series-link {
    position: relative;
    z-index: 1;
    margin: 0 -4px 0 0;
    padding: 8px 20px 8px 16px;
    color: #6a655c !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #d8d0c4;
    border-right: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    clip-path: polygon(
        var(--subnav-tab-slope) 0,
        100% 0,
        calc(100% - var(--subnav-tab-slope)) 100%,
        0 100%
    );
    transition: color .15s, background .15s, border-color .15s;
}

#anime-nav-window a:first-child,
.subnav-series-window a:first-child,
.subnav-series-link:first-child {
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--subnav-tab-slope)) 100%,
        0 100%
    );
    padding-left: 14px;
}

#anime-nav-window a:last-child,
.subnav-series-window a:last-child,
.subnav-series-link:last-child {
    margin-right: 0;
}

#anime-nav-window a:hover,
.subnav-series-window a:hover,
.subnav-series-link:hover {
    color: #c87a48 !important;
    background: rgba(232, 168, 124, 0.12) !important;
    z-index: 2;
}

#anime-nav-window a.active,
.subnav-series-window a.active,
.subnav-series-link.active {
    color: #b8682a !important;
    background: #faf6ee !important;
    border-color: #e8a87c;
    font-weight: 700;
    z-index: 3;
}

.anime-nav-extras {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 8px;
    align-self: center;
    min-height: 32px;
    overflow: visible;
}

.subnav-arrow {
    background: none;
    border: none;
    color: #9a948a;
    font-size: 12px;
    padding: 0 10px;
    min-height: 32px;
    cursor: pointer;
    transition: color .15s, background .15s;
    line-height: 1;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
}
.subnav-arrow:hover    { color: #c87a48; background: rgba(232,168,124,0.08); }
.subnav-arrow:disabled { color: #d6cfc1; cursor: default; background: none; }
.anime-more-wrap {
    position: relative;
    overflow: visible;
    z-index: 210;
    flex-shrink: 0;
}
.anime-more-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #d8d0c4;
    color: #6a655c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    padding: 0 10px 0 14px;
    min-height: 32px;
    max-width: min(240px, 26vw);
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.anime-more-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.anime-more-btn::after {
    content: '\25BC';
    font-size: 9px;
    opacity: 0.85;
    flex-shrink: 0;
}
.anime-more-btn:hover {
    color: #c87a48;
    background: rgba(232,168,124,0.1);
    border-color: #d8d0c4;
}
.anime-more-dropdown.is-open {
    display: block;
}
.anime-more-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #faf6ee;
    border: 1px solid #e2dccf;
    z-index: 2500;
    min-width: 260px;
    max-width: min(380px, 92vw);
    max-height: min(65vh, 480px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #e8a87c #ede8df;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.anime-more-dropdown::-webkit-scrollbar {
    width: 9px;
}
.anime-more-dropdown::-webkit-scrollbar-track {
    background: #ede8df;
}
.anime-more-dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e8a87c 0%, #c87a48 100%);
    border-radius: 5px;
    border: 2px solid #ede8df;
}
.anime-more-dropdown::-webkit-scrollbar-thumb:hover {
    background: #c87a48;
}
.subnav .anime-more-dropdown a {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 16px;
    height: auto;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6a655c !important;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid #ede8df;
    white-space: nowrap;
    transition: color .12s, background .12s;
    clip-path: none;
    background: transparent;
    box-shadow: none;
}
.subnav .anime-more-dropdown a:last-child { border-bottom: none; }
.subnav .anime-more-dropdown a:hover  { background: rgba(232,168,124,0.07); color: #c87a48 !important; }
.subnav .anime-more-dropdown a.active {
    color: #c87a48 !important;
    background: rgba(232,168,124,0.10);
    font-weight: 700;
    padding-left: 16px;
    box-shadow: inset 3px 0 0 #e8a87c;
}

.anime-dropdown-num {
    font-size: 9px;
    color: #c4bdb0;
    margin-right: 10px;
    font-weight: normal;
    letter-spacing: 0;
    flex-shrink: 0;
}

/* Forums, news, gallery, admin — flat links in one row */
.subnav-inner:not(#anime-subnav) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: 36px;
    gap: 6px 18px;
}

.subnav-inner:not(#anime-subnav) > a {
    color: #6a655c !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    padding: 6px 0;
    white-space: nowrap;
    background: transparent !important;
    border: none;
    clip-path: none;
    box-shadow: none;
    margin: 0;
    transition: color .15s;
}

.subnav-inner:not(#anime-subnav) > a:hover {
    color: #c87a48 !important;
}

.subnav-inner:not(#anime-subnav) > a.active {
    color: #b8682a !important;
    font-weight: 700;
}

/* Admin — windowed tabs + scroll + dropdown (mirrors anime series strip) */
.subnav-admin {
    --subnav-slope: 0px;
    margin: -30px -30px 0 -30px;
}

.subnav-admin::before {
    clip-path: none;
    background: #fff;
    border-color: #e4dfd8;
    box-shadow: none;
}

#admin-subnav,
.subnav-admin .admin-subnav-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 2px 0;
}

#admin-nav-window,
.subnav-admin .admin-nav-window {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

#admin-nav-window a,
.subnav-admin .admin-nav-link {
    position: relative;
    z-index: 1;
    margin: 0 -4px 0 0;
    padding: 9px 22px 9px 18px;
    color: #6a655c !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #d8d0c4;
    border-right: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    clip-path: polygon(
        var(--subnav-tab-slope) 0,
        100% 0,
        calc(100% - var(--subnav-tab-slope)) 100%,
        0 100%
    );
    transition: color .15s, background .15s, border-color .15s;
}

#admin-nav-window a:first-child,
.subnav-admin .admin-nav-link:first-child {
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--subnav-tab-slope)) 100%,
        0 100%
    );
    padding-left: 16px;
}

#admin-nav-window a:last-child,
.subnav-admin .admin-nav-link:last-child {
    margin-right: 0;
}

#admin-nav-window a:hover,
.subnav-admin .admin-nav-link:hover {
    color: #3a3633 !important;
    background: rgba(127, 168, 212, 0.12) !important;
    z-index: 2;
}

#admin-nav-window a.active,
.subnav-admin .admin-nav-link.active {
    color: #5b8dd9 !important;
    background: #f0f5fb !important;
    border-color: #a8c4e8;
    font-weight: 700;
    z-index: 3;
}

.subnav-admin .anime-nav-extras {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    #admin-subnav .admin-nav-window,
    #admin-subnav .subnav-arrow {
        display: none !important;
    }
    #admin-subnav .anime-nav-extras {
        flex: 1;
        min-width: 0;
        padding-left: 0;
        margin-left: 0;
    }
    #admin-subnav .anime-more-wrap {
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }
    #admin-subnav .anime-more-btn {
        width: 100%;
        max-width: 320px;
        justify-content: space-between;
        text-align: left;
    }
    #admin-subnav .anime-more-dropdown {
        left: 0;
        right: auto;
        min-width: min(100%, 320px);
    }
}

.subnav a {
    text-decoration: none;
}

@media (max-width: 640px) {
    .subnav {
        padding-bottom: 5px;
        --subnav-slope: 0px;
        --subnav-tab-slope: 0px;
    }
    .subnav::before {
        clip-path: none;
    }
    #anime-nav-window a,
    .anime-more-btn {
        clip-path: none;
        margin: 3px 6px 3px 0;
        border-right: 1px solid #d8d0c4;
    }
}

/* Anime subnav — wide: windowed tabs + scrollable series list; <=1200px: dropdown only */
@media (min-width: 1201px) {
    #anime-subnav {
        flex-wrap: nowrap;
    }
    #anime-subnav .subnav-catalog {
        flex-shrink: 0;
    }
    #anime-subnav .subnav-series {
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
    }
}

@media (max-width: 1200px) {
    #anime-subnav .subnav-series-window,
    #anime-subnav .subnav-arrow {
        display: none !important;
    }
    #anime-subnav .anime-nav-extras {
        flex: 1;
        min-width: 0;
        padding-left: 0;
        margin-left: 0;
    }
    #anime-subnav .anime-more-wrap {
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }
    #anime-subnav .anime-more-btn {
        width: 100%;
        max-width: min(420px, 100%);
        justify-content: space-between;
        text-align: left;
    }
    #anime-subnav .anime-more-dropdown {
        left: 0;
        right: auto;
        min-width: min(100%, 320px);
        max-width: min(420px, 96vw);
    }
}

@media (max-width: 640px) {
    #anime-subnav {
        gap: 8px 10px;
    }
    #anime-subnav .subnav-catalog {
        gap: 4px 12px;
        flex: 1 1 auto;
        min-width: 0;
    }
    #anime-subnav .subnav-catalog-link {
        font-size: 10px;
        letter-spacing: 0.35px;
    }
    #anime-subnav .subnav-series {
        flex: 1 1 120px;
        padding-left: 8px;
    }
    #anime-subnav .anime-more-btn {
        max-width: none;
        font-size: 10px;
        padding: 0 10px;
        min-height: 30px;
    }
}

/* ============================================================
   CONTENT LAYOUT
   ============================================================ */
.content-area {
    background:#f5f0e8;
    padding:0;
    min-height:600px;
    color:#2a2a2a;
}

.content-wrap {
    display:flex;
    gap:0;
    min-height:600px;
}

.main-content {
    flex:1;
    padding:30px;
    min-width:0;
    /* `overflow: visible` so subnav dropdowns (More ▾ list, future popovers)
       can extend below the subnav without being clipped. The previous
       `overflow: hidden` was causing the All-Anime More dropdown to render
       inside a clipped/scrollable box ("iframe-y" look). If anything ever
       needs strict clipping inside main-content, scope it to that child. */
    overflow:visible;
}

.main-content h1 {
    color:#5b8dd9;
    font-size:22px;
    margin-bottom:16px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(91,141,217,0.2);
}

.main-content h2 {
    color:#5b8dd9;
    font-size:18px;
    margin:20px 0 12px;
}

.main-content h3 {
    color:#7aa3e0;
    font-size:14px;
    margin:16px 0 8px;
}

.main-content p {
    color:#3a3a3a;
    line-height:1.7;
    margin-bottom:12px;
}

.main-content a {
    color:#5b8dd9;
    text-decoration:none;
    transition:color 0.2s;
}

.main-content a:hover,
.main-content a:active { color:#e8a87c; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    width:280px;
    min-width:280px;
    background:#ede8df;
    border-left:1px solid #e0dbd2;
    padding:20px 16px;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.sidebar-more {
    display:block;
    color:#b8b3aa !important;
    font-size:10px !important;
    letter-spacing:1px;
    text-transform:uppercase;
    text-align:right;
    padding:4px 0 !important;
    border-right:none !important;
    transition:color 0.2s;
}

.sidebar-more:hover { color:#5b8dd9 !important; }

.sidebar-box h4 {
    color:#5b8dd9;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:8px;
    padding-bottom:6px;
    border-bottom:1px solid #e0dbd2;
}

.sidebar-box p {
    color:#666;
    font-size:12px;
    padding:3px 0;
    margin:0;
    line-height:1.5;
}

.sidebar-box p span {
    color:#e8a87c;
    font-weight:bold;
}

.sidebar-box a {
    display:block;
    color:#777;
    text-decoration:none;
    font-size:12px;
    padding:3px 0;
    border-right:2px solid transparent;
    transition:all 0.2s;
}

.sidebar-box a:hover {
    color:#5b8dd9;
    border-right-color:#5b8dd9;
}

.online-user { color:#50c878 !important; font-size:12px; }

.sidebar-shout {
    font-size:11px !important;
    color:#888 !important;
    border-bottom:1px solid #e0dbd2;
    padding:4px 0 !important;
}

.shout-name {
    color:#e8a87c;
    font-weight:bold;
    margin-right:4px;
}

/* ============================================================
   SECTION TITLE
   ============================================================ */
.section-title {
    margin-bottom:0;
    position:relative;
    overflow:hidden;
}

.section-title-inner {
    display:inline-block;
    background:#f5f0e8;
    color:#b8b3aa;
    font-size:13px;
    font-weight:900;
    letter-spacing:6px;
    text-transform:uppercase;
    padding:10px 20px 12px 14px;
    position:relative;
    margin-bottom:-1px;
    z-index:1;
    clip-path: polygon(
        6px 0%,
        calc(100% - 14px) 0%,
        100% 100%,
        0% 100%
    );
}

.section-title::after {
    content:'';
    display:block;
    border-bottom:1px solid #d4cfc8;
    margin-top:-1px;
}

/* ============================================================
   NEWS BOXES
   ============================================================ */
.news-feed {
    max-width: 1240px;
}

.news-feed.news-feed-index .news-body{
    padding: 10px;
}

.news-feed.news-feed-index .news-footer{
    padding: 6px 10px;
    margin-bottom: 15px;
}

.news-feed .section-title {
    margin-bottom: 15px;
}

.news-outer {
    border-top: 1px solid #ede8df;
    margin-bottom: 0;
    position: relative;
}

.news-outer:first-child {
    border-top: none;
    margin-top: 15px;
}

.news-inner {
    background: #fff;
    padding: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.news-post-header {
    padding: 12px 16px 8px;
    border-bottom: 1px solid #f5f1ec;
}

.news-post-header h3 {
    font-size: 15px;
    margin-bottom: 4px;
}

.news-post-header h3 a {
    color: #5b8dd9;
    text-decoration: none;
    transition: color 0.2s;
}

.news-post-header h3 a:hover,
.news-post-header h3 a:active { color: #e8a87c; }

.news-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.news-author { color: #b8b3aa; font-size: 11px; }

.news-author a {
    color: #e8a87c !important;
    text-decoration: none;
    transition: color 0.2s;
}

.news-author a:hover { color: #5b8dd9 !important; }

.news-date { color: #b8b3aa; font-size: 11px; }

.news-rant {
    background: rgba(232,168,124,0.1);
    border-left: 2px solid #e8a87c;
    color: #e8a87c;
    font-size: 9px;
    padding: 2px 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.news-body {
    padding: 10px 16px 12px;
    color: #3a3a3a;
    line-height: 1.75;
    font-size: 13px;
}

.news-footer {
    padding: 6px 16px;
    border-top: 1px dashed #ede8df;
    font-size: 11px;
    text-align: right;
}

.comment-count {
    color: #c8c4bc;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.comment-count:hover { color:#5b8dd9; }

.read-more {
    color:#5b8dd9;
    font-size:12px;
    text-decoration:none;
    display:inline-block;
    margin-top:8px;
    letter-spacing:1px;
}

.read-more:hover { color:#e8a87c; }

.no-content {
    text-align:center;
    padding:60px 20px;
    color:#999;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* ============================================================
   COMMENTS
   ============================================================ */
.comments-list {
    border-left: 3px solid #ddd8d0;
    margin: 0 0 0 30px;
}

.comment-item {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #ede8df;
}

.comment-item:last-child {
    border-bottom: none;
}

/* LEFT COLUMN - avatar + user info */
.comment-author-col {
    width: 120px;
    min-width: 120px;
    padding: 12px 8px;
    border-right: 1px solid #ede8df;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    background: #faf8f4;
}
/* Ensure labels fit in the narrow comment sidebar */
.comment-author-col .webmaster-label,
.comment-author-col .admin-label {
    margin-top: 4px;
    width: 90px;
    text-align: center;
}

.comment-avatar {
    width:80px;
    height:80px;
    border-radius:4px;
    object-fit:cover;
    border-left:2px solid #c8c4bc;
    border-top:2px solid #c8c4bc;
}

/* Match the placeholder style to the site theme */
.comment-avatar-placeholder {
    width: 80px;
    height: 80px;
    background: #f0ebe3;
    border-left: 2px solid #5b8dd9;
    border-top: 2px solid #5b8dd9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: #b8b3aa;
    margin-bottom: 5px;
}

.comment-username {
    color:#5b8dd9;
    font-weight:bold;
    font-size:12px;
    text-decoration:none;
    display:block;
}

.comment-username:hover { color:#e8a87c; }

.comment-position {
    display: inline-block;
    color: #e8a87c;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(232, 168, 124, 0.05);
    border: 1px solid rgba(232, 168, 124, 0.2);
    padding: 2px 8px;
    margin-top: 4px;
    font-weight: bold;
}

.comment-stats {
    color:#999;
    font-size:10px;
    line-height:1.8;
}

.comment-stats span {
    display:block;
}

/* RIGHT COLUMN - content */
.comment-content-col {
    flex:1;
    display:flex;
    flex-direction:column;
}

.comment-body {
    flex:1;
    padding:12px 16px;
    color:#3a3a3a;
    line-height:1.7;
    font-size:13px;
}

/* FOOTER - timestamp + quote */
.comment-footer {
    padding:6px 16px;
    border-top:1px dashed #e0dbd2;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.comment-timestamp {
    color:#b8b3aa;
    font-size:10px;
    letter-spacing:1px;
}

.quote-btn {
    background:transparent;
    border:none;
    border-left:2px solid transparent;
    color:#c8c4bc;
    padding:3px 10px;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
    transition:all 0.2s;
    font-family:Arial, sans-serif;
}

.quote-btn:hover {
    border-left-color:#5b8dd9;
    color:#5b8dd9;
}

/* ============================================================
   COMMENT FORM
   ============================================================ */

.news-body textarea {
    width:100%;
    background:rgba(255,255,255,0.5);
    border:none;
    border-left:3px solid #c8c4bc;
    border-top:3px solid #c8c4bc;
    color:#2a2a2a;
    padding:10px;
    font-size:13px;
    font-family:Arial, sans-serif;
    line-height:1.7;
    resize:vertical;
    min-height:100px;
    outline:none;
    transition:all 0.2s;
    margin-bottom:10px;
}

.news-body textarea:focus {
    border-left-color:#5b8dd9;
    border-top-color:#5b8dd9;
    background:#fff;
}

.news-body button {
    background:rgba(91,141,217,0.15);
    border:none;
    border-left:3px solid #5b8dd9;
    border-top:3px solid #5b8dd9;
    color:#5b8dd9;
    padding:8px 20px;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    cursor:pointer;
    transition:all 0.2s;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.news-body button:hover {
    background:rgba(91,141,217,0.3);
    color:#fff;
}

/* ============================================================
   QUOTE BLOCKS
   ============================================================ */
.quote-block {
    background:rgba(91,141,217,0.05);
    border-left:3px solid #a8c4e8;
    padding:8px 12px;
    margin-bottom:10px;
    font-size:12px;
    color:#888;
    font-style:italic;
    overflow:hidden;
    clear:both;
}

.quote-block.quote-context-comment,
.quote-block.quote-context-forum {
    background: rgba(0,0,0,0.03);
    border-left-color: #d7d1c7;
    color: #777;
}

.quote-block.quote-context-article,
.quote-block.quote-context-news {
    background: rgba(91,141,217,0.06);
    border-left-color: #a8c4e8;
}

.quote-block.quote-context-body {
    background: rgba(91,141,217,0.05);
    border-left-color: #a8c4e8;
}

.quote-block.quote-context-sig {
    background: rgba(0,0,0,0.02);
    border-left-color: #d7d1c7;
    color: #999;
    font-size: 11px;
}

.quote-block.quote-context-shout {
    background: rgba(0,0,0,0.03);
    border-left-color: #c8c4bc;
    color: #888;
    font-size: 11px;
}

.quote-block strong {
    color:#5b8dd9;
    font-style:normal;
    display:block;
    margin-bottom:4px;
    font-size:11px;
    letter-spacing:1px;
}

.quote-block .quote-block {
    margin-top:8px;
    border-left-color:#c8d8ee;
    background:rgba(91,141,217,0.08);
    font-size:11px;
}

.quote-block .quote-block .quote-block {
    border-left-color:#dde8f5;
    background:rgba(91,141,217,0.12);
}

/* BBCode image — hidden until revealed */
.bbcode-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-left: 3px solid #e8a87c;
    border-top: 3px solid #e8a87c;
}
.quote-block strong a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(91,141,217,0.5);
    transition: color 0.2s;
}

.quote-block strong a:hover {
    color: #5b8dd9;
}

/* ============================================================
   BBCODE: YouTube / Headings / HR
   ============================================================ */
.bbcode-youtube {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 12px 0;
    border-left: 3px solid #e8a87c;
    border-top: 3px solid #e8a87c;
    background: rgba(0,0,0,0.02);
}
.bbcode-youtube::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
}
.bbcode-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bbcode-h2 {
    font-size: 20px;
    margin: 18px 0 10px;
    letter-spacing: 1px;
}
.bbcode-h3 {
    font-size: 16px;
    margin: 16px 0 8px;
    letter-spacing: 1px;
}
.bbcode-hr {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 16px 0;
}

.bbcode-list {
    margin: 0.75em 0;
    padding-left: 1.35em;
}
.bbcode-list li {
    margin: 0.3em 0;
}

/* BBCode spoiler + code */
.bbcode-spoiler {
    background: #2a2a2a;
    color: #2a2a2a;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 2px;
    transition: color 0.2s;
    user-select: none;
}
.bbcode-spoiler.revealed {
    color: inherit;
    background: rgba(42,42,42,0.08);
}
.bbcode-code {
    background: #f7f5f0;
    border-left: 3px solid #5b8dd9;
    padding: 10px 14px;
    margin: 10px 0;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #2a2a2a;
    white-space: pre;
}
.bbcode-code code {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================================
   FORUMS
   ============================================================ */
.forums-wrap h2 {
    color:#5b8dd9;
    font-size:18px;
    margin-bottom:20px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(91,141,217,0.2);
}

.forum-category {
    margin-bottom:24px;
}

.forum-category h3 {
    color:#777;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:8px;
    padding:6px 0;
    border-bottom:1px solid #e8e3db;
}

.forum-board {
    background:#fff;
    border:1px solid #e8e3db;
    border-radius:4px;
    padding:12px 16px;
    margin-bottom:6px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.board-info h4 {
    font-size:14px;
    margin-bottom:4px;
}

.board-info h4 a {
    color:#2a2a2a;
    text-decoration:none;
    transition:color 0.2s;
}

.board-info h4 a:hover { color:#5b8dd9; }

.board-info p {
    color:#999;
    font-size:11px;
    margin:0;
}

.board-stats {
    display:flex;
    gap:16px;
    color:#999;
    font-size:11px;
}

.board-stats strong { color:#e8a87c; }

/* ============================================================
   ANIME
   ============================================================ */
.anime-wrap h2 {
    color:#5b8dd9;
    font-size:18px;
    margin-bottom:20px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(91,141,217,0.2);
}

.anime-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:16px;
}

.anime-card {
    background:#fff;
    border:1px solid #e8e3db;
    border-radius:4px;
    overflow:hidden;
    transition:all 0.2s;
}

.anime-card:hover {
    border-color:#5b8dd9;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.anime-card img {
    width:100%;
    aspect-ratio:2/3;
    object-fit:contain;
    object-position:center;
    display:block;
    background:#f0ebe3;
}

.anime-card-info { padding:10px; }

.anime-card-info h4 {
    font-size:13px;
    margin-bottom:4px;
}

.anime-card-info h4 a {
    color:#5b8dd9;
    text-decoration:none;
    transition:color 0.2s;
}

.anime-card-info h4 a:hover,
.anime-card-info h4 a:active { color:#e8a87c; }

.anime-year { display:block; color:#999; font-size:11px; }
.anime-studio { display:block; color:#e8a87c; font-size:11px; }

/* ============================================================
   MEMBERS
   ============================================================ */
.members-wrap h2 {
    color:#5b8dd9;
    font-size:18px;
    margin-bottom:8px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(91,141,217,0.2);
}

.members-count {
    color:#999;
    font-size:11px;
    margin-bottom:16px !important;
}

.member-row {
    background:#fff;
    border:1px solid #e8e3db;
    border-radius:4px;
    padding:10px 16px;
    margin-bottom:6px;
    display:flex;
    align-items:center;
    gap:16px;
}

.member-avatar img {
    width:48px;
    height:48px;
    border-radius:4px;
    object-fit:cover;
}

.avatar-placeholder {
    width:48px;
    height:48px;
    border-radius:4px;
    background:#f0ebe3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}
/* LARGE PROFILE PLACEHOLDER */
.avatar-placeholder-lg {
    width: 100px;
    height: 100px;
    background: #f0ebe3; /* Matches your site's parchment/recessed feel */
    border-left: 3px solid #5b8dd9;
    border-top: 3px solid #5b8dd9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px; /* Large silhouette */
    color: #b8b3aa;
}
.member-info { flex:1; }

.member-info a {
    color:#2a2a2a;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
    display:block;
    transition:color 0.2s;
}

.member-info a:hover { color:#5b8dd9; }

.member-joined { color:#999; font-size:11px; }

.member-stats {
    display:flex;
    gap:16px;
    color:#999;
    font-size:11px;
}

.member-stats strong { color:#e8a87c; }

.online  { color:#50c878; font-size:11px; }
.offline { color:#999;    font-size:11px; }

/* ============================================================
   404 / SPLASH
   ============================================================ */
.not-found {
    text-align:center;
    padding:80px 20px;
}

.not-found h2 {
    color:#5b8dd9;
    margin-bottom:12px;
}

.not-found p {
    color:#888;
    margin-bottom:8px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background:#0d0d0d;
    border-top:1px solid rgba(255,255,255,0.05);
    padding:20px 30px;
    color:#444;
    font-size:11px;
}

.footer-inner {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:16px;
}

.footer-col h4 {
    color:#666;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.footer-col a {
    display:block;
    color:#444;
    text-decoration:none;
    font-size:11px;
    padding:2px 0;
    transition:color 0.2s;
}

.footer-col a:hover { color:#e8a87c; }

.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.03);
    padding-top:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.footer-keywords {
    color:#333;
    font-size:10px;
    line-height:1.8;
    max-width:800px;
}

.footer-credit {
    color:#333;
    font-size:10px;
    text-align:right;
    white-space:nowrap;
}

.footer-credit span { color:#5b8dd9; }

/* ============================================================
   FIXED BUTTONS
   ============================================================ */
.music-btn {
    position:fixed;
    bottom:20px;
    left:20px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.3);
    padding:6px 14px;
    border-radius:20px;
    cursor:pointer;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:all 0.3s;
    font-family:Arial, sans-serif;
}

.music-btn:hover {
    border-color:rgba(255,255,255,0.3);
    color:rgba(255,255,255,0.6);
}

.music-btn.playing {
    border-color:#e8a87c;
    color:#e8a87c;
}

.shoutbox-btn {
    position:fixed;
    bottom:20px;
    right:20px;
    z-index: 8001;
    background:rgba(232,168,124,0.2);
    border:1px solid #e8a87c;
    color:#e8a87c;
    padding:8px 16px;
    border-radius:20px;
    cursor:pointer;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-family:Arial, sans-serif;
    transition:all 0.3s;
}

.shoutbox-btn:hover { background:rgba(232,168,124,0.3); }

.shoutbox-popup {
    display: none;
    flex-direction: column;
    position: fixed;
    bottom: 60px;
    right: 20px;
    width: 300px;
    height: 400px;
    border: 1px solid rgba(232,168,124,0.3);
    border-top: 2px solid #e8a87c;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    z-index: 2000;
    resize: both; /* user can resize too */
    min-width: 240px;
    min-height: 280px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px) {
    body { padding:8px; }
    .nav-inner { padding:0 16px; }
    .nav-search input { width:80px; }
    .subnav-inner { padding:0 16px; }
    .content-wrap { flex-direction:column; }
    .sidebar {
        width:100%;
        min-width:unset;
        border-left:none;
        border-top:1px solid #e0dbd2;
    }
    .footer-inner { flex-direction:column; }
    .footer-bottom { flex-direction:column; }

    .hamburger { display:flex; }

    .nav-right {
        display:none;
        position:absolute;
        top:46px;
        left:0;
        right:0;
        background:#111;
        flex-direction:column;
        padding:10px 0;
        border-bottom:2px solid #5b8dd9;
        z-index:999;
    }

    .nav-right.mobile-open { display:flex; }

    .nav-right a {
        padding:10px 20px;
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,0.04);
        font-size:13px;
    }

    .nav-search { display:none; }

    .nav-auth {
        padding:10px 20px;
        border-top:1px solid rgba(255,255,255,0.06);
    }
}

@media (max-width:480px) {
    .footer-keywords { display:none; }
}
.login-toggle {
    background:rgba(91,141,217,0.15);
    border:1px solid #5b8dd9;
    border-right:1px solid #5b8dd9;
    color:#5b8dd9;
    padding:5px 14px;
    border-radius:4px;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
    font-family:Arial, sans-serif;
    height:28px;
    transition:all 0.2s;
}

.login-toggle:hover,
.login-toggle.active {
    background:rgba(91,141,217,0.3);
    color:#fff;
}

/* The panel itself */
.login-panel {
    position:absolute;
    top:36px;
    right:0;
    width:320px;
    background:#1a1a1a;
    border:1px solid rgba(255,255,255,0.08);
    border-top:2px solid #5b8dd9;
    box-shadow:0 8px 30px rgba(0,0,0,0.6);
    z-index:1000;
    display:none;
    border-radius:0 0 6px 6px;
}

.login-panel.open { display:block; }

nav { position:relative; } /* needed for panel positioning */

.login-panel-inner {
    padding:20px;
}

.login-panel-fields {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.login-panel-fields input {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-right:2px solid #5b8dd9;
    color:#ccc;
    padding:8px 10px;
    border-radius:4px;
    font-size:13px;
    outline:none;
    transition:all 0.2s;
    font-family:Arial, sans-serif;
}

.login-panel-fields input:focus {
    border-right-color:#e8a87c;
    background:rgba(255,255,255,0.08);
}

.login-panel-fields button {
    background:rgba(91,141,217,0.2);
    border:1px solid #5b8dd9;
    color:#5b8dd9;
    padding:9px;
    border-radius:4px;
    cursor:pointer;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:all 0.2s;
    font-family:Arial, sans-serif;
}

.login-panel-fields button:hover {
    background:rgba(91,141,217,0.35);
    color:#fff;
}

.login-panel-error {
    background:rgba(255,80,80,0.1);
    border:1px solid rgba(255,80,80,0.3);
    color:#ff6b6b;
    padding:7px 10px;
    border-radius:4px;
    font-size:12px;
    margin-bottom:10px;
}

.login-panel-links {
    display:flex;
    justify-content:space-between;
    margin-top:12px;
}

.login-panel-links a {
    color:#555;
    text-decoration:none;
    font-size:11px;
    transition:color 0.2s;
}

.login-panel-links a:hover { color:#e8a87c; }
.hamburger {
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    background:transparent;
    border:none;
    cursor:pointer;
    padding:6px;
    margin-right:8px;
}

.hamburger span {
    display:block;
    width:22px;
    height:2px;
    background:#777;
    transition:all 0.25s;
    border-radius:2px;
}

.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }


.gallery-wrap h2 {
    color:#5b8dd9;
    font-size:18px;
    margin-bottom:20px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(91,141,217,0.2);
}

/* ── Gallery: tabs + wayfinding only (series/thumb grids use inline styles in gallery.php) ─ */
.gal-tabs-outer { margin-bottom: 0; }
.gal-tabs-inner { padding: 0; }
.gal-tabs-row {
    display: flex;
    border-bottom: 1px solid #ede8df;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.gal-tab {
    display: block;
    padding: 10px 18px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    color: #b8b3aa;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.gal-tab:hover { color: #5b8dd9; }
.gal-tab-active {
    color: #5b8dd9;
    font-weight: bold;
    border-bottom-color: #5b8dd9;
}

.gal-context-outer { margin-bottom: 0; }
.gal-context-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 8px 16px;
    font-size: 11px;
    color: #8a8580;
    background: #faf8f4;
    border-bottom: 1px solid #ede8df;
}
.gal-context-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 2px;
    min-width: 0;
    /* Override global `nav { background:#111 }` — this block is <nav> for a11y */
    background: #faf8f4;
    border-bottom: none;
}
.gal-crumb {
    color: #5b8dd9;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gal-crumb:hover { text-decoration: underline; }
.gal-crumb-current {
    color: #2a2a2a;
    font-weight: bold;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}
.gal-crumb-sep {
    color: #c8c4bc;
    padding: 0 3px;
    user-select: none;
}
.gal-hub-link {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: #fff !important;
    text-decoration: none !important;
    padding: 7px 14px;
    background: #5b8dd9;
    border-radius: 3px;
    transition: background 0.15s, transform 0.12s;
}
.gal-hub-link:hover {
    background: #4a7bc8;
}

.gallery-section { margin-bottom:30px; }

/* ============================================================
   GALLERY — Polished Light Theme
   Matches site palette: #fdfcf9 bg | #2a2a2a text | #5b8dd9 accent
   ============================================================ */

.gallery-wrap .news-outer {
    margin-bottom: 1px;
}

/* --- Type Tabs --- */
.gal-tabs-outer { margin-bottom: 0 !important; }
.gal-tabs-inner { padding: 0 !important; }
.gal-tabs-row {
    display: flex;
    border-bottom: 1px solid #ede8df;
    overflow-x: auto;
    background: #fdfcf9;
}
.gal-tab {
    display: block;
    padding: 11px 20px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    white-space: nowrap;
    color: #b8b3aa;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    font-weight: 500;
    border-right: none !important;
}
.gal-tab:hover { color: #2a2a2a !important; border-right-color: transparent !important; }
.gal-tab-active {
    color: #5b8dd9 !important;
    border-bottom-color: #5b8dd9 !important;
    font-weight: 700;
}

/* --- Breadcrumb / context bar --- */
.gal-context-outer { margin-bottom: 0 !important; }
.gal-context-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 16px !important;
    background: #f6f1e8 !important;
    border-bottom: 1px solid #ede8df;
}
.gal-context-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 11px;
}
.gal-crumb {
    color: #b8b3aa;
    text-decoration: none;
    transition: color 0.15s;
}
a.gal-crumb:hover { color: #5b8dd9; }
.gal-crumb-current { color: #2a2a2a; font-weight: 600; }
.gal-crumb-sep { color: #d4cfc8; margin: 0 2px; }
.gal-hub-link {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5b8dd9;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.gal-hub-link:hover { opacity: 1; }

/* --- Series / Folder Cards --- */
.gal-series-card,
.gal-folder-card {
    display: block;
    background: #faf8f4;
    border: 1px solid #e0dbd2;
    border-radius: 2px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gal-series-card:hover,
.gal-folder-card:hover {
    border-color: #5b8dd9;
    box-shadow: 0 4px 14px rgba(91,141,217,0.18);
    transform: translateY(-2px);
}
.gal-card-thumb-wrap {
    position: relative;
    overflow: hidden;
}
.gal-card-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    background: #e8e3da;
    transition: transform 0.2s;
}
.gal-series-card:hover .gal-card-thumb,
.gal-folder-card:hover .gal-card-thumb {
    transform: scale(1.04);
}
.gal-card-thumb-placeholder {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #ede8df 0%, #e0dbd2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    opacity: 0.35;
}
.gal-card-info {
    padding: 9px 11px;
    background: #faf8f4;
    border-top: 1px solid #ede8df;
}
.gal-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #2a2a2a;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    white-space: normal;
}
.gal-card-count {
    font-size: 10px;
    color: #b8b3aa;
    letter-spacing: 0.3px;
}

/* --- Gallery Grid + Items --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 4px;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #f0ebe3;
    border: 1px solid #e0dbd2;
    border-left: 2px solid #d4cfc8;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gallery-item:hover {
    border-color: #5b8dd9;
    box-shadow: 0 3px 10px rgba(91,141,217,0.15);
    transform: translateY(-1px);
    z-index: 1;
}
.gallery-item img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.gallery-caption {
    padding: 5px 8px;
    font-size: 10px;
    color: #888;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(250,248,244,0.95);
}

/* Upload panel toggle header */
.gal-upload-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
}
.gal-upload-toggle-label {
    font-size: 11px;
    font-weight: 700;
    color: #2a2a2a;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gal-upload-toggle-sub {
    font-size: 10px;
    color: #b8b3aa;
}

/* Lightbox */
.lightbox {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.9);
    z-index:2000;
    align-items:center;
    justify-content:center;
}

.lightbox.open { display:flex; }

.lightbox-inner {
    position:relative;
    max-width:90vw;
    max-height:90vh;
    text-align:center;
}

.lightbox-inner img {
    max-width:100%;
    max-height:80vh;
    border-left:3px solid #5b8dd9;
    border-top:3px solid #5b8dd9;
    display:block;
}

.lightbox-inner p {
    color:#888;
    font-size:12px;
    margin-top:10px;
    letter-spacing:1px;
}

.lightbox-close {
    position:absolute;
    top:-14px;
    right:-14px;
    background:#5b8dd9;
    border:none;
    color:#fff;
    width:28px;
    height:28px;
    border-radius:50%;
    cursor:pointer;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s;
}

.lightbox-close:hover { background:#e8a87c; }
/* ============================================================
   HIDDEN TAG SYSTEM
   ============================================================ */
   .hidden-tag {
    color: inherit; /* Inherits the standard text color */
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: all 0.3s ease;
    cursor: help; /* Gives a ? cursor to hint it's a tool/link */
}

.hidden-tag:hover {
    color: #e8a87c; /* Your theme's orange accent color */
    border-bottom: 1px dotted #e8a87c;
    background: rgba(232,168,124,0.1);
    border-radius: 2px;
}
/* ============================================================
   ADMIN FORMS
   ============================================================ */
   .admin-form label {
    display: block;
    color: #888;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 4px;
}
.admin-form .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3a3a3a;
    font-weight: bold;
}
.admin-form input[type="text"],
.admin-form select {
    width: 100%;
    background: rgba(0,0,0,0.03);
    border: 1px solid #c8c4bc;
    border-left: 2px solid #5b8dd9;
    color: #2a2a2a;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
}
.tag-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.tag-table th {
    background: #f5f0e8;
    color: #b8b3aa;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #d4cfc8;
}
.tag-table td {
    padding: 10px;
    border-bottom: 1px solid #f0ebe3;
    color: #3a3a3a;
}
.tag-table tr:hover td{
    background: rgba(91,141,217,0.05);
}
.tag-table th{
    position: sticky;
    top: 0;
    z-index: 2;
}
.tag-table tr:nth-child(even) td{
    background: rgba(0,0,0,0.015);
}

/* ============================================================
   ADMIN — TAGS UX
   ============================================================ */
.ah-tags-body{
    background: #fff;
}
.ah-tags-toolbar{
    display:flex;
    gap:12px;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
}
.ah-tags-toolbar-label{
    font-size:10px;
    color:#b8b3aa;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:4px;
}
#ahTagFilter{
    width:min(560px, 75vw);
    max-width:100%;
    padding:7px 10px;
    border:1px solid #d4cfc8;
    border-left:3px solid #5b8dd9;
    font-size:12px;
    outline:none;
    background:#fff;
}
.ah-tags-toolbar-right{
    display:flex;
    gap:10px;
    align-items:center;
    margin-left:auto;
}
.ah-tags-count{
    font-size:11px;
    color:#999;
    white-space:nowrap;
}
.ah-tags-clear{
    padding:7px 10px;
    background:transparent;
    border:1px solid #d4cfc8;
    color:#999;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
}
.ah-tags-clear:hover{
    border-color:#5b8dd9;
    color:#5b8dd9;
}
.ah-tag-key{
    display:inline-block;
    padding:2px 8px;
    border:1px solid rgba(91,141,217,0.25);
    background:rgba(91,141,217,0.08);
    color:#2a2a2a;
    border-radius:999px;
    font-size:11px;
}
.ah-tag-input{
    flex:1;
    font-size:11px;
    padding:5px 8px;
    border:1px solid #d4cfc8;
    outline:none;
    min-width:150px;
}
.ah-tag-url{
    border-left:2px solid #5b8dd9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.ah-tag-hover{
    border-left:2px solid #e8a87c;
}
.ah-tag-save{
    font-size:10px;
    padding:5px 10px;
    cursor:pointer;
    border:1px solid #5b8dd9;
    color:#5b8dd9;
    background:transparent;
    text-transform:uppercase;
    letter-spacing:1px;
    white-space:nowrap;
}
.ah-tag-save:hover{
    background:rgba(91,141,217,0.10);
}

.ah-suggest-table td{
    vertical-align:top;
}
.ah-sug-context{
    color:#888;
    font-size:11px;
}
.ah-sug-context > summary{
    cursor:pointer;
    list-style:none;
}
.ah-sug-context > summary::-webkit-details-marker{ display:none; }
.ah-sug-context > summary{
    display:-webkit-box;
    line-clamp:2;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.ah-sug-context[open] > summary{
    line-clamp:unset;
    -webkit-line-clamp:unset;
}
.ah-sug-context-body{
    margin-top:6px;
    padding:8px 10px;
    background:rgba(0,0,0,0.03);
    border-left:2px solid #e0dbd2;
    color:#666;
    white-space:pre-wrap;
}

.ah-sug-bulkbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
.ah-sug-bulk-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.ah-sug-bulk-check{
    font-size:10px;
    color:#666;
    display:flex;
    align-items:center;
    gap:8px;
    user-select:none;
}
.ah-sug-bulk-count{
    font-size:10px;
    color:#999;
}
.ah-sug-bulk-right{
    display:flex;
    align-items:center;
    gap:8px;
}
.ah-sug-bulk-btn{
    padding:6px 10px;
    background:transparent;
    border:1px solid #d4cfc8;
    color:#999;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
}

/* Make suggested-tags table more compact */
.admin-wrap .ah-suggest-table th{ padding:8px 10px; font-size:10px; }
.admin-wrap .ah-suggest-table td{ padding:8px 10px; font-size:11px; }
.admin-wrap .ah-suggest-table input[type="text"]{ font-size:11px !important; padding:4px 8px !important; }
.ah-sug-bulk-btn:hover{
    border-color:#5b8dd9;
    color:#5b8dd9;
}
.ah-sug-bulk-btn.ah-sug-bulk-danger:hover{
    border-color:#ff6b6b;
    color:#ff6b6b;
}
.btn-delete {
    background: transparent;
    border: none;
    color: #ff6b6b;
    font-weight: bold;
    cursor: pointer;
}
.btn-delete:hover { text-decoration: underline; }
/* ADMIN TOP NAV BUTTON */
.nav-auth a.nav-admin {
    background: rgba(80, 200, 120, 0.15) !important; /* Emerald/Terminal Green */
    border-color: #50c878 !important;
    color: #50c878 !important;
    border-right: 1px solid #50c878 !important;
}

.nav-auth a.nav-admin:hover {
    background: rgba(80, 200, 120, 0.3) !important;
    color: #fff !important;
}
/* ============================================================
   REPORTING SYSTEM
   ============================================================ */
   .report-btn {
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: #ff6b6b;
    padding: 3px 10px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    font-family: Arial, sans-serif;
    opacity: 0.7;
}

.report-btn:hover {
    border-left-color: #ff6b6b;
    opacity: 1;
    background: rgba(255,107,107,0.05);
}

.report-menu {
    display: none;
    position: absolute;
    bottom: 25px;
    right: 0;
    background: #1a1a1a;
    border: 1px solid rgba(255,107,107,0.3);
    border-top: 2px solid #ff6b6b;
    width: 180px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border-radius: 4px;
}

.report-title {
    color: #ff6b6b;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: #111;
}

.report-menu button {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: #ccc;
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: Arial, sans-serif;
}

.report-menu button:hover {
    background: rgba(255,107,107,0.1);
    color: #fff;
}
/* ============================================================
   COMMENT TARGET HIGHLIGHT
   ============================================================ */
/* When the URL ends in #comment-123, this highlights that specific comment */
.comment-item:target {
    animation: targetFlash 2s ease-out forwards;
}

@keyframes targetFlash {
    0% { background: rgba(232, 168, 124, 0.3); border-left: 3px solid #e8a87c; }
    100% { background: #faf8f4; border-left: 3px solid transparent; }
}

/* Optional: Make the anchor jump smooth instead of instant */
html {
    scroll-behavior: smooth;
}
/* ============================================================
   PROFILE & ACCOUNT
   ============================================================ */

/* Outer wrapper */
.profile-wrap {
    display: block;
}

/* Header row: avatar | info | actions */
.profile-header {
    padding: 25px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-bottom: 1px solid #f0ebe3;
    background: #fff;
}

/* Avatar column — fixed width, no shrink */
.profile-avatar {
    flex-shrink: 0;
}

.profile-avatar img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-left: 3px solid #5b8dd9;
    border-top: 3px solid #5b8dd9;
    display: block;
}

/* Info column — eats all leftover space so actions stay pinned right */
.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-info h2 {
    color: #2a2a2a;
    font-size: 20px;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

/* Two-column content grid */
.profile-content-grid {
    display: flex;
    gap: 30px;
    padding: 20px 20px 30px;
    background: #fdfcf9;
}

.profile-col {
    flex: 1;
    min-width: 0;
}

/* THE FANCY ADMIN LABEL */
.admin-label {
    background: #ff6b6b;
    color: #fff;
    font-size: 10px;
    padding: 2px 10px;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    vertical-align: middle;
    /* Fancy angled corner to match your news rants */
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

/* COOL RANK & STATS STYLING */
.rank-badge {
    display: inline-block;
    border: 1px solid #5b8dd9;
    color: #5b8dd9;
    padding: 3px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    font-weight: bold;
    background: rgba(91,141,217,0.03);
}

.profile-stats {
    display: flex;
    gap: 15px;
    font-size: 11px;
    color: #999;
    letter-spacing: 0.5px;
}

.profile-stats strong {
    color: #333;
}

.profile-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.btn-action {
    display: block;
    width: 150px;
    text-align: center;
    padding: 8px;
    font-size: 10px;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #5b8dd9 !important;
    background: #fff;
    border-left: 2px solid #5b8dd9;
    border-top: 2px solid #5b8dd9;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    transition: 0.2s;
    border-bottom: 1px solid #d4cfc8;
    border-right: 1px solid #d4cfc8;
}

.btn-action:hover {
    background: #f5f0e8;
    color: #e8a87c !important;
    border-color: #e8a87c;
}

/* RECESSED BOXES */
.profile-box {
    background: #fff;
    border: 1px solid #d4cfc8;
    border-top: 3px solid #5b8dd9;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.02), 0 2px 5px rgba(0,0,0,0.05);
}

/* THE PRIVATE BOX (EMERALD THEME) */
.private-details {
    border-top-color: #50c878 !important;
    background: #fafffa !important; /* Subtle green tint */
}

.private-details h4 {
    color: #50c878 !important;
}

.profile-box h4 {
    color: #5b8dd9;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0ebe3;
    padding-bottom: 8px;
}
/* Specific styling for data rows in the profile boxes */
.profile-data-row {
    font-size: 11px;
    color: #666;
    padding: 6px 0;
    border-bottom: 1px dashed #f0ebe3;
    display: flex;
    justify-content: space-between;
}

.profile-data-row:last-child {
    border-bottom: none;
}

.profile-data-row span {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
}

.profile-data-row strong {
    color: #333;
}

/* Rendered BBCode content inside profile boxes */
.profile-sig-render {
    font-size: 13px;
    line-height: 1.7;
    color: #3a3a3a;
    word-break: break-word;
}

/* Signature gets an orange accent border to distinguish it from bio */
.profile-box:has(.profile-sig-render) {
    border-top-color: #e8a87c;
}

/* THE LEGENDARY WEBMASTER LABEL (USER #1 ONLY) */
.webmaster-label {
    background: #50c878; /* Custom Emerald Green */
    color: #fff;
    font-size: 10px;
    padding: 2px 10px;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    vertical-align: middle;
    /* Sharp angled corner matching the site's aggressive retro look */
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
/* ============================================================
   BBCODE — IMAGES & LINKS
   ============================================================ */

/* <details> wrapper — block-level, matches body width */
.bbcode-img-container {
    display: block;
    margin: 10px 0;
    border-left: 2px solid #ff6b6b;
    background: rgba(255, 107, 107, 0.04);
}

/* The clickable warning bar (native <summary>) */
.bbcode-img-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 10px;
    color: #cc5555;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    user-select: none;
    list-style: none; /* hide default triangle in some browsers */
    transition: background 0.15s;
}

.bbcode-img-warning::-webkit-details-marker { display: none; }

.bbcode-img-warning:hover {
    background: rgba(255, 107, 107, 0.08);
    color: #ff6b6b;
}

/* Arrow rotates when open */
.bbcode-img-container[open] > .bbcode-img-warning::after {
    content: '▲';
    font-size: 8px;
    margin-left: auto;
    opacity: 0.5;
}

.bbcode-img-container:not([open]) > .bbcode-img-warning::after {
    content: '▼';
    font-size: 8px;
    margin-left: auto;
    opacity: 0.5;
}

/* The revealed image */
.bbcode-img-container .bbcode-img {
    border-top: 1px dashed rgba(255, 107, 107, 0.3);
}

/* External links — inline badge showing destination domain */
.bbcode-link {
    color: #5b8dd9;
    text-decoration: none;
    border-bottom: 1px solid rgba(91, 141, 217, 0.3);
    transition: color 0.15s, border-color 0.15s;
}

.bbcode-link:hover {
    color: #e8a87c;
    border-bottom-color: #e8a87c;
}

.bbcode-ext-badge {
    display: inline-block;
    font-size: 9px;
    color: #999;
    background: rgba(0,0,0,0.04);
    border: 1px solid #e0dbd2;
    border-radius: 3px;
    padding: 0px 5px;
    margin-left: 5px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    font-style: normal;
    transition: color 0.15s;
}

.bbcode-link:hover .bbcode-ext-badge {
    color: #e8a87c;
    border-color: rgba(232, 168, 124, 0.4);
}

/* ============================================================
   SEARCH
   ============================================================ */

/* Full-width search bar on the search page */
.search-form {
    padding: 20px 20px 0;
}

.search-form-inner {
    display: flex;
    gap: 0;
    border-left: 3px solid #5b8dd9;
    border-top: 3px solid #5b8dd9;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.search-input-lg {
    flex: 1;
    background: #fff;
    border: none;
    border-right: 1px solid #e0dbd2;
    color: #2a2a2a;
    padding: 12px 16px;
    font-size: 15px;
    font-family: Arial, sans-serif;
    outline: none;
}

.search-input-lg::placeholder { color: #c8c4bc; }

.search-submit {
    background: #5b8dd9;
    border: none;
    color: #fff;
    padding: 12px 24px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background 0.2s;
    white-space: nowrap;
}

.search-submit:hover { background: #e8a87c; }

/* Filter tab bar */
.search-filter-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 20px 0;
    border-bottom: 2px solid #d4cfc8;
    margin: 0 0 20px 0;
}

.search-filter-bar a {
    color: #b8b3aa;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    white-space: nowrap;
}

.search-filter-bar a:hover { color: #5b8dd9; }

.search-filter-bar a.active {
    color: #5b8dd9;
    border-bottom-color: #5b8dd9;
    font-weight: 700;
}

.search-count {
    margin-left: auto;
    font-size: 10px;
    color: #b8b3aa;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 8px;
}

/* Featured hidden-tag results */
.search-featured {
    margin: 0 20px 20px;
    border-left: 3px solid #e8a87c;
    background: rgba(232, 168, 124, 0.06);
}

.search-featured-label {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e8a87c;
    padding: 6px 14px 4px;
    border-bottom: 1px solid rgba(232, 168, 124, 0.2);
}

.search-featured-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 168, 124, 0.12);
    transition: background 0.15s;
}

.search-featured-item:last-child { border-bottom: none; }

.search-featured-item:hover { background: rgba(232, 168, 124, 0.1); }

.search-featured-kw {
    color: #e8a87c;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.search-featured-desc {
    color: #888;
    font-size: 12px;
    flex: 1;
}

.search-featured-arr {
    color: #e8a87c;
    font-size: 14px;
    opacity: 0.6;
}

/* Result items */
.search-results {
    padding: 0 20px;
}

.search-result-item {
    padding: 16px 0;
    border-bottom: 1px solid #ede8df;
}

.search-result-item:last-child { border-bottom: none; }

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

/* Type badges */
.search-badge {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    font-weight: bold;
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
}

.badge-news   { background: rgba(91,141,217,0.15); color: #5b8dd9; }
.badge-rant   { background: rgba(232,168,124,0.15); color: #e8a87c; }
.badge-review { background: rgba(80,200,120,0.15); color: #50c878; }
.badge-forum  { background: rgba(180,120,220,0.15); color: #b478dc; }
.badge-member { background: rgba(0,0,0,0.05); color: #888; }
.badge-anime   { background: rgba(232,124,124,0.15); color: #e87c7c; }

.search-result-date,
.search-result-author {
    color: #b8b3aa;
    font-size: 11px;
}

.search-result-title {
    font-size: 15px;
    margin: 0 0 5px 0;
}

.search-result-title a {
    color: #2a2a2a;
    text-decoration: none;
    transition: color 0.15s;
}

.search-result-title a:hover { color: #5b8dd9; }

.search-result-excerpt {
    color: #666;
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 5px 0;
}

.search-result-url {
    color: #b8b3aa;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-decoration: none;
}

/* Highlight matched terms */
mark.search-hl {
    background: rgba(232, 168, 124, 0.25);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Empty / no-query state */
.search-empty {
    padding: 60px 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
    line-height: 2;
}

.search-empty em { color: #5b8dd9; font-style: normal; }

/* Pagination */
.search-pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 24px 20px;
    border-top: 1px solid #ede8df;
}

.search-pagination a {
    color: #888;
    text-decoration: none;
    padding: 5px 12px;
    font-size: 11px;
    border: 1px solid #e0dbd2;
    transition: all 0.15s;
}

.search-pagination a:hover,
.search-pagination a.active {
    background: #5b8dd9;
    border-color: #5b8dd9;
    color: #fff;
}

/* ============================================================
   FORUMS — BOARD VIEW
   ============================================================ */
.forum-topic-list {
    padding: 0 0 10px;
}

.forum-topic-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #ede8df;
    transition: background 0.1s;
}

.forum-topic-row:hover { background: rgba(91,141,217,0.03); }

.forum-topic-row.is-pinned { background: rgba(232,168,124,0.04); }

.forum-topic-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
}

.forum-topic-info {
    flex: 1;
    min-width: 0;
}

.forum-topic-title {
    display: block;
    color: #2a2a2a;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 3px;
    transition: color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-topic-title:hover { color: #5b8dd9; }

.forum-topic-meta {
    font-size: 11px;
    color: #b8b3aa;
}

.forum-topic-meta a {
    color: #e8a87c;
    text-decoration: none;
}

.forum-topic-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    text-align: center;
}

.forum-stat-replies,
.forum-stat-views {
    font-size: 13px;
    color: #5b8dd9;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}

.forum-stat-replies small,
.forum-stat-views small {
    display: block;
    font-size: 9px;
    color: #b8b3aa;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.forum-topic-last {
    flex-shrink: 0;
    width: 50px;
    text-align: right;
}

/* ============================================================
   FORUMS — THREAD / TOPIC VIEW
   ============================================================ */
.forum-thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid #ede8df;
    background: #fdfcf9;
}

.forum-thread-title {
    font-size: 20px;
    color: #2a2a2a;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.forum-thread-meta {
    font-size: 11px;
    color: #b8b3aa;
    letter-spacing: 0.5px;
}

/* Mod toolbar in thread header */
.forum-mod-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 10px;
    background: rgba(80,200,120,0.06);
    border: 1px solid rgba(80,200,120,0.2);
    border-radius: 3px;
}

.forum-mod-btn {
    background: transparent;
    border: 1px solid #d4cfc8;
    color: #777;
    padding: 3px 10px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: all 0.15s;
}

.forum-mod-btn:hover {
    border-color: #5b8dd9;
    color: #5b8dd9;
}

.forum-mod-btn-danger:hover {
    border-color: #ff6b6b !important;
    color: #ff6b6b !important;
}

/* Pagination shared across board + topic */
.forum-pagination {
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    border-bottom: 1px solid #ede8df;
}

.forum-pagination a {
    color: #888;
    text-decoration: none;
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid #e0dbd2;
    transition: all 0.15s;
}

.forum-pagination a:hover,
.forum-pagination a.active {
    background: #5b8dd9;
    border-color: #5b8dd9;
    color: #fff;
}

/* Individual posts */
.forum-posts-wrap {
    background: #faf8f4;
}

.forum-post {
    display: flex;
    border-bottom: 2px solid #ede8df;
}

.forum-post:last-child { border-bottom: none; }

.forum-post:last-child .forum-post-content {
    border-bottom: 1px solid #c8c4bc;
}

/* Left author column */
.forum-post-author {
    width: 140px;
    min-width: 140px;
    padding: 16px 12px;
    border-right: 1px solid #ede8df;
    background: #f5f0e8;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.forum-post-avatar {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-left: 2px solid #c8c4bc;
    border-top: 2px solid #c8c4bc;
    display: block;
}

.forum-post-avatar-placeholder {
    width: 90px;
    height: 90px;
    background: #f0ebe3;
    border-left: 2px solid #5b8dd9;
    border-top: 2px solid #5b8dd9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    color: #b8b3aa;
}

.forum-post-username {
    color: #5b8dd9;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    word-break: break-word;
}

.forum-post-username:hover { color: #e8a87c; }

.forum-post-author-stats {
    font-size: 10px;
    color: #b8b3aa;
    line-height: 1.7;
    letter-spacing: 0.5px;
    margin-top: 0;
    text-align: left;
}

.forum-post-author-stats span { display: block; }
.forum-post-author-stats strong { color: #777; }

/* Right content column */
.forum-post-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.forum-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px dashed #e0dbd2;
    background: rgba(0,0,0,0.01);
}

.forum-post-num {
    color: #b8b3aa;
    font-size: 10px;
    letter-spacing: 1px;
    text-decoration: none;
}

.forum-post-num:hover { color: #5b8dd9; }

.forum-post-date {
    color: #b8b3aa;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.forum-post-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

.forum-post-body {
    flex: 1;
    padding: 14px 16px;
    color: #3a3a3a;
    font-size: 13px;
    line-height: 1.75;
    word-break: break-word;
}

/* Signature separator */
.forum-post-sig {
    padding: 8px 16px;
    border-top: 1px dashed #e0dbd2;
    font-size: 11px;
    color: #999;
    background: rgba(0,0,0,0.01);
    word-break: break-word;
}

/* Reply box */
.forum-reply-wrap {
    background: #fdfcf9;
    margin-top: 5px;
    position: relative;
}

.forum-reply-wrap form {
    margin-left: 141px;
    border-left: 1px solid #ede8df;
    background: #fdfcf9;
}

/* Left ghost area matches author column */
.forum-reply-wrap::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 141px;
    top: 0;
    bottom: 0;
    background: #f5f0e8;
    border-right: 1px solid #ede8df;
    pointer-events: none;
}

/* ============================================================
   FORUM — HIDDEN / REPORTED POST PLACEHOLDER
   ============================================================ */
.forum-post-hidden {
    padding: 16px 20px;
    background: rgba(255, 107, 107, 0.05);
    border-left: 3px solid rgba(255, 107, 107, 0.3);
    color: #b8b3aa;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-post-hidden span {
    font-size: 18px;
    opacity: 0.5;
}

/* ============================================================
   ANIME — FEATURED GRID
   ============================================================ */
.media-scheduled-badge{
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    color: #c9923e;
    border: 1px solid rgba(201, 146, 62, 0.35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.media-scheduled-badge svg{
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.media-scheduled-badge--muted{
    color: #b8924a;
    background: rgba(253, 252, 249, 0.62);
    border-color: rgba(201, 146, 62, 0.22);
}

.anime-card:hover .media-scheduled-badge,
.anime-featured-card:hover .media-scheduled-badge{
    color: #e8a87c;
    border-color: rgba(232, 168, 124, 0.45);
}

.media-live-badge{
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    color: #5b8dd9;
    border: 1px solid rgba(91, 141, 217, 0.32);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.media-live-badge svg{
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.media-live-badge--muted{
    color: #6a8fc4;
    background: rgba(253, 252, 249, 0.62);
    border-color: rgba(91, 141, 217, 0.22);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.anime-card:hover .media-live-badge,
.anime-featured-card:hover .media-live-badge{
    color: #e8a87c;
    border-color: rgba(232, 168, 124, 0.45);
}

.anime-card{ position: relative; }

.anime-featured-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.anime-featured-card {
    display: flex;
    gap: 0;
    text-decoration: none;
    border-bottom: 1px solid #ede8df;
    transition: background 0.15s;
}

.anime-featured-card:hover { background: rgba(91,141,217,0.03); }

.anime-featured-cover {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 2 / 3;
    background: #f0ebe3;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.anime-featured-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-right: 2px solid #e0dbd2;
}

.anime-no-cover {
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #e0dbd2;
    border-left: 3px solid #5b8dd9;
}

.anime-no-cover span {
    font-size: 24px;
    font-weight: 900;
    color: #c8c4bc;
    letter-spacing: 3px;
}

.anime-featured-info {
    flex: 1;
    padding: 16px 20px;
    min-width: 0;
}

.anime-featured-title {
    font-size: 18px;
    color: #4a4a4a;
    margin: 0 0 3px 0;
    transition: color 0.15s;
}

.anime-featured-card:hover .anime-featured-title { color: #e8a87c; }

.anime-featured-alt {
    font-size: 12px;
    color: #b8b3aa;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.anime-featured-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.anime-featured-meta span {
    position: relative;
    padding-right: 12px;
}

.anime-featured-meta span::after {
    content: '·';
    position: absolute;
    right: 0;
    color: #d4cfc8;
}

.anime-featured-meta span:last-child::after { display: none; }

.anime-featured-synopsis {
    font-size: 12px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 10px 0;
}

.anime-featured-cta {
    font-size: 10px;
    color: #5b8dd9;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Grid card tweaks */
.anime-card { text-decoration: none; color: inherit; }
.anime-card-placeholder {
    width: 100%;
    height: 200px;
    background: #f0ebe3;
    border-left: 3px solid #5b8dd9;
    border-top: 3px solid #5b8dd9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    color: #c8c4bc;
    letter-spacing: 4px;
}

.anime-genre {
    display: block;
    color: #b8b3aa;
    font-size: 10px;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* ============================================================
   ANIME — DETAIL PAGE
   ============================================================ */
.anime-detail-wrap {
    padding-bottom: 30px;
    /* Non-Episodes tab strip + pane body (must match or tab “disconnects”) */
    --anime-detail-tab-body-bg: #fff;
    --anime-detail-ep-chrome-bg: #faf8f4;
}

.anime-detail-hero {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #ede8df;
    background: #fff;
}

.anime-detail-cover {
    width: 180px;
    min-width: 180px;
    flex-shrink: 0;
    align-self: flex-start;
    background: #f0ebe3;
}

.anime-detail-cover img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-right: 3px solid #e0dbd2;
}

.anime-detail-no-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: #f0ebe3;
    border-right: 3px solid #5b8dd9;
    border-left: 3px solid #5b8dd9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 900;
    color: #c8c4bc;
    letter-spacing: 6px;
}

.anime-detail-header {
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
}

.anime-detail-title {
    font-size: 26px;
    color: #2a2a2a;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.anime-detail-alt {
    font-size: 13px;
    color: #b8b3aa;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.anime-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.anime-tag {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    background: rgba(0,0,0,0.04);
    border: 1px solid #e0dbd2;
    color: #888;
}

.anime-tag.completed { border-color: #50c878; color: #50c878; background: rgba(80,200,120,0.06); }
.anime-tag.ongoing   { border-color: #5b8dd9; color: #5b8dd9; background: rgba(91,141,217,0.06); }
.anime-tag.cancelled { border-color: #ff6b6b; color: #ff6b6b; background: rgba(255,107,107,0.06); }

.anime-detail-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 16px;
}

.anime-genre-pill {
    font-size: 10px;
    color: #e8a87c;
    border: 1px solid rgba(232,168,124,0.3);
    padding: 2px 10px;
    letter-spacing: 0.5px;
}

.anime-detail-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.anime-cta-btn {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 18px;
    transition: all 0.15s;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.anime-cta-forum {
    background: rgba(91,141,217,0.12);
    border-left: 2px solid #5b8dd9;
    color: #5b8dd9;
}

.anime-cta-forum:hover { background: rgba(91,141,217,0.25); }

.anime-cta-news {
    background: rgba(232,168,124,0.12);
    border-left: 2px solid #e8a87c;
    color: #e8a87c;
}

.anime-cta-news:hover { background: rgba(232,168,124,0.25); }

.anime-detail-section { margin-top: 0; }

/* anime-detail.php — layout / chrome (no inline style=; easier to tune with tabs + panes) */
.anime-detail-wrap .anime-detail-back-bar {
    padding: 10px 20px;
    border-bottom: 1px solid #ede8df;
    font-size: 11px;
}
.anime-detail-wrap .anime-detail-back-link {
    color: #b8b3aa;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.anime-detail-wrap .anime-detail-back-link:hover {
    color: #8a8478;
}
.anime-detail-wrap .anime-detail-section--flush {
    padding: 0;
    border-bottom: none;
}
.anime-detail-wrap .anime-detail-dual-info .anime-info-table {
    border: none;
}
.anime-detail-wrap .anime-detail-synopsis-empty {
    padding: 16px 20px;
    font-size: 13px;
    color: #b8b3aa;
}
.anime-detail-wrap .anime-detail-atab-pane {
    padding: 0;
    border-bottom: none;
}
.anime-detail-wrap .anime-community-split-heading {
    padding: 10px 20px 8px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b8b3aa;
    border-bottom: 1px solid #ede8df;
}
.anime-detail-wrap .anime-community-articles .anime-community-split-heading {
    padding: 10px 16px 8px;
}
.anime-detail-wrap .anime-community-topic-main {
    min-width: 0;
}
.anime-detail-wrap .anime-community-empty {
    padding: 16px 20px;
    font-size: 13px;
    color: #b8b3aa;
}
.anime-detail-wrap .forum-board-link-row .anime-community-board-desc {
    color: #b8b3aa;
    font-size: 11px;
}
.anime-detail-wrap .forum-board-link-row .anime-community-all-topics {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #5b8dd9;
    text-decoration: none;
}
.anime-detail-wrap .forum-board-link-row .anime-community-all-topics:hover {
    text-decoration: underline;
}
.anime-detail-wrap .anime-dl-guest {
    padding: 20px;
    text-align: center;
    color: #b8b3aa;
    font-size: 13px;
}
.anime-detail-wrap .anime-dl-guest a {
    color: #5b8dd9;
}
.anime-detail-wrap .anime-dl-locked-shell {
    padding: 20px 24px;
}
.anime-detail-wrap .anime-dl-locked-callout {
    background: #faf8f4;
    border-left: 3px solid #e8a87c;
    padding: 16px 20px;
}
.anime-detail-wrap .anime-dl-locked-title {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e8a87c;
    margin-bottom: 8px;
}
.anime-detail-wrap .anime-dl-locked-lead {
    font-size: 13px;
    color: #666;
    margin: 0 0 8px;
}
.anime-detail-wrap .anime-dl-locked-hint {
    font-size: 12px;
    color: #b8b3aa;
    margin: 0;
}
.anime-detail-wrap .anime-dl-points-wrap {
    padding: 16px 20px 20px;
    background: var(--anime-detail-tab-body-bg);
}
.anime-detail-wrap .anime-dl-guest,
.anime-detail-wrap .anime-dl-locked-shell {
    background: var(--anime-detail-tab-body-bg);
}
.anime-detail-wrap .anime-dl-points-line {
    font-size: 12px;
    color: #b8b3aa;
    margin: 0 0 16px;
}
.anime-detail-wrap .anime-dl-points-line > strong {
    color: #5b8dd9;
}
.anime-detail-wrap .anime-dl-points-note {
    color: #e8a87c;
}

/* ============================================================
   ANIME DETAIL — Episode list, arc tabs, synopsis split, community
   split, scoped forum & article rows. Migrated out of the inline
   <style> block in includes/anime-detail.php so everything lives in
   one place and conflicts (e.g. .forum-topic-row redefining itself)
   can't happen again. The forum/article row selectors are scoped to
   .anime-community-forum / .anime-community-articles so they don't
   stomp on the global /forums/ pages.
   ============================================================ */

/* ── Arc Tab Nav (inside Episodes pane) ───────────────────── */
.arc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid #ede8df;
    background: #faf8f4;
}
.arc-tab {
    display: inline-block;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .7px;
    text-transform: uppercase;
    border: 1px solid #d9d3c8;
    background: #fff;
    color: #888;
    cursor: pointer;
    border-radius: 2px;
    transition: background .12s, color .12s, border-color .12s;
    user-select: none;
    white-space: nowrap;
}
.arc-tab:hover  { background: #ede8df; color: #444; border-color: #c4bdb0; }
.arc-tab.active { background: #2a2a2a; color: #fff; border-color: #2a2a2a; }

.arc-group { display: none; }
.arc-group.visible { display: block; }

/* ── Episode rows ─────────────────────────────────────────── */
.ep-row {
    border-bottom: 1px solid #ede8df;
    cursor: pointer;
    transition: background .1s;
}
.ep-row:hover { background: #faf8f4; }
.ep-row:last-child { border-bottom: none; }

.ep-row-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
}
.ep-num {
    font-size: 11px;
    font-weight: bold;
    color: #b8b3aa;
    letter-spacing: .5px;
    min-width: 32px;
    flex-shrink: 0;
}
.ep-title {
    flex: 1;
    font-size: 13px;
    color: #2a2a2a;
    font-weight: bold;
    line-height: 1.4;
}
.ep-airdate {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    border: 1px solid #e6dfcf;
    border-radius: 3px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .4px;
    background: #fff;
    cursor: help;
    transition: border-color .12s;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.ep-airdate:hover { border-color: #c4bdb0; }

.ep-airdate-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px 4px 7px;
    background: #f5efe2;
    color: #8a7f6b;
    font-weight: bold;
    text-transform: uppercase;
    border-right: 1px solid #e6dfcf;
}
.ep-airdate-label::before {
    content: "\1F4C5";
    margin-right: 4px;
    font-size: 10px;
    filter: grayscale(.3);
}

.ep-airdate-date {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    color: #6e6859;
    white-space: nowrap;
}

/* Hide the literal "Aired" label on narrow viewports to save space; the
   calendar icon + date still convey the meaning, and the title= attribute
   carries the full "Original Air Date" string for hover/screen readers. */
@media (max-width: 720px) {
    .ep-airdate-label { font-size: 0; padding: 4px 5px; }
    .ep-airdate-label::before { margin-right: 0; font-size: 11px; }
}
.ep-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    gap: 4px;
}
.ep-type-badge.canon       { background: #e8f4e8; color: #4a8c4a; border: 1px solid #c3dfc3; }
.ep-type-badge.mixed       { background: #fef4e8; color: #b07828; border: 1px solid #f0d8a8; }
.ep-type-badge.filler      { background: #f0eeeb; color: #9a9490; border: 1px solid #d9d3c8; }
.ep-type-badge.good-filler { background: #e8f4f8; color: #2a82a8; border: 1px solid #a8d8f0; }

.ep-chevron {
    font-size: 10px;
    color: #c4bdb0;
    flex-shrink: 0;
    transition: transform .15s, color .15s;
}
.ep-row:hover .ep-chevron {
    transform: translateX(2px);
    color: #2a82a8;
}
.ep-row.open .ep-chevron { transform: rotate(90deg); }

.ep-synopsis {
    display: none;
    padding: 0 20px 12px 62px;
    font-size: 12px;
    color: #666;
    line-height: 1.7;
}
.ep-row.open .ep-synopsis { display: block; }

/* ── Details + Synopsis (side-by-side under hero) ─────────── */
.anime-detail-dual {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid #ede8df;
}
.anime-detail-dual-synopsis {
    flex: 2;
    border-right: 1px solid #ede8df;
    background: #fdfcf9;
    min-width: 0;
}
.anime-detail-dual-info {
    flex: 1;
    min-width: 0;
    background: #fdfcf9;
}

/* Stretch synopsis + info blocks to match the taller column (desktop). */
@media (min-width: 641px) {
    .anime-detail-dual-synopsis,
    .anime-detail-dual-info {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    /* Single direct child fills column height under the synopsis heading area */
    .anime-detail-dual-synopsis > * {
        flex: 1 1 auto;
    }
    .anime-detail-dual-info .anime-info-table {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
}

@media (max-width: 640px) {
    .anime-detail-dual { flex-direction: column; }
    .anime-detail-dual-synopsis { border-right: none; border-bottom: 1px solid #ede8df; }
    .anime-detail-dual-synopsis > *,
    .anime-detail-dual-info .anime-info-table {
        flex: none;
    }
    .anime-detail-dual-synopsis,
    .anime-detail-dual-info {
        display: block;
    }
}

/* ── Community split (Forum 70% / Articles 30%) ───────────── */
.anime-community-split {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #ede8df;
}
.anime-community-forum {
    flex: 7;
    border-right: 1px solid #ede8df;
    min-width: 0;
}
.anime-community-articles {
    flex: 3;
    min-width: 0;
}
@media (max-width: 640px) {
    .anime-community-split { flex-direction: column; }
    .anime-community-forum { border-right: none; border-bottom: 1px solid #ede8df; }
}

/* ── Forum topic rows — SCOPED to anime detail community pane ──
   Don't drop the .anime-community-forum prefix or these will
   override the global /forums/ topic-row layout (they did before
   the consolidation: identical class names, different rules,
   silent breakage). */
.anime-community-forum .forum-topic-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 9px 20px;
    border-bottom: 1px solid #ede8df;
    gap: 12px;
}
.anime-community-forum .forum-topic-row:last-child { border-bottom: none; }
.anime-community-forum .forum-topic-title {
    font-size: 13px;
    font-weight: bold;
    color: #2a2a2a;
    text-decoration: none;
    line-height: 1.4;
    transition: color .12s;
}
.anime-community-forum .forum-topic-title:hover { color: #5b8dd9; }
.anime-community-forum .forum-topic-meta {
    font-size: 10px;
    color: #b8b3aa;
    margin-top: 2px;
    letter-spacing: .3px;
}
.anime-community-forum .forum-topic-replies {
    font-size: 10px;
    color: #b8b3aa;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}
.anime-community-forum .forum-board-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid #ede8df;
    font-size: 11px;
}

/* ── Article side rows in the Articles half of community ── */
.anime-community-articles .article-side-row {
    padding: 10px 16px;
    border-bottom: 1px solid #ede8df;
}
.anime-community-articles .article-side-row:last-child { border-bottom: none; }
.anime-community-articles .article-side-title {
    font-size: 12px;
    font-weight: bold;
    color: #2a2a2a;
    text-decoration: none;
    line-height: 1.4;
    display: block;
    transition: color .12s;
}
.anime-community-articles .article-side-title:hover { color: #5b8dd9; }
.anime-community-articles .article-side-meta {
    font-size: 10px;
    color: #b8b3aa;
    margin-top: 2px;
    letter-spacing: .3px;
}

/* ============================================================
   ANIME DETAIL — PRIMARY TAB STRIP
   Hero + Details/Synopsis stay above; the rest of the page
   (Episodes / Reviews / Community / Downloads) lives in panes.
   Hash-driven via initAnimeTabs() in func.js.
   ============================================================ */
.anime-tabs-row {
    display: flex;
    align-items: stretch;
    margin: 18px 0 0;
    border-top: 1px solid #e2dccf;
    border-bottom: 2px solid #e2dccf;
    background: #faf6ee;
}

.anime-tabs-row .anime-tabs {
    flex: 1 1 auto;
    margin: 0;
    border: none;
    background: transparent;
}

.anime-tabs-schedule-link {
    align-self: center;
    margin: 0 16px 0 auto;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #a67c32;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(201, 146, 62, 0.28);
    border-radius: 3px;
    background: rgba(201, 146, 62, 0.08);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.anime-tabs-schedule-link:hover {
    color: #c87a48;
    background: rgba(232, 168, 124, 0.12);
    border-color: rgba(232, 168, 124, 0.35);
}

.anime-subnav-schedule,
.anime-subnav-catalog {
    font-weight: 600;
}

.anime-tabs {
    display: flex;
    align-items: stretch;
    background: #faf6ee;
    border-top: 1px solid #e2dccf;
    border-bottom: 2px solid #e2dccf;
    margin: 18px 0 0;
    padding: 0;
    overflow: visible;
    position: relative;
}

.atab {
    background: none;
    border: none;
    padding: 13px 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6a655c;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s, border-color .15s;
    font-family: inherit;
    position: relative;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.atab:hover  { color: #c87a48; background: rgba(232,168,124,0.05); }
.atab.active {
    color: #c87a48;
    border-bottom-color: transparent;
    font-weight: 700;
    /* Old-school "raised tab" trick: left/right border + subtle drop */
    border-left: 1px solid #c1bdb0;
    border-right: 1px solid #c1bdb0;
    border-top: 1px solid #c1bdb0;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.03), 0 -3px 10px rgba(0,0,0,0.04);
}
/* Active tab fill matches the pane body (toolbar vs main white content). */
.anime-detail-wrap .anime-tabs .atab.active[data-atab="episodes"] {
    background: var(--anime-detail-ep-chrome-bg);
}
.anime-detail-wrap .anime-tabs .atab.active[data-atab="reviews"],
.anime-detail-wrap .anime-tabs .atab.active[data-atab="characters"],
.anime-detail-wrap .anime-tabs .atab.active[data-atab="community"],
.anime-detail-wrap .anime-tabs .atab.active[data-atab="downloads"] {
    background: var(--anime-detail-tab-body-bg);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.02), 0 -2px 8px rgba(0,0,0,0.03);
}
/* (Removed) top-right cut corner: it broke the active tab border continuity. */
.atab-count {
    display: inline-block;
    padding: 1px 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: #6a655c;
    letter-spacing: 0;
    line-height: 1.5;
}
.atab.active .atab-count {
    background: rgba(232,168,124,0.20);
    color: #c87a48;
}

.atab-count-scheduled {
    background: rgba(201, 146, 62, 0.12);
    color: #a67c32;
    font-weight: 500;
}

.atab.active .atab-count-scheduled {
    background: rgba(201, 146, 62, 0.18);
    color: #8f6828;
}

.anime-detail-wrap .anime-dl-upcoming {
    margin: 0 0 24px;
    padding: 16px 18px;
    background: rgba(201, 146, 62, 0.06);
    border: 1px solid rgba(201, 146, 62, 0.18);
    border-radius: 4px;
}

.anime-detail-wrap .anime-dl-upcoming--after-live {
    margin-top: 20px;
}

.anime-detail-wrap .anime-dl-upcoming--locked {
    margin-top: 16px;
}

.anime-detail-wrap .anime-dl-upcoming-title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: #5a5348;
    letter-spacing: 0.02em;
}

.anime-detail-wrap .anime-dl-upcoming-lead {
    margin: 0 0 12px;
    font-size: 11px;
    color: #8a8378;
    line-height: 1.5;
}

.anime-detail-wrap .anime-dl-upcoming-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.anime-detail-wrap .anime-dl-upcoming-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(201, 146, 62, 0.12);
    border-radius: 3px;
}

.anime-detail-wrap .anime-dl-upcoming-date {
    font-size: 11px;
    font-weight: 700;
    color: #a67c32;
    line-height: 1.4;
}

.anime-detail-wrap .anime-dl-upcoming-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.anime-detail-wrap .anime-dl-upcoming-ep {
    display: inline-block;
    align-self: flex-start;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8f6828;
    background: rgba(201, 146, 62, 0.12);
    padding: 1px 6px;
    border-radius: 2px;
}

.anime-detail-wrap .anime-dl-upcoming-name {
    font-size: 12px;
    font-weight: 600;
    color: #4a4540;
    line-height: 1.35;
}

.anime-detail-wrap .anime-dl-upcoming-desc {
    font-size: 11px;
    color: #7a746a;
    line-height: 1.45;
}

.anime-detail-wrap .anime-dl-upcoming-batch {
    font-size: 10px;
    color: #a67c32;
}

/* ============================================================
   RELEASE SCHEDULE (/releases/)
   ============================================================ */
.release-cal-wrap {
    max-width: 920px;
}

.release-cal-guest,
.release-cal-empty {
    padding: 18px 20px;
    font-size: 13px;
    color: #6a655c;
    background: #faf8f4;
    border: 1px solid #e2dccf;
    border-radius: 4px;
}

.release-cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #faf8f4;
    border: 1px solid #e2dccf;
    border-radius: 4px;
}

.release-cal-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.release-cal-nav-btn {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6a655c;
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid #ddd6c8;
    border-radius: 3px;
    background: #fff;
}

.release-cal-nav-btn:hover {
    color: #c87a48;
    border-color: rgba(232, 168, 124, 0.4);
}

.release-cal-month {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #4a4540;
    min-width: 160px;
    text-align: center;
}

.release-cal-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #8a8378;
}

.release-cal-filter a {
    color: #5b8dd9;
}

.release-cal-today {
    color: #a67c32;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.release-cal-today--on {
    opacity: 0.55;
    pointer-events: none;
}

.release-cal-days {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.release-cal-day {
    border: 1px solid #e2dccf;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.release-cal-day--busy {
    border-color: rgba(201, 146, 62, 0.35);
    box-shadow: inset 3px 0 0 rgba(201, 146, 62, 0.55);
}

.release-cal-day--today {
    border-color: rgba(91, 141, 217, 0.35);
    box-shadow: inset 3px 0 0 rgba(91, 141, 217, 0.55);
}

.release-cal-day--past {
    opacity: 0.82;
}

.release-cal-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #faf8f4;
    border-bottom: 1px solid #ece6da;
}

.release-cal-day-date {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #4a4540;
}

.release-cal-day-flag {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #5b8dd9;
}

.release-cal-day-count {
    font-size: 10px;
    font-weight: 600;
    color: #8a8378;
    white-space: nowrap;
}

.release-cal-day-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.release-cal-item {
    display: grid;
    grid-template-columns: minmax(120px, 160px) auto 1fr auto auto;
    gap: 8px 12px;
    align-items: baseline;
    padding: 8px 14px;
    font-size: 12px;
    border-bottom: 1px solid #f3efe8;
}

.release-cal-item:last-child {
    border-bottom: none;
}

.release-cal-item-series {
    font-weight: 700;
    color: #5b8dd9;
    text-decoration: none;
}

.release-cal-item-series:hover {
    color: #c87a48;
}

.release-cal-item-ep {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #8f6828;
}

.release-cal-item-title {
    color: #4a4540;
    min-width: 0;
}

.release-cal-item-batch {
    font-size: 10px;
    color: #8a8378;
}

.release-cal-item-live {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3d7a52;
    background: rgba(80, 200, 120, 0.12);
    padding: 2px 6px;
    border-radius: 2px;
}

.atab-pane { display: none; }
.atab-pane.active { display: block; }

/* No visible pane heading — full-width strip matches .atab.active so the
   tab highlight still reads connected to episode chrome (#faf8f4). */
.anime-detail-wrap .section-title.section-title-pane-bridge {
    overflow: visible;
}
.anime-detail-wrap .section-title.section-title-pane-bridge .section-title-inner {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 6px;
    padding: 0;
    margin: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    clip-path: none;
    margin-bottom: 0;
}
/* Episodes: bridge matches toolbar / first chrome row. */
.anime-detail-wrap #episodes .section-title.section-title-pane-bridge .section-title-inner {
    background: var(--anime-detail-ep-chrome-bg);
}
/* Reviews / Community / Downloads: bridge matches main content (#fff). */
.anime-detail-wrap .section-title.section-title-pane-bridge--divider .section-title-inner {
    background: var(--anime-detail-tab-body-bg);
}

/* Full pane fill so body matches active tab (was transparent → page bg leaked). */
.anime-detail-wrap #reviews.atab-pane,
.anime-detail-wrap #characters.atab-pane,
.anime-detail-wrap #community.atab-pane,
.anime-detail-wrap #downloads.atab-pane {
    background: var(--anime-detail-tab-body-bg);
}
.anime-detail-wrap #reviews .anime-reviews-strip {
    background: var(--anime-detail-tab-body-bg);
}
.anime-detail-wrap #community .anime-community-split {
    background: var(--anime-detail-tab-body-bg);
}
.anime-detail-wrap #characters .anime-characters-list {
    background: var(--anime-detail-tab-body-bg);
}

/* ── Characters tab — alternating “official site” bios ───────── */
.anime-detail-wrap .anime-characters-list {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 0 8px;
}
.anime-detail-wrap .anime-char-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 28px;
    padding: 28px 24px;
    border-bottom: 1px solid #ede8df;
}
.anime-detail-wrap .anime-char-row:last-child {
    border-bottom: none;
}
.anime-detail-wrap .anime-char-row--img-right {
    flex-direction: row-reverse;
}
.anime-detail-wrap .anime-char-media {
    position: relative;
    flex: 0 0 200px;
    width: 200px;
    height: 280px;
    background: #f0ebe3;
    border: 1px solid #e0dbd2;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(42, 42, 42, 0.08);
}
.anime-detail-wrap .anime-char-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.anime-detail-wrap .anime-char-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 900;
    color: #c8c4bc;
    letter-spacing: 4px;
    background: linear-gradient(145deg, #f5f0e8 0%, #e8e2d8 55%, #ded8ce 100%);
}
.anime-detail-wrap .anime-char-media--has-file .anime-char-placeholder {
    display: none;
}
.anime-detail-wrap .anime-char-media--fallback .anime-char-placeholder {
    display: flex;
}
.anime-detail-wrap .anime-char-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 4px;
}
.anime-detail-wrap .anime-char-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 6px;
}
.anime-detail-wrap .anime-char-name {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: normal;
    color: #2a2a2a;
    line-height: 1.2;
}
/* Same “pill” language as .ep-type-badge — light purple for cast/plot warnings */
.anime-detail-wrap .anime-char-spoiler-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: #ede8f4;
    color: #6e5a9a;
    border: 1px solid #cfc4e4;
    flex-shrink: 0;
}
.anime-detail-wrap .anime-char-role {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e8a87c;
}
.anime-detail-wrap .anime-char-bio {
    font-size: 14px;
    line-height: 1.75;
    color: #4a4a4a;
}
@media (max-width: 720px) {
    .anime-detail-wrap .anime-char-row,
    .anime-detail-wrap .anime-char-row--img-right {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 22px 16px;
    }
    .anime-detail-wrap .anime-char-media {
        flex: 0 0 auto;
        width: min(240px, 88vw);
        height: 300px;
    }
    .anime-detail-wrap .anime-char-body {
        padding-top: 0;
    }
}
.anime-detail-wrap .section-title.section-title-pane-bridge::after {
    /* Let .ep-toolbar be the next horizontal rule (same chrome family). */
    display: none;
}
.anime-detail-wrap .section-title.section-title-pane-bridge.section-title-pane-bridge--divider::after {
    display: block;
    border-bottom: 1px solid #ede8df;
    margin-top: -1px;
}

/* Web-only adaptive sizing (site targets 640px+ desktop). Tabs stay inline
   on the left edge of the strip — no scroll, just slightly tighter padding
   at narrower desktop widths. */
@media (max-width: 900px){
    .atab { padding: 12px 16px; font-size: 11px; }
}

/* ── ≤640px: collapse tabs into a "More ▼" dropdown ─────────
   Only the active tab is visible by default with a chevron;
   tap it to expand all tabs as a stacked list. Driven by a
   .open class on .anime-tabs (toggled by the click handler in
   func.js). Same UX language as the anime subnav at ≤640px. */
@media (max-width: 640px){
    .anime-tabs-row { flex-wrap: wrap; }
    .anime-tabs-schedule-link { margin: 0 12px 10px auto; }
    .release-cal-item { grid-template-columns: 1fr; gap: 4px; }
    .anime-tabs { display: block; }
    .anime-tabs .atab { display: none; width: 100%; justify-content: space-between; padding: 12px 18px; }
    .anime-tabs .atab.active {
        display: flex;
        border-bottom: 2px solid #e8a87c;
    }
    .anime-detail-wrap .anime-tabs .atab.active[data-atab="episodes"] {
        background: var(--anime-detail-ep-chrome-bg);
    }
    .anime-detail-wrap .anime-tabs .atab.active[data-atab="reviews"],
    .anime-detail-wrap .anime-tabs .atab.active[data-atab="characters"],
    .anime-detail-wrap .anime-tabs .atab.active[data-atab="community"],
    .anime-detail-wrap .anime-tabs .atab.active[data-atab="downloads"] {
        background: var(--anime-detail-tab-body-bg);
    }
    .anime-tabs .atab.active::after {
        content: '\25BE'; /* ▾ */
        font-size: 11px;
        opacity: 0.7;
        transition: transform .2s;
    }
    .anime-tabs.open .atab {
        display: flex;
        border-bottom: 1px solid #ede8df;
    }
    .anime-tabs.open .atab.active {
        order: -1;
    }
    .anime-tabs.open .atab.active::after {
        transform: rotate(180deg);
    }
}

/* ── ≤900px: anime subnav uses Series dropdown (rules above) ── */

/* ── Hard guarantee: never let .subnav-inner trap the More ▾ dropdown ─
   The 40px-tall flex bar must NEVER clip an absolutely-positioned
   dropdown anchored to .anime-more-wrap. An older mobile media query
   set overflow-x:auto on .subnav-inner, which (per the CSS spec quirk
   where ovX:auto forces ovY:auto too) turned the entire bar into a
   scrollable 40px box and clipped the dropdown into an "iframe-y"
   strip. Declared late in the file so it wins over every media query. */
.subnav-inner,
.subnav-inner.anime-subnav,
#anime-subnav { overflow: visible !important; }

/* Episode list — TMDB still thumbnail (used in includes/anime-detail.php arc episode rows) */
.ep-row-thumb {
    width: 74px;
    height: 46px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    background: #ede8df;
    margin-right: 2px;
    display: block;
}
.ep-row-thumb-placeholder {
    width: 74px;
    height: 46px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f0ebe3 25%, #ede8df 25%, #ede8df 50%, #f0ebe3 50%, #f0ebe3 75%, #ede8df 75%);
    background-size: 8px 8px;
    border-radius: 2px;
    margin-right: 2px;
    opacity: 0.5;
}
@media (max-width: 640px) {
    .ep-row-thumb,
    .ep-row-thumb-placeholder { display: none; }
}

/* ============================================================
   Phase 2 — Reviews surfaces
   Score+Verdict badge, linked-anime callout, homepage rail,
   anime-detail review strip.
   ============================================================ */

/* score + verdict badge — used on article page, anime detail strip, and homepage rail */
.review-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.review-badge-lg {
    margin: 0 0 18px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fdfcf9 0%, #f6f1e8 100%);
    border: 1px solid #ede8df;
    border-left: 3px solid #5b8dd9;
    border-radius: 2px;
}
.review-badge-sm {
    margin: 4px 0 0;
    gap: 6px;
}
.review-badge-score {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1;
}
.review-badge-lg .review-badge-score { font-size: 28px; }
.review-badge-lg .review-badge-score small { font-size: 12px; color: #b8b3aa; font-weight: 400; margin-left: 2px; }
.review-badge-sm .review-badge-score { font-size: 16px; }
.review-badge-sm .review-badge-score small { font-size: 9px; color: #b8b3aa; font-weight: 400; margin-left: 1px; }

.review-badge-verdict {
    display: inline-block;
    padding: 4px 10px;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 2px;
    line-height: 1.2;
}
.review-badge-sm .review-badge-verdict { padding: 3px 7px; font-size: 9px; letter-spacing: 1px; }

.verdict-watch       { background: rgba(80,166,109,0.14); color: #3a8a5a; border: 1px solid rgba(80,166,109,0.3); }
.verdict-skip        { background: rgba(217,79,79,0.14);  color: #b04545; border: 1px solid rgba(217,79,79,0.3); }
.verdict-classic     { background: rgba(217,167,71,0.18); color: #8a6516; border: 1px solid rgba(217,167,71,0.4); }
.verdict-cult        { background: rgba(141,99,179,0.16); color: #6a4a8c; border: 1px solid rgba(141,99,179,0.3); }
.verdict-hidden-gem  { background: rgba(72,166,166,0.16); color: #2a7a7a; border: 1px solid rgba(72,166,166,0.3); }
.verdict-flawed-gem  { background: rgba(217,128,71,0.16); color: #a85a1a; border: 1px solid rgba(217,128,71,0.3); }

/* article page — linked-anime callout (A.5) */
.article-linked-anime {
    display: flex;
    gap: 14px;
    margin: 28px 0 8px;
    padding: 12px;
    background: #fdfcf9;
    border: 1px solid #ede8df;
    border-left: 3px solid #e8a87c;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-left-color 0.15s;
    clear: both;
}
.article-linked-anime:hover {
    background: #f6f1e8;
    border-left-color: #5b8dd9;
}
.article-linked-anime-poster {
    width: 70px;
    height: 100px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ede8df;
    border-radius: 2px;
}
.article-linked-anime-poster-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0ebe3 25%, #ede8df 25%, #ede8df 50%, #f0ebe3 50%, #f0ebe3 75%, #ede8df 75%);
    background-size: 8px 8px;
    font-size: 30px;
    opacity: 0.6;
}
.article-linked-anime-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.article-linked-anime-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #b8b3aa;
    margin-bottom: 4px;
}
.article-linked-anime-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    color: #2a2a2a;
    line-height: 1.2;
    margin-bottom: 4px;
}
.article-linked-anime-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}
.article-linked-anime-cta {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5b8dd9;
}

/* homepage sidebar — Latest Reviews rail (D.1) */
.sidebar-reviews .sidebar-review-row {
    display: flex !important;   /* override .sidebar-box a { display:block } */
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0ebe3;
    border-right: none !important;  /* kill the generic sidebar-box a:hover border */
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.sidebar-reviews .sidebar-review-row:last-child { border-bottom: none; }
.sidebar-reviews .sidebar-review-row:hover {
    background: transparent;
}
.sidebar-reviews .sidebar-review-row:hover .sidebar-review-title { color: #5b8dd9; }

.sidebar-review-poster {
    width: 44px;
    height: 62px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ede8df;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.sidebar-review-poster-placeholder {
    width: 44px;
    height: 62px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0ebe3 25%, #ede8df 25%, #ede8df 50%, #f0ebe3 50%, #f0ebe3 75%, #ede8df 75%);
    background-size: 6px 6px;
    border-radius: 2px;
    font-size: 18px;
    opacity: 0.45;
}
.sidebar-review-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}
.sidebar-review-title {
    font-size: 12px;
    font-family: Georgia, 'Times New Roman', serif;
    color: #2a2a2a;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.15s;
}
.sidebar-review-anime {
    font-size: 10px;
    color: #b8b3aa;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
}
.sidebar-review-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

/* anime detail — Reviews strip (D.2) */
.anime-reviews-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    padding: 14px 20px;
}
.anime-review-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #fdfcf9;
    border: 1px solid #ede8df;
    border-left: 3px solid #5b8dd9;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-left-color 0.15s;
}
.anime-review-card:hover {
    background: #f6f1e8;
    border-left-color: #e8a87c;
}
.anime-review-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.anime-review-card-date {
    font-size: 10px;
    color: #b8b3aa;
    letter-spacing: 0.5px;
}
.anime-review-card-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 1.25;
}
.anime-review-card-excerpt {
    font-size: 11px;
    color: #6a655c;
    line-height: 1.4;
}
.anime-review-card-cta {
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5b8dd9;
}

@media (max-width: 640px) {
    .article-linked-anime { flex-direction: column; }
    .article-linked-anime-poster { width: 100%; height: 180px; }
    .anime-reviews-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   Phase 3 — Screencaps ⇄ Episodes
   Episode-row "X caps" badge + expand-area link, gallery filter
   banner & per-card episode dropdown.
   ============================================================ */

/* anime-detail.php episode rows: small badge in header */
.ep-cap-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: rgba(91,141,217,0.10);
    color: #5b8dd9;
    border: 1px solid rgba(91,141,217,0.25);
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ep-cap-badge:hover {
    background: rgba(91,141,217,0.22);
    color: #fff;
    border-color: #5b8dd9;
}

/* anime-detail.php expanded ep area: "View all X screencaps" link */
.ep-cap-link-wrap {
    display: none;
    padding: 0 20px 14px 62px;
}
.ep-row.open .ep-cap-link-wrap { display: block; }
.ep-cap-link {
    display: inline-block;
    padding: 5px 12px;
    background: #fdfcf9;
    border: 1px solid #ede8df;
    border-left: 2px solid #5b8dd9;
    color: #5b8dd9;
    font-size: 11px;
    letter-spacing: .5px;
    text-decoration: none;
    transition: background 0.15s, border-left-color 0.15s;
}
.ep-cap-link:hover {
    background: #f6f1e8;
    border-left-color: #e8a87c;
    color: #2a2a2a;
}

/* admin Manage Gallery: per-card episode dropdown — matches series select */
.ag-card-episode-select {
    margin-top: 4px;
    border-left-color: #c5b1d6 !important;
}
.ag-card-episode-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-left-color: #d4cfc8 !important;
}

@media (max-width: 640px) {
    .ep-cap-badge { font-size: 9px; padding: 2px 5px; }
}

/* ============================================================
   Phase 4 — FFmpeg Frame Grabber (admin)
   ============================================================ */

.fg-warning {
    margin-top: 6px;
    padding: 10px 14px;
    background: rgba(232, 168, 124, 0.12);
    border: 1px solid #e8a87c;
    border-left: 3px solid #d49060;
    color: #8a4a16;
    font-size: 12px;
    line-height: 1.5;
}
.fg-warning code {
    background: rgba(232, 168, 124, 0.20);
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 11px;
}

.fg-toollet {
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(180, 140, 200, 0.10);
    border: 1px solid #c9aedc;
    border-left: 3px solid #9d6dbf;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.fg-toollet-text {
    flex: 1 1 280px;
    font-size: 12px;
    line-height: 1.5;
    color: #4a2a5a;
}
.fg-toollet-text strong { color: #6a3a8a; }
.fg-toollet em { font-style: normal; color: #6a3a8a; font-weight: 600; }
.fg-dl-marker {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    transform: translateY(1px);
    margin: 0 1px;
}

/* Download ↔ episode link audit (Frame Grabber) */
.fg-audit {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(106, 58, 138, 0.25);
}
.fg-audit-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    color: #4a2a5a;
    line-height: 1.4;
    user-select: none;
}
.fg-audit-summary::-webkit-details-marker { display: none; }
.fg-audit-summary::before {
    content: '▸';
    display: inline-block;
    width: 12px;
    color: #8a857a;
    transition: transform 0.15s ease;
}
.fg-audit[open] > .fg-audit-summary::before {
    transform: rotate(90deg);
}
.fg-audit-summary-title { font-weight: 700; }
.fg-audit-summary-stats {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fg-audit-body {
    margin-top: 10px;
    padding-left: 14px;
}
.fg-audit-lede {
    font-size: 11px;
    color: #6a655c;
    line-height: 1.55;
    margin: 0 0 10px;
}
.fg-audit-rules {
    margin-bottom: 12px;
    font-size: 11px;
    color: #6a655c;
}
.fg-audit-rules > summary {
    cursor: pointer;
    color: #5b8dd9;
    font-weight: 600;
    margin-bottom: 6px;
    list-style: none;
}
.fg-audit-rules > summary::-webkit-details-marker { display: none; }
.fg-audit-rules-list {
    margin: 6px 0 0;
    padding-left: 18px;
    line-height: 1.55;
}
.fg-audit-rules-list li { margin-bottom: 4px; }
.fg-audit-head {
    font-size: 12px;
    color: #4a2a5a;
    line-height: 1.5;
    margin-bottom: 10px;
}
.fg-audit-head strong { display: block; font-size: 13px; margin-bottom: 4px; }
.fg-audit-sub { display: block; font-size: 11px; color: #6a655c; font-weight: 400; }
.fg-audit-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.fg-audit-pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
}
.fg-audit-pill-ok { background: #e8f5ec; color: #2d6a3e; }
.fg-audit-pill-ready { background: #e8eef8; color: #3a5a8a; }
.fg-audit-pill-warn { background: #fff3e8; color: #8a5a2a; }
.fg-audit-pill-muted { background: #f0ebe3; color: #888; }
.fg-audit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 10px;
}
.fg-audit-filter-lbl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6a655c;
    font-weight: 700;
}
.fg-audit-check {
    font-size: 11px;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
}
.fg-audit-hide {
    font-size: 11px;
    color: #5b8dd9;
    text-decoration: none;
    padding-bottom: 6px;
}
.fg-audit-hide:hover { color: #e8a87c; }
.fg-audit-empty {
    font-size: 11px;
    color: #888;
    margin: 0;
}
.fg-audit-table-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #e8e3db;
    background: #fff;
}
.fg-audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.fg-audit-table th {
    position: sticky;
    top: 0;
    background: #f6f1e8;
    text-align: left;
    padding: 6px 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6a655c;
    border-bottom: 1px solid #e8e3db;
}
.fg-audit-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f5f1ec;
    vertical-align: top;
    line-height: 1.45;
}
.fg-audit-id { color: #888; white-space: nowrap; }
.fg-audit-file code {
    display: block;
    font-size: 10px;
    word-break: break-all;
    background: transparent;
    padding: 0;
}
.fg-audit-dl-title { display: block; font-weight: 600; color: #2a2a2a; margin-bottom: 2px; }
.fg-audit-parsed { white-space: nowrap; color: #5b8dd9; font-weight: 600; }
.fg-audit-detail { color: #555; max-width: 340px; }
.fg-audit-st {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
}
.fg-audit-st-linked { background: #e8f5ec; color: #2d6a3e; }
.fg-audit-st-ready { background: #e8eef8; color: #3a5a8a; }
.fg-audit-st-no_parse,
.fg-audit-st-no_episode,
.fg-audit-st-duplicate,
.fg-audit-st-multi_ep,
.fg-audit-st-linked_mismatch,
.fg-audit-st-linked_orphan { background: #fff0e8; color: #8a4a2a; }
.fg-audit-st-linked_drift { background: #f0f4fa; color: #4a5a7a; }

.fg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.fg-field { display: flex; flex-direction: column; }
.fg-field.fg-full { grid-column: 1 / -1; }

.fg-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6a655c;
    font-weight: 700;
    margin-bottom: 4px;
}
.fg-req      { color: #cc5555; margin-left: 2px; }
.fg-optional { color: #b8b3aa; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10px; }

.fg-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d4cfc8;
    border-left: 2px solid #8d63b3;
    background: #fff;
    font-size: 12px;
    color: #2a2a2a;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-left-color 0.15s;
}
.fg-input:focus { border-left-color: #5b8dd9; }
.fg-input:disabled { background: #f6f1e8; color: #b8b3aa; cursor: not-allowed; }
.fg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }

.fg-hint {
    margin-top: 4px;
    font-size: 10.5px;
    color: #888;
    line-height: 1.5;
}
.fg-hint code {
    background: #f0ebe3;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 10px;
}

/* ── Frame Grabber ⇄ anime_downloads cross-link UI ───────────
   Tiny "N downloads on file" badge next to the Source Video
   label, plus the green-tinted "auto-filled / Override" strip
   that flips visible whenever we populate the field. */
.fg-dl-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #4070a0;
    background: rgba(168,196,224,0.18);
    border: 1px solid #c8d8ec;
    padding: 2px 7px;
    border-radius: 10px;
    vertical-align: middle;
}
.fg-detected {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 10px;
    font-size: 11px;
    color: #3a8050;
    background: rgba(80,160,90,0.08);
    border: 1px solid #b8d8be;
    border-left: 2px solid #50a060;
}
.fg-detected[hidden] { display: none; }
.fg-detected-icon { font-size: 13px; line-height: 1; }
.fg-detected-text { flex: 1; }
.fg-detected-text strong { font-weight: 700; }
.fg-detected-scope { color: #6a8870; }
.fg-detected-clear {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #b8d8be;
    color: #3a8050;
    cursor: pointer;
    transition: all .12s;
}
.fg-detected-clear:hover {
    background: #50a060;
    color: #fff;
    border-color: #408050;
}

.fg-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fg-grab-btn { font-size: 13px; padding: 8px 16px; }

.fg-autospread {
    background: #f7f4ec;
    border: 1px dashed #d8cfbe;
    border-radius: 3px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.fg-autospread-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 4px;
}
.fg-autospread-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fg-autospread-cell-lbl {
    font-size: 10px;
    color: #6a655c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fg-input-tiny {
    width: 90px;
    padding: 5px 7px;
    font-size: 12px;
}
.fg-autospread-status {
    font-size: 11px;
    color: #5a553f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    flex: 1 1 100%;
    margin-top: 4px;
}
.fg-status {
    margin-left: 8px;
    font-size: 11px;
    color: #6a655c;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.fg-results {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.fg-result-card {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: #faf8f4;
    border: 1px solid #ede8df;
    border-left: 3px solid #c5b1d6;
    align-items: stretch;
    min-height: 78px;
}
.fg-result-card.fg-result-ok      { border-left-color: #50c878; background: #f6fbf6; }
.fg-result-card.fg-result-fail    { border-left-color: #cc5555; background: #fbf6f6; }
.fg-result-card.fg-result-pending { border-left-color: #c5b1d6; }

.fg-result-thumb {
    width: 96px;
    height: 64px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ede8df;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b3aa;
    font-size: 16px;
}
.fg-result-thumb-link { display: block; flex-shrink: 0; }
.fg-result-thumb-fail { background: rgba(204, 85, 85, 0.10); color: #cc5555; font-size: 22px; }
.fg-result-spinner    { animation: fgPulse 1s ease-in-out infinite; }

@keyframes fgPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

.fg-result-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.fg-result-ts {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #2a2a2a;
    font-weight: 700;
}
.fg-result-ep {
    font-size: 10px;
    color: #5b8dd9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fg-result-status {
    font-size: 10.5px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.fg-result-status-ok   { color: #3a8a5a; }
.fg-result-status-ok a { color: #5b8dd9; text-decoration: none; }
.fg-result-status-ok a:hover { text-decoration: underline; }
.fg-result-status-fail { color: #b04545; }

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

.anime-detail-body {
    padding: 16px 20px;
    color: #3a3a3a;
    font-size: 13px;
    line-height: 1.8;
    background: #fdfcf9;
    border-bottom: 1px solid #ede8df;
}

.anime-info-table {
    padding: 8px 20px;
    border-bottom: 1px solid #ede8df;
}

.anime-info-row {
    display: flex;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px dashed #f0ebe3;
    font-size: 12px;
}

.anime-info-row:last-child { border-bottom: none; }

.anime-info-label {
    width: 90px;
    min-width: 90px;
    color: #b8b3aa;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    padding-top: 2px;
}

.anime-info-value { color: #3a3a3a; }

.anime-forum-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    text-decoration: none;
    background: #fdfcf9;
    border: 1px solid #e0dbd2;
    border-left: 3px solid #5b8dd9;
    transition: background 0.15s;
}

.anime-forum-link:hover { background: rgba(91,141,217,0.04); }

.anime-forum-link strong {
    display: block;
    color: #2a2a2a;
    font-size: 13px;
    margin-bottom: 2px;
}

.anime-forum-link span {
    color: #999;
    font-size: 11px;
}

.anime-forum-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #b8b3aa;
    flex-shrink: 0;
}

/* ============================================================
   BBCODE TOOLBAR — static per-textarea
   ============================================================ */
.bb-editor-wrap {
    border: 1px solid #d4cfc8;
    background: #fff;
}

/* Override any parent textarea:focus rules */
.bb-editor-wrap textarea,
.bb-editor-wrap textarea:focus {
    border: none !important;
    outline: none !important;
    margin-bottom: 0 !important;
}

.bb-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: #f5f0e8;
    border-bottom: 1px solid #e0dbd2;
    flex-wrap: wrap;
}

.bb-toolbar button {
    background: transparent;
    border: 1px solid transparent;
    color: #666;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    border-radius: 2px;
    transition: all 0.1s;
    line-height: 1.4;
}

.bb-toolbar button:hover {
    background: rgba(91,141,217,0.1);
    border-color: #c8c4bc;
    color: #5b8dd9;
}

.bb-toolbar .bb-color-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.bb-toolbar .bb-color-presets {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.bb-toolbar .bb-color-preset {
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

.bb-toolbar .bb-color-preset:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px rgba(91, 141, 217, 0.6);
}

.bb-toolbar .bb-color-preset-light {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.bb-toolbar .bb-color-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1px;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid transparent;
    vertical-align: middle;
    transition: border-color 0.1s, background 0.1s;
}

.bb-toolbar .bb-color-btn:hover {
    background: rgba(91,141,217,0.1);
    border-color: #c8c4bc;
}

.bb-toolbar input[type="color"].bb-color-input {
    width: 26px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: 1px solid #c8c4bc;
    border-radius: 2px;
    cursor: pointer;
    box-sizing: border-box;
    background: #fff;
}

.bb-toolbar input[type="color"].bb-color-input::-webkit-color-swatch-wrapper {
    padding: 1px;
}

.bb-toolbar input[type="color"].bb-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 1px;
}

.bb-sep {
    width: 1px;
    height: 16px;
    background: #d4cfc8;
    margin: 0 3px;
    display: inline-block;
}

.bb-editor-wrap textarea {
    width: 100%;
    display: block;
    padding: 10px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    resize: vertical;
    background: #fff;
    color: #2a2a2a;
    box-sizing: border-box;
    min-height: 80px;
}

/* ============================================================
   MEMBERS PAGE
   ============================================================ */
.members-wrap { padding-bottom: 20px; }

.member-list-wrap { padding: 0; }

.member-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0ebe3;
    transition: background 0.1s;
}

.member-row:last-child { border-bottom: none; }
.member-row:hover { background: rgba(91,141,217,0.03); }

.member-rank {
    width: 28px;
    text-align: center;
    font-size: 11px;
    color: #c8c4bc;
    font-weight: bold;
    flex-shrink: 0;
}

.member-rank:nth-child(1) { color: #e8a87c; }

.member-avatar-cell { flex-shrink: 0; }

.member-info {
    flex: 1;
    min-width: 0;
}

.member-stats {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}

.member-stats strong { color: #5b8dd9; }

.member-last-seen {
    width: 90px;
    text-align: right;
    flex-shrink: 0;
}

/* ============================================================
   ARTICLE — ILLUMINATED MANUSCRIPT LAYOUT
   ============================================================ */
.news-article-body {
    padding: 16px 16px 0;
    line-height: 1.85;
    font-size: 13px;
    color: #2a2a2a;
}

/* The floated author block — sits left, text wraps around */
.article-author-float {
    float: left;
    width: 80px;
    margin: 2px 18px 12px 0;
    text-align: center;
}

.article-author-avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
    margin: 0 auto 6px;
    border-left: 2px solid #c8c4bc;
    border-top: 2px solid #c8c4bc;
}

.article-author-avatar-placeholder {
    width: 80px;
    height: 80px;
    background: #f0ebe3;
    border-left: 2px solid #c8c4bc;
    border-top: 2px solid #c8c4bc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #c8c4bc;
    margin: 0 auto 6px;
}

.article-author-name {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.article-author-name a {
    color: #5b8dd9;
    text-decoration: none;
}

.article-author-name a:hover { color: #e8a87c; }

.article-author-date {
    font-size: 10px;
    color: #b8b3aa;
    letter-spacing: 0.5px;
    border-top: 1px solid #ede8df;
    padding-top: 5px;
    margin-top: 4px;
}

.article-author-tag {
    font-size: 9px;
    color: #e8a87c;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Title flows with content after the float */
.article-title {
    font-size: 22px;
    color: #4a4a4a;
    margin: 0 0 16px 0;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -0.5px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   NEWS FEED — card title link style
   ============================================================ */
.news-feed-title {
    font-size: 18px;
    margin: 0 0 10px 0;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.news-feed-title a {
    color: #5b8dd9;
    text-decoration: none;
    transition: color 0.2s;
}

.news-feed-title a:hover,
.news-feed-title a:active { color: #e8a87c; }

.news-excerpt {
    font-size: 13px;
    color: #555;
    line-height: 1.8;
}

/* Feed teaser: hidden tags are easy to miss with color:inherit; cue the dotted rail in-body */
.news-excerpt-html a.hidden-tag {
    border-bottom-color: rgba(232, 168, 124, 0.5);
}

.news-excerpt-html a.hidden-tag:hover {
    color: #e8a87c;
    border-bottom-color: #e8a87c;
    background: rgba(232, 168, 124, 0.1);
    border-radius: 2px;
}

/* ============================================================
   ARTICLE — INTERNAL COMMENT DIVIDER
   ============================================================ */
.article-comments-header {
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #b8b3aa;
    font-weight: 900;
    border-top: 1px solid #ede8df;
    background: #fff;
}


/* ============================================================
   BBCODE — EXTERNAL LINK & IMAGE FLAGS
   ============================================================ */
.bbcode-ext-flag {
    font-size: 10px;
    opacity: 0.6;
    vertical-align: super;
}

.bbcode-img-external .bbcode-img-warning {
    font-size: 10px;
    color: #b8b3aa;
    padding: 4px 0;
    font-style: italic;
}

.bbcode-img-external .bbcode-img {
    margin-top: 6px;
    display: none;
}

.bbcode-ext-url {
    display: block;
    font-size: 10px;
    color: #b8b3aa;
    font-style: italic;
    word-break: break-all;
    margin-top: 2px;
}

/* ============================================================
   PROFILE — RECENT ACTIVITY
   ============================================================ */
.profile-activity-item {
    border-bottom: 1px solid #f0ebe3;
    padding: 8px 0;
}

.profile-activity-item:last-child { border-bottom: none; }

.profile-activity-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.profile-activity-type {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b8b3aa;
    flex-shrink: 0;
}

.profile-activity-link {
    font-size: 11px;
    color: #5b8dd9;
    text-decoration: none;
    font-weight: bold;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-activity-link:hover { color: #e8a87c; }

.profile-activity-date {
    font-size: 10px;
    color: #c8c4bc;
    flex-shrink: 0;
}

.profile-activity-preview {
    font-size: 12px;
    color: #666;
    font-style: italic;
    line-height: 1.5;
    padding-left: 2px;
}

.profile-bio {
    font-size: 13px;
    color: #3a3a3a;
    line-height: 1.7;
}

/* ============================================================
   HIT COUNTER
   ============================================================ */
.hit-counter {
    font-size: 11px;
    color: #666;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    margin-top: 6px;
    display: inline-block;
}

/* ============================================================
   DOWNLOAD SECTION (anime detail — grid cards, max 5 per row)
   ============================================================ */
.download-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.download-item.download-card.download-card-grid {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fdfcf9;
    border: 1px solid #ede8df;
    border-left: 3px solid #5b8dd9;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.download-item.download-card.download-card-grid:hover {
    background: #faf8f4;
    border-color: #d9d3c8;
    box-shadow: 0 6px 18px rgba(42, 42, 42, 0.06);
}

/* Hero: episode still as backdrop + EP badge + title */
.download-card-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
}

.download-card-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #f0ebe3;
}

.download-card-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.download-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    color: #c8c4bc;
    letter-spacing: 3px;
    background: linear-gradient(145deg, #f0ebe3 0%, #e8e2d8 100%);
}

.download-card-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(15, 14, 12, 0.92) 0%,
        rgba(15, 14, 12, 0.35) 55%,
        rgba(15, 14, 12, 0.15) 100%
    );
    pointer-events: none;
}

.download-card-ep-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    max-width: calc(100% - 16px);
    padding: 4px 9px;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(20, 20, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-card-hero-title {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.download-card-body {
    flex: 1;
    padding: 10px 12px 8px;
    min-height: 0;
}

.download-card-desc {
    margin: 0 0 8px;
    font-size: 11px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.download-item-batch {
    display: inline-block;
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9a9490;
    padding: 2px 7px;
    border: 1px solid #e0dbd2;
    background: rgba(255, 255, 255, 0.7);
}

.download-card-footer {
    padding: 0 12px 12px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.download-btn-block {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.download-btn-block-muted {
    text-align: center;
}

.download-card-footer .download-expires {
    text-align: center;
}

@media (max-width: 1180px) {
    .download-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .download-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .download-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

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

.download-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    border: none;
    font-family: Arial, sans-serif;
}

.download-btn-active {
    background: rgba(91,141,217,0.12);
    border-left: 2px solid #5b8dd9;
    border-top: 2px solid #5b8dd9;
    color: #5b8dd9;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.download-btn-active:hover { background: rgba(91,141,217,0.22); }

.download-btn-buy {
    background: rgba(232,168,124,0.12);
    border-left: 2px solid #e8a87c;
    border-top: 2px solid #e8a87c;
    color: #e8a87c;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.download-btn-buy:hover { background: rgba(232,168,124,0.22); }

.download-btn-locked {
    color: #c8c4bc;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.download-expires {
    font-size: 10px;
    color: #c8c4bc;
    margin-top: 4px;
}

/* ============================================================
   REGISTER FORM
   ============================================================ */
.register-wrap {
    max-width: 420px;
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.register-wrap label {
    display: block;
    color: #5b8dd9;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 14px 0 4px;
}

.register-wrap input {
    width: 100%;
    background: #faf8f4;
    border: 1px solid #d4cfc8;
    border-left: 2px solid #5b8dd9;
    color: #2a2a2a;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.register-wrap input:focus {
    border-left-color: #e8a87c;
    background: #fff;
}

.register-wrap button {
    width: 100%;
    margin-top: 20px;
    background: rgba(91,141,217,0.12);
    border: none;
    border-left: 3px solid #5b8dd9;
    border-top: 3px solid #5b8dd9;
    color: #5b8dd9;
    padding: 10px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    transition: all 0.2s;
}

.register-wrap button:hover { background: rgba(91,141,217,0.22); }

.register-error {
    background: rgba(255,107,107,0.08);
    border-left: 2px solid #ff6b6b;
    color: #ff6b6b;
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 8px;
}

.register-success {
    background: rgba(80,200,120,0.08);
    border-left: 2px solid #50c878;
    color: #50c878;
    padding: 12px;
    text-align: center;
    font-size: 13px;
}

.register-success a { color: #e8a87c; text-decoration: none; }

.register-link {
    text-align: center;
    margin-top: 16px;
    font-size: 11px;
    color: #b8b3aa;
}

.register-link a { color: #e8a87c; text-decoration: none; }

/* ============================================================
   WHO'S ONLINE — inline format
   ============================================================ */
.online-list {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    line-height: 1.6;
}

.online-list a {
    color: #5b8dd9;
    text-decoration: none;
    font-weight: bold;
}

.online-list a:hover { color: #e8a87c; }

.online-dot {
    display: inline;
    color: #6abf7b;
    font-size: 8px;
    margin-right: 2px;
    vertical-align: middle;
}

.online-list a {
    display: inline !important;
    color: #5b8dd9;
    font-weight: bold;
    text-decoration: none;
}

.online-list a:hover { color: #e8a87c; }

.online-guest-divider {
    border-top: 1px solid #ddd8d0;
    margin: 8px 4px;
}

/* ============================================================
   ROLE BADGES — stack below rank badge
   ============================================================ */
.role-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
    margin-top: 4px;
}

.role-badge-admin {
    background: #c0392b;
    color: #fff;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

.role-badge-staff {
    background: #5b8dd9;
    color: #fff;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.role-badge-contributor {
    background: #e8a87c;
    color: #fff;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

/* Forum post author column role badges — smaller, tighter */
.comment-author-col .role-badge {
    display: block;
    margin: 3px 0 0;
    text-align: left;
    font-size: 9px;
    padding: 2px 8px;
}

/* Forum author column — badges left aligned, tight */
.forum-post-author-col .webmaster-label,
.forum-post-author-col .rank-badge,
.forum-post-author-col .role-badge {
    display: block;
    margin-left: 0;
    margin-bottom: 2px;
    text-align: left;
}

/* Forum author column badge tweaks */
.comment-author-col .rank-badge {
    padding: 3px 12px;
    font-size: 9px;
    margin-bottom: 0;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.comment-author-col .webmaster-label {
    font-size: 9px;
    padding: 2px 12px;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.comment-author-col > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.comment-author-col > div[style] {
    margin-top: 0 !important;
}

/* Force both badges to same width in forum author col */
.comment-author-col .webmaster-label,
.comment-author-col .rank-badge,
.comment-author-col .role-badge {
    width: 80px !important;
    text-align: center !important;
    padding: 2px 0 !important;
    margin: 2px auto !important;
    font-size: 9px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Forum post author badges — correct selector */
.forum-post-author .webmaster-label,
.forum-post-author .rank-badge,
.forum-post-author .role-badge {
    width: 80px !important;
    text-align: center !important;
    padding: 2px 0 !important;
    margin: 2px auto !important;
    font-size: 9px !important;
    display: block !important;
    box-sizing: border-box !important;
}


/* ============================================================
   ADMIN PANEL — SOFT PASTEL
   ============================================================
   Warm eggshell whites, muted blue/peach/mint accents.
   .admin-wrap wraps all admin PHP output.
   The site subnav (.subnav) above it is styled via :has().
   ============================================================ */

/* ── Override the site subnav when inside admin context ─────
   Primary styling is .subnav-admin (on the bar itself); these
   rules cover admin-wrap chrome and main column background.  */
.main-content:has(.admin-wrap) .subnav::before {
    clip-path: none;
    background: #fff;
    border-color: #e4dfd8;
    box-shadow: none;
}

.main-content:has(.admin-wrap) .subnav {
    --subnav-slope: 0px;
    margin: -30px -30px 0 -30px;
}

/* ── Admin Wrap ──────────────────────────────────────────── */
.admin-wrap {
    background: #faf9f7;
    color: #3a3633;
    min-height: 600px;
    margin: 0 -30px -30px -30px;
    padding: 25px 30px 30px;
}

/* Body is #242424; keep the main column opaque so negative margins / gaps never show “black holes”. */
.main-content:has(.admin-wrap) {
    background: #f5f0e8;
    min-height: min(100vh, 1200px);
}

/* ── Flash message ──────────────────────────────────────── */
.admin-flash {
    background: #f0faf4;
    border: 1px solid #b8e8cc;
    border-left: 3px solid #7ec8a0;
    color: #4a8a6a;
    padding: 10px 16px;
    font-size: 12px;
    margin-bottom: 20px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

/* ── Section titles ──────────────────────────────────────── */
.admin-wrap .section-title-inner {
    background: #f0eee9;
    color: #a09b94;
    font-size: 9px;
    letter-spacing: 4px;
}

.admin-wrap .section-title::after {
    border-bottom-color: #e4dfd8;
}

.admin-wrap .news-outer {
    border-top-color: #ece8e2;
}

.admin-wrap .news-inner {
    background: #ffffff;
    border: 1px solid #ece8e2;
    border-top: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.admin-wrap .news-body {
    color: #3a3633;
    padding: 14px 18px;
}

/* ── Admin forms (generic) ───────────────────────────────── */
.admin-wrap .admin-form label {
    display: block;
    color: #8a9ab8;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 14px;
    margin-bottom: 5px;
    font-weight: 700;
}

.admin-wrap .admin-form .checkbox-label {
    color: #3a3633;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: normal;
}

.admin-wrap .admin-form input[type="text"],
.admin-wrap .admin-form input[type="number"],
.admin-wrap .admin-form input[type="date"],
.admin-wrap .admin-form input[type="datetime-local"],
.admin-wrap .admin-form input[type="email"],
.admin-wrap .admin-form input[type="password"],
.admin-wrap .admin-form select,
.admin-wrap .admin-form textarea {
    width: 100%;
    background: #faf9f7;
    border: 1px solid #ddd8d0;
    border-left: 2px solid #a8c4e0;
    color: #3a3633;
    padding: 8px 10px;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.15s;
}

.admin-wrap .admin-form input:focus,
.admin-wrap .admin-form select:focus,
.admin-wrap .admin-form textarea:focus {
    border-color: #c8d8ec;
    border-left-color: #e8a87c;
    background: #fff;
}

.admin-wrap .admin-form textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.65;
}

.admin-wrap .admin-form button[type="submit"],
.admin-wrap .admin-form button[name] {
    background: rgba(127,168,212,0.12);
    border: 1px solid #a8c4e0;
    border-left: 3px solid #7fa8d4;
    color: #5a88b8;
    padding: 8px 20px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
    transition: all 0.15s;
}

.admin-wrap .admin-form button[type="submit"]:hover,
.admin-wrap .admin-form button[name]:hover {
    background: rgba(127,168,212,0.22);
}

.admin-wrap .btn-delete {
    background: transparent;
    border: none;
    color: #e0a0a0;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}
.admin-wrap .btn-delete:hover { color: #c06060; }

/* ── Tables (generic admin) ──────────────────────────────── */
.admin-wrap table thead th {
    background: #f5f2ee;
    color: #8a9ab8;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 9px 14px;
    border-bottom: 1px solid #ddd8d0;
    font-weight: 700;
    text-align: left;
}

.admin-wrap table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid #f0ebe3;
    color: #3a3633;
    font-size: 12px;
}

.admin-wrap table tbody tr:hover td {
    background: rgba(127,168,212,0.04);
}

/* ── Links ───────────────────────────────────────────────── */
.admin-wrap a { color: #7fa8d4; text-decoration: none; transition: color 0.15s; }
.admin-wrap a:hover { color: #e8a87c; }

/* ── Manage Anime — hub (episodes, characters, deep links) ─ */
.admin-wrap .admin-ma-hub-intro {
    font-size: 12px;
    color: #6a655c;
    line-height: 1.55;
    margin: 0 0 14px;
    max-width: 820px;
}
.admin-wrap .admin-ma-perf-note {
    font-size: 11px;
    color: #7a756c;
    line-height: 1.5;
    margin: -6px 0 14px;
    max-width: 820px;
    padding: 8px 10px;
    background: #f7f4ee;
    border: 1px solid #e8e2d6;
    border-radius: 3px;
}
.admin-wrap .admin-ma-perf-note code { font-size: 10px; background: #fff; padding: 1px 4px; border-radius: 2px; }
.admin-wrap .admin-ma-focus-banner {
    font-size: 12px;
    color: #4a5a72;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: rgba(91, 141, 217, 0.1);
    border: 1px solid rgba(91, 141, 217, 0.35);
    border-radius: 3px;
    max-width: 820px;
}
.admin-wrap .admin-ma-load-editors {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border: 1px solid #5b8dd9;
    border-radius: 3px;
    background: rgba(91, 141, 217, 0.1);
    color: #3d6bb5;
    text-decoration: none;
    white-space: nowrap;
}
.admin-wrap .admin-ma-load-editors:hover { background: rgba(91, 141, 217, 0.2); color: #2a5080; }

/* Manage Anime — page shell, hub cards, focused workspace */
.admin-wrap .admin-ma-page {
    margin-bottom: 24px;
    padding: 4px 0 20px;
    background: linear-gradient(180deg, #fffefb 0%, #faf8f4 100%);
    border: 1px solid #e8e2d8;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 8px 28px rgba(45, 40, 35, 0.06);
}
.admin-wrap .admin-ma-top-strip {
    margin: 0 16px 12px;
    padding: 0 0 14px;
    border-bottom: 1px solid #ebe4da;
}

/* Manage Anime — Add New Series (collapsed <details> by default) */
.admin-wrap .admin-ma-add-collapse {
    border: 1px solid #e0d8ce;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(45, 40, 35, 0.04);
    overflow: hidden;
}
.admin-wrap .admin-ma-add-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 14px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #faf8f4 0%, #f3efe8 100%);
    border-bottom: 1px solid transparent;
    font-size: 12px;
    color: #3a3633;
    transition: background 0.12s ease;
}
.admin-wrap .admin-ma-add-collapse[open] > .admin-ma-add-summary {
    border-bottom-color: #e4dcd2;
    background: linear-gradient(180deg, #fffefb 0%, #f7f3ec 100%);
}
.admin-wrap .admin-ma-add-summary::-webkit-details-marker,
.admin-wrap .admin-ma-add-summary::marker {
    display: none;
}
.admin-wrap .admin-ma-add-sum-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8a847a;
}
.admin-wrap .admin-ma-add-sum-hint {
    font-size: 11px;
    color: #9a948c;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.admin-wrap .admin-ma-add-summary:hover .admin-ma-add-sum-title {
    color: #5b8dd9;
}
.admin-wrap .admin-ma-add-collapse .news-outer {
    border-top: none;
}
.admin-wrap .admin-ma-add-collapse .news-inner {
    border-top: none;
    border-radius: 0;
    box-shadow: none;
}
.admin-wrap .admin-ma-hub-shell {
    padding: 8px 16px 16px;
    margin: 0 4px;
    background: #fffcf8;
    border: 1px solid #ece6de;
    border-radius: 8px;
    box-shadow: 0 2px 14px rgba(55, 48, 40, 0.04);
}
.admin-wrap .admin-ma-subbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e4dcd2;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.admin-wrap .admin-ma-subbar--focus {
    background: linear-gradient(180deg, #f7f9fd 0%, #eef3fa 100%);
    border-color: #c8d4e8;
}
.admin-wrap .admin-ma-subbar--hub { align-items: baseline; }
.admin-wrap .admin-ma-back-hub {
    font-size: 12px;
    font-weight: 600;
    color: #5b8dd9;
    text-decoration: none;
    white-space: nowrap;
}
.admin-wrap .admin-ma-back-hub:hover { color: #e8a87c; text-decoration: underline; }
.admin-wrap .admin-ma-subbar-title {
    font-size: 15px;
    font-weight: 700;
    color: #2a2a2a;
}
.admin-wrap .admin-ma-subbar-meta { font-size: 11px; color: #888; margin-left: auto; }
.admin-wrap .admin-ma-subbar-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #5b8dd9;
    font-weight: 700;
}
.admin-wrap .admin-ma-subbar-hint { font-size: 11px; color: #777; line-height: 1.45; flex: 1; min-width: 200px; }
.admin-wrap .admin-ma-subbar-hint code { font-size: 10px; background: #fff; padding: 1px 5px; border-radius: 2px; }

.admin-wrap .admin-ma-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
.admin-wrap .admin-ma-card {
    display: flex;
    gap: 16px;
    padding: 16px 16px 18px;
    border: 1px solid #e2dbd2;
    border-left: 4px solid #6b9ad8;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 4px 18px rgba(45, 40, 35, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-wrap .admin-ma-card:hover {
    border-left-color: #e8a87c;
    box-shadow: 0 6px 22px rgba(45, 40, 35, 0.08);
}
.admin-wrap .admin-ma-card-poster {
    flex: 0 0 88px;
    width: 88px;
    align-self: flex-start;
}
.admin-wrap .admin-ma-card-img {
    display: block;
    width: 88px;
    height: 124px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #e6dfcf;
    background: #f0ebe3;
}
.admin-wrap .admin-ma-card-no-cover {
    width: 88px;
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #aaa;
    text-align: center;
    padding: 6px;
    box-sizing: border-box;
    border: 1px dashed #d4cfc8;
    border-radius: 3px;
    background: #faf8f4;
}
.admin-wrap .admin-ma-card-body {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 0 8px 8px 0;
}
.admin-wrap .admin-ma-card-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1.25;
}
.admin-wrap .admin-ma-card-alt {
    margin: 0 0 6px;
    font-size: 11px;
    color: #888;
    line-height: 1.35;
}
.admin-wrap .admin-ma-card-meta { margin: 0 0 4px; font-size: 11px; color: #666; }
.admin-wrap .admin-ma-card-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 9px;
    background: #5b8dd9;
    color: #fff;
    padding: 1px 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 2px;
    vertical-align: middle;
}
.admin-wrap .admin-ma-card-counts {
    margin: 0 0 12px;
    font-size: 11px;
    color: #8a847a;
    letter-spacing: 0.02em;
}
/* Opaque “action card” — same fill in gaps + padding so body (#242424) never shows between controls */
.admin-wrap .admin-ma-card-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px 10px 12px;
    margin-top: 2px;
    background: #f2efe8;
    background-clip: padding-box;
    border: 1px solid #dcd4c8;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 1px 2px rgba(45, 40, 35, 0.05);
}
.admin-wrap .admin-ma-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9px 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #3d4d66;
    text-decoration: none;
    border: 1px solid #d2c9be;
    border-radius: 5px;
    background: #fff;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(45, 40, 35, 0.06);
    border-left: 3px solid #b8c4d4;
    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease,
        color 0.12s ease;
}
.admin-wrap .admin-ma-card-btn:hover {
    border-color: #a8bdd4;
    border-left-color: #5b8dd9;
    background: #fafcfe;
    color: #2a5080;
    box-shadow: 0 2px 6px rgba(45, 40, 35, 0.08);
}
.admin-wrap .admin-ma-card-btn-primary {
    padding: 11px 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #fff;
    border: 1px solid #4a6fa8;
    border-left-width: 1px;
    border-left-color: #3d5d8c;
    background: linear-gradient(180deg, #5f8bc9 0%, #4a6fa8 55%, #3d5d8c 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 6px rgba(45, 70, 110, 0.25);
}
.admin-wrap .admin-ma-card-btn-primary:hover {
    color: #fff;
    border-color: #3d5d8c;
    border-left-color: #2d4a72;
    background: linear-gradient(180deg, #6b96d4 0%, #527bb5 55%, #456899 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 3px 10px rgba(45, 70, 110, 0.28);
}

.admin-wrap .admin-ma-editor-wrap {
    padding: 20px 20px 22px;
    border: 1px solid #e0d8ce;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 22px rgba(45, 40, 35, 0.06);
}
.admin-wrap .admin-ma-anchor-block { scroll-margin-top: 14px; }

@media (max-width: 520px) {
    .admin-wrap .admin-ma-card { flex-direction: column; align-items: stretch; }
    .admin-wrap .admin-ma-card-poster { flex-basis: auto; width: 100%; max-width: 120px; margin: 0 auto; }
}

.admin-wrap .admin-ma-quicklinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 14px;
    padding: 10px 12px;
    background: #faf8f4;
    border: 1px solid #ede8df;
    border-radius: 2px;
}
.admin-wrap .admin-ma-ql-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #b8b3aa;
}
.admin-wrap .admin-ma-ql {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #5b8dd9;
    text-decoration: none;
}
.admin-wrap .admin-ma-ql:hover { color: #e8a87c; text-decoration: underline; }

.admin-wrap .admin-ma-panel {
    margin-top: 10px;
    border: 1px solid #e0dbd2;
    border-radius: 2px;
    background: #fff;
}
.admin-wrap .admin-ma-panel-sum {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #5b8dd9;
    background: #fdfcf9;
    border-bottom: 1px solid transparent;
}
.admin-wrap .admin-ma-panel[open] > .admin-ma-panel-sum {
    border-bottom-color: #ede8df;
}
.admin-wrap .admin-ma-panel-sum::-webkit-details-marker { display: none; }
.admin-wrap .admin-ma-panel-sum::marker { content: ''; }
.admin-wrap .admin-ma-count {
    font-weight: 600;
    color: #b8b3aa;
    letter-spacing: 0;
}
.admin-wrap .admin-ma-panel-body {
    padding: 12px 14px 14px;
}
.admin-wrap .admin-ma-muted {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
    margin: 0 0 10px;
}
.admin-wrap .admin-ma-warn {
    font-size: 12px;
    color: #b07538;
    margin: 0;
}
.admin-wrap .admin-ma-ep-scroll {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #ede8df;
    border-radius: 2px;
    background: #fafaf8;
}
.admin-wrap .admin-ma-ep {
    border-bottom: 1px solid #ede8df;
}
.admin-wrap .admin-ma-ep:last-child { border-bottom: none; }
.admin-wrap .admin-ma-ep-sum {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 12px;
    color: #2a2a2a;
    background: #fff;
}
.admin-wrap .admin-ma-ep-sum::-webkit-details-marker { display: none; }
.admin-wrap .admin-ma-ep-sum::marker { content: ''; }
.admin-wrap .admin-ma-ep[open] > .admin-ma-ep-sum {
    background: #f5f2ee;
    border-bottom: 1px solid #ede8df;
}
.admin-wrap .admin-ma-ep-num {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #b8b3aa;
}
.admin-wrap .admin-ma-ep-title { flex: 1 1 auto; min-width: 0; }
.admin-wrap .admin-ma-ep-badge {
    font-size: 9px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    background: rgba(91,141,217,0.12);
    color: #5b8dd9;
    border: 1px solid rgba(91,141,217,0.25);
}
.admin-wrap .admin-ma-ep-form {
    padding: 12px 12px 14px;
    background: #fff;
}
.admin-wrap .admin-ma-ep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 12px;
}
.admin-wrap .admin-ma-span2 { grid-column: 1 / -1; }
.admin-wrap .admin-ma-span3 { grid-column: 1 / -1; }
.admin-wrap .admin-ma-ch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 120px;
    gap: 10px 12px;
    margin-bottom: 10px;
}
@media (max-width: 720px) {
    .admin-wrap .admin-ma-ch-grid { grid-template-columns: 1fr; }
}
.admin-wrap .admin-ma-btn-save,
.admin-wrap .admin-ma-btn-add {
    background: rgba(91,141,217,0.18);
    border: 1px solid #5b8dd9;
    color: #3d6cb0;
    padding: 7px 16px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 2px;
}
.admin-wrap .admin-ma-btn-add {
    margin-top: 4px;
}
.admin-wrap .admin-ma-ch {
    border: 1px solid #ede8df;
    border-radius: 2px;
    margin-bottom: 8px;
    background: #fff;
}
.admin-wrap .admin-ma-ch-sum {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #2a2a2a;
    background: #fdfcf9;
}
.admin-wrap .admin-ma-ch-sum::-webkit-details-marker { display: none; }
.admin-wrap .admin-ma-ch-sum::marker { content: ''; }
.admin-wrap .admin-ma-ch[open] > .admin-ma-ch-sum {
    border-bottom: 1px solid #ede8df;
}
.admin-wrap .admin-ma-ch-form { padding: 12px; }
.admin-wrap .admin-ma-ch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.admin-wrap .admin-ma-ch-add {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #ede8df;
}
.admin-wrap .admin-ma-ch-add-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a8478;
    margin-bottom: 8px;
}

/* ── Code blocks ─────────────────────────────────────────── */
.admin-wrap pre {
    background: #f5f2ee !important;
    color: #5a7a5a !important;
    border-left-color: #7ec8a0 !important;
}

/* ============================================================
   MANAGE GALLERY — ag-* component classes
   ============================================================ */

/* Sync bar */
.ag-sync-bar {
    padding: 14px 18px !important;
    margin-bottom: 16px;
}

.ag-sync-label {
    font-size: 10px;
    font-weight: 700;
    color: #8a9ab8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ag-sync-tools {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.ag-sync-form {
    flex: 1;
    min-width: 240px;
    background: #faf9f7;
    padding: 12px;
    border: 1px solid #ece8e2;
    margin: 0;
}

.ag-tool-hint {
    font-size: 10px;
    color: #a09b94;
    line-height: 1.5;
    margin-top: 6px;
}

.ag-tool-hint code {
    background: rgba(127,168,212,0.1);
    color: #7fa8d4;
    padding: 1px 4px;
    font-size: 10px;
}

/* Shared button base */
.ag-btn {
    display: inline-block;
    padding: 7px 14px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
    transition: all 0.15s;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.ag-btn-blue {
    background: rgba(127,168,212,0.1);
    border-color: #a8c4e0;
    border-left-width: 2px;
    border-left-color: #7fa8d4;
    color: #5a88b8;
    width: 100%;
    margin-bottom: 0;
}
.ag-btn-blue:hover { background: rgba(127,168,212,0.2); }

.ag-btn-red {
    background: rgba(220,150,150,0.08);
    border-color: #e0a0a0;
    border-left-width: 2px;
    border-left-color: #cc8888;
    color: #b06060;
    width: 100%;
}
.ag-btn-red:hover { background: rgba(220,150,150,0.16); }

.ag-btn-red-outline {
    background: transparent;
    border-color: #e0a0a0;
    color: #b06060;
}
.ag-btn-red-outline:hover { background: rgba(220,150,150,0.1); }

.ag-btn-green {
    background: rgba(126,200,160,0.12);
    border-color: #9ed8b8;
    border-left-width: 2px;
    border-left-color: #7ec8a0;
    color: #4a8a6a;
}
.ag-btn-green:hover { background: rgba(126,200,160,0.22); }

.ag-btn-orange {
    background: #e8a87c;
    border-color: #e8a87c;
    color: #fff;
}
.ag-btn-orange:hover { background: #d49060; border-color: #d49060; }

.ag-btn-purple {
    background: rgba(141,99,179,0.10);
    border-color: #c5b1d6;
    border-left-width: 2px;
    border-left-color: #8d63b3;
    color: #6a4a8c;
}
.ag-btn-purple:hover { background: rgba(141,99,179,0.20); }

/* Type filter tabs */
.ag-type-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #ddd8d0;
    margin-bottom: 16px;
}

.ag-tab {
    padding: 9px 18px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #a09b94 !important;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ag-tab:hover { color: #3a3633 !important; background: rgba(0,0,0,0.02); }

.ag-tab-active {
    color: #7fa8d4 !important;
    border-bottom-color: #7fa8d4;
}

.ag-tab-count {
    font-size: 8px;
    background: rgba(127,168,212,0.12);
    color: #7fa8d4;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: normal;
    letter-spacing: 0;
}

.ag-tab-active .ag-tab-count {
    background: rgba(127,168,212,0.2);
}

/* Main panel */
.ag-panel {
    padding: 18px 20px !important;
}

/* Filters */
.ag-filters {
    background: #f8f6f2;
    border: 1px solid #ece8e2;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.ag-filters-label {
    font-size: 9px;
    font-weight: 700;
    color: #8a9ab8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ag-filters-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0;
}

.ag-filter-field {
    flex: 2;
    min-width: 180px;
}

.ag-filter-field label {
    display: block;
    font-size: 9px;
    color: #8a9ab8;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 700;
}

.ag-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd8d0;
    font-size: 11px;
    outline: none;
    background: #fff;
    color: #3a3633;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.ag-select-orange { border-left: 2px solid #e8a87c; }
.ag-select-green  { border-left: 2px solid #7ec8a0; }
.ag-select-blue   { border-left: 2px solid #7fa8d4; }

.ag-select:focus { border-color: #c8d8ec; }

.ag-clear-btn {
    padding: 6px 12px;
    background: #f5f2ee;
    border: 1px solid #ddd8d0;
    color: #a09b94 !important;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: flex-end;
    transition: all 0.15s;
}
.ag-clear-btn:hover { color: #3a3633 !important; border-color: #b8b3aa; }

/* Folder assign bar */
.ag-folder-assign {
    background: #fffaf4;
    border: 1px solid #f0d8b8;
    border-left: 3px solid #e8a87c;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ag-folder-assign-label {
    font-size: 9px;
    font-weight: 700;
    color: #c08040;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ag-folder-assign-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    margin: 0;
}

.ag-filter-field-actions { align-self: flex-end; }

.ag-last-edited {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #f5f8ff;
    border: 1px solid #d4e0f5;
    border-left: 3px solid #5b8dd9;
    font-size: 12px;
    color: #4a5568;
}

.ag-last-edited-current {
    background: #fffaf4;
    border-color: #f0d8b8;
    border-left-color: #e8a87c;
}

.ag-last-edited-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #5b8dd9;
}

.ag-last-edited-link {
    color: #2a5080;
    text-decoration: none;
}

.ag-last-edited-link:hover { text-decoration: underline; }

.ag-last-edited-at {
    color: #888;
    font-size: 11px;
}

.ag-last-edited-resume {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #5b8dd9;
    text-decoration: none;
}

.ag-last-edited-here {
    font-size: 10px;
    color: #c08040;
    font-style: italic;
}

.ag-nav-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #faf8f4;
    border: 1px solid #ede8df;
    border-left: 3px solid #5b8dd9;
}

.ag-nav-strip-series { border-left-color: #e8a87c; }

.ag-nav-arrow {
    font-size: 11px;
    font-weight: 600;
    color: #5b8dd9;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 8px;
}

.ag-nav-arrow:hover { color: #2a5080; background: rgba(91, 141, 217, 0.08); }

.ag-folder-nav-form {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

button.ag-folder-nav-btn.ag-nav-arrow {
    font-size: 11px;
    font-weight: 600;
    color: #5b8dd9;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 3px;
    line-height: 1.3;
}

button.ag-folder-nav-btn.ag-nav-arrow:hover {
    color: #2a5080;
    background: rgba(91, 141, 217, 0.12);
}

.ag-nav-pos {
    font-size: 10px;
    font-weight: 600;
    color: #5b8dd9;
    letter-spacing: 0.02em;
}

.ag-nav-form {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.ag-nav-form-inline {
    display: block;
    margin: 0 auto 2px;
}

button.ag-nav-arrow,
button.ag-nav-all {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

button.ag-nav-all {
    font-size: 10px;
    color: #888;
    text-decoration: underline;
    padding: 0;
}

button.ag-nav-all:hover { color: #5b8dd9; }

.ag-nav-disabled {
    color: #c4bdb0;
    cursor: default;
    padding: 4px 8px;
    font-size: 11px;
}

.ag-nav-center {
    flex: 1;
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ag-nav-all {
    font-size: 10px;
    color: #888;
    text-decoration: none;
}

.ag-nav-all:hover { color: #5b8dd9; }

.ag-nav-title {
    font-size: 12px;
    font-weight: 700;
    color: #2a2a2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-nav-meta { font-size: 10px; color: #888; }

.ag-nav-dates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    font-size: 10px;
    color: #6a8f6a;
    margin-top: 2px;
}

.ag-nav-updated { font-weight: 600; color: #4a7a4a; }

.ag-nav-created { color: #888; }

.ag-nav-dates-none { color: #b0a898; font-style: italic; font-weight: 400; }

.ag-folder-browser-hint {
    font-size: 11px;
    color: #888;
    margin: 0 0 10px;
    line-height: 1.45;
}

.ag-folder-quick-hint {
    font-size: 11px;
    color: #888;
    margin: 0 0 12px;
    padding: 8px 10px;
    background: #faf8f4;
    border-left: 3px solid #e8a87c;
}

.ag-folder-browser { margin-bottom: 16px; }

.ag-folder-browser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ag-folder-browser-title {
    font-size: 13px;
    font-weight: 700;
    color: #5b8dd9;
    margin: 0;
}

.ag-folder-search {
    width: 100%;
    max-width: 420px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.ag-folder-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 65vh;
    overflow-y: auto;
    border: 1px solid #ede8df;
    background: #fff;
}

.ag-folder-list-item {
    border-bottom: 1px solid #f0ebe3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.ag-folder-list-item-last {
    background: #fffaf4;
    border-left: 3px solid #e8a87c;
}

.ag-folder-list-link {
    flex: 1;
    min-width: 200px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: #3a3633;
}

.ag-folder-list-link:hover { background: rgba(91, 141, 217, 0.06); }

.ag-folder-list-name {
    font-size: 12px;
    font-weight: 600;
    word-break: break-all;
}

.ag-folder-list-count {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
}

.ag-folder-list-edited {
    font-size: 10px;
    color: #c08040;
    padding: 0 14px 8px 17px;
}

/* Manage Gallery workspace (sidebar + inspector) */
.ag-workspace {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 12px;
    min-height: 420px;
}

.ag-workspace-main {
    flex: 1;
    min-width: 0;
}

.ag-workspace-panel {
    border-left: none;
}

.ag-sidebar {
    flex: 0 0 260px;
    max-width: 260px;
    background: #faf8f5;
    border: 1px solid #ece8e2;
    border-right: none;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    position: sticky;
    top: 8px;
}

.ag-sidebar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 12px 6px;
    border-bottom: 1px solid #ece8e2;
}

.ag-sidebar-title {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.ag-sidebar-count {
    font-size: 10px;
    color: #aaa;
}

.ag-sidebar-search {
    margin: 8px 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    font-size: 12px;
}

.ag-sidebar-sort {
    display: flex;
    gap: 4px;
    padding: 0 10px 8px;
}

.ag-sidebar-sort-btn {
    flex: 1;
    font-size: 10px;
    padding: 4px 6px;
    border: 1px solid #e0dbd3;
    background: #fff;
    cursor: pointer;
    color: #666;
}

.ag-sidebar-sort-btn.ag-sidebar-sort-active {
    background: #5b8dd9;
    border-color: #5b8dd9;
    color: #fff;
}

.ag-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.ag-sidebar-item {
    border-bottom: 1px solid #f0ebe3;
}

.ag-sidebar-item-active .ag-sidebar-link {
    background: rgba(91, 141, 217, 0.12);
    border-left: 3px solid #5b8dd9;
}

.ag-sidebar-item-resume .ag-sidebar-link {
    background: #fffaf4;
}

.ag-sidebar-link {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: #3a3633;
}

.ag-sidebar-link:hover {
    background: rgba(91, 141, 217, 0.06);
}

.ag-sidebar-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    word-break: break-all;
    line-height: 1.3;
}

.ag-sidebar-meta {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 3px;
    font-size: 9px;
    color: #999;
}

.ag-sidebar-edited {
    color: #c08040;
    white-space: nowrap;
}

.ag-sidebar-empty {
    padding: 12px;
    font-size: 12px;
    color: #999;
}

/* Flex row: thumb grid (grows with each row of cards) | inspector column */
.ag-workspace-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-top: 4px;
    overflow: visible;
}

.ag-grid-area {
    flex: 1;
    min-width: 0;
}

.ag-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.ag-card-compact {
    cursor: pointer;
}

.ag-card-compact.ag-card-selected {
    outline: 2px solid #5b8dd9;
    outline-offset: -2px;
    box-shadow: 0 0 0 1px rgba(91, 141, 217, 0.35);
}

.ag-card-compact .ag-card-thumb,
.ag-card-compact .ag-card-missing {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ag-card-body-compact {
    padding: 4px 6px 6px;
}

.ag-card-caption-mini {
    font-size: 9px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-card-still-btn-mini {
    font-size: 9px;
    padding: 2px 4px;
    margin-top: 2px;
}

.ag-inspector {
    flex: 0 0 300px;
    max-width: 300px;
    width: 300px;
    align-self: flex-start;
    position: sticky;
    top: 72px;
    z-index: 30;
    box-sizing: border-box;
}

.ag-inspector-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    background: #fff;
    border: 1px solid #ece8e2;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.ag-inspector-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0ebe3;
    background: #faf8f5;
    flex-shrink: 0;
}

.ag-inspector-head-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ag-inspector-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-weight: 700;
}

.ag-inspector-counter {
    font-size: 10px;
    color: #aaa;
}

.ag-inspector-toolbar {
    flex-shrink: 0;
    padding: 8px 12px;
    background: #faf8f5;
    border-bottom: 1px solid #f0ebe3;
}

.ag-inspector-toolbar-bottom {
    border-bottom: none;
    border-top: 1px solid #f0ebe3;
}

.ag-inspector-toolbar .ag-insp-del-selected {
    width: 100%;
    font-size: 9px;
    padding: 5px 8px;
}

.ag-inspector-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ag-inspector-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    min-height: 0;
}

.ag-inspector-empty {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    padding: 12px;
}

.ag-inspector-empty-hint {
    font-size: 11px;
    color: #bbb;
    margin-top: 8px;
}

.ag-inspector-preview-wrap {
    position: relative;
    background: #1a1a1a;
    margin-bottom: 8px;
}

.ag-inspector-preview {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    margin: 0 auto;
}

.ag-inspector-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 28px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.ag-inspector-nav:hover {
    background: rgba(232,168,124,0.75);
}

.ag-inspector-nav-prev { left: 0; }
.ag-inspector-nav-next { right: 0; }

.ag-inspector-expand {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 11px;
    padding: 5px;
    border: 1px solid #e0dbd3;
    background: #faf8f5;
    cursor: pointer;
    color: #666;
}

.ag-inspector-filename {
    font-size: 9px;
    color: #aaa;
    word-break: break-all;
    margin-bottom: 10px;
}

.ag-insp-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
    margin: 8px 0 3px;
}

.ag-insp-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 7px 10px;
    border: 1px solid #ddd8d0;
    border-radius: 3px;
    background: #fff;
    color: #3a3633;
}

.ag-insp-input:focus {
    border-color: #5b8dd9;
    outline: none;
    box-shadow: 0 0 0 2px rgba(91, 141, 217, 0.18);
}

.ag-insp-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
    line-height: 1.3;
}

.ag-insp-select:hover {
    border-color: #c8c0b4;
}

.ag-insp-trash-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e8c4c4;
    background: #fff5f5;
    color: #c05050;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-insp-trash-btn:hover {
    background: #fde8e8;
    border-color: #d08080;
    color: #a03030;
}

.ag-insp-trash-icon {
    font-size: 15px;
    line-height: 1;
}

.ag-card-trash-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 11;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: rgba(20, 18, 14, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}

.ag-card-compact:hover .ag-card-trash-btn,
.ag-list-row:hover .ag-card-trash-btn,
.ag-card-trash-btn:focus {
    opacity: 1;
}

.ag-card-trash-btn:hover {
    background: #c05050;
}

.ag-list-row {
    position: relative;
}

.ag-list-trash-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.55;
}

.ag-list-row:hover .ag-list-trash-btn {
    opacity: 1;
}

.ag-card-pending-delete {
    outline: 2px dashed #c05050 !important;
    outline-offset: -2px;
    opacity: 0.85;
}

.ag-card-undo-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(24, 20, 16, 0.78);
    color: #fff;
    text-align: center;
    padding: 8px;
    pointer-events: auto;
}

.ag-card-undo-msg {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ag-card-undo-btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid #e8a87c;
    background: #fff;
    color: #a85820;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ag-card-undo-btn:hover {
    background: #fff4e8;
}


.ag-insp-status-undo {
    background: #fff8e8;
    border: 1px solid #e8d4a8;
    padding: 6px 8px;
    border-radius: 3px;
    color: #6a5530;
}

.ag-insp-undo-btn {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid #e8a87c;
    background: #fff;
    color: #a85820;
    cursor: pointer;
    border-radius: 2px;
}

.ag-insp-undo-btn:hover {
    background: #fff4e8;
}

.ag-insp-hint-btn {
    margin-top: 4px;
    font-size: 10px;
    padding: 3px 6px;
    cursor: pointer;
    border: 1px solid #e0dbd3;
    background: #faf8f5;
}

.ag-inspector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.ag-inspector-actions .ag-btn {
    flex: 1;
    min-width: 72px;
    font-size: 9px;
    padding: 4px 6px;
    line-height: 1.25;
}

.ag-insp-status {
    font-size: 11px;
    margin-top: 8px;
    min-height: 16px;
}

.ag-insp-status-ok { color: #3a8a50; }
.ag-insp-status-err { color: #c05050; }

.ag-inspector-shortcuts {
    margin-top: 10px;
    font-size: 9px;
    color: #bbb;
}

.ag-sidebar-filter-meta {
    display: block;
    font-size: 10px;
    color: #999;
    padding: 0 10px 6px;
    min-height: 14px;
}

.ag-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 8px;
    padding: 8px 10px;
    background: #f8f6f2;
    border: 1px solid #ece8e2;
}

.ag-queue-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ag-queue-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin-right: 4px;
}

.ag-queue-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    color: #5a554c;
    background: #fff;
    border: 1px solid #e0dbd3;
}

.ag-queue-pill:hover {
    border-color: #c8c0b4;
    color: #3a3633;
}

.ag-queue-pill-active {
    background: #5b8dd9;
    border-color: #5b8dd9;
    color: #fff;
}

.ag-queue-count {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.85;
}

.ag-view-toggle {
    display: flex;
    gap: 0;
    border: 1px solid #e0dbd3;
}

.ag-view-btn {
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    color: #666;
    background: #fff;
    border-right: 1px solid #e0dbd3;
}

.ag-view-btn:last-child { border-right: none; }

.ag-view-btn-active {
    background: #e8a87c;
    color: #fff;
}

.ag-queue-active-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 10px;
}

.ag-list {
    border: 1px solid #ece8e2;
    background: #fff;
}

.ag-list-head,
.ag-list-row {
    display: grid;
    grid-template-columns: 28px 52px 1fr 140px 120px;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
}

.ag-list-head {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #aaa;
    background: #faf8f5;
    border-bottom: 1px solid #ece8e2;
}

.ag-list-row {
    border-bottom: 1px solid #f5f2ec;
    cursor: pointer;
}

.ag-list-row:hover {
    background: rgba(91, 141, 217, 0.05);
}

.ag-list-row.ag-card-selected {
    background: rgba(91, 141, 217, 0.12);
    outline: 1px solid #5b8dd9;
    outline-offset: -1px;
}

.ag-list-thumb {
    width: 48px;
    height: 36px;
    object-fit: cover;
    display: block;
}

.ag-list-caption {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-list-series {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-list-file {
    font-size: 9px;
    color: #bbb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1100px) {
    .ag-workspace {
        flex-direction: column;
    }
    .ag-sidebar {
        flex: none;
        max-width: none;
        width: 100%;
        max-height: 220px;
        position: static;
        border-right: 1px solid #ece8e2;
    }
    .ag-workspace-body {
        flex-direction: column;
    }
    .ag-inspector {
        flex: none;
        max-width: none;
        width: 100%;
        position: static;
    }

    .ag-inspector-panel {
        max-height: none;
    }
}

/* Upload bar */
.ag-upload-bar {
    background: #f8f6f2;
    border: 1px solid #ece8e2;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.ag-upload-label {
    font-size: 9px;
    font-weight: 700;
    color: #8a9ab8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ag-upload-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin: 0;
}

.ag-upload-field { display: flex; flex-direction: column; }
.ag-upload-field label {
    font-size: 9px;
    color: #8a9ab8;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 700;
}

.ag-upload-field-grow { flex: 1; min-width: 160px; }
.ag-upload-field-wide { flex: 2; min-width: 200px; }

.ag-input {
    padding: 6px 8px;
    border: 1px solid #ddd8d0;
    border-left: 2px solid #a8c4e0;
    font-size: 11px;
    outline: none;
    background: #fff;
    color: #3a3633;
    width: 100%;
    box-sizing: border-box;
}

.ag-file-input {
    font-size: 11px;
    color: #6a6460;
    width: 100%;
}

.ag-upload-submit { align-self: flex-end; }

/* Bulk action bar */
.ag-bulk-bar {
    background: #f5f2ee;
    border: 1px solid #e4dfd8;
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ag-bulk-select-all {
    font-size: 11px;
    color: #3a3633;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ag-bulk-selected-count {
    font-size: 11px;
    font-weight: 600;
    color: #5b8dd9;
    white-space: nowrap;
}

.ag-bulk-divider {
    width: 1px;
    height: 20px;
    background: #ddd8d0;
    flex-shrink: 0;
}

.ag-bulk-caption-input {
    flex: 1;
    min-width: 180px;
    padding: 6px 10px;
    font-size: 11px;
    border: 1px solid #ddd8d0;
    border-left: 2px solid #a8c4e0;
    background: #fff;
    color: #3a3633;
    outline: none;
}

/* Gallery grid */
.ag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.ag-empty {
    color: #a09b94;
    font-size: 13px;
    padding: 20px 0;
}

/* Gallery card */
.ag-card {
    background: #fff;
    border: 1px solid #ece8e2;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.15s;
}

.ag-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.ag-card-check {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.ag-card-thumb {
    width: 100%;
    height: 115px;
    object-fit: cover;
    display: block;
}

.ag-card-missing {
    width: 100%;
    height: 115px;
    background: #f8dada;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c06060;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}

.ag-card-body {
    padding: 8px 10px 10px;
}

.ag-card-series {
    font-size: 9px;
    color: #b8b3aa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-card-caption-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.ag-card-caption-input {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    padding: 3px 6px;
    border: 1px solid #ddd8d0;
    border-left: 2px solid #e8a87c;
    outline: none;
    box-sizing: border-box;
    background: #faf9f7;
    color: #3a3633;
    transition: border-color 0.15s;
}
.ag-card-caption-input:focus { border-color: #f0c898; background: #fff; }

.ag-card-save-btn {
    font-size: 8px;
    padding: 3px 8px;
    cursor: pointer;
    border: 1px solid #e8a87c;
    color: #c08040;
    background: rgba(232,168,124,0.08);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: all 0.15s;
}
.ag-card-save-btn:hover { background: rgba(232,168,124,0.18); }

.ag-card-series-select {
    width: 100%;
    font-size: 11px;
    padding: 3px 6px;
    border: 1px solid #ddd8d0;
    border-left: 2px solid #a8c4e0;
    outline: none;
    background: #faf9f7;
    color: #3a3633;
    box-sizing: border-box;
    margin-bottom: 6px;
    transition: border-color 0.15s;
}
.ag-card-series-select:focus { border-color: #c8d8ec; background: #fff; }

.ag-card-delete-btn {
    width: 100%;
    font-size: 8px;
    padding: 4px 8px;
    cursor: pointer;
    border: 1px solid #e8c8c8;
    color: #b07070;
    background: rgba(220,160,160,0.06);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.15s;
}
.ag-card-delete-btn:hover { background: rgba(220,160,160,0.14); border-color: #cc9090; color: #903030; }

/* ============================================================
   GALLERY V2 — read-only card + lazy edit panel + pagination
   ------------------------------------------------------------
   Phase B1+B2+B4 of the gallery overhaul. Cards now render a
   compact read-only header (series + caption) and defer the
   <select> dropdowns until the Edit button is clicked. Saves
   thousands of <option> nodes per page render.
   ============================================================ */

/* Read-only caption shown by default on each card. Click Edit to swap
   it for the input + Save button. Single-line ellipsis to keep card
   height predictable across 60 items per page. */
.ag-card-caption-display {
    font-size: 11px;
    color: #5a5550;
    line-height: 1.3;
    margin-bottom: 8px;
    min-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ag-card-caption-empty {
    color: #c4bdb0;
    font-style: italic;
}

/* Action row: Edit + Delete side-by-side. Replaces the always-mounted
   selects and per-row delete button stack. */
.ag-card-actions {
    display: flex;
    gap: 6px;
}
.ag-card-edit-btn,
.ag-card-actions .ag-card-delete-btn {
    flex: 1;
    width: auto; /* override the legacy 100% on .ag-card-delete-btn */
}
.ag-card-edit-btn {
    font-size: 8px;
    padding: 4px 8px;
    cursor: pointer;
    border: 1px solid #c8d8ec;
    color: #4070a0;
    background: rgba(168,196,224,0.08);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.15s;
}
.ag-card-edit-btn:hover {
    background: rgba(168,196,224,0.18);
    border-color: #a8c4e0;
    color: #205070;
}
.ag-card-edit-btn-active {
    background: #a8c4e0;
    color: #fff;
    border-color: #88a8c8;
}

/* Lazy-built editor panel — empty until first Edit click. Hidden via
   the [hidden] attribute when collapsed; no transition needed since
   the swap is instantaneous and feels snappier without animation. */
.ag-card-edit-panel {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ece8e2;
}
.ag-card-edit-panel[hidden] { display: none; }

/* ── Pagination ──────────────────────────────────────────────
   Visual language matches .ag-type-tabs: uppercase tiny font,
   subtle border, peach accent for current page. Cream background
   so it sits on the white .news-inner panel without looking like
   a system-default chunk of links. */
.ag-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 10px;
    color: #6a655c;
    background: #faf6ee;
    border: 1px solid #ece8e2;
    border-left: 2px solid #e8a87c;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.ag-pagination-bottom {
    margin-top: 16px;
    margin-bottom: 0;
}
.ag-pagination-info { color: #6a655c; font-weight: 600; }
.ag-pagination-info strong { color: #3a3633; font-weight: 700; }

.ag-pagination-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    /* Override global `nav { background:#111 }` (the site header) which
       otherwise bleeds through the 2px gaps between page buttons and
       paints a black strip behind the row. */
    background: transparent;
    border-bottom: none;
}
.ag-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #6a655c !important;
    text-decoration: none !important;
    background: #fff;
    border: 1px solid #ece8e2;
    transition: color .12s, background .12s, border-color .12s;
}
.ag-page-link:hover {
    color: #c87a48 !important;
    background: rgba(232,168,124,0.10);
    border-color: #e8a87c;
}
.ag-page-current,
.ag-page-current:hover {
    color: #fff !important;
    background: #e8a87c;
    border-color: #d8966a;
    cursor: default;
    pointer-events: none;
}
.ag-page-disabled,
.ag-page-disabled:hover {
    opacity: 0.4;
    pointer-events: none;
    color: #a8a39a !important;
    background: #faf6ee;
    border-color: #ece8e2;
}
.ag-page-gap {
    color: #b8b3aa;
    padding: 0 5px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0;
}

/* ── Bulk bar enhancements (Phase C) ─────────────────────────
   "Select all matching" affordance and orange "Link to Series"
   button to round out the bulk action toolset. */
.ag-bulk-select-matching-wrap {
    margin-left: 10px;
    font-size: 11px;
    color: #6a655c;
}
.ag-bulk-select-matching-link {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #c87a48 !important;
    text-decoration: none;
    border-bottom: 1px dashed #e8a87c;
    padding-bottom: 1px;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.ag-bulk-select-matching-link:hover {
    color: #a85820 !important;
    border-bottom-style: solid;
}

/* Make the gallery card thumbnail feel clickable now that it opens
   the lightbox quick-edit. Subtle peach overlay on hover. */
.ag-card-thumb { cursor: zoom-in; transition: filter .15s; }
.ag-card-thumb:hover { filter: brightness(1.05) saturate(1.05); }

/* ============================================================
   GALLERY V2 — LIGHTBOX QUICK-EDIT (Phase A)
   ============================================================ */
body.ag-lightbox-open { overflow: hidden; }

.ag-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ag-lightbox[hidden] { display: none; }

.ag-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 14, 0.82);
    backdrop-filter: blur(2px);
}

.ag-lightbox-modal {
    position: relative;
    z-index: 1;
    width: min(1280px, 96vw);
    max-height: 94vh;
    background: #faf6ee;
    border: 1px solid #e2dccf;
    border-top: 3px solid #e8a87c;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ag-lightbox-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #6a655c;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.ag-lightbox-close:hover { color: #c87a48; background: rgba(232,168,124,0.10); }

.ag-lightbox-counter {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 5;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #6a655c;
    background: rgba(255,255,255,0.7);
    padding: 4px 10px;
    border: 1px solid #ece8e2;
}

/* Body grid: image on the left, editor panel on the right.
   Stack vertically on narrow viewports. */
.ag-lightbox-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    height: 100%;
    min-height: 0;
}
@media (max-width: 900px){
    .ag-lightbox-body { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
}

.ag-lightbox-image-wrap {
    position: relative;
    background: #1a1814;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}
.ag-lightbox-image {
    max-width: 100%;
    max-height: 92vh;
    object-fit: contain;
    display: block;
}
@media (max-width: 900px){
    .ag-lightbox-image { max-height: 60vh; }
}

.ag-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 64px;
    border: none;
    color: #fff;
    background: rgba(0,0,0,0.35);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}
.ag-lightbox-nav:hover { background: rgba(232,168,124,0.6); }
.ag-lightbox-nav-prev { left: 10px; }
.ag-lightbox-nav-next { right: 10px; }

/* Editor panel — cream sidebar with the form fields. */
.ag-lightbox-editor {
    background: #fff;
    border-left: 1px solid #ece8e2;
    padding: 18px 18px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (max-width: 900px){
    .ag-lightbox-editor { border-left: none; border-top: 1px solid #ece8e2; }
}

.ag-lb-section { display: flex; flex-direction: column; gap: 4px; }

.ag-lb-filename {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    color: #a09b94;
    word-break: break-all;
    line-height: 1.4;
    padding: 4px 0 0;
    border-bottom: 1px dashed #ece8e2;
    padding-bottom: 8px;
}
.ag-lb-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a857d;
}
.ag-lb-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid #ddd8d0;
    background: #faf9f7;
    color: #3a3633;
    transition: border-color .12s, background .12s;
}
.ag-lb-input:focus {
    outline: none;
    border-color: #e8a87c;
    background: #fff;
}
.ag-lb-hint-btn {
    align-self: flex-start;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 9px;
    background: rgba(168,196,224,0.08);
    border: 1px solid #c8d8ec;
    color: #4070a0;
    cursor: pointer;
    transition: all .12s;
}
.ag-lb-hint-btn:hover { background: rgba(168,196,224,0.18); border-color: #a8c4e0; color: #205070; }

.ag-lb-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed #ece8e2;
}
.ag-lb-primary { font-size: 12px; padding: 9px 14px; font-weight: 700; }
.ag-lb-delete { margin-top: 4px; }

.ag-lb-status {
    min-height: 16px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a857d;
}
.ag-lb-status-ok  { color: #3a8050; }
.ag-lb-status-err { color: #b04040; }

.ag-lb-shortcuts {
    margin-top: auto;
    font-size: 10px;
    color: #a09b94;
    text-align: center;
    padding-top: 10px;
    border-top: 1px dashed #ece8e2;
}
.ag-lb-shortcuts kbd {
    display: inline-block;
    padding: 1px 5px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 9px;
    color: #6a655c;
    background: #faf6ee;
    border: 1px solid #ddd8d0;
    border-radius: 3px;
    margin: 0 1px;
}

/* ============================================================
   JUKEBOX — replace all previous jukebox CSS in main.css
   ============================================================ */

/* ── Trigger button (mirrors .shoutbox-btn) ───── */
.jukebox-btn {
    position: fixed;
    bottom: 10px;
    right: 190px;  /* width of shoutbox btn + gap */
    z-index: 8001;
    background: #1a1a1a;
    border: 1px solid rgba(91,141,217,0.5);
    border-radius: 20px;
    color: #5b8dd9;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 8px 16px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.jukebox-btn:hover   { background: #222; }
.jukebox-btn.playing { color: #50c878; border-color: #50c878; }

/* ── Popup container ──────────────────────────── */
.jukebox-popup {
    position: fixed;
    z-index: 8000;
    background: #141414;
    border: 1px solid rgba(91,141,217,0.25);
    border-top: 2px solid #5b8dd9;
    width: 320px;
    max-height: 560px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
    font-family: Arial, sans-serif;
}

/* ── Drag handle ──────────────────────────────── */
#jukebox-drag-handle {
    background: #111;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 6px 10px;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    flex-shrink: 0;
}
.jukebox-handle-left {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
}
.jukebox-handle-title {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555;
    flex-shrink: 0;
}
.jukebox-handle-track {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jukebox-handle-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Buttons in handle ────────────────────────── */
.jukebox-play-btn,
.jukebox-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.jukebox-play-btn  { color: #5b8dd9; font-size: 13px; }
.jukebox-close-btn { color: #444;    font-size: 16px; }
.jukebox-play-btn:hover  { color: #7aaae8; }
.jukebox-close-btn:hover { color: #aaa; }

/* ── Thin progress bar under handle ──────────── */
.jukebox-mini-progress {
    height: 3px;
    background: #222;
    cursor: pointer;
    flex-shrink: 0;
}
.jukebox-mini-bar {
    height: 3px;
    background: #5b8dd9;
    width: 0%;
    transition: width 0.5s linear;
}

/* ── Scrollable panel body ────────────────────── */
.jukebox-panel {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 16px;
    min-height: 0;
}

/* ── Now playing ──────────────────────────────── */
.jukebox-now-playing { margin-bottom: 10px; text-align: center; }
.jukebox-np-title    { font-size: 14px; color: #e0dbd3; font-weight: bold; }
.jukebox-np-artist   { font-size: 11px; color: #8b8680; margin-top: 2px; }
.jukebox-np-from     { font-size: 10px; color: #5b8dd9; margin-top: 2px; font-style: italic; }

/* ── Full progress bar + timestamps ──────────── */
.jukebox-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.jukebox-time { font-size: 10px; color: #555; flex-shrink: 0; }
.jukebox-progress-full {
    flex: 1;
    height: 4px;
    background: #2a2a2a;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.jukebox-progress-fill {
    height: 4px;
    background: #5b8dd9;
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s linear;
}

/* ── Controls ─────────────────────────────────── */
.jukebox-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}
.jukebox-controls button {
    background: transparent;
    border: 1px solid #333;
    color: #999;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    transition: border-color 0.15s, color 0.15s;
}
.jukebox-controls button:hover       { border-color: #5b8dd9; color: #5b8dd9; }
.jukebox-controls #jukeboxBigPlay    { border-color: #5b8dd9; color: #5b8dd9; font-size: 14px; padding: 5px 14px; }
.jukebox-shuffle.active              { color: #50c878 !important; border-color: #50c878 !important; }

/* ── Playlist label ───────────────────────────── */
.jukebox-playlist-label  { text-align: center; font-size: 10px; color: #555; margin-bottom: 8px; }
.jukebox-playlist-owner  { color: #5b8dd9; margin-left: 4px; }

/* ── Track list ───────────────────────────────── */
.jukebox-tracklist { margin-bottom: 10px; }
.jukebox-track-row {
    display: flex;
    align-items: center;
    padding: 5px 6px;
    border-bottom: 1px solid #1e1e1e;
    cursor: pointer;
    gap: 8px;
    border-radius: 2px;
    transition: background 0.1s;
}
.jukebox-track-row:hover                  { background: #1c1c1c; }
.jukebox-track-row.active                 { background: rgba(91,141,217,0.12); }
.jukebox-track-row.active .jukebox-track-name { color: #5b8dd9; }
.jukebox-track-num  { font-size: 10px; color: #444; width: 16px; flex-shrink: 0; text-align: right; }
.jukebox-track-info { flex: 1; overflow: hidden; min-width: 0; }
.jukebox-track-name { font-size: 11px; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.jukebox-track-meta { font-size: 9px;  color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.jukebox-track-dur  { font-size: 10px; color: #444; flex-shrink: 0; }

/* ── Divider ──────────────────────────────────── */
.jukebox-divider { border-top: 1px solid #1e1e1e; margin: 12px 0; }

/* ── Member search ────────────────────────────── */
.jukebox-search-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.jukebox-search-wrap  { position: relative; }
.jukebox-search-input {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-left: 2px solid #5b8dd9;
    color: #ccc;
    padding: 6px 10px;
    font-size: 11px;
    outline: none;
    box-sizing: border-box;
}
.jukebox-search-input:focus { border-color: #5b8dd9; }

/* ── Typeahead dropdown ───────────────────────── */
.jukebox-typeahead {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-top: none;
    z-index: 100;
    max-height: 180px;
    overflow-y: auto;
}
.jukebox-ta-row {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    cursor: pointer;
    gap: 8px;
    border-bottom: 1px solid #222;
}
.jukebox-ta-row:hover  { background: #222; }
.jukebox-ta-avatar     { width: 24px; height: 24px; border-radius: 1px; object-fit: cover; flex-shrink: 0; background: #2a2a2a; }
.jukebox-ta-name       { font-size: 11px; color: #ccc; flex: 1; }
.jukebox-ta-count      { font-size: 9px; color: #555; }

/* ── Member playlists ─────────────────────────── */
.jukebox-member-playlists { margin-top: 8px; }
.jukebox-pl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #1e1e1e;
    gap: 8px;
}
.jukebox-pl-name { font-size: 11px; color: #ccc; flex: 1; }
.jukebox-pl-meta { font-size: 9px; color: #555; }
.jukebox-pl-load {
    background: transparent;
    border: 1px solid #5b8dd9;
    color: #5b8dd9;
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 2px;
    flex-shrink: 0;
}
.jukebox-pl-load:hover { background: rgba(91,141,217,0.15); }

/* ── Shoutbox/jukebod  offset so it clears the jukebox btn */
.shoutbox-btn  { position: fixed; bottom: 10px; right: 20px; }
.jukebox-btn { position: fixed; bottom: 10px; left: 20px; right: auto; }

/* ============================================================ */
/* "Use as episode still" — promote a gallery item to be the    */
/* episode's still_image. Two surfaces:                          */
/*   1. .ag-card-still-btn  (Manage Gallery card action)         */
/*   2. .ep-still-pick-btn  (admin picker on /anime/<slug>/)     */
/* ============================================================ */

/* ── Manage Gallery: star button on cards ────────────────── */
.ag-card-still-btn {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 7px;
    border: 1px solid #d4cfc8;
    background: #fff;
    color: #6a655c;
    cursor: pointer;
    border-radius: 2px;
    line-height: 1.2;
}
.ag-card-still-btn:hover {
    border-color: #e8a87c;
    color: #d49060;
    background: rgba(232,168,124,0.08);
}
.ag-card-still-btn-active,
.ag-card-still-btn-active:hover {
    border-color: #e8a87c;
    background: #ffe8c0;
    color: #8a4a16;
    font-weight: bold;
    cursor: default;
}

/* "★ episode still" pip in top-left of an active card */
.ag-card.ag-card-active-still {
    box-shadow: 0 0 0 2px #e8a87c inset;
    background: rgba(255,232,192,0.30);
}
.ag-card-still-flag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    background: #e8a87c;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 7px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    pointer-events: none;
}

/* ── Anime detail: "Pick still" button + drawer ──────────── */
.ep-still-pick-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 3px 8px;
    background: rgba(232,168,124,0.10);
    border: 1px solid #e8a87c;
    color: #8a4a16;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1.3;
}
.ep-still-pick-btn:hover { background: rgba(232,168,124,0.25); }
.ep-still-pick-btn-open {
    background: #e8a87c;
    color: #fff;
}

.ep-still-picker {
    margin: 8px 0 4px;
    padding: 12px;
    background: #faf8f4;
    border: 1px solid #ede8df;
    border-left: 3px solid #e8a87c;
    border-radius: 2px;
}
.ep-still-picker-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ep-still-picker-tip {
    font-size: 11px;
    color: #6a655c;
    line-height: 1.5;
    flex: 1 1 0;
    min-width: 220px;
}
.ep-still-picker-revert {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    background: #fff;
    border: 1px solid #d4cfc8;
    color: #6a655c;
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.ep-still-picker-revert:hover { border-color: #ff6b6b; color: #c44; }

.ep-still-picker-loading,
.ep-still-picker-empty {
    font-size: 12px;
    color: #8a857a;
    font-style: italic;
    text-align: center;
    padding: 14px 8px;
}

.ep-still-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.ep-still-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #ede8df;
    border: 2px solid transparent;
    padding: 0;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.12s ease;
}
.ep-still-thumb:hover {
    border-color: #e8a87c;
    transform: scale(1.03);
    z-index: 2;
}
.ep-still-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ep-still-thumb-active {
    border-color: #e8a87c !important;
    box-shadow: 0 0 0 2px #e8a87c, 0 0 14px rgba(232,168,124,0.45);
    cursor: default;
}
.ep-still-thumb-flag {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: #e8a87c;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 2px;
    pointer-events: none;
}

/* ── Shared toast ─────────────────────────────────────────── */
.ah-toast {
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 9999;
    padding: 10px 16px;
    background: #2a2a2a;
    color: #fff;
    font-size: 13px;
    border-radius: 3px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ah-toast-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ah-toast-good { background: #2a8050; }
.ah-toast-bad  { background: #c44; }

/* ============================================================ */
/* AUDIT UPLOADS — moderation tool                              */
/* ------------------------------------------------------------ */
/* Used by includes/admin-audit-uploads.php. Three sections:    */
/*   .au-summary   top stat strip                               */
/*   .au-member    one card per user (uses native <details>)    */
/*   .au-folder-*  folder grid w/ delete-all                    */
/*   .au-orphan-*  legacy disk↔DB reconciliation                */
/* ============================================================ */

/* manage-gallery filter pill — for ?uploader=N deep-link visual */
.ag-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 12px;
    background: rgba(91,141,217,0.10);
    border: 1px solid #5b8dd9;
    border-left: 3px solid #5b8dd9;
    color: #2a4a7a;
    font-size: 11px;
    border-radius: 2px;
}
.ag-filter-pill strong { color: #1a3866; }
.ag-filter-pill-x {
    color: #5b8dd9;
    text-decoration: none;
    font-weight: bold;
    padding: 0 6px;
    line-height: 1;
}
.ag-filter-pill-x:hover { color: #ff6b6b; }

/* ── Top stat strip ────────────────────────────────────────── */
.au-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
}
.au-stat {
    flex: 1 1 130px;
    padding: 16px 18px;
    border-right: 1px solid #ede8df;
    background: #faf8f4;
    text-align: center;
}
.au-stat:last-child { border-right: none; }
.au-stat-num {
    font-size: 22px;
    font-weight: bold;
    color: #2a2a2a;
    line-height: 1.1;
}
.au-stat-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a857a;
    margin-top: 4px;
}
.au-stat-warn { background: rgba(232, 168, 124, 0.10); }
.au-stat-warn .au-stat-num { color: #d49060; }
.au-stat-bad  { background: rgba(255, 107, 107, 0.10); }
.au-stat-bad .au-stat-num  { color: #c44; }

/* ── Section container + hint copy ─────────────────────────── */
.au-section { padding: 14px 18px !important; }
.au-section-hint {
    font-size: 11px;
    color: #8a857a;
    line-height: 1.6;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ede8df;
}
.au-section-hint code {
    background: #f5f1ea;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 11px;
}
.au-section-hint strong { color: #2a2a2a; }

/* ── Member card (<details>) ───────────────────────────────── */
.au-member {
    border: 1px solid #ede8df;
    border-radius: 3px;
    margin-bottom: 8px;
    background: #fff;
    overflow: hidden;
}
.au-member[open] {
    border-color: #d4cfc8;
    background: #faf8f4;
}
.au-member-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.au-member-head::-webkit-details-marker { display: none; }
.au-member-head:hover { background: rgba(232, 168, 124, 0.06); }
.au-member-ident {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;
    min-width: 0;
}
.au-member-avatar,
.au-member-avatar-fallback {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #ede8df;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d4cfc8;
}
.au-member-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a857a;
    font-weight: bold;
    font-size: 16px;
}
.au-member-meta { min-width: 0; flex: 1 1 0; }
.au-member-name {
    font-size: 14px;
    font-weight: bold;
    color: #2a2a2a;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.au-member-counts {
    margin-top: 4px;
    font-size: 11px;
    color: #6a655c;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.au-member-counts span { display: inline-flex; align-items: center; gap: 3px; }
.au-ban-reason {
    background: rgba(255,107,107,0.10);
    color: #c44 !important;
    padding: 2px 6px;
    border-radius: 2px;
    font-style: italic;
    font-size: 10px !important;
}

/* Role + status pills */
.au-role,
.au-status {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 7px;
    border-radius: 2px;
    font-weight: bold;
}
.au-role-admin       { background: #ffe0a8; color: #8a4a16; }
.au-role-staff       { background: #d3e0f5; color: #1a4a8a; }
.au-role-contributor { background: #d8f0d8; color: #1a6a30; }
.au-role-member      { background: #ede8df; color: #6a655c; }
.au-status-banned    { background: #ffd0d0; color: #a02020; }
.au-status-strikes   { background: #ffe0c0; color: #a05010; }

.au-member-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.au-toggle-hint {
    font-size: 10px;
    color: #8a857a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 4px;
}
.au-member[open] .au-toggle-hint::before { content: ''; }
.au-member[open] .au-toggle-hint { color: #d49060; }

/* Buttons */
.au-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: 1px solid;
    background: #fff;
    line-height: 1.2;
    white-space: nowrap;
}
.au-btn-good   { border-color: #50c878; color: #2a8050; background: rgba(80,200,120,0.06); }
.au-btn-good:hover  { background: rgba(80,200,120,0.18); }
.au-btn-warn   { border-color: #d49060; color: #8a4a16; background: rgba(232,168,124,0.08); }
.au-btn-warn:hover  { background: rgba(232,168,124,0.20); }
.au-btn-bad    { border-color: #ff6b6b; color: #c44;    background: rgba(255,107,107,0.06); }
.au-btn-bad:hover   { background: rgba(255,107,107,0.18); }
.au-btn-ghost  { border-color: #d4cfc8; color: #6a655c; }
.au-btn-ghost:hover { background: #f5f1ea; }

/* ── Expanded member body (uploads) ────────────────────────── */
.au-member-body {
    padding: 0 14px 14px 14px;
    border-top: 1px dashed #ede8df;
    background: #fff;
}
.au-tile-row {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #ede8df;
    align-items: flex-start;
}
.au-tile-row:last-child { border-bottom: none; }
.au-tile-row-lbl {
    flex: 0 0 110px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a857a;
    line-height: 1.5;
    padding-top: 4px;
}
.au-row-allnow {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    color: #5b8dd9;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
.au-row-allnow:hover { text-decoration: underline; }
.au-tile-row-items {
    flex: 1 1 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Image tile w/ delete X */
.au-tile {
    position: relative;
    width: 86px;
    height: 64px;
    background: #f5f1ea;
    border: 1px solid #ede8df;
    border-radius: 2px;
    overflow: hidden;
}
.au-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.au-tile-wide { width: 200px; height: 64px; }
.au-tile-wide img { object-fit: contain; background: #fff; }
.au-tile-x {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.au-tile-x:hover { background: #c44; }

/* Jukebox track list (compact rows) */
.au-track-list { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }
.au-track {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 2fr 28px;
    gap: 10px;
    align-items: center;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #ede8df;
    border-left: 3px solid #c9aedc;
    font-size: 11px;
    border-radius: 2px;
}
.au-track:nth-child(even) { background: #faf8f4; }
.au-track-title  { font-weight: bold; color: #2a2a2a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-track-artist { color: #6a655c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-track-anime  { color: #8a857a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-track-fn     { font-size: 10px; color: #b8b3aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-track-x {
    width: 24px;
    height: 24px;
    background: rgba(255,107,107,0.10);
    color: #c44;
    border: 1px solid #ff6b6b;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.au-track-x:hover { background: #c44; color: #fff; }

/* ── Folder grid (By Folder) ───────────────────────────────── */
.au-folder-group { margin-bottom: 18px; }
.au-folder-group:last-child { margin-bottom: 0; }
.au-folder-group-title {
    font-size: 12px;
    font-weight: bold;
    color: #2a2a2a;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e8a87c;
}
.au-folder-bucket {
    font-weight: normal;
    color: #8a857a;
    font-size: 11px;
    margin-left: 6px;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.au-folder-bucket-tag {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6a655c;
    background: #f5f2ec;
    padding: 2px 6px;
    border-radius: 2px;
}
.au-folder-path {
    font-size: 10px;
    color: #8a857a;
    font-family: 'JetBrains Mono', Consolas, monospace;
}
.au-folder-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.au-folder-last {
    font-size: 10px;
    color: #8a857a;
}
.au-folder-app { margin-top: 10px; }
.au-folder-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.au-folder-search-input {
    flex: 1 1 180px;
    min-width: 140px;
    padding: 6px 10px;
    border: 1px solid #ddd8cf;
    border-radius: 2px;
    font-size: 12px;
}
.au-folder-bucket-select {
    padding: 6px 8px;
    border: 1px solid #ddd8cf;
    border-radius: 2px;
    font-size: 12px;
    background: #fff;
}
.au-folder-hint {
    font-size: 11px;
    color: #8a857a;
    margin-bottom: 8px;
}
.au-folder-empty { font-size: 11px; color: #b8b3aa; font-style: italic; padding: 8px 0; }
.au-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.au-folder-card {
    border: 1px solid #ede8df;
    border-left: 3px solid #50c878;
    border-radius: 2px;
    padding: 10px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.au-folder-name {
    font-size: 12px;
    font-weight: bold;
    color: #2a2a2a;
    word-break: break-all;
    line-height: 1.3;
}
.au-folder-counts {
    font-size: 11px;
    color: #6a655c;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.au-folder-counts .au-folder-orphan { color: #d49060; font-weight: bold; }
.au-folder-counts .au-folder-mismatch { color: #d49060; font-size: 14px; }
.au-folder-actions { display: flex; gap: 6px; margin-top: 4px; }

/* ── Orphan / DB-sync (legacy) ─────────────────────────────── */
.au-orphan-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #ede8df;
}
.au-orphan-block:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.au-orphan-head {
    font-size: 11px;
    color: #6a655c;
    margin-bottom: 8px;
}
.au-orphan-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 6px;
}
.au-orphan-tip {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a857a;
}
.au-orphan-list {
    max-height: 280px;
    overflow: auto;
    background: #fff;
    border: 1px solid #ede8df;
    padding: 6px 10px;
    font-size: 11px;
}
.au-orphan-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed #f0ebe3;
}
.au-orphan-row:last-child { border-bottom: none; }
.au-orphan-row img {
    width: 38px;
    height: 28px;
    object-fit: cover;
    background: #ede8df;
    border: 1px solid #ede8df;
    flex-shrink: 0;
}
.au-orphan-row code {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    color: #6a655c;
}
.au-orphan-cb { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.au-orphan-missing { color: #c44; }

.au-toggle-link {
    color: #5b8dd9;
    text-decoration: none;
    font-size: 11px;
    margin-left: 8px;
}
.au-toggle-link:hover { text-decoration: underline; }
.au-warn { color: #d49060; }
.au-bad  { color: #c44;    font-weight: bold; }
.au-ok   { color: #2a8050; }

/* Mobile collapse for member action row */
@media (max-width: 720px){
    .au-member-head { flex-wrap: wrap; }
    .au-member-actions { width: 100%; justify-content: flex-start; padding-top: 6px; border-top: 1px dashed #ede8df; }
    .au-tile-row { flex-direction: column; }
    .au-tile-row-lbl { flex: 0 0 auto; }
    .au-track { grid-template-columns: 1fr 28px; }
    .au-track-artist, .au-track-anime, .au-track-fn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EPISODE LIST TOOLBAR — legend, search, jump, filter pills, arc dropdown
   Used on /anime/<slug>/ inside the Episodes pane. Designed to scale to
   500+ ep / 20+ arc series like Naruto Shippuuden without breaking flow.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer toolbar container ── */
.ep-toolbar {
    padding: 12px 20px 0;
    background: #faf8f4;
    border-bottom: 1px solid #ede8df;
}

/* ── Legend (collapsible <details>) ── */
.ep-legend {
    margin-bottom: 10px;
    border: 1px solid #e6dfcf;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
.ep-legend > summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #666;
    user-select: none;
    transition: background .12s;
}
.ep-legend > summary:hover { background: #f5efe2; color: #333; }
.ep-legend > summary::-webkit-details-marker { display: none; }
.ep-legend > summary::marker { content: ''; }
.ep-legend[open] > summary {
    background: #f5efe2;
    color: #333;
    border-bottom: 1px solid #e6dfcf;
}
.ep-legend-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background: #d9d3c8;
    color: #fff;
    font-style: normal;
    font-size: 10px;
    margin-right: 5px;
    vertical-align: -1px;
}
.ep-legend-body {
    padding: 10px 12px 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px 18px;
}
.ep-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #555;
}
.ep-legend-row .ep-type-badge { flex: 0 0 auto; min-width: 78px; text-align: center; }
.ep-legend-glyph {
    flex: 0 0 auto;
    min-width: 78px;
    text-align: center;
    font-size: 14px;
    color: #888;
}
.ep-legend-text { flex: 1 1 auto; line-height: 1.4; }

/* Legend at bottom of episode list — muted footer, not a second panel */
.ep-legend.ep-legend-bottom {
    margin: 6px 20px 12px;
    border: none;
    border-top: 1px solid #ede8df;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.ep-legend.ep-legend-bottom > summary {
    padding: 6px 0 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: #b8b3aa;
    background: transparent;
}
.ep-legend.ep-legend-bottom > summary:hover {
    background: transparent;
    color: #8a8478;
}
.ep-legend.ep-legend-bottom[open] > summary {
    background: transparent;
    color: #8a8478;
    border-bottom: 1px solid #ede8df;
}
.ep-legend.ep-legend-bottom .ep-legend-icon {
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 9px;
    margin-right: 4px;
    vertical-align: 0;
    background: rgba(0,0,0,0.06);
    color: #b8b3aa;
}
.ep-legend.ep-legend-bottom .ep-legend-body {
    padding: 8px 0 4px;
    gap: 4px 14px;
    border-top: none;
}
.ep-legend.ep-legend-bottom .ep-legend-row {
    font-size: 11px;
    color: #8a8478;
}
.ep-legend.ep-legend-bottom .ep-legend-text {
    color: #8a8478;
}
.ep-legend.ep-legend-bottom .ep-legend-glyph {
    color: #b8b3aa;
    font-size: 12px;
}

/* ── Controls row (search, jump, type, toggles, counter) ── */
.ep-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-bottom: 12px;
}
.ep-controls-label{
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #6a655c;
    margin-right: 2px;
    white-space: nowrap;
}
.ep-controls-sep{
    color: #b8b3aa;
    font-size: 11px;
    margin: 0 2px;
    user-select: none;
}
.ep-search,
.ep-jump,
.ep-filter-type {
    height: 28px;
    border: 1px solid #d9d3c8;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font: inherit;
    font-size: 12px;
    padding: 0 8px;
    transition: border-color .12s, box-shadow .12s;
}
.ep-search { flex: 1 1 220px; min-width: 160px; }
.ep-jump   { flex: 0 0 100px; }
.ep-filter-type { flex: 0 0 auto; cursor: pointer; }
.ep-search:focus,
.ep-jump:focus,
.ep-filter-type:focus {
    outline: none;
    border-color: #2a2a2a;
    box-shadow: 0 0 0 2px rgba(232,168,124,0.18);
}
/* Hide spinner on number input */
.ep-jump::-webkit-outer-spin-button,
.ep-jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ep-jump { -moz-appearance: textfield; appearance: textfield; }

.ep-toggle {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #d9d3c8;
    background: #fff;
    color: #777;
    font: inherit;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .4px;
    cursor: pointer;
    border-radius: 999px;
    transition: background .12s, color .12s, border-color .12s;
}
.ep-toggle:hover { background: #ede8df; color: #333; border-color: #c4bdb0; }
.ep-toggle.on {
    background: #2a2a2a;
    color: #fff;
    border-color: #2a2a2a;
}

.ep-clear {
    height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #c44;
    font: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    transition: background .12s;
}
.ep-clear:hover { background: rgba(196,68,68,0.08); border-color: #e0c0c0; }

/* Vertical separator between control groups (search/jump | type pills | status pills) */
.ep-controls-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #d9d3c8;
    margin: 0 4px;
}

/* Type-filter pills: faint type-color tint when active so users can see at
   a glance which categories they've enabled. */
.ep-toggle-type.on[data-type="canon"]       { background: #2a8050; border-color: #2a8050; }
.ep-toggle-type.on[data-type="mixed"]       { background: #b27538; border-color: #b27538; }
.ep-toggle-type.on[data-type="good-filler"] { background: #4666b2; border-color: #4666b2; }
.ep-toggle-type.on[data-type="filler"]      { background: #b04545; border-color: #b04545; }

.ep-counter {
    margin-left: auto;
    font-size: 11px;
    color: #888;
    font-style: italic;
}

/* ── Arc List section (label + pill row) ── */
.arc-section {
    background: #faf8f4;
    border-bottom: 1px solid #ede8df;
    padding: 10px 20px 12px;
}
.arc-section-label {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 7px;
    user-select: none;
}
.arc-section-count {
    color: #b8b1a4;
    font-weight: normal;
    margin-left: 2px;
}

/* When the arc-section is present, the inner arc-nav drops its own padding
   and border so the section wrapper provides them. */
.arc-section .arc-nav {
    padding: 0;
    border-bottom: none;
    background: transparent;
}

/* ── Arc dropdown (legacy; markup currently disabled but styles retained) ── */
.arc-dropdown-wrap {
    position: relative;
    padding: 12px 20px;
    border-bottom: 1px solid #ede8df;
    background: #faf8f4;
}
.arc-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d9d3c8;
    background: #fff;
    color: #333;
    font: inherit;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .4px;
    cursor: pointer;
    border-radius: 3px;
    min-width: 280px;
    text-align: left;
    transition: border-color .12s, background .12s;
}
.arc-dropdown-btn:hover { border-color: #2a2a2a; }
.arc-dropdown-btn[aria-expanded="true"] { border-color: #2a2a2a; background: #f5efe2; }
.arc-dropdown-label   { flex: 1 1 auto; text-transform: uppercase; }
.arc-dropdown-meta    { color: #888; font-weight: normal; }
.arc-dropdown-caret   { color: #888; font-size: 14px; }
.arc-dropdown-btn[aria-expanded="true"] .arc-dropdown-caret { transform: rotate(180deg); }

.arc-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 20px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d9d3c8;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    min-width: 320px;
    max-height: 360px;
    overflow-y: auto;
    z-index: 50;
}
.arc-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    transition: background .1s;
}
.arc-dropdown-item:hover { background: #f5efe2; color: #1a1a1a; }
.arc-dropdown-item.active {
    background: #2a2a2a;
    color: #fff;
    font-weight: bold;
}
.arc-dropdown-item.active .arc-dropdown-item-count { color: #ccc; }
.arc-dropdown-item-name  { flex: 1 1 auto; }
.arc-dropdown-item-count { flex: 0 0 auto; color: #999; font-size: 11px; }

/* Tab count badge for non-dropdown arc-nav */
.arc-tab-count { font-weight: normal; opacity: .6; margin-left: 4px; }

/* ── Per-arc stats strip (above first ep row in each arc-group) ── */
.ep-arc-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 10px 20px;
    background: linear-gradient(180deg, #fbf9f4 0%, #f6f3eb 100%);
    border-bottom: 1px solid #ede8df;
    font-size: 11px;
    letter-spacing: .3px;
}
.ep-arc-stats-name {
    font-weight: bold;
    text-transform: uppercase;
    color: #2a2a2a;
    margin-right: 4px;
    font-size: 12px;
    letter-spacing: .6px;
}
.ep-arc-stats-bits { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.ep-arc-stat {
    display: inline-block;
    padding: 1px 7px;
    background: #fff;
    border: 1px solid #e6dfcf;
    border-radius: 10px;
    color: #666;
    white-space: nowrap;
}
.ep-arc-stat-canon       { color: #2a7;     border-color: #c2e0ce; background: #f1faf4; }
.ep-arc-stat-mixed       { color: #b85;     border-color: #e6d0b5; background: #fbf4ea; }
.ep-arc-stat-good-filler { color: #557acc;  border-color: #c4d3ed; background: #eef3fa; }
.ep-arc-stat-filler      { color: #c44;     border-color: #ecc4c4; background: #fbeeed; }
.ep-arc-stat-caps        { color: #555;     border-color: #d9d3c8; background: #f5efe2; }
.ep-arc-stat-stills      { color: #555;     border-color: #d9d3c8; background: #f5efe2; }

/* ── Filtered-out row (search/filter active) ── */
.ep-row.is-filtered-out { display: none !important; }

/* When filters are active, the stats strip should hide for arcs that have
   zero matching rows. JS toggles .arc-group.is-empty for that case. */
.arc-group.is-empty .ep-arc-stats { display: none; }
.arc-group.is-empty .ep-arc-empty-msg { display: none; }

/* When filters are active, all arc-groups are shown so we need the per-arc
   stats strip to act as a section header. */
.ep-toolbar.is-filtering ~ .arc-group { display: block; }

/* Jump-to-ep highlight pulse */
@keyframes ep-jump-pulse {
    0%   { background: #fff7d6; }
    100% { background: transparent; }
}
.ep-row.is-jump-target { animation: ep-jump-pulse 1.6s ease-out 1; }

/* ── Responsive: stack controls on narrow viewports ── */
@media (max-width: 720px) {
    .ep-toolbar { padding: 10px 12px 0; }
    .ep-search { flex: 1 1 100%; }
    .ep-jump   { flex: 1 1 calc(50% - 3px); }
    .ep-filter-type { flex: 1 1 calc(50% - 3px); }
    .ep-counter { width: 100%; margin-left: 0; padding-top: 4px; text-align: right; }
    .ep-arc-stats { padding: 8px 12px; }
    .arc-dropdown-wrap { padding: 10px 12px; }
    .arc-dropdown-btn { min-width: 0; width: 100%; }
    .arc-dropdown-menu { left: 12px; right: 12px; min-width: 0; }
}

/* ── Admin: Manage Anime Bios (gallery → character tile JPEG) ──
   Scoped under .admin-wrap so backgrounds match admin chrome (body is #242424). */
.admin-wrap .ab-intro {
    font-size: 13px;
    line-height: 1.55;
    color: #4d4944;
    max-width: 58em;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #fffefb;
    border: 1px solid #e8e2d8;
    border-radius: 8px;
    border-left: 3px solid #7fa8d4;
}
.admin-wrap .ab-intro code {
    font-size: 12px;
    background: #f0ebe3;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e4dcd2;
}
.admin-wrap .ab-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e4dcd2;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.admin-wrap .ab-label { font-size: 12px; font-weight: 600; color: #5c5852; }
.admin-wrap .ab-toolbar select {
    min-width: 220px;
    padding: 7px 11px;
    font-size: 13px;
    border: 1px solid #d4cfc8;
    border-radius: 6px;
    background: #faf9f7;
    color: #3a3633;
}
.admin-wrap .ab-warn {
    font-size: 12px;
    color: #8a4a38;
    background: #fff8f0;
    border: 1px solid #e8c9a8;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 16px;
}
.admin-wrap .ab-empty { font-size: 13px; color: #6a655c; margin: 12px 0; }
.admin-wrap .ab-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 16px;
    font-size: 12px;
    background: #fffefb;
    border: 1px solid #e4dcd2;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.admin-wrap .ab-pagination-info { color: #5c5852; }
.admin-wrap .ab-pagination-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    /* Override global `nav { background:#111 }` (site header) — otherwise <nav> is black behind gaps. */
    background: #ebe6de;
    border-radius: 6px;
    padding: 6px 8px;
    border-bottom: none;
}
.admin-wrap .ab-page-link {
    display: inline-block;
    padding: 6px 11px;
    border: 1px solid #d4cfc8;
    border-radius: 6px;
    background: #fff;
    color: #4d6fa8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.admin-wrap .ab-page-link:hover {
    background: #f7f3ec;
    border-color: #b8c8de;
    color: #2a5080;
}
.admin-wrap .ab-page-current {
    font-weight: 700;
    border-color: #7fa8d4;
    background: linear-gradient(180deg, #eef4fb 0%, #e2ecf8 100%);
    color: #2a2a2a;
}
.admin-wrap .ab-page-disabled {
    pointer-events: none;
    opacity: 0.45;
    color: #999;
    background: #f5f2ee;
}
.admin-wrap .ab-page-gap { color: #a8a29a; padding: 0 3px; }
.admin-wrap .ab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 4px 2px 8px;
}
.admin-wrap .ab-card {
    border: 1px solid #e0d8cf;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(45, 40, 35, 0.06);
}
.admin-wrap .ab-thumb-wrap {
    position: relative;
    display: block;
    aspect-ratio: 5 / 7;
    /* Warm “letterbox” — avoids harsh #1a1a1a reading as broken / empty black */
    background: linear-gradient(160deg, #dcd6cc 0%, #c9c2b6 45%, #b8b0a4 100%);
    overflow: hidden;
    border-bottom: 1px solid #e0d8cf;
}
.admin-wrap .ab-pan-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.admin-wrap .ab-pan-viewport:active {
    cursor: grabbing;
}
.admin-wrap .ab-pan-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
    pointer-events: none;
    user-select: none;
}
.admin-wrap .ab-pan-full {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #2a5080;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.admin-wrap .ab-pan-full:hover {
    background: #fff;
    border-color: #7fa8d4;
}
.admin-wrap .ab-pan-reset {
    align-self: flex-start;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid #d4cfc8;
    background: #faf9f7;
    color: #5c5852;
    cursor: pointer;
}
.admin-wrap .ab-pan-reset:hover {
    border-color: #b8c8de;
    background: #f3f0ea;
}
.admin-wrap .ab-card-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fffcf8;
}
.admin-wrap .ab-caption {
    font-size: 11px;
    color: #4d4944;
    line-height: 1.35;
    max-height: 3.2em;
    overflow: hidden;
}
.admin-wrap .ab-caption-empty { color: #9a948c; font-style: italic; }
.admin-wrap .ab-form { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.admin-wrap .ab-sublabel {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #7a756c;
}
.admin-wrap .ab-select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 9px;
    font-size: 12px;
    border: 1px solid #d4cfc8;
    border-radius: 6px;
    background: #faf9f7;
    color: #3a3633;
}
.admin-wrap .ab-submit {
    width: 100%;
    padding: 8px 11px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #7fa8d4;
    background: linear-gradient(180deg, #e8f0fb 0%, #d4e3f7 100%);
    color: #2a5080;
    font-weight: 600;
    border-radius: 6px;
}
.admin-wrap .ab-submit:hover:not(:disabled) {
    background: linear-gradient(180deg, #f0f5fb 0%, #dce9f9 100%);
    border-color: #5b8dd9;
}
.admin-wrap .ab-submit:disabled { opacity: 0.5; cursor: not-allowed; }