/* ============================================================
   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:2px solid rgba(255,255,255,0.06);
}

/* ============================================================
   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;
}

/* ============================================================
   SUB NAV
   ============================================================ */
.subnav {
    background: #f5f0e8;
    border-bottom: 1px solid #e2dccf;
    margin: -30px -30px 20px -30px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
    /* New stacking context so the More-dropdown always paints above the
       grid below (anime cards, gallery rows, etc.). z-index lifted past
       common page-content layers (anime cards, jukebox buttons, etc.). */
    position: relative;
    z-index: 1500;
}

.subnav-inner {
    padding: 0 6px;
    display: flex;
    align-items: stretch;
    height: 40px;
    gap: 0;
    overflow: visible;
    position: relative;
}

/* ── Anime subnav windowed nav ─────────────────────────────── */
#anime-nav-window {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}
.anime-nav-extras {
    display: flex;
    align-items: stretch;
    margin-left: auto;
    flex-shrink: 0;
    border-left: 1px solid #e8e2d4;
}
.subnav-arrow {
    background: none;
    border: none;
    color: #9a948a;
    font-size: 13px;
    padding: 0 10px;
    cursor: pointer;
    transition: color .15s, background .15s;
    line-height: 1;
    font-family: inherit;
    display: flex;
    align-items: center;
}
.subnav-arrow:hover    { color: #e8a87c; background: rgba(232,168,124,0.06); }
.subnav-arrow:disabled { color: #d6cfc1; cursor: default; background: none; }
.anime-more-wrap { position: relative; display: flex; align-items: stretch; }
.anime-more-btn {
    background: none;
    border: none;
    color: #6a655c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 0 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s;
    font-family: inherit;
    display: flex;
    align-items: center;
}
.anime-more-btn:hover { color: #e8a87c; background: rgba(232,168,124,0.06); }
.anime-more-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #faf6ee;
    border: 1px solid #e2dccf;
    border-top: 2px solid #e8a87c;
    z-index: 200;
    min-width: 230px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.anime-more-dropdown a {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6a655c !important;
    text-decoration: none;
    border-bottom: 1px solid #ede8df;
    white-space: nowrap;
    transition: color .12s, background .12s;
}
.anime-more-dropdown a:last-child { border-bottom: none; }
.anime-more-dropdown a:hover  { background: rgba(232,168,124,0.07); color: #c87a48 !important; }
.anime-more-dropdown a.active {
    color: #c87a48 !important;
    background: rgba(232,168,124,0.10);
    border-left: 3px solid #e8a87c;
    padding-left: 13px;
}
.anime-dropdown-num {
    font-size: 9px;
    color: #c4bdb0;
    margin-right: 10px;
    font-weight: normal;
    letter-spacing: 0;
    flex-shrink: 0;
}

/* ── Subnav links (shared by all sections) ─────────────────── */
.subnav a {
    color: #6a655c !important;
    text-decoration: none;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    transition: color .15s, background .15s, border-color .15s;
    white-space: nowrap;
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.subnav a:hover {
    color: #c87a48 !important;
    background: rgba(232,168,124,0.06);
}

.subnav a.active {
    color: #c87a48 !important;
    background: rgba(232,168,124,0.10);
    border-bottom-color: #e8a87c;
    font-weight: 700;
}

/* ============================================================
   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;
}

.main-content a:hover { 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: #2a2a2a;
    text-decoration: none;
    transition: color 0.2s;
}

.news-post-header h3 a:hover { color: #5b8dd9; }

.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:#2a2a2a;
    text-decoration:none;
}

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

.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; overflow-x:auto; }
    .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-section { margin-bottom:30px; }

.gallery-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:8px;
    margin-top:12px;
}

.gallery-item {
    position:relative;
    overflow:hidden;
    border-left:2px solid #c8c4bc;
    border-top:2px solid #c8c4bc;
    cursor:pointer;
    background:#f0ebe3;
    transition:all 0.2s;
}

.gallery-item:hover {
    border-color:#5b8dd9;
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(0,0,0,0.15);
}

.gallery-item img {
    width:100%;
    height:120px;
    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;
}

/* 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; }

.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-live-badge{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 18px;
    height: 18px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #bdb7ae;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.media-live-badge svg{
    width: 16px;
    height: 16px;
    fill: currentColor;
    opacity: 0.98;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.media-live-badge--muted{
    color: inherit;
    border-color: transparent;
    box-shadow: none;
}

.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: #2a2a2a;
    margin: 0 0 3px 0;
    transition: color 0.15s;
}

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

.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; }

.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 — 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 {
    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;
    background: rgba(232,168,124,0.10);
    border-bottom-color: #e8a87c;
    font-weight: 700;
}
.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-pane { display: none; }
.atab-pane.active { display: block; }

/* 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 { display: block; }
    .anime-tabs .atab { display: none; width: 100%; justify-content: space-between; padding: 12px 18px; }
    .anime-tabs .atab.active {
        display: flex;
        background: rgba(232,168,124,0.10);
        border-bottom: 2px solid #e8a87c;
    }
    .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);
    }
}

/* ── ≤640px: collapse the anime subnav into the "More ▾" dropdown ─
   Hide the windowed series links + prev/next arrows; the existing
   "More ▾" button takes over and gets full remaining width as the
   primary nav, listing every series in its dropdown. */
@media (max-width: 640px){
    .subnav-inner #anime-nav-window,
    .subnav-inner .anime-nav-extras .subnav-arrow { display: none; }
    .subnav-inner .anime-nav-extras { flex: 1; border-left: none; }
    .subnav-inner .anime-more-wrap { flex: 1; }
    .subnav-inner .anime-more-btn {
        width: 100%;
        justify-content: space-between;
        text-align: left;
        padding: 0 16px;
    }
    .subnav-inner .anime-more-dropdown { left: 0; right: 0; min-width: 0; }
}

/* Episode list — TMDB still thumbnail (used in includes/anime-detail.php arc episode rows) */
.ep-row-thumb {
    width: 64px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    background: #ede8df;
    margin-right: 2px;
    display: block;
}
.ep-row-thumb-placeholder {
    width: 64px;
    height: 36px;
    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;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0ebe3;
    text-decoration: none;
    color: inherit;
}
.sidebar-reviews .sidebar-review-row:last-child { border-bottom: none; }
.sidebar-reviews .sidebar-review-row:hover .sidebar-review-title { color: #5b8dd9; }
.sidebar-review-poster {
    width: 36px;
    height: 50px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ede8df;
    border-radius: 2px;
}
.sidebar-review-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: 6px 6px;
    font-size: 16px;
    opacity: 0.5;
}
.sidebar-review-text {
    min-width: 0;
    flex: 1;
}
.sidebar-review-title {
    font-size: 11px;
    color: #2a2a2a;
    line-height: 1.25;
    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: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 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-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;
}

.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: #2a2a2a;
    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: #2a2a2a;
    text-decoration: none;
    transition: color 0.2s;
}

.news-feed-title a:hover { color: #5b8dd9; }

.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 ─────
   The subnav sits as a sibling above .admin-wrap inside
   .main-content, so we use :has() to reach back up.        */
.main-content:has(.admin-wrap) .subnav {
    background: #fff;
    border-bottom: 1px solid #e4dfd8;
    margin: -30px -30px 0 -30px;
}

.main-content:has(.admin-wrap) .subnav a {
    color: #a09b94 !important;
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 0 14px;
    height: 38px;
    border-bottom: 2px solid transparent;
    border-right: none !important;
    transition: all 0.15s;
}

.main-content:has(.admin-wrap) .subnav a:hover {
    color: #3a3633 !important;
    background: rgba(0,0,0,0.02);
}

.main-content:has(.admin-wrap) .subnav a.active {
    color: #7fa8d4 !important;
    background: transparent;
    font-weight: 700;
    border-bottom-color: #7fa8d4;
}

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

/* ── 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; }

/* ── 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;
}

/* 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-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; }
/* ============================================================
   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; }