/* Import Fonts */
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@600;700&family=Space+Grotesk:wght@700&display=swap);
/* UPGRADE: Added Oswald for condensed headers — creates strong typographic hierarchy */

/* =========================================
   CSS CUSTOM PROPERTIES — Electric Palette
   ========================================= */
:root {
    --electric-blue:   #00d4ff;   /* cyan accent — links, active states, glows   */
    --electric-glow:   rgba(0, 212, 255, 0.45);
    --electric-subtle: rgba(0, 212, 255, 0.15);
    --steel-blue:      #4a90e2;   /* existing blue — buttons, borders             */
    --deep-blue:       #2161b5;
    --glass-bg:        rgba(18, 18, 22, 0.97);  /* solid dark — no blur needed    */
    --glass-border:    rgba(0, 212, 255, 0.12); /* electric-tinted border          */
    --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--glass-border);
    --surface-dark:    #0d1117;
    --text-primary:    #e2eaf3;
    --text-muted:      #8b9eb3;
}

/* =========================================
   1. BASE STYLES & LAYOUT
   ========================================= */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background-color: var(--surface-dark);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    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;
}

/* Ambient electric aurora overlay */
body::after {
    content: "";
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.04), transparent 60%),
                radial-gradient(circle at 80% 20%, rgba(33, 97, 181, 0.06), transparent 50%);
    z-index: -1;
    pointer-events: none;
    animation: none;
}

/* UPGRADE: Electric cyan for links */
a { color: var(--electric-blue); text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; }
a:hover { color: #ffffff; text-shadow: 0 0 8px var(--electric-glow); }

#container { width: 90%; max-width: 1400px; margin: 40px auto; }

/* =========================================
   UPGRADE 4: Page Entry Animation
   Containers fade in and slide up on load
   ========================================= */
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   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, var(--electric-blue), #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block; margin-bottom: 25px; text-align: center; letter-spacing: 1.5px;
    filter: drop-shadow(0 0 12px var(--electric-glow));
}
#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; }
.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: var(--text-primary) !important;
    font-weight: 600; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
#header a:hover, #panel a:hover, .menu a:hover {
    color: var(--electric-blue) !important;
    text-shadow: 0 0 8px var(--electric-glow);
}
.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
   UPGRADE 1: Floating Glass Effect
   ========================================= */
.tborder {
    background: var(--glass-bg);
    -webkit-
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
    margin-bottom: 35px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
}

/* UPGRADE 3: Oswald for all section headers */
.thead {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
    font-size: 15px; font-weight: 700;
    padding: 18px 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--deep-blue);
    /* UPGRADE 2: Electric glow on headers */
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.forum-header-container {
    background: #151c25 url(/images/fmdivider.png) repeat-x center top;
    background-size: cover; overflow: hidden;
}

.tcat {
    background: rgba(0, 0, 0, 0.3);
    color: var(--electric-blue);
    font-family: 'Oswald', sans-serif;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    padding: 12px 25px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08);
    letter-spacing: 2px;
}

/* UPGRADE 4: Charcoal hover transition */
.trow1, .trow2 {
    background: transparent;
    padding: 22px 25px;
    border-bottom: 1px solid rgba(40, 52, 69, 0.6);
    transition: background 0.25s ease;
}
.trow1:hover, .trow2:hover { background: rgba(30, 38, 50, 0.7); }

/* =========================================
   4. IPB-STYLE INDEX PAGE
   ========================================= */
.category_block {
    background: var(--glass-bg);
    -webkit-
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
    margin-bottom: 40px;
    overflow: hidden;
    contain: layout style;
}

.category_header {
    background: rgba(0, 0, 0, 0.4) url(/images/fmdivider.png) repeat-x center top;
    background-size: cover;
    padding: 20px 25px;
    border-bottom: 2px solid var(--deep-blue);
}
/* UPGRADE 2 + 3: Oswald + electric glow on board titles */
.category_header a {
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
    font-size: 18px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.category_header a:hover {
    color: var(--electric-blue);
    text-shadow: 0 0 14px var(--electric-glow);
}

.forum_row {
    display: flex; align-items: center;
    padding: 25px;
    border-bottom: 1px solid rgba(40, 52, 69, 0.5);
    border-left: 3px solid transparent;
    /* UPGRADE 4: Smooth charcoal hover */
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
    contain: layout style;
}
.forum_row:hover {
    background: rgba(30, 38, 50, 0.75);
    border-left-color: var(--electric-blue);
    box-shadow: inset 4px 0 20px rgba(0, 212, 255, 0.08);
}
.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: var(--electric-blue);
    box-shadow: 0 0 10px var(--electric-blue), 0 0 25px var(--electric-glow);
}
.node_indicator.on::after {
    content: '';
    position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px;
    border: 2px solid var(--electric-blue);
    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: var(--text-muted); font-weight: 600; }
