:root{--primary:#4f46e5;--primary-hover:#4338ca;--primary-gradient:linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);--primary-soft:#eef2ff;--primary-glow:#6366f140;--success:#10b981;--success-soft:#ecfdf5;--warning:#f59e0b;--warning-soft:#fffbeb;--danger:#ef4444;--danger-soft:#fef2f2;--info:#3b82f6;--info-soft:#eff6ff;--bg-app:#f8fafc;--bg-card:#fff;--bg-card-hover:#fcfdfe;--bg-subtle:#f1f5f9;--bg-input:#f8fafc;--text-main:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--text-disabled:#94a3b8;--border:#e2e8f0;--border-subtle:#edf2f7;--border-active:#c7d2fe;--shadow-xs:0 1px 2px #0000000a;--shadow-sm:0 2px 8px #0f172a0a;--shadow-md:0 6px 16px #0f172a0f;--shadow-lg:0 12px 30px #0f172a14;--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;--sidebar-w:240px;--topbar-h:70px}[data-theme=dark]{--bg-app:#0b0f19;--bg-card:#131b2e;--bg-card-hover:#182239;--bg-subtle:#1a233b;--bg-input:#101726;--text-main:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--text-disabled:#64748b;--border:#232f48;--border-subtle:#1c273e;--border-active:#4f46e5;--primary-soft:#6366f126;--success-soft:#10b98126;--warning-soft:#f59e0b26;--danger-soft:#ef444426;--info-soft:#3b82f626;--shadow-xs:0 1px 2px #0003;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 6px 16px #00000059;--shadow-lg:0 12px 30px #00000073}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}button,input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-layout{background-color:var(--bg-app);min-height:100vh;display:flex}.app-sidebar{width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);z-index:40;flex-direction:column;flex-shrink:0;height:100vh;padding:20px 14px;display:flex;position:sticky;top:0}.sidebar-logo{align-items:center;gap:10px;padding:4px 10px 24px;display:flex}.sidebar-logo img{object-fit:contain;height:38px}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding-right:4px;display:flex;overflow-y:auto}.nav-link-btn{border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:12px;width:100%;padding:10px 14px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.nav-link-btn:hover{background:var(--bg-subtle);color:var(--text-main)}.nav-link-btn.active{color:#6366f1;background:#ede9fe;font-weight:600;position:relative}[data-theme=dark] .nav-link-btn.active{color:#818cf8;background:#6366f133}.nav-link-btn.active:before{content:"";background:#6366f1;border-radius:4px;width:3.5px;position:absolute;top:6px;bottom:6px;left:0}.sidebar-mascot{margin-top:auto;padding-top:10px;position:relative}.sidebar-mascot-img-wrap{z-index:2;justify-content:center;margin-bottom:-15px;display:flex;position:relative}.sidebar-mascot img{filter:drop-shadow(0 10px 15px #6366f126);width:175px}.mascot-quote-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);text-align:center;padding:24px 14px 14px;position:relative}.mascot-quote-text{color:var(--text-secondary);font-size:12px;font-weight:500;line-height:1.45}.mascot-quote-indicator{background:#6366f1;border-radius:4px;width:24px;height:3px;margin:10px auto 0}.app-main{flex-direction:column;flex:1;min-width:0;display:flex}.app-topbar{height:var(--topbar-h);background:var(--bg-card);border-bottom:1px solid var(--border);z-index:30;justify-content:space-between;align-items:center;padding:0 28px;display:flex;position:sticky;top:0}.search-box-wrap{width:420px;max-width:100%;position:relative}.search-box-wrap svg{color:var(--text-muted);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.search-input{border-radius:var(--radius-full);border:1px solid var(--border);background:var(--bg-input);width:100%;height:42px;color:var(--text-main);outline:none;padding:0 16px 0 42px;font-size:13.5px;transition:all .2s}.search-input:focus{background:var(--bg-card);box-shadow:0 0 0 3px var(--primary-soft);border-color:#6366f1}.topbar-actions{align-items:center;gap:16px;display:flex}.icon-btn-circle{border:1px solid var(--border);background:var(--bg-card);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.icon-btn-circle:hover{background:var(--bg-subtle);color:var(--text-main)}.badge-dot{border:2px solid var(--bg-card);background:#ef4444;border-radius:50%;width:8px;height:8px;position:absolute;top:8px;right:8px}.user-profile-btn{border-radius:var(--radius-full);border:1px solid var(--border);background:var(--bg-card);cursor:pointer;align-items:center;gap:10px;padding:4px 8px 4px 4px;transition:all .2s;display:flex}.user-profile-btn:hover{background:var(--bg-subtle)}.avatar-circle{color:#fff;background:#3b82f6;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:13px;font-weight:700;display:flex}.user-profile-info{text-align:left;line-height:1.25}.user-name{color:var(--text-main);font-size:13px;font-weight:600}.user-role{color:var(--text-muted);font-size:11px}.page-container{flex:1;padding:28px}.ui-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:all .2s}.ui-card:hover{box-shadow:var(--shadow-sm)}.page-title{color:var(--text-main);letter-spacing:-.02em;font-size:26px;font-weight:800}.page-subtitle{color:var(--text-muted);margin-top:4px;font-size:13.5px}.btn-primary{color:#fff;border-radius:var(--radius-md);cursor:pointer;background:#4f46e5;border:none;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:13.5px;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 2px 8px #4f46e540}.btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 4px 12px #4f46e559}.btn-outline{color:#4f46e5;border-radius:var(--radius-md);cursor:pointer;background:0 0;border:1px solid #4f46e5;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:13.5px;font-weight:600;transition:all .2s;display:inline-flex}.btn-outline:hover{background:var(--primary-soft)}.btn-secondary{background:var(--bg-subtle);color:var(--text-main);border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:8px 14px;font-size:13px;font-weight:500;transition:all .2s;display:inline-flex}.btn-secondary:hover{background:var(--border)}.tabs-pill-row{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;display:flex}.tab-pill-btn{border-radius:var(--radius-full);background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s;display:inline-flex}.tab-pill-btn:hover{background:var(--bg-subtle);color:var(--text-main)}.tab-pill-btn.active{color:#fff;background:#4f46e5;border-color:#4f46e5;font-weight:600}.selector-select{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-main);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;outline:none;padding:10px 36px 10px 14px;font-size:13.5px;font-weight:600}.progress-track{border-radius:var(--radius-full);background:var(--border);height:6px;position:relative;overflow:hidden}.progress-fill{border-radius:var(--radius-full);background:#4f46e5;height:100%;transition:width .4s}.progress-fill.green{background:#10b981}.code-container{border-radius:var(--radius-md);color:#e2e8f0;font-family:var(--font-mono);background:#181d28;font-size:13px;overflow:hidden}.code-header{color:#94a3b8;background:#11151f;border-bottom:1px solid #283042;justify-content:space-between;align-items:center;padding:8px 14px;font-size:12px;display:flex}.code-body{padding:16px;line-height:1.6;overflow-x:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.25s ease-out forwards fadeIn}@media (width<=1024px){.app-sidebar{width:76px;padding:14px 8px}.sidebar-logo span,.nav-link-btn span,.mascot-quote-box{display:none}.sidebar-mascot img{width:60px}.nav-link-btn{justify-content:center;padding:12px 0}}