/* ========== 方案A：结构与滚动层 ========== */
.search-modal {
    position:fixed;
    inset:0;
    z-index:1400;
    display:none;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    box-sizing:border-box;
    overflow:hidden; /* 外层不滚动 */
}
.search-modal[aria-hidden="false"] { display:flex; }

.search-modal__backdrop {
    position:fixed;
    inset:0;
    background:rgba(10,12,16,.78);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    animation:modalFade .35s ease;
}

.search-modal__dialog {
    position:relative;
    width:100%;
    max-width:1000px;
    max-height:calc(100dvh - 80px);
    display:flex;
    flex-direction:column;
    overflow:hidden; /* 裁掉内部溢出，由 body 滚 */
    animation:modalSlide .38s cubic-bezier(.34,1.56,.64,1);
}

.search-modal__body {
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-right:4px;
}

/* 键盘展开状态（JS 添加 .keyboard-open） */
.search-modal.keyboard-open {
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:0 !important;
}
.search-modal.keyboard-open .search-modal__dialog {
    height:100dvh;
    max-height:none;
    border-radius:0;
}
.search-modal.keyboard-open .search-modal__body {
    padding-right:4px;
    padding-bottom:env(safe-area-inset-bottom, 12px);
}

.search-modal__close {
    position:absolute;
    top:5px;
    right:4px;
    width:42px;
    height:42px;
    border:none;
    cursor:pointer;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    transition:background .25s, transform .25s;
}
.search-modal__close:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.search-modal__close:active { transform:scale(.9); }

@keyframes modalFade {
    from { opacity:0; } to { opacity:1; }
}
@keyframes modalSlide {
    0% { transform:translateY(40px) scale(.94); opacity:0; }
    100% { transform:translateY(0) scale(1); opacity:1; }
}

/* 小屏默认顶部布局，减少键盘问题 */
@media (max-width:640px){
    .search-modal {
        align-items:flex-start;
        justify-content:flex-start;
        padding:0;
    }
    .search-modal__dialog {
        max-width:none;
        max-height:none;
        height:100dvh;
        border-radius:0;
    }
    .search-modal__body { padding-right:0; }
    .search-modal__close { top:8px; right:8px; }
}

/* ========== 原样式（作用域限定） ========== */
.search-modal .sp-wrapper {
    width:100%;
    max-width:1280px;
    margin:0 auto;
    box-sizing:border-box;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    color:#e8ecf2;
}

.search-modal .sp-panel {
    position:relative;
    background:rgba(25,26,31,.55);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:38px clamp(18px,2.2vw,42px) 42px;
    overflow:hidden;
    box-shadow:0 20px 60px -24px rgba(0,0,0,.85), 0 8px 34px -14px rgba(0,0,0,.6);
}
.search-modal .sp-panel::before,
.search-modal .sp-panel::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
}
.search-modal .sp-panel::before {
    background:
            linear-gradient(130deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),
            linear-gradient(25deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%);
    opacity:.55;
}
.search-modal .sp-panel::after {
    background:
            radial-gradient(circle at 15% 15%,rgba(47,111,255,.22),transparent 60%),
            radial-gradient(circle at 85% 85%,rgba(255,64,150,.18),transparent 65%);
    mix-blend-mode:overlay;
    opacity:.55;
}

.search-modal .sp-search { margin-bottom:34px; }

