.app{display:grid;grid-template-columns:var(--sidebar-w,268px) 1fr;min-height:100vh;transition:grid-template-columns .32s var(--ease)}.app.collapsed{--sidebar-w:76px}.sidebar{position:sticky;top:0;height:100vh;background:var(--sidebar-bg);background-image:var(--sidebar-grad);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:40}.sb-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px;min-height:64px}.sb-logo{width:38px;height:38px;border-radius:11px;flex:0 0 38px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));box-shadow:var(--shadow-brand);display:grid;place-items:center;color:#fff;position:relative}.sb-logo svg{width:21px;height:21px}.sb-brand-text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap;overflow:hidden}.sb-brand-text b{font-size:16px;font-weight:700;letter-spacing:-.01em}.sb-brand-text span{font-size:11px;color:var(--text-3);font-family:var(--font-mono);letter-spacing:.04em}.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 12px 12px}.sb-section-label{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;padding:14px 12px 6px}.collapsed .sb-section-label{opacity:0;height:8px;padding:4px}.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-control);color:var(--text-2);font-size:14px;font-weight:500;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;transition:background .15s,color .15s;white-space:nowrap}.nav-item svg{width:18px;height:18px;flex:0 0 18px;stroke-width:2}.nav-item .nav-label{overflow:hidden;text-overflow:ellipsis;flex:1}.nav-item:hover{background:var(--surface-hover);color:var(--text)}.nav-item.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}.nav-item.active:before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--brand)}.nav-chevron-btn{display:inline-flex;align-items:center;justify-content:center;margin:-4px -4px -4px 0;padding:4px;border-radius:6px;flex:0 0 auto}.nav-chevron-btn:hover{background:var(--surface-hover)}.nav-item .nav-chevron{width:15px;height:15px;flex:0 0 15px;color:var(--text-3);transition:transform .2s}.nav-item.open .nav-chevron{transform:rotate(90deg)}.collapsed .nav-chevron-btn{display:none}.nav-badge{margin-left:auto;font-size:10px;font-weight:700;font-family:var(--font-mono);background:var(--brand);color:#fff;padding:1px 6px;border-radius:99px;letter-spacing:.02em}.nav-sub{display:none;padding-left:14px;margin:2px 0}.nav-sub.show{display:block}.nav-sub .nav-item{font-size:13px;padding:7px 12px;color:var(--text-3)}.nav-sub .nav-item:after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--border)}.nav-sub .nav-item.active{color:var(--brand-ink);background:var(--brand-soft)}.collapsed .nav-badge,.collapsed .nav-chevron,.collapsed .nav-label,.collapsed .nav-sub{display:none}.collapsed .nav-item{justify-content:center;padding:11px}.collapsed .sb-brand{justify-content:center;padding:20px 0 16px}.collapsed .sb-brand-text{display:none}.collapsed .nav-item[data-tip]:hover:after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);background:var(--text);color:var(--surface);padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;z-index:80;box-shadow:var(--shadow-md)}.sb-footer{padding:10px 12px 14px;border-top:1px solid var(--border)}.user-card{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;cursor:pointer;transition:background .15s}.user-card:hover{background:var(--surface-hover)}.avatar{width:36px;height:36px;border-radius:10px;flex:0 0 36px;background:linear-gradient(135deg,var(--brand-400),var(--brand-600));display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}.user-meta{display:flex;flex-direction:column;line-height:1.25;overflow:hidden;flex:1}.user-meta b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-meta span{font-size:11.5px;color:var(--text-3);font-family:var(--font-mono)}.user-logout{color:var(--text-3);display:grid;place-items:center;padding:6px;border-radius:8px}.user-logout:hover{color:var(--danger);background:var(--danger-soft)}.collapsed .user-logout,.collapsed .user-meta{display:none}.collapsed .user-card{justify-content:center;padding:9px 0}.main{display:flex;flex-direction:column;min-width:0}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:0 28px;height:64px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}.icon-btn{width:38px;height:38px;border-radius:10px;flex:0 0 38px;display:grid;place-items:center;cursor:pointer;color:var(--text-2);background:transparent;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}.icon-btn:hover{background:var(--surface);color:var(--text);border-color:var(--border)}.icon-btn svg{width:19px;height:19px}.crumb{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--text-3)}.crumb b{color:var(--text);font-weight:600}.crumb a{color:var(--text-2);text-decoration:none;font-weight:500}.crumb a:hover{color:var(--brand-ink)}.crumb .crumb-ic{display:inline-flex;color:var(--brand)}.crumb .crumb-ic svg{width:16px;height:16px}.crumb .crumb-sep{width:14px;height:14px;color:var(--text-3);flex:0 0 14px}.crumb svg{width:15px;height:15px}.topbar-spacer{flex:1}.topbar-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 14px;width:240px;color:var(--text-3);cursor:text}.topbar-search svg{width:16px;height:16px}.topbar-search input{border:none;background:none;outline:none;font:inherit;font-size:13.5px;color:var(--text);width:100%}.kbd{font-family:var(--font-mono);font-size:11px;border:1px solid var(--border);border-radius:6px;padding:1px 5px;color:var(--text-3)}.pill-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:transform .12s var(--ease),box-shadow .2s,background .15s}.pill-btn svg{width:16px;height:16px}.pill-btn.primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}.pill-btn.primary:hover{transform:translateY(-1px)}.pill-btn.ghost{color:var(--text-2);border-color:var(--border);background:var(--surface)}.pill-btn.ghost:hover{color:var(--text);border-color:var(--border-strong)}.content{flex:1;overflow-y:auto;padding:30px 36px 64px;position:relative}.content-inner{max-width:1180px;margin:0 auto}.page-wash{position:absolute;inset:0 0 auto 0;height:280px;z-index:0;pointer-events:none;background:radial-gradient(1200px 280px at 18% -40%,var(--bg-grad-1),transparent 70%);opacity:.8}.page-head{position:relative;z-index:1;margin-bottom:28px}.page-head h1{margin:0 0 6px;font-size:28px;font-weight:700;letter-spacing:-.02em}.page-head p{margin:0;color:var(--text-2);font-size:14.5px;max-width:640px}.page-head .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.section{position:relative;z-index:1;margin-bottom:38px}.section-head{gap:12px;margin-bottom:16px}.section-head,.section-head h2{display:flex;align-items:center}.section-head h2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em;gap:9px}.section-head .dot{width:7px;height:7px;border-radius:99px;background:var(--brand)}.section-head .count{font-size:12px;color:var(--text-3);font-family:var(--font-mono);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:2px 9px;white-space:nowrap}.section-head .grow{flex:1}.see-all{font-size:13px;color:var(--brand-ink);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px}.see-all svg{width:14px;height:14px}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.tool-grid.cols-3{grid-template-columns:repeat(3,1fr)}@media (max-width:1100px){.tool-grid.cols-3{grid-template-columns:repeat(2,1fr)}}.tcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:18px;cursor:pointer;overflow:hidden;transition:transform .18s var(--ease),box-shadow .25s,border-color .2s;display:block;text-decoration:none;color:var(--text)}.tcard:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.04)}.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--cat-color,var(--brand-200))}.tcard-top{display:flex;align-items:flex-start;gap:13px;margin-bottom:12px}.tcard-icon{width:46px;height:46px;border-radius:13px;flex:0 0 46px;display:grid;place-items:center;background:var(--cat-soft);color:var(--cat-color);transition:transform .2s var(--ease)}.tcard:hover .tcard-icon{transform:scale(1.06) rotate(-3deg)}.tcard-icon svg{width:23px;height:23px;stroke-width:2}.tcard-title{flex:1;min-width:0}.tcard-title h3{margin:0 0 3px;font-size:15.5px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}.tcard-cat{font-size:11px;font-weight:600;color:var(--cat-color)}.tcard-desc{font-size:13px;color:var(--text-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tcard-star{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--text-3);background:transparent;transition:background .15s,color .15s,transform .15s;z-index:2}.tcard-star:hover{background:var(--surface-hover);color:var(--star)}.tcard-star.on{color:var(--star)}.tcard-star.on svg{fill:var(--star)}.tcard-star svg{width:17px;height:17px}.tcard-star.pop{animation:starpop .35s var(--ease)}@keyframes starpop{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;letter-spacing:.01em;line-height:1.5}.badge svg{width:11px;height:11px}.badge.premium{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#7c4a03}.badge.new{background:var(--brand);color:#fff}.badge.soft{background:var(--cat-soft);color:var(--cat-color)}.tcard.feature{padding:20px}.tcard.feature .tcard-icon{width:50px;height:50px;flex-basis:50px;border-radius:14px}.tcard.feature .tcard-icon svg{width:25px;height:25px}.filter-bar{align-items:center;gap:14px;margin-bottom:20px;position:sticky;top:0;z-index:5}.chips,.filter-bar{display:flex;flex-wrap:wrap}.chips{gap:8px;flex:1}.chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:7px 13px;border-radius:var(--r-pill);font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text-2);transition:all .16s var(--ease);white-space:nowrap}.chip .chip-dot{width:8px;height:8px;border-radius:99px;background:var(--chip-color,var(--text-3))}.chip:hover{border-color:var(--border-strong);color:var(--text)}.chip.active{background:var(--chip-color,var(--brand));border-color:transparent;color:#fff;box-shadow:0 4px 12px -3px var(--chip-color,var(--brand))}.chip.active .chip-dot{background:hsla(0,0%,100%,.9)}.search-box{display:flex;align-items:center;gap:9px;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:9px 15px;color:var(--text-3);transition:border-color .15s,box-shadow .15s}.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}.search-box svg{width:17px;height:17px}.search-box input{border:none;background:none;outline:none;font:inherit;font-size:13.5px;color:var(--text);width:200px}.empty{text-align:center;padding:48px 24px;border:1px dashed var(--border-strong);border-radius:var(--r-card);background:var(--surface-2)}.empty-illu{width:96px;height:96px;margin:0 auto 16px}.empty h3{margin:0 0 6px;font-size:16px;font-weight:650}.empty p{margin:0 0 18px;color:var(--text-2);font-size:13.5px}.skel{background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-hover) 50%,var(--surface-2) 70%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:8px}@keyframes shimmer{to{background-position:-200% 0}}.toast-wrap{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;flex-direction:column;gap:8px}.toast,.toast-wrap{display:flex;align-items:center}.toast{gap:9px;background:var(--text);color:var(--surface);padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);animation:toastin .3s var(--ease)}.toast svg{width:16px;height:16px;color:#4ade80}@keyframes toastin{0%{opacity:0;transform:translateY(12px)}}.scrim{position:fixed;inset:0;background:rgba(10,12,22,.5);backdrop-filter:blur(2px);z-index:38;opacity:0;pointer-events:none;transition:opacity .25s}.scrim.show{opacity:1;pointer-events:auto}@media (max-width:880px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;width:268px;transform:translateX(-100%);transition:transform .3s var(--ease)}.sidebar.drawer-open{transform:translateX(0);box-shadow:var(--shadow-lg)}.content{padding:22px 18px 60px}.topbar{padding:0 16px}.topbar-search{display:none}}