.command-palette {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .56);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 1060;
    padding-top: 12vh;

    &.is-open { display: flex; }

    &__panel {
        width: 100%;
        max-width: 640px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
    }
    &__search {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--color-border);

        input {
            flex: 1;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--color-text);
            font-size: var(--fs-md);
        }
    }
    &__results {
        max-height: 60vh;
        overflow-y: auto;
        list-style: none;
        margin: 0;
        padding: var(--space-2);
    }
    &__group {
        padding: var(--space-1) var(--space-3);
        color: var(--color-text-muted);
        font-size: var(--fs-xs);
        text-transform: uppercase;
    }
    &__item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        color: var(--color-text);
        text-decoration: none;
        border-radius: var(--radius-sm);
        cursor: pointer;

        &.is-highlighted, &:hover { background: var(--color-surface-alt); }
        &__hint { color: var(--color-text-muted); font-size: var(--fs-xs); margin-left: auto; }
    }
    &__footer {
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-xs);
        color: var(--color-text-muted);
        border-top: 1px solid var(--color-border);
        display: flex; justify-content: space-between; gap: var(--space-3);
    }
}