:root {
	--primary: #4361ee;
	--primary-light: #e0e7ff;
	--secondary: #3f37c9;
	--success: #4cc9f0;
	--danger: #f72585;
	--warning: #f8961e;
	--dark: #212529;
	--light: #f8f9fa;
	--gray: #6c757d;
	--border: #e2e8f0;
	--radius: 8px;
	--shadow: 0 4px 6px rgba(0,0,0,0.05);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body {
	background-color: #f5f7ff;
	color: var(--dark);
	line-height: 1.6;
}
.container {
	max-width: 900px;
	margin: 0 auto;
}
header {
	text-align: center;
	margin-bottom: 30px;
}
header h1 {
	font-size: 2rem;
	font-weight: 600;
	color: var(--dark);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.description {
	color: var(--gray);
	max-width: 600px;
	margin: 0 auto;
}
.tool-container {
	background: white;
	padding: 25px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.base64-form {
	margin-bottom: 25px;
}
.form-group {
	margin-bottom: 20px;
}
.form-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--dark);
}
.file-upload-area {
	position: relative;
}
.file-upload-box {
	border: 2px dashed var(--border);
	border-radius: var(--radius);
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	background: var(--light);
}
.file-upload-box:hover,.file-upload-area.dragover .file-upload-box {
	border-color: var(--primary);
	background-color: var(--primary-light);
}
.file-upload-box i {
	font-size: 3rem;
	color: var(--primary);
	margin-bottom: 15px;
}
.file-upload-box h3 {
	margin-bottom: 10px;
	color: var(--dark);
}
.file-upload-box p {
	color: var(--gray);
	font-size: 0.9rem;
}
.file-upload-box input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.file-info {
	border: 2px solid var(--primary);
	border-radius: var(--radius);
	padding: 15px;
	background: var(--primary-light);
}
.file-details {
	display: flex;
	align-items: center;
	gap: 15px;
}
.file-details i {
	font-size: 2rem;
	color: var(--primary);
}
.file-text {
	flex: 1;
}
.file-text strong {
	display: block;
	margin-bottom: 5px;
	color: var(--dark);
}
.file-text span {
	color: var(--gray);
	font-size: 0.9rem;
}
.btn-remove {
	background: var(--danger);
	color: white;
	border: none;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}
.btn-remove:hover {
	background: #d63384;
	transform: scale(1.1);
}
.form-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}
.btn {
	padding: 12px 20px;
	border: none;
	border-radius: var(--radius);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.btn-primary {
	background-color: var(--primary);
	color: white;
}
.btn-primary:hover {
	background-color: var(--secondary);
	transform: translateY(-2px);
}
.btn-secondary {
	background-color: var(--light);
	color: var(--dark);
}
.btn-secondary:hover {
	background-color: #e2e8f0;
}
.btn-copy {
	background-color: var(--primary-light);
	color: var(--primary);
}
.btn-download {
	background-color: var(--success);
	color: white;
}
.alert {
	padding: 15px;
	border-radius: var(--radius);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.alert-error {
	background-color: #fee2e2;
	color: var(--danger);
	border-left: 4px solid var(--danger);
}
.result-box {
	background: white;
	padding: 20px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
}
.result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border);
}
.result-header h2 {
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.copy-buttons {
	display: flex;
	gap: 10px;
}
.base64-tabs {
	display: flex;
	border-bottom: 1px solid var(--border);
	margin-bottom: 15px;
}
.tab-btn {
	padding: 10px 20px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--gray);
	transition: all 0.3s;
}
.tab-btn.active {
	color: var(--primary);
	border-bottom-color: var(--primary);
}
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
}
.image-preview-container {
	position: relative;
	text-align: center;
	background: var(--light);
	border-radius: var(--radius);
	padding: 20px;
	overflow: hidden;
}
.preview-image {
	max-width: 100%;
	max-height: 400px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.preview-overlay {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 8px 12px;
	border-radius: var(--radius);
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 5px;
}
.base64-result {
	width: 100%;
	min-height: 200px;
	padding: 15px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	line-height: 1.5;
	resize: vertical;
	background-color: var(--light);
}
.file-info-details {
	padding: 20px;
	background: var(--light);
	border-radius: var(--radius);
}
.info-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background: white;
	border-radius: var(--radius);
	margin-bottom: 10px;
	border-left: 4px solid var(--primary);
}
.info-item:last-child {
	margin-bottom: 0;
}
.info-item i {
	font-size: 1.5rem;
	color: var(--primary);
	width: 30px;
	text-align: center;
}
.info-content {
	flex: 1;
}
.info-content strong {
	display: block;
	margin-bottom: 5px;
	color: var(--primary);
	font-size: 0.9rem;
}
.info-content span {
	color: var(--dark);
	font-weight: 500;
}
@media (max-width: 768px) {
	.container {
		padding: 15px;
	}
	.result-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	.copy-buttons {
		width: 100%;
	}
	.btn {
		width: 100%;
		justify-content: center;
	}
	.file-details {
		flex-direction: column;
		text-align: center;
	}
	.info-item {
		flex-direction: column;
		text-align: center;
	}
}
:root {
	--primary: #4361ee;
	--primary-light: #e0e7ff;
	--secondary: #3f37c9;
	--success: #4cc9f0;
	--danger: #f72585;
	--warning: #f8961e;
	--dark: #212529;
	--light: #f8f9fa;
	--gray: #6c757d;
	--border: #e2e8f0;
	--radius: 8px;
	--shadow: 0 4px 6px rgba(0,0,0,0.05);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body {
	background-color: #f5f7ff;
	color: var(--dark);
	line-height: 1.6;
}
.container {
	max-width: 900px;
	margin: 0 auto;
}
header {
	text-align: center;
	margin-bottom: 30px;
}
header h1 {
	font-size: 2rem;
	font-weight: 600;
	color: var(--dark);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.description {
	color: var(--gray);
	max-width: 600px;
	margin: 0 auto;
}
.tool-container {
	background: white;
	padding: 25px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.json-form {
	margin-bottom: 25px;
}
.form-group {
	margin-bottom: 20px;
}
.form-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--dark);
}
.form-group textarea {
	width: 100%;
	padding: 15px;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	line-height: 1.5;
	resize: vertical;
	min-height: 200px;
	transition: all 0.3s ease;
}
.form-group textarea:focus {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}
.form-group small {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	color: var(--gray);
}
.form-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.btn {
	padding: 12px 20px;
	border: none;
	border-radius: var(--radius);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.btn-primary {
	background-color: var(--primary);
	color: white;
}
.btn-primary:hover {
	background-color: var(--secondary);
	transform: translateY(-2px);
}
.btn-secondary {
	background-color: var(--light);
	color: var(--dark);
}
.btn-secondary:hover {
	background-color: #e2e8f0;
}
.btn-sample {
	background-color: var(--warning);
	color: white;
}
.btn-sample:hover {
	background-color: #e68919;
	transform: translateY(-2px);
}
.btn-copy {
	background-color: var(--primary-light);
	color: var(--primary);
}
.btn-download {
	background-color: var(--success);
	color: white;
}
.btn-minify {
	background-color: var(--secondary);
	color: white;
}
.alert {
	padding: 15px;
	border-radius: var(--radius);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.alert-error {
	background-color: #fee2e2;
	color: var(--danger);
	border-left: 4px solid var(--danger);
}
.result-box {
	background: white;
	padding: 20px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
}
.result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border);
}
.result-header h2 {
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.copy-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.json-tabs {
	display: flex;
	border-bottom: 1px solid var(--border);
	margin-bottom: 15px;
}
.tab-btn {
	padding: 10px 20px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--gray);
	transition: all 0.3s;
}
.tab-btn.active {
	color: var(--primary);
	border-bottom-color: var(--primary);
}
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
}
.json-editor {
	background: var(--light);
	border-radius: var(--radius);
	overflow: hidden;
}
.json-editor pre {
	margin: 0;
	padding: 20px;
	background: var(--light);
	overflow-x: auto;
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	line-height: 1.6;
}
.json-editor code {
	background: none;
	padding: 0;
}
/* JSON Syntax Highlighting */
.json-key {
	color: var(--primary);
	font-weight: 600;
}
.json-string {
	color: var(--success);
}
.json-number {
	color: var(--warning);
}
.json-boolean {
	color: var(--danger);
}
.json-analysis {
	padding: 20px;
	background: var(--light);
	border-radius: var(--radius);
}
.analysis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
}
.analysis-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background: white;
	border-radius: var(--radius);
	border-left: 4px solid var(--primary);
}
.analysis-item i {
	font-size: 1.5rem;
	color: var(--primary);
	width: 30px;
	text-align: center;
}
.analysis-content {
	flex: 1;
}
.analysis-content strong {
	display: block;
	margin-bottom: 5px;
	color: var(--primary);
	font-size: 0.9rem;
}
.analysis-content span {
	color: var(--dark);
	font-weight: 600;
	font-size: 1.1rem;
}
.json-features h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
	color: var(--primary);
	font-size: 1.1rem;
}
.features-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.feature-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: white;
	border-radius: var(--radius);
}
.feature-item i {
	color: var(--success);
}
.text-success {
	color: var(--success);
}
@media (max-width: 768px) {
	.container {
		padding: 15px;
	}
	.result-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	.copy-buttons {
		width: 100%;
	}
	.btn {
		width: 100%;
		justify-content: center;
	}
	.analysis-grid {
		grid-template-columns: 1fr;
	}
	.analysis-item {
		flex-direction: column;
		text-align: center;
	}
}
:root {
	--primary: #4361ee;
	--primary-light: #e0e7ff;
	--secondary: #3f37c9;
	--success: #4cc9f0;
	--danger: #f72585;
	--warning: #f8961e;
	--dark: #212529;
	--light: #f8f9fa;
	--gray: #6c757d;
	--border: #e2e8f0;
	--radius: 8px;
	--shadow: 0 4px 6px rgba(0,0,0,0.05);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body {
	background-color: #f5f7ff;
	color: var(--dark);
	line-height: 1.6;
}
.container {
	max-width: 900px;
	margin: 0 auto;
}
header {
	text-align: center;
	margin-bottom: 30px;
}
header h1 {
	font-size: 2rem;
	font-weight: 600;
	color: var(--dark);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.description {
	color: var(--gray);
	max-width: 600px;
	margin: 0 auto;
}
.tool-container {
	background: white;
	padding: 25px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.meta-form {
	margin-bottom: 25px;
}
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}
.form-group {
	margin-bottom: 15px;
}
.form-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--dark);
}
.form-group input,.form-group textarea {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	font-size: 1rem;
	transition: all 0.3s ease;
}
.form-group textarea {
	min-height: 100px;
	resize: vertical;
}
.form-group input:focus,.form-group textarea:focus {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}
.form-group small {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	color: var(--gray);
}
.char-count {
	text-align: right;
}
.form-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}
.btn {
	padding: 12px 20px;
	border: none;
	border-radius: var(--radius);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}
