*{scrollbar-width:thin;scrollbar-color:#db91f3 #ffd6d6}::-webkit-scrollbar{width:5px;height:5px;background:#ffd6d6}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-track{background:#ffd6d6}::-webkit-scrollbar-track-piece{display:none}::-webkit-scrollbar-thumb{background:#db91f3;border-radius:3px;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:#b63f9a}::-webkit-scrollbar-corner{background:#ffd6d6}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.6;max-width:1300px;margin:0 auto;padding:0;color:var(--text-color);padding-top:70px}header{background:#f8f9fa;padding:1rem;box-shadow:0 2px 4px rgba(0,0,0,.1);position:fixed;width:100%;top:0;left:0;z-index:1001;transition:transform .3s ease-in-out}.header-content{max-width:1300px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.header-logo{width:50px;height:50px}.header-logo img{width:100%;height:100%;transition:transform .3s cubic-bezier(.68,-.55,.265,1.55)}.header-logo img:hover{transform:scale(1.15)}nav.top-nav{display:flex;gap:.5rem}nav.top-nav a{text-decoration:none;color:#333;transition:color .3s}nav.top-nav a:hover{color:#007bff}.header-placeholder{height:20px}time{padding-left:15px}.article-header{border-bottom:2px solid #f0f0f0;padding-bottom:15px;margin-bottom:20px}.article-title{color:var(--primary-color);margin-bottom:10px;padding-left:15px;margin-top:0;font-size:28px;border-bottom:2px solid #e74c3c;padding-bottom:10px}.article-meta{color:var(--meta-color);font-size:.9em;margin-bottom:20px}.article-content{background:var(--background-color);padding:20px;border-radius:8px;margin-bottom:20px}.article-image{max-width:100%;height:auto;border-radius:8px;margin:15px 0;box-shadow:0 4px 6px rgba(0,0,0,.1);cursor:pointer;transition:transform .3s}.article-image:hover{transform:scale(1.02)}.back-link{display:inline-block;margin:20px 0;color:#3498db;text-decoration:none;font-weight:500}.back-link:hover{text-decoration:underline}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}iframe{display:block;width:100%;height:365px;box-shadow:0 4px 8px rgba(0,0,0,.1);border-radius:10px}.location-button{display:inline-flex;align-items:center;background:#4285F4;color:#fff;padding:10px 15px;border-radius:25px;text-decoration:none;font-weight:500;margin:15px 0;transition:all .3s;box-shadow:0 2px 5px rgba(0,0,0,.2)}.location-button:hover{background:#3367D6;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.2)}.location-icon{font-size:1.2em;margin-right:8px}.location-text{font-size:.95em}.step{margin-bottom:30px}.section-title{color:#333;margin:25px 0 15px}.highlight,.important-notice{color:#d32f2f;font-weight:700}.additional-info{background:#f5f5f5;padding:15px;margin-top:30px}.location-info{margin:15px 0}.back-container{margin:20px 0}.pronunciation-table,.grammar-table{width:100%;border-collapse:collapse;margin:20px 0}.pronunciation-table th,.pronunciation-table td,.grammar-table th,.grammar-table td{border:1px solid #ddd;padding:8px;text-align:left}.pronunciation-table th,.grammar-table th{background:#f2f2f2}.pronunciation-table tr:nth-child(even),.grammar-table tr:nth-child(even){background:#f9f9f9}.example-word{font-style:italic;color:#06c}.example-sentence{margin-left:20px;color:#444;font-style:italic}.note-box{background:#f8f8f8;border-left:4px solid #4CAF50;padding:10px;margin:15px 0}.section-divider{border-top:1px solid #eee;margin:30px 0}.audio-example{display:inline-block;margin:5px 0}.phonetic-symbol,.grammar-highlight{font-weight:700;color:#d32f2f}.video-container{position:relative;width:100%;padding-bottom:56.25%;margin:20px 0}.video-container video{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.declension-box{background:#f9f9f9;border:1px solid #ddd;padding:15px;margin:15px 0;border-radius:5px}.russian-grammar-list{max-width:600px;margin:20px auto;padding:20px;background:#f9f9f9;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1)}.russian-grammar-list h2{color:#2c3e50;border-bottom:2px solid #e74c3c;padding-bottom:8px;margin-bottom:16px}.word-classes{list-style:none;padding:0}.word-classes li{padding:10px 15px;margin-bottom:8px;background:#fff;border-left:4px solid #e74c3c;transition:all .3s}.word-classes li:hover{background:#f1f1f1;transform:translateX(5px)}.russian{font-weight:700;color:#2c3e50}.transliteration{color:#7f8c8d;font-style:italic;font-size:.9em}.image-gallery{margin:30px 0;padding:20px;background:#f9f9f9;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.gallery-title{font-size:1.5rem;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #eee;color:#444}.gallery-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;margin-top:20px}.gallery-image{width:100%;height:200px;object-fit:cover;border-radius:6px;cursor:pointer;transition:transform .3s,box-shadow .3s}.gallery-image:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.1)}.hidden-images{display:none}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:1001;overflow-y:auto;padding:50px 20px}.modal-content{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:1400px;margin:0 auto}.modal-image{max-width:90%;max-height:80vh;object-fit:contain;margin-bottom:20px}.close-btn{position:fixed;top:20px;right:30px;color:#fff;font-size:40px;font-weight:700;cursor:pointer;z-index:1002}.show-more-btn{display:block;margin:20px auto 0;padding:10px 20px;background:#ff6b6b;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1rem;transition:background .3s}.show-more-btn:hover{background:#ff5252}.location-link{display:inline-block;margin:15px;padding:10px 20px;background:#4CAF50;color:#fff;text-decoration:none;border-radius:5px;font-weight:700;transition:background .3s}.location-link:hover{background:#45a049}.copy-btn{display:inline-block;margin:15px;padding:10px 20px;background:#03A9F4;color:#fff;text-decoration:none;border-radius:5px;font-weight:700;transition:background .3s;cursor:pointer}.copy-btn:hover{background:#2196F3}.custom-alert{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 30px;border-radius:8px;color:#fff;z-index:1000;opacity:0;transition:opacity .3s;background:#4CAF50}.alert-error{background:#f44336}.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);z-index:1000;justify-content:center;align-items:center;opacity:0;transition:opacity .3s;touch-action:none}.lightbox.active{display:flex;opacity:1}.lightbox-content{position:relative;max-width:90%;max-height:80%;display:flex;flex-direction:column;align-items:center;width:100%}.lightbox-img-container{position:relative;width:100%;height:70vh;display:flex;justify-content:center;align-items:center}.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 5px 25px rgba(0,0,0,.3);transition:transform .3s}.lightbox-close{position:absolute;top:20px;right:20px;font-size:32px;color:#fff;background:rgba(0,0,0,.5);border:none;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s;z-index:1002}.lightbox-close:hover{background:rgba(0,0,0,.7)}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;color:#fff;background:rgba(0,0,0,.4);border:none;cursor:pointer;width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s;z-index:1001}.lightbox-nav:hover{background:rgba(0,0,0,.7)}.lightbox-prev{left:20px}.lightbox-next{right:20px}.lightbox-info{color:#fff;text-align:center;margin-top:20px;font-size:18px;width:100%}.lightbox-counter{margin-bottom:15px;font-weight:500}.lightbox-thumbnails{display:flex;gap:10px;margin-top:15px;max-width:100%;overflow-x:auto;padding:10px 5px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.lightbox-thumbnails::-webkit-scrollbar{display:none}.lightbox-thumbnail{width:60px;height:60px;object-fit:cover;border-radius:4px;cursor:pointer;opacity:.6;transition:opacity .3s;flex-shrink:0}.lightbox-thumbnail:hover,.lightbox-thumbnail.active{opacity:1}.lightbox-controls{position:fixed;bottom:0;left:0;width:100%;background:rgba(0,0,0,.7);padding:15px;display:flex;justify-content:center;z-index:1001;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-download{background:#3498db;color:#fff;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;margin:0 10px;font-weight:500}article{background:#fff;border-radius:12px;padding:25px;box-shadow:0 4px 12px rgba(0,0,0,.05)}.sidebar{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:smooth;-webkit-overflow-behavior:smooth;scrollbar-width:thin;scrollbar-color:#db91f3 #ffd6d6}.sidebar::-webkit-scrollbar{width:5px;height:5px;background:#ffd6d6}.sidebar::-webkit-scrollbar-button{display:none}.sidebar::-webkit-scrollbar-track{background:#ffd6d6}.sidebar::-webkit-scrollbar-track-piece{display:none}.sidebar::-webkit-scrollbar-thumb{background:#db91f3;border-radius:3px;transition:background .2s}.sidebar::-webkit-scrollbar-thumb:hover{background:#b63f9a}.sidebar::-webkit-scrollbar-corner{background:#ffd6d6}.zoom-indicator{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:8px 15px;border-radius:20px;font-size:14px;z-index:1002;display:none}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.lightbox.active .lightbox-content{animation:slideIn .3s}@media (prefers-color-scheme:dark){*{scrollbar-color:#db91f3 #2d2d2d}::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:#2d2d2d}.sidebar::-webkit-scrollbar,.sidebar::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-corner{background:#2d2d2d}}@media (min-width:768px){.navbar-header{float:left}}@media (max-width:1300px){iframe{height:450px}}@media (max-width:1100px){iframe{height:750px}}@media (max-width:768px){iframe{height:750px}.article-content{padding:15px}.article-title{font-size:1.5em}.gallery-container{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.gallery-image{height:150px}.modal-image{max-width:95%}.lightbox-nav{width:50px;height:50px;font-size:30px}.lightbox-prev{left:10px}.lightbox-next{right:10px}.lightbox-thumbnail{width:50px;height:50px}.lightbox-close{top:10px;right:10px;width:40px;height:40px;font-size:24px}.lightbox-img-container{height:60vh}.sidebar{touch-action:pan-y}.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{border-radius:1.5px}}@media (max-width:600px){body{padding-top:70px}}@media (max-width:480px){iframe{height:600px}.gallery-container{grid-template-columns:repeat(2,1fr)}.lightbox-nav{width:40px;height:40px;font-size:24px;bottom:20px;top:auto;transform:none}.lightbox-prev{left:20px}.lightbox-next{right:20px}.lightbox-thumbnail{width:40px;height:40px}.lightbox-info{font-size:16px}.lightbox-counter{font-size:16px}.lightbox-nav.mobile-hidden{display:none}.lightbox-controls{padding:10px}.lightbox-download{padding:8px 12px;font-size:14px}}
/* === 新增 info-card 模块样式 === */
.info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    margin: 30px 0;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
}

