/* Final cascade guard for the Corporate Clean theme.
   Loaded after the legacy theme layers so late responsive patches cannot
   reintroduce the previous dark/glass treatment. */

html,
body,
#root {
	background: var(--cc-bg) !important;
	color: var(--cc-text) !important;
}

/* Profile editing stays on the profile surface.  The card keeps the same
   geometry as the public profile; editing affordances only become visible
   after the user focuses or opens the relevant part of it. */
.profile-editor-workspace {
	display: block !important;
}

.profile-editor-preview-column {
	width: min(440px, 100%) !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

.profile-editor-preview-head {
	display: none !important;
}

.profile-editor-preview-card {
	width: 100% !important;
	max-width: 440px !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	animation: none !important;
}

.profile-editor-preview-card .profile-editor-banner {
	height: 118px !important;
	border-radius: 14px 14px 0 0 !important;
	background-position: center, center !important;
	background-repeat: no-repeat !important;
}

.profile-editor-preview-card .profile-editor-preview-content {
	min-height: 0 !important;
	padding: 0 16px 18px !important;
	gap: 8px !important;
}

.profile-editor-preview-card .profile-editor-avatar-wrap {
	margin-top: -49px !important;
}

.profile-editor-preview-card .profile-editor-avatar-button .profile-avatar {
	width: 98px !important;
	height: 98px !important;
	border-color: var(--panel) !important;
}

.profile-editor-preview-card .profile-editor-preview-name-row {
	width: 100% !important;
	min-height: 0 !important;
	margin-top: 0 !important;
}

.profile-editor-preview-card .profile-editor-description-button,
.profile-editor-preview-card .profile-editor-inline-name,
.profile-editor-preview-card .profile-editor-status-bubble input {
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	background-image: linear-gradient(var(--cc-accent), var(--cc-accent)) !important;
	background-position: center bottom !important;
	background-repeat: no-repeat !important;
	background-size: 0% 1px !important;
	transition: background-size 180ms ease !important;
}

.profile-editor-preview-card .profile-editor-description-button:focus,
.profile-editor-preview-card .profile-editor-inline-name:focus,
.profile-editor-preview-card .profile-editor-status-bubble input:focus {
	background-size: 100% 1px !important;
}

.profile-editor-preview-card .profile-editor-description-button {
	height: 1.36em !important;
	min-height: 1.36em !important;
	margin: 0 !important;
	padding: 0 10px 3px !important;
	resize: none !important;
	overflow: hidden !important;
	color: var(--muted) !important;
	line-height: 1.36 !important;
}

.profile-editor-preview-card .profile-editor-description-button:focus {
	height: 72px !important;
	overflow: auto !important;
}

.profile-editor-preview-card .profile-editor-preview-meta {
	order: initial !important;
	align-items: center;
	margin: 0 !important;
	padding: 0 10px;
	color: var(--muted) !important;
}

.profile-editor-preview-meta button,
.profile-editor-appearance-trigger,
.profile-editor-online-dot {
	border: 0 !important;
	box-shadow: none !important;
}

.profile-editor-preview-meta button {
	padding: 0 !important;
	background: transparent !important;
	color: var(--muted) !important;
	cursor: pointer;
	font: inherit;
}

.profile-editor-preview-meta button:hover,
.profile-editor-preview-meta button:focus-visible {
	color: var(--cc-accent) !important;
}

.profile-editor-online-dot {
	padding: 0 !important;
	background-color: #56d789 !important;
	cursor: pointer;
}

.profile-editor-inspector,
.profile-settings-legacy {
	display: none !important;
}

.profile-editor-inline-panel {
	width: 100%;
	margin-top: 12px;
	padding: 16px;
	border: 1px solid var(--cc-border);
	border-radius: 12px;
	background: var(--cc-surface);
	color: var(--cc-text);
	box-shadow: var(--cc-shadow-sm);
	animation: profile-editor-inline-reveal 180ms ease both;
}

.profile-editor-inline-panel-head,
.profile-editor-inline-mode-row,
.profile-editor-inline-toggle,
.profile-editor-inline-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.profile-editor-inline-panel-head {
	margin-bottom: 14px;
	font-size: .88rem;
}

.profile-editor-inline-close {
	display: inline-grid;
	width: 28px;
	height: 28px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--cc-muted);
	cursor: pointer;
}

.profile-editor-inline-close:hover,
.profile-editor-inline-close:focus-visible {
	background: var(--cc-accent-soft);
	color: var(--cc-accent);
}

.profile-editor-inline-fields {
	display: grid;
	gap: 12px;
}

.profile-editor-inline-field {
	display: grid;
	gap: 5px;
	color: var(--cc-text-secondary);
	font-size: .75rem;
}

.profile-editor-inline-field > span,
.profile-editor-inline-mode-row > span {
	font-weight: 650;
}

.profile-editor-inline-field input:not([type="checkbox"]),
.profile-editor-inline-field select {
	width: 100%;
	min-height: 34px;
	padding: 4px 0;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background-color: transparent !important;
	background-image: linear-gradient(var(--cc-accent), var(--cc-accent)) !important;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	box-shadow: none !important;
	color: var(--cc-text) !important;
	font: inherit;
	transition: background-size 180ms ease;
}

.profile-editor-inline-field input:not([type="checkbox"]):focus,
.profile-editor-inline-field select:focus {
	background-size: 100% 1px !important;
}

.profile-editor-inline-field select {
	cursor: pointer;
}

.profile-editor-inline-toggle {
	padding: 3px 0;
	color: var(--cc-text-secondary);
	font-size: .78rem;
}

.profile-editor-inline-toggle span {
	display: grid;
	gap: 2px;
}

.profile-editor-inline-toggle small {
	color: var(--cc-muted);
	font-size: .7rem;
}

.profile-editor-inline-toggle input {
	accent-color: var(--cc-accent);
}

.profile-editor-inline-upload-row,
.profile-editor-inline-color-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.profile-editor-inline-upload,
.profile-editor-inline-color-row .profile-style-control {
	min-height: 36px;
	padding: 0 10px;
	border: 1px solid var(--cc-border) !important;
	border-radius: 8px !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text-secondary) !important;
	cursor: pointer;
	font: inherit;
	font-size: .74rem;
}

.profile-editor-inline-upload:hover,
.profile-editor-inline-upload:focus-visible,
.profile-editor-inline-color-row .profile-style-control:hover,
.profile-editor-inline-color-row .profile-style-control:focus-visible {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.profile-editor-inline-mode-row {
	color: var(--cc-text-secondary);
	font-size: .75rem;
}

.profile-editor-segmented {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--cc-border) !important;
	border-radius: 8px !important;
	background: var(--cc-surface-subtle) !important;
}

.profile-editor-segmented button {
	padding: 5px 9px;
	border: 0 !important;
	border-radius: 5px;
	background: transparent !important;
	color: var(--cc-muted) !important;
	cursor: pointer;
	font: inherit;
	font-size: .7rem;
}

.profile-editor-segmented button.active,
.profile-editor-segmented button:hover,
.profile-editor-segmented button:focus-visible {
	background: var(--cc-surface) !important;
	color: var(--cc-accent) !important;
	box-shadow: var(--cc-shadow-sm);
}

.profile-editor-inline-color-row .profile-style-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-align: left;
}

.profile-editor-inline-actions {
	justify-content: flex-end;
	margin-top: 15px;
	padding-top: 13px;
	border-top: 1px solid var(--cc-border);
}

@keyframes profile-editor-inline-reveal {
	from { opacity: 0; transform: translateY(-3px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
	.profile-editor-preview-column,
	.profile-editor-preview-card {
		width: 100% !important;
		max-width: none !important;
	}

	.profile-editor-inline-upload-row,
	.profile-editor-inline-color-row {
		grid-template-columns: 1fr;
	}

	.profile-editor-inline-mode-row {
		align-items: flex-start;
		flex-direction: column;
	}

	.profile-editor-segmented {
		width: 100%;
	}

	.profile-editor-segmented button {
		flex: 1;
	}
}

.app-shell {
	grid-template-columns: 72px 304px minmax(0, 1fr) !important;
	background: var(--cc-bg) !important;
}

.server-rail,
.sidebar {
	background: var(--cc-surface) !important;
	border-color: var(--cc-border) !important;
	backdrop-filter: none !important;
}

.server-rail-home,
.server-rail-item,
.server-rail-create,
.server-rail-dm-item {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text-secondary) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.server-rail-home:hover,
.server-rail-item:hover,
.server-rail-create:hover,
.server-rail-dm-item:hover,
.server-rail-home.active,
.server-rail-item.active {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
	box-shadow: var(--cc-shadow-md) !important;
}

.server-rail-home.active::after,
.server-rail-item.active::after,
.server-rail-item.has-unread::after {
	background: var(--cc-accent) !important;
}

.server-rail-badge,
.server-rail-dm-badge,
.unread-badge {
	background: var(--cc-accent) !important;
	color: #fff !important;
}

.server-sidebar-banner,
.server-sidebar-dropdown,
.chat-list-context-menu {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text) !important;
	box-shadow: var(--cc-shadow-md) !important;
}

.server-sidebar-banner:hover,
.server-sidebar-banner-shell.open .server-sidebar-banner,
.server-sidebar-dropdown-item:hover,
.context-menu-item:hover {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.sidebar-nav .secondary-button,
.server-channel-item,
.chat-list-item {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--cc-text-secondary) !important;
}

.sidebar-nav .secondary-button:hover,
.sidebar-nav .secondary-button.active,
.server-channel-item:hover,
.chat-list-item:hover {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text) !important;
}

