/*
	Runner RO website theme for FluxCP. Loaded after the default flux.css (layout of the inherited pages) and
	replaces its look with the Runner RO identity: Electric Peacock palette, Cinzel + Montserrat, dark glass cards.
*/
@font-face { font-family: 'Cinzel'; src: url('../fonts/cinzel-latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
	--violet: #8a2be2;
	--blue: #0000cd;
	--green: #228b22;
	--lime: #ccff00;
	--peacock: linear-gradient(100deg, #8a2be2 0%, #0000cd 38%, #228b22 74%, #ccff00 100%);
	--peacock-border: linear-gradient(135deg, rgba(138,43,226,.9), rgba(0,0,205,.55) 40%, rgba(34,139,34,.45) 75%, rgba(204,255,0,.8));
	--bg: #0b0518;
	--bg-2: #120828;
	--card: rgba(18, 9, 40, .78);
	--field: #150a2c;
	--ink: #f3ecff;
	--ink-2: #d9ccff;
	--muted: #a998d8;
	--line: rgba(176, 140, 255, .2);
	--line-2: rgba(176, 140, 255, .32);
	--up: #6dff8a;
	--down: #ff6b81;
	--radius: 16px;
	--wrap: 1180px;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body.rr {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font: 500 15px/1.6 'Montserrat', 'Segoe UI', system-ui, sans-serif;
	color: var(--ink-2);
	background:
		radial-gradient(900px 600px at 12% -10%, rgba(138,43,226,.22), transparent 60%),
		radial-gradient(800px 500px at 100% 10%, rgba(0,0,205,.16), transparent 60%),
		radial-gradient(700px 500px at 50% 110%, rgba(34,139,34,.10), transparent 60%),
		var(--bg);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}
body.rr table, body.rr input, body.rr select, body.rr textarea, body.rr button { font-family: inherit; font-size: 14px; }
body.rr a { color: #c9b2ff; text-decoration: none; transition: color .15s; }
body.rr a:hover { color: var(--lime); }
body.rr img { max-width: 100%; }
body.rr ::selection { background: rgba(138,43,226,.55); color: #fff; }
body.rr h1, body.rr h2, body.rr h3, body.rr h4 { color: #fff; }
body.rr h2 {
	margin: 0 0 18px;
	padding: 0 0 14px;
	font: 700 26px/1.25 'Cinzel', serif;
	letter-spacing: .04em;
	text-shadow: 0 2px 14px rgba(138,43,226,.55);
	border: 0;
	background: linear-gradient(90deg, rgba(204,255,0,.55), rgba(138,43,226,.35) 40%, transparent) bottom left / 100% 1px no-repeat;
}
body.rr h3 {
	margin: 22px 0 12px;
	font: 700 16px/1.4 'Montserrat', sans-serif;
	color: #f0e6ff;
	border-bottom: 1px solid var(--line);
	padding-bottom: 6px;
	text-transform: none;
}
body.rr h3:first-letter { font-size: inherit; font-weight: inherit; }
body.rr p { margin: 0 0 12px; }
/* theme elements size with their padding (the inherited FluxCP pages keep the default box model) */
[class^="rr-"], [class*=" rr-"], [class^="rr-"]::before, [class*=" rr-"]::before { box-sizing: border-box; }
.rr-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rr-ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.rr-ico-fill { fill: currentColor; }

.rr-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.rr-main { flex: 1 0 auto; }

/* glass card with the peacock gradient border */
.rr-card {
	position: relative;
	border-radius: var(--radius);
	background: var(--card);
	backdrop-filter: blur(10px) saturate(130%);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	box-shadow: 0 14px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.rr-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--peacock-border);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: .75;
}

/* ---------- buttons ---------- */
.rr-btn, body.rr input[type=submit], body.rr input[type=button], body.rr input[type=reset], body.rr .rr-content button, body.rr .submit_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 12px;
	border: 1px solid var(--line-2);
	background: rgba(255,255,255,.06);
	color: #f1e9ff;
	font: 700 14px/1.2 'Montserrat', sans-serif;
	letter-spacing: .02em;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s, filter .15s, background .15s, border-color .15s, box-shadow .15s;
	box-sizing: border-box;
	white-space: nowrap;
}
body.rr .rr-btn:hover { color: #fff; }
.rr-btn:active, body.rr input[type=submit]:active { transform: translateY(1px); }
.rr-btn-primary, body.rr input[type=submit], body.rr .rr-content button[type=submit], body.rr .submit_button {
	border: 0;
	background: var(--peacock);
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,40,.55);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px rgba(0,0,0,.22), 0 6px 20px rgba(138,43,226,.35);
}
.rr-btn-primary:hover, body.rr input[type=submit]:hover, body.rr .rr-content button[type=submit]:hover, body.rr .submit_button:hover {
	filter: brightness(1.12) saturate(1.1);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(204,255,0,.85), 0 0 18px rgba(204,255,0,.35);
	color: #fff;
}
.rr-btn-ghost:hover, body.rr input[type=button]:hover, body.rr input[type=reset]:hover {
	background: linear-gradient(100deg, rgba(138,43,226,.5), rgba(0,0,205,.4));
	border-color: rgba(204,255,0,.7);
	color: #fff;
}
.rr-btn-discord { background: linear-gradient(100deg, rgba(88,101,242,.85), rgba(138,43,226,.7)); border-color: rgba(150,150,255,.55); color: #fff; }
.rr-btn-discord:hover { filter: brightness(1.12); border-color: rgba(204,255,0,.75); }
.rr-btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.rr-btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 14px; }
.rr-btn-lg.rr-btn-primary { font-family: 'Cinzel', serif; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rr-btn-block { display: flex; width: 100%; }
.rr-btn .rr-ico { width: 18px; height: 18px; }

/* ---------- top bar ---------- */
.rr-top {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(9, 4, 22, .82);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--line);
}
.rr-top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--peacock); }
.rr-top-inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; height: 70px; display: flex; align-items: center; gap: 24px; }
.rr-logo { display: inline-flex; align-items: baseline; gap: 8px; font: 800 24px/1 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rr-logo-runner { background: linear-gradient(180deg, #ffffff 10%, #c9a6ff 60%, #8f5bff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(138,43,226,.6)); }
.rr-logo-ro { background: linear-gradient(180deg, #ffe08a 10%, #ffad4d 55%, #ff6e3a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(255,140,60,.45)); }
.rr-nav { flex: 1; display: flex; align-items: center; gap: 18px; min-width: 0; }
.rr-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; flex: 1; }
.rr-nav-item { position: relative; }
.rr-nav-link {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 12px; border: 0; border-radius: 10px; background: none;
	color: var(--ink-2) !important; font: 600 14px/1 'Montserrat', sans-serif; cursor: pointer; white-space: nowrap;
}
.rr-nav-link .rr-ico { width: 15px; height: 15px; opacity: .7; transition: transform .15s; }
.rr-nav-link:hover, .rr-nav-item:focus-within > .rr-nav-link { background: rgba(138,43,226,.18); color: #fff !important; }
.rr-nav-item.is-active > .rr-nav-link { color: #fff !important; box-shadow: inset 0 -2px 0 var(--lime); border-radius: 10px 10px 4px 4px; }
.rr-drop {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; margin: 0; padding: 8px; list-style: none;
	border-radius: 14px; background: rgba(16, 8, 36, .97); border: 1px solid var(--line-2);
	box-shadow: 0 18px 40px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .15s, transform .15s, visibility .15s; z-index: 60;
}
.rr-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.rr-drop-right { left: auto; right: 0; }
.rr-has-drop:hover > .rr-drop, .rr-has-drop:focus-within > .rr-drop { opacity: 1; visibility: visible; transform: none; }
.rr-has-drop:hover > .rr-nav-link .rr-ico:last-child { transform: rotate(180deg); }
.rr-drop a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; color: var(--ink-2) !important; font-weight: 600; font-size: 14px; }
.rr-drop a:hover { background: linear-gradient(100deg, rgba(138,43,226,.45), rgba(0,0,205,.3)); color: #fff !important; }
.rr-drop-title { padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rr-drop-sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.rr-top-side { display: flex; align-items: center; gap: 10px; }
.rr-status {
	display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
	background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-2) !important; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.rr-status b { color: #fff; }
.rr-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--down); box-shadow: 0 0 10px var(--down); }
.rr-status.is-up .rr-status-dot { background: var(--up); box-shadow: 0 0 10px var(--up); animation: rr-pulse 2.4s ease-in-out infinite; }
@keyframes rr-pulse { 50% { box-shadow: 0 0 2px var(--up); } }
.rr-user-button { border: 1px solid var(--line-2); background: rgba(255,255,255,.05); }
.rr-user-button span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.rr-menu-toggle { display: none; }
.rr-menu-button { display: none; margin-left: auto; padding: 8px; border-radius: 10px; border: 1px solid var(--line-2); color: #fff; cursor: pointer; }
.rr-menu-button .rr-ico { width: 22px; height: 22px; }
.rr-menu-button .rr-ico + .rr-ico { display: none; }

/* ---------- inner pages ---------- */
.rr-main:not(.rr-wide) > .rr-wrap { padding-top: 36px; padding-bottom: 56px; }
.rr-content { padding: 30px 34px 34px; color: var(--ink-2); overflow-x: auto; }

/* ---------- home ---------- */
.rr-hero { position: relative; height: min(56.25vw, 820px); min-height: 560px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; margin-top: -1px; }
.rr-hero-art { position: absolute; inset: 0; background: center top / cover no-repeat; transform: scale(1.02); }
.rr-hero::before {
	content: ''; position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(120% 80% at 50% 30%, transparent 50%, rgba(6,2,16,.55) 100%),
		linear-gradient(180deg, rgba(6,2,16,.15) 0%, transparent 25%, transparent 58%, rgba(11,5,24,.88) 82%, var(--bg) 100%);
}
.rr-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 900px; padding: 0 20px 64px; text-align: center; }
.rr-hero-tag { margin: 0 0 22px !important; font-size: 18px; font-weight: 600; color: #efe6ff; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.rr-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.rr-stats { position: relative; z-index: 3; margin-top: -26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rr-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.rr-stat-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 13px; background: linear-gradient(135deg, rgba(138,43,226,.45), rgba(0,0,205,.35)); color: var(--lime); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.rr-stat-icon .rr-ico { width: 22px; height: 22px; }
.rr-stat-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rr-stat-value { display: block; font: 700 21px/1.25 'Cinzel', serif; color: #fff; }
.rr-stat-value.up { color: var(--up); text-shadow: 0 0 14px rgba(109,255,138,.35); }
.rr-stat-value.down { color: var(--down); }
.rr-stat-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--muted); }
.rr-pip { width: 7px; height: 7px; border-radius: 50%; margin: 0 2px 0 6px; background: var(--down); }
.rr-pip:first-child { margin-left: 0; }
.rr-pip.up { background: var(--up); }

.rr-home-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.rr-panel { padding: 24px 26px; }
.rr-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin-bottom: 16px; }
.rr-panel h2 .rr-ico { width: 22px; height: 22px; color: var(--lime); }
.rr-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rr-panel-head h2 { flex: 1; }
.rr-link-more { font-size: 13px; font-weight: 700; color: var(--lime) !important; white-space: nowrap; }
.rr-link-more:hover { color: #fff !important; }
.rr-news-list { display: grid; gap: 12px; }
.rr-news-item { padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.rr-news-item:hover { border-color: rgba(204,255,0,.45); background: rgba(138,43,226,.12); }
body.rr .rr-news-item h3 { margin: 4px 0 6px; padding: 0; border: 0; font-size: 16px; }
.rr-news-meta { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rr-news-body { font-size: 14px; color: #cfc1f2; }
.rr-news-body p:last-child { margin-bottom: 0; }
.rr-empty { padding: 26px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 12px; }
.rr-side { display: grid; gap: 22px; }
.rr-steps ol { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: rr-step; }
.rr-steps li { position: relative; padding: 0 0 14px 44px; counter-increment: rr-step; font-size: 14px; color: #cfc1f2; }
.rr-steps li b { color: #fff; }
.rr-steps li::before {
	content: counter(rr-step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center; font: 800 14px/1 'Cinzel', serif; color: #0b0518; background: var(--lime); box-shadow: 0 0 14px rgba(204,255,0,.45);
}

.rr-section-title { margin: 56px 0 22px !important; text-align: center; background: none !important; padding: 0 !important; font-size: 30px !important; }
.rr-section-title::after { content: ''; display: block; width: 10px; height: 10px; margin: 14px auto 0; transform: rotate(45deg); background: var(--lime); box-shadow: 0 0 10px rgba(204,255,0,.8); }
.rr-features { padding-bottom: 64px; }
.rr-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rr-feature { padding: 24px; transition: transform .2s; }
.rr-feature:hover { transform: translateY(-3px); }
.rr-feature-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 14px; border-radius: 14px; background: var(--peacock); color: #fff; box-shadow: 0 8px 20px rgba(138,43,226,.35); }
.rr-feature-icon .rr-ico { width: 24px; height: 24px; }
body.rr .rr-feature h3 { margin: 0 0 8px; padding: 0; border: 0; font: 700 18px/1.3 'Cinzel', serif; letter-spacing: .03em; }
.rr-feature p { margin: 0; font-size: 14px; color: #cfc1f2; }
.rr-feature b { color: var(--lime); }

/* discord card */
.rr-discord { padding: 22px; }
.rr-discord-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rr-discord-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: linear-gradient(135deg, #5865f2, #8a2be2); color: #fff; object-fit: cover; box-shadow: 0 8px 20px rgba(88,101,242,.35); }
.rr-discord-icon .rr-ico { width: 28px; height: 28px; }
body.rr .rr-discord h3 { margin: 0 0 2px; padding: 0; border: 0; font-size: 17px; }
.rr-discord-counts { margin: 0 !important; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.rr-discord-counts b { color: #fff; }
.rr-dot-online { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.rr-sep { opacity: .5; }
.rr-discord-list { list-style: none; margin: 0 0 16px; padding: 10px; max-height: 260px; overflow-y: auto; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.rr-discord-list li { display: flex; align-items: center; gap: 10px; padding: 5px 4px; font-size: 13.5px; }
.rr-discord-avatar { position: relative; width: 28px; height: 28px; flex: none; }
.rr-discord-avatar img { width: 28px; height: 28px; border-radius: 50%; display: block; }
.rr-discord-avatar::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #150a2c; background: #80848e; }
.rr-discord-avatar.is-online::after { background: #23a55a; }
.rr-discord-avatar.is-idle::after { background: #f0b232; }
.rr-discord-avatar.is-dnd::after { background: #f23f43; }
.rr-discord-name { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-discord-game { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.rr-discord-note { font-size: 14px; color: #cfc1f2; }

/* ---------- footer ---------- */
.rr-footer { margin-top: auto; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(11,5,24,0), rgba(8,3,18,.9) 30%); }
.rr-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; padding-top: 44px; padding-bottom: 30px; }
.rr-footer-brand p { margin: 12px 0 16px; font-size: 14px; color: var(--muted); max-width: 340px; }
.rr-footer h4 { margin: 4px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rr-footer ul { list-style: none; margin: 0; padding: 0; }
.rr-footer li { margin: 0 0 8px; }
.rr-footer li a { color: var(--ink-2) !important; font-size: 14px; }
.rr-footer li a:hover { color: var(--lime) !important; }
.rr-social { display: flex; gap: 10px; }
.rr-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); color: #e6ddff !important; transition: background .15s, border-color .15s; }
.rr-social a:hover { background: linear-gradient(100deg, rgba(138,43,226,.6), rgba(0,0,205,.5)); border-color: rgba(204,255,0,.7); color: var(--lime) !important; }
.rr-social .rr-ico { width: 17px; height: 17px; }
.rr-footer-bottom { padding-top: 18px; padding-bottom: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 12.5px; color: #8a7bb8; }
.rr-footer-bottom p { margin: 0; }
.rr-footer-bottom a { color: var(--muted) !important; }

/* ---------- FluxCP content (inherited pages) ---------- */
body.rr .message { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; font-size: 14px; color: #f4ffd9; background: rgba(204,255,0,.08); border: 1px solid rgba(204,255,0,.35); }
body.rr .notice { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; font-size: 14px; color: #dbe4ff; background: rgba(0,0,205,.18); border: 1px solid rgba(110,130,255,.45); }
body.rr .red { padding: 10px 14px; border-radius: 10px; font-size: 14px; color: #ffd9df; background: rgba(255,70,100,.14); border: 1px solid rgba(255,107,129,.45); }
body.rr .green { padding: 10px 14px; border-radius: 10px; font-size: 14px; color: #ecffd4; background: rgba(34,139,34,.22); border: 1px solid rgba(204,255,0,.4); }
body.rr .note, body.rr .info-text { padding: 10px 14px; border-radius: 10px; color: #cfc1f2; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
body.rr .up, body.rr .online { color: var(--up); }
body.rr .down { color: var(--down); }
body.rr .offline, body.rr .not-applicable, body.rr .td-action { color: #7d70a8; }
body.rr .keyword, body.rr .hold-hours { color: var(--lime); }
body.rr .mvp { color: #ff7d93; }

#submenu, #pagemenu {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 20px; padding: 10px 12px;
	border-radius: 12px; border: 1px solid var(--line) !important; background: rgba(255,255,255,.03); color: transparent !important; font-size: 0 !important;
}
/* the default templates join the links with " / " text: hidden, the pills are enough */
#submenu a, #pagemenu a { padding: 6px 12px; border-radius: 8px; color: var(--ink-2) !important; font-size: 13px; font-weight: 600; }
#submenu a:hover, #pagemenu a:hover, #submenu a.current-sub-menu { background: rgba(138,43,226,.35); color: #fff !important; }
#submenu a.current-sub-menu { box-shadow: inset 0 -2px 0 var(--lime); }

/* tables */
body.rr .horizontal-table, body.rr .vertical-table, body.rr .woe-table, body.rr .install_table, body.rr #server_status, body.rr .shop-table {
	border-collapse: separate !important; border-spacing: 0; border-radius: 12px; overflow: hidden;
	border: 1px solid var(--line) !important; background: rgba(255,255,255,.02) !important; color: var(--ink-2);
}
body.rr .horizontal-table th, body.rr .vertical-table th, body.rr .woe-table th, body.rr .install_table th, body.rr #server_status th {
	padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #efe6ff; background: rgba(138,43,226,.22) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
}
body.rr .vertical-table th { text-transform: none; letter-spacing: 0; font-size: 13px; background: rgba(138,43,226,.14) !important; border-right: 1px solid var(--line) !important; }
body.rr .horizontal-table td, body.rr .vertical-table td, body.rr .woe-table td, body.rr .install_table td, body.rr #server_status td, body.rr .shop-table td {
	padding: 9px 12px; font-size: 13.5px; color: var(--ink-2); background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(176,140,255,.1) !important;
}
body.rr .horizontal-table tr:last-child td, body.rr .vertical-table tr:last-child td, body.rr .vertical-table tr:last-child th { border-bottom: 0 !important; }
body.rr .horizontal-table tr:hover td { background: rgba(138,43,226,.10) !important; }
body.rr .horizontal-table td a, body.rr .vertical-table td a { font-weight: 600; }
body.rr .sortable { color: #efe6ff !important; }
body.rr .sortable:hover { color: var(--lime) !important; }
body.rr .top-ranked td { background: rgba(255,200,80,.10) !important; color: #ffe9b0 !important; }
body.rr .top-ranked a { color: #ffd66b !important; border-bottom: 0; }
body.rr .item-drop-mvp td { background: rgba(255,107,129,.08) !important; color: #ffdbe1 !important; }
body.rr .item-drop-card td { background: rgba(0,0,205,.14) !important; color: #dbe4ff !important; }
body.rr .equipped td { background: rgba(204,255,0,.06) !important; }
body.rr .character-stats, body.rr .character-stats .stat-name { color: var(--muted); }
body.rr .character-stats .stat-value, body.rr .woe-table .time, body.rr #server_status .server, body.rr .shop-server-name { color: #fff !important; }
body.rr .monster-mode li, body.rr .job-classes td { border-color: var(--line) !important; }
body.rr .script-line-num { background: rgba(255,255,255,.04) !important; border-color: var(--line) !important; color: var(--muted); }
body.rr .script, body.rr .request, body.rr .fs-path, body.rr .raw-txn-log { color: #e6ddff; background: rgba(0,0,0,.3) !important; border: 1px solid var(--line) !important; border-radius: 10px; }

/* forms */
body.rr .generic-form, body.rr .generic-form-div, body.rr .search-form, body.rr .search-form2 {
	padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line) !important; background: rgba(255,255,255,.03) !important; color: var(--ink-2);
}
body.rr .search-form { margin-bottom: 18px; }
body.rr .search-form p, body.rr .search-form2 p { color: var(--muted); border-color: var(--line) !important; }
body.rr .search-form label, body.rr .search-form2 label, body.rr .generic-form-table th label, body.rr label { color: #e6ddff; font-size: 13px; font-weight: 600; }
body.rr label:hover { color: #fff; }
body.rr .generic-form-table th, body.rr .generic-form-table td { padding: 8px 10px; border: 0 !important; background: transparent !important; }
body.rr .generic-form-table td p { color: var(--muted) !important; font-size: 12.5px; }
body.rr input[type=text], body.rr input[type=password], body.rr input[type=email], body.rr input[type=number], body.rr input[type=file], body.rr select, body.rr textarea {
	box-sizing: border-box; max-width: 100%; padding: 10px 12px; border-radius: 10px;
	color: #fff; background: var(--field) !important; border: 1px solid rgba(160,120,255,.38) !important;
	box-shadow: inset 0 2px 6px rgba(0,0,0,.45); outline: none; transition: border-color .15s, box-shadow .15s;
}
body.rr select { padding-right: 30px; }
body.rr .search-form input[type=text], body.rr .search-form select, body.rr .search-form2 input[type=text], body.rr .search-form2 select { padding: 7px 10px; font-size: 13px; }
body.rr input[type=text]:focus, body.rr input[type=password]:focus, body.rr input[type=email]:focus, body.rr select:focus, body.rr textarea:focus {
	border-color: rgba(204,255,0,.8) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(204,255,0,.15);
}
body.rr input[type=checkbox], body.rr input[type=radio] { accent-color: var(--violet); width: 16px; height: 16px; vertical-align: -3px; }
body.rr option { background: #150a2c; color: #fff; }
body.rr .security-code img { border-radius: 10px; border: 1px solid var(--line-2); }
body.rr .action, body.rr .action a, body.rr .action span.anchor, body.rr .block-link { color: var(--lime) !important; border-bottom: 0 !important; font-weight: 600; }
body.rr .toggler a { color: var(--lime) !important; font-weight: 600; }

/* pagination */
body.rr .pages { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line) !important; color: var(--muted); }
body.rr .pages a, body.rr .pages .current-page { display: inline-block; min-width: 32px; margin: 2px; padding: 6px 10px; border-radius: 9px; text-align: center; border: 1px solid var(--line); color: var(--ink-2) !important; }
body.rr .pages a:hover { background: rgba(138,43,226,.35); color: #fff !important; }
body.rr .pages .current-page { background: var(--peacock); border-color: transparent; color: #fff !important; font-weight: 700; }
body.rr .jump-to-page input { width: 64px; }

/* shop, donations, misc */
body.rr .shop-item-name { color: #fff !important; border-color: var(--line) !important; }
body.rr .cost, body.rr .qty, body.rr .cart-item-count, body.rr .cart-sub-total, body.rr .donation-amount, body.rr .remaining-balance, body.rr .exchange-rate, body.rr .important, body.rr .credit-amount { color: #fff !important; }
body.rr .credit-balance, body.rr .cart-items-text { color: var(--ink-2) !important; background: rgba(255,255,255,.04) !important; border: 1px solid var(--line) !important; border-radius: 12px; }
body.rr .emblem-server { border-color: var(--line) !important; }
body.rr .newsDiv h4 { color: #fff; }

/* ---------- server information page ---------- */
.rr-page-head { padding-top: 32px; }
.rr-wide-message { margin-top: 24px !important; }
.rr-info-hero {
	padding: 40px 42px 26px; overflow: hidden;
	background:
		linear-gradient(100deg, rgba(14,6,32,.96) 0%, rgba(14,6,32,.86) 45%, rgba(14,6,32,.55) 100%),
		url('../img/hero.jpg') 70% 40% / cover no-repeat;
}
.rr-info-hero-text { max-width: 680px; }
.rr-eyebrow { margin: 0 0 6px !important; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.rr-info-hero h1 { margin: 0 0 12px; font: 800 42px/1.1 'Cinzel', serif; letter-spacing: .03em; background: linear-gradient(180deg, #fff 20%, #c9a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 14px rgba(138,43,226,.55)); }
.rr-info-hero-text p { font-size: 16px; color: #ddd0ff; }
.rr-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rr-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--line-2); }
.rr-chips .rr-ico { width: 15px; height: 15px; color: var(--lime); }
.rr-info-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.rr-info-nav a { padding: 7px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--ink-2) !important; }
.rr-info-nav a:hover { background: rgba(138,43,226,.35); color: #fff !important; }
.rr-info-section { scroll-margin-top: 80px; }
.rr-info-section .rr-section-title { margin-top: 64px !important; }
.rr-section-lead { max-width: 720px; margin: -6px auto 26px !important; text-align: center; font-size: 15.5px; color: #cfc1f2; }

.rr-rate-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.rr-rate { position: relative; padding: 22px 18px 20px; text-align: center; overflow: hidden; transition: transform .2s; }
.rr-rate:hover { transform: translateY(-4px); }
.rr-rate.is-classic::after { content: 'Best drops'; position: absolute; top: 14px; right: -34px; transform: rotate(35deg); padding: 3px 36px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0b0518; background: var(--lime); }
.rr-rate-name { display: block; font: 800 40px/1 'Cinzel', serif; background: linear-gradient(135deg, #ffffff 0%, #d8bfff 45%, #ccff00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(138,43,226,.45)); }
.rr-rate-tag { display: block; margin: 8px 0 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rr-rate dl { margin: 0; display: grid; gap: 6px; }
.rr-rate dl div { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.04); font-size: 13px; }
.rr-rate dt { color: var(--muted); }
.rr-rate dd { margin: 0; font-weight: 800; color: #fff; }
.rr-rate-bar { display: block; height: 6px; margin-top: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--lime) var(--rr-bar), rgba(255,255,255,.08) var(--rr-bar)); box-shadow: 0 0 10px rgba(204,255,0,.2); }
.rr-info-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.rr-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; font-size: 14px; color: #cfc1f2; }
.rr-note > .rr-ico { width: 22px; height: 22px; color: var(--lime); margin-top: 1px; }
.rr-note b { color: #fff; }
.rr-rate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.rr-rate-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 16px 20px; }
.rr-rate-row span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rr-rate-row b { grid-row: span 2; font: 800 24px/1 'Cinzel', serif; color: var(--lime); text-shadow: 0 0 14px rgba(204,255,0,.25); white-space: nowrap; }
.rr-rate-row small { font-size: 12.5px; color: #a99bd6; }

.rr-cmd { display: inline-block; padding: 2px 8px; border-radius: 7px; font: 700 12.5px/1.5 Consolas, 'Cascadia Mono', monospace; color: var(--lime); background: rgba(204,255,0,.08); border: 1px solid rgba(204,255,0,.3); white-space: nowrap; }
.rr-system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rr-system { display: flex; flex-direction: column; padding: 24px; font-size: 14px; color: #cfc1f2; }
.rr-system-wide { grid-column: span 2; }
.rr-system header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rr-system header .rr-feature-icon { margin: 0; flex: none; }
body.rr .rr-system h3 { margin: 0; padding: 0; border: 0; font: 700 20px/1.25 'Cinzel', serif; letter-spacing: .02em; }
.rr-system p { margin: 0 0 10px; }
.rr-system b { color: #fff; }
.rr-system ul { margin: 0 0 12px; padding: 0; list-style: none; }
.rr-system ul li { position: relative; padding: 0 0 7px 18px; }
.rr-system ul li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--lime); box-shadow: 0 0 6px rgba(204,255,0,.6); }
.rr-system .rr-cmds { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 2; }
.rr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.rr-small { font-size: 12.5px; color: var(--muted) !important; }
.rr-system ul.rr-tags li { padding: 8px 12px; margin-bottom: 6px; border-radius: 10px; background: rgba(255,255,255,.04); border-left: 3px solid; }
.rr-system ul.rr-tags li::before, .rr-system ul.rr-pills li::before, .rr-system ul.rr-portals li::before { display: none; }
.rr-tag-red { border-color: #ff4444 !important; } .rr-tag-red b { color: #ff7a7a !important; }
.rr-tag-green { border-color: #44ff44 !important; } .rr-tag-green b { color: #7dff7d !important; }
.rr-tag-blue { border-color: #44aaff !important; } .rr-tag-blue b { color: #7cc4ff !important; }
.rr-tag-gold { border-color: #ffd700 !important; } .rr-tag-gold b { color: #ffe066 !important; }
.rr-pills { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rr-pills li, .rr-system ul.rr-pills li { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #efe6ff; background: linear-gradient(100deg, rgba(138,43,226,.3), rgba(0,0,205,.25)); border: 1px solid var(--line-2); }
.rr-pills-lg li { padding: 8px 14px; font-size: 13.5px; }
.rr-system ul.rr-portals li { display: flex; align-items: center; gap: 10px; padding: 0 0 9px; }
.rr-portal { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.rr-portal.is-white { background: #e8f4ff; color: #9fd0ff; }
.rr-portal.is-purple { background: #b06cff; color: #b06cff; }
.rr-portal.is-red { background: radial-gradient(circle, #ff3a4a 40%, #2a0010); color: #ff3a4a; }
.rr-portal.is-gold { background: #ffd23a; color: #ffd23a; }

.rr-content-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; align-items: start; }
body.rr .rr-panel-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0 0 12px; font: 700 19px/1.3 'Cinzel', serif; }
.rr-panel-title .rr-ico { width: 20px; height: 20px; color: var(--lime); }
.rr-instance-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.rr-instance-list li, .rr-class-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.035); font-size: 13.5px; color: #e6ddff; }
.rr-instance-list b, .rr-class-list b { flex: none; font-size: 12px; color: var(--lime); }
.rr-settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rr-setting { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
.rr-setting span { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rr-setting b { font: 800 30px/1.1 'Cinzel', serif; color: #fff; }
.rr-setting small { font-size: 12.5px; color: #a99bd6; }
.rr-classes { margin-top: 14px; }
.rr-class-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 14px; }
.rr-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 40px 0 64px; padding: 28px 32px; background: linear-gradient(100deg, rgba(138,43,226,.35), rgba(0,0,205,.25) 50%, rgba(34,139,34,.2)); }
body.rr .rr-cta h3 { margin: 0 0 4px; padding: 0; border: 0; font: 800 24px/1.2 'Cinzel', serif; }
.rr-cta p { margin: 0 !important; color: #ddd0ff; }
.rr-cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
	.rr-nav-link { padding: 9px 9px; font-size: 13.5px; }
	.rr-status span { display: none; }
	.rr-stats { grid-template-columns: repeat(2, 1fr); }
	.rr-rate-tiles { grid-template-columns: repeat(3, 1fr); }
	.rr-system-grid { grid-template-columns: repeat(2, 1fr); }
	.rr-settings-grid { grid-template-columns: repeat(2, 1fr); }
	.rr-class-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
	.rr-top-inner { height: 62px; }
	.rr-menu-button { display: inline-flex; }
	.rr-nav {
		position: fixed; left: 0; right: 0; top: 62px; bottom: 0; flex-direction: column; align-items: stretch; gap: 14px;
		padding: 18px 20px 30px; overflow-y: auto; background: rgba(9,4,22,.98); transform: translateX(100%); transition: transform .2s;
	}
	.rr-menu-toggle:checked ~ .rr-nav { transform: none; }
	.rr-menu-toggle:checked ~ .rr-menu-button .rr-ico { display: none; }
	.rr-menu-toggle:checked ~ .rr-menu-button .rr-ico + .rr-ico { display: block; }
	.rr-nav-list { flex-direction: column; align-items: stretch; flex: none; }
	.rr-nav-link { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 15px; }
	.rr-drop { position: static; opacity: 1; visibility: visible; transform: none; display: none; margin: 2px 0 8px 12px; background: rgba(255,255,255,.03); box-shadow: none; }
	.rr-has-drop:hover > .rr-drop, .rr-has-drop:focus-within > .rr-drop { display: block; }
	.rr-top-side { flex-wrap: wrap; }
	.rr-status span { display: inline; }
	.rr-user { width: 100%; }
	.rr-home-grid { grid-template-columns: 1fr; }
	.rr-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.rr-footer-grid { grid-template-columns: 1fr 1fr; }
	.rr-content { padding: 22px 18px; }
	.rr-info-notes, .rr-rate-grid, .rr-content-grid { grid-template-columns: 1fr; }
	.rr-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
	body.rr { font-size: 14px; }
	.rr-logo { font-size: 20px; }
	/* phones: whole art (logo included) across the width, buttons below it */
	.rr-hero { display: block; height: auto; min-height: 0; padding-top: calc(56.25vw - 40px); }
	.rr-hero-art { bottom: auto; height: 56.25vw; background-size: 100% auto; transform: none; }
	.rr-hero::before { background: linear-gradient(180deg, transparent 0, transparent calc(56.25vw - 120px), var(--bg) calc(56.25vw - 10px)); }
	.rr-hero-inner { padding-bottom: 36px; }
	.rr-stats { margin-top: 0; }
	.rr-hero-tag { font-size: 15px; }
	.rr-btn-lg { width: 100%; }
	.rr-stats, .rr-feature-grid, .rr-footer-grid, .rr-system-grid, .rr-split, .rr-instance-list { grid-template-columns: 1fr; }
	.rr-rate-tiles, .rr-settings-grid, .rr-class-list { grid-template-columns: 1fr 1fr; }
	.rr-system-wide { grid-column: auto; }
	.rr-info-hero { padding: 26px 20px 18px; }
	.rr-info-hero h1 { font-size: 30px; }
	.rr-rate-name { font-size: 32px; }
	body.rr h2 { font-size: 22px; }
	.rr-main:not(.rr-wide) > .rr-wrap { padding: 18px 12px 36px; }
}