*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg-primary:#F5F7FA;--bg-secondary:#FFFFFF;--bg-card:#FFFFFF;--bg-card-hover:#F8FAFC;--bg-input:#FFFFFF;
--border-color:#E2E8F0;--border-focus:#1A4BAE;
--text-primary:#1A1F36;--text-secondary:#5E6687;--text-muted:#9BA3BF;
--accent-primary:#1A4BAE;--accent-secondary:#0EA5E9;--accent-cta:#FBBF24;--accent-cta-hover:#F59E0B;
--accent-success:#16A34A;--accent-warning:#F59E0B;--accent-danger:#DC2626;--accent-info:#2563EB;
--gradient-primary:linear-gradient(135deg,#1A4BAE 0%,#0EA5E9 100%);
--gradient-cta:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%);
--gradient-hero:linear-gradient(135deg,#F5F7FA 0%,#EEF1F6 50%,#E8ECF4 100%);
--shadow-card:0 1px 3px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.04);--shadow-glow:0 0 24px rgba(26,75,174,0.08);--shadow-cta:0 4px 16px rgba(251,191,36,0.25);
--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;
--transition:all 0.25s cubic-bezier(0.4,0,0.2,1);--transition-fast:all 0.15s cubic-bezier(0.4,0,0.2,1);
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}

/* ═══ Layout ═══ */
.app-layout{display:flex;min-height:100vh}

/* ═══ Sidebar ═══ */
.sidebar{width:280px;background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;transition:transform .3s cubic-bezier(0.4,0,0.2,1)}
.sidebar-header{padding:24px 20px;border-bottom:1px solid var(--border-color)}
.sidebar-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.sidebar-logo-icon{width:42px;height:42px;background:var(--gradient-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow);transition:var(--transition)}
.sidebar-logo-icon:hover{transform:scale(1.05);box-shadow:0 0 32px rgba(26,75,174,0.15)}
.sidebar-logo-icon svg{color:#fff}
.sidebar-logo-text{font-size:1.25rem;font-weight:700;color:var(--accent-primary)}
.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}
.nav-section{margin-bottom:24px}
.nav-section-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);padding:0 12px;margin-bottom:8px}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text-secondary);text-decoration:none;font-size:.9rem;font-weight:500;transition:var(--transition);position:relative;overflow:hidden}
.nav-link::before{content:'';position:absolute;left:0;top:0;width:0;height:100%;background:rgba(26,75,174,.06);transition:width .3s ease;border-radius:var(--radius-sm)}
.nav-link:hover::before{width:100%}
.nav-link:hover{color:var(--text-primary)}
.nav-link.active{background:rgba(26,75,174,.08);color:var(--accent-primary);box-shadow:inset 3px 0 0 var(--accent-primary)}
.nav-link.active::before{width:0}
.nav-link i{width:20px;height:20px;flex-shrink:0}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border-color)}
.user-info{display:flex;align-items:center;gap:12px}
.user-avatar{width:38px;height:38px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;color:#fff;box-shadow:0 2px 8px rgba(26,75,174,.15)}
.user-name{font-size:.85rem;font-weight:600;color:var(--text-primary)}
.user-role{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}

/* ═══ Main Content ═══ */
.main-content{flex:1;margin-left:280px;min-height:100vh}
.top-bar{border-bottom:1px solid var(--border-color);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);background:rgba(245,247,250,.85)}
.top-bar h1{font-size:1.25rem;font-weight:700}
.page-content{padding:32px}

/* ═══ Cards ═══ */
.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:var(--transition)}
.card:hover{border-color:rgba(26,75,174,.2)}
.card-header{padding:20px 24px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:1rem;font-weight:600}
.card-body{padding:24px}

/* ═══ Stat Cards ═══ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:32px}
.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;display:flex;align-items:flex-start;gap:16px;transition:var(--transition);position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;filter:blur(40px);opacity:.08;transition:opacity .3s ease}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-glow);border-color:rgba(26,75,174,.2)}
.stat-card:hover::after{opacity:.15}
.stat-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition)}
.stat-card:hover .stat-icon{transform:scale(1.08)}
.stat-icon.blue{background:rgba(26,75,174,.1);color:var(--accent-primary)}
.stat-icon.blue+div~::after,.stat-card:nth-child(3)::after{background:var(--accent-primary)}
.stat-icon.green{background:rgba(22,163,74,.1);color:var(--accent-success)}
.stat-icon.purple{background:rgba(26,75,174,.1);color:var(--accent-primary)}
.stat-icon.orange{background:rgba(245,158,11,.1);color:var(--accent-warning)}
.stat-value{font-size:1.75rem;font-weight:800;line-height:1;margin-bottom:4px}
.stat-label{font-size:.8rem;color:var(--text-secondary)}

/* ═══ Tables ═══ */
.table-wrapper{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:12px 16px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border-color)}
td{padding:14px 16px;font-size:.875rem;border-bottom:1px solid var(--border-color)}
tr{transition:var(--transition-fast)}
tr:hover td{background:rgba(26,75,174,.03)}