.server-channel-item.active,
.chat-list-item.active {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-text) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.server-channel-item.has-unread::before,
.chat-list-item.has-unread::before {
	background: var(--cc-accent) !important;
}

.server-channel-copy strong,
.chat-title,
.me-text strong {
	color: var(--cc-text) !important;
}

.server-channel-copy small,
.chat-subtitle,
.me-text span {
	color: var(--cc-muted) !important;
}

.me-card {
	border-top-color: var(--cc-border) !important;
}

.me-button:hover,
.userscript-sidebar-panel {
	background: var(--cc-surface-subtle) !important;
}

.main-area,
.friends-view,
.decorations-view,
.admin-view {
	background: var(--cc-bg) !important;
}

.chat-view,
.chat-header,
.message-list-shell,
.message-list {
	background: var(--cc-surface) !important;
}

.chat-header {
	border-bottom-color: var(--cc-border) !important;
}

.chat-header-copy h2,
.chat-header-main > h2,
.section-header h2,
.friends-section h3 {
	color: var(--cc-text) !important;
}

.chat-header-copy p,
.chat-header-main > p,
.section-header p {
	color: var(--cc-muted) !important;
}

.chat-header-actions .secondary-button {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface) !important;
	color: var(--cc-muted) !important;
}

.chat-header-actions .secondary-button:hover,
.chat-header-actions .secondary-button.active {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.chat-message {
	color: var(--cc-text-secondary) !important;
}

.chat-message:hover {
	background: var(--cc-surface-subtle) !important;
	box-shadow: none !important;
}

.chat-message.mentioned-for-you {
	border-color: #fcd34d !important;
	background: #fffbeb !important;
}

.sender-name,
.sender-name-text,
.message-meta .sender-name .styled-username,
.message-content,
.message-markdown {
	color: var(--cc-text-secondary) !important;
}

.sender-name,
.sender-name-text,
.message-meta .sender-name .styled-username {
	color: var(--cc-text) !important;
}

.message-meta span,
.message-read-receipts-label,
.message-delivery-inline {
	color: var(--cc-muted) !important;
}

.message-action-button,
.message-reaction-split-pill {
	border-color: var(--cc-border-strong) !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text-secondary) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.message-action-button:hover,
.message-reaction-split-pill:hover,
.message-reaction-quick-button:hover,
.message-reaction-picker-button:hover {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.message-reply-preview,
.composer-replying,
.composer-pending-attachment,
.composer-tunnel-card {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text-secondary) !important;
}

.composer {
	margin: 0 !important;
	border-top: 1px solid var(--cc-border) !important;
	background: var(--cc-surface) !important;
	backdrop-filter: none !important;
}

.composer-input-shell {
	border-color: var(--cc-border-strong) !important;
	border-radius: 10px !important;
	background: var(--cc-surface) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.composer-input-shell:focus-within {
	border-color: var(--cc-focus) !important;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important;
}

.composer-input-overlay,
.composer-text-input {
	color: var(--cc-text) !important;
}

.composer-upload-button,
.composer-emoji-button {
	background: transparent !important;
	color: var(--cc-muted) !important;
}

.composer-upload-button:hover:not(:disabled),
.composer-emoji-button:hover:not(:disabled) {
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.composer-send-button {
	background: var(--cc-accent) !important;
	color: #fff !important;
}

.composer-send-button:hover:not(:disabled) {
	background: var(--cc-accent-hover) !important;
	color: #fff !important;
}

.friends-section,
.decoration-card,
.admin-access-card,
.admin-access-locked,
.moderation-hero-card,
.moderation-metric-card,
.moderation-list-card,
.tripwire-summary-card,
.admin-user-row,
.tripwire-row,
.settings-card,
.settings-session-card,
.theme-preset-card,
.profile-editor-inspector {
	border: 1px solid var(--cc-border) !important;
	border-radius: 12px !important;
	background: var(--cc-surface) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.profile-card-shell,
.profile-editor-preview-card {
	border-radius: 16px !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.friends-view .friend-row,
.moderation-user-row {
	border-bottom-color: var(--cc-border) !important;
	background: transparent !important;
}

.friends-view .friend-row:hover,
.moderation-user-row:hover,
.admin-user-row:hover,
.tripwire-row:hover {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	box-shadow: var(--cc-shadow-md) !important;
}

.decorations-current-pill,
.decoration-preview-shell,
.decorations-search,
.embers-layout,
.embers-shop-demo {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
}

.decoration-card:hover,
.decoration-card.active {
	border-color: var(--cc-accent-border) !important;
	box-shadow: var(--cc-shadow-md) !important;
}

.embers-gradient-heading {
	background: none !important;
	color: var(--cc-text) !important;
}

.embers-count-text {
	color: var(--cc-accent) !important;
}

.embers-shop-card {
	opacity: 1 !important;
	transform: none !important;
	border-color: var(--cc-border) !important;
	background: var(--cc-surface) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.embers-shop-card:hover {
	transform: translateY(-2px) !important;
	border-color: var(--cc-accent-border) !important;
	box-shadow: var(--cc-shadow-md) !important;
}

.embers-help-button {
	border-color: var(--cc-accent) !important;
	background: var(--cc-accent) !important;
	color: #fff !important;
}

.chat-call-panel,
.group-members-panel,
.server-voice-stage,
.chat-activity-panel,
.group-member-row,
.group-add-friend-row {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text-secondary) !important;
}

.overlay {
	background: rgba(15, 23, 42, 0.42) !important;
}

.modal,
.settings-modal,
.server-manager-modal,
.profile-color-modal,
.profile-nickname-popup {
	border-color: var(--cc-border) !important;
	border-radius: 12px !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text) !important;
	box-shadow: var(--cc-shadow-md) !important;
	backdrop-filter: none !important;
}

.settings-head,
.settings-panel,
.server-manager-panel,
.settings-nav,
.server-manager-nav {
	background: var(--cc-surface) !important;
	border-color: var(--cc-border) !important;
}

.settings-nav,
.server-manager-nav {
	background: var(--cc-surface-subtle) !important;
}

.settings-nav-button {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--cc-text-secondary) !important;
}

.settings-nav-button:hover,
.settings-nav-button.active,
.server-manager-list-item.active {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.settings-close-button,
.settings-nav-icon,
.server-role-preview,
.server-empty-state,
.server-danger-card,
.server-role-chip,
.server-role-toggle {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text-secondary) !important;
}

.settings-close-button:hover,
.server-role-toggle.selected {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.profile-content,
.profile-editor-preview-content {
	color: var(--cc-text) !important;
}

.profile-name,
.profile-description,
.profile-created-at,
.profile-username-note {
	color: var(--cc-text) !important;
}

.profile-created-at,
.profile-username-note,
.profile-mutual-count,
.profile-editor-preview-meta {
	color: var(--cc-muted) !important;
}

.profile-status-bubble {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.admin-token-gate {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface) !important;
	box-shadow: var(--cc-shadow-md) !important;
}

.admin-token-gate-copy h3,
.admin-token-gate-copy p {
	color: var(--cc-text) !important;
}

.admin-token-gate-copy p,
.admin-user-text span,
.tripwire-title-row span,
.tripwire-meta span,
.admin-empty-state span {
	color: var(--cc-muted) !important;
}

.admin-token-input-wrap input,
.admin-search-shell input {
	border-color: var(--cc-border-strong) !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text) !important;
}

.admin-token-submit {
	border-color: var(--cc-accent) !important;
	background: var(--cc-accent) !important;
	color: #fff !important;
}

.admin-badge {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.hover-info-card,
.emoji-picker-surface,
.activities-modal-item,
.inline-invite-card,
.attachment-audio-card,
.attachment-video-card,
.mention-suggestions,
.composer-upload-menu {
	border-color: var(--cc-border) !important;
	border-radius: 10px !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text-secondary) !important;
	box-shadow: var(--cc-shadow-md) !important;
}

.emoji-picker-search input,
.emoji-custom-creator,
.emoji-grid-shell,
.gif-picker-card,
.emoji-grid-item,
.emoji-add-button,
.emoji-section-button,
.composer-picker-tab {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text-secondary) !important;
}

.emoji-add-button.active,
.emoji-section-button.active,
.composer-picker-tab.active {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
	transform: scale(0.98) translateY(0) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

@media (max-width: 900px) {
	.app-shell {
		display: block !important;
		position: relative;
		height: 100dvh;
	}

	.server-rail,
	.sidebar {
		background: var(--cc-surface) !important;
	}

	.mobile-sidebar-backdrop {
		background: rgba(15, 23, 42, 0.32) !important;
	}

	.mobile-sidebar-close,
	.mobile-sidebar-toggle {
		border-color: var(--cc-border) !important;
		border-radius: 8px !important;
		background: var(--cc-surface) !important;
		color: var(--cc-text-secondary) !important;
		box-shadow: var(--cc-shadow-sm) !important;
	}

	.mobile-sidebar-toggle {
		background: var(--cc-accent) !important;
		color: #fff !important;
	}

	.composer {
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

@media (max-width: 720px) {
	.overlay > .modal,
	.overlay > .settings-modal,
	.overlay > .server-manager-modal {
		background: var(--cc-surface) !important;
		color: var(--cc-text) !important;
	}

	.friends-view,
	.decorations-view,
	.admin-view {
		padding: 18px 16px !important;
	}

	.message-list {
		padding: 14px 10px !important;
	}
}

/* Corporate Clean controls, modal layering, and rail overlays */

.server-rail-list {
	overflow-x: hidden !important;
	min-width: 0 !important;
}

.server-rail-tooltip {
	position: fixed !important;
	left: 82px !important;
	transform: translateY(-50%) !important;
	z-index: 700 !important;
	max-width: 220px;
	padding: 8px 11px;
	border: 1px solid var(--cc-border-strong) !important;
	border-radius: 8px !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text) !important;
	box-shadow: var(--cc-shadow-md) !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	pointer-events: none;
}

.server-rail-tooltip::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-left: 1px solid var(--cc-border-strong);
	border-bottom: 1px solid var(--cc-border-strong);
	background: var(--cc-surface);
	transform: translateY(-50%) rotate(45deg);
}

.overlay {
	z-index: 300 !important;
	background: rgba(15, 23, 42, 0.4) !important;
	backdrop-filter: blur(7px) !important;
	-webkit-backdrop-filter: blur(7px) !important;
}

.composer {
	z-index: 1 !important;
}

.settings-modal,
.server-manager-modal,
.modal {
	border-radius: 14px !important;
}

.settings-modal button,
.server-manager-modal button,
.modal button,
.profile-color-modal button {
	min-height: 38px;
	border-radius: 8px !important;
	font-weight: 650;
	letter-spacing: -0.01em;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.settings-modal .primary-button,
.server-manager-modal .primary-button,
.modal .primary-button {
	border-color: var(--cc-accent) !important;
	background: var(--cc-accent) !important;
	color: #fff !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.settings-modal .primary-button:hover:not(:disabled),
.server-manager-modal .primary-button:hover:not(:disabled),
.modal .primary-button:hover:not(:disabled) {
	filter: brightness(0.94);
	box-shadow: var(--cc-shadow-md) !important;
}

.settings-modal .secondary-button,
.server-manager-modal .secondary-button,
.modal .secondary-button,
.settings-close-button {
	border-color: var(--cc-border-strong) !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text-secondary) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.settings-modal .secondary-button:hover:not(:disabled),
.server-manager-modal .secondary-button:hover:not(:disabled),
.modal .secondary-button:hover:not(:disabled),
.settings-close-button:hover {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.settings-nav-button,
.server-manager-nav .settings-nav-button {
	min-height: 44px !important;
	border: 1px solid transparent !important;
	border-radius: 9px !important;
	background: transparent !important;
	color: var(--cc-text-secondary) !important;
	box-shadow: none !important;
	text-align: left;
}

.settings-nav-button:hover,
.settings-nav-button.active,
.server-manager-nav .settings-nav-button:hover,
.server-manager-nav .settings-nav-button.active {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.theme-preset-card {
	min-height: 124px !important;
	padding: 15px !important;
	border: 1px solid var(--cc-border) !important;
	border-radius: 11px !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text-secondary) !important;
	box-shadow: var(--cc-shadow-sm) !important;
	text-align: left !important;
}

.theme-preset-card:hover,
.theme-preset-card.active {
	border-color: var(--cc-accent) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-text) !important;
	box-shadow: var(--cc-shadow-md) !important;
}

.theme-preset-icon {
	border: 1px solid var(--cc-border) !important;
	border-radius: 8px !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-accent) !important;
}

.theme-preset-title,
.theme-preset-description {
	color: inherit !important;
}

.settings-modal input:not([type="checkbox"]):not([type="radio"]),
.settings-modal select,
.settings-modal textarea,
.server-manager-modal input:not([type="checkbox"]):not([type="radio"]),
.server-manager-modal select,
.server-manager-modal textarea {
	min-height: 40px;
	border: 1px solid var(--cc-border-strong) !important;
	border-radius: 8px !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text) !important;
	box-shadow: none !important;
}

.settings-modal input:not([type="checkbox"]):not([type="radio"]):focus,
.settings-modal select:focus,
.settings-modal textarea:focus,
.server-manager-modal input:not([type="checkbox"]):not([type="radio"]):focus,
.server-manager-modal select:focus,
.server-manager-modal textarea:focus {
	border-color: var(--cc-accent) !important;
	box-shadow: 0 0 0 3px var(--cc-accent-soft) !important;
	outline: none !important;
}

.custom-lab-toggle {
	min-height: 44px;
	padding: 9px 11px !important;
	border: 1px solid var(--cc-border) !important;
	border-radius: 9px !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text-secondary) !important;
}

.custom-lab-toggle input[type="checkbox"] {
	appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 23px;
	margin: 0 2px 0 0;
	border: 1px solid var(--cc-border-strong) !important;
	border-radius: 999px !important;
	background: var(--cc-border) !important;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.custom-lab-toggle input[type="checkbox"]::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
	transition: transform 160ms ease;
}

.custom-lab-toggle input[type="checkbox"]:checked {
	border-color: var(--cc-accent) !important;
	background: var(--cc-accent) !important;
}

.custom-lab-toggle input[type="checkbox"]:checked::after {
	transform: translateX(17px);
}

.settings-slider-label input[type="range"] {
	accent-color: var(--cc-accent) !important;
}

.settings-card,
.server-manager-card,
.custom-lab-card {
	border-color: var(--cc-border) !important;
	border-radius: 11px !important;
	background: var(--cc-surface) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.loading-screen {
	background: #07111f !important;
	color: #f8fafc !important;
	}

.loading-screen::before,
.loading-screen::after {
	background: rgba(37, 99, 235, 0.12) !important;
}

.loading-screen-logo,
.loading-screen-title,
.loading-screen-subtitle,
.loading-screen-progress-text,
.loading-screen-lock-panel,
.loading-screen-lock-panel strong,
.loading-screen-lock-panel span {
	color: #f8fafc !important;
}

.loading-screen-progress-track {
	border-color: rgba(148, 163, 184, 0.28) !important;
	background: rgba(15, 23, 42, 0.72) !important;
}

.loading-screen-progress-fill {
	background: #60a5fa !important;
	box-shadow: 0 0 18px rgba(96, 165, 250, 0.42) !important;
}

.loading-screen-lock-panel {
	border-color: rgba(148, 163, 184, 0.26) !important;
	background: rgba(15, 23, 42, 0.72) !important;
}

.loading-screen-lock-input-wrap input {
	border-color: rgba(148, 163, 184, 0.28) !important;
	background: rgba(15, 23, 42, 0.72) !important;
	color: #f8fafc !important;
}

.loading-screen-lock-submit {
	border-color: rgba(148, 163, 184, 0.4) !important;
	background: transparent !important;
	color: #dbeafe !important;
}

@media (max-width: 720px) {
	.server-rail-tooltip {
		display: none !important;
	}
}

/* Server manager — focused workspace treatment */
.server-manager-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1180px, calc(100vw - 40px)) !important;
	max-height: calc(100vh - 40px);
	padding: 0 !important;
	overflow: hidden;
	border-radius: 18px !important;
	animation: server-manager-enter 180ms ease-out both;
}

@keyframes server-manager-enter {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.server-manager-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 24px 20px;
	border-bottom: 1px solid var(--cc-border) !important;
	background: var(--cc-surface) !important;
}

.server-manager-modal > .server-manager-close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 6;
	width: 28px !important;
	height: 28px !important;
	min-height: 28px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #6b7280 !important;
}

