:root { --jc-ink: #233747; --jc-muted: #73808a; --jc-line: #e0e5e9; --jc-blue: #385b76; }
.jc-dialog, .jc-dialog * { box-sizing: border-box; }
.jc-dialog {
  width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow: auto; color: var(--jc-ink); background: #fff;
  border: 1px solid #dbe2e7; border-radius: 12px; box-shadow: 0 8px 28px #142c401c;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
.jc-dialog::backdrop { background: rgb(26 40 51 / 28%); }
.jc-dialog button { font: inherit; }
.jc-dialog button:focus-visible, .jc-board:focus-visible { outline: 2px solid #547d9a; outline-offset: 3px; }
.jc-header { display: flex; align-items: center; gap: 10px; padding: 18px 18px 15px; border-bottom: 1px solid #edf0f2; }
.jc-shield { width: 24px; height: 26px; color: #55758b; flex: none; }
.jc-title { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: .03em; }
.jc-mode { margin-left: auto; font-size: 11px; color: #84909a; }
.jc-close { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #87929a; cursor: pointer; }
.jc-close:hover { background: #f2f5f7; color: #314c60; }
.jc-close svg { width: 17px; height: 17px; }
.jc-body { padding: 16px 18px 0; }
.jc-instruction { margin: 0 0 11px; color: #657581; font-size: 13px; }
.jc-targets { display: flex; align-items: center; gap: 9px; min-height: 37px; margin: 0 0 15px; padding: 0; list-style: none; }
.jc-targets li { display: flex; gap: 9px; align-items: center; }
.jc-target { display: grid; place-items: center; min-width: 34px; height: 36px; padding: 0 6px; border: 1px solid #dfe6eb; border-radius: 5px; background: #f7f9fa; color: #314e64; font-size: 21px; font-weight: 500; line-height: 1; }
.jc-arrow { color: #a4afb7; font-size: 13px; }
.jc-target-placeholder { width: 174px; height: 36px; border-radius: 4px; background: #f1f4f6; }
.jc-board { position: relative; width: 100%; aspect-ratio: 19 / 11; overflow: hidden; border-radius: 5px; background: #f1f5f8; cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.jc-board:focus:not(:focus-visible) { outline: none; }
.jc-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.jc-image[hidden] { display: none; }
.jc-piece { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(1px 2px 2px #23374733); }
.jc-piece[hidden], .jc-slider[hidden] { display: none; }
.jc-dialog[data-type="slider"] .jc-targets, .jc-dialog[data-type="slider"] .jc-keyboard-hint { display: none; }
.jc-dialog[data-type="slider"] .jc-board { cursor: default; margin-top: 15px; }
.jc-dialog[data-type="slider"] .jc-body { padding-top: 18px; }
.jc-slider { position: relative; height: 42px; margin-top: 15px; border: 1px solid #dce3e8; border-radius: 5px; background: #f5f7f9; overflow: hidden; touch-action: none; }
.jc-slider-label { display: grid; height: 100%; place-items: center; color: #8b99a4; font-size: 12px; pointer-events: none; }
.jc-slider-fill { position: absolute; top: 0; bottom: 0; background: #e6edf2; pointer-events: none; }
.jc-slider-handle { position: absolute; top: 0; left: 0; height: 40px; width: 46px; border: 0; border-right: 1px solid #d3dfe7; border-radius: 4px; background: #fff; color: #45677f; box-shadow: 1px 0 3px #263d5010; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.jc-slider-handle span { font-size: 21px; }
.jc-slider-handle:active { cursor: grabbing; background: #f4f8fa; }
.jc-slider-handle:disabled { cursor: default; color: #9cabb6; }
.jc-marks { position: absolute; inset: 0; pointer-events: none; }
.jc-mark { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid #fff; border-radius: 50%; background: rgb(38 70 94 / 89%); box-shadow: 0 1px 3px #1d354d22; color: #fff; font-size: 12px; font-weight: 650; line-height: 1; transform: translate(-50%, -50%); }
.jc-crosshair { position: absolute; width: 24px; height: 24px; border: 1px dashed #244c69; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.jc-crosshair::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: #244c69; line-height: 1; }
.jc-board-state { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background: #f1f5f8; color: #738390; cursor: default; font-size: 13px; }
.jc-board-state[hidden], .jc-crosshair[hidden] { display: none; }
.jc-board-state[data-kind="success"] { background: rgb(247 251 249 / 96%); color: #31795d; font-size: 15px; }
.jc-success-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e4f1e9; color: #327b58; font-size: 23px; animation: jc-check .18s ease-out; }
.jc-loader { width: 18px; height: 18px; border: 2px solid #dbe3e8; border-top-color: #617f94; border-radius: 50%; animation: jc-spin .8s linear infinite; }
.jc-footer { display: flex; min-height: 52px; align-items: center; gap: 8px; padding: 12px 0; }
.jc-status { flex: 1; margin: 0; color: #657581; font-size: 12px; }
.jc-status[data-kind="error"] { color: #a25c4f; }
.jc-status[data-kind="success"] { color: #31795d; }
.jc-refresh { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-right: -5px; padding: 5px; border: 0; border-radius: 4px; color: #46667e; background: transparent; cursor: pointer; font-size: 12px !important; }
.jc-refresh svg { width: 14px; height: 14px; }
.jc-refresh:hover { background: #f1f5f7; }
.jc-refresh:disabled { color: #a7b0b7; cursor: default; }
.jc-meta { display: flex; justify-content: flex-end; gap: 10px; padding: 9px 18px; border-top: 1px solid #edf0f2; background: #fafbfc; color: #8d969e; font-size: 10px; letter-spacing: .02em; }
.jc-timer { font-variant-numeric: tabular-nums; color: #d93025; font-size: 12px; font-weight: 600; }
.jc-keyboard-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.jc-board:focus-visible ~ .jc-keyboard-hint { position: static; width: auto; height: auto; margin: 10px 0 0; clip-path: none; color: #738390; font-size: 11px; }
@keyframes jc-spin { to { transform: rotate(360deg); } }
@keyframes jc-check { from { transform: scale(.85); } to { transform: scale(1); } }
@media (max-width: 359px) { .jc-body { padding: 14px 14px 0; } .jc-targets, .jc-targets li { gap: 6px; } .jc-target { min-width: 30px; height: 33px; font-size: 19px; } .jc-mode { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .jc-dialog * { animation: none !important; transition: none !important; } }