*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f5f7fa,#e4edf5);min-height:100vh}#app{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh;background:#f0f4f8}.app-header{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;padding:1rem 2rem;box-shadow:0 2px 10px #0000001a}.header-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:15px}.logo-icon{font-size:32px;animation:float 3s ease-in-out infinite}.logo-text h1{font-size:1.8rem;font-weight:600;margin-bottom:.2rem}.logo-text p{font-size:.9rem;opacity:.8}.app-body{display:flex;flex:1;max-width:1400px;margin:0 auto;width:100%;overflow:hidden}.sidebar{width:200px;background:#fff;padding:1.5rem;box-shadow:2px 0 10px #0000000d;overflow-y:auto;transition:all .3s ease;flex-shrink:0}.category-filters{margin-bottom:1.5rem}.category-filters h3{font-size:1rem;color:#333;margin-bottom:1rem;font-weight:600}.filter-buttons{display:flex;flex-direction:column;gap:.5rem}.filter-btn{padding:.6rem 1rem;border:1px solid #e1e5eb;background:#fff;color:#666;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s;text-align:left}.filter-btn:hover{background:#f0f7ff;border-color:#1890ff;color:#1890ff}.filter-btn.active{background:#1890ff;color:#fff;border-color:#1890ff}.nav-menu{display:flex;flex-direction:column;gap:.2rem}.nav-item{display:flex;align-items:center;gap:12px;padding:.8rem 1rem;cursor:pointer;border-radius:6px;transition:all .2s;color:#333;border:1px solid transparent}.nav-item:hover{background:#f0f7ff;border-color:#d0e4ff;transform:translate(2px)}.nav-item.active{background:linear-gradient(135deg,#1890ff,#096dd9);color:#fff;border-color:#1890ff;box-shadow:0 4px 12px #1890ff33}.nav-icon{font-size:1.2rem;width:20px;text-align:center}.nav-text{font-size:.95rem;font-weight:500}.main-content{flex:1;padding:2rem;overflow-y:auto;background:linear-gradient(135deg,#f8fafc,#edf2f7)}.fade-enter-active,.fade-leave-active{transition:opacity .25s ease}.fade-enter-from,.fade-leave-to{opacity:0}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@media(max-width:1024px){.app-body{flex-direction:column}.sidebar{width:100%;padding:1rem;max-height:300px}.header-content{flex-direction:column;gap:.5rem;text-align:center}.logo{justify-content:center}.main-content{padding:1rem}}@media(max-width:768px){.app-header{padding:1rem}.sidebar{max-height:250px}.logo-icon{font-size:28px}.logo-text h1{font-size:1.5rem}.nav-item{padding:.7rem .8rem}.nav-icon{font-size:1.1rem}.nav-text{font-size:.9rem}}.tool-page{max-width:1400px;margin:0 auto;padding:20px}.tool-container{background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.tool-container:hover{box-shadow:0 8px 30px #0000001f;transform:translateY(-2px)}.tool-title{font-size:28px;margin-bottom:25px;color:#2c3e50;text-align:center;font-weight:600;padding:25px 20px 15px;border-bottom:1px solid #eef2f7;background:linear-gradient(135deg,#f8fafc,#edf2f7)}.tool-intro{padding:0 20px 20px;text-align:center;color:#718096;font-size:16px;line-height:1.6}.tool-content{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:20px}.input-section,.output-section{display:flex;flex-direction:column;gap:15px;background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px #0000000d}.input-section{order:1}.output-section{order:2}@media(max-width:768px){.tool-content{grid-template-columns:1fr}.input-section{order:2}.output-section{order:1}.tool-page{padding:15px}.tool-title{font-size:24px;padding:20px 15px 10px}}