/* 双端共享原生卡片图层。尺寸遵循现有版面，只替换原合成切图的装饰层。 */
/* 作品轨道延伸到屏幕边缘，但不应让整个页面出现横向滚动条。 */
body { overflow-x:clip; }
.card-surface { position:relative; display:block; width:100%; height:100%; border-radius:inherit; overflow:hidden; }
.card-edge { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; overflow:visible; }
.card-edge path { fill:none; stroke:var(--accent,#4f555c); stroke-linejoin:round; }
.native-card { --accent:#4f555c; --edge:4px; }
.card-image { display:block; width:100%; height:100%; object-fit:cover; }
/* 外壳不裁切投影，只有内层图像/CTA按连续圆角路径裁切。 */
#heroCards .hero-card { overflow:visible; box-shadow:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.1)); }
#heroCards .hero-card .card-surface { border-radius:20px; }
.native-banner { position:relative; display:block; width:100%; aspect-ratio:588/350; padding:0; border:0; border-radius:20px; text-align:left; background:transparent; cursor:pointer; }
.native-banner .card-surface { border-radius:20px; }
.card-tag { position:absolute; z-index:2; top:0; left:0; display:grid; place-items:center; text-align:center; width:160px; min-height:44px; padding:8px 10px; border-radius:20px 0 20px 0; background:var(--accent); color:white; font-size:15px; line-height:20px; font-weight:500; overflow-wrap:anywhere; }
.banner-overlay { position:absolute; inset:auto var(--edge) var(--edge); display:flex; align-items:center; gap:11px; height:70px; padding:0 18px; border-radius:0 0 16px 16px; color:white; background:rgba(0,0,0,.15); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); }
.banner-logo { width:48px; height:48px; flex:none; object-fit:contain; border-radius:10px; }
.banner-copy { flex:1; min-width:0; text-align:left; }
.banner-copy strong,.banner-copy small { display:block; margin:0; font-size:15px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.banner-copy strong { font-weight:600; } .banner-copy small { opacity:.7; font-weight:400; }
.banner-cta { display:grid; flex:none; place-items:center; width:94px; height:34px; border-radius:17px; background:rgba(255,255,255,.3); color:white; font-size:13px; line-height:16px; }
.native-banner:focus-visible,.project-card:focus-visible { outline:2px solid #27272a; outline-offset:4px; }
.project-card { padding:0; background:transparent; overflow:visible; }
.project-card .card-surface { width:auto; height:100%; border-radius:20px; }
.project-card .card-image { width:auto; height:100%; max-width:none; object-fit:contain; }
.project-card .card-tag { width:auto; min-width:60px; max-width:calc(100% - 16px); min-height:44px; }
.aigc-tile,.aigc-preview { overflow:hidden; }
#aigcTileGrid .aigc-tile { transform:none; }
/* 导航、Tab和胶囊按钮保留iOS常见的胶囊形；非胶囊表面统一连续圆角。
   详情素材内部不加独立圆角，避免多段素材拼接处出现缺口。 */
.modal-panel[data-smooth] { border-radius:32px 32px 0 0; }
@media(max-width:767px) {
  .native-card { --edge:2px; }
  .native-banner { aspect-ratio:350/208; }
  .native-banner .card-tag { left:0; top:0; width:110px; min-height:24px; padding:4px 5px; font-size:10px; line-height:16px; }
  .banner-overlay { height:44px; gap:10px; padding:0 10px; border-radius:0 0 18px 18px; }
  .banner-logo { width:28px; height:28px; }
  .banner-copy strong { font-size:12px; line-height:14px; }
  .banner-copy small { font-size:10px; line-height:14px; }
  .banner-cta { width:60px; height:24px; font-size:12px; }
  .project-card .card-tag { min-width:64px; min-height:24px; padding:4px 10px; font-size:10px; line-height:16px; }
}
.project-card[aria-disabled="true"] { cursor:grab; }