/* 基礎變數 */
:root { --c-bg:#f4f7fb; --c-panel:#ffffff; --c-ink:#172033; --c-muted:#6d7788; --c-line:#d9e2ef; --c-primary:#246bfe; --c-primary-dark:#164dc4; --c-teal:#0f766e; --c-red:#b42318; --c-amber:#a16207; --c-soft:#eef5ff; --g-hero:linear-gradient(135deg,#f7fbff 0%,#eaf3ff 48%,#f8fafc 100%); --g-primary:linear-gradient(135deg,#246bfe 0%,#00a7b5 100%); --shadow:0 18px 42px rgba(23,32,51,.08); }
/* 全域 */
* { box-sizing:border-box; }
body { margin:0; color:var(--c-ink); background:var(--c-bg); font-family:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif; letter-spacing:0; }
.mono { font-family:Consolas,"Cascadia Mono",monospace; }
.app-header { padding:24px 0 0; color:#fff; background:var(--c-bg); }
.hero-panel { position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; min-height:330px; padding:34px; border-radius:12px; background:linear-gradient(90deg,rgba(4,12,28,.92) 0%,rgba(8,25,51,.74) 46%,rgba(8,25,51,.30) 100%),url('../img/voxcpm-hero.png') center/cover no-repeat; border:1px solid rgba(255,255,255,.18); box-shadow:0 20px 50px rgba(20,36,64,.18); }
.hero-copy { max-width:760px; }
.app-header .eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; padding:6px 10px; border:1px solid rgba(125,211,252,.45); border-radius:999px; color:#93e5ff; background:rgba(8,47,73,.35); text-shadow:none; }
.app-header .subtitle { max-width:720px; color:#dbeafe; text-shadow:none; font-size:16px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--c-teal); font-size:14px; font-weight:800; margin-bottom:8px; }
h1 { margin:0; font-size:clamp(30px,4vw,46px); line-height:1.1; font-weight:900; letter-spacing:0; }
.subtitle { color:var(--c-muted); margin-top:10px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.hero-meta span { display:inline-flex; align-items:center; min-height:30px; padding:5px 10px; border-radius:999px; color:#e0f2fe; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); font-size:13px; font-weight:800; }
.header-actions { display:flex; flex-wrap:wrap; gap:10px; }
.app-main { padding:22px 0 48px; }
.btn { border-radius:8px; font-weight:800; }
.btn-primary { background:var(--g-primary); border:0; }
.btn-primary:hover { background:var(--c-primary-dark); }
/* 狀態與面板 */
.status-band,.panel { background:var(--c-panel); border:1px solid var(--c-line); border-radius:8px; box-shadow:var(--shadow); padding:18px; margin-bottom:20px; }
.server-panel { margin-top:0; }
.server-grid { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:14px; align-items:end; }
.server-action { display:flex; align-items:end; }
.server-action .btn { min-height:46px; }
.server-status { grid-column:1 / -1; }
.alert { border-radius:8px; }
.alert i { margin-right:8px; }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.section-head h2 { display:flex; align-items:center; gap:10px; margin:0; font-size:20px; font-weight:900; letter-spacing:0; }
.section-head p { color:var(--c-muted); margin:5px 0 0; font-size:14px; }
.director-icon { width:64px; height:64px; border-radius:14px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.sticky-panel { position:sticky; top:18px; }
/* 功能導覽 */
.feature-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.feature-item { display:flex; align-items:flex-start; gap:12px; min-height:88px; background:var(--c-panel); border:1px solid var(--c-line); border-radius:8px; padding:15px; }
.feature-item i { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; border-radius:8px; color:#fff; background:var(--g-primary); }
.feature-item b { display:block; font-size:15px; margin-bottom:4px; }
.feature-item span { display:block; color:var(--c-muted); font-size:13px; line-height:1.45; }
/* 範例 */
.prompt-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.example-toolbar { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.prompt-card { display:flex; flex-direction:column; min-height:112px; border:1px solid var(--c-line); border-radius:8px; background:#fff; padding:12px; transition:border-color .15s,box-shadow .15s,transform .15s; }
.prompt-card:hover { transform:translateY(-1px); border-color:#9ab8ff; box-shadow:0 0 0 3px rgba(36,107,254,.09); }
.prompt-title { display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:900; margin-bottom:10px; }
.prompt-preview { color:var(--c-muted); font-size:13px; line-height:1.5; margin:0 0 12px; }
.prompt-card .use-example { margin-top:auto; }
.long-stream-panel { border-color:#b9d5ff; background:#f8fbff; }
.param-note { display:flex; flex-wrap:wrap; gap:10px; color:#1d4ed8; font-size:13px; font-weight:800; }
.param-note span { display:inline-flex; align-items:center; min-height:30px; padding:5px 10px; border-radius:8px; background:#eaf3ff; border:1px solid #c7ddff; }
/* 表單 */
.form-label { font-weight:900; color:#263247; }
.hint-btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:5px; border:0; border-radius:999px; color:#2563eb; background:#eaf3ff; vertical-align:middle; }
.hint-btn:hover { color:#fff; background:#2563eb; }
textarea.form-control { min-height:150px; resize:vertical; }
.compact-textarea { min-height:112px !important; }
.form-text { color:var(--c-muted); }
.clone-voice-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); gap:20px; align-items:start; }
.clone-voice-grid .panel { margin-bottom:20px; }
.preset-voice-block { margin-bottom:14px; }
.preset-voice-grid { display:grid; gap:10px; }
.preset-voice-card { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; border:1px solid var(--c-line); border-radius:8px; background:#f8fafc; padding:10px; }
.preset-voice-card b { display:block; font-size:14px; }
.preset-voice-card span { display:block; color:var(--c-muted); font-size:12px; margin-top:2px; }
.preset-voice-card audio { width:100%; margin:0; }
.pause-tool { display:grid; grid-template-columns:minmax(260px,380px) 1fr; gap:10px; align-items:center; }
.pause-presets { display:flex; flex-wrap:wrap; gap:8px; }
.tag-tool { display:grid; grid-template-columns:minmax(160px,1fr) minmax(150px,1fr) minmax(260px,1.2fr); gap:10px; align-items:center; }
.tag-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; }
.toolbar.stack { align-items:stretch; }
.main-player { width:100%; margin-top:16px; }
/* 串流 */
.streaming-guide { background:#fbfdff; border-color:#b9d5ff; }
.stream-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.stream-grid article { border:1px solid var(--c-line); border-radius:8px; background:#fff; padding:14px; }
.stream-grid h3 { margin:0 0 6px; font-size:16px; font-weight:900; color:#164dc4; }
.stream-grid p { margin:0; color:var(--c-muted); line-height:1.55; font-size:14px; }
.stream-input { margin:14px 0; padding:14px; border:1px solid #c7ddff; border-radius:8px; background:#fff; }
.stream-queue { display:grid; gap:10px; margin-top:12px; }
.stream-item { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:12px; align-items:center; border:1px solid var(--c-line); border-radius:8px; padding:12px; background:#f8fafc; }
.stream-item p { margin:4px 0 0; color:var(--c-muted); font-size:13px; line-height:1.5; }
.stream-item audio { width:100%; }
.stream-code-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.code-block { margin:0; padding:14px; border-radius:8px; color:#dbeafe; background:#0f172a; overflow:auto; font-size:13px; line-height:1.55; }
/* 表格 */
.log-wrap { border:1px solid var(--c-line); border-radius:8px; }
.log-wrap table { min-width:1520px; }
.compact-table { border:1px solid var(--c-line); border-radius:8px; }
th { white-space:nowrap; color:#526071; font-size:14px; }
th button { border:0; background:transparent; color:inherit; font:inherit; font-weight:900; padding:0; }
td { font-size:14px; }
.log-text { min-width:260px; max-width:420px; white-space:pre-wrap; line-height:1.5; }
.log-audio { min-width:220px; }
.log-audio audio { width:220px; }
tr.status-pending td { background:#fff8e6; }
tr.status-success td { background:#eefcf6; }
tr.status-error td { background:#fff0f0; }
.status-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 9px; font-weight:900; font-size:12px; }
.status-pill.success { color:#06603b; background:#dff8eb; }
.status-pill.error { color:var(--c-red); background:#ffe4e4; }
.status-pill.pending { color:var(--c-amber); background:#fff4d6; }
/* 響應式 */
@media (max-width:1200px) { .feature-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .prompt-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .clone-voice-grid { grid-template-columns:1fr; } .stream-grid,.stream-code-grid { grid-template-columns:1fr; } .sticky-panel { position:static; } }
@media (max-width:768px) { .app-header { padding:14px 0 0; } .hero-panel { min-height:420px; padding:22px; flex-direction:column; align-items:stretch; justify-content:flex-end; background-position:62% center; } .status-band,.panel { padding:14px; } .server-grid { grid-template-columns:1fr; } .server-action .btn { width:100%; } .feature-strip { grid-template-columns:1fr; } .prompt-grid { grid-template-columns:1fr; } .example-toolbar { width:100%; justify-content:stretch; } .example-toolbar .btn-group { width:100%; } .example-toolbar .btn { flex:1 1 auto; } .pause-tool,.tag-tool { grid-template-columns:1fr; } .stream-item { grid-template-columns:1fr; } .section-head { flex-direction:column; } .header-actions { width:100%; } .header-actions .btn { flex:1 1 auto; } .toolbar .btn { flex:1 1 100%; } }