/* ============================================================
   AI Tools Directory v2.0 — Frontend Styles
   FIX: .aitd-wrap is now transparent (no floating box)
   FIX: Modal colours are hardcoded (beats theme bleed)
   NEW: Grade pill, search highlight, similar tools,
        share button, editorial note, mobile bottom sheet,
        category counts, toast, last-tested, anchor IDs
   ============================================================ */

/* ── Default tokens (overridden by :root inline style from PHP) ── */
:root {
    --aitd-accent:       #111827;
    --aitd-accent-text:  #ffffff;
    --aitd-page-bg:      #f8fafc;
    --aitd-card-bg:      #ffffff;
    --aitd-border:       #e2e8f0;
    --aitd-text-primary: #0f172a;
    --aitd-text-muted:   #64748b;
    --aitd-text-faint:   #94a3b8;
    --aitd-hero-bg:      #f1f5f9;
    --aitd-chip-bg:      #ffffff;
    --aitd-chip-border:  #cbd5e1;
    --aitd-star:         #f59e0b;
    --aitd-green:        #16a34a;
    --aitd-green-bg:     #f0fdf4;
    --aitd-green-text:   #15803d;
    --aitd-blue:         #2563eb;
    --aitd-blue-bg:      #eff6ff;
    --aitd-blue-text:    #1d4ed8;
    --aitd-amber-bg:     #fffbeb;
    --aitd-amber-text:   #b45309;
    --aitd-red-bg:       #fef2f2;
    --aitd-red-text:     #dc2626;
    --aitd-radius:       10px;
    --aitd-radius-sm:    7px;
    --aitd-radius-pill:  30px;
    --aitd-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --aitd-shadow-hover: 0 4px 16px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);
    --aitd-cols:         3;
}

/* ── Scoped fallbacks on .aitd-wrap ── */
.aitd-wrap {
    --aitd-accent:       #111827;
    --aitd-accent-text:  #ffffff;
    --aitd-page-bg:      #f8fafc;
    --aitd-card-bg:      #ffffff;
    --aitd-border:       #e2e8f0;
    --aitd-cols:         3;
}

/* ── FIX: Transparent wrap — integrates with any theme background ── */
.aitd-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:  transparent;          /* No floating box — theme bg shows through */
    color:       var(--aitd-text-primary);
    /* NO border-radius — was causing the card/box look */
    padding:     0 0 40px;
    max-width:   1200px;
    margin:      0 auto;
    width:       100%;
}
.aitd-wrap *, .aitd-wrap *::before, .aitd-wrap *::after {
    box-sizing: border-box;
}

/* ── Hero block ── */
.aitd-hero {
    background:    #f1f5f9;
    background:    var(--aitd-hero-bg);
    border:        1px solid #e2e8f0;
    border:        1px solid var(--aitd-border);
    border-radius: var(--aitd-radius);
    padding:       24px 24px 20px;
    margin-bottom: 24px;
}
.aitd-hero-top {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             14px;
    margin-bottom:   18px;
}
.aitd-hero-title {
    font-size:   17px;
    font-weight: 700;
    color:       var(--aitd-text-primary);
    line-height: 1.3;
}
.aitd-hero-sub {
    font-size:  13px;
    color:      var(--aitd-text-muted);
    margin-top: 4px;
}
.aitd-stats {
    display:    flex;
    gap:        24px;
    flex-shrink:0;
}
.aitd-stat      { text-align: center; }
.aitd-stat-n    { display: block; font-size: 22px; font-weight: 800; color: var(--aitd-text-primary); line-height: 1; }
.aitd-stat-l    { display: block; font-size: 11px; color: var(--aitd-text-muted); margin-top: 4px; }

