:root{
    --bg-1:#050b14;
    --bg-2:#071526;
    --bg-3:#0e2138;
    --card-bg:rgba(255,255,255,.085);
    --card-border:rgba(255,255,255,.13);
    --sidebar-bg:rgba(5,13,26,.92);
    --topbar-bg:rgba(10,24,44,.78);
    --primary:#2f80ed;
    --primary-2:#56ccf2;
    --text:#eaf2ff;
    --muted:#a8b6d8;
    --shadow:0 16px 45px rgba(0,0,0,.32);
    --shadow-soft:0 10px 28px rgba(0,0,0,.20);
}
*{box-sizing:border-box}
body{
    margin:0;
    min-height:100vh;
    font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top right, rgba(86,204,242,.18), transparent 23%),
        radial-gradient(circle at bottom left, rgba(47,128,237,.20), transparent 26%),
        linear-gradient(135deg,#050b14 0%,#071526 40%,#0e2138 100%);
    background-attachment:fixed;
}
a{text-decoration:none;color:inherit}
.app-shell{display:flex;min-height:100vh;width:100%}
.sidebar{
    width:280px;
    min-height:100vh;
    background:var(--sidebar-bg);
    border-right:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
    position:sticky;
    top:0;
    padding:24px 16px;
}
.sidebar .brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
    padding:14px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(47,128,237,.26),rgba(86,204,242,.11));
    border:1px solid rgba(255,255,255,.12);
}
.brand-icon{
    width:46px;height:46px;border-radius:15px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#2f80ed,#56ccf2);
    color:#fff;font-size:21px;flex-shrink:0;
}
.sidebar .brand h4{margin:0;font-size:18px;font-weight:800;color:#fff}
.sidebar .brand small{color:var(--muted);font-size:12px}
.sidebar-section{
    color:#7890b8;font-size:11px;text-transform:uppercase;
    letter-spacing:.12em;font-weight:800;margin:18px 10px 10px;
}
.sidebar-nav{display:flex;flex-direction:column}
.sidebar .nav-link{
    color:var(--text);
    border-radius:15px;
    padding:12px 14px;
    margin-bottom:8px;
    transition:.25s ease;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid transparent;
}
.sidebar .nav-link i{font-size:18px;color:#bcdcff}
.sidebar .nav-link:hover,.sidebar .nav-link.active{
    background:linear-gradient(135deg,rgba(47,128,237,.28),rgba(86,204,242,.15));
    color:#fff;
    transform:translateX(4px);
    border-color:rgba(255,255,255,.10);
}
.sidebar-user{
    margin-top:24px;padding:14px;border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.09);
    display:flex;align-items:center;gap:12px;
}
.user-avatar{
    width:42px;height:42px;border-radius:50%;
    background:linear-gradient(135deg,#2f80ed,#56ccf2);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;color:#fff;flex-shrink:0;
}
.user-info{display:flex;flex-direction:column;min-width:0}
.user-info strong{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.user-info small{color:var(--muted);font-size:12px;text-transform:capitalize}
.main-content{flex:1;min-width:0;padding:24px}
.topbar{
    background:var(--topbar-bg);
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    box-shadow:var(--shadow-soft);
    padding:16px 18px;
    margin-bottom:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.page-title{margin:0;font-size:27px;font-weight:800;color:#fff}
.page-subtitle{color:var(--muted);margin-top:4px;font-size:14px}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-notification{
    position:relative;width:42px;height:42px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.11);
    color:#fff;
}
.topbar-notification span{
    position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;
    border-radius:999px;background:#ef4444;color:#fff;font-size:11px;
    font-weight:800;display:flex;align-items:center;justify-content:center;
}
.card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:20px;
    box-shadow:var(--shadow-soft);
    color:var(--text);
}
.card-header{
    background:rgba(255,255,255,.04)!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
    color:#fff;font-weight:700;
}
.form-control,.form-select,textarea{
    background:rgba(255,255,255,.07)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:14px!important;
}
.form-control::placeholder{color:#9cb0d9!important}
.form-select option{color:#111827}
.table{color:var(--text)}
.table td,.table th{border-color:rgba(255,255,255,.08)!important;vertical-align:middle}
.table thead th{
    background:rgba(255,255,255,.065);
    color:#dce9ff;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.btn{border-radius:13px;font-weight:700}
.btn-primary{border:none;background:linear-gradient(135deg,#2f80ed,#56ccf2)}
.btn-outline-light{border-color:rgba(255,255,255,.22)!important;color:#e8eefc!important;background:rgba(255,255,255,.055)!important}
.badge{border-radius:999px;padding:.48em .75em;font-weight:800}
@media(max-width:991px){
    .app-shell{flex-direction:column}
    .sidebar{width:100%;min-height:auto;position:relative}
    .sidebar-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .main-content{padding:16px}
    .topbar{flex-direction:column;align-items:flex-start}
}
@media(max-width:575px){
    .sidebar-nav{grid-template-columns:1fr}
}