﻿/* Port Keys panel (Account) — AI Keys + Access Keys */

.pk-panel h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
    color: var(--text-primary, #e8ecf3);
}

.pk-section-gap {
    margin-top: 1.6rem !important;
}

.pk-help {
    margin: 0 0 .8rem;
    font-size: .82rem;
    color: var(--text-secondary, #9aa3b2);
    max-width: 60ch;
}

.pk-ai-form {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: 420px;
}

.pk-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

    .pk-field label {
        font-size: .74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-tertiary, #6b7382);
    }

    .pk-field input,
    .pk-field select {
        padding: .5rem .65rem;
        border-radius: 8px;
        border: 1px solid var(--border-default, #2a3140);
        background: var(--bg-elevated, #151a23);
        color: var(--text-primary, #e8ecf3);
        font-size: .88rem;
    }

.pk-actions {
    display: flex;
    gap: .5rem;
}

.pk-status {
    margin: .2rem 0 0;
    font-size: .8rem;
    min-height: 1em;
}

.pk-token-create {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

    .pk-token-create input,
    .pk-token-create select {
        padding: .45rem .6rem;
        border-radius: 8px;
        border: 1px solid var(--border-default, #2a3140);
        background: var(--bg-elevated, #151a23);
        color: var(--text-primary, #e8ecf3);
        font-size: .84rem;
    }

    .pk-token-create input {
        flex: 1 1 200px;
    }

.pk-token-reveal {
    margin: 0 0 .8rem;
    padding: .7rem .8rem;
    border-radius: 10px;
    border: 1px solid var(--accent-green, #22c55e);
    background: rgba(34, 197, 94, .08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

    .pk-token-reveal p {
        margin: 0;
        font-size: .8rem;
        color: var(--text-primary, #e8ecf3);
        flex: 1 1 100%;
    }

    .pk-token-reveal code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .78rem;
        word-break: break-all;
        color: var(--accent-green, #22c55e);
        flex: 1 1 auto;
    }

.pk-token {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--border-default, #2a3140);
}

    .pk-token:last-child {
        border-bottom: none;
    }

.pk-token--revoked {
    opacity: .5;
}

.pk-token__main {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
    min-width: 0;
}

.pk-token__hint {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    color: var(--text-tertiary, #6b7382);
}

.pk-token__meta {
    font-size: .72rem;
    color: var(--text-secondary, #9aa3b2);
}

.pk-token__revoke {
    flex-shrink: 0;
    font-size: .76rem;
    padding: .3rem .7rem;
}
