.keys-page{padding:32px 40px}.keys-page h2{margin-bottom:20px}.key-grid{flex-wrap:wrap;gap:12px;margin-bottom:32px;display:flex}.key-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;flex:340px;min-width:0;padding:14px 16px}.key-row{align-items:center;gap:8px;display:flex}.key-id{color:var(--color-text-faint);white-space:nowrap;flex:none;font-size:.8rem;font-weight:700}.key-value{flex:none;align-items:center;gap:4px;display:flex}.copy-btn{width:30px;height:30px;color:var(--color-text-muted);cursor:pointer;box-shadow:none;background:0 0;border:1px solid #0000;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s,border-color .15s;display:flex}.copy-btn:hover{background:var(--color-surface-alt);color:var(--color-text);box-shadow:none}.copy-btn:active{background:var(--color-surface-raised);transform:scale(.95)}.copy-btn.copied{color:var(--color-success);border-color:var(--color-border-strong);background:var(--color-surface-alt)}.key-separator{background:var(--color-border);flex:none;width:1px;height:28px;margin-left:2px}.key-actions{flex:none;gap:2px;display:flex}.key-action{width:30px;height:30px;color:var(--color-text-muted);cursor:pointer;box-shadow:none;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s,border-color .15s;display:flex}.key-action:hover{background:var(--color-surface-alt);color:var(--color-text);box-shadow:none}.key-action:active{background:var(--color-surface-raised);transform:scale(.95)}.key-action.active{color:var(--color-primary-light);border-color:var(--color-border-strong);background:var(--color-surface-alt)}.label-field{flex:1;align-items:center;min-width:0;display:flex;position:relative}.edit-key-label{flex:1;min-width:0}.label-status{color:#fff;transform-origin:50%;border:1px solid #0000;border-radius:6px;flex:none;justify-content:center;align-items:center;width:32px;height:32px;margin-left:8px;padding:0;line-height:1;display:flex;overflow:hidden}.label-status.unsaved{background:var(--color-warning,#d97706);cursor:pointer;animation:.15s ease-out label-status-in}.label-status.saving{background:var(--color-text-muted,#888);animation:.15s ease-out label-status-pop}.label-status.saved{background:var(--color-primary,#0d9488);animation:.15s ease-out label-status-pop,1s forwards label-saved-fade}.label-status.failed{background:var(--color-error,#dc2626);cursor:pointer;animation:.15s ease-out label-status-pop}@keyframes label-status-in{0%{opacity:0;width:0;transform:scale(.4)}to{opacity:1;width:32px;transform:scale(1)}}@keyframes label-status-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes label-saved-fade{0%,70%{opacity:1;width:32px;margin-left:8px;transform:scale(1)}to{opacity:0;width:0;margin-left:-2px;transform:scale(0)}}.label-error{z-index:99999;color:#fff;background:var(--color-error);border-radius:6px;padding:8px 10px;font-size:.78rem;line-height:1.3;position:absolute;bottom:calc(100% + 8px);left:0;right:0;box-shadow:0 4px 12px #00000040}.label-error:after{content:"";border:6px solid #0000;border-top-color:var(--color-error);position:absolute;top:100%;left:14px}.edit-key-label{margin-bottom:0!important}.edit-key-label.invalid{outline:1px solid var(--color-error);border-color:var(--color-error)!important}.create-key-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;max-width:480px;padding:24px}.create-key-card h3{margin-bottom:16px}.create-key-card form{align-items:flex-end;gap:10px;display:flex}.create-key-card form .field{flex:1}.create-key-card form .field label{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:4px;font-size:.78rem;font-weight:600;display:block}.create-key-card form .field input{margin-bottom:0}.hint{color:var(--color-text-muted);border-left:3px solid var(--color-primary);background:#0d948812;border-radius:0 6px 6px 0;margin-top:20px;padding:10px 14px;font-size:.82rem}.hint div{margin-top:4px}.hint code{background:#00000040;border-radius:4px;padding:2px 6px}.limit-warning{color:var(--color-warning);margin-top:12px;font-size:.88rem}