.sos-app{
  --sos-ink:#1b2a41; --sos-line:#a3adbb; --sos-heavy:#1b2a41; --sos-paper:#fff;
  --sos-fill:#0b7a6c; --sos-fill-bg:#e6f4f1; --sos-low:#b86e00; --sos-low-bg:#fff1d0;
  --sos-unk:#6d3fd1; --sos-unk-bg:#efe7ff; --sos-bad:#c81e4a; --sos-bad-bg:#fde8ee;
  --sos-hl:#dbe8ff; --sos-panel:#f5f7fa; --sos-edge:#d7dde5; --sos-muted:#52627a;
  max-width:1100px; margin:1.5em auto; color:var(--sos-ink); font-size:16px; line-height:1.5; box-sizing:border-box;
}
.sos-app *,.sos-app *::before,.sos-app *::after{box-sizing:border-box}
.sos-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.sos-layout{grid-template-columns:1fr}}
.sos-panel{padding:18px;border:1.5px solid var(--sos-edge);border-radius:10px;background:#fff}
.sos-panel h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:19px;line-height:1.3;color:var(--sos-ink)}
.sos-panel h3 em{font-weight:400;font-style:normal;color:var(--sos-muted);font-size:15px}
.sos-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--sos-ink);color:#fff;font-size:15px;flex:none}
.sos-note{margin:10px 0 0;font-size:14px;color:var(--sos-muted)}