.btn-primary {
	background-color: var(--primary);
	color: white;
}
.btn-primary:hover {
	background-color: var(--secondary);
	transform: translateY(-2px);
}
.btn-secondary {
	background-color: var(--light);
	color: var(--dark);
}
.btn-secondary:hover {
	background-color: #e2e8f0;
}
.alert {
	padding: 15px;
	border-radius: var(--radius);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.alert-error {
	background-color: #fee2e2;
	color: var(--danger);
	border-left: 4px solid var(--danger);
}
.result-box {
	background: white;
	padding: 20px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
}
.result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border);
}
.result-header h2 {
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.copy-buttons {
	display: flex;
	gap: 10px;
}
.btn-copy {
	background-color: var(--primary-light);
	color: var(--primary);
}
.btn-download {
	background-color: var(--success);
	color: white;
}
.meta-tabs {
	display: flex;
	border-bottom: 1px solid var(--border);
	margin-bottom: 15px;
}
.tab-btn {
	padding: 10px 20px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--gray);
	transition: all 0.3s;
}
.tab-btn.active {
	color: var(--primary);
	border-bottom-color: var(--primary);
}
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
}
.meta-result {
	width: 100%;
	min-height: 200px;
	padding: 15px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	line-height: 1.5;
	resize: vertical;
}
.meta-preview {
	padding: 20px;
	background: var(--light);
	border-radius: var(--radius);
}
.preview-title {
	color: var(--primary);
	margin-bottom: 5px;
}
.preview-url {
	color: var(--success);
	font-size: 0.9rem;
	margin-bottom: 10px;
}
.preview-desc {
	color: var(--dark);
}
@media (max-width: 768px) {
	.container {
		padding: 15px;
	}
	.form-grid {
		grid-template-columns: 1fr;
	}
	.result-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	.copy-buttons {
		width: 100%;
	}
	.btn {
		width: 100%;
		justify-content: center;
	}
}
:root {
	--primary: #4361ee;
	--primary-light: #e0e7ff;
	--secondary: #3f37c9;
	--success: #4cc9f0;
	--danger: #f72585;
	--warning: #f8961e;
	--dark: #212529;
	--light: #f8f9fa;
	--gray: #6c757d;
	--border: #e2e8f0;
	--radius: 8px;
	--shadow: 0 4px 6px rgba(0,0,0,0.05);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body {
	background-color: #f5f7ff;
	color: var(--dark);
	line-height: 1.6;
}
.container {
	max-width: 900px;
	margin: 0 auto;
}
header {
	text-align: center;
	margin-bottom: 30px;
}
header h1 {
	font-size: 2rem;
	font-weight: 600;
	color: var(--dark);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.description {
	color: var(--gray);
	max-width: 600px;
	margin: 0 auto;
}
.tool-container {
	background: white;
	padding: 25px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.url-form {
	margin-bottom: 25px;
}
.form-group {
	margin-bottom: 20px;
}
.form-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--dark);
}
.form-group textarea {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	font-size: 1rem;
	transition: all 0.3s ease;
	resize: vertical;
	min-height: 120px;
}
.form-group textarea:focus {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}
.radio-group {
	display: flex;
	gap: 15px;
	margin-top: 10px;
}
.radio-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: all 0.3s ease;
	flex: 1;
}
.radio-option:hover {
	border-color: var(--primary);
	background-color: var(--primary-light);
}
.radio-option.selected {
	border-color: var(--primary);
	background-color: var(--primary-light);
}
.radio-option input[type="radio"] {
	display: none;
}
.radio-custom {
	width: 18px;
	height: 18px;
	border: 2px solid var(--border);
	border-radius: 50%;
	position: relative;
	transition: all 0.3s ease;
}
.radio-option.selected .radio-custom {
	border-color: var(--primary);
	background-color: var(--primary);
}
.radio-option.selected .radio-custom::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background-color: white;
	border-radius: 50%;
}
.radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}
.form-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}
.btn {
	padding: 12px 20px;
	border: none;
	border-radius: var(--radius);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.btn-primary {
	background-color: var(--primary);
	color: white;
}
.btn-primary:hover {
	background-color: var(--secondary);
	transform: translateY(-2px);
}
.btn-secondary {
	background-color: var(--light);
	color: var(--dark);
}
.btn-secondary:hover {
	background-color: #e2e8f0;
}
.btn-copy {
	background-color: var(--primary-light);
	color: var(--primary);
}
.btn-qr {
	background-color: var(--success);
	color: white;
}
.alert {
	padding: 15px;
	border-radius: var(--radius);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.alert-error {
	background-color: #fee2e2;
	color: var(--danger);
	border-left: 4px solid var(--danger);
}
.result-box {
	background: white;
	padding: 20px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
}
.result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border);
}
.result-header h2 {
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.copy-buttons {
	display: flex;
	gap: 10px;
}
.url-tabs {
	display: flex;
	border-bottom: 1px solid var(--border);
	margin-bottom: 15px;
}
.tab-btn {
	padding: 10px 20px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--gray);
	transition: all 0.3s;
}
.tab-btn.active {
	color: var(--primary);
	border-bottom-color: var(--primary);
}
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
}
.url-result {
	width: 100%;
	min-height: 150px;
	padding: 15px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	line-height: 1.5;
	resize: vertical;
	background-color: var(--light);
}
.url-preview {
	padding: 20px;
	background: var(--light);
	border-radius: var(--radius);
}
.preview-item {
	margin-bottom: 15px;
	padding: 10px;
	background: white;
	border-radius: var(--radius);
	border-left: 4px solid var(--primary);
}
.preview-item:last-child {
	margin-bottom: 0;
}
.preview-item strong {
	display: block;
	margin-bottom: 5px;
	color: var(--primary);
	font-size: 0.9rem;
}
.preview-text {
	word-break: break-all;
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
}
.preview-action {
	color: var(--success);
	font-weight: 500;
}
@media (max-width: 768px) {
	.container {
		padding: 15px;
	}
	.radio-group {
		flex-direction: column;
	}
	.result-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	.copy-buttons {
		width: 100%;
	}
	.btn {
		width: 100%;
		justify-content: center;
	}
}
:root {
	--primary: #4361ee;
	--primary-light: #e0e7ff;
	--secondary: #3f37c9;
	--success: #4cc9f0;
	--danger: #f72585;
	--warning: #f8961e;
	--dark: #212529;
	--light: #f8f9fa;
	--gray: #6c757d;
	--border: #e2e8f0;
	--radius: 8px;
	--shadow: 0 4px 6px rgba(0,0,0,0.05);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
body {
	background-color: #f5f7ff;
	color: var(--dark);
	line-height: 1.6;
}
.container {
	max-width: 900px;
	margin: 0 auto;
}
header {
	text-align: center;
	margin-bottom: 30px;
}
header h1 {
	font-size: 2rem;
	font-weight: 600;
	color: var(--dark);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.description {
	color: var(--gray);
	max-width: 600px;
	margin: 0 auto;
}
.tool-container {
	background: white;
	padding: 25px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.header-form {
	margin-bottom: 25px;
}
.form-group {
	margin-bottom: 20px;
}
.form-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--dark);
}
.form-group input {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	font-size: 1rem;
	transition: all 0.3s ease;
}
.form-group input:focus {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}
.form-group small {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	color: var(--gray);
}
.form-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}
.btn {
	padding: 12px 20px;
	border: none;
	border-radius: var(--radius);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.btn-primary {
	background-color: var(--primary);
	color: white;
}
.btn-primary:hover {
	background-color: var(--secondary);
	transform: translateY(-2px);
}
.btn-secondary {
	background-color: var(--light);
	color: var(--dark);
}
.btn-secondary:hover {
	background-color: #e2e8f0;
}
.btn-copy {
	background-color: var(--primary-light);
	color: var(--primary);
}
.btn-download {
	background-color: var(--success);
	color: white;
}
.alert {
	padding: 15px;
	border-radius: var(--radius);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.alert-error {
	background-color: #fee2e2;
	color: var(--danger);
	border-left: 4px solid var(--danger);
}
.result-box {
	background: white;
	padding: 20px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--border);
}
.result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border);
}
.result-header h2 {
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.copy-buttons {
	display: flex;
	gap: 10px;
}
.header-tabs {
	display: flex;
	border-bottom: 1px solid var(--border);
	margin-bottom: 15px;
}
.tab-btn {
	padding: 10px 20px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-weight: 500;
	color: var(--gray);
	transition: all 0.3s;
}
.tab-btn.active {
	color: var(--primary);
	border-bottom-color: var(--primary);
}
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
}
.header-table {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--light);
}
.header-row {
	display: flex;
	border-bottom: 1px solid var(--border);
	background: white;
	transition: background-color 0.3s ease;
}
.header-row:hover {
	background-color: var(--primary-light);
}
.header-row:last-child {
	border-bottom: none;
}
.header-key {
	background: var(--primary-light);
	padding: 15px;
	min-width: 200px;
	font-weight: 600;
	border-right: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--primary);
}
.header-value {
	padding: 15px;
	flex: 1;
	word-break: break-word;
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
}
.header-result {
	width: 100%;
	min-height: 300px;
	padding: 15px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	line-height: 1.5;
	resize: vertical;
	background-color: var(--light);
}
.header-analysis {
	padding: 20px;
	background: var(--light);
	border-radius: var(--radius);
}
.analysis-item {
	margin-bottom: 25px;
	padding: 20px;
	background: white;
	border-radius: var(--radius);
	border-left: 4px solid var(--primary);
}
.analysis-item:last-child {
	margin-bottom: 0;
}
.analysis-item h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
	color: var(--primary);
	font-size: 1.1rem;
}
.status-badge {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 1.2rem;
	margin-bottom: 10px;
}
.status-success {
	background-color: var(--success);
	color: white;
}
.status-danger {
	background-color: var(--danger);
	color: white;
}
.security-headers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.security-item {
	padding: 10px;
	background: var(--light);
	border-radius: var(--radius);
	border-left: 3px solid var(--success);
}
.security-item strong {
	color: var(--primary);
	display: block;
	margin-bottom: 5px;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-top: 15px;
}
.stat-item {
	text-align: center;
	padding: 15px;
	background: var(--light);
	border-radius: var(--radius);
}
.stat-number {
	display: block;
	font-size: 2rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 5px;
}
.stat-label {
	font-size: 0.9rem;
	color: var(--gray);
}
@media (max-width: 768px) {
	.container {
		padding: 15px;
	}
	.result-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	.copy-buttons {
		width: 100%;
	}
	.btn {
		width: 100%;
		justify-content: center;
	}
	.header-row {
		flex-direction: column;
	}
	.header-key {
		min-width: auto;
		border-right: none;
		border-bottom: 1px solid var(--border);
	}
	.stats-grid {
		grid-template-columns: 1fr;
	}
}
/* Password Generator Styles */
.password-tool-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
.password-tool-header {
	text-align: center;
	margin-bottom: 30px;
}
.password-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}
.password-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}
.password-tool-header p {
	color: #666;
	font-size: 16px;
}
.password-tool-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 30px;
}
.password-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}
.password-range-container {
	display: flex;
	align-items: center;
	gap: 15px;
}
.password-range-slider {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: #ddd;
	outline: none;
}
.password-range-slider::after {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #007bff;
	cursor: pointer;
}
.password-range-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #007bff;
	cursor: pointer;
	border: none;
}
.password-length-display {
	font-weight: bold;
	color: #007bff;
	min-width: 30px;
	text-align: center;
}
.password-count-select {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: white;
}
.password-count-select:focus {
	outline: none;
	border-color: #007bff;
}
.password-checkbox-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.password-checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	color: #333;
}
.password-checkbox-item input[type="checkbox"] {
	display: none;
}
.password-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}
.password-checkbox-item input[type="checkbox"]:checked + .password-checkmark {
	background: #007bff;
	border-color: #007bff;
}
.password-checkbox-item input[type="checkbox"]:checked + .password-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 12px;
	font-weight: bold;
}
.password-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}
.password-result h3 {
	margin-bottom: 20px;
	color: #333;
}
.password-list {
	margin-bottom: 20px;
}
.password-item {
	background: white;
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 6px;
	border: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.password-text {
	font-family: 'Courier New', monospace;
	font-size: 16px;
	color: #333;
	word-break: break-all;
}
.password-copy {
	background: #007bff;
	color: white;
	border: none;
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	transition: background 0.3s ease;
}
.password-copy:hover {
	background: #0056b3;
}
.password-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}
.password-strength-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
	margin-bottom: 30px;
}
.password-strength-section h3 {
	margin-bottom: 20px;
	color: #333;
	display: flex;
	align-items: center;
	gap: 8px;
}
.password-strength-section h3 i {
	color: #007bff;
}
.password-strength-meter {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
}
.password-strength-bar {
	flex: 1;
	height: 10px;
	background: #ddd;
	border-radius: 5px;
	overflow: hidden;
}
.password-strength-fill {
	height: 100%;
	width: 0%;
	transition: all 0.3s ease;
	border-radius: 5px;
}
.password-strength-text {
	font-weight: bold;
	min-width: 80px;
	text-align: center;
}
.password-strength-details {
	font-size: 14px;
	color: #666;
}
/* QR Code Generator Styles */
.qr-tool-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
.qr-tool-header {
	text-align: center;
	margin-bottom: 30px;
}
.qr-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}
.qr-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}
.qr-tool-header p {
	color: #666;
	font-size: 16px;
}
.qr-tool-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 30px;
}
.qr-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}
.qr-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}
.qr-form-group {
	margin-bottom: 20px;
}
.qr-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}
.qr-form-group input,.qr-form-group select,.qr-form-group textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
}
.qr-form-group input:focus,.qr-form-group select:focus,.qr-form-group textarea:focus {
	outline: none;
	border-color: #007bff;
}
.qr-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}
.qr-result h3 {
	margin-bottom: 20px;
	color: #333;
}
.qr-image-container {
	text-align: center;
	margin-bottom: 20px;
	padding: 20px;
	background: white;
	border-radius: 8px;
	border: 1px solid #ddd;
}
.qr-image-container img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}
.qr-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
/* Tool Info Styles */
.tool-info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.info-card {
	background: #f8f9fa;
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}
.info-card h3 {
	color: #333;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.info-card h3 i {
	color: #007bff;
}
.info-card ul {
	list-style: none;
	padding: 0;
}
.info-card li {
	padding: 8px 0;
	border-bottom: 1px solid #e9ecef;
	color: #666;
}
.info-card li:last-child {
	border-bottom: none;
}
.info-card li strong {
	color: #333;
}
/* Responsive Design for Password and QR Tools */
@media (max-width: 768px) {
	.password-tool-content,.qr-tool-content {
		grid-template-columns: 1fr;
	}
	.tool-info {
		grid-template-columns: 1fr;
	}
	.password-checkbox-group {
		grid-template-columns: 1fr;
	}
	.qr-form-row {
		grid-template-columns: 1fr;
	}
	.password-actions,.qr-actions {
		flex-direction: column;
	}
	.password-item {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
}

/* Regex Tester Styles */
.regex-tool-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.regex-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.regex-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.regex-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.regex-tool-header p {
	color: #666;
	font-size: 16px;
}

.regex-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.regex-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

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

.regex-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.regex-pattern-input {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	transition: border-color 0.3s ease;
}

.regex-pattern-input:focus {
	outline: none;
	border-color: #007bff;
}

.regex-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 10px;
}

