*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --green:#5cb531;--green-dark:#4a9626;
  --nav-bg:#1c1c1c;--nav-h:64px;
  --black:#111;--text:#222;--text2:#666;--text3:#999;
  --border:#e8e8e8;--gray-bg:#f5f5f5;
  --font:'Noto Sans SC',PingFang SC,Microsoft YaHei,sans-serif;
  --max:1280px;
}
html{scroll-behavior:smooth;}
body{font-family:var(--font);color:var(--text);background:#fff;overflow-x:hidden;font-size:14px;line-height:1.6;}
a{text-decoration:none;color:inherit;}ul{list-style:none;}img{display:block;max-width:100%;}

/* ══════════════════════════════════════
   公司发展历程时间轴样式 (小米风极简奢华 & 极摩客亮绿呼吸发光)
══════════════════════════════════════ */
@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(92,181,49,0.3), 0 0 10px rgba(92,181,49,0.4); }
  70% { box-shadow: 0 0 0 8px rgba(92,181,49,0), 0 0 12px rgba(92,181,49,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(92,181,49,0), 0 0 10px rgba(92,181,49,0.4); }
}
.history-dot-active {
  animation: ripple 2.2s infinite;
}
.history-year-btn {
  font-size: 26px;
  font-weight: 900;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 10px 10px 10px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  font-family: var(--font);
  outline: none;
}
.history-year-btn:hover {
  color: #111;
  transform: translateY(-2px);
}
.history-year-btn.active {
  color: var(--green);
  transform: scale(1.08);
}
.history-year-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  transition: all 0.3s;
}
.history-event-card {
  opacity: 0;
  transform: translateY(20px);
  animation: cardFadeIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  transition: all 0.3s ease;
}
.history-event-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}
@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════
   NAV — logo左 菜单靠右 大气版
══════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;width:100%;height:var(--nav-h);
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  z-index:9999;
  border-bottom:1px solid rgba(0,0,0,0.06);
  box-shadow:0 4px 30px rgba(0,0,0,0.03);
  transition:all 0.3s;
}
.nav-wrap{
  width:100%;max-width:var(--max);margin:0 auto;
  padding:0 40px;height:100%;
  display:flex;align-items:center;
  justify-content:space-between;
}

/* Logo */
.logo{display:flex;align-items:center;flex-shrink:0;cursor:pointer;}
.logo-img{height:42px;width:auto;display:block;object-fit:contain;transition:all 0.25s;}
.logo-img:hover{transform:scale(1.03);}
.logo-img.hidden{display:none;}
.logo-fallback{display:flex;align-items:center;gap:9px;}
.logo-fallback.hidden{display:none;}
.logo-badge{background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:3px 7px;border-radius:3px;letter-spacing:1px;}
.logo-texts{}
.logo-name{color:var(--green);font-size:16px;font-weight:700;letter-spacing:2px;line-height:1.1;}
.logo-sub{font-size:9px;color:var(--text2);letter-spacing:2.5px;text-transform:uppercase;margin-top:2px;}

/* 右侧菜单 - 白底绿字高科技版 */
.nav-menu{
  display:flex;
  align-items:center;
  height:100%;
  gap:6px;
  justify-content:flex-end;
}
.nav-item{position:relative;display:flex;align-items:center;height:100%;}

.nav-link{
  display:flex;align-items:center;gap:6px;
  padding:8px 18px;height:auto;
  font-size:14px;font-weight:600;letter-spacing:0.8px;
  color:var(--green);
  cursor:pointer;white-space:nowrap;
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  border-radius:20px;
}
.nav-link:hover, .nav-item:hover > .nav-link{
  color:var(--green-dark);
  background:rgba(92,181,49,0.08);
}
/* 底部绿线指示器 - 超薄现代发光线条 */
.nav-link::after{
  content:'';position:absolute;bottom:-4px;left:50%;width:40%;
  height:2px;background:var(--green);
  box-shadow: 0 0 8px var(--green);
  transform:scaleX(0) translateX(-50%);transform-origin:left;
  transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover>.nav-link::after{transform:scaleX(1) translateX(-50%);}

.nav-caret{font-size:8px;opacity:0.8;color:var(--green);transition:transform 0.25s;}
.nav-item:hover>.nav-link .nav-caret{transform:rotate(180deg);opacity:0.9;color:var(--green-dark);}

/* L2 二级下拉面板 - 雅致亮白微拟物 */
.nav-drop2{
  display:none;
  position:absolute;top:calc(100% - 10px);right:0;
  background:rgba(255, 255, 255, 0.98);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  border:1px solid rgba(0,0,0,0.08);
  border-top:3px solid var(--green);
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.1), 0 0 30px rgba(92,181,49,0.02);
  min-width:240px;padding:10px 0;z-index:10000;
  animation:navFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin:top right;
}
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-item:hover>.nav-drop2{display:block;}
.nav-d2-item{position:relative;}
.nav-d2-link{
  display:flex;align-items:center;gap:0;padding:12px 20px;
  font-size:13.5px;color:var(--text);cursor:pointer;
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-d2-link:hover{
  background:rgba(92,181,49,0.08);
  color:var(--green-dark);
}
.d2-icon{
  width:32px;height:32px;border-radius:8px;
  background:rgba(92,181,49,0.08);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;margin-right:12px;flex-shrink:0;
  transition:all 0.2s;
  color: var(--green);
}
.nav-d2-link:hover .d2-icon{
  background:var(--green);
  color:#fff;
  transform:scale(1.08);
  box-shadow: 0 0 10px rgba(92,181,49,0.2);
}
.d2-name{flex:1;}
.d2-caret{font-size:10px;color:var(--text3);margin-left:6px;}

/* L3 三级下拉面板 - 质雅亮白 */
.nav-drop3{
  display:none;
  position:absolute;top:0;left:calc(100% + 4px);
  background:rgba(255, 255, 255, 0.99);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
  min-width:200px;padding:10px 0;z-index:10001;
  animation:navFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin:top left;
}
.nav-d2-item:hover>.nav-drop3{display:block;}
.nav-d3-link{
  display:block;padding:10px 20px;font-size:13px;
  color:var(--text2);transition:all 0.18s;
}
.nav-d3-link:hover{
  background:rgba(92,181,49,0.08);
  color:var(--green);
  padding-left:24px;
}

/* Banner 轮播控制器与动画 */
.banner-dots{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:10;
}
.banner-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.4);
  cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-dot.active{
  background:var(--green);width:24px;border-radius:5px;
  box-shadow:0 0 10px rgba(92,181,49,0.5);
}
.banner-arrow-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.6);backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,0.08);color:var(--text2);
  font-size:22px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;transition:all 0.3s;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
.banner-arrow-btn:hover{
  background:var(--green);color:#fff;
  border-color:var(--green);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 6px 15px rgba(92,181,49,0.3);
}
.banner-arrow-btn.prev-btn{left:24px;}
.banner-arrow-btn.next-btn{right:24px;}

/* ══════════════════════════════════════
   PAGE / BANNER
══════════════════════════════════════ */
.page{margin-top:var(--nav-h);}

