@CHARSET "UTF-8";

:root {
	--primary-color: #2563eb;
	--secondary-color: #3b82f6;
	--background-color: #f8fafc;
	--card-background: #ffffff;
	--text-color: #1e293b;
	--border-color: #e2e8f0;
	--error-color: #ef4444;
	--success-color: #67C23A;
	--button-color: #596a90;
	--shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
	--shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	--border-radius: 0.5rem;
	--transition: all 0.3s ease
}
[data-theme="dark"] {
	--primary-color: #3b82f6;
	--secondary-color: #60a5fa;
	--background-color: #0f172a;
	--card-background: #1e293b;
	--text-color: #f8fafc;
	--border-color: #334155
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

body {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
	line-height: 1.6;
	transition: var(--transition)
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem
}

h1 {
	font-size: 2rem;
	font-weight: 700;
	color: #111c34b5
}
[data-theme="dark"] h1 {
	color: white
}

h2 {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	color: #4c5464d6
}
[data-theme="dark"] h2 {
	color: white
}

.theme-toggle button {
	background: var(--card-background);
	border: 1px solid var(--border-color);
	padding: 0.5rem 1rem;
	border-radius: var(--border-radius);
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition)
}

.theme-toggle button:hover {
	background: var(--primary-color);
	color: white
}

.copy-btn {
	background: var(--card-background);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	padding: 0 1.5rem;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap
}

.copy-btn:hover {
	background: var(--primary-color);
	color: white
}

main {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-auto-flow: row;
	gap: 2rem
}

.tool-card {
	background: var(--card-background);
	border-radius: var(--border-radius);
	padding: 2rem;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	animation: fadeIn 0.5s ease-out forwards
}

.tool-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md)
}

.tool-card .input-group {
	flex-grow: 1;
	margin-bottom: 1rem
}

#qrTool {
	order: 1
}

#base64Tool {
	order: 2
}

#urlTool {
	order: 3
}

#caseConverter {
	order: 4
}

#randomPassword {
	order: 5
}

#hashGenerator {
	order: 6
}

#aesTool {
	order: 7
}

#cidrTool {
	order: 8
}

.tool-card .button-group,.tool-card .generate-btn {
	width: 100%;
	margin-bottom: 1rem
}

.result-group {
	display: flex;
	gap: 0.75rem;
	width: 100%;
	margin-top: 1rem;
	align-items: stretch
}

.result-group input {
	height: 50px;
	font-size: 16px;
	padding: 0 1rem;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background: var(--card-background);
	color: var(--text-color);
	width: 100%;
	transition: var(--transition);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}

.result-group textarea {
	width: 100%;
	height: 150px;
	padding: 12px 15px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--card-background);
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.5;
	resize: vertical;
	transition: var(--transition)
}

.result-group input:focus,.result-group textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(37,99,235,0.1)
}

.result-group .copy-btn {
	height: auto;
	padding: 0 1.5rem;
	white-space: nowrap;
	border: 1px solid var(--primary-color);
	border-radius: 0.5rem;
	background: var(--card-background);
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	display: flex;
	align-items: center;
}

.result-group .copy-btn:hover {
	background: var(--primary-color);
	color: white
}

#aesTool .button-group {
	display: flex;
	gap: 1rem
}

#aesTool .button-group .convert-btn {
	flex: 1
}

.tool-card {
	padding-bottom: 2rem
}

.qr-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-top: 1rem
}

