.api-keys-page .api-key-main{margin-bottom:2rem}.api-keys-page .key-status{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.75rem}.api-keys-page .key-status.active{background:rgba(16,185,129,.1);color:#10b981;border:1px solid rgba(16,185,129,.2)}.api-keys-page .key-status i{font-size:.375rem}.api-keys-page .api-key-display{display:flex;flex-direction:column;gap:1rem}.api-keys-page .key-container{display:flex;flex-direction:column;gap:.5rem}.api-keys-page .key-label{font-size:.8125rem;font-weight:500;color:var(--color-text-secondary)}.api-keys-page .key-value{display:flex;align-items:center;justify-content:space-between;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.75rem 1rem;font-family:Monaco,Menlo,monospace;font-size:.875rem;color:var(--color-text-primary)}.api-keys-page .key-hidden,.api-keys-page .key-visible{flex:1;min-width:0;margin-right:1rem;overflow:hidden;word-break:break-all}.api-keys-page .key-actions{display:flex;gap:.5rem;flex-shrink:0}.api-keys-page .key-action-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;color:var(--color-text-secondary)}.api-keys-page .key-action-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:white}.api-keys-page .key-action-btn.copied{background:#10b981;border-color:#10b981;color:white;gap:.375rem;width:auto;padding:0 .75rem}.api-keys-page .key-action-btn.copied:hover{background:#059669;border-color:#059669}.api-keys-page .copied-text{font-size:.8125rem;font-weight:500;white-space:nowrap}.api-keys-page .key-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;padding:1rem;background:var(--color-background);border-radius:var(--radius-md)}.api-keys-page .meta-item{display:flex;flex-direction:column;gap:.25rem}.api-keys-page .meta-label{font-size:.75rem;color:var(--color-text-secondary);font-weight:500}.api-keys-page .meta-value{font-size:.8125rem;color:var(--color-text-primary);font-weight:600}.api-keys-page .api-key-grid{grid-template-columns:1fr 1fr;margin-bottom:2rem}.api-keys-page .rotate-description{font-size:.8125rem;color:var(--color-text-secondary);line-height:1.5;margin:0 0 1.25rem}.api-keys-page .rotate-warning{display:flex;align-items:flex-start;gap:.75rem;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-md);padding:1rem;margin-bottom:1.5rem}.api-keys-page .rotate-warning i{color:#f59e0b;font-size:1rem;margin-top:.125rem;flex-shrink:0}.api-keys-page .warning-text{font-size:.8125rem;color:var(--color-text-primary);line-height:1.4}.api-keys-page .rotate-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem 1.25rem;background:#ef4444;color:white;border:none;border-radius:var(--radius-md);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s ease}.api-keys-page .rotate-btn:hover{background:#dc2626;transform:translateY(-1px);box-shadow:var(--shadow-md)}.api-keys-page .rotate-btn .loading-spinner{display:inline-flex;align-items:center;gap:.5rem;flex-direction:row}.api-keys-page .rotate-btn .loading-spinner .custom-spinner{border-color:white rgba(255,255,255,.3) rgba(255,255,255,.3);margin:0}.api-keys-page .rotate-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.api-keys-page .guidelines-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.api-keys-page .guideline-item{display:flex;align-items:flex-start;gap:.75rem}.api-keys-page .guideline-item i{color:#10b981;font-size:1rem;margin-top:.125rem;flex-shrink:0}.api-keys-page .guideline-text{display:flex;flex-direction:column;gap:.25rem}.api-keys-page .guideline-text strong{font-size:.8125rem;color:var(--color-text-primary);font-weight:600}.api-keys-page .guideline-text span{font-size:.75rem;color:var(--color-text-secondary);line-height:1.4}.api-keys-page .guidelines-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--color-primary);text-decoration:none;font-weight:500}.api-keys-page .guidelines-link:hover{text-decoration:underline}.api-keys-page .language-tabs{display:flex;gap:.5rem}.api-keys-page .tab-btn{padding:.5rem .875rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;color:var(--color-text-secondary)}.api-keys-page .tab-btn.active{background:var(--color-primary);color:white;border-color:var(--color-primary)}.api-keys-page .tab-btn:hover:not(.active){background:var(--color-surface);border-color:var(--color-primary)}.api-keys-page .code-example{margin-top:1rem}.api-keys-page .code-example pre{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;font-size:.75rem;font-family:var(--font-mono);color:var(--color-text-primary);overflow-x:auto;line-height:1.4}@media (max-width:850px){.api-keys-page .key-value{flex-direction:column;align-items:stretch;gap:.75rem}.api-keys-page .key-hidden,.api-keys-page .key-visible{margin-right:0}.api-keys-page .key-actions{justify-content:center}.api-keys-page .api-key-grid,.api-keys-page .key-meta{grid-template-columns:1fr}.api-keys-page .language-tabs{flex-wrap:wrap}.api-keys-page .code-example pre{font-size:.6875rem}}