/* Code breakers */
.cp-text, .cp-wide { width: 100%; font: 16px "JetBrains Mono", monospace !important; }
.cp-out { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #0f172a; color: #a7f3d0; font: 600 18px/1.5 "JetBrains Mono", monospace; letter-spacing: 1px; overflow-wrap: anywhere; min-height: 46px; }
.cp-small { font-size: 13px; letter-spacing: 0; }
.cp-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.cp-h { margin: 14px 0 6px; font-weight: 700; }
.cz-wheel svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.cz-wheel .w-out { fill: #fef3c7; stroke: #f59e0b; stroke-width: 2; }
.cz-wheel .w-in { fill: #ccfbf1; stroke: #0d9488; stroke-width: 2; }
.cz-wheel text { font: 700 16px "JetBrains Mono", monospace; text-anchor: middle; }
.cz-wheel .w-plain { fill: #92400e; } .cz-wheel .w-code { fill: #115e59; }
.cz-wheel .w-mark { fill: #e11d48; }
.cz-wheel .w-k { font-size: 30px; fill: #0f172a; }
.vg-table { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.vg-table span { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 4px; border-radius: 8px; background: var(--soft); font-family: "JetBrains Mono", monospace; }
.vg-table i { font-style: normal; font-size: 10px; color: var(--muted); }
.vg-table .vg-sp { justify-content: center; color: var(--muted); }
.ck-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin-top: 12px; }
.ck-col { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; gap: 1px; padding-bottom: 18px; }
.ck-col i { flex: 1; border-radius: 3px 3px 0 0; }
.ck-col b { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: 600 11px "JetBrains Mono", monospace; }
.is-eng { background: #cbd5e1; } .is-msg { background: #0d9488; }
.cp-key { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); }
.cp-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -10px; }
.ck-tries { margin: 0; padding: 0; list-style: none; columns: 2 320px; font: 13px "JetBrains Mono", monospace; }
.ck-tries li { padding: 2px 6px; border-radius: 6px; break-inside: avoid; }
.ck-tries li.is-best { background: #dcfce7; font-weight: 700; }
.ck-tries li.is-best::before { content: "⭐ "; }
.hs-out { margin-top: 8px; padding: 10px; border-radius: 12px; background: #0f172a; color: #94a3b8; font: 600 14px/1.6 "JetBrains Mono", monospace; overflow-wrap: anywhere; }
.hs-out .is-diff { color: #fbbf24; }
.pw-meter { height: 12px; margin: 10px 0 6px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: var(--w, 0); background: #ef4444; transition: width .3s, background .3s; }
.pw-meter[data-level="1"] span { background: #f97316; } .pw-meter[data-level="2"] span { background: #eab308; } .pw-meter[data-level="3"] span { background: #22c55e; }
.cp-tips { padding-left: 18px; list-style: disc; }
.ms-data-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ms-data { padding: 10px 12px !important; border-radius: 12px !important; background: #0f172a !important; color: #fde68a; font-size: 16px !important; overflow-wrap: anywhere; max-width: 100%; }