.regex-flag-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.regex-flag-item input[type="checkbox"] {
	display: none;
}

.regex-flag-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.regex-flag-item input[type="checkbox"]:checked + .regex-flag-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.regex-flag-item input[type="checkbox"]:checked + .regex-flag-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.regex-test-textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	resize: vertical;
	transition: border-color 0.3s ease;
}

.regex-test-textarea:focus {
	outline: none;
	border-color: #007bff;
}

.regex-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.regex-sample-select,
.regex-pattern-select {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: white;
}

.regex-sample-select:focus,
.regex-pattern-select:focus {
	outline: none;
	border-color: #007bff;
}

.regex-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
}

.regex-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.regex-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.regex-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.regex-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.regex-summary-label {
	font-weight: 500;
	color: #666;
}

.regex-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.regex-matches {
	margin-bottom: 25px;
}

.regex-match-item {
	background: white;
	padding: 15px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 10px;
}

.match-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.match-number {
	background: #007bff;
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

.match-position {
	color: #666;
	font-size: 14px;
}

.match-text {
	font-family: 'Courier New', monospace;
	background: #f8f9fa;
	padding: 10px;
	border-radius: 4px;
	border-left: 4px solid #007bff;
	margin-bottom: 8px;
	word-break: break-all;
}

.match-groups {
	font-size: 14px;
	color: #666;
}

.no-matches {
	text-align: center;
	color: #666;
	font-style: italic;
	padding: 20px;
}

.regex-highlighted-text {
	margin-top: 20px;
}

.regex-highlighted-text h4 {
	margin-bottom: 10px;
	color: #333;
}

.highlighted-text-content {
	background: white;
	padding: 15px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	font-family: 'Courier New', monospace;
	white-space: pre-wrap;
	word-wrap: break-word;
	line-height: 1.5;
}

.highlighted-match {
	background: #ffeb3b;
	color: #333;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: bold;
}

.regex-explanation-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
	margin-bottom: 30px;
}

.regex-explanation-section h3 {
	margin-bottom: 20px;
	color: #333;
}

.explanation-breakdown h4 {
	color: #007bff;
	margin-bottom: 10px;
	margin-top: 20px;
}

.explanation-breakdown ul {
	list-style: none;
	padding: 0;
}

.explanation-breakdown li {
	padding: 8px 0;
	border-bottom: 1px solid #e9ecef;
	color: #666;
}

.explanation-breakdown li:last-child {
	border-bottom: none;
}

.explanation-breakdown li strong {
	color: #333;
	font-family: 'Courier New', monospace;
}

.explanation-breakdown p {
	color: #666;
	line-height: 1.6;
}

/* Responsive Design for Regex Tester */
@media (max-width: 768px) {
	.regex-form-row {
		grid-template-columns: 1fr;
	}
	
	.regex-flags {
		flex-direction: column;
		gap: 10px;
	}
	
	.regex-button-group {
		flex-direction: column;
	}
	
	.regex-summary {
		grid-template-columns: 1fr;
	}
	
	.match-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}
}

/* Diff Checker Styles */
.diff-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.diff-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.diff-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.diff-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.diff-tool-header p {
	color: #666;
	font-size: 16px;
}

.diff-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.diff-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.diff-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

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

.diff-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.diff-textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	resize: vertical;
	transition: border-color 0.3s ease;
}

.diff-textarea:focus {
	outline: none;
	border-color: #007bff;
}

.diff-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.diff-option-group {
	display: flex;
	gap: 20px;
}

.diff-option-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.diff-option-item input[type="checkbox"] {
	display: none;
}

.diff-option-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.diff-option-item input[type="checkbox"]:checked + .diff-option-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.diff-option-item input[type="checkbox"]:checked + .diff-option-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.diff-sample-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.diff-sample-group label {
	font-weight: 500;
	color: #333;
	margin: 0;
}

.diff-sample-select {
	padding: 8px 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: white;
}

.diff-sample-select:focus {
	outline: none;
	border-color: #007bff;
}

.diff-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.diff-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.diff-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.diff-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.diff-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.diff-summary-label {
	font-weight: 500;
	color: #666;
}

.diff-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.diff-summary-value.added {
	color: #28a745;
}

.diff-summary-value.removed {
	color: #dc3545;
}

.diff-summary-value.modified {
	color: #ffc107;
}

.diff-view-options {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.diff-view-option {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.diff-view-option input[type="radio"] {
	display: none;
}

.diff-view-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 50%;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.diff-view-option input[type="radio"]:checked + .diff-view-checkmark {
	border-color: #007bff;
}

.diff-view-option input[type="radio"]:checked + .diff-view-checkmark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background: #007bff;
	border-radius: 50%;
}

.diff-content {
	margin-bottom: 25px;
}

/* Side by Side View */
.diff-side-by-side {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.diff-original h4,
.diff-modified h4 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
	font-weight: 600;
}

.diff-lines {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
}

.diff-line {
	display: flex;
	padding: 8px 12px;
	border-bottom: 1px solid #f8f9fa;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.4;
}

.diff-line:last-child {
	border-bottom: none;
}

.diff-line-unchanged {
	background: white;
}

.diff-line-added {
	background: #e6ffe6;
	border-left: 4px solid #28a745;
}

.diff-line-removed {
	background: #ffe6e6;
	border-left: 4px solid #dc3545;
}

.diff-line-modified {
	background: #fff3e6;
	border-left: 4px solid #ffc107;
}

.line-number {
	color: #666;
	font-weight: bold;
	min-width: 40px;
	margin-right: 10px;
}

.line-content {
	flex: 1;
	word-break: break-all;
}

/* Unified View */
.diff-unified .diff-lines {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.line-prefix {
	font-weight: bold;
	margin-right: 8px;
	min-width: 20px;
}

/* Inline View */
.diff-inline .diff-lines {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.line-separator {
	color: #007bff;
	font-weight: bold;
	margin: 0 10px;
}

.diff-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

/* Responsive Design for Diff Checker */
@media (max-width: 768px) {
	.diff-form-row {
		grid-template-columns: 1fr;
	}
	
	.diff-options {
		flex-direction: column;
		gap: 15px;
		align-items: stretch;
	}
	
	.diff-option-group {
		flex-direction: column;
		gap: 10px;
	}
	
	.diff-sample-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	.diff-button-group {
		flex-direction: column;
	}
	
	.diff-summary {
		grid-template-columns: 1fr;
	}
	
	.diff-view-options {
		flex-direction: column;
		gap: 10px;
	}
	
	.diff-side-by-side {
		grid-template-columns: 1fr;
	}
	
	.diff-actions {
		flex-direction: column;
	}
}

/* XML to JSON Converter Styles */
.xml-json-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.xml-json-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.xml-json-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.xml-json-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.xml-json-tool-header p {
	color: #666;
	font-size: 16px;
}

.xml-json-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.xml-json-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.xml-json-form-group {
	margin-bottom: 20px;
}

.xml-json-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.xml-json-textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	resize: vertical;
	transition: border-color 0.3s ease;
}

.xml-json-textarea:focus {
	outline: none;
	border-color: #007bff;
}

.xml-json-input-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.xml-json-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.xml-json-option-group {
	display: flex;
	gap: 20px;
}

.xml-json-option-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.xml-json-option-item input[type="checkbox"] {
	display: none;
}

.xml-json-option-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.xml-json-option-item input[type="checkbox"]:checked + .xml-json-option-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.xml-json-option-item input[type="checkbox"]:checked + .xml-json-option-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.xml-json-sample-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.xml-json-sample-group label {
	font-weight: 500;
	color: #333;
	margin: 0;
}

.xml-json-sample-select {
	padding: 8px 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: white;
}

.xml-json-sample-select:focus {
	outline: none;
	border-color: #007bff;
}

.xml-json-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.xml-json-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.xml-json-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.xml-json-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.xml-json-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.xml-json-summary-label {
	font-weight: 500;
	color: #666;
}

.xml-json-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.xml-json-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	border-bottom: 2px solid #e9ecef;
}

.xml-json-tab-btn {
	padding: 12px 20px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	transition: all 0.3s ease;
}

.xml-json-tab-btn:hover {
	color: #007bff;
}

.xml-json-tab-btn.active {
	color: #007bff;
	border-bottom-color: #007bff;
}

.xml-json-tab-content {
	display: none;
}

.xml-json-tab-content.active {
	display: block;
}

.xml-json-output-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
}

.xml-json-output-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.xml-json-output-header h4 {
	margin: 0;
	color: #333;
}

.xml-json-output-actions {
	display: flex;
	gap: 8px;
}

.xml-json-output {
	margin: 0;
	padding: 20px;
	background: #f8f9fa;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.5;
	overflow-x: auto;
	max-height: 500px;
	overflow-y: auto;
}

.xml-json-analysis-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.xml-json-analysis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.xml-json-analysis-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.xml-json-analysis-item h4 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.xml-json-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #e9ecef;
}

.stat-item:last-child {
	border-bottom: none;
}

.stat-name {
	font-weight: 500;
	color: #666;
}

.stat-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.xml-json-errors {
	color: #dc3545;
	font-size: 14px;
}

.xml-json-performance {
	color: #28a745;
	font-size: 14px;
}

.xml-json-tree-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.xml-json-tree-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.xml-json-tree-header h4 {
	margin: 0;
	color: #333;
}

.xml-json-tree-actions {
	display: flex;
	gap: 8px;
}

.xml-json-tree {
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.6;
}