.server-manager-modal > .server-manager-close:hover {
	background: #eef4ff !important;
	color: #2563eb !important;
}

.server-manager-topbar-identity,
.server-manager-topbar-meta,
.server-manager-topbar-stats {
	display: flex;
	align-items: center;
}

.server-manager-topbar-identity {
	min-width: 0;
	gap: 14px;
}

.server-manager-icon-frame {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	padding: 3px;
	border: 1px solid var(--cc-border-strong) !important;
	border-radius: 16px;
	background: var(--cc-surface-subtle) !important;
}

.server-manager-icon {
	display: block;
	width: 100%;
	height: 100%;
	border: 0 !important;
	border-radius: 12px;
	object-fit: cover;
}

.server-manager-topbar-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

.server-manager-kicker {
	color: var(--cc-muted);
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

.server-manager-topbar-copy h2 {
	margin: 0;
	max-width: min(36vw, 440px);
	overflow: hidden;
	color: var(--cc-text) !important;
	font-size: 1.25rem;
	font-weight: 760;
	letter-spacing: -0.035em;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.server-manager-topbar-copy > span:last-child {
	color: var(--cc-muted);
	font-size: 0.78rem;
}

.server-manager-topbar-meta {
	flex: 0 0 auto;
	gap: 18px;
}

.server-manager-topbar-stats {
	gap: 18px;
}

.server-manager-topbar-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 58px;
}

.server-manager-topbar-stat strong {
	color: var(--cc-text);
	font-size: 1rem;
	font-weight: 760;
	line-height: 1;
}

.server-manager-topbar-stat span {
	color: var(--cc-muted);
	font-size: 0.68rem;
	font-weight: 650;
	letter-spacing: 0.02em;
}

.server-manager-link-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-left: 16px;
	border-left: 1px solid var(--cc-border);
	color: var(--cc-success, #16805b);
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}

.server-manager-link-status i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.server-manager-close {
	flex: 0 0 auto;
	width: 36px;
	min-height: 36px !important;
	padding: 0 !important;
	border-radius: 9px !important;
}

.server-manager-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cc-border) !important;
	border-radius: 0 !important;
	background: var(--cc-surface-subtle) !important;
}

