[v-cloak]{display:none}:root{--primary-color:#409eff;--bg-gradient:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--glass-bg:rgba(255,255,255,.85);--glass-border:rgba(255,255,255,.5)}body{background:var(--bg-gradient);min-height:100vh;margin:0;padding:20px;font-family:Inter,Noto Sans SC,sans-serif}#app{width:95%;max-width:1200px;min-height:80vh;margin:0 auto}.glass-container{background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:20px;flex-direction:column;min-height:100%;display:flex;overflow:visible;box-shadow:0 8px 32px rgba(31,38,135,.15)}.header{border-bottom:1px solid rgba(0,0,0,.05);flex-direction:column;gap:15px;padding:15px 30px 20px;display:flex}.header-top-bar{justify-content:space-between;align-items:center;width:100%;display:flex}.top-link{color:#409eff;background:rgba(64,158,255,.1);border-radius:6px;padding:6px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .3s}.top-link:hover{background:rgba(64,158,255,.2);transform:translateY(-1px)}.language-links{align-items:center;gap:8px;font-size:14px;display:flex}.language-links a{color:#606266;border-radius:4px;padding:4px 8px;text-decoration:none;transition:all .3s}.language-links a:hover{color:#409eff;background:rgba(64,158,255,.1)}.language-links .current-lang{color:#409eff;background:rgba(64,158,255,.15);font-weight:600}.language-links span{color:#dcdfe6}.header-main{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;display:flex}.logo-area{align-items:center;gap:12px;display:flex}.logo-area h1{-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#409eff,#304156) text;margin:0;font-size:1.5rem;font-weight:700}.controls-area{flex-wrap:wrap;align-items:center;gap:15px;display:flex}.main-content{flex:none;align-items:stretch;gap:10px;min-height:300px;padding:25px 30px;display:flex;overflow:visible}.converter-box{flex-direction:column;flex:1;gap:12px;min-height:250px;display:flex;position:relative}.converter-box .el-textarea{flex-direction:column;flex:1;display:flex}.input-info-bar{color:#909399;background:rgba(255,255,255,.6);border-radius:8px;justify-content:space-between;align-items:center;margin-top:-5px;padding:8px 12px;font-size:13px;display:flex}.output-info-bar{opacity:.8;background:rgba(255,255,255,.4)}.info-item{align-items:center;gap:5px;display:flex}.box-label{color:#606266;justify-content:space-between;align-items:center;font-weight:600;display:flex}.el-textarea{height:100%}.el-textarea__inner{resize:vertical;background:rgba(255,255,255,.5);border-color:rgba(0,0,0,.1);border-radius:12px;min-height:200px;padding:15px;font-size:16px;line-height:1.6;transition:all .3s cubic-bezier(.4,0,.2,1);height:100%!important}.el-textarea__inner:focus{background:#fff;box-shadow:0 4px 12px rgba(64,158,255,.1)}.middle-divider{color:#909399;flex-direction:column;justify-content:center;align-items:center;display:flex}.switch-btn{cursor:pointer;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex;box-shadow:0 2px 8px rgba(0,0,0,.1)}.switch-btn:hover{color:var(--primary-color);transform:rotate(180deg);box-shadow:0 4px 12px rgba(64,158,255,.2)}.footer{color:#909399;background:rgba(0,0,0,.02);border-top:1px solid rgba(0,0,0,.05);justify-content:center;padding:15px 30px;font-size:13px;display:flex}.footer-content{flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;display:flex}.footer-link{color:#409eff;font-weight:500;text-decoration:none;transition:all .3s}.footer-link:hover{color:#66b1ff;text-decoration:underline}.gear-btn{font-size:20px}.article-section{padding:0 40px 30px}.article-content{color:#606266;margin:0 auto;line-height:1.8}.article-content h2{color:#303133;margin-bottom:15px;font-size:1.3rem}.article-content h3{color:#409eff;margin:15px 0 10px;font-size:1.1rem}.article-content ol{margin:0;padding-left:20px}.article-content ol li{margin-bottom:8px}.features-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:25px;display:grid}.feature-card{border-left:3px solid;border-radius:8px;padding:15px}.feature-card h4{margin:0 0 8px;font-size:1rem}.feature-card p{margin:0;font-size:.95rem}.tips-section{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:10px;margin-top:20px;padding:20px}.tips-section h3{color:#fff;margin:0 0 10px;font-size:1.1rem}.tips-section ul{margin:0;padding-left:20px;font-size:.95rem}.tips-section ul li{margin-bottom:5px}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter-from,.fade-leave-to{opacity:0}@media (max-width:768px){body{padding:10px}#app{width:100%;min-height:auto}.header{gap:12px;padding:12px 20px 15px}.header-top-bar{flex-direction:column;order:-1;gap:8px}.top-link{padding:5px 14px;font-size:13px}.language-links{flex-wrap:wrap;justify-content:center;gap:5px;font-size:12px}.language-links a{padding:3px 6px}.header-main{flex-direction:column;gap:12px;width:100%}.logo-area h1{font-size:1.3rem}.controls-area{justify-content:space-between;width:100%}.main-content{flex-direction:column;gap:15px;min-height:auto;padding:20px}.converter-box{min-height:200px}.input-info-bar{flex-direction:column;align-items:flex-start;gap:5px;padding:6px 10px}.el-textarea__inner{min-height:150px;padding:12px;font-size:15px}.middle-divider{margin:5px 0;transform:rotate(90deg)}.footer{padding:12px 20px}.footer-content{text-align:center;flex-direction:column;gap:8px}.article-section{padding:0 20px 20px}.article-content h2{font-size:1.2rem}.article-content h3{font-size:1rem}.features-grid{grid-template-columns:1fr;gap:15px}.feature-card{padding:12px}.tips-section{padding:15px}.tips-section ul{padding-left:15px;font-size:.9rem}}@media (max-width:480px){.controls-area{flex-direction:column;align-items:stretch}.box-label{flex-direction:column;align-items:flex-start;gap:8px}}