:root{--pri: #1677ff;--pri-d: #0d5bd6;--txt: #111827;--sub: #6b7280;--line: #e5e7eb;--bg: #f5f6f8;--side: #111827}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:var(--txt);background:var(--bg);font-size:14px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}.pc{display:grid;grid-template-columns:220px 1fr 300px;min-height:100vh}.side{background:var(--side);color:#e5e7eb;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:8px;padding:0 8px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.logo{font-size:22px}.name{font-weight:700;font-size:15px;color:#fff}.nav{display:flex;flex-direction:column;gap:4px;margin-top:14px}.nav-i{padding:10px 12px;border-radius:8px;font-size:13px;color:#cbd5e1}.nav-i:hover{background:#ffffff0f;color:#fff}.nav-i.on{background:var(--pri);color:#fff;font-weight:600}.side-foot{margin-top:auto;display:flex;justify-content:space-between;font-size:11px;color:#6b7280;padding:0 8px}.main{padding:0 24px 40px;min-width:0}.topbar{display:flex;align-items:center;gap:12px;height:64px;position:sticky;top:0;background:var(--bg);z-index:10}.search{display:flex;flex:1;max-width:560px}.search input{flex:1;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:8px 0 0 8px;font-size:13px;outline:none;background:#fff}.search input:focus{border-color:var(--pri)}.search button{height:38px;padding:0 18px;border:none;background:var(--pri);color:#fff;border-radius:0 8px 8px 0;font-size:13px}.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}.chip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:12px}.btn{background:var(--pri);color:#fff;border-radius:8px;padding:8px 16px;font-size:13px;border:none}.btn.ghost{background:#fff;color:var(--sub);border:1px solid var(--line)}.right{padding:64px 20px 40px 0;display:flex;flex-direction:column;gap:14px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}.card h4{margin:0 0 8px;font-size:13px}.muted{margin:0;color:var(--sub);font-size:12px;line-height:1.7}.recent{display:block;padding:6px 0;font-size:12px;color:var(--sub);border-bottom:1px dashed var(--line)}.recent:last-child{border-bottom:none}.recent:hover{color:var(--pri)}.h1{font-size:20px;font-weight:800;margin:8px 0 4px}.sub{color:var(--sub);font-size:12px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}.chip-btn{background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:12px;color:var(--sub)}.chip-btn.on{background:#eef4ff;border-color:var(--pri);color:var(--pri);font-weight:600}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.tool{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.15s;display:block}.tool:hover{border-color:var(--pri);box-shadow:0 6px 18px #1677ff1a;transform:translateY(-1px)}.tool-n{font-weight:600;font-size:14px;display:block}.tool-d{color:var(--sub);font-size:12px;margin-top:6px;display:block;line-height:1.5;height:36px;overflow:hidden}.tool-m{margin-top:10px;display:flex;justify-content:space-between;font-size:11px;color:var(--sub)}.tag{background:#f3f4f6;border-radius:4px;padding:2px 6px}.tag.paid{background:#fff7ed;color:#c2410c}.state{padding:60px 0;text-align:center;color:var(--sub);font-size:13px}