<style>
    * { box-sizing: border-box; margin:0; padding:0; }
    body { font-family:'Segoe UI', Arial, sans-serif; background:#0a0b0f; color:#eee; min-height:100vh; }

    .topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 30px; border-bottom:1px solid rgba(255,255,255,0.06); flex-wrap:wrap; gap:10px; }
    .logo { font-size:19px; font-weight:800; background:linear-gradient(90deg,#ffb347,#ff6ec7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .admin-tag { font-size:11px; color:#ff9ed4; background:rgba(255,110,199,0.12); padding:3px 10px; border-radius:20px; margin-left:8px; font-weight:700; }

    .nav-links { display:flex; gap:6px; flex-wrap:wrap; }
    .nav-links a {
        color:#ccc; text-decoration:none; font-size:13px; font-weight:600;
        padding:8px 14px; border-radius:8px; transition:0.2s;
    }
    .nav-links a:hover, .nav-links a.active { background: rgba(255,110,199,0.12); color:#ff9ed4; }
    .logout-link { color:#ff8080 !important; }

    .wrap { max-width: 1100px; margin:0 auto; padding: 30px 20px 80px; }
    .page-title { font-size:24px; margin-bottom:24px; }

    .stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:16px; margin-bottom:30px; }
    .stat-card {
        background: linear-gradient(160deg, rgba(30,32,40,0.85), rgba(20,15,25,0.85));
        border:1px solid rgba(255,255,255,0.08);
        border-radius:16px;
        padding:20px;
        text-align:center;
        transition: transform 0.2s;
    }
    .stat-card:hover { transform: translateY(-4px); }
    .stat-card.highlight { border-color: rgba(255,110,199,0.5); box-shadow: 0 0 30px rgba(255,110,199,0.15); }
    .stat-icon { font-size:22px; margin-bottom:8px; }
    .stat-value { font-size:26px; font-weight:900; }
    .stat-label { font-size:12px; color:#888; margin-top:4px; }

    .card {
        background: linear-gradient(160deg, rgba(30,32,40,0.85), rgba(20,15,25,0.85));
        border:1px solid rgba(255,255,255,0.08);
        border-radius:16px;
        padding:24px;
        margin-bottom:24px;
    }
    .card-title { font-size:17px; margin-bottom:16px; }

    table.data-table { width:100%; border-collapse:collapse; font-size:13px; }
    table.data-table th { text-align:left; padding:10px 12px; color:#ffb347; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid rgba(255,255,255,0.1); }
    table.data-table td { padding:12px; border-bottom:1px solid rgba(255,255,255,0.06); color:#ddd; }
    table.data-table tr:hover td { background: rgba(255,255,255,0.02); }

    .badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
    .badge.active { background:#163d24; color:#4ade80; }
    .badge.banned { background:#3d1616; color:#ff8080; }

    .btn { padding:8px 14px; border-radius:8px; border:none; cursor:pointer; font-size:12px; font-weight:700; text-decoration:none; display:inline-block; transition:transform 0.15s; }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { background: linear-gradient(90deg,#ffb347,#ff6ec7); color:#111; }
    .btn-dark { background:#22262e; color:#eee; border:1px solid #333; }
    .btn-danger { background:#3d1616; color:#ff8080; }
    .btn-sm { padding:6px 10px; font-size:11px; }

    label { display:block; margin-top:14px; margin-bottom:6px; font-size:13px; color:#aaa; }
    input, select { width:100%; padding:11px; border-radius:8px; border:1px solid #333; background:#12141a; color:#fff; font-size:14px; }
    input:focus, select:focus { outline:none; border-color:#ff6ec7; }

    .msg { padding:12px 16px; border-radius:10px; margin-bottom:20px; font-size:14px; }
    .msg.success { background:#163d24; color:#4ade80; }
    .msg.error { background:#3d1616; color:#ff8080; }

    .toggle-switch { position:relative; display:inline-block; width:44px; height:24px; }
    .toggle-switch input { opacity:0; width:0; height:0; }
    .toggle-slider { position:absolute; cursor:pointer; top:0;left:0;right:0;bottom:0; background:#333; border-radius:24px; transition:0.3s; }
    .toggle-slider:before { position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:0.3s; }
    .toggle-switch input:checked + .toggle-slider { background: linear-gradient(90deg,#ffb347,#ff6ec7); }
    .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }
</style>