.banner{position:relative;width:100%;height:520px;overflow:hidden;display:flex;align-items:stretch;}
.banner-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transition:opacity 0.4s;}
.banner-bg.default-bg{background:linear-gradient(120deg,#e2e2e2 0%,#cecece 50%,#bababa 100%);}
.banner-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(220,220,220,0.82) 0%,rgba(220,220,220,0.5) 40%,rgba(220,220,220,0) 68%);}
.banner-deco{position:absolute;right:20px;bottom:-30px;z-index:1;font-size:260px;font-weight:900;color:rgba(92,181,49,0.14);line-height:1;user-select:none;pointer-events:none;letter-spacing:-8px;}
.banner-inner{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 48px;display:flex;align-items:center;}
.banner-left{max-width:480px;text-align:center;}
.banner-model{font-size:12px;color:#555;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px;}
.banner-title{font-size:40px;font-weight:700;color:#111;line-height:1.2;margin-bottom:10px;}
.banner-title .hl{color:var(--green);}
.banner-sub{font-size:17px;color:#444;margin-bottom:32px;font-weight:300;}
.btn-buy{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;padding:11px 28px;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;border:none;font-family:var(--font);transition:background 0.15s,transform 0.15s;}
.btn-buy:hover{background:var(--green-dark);transform:translateY(-1px);}

/* ══════════════════════════════════════
   STATS
══════════════════════════════════════ */
.stats{padding:60px 40px;background:#fff;text-align:center;}
.stats-inner{max-width:var(--max);margin:0 auto;}
.sec-h1{font-size:26px;font-weight:700;color:var(--black);margin-bottom:2px;}
.sec-h2{font-size:26px;font-weight:700;color:var(--black);margin-bottom:44px;}
.stats-row{display:flex;justify-content:center;}
.stat-cell{flex:1;max-width:240px;padding:30px 20px;border-right:1px solid var(--border);text-align:center;}
.stat-cell:last-child{border-right:none;}
.stat-num{font-size:52px;font-weight:700;color:var(--green);line-height:1;margin-bottom:6px;}
.stat-num sup{font-size:22px;vertical-align:super;}
.stat-label{font-size:13px;color:var(--text3);}

/* ══════════════════════════════════════
   PRODUCTS — 4列自适应豪华版
   ══════════════════════════════════════ */
.products{padding:80px 40px;background:#ffffff;}
.products-inner{max-width:var(--max);margin:0 auto;}
.sec-head{text-align:center;margin-bottom:48px;}
.sec-title{font-size:22px;font-weight:700;color:var(--black);}
.prod-track{
  display:flex;
  gap:24px;
  transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  width:100%;
}
.prod-card{
  flex:0 0 calc((100% - 72px) / 3.5);
  background:#eaeaea;
  border:none;
  border-radius:20px;
  padding:40px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
@media (max-width: 992px) {
  .prod-card{flex:0 0 calc((100% - 48px) / 2.5);}
}
@media (max-width: 600px) {
  .prod-card{flex:0 0 calc((100% - 24px) / 1.5);}
}
.prod-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.06);
}
.prod-series{
  font-size:18px;
  font-weight:700;
  color:#111;
  margin-bottom:6px;
  letter-spacing:0.5px;
}
.prod-sub{
  font-size:14px;
  color:#555;
  margin-bottom:28px;
  font-weight:400;
  letter-spacing:0.2px;
}
.prod-img{
  width:100%;
  height:180px;
  background:transparent;
  margin-bottom:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.prod-img img {
  max-width:90%;
  max-height:100%;
  object-fit:contain;
  display:block;
  mix-blend-mode: multiply;
  transition:transform 0.3s;
}
.prod-card:hover .prod-img img {
  transform:scale(1.04);
}
.mini-pc{
  width:60%;
  aspect-ratio:1.8;
  background:linear-gradient(145deg,#444,#1c1c1c);
  border-radius:8px;
  position:relative;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.08);
}
.mini-pc::after{
  content:'';position:absolute;left:6px;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#75c940,#5cb531);
  border-radius:0 0 1px 1px;
  box-shadow:0 0 8px #75c940;
}
.prod-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13.5px;
  font-family:var(--font);
  font-weight:600;
  color:#333;
  border:1px solid rgba(117,201,64,0.45);
  background:transparent;
  border-radius:30px;
  padding:10px 36px;
  cursor:pointer;
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.prod-more:hover{
  background:#75c940;
  border-color:#75c940;
  color:#fff;
  transform:scale(1.02);
  box-shadow:0 6px 16px rgba(117,201,64,0.35);
}


/* ══════════════════════════════════════
   PARTNERS
══════════════════════════════════════ */
.partners{padding:60px 40px;background:#fff;overflow:hidden;}
.partners-inner{max-width:var(--max);margin:0 auto;}
.partner-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  width: 100%;
}
.partner-viewport {
  overflow: hidden;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
}
.partner-track {
  display: flex;
  gap: 20px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}
.partner-photo {
  flex: 0 0 calc((100% - 40px) / 3);
  aspect-ratio: 1.15;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  border: 1px solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.partner-photo:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border-color: rgba(92,181,49,0.35);
}
.partner-img-box {
  position: relative;
  flex: 1;
  width: 100%;
  background: var(--gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.partner-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  display: block;
  transition: transform 0.3s ease;
}
.partner-photo:hover .partner-img-box img {
  transform: scale(1.05);
}
.partner-info-box {
  padding: 14px 16px;
  background: #fff;
  border-top: 1px solid var(--border);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.partner-name-bottom {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  transition: color 0.25s;
}
.partner-photo:hover .partner-name-bottom {
  color: var(--green);
}
.partner-desc-bottom {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .partner-photo {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}
@media (max-width: 480px) {
  .partner-photo {
    flex: 0 0 100%;
  }
}
.partner-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.partner-arrow:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 4px 12px rgba(92,181,49,0.25);
  transform: scale(1.05);
}
.partner-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.partner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: all 0.25s ease;
}
.partner-dot.active {
  background: var(--green);
  width: 20px;
  border-radius: 4px;
}
.p-scene-bg{position:absolute;inset:0;background:linear-gradient(135deg,#c5c5c5,#9a9a9a);}
.p-scene-label{position:relative;z-index:1;font-size:32px;font-weight:900;color:rgba(255,255,255,0.25);letter-spacing:2px;}
.p-logo-tag{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,0.92);padding:4px 10px;border-radius:3px;font-size:11px;font-weight:700;color:#222;}

/* ══════════════════════════════════════
   BRAND CENTER VIDEO AUTO-FIT FIX
   ══════════════════════════════════════ */
#v-brandVideoBlock iframe, 
#v-brandVideoBlock video, 
#v-brandVideoBlock embed,
.video-custom-html-wrapper > * {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  position: absolute;
  top: 0;
  left: 0;
}

/* ══════════════════════════════════════
   NEWS — 点击展开图片
══════════════════════════════════════ */
@media (max-width: 850px) {
  .contact-grid-wrap {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

.news{padding:60px 40px;background:#fff;}
.news-inner{max-width:var(--max);margin:0 auto;}
.news-list{margin-top:36px;}

.news-row{cursor:pointer;border-radius:5px;overflow:hidden;margin-bottom:4px;transition:background 0.15s;}
.news-row-head{display:flex;align-items:center;gap:20px;padding:15px 20px;border-bottom:1px solid var(--border);transition:background 0.15s;}
.news-row:last-child .news-row-head{border-bottom:none;}
.news-row-head:hover{background:#f9f9f9;}
.news-row.active .news-row-head{background:var(--green);border-bottom-color:var(--green);}
.news-row.active .news-row-head:hover{background:var(--green-dark);}

.news-date{font-size:13px;color:var(--green);font-weight:600;min-width:84px;flex-shrink:0;font-variant-numeric:tabular-nums;}
.news-row.active .news-date{color:#fff;}
.news-ttl{flex:1;font-size:14px;color:#333;line-height:1.5;}
.news-row.active .news-ttl{color:#fff;}
.news-arr{font-size:15px;color:#ccc;flex-shrink:0;transition:transform 0.2s;}
.news-row.active .news-arr{color:rgba(255,255,255,0.7);transform:rotate(90deg);}

.news-expand{
  max-height:0;overflow:hidden;
  transition:max-height 0.5s cubic-bezier(.16, 1, 0.3, 1);
  background:#141414;
}
.news-row.active .news-expand{max-height:600px;}
.news-expand-inner{
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#141414;
  overflow:hidden;
  border-radius:0 0 8px 8px;
}
.news-expand-img{
  max-width:960px;
  width:100%;
  height:480px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 15px 35px rgba(0,0,0,0.6);
  transition:transform 0.4s ease;
  display:block;
}
.news-row.active:hover .news-expand-img{
  transform:scale(1.02);
}
.news-expand-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:240px;
  width:100%;
  color:rgba(255,255,255,0.4);
}
.news-expand-placeholder .ph-icon{font-size:40px;opacity:0.4;animation:pulse 2s infinite;}
.news-expand-placeholder .ph-text{font-size:13px;letter-spacing:1px;}
@keyframes pulse{0%,100%{opacity:0.4;}50%{opacity:0.8;}}

/* ══════════════════════════════════════
   AWARDS — 单张可替换大图
══════════════════════════════════════ */
.awards{padding:60px 40px;background:#fff;}
.awards-inner{max-width:var(--max);margin:0 auto;}
.awards-img-wrap{margin-top:36px;border-radius:10px;overflow:hidden;background:#f5f5f5;min-height:300px;display:flex;align-items:center;justify-content:center;position:relative;}
.awards-img{width:100%;display:block;object-fit:cover;}
.awards-img.hidden{display:none;}
.awards-default{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;padding:48px 60px;align-items:center;}
.awards-default.hidden{display:none;}
.awards-logos-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;}
.award-item{display:flex;flex-direction:column;align-items:center;gap:6px;}
.award-logo-box{font-size:36px;line-height:1;}
.award-name{font-size:12px;color:#555;font-weight:500;text-align:center;}
.awards-trophy-col{display:flex;align-items:center;justify-content:center;font-size:130px;line-height:1;}

/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */
.cta{padding:72px 40px;background:var(--green);text-align:center;}
.cta-title{font-size:32px;font-weight:700;color:#fff;margin-bottom:10px;}
.cta-sub{font-size:15px;color:rgba(255,255,255,0.85);margin-bottom:36px;font-weight:300;}
.btn-contact{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(255,255,255,0.65);color:#fff;padding:11px 32px;border-radius:24px;font-size:14px;cursor:pointer;transition:all 0.15s;background:transparent;font-family:var(--font);}
.btn-contact:hover{background:rgba(255,255,255,0.14);}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer{background:#1a1a1a;padding:52px 40px 28px;position:relative;overflow:hidden;}
.footer-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1;}
.footer-top{display:flex;gap:0;margin-bottom:40px;}
.footer-col-group{display:flex;gap:56px;flex:1;}
.footer-col{}
.footer-col-title{font-size:11px;color:rgba(255,255,255,0.3);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;}
.footer-links{display:flex;flex-direction:column;gap:11px;}
.footer-link{font-size:13px;color:rgba(255,255,255,0.5);cursor:pointer;transition:color 0.15s;}
.footer-link:hover{color:#fff;}
.social-row{display:flex;gap:12px;margin:24px 0 16px 0;justify-content:flex-start;}
.social-dot{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);}
.social-dot:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px);box-shadow:0 6px 15px rgba(92,181,49,0.35);}
.footer-contact{margin-left:auto;text-align:right;}
.footer-contact p{font-size:12px;color:rgba(255,255,255,0.38);line-height:2.2;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:22px;display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,0.25);}
.footer-bottom a{
  color:rgba(255,255,255,0.35);
  text-decoration:none;
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding:2px 6px;
  border-radius:3px;
  display:inline-block;
}
.footer-bottom a:hover{
  color:var(--green) !important;
  background:rgba(92,181,49,0.08);
  text-shadow:0 0 8px rgba(92,181,49,0.4);
}
.footer-watermark{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-size:110px;font-weight:900;color:rgba(255,255,255,0.025);white-space:nowrap;user-select:none;pointer-events:none;letter-spacing:10px;}

.sec-center{text-align:center;}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.about-competitiveness{
  padding:70px 40px 90px;
  background:#f5f9ed;
}
.about-competitiveness-inner{
  width:min(100%, var(--max));
  margin:0 auto;
}
.about-competitiveness-title{display:block;width:100%;text-align:center;font-size:36px;font-weight:900;color:#111;margin:0 0 44px;}
.about-competitiveness-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,1.45fr) minmax(220px,1fr);align-items:center;gap:28px;}
.about-competitiveness-list{display:flex;flex-direction:column;justify-content:space-around;gap:54px;min-height:560px;}
.about-competitiveness-list-left{text-align:right;}
.about-competitiveness-item h3{font-size:22px;font-weight:850;color:#111;margin:0 0 9px;}
.about-competitiveness-item p{font-size:14px;line-height:1.7;color:#444;margin:0;white-space:pre-line;}
.about-competitiveness-figure{margin:0;}
.about-competitiveness-figure img{
  display:block;
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
}

/* 产品详情长图：桌面端按原宽度的约一半居中展示，避免低分辨率海报被过度放大。 */
.product-detail-poster{
  display:block;
  width:50%;
  max-width:720px;
  min-width:0;
  height:auto;
  object-fit:contain;
  margin:0 auto;
}
@media(max-width:900px){
  .product-detail-poster{
    width:100%;
    max-width:720px;
  }
}
@media(max-width:1080px){.about-competitiveness-grid{grid-template-columns:1fr 1.35fr 1fr;gap:18px}.about-competitiveness-list{gap:34px;min-height:480px}.about-competitiveness-item h3{font-size:18px}.about-competitiveness-item p{font-size:12px}}
@media(max-width:768px){
  .about-competitiveness{
    padding:48px 18px 60px;
  }
  .about-competitiveness-title{font-size:28px;margin-bottom:30px;}
  .about-competitiveness-grid{display:flex;flex-direction:column;gap:28px;}
  .about-competitiveness-figure{order:1;max-width:520px;}
  .about-competitiveness-list{display:grid;grid-template-columns:1fr;gap:12px;min-height:0;width:100%;text-align:left;}
  .about-competitiveness-list-left{order:2}.about-competitiveness-list-right{order:3}
  .about-competitiveness-item{background:#fff;border:1px solid rgba(92,181,49,.16);border-radius:14px;padding:18px;}
  .about-competitiveness-item h3{font-size:18px}.about-competitiveness-item p{font-size:13px}
}

/* ══════════════════════════════════════
   CMS
══════════════════════════════════════ */
.cms-fab{position:fixed;bottom:24px;right:24px;z-index:8888;display:none;align-items:center;gap:8px;background:#1a1a1a;color:#fff;padding:10px 20px;border-radius:24px;cursor:pointer;font-size:13px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);transition:all 0.15s;font-family:var(--font);}
.cms-fab:hover{background:#2a2a2a;transform:translateY(-2px);}
.fab-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.cms-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9000;backdrop-filter:blur(2px);}
.cms-mask.on{display:block;}
.cms-panel{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;background:#fff;z-index:9001;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);box-shadow:none;}
.cms-panel.on{transform:none;}
.cms-panel.cms-fullscreen{width:100% !important;max-width:100% !important;}
.cms-ph{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #eee;flex-shrink:0;background:#fff;z-index:10;}
.cms-ph-left{display:flex;align-items:center;gap:10px;}
.cms-badge{background:var(--green);color:#fff;font-size:10px;padding:2px 7px;border-radius:3px;font-weight:700;letter-spacing:1px;}
.cms-ph h2{font-size:15px;font-weight:600;}
.cms-xbtn{width:30px;height:30px;background:none;border:1px solid #e0e0e0;border-radius:5px;cursor:pointer;font-size:17px;color:#777;display:flex;align-items:center;justify-content:center;}
.cms-xbtn:hover{background:#f5f5f5;}

/* ══════════════════════════════════════
   CMS Sidebar - Premium Dark Menu
   ══════════════════════════════════════ */
/* B2B CMS Switch Slide Toggle */
.b2b-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.b2b-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.b2b-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ddd;
  transition: .3s;
  border-radius: 20px;
}
.b2b-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}
input:checked + .b2b-slider {
  background-color: var(--green);
}
input:checked + .b2b-slider:before {
  transform: translateX(20px);
}

.cms-container{display:flex;flex:1;overflow:hidden;height:calc(100% - 67px);background:#fff;}
.cms-sidebar{
  width:230px;
  background:#141414;
  border-right:1px solid rgba(255,255,255,0.05);
  display:flex;
  flex-direction:column;
  padding:20px 0;
  overflow-y:auto;
  flex-shrink:0;
  color:#a3a3a3;
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cms-sidebar-group{margin-bottom:8px;padding:0 10px;}
.cms-sidebar-group-title{
  font-size:12px;
  font-weight:700;
  color:#9e9e9e;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}
.cms-sidebar-group-title:hover{
  color:#fff;
  background:rgba(255,255,255,0.04);
}
.cms-sidebar-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 8px 24px; /* 💡 二级菜单缩进，彰显清晰逻辑级次 */
  border-radius:6px;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  color:#a3a3a3;
  transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select:none;
}
.cms-sidebar-item:hover{
  color:#fff;
  background:rgba(255,255,255,0.05);
}
.cms-sidebar-item.on{
  color:#fff !important;
  background:var(--green);
  box-shadow:0 4px 12px rgba(92,181,49,0.3);
  font-weight:600;
}
.cms-sidebar-item .icon{
  font-size:15px;
  transition:transform 0.2s;
}
.cms-sidebar-item:hover .icon{
  transform:scale(1.15);
}
.cms-main-content{
  display:flex;
  flex-direction:column;
  flex:1;
  background:#fff;
  height:100%;
  position:relative;
  overflow:hidden;
}

@media(max-width:900px){
  .cms-panel{width:100% !important;}
}
@media(max-width:640px){
  .cms-container{flex-direction:column !important;}
  .cms-sidebar{
    width:100% !important;
    height:130px !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,0.05) !important;
    flex-direction:row !important;
    padding:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:10px !important;
  }
  .cms-sidebar-group{
    margin-bottom:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
  }
  .cms-sidebar-group-title{display:none !important;}
  .cms-sidebar-item{white-space:nowrap !important;padding:7px 10px !important;}
}
/* ══════════════════════════════════════
   Service & Drivers Subpage Performance CSS
   ══════════════════════════════════════ */
.service-view-pane {
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: none;
}
.service-view-pane.fade-out {
  opacity: 0;
  transform: translateY(8px);
}

.driver-item-row {
  display: grid;
  grid-template-columns: 2fr 3fr 1.2fr 1.2fr 1fr;
  align-items: center;
  background: #fff;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid #eee;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 16px;
}
.driver-item-row:hover {
  border-color: var(--green);
  box-shadow: 0 6px 20px rgba(92,181,49,0.06);
  transform: translateY(-2px);
}

@media(max-width: 960px) {
  .driver-item-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .driver-item-row > div:nth-child(1) { grid-column: span 2; }
  .driver-item-row > div:nth-child(2) { grid-column: span 2; border-bottom: 1px dashed #eee; padding-bottom: 8px; }
  .driver-item-row > div:nth-child(3) { grid-column: span 1; }
  .driver-item-row > div:nth-child(4) { grid-column: span 1; text-align: right; }
  .driver-item-row > div:nth-child(5) { grid-column: span 2; text-align: center; margin-top: 4px; }
  .driver-item-row > div:nth-child(5) button { width: 100%; }
}

.cms-body{flex:1;overflow-y:auto;padding:24px;}
.cms-sec{margin-bottom:22px;}
.cms-stitle{font-size:10px;color:#aaa;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f0f0f0;}
.cms-f{
  display:flex;
  align-items:flex-start; /* 💡 贴顶对齐，使高低输入控件与标签完美平齐 */
  gap:16px;
  margin-bottom:14px;
  width:100%;
  box-sizing:border-box;
}
.cms-lbl{
  width:160px;
  flex-shrink:0;
  font-size:12px;
  font-weight:600;
  color:#555;
  margin-bottom:0;
  padding-top:8px; /* 💡 与第一行文字对齐 */
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cms-inp{
  flex:1; /* 💡 自动填充右侧剩余宽度 */
  width:auto;
  padding:7px 12px;
  border:1px solid #e0e0e0;
  border-radius:5px;
  font-size:13px;
  font-family:var(--font);
  color:#222;
  outline:none;
  transition:border 0.12s;
}
.cms-inp:focus{border-color:var(--green);box-shadow:0 0 8px rgba(92,181,49,0.08);}
.cms-ta{
  flex:1; /* 💡 自动填充右侧剩余宽度 */
  width:auto;
  padding:7px 12px;
  border:1px solid #e0e0e0;
  border-radius:5px;
  font-size:13px;
  font-family:var(--font);
  color:#222;
  outline:none;
  resize:vertical;
  min-height:54px;
}
.cms-ta:focus{border-color:var(--green);box-shadow:0 0 8px rgba(92,181,49,0.08);}
.login-card .cms-f{display:block;} /* 💡 防止管理员登录页变形，保持高保真垂直居中堆叠 */
.login-card .cms-lbl{width:100%;text-align:left;margin-bottom:6px;padding-top:0;}
.cms-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cms-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.cms-stats-grid,
.cms-stats-title-grid{
  display:grid;
  gap:14px;
  width:100%;
}
.cms-stats-grid{grid-template-columns:repeat(3,minmax(180px,1fr));}
.cms-stats-title-grid{grid-template-columns:repeat(2,minmax(240px,1fr));}
.cms-stats-field.cms-f{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  margin-bottom:12px;
}
.cms-stats-field .cms-lbl{
  width:auto;
  padding-top:0;
  overflow:visible;
  white-space:normal;
}
.cms-stats-field .cms-inp{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
@media(max-width:900px){
  .cms-stats-grid,.cms-stats-title-grid{grid-template-columns:1fr;}
}
.cms-join-editor .cms-row2 > .cms-f,
.cms-join-editor .cms-row3 > .cms-f{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  margin-bottom:0;
}
.cms-join-editor .cms-row2 > .cms-f > .cms-lbl,
.cms-join-editor .cms-row3 > .cms-f > .cms-lbl{
  width:auto;
  padding-top:0;
  overflow:visible;
  white-space:normal;
}
.cms-join-editor .cms-row2 > .cms-f > .cms-inp,
.cms-join-editor .cms-row3 > .cms-f > .cms-inp{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
@media(max-width:900px){
  .cms-join-editor .cms-row2,
  .cms-join-editor .cms-row3{grid-template-columns:1fr;}
}
.cms-tutorial-categories-box{
  margin-bottom:24px;
  padding:20px;
  background:#f8fbf6;
  border:1px solid #dcebd5;
  border-radius:14px;
}
.cms-tutorial-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.cms-tutorial-section-head h3{font-size:15px;color:#0f172a;margin:0 0 4px;}
.cms-tutorial-section-head p{font-size:12px;color:#64748b;margin:0;}
.cms-tutorial-category-add{display:flex;gap:8px;min-width:360px;}
.cms-tutorial-category-add .cms-add{margin:0;white-space:nowrap;}
.cms-tutorial-category-list{display:flex;flex-wrap:wrap;gap:10px;}
.cms-tutorial-category{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid #dbe4d7;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font:600 12px/1 var(--font);
  cursor:pointer;
}
.cms-tutorial-category:hover,.cms-tutorial-category.is-active{border-color:var(--green);color:var(--green);background:#f3faef;}
.cms-tutorial-category small{min-width:20px;padding:3px 6px;border-radius:999px;background:#eef2f7;color:#64748b;text-align:center;}
.cms-tutorial-category b{font-size:16px;line-height:12px;color:#94a3b8;}
.cms-tutorial-category b:hover{color:#ef4444;}
.cms-tutorial-card{
  padding:18px;
  margin-bottom:8px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(15,23,42,0.035);
}
.cms-tutorial-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #eef2f7;}
.cms-tutorial-card-title,.cms-tutorial-card-actions{display:flex;align-items:center;gap:10px;min-width:0;}
.cms-tutorial-card-title strong{font-size:14px;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cms-tutorial-index{flex:none;padding:4px 9px;border-radius:6px;background:var(--green);color:#fff;font-size:11px;font-weight:800;}
.cms-tutorial-card-actions .cms-del{margin:0;padding:5px 10px;}
.cms-tutorial-auto-state{font-size:11.5px;color:#94a3b8;white-space:nowrap;}
.cms-tutorial-auto-state.is-ready{color:#4c9f2d;}
.cms-tutorial-fields{display:grid;grid-template-columns:minmax(220px,1fr) minmax(170px,.55fr) minmax(300px,1.25fr) auto;gap:14px;align-items:end;}
.cms-tutorial-field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.cms-tutorial-field label{font-size:12px;font-weight:700;color:#64748b;}
.cms-tutorial-hot{display:flex;align-items:center;gap:7px;min-height:42px;padding:0 10px;white-space:nowrap;}
.cms-tutorial-hot label{font-size:12.5px;font-weight:700;color:#ef4444;cursor:pointer;}
.cms-tutorial-metadata{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:center;margin-top:16px;padding:12px;background:#f8fafc;border-radius:10px;}
.cms-tutorial-cover{height:72px;border-radius:8px;overflow:hidden;background:#e9eef4;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:11px;text-align:center;}
.cms-tutorial-cover img{width:100%;height:100%;object-fit:cover;}
.cms-tutorial-meta-copy{min-width:0;}
.cms-tutorial-meta-tags{display:flex;gap:8px;margin-bottom:7px;}
.cms-tutorial-meta-tags span{padding:3px 7px;border-radius:5px;background:#fff;border:1px solid #e2e8f0;color:#64748b;font-size:11px;}
.cms-tutorial-meta-copy p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0;color:#64748b;font-size:12px;line-height:1.6;}
@media(max-width:1100px){
  .cms-tutorial-fields{grid-template-columns:1fr 1fr;}
  .cms-tutorial-hot{padding:0;}
}
@media(max-width:720px){
  .cms-tutorial-section-head,.cms-tutorial-card-head{align-items:stretch;flex-direction:column;}
  .cms-tutorial-category-add{min-width:0;width:100%;}
  .cms-tutorial-fields{grid-template-columns:1fr;}
  .cms-tutorial-metadata{grid-template-columns:96px 1fr;}
}
.cms-card{background:#f8f8f8;border:1px solid #ebebeb;border-radius:6px;padding:12px;margin-bottom:8px;}
.cms-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cms-card-name{font-size:13px;font-weight:600;color:#333;}
.cms-del{background:#fee2e2;color:#b91c1c;border:none;border-radius:3px;padding:3px 9px;font-size:11px;cursor:pointer;font-family:var(--font);}
.cms-add{background:var(--green);color:#fff;border:none;border-radius:4px;padding:6px 14px;font-size:12px;cursor:pointer;font-family:var(--font);margin-top:6px;}
.cms-add:hover{background:var(--green-dark);}
/* nav tree */
.nt-l1{background:#fff;border:1px solid #e8e8e8;border-radius:6px;overflow:hidden;margin-bottom:6px;}
.nt-l1-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#f8f8f8;}
.nt-l1-body{padding:8px 12px;display:flex;flex-direction:column;gap:4px;}
.nt-l2{background:#f3f3f3;border-radius:5px;padding:4px;}
.nt-l2-head{display:flex;align-items:center;gap:6px;padding:5px 8px;}
.nt-l3-list{padding:4px 8px 8px 28px;display:flex;flex-direction:column;gap:3px;}
.nt-l3-row{display:flex;align-items:center;gap:6px;}
.nt-inp-sm{flex:1;padding:4px 8px;border:1px solid #ddd;border-radius:3px;font-size:12px;font-family:var(--font);}
.nt-del-sm{background:none;border:none;color:#e53;cursor:pointer;font-size:14px;padding:2px 4px;}
.nt-add-l3{background:none;border:1px dashed #ccc;color:#888;border-radius:3px;padding:3px 10px;font-size:11px;cursor:pointer;margin-top:3px;font-family:var(--font);}
.nt-add-l3:hover{border-color:var(--green);color:var(--green);}
.nt-inp{flex:1;padding:5px 8px;border:1px solid #ddd;border-radius:4px;font-size:13px;font-family:var(--font);}
.nt-icon{width:26px;text-align:center;padding:4px 0;border:1px solid #ddd;border-radius:3px;font-size:12px;font-family:var(--font);}
/* upload box */
.upload-box{border:2px dashed #d5d5d5;border-radius:8px;padding:0;cursor:pointer;transition:border-color 0.15s;overflow:hidden;position:relative;}
.upload-box:hover{border-color:var(--green);}
.upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-hint{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;}
.upload-icon{font-size:28px;opacity:0.3;}
.upload-lbl{font-size:13px;color:#888;}.upload-lbl span{color:var(--green);font-weight:600;}
.upload-sub{font-size:11px;color:#bbb;}
.upload-preview{width:100%;max-height:180px;object-fit:cover;display:block;}
.upload-preview.hidden{display:none;}
.upload-actions{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#fafafa;border-top:1px solid #eee;}
.upload-filename{font-size:12px;color:#888;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.upload-remove{font-size:12px;color:#e53;cursor:pointer;background:none;border:none;font-family:var(--font);}
/* overlay slider */
.slider-row{display:flex;align-items:center;gap:10px;margin-top:8px;}
.slider-row label{font-size:12px;color:#777;min-width:60px;}
.slider-row input[type=range]{flex:1;accent-color:var(--green);}
.slider-val{font-size:12px;color:#555;min-width:28px;text-align:right;}

.cms-foot{padding:14px 18px;border-top:1px solid #eee;display:flex;gap:10px;flex-shrink:0;}
.cms-save{flex:1;padding:10px;background:var(--green);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);}
.cms-save:hover{background:var(--green-dark);}
.cms-reset{padding:10px 14px;background:#f5f5f5;color:#666;border:1px solid #e0e0e0;border-radius:6px;font-size:13px;cursor:pointer;font-family:var(--font);}
.cms-reset:hover{background:#ebebeb;}
.toast{position:fixed;bottom:80px;right:24px;background:var(--green);color:#fff;padding:10px 20px;border-radius:6px;font-size:13px;font-weight:500;z-index:9999;opacity:0;transform:translateY(8px);transition:all 0.2s;pointer-events:none;font-family:var(--font);}
.toast.on{opacity:1;transform:none;}
/* ══════════════════════════════════════
   GLOBAL PREMIUM TEXT HOVER INTERACTIONS
   ══════════════════════════════════════ */
/* Triggers for headers, titles and textual landmarks */
.logo-name, .logo-sub,
.banner-model, .banner-title, .banner-sub, .banner-deco,
.sec-h1, .sec-h2, .sec-title,
.stat-num, .stat-label,
.prod-series, .prod-sub,
.partner-grid, .p-scene-label, .p-logo-tag,
.news-date, .news-ttl,
.award-name, .award-logo-box, .awards-trophy-col,
.cta-title, .cta-sub,
.footer-col-title, .footer-watermark, .footer-contact p, .footer-bottom span {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. Header & Logo */
.logo-name:hover {
  color: var(--green);
  text-shadow: 0 0 10px rgba(92,181,49,0.3);
  transform: scale(1.02);
}
.logo-sub:hover {
  color: #ffffff;
  letter-spacing: 3px;
}

/* 2. Banner / Hero */
.banner-model:hover {
  color: var(--green);
  letter-spacing: 3px;
}
.banner-title:hover {
  text-shadow: 0 0 20px rgba(92,181,49,0.4);
  transform: translateY(-2px);
}
.banner-sub:hover {
  color: #111;
  text-shadow: 0 0 10px rgba(255,255,255,0.8);
  letter-spacing: 1px;
}
.banner-deco:hover {
  color: rgba(92, 181, 49, 0.22) !important;
  transform: translateY(-20px) scale(1.06);
  text-shadow: 0 0 25px rgba(92,181,49,0.25);
}

/* 3. Section Titles */
.sec-h1:hover, .sec-h2:hover, .sec-title:hover {
  color: var(--green);
  text-shadow: 0 0 12px rgba(92,181,49,0.3);
  transform: translateY(-2px) scale(1.02);
}

/* 4. Stats Section */
.stat-num:hover {
  transform: scale(1.12) translateY(-4px);
  text-shadow: 0 0 18px rgba(92,181,49,0.45);
}
.stat-label:hover {
  color: #111;
  letter-spacing: 0.5px;
}

/* 5. Product Cards */
.prod-series:hover {
  color: var(--green);
  transform: translateX(2px);
}
.prod-sub:hover {
  color: #111;
}

/* 6. Partner Labels */
.p-scene-label:hover {
  color: rgba(255,255,255,0.55) !important;
  transform: scale(1.1);
}
.p-logo-tag:hover {
  background: var(--green) !important;
  color: #fff !important;
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 4px 10px rgba(92,181,49,0.2);
}

/* 7. News Items */
.news-date:hover {
  transform: scale(1.05) translateX(2px);
}
.news-ttl:hover {
  color: var(--green) !important;
  text-shadow: 0 0 8px rgba(92,181,49,0.15);
}

/* 8. Awards Section */
.award-logo-box:hover {
  transform: scale(1.2) translateY(-4px);
  filter: drop-shadow(0 4px 10px rgba(92,181,49,0.3));
}
.award-name:hover {
  color: var(--green);
}
.awards-trophy-col:hover {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 8px 15px rgba(253,246,186,0.5));
}

/* 9. CTA Section */
.cta-title:hover {
  text-shadow: 0 0 15px rgba(255,255,255,0.4);
  transform: translateY(-2px);
}
.cta-sub:hover {
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* 10. Footer Details */
.footer-col-title:hover {
  color: var(--green) !important;
  letter-spacing: 3px;
}
.footer-contact p:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
  transform: translateX(3px);
}
.footer-bottom span:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.footer-watermark:hover {
  color: rgba(255, 255, 255, 0.05) !important;
  transform: translateX(-50%) scale(1.05);
}
.news-date, .footer-bottom span {
  display: inline-block;
}

/* ══════════════════════════════════════
   🏢 GMKtec B2B Corporate Purchase Styles (Neon Cyber-Green)
   ══════════════════════════════════════ */
#view-b2b {
  --b2b-bg: #ffffff;
  --b2b-bg-dark: #f8f9fa;
  --b2b-green: #5cb531;
  --b2b-green-rgb: 92, 181, 49;
  --b2b-border: rgba(92, 181, 49, 0.15);
  font-family: var(--font);
  background: var(--b2b-bg) !important; /* 强制大容器本身权威洗白，完美渲染 Banner 与全站白底轻奢发光！ */
  color: #222222 !important;
}

/* 企业购底置页脚权威强制染黑，与其他页眉页脚保持绝对视感一致 */
#view-b2b footer.footer {
  background: #0d0e10 !important; /* 经典极摩客深邃暗色底 */
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
#view-b2b footer.footer p,
#view-b2b footer.footer span,
#view-b2b footer.footer a,
#view-b2b footer.footer div,
#view-b2b footer.footer .footer-bottom,
#view-b2b footer.footer .footer-inner {
  color: rgba(255, 255, 255, 0.6) !important; /* 页脚文字恢复亮白高对比度 */
}
#view-b2b footer.footer div.footer-watermark {
  color: rgba(255, 255, 255, 0.02) !important; /* 强制拉低透明度到 2%，隐隐约约展现高档防伪 */
}
#view-b2b footer.footer a:hover {
  color: var(--green) !important;
}

/* 动感霓虹发光按钮 */
.b2b-neon-btn {
  background: var(--b2b-green);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(var(--b2b-green-rgb), 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.b2b-neon-btn:hover {
  background: #4fa225;
  box-shadow: 0 8px 25px rgba(var(--b2b-green-rgb), 0.5);
  transform: translateY(-2px);
}
.b2b-neon-btn-sm {
  background: transparent;
  color: var(--b2b-green);
  border: 1px solid var(--b2b-green);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--b2b-green-rgb), 0.05);
  transition: all 0.2s ease;
}
.b2b-neon-btn-sm:hover {
  background: var(--b2b-green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--b2b-green-rgb), 0.3);
}

/* 明亮版奢华悬浮玻璃卡片 */
.b2b-glass-card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.b2b-glass-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--b2b-green-rgb), 0.3);
  box-shadow: 0 15px 35px rgba(var(--b2b-green-rgb), 0.1), 0 10px 20px rgba(0,0,0,0.04);
}

/* 适用场景 Tab */
.b2b-tab-btn {
  background: #f1f3f1;
  color: #555;
  border: 1px solid rgba(0,0,0,0.05);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}
.b2b-tab-btn.active {
  background: rgba(var(--b2b-green-rgb), 0.08);
  color: #4fa225;
  border-color: var(--b2b-green);
  box-shadow: 0 2px 10px rgba(var(--b2b-green-rgb), 0.1);
}

/* 规格对比表格 */
.b2b-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.b2b-table th {
  background: #f4f6f4;
  color: #333;
  font-weight: 800;
  padding: 16px;
  text-align: left;
  border-bottom: 2px solid rgba(0,0,0,0.06);
}
.b2b-table td {
  padding: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: #444;
}
.b2b-table tr:hover td {
  background: #f9faf9;
  color: #111;
}

/* FAQ 手风琴 */
.b2b-faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 12px;
}
.b2b-faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  cursor: pointer;
  color: #222;
  font-weight: 700;
  font-size: 14.5px;
  transition: color 0.2s ease;
}
.b2b-faq-header:hover {
  color: var(--b2b-green);
}
.b2b-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  color: #555;
  font-size: 13px;
  line-height: 1.6;
  padding-bottom: 0;
}
.b2b-faq-body.open {
  padding-bottom: 18px;
}

/* 询盘明亮表单 */
.b2b-form-input {
  width: 100%;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.08);
  color: #111;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 13px;
  transition: all 0.3s ease;
  outline: none;
}
.b2b-form-input:focus {
  border-color: var(--b2b-green);
  box-shadow: 0 0 8px rgba(var(--b2b-green-rgb), 0.15);
  background: #ffffff;
}

/* 🏢 B2B 白底苹果风高强优先级内联样式覆盖引擎 */
#view-b2b [style*="background: #020502"],
#view-b2b [style*="background:#020502"] {
  background: var(--b2b-bg-dark) !important;
  border-bottom-color: rgba(0,0,0,0.05) !important;
}
#view-b2b [style*="background: #050805"],
#view-b2b [style*="background:#050805"] {
  background: var(--b2b-bg) !important;
  border-bottom-color: rgba(0,0,0,0.05) !important;
}
#view-b2b [style*="color: #fff"],
#view-b2b [style*="color:#fff"] {
  color: #111111 !important;
}
#view-b2b [style*="color: #aaa"],
#view-b2b [style*="color:#aaa"],
#view-b2b [style*="color: #bbb"],
#view-b2b [style*="color:#bbb"],
#view-b2b [style*="color: #888"],
#view-b2b [style*="color:#888"],
#view-b2b [style*="color: #666"],
#view-b2b [style*="color:#666"] {
  color: #333333 !important;
}
#view-b2b p,
#view-b2b span,
#view-b2b label,
#view-b2b th,
#view-b2b td {
  color: #222222 !important;
}
#view-b2b .premium-text {
  color: #111111 !important;
}
#view-b2b [style*="background: rgba(15,25,15,0.4)"] {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
}
#view-b2b [style*="background: rgba(15,25,15,0.3)"] {
  background: #f8f9fa !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}
#view-b2b [style*="background: rgba(255,255,255,0.02)"],
#view-b2b [style*="background:rgba(255,255,255,0.02)"],
#view-b2b [style*="background: rgba(255,255,255,0.03)"],
#view-b2b [style*="background:rgba(255,255,255,0.03)"] {
  background: #f8f9fa !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}
#view-b2b [style*="background:rgba(15,25,15,0.6)"] {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,0.05) !important;
}
#view-b2b [style*="radial-gradient(circle at 50% 100%, rgba(92,181,49,0.05)"],
#view-b2b [style*="radial-gradient(circle at 50% 100%,rgba(92,181,49,0.05)"] {
  background: radial-gradient(circle at 50% 100%, rgba(92,181,49,0.04) 0%, rgba(255,255,255,0) 70%) !important;
}
#view-b2b [style*="radial-gradient(circle at 80% 50%, rgba(92,181,49,0.06) 0%, rgba(5,8,5,0) 70%)"],
#view-b2b [style*="radial-gradient(circle at 80% 50%,rgba(92,181,49,0.06) 0%,rgba(5,8,5,0) 70%)"] {
  background: radial-gradient(circle at 80% 50%, rgba(92,181,49,0.06) 0%, rgba(255,255,255,0) 70%) !important;
}
#view-b2b svg [fill="#141414"] {
  fill: #f8f9fa !important;
}
#view-b2b svg [fill="#222"] {
  fill: #e9ecef !important;
}
#view-b2b svg [stroke="rgba(255,255,255,0.03)"] {
  stroke: rgba(0,0,0,0.02) !important;
}
#view-b2b [style*="text-shadow: 0 0 10px rgba(92,181,49,0.3)"],
#view-b2b [style*="text-shadow:0 0 10px rgba(92,181,49,0.3)"] {
  text-shadow: none !important;
  color: #4fa225 !important;
}
#view-b2b [style*="opacity: 0.35"],
#view-b2b [style*="opacity:0.35"] {
  color: #111111 !important;
  opacity: 0.25 !important;
}
#view-b2b [style*="background: rgba(92, 181, 49, 0.1)"],
#view-b2b [style*="background:rgba(92,181,49,0.1)"] {
  background: rgba(92, 181, 49, 0.08) !important;
}
#view-b2b [style*="border-bottom: 1px solid rgba(255,255,255,0.03)"] {
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
#b2b-banner-section {
  background: radial-gradient(circle at 80% 50%, rgba(92,181,49,0.06) 0%, rgba(255,255,255,0) 70%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
#b2b-consult-section {
  background: radial-gradient(circle at 50% 100%, rgba(92,181,49,0.04) 0%, rgba(255,255,255,0) 70%) !important;
}

@keyframes b2bScan {
  0% { transform: translateY(-100px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(450px); opacity: 0; }
}

@keyframes b2bRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes b2bFlash {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px #5cb531); }
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Administrator Login Panel Styles */
.login-card {
  padding: 24px 12px;
  animation: navFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-header {
  text-align: center;
  margin-bottom: 28px;
}
.login-shield {
  font-size: 40px;
  margin-bottom: 12px;
  display: inline-block;
  animation: pulse 2s infinite;
}
.login-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}
.login-header p {
  font-size: 12px;
  color: #777;
}
.login-btn {
  width: 100%;
  padding: 11px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(92,181,49,0.2);
}
.login-btn:hover {
  background: var(--green-dark);
  box-shadow: 0 6px 18px rgba(92,181,49,0.3);
}
.login-footer {
  text-align: center;
  margin-top: 20px;
}
.login-footer a {
  font-size: 12px;
  color: var(--green);
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: underline;
}
.login-footer a:hover {
  color: var(--green-dark);
}
.code-btn:hover {
  background: #f0f0f0 !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
}

/* 社交平台气泡悬浮二维码弹窗 */
.social-dot{position:relative;}
.social-qr-pop{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) scale(0.9);
  width:120px;height:120px;background:#fff;border:1px solid rgba(0,0,0,0.08);
  border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.15);
  display:none;align-items:center;justify-content:center;z-index:99;
  padding:6px;transform-origin:bottom center;
  transition:all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation:navFadeIn 0.2s forwards;
}
.social-qr-pop img{width:100%;height:100%;object-fit:contain;border-radius:4px;}
.social-qr-pop::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#fff;
}
.social-dot:hover .social-qr-pop{display:flex;}
.social-custom-logo{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.service-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;
  border-color: rgba(92,181,49,0.3) !important;
}
/* ══ 全站卡片通用 hover 效果修复 ══ */
.prod-card:hover,
.prod-card:focus {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
  border-color: rgba(92,181,49,0.18) !important;
}
.service-driver-card:hover,
.service-driver-card:focus {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 30px rgba(0,0,0,0.07) !important;
  border-color: rgba(92,181,49,0.25) !important;
  background: #fff !important;
}
.driver-item-row:hover {
  border-color: var(--green) !important;
  box-shadow: 0 6px 20px rgba(92,181,49,0.08) !important;
  transform: translateY(-2px) !important;
  background: #fafffe !important;
}
.partner-photo:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
  border-color: rgba(92,181,49,0.35) !important;
}
/* 搜索框 -- 驱动页双栏 */
.driver-search-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
.driver-search-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}
.driver-search-field-label::before {
  content: '';
  width: 10px;
  height: 10px;
  background: #111;
  border-radius: 2px;
  flex-shrink: 0;
}
.driver-search-input-box {
  background: #f7f7f7;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-family: var(--font);
  color: #333;
  outline: none;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.driver-search-input-box:focus {
  border-color: #bbb;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.driver-search-select-box {
  appearance: none;
  -webkit-appearance: none;
  background: #f7f7f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 10px 36px 10px 16px;
  font-size: 13px;
  font-family: var(--font);
  color: #333;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
  cursor: pointer;
}
.driver-search-select-box:focus {
  border-color: #bbb;
}
.driver-table-header {
  display: grid;
  grid-template-columns: 2fr 3fr 1.4fr 1.2fr 1fr;
  padding: 10px 20px;
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  font-size: 12.5px;
  font-weight: 600;
  color: #666;
  gap: 16px;
}
.driver-table-row {
  display: grid;
  grid-template-columns: 2fr 3fr 1.4fr 1.2fr 1fr;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  gap: 16px;
  transition: background 0.15s;
}
.driver-table-row:last-child {
  border-bottom: none;
}
.driver-table-row:hover {
  background: #f9f9f9;
}
.driver-dl-btn {
  display: inline-block;
  border: 1.5px solid #ccc;
  color: #333;
  background: #fff;
  border-radius: 4px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.18s;
  white-space: nowrap;
}
.driver-dl-btn:hover {
  border-color: #333;
  background: #333;
  color: #fff;
}
@media (max-width: 900px) {
  .driver-search-bar { grid-template-columns: 1fr; }
  .driver-table-header { display: none; }
  .driver-table-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .driver-table-row > *:nth-child(1) { grid-column: span 2; font-weight: 700; }
  .driver-table-row > *:nth-child(2) { grid-column: span 2; color: #666; font-size: 12px; }
  .driver-table-row > *:nth-child(5) { grid-column: span 2; text-align: center; }
}

/* ══════════════════════════════════════
   三态高科技文本交互样式
   ══════════════════════════════════════ */
.premium-text {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  display: inline-block;
}
.cms-active .premium-text {
  cursor: pointer;
}
/* 1. 未选中状态 (Default / Unselected) */
.premium-text {
  color: inherit;
}
/* 2. 鼠标悬停状态 (Hover) - 全局前台生效，提供灵动高级的变绿上浮科技感回馈 */
.premium-text:hover {
  color: var(--green) !important;
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(92,181,49,0.3);
}
/* 3. 选中状态 (Selected / Active) - 仅在后台管理开启时有效 */
.cms-active .premium-text.selected-text {
  color: var(--green-dark) !important;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(74,150,38,0.5);
}
.cms-active .premium-text.selected-text.has-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

/* ══════════════════════════════════════
   大标题与 Pro 文本专属微拟物缩放与按压回馈
   ══════════════════════════════════════ */
h1, h2, h3, .logo-name, .banner-title, .banner-sub, .prod-series, .sec-title, .section-h1, .section-h2, .premium-text {
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), text-shadow 0.2s, color 0.2s;
}

/* 1. 鼠标悬停（Hover）时：文字微微平滑放大 1.02 倍，散发呼吸感科技微光 */
h1:hover, h2:hover, h3:hover, 
.logo-name:hover, .banner-title:hover, .banner-sub:hover, .prod-series:hover, .sec-title:hover, 
.section-h1:hover, .section-h2:hover, .premium-text:hover {
  transform: scale(1.02) translateY(-1px) !important;
  text-shadow: 0 4px 12px rgba(92,181,49,0.15) !important;
}

/* 2. 鼠标按压点击（Active）时：产生极其清脆的 0.97 倍阻尼物理缩回动效，回馈感爆棚 */
h1:active, h2:active, h3:active, 
.logo-name:active, .banner-title:active, .banner-sub:active, .prod-series:active, .sec-title:active, 
.section-h1:active, .section-h2:active, .premium-text:active {
  transform: scale(0.97) translateY(0) !important;
  transition: transform 0.06s cubic-bezier(0.1, 0.9, 0.2, 1) !important; /* 极速响应点击 */
}

/* ════ 刷新网页且滚动入场时的优雅上滑渐显动画 ════ */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.init-slide-up {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  transition: opacity 0.1s, transform 0.1s;
}

.init-slide-up.play-slide-up-1 {
  animation: slideUpFade 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.12s;
}

.init-slide-up.play-slide-up-2 {
  animation: slideUpFade 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.28s; /* 奢华错落延迟 */
}

/* ══════════════════════════════════════
   OPPO 风格产品中心高级分类与网格卡片样式
   ══════════════════════════════════════ */
.prod-series-tab {
  font-size: 15px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 6px 4px;
}
.prod-series-tab:hover {
  color: var(--green);
}
.prod-series-tab.active {
  color: var(--green-dark) !important;
  font-weight: 700;
}
.prod-series-tab.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

/* OPPO 风格产品卡片 */
.prod-grid-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.015);
  border: 1px solid rgba(0,0,0,0.02);
}
.prod-grid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.04) !important;
  border-color: rgba(92,181,49,0.18) !important;
}

/* 明星主推大卡片 (featured: true) — 模仿 OPPO 巨幕展示 */
.prod-featured-card {
  grid-column: span 2;
  flex-direction: row;
  text-align: left;
  align-items: center;
  padding: 48px 60px;
}
.prod-featured-card .card-media-box {
  width: 45%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.prod-featured-card .card-info-box {
  flex: 1;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.prod-grid-card img.device-pic {
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.prod-grid-card:hover img.device-pic {
  transform: scale(1.05) translateY(-4px);
}

/* 移动端自适应 */
@media (max-width: 992px) {
  #v-prodPageGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .prod-series-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .prod-featured-card {
    grid-column: span 2;
    flex-direction: column;
    text-align: center;
    padding: 40px;
  }
  .prod-featured-card .card-media-box {
    width: 100%;
    height: 200px;
  }
  .prod-featured-card .card-info-box {
    padding-left: 0;
    padding-top: 30px;
    align-items: center;
  }
}
@media (max-width: 600px) {
  #v-prodPageGrid {
    grid-template-columns: 1fr !important;
  }
  .prod-series-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .prod-featured-card {
    grid-column: span 1;
  }
}

/* 驱动下载子页面系列卡片 Grid */
.service-driver-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.service-driver-card {
  background: #f4f4f4;
  border-radius: 24px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: 0 4px 15px rgba(0,0,0,0.01);
}
.service-driver-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.04) !important;
  border-color: rgba(92,181,49,0.15) !important;
  background: #fff;
}
.service-driver-card img.device-pic {
  max-height: 100%;
  max-width: 90%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-driver-card:hover img.device-pic {
  transform: scale(1.05) translateY(-3px);
}
.service-driver-card.active-series {
  background: #ffffff !important;
  border: 2px solid var(--green) !important;
  box-shadow: 0 10px 25px rgba(92,181,49,0.08) !important;
}
@media (max-width: 992px) {
  .service-driver-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .service-driver-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════
   🤝 加入我们 (Careers) 专属高保真样式
══════════════════════════════════════ */
.join-perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.join-perk-card {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 16px;
  padding: 28px 24px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.join-perk-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 12px 30px rgba(92,181,49,0.08);
}
.join-perk-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px auto;
  background: rgba(92,181,49,0.08);
  color: var(--green);
}
.join-perk-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}
.join-perk-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.join-culture-tag {
  display: inline-block;
  background: rgba(92,181,49,0.08);
  border: 1px solid rgba(92,181,49,0.2);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.join-job-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.join-job-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: var(--green);
  opacity: 0;
  transition: opacity 0.3s;
}
.join-job-card:hover {
  transform: translateY(-4px);
  border-color: rgba(92,181,49,0.35);
  box-shadow: 0 16px 40px rgba(92,181,49,0.12);
}
.join-job-card:hover::before {
  opacity: 1;
}
.join-job-left {
  flex: 1;
}
.join-job-title {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.join-job-hot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(255,77,79,0.3);
}
.join-job-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.join-job-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #555;
  background: #f8f9fa;
  border: 1px solid #eaeaea;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.2s;
}
.join-job-card:hover .join-job-tag {
  background: #ffffff;
  border-color: #ddd;
}
.join-job-tag.salary-tag {
  background: rgba(92,181,49,0.08);
  color: var(--green);
  border-color: rgba(92,181,49,0.25);
  font-weight: 800;
}
.join-job-tag svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  stroke: #888;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  display: inline-block;
}

.join-job-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.join-job-detail-btn {
  font-size: 13px;
  font-weight: 700;
  color: #888;
  transition: color 0.3s;
  white-space: nowrap;
}
.join-job-card:hover .join-job-detail-btn {
  color: var(--green);
}
.join-job-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  flex-shrink: 0;
}
.join-job-card:hover .join-job-arrow {
  background: var(--green);
  border-color: var(--green);
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(92,181,49,0.3);
}
.join-job-card:hover .join-job-arrow svg {
  stroke: #fff !important;
}
.join-job-arrow svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  stroke: #888;
  fill: none;
  stroke-width: 2;
  transition: stroke 0.3s;
  flex-shrink: 0;
  display: inline-block;
}

/* ═══ 投递与面试流程 ═══ */
.join-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 992px) {
  .join-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .join-process-grid {
    grid-template-columns: 1fr;
  }
}
.join-process-step {
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 32px 20px;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 6px 24px rgba(0,0,0,0.02);
  position: relative;
  overflow: hidden;
}
.join-process-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), #8bd66a);
  opacity: 0;
  transition: opacity 0.3s;
}
.join-process-step:hover {
  transform: translateY(-6px);
  border-color: rgba(92,181,49,0.3);
  box-shadow: 0 16px 40px rgba(92,181,49,0.12);
}
.join-process-step:hover::before {
  opacity: 1;
}
.join-process-num-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  background: rgba(92,181,49,0.1);
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.join-process-icon-wrap {
  width: 58px; height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  font-size: 26px;
  background: linear-gradient(135deg, rgba(92,181,49,0.12) 0%, rgba(92,181,49,0.04) 100%);
  border: 1px solid rgba(92,181,49,0.2);
  box-shadow: 0 4px 16px rgba(92,181,49,0.08);
  transition: all 0.3s;
}
.join-process-step:hover .join-process-icon-wrap {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 8px 24px rgba(92,181,49,0.3);
}
.join-process-label {
  font-size: 17px;
  font-weight: 800;
  color: #111;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.join-process-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.join-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}
.join-page-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.join-page-btn:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--green);
}
.join-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.join-page-btn svg {
  width: 16px; height: 16px;
}
.join-page-dots {
  display: flex;
  gap: 8px;
}
.join-page-dot {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid #eee;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
}
.join-page-dot:hover {
  border-color: var(--green);
  color: var(--green);
}
.join-page-dot.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.join-modal-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  color: #555;
  background: #f5f5f5;
  padding: 4px 12px;
  border-radius: 12px;
}

/* ==========================================================================
   GMKtec Video Tutorials & User Guide (Light Theme CSS)
   ========================================================================== */

#view-tutorials {
  background: #f8fafc;
  min-height: 100vh;
  padding-bottom: 80px;
}

.tutorials-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 60px 24px 50px;
  text-align: center;
}

.tutorials-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.tutorials-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(92, 181, 49, 0.08);
  border: 1px solid rgba(92, 181, 49, 0.25);
  border-radius: 30px;
  color: #3b8216;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.tutorials-badge .dot {
  width: 7px;
  height: 7px;
  background: #5cb531;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(92, 181, 49, 0.8);
}

.tutorials-title {
  font-size: 38px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.tutorials-sub {
  font-size: 16px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 660px;
}

.tutorials-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

.tutorials-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.tutorials-cats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tutorials-cat-btn {
  padding: 9px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.tutorials-cat-btn:hover {
  border-color: #5cb531;
  color: #5cb531;
  transform: translateY(-1px);
}

.tutorials-cat-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

.tutorials-search-wrap {
  position: relative;
  min-width: 280px;
}

.tutorials-search-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.tutorials-search-input {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 40px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  font-size: 13.5px;
  color: #0f172a;
  transition: all 0.25s ease;
  outline: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.tutorials-search-input:focus {
  border-color: #5cb531;
  box-shadow: 0 0 0 3px rgba(92, 181, 49, 0.15);
}

.tutorials-search-wrap .clear-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
}

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

@media (max-width: 1024px) {
  .tutorials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .tutorials-grid {
    grid-template-columns: 1fr;
  }
  .tutorials-title {
    font-size: 28px;
  }
  .tutorials-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .tutorials-search-wrap {
    min-width: 100%;
  }
}

.tutorials-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.tutorials-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(92, 181, 49, 0.4);
}

.tutorials-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  overflow: hidden;
}

.tutorials-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tutorials-card:hover .tutorials-card-thumb img {
  transform: scale(1.06);
}

.tutorials-card-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.tag-cat {
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  color: #5cb531;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.tag-hot {
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.9);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
}

.tutorials-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 2;
}

.tutorials-card:hover .tutorials-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: #5cb531;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(92, 181, 49, 0.4);
}

.tutorials-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.tutorials-card-content {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.tutorials-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tutorials-card-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.tutorials-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
  font-size: 12.5px;
  color: #94a3b8;
}

.btn-play-link {
  color: #5cb531;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.tutorials-card:hover .btn-play-link {
  gap: 8px;
}

.tutorials-empty {
  text-align: center;
  padding: 80px 20px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 20px;
}

.tutorials-empty .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.tutorials-empty h3 {
  font-size: 20px;
  color: #0f172a;
  margin-bottom: 8px;
}

.tutorials-empty p {
  color: #64748b;
  font-size: 14px;
}

/* ═══ Video Modal Lightbox ═══ */
.tutorials-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 24px;
}

.tutorials-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.tutorials-modal-container {
  background: #ffffff;
  border-radius: 24px;
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  animation: modalPop 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes modalPop {
  from { transform: scale(0.92) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.tutorials-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(15, 23, 42, 0.6);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s;
}

.tutorials-modal-close:hover {
  background: #ef4444;
  transform: rotate(90deg);
}

.tutorials-modal-player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  overflow: hidden;
  position: relative;
}

.modal-iframe, .modal-video-player {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.modal-link-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.modal-cover-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.modal-link-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #ffffff;
  text-align: center;
}

.modal-external-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #5cb531;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 30px;
  margin-top: 14px;
  box-shadow: 0 6px 20px rgba(92, 181, 49, 0.4);
  transition: all 0.25s;
}

.modal-external-btn:hover {
  background: #4a9c26;
  transform: scale(1.05);
}

.tutorials-modal-info {
  padding: 28px 32px 36px;
}

.modal-info-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  color: #64748b;
}

.modal-cat-tag {
  padding: 3px 10px;
  background: rgba(92, 181, 49, 0.1);
  color: #3b8216;
  font-weight: 700;
  border-radius: 6px;
}

.modal-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.35;
}

.modal-desc {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
}