* {margin: 0; padding: 0; box-sizing: border-box;}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {max-width: 1200px; margin: 0 auto;}

.header {text-align: center; color: white; margin-bottom: 40px;}
.header h1 {font-size: 2.5em; margin-bottom: 10px;}
.header p {font-size: 1.2em; opacity: 0.9;}
.header .user-info {margin-top: 20px; display: flex; justify-content: center; align-items: center; gap: 15px;}

.content {background: white; border-radius: 10px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.1);}

.form-box {max-width: 450px; margin: 50px auto; background: white; border-radius: 10px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.1);}
.form-box h2 {text-align: center; margin-bottom: 30px; color: #333;}

.form-group {margin-bottom: 20px;}
.form-group label {display: block; margin-bottom: 8px; color: #555; font-weight: 500;}
.form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"], .form-group input[type="number"], .form-group textarea, .form-group select {
    width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {outline: none; border-color: #667eea;}

.form-row {display: flex; gap: 15px; flex-wrap: wrap;}
.form-row .form-group {flex: 1; min-width: 200px;}

.btn {display: inline-block; padding: 12px 30px; background: #667eea; color: white; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; font-size: 14px; transition: all 0.3s;}
.btn:hover {background: #5568d3; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);}
.btn-primary {background: #667eea;}
.btn-success {background: #48bb78;}
.btn-success:hover {background: #38a169;}
.btn-warning {background: #ed8936;}
.btn-warning:hover {background: #dd6b20;}
.btn-secondary {background: #718096;}
.btn-secondary:hover {background: #4a5568;}
.btn-sm {padding: 6px 15px; font-size: 12px;}

.alert {padding: 15px; border-radius: 5px; margin-bottom: 20px;}
.alert-error {background: #fed7d7; color: #c53030; border: 1px solid #fc8181;}
.alert-success {background: #c6f6d5; color: #22543d; border: 1px solid #9ae6b4;}

.form-footer {margin-top: 30px; text-align: center; color: #666;}
.form-footer a {color: #667eea; text-decoration: none;}
.form-footer a:hover {text-decoration: underline;}

.feature-box {margin-bottom: 30px;}
.feature-box h2 {margin-bottom: 15px; color: #333;}
.feature-box ul {list-style: none; padding-left: 0;}
.feature-box li {padding: 10px 0; color: #555; font-size: 16px;}

.action-buttons {text-align: center; margin: 30px 0;}
.action-buttons .btn {margin: 0 10px;}

.api-info {background: #f7fafc; padding: 20px; border-radius: 5px; margin-top: 30px;}
.api-info h3 {margin-bottom: 15px; color: #333;}
.api-info code {background: #edf2f7; padding: 4px 8px; border-radius: 3px; font-family: 'Courier New', monospace; color: #e53e3e;}

.card {background: white; border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.card h3 {margin-bottom: 20px; color: #333; border-bottom: 2px solid #667eea; padding-bottom: 10px;}
.card.full-width {grid-column: 1 / -1;}

.dashboard-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;}

.info-table {width: 100%; border-collapse: collapse;}
.info-table tr {border-bottom: 1px solid #eee;}
.info-table td {padding: 12px 8px;}
.info-table td:first-child {color: #666; width: 40%;}
.info-table td:last-child {color: #333; font-weight: 500;}
.info-table code {background: #f7fafc; padding: 4px 8px; border-radius: 3px; font-size: 12px; color: #e53e3e; word-break: break-all;}

.data-table {width: 100%; border-collapse: collapse; margin-top: 15px;}
.data-table thead {background: #f7fafc;}
.data-table th {padding: 12px; text-align: left; font-weight: 600; color: #4a5568; border-bottom: 2px solid #e2e8f0;}
.data-table td {padding: 12px; border-bottom: 1px solid #e2e8f0;}
.data-table tbody tr:hover {background: #f7fafc;}
.data-table code {background: #edf2f7; padding: 2px 6px; border-radius: 3px; font-size: 12px;}

.badge {display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500;}
.badge-success {background: #c6f6d5; color: #22543d;}
.badge-error {background: #fed7d7; color: #c53030;}
.badge-secondary {background: #e2e8f0; color: #4a5568;}

.api-doc {background: #f7fafc; padding: 20px; border-radius: 5px;}
.api-doc pre {background: #2d3748; color: #e2e8f0; padding: 15px; border-radius: 5px; overflow-x: auto; margin: 10px 0; font-size: 13px;}

.pagination {display: flex; justify-content: center; gap: 5px; margin-top: 20px;}
.pagination a {padding: 8px 12px; background: #f7fafc; color: #4a5568; text-decoration: none; border-radius: 5px; transition: all 0.3s;}
.pagination a:hover {background: #667eea; color: white;}
.pagination a.active {background: #667eea; color: white;}

.admin-container {display: flex; gap: 20px; max-width: 1400px; margin: 0 auto;}

.admin-sidebar {width: 250px; background: white; border-radius: 10px; padding: 20px; height: fit-content; box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.admin-sidebar h2 {margin-bottom: 20px; color: #333; font-size: 1.5em;}

.admin-menu {list-style: none;}
.admin-menu li {margin-bottom: 5px;}
.admin-menu a {display: block; padding: 12px 15px; color: #4a5568; text-decoration: none; border-radius: 5px; transition: all 0.3s;}
.admin-menu a:hover {background: #f7fafc; color: #667eea;}
.admin-menu a.active {background: #667eea; color: white;}

.admin-content {flex: 1; background: white; border-radius: 10px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.admin-content h1 {margin-bottom: 30px; color: #333; border-bottom: 2px solid #667eea; padding-bottom: 15px;}

.stats-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;}

.stat-card {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);}
.stat-card h3 {font-size: 14px; opacity: 0.9; margin-bottom: 10px;}
.stat-card .stat-value {font-size: 2.5em; font-weight: bold;}

.footer {text-align: center; color: white; margin-top: 40px; opacity: 0.8;}

.text-muted {color: #718096; font-size: 14px;}

@media (max-width: 768px) {
    .admin-container {flex-direction: column;}
    .admin-sidebar {width: 100%;}
    .dashboard-grid {grid-template-columns: 1fr;}
    .form-row {flex-direction: column;}
}