/* Import Fonts: Inter for UI, Space Grotesk for premium headers */
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@700&display=swap);

/* =========================================
   1. BASE STYLES & LAYOUT
   ========================================= */
body { 
    font-family: 'Inter', sans-serif; 
    color: #c4d1de; 
    background-color: #0d1117; 
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed; /* RESTORED: fixed so the image spans the full page during scroll */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(/images/backgroundblack1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -2;
    will-change: transform; /* ADDED: promotes to own compositor layer, reduces repaint cost */
}

/* Ambient Blue Aurora Overlay - Subtle Clan Vibes */
body::after {
    content: "";
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(33, 97, 181, 0.08), transparent 60%),
                radial-gradient(circle at 80% 20%, rgba(74, 144, 226, 0.05), transparent 50%);
    z-index: -1;
    pointer-events: none;
    animation: none; /* CHANGED: was slowDrift 20s — animating a full-viewport fixed layer tanks scroll performance */
}
/* @keyframes slowDrift removed — re-enable at 60s+ if you want the effect back with less impact */

a { color: #4a90e2; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
a:hover { color: #72aee6; text-shadow: 0 0 10px rgba(114, 174, 230, 0.4); }
#container { width: 90%; max-width: 1400px; margin: 40px auto; }

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
#header { background: transparent; padding: 25px 5% 0 5%; border: none; margin-bottom: 10px; }
#logo { 
    font-family: 'Space Grotesk', sans-serif; 
    font-size: 32px; 
    font-weight: 700; 
    text-transform: uppercase;
    background: linear-gradient(to right, #4a90e2, #72aee6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 25px rgba(74, 144, 226, 0.2);
    display: block; margin-bottom: 25px; text-align: center; letter-spacing: 1.5px;
}
#logo img { display: block; margin: 0 auto; max-width: 100%; height: auto; filter: drop-shadow(0 0 15px rgba(74, 144, 226, 0.3)); }

.navigation { 
    display: none; /* CHANGED: hidden — breadcrumb box not needed */
}
.navigation a { color: #ffffff; font-weight: 600; }
#panel { text-align: center; margin-bottom: 0; border: none !important; background: transparent !important; }
#header a, #panel a, .menu a { color: #c4d1de !important; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s ease; }
#header a:hover, #panel a:hover, .menu a:hover { color: #72aee6 !important; text-shadow: 0 0 10px rgba(114, 174, 230, 0.6); }
.menu ul, #header ul { display: flex !important; flex-direction: row !important; justify-content: center !important; list-style: none !important; margin: 15px 0 !important; gap: 40px !important; }
.portal, .search, .memberlist, .calendar, .help { display: none !important; }
#header form { display: none !important; }

/* =========================================
   3. GLOBAL FORUM TABLES
   ========================================= */
/* CHANGED: removed backdrop-filter — replaced with opaque dark background for same visual, zero blur cost */
.tborder { background: rgba(20, 26, 34, 0.95); border: 1px solid #283445; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); margin-bottom: 35px; border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; }
.thead { background: transparent !important; color: #ffffff; font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; padding: 20px 25px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 2px solid #2161b5; }
.forum-header-container { background: #151c25 url(/images/fmdivider.png) repeat-x center top; background-size: cover; overflow: hidden; }
.tcat { background: rgba(40, 52, 69, 0.7); color: #8b9eb3; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 15px 25px; border-bottom: 1px solid #151c25; letter-spacing: 1px; }
.trow1, .trow2 { background: transparent; padding: 22px 25px; border-bottom: 1px solid #283445; transition: background 0.2s ease; } /* CHANGED: only transition background, not all properties */
.trow1:hover, .trow2:hover { background: rgba(74, 144, 226, 0.05); }

/* =========================================
   4. IPB-STYLE INDEX PAGE
   ========================================= */
/* CHANGED: removed backdrop-filter — solid opaque bg is indistinguishable at this opacity */
.category_block { background: rgba(20, 26, 34, 0.95); border: 1px solid #283445; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); margin-bottom: 40px; overflow: hidden; contain: layout style; } /* ADDED: contain to prevent layout thrashing */
.category_header { background: #151c25 url(/images/fmdivider.png) repeat-x center top; background-size: cover; padding: 20px 25px; border-bottom: 2px solid #2161b5; }
.category_header a { color: #ffffff; font-family: 'Space Grotesk'; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.forum_row { display: flex; align-items: center; padding: 25px; border-bottom: 1px solid #283445; border-left: 4px solid transparent; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; contain: layout style; } /* CHANGED: removed transform from transition, added will-change */
.forum_row:hover { background: rgba(255,255,255,0.03); border-left: 4px solid #4a90e2; box-shadow: -5px 0 20px rgba(74, 144, 226, 0.1); } /* REMOVED: transform: translateX(8px) — causes scroll jank */
.forum_row:last-child { border-bottom: none; }
.forum_icon { flex-shrink: 0; width: 60px; text-align: center; }
.node_indicator { display: inline-block; width: 14px; height: 14px; background-color: #283445; border-radius: 50%; position: relative; margin: 0 auto; transition: all 0.3s ease; }
.node_indicator.on { background-color: #4a90e2; box-shadow: 0 0 15px #4a90e2, 0 0 30px #4a90e2; }
.node_indicator.on::after { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border: 2px solid #2161b5; border-radius: 50%; animation: pulse-wild 1.5s infinite ease-out; }
@keyframes pulse-wild { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
.forum_details { flex-grow: 1; padding: 0 20px; }
.forum_stats { flex-shrink: 0; width: 120px; text-align: right; color: #8b9eb3; font-weight: 600; }
.forum_lastpost { flex-shrink: 0; width: 220px; text-align: right; padding-left: 20px; font-size: 13px; color: #8b9eb3; }
.forum_name { font-size: 18px; font-weight: 700; display: block; margin-bottom: 5px; }
.forum_name a { color: #ffffff; }
.forum_description { font-size: 13px; color: #8b9eb3; line-height: 1.6; }

/* =========================================
   5. IPB-STYLE THREAD LISTINGS
   ========================================= */
.thread_row td { padding: 20px 15px; border-bottom: 1px solid #283445; vertical-align: middle; transition: background 0.2s ease; } /* CHANGED: only transition background, not all */
.thread_row:hover td { background: rgba(74, 144, 226, 0.05) !important; } /* REMOVED: transform: scale(1.01) — causes scroll jank on table rows */
.thread_title a { color: #ffffff; font-weight: 600; font-size: 15px; }

/* =========================================
   6. IPB-STYLE POST STRUCTURE
   ========================================= */
/* CHANGED: removed backdrop-filter — the biggest scroll blur source; replaced with opaque bg */
.post { display: flex; background: rgba(20, 26, 34, 0.98); border: 1px solid #283445; border-radius: 12px; margin-bottom: 30px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; }
.post_author { width: 220px; background: rgba(0,0,0,0.3) !important; border: none !important; border-right: 1px solid #283445 !important; padding: 30px 15px !important; display: block !important; flex-shrink: 0; text-align: center; }
.author_avatar img { border-radius: 16px !important; width: 100px !important; height: 100px !important; object-fit: cover; border: 2px solid transparent; background-clip: padding-box; box-shadow: 0 0 20px rgba(33, 97, 181, 0.3); margin-bottom: 15px; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.4s ease; animation: float-avatar 6s infinite ease-in-out; will-change: transform; }
@keyframes float-avatar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(74, 144, 226, 0.4); } }
.author_avatar img:hover { transform: scale(1.1) rotate(3deg) !important; border-color: #4a90e2; box-shadow: 0 0 30px rgba(74, 144, 226, 0.6) !important; }
.post_author .smalltext { background: rgba(0,0,0,0.4); border: 1px solid rgba(74, 144, 226, 0.2); border-radius: 8px; padding: 12px; margin-top: 15px; display: inline-block; width: 85%; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.post_content { flex-grow: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; }
.post_meta { background: rgba(0,0,0,0.2); padding: 15px 25px; border-bottom: 1px solid #283445; display: flex; justify-content: space-between; font-size: 12px; color: #8b9eb3 !important; text-transform: uppercase; letter-spacing: 1px; }
.post_body { line-height: 1.8; font-size: 15px; color: #d1d9e0 !important; padding: 25px; flex-grow: 1; overflow-wrap: break-word; }
.post_head { max-width: 100%; overflow-x: hidden; }
.signature { margin-top: 30px !important; border-top: 1px dashed rgba(255,255,255,0.1) !important; padding-top: 20px !important; color: #8b9eb3; }
.postbit_group_image, .post_author img[src*="star"], .inline_rating, .star_rating, form[action*="ratethread"], #thread_rating_container { display: none !important; }

/* =========================================
   7. IPB-STYLE USER PROFILES
   ========================================= */
.profile_layout { display: flex; gap: 30px; align-items: flex-start; }
.profile_sidebar { width: 320px; flex-shrink: 0; }
/* CHANGED: removed backdrop-filter */
.profile_block { background: rgba(20, 26, 34, 0.98); border: 1px solid #283445; border-radius: 12px; margin-bottom: 30px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }

/* =========================================
   8. UI ELEMENTS & MISC
   ========================================= */
.button, a.button, button, input.button, .new_reply_button, .new_thread_button { 
    position: relative; /* ADDED: needed for ::after shine animation */
    overflow: hidden;   /* ADDED: clips the shine sweep */
    background: linear-gradient(45deg, #2161b5, #4a90e2) !important;
    background-size: 200% auto !important;
    color: #ffffff !important; 
    border-radius: 20px !important; 
    padding: 12px 25px !important; 
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important; 
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important; 
    cursor: pointer !important; 
    display: inline-block !important; 
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* CHANGED: explicit props only */
    box-shadow: 0 5px 15px rgba(33, 97, 181, 0.4) !important;
    will-change: transform; /* ADDED */
}
.button:hover, a.button:hover, button:hover, input.button:hover, .new_reply_button:hover, .new_thread_button:hover { 
    background-position: right center !important;
    transform: translateY(-3px) scale(1.05) !important; 
    box-shadow: 0 10px 25px rgba(74, 144, 226, 0.6), 0 0 15px rgba(33, 97, 181, 0.6) !important; 
}

/* =========================================
   9. CLAN HEADER & ALIGNMENT
   ========================================= */
/* CHANGED: removed backdrop-filter */
.clan-header-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; background: rgba(20, 26, 34, 0.92); padding: 70px 80px; margin-top: 30px; margin-bottom: 40px; border: 1px solid #283445; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(74, 144, 226, 0.1); overflow: hidden; }
.clan-logo-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; animation: pulse-logo 4s infinite alternate; will-change: transform, opacity; } /* ADDED: will-change for GPU promotion */
@keyframes pulse-logo { 0% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.05); } }
.clan-logo-container img { max-width: 600px; width: 100%; height: auto; display: block; filter: blur(1px); }
.clan-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 50px; width: 100%; max-width: 1100px; }
.clan-row { display: flex; justify-content: space-between; width: 100%; align-items: flex-start; }
.clan-item { display: flex; flex-direction: column; align-items: center; min-width: 200px; }
.rank-title { font-family: 'Space Grotesk'; font-size: 22px !important; font-weight: 700 !important; margin: 0 0 8px 0 !important; text-transform: uppercase; letter-spacing: 1.5px; }
.rank-name, .info-desc { color: #cccccc; font-size: 14px; margin: 0 !important; line-height: 1.6; text-align: center; }

.glow-red-gradient { background: linear-gradient(to bottom, #ff4d4d, #b30000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(179, 0, 0, 0.6); }
.glow-green-gradient { background: linear-gradient(to bottom, #00ff00, #008000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(0, 128, 0, 0.6); }
.glow-orange-gradient { background: linear-gradient(to bottom, #ffc000, #ff9f1a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(255, 159, 26, 0.6); }
.glow-purple { background: linear-gradient(to bottom, #bf40bf, #4b0082); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(191, 64, 191, 0.6); }
.glow-white { background: linear-gradient(to bottom, #ffffff, #aaaaaa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); }

/* =========================================
   10. CUSTOM SCROLLBAR & MOBILE
   ========================================= */
html { scrollbar-width: thin; scrollbar-color: #4a90e2 #0d1117; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #2161b5, #4a90e2); border-radius: 10px; }
@media screen and (max-width: 768px) {
    .post { flex-direction: column !important; }
    .post_author { width: 100% !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
    .clan-row { flex-direction: column; align-items: center; gap: 40px; } 
    .clan-logo-container img { max-width: 90% !important; margin: 0 auto; opacity: 0.15; } 
    .clan-header-wrapper { padding: 40px 20px; }
}

/* =========================================
   11. FOOTER
   ========================================= */
#footer_wrapper { 
    /* CHANGED: removed backdrop-filter — solid bg performs much better */
    background: rgba(15, 20, 27, 0.98);
    border-top: 2px solid #2161b5; 
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    padding: 40px 5% 30px 5%; 
    margin-top: 60px; 
    color: #8b9eb3; 
    width: 100%; 
    box-sizing: border-box; 
    display: flex; flex-direction: column; align-items: center; gap: 25px; 
}

.footer-links { display: flex; gap: 25px; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.footer-links li { display: inline-block; }
.footer-links a { color: #c4d1de !important; transition: all 0.2s ease; }
.footer-links a:hover { color: #72aee6 !important; text-shadow: 0 0 10px rgba(114, 174, 230, 0.5); }
.footer-links li:not(:last-child)::after { content: "•"; color: #2161b5; margin-left: 25px; text-shadow: 0 0 10px rgba(33, 97, 181, 0.5); }

.footer-bottom { display: flex; justify-content: space-between; width: 100%; align-items: flex-end; font-size: 12px; border-top: 1px solid #283445; padding-top: 25px; }
.footer-time { text-align: left; }
.footer-copyright { text-align: right; color: #8b9eb3; line-height: 1.6; }
.footer-copyright strong { color: #ffffff; font-size: 13px; }

@media screen and (max-width: 768px) {
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    .footer-time, .footer-copyright { text-align: center; }
    .footer-links li:not(:last-child)::after { display: none; }
}

/* =========================================
   12. USER CP LAYOUT & SIDEBAR
   ========================================= */
.usercp_container { display: flex; gap: 30px; align-items: flex-start; margin-top: 30px; width: 100%; }
.usercp_sidebar { width: 280px; flex-shrink: 0; }
.usercp_content { flex-grow: 1; min-width: 0; }

/* CHANGED: removed backdrop-filter */
.usercp-nav-section { background: rgba(20, 26, 34, 0.98); border: 1px solid #283445; margin-bottom: 15px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
.usercp-nav-header { background: #151c25; color: #ffffff; padding: 15px 20px; font-weight: 700; font-family: 'Space Grotesk'; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border-bottom: 1px solid #283445; transition: background 0.3s ease; } /* CHANGED: specific transition prop */
.usercp-nav-header:hover { background: rgba(33, 97, 181, 0.2); text-shadow: 0 0 10px rgba(74, 144, 226, 0.5); }

.usercp-nav-links { list-style: none; margin: 0; padding: 0; }
.usercp-nav-links li a { display: block; padding: 12px 20px 12px 25px; color: #8b9eb3 !important; text-decoration: none; border-bottom: 1px solid #283445; font-size: 13px; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } /* CHANGED: specific props only */
.usercp-nav-links li a:hover { background: rgba(255,255,255,0.03); color: #ffffff !important; border-left: 4px solid #4a90e2; padding-left: 30px; box-shadow: inset 20px 0 20px -20px rgba(74, 144, 226, 0.5); }
.usercp-nav-links li:last-child a { border-bottom: none; }

@media screen and (max-width: 768px) {
    .usercp_container { flex-direction: column; }
    .usercp_sidebar { width: 100%; margin-bottom: 25px; }
}

/* =========================================
   13. QUOTE BOXES
   ========================================= */
blockquote {
    border: 1px solid rgba(74, 144, 226, 0.2); 
    border-left: 4px solid #4a90e2; 
    background: linear-gradient(90deg, rgba(74, 144, 226, 0.05), transparent);       
    color: #cccccc;            
    margin: 15px 0;
    padding: 20px;
    border-radius: 8px;        
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; /* CHANGED: no transform in transition */
}

blockquote:hover {
    border-left: 4px solid #72aee6; 
    background: linear-gradient(90deg, rgba(114, 174, 230, 0.08), transparent); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.4); 
    /* REMOVED: transform: translateX(5px) — causes reflow on scroll */
}

blockquote cite {
    font-weight: 700;
    color: #4a90e2;            
    border-bottom: 1px dashed rgba(255,255,255,0.1); 
    font-style: normal;
    display: block;
    padding-bottom: 8px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================
   14. CUSTOM USER BADGES
   ========================================= */
.user-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px; 
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(33, 97, 181, 0.2); 
    border: 1px solid #2161b5;
    color: #ffffff;
    margin-top: 8px;
    box-shadow: 0 0 10px rgba(33, 97, 181, 0.4);
    animation: neon-pulse 2s infinite alternate;
}
@keyframes neon-pulse { 0% { box-shadow: 0 0 5px rgba(33, 97, 181, 0.4); } 100% { box-shadow: 0 0 15px rgba(74, 144, 226, 0.6), inset 0 0 10px rgba(33, 97, 181, 0.5); } }

/* =========================================
   15. INTERACTIVE INPUTS & TEXTAREAS
   ========================================= */
input[type="text"], input[type="password"], textarea, select {
    background: rgba(0,0,0,0.4);
    border: 1px solid #333333;
    color: #c4d1de;
    border-radius: 8px;
    padding: 12px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* CHANGED: specific props */
    font-family: 'Inter', sans-serif;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #4a90e2; 
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.3), inset 0 2px 5px rgba(0,0,0,0.5); 
    background: rgba(30, 30, 30, 0.8);
}

/* =========================================
   16. ANIMATED NAV UNDERLINES
   ========================================= */
#panel a, .menu a {
    position: relative; 
    display: inline-block; 
}

#panel a::after, .menu a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -6px;
    left: 0;
    background: linear-gradient(90deg, #2161b5, #4a90e2);
    transform: scaleX(0); 
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.5); 
}

#panel a:hover::after, .menu a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* =========================================
   17. POST HOVER FOCUS
   ========================================= */
.post:hover {
    border-color: rgba(74, 144, 226, 0.4); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 20px rgba(74, 144, 226, 0.15); 
    transform: translate3d(0, -4px, 0) scale(1.005); /* CHANGED: translate3d forces GPU compositing */
}

/* =========================================
   18. CUSTOM TEXT SELECTION
   ========================================= */
::selection {
    background: rgba(74, 144, 226, 0.5); 
    color: #ffffff; 
    text-shadow: 0 0 10px #ffffff;
}

::-moz-selection { 
    background: rgba(74, 144, 226, 0.5);
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff;
}

/* =========================================
   19. BUTTON SHINE ANIMATION
   ========================================= */
.button::after, a.button::after, button::after, input.button::after, .new_reply_button::after, .new_thread_button::after {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%;
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); 
    transition: left 0.6s ease;
}
.button:hover::after, a.button:hover::after, button:hover::after, input.button:hover::after, .new_reply_button:hover::after, .new_thread_button:hover::after { 
    left: 200%; 
}

/* =========================================
   20. HIDE ONLINE STATUS 
   ========================================= */
.post_author img[src*="online"], .post_author img[src*="offline"] {
    display: none !important;
}

/* =========================================
   21. CINEMATIC IMAGE ZOOM
   ========================================= */
.post_body img {
    max-width: 100%;
    border-radius: 10px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease; /* CHANGED: specific props */
    border: 2px solid transparent;
    will-change: transform; /* ADDED */
}
.post_body img:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(74, 144, 226, 0.2); 
    z-index: 10;
    position: relative;
    border-color: #4a90e2;
}

/* =========================================
   23. NEW THREAD / REPLY FORM
   ========================================= */

/* --- Outer wrappers --- */
#newthread, #newreply, #editpost {
    background: transparent !important;
    border: none !important;
}

/* --- Main panel --- */
#newthread .tborder,
#newreply .tborder,
#editpost .tborder {
    background: rgba(20, 26, 34, 0.98) !important;
    border: 1px solid #283445 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

/* --- Section headers --- */
#newthread .thead,
#newreply .thead,
#editpost .thead {
    background: #151c25 !important;
    color: #ffffff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #2161b5 !important;
}

/* --- All inner cells --- */
#newthread td,
#newreply td,
#editpost td {
    background: transparent !important;
    border-color: #283445 !important;
    color: #c4d1de !important;
    padding: 14px 20px !important;
    vertical-align: top !important;
}

/* --- Nuke trow white backgrounds --- */
#newthread .trow1,
#newthread .trow2,
#newreply .trow1,
#newreply .trow2,
#editpost .trow1,
#editpost .trow2 {
    background: transparent !important;
}

/* --- Label column --- */
#newthread td.trow1:first-child,
#newreply td.trow1:first-child,
#editpost td.trow1:first-child,
#newthread td.trow2:first-child,
#newreply td.trow2:first-child,
#editpost td.trow2:first-child {
    color: #4a90e2 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    width: 160px !important;
}

/* --- Subject input --- */
#newthread input[name="subject"],
#newreply input[name="subject"],
#editpost input[name="subject"] {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid #283445 !important;
    border-radius: 8px !important;
    color: #c4d1de !important;
    padding: 12px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
#newthread input[name="subject"]:focus,
#newreply input[name="subject"]:focus,
#editpost input[name="subject"]:focus {
    border-color: #4a90e2 !important;
    box-shadow: 0 0 12px rgba(74, 144, 226, 0.25) !important;
    outline: none !important;
}

/* -------------------------------------------------------
   SCEditor — the rich text editor MyBB uses for new thread
   The iframe content itself cannot be reached by CSS, but
   we can style the container, toolbar, and force the iframe
   background via the sceditor skin classes MyBB injects.
   ------------------------------------------------------- */

/* Outer container div SCEditor wraps the iframe in */
.sceditor-container {
    border: 1px solid #283445 !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    background: #13191f !important; /* shows behind iframe while it loads */
}

/* SCEditor toolbar */
.sceditor-toolbar {
    background: rgba(15, 20, 28, 0.95) !important;
    border-bottom: 1px solid #283445 !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px !important;
    margin: 0 !important;
}

/* SCEditor toolbar button groups */
.sceditor-toolbar .sceditor-group {
    border-right: 1px solid #283445 !important;
    margin-right: 4px !important;
    padding-right: 4px !important;
}
.sceditor-toolbar .sceditor-group:last-child {
    border-right: none !important;
}

/* Individual toolbar buttons */
.sceditor-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    padding: 4px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    opacity: 0.75;
}
.sceditor-button:hover {
    background: rgba(74, 144, 226, 0.2) !important;
    border-color: rgba(74, 144, 226, 0.4) !important;
    opacity: 1;
}
.sceditor-button.active,
.sceditor-button:active {
    background: rgba(33, 97, 181, 0.35) !important;
    border-color: #4a90e2 !important;
    opacity: 1;
}

/* Force the iframe itself dark — MyBB injects a style tag into
   the iframe document. We override the container background so
   the white flash is gone even before the iframe styles load. */
.sceditor-container iframe {
    background: #13191f !important;
    color-scheme: dark !important; /* tells the browser to use dark scrollbars inside */
}

/* MyBB also outputs a plain textarea fallback when SCEditor is
   disabled or in source mode — style that too */
.sceditor-container textarea,
#message, textarea[name="message"] {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #13191f !important;
    border: none !important;
    color: #c4d1de !important;
    padding: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    min-height: 300px !important;
    resize: vertical !important;
    transition: box-shadow 0.3s ease !important;
}
.sceditor-container textarea:focus,
#message:focus, textarea[name="message"]:focus {
    box-shadow: inset 0 0 0 1px #4a90e2 !important;
    outline: none !important;
}

/* Source mode toggle button */
.sceditor-button-source {
    margin-left: 4px !important;
}

/* --- Old-style codebuttons fallback (non-SCEditor installs) --- */
#codebuttons, .codebuttons {
    background: rgba(15, 20, 28, 0.9) !important;
    border: 1px solid #283445 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.codebuttons input[type="button"],
.codebuttons input[type="submit"],
#codebuttons input[type="button"] {
    background: rgba(33, 97, 181, 0.2) !important;
    border: 1px solid rgba(74, 144, 226, 0.3) !important;
    color: #c4d1de !important;
    border-radius: 5px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.codebuttons input[type="button"]:hover,
#codebuttons input[type="button"]:hover {
    background: rgba(74, 144, 226, 0.35) !important;
    border-color: #4a90e2 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Options section --- */
#newthread .trow1 input[type="checkbox"],
#newreply .trow1 input[type="checkbox"],
#editpost .trow1 input[type="checkbox"],
#newthread .trow2 input[type="checkbox"],
#newreply .trow2 input[type="checkbox"],
#editpost .trow2 input[type="checkbox"] {
    accent-color: #4a90e2;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* --- Dropdowns --- */
#newthread select,
#newreply select,
#editpost select {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid #283445 !important;
    border-radius: 8px !important;
    color: #c4d1de !important;
    padding: 10px 14px !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color 0.3s ease !important;
    cursor: pointer !important;
}
#newthread select:focus,
#newreply select:focus,
#editpost select:focus {
    border-color: #4a90e2 !important;
    outline: none !important;
}

/* --- Smilies panel --- */
.smilie_div, #smilie_div {
    background: rgba(20, 26, 34, 0.95) !important;
    border: 1px solid #283445 !important;
    border-radius: 8px !important;
    padding: 12px !important;
}
.smilie_div a img, #smilie_div a img {
    border-radius: 4px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    opacity: 0.85;
}
.smilie_div a img:hover, #smilie_div a img:hover {
    transform: scale(1.3) !important;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.5) !important;
    opacity: 1;
}

/* --- Submit / Preview button row --- */
#newthread .tfoot,
#newreply .tfoot,
#editpost .tfoot {
    background: rgba(15, 20, 28, 0.8) !important;
    border-top: 1px solid #283445 !important;
    padding: 20px !important;
    text-align: right !important;
    border-radius: 0 0 12px 12px !important;
}

/* =========================================
   22. CUSTOM POST-BIT STATS STYLING
   ========================================= */
.author_statistics {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(74, 144, 226, 0.15);
    font-size: 13px;
    line-height: 2.2; 
    text-align: center; 
    display: inline-block;
    width: 85%; 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
}

.author_statistics strong {
    color: #4a90e2;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    margin-right: 10px;
    display: inline-block;
    width: 50px; 
    text-align: right; 
    text-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
}

/* =========================================
   24. QUICK REPLY BOX
   ========================================= */

/* Outer wrapper */
#quickreply_form,
#quickreply,
#qr_ {
    background: transparent !important;
    border: none !important;
}

/* Main panel — match .tborder / new thread aesthetic */
#quickreply_form .tborder,
#quickreply .tborder,
#qr_ .tborder,
#quickreply_form > table,
#quickreply > table {
    background: rgba(20, 26, 34, 0.98) !important;
    border: 1px solid #283445 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* Header row */
#quickreply_form .thead,
#quickreply .thead,
#qr_ .thead {
    background: #151c25 !important;
    color: #ffffff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #2161b5 !important;
}

/* All inner cells */
#quickreply_form td,
#quickreply td,
#qr_ td {
    background: transparent !important;
    border-color: #283445 !important;
    color: #c4d1de !important;
    padding: 14px 20px !important;
    vertical-align: top !important;
}

/* Nuke trow white backgrounds */
#quickreply_form .trow1,
#quickreply_form .trow2,
#quickreply .trow1,
#quickreply .trow2,
#qr_ .trow1,
#qr_ .trow2 {
    background: transparent !important;
}

/* Textarea */
#quickreply_form textarea,
#quickreply textarea,
#message_quick {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid #283445 !important;
    border-radius: 8px !important;
    color: #c4d1de !important;
    padding: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    min-height: 160px !important;
    resize: vertical !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
#quickreply_form textarea:focus,
#quickreply textarea:focus,
#message_quick:focus {
    border-color: #4a90e2 !important;
    box-shadow: 0 0 12px rgba(74, 144, 226, 0.2) !important;
    outline: none !important;
}

/* Toolbar (if SCEditor loads in quick reply) */
#quickreply_form .codebuttons,
#quickreply .codebuttons {
    background: rgba(15, 20, 28, 0.9) !important;
    border: 1px solid #283445 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 10px 12px !important;
}

/* Footer / submit row */
#quickreply_form .tfoot,
#quickreply .tfoot,
#qr_ .tfoot {
    background: rgba(15, 20, 28, 0.8) !important;
    border-top: 1px solid #283445 !important;
    padding: 16px 20px !important;
    border-radius: 0 0 12px 12px !important;
}