.api-keys-container{max-width:1200px;margin:40px auto;padding:0 24px}.api-keys-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:32px;gap:24px}.api-keys-header h1{font-size:32px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.api-keys-description{font-size:16px;color:var(--text-secondary);max-width:600px}.api-keys-btn{padding:12px 24px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease;border:none;white-space:nowrap}.api-keys-btn-primary{background:#3b82f6;color:#fff}.api-keys-btn-primary:hover{background:#2563eb;transform:translateY(-1px)}.api-keys-btn-secondary{background:rgba(51,65,85,.5);color:var(--text-primary);border:1px solid rgba(71,85,105,.5)}.api-keys-btn-secondary:hover{background:rgba(71,85,105,.5)}.api-keys-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;gap:24px}.spinner{width:48px;height:48px;border:4px solid rgba(59,130,246,.2);border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}.api-keys-loading p{font-size:16px;color:var(--text-secondary)}.api-keys-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;text-align:center;gap:16px}.api-keys-empty-icon{font-size:64px;margin-bottom:16px}.api-keys-empty h2{font-size:24px;font-weight:600;color:var(--text-primary);margin:0}.api-keys-empty p{font-size:16px;color:var(--text-secondary);max-width:400px;margin:0 0 24px}.api-keys-list{display:flex;flex-direction:column;gap:16px}.api-key-card{background:rgba(15,23,42,.8);border:1px solid rgba(51,65,85,.5);border-radius:12px;padding:24px;transition:all .2s ease}.api-key-card:hover{border-color:rgba(59,130,246,.5)}.key-revoked{opacity:.6}.key-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:24px}.key-info h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.key-description{font-size:14px;color:var(--text-secondary);margin:0}.key-actions{display:flex;align-items:center;gap:12px}.key-status-badge{padding:4px 12px;border-radius:6px;font-size:13px;font-weight:500}.key-status-active{background:rgba(34,197,94,.2);color:#86efac;border:1px solid rgba(34,197,94,.3)}.key-status-revoked{background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}.key-action-btn{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;border:none}.key-action-rotate{background:rgba(59,130,246,.1);color:#93c5fd;border:1px solid rgba(59,130,246,.3)}.key-action-rotate:hover{background:rgba(59,130,246,.2)}.key-action-revoke{background:rgba(239,68,68,.1);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}.key-action-revoke:hover{background:rgba(239,68,68,.2)}.key-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.key-detail-item{display:flex;flex-direction:column;gap:4px}.key-detail-label{font-size:12px;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.key-detail-value{font-size:14px;color:var(--text-primary)}.key-detail-value code{font-family:var(--font-mono);background:rgba(30,41,59,.5);padding:4px 8px;border-radius:4px;font-size:13px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.modal{background:rgba(15,23,42,.95);border:1px solid rgba(51,65,85,.5);border-radius:16px;width:90%;max-width:600px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);animation:slideUp .3s ease-out;backdrop-filter:blur(10px)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid rgba(51,65,85,.5)}.modal-header h2{font-size:24px;font-weight:600;color:var(--text-primary);margin:0}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:32px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease}.modal-close:hover{background:rgba(51,65,85,.5);color:var(--text-primary)}.modal-body{padding:24px}.modal-footer{display:flex;gap:12px;padding:24px;border-top:1px solid rgba(51,65,85,.5)}.form-field{margin-bottom:20px}.form-field label{display:block;font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:8px}.form-input{width:100%;padding:12px;background:rgba(30,41,59,.5);border:1px solid rgba(51,65,85,.5);border-radius:8px;color:var(--text-primary);font-size:15px;transition:all .2s ease}.form-input:focus{outline:none;border-color:#3b82f6;background:rgba(30,41,59,.7)}.form-hint{font-size:13px;color:var(--text-tertiary);margin:6px 0 0}.alert{padding:16px;border-radius:8px;margin-bottom:20px}.alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:#fbbf24}.alert strong{font-weight:600}.api-key-display{display:flex;gap:12px;background:rgba(30,41,59,.5);border:1px solid rgba(51,65,85,.5);border-radius:8px;padding:12px}.api-key-display code{flex:1;font-family:var(--font-mono);font-size:14px;color:var(--text-primary);word-break:break-all}.copy-btn{padding:8px 16px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.copy-btn:hover{background:#2563eb}.usage-example{margin-top:20px;padding:16px;background:rgba(30,41,59,.3);border-radius:8px}.usage-example h3{font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.usage-example pre{margin:0;overflow-x:auto}.usage-example code{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary)}@media (max-width: 768px){.api-keys-header{flex-direction:column;align-items:stretch}.key-header{flex-direction:column}.key-details{grid-template-columns:1fr}.modal{width:95%;margin:20px}.api-key-display{flex-direction:column}}body.modern-light .api-key-card,body.modern-theme.modern-light .api-key-card{background:rgba(209,216,225,.85);border:1px solid rgba(51,65,85,.15)}body.modern-light .modal,body.modern-theme.modern-light .modal{background:rgba(224,229,236,.98);border:1px solid rgba(51,65,85,.15)}body.modern-light .form-input,body.modern-theme.modern-light .form-input{background:rgba(0,0,0,.02);border:1px solid rgba(51,65,85,.15)}body.modern-light .form-input:focus,body.modern-theme.modern-light .form-input:focus{background:#e0e5ec}body.modern-light .key-detail-value code,body.modern-theme.modern-light .key-detail-value code{background:rgba(0,0,0,.04)}body.modern-light .api-key-display,body.modern-theme.modern-light .api-key-display{background:rgba(0,0,0,.02);border:1px solid rgba(51,65,85,.12)}body.modern-light .usage-example,body.modern-theme.modern-light .usage-example{background:rgba(0,0,0,.02)}body.modern-light .api-keys-btn-secondary,body.modern-theme.modern-light .api-keys-btn-secondary{background:rgba(0,0,0,.04);border:1px solid rgba(51,65,85,.15)}