/* ==========================================================================
   Advanced Word Puzzle Tool v3.0 — style.css
   Mobile-first · Professional · Utility-focused
   5 Letter Word Finder, Solver & Unscrambler
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
.awpt {
    --awpt-pri: #6366f1;
    --awpt-pri-l: #818cf8;
    --awpt-pri-d: #4f46e5;
    --awpt-pri-gl: rgba(99, 102, 241, .12);
    --awpt-acc: #06b6d4;
    --awpt-ok: #22c55e;
    --awpt-ok-bg: rgba(34, 197, 94, .10);
    --awpt-warn: #eab308;
    --awpt-warn-bg: rgba(234, 179, 8, .10);
    --awpt-err: #ef4444;
    --awpt-gray: #6b7280;
    --awpt-bg: #f8fafc;
    --awpt-card: #ffffff;
    --awpt-inp-bg: #f1f5f9;
    --awpt-txt: #1e293b;
    --awpt-txt2: #64748b;
    --awpt-txt3: #94a3b8;
    --awpt-bdr: #e2e8f0;
    --awpt-r: 14px;
    --awpt-r-sm: 10px;
    --awpt-sh: 0 2px 8px rgba(15, 23, 42, .06);
    --awpt-sh-lg: 0 8px 24px rgba(15, 23, 42, .09);
    --awpt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --awpt-ease: 180ms cubic-bezier(.4, 0, .2, 1)
}

/* ---------- Dark mode (WP, Kadence, Astra, generic) ---------- */
.dark .awpt,
[data-theme="dark"] .awpt,
html.dark-mode .awpt,
body.dark-mode .awpt,
.wp-dark-mode-active .awpt,
.kadence-dark-mode .awpt,
.ast-dark-mode .awpt {
    --awpt-bg: #0f172a;
    --awpt-card: #1e293b;
    --awpt-inp-bg: #334155;
    --awpt-txt: #f1f5f9;
    --awpt-txt2: #94a3b8;
    --awpt-txt3: #64748b;
    --awpt-bdr: #334155;
    --awpt-sh: 0 2px 8px rgba(0, 0, 0, .25);
    --awpt-sh-lg: 0 8px 24px rgba(0, 0, 0, .35)
}

/* ---------- Base ---------- */
.awpt {
    font-family: var(--awpt-font);
    color: var(--awpt-txt);
    max-width: 880px;
    margin: 0 auto;
    padding: 20px 12px 56px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased
}

.awpt *,
.awpt *::before,
.awpt *::after {
    box-sizing: border-box
}

.awpt-hidden {
    display: none !important
}

.awpt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* ---------- Hero ---------- */
.awpt-hero {
    text-align: center;
    margin-bottom: 24px;
    padding: 24px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, .06) 0%, rgba(6, 182, 212, .04) 100%);
    border-radius: var(--awpt-r);
    position: relative
}

.awpt-hero__t {
    font-size: clamp(1.15rem, 3.5vw, 1.65rem);
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--awpt-txt);
    line-height: 1.25;
    letter-spacing: -.02em
}

.awpt-hero__d {
    font-size: .82rem;
    color: var(--awpt-txt2);
    margin: 0;
    letter-spacing: .01em
}

/* ---------- Sticky Bar (fixed) ---------- */
.awpt-sticky-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    max-width: 880px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--awpt-bdr);
    border-top: none;
    border-radius: 0 0 var(--awpt-r-sm) var(--awpt-r-sm);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
    pointer-events: none
}

.awpt-sticky-bar--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto
}

.admin-bar .awpt-sticky-bar {
    top: 32px
}

@media(max-width:782px) {
    .admin-bar .awpt-sticky-bar {
        top: 46px
    }
}

.dark .awpt .awpt-sticky-bar,
[data-theme="dark"] .awpt .awpt-sticky-bar,
html.dark-mode .awpt .awpt-sticky-bar,
body.dark-mode .awpt .awpt-sticky-bar,
.wp-dark-mode-active .awpt .awpt-sticky-bar {
    background: rgba(30, 41, 59, .92)
}

.awpt-sticky-bar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1
}

.awpt-sticky-bar__mode {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--awpt-pri);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0
}

.awpt-sticky-bar__filters {
    font-size: .72rem;
    font-weight: 600;
    color: var(--awpt-txt2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.awpt-sticky-bar__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0
}

.awpt-sticky-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--awpt-inp-bg);
    border: 1px solid var(--awpt-bdr);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    font-size: .85rem;
    cursor: pointer;
    color: var(--awpt-txt2);
    transition: background var(--awpt-ease), transform 100ms ease;
    font-family: var(--awpt-font)
}

.awpt-sticky-bar__btn:hover {
    background: var(--awpt-bdr);
    color: var(--awpt-txt)
}

