:root{--primary-blue:#0a74da;--hover-blue:#085bab;--light-blue:#ebf4fc;--white:#fff;--text-dark:#1f2937;--text-light:#6b7280;--shadow-sm:0 2px 4px #0000000d;--shadow-md:0 4px 12px #0a74da26;--radius:12px;--bg:#f0f4f8;--bg-gradient:linear-gradient(135deg, #f0f4f8 0%, #e2ecf6 100%);--surface:#fff;--surface-secondary:#f9fafb;--surface-hover:#f3f4f6;--border:#e5e7eb;--border-strong:#d1d5db;--text-heading:#111827;--text-muted:#6b7280;--success-bg:#ecfdf5;--success-border:#10b981;--supporter-gradient:linear-gradient(135deg, #f59e0b, #d97706)}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--primary-blue:#3b82f6;--hover-blue:#2563eb;--light-blue:#1e3a5f;--white:#1e293b;--text-dark:#f1f5f9;--text-light:#94a3b8;--shadow-sm:0 2px 4px #0000004d;--shadow-md:0 4px 12px #0006;--bg:#0f172a;--bg-gradient:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);--surface:#1e293b;--surface-secondary:#334155;--surface-hover:#334155;--border:#334155;--border-strong:#475569;--text-heading:#f8fafc;--text-muted:#94a3b8;--success-bg:#064e3b;--success-border:#34d399;--supporter-gradient:linear-gradient(135deg, #d97706, #b45309)}body{background:var(--bg-gradient);background:var(--bg-gradient);min-height:100vh;color:var(--text-dark);margin:0;padding:0;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:background .3s,color .3s}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);border:1px solid var(--border);padding:30px;transition:background .3s,box-shadow .3s,border-color .3s}.btn-primary{background:var(--primary-blue);color:var(--white);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:10px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .2s ease-in-out;display:flex}.btn-primary:hover{background:var(--hover-blue);transform:translateY(-2px);box-shadow:0 4px 10px #0a74da4d}[data-theme=dark] .btn-primary:hover{box-shadow:0 4px 10px #3b82f64d}.btn-outline{color:var(--primary-blue);border:2px solid var(--primary-blue);cursor:pointer;background:0 0;border-radius:8px;padding:10px 22px;font-size:16px;font-weight:600;transition:all .2s}.btn-outline:hover{background:var(--light-blue)}.btn-supporter{background:var(--supporter-gradient);color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:10px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .2s ease-in-out;display:flex}.btn-supporter:hover{filter:brightness(1.15);transform:translateY(-2px)}.input-field{border:1px solid var(--border-strong);background-color:var(--surface-secondary);box-sizing:border-box;width:100%;color:var(--text-dark);border-radius:8px;padding:12px 15px;font-size:15px;transition:border-color .2s,background-color .3s}.input-field:focus{border-color:var(--primary-blue);outline:none;box-shadow:0 0 0 3px #0a74da1a}h1,h2,h3{color:var(--text-dark);transition:color .3s}img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}div[data-board]{outline:none!important}@media (width<=600px){.card{margin:10px;padding:15px}div[style*="width: 500px"],div[style*="width: 440px"]{width:95vw!important;height:95vw!important}}.feedback-columns{flex-direction:column;gap:20px;display:flex}@media (width>=601px){.feedback-columns{flex-direction:row;align-items:flex-start}.feedback-columns>.card{flex:1;min-width:0}}body.is-dragging,body.is-dragging *{cursor:grabbing!important}.desktop-layout{background:var(--bg-gradient);width:100vw;height:100dvh;transition:background .3s;display:flex;overflow:hidden}.desktop-sidebar{z-index:100;background:linear-gradient(#0f172a 0%,#1e293b 100%);flex-direction:column;flex-shrink:0;width:clamp(180px,15vw,260px);height:100dvh;display:flex;overflow:hidden;box-shadow:4px 0 25px #0000001f}.sidebar-logo{border-bottom:1px solid #ffffff0f;flex-shrink:0;align-items:center;gap:clamp(8px,1vw,14px);margin-bottom:8px;padding:clamp(16px,2vw,28px) clamp(14px,1.5vw,24px) clamp(14px,1.8vw,24px);display:flex}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:8px 12px;display:flex}.sidebar-nav-item{color:#ffffff80;cursor:pointer;text-align:left;box-sizing:border-box;background:0 0;border:none;border-radius:10px;outline:none;align-items:center;gap:clamp(8px,1vw,14px);width:100%;padding:clamp(10px,1vw,13px) clamp(10px,1.2vw,16px);font-family:inherit;font-size:clamp(12px,1vw,14px);font-weight:600;transition:all .2s;display:flex}.sidebar-nav-item:hover{color:#ffffffe6;background:#ffffff12;transform:translate(3px)}.sidebar-nav-item.active{color:#c4b5fd;background:linear-gradient(135deg,#6366f12e,#8b5cf61f);box-shadow:inset 3px 0 #8b5cf6}.sidebar-nav-item.active:hover{transform:none}.sidebar-nav-icon{text-align:center;flex-shrink:0;width:clamp(24px,2vw,30px);font-size:clamp(18px,1.5vw,22px);line-height:1}.sidebar-nav-label{letter-spacing:.2px;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(12px,1vw,14px);overflow:hidden}.sidebar-footer{border-top:1px solid #ffffff0f;flex-shrink:0;padding:16px 20px}.desktop-content{flex-direction:column;flex:1;display:flex;position:relative;overflow-x:hidden}.desktop-content.no-scroll{overflow-y:hidden}.desktop-content.scrollable{overflow-y:auto}.desktop-content-inner{box-sizing:border-box;flex-direction:column;flex:1;width:100%;max-width:1400px;margin:0 auto;padding:clamp(20px,2.5vw,40px) clamp(20px,3vw,50px);display:flex}.desktop-menu-card{cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);align-items:center;gap:clamp(14px,2vw,24px);padding:clamp(18px,2.5vh,35px) clamp(18px,2vw,30px);transition:all .15s;display:flex}.desktop-menu-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-blue)}.menu-card{position:relative;overflow:hidden}.menu-card:before{content:"";background:var(--primary-blue);border-radius:0 3px 3px 0;width:3px;height:100%;transition:transform .2s;position:absolute;top:0;left:0;transform:scaleY(0)}.menu-card:hover{box-shadow:0 4px 16px #0a74da26;border-color:var(--primary-blue)!important}.menu-card:hover:before{transform:scaleY(1)}.menu-card:hover svg{filter:drop-shadow(0 0 4px #0a74da4d)}.quickstart-card{transition:transform .25s,box-shadow .25s}.quickstart-card:hover{box-shadow:0 12px 40px #0a5ec859!important}.quickstart-card button{transition:transform .2s,box-shadow .2s,background .2s!important}.quickstart-card button:first-child:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f673!important}.quickstart-card button:last-child:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f640;background:#ffffff1a!important;border-color:#ffffff40!important}.course-select-card{transition:transform .2s,box-shadow .2s,border-color .2s}.course-select-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0a74da1a;border-color:var(--primary-blue)!important}.course-select-card-header{transition:background .15s}.course-select-card-header:hover{background:#0a74da0a}.course-chapter-row:hover{background:#0a74da0a!important}.chapter-badge{transition:background .2s,color .2s,transform .2s}.course-select-card:hover .chapter-badge{transform:scale(1.05)}.desktop-menu-card .card-icon{flex-shrink:0;font-size:clamp(30px,3.5vw,52px);line-height:1}.desktop-menu-card .card-title{color:var(--text-heading);margin:0;font-size:clamp(16px,1.8vw,24px);font-weight:700;transition:color .3s}[data-theme=dark]::-webkit-scrollbar{width:8px;height:8px}[data-theme=dark] ::-webkit-scrollbar{width:8px;height:8px}[data-theme=dark]::-webkit-scrollbar-track{background:#1e293b}[data-theme=dark] ::-webkit-scrollbar-track{background:#1e293b}[data-theme=dark]::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}[data-theme=dark] ::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}[data-theme=dark]::-webkit-scrollbar-thumb:hover{background:#64748b}[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:#64748b}[data-theme=dark] select:not(.input-field),[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.input-field),[data-theme=dark] textarea:not(.input-field){color:#f1f5f9;background-color:#1e293b;border-color:#475569}[data-theme=dark] select option{color:#f1f5f9;background:#1e293b}[data-theme=dark] input[type=checkbox],[data-theme=dark] input[type=radio],[data-theme=dark] input[type=range]{accent-color:#60a5fa}[data-theme=dark] select:hover,[data-theme=dark] .input-field:hover{border-color:var(--primary-blue)}[data-theme=dark] .btn-outline{border-color:var(--primary-blue);color:var(--primary-blue)}[data-theme=dark] .btn-outline:hover{background:var(--light-blue)}[data-theme=dark] .btn-primary{background:var(--primary-blue)}.desktop-menu-card .card-desc{color:var(--text-muted);margin:3px 0 0;font-size:clamp(12px,1.2vw,16px);transition:color .3s}
