/* © 2026 Mark Kats. Все права защищены. Копирование и переработка запрещены. */

:root {
	--shd-dialog-overlay: rgba(0, 0, 0, 0.58);
	--shd-dialog-bg: rgba(16, 18, 22, 0.98);
	--shd-dialog-head-bg: rgba(255, 255, 255, 0.05);
	--shd-dialog-border: rgba(255, 255, 255, 0.16);
	--shd-dialog-border-soft: rgba(255, 255, 255, 0.1);
	--shd-dialog-text: #f4f6fb;
	--shd-dialog-muted: rgba(234, 238, 247, 0.76);
	--shd-dialog-surface: rgba(255, 255, 255, 0.075);
	--shd-dialog-surface-hover: rgba(255, 255, 255, 0.135);
	--shd-dialog-accent: #78baff;
	--shd-dialog-danger: #c73522;
	--shd-dialog-danger-hover: #a92818;
	--shd-dialog-danger-bg: color-mix(in oklab, var(--shd-dialog-danger), transparent 78%);
	--shd-dialog-danger-border: color-mix(in oklab, var(--shd-dialog-danger), transparent 52%);
	--shd-dialog-danger-text: #ffd4d4;
	--shd-dialog-danger-bg-hover: color-mix(in oklab, var(--shd-dialog-danger), transparent 68%);
	--shd-dialog-danger-border-hover: color-mix(in oklab, var(--shd-dialog-danger), transparent 38%);
	--shd-dialog-danger-text-hover: #fff;
	--shd-dialog-radius: 8px;
	--shd-dialog-radius-sm: 7px;
	--shd-dialog-pad: 8px;
	--shd-dialog-control-h: 30px;
	--shd-dialog-font-ui: 'Artifakt Element', -apple-system, system-ui, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
	--shd-dialog-font-title: 'IBM Plex Sans Condensed', system-ui, sans-serif;
}

html[data-ui-theme='light'] {
	--shd-dialog-overlay: rgba(15, 23, 42, 0.28);
	--shd-dialog-bg: rgba(248, 250, 252, 0.96);
	--shd-dialog-head-bg: rgba(226, 232, 240, 0.72);
	--shd-dialog-border: rgba(23, 32, 51, 0.2);
	--shd-dialog-border-soft: rgba(23, 32, 51, 0.14);
	--shd-dialog-text: #172033;
	--shd-dialog-muted: rgba(23, 32, 51, 0.74);
	--shd-dialog-surface: rgba(226, 232, 240, 0.72);
	--shd-dialog-surface-hover: rgba(203, 213, 225, 0.7);
	--shd-dialog-accent: #2563eb;
	--shd-dialog-danger: #b42318;
	--shd-dialog-danger-hover: #8f1d14;
	--shd-dialog-danger-bg: rgba(180, 35, 24, 0.18);
	--shd-dialog-danger-border: rgba(180, 35, 24, 0.42);
	--shd-dialog-danger-text: #8f1d14;
	--shd-dialog-danger-bg-hover: rgba(180, 35, 24, 0.26);
	--shd-dialog-danger-border-hover: rgba(180, 35, 24, 0.56);
	--shd-dialog-danger-text-hover: #74170f;
}

html:has(body.shd-modal-open),
html:has(body.modal-open),
html:has(body.manuals-modal-open),
html:has(body.discussions-image-viewer-open),
html:has(body.overlay-open),
html:has(body.tor-description-modal-open),
body.shd-modal-open,
body.modal-open,
body.manuals-modal-open,
body.discussions-image-viewer-open,
body.overlay-open,
body.tor-description-modal-open {
	overflow: hidden;
	overscroll-behavior: contain;
}

#shd-modal-overlay,
#shd-prompt-overlay,
.profile-activity-modal,
.manuals-modal {
	position: fixed;
	inset: 0;
	z-index: 1055;
	display: none;
	padding: 12px;
	box-sizing: border-box;
	overflow: auto;
	overscroll-behavior: contain;
	background: transparent;
}

#shd-prompt-overlay {
	z-index: 1053;
}

#shd-modal-overlay {
	z-index: 1054;
}

#shd-modal-overlay,
#shd-prompt-overlay {
	align-items: center;
	justify-content: center;
}

#shd-modal-overlay[aria-hidden='false'],
#shd-prompt-overlay[aria-hidden='false'] {
	display: flex;
}

.profile-activity-modal[aria-hidden='false'],
.manuals-modal[aria-hidden='false'] {
	display: grid;
	place-items: center;
}

#shd-modal-overlay::before,
#shd-prompt-overlay::before,
.profile-activity-modal__backdrop,
.manuals-modal__backdrop {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--shd-dialog-overlay);
}

#shd-modal-overlay,
#shd-prompt-overlay,
#shd-modal-overlay *,
#shd-prompt-overlay *,
.profile-activity-modal,
.profile-activity-modal *,
.manuals-modal,
.manuals-modal * {
	pointer-events: auto;
	user-select: text;
}

.shd-modal,
.shd-prompt,
.profile-activity-dialog,
.manuals-dialog {
	position: relative;
	z-index: 1;
	min-height: 0;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid var(--shd-dialog-border);
	outline: 0;
	border-radius: var(--shd-dialog-radius);
	background: var(--shd-dialog-bg);
	box-shadow: none;
	color: var(--shd-dialog-text);
	font-family: var(--shd-dialog-font-ui);
}