.awpt-sticky-bar__btn:active {
    transform: scale(.92)
}

/* ---------- Card ---------- */
.awpt-card {
    background: var(--awpt-card);
    border-radius: var(--awpt-r);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .07), 0 2px 8px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
    padding: 16px 16px 12px;
    border: 1px solid var(--awpt-bdr);
    margin-bottom: 20px;
    transition: box-shadow var(--awpt-ease)
}

.awpt-card:hover {
    box-shadow: 0 10px 32px rgba(15, 23, 42, .1), 0 4px 10px rgba(15, 23, 42, .06)
}

/* ---------- Rows ---------- */
.awpt-row {
    margin-bottom: 12px
}

.awpt-row:last-child {
    margin-bottom: 0
}

.awpt-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.awpt-row--mode {
    display: flex;
    align-items: flex-end;
    gap: 12px
}

.awpt-row--mode__sel {
    flex: 1
}

.awpt-lbl {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--awpt-txt2);
    margin-bottom: 4px
}

.awpt-hint {
    font-size: .7rem;
    color: var(--awpt-txt3);
    margin: 8px 0 0;
    text-align: center
}

.awpt-hint--board {
    margin: 8px 0 0;
    font-size: .65rem
}

.awpt-help-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: .6rem;
    font-weight: 700;
    font-family: var(--awpt-font);
    border-radius: 50%;
    border: 1px solid var(--awpt-bdr);
    background: var(--awpt-inp-bg);
    color: var(--awpt-txt3);
    cursor: pointer;
    vertical-align: middle;
    margin-left: 2px;
    padding: 0;
    transition: color var(--awpt-ease), border-color var(--awpt-ease)
}

.awpt-help-toggle:hover {
    color: var(--awpt-pri);
    border-color: var(--awpt-pri)
}

/* ---------- Reset Button ---------- */
.awpt-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--awpt-inp-bg);
    border: 1px solid var(--awpt-bdr);
    border-radius: var(--awpt-r-sm);
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--awpt-txt2);
    transition: background var(--awpt-ease), transform 100ms ease;
    flex-shrink: 0;
    font-family: var(--awpt-font)
}

.awpt-reset-btn:hover {
    background: var(--awpt-bdr);
    color: var(--awpt-err)
}

.awpt-reset-btn:active {
    transform: scale(.92)
}

/* ---------- Example Chips (autofill only) ---------- */
.awpt-example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px
}

.awpt-example-chip {
    padding: 5px 12px;
    font-size: .7rem;
    font-weight: 600;
    font-family: var(--awpt-font);
    border: 1px solid var(--awpt-bdr);
    border-radius: 16px;
    background: transparent;
    color: var(--awpt-txt2);
    cursor: pointer;
    transition: all 180ms ease;
    letter-spacing: .04em
}

.awpt-example-chip:hover {
    border-color: var(--awpt-pri-l);
    color: var(--awpt-pri);
    background: var(--awpt-pri-gl);
    transform: scale(1.05)
}

.awpt-example-chip:active {
    transform: scale(.98);
    background: rgba(99, 102, 241, .2);
    border-color: var(--awpt-pri)
}

/* ---------- Find Words Button ---------- */
.awpt-row--action {
    margin-top: 16px;
    margin-bottom: 0;
    padding-top: 4px
}

.awpt-btn--find {
    width: 100%;
    min-height: 48px;
    padding: 12px 24px;
    font-size: .95rem;
    font-weight: 700;
    background: var(--awpt-pri);
    color: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .35);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 180ms ease, background 180ms ease;
    position: relative;
    overflow: hidden
}

.awpt-btn--find:hover {
    background: var(--awpt-pri-l);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .3)
}

.awpt-btn--find:active {
    box-shadow: 0 2px 8px rgba(99, 102, 241, .25)
}

.awpt-btn--find .awpt-find-btn__arrow {
    margin-left: 4px;
    opacity: .9
}

.awpt-btn--find.awpt-loading .awpt-find-btn__text {
    opacity: 0
}

.awpt-btn--find.awpt-loading .awpt-find-btn__spinner {
    opacity: 1
}

.awpt-find-btn__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease
}

.awpt-find-btn__spinner::after {
    content: '';
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: awpt-spin .6s linear infinite
}

