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

@import url('../components/profile_cards.css?v=1786046274');

.profile-page {
	--hair: rgba(255, 255, 255, 0.16);
	--hair-strong: rgba(255, 255, 255, 0.24);
	--bg-panel: rgba(16, 18, 22, 0.96);
	--bg-soft: rgba(255, 255, 255, 0.045);
	--text-soft: #8f96a8;
	--accent: #4b8cff;
	--accent-soft: rgba(75, 140, 255, 0.16);
	--warning: #f59e0b;
	--danger: #ff7b7b;
	--ok: #7ce0a2;
	--shadow: var(--ui-card-depth-shadow);
	--profile-text: #e8edf7;
	--profile-badge-text: #e7ebf5;
	--profile-ok-text: #d8ffe6;
	--profile-warn-text: #ffe1b8;
	--profile-select-bg: rgba(255, 255, 255, 0.035);
	--profile-select-arrow: rgba(255, 255, 255, 0.72);
	--profile-select-option-bg: #1b1d22;
	--profile-btn-bg: var(--bg-soft);
	--profile-btn-border: var(--hair);
	--profile-btn-hover-bg: rgba(255, 255, 255, 0.13);
	--profile-btn-hover-border: rgba(255, 255, 255, 0.36);
	--profile-btn-ghost-bg: rgba(255, 255, 255, 0.035);
	--profile-btn-ghost-border: rgba(255, 255, 255, 0.16);
	--profile-summary-bg: rgba(148, 180, 220, 0.16);
	--profile-summary-border: rgba(148, 180, 220, 0.32);
	--profile-summary-label: rgba(200, 218, 242, 0.9);
	--profile-summary-value: #e8f0fa;
	--profile-login-text: rgba(200, 215, 235, 0.82);
	--profile-list-head-title: rgba(175, 185, 205, 0.82);
	--profile-badge-bg: rgba(255, 255, 255, 0.05);
	--profile-project-card-shadow: var(--ui-card-depth-shadow);
	--profile-project-card-shadow-hover: var(--ui-card-depth-shadow-hover);
	--profile-item-icon-bg: rgba(255, 255, 255, 0.075);
	--profile-item-icon-border: rgba(255, 255, 255, 0.12);
	--profile-muted-border: rgba(255, 255, 255, 0.1);
	--profile-empty-bg: rgba(255, 255, 255, 0.02);
	--profile-empty-border: rgba(255, 255, 255, 0.12);
	--font-ui:
		'Artifakt Element', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
		monospace;
	color: var(--profile-text);
}

html[data-ui-theme='light'] .profile-page {
	--hair: rgba(0, 0, 0, 0.1);
	--hair-strong: rgba(0, 0, 0, 0.16);
	--bg-panel: #f8fafc;
	--bg-soft: #f9fafb;
	--text-soft: rgb(97, 102, 112);
	--accent: rgb(83, 89, 101);
	--accent-soft: rgba(75, 85, 99, 0.12);
	--danger: #b42318;
	--ok: #047857;
	--shadow: 0 0 0 1px rgba(0, 0, 0, 0.035), 0 1px 3px rgba(0, 0, 0, 0.07);
	--profile-project-card-shadow-hover: var(--ui-card-depth-shadow);
	--profile-text: rgb(29, 31, 37);
	--profile-badge-text: rgb(83, 89, 101);
	--profile-ok-text: #047857;
	--profile-warn-text: #92400e;
	--profile-select-bg: #fff;
	--profile-select-arrow: rgba(29, 31, 37, 0.72);
	--profile-select-option-bg: #fff;
	--profile-btn-bg: #f8fafc;
	--profile-btn-border: rgba(0, 0, 0, 0.11);
	--profile-btn-hover-bg: #f2f4f8;
	--profile-btn-hover-border: rgba(0, 0, 0, 0.18);
	--profile-btn-ghost-bg: transparent;
	--profile-btn-ghost-border: rgba(0, 0, 0, 0.1);
	--profile-summary-bg: #f3f5f8;
	--profile-summary-border: rgba(0, 0, 0, 0.13);
	--profile-summary-label: #525a66;
	--profile-summary-value: rgb(29, 31, 37);
	--profile-login-text: rgb(97, 102, 112);
	--profile-list-head-title: rgb(97, 102, 112);
	--profile-badge-bg: #edf2f7;
	--profile-item-icon-bg: #f3f5f8;
	--profile-item-icon-border: rgba(0, 0, 0, 0.12);
	--profile-muted-border: rgba(0, 0, 0, 0.12);
	--profile-empty-bg: #f3f5f8;
	--profile-empty-border: rgba(0, 0, 0, 0.12);
	color: var(--profile-text);
}