.info-card:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.info-image img {
    width: 240px;
    height: 180px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 6px;
}

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

.info-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f8f8f8;
    border: 1px solid #aaa;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.info-btn:hover {
    background-color: #eee;
    border-color: #888;
}

/* ====== 返回顶部按钮样式 ====== */
#backToTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 999;
  overflow: hidden;
  animation: breathing 3s ease-in-out infinite;
}

/* 呼吸闪动 */
@keyframes breathing {
  0%, 100% { box-shadow: 0 0 15px rgba(54 243 178 / 58%); }
  50% { box-shadow: 0 0 25px rgba(184 73 218 / 58%); }
}

/* 图片 */
#backToTop img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  position: absolute;
  z-index: 2;
  transition: transform 0.4s ease;
}

/* 滚动进度环 */
.progress-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  z-index: 1;
}
.progress-ring__background {
  fill: none;
  stroke: rgba(230 157 157 / 32%);
  stroke-width: 8;
}
.progress-ring__circle {
  fill: none;
  stroke: #d786dc;
  stroke-width: 8;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.2s ease;
}

/* 显示状态 */
#backToTop.show {
  display: flex;
  opacity: 1;
  animation: fadeInUp 0.4s ease, breathing 3s ease-in-out infinite;
}

/* 悬停动效 */
#backToTop:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
#backToTop:hover img {
  transform: translateY(-2px) rotate(-8deg);
}

