@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root { font-family: 'Noto Sans SC', system-ui, sans-serif; --vb-ink: #18181b; --vb-line: #e7e7e7; --vb-muted: #8b8b8f; }
body { letter-spacing: 0; color: var(--vb-ink); }
.navbar { min-height: 4.5rem; }
.card { border-radius: .9rem; border-color: var(--vb-line); box-shadow: none; }
.card-body { padding: 1rem; }
#creator > .card { height: 100%; }
#creator .card-title { font-size: 1rem; line-height: 1.35; }
#creator .tab,
#creator .btn,
#creator .badge { font-size: .8125rem; }
#creator .tabs { margin-top: .75rem; }
#creator .avatar-option { font-size: .8125rem; }
#creator .voice-option { font-size: .8125rem; }
.workspace-nav { min-width: 0; }
.workspace-nav .tab { height: 3.5rem; color: var(--vb-muted); border-color: transparent; }
.workspace-nav .tab:hover { color: var(--vb-ink); }
.workspace-nav .tab-active { border-color: var(--vb-ink); color: var(--vb-ink); font-weight: 600; }
.workspace-nav .tab:focus-visible { outline: 2px solid var(--vb-ink); outline-offset: -4px; }
.textarea, .select { border-color: var(--vb-line); background: #fff; }
.textarea:focus, .select:focus { outline: 2px solid #d8d8da; outline-offset: 1px; }
.btn-neutral { background-color: var(--vb-ink); border-color: var(--vb-ink); }
.btn-neutral:hover { background-color: #303035; border-color: #303035; }
.badge-warning { color: #9a6700; }
.collapse { border-radius: .9rem; }
.alert { border-radius: .75rem; }
.lucide { stroke-width: 1.8; vertical-align: -0.15em; }
.avatar-option { cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.avatar-option:hover { transform: translateY(-2px); }
.avatar-option.selected { border-color: var(--vb-ink); box-shadow: 0 0 0 2px #e4e4e6; }
.voice-option { cursor: pointer; }
.voice-option.selected { border-color: var(--vb-ink); background: #fafafa; }
.empty-state { min-height: 18rem; place-items: center; align-content: center; gap: .55rem; border: 1px dashed var(--vb-line); border-radius: .9rem; color: var(--vb-muted); text-align: center; }
.empty-state:not(.hidden) { display: grid; }
.empty-state h2 { color: var(--vb-ink); font-weight: 600; }
.empty-state p { font-size: .875rem; }
.asset-preview { display: flex; min-height: 9rem; align-items: center; justify-content: center; position: relative; background: #f4f4f5; color: #71717a; border-radius: .9rem .9rem 0 0; }
.asset-preview .badge { position: absolute; top: .75rem; left: .75rem; }
@media (max-width: 640px) {
  .navbar { padding-inline: 1rem; }
  main { padding-inline: 1rem; }
  .navbar-end .btn { padding-inline: .5rem; }
  .navbar-end .btn:not(:has(i)) { display: none; }
  .workspace-nav > div { max-width: 42vw; scrollbar-width: none; }
  .workspace-nav > div::-webkit-scrollbar { display: none; }
  .workspace-nav .tab { min-width: max-content; padding-inline: 1rem; }
}