:root {
  --ink: #15242f;
  --ink-soft: #52616b;
  --ink-faint: #8b969e;
  --line: #e4e7e5;
  --paper: #f7f5ef;
  --canvas: #fffefa;
  --panel: #ffffff;
  --coral: #ff765d;
  --coral-soft: #fff0ec;
  --mint: #d6e8dc;
  --blue: #dce9f2;
  --shadow: 0 16px 42px rgba(21,36,47,.06);
  font-family: "DM Sans", "Noto Sans TC", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; padding: 27px 20px; background: var(--ink); color: #fff; min-height: 100vh; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 58px; }
.brand-mark { width: 35px; height: 35px; background: var(--coral); border-radius: 10px; display: grid; place-items: center; color: var(--ink); font-weight: 800; font-size: 16px; }
.brand-copy { line-height: 1.05; letter-spacing: -.03em; font-weight: 700; font-size: 14px; }
.brand-copy span { display:block; color:#aab7bf; font-size: 10px; font-family: "DM Mono", monospace; letter-spacing:.07em; margin-top: 4px; font-weight: 400; }
.nav-label { color: #70808b; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin: 0 12px 12px; }
.nav { display: grid; gap: 5px; }
.nav-button { color:#c7d0d5; background:transparent; border:0; border-radius:10px; display:flex; align-items:center; gap:12px; padding: 11px 12px; text-align:left; font-size: 13px; transition: .18s ease; }
.nav-button:hover, .nav-button.active { color:#fff; background: rgba(255,255,255,.11); }
.nav-button.active .nav-icon { color: var(--coral); }
.nav-icon { width:17px; height:17px; display:inline-grid; place-items:center; color:#91a1aa; font-size: 16px; }
.sidebar-bottom { margin-top:auto; border-top:1px solid rgba(255,255,255,.12); padding-top: 17px; }
.storage-note { display:flex; justify-content:space-between; align-items:center; color:#97a5ad; font-size:11px; padding: 0 4px; margin-bottom: 10px; }
.storage-note strong { color:#d6e8dc; font-weight:500; }
.storage-bar { height: 4px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
.storage-bar span { display:block; height:100%; width: 23%; background: var(--coral); border-radius:99px; }
.main { min-width:0; background: var(--canvas); }
.topbar { min-height: 82px; padding: 0 44px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background: rgba(255,254,250,.88); position:sticky; top:0; z-index:10; backdrop-filter: blur(14px); }
.breadcrumbs { display:flex; gap:10px; align-items:center; color:var(--ink-faint); font-size:12px; }
.breadcrumbs strong { color:var(--ink); font-weight:600; }
.top-actions { display:flex; align-items:center; gap:16px; }
.search-box { display:flex; align-items:center; gap:8px; color:var(--ink-faint); border-bottom:1px solid var(--line); padding: 7px 0; min-width: 208px; }
.search-box input { border:0; outline:0; background:transparent; width:100%; font-size:12px; color:var(--ink); }
.search-box input::placeholder { color:var(--ink-faint); }
.user-pill { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:#436354; font-size:11px; font-weight:700; }
.content { max-width: 1250px; margin: 0 auto; padding: 44px 44px 90px; }
.view-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 36px; gap:20px; }
.eyebrow { color:var(--coral); font: 500 10px "DM Mono", monospace; letter-spacing:.14em; text-transform:uppercase; margin-bottom:11px; }
h1, h2, h3, p { margin:0; }
h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing:-.06em; line-height:1.04; font-weight:700; }
h2 { font-size: 22px; letter-spacing:-.04em; }
h3 { font-size: 15px; letter-spacing:-.02em; }
.subcopy { color:var(--ink-soft); font-size:13px; margin-top:12px; line-height:1.6; }
.button { border:1px solid transparent; border-radius: 8px; padding: 11px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:600; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background:var(--coral); color:var(--ink); box-shadow: 0 8px 16px rgba(255,118,93,.2); }
.button-quiet { background:var(--panel); color:var(--ink-soft); border-color:var(--line); }
.button-danger { background:#fff4f1; color:#a84b3a; border-color:#efc8bf; }
.button-dark { background:var(--ink); color:#fff; }
.button-small { padding:8px 11px; font-size:11px; }
.overview-grid { display:grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .72fr); gap:22px; align-items:start; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.panel-heading { padding: 19px 20px 17px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.panel-heading p { color:var(--ink-faint); font-size:11px; margin-top:5px; }
.panel-body { padding:20px; }
.project-list { display:grid; gap:10px; }
.project-row { border:1px solid var(--line); border-radius:11px; padding:15px 16px; display:flex; align-items:center; justify-content:space-between; gap:20px; transition:.18s ease; background:#fff; }
.project-row:hover { border-color:#c7d6d2; transform:translateY(-1px); box-shadow:0 9px 18px rgba(21,36,47,.05); }
.project-info { min-width:0; }
.project-title { font-weight:600; font-size:14px; margin-bottom:7px; }
.project-meta { color:var(--ink-faint); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-right { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.status { color:#4b7160; background:#edf7f0; padding:5px 8px; border-radius:5px; font: 500 10px "DM Mono", monospace; }
.project-date { color:var(--ink-faint); font: 400 10px "DM Mono", monospace; }
.metric-strip { display:grid; grid-template-columns: repeat(3, 1fr); border-top:1px solid var(--line); margin-top: 18px; }
.metric { padding:15px 18px 3px 0; }
.metric + .metric { padding-left:18px; border-left:1px solid var(--line); }
.metric-label { color:var(--ink-faint); font-size:10px; margin-bottom:8px; }
.metric-value { font:500 22px "DM Mono", monospace; letter-spacing:-.08em; }
.metric-note { font-size:10px; color:var(--ink-faint); margin-left:5px; }
.quick-card { padding:21px; background:var(--ink); color:#fff; border-radius:14px; position:relative; overflow:hidden; min-height: 233px; }
.quick-card:after { content:""; width:170px; height:170px; border:1px solid rgba(255,255,255,.11); border-radius:50%; position:absolute; right:-66px; bottom:-72px; box-shadow:0 0 0 23px rgba(255,255,255,.035), 0 0 0 46px rgba(255,255,255,.025); }
.quick-card .eyebrow { color:var(--coral); }
.quick-card h3 { font-size:20px; max-width:230px; line-height:1.2; margin-bottom:10px; }
.quick-card p { color:#aebbc1; font-size:12px; line-height:1.6; max-width:240px; }
.quick-card .button { margin-top:28px; position:relative; z-index:1; }
.billing-panel { margin-top:22px; border-color:#cfded9; background:linear-gradient(140deg,#f7fbf8 0%,#fdfcf8 80%); }.billing-panel .panel-heading { border-bottom-color:#dce8e3; }.billing-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.billing-metrics small { display:block; color:var(--ink-faint); font-size:10px; margin-bottom:6px; }.billing-metrics strong { font:600 18px "DM Mono",monospace; letter-spacing:-.05em; }.billing-metrics em { font:400 10px "DM Sans",sans-serif; color:var(--ink-faint); letter-spacing:0; }.quota-track { height:6px; margin-top:18px; border-radius:99px; background:#dfe9e3; overflow:hidden; }.quota-track span { display:block; height:100%; border-radius:99px; background:var(--coral); }.billing-note { margin-top:12px; color:var(--ink-soft); font-size:11px; line-height:1.6; }
.market-runs-panel { margin-top:22px; border-color:#d9e2ed; background:linear-gradient(140deg,#f7fafc 0%,#fffefa 80%); }.market-runs-panel .panel-heading { border-bottom-color:#e2e9ef; }.market-run-list { display:grid; gap:10px; }.market-run-row { display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--line); border-radius:10px; padding:13px 14px; background:#fff; }.market-run-row strong { font-size:12px; }.market-run-result { text-align:right; flex-shrink:0; }.market-run-result strong { display:block; color:#456d8b; font-size:11px; }.market-run-result span { display:block; color:var(--ink-faint); font-size:10px; margin-top:5px; }
.universal { margin-top:22px; border:1px solid #cfded9; background:linear-gradient(140deg,#f7fbf8 0%,#fdfcf8 80%); }
.universal .panel-heading { border-bottom-color:#dce8e3; }
.input-wrap { padding:20px; }
.input-wrap textarea { min-height: 125px; width:100%; resize:vertical; border:0; background:transparent; outline:0; color:var(--ink); font-size:14px; line-height:1.7; }
.input-wrap textarea::placeholder { color:#8b9a98; }
.input-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:15px; }
.input-hint { color:var(--ink-faint); font-size:11px; }
.input-tools { display:flex; align-items:center; gap:8px; }
.tool-chip { border:1px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:6px; padding:6px 8px; font-size:10px; }
.library-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.library-card { border:1px solid var(--line); border-radius:10px; padding:14px; background:#fff; }
.library-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.asset-symbol { width:31px; height:31px; display:grid; place-items:center; border-radius:8px; font-weight:700; font-size:13px; }
.character-headshot { width:56px; height:56px; display:block; border-radius:50%; object-fit:cover; object-position:center top; background:#f8dfd8; border:1px solid rgba(157,73,55,.18); }
.asset-symbol.character { background:#f8dfd8; color:#9d4937; }.asset-symbol.scene { background:#dce9f2; color:#456d8b; }.asset-symbol.product { background:#e3eddf; color:#4e7558; }
.library-card .label { color:var(--ink-faint); font-size:10px; margin-top:7px; }
.script-video-thumb { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:8px; margin-top:12px; background:#eef2f1; }
.library-card strong { font-size:13px; }
.card-link { display:block; width:100%; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; }
.card-link:hover strong { color:#456d8b; }
.product-detail-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.75fr); gap:22px; }
.product-description { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }.product-description small,.product-attributes small { display:block; color:var(--ink-faint); font-size:10px; margin-bottom:7px; }.product-description p { color:var(--ink-soft); font-size:12px; line-height:1.65; }
.product-attributes { margin-top:16px; }.product-attributes .raw-preview { max-height:120px; margin-top:8px; }
.asset-reference-list,.variant-list,.composition-list { display:grid; gap:9px; }.reference-row,.variant-row,.composition-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; }.reference-row { justify-content:flex-start; }.reference-row strong,.variant-row strong,.composition-row strong { font-size:11px; }.variant-row span { color:var(--ink-faint); font-size:10px; text-align:right; }.inline-field { margin-bottom:14px; }.composition-snapshot-panel { margin-bottom:16px; }.composition-flow { display:grid; gap:12px; }.composition-flow .info-item { display:flex; justify-content:space-between; align-items:center; gap:10px; }.composition-flow .info-item small { margin:0; }
.drop-upload { display:inline-flex; align-items:center; gap:6px; border:1px dashed #b8c9c1; border-radius:8px; padding:5px; transition:background .18s ease,border-color .18s ease; }.drop-upload.is-dragging { background:#eaf5ef; border-color:#6d9d8c; }.drop-upload-hint { color:var(--ink-faint); font-size:9px; }.asset-fill-panel { border:1px solid #c9ddd7; background:linear-gradient(140deg,#f2f8f4 0%,#fffefa 84%); }.asset-fill-panel .panel-body { display:grid; gap:0; }.asset-fill-panel textarea { width:100%; min-height:90px; resize:vertical; border:1px solid var(--line); border-radius:8px; padding:10px; font:12px/1.5 inherit; }.asset-fill-result { display:grid; gap:10px; margin-top:13px; padding:11px 12px; border-radius:8px; background:#f7f3eb; }.asset-fill-suggestions { display:grid; gap:6px; }.asset-fill-suggestions span { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--ink-soft); }.asset-fill-suggestions small { color:var(--ink-faint); font-family:"DM Mono",monospace; }.smart-fill-steps { display:flex; align-items:center; gap:7px; padding:11px 13px 0; color:var(--ink-faint); font-size:10px; }.smart-fill-step { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }.smart-fill-step b { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#e3eee8; color:#4d7569; font-size:10px; }.smart-fill-step.is-current { color:var(--ink); font-weight:600; }.smart-fill-step.is-current b { background:#4d7569; color:#fff; }.smart-fill-step-arrow { color:#b4c5bc; }.smart-fill-hint { margin-top:7px; color:var(--ink-faint); font-size:10px; }.asset-fill-panel [data-action="ai-fill"] { padding:8px 14px; font-size:11px; }.asset-fill-panel [data-action="ai-fill"]:disabled { opacity:.45; cursor:not-allowed; }.character-enrichment-images { display:grid; grid-template-columns:minmax(120px, .42fr) minmax(240px, 1fr); gap:12px; align-items:start; margin:10px 0 12px; }.character-enrichment-headshot,.character-enrichment-styling-panel { min-height:96px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; }.character-enrichment-headshot img,.character-enrichment-styling { display:block; width:100%; height:auto; object-fit:contain; }.character-enrichment-styling-panel { aspect-ratio:16/9; }.character-enrichment-styling-panel .character-enrichment-styling { height:100%; object-fit:cover; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }.smart-fill-trigger { display:inline-flex; align-items:center; gap:3px; border:1px solid #b8c9c1; border-radius:999px; padding:3px 7px; background:#f3f8f5; color:#4d7569; font-size:10px; line-height:1.2; cursor:pointer; white-space:nowrap; }.smart-fill-trigger:hover { background:#e6f2ec; border-color:#7da594; }.smart-fill-trigger:disabled { opacity:.55; cursor:wait; }
.character-enrichment-workspace-body { gap:0; }.character-enrichment-upload { position:relative; display:grid; justify-items:center; gap:8px; min-height:184px; padding:30px 22px; border:1px dashed #a9c8bb; border-radius:14px; background:linear-gradient(180deg,#fbfefc,#f3f8f5); text-align:center; transition:background .18s ease,border-color .18s ease,box-shadow .18s ease; }.character-enrichment-upload:hover,.character-enrichment-upload.is-dragging { border-color:#6d9d8c; background:#f0f8f3; box-shadow:0 8px 24px rgba(48,76,66,.07); }.character-enrichment-upload.is-busy { border-style:solid; border-color:#c9ddd7; background:#f8fbf9; }.character-enrichment-upload-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#e1eee7; color:#4d7569; font-size:20px; }.character-enrichment-upload strong { color:var(--ink); font-size:13px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.character-enrichment-upload span { color:var(--ink-faint); font-size:10px; }.character-enrichment-upload input { width:min(100%,280px); font-size:11px; }.character-enrichment-upload input:disabled { opacity:.55; }.character-enrichment-disclaimer { margin:10px 2px 14px; color:var(--ink-faint); font-size:10px; line-height:1.5; text-align:center; }.character-enrichment-idle-copy { display:grid; gap:4px; text-align:center; }.character-enrichment-idle-copy strong,.character-enrichment-complete-heading strong { color:var(--ink); font-size:12px; }.character-enrichment-idle-copy span,.character-enrichment-complete-heading span { color:var(--ink-faint); font-size:10px; }.character-enrichment-idle-action { display:flex; justify-content:center; margin-top:11px; }.character-enrichment-idle-action .button:disabled { opacity:.48; cursor:not-allowed; }.character-enrichment-waiting { display:grid; justify-items:center; gap:8px; min-height:168px; padding:22px 12px 12px; text-align:center; }.character-enrichment-waiting-orb { display:grid; place-items:center; width:48px; height:48px; border:1px solid #c9ddd7; border-radius:50%; background:#f7fbf8; }.character-enrichment-waiting-orb span { width:17px; height:17px; border:3px solid #d8e7df; border-top-color:#4d7569; border-radius:50%; animation:character-enrichment-spin .9s linear infinite; }.character-enrichment-waiting strong { color:var(--ink); font-size:13px; }.character-enrichment-waiting > span { color:var(--ink-faint); font-size:10px; }.character-enrichment-progress { display:grid; gap:9px; margin-top:2px; padding:13px 14px; border:1px solid #c9ddd7; border-radius:9px; background:#f7fbf8; }.character-enrichment-progress-heading { display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:11px; }.character-enrichment-progress-heading strong { flex:1; color:var(--ink); }.character-enrichment-progress-percent { color:#4d7569; font:500 11px "DM Mono",monospace; }.character-enrichment-spinner { width:13px; height:13px; display:inline-block; border:2px solid #d8e7df; border-top-color:#4d7569; border-radius:50%; animation:character-enrichment-spin .9s linear infinite; }.character-enrichment-progress-track { height:7px; overflow:hidden; border-radius:999px; background:#e1eee7; }.character-enrichment-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6d9d8c,#4d7569); transition:width .45s ease; }.character-enrichment-progress-meta { display:flex; justify-content:space-between; gap:10px; color:var(--ink-faint); font-size:10px; line-height:1.45; }.character-enrichment-progress[hidden], [data-character-enrichment-idle][hidden], [data-character-enrichment-busy][hidden], [data-character-enrichment-complete][hidden] { display:none !important; } .character-enrichment-complete-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:4px 0 10px; padding-top:6px; border-top:1px solid var(--line); }.character-enrichment-result-note { margin-top:13px; text-align:center; } @keyframes character-enrichment-spin { to { transform:rotate(360deg); } }
.character-flow-guide { display:grid; gap:12px; padding:15px 16px; border:1px solid #d8e5df; border-radius:11px; background:linear-gradient(135deg,#f5faf7,#fffefa); }.character-flow-guide-heading { display:flex; align-items:flex-start; gap:10px; }.character-flow-guide-heading strong { display:block; color:var(--ink); font-size:13px; }.character-flow-guide-heading p { margin-top:4px; color:var(--ink-faint); font-size:10px; line-height:1.5; }.step-badge { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:23px; border-radius:999px; background:#4d7569; color:#fff; font:600 10px "DM Mono",monospace; }.character-flow-mode-toggle { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:4px; border:1px solid #cfdfd8; border-radius:10px; background:#edf5f0; }.character-flow-mode { min-height:40px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink-faint); font-size:12px; font-weight:600; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease; }.character-flow-mode:hover { color:var(--ink); }.character-flow-mode.is-active { border-color:#a9c8bb; background:#fffefa; color:var(--ink); box-shadow:0 3px 9px rgba(48,76,66,.08); }.character-flow-mode-hint { margin:0; color:var(--ink-faint); font-size:10px; line-height:1.5; }.character-flow-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.character-flow-option { display:grid; gap:4px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }.character-flow-option.is-recommended { border-color:#a9c8bb; box-shadow:inset 3px 0 #6d9d8c; }.character-flow-option strong { font-size:11px; }.character-flow-option span:last-child { color:var(--ink-faint); font-size:10px; line-height:1.4; }.option-kicker { color:#4d7569; font:500 9px "DM Mono",monospace; }.field input[readonly] { background:#f5f8f6; color:#4d7569; cursor:not-allowed; }.character-enrichment-panel .panel-heading { background:rgba(255,255,255,.42); }.character-enrichment-panel .smart-fill-steps { padding-top:13px; }.character-base-outfit { display:grid; gap:10px; margin-top:13px; padding:13px; border:1px solid #d8e5df; border-radius:9px; background:#fbfdfb; }.character-base-outfit .field-group-heading { align-items:flex-start; }.character-base-outfit .field-group-heading strong { display:block; color:var(--ink); font-size:12px; }.character-base-outfit .field input { background:#fff; }
[data-character-photo-only][hidden], [data-character-manual-only][hidden] { display:none !important; }
.split-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.version { color:var(--ink-faint); font:10px "DM Mono", monospace; }
.project-view-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:26px; }
.back-link { color:var(--ink-faint); font-size:11px; display:inline-flex; gap:5px; align-items:center; border:0; background:none; padding:0; margin-bottom:13px; }
.project-view-header h1 { font-size:35px; }
.project-tabs { display:flex; gap: 26px; border-bottom:1px solid var(--line); overflow:auto; white-space:nowrap; margin-bottom:24px; }
.tab { border:0; background:none; color:var(--ink-faint); font-size:12px; padding:0 0 13px; position:relative; }
.tab.active { color:var(--ink); font-weight:600; }.tab.active:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--coral); }
.project-layout { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(280px,.7fr); gap:22px; }
.section-stack { display:grid; gap:16px; }.info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.info-item { padding:13px; background:#fbfaf6; border-radius:9px; }.info-item small { display:block; color:var(--ink-faint); font-size:10px; margin-bottom:8px; }.info-item span { font-size:12px; line-height:1.5; }
.clip-list { display:grid; gap:10px; }.clip-row { display:grid; grid-template-columns:70px 1fr auto; gap:15px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:14px; }.clip-time { font:500 12px "DM Mono", monospace; color:var(--ink-soft); }.clip-seq { color:var(--coral); font-size:10px; margin-bottom:5px; }.clip-title { font-size:13px; font-weight:600; margin-bottom:6px; }.clip-meta { color:var(--ink-faint); font-size:10px; }.clip-status { font-size:10px; color:var(--ink-faint); }.clip-status.approved { color:#4a7c60; }
.notes { background:#fff7e7; border-color:#efdfbd; }.notes .panel-heading { border-color:#f2e5cb; }.note-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }.note-list li { font-size:12px; line-height:1.55; display:flex; gap:9px; }.note-list li:before { content:"✦"; color:var(--coral); }
.raw-preview { background:var(--ink); color:#d4e0df; border-radius:10px; padding:17px; font:11px/1.7 "DM Mono", monospace; max-height:150px; overflow:auto; white-space:pre-wrap; }
.library-view { display:grid; gap:20px; }.library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }.filter-tabs { display:flex; gap:7px; }.filter-tab { border:1px solid var(--line); background:#fff; border-radius:6px; padding:7px 10px; color:var(--ink-faint); font-size:11px; }.filter-tab.active { color:var(--ink); border-color:var(--ink); }
.modal-backdrop { position:fixed; inset:0; background:rgba(21,36,47,.42); display:grid; place-items:center; z-index:30; padding:20px; }.modal { max-width:530px; width:100%; background:#fffefa; border-radius:15px; box-shadow:0 30px 70px rgba(21,36,47,.22); overflow:hidden; }.modal-heading { padding:20px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; }.modal-body { padding:22px; display:grid; gap:14px; max-height:78vh; overflow:auto; }.field { display:grid; gap:7px; }.field label { color:var(--ink-soft); font-size:11px; }.field input,.field textarea,.field select { width:100%; border:1px solid var(--line); border-radius:7px; padding:10px 11px; outline:0; font-size:12px; background:#fff; color:var(--ink); }.field select[multiple] { min-height:92px; }.field textarea { min-height:85px; resize:vertical; }.field input:focus,.field textarea:focus,.field select:focus { border-color:#9ebcb3; box-shadow:0 0 0 3px rgba(158,188,179,.15); }.field-hint { color:var(--ink-faint); font-size:10px; line-height:1.5; }.modal-actions { display:flex; justify-content:flex-end; gap:8px; padding:0 22px 22px; }.close-btn { border:0; background:none; color:var(--ink-faint); font-size:20px; line-height:1; }
.field-group { display:grid; gap:10px; padding:13px; border:1px solid var(--line); border-radius:9px; background:#fbfaf6; }.field-group-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }.field-group-heading strong { color:var(--ink-soft); font-size:11px; }.split-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.toast { position:fixed; right:22px; bottom:22px; background:var(--ink); color:#fff; border-radius:8px; padding:11px 14px; font-size:12px; box-shadow:0 12px 25px rgba(21,36,47,.16); z-index:40; animation:slide-in .25s ease; }.toast strong { color:var(--coral); margin-right:5px; }
@keyframes slide-in { from { transform:translateY(10px); opacity:0 } to { transform:translateY(0); opacity:1 } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; }.character-enrichment-spinner { animation:none; } }
.empty { text-align:center; color:var(--ink-faint); padding:35px 20px; font-size:12px; }
.sample-list { display:grid; gap:8px; padding:10px 12px; border-radius:8px; background:#f7f3eb; color:var(--ink-faint); font-size:10px; }.sample-list small { color:var(--ink-soft); font-size:10px; }.sample-list span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.saved-sample { display:grid; gap:5px; padding:7px; border:1px solid var(--line); border-radius:7px; background:#fff; }.saved-sample img { width:100%; max-height:180px; object-fit:contain; border-radius:5px; }.saved-sample audio,.character-generated-voice audio { width:100%; height:32px; }.character-generated-media { display:grid; gap:8px; margin-top:10px; padding:10px; border:1px solid #d8e5df; border-radius:8px; background:#fbfdfb; }.character-generated-media-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }.character-generated-styling { display:grid; gap:4px; }.character-generated-styling img { width:100%; max-height:180px; object-fit:contain; border-radius:6px; background:#fff; }.character-generated-voice { display:grid; gap:4px; }
.generation-jobs-panel { margin-bottom:16px; border-color:#d9e2ed; background:linear-gradient(140deg,#f7fafc 0%,#fffefa 80%); }.generation-job-list { display:grid; gap:10px; }.generation-job-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; }.generation-job-row strong { font-size:12px; }.generation-job-status { color:#456d8b; }.generation-job-status.queued { color:#946f32; }.generation-job-status.claimed,.generation-job-status.running { color:#456d8b; }.generation-job-status.succeeded { color:#4a7c60; }.generation-job-status.failed,.generation-job-status.cancelled { color:#a34e45; }
.video-jobs-panel { margin-bottom:16px; border-color:#c9ddd7; background:linear-gradient(140deg,#f1f8f4 0%,#fffefa 84%); }.video-job-list { display:grid; gap:10px; }.video-job-row { position:relative; display:grid; gap:9px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fff; }.video-job-main { min-width:0; }.video-job-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.video-job-status { font-size:12px; color:#456d8b; }.video-job-status.queued { color:#946f32; }.video-job-status.delivery_pending { color:#8b6537; }.video-job-status.completed { color:#4a7c60; }.video-job-status.failed,.video-job-status.cancelled { color:#a34e45; }.video-job-health { margin-top:8px; color:#8b6537; font-size:11px; }.video-job-progress { height:4px; overflow:hidden; border-radius:999px; background:#e8eee9; }.video-job-progress span { display:block; height:100%; border-radius:inherit; background:#6d9d8c; transition:width .25s ease; }.video-job-links { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }.video-job-thumbnail { display:block; width:72px; aspect-ratio:9/16; object-fit:cover; border-radius:7px; margin-top:10px; }
.rating-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; background:#eef5f1; border-radius:9px; }.rating-summary strong { display:block; font-size:20px; color:var(--ink); margin-top:4px; }.rating-summary small { color:var(--ink-faint); font-size:10px; }.rating-summary-note { grid-column:1/-1; color:var(--ink-soft); font-size:11px; line-height:1.5; }.rating-history { display:grid; gap:8px; padding:11px 12px; background:#f7f3eb; border-radius:8px; }.rating-history small { color:var(--ink-faint); font-size:10px; }.rating-history span { font-size:10px; color:var(--ink-soft); line-height:1.45; }
@media (max-width: 930px) { .app-shell { grid-template-columns: 72px minmax(0,1fr); }.sidebar { padding:22px 11px; align-items:center; }.brand { margin-bottom:45px; }.brand-copy,.nav-label,.storage-note,.storage-bar { display:none; }.nav-button { padding:12px; }.nav-button span:last-child { display:none; }.sidebar-bottom { width:100%; }.content { padding:34px 25px 70px; }.topbar { padding:0 25px; }.search-box { min-width:160px; }.overview-grid,.project-layout,.product-detail-grid { grid-template-columns:1fr; } }
@media (max-width: 620px) { .app-shell { display:block; }.sidebar { position:static; height:auto; min-height:0; display:flex; flex-direction:row; justify-content:space-between; padding:13px 16px; }.brand { margin:0; }.nav-label,.sidebar-bottom { display:none; }.nav { display:flex; }.nav-button { padding:9px; }.nav-button span:last-child { display:none; }.nav-button.active { background:rgba(255,255,255,.12); }.topbar { min-height:64px; padding:0 17px; }.breadcrumbs { display:none; }.search-box { min-width:0; flex:1; }.top-actions { width:100%; }.content { padding:27px 17px 60px; }.view-header { align-items:flex-start; flex-direction:column; margin-bottom:26px; }.view-header .button { width:100%; }.project-right { gap:7px; }.project-date { display:none; }.library-grid { grid-template-columns:1fr; }.project-view-header { flex-direction:column; }.project-view-header .button { width:100%; }.project-view-header h1 { font-size:29px; }.project-tabs { gap:20px; }.clip-row { grid-template-columns:58px 1fr; }.clip-status { grid-column:2; }.metric-value { font-size:18px; }.input-footer { align-items:flex-start; flex-direction:column; }.input-tools { width:100%; }.input-tools .button { flex:1; }.info-grid { grid-template-columns:1fr; }.billing-metrics { grid-template-columns:1fr; gap:13px; } }
@media (max-width: 620px) { .character-flow-options { grid-template-columns:1fr; }.character-enrichment-panel .smart-fill-steps { flex-wrap:wrap; row-gap:8px; }.character-enrichment-progress-meta { flex-direction:column; gap:3px; } }
.voice-generation-panel { margin-top:22px; border-color:#c9ddd7; background:linear-gradient(140deg,#f1f8f4 0%,#fffefa 84%); }
.voice-generation-panel .panel-heading { border-bottom-color:#dce8e3; }
.voice-generation-panel textarea { width:100%; min-height:108px; resize:vertical; border:1px solid #d9e6df; border-radius:10px; padding:12px 13px; outline:0; background:#fff; color:var(--ink); font-size:13px; line-height:1.65; }
.voice-generation-panel textarea:focus { border-color:#8eb6a5; box-shadow:0 0 0 3px rgba(142,182,165,.14); }
.voice-generation-actions { display:flex; justify-content:flex-end; margin-top:14px; }
.voice-generation-status { display:grid; gap:10px; margin-top:17px; padding:14px 15px; border:1px solid #c9ddd7; border-radius:10px; background:#f7fbf8; }
.voice-generation-status-heading { display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:11px; }
.voice-generation-status-heading strong { flex:1; color:var(--ink); font-size:12px; }
.voice-generation-status-heading > span:last-child { color:#4d7569; font:500 11px "DM Mono",monospace; }
.voice-generation-spinner { width:14px; height:14px; display:inline-block; border:2px solid #d8e7df; border-top-color:#4d7569; border-radius:50%; opacity:.6; }
.voice-generation-spinner.is-active { animation:voice-generation-spin .9s linear infinite; opacity:1; }
.voice-generation-progress-track { height:7px; overflow:hidden; border-radius:999px; background:#e1eee7; }
.voice-generation-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6d9d8c,#4d7569); transition:width .45s ease; }
.voice-generation-status-meta { display:flex; justify-content:space-between; gap:10px; color:var(--ink-faint); font-size:10px; line-height:1.45; }
.voice-generation-result { display:flex; align-items:center; gap:10px; margin-top:3px; padding-top:11px; border-top:1px solid #dce8e3; }
.voice-generation-result audio { flex:1; min-width:0; height:34px; }
.voice-generation-empty { margin-top:15px; padding:13px 14px; border:1px dashed #c9ddd7; border-radius:9px; color:var(--ink-faint); font-size:10px; line-height:1.55; background:rgba(255,255,255,.48); }
.character-enrichment-paste { display:grid; justify-items:center; gap:5px; margin-top:10px; padding:13px 16px; border:1px solid #d8e5df; border-radius:10px; background:#fffefa; color:var(--ink-faint); text-align:center; cursor:text; outline:0; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.character-enrichment-paste:hover, .character-enrichment-paste:focus, .character-enrichment-paste.is-dragging { border-color:#8eb6a5; background:#f7fbf8; box-shadow:0 0 0 3px rgba(142,182,165,.12); }
.character-enrichment-paste strong { color:var(--ink); font-size:11px; }
.character-enrichment-paste span:last-child { font-size:10px; }
.character-enrichment-paste-icon { color:#4d7569; font-size:16px; }
.character-enrichment-paste-actions { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:8px; color:var(--ink-faint); font-size:10px; }
.character-enrichment-voice-panel { margin:0 0 12px; padding:11px 12px; border:1px solid #d8e5df; border-radius:9px; background:#fbfdfb; }
.character-enrichment-voice { display:grid; grid-template-columns:auto minmax(150px,1fr) auto; align-items:center; gap:9px; }
.character-enrichment-voice strong { color:var(--ink); font-size:11px; }
.character-enrichment-voice audio { width:100%; min-width:0; height:32px; }
.library-card.is-archived { opacity:.78; background:#fafafa; }
.archived-characters-panel { margin-top:24px; }
@keyframes voice-generation-spin { to { transform:rotate(360deg); } }
.headshot-crop-editor { display:grid; gap:12px; margin-top:16px; padding:14px; border:1px solid #d8e5df; border-radius:10px; background:#fbfdfb; }
.headshot-crop-previews { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(150px,.75fr); gap:10px; align-items:start; }
.headshot-crop-source, .headshot-crop-result { min-height:116px; display:grid; place-items:center; overflow:hidden; border:1px dashed #c9ddd7; border-radius:9px; background:#f2f7f4; }
.headshot-crop-source img { display:block; width:100%; max-height:220px; object-fit:contain; }
.headshot-crop-result canvas { display:block; max-width:100%; max-height:220px; border-radius:7px; background:#fff; }
.headshot-crop-result .field-hint { padding:0 8px 7px; }
.headshot-crop-editor output { color:var(--ink-soft); font:500 10px "DM Mono",monospace; }
.headshot-crop-editor input[type="range"] { width:100%; accent-color:#4d7569; }
@media (max-width: 620px) { .headshot-crop-previews { grid-template-columns:1fr; } }

.voice-library-guide { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; padding:13px 15px; border:1px solid #d8e5df; border-radius:10px; background:#f5faf7; color:var(--ink-soft); font-size:11px; }
.voice-library-guide b { color:#9ab6aa; }
.voice-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.voice-profile-card { display:grid; gap:11px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fffefa; box-shadow:0 5px 16px rgba(48,76,66,.04); }
.voice-profile-card.is-disabled { opacity:.7; background:#f6f7f6; }
.voice-profile-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.voice-profile-card-heading h2 { margin-top:4px; color:var(--ink); font-size:15px; }
.voice-profile-card > p { min-height:33px; color:var(--ink-soft); font-size:11px; line-height:1.55; }
.voice-profile-meta { display:flex; gap:6px; flex-wrap:wrap; }
.voice-profile-meta span { padding:4px 7px; border-radius:999px; background:#edf5f0; color:#4d7569; font-size:10px; }
.voice-status { display:inline-flex; align-items:center; white-space:nowrap; padding:5px 8px; border-radius:999px; font-size:10px; }
.voice-status-ready { background:#e1f1e6; color:#4a7c60; }.voice-status-pending_review { background:#fff2d9; color:#946f32; }.voice-status-needs_configuration { background:#edf0f0; color:#6b7773; }.voice-status-disabled { background:#f8e4e1; color:#a34e45; }.voice-status-legacy { background:#e8edf4; color:#456d8b; }
.voice-profile-audio { width:100%; height:34px; }
.voice-preview-empty,.voice-profile-locked { padding:10px 11px; border:1px dashed #c9ddd7; border-radius:8px; background:#f8fbf9; color:var(--ink-faint); font-size:10px; line-height:1.45; }
.voice-profile-actions { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.character-voice-assignment { display:grid; gap:11px; margin-top:16px; padding:14px; border:1px solid #d8e5df; border-radius:10px; background:#fbfdfb; }
.voice-enable-row { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; border:1px solid #c9ddd7; border-radius:8px; background:#fff; cursor:pointer; }
.voice-enable-row input { margin-top:2px; accent-color:#4d7569; }.voice-enable-row span { display:grid; gap:3px; }.voice-enable-row strong { color:var(--ink); font-size:11px; }.voice-enable-row small { color:var(--ink-faint); font-size:10px; line-height:1.45; }
.voice-disabled-note,.voice-assignment-note { padding:10px 11px; border-radius:8px; background:#fff5e4; color:#8b6537; font-size:10px; line-height:1.5; }
.generation-voice-override { padding:11px 12px; border:1px dashed #c9ddd7; border-radius:9px; background:#fbfdfb; }
.character-enrichment-queue-panel { margin-bottom:22px; }.character-enrichment-active-summary { display:grid; gap:4px; margin-bottom:18px; padding:14px 16px; border:1px solid #d8e5df; border-radius:12px; background:#f7fbf8; }.character-enrichment-active-summary strong { color:var(--ink); font-size:15px; }.character-enrichment-active-summary span { color:var(--ink-faint); font-size:11px; }.character-enrichment-queue-list { display:grid; gap:14px; }.character-enrichment-active-job { padding:14px 16px; border:1px solid #d8e5df; border-radius:12px; background:#fffefa; }.character-enrichment-active-heading { display:flex; justify-content:space-between; gap:12px; color:#4d7569; font-size:12px; }.character-enrichment-active-heading strong { color:var(--ink); }.character-enrichment-active-body { display:flex; align-items:center; gap:14px; margin-top:12px; }.character-enrichment-progress-ring { --progress:0%; display:grid; place-items:center; flex:0 0 auto; width:58px; height:58px; border-radius:50%; background:conic-gradient(#4d7569 var(--progress),#e1eee7 0); }.character-enrichment-progress-ring::before { content:""; grid-area:1 / 1; width:44px; height:44px; border-radius:50%; background:#fffefa; }.character-enrichment-progress-ring span { grid-area:1 / 1; z-index:1; color:#4d7569; font:600 11px "DM Mono",monospace; }.character-enrichment-active-track { display:grid; gap:7px; flex:1; }.character-enrichment-active-track small { color:var(--ink-faint); font-size:10px; }.character-enrichment-recovery { display:grid; gap:12px; margin:0 0 18px; padding:13px 15px; border:1px solid #ead7b5; border-radius:12px; background:#fff9ed; }.character-enrichment-recovery > div:first-child { display:grid; gap:4px; }.character-enrichment-recovery strong { color:#795b2f; font-size:13px; }.character-enrichment-recovery span { color:#957b55; font-size:10px; }.character-enrichment-recovery-list { display:grid; gap:8px; }.character-enrichment-recovery-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:9px; border-top:1px solid #f0e3ca; color:#795b2f; font-size:11px; }.character-enrichment-recovery-row > div { display:flex; gap:7px; }
[hidden] { display:none !important; }
@media (max-width: 620px) { .voice-library-grid { grid-template-columns:1fr; }.voice-library-guide { align-items:flex-start; flex-direction:column; gap:5px; }.voice-library-guide b { display:none; } }
[data-image-zoom] { cursor:zoom-in; }
[data-image-zoom]:focus-visible { outline:2px solid #4d7569; outline-offset:3px; }
.character-enrichment-progress-ring.is-waiting { background:conic-gradient(#4d7569 0 26%,#e1eee7 26% 100%); animation:character-enrichment-spin 1.15s linear infinite; }
.character-enrichment-progress-track.is-waiting span { width:34% !important; animation:character-enrichment-sweep 1.6s ease-in-out infinite; }
.character-enrichment-progress-track.is-generating span { background:linear-gradient(90deg,#6d9d8c,#b7d1c7,#4d7569); background-size:220% 100%; animation:character-enrichment-glow 1.8s linear infinite; }
@keyframes character-enrichment-sweep { 0% { transform:translateX(-120%); opacity:.55; } 50% { opacity:1; } 100% { transform:translateX(320%); opacity:.65; } }
@keyframes character-enrichment-glow { 0% { background-position:100% 0; } 100% { background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce) { .character-enrichment-progress-ring.is-waiting,.character-enrichment-progress-track.is-waiting span,.character-enrichment-progress-track.is-generating span { animation:none; }.character-enrichment-progress-track.is-waiting span { transform:translateX(95%); opacity:1; }.character-enrichment-progress-track.is-generating span { background-position:0 0; } }
.image-lightbox { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; gap:10px; padding:30px; background:rgba(9,18,24,.88); cursor:zoom-out; }
.image-lightbox img { max-width:min(94vw,1600px); max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 20px 70px rgba(0,0,0,.45); background:#fff; cursor:default; }
.image-lightbox > span { color:rgba(255,255,255,.78); font-size:11px; }
.image-lightbox-close { position:absolute; top:18px; right:22px; width:38px; height:38px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(9,18,24,.58); color:#fff; font-size:25px; line-height:1; cursor:pointer; }