.server-manager-summary-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cc-muted) !important;
	font-size: 0.76rem;
	font-weight: 700;
}

.server-manager-summary-action:hover {
	color: var(--cc-accent) !important;
}

.server-manager-summary-divider {
	width: 1px;
	height: 14px;
	background: var(--cc-border-strong);
}

.server-manager-summary-context {
	color: var(--cc-text-secondary);
	font-size: 0.76rem;
	font-weight: 700;
}

.server-manager-layout {
	display: flex !important;
	height: min(72vh, 720px) !important;
	min-height: 520px;
	background: var(--cc-surface) !important;
}

.server-manager-nav {
	flex: 0 0 224px;
	width: 224px;
	min-width: 0;
	padding: 22px 12px 18px !important;
	border: 0 !important;
	border-right: 1px solid var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	overflow-y: auto;
}

.server-nav-intro {
	display: flex !important;
	flex-direction: column;
	gap: 5px;
	margin: 0 8px 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--cc-border);
}

.server-nav-intro .settings-eyebrow {
	color: var(--cc-accent) !important;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.server-nav-intro strong {
	color: var(--cc-text);
	font-size: 0.92rem;
	font-weight: 760;
}

.server-nav-group {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 20px;
}

.server-nav-group-label {
	margin: 0 10px 7px;
	color: var(--cc-muted);
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.server-manager-nav .settings-nav-button {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 42px !important;
	padding: 6px 9px !important;
	border: 1px solid transparent !important;
	border-radius: 9px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cc-text-secondary) !important;
}

.server-manager-nav .settings-nav-button:hover {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text) !important;
}

.server-manager-nav .settings-nav-button.active {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.server-manager-nav .settings-nav-icon {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 0 !important;
	border-radius: 7px;
	background: transparent !important;
	color: var(--cc-muted) !important;
	font-size: 0.8rem;
}

.server-manager-nav .settings-nav-button.active .settings-nav-icon,
.server-manager-nav .settings-nav-button:hover .settings-nav-icon {
	color: currentColor !important;
}

.server-manager-nav .settings-nav-copy {
	display: block;
	min-width: 0;
}

.server-manager-nav .settings-nav-copy strong {
	display: block;
	overflow: hidden;
	font-size: 0.8rem;
	font-weight: 720;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.server-manager-nav .settings-nav-copy small {
	display: none;
}

.server-manager-nav .server-nav-count {
	min-width: 22px;
	padding: 3px 6px;
	border: 0 !important;
	border-radius: 999px;
	background: var(--cc-surface) !important;
	color: var(--cc-muted) !important;
	font-size: 0.68rem;
	font-weight: 750;
	text-align: center;
}

.server-manager-nav .settings-nav-button.active .server-nav-count {
	background: var(--cc-accent) !important;
	color: #fff !important;
}

.server-manager-panel {
	flex: 1 1 auto;
	min-width: 0;
	padding: 30px 34px 36px !important;
	background: var(--cc-surface) !important;
	overflow-y: auto;
}

.server-manager-panel > .muted-text {
	margin: 0;
	color: var(--cc-muted);
}

.server-section-stack {
	gap: 22px !important;
	max-width: 900px;
}

.server-manager-panel .server-manager-card {
	padding: 0 !important;
	border: 1px solid var(--cc-border) !important;
	border-radius: 12px !important;
	background: var(--cc-surface) !important;
	box-shadow: none !important;
}

.server-manager-panel .server-section-head {
	gap: 12px;
	padding: 20px 22px 16px;
	border-bottom: 1px solid var(--cc-border);
}

.server-manager-panel .server-section-head h3 {
	margin: 0;
	color: var(--cc-text) !important;
	font-size: 1rem;
	font-weight: 760;
	letter-spacing: -0.018em;
}

.server-manager-panel .server-section-head .settings-note {
	max-width: 620px;
	margin-top: 5px;
	font-size: 0.78rem;
}

.server-manager-panel .server-overview-card {
	border-color: var(--cc-accent-border) !important;
	background: linear-gradient(180deg, var(--cc-accent-soft), var(--cc-surface) 38%) !important;
}

.server-manager-panel .server-overview-card .server-section-head,
.server-manager-panel .server-overview-card .server-overview-hero,
.server-manager-panel .server-overview-card .server-overview-grid,
.server-manager-panel .server-overview-card .upload-preview-wrap,
.server-manager-panel .server-overview-card .modal-actions {
	margin-inline: 22px;
}

.server-manager-panel .server-overview-card .server-section-head {
	margin-inline: 0;
}

.server-manager-panel .server-overview-hero {
	margin-top: 18px;
	border: 1px solid var(--cc-border) !important;
	border-radius: 11px;
	background: var(--cc-surface) !important;
}

.server-manager-panel .server-overview-grid {
	margin-top: 16px;
}

.server-manager-panel .server-overview-card .modal-actions {
	margin-top: 18px;
	margin-bottom: 20px;
}

.server-manager-panel .server-overview-stats,
.server-manager-panel .server-danger-card {
	background: var(--cc-surface) !important;
}

.server-manager-panel .server-overview-stat-grid,
.server-manager-panel .server-permission-list,
.server-manager-panel .server-role-permissions,
.server-manager-panel .server-member-list,
.server-manager-panel .server-ban-list,
.server-manager-panel .server-invite-link-row {
	margin: 18px 22px 22px;
}

.server-manager-panel .server-overview-stat {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
}

.server-manager-panel .server-inline-form,
.server-manager-panel .server-permission-toolbar,
.server-manager-panel .server-member-toolbar,
.server-manager-panel .server-moderation-toolbar,
.server-manager-panel .server-role-header-fields,
.server-manager-panel .server-role-preview,
.server-manager-panel .server-manager-card > .modal-actions,
.server-manager-panel .server-manager-card > .server-empty-state,
.server-manager-panel .server-manager-card > p.settings-note {
	margin-inline: 22px;
}

.server-manager-panel .server-inline-form,
.server-manager-panel .server-permission-toolbar,
.server-manager-panel .server-member-toolbar,
.server-manager-panel .server-moderation-toolbar {
	margin-top: 18px;
	margin-bottom: 22px;
}

.server-manager-panel .server-manager-split {
	gap: 18px;
}

.server-manager-panel .server-manager-split > .server-manager-card {
	min-width: 0;
}

.server-manager-panel .server-manager-list {
	padding: 8px 10px 10px;
}

.server-manager-panel .server-manager-list-item {
	min-height: 48px;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cc-text-secondary) !important;
}

.server-manager-panel .server-manager-list-item:hover {
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text) !important;
}

.server-manager-panel .server-manager-list-item.active {
	border-color: var(--cc-accent-border) !important;
	background: var(--cc-accent-soft) !important;
	color: var(--cc-accent) !important;
}

.server-manager-panel .server-permission-row,
.server-manager-panel .server-member-card,
.server-manager-panel .server-ban-card,
.server-manager-panel .server-checkbox-row {
	border-color: var(--cc-border) !important;
}

.server-manager-panel .server-member-list,
.server-manager-panel .server-ban-list {
	border-top: 1px solid var(--cc-border);
}

.server-manager-panel .server-empty-state {
	margin-top: 18px;
	margin-bottom: 22px;
	border: 1px dashed var(--cc-border-strong) !important;
	border-radius: 9px !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-muted) !important;
}

.server-manager-panel .server-danger-card {
	border-color: color-mix(in srgb, var(--cc-danger) 28%, var(--cc-border) 72%) !important;
}

.server-manager-panel .server-danger-row {
	padding: 16px 22px;
	border-bottom-color: var(--cc-border) !important;
}

.server-manager-panel .server-danger-row:last-child {
	border-bottom: 0;
}

.server-manager-panel .server-invite-summary {
	margin: 18px 22px 0;
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
}

.server-manager-panel .server-invite-link-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.server-manager-panel .server-role-preview {
	margin-top: 16px;
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
}

@media (max-width: 820px) {
	.server-manager-modal {
		width: min(720px, calc(100vw - 24px)) !important;
		max-height: calc(100vh - 24px);
	}

	.server-manager-topbar {
		align-items: flex-start;
		padding: 18px;
	}

	.server-manager-modal > .server-manager-close {
		top: 16px;
		right: 16px;
	}

	.server-manager-topbar-meta {
		gap: 10px;
	}

	.server-manager-topbar-stats {
		gap: 10px;
	}

	.server-manager-topbar-stat {
		min-width: 45px;
	}

	.server-manager-link-status {
		display: none;
	}

	.server-manager-summary {
		padding-inline: 18px !important;
	}

	.server-manager-layout {
		display: flex !important;
		flex-direction: column;
		height: min(76vh, 720px) !important;
		min-height: 0;
	}

	.server-manager-nav {
		flex: 0 0 auto;
		width: auto;
		padding: 10px 12px !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--cc-border) !important;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.server-nav-intro,
	.server-nav-group-label {
		display: none !important;
	}

	.server-nav-group {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 4px;
		margin: 0;
	}

	.server-manager-nav .settings-nav-button {
		width: auto;
		min-width: max-content;
		grid-template-columns: 26px auto auto;
		padding-inline: 8px !important;
	}

	.server-manager-nav .settings-nav-icon {
		width: 26px;
		height: 26px;
	}

	.server-manager-panel {
		padding: 22px 18px 28px !important;
	}
}

