*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#070713;color:#f8f8ff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.bg-grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(#000,transparent 78%)}.orb{position:fixed;width:420px;height:420px;border-radius:999px;filter:blur(70px);opacity:.38;pointer-events:none}.orb-a{left:-160px;top:120px;background:#8b5cf6}.orb-b{right:-170px;bottom:80px;background:#06b6d4}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,4vw,62px);border-bottom:1px solid rgba(255,255,255,.1);background:rgba(7,7,19,.78);backdrop-filter:blur(18px)}.brand{display:flex;gap:12px;align-items:center}.brand-logo{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,#8b5cf6,#06b6d4);font-weight:900}.brand small{display:block;color:#a8adbf;margin-top:2px}.nav{display:flex;gap:28px;color:#c9cce0}.nav a:hover{color:#fff}.menu{display:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;border-radius:14px;width:44px;height:44px}.hero{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:46px;align-items:center;padding:90px clamp(18px,4vw,62px) 46px}.pill,.live{display:inline-flex;width:max-content;padding:8px 13px;border:1px solid rgba(139,92,246,.34);background:rgba(139,92,246,.16);border-radius:999px;color:#ddd6fe;font-size:13px;font-weight:800}.hero h1{font-size:clamp(42px,6vw,76px);line-height:.98;margin:22px 0 20px;letter-spacing:-3px}.hero p{max-width:760px;color:#bbc0d4;font-size:18px;line-height:1.8}.hero-actions,.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.btn{border:0;border-radius:999px;padding:13px 20px;color:#fff;font-weight:900;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,#8b5cf6,#ec4899);box-shadow:0 12px 38px rgba(139,92,246,.32)}.secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.notice{margin-top:18px;color:#cbd5e1;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);border-radius:18px;padding:12px 14px;max-width:640px}.hero-panel,.workbench,.tabs,.results article,.setup{border:1px solid rgba(255,255,255,.1);background:rgba(17,18,34,.82);backdrop-filter:blur(18px);box-shadow:0 28px 80px rgba(0,0,0,.28)}.hero-panel{border-radius:30px;padding:16px;transform:rotate(1deg)}.panel-top{display:flex;gap:7px;align-items:center;padding:8px 8px 16px;color:#969bab;font-size:13px}.panel-top span{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.26)}.panel-top em{margin-left:auto;font-style:normal}.preview-stack{display:grid;gap:14px}.preview-card{min-height:130px;border-radius:22px;padding:20px;background:linear-gradient(135deg,#1e1b4b,#7c3aed,#0891b2);display:flex;flex-direction:column;justify-content:end}.preview-card.big{min-height:210px}.preview-card.pink{background:linear-gradient(135deg,#831843,#ec4899,#fb923c)}.preview-card.cyan{background:linear-gradient(135deg,#064e3b,#06b6d4,#22c55e)}.preview-card b{font-size:24px}.preview-card span{color:rgba(255,255,255,.78)}.creator{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;padding:48px clamp(18px,4vw,62px)}.tabs,.workbench{border-radius:30px}.tabs{height:max-content;padding:16px;position:sticky;top:90px}.tab{width:100%;text-align:left;border:1px solid transparent;background:transparent;color:#b8bdce;border-radius:18px;padding:14px;margin-bottom:8px;cursor:pointer}.tab.active,.tab:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}.side-note{margin-top:16px;border:1px solid rgba(6,182,212,.24);background:rgba(6,182,212,.09);border-radius:20px;padding:16px;color:#cbd5e1;line-height:1.6}.side-note p{margin:8px 0 0}.workbench{padding:clamp(18px,3vw,30px)}.workbench-head,.section-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.eyebrow{margin:0 0 8px;color:#a78bfa;font-size:12px;font-weight:900;letter-spacing:.16em}.workbench h2,.gallery-section h2,.setup h2{margin:0;font-size:clamp(28px,4vw,42px);letter-spacing:-1.2px}.panel{display:none}.panel.active{display:block}.field{display:grid;gap:9px;margin-bottom:16px}.field span,.upload span{font-weight:900;color:#e2e8f0}textarea,input,select{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;outline:none;border-radius:18px}textarea{min-height:150px;resize:vertical;padding:16px;line-height:1.65}input,select{min-height:50px;padding:0 14px}option{color:#111827}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.upload{position:relative;display:grid;place-items:center;text-align:center;min-height:230px;border:1.5px dashed rgba(255,255,255,.22);border-radius:24px;background:rgba(255,255,255,.045);cursor:pointer;margin-bottom:16px;overflow:hidden;padding:22px}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload small{display:block;margin-top:7px;color:#aeb4c8}.upload img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;border-radius:18px;background:rgba(0,0,0,.5);z-index:2}.or{text-align:center;color:#9ca3af;margin:6px 0 16px}.progress{margin-top:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.06);padding:14px}.progress div{display:flex;justify-content:space-between;color:#cbd5e1;margin-bottom:9px}.progress i{display:block;height:10px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}.progress em{display:block;height:100%;width:0;background:linear-gradient(90deg,#8b5cf6,#06b6d4);border-radius:inherit;transition:.2s}.error{margin-top:16px;padding:14px;border:1px solid rgba(248,113,113,.35);background:rgba(127,29,29,.32);border-radius:18px;color:#fecaca;white-space:pre-wrap}.gallery-section,.setup{margin:34px clamp(18px,4vw,62px);padding:28px;border-radius:30px}.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.results article{border-radius:24px;overflow:hidden}.result-media{min-height:260px;background:#111827;display:grid;place-items:center}.result-media img,.result-media video{width:100%;height:100%;max-height:420px;object-fit:contain;background:#050510}.result-body{padding:14px;display:grid;gap:8px}.result-body strong{font-size:16px}.result-body span,.result-body code{color:#aeb4c8;font-size:13px;word-break:break-all}.result-body a{color:#93c5fd}.setup ol{color:#cbd5e1;line-height:1.9}.setup code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:8px}footer{padding:28px clamp(18px,4vw,62px);color:#8f96aa;border-top:1px solid rgba(255,255,255,.1)}@media(max-width:980px){.hero,.creator{grid-template-columns:1fr}.hero-panel{transform:none}.tabs{position:static}.grid,.results{grid-template-columns:1fr}}@media(max-width:720px){.nav{display:none;position:fixed;top:78px;left:18px;right:18px;flex-direction:column;background:rgba(10,11,26,.96);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px}.nav.open{display:flex}.menu{display:block}.hero h1{letter-spacing:-1.6px}.workbench-head,.section-head{display:block}}

