:root {
--msp-accent: #6366f1;
--msp-accent-soft: color-mix(in srgb, var(--msp-accent) 18%, transparent); --msp-radius-lg: 18px;
--msp-radius-md: 12px;
--msp-radius-sm: 8px;
--msp-modal-max-width: 640px;
--msp-item-padding: 12px 14px;
--msp-item-gap: 14px;
--msp-thumb-size: 56px;
--msp-overlay-wash: rgba(6, 6, 9, 0.6);
--msp-overlay-blur: blur(6px);
--msp-font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--msp-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --msp-duration-fast: 150ms;
--msp-duration-medium: 260ms;
--msp-transition-fast: var(--msp-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
--msp-transition-medium: var(--msp-duration-medium) cubic-bezier(0.16, 1, 0.3, 1); --msp-text-override: initial;
--msp-header-bg-override: initial;
--msp-modal-bg-override: initial;
} .msp-overlay,
.msp-overlay.msp-theme-dark {
--msp-text: var(--msp-text-override, #f4f4f5);
--msp-text-secondary: var(--msp-text-override, rgba(228, 228, 231, 0.55));
--msp-modal-bg: var(--msp-modal-bg-override, rgba(24, 24, 29, 0.78));
--msp-header-bg: var(--msp-header-bg-override, transparent);
--msp-border: rgba(255, 255, 255, 0.09);
--msp-surface-soft: rgba(255, 255, 255, 0.06);
}
.msp-theme-light {
--msp-text: var(--msp-text-override, #18181b);
--msp-text-secondary: var(--msp-text-override, rgba(24, 24, 27, 0.55));
--msp-modal-bg: var(--msp-modal-bg-override, rgba(255, 255, 255, 0.86));
--msp-header-bg: var(--msp-header-bg-override, transparent);
--msp-border: rgba(15, 15, 20, 0.08);
--msp-surface-soft: rgba(15, 15, 20, 0.05);
}
@media (prefers-color-scheme: light) {
.msp-overlay:not(.msp-theme-dark):not(.msp-theme-light) {
--msp-text: var(--msp-text-override, #18181b);
--msp-text-secondary: var(--msp-text-override, rgba(24, 24, 27, 0.55));
--msp-modal-bg: var(--msp-modal-bg-override, rgba(255, 255, 255, 0.86));
--msp-header-bg: var(--msp-header-bg-override, transparent);
--msp-border: rgba(15, 15, 20, 0.08);
--msp-surface-soft: rgba(15, 15, 20, 0.05);
}
}   .msp-overlay {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 12vh 20px 40px;
background: var(--msp-overlay-wash);
backdrop-filter: var(--msp-overlay-blur) saturate(140%);
-webkit-backdrop-filter: var(--msp-overlay-blur) saturate(140%);
opacity: 0;
visibility: hidden;
transition: opacity var(--msp-transition-medium), visibility var(--msp-transition-medium);
font-family: var(--msp-font-ui);
box-sizing: border-box;
}
.msp-overlay *,
.msp-overlay *::before,
.msp-overlay *::after {
box-sizing: border-box;
}
.msp-overlay[data-msp-state="open"] {
opacity: 1;
visibility: visible;
}
.msp-overlay[data-msp-state="open"] .msp-modal {
transform: translateY(0) scale(1);
opacity: 1;
}   .msp-modal {
width: 100%;
max-width: var(--msp-modal-max-width);
max-height: 72vh;
display: flex;
flex-direction: column;
background: var(--msp-modal-bg);
border: 1px solid var(--msp-border);
border-radius: var(--msp-radius-lg);
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.45),
0 4px 16px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
overflow: hidden;
transform: translateY(-14px) scale(0.98);
opacity: 0;
transition: transform var(--msp-transition-medium), opacity var(--msp-transition-medium);
}
.msp-theme-light .msp-modal {
box-shadow:
0 24px 70px rgba(15, 15, 20, 0.16),
0 4px 16px rgba(15, 15, 20, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (prefers-color-scheme: light) {
.msp-overlay:not(.msp-theme-dark):not(.msp-theme-light) .msp-modal {
box-shadow:
0 24px 70px rgba(15, 15, 20, 0.16),
0 4px 16px rgba(15, 15, 20, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
}   .msp-input-row {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
background: var(--msp-header-bg);
border-bottom: 1px solid var(--msp-border);
}
.msp-input-row::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--msp-radius-lg) var(--msp-radius-lg) 0 0;
padding: 1px;
background: linear-gradient(120deg, var(--msp-accent), transparent 40%, transparent 60%, var(--msp-accent));
background-size: 200% 200%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--msp-transition-fast);
pointer-events: none;
}
.msp-input-row:focus-within::after {
opacity: 0.9;
animation: msp-gradient-flow 3.2s ease infinite;
}
@keyframes msp-gradient-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.msp-input-icon {
flex-shrink: 0;
color: var(--msp-text-secondary);
}
.msp-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-family: inherit;
font-size: 18px;
font-weight: 450;
color: var(--msp-text);
caret-color: var(--msp-accent);
}
.msp-input::placeholder {
color: var(--msp-text-secondary);
opacity: 0.8;
}
.msp-close-btn {
flex-shrink: 0;
background: var(--msp-surface-soft);
border: 1px solid var(--msp-border);
border-radius: var(--msp-radius-sm);
padding: 6px 10px;
min-height: 32px;
cursor: pointer;
transition: background var(--msp-transition-fast);
}
.msp-close-btn:hover,
.msp-close-btn:focus-visible {
background: var(--msp-accent-soft);
}
.msp-close-btn kbd {
font-family: var(--msp-font-mono);
font-size: 12px;
color: var(--msp-text-secondary);
}   .msp-spinner {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--msp-border);
border-top-color: var(--msp-accent);
opacity: 0;
animation: msp-spin 0.7s linear infinite;
transition: opacity var(--msp-transition-fast);
}
.msp-spinner[data-msp-visible="true"] {
opacity: 1;
}
@keyframes msp-spin {
to { transform: rotate(360deg); }
}   .msp-results {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 10px;
flex: 1;
scrollbar-width: thin;
}
.msp-results::-webkit-scrollbar {
width: 8px;
}
.msp-results::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}
.msp-section-label {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 10px 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--msp-text-secondary);
}
.msp-result-item {
display: flex;
align-items: center;
gap: var(--msp-item-gap);
padding: var(--msp-item-padding);
border-radius: var(--msp-radius-md);
text-decoration: none;
color: inherit;
transition: background var(--msp-transition-fast), transform var(--msp-transition-fast);
outline: none;
}
.msp-result-item:hover,
.msp-result-item.msp-active,
.msp-result-item:focus-visible {
background: var(--msp-accent-soft);
}
.msp-result-item:focus-visible {
box-shadow: 0 0 0 2px var(--msp-accent);
}
.msp-result-thumb {
flex-shrink: 0;
width: var(--msp-thumb-size);
height: var(--msp-thumb-size);
border-radius: var(--msp-radius-sm);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--msp-surface-soft);
}
.msp-result-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.msp-result-icon {
color: var(--msp-text-secondary);
font-size: 22px;
}
.msp-result-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.msp-result-title {
font-size: 14.5px;
font-weight: 550;
color: var(--msp-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msp-result-excerpt {
font-size: 13px;
color: var(--msp-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msp-result-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 2px;
gap: 8px;
font-size: 12px;
color: var(--msp-text-secondary);
}
.msp-result-meta > span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.msp-result-meta > span:not(:last-child)::after {
content: "•";
margin-left: 8px;
opacity: 0.5;
}
.msp-result-type .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
}
.msp-result-views {
color: var(--msp-text-secondary);
}
.msp-result-views .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
}
.msp-result-arrow {
flex-shrink: 0;
opacity: 0;
transform: translateX(-4px);
color: var(--msp-accent);
transition: opacity var(--msp-transition-fast), transform var(--msp-transition-fast);
}
.msp-result-item:hover .msp-result-arrow,
.msp-result-item.msp-active .msp-result-arrow {
opacity: 1;
transform: translateX(0);
}   .msp-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 56px 20px;
color: var(--msp-text-secondary);
}
.msp-empty-state svg {
margin-bottom: 16px;
opacity: 0.6;
}
.msp-empty-state-title {
font-size: 15px;
font-weight: 600;
color: var(--msp-text);
margin-bottom: 4px;
}
.msp-empty-state-hint {
font-size: 13px;
max-width: 320px;
}
.msp-recent-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 6px 10px 14px;
}
.msp-recent-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
min-height: 30px;
border-radius: 999px;
background: var(--msp-surface-soft);
border: 1px solid var(--msp-border);
font-size: 13px;
color: var(--msp-text-secondary);
cursor: pointer;
transition: background var(--msp-transition-fast);
}
.msp-recent-chip:hover {
background: var(--msp-accent-soft);
}   .msp-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
border-top: 1px solid var(--msp-border);
font-size: 12px;
color: var(--msp-text-secondary);
}
.msp-footer-hints {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.msp-hint {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
kbd {
font-family: var(--msp-font-mono);
font-size: 11px;
padding: 2px 5px;
border-radius: 5px;
background: var(--msp-surface-soft);
border: 1px solid var(--msp-border);
color: var(--msp-text-secondary);
}
.msp-kbd-combo {
display: inline-flex;
align-items: center;
gap: 3px;
}   .msp-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}   @media (prefers-reduced-motion: reduce) {
.msp-overlay,
.msp-modal,
.msp-result-item,
.msp-result-arrow,
.msp-spinner,
.msp-input-row::after {
transition: none !important;
animation: none !important;
}
}        @media (max-width: 1024px) {
.msp-overlay {
padding: 10vh 24px 32px;
}
.msp-modal {
max-width: min(var(--msp-modal-max-width), 560px);
}
} @media (max-width: 640px) {
.msp-overlay {
padding: 6vh 12px 20px;
align-items: flex-start;
}
.msp-modal {
max-width: 100%;
max-height: 86vh;
border-radius: var(--msp-radius-md);
}
.msp-input-row {
padding: 14px 16px;
gap: 10px;
}
.msp-input {
font-size: 16px; }
.msp-close-btn {
min-height: 36px;
min-width: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.msp-result-item {
padding: 12px 10px;
gap: 12px;
}
} @media (max-width: 480px) {
.msp-overlay {
padding: 0;
}
.msp-modal {
max-width: 100%;
max-height: 100vh;
height: 100%;
border-radius: 0;
border-left: none;
border-right: none;
}
.msp-input-row {
padding: 12px 14px;
}
.msp-input {
font-size: 15px;
}
.msp-result-thumb {
width: 44px;
height: 44px;
}
.msp-result-title {
font-size: 14px;
}
.msp-result-meta {
font-size: 11px;
gap: 6px;
}
.msp-section-label {
font-size: 11px;
padding: 8px 8px 4px;
}
}  @media (max-height: 500px) and (orientation: landscape) {
.msp-overlay {
padding: 12px 16px;
align-items: flex-start;
}
.msp-modal {
max-height: 94vh;
}
.msp-footer {
display: none;
}
} @media (pointer: coarse) {
.msp-result-item {
min-height: 44px;
}
.msp-recent-chip {
min-height: 36px;
padding: 8px 14px;
}
}    body.msp-popup-open {
overflow: hidden;
}