/* =====================================================================
   ESAForum - Gaming Dark Theme
   Created by ESAGAMES HOSTING SHIELD SRL
   ===================================================================== */

:root {
    /* Core palette */
    --bg-0: #070912;
    --bg-1: #0b0e1a;
    --bg-2: #11152400;
    --surface: #131829;
    --surface-2: #1a2034;
    --surface-3: #232a42;
    --elev: #161c2f;
    --border: #232a42;
    --border-soft: #1c2236;

    /* Text */
    --text: #e6e9f2;
    --text-dim: #aab1c5;
    --text-mute: #6c7591;

    /* Accents */
    --primary: #7c5cff;
    --primary-2: #9d7bff;
    --accent: #2f6bff;
    --accent-2: #18c8ff;
    --pink: #ff5c8a;
    --green: #2ee6a6;
    --amber: #f5b301;
    --red: #ff4d6d;

    --grad-primary: linear-gradient(135deg, #7c5cff 0%, #2f6bff 100%);
    --grad-pink: linear-gradient(135deg, #ff5c8a 0%, #7c5cff 100%);
    --grad-cyan: linear-gradient(135deg, #18c8ff 0%, #7c5cff 100%);
    --grad-surface: linear-gradient(180deg, rgba(124,92,255,.06), rgba(47,107,255,0));

    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 20px;
    --shadow: 0 10px 30px rgba(0,0,0,.45);
    --shadow-glow: 0 0 0 1px rgba(124,92,255,.25), 0 8px 30px rgba(124,92,255,.18);
    --ring: 0 0 0 3px rgba(124,92,255,.30);
    --primary-glow: rgba(124,92,255,.16);

    --header-h: 64px;
    --maxw: 1460px;
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --transition: .18s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg-0);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
a { color: var(--primary-2); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-2); }
img { max-width: 100%; }
h1,h2,h3,h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
::selection { background: rgba(124,92,255,.4); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.row { display: flex; gap: 22px; align-items: flex-start; }
.col-main { flex: 1; min-width: 0; }
.col-side { width: 300px; flex-shrink: 0; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.text-center{text-align:center}.text-dim{color:var(--text-dim)}.text-mute{color:var(--text-mute)}
.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;align-items:center;gap:10px}.gap-1{gap:8px}.gap-2{gap:16px}
.wrap{flex-wrap:wrap}.grow{flex:1}.hidden{display:none}

/* ---------------- Header / Navbar ---------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(11,14,26,.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    height: var(--header-h);
}
.site-header .container { display: flex; align-items: center; height: 100%; gap: 22px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -.03em; }
.brand .logo-mark {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--grad-primary); box-shadow: var(--shadow-glow); font-size: 18px;
}
.brand b { background: var(--grad-cyan); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.main-nav { display: flex; gap: 4px; margin-left: 8px; }
.main-nav a {
    padding: 8px 14px; border-radius: 9px; color: var(--text-dim); font-weight: 600; font-size: 14px;
    transition: all var(--transition);
}
.main-nav a:hover { color: #fff; background: var(--surface-2); }
.main-nav a.active { color: #fff; background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--primary); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Search as a clean pill: icon + input are flex children (no overlap possible) */
.search-mini { position: relative; display:flex; align-items:center; gap:9px; background: var(--surface); border:1px solid var(--border); border-radius:10px; padding:0 14px; width:250px; transition: width var(--transition), box-shadow var(--transition), border-color var(--transition); }
.search-mini:focus-within { border-color: var(--primary); box-shadow: var(--ring); width:300px; }
.search-mini .icon { color: var(--text-mute); flex-shrink:0; display:block; }
.search-mini input {
    flex:1; min-width:0; background: transparent; border:none; color: var(--text);
    padding: 9px 0; font-size: 13.5px;
}
.search-mini input:focus { outline:none; }
.search-mini input::-webkit-search-decoration,.search-mini input::-webkit-search-cancel-button,.search-mini input::-webkit-search-results-button{ -webkit-appearance:none; display:none; }
.search-mini .search-results { left:0; right:0; top: calc(100% + 8px); min-width:100%; max-height: 360px; overflow-y:auto; }
.search-mini .search-results a { display:block; padding:9px 12px; border-radius:8px; color:var(--text-dim); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-mini .search-results a:hover { background: var(--surface-2); color:#fff; }

/* Avatar + dropdown */
.avatar { border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.avatar.sm{width:28px;height:28px}.avatar.md{width:40px;height:40px}.avatar.lg{width:64px;height:64px}.avatar.xl{width:110px;height:110px}
.user-menu { position: relative; }
.user-menu .trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px; border-radius: 30px; }
.user-menu .trigger:hover { background: var(--surface-2); }
.dropdown {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
    background: var(--elev); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all var(--transition); z-index: 200;
}
.dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a, .dropdown button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 12px; border-radius: 9px; color: var(--text-dim); font-size: 14px; background: none; border: none; cursor: pointer; font-family: inherit;
}
.dropdown a:hover, .dropdown button:hover { background: var(--surface-2); color: #fff; }
.dropdown .divider { height: 1px; background: var(--border); margin: 6px 0; }

.icon-btn {
    position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; transition: all var(--transition);
}
.icon-btn:hover { color: #fff; border-color: var(--primary); background: var(--surface-2); }
.badge-count {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px;
    display: grid; place-items: center; border: 2px solid var(--bg-1);
}

/* ---------------- Buttons ---------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: 11px; font-weight: 600; font-size: 14px; cursor: pointer;
    border: 1px solid transparent; transition: all var(--transition); font-family: inherit; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 6px 18px rgba(124,92,255,.35); }
.btn-primary:hover { color: #fff; box-shadow: 0 8px 26px rgba(124,92,255,.55); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--primary); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { color:#fff; filter: brightness(1.1); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------------- Cards / Panels ---------------- */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.card-pad { padding: 20px; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-head h2, .card-head h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.panel-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); margin: 0 0 12px; }

/* ---------------- Forum index (category / forum rows) ---------------- */
.category { margin-bottom: 26px; }
.category > .cat-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 6px; margin-bottom: 12px;
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.cat-head .bar { width: 4px; height: 18px; border-radius: 4px; background: var(--grad-primary); }
.forum-list { display: flex; flex-direction: column; gap: 12px; }
.forum-row {
    display: grid; grid-template-columns: 54px 1fr 130px 230px; align-items: center; gap: 16px;
    padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    transition: all var(--transition); position: relative; overflow: hidden;
}
.forum-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--grad-primary); opacity:0; transition: opacity var(--transition); }
.forum-row:hover { border-color: var(--surface-3); transform: translateY(-2px); box-shadow: var(--shadow); }
.forum-row:hover::before { opacity: 1; }
.forum-icon {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
    background: var(--grad-surface), var(--surface-2); border: 1px solid var(--border);
}
.forum-info h3 { margin: 0 0 3px; font-size: 16px; }
.forum-info h3 a { color: #fff; }
.forum-info p { margin: 0; color: var(--text-mute); font-size: 13px; }
.forum-info .sub-forums { margin-top: 6px; font-size: 12px; }
.forum-info .sub-forums a { color: var(--text-dim); }
.forum-stats { text-align: center; color: var(--text-dim); font-size: 13px; }
.forum-stats b { color: #fff; display: block; font-size: 17px; }
.forum-last { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-mute); }
.forum-last .meta b { color: var(--text); font-weight: 600; display:block; }
.forum-last a { color: var(--text-dim); }

/* ---------------- Topic list ---------------- */
.topic-list { display: flex; flex-direction: column; }
.topic-row {
    display: grid; grid-template-columns: 44px 1fr 90px 90px 190px; align-items: center; gap: 14px;
    padding: 14px 16px; border-bottom: 1px solid var(--border-soft); transition: background var(--transition);
}
.topic-row:hover { background: var(--surface-2); }
.topic-row:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.topic-icon { width: 44px; height: 44px; border-radius: 12px; display:grid; place-items:center; background: var(--surface-2); color: var(--text-mute); font-size: 18px; }
.topic-icon.unread { color: var(--primary-2); box-shadow: inset 0 0 0 1px var(--primary); }
.topic-main .title { font-size: 15px; font-weight: 600; }
.topic-main .title a { color: #fff; }
.topic-main .meta { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; }
.topic-col { text-align: center; font-size: 13px; color: var(--text-dim); }
.topic-col b { color: #fff; }

/* Badges & prefixes & tags */
.prefix { display:inline-block; padding: 2px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color:#fff; vertical-align: middle; margin-right: 6px; }
.tag { display: inline-flex; align-items:center; gap:4px; padding: 3px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.tag:hover { border-color: var(--primary); color: #fff; }
.badge { display: inline-flex; align-items:center; gap:5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.badge-pin { background: rgba(245,179,1,.14); color: var(--amber); }
.badge-lock { background: rgba(255,77,109,.14); color: var(--red); }
.badge-new { background: rgba(46,230,166,.14); color: var(--green); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius: 9px; background: var(--surface-2); border:1px solid var(--border); font-size:12.5px; color: var(--text-dim);}

/* Group/role pill */
.role-pill { display:inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; background: rgba(124,92,255,.14); }

/* ---------------- Posts (topic view) ---------------- */
.post {
    display: grid; grid-template-columns: 210px 1fr; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; margin-bottom: 18px;
}
.post-author {
    padding: 22px 18px; text-align: center; background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-right: 1px solid var(--border);
}
.post-author .avatar { margin: 0 auto 10px; display:block; box-shadow: var(--shadow-glow); }
.post-author .username { font-weight: 700; font-size: 15px; color: #fff; }
.post-author .usertitle { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.post-author .rank { margin-top: 8px; font-size: 12px; }
.post-author .author-stats { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-mute); display:flex; flex-direction:column; gap:4px; }
.post-author .author-stats span b { color: var(--text); }
.post-body { padding: 18px 22px; display:flex; flex-direction: column; min-width: 0; }
.post-meta { display:flex; justify-content: space-between; align-items:center; font-size: 12.5px; color: var(--text-mute); border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; margin-bottom: 14px; }
.post-content { font-size: 15px; line-height: 1.75; flex: 1; word-wrap: break-word; }
.post-content img.post-image { border-radius: 10px; margin: 8px 0; }
.post-content .post-quote { border-left: 3px solid var(--primary); background: var(--surface-2); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 10px 0; color: var(--text-dim); }
.post-content .post-quote cite { display:block; font-weight: 700; color: var(--primary-2); font-style: normal; margin-bottom: 4px; font-size: 13px; }
.post-content .code-block { background: var(--bg-0); border: 1px solid var(--border); border-radius: 10px; padding: 14px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.post-content .spoiler { background: var(--surface-2); border-radius: 9px; padding: 8px 14px; margin: 8px 0; }
.post-content .mention { color: var(--primary-2); font-weight: 600; background: rgba(124,92,255,.12); padding: 1px 6px; border-radius: 6px; }
.post-signature { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 13px; color: var(--text-mute); }
.post-footer { display:flex; align-items:center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.react-btn { display:inline-flex; align-items:center; gap:6px; padding: 6px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-size: 13px; transition: all var(--transition); }
.react-btn:hover, .react-btn.active { border-color: var(--primary); color: var(--primary-2); background: rgba(124,92,255,.1); }

/* ---------------- Forms ---------------- */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; }
.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea {
    width: 100%; background: var(--bg-1); border: 1px solid var(--border); color: var(--text);
    padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; transition: all var(--transition);
}
.input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); background: var(--surface); }
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-hint { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; }
.checkbox { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; color: var(--text-dim); }
.checkbox input { width: auto; }

/* ---------------- Alerts ---------------- */
.alert { padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; display:flex; align-items:center; gap: 10px; }
.alert-success { background: rgba(46,230,166,.1); border-color: rgba(46,230,166,.3); color: var(--green); }
.alert-error { background: rgba(255,77,109,.1); border-color: rgba(255,77,109,.3); color: var(--red); }
.alert-info { background: rgba(47,107,255,.1); border-color: rgba(47,107,255,.3); color: var(--accent-2); }
.alert-warn { background: rgba(245,179,1,.1); border-color: rgba(245,179,1,.3); color: var(--amber); }

/* ---------------- Stats widgets ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 16px; }
.stat-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px;
    position: relative; overflow: hidden; transition: all var(--transition);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--surface-3); }
.stat-card .stat-ico { width: 44px; height: 44px; border-radius: 12px; display:grid; place-items:center; font-size: 20px; margin-bottom: 12px; background: var(--grad-surface), var(--surface-2); }
.stat-card .stat-val { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.stat-card .stat-label { font-size: 13px; color: var(--text-mute); }

/* ---------------- Sidebar widgets ---------------- */
.widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; }
.widget-head { padding: 13px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); border-bottom: 1px solid var(--border); display:flex; align-items:center; gap:8px; }
.widget-body { padding: 14px 16px; }
.mini-user { display:flex; align-items:center; gap: 10px; padding: 7px 0; }
.mini-user .name { font-weight: 600; font-size: 14px; }
.mini-user .name a { color: var(--text); }
.mini-user .sub { font-size: 12px; color: var(--text-mute); }

/* online dot */
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-mute); display:inline-block; }
.online-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }

/* ---------------- Pagination ---------------- */
.pagination { display:flex; gap: 6px; justify-content: center; margin: 26px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 38px; height: 38px; padding: 0 12px; display:grid; place-items:center; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 14px; font-weight: 600;
}
.pagination a:hover { border-color: var(--primary); color: #fff; }
.pagination .current { background: var(--grad-primary); color: #fff; border-color: transparent; }

/* ---------------- Breadcrumbs ---------------- */
.breadcrumbs { display:flex; align-items:center; gap: 8px; font-size: 13px; color: var(--text-mute); margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--text-dim); }
.breadcrumbs .sep { color: var(--text-mute); opacity: .5; }

/* ---------------- Page header ---------------- */
.page-head { display:flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 26px; display:flex; align-items:center; gap: 12px; }
.page-head .sub { color: var(--text-mute); font-size: 14px; margin-top: 4px; }

/* ---------------- Footer ---------------- */
.site-footer { margin-top: 60px; border-top: 1px solid var(--border); background: var(--bg-1); padding: 40px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 30px; }
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.footer-grid a { display:block; color: var(--text-mute); font-size: 14px; padding: 4px 0; }
.footer-grid a:hover { color: var(--primary-2); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 22px; display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 12px; color: var(--text-mute); font-size: 13px; }
.footer-brand { font-weight: 700; color: var(--text-dim); }
.footer-brand b { background: var(--grad-cyan); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------------- Utilities & animations ---------------- */
.empty-state { text-align:center; padding: 60px 20px; color: var(--text-mute); }
.empty-state .ico { font-size: 48px; margin-bottom: 14px; opacity: .6; }
.divider-line { height:1px; background: var(--border); margin: 20px 0; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to {opacity:1; transform:none;} }
.fade-up { animation: fadeUp .5s ease both; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
    .col-side { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .forum-row { grid-template-columns: 48px 1fr 90px; }
    .forum-last { display: none; }
    .topic-row { grid-template-columns: 40px 1fr 80px; }
    .topic-col:nth-child(3), .topic-col:nth-child(5) { display:none; }
    .post { grid-template-columns: 1fr; }
    .post-author { display:flex; align-items:center; gap: 14px; text-align:left; border-right:none; border-bottom: 1px solid var(--border); padding: 14px; }
    .post-author .avatar { margin: 0; width: 46px; height: 46px; }
    .post-author .author-stats { display:none; }
}
@media (max-width: 680px) {
    .main-nav, .search-mini { display: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .page-head h1 { font-size: 22px; }
    .topic-row { grid-template-columns: 1fr 70px; }
    .topic-icon, .topic-col:nth-child(4) { display:none; }
}

/* mobile nav toggle */
.nav-toggle { display:none; }
@media (max-width: 680px){ .nav-toggle { display:grid; } }

/* =====================================================================
   v2 — Logo branding, richer forum board, no background glows
   ===================================================================== */

/* Brand logo image (replaces text wordmark) */
.brand-logo { height: 30px; width: auto; display: block; }
.brand .logo-mark + span, .acp-brand .logo-mark { } /* legacy, unused */
.site-header .brand-logo { height: 30px; }
.acp-brand .brand-logo { height: 26px; }
.auth-card .brand-logo { height: 38px; margin: 0 auto 4px; }
.site-footer .brand-logo { height: 34px; margin-bottom: 14px; }

/* Neutralize any leftover glow elements (user requested no background lights) */
.hero-glow, .auth-glow { display: none !important; }

/* Faint dotted texture helper (static, subtle — NOT a glow) */
.bg-grid { background-image:
    linear-gradient(rgba(124,92,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,.05) 1px, transparent 1px);
    background-size: 44px 44px; }

/* ---------- Forum board hero banner ---------- */
.board-hero {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--border); margin-bottom: 26px;
    background:
        linear-gradient(115deg, rgba(124,92,255,.20), rgba(47,107,255,.06) 45%, rgba(10,12,22,0) 70%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
}
.board-hero::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px; mask-image: linear-gradient(105deg,#000,transparent 65%);
}
.board-hero-inner { position: relative; z-index: 1; padding: 34px 36px; display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap: wrap; }
.board-hero h1 { font-size: 30px; margin: 0 0 8px; letter-spacing: -.03em; }
.board-hero h1 .grad { background: var(--grad-cyan); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.board-hero p { color: var(--text-dim); margin: 0; max-width: 520px; font-size: 15px; }
.board-hero-stats { display:flex; gap: 26px; }
.board-hero-stats .bhs { text-align:center; }
.board-hero-stats .bhs b { display:block; font-size: 26px; font-weight: 800; color:#fff; letter-spacing:-.02em; }
.board-hero-stats .bhs span { font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing:.06em; }

/* ---------- Category header (richer) ---------- */
.category > .cat-head {
    border: none; background: var(--surface); border-radius: 12px; padding: 13px 18px; margin-bottom: 14px;
    box-shadow: inset 0 0 0 1px var(--border); justify-content: space-between;
}
.cat-head .cat-title { display:flex; align-items:center; gap: 11px; }
.cat-head .bar { height: 22px; }
.cat-head .cat-meta { font-size: 12px; color: var(--text-mute); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Forum row: bump quality */
.forum-row { background: linear-gradient(180deg, var(--surface), var(--surface)); }
.forum-row:hover { background: var(--surface-2); }
.forum-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); position: relative; }
.forum-row .forum-last .avatar { box-shadow: 0 0 0 2px var(--surface-3); }
.forum-meta-badges { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }

/* ---------- Sidebar widgets: richer ---------- */
.widget-head .pill-count { margin-left: auto; background: var(--surface-3); color: var(--text-dim); padding: 1px 9px; border-radius: 20px; font-size: 11px; }
.online-strip { display:flex; flex-wrap:wrap; gap:6px; }
.online-strip a img { width: 34px; height:34px; border-radius: 9px; box-shadow: 0 0 0 1px var(--border); transition: transform var(--transition); }
.online-strip a:hover img { transform: translateY(-3px); }
.rank-list { display:flex; flex-direction:column; gap:2px; }
.rank-row { display:flex; align-items:center; gap:11px; padding:8px 6px; border-radius:10px; transition: background var(--transition); }
.rank-row:hover { background: var(--surface-2); }
.rank-row .rk { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:800; background: var(--surface-3); color: var(--text-dim); flex-shrink:0; }
.rank-row .rk.gold{ background: linear-gradient(135deg,#f5b301,#ff8a00); color:#1a1300; }
.rank-row .rk.silver{ background: linear-gradient(135deg,#cbd5e1,#94a3b8); color:#0b0e16; }
.rank-row .rk.bronze{ background: linear-gradient(135deg,#d08b5b,#a86a3d); color:#1a0e00; }
.rank-row .nm { flex:1; min-width:0; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-row .val { font-size:12px; color: var(--text-mute); font-weight:700; }
.act-feed { display:flex; flex-direction:column; gap:12px; }
.act-item { display:flex; gap:10px; align-items:flex-start; font-size:13px; }
.act-item .ai-ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background: var(--surface-2); flex-shrink:0; }
.act-item .ai-txt { color: var(--text-dim); line-height:1.4; }
.act-item .ai-txt b { color:#fff; }
.act-item .ai-time { color: var(--text-mute); font-size:11.5px; }

/* CTA banner: drop the inner glow element entirely (handled by view edit) */

/* =====================================================================
   v3 — Premium forum board (wider, richer, more "wow")
   ===================================================================== */

/* Dramatic board hero */
.board-hero{ margin-bottom: 30px; border-radius: 22px; }
.board-hero::before{
    content:''; position:absolute; right:0; top:0; bottom:0; width:46%; z-index:0; pointer-events:none;
    background:
      repeating-linear-gradient(135deg, rgba(124,92,255,.05) 0 2px, transparent 2px 22px);
    mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.board-hero-inner{ padding: 40px 44px; }
.board-hero h1{ font-size: 34px; }
.board-hero-stats{ gap: 30px; }
.board-hero-stats .bhs{ position:relative; padding: 0 4px; }
.board-hero-stats .bhs b{ font-size: 30px; }

/* Category header — more presence */
.category{ margin-bottom: 30px; }
.category > .cat-head{
    background: linear-gradient(90deg, rgba(124,92,255,.10), var(--surface) 40%);
    box-shadow: inset 0 0 0 1px var(--border);
    padding: 15px 20px; border-radius: 14px;
}
.cat-head .cat-title{ font-size: 15px; font-weight: 800; letter-spacing: .04em; color:#fff; }
.cat-head .bar{ width: 5px; height: 24px; border-radius: 5px; }
.cat-head .cat-meta{ background: var(--surface-3); padding: 3px 12px; border-radius: 20px; }

/* Forum rows — premium */
.forum-list{ gap: 14px; }
.forum-row{
    grid-template-columns: 64px 1fr 150px 250px; gap: 20px; align-items: center;
    padding: 18px 22px 18px 26px; border-radius: 16px; border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface), var(--surface));
    position: relative; overflow: hidden; transition: transform .2s var(--transition), border-color .2s, box-shadow .2s, background .2s;
}
.forum-row::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background: var(--fc, var(--grad-primary)); opacity:.55; transition: opacity .2s, width .2s; border-radius: 0 4px 4px 0;
}
.forum-row:hover{ transform: translateY(-3px); border-color: var(--surface-3);
    box-shadow: 0 14px 34px rgba(0,0,0,.45); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.forum-row:hover::before{ opacity:1; width:5px; }
.forum-row:hover .forum-icon{ transform: scale(1.06) rotate(-3deg); }

.forum-icon{
    width: 58px; height: 58px; border-radius: 16px; font-size: 26px;
    background: var(--fc-soft, var(--surface-2)); color:#fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.3);
    transition: transform .25s var(--transition);
}
.forum-info h3{ font-size: 17px; margin-bottom:4px; }
.forum-info h3 a{ color:#fff; display:inline-flex; align-items:center; gap:7px; }
.forum-info h3 a::after{ content:'›'; color: var(--text-mute); font-weight:400; opacity:0; transform:translateX(-4px); transition:.2s; }
.forum-row:hover .forum-info h3 a::after{ opacity:1; transform:none; }
.forum-info p{ font-size:13.5px; }
.forum-info .sub-forums{ margin-top:8px; font-size:12.5px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.forum-info .sub-forums a{ background: var(--surface-2); border:1px solid var(--border); padding:2px 10px; border-radius:7px; color: var(--text-dim); }
.forum-info .sub-forums a:hover{ border-color: var(--primary); color:#fff; }

/* Stats as a stacked pill */
.forum-stats{ text-align:center; background: var(--bg-1); border:1px solid var(--border-soft); border-radius:12px; padding:10px 8px; }
.forum-stats b{ font-size:19px; color:#fff; display:block; line-height:1.1; }
.forum-stats span{ font-size:11.5px; color: var(--text-mute); }
.forum-stats .fs-sep{ height:1px; background:var(--border-soft); margin:6px 8px; }

/* Last post block */
.forum-last{ background: var(--bg-1); border:1px solid var(--border-soft); border-radius:12px; padding:10px 12px; gap:11px; }
.forum-last .avatar{ width:38px; height:38px; border-radius:10px; box-shadow:0 0 0 2px var(--surface-3); }
.forum-last .meta b{ font-size:13px; }
.forum-last .meta span{ font-size:11.5px; }

/* Wider sidebar to match wider layout */
.col-side{ width: 320px; }

@media (max-width: 1024px){
    .forum-row{ grid-template-columns: 56px 1fr 110px; }
    .forum-last{ display:none; }
}
@media (max-width: 680px){
    .forum-row{ grid-template-columns: 50px 1fr; padding:14px; }
    .forum-stats{ display:none; }
    .board-hero-inner{ padding: 26px; }
    .board-hero-stats{ gap:18px; }
}

/* last-post block refinements */
.forum-last .meta{ min-width:0; flex:1; }
.forum-last .meta .fl-topic{ display:block; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.forum-last .meta .fl-topic:hover b{ color:var(--primary-2); }
.forum-last .meta span{ display:block; font-size:11.5px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.forum-last .meta .fl-author{ color:var(--text-dim); font-weight:600; }
.forum-last .meta .fl-author:hover{ color:var(--primary-2); }
.forum-last .fl-empty{ display:flex; align-items:center; gap:7px; color:var(--text-mute); font-size:12.5px; }
.forum-last .fl-empty span{ font-size:15px; opacity:.7; }

/* =====================================================================
   v4 — Shoutbox, XP/level bar, banners
   ===================================================================== */

/* Shoutbox */
.shoutbox .widget-head .online-dot{ width:9px;height:9px; }
.shout-messages{ height: 280px; overflow-y:auto; padding: 12px 14px; display:flex; flex-direction:column; gap:11px; }
.shout-loading{ color:var(--text-mute); font-size:13px; text-align:center; margin:auto; }
.shout-msg{ display:flex; gap:9px; align-items:flex-start; animation: fadeUp .3s ease; }
.shout-ava{ width:28px; height:28px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.shout-body{ min-width:0; font-size:13px; line-height:1.45; }
.shout-user{ font-weight:700; margin-right:4px; }
.shout-text{ color:var(--text-dim); word-break:break-word; }
.shout-text .mention{ color:var(--primary-2); }
.shout-time{ display:block; font-size:10.5px; color:var(--text-mute); margin-top:1px; }
.shout-form{ display:flex; gap:8px; padding:11px 12px; border-top:1px solid var(--border); }
.shout-form input{ flex:1; background:var(--bg-1); border:1px solid var(--border); color:var(--text); padding:9px 12px; border-radius:9px; font-size:13px; }
.shout-form input:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.shout-form button{ padding:9px 14px; }
.shout-login{ padding:14px; text-align:center; font-size:13px; color:var(--text-mute); border-top:1px solid var(--border); }

/* XP / level bar on profile */
.xp-wrap{ display:flex; align-items:center; gap:16px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); flex-wrap:wrap; }
.xp-badge{ background:var(--grad-primary); color:#fff; font-weight:800; font-size:14px; padding:8px 14px; border-radius:11px; box-shadow:0 6px 16px rgba(124,92,255,.35); letter-spacing:.02em; flex-shrink:0; }
.xp-bar-area{ flex:1; min-width:200px; }
.xp-meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-mute); margin-bottom:6px; }
.xp-meta b{ color:#fff; }
.xp-bar{ height:10px; border-radius:20px; background:var(--bg-1); overflow:hidden; box-shadow:inset 0 0 0 1px var(--border); }
.xp-bar span{ display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#18c8ff,#7c5cff,#ff5c8a); background-size:200% 100%; animation:gradmove 4s linear infinite; transition:width .8s cubic-bezier(.2,.7,.2,1); }
@keyframes gradmove{ to{ background-position:200% 0; } }
.xp-streak{ font-size:13px; color:var(--amber); font-weight:700; flex-shrink:0; }
.xp-streak b{ color:#fff; }

/* Forum banner (forum/show hero) */
.forum-banner{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); margin-bottom:22px; min-height:150px;
    background: linear-gradient(120deg, rgba(124,92,255,.22), rgba(47,107,255,.06) 55%, transparent),
                repeating-linear-gradient(135deg, rgba(124,92,255,.05) 0 2px, transparent 2px 24px),
                var(--surface); }
.forum-banner.has-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--bg-1) 5%, transparent 60%), linear-gradient(0deg, var(--bg-1), transparent 70%); }
.forum-banner img.fb-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.forum-banner-inner{ position:relative; z-index:1; padding:30px 32px; display:flex; align-items:center; gap:18px; }
.forum-banner .fb-icon{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; font-size:30px; background:var(--surface-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); flex-shrink:0; }
.forum-banner h1{ font-size:28px; margin:0 0 4px; }
.forum-banner p{ margin:0; color:var(--text-dim); font-size:14px; }

/* =====================================================================
   v5 — smoother hover (no jank), category brand icon, wider feel
   ===================================================================== */
/* Kill the janky lift/rotate on forum rows; keep a smooth, GPU-friendly highlight */
.forum-row{ transform: none !important; transition: background .15s ease, border-color .15s ease !important; will-change: auto; }
.forum-row:hover{ transform: none !important; box-shadow: none; background: var(--surface-2); border-color: var(--surface-3); }
.forum-row:hover .forum-icon{ transform: none !important; }
.forum-row::before{ transition: opacity .15s ease; width:4px !important; }
/* keep category cards calm too */
.category > .cat-head{ transition: none; }

/* Category brand icon */
.cat-head .cat-ico{ width:26px; height:26px; display:block; flex-shrink:0; filter: drop-shadow(0 2px 6px rgba(124,92,255,.4)); }

/* =====================================================================
   v6 — uniform emblem icon, NO hover coloring on forum rows
   ===================================================================== */
/* Forum rows: completely static on hover (no background change) */
.forum-row, .forum-row:hover{ background: var(--surface) !important; border-color: var(--border) !important; box-shadow: none !important; transform: none !important; cursor: default; }
.forum-row .forum-info h3 a, .forum-row .forum-last a, .forum-row .sub-forums a{ cursor: pointer; }
.forum-row::before{ opacity:.6 !important; }

/* Uniform emblem icon tile (forum rows) */
.forum-icon{ background: none !important; box-shadow: none !important; padding:0 !important; overflow:hidden; border-radius:15px; }
.forum-icon img{ width:100%; height:100%; display:block; }

/* Forum banner icon = emblem */
.forum-banner .fb-icon{ background:none !important; box-shadow:none !important; padding:0; overflow:hidden; border-radius:18px; }
.forum-banner .fb-icon img{ width:100%; height:100%; display:block; }

/* Category header emblem (no drop-shadow tint needed) */
.cat-head .cat-ico{ filter:none; border-radius:7px; }

/* Header dropdown panels */
.hdr-dd{ position:relative; }
.hdr-panel{ position:absolute; right:0; top:calc(100% + 10px); width:340px; max-width:90vw; padding:0; overflow:hidden; }
.hdr-panel-head{ display:flex; justify-content:space-between; align-items:center; padding:13px 16px; border-bottom:1px solid var(--border); font-size:14px; }
.hdr-panel-head b{ color:#fff; } .hdr-panel-head a{ font-size:12.5px; }
.hdr-panel-body{ max-height:400px; overflow-y:auto; padding:6px; }
.hdr-loading,.hdr-empty{ padding:24px; text-align:center; color:var(--text-mute); font-size:13.5px; }
.hp-item{ display:flex; gap:11px; align-items:center; padding:10px 12px; border-radius:10px; }
.hp-item:hover{ background:var(--surface-2); }
.hp-item.unread{ background:rgba(124,92,255,.07); }
.hp-ava{ width:38px; height:38px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.hp-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); font-size:17px; flex-shrink:0; }
.hp-txt{ min-width:0; display:flex; flex-direction:column; }
.hp-title{ font-size:13.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-time{ font-size:11.5px; color:var(--text-mute); }

/* Unread topic indicator + forum follow */
.topic-list .topic-row.unread .tm-title{ font-weight:800; }
.topic-icon{ position:relative; }
.unread-dot{ position:absolute; top:-2px; left:-2px; width:11px; height:11px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 2px var(--surface), 0 0 8px var(--primary); }
.topic-row.unread .topic-icon{ color:var(--primary-2); box-shadow:inset 0 0 0 1px var(--primary); }
.forum-follow.following{ border-color:var(--primary) !important; color:var(--primary-2) !important; background:rgba(124,92,255,.12) !important; }

/* =====================================================================
   v7 — theme variants, announcement bar, nav extras
   ===================================================================== */
html[data-theme="midnight"]{ --bg-0:#05060d; --bg-1:#080a13; --surface:#0f1320; --surface-2:#161b2c; }
html[data-theme="amoled"]{ --bg-0:#000000; --bg-1:#050505; --surface:#0c0c10; --surface-2:#141418; --surface-3:#1c1c22; --border:#1b1b22; }

.announce-bar{ background:linear-gradient(90deg, rgba(124,92,255,.18), rgba(47,107,255,.10)); border-bottom:1px solid rgba(124,92,255,.25); color:#fff; text-align:center; padding:10px 18px; font-size:13.5px; font-weight:600; }
.announce-bar span a{ color:var(--accent-2); }

/* social login buttons */
.oauth-row{ display:flex; flex-direction:column; gap:9px; margin:18px 0; }
.oauth-btn{ display:flex; align-items:center; justify-content:center; gap:10px; padding:11px; border-radius:11px; font-weight:700; font-size:14px; color:#fff; border:1px solid transparent; transition:filter .15s, transform .15s; }
.oauth-btn:hover{ filter:brightness(1.12); transform:translateY(-1px); color:#fff; }
.oauth-steam{ background:#1b2838; border-color:#2a475e; }
.oauth-discord{ background:#5865F2; }
.oauth-google{ background:#fff; color:#1f1f1f; }
.oauth-google:hover{ color:#1f1f1f; }
.oauth-sep{ display:flex; align-items:center; gap:12px; color:var(--text-mute); font-size:12px; margin:16px 0; }
.oauth-sep::before,.oauth-sep::after{ content:''; flex:1; height:1px; background:var(--border); }

/* bookmark button */
.bookmark-btn.saved{ color:var(--amber) !important; border-color:var(--amber) !important; }

/* language switcher */
.lang-switch{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-mute); }
.lang-switch a{ color:var(--text-mute); padding:2px 7px; border-radius:6px; border:1px solid var(--border); font-weight:600; font-size:12px; }
.lang-switch a.on{ background:var(--surface-2); color:#fff; border-color:var(--primary); }

/* Cookie consent bar */
.cookie-bar{ position:fixed; left:18px; right:18px; bottom:18px; z-index:300; max-width:760px; margin:0 auto;
    background:var(--elev); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
    padding:14px 18px; display:flex; align-items:center; gap:16px; justify-content:space-between; flex-wrap:wrap; font-size:13.5px; color:var(--text-dim); }
.cookie-bar a{ color:var(--primary-2); }