*{margin:0;padding:0;box-sizing:border-box;}
:root{--purple:#7C3AED;--purple-light:#A78BFA;--purple-dark:#5B21B6;--purple-xlight:#EDE9FE;--orange:#F97316;--orange-light:#FB923C;--orange-dark:#EA580C;--orange-xlight:#FFF7ED;--dark:#1F2937;--dark2:#111827;--dark3:#374151;--gray:#6B7280;--gray-light:#D1D5DB;--gray-xlight:#F9FAFB;--gray-50:#F3F4F6;--white:#FFFFFF;--success:#10B981;--danger:#EF4444;--warning:#F59E0B;--info:#3B82F6;--sidebar-w:260px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1);--shadow:0 4px 24px rgba(124,58,237,0.08);--shadow-lg:0 8px 40px rgba(124,58,237,0.16);--radius:12px;--radius-sm:8px;--radius-lg:20px;}
[data-theme="dark"]{--purple:#A78BFA;--purple-light:#C4B5FD;--purple-dark:#7C3AED;--purple-xlight:#1E1535;--orange:#FB923C;--orange-xlight:#1C1008;--dark:#F9FAFB;--dark2:#F3F4F6;--dark3:#E5E7EB;--gray:#9CA3AF;--gray-light:#374151;--gray-xlight:#1F2937;--gray-50:#111827;--white:#1F2937;--bg-body:#0F172A;--bg-card:#1E293B;--bg-sidebar:#111827;--border:#2D3748;}
[data-theme="light"]{--bg-body:#F8F7FF;--bg-card:#FFFFFF;--bg-sidebar:#FFFFFF;--border:#E5E7EB;}
body{font-family:'Montserrat',sans-serif;background:var(--bg-body);color:var(--dark);min-height:100vh;overflow-x:hidden;transition:var(--transition);}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--purple-light);border-radius:99px;}
.sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:var(--transition);overflow:hidden;}
.sidebar-logo{padding:20px 20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);}
.sidebar-logo img{width:36px;height:36px;object-fit:contain;}
.sidebar-logo span{font-size:16px;font-weight:800;color:var(--dark);letter-spacing:-0.3px;}
.badge-new{background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:99px;letter-spacing:0.5px;}
nav{flex:1;padding:12px 0;overflow-y:auto;}
.nav-section{padding:0 12px;margin-bottom:4px;}
.nav-section-lbl{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray);padding:8px 8px 4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);color:var(--gray);font-size:13px;font-weight:600;margin-bottom:2px;position:relative;text-decoration:none;}
.nav-item:hover{background:var(--purple-xlight);color:var(--purple);}
.nav-item.active{background:linear-gradient(135deg,var(--purple-xlight),rgba(249,115,22,0.06));color:var(--purple);}
.nav-item.active::before{content:'';position:absolute;left:0;top:20%;height:60%;width:3px;background:linear-gradient(180deg,var(--purple),var(--orange));border-radius:0 3px 3px 0;}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.sidebar-bottom{padding:12px;border-top:1px solid var(--border);}
.user-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);}
.user-card:hover{background:var(--gray-50);}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--orange));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0;}
.user-info{flex:1;min-width:0;}
.user-name{font-size:13px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-size:11px;color:var(--gray);}
.online-dot{width:8px;height:8px;background:var(--success);border-radius:50%;flex-shrink:0;}
.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{background:var(--bg-card);border-bottom:1px solid var(--border);padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;}
.topbar-left{display:flex;align-items:center;gap:12px;}
.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:8px;border:none;background:none;}
.hamburger span{width:20px;height:2px;background:var(--dark);border-radius:2px;}
.page-title{font-size:18px;font-weight:800;color:var(--dark);}
.breadcrumb{font-size:12px;color:var(--gray);}
.topbar-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--gray-50);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;transition:var(--transition);}
.icon-btn:hover{background:var(--purple-xlight);border-color:var(--purple-light);}
.content-area{padding:28px;flex:1;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
.card-hover{cursor:pointer;transition:var(--transition);}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--purple-light);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;align-items:flex-start;gap:16px;transition:var(--transition);}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.stat-icon.purple{background:var(--purple-xlight);}
.stat-icon.orange{background:var(--orange-xlight);}
.stat-icon.green{background:#F0FDF4;}
.stat-icon.blue{background:#EFF6FF;}
.stat-info{flex:1;}
.stat-label{font-size:12px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px;}
.stat-value{font-size:26px;font-weight:800;color:var(--dark);line-height:1;}
.stat-change{font-size:12px;font-weight:600;margin-top:4px;}
.stat-change.up{color:var(--success);}
.stat-change.down{color:var(--danger);}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.section-title{font-size:16px;font-weight:800;color:var(--dark);}
.section-link{font-size:13px;color:var(--purple);font-weight:600;cursor:pointer;text-decoration:none;}
.progress{height:6px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:8px;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--orange));border-radius:99px;transition:width 0.8s ease;}
.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;}
.tag-purple{background:var(--purple-xlight);color:var(--purple);}
.tag-orange{background:var(--orange-xlight);color:var(--orange-dark);}
.tag-green{background:#F0FDF4;color:#15803D;}
.tag-blue{background:#EFF6FF;color:#1D4ED8;}
.tag-gray{background:var(--gray-50);color:var(--gray);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:var(--radius-sm);font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:var(--transition);border:none;text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:#fff;width:100%;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,0.35);}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--dark);}
.btn-outline:hover{border-color:var(--purple);color:var(--purple);}
.btn-sm{padding:8px 16px;font-size:13px;}
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--dark);margin-bottom:7px;}
.form-input{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:'Montserrat',sans-serif;font-size:14px;background:var(--bg-card);color:var(--dark);transition:var(--transition);outline:none;}
.form-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,0.12);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;margin-bottom:16px;}
.alert-error{background:#FEF2F2;color:#DC2626;border-left:3px solid #DC2626;}
.alert-success{background:#F0FDF4;color:#16A34A;border-left:3px solid #16A34A;}
.password-wrap{position:relative;}
.eye-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray);font-size:16px;}
.checkbox-wrap{display:flex;align-items:flex-start;gap:10px;margin-top:4px;}
.checkbox-wrap input[type="checkbox"]{width:16px;height:16px;accent-color:var(--purple);margin-top:2px;}
.checkbox-wrap label{font-size:12px;color:var(--gray);line-height:1.5;}
.auth-container{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;width:100%;max-width:1200px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.auth-left{background:linear-gradient(135deg,#7C3AED 0%,#5B21B6 50%,#F97316 100%);padding:60px 50px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.auth-left::before{content:'';position:absolute;width:400px;height:400px;background:rgba(255,255,255,0.05);border-radius:50%;top:-100px;right:-150px;}
.auth-left-content{position:relative;z-index:1;}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:40px;}
.auth-logo span{color:#fff;font-size:20px;font-weight:800;}
.auth-headline{color:#fff;font-size:36px;font-weight:800;line-height:1.2;margin-bottom:16px;}
.auth-headline span{color:#FDBA74;}
.auth-sub{color:rgba(255,255,255,0.75);font-size:15px;line-height:1.7;}
.auth-features{margin-top:40px;display:flex;flex-direction:column;gap:16px;}
.auth-feat{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.9);font-size:14px;}
.auth-feat-icon{width:36px;height:36px;background:rgba(255,255,255,0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.auth-stats{display:flex;gap:24px;position:relative;z-index:1;}
.auth-stat-item{text-align:center;}
.auth-stat-num{color:#fff;font-size:26px;font-weight:800;}
.auth-stat-lbl{color:rgba(255,255,255,0.65);font-size:12px;margin-top:2px;}
.auth-right{background:var(--bg-card);padding:60px 50px;display:flex;align-items:center;justify-content:center;}
.auth-form-wrap{width:100%;max-width:420px;}
.auth-title{font-size:28px;font-weight:800;color:var(--dark);margin-bottom:6px;}
.auth-subtitle{color:var(--gray);font-size:14px;margin-bottom:32px;}
.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--gray);}
.auth-switch a{color:var(--purple);font-weight:700;text-decoration:none;}
.welcome-nav{padding:20px 60px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:10;background:rgba(248,247,255,0.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(124,58,237,0.1);}
[data-theme="dark"] .welcome-nav{background:rgba(15,23,42,0.9);}
.welcome-logo{display:flex;align-items:center;gap:10px;}
.welcome-logo span{font-size:18px;font-weight:800;color:var(--dark);}
.welcome-nav-links{display:flex;align-items:center;gap:8px;}
.welcome-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 40px 80px;position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(124,58,237,0.08) 0%,transparent 60%),radial-gradient(ellipse at 70% 60%,rgba(249,115,22,0.06) 0%,transparent 60%);pointer-events:none;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--purple-xlight);color:var(--purple);border:1px solid rgba(124,58,237,0.2);border-radius:99px;padding:8px 20px;font-size:13px;font-weight:700;margin-bottom:24px;}
.hero-title{font-size:64px;font-weight:900;line-height:1.05;color:var(--dark);margin-bottom:20px;}
.hero-title .grad{background:linear-gradient(135deg,var(--purple),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:18px;color:var(--gray);max-width:560px;line-height:1.7;margin-bottom:36px;}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero-stats{display:flex;gap:40px;margin-top:56px;}
.hero-stat{text-align:center;}
.hero-stat-num{font-size:32px;font-weight:900;background:linear-gradient(135deg,var(--purple),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-stat-lbl{font-size:13px;color:var(--gray);font-weight:600;}
.floating-cards{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;}
.float-card{position:absolute;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;font-size:12px;font-weight:600;color:var(--dark);box-shadow:var(--shadow);animation:float 6s ease-in-out infinite;}
.float-card:nth-child(1){top:15%;left:5%;animation-delay:0s;}
.float-card:nth-child(2){top:25%;right:5%;animation-delay:-2s;}
.float-card:nth-child(3){bottom:25%;left:8%;animation-delay:-4s;}
.float-card:nth-child(4){bottom:20%;right:8%;animation-delay:-1s;}
.features-section{padding:80px 60px;background:var(--bg-card);}
.features-title{text-align:center;font-size:40px;font-weight:800;color:var(--dark);margin-bottom:12px;}
.features-sub{text-align:center;color:var(--gray);font-size:16px;max-width:520px;margin:0 auto 48px;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:0 auto;}
.feature-card{background:var(--bg-body);border:1px solid var(--border);border-radius:var(--radius);padding:28px;text-align:center;transition:var(--transition);}
.feature-card:hover{border-color:var(--purple-light);transform:translateY(-4px);box-shadow:var(--shadow);}
.feature-emoji{font-size:36px;margin-bottom:16px;display:block;}
.feature-name{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:8px;}
.feature-desc{font-size:13px;color:var(--gray);line-height:1.6;}
.welcome-footer{background:var(--dark2);color:rgba(255,255,255,0.6);text-align:center;padding:24px;font-size:13px;}
.chart-bars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:12px;}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.chart-bar{width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--purple),var(--purple-dark));transition:height 0.6s ease;}
.chart-bar-lbl{font-size:10px;color:var(--gray);font-weight:600;}
.chart-bar-val{font-size:11px;color:var(--dark);font-weight:700;}
.post-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;transition:var(--transition);}
.post-card:hover{border-color:var(--purple-light);}
.post-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.post-author{flex:1;}
.post-name{font-size:14px;font-weight:700;color:var(--dark);}
.post-time{font-size:12px;color:var(--gray);}
.post-content{font-size:14px;color:var(--dark3);line-height:1.7;margin-bottom:14px;}
.post-actions{display:flex;gap:16px;}
.post-action{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray);cursor:pointer;font-weight:600;transition:var(--transition);}
.post-action:hover{color:var(--purple);}
.post-input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:'Montserrat',sans-serif;font-size:13px;background:var(--bg-card);color:var(--dark);resize:none;outline:none;min-height:80px;}
.post-input:focus{border-color:var(--purple);}
.course-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:var(--transition);}
.course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.course-thumb{height:160px;display:flex;align-items:center;justify-content:center;font-size:48px;position:relative;}
.course-thumb .duration{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,0.6);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;}
.course-body{padding:16px;}
.course-level{font-size:11px;font-weight:700;color:var(--purple);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.8px;}
.course-title{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:8px;line-height:1.4;}
.course-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--gray);}
.stars{color:#F59E0B;font-size:12px;}
.resource-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:var(--transition);}
.resource-card:hover{border-color:var(--purple-light);transform:translateX(4px);}
.resource-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.resource-info{flex:1;}
.resource-name{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:4px;}
.resource-meta{font-size:12px;color:var(--gray);}
.resource-action{color:var(--purple);font-size:14px;}
.ticket-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px;cursor:pointer;transition:var(--transition);}
.ticket-card:hover{border-color:var(--purple-light);}
.ticket-id{font-size:11px;font-weight:700;color:var(--gray);margin-bottom:6px;}
.ticket-title{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:8px;}
.ticket-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.profile-hero{background:linear-gradient(135deg,var(--purple),var(--purple-dark),var(--orange));border-radius:var(--radius-lg);padding:40px;color:#fff;position:relative;overflow:hidden;}
.profile-avatar-wrap{position:relative;display:inline-block;margin-bottom:16px;}
.profile-avatar{width:80px;height:80px;border-radius:50%;border:4px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--purple);}
.profile-name{font-size:24px;font-weight:800;margin-bottom:4px;}
.profile-bio{font-size:14px;opacity:0.85;margin-bottom:16px;}
.profile-stats{display:flex;gap:24px;}
.profile-stat{text-align:center;}
.profile-stat-num{font-size:22px;font-weight:800;}
.profile-stat-lbl{font-size:11px;opacity:0.75;}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{padding:12px 14px;text-align:left;font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:0.8px;border-bottom:1px solid var(--border);}
.admin-table td{padding:14px;font-size:13px;color:var(--dark);border-bottom:1px solid var(--border);}
.admin-table tr:hover td{background:var(--gray-50);}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;font-size:13px;font-weight:600;color:var(--dark);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;min-width:280px;border-left:3px solid var(--purple);position:fixed;bottom:24px;right:24px;z-index:9999;}
.toast.success{border-left-color:var(--success);}
.toast.error{border-left-color:var(--danger);}
.theme-toggle{width:38px;height:20px;background:var(--border);border-radius:99px;position:relative;cursor:pointer;transition:var(--transition);}
.theme-toggle.dark{background:var(--purple);}
.theme-toggle-thumb{width:14px;height:14px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:var(--transition);}
.theme-toggle.dark .theme-toggle-thumb{transform:translateX(18px);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;}
.sidebar-overlay.open{display:block;}
@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-12px);}}
@media(max-width:768px){:root{--sidebar-w:0px;}.sidebar{transform:translateX(-260px);width:260px;}.sidebar.open{transform:translateX(0);}.main-content{margin-left:0;}.hamburger{display:flex;}.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}.grid-4{grid-template-columns:1fr 1fr;}.auth-container{grid-template-columns:1fr;}.auth-left{display:none;}.auth-right{padding:40px 30px;}}
@media(max-width:480px){.content-area{padding:16px;}.grid-4{grid-template-columns:1fr;}.form-row{grid-template-columns:1fr;}}