/* ==========================================================================
   Neon Vice — premium SMF 2.1 theme for Vice City Attack & Defense
   Loaded after SMF's index.css / responsive.css and overrides them.

    1. Fonts & design tokens        8. Topic lists (message index)
    2. Base, utilities, atmosphere   9. Thread view
    3. Components                   10. Auth pages & popups
    4. Navigation                   11. Profile, game pages
    5. Hero                         12. Footer
    6. Layout & SMF surfaces        13. Responsive
    7. Home dashboard               14. Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. Fonts & design tokens
   ========================================================================== */
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	/* Surfaces */
	--bg-primary: #0B0A1A;
	--bg-secondary: #110F24;
	--bg-card: rgba(22, 19, 44, 0.72);
	--bg-card-solid: #16132C;
	--bg-elevated: #1E1A3A;
	--bg-input: #0F0D22;

	/* Accents */
	--accent-pink: #FF2E88;
	--accent-pink-soft: rgba(255, 46, 136, 0.14);
	--accent-cyan: #22D3EE;
	--accent-cyan-soft: rgba(34, 211, 238, 0.12);
	--accent-purple: #B388FF;
	--accent-orange: #FF7A45;
	--accent-gold: #FFC857;
	--success: #3DDC97;
	--danger: #FF5470;

	/* Teams */
	--attack: #FF2E6E;
	--attack-2: #FF5A4E;
	--attack-soft: rgba(255, 46, 110, 0.14);
	--defense: #22D3EE;
	--defense-2: #3B82F6;
	--defense-soft: rgba(34, 211, 238, 0.12);

	/* Text */
	--text-primary: #F1F0FF;
	--text-soft: #D6D3EE;
	--text-secondary: #A3A0C2;
	--text-dim: #75729A;

	/* Lines, depth, shape */
	--border: rgba(255, 255, 255, 0.07);
	--border-strong: rgba(255, 255, 255, 0.14);
	--shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
	--shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.28);
	--glow-pink: 0 0 26px rgba(255, 46, 136, 0.35);
	--glow-cyan: 0 0 26px rgba(34, 211, 238, 0.35);
	--radius: 14px;
	--radius-sm: 9px;
	--radius-lg: 20px;

	/* Type */
	--font-head: "Rajdhani", "Segoe UI", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Layout & motion */
	--container: 1320px;
	--gutter: 24px;
	--nav-h: 64px;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	--accent: var(--accent-pink);
}