/* ── Recommender input row ── */
.aitd-rec-row {
    display: flex;
    gap:     8px;
}
.aitd-rec-input {
    flex:          1;
    font-size:     14px;
    padding:       11px 16px;
    border:        1.5px solid var(--aitd-border);
    border-radius: var(--aitd-radius-sm);
    background:    #ffffff;
    background:    var(--aitd-card-bg);
    color:         var(--aitd-text-primary);
    outline:       none;
    min-width:     0;
    transition:    border-color .15s;
}
.aitd-rec-input::placeholder { color: var(--aitd-text-faint); }
.aitd-rec-input:focus         { border-color: var(--aitd-accent); }
.aitd-rec-btn {
    padding:       11px 22px;
    font-size:     14px;
    font-weight:   600;
    border:        none;
    border-radius: var(--aitd-radius-sm);
    background:    var(--aitd-accent);
    color:         var(--aitd-accent-text);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    opacity .15s;
}
.aitd-rec-btn:hover { opacity: .85; }

/* ── Quick chips ── */
.aitd-quick-chips {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    margin-top: 12px;
}
.aitd-qchip {
    padding:       5px 13px;
    font-size:     12px;
    border:        1px solid var(--aitd-chip-border);
    border-radius: var(--aitd-radius-pill);
    cursor:        pointer;
    background:    var(--aitd-chip-bg);
    color:         var(--aitd-text-muted);
    transition:    all .15s;
    user-select:   none;
}
.aitd-qchip:hover {
    border-color: var(--aitd-accent);
    color:        var(--aitd-accent);
    background:   var(--aitd-card-bg);
}
.aitd-qchip.aitd-chip-active {
    background:   var(--aitd-accent);
    color:        var(--aitd-accent-text);
    border-color: var(--aitd-accent);
}

