/*
 * ServerAtlas – zentrale Oberfläche
 * Ohne externe UI-Bibliotheken, optimiert für PHP/Plesk und moderne Browser.
 */
:root {
    color-scheme: dark;
    --bg: #070b14;
    --bg-soft: #0b1120;
    --surface: #10182a;
    --surface-2: #151f35;
    --surface-3: #1a2741;
    --surface-glass: rgba(15, 23, 40, .82);
    --border: rgba(157, 172, 214, .17);
    --border-strong: rgba(157, 172, 214, .3);
    --text: #f3f6ff;
    --text-soft: #c7cfe3;
    --muted: #8d99b7;
    --primary: #7668f7;
    --primary-2: #a26df5;
    --primary-strong: #5d50df;
    --cyan: #37d5ff;
    --success: #37d692;
    --warning: #ffbd59;
    --danger: #ff667e;
    --info: #5db9ff;
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .19);
    --shadow: 0 18px 50px rgba(0, 0, 0, .3);
    --shadow-lg: 0 32px 90px rgba(0, 0, 0, .42);
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-xl: 36px;
    --container: 1240px;
    --sidebar-width: 270px;
    --header-height: 76px;
    --transition: 180ms ease;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f7fc;
    --bg-soft: #edf1f8;
    --surface: #ffffff;
    --surface-2: #f8f9fd;
    --surface-3: #edf1f8;
    --surface-glass: rgba(255, 255, 255, .9);
    --border: rgba(34, 47, 79, .12);
    --border-strong: rgba(34, 47, 79, .23);
    --text: #11192c;
    --text-soft: #3f4b65;
    --muted: #6d7890;
    --shadow-sm: 0 8px 24px rgba(23, 34, 61, .08);
    --shadow: 0 18px 50px rgba(23, 34, 61, .12);
    --shadow-lg: 0 32px 90px rgba(23, 34, 61, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body::selection, ::selection { background: rgba(118, 104, 247, .38); color: #fff; }
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
svg { flex: 0 0 auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(2.35rem, 5vw, 4.7rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.65rem); }
h3 { font-size: 1.16rem; }
p { color: var(--text-soft); }
small { color: var(--muted); }
code {
    padding: .16em .42em;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(118, 104, 247, .09);
    color: #c8c2ff;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: .88em;
    word-break: break-word;
}
html[data-theme="light"] code { color: #4f43c3; }
hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
:focus-visible { outline: 3px solid rgba(55, 213, 255, .55); outline-offset: 3px; }
[hidden] { display: none !important; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.content-narrow { width: min(calc(100% - 40px), 900px); margin-inline: auto; }
.section { position: relative; padding: 92px 0; }
.section--small { padding: 48px 0; }
.section--surface {
    background:
        radial-gradient(circle at 85% 10%, rgba(118, 104, 247, .12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%),
        var(--bg-soft);
    border-block: 1px solid var(--border);
}
.muted { color: var(--muted); }
.hide-mobile { display: inline-flex; }
.skip-link {
    position: fixed; left: 16px; top: -100px; z-index: 10000;
    padding: 10px 16px; border-radius: 10px; background: var(--primary); color: #fff;
}
.skip-link:focus { top: 16px; }
.icon { width: 1.2em; height: 1.2em; }

/* Branding */
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand > img { width: 42px; height: 42px; filter: drop-shadow(0 8px 18px rgba(118,104,247,.3)); }
.brand__word { display: inline-flex; align-items: baseline; font-size: 1.28rem; letter-spacing: -.04em; }
.brand__word strong { font-weight: 820; }
.brand__word em { color: #9b8cff; font-style: normal; font-weight: 820; }
.brand--footer { margin-bottom: 18px; }
.brand--footer .brand__word { font-size: 1.4rem; }

/* Buttons and controls */
.button, .icon-button, .link-button {
    border: 0;
    transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), box-shadow var(--transition);
}
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 44px; padding: 10px 18px;
    border: 1px solid transparent; border-radius: 11px;
    font-weight: 750; line-height: 1.1; white-space: nowrap;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button .icon { width: 18px; height: 18px; }
.button--primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: 0 11px 28px rgba(118,104,247,.28); }
.button--primary:hover { box-shadow: 0 15px 34px rgba(118,104,247,.4); }
.button--soft { background: rgba(118,104,247,.12); color: #d8d3ff; border-color: rgba(139,126,255,.24); }
.button--soft:hover { background: rgba(118,104,247,.2); border-color: rgba(139,126,255,.45); }
html[data-theme="light"] .button--soft { color: #5043c9; }
.button--ghost { background: transparent; border-color: var(--border); color: var(--text-soft); }
.button--ghost:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.button--glass { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); color: #fff; backdrop-filter: blur(14px); }
.button--light { background: #fff; color: #17122e; box-shadow: var(--shadow); }
.button--outline-light { background: transparent; border-color: rgba(255,255,255,.48); color: #fff; }
.button--outline { background: transparent; border-color: var(--border-strong); }
.button--danger { background: rgba(255,102,126,.13); border-color: rgba(255,102,126,.32); color: #ff93a5; }
.button--danger:hover { background: rgba(255,102,126,.22); }
.button--warning { background: rgba(255,189,89,.15); border-color: rgba(255,189,89,.35); color: #ffd58e; }
.button--success { background: rgba(55,214,146,.14); border-color: rgba(55,214,146,.35); color: #78e9b9; }
.button--discord { background: #5865f2; color: #fff; }
.button--small { min-height: 36px; padding: 8px 13px; border-radius: 9px; font-size: .88rem; }
.button--large { min-height: 52px; padding: 13px 23px; border-radius: 13px; }
.button--block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.icon-button {
    display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
    border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); color: var(--text-soft);
}
.icon-button:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.icon-button .icon { width: 20px; height: 20px; }
.link-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: transparent; color: var(--muted); font-weight: 680; }
.link-button:hover, .link-button.is-active { color: #aaa0ff; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: #a99fff; font-weight: 750; }
.text-link:hover { color: #c7c1ff; }
.text-link .icon { width: 17px; height: 17px; }

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 800; height: var(--header-height);
    border-bottom: 1px solid transparent;
    background: rgba(7, 11, 20, .72);
    backdrop-filter: blur(18px) saturate(145%);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
html[data-theme="light"] .site-header { background: rgba(245,247,252,.8); }
.site-header.is-scrolled { border-color: var(--border); background: var(--surface-glass); box-shadow: 0 10px 35px rgba(0,0,0,.18); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.main-nav { display: flex; align-items: center; gap: 5px; }
.main-nav a { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 9px; color: var(--text-soft); font-weight: 680; font-size: .93rem; }
.main-nav a:hover, .main-nav a.is-active { background: rgba(118,104,247,.11); color: var(--text); }
.main-nav .icon { width: 17px; height: 17px; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.mobile-menu { display: none; }
.avatar { display: inline-grid; place-items: center; overflow: hidden; border: 2px solid rgba(118,104,247,.35); border-radius: 50%; background: var(--surface-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 40px; height: 40px; }

/* Search overlay */
.search-overlay {
    position: fixed; inset: 0; z-index: 1500; display: grid; place-items: start center;
    padding: 13vh 20px 30px; background: rgba(4,7,13,.78); backdrop-filter: blur(18px);
}
.global-search { position: relative; width: min(760px, 100%); padding: 26px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.global-search > label { display: block; margin-bottom: 12px; font-size: 1.5rem; font-weight: 800; }
.search-input, .hero-search, .server-search-bar, .inline-search { display: flex; align-items: center; gap: 10px; }
.search-input { padding: 8px 8px 8px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.search-input input { flex: 1; border: 0; background: transparent; }
.search-overlay__close { position: absolute; top: -52px; right: 0; }

/* Typography helpers */
.kicker, .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; color: #a99fff;
    font-size: .75rem; font-weight: 820; letter-spacing: .11em; text-transform: uppercase;
}
.kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 6px rgba(55,214,146,.11); }
.subheading { margin-bottom: 8px; color: var(--muted); font-weight: 700; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 34px; }
.section-heading > div { max-width: 760px; }
.section-heading h2 { margin: 8px 0 10px; }
.section-heading p { margin-bottom: 0; }
.section-heading--small { margin-bottom: 22px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-heading h2, .card-heading h3 { margin-bottom: 0; }

/* Hero */
.hero {
    position: relative; overflow: hidden; min-height: 720px; display: flex; align-items: center;
    background:
        radial-gradient(circle at 76% 35%, rgba(118,104,247,.23), transparent 30%),
        radial-gradient(circle at 64% 70%, rgba(55,213,255,.1), transparent 25%),
        linear-gradient(180deg, #080c17 0%, var(--bg) 100%);
}
html[data-theme="light"] .hero { background: radial-gradient(circle at 76% 35%, rgba(118,104,247,.17), transparent 30%), linear-gradient(180deg,#f7f8ff,#f5f7fc); }
.hero__mesh { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom,black,transparent 92%); }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); align-items: center; gap: 50px; padding-block: 88px 78px; }
.hero__copy h1 { max-width: 750px; margin: 18px 0 22px; }
.hero__copy h1 span { background: linear-gradient(105deg,#b5adff 5%,#6de5ff 95%); -webkit-background-clip: text; color: transparent; }
.hero__copy > p { max-width: 690px; font-size: 1.15rem; }
.hero-search { width: min(680px,100%); margin: 28px 0 20px; padding: 8px 8px 8px 17px; border: 1px solid var(--border-strong); border-radius: 15px; background: rgba(16,24,42,.82); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
html[data-theme="light"] .hero-search { background: rgba(255,255,255,.86); }
.hero-search > .icon { color: var(--muted); }
.hero-search input { flex: 1; min-width: 0; border: 0; background: transparent; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 17px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: var(--muted); font-size: .84rem; font-weight: 670; }
.hero__trust span { display: flex; align-items: center; gap: 7px; }
.hero__trust .icon { color: #9d91ff; }
.hero__visual { position: relative; min-height: 510px; display: grid; place-items: center; }
.atlas-orbit { position: relative; width: 420px; height: 420px; display: grid; place-items: center; }
.atlas-core { position: relative; z-index: 2; width: 190px; height: 190px; display: grid; place-items: center; border: 1px solid rgba(179,169,255,.35); border-radius: 50%; background: radial-gradient(circle at 38% 32%,rgba(255,255,255,.18),rgba(118,104,247,.18) 42%,rgba(9,14,28,.95) 80%); box-shadow: 0 0 80px rgba(118,104,247,.35), inset 0 0 38px rgba(118,104,247,.18); }
.atlas-core::before { content:""; position:absolute; inset:17px; border:1px dashed rgba(255,255,255,.18); border-radius:50%; animation: spin 24s linear infinite; }
.atlas-core img { width: 116px; z-index: 2; filter: drop-shadow(0 20px 35px rgba(118,104,247,.4)); }
.orbit { position: absolute; inset: 38px; border: 1px solid rgba(156,145,255,.24); border-radius: 50%; }
.orbit--one { animation: spin 28s linear infinite; }
.orbit--two { inset: 2px; border-style: dashed; animation: spinReverse 36s linear infinite; }
.orbit-game { position: absolute; z-index: 3; width: 58px; height: 58px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 16px; background: rgba(16,24,42,.9); box-shadow: var(--shadow); transition: transform var(--transition); }
.orbit-game:hover { transform: scale(1.1); }
.orbit-game img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
.orbit-game--1 { top: 6%; left: 46%; }.orbit-game--2 { top: 26%; right: 1%; }.orbit-game--3 { bottom: 17%; right: 7%; }.orbit-game--4 { bottom: 3%; left: 38%; }.orbit-game--5 { bottom: 22%; left: 0; }.orbit-game--6 { top: 19%; left: 3%; }
.hero-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid var(--border-strong); border-radius: 13px; background: rgba(16,24,42,.88); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
html[data-theme="light"] .hero-float { background: rgba(255,255,255,.9); }
.hero-float strong, .hero-float span { display: block; line-height: 1.2; }
.hero-float span { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.hero-float--online { left: -8px; top: 23%; }.hero-float--votes { right: -12px; bottom: 20%; }
.hero-float--votes > .icon { width: 28px; height: 28px; color: #b1a8ff; }
.online-pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 6px rgba(55,214,146,.12); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 5px rgba(55,214,146,.12) } 50% { box-shadow:0 0 0 10px rgba(55,214,146,0) } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }

/* Statistic strip */
.trust-strip { border-block: 1px solid var(--border); background: var(--surface-glass); }
.stats-grid { display: grid; grid-template-columns: repeat(6,1fr); }
.stat { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 100px; padding: 20px 12px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(118,104,247,.11); color: #9e93ff; }
.stat strong, .stat span { display: block; line-height: 1.2; }
.stat strong { font-size: 1.25rem; }.stat span { margin-top: 4px; color: var(--muted); font-size: .76rem; }

/* Cards */
.card, .panel, .subpanel, .info-card, .details-card, .quote-card {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
}
.card { padding: 24px; }
.panel { padding: 24px; min-width: 0; }
.panel__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.panel__header h2, .panel__header h3 { margin: 4px 0 0; font-size: 1.3rem; }
.panel__header > span { color: var(--muted); }
.panel--span-2 { grid-column: span 2; }
.subpanel { padding: 18px; background: var(--surface-2); box-shadow: none; }
.subpanel--danger { border-color: rgba(255,102,126,.28); }
.sticky-card { position: sticky; top: 96px; }
.card-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(118,104,247,.13); color: #a69cff; }

/* Games */
.game-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 17px; }
.game-grid--wide { grid-template-columns: repeat(5,minmax(0,1fr)); }
.game-card { position: relative; overflow: hidden; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.game-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb,var(--accent) 50%,var(--border)); box-shadow: var(--shadow); }
.game-card__cover { position: relative; aspect-ratio: .78; overflow: hidden; background: var(--surface-2); }
.game-card__cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.game-card:hover .game-card__cover > img { transform: scale(1.045); }
.game-card__glow { position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(transparent,color-mix(in srgb,var(--accent) 28%,transparent)); opacity: .75; }
.game-card__body { padding: 17px; }
.game-card__title { display: flex; align-items: center; gap: 10px; margin-top: -37px; position: relative; z-index: 2; }
.game-card__title > img { width: 46px; height: 46px; padding: 6px; object-fit: contain; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
.game-card__title h3 { margin: 0; font-size: 1rem; }
.game-card__title span { color: var(--muted); font-size: .77rem; }
.game-card__body > p { min-height: 42px; margin: 15px 0; font-size: .84rem; }
.game-card__stats { display: flex; justify-content: space-between; gap: 7px; color: var(--muted); font-size: .76rem; }
.game-card__stats span { display: flex; align-items: center; gap: 6px; }

/* Server cards */
.server-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.server-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.server-card { overflow: hidden; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.server-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--accent) 42%,var(--border)); box-shadow: var(--shadow); }
.server-card__media { position: relative; display: block; aspect-ratio: 2.5; overflow: hidden; background: var(--surface-2); }
.server-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 380ms ease; }
.server-card:hover .server-card__media > img { transform: scale(1.035); }
.server-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,8,15,.62),transparent 60%); pointer-events:none; }
.server-card__media .status-dot { position: absolute; z-index: 2; left: 13px; bottom: 12px; }
.server-card__media .badge--featured { position: absolute; z-index: 2; right: 12px; top: 12px; }
.server-card__body { padding: 20px; }
.server-card__heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.server-card__logo { width: 58px; height: 58px; padding: 5px; object-fit: cover; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface-2); }
.server-card__heading h3 { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 1.1rem; }
.server-card__heading h3 a:hover { color: #b4acff; }
.verified { display: inline-grid; place-items: center; color: var(--cyan); }
.verified .icon { width: 17px; height: 17px; }
.server-card__body > p { min-height: 46px; margin-bottom: 14px; font-size: .88rem; }
.server-card__meta, .server-title-tags, .feature-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.server-card__meta span, .server-title-tags span, .feature-badges span { padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 680; }
.server-card__stats { display: grid; grid-template-columns: 1fr 1.4fr .85fr; gap: 8px; margin: 16px 0; padding: 13px 0; border-block: 1px solid var(--border); }
.server-card__stats > span { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: .75rem; }
.server-card__stats strong { color: var(--text); }
.server-card__stats .icon { width: 16px; }
.server-card__stats .stars { gap: 0; font-size: .67rem; }
.server-card__actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.server-card__actions form { margin: 0; }

/* Badges and status */
.status-badge, .badge, .status-dot {
    display: inline-flex; align-items: center; gap: 6px; width: max-content;
    border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; font-weight: 790; line-height: 1;
}
.status-badge { padding: 6px 9px; }
.status-badge--success { border-color: rgba(55,214,146,.28); background: rgba(55,214,146,.1); color: #72e6b5; }
.status-badge--warning { border-color: rgba(255,189,89,.3); background: rgba(255,189,89,.1); color: #ffd48b; }
.status-badge--danger { border-color: rgba(255,102,126,.3); background: rgba(255,102,126,.1); color: #ff9aac; }
.status-badge--info { border-color: rgba(93,185,255,.3); background: rgba(93,185,255,.1); color: #94d0ff; }
.status-badge--neutral, .status-badge--muted { background: var(--surface-2); color: var(--muted); }
.badge { padding: 7px 10px; background: var(--surface-glass); color: var(--text-soft); }
.badge--featured { border-color: rgba(255,189,89,.38); background: rgba(24,18,10,.8); color: #ffd17e; }
.badge--verified { border-color: rgba(55,213,255,.28); background: rgba(55,213,255,.1); color: #83e7ff; }
.status-dot { padding: 7px 10px; background: rgba(7,11,20,.72); color: #dce1ef; backdrop-filter: blur(9px); }
.status-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status-dot.is-online i { background: var(--success); box-shadow: 0 0 0 4px rgba(55,214,146,.15); }
.status-dot.is-offline i { background: var(--danger); }
.status-inline { display: inline-flex; align-items: center; gap: 8px; }
.status-text { font-weight: 750; }

/* Stars */
.stars { display: inline-flex; gap: 2px; color: #49536b; line-height: 1; }
.stars span.is-filled { color: #ffbf4b; }

/* Home content */
.operator-section { padding: 82px 0; }
.operator-card { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 48px; overflow: hidden; padding: 48px; border: 1px solid rgba(139,126,255,.24); border-radius: var(--radius-xl); background: linear-gradient(135deg,rgba(118,104,247,.12),rgba(55,213,255,.04) 55%,var(--surface)); box-shadow: var(--shadow-lg); }
.operator-card h2 { margin: 11px 0 17px; }
.check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin: 25px 0 30px; }
.check-list span { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: .9rem; }
.check-list .icon { color: var(--success); }
.operator-preview { perspective: 1000px; }
.preview-window { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 18px; background: #0b1020; box-shadow: 0 30px 80px rgba(0,0,0,.42); transform: rotateY(-4deg) rotateX(2deg); }
.preview-window__bar { display: flex; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
.preview-window__bar i { width: 8px; height: 8px; border-radius: 50%; background: #46506a; }
.news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.news-grid--large { grid-template-columns: repeat(3,minmax(0,1fr)); }
.news-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.news-card__image { display: block; aspect-ratio: 1.76; overflow: hidden; background: var(--surface-2); }
.news-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.news-card:hover .news-card__image img { transform: scale(1.04); }
.news-card > div { padding: 20px; }
.news-card h3 { margin: 9px 0; }
.news-card h3 a:hover { color: #b5adff; }
.news-card p { font-size: .9rem; }
.news-card__footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.final-cta { padding: 65px 0; background: linear-gradient(125deg,#5749db,#865fe9 52%,#2e9fcb); color:#fff; }
.final-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.final-cta h2 { margin: 9px 0; }.final-cta p { margin:0; color:rgba(255,255,255,.82); }
.final-cta .kicker { color:rgba(255,255,255,.75); }
.final-cta .container > div:last-child { display:flex; gap:11px; flex-wrap:wrap; justify-content:flex-end; }

/* Page heroes */
.page-hero { position: relative; overflow: hidden; padding: 92px 0 68px; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 80% 0,rgba(118,104,247,.23),transparent 35%),var(--bg-soft); }
.page-hero--compact { padding: 65px 0 46px; }
.page-hero--ranking { background: radial-gradient(circle at 70% 20%,rgba(255,189,89,.18),transparent 35%),var(--bg-soft); }
.page-hero h1 { margin: 12px 0 17px; font-size: clamp(2.4rem,5vw,4rem); }
.page-hero p { max-width: 720px; font-size: 1.08rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: .82rem; }
.breadcrumbs a:hover { color: #aaa0ff; }
.breadcrumbs--light { color: rgba(255,255,255,.68); }

/* Games detail */
.game-hero { position: relative; overflow: hidden; padding: 64px 0; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.game-hero::before { content:""; position:absolute; inset:0; background-image:var(--game-bg); background-size:cover; background-position:center; opacity:.12; filter:blur(2px); transform:scale(1.05); }
.game-hero__inner { position:relative; display:grid; grid-template-columns:210px minmax(0,1fr); align-items:center; gap:38px; }
.game-hero__cover { width:210px; aspect-ratio:.76; object-fit:cover; border:1px solid var(--border-strong); border-radius:20px; box-shadow:var(--shadow-lg); }
.game-hero__title { display:flex; align-items:center; gap:16px; }
.game-hero__title > img { width:64px; height:64px; padding:7px; object-fit:contain; border:1px solid var(--border); border-radius:16px; background:var(--surface-glass); }
.game-hero h1 { margin:0; font-size:clamp(2.5rem,5vw,4.3rem); }
.game-hero p { max-width:820px; }
.game-hero__stats { display:flex; flex-wrap:wrap; gap:13px; margin-top:25px; }
.game-hero__stats > div { min-width:135px; padding:13px 16px; border:1px solid var(--border); border-radius:13px; background:var(--surface-glass); }
.game-hero__stats strong,.game-hero__stats span { display:block; }.game-hero__stats strong { font-size:1.3rem; }.game-hero__stats span { color:var(--muted); font-size:.76rem; }

/* Listings */
.listing-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.listing-toolbar__actions { display:flex; align-items:center; gap:10px; }
.listing-layout { display:grid; grid-template-columns:280px minmax(0,1fr); align-items:start; gap:24px; }
.filter-panel { position:sticky; top:calc(var(--header-height) + 18px); padding:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
.filter-panel form { display:flex; flex-direction:column; gap:15px; }
.filter-panel__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.filter-panel__head h3 { display:flex; align-items:center; gap:8px; margin:0; }
.filter-panel__head a { color:#a99fff; font-size:.78rem; font-weight:720; }
.filter-group { padding-top:5px; }
.filter-group > strong { display:block; margin-bottom:8px; }
.filter-checks { display:grid; gap:8px; }
.listing-results { min-width:0; }
.listing-results .server-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sort-inline { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.85rem; }
.sort-inline select { width:auto; min-width:170px; }
.server-search-bar { max-width:780px; padding:8px; border:1px solid var(--border-strong); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); }
.server-search-bar input { flex:1; border:0; background:transparent; }
.ranking-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.ranking-filter a { padding:9px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--muted); font-weight:700; }
.ranking-filter a.is-active,.ranking-filter a:hover { border-color:rgba(118,104,247,.45); background:rgba(118,104,247,.12); color:var(--text); }
.ranking-list { display:grid; gap:12px; }
.ranking-row { display:grid; grid-template-columns:60px 54px minmax(0,1fr) repeat(3,130px) auto; align-items:center; gap:15px; padding:15px 18px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.rank-number { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--surface-2); font-size:1.05rem; font-weight:850; }
.ranking-row:nth-child(1) .rank-number { background:rgba(255,189,89,.15); color:#ffd27c; }
.ranking-logo { width:52px; height:52px; object-fit:cover; border-radius:12px; background:var(--surface-2); }
.ranking-name strong,.ranking-name small { display:block; }.ranking-name small { margin-top:3px; }
.ranking-stat { text-align:right; }.ranking-stat strong,.ranking-stat small { display:block; }.ranking-stat small { font-size:.72rem; }

/* Server detail */
.server-detail-hero { position:relative; overflow:hidden; min-height:480px; display:flex; align-items:flex-end; }
.server-detail-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.server-detail-hero__shade { position:absolute; inset:0; background:linear-gradient(to top,#070b14 0%,rgba(7,11,20,.78) 45%,rgba(7,11,20,.25) 100%); }
.server-detail-hero__inner { position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding-block:80px 42px; }
.server-title-block { display:flex; align-items:flex-end; gap:22px; min-width:0; }
.server-detail-logo { width:130px; height:130px; object-fit:cover; border:3px solid rgba(255,255,255,.16); border-radius:26px; background:#11192c; box-shadow:var(--shadow-lg); }
.server-title-block h1 { margin:8px 0 10px; font-size:clamp(2.25rem,5vw,4.2rem); }
.server-title-meta { display:flex; flex-wrap:wrap; align-items:center; gap:13px; color:rgba(255,255,255,.72); }
.server-title-meta a:hover { color:#fff; }
.server-title-tags { margin-top:16px; }.server-title-tags span { border-color:rgba(255,255,255,.16); background:rgba(8,12,23,.55); color:rgba(255,255,255,.82); }
.server-hero-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.server-stats-bar { border-bottom:1px solid var(--border); background:var(--surface-glass); }
.server-stats-bar .container { display:grid; grid-template-columns:repeat(6,1fr); }
.server-stats-bar .stat-card { padding:20px 15px; border-right:1px solid var(--border); text-align:center; }
.server-stats-bar .stat-card:last-child { border:0; }.stat-card strong,.stat-card span { display:block; }.stat-card strong { font-size:1.25rem; }.stat-card span { color:var(--muted); font-size:.77rem; }
.server-tabs { position:sticky; top:var(--header-height); z-index:100; overflow:auto; display:flex; gap:5px; padding:10px 0; border-bottom:1px solid var(--border); background:var(--surface-glass); backdrop-filter:blur(14px); }
.server-tabs a { flex:0 0 auto; padding:8px 12px; border-radius:9px; color:var(--muted); font-size:.85rem; font-weight:700; }
.server-tabs a:hover,.server-tabs a.is-active { background:rgba(118,104,247,.12); color:var(--text); }
.server-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:28px; }
.server-detail-main { min-width:0; }
.server-detail-sidebar { display:grid; gap:18px; }
.content-section { padding:0 0 34px; margin-bottom:34px; border-bottom:1px solid var(--border); }
.content-section:last-child { border-bottom:0; }.content-section h2 { font-size:1.75rem; }.content-section h3 { margin-bottom:10px; }
.content-section--compact { padding:18px 0; margin:0; }
.prose { color:var(--text-soft); line-height:1.78; overflow-wrap:anywhere; }
.prose h2,.prose h3,.prose h4 { margin-top:1.7em; color:var(--text); }.prose p { margin-bottom:1.1em; }.prose a { color:#a99fff; text-decoration:underline; }.prose ul { padding-left:1.25rem; }
.server-connect-card { padding:22px; border-color:rgba(118,104,247,.35); background:linear-gradient(145deg,rgba(118,104,247,.12),var(--surface)); }
.copy-field { display:flex; gap:8px; padding:7px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.copy-field input { flex:1; min-width:0; border:0; background:transparent; font-family:monospace; }
.detail-list { display:grid; gap:0; margin:0; }
.detail-list > div { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:11px 0; border-bottom:1px solid var(--border); }
.detail-list > div:last-child { border:0; }.detail-list dt { color:var(--muted); font-size:.82rem; }.detail-list dd { text-align:right; font-weight:700; overflow-wrap:anywhere; }
.custom-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.custom-facts > div { padding:15px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }.custom-facts span,.custom-facts strong { display:block; }.custom-facts span { color:var(--muted); font-size:.76rem; }.custom-facts strong { margin-top:5px; }
.operator-mini { display:flex; align-items:center; gap:12px; }.operator-mini img { width:48px; height:48px; object-fit:cover; border-radius:13px; }.operator-mini strong,.operator-mini small { display:block; }
.share-card { display:grid; gap:10px; }
.trailer-link { position:relative; overflow:hidden; display:block; border-radius:13px; }.trailer-link img { width:100%; aspect-ratio:1.78; object-fit:cover; }.trailer-link span { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.3); font-weight:800; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.gallery button { overflow:hidden; padding:0; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); }.gallery img { width:100%; aspect-ratio:1.55; object-fit:cover; transition:transform var(--transition); }.gallery button:hover img { transform:scale(1.04); }
.gallery-dialog { width:min(1100px,calc(100% - 36px)); max-height:90vh; padding:0; border:1px solid var(--border-strong); border-radius:18px; background:#050811; color:#fff; box-shadow:var(--shadow-lg); }.gallery-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(8px); }.gallery-dialog img { width:100%; max-height:80vh; object-fit:contain; }.gallery-dialog button { position:absolute; top:12px; right:12px; }
.status-overview { display:grid; grid-template-columns:1fr 1.3fr; gap:20px; }.status-main { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.status-main > strong { margin-top:20px; font-size:2.5rem; }.status-main > span:not(.status-dot) { color:var(--muted); }.status-facts { padding:24px; }
.status-timeline { display:grid; grid-template-columns:repeat(48,1fr); gap:3px; margin-top:18px; }.status-timeline span { height:22px; border-radius:3px; background:var(--danger); }.status-timeline span.is-online { background:var(--success); }
.rating-summary { display:flex; align-items:center; gap:10px; }.rating-summary > strong { font-size:2rem; }.rating-summary > span:last-child { color:var(--muted); font-size:.82rem; }
.review-form { margin-bottom:24px; }.review-form summary,.optional-fields summary,.report-box summary { cursor:pointer; font-weight:800; }.review-form summary { display:flex; justify-content:space-between; align-items:center; }.review-form[open] summary { margin-bottom:22px; }
.review-list { display:grid; gap:16px; }.review-card { padding:22px; }.review-score { display:flex; justify-content:space-between; gap:16px; margin-bottom:12px; }.review-score strong,.review-score small { display:block; }.review-subratings { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }.review-subratings span { padding:5px 8px; border-radius:8px; background:var(--surface-2); color:var(--muted); font-size:.72rem; }
.review-reply,.reply-box { margin-top:16px; padding:14px; border-left:3px solid var(--primary); border-radius:8px; background:rgba(118,104,247,.08); }.review-reply strong { display:block; margin-bottom:5px; }
.login-prompt { display:flex; align-items:center; justify-content:space-between; gap:18px; }.login-prompt > div { display:flex; align-items:center; gap:12px; }.login-prompt strong,.login-prompt small { display:block; }
.comment-form { margin-bottom:20px; }.comment-form > div { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:10px; }
.comment-list { display:grid; gap:14px; }.comment { display:grid; grid-template-columns:46px minmax(0,1fr); gap:13px; padding:19px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }.comment > img { width:46px; height:46px; object-fit:cover; border-radius:12px; }.comment header { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.comment header time { margin-left:auto; color:var(--muted); font-size:.75rem; }.comment p { margin:8px 0; }.comment footer { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }.comment footer form { margin:0; }.comment--reply { margin-left:50px; border-left:3px solid rgba(118,104,247,.45); }.link-button--danger { color:#ff93a5; }.comment-edit { position:relative; }.comment-edit > summary { list-style:none; cursor:pointer; }.comment-edit > summary::-webkit-details-marker { display:none; }.comment-edit[open] { flex-basis:100%; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }.comment-edit[open] > summary { margin-bottom:10px; }.comment-edit form { display:grid; gap:10px; }.comment-edit textarea { width:100%; }
.report-box { padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }.report-box[open] summary { margin-bottom:18px; }

/* Forms */
form { margin:0; }
label { display:grid; gap:7px; color:var(--text-soft); font-size:.86rem; font-weight:680; }
label small { font-weight:500; }
input, select, textarea {
    width:100%; min-width:0; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text);
    padding:11px 13px; line-height:1.35; transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
input::placeholder, textarea::placeholder { color:#68738f; }
input:hover,select:hover,textarea:hover { border-color:var(--border-strong); }
input:focus,select:focus,textarea:focus { outline:0; border-color:rgba(118,104,247,.7); box-shadow:0 0 0 4px rgba(118,104,247,.12); }
input[readonly],textarea[readonly],input:disabled,select:disabled { opacity:.72; cursor:not-allowed; }
textarea { resize:vertical; }
select { appearance:auto; }
fieldset { min-width:0; margin:0; padding:18px; border:1px solid var(--border); border-radius:13px; }
legend { padding:0 8px; font-weight:800; }
.form-stack { display:grid; gap:18px; }
.form-stack--spaced { margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }
.form-grid { display:grid; gap:16px; }
.form-grid--2,.form-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid--3,.form-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.field-span-2 { grid-column:span 2; }
.form-row { display:flex; align-items:end; gap:14px; }
.form-row--between { justify-content:space-between; align-items:center; }
.field { display:grid; gap:7px; }
.field--grow { flex:1; }
.field--icon { position:relative; display:block; }
.field--icon > .icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; color:var(--muted); pointer-events:none; }
.field--icon input { padding-left:42px; }
.field-error { color:#ff8ea1; font-weight:650; }
.helper-text { color:var(--muted); font-size:.8rem; }
.check-control { display:flex; grid-template-columns:auto 1fr; align-items:flex-start; gap:10px; cursor:pointer; }
.check-control input { flex:0 0 auto; width:18px; height:18px; margin-top:2px; accent-color:var(--primary); }
.check-control > span strong,.check-control > span small { display:block; }.check-control > span small { margin-top:3px; }
.check-control--boxed { padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.check-control--boxed:hover { border-color:var(--border-strong); }
.check-grid,.toggle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.toggle-control { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }.toggle-control input { width:20px; height:20px; }
.form-savebar { position:sticky; bottom:14px; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 16px 14px 20px; border:1px solid rgba(118,104,247,.35); border-radius:15px; background:rgba(15,23,40,.94); box-shadow:var(--shadow-lg); backdrop-filter:blur(14px); }.form-savebar > span { color:var(--muted); font-size:.82rem; }
html[data-theme="light"] .form-savebar { background:rgba(255,255,255,.94); }
.upload-drop { position:relative; padding:24px; border:1px dashed var(--border-strong); border-radius:13px; background:var(--surface-2); text-align:center; cursor:pointer; }.upload-drop:hover { border-color:rgba(118,104,247,.65); background:rgba(118,104,247,.07); }.upload-drop input[type=file] { position:absolute; opacity:0; width:1px; height:1px; }.upload-drop span { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); }.upload-drop .icon { width:28px; height:28px; color:#a99fff; }
.password-field { position:relative; }.password-field input { padding-right:48px; }.password-field button { position:absolute; right:5px; top:5px; width:36px; height:36px; border:0; background:transparent; color:var(--muted); }
.character-count { float:right; color:var(--muted); font-size:.75rem; font-weight:600; }
.code-input { letter-spacing:.24em; text-align:center; font-family:monospace; font-size:1.1rem; }
.inline-form { display:flex; align-items:end; gap:8px; }.inline-form input { flex:1; }
.admin-filter { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:22px; }.admin-filter .field { flex:1 1 280px; }.admin-filter select { width:auto; min-width:165px; }
.optional-fields { padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }.optional-fields[open] summary { margin-bottom:18px; }
.editor-textarea { min-height:420px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; line-height:1.65; tab-size:4; }
.editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:22px; }

/* Notices, flashes, empty states */
.notice { padding:15px 17px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }.notice strong { display:block; margin-bottom:3px; }.notice p { margin:0; font-size:.85rem; }.notice--compact { padding:9px 12px; font-size:.82rem; }
.notice--success { border-color:rgba(55,214,146,.3); background:rgba(55,214,146,.08); }.notice--warning { border-color:rgba(255,189,89,.3); background:rgba(255,189,89,.08); }.notice--danger { border-color:rgba(255,102,126,.3); background:rgba(255,102,126,.08); }.notice--info { border-color:rgba(93,185,255,.3); background:rgba(93,185,255,.08); }
.toast-stack { position:fixed; z-index:2200; top:88px; right:18px; display:grid; gap:10px; width:min(390px,calc(100% - 36px)); pointer-events:none; }
.toast { display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--border-strong); border-radius:13px; background:var(--surface); box-shadow:var(--shadow-lg); pointer-events:auto; animation:toastIn .26s ease; }.toast.is-leaving { opacity:0; transform:translateX(25px); }.toast__icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(118,104,247,.12); }.toast > div { flex:1; }.toast p { margin:2px 0 0; font-size:.85rem; }.toast button { width:32px; height:32px; }
@keyframes toastIn { from { opacity:0; transform:translateX(30px); } }
.empty-state { display:grid; place-items:center; min-height:270px; padding:40px 20px; text-align:center; }.empty-state > span { display:grid; place-items:center; width:64px; height:64px; margin-bottom:16px; border-radius:18px; background:rgba(118,104,247,.11); color:#a99fff; }.empty-state h2 { margin-bottom:8px; }.empty-state p { max-width:480px; }.empty-state--small { min-height:130px; padding:24px; }.empty-inline { color:var(--muted); font-size:.85rem; }

/* Auth */
.auth-page { min-height:100vh; background:radial-gradient(circle at 20% 20%,rgba(118,104,247,.22),transparent 33%),var(--bg); }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(380px,.9fr) minmax(480px,1.1fr); }
.auth-back { position:fixed; z-index:3; left:24px; top:22px; color:rgba(255,255,255,.72); font-weight:700; }
.auth-brand { position:relative; overflow:hidden; display:flex; align-items:center; padding:80px; background:linear-gradient(145deg,rgba(118,104,247,.22),rgba(8,12,23,.72)); border-right:1px solid var(--border); }
.auth-brand::before { content:""; position:absolute; width:520px; height:520px; right:-180px; bottom:-180px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.auth-brand > div { position:relative; z-index:2; max-width:560px; }.auth-brand h1 { margin:60px 0 20px; font-size:clamp(2.5rem,5vw,4.7rem); }.auth-brand p { font-size:1.08rem; }
.auth-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }.auth-points span { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.05); color:var(--text-soft); font-size:.82rem; }
.auth-content { display:grid; place-items:center; padding:70px 30px; }
.auth-card { width:min(480px,100%); padding:34px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-lg); }.auth-card--wide { width:min(700px,100%); }.auth-card--center { text-align:center; }.auth-card h1 { margin:8px 0 10px; font-size:2rem; }.auth-icon { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 18px; border-radius:18px; background:rgba(118,104,247,.12); color:#a99fff; }.auth-icon .icon { width:30px; height:30px; }.auth-switch { margin:22px 0 0; text-align:center; color:var(--muted); }.auth-switch a { color:#aaa0ff; font-weight:750; }

/* Footer and consent */
.site-footer { padding:68px 0 20px; border-top:1px solid var(--border); background:#080c16; }
html[data-theme="light"] .site-footer { background:#edf1f8; }
.footer-grid { display:grid; grid-template-columns:1.55fr repeat(3,1fr); gap:40px; }.footer-grid h3 { margin-bottom:15px; font-size:.92rem; }.footer-grid > div > a,.footer-grid .link-button { display:block; margin:9px 0; color:var(--muted); font-size:.85rem; }.footer-grid > div > a:hover,.footer-grid .link-button:hover { color:var(--text); }.footer-grid p { max-width:330px; }.footer-social { display:flex; gap:12px; }.footer-social a { color:#aaa0ff; font-weight:700; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:42px; padding-top:20px; border-top:1px solid var(--border); color:var(--muted); font-size:.78rem; }
.cookie-banner { position:fixed; z-index:1900; left:50%; bottom:18px; transform:translateX(-50%); width:min(1020px,calc(100% - 36px)); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:17px 19px; border:1px solid var(--border-strong); border-radius:16px; background:rgba(15,23,40,.96); box-shadow:var(--shadow-lg); backdrop-filter:blur(16px); }.cookie-banner strong { display:block; }.cookie-banner p { margin:2px 0 0; font-size:.84rem; }.cookie-banner__actions { display:flex; flex:0 0 auto; gap:8px; }
.consent-dialog { width:min(610px,calc(100% - 32px)); padding:28px; border:1px solid var(--border-strong); border-radius:20px; background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg); }.consent-dialog::backdrop { background:rgba(3,5,10,.76); backdrop-filter:blur(8px); }.consent-dialog__close { position:absolute; right:16px; top:16px; }.consent-list { display:grid; gap:10px; margin:22px 0; }.consent-list label { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }.consent-list strong,.consent-list small { display:block; }.consent-list input { width:20px; height:20px; accent-color:var(--primary); }

/* Dashboard shell */
.app-shell { min-height:100vh; background:var(--bg-soft); }
.app-sidebar { position:fixed; z-index:900; inset:0 auto 0 0; width:var(--sidebar-width); display:flex; flex-direction:column; padding:22px 17px 16px; border-right:1px solid var(--border); background:#0a0f1c; }
html[data-theme="light"] .app-sidebar { background:#fff; }
.app-sidebar > .brand { margin:0 8px 24px; }
.app-sidebar nav { flex:1; overflow:auto; display:grid; align-content:start; gap:3px; margin-inline:-4px; padding:0 4px; scrollbar-width:thin; }
.app-sidebar nav a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#9ca7c2; font-size:.88rem; font-weight:690; }
.app-sidebar nav a:hover,.app-sidebar nav a.is-active { background:rgba(118,104,247,.13); color:#f1f3ff; }
html[data-theme="light"] .app-sidebar nav a:hover,html[data-theme="light"] .app-sidebar nav a.is-active { color:#1b2340; }
.app-sidebar nav a.is-active { box-shadow:inset 3px 0 0 var(--primary); }
.app-sidebar nav .icon { width:19px; height:19px; }
.nav-label { display:block; margin:19px 11px 6px; color:#5e6b88; font-size:.68rem; font-weight:820; letter-spacing:.12em; text-transform:uppercase; }
.admin-badge { margin:-11px 8px 13px; color:#7e72e8; font-size:.62rem; font-weight:850; letter-spacing:.15em; }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.025); }.sidebar-user > img { width:42px; height:42px; object-fit:cover; border-radius:11px; }.sidebar-user > div { min-width:0; flex:1; }.sidebar-user strong,.sidebar-user span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sidebar-user strong { font-size:.84rem; }.sidebar-user span { color:var(--muted); font-size:.72rem; }.sidebar-user form { display:flex; }
.app-main { min-height:100vh; margin-left:var(--sidebar-width); }
.app-topbar { position:sticky; top:0; z-index:500; height:72px; display:flex; align-items:center; gap:14px; padding:0 28px; border-bottom:1px solid var(--border); background:rgba(11,17,32,.9); backdrop-filter:blur(16px); }
html[data-theme="light"] .app-topbar { background:rgba(245,247,252,.92); }
.app-topbar > .icon-button:first-child { display:none; }.app-topbar > div:nth-child(2) { flex:1; }.topbar-context { display:block; color:var(--muted); font-size:.7rem; font-weight:780; letter-spacing:.08em; text-transform:uppercase; }.app-topbar strong { font-size:.94rem; }.topbar-actions { display:flex; align-items:center; gap:9px; }
.app-content { width:min(100%,1500px); margin:0 auto; padding:30px; }
.dashboard-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:25px; }.dashboard-heading h1 { margin:5px 0 8px; font-size:clamp(1.9rem,4vw,2.7rem); }.dashboard-heading p { max-width:780px; margin:0; }.dashboard-heading > div:first-child { min-width:0; }
.dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:20px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }.metric-grid--admin { grid-template-columns:repeat(4,minmax(0,1fr)); }
.metric-card { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); }.metric-card:hover { border-color:rgba(118,104,247,.4); transform:translateY(-2px); }.metric-card > span { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(118,104,247,.12); color:#a59bff; }.metric-card strong,.metric-card small { display:block; }.metric-card strong { font-size:1.45rem; }.metric-card small { margin-top:2px; }
.admin-chart-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:20px; }.mini-chart { width:100%; min-height:180px; }
.bar-list { display:grid; gap:16px; }.bar-list > div > span { display:flex; justify-content:space-between; gap:10px; }.bar-list strong,.bar-list small { display:block; }.bar-list i { display:block; width:var(--value); max-width:100%; height:7px; margin-top:7px; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--cyan)); }
.timeline-list { display:grid; gap:0; }.timeline-list > div { position:relative; display:grid; grid-template-columns:18px 1fr; gap:9px; min-height:62px; }.timeline-list > div:not(:last-child)::before { content:""; position:absolute; left:5px; top:17px; bottom:-5px; width:1px; background:var(--border); }.timeline-dot { position:relative; z-index:1; width:11px; height:11px; margin-top:6px; border:2px solid var(--surface); border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px rgba(118,104,247,.18); }.timeline-list p { margin:0; font-size:.83rem; }.timeline-list small { display:block; margin-top:4px; }

/* Tables */
.data-table-wrap { max-width:100%; overflow:auto; border:1px solid var(--border); border-radius:13px; }
.data-table { width:100%; border-collapse:collapse; min-width:800px; font-size:.84rem; }.data-table th,.data-table td { padding:13px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }.data-table th { position:sticky; top:0; z-index:1; background:var(--surface-2); color:var(--muted); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }.data-table tr:last-child td { border-bottom:0; }.data-table tbody tr:hover { background:rgba(118,104,247,.035); }.data-table td > strong,.data-table td > small { display:block; }.data-table td > small { margin-top:3px; }.data-table form { display:inline-flex; }
.table-user { display:flex; align-items:center; gap:10px; min-width:210px; }.table-user img { width:40px; height:40px; object-fit:cover; border-radius:10px; }.table-user span { min-width:0; }.table-user strong,.table-user small { display:block; }.table-user--large { margin-bottom:18px; }.table-user--large img { width:64px; height:64px; border-radius:16px; }.table-user--large strong { font-size:1.1rem; }
.hash-preview { white-space:nowrap; }.error-preview { display:block; max-width:220px; color:var(--muted); }
.pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:7px; margin-top:24px; }.pagination__button { display:grid; place-items:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--muted); font-weight:700; }.pagination__button:hover,.pagination__button.is-active { border-color:rgba(118,104,247,.5); background:rgba(118,104,247,.12); color:var(--text); }

/* Dashboard content */
.dashboard-server-list { display:grid; gap:12px; }.dashboard-server-row { display:grid; grid-template-columns:70px minmax(0,1fr) repeat(3,100px) auto; align-items:center; gap:14px; padding:13px; border:1px solid var(--border); border-radius:13px; background:var(--surface-2); }.dashboard-server-row > img { width:68px; height:48px; object-fit:cover; border-radius:9px; }.dashboard-server-row strong,.dashboard-server-row small { display:block; }
.notification-list { display:grid; gap:8px; }.notification-list--full { gap:12px; }.notification-item { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }.notification-item.is-unread { border-color:rgba(118,104,247,.35); background:rgba(118,104,247,.07); }.notification-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:rgba(118,104,247,.12); color:#a99fff; }.notification-item strong,.notification-item small { display:block; }
.operator-server-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.operator-server-card { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); }.operator-server-card__banner { width:100%; aspect-ratio:3; object-fit:cover; }.operator-server-card__body { padding:18px; }.operator-server-card__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.server-editor { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:22px; }.server-editor__aside { display:grid; gap:18px; }.steps-list { display:grid; gap:13px; padding:0; list-style:none; }.steps-list li { display:flex; align-items:center; gap:10px; color:var(--text-soft); }.steps-list li span { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:rgba(118,104,247,.13); color:#aaa0ff; font-size:.75rem; font-weight:800; }
.media-preview { display:grid; grid-template-columns:160px minmax(0,1fr); gap:12px; }.media-preview img { width:100%; height:130px; object-fit:cover; border:1px solid var(--border); border-radius:12px; }.media-preview--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.gallery-editor { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.gallery-editor figure { position:relative; overflow:hidden; margin:0; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }.gallery-editor img { width:100%; aspect-ratio:1.55; object-fit:cover; }.gallery-editor figcaption { padding:8px; color:var(--muted); font-size:.72rem; }.gallery-editor form { position:absolute; top:7px; right:7px; }
.tag-picker,.tag-checks { display:flex; flex-wrap:wrap; gap:8px; }.tag-picker label,.tag-checks label { display:block; }.tag-picker input,.tag-checks input { position:absolute; opacity:0; pointer-events:none; }.tag-picker span,.tag-checks span { display:inline-flex; padding:8px 11px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.78rem; cursor:pointer; }.tag-picker input:checked + span,.tag-checks input:checked + span { border-color:rgba(118,104,247,.55); background:rgba(118,104,247,.15); color:var(--text); }
.verification-code { display:block; margin:10px 0; padding:12px; border-radius:10px; text-align:center; letter-spacing:.12em; font-size:1rem; }.verification-list { display:grid; gap:10px; margin-top:18px; }.verification-list > div { padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }.verification-list > div > strong,.verification-list > div > small { display:block; margin-top:5px; }.verification-list--admin > div { display:grid; grid-template-columns:120px minmax(0,1fr) auto; align-items:center; gap:14px; }
.member-list { display:grid; gap:8px; margin-bottom:18px; }.member-list > div { display:flex; align-items:center; gap:10px; padding:9px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }.member-list img { width:38px; height:38px; object-fit:cover; border-radius:9px; }.member-list span { flex:1; min-width:0; }.member-list strong,.member-list small { display:block; }
.danger-zone { border-color:rgba(255,102,126,.28); background:linear-gradient(145deg,rgba(255,102,126,.07),var(--surface)); }
.settings-layout { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; gap:22px; }.settings-nav { position:sticky; top:95px; display:grid; gap:5px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }.settings-nav a { padding:9px 11px; border-radius:9px; color:var(--muted); font-size:.85rem; }.settings-nav a:hover,.settings-nav a.is-active { background:rgba(118,104,247,.11); color:var(--text); }.settings-content { display:grid; gap:20px; }
.profile-media-editor { display:grid; grid-template-columns:160px minmax(0,1fr); gap:20px; }.profile-banner-preview { position:relative; overflow:hidden; min-height:180px; border-radius:15px; background:var(--surface-2); }.profile-banner-preview img { width:100%; height:100%; object-fit:cover; }.profile-avatar { width:150px; height:150px; object-fit:cover; border:3px solid var(--surface); border-radius:24px; box-shadow:var(--shadow); }

/* Admin-specific */
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:20px; }
.role-picker,.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.role-picker label,.permission-grid label { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); cursor:pointer; }.role-picker input,.permission-grid input { flex:0 0 auto; width:18px; height:18px; margin-top:2px; accent-color:var(--primary); }.role-picker strong,.role-picker small,.permission-grid strong,.permission-grid small { display:block; }.permission-grid code { padding:0; border:0; background:transparent; }
.chip-list { display:flex; flex-wrap:wrap; gap:8px; }.chip-list a { padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); color:var(--text-soft); font-size:.8rem; }.chip-list a:hover { border-color:rgba(118,104,247,.45); color:#b7afff; }
.application-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:25px; }.application-summary > div { padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }.application-summary span,.application-summary strong { display:block; }.application-summary span { color:var(--muted); font-size:.72rem; }.application-summary strong { margin-top:4px; overflow-wrap:anywhere; }
.conversation-list,.message-thread { display:grid; gap:12px; }.conversation-item,.thread-message { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }.conversation-item--internal { border-color:rgba(255,189,89,.3); background:rgba(255,189,89,.06); }.conversation-item > img,.thread-message > img { width:42px; height:42px; object-fit:cover; border-radius:10px; }.conversation-item header,.thread-message header { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.conversation-item time,.thread-message time { margin-left:auto; color:var(--muted); font-size:.72rem; }.conversation-item p,.thread-message p { margin:7px 0 0; }
.data-action-form { display:grid!important; gap:7px; min-width:300px; }.data-action-form > div { display:flex; flex-wrap:wrap; gap:6px; }
.admin-image-preview { width:100%; margin-top:12px; aspect-ratio:1.7; object-fit:cover; border:1px solid var(--border); border-radius:12px; }
.admin-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.admin-gallery img { width:100%; aspect-ratio:1.5; object-fit:cover; border-radius:10px; }
.action-stack,.moderation-actions { display:grid; gap:10px; }
.json-preview,.audit-details { max-height:360px; overflow:auto; padding:13px; border:1px solid var(--border); border-radius:10px; background:#080c16; color:#b9c3de; font-family:monospace; font-size:.75rem; white-space:pre-wrap; word-break:break-word; }
.review-workspace,.server-review-hero { display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:start; gap:22px; }.server-review-hero { grid-template-columns:180px minmax(0,1fr); }.server-review-hero > img { width:180px; aspect-ratio:1.6; object-fit:cover; border-radius:15px; }
.field-definition-list { display:grid; gap:9px; }.field-definition-list > div { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }

/* Profiles, jobs, news, contact */
.profile-hero { position:relative; padding-top:180px; background:var(--surface-2); }.profile-hero > img { position:absolute; inset:0 0 auto; width:100%; height:250px; object-fit:cover; opacity:.55; }.profile-hero::after { content:""; position:absolute; inset:0 0 auto; height:250px; background:linear-gradient(to top,var(--bg),transparent); }.profile-hero__inner { position:relative; z-index:2; display:flex; align-items:end; gap:22px; padding-bottom:30px; }.profile-hero__inner .profile-avatar { width:150px; height:150px; }.profile-hero h1 { margin:0; font-size:2.5rem; }
.profile-layout { display:grid; grid-template-columns:320px minmax(0,1fr); align-items:start; gap:22px; }.stats-grid--profile { grid-template-columns:repeat(2,1fr); }.stats-grid--profile .stat { min-height:80px; border:0; justify-content:flex-start; padding:10px; }
.job-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.job-card { display:flex; flex-direction:column; padding:22px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }.job-card__top { display:flex; justify-content:space-between; gap:10px; }.job-card h2 { margin:13px 0 10px; font-size:1.35rem; }.job-card > p { flex:1; }.job-facts { display:flex; flex-wrap:wrap; gap:7px; margin:15px 0; }.job-facts span { padding:5px 8px; border-radius:8px; background:var(--surface-2); color:var(--muted); font-size:.75rem; }
.job-detail { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:25px; }.job-detail main { min-width:0; }
.article-hero { padding:64px 0 36px; }.article-cover { width:min(1100px,calc(100% - 40px)); margin:0 auto; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); }.article-cover img { width:100%; max-height:580px; object-fit:cover; }.article-page { width:min(920px,calc(100% - 40px)); margin:0 auto; }.article-page h1 { margin:12px 0 18px; font-size:clamp(2.2rem,5vw,4.2rem); }.article-meta { display:flex; flex-wrap:wrap; gap:13px; color:var(--muted); }.article-content { padding:44px 0 80px; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:24px; }.contact-aside { display:grid; gap:16px; }.contact-points { display:grid; gap:11px; }.contact-points > div { display:flex; gap:10px; }.contact-points .icon { color:#a99fff; }.contact-points strong,.contact-points small { display:block; }
.about-orbit,.career-visual { display:grid; place-items:center; min-height:360px; }
.split-hero,.split-content,.feature-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:48px; }.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.feature-card { padding:22px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }.feature-card .card-icon { margin-bottom:15px; }.quote-card { padding:30px; font-size:1.15rem; }
.legal-content { width:min(900px,calc(100% - 40px)); margin:0 auto; padding:60px 0 90px; }.legal-notice { margin-bottom:24px; }

/* Errors */
.error-page { min-height:70vh; display:grid; align-items:center; }.error-card { max-width:720px; margin:0 auto; text-align:center; }.error-code { font-size:clamp(5rem,15vw,11rem); line-height:.9; font-weight:900; letter-spacing:-.08em; background:linear-gradient(135deg,rgba(118,104,247,.9),rgba(55,213,255,.5)); -webkit-background-clip:text; color:transparent; }.error-card h1 { margin:13px 0; }.error-card p { max-width:610px; margin-inline:auto; }.error-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:25px; }.error-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:42px; }.error-links a { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--border); border-radius:13px; background:var(--surface); }.error-links a:hover { border-color:rgba(118,104,247,.4); }.error-links .icon { color:#aaa0ff; }.error-links strong,.error-links small { display:block; }

/* Misc */
.simple-list { display:grid; gap:10px; padding:0; list-style:none; }.simple-list--rows > * { padding:10px 0; border-bottom:1px solid var(--border); }.simple-list--rows > *:last-child { border:0; }
.mini-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.mini-metrics > div { padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }.mini-metrics strong,.mini-metrics span { display:block; }.mini-metrics span { color:var(--muted); font-size:.72rem; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.detail-grid > div { padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.header-statuses { display:flex; flex-wrap:wrap; gap:8px; }
.inline-reply { display:grid; gap:10px; margin-top:12px; padding:13px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }

/* Responsive */
@media (max-width: 1180px) {
    .game-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .game-grid--wide { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .hero__inner { grid-template-columns:minmax(0,1fr) 390px; gap:28px; }
    .atlas-orbit { width:360px; height:360px; }
    .server-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .server-stats-bar .container { grid-template-columns:repeat(3,1fr); }
    .server-stats-bar .stat-card:nth-child(3) { border-right:0; }
    .server-stats-bar .stat-card:nth-child(-n+3) { border-bottom:1px solid var(--border); }
    .ranking-row { grid-template-columns:50px 50px minmax(0,1fr) repeat(2,110px) auto; }.ranking-row .ranking-stat:nth-of-type(3) { display:none; }
    .metric-grid,.metric-grid--admin { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.panel--span-2 { grid-column:span 2; }
    .settings-grid { grid-template-columns:1fr; }
    .job-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 980px) {
    :root { --header-height:68px; }
    .main-nav { position:fixed; z-index:850; top:var(--header-height); left:15px; right:15px; display:none; align-items:stretch; flex-direction:column; padding:12px; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-lg); }.main-nav.is-open { display:flex; }.main-nav a { padding:12px; }
    .mobile-menu { display:grid; }
    .hero { min-height:auto; }.hero__inner { grid-template-columns:1fr; padding-block:70px; }.hero__visual { min-height:430px; }.hero__copy { text-align:center; }.hero__copy > p,.hero-search { margin-inline:auto; }.hero__actions,.hero__trust { justify-content:center; }
    .stats-grid { grid-template-columns:repeat(3,1fr); }.stat:nth-child(3) { border-right:0; }.stat:nth-child(-n+3) { border-bottom:1px solid var(--border); }
    .operator-card { grid-template-columns:1fr; padding:34px; }.operator-preview { max-width:760px; }
    .listing-layout { grid-template-columns:1fr; }.filter-panel { position:fixed; z-index:1200; inset:0 auto 0 0; width:min(360px,90vw); overflow:auto; border-radius:0 20px 20px 0; transform:translateX(-105%); transition:transform 220ms ease; }.filter-panel.is-open { transform:translateX(0); box-shadow:var(--shadow-lg); }
    .server-detail-hero__inner { align-items:flex-start; flex-direction:column; }.server-hero-actions { justify-content:flex-start; }
    .server-detail-layout,.job-detail,.contact-layout,.profile-layout { grid-template-columns:1fr; }.server-detail-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }.server-detail-sidebar .sticky-card { position:static; }
    .server-editor { grid-template-columns:1fr; }.server-editor__aside { grid-template-columns:repeat(2,minmax(0,1fr)); }.server-editor__aside .sticky-card { position:static; }
    .editor-layout { grid-template-columns:1fr; }.editor-layout aside .sticky-card { position:static; }
    .review-workspace { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:repeat(2,1fr); }
    .auth-shell { grid-template-columns:1fr; }.auth-brand { display:none; }.auth-back { color:var(--text-soft); }
    .app-sidebar { transform:translateX(-105%); transition:transform 220ms ease; box-shadow:var(--shadow-lg); }.sidebar-open .app-sidebar { transform:translateX(0); }.sidebar-open::after { content:""; position:fixed; z-index:850; inset:0; background:rgba(0,0,0,.62); }
    .app-main { margin-left:0; }.app-topbar > .icon-button:first-child { display:grid; }
    .admin-chart-grid { grid-template-columns:1fr; }
    .settings-layout { grid-template-columns:1fr; }.settings-nav { position:static; display:flex; overflow:auto; }
    .split-hero,.split-content,.feature-layout { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
    .container,.content-narrow,.article-page,.article-cover,.legal-content { width:min(calc(100% - 28px),var(--container)); }
    .section { padding:64px 0; }.section--small { padding:36px 0; }
    .hide-mobile { display:none!important; }
    .site-header__inner { gap:12px; }.site-header .brand__word { display:none; }
    .hero__inner { padding-block:55px 48px; }.hero__copy h1 { font-size:clamp(2.45rem,12vw,3.7rem); }.hero__copy > p { font-size:1rem; }.hero-search { display:grid; grid-template-columns:auto 1fr; }.hero-search .button { grid-column:1/-1; width:100%; }.hero__visual { min-height:350px; }.atlas-orbit { width:300px; height:300px; }.atlas-core { width:145px; height:145px; }.atlas-core img { width:85px; }.orbit-game { width:48px; height:48px; border-radius:13px; }.hero-float { font-size:.78rem; }.hero-float--online { left:2px; }.hero-float--votes { right:1px; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }.stat { border-right:1px solid var(--border)!important; border-bottom:1px solid var(--border); }.stat:nth-child(even) { border-right:0!important; }.stat:nth-last-child(-n+2) { border-bottom:0; }
    .game-grid,.game-grid--wide { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.game-card__body { padding:13px; }.game-card__title h3 { font-size:.9rem; }
    .server-grid,.server-grid--two,.listing-results .server-grid { grid-template-columns:1fr; }
    .news-grid,.news-grid--large,.feature-grid,.job-grid { grid-template-columns:1fr; }
    .section-heading { align-items:flex-start; flex-direction:column; margin-bottom:25px; }
    .operator-card { padding:25px; }.check-list { grid-template-columns:1fr; }.preview-window { transform:none; }
    .final-cta .container { align-items:flex-start; flex-direction:column; }.final-cta .container > div:last-child { justify-content:flex-start; }
    .page-hero { padding:60px 0 44px; }
    .game-hero__inner { grid-template-columns:95px minmax(0,1fr); align-items:start; gap:18px; }.game-hero__cover { width:95px; border-radius:13px; }.game-hero__title > img { display:none; }.game-hero h1 { font-size:2.2rem; }.game-hero p,.game-hero__stats { grid-column:1/-1; }.game-hero__stats > div { min-width:calc(50% - 8px); }
    .listing-toolbar { align-items:flex-start; flex-direction:column; }.listing-toolbar__actions { width:100%; justify-content:space-between; }.sort-inline { flex:1; justify-content:flex-end; }.sort-inline select { min-width:0; max-width:190px; }
    .ranking-row { grid-template-columns:42px 44px minmax(0,1fr) auto; gap:10px; padding:12px; }.ranking-row .ranking-stat { display:none; }.ranking-logo { width:44px; height:44px; }
    .server-detail-hero { min-height:520px; }.server-title-block { align-items:center; }.server-detail-logo { width:82px; height:82px; border-radius:18px; }.server-title-block h1 { font-size:2.25rem; }.server-title-meta { font-size:.82rem; }.server-hero-actions { width:100%; }.server-hero-actions .button { flex:1; }.server-stats-bar .container { grid-template-columns:repeat(2,1fr); }.server-stats-bar .stat-card { border-right:1px solid var(--border)!important; border-bottom:1px solid var(--border); }.server-stats-bar .stat-card:nth-child(even) { border-right:0!important; }.server-stats-bar .stat-card:nth-last-child(-n+2) { border-bottom:0; }
    .server-detail-sidebar { grid-template-columns:1fr; }.gallery { grid-template-columns:repeat(2,1fr); }.status-overview { grid-template-columns:1fr; }.status-timeline { grid-template-columns:repeat(24,1fr); }.comment--reply { margin-left:20px; }
    .form-grid--2,.form-grid--two,.form-grid--3,.form-grid--three,.form-grid--4,.check-grid,.toggle-grid { grid-template-columns:1fr; }.field-span-2 { grid-column:auto; }.form-row { align-items:stretch; flex-direction:column; }.inline-form { align-items:stretch; flex-direction:column; }
    .form-savebar { align-items:stretch; flex-direction:column; bottom:8px; }.form-savebar .button { width:100%; }
    .cookie-banner { align-items:stretch; flex-direction:column; }.cookie-banner__actions { display:grid; grid-template-columns:1fr 1fr; }.cookie-banner__actions .button:last-child { grid-column:1/-1; }
    .footer-grid { grid-template-columns:1fr; gap:28px; }.footer-bottom { flex-direction:column; }
    .app-content { padding:20px 14px; }.app-topbar { padding:0 14px; }.app-topbar .button { display:none; }
    .dashboard-heading { align-items:flex-start; flex-direction:column; }.dashboard-grid { grid-template-columns:1fr; }.panel--span-2 { grid-column:auto; }.metric-grid,.metric-grid--admin { grid-template-columns:1fr 1fr; gap:10px; }.metric-card { padding:13px; }.metric-card > span { width:38px; height:38px; }.metric-card strong { font-size:1.2rem; }
    .dashboard-server-row { grid-template-columns:56px minmax(0,1fr) auto; }.dashboard-server-row > *:nth-child(3),.dashboard-server-row > *:nth-child(4),.dashboard-server-row > *:nth-child(5) { display:none; }
    .server-editor__aside,.operator-server-grid { grid-template-columns:1fr; }.media-preview,.media-preview--three { grid-template-columns:1fr; }.gallery-editor { grid-template-columns:repeat(2,1fr); }
    .settings-grid,.role-picker,.permission-grid,.application-summary { grid-template-columns:1fr; }
    .editor-layout { display:block; }.editor-layout > aside { margin-top:20px; }
    .profile-media-editor { grid-template-columns:1fr; }.profile-avatar { width:115px; height:115px; }
    .profile-hero { padding-top:145px; }.profile-hero > img,.profile-hero::after { height:205px; }.profile-hero__inner { align-items:flex-start; flex-direction:column; }.profile-hero__inner .profile-avatar { width:110px; height:110px; }.profile-hero h1 { font-size:2rem; }
    .server-review-hero { grid-template-columns:1fr; }.server-review-hero > img { width:100%; }.verification-list--admin > div { grid-template-columns:1fr; }
    .application-summary { grid-template-columns:1fr 1fr; }.data-action-form { min-width:250px; }
    .error-links { grid-template-columns:1fr; }
}

@media (max-width: 440px) {
    .game-grid,.game-grid--wide { grid-template-columns:1fr; }
    .hero__actions .button { width:100%; }.hero__trust { flex-direction:column; align-items:center; }
    .atlas-orbit { width:270px; height:270px; }.hero-float { display:none; }
    .metric-grid,.metric-grid--admin { grid-template-columns:1fr; }
    .application-summary { grid-template-columns:1fr; }
    .gallery,.gallery-editor { grid-template-columns:1fr; }
    .cookie-banner__actions { grid-template-columns:1fr; }.cookie-banner__actions .button:last-child { grid-column:auto; }
    .server-title-block { align-items:flex-start; flex-direction:column; }.server-detail-logo { width:75px; height:75px; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

@media print {
    .site-header,.site-footer,.cookie-banner,.server-tabs,.app-sidebar,.app-topbar,.button,.icon-button,.toast-stack { display:none!important; }
    body,.app-shell { background:#fff; color:#000; }.app-main { margin:0; }.app-content { padding:0; }.panel,.card { box-shadow:none; border-color:#bbb; }
}

/* Ergänzende Zustände für dynamische Komponenten */
.server-detail-hero__bg > img { width: 100%; height: 100%; object-fit: cover; }
.server-tabs > .container { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.server-tabs > .container::-webkit-scrollbar { display: none; }
.server-title-tags > a { padding: 4px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(8,12,23,.55); color: rgba(255,255,255,.82); font-size: .72rem; font-weight: 680; }
.details-card summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.details-card summary > span { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; }
.details-card[open] summary { margin-bottom: 20px; }
.operator-mini > div { display: flex; align-items: center; gap: 11px; }
.operator-mini a { color: #aaa0ff; font-size: .8rem; font-weight: 700; }
.share-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.share-card strong, .share-card small { display: block; }
.article-meta > img { width: 45px; height: 45px; object-fit: cover; border-radius: 11px; }
.article-meta > span strong, .article-meta > span small { display: block; }
.article-cover { object-fit: cover; aspect-ratio: 1.78; }
.upload-preview-live { width: min(220px, 100%); max-height: 140px; margin: 12px auto 0; object-fit: cover; border: 1px solid var(--border); border-radius: 10px; }
.is-copied { border-color: rgba(55,214,146,.5)!important; color: #75e5b6!important; }
.character-count.is-near-limit { color: var(--warning); }
[data-server-form].is-loading { opacity: .72; pointer-events: none; }
.filter-open::before { content: ""; position: fixed; z-index: 1100; inset: 0; background: rgba(0,0,0,.58); }
.button:disabled, button:disabled { opacity: .5; cursor: not-allowed; transform: none!important; box-shadow: none!important; }
.form-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.info-card { padding: 20px; }
.header-statuses { justify-content: flex-end; }
.trailer-link { margin-top: 20px; }
.trailer-link > .button { width: max-content; }
.audit-details { max-height: none; color: var(--text-soft); font-family: inherit; font-size: inherit; white-space: normal; }
.audit-details summary { cursor: pointer; color: var(--text); font-weight: 780; }
.audit-details[open] summary { margin-bottom: 14px; }
@media (max-width: 720px) {
    .share-card { align-items: stretch; flex-direction: column; }
    .share-card .button { width: 100%; }
}