/* 全局样式继承自主页，这里只添加博客详情页面特有的样式 */
:root {
  --primary-color: #7e3ff2;
  --secondary-color: #5e17eb;
  --text-color: #333;
  --light-text: #666;
  --white: #fff;
  --light-bg: #f8f9fa;
  --border-color: #e9ecef;
  --gradient-bg: linear-gradient(135deg, #7e3ff2, #5e17eb);
}

/* 博客详情页面容器 */
.blog-detail-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.blog-detail-container {
  padding: 100px 0 50px;
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  width: 100%;
  padding: 0 15px;
}

/* 返回按钮 */
.back-button {
  margin-bottom: 20px;
  margin-top: 20px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.back-link:hover {
  color: var(--secondary-color);
}

.arrow {
  margin-right: 8px;
  font-size: 20px;
}

/* 博客文章样式 */
.blog-article {
  border-radius: 10px;
  overflow: hidden;
  padding: 30px;
  margin-bottom: 40px;
}

.blog-title {
  font-size: 45px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-color);
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.blog-cover {
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
}

.blog-cover img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.blog-content {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-color);
  margin-bottom: 30px;
}

.blog-content h1,.blog-content h2 {
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--text-color);
}

.blog-content p {
  margin-bottom: 20px;
}
.blog-content img{
  margin-bottom: 20px;
  margin-top: 20px;
}
.blog-content hr{
  margin-bottom: 20px;
  margin-top: 20px;
}
.blog-content table{
  text-align: center;
}

/* 点赞区域 */
.like-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
}

.like-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-bg);
  border: none;
  border-radius: 50px;
  padding: 10px 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.like-button:hover {
  background-color: #e9ecef;
}

.like-button img {
  width: 24px;
  margin-right: 10px;
}

.like-count {
  margin-top: 10px;
  font-size: 16px;
  color: var(--light-text);
}

/* 分享区域 */
.share-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.share-section h3 {
  margin-right: 20px;
  font-size: 18px;
  font-weight: 500;
}

.share-buttons {
  display: flex;
  gap: 15px;
}

.share-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-button img {
  width: 20px;
  height: 20px;
}

.weixin {
  background-color: #07c160;
}

.weibo {
  background-color: #e6162d;
}

.twitter {
  background-color: #1da1f2;
}

/* 相关推荐 */
.related-posts {
  margin-top: 30px;
}

/* 标签区域 */
.tags-section {
  margin-top: 50px;
}

.tags-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  position: relative;
  padding-left: 15px;
}

.tags-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  height: 24px;
  width: 4px;
  background: var(--gradient-bg);
  border-radius: 2px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tags-container h1{
  font-size: 14px;
  color: #666;
}
.tags-container h1:hover{
  color: #fff;
}