/* ===== A面样品展示优化 ===== */
.section-subtitle{
  margin:0 0 28px;
  color:#b8bfd9;
  line-height:1.8;
  font-size:16px;
}

.sample-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:56px;
}

.sample-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(255,255,255,.04);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transition:transform .2s ease,border-color .2s ease;
}

.sample-card:hover{
  transform:translateY(-4px);
  border-color:rgba(139,92,246,.38);
}

.sample-thumb{
  height:220px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.thumb-a{
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.78), transparent 10%),
    linear-gradient(135deg,#171338,#6d28d9 48%,#0ea5e9);
}

.thumb-b{
  background:
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.72), transparent 10%),
    linear-gradient(135deg,#2a1748,#ec4899 48%,#fb7185);
}

.thumb-c{
  background:
    radial-gradient(circle at 40% 28%, rgba(255,255,255,.8), transparent 10%),
    linear-gradient(135deg,#162033,#0f766e 48%,#22c55e);
}

.thumb-d{
  background:
    radial-gradient(circle at 70% 26%, rgba(255,255,255,.8), transparent 10%),
    linear-gradient(135deg,#1f1141,#7c3aed 52%,#f97316);
}

.thumb-e{
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.74), transparent 10%),
    linear-gradient(135deg,#101b38,#2563eb 45%,#06b6d4);
}

.thumb-f{
  background:
    radial-gradient(circle at 60% 24%, rgba(255,255,255,.78), transparent 10%),
    linear-gradient(135deg,#231445,#9333ea 48%,#14b8a6);
}

.sample-info{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sample-info strong{
  font-size:20px;
  color:#fff;
}

.sample-info span{
  color:#aeb6d2;
  font-size:14px;
}

.user-results-head{
  margin-top:10px;
  margin-bottom:24px;
}

.user-results-head h2{
  margin:0;
  font-size:42px;
  line-height:1.1;
}

@media (max-width:1060px){
  .sample-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .sample-grid{
    grid-template-columns:1fr;
  }

  .sample-thumb{
    height:190px;
  }

  .user-results-head h2{
    font-size:30px;
  }
}




/* ===== A面功能与作品展示重构 ===== */
.gallery-section{
  padding-top:48px;
}

.gallery-section .center-head{
  display:block;
  text-align:center;
  margin-bottom:12px;
}

.gallery-section .center-head h2{
  margin:0;
  font-size:clamp(34px, 5vw, 56px);
  line-height:1.08;
}

.gallery-lead{
  max-width:980px;
  margin:0 auto 34px;
  text-align:center;
  color:#b9c1da;
  line-height:1.9;
  font-size:17px;
}

.small-lead{
  max-width:760px;
  margin-top:10px;
  margin-bottom:18px;
  font-size:15px;
}

.feature-direction-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:26px 0 62px;
}

.feature-card{
  padding:24px 22px;
  border-radius:24px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transition:transform .2s ease,border-color .2s ease;
}

.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(139,92,246,.38);
}

.feature-icon{
  display:inline-grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  font-size:24px;
  background:rgba(255,255,255,.07);
  margin-bottom:16px;
}

.feature-card h3{
  margin:0 0 12px;
  font-size:22px;
  color:#fff;
}

.feature-card p{
  margin:0;
  color:#b4bdd7;
  line-height:1.75;
  font-size:15px;
}

.works-head{
  text-align:center;
  margin:0 0 18px;
}

.works-head h2{
  margin:0 0 10px;
  font-size:clamp(32px,4.5vw,52px);
  line-height:1.08;
}

.works-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:0 0 60px;
}

