/* ===== 控制面板、按钮、进度条 ===== */
.control-panel{width:100%;max-width:380px;margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:14px;animation:fadeInUp .8s var(--ease-out) .3s both}
.control-panel .primary-btn{width:100%;max-width:260px}
.control-panel .cover-options{justify-content:center}
.action-row{display:flex;gap:12px;width:100%;max-width:260px}
.action-row .btn{flex:1}

/* 封面选项 */
.cover-options{display:flex;align-items:center;gap:14px;margin-bottom:20px;animation:fadeInUp .6s var(--ease-out) both}
.cover-label{font-size:11px;font-weight:500;color:var(--text-tertiary);white-space:nowrap;letter-spacing:.12em;text-transform:uppercase}
.preview-thumb{width:72px;height:72px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.08);transition:all .35s var(--ease-out);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.preview-thumb:hover{transform:scale(1.05);box-shadow:0 8px 32px rgba(0,0,0,.4);border-color:rgba(255,255,255,.12)}
.cover-btns{display:flex;gap:8px}
.cover-btn{padding:9px 22px;border:1px solid rgba(255,255,255,.08);border-radius:2%;background:rgba(255,255,255,.03);color:var(--text-secondary);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .3s var(--ease-out);min-height:42px;display:flex;align-items:center;letter-spacing:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media(max-width:480px){
  .cover-options{flex-wrap:wrap;gap:10px;margin-bottom:16px}
  .cover-label{font-size:10px}
  .preview-thumb{width:56px;height:56px;border-radius:8px}
  .cover-btns{gap:6px}
  .cover-btn{padding:8px 16px;font-size:12px;min-height:40px}
}
.cover-btn.selected{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--text-primary);box-shadow:0 0 20px rgba(var(--accent-rgb),.1)}
.cover-btn:hover:not(.selected){background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.cover-btn:active{transform:scale(.96)}
.cover-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 主按钮 */
.primary-btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 36px;border:none;border-radius:2%;cursor:pointer;background:rgba(255,255,255,.08);color:var(--text-primary);font-family:inherit;font-size:15px;font-weight:500;letter-spacing:0;transition:all .3s var(--ease-out);min-width:180px;min-height:56px;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 4px 16px rgba(0,0,0,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media(max-width:480px){
  .primary-btn{min-width:auto;width:100%;max-width:280px;padding:14px 24px;font-size:15px;min-height:52px}
}
.primary-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 50%);pointer-events:none;transition:opacity .3s ease}
.primary-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 32px rgba(0,0,0,.3)}
.primary-btn:hover::before{opacity:1.5}
.primary-btn.drag-over{background:rgba(var(--accent-rgb),.2);border-color:rgba(var(--accent-rgb),.4);transform:scale(1.02);box-shadow:0 0 30px rgba(var(--accent-rgb),.15)}
.primary-btn:active{transform:scale(.97) translateY(0);transition-duration:.08s}
.primary-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 按钮内图标动画 */
.primary-btn svg{transition:transform .4s var(--ease-out)}
.primary-btn:hover svg{transform:rotate(90deg) scale(1.1)}

/* 通用按钮 */
.btn{padding:14px 24px;border:none;border-radius:2%;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s var(--ease-out);display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;letter-spacing:0;-webkit-tap-highlight-color:transparent}
@media(max-width:480px){
  .btn{padding:12px 20px;font-size:14px;min-height:48px}
}
.btn-primary{background:rgba(255,255,255,.08);color:var(--text-primary);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 4px 16px rgba(0,0,0,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.btn-primary:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 32px rgba(0,0,0,.3)}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.15;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.btn-primary.generating{animation:pulse 1.5s ease-in-out infinite}
.btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid rgba(255,255,255,.06);box-shadow:none}
.btn-secondary:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);transform:translateY(-2px);color:var(--text-primary)}
.btn-secondary:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 进度条（备用） */
.progress-wrap{margin-top:16px;width:100%;display:none}
.progress-wrap.show{display:block}
.progress-bar{width:100%;height:2px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden}
.progress-fill{height:100%;border-radius:1px;width:100%;transform:scaleX(0);transform-origin:left;transition:transform .2s ease;background:var(--accent)}
.progress-text{font-size:11px;font-weight:400;color:var(--text-tertiary);margin-top:10px;text-align:center;letter-spacing:.08em}
@media(max-width:480px){
  .progress-wrap{margin-top:12px}
  .progress-text{font-size:10px;margin-top:8px}
}

/* Toast */
.toast{position:fixed;bottom:max(28px,calc(env(safe-area-inset-bottom,16px) + 12px));left:50%;transform:translateX(-50%) translateY(16px);padding:12px 24px;border-radius:12px;font-family:inherit;font-size:13px;font-weight:500;z-index:9999;pointer-events:none;transition:all .4s var(--ease-out);opacity:0;letter-spacing:0;color:var(--text-primary);background:rgba(22,22,26,.9);max-width:calc(100vw - 32px);text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.toast-error{background:rgba(153,27,27,.9);border-color:rgba(239,68,68,.2)}
.toast.toast-success{background:rgba(22,22,26,.9)}
@media(max-width:480px){
  .toast{padding:10px 20px;font-size:12px;bottom:max(16px,env(safe-area-inset-bottom,16px));max-width:calc(100vw - 24px)}
}