.profile-shell {
	display: grid;
	gap: 8px;
}

.profile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px;
}

.profile-header__main {
	min-width: 0;
}

.profile-header__desc {
	margin: 6px 0 0;
	color: var(--profile-card-text-secondary);
	font-size: 0.86rem;
	line-height: 1.45;
}

.profile-telegram-login-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px;
	align-items: center;
}

.profile-telegram-login-row .shd-input {
	min-width: 0;
}

.profile-telegram-login-row .shd-form-action-btn {
	width: auto;
	white-space: nowrap;
}

.profile-save-state {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--hair);
	background: var(--bg-soft);
	color: inherit;
	font: 500 0.78rem/1 var(--font-ui);
	white-space: nowrap;
}

.profile-save-state[data-state='saved'] {
	border-color: rgba(124, 224, 162, 0.28);
	background: rgba(124, 224, 162, 0.1);
	color: #d4ffe3;
}

.profile-save-state[data-state='saving'] {
	border-color: rgba(75, 140, 255, 0.3);
	background: rgba(75, 140, 255, 0.1);
	color: #d7e6ff;
}

.profile-save-state[data-state='dirty'] {
	border-color: rgba(255, 214, 102, 0.26);
	background: rgba(255, 214, 102, 0.1);
	color: #ffeab6;
}

.profile-save-state[data-state='error'] {
	border-color: rgba(255, 123, 123, 0.3);
	background: rgba(255, 123, 123, 0.12);
	color: #ffd3d3;
}

.profile-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	align-items: start;
}

.profile-layout__content {
	min-width: 0;
	display: grid;
	gap: 14px;
}

.profile-section {
	display: block;
}

.profile-list-head__actions .btn {
	height: 26px;
	min-height: 26px;
	padding: 0 9px;
	font-size: 12px;
	line-height: 1;
}

.profile-overview {
	display: grid;
	gap: 8px;
}

.profile-overview__identity {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}

.avatar {
	width: 88px;
	height: 88px;
	border-radius: var(--profile-card-radius);
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: #1a1d24;
	box-shadow: none;
}

.profile-overview__identity-meta {
	min-width: 0;
}

.profile-overview__name {
	font: 600 1.16rem/1.15 var(--profile-card-title-font);
	color: var(--profile-title);
	word-break: break-word;
}

.profile-overview__login {
	margin-top: 2px;
	color: var(--profile-login-text);
	font: 500 0.74rem/1.25 var(--font-ui);
	word-break: break-word;
}

.profile-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0 8px;
	border-radius: 10px;
	border: 1px solid var(--hair);
	background: var(--profile-badge-bg);
	color: var(--profile-badge-text);
	font: 500 0.7rem/1 var(--font-ui);
}

.profile-badge--ok {
	border-color: rgba(124, 224, 162, 0.24);
	background: rgba(124, 224, 162, 0.1);
	color: var(--profile-ok-text);
}

html[data-ui-theme='light'] .rights-card .profile-badge {
	background: rgba(226, 234, 244, 0.96);
	border-color: rgba(71, 85, 105, 0.28);
	color: rgb(29, 31, 37);
}

