.top-nav[data-v-3588858d]{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#34495e;color:#fff;box-shadow:0 2px 4px #0000001a}.top-nav h1[data-v-3588858d]{font-size:20px;font-weight:500}.user-info[data-v-3588858d]{display:flex;align-items:center;gap:15px;font-size:14px}.logout-btn[data-v-3588858d]{padding:6px 12px;background-color:#e74c3c;color:#fff;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .3s}.logout-btn[data-v-3588858d]:hover{background-color:#c0392b}.sidebar[data-v-441cd1eb]{width:250px;background-color:#2c3e50;color:#fff;overflow-y:auto}.sidebar nav ul[data-v-441cd1eb]{list-style:none}.sidebar nav ul li[data-v-441cd1eb]{border-bottom:1px solid #34495e}.sidebar nav ul li a[data-v-441cd1eb]{display:flex;align-items:center;padding:15px 20px;color:#fff;text-decoration:none;transition:background-color .3s}.sidebar nav ul li a[data-v-441cd1eb]:hover{background-color:#34495e}.sidebar nav ul li a.router-link-active[data-v-441cd1eb]{background-color:#3498db}.sidebar nav ul li a i[data-v-441cd1eb]{margin-right:10px;font-size:18px}.icon-key-list[data-v-441cd1eb]:before{content:"📋"}.icon-key-generate[data-v-441cd1eb]:before{content:"🔑"}.icon-key-usage[data-v-441cd1eb]:before{content:"📊"}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#f5f7fa;color:#333}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.main-content{display:flex;flex:1;overflow:hidden}.content{flex:1;padding:20px;overflow-y:auto;background-color:#f5f7fa}.login-container{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;background-color:#f5f7fa;overflow:hidden}.key-list-container[data-v-d578101e]{max-width:1200px;margin:0 auto;padding:20px}.page-header[data-v-d578101e]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #e0e0e0}.header-actions[data-v-d578101e]{display:flex;gap:10px}.search-input[data-v-d578101e]{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;width:200px}.btn[data-v-d578101e]{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.btn-primary[data-v-d578101e]{background-color:#3498db;color:#fff}.btn-primary[data-v-d578101e]:hover:not(:disabled){background-color:#2980b9}.btn-secondary[data-v-d578101e]{background-color:#95a5a6;color:#fff}.btn-secondary[data-v-d578101e]:hover:not(:disabled){background-color:#7f8c8d}.btn-success[data-v-d578101e]{background-color:#2ecc71;color:#fff}.btn-success[data-v-d578101e]:hover:not(:disabled){background-color:#27ae60}.btn-danger[data-v-d578101e]{background-color:#e74c3c;color:#fff}.btn-danger[data-v-d578101e]:hover:not(:disabled){background-color:#c0392b}.btn[data-v-d578101e]:disabled{background-color:#bdc3c7;cursor:not-allowed}.key-table-container[data-v-d578101e]{margin-bottom:20px}.key-table[data-v-d578101e]{width:100%;border-collapse:collapse;margin-bottom:20px}.key-table th[data-v-d578101e],.key-table td[data-v-d578101e]{padding:12px 15px;text-align:left;border-bottom:1px solid #ddd}.key-table th[data-v-d578101e]{background-color:#f8f9fa;font-weight:700}.key-table tr[data-v-d578101e]:hover{background-color:#f5f5f5}.status-badge[data-v-d578101e]{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;display:inline-block}.status-active[data-v-d578101e]{background-color:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}.status-used[data-v-d578101e]{background-color:#ffebee;color:#c62828;border:1px solid #ef9a9a}.status-expired[data-v-d578101e]{background-color:#fff8e1;color:#f57f17;border:1px solid #ffecb3}.status-unknown[data-v-d578101e]{background-color:#f5f5f5;color:#757575;border:1px solid #e0e0e0}.copy-success-toast[data-v-d578101e]{position:fixed;top:20px;right:20px;background-color:#4caf50;color:#fff;padding:12px 20px;border-radius:4px;box-shadow:0 2px 8px #0003;z-index:1000;animation:slideIn-d578101e .3s ease-out}@keyframes slideIn-d578101e{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.pagination-container[data-v-d578101e]{display:flex;justify-content:space-between;align-items:center;margin-top:20px;flex-wrap:wrap;gap:10px}.pagination-info[data-v-d578101e]{color:#666;font-size:14px}.pagination-controls[data-v-d578101e]{display:flex;align-items:center;gap:5px}.pagination-btn[data-v-d578101e]{padding:8px 12px;margin:0 2px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;transition:all .3s}.pagination-btn[data-v-d578101e]:hover:not(:disabled){background-color:#e9ecef;border-color:#adb5bd}.pagination-btn[data-v-d578101e]:disabled{opacity:.6;cursor:not-allowed}.pagination-btn.active[data-v-d578101e]{background-color:#3498db;color:#fff;border-color:#3498db}.pagination-numbers[data-v-d578101e]{display:flex;align-items:center}.pagination-size[data-v-d578101e]{display:flex;align-items:center;color:#666;font-size:14px}.page-size-select[data-v-d578101e]{margin:0 5px;padding:4px 8px;border:1px solid #ddd;border-radius:4px}.error-message[data-v-d578101e]{color:#e74c3c;background-color:#ffeaea;padding:10px 15px;border-radius:4px;margin-bottom:20px}.loading-state[data-v-d578101e]{text-align:center;padding:20px;color:#666}.loading-spinner[data-v-d578101e]{border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top:4px solid #3498db;width:30px;height:30px;animation:spin-d578101e 1s linear infinite;margin:0 auto 10px}@keyframes spin-d578101e{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state[data-v-d578101e]{text-align:center;padding:20px;color:#666;font-style:italic}@media(max-width:768px){.page-header[data-v-d578101e]{flex-direction:column;align-items:flex-start;gap:10px}.pagination-container[data-v-d578101e]{flex-direction:column;gap:15px}.pagination-controls[data-v-d578101e]{flex-wrap:wrap;justify-content:center}}.key-generate-container[data-v-2d1e5489]{max-width:800px;margin:0 auto;padding:20px}.page-header[data-v-2d1e5489]{margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #e0e0e0}.page-header h1[data-v-2d1e5489]{color:#333;margin:0 0 30px}.generate-container[data-v-2d1e5489]{display:flex;flex-direction:column;gap:20px;max-width:600px}.generate-btn[data-v-2d1e5489]{padding:10px 16px;background-color:#3498db;color:#fff;border:1px solid #ddd;font-size:14px;border-radius:4px;width:250px;cursor:pointer;transition:background-color .3s}.generate-btn[data-v-2d1e5489]:hover{background-color:#2980b9}.generate-btn[data-v-2d1e5489]:disabled{background-color:#bdc3c7;cursor:not-allowed}input[type=text][data-v-2d1e5489],input[type=number][data-v-2d1e5489]{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;width:250px}.key-result[data-v-2d1e5489]{margin-top:30px;padding:20px;border:1px solid #ddd;border-radius:8px;background-color:#f9f9f9}.key-result h3[data-v-2d1e5489]{margin-top:0;margin-bottom:15px;color:#555}.key-value[data-v-2d1e5489]{background-color:#fff;padding:15px;border-radius:4px;max-height:300px;overflow-y:auto}.key-item[data-v-2d1e5489]{margin-bottom:15px;padding-bottom:15px}.key-field[data-v-2d1e5489]{margin-bottom:8px;word-break:break-all}hr[data-v-2d1e5489]{border:none;border-top:1px solid #eee;margin-top:10px}.key-usage-container[data-v-de6874f4]{padding:20px;@extend .card;}.page-header[data-v-de6874f4]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #e0e0e0}.page-header h2[data-v-de6874f4]{color:#333;margin:0}.stat-card[data-v-de6874f4]{background-color:#f5f7fa;border-radius:8px;padding:20px;display:flex;align-items:center;gap:15px;box-shadow:0 2px 5px #0000000d}.stat-icon[data-v-de6874f4]{font-size:48px;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.stat-content[data-v-de6874f4]{flex:1}.stat-label[data-v-de6874f4]{font-size:14px;color:#7f8c8d;margin-bottom:5px}.stat-value[data-v-de6874f4]{font-size:28px;font-weight:700;color:#333}.usage-chart[data-v-de6874f4]{background-color:#f5f7fa;border-radius:8px;padding:20px;margin-bottom:30px}.usage-chart h3[data-v-de6874f4]{margin-top:0;margin-bottom:20px;color:#555}.chart-container[data-v-de6874f4]{background-color:#fff;border:1px solid #ddd;border-radius:8px;padding:20px}.chart-bar[data-v-de6874f4]{margin-bottom:20px}.chart-bar[data-v-de6874f4]:last-child{margin-bottom:0}.bar-label[data-v-de6874f4]{margin-bottom:8px;font-weight:600;color:#555}.bar-progress[data-v-de6874f4]{height:20px;background-color:#ecf0f1;border-radius:10px;overflow:hidden;margin-bottom:5px}.bar-fill[data-v-de6874f4]{height:100%;border-radius:10px;transition:width .5s ease}.bar-fill.used[data-v-de6874f4]{background-color:#e74c3c}.bar-fill.active[data-v-de6874f4]{background-color:#2ecc71}.bar-value[data-v-de6874f4]{text-align:right;font-size:14px;color:#7f8c8d;font-weight:500}.stat-container[data-v-de6874f4]{display:flex;flex-wrap:wrap;gap:20px}.login-form[data-v-ef2fef1d]{background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:30px;width:100%;max-width:400px}.login-header[data-v-ef2fef1d]{text-align:center;margin-bottom:30px}.login-header h2[data-v-ef2fef1d]{color:#333;margin-bottom:10px}.login-header p[data-v-ef2fef1d]{color:#666;font-size:14px}.form-group[data-v-ef2fef1d]{margin-bottom:20px}.form-group label[data-v-ef2fef1d]{display:block;margin-bottom:8px;color:#555;font-weight:500}.form-group input[data-v-ef2fef1d]{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:16px;transition:border-color .3s}.form-group input[data-v-ef2fef1d]:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db1a}.form-options[data-v-ef2fef1d]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.remember-me[data-v-ef2fef1d]{display:flex;align-items:center;color:#666;font-size:14px;cursor:pointer}.remember-me input[data-v-ef2fef1d]{margin-right:6px}.forgot-password[data-v-ef2fef1d]{color:#3498db;font-size:14px;text-decoration:none;transition:color .3s}.forgot-password[data-v-ef2fef1d]:hover{color:#2980b9}.form-actions[data-v-ef2fef1d]{margin-bottom:20px}.login-btn[data-v-ef2fef1d]{width:100%;padding:12px;background-color:#3498db;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s}.login-btn[data-v-ef2fef1d]:hover{background-color:#2980b9}.login-btn[data-v-ef2fef1d]:disabled{background-color:#bdc3c7;cursor:not-allowed}.btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s,transform .1s;display:inline-flex;align-items:center;gap:5px}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-primary{background-color:#3498db;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-success{background-color:#2ecc71;color:#fff}.btn-success:hover:not(:disabled){background-color:#27ae60}.btn-danger{background-color:#e74c3c;color:#fff}.btn-danger:hover:not(:disabled){background-color:#c0392b}.card{background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:20px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#555}.form-group input,.form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;transition:border-color .3s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #e0e0e0}.page-header h2{color:#333;margin:0;font-size:22px;font-weight:600}.search-input{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;width:250px;transition:border-color .3s}.search-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.status-badge{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:500}.status-badge.active{background-color:#d4edda;color:#155724}.status-badge.used{background-color:#f8d7da;color:#721c24}.error-message{background-color:#ffebee;color:#c62828;padding:12px;border-radius:4px;margin-bottom:20px;border-left:4px solid #c62828;font-size:14px}.loading-state{text-align:center;padding:50px 0;color:#666}.loading-spinner{display:inline-block;width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:50px 0;color:#999;font-size:16px}.icon-refresh:before{content:"🔄"}.icon-loading:before{content:"⏳"}.icon-copy:before{content:"📋"}