/* Jumble Solver Tool v2 */
.jst-wrap{--navy:#1E3A8A;--orange:#F97316;--orange-dk:#C2410C;--tile:#FEF3C7;--cream:#FFFBF5;--ink:#111827;--text:#1F2937;--muted:#4B5563;--line:#E7E0D3;--grey:#9CA3AF;position:relative;max-width:980px;margin:24px auto;color:var(--text);font-size:18px;line-height:1.5}
.jst-wrap *,.jst-wrap *::before,.jst-wrap *::after{box-sizing:border-box}
.jst-wrap [hidden]{display:none!important}
.jst-wrap button{font-family:inherit;text-transform:none;letter-spacing:normal;line-height:1.2;box-shadow:none;margin:0;min-height:0}
.jst-wrap input,.jst-wrap select{font-family:inherit;margin:0;box-shadow:none}
.jst-wrap p{margin:0}

.jst-card{background:#fff;border:3px solid var(--navy);border-radius:22px;box-shadow:8px 8px 0 var(--navy);padding:24px 30px 20px;display:flex;flex-direction:column;gap:18px}

/* Brand */
.jst-brand{display:flex;align-items:center;gap:10px}
.jst-brand-icon{display:flex;flex-shrink:0}
.jst-brand-icon svg{border-radius:8px}
.jst-brand-name{font-weight:800;font-size:18px;color:var(--navy)}
.jst-brand-name span{color:var(--orange-dk);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-left:4px}
.jst-status{margin-left:auto;font-size:14px;color:var(--muted)}
.jst-foot{text-align:center;font-size:13px;color:var(--muted);padding-top:10px;border-top:2px dashed var(--line)}

/* Tabs */
.jst-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--cream);border:2px solid var(--line);border-radius:14px;padding:6px}
.jst-wrap .jst-tab{background:transparent;border:2px solid transparent;border-radius:10px;padding:10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text);transition:background .15s,border-color .15s}
.jst-wrap .jst-tab:hover{background:#fff;border-color:var(--line)}
.jst-wrap .jst-tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.jst-tab-name{font-weight:800;font-size:17px}
.jst-tab-sub{font-size:13px;opacity:.85}
.jst-wrap .jst-tab:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.jst-panel{display:flex;flex-direction:column;gap:14px}
.jst-label{font-weight:700;font-size:19px;color:var(--text);margin:0}
.jst-hint{font-size:15px;color:var(--muted)}

/* Main input row */
.jst-row{display:flex;gap:12px}
.jst-wrap .jst-input{flex:1;min-width:0;height:68px;padding:10px 18px;font-size:30px;font-weight:800;letter-spacing:8px;text-transform:uppercase;color:var(--ink);background:var(--cream);border:2px solid var(--grey);border-radius:12px}
.jst-wrap .jst-input-sm{height:54px;font-size:24px;letter-spacing:6px;flex:none;width:100%}
.jst-wrap .jst-input:focus,.jst-wrap .jst-f:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--navy)}
.jst-wrap .jst-input::placeholder{letter-spacing:1px;font-weight:400;font-size:19px;color:#6B7280;text-transform:none}
.jst-wrap .jst-solve{height:68px;padding:0 36px;background:var(--orange);color:var(--ink);font-size:23px;font-weight:800;border:3px solid var(--navy);border-radius:12px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,transform .15s}
.jst-wrap .jst-solve:hover,.jst-wrap .jst-solve:focus-visible{background:var(--orange-dk);color:#fff}
.jst-wrap .jst-solve:active{transform:translateY(1px)}
.jst-wrap .jst-solve-sm{height:52px;font-size:19px;padding:0 24px;align-self:flex-start}

/* Tiles */
.jst-tiles{display:flex;flex-wrap:wrap;gap:8px;min-height:46px}
.jst-tile{width:46px;height:46px;background:var(--tile);border:2px solid var(--navy);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:var(--ink)}
.jst-tile:nth-child(4n+1){transform:rotate(-6deg)}.jst-tile:nth-child(4n+2){transform:rotate(4deg)}.jst-tile:nth-child(4n+3){transform:rotate(-3deg)}.jst-tile:nth-child(4n){transform:rotate(6deg)}
.jst-tile.is-wild{background:#fff;border-style:dashed;border-color:var(--orange-dk);color:var(--orange-dk)}
.jst-tiles.is-shuffle .jst-tile{animation:jstPop .35s ease}
@keyframes jstPop{0%{transform:scale(.6) rotate(-12deg);opacity:.3}100%{opacity:1}}

/* Actions / examples */
.jst-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.jst-wrap .jst-ghost{background:#fff;border:2px solid var(--navy);color:var(--navy);font-weight:700;font-size:15px;padding:8px 14px;border-radius:10px;cursor:pointer}
.jst-wrap .jst-ghost:hover{background:var(--tile)}
.jst-examples,.jst-recent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.jst-examples{margin-left:auto}
.jst-wrap .jst-ex{background:var(--cream);border:1px solid var(--line);color:var(--navy);font-weight:700;font-size:14px;letter-spacing:1px;padding:5px 10px;border-radius:999px;cursor:pointer}
.jst-wrap .jst-ex:hover{border-color:var(--navy)}

/* Quick presets */
.jst-presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.jst-wrap .jst-ex.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Advanced filters */
.jst-adv{border:2px solid var(--line);border-radius:12px;background:var(--cream)}
.jst-adv summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:16px;color:var(--navy);list-style:none}
.jst-adv summary::-webkit-details-marker{display:none}
.jst-adv summary::before{content:"+";display:inline-block;width:18px;font-weight:800}
.jst-adv[open] summary::before{content:"\2212"}
.jst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:4px 14px 14px}
.jst-field{display:flex;flex-direction:column;gap:5px}
.jst-field label{font-size:14px;font-weight:700;color:var(--text)}
.jst-field-wide label{font-size:15px}
.jst-wrap .jst-f{height:44px;font-size:16px;padding:6px 10px;border:2px solid var(--grey);border-radius:8px;background:#fff;color:var(--ink);width:100%}
.jst-wrap .jst-blanks{font-size:18px;letter-spacing:2px}

/* Results */
.jst-results:not(:empty){border-top:2px dashed var(--line);padding-top:16px;display:flex;flex-direction:column;gap:16px}
.jst-summary{font-size:17px;color:#374151}.jst-summary strong{color:var(--ink)}
.jst-msg{font-size:17px;color:#374151}
.jst-note{font-size:14px;color:var(--muted)}
.jst-group{display:flex;flex-direction:column;gap:9px}
.jst-group-title{font-weight:700;font-size:15px;color:var(--navy)}
.jst-group.is-exact{background:var(--cream);border:2px solid var(--navy);border-radius:14px;padding:14px}
.jst-group.is-exact .jst-group-title{font-size:17px}
.jst-star{color:var(--orange)}
.jst-words{display:flex;flex-wrap:wrap;gap:8px}
.jst-wrap .jst-chip{display:inline-flex;align-items:baseline;gap:0;padding:7px 13px;border-radius:10px;font-weight:700;font-size:17px;letter-spacing:2px;text-transform:uppercase;background:#fff;color:var(--ink);border:2px solid var(--grey);cursor:pointer;transition:transform .12s,border-color .12s}
.jst-wrap .jst-chip:hover{transform:translateY(-1px);border-color:var(--navy)}
.jst-wrap .jst-chip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.jst-chip .jst-w{color:var(--orange-dk);text-decoration:underline;text-underline-offset:3px}
.jst-chip .jst-pts{font-size:11px;letter-spacing:0;margin-left:6px;opacity:.75;text-transform:none;font-weight:700}
.jst-group.is-exact .jst-chip{background:var(--navy);color:#fff;border-color:var(--navy);font-size:20px;padding:9px 16px}
.jst-group.is-exact .jst-chip .jst-w{color:#FDBA74}
.jst-group.is-mid .jst-chip{background:var(--tile);border-color:var(--navy)}
.jst-wrap .jst-chip.is-active{outline:3px solid var(--orange);outline-offset:2px}
.jst-wrap .jst-more{align-self:flex-start;background:none;border:2px solid var(--navy);color:var(--navy);font-weight:700;font-size:15px;padding:6px 14px;border-radius:8px;cursor:pointer}
.jst-phrase{display:inline-flex;gap:4px;padding:4px;border:2px dashed var(--line);border-radius:12px}

/* Word detail */
.jst-detail{background:#fff;border:2px solid var(--navy);border-left:6px solid var(--orange);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.jst-detail-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jst-detail-word{font-size:20px;letter-spacing:2px;color:var(--navy);margin-right:4px}
.jst-badge{font-size:13px;font-weight:700;background:var(--tile);border:1px solid var(--line);padding:3px 8px;border-radius:999px}
.jst-wrap .jst-mini{background:#fff;border:2px solid var(--navy);color:var(--navy);font-weight:700;font-size:13px;padding:4px 10px;border-radius:8px;cursor:pointer}
.jst-wrap .jst-x{margin-left:auto;font-size:18px;padding:2px 10px}
.jst-def{font-size:16px;color:var(--text)}
.jst-def p+p{margin-top:4px}
.jst-def em{color:var(--muted);font-style:italic}

/* Daily Jumble rows */
.jst-drows{display:flex;flex-direction:column;gap:12px}
.jst-drow{display:flex;gap:12px;align-items:flex-start}
.jst-dnum{flex-shrink:0;width:36px;height:54px;display:flex;align-items:center;justify-content:center;background:var(--orange);color:var(--ink);font-weight:800;font-size:18px;border:2px solid var(--navy);border-radius:10px}
.jst-dmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.jst-dout{display:flex;flex-direction:column;gap:8px}
.jst-dout:empty{display:none}
.jst-ans{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px;border-radius:12px;border:2px solid transparent}
.jst-ans.is-picked{border-color:var(--navy);background:var(--cream)}
.jst-wrap .jst-ltr{width:40px;height:40px;border-radius:50%;border:2px solid var(--navy);background:var(--tile);color:var(--ink);font-weight:800;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .12s,box-shadow .12s}
.jst-wrap .jst-ltr.is-wild{color:var(--orange-dk)}
.jst-wrap .jst-ltr:hover{background:#fff}
.jst-wrap .jst-ltr.is-circled{background:var(--orange);color:var(--ink);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--orange-dk)}
.jst-circled:not(:empty){display:flex;flex-direction:column;gap:10px;border-top:2px dashed var(--line);padding-top:14px}

/* Toast */
.jst-toast{position:absolute;left:50%;bottom:-12px;transform:translate(-50%,10px);background:var(--ink);color:#fff;font-size:15px;font-weight:700;padding:8px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.jst-toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){.jst-wrap *{animation:none!important;transition:none!important}}

@media (max-width:640px){
.jst-card{padding:18px 16px 16px;box-shadow:5px 5px 0 var(--navy);border-radius:16px;gap:14px}
.jst-tabs{gap:4px;padding:4px}
.jst-wrap .jst-tab{padding:8px 4px}
.jst-tab-name{font-size:15px}
.jst-tab-sub{display:none}
.jst-row{flex-direction:column}
.jst-wrap .jst-input{height:60px;font-size:26px;letter-spacing:5px}
.jst-wrap .jst-solve{height:56px;width:100%}
.jst-wrap .jst-solve-sm{width:100%}
.jst-tile{width:36px;height:36px;font-size:17px;border-radius:8px}.jst-tiles{gap:6px}
.jst-examples{margin-left:0}
.jst-wrap .jst-chip{font-size:15px;padding:6px 10px}
.jst-group.is-exact .jst-chip{font-size:17px;padding:8px 12px}
.jst-wrap .jst-ltr{width:36px;height:36px;font-size:16px}
.jst-dnum{width:30px;height:54px}
}