:root{--primary-color:#002c1c;--primary-color-dark:#001a10;--primary-color-light:#0d4a32;--primary-rgb:0,44,28;--primary-50:rgba(var(--primary-rgb),0.05);--primary-100:rgba(var(--primary-rgb),0.1);--primary-200:rgba(var(--primary-rgb),0.2);--primary-400:#1a5c40;--primary-600:#003d28;--primary-700:#001a10;--primary-800:#001510;--avatar-1-bg:#d1fae5;--avatar-1-fg:#065f46;--avatar-2-bg:#dbeafe;--avatar-2-fg:#1e40af;--avatar-3-bg:#ffedd5;--avatar-3-fg:#c2410c;--avatar-4-bg:#fce7f3;--avatar-4-fg:#9d174d;--avatar-5-bg:#e0e7ff;--avatar-5-fg:#3730a3;--avatar-6-bg:#ccfbf1;--avatar-6-fg:#0f766e;--avatar-7-bg:#fef3c7;--avatar-7-fg:#b45309;--avatar-8-bg:#ede9fe;--avatar-8-fg:#5b21b6;--surface:#f7f8fa;--surface-elevated:#fff;--surface-muted:#eef0f3;--border:#e2e6eb;--border-strong:#cdd3db;--text-primary:#111827;--text-secondary:#4b5563;--text-muted:#6b7280;--text-inverse:#fff;--success:#059669;--warning:#d97706;--danger:#dc2626;--info:#0284c7;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-2xl:24px;--radius-full:9999px;--shadow-sm:0 1px 2px #1118270f;--shadow-md:0 4px 12px #11182714;--shadow-lg:0 12px 32px #1118271f;--shadow-xl:0 20px 48px #11182729;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:0.9375rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--sidebar-width:260px;--sidebar-collapsed-width:72px;--header-height:64px;--content-max-width:1400px;--login-card-width:420px;--transition-fast:150ms ease;--transition-base:250ms cubic-bezier(0.4,0,0.2,1);color-scheme:light}*{margin:0;padding:0}html{background-color:#002c1c}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--surface);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6}.loading-container{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #f3f3f3;border-radius:50%;border-top:4px solid var(--primary-color);height:40px;margin-bottom:20px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-container{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;display:flex;flex-direction:column;justify-content:center;margin:20px;padding:60px 20px;text-align:center}.error-container h2{color:#dc3545;margin-bottom:20px}.dashboard-header{margin-bottom:30px}.welcome-section h1{color:var(--primary-color);font-size:2.5em;font-weight:600;margin-bottom:20px}.welcome-card{align-items:center;background:linear-gradient(135deg,#002c1c,#002c1c);background:linear-gradient(135deg,var(--primary-color,#002c1c) 0,var(--primary-color,#002c1c) 100%);border:1px solid #ffffff1a;border-radius:20px;box-shadow:0 12px 40px #00000026;color:#fff;display:flex;gap:24px;overflow:hidden;padding:32px;position:relative}.welcome-card:before{background:radial-gradient(circle,#ffffff1a 0,#0000 70%);content:"";height:100%;pointer-events:none;position:absolute;right:-50%;top:-50%;width:100%}.user-avatar-large{align-items:center;background:#fff3;border:3px solid #ffffff4d;border-radius:50%;color:#fff;display:flex;font-size:2em;font-weight:700;height:80px;justify-content:center;width:80px}.welcome-content h2{font-size:1.8em;font-weight:600;margin:0 0 10px}.user-role{margin:10px 0}.role-badge{background:#fff3;border:1px solid #ffffff4d;border-radius:20px;font-size:.9em;font-weight:500;padding:6px 12px}.role-badge.admin{background:#ffc10733;border-color:#ffc10780}.last-login{font-size:.9em;margin:10px 0 0;opacity:.9}.stats-section{margin-bottom:40px}.stats-grid{grid-gap:12px;display:grid;gap:12px;margin-bottom:30px}.stats-grid.admin-layout,.stats-grid.student-layout{grid-template-columns:repeat(4,1fr)}@media (max-width:1200px){.stats-grid.admin-layout,.stats-grid.student-layout{grid-template-columns:repeat(4,1fr)}}@media (max-width:768px){.stats-grid.admin-layout,.stats-grid.student-layout{gap:16px;grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.stats-grid.admin-layout,.stats-grid.student-layout{gap:12px;grid-template-columns:repeat(2,1fr)}}@media (max-width:360px){.stats-grid.admin-layout,.stats-grid.student-layout{gap:10px;grid-template-columns:1fr}}.stat-card{align-items:center;background:#fff;border:1px solid #0000000d;border-radius:clamp(8px,2vw,12px);box-shadow:0 4px 20px #00000014;display:flex;flex:1 1;gap:clamp(12px,2.5vw,16px);min-height:80px;min-width:0;overflow:hidden;padding:clamp(16px,3vw,20px);position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}@media (max-width:1024px){.welcome-card{gap:20px;padding:28px}.user-avatar-large{height:70px;width:70px}.welcome-section h1{font-size:2.2em}}@media (max-width:768px){.stat-card{gap:8px;padding:12px}.stat-icon,.stat-number{font-size:1.5em!important}.stat-content h3{font-size:.8em!important}.stat-details{font-size:.7em!important}.welcome-card{flex-direction:column;gap:16px;padding:24px;text-align:center}.user-avatar-large{height:60px;width:60px}.welcome-section h1{font-size:2em}.courses-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.course-card-modern{min-height:180px}.course-thumbnail{height:80px}.course-content{padding:14px}.course-title{font-size:.9em}.course-description{font-size:.75em}}@media (max-width:480px){.courses-grid{gap:12px;grid-template-columns:1fr;padding:0 8px}.course-card-modern{border-radius:12px;min-height:160px}.course-thumbnail{height:70px}.course-content{padding:12px}.course-title{font-size:.85em;margin-bottom:6px}.course-description,.course-meta{font-size:.7em;margin-bottom:8px}.course-meta{padding-top:6px}.course-actions{gap:6px}.btn-sm{font-size:.8em;min-height:32px;padding:6px 10px}}@media (max-width:360px){.courses-grid{gap:8px;padding:0 4px}.course-card-modern{border-radius:10px;min-height:140px}.course-thumbnail{height:60px}.course-placeholder{font-size:2em}.course-content{padding:10px}.course-title{font-size:.8em;margin-bottom:4px}.course-description,.course-meta{font-size:.65em;margin-bottom:6px}.course-meta{padding-top:4px}.btn-sm{font-size:.75em;min-height:28px;padding:5px 8px}}.stat-card:before{background:linear-gradient(90deg,#0000,var(--primary-color),#0000);height:2px;opacity:0;transition:opacity .3s ease}.stat-card:hover{box-shadow:0 8px 30px #00000026}.stat-card:hover:before{opacity:1}.stat-card.users{border-left-color:#007bff}.stat-card.courses{border-left-color:#28a745}.stat-card.enrollments{border-left-color:#ffc107}.stat-card.certificates{border-left-color:#dc3545}.stat-card.available{border-left-color:#17a2b8}.stat-card.enrolled{border-left-color:#28a745}.stat-card.completed{border-left-color:#ffc107}.stat-icon{align-items:center;display:flex;flex-shrink:0;font-size:2.2em;height:48px;justify-content:center;opacity:.8;width:48px}.stat-content{flex:1 1;min-width:0}.stat-content h3{color:#666;font-size:.85em;font-weight:500;letter-spacing:.5px;margin:0 0 8px;text-transform:uppercase}.stat-number{color:#333;font-size:2em;font-weight:700;line-height:1;margin-bottom:6px}.stat-details{color:#888;display:flex;flex-direction:column;font-size:.75em;gap:2px;line-height:1.2}.stat-details span{display:block}.quick-actions-section{margin-bottom:40px}.quick-actions-section h3{color:#333;font-size:1.4em;margin-bottom:20px}.quick-actions-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.quick-action-btn{align-items:center;background:linear-gradient(145deg,#fff,#f8f9fa);border:1px solid #00000014;border-radius:16px;cursor:pointer;display:flex;gap:16px;overflow:hidden;padding:24px;position:relative;text-align:left;transition:all .4s cubic-bezier(.4,0,.2,1)}.quick-action-btn:before{background:linear-gradient(135deg,#002c1c05,#002c1c0a);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.quick-action-btn:hover{background:linear-gradient(145deg,#f8f9fa,#e9ecef);border-color:var(--primary-color);box-shadow:0 8px 25px #0000001f;transform:translateY(-3px)}.quick-action-btn:hover:before{opacity:1}.action-icon{font-size:1.5em}.action-title{color:#333;font-weight:500}.recent-courses-section{margin-bottom:40px}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:25px}.section-header h3{color:#333;font-size:1.4em;margin:0}.btn-outline{background:#0000;border:2px solid #fff;color:#fff}.btn-outline:hover{background:#fff;color:var(--primary-color)}.courses-grid{grid-gap:clamp(20px,4vw,24px);display:grid;gap:clamp(20px,4vw,24px);grid-template-columns:repeat(auto-fill,minmax(280px,320px));justify-content:start;padding:0}.course-card-modern{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffffa;border:1px solid #0000000f;border-radius:16px;box-shadow:0 6px 24px #00000014;display:flex;flex-direction:column;height:auto;min-height:200px;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);width:100%}.course-card-modern:before{background:linear-gradient(90deg,#002c1c,#10b981);background:linear-gradient(90deg,var(--primary-color,#002c1c),var(--primary-color-light,#10b981));content:"";height:4px;left:0;position:absolute;right:0;top:0;z-index:1}.course-card-modern:hover{border-color:#002c1c33;border-color:rgba(var(--primary-color-rgb,0,44,28),.2);box-shadow:0 16px 48px #00000026;transform:translateY(-8px)}.course-thumbnail{align-items:center;background:linear-gradient(135deg,#002c1c,#10b981);background:linear-gradient(135deg,var(--primary-color,#002c1c) 0,var(--primary-color-light,#10b981) 100%);display:flex;flex-shrink:0;height:88px;justify-content:center;min-height:88px;overflow:hidden;position:relative}.course-thumbnail:after{background:linear-gradient(45deg,#ffffff1a,#0000 50%,#ffffff0d);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.course-thumbnail img{height:100%;object-fit:cover;width:100%}.course-placeholder{color:#fff;font-size:2.5em;opacity:.8}.course-content{display:flex;flex:1 1;flex-direction:column;justify-content:space-between;padding:16px}.course-title{color:#1a202c;font-size:1em;font-weight:700;letter-spacing:-.025em;margin:0 0 8px}.course-description,.course-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;line-height:1.4;overflow:hidden}.course-description{color:#64748b;flex:1 1;font-size:.8em;margin-bottom:12px}.course-meta{align-items:center;border-top:1px solid #f1f5f9;display:flex;font-size:.75em;justify-content:space-between;margin-bottom:12px;padding-top:8px}.course-date{color:#64748b;font-weight:500}.course-completed{background:#dbeafe;border-radius:12px;color:#1e40af;font-size:.7em;font-weight:600;letter-spacing:.5px;padding:4px 8px;text-transform:uppercase}.course-actions{display:flex;flex-wrap:wrap;gap:8px}.course-actions .btn{color:#fff!important;flex:1 1;font-weight:500;min-width:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.btn-sm{align-items:center;display:flex;font-size:.9em;font-weight:600;justify-content:center;min-height:36px;padding:8px 14px}.course-actions .btn-primary{background:#007bff;border:1px solid #007bff;color:#fff!important}.course-actions .btn-primary:hover{background:#0056b3;border:1px solid #0056b3;color:#fff!important}.course-actions .btn-success{background:#28a745;border:1px solid #28a745;color:#fff!important}.course-actions .btn-success:hover{background:#1e7e34;border:1px solid #1e7e34;color:#fff!important}.dashboard-card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);margin-bottom:var(--space-6);padding:var(--space-6)}.dashboard-card h3,.dashboard-card__title{align-items:center;color:var(--text-primary);display:flex;font-size:var(--text-lg);font-weight:600;gap:var(--space-2);margin:0 0 var(--space-5) 0}.empty-state{background:#fffffff2;border:1px solid #0000000d;border-radius:16px;box-shadow:0 4px 20px #0000000d;padding:60px 20px;text-align:center}.empty-icon{font-size:4em;margin-bottom:20px;opacity:.3}.empty-state h4{color:#666;font-size:1.3em;margin-bottom:10px}.empty-state p{color:#888;font-size:1em;margin-bottom:25px}@media (min-width:1200px){.container{max-width:1400px;padding:30px}.stats-grid{grid-template-columns:repeat(4,1fr)}.courses-grid,.quick-actions-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:992px) and (max-width:1199px){.container{max-width:1140px;padding:25px}.stats-grid{grid-template-columns:repeat(3,1fr)}.courses-grid,.quick-actions-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px) and (max-width:991px){.container{max-width:960px;padding:20px}.welcome-card{gap:15px;padding:20px}.courses-grid,.quick-actions-grid,.stats-grid{gap:15px;grid-template-columns:repeat(2,1fr)}.section-header{align-items:center;flex-direction:row;justify-content:space-between}}@media (max-width:767px){.container{padding:15px}.welcome-card{flex-direction:column;gap:15px;padding:20px;text-align:center}.user-avatar-large{font-size:1.5em;height:60px;width:60px}.welcome-content h2{font-size:1.4em}.courses-grid,.quick-actions-grid,.stats-grid{gap:12px;grid-template-columns:1fr}.section-header{align-items:stretch;flex-direction:column;gap:15px}.dashboard-card{padding:20px}.btn{font-size:14px;justify-content:center;padding:12px 20px;width:100%}}@media (max-width:480px){.container{padding:12px}.welcome-card{gap:12px;padding:16px}.welcome-section h1{font-size:1.8em}.welcome-content h2{font-size:1.2em}.dashboard-card{padding:16px}.dashboard-card h3{font-size:1.2em}.btn{font-size:14px;min-height:44px;padding:12px 16px}.modern-btn{font-size:13px!important;min-height:44px!important;padding:12px 16px!important}.stat-card{flex-direction:column;gap:8px;min-height:100px;padding:16px 12px;text-align:center}}@media (max-width:360px){.container{padding:8px}.welcome-card{gap:8px;padding:12px}.welcome-section h1{font-size:1.6em}.welcome-content h2{font-size:1.1em}.dashboard-card{padding:12px}.btn{font-size:13px;min-height:44px;padding:12px 14px}.modern-btn{font-size:12px!important;min-height:44px!important;padding:12px 14px!important}.stat-card{flex-direction:column;gap:6px;min-height:90px;padding:14px 10px;text-align:center}}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{margin:0 auto;max-width:1200px;padding:20px}.card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #fff3;border-radius:12px;box-shadow:0 4px 20px #00000014;margin-bottom:20px;padding:24px;transition:all .3s ease}.card:hover{box-shadow:0 8px 30px #0000001f;transform:translateY(-2px)}.btn{background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-color) 100%);border:none;border-radius:8px;box-shadow:0 2px 8px rgba(var(--primary-color-rgb),.3);color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:hover{box-shadow:0 4px 15px #007bff66;transform:translateY(-1px)}.btn:disabled{background:#6c757d;box-shadow:none;cursor:not-allowed;transform:none}.modern-btn{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-color) 100%)!important;border:none!important;border-radius:12px!important;box-shadow:0 4px 12px #002c1c4d!important;color:#fff!important;cursor:pointer!important;font-size:13px!important;font-weight:600!important;overflow:hidden!important;padding:8px 16px!important;position:relative!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}.modern-btn:hover{box-shadow:0 8px 20px #002c1c66!important;filter:brightness(.9)!important;transform:translateY(-2px)!important}.modern-btn:active{box-shadow:0 4px 12px #002c1c4d!important;transform:translateY(0)!important}.modern-btn:disabled{background:#6c757db3!important;box-shadow:none!important;cursor:not-allowed!important;filter:none!important;transform:none!important}.modern-input{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffffe6;border:1px solid #e5e7ebcc;border-radius:12px;font-size:12px;padding:8px 12px;transition:all .3s ease;width:100%}.modern-input:focus{background:#fff;border-color:#007bffcc;box-shadow:0 0 0 2px #007bff1a;outline:none}.form-group label{color:#374151;font-size:14px}.form-group input{background:#fffc;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;padding:12px 16px;transition:all .3s ease;width:100%}.form-group input:focus{background:#fff;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(var(--primary-color-rgb),.1);outline:none}.alert{border-radius:4px;margin-bottom:15px;padding:10px}.alert-error{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.alert-success{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724}.navbar{background-color:#343a40;color:#fff;margin-bottom:20px;padding:1rem 0}.navbar .container{align-items:center;display:flex;justify-content:space-between}.navbar h1{margin:0}.navbar .nav-links{align-items:center;display:flex;gap:20px}.navbar .nav-links a{border-radius:4px;color:#fff;padding:5px 10px;text-decoration:none;transition:background-color .3s}.navbar .nav-links a:hover{background-color:#ffffff1a}.loading{padding:20px;text-align:center}.course-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:20px}@media (max-width:1200px){.course-grid{gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (max-width:768px){.course-grid{gap:15px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}@media (max-width:480px){.course-grid{gap:15px;grid-template-columns:1fr}.welcome-card{gap:12px;padding:20px}.user-avatar-large{height:50px;width:50px}.welcome-section h1{font-size:1.8em}}@media (max-width:320px){body{font-size:13px}.container{padding:10px}.welcome-card{gap:10px;padding:16px}.welcome-section h1{font-size:1.5em}.stat-card{gap:6px;padding:10px}.btn{font-size:.8rem;padding:8px 12px}}.course-card{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden;transition:transform .3s}.course-card:hover{transform:translateY(-5px)}.course-image-container{background:#f8f9fa;height:200px;overflow:hidden;position:relative;width:100%}.course-card img{display:block;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease;width:100%}.course-card:hover img{transform:scale(1.05)}@media (max-width:1024px){.course-image-container{height:190px}}@media (max-width:768px){.course-image-container{height:180px}}@media (max-width:480px){.course-image-container{height:160px}}.course-card-content{padding:20px}.course-card h3{color:#333;margin-bottom:10px}.course-card p{color:#666;margin-bottom:15px}.login-btn{border-color:var(--primary-color)!important;box-shadow:0 2px 8px rgba(var(--primary-color-rgb),.3)!important}.login-btn,.login-btn:hover{background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-color) 100%)!important}.login-btn:hover{box-shadow:0 4px 15px rgba(var(--primary-color-rgb),.4)!important;transform:translateY(-1px)}.settings-form{display:flex;flex-direction:column;gap:20px}.settings-form input[type=color],.settings-form input[type=email],.settings-form input[type=number],.settings-form input[type=password],.settings-form input[type=text]{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffffe6;border:2px solid #e5e7eb;border-radius:10px;font-family:Inter,sans-serif;font-size:14px;padding:14px 16px;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.settings-form input[type=email]:focus,.settings-form input[type=number]:focus,.settings-form input[type=password]:focus,.settings-form input[type=text]:focus{background:#fff;border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(var(--primary-color-rgb),.1);outline:none;transform:translateY(-1px)}.settings-form input[type=email]:hover,.settings-form input[type=number]:hover,.settings-form input[type=password]:hover,.settings-form input[type=text]:hover{background:#fff;border-color:#d1d5db}.settings-form label{color:#374151;display:block;font-size:14px;font-weight:600;margin-bottom:8px}.settings-form .form-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin-bottom:20px}.settings-form .form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.settings-form .btn{border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;overflow:hidden;padding:12px 24px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.settings-form .btn:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.settings-form .btn:hover:before{left:100%}.settings-form .btn:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-2px)}.settings-form .btn:active{transform:translateY(0)}.color-picker-container{align-items:center;display:flex;gap:12px;margin-top:8px}.color-picker-container input[type=color]{background:none;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;height:50px;padding:0;transition:all .3s ease;width:60px}.color-picker-container input[type=color]:hover{border-color:var(--primary-color);transform:scale(1.05)}.color-picker-container input[type=text]{flex:1 1}.settings-form input[type=checkbox]{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid #e5e7eb;border-radius:6px;cursor:pointer;height:20px;position:relative;transition:all .3s ease;width:20px}.settings-form input[type=checkbox]:checked{background:var(--primary-color);border-color:var(--primary-color)}.settings-form .checkbox-label{align-items:center;cursor:pointer;display:flex;gap:12px;padding:8px 0}.stat-card:before{background:linear-gradient(90deg,var(--primary-color),#28a745,#ffc107,#dc3545);content:"";height:4px;left:0;position:absolute;right:0;top:0}.stat-card:hover{border-color:var(--primary-color);box-shadow:0 12px 30px #0000001a;transform:translateY(-4px)}.stat-card h4{font-size:28px;font-weight:700;margin:0 0 8px}.stat-card small{font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.modern-input,.modern-input textarea{background:linear-gradient(145deg,#fff,#f8f9fa);border:2px solid #e1e5e9;border-radius:10px;box-shadow:0 2px 4px #00000005;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;min-height:44px;padding:12px 16px;resize:vertical;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}textarea.modern-input{min-height:100px;resize:vertical}.modal-overlay,.ui-modal-overlay{align-items:center;background:#00000073;display:flex;inset:0;justify-content:center;padding:var(--space-4);position:fixed;z-index:1000}.modal-content,.ui-modal{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-height:90vh;max-width:500px;overflow-y:auto;width:100%}.modal-content.large-modal,.ui-modal--lg{max-width:800px}.ui-modal--sm{max-width:420px}.modal-header,.ui-modal__header{align-items:center;border-bottom:1px solid var(--border);display:flex;gap:var(--space-3);justify-content:space-between;padding:var(--space-5) var(--space-6)}.modal-header h2,.ui-modal__title{color:var(--text-primary);font-size:var(--text-lg);font-weight:600;margin:0}.modal-header-actions,.ui-modal__header-actions{align-items:center;display:flex;gap:var(--space-2)}.close-btn,.ui-modal__close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:flex;height:40px;justify-content:center;padding:var(--space-2);transition:background var(--transition-fast),color var(--transition-fast);width:40px}.close-btn:hover,.ui-modal__close:hover{background:var(--surface-muted);color:var(--danger)}.modal-content form{padding:var(--space-6)}.modal-body,.ui-modal__body{color:var(--text-secondary);line-height:1.6;padding:var(--space-6)}.modal-footer,.ui-modal__footer{background:#f8f9fa;border-radius:0 0 12px 12px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-end;padding:var(--space-5) var(--space-6)}.form-group{margin-bottom:20px}.form-group label{color:#2c3e50;display:block;font-weight:600;margin-bottom:8px}.form-control,.form-group input,.form-group textarea{border:2px solid #e1e5e9;border-radius:8px;font-size:14px;padding:12px 16px;transition:border-color .3s ease;width:100%}.form-control,.form-group select{background:#fff;cursor:pointer}.form-control:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #3498db1a;outline:none}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#5a6268}.modules-list{max-height:60vh;overflow-y:auto;padding:24px}.module-item{background:#f8f9fa;border-left:4px solid var(--primary-color);border-radius:8px;margin-bottom:16px;padding:16px}.module-item h4{color:#2c3e50;margin:0 0 8px}.module-item p{color:#6c757d;margin:0 0 12px}.module-stats{display:flex;gap:16px;margin-bottom:12px}.module-stats span{background:#fff;border-radius:4px;color:#6c757d;font-size:12px;padding:4px 8px}.lessons-list{margin-top:12px}.lessons-list h5{color:#2c3e50;font-size:14px;margin:0 0 8px}.lesson-item{align-items:center;background:#fff;border-radius:4px;display:flex;font-size:13px;justify-content:space-between;margin-bottom:4px;padding:8px 12px}.lesson-type{background:#e9ecef;border-radius:3px;color:#6c757d;font-size:11px;padding:2px 6px}.lesson-duration{color:#28a745;font-weight:500}.enrollments-list{padding:24px}.table-container{overflow-x:auto}.enrollments-table{background:#fff;border-collapse:collapse;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden;width:100%}.enrollments-table td,.enrollments-table th{border-bottom:1px solid #e1e5e9;padding:12px 16px;text-align:left}.enrollments-table th{background:#f8f9fa;color:#2c3e50;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.enrollments-table tr:hover{background:#f8f9fa}.btn-sm{border-radius:4px;font-size:.75em;padding:4px 8px}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover{background:#c82333}.course-header-top{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.course-header-top h2{flex:1 1;margin:0}.close-btn{align-items:center;background:none;border:none;border-radius:4px;color:#6c757d;cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;line-height:1;padding:4px 8px;transition:all .2s ease;width:32px}.close-btn:hover{background:#f8f9fa;color:#dc3545;transform:scale(1.1)}.close-btn:active{transform:scale(.95)}:root{--breakpoint-xs:360px;--breakpoint-sm:480px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--breakpoint-xxl:1400px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:16px}img{display:block;height:auto;max-width:100%}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}table{border-collapse:collapse;width:100%}input,select,textarea{font-size:16px;max-width:100%}.btn-responsive{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;gap:8px;justify-content:center;min-height:44px;min-width:44px;padding:12px 16px;transition:all .3s ease}.grid-responsive{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr}.flex-responsive{display:flex;flex-wrap:wrap;gap:15px}.text-responsive{font-size:clamp(14px,2.5vw,18px);line-height:1.6}.heading-responsive{font-size:clamp(20px,4vw,32px);line-height:1.3}.spacing-responsive{margin:clamp(10px,2vw,20px);padding:clamp(15px,3vw,30px)}.card-responsive{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;margin-bottom:clamp(15px,2.5vw,20px);padding:clamp(16px,3vw,24px);transition:all .3s ease}.card-responsive:hover{box-shadow:0 4px 20px #00000026;transform:translateY(-2px)}.modal-responsive{align-items:center;background:#00000080;display:flex;height:100%;justify-content:center;left:0;padding:20px;position:fixed;top:0;width:100%;z-index:1000}.modal-content-responsive{background:#fff;border-radius:12px;max-height:90vh;max-width:90vw;overflow-y:auto;padding:clamp(20px,4vw,30px)}.nav-responsive{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.hide-mobile{display:block}.show-mobile{display:none}.hide-tablet{display:block}.show-tablet{display:none}.hide-desktop{display:block}.show-desktop{display:none}@media (max-width:360px){html{font-size:14px}.grid-responsive{gap:12px}.flex-responsive{gap:10px}.btn-responsive{font-size:13px;min-height:40px;min-width:40px;padding:10px 14px}.modal-content-responsive{max-height:95vh;max-width:95vw}}@media (max-width:480px){.grid-responsive{gap:15px}.flex-responsive{gap:12px}.hide-mobile{display:none}.show-mobile{display:block}.btn-responsive{justify-content:center;width:100%}}@media (max-width:767px){.grid-responsive{gap:18px;grid-template-columns:1fr}.hide-tablet{display:none}.show-tablet{display:block}}@media (min-width:768px) and (max-width:991px){.grid-responsive{gap:20px;grid-template-columns:repeat(2,1fr)}}@media (min-width:992px){.grid-responsive{gap:25px;grid-template-columns:repeat(3,1fr)}.hide-desktop{display:none}.show-desktop{display:block}}@media (min-width:1200px){.grid-responsive{gap:30px;grid-template-columns:repeat(4,1fr)}}@media (min-width:1400px){html{font-size:18px}.grid-responsive{gap:35px}.flex-responsive{gap:25px}}@media (orientation:landscape) and (max-height:500px){.modal-content-responsive{max-height:85vh}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.card-responsive{box-shadow:0 1px 5px #0000001a}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{.hide-print{display:none!important}.card-responsive{border:1px solid #ddd;box-shadow:none}.btn-responsive{background:#fff!important;border:1px solid #000;color:#000!important}}.btn-responsive:focus,input:focus,select:focus,textarea:focus{outline:2px solid #007bff;outline-offset:2px}html{scroll-behavior:smooth}@media (pointer:coarse){.btn-responsive{min-height:48px;min-width:48px}input,select,textarea{min-height:48px}}.container-fluid-responsive{margin-left:auto;margin-right:auto;padding-left:clamp(15px,3vw,30px);padding-right:clamp(15px,3vw,30px);width:100%}.flex-column-mobile{display:flex}@media (max-width:767px){.flex-column-mobile{flex-direction:column}}.flex-row-desktop{display:flex;flex-direction:column}@media (min-width:768px){.flex-row-desktop{flex-direction:row}}.aspect-ratio-responsive{height:0;padding-bottom:56.25%;position:relative;width:100%}.aspect-ratio-responsive>*{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}.text-xs-responsive{font-size:clamp(10px,1.5vw,12px)}.text-sm-responsive{font-size:clamp(12px,2vw,14px)}.text-md-responsive{font-size:clamp(14px,2.5vw,16px)}.text-lg-responsive{font-size:clamp(16px,3vw,20px)}.text-xl-responsive{font-size:clamp(20px,4vw,28px)}.text-2xl-responsive{font-size:clamp(24px,5vw,36px)}.text-3xl-responsive{font-size:clamp(30px,6vw,48px)}.p-xs-responsive{padding:clamp(4px,1vw,8px)}.p-sm-responsive{padding:clamp(8px,1.5vw,12px)}.p-md-responsive{padding:clamp(12px,2vw,16px)}.p-lg-responsive{padding:clamp(16px,3vw,24px)}.p-xl-responsive{padding:clamp(24px,4vw,32px)}.m-xs-responsive{margin:clamp(4px,1vw,8px)}.m-sm-responsive{margin:clamp(8px,1.5vw,12px)}.m-md-responsive{margin:clamp(12px,2vw,16px)}.m-lg-responsive{margin:clamp(16px,3vw,24px)}.m-xl-responsive{margin:clamp(24px,4vw,32px)}.ui-btn{align-items:center;border:1px solid #0000;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;gap:var(--space-2);justify-content:center;line-height:1.4;padding:10px 18px;text-decoration:none;transition:all var(--transition-fast);white-space:nowrap}.ui-btn:disabled{cursor:not-allowed;opacity:.55}.ui-btn--primary{background:var(--primary-color);box-shadow:var(--shadow-sm);color:var(--text-inverse)}.ui-btn--primary:hover:not(:disabled){background:var(--primary-color-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.ui-btn--secondary{background:var(--surface-elevated);border-color:var(--border);color:var(--text-primary)}.ui-btn--secondary:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color)}.ui-btn--ghost{background:#0000;color:var(--text-secondary)}.ui-btn--ghost:hover:not(:disabled){background:var(--primary-50);color:var(--primary-color)}.ui-btn--danger{background:var(--danger);color:var(--text-inverse)}.ui-btn--danger:hover:not(:disabled){filter:brightness(1.08)}.ui-btn--sm{font-size:var(--text-xs);padding:6px 12px}.ui-btn--lg{font-size:var(--text-base);padding:12px 24px}.ui-card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--transition-base),transform var(--transition-base)}.ui-card--hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.ui-card__body{padding:var(--space-6)}.ui-card__header{border-bottom:1px solid var(--border);padding:var(--space-5) var(--space-6)}.ui-badge{align-items:center;border-radius:var(--radius-full);display:inline-flex;font-size:var(--text-xs);font-weight:600;gap:4px;line-height:1.2;padding:4px 10px}.ui-badge--primary{background:var(--primary-100);color:var(--primary-color)}.ui-badge--success{background:#0596691f;color:var(--success)}.ui-badge--warning{background:#d977061f;color:var(--warning)}.ui-badge--muted{background:var(--surface-muted);color:var(--text-muted)}.ui-progress{width:100%}.ui-progress__track{background:var(--surface-muted);border-radius:var(--radius-full);height:8px;overflow:hidden}.ui-progress__fill{background:linear-gradient(90deg,var(--primary-color) 0,var(--primary-color-light) 100%);border-radius:var(--radius-full);height:100%;transition:width .4s ease}.ui-progress__label{color:var(--text-muted);display:flex;font-size:var(--text-xs);font-weight:500;justify-content:space-between;margin-bottom:var(--space-2)}.ui-page-header{margin-bottom:var(--space-8)}.ui-page-header__title{color:var(--text-primary);font-size:var(--text-3xl);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-2)}.ui-page-header__subtitle{color:var(--text-muted);font-size:var(--text-base);max-width:600px}.ui-empty{background:var(--surface-elevated);border:1px dashed var(--border);border-radius:var(--radius-xl);flex-direction:column;padding:var(--space-12) var(--space-6);text-align:center}.ui-empty,.ui-empty__icon{align-items:center;display:flex;justify-content:center}.ui-empty__icon{background:var(--primary-50);border-radius:var(--radius-lg);color:var(--primary-color);height:56px;margin-bottom:var(--space-4);width:56px}.ui-empty__title{color:var(--text-primary);font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2)}.ui-empty__desc{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-5);max-width:360px}.ui-app-header{align-items:center;background:var(--surface-elevated);border-bottom:1px solid var(--border);display:flex;gap:var(--space-4);justify-content:space-between;min-height:var(--header-height);padding:var(--space-4) var(--space-6);position:-webkit-sticky;position:sticky;top:0;z-index:50}.ui-app-header__title{color:var(--text-primary);font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;margin:0}.ui-app-header__actions{align-items:center;display:flex;gap:var(--space-3)}.ui-app-header__search{position:relative;width:220px}.ui-app-header__search-icon{color:var(--text-muted);left:12px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ui-app-header__search-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-primary);font-size:var(--text-sm);padding:10px 12px 10px 40px;width:100%}.ui-app-header__search-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-50);outline:none}.ui-app-header__bell{align-items:center;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;height:40px;justify-content:center;transition:all var(--transition-fast);width:40px}.ui-app-header__bell:hover{border-color:var(--primary-color);color:var(--primary-color)}.ui-pills{background:var(--surface-muted);border-radius:var(--radius-full);display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-1);width:-webkit-fit-content;width:fit-content}.ui-pill{align-items:center;background:#0000;border:none;border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-size:var(--text-sm);font-weight:500;gap:4px;padding:8px 16px;transition:all var(--transition-fast);white-space:nowrap}.ui-pill:hover:not(.ui-pill--active){background:#fff9;color:var(--text-primary)}.ui-pill--active{background:var(--primary-color);box-shadow:var(--shadow-sm);color:var(--text-inverse);font-weight:600}.ui-pill__count{opacity:.85}.ui-avatar{align-items:center;border-radius:50%;display:inline-flex;flex-shrink:0;font-size:var(--text-sm);font-weight:700;height:40px;justify-content:center;letter-spacing:.02em;width:40px}.ui-avatar--sm{font-size:var(--text-xs);height:32px;width:32px}.ui-avatar--lg{font-size:var(--text-base);height:48px;width:48px}.ui-stat-card{align-items:flex-start;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);display:flex;gap:var(--space-4);padding:var(--space-5)}.ui-stat-card__icon{align-items:center;border-radius:var(--radius-lg);display:flex;flex-shrink:0;height:48px;justify-content:center;width:48px}.ui-stat-card--primary .ui-stat-card__icon{background:#0284c71f;color:var(--info)}.ui-stat-card--success .ui-stat-card__icon{background:#0596691f;color:var(--success)}.ui-stat-card--warning .ui-stat-card__icon{background:#d977061f;color:var(--warning)}.ui-stat-card--info .ui-stat-card__icon{background:#0891b21f;color:#0891b2}.ui-stat-card__value{color:var(--text-primary);font-size:var(--text-3xl);font-weight:700;line-height:1.1}.ui-stat-card__label{color:var(--text-secondary);font-size:var(--text-sm);font-weight:600;margin-top:2px}.ui-stat-card__detail{color:var(--text-muted);font-size:var(--text-xs);margin-top:var(--space-2)}.ui-course-card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);cursor:default;overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base)}.ui-course-card[role=button]{cursor:pointer}.ui-course-card[role=button]:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.ui-course-card__media{background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-400) 100%);flex-shrink:0;height:88px;min-height:88px;overflow:hidden;position:relative}.ui-course-card__img{display:block;height:100%;object-fit:cover;transition:transform var(--transition-base);width:100%}.ui-course-card[role=button]:hover .ui-course-card__img{transform:scale(1.04)}.ui-course-card__fallback{align-items:center;color:#ffffffe6;display:flex;height:100%;justify-content:center;width:100%}.ui-course-card__code{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000073;border-radius:var(--radius-sm);bottom:var(--space-2);color:#fff;font-size:10px;font-weight:700;left:var(--space-3);letter-spacing:.06em;max-width:calc(100% - var(--space-6));overflow:hidden;padding:2px 8px;position:absolute;text-overflow:ellipsis;white-space:nowrap;z-index:1}.ui-course-card__media:not(.ui-course-card__media--photo) .ui-course-card__code{background:#00000040;bottom:50%;font-size:var(--text-lg);left:50%;padding:var(--space-1) var(--space-3);transform:translate(-50%,50%)}.ui-course-card__body{padding:var(--space-4) var(--space-5) var(--space-5)}.ui-course-card__title{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--text-primary);display:-webkit-box;font-size:var(--text-sm);font-weight:600;line-height:1.4;margin:0 0 var(--space-3);overflow:hidden}.ui-course-card__footer{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.ui-course-card__date{color:var(--text-muted);font-size:var(--text-xs)}.ui-course-card__metrics{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3)}.ui-course-card__metric{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--text-xs);gap:4px}.ui-course-card__metric-icon{color:var(--primary-color);flex-shrink:0}.ui-course-card__metric-value{color:var(--text-primary);font-weight:600}.ui-course-card__metric-label{color:var(--text-muted)}.ui-course-card__progress{margin-bottom:var(--space-3)}.ui-course-card__progress-header{color:var(--text-muted);display:flex;font-size:var(--text-xs);justify-content:space-between;margin-bottom:var(--space-1)}.ui-course-card__progress-track{background:var(--surface-muted);border-radius:var(--radius-full);height:6px;overflow:hidden}.ui-course-card__progress-fill{background:linear-gradient(90deg,var(--primary-color),var(--primary-400));border-radius:var(--radius-full);height:100%;transition:width var(--transition-base)}.ui-course-card__actions{margin-top:var(--space-2)}.ui-icon-action{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;height:36px;justify-content:center;transition:all var(--transition-fast);width:36px}.ui-icon-action:disabled{cursor:not-allowed;opacity:.5}.ui-icon-action--edit{background:#0284c71f;color:var(--info)}.ui-icon-action--edit:hover:not(:disabled){background:#0284c733}.ui-icon-action--delete{background:#dc26261a;color:var(--danger)}.ui-icon-action--delete:hover:not(:disabled){background:#dc26262e}.ui-icon-action--neutral{background:var(--surface-muted);color:var(--text-secondary)}.ui-icon-action--neutral:hover:not(:disabled){background:var(--border)}.ui-dialog{background:var(--surface-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:420px;padding:var(--space-8);text-align:center;width:calc(100% - 32px)}.ui-dialog__icon{align-items:center;border-radius:var(--radius-full);display:flex;height:56px;justify-content:center;margin:0 auto var(--space-4);width:56px}.ui-dialog--info .ui-dialog__icon{background:var(--primary-50);color:var(--primary-color)}.ui-dialog--success .ui-dialog__icon{background:#ecfdf5;color:var(--success)}.ui-dialog--danger .ui-dialog__icon,.ui-dialog--error .ui-dialog__icon{background:#fef2f2;color:var(--danger)}.ui-dialog__title{color:var(--text-primary);font-size:var(--text-lg);font-weight:600;margin:0 0 var(--space-2)}.ui-dialog__message{margin-bottom:var(--space-6)}.ui-dialog__message p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;margin:0 0 var(--space-2)}.ui-dialog__message p:last-child{margin-bottom:0}.ui-dialog__actions{display:flex;gap:var(--space-3);justify-content:center}.ui-dialog__actions .ui-btn{min-width:100px}.ui-loading{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}.ui-loading--page{min-height:50vh;padding:var(--space-8) var(--space-5)}.ui-loading--inline{min-height:120px;padding:var(--space-6) var(--space-4)}.ui-loading__orb{height:52px;position:relative;width:52px}.ui-loading__ring{animation:ui-loading-spin .85s cubic-bezier(.45,.05,.35,.95) infinite;border-bottom:2px solid #0000;border-left:2px solid #0000;border-radius:50%;border-right:2px solid #1a5c40;border-right-color:var(--primary-400,#1a5c40);border-top:2px solid #0000;border-top-color:var(--primary-color);inset:0;position:absolute}.ui-loading__ring:after{animation:ui-loading-spin 1.25s linear infinite reverse;border:2px solid #0000;border-bottom:2px solid rgba(var(--primary-rgb,0,44,28),.3);border-radius:50%;content:"";inset:7px;position:absolute}.ui-loading__core{animation:ui-loading-pulse 1.5s ease-in-out infinite;background:linear-gradient(145deg,var(--primary-color),#1a5c40);background:linear-gradient(145deg,var(--primary-color),var(--primary-400,#1a5c40));border-radius:50%;box-shadow:0 0 20px #002c1c40;box-shadow:0 0 20px rgba(var(--primary-rgb,0,44,28),.25);inset:16px;position:absolute}.ui-loading__message{color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;letter-spacing:.02em;margin:var(--space-5) 0 0}.ui-loading__dots span{animation:ui-loading-dot 1.4s ease-in-out infinite;opacity:.25}.ui-loading__dots span:nth-child(2){animation-delay:.2s}.ui-loading__dots span:nth-child(3){animation-delay:.4s}@keyframes ui-loading-spin{to{transform:rotate(1turn)}}@keyframes ui-loading-pulse{0%,to{opacity:.75;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}@keyframes ui-loading-dot{0%,60%,to{opacity:.2}30%{opacity:1}}.floating-cart-fab{align-items:center;background:var(--primary-color);border:none;border-radius:var(--radius-full);bottom:24px;box-shadow:var(--shadow-lg);color:var(--text-inverse);cursor:pointer;display:flex;height:56px;justify-content:center;position:fixed;right:24px;transition:transform var(--transition-fast),box-shadow var(--transition-fast);width:56px;z-index:1001}.floating-cart-fab:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.floating-cart-badge{background:var(--danger);border-radius:var(--radius-full);color:#fff;font-size:var(--text-xs);font-weight:700;min-width:20px;padding:2px 7px;position:absolute;right:-4px;text-align:center;top:-4px}.floating-cart-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#11182780;display:flex;inset:0;justify-content:center;padding:var(--space-5);position:fixed;z-index:1000}.floating-cart-panel{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-height:80vh;max-width:720px;overflow-y:auto;padding:var(--space-6);width:100%}.floating-cart-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-4)}.floating-cart-header h2{align-items:center;display:flex;font-size:var(--text-xl);font-weight:700;gap:var(--space-3);margin:0}.floating-cart-close{align-items:center;background:var(--surface-muted);border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;height:36px;justify-content:center;transition:background var(--transition-fast);width:36px}.floating-cart-close:hover{background:var(--border)}.floating-cart-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;gap:var(--space-4);margin-bottom:var(--space-3);padding:var(--space-4)}.floating-cart-item-thumb{background:var(--surface-muted);border-radius:var(--radius-md);flex-shrink:0;height:56px;object-fit:cover;width:80px}.floating-cart-item-info{flex:1 1;min-width:0}.floating-cart-item-title{color:var(--text-primary);font-weight:600;margin-bottom:4px}.floating-cart-item-price{color:var(--primary-color);font-size:var(--text-sm);font-weight:600}.floating-cart-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.floating-cart-footer{display:flex;justify-content:flex-end;margin-top:var(--space-4)}.login-container{align-items:center;background:radial-gradient(ellipse 620px 420px at 85% 15%,rgba(var(--primary-rgb),.55) 0,#0000 70%),radial-gradient(ellipse 520px 380px at 8% 88%,rgba(var(--primary-rgb),.45) 0,#0000 68%),radial-gradient(ellipse 300px 300px at 50% 50%,#ffffff0a 0,#0000 70%),repeating-linear-gradient(-45deg,#0000,#0000 36px,hsla(0,0%,100%,.025) 36px,hsla(0,0%,100%,.025) 37px),linear-gradient(145deg,var(--primary-color-dark) 0,var(--primary-color) 48%,var(--primary-600) 100%);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:var(--space-5);position:relative}.login-container:after,.login-container:before{border-radius:50%;content:"";pointer-events:none;position:absolute}.login-container:before{background:radial-gradient(circle,#ffffff14 0,#0000 68%);height:520px;right:-100px;top:-160px;width:520px}.login-container:after{background:radial-gradient(circle,#ffffff0f 0,#0000 70%);bottom:-120px;height:400px;left:-80px;width:400px}.login-card{background:var(--surface-elevated);border:none;border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);max-width:var(--login-card-width);padding:var(--space-10) var(--space-8);position:relative;width:100%;z-index:1}.login-card--wide{max-width:min(600px,95vw)}.login-header{margin-bottom:var(--space-8);text-align:center}.login-brand{gap:var(--space-3);margin-bottom:var(--space-2)}.login-brand,.login-brand-icon{align-items:center;display:flex;justify-content:center}.login-brand-icon{background:var(--primary-color);border-radius:var(--radius-md);color:var(--text-inverse);flex-shrink:0;height:44px;width:44px}.login-brand-text{text-align:left}.login-title{color:var(--text-primary);font-size:var(--text-lg);font-weight:700;line-height:1.2;margin:0}.login-subtitle{color:var(--text-muted);font-size:var(--text-xs);margin:2px 0 0}.login-logo-slot{align-items:center;display:flex;justify-content:center;margin-bottom:var(--space-4);min-height:88px}.login-logo-img{display:block;margin:0 auto;max-height:80px;max-width:100%}.login-brand-placeholder{margin:0 auto var(--space-4);min-height:88px}.login-container--boot{min-height:100vh}.login-form-group{margin-bottom:var(--space-4)}.login-label{color:var(--text-secondary);display:block;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-2)}.login-field-hint{color:var(--text-muted);font-size:var(--text-xs);margin:var(--space-1) 0 0}.login-input-wrap{align-items:center;display:flex;position:relative}.login-input-icon{color:var(--text-muted);left:14px;pointer-events:none;position:absolute;z-index:1}.login-input{background:#f3f4f6;border:none;border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--text-sm);padding:14px 44px;transition:box-shadow var(--transition-fast);width:100%}.login-input:focus{background:#fff;box-shadow:0 0 0 3px var(--primary-100);outline:none}.login-input.input-error{box-shadow:0 0 0 2px #dc26264d}.login-password-toggle{align-items:center;background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:4px;position:absolute;right:12px}.login-field-error{color:var(--danger);font-size:var(--text-xs);margin-top:var(--space-1)}.login-submit-btn{background:var(--primary-color);border:none;border-radius:var(--radius-lg);color:var(--text-inverse);cursor:pointer;font-size:var(--text-sm);font-weight:600;margin-top:var(--space-2);padding:14px 20px;transition:filter var(--transition-fast);width:100%}.login-submit-btn:hover:not(:disabled){filter:brightness(1.08)}.login-submit-btn:disabled{cursor:not-allowed;opacity:.55}.login-footer{align-items:center;display:flex;justify-content:space-between;margin-top:var(--space-5);padding-top:var(--space-4)}.login-footer-link{background:none;border:none;color:var(--primary-color);cursor:pointer;font-size:var(--text-sm);font-weight:500;padding:0;text-decoration:none}.login-footer-link:hover{text-decoration:underline}.login-secondary-links{margin-top:var(--space-4);text-align:center}.login-secondary-link{align-items:center;color:var(--text-muted);display:inline-flex;font-size:var(--text-xs);gap:6px;text-decoration:none}.login-secondary-link:hover{color:var(--primary-color)}.login-2fa-input{font-size:var(--text-xl);letter-spacing:4px;text-align:center}.login-2fa-actions{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}.login-btn-outline{background:#0000;border:1px solid var(--primary-color);border-radius:var(--radius-lg);color:var(--primary-color);cursor:pointer;font-weight:600;padding:12px;width:100%}.login-input--tools{padding-right:76px}.login-input-extra-tool{align-items:center;background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;padding:4px;position:absolute;right:44px}.login-form-intro{line-height:1.5;margin:0 0 var(--space-4)}.login-auth-switch,.login-form-intro{color:var(--text-muted);font-size:var(--text-sm);text-align:center}.login-auth-switch{margin-top:var(--space-5)}.login-success-panel{padding:var(--space-2) 0;text-align:center}.login-success-panel h3{color:var(--text-primary);font-size:var(--text-lg);margin:var(--space-4) 0 var(--space-2)}.login-success-panel p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;margin:0}.login-success-note{color:var(--text-muted);font-size:var(--text-xs);margin-top:var(--space-4)}.alert-info{background:var(--primary-50);border:1px solid var(--primary-100);color:var(--primary-color)}.alert-error,.alert-info,.alert-success{border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:1.5;margin-bottom:var(--space-4);padding:12px 16px}.alert-error{background:#fef2f2;border:1px solid #fecaca;color:var(--danger)}.alert-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}@media (max-width:480px){.login-card{padding:var(--space-8) var(--space-5)}.login-footer{align-items:center;flex-direction:column;gap:var(--space-3)}}.first-login-overlay{align-items:center;background:#00000073;display:flex;inset:0;justify-content:center;padding:var(--space-4);position:fixed;z-index:1000}.first-login-modal{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-height:90vh;max-width:500px;overflow-y:auto;padding:var(--space-6);width:100%}.first-login-header{align-items:center;display:flex;gap:var(--space-3);margin-bottom:var(--space-5)}.first-login-header h2{color:var(--text-primary);font-size:var(--text-lg);font-weight:600;margin:0}.first-login-alert{align-items:flex-start;background:#d977061a;border:1px solid #d977064d;border-radius:var(--radius-md);display:flex;gap:var(--space-3);margin-bottom:var(--space-5);padding:var(--space-4)}.first-login-alert h3{color:var(--warning);font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-2)}.first-login-alert p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5;margin:0}.first-login-steps{margin-bottom:var(--space-5)}.first-login-steps h4{color:var(--text-primary);font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-3)}.first-login-step{align-items:center;background:var(--surface);border-radius:var(--radius-md);display:flex;gap:var(--space-3);margin-bottom:var(--space-2);padding:var(--space-3)}.first-login-step-num{align-items:center;background:var(--primary-color);border-radius:50%;color:var(--text-inverse);display:flex;flex-shrink:0;font-size:var(--text-xs);font-weight:600;height:24px;justify-content:center;width:24px}.first-login-step p{color:var(--text-primary);font-size:var(--text-sm);margin:0}.first-login-step small{color:var(--text-muted);display:block;font-size:var(--text-xs);margin-top:2px}.first-login-actions{display:flex;gap:var(--space-3);justify-content:flex-end}.first-login-2fa-input{font-size:var(--text-base);letter-spacing:2px;text-align:center}.sidebar{background:var(--primary-color);border-right:1px solid #ffffff14;box-shadow:var(--shadow-lg);color:var(--text-inverse);display:flex;flex-direction:column;height:100vh;left:0;position:fixed;top:0;transition:width var(--transition-base);width:var(--sidebar-width);z-index:1000}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar-header{border-bottom:1px solid #ffffff14;justify-content:space-between;min-height:64px;padding:16px}.logo,.sidebar-header{align-items:center;display:flex}.logo{gap:10px}.logo-icon{filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));font-size:24px;transition:transform .3s ease}.logo-icon:hover{transform:scale(1.1)}.logo-text{font-family:Plus Jakarta Sans,Inter,sans-serif;font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1.2;white-space:nowrap}.collapse-btn{align-items:center;background:#ffffff14;border:none;border-radius:6px;color:#fffc;cursor:pointer;display:flex;font-size:12px;height:28px;justify-content:center;transition:all .3s ease;width:28px}.collapse-btn:hover{background:#ffffff26;color:#fff;transform:scale(1.05)}.sidebar-menu{flex:1 1;overflow-x:hidden;overflow-y:auto;padding:12px 0}.sidebar-group{margin-bottom:var(--space-4)}.sidebar-group-label{color:#ffffff73;font-size:10px;font-weight:700;letter-spacing:.08em;padding:var(--space-2) var(--space-4) var(--space-1);text-transform:uppercase}.logo-icon-wrap{align-items:center;display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.logo-img{height:32px;max-height:32px;object-fit:contain;width:32px}.menu-item{align-items:center;border-radius:var(--radius-full);color:#ffffffbf;display:flex;font-size:14px;font-weight:500;margin:2px 10px;padding:10px 14px;position:relative;text-decoration:none;transition:all var(--transition-fast)}.menu-item:hover{background:#ffffff1a;color:#fffffff2}.menu-item.active{background:#ffffff26;box-shadow:inset 0 0 0 1px #ffffff14;color:#fff;font-weight:600}.menu-cart-badge{background:var(--danger);border-radius:var(--radius-full);color:#fff;display:inline-block;font-size:11px;font-weight:700;margin-left:8px;min-width:20px;padding:2px 8px;text-align:center}.menu-item.active:before{background:#fffc;border-radius:0 2px 2px 0;content:"";display:none;height:20px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:3px}.menu-icon{font-size:18px;opacity:.9;text-align:center;width:20px}.menu-label{font-weight:500;letter-spacing:.3px;margin-left:12px;white-space:nowrap}.sidebar-footer{border-top:1px solid #ffffff14;padding:16px}.user-info{gap:10px;margin-bottom:12px}.user-avatar,.user-info{align-items:center;display:flex}.user-avatar{background:#ffffff26;border:2px solid #ffffff1a;border-radius:50%;font-size:14px;font-weight:600;height:36px;justify-content:center;transition:all .3s ease;width:36px}.user-avatar:hover{border-color:#fff3;transform:scale(1.05)}.user-details{flex:1 1;min-width:0}.user-name{color:#fffffff2;font-size:13px;font-weight:600}.user-name,.user-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-role{color:#fff9;font-size:11px;margin-top:2px}.logout-btn{align-items:center;background:#ffffff14;border:none;border-radius:6px;color:#fffc;cursor:pointer;display:flex;font-size:13px;font-weight:500;gap:6px;justify-content:center;padding:10px;transition:all .3s ease;width:100%}.logout-btn:hover{background:#ffffff26;color:#fff;transform:translateY(-1px)}.logout-icon{font-size:14px}@media (min-width:1200px){.sidebar{width:260px}.sidebar.collapsed{width:70px}.main-content{margin-left:260px}.main-content.sidebar-collapsed{margin-left:70px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:240px}.sidebar.collapsed{width:60px}.main-content{margin-left:240px}.main-content.sidebar-collapsed{margin-left:60px}}@media (min-width:768px) and (max-width:991px){.sidebar{width:220px}.sidebar.collapsed{width:50px}.main-content{margin-left:220px}.main-content.sidebar-collapsed{margin-left:50px}.menu-item{font-size:13px;padding:10px 14px}.menu-icon{font-size:16px}.menu-label{margin-left:10px}.user-name{font-size:12px}.user-role{font-size:10px}}@media (max-width:767px){.sidebar{height:100vh;left:0;overflow:hidden;position:fixed;transition:width .3s cubic-bezier(.4,0,.2,1);width:60px;z-index:1000}.sidebar.collapsed{width:45px}.main-content{margin-left:60px;padding:clamp(8px,2vw,15px);transition:all .3s ease;width:calc(100% - 60px)}.main-content.sidebar-collapsed{margin-left:45px;width:calc(100% - 45px)}.sidebar-overlay{background:#00000080;height:100%;left:0;opacity:0;position:fixed;top:0;transition:all .3s ease;visibility:hidden;width:100%;z-index:999}.sidebar-overlay.active{opacity:1;visibility:visible}.menu-item{font-size:14px;padding:14px 16px}.menu-icon{font-size:18px;width:24px}.menu-label{font-size:14px;margin-left:12px}.sidebar-footer{padding:16px}.user-info{gap:12px;margin-bottom:14px}.user-avatar{font-size:15px;height:38px;width:38px}.user-name{font-size:13px}.user-role{font-size:11px}.logout-btn{font-size:14px;padding:12px}}@media (max-width:480px){.sidebar{left:0;width:70px}.sidebar.collapsed{width:60px}.main-content{margin-left:70px;width:calc(100% - 70px)}.main-content.sidebar-collapsed{margin-left:60px;width:calc(100% - 60px)}.sidebar-header{gap:8px;min-height:70px;padding:12px 8px}.logo,.sidebar-header{align-items:center;flex-direction:column}.logo{gap:6px}.logo-text{display:block;font-size:10px;font-weight:600;letter-spacing:.3px;line-height:1.1;text-align:center;white-space:normal}.collapse-btn{font-size:10px;height:24px;width:24px}.menu-item{align-items:center;flex-direction:column;font-size:12px;justify-content:center;min-height:50px;padding:8px 4px;text-align:center}.menu-icon{display:block;font-size:18px;margin-bottom:4px;width:auto}.menu-label{display:block;font-size:9px;line-height:1.1;margin-left:0;max-width:60px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.sidebar.collapsed .menu-label{display:none}.sidebar.collapsed .menu-item{min-height:40px;padding:8px 2px}.sidebar.collapsed .menu-icon{font-size:16px;margin-bottom:0}.sidebar.collapsed .logo-text{display:none}.sidebar.collapsed .sidebar-header{min-height:50px;padding:8px 4px}.sidebar-footer{padding:12px 8px}.user-info{align-items:center;flex-direction:column;gap:8px;margin-bottom:12px}.user-avatar{font-size:16px;height:40px;width:40px}.user-details,.user-name{text-align:center}.user-name{font-size:11px}.user-role{font-size:9px;text-align:center}.logout-btn{font-size:12px;padding:8px}.sidebar.collapsed .user-details{display:none}.sidebar.collapsed .user-info{margin-bottom:8px}}@media (max-width:360px){.sidebar{left:0;width:65px}.sidebar.collapsed{width:55px}.main-content{margin-left:65px;padding:6px;width:calc(100% - 65px)}.main-content.sidebar-collapsed{margin-left:55px;width:calc(100% - 55px)}.sidebar-header{gap:6px;min-height:65px;padding:10px 6px}.logo,.sidebar-header{align-items:center;flex-direction:column}.logo{gap:4px}.logo-text{display:block;font-size:9px;font-weight:600;letter-spacing:.2px;line-height:1;text-align:center;white-space:normal}.collapse-btn{font-size:9px;height:20px;width:20px}.menu-item{align-items:center;flex-direction:column;font-size:11px;justify-content:center;min-height:42px;padding:8px 3px;text-align:center}.menu-icon{display:block;font-size:16px;margin-bottom:2px;width:auto}.menu-label{display:block;font-size:8px;line-height:1;margin-left:0;max-width:55px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.sidebar.collapsed .menu-label{display:none}.sidebar.collapsed .menu-item{min-height:38px;padding:6px 2px}.sidebar.collapsed .menu-icon{font-size:14px;margin-bottom:0}.sidebar.collapsed .logo-text{display:none}.sidebar.collapsed .sidebar-header{min-height:45px;padding:6px 3px}.sidebar-footer{padding:8px 6px}.user-info{align-items:center;flex-direction:column;gap:6px;margin-bottom:8px}.user-avatar{font-size:13px;height:32px;width:32px}.user-details,.user-name{text-align:center}.user-name{font-size:9px}.user-role{font-size:8px;text-align:center}.logout-btn{font-size:10px;padding:6px}.sidebar.collapsed .user-details{display:none}.sidebar.collapsed .user-info{margin-bottom:6px}}.app-layout{display:flex;min-height:100vh}.main-content{background:var(--surface);flex:1 1;margin-left:var(--sidebar-width);max-width:100%;min-height:100vh;padding:var(--space-6) var(--space-8);transition:margin-left var(--transition-base)}.main-content.sidebar-collapsed{margin-left:var(--sidebar-collapsed-width)}.main-content-inner{margin:0 auto;max-width:var(--content-max-width);width:100%}@media (max-width:768px){.main-content{margin-left:60px}}