.forum_lastpost { flex-shrink: 0; width: 220px; text-align: right; padding-left: 20px; font-size: 13px; color: var(--text-muted); }

/* UPGRADE 2+3: Board names with electric glow on hover */
.forum_name { font-size: 17px; font-weight: 700; display: block; margin-bottom: 5px; }
.forum_name a {
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.forum_name a:hover {
    color: var(--electric-blue);
    text-shadow: 0 0 14px var(--electric-glow);
}
.forum_description { font-size: 13px; color: var(--text-muted); line-height: 1.6; font-family: 'Inter', sans-serif; }

/* =========================================
   5. IPB-STYLE THREAD LISTINGS
   ========================================= */
.thread_row td {
    padding: 20px 15px;
    border-bottom: 1px solid rgba(40, 52, 69, 0.5);
    vertical-align: middle;
    transition: background 0.25s ease;
}
.thread_row:hover td { background: rgba(30, 38, 50, 0.7) !important; }

/* UPGRADE 3: Thread titles use Inter bold for readable body-level hierarchy */
.thread_title a {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
.thread_title a:hover {
    color: var(--electric-blue);
    text-shadow: 0 0 8px var(--electric-glow);
}

/* =========================================
   6. IPB-STYLE POST STRUCTURE
   UPGRADE 1: Floating glass on posts
   ========================================= */
.post {
    display: flex;
    background: var(--glass-bg);
    -webkit-
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.post:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0, 212, 255, 0.08);
    transform: translate3d(0, -3px, 0);
}

.post_author {
    width: 220px;
    background: rgba(0,0,0,0.25) !important;
    border: none !important;
    border-right: 1px solid rgba(0, 212, 255, 0.08) !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(0, 212, 255, 0.15);
    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(0, 212, 255, 0.25); }
}
.author_avatar img:hover {
    transform: scale(1.1) rotate(3deg) !important;
    border-color: var(--electric-blue);
    box-shadow: 0 0 30px var(--electric-glow) !important;
}
.post_author .smalltext {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(0, 212, 255, 0.1);
    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 rgba(0, 212, 255, 0.06);
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--text-muted) !important;
    text-transform: uppercase; letter-spacing: 1px;
    font-family: 'Oswald', sans-serif;
}
/* UPGRADE 3: Post body uses Inter for maximum readability */
.post_body {
    line-height: 1.85;
    font-size: 15px;
    color: #d8e2ec !important;
    padding: 25px;
    flex-grow: 1;
    overflow-wrap: break-word;
    font-family: 'Inter', sans-serif;
}
.post_head { max-width: 100%; overflow-x: hidden; }
.signature {
    margin-top: 30px !important;
    border-top: 1px dashed rgba(0, 212, 255, 0.1) !important;
    padding-top: 20px !important;
    color: var(--text-muted);
}
.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; }
.profile_block {
    background: var(--glass-bg);
    -webkit-
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 30px; padding: 30px;
    box-shadow: var(--glass-shadow);
}

/* =========================================
   8. UI ELEMENTS & MISC
   ========================================= */
.button, a.button, button, input.button, .new_reply_button, .new_thread_button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, var(--deep-blue), var(--electric-blue)) !important;
    background-size: 200% auto !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 12px 25px !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.25) !important;
    will-change: transform;
}
.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.04) !important;
    box-shadow: 0 10px 25px rgba(0, 212, 255, 0.4), 0 0 15px rgba(0, 212, 255, 0.2) !important;
}

/* =========================================
   9. CLAN HEADER & ALIGNMENT
   ========================================= */
.clan-header-wrapper {
    position: relative; display: flex; flex-direction: column; align-items: center;
    background: var(--glass-bg);
    padding: 70px 80px; margin-top: 30px; margin-bottom: 40px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--glass-shadow), inset 0 0 30px rgba(0, 212, 255, 0.04);
    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;
}
@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; padding: 0 30px; }
.clan-item { display: flex; flex-direction: column; align-items: center; min-width: 220px; }
.rank-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px !important; font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase; letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}
.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: var(--electric-blue) var(--surface-dark); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-dark); }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--deep-blue), var(--electric-blue)); 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 {
    background: rgba(10, 14, 20, 0.92); -webkit-
    border-top: 2px solid var(--deep-blue);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    padding: 40px 5% 30px 5%;
    margin-top: 60px;
    color: var(--text-muted);
    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: var(--text-primary) !important; transition: color 0.2s ease, text-shadow 0.2s ease; }