.search-modal .sp-search-box {
    position:relative;
    display:flex;
    align-items:center;
    height:60px;
    border-radius:20px;
    background:linear-gradient(145deg,#1d2026,#14161b);
    border:1px solid #2a2e36;
    box-shadow:0 6px 20px -10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
    transition:border-color .28s, box-shadow .28s, background .28s;
    padding:0 0 0 54px;
}
.search-modal .sp-search-box:focus-within {
    border-color:#3a71ff;
    box-shadow:0 0 0 1px #3a71ff, 0 0 0 6px rgba(58,113,255,.25);
    background:linear-gradient(145deg,#222632,#16181d);
}
.search-modal .sp-search-box input {
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    font-size:16px;
    height:100%;
    padding:0 14px 0 0;
    color:#f4f7fb;
    letter-spacing:.4px;
    min-width:0;
}
.search-modal .sp-search-box input::placeholder { color:#5e6572; font-weight:400; }
.search-modal .sp-search-box .icon-search {
    position:absolute;
    left:18px; top:50%; transform:translateY(-50%);
    color:#6b7483;
    display:flex;
}

.search-modal .btn-submit {
    height:100%;
    padding:0 28px;
    font-size:15px;
    font-weight:600;
    letter-spacing:.6px;
    border:none;
    cursor:pointer;
    background:linear-gradient(135deg,#2f6fff,#1a53ea);
    color:#fff;
    border-radius:18px;
    box-shadow:0 12px 34px -14px rgba(47,111,255,.8), 0 4px 16px -6px rgba(47,111,255,.55);
    transition:transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, filter .25s;
    position:relative;
    overflow:hidden;
}
.search-modal .btn-submit::after {
    content:"";
    position:absolute;
    inset:0;
    background:
            linear-gradient(160deg,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),
            radial-gradient(circle at 25% 20%,rgba(255,255,255,.4),transparent 70%);
    mix-blend-mode:overlay;
    opacity:.55;
}
.search-modal .btn-submit:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 46px -18px rgba(47,111,255,.9), 0 8px 24px -10px rgba(47,111,255,.55);
}
.search-modal .btn-submit:active {
    transform:translateY(0) scale(.94);
    filter:brightness(.92);
}

.search-modal .btn-clear {
    position:absolute;
    right:140px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    color:#cfd5de;
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
    transition:background .25s, transform .25s;
}
.search-modal .btn-clear.visible { display:flex; }
.search-modal .btn-clear:hover { background:rgba(255,255,255,.18); }
.search-modal .btn-clear:active { transform:translateY(-50%) scale(.85); background:rgba(255,255,255,.26); }

.search-modal .sp-tips {
    margin-top:10px;
    font-size:12.5px;
    letter-spacing:.4px;
    color:#848d99;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.search-modal .sp-tips .divider { opacity:.55; }

.search-modal .sp-tags-wrap { position:relative; }
.search-modal .sp-tags-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    flex-wrap:wrap;
    gap:14px;
}

.search-modal .sp-tags-title {
    margin:0;
    font-size:20px;
    font-weight:600;
    letter-spacing:.6px;
    color:#fff;
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
}
.search-modal .sp-tags-title .badge {
    width:14px; height:14px;
    border-radius:50%;
    background:linear-gradient(135deg,#2f6fff,#1a53ea);
    box-shadow:0 0 0 4px rgba(47,111,255,.22), 0 4px 14px -4px rgba(47,111,255,.75);
}

.search-modal .sp-tags-actions {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.search-modal .btn-random {
    border:none;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    letter-spacing:.5px;
    padding:10px 16px;
    border-radius:14px;
    background:linear-gradient(145deg,#23262d,#191b20);
    color:#d5dbe5;
    box-shadow:0 4px 12px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:background .3s, transform .3s, color .3s;
}
.search-modal .btn-random:hover {
    background:linear-gradient(145deg,#272b33,#1e2025);
    transform:translateY(-3px);
}
.search-modal .btn-random:active {
    transform:translateY(0) scale(.94);
}

.search-modal .sp-tags {
    display:flex;
    flex-wrap:wrap;
    height: 100% !important;
    max-height:  100% !important;
    gap:14px 14px;
    position:relative;
    padding:4px 2px 4px 2px;
}

.search-modal .tag {
    --h: calc((var(--i, 8) * 36) + 180);
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    padding:10px 18px;
    line-height:1;
    color:#f5f8ff;
    letter-spacing:.5px;
    border-radius:22px;
    background:
            linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
            linear-gradient(135deg,hsl(var(--h) 85% 58%),hsl(calc(var(--h) + 40) 80% 50%));
    background-blend-mode:overlay;
    box-shadow:
            0 4px 14px -6px rgba(0,0,0,.55),
            0 0 0 1px rgba(255,255,255,.08),
            0 0 0 4px rgba(255,255,255,.04) inset;
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s, background .4s, filter .35s;
    will-change:transform;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.search-modal .tag:hover {
    transform:translateY(-6px) scale(1.06);
    box-shadow:
            0 10px 28px -10px rgba(0,0,0,.7),
            0 0 0 1px rgba(255,255,255,.12),
            0 0 0 6px rgba(255,255,255,.06) inset;
    filter:saturate(1.15);
}
.search-modal .tag:active {
    transform:translateY(0) scale(.9);
    transition:transform .18s;
}
.search-modal .tag:focus-visible {
    outline:2px solid #2f6fff;
    outline-offset:3px;
}
.search-modal .tag:nth-child(6n+1){ --i:2; }
.search-modal .tag:nth-child(6n+2){ --i:5; }
.search-modal .tag:nth-child(6n+3){ --i:8; }
.search-modal .tag:nth-child(6n+4){ --i:11; }
.search-modal .tag:nth-child(6n+5){ --i:14; }
.search-modal .tag:nth-child(6n+6){ --i:17; }

.search-modal .tag.highlight {
    box-shadow:0 0 0 2px #fff, 0 0 0 8px rgba(255,255,255,.25);
    animation:blink 1.6s ease-in-out 2;
}
@keyframes blink {
    0%,100% { filter:brightness(1); }
    50% { filter:brightness(1.35); }
}

.search-modal .sp-empty-tip {
    margin-top:18px;
    text-align:center;
    font-size:13px;
    color:#88909d;
    letter-spacing:.5px;
}

@media (max-width:720px){
    .search-modal .sp-panel { padding:32px 22px 46px; border-radius:24px; }
    .search-modal .sp-search-box { height:56px; padding-left:50px; }
    .search-modal .btn-clear { right:132px; }
    .search-modal .btn-submit { padding:0 24px; }
    .search-modal .sp-tags-title { font-size:18px; }
    .search-modal .tag { font-size:12.5px; padding:9px 16px; }
    .search-modal .sp-tags { gap:12px; }
}

@media (max-width:480px){
    .search-modal .sp-wrapper { padding:18px 12px 56px; }
    .search-modal .sp-panel { padding:26px 18px 40px; border-radius:0; }
    .search-modal .sp-search-box { height:54px; }
    .search-modal .tag { padding:8px 14px; }
    .search-modal .btn-clear { right:124px; }
}

@supports not ((backdrop-filter: blur(6px))) {
    .search-modal .sp-panel { background:#1e2127; }
    .search-modal .tag { background:linear-gradient(135deg,#2d323a,#1c1f25); }
    .search-modal .sp-search-box { background:#1d2025; }
}