:root {
	color-scheme: light dark;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bg: #f5f7fb;
	--surface: #ffffff;
	--surface-muted: #eef2f8;
	--text: #172033;
	--muted: #5b6578;
	--border: #dbe2ee;
	--border-strong: #c4cfdf;
	--accent: #4f46e5;
	--accent-strong: #3730a3;
	--accent-soft: #eef2ff;
	--accent-contrast: #ffffff;
	--success: #0f766e;
	--success-soft: #ecfdf8;
	--warning: #8a5200;
	--warning-soft: #fff7e6;
	--danger: #b42318;
	--danger-soft: #fff1f0;
	--radius-sm: .55rem;
	--radius: .9rem;
	--radius-lg: 1.25rem;
	--shadow-sm: 0 .25rem .8rem rgb(23 32 51 / 6%);
	--shadow: 0 .8rem 2rem rgb(23 32 51 / 8%);
	--content-width: 70rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f172a;
		--surface: #172033;
		--surface-muted: #202b40;
		--text: #edf2ff;
		--muted: #acb7cb;
		--border: #334155;
		--border-strong: #475569;
		--accent: #818cf8;
		--accent-strong: #a5b4fc;
		--accent-soft: #25285c;
		--accent-contrast: #11152a;
		--success: #5eead4;
		--success-soft: #123c3a;
		--warning: #f5bd69;
		--warning-soft: #483413;
		--danger: #fca5a5;
		--danger-soft: #491d25;
		--shadow-sm: 0 .25rem .8rem rgb(0 0 0 / 18%);
		--shadow: 0 .8rem 2rem rgb(0 0 0 / 24%);
	}
}

