* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #333; }

/* Login */
#login-box { max-width:320px; margin:120px auto; background:#fff; padding:32px; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.08); text-align:center; }
#login-box h2 { margin-bottom:20px; font-size:20px; }
#login-box input { width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:8px; margin-bottom:12px; font-size:14px; }
#login-box button { width:100%; padding:10px; background:#4f46e5; color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:14px; }
#login-box button:hover { background:#4338ca; }

/* Nav */
nav { display:flex; align-items:center; gap:8px; padding:12px 20px; background:#fff; border-bottom:1px solid #e5e5e5; }
.brand { font-weight:700; font-size:16px; margin-right:16px; }
.tab { padding:6px 14px; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer; font-size:13px; }
.tab.active { background:#4f46e5; color:#fff; border-color:#4f46e5; }
.logout { margin-left:auto; padding:6px 14px; border:1px solid #ef4444; color:#ef4444; border-radius:6px; background:#fff; cursor:pointer; font-size:13px; }

/* Panel */
.panel { padding:20px; }
.toolbar { margin-bottom:12px; display:flex; gap:8px; align-items:center; }
.toolbar button { padding:6px 14px; background:#4f46e5; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; }
.toolbar select { padding:6px 10px; border:1px solid #ddd; border-radius:6px; font-size:13px; }

/* Table */
table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); }
th { background:#f9fafb; padding:10px 12px; text-align:left; font-size:12px; color:#666; border-bottom:1px solid #e5e5e5; }
td { padding:8px 12px; font-size:13px; border-bottom:1px solid #f0f0f0; }
tr:hover td { background:#f9fafb; }
.key-text { font-family:monospace; font-size:11px; color:#666; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; cursor:pointer; }
.key-text:hover { color:#4f46e5; }

/* Badges */
.badge { padding:2px 8px; border-radius:4px; font-size:11px; }
.badge-on { background:#dcfce7; color:#16a34a; }
.badge-off { background:#fee2e2; color:#dc2626; }

/* Actions */
.act-btn { padding:3px 8px; border:1px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; font-size:11px; margin-right:4px; }
.act-btn:hover { background:#f0f0f0; }
.act-btn.danger { border-color:#ef4444; color:#ef4444; }

/* Modal */
#modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-content { background:#fff; padding:28px; border-radius:12px; width:380px; }
.modal-content h3 { margin-bottom:16px; }
.modal-content label { display:block; margin-bottom:10px; font-size:13px; }
.modal-content input { width:100%; padding:8px 10px; border:1px solid #ddd; border-radius:6px; margin-top:4px; font-size:13px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.modal-actions button { padding:8px 16px; border-radius:6px; border:1px solid #ddd; cursor:pointer; font-size:13px; }
.modal-actions button:last-child { background:#4f46e5; color:#fff; border-color:#4f46e5; }

/* Stats */
.stat-card { display:inline-block; background:#fff; padding:16px 24px; border-radius:8px; margin:0 12px 12px 0; box-shadow:0 1px 4px rgba(0,0,0,.06); min-width:140px; text-align:center; }
.stat-card .num { font-size:28px; font-weight:700; color:#4f46e5; }
.stat-card .label { font-size:12px; color:#888; margin-top:4px; }
.stat-section { margin-top:20px; }
.stat-section h4 { margin-bottom:8px; font-size:14px; }