* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#1a1a2e; color:#e0e0e0; min-height:100vh; }
a { color:#4fc3f7; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:1200px; margin:0 auto; padding:16px; }
.header { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid #333; margin-bottom:20px; }
.header h1 { font-size:1.3rem; color:#4fc3f7; }
.header .user-info { display:flex; align-items:center; gap:12px; font-size:0.85rem; }
.btn { padding:6px 16px; border:none; border-radius:6px; cursor:pointer; font-size:0.85rem; transition:all 0.2s; }
.btn-primary { background:#4fc3f7; color:#1a1a2e; }
.btn-primary:hover { background:#29b6f6; }
.btn-danger { background:#ef5350; color:white; }
.btn-danger:hover { background:#e53935; }
.btn-secondary { background:#444; color:#e0e0e0; }
.btn-secondary:hover { background:#555; }
.btn-sm { padding:3px 10px; font-size:0.78rem; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card { background:#16213e; border-radius:10px; padding:16px; text-align:center; }
.stat-card .value { font-size:1.8rem; font-weight:700; color:#4fc3f7; }
.stat-card .label { font-size:0.8rem; color:#888; margin-top:4px; }
.tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:2px solid #333; padding-bottom:0; }
.tab { padding:8px 20px; cursor:pointer; border-radius:8px 8px 0 0; background:transparent; color:#888; border:none; font-size:0.9rem; transition:all 0.2s; }
.tab.active { background:#16213e; color:#4fc3f7; border-bottom:2px solid #4fc3f7; margin-bottom:-2px; }
.tab:hover { color:#e0e0e0; }
.tab-content { display:none; }
.tab-content.active { display:block; }
table { width:100%; border-collapse:collapse; background:#16213e; border-radius:8px; overflow:hidden; }
th { background:#0f3460; padding:10px 12px; text-align:left; font-size:0.8rem; color:#4fc3f7; white-space:nowrap; }
td { padding:8px 12px; border-top:1px solid #222; font-size:0.83rem; }
tr:hover { background:#1a2744; }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.72rem; }
.badge-green { background:#1b5e20; color:#81c784; }
.badge-red { background:#b71c1c33; color:#ef5350; }
.badge-blue { background:#0d47a133; color:#4fc3f7; }
.badge-yellow { background:#f57f1733; color:#ffb74d; }
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal { background:#16213e; border-radius:12px; padding:24px; min-width:400px; max-width:600px; }
.modal h3 { margin-bottom:16px; color:#4fc3f7; }
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:0.8rem; color:#888; margin-bottom:4px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:8px 12px; background:#1a1a2e; border:1px solid #333; border-radius:6px; color:#e0e0e0; font-size:0.85rem; }
.form-group input:focus, .form-group select:focus { border-color:#4fc3f7; outline:none; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.toolbar { display:flex; gap:8px; margin-bottom:12px; align-items:center; flex-wrap:wrap; }
.toolbar select, .toolbar input { padding:6px 10px; background:#16213e; border:1px solid #333; border-radius:6px; color:#e0e0e0; font-size:0.83rem; }
.empty { text-align:center; padding:40px; color:#666; }
.login-box { max-width:360px; margin:100px auto; background:#16213e; border-radius:12px; padding:32px; }
.login-box h2 { text-align:center; color:#4fc3f7; margin-bottom:24px; }
.login-box .form-group { margin-bottom:16px; }
.login-box .btn { width:100%; padding:10px; font-size:1rem; }
.toast { position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:8px; color:white; font-size:0.85rem; z-index:2000; animation:fadeIn 0.3s; }
.toast-success { background:#2e7d32; }
.toast-error { background:#c62828; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.key-display { background:#1a1a2e; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:0.85rem; word-break:break-all; border:1px solid #333; margin:8px 0; }
.pagination { display:flex; gap:8px; justify-content:center; margin-top:12px; }