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

:root {
    /* Core palette — each token is tinted toward the chosen accent (--primary-rgb)
       via color-mix so picking a new colour re-hues the ENTIRE UI (surfaces,
       cards, borders, backgrounds), not just the thin accents. The plain hex
       line above each is the fallback for browsers without color-mix. */
    /* Tint percentages are kept deliberately low on the dark base surfaces so that
       even WARM/LIGHT accents (gold #d4a017, green #2ea043) — whose rgb is bright —
       only nudge the hue and never lift a surface light enough to break white-on-dark
       body-text contrast (stays WCAG-AA-ish). Brighter accents read fine at these %
       because the base hex is already very dark. */
    --bg-0: #070912;
    --bg-0: color-mix(in srgb, #070912, rgb(var(--primary-rgb)) 4%);
    --bg-1: #0b0e1a;
    --bg-1: color-mix(in srgb, #0b0e1a, rgb(var(--primary-rgb)) 5%);
    --bg-2: #111524;
    --bg-2: color-mix(in srgb, #111524, rgb(var(--primary-rgb)) 6%);
    --surface: #131829;
    --surface: color-mix(in srgb, #131829, rgb(var(--primary-rgb)) 6%);
    --surface-2: #1a2034;
    --surface-2: color-mix(in srgb, #1a2034, rgb(var(--primary-rgb)) 7%);
    --surface-3: #232a42;
    --surface-3: color-mix(in srgb, #232a42, rgb(var(--primary-rgb)) 9%);
    --elev: #161c2f;
    --elev: color-mix(in srgb, #161c2f, rgb(var(--primary-rgb)) 6%);
    --border: #232a42;
    --border: color-mix(in srgb, #232a42, rgb(var(--primary-rgb)) 16%);
    --border-soft: #1c2236;
    --border-soft: color-mix(in srgb, #1c2236, rgb(var(--primary-rgb)) 11%);

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

    /* Accents */
    --primary: #7c5cff;
    --primary-rgb: 124, 92, 255;
    --primary-2: #9d7bff;
    --accent: #2f6bff;
    --accent-2: #18c8ff;
    --accent-rgb: 47, 107, 255;   /* secondary hue (rgb) — re-themed by the palette switcher */
    /* Readable text colour to sit on a SOLID --primary/--accent fill (buttons,
       active pills, badges). DARK for light accents (gold/teal/green/orange),
       white for dark accents. Computed live in applyPalette() (JS) + the per-user
       PHP block via a luminance test; this is the default for the seed accent. */
    --on-accent: #fff;
    --pink: #ff5c8a;
    --green: #2ee6a6;
    --amber: #f5b301;
    --red: #ff4d6d;

    --grad-primary: linear-gradient(135deg, var(--primary) 0%, #2f6bff 100%);
    --grad-pink: linear-gradient(135deg, #ff5c8a 0%, var(--primary) 100%);
    --grad-cyan: linear-gradient(135deg, #18c8ff 0%, var(--primary) 100%);
    --grad-surface: linear-gradient(180deg, rgba(var(--primary-rgb),.06), rgba(var(--accent-rgb),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(var(--primary-rgb),.25), 0 8px 30px rgba(var(--primary-rgb),.18);
    --ring: 0 0 0 3px rgba(var(--primary-rgb),.30);
    --primary-glow: rgba(var(--primary-rgb),.16);

    --header-h: 64px;
    --maxw: 1760px;
    --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);
    /* Accent-tinted base + a soft glow of the chosen colour from the top */
    background:
        radial-gradient(1100px 560px at 50% -240px, rgba(var(--primary-rgb), .10), transparent 70%),
        var(--bg-0);
    background-attachment: fixed;
    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(var(--primary-rgb),.4); color: #fff; }

/* Prevent horizontal overflow at the root level on all viewports */
html { overflow-x: hidden; }

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

/* Focus-visible: keyboard-only ring, no outline on mouse click */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
/* Prevent container itself from ever causing horizontal scroll */
.container { width: 100%; }
.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);
    /* NOTE: do NOT set overflow:hidden here — it clips the dropdowns (theme
       palette, notifications, user menu) and the search focus-ring that extend
       below the bar. Page-level horizontal scroll is handled by html/body. */
    overflow: visible;
}
.site-header .container { display: flex; align-items: center; height: 100%; gap: 22px; }
/* Brand must never flex-shrink to zero — keep logo visible */
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -.03em; flex-shrink: 0; }
.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; color: var(--on-accent);
}
.brand b { background: var(--grad-cyan); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* main-nav: min-width:0 prevents nav from pushing header wider than viewport */
.main-nav { display: flex; gap: 4px; margin-left: 8px; min-width: 0; }
.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: flex-shrink:0 so it always stays visible; min-width:0 on inner flex items prevents overflow */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* 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:260px; transition: box-shadow var(--transition), border-color var(--transition); }
/* Soft focus: border highlight + subtle glow, no jarring width jump */
.search-mini:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15); }
.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; min-width: 0; }
.user-menu .trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px; border-radius: 30px; min-width: 0; }
.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;
    /* No hard boxed squares — transparent at rest, subtle fill on hover */
    background: transparent; border: 1px solid transparent; color: var(--text-dim); cursor: pointer; transition: all var(--transition);
}
.icon-btn:hover { color: #fff; border-color: var(--border); 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: var(--on-accent); box-shadow: 0 6px 18px rgba(var(--primary-rgb),.35); }
.btn-primary:hover { color: var(--on-accent); box-shadow: 0 8px 26px rgba(var(--primary-rgb),.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 is a grid child — min-width:0 prevents text overflow */
.forum-info { min-width: 0; }
.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 is a grid child — min-width:0 prevents title overflow */
.topic-main { min-width: 0; }
.topic-main .title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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(var(--primary-rgb),.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(var(--primary-rgb),.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(var(--primary-rgb),.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(var(--accent-rgb),.1); border-color: rgba(var(--accent-rgb),.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; }
/* min-width:0 on the text column prevents long usernames from overflowing the widget */
.mini-user .name { font-weight: 600; font-size: 14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-user .name a { color: var(--text); }
.mini-user .sub { font-size: 12px; color: var(--text-mute); min-width:0; }

/* 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: var(--on-accent); 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 is a flex child — min-width:0 prevents long titles from overflowing */
.page-head h1 { margin: 0; font-size: 26px; display:flex; align-items:center; gap: 12px; min-width: 0; }
.page-head .sub { color: var(--text-mute); font-size: 14px; margin-top: 4px; }

/* ---------------- Footer ---------------- */
/* Sticky footer — push footer to bottom on short pages.
   width:100% prevents flex-column from shrinking .container (margin:0 auto) to content width. */
body.layout-default { display: flex; flex-direction: column; }
body.layout-default > main { flex: 1 0 auto; width: 100%; }
body.layout-default > .site-footer { flex-shrink: 0; }
.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: flex children need min-width:0 so text truncates rather than overflows */
.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-bottom > * { min-width: 0; }
.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) {
    .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 drawer ---- */
    .main-nav {
        display: none;
        position: absolute; top: var(--header-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
        background: var(--elev); border-bottom: 1px solid var(--border);
        padding: 10px 12px 14px; z-index: 150; box-shadow: var(--shadow);
        max-height: calc(100vh - var(--header-h)); overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .main-nav.open { display: flex; }
    .main-nav > a { padding: 12px 14px; border-radius: 10px; font-size: 15px; min-height: 44px; }

    /* "More" submenu: collapsible inline inside the drawer — NOT always expanded */
    .main-nav .user-menu { position: static; width: 100%; }
    .main-nav .user-menu .trigger {
        padding: 12px 14px; border-radius: 10px; font-size: 15px; width: 100%;
        font-weight: 600; color: var(--text-dim); min-height: 44px;
    }
    .main-nav .user-menu .trigger:hover { background: var(--surface-2); color: #fff; }
    /* More dropdown: override float → collapsible inline block, hidden by default */
    .main-nav .user-menu .dropdown {
        position: static !important;
        opacity: 1 !important; visibility: visible !important; transform: none !important;
        box-shadow: none !important; border: none !important;
        background: transparent !important; padding: 0 0 4px 10px !important;
        min-width: 0 !important;
        /* collapsed by default: */
        display: none;
    }
    /* When user clicks More trigger, JS adds .open to the dropdown */
    .main-nav .user-menu .dropdown.open { display: block; }
    .main-nav .user-menu .dropdown a {
        padding: 10px 14px; border-radius: 9px; font-size: 14px;
        display: flex; align-items: center; gap: 8px; min-height: 40px;
    }
    .main-nav .user-menu .dropdown a:hover { background: var(--surface-2); color: #fff; }
}

/* 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(var(--primary-rgb),.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary-rgb),.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(var(--primary-rgb),.20), rgba(var(--accent-rgb),.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 flex children need min-width:0 to shrink below content width */
.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-inner > * { min-width: 0; }
.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; }
/* min-width:0 prevents long text from pushing the item wider than its container */
.act-item .ai-txt { color: var(--text-dim); line-height:1.4; min-width:0; flex:1; overflow-wrap:break-word; }
.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(var(--primary-rgb),.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(var(--primary-rgb),.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; flex:1; font-size:13px; line-height:1.45; overflow-wrap:break-word; }
.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:var(--on-accent); font-weight:800; font-size:14px; padding:8px 14px; border-radius:11px; box-shadow:0 6px 16px rgba(var(--primary-rgb),.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,var(--primary),#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(var(--primary-rgb),.22), rgba(var(--accent-rgb),.06) 55%, transparent),
                repeating-linear-gradient(135deg, rgba(var(--primary-rgb),.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 flex children need min-width:0 to prevent title overflow */
.forum-banner-inner{ position:relative; z-index:1; padding:30px 32px; display:flex; align-items:center; gap:18px; }
.forum-banner-inner > * { min-width: 0; }
.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(var(--primary-rgb),.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 is a flex child of header-actions — min-width:0 lets it shrink */
.hdr-dd{ position:relative; min-width:0; flex-shrink:0; }
.hdr-panel{ position:absolute; right:0; top:calc(100% + 10px); width:360px; max-width:90vw; padding:0; overflow:hidden; }
.hdr-panel-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); font-size:14px; }
.hdr-panel-head b{ color:#fff; font-size:14.5px; } .hdr-panel-head a{ font-size:12.5px; color:var(--primary-2); }
/* Roomier, spaced-out notification/message list */
.hdr-panel-body{ max-height:420px; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:4px; }
.hdr-loading,.hdr-empty{ padding:28px; text-align:center; color:var(--text-mute); font-size:13.5px; }
.hp-item{
    display:flex; gap:12px; align-items:center;
    padding:11px 12px; border-radius:12px;
    border:1px solid transparent;
    position:relative;
    transition: background var(--transition), border-color var(--transition);
}
.hp-item:hover{ background:var(--surface-2); border-color:rgba(var(--primary-rgb),.22); }
.hp-item.unread{ background:rgba(var(--primary-rgb),.08); }
/* Unread dot on the right */
.hp-item.unread::after{
    content:''; position:absolute; top:50%; right:12px; transform:translateY(-50%);
    width:7px; height:7px; border-radius:50%; background:var(--primary);
    box-shadow:0 0 6px rgba(var(--primary-rgb),.6);
}
.hp-item.unread .hp-title{ color:#fff; font-weight:600; }
/* Uniform icon size for both avatars and emoji icons */
.hp-ava{ width:36px; height:36px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.hp-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--border); font-size:16px; flex-shrink:0; }
.hp-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; padding-right:14px; justify-content:center; }
/* Single line so every row is the same height (uniform) */
.hp-title{ font-size:13.5px; color:var(--text); line-height:1.35; font-weight:500; 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(var(--primary-rgb),.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(var(--primary-rgb),.18), rgba(var(--accent-rgb),.10)); border-bottom:1px solid rgba(var(--primary-rgb),.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); }

/* custom emoji + mention autocomplete */
.custom-emoji{ height:1.4em; width:auto; vertical-align:-0.3em; display:inline-block; }
.mention-dd{ position:absolute; z-index:9999; background:var(--elev); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; max-height:260px; overflow-y:auto; }
.mdd-item{ display:flex; align-items:center; gap:9px; padding:7px 11px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--text-dim); }
.mdd-item img{ width:24px; height:24px; border-radius:6px; }
.mdd-item.on, .mdd-item:hover{ background:var(--surface-2); color:#fff; }

/* Notification badge pop + sound cue */
@keyframes badgePop { 0%{transform:scale(1)} 35%{transform:scale(1.6)} 100%{transform:scale(1)} }
.badge-count.badge-pop { animation: badgePop .45s ease; }

/* Rainbow animated username (shop: 🌈 Rainbow RGB Name) */
@keyframes rainbowName { 0%{color:#ff4d6d} 16%{color:#f5b301} 33%{color:#2ee6a6} 50%{color:#18c8ff} 66%{color:var(--primary)} 83%{color:#ff5c8a} 100%{color:#ff4d6d} }
.name-rainbow { animation: rainbowName 3s linear infinite; font-weight:800; }

/* =====================================================================
   Mobile performance & motion polish (fix janky effects on phones)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 768px) {
    /* scroll-reveal: show instantly, no transform jank */
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .fade-up { animation: none !important; }
    /* blur is expensive on mobile GPUs → drop to a solid-ish bg */
    .site-header { backdrop-filter: none !important; background: rgba(11,14,26,.97) !important; }
    .points-badge, .casino-badge, .clan-tag-badge, .search-mini { backdrop-filter: none !important; }
    /* tame infinite decorative animations on phones */
    .cs-fx, .love-hearts-bg { display: none !important; }
    /* comfortable tap targets — 44px for primary actions */
    .btn { min-height: 44px; }
    .icon-btn { min-height: 44px; min-width: 44px; }
    .main-nav > a { min-height: 44px; display: flex; align-items: center; }
    .dropdown a, .dropdown button { min-height: 44px; }
    /* Prevent body horizontal scroll globally on mobile */
    body { overflow-x: hidden; }
}

/* ===== Mobile header declutter + hero stats fix (round 2) ===== */
@media (max-width: 680px) {
    /* Header: tighten container, keep all items in one row */
    .site-header .container { gap: 6px; padding: 0 10px; }
    .header-actions { gap: 5px; }
    /* Sound + palette toggles are niche — hide on phones to prevent overflow */
    .header-actions [data-sfx-toggle],
    .header-actions .hdr-dd:has([data-dropdown="paletteDd"]) { display: none; }
    /* Notification + message icons: compact */
    .icon-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 9px; }
    .brand-logo { height: 26px; }
    /* Hide login/register buttons from header — they live in the nav drawer */
    .header-actions .btn-ghost,
    .header-actions .btn-primary { display: none; }
    /* User avatar trigger: tighter */
    .user-menu .trigger { padding: 3px; }
    .user-menu .trigger span { display: none; } /* hide username text, keep avatar */
    /* Hamburger toggle: visually prominent */
    .nav-toggle { min-width: 38px; min-height: 38px; font-size: 18px; }
}

/* Smaller phones: further trim */
@media (max-width: 400px) {
    .site-header .container { gap: 4px; padding: 0 8px; }
    .brand-logo { height: 22px; }
    .icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
    .nav-toggle { min-width: 34px; min-height: 34px; font-size: 17px; }
}

/* Mobile nav drawer: search bar at top */
.nav-mobile-search {
    display: none;
    padding: 8px 4px 4px;
}
.nav-mobile-search form {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 0 12px;
}
.nav-mobile-search input {
    flex: 1; background: transparent; border: none; color: var(--text);
    padding: 10px 0; font-size: 14px; font-family: inherit; width: 100%;
}
.nav-mobile-search input:focus { outline: none; }
.nav-mobile-search svg { color: var(--text-mute); flex-shrink: 0; }
@media (max-width: 680px) {
    .nav-mobile-search { display: block; }
}

/* Mobile auth links at bottom of drawer (shown whenever drawer is used) */
.nav-mobile-auth {
    display: none;
    flex-direction: column; gap: 8px; padding: 10px 4px 4px; margin-top: 4px;
    border-top: 1px solid var(--border);
}
@media (max-width: 680px) {
    /* Show auth links in drawer for ALL mobile users who aren't logged in */
    .nav-mobile-auth { display: flex; }
    .nav-mobile-auth .btn { justify-content: center; min-height: 44px; font-size: 15px; }
}

/* Mobile nav divider */
.nav-mobile-divider {
    height: 1px; background: var(--border); margin: 4px 0;
    display: none;
}
@media (max-width: 680px) {
    .nav-mobile-divider { display: block; }
}
/* Hero stats: ensure number + label stack cleanly, never overlap */
@media (max-width: 768px) {
    .fi-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .fi-hero-stats .fi-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 8px; min-height: 64px; }
    .fi-hero-stats .fi-stat b { font-size: 22px; line-height: 1; }
    .fi-hero-stats .fi-stat span { font-size: 10.5px; line-height: 1.2; position: static; }
}

/* =====================================================================
   MOBILE POLISH PASS — global chrome (phones 360–768px)
   ===================================================================== */

/* ── Container: tighter side padding on tiny screens ── */
@media (max-width: 400px) {
    .container { padding: 0 12px; }
    main.container { padding-top: 18px !important; padding-bottom: 18px !important; }
}

/* ── Nav drawer: smooth animation + safe-area padding ── */
@media (max-width: 680px) {
    .main-nav {
        /* Smooth slide-in from top */
        animation: none;
        /* Extra bottom padding for phones with home indicator */
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
    /* Drawer links: generous tap height */
    .main-nav > a {
        min-height: 48px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        font-size: 15px;
    }
    /* More-menu items inside drawer: clear touch targets */
    .main-nav .user-menu .dropdown a {
        min-height: 44px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        font-size: 14px;
    }
    /* Dropdown panel (notifications/messages) on mobile: full-width, safe */
    .hdr-panel {
        position: fixed !important;
        top: var(--header-h) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 var(--radius) var(--radius);
        border-left: none;
        border-right: none;
        z-index: 190;
    }
    .hdr-panel-body { max-height: 55vh; }
}

/* ── Announcement bar: wrap text cleanly ── */
@media (max-width: 680px) {
    .announce-bar { font-size: 12.5px; padding: 8px 14px; line-height: 1.5; }
}

/* ── Page header: stack on phone ── */
@media (max-width: 480px) {
    .page-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
    .page-head h1 { font-size: 20px; }
}

/* ── Breadcrumbs: tighten on phone ── */
@media (max-width: 480px) {
    .breadcrumbs { font-size: 12px; gap: 5px; margin-bottom: 14px; }
}

/* ── Cards: reduce radius + padding on tiny screens ── */
@media (max-width: 400px) {
    .card { border-radius: 12px; }
    .card-pad { padding: 14px; }
    .card-head { padding: 12px 14px; }
}

/* ── Sidebar widgets: full-width, tighter on mobile ── */
@media (max-width: 768px) {
    .widget { margin-bottom: 14px; }
    .widget-head { padding: 10px 14px; font-size: 12px; }
    .widget-body { padding: 12px 14px; }
    .mini-user { padding: 5px 0; }
    .rank-row { padding: 7px 4px; }
    .shout-messages { height: 220px; }
}

/* ── Topic rows in forum/show: no horizontal scroll ── */
@media (max-width: 480px) {
    .topic-list { overflow-x: hidden; }
    .topic-row { max-width: 100%; }
}

/* ── Stat grid: 2-col on phone ── */
@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px 12px; }
    .stat-card .stat-val { font-size: 22px; }
}

/* ── Pagination: compact on phone ── */
@media (max-width: 480px) {
    .pagination { gap: 4px; margin: 16px 0; }
    .pagination a, .pagination span { min-width: 34px; height: 34px; font-size: 13px; border-radius: 9px; padding: 0 8px; }
}

/* ── Footer: readable on phone ── */
@media (max-width: 680px) {
    .site-footer { padding: 28px 0 20px; margin-top: 40px; }
    .footer-grid { gap: 18px; }
    .footer-grid a { font-size: 13px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 12px; }
}
@media (max-width: 400px) {
    .footer-grid { grid-template-columns: 1fr !important; }
}

/* ── Cookie bar: full-width on phone ── */
@media (max-width: 480px) {
    .cookie-bar { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; }
    .cookie-bar .btn { width: 100%; justify-content: center; }
}

/* ── Alert messages: readable on small screens ── */
@media (max-width: 480px) {
    .alert { font-size: 13px; padding: 11px 12px; border-radius: 10px; }
}

/* ── Buttons: full-width context ── */
@media (max-width: 360px) {
    .btn { font-size: 13px; padding: 10px 14px; }
    .btn-sm { padding: 7px 12px; font-size: 12px; }
}

/* ── XP bar area: don't overflow ── */
@media (max-width: 480px) {
    .xp-wrap { gap: 10px; }
    .xp-bar-area { min-width: 0; flex: 1; }
}

/* ── Forum board hero: tighten on phone ── */
@media (max-width: 480px) {
    .board-hero-inner { padding: 20px 16px !important; }
    .board-hero h1 { font-size: 20px !important; }
    .board-hero-stats { gap: 14px !important; }
    .board-hero-stats .bhs b { font-size: 20px !important; }
}

/* ── Forum banner (forum/show): stack on narrow screens ── */
@media (max-width: 480px) {
    .forum-banner-inner { padding: 14px 14px; gap: 10px; }
    .forum-banner h1 { font-size: 18px; }
    .forum-banner .fb-icon { width: 40px; height: 40px; border-radius: 11px; }
}

/* ── Suppress backdrop-filter on fi-stat pills (mobile perf) ── */
@media (max-width: 768px) {
    .fi-stat { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ── Radio widget: ensure it doesn't sit under the cookie bar ── */
@media (max-width: 480px) {
    #esa-radio { bottom: 72px; left: 10px; }
}

/* ── Horizontal overflow kill-switch for all key wrappers ── */
@media (max-width: 768px) {
    .row, .col-main, .col-side,
    .forum-list, .forum-row,
    .post-content, .reply-card,
    .topic-hero, .posts-list { max-width: 100%; overflow-x: hidden; }
}

/* "More" dropdown as 2 columns on desktop (it has many items now) */
/* The base .dropdown uses opacity/visibility for show/hide (not display),
   so we set display:grid permanently on desktop and let opacity/visibility handle
   the transition — this prevents a flash from block→grid on first open. */
@media (min-width: 681px) {
    #moreDd { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 360px !important; }
    #moreDd a { white-space: nowrap; }
}

/* Animated gradient usernames (purchased gradient name colors) */
@keyframes nameGrad { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@media (prefers-reduced-motion: reduce){ .pa-name[style*="gradient"]{ animation:none !important } }

/* Imported forum descriptions (banners/images/links) on the forum show page */
.forum-desc-html { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.forum-desc-html p { margin: 0 0 6px; }
.forum-desc-html img { max-width: 100%; height: auto; max-height: 220px; border-radius: 10px; margin: 6px 0; }
.forum-desc-html a { color: var(--primary); }

/* ── Signature block (posts + profile) — labeled + small images ── */
.post-sig { position: relative; }
.post-sig::before {
    content: '✍ SIGNATURE';
    display: inline-block;
    font-size: 9px; font-weight: 800; letter-spacing: .12em;
    color: var(--text-mute); opacity: .7;
    margin-bottom: 6px;
}
.post-sig img {
    max-height: 80px !important; width: auto !important; max-width: 100%;
    border-radius: 6px; vertical-align: middle;
}
.post-sig .post-image { max-height: 80px !important; }

/* ── Image lightbox ── */
.esa-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.88); cursor: zoom-out; padding: 30px; }
.esa-lightbox.open { display: flex; }
.esa-lightbox img { max-width: 95vw; max-height: 92vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 10px 50px rgba(0,0,0,.6); }
.esa-lightbox-close { position: fixed; top: 18px; right: 24px; font-size: 30px; color: #fff; cursor: pointer; opacity: .85; line-height: 1; }
.esa-lightbox-close:hover { opacity: 1; }
.post-content img:not(.custom-emoji):not(.ipsEmoji), .post-sig img, .forum-desc-html img:not(.ipsEmoji) { cursor: zoom-in; }

/* =====================================================================
   v8 — Desktop global chrome polish (≥1024px)
   ===================================================================== */

/* ── Scrollbar: refined track + thumb ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); border-left: 1px solid var(--border-soft); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
::-webkit-scrollbar-corner { background: var(--bg-0); }

/* ── Header: tighten gap & make search auto-shrink on 1024-1280 ── */
@media (min-width: 1024px) {
    .site-header .container { gap: 16px; }
    /* Search: let it shrink gracefully between 1024-1300px so nav links have room */
    .search-mini { width: 210px; }
}
@media (min-width: 1300px) {
    .search-mini { width: 260px; }
}

/* ── Nav: active link — richer indicator ── */
@media (min-width: 681px) {
    .main-nav a.active {
        color: #fff;
        background: rgba(var(--primary-rgb), .12);
        box-shadow: inset 0 -2px 0 var(--primary), 0 0 12px rgba(var(--primary-rgb), .15);
    }
    /* More trigger: style as a nav link (matches .main-nav a) */
    #moreMenu .trigger {
        padding: 8px 14px;
        border-radius: 9px;
        color: var(--text-dim);
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: all var(--transition);
        display: flex;
        align-items: center;
        gap: 4px;
    }
    #moreMenu .trigger:hover { color: #fff; background: var(--surface-2); }
}

/* ── Dropdown: subtle inner border + slightly richer shadow ── */
@media (min-width: 681px) {
    .dropdown {
        box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    }
}

/* ── Icon buttons: consistent size, hover ring ── */
@media (min-width: 681px) {
    .icon-btn { width: 38px; height: 38px; }
    .icon-btn:focus-visible { box-shadow: var(--ring); }
}

/* ── Header notification/message panels: slight scroll indicator ── */
@media (min-width: 681px) {
    .hdr-panel-body::-webkit-scrollbar { width: 6px; }
    .hdr-panel-body::-webkit-scrollbar-track { background: transparent; }
    .hdr-panel-body::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; border: none; }
}

/* ── Footer: richer heading style + link hover underline ── */
@media (min-width: 681px) {
    .footer-grid h4 {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .10em;
        color: var(--text-mute);
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-soft);
    }
    .footer-grid a {
        display: block;
        color: var(--text-mute);
        font-size: 13.5px;
        padding: 4px 0;
        transition: color var(--transition), padding-left var(--transition);
    }
    .footer-grid a:hover {
        color: var(--primary-2);
        padding-left: 4px;
    }
    .footer-bottom { padding-top: 24px; }
    .footer-brand { font-weight: 600; letter-spacing: .01em; }
}

/* ── Buttons: polish hover/focus on desktop ── */
@media (min-width: 681px) {
    .btn:focus-visible { box-shadow: var(--ring); outline: none; }
    .btn-primary:focus-visible { box-shadow: var(--ring), 0 6px 18px rgba(var(--primary-rgb),.35); }
    /* Prevent layout shift from hover transform on ghost buttons */
    .btn-ghost { transition: background var(--transition), border-color var(--transition), color var(--transition); }
}

/* ── Typography: tighter line-height for headings on large screens ── */
@media (min-width: 1024px) {
    h1 { letter-spacing: -.03em; }
    h2 { letter-spacing: -.025em; }
    .page-head h1 { font-size: 28px; }
}

/* ── Card: slightly more padding on wide screens ── */
@media (min-width: 1024px) {
    .card-pad { padding: 24px; }
    .card-head { padding: 18px 24px; }
    .widget-head { padding: 14px 18px; }
    .widget-body { padding: 16px 18px; }
}

/* ── Announce bar: constrain width on ultra-wide ── */
@media (min-width: 1024px) {
    .announce-bar { letter-spacing: .01em; }
}

/* ── Shoutbox: slightly taller on desktop ── */
@media (min-width: 1024px) {
    .shout-messages { height: 300px; }
}

/* ── Post author panel: better name truncation on desktop ── */
@media (min-width: 981px) {
    .post-author .username {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        margin: 0 auto;
    }
}

/* ── Sidebar: prevent widgets from becoming too wide on ultra-wide ── */
@media (min-width: 1600px) {
    .col-side { width: 340px; }
}

/* ── Navigation progress bar ── */
.nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10001;
    background: linear-gradient(90deg, var(--primary), #18c8ff); box-shadow: 0 0 10px rgba(var(--primary-rgb),.6);
    opacity: 0; pointer-events: none; }
.nav-progress.active { opacity: 1; animation: navprog 2.4s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes navprog { 0%{width:0} 35%{width:50%} 70%{width:78%} 100%{width:93%} }

/* ── Skeleton shimmer (AJAX panels) ── */
@keyframes skelShimmer { 100% { background-position: -200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 200% 100%; animation: skelShimmer 1.3s linear infinite; border-radius: 8px; }
/* turn the "Loading…" placeholders into skeleton rows */
.hdr-loading { font-size: 0 !important; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.hdr-loading::before, .hdr-loading::after, .shout-loading::before {
    content: ''; height: 40px; border-radius: 8px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 200% 100%; animation: skelShimmer 1.3s linear infinite; }
.shout-loading { font-size: 0 !important; display:flex; flex-direction:column; gap:8px; padding:10px; }
.shout-loading::before { height: 60px; }

@media (prefers-reduced-motion: reduce) {
    .nav-progress.active { animation: none; width: 80%; }
    .skeleton, .hdr-loading::before, .hdr-loading::after, .shout-loading::before { animation: none; }
}

/* =====================================================================
   v9 — Pixel-perfect visual polish pass (Round 2)
   Public chrome: header/nav, dropdowns, buttons, cards, inputs,
   badges, avatars, footer, scrollbars, focus, transitions, spacing.
   ===================================================================== */

/* ── Typography scale: explicit defaults for h3/h4 ── */
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; font-weight: 700; }

/* ── Placeholder text color ── */
::placeholder { color: var(--text-mute); opacity: 1; }
:-ms-input-placeholder { color: var(--text-mute); }

/* ── Select: custom arrow & text ── */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c7591' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

/* ── Input group: label uppercase + tighter tracking ── */
.form-group label {
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: 11.5px;
}

/* ── Header: consistent inner baseline + nav gap ── */
.site-header .container { padding: 0 20px; }
.main-nav { gap: 2px; }
.main-nav a {
    padding: 7px 13px;
    line-height: 1;
    /* ensure all nav links share exactly the same height */
    height: 36px;
    display: inline-flex;
    align-items: center;
}

/* ── Buttons: unified min-height for all sizes ── */
.btn     { min-height: 40px; line-height: 1; }
.btn-sm  { min-height: 34px; padding: 7px 14px; font-size: 13px; }
.btn-lg  { min-height: 48px; padding: 13px 28px; font-size: 16px; }
/* btn-ghost: keep text white on hover (some resets override) */
.btn-ghost:hover { color: #fff; }

/* ── Icon buttons: enforce square, match nav links height ── */
.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}
/* Badge count: tighter position to match smaller icon-btn */
.badge-count { top: -4px; right: -4px; }

/* ── Dropdown: top accent line + item height consistency ── */
.dropdown {
    border-top: 2px solid var(--primary);
    border-radius: var(--radius);
}
/* Dropdown items: guarantee 40px touch target height */
.dropdown a,
.dropdown button {
    height: 40px;
    padding: 0 12px;
    font-size: 13.5px;
    /* Transition on all interactive properties */
    transition: background var(--transition), color var(--transition);
}
/* Chevron decoration on dropdown links */
.dropdown a::after {
    content: none; /* reset any inherited after from forum-info */
}

/* ── User menu avatar ring ── */
.user-menu .trigger .avatar.sm {
    box-shadow: 0 0 0 2px var(--surface-3);
    transition: box-shadow var(--transition);
}
.user-menu .trigger:hover .avatar.sm {
    box-shadow: 0 0 0 2px var(--primary);
}

/* ── Search: placeholder + transition tightening ── */
.search-mini input::placeholder { color: var(--text-mute); }

/* ── Cards: subtle hover elevation ── */
.card {
    transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover {
    border-color: var(--surface-3);
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
/* Suppress hover on cards that are just wrappers (no user interaction expected) */
.card.no-hover:hover { border-color: var(--border); box-shadow: 0 4px 14px rgba(0,0,0,.25); }

/* ── Card header: accent left border on panel titles ── */
.card-head {
    position: relative;
}
.card-head::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--grad-primary);
    opacity: 0.6;
}

/* ── Widget: tighter inner scrollbar (shoutbox) ── */
.shout-messages::-webkit-scrollbar { width: 5px; }
.shout-messages::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }

/* ── Badges: slightly larger touch targets ── */
.badge, .tag, .chip, .prefix, .role-pill {
    /* ensure badges don't collapse below readable size */
    min-height: 22px;
}

/* ── Avatar sizes: explicit border for all sizes ── */
.avatar.md { box-shadow: 0 0 0 1px var(--border); }
.avatar.lg { box-shadow: 0 0 0 2px var(--surface-3); }
.avatar.xl { box-shadow: 0 0 0 3px var(--surface-3), var(--shadow-glow); }

/* ── Pagination: active item uses readable on-accent text ── */
.pagination .current { color: var(--on-accent); }
.pagination a:hover  { color: #fff; }

/* ── Breadcrumbs: separator using CSS instead of HTML entity ── */
.breadcrumbs .sep { margin: 0 -2px; }

/* ── Page-head: align button to baseline of h1 ── */
.page-head { align-items: center; }
.page-head h1 { line-height: 1.2; }

/* ── Footer: brand description paragraph ── */
.site-footer .brand-desc {
    font-size: 13.5px;
    color: var(--text-mute);
    line-height: 1.6;
    margin-top: 10px;
    max-width: 260px;
}
/* Footer social icon row */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.footer-social a {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    color: var(--text-mute);
    font-size: 16px;
    padding: 0;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.footer-social a:hover {
    background: var(--surface-3);
    border-color: var(--primary);
    color: #fff;
}

/* ── Footer: copyright text breathing room ── */
.footer-bottom { margin-top: 4px; }

/* ── Announce bar: left border accent ── */
.announce-bar {
    border-left: none;
    border-right: none;
    letter-spacing: .01em;
}

/* ── React buttons: smoother ring on focus ── */
.react-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* ── Stat cards: icon gradient variants ── */
.stat-card .stat-ico.ico-primary { background: rgba(var(--primary-rgb),.14); color: var(--primary-2); }
.stat-card .stat-ico.ico-green   { background: rgba(46,230,166,.14);  color: var(--green);    }
.stat-card .stat-ico.ico-pink    { background: rgba(255,92,138,.14);  color: var(--pink);     }
.stat-card .stat-ico.ico-amber   { background: rgba(245,179,1,.14);   color: var(--amber);    }
.stat-card .stat-ico.ico-cyan    { background: rgba(var(--accent-rgb),.14);  color: var(--accent-2); }

/* ── Topic row: slightly more breathing room ── */
.topic-main .title { letter-spacing: -.01em; }
.topic-main .meta  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Post quote: tighter top-left radius + richer border ── */
.post-content .post-quote {
    border-left-color: var(--primary-2);
    background: rgba(var(--primary-rgb),.06);
    border-radius: 0 8px 8px 0;
}

/* ── Online dot animation: keep pulse alive ── */
@keyframes onlinePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(46,230,166,.5); }
    50%      { box-shadow: 0 0 0 5px rgba(46,230,166,0); }
}
.online-dot.on {
    animation: onlinePulse 2.4s ease infinite;
}

/* ── Panel header items: consistent 42px height ── */
.hdr-panel-head { height: 48px; padding: 0 16px; }

/* ── Header dropdown panel: top accent ── */
.hdr-panel {
    border-top: 2px solid var(--primary);
    border-radius: var(--radius);
}

/* ── Spinners: reduced-motion guard already in global block above ── */
/* Gradient move (XP bar, username gradient): guard */
@media (prefers-reduced-motion: reduce) {
    .xp-bar span   { animation: none; }
    .name-rainbow  { animation: none; color: var(--primary-2); }
    .online-dot.on { animation: none; }
    /* lp-feat hover transform: disable */
    .lp-feat:hover { transform: none !important; }
    /* hl-srv-card hover transform: disable */
    .hl-srv-card:hover { transform: none !important; }
    /* home-feed item icon scale */
    .hf-item:hover .hf-item-icon { transform: none !important; }
    /* hf-item before accent bar */
    .hf-item::before { transition: none !important; }
    /* hf-item arrow */
    .hf-item:hover .hf-item-arrow { transform: none !important; }
    /* stat card lift */
    .stat-card:hover { transform: none !important; }
    /* gradmove (landing stat numbers) */
    @keyframes gradmove { to { background-position: 0 0; } }
    /* lp-float bobs */
    .lp-float { animation: none !important; }
    /* Shout message entrance */
    .shout-msg { animation: none !important; }
}

/* ── 8px spacing rhythm helpers (supplement existing mt/mb utils) ── */
.mt-5  { margin-top: 48px; }
.mb-4  { margin-bottom: 36px; }
.gap-3 { gap: 24px; }
.gap-4 { gap: 32px; }
.p-0   { padding: 0; }
.p-1   { padding: 8px; }
.p-2   { padding: 16px; }
.p-3   { padding: 24px; }

/* ── Mobile: reset nav-link height so drawer items are taller ── */
@media (max-width: 680px) {
    .main-nav a { height: auto; padding: 0 14px; }
    /* Ensure nav-toggle matches icon-btn size on mobile */
    .nav-toggle { width: 38px; height: 38px; }
    /* Dropdown reset: no top border in mobile drawer */
    .main-nav .user-menu .dropdown { border-top: none; }
    /* hdr-panel: no top border radius on mobile (full-width) */
    .hdr-panel { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 2px solid var(--primary); }
}

/* ── Very small phones (360px): prevent btn text wrap ── */
@media (max-width: 380px) {
    .btn-sm { font-size: 12.5px; padding: 7px 10px; }
}

/* ── Focus rings: extend to more interactive elements ── */
.react-btn:focus-visible,
.icon-btn:focus-visible,
.user-menu .trigger:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* inputs already get box-shadow ring on :focus — no extra outline needed */

/* ── Scrollbar: thin scrollbar for Firefox ── */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) var(--bg-0); }