/* ---------- Select ---------- */
.awpt-sel {
    width: 100%;
    padding: 8px 12px;
    font-size: .86rem;
    font-family: var(--awpt-font);
    font-weight: 600;
    color: var(--awpt-txt);
    background: var(--awpt-inp-bg);
    border: 2px solid var(--awpt-bdr);
    border-radius: var(--awpt-r-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color var(--awpt-ease)
}

.awpt-sel:focus {
    outline: none;
    border-color: var(--awpt-pri);
    box-shadow: 0 0 0 3px var(--awpt-pri-gl)
}

/* ---------- Inputs ---------- */
.awpt-inp {
    width: 100%;
    padding: 8px 12px;
    font-size: .86rem;
    font-family: var(--awpt-font);
    font-weight: 500;
    color: var(--awpt-txt);
    background: var(--awpt-inp-bg);
    border: 2px solid var(--awpt-bdr);
    border-radius: var(--awpt-r-sm);
    transition: border-color var(--awpt-ease)
}

.awpt-inp::placeholder {
    color: var(--awpt-txt3);
    font-size: .9em
}

.awpt-inp:focus {
    outline: none;
    border-color: var(--awpt-pri);
    box-shadow: 0 0 0 3px var(--awpt-pri-gl)
}

.awpt-inp--mono {
    font-size: 1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700
}

.awpt-inp--mono::placeholder {
    text-transform: none
}

/* ---------- Position Boxes ---------- */
.awpt-pos-group {
    display: flex;
    gap: 8px;
    justify-content: center
}

.awpt-pos {
    width: 56px;
    height: 56px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--awpt-font);
    text-transform: uppercase;
    color: var(--awpt-txt);
    background: var(--awpt-inp-bg);
    border: 2px solid var(--awpt-bdr);
    border-radius: var(--awpt-r-sm);
    caret-color: var(--awpt-pri);
    transition: border-color var(--awpt-ease)
}

.awpt-pos:focus {
    outline: none;
    border-color: var(--awpt-pri);
    box-shadow: 0 0 0 3px var(--awpt-pri-gl)
}

/* ---------- Collapsible Sections ---------- */
.awpt-section {
    border-top: 1px solid var(--awpt-bdr);
    margin-top: 12px;
    padding-top: 12px
}

.awpt-section__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--awpt-font);
    font-size: .82rem;
    font-weight: 600;
    color: var(--awpt-txt2);
    padding: 6px 10px;
    border-radius: 8px;
    transition: color var(--awpt-ease), background var(--awpt-ease), box-shadow var(--awpt-ease)
}

.awpt-section__toggle:hover {
    color: var(--awpt-pri)
}

#awpt-analyze-toggle:hover {
    background-color: rgba(99, 102, 241, .12);
    color: var(--awpt-pri)
}

.awpt-section__toggle[aria-expanded="true"] {
    background: rgba(99, 102, 241, .06);
    color: var(--awpt-pri);
    box-shadow: inset 3px 0 0 rgba(99, 102, 241, .4)
}

.awpt-section__arrow {
    font-size: .6rem;
    transition: transform .2s ease;
    display: inline-block;
    width: 12px
}

.awpt-section__toggle[aria-expanded="true"] .awpt-section__arrow {
    transform: rotate(90deg)
}

.awpt-section__body {
    padding: 12px 0 0
}

.awpt-link-btn {
    background: none;
    border: none;
    color: var(--awpt-pri);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--awpt-font);
    padding: 4px 8px;
    border-radius: 6px;
    transition: background var(--awpt-ease)
}

.awpt-link-btn:hover {
    background: var(--awpt-pri-gl)
}

.awpt-board__acts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap
}

.awpt-link-btn--danger {
    color: var(--awpt-err)
}

.awpt-link-btn--danger:hover {
    background: rgba(239, 68, 68, .08)
}

/* ---------- Wordle Board ---------- */
.awpt-board {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center
}

.awpt-board-row {
    display: flex;
    gap: 4px;
    position: relative
}

/* Hidden keyboard-capture input — zero-size, off-screen but still focusable */
.awpt-row-kbd {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    pointer-events: none;
    border: none;
    padding: 0;
    font-size: 1px;
    color: transparent;
    background: transparent;
    overflow: hidden
}

/* ---------- Tile (div-based) ---------- */
.awpt-tile {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    font-family: var(--awpt-font);
    border: 2px solid var(--awpt-bdr);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
    color: var(--awpt-txt2);
    background: var(--awpt-inp-bg);
    min-width: 48px;
    min-height: 48px;
    letter-spacing: 0
}

/* Tile has a letter typed in it */
.awpt-tile--filled {
    color: var(--awpt-txt);
    border-color: var(--awpt-txt3);
    animation: awpt-tile-pop 80ms ease
}

@keyframes awpt-tile-pop {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }

    100% {
        transform: scale(1)
    }
}

.awpt-tile:focus,
.awpt-tile:focus-visible {
    outline: 2px solid var(--awpt-pri);
    outline-offset: 2px
}

.awpt-tile:active,
.awpt-tile--div:active {
    transform: scale(.92)
}

/* Hint: this row is active for typing */
.awpt-board-row:focus-within .awpt-tile:not(.awpt-tile--filled) {
    border-color: rgba(99, 102, 241, .35)
}