.shd-modal,
.shd-prompt {
	display: flex;
	flex-direction: column;
	width: clamp(320px, 70vw, 520px);
	max-width: min(92vw, 560px);
	max-height: 80vh;
	padding: var(--shd-dialog-pad);
}

.profile-activity-dialog,
.manuals-dialog {
	padding: 6px;
}

.shd-modal-header,
.shd-prompt-header,
.profile-activity-dialog__head,
.manuals-dialog__head {
	border-bottom: 1px solid var(--shd-dialog-border-soft);
	background: var(--shd-dialog-head-bg);
}

.shd-modal-header,
.shd-prompt-header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	min-height: var(--shd-dialog-control-h);
	margin: calc(-1 * var(--shd-dialog-pad)) calc(-1 * var(--shd-dialog-pad)) 0;
	padding: 6px 8px;
}

.shd-prompt-header-close {
	display: inline-grid;
	place-items: center;
	width: var(--shd-dialog-control-h);
	height: var(--shd-dialog-control-h);
	padding: 0;
	border: 1px solid color-mix(in oklab, var(--shd-dialog-danger), transparent 52%);
	border-radius: var(--shd-dialog-radius-sm);
	background: color-mix(in oklab, var(--shd-dialog-danger), transparent 78%);
	color: var(--shd-dialog-danger-text);
	cursor: pointer;
}

.shd-prompt-header-close svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.shd-prompt-header-close:hover {
	background: color-mix(in oklab, var(--shd-dialog-danger), transparent 68%);
	border-color: color-mix(in oklab, var(--shd-dialog-danger), transparent 38%);
	color: var(--shd-dialog-danger-text-hover);
}

.profile-activity-dialog__head,
.manuals-dialog__head {
	margin: -6px -6px 0;
	padding: 6px 8px;
}

.shd-modal h2,
.shd-prompt h2,
.profile-activity-dialog__title,
.manuals-dialog__title {
	margin: 0;
	color: var(--shd-dialog-text);
	font: 600 1rem/1.15 var(--shd-dialog-font-title);
	letter-spacing: 0;
}

.shd-divider,
.shd-prompt-divider {
	display: none;
}

.shd-modal .shd-modal-body,
.shd-prompt .shd-prompt-body {
	margin-top: 9px;
	color: var(--shd-dialog-muted);
	font: 400 0.92rem/1.42 var(--shd-dialog-font-ui);
}

.shd-actions,
.shd-modal .shd-modal-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	margin: 8px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--shd-dialog-border-soft);
}

.shd-btn,
.profile-activity-dialog .tasks-icon-btn,
.manuals-icon-btn {
	box-sizing: border-box;
	border: 1px solid var(--shd-dialog-border-soft);
	border-radius: var(--shd-dialog-radius-sm);
	background: var(--shd-dialog-surface);
	color: var(--shd-dialog-text);
	box-shadow: none;
	transition: none;
}

.shd-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	max-width: 320px;
	height: var(--shd-dialog-control-h);
	padding: 0 12px;
	border: 1px solid var(--shd-dialog-border-soft);
	border-radius: var(--shd-dialog-radius-sm);
	background: var(--shd-dialog-surface);
	color: var(--shd-dialog-text);
	box-shadow: none;
	cursor: pointer;
	font: 500 0.82rem/1 var(--shd-dialog-font-ui);
	letter-spacing: 0;
	transition: none;
}

.shd-btn:hover,
.profile-activity-dialog .tasks-icon-btn:hover,
.manuals-icon-btn:hover {
	background: var(--shd-dialog-surface-hover);
	border-color: var(--shd-dialog-border);
	color: var(--shd-dialog-text);
}

.shd-btn:active {
	background: var(--shd-dialog-surface-hover);
}

.shd-btn[disabled] {
	opacity: 0.55;
	pointer-events: none;
}

.shd-btn.shd-btn-primary {
	background: color-mix(in oklab, var(--shd-dialog-accent), #111 30%);
	border-color: color-mix(in oklab, var(--shd-dialog-accent), transparent 35%);
	color: #fff;
}

.shd-btn.shd-btn-primary:hover {
	background: color-mix(in oklab, var(--shd-dialog-accent), #111 18%);
}

.shd-btn.shd-btn-danger,
.shd-btn.shd-btn-danger-lite,
.profile-activity-dialog .tasks-dialog-close,
.manuals-dialog-close {
	background: var(--shd-dialog-danger-bg);
	border-color: var(--shd-dialog-danger-border);
	color: var(--shd-dialog-danger-text);
}

.shd-btn.shd-btn-danger:hover,
.shd-btn.shd-btn-danger-lite:hover,
.profile-activity-dialog .tasks-dialog-close:hover,
.manuals-dialog-close:hover {
	background: var(--shd-dialog-danger-bg-hover);
	border-color: var(--shd-dialog-danger-border-hover);
	color: var(--shd-dialog-danger-text-hover);
}

@media (max-width: 600px) {
	.shd-modal,
	.shd-prompt {
		width: 94vw;
	}

	.shd-actions,
	.shd-modal .shd-modal-actions {
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	.shd-actions .shd-btn,
	.shd-modal .shd-modal-actions .shd-btn {
		min-width: auto;
		max-width: 100%;
		flex: 1 1 0;
		padding: 0 10px;
		font-size: 0.86rem;
		white-space: nowrap;
	}
}