.tree-node {
	padding: 4px 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tree-node:hover {
	background-color: #f8f9fa;
}

.tree-icon {
	margin-right: 8px;
}

.tree-name {
	font-weight: bold;
	color: #007bff;
}

.tree-attributes {
	color: #666;
	font-size: 12px;
}

.tree-value {
	color: #28a745;
}

.tree-children {
	margin-left: 20px;
}

/* Responsive Design for XML to JSON Converter */
@media (max-width: 768px) {
	.xml-json-options {
		flex-direction: column;
		gap: 15px;
		align-items: stretch;
	}
	
	.xml-json-option-group {
		flex-direction: column;
		gap: 10px;
	}
	
	.xml-json-sample-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	.xml-json-button-group {
		flex-direction: column;
	}
	
	.xml-json-summary {
		grid-template-columns: 1fr;
	}
	
	.xml-json-tabs {
		flex-direction: column;
	}
	
	.xml-json-tab-btn {
		border-bottom: none;
		border-right: 2px solid transparent;
	}
	
	.xml-json-tab-btn.active {
		border-right-color: #007bff;
	}
	
	.xml-json-analysis-grid {
		grid-template-columns: 1fr;
	}
	
	.xml-json-output-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.xml-json-output-actions {
		justify-content: center;
	}
	
	.xml-json-tree-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.xml-json-tree-actions {
		justify-content: center;
	}
}

/* CSV to JSON Converter Styles */
.csv-json-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.csv-json-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.csv-json-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.csv-json-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.csv-json-tool-header p {
	color: #666;
	font-size: 16px;
}

.csv-json-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.csv-json-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.csv-json-form-group {
	margin-bottom: 20px;
}

.csv-json-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.csv-json-textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	resize: vertical;
	transition: border-color 0.3s ease;
}

.csv-json-textarea:focus {
	outline: none;
	border-color: #007bff;
}

.csv-json-input-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.csv-json-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.csv-json-option-group {
	display: flex;
	gap: 20px;
}

.csv-json-option-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.csv-json-option-item input[type="checkbox"] {
	display: none;
}

.csv-json-option-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.csv-json-option-item input[type="checkbox"]:checked + .csv-json-option-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.csv-json-option-item input[type="checkbox"]:checked + .csv-json-option-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.csv-json-delimiter-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.csv-json-delimiter-group label {
	font-weight: 500;
	color: #333;
	margin: 0;
}

.csv-json-delimiter-select {
	padding: 8px 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: white;
}

.csv-json-delimiter-select:focus {
	outline: none;
	border-color: #007bff;
}

.csv-json-sample-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.csv-json-sample-group label {
	font-weight: 500;
	color: #333;
	margin: 0;
}

.csv-json-sample-select {
	padding: 8px 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: white;
}

.csv-json-sample-select:focus {
	outline: none;
	border-color: #007bff;
}

.csv-json-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.csv-json-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.csv-json-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.csv-json-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.csv-json-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.csv-json-summary-label {
	font-weight: 500;
	color: #666;
}

.csv-json-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.csv-json-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	border-bottom: 2px solid #e9ecef;
}

.csv-json-tab-btn {
	padding: 12px 20px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	transition: all 0.3s ease;
}

.csv-json-tab-btn:hover {
	color: #007bff;
}

.csv-json-tab-btn.active {
	color: #007bff;
	border-bottom-color: #007bff;
}

.csv-json-tab-content {
	display: none;
}

.csv-json-tab-content.active {
	display: block;
}

.csv-json-output-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
}

.csv-json-output-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.csv-json-output-header h4 {
	margin: 0;
	color: #333;
}

.csv-json-output-actions {
	display: flex;
	gap: 8px;
}

.csv-json-output {
	margin: 0;
	padding: 20px;
	background: #f8f9fa;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.5;
	overflow-x: auto;
	max-height: 500px;
	overflow-y: auto;
}

.csv-json-preview-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
}

.csv-json-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.csv-json-preview-header h4 {
	margin: 0;
	color: #333;
}

.csv-json-preview-actions {
	display: flex;
	gap: 8px;
}

.csv-json-preview-table {
	padding: 20px;
	overflow-x: auto;
}

.csv-preview-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.csv-preview-table th,
.csv-preview-table td {
	padding: 8px 12px;
	text-align: left;
	border: 1px solid #e9ecef;
}

.csv-preview-table th {
	background: #f8f9fa;
	font-weight: 600;
	color: #333;
}

.csv-preview-table td {
	background: white;
}

.csv-preview-table tr:nth-child(even) td {
	background: #f8f9fa;
}

.csv-preview-note {
	margin-top: 15px;
	padding: 10px;
	background: #e3f2fd;
	border-radius: 6px;
	color: #1976d2;
	font-size: 14px;
	text-align: center;
}

.csv-json-analysis-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.csv-json-analysis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.csv-json-analysis-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.csv-json-analysis-item h4 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.csv-json-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.csv-json-performance {
	color: #28a745;
	font-size: 14px;
}

/* Responsive Design for CSV to JSON Converter */
@media (max-width: 768px) {
	.csv-json-options {
		flex-direction: column;
		gap: 15px;
		align-items: stretch;
	}
	
	.csv-json-option-group {
		flex-direction: column;
		gap: 10px;
	}
	
	.csv-json-delimiter-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	.csv-json-sample-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	.csv-json-button-group {
		flex-direction: column;
	}
	
	.csv-json-summary {
		grid-template-columns: 1fr;
	}
	
	.csv-json-tabs {
		flex-direction: column;
	}
	
	.csv-json-tab-btn {
		border-bottom: none;
		border-right: 2px solid transparent;
	}
	
	.csv-json-tab-btn.active {
		border-right-color: #007bff;
	}
	
	.csv-json-analysis-grid {
		grid-template-columns: 1fr;
	}
	
	.csv-json-output-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.csv-json-output-actions {
		justify-content: center;
	}
	
	.csv-json-preview-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.csv-json-preview-actions {
		justify-content: center;
	}
	
	.csv-preview-table {
		font-size: 12px;
	}
	
	.csv-preview-table th,
	.csv-preview-table td {
		padding: 6px 8px;
	}
}

/* YAML to JSON Converter Styles */
.yaml-json-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.yaml-json-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.yaml-json-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.yaml-json-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.yaml-json-tool-header p {
	color: #666;
	font-size: 16px;
}

.yaml-json-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.yaml-json-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.yaml-json-form-group {
	margin-bottom: 20px;
}

.yaml-json-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.yaml-json-textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	resize: vertical;
	transition: border-color 0.3s ease;
}

.yaml-json-textarea:focus {
	outline: none;
	border-color: #007bff;
}

.yaml-json-input-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.yaml-json-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.yaml-json-option-group {
	display: flex;
	gap: 20px;
}

.yaml-json-option-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.yaml-json-option-item input[type="checkbox"] {
	display: none;
}

.yaml-json-option-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.yaml-json-option-item input[type="checkbox"]:checked + .yaml-json-option-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.yaml-json-option-item input[type="checkbox"]:checked + .yaml-json-option-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.yaml-json-indent-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.yaml-json-indent-group label {
	font-weight: 500;
	color: #333;
	margin: 0;
}

.yaml-json-indent-select {
	padding: 8px 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: white;
}

.yaml-json-indent-select:focus {
	outline: none;
	border-color: #007bff;
}

.yaml-json-sample-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.yaml-json-sample-group label {
	font-weight: 500;
	color: #333;
	margin: 0;
}

.yaml-json-sample-select {
	padding: 8px 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: white;
}

.yaml-json-sample-select:focus {
	outline: none;
	border-color: #007bff;
}

.yaml-json-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.yaml-json-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.yaml-json-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.yaml-json-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.yaml-json-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.yaml-json-summary-label {
	font-weight: 500;
	color: #666;
}

.yaml-json-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.yaml-json-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	border-bottom: 2px solid #e9ecef;
}

.yaml-json-tab-btn {
	padding: 12px 20px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	transition: all 0.3s ease;
}

.yaml-json-tab-btn:hover {
	color: #007bff;
}

.yaml-json-tab-btn.active {
	color: #007bff;
	border-bottom-color: #007bff;
}

.yaml-json-tab-content {
	display: none;
}

.yaml-json-tab-content.active {
	display: block;
}

.yaml-json-output-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
}

.yaml-json-output-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.yaml-json-output-header h4 {
	margin: 0;
	color: #333;
}

.yaml-json-output-actions {
	display: flex;
	gap: 8px;
}

.yaml-json-output {
	margin: 0;
	padding: 20px;
	background: #f8f9fa;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.5;
	overflow-x: auto;
	max-height: 500px;
	overflow-y: auto;
}

.yaml-json-preview-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
}

.yaml-json-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.yaml-json-preview-header h4 {
	margin: 0;
	color: #333;
}

.yaml-json-preview-actions {
	display: flex;
	gap: 8px;
}

.yaml-json-preview-content {
	margin: 0;
	padding: 20px;
	background: #f8f9fa;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.5;
	overflow-x: auto;
	max-height: 500px;
	overflow-y: auto;
	color: #333;
}

.yaml-json-analysis-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.yaml-json-analysis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.yaml-json-analysis-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.yaml-json-analysis-item h4 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.yaml-json-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.yaml-json-performance {
	color: #28a745;
	font-size: 14px;
}

/* Responsive Design for YAML to JSON Converter */
@media (max-width: 768px) {
	.yaml-json-options {
		flex-direction: column;
		gap: 15px;
		align-items: stretch;
	}
	
	.yaml-json-option-group {
		flex-direction: column;
		gap: 10px;
	}
	
	.yaml-json-indent-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	.yaml-json-sample-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	.yaml-json-button-group {
		flex-direction: column;
	}
	
	.yaml-json-summary {
		grid-template-columns: 1fr;
	}
	
	.yaml-json-tabs {
		flex-direction: column;
	}
	
	.yaml-json-tab-btn {
		border-bottom: none;
		border-right: 2px solid transparent;
	}
	
	.yaml-json-tab-btn.active {
		border-right-color: #007bff;
	}
	
	.yaml-json-analysis-grid {
		grid-template-columns: 1fr;
	}
	
	.yaml-json-output-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.yaml-json-output-actions {
		justify-content: center;
	}
	
	.yaml-json-preview-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.yaml-json-preview-actions {
		justify-content: center;
	}
	
	.yaml-json-output,
	.yaml-json-preview-content {
		font-size: 12px;
		padding: 15px;
	}
}

/* Hash Generator Styles */
.hash-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.hash-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.hash-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.hash-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.hash-tool-header p {
	color: #666;
	font-size: 16px;
}

.hash-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.hash-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.hash-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 25px;
	border-bottom: 2px solid #e9ecef;
}

.hash-tab-btn {
	padding: 12px 20px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	transition: all 0.3s ease;
}

.hash-tab-btn:hover {
	color: #007bff;
}

.hash-tab-btn.active {
	color: #007bff;
	border-bottom-color: #007bff;
}

.hash-tab-content {
	display: none;
}

.hash-tab-content.active {
	display: block;
}

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

.hash-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.hash-textarea {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	resize: vertical;
	transition: border-color 0.3s ease;
}

.hash-textarea:focus {
	outline: none;
	border-color: #007bff;
}

.hash-input-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.hash-algorithms {
	margin-bottom: 20px;
}

.hash-algorithms h4 {
	margin-bottom: 15px;
	color: #333;
}

.hash-algorithm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}

.hash-algorithm-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 10px;
	background: white;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.hash-algorithm-item:hover {
	border-color: #007bff;
	background: #f8f9fa;
}

.hash-algorithm-item input[type="checkbox"] {
	display: none;
}

.hash-algorithm-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 10px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.hash-algorithm-item input[type="checkbox"]:checked + .hash-algorithm-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.hash-algorithm-item input[type="checkbox"]:checked + .hash-algorithm-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.hash-algorithm-name {
	font-weight: 500;
	color: #333;
	margin-right: 8px;
}

.hash-algorithm-desc {
	font-size: 12px;
	color: #666;
	margin-left: auto;
}

.hash-options {
	margin-bottom: 20px;
}