/* ═══ Badges ═══ */
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.badge-success{background:rgba(22,163,74,.08);color:var(--accent-success);border:1px solid rgba(22,163,74,.15)}
.badge-warning{background:rgba(245,158,11,.08);color:#B45309;border:1px solid rgba(245,158,11,.15)}
.badge-danger{background:rgba(220,38,38,.08);color:var(--accent-danger);border:1px solid rgba(220,38,38,.15)}
.badge-info{background:rgba(37,99,235,.08);color:var(--accent-info);border:1px solid rgba(37,99,235,.15)}
.badge-default{background:rgba(94,102,135,.08);color:var(--text-secondary);border:1px solid rgba(94,102,135,.12)}

/* ═══ Buttons ═══ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;border:none;cursor:pointer;text-decoration:none;transition:var(--transition);white-space:nowrap;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.15);transition:width .4s ease,height .4s ease;transform:translate(-50%,-50%)}
.btn:active::after{width:200px;height:200px}
.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 12px rgba(26,75,174,.2)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(26,75,174,.3)}
.btn-cta{background:var(--gradient-cta);color:#1a1a2e;box-shadow:var(--shadow-cta);font-weight:700}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(251,191,36,.35)}
.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color)}
.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--accent-primary)}
.btn-danger{background:rgba(220,38,38,.08);color:var(--accent-danger);border:1px solid rgba(220,38,38,.18)}
.btn-danger:hover{background:rgba(220,38,38,.14)}
.btn-success{background:rgba(22,163,74,.08);color:var(--accent-success);border:1px solid rgba(22,163,74,.18)}
.btn-success:hover{background:rgba(22,163,74,.14)}
.btn-warning{background:rgba(245,158,11,.08);color:#B45309;border:1px solid rgba(245,158,11,.18)}
.btn-warning:hover{background:rgba(245,158,11,.14)}
.btn-sm{padding:6px 12px;font-size:.8rem}
.btn-xs{padding:4px 8px;font-size:.7rem}

/* ═══ Forms ═══ */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.9rem;font-family:inherit;transition:var(--transition)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(26,75,174,.08)}
.form-textarea{resize:vertical;min-height:80px}
.form-hint{font-size:.75rem;color:var(--text-muted);margin-top:4px}
.form-error{font-size:.75rem;color:var(--accent-danger);margin-top:4px}

/* ═══ Alerts ═══ */
.alert{padding:14px 20px;border-radius:var(--radius-md);margin-bottom:20px;font-size:.875rem;display:flex;align-items:center;gap:10px;animation:slideIn .4s cubic-bezier(0.16,1,0.3,1)}
.alert-success{background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.15);color:var(--accent-success)}
.alert-error{background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.15);color:var(--accent-danger)}

/* ═══ Pagination ═══ */
.pagination-wrapper{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border-color);flex-wrap:wrap;gap:12px}
.pagination-info{font-size:.8rem;color:var(--text-muted)}
.pagination-info strong{color:var(--text-primary);font-weight:600}
.pagination{display:flex;align-items:center;gap:4px;list-style:none}
.page-item{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;text-decoration:none;color:var(--text-secondary);border:1px solid var(--border-color);background:transparent;transition:var(--transition);cursor:pointer;line-height:1}
.page-item:hover:not(.active):not(.disabled):not(.dots){background:rgba(26,75,174,.06);border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px)}
.page-item.active{background:var(--gradient-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 4px 12px rgba(26,75,174,.2);cursor:default}
.page-item.disabled{color:var(--text-muted);opacity:.4;cursor:not-allowed;border-color:var(--border-color)}
.page-item.dots{border:none;background:none;cursor:default;color:var(--text-muted);min-width:auto;padding:0 4px}

/* ═══ Animations ═══ */
@keyframes slideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fade-in{animation:fadeIn .5s cubic-bezier(0.16,1,0.3,1)}
.fade-up{animation:fadeUp .5s cubic-bezier(0.16,1,0.3,1) both}
.fade-up-1{animation:fadeUp .5s cubic-bezier(0.16,1,0.3,1) .05s both}
.fade-up-2{animation:fadeUp .5s cubic-bezier(0.16,1,0.3,1) .1s both}
.fade-up-3{animation:fadeUp .5s cubic-bezier(0.16,1,0.3,1) .15s both}
.fade-up-4{animation:fadeUp .5s cubic-bezier(0.16,1,0.3,1) .2s both}

/* ═══ Misc ═══ */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}
.empty-state svg{margin-bottom:16px;opacity:.4}
.empty-state h3{font-size:1.1rem;margin-bottom:8px;color:var(--text-secondary)}
.empty-state p{font-size:.85rem}
.logout-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:.85rem;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);width:100%;transition:var(--transition)}
.logout-btn:hover{background:rgba(220,38,38,.06);color:var(--accent-danger)}
.qr-container{background:#fff;padding:20px;border-radius:var(--radius-md);display:inline-block;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.qr-container svg{display:block}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.info-item label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:4px}
.info-item .value{font-size:.95rem;color:var(--text-primary);word-break:break-all}
.code-display{font-family:'Courier New',monospace;font-size:1.5rem;font-weight:700;letter-spacing:.2em;color:var(--accent-primary);background:rgba(26,75,174,.06);padding:8px 16px;border-radius:var(--radius-sm);display:inline-block;border:1px solid rgba(26,75,174,.15)}

/* ═══ Responsive ═══ */
@media(max-width:1024px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.page-content{padding:20px}}