html[data-ui-theme='light'] .rights-card .profile-badge--ok {
	border-color: rgba(22, 101, 52, 0.34);
	background: rgba(34, 197, 94, 0.18);
	color: #14532d;
}

.profile-badge--warn {
	border-color: rgba(255, 195, 123, 0.24);
	background: rgba(255, 195, 123, 0.1);
	color: var(--profile-warn-text);
}

.profile-summary-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px;
	margin-top: 10px;
}

.profile-summary-card {
	display: grid;
	align-items: center;
	gap: 3px;
	width: fit-content;
	max-width: 100%;
	min-height: 34px;
	padding: 6px;
	border-radius: var(--profile-card-radius);
	border: 1px solid var(--profile-summary-border);
	background: var(--profile-summary-bg);
}

.profile-summary-card__label {
	min-width: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--profile-summary-label);
	text-transform: uppercase;
	letter-spacing: 0;
	font: 500 0.6rem/1.15 var(--font-ui);
}

.profile-summary-card__value {
	margin-top: 0;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 600 0.92rem/1.05 var(--profile-card-title-font);
	color: var(--profile-summary-value);
	word-break: break-word;
}

.profile-overview__actions {
	display: none;
}

.profile-hidden-form {
	display: none;
}

.profile-section-grid,
.profile-access-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 14px;
}

[data-profile-masonry].is-profile-masonry {
	display: block;
	position: relative;
	min-height: 0;
}

[data-profile-masonry].is-profile-masonry > .profile-card {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	transition: transform 0.16s ease;
}

.profile-security-authenticators {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.profile-security-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

.profile-security-meta__item {
	display: grid;
	gap: 4px;
	min-width: 0;
	padding: 8px;
	border: 1px solid var(--profile-item-border);
	border-radius: var(--profile-card-radius);
	background: var(--profile-item-bg);
}

.profile-security-meta__label {
	color: var(--profile-summary-label);
	font: 500 0.62rem/1.15 var(--font-ui);
	text-transform: uppercase;
}

.profile-security-meta__value {
	min-width: 0;
	overflow: hidden;
	color: var(--profile-title);
	font: 600 0.88rem/1.15 var(--profile-card-title-font);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.access-block {
	display: grid;
	gap: 10px;
}

.access-block-title {
	font: 600 0.95rem/1.2 var(--profile-card-title-font);
	color: var(--profile-title);
}

.kv-val,
.rights-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kv-val > *,
.rights-pills > * {
	margin-top: 0;
}

.rights-card {
	display: grid;
	gap: 0;
}

.rights-row {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 2px 12px;
	align-items: start;
	padding: 9px 0;
	border-bottom: 1px solid var(--profile-muted-border);
}

.rights-row:first-child {
	padding-top: 0;
}

.rights-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.rights-title {
	font-size: 12px;
	line-height: 1.45;
	color: var(--profile-card-text-secondary);
}

.profile-device-card:hover {
	background: var(--profile-card-hover-bg);
	border-color: var(--profile-item-border-hover);
	box-shadow: var(--profile-project-card-shadow-hover);
}

.profile-device-card__name {
	font: 600 0.9rem/1.2 var(--profile-card-title-font);
	color: var(--profile-title);
}

.profile-device-card__meta {
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--profile-card-text-secondary);
}

.profile-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 0;
	padding-top: 10px;
	border-top: 1px solid var(--profile-muted-border);
}

.profile-list-head__title {
	margin: 0;
	color: var(--profile-list-head-title);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font: 600 0.68rem/1.25 var(--font-ui);
}

.profile-list-head__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.profile-device-list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.profile-device-card {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 5px;
	align-items: center;
	min-width: 0;
	padding: 4px 5px;
	border: 1px solid var(--profile-item-border);
	border-left: 2px solid rgba(148, 163, 184, 0.42);
	border-radius: var(--profile-card-radius);
	background: var(--profile-item-bg);
}

