* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',Tahoma,sans-serif; }
body { background:#0f172a; color:#e2e8f0; min-height:100vh; }
a { color:#38bdf8; text-decoration:none; }
a:hover { text-decoration:underline; }

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

.navbar {
    background:linear-gradient(90deg,#1e293b,#0f172a);
    padding:15px 30px; display:flex; justify-content:space-between;
    align-items:center; border-bottom:1px solid #334155; flex-wrap:wrap; gap:10px;
    position:sticky; top:0; z-index:100;
}
.navbar .logo { font-size:1.4rem; font-weight:bold; color:#38bdf8; }
.navbar ul { display:flex; list-style:none; gap:20px; flex-wrap:wrap; }
.navbar a { color:#cbd5e1; font-weight:500; }
.navbar a:hover { color:#38bdf8; text-decoration:none; }

.card {
    background:#1e293b; border-radius:12px; padding:25px;
    box-shadow:0 4px 20px rgba(0,0,0,.3); margin-bottom:20px;
    border:1px solid #334155;
}
.card h3 { color:#38bdf8; margin-bottom:15px; }

.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

.stat-card {
    background:linear-gradient(135deg,#1e40af,#7c3aed);
    color:#fff; padding:22px; border-radius:12px; text-align:center;
    transition:transform .2s, box-shadow .2s;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.stat-card h3 { color:#fff; font-size:2rem; margin-bottom:5px; }
.stat-card p { opacity:.9; font-size:.9rem; }

.btn {
    padding:10px 20px; border:none; border-radius:8px; cursor:pointer;
    font-weight:600; transition:.2s; display:inline-block; font-size:.9rem;
}
.btn:hover { transform:translateY(-1px); text-decoration:none; }
.btn-primary { background:#3b82f6; color:#fff; }
.btn-primary:hover { background:#2563eb; }
.btn-success { background:#10b981; color:#fff; }
.btn-success:hover { background:#059669; }
.btn-danger { background:#ef4444; color:#fff; }
.btn-warning { background:#f59e0b; color:#fff; }
.btn-outline { background:transparent; border:1px solid #475569; color:#e2e8f0; }
.btn-outline:hover { background:#334155; }
.btn-sm { padding:6px 12px; font-size:.8rem; }

.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:6px; color:#94a3b8; font-size:.9rem; font-weight:500; }
.form-control {
    width:100%; padding:12px 14px; background:#0f172a; color:#e2e8f0;
    border:1px solid #334155; border-radius:8px; font-size:1rem;
    transition:.2s;
}
.form-control:focus { outline:none; border-color:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.15); }

table { width:100%; border-collapse:collapse; }
table th, table td { padding:12px 10px; text-align:left; border-bottom:1px solid #334155; }
table th { background:#0f172a; color:#94a3b8; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; }
table tr:hover { background:#0f172a; }

.badge { padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600; display:inline-block; }
.badge-success { background:#064e3b; color:#6ee7b7; }
.badge-warning { background:#78350f; color:#fcd34d; }
.badge-danger { background:#7f1d1d; color:#fca5a5; }
.badge-info { background:#1e3a8a; color:#93c5fd; }

.alert { padding:12px 18px; border-radius:8px; margin-bottom:15px; border-left:4px solid; }
.alert-success { background:#064e3b; color:#6ee7b7; border-color:#10b981; }
.alert-error { background:#7f1d1d; color:#fca5a5; border-color:#ef4444; }
.alert-info { background:#1e3a8a; color:#93c5fd; border-color:#3b82f6; }

.trial-banner {
    background:linear-gradient(90deg,#f59e0b,#ef4444);
    color:#fff; padding:12px 20px; text-align:center;
    font-weight:600; border-radius:8px; margin-bottom:20px;
    animation:pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.4); }
    50% { box-shadow:0 0 0 10px rgba(239,68,68,0); }
}

#qr-reader { width:100%; max-width:500px; margin:0 auto; border-radius:12px; overflow:hidden; }

@media(max-width:768px) {
    .navbar { flex-direction:column; padding:12px 15px; }
    .navbar ul { justify-content:center; gap:12px; font-size:.9rem; }
    .stat-card h3 { font-size:1.5rem; }
    .card { padding:18px; }
    table { font-size:.85rem; }
    table th, table td { padding:8px 6px; }
    .btn { padding:8px 14px; font-size:.85rem; }
}