.jin-encoding-converter,
.jin-encoding-converter * { box-sizing: border-box; }

.jin-encoding-converter {
	--jin-accent: #16649a;
	--jin-accent-dark: #0b426a;
	--jin-border: #c7d1db;
	--jin-muted: #f4f7f9;
	--jin-text: #1e2933;
	--jin-danger: #9d2020;
	--jin-success: #116b43;
	width: min(100%, 72rem);
	margin: 0.5rem auto;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--jin-text);
	background: #fff;
	border: 1px solid var(--jin-border);
	border-radius: 0.6rem;
	box-shadow: 0 0.35rem 1rem rgb(20 45 68 / 8%);
	overflow: hidden;
}

.jin-encoding-converter [hidden] { display: none !important; }

.jin-encoding-converter .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.jin-encoding-converter__header {
	display: grid;
	grid-template-columns: minmax(4.75rem, 7.5rem) 1fr;
	min-height: 4.25rem;
	border-bottom: 1px solid var(--jin-border);
}

.jin-encoding-converter__logo,
.jin-encoding-converter__title {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.55rem 0.75rem;
}

.jin-encoding-converter__logo {
	background: var(--jin-muted);
	border-right: 1px solid var(--jin-border);
}

.jin-encoding-converter__logo-image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 2.9rem;
	object-fit: contain;
}

.jin-encoding-converter__logo-mark {
	display: inline-grid;
	place-items: center;
	width: 3.25rem;
	min-height: 2.1rem;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--jin-accent-dark);
	border-radius: 0.35rem;
}

.jin-encoding-converter__title {
	font-size: clamp(1rem, 2vw, 1.35rem);
	line-height: 1.3;
	text-align: center;
}

.jin-encoding-converter__account {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.8rem;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.75rem;
	font-size: 0.75rem;
	border-bottom: 1px solid var(--jin-border);
}

.jin-encoding-converter__account p { margin: 0; }

.jin-encoding-converter__account-summary {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	font-weight: 650;
	white-space: nowrap;
}

.jin-encoding-converter__badge {
	display: inline-block;
	padding: 0.12rem 0.4rem;
	font-size: 0.7rem;
	font-weight: 750;
	border-radius: 999px;
}