@media (max-width: 560px) {
	.server-manager-modal {
		width: 100vw !important;
		max-height: 100vh;
		border: 0 !important;
		border-radius: 0 !important;
	}

	.server-manager-topbar {
		flex-wrap: wrap;
		gap: 16px;
	}

	.server-manager-topbar-copy h2 {
		max-width: 62vw;
		font-size: 1.08rem;
	}

	.server-manager-topbar-meta {
		width: 100%;
		justify-content: space-between;
	}

	.server-manager-summary {
		min-height: 38px;
	}

	.server-manager-panel .server-manager-split,
	.server-manager-panel .server-overview-grid {
		grid-template-columns: 1fr;
	}

	.server-manager-panel .server-overview-card .server-overview-hero,
	.server-manager-panel .server-overview-card .server-overview-grid,
	.server-manager-panel .server-overview-card .upload-preview-wrap,
	.server-manager-panel .server-overview-card .modal-actions,
	.server-manager-panel .server-overview-stat-grid,
	.server-manager-panel .server-permission-list,
	.server-manager-panel .server-role-permissions,
	.server-manager-panel .server-member-list,
	.server-manager-panel .server-ban-list,
	.server-manager-panel .server-invite-link-row,
	.server-manager-panel .server-inline-form,
	.server-manager-panel .server-permission-toolbar,
	.server-manager-panel .server-member-toolbar,
	.server-manager-panel .server-moderation-toolbar,
	.server-manager-panel .server-role-header-fields,
	.server-manager-panel .server-role-preview,
	.server-manager-panel .server-manager-card > .modal-actions,
	.server-manager-panel .server-manager-card > .server-empty-state,
	.server-manager-panel .server-manager-card > p.settings-note {
		margin-inline: 16px;
	}

	.server-manager-panel .server-section-head {
		padding-inline: 16px;
	}

	.server-manager-panel .server-danger-row {
		padding-inline: 16px;
	}

	.server-manager-panel .server-invite-summary {
		margin-inline: 16px;
	}

	.server-manager-panel .server-overview-stat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.server-manager-panel .server-overview-stat {
		padding-inline: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.server-manager-modal {
		animation: none;
	}
}

/* Reference-aligned modal system: quiet surfaces, a slim navigation rail,
   and content-led settings pages. */
.overlay {
	background: rgba(81, 87, 99, 0.62) !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
}

.settings-modal,
.server-manager-modal {
	border: 1px solid #dfe3e8 !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16) !important;
	color: #1f2937 !important;
}

.settings-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, calc(100vw - 40px)) !important;
	height: min(600px, calc(100vh - 48px));
	max-height: calc(100vh - 48px);
	padding: 0 !important;
	overflow: hidden;
	animation: reference-modal-enter 160ms ease-out both;
}

.server-manager-modal {
	display: flex;
	flex-direction: column;
	width: min(1040px, calc(100vw - 40px)) !important;
	max-height: calc(100vh - 40px);
	padding: 0 !important;
	overflow: hidden;
}