/* 点击反馈 */
#backToTop:active {
  transform: scale(0.9);
}

/* 出现动画 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  #backToTop {
    background: rgba(40, 40, 40, 0.6);
  }
  .progress-ring__background {
    stroke: rgba(255, 255, 255, 0.1);
  }
}

/* 手机端优化 */
@media (max-width: 768px) {
  #backToTop {
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
  }
}


/* 侧边栏导航容器 */
.sidebar-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.3s ease;
}

/* 导航按钮 */
.nav-button {
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.nav-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: #e63946;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.nav-button:hover {
    background-color: #fff;
    border-color: #e63946;
    transform: translateX(-5px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2);
}

/* 激活状态 */
.nav-button.active {
    background-color: #e63946;
    color: #fff;
    border-color: #e63946;
    transform: translateX(-5px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

.nav-button.active::before {
    transform: scaleY(1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sidebar-nav {
        right: 15px;
        gap: 10px;
    }
    
    .nav-button {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* 移动端小屏幕优化 */
@media (max-width: 480px) {
    .sidebar-nav {
        right: 10px;
    }
    
    .nav-button {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* 页面滚动时淡入效果 */
.sidebar-nav.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Header 隐藏动画样式 */
#mainHeader {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

#mainHeader.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none; /* 禁止点击 */
  z-index: 0; /* 降低层级，避免覆盖页面内容 */
}