.qr-encode,.qr-decode {
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.size-wrapper {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem
}

.size-wrapper label {
	white-space: nowrap;
	font-size: 16px;
	color: var(--text-color);
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
}

.size-wrapper input[type="number"] {
	width: 200px;
	text-align: center
}

.size-wrapper .unit {
	color: var(--text-color)
}

.qr-output {
	display: none;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: var(--border-radius);
	padding: 1rem;
	margin-top: 1rem
}

.qr-output.has-qr {
	display: flex
}

.qr-output canvas {
	max-width: 100%;
	height: auto
}

.qr-decode {
	display: flex;
	flex-direction: column
}

.qr-decode .result-group {
	margin-top: 1rem
}

.qr-result {
	display: none
}

.file-upload {
	position: relative;
	width: 100%
}

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

.upload-area {
	border: 2px dashed var(--border-color);
	border-radius: var(--border-radius);
	padding: 2rem;
	text-align: center;
	background: var(--card-background);
	transition: all 0.3s ease;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem
}

.upload-area:hover,.upload-area.dragover {
	border-color: var(--primary-color);
	background: rgba(37,99,235,0.1)
}

.upload-icon {
	color: var(--text-color);
	opacity: 0.5
}

.upload-area p {
	margin: 0;
	color: var(--text-color);
	opacity: 0.7
}
[data-theme="dark"] .qr-output {
	background: var(--card-background)
}
[data-theme="dark"] .upload-area {
	background: var(--card-background)
}

@media (max-width:768px) {
	.container {
		padding: 1rem
	}

	main {
		grid-template-columns: 1fr
	}

	.button-group {
		flex-direction: column
	}

	.tool-card {
		padding: 1.5rem;
		min-height: auto
	}

	.result-group {
		flex-direction: row;
		align-items: center;
		gap: 0.5rem
	}

	.result-group input {
		height: 40px;
		font-size: 14px;
		padding: 0.5rem
	}

	.copy-btn {
		height: 40px;
		min-width: 60px;
		padding: 0 1rem;
		font-size: 14px
	}

	.tool-card input[type="text"],.tool-card input[type="password"] {
		height: 40px;
		font-size: 14px;
		padding: 0.5rem
	}

	.tool-card select {
		height: 40px;
		font-size: 14px
	}

	.convert-btn,.generate-btn {
		height: 40px;
		font-size: 14px;
		padding: 0 1rem
	}

	.qr-container {
		grid-template-columns: 1fr;
		gap: 1.5rem
	}

	.qr-output.has-qr {
		min-height: auto;
		padding: 0.5rem
	}

	.upload-area {
		min-height: 150px
	}

	.size-wrapper {
		flex-wrap: wrap
	}

	.size-wrapper input[type="number"] {
		width: 100%
	}

	.input-group label,.size-wrapper label {
		font-size: 14px
	}

	#randomPassword,#hashGenerator,#aesTool,#base64Tool,#urlTool,#caseConverter {
		grid-column: 1;
		grid-row: auto
	}

	input,select {
		font-size: 16px;
		padding: 0.75rem 1rem
	}

	select {
		height: 50px
	}

	.md5-options {
		max-height: 80px
	}

	.md5-options select {
		height: 50px
	}

	.tool-card .button-group {
		flex-direction: row;
		gap: 0.75rem
	}

	.generate-btn,.convert-btn,.tool-card .button-group .convert-btn,.tool-card .button-group button {
		height: 45px;
		font-size: 16px;
		min-height: 45px
	}

	.copy-btn {
		height: 50px;
		min-width: 80px;
		font-size: 16px
	}

	#aesTool .button-group .convert-btn {
		height: 38px;
		min-height: 38px
	}

	input,select,.tool-card input[type="text"],.tool-card input[type="password"],.tool-card input[type="number"],.tool-card select,.md5-options select {
		height: 50px;
		font-size: 16px;
		padding: 0.75rem 1rem
	}

	.result-group input {
		height: 50px
	}

	.button-group {
		flex-direction: column;
		gap: 0.5rem
	}

	.button-group .convert-btn {
		width: 100%;
		height: 45px;
		font-size: 14px;
		padding: 0 0.5rem
	}

	.tool-card .button-group {
		flex-direction: row;
		gap: 0.5rem
	}

	.tool-card .button-group .convert-btn {
		font-size: 14px;
		padding: 0 0.5rem;
		min-height: 45px;
		white-space: nowrap
	}

	.tabs-container {
		padding: 0.75rem
	}

	.tabs-header {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 0.5rem;
		border-bottom: none;
		padding-bottom: 0
	}

	.tab-btn {
		font-size: 0.875rem;
		padding: 0.6rem 0.5rem;
		margin: 0;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 100%
	}

	input[type="text"],input[type="password"],input[type="number"],select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		font-size: 16px !important;
		max-width: 100%;
		border: 1px solid var(--border-color);
		background-color: var(--card-background);
		color: var(--text-color);
		transition: all 0.3s ease
	}

	input:focus,select:focus {
		outline: none;
		border-color: var(--primary-color);
		box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
		background-color: var(--card-background)
	}

	input,select,textarea {
		-webkit-tap-highlight-color: transparent
	}

	.qr-container {
		grid-template-columns: 1fr;
		gap: 1.5rem
	}

	.qr-output.has-qr {
		min-height: auto;
		padding: 0.5rem
	}

	.upload-area {
		min-height: 150px
	}

	.size-wrapper {
		flex-wrap: wrap
	}

	.size-wrapper input[type="number"] {
		width: 100%
	}

	.input-group label,.size-wrapper label {
		font-size: 14px
	}

	#randomPassword,#hashGenerator,#aesTool,#base64Tool,#urlTool,#caseConverter {
		grid-column: 1;
		grid-row: auto
	}

	input,select {
		font-size: 16px;
		padding: 0.75rem 1rem
	}

	select {
		height: 50px
	}

	.md5-options {
		max-height: 80px
	}

	.md5-options select {
		height: 50px
	}

	.tool-card .button-group {
		flex-direction: row;
		gap: 0.75rem
	}

	.generate-btn,.convert-btn,.tool-card .button-group .convert-btn,.tool-card .button-group button {
		height: 45px;
		font-size: 16px;
		min-height: 45px
	}

	.copy-btn {
		height: 50px;
		min-width: 80px;
		font-size: 16px
	}

	#aesTool .button-group .convert-btn {
		height: 38px;
		min-height: 38px
	}

	input,select,.tool-card input[type="text"],.tool-card input[type="password"],.tool-card input[type="number"],.tool-card select,.md5-options select {
		height: 50px;
		font-size: 16px;
		padding: 0.75rem 1rem
	}

	.result-group input {
		height: 50px
	}

	.button-group {
		flex-direction: column;
		gap: 0.5rem
	}

	.button-group .convert-btn {
		width: 100%;
		height: 45px;
		font-size: 14px;
		padding: 0 0.5rem
	}

	.tool-card .button-group {
		flex-direction: row;
		gap: 0.5rem
	}

	.tool-card .button-group .convert-btn {
		font-size: 14px;
		padding: 0 0.5rem;
		min-height: 45px;
		white-space: nowrap
	}

	.tabs-container {
		padding: 0.75rem
	}

	.tabs-header {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 0.5rem;
		border-bottom: none;
		padding-bottom: 0
	}

	.tab-btn {
		font-size: 0.875rem;
		padding: 0.6rem 0.5rem;
		margin: 0;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 100%;
		min-height: 44px
	}

	.tab-btn.active {
		background: var(--button-color);
		color: white;
		border-color: var(--button-color)
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.tool-card {
	animation: fadeIn 0.5s ease-out forwards
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translate(-50%,20px)
	}

	to {
		opacity: 1;
		transform: translate(-50%,0)
	}
}

