:root{--bg: #f7f1e5;--paper: rgba(255, 250, 242, .86);--card: #fffaf2;--line: rgba(72, 43, 22, .1);--text: #241915;--muted: #6a5c53;--primary: #c8512d;--primary-dark: #8c2e15;--teal: #0f766e;--shadow: 0 28px 60px rgba(103, 64, 34, .12);--radius-xl: 30px;--radius-lg: 22px;--radius-md: 16px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:Segoe UI,Noto Sans TC,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(240,187,98,.5),transparent 25%),radial-gradient(circle at right top,rgba(15,118,110,.18),transparent 22%),linear-gradient(180deg,#fff7ea,#f7f1e5)}button,input,select{font:inherit}button{cursor:pointer}.app-shell{width:min(1200px,calc(100% - 32px));margin:0 auto;padding:24px 0 48px}.landing-shell{display:grid;gap:20px;padding-top:28px}.landing-copy{text-align:center;padding:30px 18px 6px}.landing-copy h1{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.6rem,7vw,4.6rem);line-height:.96}.landing-text{max-width:46ch;margin:18px auto 0;line-height:1.8;color:var(--muted)}.landing-feedback{text-align:center;margin-top:-6px}.landing-switch{display:flex;justify-content:center;gap:10px}.setup-panel{margin-bottom:0}.hero-panel,.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:0 10px 24px #67402214}.hero-panel{display:grid;grid-template-columns:minmax(0,1.25fr) 320px;gap:20px;padding:32px;margin-bottom:22px}.hero-copy h1,.section-head h2{margin:0;font-family:Georgia,Times New Roman,serif;letter-spacing:.01em}.hero-copy h1{font-size:clamp(2.8rem,6vw,4.8rem);line-height:.94}.hero-text{max-width:58ch;line-height:1.75;color:var(--muted);margin:18px 0 0}.eyebrow{margin:0 0 12px;color:var(--primary-dark);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem}.hero-tags,.language-row,.action-row,.room-meta,.song-meta{display:flex;flex-wrap:wrap;gap:10px}.hero-tags{margin-top:22px}.hero-tags span,.song-meta span{padding:10px 14px;border-radius:999px;background:#fff2dc;color:var(--primary-dark);font-weight:600}.hero-aside{display:grid;gap:14px;align-content:center}.floating-card,.card{background:var(--card);border:1px solid rgba(72,43,22,.08);border-radius:var(--radius-lg)}.floating-card{padding:18px;background:linear-gradient(145deg,#fff8ef,#fffdf9)}.floating-card span{display:block;color:var(--muted);margin-bottom:8px}.floating-card strong{font-size:1.08rem}.panel{padding:24px;margin-bottom:22px}.section-head{display:flex;justify-content:space-between;gap:18px;align-items:start;margin-bottom:18px}.section-head.compact{align-items:center}.section-head h2{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1}.setup-grid,.roadmap-grid,.room-layout{display:grid;gap:18px}.setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.room-layout{grid-template-columns:380px minmax(0,1fr)}.roadmap-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card{padding:22px}.manager-shell{display:grid;gap:18px}.manager-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px}.manager-layout{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr);gap:18px;align-items:start}.manager-side{display:grid;gap:18px}.manager-list{max-height:720px;overflow:auto}.manager-list-head,.manager-form-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.song-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:10px;border:1px solid rgba(72,43,22,.08);border-radius:var(--radius-md);background:#fff;padding:8px 12px}.song-row-main{display:grid;grid-template-columns:1fr auto;gap:12px;width:100%;border:none;background:transparent;text-align:left}.song-row.active{border-color:#0f766e59;box-shadow:inset 0 0 0 1px #0f766e24}.song-row-copy{display:grid;gap:4px}.song-row-copy span,.song-row-meta{color:var(--muted)}.verify-icon-btn{width:34px;height:34px;border:1px solid rgba(72,43,22,.14);border-radius:999px;background:#f3ece3;color:transparent;display:inline-grid;place-items:center;transition:transform .16s ease,background .16s ease,border-color .16s ease}.verify-icon-btn:hover{transform:translateY(-1px)}.verify-icon-btn.verified{background:#0f766e;border-color:#0f766e;color:#fff;box-shadow:0 10px 20px #0f766e2e}.verify-icon-mark{font-size:1rem;font-weight:800;line-height:1}.song-row-actions{display:grid;justify-items:end;gap:6px}.manager-form,.batch-card,.preview-card{display:grid;gap:14px}.batch-help{margin:0;color:var(--muted);line-height:1.6}.batch-help code{display:inline-block;margin-top:6px;font-size:.88rem}.batch-input{width:100%;min-height:160px;padding:12px 14px;border-radius:14px;border:1px solid rgba(72,43,22,.14);background:#fffefb;color:var(--text);resize:vertical;font:inherit}.preview-copy{display:grid;gap:4px;margin:0}.preview-copy span{color:var(--muted)}.verified-badge{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:999px;background:var(--teal);color:#fff;font-size:.82rem;font-weight:800;vertical-align:middle}.preview-frame{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;border-radius:18px;background:#efe7db}.preview-frame iframe{width:100%;height:100%;border:0}.verify-toggle{display:flex;align-items:center;gap:10px}.verify-toggle input{width:18px;height:18px}.manager-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stack-form,.guess-form{display:grid;gap:14px}label{display:grid;gap:8px;font-weight:600}input,select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(72,43,22,.14);background:#fffefb;color:var(--text)}input:focus,select:focus{outline:2px solid rgba(200,81,45,.18);border-color:#c8512d4d}.primary-btn,.ghost-btn,.text-btn,.lang-pill{border:none;transition:transform .16s ease,opacity .16s ease,background .16s ease}.primary-btn,.ghost-btn,.lang-pill{padding:12px 18px}.primary-btn{background:var(--primary);color:#fff8f2}.ghost-btn{background:#fff0dc;color:var(--primary-dark)}.text-btn{padding:0;background:transparent;color:var(--teal)}.lang-pill{border-radius:999px;background:#fff4e2;color:var(--muted)}.lang-pill.active{background:var(--teal);color:#effffc}.lang-pill:disabled{opacity:.45;cursor:not-allowed}.primary-btn:hover,.ghost-btn:hover,.text-btn:hover,.lang-pill:hover{transform:translateY(-1px)}.meta-label{display:inline-block;font-size:.8rem;color:var(--muted);margin-bottom:6px}.player-list{display:grid;gap:10px;margin:18px 0}.player-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-md);background:#fff;border:1px solid rgba(72,43,22,.08)}.rank-badge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#fff1d8;color:var(--primary-dark);font-weight:800}.player-copy{flex:1;display:grid;gap:4px}.player-copy span,.empty-copy,.feedback,.roadmap-grid p{color:var(--muted)}.score{color:var(--teal);font-size:1.2rem}.play-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:14px}.duration-control{width:132px;color:var(--muted)}.duration-control input[type=number]{height:56px;border-radius:18px;font-size:1.35rem;font-weight:700;padding-inline:18px}.audio-stage{position:relative;overflow:hidden;min-height:0;display:grid;align-items:center;gap:16px;padding:20px 20px 16px;border-radius:24px;background:radial-gradient(circle at top left,rgba(200,81,45,.14),transparent 28%),radial-gradient(circle at right bottom,rgba(15,118,110,.14),transparent 22%),linear-gradient(145deg,#fff4e2,#fffdfa);border:1px solid rgba(140,46,21,.08);box-shadow:inset 0 1px #ffffffbf;margin-bottom:14px}.audio-stage-copy{position:relative;z-index:1;max-width:100%}.audio-stage-copy h3{margin:0 0 6px;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.15}.audio-stage-copy p{margin:0;max-width:52ch;line-height:1.55;font-size:.92rem;color:var(--muted)}.audio-kicker{margin-bottom:6px;color:var(--primary-dark);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.player-controls{display:grid;gap:12px;margin-top:14px}.yt-shell{gap:14px;width:100%;max-width:100%;padding:16px 18px;border-radius:24px;background:#fffcf7e6;border:1px solid rgba(140,46,21,.09);box-shadow:inset 0 1px #ffffffa6}.yt-progress-row,.yt-control-row,.yt-volume-block,.yt-transport{display:flex;align-items:center}.yt-progress-row{gap:10px;align-items:center}.yt-control-row{display:grid;grid-template-columns:minmax(120px,160px) minmax(180px,1fr) auto;justify-content:space-between;gap:12px;align-items:center}.yt-time{min-width:52px;font-size:.95rem;font-weight:600;color:#3c342e;font-variant-numeric:tabular-nums}.yt-progress,.yt-volume{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:#d9d2cc;outline:none}.yt-progress::-webkit-slider-thumb,.yt-volume::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:none;border-radius:50%;background:#ff715d;box-shadow:0 0 0 4px #ff715d14,0 6px 14px #ff715d2e}.yt-progress::-moz-range-thumb,.yt-volume::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:#ff715d;box-shadow:0 0 0 4px #ff715d14,0 6px 14px #ff715d2e}.yt-volume-block{gap:10px;min-width:0}.yt-volume{width:100%;max-width:120px;height:8px}.yt-transport{gap:16px;justify-content:center;width:100%}.icon-btn,.play-btn,.next-btn{border:none;background:transparent;cursor:pointer;transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease}.icon-btn:disabled,.play-btn:disabled,.next-btn:disabled{opacity:.45;cursor:not-allowed}.icon-btn:hover,.play-btn:hover,.next-btn:hover{transform:translateY(-1px)}.volume-btn,.transport-btn{display:inline-grid;place-items:center;width:34px;height:34px;color:#8e8a87}.play-btn{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#ff715d;color:#fff;box-shadow:0 0 0 6px #ff715d14,0 12px 24px #ff715d2e}.next-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;min-width:102px;justify-content:center;border-radius:999px;color:#ff715d;background:#ff715d14;border:1px solid rgba(255,113,93,.26);font-weight:700;font-size:.9rem;white-space:nowrap}.speaker-icon{position:relative;display:inline-block;width:28px;height:24px}.speaker-body{position:absolute;left:3px;top:7px;width:8px;height:10px;border:3px solid #181818;border-right:none;border-radius:6px 0 0 6px}.speaker-body:after{content:"";position:absolute;right:-12px;top:-3px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:9px solid #181818}.speaker-wave{position:absolute;border:3px solid #1db5ea;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;border-radius:50%}.wave-one{right:4px;top:6px;width:10px;height:12px}.wave-two{right:-1px;top:3px;width:16px;height:18px}.transport-icon{position:relative;display:inline-flex;align-items:center;gap:2px}.transport-icon span{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent}.transport-icon.backward span{border-right:9px solid #b0aba7}.transport-icon.forward span{border-left:9px solid #b0aba7}.play-icon{display:inline-block}.play-icon.play{width:0;height:0;margin-left:4px;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:20px solid #fff}.play-icon.pause{position:relative;width:18px;height:22px}.play-icon.pause:before,.play-icon.pause:after{content:"";position:absolute;top:0;width:6px;height:22px;background:#fff;border-radius:4px}.play-icon.pause:before{left:0}.play-icon.pause:after{right:0}.next-icon{position:relative;display:inline-flex;align-items:center;gap:2px}.next-icon span{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #ff715d}.next-icon:after{content:"";display:inline-block;width:3px;height:14px;background:#ff715d;border-radius:999px}.control-group{display:grid;gap:8px;font-weight:600}.control-group span{color:var(--muted);font-weight:500}.control-group input[type=range]{padding:0}.progress-group{max-width:520px}.hidden-player-shell{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.015;pointer-events:none}.hidden-player-shell iframe{width:100%;height:100%;border:0}.youtube-player-host{width:100%;height:100%}.empty-player{min-height:260px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,#fff5e4,#fffdfa);color:var(--muted);padding:22px;margin-bottom:18px;text-align:center}.answer-stage{min-height:260px;display:grid;place-items:center;text-align:center;gap:10px;padding:28px;margin-bottom:18px;border-radius:24px;background:radial-gradient(circle at top,rgba(255,113,93,.16),transparent 32%),linear-gradient(145deg,#fff3e4,#fffdf9);border:1px solid rgba(140,46,21,.1)}.answer-stage h3{margin:0;font-size:clamp(2rem,5vw,3.4rem);font-family:Georgia,Times New Roman,serif;color:var(--primary-dark)}.answer-stage p{margin:0;color:var(--muted)}.next-answer-btn{margin-top:10px;padding:14px 28px;border:none;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;box-shadow:0 16px 28px #c8512d2e}.feedback{min-height:26px;margin-top:16px;font-weight:700}.feedback.success{color:var(--teal)}.feedback.error{color:var(--primary-dark)}@media(max-width:980px){.hero-panel,.setup-grid,.room-layout,.roadmap-grid,.manager-layout,.manager-toolbar,.manager-form-grid{grid-template-columns:1fr}.section-head,.play-head{flex-direction:column}.app-shell{width:min(100% - 20px,1200px);padding-top:18px}.hero-panel,.panel{padding:20px}.duration-control{width:100%}.duration-control input[type=number]{height:52px;font-size:1.25rem}.audio-stage{padding:18px 16px 14px}.audio-stage-copy p{max-width:none}.yt-shell{padding:14px}.yt-progress-row,.yt-control-row{flex-direction:column;align-items:stretch}.yt-control-row{grid-template-columns:1fr}.yt-volume-block,.yt-transport{justify-content:center}.yt-volume{width:100%;max-width:none}.next-btn{width:100%}.play-btn{width:58px;height:58px}}