.hash-option-group {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.hash-option-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.hash-option-item input[type="checkbox"] {
	display: none;
}

.hash-option-checkmark {
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.hash-option-item input[type="checkbox"]:checked + .hash-option-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.hash-option-item input[type="checkbox"]:checked + .hash-option-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.hash-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* File Upload Styles */
.hash-file-upload {
	position: relative;
}

.hash-file-input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.hash-file-drop-zone {
	border: 2px dashed #ddd;
	border-radius: 8px;
	padding: 40px 20px;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
	background: white;
}

.hash-file-drop-zone:hover,
.hash-file-drop-zone.drag-over {
	border-color: #007bff;
	background: #f8f9fa;
}

.hash-file-drop-zone i {
	font-size: 48px;
	color: #007bff;
	margin-bottom: 15px;
}

.hash-file-drop-zone p {
	margin: 0 0 10px 0;
	color: #333;
	font-weight: 500;
}

.hash-file-info {
	font-size: 12px;
	color: #666;
}

.hash-file-info-display {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: white;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	margin-top: 15px;
}

.hash-file-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.hash-file-name {
	font-weight: 500;
	color: #333;
}

.hash-file-size {
	font-size: 12px;
	color: #666;
}

/* Hash Compare Styles */
.hash-compare-section {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.hash-compare-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.hash-compare-input {
	display: flex;
	flex-direction: column;
}

.hash-compare-input label {
	font-weight: 500;
	color: #333;
	margin-bottom: 8px;
}

.hash-compare-text {
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	transition: border-color 0.3s ease;
}

.hash-compare-text:focus {
	outline: none;
	border-color: #007bff;
}

.hash-compare-options {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

/* Output Styles */
.hash-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.hash-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.hash-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.hash-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hash-summary-label {
	font-weight: 500;
	color: #666;
}

.hash-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.hash-results-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
	margin-bottom: 20px;
}

.hash-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.hash-results-header h4 {
	margin: 0;
	color: #333;
}

.hash-results-actions {
	display: flex;
	gap: 8px;
}

.hash-results {
	padding: 20px;
}

.hash-result-item {
	margin-bottom: 15px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.hash-result-item:last-child {
	margin-bottom: 0;
}

.hash-result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.hash-result-value {
	font-family: 'Courier New', monospace;
	font-size: 14px;
	color: #333;
	word-break: break-all;
	background: white;
	padding: 10px;
	border-radius: 4px;
	border: 1px solid #e9ecef;
}

.hash-info-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.hash-info-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.hash-info-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.hash-info-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.hash-info-item h5 {
	margin-bottom: 10px;
	color: #333;
}

.hash-info-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hash-info-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hash-info-label {
	font-weight: 500;
	color: #666;
}

.hash-info-value {
	font-weight: bold;
	color: #007bff;
}

.hash-info-value.zayıf {
	color: #dc3545;
}

.hash-info-value.orta {
	color: #ffc107;
}

.hash-info-value.güçlü {
	color: #28a745;
}

.hash-info-value.çok-güçlü {
	color: #007bff;
}

/* Compare Result Styles */
.hash-compare-result {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.hash-compare-result-content h3 {
	margin-bottom: 20px;
	color: #333;
}

.compare-result-content {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.compare-result-item {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	padding: 15px;
	border-radius: 6px;
}

.compare-result-item.match {
	background: #d4edda;
	border: 1px solid #c3e6cb;
}

.compare-result-item.no-match {
	background: #f8d7da;
	border: 1px solid #f5c6cb;
}

.compare-result-icon {
	font-size: 24px;
}

.compare-result-item.match .compare-result-icon {
	color: #28a745;
}

.compare-result-item.no-match .compare-result-icon {
	color: #dc3545;
}

.compare-result-text h4 {
	margin: 0 0 5px 0;
	color: #333;
}

.compare-result-text p {
	margin: 0;
	color: #666;
}

.compare-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
}

.compare-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 4px;
}

.compare-label {
	font-weight: 500;
	color: #666;
}

.compare-value {
	font-weight: bold;
	color: #333;
	font-family: 'Courier New', monospace;
}

/* Notification Styles */
.hash-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 12px 20px;
	border-radius: 6px;
	z-index: 1000;
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Responsive Design for Hash Generator */
@media (max-width: 768px) {
	.hash-tabs {
		flex-direction: column;
	}
	
	.hash-tab-btn {
		border-bottom: none;
		border-right: 2px solid transparent;
	}
	
	.hash-tab-btn.active {
		border-right-color: #007bff;
	}
	
	.hash-algorithm-grid {
		grid-template-columns: 1fr;
	}
	
	.hash-option-group {
		flex-direction: column;
		gap: 10px;
	}
	
	.hash-button-group {
		flex-direction: column;
	}
	
	.hash-compare-inputs {
		grid-template-columns: 1fr;
	}
	
	.hash-compare-options {
		flex-direction: column;
		gap: 10px;
	}
	
	.hash-summary {
		grid-template-columns: 1fr;
	}
	
	.hash-results-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.hash-results-actions {
		justify-content: center;
	}
	
	.hash-info-content {
		grid-template-columns: 1fr;
	}
	
	.compare-details {
		grid-template-columns: 1fr;
	}
	
	.hash-file-drop-zone {
		padding: 30px 15px;
	}
	
	.hash-file-drop-zone i {
		font-size: 36px;
	}
	
	.hash-file-info-display {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.hash-result-value {
		font-size: 12px;
	}
}

/* Barcode Generator Styles */
.barcode-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.barcode-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.barcode-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.barcode-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.barcode-tool-header p {
	color: #666;
	font-size: 16px;
}

.barcode-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.barcode-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

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

.barcode-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.barcode-input {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	transition: border-color 0.3s ease;
}

.barcode-input:focus {
	outline: none;
	border-color: #007bff;
}

.barcode-input-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.barcode-type-section {
	margin-bottom: 20px;
}

.barcode-type-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.barcode-type-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
}

.barcode-type-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 15px;
	background: white;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.barcode-type-item:hover {
	border-color: #007bff;
	background: #f8f9fa;
}

.barcode-type-item input[type="radio"] {
	display: none;
}

.barcode-type-checkmark {
	width: 20px;
	height: 20px;
	border: 2px solid #ddd;
	border-radius: 50%;
	margin-right: 15px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.barcode-type-item input[type="radio"]:checked + .barcode-type-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.barcode-type-item input[type="radio"]:checked + .barcode-type-checkmark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background: white;
	border-radius: 50%;
}

.barcode-type-info {
	flex: 1;
}

.barcode-type-name {
	display: block;
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
}

.barcode-type-desc {
	display: block;
	font-size: 12px;
	color: #666;
}

.barcode-options {
	margin-bottom: 20px;
}

.barcode-option-group {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
}

.barcode-option-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.barcode-option-row:last-child {
	margin-bottom: 0;
}

.barcode-option-item {
	display: flex;
	flex-direction: column;
}

.barcode-option-item label {
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
	font-size: 14px;
}

.barcode-number-input {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	transition: border-color 0.3s ease;
}

.barcode-number-input:focus {
	outline: none;
	border-color: #007bff;
}

.barcode-select {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: white;
	transition: border-color 0.3s ease;
}

.barcode-select:focus {
	outline: none;
	border-color: #007bff;
}

.barcode-color-input {
	width: 100%;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.3s ease;
}

.barcode-color-input:focus {
	outline: none;
	border-color: #007bff;
}

.barcode-advanced-options {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.barcode-advanced-options h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.barcode-checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.barcode-checkbox-item input[type="checkbox"] {
	display: none;
}

.barcode-checkbox-checkmark {
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.barcode-checkbox-item input[type="checkbox"]:checked + .barcode-checkbox-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.barcode-checkbox-item input[type="checkbox"]:checked + .barcode-checkbox-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.barcode-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Output Styles */
.barcode-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.barcode-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.barcode-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.barcode-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.barcode-summary-label {
	font-weight: 500;
	color: #666;
}

.barcode-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.barcode-display-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
	margin-bottom: 20px;
}

.barcode-display-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.barcode-display-header h4 {
	margin: 0;
	color: #333;
}

.barcode-display-actions {
	display: flex;
	gap: 8px;
}

.barcode-display-content {
	padding: 30px;
	text-align: center;
	background: white;
}

.barcode-display {
	display: inline-block;
	padding: 20px;
	background: white;
	border: 1px solid #e9ecef;
	border-radius: 6px;
}

.barcode-display canvas {
	max-width: 100%;
	height: auto;
}

.barcode-info-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.barcode-info-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.barcode-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.barcode-info-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.barcode-info-item h5 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.barcode-info-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.info-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #e9ecef;
}

.info-detail:last-child {
	border-bottom: none;
}

.info-label {
	font-weight: 500;
	color: #666;
	font-size: 13px;
}

.info-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
	font-size: 13px;
}

.info-value.valid {
	color: #28a745;
}

.info-value.invalid {
	color: #dc3545;
}

/* Notification Styles */
.barcode-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 12px 20px;
	border-radius: 6px;
	z-index: 1000;
	animation: slideIn 0.3s ease;
}

/* Responsive Design for Barcode Generator */
@media (max-width: 768px) {
	.barcode-type-grid {
		grid-template-columns: 1fr;
	}
	
	.barcode-option-row {
		grid-template-columns: 1fr;
	}
	
	.barcode-button-group {
		flex-direction: column;
	}
	
	.barcode-summary {
		grid-template-columns: 1fr;
	}
	
	.barcode-display-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.barcode-display-actions {
		justify-content: center;
	}
	
	.barcode-info-grid {
		grid-template-columns: 1fr;
	}
	
	.barcode-display-content {
		padding: 20px;
	}
	
	.barcode-display {
		padding: 15px;
	}
	
	.barcode-type-item {
		padding: 12px;
	}
	
	.barcode-type-checkmark {
		width: 18px;
		height: 18px;
		margin-right: 12px;
	}
	
	.barcode-type-item input[type="radio"]:checked + .barcode-type-checkmark::after {
		width: 6px;
		height: 6px;
	}
}

/* File Format Converter Styles */
.file-converter-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.file-converter-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.file-converter-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.file-converter-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.file-converter-tool-header p {
	color: #666;
	font-size: 16px;
}

.file-converter-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.file-converter-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.file-converter-form-group {
	margin-bottom: 20px;
}

.file-converter-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.file-converter-upload {
	position: relative;
}

.file-converter-file-input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 2;
}

.file-converter-drop-zone {
	border: 2px dashed #ddd;
	border-radius: 8px;
	padding: 40px 20px;
	text-align: center;
	background: white;
	transition: all 0.3s ease;
	cursor: pointer;
}

.file-converter-drop-zone:hover,
.file-converter-drop-zone.drag-over {
	border-color: #007bff;
	background: #f8f9fa;
}

.file-converter-drop-zone i {
	font-size: 48px;
	color: #007bff;
	margin-bottom: 15px;
}

.file-converter-drop-zone p {
	margin-bottom: 10px;
	color: #333;
	font-size: 16px;
}

.file-converter-info {
	color: #666;
	font-size: 14px;
}

.file-converter-file-list {
	margin-top: 20px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.file-converter-file-list h4 {
	margin-bottom: 15px;
	color: #333;
}

.file-converter-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.file-converter-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.file-converter-item-info {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
}

.file-converter-item-icon {
	width: 40px;
	height: 40px;
	background: #007bff;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.file-converter-item-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.file-converter-item-name {
	font-weight: 500;
	color: #333;
	font-size: 14px;
}

.file-converter-item-size {
	color: #666;
	font-size: 12px;
}

.file-converter-item-type {
	color: #999;
	font-size: 11px;
}

.file-converter-item-actions {
	display: flex;
	gap: 8px;
}

.file-converter-format-section {
	margin-bottom: 20px;
}

.file-converter-format-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.file-converter-format-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.file-converter-format-category {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.file-converter-format-category h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.file-converter-format-category h5 i {
	margin-right: 8px;
	color: #007bff;
}

.file-converter-format-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.file-converter-format-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 12px;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.file-converter-format-item:hover {
	border-color: #007bff;
	background: #f8f9fa;
}

.file-converter-format-item input[type="radio"] {
	display: none;
}

.file-converter-format-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 50%;
	margin-right: 12px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.file-converter-format-item input[type="radio"]:checked + .file-converter-format-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.file-converter-format-item input[type="radio"]:checked + .file-converter-format-checkmark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	background: white;
	border-radius: 50%;
}

.file-converter-format-info {
	flex: 1;
}

.file-converter-format-name {
	display: block;
	font-weight: 500;
	color: #333;
	margin-bottom: 3px;
}

.file-converter-format-desc {
	display: block;
	font-size: 12px;
	color: #666;
}

.file-converter-options {
	margin-bottom: 20px;
}

.file-converter-option-group {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
}

.file-converter-option-group h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.file-converter-option-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.file-converter-option-row:last-child {
	margin-bottom: 0;
}

.file-converter-option-item {
	display: flex;
	flex-direction: column;
}

.file-converter-option-item label {
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
	font-size: 14px;
}

.file-converter-select {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: white;
	transition: border-color 0.3s ease;
}

.file-converter-select:focus {
	outline: none;
	border-color: #007bff;
}

.file-converter-advanced-options {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.file-converter-advanced-options h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.file-converter-checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.file-converter-checkbox-item input[type="checkbox"] {
	display: none;
}

.file-converter-checkbox-checkmark {
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.file-converter-checkbox-item input[type="checkbox"]:checked + .file-converter-checkbox-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.file-converter-checkbox-item input[type="checkbox"]:checked + .file-converter-checkbox-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.file-converter-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Output Styles */
.file-converter-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.file-converter-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.file-converter-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.file-converter-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.file-converter-summary-label {
	font-weight: 500;
	color: #666;
}

.file-converter-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.file-converter-results-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
	margin-bottom: 20px;
}

.file-converter-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.file-converter-results-header h4 {
	margin: 0;
	color: #333;
}

.file-converter-results-actions {
	display: flex;
	gap: 8px;
}

.file-converter-results {
	padding: 20px;
}

.file-converter-result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
	margin-bottom: 10px;
}

.file-converter-result-item:last-child {
	margin-bottom: 0;
}

.file-converter-result-info {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
}

.file-converter-result-icon {
	width: 40px;
	height: 40px;
	background: #28a745;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.file-converter-result-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.file-converter-result-name {
	font-weight: 500;
	color: #333;
	font-size: 14px;
}

.file-converter-result-size {
	color: #666;
	font-size: 12px;
}

.file-converter-result-format {
	color: #28a745;
	font-size: 11px;
	font-weight: bold;
}

.file-converter-result-actions {
	display: flex;
	gap: 8px;
}

.file-converter-info-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.file-converter-info-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.file-converter-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.file-converter-info-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.file-converter-info-item h5 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.file-converter-info-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.info-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #e9ecef;
}

.info-detail:last-child {
	border-bottom: none;
}

.info-label {
	font-weight: 500;
	color: #666;
	font-size: 13px;
}

.info-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
	font-size: 13px;
}

