/* ===== 响应式布局 ===== */

/* 默认（移动端）：单栏纵向流 */
.carousel{width:100%;max-width:380px}
.carousel-track{aspect-ratio:1/1}
.carousel-card{max-width:260px;border-radius:2%}
.carousel-card .effect-icon svg{max-width:60px;max-height:60px}

.control-panel{margin-top:24px;gap:14px}
.control-panel .primary-btn{max-width:260px}
.action-row{max-width:260px;gap:12px}
.action-row .btn{flex:1;min-height:52px;font-size:15px}

/* 小屏手机 (≤360px) */
@media(max-width:360px){
  .container{padding:32px 16px 24px}
  .header{margin-bottom:20px}
  .header h1{font-size:clamp(24px,7vw,48px)}
  .header p{font-size:10px;letter-spacing:.08em}
  .category-label{margin-bottom:10px;font-size:10px}
  .carousel{max-width:300px}
  .carousel-track{aspect-ratio:1/1}
  .carousel-card{max-width:220px;border-radius:2%}
  .carousel-card .effect-name{font-size:12px}
  .carousel-card .effect-desc{font-size:10px;padding:0 16px 16px}
  .carousel-card .effect-icon{padding:20px}
  .carousel-card .effect-icon svg{max-width:48px;max-height:48px}
  .control-panel{margin-top:16px;gap:10px}
  .control-panel .primary-btn{max-width:240px;min-height:48px;font-size:14px;padding:12px 20px}
  .action-row{max-width:240px;flex-direction:column;gap:10px}
  .action-row .btn{min-height:48px;font-size:14px;padding:12px 20px}
  .cover-options{gap:8px}
  .cover-btn{padding:8px 16px;min-height:40px;font-size:12px}
  .preview-thumb{width:48px;height:48px}
  .progress-wrap{margin-top:12px}
  .progress-text{font-size:10px}
}

/* 中等手机 (361-480px) */
@media(min-width:361px) and (max-width:480px){
  .container{padding:40px 20px 28px}
  .carousel{max-width:340px}
  .carousel-card{max-width:240px}
  .action-row{flex-direction:column}
  .action-row .btn{width:100%}
}

/* 手机端通用优化 */
@media(max-width:480px){
  /* 触摸目标最小尺寸 */
  .primary-btn,.btn,.cover-btn{min-height:44px}
  /* 按钮横向排列时等宽 */
  .action-row{flex-direction:column}
  .action-row .btn{width:100%}
  /* 封面选项换行 */
  .cover-btns{flex-wrap:wrap}
  /* 进度条更紧凑 */
  .progress-wrap{margin-top:12px}
  .progress-text{font-size:11px;margin-top:8px}
  /* Toast 更紧凑 */
  .toast{padding:10px 20px;font-size:12px;bottom:max(16px,env(safe-area-inset-bottom,16px))}
}

/* 平板 (600-899px) */
@media(min-width:600px){
  .container{max-width:520px;padding:56px 32px 40px}
  .header{margin-bottom:36px}
  .header h1{font-size:clamp(36px,5vw,48px)}
  .carousel{max-width:420px}
  .carousel-track{aspect-ratio:4/3.5}
  .carousel-card{max-width:280px;border-radius:2%}
  .carousel-card .effect-icon svg{max-width:64px;max-height:64px}
  .carousel-card .effect-name{font-size:15px}
  .carousel-card .effect-desc{font-size:12px}
  .control-panel{margin-top:28px}
}

/* 桌面端 (≥900px)：左右分栏 */
@media(min-width:900px){
  .container{
    max-width:1100px;
    min-height:100vh;
    padding:48px 48px 40px;
    display:grid;
    grid-template-columns:1fr 360px;
    grid-template-rows:auto 1fr auto;
    gap:0 64px;
    align-items:center;
  }

  /* 顶部：标题跨两列 */
  .header{
    grid-column:1/-1;
    grid-row:1;
    text-align:center;
    margin-bottom:0;
    padding-bottom:24px;
  }
  .header h1{font-size:clamp(40px,4vw,56px)}
  .header p{font-size:13px;letter-spacing:.14em}

  /* 分类标签隐藏（桌面端不需要） */
  .category-label{display:none}

  /* 左侧：轮播 */
  .carousel{
    grid-column:1;
    grid-row:2;
    max-width:none;
    width:100%;
    justify-self:start;
    align-self:center;
    padding-left:24px;
  }
  .carousel-track{aspect-ratio:auto;min-height:360px}
  .carousel-card{
    max-width:380px;
    min-height:360px;
    border-radius:20px;
  }
  .carousel-card .effect-icon svg{max-width:72px;max-height:72px}
  .carousel-card .effect-name{font-size:17px;padding:0 24px 8px}
  .carousel-card .effect-desc{font-size:13px;padding:0 32px 28px}

  /* 右侧：控制面板（竖长方形卡片） */
  .control-panel{
    grid-column:2;
    grid-row:2;
    max-width:none;
    width:280px;
    margin-top:0;
    align-self:center;
    gap:0;
    animation-delay:.4s;
    /* 卡片样式 */
    background:rgba(22,22,26,.6);
    border:1px solid rgba(255,255,255,.06);
    border-radius:16px;
    padding:40px 24px;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 8px 32px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.03);
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  /* 所有按钮统一尺寸 */
  .control-panel .primary-btn,
  .control-panel .btn{
    width:100%;
    height:48px;
    font-size:14px;
    border-radius:2%;
    margin:0;
  }
  .action-row{max-width:none;width:100%;gap:12px;margin-top:0}
  .action-row .btn{flex:none}
  .cover-options{gap:10px;margin-bottom:24px}
  .cover-btn{font-size:13px;padding:10px 18px;height:40px}
  .progress-wrap{margin-top:24px;width:100%}
  .preview-thumb{margin-bottom:24px}

  /* Footer */
  .footer{grid-column:1/-1;grid-row:3;margin-top:24px;font-size:11px}
}

/* 大屏桌面 (≥1200px) */
@media(min-width:1200px){
  .container{max-width:1300px;padding:56px 64px 48px;gap:0 80px}
  .carousel-track{min-height:400px}
  .carousel-card{max-width:420px;min-height:400px;border-radius:2%}
  .carousel-card .effect-icon svg{max-width:80px;max-height:80px}
  .carousel-card .effect-name{font-size:18px}
  .carousel-card .effect-desc{font-size:14px}
  .control-panel{
    width:300px;
    padding:44px 28px;
    border-radius:18px;
  }
  .control-panel .primary-btn,
  .control-panel .btn{
    height:52px;
    font-size:15px;
  }
}

/* 移动端按钮换行 */
@media(max-width:480px){
  .action-row{flex-direction:column}
  .action-row .btn{width:100%}
  .cover-btns{flex-wrap:wrap}
}

/* 触摸目标最小尺寸 */
.primary-btn,.btn,.cover-btn{min-height:44px}

/* 防止 iOS 输入框缩放 */
input,select,textarea{font-size:16px!important}

/* 减弱动画模式 */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .effect-preview{display:none!important}
  body::before,body::after{animation:none!important}
}

/* 焦点状态 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:inherit}
.primary-btn:focus-visible,.btn:focus-visible,.cover-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.carousel-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px;transform:scale(1.02)}
.carousel:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:2%}

/* 桌面端 hover 增强 */
@media(hover:hover){
  .carousel-card:hover{transform:scale(1.03);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 16px 48px rgba(0,0,0,.3)}
  .primary-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 32px rgba(0,0,0,.3)}
  .btn:hover{transform:translateY(-2px)}
}