/* ---- Tile color states ---- */
.awpt-tile--gray {
    background: #6b7280;
    border-color: #6b7280;
    color: #fff
}

.awpt-tile--yellow {
    background: #eab308;
    border-color: #ca8a04;
    color: #fff
}

.awpt-tile--green {
    background: #22c55e;
    border-color: #16a34a;
    color: #fff
}

/* Click affordance tooltip hint on hover of a filled tile */
.awpt-tile--filled:hover {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .4)
}

/* ---------- Analyzer ---------- */
.awpt-analyze-result {
    margin-top: 8px;
    padding: 12px;
    background: var(--awpt-inp-bg);
    border-radius: var(--awpt-r-sm);
    border: 1px solid var(--awpt-bdr);
    font-size: .82rem;
    line-height: 1.6
}

.awpt-analyze-result strong {
    color: var(--awpt-pri)
}

.awpt-analyze-result .awpt-score-bar {
    height: 4px;
    border-radius: 4px;
    background: var(--awpt-bdr);
    margin: 8px 0;
    overflow: hidden
}

.awpt-analyze-result .awpt-score-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--awpt-pri), var(--awpt-acc));
    transition: width .4s ease
}

/* ---------- Quick Filter Chips ---------- */
.awpt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px
}

.awpt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: .76rem;
    font-weight: 600;
    font-family: var(--awpt-font);
    border: 2px solid var(--awpt-bdr);
    border-radius: 20px;
    background: transparent;
    color: var(--awpt-txt2);
    cursor: pointer;
    transition: all var(--awpt-ease);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 36px
}

.awpt-chip:hover {
    border-color: var(--awpt-pri-l);
    color: var(--awpt-pri)
}

.awpt-chip__check {
    opacity: 0;
    font-size: .7rem;
    font-weight: 700;
    transition: opacity var(--awpt-ease)
}

.awpt-chip[aria-pressed="true"] {
    background: var(--awpt-pri);
    border-color: var(--awpt-pri);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(99, 102, 241, .3), 0 0 0 1px rgba(99, 102, 241, .25);
    transition: all var(--awpt-ease)
}

.awpt-chip[aria-pressed="true"] .awpt-chip__check {
    opacity: 1
}

.awpt-chip[aria-pressed="true"]:hover {
    background: var(--awpt-pri-l);
    border-color: var(--awpt-pri-l);
    color: #fff;
    box-shadow: 0 2px 12px rgba(99, 102, 241, .3)
}

.awpt-chip:active {
    transform: scale(.96)
}

/* ---------- Best Guess Panel ---------- */
.awpt-suggest {
    background: var(--awpt-card);
    border: 1px solid var(--awpt-bdr);
    border-radius: var(--awpt-r);
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: var(--awpt-sh)
}

.awpt-suggest__t {
    font-size: .78rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--awpt-txt2)
}

.awpt-suggest__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden
}

.awpt-guess {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--awpt-inp-bg);
    border: 1px solid var(--awpt-bdr);
    border-radius: var(--awpt-r-sm);
    cursor: default;
    transition: box-shadow var(--awpt-ease);
    position: relative;
    flex-shrink: 0
}

.awpt-guess:hover {
    box-shadow: var(--awpt-sh)
}

.awpt-guess__word {
    font-size: .92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--awpt-txt)
}

.awpt-guess__score {
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--awpt-pri);
    color: #fff
}

.awpt-guess__tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--awpt-txt);
    color: var(--awpt-bg);
    font-size: .68rem;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none
}

.awpt-guess:hover .awpt-guess__tip,
.awpt-guess--show-tip .awpt-guess__tip {
    display: block
}

.awpt-muted {
    font-size: .8rem;
    color: var(--awpt-txt3);
    margin: 0
}

/* Suggestion: word is in the filtered set */
.awpt-guess--in-set {
    border-color: var(--awpt-ok);
    background: var(--awpt-ok-bg)
}

.awpt-guess--in-set .awpt-guess__word {
    color: #15803d
}

/* ---------- Active Filter Summary ---------- */
.awpt-filter-summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap
}

.awpt-filter-summary__label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--awpt-txt3);
    white-space: nowrap;
    padding-top: 4px
}

.awpt-filter-summary__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.awpt-ftag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 12px;
    background: var(--awpt-pri-gl);
    color: var(--awpt-pri);
    border: 1px solid rgba(99, 102, 241, .2)
}

.awpt-ftag--exc {
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, .2)
}

.awpt-ftag--green {
    background: var(--awpt-ok-bg);
    color: #15803d;
    border-color: rgba(34, 197, 94, .25)
}

.awpt-ftag--yellow {
    background: var(--awpt-warn-bg);
    color: #a16207;
    border-color: rgba(234, 179, 8, .25)
}