.jin-encoding-converter__badge--guest { color: #4a4f55; background: #e8ebee; }
.jin-encoding-converter__badge--registered { color: #0b4d75; background: #e2f1fb; }
.jin-encoding-converter__badge--pro { color: #633b00; background: #ffe19a; }
.jin-encoding-converter__limits { color: #425466; }

.jin-encoding-converter__privacy {
	display: flex;
	gap: 0.4rem;
	align-items: flex-start;
	padding: 0.45rem 0.75rem;
	font-size: 0.75rem;
	color: #4b3a00;
	background: #fff9df;
	border-bottom: 1px solid #e1cc82;
}

.jin-encoding-converter__privacy p,
.jin-encoding-converter__intro p { margin: 0; }

.jin-encoding-converter__intro {
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	background: var(--jin-muted);
	border-bottom: 1px solid var(--jin-border);
}

.jin-encoding-converter__intro h2 {
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
	line-height: 1.35;
}

.jin-encoding-converter__main { padding: clamp(0.75rem, 2.5vw, 1.25rem); }
.jin-encoding-workspace { width: min(100%, 62rem); margin: 0 auto; }

.jin-encoding-dropzone {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.85rem;
	align-items: center;
	justify-content: center;
	padding: 0.8rem;
	text-align: center;
	background: #f8fafc;
	border: 2px dashed #8193a4;
	border-radius: 0.5rem;
}

.jin-encoding-dropzone.is-dragging { background: #eaf5fc; border-color: var(--jin-accent); }

.jin-encoding-dropzone p,
.jin-encoding-output-setting p,
.jin-encoding-file-list__summary p,
.jin-encoding-status,
.jin-encoding-result p,
.jin-encoding-errors > p { margin: 0; }

.jin-encoding-button {
	display: inline-flex;
	min-height: 2.35rem;
	padding: 0.42rem 0.8rem;
	font: inherit;
	font-weight: 700;
	line-height: 1.35;
	color: var(--jin-accent-dark);
	text-decoration: none;
	cursor: pointer;
	background: #fff;
	border: 1px solid #6e8294;
	border-radius: 0.35rem;
	align-items: center;
	justify-content: center;
}

.jin-encoding-button--primary { color: #fff; background: var(--jin-accent); border-color: var(--jin-accent-dark); }
.jin-encoding-button:hover { filter: brightness(0.96); }
.jin-encoding-button:disabled { color: #6b737a; cursor: not-allowed; background: #e7eaed; border-color: #b8c0c7; }

.jin-encoding-converter button:focus-visible,
.jin-encoding-converter a:focus-visible,
.jin-encoding-converter select:focus-visible,
.jin-encoding-converter input:focus-visible {
	outline: 3px solid #f0b82d;
	outline-offset: 2px;
}

.jin-encoding-file-list {
	margin-top: 0.75rem;
	border: 1px solid var(--jin-border);
	border-radius: 0.4rem;
}

.jin-encoding-file-list__summary {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.4rem 0.6rem;
	font-weight: 650;
	background: var(--jin-muted);
	border-bottom: 1px solid var(--jin-border);
}

.jin-encoding-file-list__table-wrap { overflow-x: auto; }
.jin-encoding-file-list table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }

.jin-encoding-file-list th,
.jin-encoding-file-list td {
	padding: 0.42rem 0.5rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #e2e7eb;
}

.jin-encoding-file-list tbody tr:last-child > * { border-bottom: 0; }
.jin-encoding-file-list thead th { white-space: nowrap; background: #fbfcfd; }
.jin-encoding-file-list tbody th { max-width: 19rem; overflow-wrap: anywhere; }

.jin-encoding-file-list select,
.jin-encoding-output-setting select {
	max-width: 100%;
	min-height: 2.2rem;
	padding: 0.3rem 1.8rem 0.3rem 0.45rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #6e8294;
	border-radius: 0.3rem;
}

.jin-encoding-link-button {
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--jin-accent-dark);
	text-decoration: underline;
	cursor: pointer;
	background: transparent;
	border: 0;
}

.jin-encoding-link-button--danger,
.jin-encoding-cell-error { color: var(--jin-danger); }

.jin-encoding-needs-confirmation {
	display: inline-block;
	margin-bottom: 0.15rem;
	font-weight: 700;
	color: #715000;
}

.jin-encoding-output-setting {
	display: grid;
	grid-template-columns: max-content minmax(14rem, 1fr);
	gap: 0.35rem 0.75rem;
	align-items: center;
	margin-top: 0.75rem;
	padding: 0.65rem;
	background: var(--jin-muted);
	border: 1px solid var(--jin-border);
	border-radius: 0.4rem;
}

.jin-encoding-output-setting label { font-weight: 750; }
.jin-encoding-output-setting p { grid-column: 1 / -1; font-size: 0.75rem; color: #4d5a66; }

.jin-encoding-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 0.75rem;
}

.jin-encoding-status { padding: 0.45rem; font-weight: 650; text-align: center; }
.jin-encoding-status[data-kind="error"] { color: var(--jin-danger); }
.jin-encoding-status[data-kind="warning"] { color: #715000; }
.jin-encoding-status[data-kind="success"] { color: var(--jin-success); }

.jin-encoding-errors,
.jin-encoding-result { margin-top: 0.5rem; padding: 0.65rem; border-radius: 0.4rem; }
.jin-encoding-errors { color: #4f1616; background: #fff4f4; border: 1px solid #dc9a9a; }
.jin-encoding-result { color: #174c34; text-align: center; background: #effaf4; border: 1px solid #90cfad; }

.jin-encoding-errors h3,
.jin-encoding-result h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }

.jin-encoding-errors article {
	margin-top: 0.5rem;
	padding: 0.5rem;
	background: #fff;
	border: 1px solid #e8bbbb;
	border-radius: 0.3rem;
}

.jin-encoding-errors h4,
.jin-encoding-errors article p,
.jin-encoding-errors ul { margin: 0.2rem 0; }
.jin-encoding-errors ul { padding-left: 1.25rem; }
.jin-encoding-result .jin-encoding-button { margin-top: 0.5rem; }

@media (max-width: 42rem) {
	.jin-encoding-converter { margin-block: 0.35rem; font-size: 0.825rem; border-radius: 0.35rem; }
	.jin-encoding-converter__header { grid-template-columns: 4.25rem 1fr; min-height: 3.8rem; }
	.jin-encoding-converter__logo,
	.jin-encoding-converter__title { padding: 0.4rem; }
	.jin-encoding-converter__logo-image { max-height: 2.5rem; }
	.jin-encoding-converter__title { font-size: 0.95rem; }
	.jin-encoding-converter__account { gap: 0.15rem 0.5rem; padding: 0.35rem 0.5rem; }
	.jin-encoding-converter__account-summary { white-space: normal; }
	.jin-encoding-converter__privacy,
	.jin-encoding-converter__intro { padding: 0.4rem 0.5rem; }
	.jin-encoding-dropzone { padding: 0.65rem; }
	.jin-encoding-file-list__table-wrap { overflow: visible; }
	.jin-encoding-file-list table,
	.jin-encoding-file-list tbody,
	.jin-encoding-file-list tr,
	.jin-encoding-file-list th,
	.jin-encoding-file-list td { display: block; width: 100%; }
	.jin-encoding-file-list thead { display: none; }
	.jin-encoding-file-list tr { padding: 0.45rem; border-bottom: 1px solid var(--jin-border); }
	.jin-encoding-file-list tr:last-child { border-bottom: 0; }
	.jin-encoding-file-list th,
	.jin-encoding-file-list td { padding: 0.25rem; border: 0; }
	.jin-encoding-file-list td::before { content: attr(data-label) "："; font-weight: 750; }
	.jin-encoding-file-list select { width: 100%; margin-top: 0.15rem; }
	.jin-encoding-output-setting { grid-template-columns: 1fr; }
	.jin-encoding-output-setting p { grid-column: auto; }
	.jin-encoding-output-setting select,
	.jin-encoding-actions .jin-encoding-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.jin-encoding-converter *,
	.jin-encoding-converter *::before,
	.jin-encoding-converter *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (forced-colors: active) {
	.jin-encoding-button,
	.jin-encoding-dropzone,
	.jin-encoding-file-list,
	.jin-encoding-output-setting,
	.jin-encoding-errors,
	.jin-encoding-result { border-color: CanvasText; }
}