* { box-sizing: border-box; }
html { min-width: 18rem; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); line-height: 1.6; }
body, button, input, select, textarea { font-size: 1rem; }
a { color: var(--accent-strong); text-underline-offset: .16em; }
a:hover { text-decoration-thickness: .12em; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { margin-top: 0; font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
h3 { margin-top: 0; font-size: 1.1rem; }
p { max-width: 70ch; }

.skip-link { position: absolute; top: .75rem; left: .75rem; z-index: 10; padding: .6rem .85rem; color: var(--accent-contrast); background: var(--accent); border-radius: var(--radius-sm); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; gap: 1.5rem; justify-content: space-between; align-items: center; width: min(calc(100% - 2rem), var(--content-width)); min-height: 4.75rem; margin: 0 auto; }
.site-header nav, .nav-links, .filter-links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.nav-links a { padding: .45rem .65rem; color: var(--muted); font-weight: 650; text-decoration: none; border-radius: var(--radius-sm); }
.nav-links a:hover { color: var(--text); background: var(--surface-muted); }
.brand { display: inline-flex; gap: .65rem; align-items: center; color: var(--text); font-weight: 800; font-size: 1.2rem; text-decoration: none; letter-spacing: -.03em; white-space: nowrap; }
.brand-mark { display: block; width: 2rem; height: 2rem; border-radius: .65rem; box-shadow: 0 .35rem .8rem rgb(79 70 229 / 25%); object-fit: cover; }
.account-menu { display: inline-flex; gap: .55rem; align-items: center; padding-left: .75rem; color: var(--muted); font-size: .92rem; border-left: 1px solid var(--border); }
.user-avatar, .server-card img { border-radius: 50%; object-fit: cover; }
.user-avatar { border: 2px solid var(--border); }
.page-content { width: min(calc(100% - 2rem), var(--content-width)); min-height: calc(100vh - 9.5rem); margin: 0 auto; padding: clamp(2.25rem, 5vw, 4.5rem) 0; }
.page-header { margin-bottom: 2rem; }
.page-header > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 1.08rem; }
.hero { max-width: 56rem; padding: clamp(2rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem); background: radial-gradient(circle at 90% 0%, rgb(129 140 248 / 22%), transparent 42%), var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.hero h1 { max-width: 12ch; margin: .4rem 0 1.25rem; font-size: clamp(2.5rem, 7vw, 4.75rem); line-height: 1.03; letter-spacing: -.055em; }
.hero > p:not(.eyebrow):not(.legal-summary) { max-width: 38rem; color: var(--muted); font-size: 1.12rem; }
.eyebrow { margin: 0 0 .5rem; color: var(--accent-strong); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.button, button { display: inline-flex; gap: .45rem; align-items: center; justify-content: center; min-height: 2.7rem; padding: .65rem 1rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); font: inherit; font-weight: 700; line-height: 1.2; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.button { color: var(--accent-contrast); background: var(--accent); text-decoration: none; box-shadow: 0 .4rem .9rem rgb(79 70 229 / 18%); }
.button:hover { color: var(--accent-contrast); background: var(--accent-strong); transform: translateY(-1px); }
button { cursor: pointer; background: var(--surface); color: var(--text); }
button:hover { border-color: var(--accent); background: var(--accent-soft); }
button:disabled { cursor: not-allowed; opacity: .6; }
.site-footer { margin-top: auto; padding: 1.5rem 1rem; color: var(--muted); border-top: 1px solid var(--border); background: var(--surface); }
.site-footer nav { display: flex; gap: 1.25rem; justify-content: center; width: min(100%, var(--content-width)); margin: 0 auto; flex-wrap: wrap; }
.legal-summary { margin-top: 2rem; color: var(--muted); font-size: .95rem; }
.notice, .neutral-card, .banner, .server-card, .appeal-history > li { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.notice { margin-top: 1.5rem; padding: .9rem 1rem; color: var(--warning); background: var(--warning-soft); }
.legal-document { max-width: 52rem; }
.legal-document header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.legal-document h1 { margin: .25rem 0 .75rem; }
.legal-document h2 { margin-bottom: .5rem; font-size: 1.25rem; }
.legal-document section { margin-top: 2.5rem; }
.legal-document li + li { margin-top: .5rem; }
.legal-notice { padding: 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--muted); background: var(--surface-muted); }
.inline-form { display: inline; }
.server-list, .appeal-history { display: grid; gap: 1rem; padding: 0; list-style: none; }
.server-card, .appeal-history > li, .neutral-card, .banner { padding: clamp(1.15rem, 3vw, 1.5rem); }
.server-card { display: flex; gap: 1rem; align-items: center; }
.server-card > div { min-width: 0; flex: 1; }
.server-card h2, .server-card h3 { margin: 0; }
.server-name { display: inline-flex; gap: .5rem; align-items: center; }
.server-card h2 a, .server-card h3 a { color: var(--text); text-decoration: none; }
.server-card h2 a:hover, .server-card h3 a:hover { color: var(--accent-strong); text-decoration: underline; }
.server-card__icon { display: block; flex: 0 0 auto; width: 3rem; height: 3rem; border: 1px solid var(--border); background: var(--surface-muted); }
.server-card__body { display: grid; gap: .35rem; }
.server-role-icon { display: inline-flex; flex: 0 0 auto; width: 1.15em; height: 1.15em; color: var(--accent-strong); vertical-align: middle; }
.server-role-icon--admin { color: var(--warning); }
.server-role-icon svg { width: 100%; height: 100%; }
.server-card__actions { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.server-summary, .ban-summary, .appeal-history-section { margin-top: 1.5rem; }
.server-summary { margin-top: 1rem; }
.server-summary h1 { margin-top: .25rem; }
.server-identity { display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.server-identity img { width: 4rem; height: 4rem; border: 1px solid var(--border); border-radius: 1rem; object-fit: cover; }
.server-identity h1 { margin: 0; }
.level-panel { padding-top: 1.25rem; border-top: 1px solid var(--border); }
.level-panel h2 { margin-bottom: .5rem; }
.progress-label { display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .5rem; color: var(--muted); font-size: .92rem; }
.detail-list { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .7rem 1rem; margin: 1.25rem 0 0; }
.detail-list dt { color: var(--muted); font-size: .9rem; font-weight: 750; }
.detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.banner-warning { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); background: var(--warning-soft); }
.banner-danger { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: var(--danger-soft); }
.banner h2 { margin-bottom: .5rem; }
.status { margin: .25rem 0 0; color: var(--muted); }
.status-warning { display: inline-flex; width: fit-content; padding: .2rem .55rem; color: var(--warning); font-size: .84rem; font-weight: 750; background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); border-radius: 999px; }
.status-success { color: var(--success); }
.filter-links { margin: 1rem 0 1.5rem; padding: .35rem; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.filter-links a { padding: .45rem .75rem; color: var(--muted); font-weight: 700; text-decoration: none; border-radius: .4rem; }
.filter-links a:hover, .filter-links a:focus-visible { color: var(--text); background: var(--surface); }
.appeal-history > li { display: grid; gap: .35rem; }
.appeal-history > li h2, .appeal-history > li h3, .appeal-history > li p { margin: 0; }
.appeal-history > li > p:first-of-type { color: var(--muted); font-size: .92rem; }
.decision-form { display: grid; gap: .45rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.decision-form + .decision-form { margin-top: 1rem; }
label { color: var(--text); font-weight: 700; }
textarea, input, select { display: block; width: min(100%, 48rem); max-width: 100%; margin: .4rem 0; padding: .7rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: inherit; }
textarea { resize: vertical; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgb(79 70 229 / 15%); }
.form-help { margin: 0 0 .75rem; color: var(--muted); font-size: .92rem; }
.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.danger:hover { color: #fff; background: #8f1d14; border-color: #8f1d14; }
progress { width: 100%; max-width: 30rem; height: .7rem; accent-color: var(--accent); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
:focus-visible { outline: .2rem solid var(--accent); outline-offset: .2rem; }

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

@media (max-width: 52rem) {
	.site-header__inner { align-items: flex-start; padding: .9rem 0; flex-direction: column; }
	.site-header__inner nav { width: 100%; gap: .6rem; }
	.nav-links { flex: 1; }
	.account-menu { margin-left: auto; }
}

@media (max-width: 42rem) {
	.page-content { width: min(calc(100% - 1.25rem), var(--content-width)); padding: 1.75rem 0 3rem; }
	.hero { padding: 2rem 1.25rem; }
	.hero h1 { font-size: clamp(2.25rem, 13vw, 3.5rem); }
	.server-card { align-items: flex-start; }
	.server-card__actions { align-items: flex-start; flex-direction: column; }
	.server-identity { align-items: flex-start; }
	.detail-list { grid-template-columns: 1fr; gap: .15rem; }
	.detail-list dd + dt { margin-top: .65rem; }
	.site-footer { padding-right: .75rem; padding-left: .75rem; }
}