.ipa-lookup-result {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1rem;
}

.ipa-lookup-hit { border-left: 4px solid var(--bs-success); }
.ipa-lookup-miss { border-left: 4px solid var(--bs-warning); background: var(--bs-warning-bg-subtle); }

.ipa-reading-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.ipa-reading {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    padding: .45rem .7rem;
    border-radius: .55rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 1.15rem;
    line-height: 1.2;
}
.ipa-reading-label { font-family: var(--bs-body-font-family); font-size: .7rem; color: var(--bs-secondary-color); }

.ipa-output {
    min-height: 7rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
    font-size: 1.05rem;
    line-height: 3.15;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ipa-token {
    display: inline-flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin: 0 .06rem;
    padding: 0 .15rem;
    vertical-align: middle;
    line-height: 1.12;
}

.ipa-spelling { font-weight: 600; }
.ipa-pronunciation { min-height: 1.1em; color: var(--bs-primary-text-emphasis); font-size: .72rem; white-space: nowrap; }
.ipa-unknown-token { border-radius: .25rem; background: var(--bs-warning-bg-subtle); }
.ipa-unknown-token .ipa-pronunciation { color: var(--bs-warning-text-emphasis); font-weight: 700; }

@media (max-width: 575.98px) {
    .ipa-output { padding: .75rem; font-size: 1rem; line-height: 3; }
    .ipa-pronunciation { font-size: .66rem; }
}

@media print {
    #ipa-lookup-form, #ipa-text, #ipa-annotate, #ipa-example, #ipa-clear, #ipa-copy { display: none !important; }
    .ipa-output { border: 0; padding: 0; background: transparent; }
}