:root {
			--bg: #0f172a;
			--panel: #111827;
			--panel-2: #1f2937;
			--border: #334155;
			--text: #e5e7eb;
			--muted: #94a3b8;
			--accent: #22c55e;
			--accent-2: #16a34a;
			--danger: #ef4444;
			--card: #0b1220;
		}

		* {
			box-sizing: border-box;
		}

		html {
			-webkit-text-size-adjust: 100%;
		}

		body {
			margin: 0;
			font-family: Arial, Helvetica, sans-serif;
			background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
			color: var(--text);
			min-height: 100vh;
			line-height: 1.45;
		}

		.container {
			width: 100%;
			max-width: 1100px;
			margin: 0 auto;
			padding: 16px;
		}

		.top-bar {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 16px;
			margin-bottom: 16px;
			flex-wrap: wrap;
		}

		.title-block {
			flex: 1 1 500px;
		}

		.language-block {
			flex: 0 0 220px;
			min-width: 180px;
		}

		h1 {
			margin: 0 0 8px;
			font-size: clamp(1.6rem, 5vw, 2rem);
			line-height: 1.15;
		}

		h2 {
			margin: 0 0 12px;
			font-size: clamp(1.2rem, 4.5vw, 1.5rem);
			line-height: 1.2;
		}

		h3 {
			margin: 0 0 10px;
			font-size: clamp(1.05rem, 4vw, 1.2rem);
			line-height: 1.25;
		}

		.subtitle {
			margin: 0;
			color: var(--muted);
			font-size: 0.98rem;
		}

		.panel {
			background: rgba(17, 24, 39, 0.92);
			border: 1px solid var(--border);
			border-radius: 16px;
			padding: 16px;
			box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
		}

		.tab-bar {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			margin-bottom: 18px;
		}

		.tab-button {
			border: 1px solid var(--border);
			background: var(--panel-2);
			color: var(--text);
			padding: 14px 12px;
			border-radius: 12px;
			cursor: pointer;
			font-size: 1rem;
			font-weight: 600;
			min-height: 48px;
			transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
		}

		.tab-button:hover {
			transform: translateY(-1px);
			border-color: #475569;
		}

		.tab-button.active {
			background: var(--accent);
			border-color: var(--accent-2);
			color: #052e16;
			font-weight: 700;
		}

		.tab-content {
			display: none;
		}

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

		.control-group {
			display: grid;
			gap: 12px;
			margin-bottom: 18px;
		}

		label {
			font-weight: 700;
			display: block;
			margin-bottom: 6px;
			font-size: 0.98rem;
		}

		select,
		input[type="text"],
		input[type="file"],
		textarea {
			width: 100%;
			padding: 14px 12px;
			border-radius: 12px;
			border: 1px solid var(--border);
			background: #0b1220;
			color: var(--text);
			font-size: 16px;
			min-height: 48px;
		}

		textarea {
			min-height: 92px;
			resize: vertical;
		}

		.result-card {
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 14px;
			padding: 16px;
			overflow-wrap: break-word;
		}

		.info-row {
			margin-bottom: 14px;
		}

		.info-label {
			display: block;
			font-size: 0.8rem;
			color: var(--muted);
			margin-bottom: 6px;
			text-transform: uppercase;
			letter-spacing: 0.04em;
		}

		.effect-list {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.effect {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}

		.effect-icon {
			width: 18px;
			height: 18px;
			object-fit: contain;
			flex: 0 0 auto;
		}

		.badge {
			display: inline-flex;
			align-items: center;
			padding: 7px 10px;
			border-radius: 999px;
			background: #1e293b;
			border: 1px solid #334155;
			color: #dbeafe;
			font-size: 0.9rem;
			max-width: 100%;
		}

		.item-list {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			gap: 12px;
		}

		.item-list li {
			padding: 14px;
			border: 1px solid var(--border);
			border-radius: 12px;
			background: #0b1220;
		}

		.item-image-wrap {
			margin-bottom: 12px;
		}

		.item-image {
			display: block;
			max-width: 100%;
			width: 96px;
			height: auto;
			border-radius: 12px;
			border: 1px solid var(--border);
			background: #0b1220;
			padding: 8px;
		}

		.image-missing {
			padding: 12px;
			border: 1px dashed var(--border);
			border-radius: 12px;
			color: var(--muted);
			background: #0b1220;
		}

		.loading-note {
			color: var(--muted);
		}

		@media (max-width: 760px) {
			.container {
				padding: 12px;
			}

			.panel {
				padding: 14px;
				border-radius: 14px;
			}

			.tab-bar {
				grid-template-columns: 1fr;
			}

			.result-card {
				padding: 14px;
			}

			.item-image {
				width: 84px;
			}

			.badge {
				font-size: 0.85rem;
			}

			.language-block {
				flex: 1 1 100%;
			}
		}

		@media (max-width: 480px) {
			.container {
				padding: 10px;
			}

			.panel {
				padding: 12px;
			}

			h1 {
				margin-bottom: 6px;
			}

			.subtitle {
				font-size: 0.92rem;
			}

			.item-list li {
				padding: 12px;
			}

			.effect-list {
				gap: 6px;
			}

			.badge {
				padding: 6px 9px;
				font-size: 0.82rem;
			}

			.item-image {
				width: 72px;
			}
		}