.footer-links a:hover { color: var(--electric-blue) !important; text-shadow: 0 0 8px var(--electric-glow); }
.footer-links li:not(:last-child)::after { content: "•"; color: var(--deep-blue); margin-left: 25px; }
.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: var(--text-muted); 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; }

.usercp-nav-section {
    background: var(--glass-bg); -webkit-
    border: 1px solid var(--glass-border);
    margin-bottom: 15px; border-radius: 12px; overflow: hidden;
    box-shadow: var(--glass-shadow);
}
.usercp-nav-header {
    background: rgba(0,0,0,0.4);
    color: #ffffff; padding: 15px 20px;
    font-weight: 700; font-family: 'Oswald', sans-serif;
    text-transform: uppercase; letter-spacing: 2px;
    cursor: pointer; border-bottom: 1px solid rgba(0,212,255,0.08);
    transition: background 0.3s ease, text-shadow 0.3s ease;
}
.usercp-nav-header:hover { background: rgba(0, 212, 255, 0.08); text-shadow: 0 0 8px var(--electric-glow); }
.usercp-nav-links { list-style: none; margin: 0; padding: 0; }
.usercp-nav-links li a {
    display: block; padding: 12px 20px 12px 25px;
    color: var(--text-muted) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(40,52,69,0.5);
    font-size: 13px;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.usercp-nav-links li a:hover {
    background: rgba(0, 212, 255, 0.05);
    color: var(--electric-blue) !important;
    border-left: 3px solid var(--electric-blue);
    padding-left: 30px;
}
.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(0, 212, 255, 0.15);
    border-left: 4px solid var(--electric-blue);
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.04), 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;
}
blockquote:hover {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.07), transparent);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
blockquote cite {
    font-weight: 700; color: var(--electric-blue);
    border-bottom: 1px dashed rgba(0, 212, 255, 0.2);
    font-style: normal; display: block;
    padding-bottom: 8px; margin: 0 0 15px 0;
    text-transform: uppercase; letter-spacing: 1px;
    font-family: 'Oswald', sans-serif;
}

/* =========================================
   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(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.4);
    color: var(--electric-blue);
    margin-top: 8px;
    animation: neon-pulse 2s infinite alternate;
    font-family: 'Oswald', sans-serif;
}
@keyframes neon-pulse {
    0%   { box-shadow: 0 0 5px rgba(0, 212, 255, 0.3); }
    100% { box-shadow: 0 0 15px rgba(0, 212, 255, 0.6), inset 0 0 10px rgba(0, 212, 255, 0.2); }
}

/* =========================================
   15. INTERACTIVE INPUTS & TEXTAREAS
   ========================================= */
input[type="text"], input[type="password"], textarea, select {
    background: rgba(0,0,0,0.4);
    border: 1px solid #333333;
    color: var(--text-primary);
    border-radius: 8px; padding: 12px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    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: var(--electric-blue);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2), inset 0 2px 5px rgba(0,0,0,0.5);
    background: rgba(18, 18, 18, 0.9);
}

/* =========================================
   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: 2px;
    bottom: -6px; left: 0;
    background: linear-gradient(90deg, var(--deep-blue), var(--electric-blue));
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 8px var(--electric-glow);
}
#panel a:hover::after, .menu a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* =========================================
   17. POST HOVER FOCUS
   ========================================= */
/* (Handled inline in section 6) */

/* =========================================
   18. CUSTOM TEXT SELECTION
   ========================================= */
::selection      { background: rgba(0, 212, 255, 0.35); color: #ffffff; }
::-moz-selection { background: rgba(0, 212, 255, 0.35); color: #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.25) 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;
    border: 2px solid transparent;
    will-change: transform;
}
.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(0, 212, 255, 0.15);
    z-index: 10; position: relative;
    border-color: var(--electric-blue);
}

/* =========================================
   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(0, 212, 255, 0.1);
    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: var(--electric-blue);
    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(0, 212, 255, 0.3);
}

/* =========================================
   23. NEW THREAD / REPLY FORM
   ========================================= */
