/* DIY Promotion — Fix my page code */
.fx-form { display: grid; gap: 12px; max-width: 900px; }
.fx-form .field { margin: 0; }
.fx-form textarea, .fx-code { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; font: 400 .85rem/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: #fff; resize: vertical; }
.fx-kw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-kw textarea { font-family: var(--font); }
.fx-go { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#fx-paste-f[hidden], #fx-url-f[hidden] { display: none; }
.fx-small { font-size: .85rem; margin: 0 0 10px; }
.fx-h4 { margin: 20px 0 4px; color: var(--ink); }
.fx-scores { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fx-scores > div:not(.fx-arrow):not(.fx-score-note) { display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; min-width: 150px; }
.fx-scores span { font-size: .8rem; color: var(--muted); }
.fx-scores b { font: 800 2rem/1.1 var(--display); color: var(--ink); }
.fx-scores > div:nth-child(3) b { color: var(--accent, #1f4fd1); }
.fx-arrow { font-size: 1.4rem; color: var(--muted); }
.fx-score-note { flex: 1; min-width: 200px; font-size: .85rem; }
.fx-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.fx-kwt { width: 100%; border-collapse: collapse; font-size: .8rem; }
.fx-kwt th, .fx-kwt td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.fx-kwt thead th { color: var(--muted); font-weight: 600; background: var(--bg-soft); }
.fx-kwt tbody th { color: var(--ink); font-weight: 700; }
.fx-kwt td.fx-yes { color: #047857; } .fx-kwt td.fx-no { color: #b91c1c; } .fx-kwt td.fx-new { color: #047857; font-weight: 700; background: #f0fdf4; }
.fx-ch-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fx-ch-head h3 { margin: 0; }
.fx-ch-head select { height: 38px; border: 1.5px solid var(--line); border-radius: 8px; padding: 0 10px; font: 600 .85rem var(--font); background: #fff; }
.fx-group { margin-top: 18px; }
.fx-group-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.fx-group-head h4 { margin: 0; color: var(--ink); }
.fx-group-head p { margin: 2px 0 0; font-size: .82rem; }
.fx-all { border: 0; background: none; color: var(--accent, #1f4fd1); font: 600 .82rem var(--font); cursor: pointer; padding: 4px 0; }
.fx-ch { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.fx-ch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fx-tick { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 2px solid #c3c9d8; border-radius: 4px; background: #fff; }
.fx-ch input:checked + .fx-tick { background: var(--accent, #1f4fd1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--accent, #1f4fd1); }
.fx-ch input:focus-visible + .fx-tick { box-shadow: 0 0 0 3px rgba(31,79,209,.3); }
.fx-ch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fx-ch-body b { color: var(--ink); font-size: .9rem; }
.fx-ch.off .fx-ch-body { opacity: .5; }
.fx-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-b, .fx-a { padding: 10px 12px; border-radius: 6px; font-size: .86rem; line-height: 1.5; color: var(--ink); word-break: break-word; }
.fx-b { background: #fbf3f3; border-left: 3px solid #e3a5a5; }
.fx-a { background: #f1f8f3; border-left: 3px solid #7cc39a; }
.fx-b i, .fx-a i { display: block; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.fx-ba code { font-size: .78rem; white-space: pre-wrap; }
.fx-actions { margin-top: 16px; }
.fx-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.fx-compare iframe { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.fx-compare[hidden], #fx-cmp-code[hidden] { display: none; }
.fx-cap { margin: 0 0 6px; font-weight: 700; color: var(--ink); font-size: .85rem; }
.fx-diff { margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; max-height: 620px; overflow: auto; font: 400 .75rem/1.55 ui-monospace, Menlo, Consolas, monospace; background: #fff; }
.fx-l { padding: 0 10px 0 0; white-space: pre-wrap; word-break: break-all; display: flex; }
.fx-l i { flex: none; width: 22px; text-align: center; font-style: normal; color: var(--muted); }
.fx-ld { background: #fdecec; } .fx-la { background: #e8f6ec; }
.fx-fold { padding: 4px 22px; color: var(--muted); background: var(--bg-soft); font-family: var(--font); }
.fx-dl { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fx-how { margin-top: 16px; font-size: .9rem; }
.fx-how summary { cursor: pointer; color: var(--accent, #1f4fd1); font-weight: 600; }
.fx-how ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.fx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.fx-box { border: 1px solid var(--line); border-radius: 8px; padding: 16px; min-width: 0; }
.fx-box h4 { margin: 0 0 6px; color: var(--ink); }
.fx-box[hidden] { display: none; }
.fx-q { font-size: .88rem; margin: 0 0 10px; }
.fx-code { margin: 6px 0 8px; font-size: .75rem; background: var(--bg-soft); }
.fx-notes { margin: 0 0 10px; padding-left: 18px; font-size: .9rem; display: grid; gap: 6px; }
@media (max-width: 860px) { .fx-kw, .fx-ba, .fx-compare, .fx-grid2 { grid-template-columns: 1fr; } .fx-compare iframe { height: 420px; } }
.seo-wait[hidden], .seo-err[hidden] { display: none; }