.nav-inner[data-v-debd7151]{justify-content:space-between;align-items:center;max-width:1400px;height:56px;margin:0 auto;padding:0 32px;display:flex}.nav-left[data-v-debd7151]{flex-shrink:0}.logo[data-v-debd7151]{align-items:center;gap:8px;display:flex;text-decoration:none!important}.logo-icon[data-v-debd7151]{color:var(--accent);background:#06b6d41a;border-radius:6px;padding:4px 8px;font-family:Fira Code,Cascadia Code,monospace;font-size:1.1rem;font-weight:600;line-height:1}.logo-text[data-v-debd7151]{color:var(--text);letter-spacing:-.5px;font-size:1.2rem;font-weight:700}.logo-highlight[data-v-debd7151]{color:var(--primary-light)}.nav-center[data-v-debd7151]{gap:4px;display:flex}.nav-item[data-v-debd7151]{color:var(--text-muted);border-radius:8px;align-items:center;gap:6px;padding:7px 16px;font-size:.9rem;font-weight:500;transition:all .2s;display:flex;text-decoration:none!important}.nav-item[data-v-debd7151]:hover{color:var(--text);background:#6366f10f}.nav-item.active[data-v-debd7151]{color:var(--primary-light);background:#6366f11a}.nav-item svg[data-v-debd7151]{opacity:.7}.nav-item.active svg[data-v-debd7151]{opacity:1}.nav-right[data-v-debd7151]{flex-shrink:0;align-items:center;gap:12px;display:flex}.nav-divider[data-v-debd7151]{background:var(--border);width:1px;height:20px}.theme-toggle[data-v-debd7151]{border:1px solid var(--border);cursor:pointer;color:var(--text-muted);background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:7px;line-height:0;transition:all .2s;display:flex}.theme-toggle[data-v-debd7151]:hover{color:var(--warning);border-color:var(--warning);background:#f59e0b14}.user-avatar[data-v-debd7151]{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:600;display:flex}.user-name[data-v-debd7151]{color:var(--text);font-size:.88rem;font-weight:500}.nav-action[data-v-debd7151]{border-radius:6px;padding:6px 12px;font-size:.88rem;transition:all .2s;color:var(--text-muted)!important}.nav-action[data-v-debd7151]:hover{background:#6366f10f;color:var(--text)!important}.nav-btn-register[data-v-debd7151]{background:var(--primary);border-radius:8px;padding:6px 16px;font-size:.85rem;font-weight:500;transition:all .2s;color:#fff!important;text-decoration:none!important}.nav-btn-register[data-v-debd7151]:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}:root{--primary:#6366f1;--primary-light:#818cf8;--primary-dark:#4f46e5;--accent:#06b6d4;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--bg:#0f172a;--bg-card:#1e293b;--bg-elevated:#334155;--text:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border:#334155;--radius:12px;--shadow:0 4px 24px #0003;--shadow-sm:0 1px 8px #00000026;--glow:0 0 20px #6366f126;--navbar-bg:#0f172ad9;--sidebar-bg:#161f30;--content-bg:#0f172a;--code-bg:#0d1117;--code-border:#21262d}[data-theme=light]{--primary:#6366f1;--primary-light:#6366f1;--primary-dark:#4f46e5;--accent:#0891b2;--success:#059669;--warning:#d97706;--danger:#dc2626;--bg:#f8fafc;--bg-card:#fff;--bg-elevated:#f1f5f9;--text:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--border:#e2e8f0;--shadow:0 4px 24px #0000000f;--shadow-sm:0 1px 8px #0000000a;--glow:0 0 20px #6366f114;--navbar-bg:#ffffffd9;--sidebar-bg:#f1f5f9;--content-bg:#fff;--code-bg:#f6f8fa;--code-border:#d0d7de}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--text);background:var(--bg);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.7}.container{max-width:1100px;margin:0 auto;padding:0 24px}a{color:var(--primary-light);text-decoration:none;transition:color .2s}a:hover{color:var(--accent)}.navbar{background:var(--navbar-bg);-webkit-backdrop-filter:blur(20px);z-index:100;border-bottom:1px solid var(--border);height:56px;padding:0;position:sticky;top:0}.btn{cursor:pointer;letter-spacing:.2px;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-size:.95rem;font-weight:500;transition:all .25s;display:inline-flex;text-decoration:none!important}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;box-shadow:0 4px 16px #6366f14d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px #6366f166}.btn-success{background:linear-gradient(135deg, var(--success), #059669);color:#fff;box-shadow:0 4px 16px #10b9814d}.btn-small{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:.8rem}.btn-small:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-full{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.hero{text-align:center;background:linear-gradient(135deg,#1e1b4b 0%,#0f172a 50%,#0c1524 100%);border:1px solid #6366f126;border-radius:20px;margin:32px 0;padding:80px 24px 70px;position:relative;overflow:hidden}[data-theme=light] .hero{background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 50%,#ecfeff 100%);border-color:#6366f133}[data-theme=light] .hero h1{background:linear-gradient(135deg,#1e1b4b 0%,#4338ca 50%,#0891b2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero:before{content:"";background:radial-gradient(circle at 30% 40%,#6366f114 0%,#0000 50%),radial-gradient(circle at 70% 60%,#06b6d40f 0%,#0000 50%);width:200%;height:200%;animation:8s ease-in-out infinite alternate hero-glow;position:absolute;top:-50%;left:-50%}@keyframes hero-glow{0%{transform:translate(0)}to{transform:translate(-2%,-2%)}}.hero h1{background:linear-gradient(135deg, #fff 0%, #c7d2fe 50%, var(--accent) 100%);-webkit-text-fill-color:transparent;letter-spacing:-1px;-webkit-background-clip:text;margin-bottom:16px;font-size:2.8rem;font-weight:700;position:relative}.hero p{color:var(--text-secondary);margin-bottom:36px;font-size:1.15rem;position:relative}.hero .btn{padding:14px 36px;font-size:1.05rem;position:relative}.progress-section{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:32px;padding:28px}.progress-section h2{color:var(--text);margin-bottom:16px;font-size:1.1rem}.progress-bar{background:var(--bg-elevated);border-radius:5px;height:10px;margin-bottom:10px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary), var(--accent));border-radius:5px;height:100%;transition:width .6s cubic-bezier(.22,1,.36,1);position:relative}.progress-fill:after{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);animation:2s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.categories{margin:48px 0}.categories h2{margin-bottom:24px;font-size:1.5rem;font-weight:600}.category-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}.category-card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);color:inherit;padding:28px;transition:all .3s cubic-bezier(.22,1,.36,1);display:block;position:relative;overflow:hidden;text-decoration:none!important}.category-card:before{content:"";background:linear-gradient(90deg, var(--primary), var(--accent));opacity:0;height:3px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.category-card:hover{border-color:var(--primary);box-shadow:var(--glow);transform:translateY(-6px)}.category-card:hover:before{opacity:1}.category-card h3{color:var(--text);margin-bottom:8px;font-size:1.15rem}.category-card p{color:var(--text-muted);margin-bottom:16px;font-size:.9rem;line-height:1.6}.count{color:var(--primary-light);font-size:.85rem;font-weight:500}.tutorials-page h1{margin:32px 0 24px;font-size:1.8rem;font-weight:600}.filters{flex-wrap:wrap;gap:10px;margin-bottom:28px;display:flex}.filter-btn{border:1px solid var(--border);cursor:pointer;color:var(--text-secondary);background:0 0;border-radius:24px;padding:8px 20px;font-size:.9rem;transition:all .2s}.filter-btn:hover{border-color:var(--primary);color:var(--primary-light);background:#6366f114}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 12px #6366f14d}.tutorial-list{flex-direction:column;gap:12px;display:flex}.tutorial-card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);color:inherit;justify-content:space-between;align-items:center;padding:22px 28px;transition:all .25s;display:flex;text-decoration:none!important}.tutorial-card:hover{border-color:var(--primary);box-shadow:var(--glow);transform:translate(6px)}.tutorial-info h3{color:var(--text);margin-top:6px;font-size:1.05rem}.tutorial-meta{flex-shrink:0;align-items:center;gap:10px;display:flex}.category-tag{color:var(--primary-light);background:#6366f11f;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:500}.difficulty{border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:500}.difficulty.beginner{color:#34d399;background:#10b9811f}.difficulty.intermediate{color:#fbbf24;background:#f59e0b1f}.difficulty.advanced{color:#f87171;background:#ef44441f}.completed-badge{color:var(--success);font-size:.85rem;font-weight:500}.tutorial-detail{max-width:860px;margin:32px auto}.tutorial-header{margin-bottom:32px}.back-link{color:var(--text-muted);border-radius:8px;align-items:center;gap:6px;margin-bottom:20px;padding:6px 14px;transition:all .2s;display:inline-flex}.back-link:hover{background:var(--bg-card);color:var(--text)}.header-info{gap:10px;margin-bottom:14px;display:flex}.tutorial-header h1{letter-spacing:-.5px;font-size:2.2rem;font-weight:700;line-height:1.3}.tutorial-content{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:28px;padding:40px}.markdown-body{color:var(--text-secondary);line-height:1.8}.markdown-body h1{color:var(--text);border-bottom:1px solid var(--border);margin:32px 0 16px;padding-bottom:8px;font-size:1.8rem;font-weight:700}.markdown-body h2{color:var(--text);margin:28px 0 12px;font-size:1.45rem;font-weight:600}.markdown-body h3{color:var(--text);margin:20px 0 10px;font-size:1.2rem;font-weight:600}.markdown-body p{margin:12px 0}.markdown-body ul,.markdown-body ol{margin:12px 0;padding-left:28px}.markdown-body li{margin:6px 0}.markdown-body code{color:var(--primary-light);background:#6366f11a;border-radius:6px;padding:2px 8px;font-family:Fira Code,Cascadia Code,JetBrains Mono,monospace;font-size:.88em}.markdown-body pre{background:var(--code-bg);color:#e6edf3;border:1px solid var(--code-border);border-radius:10px;margin:16px 0;padding:20px 24px;position:relative;overflow-x:auto}[data-theme=light] .markdown-body pre{color:#24292f}.markdown-body pre:before{content:"";background:#ff5f57;border-radius:50%;width:12px;height:12px;position:absolute;top:12px;left:16px;box-shadow:20px 0 #febc2e,40px 0 #28c840}.markdown-body pre code{color:inherit;background:0 0;padding:12px 0 0;font-size:.9rem;line-height:1.7;display:block}.markdown-body blockquote{border-left:4px solid var(--primary);color:var(--text-secondary);background:#6366f10d;border-radius:0 8px 8px 0;margin:16px 0;padding:12px 20px}.markdown-body table{border-collapse:collapse;border:1px solid var(--border);border-radius:8px;width:100%;margin:16px 0;overflow:hidden}.markdown-body th,.markdown-body td{border:1px solid var(--border);text-align:left;padding:10px 16px}.markdown-body th{background:var(--bg-elevated);color:var(--text);font-weight:600}.markdown-body td{background:var(--bg-card)}.markdown-body hr{background:var(--border);border:none;height:1px;margin:24px 0}.markdown-body strong{color:var(--text);font-weight:600}.code-section{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:28px;overflow:hidden}.code-header{background:var(--bg-elevated);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.code-header h3{color:var(--text);align-items:center;gap:8px;font-size:.95rem;display:flex}.code-header h3:before{content:"{}";color:var(--accent);font-family:monospace}.code-section pre{background:var(--code-bg);border:none;margin:0;padding:24px;overflow-x:auto}.code-section pre:before{display:none}.code-section code{font-family:Fira Code,Cascadia Code,JetBrains Mono,monospace;font-size:.9rem;line-height:1.7}.tutorial-footer{text-align:center;padding:32px 0}.login-hint{color:var(--text-muted)}.login-hint a{font-weight:500}.auth-page{justify-content:center;align-items:center;min-height:60vh;display:flex}.auth-card{background:var(--bg-card);border:1px solid var(--border);width:100%;max-width:420px;box-shadow:var(--shadow);border-radius:20px;padding:44px}.auth-card h2{text-align:center;margin-bottom:28px;font-size:1.6rem;font-weight:600}.form-group{margin-bottom:20px}.form-group label{color:var(--text-secondary);margin-bottom:8px;font-size:.9rem;font-weight:500;display:block}.form-group input{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);border-radius:10px;padding:12px 16px;font-size:.95rem;transition:all .2s}.form-group input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #6366f126}.form-group input::placeholder{color:var(--text-muted)}.error{color:var(--danger);text-align:center;margin-bottom:12px;font-size:.9rem}.auth-link{text-align:center;color:var(--text-muted);margin-top:20px}.loading{text-align:center;color:var(--text-muted);padding:80px 20px;font-size:1.1rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{color:#fff;background:#6366f14d}[data-theme=light] ::selection{color:#1e293b;background:#6366f126}[data-theme=light] .markdown-body code{color:#6366f1;background:#6366f114}[data-theme=light] .markdown-body pre code,[data-theme=light] .code-section code{color:#24292f}[data-theme=light] .hljs-keyword{color:#cf222e}[data-theme=light] .hljs-string{color:#0a3069}[data-theme=light] .hljs-comment{color:#6e7781}[data-theme=light] .hljs-function{color:#8250df}[data-theme=light] .hljs-number{color:#0550ae}[data-theme=light] .hljs-title{color:#8250df}[data-theme=light] .hljs-built_in{color:#953800}[data-theme=light] .hljs-params{color:#24292f}[data-theme=light] .hljs-attr,[data-theme=light] .hljs-literal{color:#0550ae}[data-theme=light] .hljs-meta{color:#6e7781}.hljs-keyword{color:#ff7b72}.hljs-string{color:#a5d6ff}.hljs-comment{color:#8b949e}.hljs-function{color:#d2a8ff}.hljs-number{color:#79c0ff}.hljs-title{color:#d2a8ff}.hljs-built_in{color:#ffa657}.hljs-params{color:#e6edf3}.hljs-attr,.hljs-literal{color:#79c0ff}.hljs-meta{color:#8b949e}.hljs-selector-class,.hljs-selector-tag{color:#7ee787}.hljs-property{color:#79c0ff}.hljs-type,.hljs-variable{color:#ffa657}.hljs-name,.hljs-tag{color:#7ee787}.hljs-attribute{color:#79c0ff}[data-theme=light] .logo-text{color:#1e293b}[data-theme=light] .nav-item{color:#94a3b8}[data-theme=light] .nav-item:hover{color:#1e293b;background:#6366f10d}[data-theme=light] .nav-item.active{color:#6366f1;background:#6366f114}[data-theme=light] .user-name{color:#1e293b}[data-theme=light] .nav-action{color:#64748b!important}[data-theme=light] .nav-action:hover{color:#1e293b!important}[data-theme=light] .tree-cat{color:#475569}[data-theme=light] .tree-cat:hover{color:#1e293b;background:#6366f10f}[data-theme=light] .tree-cat-name{color:#1e293b}[data-theme=light] .tree-arrow{color:#94a3b8}[data-theme=light] .tree-cat-count{color:#64748b;background:#e2e8f0}[data-theme=light] .tree-item{color:#475569}[data-theme=light] .tree-item:hover{color:#1e293b;background:#6366f10f}[data-theme=light] .tree-item.active{color:#4f46e5;background:#6366f11a}[data-theme=light] .tree-item-dot{background:#cbd5e1}[data-theme=light] .tree-item.active .tree-item-dot{background:#6366f1;box-shadow:0 0 8px #6366f140}[data-theme=light] .tree-item.completed .tree-item-dot{background:#10b981}[data-theme=light] .tree-check{color:#059669}[data-theme=light] .sidebar-header h2{color:#1e293b}[data-theme=light] .welcome-icon{filter:none}[data-theme=light] .welcome h2{background:linear-gradient(135deg,#4f46e5,#0891b2);-webkit-text-fill-color:transparent;-webkit-background-clip:text}[data-theme=light] .stat-num{color:#6366f1}[data-theme=light] .detail-header h1{color:#1e293b}.site-footer{text-align:center;border-top:1px solid var(--border);color:var(--text-muted);margin-top:60px;padding:40px 20px;font-size:.85rem}.site-footer a{color:var(--text-secondary)}@media (width<=768px){.hero h1{font-size:2rem}.hero{padding:50px 20px}.tutorial-content{padding:24px}.tutorial-card{flex-direction:column;align-items:flex-start;gap:12px}.category-grid{grid-template-columns:1fr}}