/* ALY Settings -> API Keys. Same tokens and hairlines as the other sections. */
.aly-keys-docs { font-size: 12px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; align-self: center; }
.aly-keys-empty { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass); }
.aly-keys-empty-title { margin: 0; font-size: 14px; color: var(--text); }
.aly-keys-error { margin: 0; font-size: 12px; color: var(--text); padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass-2); }

.aly-keys-reveal { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass); }
.aly-keys-reveal-title { margin: 0; font-size: 13px; color: var(--text); }
.aly-keys-reveal-row { display: flex; gap: 8px; }
.aly-keys-reveal-key {
  flex: 1 1 auto; min-width: 0; padding: 9px 10px; font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text); background: var(--glass-2); border: 1px solid var(--hair-2); border-radius: 6px;
}
.aly-keys-reveal-warn { margin: 0; font-size: 12px; color: var(--text); font-weight: 600; }
.aly-keys-reveal .btn { justify-self: start; letter-spacing: .06em; font-size: 12px; font-weight: 600; }
.aly-keys-reveal-row .btn { flex: none; }

.aly-keys-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.aly-keys-form-label { display: grid; gap: 4px; flex: 1 1 200px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.aly-keys-form-input { padding: 9px 10px; font: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); background: var(--glass-2); border: 1px solid var(--hair-2); border-radius: 6px; }
.aly-keys-form .btn { letter-spacing: .06em; font-size: 12px; font-weight: 600; }

.aly-keys-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aly-keys-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--glass); }
.aly-keys-item.is-revoked { opacity: .55; }
.aly-keys-info { min-width: 0; display: grid; gap: 2px; }
.aly-keys-name { margin: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.aly-keys-prefix { margin: 0; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.aly-keys-meta { margin: 0; font-size: 12px; color: var(--muted); }
.aly-keys-item .btn { flex: none; letter-spacing: .06em; font-size: 12px; font-weight: 600; }
@media (max-width: 560px) { .aly-keys-item { align-items: flex-start; flex-direction: column; } .aly-keys-reveal-row { flex-direction: column; } }