.toast-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1000;
	pointer-events: none;
	width: auto;
	white-space: nowrap
}

.toast {
	background: #F0F9EB;
	color: var(--success-color);
	padding: 0.5rem 1.5rem;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	box-shadow: 0 2px 8px rgba(76,175,80,0.3);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	animation: fadeInOut 2s ease-in-out forwards
}

.toast.error {
	background: #FEF2F2;
	color: var(--error-color);
	box-shadow: 0 2px 8px rgba(220,38,38,0.3)
}

.toast::before {
	content: "✓";
	font-weight: bold
}

.toast.error::before {
	content: "✕"
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
		transform: translateY(10px)
	}

	15% {
		opacity: 1;
		transform: translateY(0)
	}

	85% {
		opacity: 1;
		transform: translateY(0)
	}

	100% {
		opacity: 0;
		transform: translateY(-10px)
	}
}

.md5-options {
	margin-top: 0.5rem;
	transition: all 0.3s ease;
	overflow: hidden;
	height: auto;
	max-height: 60px
}

.md5-options[style*="display:none"] {
	margin: 0;
	height: 0;
	max-height: 0
}

.md5-options select {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background: var(--card-background);
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.3s ease
}

.md5-options select:hover {
	border-color: var(--primary-color)
}

#aesTool .input-group {
	display: grid;
	gap: 1rem
}

#aesTool input[type="password"] {
	font-family: monospace;
	letter-spacing: 0.1em
}

#aesTool select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232563eb' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

#aesTool .result-group input {
	font-family: monospace;
	word-break: break-all
}

.tool-card > .input-group {
	flex-grow: 1;
	display: flex;
	flex-direction: column
}

.tool-card > .button-group,.tool-card > .generate-btn,.tool-card > .result-group {
	flex-shrink: 0
}

.input-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 16px;
	color: var(--text-color);
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
}

input,select {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background: var(--card-background);
	color: var(--text-color);
	margin-bottom: 1rem;
	outline: none;
	font-size: 16px;
	transition: all 0.3s ease;
	height: 50px
}

select {
	height: 50px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232563eb' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

input:focus,select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(37,99,235,0.1)
}

input[type="number"] {
	-moz-appearance: textfield
}

input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0
}

input[type="number"].invalid {
	border-color: #ef4444;
	background-color: rgba(239,68,68,0.1)
}

.error-message {
	color: #ef4444;
	font-size: 0.875rem;
	margin-top: -0.5rem;
	margin-bottom: 0.5rem
}

.generate-btn,.convert-btn {
	background: #596a90;
	color: white;
	border: none;
	padding: 0.75rem 1.4rem;
	border-radius: 0.5rem;
	cursor: pointer;
	font-weight: 600;
	transition: background-color 0.3s ease;
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px
}