.awpt-ftag--gray {
    background: rgba(107, 114, 128, .1);
    color: var(--awpt-gray);
    border-color: rgba(107, 114, 128, .2)
}

.awpt-ftag--chip {
    background: rgba(6, 182, 212, .08);
    color: #0891b2;
    border-color: rgba(6, 182, 212, .2)
}

/* ---------- Result Info Message ---------- */
.awpt-result-info {
    font-size: .75rem;
    color: var(--awpt-txt2);
    padding: 4px 8px;
    background: var(--awpt-inp-bg);
    border: 1px solid var(--awpt-bdr);
    border-radius: 8px;
    margin-bottom: 8px;
    text-align: center
}

/* ---------- Buttons ---------- */
.awpt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 600;
    font-family: var(--awpt-font);
    border-radius: var(--awpt-r-sm);
    border: none;
    cursor: pointer;
    transition: background var(--awpt-ease), box-shadow var(--awpt-ease), transform 100ms ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px
}

.awpt-btn:active {
    transform: scale(.96)
}

.awpt-btn:focus-visible {
    outline: 2px solid var(--awpt-pri);
    outline-offset: 2px
}

.awpt-btn--primary {
    background: var(--awpt-pri);
    color: #fff;
    width: 100%;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .2)
}

.awpt-btn--primary:hover {
    box-shadow: 0 4px 14px rgba(99, 102, 241, .3)
}

.awpt-btn--sm {
    padding: 8px 12px;
    font-size: .76rem;
    min-height: 36px;
    background: var(--awpt-inp-bg);
    color: var(--awpt-txt2);
    border: 1px solid var(--awpt-bdr)
}

.awpt-btn--sm:hover {
    background: var(--awpt-bdr)
}

.awpt-btn--danger {
    color: var(--awpt-err)
}

/* ---------- Results ---------- */
.awpt-results {
    margin-top: 24px;
    padding-top: 4px
}

.awpt-results__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--awpt-bg)
}

.awpt-results__count {
    font-size: .95rem;
    font-weight: 700;
    color: var(--awpt-txt);
    min-height: 26px;
    line-height: 1.4;
    letter-spacing: .01em
}

.awpt-results__count strong {
    color: var(--awpt-pri);
    font-size: 1rem
}

.awpt-sort-label {
    font-size: .68rem;
    font-weight: 600;
    color: var(--awpt-txt3);
    width: 100%;
    order: 3;
    margin-top: 4px
}

.awpt-results__acts {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

/* Sort dropdown */
.awpt-sort-sel {
    padding: 8px 28px 8px 12px;
    font-size: .74rem;
    font-weight: 600;
    font-family: var(--awpt-font);
    color: var(--awpt-txt2);
    background: var(--awpt-inp-bg);
    border: 1px solid var(--awpt-bdr);
    border-radius: 8px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    min-height: 36px
}

.awpt-sort-sel:focus {
    outline: none;
    border-color: var(--awpt-pri)
}

/* ---------- Grid ---------- */
.awpt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    transition: opacity 200ms ease
}

.awpt-more {
    text-align: center;
    padding: 12px 0
}

/* ---------- Word Card ---------- */
.awpt-wc {
    background: var(--awpt-card);
    border: 1px solid var(--awpt-bdr);
    border-radius: var(--awpt-r-sm);
    padding: 10px 8px 8px;
    text-align: center;
    position: relative;
    transition: box-shadow var(--awpt-ease), transform var(--awpt-ease);
    cursor: pointer;
    animation: awpt-in 180ms ease both
}

.awpt-wc:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, .1);
    transform: translateY(-2px)
}

