:root {
    --purple: rgb(84, 43, 253);
    --navy: rgb(0, 0, 177);
    --blue: rgb(60, 130, 255);
    --sky: rgb(121, 201, 253);
    --pink: rgb(255, 149, 185);
    --hot-pink: rgb(255, 72, 193);
    --text: #182033;
    --muted: #667085;
    --surface: rgba(255, 255, 255, .94);
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
            radial-gradient(circle at top left, rgba(121, 201, 253, .55), transparent 34%),
            radial-gradient(circle at top right, rgba(255, 72, 193, .28), transparent 30%),
            linear-gradient(135deg, rgba(84, 43, 253, .08), rgba(60, 130, 255, .12));
}

a { color: var(--purple); text-decoration: none; font-weight: 600; }

.nav {
    background: linear-gradient(90deg, var(--navy), var(--purple), var(--blue));
    color: white;
    padding: 14px 24px;
    display: flex;
    gap: 18px;
    align-items: center;
    box-shadow: 0 10px 28px rgba(0, 0, 177, .2);
}

.nav .brand { font-size: 18px; margin-right: 10px; }
.nav a { color: white; opacity: .92; }
.nav a:hover { opacity: 1; text-decoration: underline; }

.container { max-width: 1180px; margin: 24px auto; padding: 0 18px; }

.hero {
    color: white;
    padding: 34px;
    border-radius: 22px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, var(--navy), var(--purple) 48%, var(--hot-pink));
    box-shadow: 0 18px 45px rgba(84, 43, 253, .28);
}

.hero h1 { margin: 0 0 8px; font-size: 34px; }
.hero p { margin: 0; opacity: .9; }

.card {
    background: var(--surface);
    border: 1px solid rgba(121, 201, 253, .35);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 177, .08);
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat-card { color: white; border-radius: 18px; padding: 22px; background: linear-gradient(135deg, var(--blue), var(--purple)); }
.stat-card:nth-child(2) { background: linear-gradient(135deg, var(--purple), var(--hot-pink)); }
.stat-card:nth-child(3) { background: linear-gradient(135deg, var(--navy), var(--blue)); }
.stat-card:nth-child(4) { background: linear-gradient(135deg, var(--pink), var(--hot-pink)); }
.stat-card strong { display: block; font-size: 34px; margin-bottom: 5px; }

.quick-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.quick-links a { background: white; border: 1px solid rgba(84, 43, 253, .18); border-radius: 14px; padding: 16px; box-shadow: 0 8px 20px rgba(0, 0, 177, .06); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 700; }
input, select, textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid rgba(60, 130, 255, .35); border-radius: 10px; background: white; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(121, 201, 253, .55); border-color: var(--blue); }
button { border: 0; border-radius: 10px; background: linear-gradient(90deg, var(--purple), var(--blue)); color: white; padding: 10px 15px; cursor: pointer; font-weight: 700; }
button.danger { background: linear-gradient(90deg, #b42318, var(--hot-pink)); }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 14px; overflow: hidden; }
th, td { text-align: left; padding: 11px; border-bottom: 1px solid #edf1f7; vertical-align: middle; }
th { background: rgba(121, 201, 253, .25); color: var(--navy); }
.thumb { max-width: 70px; max-height: 50px; border-radius: 8px; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: rgba(121, 201, 253, .35); color: var(--navy); font-weight: 700; }
.badge.off { background: rgba(255, 149, 185, .35); color: #9f1239; }
.error { color: #a50e0e; margin-bottom: 12px; font-weight: 700; }
.login { max-width: 380px; margin: 80px auto; }
.actions { display: flex; gap: 8px; align-items: center; }
.toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border: 1px solid rgba(60, 130, 255, .28); border-radius: 999px; background: rgba(121, 201, 253, .14); color: var(--text); cursor: pointer; width: auto; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-slider { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 149, 185, .7); transition: .2s ease; flex: 0 0 auto; }
.toggle-slider::after { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0, 0, 177, .22); transition: .2s ease; }
.toggle input:checked + .toggle-slider { background: linear-gradient(90deg, var(--purple), var(--blue)); }
.toggle input:checked + .toggle-slider::after { transform: translateX(18px); }
.toggle-text { font-weight: 700; color: var(--navy); }
.permission-list { display: flex; flex-wrap: wrap; gap: 10px; }
.permission-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid rgba(60, 130, 255, .28); border-radius: 999px; background: rgba(121, 201, 253, .14); }
.permission-item input { width: auto; }

@media (max-width: 800px) {
    .grid, .stats, .quick-links { grid-template-columns: 1fr; }
    .nav { flex-wrap: wrap; }
}