:root {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --card: #ffffff;
  --border: #e8e8ed;
  --text: #1d1d1f;
  --text-dim: #6e6e73;
  --accent: #0071e3;
  --confirm: #34c759;
  --pending: #ffa726;
  --reject: #ef5350;
  --btn-bg: #f5f5f7;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; overflow:hidden; -webkit-font-smoothing: antialiased; }

/* ====== Header ====== */
#header {
  display:flex; align-items:center; gap:16px; padding:8px 16px;
  background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0;
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,.85);
}
#header h1 { font-size:18px; white-space:nowrap; }
#project-selector { display:flex; gap:8px; align-items:center; }
#project-selector select { background:var(--card); color:var(--text); border:1px solid var(--border); padding:4px 8px; border-radius:4px; }
#project-info { font-size:12px; color:var(--text-dim); }
#status-bar { display:flex; gap:12px; margin-left:auto; }
.status-badge { font-size:13px; padding:4px 10px; border-radius:12px; background:var(--card); }
.status-badge.confirmed { border:1px solid var(--confirm); }
.status-badge.pending { border:1px solid var(--pending); }
.status-badge.rejected { border:1px solid var(--reject); }

/* ====== App Layout ====== */
#app-layout { display:flex; flex:1; overflow:hidden; }

/* ====== Navigation Tree ====== */
#nav-tree {
  width:200px; background:var(--panel); border-right:1px solid var(--border);
  overflow-y:auto; padding:8px; flex-shrink:0; display:flex; flex-direction:column; gap:2px;
}
.nav-section { margin-bottom:4px; }
.nav-section-title {
  padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600;
  color:var(--text-dim); transition:all .15s;
}
.nav-section-title:hover { background:var(--btn-bg); color:var(--text); }
.nav-section-title.active { color:var(--accent); background:rgba(79,195,247,0.08); }
.nav-section-items { padding-left:8px; }
.nav-item {
  padding:6px 10px; border-radius:4px; cursor:pointer; font-size:12px;
  color:var(--text-dim); transition:all .15s; margin:1px 0;
}
.nav-item:hover { background:var(--btn-bg); color:var(--text); }
.nav-item.active { color:var(--accent); background:rgba(79,195,247,0.1); font-weight:500; }

/* ====== Content Area ====== */
#content-area { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.content-panel { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* Split layout (sidebar + detail) */
.content-split { display:flex; flex:1; overflow:hidden; }
.content-sidebar {
  width:220px; background:rgba(22,33,62,0.5); border-right:1px solid var(--border);
  overflow-y:auto; padding:8px; flex-shrink:0; display:flex; flex-direction:column;
}
.content-sidebar-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 6px; margin-bottom:4px; font-size:13px; font-weight:600; color:var(--text-dim);
}
.content-detail { flex:1; overflow-y:auto; padding:16px; }

/* ====== Character List ====== */
.char-item {
  padding:8px 10px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:14px; transition:background .15s;
}
.char-item:hover { background:var(--btn-bg); }
.char-item.active { background:var(--accent); color:var(--bg); font-weight:600; }
.char-item .status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.char-item .status-dot.confirmed { background:var(--confirm); }
.char-item .status-dot.pending { background:var(--pending); }
.char-item .status-dot.rejected { background:var(--reject); }