/* ── Recommender output ── */
.aitd-rec-out {
    display:       none;
    margin-top:    14px;
    padding:       16px;
    background:    var(--aitd-card-bg);
    border:        1px solid var(--aitd-border);
    border-radius: var(--aitd-radius-sm);
    font-size:     13px;
    color:         var(--aitd-text-muted);
    line-height:   1.7;
}
.aitd-rec-out strong  { color: var(--aitd-text-primary); }
.aitd-rec-out-label   { font-size: 11px; color: var(--aitd-text-faint); margin-bottom: 10px; }
.aitd-rec-picks       { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.aitd-rec-pick {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       7px 14px;
    background:    var(--aitd-hero-bg);
    border:        1px solid var(--aitd-border);
    border-radius: var(--aitd-radius-sm);
    cursor:        pointer;
    font-size:     13px;
    color:         var(--aitd-text-primary);
    transition:    all .15s;
    font-weight:   500;
}
.aitd-rec-pick:hover       { background: var(--aitd-accent); color: var(--aitd-accent-text); border-color: var(--aitd-accent); }
.aitd-rec-pick-best        { background: var(--aitd-accent); color: var(--aitd-accent-text); border-color: var(--aitd-accent); }
.aitd-rec-pick-desc        { font-size: 11px; opacity: .75; font-weight: 400; }

/* ── Toolbar ── */
.aitd-toolbar {
    display:     flex;
    gap:         8px;
    align-items: center;
    flex-wrap:   wrap;
    margin-bottom: 10px;
}
.aitd-search-wrap  { position: relative; flex: 1; min-width: 180px; }
.aitd-search-ico   {
    position:       absolute;
    left:           11px;
    top:            50%;
    transform:      translateY(-50%);
    width:          15px;
    height:         15px;
    color:          var(--aitd-text-faint);
    pointer-events: none;
}
.aitd-search-input {
    width:         100%;
    font-size:     13px;
    padding:       9px 12px 9px 34px;
    border:        1.5px solid var(--aitd-border);
    border-radius: var(--aitd-radius-sm);
    background:    var(--aitd-card-bg);
    color:         var(--aitd-text-primary);
    outline:       none;
    transition:    border-color .15s;
}
.aitd-search-input::placeholder { color: var(--aitd-text-faint); }
.aitd-search-input:focus         { border-color: var(--aitd-accent); }
.aitd-sort-select {
    font-size:     13px;
    padding:       9px 12px;
    border:        1.5px solid var(--aitd-border);
    border-radius: var(--aitd-radius-sm);
    background:    var(--aitd-card-bg);
    color:         var(--aitd-text-muted);
    cursor:        pointer;
    outline:       none;
}
.aitd-vis-count { font-size: 12px; color: var(--aitd-text-faint); white-space: nowrap; }

/* ── NEW: Search text highlight ── */
mark.aitd-hl {
    background:       #fef08a;
    color:            #713f12;
    border-radius:    2px;
    padding:          0 1px;
    font-style:       normal;
    font-weight:      600;
}

/* ── Category tabs with count badges ── */
.aitd-cats {
    display:       flex;
    gap:           5px;
    flex-wrap:     wrap;
    margin-bottom: 10px;
}
.aitd-cat {
    padding:       7px 14px;
    font-size:     13px;
    font-weight:   500;
    border:        1.5px solid var(--aitd-border);
    border-radius: var(--aitd-radius-pill);
    cursor:        pointer;
    background:    var(--aitd-card-bg);
    color:         var(--aitd-text-muted);
    transition:    all .15s;
    white-space:   nowrap;
    line-height:   1.4;
}
.aitd-cat:hover  { color: var(--aitd-text-primary); border-color: #94a3b8; }
.aitd-cat-on     { background: var(--aitd-accent); color: var(--aitd-accent-text); border-color: var(--aitd-accent); }
.aitd-cat-count  { font-size: 11px; opacity: .65; margin-left: 3px; font-weight: 400; }

/* ── Price filter ── */
.aitd-price-row {
    display:       flex;
    align-items:   center;
    gap:           6px;
    flex-wrap:     wrap;
    margin-bottom: 20px;
}
.aitd-price-lbl { font-size: 12px; color: var(--aitd-text-faint); }
.aitd-pchip {
    padding:       4px 13px;
    font-size:     12px;
    border:        1.5px solid var(--aitd-border);
    border-radius: var(--aitd-radius-pill);
    cursor:        pointer;
    background:    var(--aitd-card-bg);
    color:         var(--aitd-text-muted);
    transition:    all .15s;
    font-weight:   500;
}
.aitd-pchip:hover { border-color: #94a3b8; color: var(--aitd-text-primary); }
.aitd-pchip-on    { background: #f0fdf4; color: #15803d; border-color: #16a34a; }

/* ── Card grid ── */
.aitd-grid {
    display:               grid;
    grid-template-columns: repeat(var(--aitd-cols, 3), 1fr);
    gap:                   14px;
}
.aitd-no-results {
    text-align:  center;
    padding:     50px 20px;
    color:       var(--aitd-text-faint);
    font-size:   14px;
    grid-column: 1 / -1;
}

/* ── Card ── */
.aitd-card {
    background:     #ffffff;
    background:     var(--aitd-card-bg);
    border:         1.5px solid var(--aitd-border);
    border-radius:  var(--aitd-radius);
    padding:        18px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    cursor:         pointer;
    transition:     border-color .15s, box-shadow .15s, transform .15s;
    text-align:     left;
}
.aitd-card:hover {
    border-color: #94a3b8;
    box-shadow:   var(--aitd-shadow-hover);
    transform:    translateY(-2px);
}
.aitd-card:focus-visible { outline: 2px solid var(--aitd-accent); outline-offset: 2px; }

.aitd-card-head   { display: flex; align-items: center; gap: 12px; }
.aitd-card-logo {
    width:          40px;
    height:         40px;
    border-radius:  9px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      12px;
    font-weight:    700;
    color:          #ffffff;
    flex-shrink:    0;
    letter-spacing: .03em;
}
.aitd-card-info   { min-width: 0; flex: 1; }
.aitd-card-name {
    font-size:   14px;
    font-weight: 700;
    color:       var(--aitd-text-primary);
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         5px;
    line-height: 1.3;
}
.aitd-card-maker { font-size: 12px; color: var(--aitd-text-faint); margin-top: 2px; }

/* ── Badges ── */
.aitd-badge {
    font-size:      10px;
    font-weight:    700;
    padding:        2px 8px;
    border-radius:  20px;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink:    0;
}
.aitd-badge-new { background: #eff6ff; color: #1d4ed8; }
.aitd-badge-hot { background: #fffbeb; color: #b45309; }

/* ── Tagline ── */
.aitd-card-tagline {
    font-size:          13px;
    color:              var(--aitd-text-muted);
    line-height:        1.6;
    flex:               1;
    margin:             0;
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ── Card footer ── */
.aitd-card-foot {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             6px;
    padding-top:     8px;
    border-top:      1px solid var(--aitd-border);
    flex-wrap:       wrap;
}
.aitd-card-foot-left  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.aitd-card-foot-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── Pricing pills ── */
.aitd-pill {
    font-size:     10px;
    font-weight:   700;
    padding:       3px 10px;
    border-radius: 20px;
    white-space:   nowrap;
    flex-shrink:   0;
}
.aitd-pill-free     { background: #f0fdf4; color: #15803d; }
.aitd-pill-freemium { background: #eff6ff; color: #1d4ed8; }
.aitd-pill-paid     { background: #f1f5f9; color: #64748b; }

/* ── NEW: Free tier grade pill on cards ── */
.aitd-free-grade {
    font-size:     10px;
    font-weight:   800;
    padding:       2px 8px;
    border-radius: 20px;
    white-space:   nowrap;
    flex-shrink:   0;
    letter-spacing:.02em;
}
.aitd-grade-a { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.aitd-grade-b { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.aitd-grade-c { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.aitd-grade-d { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.aitd-for-who {
    font-size:     11px;
    color:         var(--aitd-text-faint);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ── Stars ── */
.aitd-card-stars  { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.aitd-star        { color: #cbd5e1; font-size: 11px; }
.aitd-star-on     { color: #f59e0b; font-size: 11px; }
.aitd-rating-val  { font-size: 11px; color: var(--aitd-text-faint); margin-left: 3px; }

/* ── Card CTA ── */
.aitd-card-cta {
    font-size:   12px;
    font-weight: 500;
    color:       var(--aitd-text-faint);
    text-align:  center;
    padding:     5px 0 1px;
    transition:  color .15s;
}
.aitd-card:hover .aitd-card-cta { color: var(--aitd-accent); }

/* ══════════════════════════════════════════════════════════
   MODAL — FIX: hardcoded colours beat theme colour bleed
══════════════════════════════════════════════════════════ */
.aitd-modal-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(15,23,42,.65);
    z-index:         999999;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    overflow-y:      auto;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.aitd-modal-overlay.aitd-open { display: flex; }

.aitd-modal {
    /* FIX: Hardcoded bg + text — defeats any dark theme colour inheritance */
    background:    #ffffff !important;
    color:         #0f172a !important;
    border-radius: 14px;
    padding:       0;
    width:         100%;
    max-width:     560px;
    max-height:    92vh;
    overflow-y:    auto;
    position:      relative;
    box-shadow:    0 24px 64px rgba(0,0,0,.28);
    animation:     aitd-modal-in .22s cubic-bezier(.34,1.2,.64,1);
    scrollbar-width: thin;
}
@keyframes aitd-modal-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ── NEW: Editorial trust note at top of modal ── */
.aitd-editorial-note {
    background:    #f0fdf4 !important;
    color:         #15803d !important;
    font-size:     11px;
    font-weight:   600;
    padding:       8px 20px;
    letter-spacing:.02em;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid #bbf7d0;
    display:       flex;
    align-items:   center;
    gap:           6px;
}
.aitd-editorial-note svg { flex-shrink: 0; }

/* ── Modal inner padding wrapper ── */
.aitd-modal-inner { padding: 20px 24px 24px; }

/* ── Modal header row ── */
.aitd-modal-head {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    margin-bottom:   14px;
    gap:             10px;
}
.aitd-modal-logo-wrap { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.aitd-modal-logo {
    width:          52px;
    height:         52px;
    border-radius:  12px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      16px;
    font-weight:    700;
    color:          #fff !important;
    flex-shrink:    0;
}
.aitd-modal-name  { font-size: 20px; font-weight: 800; color: #0f172a !important; line-height: 1.2; }
.aitd-modal-maker { font-size: 13px; color: #64748b !important; margin-top: 3px; }

/* ── Modal head right: share + close ── */
.aitd-modal-head-actions {
    display:    flex;
    align-items:center;
    gap:        4px;
    flex-shrink:0;
}

/* ── NEW: Share button ── */
.aitd-share-btn {
    width:         34px;
    height:        34px;
    border-radius: 8px;
    border:        1.5px solid #e2e8f0;
    background:    #f8fafc;
    color:         #64748b !important;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content:center;
    transition:    all .15s;
    flex-shrink:   0;
}
.aitd-share-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a !important; }
.aitd-share-btn svg   { width: 16px; height: 16px; flex-shrink: 0; }

.aitd-modal-close {
    width:         34px;
    height:        34px;
    border-radius: 8px;
    border:        1.5px solid #e2e8f0;
    background:    #f8fafc;
    color:         #64748b !important;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content:center;
    font-size:     20px;
    line-height:   1;
    transition:    all .15s;
    flex-shrink:   0;
}
.aitd-modal-close:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a !important; }

/* ── Modal tagline ── */
.aitd-modal-tagline {
    font-size:     14px;
    color:         #475569 !important;
    line-height:   1.7;
    margin-bottom: 14px;
    padding-bottom:14px;
    border-bottom: 1px solid #e2e8f0;
}

/* ── Meta pills ── */
.aitd-modal-meta {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    margin-bottom: 10px;
}
.aitd-modal-meta-item {
    font-size:     12px;
    font-weight:   500;
    padding:       4px 12px;
    background:    #f1f5f9 !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: 20px;
    color:         #475569 !important;
}

/* ── NEW: Last tested date ── */
.aitd-last-tested {
    font-size:     11px;
    color:         #94a3b8 !important;
    margin-bottom: 18px;
    display:       flex;
    align-items:   center;
    gap:           5px;
}
.aitd-last-tested svg { flex-shrink: 0; }

/* ── Dimension scores ── */
.aitd-modal-dims-title {
    font-size:      11px;
    font-weight:    700;
    color:          #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom:  10px;
}
.aitd-modal-dims {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
    margin-bottom:         20px;
}
.aitd-dim-card {
    background:    #f8fafc !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: var(--aitd-radius-sm);
    padding:       11px 14px;
}
.aitd-dim-label    { font-size: 11px; color: #94a3b8 !important; margin-bottom: 7px; }
.aitd-dim-bar-wrap {
    height:        6px;
    background:    #e2e8f0 !important;   /* FIX: hardcoded — was transparent on dark themes */
    border-radius: 3px;
    overflow:      hidden;
    margin-bottom: 6px;
}
.aitd-dim-bar {
    height:        100%;
    border-radius: 3px;
    background:    var(--aitd-accent);
    background:    #111827;             /* FIX: hardcoded fallback */
    transition:    width .45s ease;
}
.aitd-dim-val { font-size: 12px; font-weight: 700; color: #0f172a !important; }

/* ── Action buttons ── */
.aitd-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.aitd-modal-btn {
    flex:          1;
    padding:       11px 14px;
    font-size:     13px;
    font-weight:   600;
    border:        1.5px solid #e2e8f0 !important;
    border-radius: var(--aitd-radius-sm);
    background:    #f1f5f9 !important;
    color:         #475569 !important;
    cursor:        pointer;
    text-align:    center;
    text-decoration:none;
    transition:    all .15s;
    min-width:     110px;
    display:       inline-block;
}
.aitd-modal-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; }
.aitd-modal-btn-primary {
    background:   var(--aitd-accent) !important;
    background:   #111827 !important;
    color:        #ffffff !important;
    border-color: #111827 !important;
}
.aitd-modal-btn-primary:hover { opacity: .88; }

/* ── NEW: Similar tools section ── */
.aitd-similar {
    border-top:    1px solid #e2e8f0;
    padding-top:   16px;
    margin-top:    4px;
}
.aitd-similar-title {
    font-size:      11px;
    font-weight:    700;
    color:          #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom:  10px;
}
.aitd-similar-list { display: flex; flex-direction: column; gap: 8px; }
.aitd-sim-card {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 12px;
    background:    #f8fafc !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: 8px;
    cursor:        pointer;
    transition:    all .15s;
    text-decoration: none;
}
.aitd-sim-card:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; }
.aitd-sim-logo {
    width:          36px;
    height:         36px;
    border-radius:  8px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      11px;
    font-weight:    700;
    color:          #ffffff !important;
    flex-shrink:    0;
}
.aitd-sim-info   { flex: 1; min-width: 0; }
.aitd-sim-name   { font-size: 13px; font-weight: 600; color: #0f172a !important; }
.aitd-sim-maker  { font-size: 11px; color: #94a3b8 !important; margin-top: 1px; }
.aitd-sim-rating {
    font-size:   12px;
    font-weight: 700;
    color:       #f59e0b !important;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── NEW: Toast notification ── */
.aitd-toast {
    position:    fixed;
    bottom:      90px;
    left:        50%;
    transform:   translateX(-50%) translateY(10px);
    background:  #0f172a;
    color:       #ffffff;
    padding:     10px 20px;
    border-radius:30px;
    font-size:   13px;
    font-weight: 500;
    z-index:     9999999;
    opacity:     0;
    transition:  opacity .2s ease, transform .2s ease;
    pointer-events: none;
    white-space: nowrap;
    box-shadow:  0 4px 16px rgba(0,0,0,.25);
}
.aitd-toast.aitd-toast-show {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/* ── Body scroll lock ── */
body.aitd-modal-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .aitd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .aitd-grid           { grid-template-columns: 1fr; }
    .aitd-stats          { display: none; }
    .aitd-modal-dims     { grid-template-columns: 1fr; }
    .aitd-rec-row        { flex-direction: column; }
    .aitd-rec-btn        { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .aitd-hero-top    { flex-direction: column; }
    .aitd-toolbar     { flex-wrap: wrap; }
    .aitd-search-wrap { flex: 1 1 100%; }
    .aitd-modal-actions .aitd-modal-btn { flex: 1 1 100%; }
}

/* ── NEW: Mobile bottom sheet (≤640px) ── */
@media (max-width: 640px) {
    .aitd-modal-overlay {
        align-items:    flex-end;
        padding:        0;
    }
    .aitd-modal {
        border-radius:  18px 18px 0 0 !important;
        max-height:     88vh;
        width:          100%;
        max-width:      100%;
        animation:      aitd-slide-up .28s cubic-bezier(.34,1.1,.64,1);
    }
    .aitd-editorial-note { border-radius: 18px 18px 0 0; }
    /* Drag handle visual hint */
    .aitd-modal-inner::before {
        content:       '';
        display:       block;
        width:         36px;
        height:        4px;
        background:    #cbd5e1;
        border-radius: 2px;
        margin:        0 auto 16px;
    }
    .aitd-toast { bottom: 24px; }
}
@keyframes aitd-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}