.jin-dd,
.jin-dd * { box-sizing: border-box; }
.jin-dd {
	--ink: #172033; --muted: #667085; --line: #dde3ee; --soft: #f6f8fc; --brand: #6655e8;
	--brand-dark: #5141c9; --added: #e8f8ef; --added-ink: #137044; --removed: #fff0f0; --removed-ink: #b42318; --changed: #fff8dc;
	max-width: 1180px; margin: 18px auto 80px; color: var(--ink); font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
}
.jin-dd button,.jin-dd input,.jin-dd select,.jin-dd textarea { font: inherit; }
.jin-dd button:focus-visible,.jin-dd input:focus-visible,.jin-dd select:focus-visible,.jin-dd textarea:focus-visible,.jin-dd [tabindex]:focus-visible { outline: 3px solid #8eb8ff; outline-offset: 2px; }
.jin-dd__header { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 16px 16px 0 0; background: #fff; }
.jin-dd__header h1 { margin: 0; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.3; letter-spacing: .01em; }
.jin-dd__logo { display: grid; place-items: center; flex: 0 0 auto; min-width: 38px; height: 38px; }
.jin-dd__logo-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#745fff,#4e3ccc); font-size: 24px; font-weight: 800; }
.jin-dd__logo-image { display: block; width: auto; max-width: 150px; height: 38px; object-fit: contain; }
.jin-dd__account { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; padding: 7px 14px; border-inline: 1px solid var(--line); background: #fbfcff; font-size: 12px; }
.jin-dd__plan { padding: 1px 8px; border-radius: 999px; color: #4636b9; background: #eeeafd; }
.jin-dd__plan--pro,.jin-dd__plan--beta { color: #8a4b00; background: #fff0cf; }
.jin-dd__limit { margin-left: auto; color: var(--muted); }
.jin-dd__privacy { display: flex; gap: 9px; padding: 8px 14px; border: 1px solid #b8dfcf; background: #f0fbf6; color: #285f49; }
.jin-dd__privacy p { margin: 0; font-size: 12px; }
.jin-dd__intro { padding: 12px 15px; border: 1px solid var(--line); border-top: 0; background: #fff; }
.jin-dd__intro h2 { margin: 0 0 3px; font-size: 15px; }
.jin-dd__intro p { margin: 0; color: var(--muted); font-size: 13px; }
.jin-dd-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 12px 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.jin-dd-steps li { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 60px; color: #8c94a8; font-weight: 700; }
.jin-dd-steps li:not(:last-child)::after { content: ""; position: absolute; right: -17%; width: 34%; height: 1px; background: var(--line); }
.jin-dd-steps span { display: grid; place-items: center; width: 29px; height: 29px; border: 2px solid #ccd3e1; border-radius: 50%; }
.jin-dd-steps .is-current { color: var(--brand); }.jin-dd-steps .is-current span { color: #fff; border-color: var(--brand); background: var(--brand); }.jin-dd-steps .is-complete span { color: #fff; border-color: #3f9b70; background: #3f9b70; }
.jin-dd-tabs { display: grid; grid-template-columns: 1fr 1fr; max-width: 560px; margin: 0 auto 10px; padding: 4px; border-radius: 12px; background: #e9edf5; }
.jin-dd-tabs button { min-height: 40px; border: 0; border-radius: 9px; color: #596174; background: transparent; cursor: pointer; font-weight: 700; }.jin-dd-tabs button[aria-selected="true"] { color: var(--brand-dark); background: #fff; box-shadow: 0 2px 8px #26324b17; }
.jin-dd-panel,.jin-dd-result { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 30px #34405e0b; }
.jin-dd-panel[hidden],.jin-dd [hidden] { display: none !important; }
.jin-dd-editors { display: grid; grid-template-columns: minmax(0,1fr) 50px minmax(0,1fr); align-items: center; gap: 10px; }
.jin-dd-editors label { display: grid; gap: 6px; color: #394056; font-weight: 700; }.jin-dd-editors textarea { width: 100%; min-height: 260px; resize: vertical; padding: 12px; border: 1px solid #cbd3e1; border-radius: 11px; color: var(--ink); background: #fcfdff; line-height: 1.65; font-family: ui-monospace,SFMono-Regular,Consolas,"Noto Sans Mono CJK JP",monospace; }.jin-dd-editors small { justify-self: end; color: var(--muted); font-weight: 400; }
.jin-dd-swap { display: grid; place-items: center; gap: 0; min-height: 52px; border: 1px solid var(--line); border-radius: 12px; color: var(--brand-dark); background: #f6f4ff; cursor: pointer; font-size: 21px; }.jin-dd-swap span { font-size: 10px; }
.jin-dd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.jin-dd-button,.jin-dd-result__nav button,.jin-dd-view-switch button { min-height: 40px; padding: 7px 14px; border: 1px solid #ccd3e1; border-radius: 9px; color: #30384b; background: #fff; cursor: pointer; font-weight: 700; }.jin-dd-button--primary { color: #fff; border-color: var(--brand); background: var(--brand); }.jin-dd-button--primary:hover { background: var(--brand-dark); }.jin-dd button:disabled { cursor: not-allowed; opacity: .48; }
.jin-dd-file-state { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 12px; padding: 9px 12px; border-radius: 10px; }.jin-dd-file-state.is-ready { color: #176543; background: #edf9f3; }.jin-dd-file-state.is-warning { color: #8a4b00; background: #fff6df; }
.jin-dd-file-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.jin-dd-drop { position: relative; display: grid; place-items: center; min-height: 180px; padding: 20px; border: 2px dashed #bfc7d8; border-radius: 14px; background: #fafbfe; text-align: center; cursor: pointer; }.jin-dd-drop:hover,.jin-dd-drop.is-dragging { border-color: var(--brand); background: #f1edff; box-shadow: 0 0 0 4px rgba(103,72,224,.12); }.jin-dd-drop__number { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #fff; background: var(--brand); font-weight: 800; }.jin-dd-drop small { max-width: 100%; color: var(--muted); overflow-wrap: anywhere; }.jin-dd-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.jin-dd-encoding { margin-top: 13px; padding: 12px; border-radius: 12px; background: var(--soft); }.jin-dd-encoding h3,.jin-dd-encoding p { margin: 0 0 7px; }.jin-dd-encoding > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.jin-dd-encoding label { display: grid; gap: 4px; font-weight: 700; }.jin-dd select,.jin-dd input[type="number"] { min-height: 40px; padding: 6px 9px; border: 1px solid #cbd3e1; border-radius: 8px; background: #fff; }
.jin-dd-panel > h2 { margin: 0 0 3px; font-size: 19px; }.jin-dd-panel > p { margin: 0 0 12px; color: var(--muted); }.jin-dd-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.jin-dd-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcff; cursor: pointer; }.jin-dd-options input { width: 18px; height: 18px; }.jin-dd-csv-key,.jin-dd-consent,[data-turnstile-area] { margin-top: 12px; padding: 11px; border-radius: 10px; background: var(--soft); }.jin-dd-csv-key label { margin-right: 12px; }
.jin-dd-result { margin-top: 12px; min-height: 300px; }.jin-dd-result__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.jin-dd-result__heading p { margin: 0; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.jin-dd-result__heading h2 { margin: 0; font-size: 18px; }.jin-dd-result__nav { display: flex; gap: 5px; }.jin-dd-result__nav button { min-height: 34px; padding: 4px 9px; font-size: 12px; }
.jin-dd-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0; }.jin-dd-summary span { padding: 3px 9px; border-radius: 999px; background: var(--soft); font-size: 12px; }.jin-dd-summary .is-added { color: var(--added-ink); background: var(--added); }.jin-dd-summary .is-removed { color: var(--removed-ink); background: var(--removed); }.jin-dd-summary .is-changed { color: #865c00; background: var(--changed); }
.jin-dd-progress { padding: 20px; border-radius: 12px; background: var(--soft); text-align: center; }.jin-dd-progress progress { width: min(560px,100%); height: 13px; accent-color: var(--brand); }.jin-dd-progress .jin-dd-button { display: block; margin: 10px auto 0; }
.jin-dd-view-switch { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 7px; }.jin-dd-view-switch button { min-height: 32px; padding: 3px 9px; font-size: 12px; }.jin-dd-view-switch .is-active { color: #fff; border-color: var(--brand); background: var(--brand); }
.jin-dd-result__body { min-height: 180px; max-height: 620px; border: 1px solid var(--line); border-radius: 11px; background: #fff; overflow: auto; }.jin-dd-placeholder { display: grid; place-items: center; align-content: center; min-height: 180px; color: #8b93a6; text-align: center; }.jin-dd-placeholder span { font-size: 36px; }.jin-dd-placeholder p { margin: 2px; }
.jin-dd-diff--side { display: grid; grid-template-columns: 1fr 1fr; min-width: 680px; }.jin-dd-diff section + section { border-left: 1px solid var(--line); }.jin-dd-diff h3 { position: sticky; top: 0; z-index: 2; margin: 0; padding: 8px 11px; border-bottom: 1px solid var(--line); background: #f5f7fb; font-size: 13px; }.jin-dd-line { display: grid; grid-template-columns: 52px minmax(0,1fr); min-height: 31px; border-bottom: 1px solid #eef1f6; font: 12px/1.6 ui-monospace,SFMono-Regular,Consolas,"Noto Sans Mono CJK JP",monospace; }.jin-dd-line__number { padding: 5px 8px; color: #8a92a3; background: #f7f8fb; text-align: right; user-select: none; }.jin-dd-line__text { min-width: 0; padding: 5px 9px; white-space: pre-wrap; overflow-wrap: anywhere; }.jin-dd-line--added { background: var(--added); }.jin-dd-line--removed { background: var(--removed); }.jin-dd-line--changed { background: var(--changed); }.jin-dd-line mark { padding: 1px 0; border-radius: 2px; }.jin-dd-line mark.is-added { color: #075c35; background: #83dfad; }.jin-dd-line mark.is-removed { color: #8f1d14; background: #ffaaa5; text-decoration: line-through; }.jin-dd-line.is-current-diff { box-shadow: inset 4px 0 #2777e6; }
.jin-dd-diff--unified { min-width: 480px; }.jin-dd-result__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 11px; }
.screen-reader-text { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
@media (max-width: 700px) { .jin-dd { margin-inline: 0; font-size: 13px; }.jin-dd__limit { width: 100%; margin-left: 0; }.jin-dd-steps li { min-height: 54px; font-size: 11px; text-align: center; }.jin-dd-steps li:not(:last-child)::after { display: none; }.jin-dd-steps span { width: 25px; height: 25px; }.jin-dd-editors { grid-template-columns: 1fr; }.jin-dd-editors textarea { min-height: 190px; }.jin-dd-swap { justify-self: center; width: 110px; grid-auto-flow: column; }.jin-dd-file-grid,.jin-dd-encoding > div,.jin-dd-options { grid-template-columns: 1fr; }.jin-dd-result__heading { align-items: flex-start; flex-direction: column; }.jin-dd-result__nav { align-self: stretch; }.jin-dd-result__nav button { flex: 1; }.jin-dd-result__actions { flex-direction: column; }.jin-dd-result__actions button { width: 100%; } }
@media (max-width: 380px) { .jin-dd__header { padding: 7px 9px; }.jin-dd__header h1 { font-size: 17px; }.jin-dd-panel,.jin-dd-result { padding: 11px; }.jin-dd-steps { grid-template-columns: repeat(2,1fr); }.jin-dd-steps li { min-height: 43px; } }
@media (prefers-reduced-motion: reduce) { .jin-dd * { scroll-behavior: auto!important; transition: none!important; animation: none!important; } }
@media (forced-colors: active) { .jin-dd__plan,.jin-dd-summary span,.jin-dd-line { border: 1px solid CanvasText; }.jin-dd-button--primary { forced-color-adjust: none; } }