.profile-device-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--profile-card-radius-sm);
	border: 1px solid var(--profile-item-icon-border);
	background: var(--profile-item-icon-bg);
	font-size: 1rem;
	overflow: hidden;
}

.profile-device-card__content {
	min-width: 0;
}

.profile-device-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px;
}

.profile-device-card__title .profile-badge {
	min-height: 14px;
	padding: 0 3px;
	border-radius: 5px;
	font-size: 0.52rem;
}

.profile-device-card__meta {
	margin-top: 2px;
	word-break: break-word;
}

.profile-device-card__name {
	word-break: break-word;
}

.profile-device-card__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.profile-env-tabs {
	max-width: 100%;
	min-width: 0;
	justify-content: flex-end;
}

.profile-env-tabs .shd-segment-btn {
	min-width: 0;
}

.profile-empty {
	padding: 18px;
	border: 1px dashed var(--profile-empty-border);
	border-radius: var(--profile-card-radius);
	background: var(--profile-empty-bg);
	color: var(--profile-card-text-secondary);
	font-size: 0.84rem;
	line-height: 1.45;
}

.two-factor-setup-modal {
	display: grid;
	gap: 10px;
}

.two-factor-setup-modal__hint {
	color: var(--profile-card-text-secondary, var(--shd-dialog-muted));
	font-size: 0.84rem;
	line-height: 1.45;
}

.two-factor-setup-modal__qr {
	display: grid;
	place-items: center;
	min-height: 220px;
	padding: 10px;
	border: 1px solid var(--profile-muted-border, var(--shd-dialog-border-soft));
	border-radius: var(--profile-card-radius, var(--shd-dialog-radius));
	background: var(--profile-item-bg, var(--shd-dialog-surface));
}

.two-factor-setup-modal__qr svg {
	display: block;
	width: min(240px, 100%);
	height: auto;
	max-height: 240px;
}

.two-factor-setup-modal__key {
	display: grid;
	gap: 4px;
	color: var(--profile-card-text-secondary, var(--shd-dialog-muted));
	font-size: 0.78rem;
}

.two-factor-setup-modal__key code,
.two-factor-recovery-codes__list code,
.two-factor-recovery-codes-modal__list code {
	padding: 5px 7px;
	border: 1px solid var(--profile-item-border, var(--shd-dialog-border-soft));
	border-radius: var(--profile-card-radius-sm, var(--shd-dialog-radius-sm));
	background: var(--profile-item-bg, var(--shd-dialog-surface));
	color: var(--profile-title, var(--shd-dialog-text));
	font-size: 0.82rem;
	letter-spacing: 0.05em;
}

.two-factor-recovery-codes__list,
.two-factor-recovery-codes-modal__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
}

.two-factor-recovery-codes-modal__list {
	margin-top: 8px;
}

html[data-ui-theme='light'] .profile-page .profile-env-tabs {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.noti-panel {
	display: none;
}

.noti-panel.is-active {
	display: block;
}

.profile-notification-settings__grid {
	display: grid;
	gap: 10px;
}

.profile-notification-settings {
	min-height: 0;
	overflow: auto;
	padding-right: 2px;
}

.profile-notification-settings .profile-device-list {
	margin-top: 8px;
}

@media (min-width: 900px) {
	.profile-notification-settings .profile-device-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.profile-page input[disabled],
.profile-page select[disabled],
.profile-page textarea[disabled] {
	opacity: 0.6;
	cursor: progress;
}

#btnProfileNotificationsUnread[aria-pressed='true'] {
	border-color: rgba(37, 99, 235, 0.48);
	background: rgba(37, 99, 235, 0.14);
	color: #2563eb;
}

html[data-ui-theme='light'] #btnProfileNotificationsUnread[aria-pressed='true'] {
	border-color: rgba(29, 78, 216, 0.42);
	background: rgba(37, 99, 235, 0.12);
	color: #1d4ed8;
}