#newthread, #newreply, #editpost {
    background: transparent !important;
    border: none !important;
}
#newthread .tborder,
#newreply .tborder,
#editpost .tborder {
    background: var(--glass-bg) !important;
    -webkit-
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--glass-shadow) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}
#newthread .thead,
#newreply .thead,
#editpost .thead {
    background: rgba(0,0,0,0.35) !important;
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 2px !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid var(--deep-blue) !important;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important;
}
#newthread td,
#newreply td,
#editpost td {
    background: transparent !important;
    border-color: rgba(0,212,255,0.08) !important;
    color: var(--text-primary) !important;
    padding: 14px 20px !important;
    vertical-align: top !important;
}
#newthread .trow1, #newthread .trow2,
#newreply .trow1,  #newreply .trow2,
#editpost .trow1,  #editpost .trow2 { background: transparent !important; }

#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: var(--electric-blue) !important;
    font-family: 'Oswald', 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;
}
#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: var(--text-primary) !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: var(--electric-blue) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2) !important;
    outline: none !important;
}
.sceditor-container {
    border: 1px solid #283445 !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    background: #13191f !important;
}
.sceditor-toolbar {
    background: rgba(10, 14, 20, 0.95) !important;
    border-bottom: 1px solid rgba(0,212,255,0.1) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px !important; margin: 0 !important;
}
.sceditor-toolbar .sceditor-group {
    border-right: 1px solid rgba(0,212,255,0.1) !important;
    margin-right: 4px !important; padding-right: 4px !important;
}
.sceditor-toolbar .sceditor-group:last-child { border-right: none !important; }
.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(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    opacity: 1;
}
.sceditor-button.active, .sceditor-button:active {
    background: rgba(0, 212, 255, 0.25) !important;
    border-color: var(--electric-blue) !important;
    opacity: 1;
}
.sceditor-container iframe { background: #13191f !important; color-scheme: dark !important; }
.sceditor-container textarea,
#message, textarea[name="message"] {
    width: 100% !important; box-sizing: border-box !important;
    background: #13191f !important; border: none !important;
    color: var(--text-primary) !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 var(--electric-blue) !important;
    outline: none !important;
}
#codebuttons, .codebuttons {
    background: rgba(10, 14, 20, 0.95) !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(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    color: var(--text-primary) !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(0, 212, 255, 0.25) !important;
    border-color: var(--electric-blue) !important;
    transform: none !important; box-shadow: none !important;
}
#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: var(--electric-blue);
    width: 15px; height: 15px; cursor: pointer;
}
#newthread select, #newreply select, #editpost select {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid #283445 !important; border-radius: 8px !important;
    color: var(--text-primary) !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: var(--electric-blue) !important; outline: none !important;
}
.smilie_div, #smilie_div {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !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 var(--electric-glow) !important;
    opacity: 1;
}
#newthread .tfoot, #newreply .tfoot, #editpost .tfoot {
    background: rgba(10, 14, 20, 0.8) !important;
    border-top: 1px solid rgba(0,212,255,0.08) !important;
    padding: 20px !important; text-align: right !important;
    border-radius: 0 0 12px 12px !important;
}

/* =========================================
   24. QUICK REPLY BOX
   ========================================= */
#quickreply_form, #quickreply, #qr_ {
    background: transparent !important;
    border: none !important;
}
#quickreply_form .tborder, #quickreply .tborder, #qr_ .tborder,
#quickreply_form > table,  #quickreply > table {
    background: var(--glass-bg) !important;
    -webkit-
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--glass-shadow) !important;
    overflow: hidden !important; width: 100% !important;
}
#quickreply_form .thead, #quickreply .thead, #qr_ .thead {
    background: rgba(0,0,0,0.35) !important;
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 2px !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid var(--deep-blue) !important;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important;
}
#quickreply_form td, #quickreply td, #qr_ td {
    background: transparent !important;
    border-color: rgba(0,212,255,0.08) !important;
    color: var(--text-primary) !important;
    padding: 14px 20px !important; vertical-align: top !important;
}
#quickreply_form .trow1, #quickreply_form .trow2,
#quickreply .trow1,       #quickreply .trow2,
#qr_ .trow1,              #qr_ .trow2 { background: transparent !important; }

#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: var(--text-primary) !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: var(--electric-blue) !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.2) !important;
    outline: none !important;
}
#quickreply_form .codebuttons, #quickreply .codebuttons {
    background: rgba(10, 14, 20, 0.95) !important;
    border: 1px solid #283445 !important; border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important; padding: 10px 12px !important;
}
#quickreply_form .tfoot, #quickreply .tfoot, #qr_ .tfoot {
    background: rgba(10, 14, 20, 0.8) !important;
    border-top: 1px solid rgba(0,212,255,0.08) !important;
    padding: 16px 20px !important;
    border-radius: 0 0 12px 12px !important;
}