.word-swap-launch,.word-swap-inline{font:700 14px/1.2 system-ui,-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;border:1px solid #bdd4d0;background:#f7fffc;color:#113f37;box-shadow:0 8px 24px #082e2b25}
.word-swap-launch{position:fixed;z-index:1700;left:18px;bottom:18px;border-radius:999px;padding:12px 16px;max-width:calc(100vw - 36px)}
.word-swap-inline{display:block;border-radius:12px;padding:10px 14px;margin:14px 0 0 auto}
.word-swap-launch:hover,.word-swap-inline:hover{background:#e0f7ef}
.word-swap-dialog{border:0;border-radius:24px;padding:0;width:min(760px,calc(100vw - 24px));max-height:min(92vh,920px);overflow:auto;background:#fff;color:#17312c;box-shadow:0 28px 90px #051d1a75;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,sans-serif}
.word-swap-dialog::backdrop{background:#081a19b8;backdrop-filter:blur(5px)}
.word-swap-panel{padding:clamp(18px,4vw,34px)}
.word-swap-panel header{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:18px}
.word-swap-panel header small{display:block;color:#287968;font-size:11px;font-weight:800;letter-spacing:.15em}
.word-swap-panel h2{font-size:clamp(24px,4vw,34px);margin:4px 0 6px;line-height:1.15;color:#113d35}
.word-swap-panel header p{margin:0;color:#5d7771;font-size:14px}
.word-swap-close{flex:none;border:0;background:#ecf4f1;border-radius:50%;width:36px;height:36px;color:#27534b;font-size:26px;line-height:1;cursor:pointer}
.word-swap-label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
#word-swap-pattern{width:100%;border:1px solid #c8d9d3;border-radius:10px;background:#f7faf8;color:#17312c;padding:11px 12px;font:inherit}
#word-swap-mission{width:100%;border:1px solid #c8d9d3;border-radius:10px;background:#f7faf8;color:#17312c;padding:11px 12px;font:inherit;margin-bottom:12px}
.word-swap-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin:16px 0 6px;padding:16px;border-radius:16px;background:#eef6f2;font-size:clamp(22px,4vw,34px);font-weight:800;line-height:1.4;text-align:center;word-break:keep-all}
.word-swap-line mark{background:#c8ecae;color:#124c38;border-radius:7px;padding:0 5px}
.word-swap-count{text-align:right;color:#578173;font-size:12px;font-weight:800;margin:6px 0 10px}
.word-swap-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.word-swap-photo{position:relative;display:flex;flex-direction:column;text-align:left;gap:1px;overflow:hidden;padding:0 0 12px;border:2px solid #d8e5e0;border-radius:16px;background:#fff;color:#143c34;cursor:pointer}
.word-swap-photo.selected{border-color:#148867;box-shadow:0 0 0 3px #14886725}
.word-swap-photo.practiced{border-color:#3e996b}
.word-swap-image{position:relative;display:block;width:100%;aspect-ratio:1;background-color:#e9eeeb;background-repeat:no-repeat}
.word-swap-image-badge{position:absolute;right:7px;bottom:7px;max-width:calc(100% - 14px);padding:3px 7px;border-radius:7px;background:#fff;box-shadow:0 2px 8px #1236;color:#17312c;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.word-swap-photo strong,.word-swap-photo small{display:block;padding:0 10px}
.word-swap-photo strong{font-size:17px;margin-top:8px;word-break:keep-all}
.word-swap-photo small{font-size:12px;color:#58716a}
.word-swap-check{position:absolute;right:8px;top:8px;background:#0e8660;color:#fff;border-radius:50%;width:24px;height:24px;text-align:center;font-weight:900}
.word-swap-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.word-swap-actions button,.word-swap-input button{border:0;border-radius:10px;background:#123e35;color:#fff;padding:11px 14px;font:700 13px/1.2 system-ui,-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer}
.word-swap-actions button:nth-child(2){background:#dceee7;color:#164737}
.word-swap-actions button:nth-child(3){background:#237b66}
.word-swap-input{display:flex;gap:8px;margin-top:10px}
.word-swap-input input{min-width:0;flex:1;border:1px solid #c4d7d0;border-radius:10px;padding:10px 12px;font:inherit}
.word-swap-feedback{margin:12px 0 0;min-height:22px;color:#235b4e;font-size:13px}
@media(max-width:560px){.word-swap-launch{bottom:max(14px,env(safe-area-inset-bottom));left:12px;font-size:12px;padding:10px 12px}.word-swap-dialog{max-height:94vh}.word-swap-panel{padding:18px}.word-swap-photos{gap:6px}.word-swap-photo strong{font-size:14px}.word-swap-photo small{font-size:11px}.word-swap-actions button{flex:1}.word-swap-input{flex-direction:column}}