/* Cinematic manual-creation skin: visual layer only, no layout/flow changes. */
/* The manual studio is a full-screen workspace, not a card inside a light app. */
html.theme-dark body.studio-manual-mode,
html.theme-dark body.studio-manual-mode .phone-app,
html.theme-dark body.studio-manual-mode #appPanel,
html.theme-dark body.studio-manual-mode #appPanel .screen-body,
html.theme-dark body.studio-manual-mode #studioView {
  background: #090a0b !important;
}

html.theme-dark body.studio-manual-mode .phone-app {
  box-shadow: none !important;
}

html.theme-dark body.studio-manual-mode #appPanel .screen-body {
  padding: 0 0 calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

html.theme-dark body.studio-manual-mode #studioView::before {
  display: none !important;
}

html.theme-dark body.studio-manual-mode #studioView #personForm.manual-create-panel {
  --cinema-bg: #0b0c0d;
  --cinema-panel: rgba(19, 20, 21, 0.94);
  --cinema-panel-soft: rgba(27, 28, 29, 0.86);
  --cinema-line: rgba(237, 218, 177, 0.13);
  --cinema-muted: #928d84;
  --cinema-text: #f3eee5;
  --cinema-gold: #d9a957;
  --cinema-gold-soft: rgba(217, 169, 87, 0.14);
  position: relative;
  gap: 16px !important;
  padding: calc(58px + env(safe-area-inset-top, 0px)) 14px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(217, 169, 87, 0.10), transparent 32%),
    radial-gradient(circle at 10% 100%, rgba(158, 123, 75, 0.07), transparent 36%),
    var(--cinema-bg) !important;
  box-shadow: none !important;
  color: var(--cinema-text) !important;
}

html.theme-dark body.studio-manual-mode #studioView .manual-create-panel .hero-block {
  min-height: 42px !important;
  justify-content: flex-start !important;
  padding: 0 2px !important;
  background: transparent !important;
  border: 0 !important;
}

html.theme-dark body.studio-manual-mode #studioView .manual-create-panel .studio-model-trigger {
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid var(--cinema-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04) !important;
  color: var(--cinema-text) !important;
}

html.theme-dark body.studio-manual-mode #studioView .manual-create-panel .studio-model-trigger .status-dot { background: var(--cinema-gold) !important; box-shadow: 0 0 10px rgba(217, 169, 87, 0.8); }
html.theme-dark body.studio-manual-mode #studioView .manual-create-panel .studio-model-trigger .status-divider { background: var(--cinema-line) !important; }
html.theme-dark body.studio-manual-mode #studioView .manual-create-panel .studio-model-name,
html.theme-dark body.studio-manual-mode #studioView .manual-create-panel .duration-badge { color: var(--cinema-text) !important; -webkit-text-fill-color: var(--cinema-text) !important; }

html.theme-dark #studioView .manual-create-panel .prompt-block,
html.theme-dark #studioView .manual-create-panel .creator-panel {
  border: 1px solid var(--cinema-line) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(28, 29, 30, 0.95), rgba(16, 17, 18, 0.96)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), 0 16px 32px rgba(0, 0, 0, 0.17) !important;
}

html.theme-dark #studioView .manual-create-panel .prompt-block { padding: 18px !important; }
html.theme-dark #studioView .manual-create-panel .section-title { margin-bottom: 14px !important; }
html.theme-dark #studioView .manual-create-panel .section-title h3,
html.theme-dark #studioView .manual-create-panel .prompt-block .section-title h3,
html.theme-dark #studioView .manual-create-panel .creator-panel .section-title h3 {
  color: var(--cinema-text) !important;
  -webkit-text-fill-color: var(--cinema-text) !important;
  font-size: 18px !important;
  font-weight: 620 !important;
  letter-spacing: 0.01em;
}
html.theme-dark #studioView .manual-create-panel .title-hint { color: var(--cinema-muted) !important; -webkit-text-fill-color: var(--cinema-muted) !important; font-size: 11px !important; }

html.theme-dark #studioView .manual-create-panel .manual-prompt-editor textarea {
  min-height: 174px !important;
  padding: 21px 18px 62px !important;
  border: 1px dashed rgba(217, 169, 87, 0.27) !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at 50% 0%, rgba(217, 169, 87, 0.045), transparent 54%), #111213 !important;
  color: var(--cinema-text) !important;
  -webkit-text-fill-color: var(--cinema-text) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}