@keyframes awpt-in {
    from {
        opacity: 0;
        transform: translateY(3px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.awpt-wc__word {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: var(--awpt-txt)
}

.awpt-wc__pts {
    font-size: .52rem;
    font-weight: 700;
    color: #b45309;
    vertical-align: super;
    margin-left: 2px;
    letter-spacing: 0;
    text-transform: none;
    opacity: .8
}

.awpt-wc__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center
}

.awpt-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: .58rem;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1.3
}

.awpt-badge--diff {
    background: var(--awpt-ok-bg);
    color: #15803d
}

.awpt-badge--diff-rare {
    background: rgba(239, 68, 68, .08);
    color: #dc2626
}

.awpt-badge--diff-avg {
    background: var(--awpt-warn-bg);
    color: #a16207
}

.awpt-wc__save {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: .9rem;
    opacity: .4;
    transition: opacity var(--awpt-ease), transform 100ms ease;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.awpt-wc:hover .awpt-wc__save {
    opacity: .7
}

.awpt-wc__save:hover,
.awpt-wc__save--on {
    opacity: 1 !important;
    transform: scale(1.15)
}

.awpt-wc__save--on {
    color: var(--awpt-warn)
}

/* ---------- Card Expand ---------- */
.awpt-wc--open {
    z-index: 10;
    border-color: var(--awpt-pri-l);
    box-shadow: var(--awpt-sh)
}

.awpt-wc__expand {
    position: absolute;
    top: calc(100% - 1px);
    left: -1px;
    right: -1px;
    z-index: 10;
    background: var(--awpt-card);
    border: 1px solid var(--awpt-pri-l);
    border-top: 1px solid var(--awpt-bdr);
    border-radius: 0 0 var(--awpt-r-sm) var(--awpt-r-sm);
    padding: 8px 12px;
    text-align: left;
    animation: awpt-expand 150ms ease;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .10)
}

.awpt-wc:not(.awpt-wc--open) .awpt-wc__expand {
    display: none
}

@keyframes awpt-expand {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.awpt-wc__def {
    font-size: .72rem;
    color: var(--awpt-txt2);
    margin: 0 0 4px;
    line-height: 1.4;
    font-style: italic
}

.awpt-wc__str {
    display: inline-block;
    font-size: .64rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(99, 102, 241, .10), rgba(79, 70, 229, .10));
    color: #4f46e5;
    letter-spacing: .02em
}

.awpt-wc__insights {
    font-size: .6rem;
    color: var(--awpt-txt3);
    margin: 4px 0 0;
    line-height: 1.45
}

/* ---------- Zero-Result (Empty State Card) ---------- */
.awpt-zero {
    text-align: center;
    padding: 24px 16px
}

.awpt-zero__card {
    background: var(--awpt-card);
    border: 1px solid var(--awpt-bdr);
    border-radius: var(--awpt-r);
    padding: 36px 28px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .08), 0 1px 4px rgba(15, 23, 42, .04);
    max-width: 400px;
    margin: 0 auto
}

.awpt-zero__icon {
    font-size: 2.75rem;
    margin-bottom: 14px;
    line-height: 1;
    display: block;
    filter: grayscale(.2);
    opacity: .85
}

.awpt-zero__t {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--awpt-txt)
}

.awpt-zero__msg {
    font-size: .8rem;
    color: var(--awpt-txt2);
    margin: 0 0 12px
}

.awpt-zero__tips {
    list-style: none;
    padding: 0;
    margin: 0 auto 16px;
    text-align: left;
    max-width: 320px
}

.awpt-zero__tips li {
    font-size: .78rem;
    color: var(--awpt-txt2);
    padding: 4px 0;
    line-height: 1.4
}

.awpt-zero__tips li::before {
    content: '→ ';
    color: var(--awpt-pri);
    font-weight: 700
}

.awpt-zero__clear {
    margin-top: 4px
}

/* ---------- Modal ---------- */
.awpt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 999;
    backdrop-filter: blur(2px)
}

.awpt-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: var(--awpt-card);
    border-radius: var(--awpt-r) var(--awpt-r) 0 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: var(--awpt-sh-lg);
    animation: awpt-slide-up .25s ease
}

@keyframes awpt-slide-up {
    from {
        transform: translateY(100%)
    }

    to {
        transform: none
    }
}

.awpt-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--awpt-bdr)
}

.awpt-modal__head h3 {
    margin: 0;
    font-size: .92rem
}

.awpt-modal__close {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--awpt-txt2);
    padding: 4px 8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center
}

.awpt-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.awpt-modal__foot {
    padding: 12px 16px;
    border-top: 1px solid var(--awpt-bdr);
    display: flex;
    gap: 8px;
    justify-content: center
}

.awpt-saved-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--awpt-inp-bg);
    border: 1px solid var(--awpt-bdr);
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em
}

.awpt-saved-chip__rm {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .72rem;
    color: var(--awpt-err);
    padding: 2px;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center
}

/* ---------- Loader ---------- */
.awpt-loader {
    text-align: center;
    padding: 40px 16px;
    font-size: .82rem;
    color: var(--awpt-txt3)
}

.awpt-loader__spin {
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    border: 3px solid var(--awpt-bdr);
    border-top-color: var(--awpt-pri);
    border-radius: 50%;
    animation: awpt-spin .6s linear infinite
}

@keyframes awpt-spin {
    to {
        transform: rotate(360deg)
    }
}

/* ---------- Toast ---------- */
.awpt-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--awpt-txt);
    color: var(--awpt-bg);
    padding: 8px 16px;
    border-radius: var(--awpt-r-sm);
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--awpt-font);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity .2s, transform .2s;
    white-space: nowrap
}

.awpt-toast--on {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

/* ---------- Premium Trust Section ---------- */
.awpt-trust {
    background: linear-gradient(180deg, rgba(99, 102, 241, .06) 0%, rgba(6, 182, 212, .03) 50%, transparent 100%);
    border: 1px solid rgba(99, 102, 241, .12);
    border-top: 1px solid var(--awpt-bdr);
    border-radius: var(--awpt-r);
    padding: 24px 24px 20px;
    margin-top: 32px;
    margin-bottom: 28px;
    padding-top: 28px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .05)
}

