.api-keys-page .api-key-main{margin-bottom:2rem}.api-keys-page .key-tabs{display:flex;gap:.5rem}.api-keys-page .key-tab{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s ease}.api-keys-page .key-tab:hover{color:var(--color-text-primary)}.api-keys-page .key-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.api-keys-page .key-tab i{font-size:var(--text-sm)}.api-keys-page .key-status{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:var(--text-base)}.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:var(--text-2xs)}.api-keys-page .api-key-display{display:flex;flex-direction:column;gap:1rem;background:none;border:none;padding:0;margin:0}.api-keys-page .key-container{display:flex;flex-direction:column;gap:0}.api-keys-page .key-value{display:flex;align-items:center;gap:.75rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.625rem .875rem}.api-keys-page .key-value code{flex:1;min-width:0;font-family:Monaco,Menlo,Consolas,monospace;font-size:var(--text-md);color:var(--color-text-primary);letter-spacing:.3px;background:none}.api-keys-page .key-value code.key-masked{color:var(--color-text-secondary)}.api-keys-page .key-value code.key-visible{word-break:break-all}.api-keys-page .key-actions{display:flex;gap:.375rem;flex-shrink:0}.api-keys-page .rotate-link{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;margin-top:.5rem;background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;font-family:inherit;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.api-keys-page .rotate-link:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,.05)}.api-keys-page .rotate-link:disabled{opacity:.6;cursor:not-allowed}.api-keys-page .rotate-link i{font-size:var(--text-xs)}.api-keys-page .key-note{display:flex;align-items:flex-start;gap:.625rem;padding:.875rem 1rem;background:rgba(0,102,204,.04);border:1px solid rgba(0,102,204,.12);border-radius:var(--radius-md);font-size:var(--text-base);line-height:1.6;color:var(--color-text-secondary);margin-top:.25rem}.api-keys-page .key-note i{color:var(--color-primary);margin-top:.2rem;flex-shrink:0;font-size:var(--text-sm)}.api-keys-page .key-note code{background:var(--color-background);padding:.125rem .5rem;border-radius:var(--radius-sm);font-family:Monaco,Menlo,Consolas,monospace;font-size:var(--text-sm);color:var(--color-primary);border:1px solid var(--color-border)}.api-keys-page .key-action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;color:var(--color-text-secondary);font-size:var(--text-base)}.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:.25rem;width:auto;padding:0 .625rem;font-size:var(--text-sm)}.api-keys-page .key-action-btn.copied:hover{background:#059669;border-color:#059669}.api-keys-page .copied-text{font-size:var(--text-sm);font-weight:500;white-space:nowrap}.api-keys-page .key-meta{display:flex;align-items:stretch;padding:0;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md)}.api-keys-page .meta-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.625rem .5rem;text-align:center}.api-keys-page .meta-item:not(:last-child){border-right:1px solid var(--color-border)}.api-keys-page .meta-label{font-size:var(--text-xs);color:var(--color-text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.02em}.api-keys-page .meta-value{font-size:var(--text-base);color:var(--color-text-primary);font-weight:600}.api-keys-page .expiration-status{display:inline-flex;align-items:center;gap:.5rem}.api-keys-page .expiration-status.never{color:var(--color-text-secondary)}.api-keys-page .expiration-status.active{color:var(--color-text-primary)}.api-keys-page .expiration-status.expiring{color:#f59e0b}.api-keys-page .expiration-status.expired,.api-keys-page .expiration-status.expiring-soon{color:#ef4444}.api-keys-page .expiration-badge{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;padding:.125rem .5rem;border-radius:9999px;white-space:nowrap}.api-keys-page .expiration-badge.expired,.api-keys-page .expiration-badge.warning{background:rgba(239,68,68,.15);color:#ef4444}.api-keys-page .expiration-badge.notice{background:rgba(245,158,11,.15);color:#f59e0b}.rotation-duration-section{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--color-border)}.rotation-duration-section .duration-label{display:flex;align-items:center;gap:.5rem;font-size:var(--text-md);font-weight:600;color:var(--color-text-primary);margin-bottom:.5rem}.rotation-duration-section .duration-label i{color:var(--color-primary)}.rotation-duration-section .duration-select{width:100%;font-size:var(--text-md);font-family:inherit;color:var(--color-text-primary);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding:.625rem 2.5rem .625rem .875rem}.rotation-duration-section .duration-select:hover{border-color:var(--color-primary)}.rotation-duration-section .duration-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0,102,204,.1)}.rotation-duration-section .duration-select option{padding:.5rem}.rotation-duration-section .duration-select.disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-surface)}.rotation-duration-section .pro-badge{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;padding:.125rem .375rem;border-radius:4px;margin-left:.5rem}.rotation-duration-section .duration-upgrade{display:flex;flex-direction:column;gap:.5rem}.rotation-duration-section .upgrade-link{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--text-base);color:var(--color-primary);text-decoration:none;font-weight:500;background:none;border:none;padding:0;cursor:pointer;font-family:inherit}.rotation-duration-section .upgrade-link:hover{text-decoration:underline;color:var(--color-primary-dark,#0055aa)}.rotation-duration-section .upgrade-link i{font-size:var(--text-xs)}.confirm-custom-content{margin-top:1rem}.api-keys-page .code-example-card{margin-bottom:1rem}.api-keys-page .code-example-block{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border)}.api-keys-page .code-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--color-background);border-bottom:1px solid var(--color-border)}.api-keys-page .code-lang{font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.03em}.api-keys-page .code-snippet{margin:0;padding:.875rem 1rem;background:var(--color-surface);font-family:Monaco,Menlo,Consolas,monospace;font-size:var(--text-sm);line-height:1.6;color:var(--color-text-primary);overflow-x:auto}.api-keys-page .code-snippet code{background:none;padding:0;font-family:inherit;font-size:inherit}@media (max-width:1000px){.api-keys-page .key-meta{flex-wrap:wrap}.api-keys-page .meta-item{flex:1 1 45%}.api-keys-page .meta-item:nth-child(2){border-right:none}.api-keys-page .meta-item:first-child,.api-keys-page .meta-item:nth-child(2){border-bottom:1px solid var(--color-border)}}@media (max-width:850px){.api-keys-page .key-value{flex-direction:column;align-items:stretch;gap:.5rem;padding:.75rem}.api-keys-page .key-value code{text-align:center;font-size:var(--text-base)}.api-keys-page .key-actions{justify-content:center}.api-keys-page .key-meta{flex-direction:column}.api-keys-page .meta-item{flex:1 1 100%;flex-direction:row;justify-content:space-between;padding:.5rem .75rem}.api-keys-page .meta-item:not(:last-child){border-right:none;border-bottom:1px solid var(--color-border)}.api-keys-page .rotate-link{justify-content:center}.api-keys-page .code-snippet{font-size:var(--text-xs)}}