/* ====== 场景语音生成器 v4 ====== */
:root{
  --bg:#f4f5f9;--card:#fff;--card2:#f7f8fc;
  --accent:#5c5fef;--accent2:#4347d0;--aglow:rgba(92,95,239,.12);
  --text:#1a1a2e;--t2:#6b7080;--t3:#989db0;
  --border:#e5e7f0;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;
  --r:12px;--rs:8px;--rx:6px;
  --sh:0 2px 12px rgba(0,0,0,.06);
  --font:system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;padding-bottom:80px;-webkit-font-smoothing:antialiased;}
.container{max-width:760px;margin:0 auto;padding:16px;display:flex;flex-direction:column;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* Tool-first layout: visual order via CSS, HTML source untouched for Baidu */
.hero{order:-2}
.seo-intro{order:2}
.tool-wrap{order:0}
.seo-foot{order:1}
.foot{order:3}
.breadcrumb{order:-3}

/* Hero */
.hero{text-align:center;padding:36px 16px 24px}
.hero h1{font-size:26px;font-weight:800;color:var(--text)}
.hero-sub{color:var(--t2);font-size:13px;margin-top:6px}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card-hd{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:6px}

/* Scene Grid */
.scene-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.scene-card{background:var(--card2);border:1.5px solid transparent;border-radius:var(--rs);padding:14px 6px;text-align:center;cursor:pointer;transition:all .15s}
.scene-card:hover{border-color:var(--accent);box-shadow:var(--sh)}
.scene-card.active{border-color:var(--accent);background:var(--aglow)}
.scene-card .emoji{font-size:26px;display:block;margin-bottom:4px}
.scene-card .name{font-size:11px;font-weight:600}
.scene-card.pulse{animation:scenePulse .4s ease}
@keyframes scenePulse{0%,100%{transform:scale(1)}50%{transform:scale(.95)}}

/* AI Row */
.ai-row{display:flex;gap:8px;margin-bottom:10px}
.ai-results{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.ai-result-item{width:100%;margin-bottom:4px}
.ai-result-item .ai-text{font-size:11px;cursor:pointer;padding:4px 10px;border-radius:12px;background:var(--card2);border:1px solid var(--border);display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all .15s}
.ai-result-item .ai-text:hover{border-color:var(--accent);color:var(--accent)}
.ai-result-item .ai-expand{font-size:10px;color:var(--t3);cursor:pointer;padding:2px 4px;margin-left:4px}
.ai-result-item .ai-expand:hover{color:var(--accent)}
.ai-full{display:none;font-size:11px;padding:8px 12px;background:var(--card2);border-radius:var(--rx);margin-top:4px;line-height:1.6}

/* Input / Textarea */
.input,.textarea,.select{width:100%;background:var(--card2);border:1.5px solid var(--border);border-radius:var(--rx);color:var(--text);padding:10px 12px;font-size:13px;font-family:var(--font);transition:border .15s}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--aglow)}
.textarea{min-height:100px;resize:vertical;line-height:1.7}
.textarea-wrap{position:relative}
.text-actions{position:absolute;bottom:8px;right:8px;display:flex;gap:4px}
.text-act-btn{font-size:10px;padding:3px 8px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--t2);cursor:pointer;transition:all .15s}
.text-act-btn:hover{color:var(--accent);border-color:var(--accent)}
.select{appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7080' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
.hint{font-size:11px;color:var(--t3);margin-top:6px}

/* Buttons */
.ai-btn{background:linear-gradient(135deg,#8b5cf6,var(--accent));color:#fff;border:none;border-radius:var(--rx);padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--font);transition:all .15s}
.ai-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(92,95,239,.3)}
.ai-btn:disabled{opacity:.5;transform:none}
.fold-btn{background:none;border:1px solid var(--border);border-radius:var(--rx);padding:6px 14px;font-size:12px;color:var(--t2);cursor:pointer;margin-top:8px;font-family:var(--font);display:inline-flex;align-items:center;gap:4px;transition:all .15s}
.fold-btn:hover{color:var(--accent);border-color:var(--accent)}
.fold-panel{display:none;padding-top:10px}
.pills{display:flex;flex-wrap:wrap;gap:4px}
.pill{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:4px 12px;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .15s;font-family:var(--font)}
.pill:hover{color:var(--accent);border-color:var(--accent)}
.pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.badge{background:var(--accent);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;font-weight:700}

/* Settings */
.set-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.set-label{font-size:12px;font-weight:600;color:var(--t2);min-width:52px;flex-shrink:0}
.slider{flex:1;height:4px;-webkit-appearance:none;background:linear-gradient(90deg,var(--accent),#8b5cf6);border-radius:2px;outline:none;min-width:60px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--card);border:2px solid var(--accent);cursor:pointer}
.slider-val{font-size:12px;font-weight:700;color:var(--accent);min-width:40px;text-align:right}
.tune-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--t2);cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.tune-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Voice Picker */
.vpicker{display:flex;align-items:center;gap:6px;flex:1}
.vpicker-curr{display:flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--border);border-radius:var(--rx);padding:7px 12px;cursor:pointer;flex:1;font-size:12px;font-weight:600;transition:border .15s}
.vpicker-curr:hover{border-color:var(--accent)}
.vpicker-expand{width:34px;height:34px;border:1px solid var(--border);border-radius:var(--rx);background:var(--card2);cursor:pointer;font-size:14px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .15s}
.vpicker-expand:hover{color:var(--accent);border-color:var(--accent)}
.vpanel{display:none;margin-top:8px;margin-bottom:10px;padding:10px;background:var(--card2);border-radius:var(--rs);border:1px solid var(--border)}
.voice-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.voice-tab{font-size:10px;padding:3px 10px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--t2);cursor:pointer;font-weight:600;transition:all .15s;font-family:var(--font)}
.voice-tab:hover{color:var(--accent);border-color:var(--accent)}
.voice-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.voice-grid{display:flex;flex-wrap:wrap;gap:4px}
.voice-card{display:flex;align-items:center;gap:4px;background:var(--card);border:1px solid transparent;border-radius:var(--rx);padding:5px 8px;cursor:pointer;font-size:11px;font-weight:600;transition:all .15s;position:relative}
.voice-card:hover{border-color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.voice-card.active{border-color:var(--accent);background:var(--aglow)}
.voice-card .vc-preview{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--accent);background:var(--card);color:var(--accent);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;margin-left:2px}
.voice-card .vc-preview:hover{background:var(--accent);color:#fff;transform:scale(1.1)}

/* Sound tags */
.sound-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tag{font-size:10px;padding:2px 8px;border-radius:10px;background:var(--card2);border:1px solid var(--border);color:var(--t2);font-weight:500;cursor:pointer;transition:all .15s}
.tag:hover{opacity:.8}
.tag.off{opacity:.35;text-decoration:line-through}
.tag.off::after{content:' 静音';font-size:9px;color:var(--err)}

/* Status bar */
.status-bar{display:none;padding:10px 14px;border-radius:var(--rs);font-size:13px;font-weight:600;margin-bottom:12px;text-align:center}
.status-bar.loading{display:block;background:var(--aglow);color:var(--accent);position:relative;overflow:hidden}
.status-bar.loading::after{content:'';position:absolute;bottom:0;left:0;height:2px;background:var(--accent);animation:loaderBar 2s ease-in-out infinite}
@keyframes loaderBar{0%{width:0;left:0}50%{width:60%;left:0}100%{width:0;left:100%}}
.status-bar.success{display:block;background:rgba(16,185,129,.08);color:var(--ok)}
.status-bar.error{display:block;background:rgba(239,68,68,.06);color:var(--err)}

/* History */
#historyCard.hidden{display:none}
.history-list{display:flex;flex-direction:column;gap:6px}
.history-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card2);border-radius:var(--rs);font-size:12px}
.history-item .hi-scene{font-size:10px;color:var(--t3);min-width:56px}
.history-item .hi-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;cursor:pointer}
.history-item .hi-text:hover{color:var(--accent)}
.hi-actions{display:flex;gap:4px;flex-shrink:0}
.hi-btn{font-size:10px;padding:3px 8px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--t2);cursor:pointer;transition:all .15s}
.hi-btn:hover{color:var(--accent);border-color:var(--accent)}