.tag-item {
  display: inline-block;
  padding: 6px 15px;
  background-color: #f0f0f0;
  border-radius: 10px;
  color: var(--text-color);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.tag-item:hover {
  background-color: var(--primary-color);
  color: white;
}

.related-posts h2 {
  font-size: 24px;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.related-posts h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  height: 24px;
  width: 4px;
  background: var(--gradient-bg);
  border-radius: 2px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* 复用博客卡片样式 */
.blog-card { 
  border-radius: 10px;
  overflow: hidden; 
  transition: transform 0.3s ease;
  height: 100%;
  border: 1px solid #c9c9c9;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card-image {
  height: 180px;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 180px);
}

.blog-card-content h3 {
  font-size: 16px;
  margin-bottom: 15px;
  line-height: 1.4;
  height: 45px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-card-meta {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
  margin-top: auto;
}

/* 图标样式 */
.good img{
  width: 24px; 
  margin-right: 5px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .blog-title {
    font-size: 28px;
  }
  
  .blog-content {
    font-size: 16px;
    padding: 2px !important;
  }
  
  .blog-article {
    padding: 2px;
  }
}

@media (max-width: 576px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
  
  .share-section {
    flex-direction: column;
  }
  
  .share-section h3 {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* 加载和错误状态样式 */
.loading-state, .error-state {
  text-align: center;
  padding: 50px 0;
  font-size: 18px;
  color: var(--light-text);
}

.error-state {
  color: #e74c3c;
}

.retry-button {
  margin-top: 20px;
  padding: 10px 20px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.retry-button:hover {
  background: var(--secondary-color);
}

.blog-content a{  
  color: #337ab7;
  text-decoration: none;
}
.blog-content a:hover{
  color: #23527c;
  text-decoration: underline;
}

/* 上下篇博客导航样式 */
.prev-next-section {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.prev-post, .next-post {
  max-width: 45%;
}

.prev-link, .next-link {
  display: flex;
  align-items: center;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.prev-link:hover, .next-link:hover {
  color: var(--primary-color);
}

.prev-link .arrow, .next-link .arrow {
  font-size: 20px;
  margin: 0 8px;
}

.prev-link {
  justify-content: flex-start;
}

.next-link {
  justify-content: flex-end;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .prev-next-section {
    flex-direction: column;
    gap: 20px;
  }
  
  .prev-post, .next-post {
    max-width: 100%;
  }
}
.no-post {
  color: #999;
  font-style: italic;
  padding: 0 10px;
}


   .blog-page .header{background:linear-gradient(315deg,#cc5ce8 10%,#3150ed)}:root{--primary-color:#7e3ff2;--secondary-color:#5e17eb;--text-color:#333;--light-text:#666;--white:#fff;--light-bg:#f8f9fa;--border-color:#e9ecef;--gradient-bg:linear-gradient(135deg,#7e3ff2,#5e17eb)}.blog-page{display:flex;flex-direction:column;min-height:100vh}.blog-container{flex:1;margin:0 auto;max-width:1200px;padding:100px 0 50px}.container{padding:0 15px;width:100%}.main-blog-post{border:1px solid #c9c9c9;border-radius:10px;display:flex;height:322px;margin-bottom:40px;margin-top:40px;overflow:hidden}.blog-image{background-color:#f5f5f5;flex:0 0 45%;position:relative}.blog-image img{-o-object-fit:cover;object-fit:cover;width:100%}.new-tag{background:#4cd964;color:var(--white);font-size:14px;font-weight:700;left:0;line-height:1.2;padding:8px 12px;position:absolute;text-align:center;top:0}.blog-content{display:flex;flex:0 0 55%;flex-direction:column;justify-content:space-between;padding:30px}.blog-content p{color:#666;font-size:16px;line-height:1.6;margin-bottom:20px}.blog-meta{color:#666;display:flex;font-size:18px;justify-content:space-between}.blog-grid{display:grid;gap:30px;grid-template-columns:repeat(3,1fr)}.blog-card{border:1px solid #c9c9c9;border-radius:10px;height:100%;overflow:hidden;transition:transform .3s ease}.blog-card:hover{transform:translateY(-5px)}.blog-card-image{height:180px;overflow:hidden}.blog-card-image img{-o-object-fit:cover;object-fit:cover;transition:transform .3s ease;width:100%}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-content{display:flex;flex-direction:column;height:calc(100% - 180px);justify-content:space-between;padding:20px}.blog-card-content a{display:-webkit-box;font-size:16px;font-weight:700;height:45px;line-height:1.4;margin-bottom:15px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}.blog-card-meta{color:#666;display:flex;font-size:14px;justify-content:space-between;margin-top:auto}.good img{margin-right:5px;width:24px}@media (max-width:992px){.main-blog-post{flex-direction:column;height:auto}.blog-content,.blog-image{flex:0 0 100%}.blog-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:576px){.blog-grid{grid-template-columns:1fr}}.blog-card,.main-blog-post{color:inherit;text-decoration:none}.error-state,.loading-state{color:var(--light-text);font-size:18px;padding:50px 0;text-align:center}.error-state{color:#e74c3c}.retry-button{background:var(--primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;margin-top:20px;padding:10px 20px;transition:background .3s ease}.retry-button:hover{background:var(--secondary-color)}.pagination{align-items:center;display:flex;gap:10px;justify-content:center;margin-top:40px}.pagination-btn{background-color:var(--light-bg);border:1px solid var(--border-color);border-radius:5px;cursor:pointer;padding:8px 15px;transition:all .3s ease}.pagination-btn:hover:not(:disabled){background-color:var(--primary-color);color:#fff}.pagination-btn:disabled{cursor:not-allowed;opacity:.5}.page-numbers{display:flex;gap:5px}.page-number{align-items:center;background-color:var(--light-bg);border:1px solid var(--border-color);border-radius:5px;cursor:pointer;display:flex;height:35px;justify-content:center;transition:all .3s ease;width:35px}.page-number.active,.page-number:hover{background-color:var(--primary-color);color:#fff}.page-number.active{font-weight:700}@media (max-width:992px){.main-blog-post{flex-direction:column;height:auto}.blog-content,.blog-image{flex:0 0 100%}.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-container{padding:80px 0 40px}.blog-content h1{font-size:32px;margin-top:10px}.pagination{flex-wrap:wrap}}@media (max-width:768px){.container{padding:0 10px}.blog-content{padding:20px}.blog-content h1{font-size:28px}.blog-content p{font-size:14px;margin-bottom:15px;margin-top:20px}.blog-meta{font-size:14px}.page-numbers{display:none}.pagination-btn{flex:1;text-align:center}}@media (max-width:576px){.blog-grid{gap:20px;grid-template-columns:1fr}.main-blog-post{margin-bottom:30px;margin-top:20px}.blog-content h1{font-size:24px;line-height:50px}.blog-card-content h1{font-size:16px;height:auto;margin-bottom:10px}.blog-card-image{height:160px}.blog-card-content{height:auto;padding:15px}.pagination{margin-top:30px}}@media (hover:none){.blog-card:hover{transform:none}.blog-card:active{transform:translateY(-3px)}.blog-card:hover .blog-card-image img{transform:none}}.blog-excerpt2{color:var(--light-text);display:-webkit-box;font-size:14px;line-height:1.6;margin-bottom:20px;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden}

   .header[data-v-c5e57a79]{left:0;padding:15px 0;position:absolute;right:0;top:0;transition:all .3s ease;z-index:100}.header.fixed[data-v-c5e57a79]{background:linear-gradient(315deg,#cc5ce8 10%,#3150ed);box-shadow:0 2px 10px #0000001a;position:fixed}.header-container[data-v-c5e57a79]{justify-content:space-between;margin:0 auto;max-width:1400px;padding:0 80px}.header-container[data-v-c5e57a79],.logo[data-v-c5e57a79]{align-items:center;display:flex}.logo img[data-v-c5e57a79]{height:60px}.right-section[data-v-c5e57a79]{align-items:center;display:flex}.nav[data-v-c5e57a79]{display:flex;gap:25px;margin-right:20px}.nav-item[data-v-c5e57a79]{color:#fff;font-size:21px;font-weight:500;margin:0 .16103rem 0 40px;text-decoration:none;transition:color .3s ease}.nav-item.active[data-v-c5e57a79]{color:#fff;font-weight:400;position:relative}.nav-item.active[data-v-c5e57a79]:after{bottom:-5px;content:"";height:2px;left:0;position:absolute;width:100%}.nav-item[data-v-c5e57a79]:hover{color:#fff}.auth-buttons[data-v-c5e57a79]{display:flex;gap:10px}.btn[data-v-c5e57a79]{border:none;border-radius:5px;cursor:pointer;font-size:14px;font-weight:600;padding:8px 20px;transition:all .3s ease}.btn-register[data-v-c5e57a79]{align-items:center;background:#fff3;border:1px solid hsla(0,0%,100%,.3);border-radius:30px;color:#fff;display:flex;font-size:16px;padding:8px 25px}.btn-register[data-v-c5e57a79]:hover{background:#ffffff4d}.login-icon[data-v-c5e57a79]{height:20px;margin-right:8px;width:20px}@media (max-width:768px){.header-container[data-v-c5e57a79]{flex-direction:column}.logo[data-v-c5e57a79]{margin-bottom:0}.logo img[data-v-c5e57a79]{height:40px}.nav[data-v-c5e57a79]{flex-wrap:wrap;justify-content:center;margin:15px 0}.header-container[data-v-c5e57a79]{align-items:center;flex-direction:row;justify-content:space-between;padding:0 20px}.mobile-menu-btn[data-v-c5e57a79]{display:block!important}.right-section[data-v-c5e57a79]{background:linear-gradient(315deg,#eb4eb1,#9257f9 50.46%,#3150ed);flex-direction:column;height:100vh;padding:80px 20px 20px;position:fixed;right:-100%;top:0;transition:.3s ease-in-out;width:80%;z-index:1000}.right-section.mobile-active[data-v-c5e57a79]{right:0}.nav[data-v-c5e57a79]{align-items:center;flex-direction:column;gap:30px;margin:0}.nav-item[data-v-c5e57a79]{font-size:18px;margin:0}.auth-buttons[data-v-c5e57a79]{margin-top:30px}.qrcode-popup[data-v-c5e57a79]{left:50%;margin-top:10px;transform:translate(-50%)}}.qrcode-container[data-v-c5e57a79]{position:relative}.qrcode-popup[data-v-c5e57a79]{background:#fff;border-radius:10px;box-shadow:0 5px 15px #0000001a;display:none;left:50%;margin-top:15px;padding:20px;position:absolute;text-align:center;top:100%;transform:translate(-50%);width:200px;z-index:1000}.qrcode-container:hover .qrcode-popup[data-v-c5e57a79]{display:block}.qrcode-popup[data-v-c5e57a79]:before{border-color:transparent transparent #fff;border-style:solid;border-width:0 10px 10px;content:"";left:50%;position:absolute;top:-10px;transform:translate(-50%)}.qrcode-box img[data-v-c5e57a79]{height:160px;margin-bottom:10px;width:160px}.qrcode-box p[data-v-c5e57a79]{color:#333;font-size:14px;margin:5px 0}.qrcode-box .small-text[data-v-c5e57a79]{color:#999;font-size:12px;margin-top:10px}.mobile-menu-btn[data-v-c5e57a79]{cursor:pointer;display:none;z-index:1001}@media (max-width:992px){.header-container[data-v-c5e57a79]{align-items:center;flex-direction:row;justify-content:space-between;padding:0 20px}.logo[data-v-c5e57a79]{margin-bottom:0}.logo img[data-v-c5e57a79]{height:40px}.mobile-menu-btn[data-v-c5e57a79]{display:block!important}.right-section[data-v-c5e57a79]{background:linear-gradient(315deg,#eb4eb1,#9257f9 50.46%,#3150ed);flex-direction:column;height:100vh;padding:80px 20px 20px;position:fixed;right:-100%;top:0;transition:.3s ease-in-out;width:80%;z-index:1000}.right-section.mobile-active[data-v-c5e57a79]{right:0}.nav[data-v-c5e57a79]{align-items:center;flex-direction:column;gap:30px;margin:0}.nav-item[data-v-c5e57a79]{font-size:18px;margin:0}.auth-buttons[data-v-c5e57a79]{margin-top:30px}.qrcode-popup[data-v-c5e57a79]{left:50%;margin-top:10px;transform:translate(-50%)}.hot-apps-img[data-v-c5e57a79]{animation:none;opacity:1;transform:none}.app-logo[data-v-c5e57a79]{transform:translate(-50%,-50%)}.app-logo[data-v-c5e57a79],.qrcode-container:hover .qrcode-popup[data-v-c5e57a79]{animation:none}.btn-register[data-v-c5e57a79]:hover{transform:none}}@media (max-width:768px){.header-container[data-v-c5e57a79]{align-items:center;flex-direction:row;justify-content:space-between;padding:0 20px}.logo[data-v-c5e57a79]{margin-bottom:0}.logo img[data-v-c5e57a79]{height:40px}.mobile-menu-btn[data-v-c5e57a79]{display:block!important}.right-section[data-v-c5e57a79]{background:linear-gradient(315deg,#eb4eb1,#9257f9 50.46%,#3150ed);flex-direction:column;height:100vh;padding:80px 20px 20px;position:fixed;right:-100%;top:0;transition:.3s ease-in-out;width:80%;z-index:1000}.right-section.mobile-active[data-v-c5e57a79]{right:0}.nav[data-v-c5e57a79]{align-items:center;flex-direction:column;gap:30px;margin:0}.nav-item[data-v-c5e57a79]{font-size:18px;margin:0}.auth-buttons[data-v-c5e57a79]{margin-top:30px}.qrcode-popup[data-v-c5e57a79]{left:50%;margin-top:10px;transform:translate(-50%)}.hot-apps-img[data-v-c5e57a79]{animation:none;opacity:1;transform:none}.app-logo[data-v-c5e57a79]{transform:translate(-50%,-50%)}.app-logo[data-v-c5e57a79],.qrcode-container:hover .qrcode-popup[data-v-c5e57a79]{animation:none}.btn-register[data-v-c5e57a79]:hover{transform:none}}.menu-icon[data-v-c5e57a79]{height:20px;margin:0;position:relative;transform:rotate(0);transition:.5s ease-in-out;width:30px}.menu-icon span[data-v-c5e57a79]{background:#fff;border-radius:3px;display:block;height:3px;left:0;opacity:1;position:absolute;transform:rotate(0);transition:.25s ease-in-out;width:100%}.menu-icon span[data-v-c5e57a79]:first-child{top:0}.menu-icon span[data-v-c5e57a79]:nth-child(2){top:8px}.menu-icon span[data-v-c5e57a79]:nth-child(3){top:16px}.menu-icon.active span[data-v-c5e57a79]:first-child{top:8px;transform:rotate(135deg)}.menu-icon.active span[data-v-c5e57a79]:nth-child(2){left:-60px;opacity:0}.menu-icon.active span[data-v-c5e57a79]:nth-child(3){top:8px;transform:rotate(-135deg)}
   .footer[data-v-827242c1]{background:#f9faff;color:#666;padding:50px 0 20px}.container[data-v-827242c1]{margin:0 auto;max-width:1400px;padding:0 20px;width:100%}.footer-content[data-v-827242c1]{display:flex;flex-wrap:wrap;justify-content:space-between}.footer-logo[data-v-827242c1]{align-items:flex-start;display:flex;flex:1;flex-direction:column;margin-bottom:30px;min-width:250px}.logo-container[data-v-827242c1]{align-items:center;display:flex;margin-bottom:15px}.logo-container img[data-v-827242c1]{height:40px;margin-right:10px}.logo-container span[data-v-827242c1]{color:#333;font-size:20px;font-weight:700}.footer-logo p[data-v-827242c1]{margin:5px 0}.social-links[data-v-827242c1]{display:flex;gap:10px;margin:10px 0}.social-link[data-v-827242c1]{align-items:center;border-radius:50%;display:flex;height:36px;justify-content:center;transition:all .3s ease;width:36px}.social-link[data-v-827242c1]:hover{background:#f0f0f0}.social-links a img[data-v-827242c1]{width:30px}.copyright[data-v-827242c1]{color:#999;font-size:14px;margin-top:15px}.footer-links[data-v-827242c1]{display:flex;flex:2;flex-wrap:wrap}.footer-column[data-v-827242c1]{flex:1;margin-bottom:30px;min-width:150px;padding-right:15px}.footer-column h3[data-v-827242c1]{color:#333;font-size:20px;font-weight:600;margin-bottom:15px}.footer-column ul[data-v-827242c1]{list-style:none;padding:0}.footer-column ul li[data-v-827242c1]{margin-bottom:10px}.footer-column ul li a[data-v-827242c1]{color:#666;text-decoration:none;transition:color .3s}.footer-column ul li a[data-v-827242c1]:hover{color:#3150ed}@media (max-width:768px){.footer[data-v-827242c1]{padding:30px 0 20px}.container[data-v-827242c1]{padding:0 15px}.footer-content[data-v-827242c1]{flex-direction:column}.footer-logo[data-v-827242c1]{align-items:center;margin-bottom:40px;text-align:center;width:100%}.logo-container[data-v-827242c1]{justify-content:center;margin-bottom:20px}.social-links[data-v-827242c1]{justify-content:center;margin:15px 0}.copyright[data-v-827242c1]{text-align:center;width:100%}.footer-links[data-v-827242c1]{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);width:100%}.footer-column[data-v-827242c1]{margin-bottom:20px;min-width:unset;padding:0;text-align:center;width:100%}.footer-column h3[data-v-827242c1]{font-size:16px;margin-bottom:10px;padding-bottom:8px;position:relative}.footer-column ul li[data-v-827242c1]{margin-bottom:8px}.footer-column ul li a[data-v-827242c1]{font-size:14px;padding:3px 0}.footer[data-v-827242c1]{padding:20px 0 15px}.container[data-v-827242c1]{padding:0 10px}.footer-logo[data-v-827242c1]{margin-bottom:25px}}.language-dropdown[data-v-827242c1]{position:relative;width:100%}.language-selector[data-v-827242c1]{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:20px;color:#666;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;padding:8px 12px;text-align:left;width:100%}.dropdown-arrow[data-v-827242c1]{font-size:10px;transition:transform .3s}.language-menu[data-v-827242c1]{background:#fff;border-radius:10px;box-shadow:0 4px 12px #0000001a;left:0;margin-top:5px;max-height:120px;opacity:0;overflow:auto;position:absolute;top:100%;transform:translateY(-10px);transition:all .3s;visibility:hidden;width:100%;z-index:100}.language-menu.show[data-v-827242c1]{opacity:1;transform:translateY(0);visibility:visible}.language-option[data-v-827242c1]{color:#666;display:block;padding:10px 15px;text-decoration:none;transition:background .2s}.language-option[data-v-827242c1]:hover{background:#f5f5f5;color:#4a6cf7}