/* ====== Buttons ====== */
.btn-sm { font-size:11px;padding:4px 10px;background:var(--btn-bg);color:var(--text);border:none;border-radius:4px;cursor:pointer; }
.btn-sm:hover { opacity:.85; }
.btn-xs { font-size:10px;padding:2px 8px;background:none;color:var(--text-dim);border:1px solid var(--border);border-radius:3px;cursor:pointer; }
.btn-accent { background:var(--accent);color:var(--bg);border:none;border-radius:4px;cursor:pointer;font-size:12px;padding:6px 14px; }
.btn-accent:hover { opacity:.85; }
.btn-danger { background:var(--reject);color:#fff;border:none;border-radius:4px;cursor:pointer; }
.btn-confirm { background:var(--confirm);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;padding:6px 14px; }
.btn-pending { background:var(--pending);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;padding:6px 14px; }
.btn-edit { background:var(--accent);color:var(--bg);border:none;border-radius:6px;cursor:pointer;font-size:13px;padding:6px 14px; }
.btn-delete { background:var(--reject);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;padding:6px 14px; }
.btn-preview { background:var(--btn-bg);color:var(--text);border:none;border-radius:6px;cursor:pointer;font-size:13px;padding:6px 14px; }
.btn-lg { padding:12px 24px;background:var(--btn-bg);color:var(--text);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:14px; }

/* ====== Detail Content ====== */
#detail-empty { color:var(--text-dim); font-size:16px; margin-top:40vh; text-align:center; }
#detail-content { max-width:600px; margin:0 auto; }

/* Detail Tabs */
#detail-tabs { display:flex; gap:2px; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:0; }
.detail-tab {
  padding:8px 16px; border:none; background:none; color:var(--text-dim); cursor:pointer;
  font-size:13px; border-bottom:2px solid transparent; transition:all .15s; margin-bottom:-1px;
}
.detail-tab:hover { color:var(--text); }
.detail-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.detail-tab-content { animation:fadeIn .2s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }

/* Portrait */
#portrait-area { width:256px; height:256px; margin:0 auto 8px; background:var(--card); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#portrait-area img { max-width:100%; max-height:100%; object-fit:contain; }
#portrait-placeholder { color:var(--text-dim); font-size:14px; }
#portrait-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; justify-content:center; }

/* Appearance Fields */
#appearance-fields { margin-top:8px; }
#appearance-fields .edit-field { margin-bottom:8px; }
#appearance-fields .edit-field label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:3px; }
#appearance-fields .edit-field input { width:100%; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:6px; font-size:13px; }

/* Voice Area */
#voice-area { text-align:center; margin-bottom:12px; }
#voice-area audio { width:100%; max-width:320px; height:32px; }

/* Panel Card */
.panel-card { background:var(--card); border-radius:8px; padding:16px; margin-bottom:12px; }
.panel-card h4 { margin:0 0 8px; color:var(--accent); font-size:14px; }

/* Clone Voice */
#clone-status { font-size:12px; margin-bottom:8px; }
#clone-script-preview { font-size:13px; background:rgba(0,0,0,0.25); padding:10px; border-radius:6px; margin-bottom:10px; line-height:1.7; max-height:80px; overflow-y:auto; color:var(--text); }
.clone-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.clone-controls button { font-size:12px; padding:6px 16px; border-radius:6px; border:none; cursor:pointer; }
.clone-controls #clone-timer { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; min-width:50px; }
.clone-controls #btn-clone-record { background:var(--reject); color:#fff; }
.clone-controls #btn-clone-stop { background:rgba(255,255,255,0.1); color:var(--text); }
.clone-controls #btn-clone-play { background:rgba(108,92,231,0.15); color:var(--text); }
.clone-submit { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.clone-submit input { font-size:12px; padding:5px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.3); color:var(--text); width:180px; }
.clone-submit button { font-size:12px; padding:6px 16px; background:linear-gradient(135deg,#6c5ce7,#3b82f6); color:#fff; border:none; border-radius:6px; cursor:pointer; }
.clone-submit button:disabled { opacity:.4; cursor:not-allowed; }
#clone-progress-text { font-size:11px; color:var(--text-dim); margin-top:6px; }

/* Voice Tune */
#voice-tune-panel { background:var(--card); border-radius:8px; padding:12px; margin-top:12px; }
#voice-tune-panel h4 { font-size:14px; margin-bottom:10px; color:var(--accent); }
.tune-preset { margin-bottom:10px; display:flex; align-items:center; }
.tune-preset label { font-size:12px; color:var(--text-dim); margin-right:6px; flex-shrink:0; }
.tune-preset select { background:var(--btn-bg); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:4px 6px; font-size:12px; flex:1; }
#tune-preset-voice { font-size:11px; color:var(--text-dim); margin-left:8px; }
.tune-slider { margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.tune-slider label { width:36px; font-size:13px; color:var(--text-dim); flex-shrink:0; }
.tune-slider input[type=range] { flex:1; accent-color:var(--accent); height:4px; }
.tune-slider span { width:28px; text-align:right; font-size:12px; color:var(--text); }
.tune-test { margin-top:8px; }
.tune-test input { width:100%; background:var(--btn-bg); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:6px; font-size:12px; }
.tune-actions { display:flex; gap:6px; margin-top:8px; }
.tune-actions button { padding:5px 12px; border:none; border-radius:5px; cursor:pointer; font-size:12px; }
.tune-actions button:first-child { background:var(--accent); color:var(--bg); }
.tune-actions button:last-child { background:var(--confirm); color:#fff; }

/* Fields */
#fields-area { margin-bottom:16px; }
.field-row { display:flex; padding:4px 0; border-bottom:1px solid var(--border); font-size:14px; }
.field-row .field-label { color:var(--text-dim); width:80px; flex-shrink:0; }
.field-row .field-value { flex:1; }

/* Actions */
#actions-area { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px; }

/* Edit field generic */
.edit-field { margin-bottom:10px; }
.edit-field label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:3px; }
.edit-field input, .edit-field textarea, .edit-field select { width:100%; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:6px; font-size:13px; }
.edit-field textarea { resize:vertical; min-height:50px; }
.range-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--text-dim); }

/* ====== Input Select/Text ====== */
.input-select { background:var(--card); color:var(--text); border:1px solid var(--border); padding:6px 12px; border-radius:6px; font-size:13px; }
.input-text { background:var(--card); color:var(--text); border:1px solid var(--border); padding:6px 12px; border-radius:6px; font-size:13px; }

/* ====== Voice Library Main ====== */
.voice-card {
  background:var(--card); border-radius:8px; padding:12px;
  cursor:pointer; transition:all .15s; border:1px solid transparent;
  display:flex; align-items:center; gap:10px;
}
.voice-card:hover { border-color:var(--accent); background:rgba(79,195,247,0.05); }
.voice-card.selected { border-color:var(--accent); background:rgba(79,195,247,0.1); }
.voice-card .vc-play { width:32px;height:32px;border-radius:50%;border:2px solid var(--accent);background:none;color:var(--accent);cursor:pointer;flex-shrink:0;font-size:12px;display:flex;align-items:center;justify-content:center; }
.voice-card .vc-info { flex:1;min-width:0; }
.voice-card .vc-name { font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.voice-card .vc-meta { font-size:11px;color:var(--text-dim);margin-top:2px; }
.voice-card .vc-tags { display:flex;gap:4px;flex-wrap:wrap;margin-top:4px; }
.voice-card .vc-tag { font-size:10px;padding:2px 8px;border-radius:10px;background:var(--btn-bg);color:var(--text-dim); }

/* ====== Voice Library Sidebar (compat) ====== */
.lib-tab { flex:1; padding:4px 0; background:none; color:var(--text-dim); border:none; border-bottom:2px solid transparent; cursor:pointer; font-size:12px; transition:all .15s; }
.lib-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.lib-item { padding:4px 8px; font-size:12px; cursor:pointer; border-radius:4px; display:flex; justify-content:space-between; }
.lib-item:hover { background:var(--btn-bg); }
.voice-lib-item { padding:4px 6px; margin:2px 0; border-radius:4px; font-size:11px; display:flex; align-items:center; gap:4px; cursor:pointer; }
.voice-lib-item:hover { background:var(--btn-bg); }
.voice-lib-item .voice-play-btn { width:18px; height:18px; border-radius:50%; border:1px solid var(--accent); background:none; color:var(--accent); font-size:8px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.voice-lib-item .voice-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voice-lib-item .voice-category { font-size:10px; color:var(--text-dim); }
.voice-lib-item .voice-delete-btn { font-size:10px; color:var(--reject); cursor:pointer; background:none; border:none; padding:0 2px; }

/* ====== AI Assistant ====== */
#ai-chat-full { flex:1; display:flex; flex-direction:column; }
#ai-messages-full { flex:1; overflow-y:auto; margin-bottom:8px; font-size:13px; display:flex; flex-direction:column; gap:6px; min-height:200px; max-height:400px; }
.ai-msg { padding:6px 10px; border-radius:8px; max-width:90%; }
.ai-msg.user { align-self:flex-end; background:var(--accent); color:var(--bg); }
.ai-msg.assistant { align-self:flex-start; background:var(--card); }
#ai-input-area { display:flex; gap:6px; }
#ai-input { flex:1; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:6px; font-size:13px; resize:none; }
#ai-input-area button { background:var(--accent); color:var(--bg); border:none; border-radius:6px; padding:6px 14px; cursor:pointer; }
#ai-diff { margin-top:8px; }
#ai-diff pre { background:var(--card); padding:8px; border-radius:4px; font-size:11px; max-height:200px; overflow-y:auto; white-space:pre-wrap; margin:8px 0; }

/* ====== Toolbar ====== */
#toolbar { display:flex; gap:8px; padding:8px 16px; background:var(--panel); border-top:1px solid var(--border); flex-shrink:0; }
#toolbar button { background:var(--btn-bg); color:var(--text); border:none; border-radius:6px; cursor:pointer; font-size:13px; padding:6px 14px; }
#toolbar button:hover { opacity:.85; }

/* ====== Modal ====== */
.modal { position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-content { background:var(--panel); border-radius:12px; padding:20px; width:90%; max-width:500px; max-height:80vh; overflow-y:auto; }
.modal-content h3 { margin-bottom:12px; }
.modal-actions { display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }

/* ====== Character Library ====== */
.char-lib-card {
  background:var(--card); border-radius:8px; padding:12px; cursor:pointer; transition:all .15s; border:1px solid transparent;
}
.char-lib-card:hover { border-color:var(--accent); }
.char-lib-card .clc-name { font-size:14px; font-weight:600; }
.char-lib-card .clc-role { font-size:11px; color:var(--text-dim); }
.char-lib-card .clc-voice { font-size:10px; color:var(--text-dim); margin-top:4px; }
.char-lib-card .clc-cast { margin-top:8px; }

/* ====== Wizard ====== */
#header { display:flex; align-items:center; gap:20px; padding:0 20px; height:48px; background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0; }
.brand { font-size:16px; font-weight:700; color:#1d1d1f; text-decoration:none; letter-spacing:.5px; }
.brand-subtitle { font-size:11px; color:var(--text-dim); margin-left:8px; padding-left:8px; border-left:1.5px solid var(--border); font-weight:400; white-space:nowrap; }
#top-nav { display:flex; gap:4px; }
#top-nav a { font-size:12px; color:var(--text-dim); text-decoration:none; padding:4px 12px; border-radius:6px; transition:all .15s; font-weight:500; }
#top-nav a:hover { color:var(--text); background:var(--btn-bg); }
#top-nav a.active { color:var(--accent); background:#e8f0fe; }
#header-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
#header-right select { font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:6px; background:var(--btn-bg); color:var(--text); }
#project-info { font-size:11px; color:var(--text-dim); }

#app-layout { display:flex; flex:1; overflow:hidden; }
#sidebar { width:220px; background:var(--panel); border-right:1px solid var(--border); padding:12px; overflow-y:auto; flex-shrink:0; }
.sb-section { margin-bottom:12px; }
.sb-section-title { font-size:12px; font-weight:600; color:var(--text-dim); cursor:pointer; padding:6px 8px; border-radius:6px; transition:all .15s; }
.sb-section-title:hover { background:var(--btn-bg); color:var(--text); }
.sb-items { padding:4px 0 0 8px; }
.sb-items .btn-text { font-size:11px; color:var(--accent); background:none; border:none; cursor:pointer; padding:4px 0; }

#main-area { flex:1; overflow-y:auto; padding:32px; display:flex; flex-direction:column; align-items:center; }
.wizard-step { width:100%; max-width:640px; animation:fadeIn .35s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.hero { text-align:center; margin-bottom:24px; }
.hero h1 { font-size:28px; font-weight:700; letter-spacing:-.5px; margin-bottom:8px; color:var(--text); }
.hero p { font-size:15px; color:var(--text-dim); line-height:1.6; }

.card { background:var(--card); border-radius:16px; padding:32px; box-shadow:var(--shadow); }
.input-card { background:var(--card); border-radius:16px; padding:32px; box-shadow:var(--shadow); margin-bottom:24px; }
.field-label { font-size:12px; font-weight:500; color:var(--text-dim); margin-bottom:6px; }
.input-card input { width:100%; padding:14px 16px; font-size:15px; border:1.5px solid var(--border); border-radius:12px; outline:none; font-family:inherit; background:var(--btn-bg); transition:all .2s; }
.input-card input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,.12); background:#fff; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; font-size:14px; font-weight:500; border:none; border-radius:10px; cursor:pointer; transition:all .2s; font-family:inherit; }
.btn.primary { background:var(--accent); color:#fff; }
.btn.primary:hover { background:#0077ed; transform:translateY(-1px); }
.btn.primary:disabled { opacity:.4; cursor:default; transform:none; }
.btn.secondary { background:var(--btn-bg); color:var(--text); border:1px solid var(--border); }
.btn.secondary:hover { background:var(--border); }
.btn-row { display:flex; gap:8px; margin-top:20px; justify-content:flex-end; }

.loading-card { text-align:center; padding:60px 20px; }
.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 16px; }
@keyframes spin { to{transform:rotate(360deg)} }
.lt { font-size:14px; color:var(--text-dim); }

.detect-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.detect-item { padding:20px 12px; background:var(--btn-bg); border-radius:12px; text-align:center; }
.detect-item .num { font-size:28px; font-weight:700; color:var(--accent); }
.detect-item .lbl { font-size:12px; color:var(--text-dim); margin-top:4px; }

.char-list-wiz { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.char-row-wiz { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--btn-bg); border-radius:10px; border:1px solid var(--border); cursor:pointer; transition:all .2s; }
.char-row-wiz:hover { border-color:var(--accent); }
.char-row-wiz .av { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; font-weight:600; flex-shrink:0; }
.char-row-wiz .info { flex:1; }
.char-row-wiz .info .nm { font-size:14px; font-weight:500; }
.char-row-wiz .info .desc { font-size:12px; color:var(--text-dim); }

.scene-list-wiz { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.scene-card-wiz { padding:16px; background:var(--btn-bg); border-radius:10px; border:1px solid var(--border); }
.scene-card-wiz .st { font-size:14px; font-weight:500; }
.scene-card-wiz .sd { font-size:12px; color:var(--text-dim); margin-top:4px; }

.storyboard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-bottom:16px; }
.storyboard-item { padding:12px; background:var(--btn-bg); border-radius:10px; border:1px solid var(--border); }
.storyboard-item .sn { font-size:10px; color:var(--text-dim); margin-bottom:4px; }
.storyboard-item .stt { font-size:13px; font-weight:500; }

.progress-bar-wiz { width:100%; height:8px; background:var(--border); border-radius:4px; margin:16px 0; overflow:hidden; }
.progress-fill-wiz { height:100%; background:var(--accent); border-radius:4px; width:0%; transition:width .5s ease; }

.output-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.output-actions .btn { flex:1; justify-content:center; }

.overwrite-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.overwrite-actions .btn { flex:1; justify-content:center; }

#wizard-progress { display:flex; align-items:center; justify-content:center; gap:0; margin-top:24px; padding:16px 0; }
.wiz-dot { width:28px; height:28px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--text-dim); position:relative; transition:all .3s; }
.wiz-dot.act { background:var(--accent); color:#fff; }
.wiz-dot.done { background:var(--confirm); color:#fff; }
.wiz-dot div { position:absolute; top:32px; white-space:nowrap; font-size:10px; font-weight:400; color:var(--text-dim); }
.wiz-line { width:40px; height:2px; background:var(--border); transition:all .3s; }
.wiz-line.done { background:var(--confirm); }

.quick-links { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.ql-card { background:var(--card); border-radius:12px; padding:20px; text-align:center; cursor:pointer; border:1px solid var(--border); transition:all .2s; box-shadow:var(--shadow); }
.ql-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.ql-icon { font-size:28px; margin-bottom:8px; }
.ql-label { font-size:14px; font-weight:600; }
.ql-desc { font-size:11px; color:var(--text-dim); margin-top:4px; }

/* Modal */
.modal-overlay { position:fixed; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,.3); z-index:100; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-card { background:var(--card); border-radius:16px; padding:28px; max-width:480px; width:90%; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.15); }
.modal-card h2 { font-size:18px; font-weight:600; margin-bottom:16px; }
.modal-close { float:right; font-size:20px; cursor:pointer; color:var(--text-dim); background:none; border:none; line-height:1; }
.field { margin-bottom:12px; }
.field label { font-size:11px; color:var(--text-dim); display:block; margin-bottom:3px; font-weight:500; }
.field input, .field textarea, .field select { width:100%; padding:8px 12px; font-size:13px; border:1.5px solid var(--border); border-radius:8px; outline:none; font-family:inherit; background:var(--btn-bg); color:var(--text); }
.field input:focus, .field textarea:focus { border-color:var(--accent); }

/* Sidebar mini lists */
.sb-items .mini-char { font-size:11px; padding:4px 8px; cursor:pointer; border-radius:4px; color:var(--text-dim); }
.sb-items .mini-char:hover { background:var(--btn-bg); color:var(--text); }
.sb-items .mini-video { font-size:10px; padding:3px 8px; cursor:pointer; color:var(--text-dim); border-radius:4px; }
.sb-items .mini-video:hover { background:var(--btn-bg); color:var(--text); }
.sb-items .mini-voice { font-size:10px; padding:3px 8px; cursor:pointer; color:var(--text-dim); border-radius:4px; }
.sb-items .mini-voice:hover { background:var(--btn-bg); color:var(--accent); }

/* Sidebar current selections */
#sb-current-selections {
  background: linear-gradient(135deg, rgba(0,113,227,0.04), rgba(108,92,231,0.04));
  border-radius: 8px;
  padding: 4px 0;
}
.sb-mini-item {
  font-size: 11px; padding: 4px 8px; cursor: pointer; border-radius: 4px;
  color: var(--text-dim); display: flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.sb-mini-item:hover { background: var(--btn-bg); color: var(--text); }
.sb-mini-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Scene card enhancements */
.scene-card-wiz { transition: border-color .2s; }
.scene-card-wiz:hover { border-color: var(--accent); }
.scene-card-wiz .sc-header-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.scene-card-wiz .sc-mood-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.scene-card-wiz .sc-title { font-size: 14px; font-weight: 500; }
.scene-card-wiz .sc-brief { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.sc-lib-select { font-size: 11px; padding: 4px 8px; width: 100%; }
.sc-lib-thumb { margin-bottom: 6px; }
.sc-lib-thumb img { max-width: 100%; max-height: 80px; border-radius: 6px; margin-top: 6px; }

/* Character library picker items */
.clp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); margin-bottom: 6px;
  transition: all .15s;
}
.clp-item:hover { border-color: var(--accent); background: rgba(0,113,227,0.04); }
.clp-item .clp-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; font-weight: 600;
}
.clp-item .clp-info { flex: 1; min-width: 0; }
.clp-item .clp-name { font-size: 14px; font-weight: 500; }
.clp-item .clp-meta { font-size: 11px; color: var(--text-dim); }
.clp-item .clp-import-btn {
  padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--accent); font-size: 11px;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.clp-item .clp-import-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ====== Flow Manager ====== */
#flow-manager {
  background: var(--panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0; overflow: hidden; transition: max-height .3s ease;
  max-height: 200px;
}
#flow-manager.collapsed { max-height: 30px; }
#flow-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px; height: 30px; cursor: pointer;
  user-select: none; transition: background .15s;
}
#flow-bar:hover { background: var(--btn-bg); }
.flow-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--confirm); }
#flow-bar-text { font-size: 12px; font-weight: 500; color: var(--text); }
.flow-bar-btn {
  padding: 2px 6px; font-size: 12px; border: none; border-radius: 4px;
  background: transparent; cursor: pointer; transition: background .15s;
}
.flow-bar-btn:hover { background: var(--border); }
.flow-bar-btn.active { background: var(--accent); color: #fff; }
.flow-bar-chevron {
  font-size: 10px; color: var(--text-dim); transition: transform .3s;
  margin-left: auto;
}
#flow-manager.collapsed .flow-bar-chevron { transform: rotate(-90deg); }

#flow-body { padding: 4px 16px 8px; position: relative; }
#flow-manager.collapsed #flow-body { display: none; }
#flow-svg {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0;
}

#flow-resource-row {
  display: flex; justify-content: center; gap: 20px; padding: 4px 0 8px;
  position: relative; z-index: 1;
}
.flow-rnode {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 14px;
  background: var(--btn-bg); border: 1.5px solid var(--border);
  font-size: 11px; cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.flow-rnode:hover { border-color: var(--accent); background: rgba(0,113,227,0.06); }
.flow-rnode .fr-icon { font-size: 13px; }
.flow-rnode .fr-label { color: var(--text); }
.flow-rnode .fr-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-dim);
}

#flow-pipe-row {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 0; position: relative; z-index: 1;
}
.flow-pnode {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 10px; border-radius: 14px;
  background: var(--card); border: 1.5px solid var(--border);
  font-size: 11px; cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.flow-pnode:hover { border-color: var(--accent); background: rgba(0,113,227,0.06); }
.flow-pnode.active { border-color: var(--accent); background: rgba(0,113,227,0.1); }
.flow-pnode .fp-icon { font-size: 13px; }
.flow-pnode .fp-label { color: var(--text); }
.flow-pnode .fp-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-dim);
}
.flow-pnode .fp-dot.ok { background: var(--confirm); }
.flow-pnode .fp-dot.warn { background: var(--pending); }
.flow-pnode .fp-dot.err { background: var(--reject); }
.flow-pnode .fp-dot.active { background: var(--accent); }
.fp-arrow { font-size: 10px; color: var(--text-dim); margin: 0 1px; }