html.theme-dark #studioView .manual-create-panel .manual-prompt-editor textarea::placeholder { color: #77736d !important; -webkit-text-fill-color: #77736d !important; }
html.theme-dark #studioView .manual-create-panel .manual-prompt-editor textarea:focus { border-color: rgba(217, 169, 87, 0.62) !important; box-shadow: 0 0 0 4px rgba(217, 169, 87, 0.08), inset 0 1px 0 rgba(255,255,255,.03) !important; }

html.theme-dark #studioView .manual-create-panel .ai-prompt-button {
  right: 12px !important;
  bottom: 12px !important;
  border: 1px solid rgba(217, 169, 87, 0.34) !important;
  background: rgba(217, 169, 87, 0.10) !important;
  color: #eed39d !important;
  -webkit-text-fill-color: #eed39d !important;
  box-shadow: none !important;
}

html.theme-dark #studioView .manual-create-panel .manual-prompt-actions { gap: 7px !important; margin-top: 10px !important; }
html.theme-dark #studioView .manual-create-panel .manual-prompt-actions button {
  min-height: 30px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #aaa49b !important;
  -webkit-text-fill-color: #aaa49b !important;
  box-shadow: none !important;
  font-size: 11px !important;
}
html.theme-dark #studioView .manual-create-panel .manual-prompt-actions button:hover { color: #f0d59f !important; -webkit-text-fill-color: #f0d59f !important; background: rgba(217, 169, 87, 0.08) !important; }

html.theme-dark #studioView .manual-create-panel .creator-picks { gap: 8px !important; }
html.theme-dark #studioView .manual-create-panel .creator-pick,
html.theme-dark #studioView .manual-create-panel .creator-pick.voice-text-pick {
  min-height: 76px !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid var(--cinema-line) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgba(35, 36, 37, 0.95), rgba(22, 23, 24, 0.95)) !important;
  color: var(--cinema-text) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 18px rgba(0,0,0,.11) !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
html.theme-dark #studioView .manual-create-panel .creator-pick:hover { transform: translateY(-2px); border-color: rgba(217,169,87,.42) !important; }
html.theme-dark #studioView .manual-create-panel .creator-pick.active { border-color: rgba(217,169,87,.72) !important; background: linear-gradient(145deg, rgba(90, 67, 35, .65), rgba(27, 25, 21, .98)) !important; box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.05) !important; }
html.theme-dark #studioView .manual-create-panel .pick-icon,
html.theme-dark #studioView .manual-create-panel .creator-pick.voice-text-pick .pick-icon {
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(217,169,87,.10) !important;
  color: #e6bd73 !important;
  -webkit-text-fill-color: #e6bd73 !important;
  font-size: 15px !important;
}
html.theme-dark #studioView .manual-create-panel .creator-pick strong,
html.theme-dark #studioView .manual-create-panel .creator-pick.voice-text-pick strong { color: var(--cinema-text) !important; -webkit-text-fill-color: var(--cinema-text) !important; font-size: 13px !important; font-weight: 580 !important; }
html.theme-dark #studioView .manual-create-panel .pick-label { color: #a49d92 !important; -webkit-text-fill-color: #a49d92 !important; font-size: 10px !important; }

html.theme-dark #studioView .manual-create-panel .main-create-wrap { margin-top: 2px !important; }
html.theme-dark #studioView .manual-create-panel .main-create-button {
  min-height: 56px !important;
  border: 1px solid rgba(255, 225, 162, 0.48) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #9b651c, #e0b25d 52%, #ba7e2a) !important;
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  box-shadow: 0 14px 28px rgba(130, 80, 15, 0.32), inset 0 1px rgba(255,255,255,.28) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: .04em;
}
html.theme-dark #studioView .manual-create-panel .main-create-button:hover { filter: brightness(1.06); transform: translateY(-1px); }