/* Category / component tones */
.nv-tone--pink { --accent: var(--accent-pink); }
.nv-tone--info { --accent: var(--accent-cyan); }
.nv-tone--attack { --accent: var(--attack); }
.nv-tone--defense { --accent: var(--defense); }
.nv-tone--event { --accent: var(--accent-purple); }
.nv-tone--gold { --accent: var(--accent-gold); }
.nv-tone--staff { --accent: var(--accent-orange); }
.nv-tone--archive { --accent: #8B88AD; }

/* ==========================================================================
   2. Base, utilities, atmosphere
   ========================================================================== */
html {
	background-color: var(--bg-primary);
	scrollbar-color: #2c2750 var(--bg-primary);
	scroll-padding-top: 130px;
}
body {
	margin: 0;
	padding: 0;
	background-color: var(--bg-primary);
	background-image:
		radial-gradient(1100px 620px at 92% -8%, rgba(255, 46, 136, 0.09), transparent 60%),
		radial-gradient(900px 540px at -12% 32%, rgba(34, 211, 238, 0.06), transparent 60%),
		radial-gradient(800px 500px at 50% 110%, rgba(179, 136, 255, 0.06), transparent 60%);
	background-attachment: fixed;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Film grain + faint scanlines */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1000;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--accent-pink); color: #fff; }

a:link, a:visited { color: #ff6fae; text-decoration: none; }
a:hover { color: #fff; text-decoration: none; }
strong, b { color: #fff; }
h1, h2, h3, h4, h5, h6 { color: #fff; }
hr, .hrcolor { border-color: var(--border-strong); background: var(--border-strong); }
.smalltext, .smalltext a, .inline, .moderators, .board_description { color: var(--text-secondary); }

:focus-visible {
	outline: 2px solid var(--accent-cyan);
	outline-offset: 2px;
	border-radius: 6px;
}

.nv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.nv-skip {
	position: absolute; left: 12px; top: -60px; z-index: 2000;
	padding: 10px 14px; border-radius: var(--radius-sm);
	background: var(--accent-pink); color: #fff !important; font-weight: 700;
	transition: top .2s;
}
.nv-skip:focus { top: 12px; }

.nv-i { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.18em; fill: currentColor; stroke: currentColor; color: inherit; }
.nv-atk { color: var(--attack); }
.nv-def { color: var(--defense); }
.nv-strong { color: #fff; font-weight: 700; }
.nv-empty { color: var(--text-secondary); padding: 18px; text-align: center; }

/* SMF sprite icons are dark grey — lighten for the dark UI */
.main_icons::before, .toggle_up::before, .toggle_down::before, .menu_icon, .hide_popup::before, .generic_icons::before {
	filter: brightness(0) invert(0.86);
}
/* Default toggles sit on a #f7f7f7 chip, which the filter above turns into a white square */
.toggle_up::before, .toggle_down::before, .toggle_up:hover::before, .toggle_down:hover::before {
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

/* ==========================================================================
   3. Components
   ========================================================================== */

/* Cards */
.nv-card {
	position: relative;
	box-sizing: border-box;
	padding: 20px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.nv-card--hover:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.nv-card--neon {
	border: 1px solid transparent;
	background:
		linear-gradient(var(--bg-card-solid), var(--bg-card-solid)) padding-box,
		linear-gradient(120deg, rgba(255, 46, 136, 0.75), rgba(179, 136, 255, 0.35), rgba(34, 211, 238, 0.75)) border-box;
	background-size: 100% 100%, 220% 220%;
	animation: nv-border 8s ease-in-out infinite alternate;
}
@keyframes nv-border { to { background-position: 0 0, 100% 50%; } }
.nv-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.nv-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--text-secondary);
	font: 600 12px/1.2 var(--font-body);
	letter-spacing: 0.12em; text-transform: uppercase;
}
.nv-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.nv-section-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font: 700 26px/1.1 var(--font-head); letter-spacing: 0.01em; }
.nv-section-head h2 .nv-i { color: var(--accent-pink); filter: drop-shadow(0 0 8px rgba(255, 46, 136, 0.6)); }
.nv-more, a.nv-more:link, a.nv-more:visited { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.nv-more:hover { color: #fff; }

/* Buttons (also restyles SMF's buttons and inputs) */
.nv-btn, .button, a.button, input[type="submit"], input[type="button"], input[type="reset"], button:not(.sceditor-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-sizing: border-box;
	height: auto;
	min-height: 36px;
	padding: 7px 15px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--bg-elevated);
	color: var(--text-primary) !important;
	font: 600 13px/1.2 var(--font-body);
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s;
}
.nv-btn:hover, .button:hover, a.button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:not(.sceditor-button):hover {
	border-color: rgba(255, 46, 136, 0.6);
	background: #272148;
	color: #fff !important;
	box-shadow: 0 0 0 1px rgba(255, 46, 136, 0.2), 0 6px 18px rgba(255, 46, 136, 0.18);
}
.nv-btn--primary, .button.active, a.button.active, .buttonlist .button.active {
	border-color: transparent !important;
	background: linear-gradient(135deg, #ff2e88 0%, #ff5a5f 100%) !important;
	background-size: 160% 160% !important;
	color: #fff !important;
	box-shadow: 0 8px 22px rgba(255, 46, 136, 0.35);
}
.nv-btn--primary:hover { transform: translateY(-1px); background-position: 100% 0 !important; box-shadow: 0 10px 30px rgba(255, 46, 136, 0.55); }
.nv-btn--ghost { background: rgba(255, 255, 255, 0.04); }
.nv-btn--discord { background: rgba(88, 101, 242, 0.18); border-color: rgba(88, 101, 242, 0.5); }
.nv-btn--discord:hover { background: #5865F2; border-color: #5865F2; box-shadow: 0 8px 22px rgba(88, 101, 242, 0.45); }
.nv-btn--youtube { background: rgba(255, 0, 0, 0.18); border-color: rgba(255, 0, 0, 0.5); }
.nv-btn--youtube:hover { background: #FF0000; border-color: #FF0000; box-shadow: 0 8px 22px rgba(255, 0, 0, 0.45); }
.nv-btn--lg { min-height: 48px; padding: 11px 22px; border-radius: 11px; font-size: 15px; }
.nv-btn--sm { min-height: 30px; padding: 5px 11px; font-size: 12px; }
.nv-btn.is-done { border-color: var(--success); color: var(--success) !important; }

/* Form fields */
input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="number"], input[type="url"], input[type="date"], input[type="tel"], select, textarea {
	box-sizing: border-box;
	min-height: 36px;
	background: var(--bg-input);
	color: var(--text-primary);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: none;
	font-family: var(--font-body);
	transition: border-color .2s, box-shadow .2s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--accent-pink);
	box-shadow: 0 0 0 3px rgba(255, 46, 136, 0.22);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-pink); }
select option { background: var(--bg-card-solid); color: var(--text-primary); }
fieldset { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
legend { color: var(--text-secondary); }

/* Badges */
.nv-badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-soft);
	font: 600 11.5px/1.35 var(--font-body);
	letter-spacing: 0.01em;
	white-space: nowrap;
	vertical-align: middle;
}
.nv-badge--attack { border-color: rgba(255, 46, 110, 0.45); background: var(--attack-soft); color: #ff8fb0; }
.nv-badge--defense { border-color: rgba(34, 211, 238, 0.45); background: var(--defense-soft); color: #8feaf7; }
.nv-badge--rank, .nv-badge--gold { border-color: rgba(255, 200, 87, 0.45); background: rgba(255, 200, 87, 0.1); color: #ffd98a; }
.nv-badge--level { border-color: rgba(179, 136, 255, 0.5); background: rgba(179, 136, 255, 0.14); color: #d6c2ff; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.nv-badge--demo { border-style: dashed; border-color: rgba(255, 122, 69, 0.6); background: rgba(255, 122, 69, 0.1); color: #ffb08f; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; }
.nv-badge--new { border-color: rgba(255, 46, 136, 0.5); background: var(--accent-pink-soft); color: #ff9cc8; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; }

/* Status dots */
.nv-dot { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); }
.nv-dot--on { background: var(--success); animation: nv-pulse-green 2.2s infinite; }
.nv-dot--live { background: var(--accent-pink); animation: nv-pulse-pink 1.8s infinite; }
.nv-dot--cyan { background: var(--accent-cyan); animation: nv-pulse-cyan 1.8s infinite; }
.nv-dot--off { background: #5b5878; }
@keyframes nv-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); } }
@keyframes nv-pulse-pink { 0% { box-shadow: 0 0 0 0 rgba(255, 46, 136, 0.65); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 46, 136, 0); } }
@keyframes nv-pulse-cyan { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.65); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); } }

/* Meters & XP bars */
.nv-meter, .nv-xp {
	position: relative;
	display: block;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.nv-meter > span, .nv-xp > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));
	box-shadow: 0 0 12px rgba(255, 46, 136, 0.5);
	transition: width .8s var(--ease);
}
.nv-xp > span { background: linear-gradient(90deg, var(--accent-purple), var(--accent-pink)); }
.nv-xp--lg { height: 10px; }
.nv-xp--game > span { background: linear-gradient(90deg, var(--accent-gold), var(--accent-orange)); box-shadow: 0 0 12px rgba(255, 200, 87, 0.45); }

/* Avatars */
.nv-avatar { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; }
.nv-avatar img, .nv-avatar img.avatar, .nv-avatar > .nv-initial {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0;
	border-radius: inherit;
	object-fit: cover;
}
.nv-avatar--sm { width: 28px; height: 28px; font-size: 13px; }
.nv-avatar--md { width: 38px; height: 38px; font-size: 16px; }
.nv-avatar--lg { width: 64px; height: 64px; font-size: 26px; }
.nv-avatar--post { width: 92px; height: 92px; border-radius: 22px; font-size: 36px; }
.nv-avatar--xl { width: 108px; height: 108px; border-radius: 26px; font-size: 44px; }
.nv-avatar--post, .nv-avatar--xl { box-shadow: 0 0 0 2px var(--bg-card-solid), 0 0 0 4px rgba(255, 46, 136, 0.55), 0 12px 30px rgba(255, 46, 136, 0.2); }
.nv-avatar .nv-dot { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; animation: none; box-shadow: 0 0 0 3px var(--bg-card-solid); }
.nv-initial {
	display: inline-grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
	color: #fff;
	font: 700 1em/1 var(--font-head);
	text-transform: uppercase;
}

/* Key/value list */
.nv-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.nv-kv > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.nv-kv dt { display: flex; align-items: center; gap: 5px; color: var(--text-dim); font: 600 10.5px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.nv-kv dd { margin: 5px 0 0; overflow: hidden; color: #fff; font: 700 16px/1.1 var(--font-head); text-overflow: ellipsis; white-space: nowrap; }

/* Stat grid */
.nv-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nv-stat { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.03); transition: border-color .25s, transform .25s var(--ease); }
.nv-stat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.nv-stat-label { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font: 600 10.5px/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.nv-stat strong { display: block; margin-top: 6px; color: #fff; font: 700 28px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.nv-stat strong small { margin-left: 2px; color: var(--text-secondary); font-size: 16px; }
.nv-stat--attack strong { color: #ff7aa6; text-shadow: 0 0 18px rgba(255, 46, 110, 0.35); }
.nv-stat--defense strong { color: #7ce8f7; text-shadow: 0 0 18px rgba(34, 211, 238, 0.35); }
.nv-stat--gold strong { color: #ffd98a; text-shadow: 0 0 18px rgba(255, 200, 87, 0.35); }

/* Tables & leaderboard */
.nv-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nv-table-wrap--flush { border: 0; border-radius: 0; background: none; backdrop-filter: none; margin: 0 -4px; }
.nv-table { width: 100%; border-collapse: collapse; }
.nv-table--cards { min-width: 680px; }
.nv-table th {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text-dim);
	font: 600 11px/1.2 var(--font-body);
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}
.nv-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text-soft); vertical-align: middle; }
.nv-table tbody tr { transition: background .2s; }
.nv-table tbody tr:hover { background: rgba(255, 46, 136, 0.06); }
.nv-table tbody tr:last-child td { border-bottom: 0; }
.nv-table .num { text-align: right; font: 600 15px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.nv-table th.num { font: 600 11px/1.2 var(--font-body); }
.nv-col-pos { width: 44px; }
.nv-rankpos { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--text-soft); font: 700 15px/1 var(--font-head); }
.nv-player-cell { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; font-weight: 600; }
.nv-player-cell-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-kd { color: var(--accent-cyan); }
.is-podium-1 { background: linear-gradient(90deg, rgba(255, 200, 87, 0.11), transparent 70%); }
.is-podium-2 { background: linear-gradient(90deg, rgba(200, 210, 235, 0.08), transparent 70%); }
.is-podium-3 { background: linear-gradient(90deg, rgba(224, 149, 91, 0.09), transparent 70%); }
.is-podium-1 .nv-rankpos { background: linear-gradient(135deg, #ffe08a, #ffb347); color: #2a1d00; box-shadow: 0 0 16px rgba(255, 200, 87, 0.55); }
.is-podium-2 .nv-rankpos { background: linear-gradient(135deg, #eef2fb, #aab4cc); color: #1b2030; }
.is-podium-3 .nv-rankpos { background: linear-gradient(135deg, #f3b98a, #c9743d); color: #2a1406; }
.nv-leaderboard--compact td { padding: 8px 6px; }
.nv-leaderboard--compact th { padding: 8px 6px; background: none; }
.nv-leaderboard--compact .nv-rankpos { width: 24px; height: 24px; font-size: 13px; border-radius: 6px; }
.nv-demo-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--text-secondary); }

/* ==========================================================================
   4. Navigation — sticky glass bar, two tiers on desktop
   ========================================================================== */
#top_section.nv-nav {
	position: sticky;
	top: 0;
	z-index: 90;
	margin: 0;
	padding: 0;
	background: rgba(11, 10, 26, 0.7);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border-bottom: 1px solid var(--border);
	box-shadow: none;
	transition: background .3s, box-shadow .3s;
}
#top_section.nv-nav.is-scrolled { background: rgba(9, 8, 22, 0.92); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
#top_section .nv-nav-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 20px;
	max-width: var(--container);
	width: auto;
	margin: 0 auto;
	padding: 0 var(--gutter);
	box-sizing: border-box;
}
.nv-brand { display: flex; align-items: center; gap: 11px; height: var(--nav-h); flex-shrink: 0; white-space: nowrap; }
a.nv-brand:link, a.nv-brand:visited { color: #fff; }
.nv-brand-logo { max-height: 42px; width: auto; }
.nv-mark {
	display: inline-grid;
	place-items: center;
	height: 38px;
	padding: 0 10px;
	border-radius: 10px;
	background: linear-gradient(135deg, #ff2e88 0%, #ff7a45 100%);
	color: #fff;
	font: 700 19px/1 var(--font-head);
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 22px rgba(255, 46, 136, 0.45);
	transition: transform .3s var(--ease), box-shadow .3s;
}
.nv-mark i { font-style: normal; color: #2a0f2e; opacity: 0.5; }
.nv-brand:hover .nv-mark { transform: rotate(-3deg) scale(1.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 8px 28px rgba(255, 46, 136, 0.65); }
.nv-brand-text { display: flex; flex-direction: column; line-height: 1; }
.nv-brand-text strong { color: #fff; font: 700 19px/1 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; }
.nv-brand-text small { margin-top: 4px; color: var(--accent-cyan); font: 600 10.5px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }

.nv-nav-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; min-height: var(--nav-h); }

/* Search */
#search_form.nv-search { display: flex; margin: 0; padding: 0; float: none; }
#search_form input[type="search"] {
	width: 200px;
	height: 38px;
	min-height: 38px;
	padding: 0 14px 0 38px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A3A0C2' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50%;
	transition: width .3s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
#search_form input[type="search"]:focus { width: 260px; background-color: var(--bg-input); }

/* Account area */
#top_info { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; float: none; list-style: none; }
#top_info > li { position: relative; margin: 0; padding: 0; float: none; }
#top_info > li > a:not(.nv-btn) {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 10px;
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	font-weight: 600;
}
#top_info > li > a:not(.nv-btn):hover, #top_info > li > a.active:not(.nv-btn) { background: rgba(255, 255, 255, 0.06); color: #fff; }
#top_info #pm_menu_top .textmenu, #top_info #alerts_menu_top .textmenu { display: none; }
#top_info .nv-btn { height: 38px; min-height: 38px; }
#profile_menu_top img.avatar, #profile_menu_top .nv-initial {
	width: 30px !important;
	height: 30px !important;
	max-width: none;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
	font-size: 14px;
	box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--accent-pink);
}
.amt, #top_info .amt, .dropmenu li .amt {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent-pink);
	color: #fff !important;
	font: 700 11px/1 var(--font-body);
	box-shadow: 0 0 12px rgba(255, 46, 136, 0.6);
}
.top_menu {
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	background: var(--bg-card-solid);
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	box-shadow: var(--shadow);
	color: var(--text-primary);
}
.top_menu .unread, .top_menu .unread_notify { background: var(--accent-pink-soft); }
/* The account bar sits at the right edge, so its dropdowns must open leftwards.
   SMF pins them with left: 0, which pushed half of the profile menu off-screen. */
#top_info .top_menu {
	left: auto !important;
	right: 0 !important;
	max-width: calc(100vw - 2 * var(--gutter));
	box-sizing: border-box;
}
#top_info #profile_menu { width: 360px; padding: 14px 16px; }
#top_info .profile_user_links ol { margin-left: 0; column-gap: 18px; }
@media (max-width: 720px) {
	#top_info .top_menu {
		position: fixed;
		top: calc(var(--nav-h) + 6px) !important;
		left: var(--gutter) !important;
		right: var(--gutter) !important;
		width: auto !important;
		max-width: none;
		max-height: calc(100vh - var(--nav-h) - 24px);
		overflow-y: auto;
	}
	#top_info .profile_user_links ol { column-count: 1; }
	#top_info .profile_user_links li { font-size: 15px; line-height: 2.4em; }
}
.top_menu a:link, .top_menu a:visited { color: var(--text-soft); }
.nv-nav-discord span { display: inline; }

/* Main menu (second tier) */
#main_menu {
	position: relative;
	order: 3;
	flex: 1 0 100%;
	margin: 0;
	padding: 0;
	float: none;
	border-top: 1px solid var(--border);
}
#main_menu .dropmenu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 6px 0; float: none; }
#main_menu .dropmenu > li { position: relative; float: none; margin: 0; padding: 0; }
.dropmenu li a.firstlevel {
	display: flex;
	align-items: center;
	gap: 6px;
	height: auto;
	padding: 9px 13px;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	box-shadow: none;
	color: var(--text-secondary);
	font: 600 14px/1.2 var(--font-body);
	transition: color .2s, background .2s;
}
#main_menu .dropmenu > li > a.firstlevel > .main_icons { display: none; }
#main_menu #button_search, #main_menu #button_help { display: none; }
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel, .dropmenu li a.firstlevel:focus-visible { background: rgba(255, 255, 255, 0.05); color: #fff; box-shadow: none; }
.dropmenu li a.active, .dropmenu li a.active:hover, .dropmenu li:hover a.active { background: none; color: #fff; box-shadow: none; }
.dropmenu li a.active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-pink); box-shadow: 0 0 8px var(--accent-pink); }
.dropmenu li ul {
	margin-top: 4px;
	padding: 6px;
	background: var(--bg-card-solid);
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	box-shadow: var(--shadow);
}
.dropmenu li ul li a, .dropmenu li ul li a:link, .dropmenu li ul li a:visited {
	padding: 8px 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--text-soft);
}
.dropmenu li ul li a:hover, .dropmenu li li:hover > a { background: var(--accent-pink-soft); color: #fff; }
.nv-nav-indicator {
	position: absolute;
	left: 0;
	top: 0;
	height: 2px;
	width: 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan));
	box-shadow: 0 0 12px rgba(255, 46, 136, 0.8);
	opacity: 0;
	pointer-events: none;
	transition: transform .4s var(--ease), width .4s var(--ease), top .2s, opacity .25s;
}
.mobile_user_menu {
	display: none;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	cursor: pointer;
}
.mobile_user_menu .text_menu { color: var(--text-primary); font-weight: 600; }

/* News ticker */
.nv-ticker { border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(255, 46, 136, 0.12), rgba(34, 211, 238, 0.05)); }
.nv-ticker .inner_wrap { display: flex; align-items: center; gap: 12px; max-width: var(--container); margin: 0 auto; padding: 9px var(--gutter); box-sizing: border-box; }
.nv-ticker-label { padding: 2px 8px; border-radius: 6px; background: var(--accent-pink); color: #fff; font: 700 11px/1.5 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.nv-ticker p { margin: 0; overflow: hidden; color: var(--text-soft); text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   5. Hero — Vice City at night
   ========================================================================== */
.nv-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--border); }
.nv-hero-sky {
	position: absolute; inset: 0; z-index: -6;
	background:
		radial-gradient(900px 420px at 72% 88%, rgba(255, 90, 120, 0.35), transparent 70%),
		linear-gradient(180deg, #0b0a1a 0%, #150d30 34%, #340f48 64%, #6c1650 88%, #8a1f4f 100%);
}
.nv-hero-sun {
	position: absolute; z-index: -5;
	right: 11%; bottom: 20%;
	width: 420px; height: 420px;
	border-radius: 50%;
	background: linear-gradient(180deg, #ffe07a 0%, #ff9a3d 40%, #ff2e88 80%);
	-webkit-mask: linear-gradient(#000 0 0) top / 100% 52% no-repeat, repeating-linear-gradient(180deg, #000 0 18px, transparent 18px 26px);
	mask: linear-gradient(#000 0 0) top / 100% 52% no-repeat, repeating-linear-gradient(180deg, #000 0 18px, transparent 18px 26px);
	filter: drop-shadow(0 0 60px rgba(255, 90, 120, 0.6));
}
.nv-hero-skyline {
	position: absolute; z-index: -4;
	left: 0; right: 0; bottom: 30%;
	height: 150px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%2309071a' d='M0 200V132h38v-20h30v28h26V90h24V68h14v22h26v60h30v-30h40V60h18V38h12v22h20v70h38v-30h32v46h28V80h40v44h30V94h20V64h30v46h40v30h30v-40h28V50h16V28h10v22h16v70h40V90h40v44h30V74h40v40h30v32h40V84h30V60h18v24h22v46h40v-26h40v36h30V94h40v26h30V70h32v56h28v-16h32v90z'/%3E%3Cg fill='%23ff2e88' opacity='.75'%3E%3Crect x='246' y='70' width='4' height='6'/%3E%3Crect x='604' y='60' width='4' height='6'/%3E%3Crect x='604' y='80' width='4' height='6'/%3E%3Crect x='896' y='74' width='4' height='6'/%3E%3Crect x='470' y='80' width='4' height='6'/%3E%3C/g%3E%3Cg fill='%2322d3ee' opacity='.7'%3E%3Crect x='110' y='80' width='4' height='6'/%3E%3Crect x='390' y='96' width='4' height='6'/%3E%3Crect x='760' y='88' width='4' height='6'/%3E%3Crect x='1120' y='84' width='4' height='6'/%3E%3Crect x='1000' y='112' width='4' height='6'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom / 1200px 100%;
	filter: drop-shadow(0 -2px 12px rgba(255, 46, 136, 0.25));
}
.nv-hero-grid {
	position: absolute; z-index: -3;
	left: -50%; right: -50%; bottom: -2px;
	height: 32%;
	background-color: #0b0a1a;
	background-image:
		linear-gradient(rgba(255, 46, 136, 0.55) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34, 211, 238, 0.35) 1px, transparent 1px);
	background-size: 64px 34px;
	transform: perspective(360px) rotateX(62deg);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, #000 10%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
	mask-image: linear-gradient(to top, #000 10%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
	animation: nv-grid 2.6s linear infinite;
}
@keyframes nv-grid { to { background-position: 0 34px, 0 0; } }
.nv-hero-particles { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.nv-hero-particles::before, .nv-hero-particles::after {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 2px; height: 2px;
	border-radius: 50%;
	box-shadow:
		120px 260px 0 rgba(255, 255, 255, 0.5), 340px 120px 0 rgba(34, 211, 238, 0.7), 520px 300px 0 rgba(255, 46, 136, 0.7),
		760px 90px 0 rgba(255, 255, 255, 0.4), 910px 240px 0 rgba(34, 211, 238, 0.6), 1080px 160px 0 rgba(255, 255, 255, 0.5),
		1260px 280px 0 rgba(255, 46, 136, 0.6), 1400px 70px 0 rgba(255, 255, 255, 0.4), 220px 60px 0 rgba(255, 255, 255, 0.35),
		640px 200px 0 rgba(255, 255, 255, 0.45), 1180px 40px 0 rgba(34, 211, 238, 0.5), 60px 150px 0 rgba(255, 46, 136, 0.5);
	animation: nv-drift 16s linear infinite;
}
.nv-hero-particles::after { transform: translate(180px, 120px) scale(1.4); animation-duration: 24s; animation-delay: -8s; opacity: 0.6; }
@keyframes nv-drift { 0% { translate: 0 30px; opacity: 0; } 20% { opacity: 1; } 100% { translate: 0 -90px; opacity: 0; } }
.nv-palm {
	position: absolute; z-index: -1; bottom: -8px;
	width: 250px; height: 360px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cpath d='M106 300C99 236 95 176 110 112' stroke='%2305040d' stroke-width='9' fill='none' stroke-linecap='round'/%3E%3Cpath fill='%2305040d' d='M110 112C82 82 40 80 6 106c38-10 72-4 100 16zM110 112c10-42 50-58 88-46-36 4-64 22-84 56zM110 112C94 64 60 34 20 32c36 16 62 44 80 90zM110 112c34-18 70-4 88 32-26-22-56-28-84-18zM110 112c4-42-6-82-28-108 28 28 40 66 34 110zM110 112c-30-4-62 18-74 54 20-26 46-40 76-44z'/%3E%3C/svg%3E") no-repeat bottom / contain;
	transform-origin: 50% 100%;
	animation: nv-sway 9s ease-in-out infinite alternate;
}
.nv-palm--left { left: 1%; }
.nv-palm--right { right: -36px; width: 190px; height: 280px; animation-delay: -4s; }
@keyframes nv-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.nv-palm--right { scale: -1 1; }
.nv-hero-inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 76px var(--gutter) 84px; box-sizing: border-box; }
.nv-kicker {
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0; padding: 7px 14px;
	border: 1px solid rgba(34, 211, 238, 0.35);
	border-radius: 999px;
	background: rgba(11, 10, 26, 0.45);
	color: var(--accent-cyan);
	font: 600 12px/1.2 var(--font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.nv-hero-title {
	max-width: 760px;
	margin: 22px 0 16px;
	color: #fff;
	font: 700 clamp(42px, 6.6vw, 88px)/0.92 var(--font-head);
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-shadow: 0 0 40px rgba(255, 46, 136, 0.3);
}
.nv-hero-title em { font-style: normal; }
.nv-hero-title .nv-atk { color: var(--attack); text-shadow: 0 0 30px rgba(255, 46, 110, 0.6); }
.nv-hero-title .nv-def { color: var(--defense); text-shadow: 0 0 30px rgba(34, 211, 238, 0.6); }
.nv-hero-lead { max-width: 560px; margin: 0; color: #ddd8f5; font-size: 17px; line-height: 1.6; }
.nv-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nv-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 160px)); gap: 12px; margin: 42px 0 0; padding: 0; list-style: none; }
.nv-hero-stats li {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
	align-items: center;
	padding: 13px 16px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: rgba(11, 10, 26, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform .3s var(--ease), border-color .3s;
}
.nv-hero-stats li:hover { transform: translateY(-3px); border-color: rgba(255, 46, 136, 0.45); }
.nv-hero-stats .nv-i { grid-row: span 2; width: 22px; height: 22px; color: var(--accent-pink); }
.nv-hero-stats strong { color: #fff; font: 700 26px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.nv-hero-stats span { margin-top: 4px; color: var(--text-secondary); font: 600 10.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }

/* ==========================================================================
   6. Layout & SMF surfaces
   ========================================================================== */
#footerfix { background: none; }
#wrapper {
	max-width: var(--container);
	width: auto;
	margin: 0 auto;
	padding: 0 var(--gutter);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
}
#upper_section, #inner_section { margin: 0; padding: 0; background: none !important; border: 0; box-shadow: none; }
#upper_section { padding: 18px 0 6px; }
.navigate_section, .navigate_section ul { margin: 0; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
.navigate_section ul li, .navigate_section ul li a, .navigate_section ul li a span { color: var(--text-secondary); font-size: 13px; }
.navigate_section ul li a:hover span { color: #fff; }
.navigate_section ul li.last span, .navigate_section ul li.last a span { color: var(--text-primary); font-weight: 600; }
.navigate_section .dividers { color: var(--text-dim); font-size: 9px; }
#content_section { padding: 10px 0 56px; background: none; border: 0; box-shadow: none; }
#main_content_section { display: block; padding: 0; }

.windowbg, .roundframe, .approvebg, .approvetopic, .unapproved {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: none;
	color: var(--text-primary);
}
.information, .description, .plainbox {
	background: var(--accent-cyan-soft);
	border: 1px solid rgba(34, 211, 238, 0.2);
	border-radius: var(--radius-sm);
	color: var(--text-soft);
}
.noticebox { background: rgba(255, 200, 87, 0.08); border: 1px solid rgba(255, 200, 87, 0.3); border-radius: var(--radius-sm); color: #ffe3a3; }
.errorbox { background: rgba(255, 84, 112, 0.09); border: 1px solid rgba(255, 84, 112, 0.38); border-radius: var(--radius-sm); color: #ffc0cb; }
.infobox { background: rgba(61, 220, 151, 0.08); border: 1px solid rgba(61, 220, 151, 0.3); border-radius: var(--radius-sm); color: #baf5d7; }
.cat_bar {
	background: linear-gradient(90deg, rgba(255, 46, 136, 0.2), rgba(255, 46, 136, 0.02) 70%);
	border: 1px solid var(--border);
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
}
.title_bar { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sub_bar { background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--border); }
h3.catbg, h3.titlebg, h4.titlebg, h4.catbg, h3.subbg, h4.subbg, .catbg, .titlebg, .subbg {
	color: #fff;
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-shadow: none;
}
.catbg a:link, .catbg a:visited, .titlebg a:link, .titlebg a:visited, .subbg a:link, .subbg a:visited { color: #fff; }
.catbg a:hover, .titlebg a:hover { color: #ff9cc8; }
.cat_bar .desc { color: var(--text-secondary); }
.table_grid th, .table_grid thead tr { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); border-color: var(--border); }
.table_grid td { border-color: var(--border); }
/* Data tables (member list, PM inbox, permissions…): default rows are white */
.table_grid tr.windowbg, .table_grid tbody tr { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.table_grid tr.windowbg:nth-of-type(even) { background: rgba(255, 255, 255, 0.025); }
.table_grid tr.windowbg:hover { background: rgba(255, 46, 136, 0.06); }
.table_grid tr.windowbg td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.table_grid { background: var(--bg-card); border: 1px solid var(--border); border-top: 0; }
.generic_bar, .progress_bar { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); }
.generic_bar span, .progress_bar span { text-shadow: none; }
.generic_bar .bar, .progress_bar .bar { background: linear-gradient(90deg, var(--accent-pink), #ff9142); box-shadow: none; border-radius: 999px; }
.popup_window, #smf_popup .popup_window {
	background: var(--bg-card-solid);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	color: var(--text-primary);
}
.popup_container { background: rgba(5, 4, 14, 0.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.popup_heading { color: #fff; font-family: var(--font-head); font-size: 20px; }
.generic_menu, #adm_submenus, .dropmenu { background: none; }
.pagesection { margin: 12px 0; }
.pagelinks .pages { margin-right: 6px; color: var(--text-secondary); }
.pagelinks .nav_page, .pagelinks .current_page, .pagelinks .expand_pages {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 9px;
	border: 1px solid var(--border-strong);
	border-radius: 8px;
	background: var(--bg-elevated);
	color: var(--text-primary);
	font-weight: 600;
	box-sizing: border-box;
}
.pagelinks .current_page { background: var(--accent-pink); border-color: var(--accent-pink); color: #fff; box-shadow: var(--glow-pink); }
.pagelinks .nav_page:hover { border-color: var(--accent-pink); color: #fff; }

/* Quotes, code, links in posts */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
	background: rgba(34, 211, 238, 0.05);
	border: 1px solid rgba(34, 211, 238, 0.15);
	border-left: 3px solid var(--accent-cyan);
	border-radius: 10px;
	box-shadow: none;
	color: var(--text-soft);
}
blockquote.bbc_alternate_quote { background: rgba(255, 46, 136, 0.05); border-color: rgba(255, 46, 136, 0.15); border-left-color: var(--accent-pink); }
blockquote cite, .quoteheader, .codeheader { color: var(--text-secondary); font-weight: 600; }
blockquote cite a:link, blockquote cite a:visited { color: var(--accent-cyan); }
code.bbc_code, .bbc_code {
	background: #07060f;
	border: 1px solid var(--border-strong);
	border-radius: 10px;
	color: #b7f7ff;
	font-family: var(--font-mono);
}
.codeoperation { color: var(--accent-pink); }
.bbc_link:link, .bbc_link:visited { color: var(--accent-cyan); border-bottom: 1px solid rgba(34, 211, 238, 0.35); }
.bbc_link:hover { color: #fff; border-bottom-color: #fff; }
.spoiler_head, .bbc_spoiler > summary { color: #ff9cc8; cursor: pointer; }
.spoiler_body, .bbc_spoiler > div { background: rgba(255, 255, 255, 0.04); border-radius: 8px; }
.sceditor-container { border-color: var(--border-strong) !important; border-radius: 10px; overflow: hidden; }
/* Post editor: dark toolbar + writing area (toolbar sprites are dark, so invert them; hue-rotate keeps colours like the YouTube red) */
.sceditor-container, .sceditor-toolbar { background: rgba(255, 255, 255, 0.04) !important; }
.sceditor-toolbar { border-bottom: 1px solid var(--border) !important; }
.sceditor-group { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--border) !important; border-radius: 6px; }
.sceditor-button div { filter: invert(0.88) hue-rotate(180deg); }
.sceditor-button:hover, .sceditor-button.active { background: rgba(255, 46, 136, 0.18) !important; box-shadow: none !important; }
.sceditor-container textarea, .sceditor-container iframe { background: #0f0e22 !important; color: var(--text-primary) !important; }
#post_attachments_area, #drop_zone_ui { background: rgba(255, 255, 255, 0.03); border-color: var(--border-strong); color: var(--text-soft); }

/* ==========================================================================
   7. Home dashboard
   ========================================================================== */
.nv-dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: 20px; margin: 22px 0 34px; }
.nv-dash--single { grid-template-columns: minmax(0, 1fr); }

/* Server status card */
.nv-server { display: flex; flex-direction: column; }
.nv-server::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background: radial-gradient(420px 200px at 0% 0%, rgba(61, 220, 151, 0.12), transparent 70%);
}
.nv-server.is-offline::before { background: radial-gradient(420px 200px at 0% 0%, rgba(255, 84, 112, 0.1), transparent 70%); }
.nv-server-state { display: flex; align-items: center; gap: 10px; }
.nv-server-state strong { color: var(--success); font: 700 15px/1 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; }
.nv-server.is-offline .nv-server-state strong { color: var(--danger); }
.nv-server-name { margin: 10px 0 14px; color: #fff; font: 700 22px/1.15 var(--font-head); }
.nv-server-count { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; color: var(--text-secondary); }
.nv-server-count strong { color: #fff; font: 700 38px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.nv-server-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.nv-server-meta li { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); font-size: 12px; }
.nv-server-meta strong { color: var(--text-soft); font-weight: 600; }
.nv-server-meta .nv-locked { color: #ffc857; }

/* Game Mode page: commands, rules, links */
/* SMF's script sizes every <code> with an inline height (meant for post code blocks), so !important is needed for these inline chips */
.nv-role code, .nv-steps code, .nv-cta-band code, .nv-cmds code {
	display: inline-block;
	height: auto !important;
	min-height: 0;
	margin: 0;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
	color: var(--accent-cyan);
	font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
	font-size: 0.86em;
	font-weight: 500;
	line-height: 1.55;
	vertical-align: baseline;
	white-space: nowrap;
}
.nv-cmds code { justify-self: start; }
.nv-gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nv-gm-grid > .nv-card { padding: 22px 24px; }
.nv-cmds { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nv-cmds li { display: grid; grid-template-columns: minmax(150px, auto) 1fr; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.nv-cmds li:first-child { border-top: 0; }
.nv-cmds span { color: var(--text-secondary); font-size: 13.5px; }
.nv-rules { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nv-rules li { padding: 10px 12px 10px 14px; border-left: 3px solid var(--accent-pink); border-radius: 0 8px 8px 0; background: rgba(255, 46, 136, 0.05); color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.nv-rules strong { display: block; color: #fff; font: 700 15px/1.3 var(--font-head); letter-spacing: 0.02em; }
.nv-gm-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; }
.nv-gm-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* Leaderboard: server totals + extra boards from the VCAD webstats */
.nv-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nv-total { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 16px 18px; }
.nv-total .nv-i { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--accent-pink); }
.nv-total strong { color: #fff; font: 700 26px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.nv-total span { color: var(--text-dim); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.nv-miniboards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nv-miniboard { padding: 16px 18px; }
.nv-miniboard h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #fff; font: 700 17px/1.2 var(--font-head); }
.nv-miniboard h3 .nv-i { color: var(--accent-cyan); }
.nv-miniboard ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.nv-miniboard li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13.5px; }
.nv-miniboard .nv-rankpos { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; }
.nv-miniboard li:first-child .nv-rankpos { background: linear-gradient(135deg, #ffe08a, #ffb347); color: #2a1d00; }
.nv-miniboard-name { overflow: hidden; color: var(--text-soft); text-overflow: ellipsis; white-space: nowrap; }
.nv-miniboard li strong { color: #fff; font-variant-numeric: tabular-nums; }
.nv-source-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--text-dim); font-size: 13px; }
.nv-leaderboard a:link, .nv-leaderboard a:visited, .nv-podium-card h3 a:link, .nv-podium-card h3 a:visited { color: inherit; }
.nv-leaderboard a:hover, .nv-podium-card h3 a:hover { color: var(--accent-pink); }
.nv-dim { color: var(--text-dim); }

/* ==========================================================================
   Admin & moderation centre (and any page using SMF's striped panels)
   SMF paints .windowbg:nth-of-type(odd/even) light grey/white with higher
   specificity than .windowbg, so settings forms, board lists and admin
   panels stayed bright while their text is light.
   ========================================================================== */
.windowbg:nth-of-type(odd), .windowbg:nth-of-type(even), .bg.odd, .bg.even,
.generic_list_wrapper, .approvebg, .approvebg2 {
	background-color: var(--bg-card);
	color: var(--text-primary);
}
.windowbg:target { background-color: rgba(255, 46, 136, 0.08); }
tr.windowbg:hover { background-color: rgba(255, 46, 136, 0.06); }
.windowbg.highlight2 { background: rgba(34, 211, 238, 0.1); }
.windowbg.approvetopic, .windowbg.approvepost { background: rgba(255, 200, 87, 0.1); }
.popup_content, .navigate_section ul { background: var(--bg-card-solid); color: var(--text-primary); }
input[disabled], textarea[disabled], select[disabled] { background: rgba(255, 255, 255, 0.04); color: var(--text-dim); opacity: 1; }
textarea:hover { background-color: var(--bg-input); }
.valid_input { background-color: rgba(61, 220, 151, 0.1); }
.invalid_input { background-color: rgba(255, 84, 112, 0.12); }

#admin_content dl.settings dt, #admin_content dl.settings dt label { color: var(--text-primary); }
#admin_content dl.settings dt .smalltext, #admin_content dl.settings dd .smalltext { color: var(--text-secondary); }
#admin_content dl.settings { border-color: var(--border); }
#admin_content hr { border-color: var(--border); background: var(--border); }
#admin_content .title_bar h3.titlebg, #admin_content .config_hd { color: #fff; }
.table_caption, tr.table_caption td, legend { color: var(--text-secondary); }

/* Admin centre home */
fieldset.admin_group {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-card);
}
fieldset.admin_group legend {
	padding: 3px 12px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: var(--bg-card-solid);
	color: #fff;
	font: 700 14px/1.3 var(--font-head);
	letter-spacing: 0.04em;
}
fieldset.admin_group a:link, fieldset.admin_group a:visited { color: var(--text-soft); }
fieldset.admin_group a:hover { color: var(--accent-pink); }
fieldset.admin_group .inactive { opacity: 0.45; }
#live_news, #support_info { background: var(--bg-card); }
#smfAnnouncements dt, #smfAnnouncements dd { border-color: var(--border); color: var(--text-soft); }
#version_details, #version_details strong, #support_info .smalltext { color: var(--text-soft); }
.search_results li a strong { color: var(--accent-cyan); }

/* Manage boards */
#manage_boards li.windowbg { background: var(--bg-card); border-color: var(--border); }
#manage_boards li.windowbg:hover { background: rgba(255, 46, 136, 0.06); }
#manage_boards li#recycle_board { background: rgba(34, 211, 238, 0.08); }
#manage_boards li.redirect_board, #manage_boards li.redirect_board:hover { background: rgba(255, 200, 87, 0.08); }
#manage_boards .sub_bar { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
#manage_boards h3.subbg, #manage_boards h3.subbg a:link, #manage_boards h3.subbg a:visited { color: #fff; }
.denyboards_layout .board:hover { background: rgba(255, 46, 136, 0.06); }

/* Permissions & file permissions */
.perm_groups { background-color: var(--bg-card); }
.perm_read { background-color: rgba(61, 220, 151, 0.14); }
.perm_writable { background-color: rgba(255, 84, 112, 0.16); }
.perm_execute { background-color: rgba(255, 145, 66, 0.16); }
.perm_no_change { background-color: rgba(255, 255, 255, 0.05); }
#permissions_panel_advanced { background: var(--bg-card); }
/* Admin tables keep SMF's light cell borders (white vertical lines between columns) */
#admin_content .table_grid td, #admin_content .table_grid th { border-color: var(--border) !important; }
#admin_content .table_grid { border-color: var(--border); }
@media (max-width: 1024px) { .nv-miniboards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .nv-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nv-total strong { font-size: 21px; } }
@media (max-width: 480px) { .nv-miniboards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
	.nv-gm-grid { grid-template-columns: minmax(0, 1fr); }
	.nv-cmds li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.nv-role code, .nv-steps code { white-space: normal; }
}

/* Help, error and notice pages */
#helpmain, #fatal_error .windowbg, #fatal_error .padding {
	background: var(--bg-card);
	border-color: var(--border);
	box-shadow: none;
	color: var(--text-soft);
}
#helpmain { padding: 18px 26px 22px; border-radius: 0 0 var(--radius) var(--radius); }
#helpmain p, #helpmain li { color: var(--text-soft); }
#helpmain ul li::marker { color: var(--accent-pink); }
#fatal_error { width: min(720px, 100%); }
#fatal_error .windowbg, #fatal_error .padding { padding: 18px 22px; border-radius: 0 0 var(--radius) var(--radius); font-size: 15px; text-align: center; }
.descbox { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); padding: 12px 16px; }

/* Calendar */
#month_grid .calendar_table, #main_grid .calendar_table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
#month_grid th.days, #main_grid th.days { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
#month_grid td.days, #main_grid td.days { background: transparent; border-color: var(--border); color: var(--text-secondary); }
#month_grid td.days a:link, #month_grid td.days a:visited, #main_grid td.days a:link, #main_grid td.days a:visited { color: var(--text-soft); }
#month_grid td.days a:hover { background: rgba(255, 46, 136, 0.14); color: #fff; }
#month_grid td.disabled, #main_grid td.disabled { background: rgba(0, 0, 0, 0.2); border-color: var(--border); }
.calendar_today, td.days:hover { background: rgba(255, 46, 136, 0.1) !important; }
#month_grid .calendar_today a:link, #month_grid .calendar_today a:visited { color: var(--accent-pink); font-weight: 700; }
#month_grid td.holidays, #main_grid td.holidays { background: rgba(34, 211, 238, 0.1); }
#month_grid td.birthdays, #main_grid td.birthdays { background: rgba(168, 85, 247, 0.12); }
#month_grid td.events, #main_grid td.events { background: rgba(61, 220, 151, 0.1); }
#calendar .calendar_top { background: var(--bg-card); border: 1px solid var(--border); }
#calendar_viewselector .button { border-radius: 0; }
#calendar_viewselector .button:first-child { border-radius: 8px 0 0 8px; }
#calendar_viewselector .button:last-child { border-radius: 0 8px 8px 0; }
.nv-server-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }
.nv-address { flex: 1; min-width: 0; overflow: hidden; padding: 7px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: var(--text-soft); font: 500 13px/1.2 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }

/* Live match card */
.nv-match { overflow: hidden; }
.nv-match::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background:
		radial-gradient(360px 240px at 0% 60%, rgba(255, 46, 110, 0.18), transparent 70%),
		radial-gradient(360px 240px at 100% 60%, rgba(34, 211, 238, 0.16), transparent 70%);
}
.nv-match-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nv-match-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 16px; }
.nv-team {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 16px 18px;
	border: 1px solid;
	border-radius: var(--radius);
	transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.nv-team--attack { border-color: rgba(255, 46, 110, 0.35); background: linear-gradient(135deg, rgba(255, 46, 110, 0.16), rgba(255, 90, 78, 0.03)); }
.nv-team--defense { border-color: rgba(34, 211, 238, 0.35); background: linear-gradient(225deg, rgba(34, 211, 238, 0.15), rgba(59, 130, 246, 0.03)); justify-items: end; text-align: right; }
.nv-team--attack:hover { transform: translateY(-3px); border-color: rgba(255, 46, 110, 0.7); box-shadow: 0 12px 34px rgba(255, 46, 110, 0.25); }
.nv-team--defense:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, 0.7); box-shadow: 0 12px 34px rgba(34, 211, 238, 0.22); }
.nv-team-top { display: flex; align-items: center; gap: 10px; }
.nv-team--defense .nv-team-top { flex-direction: row-reverse; }
.nv-team-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-size: 22px; }
.nv-team--attack .nv-team-icon { background: var(--attack-soft); color: var(--attack); box-shadow: 0 0 20px rgba(255, 46, 110, 0.3); }
.nv-team--defense .nv-team-icon { background: var(--defense-soft); color: var(--defense); box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); }
.nv-team-label { font: 700 21px/1 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; }
.nv-team--attack .nv-team-label { color: #ff7aa6; }
.nv-team--defense .nv-team-label { color: #7ce8f7; }
.nv-team-score { color: #fff; font: 700 72px/0.9 var(--font-head); font-variant-numeric: tabular-nums; }
.nv-team--attack .nv-team-score { text-shadow: 0 0 30px rgba(255, 46, 110, 0.55); }
.nv-team--defense .nv-team-score { text-shadow: 0 0 30px rgba(34, 211, 238, 0.55); }
.nv-team-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; }
.nv-pips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.nv-team--defense .nv-pips { justify-content: flex-end; }
.nv-pip { width: 9px; height: 16px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.nv-team--attack .nv-pip.is-alive { background: var(--attack); box-shadow: 0 0 8px rgba(255, 46, 110, 0.7); }
.nv-team--defense .nv-pip.is-alive { background: var(--defense); box-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
.nv-match-center { display: grid; align-content: center; justify-items: center; gap: 6px; min-width: 130px; text-align: center; }
.nv-vs {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	color: var(--text-soft);
	font: 700 16px/1 var(--font-head);
	letter-spacing: 0.08em;
}
.nv-round { color: #fff; font: 700 20px/1 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; }
.nv-round small { color: var(--text-dim); font-size: 15px; }
.nv-timer {
	padding: 7px 14px;
	border: 1px solid rgba(255, 46, 136, 0.4);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font: 700 38px/1 var(--font-head);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	box-shadow: inset 0 0 18px rgba(255, 46, 136, 0.15), 0 0 20px rgba(255, 46, 136, 0.15);
}
.nv-timer-label { color: var(--text-dim); font: 600 10.5px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
.nv-match-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 13px; }
.nv-match-fact { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; }
.nv-match-fact .nv-i { margin-top: 1px; color: var(--accent-pink); }
.nv-match-fact strong { display: block; color: var(--text-dim); font: 600 10.5px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.nv-match-objective { flex: 1 1 280px; }

/* Home: forums + sidebar */
.nv-home { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 26px; }
.nv-home-main { min-width: 0; }
.nv-home-main > .nv-section-head .mark_read { margin: 0; }
.nv-home-main > .nv-section-head .buttonlist { margin: 0; }
.nv-home-side { display: grid; gap: 18px; min-width: 0; }

/* Category cards */
#boardindex_table .main_container.nv-cat {
	position: relative;
	margin: 0 0 20px;
	overflow: hidden;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
#boardindex_table .main_container.nv-cat:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent); }
#boardindex_table .main_container.nv-cat::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), transparent 70%);
	box-shadow: 0 0 16px var(--accent);
}
#boardindex_table .cat_bar.nv-cat-head {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto minmax(0, 250px);
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 20px 22px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%);
}
.nv-cat-icon {
	display: grid; place-items: center;
	width: 56px; height: 56px;
	border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	color: var(--accent);
	font-size: 28px;
	box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
	transition: transform .4s var(--ease);
}
.nv-cat:hover .nv-cat-icon { transform: translateY(-2px) rotate(-5deg) scale(1.04); }
.nv-cat-title { min-width: 0; }
#boardindex_table .nv-cat-title h3.catbg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 0; font: 700 22px/1.15 var(--font-head); letter-spacing: 0.02em; text-transform: none; }
#boardindex_table .nv-cat-title h3.catbg .toggle_up, #boardindex_table .nv-cat-title h3.catbg .toggle_down { order: 3; margin-left: auto; }
.nv-cat-desc { margin: 4px 0 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.45; }
.nv-cat-meta { display: flex; gap: 20px; margin: 0; padding: 0 4px; list-style: none; }
.nv-cat-meta li { text-align: center; }
.nv-cat-meta strong { display: block; color: #fff; font: 700 24px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.nv-cat-meta span { display: block; margin-top: 4px; color: var(--text-dim); font: 600 10.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.nv-cat-latest { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, 0.18); }
.nv-cat-latest .nv-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.nv-cat-latest-text { display: grid; min-width: 0; }
a.nv-cat-latest-subject:link, a.nv-cat-latest-subject:visited { overflow: hidden; color: #fff; font-weight: 600; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
a.nv-cat-latest-subject:hover { color: var(--accent); }
.nv-cat-latest .smalltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

/* Board rows */
.boardindex_table .up_contain {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 110px minmax(200px, 270px);
	align-items: center;
	gap: 4px 18px;
	margin: 0;
	padding: 15px 22px;
	background: none;
	border: 0;
	border-top: 1px solid var(--border);
	border-radius: 0;
	box-shadow: none;
	transition: background .2s;
}
.boardindex_table .up_contain:hover { background: rgba(255, 255, 255, 0.025); }
.boardindex_table .up_contain > div { width: auto !important; margin: 0; padding: 0; float: none; border: 0 !important; box-shadow: none !important; }
.boardindex_table .board_icon { grid-column: 1; text-align: center; }
.boardindex_table .info { grid-column: 2; min-width: 0; }
.boardindex_table .board_stats { grid-column: 3; }
.boardindex_table .lastpost { grid-column: 4; min-width: 0; }
.boardindex_table .children { grid-column: 2 / -1; }
.boardindex_table .board_icon a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	background-image: none !important;
	transition: transform .3s var(--ease);
}
.boardindex_table .up_contain:hover .board_icon a { transform: scale(1.06); }
.boardindex_table .board_icon a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #4d4a6b; }
.boardindex_table .board_icon a.board_on, .boardindex_table .board_icon a.board_on2 {
	border-color: color-mix(in srgb, var(--accent) 55%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.boardindex_table .board_icon a.board_on::before, .boardindex_table .board_icon a.board_on2::before {
	background: var(--accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 16px var(--accent);
}
.boardindex_table .board_icon a.board_redirect::before { content: "\2197"; width: auto; height: auto; border-radius: 0; background: none; color: var(--text-secondary); font: 700 18px/1 var(--font-head); }
.boardindex_table .info a.subject:link, .boardindex_table .info a.subject:visited { color: #fff; font: 700 17px/1.2 var(--font-head); letter-spacing: 0.02em; }
.boardindex_table .info a.subject:hover { color: var(--accent); }
.boardindex_table .board_description { margin-top: 2px; font-size: 13px; line-height: 1.45; }
.boardindex_table .moderators { margin: 3px 0 0; color: var(--text-dim); font-size: 12px; }
.boardindex_table .board_stats p { margin: 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; text-align: right; }
.nv-lastpost { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nv-lastpost p, .boardindex_table .lastpost p { margin: 0; min-width: 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
.boardindex_table .lastpost a:link, .boardindex_table .lastpost a:visited { color: var(--text-soft); font-weight: 600; }
.boardindex_table .lastpost a:hover { color: #fff; }
.boardindex_table .children { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-strong) !important; }
.boardindex_table .children p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.boardindex_table .children p strong { margin-right: 4px; color: var(--text-dim); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.boardindex_table .children p span::after { content: none !important; }
.boardindex_table .children p span a:link, .boardindex_table .children p span a:visited {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-soft);
	font-size: 12.5px;
	transition: border-color .2s, color .2s;
}
.boardindex_table .children p span a:hover { border-color: var(--accent); color: #fff; }
.boardindex_table .children p span.strong a { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: #fff; }
.new_posts {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--accent-pink);
	color: #fff !important;
	font: 700 10px/1.6 var(--font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Sidebar cards */
.nv-side { padding: 0; overflow: hidden; }
.nv-side-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 15px 18px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	list-style: none;
}
.nv-side-head::-webkit-details-marker { display: none; }
.nv-side-head h3 { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 0; color: #fff; font: 700 18px/1.1 var(--font-head); letter-spacing: 0.02em; }
.nv-side-head h3 .nv-i { color: var(--accent-cyan); }
.nv-side-head::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.nv-side:not([open]) .nv-side-head { border-bottom-color: transparent; }
.nv-side:not([open]) .nv-side-head::after { transform: rotate(-45deg); }
.nv-side-body { padding: 12px 18px 16px; }
.nv-latest { margin: 0; padding: 0; list-style: none; }
.nv-latest li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.nv-latest li:first-child { border-top: 0; padding-top: 2px; }
.nv-latest li > div { display: grid; min-width: 0; }
a.nv-latest-subject:link, a.nv-latest-subject:visited { overflow: hidden; color: #fff; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
a.nv-latest-subject:hover { color: #ff9cc8; }
.nv-latest .smalltext { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nv-latest-time { color: var(--text-dim) !important; }
.nv-online-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.nv-online-counts div { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, 0.03); text-align: center; }
.nv-online-counts strong { display: block; color: #fff; font: 700 22px/1 var(--font-head); }
.nv-online-counts span { display: block; margin-top: 4px; color: var(--text-dim); font-size: 10.5px; line-height: 1.2; }
.nv-online-list { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.7; }
.nv-online-list .nv-dot { margin-right: 4px; vertical-align: 1px; }
#info_center.nv-side .sub_bar { margin: 10px 0 6px; background: none; border: 0; }
#info_center.nv-side .sub_bar:first-child { margin-top: 0; }
#info_center.nv-side .subbg { padding: 0; color: var(--accent-cyan); font-size: 15px; }
#info_center.nv-side .subbg a:link, #info_center.nv-side .subbg a:visited { color: var(--accent-cyan); }
#info_center.nv-side .subbg .main_icons { display: none; }
#info_center.nv-side p.inline { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }

/* ==========================================================================
   8. Topic lists (message index)
   ========================================================================== */
#topic_container, .boardindex_table.main_container {
	overflow: hidden;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
#messageindex .cat_bar, #messageindex .title_bar { border-radius: var(--radius) var(--radius) 0 0; }
#topic_container .windowbg {
	margin: 0;
	padding: 14px 18px;
	background: none;
	border: 0;
	border-top: 1px solid var(--border);
	border-radius: 0;
	transition: background .2s, box-shadow .2s;
}
#topic_container .windowbg:first-child { border-top: 0; }
#topic_container .windowbg:hover { background: rgba(255, 255, 255, 0.03); box-shadow: inset 3px 0 0 var(--accent-pink); }
#topic_container .windowbg.sticky { background: linear-gradient(90deg, rgba(255, 200, 87, 0.09), transparent 60%); }
#topic_container .windowbg.locked { background: linear-gradient(90deg, rgba(163, 160, 194, 0.08), transparent 60%); }
#topic_container .info .message_index_title a:link, #topic_container .info .message_index_title a:visited, .message_index_title span a {
	color: #fff;
	font: 600 15.5px/1.35 var(--font-body);
}
#topic_container .info .message_index_title a:hover { color: #ff9cc8; }
#topic_container .info p.floatleft, #topic_container .info .smalltext, #topic_container .board_stats p, #topic_container .lastpost p { color: var(--text-secondary); font-size: 12.5px; }
#topic_container .lastpost a:link, #topic_container .lastpost a:visited { color: var(--text-soft); }
#topic_container .board_stats, #topic_container .lastpost { border: 0 !important; }
#topic_container .lastpost img.avatar { width: 32px !important; height: 32px !important; border-radius: 50%; object-fit: cover; }

/* Default theme ships div.cat_bar (higher specificity) with a blue fill and white inset glow */
div.cat_bar {
	background: linear-gradient(90deg, rgba(255, 46, 136, 0.2), rgba(255, 46, 136, 0.02) 70%);
	border-bottom: 1px solid var(--border);
	box-shadow: none;
	text-shadow: none;
}
.boardindex_table.main_container > div.cat_bar { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.boardindex_table.main_container > div.cat_bar h3.catbg { padding: 12px 18px; font-size: 15px; font-family: var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; }

/* Topic status tiles replace the default post/xx.png icons */
#topic_container .board_icon { display: grid; place-items: center; }
#topic_container .board_icon img { display: none; }
#topic_container .board_icon::before {
	content: "";
	width: 34px;
	height: 34px;
	border: 1px solid var(--border-strong);
	border-radius: 10px;
	background: radial-gradient(circle, var(--accent-cyan) 0 4px, transparent 5px), rgba(34, 211, 238, 0.06);
}
#topic_container .windowbg.sticky .board_icon::before { border-color: rgba(255, 200, 87, 0.45); background: radial-gradient(circle, #ffc857 0 4px, transparent 5px), rgba(255, 200, 87, 0.08); }
#topic_container .windowbg.locked:not(.sticky) .board_icon::before { background: radial-gradient(circle, #6f6b91 0 4px, transparent 5px), rgba(255, 255, 255, 0.03); }

/* Sticky topics = green, locked topics = red (edge stripe, tint, status tile and text labels) */
#topic_container .windowbg.sticky { background: linear-gradient(90deg, rgba(61, 220, 151, 0.14), transparent 55%); box-shadow: inset 3px 0 0 #3ddc97; }
#topic_container .windowbg.locked { background: linear-gradient(90deg, rgba(255, 84, 112, 0.13), transparent 55%); box-shadow: inset 3px 0 0 #ff5470; }
#topic_container .windowbg.sticky.locked { background: linear-gradient(90deg, rgba(61, 220, 151, 0.14), rgba(255, 84, 112, 0.07) 35%, transparent 60%); box-shadow: inset 3px 0 0 #3ddc97; }
#topic_container .windowbg.sticky:hover { background: linear-gradient(90deg, rgba(61, 220, 151, 0.22), rgba(255, 255, 255, 0.02) 60%); box-shadow: inset 3px 0 0 #3ddc97; }
#topic_container .windowbg.locked:not(.sticky):hover { background: linear-gradient(90deg, rgba(255, 84, 112, 0.2), rgba(255, 255, 255, 0.02) 60%); box-shadow: inset 3px 0 0 #ff5470; }
#topic_container .windowbg.sticky .board_icon::before {
	border-color: rgba(61, 220, 151, 0.6);
	background: radial-gradient(circle, #3ddc97 0 4px, transparent 5px), rgba(61, 220, 151, 0.12);
	box-shadow: 0 0 14px rgba(61, 220, 151, 0.28);
}
#topic_container .windowbg.locked:not(.sticky) .board_icon::before {
	border-color: rgba(255, 84, 112, 0.6);
	background: radial-gradient(circle, #ff5470 0 4px, transparent 5px), rgba(255, 84, 112, 0.12);
	box-shadow: 0 0 14px rgba(255, 84, 112, 0.28);
}
#topic_container .icons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
#topic_container .icons .main_icons { width: auto; height: auto; margin: 0; }
#topic_container .icons .main_icons.sticky::before, #topic_container .icons .main_icons.lock::before {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 4px 9px;
	border-radius: 999px;
	background: none;
	filter: none;
	font: 700 10.5px/1 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: middle;
}
#topic_container .icons .main_icons.sticky::before { content: "Sticky"; border: 1px solid rgba(61, 220, 151, 0.55); background: rgba(61, 220, 151, 0.15); color: #7ff0bf; }
#topic_container .icons .main_icons.lock::before { content: "Locked"; border: 1px solid rgba(255, 84, 112, 0.55); background: rgba(255, 84, 112, 0.15); color: #ff9aac; }

/* Sort direction arrow drawn in CSS instead of the light sprite */
.title_bar .main_icons.sort_down::before, .title_bar .main_icons.sort_up::before {
	width: 6px;
	height: 6px;
	margin-left: 6px;
	background: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}
.title_bar .main_icons.sort_up::before { transform: translateY(1px) rotate(-135deg); }

/* ==========================================================================
   9. Thread view
   ========================================================================== */
#display_head h2, #display_head .display_title { color: #fff; font: 700 34px/1.12 var(--font-head); letter-spacing: 0.01em; }
#display_head p { color: var(--text-secondary); }
#forumposts .windowbg {
	position: relative;
	margin: 0 0 16px;
	padding: 0;
	/* overflow must stay visible: hidden clipped the post's More… menu on short posts */
	overflow: visible;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	transition: border-color .3s, box-shadow .3s;
}
#forumposts .windowbg:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
/* Keep the open menu above the next post card */
#forumposts .windowbg:hover, #forumposts .windowbg:focus-within { z-index: 5; }
.post_options:hover, .post_options:focus-within { z-index: 100; }
/* The poster column paints its own rounded corners now that the card no longer clips */
#forumposts .poster { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
@media (max-width: 720px) {
	#forumposts .poster { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}
#forumposts .windowbg:target, #forumposts .windowbg.highlight { box-shadow: 0 0 0 1px rgba(255, 46, 136, 0.55), 0 0 32px rgba(255, 46, 136, 0.18); }
#forumposts .poster { padding: 22px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); text-align: center; }
.nv-poster-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 10px; }
#forumposts .poster h4 { margin: 0; font: 700 19px/1.2 var(--font-head); letter-spacing: 0.02em; }
#forumposts .poster h4 > a:link, #forumposts .poster h4 > a:visited { color: #fff; }
#forumposts .poster h4 .on, #forumposts .poster h4 .off { display: none; }
#forumposts .poster .user_info { margin: 6px 0 0; padding: 0; list-style: none; }
#forumposts .poster .user_info > li { margin: 4px 0; }
#forumposts .poster .membergroup { color: var(--text-soft); font-weight: 600; }
#forumposts .poster .title { color: #ff9cc8; font-weight: 600; }
#forumposts .poster .postcount, #forumposts .poster .blurb, #forumposts .poster .poster_ip, #forumposts .poster .postgroup { color: var(--text-secondary); font-size: 12px; }
#forumposts .poster .icons img { max-width: 100%; height: auto; }
/* VCAD rank badges (images/membericons/rankbars, 88px crests) */
#forumposts .poster .icons img[src*="/rankbars/"], #basicinfo .icons img[src*="/rankbars/"] {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
	margin: 10px auto 4px;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(255, 46, 136, 0.18));
	transition: transform .3s var(--ease), filter .3s;
}
#forumposts .poster:hover .icons img[src*="/rankbars/"] { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 8px 18px rgba(255, 46, 136, 0.35)); }
.nv-xp-row { display: grid; gap: 4px; margin: 8px auto !important; max-width: 150px; }
.nv-xp-label { color: var(--text-dim); font: 600 10.5px/1 var(--font-body); letter-spacing: 0.06em; }
#forumposts .poster .profile_icons { display: flex; justify-content: center; gap: 6px; padding: 0; }
#forumposts .postarea { padding: 18px 22px 12px; }
#forumposts .keyinfo { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
#forumposts .keyinfo .subject_title a:link, #forumposts .keyinfo .subject_title a:visited { color: #fff; font-weight: 600; }
#forumposts .keyinfo .page_number { padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-secondary); font: 700 13px/1.2 var(--font-head); }
#forumposts .keyinfo .postinfo a.smalltext, #forumposts .keyinfo .modified { color: var(--text-dim); }
#forumposts .post .inner, #forumposts .inner { padding-top: 14px; border-top: 0; color: #e8e6f8; font-size: 15px; line-height: 1.75; }
#forumposts .signature, #forumposts .attachments, #forumposts .custom_fields_above_signature { border-top: 1px dashed var(--border-strong); color: var(--text-secondary); }
#forumposts .moderatorbar { padding: 0 22px 14px; }
/* Post quick buttons (Quote, Quick Edit, More…): SMF keeps light #ddd borders and a white shadow on them,
   glues them into one strip and uses tiny text, so they are redrawn as separate dark pills. */
.quickbuttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.quickbuttons > li { float: none; }
/* SMF paints the <li> behind each button white with a blue gradient (index.css shared .button/.dropmenu rule),
   which showed through the translucent pill as a white box. */
.quickbuttons li, .quickbuttons li:hover, .quickbuttons li ul li, .quickbuttons li ul li:hover {
	background: none;
	background-image: none;
	box-shadow: none;
}
.quickbuttons > li > a, .quickbuttons > li > label,
.quickbuttons > li:first-child > a, .quickbuttons > li:last-child > a, .quickbuttons > li:only-child > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	min-height: 32px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: none;
	color: var(--text-soft);
	font: 600 12px/1 var(--font-body);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.quickbuttons > li > a:hover, .quickbuttons > li:hover > a, .quickbuttons > li > a:focus, .quickbuttons > li > a:focus-visible {
	border-color: rgba(255, 46, 136, 0.55);
	background: var(--accent-pink-soft);
	box-shadow: 0 0 16px rgba(255, 46, 136, 0.22);
	color: #fff;
	text-decoration: none;
}
.quickbuttons > li > a .main_icons::before { margin: 0; filter: brightness(0) invert(0.72); }
.quickbuttons > li:hover > a .main_icons::before { filter: brightness(0) invert(1); }
.quickbuttons > li.post_options > a::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.post_options ul { min-width: 210px; padding: 6px; }
.post_options ul li a:link, .post_options ul li a:visited { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; }
.post_options ul li.you_sure a:link, .post_options ul li.you_sure a:visited { color: #ff8fa3; }
.post_options ul li.you_sure a:hover { background: rgba(255, 84, 112, 0.16); color: #fff; }
.quickbuttons li ul, .post_options ul {
	background: var(--bg-card-solid);
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	box-shadow: var(--shadow);
}
.quickbuttons li ul li a:link, .quickbuttons li ul li a:visited { color: var(--text-soft); }
.quickbuttons li ul li a:hover { background: var(--accent-pink-soft); color: #fff; }
.smflikebutton a, .like_count a { color: var(--text-secondary); }
@media (min-width: 721px) {
	#forumposts .post_wrapper { display: flex; flex-wrap: wrap; }
	#forumposts .poster { float: none; flex: 0 0 200px; width: 200px; box-sizing: border-box; border-right: 1px solid var(--border); }
	#forumposts .postarea { float: none; flex: 1 1 0; min-width: 0; margin: 0; }
	#forumposts .moderatorbar { flex: 1 0 calc(100% - 200px); margin: 0 0 0 200px; box-sizing: border-box; }
}

/* ==========================================================================
   10. Auth pages & popups
   ========================================================================== */
body.nv-auth {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%2307061a' d='M0 200V132h38v-20h30v28h26V90h24V68h14v22h26v60h30v-30h40V60h18V38h12v22h20v70h38v-30h32v46h28V80h40v44h30V94h20V64h30v46h40v30h30v-40h28V50h16V28h10v22h16v70h40V90h40v44h30V74h40v40h30v32h40V84h30V60h18v24h22v46h40v-26h40v36h30V94h40v26h30V70h32v56h28v-16h32v90z'/%3E%3C/svg%3E"),
		radial-gradient(700px 360px at 50% 100%, rgba(255, 70, 120, 0.4), transparent 70%),
		linear-gradient(180deg, #0b0a1a 0%, #150d30 45%, #3a0f48 80%, #6c1650 100%);
	background-repeat: repeat-x, no-repeat, no-repeat;
	background-position: bottom, bottom, 0 0;
	background-size: 1200px 220px, 100% 100%, 100% 100%;
	background-attachment: fixed;
}
body.nv-auth #content_section { display: grid; place-items: start center; min-height: 62vh; padding-top: 30px; }
body.nv-auth #main_content_section { width: 100%; }
.login, body.nv-auth #main_content_section > form > .roundframe, body.nv-auth #registration {
	max-width: 460px;
	margin: 0 auto;
}
body.nv-auth #registration { max-width: 860px; }
.login .cat_bar, body.nv-auth .cat_bar {
	padding: 18px 26px 8px;
	border: 1px solid var(--border-strong);
	border-bottom: 0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: rgba(16, 14, 34, 0.82);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.login .cat_bar h3.catbg, body.nv-auth .cat_bar h3.catbg { justify-content: center; padding: 0; font-size: 28px; text-align: center; }
.login .cat_bar .main_icons { display: none; }
.login .roundframe, body.nv-auth .roundframe {
	padding: 22px 28px 26px;
	border: 1px solid var(--border-strong);
	border-top: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	background: rgba(16, 14, 34, 0.82);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 46, 136, 0.12);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.login dl { display: grid; gap: 6px; margin: 0 0 12px; }
.login dt { float: none; width: auto; margin: 6px 0 0; color: var(--text-soft); font-weight: 600; text-align: left; }
.login dd { float: none; width: auto; margin: 0; }
.login input[type="text"], .login input[type="password"], .login select { width: 100%; height: 46px; padding: 0 14px; font-size: 15px; }
.login input[type="submit"], .login .button { width: 100%; min-height: 48px; margin-top: 6px; font-size: 15px; background: linear-gradient(135deg, #ff2e88, #ff5a5f) !important; border-color: transparent !important; box-shadow: 0 10px 26px rgba(255, 46, 136, 0.35); }
.login p, .login .centertext { text-align: center; }
.login p.smalltext a:link, .login p.smalltext a:visited { color: var(--accent-cyan); }
.popup_window .login .cat_bar, .popup_window .login .roundframe { background: none; border: 0; box-shadow: none; backdrop-filter: none; }

/* ==========================================================================
   11. Profile & game pages
   ========================================================================== */
.nv-player { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 24px; margin: 0 0 22px; padding: 26px; }
.nv-player::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(500px 260px at 0% 0%, rgba(179, 136, 255, 0.16), transparent 70%), radial-gradient(500px 260px at 100% 100%, rgba(255, 46, 136, 0.1), transparent 70%); }
.nv-player-id { display: flex; align-items: center; gap: 22px; min-width: 0; }
.nv-player-name { display: grid; gap: 10px; min-width: 0; flex: 1; }
.nv-player-name h2 { margin: 0; overflow: hidden; color: #fff; font: 700 34px/1 var(--font-head); text-overflow: ellipsis; white-space: nowrap; }
.nv-player-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-player-rank { order: 3; flex-shrink: 0; display: flex; gap: 6px; }
.nv-player-rank img { display: block; width: 150px; height: auto; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(255, 46, 136, 0.2)); }
.nv-player-rank img:not([src*="/rankbars/"]) { width: auto; }
.nv-level { display: grid; gap: 7px; }
.nv-level-top { display: flex; justify-content: space-between; gap: 10px; color: var(--text-secondary); font-size: 12.5px; }
.nv-level-top strong { color: #fff; font: 700 17px/1 var(--font-head); }
.nv-level--game { margin-top: 14px; }
.nv-player-stats { min-width: 0; }
.nv-achievements { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.nv-achievements li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid rgba(255, 200, 87, 0.35); border-radius: 999px; background: rgba(255, 200, 87, 0.08); color: #ffe0a0; font-size: 12.5px; font-weight: 600; }
.nv-achievements .nv-i { color: var(--accent-gold); }
.nv-player-empty { display: grid; place-items: center; align-content: center; gap: 6px; padding: 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-secondary); text-align: center; }
.nv-player-empty .nv-i { width: 34px; height: 34px; color: var(--text-dim); }
.nv-player-empty p { margin: 0; }
#profileview.roundframe { background: var(--bg-card); border-radius: var(--radius-lg); }
#basicinfo .username h4 { color: #fff; font-family: var(--font-head); }
#detailedinfo dt { color: var(--text-secondary); }
#detailedinfo dd { color: var(--text-primary); }
.infolinks:link, .infolinks:visited { color: var(--accent-cyan); }

.nv-page-head { position: relative; margin: 12px 0 30px; padding: 40px 0 10px; }
.nv-page-head::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan)); box-shadow: var(--glow-pink); }
.nv-page-head h1 { margin: 12px 0 10px; color: #fff; font: 700 clamp(40px, 5.4vw, 68px)/0.95 var(--font-head); letter-spacing: 0.01em; text-transform: uppercase; }
.nv-page-head p { max-width: 640px; margin: 0; color: var(--text-soft); font-size: 16.5px; }
.nv-block { margin: 0 0 34px; }
.nv-grid { display: grid; gap: 20px; }
.nv-grid--servers { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.nv-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nv-role { padding: 28px; overflow: hidden; }
.nv-role h2 { margin: 16px 0 8px; font: 700 34px/1 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; }
.nv-role p { margin: 0 0 14px; color: var(--text-soft); font-size: 15px; }
.nv-role-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; font-size: 32px; }
.nv-role--attack { border-color: rgba(255, 46, 110, 0.3); background: linear-gradient(140deg, rgba(255, 46, 110, 0.16), var(--bg-card) 60%); }
.nv-role--attack h2, .nv-role--attack .nv-checklist .nv-i { color: #ff7aa6; }
.nv-role--attack .nv-role-icon { background: var(--attack-soft); color: var(--attack); box-shadow: 0 0 30px rgba(255, 46, 110, 0.35); }
.nv-role--defense { border-color: rgba(34, 211, 238, 0.3); background: linear-gradient(140deg, rgba(34, 211, 238, 0.14), var(--bg-card) 60%); }
.nv-role--defense h2, .nv-role--defense .nv-checklist .nv-i { color: #7ce8f7; }
.nv-role--defense .nv-role-icon { background: var(--defense-soft); color: var(--defense); box-shadow: 0 0 30px rgba(34, 211, 238, 0.35); }
.nv-checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--text-soft); }
/* Block flow (not flex) so inline <code> chips stay inside the sentence instead of becoming separate columns */
.nv-checklist li { position: relative; padding-left: 26px; line-height: 1.6; }
.nv-checklist li > .nv-i { position: absolute; left: 0; top: 0.3em; }
.nv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: nv-step; }
.nv-steps li { display: grid; align-content: start; gap: 6px; padding: 20px 20px 20px 64px; counter-increment: nv-step; }
.nv-steps li::before {
	content: counter(nv-step, decimal-leading-zero);
	position: absolute; left: 18px; top: 18px;
	color: var(--accent-pink);
	font: 700 26px/1 var(--font-head);
	text-shadow: 0 0 14px rgba(255, 46, 136, 0.5);
}
.nv-steps strong { color: #fff; font: 700 18px/1.1 var(--font-head); }
.nv-steps span { color: var(--text-secondary); font-size: 13.5px; }
.nv-cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px 30px; }
.nv-cta-band h2 { margin: 0 0 4px; font: 700 30px/1 var(--font-head); }
.nv-cta-band p { margin: 0; color: var(--text-secondary); }
.nv-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nv-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 18px; }
.nv-podium-card { display: grid; justify-items: center; gap: 10px; padding: 26px 18px 20px; text-align: center; }
.nv-podium-card.is-podium-1 { padding-top: 40px; border-color: rgba(255, 200, 87, 0.45); box-shadow: 0 0 50px rgba(255, 200, 87, 0.15); }
.nv-podium-card.is-podium-2 { border-color: rgba(200, 210, 235, 0.3); }
.nv-podium-card.is-podium-3 { border-color: rgba(224, 149, 91, 0.35); }
.nv-podium-card h3 { margin: 0; color: #fff; font: 700 22px/1 var(--font-head); }
.nv-podium-pos { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font: 700 22px/1 var(--font-head); }
.is-podium-1 .nv-podium-pos { background: linear-gradient(135deg, #ffe08a, #ffb347); color: #2a1d00; box-shadow: 0 0 24px rgba(255, 200, 87, 0.6); }
.is-podium-2 .nv-podium-pos { background: linear-gradient(135deg, #eef2fb, #aab4cc); color: #1b2030; }
.is-podium-3 .nv-podium-pos { background: linear-gradient(135deg, #f3b98a, #c9743d); color: #2a1406; }
.nv-podium-card.is-podium-1 .nv-avatar { width: 84px; height: 84px; font-size: 34px; box-shadow: 0 0 0 3px #ffc857, 0 0 30px rgba(255, 200, 87, 0.45); }
.nv-podium-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 6px 0 0; }
.nv-podium-stats div { padding: 8px 4px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); }
.nv-podium-stats dt { color: var(--text-dim); font: 600 10px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.nv-podium-stats dd { margin: 5px 0 0; color: #fff; font: 700 18px/1 var(--font-head); }

/* ==========================================================================
   12. Footer
   ========================================================================== */
#footer.nv-footer {
	position: relative;
	margin: 0;
	padding: 48px 0 26px;
	background: linear-gradient(180deg, rgba(8, 7, 20, 0.6), rgba(5, 4, 12, 0.96));
	border-top: 1px solid var(--border);
	color: var(--text-secondary);
}
#footer.nv-footer::before {
	content: "";
	position: absolute; left: 0; right: 0; top: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent-pink) 25%, var(--accent-purple) 50%, var(--accent-cyan) 75%, transparent);
	box-shadow: 0 0 18px rgba(255, 46, 136, 0.6);
}
#footer .inner_wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }
.nv-footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.nv-footer-brand .nv-brand { height: auto; margin-bottom: 14px; }
.nv-footer-brand p { max-width: 380px; margin: 0 0 16px; color: var(--text-secondary); line-height: 1.6; }
.nv-footer-col h2 { margin: 4px 0 12px; color: #fff; font: 700 15px/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.nv-footer-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
#footer a:link, #footer a:visited { color: var(--text-secondary); }
#footer a:hover { color: #fff; }
#footer .nv-btn { color: #fff !important; }
.nv-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 18px; color: var(--text-dim); font-size: 12px; }
.nv-footer-credit i { margin: 0 4px; font-style: normal; opacity: 0.6; }
#footer .nv-footer-credit a:link, #footer .nv-footer-credit a:visited { color: var(--accent-pink); font-weight: 600; }
#footer .nv-footer-credit a:hover { color: #fff; text-shadow: 0 0 10px rgba(255, 46, 136, 0.6); }
#footer .copyright, .nv-loadtime { margin: 0; color: var(--text-dim); font-size: 12px; }
.nv-footer-credit { color: var(--text-dim); }
.nv-loadtime { flex-basis: 100%; }

/* ==========================================================================
   12b. SMF 2.1.7 compatibility — neutralise default index.css rules
   ========================================================================== */

/* Logo mark: keep "VC:AD" on one line */
.nv-mark { display: inline-flex; align-items: center; justify-content: center; }

/* Main menu: 2.1.7 links carry no .firstlevel class */
#main_menu .dropmenu > li { display: block; margin: 0; font-size: inherit; line-height: inherit; }
#main_menu .dropmenu > li > a,
#main_menu .dropmenu > li > a.active,
#main_menu .dropmenu > li:hover > a,
#main_menu .dropmenu > li > a:focus {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	box-shadow: none;
	color: var(--text-secondary);
	font: 600 14px/1.2 var(--font-body);
	text-shadow: none;
	transition: color .2s, background .2s;
}
#main_menu .dropmenu > li:hover > a, #main_menu .dropmenu > li > a:focus-visible { background: rgba(255, 255, 255, 0.05); color: #fff; }
#main_menu .dropmenu > li > a.active, #main_menu .dropmenu > li:hover > a.active { color: #fff; background: rgba(255, 46, 136, 0.08); }
#main_menu .dropmenu > li > a.active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-pink); box-shadow: 0 0 8px var(--accent-pink); }
#main_menu .dropmenu > li > a > .main_icons { display: none; }
#main_menu .dropmenu > li > a .textmenu { color: inherit; }
#main_menu .dropmenu li strong { color: #fff; }

/* Account bar: reset default list-item metrics and the blue "open"/hover state */
#top_info { padding: 0; line-height: 1.2; }
#top_info > li { display: block; margin: 0; font-size: 14px; line-height: 1.2; }
#top_info > li > a,
#top_info > li:hover > a,
#top_info > li > a:focus,
#top_info > li > a.open,
#top_info > li > a.active {
	border: 0;
	box-shadow: none;
	text-shadow: none;
}
#top_info > li > a:not(.nv-btn),
#top_info > li > a.open:not(.nv-btn) { background: none; }
#top_info > li:hover > a:not(.nv-btn), #top_info > li > a.active:not(.nv-btn) { background: rgba(255, 255, 255, 0.06); color: #fff; }
#top_info > li > a.nv-btn {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: #fff !important;
	font: 600 13.5px/1 var(--font-body);
}
#top_info > li > a.nv-btn--ghost, #top_info > li:hover > a.nv-btn--ghost, #top_info > li > a.nv-btn--ghost.open { background: rgba(255, 255, 255, 0.04); }
#top_info > li:hover > a.nv-btn--ghost { border-color: rgba(255, 46, 136, 0.6); background: #272148; }
#top_info > li > a.nv-btn--primary, #top_info > li:hover > a.nv-btn--primary, #top_info > li > a.nv-btn--primary.open {
	border-color: transparent;
	background: linear-gradient(135deg, #ff2e88, #ff5a5f);
	box-shadow: 0 8px 22px rgba(255, 46, 136, 0.35);
}
#profile_menu_top > img.avatar { float: none; }

/* Pagination: drop the [ ] brackets around the current page */
.current_page::before, .current_page::after { content: none; }
.pagelinks .nav_page, .pagelinks .current_page, .pagelinks .expand_pages { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); }

/* Breadcrumbs */
.navigate_section ul { overflow: visible; }
.navigate_section ul li { text-shadow: none; padding-bottom: 0; }
.navigate_section ul li span { margin-top: 0; }
.navigate_section ul li a, .navigate_section ul li em { margin-top: 0; padding: 2px 0; }

/* Board index: remove the divider borders around the stats column */
.boardindex_table .board_stats p { border-left: 0; border-right: 0; }
.boardindex_table .board_stats { padding: 0; }
.up_contain { overflow: visible; }
.up_contain .lastpost { border-top: 0; }

/* Sidebar card header stays on one line */
.nv-side-head { flex-wrap: nowrap; }
.nv-side-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-side-head .nv-badge { flex-shrink: 0; }

/* Login form: SMF nests form.login inside div.login */
div.login > .roundframe { padding: 24px 28px 26px; }
form.login { width: auto; max-width: none; margin: 0; }
.login dl { overflow: visible; clear: none; }
.login dt, .login dd { width: auto; padding: 0; float: none; text-align: left; }
.login input[type="submit"] { margin: 8px 0 0; }
.login hr { margin: 18px 0 14px; }

/* Brand assets — logo pack in images/brand/ */
.nv-brand-emblem {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	filter: drop-shadow(0 0 10px rgba(255, 46, 136, 0.35));
	transition: transform .35s var(--ease), filter .35s;
}
.nv-brand:hover .nv-brand-emblem { transform: rotate(-4deg) scale(1.06); filter: drop-shadow(0 0 16px rgba(255, 46, 136, 0.6)); }
.nv-brand-text strong { font-size: 21px; letter-spacing: 0.1em; color: #EAF0FF; }
.nv-brand-text small { margin-top: 5px; letter-spacing: 0.22em; }
.nv-brand-text small b { font-weight: 700; }
.nv-brand-text small i { font-style: normal; color: #6F7394; }
.nv-brand-text small .nv-atk { color: #FF2E86; }
.nv-brand-text small .nv-def { color: #5CF0FF; }
.nv-footer-lockup { display: block; width: 240px; max-width: 100%; height: auto; margin-bottom: 16px; }
/* Nav logo: emblem + "VICE CITY" lettering cut from lockup-horizontal.svg (wordmark.svg), tagline as live text so it stays legible at nav size */
.nv-brand-wordmark { display: block; width: auto; height: 19px; }
.nv-brand-text small { margin-top: 6px; font-size: 10px; letter-spacing: 0.3em; }
.nv-footer-brand .nv-brand { margin-bottom: 16px; }

.nv-hero-emblem {
	position: absolute;
	z-index: -1;
	right: calc(11% + 60px);
	bottom: calc(20% + 70px);
	width: 300px;
	height: 300px;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
	animation: nv-float 6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes nv-float { 50% { translate: 0 -14px; } }

.nv-page-head { padding-right: 190px; }
.nv-page-emblem {
	position: absolute;
	right: 0;
	top: 14px;
	width: 170px;
	height: 170px;
	filter: drop-shadow(0 0 30px rgba(255, 46, 136, 0.25));
	animation: nv-float 6s ease-in-out infinite;
	pointer-events: none;
}

body.nv-auth .login > .cat_bar::before {
	content: "";
	display: block;
	width: 88px;
	height: 88px;
	margin: 4px auto 8px;
	background: url("../images/brand/emblem-neon.svg") center / contain no-repeat;
}

@media (max-width: 1024px) {
	.nv-hero-emblem { width: 210px; height: 210px; right: calc(4% + 55px); bottom: calc(20% + 55px); }
}
@media (max-width: 720px) {
	.nv-brand-emblem { width: 38px; height: 38px; }
	.nv-hero-emblem { display: none; }
	.nv-page-head { padding-right: 0; }
	.nv-page-emblem { width: 76px; height: 76px; top: 26px; }
}

/* Polish */
.nv-mark i { color: rgba(255, 255, 255, 0.65); opacity: 1; margin: 0 1px; }
.nv-more, a.nv-more:link, a.nv-more:visited { white-space: nowrap; flex-shrink: 0; }
.nv-hero-cta .nv-btn--ghost { background: rgba(11, 10, 26, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nv-hero-lead { text-shadow: 0 1px 12px rgba(11, 10, 26, 0.9); }

@media (max-width: 720px) {
	.nv-hero-sun { right: -110px; bottom: 36%; opacity: 0.85; }
	.nv-team-meta { font-size: 12px; }
	.nv-team-meta .nv-i { display: none; }
	.nv-pips { flex-wrap: nowrap; gap: 3px; }
	.nv-pip { width: 7px; height: 13px; }
	#main_menu .dropmenu { display: block; padding: 0; }
	#main_menu .dropmenu > li > a { padding: 11px 12px; }
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 1240px) {
	.nv-home { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
	#boardindex_table .cat_bar.nv-cat-head { grid-template-columns: 56px minmax(0, 1fr) auto; }
	.nv-cat-latest { grid-column: 2 / -1; }
	.boardindex_table .up_contain { grid-template-columns: 46px minmax(0, 1fr) minmax(180px, 230px); }
	.boardindex_table .board_stats { display: none; }
	.boardindex_table .lastpost { grid-column: 3; }
}

@media (max-width: 1024px) {
	:root { --gutter: 20px; }
	.nv-dash { grid-template-columns: minmax(0, 1fr); }
	.nv-home { grid-template-columns: minmax(0, 1fr); }
	.nv-home-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.nv-player { grid-template-columns: minmax(0, 1fr); }
	.nv-footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nv-footer-brand { grid-column: 1 / -1; }
	#search_form input[type="search"] { width: 150px; }
	#search_form input[type="search"]:focus { width: 190px; }
	.nv-hero-sun { width: 320px; height: 320px; right: 4%; }
}

@media (max-width: 720px) {
	:root { --gutter: 16px; --nav-h: 58px; }
	html { scroll-padding-top: 70px; }
	#top_section .nv-nav-inner { flex-wrap: nowrap; column-gap: 10px; }
	.nv-brand-text, #search_form, .nv-nav-discord span, #top_info #profile_menu_top .textmenu { display: none; }
	.nv-nav-tools { gap: 6px; }
	#main_menu { flex: 0 0 auto; order: 3; border-top: 0; }
	.mobile_user_menu { display: inline-flex; }
	.mobile_user_menu .text_menu { display: none; }
	.nv-hero-inner { padding: 46px var(--gutter) 60px; }
	.nv-hero-lead { font-size: 15.5px; }
	.nv-hero-cta .nv-btn { flex: 1 1 auto; }
	.nv-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nv-hero-sun { width: 240px; height: 240px; right: -40px; bottom: 26%; }
	.nv-hero-skyline { bottom: 28%; height: 90px; background-size: 800px 100%; }
	.nv-palm--left { width: 140px; height: 210px; left: -34px; }
	.nv-palm--right { display: none; }
	#wrapper { padding: 0 var(--gutter); }
	.nv-card { padding: 16px; }

	.nv-match-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.nv-match-center { grid-column: 1 / -1; order: -1; grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; }
	.nv-vs { display: none; }
	.nv-timer { font-size: 28px; }
	.nv-timer-label { display: none; }
	.nv-team { padding: 12px; }
	.nv-team-score { font-size: 52px; }
	.nv-team-label { font-size: 16px; }
	.nv-team-icon { width: 32px; height: 32px; font-size: 18px; }
	.nv-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nv-kv > div { padding: 8px; }

	.nv-home-side { grid-template-columns: minmax(0, 1fr); }
	#boardindex_table .cat_bar.nv-cat-head { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; }
	.nv-cat-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
	#boardindex_table .nv-cat-title h3.catbg { font-size: 19px; }
	.nv-cat-meta { grid-column: 1 / -1; justify-content: flex-start; padding: 0; }
	.nv-cat-meta li { display: flex; align-items: baseline; gap: 6px; }
	.nv-cat-meta strong { font-size: 18px; }
	.nv-cat-latest { grid-column: 1 / -1; }
	.boardindex_table .up_contain { grid-template-columns: 38px minmax(0, 1fr); gap: 6px 12px; padding: 14px 16px; }
	.boardindex_table .board_icon a { width: 36px; height: 36px; border-radius: 10px; }
	.boardindex_table .lastpost { grid-column: 2; }
	.boardindex_table .children { grid-column: 1 / -1; }

	.nv-table--cards { min-width: 0; }
	.nv-table--cards thead { display: none; }
	.nv-table--cards tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; border-bottom: 1px solid var(--border); }
	.nv-table--cards td { display: grid; gap: 3px; padding: 0; border: 0; text-align: left; }
	.nv-table--cards td::before { content: attr(data-label); color: var(--text-dim); font: 600 10px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
	.nv-table--cards td.num { text-align: left; }
	.nv-table--cards td:nth-child(1), .nv-table--cards td:nth-child(2) { grid-column: span 1; }
	.nv-table--cards td:nth-child(2) { grid-column: 2 / -1; }
	.nv-table--cards td:nth-child(1)::before, .nv-table--cards td:nth-child(2)::before { content: none; }

	.nv-roles, .nv-podium { grid-template-columns: minmax(0, 1fr); }
	.nv-podium-card.is-podium-1 { order: -1; }
	.nv-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nv-player { padding: 18px; }
	.nv-player-id { flex-direction: column; text-align: center; }
	.nv-player-tags { justify-content: center; }
	.nv-player-name h2 { font-size: 28px; white-space: normal; }
	.nv-cta-band { padding: 20px; }

	#forumposts .poster { text-align: left; }
	.nv-poster-head { flex-direction: row; justify-content: flex-start; margin: 0 12px 0 0; float: left; }
	.nv-avatar--post { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
	.nv-player-rank { justify-content: center; }
	.nv-player-rank img { width: 120px; }
	#forumposts .poster .user_info > li.icons { display: block !important; margin: 6px 0 0; }
	#forumposts .poster .user_info > li.icons::before { content: none !important; }
	#forumposts .poster .icons img[src*="/rankbars/"] { width: 72px; margin: 0; display: block; }
	.nv-xp-row { margin: 6px 0 !important; }
	#forumposts .postarea { padding: 14px 16px 10px; }

	.nv-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.nv-footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
	.nv-hero-stats li { grid-template-columns: 1fr; }
	.nv-hero-stats .nv-i { display: none; }
	.nv-kv { grid-template-columns: minmax(0, 1fr); }
	.nv-footer-top { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   14. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Live rounds (game database): live card kill feed, rounds list, round page
   ========================================================================== */
.nv-live .nv-match-foot { align-items: center; }
.nv-live .nv-match-foot .nv-more { margin-left: auto; }
.nv-live .nv-match-objective a { color: var(--text-soft); }
.nv-live-feed { margin-top: 16px; }
.nv-live-feed-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--text-dim); font: 600 10.5px/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.nv-live-feed-head .nv-i { color: var(--accent-pink); }
.nv-killfeed { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nv-kill {
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
	padding: 7px 12px; border: 1px solid var(--border); border-left: 3px solid var(--text-dim); border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.22); font-size: 13px;
}
.nv-kill--red { border-left-color: var(--attack); }
.nv-kill--blue { border-left-color: var(--defense); }
.nv-kill-killer, .nv-kill-victim { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nv-kill--red .nv-kill-killer, .nv-kill--blue .nv-kill-victim { color: #ff7aa6; }
.nv-kill--blue .nv-kill-killer, .nv-kill--red .nv-kill-victim { color: #7ce8f7; }
.nv-kill-victim { opacity: 0.85; }
.nv-kill-wep { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-soft); font-size: 12px; white-space: nowrap; }
.nv-kill-wep .nv-i { width: 12px; height: 12px; color: var(--accent-pink); }
.nv-kill-meta { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-kill--empty { display: block; border-left-color: var(--border); color: var(--text-dim); }
.nv-killfeed--full .nv-kill { padding: 9px 14px; }
.nv-win { font-weight: 700; }
.nv-win--red { color: #ff7aa6; }
.nv-win--blue { color: #7ce8f7; }

.nv-roundlist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nv-roundlist a { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); color: var(--text-soft); text-decoration: none; }
.nv-roundlist a:hover { background: rgba(255, 255, 255, 0.04); }
.nv-roundlist-bar { align-self: stretch; min-height: 30px; border-radius: 2px; background: var(--text-dim); }
.nv-roundlist-bar.nv-win--red { background: var(--attack); box-shadow: 0 0 8px rgba(255, 46, 110, 0.5); }
.nv-roundlist-bar.nv-win--blue { background: var(--defense); box-shadow: 0 0 8px rgba(34, 211, 238, 0.5); }
.nv-roundlist-main { min-width: 0; }
.nv-roundlist-main strong { display: block; overflow: hidden; color: var(--text-primary); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.nv-roundlist-main small { color: var(--text-dim); font-size: 12px; }
.nv-roundlist-win { max-width: 120px; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

.nv-round-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nv-round-team h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 22px/1.1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.nv-round-team--red h2 { color: #ff7aa6; }
.nv-round-team--blue h2 { color: #7ce8f7; }
.nv-round-team.is-winner { border-color: rgba(61, 220, 151, 0.45); box-shadow: 0 0 0 1px rgba(61, 220, 151, 0.2), var(--shadow-sm); }
.nv-badge--win { background: rgba(61, 220, 151, 0.14); color: var(--success); font-family: var(--font-body); letter-spacing: 0.04em; }
.nv-round-players { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.nv-round-players li { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); font-size: 12.5px; }
.nv-round-facts { display: grid; gap: 10px; margin: 0; }
.nv-round-facts div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.nv-round-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.nv-round-facts dt { color: var(--text-dim); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.nv-round-facts dd { margin: 0; color: var(--text-primary); font-weight: 600; text-align: right; }

@media (max-width: 900px) {
	.nv-round-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.nv-kill { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 5px; }
	.nv-kill-killer { order: 1; }
	.nv-kill-victim { order: 2; text-align: right; }
	.nv-kill-wep { order: 3; justify-self: start; }
	.nv-kill-meta { order: 4; justify-self: end; }
	.nv-live .nv-match-foot .nv-more { margin-left: 0; }
}
/* Base name inside the "last round" result keeps normal text styling (not the fact label style) */
.nv-live .nv-match-objective a strong { display: inline; color: var(--text-primary); font: 700 13px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
.nv-round-players li.is-survivor { border-color: rgba(61, 220, 151, 0.45); color: var(--success); }
.nv-live .nv-match-center .nv-timer-label a { color: var(--text-secondary); }
/* Live round state (game server live_round table) */
.nv-live [hidden] { display: none !important; }
.nv-team-role { justify-self: start; padding: 2px 9px; font: 700 10.5px/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.nv-team--defense .nv-team-role { justify-self: end; }
/* Profile player card: extra webstats facts */
.nv-player-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; list-style: none; }
.nv-player-facts li { display: inline-flex; align-items: center; gap: 6px; }
.nv-player-facts .nv-i { color: var(--accent-pink); }
.nv-player-facts strong { color: var(--text-primary); }

/* Community awards (read-only, Member Awards mod data) */
.nv-awards { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.nv-award-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.nv-award { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; padding: 8px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); text-align: center; }
.nv-award.is-favorite { border-color: rgba(255, 200, 87, 0.45); box-shadow: 0 0 14px rgba(255, 200, 87, 0.18); }
.nv-award img { width: 40px; height: 40px; object-fit: contain; }
.nv-award-name { align-self: stretch; min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: 10.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Third-party mod styling (CSS-only — these mods' own templates aren't ours
   to fork/duplicate into the theme; targeted selectors dress up their output
   in place, so a future mod update still applies cleanly).
   ========================================================================== */

/* SMF Staff Page (vbgamer45): its template lives in Themes/default only (the
   installer copies just its two icon images into a theme, not the template
   itself — SMF falls back to the default theme's copy), so it renders with
   the mod's own plain markup. Scoped to this page only via the body's
   action class, since .table_grid/.title_bar are shared with other admin
   and member-list pages elsewhere in the theme. */
body.action_staff .table_grid { margin: 0 0 20px; border-radius: var(--radius); overflow: hidden; }
body.action_staff br { display: none; }
body.action_staff .table_grid th.first_th { font: 700 12px/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary); }
body.action_staff .table_grid th.centertext { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
body.action_staff .table_grid td:first-child { font-weight: 600; letter-spacing: 0.01em; }
body.action_staff .table_grid td:first-child a { text-decoration: none; }
body.action_staff .table_grid td:first-child a:hover { text-decoration: underline; }
body.action_staff .table_grid td img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg-card-solid), 0 0 0 3px rgba(255, 46, 136, 0.4); }
body.action_staff .table_grid td:not(:first-child) a {
	display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
	background: rgba(255, 255, 255, 0.04); color: var(--text-soft); font-size: 12px; font-weight: 600; text-decoration: none;
	transition: border-color .2s, background .2s, color .2s;
}
body.action_staff .table_grid td:not(:first-child) a:hover { border-color: rgba(255, 46, 136, 0.5); background: rgba(255, 46, 136, 0.1); color: #fff; }
body.action_staff div[align="center"]:not(.smalltext) { margin: 4px 0 10px; }
body.action_staff div[align="center"]:not(.smalltext) a {
	display: inline-flex; align-items: center; padding: 7px 16px; border: 1px solid var(--border-strong); border-radius: 999px;
	background: rgba(255, 255, 255, 0.05); color: var(--text-primary); font-size: 13px; font-weight: 600; text-decoration: none;
}
body.action_staff div[align="center"]:not(.smalltext) a:hover { border-color: rgba(255, 46, 136, 0.55); background: rgba(255, 46, 136, 0.1); }
body.action_staff div.smalltext { margin-top: 4px; color: var(--text-dim); font-size: 11.5px; text-align: center; }
body.action_staff div.smalltext a { color: var(--text-secondary); }

/* Awesome Post Ratings (vbgamer45): reaction display + picker are patched straight into the post body,
   with no CSS classes of their own — only IDs like "awemsgid123"/"rateawemsgid123", so matched by prefix. */
#forumposts [id^="awemsgid"] {
	display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 10px; padding-top: 10px;
	border-top: 1px dashed var(--border-strong); color: var(--text-secondary); font-size: 12.5px;
}
#forumposts [id^="awemsgid"] img { width: 16px; height: 16px; vertical-align: middle; margin-right: 1px; }
#forumposts [id^="awemsgid"] a { color: var(--accent-pink); font-weight: 600; text-decoration: none; }
#forumposts [id^="awemsgid"] a:hover { text-decoration: underline; }
#forumposts div[align="right"] { margin-top: 6px; text-align: right; }
#forumposts [id^="rateawemsgid"] { display: inline-flex; align-items: center; gap: 6px; }
#forumposts [id^="rateawemsgid"] a {
	display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); transition: transform .15s, border-color .15s, background .15s;
}
#forumposts [id^="rateawemsgid"] a:hover { border-color: rgba(255, 46, 136, 0.55); background: rgba(255, 46, 136, 0.1); transform: translateY(-2px) scale(1.08); }
#forumposts [id^="rateawemsgid"] img.awefade { width: 15px; height: 15px; }
#forumposts [id^="errrateawemsgid"]:not(:empty) { display: block; margin-top: 4px; color: var(--danger); font-size: 12px; text-align: right; }

/* Awesome Post Ratings "who reacted" inline panel (replaces the mod's popup window; see ratingsPopover() in neonvice.js) */
.nv-ratings-pop {
	position: absolute; z-index: 400; max-height: 320px; overflow: auto;
	background: var(--bg-card-solid); border: 1px solid var(--border-strong); border-radius: var(--radius);
	box-shadow: var(--shadow); animation: nv-pop-in .15s var(--ease);
}
@keyframes nv-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nv-ratings-pop-body { padding: 12px 14px; color: var(--text-soft); font-size: 13px; }
.nv-ratings-pop-body table { width: 100%; border-collapse: collapse; }
.nv-ratings-pop-body td { padding: 6px 4px; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 12.5px; }
.nv-ratings-pop-body tr:last-child td { border-bottom: 0; }
.nv-ratings-pop-body img { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }
.nv-ratings-pop-body a { color: var(--accent-pink); }
@media (prefers-reduced-motion: reduce) { .nv-ratings-pop { animation: none; } }