* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #333; }
header { background: #1a1a2e; color: #fff; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
header input { padding: 0.5rem; border: none; border-radius: 4px; }
main { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
section { background: #fff; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
h2 { margin-bottom: 1rem; color: #1a1a2e; }
.form-row { display: flex; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.form-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
.form-row input, .form-row select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
button { background: #1a1a2e; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; }
button:hover { background: #16213e; }
.search-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.search-bar input, .search-bar select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #eee; font-size: 0.875rem; }
th { background: #f8f9fa; font-weight: 600; }
.result { margin-top: 1rem; padding: 0.75rem; border-radius: 4px; display: none; }
.result.success { display: block; background: #d4edda; color: #155724; }
.result.error { display: block; background: #f8d7da; color: #721c24; }
.alert-item { padding: 0.75rem; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; margin-bottom: 0.5rem; }
.alert-item button { background: #dc3545; font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.key-text { font-family: monospace; font-size: 0.75rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-active { color: #28a745; }
.status-expired { color: #dc3545; }
.status-disabled { color: #6c757d; }

/* Modal */
.modal-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(0,0,0,0.4) !important;
    z-index: 1000 !important;
    align-items: center !important;
    justify-content: center !important;
}
.modal-overlay.active {
    display: flex !important;
}
.modal-content {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 2rem !important;
    min-width: 320px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.modal-content h3 { margin-bottom: 1rem; color: #1a1a2e; }
.modal-content label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; }
.modal-content input, .modal-content select { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem; }
.modal-content .form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.modal-content .form-row label { flex: 1; min-width: 120px; }
.modal-content .form-row input, .modal-content .form-row select { margin-bottom: 0; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.btn-cancel { background: #6c757d !important; }