/* upload */
.sos-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 14px;border:2px dashed var(--sos-ink);border-radius:10px;background:var(--sos-panel);text-align:center;cursor:pointer;position:relative;transition:background .12s}
.sos-drop:hover,.sos-drop.sos-over,.sos-drop:focus-within{background:#e7eefc}
.sos-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.sos-drop-big{font-weight:700;font-size:18px}
.sos-drop-small{font-size:14px;color:var(--sos-muted)}
.sos-scan{margin-top:14px}
.sos-scan[hidden],.sos-howto[hidden],.sos-progress[hidden],.sos-mode-wrap[hidden],.sos-btn[hidden]{display:none!important}
.sos-preview{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;border:1px solid var(--sos-edge);border-radius:6px;background:#eee}
.sos-progress{width:100%;height:8px;margin-top:10px}
.sos-scan-msg{margin-top:10px;padding:10px 12px;border-left:5px solid var(--sos-edge);background:var(--sos-panel);border-radius:0 6px 6px 0;font-size:14.5px}
.sos-scan-msg:empty{display:none}
.sos-scan-msg p{margin:0 0 5px}.sos-scan-msg p:last-child{margin:0}
.sos-scan-msg.sos-ok{border-left-color:var(--sos-fill);background:var(--sos-fill-bg)}
.sos-scan-msg.sos-warn{border-left-color:var(--sos-low);background:var(--sos-low-bg)}
.sos-scan-msg.sos-err{border-left-color:var(--sos-bad);background:var(--sos-bad-bg)}
.sos-scan-msg.sos-info{border-left-color:#2f6fed;background:#eef3ff}
.sos-adjust{margin:10px 0;font-size:14px}
.sos-adjust summary{cursor:pointer;color:#1d4fc4;font-weight:600}
.sos-sliders{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:8px}
.sos-sliders label{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.sos-sliders input[type=range]{display:block;width:100%;min-width:0;max-width:100%;margin:0}

/* puzzle */
.sos-opts{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:12px;font-size:14.5px}
.sos-opts select{margin-left:6px;padding:5px 8px;border:1.5px solid var(--sos-ink);border-radius:6px;background:#fff;color:var(--sos-ink);font:inherit}
.sos-grid{display:grid;width:min(100%,60vh);min-width:260px;max-width:640px;aspect-ratio:1/1;background:var(--sos-paper);border:3px solid var(--sos-heavy);border-radius:4px}
.sos-app .sos-cell{width:100%;height:100%;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:var(--sos-paper);
  color:var(--sos-ink);text-align:center;font-family:ui-rounded,"Segoe UI",system-ui,sans-serif;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;caret-color:transparent;outline:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;transition:background .12s}
/* Grid lines are real borders (themes often remove box-shadows from inputs). */
/* Theme-proofing: many WordPress themes style every text input with padding, margins, rounded corners and a fixed font size. Those rules would squeeze the number out of the cell, so the cell geometry is locked here. */
.sos-app .sos-grid{gap:0!important;padding:0!important}
.sos-app .sos-grid input.sos-cell{display:block!important;box-sizing:border-box!important;width:100%!important;height:100%!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:0!important;border:0!important;border-right:1px solid var(--sos-line)!important;border-bottom:1px solid var(--sos-line)!important;border-radius:0!important;box-shadow:none;outline:0;
  font-size:var(--sos-fs,18px)!important;line-height:1!important;letter-spacing:0!important;text-indent:0!important;text-align:center!important;text-transform:none!important;text-shadow:none!important;
  overflow:visible!important;float:none!important;position:static!important;transform:none!important;filter:none!important}
.sos-app .sos-grid input.sos-cell.sos-t{border-top:2px solid var(--sos-heavy)!important}
.sos-app .sos-grid input.sos-cell.sos-l{border-left:2px solid var(--sos-heavy)!important}
.sos-app .sos-cell:focus,.sos-app .sos-cell.sos-hl{background:var(--sos-hl)!important;box-shadow:inset 0 0 0 3px #2f6fed!important}
.sos-app .sos-cell.sos-fill{color:var(--sos-fill)!important;background:var(--sos-fill-bg)!important;font-weight:500}
.sos-app .sos-cell.sos-low{background:var(--sos-low-bg)!important;color:var(--sos-low)!important;box-shadow:inset 0 0 0 2px var(--sos-low)!important}
.sos-app .sos-cell.sos-unk{background:var(--sos-unk-bg)!important;color:var(--sos-unk)!important;box-shadow:inset 0 0 0 2px var(--sos-unk)!important}
.sos-app .sos-cell.sos-bad{background:var(--sos-bad-bg)!important;color:var(--sos-bad)!important;box-shadow:inset 0 0 0 2px var(--sos-bad)!important}
.sos-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 0;font-size:13px;color:var(--sos-muted)}
.sos-key{display:inline-block;width:14px;height:14px;border:1.5px solid var(--sos-ink);border-radius:3px;margin-right:-8px;vertical-align:-2px;background:#fff}
.sos-key-fill{background:var(--sos-fill-bg);border-color:var(--sos-fill)}.sos-key-low{background:var(--sos-low-bg);border-color:var(--sos-low)}
.sos-key-unk{background:var(--sos-unk-bg);border-color:var(--sos-unk)}.sos-key-bad{background:var(--sos-bad-bg);border-color:var(--sos-bad)}

/* buttons */
.sos-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sos-app .sos-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 22px;margin:0;border:1.5px solid var(--sos-ink);border-radius:8px;background:#fff;color:var(--sos-ink);font:600 16px/1.2 inherit;cursor:pointer;transition:background .12s,color .12s}
.sos-app .sos-btn:hover{background:var(--sos-ink);color:#fff}
.sos-app .sos-primary{background:var(--sos-ink);color:#fff;min-width:140px;font-size:17px}
.sos-app .sos-primary:hover{background:var(--sos-fill);border-color:var(--sos-fill)}
.sos-app .sos-quiet{border-color:var(--sos-edge);font-weight:500;font-size:15px}
.sos-app .sos-btn:focus-visible,.sos-card-head:focus-visible,.sos-adjust summary:focus-visible{outline:3px solid #2f6fed;outline-offset:2px}

/* verdict */
.sos-verdict{margin-top:16px;padding:14px 16px;border-left:6px solid var(--sos-edge);background:var(--sos-panel);border-radius:0 8px 8px 0}
.sos-verdict p{margin:0 0 6px}.sos-verdict p:last-child{margin:0}
.sos-v-title{font-size:20px;font-weight:700;line-height:1.3;margin-bottom:6px}
.sos-verdict.sos-ok{border-left-color:var(--sos-fill);background:var(--sos-fill-bg)}.sos-verdict.sos-ok .sos-v-title{color:#075f54}
.sos-verdict.sos-warn{border-left-color:var(--sos-low);background:var(--sos-low-bg)}.sos-verdict.sos-warn .sos-v-title{color:#8a5200}
.sos-verdict.sos-err{border-left-color:var(--sos-bad);background:var(--sos-bad-bg)}.sos-verdict.sos-err .sos-v-title{color:#a3153a}
.sos-verdict.sos-info{border-left-color:#2f6fed;background:#eef3ff}

/* steps with pictures */
.sos-howto{margin-top:28px;padding:20px;border:1.5px solid var(--sos-edge);border-radius:10px;background:#fff}
.sos-howto h3{margin:0 0 8px;font-size:22px}
.sos-howto-intro p{margin:0 0 8px}
.sos-picture-key{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:6px 0 14px;padding:0;font-size:14px;color:var(--sos-muted)}
.sos-picture-key li{display:flex;align-items:center;gap:7px}
.sos-sw{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid var(--sos-edge);border-radius:4px;font-size:13px;font-weight:700}
.sos-sw-x{color:#d64545;background:#fff}.sos-sw-o{background:#fff3df;border:2px solid #e07b00;border-radius:50%}.sos-sw-g{color:var(--sos-fill);background:#fff;font-weight:500}
.sos-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sos-card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1.5px solid var(--sos-edge);border-radius:10px;background:#fff}
.sos-card-trial{border-color:#e2a23a;background:#fffaf0}
.sos-card-head{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.sos-card-head strong{display:block;font-size:16px;line-height:1.3}
.sos-step-n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;border-radius:15px;background:var(--sos-ink);color:#fff;font-weight:700;font-size:14px}
.sos-tag{display:inline-block;margin-top:3px;padding:1px 8px;border-radius:10px;background:#e8a03a;color:#fff;font-size:12px;font-weight:700}
.sos-pic{width:100%;aspect-ratio:1/1;border:1px solid var(--sos-edge);border-radius:6px;overflow:hidden;background:#fafbfc}
.sos-pic svg{display:block;width:100%;height:100%}
.sos-card-text{margin:0;font-size:15px;line-height:1.5}
@media (prefers-reduced-motion:reduce){.sos-app *{transition:none!important}}

.sos-cards-big{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
@media (max-width:420px){.sos-cards,.sos-cards-big{grid-template-columns:1fr}}