/* Flow panels */
.flow-panel {
  position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; margin-top: 6px;
}
.flow-panel-title {
  font-size: 12px; font-weight: 600; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.flow-panel-title .btn-text {
  font-size: 10px; color: var(--accent); background: none; border: none; cursor: pointer;
}

/* Theme grid */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.theme-item { display: flex; align-items: center; gap: 6px; }
.theme-item label { font-size: 10px; color: var(--text-dim); min-width: 55px; }
.theme-item input[type=color] {
  width: 24px; height: 20px; border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer; padding: 0; background: none;
}
.theme-item input[type=text] {
  flex: 1; font-size: 10px; padding: 2px 4px; border: 1px solid var(--border);
  border-radius: 3px; background: var(--btn-bg); color: var(--text);
  font-family: SF Mono, monospace; min-width: 0;
}

/* API panel */
#flow-api-content { font-size: 11px; }
.api-node-group { margin-bottom: 8px; }
.api-node-group .api-node-name { font-weight: 600; font-size: 11px; margin-bottom: 3px; }
.api-endpoint-row {
  display: flex; align-items: center; gap: 4px; margin: 2px 0;
  font-size: 10px; font-family: SF Mono, monospace;
}
.api-endpoint-row .api-method {
  padding: 1px 4px; border-radius: 3px; font-weight: 600; font-size: 9px;
}
.api-method.get { background: #34c75933; color: var(--confirm); }
.api-method.post { background: #0071e333; color: var(--accent); }
.api-endpoint-row .api-url { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-endpoint-row .api-test-btn {
  font-size: 9px; padding: 1px 6px; border: 1px solid var(--border);
  border-radius: 3px; background: var(--btn-bg); color: var(--accent);
  cursor: pointer; margin-left: auto;
}

/* Flow tooltip */
#flow-tooltip {
  position: absolute; z-index: 10; font-size: 10px;
  background: var(--text); color: var(--panel); padding: 4px 8px;
  border-radius: 4px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* Edit mode */
#flow-manager.edit-mode .flow-pnode,
#flow-manager.edit-mode .flow-rnode { cursor: grab; }
#flow-manager.edit-mode .flow-pnode:active,
#flow-manager.edit-mode .flow-rnode:active { cursor: grabbing; }
#flow-manager.edit-mode .flow-pnode.drag-over { border-color: var(--accent); border-style: dashed; }
.flow-pnode .fp-delete { display: none; }
#flow-manager.edit-mode .flow-pnode .fp-delete {
  display: inline; cursor: pointer; color: var(--reject); font-size: 10px;
  margin-left: 2px;
}

@media(max-width:768px) {
  #sidebar { display:none; }
  #main-area { padding:20px 16px; }
  .quick-links { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:24px; }
  #flow-manager { max-height: 160px; }
  #flow-resource-row { gap: 8px; flex-wrap: wrap; }
  #flow-pipe-row { gap: 0; flex-wrap: wrap; }
  .flow-rnode, .flow-pnode { padding: 2px 6px; font-size: 10px; }
}