html.theme-dark #studioView .manual-create-panel .video-template-category { border-color: var(--cinema-line) !important; background: rgba(255,255,255,.035) !important; color: #b8b0a5 !important; }
html.theme-dark #studioView .manual-create-panel .video-template-category.active { border-color: rgba(217,169,87,.68) !important; background: rgba(217,169,87,.16) !important; color: #f0d49a !important; }
html.theme-dark #studioView .manual-create-panel .video-template-card { border-color: var(--cinema-line) !important; background: linear-gradient(145deg, rgba(37,38,39,.96), rgba(20,21,22,.96)) !important; color: var(--cinema-text) !important; box-shadow: none !important; }
html.theme-dark #studioView .manual-create-panel .video-template-card > i { background: rgba(217,169,87,.12) !important; color: #e8bd6d !important; }
html.theme-dark #studioView .manual-create-panel .video-template-card p { color: var(--cinema-muted) !important; }
html.theme-dark #studioView .manual-create-panel .video-template-card small { color: #e9c477 !important; }

html.theme-dark #studioView .manual-create-panel .compact-settings label,
html.theme-dark #studioView .manual-create-panel .manual-asset-autopick,
html.theme-dark #studioView .manual-create-panel .video-look-panel,
html.theme-dark #studioView .manual-create-panel .upload-action,
html.theme-dark #studioView .manual-create-panel .asset-chip,
html.theme-dark #studioView .manual-create-panel .template {
  border-color: var(--cinema-line) !important;
  background: rgba(255,255,255,.028) !important;
  color: var(--cinema-text) !important;
  box-shadow: none !important;
}
html.theme-dark #studioView .manual-create-panel .compact-settings label span,
html.theme-dark #studioView .manual-create-panel .video-look-header span,
html.theme-dark #studioView .manual-create-panel .manual-asset-autopick small,
html.theme-dark #studioView .manual-create-panel .upload-action small { color: var(--cinema-muted) !important; -webkit-text-fill-color: var(--cinema-muted) !important; }
html.theme-dark #studioView .manual-create-panel select,
html.theme-dark #studioView .manual-create-panel input[type="number"] { background: #111213 !important; color: var(--cinema-text) !important; border-color: rgba(255,255,255,.08) !important; }

@media (max-width: 480px) {
  html.theme-dark body.studio-manual-mode #studioView .manual-create-panel { margin: 0 !important; padding: calc(54px + env(safe-area-inset-top, 0px)) 11px 16px !important; border-radius: 0 !important; }
  html.theme-dark #studioView .manual-create-panel .prompt-block { padding: 14px !important; }
  html.theme-dark #studioView .manual-create-panel .manual-prompt-editor textarea { min-height: 154px !important; }
  html.theme-dark #studioView .manual-create-panel .creator-pick { min-height: 70px !important; }
}

/* One dark-mode shell for every tab: graphite surfaces and a restrained gold focus. */
html.theme-dark,
html.theme-dark body,
html.theme-dark .phone-app,
html.theme-dark .app-screen,
html.theme-dark .screen-body,
html.theme-dark #worksView,
html.theme-dark #accountView,
html.theme-dark #studioView {
  background: #090a0b !important;
}

html.theme-dark .tabbar {
  background: rgba(14, 15, 16, 0.96) !important;
  background-image: none !important;
  border-top-color: rgba(237, 218, 177, 0.12) !important;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.025) !important;
}

html.theme-dark .tab-item {
  color: #938e86 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}

html.theme-dark .phone-app .tabbar .tab-item.active,
html.theme-dark .phone-app.phone-app .tabbar .tab-item.active {
  background: linear-gradient(135deg, rgba(181, 132, 51, 0.22), rgba(217, 169, 87, 0.10)) !important;
  border-color: rgba(217, 169, 87, 0.36) !important;
  color: #f0d6a1 !important;
  box-shadow: inset 0 1px rgba(255, 239, 204, 0.12), 0 7px 18px rgba(0, 0, 0, 0.2) !important;
}

html.theme-dark .phone-app .tabbar .tab-item.active :is(span, strong, small) {
  color: #f0d6a1 !important;
  -webkit-text-fill-color: #f0d6a1 !important;
}

html.theme-dark .phone-app .tabbar .tab-item.active .tab-graphic-icon {
  color: #e4b760 !important;
}

html.theme-dark .tab-item .tab-logo-icon img {
  filter: sepia(0.7) saturate(1.35) hue-rotate(350deg) brightness(1.1) !important;
}