#profileNotificationsModal .shd-activity-filter--actions {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	justify-content: start;
}

#profileNotificationsModal .shd-activity-filter--actions .tasks-pb-btn {
	white-space: nowrap;
}

.shd-activity-dialog.profile-notifications-dialog {
	grid-template-rows: auto minmax(0, 1fr);
}

.shd-modal-header.profile-notifications-header {
	grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.profile-notifications-header .profile-notifications-tabs {
	grid-column: 3;
	grid-row: 1;
}

.profile-notifications-header .shd-modal-close {
	grid-column: 4;
	grid-row: 1;
}

.profile-notifications-tabs {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.profile-notifications-tab {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 26px;
	min-height: 26px;
	padding: 0 12px;
	border: 1px solid var(--shd-dialog-border-soft);
	border-radius: var(--shd-dialog-radius-sm);
	background: color-mix(in srgb, var(--shd-dialog-surface) 64%, transparent);
	color: color-mix(in srgb, var(--shd-dialog-text) 68%, transparent);
	box-shadow: none;
	cursor: pointer;
	font: 500 0.79rem/1 var(--shd-dialog-font-ui);
	white-space: nowrap;
}

.profile-notifications-tab:hover,
.profile-notifications-tab.is-active {
	border-color: var(--shd-dialog-border);
	background: var(--shd-dialog-surface-hover);
	color: var(--shd-dialog-text);
}

.profile-notifications-history {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 8px;
	min-height: 0;
}

.profile-notifications-history[hidden],
.profile-notification-settings[hidden] {
	display: none;
}

@media (max-width: 1024px) {
	.profile-section-grid,
	.profile-access-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.profile-layout {
		grid-template-columns: 1fr;
	}

	.profile-layout__nav {
		position: static;
	}

	.profile-nav {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 8px;
	}

	.profile-nav__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.profile-content,
	.profile-personal {
		grid-template-columns: 1fr;
	}

	.profile-personal__side {
		justify-items: start;
	}

	.profile-overview__identity {
		grid-template-columns: 1fr;
	}

	.profile-overview__identity .avatar {
		width: 96px;
		height: 96px;
	}
}

@media (max-width: 640px) {
	.profile-page .page-wrap {
		padding-left: 8px;
		padding-right: 8px;
	}

	.profile-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.profile-list-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.profile-list-head__actions {
		width: 100%;
	}

	.profile-field-grid,
	.profile-security-grid {
		grid-template-columns: 1fr;
	}

	.rights-row {
		grid-template-columns: 1fr;
	}

	.profile-device-card {
		grid-template-columns: 34px minmax(0, 1fr) auto;
		align-items: center;
		padding: 4px;
	}

	.profile-device-card__icon {
		width: 32px;
		height: 32px;
	}

	.profile-device-card__actions {
		justify-content: flex-end;
		width: auto;
		align-self: center;
	}

	.profile-security-meta {
		grid-template-columns: 1fr;
	}

	.profile-notification-settings .profile-env-tabs {
		flex-wrap: nowrap;
		padding: 3px;
		gap: 3px;
		overflow: visible;
	}

	.profile-notification-settings .profile-setting-card--push-environment {
		flex-direction: column;
		align-items: stretch;
	}

	.profile-notification-settings .profile-env-tabs .shd-segment-btn {
		width: auto;
		flex: 1 1 0;
		min-width: 0;
		min-height: 30px;
		padding: 0 4px;
		font-size: 0.74rem;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	.shd-modal-header.profile-notifications-header {
		grid-template-columns: auto minmax(0, 1fr) auto;
		row-gap: 8px;
	}

	.profile-notifications-header .profile-notifications-tabs {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		margin-left: 0;
	}

	.profile-notifications-header .shd-modal-close {
		grid-column: 3;
		grid-row: 1;
	}

	.profile-notifications-tab {
		flex: 1 1 0;
		padding: 0 8px;
	}
}