/* Mini Player */
.mini-player{position:fixed;bottom:66px;left:0;right:0;z-index:99;background:var(--card);border-top:1px solid var(--border);padding:6px 16px;display:none;align-items:center;gap:8px;box-shadow:0 -1px 8px rgba(0,0,0,.06)}
.mini-player.show{display:flex}
.mp-title{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;flex-shrink:0}
.mp-progress{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden;min-width:40px}
.mp-progress-bar{height:100%;background:var(--accent);width:0%;transition:width .1s linear}
.mp-time{font-size:10px;color:var(--t3);min-width:32px;text-align:right}
.mp-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.mp-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:13px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .15s}
.mp-btn:hover{border-color:var(--accent);color:var(--accent)}
.mp-dl{background:var(--accent);color:#fff;border:none;border-radius:var(--rx);padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .15s}
.mp-dl:hover{background:var(--accent2)}
.mp-close{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:11px;color:var(--t3);display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.mp-close:hover{border-color:var(--err);color:var(--err)}

/* Float Bar */
.float-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--card);border-top:1px solid var(--border);padding:10px 16px;display:flex;gap:10px;box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.fbar-btn{flex:1;padding:14px;border:none;border-radius:var(--rs);font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px}
.fbar-primary{background:var(--accent);color:#fff}
.fbar-primary:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(92,95,239,.3)}
.fbar-secondary{background:var(--card2);color:var(--text);border:1px solid var(--border)}
.fbar-secondary:hover{border-color:var(--accent);color:var(--accent)}
.fbar-btn:disabled{opacity:.5;transform:none;cursor:not-allowed}
.fbar-btn.loading::after{content:'';display:inline-block;width:14px;height:14px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* SEO Foot */

/* SEO intro */
.seo-intro{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 18px;margin-bottom:16px;font-size:12px;color:#9ca3af;line-height:1.7}
.seo-intro strong{color:var(--accent);font-weight:600}
.seo-foot{padding:16px 0 24px}
.seo-foot-title{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.seo-grid article{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.seo-grid h3{font-size:13px;font-weight:700;margin-bottom:6px}
.seo-grid p{font-size:12px;color:var(--t2);line-height:1.7}

/* Collapsible SEO guide */
.seo-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.seo-toggle:hover{color:var(--accent)}
.seo-arrow{display:inline-block;transition:transform .2s;font-size:11px}
.seo-foot.open .seo-arrow{transform:rotate(90deg)}
.seo-foot.collapsed .seo-foot-body{display:none}
.seo-grid strong{color:var(--accent);font-weight:600}

/* Footer */
.foot{text-align:center;padding:12px;font-size:11px;color:var(--t3)}

/* Dark Toggle */
#darkToggle{position:fixed;top:12px;right:16px;z-index:999;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:0 1px 3px rgba(0,0,0,.06)}
#darkToggle:hover{transform:scale(1.1)}

/* ===== DARK MODE ===== */
body.dark{--bg:#0f1119;--card:#1a1d2e;--card2:#232640;--text:#e8eaf0;--t2:#9095b0;--t3:#5f6480;--border:#2a2e45;--aglow:rgba(92,95,239,.1)}
body.dark .card{box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .hero{padding:24px 12px 16px}
  .hero h1{font-size:22px}
  .scene-grid{grid-template-columns:repeat(4,1fr);gap:4px}
  .scene-card{padding:10px 4px}
  .scene-card .emoji{font-size:22px}
  .scene-card .name{font-size:10px}
  .card{padding:14px}
  .card-hd{font-size:14px}
  .set-row{flex-wrap:wrap;gap:6px}
  .set-label{min-width:44px}
  .fbar-btn{padding:12px;font-size:14px}
  body{padding-bottom:72px}
  .mini-player{bottom:60px}
  .mini-player .mp-title{max-width:60px}
  .seo-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .scene-grid{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:20px}
}

.premium-toggle{width:34px;height:34px;border:1px solid var(--border);border-radius:var(--rx);background:var(--card2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s;opacity:.3}
.premium-toggle:hover{opacity:1;border-color:var(--accent)}
.premium-toggle.on{opacity:1;border-color:var(--accent);background:var(--aglow)}

.breadcrumb{font-size:12px;color:var(--t3);padding:8px 0;margin-bottom:-8px}
.breadcrumb a{color:var(--t2);text-decoration:none}
.breadcrumb a:hover{color:var(--accent);text-decoration:underline}
.breadcrumb strong{color:var(--text);font-weight:700}
#seoContent{margin-top:8px;padding-top:12px;border-top:1px solid var(--border);gap:16px}