no-copy-frontend/src/app/styles/settings.scss

.settings-form {
	background: white;
	border-radius: 20px;
	padding: 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;
	overflow: hidden;
}

.form-section {
	padding: 30px;
	margin-bottom: 30px;

	&-title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 20px;
		color: #1e293b;
		display: flex;
		align-items: center;
		gap: 10px;
		border-bottom: 2px solid #f3f4f6;
		padding-bottom: 10px;
	}

	.form-group {
		margin-bottom: 20px;

		small {
			color: #6b7280;
			font-size: 12px;
		}
	}

	.form-label {
		display: block;
		margin-bottom: 8px;
		font-weight: 500;
		color: #374151;
		font-size: 14px;

		&:has(.toggle-switch) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
		}
	}

	.toggle-switch {
		position: relative;
		display: inline-block;
		width: 50px;
		height: 24px;

		input {
			opacity: 0;
			width: 0;
			height: 0;
		}
	}

	input:checked+.toggle-slider {
		background-color: #6366f1;

		&::before {
			transform: translateX(26px);
		}
	}

	.toggle-slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		transition: .4s;
		border-radius: 24px;

		&::before {
			position: absolute;
			content: "";
			height: 18px;
			width: 18px;
			left: 3px;
			bottom: 3px;
			background-color: white;
			transition: .4s;
			border-radius: 50%;
		}
	}

	.form-input,
	.form-select,
	.form-textarea {
		width: 100%;
		padding: 12px 16px;
		border: 2px solid #e5e7eb;
		border-radius: 10px;
		font-size: 14px;
		transition: all 0.3s;
		background: #f9fafb;

		&:focus {
			outline: none;
			border-color: #6366f1;
			background: white;
			box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
		}
	}

	.subscription-info {
		background: #f0fdf4;
		border-radius: 15px;
		padding: 20px;
		margin-bottom: 20px;
		border-left: 4px solid #10b981;

		.subscription-info-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			p {
				color: #047857;
				font-size: 14px;
			}
		}

		.subscription-info-title {
			color: #065f46;
			font-size: 18px;
			margin-bottom: 5px;
			font-weight: 700;
		}

		.subscription-info-main {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			gap: 15px;
			font-size: 13px;
		}

		.subscription-info-item {
			div {
				color: #047857;
				font-weight: 600;
			}

			span {
				color: #065f46;
			}
		}
	}

	.subscription-info-footer {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.api-key-info {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;

		.form-input {
			font-family: monospace;
			background: #f9fafb;
		}
	}

	.api-key-info-wrapper {
		.btn-outline {
			display: inline;
		}

		small {
			color: #6b7280;
			font-size: 12px;
			display: block;
			margin-top: 10px;
		}

		.api-key-info-documentation {
			background: #f0f9ff;
			border-radius: 10px;
			padding: 15px;
			margin-top: 15px;

			h4 {
				color: #1e40af;
				margin-bottom: 10px;
				font-size: 14px;
			}

			p {
				color: #1e3a8a;
				font-size: 13px;
				line-height: 1.5;
			}

			a {
				color: #2563eb;
				text-decoration: underline;
			}
		}
	}

	.last-activiti-wrapper {
		.no-activiti {
			text-align: center;
			color: #64748b;
			padding: 20px;
		}
	}
}

.danger-zone {
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
	border: 2px solid #ef4444;
	border-radius: 15px;
	padding: 25px;
	margin-top: 20px;

	&-remove-account {
		background: #fef2f2;
		border: 1px solid #fecaca;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;

		.btn {
			background: #dc2626;
			color: white;
			border: 2px solid #dc2626;
		}
	}

	&-reset-settings {
		background: #fef3c7;
		border: 1px solid #fbbf24;
		border-radius: 10px;
		padding: 20px;

		.btn {
			background: transparent;
			color: #f59e0b;
			border: 2px solid #f59e0b;

			&:hover {
				background: #f59e0b;
				color: #fef3c7;
			}
		}
	}

	h3 {
		color: #dc2626;
		margin-bottom: 15px;
		font-size: 1.17em;
	}

	h4 {
		color: #991b1b;
		margin-bottom: 10px;
	}

	p {
		color: #7f1d1d;
		font-size: 14px;
		margin-bottom: 15px;
	}
}