*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Microsoft YaHei,Helvetica Neue,Arial,sans-serif;color:#fff;background:url(/wallhaven-vgoggm.jpg) center/cover no-repeat fixed;min-height:100vh;display:flex;align-items:stretch}body:before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,#00000073,#0a0a1ed9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:0}#app{display:flex;width:100%;height:100vh;position:relative;z-index:1}.sidebar{width:82px;background:#00000047;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:16px 8px;display:flex;flex-direction:column;gap:10px;align-items:center;border-right:1px solid rgba(255,255,255,.04);position:sticky;top:0;height:100vh;overflow-y:auto}.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px}.brand-icon{width:36px;height:36px;border-radius:6px;object-fit:cover}.brand-text{font-weight:700;color:#a6d8ff;font-size:.95rem}.sidebar nav{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center}.nav-item{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:#ffffffd9;padding:6px 4px;border-radius:8px;transition:all .18s ease;font-size:.75rem}.nav-item .nav-icon{width:20px;height:20px;opacity:.95}.nav-item span{display:block;line-height:1;margin-top:2px;font-size:.78rem;color:#a6d8ff;opacity:.9}.nav-item.active,.nav-item:hover{background:#64b4ff2e;transform:translate(2px);box-shadow:0 4px 25px #78c8ff59}.content{flex:1;padding:20px 36px;overflow-y:auto;-webkit-overflow-scrolling:touch}.head{top:0;background:linear-gradient(180deg,#00000040,#0000001f);padding:28px;border-radius:12px;margin-bottom:18px;z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.04)}.head h1{margin:0 0 6px;font-size:1.4rem;color:#fff}.head .lead{margin:0;font-size:1rem;color:#a6d8ff;opacity:.9}.section{margin-bottom:26px;scroll-margin-top:80px}.section h2{color:#89c9ff;margin:8px 0 12px}.section h3{color:#a6d8ff;margin:12px 0 10px;font-size:.98rem}.cards{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.card{background:#ffffff0a;border-radius:12px;padding:10px;transition:transform .18s ease,background .18s ease;box-shadow:0 6px 22px #00000059}.card a{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit}.card:hover{transform:translateY(-6px);background:#ffffff12}.favicon{width:40px;height:40px;object-fit:contain;flex:0 0 48px}.meta h4{margin:0;font-size:1rem;color:#fff}.meta p{margin:4px 0 0;font-size:.86rem;color:#a6d8ff;opacity:.9}@media (max-width: 900px){.sidebar{width:100%;height:auto;flex-direction:row;padding:8px;gap:6px;position:fixed;top:0;left:0;right:0;z-index:6;background:#00000014;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 30px #00000040}.sidebar nav{flex-direction:row;flex-wrap:nowrap;width:100%;gap:4px;justify-content:flex-start;overflow-x:auto}.sidebar nav::-webkit-scrollbar{display:none}#app{flex-direction:column}.content{padding-top:60px}.section{scroll-margin-top:80px}.nav-item span,.brand-text{display:none}.nav-item{min-width:48px}}