.info-value.positive {
	color: #28a745;
}

.info-value.negative {
	color: #dc3545;
}

.info-value.mükemmel {
	color: #28a745;
}

.info-value.yüksek {
	color: #17a2b8;
}

.info-value.orta {
	color: #ffc107;
}

.info-value.düşük {
	color: #dc3545;
}

/* Notification Styles */
.file-converter-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 12px 20px;
	border-radius: 6px;
	z-index: 1000;
	animation: slideIn 0.3s ease;
}

/* Responsive Design for File Format Converter */
@media (max-width: 768px) {
	.file-converter-format-grid {
		grid-template-columns: 1fr;
	}
	
	.file-converter-option-row {
		grid-template-columns: 1fr;
	}
	
	.file-converter-button-group {
		flex-direction: column;
	}
	
	.file-converter-summary {
		grid-template-columns: 1fr;
	}
	
	.file-converter-results-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.file-converter-results-actions {
		justify-content: center;
	}
	
	.file-converter-info-grid {
		grid-template-columns: 1fr;
	}
	
	.file-converter-item,
	.file-converter-result-item {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.file-converter-item-info,
	.file-converter-result-info {
		justify-content: center;
	}
	
	.file-converter-item-actions,
	.file-converter-result-actions {
		justify-content: center;
	}
	
	.file-converter-format-item {
		padding: 10px;
	}
	
	.file-converter-format-checkmark {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}
	
	.file-converter-format-item input[type="radio"]:checked + .file-converter-format-checkmark::after {
		width: 5px;
		height: 5px;
	}
}

/* Number Base Converter Styles */
.number-converter-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.number-converter-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.number-converter-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.number-converter-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.number-converter-tool-header p {
	color: #666;
	font-size: 16px;
}

.number-converter-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.number-converter-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.number-converter-form-group {
	margin-bottom: 20px;
}

.number-converter-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.number-converter-input-container {
	display: flex;
	gap: 10px;
	align-items: center;
}

.number-converter-input {
	flex: 1;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	font-family: 'Courier New', monospace;
	transition: border-color 0.3s ease;
}

.number-converter-input:focus {
	outline: none;
	border-color: #007bff;
}

.number-converter-input-actions {
	display: flex;
	gap: 8px;
}

.number-converter-base-section,
.number-converter-target-section {
	margin-bottom: 20px;
}

.number-converter-base-section h4,
.number-converter-target-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.number-converter-base-grid,
.number-converter-target-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.number-converter-base-item,
.number-converter-target-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 15px;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	background: white;
	transition: all 0.3s ease;
}

.number-converter-base-item:hover,
.number-converter-target-item:hover {
	border-color: #007bff;
	background: #f8f9fa;
}

.number-converter-base-item input[type="radio"],
.number-converter-target-item input[type="checkbox"] {
	display: none;
}

.number-converter-base-checkmark,
.number-converter-target-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	margin-right: 12px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.number-converter-base-checkmark {
	border-radius: 50%;
}

.number-converter-target-checkmark {
	border-radius: 3px;
}

.number-converter-base-item input[type="radio"]:checked + .number-converter-base-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.number-converter-target-item input[type="checkbox"]:checked + .number-converter-target-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.number-converter-base-item input[type="radio"]:checked + .number-converter-base-checkmark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	background: white;
	border-radius: 50%;
}

.number-converter-target-item input[type="checkbox"]:checked + .number-converter-target-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.number-converter-base-info,
.number-converter-target-info {
	flex: 1;
}

.number-converter-base-name,
.number-converter-target-name {
	display: block;
	font-weight: 500;
	color: #333;
	margin-bottom: 3px;
}

.number-converter-base-desc,
.number-converter-target-desc {
	display: block;
	font-size: 12px;
	color: #666;
}

.number-converter-options {
	margin-bottom: 20px;
}

.number-converter-option-group {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
}

.number-converter-option-group h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.number-converter-option-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.number-converter-option-row:last-child {
	margin-bottom: 0;
}

.number-converter-option-item {
	display: flex;
	flex-direction: column;
}

.number-converter-option-item label {
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
	font-size: 14px;
}

.number-converter-select {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: white;
	transition: border-color 0.3s ease;
}

.number-converter-select:focus {
	outline: none;
	border-color: #007bff;
}

.number-converter-advanced-options {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.number-converter-advanced-options h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.number-converter-checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.number-converter-checkbox-item input[type="checkbox"] {
	display: none;
}

.number-converter-checkbox-checkmark {
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.number-converter-checkbox-item input[type="checkbox"]:checked + .number-converter-checkbox-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.number-converter-checkbox-item input[type="checkbox"]:checked + .number-converter-checkbox-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.number-converter-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Output Styles */
.number-converter-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.number-converter-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.number-converter-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.number-converter-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.number-converter-summary-label {
	font-weight: 500;
	color: #666;
}

.number-converter-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.number-converter-results-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
	margin-bottom: 20px;
}

.number-converter-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.number-converter-results-header h4 {
	margin: 0;
	color: #333;
}

.number-converter-results-actions {
	display: flex;
	gap: 8px;
}

.number-converter-results {
	padding: 20px;
}

.number-converter-result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
	margin-bottom: 10px;
}

.number-converter-result-item:last-child {
	margin-bottom: 0;
}

.number-converter-result-info {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
}

.number-converter-result-icon {
	width: 40px;
	height: 40px;
	background: #007bff;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.number-converter-result-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.number-converter-result-name {
	font-weight: 500;
	color: #333;
	font-size: 14px;
}

.number-converter-result-value {
	color: #007bff;
	font-size: 16px;
	font-weight: bold;
	font-family: 'Courier New', monospace;
}

.number-converter-result-base {
	color: #666;
	font-size: 11px;
}

.number-converter-result-actions {
	display: flex;
	gap: 8px;
}

.number-converter-steps-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
	margin-bottom: 20px;
}

.number-converter-steps-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.number-converter-step-item {
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.number-converter-step-item h5 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.step-process {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.step-line {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: white;
	border-radius: 4px;
	border: 1px solid #e9ecef;
}

.step-number {
	font-weight: bold;
	color: #007bff;
	min-width: 20px;
}

.step-calculation {
	font-family: 'Courier New', monospace;
	color: #333;
	font-size: 13px;
}

.number-converter-info-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.number-converter-info-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.number-converter-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.number-converter-info-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.number-converter-info-item h5 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.number-converter-info-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Notification Styles */
.number-converter-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 12px 20px;
	border-radius: 6px;
	z-index: 1000;
	animation: slideIn 0.3s ease;
}

/* Responsive Design for Number Base Converter */
@media (max-width: 768px) {
	.number-converter-base-grid,
	.number-converter-target-grid {
		grid-template-columns: 1fr;
	}
	
	.number-converter-option-row {
		grid-template-columns: 1fr;
	}
	
	.number-converter-button-group {
		flex-direction: column;
	}
	
	.number-converter-summary {
		grid-template-columns: 1fr;
	}
	
	.number-converter-results-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.number-converter-results-actions {
		justify-content: center;
	}
	
	.number-converter-info-grid {
		grid-template-columns: 1fr;
	}
	
	.number-converter-result-item {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.number-converter-result-info {
		justify-content: center;
	}
	
	.number-converter-result-actions {
		justify-content: center;
	}
	
	.number-converter-base-item,
	.number-converter-target-item {
		padding: 12px;
	}
	
	.number-converter-base-checkmark,
	.number-converter-target-checkmark {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}
	
	.number-converter-base-item input[type="radio"]:checked + .number-converter-base-checkmark::after {
		width: 5px;
		height: 5px;
	}
	
	.number-converter-input-container {
		flex-direction: column;
		align-items: stretch;
	}
	
	.number-converter-input-actions {
		justify-content: center;
	}
}

/* Timestamp Converter Styles */
.timestamp-converter-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.timestamp-converter-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.timestamp-converter-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.timestamp-converter-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.timestamp-converter-tool-header p {
	color: #666;
	font-size: 16px;
}

.timestamp-converter-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.timestamp-converter-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.timestamp-converter-form-group {
	margin-bottom: 20px;
}

.timestamp-converter-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.timestamp-converter-input-container {
	display: flex;
	gap: 10px;
	align-items: center;
}

.timestamp-converter-input {
	flex: 1;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	font-family: 'Courier New', monospace;
	transition: border-color 0.3s ease;
}

.timestamp-converter-input:focus {
	outline: none;
	border-color: #007bff;
}

.timestamp-converter-input-actions {
	display: flex;
	gap: 8px;
}

.timestamp-converter-format-section,
.timestamp-converter-target-section {
	margin-bottom: 20px;
}

.timestamp-converter-format-section h4,
.timestamp-converter-target-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.timestamp-converter-format-grid,
.timestamp-converter-target-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.timestamp-converter-format-item,
.timestamp-converter-target-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 15px;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	background: white;
	transition: all 0.3s ease;
}

.timestamp-converter-format-item:hover,
.timestamp-converter-target-item:hover {
	border-color: #007bff;
	background: #f8f9fa;
}

.timestamp-converter-format-item input[type="radio"],
.timestamp-converter-target-item input[type="checkbox"] {
	display: none;
}

.timestamp-converter-format-checkmark,
.timestamp-converter-target-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	margin-right: 12px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.timestamp-converter-format-checkmark {
	border-radius: 50%;
}

.timestamp-converter-target-checkmark {
	border-radius: 3px;
}

.timestamp-converter-format-item input[type="radio"]:checked + .timestamp-converter-format-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.timestamp-converter-target-item input[type="checkbox"]:checked + .timestamp-converter-target-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.timestamp-converter-format-item input[type="radio"]:checked + .timestamp-converter-format-checkmark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	background: white;
	border-radius: 50%;
}