.work-card{
  overflow:hidden;
  border-radius:24px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transition:transform .2s ease,border-color .2s ease;
}

.work-card:hover{
  transform:translateY(-4px);
  border-color:rgba(139,92,246,.38);
}

.work-thumb{
  position:relative;
  height:240px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.work-tag{
  position:absolute;
  top:16px;
  left:16px;
  display:inline-block;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.16);
}

.work-a{
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.78), transparent 10%),
    linear-gradient(135deg,#171338,#6d28d9 48%,#0ea5e9);
}

.work-b{
  background:
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.72), transparent 10%),
    linear-gradient(135deg,#2a1748,#ec4899 48%,#fb7185);
}

.work-c{
  background:
    radial-gradient(circle at 40% 28%, rgba(255,255,255,.8), transparent 10%),
    linear-gradient(135deg,#162033,#0f766e 48%,#22c55e);
}

.work-d{
  background:
    radial-gradient(circle at 70% 26%, rgba(255,255,255,.8), transparent 10%),
    linear-gradient(135deg,#1f1141,#7c3aed 52%,#f97316);
}

.work-e{
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.74), transparent 10%),
    linear-gradient(135deg,#101b38,#2563eb 45%,#06b6d4);
}

.work-f{
  background:
    radial-gradient(circle at 60% 24%, rgba(255,255,255,.78), transparent 10%),
    linear-gradient(135deg,#231445,#9333ea 48%,#14b8a6);
}

.work-info{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.work-info strong{
  font-size:20px;
  color:#fff;
}

.work-info span{
  color:#aeb6d2;
  font-size:14px;
}

.user-results-head{
  text-align:center;
  margin:0 0 20px;
}

.user-results-head h2{
  margin:0;
  font-size:clamp(34px,5vw,54px);
  line-height:1.08;
}

@media (max-width: 1180px){
  .feature-direction-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .works-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .gallery-lead{
    font-size:15px;
  }

  .feature-direction-grid,
  .works-grid{
    grid-template-columns:1fr;
  }

  .work-thumb{
    height:210px;
  }

  .feature-card,
  .work-info{
    padding-left:18px;
    padding-right:18px;
  }
}




/* ===== A面瀑布流作品库 ===== */
.studio-gallery{
  padding-top:54px;
}

.gallery-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:30px;
}

.gallery-tabs{
  display:flex;
  gap:14px;
  align-items:center;
}

.gallery-tab{
  border:0;
  color:#cbd5e1;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px 22px;
  font-weight:800;
  cursor:default;
}

.gallery-tab.active{
  color:#111827;
  background:#f4f5f8;
}

.gallery-search{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:330px;
  height:48px;
  padding:0 16px;
  color:#8e95a8;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
}

.gallery-search input{
  min-height:auto;
  height:auto;
  padding:0;
  border:0;
  color:#dbe4f0;
  background:transparent;
  pointer-events:none;
}

.gallery-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:24px;
}

.gallery-title-row h2{
  margin:0 0 12px;
  font-size:clamp(38px,5.2vw,68px);
  line-height:1.02;
  letter-spacing:-2px;
}

.gallery-desc{
  max-width:980px;
  margin:0;
  color:#b9c1da;
  line-height:1.85;
  font-size:17px;
}

.masonry-showcase{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:86px;
  grid-auto-flow:dense;
  gap:14px;
  margin-top:28px;
  margin-bottom:68px;
}

.masonry-card{
  position:relative;
  overflow:hidden;
  min-height:180px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:#111827;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  transition:transform .22s ease,border-color .22s ease,filter .22s ease;
}

.masonry-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.22);
  filter:saturate(1.12);
}

