@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--blue-950: #030B1A;--blue-900: #06142E;--blue-850: #0A1F4A;--blue-800: #0D2660;--blue-700: #153591;--blue-600: #1A3FAC;--blue-500: #2251D3;--blue-400: #4169E1;--blue-300: #6B8FF5;--blue-200: #A3B8FA;--blue-100: #D6E0FD;--blue-50: #EEF2FF;--accent-cyan: #00D4FF;--accent-gold: #FFB830;--accent-green: #22C55E;--accent-red: #EF4444;--accent-orange: #F97316;--white: #FFFFFF;--gray-100: #F1F5F9;--gray-200: #E2E8F0;--gray-300: #CBD5E1;--gray-500: #64748B;--gray-700: #334155;--sidebar-width: 260px;--sidebar-collapsed: 70px;--header-height: 64px;--border-radius: 12px;--border-radius-sm: 8px;--border-radius-lg: 16px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--shadow-sm: 0 1px 3px rgba(34, 81, 211, .12), 0 1px 2px rgba(34, 81, 211, .08);--shadow-md: 0 4px 16px rgba(34, 81, 211, .18), 0 2px 6px rgba(34, 81, 211, .1);--shadow-lg: 0 10px 40px rgba(34, 81, 211, .22);--shadow-glow: 0 0 20px rgba(34, 81, 211, .4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:var(--blue-950);color:var(--white);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{text-decoration:none;color:inherit}button{cursor:pointer;border:none;outline:none;font-family:inherit}input,select,textarea{font-family:inherit;outline:none}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--blue-900)}::-webkit-scrollbar-thumb{background:var(--blue-600);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--blue-500)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px #2251d366}50%{box-shadow:0 0 20px #2251d3cc}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.fade-in{animation:fadeIn .4s ease forwards}.slide-in{animation:slideIn .35s ease forwards}.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:linear-gradient(180deg,var(--blue-900) 0%,var(--blue-850) 60%,var(--blue-900) 100%);border-right:1px solid rgba(65,105,225,.2);display:flex;flex-direction:column;z-index:1000;overflow-y:auto;overflow-x:hidden;transition:width .3s cubic-bezier(.4,0,.2,1)}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-logo{display:flex;align-items:center;gap:12px;padding:22px 20px 20px;border-bottom:1px solid rgba(65,105,225,.18);flex-shrink:0}.sidebar-logo-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--white);box-shadow:var(--shadow-glow);animation:pulse-glow 3s ease-in-out infinite}.sidebar-logo-text{display:flex;flex-direction:column}.sidebar-logo-name{font-size:18px;font-weight:800;background:linear-gradient(90deg,var(--blue-300),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.sidebar-logo-tag{font-size:10px;font-weight:500;color:var(--blue-300);text-transform:uppercase;letter-spacing:1.2px}.sidebar-toggle-btn{margin-left:auto;background:transparent;color:var(--blue-300);font-size:24px;display:flex;align-items:center;justify-content:center;transition:color .2s}.sidebar-toggle-btn:hover{color:var(--white)}.sidebar.collapsed .sidebar-logo{padding:22px 10px 20px;justify-content:center}.sidebar.collapsed .sidebar-toggle-btn{margin-left:0;position:absolute;top:30px}.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px}.sidebar-section-label{font-size:10px;font-weight:600;color:var(--blue-300);text-transform:uppercase;letter-spacing:1.4px;padding:6px 10px 10px;opacity:.7}.sidebar-item-wrapper{display:flex;flex-direction:column}.sidebar-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--border-radius-sm);color:var(--blue-200);font-size:13.5px;font-weight:500;transition:var(--transition);background:transparent;width:100%;text-align:left;position:relative;overflow:hidden}.sidebar-item:before{content:"";position:absolute;left:0;top:0;width:0;height:100%;background:linear-gradient(90deg,var(--blue-500),transparent);transition:width .3s ease;border-radius:var(--border-radius-sm);opacity:.15}.sidebar-item:hover{color:var(--white);background:#2251d32e}.sidebar-item:hover:before{width:100%}.sidebar-item.active{background:linear-gradient(135deg,var(--blue-600),var(--blue-500));color:var(--white);box-shadow:0 4px 14px #2251d373;font-weight:600}.sidebar-item.active:before{display:none}.sidebar-item-icon{font-size:18px;display:flex;align-items:center;flex-shrink:0}.sidebar-item-label{flex:1;white-space:nowrap;opacity:1;transition:opacity .3s}.sidebar.collapsed .sidebar-item-label,.sidebar.collapsed .sidebar-section-label,.sidebar.collapsed .sidebar-arrow,.sidebar.collapsed .sidebar-submenu{display:none}.sidebar-accordion-btn{cursor:pointer}.sidebar-arrow{font-size:18px;display:flex;align-items:center;transition:transform .3s ease}.sidebar-accordion-btn.open .sidebar-arrow{transform:rotate(0)}.sidebar-submenu{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0;margin-left:14px;border-left:2px solid rgba(65,105,225,.3);padding-left:6px}.sidebar-submenu.submenu-open{max-height:300px;opacity:1}.sidebar-subitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--border-radius-sm);color:var(--blue-200);font-size:13px;font-weight:400;transition:var(--transition);margin:2px 0}.sidebar-subitem:hover{color:var(--white);background:#2251d326;padding-left:16px}.sidebar-subitem.active{color:var(--accent-cyan);background:#00d4ff14;font-weight:600}.sidebar-subitem-dot{width:5px;height:5px;border-radius:50%;background:var(--blue-400);flex-shrink:0;transition:var(--transition)}.sidebar-subitem.active .sidebar-subitem-dot{background:var(--accent-cyan);box-shadow:0 0 6px var(--accent-cyan)}.sidebar-subitem-icon{font-size:15px;display:flex;align-items:center}.sidebar-footer{padding:16px 14px;border-top:1px solid rgba(65,105,225,.18);display:flex;align-items:center;gap:10px;flex-shrink:0}.sidebar-user{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.sidebar-user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--white);flex-shrink:0;border:2px solid rgba(65,105,225,.5)}.sidebar-user-info{display:flex;flex-direction:column;min-width:0}.sidebar-user-name{font-size:13px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:10px;color:var(--blue-300);font-weight:500}.sidebar-logout-btn{width:32px;height:32px;border-radius:8px;background:#ef44441a;color:var(--accent-red);display:flex;align-items:center;justify-content:center;font-size:18px;transition:var(--transition);flex-shrink:0}.sidebar-logout-btn:hover{background:var(--accent-red);color:var(--white)}.sidebar.collapsed .sidebar-footer{justify-content:center;padding:16px 0}.sidebar.collapsed .sidebar-user{display:none}@media (max-width: 768px){.sidebar{transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}.sidebar-toggle-btn{display:none}}.admin-header{height:var(--header-height);background:var(--blue-900);border-bottom:1px solid rgba(65,105,225,.2);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px #030b1a80}.header-left-wrap{display:flex;align-items:center;gap:12px}.mobile-menu-btn{display:none;background:transparent;color:var(--white);font-size:24px;padding:4px}.header-search-wrap{display:flex;align-items:center;background:#030b1a99;border:1px solid rgba(65,105,225,.3);border-radius:var(--border-radius-lg);padding:6px 16px;width:320px;transition:var(--transition)}.header-search-wrap:focus-within{border-color:var(--blue-400);box-shadow:0 0 0 3px #4169e133;background:#030b1acc}.header-search-icon{color:var(--blue-300);font-size:18px;margin-right:8px;display:flex}.header-search{background:transparent;border:none;color:var(--white);font-size:14px;width:100%}.header-search::placeholder{color:var(--blue-300);opacity:.7}.header-right{display:flex;align-items:center;gap:16px}.header-icon-btn{width:38px;height:38px;border-radius:50%;background:#4169e11a;color:var(--blue-200);display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;transition:var(--transition)}.header-icon-btn:hover{background:#4169e133;color:var(--white)}.header-badge{position:absolute;top:-2px;right:-2px;background:var(--accent-red);color:var(--white);font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--blue-900)}.header-admin{display:flex;align-items:center;gap:12px;padding-left:16px;border-left:1px solid rgba(65,105,225,.2);cursor:pointer}.header-admin-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--white);border:2px solid rgba(65,105,225,.5)}.header-admin-info{display:flex;flex-direction:column}.header-admin-name{font-size:13.5px;font-weight:600;color:var(--white)}.header-admin-role{font-size:11px;color:var(--blue-300);font-weight:500}.header-admin-arrow{color:var(--blue-300);font-size:20px;transition:transform .3s}.header-admin-arrow.open{transform:rotate(180deg)}.header-dropdown-menu{position:absolute;top:100%;right:24px;margin-top:10px;background:var(--blue-900);border:1px solid rgba(65,105,225,.2);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-md);padding:8px;min-width:160px;z-index:1000;animation:fadeIn .2s ease}.dropdown-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 14px;background:transparent;border:none;border-radius:6px;color:var(--white);font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition);text-align:left}.dropdown-item:hover{background:#4169e11a}.dropdown-item.text-danger{color:var(--accent-red)}.dropdown-item.text-danger:hover{background:#ef44441a}.dropdown-icon{font-size:18px}@media (max-width: 768px){.admin-header{padding:0 16px}.mobile-menu-btn{display:flex}.header-search-wrap,.header-admin-info,.header-admin-arrow{display:none}.header-admin{padding-left:8px;border-left:none}}.admin-wrapper{display:flex;min-height:100vh;background:var(--blue-950)}.admin-main{flex:1;display:flex;flex-direction:column;margin-left:var(--sidebar-width);min-height:100vh;transition:var(--transition)}.admin-content{flex:1;padding:28px 32px;margin-top:var(--header-height);animation:fadeIn .4s ease}.sidebar-collapsed .admin-main{margin-left:var(--sidebar-collapsed)}.mobile-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:990}@media (max-width: 768px){.admin-main,.sidebar-collapsed .admin-main{margin-left:0}.admin-content{padding:20px 16px}}.page-header{margin-bottom:24px}.page-title{font-size:24px;font-weight:700;margin-bottom:4px;color:var(--white)}.page-subtitle{color:var(--blue-200);font-size:14px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:28px}.stat-card{background:#06142e99;border:1px solid rgba(65,105,225,.2);border-radius:var(--border-radius-lg);padding:20px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm);transition:var(--transition)}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#4169e166}.stat-icon-wrap{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--white)}.bg-cyan{background:linear-gradient(135deg,var(--accent-cyan),#0096FF)}.bg-blue{background:linear-gradient(135deg,var(--blue-400),var(--blue-600))}.bg-gold{background:linear-gradient(135deg,var(--accent-gold),#FF9900)}.stat-info{flex:1}.stat-label{font-size:13px;color:var(--blue-200);font-weight:500}.stat-value{font-size:24px;font-weight:700;margin:4px 0;color:var(--white)}.stat-trend{font-size:12px;display:flex;align-items:center;gap:4px;font-weight:500}.stat-trend.positive{color:var(--accent-green)}.dashboard-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}.card{background:var(--blue-900);border:1px solid rgba(65,105,225,.2);border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}.card-header{padding:20px 24px;border-bottom:1px solid rgba(65,105,225,.15)}.card-header h2{font-size:18px;font-weight:600;color:var(--white)}.card-header p{font-size:13px;color:var(--blue-300);margin-top:4px}.card-body{padding:24px}.demo-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:8px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-group label{font-size:13px;font-weight:500;color:var(--blue-100)}.form-group input,.form-group select{background:#030b1a80;border:1px solid rgba(65,105,225,.3);padding:10px 14px;border-radius:var(--border-radius-sm);color:var(--white);font-size:14px;transition:var(--transition)}.form-group input:focus,.form-group select:focus{border-color:var(--blue-400);box-shadow:0 0 0 3px #4169e126;background:#030b1acc}.form-group select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B8FF5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:36px}.btn{padding:10px 20px;border-radius:var(--border-radius-sm);font-size:14px;font-weight:600;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:linear-gradient(135deg,var(--blue-600),var(--blue-500));color:var(--white);box-shadow:0 4px 14px #2251d34d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2251d366}.btn-outline{background:transparent;border:1px solid var(--blue-400);color:var(--blue-100)}.btn-outline:hover{background:#4169e11a;color:var(--white)}.checkbox-group{flex-direction:row;align-items:center;gap:12px}.checkbox-group span{font-size:14px;color:var(--blue-100)}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#4169e14d;transition:.4s}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--blue-500)}input:checked+.slider:before{transform:translate(20px)}.slider.round{border-radius:24px}.slider.round:before{border-radius:50%}.color-picker{display:flex;gap:12px}.color-circle{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:var(--transition)}.color-circle.active{border-color:var(--white);transform:scale(1.1);box-shadow:0 0 10px #fff3}.custom-loader-overlay{position:absolute;top:0;left:0;width:100%;height:100%;min-height:250px;background:#030b1ab3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:50;border-radius:inherit}.loader-container{position:relative;width:120px;height:120px;display:flex;justify-content:center;align-items:center}.glowing-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:3px solid transparent}.glowing-ring:nth-child(1){border-top-color:var(--blue-400);border-left-color:var(--blue-400);animation:rotate1 1.5s linear infinite;filter:drop-shadow(0 0 10px var(--blue-500))}.glowing-ring:nth-child(2){width:80%;height:80%;border-bottom-color:var(--accent-cyan);border-right-color:var(--accent-cyan);animation:rotate2 2s linear infinite;filter:drop-shadow(0 0 10px var(--accent-cyan))}.glowing-ring:nth-child(3){width:60%;height:60%;border-top-color:var(--white);border-left-color:var(--white);animation:rotate3 1s linear infinite;filter:drop-shadow(0 0 5px rgba(255,255,255,.5))}.loader-text{position:absolute;font-size:11px;font-weight:600;color:var(--white);letter-spacing:1px;text-transform:uppercase;animation:pulse-text 1.5s ease-in-out infinite}@keyframes rotate1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotate2{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes rotate3{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-text{0%,to{opacity:.5;filter:drop-shadow(0 0 2px var(--blue-400))}50%{opacity:1;filter:drop-shadow(0 0 8px var(--accent-cyan))}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 0% 100%,#4a0082,#080f3b,#000c36);padding:20px;font-family:Inter,sans-serif;color:#fff}.login-glass-card{width:100%;max-width:850px;min-height:480px;background:#ffffff08;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}.login-left{flex:1;padding:40px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(255,255,255,.05);background:#0000001a}.login-brand h2{font-size:24px;font-weight:700;margin-bottom:60px;letter-spacing:.5px}.login-brand span{color:#ff4757}.login-welcome h1{font-size:36px;font-weight:700;margin-bottom:12px;background:linear-gradient(to right,#fff,#a3b8fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login-welcome p{color:#a3b8fa;font-size:15px}.login-right{flex:1;padding:50px 60px;display:flex;flex-direction:column;justify-content:center}.login-header{text-align:center;margin-bottom:40px}.login-header h2{font-size:24px;font-weight:600;margin-bottom:8px}.login-header p{font-size:13px;color:#a3b8fa}.login-form{display:flex;flex-direction:column;gap:30px}.login-input-group{display:flex;flex-direction:column;gap:8px}.login-input-group label{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;color:#fff}.input-icon-label{font-size:16px;color:#a3b8fa}.input-wrapper{position:relative;display:flex;align-items:center}.input-wrapper input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.3);padding:10px 0;color:#fff;font-size:14px;transition:border-color .3s}.input-wrapper input:focus{outline:none;border-bottom-color:#4169e1}.input-wrapper input::placeholder{color:#fff6}.password-toggle{position:absolute;right:0;background:none;border:none;color:#fff9;font-size:18px;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.password-toggle:hover{color:#fff}.login-submit-btn{margin-top:10px;background:#4169e1;color:#fff;border:none;padding:14px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.login-submit-btn:hover{background:#2251d3;transform:translateY(-2px);box-shadow:0 8px 20px #4169e166}@media (max-width: 768px){.login-glass-card{flex-direction:column;min-height:auto}.login-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.05);padding:30px;text-align:center}.login-brand h2{margin-bottom:20px}.login-right{padding:40px 30px}}.category-form-card{max-width:600px}