.awpt-trust__t {
    font-size: .92rem;
    font-weight: 700;
    color: var(--awpt-txt);
    margin: 0 0 16px;
    text-align: center
}

.awpt-trust__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 480px;
    margin-inline: auto
}

.awpt-trust__list li {
    font-size: .8rem;
    color: var(--awpt-txt2);
    padding: 12px 0 12px 36px;
    position: relative;
    line-height: 1.5
}

.awpt-trust__icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    opacity: .9;
    line-height: 1
}

.awpt-trust__updated {
    font-size: .68rem;
    color: var(--awpt-txt3);
    text-align: center;
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(99, 102, 241, .1)
}

/* ---------- Focus ---------- */
.awpt *:focus-visible {
    outline: 2px solid var(--awpt-pri);
    outline-offset: 2px
}

/* ==========================================================================
   TABLET (≥640px)
   ========================================================================== */
@media(min-width:640px) {
    .awpt {
        padding: 20px 16px 48px
    }

    .awpt-grid {
        gap: 8px
    }

    .awpt-card {
        padding: 20px 16px 16px
    }

    .awpt-pos {
        width: 60px;
        height: 60px;
        font-size: 1.5rem
    }

    .awpt-tile {
        width: 48px;
        height: 48px;
        font-size: 1.2rem
    }

    .awpt-sticky-bar {
        padding: 8px 16px
    }

    .awpt-modal {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 460px;
        bottom: 5vh;
        border-radius: var(--awpt-r);
        max-height: 60vh
    }

    @keyframes awpt-slide-up {
        from {
            transform: translateX(-50%) translateY(30px);
            opacity: 0
        }

        to {
            transform: translateX(-50%);
            opacity: 1
        }
    }
}

/* ==========================================================================
   DESKTOP (≥960px)
   ========================================================================== */
@media(min-width:960px) {
    .awpt-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px
    }

    .awpt-card {
        padding: 24px 24px 16px
    }

    .awpt-pos {
        width: 64px;
        height: 64px
    }

    .awpt-tile {
        width: 50px;
        height: 50px
    }

    .awpt-results__head {
        padding: 8px 0
    }

    .awpt-sticky-bar {
        padding: 12px 24px;
        border-radius: 0 0 var(--awpt-r) var(--awpt-r)
    }
}

/* ==========================================================================
   MOBILE PHONES (≤480px) — 320px–480px
   Premium mobile polish · no horizontal scroll · proper tap targets
   ========================================================================== */