.card-wide{
  grid-column:span 2;
  grid-row:span 3;
}

.card-tall{
  grid-column:span 1;
  grid-row:span 5;
}

.card-mid{
  grid-column:span 1;
  grid-row:span 3;
}

.card-video{
  grid-column:span 1;
  grid-row:span 4;
}

.masonry-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.72), transparent 9%),
    radial-gradient(circle at 72% 60%, rgba(255,255,255,.28), transparent 12%);
  mix-blend-mode:screen;
  opacity:.7;
}

.card-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:54px 18px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05),transparent);
}

.card-overlay strong{
  display:block;
  color:#fff;
  font-size:20px;
  line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.card-overlay span{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.78);
  font-size:13px;
}

.play-badge{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
}

.art-bg-1{
  background:
    linear-gradient(135deg,rgba(26,20,68,.15),rgba(14,165,233,.08)),
    radial-gradient(circle at 22% 30%,#d9f99d,transparent 12%),
    linear-gradient(135deg,#182238,#65a30d 48%,#0ea5e9);
}

.art-bg-2{
  background:
    radial-gradient(circle at 50% 28%,#ffe4e6,transparent 13%),
    linear-gradient(135deg,#2a1748,#ec4899 48%,#fb7185);
}

.art-bg-3{
  background:
    radial-gradient(circle at 50% 44%,#22c55e,transparent 8%),
    linear-gradient(135deg,#020617,#111827 52%,#030712);
}

.art-bg-4{
  background:
    radial-gradient(circle at 25% 28%,#fde68a,transparent 12%),
    linear-gradient(135deg,#f8fafc,#38bdf8 44%,#f97316);
}

.art-bg-5{
  background:
    radial-gradient(circle at 62% 30%,#f9a8d4,transparent 14%),
    linear-gradient(135deg,#fef3c7,#facc15 44%,#22c55e);
}

.art-bg-6{
  background:
    radial-gradient(circle at 42% 28%,#e0f2fe,transparent 12%),
    linear-gradient(135deg,#111827,#334155 46%,#020617);
}

.art-bg-7{
  background:
    radial-gradient(circle at 50% 25%,#fff7ed,transparent 12%),
    linear-gradient(135deg,#164e63,#14b8a6 48%,#84cc16);
}

.art-bg-8{
  background:
    radial-gradient(circle at 64% 34%,#fef9c3,transparent 11%),
    linear-gradient(135deg,#431407,#7c2d12 48%,#fb923c);
}

.art-bg-9{
  background:
    radial-gradient(circle at 45% 25%,#fee2e2,transparent 12%),
    linear-gradient(135deg,#3b0764,#7e22ce 48%,#ef4444);
}

.art-bg-10{
  background:
    radial-gradient(circle at 25% 35%,#ddd6fe,transparent 12%),
    linear-gradient(135deg,#1e1b4b,#8b5cf6 48%,#06b6d4);
}

.clean-results-head{
  text-align:left;
  margin-top:10px;
  margin-bottom:22px;
}

.clean-results-head h2{
  margin:0 0 10px;
  font-size:clamp(34px,4.8vw,58px);
  line-height:1.05;
}

.clean-results-head .gallery-desc{
  max-width:760px;
}

@media(max-width:1200px){
  .masonry-showcase{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .card-wide{
    grid-column:span 2;
  }
}

@media(max-width:820px){
  .gallery-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .gallery-search{
    width:100%;
    min-width:0;
  }

  .masonry-showcase{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:78px;
  }

  .card-wide,
  .card-tall,
  .card-mid,
  .card-video{
    grid-column:span 1;
    grid-row:span 3;
  }
}

@media(max-width:560px){
  .gallery-tabs{
    width:100%;
    overflow-x:auto;
    padding-bottom:4px;
  }

  .gallery-tab{
    white-space:nowrap;
  }

  .masonry-showcase{
    grid-template-columns:1fr;
  }

  .card-wide,
  .card-tall,
  .card-mid,
  .card-video{
    grid-row:span 3;
  }
}




/* ===== 强制修复：瀑布流作品展示必须显示 ===== */
.gallery-section.studio-gallery,
.studio-gallery{
  display:block !important;
  padding:54px clamp(18px,4vw,62px) !important;
}

.studio-gallery .gallery-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:30px !important;
}

.studio-gallery .gallery-tabs{
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}

.studio-gallery .gallery-tab{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#dbe4ff !important;
  background:rgba(255,255,255,.07) !important;
  border-radius:14px !important;
  padding:12px 22px !important;
  font-weight:900 !important;
  font-size:15px !important;
  cursor:default !important;
}

.studio-gallery .gallery-tab.active{
  color:#111827 !important;
  background:#f4f5f8 !important;
}

.studio-gallery .gallery-search{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:min(420px,100%) !important;
  height:50px !important;
  padding:0 16px !important;
  color:#9ca3af !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
}

.studio-gallery .gallery-search input{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:auto !important;
  padding:0 !important;
  border:0 !important;
  outline:none !important;
  color:#dbe4f0 !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

.studio-gallery .gallery-title-row{
  display:block !important;
  margin-bottom:26px !important;
}

.studio-gallery .gallery-title-row h2{
  margin:0 0 14px !important;
  font-size:clamp(42px,5.5vw,72px) !important;
  line-height:1.02 !important;
  letter-spacing:-2px !important;
}

.studio-gallery .gallery-desc{
  max-width:1050px !important;
  margin:0 !important;
  color:#d7dcff !important;
  line-height:1.85 !important;
  font-size:17px !important;
}

.studio-gallery .masonry-showcase{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-auto-rows:86px !important;
  grid-auto-flow:dense !important;
  gap:14px !important;
  margin-top:30px !important;
  margin-bottom:74px !important;
}

.studio-gallery .masonry-card{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
  min-height:180px !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  background:#111827 !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
  transition:transform .22s ease,border-color .22s ease,filter .22s ease !important;
}

.studio-gallery .masonry-card:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(255,255,255,.24) !important;
  filter:saturate(1.12) !important;
}

.studio-gallery .card-wide{
  grid-column:span 2 !important;
  grid-row:span 3 !important;
}

.studio-gallery .card-tall{
  grid-column:span 1 !important;
  grid-row:span 5 !important;
}

.studio-gallery .card-mid{
  grid-column:span 1 !important;
  grid-row:span 3 !important;
}

.studio-gallery .card-video{
  grid-column:span 1 !important;
  grid-row:span 4 !important;
}

.studio-gallery .masonry-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.72), transparent 9%),
    radial-gradient(circle at 72% 60%, rgba(255,255,255,.28), transparent 12%) !important;
  mix-blend-mode:screen !important;
  opacity:.7 !important;
}

.studio-gallery .card-overlay{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:2 !important;
  padding:58px 18px 18px !important;
  background:linear-gradient(to top,rgba(0,0,0,.76),rgba(0,0,0,.12),transparent) !important;
}

.studio-gallery .card-overlay strong{
  display:block !important;
  color:#fff !important;
  font-size:20px !important;
  line-height:1.25 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.45) !important;
}

.studio-gallery .card-overlay span{
  display:block !important;
  margin-top:7px !important;
  color:rgba(255,255,255,.8) !important;
  font-size:13px !important;
}

.studio-gallery .play-badge{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  z-index:3 !important;
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  color:#fff !important;
  background:rgba(0,0,0,.42) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  backdrop-filter:blur(8px) !important;
}

.studio-gallery .art-bg-1{
  background:
    linear-gradient(135deg,rgba(26,20,68,.15),rgba(14,165,233,.08)),
    radial-gradient(circle at 22% 30%,#d9f99d,transparent 12%),
    linear-gradient(135deg,#182238,#65a30d 48%,#0ea5e9) !important;
}

.studio-gallery .art-bg-2{
  background:
    radial-gradient(circle at 50% 28%,#ffe4e6,transparent 13%),
    linear-gradient(135deg,#2a1748,#ec4899 48%,#fb7185) !important;
}

.studio-gallery .art-bg-3{
  background:
    radial-gradient(circle at 50% 44%,#22c55e,transparent 8%),
    linear-gradient(135deg,#020617,#111827 52%,#030712) !important;
}

.studio-gallery .art-bg-4{
  background:
    radial-gradient(circle at 25% 28%,#fde68a,transparent 12%),
    linear-gradient(135deg,#f8fafc,#38bdf8 44%,#f97316) !important;
}

.studio-gallery .art-bg-5{
  background:
    radial-gradient(circle at 62% 30%,#f9a8d4,transparent 14%),
    linear-gradient(135deg,#fef3c7,#facc15 44%,#22c55e) !important;
}

.studio-gallery .art-bg-6{
  background:
    radial-gradient(circle at 42% 28%,#e0f2fe,transparent 12%),
    linear-gradient(135deg,#111827,#334155 46%,#020617) !important;
}

.studio-gallery .art-bg-7{
  background:
    radial-gradient(circle at 50% 25%,#fff7ed,transparent 12%),
    linear-gradient(135deg,#164e63,#14b8a6 48%,#84cc16) !important;
}

.studio-gallery .art-bg-8{
  background:
    radial-gradient(circle at 64% 34%,#fef9c3,transparent 11%),
    linear-gradient(135deg,#431407,#7c2d12 48%,#fb923c) !important;
}

.studio-gallery .art-bg-9{
  background:
    radial-gradient(circle at 45% 25%,#fee2e2,transparent 12%),
    linear-gradient(135deg,#3b0764,#7e22ce 48%,#ef4444) !important;
}

.studio-gallery .art-bg-10{
  background:
    radial-gradient(circle at 25% 35%,#ddd6fe,transparent 12%),
    linear-gradient(135deg,#1e1b4b,#8b5cf6 48%,#06b6d4) !important;
}

.studio-gallery .clean-results-head{
  text-align:left !important;
  margin-top:10px !important;
  margin-bottom:22px !important;
}

.studio-gallery .clean-results-head h2{
  margin:0 0 10px !important;
  font-size:clamp(34px,4.8vw,58px) !important;
  line-height:1.05 !important;
}

@media(max-width:1200px){
  .studio-gallery .masonry-showcase{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .studio-gallery .card-wide{
    grid-column:span 2 !important;
  }
}

@media(max-width:820px){
  .studio-gallery .gallery-toolbar{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .studio-gallery .gallery-search{
    width:100% !important;
    min-width:0 !important;
  }

  .studio-gallery .masonry-showcase{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:78px !important;
  }

  .studio-gallery .card-wide,
  .studio-gallery .card-tall,
  .studio-gallery .card-mid,
  .studio-gallery .card-video{
    grid-column:span 1 !important;
    grid-row:span 3 !important;
  }
}

@media(max-width:560px){
  .studio-gallery .gallery-tabs{
    width:100% !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
  }

  .studio-gallery .gallery-tab{
    white-space:nowrap !important;
  }

  .studio-gallery .masonry-showcase{
    grid-template-columns:1fr !important;
  }
}




/* ===== 真实样品图作品墙修复 ===== */
.image-showcase .masonry-card{
  background:#0f172a !important;
}

.image-showcase .masonry-card::before{
  display:none !important;
}

.image-showcase .masonry-card > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  z-index:1 !important;
  transform:scale(1.01);
  transition:transform .35s ease, filter .35s ease;
}

.image-showcase .masonry-card:hover > img{
  transform:scale(1.06);
  filter:saturate(1.12) contrast(1.04);
}

.image-showcase .card-overlay{
  z-index:3 !important;
}

.image-showcase .play-badge{
  z-index:4 !important;
}

.image-showcase .card-overlay strong{
  font-size:22px !important;
}

.image-showcase .card-overlay span{
  font-size:14px !important;
}




/* ===== 真实样品图作品墙最终版 ===== */
.studio-gallery{
  padding:32px clamp(18px,4vw,62px) 64px !important;
}

.studio-gallery .gallery-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:24px !important;
}

.studio-gallery .gallery-tabs{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

.studio-gallery .gallery-tab{
  border:1px solid rgba(255,255,255,.14) !important;
  color:#dbe4ff !important;
  background:rgba(255,255,255,.07) !important;
  border-radius:14px !important;
  padding:12px 22px !important;
  font-weight:900 !important;
}

.studio-gallery .gallery-tab.active{
  color:#111827 !important;
  background:#f4f5f8 !important;
}

.studio-gallery .gallery-search{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:min(420px,100%) !important;
  height:50px !important;
  padding:0 16px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
}

.studio-gallery .gallery-search input{
  border:0 !important;
  background:transparent !important;
  color:#dbe4f0 !important;
  padding:0 !important;
  min-height:auto !important;
  pointer-events:none !important;
}

.studio-gallery .masonry-showcase{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-auto-rows:88px !important;
  grid-auto-flow:dense !important;
  gap:14px !important;
  margin:0 0 70px !important;
}

.studio-gallery .masonry-card{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:#0f172a !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
}

.studio-gallery .masonry-card::before{
  display:none !important;
}

.studio-gallery .masonry-card > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  z-index:1 !important;
  transition:transform .35s ease, filter .35s ease;
}

.studio-gallery .masonry-card:hover > img{
  transform:scale(1.06);
  filter:saturate(1.12) contrast(1.04);
}

.studio-gallery .card-wide{grid-column:span 2 !important;grid-row:span 3 !important;}
.studio-gallery .card-tall{grid-column:span 1 !important;grid-row:span 5 !important;}
.studio-gallery .card-mid{grid-column:span 1 !important;grid-row:span 3 !important;}
.studio-gallery .card-video{grid-column:span 1 !important;grid-row:span 4 !important;}

.studio-gallery .card-overlay{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:3 !important;
  padding:70px 18px 18px !important;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.16),transparent) !important;
}

.studio-gallery .card-overlay strong{
  display:block !important;
  color:#fff !important;
  font-size:22px !important;
  line-height:1.25 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.45) !important;
}

.studio-gallery .card-overlay span{
  display:block !important;
  margin-top:7px !important;
  color:rgba(255,255,255,.82) !important;
  font-size:14px !important;
}

.studio-gallery .play-badge{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  z-index:4 !important;
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  color:#fff !important;
  background:rgba(0,0,0,.42) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  backdrop-filter:blur(8px) !important;
}

.studio-gallery .clean-results-head{
  text-align:left !important;
  margin-top:10px !important;
  margin-bottom:22px !important;
}

.studio-gallery .clean-results-head h2{
  margin:0 0 10px !important;
  font-size:clamp(34px,4.8vw,58px) !important;
  line-height:1.05 !important;
}

.studio-gallery .gallery-desc{
  max-width:760px !important;
  color:#d7dcff !important;
  line-height:1.85 !important;
  font-size:17px !important;
}

@media(max-width:1200px){
  .studio-gallery .masonry-showcase{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media(max-width:820px){
  .studio-gallery .gallery-toolbar{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  .studio-gallery .gallery-search{
    width:100% !important;
  }
  .studio-gallery .masonry-showcase{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .studio-gallery .card-wide,
  .studio-gallery .card-tall,
  .studio-gallery .card-mid,
  .studio-gallery .card-video{
    grid-column:span 1 !important;
    grid-row:span 3 !important;
  }
}

@media(max-width:560px){
  .studio-gallery .masonry-showcase{
    grid-template-columns:1fr !important;
  }
}