@keyframes reference-modal-enter {
	from { opacity: 0; transform: translateY(6px) scale(0.99); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.settings-head {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	display: block;
	width: 50%;
	height: 64px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	pointer-events: none;
}

.settings-head > div:first-child,
.settings-head-user {
	display: none !important;
}

.settings-head .settings-close-button {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 28px;
	height: 28px;
	min-height: 28px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #6b7280 !important;
	pointer-events: auto;
}

.settings-head .settings-close-button:hover {
	background: #eef4ff !important;
	color: #2563eb !important;
}

.settings-layout {
	display: grid !important;
	grid-template-columns: 220px minmax(0, 1fr) !important;
	gap: 0 !important;
	height: 100% !important;
	min-height: 0 !important;
	background: #ffffff !important;
}

.settings-nav,
.server-manager-nav {
	min-width: 0;
	padding: 28px 11px 20px !important;
	border: 0 !important;
	border-right: 1px solid #e0e4e9 !important;
	background: #f8f9fb !important;
}

.settings-nav-brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 10px 28px;
}

.settings-nav-brand h2 {
	margin: 0;
	color: #1f2937 !important;
	font-size: 1.02rem;
	font-weight: 760;
	letter-spacing: -0.025em;
}

.settings-nav-brand span {
	color: #8791a1;
	font-size: 0.69rem;
}

.settings-nav-group,
.server-nav-group {
	gap: 2px !important;
	margin: 0 0 17px !important;
}

.settings-nav-label,
.server-nav-group-label {
	margin: 0 10px 6px !important;
	padding: 0 !important;
	color: #8a94a3 !important;
	font-size: 0.64rem !important;
	font-weight: 750 !important;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.settings-nav-button,
.server-manager-nav .settings-nav-button {
	min-height: 36px !important;
	padding: 5px 9px !important;
	border: 1px solid transparent !important;
	border-radius: 7px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #4a596f !important;
	font-weight: 500 !important;
}

.settings-nav-button:hover,
.server-manager-nav .settings-nav-button:hover {
	border-color: transparent !important;
	background: #eef2f7 !important;
	color: #26364e !important;
}

.settings-nav-button.active,
.server-manager-nav .settings-nav-button.active {
	border-color: transparent !important;
	background: #e8f1ff !important;
	color: #1f5edc !important;
}

.settings-nav-icon,
.server-manager-nav .settings-nav-icon {
	width: 28px !important;
	height: 28px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: #728096 !important;
	font-size: 0.78rem !important;
}

.settings-nav-button.active .settings-nav-icon,
.server-manager-nav .settings-nav-button.active .settings-nav-icon,
.settings-nav-button:hover .settings-nav-icon,
.server-manager-nav .settings-nav-button:hover .settings-nav-icon {
	color: currentColor !important;
}

.settings-nav-copy strong,
.server-manager-nav .settings-nav-copy strong {
	font-size: 0.78rem !important;
	font-weight: 620 !important;
	letter-spacing: 0 !important;
}

.settings-nav-copy small,
.server-manager-nav .settings-nav-copy small {
	display: none !important;
}

.settings-nav-group-secondary {
	margin-top: auto !important;
	padding-top: 14px !important;
	border-top: 1px solid #e2e6eb !important;
}

.settings-panel,
.server-manager-panel {
	min-width: 0;
	padding: 42px 28px 30px !important;
	background: #ffffff !important;
	color: #1f2937 !important;
	overflow-y: auto;
}

.settings-panel-intro {
	margin: 0 0 2px !important;
	padding: 4px 0 18px !important;
	border: 0 !important;
}

.settings-panel-intro .settings-eyebrow {
	display: none;
}

.settings-panel-intro h3 {
	margin: 0 !important;
	color: #1f2937 !important;
	font-size: 1.35rem !important;
	font-weight: 670 !important;
	letter-spacing: -0.035em !important;
	text-transform: none !important;
}

.settings-panel-intro p {
	max-width: 560px;
	margin: 7px 0 0 !important;
	color: #778295 !important;
	font-size: 0.76rem !important;
	line-height: 1.45 !important;
}

.settings-stack,
.server-section-stack {
	gap: 0 !important;
}

.settings-card,
.settings-card:last-child {
	display: flex;
	gap: 8px;
	margin: 0 !important;
	padding: 16px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #e1e5ea !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.settings-card:last-child {
	border-bottom: 0 !important;
}

.settings-card > h3,
.settings-card h3,
.settings-panel h3 {
	margin: 0 !important;
	color: #202938 !important;
	font-size: 0.9rem !important;
	font-weight: 670 !important;
	letter-spacing: -0.012em !important;
	text-transform: none !important;
}

.settings-note,
.settings-card .settings-note {
	margin: 0 !important;
	color: #788397 !important;
	font-size: 0.74rem !important;
	line-height: 1.42 !important;
}

.settings-modal input:not([type="checkbox"]):not([type="radio"]),
.settings-modal select,
.settings-modal textarea,
.server-manager-modal input:not([type="checkbox"]):not([type="radio"]),
.server-manager-modal select,
.server-manager-modal textarea {
	min-height: 38px;
	border: 1px solid #d5dbe3 !important;
	border-radius: 7px !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #263247 !important;
	font-size: 0.78rem;
}

.settings-modal input:not([type="checkbox"]):not([type="radio"]):focus,
.settings-modal select:focus,
.settings-modal textarea:focus,
.server-manager-modal input:not([type="checkbox"]):not([type="radio"]):focus,
.server-manager-modal select:focus,
	.server-manager-modal textarea:focus {
	border-color: #7aa8f5 !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
	outline: none !important;
}

.settings-modal button,
.server-manager-modal button {
	border-radius: 7px !important;
	font-size: 0.76rem;
	font-weight: 650;
}

.settings-modal .primary-button,
.server-manager-modal .primary-button {
	border-color: #2563eb !important;
	background: #2563eb !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

.settings-modal .primary-button:hover:not(:disabled),
.server-manager-modal .primary-button:hover:not(:disabled) {
	border-color: #1d4ed8 !important;
	background: #1d4ed8 !important;
	box-shadow: none !important;
	filter: none;
}

.settings-modal .secondary-button,
.server-manager-modal .secondary-button,
.settings-modal .danger-button,
.server-manager-modal .danger-button {
	border-color: #d5dbe3 !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #536177 !important;
}

.settings-modal .secondary-button:hover:not(:disabled),
.server-manager-modal .secondary-button:hover:not(:disabled) {
	border-color: #abc7f6 !important;
	background: #f2f6ff !important;
	color: #1f5edc !important;
}

.settings-modal .danger-button,
.server-manager-modal .danger-button {
	border-color: #f0c9c9 !important;
	color: #b42318 !important;
}

.settings-modal .danger-button:hover:not(:disabled),
.server-manager-modal .danger-button:hover:not(:disabled) {
	border-color: #e9a5a5 !important;
	background: #fff6f6 !important;
	color: #a61b1b !important;
}

.settings-modal .modal-actions,
.server-manager-modal .modal-actions {
	gap: 8px;
	padding-top: 4px;
}

.settings-modal .custom-lab-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
	margin-top: 3px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #536177 !important;
	font-size: 0.76rem;
}

.settings-modal .custom-lab-toggle input[type="checkbox"] {
	order: 2;
	width: 38px;
	height: 22px;
	margin: 0;
	border-color: #cfd5de !important;
	background: #cfd5de !important;
}

.settings-modal .custom-lab-toggle input[type="checkbox"]:checked {
	border-color: #2563eb !important;
	background: #2563eb !important;
}

.settings-modal .settings-session-card,
.settings-modal .theme-preset-card,
.settings-modal .dev-log-entry-card {
	border-color: #e1e5ea !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

.settings-modal .theme-preset-card:hover,
.settings-modal .theme-preset-card.active,
.settings-modal .dev-log-entry-card:hover {
	border-color: #aecaf7 !important;
	background: #f5f8ff !important;
	box-shadow: none !important;
}

/* Server Manager uses the same reference shell, with its server identity as
   the compact header and its controls presented as sections rather than tiles. */
.server-manager-topbar {
	gap: 24px;
	min-height: 76px;
	padding: 14px 22px !important;
	border-bottom: 1px solid #e0e4e9 !important;
	background: #ffffff !important;
}

.server-manager-topbar-copy h2 {
	color: #1f2937 !important;
	font-size: 1.06rem !important;
	font-weight: 690 !important;
	letter-spacing: -0.025em !important;
}

.server-manager-kicker {
	color: #8791a1 !important;
	font-size: 0.64rem !important;
}

.server-manager-topbar-copy > span:last-child,
.server-manager-topbar-stat span {
	color: #7d899b !important;
}

.server-manager-topbar-stat strong {
	color: #263247 !important;
	font-size: 0.88rem !important;
}

.server-manager-summary {
	display: none !important;
}

.server-manager-layout {
	height: min(76vh, 660px) !important;
	min-height: 520px;
	background: #ffffff !important;
}

.server-manager-nav {
	flex: 0 0 220px;
	width: 220px;
	padding: 28px 11px 20px !important;
	background: #f8f9fb !important;
}

.server-manager-nav .server-nav-intro {
	margin: 0 10px 28px !important;
	padding: 0 0 0 !important;
	border: 0 !important;
}

.server-manager-nav .server-nav-intro .settings-eyebrow {
	color: #2563eb !important;
	font-size: 0.64rem !important;
}

.server-manager-nav .server-nav-intro strong {
	color: #1f2937 !important;
	font-size: 1.02rem !important;
	font-weight: 760 !important;
}

.server-manager-panel {
	padding: 36px 32px 34px !important;
	background: #ffffff !important;
}

.server-manager-panel .server-manager-card,
.server-manager-panel .server-overview-card,
.server-manager-panel .server-danger-card {
	margin: 0 !important;
	padding: 0 0 22px !important;
	border: 0 !important;
	border-bottom: 1px solid #e1e5ea !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.server-manager-panel .server-section-head {
	margin: 0 0 17px !important;
	padding: 0 !important;
	border: 0 !important;
}

.server-manager-panel .server-section-head h3 {
	color: #202938 !important;
	font-size: 0.94rem !important;
	font-weight: 680 !important;
}

.server-manager-panel .server-section-head .settings-note {
	margin-top: 5px !important;
	color: #788397 !important;
	font-size: 0.74rem !important;
}

.server-manager-panel .server-section-stack > .server-manager-card + .server-manager-card,
.server-manager-panel .server-section-stack > .server-danger-card {
	margin-top: 22px !important;
}

.server-manager-panel .server-overview-card .server-section-head,
.server-manager-panel .server-overview-card .server-overview-hero,
.server-manager-panel .server-overview-card .server-overview-grid,
.server-manager-panel .server-overview-card .upload-preview-wrap,
.server-manager-panel .server-overview-card .modal-actions {
	margin-inline: 0 !important;
}

.server-manager-panel .server-overview-hero,
.server-manager-panel .server-role-preview,
.server-manager-panel .server-invite-summary,
.server-manager-panel .server-empty-state {
	border-color: #e1e5ea !important;
	border-radius: 8px !important;
	background: #f8f9fb !important;
	box-shadow: none !important;
}

.server-manager-panel .server-overview-stat-grid,
.server-manager-panel .server-permission-list,
.server-manager-panel .server-role-permissions,
.server-manager-panel .server-member-list,
.server-manager-panel .server-ban-list,
.server-manager-panel .server-invite-link-row,
.server-manager-panel .server-inline-form,
.server-manager-panel .server-permission-toolbar,
.server-manager-panel .server-member-toolbar,
.server-manager-panel .server-moderation-toolbar,
.server-manager-panel .server-role-header-fields,
.server-manager-panel .server-role-preview,
.server-manager-panel .server-invite-summary,
.server-manager-panel .server-manager-card > .modal-actions,
.server-manager-panel .server-manager-card > .server-empty-state,
.server-manager-panel .server-manager-card > p.settings-note {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.server-manager-panel .server-overview-stats {
	padding-bottom: 22px !important;
}

.server-manager-panel .server-overview-stat {
	border-color: #e1e5ea !important;
	border-radius: 8px !important;
	background: #f8f9fb !important;
}

.server-manager-panel .server-manager-split {
	gap: 32px !important;
}

.server-manager-panel .server-manager-split > .server-manager-card {
	padding-bottom: 0 !important;
	border-bottom: 0 !important;
}

.server-manager-panel .server-manager-list {
	padding: 0 !important;
}

.server-manager-panel .server-manager-list-item {
	min-height: 42px;
	padding: 5px 8px !important;
	border: 1px solid transparent !important;
	border-radius: 7px !important;
	background: transparent !important;
	box-shadow: none !important;
}

.server-manager-panel .server-manager-list-item:hover {
	border-color: transparent !important;
	background: #f1f4f8 !important;
}

.server-manager-panel .server-manager-list-item.active {
	border-color: transparent !important;
	background: #e8f1ff !important;
	color: #1f5edc !important;
}

.server-manager-panel .server-permission-row,
.server-manager-panel .server-member-card,
.server-manager-panel .server-ban-card,
.server-manager-panel .server-checkbox-row {
	border-color: #e1e5ea !important;
}

.server-manager-panel .server-danger-row {
	padding: 14px 0 !important;
	border-bottom-color: #e1e5ea !important;
}

.server-manager-panel .server-danger-card {
	border-bottom: 0 !important;
}

@media (max-width: 720px) {
	.settings-modal,
	.server-manager-modal {
		width: calc(100vw - 20px) !important;
		max-height: calc(100vh - 20px);
		border-radius: 10px !important;
	}

	.settings-modal {
		height: calc(100vh - 20px);
	}

	.settings-head {
		width: 100%;
	}

	.settings-layout {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto minmax(0, 1fr);
	}

	.settings-nav,
	.server-manager-nav {
		display: flex !important;
		flex-direction: row;
		align-items: stretch;
		gap: 5px !important;
		width: 100%;
		padding: 10px 12px !important;
		border-right: 0 !important;
		border-bottom: 1px solid #e0e4e9 !important;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.settings-nav-brand,
	.settings-nav-label,
	.server-manager-nav .server-nav-intro,
	.server-nav-group-label {
		display: none !important;
	}

	.settings-nav-group,
	.server-nav-group,
	.settings-nav-group-secondary {
		display: contents !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.settings-nav-button,
	.server-manager-nav .settings-nav-button {
		flex: 0 0 auto;
		min-width: max-content;
		min-height: 34px !important;
		grid-template-columns: 26px auto auto;
		padding: 4px 8px !important;
	}

	.settings-panel,
	.server-manager-panel {
		padding: 28px 18px 26px !important;
	}

	.server-manager-modal {
		max-height: calc(100vh - 20px);
	}

	.server-manager-topbar {
		flex-wrap: wrap;
		min-height: 0;
		padding: 14px 16px !important;
	}

	.server-manager-topbar-meta {
		width: 100%;
		justify-content: space-between;
	}

	.server-manager-layout {
		height: auto !important;
		min-height: 0;
	}

	.server-manager-panel .server-manager-split {
		grid-template-columns: 1fr;
		gap: 22px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.settings-modal {
		animation: none;
	}
}

/* Server manager phase 1: focused identity surface and action flow. */
.server-manager-modal,
.server-manager-layout,
.server-manager-panel {
	background: var(--cc-surface) !important;
	color: var(--cc-text) !important;
}

.server-manager-nav {
	background: var(--cc-surface-subtle) !important;
	border-right-color: var(--cc-border) !important;
}

.server-manager-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 56px !important;
	overflow-y: auto;
}

.server-manager-panel > .server-section-stack {
	width: min(100%, 560px);
}

.server-overview-minimal {
	border-bottom: 1px solid var(--cc-border) !important;
	padding: 8px 0 42px !important;
}

.server-overview-identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.server-overview-avatar-edit {
	position: relative;
	display: block;
	width: 128px;
	height: 128px;
	overflow: hidden;
	border-radius: 32px;
	background: var(--cc-surface-subtle);
	box-shadow: 0 16px 30px color-mix(in srgb, var(--cc-text) 12%, transparent);
	cursor: pointer;
}

.server-overview-avatar-edit img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.server-overview-avatar-edit input {
	position: absolute;
	width: 1px;
	height: 1px;
	op: -10px;
	left: -10px;
	opacity: 0;
}

.server-overview-avatar-hover {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, #000 55%, transparent);
	color: #fff;
	opacity: 0;
	transition: opacity 160ms ease;
}

.server-overview-avatar-edit:hover .server-overview-avatar-hover,
.server-overview-avatar-edit:focus-within .server-overview-avatar-hover {
	opacity: 1;
}

.server-overview-name-input {
	width: min(100%, 180px);
	padding: 0 8px 7px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cc-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--cc-text) !important;
	font-size: 1.35rem;
	font-weight: 720;
	text-align: center;
	box-shadow: none !important;
}

.server-overview-name-input:focus {
	border-bottom-color: var(--cc-accent) !important;
	outline: 0;
}

.server-overview-save-row {
	display: flex;
	justify-content: center;
}

.server-overview-actions {
	display: flex;
	flex-direction: column;
	padding-top: 22px;
}

.server-overview-action-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 56px !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cc-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--cc-text) !important;
	font-size: .92rem;
	font-weight: 650;
	text-align: left;
	box-shadow: none !important;
}

.server-overview-action-row:hover {
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-accent) !important;
}

.server-overview-action-row.is-danger:hover {
	color: #ef4444 !important;
}

.server-overview-action-row i {
	color: var(--cc-muted);
	font-size: .82rem;
}

.server-action-modal {
	position: relative;
	z-index: 1201 !important;
	pointer-events: auto !important;
	width: min(440px, calc(100vw - 32px)) !important;
	padding: 30px !important;
	background: var(--cc-surface) !important;
	color: var(--cc-text) !important;
	border: 1px solid var(--cc-border) !important;
	box-shadow: var(--cc-shadow-md) !important;
	overflow: hidden;
}

.server-action-heading h2 {
	margin: 4px 0 8px;
	color: var(--cc-text);
	font-size: 1.28rem;
}

.server-action-eyebrow {
	color: var(--cc-accent);
	font-size: .68rem;
	font-weight: 760;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.server-action-eyebrow.danger { color: #ef4444; }
.server-action-modal input[type="search"],
.server-action-password-field input {
	width: 100%;
	border-color: var(--cc-border) !important;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-text) !important;
}

.server-transfer-member-list {
	display: flex;
	flex-direction: column;
	max-height: 280px;
	margin: 16px 0;
	overflow-y: auto;
}

.server-transfer-member {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 54px !important;
	padding: 8px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cc-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--cc-text) !important;
	text-align: left;
}

.server-transfer-member span { flex: 1; }
.server-transfer-member i { color: var(--cc-muted); }
.server-transfer-member:hover { background: var(--cc-surface-subtle) !important; color: var(--cc-accent) !important; }
.server-action-cancel { width: 100%; }
.server-action-password-field { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; color: var(--cc-text-secondary); font-size: .78rem; font-weight: 650; }
.server-action-modal .modal-actions { margin-top: 24px; }

/* Keep channel/icon surfaces tied to the active theme instead of the legacy
   light palette. */
.server-channel-item .server-channel-icon,
.server-channel-item.active .server-channel-icon,
.server-channel-item:hover .server-channel-icon {
	background: var(--cc-bg) !important;
	color: var(--cc-text-secondary) !important;
}

.server-channel-item.active .server-channel-icon {
	color: var(--cc-accent) !important;
}

button,
input,
select,
textarea {
	accent-color: var(--cc-accent);
}

.server-manager-modal button:not(.server-overview-action-row):not(.server-transfer-member),
.modal button:not(.server-overview-action-row):not(.server-transfer-member) {
	background-color: var(--cc-surface) !important;
	color: var(--cc-text-secondary) !important;
}

.server-manager-modal .primary-button,
.modal .primary-button {
	background-color: var(--cc-accent) !important;
	color: #fff !important;
}

.server-manager-modal .danger-button,
.modal .danger-button {
	background-color: #ef4444 !important;
	color: #fff !important;
}

.server-action-sliding-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.server-action-sliding-content {
	display: flex;
	position: relative;
	width: 200%;
	min-height: 350px;
	overflow: visible;
	isolation: isolate;
	transform: translateX(0);
	transition: transform 280ms cubic-bezier(.22, .8, .24, 1);
}

.server-action-step {
	position: relative;
	flex: 0 0 50%;
	width: auto;
	min-width: 0;
	box-sizing: border-box;
	transition: opacity 180ms ease;
	z-index: 1;
}

.server-action-members-step {
	opacity: 1;
}

.server-action-password-step {
	opacity: 1;
	pointer-events: none;
}

.server-action-sliding-content.show-password .server-action-members-step {
	pointer-events: none;
}

.server-action-sliding-content.show-password .server-action-password-step {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	z-index: 2;
}

.server-action-sliding-content.show-password {
	transform: translateX(-50%);
}

.server-action-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 1200 !important;
	pointer-events: auto !important;
}

/* Keep only the visible step in the hit-testing tree. The previous translated
   two-panel track could leave an invisible panel over the active controls. */
.server-action-sliding-viewport {
	position: relative !important;
	width: 100% !important;
	overflow: hidden !important;
}

.server-action-sliding-content {
	display: block !important;
	width: 100% !important;
	min-height: 350px !important;
	transform: none !important;
	overflow: visible !important;
}

.server-action-step {
	display: none !important;
	position: relative !important;
	width: 100% !important;
	transform: none !important;
	opacity: 1 !important;
}

.server-action-sliding-content.show-members .server-action-members-step,
.server-action-sliding-content.show-password .server-action-password-step {
	display: block !important;
	animation: server-action-step-enter 220ms ease-out both;
}

.server-action-sliding-content.show-members .server-action-password-step,
.server-action-sliding-content.show-password .server-action-members-step {
	display: none !important;
	pointer-events: none !important;
}

@keyframes server-action-step-enter {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: 1; transform: translateX(0); }
}