@media(max-width:480px) {
    .awpt {
        padding: 12px 12px 40px
    }

    /* ---- Hero ---- */
    .awpt-hero {
        margin-bottom: 12px
    }

    .awpt-hero__t {
        font-size: 1.08rem;
        line-height: 1.3
    }

    .awpt-hero__d {
        font-size: .76rem
    }

    /* ---- Card ---- */
    .awpt-card {
        padding: 14px 14px 12px;
        border-radius: var(--awpt-r-sm)
    }

    /* ---- Mode dropdown — 44px tap target ---- */
    .awpt-sel {
        min-height: 44px;
        padding: 10px 12px;
        font-size: .84rem
    }

    .awpt-row--mode {
        gap: 10px
    }

    /* ---- Position boxes — prevent overflow on small screens ---- */
    .awpt-pos-group {
        display: flex;
        gap: 6px;
        width: 100%
    }

    .awpt-pos-group .awpt-pos {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        width: auto;
        height: 46px;
        font-size: 1.15rem
    }

    /* ---- Contains / Excludes ---- */
    .awpt-row--split {
        gap: 8px
    }

    .awpt-inp {
        padding: 10px 12px
    }

    /* ---- Filter chips — touch-friendly ---- */
    .awpt-chips {
        gap: 8px;
        margin-bottom: 14px;
        padding: 2px 0
    }

    .awpt-chip {
        min-height: 42px;
        padding: 8px 14px;
        font-size: .74rem
    }

    /* ---- Wordle board — scaled tiles ---- */
    .awpt-board {
        gap: 5px
    }

    .awpt-board-row {
        gap: 5px
    }

    .awpt-tile {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.1rem;
        border-radius: 6px
    }

    .awpt-board__acts {
        margin-top: 10px
    }

    .awpt-link-btn {
        padding: 8px 12px;
        min-height: 36px
    }

    /* ---- Section toggles — tap-friendly ---- */
    .awpt-section__toggle {
        padding: 8px 10px;
        min-height: 40px
    }

    /* ---- Suggested words — swipeable on mobile ---- */
    .awpt-suggest {
        padding: 12px;
        margin-bottom: 14px;
        overflow: hidden
    }

    .awpt-suggest__list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding: 4px 0;
        gap: 10px
    }

    .awpt-suggest__list::after {
        content: '';
        min-width: 1px;
        flex-shrink: 0
    }

    .awpt-suggest__list::-webkit-scrollbar {
        display: none
    }

    .awpt-guess {
        padding: 8px 10px;
        min-width: max-content
    }

    /* ---- Results header ---- */
    .awpt-results__head {
        gap: 8px;
        padding: 8px 0
    }

    .awpt-results__count {
        font-size: .88rem
    }

    .awpt-sort-sel {
        min-height: 40px
    }

    /* ---- Word cards — softer, more padding ---- */
    .awpt-grid {
        gap: 10px
    }

    .awpt-wc {
        padding: 12px 10px 10px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
        -webkit-tap-highlight-color: transparent
    }

    .awpt-wc__word {
        font-size: .98rem;
        margin-bottom: 6px
    }

    .awpt-wc__expand {
        padding: 10px 14px
    }

    .awpt-wc__save {
        opacity: .55;
        min-width: 36px;
        min-height: 36px
    }

    /* ---- Filter summary ---- */
    .awpt-filter-summary {
        margin-bottom: 10px
    }

    /* ---- Zero state ---- */
    .awpt-zero {
        padding: 24px 16px
    }

    /* ---- Toast — no overflow ---- */
    .awpt-toast {
        max-width: calc(100vw - 32px);
        white-space: normal;
        text-align: center;
        font-size: .76rem
    }

    /* ---- Modal — compact bottom sheet ---- */
    .awpt-modal {
        max-height: 65vh;
        border-radius: var(--awpt-r-sm) var(--awpt-r-sm) 0 0
    }

    .awpt-modal::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--awpt-bdr);
        border-radius: 2px;
        margin: 8px auto 0;
        flex-shrink: 0
    }

    .awpt-modal__head {
        padding: 6px 14px 8px
    }

    .awpt-modal__head h3 {
        font-size: .85rem
    }

    .awpt-modal__body {
        padding: 10px 14px
    }

    .awpt-modal__foot {
        padding: 10px 14px
    }

    .awpt-modal__foot .awpt-btn--sm {
        padding: 6px 14px;
        font-size: .74rem;
        min-height: 34px
    }

    .awpt-saved-chip {
        padding: 6px 10px;
        font-size: .78rem
    }

    .awpt-saved-chip__rm {
        min-width: 30px;
        min-height: 30px
    }
}

/* ==========================================================================
   TINY PHONES (≤374px) — 320px–374px
   Extra-compact adjustments for narrowest screens
   ========================================================================== */
@media(max-width:374px) {
    .awpt {
        padding: 8px 8px 32px
    }

    .awpt-hero__t {
        font-size: 1rem
    }

    .awpt-card {
        padding: 12px 10px 10px
    }

    .awpt-pos-group {
        gap: 5px
    }

    .awpt-pos-group .awpt-pos {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        width: auto;
        height: 42px;
        font-size: 1.05rem
    }

    .awpt-board {
        gap: 4px
    }

    .awpt-board-row {
        gap: 4px
    }

    .awpt-tile {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: .95rem
    }

    .awpt-row--split {
        grid-template-columns: 1fr
    }

    .awpt-wc {
        padding: 10px 8px 8px
    }

    .awpt-wc__word {
        font-size: .92rem
    }

    .awpt-wc__expand {
        padding: 10px 12px
    }

    .awpt-results__head {
        flex-direction: column;
        align-items: flex-start
    }

    .awpt-results__acts {
        width: 100%
    }

    .awpt-sort-sel {
        flex: 1
    }

    .awpt-sticky-bar {
        display: none !important
    }

    .awpt-chip {
        padding: 8px 12px;
        font-size: .72rem
    }

    .awpt-guess__word {
        font-size: .82rem
    }

    .awpt-guess__score {
        font-size: .62rem;
        padding: 2px 5px
    }

    /* ---- Modal — extra compact ---- */
    .awpt-modal {
        max-height: 60vh
    }

    .awpt-modal__head {
        padding: 6px 12px 8px
    }

    .awpt-modal__head h3 {
        font-size: .82rem
    }

    .awpt-modal__body {
        padding: 8px 12px
    }

    .awpt-modal__foot {
        padding: 8px 12px
    }

    .awpt-saved-chip {
        padding: 5px 8px;
        font-size: .74rem;
        gap: 6px
    }
}

/* ---------- Print ---------- */
@media print {
    .awpt-card {
        box-shadow: none
    }

    .awpt-sticky-bar,
    .awpt-chips {
        display: none
    }
}