/* ============================================================
   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 #ddd8d0;
    margin: -30px -30px 20px -30px;
}

.subnav-inner {
    padding:0 4px;
    display:flex;
    align-items:center;
    height:36px;
    gap:0;
    overflow:visible;
}

/* ── Anime subnav windowed nav ─────────────────────────────── */
#anime-nav-window {
    display:flex;
    align-items:center;
    flex:1;
    min-width:0;
}
.anime-nav-extras {
    display:flex;
    align-items:center;
    margin-left:auto;
    flex-shrink:0;
}
.subnav-arrow {
    background:none;
    border:none;
    color:#8a8580;
    font-size:9px;
    padding:0 7px;
    height:36px;
    cursor:pointer;
    transition:color .15s;
    line-height:1;
    font-family:inherit;
}
.subnav-arrow:hover   { color:#3a3a3a; }
.subnav-arrow:disabled { color:#d0cbc4; cursor:default; }
.anime-more-wrap { position:relative; }
.anime-more-btn {
    background:none;
    border:none;
    color:#8a8580;
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:0 14px;
    height:36px;
    cursor:pointer;
    white-space:nowrap;
    transition:color .15s, background .15s;
    font-family:inherit;
}
.anime-more-btn:hover { color:#3a3a3a; background:rgba(0,0,0,0.05); }
.anime-more-dropdown {
    display:none;
    position:absolute;
    top:36px;
    right:0;
    background:#f5f0e8;
    border:1px solid #ddd8d0;
    border-top:2px solid #3a3a3a;
    z-index:200;
    min-width:210px;
    box-shadow:0 6px 16px rgba(0,0,0,0.12);
}
.anime-more-dropdown a {
    display:flex;
    align-items:center;
    padding:8px 16px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:#8a8580 !important;
    text-decoration:none;
    border-bottom:1px solid #ede8df;
    white-space:nowrap;
    transition:all .12s;
}
.anime-more-dropdown a:last-child { border-bottom:none; }
.anime-more-dropdown a:hover      { background:rgba(0,0,0,0.04); color:#3a3a3a !important; }
.anime-more-dropdown a.active     { color:#2a2a2a !important; font-weight:700; background:rgba(0,0,0,0.06); }
.anime-dropdown-num {
    font-size:9px;
    color:#c4bdb0;
    margin-right:10px;
    font-weight:normal;
    letter-spacing:0;
    flex-shrink:0;
}

.subnav a {
    color: #8a8580 !important;
    text-decoration: none;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 0.15s;
    white-space: nowrap;
}

.subnav a:hover {
    color: #3a3a3a !important;
    background: rgba(0,0,0,0.05);
}

.subnav a.active {
    color: #3a3a3a !important;
    background: rgba(0,0,0,0.07);
    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:hidden;
}

.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 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%;
    height:200px;
    object-fit:cover;
    display:block;
}

.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;
}
.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
   ============================================================ */
.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;
    background: #f0ebe3;
    overflow: hidden;
    flex-shrink: 0;
}

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

.anime-no-cover {
    height: 160px;
    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;
}

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

.anime-detail-no-cover {
    width: 100%;
    height: 240px;
    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-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;
}

/* ============================================================
   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
   ============================================================ */
.download-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f0ebe3;
}

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

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

.download-item-title {
    font-size: 13px;
    font-weight: bold;
    color: #2a2a2a;
    margin-bottom: 3px;
}

.download-item-desc {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 4px;
}

.download-item-batch {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #c8c4bc;
}

.download-item-action {
    flex-shrink: 0;
    text-align: center;
    min-width: 120px;
}

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

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