.server-transfer-member .decorated-avatar {
	flex: 0 0 36px !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
}

.server-transfer-member .decorated-avatar-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

@media (max-width: 720px) {
	.server-manager-panel { padding: 36px 20px !important; }
	.server-overview-avatar-edit { width: 112px; height: 112px; }
}

/* The manager sections are intentionally flat in the markup. */
.server-manager-panel .server-manager-section {
	min-width: 0;
	margin: 0 !important;
	padding: 0 0 22px !important;
	border: 0 !important;
	border-bottom: 1px solid #e1e5ea !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.server-manager-panel .server-manager-section + .server-manager-section,
.server-manager-panel .server-section-stack > .server-manager-section + .server-manager-section {
	margin-top: 22px !important;
}

.server-manager-panel .server-manager-section .server-section-head {
	margin: 0 0 17px !important;
	padding: 0 !important;
	border: 0 !important;
}

.server-manager-panel .server-manager-section .server-overview-hero,
.server-manager-panel .server-manager-section .server-overview-stats {
	display: none !important;
}

.server-manager-panel .server-manager-section > .modal-actions,
.server-manager-panel .server-manager-section > .server-inline-form,
.server-manager-panel .server-manager-section > .server-member-toolbar,
.server-manager-panel .server-manager-section > .server-permission-toolbar,
.server-manager-panel .server-manager-section > .server-role-header-fields,
.server-manager-panel .server-manager-section > .server-role-preview,
.server-manager-panel .server-manager-section > .server-role-permissions,
.server-manager-panel .server-manager-section > .server-manager-list,
.server-manager-panel .server-manager-section > .server-member-list,
.server-manager-panel .server-manager-section > .server-ban-list,
.server-manager-panel .server-manager-section > .server-invite-summary,
.server-manager-panel .server-manager-section > .server-invite-link-row,
.server-manager-panel .server-manager-section > .server-empty-state,
.server-manager-panel .server-manager-section > p.settings-note {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.server-manager-panel .server-manager-section .server-manager-list {
	padding: 0 !important;
}

.server-manager-panel .server-manager-section .server-manager-list-item {
	min-height: 42px;
	border: 1px solid transparent !important;
	border-radius: 7px !important;
	background: transparent !important;
	box-shadow: none !important;
}

.server-manager-panel .server-manager-section .server-manager-list-item:hover {
	background: #f1f4f8 !important;
}

.server-manager-panel .server-manager-section .server-manager-list-item.active {
	background: #e8f1ff !important;
	color: #1f5edc !important;
}

/* Fidelity pass: mirror the reference shell instead of merely recoloring the
   existing dashboard layouts. */
.settings-nav-brand {
	margin-bottom: 24px !important;
}

.settings-nav-label,
.server-nav-group-label,
.settings-nav-group-secondary .settings-nav-label {
	display: none !important;
}

.settings-nav-group,
.settings-nav-group-secondary,
.server-nav-group {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.settings-nav-group-secondary {
	margin-top: 0 !important;
}

.settings-nav,
.server-manager-nav {
	gap: 2px !important;
}

.settings-nav-button,
.server-manager-nav .settings-nav-button {
	min-height: 35px !important;
}

.server-manager-modal {
	position: relative;
	width: min(760px, calc(100vw - 40px)) !important;
	height: min(600px, calc(100vh - 48px));
	max-height: calc(100vh - 48px);
	border-radius: 12px !important;
}

.server-manager-topbar {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	display: block;
	width: calc(100% - 220px);
	min-height: 0;
	height: 64px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	pointer-events: none;
}

.server-manager-topbar-identity,
.server-manager-topbar-stats,
.server-manager-link-status,
.server-manager-summary {
	display: none !important;
}

.server-manager-topbar-meta {
	position: absolute;
	top: 18px;
	right: 18px;
	display: block;
	pointer-events: auto;
}

.server-manager-close {
	width: 28px !important;
	height: 28px !important;
	min-height: 28px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #6b7280 !important;
}

.server-manager-close:hover {
	background: #eef4ff !important;
	color: #2563eb !important;
}

.server-manager-layout {
	display: grid !important;
	grid-template-columns: 220px minmax(0, 1fr) !important;
	height: 100% !important;
	min-height: 0 !important;
}

.server-manager-nav {
	width: auto;
	height: 100%;
	padding-top: 28px !important;
}

.server-manager-nav .server-nav-intro {
	display: flex !important;
	flex-direction: column;
	gap: 4px;
	margin: 0 10px 24px !important;
	padding: 0 !important;
}

.server-manager-nav .server-nav-intro h2 {
	margin: 0;
	color: #1f2937 !important;
	font-size: 1.02rem;
	font-weight: 760;
	letter-spacing: -0.025em;
}

.server-manager-nav .server-nav-intro span {
	overflow: hidden;
	color: #8791a1 !important;
	font-size: 0.69rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.server-manager-nav .server-nav-count {
	display: none !important;
}

.server-manager-panel {
	padding: 72px 28px 30px !important;
}

.server-manager-panel .server-section-stack,
.server-manager-panel .server-manager-split {
	max-width: none;
}

.server-manager-panel .server-overview-hero,
.server-manager-panel .server-overview-stats {
	display: none !important;
}

.server-manager-panel .server-overview-card {
	padding-bottom: 20px !important;
}

.server-manager-panel .server-overview-grid {
	margin-top: 0 !important;
}

.server-manager-panel .server-section-head {
	margin-bottom: 14px !important;
}

.server-manager-panel .server-manager-split {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
	gap: 24px !important;
}

@media (max-width: 720px) {
	.server-manager-modal {
		width: calc(100vw - 20px) !important;
		height: calc(100vh - 20px);
		max-height: calc(100vh - 20px);
	}

	.server-manager-topbar {
		width: 100%;
	}

	.server-manager-topbar-meta {
		top: 16px;
		right: 16px;
	}

	.server-manager-layout {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto minmax(0, 1fr);
	}

	.server-manager-nav {
		height: auto;
		padding-top: 10px !important;
	}

	.server-manager-nav .server-nav-intro {
		display: none !important;
	}

	.server-manager-panel {
		padding-top: 60px !important;
	}

	.server-manager-panel .server-manager-split {
		grid-template-columns: 1fr !important;
	}
}

/* The editor controls live inside the profile card. */
.profile-editor-legacy-inline-panel {
	display: none !important;
}

.profile-editor-preview-card {
	border-radius: 16px !important;
	box-shadow: none !important;
}

.profile-editor-in-card-panel {
	width: calc(100% + 32px);
	margin: 8px -16px -18px;
	border: 0;
	border-top: 1px solid var(--cc-border);
	border-radius: 0;
	box-shadow: none;
	background: color-mix(in srgb, var(--cc-surface) 96%, var(--cc-accent-soft));
}

.profile-editor-name-row-tools {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
}

.profile-editor-color-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 5px;
	border: 1px solid var(--cc-border) !important;
	border-radius: 7px;
	background: var(--cc-surface-subtle) !important;
	color: var(--cc-muted);
	font-size: .65rem;
}

.profile-editor-color-chip input[type="color"] {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
}

.profile-editor-preview-card .profile-editor-online-dot {
	display: block !important;
	flex: 0 0 12px !important;
	width: 12px !important;
	height: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
	padding: 0 !important;
	border: 3px solid var(--panel) !important;
	border-radius: 50% !important;
	box-sizing: content-box !important;
}

.profile-editor-inline-color-row .profile-style-control {
	min-height: 34px;
	border-radius: 7px !important;
	font-size: .7rem;
}

/* Major style pass: keep the sidebar and composer integrated with the app shell. */
.server-sidebar-topbar {
	align-items: center !important;
	gap: 8px !important;
}

.server-sidebar-banner-shell {
	min-width: 0;
}

.server-sidebar-banner,
.server-sidebar-banner:hover,
.server-sidebar-banner-shell.open .server-sidebar-banner {
	min-height: 42px;
	padding: 8px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.server-sidebar-banner:hover,
.server-sidebar-banner-shell.open .server-sidebar-banner {
	color: var(--cc-text) !important;
}

.server-channel-item {
	grid-template-columns: 18px minmax(0, 1fr) auto !important;
	gap: 8px !important;
}

.server-channel-icon {
	width: 18px !important;
	height: 20px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.server-channel-copy small {
	display: none !important;
}

.chat-list {
	scrollbar-width: none !important;
}

.chat-list::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.chat-list-item .chat-text,
.chat-list-item .chat-title {
	min-width: 0;
	max-width: 100%;
}

.chat-list-item .chat-title {
	display: flex;
	width: 100%;
	overflow: hidden;
}

.chat-list-item .chat-title > .styled-username {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-list-item .chat-title > .rank-badge-stack {
	flex: 0 0 auto;
}

.me-settings-button,
.me-settings-button:hover,
.me-settings-button:focus-visible,
.me-settings-button:active {
	top: calc(50% + 5px) !important;
	transform: translateY(-50%) !important;
}

.me-settings-button:active {
	box-shadow: none !important;
}

.message-meta {
	display: flex !important;
	flex-wrap: wrap;
	width: 100%;
	row-gap: 3px;
}

.message-meta-right {
	min-width: 0;
	flex: 1 1 auto;
	flex-wrap: wrap;
	overflow: visible !important;
}

.chat-message.mentioned-for-you {
	border-color: color-mix(in srgb, #d97706 58%, var(--cc-border)) !important;
	background: color-mix(in srgb, #d97706 13%, var(--cc-surface)) !important;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #d97706 32%, transparent) !important;
}

.chat-message.compact.mentioned-for-you {
	padding-top: 4px;
	padding-bottom: 4px;
}

.composer-contenteditable {
	display: block;
	box-sizing: border-box;
	min-height: 40px;
	max-height: 200px;
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--cc-text) !important;
	-webkit-text-fill-color: var(--cc-text) !important;
	caret-color: var(--cc-text) !important;
	user-select: text;
	cursor: text;
}

.composer-contenteditable::-webkit-scrollbar {
	display: none;
}

.composer-contenteditable-placeholder {
	display: block;
	color: var(--cc-muted);
	pointer-events: none;
}

.composer-contenteditable:not(.has-content)::before {
	content: attr(data-placeholder);
	display: block;
	color: var(--cc-muted);
	pointer-events: none;
}

.composer-contenteditable .composer-mention-chip,
.composer-contenteditable .composer-custom-emoji-chip {
	user-select: none;
}

@media (max-width: 640px) {
	.message-meta-right {
		flex: 1 0 100%;
	}

	.message-meta-right > span:first-child {
		max-width: none !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	.message-read-receipts-label,
	.message-meta-separator {
		 display: inline-flex !important;
	}
}

/* Repair profile settings after the compact preview treatment. */
.profile-settings-panel .profile-editor-workspace {
	display: grid !important;
	grid-template-columns: minmax(300px, minmax(0, 440px)) minmax(320px, 1fr) !important;
	align-items: start;
	gap: 24px !important;
}

.profile-settings-panel .profile-editor-preview-column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 4px 0 0 !important;
}

.profile-settings-panel .profile-editor-preview-head {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px !important;
}

.profile-settings-panel .profile-editor-preview-card {
	width: 100% !important;
	max-width: none !important;
	border-radius: 16px !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.profile-settings-panel .profile-editor-preview-card .profile-editor-banner {
	height: 122px !important;
	border-radius: 14px 14px 0 0 !important;
}

.profile-settings-panel .profile-editor-preview-card .profile-editor-preview-content {
	min-height: 260px !important;
	padding: 0 24px 24px !important;
	gap: 8px !important;
}

.profile-settings-panel .profile-editor-inspector {
	display: block !important;
	min-width: 0;
	padding: 20px !important;
	border: 1px solid var(--cc-border) !important;
	border-radius: 12px !important;
	background: var(--cc-surface) !important;
	box-shadow: var(--cc-shadow-sm) !important;
}

.profile-settings-panel .profile-editor-inspector-head {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.profile-settings-panel .profile-editor-legacy-inline-panel {
	display: none !important;
}

.chat-list-item .chat-title > .styled-username-color-solid,
.chat-list-item .chat-title > .styled-username-color-glow,
.chat-list-item .chat-title > .styled-username-color-neon {
	color: var(--name-primary) !important;
}

.chat-list-item .chat-title > .styled-username-color-gradient,
.chat-list-item .chat-title > .styled-username-color-rotating_gradient,
.chat-list-item .chat-title > .styled-username-color-rotating_gradient_glow {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

@media (max-width: 860px) {
	.profile-settings-panel .profile-editor-workspace {
		grid-template-columns: 1fr !important;
	}

	.profile-settings-panel .profile-editor-preview-card {
		max-width: 560px !important;
	}
}

@media (max-width: 520px) {
	.profile-settings-panel .profile-editor-inspector {
		padding: 16px !important;
	}
}