.timestamp-converter-target-item input[type="checkbox"]:checked + .timestamp-converter-target-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.timestamp-converter-format-info,
.timestamp-converter-target-info {
	flex: 1;
}

.timestamp-converter-format-name,
.timestamp-converter-target-name {
	display: block;
	font-weight: 500;
	color: #333;
	margin-bottom: 3px;
}

.timestamp-converter-format-desc,
.timestamp-converter-target-desc {
	display: block;
	font-size: 12px;
	color: #666;
}

.timestamp-converter-options {
	margin-bottom: 20px;
}

.timestamp-converter-option-group {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
}

.timestamp-converter-option-group h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.timestamp-converter-option-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.timestamp-converter-option-row:last-child {
	margin-bottom: 0;
}

.timestamp-converter-option-item {
	display: flex;
	flex-direction: column;
}

.timestamp-converter-option-item label {
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
	font-size: 14px;
}

.timestamp-converter-select {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: white;
	transition: border-color 0.3s ease;
}

.timestamp-converter-select:focus {
	outline: none;
	border-color: #007bff;
}

.timestamp-converter-advanced-options {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.timestamp-converter-advanced-options h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.timestamp-converter-checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.timestamp-converter-checkbox-item input[type="checkbox"] {
	display: none;
}

.timestamp-converter-checkbox-checkmark {
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.timestamp-converter-checkbox-item input[type="checkbox"]:checked + .timestamp-converter-checkbox-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.timestamp-converter-checkbox-item input[type="checkbox"]:checked + .timestamp-converter-checkbox-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.timestamp-converter-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Output Styles */
.timestamp-converter-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.timestamp-converter-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.timestamp-converter-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.timestamp-converter-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.timestamp-converter-summary-label {
	font-weight: 500;
	color: #666;
}

.timestamp-converter-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.timestamp-converter-results-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
	margin-bottom: 20px;
}

.timestamp-converter-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.timestamp-converter-results-header h4 {
	margin: 0;
	color: #333;
}

.timestamp-converter-results-actions {
	display: flex;
	gap: 8px;
}

.timestamp-converter-results {
	padding: 20px;
}

.timestamp-converter-result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
	margin-bottom: 10px;
}

.timestamp-converter-result-item:last-child {
	margin-bottom: 0;
}

.timestamp-converter-result-info {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
}

.timestamp-converter-result-icon {
	width: 40px;
	height: 40px;
	background: #007bff;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.timestamp-converter-result-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.timestamp-converter-result-name {
	font-weight: 500;
	color: #333;
	font-size: 14px;
}

.timestamp-converter-result-value {
	color: #007bff;
	font-size: 16px;
	font-weight: bold;
	font-family: 'Courier New', monospace;
}

.timestamp-converter-result-format {
	color: #666;
	font-size: 11px;
}

.timestamp-converter-result-actions {
	display: flex;
	gap: 8px;
}

.timestamp-converter-info-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.timestamp-converter-info-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.timestamp-converter-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.timestamp-converter-info-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.timestamp-converter-info-item h5 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.timestamp-converter-info-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Notification Styles */
.timestamp-converter-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 12px 20px;
	border-radius: 6px;
	z-index: 1000;
	animation: slideIn 0.3s ease;
}

/* Responsive Design for Timestamp Converter */
@media (max-width: 768px) {
	.timestamp-converter-format-grid,
	.timestamp-converter-target-grid {
		grid-template-columns: 1fr;
	}
	
	.timestamp-converter-option-row {
		grid-template-columns: 1fr;
	}
	
	.timestamp-converter-button-group {
		flex-direction: column;
	}
	
	.timestamp-converter-summary {
		grid-template-columns: 1fr;
	}
	
	.timestamp-converter-results-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.timestamp-converter-results-actions {
		justify-content: center;
	}
	
	.timestamp-converter-info-grid {
		grid-template-columns: 1fr;
	}
	
	.timestamp-converter-result-item {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.timestamp-converter-result-info {
		justify-content: center;
	}
	
	.timestamp-converter-result-actions {
		justify-content: center;
	}
	
	.timestamp-converter-format-item,
	.timestamp-converter-target-item {
		padding: 12px;
	}
	
	.timestamp-converter-format-checkmark,
	.timestamp-converter-target-checkmark {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}
	
	.timestamp-converter-format-item input[type="radio"]:checked + .timestamp-converter-format-checkmark::after {
		width: 5px;
		height: 5px;
	}
	
	.timestamp-converter-input-container {
		flex-direction: column;
		align-items: stretch;
	}
	
	.timestamp-converter-input-actions {
		justify-content: center;
	}
}

/* Text Encoder/Decoder Styles */
.text-encoder-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.text-encoder-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.text-encoder-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.text-encoder-tool-header h1 i {
	color: #007bff;
	margin-right: 10px;
}

.text-encoder-tool-header p {
	color: #666;
	font-size: 16px;
}

.text-encoder-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.text-encoder-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.text-encoder-form-group {
	margin-bottom: 20px;
}

.text-encoder-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.text-encoder-input-container {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.text-encoder-input {
	flex: 1;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
	transition: border-color 0.3s ease;
	resize: vertical;
	min-height: 120px;
}

.text-encoder-input:focus {
	outline: none;
	border-color: #007bff;
}

.text-encoder-input-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.text-encoder-mode-section,
.text-encoder-format-section {
	margin-bottom: 20px;
}

.text-encoder-mode-section h4,
.text-encoder-format-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.text-encoder-mode-grid,
.text-encoder-format-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.text-encoder-mode-item,
.text-encoder-format-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 15px;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	background: white;
	transition: all 0.3s ease;
}

.text-encoder-mode-item:hover,
.text-encoder-format-item:hover {
	border-color: #007bff;
	background: #f8f9fa;
}

.text-encoder-mode-item input[type="radio"],
.text-encoder-format-item input[type="checkbox"] {
	display: none;
}

.text-encoder-mode-checkmark,
.text-encoder-format-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	margin-right: 12px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.text-encoder-mode-checkmark {
	border-radius: 50%;
}

.text-encoder-format-checkmark {
	border-radius: 3px;
}

.text-encoder-mode-item input[type="radio"]:checked + .text-encoder-mode-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.text-encoder-format-item input[type="checkbox"]:checked + .text-encoder-format-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.text-encoder-mode-item input[type="radio"]:checked + .text-encoder-mode-checkmark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	background: white;
	border-radius: 50%;
}

.text-encoder-format-item input[type="checkbox"]:checked + .text-encoder-format-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.text-encoder-mode-info,
.text-encoder-format-info {
	flex: 1;
}

.text-encoder-mode-name,
.text-encoder-format-name {
	display: block;
	font-weight: 500;
	color: #333;
	margin-bottom: 3px;
}

.text-encoder-mode-desc,
.text-encoder-format-desc {
	display: block;
	font-size: 12px;
	color: #666;
}

.text-encoder-options {
	margin-bottom: 20px;
}

.text-encoder-option-group {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
}

.text-encoder-option-group h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.text-encoder-option-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.text-encoder-option-row:last-child {
	margin-bottom: 0;
}

.text-encoder-option-item {
	display: flex;
	flex-direction: column;
}

.text-encoder-option-item label {
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
	font-size: 14px;
}

.text-encoder-select {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: white;
	transition: border-color 0.3s ease;
}

.text-encoder-select:focus {
	outline: none;
	border-color: #007bff;
}

.text-encoder-advanced-options {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.text-encoder-advanced-options h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.text-encoder-checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.text-encoder-checkbox-item input[type="checkbox"] {
	display: none;
}

.text-encoder-checkbox-checkmark {
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.text-encoder-checkbox-item input[type="checkbox"]:checked + .text-encoder-checkbox-checkmark {
	background: #007bff;
	border-color: #007bff;
}

.text-encoder-checkbox-item input[type="checkbox"]:checked + .text-encoder-checkbox-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.text-encoder-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Output Styles */
.text-encoder-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.text-encoder-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.text-encoder-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.text-encoder-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text-encoder-summary-label {
	font-weight: 500;
	color: #666;
}

.text-encoder-summary-value {
	font-weight: bold;
	color: #007bff;
	font-family: 'Courier New', monospace;
}

.text-encoder-results-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
	margin-bottom: 20px;
}

.text-encoder-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.text-encoder-results-header h4 {
	margin: 0;
	color: #333;
}

.text-encoder-results-actions {
	display: flex;
	gap: 8px;
}

.text-encoder-results {
	padding: 20px;
}

.text-encoder-result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
	margin-bottom: 10px;
}

.text-encoder-result-item:last-child {
	margin-bottom: 0;
}

.text-encoder-result-info {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
}

.text-encoder-result-icon {
	width: 40px;
	height: 40px;
	background: #007bff;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.text-encoder-result-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}

.text-encoder-result-name {
	font-weight: 500;
	color: #333;
	font-size: 14px;
}

.text-encoder-result-value {
	color: #007bff;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Courier New', monospace;
	word-break: break-all;
	max-width: 400px;
}

.text-encoder-result-format {
	color: #666;
	font-size: 11px;
}

.text-encoder-result-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.text-encoder-info-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.text-encoder-info-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.text-encoder-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.text-encoder-info-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.text-encoder-info-item h5 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.text-encoder-info-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Notification Styles */
.text-encoder-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 12px 20px;
	border-radius: 6px;
	z-index: 1000;
	animation: slideIn 0.3s ease;
}

/* Responsive Design for Text Encoder/Decoder */
@media (max-width: 768px) {
	.text-encoder-mode-grid,
	.text-encoder-format-grid {
		grid-template-columns: 1fr;
	}
	
	.text-encoder-option-row {
		grid-template-columns: 1fr;
	}
	
	.text-encoder-button-group {
		flex-direction: column;
	}
	
	.text-encoder-summary {
		grid-template-columns: 1fr;
	}
	
	.text-encoder-results-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.text-encoder-results-actions {
		justify-content: center;
	}
	
	.text-encoder-info-grid {
		grid-template-columns: 1fr;
	}
	
	.text-encoder-result-item {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.text-encoder-result-info {
		justify-content: center;
	}
	
	.text-encoder-result-actions {
		justify-content: center;
	}
	
	.text-encoder-mode-item,
	.text-encoder-format-item {
		padding: 12px;
	}
	
	.text-encoder-mode-checkmark,
	.text-encoder-format-checkmark {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}
	
	.text-encoder-mode-item input[type="radio"]:checked + .text-encoder-mode-checkmark::after {
		width: 5px;
		height: 5px;
	}
	
	.text-encoder-input-container {
		flex-direction: column;
		align-items: stretch;
	}
	
	.text-encoder-input-actions {
		flex-direction: row;
		justify-content: center;
	}
	
	.text-encoder-result-value {
		max-width: none;
	}
}

/* Security Scanner Styles */
.security-scanner-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.security-scanner-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.security-scanner-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.security-scanner-tool-header h1 i {
	color: #dc3545;
	margin-right: 10px;
}

.security-scanner-tool-header p {
	color: #666;
	font-size: 16px;
}

.security-scanner-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.security-scanner-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.security-scanner-form-group {
	margin-bottom: 20px;
}

.security-scanner-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.security-scanner-input-container {
	display: flex;
	gap: 10px;
	align-items: center;
}

.security-scanner-input {
	flex: 1;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	font-family: 'Courier New', monospace;
	transition: border-color 0.3s ease;
}

.security-scanner-input:focus {
	outline: none;
	border-color: #dc3545;
}

.security-scanner-input-actions {
	display: flex;
	gap: 8px;
}

.security-scanner-scan-section {
	margin-bottom: 20px;
}

.security-scanner-scan-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.security-scanner-scan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.security-scanner-scan-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 15px;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	background: white;
	transition: all 0.3s ease;
}

