/* base */
:root {
	color-scheme: dark;
	--bg: #0d0f12;
	--surface: #15181d;
	--surface-light: #1b1f25;
	--border: #292e36;
	--text: #f5f6f7;
	--muted: #929aa6;
	--accent: #d9ff57;
	--accent-text: #121507;
	--danger: #ff7474;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	min-width: 0;
	background-color: var(--bg);
	overflow-x: hidden;
}

body {
	width: 100%;
	min-width: 0;
	min-height: 100vh;
	margin: 0;
	background: radial-gradient(circle at 82% 5%, rgba(217, 255, 87, .075), transparent 27%), var(--bg);
	color: var(--text);
	overflow-x: hidden;
}

body.modal-open {
	overflow: hidden;
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

button {
	color: inherit;
}

.container {
	width: min(1440px, calc(100% - 64px));
	margin: 0 auto;
}

[hidden] {
	display: none !important;
}
/* base */

/* buttons */
.btn {
	display: inline-flex;
	min-height: 48px;
	padding: 0 20px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	font-weight: 650;
	transition: .2s ease;
}

.btn__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.btn:disabled {
	opacity: .55;
	cursor: wait;
}

.btn--primary {
	background-color: var(--accent);
	color: var(--accent-text);
}

.btn--primary:hover {
	background-color: #e4ff86;
	transform: translateY(-1px);
}

.btn--secondary {
	border-color: var(--border);
	background-color: transparent;
}

.btn--secondary:hover {
	background-color: var(--surface-light);
}

.btn--danger {
	border-color: rgba(255, 116, 116, .3);
	background-color: rgba(255, 116, 116, .06);
	color: #ff9c9c;
}

.btn--danger:hover {
	border-color: rgba(255, 116, 116, .55);
	background-color: rgba(255, 116, 116, .12);
}

.btn--wide {
	width: 100%;
}
/* buttons */

/* auth */
.auth {
	display: flex;
	min-height: 100vh;
	padding: 30px 20px;
	align-items: center;
	justify-content: center;
}

.auth__card {
	width: min(100%, 520px);
	padding: 38px;
	border: 1px solid var(--border);
	border-radius: 24px;
	background-color: rgba(21, 24, 29, .94);
	box-shadow: 0 28px 90px rgba(0, 0, 0, .35);
}

.auth__card--login {
	width: min(100%, 430px);
}

.auth__logo {
	display: flex;
	width: 52px;
	height: 52px;
	margin-bottom: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	background-color: var(--accent);
	color: var(--accent-text);
	font-size: 23px;
	font-weight: 800;
}

.auth h1 {
	margin: 0;
	font-size: 40px;
	letter-spacing: -.04em;
}

.auth__lead {
	margin: 10px 0 30px;
	color: var(--muted);
}
/* auth */

/* header */
.header {
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.header__container {
	display: flex;
	min-height: 92px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header-storage {
	display: inline-flex;
	min-height: 40px;
	padding: 0 12px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 11px;
	font-weight: 650;
	text-decoration: none;
}

.header-storage svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* integrations */
.integration-hero {
	padding: 70px 0 42px;
}

.integration-hero__container {
	max-width: 940px;
}

.integration-hero h1 {
	margin: 0;
	font-size: clamp(42px, 6vw, 78px);
	line-height: .95;
	letter-spacing: -.055em;
}

.integration-hero p:not(.eyebrow) {
	max-width: 720px;
	margin: 20px 0 0;
	color: var(--muted);
	font-size: 17px;
	line-height: 1.6;
}

.integrations {
	padding: 18px 0 90px;
}

.integrations__notice {
	display: flex;
	margin-bottom: 22px;
	padding: 18px 20px;
	align-items: flex-start;
	flex-direction: column;
	gap: 5px;
	border: 1px solid rgba(255, 189, 89, .3);
	border-radius: 14px;
	background: rgba(255, 189, 89, .06);
}

.integrations__notice strong {
	color: #ffd182;
}

.integrations__notice span {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

.integrations__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.integration-card {
	display: flex;
	min-width: 0;
	padding: 24px;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 20px;
	background: rgba(21, 24, 29, .92);
}

.integration-card--error,
.integration-card--import_error,
.integration-card--delete_error {
	border-color: rgba(255, 116, 116, .35);
}

.integration-card__head {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 13px;
}

.integration-card__icon {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: #21759b;
	color: #fff;
	font-size: 20px;
	font-weight: 800;
}

.integration-card h2 {
	overflow: hidden;
	margin: 0 0 4px;
	font-size: 19px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.integration-card__head > div:nth-child(2) > span {
	color: var(--muted);
	font-size: 12px;
}

.integration-card__status {
	padding: 6px 9px;
	border: 1px solid rgba(217, 255, 87, .25);
	border-radius: 999px;
	color: var(--accent);
	font-size: 11px;
	white-space: nowrap;
}

.integration-card--error .integration-card__status,
.integration-card--import_error .integration-card__status,
.integration-card--delete_error .integration-card__status {
	border-color: rgba(255, 116, 116, .35);
	color: #ff9c9c;
}

.integration-card__steps {
	display: grid;
	margin-top: 24px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
}

.integration-card__steps > div {
	position: relative;
	min-width: 0;
	min-height: 94px;
	padding: 13px;
}

.integration-card__steps > div + div {
	border-left: 1px solid var(--border);
}

.integration-card__steps span {
	display: flex;
	width: 22px;
	height: 22px;
	margin-bottom: 8px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #242a32;
	color: var(--muted);
	font-size: 11px;
	font-weight: 750;
}

.integration-card__steps .is-ready span {
	background: var(--accent);
	color: var(--accent-text);
}

.integration-card__steps strong,
.integration-card__steps small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.integration-card__steps strong {
	font-size: 12px;
}

.integration-card__steps small {
	margin-top: 5px;
	color: var(--muted);
	font-size: 10px;
}

.integration-card__message {
	min-height: 42px;
	margin: 17px 0;
	color: #b9c1cc;
	font-size: 13px;
	line-height: 1.55;
}

.integration-card__scheme {
	margin: -8px 0 17px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 202, 87, .22);
	border-radius: 10px;
	background: rgba(255, 202, 87, .055);
	color: #d7c799;
	font-size: 11px;
	line-height: 1.5;
}

.integration-card__domain {
	display: flex;
	margin-bottom: 17px;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	color: var(--muted);
	font-size: 12px;
}

.integration-card__domain strong {
	color: var(--text);
}

.integration-card__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.integration-card__actions .btn {
	min-width: 0;
	min-height: 42px;
	padding: 0 10px;
	font-size: 12px;
	text-decoration: none;
}
.integration-card__action-group {
	padding: 13px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: rgba(255, 255, 255, .012);
}
.integration-card__action-head {
	display: flex;
	margin-bottom: 11px;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.integration-card__action-head > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}
.integration-card__action-head strong {
	font-size: 12px;
}
.integration-card__action-head span {
	color: var(--muted);
	font-size: 10px;
	line-height: 1.4;
}
.integration-card__action-head > button {
	flex: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	font-size: 10px;
	font-weight: 650;
}
.integration-card__action-head > button:hover {
	color: var(--text);
}
.integration-card__action-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
	gap: 8px;
}
.integration-card__action-grid--management {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.integration-card__action-group--transfer {
	border-color: rgba(217, 255, 87, .25);
	background: rgba(217, 255, 87, .035);
}
.integration-card__transfer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.integration-card__transfer-grid a,
.integration-card__transfer-grid button {
	display: flex;
	min-width: 0;
	min-height: 66px;
	padding: 11px 13px;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	border: 1px solid rgba(217, 255, 87, .34);
	border-radius: 10px;
	background: rgba(217, 255, 87, .055);
	color: var(--text);
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}
.integration-card__transfer-grid a:hover {
	border-color: var(--accent);
	background: rgba(217, 255, 87, .11);
}
.integration-card__transfer-grid strong {
	color: var(--accent);
	font-size: 12px;
}
.integration-card__transfer-grid span {
	color: var(--muted);
	font-size: 10px;
	line-height: 1.4;
}
.integration-card__transfer-grid button:disabled {
	border-color: var(--border);
	background: rgba(255, 255, 255, .018);
	cursor: not-allowed;
	opacity: .52;
}
.integration-card__delete {
	width: 100%;
}

.integration-card__database {
	margin-top: 18px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: rgba(255, 255, 255, .015);
}

.integration-card__database summary {
	display: flex;
	min-height: 46px;
	padding: 0 13px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;
}

.integration-card__database summary::-webkit-details-marker {
	display: none;
}

.integration-card__database summary span {
	font-size: 12px;
	font-weight: 700;
}

.integration-card__database summary strong {
	color: var(--muted);
	font-size: 10px;
	font-weight: 500;
}

.integration-card__database[open] summary {
	border-bottom: 1px solid var(--border);
}

.integration-card__database-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-card__database-grid > div {
	position: relative;
	min-width: 0;
	padding: 12px;
	border-bottom: 1px solid var(--border);
}

.integration-card__database-grid > div:nth-child(odd) {
	border-right: 1px solid var(--border);
}

.integration-card__database-grid > .integration-card__path {
	grid-column: 1 / -1;
	border-right: 0;
}

.integration-card__database-grid span,
.integration-card__database-grid strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.integration-card__database-grid span {
	margin-bottom: 5px;
	color: var(--muted);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.integration-card__database-grid strong {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
}

.integration-card__database-password strong {
	padding-right: 118px;
}

.integration-card__database-password button {
	position: absolute;
	right: 11px;
	bottom: 11px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 9px;
}

.integration-card__copy-field strong {
	padding-right: 74px;
}

.integration-card__field-actions {
	position: absolute;
	right: 11px;
	bottom: 11px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.integration-card__field-actions button,
.integration-card__database-password .integration-card__field-actions button {
	position: static;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 9px;
}

.integration-card__field-actions button:hover {
	color: var(--accent);
}

.integration-card__database > button {
	width: 100%;
	min-height: 38px;
	border: 0;
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	font-size: 10px;
	font-weight: 650;
}

.integration-card__database > button:hover {
	background: rgba(217, 255, 87, .055);
}

.integration-card__credentials {
	display: grid;
	margin-top: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
}

.integration-card__credentials > div {
	position: relative;
	min-width: 0;
	padding: 12px;
}

.integration-card__credentials > div + div {
	border-left: 1px solid var(--border);
}

.integration-card__credentials span,
.integration-card__credentials strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.integration-card__credentials span {
	margin-bottom: 5px;
	color: var(--muted);
	font-size: 10px;
}

.integration-card__credentials strong {
	padding-right: 100px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
}

.integration-card__credentials button {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 9px;
}

.integration-card__credentials button + button {
	right: 58px;
}

.modal__dialog--integration {
	width: min(760px, calc(100% - 32px));
}

.modal__dialog--integration-small {
	width: min(600px, calc(100% - 32px));
}

.integration-form__admin {
	margin: 18px 0;
	padding: 17px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: rgba(255, 255, 255, .018);
}

.integration-form__admin > div:first-child {
	display: flex;
	margin-bottom: 16px;
	flex-direction: column;
	gap: 4px;
}

.integration-form__admin > div:first-child strong {
	font-size: 14px;
}

.integration-form__admin > div:first-child span {
	color: var(--muted);
	font-size: 11px;
}

.integration-password {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.integration-password button {
	padding: 0 13px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-light);
	color: var(--text);
	cursor: pointer;
	font-size: 11px;
}

.integration-form__info {
	margin-top: 18px;
	padding: 15px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface-light);
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
}

/* integrationImport */
.integration-import-files {
	display: grid;
	margin-top: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.integration-import-file {
	position: relative;
	display: flex;
	min-height: 96px;
	padding: 16px;
	align-items: center;
	gap: 13px;
	overflow: hidden;
	border: 1px dashed #3c434d;
	border-radius: 14px;
	background: rgba(255, 255, 255, .018);
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}
.integration-import-file:hover,
.integration-import-file.is-selected {
	border-color: rgba(217, 255, 87, .55);
	background: rgba(217, 255, 87, .04);
}
.integration-import-file input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.integration-import-file__icon {
	display: flex;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--surface-light);
	color: var(--accent);
}
.integration-import-file__icon svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.integration-import-file strong,
.integration-import-file small {
	display: block;
}
.integration-import-file strong {
	font-size: 12px;
}
.integration-import-file small {
	margin-top: 5px;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.integration-import-progress {
	margin-top: 18px;
}
.integration-card__import-progress {
	margin: 14px 0 0;
}
.integration-card__import-progress .integration-backup-progress__head span {
	max-width: 560px;
}
/* integrationImport */

.integration-delete-warning {
	display: flex;
	margin-bottom: 18px;
	padding: 15px;
	flex-direction: column;
	gap: 5px;
	border: 1px solid rgba(255, 116, 116, .28);
	border-radius: 12px;
	background: rgba(255, 116, 116, .055);
}

.integration-delete-warning strong {
	color: #ff9c9c;
	font-size: 13px;
}

.integration-delete-warning span {
	color: var(--muted);
	font-size: 11px;
	line-height: 1.5;
}

[data-integration-delete-slug] {
	color: var(--accent);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.integration-delete-progress {
	margin-bottom: 18px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background: var(--surface-light);
}

.integration-delete-progress > p {
	margin: 0 0 14px;
	color: var(--text);
	font-size: 12px;
	line-height: 1.5;
}

.integration-delete-progress__list {
	display: grid;
	gap: 7px;
}

.integration-delete-progress__item {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	min-height: 37px;
	padding: 7px 9px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .025);
}

.integration-delete-progress__item > div {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.integration-delete-progress__item strong {
	font-size: 12px;
}

.integration-delete-progress__item small {
	flex: none;
	color: var(--muted);
	font-size: 10px;
}

.integration-delete-progress__status {
	position: relative;
	display: block;
	width: 17px;
	height: 17px;
	border: 1px solid var(--border);
	border-radius: 50%;
}

.integration-delete-progress__item[data-state="running"] {
	background: rgba(217, 255, 87, .05);
}

.integration-delete-progress__item[data-state="running"] .integration-delete-progress__status {
	border-color: rgba(217, 255, 87, .25);
	border-top-color: var(--accent);
	animation: integration-delete-spin .75s linear infinite;
}

.integration-delete-progress__item[data-state="done"] .integration-delete-progress__status {
	border-color: var(--accent);
	background: var(--accent);
}

.integration-delete-progress__item[data-state="done"] .integration-delete-progress__status::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 5px;
	width: 4px;
	height: 7px;
	border-right: 2px solid var(--accent-text);
	border-bottom: 2px solid var(--accent-text);
	transform: rotate(45deg);
}

.integration-delete-progress__item[data-state="done"] small {
	color: var(--accent);
}

.integration-delete-progress__item[data-state="error"] {
	background: rgba(255, 116, 116, .06);
}

.integration-delete-progress__item[data-state="error"] .integration-delete-progress__status {
	border-color: #ff7474;
}

.integration-delete-progress__item[data-state="error"] small {
	color: #ff9c9c;
}

@keyframes integration-delete-spin {
	to {
		transform: rotate(360deg);
	}
}

.integration-audit__summary {
	display: flex;
	padding: 17px;
	flex-direction: column;
	gap: 5px;
	border: 1px solid var(--border);
	border-radius: 13px;
}

.integration-audit__summary--ready {
	border-color: rgba(217, 255, 87, .3);
	background: rgba(217, 255, 87, .055);
}

.integration-audit__summary--attention {
	border-color: rgba(255, 189, 89, .3);
	background: rgba(255, 189, 89, .055);
}

.integration-audit__summary strong {
	font-size: 14px;
}

.integration-audit__summary span {
	color: var(--muted);
	font-size: 11px;
}

.integration-audit__list {
	display: flex;
	margin-top: 12px;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 13px;
	overflow: hidden;
}

.integration-audit__list > div {
	display: grid;
	padding: 14px;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
}

.integration-audit__list > div + div {
	border-top: 1px solid var(--border);
}

.integration-audit__list > div > span {
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 800;
}

.integration-audit__list .is-ready > span {
	background: var(--accent);
	color: var(--accent-text);
}

.integration-audit__list .is-attention > span {
	background: #ffbd59;
	color: #241600;
}

.integration-audit__list strong,
.integration-audit__list small {
	display: block;
}

.integration-audit__list strong {
	font-size: 12px;
}

.integration-audit__list small {
	margin-top: 5px;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.5;
}

.integration-audit__actions {
	display: flex;
	margin-top: 14px;
	align-items: center;
	gap: 13px;
}

.integration-audit__actions .btn {
	flex: none;
	text-decoration: none;
}

.integration-audit__actions small {
	color: var(--muted);
	font-size: 10px;
	line-height: 1.45;
}

.integration-diagnostics__environment {
	margin-top: 18px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background: rgba(255, 255, 255, .02);
}

.integration-diagnostics__environment h3 {
	margin: 0 0 14px;
	font-size: 15px;
}

.integration-diagnostics__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--border);
	border-radius: 11px;
	overflow: hidden;
}

.integration-diagnostics__grid > div {
	display: flex;
	padding: 13px;
	min-width: 0;
	flex-direction: column;
	gap: 5px;
}

.integration-diagnostics__grid > div:not(:nth-child(3n + 1)) {
	border-left: 1px solid var(--border);
}

.integration-diagnostics__grid > div:nth-child(n + 4) {
	border-top: 1px solid var(--border);
}

.integration-diagnostics__grid span,
.integration-diagnostics__extensions span {
	color: var(--muted);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.integration-diagnostics__grid strong {
	overflow-wrap: anywhere;
	font-size: 12px;
}

.integration-diagnostics__extensions {
	margin-top: 14px;
}

.integration-diagnostics__extensions p {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.integration-backups__create {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 12px;
}

.integration-backups__create .form__group {
	margin: 0;
}

.integration-backups__create .checkbox {
	margin: 10px 0 0;
}

.integration-backups__create .btn {
	min-height: 46px;
	white-space: nowrap;
}

.integration-backups__notice {
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid rgba(217, 255, 87, .2);
	border-radius: 11px;
	background: rgba(217, 255, 87, .04);
	color: var(--muted);
	font-size: 10px;
	line-height: 1.55;
}

.integration-backup-progress {
	margin-top: 14px;
	padding: 15px;
	border: 1px solid rgba(217, 255, 87, .25);
	border-radius: 13px;
	background: rgba(217, 255, 87, .035);
}
.integration-backup-progress__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
}
.integration-backup-progress__head strong,
.integration-backup-progress__head span {
	display: block;
}
.integration-backup-progress__head strong {
	font-size: 12px;
}
.integration-backup-progress__head span {
	margin-top: 5px;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.integration-backup-progress__head b {
	flex: none;
	color: var(--accent);
	font-size: 12px;
}
.integration-backup-progress__bar {
	overflow: hidden;
	height: 5px;
	margin-top: 13px;
	border-radius: 999px;
	background-color: #252a31;
}
.integration-backup-progress__bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background-color: var(--accent);
	transition: width .25s ease;
}
.integration-backup-progress__steps {
	display: grid;
	margin-top: 13px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}
.integration-backup-progress__steps div {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 9px;
}
.integration-backup-progress__steps i {
	width: 7px;
	height: 7px;
	flex: none;
	border: 1px solid #4a515c;
	border-radius: 50%;
}
.integration-backup-progress__steps div.is-active {
	color: var(--text);
}
.integration-backup-progress__steps div.is-active i {
	border-color: var(--accent);
	background-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(217, 255, 87, .1);
}
.integration-backup-progress__steps div.is-done {
	color: var(--accent);
}
.integration-backup-progress__steps div.is-done i {
	border-color: var(--accent);
	background-color: var(--accent);
}
.integration-backup-progress__cancel {
	margin-top: 13px;
	padding: 0;
	border: 0;
	background: none;
	color: #ff9090;
	font: inherit;
	font-size: 10px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.integration-backup-progress__cancel:disabled {
	opacity: .55;
	cursor: wait;
}
.integration-backup-progress.is-error {
	border-color: rgba(255, 104, 104, .32);
	background-color: rgba(255, 104, 104, .04);
}
.integration-backup-progress.is-error .integration-backup-progress__head b {
	color: #ff8080;
}
[data-integration-release-error] {
	margin: 14px 0 0;
}

.integration-backups__content {
	margin-top: 16px;
}

.integration-backups__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.integration-backup {
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background: rgba(255, 255, 255, .02);
}

.integration-backup__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
}

.integration-backup__head strong,
.integration-backup__head span {
	display: block;
}

.integration-backup__head strong {
	font-size: 13px;
}

.integration-backup__head span {
	margin-top: 4px;
	color: var(--muted);
	font-size: 10px;
}

.integration-backup__head small {
	flex: none;
	padding: 5px 8px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: 9px;
}

.integration-backup p {
	margin: 13px 0;
	color: #b9c1cc;
	font-size: 11px;
	line-height: 1.5;
}

.integration-backup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.integration-backup__actions .btn {
	min-height: 36px;
	padding: 0 12px;
	flex: none;
	font-size: 10px;
	text-decoration: none;
}

.integration-backups__empty {
	display: flex;
	min-height: 150px;
	padding: 25px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 7px;
	border: 1px dashed var(--border);
	border-radius: 13px;
	text-align: center;
}

.integration-backups__empty strong {
	font-size: 14px;
}

.integration-backups__empty span {
	max-width: 360px;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.5;
}
/* integrations */

@media (max-width: 1050px) {
	.integrations__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.integration-hero {
		padding: 42px 0 28px;
	}

	.integration-hero h1 {
		font-size: clamp(40px, 13vw, 58px);
	}

	.integration-hero p:not(.eyebrow) {
		font-size: 15px;
	}

	.integration-card {
		padding: 17px;
	}

	.integration-card__head {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	.integration-card__icon {
		width: 42px;
		height: 42px;
	}

	.integration-card__status {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.integration-card__steps {
		grid-template-columns: 1fr;
	}

	.integration-card__steps > div {
		min-height: 0;
	}

	.integration-card__steps > div + div {
		border-top: 1px solid var(--border);
		border-left: 0;
	}
	.integration-card__action-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.integration-card__action-grid--management {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.header-storage span,
	.header .btn:not(.btn--wide) {
		font-size: 0;
	}

	.integrations-page .header__actions {
		gap: 5px;
	}

	.integration-import-files {
		grid-template-columns: 1fr;
	}

	.empty__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.integration-card__action-grid,
	.integration-card__action-grid--management,
	.integration-card__transfer-grid {
		grid-template-columns: 1fr;
	}
	.integration-card__action-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.integration-card__credentials {
		grid-template-columns: 1fr;
	}

	.integration-card__credentials > div + div {
		border-top: 1px solid var(--border);
		border-left: 0;
	}

	.integration-card__database-grid {
		grid-template-columns: 1fr;
	}

	.integration-card__database-grid > div:nth-child(odd) {
		border-right: 0;
	}

	.integration-password {
		grid-template-columns: 1fr;
	}

	.integration-password button {
		min-height: 40px;
	}

	.integration-audit__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.integration-diagnostics__environment {
		padding: 14px;
	}

	.integration-diagnostics__grid {
		grid-template-columns: 1fr;
	}

	.integration-diagnostics__grid > div:not(:first-child) {
		border-top: 1px solid var(--border);
		border-left: 0;
	}

	.integration-backups__create {
		grid-template-columns: 1fr;
	}

	.integration-backup__head {
		flex-direction: column;
		gap: 9px;
	}

	.integration-backup__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.integration-backup__actions .btn {
		width: 100%;
	}

	.integration-backup-progress__steps {
		grid-template-columns: 1fr 1fr;
	}
}

.header-storage:hover {
	border-color: #515a68;
	background-color: var(--surface-light);
	color: var(--text);
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.logo__mark {
	display: inline-flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background-color: var(--accent);
	color: var(--accent-text);
	font-size: 20px;
	font-weight: 800;
}

.logo strong,
.logo small {
	display: block;
}

.logo strong {
	font-size: 15px;
}

.logo small {
	margin-top: 2px;
	color: var(--muted);
	font-size: 12px;
}

.logout {
	padding: 8px;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}

.logout:hover {
	color: var(--text);
}
/* header */

/* hero */
.hero {
	padding: 78px 0 66px;
}

.hero__container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
}

.eyebrow {
	margin: 0 0 16px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hero h1 {
	margin: 0;
	font-size: clamp(48px, 6vw, 92px);
	font-weight: 650;
	line-height: .94;
	letter-spacing: -.065em;
}

.hero__stats {
	display: flex;
	gap: 48px;
	padding-bottom: 6px;
}

.hero__stats strong,
.hero__stats span {
	display: block;
}

.hero__stats strong {
	font-size: 32px;
	font-weight: 650;
}

.hero__stats span {
	margin-top: 4px;
	color: var(--muted);
	font-size: 13px;
}
/* hero */

/* projects */
.projects {
	padding: 0 0 90px;
}

.projects__head {
	display: flex;
	margin-bottom: 24px;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.project-filters {
	display: flex;
	padding: 4px;
	border-radius: 10px;
	background-color: #15181d;
}

.project-filters button {
	min-height: 38px;
	padding: 0 15px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 12px;
	font-weight: 650;
}

.project-filters button.active {
	background-color: #292e36;
	color: var(--text);
}

.search {
	width: min(100%, 340px);
}

.search input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	outline: 0;
	background-color: rgba(21, 24, 29, .8);
	color: var(--text);
}

.search input:focus {
	border-color: #697585;
}

.projects__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.project-card {
	position: relative;
	display: flex;
	min-height: 350px;
	padding: 22px;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 20px;
	background-color: rgba(21, 24, 29, .92);
	transition: border-color .2s ease, transform .2s ease;
}

.project-card--menu-open {
	z-index: 30;
}

.project-card:hover {
	border-color: #414955;
	transform: translateY(-2px);
}

.project-card--archived {
	opacity: .8;
}

.project-card__top,
.project-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.project-card__identity {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 12px;
}

.project-card__heading {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
}

.project-card__icon {
	display: flex;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: linear-gradient(145deg, var(--accent), #a7cc28);
	color: var(--accent-text);
	font-size: 19px;
	font-weight: 800;
	text-transform: uppercase;
}

.project-card__topActions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
}

.project-card__menuWrap {
	position: relative;
}

.project-card__menuButton,
.project-card__filesButton,
.project-card__customerButton,
.icon-btn {
	display: inline-flex;
	width: 40px;
	height: 40px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	line-height: 0;
}

.project-card__menuButton:hover,
.project-card__filesButton:hover,
.project-card__customerButton:hover,
.icon-btn:hover {
	border-color: var(--border);
	background-color: var(--surface-light);
}

.project-card__menuButton svg,
.project-card__filesButton svg,
.project-card__customerButton svg,
.icon-btn svg,
.copy-page-map svg,
.open-btn svg,
.download-btn svg,
.files-item__actions svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.project-card__menuButton svg {
	fill: currentColor;
	stroke: none;
}

.project-card__filesButton,
.project-card__customerButton {
	color: var(--muted);
}

.project-card__customerButton {
	position: relative;
}

.project-card__customerButton > span {
	position: absolute;
	top: -3px;
	right: -3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border: 2px solid var(--surface);
	border-radius: 9px;
	background: #ff9c9c;
	color: #11151a;
	font-size: 8px;
	font-weight: 800;
	line-height: 1;
}

.project-card__customerButton--active {
	border-color: #4f5f1b;
	background-color: rgba(215, 255, 63, .07);
	color: #d7ff3f;
}

.project-card__menu {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	right: 0;
	width: 220px;
	padding: 7px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background-color: #1d2127;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
}

.project-card__menu button {
	width: 100%;
	padding: 10px 11px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.project-card__menu button:hover {
	background-color: #292f37;
}

.project-card__menu .danger {
	color: var(--danger);
}

.project-card__status {
	display: inline-flex;
	min-height: 26px;
	padding: 0 9px;
	align-items: center;
	border: 1px solid #3c4654;
	border-radius: 20px;
	color: #b5bdc9;
	font-size: 11px;
	font-weight: 650;
}

.project-card__status--sent {
	border-color: rgba(103, 180, 255, .35);
	color: #8fc9ff;
}

.project-card__status--changes {
	border-color: rgba(255, 190, 92, .35);
	color: #ffc874;
}

.project-card__status--approved {
	border-color: rgba(217, 255, 87, .35);
	color: var(--accent);
}

.project-card__access {
	display: block;
	color: #cfe978;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.25;
}

.project-card__access--expired {
	color: #ff9c9c;
}

.project-card__quality {
	display: flex;
	width: 100%;
	min-width: 0;
	padding: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	border: 0;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	font-size: 11px;
	text-align: left;
}

.project-card__quality strong {
	color: var(--accent);
	font-size: 12px;
}

.project-card__quality span {
	color: var(--muted);
}

.project-card__quality--attention strong {
	color: #ffc874;
}

.project-card__quality--critical strong {
	color: #ff9c9c;
}

.project-card__quality--unchecked {
	color: var(--muted);
}

.project-card h2 {
	max-width: 100%;
	margin: 0;
	font-size: 19px;
	line-height: 1.1;
	letter-spacing: -.025em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-card__note {
	display: -webkit-box;
	margin: -2px 0 18px;
	padding-left: 11px;
	border-left: 2px solid #343b46;
	color: #b0b7c2;
	font-size: 12px;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.project-card__summary {
	display: grid;
	grid-template-columns: .7fr 1.25fr 1fr;
	margin: 22px 0 18px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background-color: rgba(10, 12, 15, .22);
	overflow: hidden;
}

.project-card__metric {
	display: flex;
	min-width: 0;
	min-height: 64px;
	padding: 11px 12px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.project-card__metric + .project-card__metric {
	border-left: 1px solid var(--border);
}

.project-card__metric > span {
	color: var(--muted);
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.project-card__metric > strong {
	font-size: 14px;
}

.project-card__footer {
	margin-top: auto;
	padding-top: 18px;
	align-items: stretch;
	flex-direction: column;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 12px;
}

.project-card__actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 8px;
}

.update-btn,
.copy-btn,
.open-btn {
	display: inline-flex;
	min-height: 36px;
	padding: 0 9px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	font-size: 12px;
	text-decoration: none;
}

.open-btn svg {
	width: 14px;
	height: 14px;
	margin-left: 5px;
}

.update-btn:hover,
.copy-btn:hover,
.open-btn:hover {
	border-color: #515a68;
	background-color: var(--surface-light);
}

.open-btn {
	border-color: rgba(217, 255, 87, .4);
	color: var(--accent);
}

.project-card__pages {
	display: flex;
	margin-top: 14px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
}

.download-btn {
	display: inline-flex;
	min-height: 34px;
	padding: 0 11px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(217, 255, 87, .28);
	border-radius: 9px;
	color: var(--accent);
	font-weight: 650;
	text-decoration: none;
	transition: .2s ease;
}

.download-btn svg {
	width: 15px;
	height: 15px;
	margin-right: 6px;
}

.download-btn:hover {
	border-color: rgba(217, 255, 87, .55);
	background-color: rgba(217, 255, 87, .06);
}

.pages-link {
	color: var(--muted);
	text-underline-offset: 3px;
}

.page-map-actions {
	display: flex;
	align-items: center;
	gap: 5px;
}

.copy-page-map {
	display: inline-flex;
	width: 30px;
	height: 30px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	line-height: 0;
}

.copy-page-map:hover {
	border-color: var(--border);
	background-color: var(--surface-light);
	color: var(--text);
}

.copy-page-map svg {
	width: 16px;
	height: 16px;
}

.empty {
	padding: 74px 24px;
	border: 1px dashed #343a44;
	border-radius: 22px;
	text-align: center;
}

.empty__icon {
	display: flex;
	width: 56px;
	height: 56px;
	margin: 0 auto 20px;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	background-color: var(--surface-light);
	color: var(--accent);
	font-size: 24px;
}

.empty h2 {
	margin: 0 0 8px;
}

.empty p {
	margin: 0 0 24px;
	color: var(--muted);
}
.empty__actions {
	display: flex;
	justify-content: center;
	gap: 10px;
}
/* projects */

/* form */
.form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.form__group {
	margin-bottom: 18px;
}

.form__label {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 650;
}

.form__group input,
.form__group select,
.form__group textarea,
.server-import select {
	width: 100%;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 11px;
	outline: 0;
	background-color: #101216;
	color: var(--text);
}

.form__group input,
.form__group select,
.server-import select {
	height: 50px;
}

.form__group textarea {
	min-height: 96px;
	padding-top: 13px;
	padding-bottom: 13px;
	line-height: 1.5;
	resize: vertical;
}

.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus,
.server-import select:focus {
	border-color: #697585;
}

.form__group input[readonly] {
	color: var(--muted);
	cursor: not-allowed;
}

.form__hint {
	margin-top: 7px;
	color: var(--muted);
	font-size: 11px;
}

.form__error {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 116, 116, .25);
	border-radius: 10px;
	background-color: rgba(255, 116, 116, .07);
	color: #ff9c9c;
	font-size: 13px;
}

.upload .form__error {
	margin: 16px 0 0;
}

.slug-field {
	display: flex;
	height: 50px;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 11px;
	background-color: #101216;
	overflow: hidden;
}

.slug-field:focus-within {
	border-color: #697585;
}

.slug-field input {
	min-width: 80px;
	height: 48px;
	padding-right: 3px;
	border: 0;
}

.slug-field span {
	padding-right: 13px;
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}

.checkbox {
	display: inline-flex;
	margin-bottom: 23px;
	align-items: center;
	cursor: pointer;
	font-size: 13px;
}

.checkbox input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.checkbox span {
	position: relative;
	display: flex;
	min-height: 20px;
	padding-left: 30px;
	align-items: center;
}

.checkbox span::before {
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #414956;
	border-radius: 6px;
	background-color: #101216;
	content: "";
}

.checkbox input:checked + span::before {
	border-color: var(--accent);
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 7 2.5 2.5L11 4' fill='none' stroke='%23121507' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.update-options {
	margin: 0 0 22px;
	padding: 17px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background-color: #101216;
}

.update-option {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
}

.update-option + .update-option {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.update-option input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--accent);
}

.update-option strong,
.update-option small {
	display: block;
}

.update-option strong {
	margin-bottom: 3px;
	font-size: 13px;
}

.update-option small {
	color: var(--muted);
	font-size: 11px;
	line-height: 1.4;
}
/* form */

/* modal */
.modal {
	position: fixed;
	z-index: 50;
	inset: 0;
	display: flex;
	padding: 24px;
	align-items: center;
	justify-content: center;
}

.modal__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background-color: rgba(3, 4, 6, .76);
	backdrop-filter: blur(8px);
}

.modal__dialog {
	position: relative;
	z-index: 1;
	width: min(720px, 100%);
	max-height: calc(100vh - 48px);
	padding: 30px;
	border: 1px solid #303640;
	border-radius: 22px;
	background-color: #15181d;
	box-shadow: 0 30px 100px rgba(0, 0, 0, .55);
	overflow-y: auto;
}

.modal__dialog--history {
	width: min(760px, 100%);
}

.modal__dialog--meta {
	width: min(620px, 100%);
}

.modal__dialog--access {
	width: min(650px, 100%);
}

.modal__dialog--quality {
	width: min(1040px, 100%);
}

.modal__dialog--files {
	width: min(1180px, 100%);
}

.modal__dialog--storage {
	width: min(1100px, 100%);
}

.modal__dialog--file-action {
	width: min(500px, 100%);
}

.modal--nested {
	z-index: 70;
}

/* storage */
.storage-loading,
.storage-empty {
	padding: 48px 20px;
	border: 1px dashed var(--border);
	border-radius: 14px;
	color: var(--muted);
	text-align: center;
}

.storage-empty--error {
	border-color: rgba(255, 112, 112, .35);
	color: #ff9a9a;
}

.storage-disk {
	padding: 20px;
	border: 1px solid rgba(143, 201, 255, .2);
	border-radius: 15px;
	background-color: rgba(143, 201, 255, .045);
}

.storage-disk--warning {
	border-color: rgba(255, 183, 77, .42);
	background-color: rgba(255, 183, 77, .06);
}

.storage-disk__head {
	display: flex;
	margin-bottom: 14px;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	color: var(--muted);
	font-size: 11px;
}

.storage-disk__head span,
.storage-disk__head strong {
	display: block;
}

.storage-disk__head span {
	margin-bottom: 4px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.storage-disk__head strong {
	color: var(--text);
	font-size: 24px;
}

.storage-disk__bar {
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background-color: #0d0f12;
}

.storage-disk__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #a7d7ff, var(--accent));
}

.storage-disk--warning .storage-disk__bar span {
	background: linear-gradient(90deg, #ffd176, #ff8e72);
}

.storage-disk > small {
	display: block;
	margin-top: 10px;
	color: var(--muted);
	font-size: 10px;
}

.storage-categories {
	display: grid;
	margin-top: 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.storage-category {
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background-color: #111318;
}

.storage-category span,
.storage-category strong,
.storage-category small {
	display: block;
}

.storage-category span {
	min-height: 27px;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.35;
}

.storage-category strong {
	margin-top: 6px;
	font-size: 17px;
}

.storage-category small {
	margin-top: 4px;
	color: #77808d;
	font-size: 9px;
}

.storage-section {
	margin-top: 28px;
	padding-top: 25px;
	border-top: 1px solid var(--border);
}

.storage-section__head {
	display: flex;
	margin-bottom: 17px;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.storage-section__head h3 {
	margin: 0;
	font-size: 16px;
}

.storage-section__head p {
	margin: 5px 0 0;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.4;
}

.storage-quota {
	padding-top: 0;
}

.storage-quota__summary {
	display: flex;
	min-height: 76px;
	padding: 18px 0;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
	list-style: none;
}

.storage-quota__summary::-webkit-details-marker {
	display: none;
}

.storage-quota__summary h3 {
	margin: 0;
	font-size: 16px;
}

.storage-quota__summary p {
	margin: 5px 0 0;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.4;
}

.storage-quota__side {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

.storage-quota__side svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.storage-quota[open] .storage-quota__side svg {
	transform: rotate(180deg);
}

.storage-quota__status {
	display: inline-flex;
	min-height: 28px;
	padding: 0 10px;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	background-color: #15181d;
	color: var(--muted);
	font-size: 9px;
	font-weight: 650;
}

.storage-quota__status--connected {
	border-color: rgba(217, 255, 87, .32);
	background-color: rgba(217, 255, 87, .055);
	color: var(--accent);
}

.storage-quota__content {
	padding-bottom: 25px;
}

.storage-quota__intro {
	margin: -3px 0 14px;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.45;
}

.storage-settings {
	padding: 17px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background-color: #111318;
}

.storage-settings__grid {
	display: grid;
	margin-top: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.storage-settings__grid .form__group {
	margin: 0;
}

.storage-api-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.storage-api-grid .form__group {
	margin: 0;
}

.storage-settings__hint {
	margin: 13px 0 0;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.55;
}

.storage-settings__hint code {
	color: var(--text);
}

.storage-api-clear {
	margin-top: 13px;
}

.storage-disk__error {
	display: block;
	margin-top: 5px;
	color: #ff9292 !important;
}

.storage-number {
	display: flex;
	align-items: center;
}

.storage-number input {
	border-radius: 9px 0 0 9px;
}

.storage-number span {
	display: inline-flex;
	height: 44px;
	padding: 0 11px;
	align-items: center;
	border: 1px solid var(--border);
	border-left: 0;
	border-radius: 0 9px 9px 0;
	background-color: #1d2127;
	color: var(--muted);
	font-size: 10px;
}

.storage-settings__footer {
	display: flex;
	margin-top: 18px;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.storage-settings__footer small {
	color: var(--muted);
	font-size: 9px;
	line-height: 1.4;
}

.storage-cron {
	margin-top: 14px;
	padding: 17px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background-color: #111318;
}

.storage-automation {
	overflow: hidden;
}

.storage-automation--active {
	border-color: rgba(217, 255, 87, .24);
}

.storage-automation__head {
	align-items: center;
}

.storage-automation__summary {
	display: flex;
	margin: 14px 0 18px;
	padding: 13px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background-color: #111318;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.storage-automation__summary strong,
.storage-automation__summary small {
	display: block;
}

.storage-automation__summary strong {
	font-size: 11px;
}

.storage-automation__summary small {
	color: var(--muted);
	font-size: 9px;
	line-height: 1.45;
	text-align: right;
}

.storage-automation__cron {
	margin-top: 18px;
	padding-top: 2px;
	border-top: 1px solid var(--border);
}

.storage-automation__cron .storage-cron__form {
	border-top: 0;
}

.storage-automation--active .storage-cron__badge {
	border-color: rgba(217, 255, 87, .32);
	background-color: rgba(217, 255, 87, .055);
	color: var(--accent);
}

.storage-cron--active {
	border-color: rgba(217, 255, 87, .24);
}

.storage-cron__head,
.storage-cron__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.storage-cron__head > div,
.storage-cron__head strong,
.storage-cron__head small {
	display: block;
}

.storage-cron__label {
	color: var(--muted);
	font-size: 9px;
}

.storage-cron__head strong {
	margin-top: 4px;
	font-size: 14px;
}

.storage-cron__head small,
.storage-cron__footer small {
	margin-top: 4px;
	color: var(--muted);
	font-size: 9px;
	line-height: 1.45;
}

.storage-cron__badge {
	display: inline-flex;
	min-height: 28px;
	padding: 0 10px;
	flex: 0 0 auto;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: 9px;
	font-weight: 650;
}

.storage-cron--active .storage-cron__badge {
	border-color: rgba(217, 255, 87, .32);
	background-color: rgba(217, 255, 87, .055);
	color: var(--accent);
}

.storage-cron__form {
	display: grid;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
	grid-template-columns: minmax(180px, 260px) max-content;
	align-items: end;
	gap: 12px;
}

.storage-cron__form .form__group {
	margin: 0;
}

.storage-cron__form .btn {
	min-height: 44px;
}

.storage-cron__hint {
	margin: 9px 0 0;
	color: var(--muted);
	font-size: 9px;
	line-height: 1.45;
}

.storage-cron__footer {
	margin-top: 14px;
}

.storage-cron__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.storage-cron__actions button {
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background-color: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 9px;
}

.storage-cron__actions .storage-cron__delete {
	border-color: rgba(255, 96, 96, .25);
	color: #ff9292;
}

.storage-cron__error {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 96, 96, .25);
	border-radius: 8px;
	background-color: rgba(255, 96, 96, .055);
	color: #ff9292;
	font-size: 9px;
	line-height: 1.45;
}

.storage-clean-now {
	min-height: 36px;
	padding: 0 12px;
	flex: 0 0 auto;
	border: 1px solid rgba(217, 255, 87, .32);
	border-radius: 8px;
	background-color: rgba(217, 255, 87, .045);
	color: var(--accent);
	cursor: pointer;
	font-size: 10px;
	font-weight: 650;
}

.storage-actions {
	border: 1px solid var(--border);
	border-radius: 13px;
	background-color: #111318;
}

.storage-action {
	display: flex;
	min-height: 67px;
	padding: 12px 14px;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.storage-action + .storage-action {
	border-top: 1px solid var(--border);
}

.storage-action strong,
.storage-action span {
	display: block;
}

.storage-action strong {
	font-size: 11px;
}

.storage-action span {
	margin-top: 4px;
	color: var(--muted);
	font-size: 9px;
	line-height: 1.4;
}

.storage-action button {
	min-width: 92px;
	min-height: 34px;
	padding: 0 10px;
	flex: 0 0 auto;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 9px;
}

.storage-action button:hover,
.storage-clean-now:hover {
	border-color: #596372;
	background-color: var(--surface-light);
	color: var(--text);
}

.storage-projects {
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 13px;
	background-color: #111318;
}

.storage-project {
	display: grid;
	min-height: 58px;
	padding: 11px 14px;
	align-items: center;
	grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(90px, .65fr));
	gap: 15px;
	font-size: 10px;
}

.storage-project + .storage-project {
	border-top: 1px solid var(--border);
}

.storage-project > div strong,
.storage-project > div small,
.storage-project > span small {
	display: block;
}

.storage-project > div strong {
	font-size: 11px;
}

.storage-project > div small,
.storage-project > span small {
	margin-top: 3px;
	color: var(--muted);
	font-size: 8px;
}

.storage-project > b {
	color: var(--accent);
	font-size: 11px;
}

.storage-project--head {
	min-height: 38px;
	background-color: #1b1f25;
	color: var(--muted);
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
/* storage */

.modal__head {
	display: flex;
	margin-bottom: 30px;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.modal__head h2 {
	margin: 0;
	font-size: 30px;
	letter-spacing: -.03em;
}

.icon-btn {
	flex: 0 0 auto;
	font-size: 27px;
}

.upload__tabs {
	display: inline-flex;
	max-width: 100%;
	margin-bottom: 14px;
	padding: 4px;
	border-radius: 10px;
	background-color: #101216;
	overflow-x: auto;
}

.upload__tab {
	min-height: 36px;
	padding: 0 15px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

.upload__tab.active {
	background-color: #292e36;
	color: var(--text);
}

.dropzone {
	position: relative;
	display: flex;
	min-height: 200px;
	padding: 28px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px dashed #46505e;
	border-radius: 16px;
	background-color: #101216;
	cursor: pointer;
	text-align: center;
}

.dropzone:hover,
.dropzone.dragover {
	border-color: var(--accent);
}

.dropzone input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.dropzone__icon {
	display: flex;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background-color: #242a31;
	color: var(--accent);
	font-size: 24px;
}

.dropzone strong {
	margin-bottom: 7px;
}

.dropzone span {
	color: var(--muted);
	font-size: 12px;
}

.dropzone__file {
	position: relative;
	z-index: 2;
	max-width: 100%;
	margin-top: 13px;
	padding: 8px 12px;
	border-radius: 8px;
	background-color: #252b33;
	color: var(--text);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.selection-actions {
	position: relative;
	z-index: 3;
	display: flex;
	margin-top: 15px;
	gap: 9px;
}

.selection-actions button {
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background-color: #252b33;
	color: var(--text);
	cursor: pointer;
	font-size: 12px;
	font-weight: 650;
}

.selection-actions button:hover {
	border-color: #515a68;
	background-color: #2d343d;
}

.server-import {
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background-color: #101216;
}

.upload-target {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-bottom: 14px;
	padding: 12px 14px;
	align-items: center;
	gap: 16px;
	border: 1px solid rgba(143, 201, 255, .24);
	border-radius: 11px;
	background-color: rgba(143, 201, 255, .055);
}

.upload-target label,
.upload-target span {
	display: block;
}

.upload-target label {
	position: relative;
}

.upload-target span {
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.upload-target input {
	width: 100%;
	height: 38px;
	padding: 0 11px;
	border: 1px solid var(--border);
	border-radius: 8px;
	outline: none;
	background-color: #101216;
	color: var(--text);
	font-size: 12px;
}

.upload-target input:focus {
	border-color: rgba(217, 255, 87, .6);
}

.upload-target__options {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: 220px;
	padding: 5px;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: 9px;
	background-color: #1b1f25;
	box-shadow: 0 16px 35px rgba(0, 0, 0, .38);
}

.upload-target__options button {
	display: block;
	width: 100%;
	min-height: 34px;
	padding: 7px 9px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	font-size: 11px;
	line-height: 1.35;
	text-align: left;
	overflow-wrap: anywhere;
}

.upload-target__options button:hover {
	background-color: var(--surface-light);
	color: var(--accent);
}

.upload-target > button {
	min-height: 32px;
	padding: 0 10px;
	flex: 0 0 auto;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 10px;
}

.upload-target > button:hover {
	border-color: #515a68;
	background-color: var(--surface-light);
	color: var(--text);
}

.upload-target small {
	grid-column: 1 / -1;
	margin-top: -7px;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.4;
}

.upload-target small b {
	color: var(--text);
	font-weight: 600;
}

.update-hint {
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid rgba(217, 255, 87, .18);
	border-radius: 10px;
	background-color: rgba(217, 255, 87, .045);
	color: #bcc59e;
	font-size: 12px;
	line-height: 1.45;
}

.upload__progress {
	margin-top: 17px;
}

.upload__progressBar {
	height: 6px;
	margin-bottom: 8px;
	border-radius: 10px;
	background-color: #272d35;
	overflow: hidden;
}

.upload__progressBar span {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--accent);
}

.upload__progress > span {
	color: var(--muted);
	font-size: 11px;
}

.modal__actions {
	display: flex;
	margin-top: 24px;
	justify-content: flex-end;
	gap: 10px;
}

.modal__actions--split {
	align-items: center;
	justify-content: space-between;
}

.modal__actions--split > div {
	display: flex;
	gap: 10px;
}
/* modal */

/* secret access */
.access-current {
	display: flex;
	margin-bottom: 18px;
	padding: 15px 16px;
	flex-direction: column;
	gap: 4px;
	border: 1px solid rgba(217, 255, 87, .2);
	border-radius: 13px;
	background-color: rgba(217, 255, 87, .04);
}

.access-current strong {
	color: var(--accent);
	font-size: 13px;
}

.access-current span {
	color: var(--muted);
	font-size: 12px;
}

.access-options {
	margin-bottom: 18px;
	padding: 4px 17px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background-color: #101216;
}

.access-option {
	display: flex;
	padding: 13px 0;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
}

.access-option + .access-option {
	border-top: 1px solid var(--border);
}

.access-option input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--accent);
}

.access-option strong,
.access-option small {
	display: block;
}

.access-option strong {
	margin-bottom: 3px;
	font-size: 13px;
}

.access-option small {
	color: var(--muted);
	font-size: 11px;
	line-height: 1.4;
}
/* secret access */

/* quality */
.quality-loading,
.quality-empty {
	padding: 48px 24px;
	border: 1px dashed var(--border);
	border-radius: 15px;
	color: var(--muted);
	text-align: center;
}

.quality-empty--error {
	border-color: rgba(255, 116, 116, .3);
	color: #ff9c9c;
}

.quality-summary {
	display: grid;
	grid-template-columns: 126px minmax(0, 1fr) auto;
	padding: 22px;
	align-items: center;
	gap: 24px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background-color: #101216;
}

.quality-score {
	position: relative;
	display: flex;
	width: 116px;
	height: 116px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:
		radial-gradient(circle at center, #101216 61%, transparent 63%),
		conic-gradient(var(--accent) calc(var(--quality-score) * 1%), #292e36 0);
}

.quality-score--attention {
	background:
		radial-gradient(circle at center, #101216 61%, transparent 63%),
		conic-gradient(#ffc874 calc(var(--quality-score) * 1%), #292e36 0);
}

.quality-score--critical {
	background:
		radial-gradient(circle at center, #101216 61%, transparent 63%),
		conic-gradient(#ff7777 calc(var(--quality-score) * 1%), #292e36 0);
}

.quality-score strong {
	font-size: 31px;
	line-height: 1;
	letter-spacing: -.04em;
}

.quality-score span {
	margin-top: 5px;
	color: var(--muted);
	font-size: 11px;
}

.quality-summary__text h3 {
	margin: 3px 0 8px;
	font-size: 22px;
	letter-spacing: -.025em;
}

.quality-summary__text > p:not(.eyebrow),
.quality-summary__text small {
	display: block;
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
}

.quality-summary__text small {
	margin-top: 7px;
	font-size: 11px;
}

.quality-counters {
	display: grid;
	grid-template-columns: repeat(3, 92px);
	gap: 8px;
}

.quality-counter {
	display: flex;
	min-height: 82px;
	padding: 12px 8px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 12px;
	background-color: #15181d;
}

.quality-counter strong {
	margin-bottom: 5px;
	font-size: 22px;
}

.quality-counter span {
	color: var(--muted);
	font-size: 10px;
}

.quality-counter--error strong {
	color: #ff8f8f;
}

.quality-counter--warning strong {
	color: #ffc874;
}

.quality-counter--notice strong {
	color: #8fc9ff;
}

.quality-stats {
	display: flex;
	margin: 12px 0 18px;
	flex-wrap: wrap;
	gap: 8px;
}

.quality-stats span {
	padding: 8px 11px;
	border: 1px solid var(--border);
	border-radius: 9px;
	color: var(--muted);
	font-size: 11px;
}

.quality-stats strong {
	color: var(--text);
}

.quality-filters {
	display: flex;
	margin-bottom: 13px;
	gap: 7px;
	overflow-x: auto;
}

.quality-filters button {
	display: inline-flex;
	min-height: 36px;
	padding: 0 11px;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background-color: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 11px;
	white-space: nowrap;
}

.quality-filters button.active {
	border-color: rgba(217, 255, 87, .35);
	background-color: rgba(217, 255, 87, .06);
	color: var(--text);
}

.quality-filters button span {
	display: inline-flex;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background-color: #292e36;
	font-size: 10px;
}

.quality-truncated {
	margin-bottom: 12px;
	padding: 11px 13px;
	border: 1px solid rgba(255, 190, 92, .25);
	border-radius: 10px;
	background-color: rgba(255, 190, 92, .06);
	color: #ffc874;
	font-size: 11px;
}

.quality-issues {
	display: grid;
	gap: 8px;
}

.quality-issue {
	position: relative;
	padding: 15px 17px 15px 20px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background-color: #101216;
	overflow: hidden;
}

.quality-issue::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background-color: #8fc9ff;
	content: "";
}

.quality-issue--error::before {
	background-color: #ff7777;
}

.quality-issue--warning::before {
	background-color: #ffc874;
}

.quality-issue__top {
	display: flex;
	margin-bottom: 7px;
	align-items: center;
	gap: 7px;
}

.quality-issue__ignore {
	min-height: 28px;
	margin-left: auto;
	padding: 0 9px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 10px;
}

.quality-issue__ignore:hover {
	border-color: #515a68;
	background-color: var(--surface-light);
	color: var(--text);
}

.quality-issue__ignore:disabled {
	opacity: .55;
	cursor: wait;
}

.quality-issue--ignored {
	opacity: .72;
}

.quality-issue--ignored::before {
	background-color: #626c79;
}

.quality-issue__severity,
.quality-issue__category {
	font-size: 10px;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.quality-issue__severity {
	color: #8fc9ff;
}

.quality-issue--error .quality-issue__severity {
	color: #ff8f8f;
}

.quality-issue--warning .quality-issue__severity {
	color: #ffc874;
}

.quality-issue__category {
	color: var(--muted);
}

.quality-issue > strong {
	display: block;
	font-size: 14px;
}

.quality-issue p {
	margin: 5px 0 0;
	color: #aeb6c2;
	font-size: 12px;
	line-height: 1.5;
}

.quality-issue code {
	display: block;
	margin-top: 9px;
	color: #7f8a99;
	font-size: 10px;
	overflow-wrap: anywhere;
}
/* quality */

/* files */
.files-toolbar {
	margin-bottom: 16px;
}

.files-breadcrumbs {
	display: flex;
	min-height: 42px;
	margin-bottom: 12px;
	padding: 0 13px;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--border);
	border-radius: 11px;
	background-color: #101216;
	overflow-x: auto;
	white-space: nowrap;
}

.files-breadcrumbs button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 11px;
}

.files-breadcrumbs button:hover {
	color: var(--text);
}

.files-breadcrumbs span {
	color: #515966;
}

.files-breadcrumbs strong {
	color: var(--text);
	font-size: 11px;
	font-weight: 650;
}

.files-toolbar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.files-toolbar__actions > button {
	display: inline-flex;
	min-height: 40px;
	padding: 0 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 10px;
	background-color: transparent;
	color: var(--text);
	cursor: pointer;
	font-size: 11px;
}

.files-toolbar__actions > button:hover {
	border-color: #515a68;
	background-color: var(--surface-light);
}

.files-search {
	display: flex;
	min-width: 220px;
	min-height: 40px;
	margin-right: auto;
	padding: 0 12px;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background-color: #101216;
}

.files-search:focus-within {
	border-color: #697585;
}

.files-search span {
	color: var(--muted);
	font-size: 18px;
}

.files-search input {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
	font-size: 12px;
}

.files-content {
	min-height: 420px;
}

.files-loading,
.files-empty {
	display: flex;
	min-height: 380px;
	padding: 36px 20px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px dashed var(--border);
	border-radius: 15px;
	color: var(--muted);
	text-align: center;
}

.files-empty strong {
	color: var(--text);
	font-size: 16px;
}

.files-empty span {
	font-size: 12px;
}

.files-empty--error {
	border-color: rgba(255, 116, 116, .3);
	color: #ff9c9c;
}

.files-list {
	border: 1px solid var(--border);
	border-radius: 14px;
	background-color: #101216;
	overflow: hidden;
}

.files-list__head,
.files-item {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 100px 150px 166px;
	align-items: center;
	gap: 12px;
}

.files-list__head {
	min-height: 40px;
	padding: 0 14px;
	border-bottom: 1px solid var(--border);
	color: #6f7987;
	font-size: 10px;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.files-item {
	min-height: 62px;
	padding: 8px 14px;
}

.files-item + .files-item {
	border-top: 1px solid var(--border);
}

.files-item:hover {
	background-color: #14171c;
}

.files-item__name {
	display: flex;
	min-width: 0;
	padding: 0;
	align-items: center;
	gap: 11px;
	border: 0;
	background: transparent;
	text-align: left;
}

button.files-item__name {
	cursor: pointer;
}

.files-item__icon {
	display: flex;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid #333a45;
	border-radius: 10px;
	background-color: #1b1f25;
	color: #8fc9ff;
	font-size: 9px;
	font-weight: 750;
	letter-spacing: .03em;
}

.files-item__icon--directory {
	border-color: rgba(217, 255, 87, .23);
	background-color: rgba(217, 255, 87, .05);
	color: var(--accent);
}

.files-item__name > span:last-child {
	min-width: 0;
}

.files-item__name strong,
.files-item__name small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.files-item__name strong {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
}

.files-item__name small,
.files-item__size,
.files-item__date {
	color: var(--muted);
	font-size: 10px;
}

.files-item__actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

.files-item__actions a,
.files-item__actions button {
	display: inline-flex;
	min-width: 34px;
	min-height: 34px;
	padding: 0 9px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	font-size: 12px;
	line-height: 0;
	text-decoration: none;
}

.files-item__actions svg {
	width: 16px;
	height: 16px;
}

.files-item__actions a:hover,
.files-item__actions button:hover {
	border-color: #515a68;
	background-color: var(--surface-light);
}

.files-item__actions .danger {
	color: #ff9c9c;
}

.files-item__actions .restore {
	border-color: rgba(217, 255, 87, .3);
	color: var(--accent);
}

.files-item__actions button:disabled {
	opacity: .55;
	cursor: wait;
}

.file-editor {
	border: 1px solid var(--border);
	border-radius: 14px;
	background-color: #101216;
	overflow: hidden;
}

.file-editor__head,
.file-editor__footer {
	display: flex;
	padding: 13px 15px;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.file-editor__head {
	border-bottom: 1px solid var(--border);
}

.file-editor__head > button,
.file-editor__head > a {
	display: inline-flex;
	min-height: 35px;
	padding: 0 11px;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	font-size: 11px;
	text-decoration: none;
}

.file-editor__head > div {
	min-width: 0;
	text-align: center;
}

.file-editor__head strong,
.file-editor__head span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-editor__head strong {
	margin-bottom: 3px;
	font-size: 12px;
}

.file-editor__head span,
.file-editor__footer > span {
	color: var(--muted);
	font-size: 10px;
}

.file-editor textarea {
	display: block;
	width: 100%;
	min-height: 55vh;
	padding: 18px;
	border: 0;
	outline: 0;
	background-color: #0b0d10;
	color: #dbe2ea;
	font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	resize: vertical;
	tab-size: 4;
	white-space: pre;
}

.file-editor__footer {
	border-top: 1px solid var(--border);
}
/* files */

/* history */
.history-current {
	margin-bottom: 18px;
	padding: 17px;
	border: 1px solid rgba(217, 255, 87, .24);
	border-radius: 14px;
	background-color: rgba(217, 255, 87, .045);
}

.history-current strong,
.history-current span {
	display: inline-block;
}

.history-current strong {
	margin-right: 9px;
	color: var(--accent);
}

.history-current span,
.history-item__top span {
	color: var(--muted);
	font-size: 12px;
}

.history-current p,
.history-item p {
	margin: 8px 0 0;
	color: #c3c9d2;
	font-size: 13px;
	line-height: 1.5;
}

.history-list {
	display: grid;
	gap: 10px;
}

.history-item {
	padding: 17px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background-color: #101216;
}

.history-item__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.history-item__top strong,
.history-item__top span {
	display: block;
}

.history-item__top strong {
	margin-bottom: 4px;
	font-size: 14px;
}

.history-item__saved {
	text-align: right;
}

.history-item__actions {
	display: flex;
	margin-top: 14px;
	gap: 8px;
}

.history-item__actions a,
.history-item__actions button {
	display: inline-flex;
	min-height: 36px;
	padding: 0 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	font-size: 12px;
	text-decoration: none;
}

.history-item__actions button {
	border-color: rgba(217, 255, 87, .35);
	color: var(--accent);
}

.history-item__actions button:disabled {
	opacity: .55;
	cursor: wait;
}

.history-empty {
	padding: 32px 20px;
	border: 1px dashed var(--border);
	border-radius: 14px;
	color: var(--muted);
	text-align: center;
}

.history-empty--error {
	border-color: rgba(255, 116, 116, .3);
	color: #ff9c9c;
}
/* history */

/* toast */
.toast {
	position: fixed;
	z-index: 100;
	right: 24px;
	bottom: 24px;
	max-width: min(360px, calc(100% - 48px));
	padding: 14px 18px;
	border: 1px solid #3a424e;
	border-radius: 12px;
	background-color: #20252c;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
	font-size: 13px;
}
/* toast */

@media (max-width: 1100px) {
	.projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.container {
		width: min(100% - 32px, 1440px);
	}

	.header__container {
		min-height: 76px;
	}

	.header__actions {
		gap: 9px;
	}

	.logout,
	.logo small {
		display: none;
	}

	.hero {
		padding: 52px 0 42px;
	}

	.hero__container {
		align-items: flex-start;
		flex-direction: column;
		gap: 34px;
	}

	.projects__head,
	.search {
		width: 100%;
	}

	.projects__head {
		align-items: stretch;
		flex-direction: column;
	}

	.project-filters {
		align-self: flex-start;
	}

	.projects__grid,
	.form__row {
		grid-template-columns: 1fr;
	}

	.form__row {
		gap: 0;
	}

	.quality-summary {
		grid-template-columns: 116px minmax(0, 1fr);
	}

	.quality-counters {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, 1fr);
	}

	.files-list__head,
	.files-item {
		grid-template-columns: minmax(0, 1fr) 154px;
	}

	.files-list__head span:nth-child(2),
	.files-list__head span:nth-child(3),
	.files-item__size,
	.files-item__date {
		display: none;
	}

	.storage-categories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.storage-settings__grid {
		grid-template-columns: 1fr;
	}

	.storage-api-grid,
	.storage-cron__form {
		grid-template-columns: 1fr;
	}

	.storage-project {
		grid-template-columns: minmax(0, 1fr) 90px;
	}

	.storage-project > span:nth-child(2),
	.storage-project > span:nth-child(3),
	.storage-project--head span:nth-child(2),
	.storage-project--head span:nth-child(3) {
		display: none;
	}
}

@media (max-width: 520px) {
	.header .btn {
		width: 46px;
		min-height: 46px;
		padding: 0;
		font-size: 0;
	}

	.header .btn .btn__icon {
		width: 20px;
		height: 20px;
	}

	.header-storage {
		width: 42px;
		min-height: 42px;
		padding: 0;
		font-size: 0;
	}

	.header-storage svg {
		width: 19px;
		height: 19px;
	}

	.hero h1 {
		font-size: 44px;
	}

	.auth__card {
		padding: 28px 20px;
	}

	.modal {
		padding: 0;
		align-items: flex-end;
	}

	.modal__dialog {
		max-height: 94vh;
		padding: 22px 16px;
		border-radius: 22px 22px 0 0;
	}

	.modal__actions .btn {
		flex: 1;
	}

	.modal__actions--split {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.modal__actions--split > div {
		display: flex;
	}

	.upload-target {
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
	}

	.upload-target button {
		align-self: flex-start;
	}

	.upload-target small {
		margin-top: 0;
	}

	.storage-disk__head,
	.storage-section__head,
	.storage-automation__summary,
	.storage-settings__footer,
	.storage-cron__footer,
	.storage-action {
		align-items: stretch;
		flex-direction: column;
	}

	.storage-automation__summary small {
		text-align: left;
	}

	.storage-settings__footer .btn,
	.storage-cron__form .btn,
	.storage-clean-now,
	.storage-action button {
		width: 100%;
	}

	.storage-cron__actions {
		width: 100%;
	}

	.storage-cron__actions button {
		flex: 1;
	}

	.storage-categories {
		grid-template-columns: 1fr 1fr;
	}

	.quality-summary {
		grid-template-columns: 1fr;
		padding: 18px;
		text-align: center;
	}

	.quality-score {
		margin: 0 auto;
	}

	.quality-counters {
		grid-column: auto;
	}

	.quality-counter {
		min-height: 72px;
	}

	.quality-counter span {
		font-size: 9px;
	}

	.files-toolbar__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.files-search {
		grid-column: 1 / -1;
		min-width: 0;
		margin: 0;
	}

	.files-toolbar__actions > button {
		padding: 0 8px;
	}

	.files-list__head {
		display: none;
	}

	.files-item {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 9px 10px;
	}

	.files-item__actions {
		gap: 4px;
	}

	.files-item__actions a,
	.files-item__actions button {
		min-width: 32px;
		padding: 0 7px;
	}

	.file-editor__head {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.file-editor__head > div {
		width: 100%;
		order: -1;
		text-align: left;
	}

	.file-editor textarea {
		min-height: 58vh;
		padding: 14px 12px;
		font-size: 11px;
	}

	.file-editor__footer {
		align-items: stretch;
		flex-direction: column;
	}

	.project-card__footer {
		align-items: stretch;
	}

	.project-card__actions {
		width: 100%;
	}

	.history-item__top {
		flex-direction: column;
		gap: 8px;
	}

	.history-item__saved {
		text-align: left;
	}

	.project-card__summary {
		grid-template-columns: 1fr 1fr;
	}

	.project-card__metric--quality {
		grid-column: 1 / -1;
		border-top: 1px solid var(--border);
		border-left: 0 !important;
	}

	.project-card__quality {
		flex-direction: row;
		align-items: center;
		gap: 7px;
	}
}

@media (hover: none) {
	.btn--primary:hover,
	.project-card:hover {
		transform: none;
	}
}

.project-card__view {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	margin-bottom: 16px;
	color: #b6d943;
	font-size: 12px;
}

.project-card__view--pending {
	color: #8f99a8;
}

.project-card__view svg,
.customer-view-status svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.modal__dialog--customer {
	width: min(760px, calc(100% - 32px));
}

.customer-setting {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 16px;
	border: 1px solid #2a3039;
	border-radius: 14px;
	background: #15191f;
	cursor: pointer;
}

.customer-setting--main {
	margin-bottom: 14px;
	border-color: #50601d;
	background: rgba(214, 255, 63, .045);
}

.customer-setting input {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 2px 0 0;
	accent-color: #d7ff3f;
}

.customer-setting span,
.customer-setting strong,
.customer-setting small {
	display: block;
}

.customer-setting strong {
	color: #f5f7f9;
	font-size: 14px;
	line-height: 1.3;
}

.customer-setting small {
	margin-top: 5px;
	color: #8993a1;
	font-size: 12px;
	line-height: 1.45;
}

.customer-settings {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	transition: opacity .2s ease;
}

.customer-settings--disabled {
	opacity: .45;
}

.customer-widths {
	grid-column: 1 / -1;
	padding: 16px;
	border: 1px solid #2a3039;
	border-radius: 14px;
	background: #11151a;
}

.customer-widths > div:first-child strong,
.customer-widths > div:first-child small {
	display: block;
}

.customer-widths > div:first-child strong {
	font-size: 14px;
}

.customer-widths > div:first-child small {
	margin-top: 4px;
	color: #8993a1;
	font-size: 12px;
}

.customer-widths__list {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	min-height: 28px;
	margin-top: 13px;
}

.customer-widths__list > small {
	align-self: center;
	color: #77818f;
	font-size: 12px;
}

.customer-widths__list > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 5px 0 10px;
	border: 1px solid #3a424e;
	border-radius: 9px;
	background: #1a1f26;
	color: #e8edf2;
	font-size: 12px;
}

.customer-widths__list button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #8f99a8;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.customer-widths__list button:hover {
	background: #303743;
	color: #fff;
}

.customer-widths__add {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	margin-top: 10px;
}

.customer-widths__add input {
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #303743;
	border-radius: 10px;
	outline: none;
	background: #0e1115;
	color: #f4f6f8;
}

.customer-widths__add input:focus {
	border-color: #788e2a;
}

.customer-widths__add > button {
	height: 40px;
	padding: 0 14px;
	border: 1px solid #4b5a1d;
	border-radius: 10px;
	background: transparent;
	color: #d7ff3f;
	cursor: pointer;
}

.customer-widths__add > button:hover {
	background: rgba(215, 255, 63, .08);
}

.customer-view-status {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid #303743;
	border-radius: 13px;
	background: #11151a;
	color: #b8db42;
}

.customer-view-status span,
.customer-view-status strong,
.customer-view-status small {
	display: block;
}

.customer-view-status strong {
	color: #eef3df;
	font-size: 13px;
}

.customer-view-status small {
	margin-top: 4px;
	color: #8f99a8;
	font-size: 12px;
}

.customer-feedback-summary {
	display: flex;
	margin-top: 14px;
	padding: 14px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border: 1px solid rgba(215, 255, 63, .2);
	border-radius: 13px;
	background: rgba(215, 255, 63, .04);
}

.customer-feedback-summary > div {
	min-width: 0;
}

.customer-feedback-summary strong,
.customer-feedback-summary span {
	display: block;
}

.customer-feedback-summary strong {
	margin-bottom: 4px;
	font-size: 13px;
}

.customer-feedback-summary span {
	color: #8f99a8;
	font-size: 11px;
}

.customer-feedback-summary button {
	flex: none;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid #303743;
	border-radius: 9px;
	background: #191e25;
	color: #f4f6f8;
	cursor: pointer;
	font-size: 11px;
}

.modal__dialog--comments {
	width: min(900px, calc(100vw - 32px));
}

.comments-admin-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 18px;
	border: 1px solid #303743;
	border-radius: 13px;
	overflow: hidden;
}

.comments-admin-summary > div {
	padding: 13px;
	border-right: 1px solid #303743;
}

.comments-admin-summary > div:last-child {
	border-right: 0;
}

.comments-admin-summary span,
.comments-admin-summary strong {
	display: block;
}

.comments-admin-summary span {
	margin-bottom: 5px;
	color: #8f99a8;
	font-size: 9px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.comments-admin-summary strong {
	font-size: 18px;
}

.comments-admin-list {
	display: grid;
	max-height: min(58vh, 590px);
	overflow-y: auto;
	gap: 10px;
	padding-right: 4px;
}

.comments-admin-empty {
	padding: 36px 20px;
	border: 1px dashed #303743;
	border-radius: 13px;
	color: #8f99a8;
	text-align: center;
	font-size: 12px;
}

.comments-admin-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	padding: 15px;
	border: 1px solid #303743;
	border-radius: 13px;
	background: #11151a;
}

.comments-admin-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 12px;
	margin-bottom: 9px;
	color: #8f99a8;
	font-size: 10px;
}

.comments-admin-item__meta strong {
	color: #d7ff3f;
}

.comments-admin-item p {
	margin: 0;
	color: #eef1f4;
	font-size: 12px;
	line-height: 1.55;
	white-space: pre-wrap;
}

.comments-admin-item__actions {
	display: flex;
	align-items: center;
	gap: 7px;
}

.comments-admin-item select,
.comments-admin-item button {
	height: 36px;
	border: 1px solid #303743;
	border-radius: 9px;
	background: #191e25;
	color: #f4f6f8;
	font-size: 10px;
}

.comments-admin-item select {
	padding: 0 30px 0 10px;
}

.comments-admin-item button {
	padding: 0 10px;
	color: #ff9c9c;
	cursor: pointer;
}

.customer-link {
	margin-top: 14px;
}

.customer-link > span {
	display: block;
	margin-bottom: 7px;
	color: #8f99a8;
	font-size: 12px;
}

.customer-link > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 8px;
}

.customer-link input {
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #303743;
	border-radius: 10px;
	background: #0e1115;
	color: #aab3c0;
}

.customer-link button,
.customer-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 14px;
	border: 1px solid #303743;
	border-radius: 10px;
	background: #191e25;
	color: #f4f6f8;
	cursor: pointer;
	text-decoration: none;
}

.customer-link button:hover,
.customer-link a:hover {
	border-color: #637080;
}

@media (max-width: 680px) {
	.customer-settings {
		grid-template-columns: 1fr;
	}

	.customer-feedback-summary {
		align-items: stretch;
		flex-direction: column;
	}

	.comments-admin-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.comments-admin-summary > div:nth-child(2) {
		border-right: 0;
	}

	.comments-admin-summary > div:nth-child(-n+2) {
		border-bottom: 1px solid #303743;
	}

	.comments-admin-item {
		grid-template-columns: 1fr;
	}

	.comments-admin-item__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.customer-link > div {
		grid-template-columns: 1fr 1fr;
	}

	.customer-link input {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.container {
		width: calc(100% - 24px);
	}

	.header__container {
		gap: 10px;
	}

	.logo {
		min-width: 0;
		gap: 8px;
	}

	.logo__mark {
		width: 38px;
		height: 38px;
		flex: 0 0 38px;
		font-size: 17px;
	}

	.logo > span:last-child {
		min-width: 0;
	}

	.logo strong {
		overflow: hidden;
		font-size: 13px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.header__actions {
		flex: 0 0 auto;
		gap: 6px;
	}

	.header .btn {
		width: 40px;
		min-height: 40px;
		gap: 0;
		border-radius: 10px;
	}

	.header-storage {
		width: 40px;
		min-height: 40px;
		gap: 0;
	}

	.hero {
		padding: 42px 0 38px;
	}

	.hero__container {
		gap: 28px;
	}

	.hero h1 {
		font-size: clamp(37px, 12.5vw, 44px);
		line-height: .98;
	}

	.hero__stats {
		width: 100%;
		max-width: 220px;
		justify-content: space-between;
		gap: 24px;
	}

	.projects__head {
		gap: 14px;
	}

	.project-card {
		min-width: 0;
		padding: 16px;
		border-radius: 16px;
	}

	.project-card__top {
		min-width: 0;
		gap: 8px;
	}

	.project-card__identity {
		gap: 8px;
	}

	.project-card__icon {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
		border-radius: 12px;
		font-size: 16px;
	}

	.project-card h2 {
		font-size: 17px;
	}

	.project-card__topActions {
		gap: 2px;
	}

	.project-card__menuButton,
	.project-card__filesButton,
	.project-card__customerButton {
		width: 34px;
		height: 34px;
		border-radius: 8px;
	}

	.project-card__summary {
		margin: 18px 0 16px;
	}

	.project-card__metric {
		min-height: 60px;
		padding: 10px;
	}

	.project-card__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.update-btn {
		grid-column: 1 / -1;
	}

	.update-btn,
	.copy-btn,
	.open-btn {
		min-width: 0;
		padding-right: 6px;
		padding-left: 6px;
	}

	.project-card__pages {
		flex-wrap: wrap;
	}

	.download-btn,
	.page-map-actions {
		min-width: 0;
	}

	.page-map-actions {
		margin-left: auto;
	}

	.project-card__menu {
		width: min(220px, calc(100vw - 40px));
	}

	.customer-widths__add {
		grid-template-columns: 1fr;
	}

	.customer-widths__add > button {
		width: 100%;
	}
}