.generate-btn:hover,.convert-btn:hover {
	background: var(--secondary-color)
}

footer {
	margin-top: 3rem;
	text-align: center;
	color: var(--text-color);
	opacity: 0.8
}

footer p {
	margin: 0.5rem 0
}

footer a {
	color: var(--text-color);
	text-decoration: none;
	transition: color 0.3s ease
}

footer a:hover {
	color: var(--primary-color)
}

.tool-card .button-group {
	display: flex;
	gap: 1rem;
	width: 100%;
	margin-bottom: 1rem
}

.tool-card .button-group .convert-btn,.tool-card .button-group button {
	flex: 1;
	height: 55px
}

.input-group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
	width: 100%
}

.input-group .input-wrapper {
	display: flex;
	gap: 0.75rem;
	width: 100%
}

.input-group input[type="text"],.input-group input[type="password"],.input-group input[type="number"] {
	height: 50px;
	font-size: 16px;
	padding: 0 1rem;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background: var(--card-background);
	color: var(--text-color);
	width: 100%;
	transition: all 0.3s ease
}

.input-group .clear-btn {
	height: 50px;
	padding: 0 1.5rem;
	white-space: nowrap;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background: var(--card-background);
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0
}

.input-group .clear-btn:hover {
	background: var(--border-color);
	color: var(--primary-color)
}

.result-group {
	display: flex;
	gap: 0.75rem;
	width: 100%;
	margin-top: 1rem
}

.result-group input {
	height: 50px;
	font-size: 16px;
	padding: 0 1rem;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background: var(--card-background);
	color: var(--text-color);
	width: 100%;
	transition: var(--transition)
}

.result-group .copy-btn {
	height: 50px;
	padding: 0 1.5rem;
	white-space: nowrap;
	border: 1px solid var(--primary-color);
	border-radius: 0.5rem;
	background: var(--card-background);
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0
}

.result-group .copy-btn:hover {
	background: var(--primary-color);
	color: white
}

.button-group {
	display: flex;
	gap: 0.75rem;
	margin: 1rem 0
}

.button-group .convert-btn {
	flex: 1;
	height: 50px;
	font-size: 16px;
	border: none;
	border-radius: 0.5rem;
	background: #596a90;
	color: white;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap
}

.tabs-container {
	grid-column: 1 / -1;
	background: var(--card-background);
	border-radius: var(--border-radius);
	padding: 1rem;
	box-shadow: var(--shadow-sm);
	width: 100%;
	overflow: hidden
}

.tabs-header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--border-color);
	padding-bottom: 0.5rem;
	width: 100%
}

.tab-btn {
	flex: 1;
	min-width: fit-content;
	background: none;
	border: none;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	color: var(--text-color);
	cursor: pointer;
	transition: var(--transition);
	position: relative;
	white-space: nowrap
}

.tab-btn::after {
	content: '';
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--primary-color);
	transform: scaleX(0);
	transition: transform 0.3s ease
}

.tab-btn.active::after {
	transform: scaleX(1)
}

.tab-btn:hover::after {
	transform: scaleX(0.5)
}

.tab-btn.active:hover::after {
	transform: scaleX(1)
}

@media (max-width:1024px) {
	.tabs-header {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
		gap: 0.5rem
	}

	.tab-btn {
		width: 100%;
		text-align: center;
		padding: 0.75rem 0.5rem;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius)
	}

	.tab-btn.active {
		background: var(--button-color);
		color: white;
		border-color: var(--button-color)
	}

	.tab-btn::after {
		display: none
	}
}

@media (max-width:480px) {
	.tabs-header {
		grid-template-columns: repeat(2,1fr)
	}
}

.tabs-content {
	position: relative;
	min-height: 200px
}

.tabs-content .tool-card {
	display: none;
	box-shadow: none;
	padding: 0;
	animation: fadeIn 0.3s ease-out forwards;
	margin: 0;
	background: none
}

.tabs-content .tool-card.active {
	display: block
}

.input-group .textarea-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center
}

.input-group textarea {
	width: 100%;
	height: 150px;
	padding: 12px 40px 12px 15px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--card-background);
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.5;
	resize: vertical;
	transition: var(--transition)
}

.input-group textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(59,130,246,0.2)
}

.result-group textarea {
	width: 100%;
	height: 150px;
	padding: 12px 15px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--card-background);
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.5;
	resize: vertical;
	transition: var(--transition)
}

.result-group textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(37,99,235,0.1)
}

@media (max-width:768px) {
	.input-group textarea,.result-group textarea {
		height: 120px
	}
}