.security-scanner-scan-item:hover {
	border-color: #dc3545;
	background: #f8f9fa;
}

.security-scanner-scan-item input[type="checkbox"] {
	display: none;
}

.security-scanner-scan-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 12px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.security-scanner-scan-item input[type="checkbox"]:checked + .security-scanner-scan-checkmark {
	background: #dc3545;
	border-color: #dc3545;
}

.security-scanner-scan-item input[type="checkbox"]:checked + .security-scanner-scan-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.security-scanner-scan-info {
	flex: 1;
}

.security-scanner-scan-name {
	display: block;
	font-weight: 500;
	color: #333;
	margin-bottom: 3px;
}

.security-scanner-scan-desc {
	display: block;
	font-size: 12px;
	color: #666;
}

.security-scanner-options {
	margin-bottom: 20px;
}

.security-scanner-option-group {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
}

.security-scanner-option-group h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.security-scanner-option-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.security-scanner-option-row:last-child {
	margin-bottom: 0;
}

.security-scanner-option-item {
	display: flex;
	flex-direction: column;
}

.security-scanner-option-item label {
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
	font-size: 14px;
}

.security-scanner-select {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: white;
	transition: border-color 0.3s ease;
}

.security-scanner-select:focus {
	outline: none;
	border-color: #dc3545;
}

.security-scanner-advanced-options {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.security-scanner-advanced-options h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.security-scanner-checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.security-scanner-checkbox-item input[type="checkbox"] {
	display: none;
}

.security-scanner-checkbox-checkmark {
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.security-scanner-checkbox-item input[type="checkbox"]:checked + .security-scanner-checkbox-checkmark {
	background: #dc3545;
	border-color: #dc3545;
}

.security-scanner-checkbox-item input[type="checkbox"]:checked + .security-scanner-checkbox-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.security-scanner-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Output Styles */
.security-scanner-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.security-scanner-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.security-scanner-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.security-scanner-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.security-scanner-summary-label {
	font-weight: 500;
	color: #666;
}

.security-scanner-summary-value {
	font-weight: bold;
	color: #dc3545;
	font-family: 'Courier New', monospace;
}

.security-scanner-results-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
	margin-bottom: 20px;
}

.security-scanner-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.security-scanner-results-header h4 {
	margin: 0;
	color: #333;
}

.security-scanner-results-actions {
	display: flex;
	gap: 8px;
}

.security-scanner-results {
	padding: 20px;
}

.security-scanner-result-item {
	background: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
	overflow: hidden;
}

.security-scanner-result-item:last-child {
	margin-bottom: 0;
}

.security-scanner-result-info {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background: white;
	border-bottom: 1px solid #e9ecef;
}

.security-scanner-result-icon {
	width: 40px;
	height: 40px;
	background: #dc3545;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.security-scanner-result-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
}

.security-scanner-result-name {
	font-weight: 500;
	color: #333;
	font-size: 16px;
}

.security-scanner-result-status {
	color: #28a745;
	font-size: 14px;
	font-weight: 500;
}

.security-scanner-result-findings {
	color: #666;
	font-size: 12px;
}

.security-scanner-result-content {
	padding: 15px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.findings-section h6,
.recommendations-section h6 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
	font-weight: 500;
}

.finding-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 4px;
	margin-bottom: 5px;
	font-size: 13px;
}

.finding-item.high {
	background: #f8d7da;
	color: #721c24;
	border-left: 3px solid #dc3545;
}

.finding-item.medium {
	background: #fff3cd;
	color: #856404;
	border-left: 3px solid #ffc107;
}

.finding-item.low {
	background: #d1ecf1;
	color: #0c5460;
	border-left: 3px solid #17a2b8;
}

.finding-item.info {
	background: #e2e3e5;
	color: #383d41;
	border-left: 3px solid #6c757d;
}

.recommendation-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: #f8f9fa;
	border-radius: 4px;
	margin-bottom: 5px;
	font-size: 13px;
	color: #495057;
}

.scan-loading {
	text-align: center;
	padding: 40px;
	color: #666;
	font-size: 16px;
}

.scan-loading i {
	margin-right: 10px;
	color: #dc3545;
}

.security-scanner-info-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.security-scanner-info-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.security-scanner-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.security-scanner-info-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.security-scanner-info-item h5 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.security-scanner-info-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Notification Styles */
.security-scanner-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 12px 20px;
	border-radius: 6px;
	z-index: 1000;
	animation: slideIn 0.3s ease;
}

/* Responsive Design for Security Scanner */
@media (max-width: 768px) {
	.security-scanner-scan-grid {
		grid-template-columns: 1fr;
	}
	
	.security-scanner-option-row {
		grid-template-columns: 1fr;
	}
	
	.security-scanner-button-group {
		flex-direction: column;
	}
	
	.security-scanner-summary {
		grid-template-columns: 1fr;
	}
	
	.security-scanner-results-header {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	
	.security-scanner-results-actions {
		justify-content: center;
	}
	
	.security-scanner-info-grid {
		grid-template-columns: 1fr;
	}
	
	.security-scanner-result-content {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	
	.security-scanner-scan-item {
		padding: 12px;
	}
	
	.security-scanner-scan-checkmark {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}
	
	.security-scanner-input-container {
		flex-direction: column;
		align-items: stretch;
	}
	
	.security-scanner-input-actions {
		justify-content: center;
	}
}

/* Password Strength Checker Styles */
.password-strength-tool-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.password-strength-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.password-strength-tool-header h1 {
	color: #333;
	margin-bottom: 10px;
}

.password-strength-tool-header h1 i {
	color: #28a745;
	margin-right: 10px;
}

.password-strength-tool-header p {
	color: #666;
	font-size: 16px;
}

.password-strength-tool-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.password-strength-input-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.password-strength-form-group {
	margin-bottom: 20px;
}

.password-strength-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.password-strength-input-container {
	display: flex;
	gap: 10px;
	align-items: center;
}

.password-strength-input {
	flex: 1;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	font-family: 'Courier New', monospace;
	transition: border-color 0.3s ease;
}

.password-strength-input:focus {
	outline: none;
	border-color: #28a745;
}

.password-strength-input-actions {
	display: flex;
	gap: 8px;
}

.password-strength-check-section {
	margin-bottom: 20px;
}

.password-strength-check-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.password-strength-check-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.password-strength-check-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 15px;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	background: white;
	transition: all 0.3s ease;
}

.password-strength-check-item:hover {
	border-color: #28a745;
	background: #f8f9fa;
}

.password-strength-check-item input[type="checkbox"] {
	display: none;
}

.password-strength-check-checkmark {
	width: 18px;
	height: 18px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 12px;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.password-strength-check-item input[type="checkbox"]:checked + .password-strength-check-checkmark {
	background: #28a745;
	border-color: #28a745;
}

.password-strength-check-item input[type="checkbox"]:checked + .password-strength-check-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.password-strength-check-info {
	flex: 1;
}

.password-strength-check-name {
	display: block;
	font-weight: 500;
	color: #333;
	margin-bottom: 3px;
}

.password-strength-check-desc {
	display: block;
	font-size: 12px;
	color: #666;
}

.password-strength-options {
	margin-bottom: 20px;
}

.password-strength-option-group {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	margin-bottom: 15px;
}

.password-strength-option-group h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.password-strength-option-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.password-strength-option-row:last-child {
	margin-bottom: 0;
}

.password-strength-option-item {
	display: flex;
	flex-direction: column;
}

.password-strength-option-item label {
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
	font-size: 14px;
}

.password-strength-select {
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: white;
	transition: border-color 0.3s ease;
}

.password-strength-select:focus {
	outline: none;
	border-color: #28a745;
}

.password-strength-advanced-options {
	background: white;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.password-strength-advanced-options h5 {
	margin-bottom: 15px;
	color: #333;
	font-size: 16px;
}

.password-strength-checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
}

.password-strength-checkbox-item input[type="checkbox"] {
	display: none;
}

.password-strength-checkbox-checkmark {
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
}

.password-strength-checkbox-item input[type="checkbox"]:checked + .password-strength-checkbox-checkmark {
	background: #28a745;
	border-color: #28a745;
}

.password-strength-checkbox-item input[type="checkbox"]:checked + .password-strength-checkbox-checkmark::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

.password-strength-button-group {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Output Styles */
.password-strength-output-section {
	background: #f8f9fa;
	padding: 25px;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.password-strength-result h3 {
	margin-bottom: 20px;
	color: #333;
}

.password-strength-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
	padding: 15px;
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.password-strength-summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.password-strength-summary-label {
	font-weight: 500;
	color: #666;
}

.password-strength-summary-value {
	font-weight: bold;
	color: #28a745;
	font-family: 'Courier New', monospace;
}

.password-strength-progress-container {
	margin-bottom: 25px;
}

.password-strength-progress-bar {
	width: 100%;
	height: 20px;
	background: #e9ecef;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}

.password-strength-progress-fill {
	height: 100%;
	width: 0%;
	transition: width 0.5s ease, background-color 0.5s ease;
	border-radius: 10px;
}

.password-strength-progress-fill.weak {
	background: #dc3545;
}

.password-strength-progress-fill.medium {
	background: #ffc107;
}

.password-strength-progress-fill.strong {
	background: #28a745;
}

.password-strength-progress-fill.very-strong {
	background: #17a2b8;
}

.password-strength-progress-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #666;
}

.progress-label {
	font-weight: 500;
}

.progress-label.weak {
	color: #dc3545;
}

.progress-label.medium {
	color: #ffc107;
}

.progress-label.strong {
	color: #28a745;
}

.progress-label.very-strong {
	color: #17a2b8;
}

.password-strength-results-container {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	overflow: hidden;
	margin-bottom: 20px;
}

.password-strength-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.password-strength-results-header h4 {
	margin: 0;
	color: #333;
}

.password-strength-results-actions {
	display: flex;
	gap: 8px;
}

.password-strength-results {
	padding: 20px;
}

.password-strength-result-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
	margin-bottom: 10px;
}

.password-strength-result-item:last-child {
	margin-bottom: 0;
}

.password-strength-result-info {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
}

.password-strength-result-icon {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.password-strength-result-icon.excellent {
	background: #28a745;
}

.password-strength-result-icon.good {
	background: #17a2b8;
}

.password-strength-result-icon.fair {
	background: #ffc107;
}

.password-strength-result-icon.poor {
	background: #dc3545;
}

.password-strength-result-icon.unknown {
	background: #6c757d;
}

.password-strength-result-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.password-strength-result-name {
	font-weight: 500;
	color: #333;
	font-size: 14px;
}

.password-strength-result-status {
	font-size: 12px;
	font-weight: 500;
}

.password-strength-result-status.excellent {
	color: #28a745;
}

.password-strength-result-status.good {
	color: #17a2b8;
}

.password-strength-result-status.fair {
	color: #ffc107;
}

.password-strength-result-status.poor {
	color: #dc3545;
}

.password-strength-result-desc {
	color: #666;
	font-size: 11px;
}

.password-strength-result-score {
	display: flex;
	align-items: center;
}

.score-value {
	font-weight: bold;
	color: #28a745;
	font-size: 16px;
}

.password-strength-info-section {
	background: white;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	padding: 20px;
}

.password-strength-info-section h4 {
	margin-bottom: 15px;
	color: #333;
}

.password-strength-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.password-strength-info-item {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #e9ecef;
}

.password-strength-info-item h5 {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.password-strength-info-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.suggestion-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: #e8f5e8;
	border-radius: 4px;
	margin-bottom: 5px;
	font-size: 13px;
	color: #155724;
}

.suggestion-item i {
	color: #28a745;
}

/* Notification Styles */
.password-strength-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #28a745;
	color: white;
	padding: 12px 20px;
	border-radius: 6px;
	z-index: 1000;
	animation: slideIn 0.3s ease;
}