/* MioFlow-aligned visual layer for the drama workflow.
   Loaded after the legacy page styles so the existing behaviour stays intact. */

:root {
  --mio-bg: #0a0a0b;
  --mio-surface-1: #101012;
  --mio-surface-2: #151517;
  --mio-surface-3: #1b1b1e;
  --mio-surface-4: #222226;
  --mio-gold-300: #d7b56d;
  --mio-gold-400: #b8893f;
  --mio-gold-500: #936a2e;
  --mio-gold-600: #6f4d22;
  --mio-text-1: #f3f1ed;
  --mio-text-2: #bbb8b1;
  --mio-text-3: #7f7d78;
  --mio-success: #75a884;
  --mio-warning: #c6a15c;
  --mio-danger: #c46f6f;
  --mio-info: #8299b7;
  --mio-line-soft: rgba(255, 255, 255, .06);
  --mio-line: rgba(255, 255, 255, .09);
  --mio-line-strong: rgba(255, 255, 255, .14);
  --mio-focus: 0 0 0 3px rgba(184, 137, 63, .16);
  --mio-shadow-1: 0 10px 28px rgba(0, 0, 0, .24);
  --mio-shadow-2: 0 18px 46px rgba(0, 0, 0, .38);
  --mio-shadow-3: 0 28px 80px rgba(0, 0, 0, .58);
  --mio-font-sans: Inter, "SF Pro Display", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --mio-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --mio-ease: cubic-bezier(.22, 1, .36, 1);

  /* Legacy aliases: page scripts keep their current selectors while inheriting MioFlow. */
  --surface-0: var(--mio-bg);
  --surface-0-solid: var(--mio-surface-1);
  --surface-1: var(--mio-surface-1);
  --surface-1-solid: var(--mio-surface-2);
  --surface-2: var(--mio-surface-3);
  --surface-overlay: rgba(2, 2, 3, .86);
  --bg-deep: var(--mio-bg);
  --bg-panel: var(--mio-surface-1);
  --bg-panel-solid: var(--mio-surface-1);
  --bg-elevated: var(--mio-surface-3);
  --panel-bg: var(--mio-surface-1);
  --panel-bg-strong: var(--mio-surface-2);
  --panel-card: var(--mio-surface-2);
  --panel-hover: var(--mio-surface-3);
  --text-primary: var(--mio-text-1);
  --text-main: var(--mio-text-1);
  --text: var(--mio-text-1);
  --text-secondary: var(--mio-text-2);
  --text-sub: var(--mio-text-2);
  --text-muted: var(--mio-text-3);
  --text-tertiary: var(--mio-text-3);
  --muted: var(--mio-text-3);
  --color-brand: var(--mio-gold-400);
  --color-brand-light: var(--mio-gold-300);
  --color-brand-dark: var(--mio-gold-500);
  --color-success: var(--mio-success);
  --color-warning: var(--mio-warning);
  --color-danger: var(--mio-danger);
  --color-info: var(--mio-info);
  --accent-green: var(--mio-gold-400);
  --accent-cyan: var(--mio-info);
  --accent-purple: var(--mio-gold-400);
  --purple: var(--mio-gold-400);
  --purple-bright: var(--mio-gold-300);
  --purple-deep: var(--mio-gold-500);
  --purple-subtle: rgba(184, 137, 63, .10);
  --glow-lime: rgba(184, 137, 63, .16);
  --glow-lime-subtle: rgba(184, 137, 63, .08);
  --glow-cyan: rgba(130, 153, 183, .16);
  --glow-cyan-subtle: rgba(130, 153, 183, .08);
  --glow-pink: rgba(196, 111, 111, .16);
  --glow-pink-subtle: rgba(196, 111, 111, .08);
  --border-subtle: var(--mio-line-soft);
  --border-default: var(--mio-line);
  --border-strong: var(--mio-line-strong);
  --glass-border: var(--mio-line);
  --glass-border-hover: var(--mio-line-strong);
  --glass-border-light: var(--mio-line-strong);
  --line: var(--mio-line);
  --line-soft: var(--mio-line-soft);
  --line-hover: var(--mio-line-strong);
  --gradient-brand: linear-gradient(135deg, var(--mio-gold-300), var(--mio-gold-400));
  --gradient-brand-h: linear-gradient(90deg, var(--mio-gold-300), var(--mio-gold-400));
  --gradient-brand-soft: rgba(184, 137, 63, .08);
  --gradient-btn: var(--mio-gold-400);
  --gradient-primary: var(--mio-gold-400);
  --gradient-header: rgba(10, 10, 11, .96);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .2);
  --shadow-md: var(--mio-shadow-1);
  --shadow-lg: var(--mio-shadow-2);
  --shadow-xl: var(--mio-shadow-3);
  --shadow-brand: none;
  --shadow-purple: none;
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --transition-fast: 140ms var(--mio-ease);
  --transition-smooth: 220ms var(--mio-ease);
}

html::after { display: none !important; }

body.mio-drama-list,
body.mio-drama-detail,
body.mio-drama-canvas {
  color: var(--mio-text-1) !important;
  background: var(--mio-bg) !important;
  font-family: var(--mio-font-sans) !important;
  letter-spacing: 0;
}

body.mio-drama-list *,
body.mio-drama-detail *,
body.mio-drama-canvas * { font-family: inherit; }

body.mio-drama-list::before,
body.mio-drama-detail::before,
body.mio-drama-canvas::before { display: none !important; }

::selection { color: #18140e; background: var(--mio-gold-300); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(255, 255, 255, .13) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2) !important; }

button, a, input, textarea, select, [tabindex] {
  transition-duration: 140ms !important;
  transition-timing-function: var(--mio-ease) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--mio-gold-400) !important;
  outline-offset: 2px;
  box-shadow: var(--mio-focus) !important;
}

input, textarea, select, [contenteditable="true"] {
  color: var(--mio-text-1) !important;
  background: var(--mio-bg) !important;
  border-color: var(--mio-line-strong) !important;
  caret-color: var(--mio-gold-300);
}

input::placeholder, textarea::placeholder { color: var(--mio-text-3) !important; opacity: 1; }

input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus {
  border-color: rgba(184, 137, 63, .72) !important;
  box-shadow: var(--mio-focus) !important;
  outline: none;
}

/* Global 64px rail */
.mio-global-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1500;
  width: 64px;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) 62px;
  background: #0c0c0e;
  border-right: 1px solid var(--mio-line);
}

.mio-global-nav__brand,
.mio-global-nav__account {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mio-global-nav__brand img {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  object-fit: contain;
}

.mio-global-nav__items {
  min-height: 0;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: none;
}

.mio-global-nav__items::-webkit-scrollbar { display: none; }

.mio-global-nav__item {
  min-height: 44px;
  padding: 5px 2px 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--mio-text-3);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.mio-global-nav__item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mio-global-nav__item span { font-size: 9px; font-weight: 560; line-height: 1; }
.mio-global-nav__item:hover { color: var(--mio-text-2); background: rgba(255, 255, 255, .045); }
.mio-global-nav__item.is-active {
  color: var(--mio-gold-300);
  background: rgba(184, 137, 63, .10);
  border-color: rgba(184, 137, 63, .14);
}

.mio-global-nav__account .user-avatar {
  width: 30px !important;
  height: 30px !important;
  background-image: url("./avatar.png") !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid var(--mio-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Shared headers */
.mio-drama-detail > .top-header,
.mio-drama-canvas .top-header {
  height: 62px !important;
  margin-left: 64px;
  width: calc(100% - 64px) !important;
  padding: 0 18px !important;
  border-bottom: 1px solid var(--mio-line) !important;
  background: rgba(10, 10, 11, .94) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
}

.mio-drama-detail > .top-header::after,
.mio-drama-canvas .top-header::after { display: none !important; }

.mio-drama-detail .top-header .logo,
.mio-drama-canvas .top-header .logo,
.mio-drama-detail .top-header .divider,
.mio-drama-canvas .top-header .divider { display: none !important; }

.mio-drama-detail .header-left,
.mio-drama-canvas .header-left { gap: 14px !important; margin-right: 16px; }

.mio-drama-detail .header-right,
.mio-drama-canvas .header-right { margin-left: auto; }

.mio-drama-detail .back-btn,
.mio-drama-canvas .back-btn {
  height: 32px !important;
  padding: 0 11px !important;
  gap: 8px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
}

.mio-drama-detail .back-btn:hover,
.mio-drama-canvas .back-btn:hover {
  color: var(--mio-text-1) !important;
  border-color: var(--mio-line-strong) !important;
  background: var(--mio-surface-3) !important;
}

.mio-back-chevron { font: 22px/1 var(--mio-font-sans); transform: translateY(-1px); }

.mio-drama-detail .project-title,
.mio-drama-canvas .project-title {
  min-width: 0;
  padding: 0 !important;
  color: var(--mio-text-2) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 580 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

.mio-drama-detail .header-tabs,
.mio-drama-canvas .header-center {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 4px !important;
  gap: 4px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mio-drama-detail .header-tab,
.mio-drama-canvas .header-center > *,
.mio-drama-canvas .toggle-btn {
  min-height: 30px;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: var(--mio-text-3) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

.mio-drama-detail .header-tab:hover,
.mio-drama-canvas .header-center > *:hover { color: var(--mio-text-2) !important; background: rgba(255, 255, 255, .04) !important; }

.mio-drama-detail .header-tab.active,
.mio-drama-canvas .header-center > *.active,
.mio-drama-canvas .toggle-btn.active {
  color: #18140e !important;
  background: var(--mio-gold-400) !important;
  border-color: var(--mio-gold-400) !important;
  box-shadow: none !important;
}

.mio-drama-detail .user-avatar,
.mio-drama-canvas .top-header .user-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  border: 1px solid var(--mio-line-strong) !important;
  box-shadow: none !important;
}

/* List page */
.mio-drama-list > .sidebar,
.mio-drama-list #toolboxPanel,
.mio-drama-list #toolboxOverlay { display: none !important; }

.mio-drama-list .hero-banner {
  height: 238px !important;
  min-height: 238px;
  margin-left: 64px !important;
  padding: 42px 32px 32px !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  overflow: hidden;
  border-bottom: 1px solid var(--mio-line) !important;
  background: var(--mio-bg) !important;
}

.mio-drama-list .hero-banner::before {
  inset: auto 32px 0 32px !important;
  height: 1px !important;
  background: var(--mio-line) !important;
}

.mio-drama-list .hero-banner::after {
  display: block !important;
  inset: auto 30px 18px auto !important;
  width: 280px;
  height: 170px;
  opacity: .75 !important;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(184, 137, 63, .12) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(184, 137, 63, .12) 50%, transparent 50.3%);
  background-size: 32px 32px;
  mask-image: linear-gradient(135deg, transparent, #000);
}

.mio-drama-list .hero-content {
  flex: 0 0 auto !important;
  width: min(1680px, 100%);
  margin: 0 auto;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  transform: none !important;
  text-align: left;
}

.mio-drama-list .hero-eyebrow {
  margin-bottom: 10px;
  color: var(--mio-gold-400);
  font: 600 11px/1 var(--mio-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mio-drama-list .hero-content h1 {
  margin: 0 0 12px !important;
  color: var(--mio-text-1) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 32px !important;
  line-height: 1.25;
  font-weight: 650 !important;
  letter-spacing: -.025em;
}

.mio-drama-list .hero-description {
  max-width: 620px;
  margin-bottom: 22px;
  color: var(--mio-text-2);
  font-size: 14px;
  line-height: 1.55;
}

.mio-drama-list .start-btn {
  height: 40px !important;
  padding: 0 20px !important;
  border: 1px solid var(--mio-gold-400) !important;
  border-radius: 7px !important;
  color: #18140e !important;
  background: var(--mio-gold-400) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.mio-drama-list .start-btn:hover { background: var(--mio-gold-300) !important; border-color: var(--mio-gold-300) !important; transform: translateY(-1px) !important; }

.mio-drama-list .main-container {
  width: auto !important;
  max-width: none !important;
  margin: 0 0 0 64px !important;
  padding: 30px 32px 72px !important;
}

.mio-drama-list .main-container > * { max-width: 1680px; margin-left: auto; margin-right: auto; animation: none !important; }

.mio-drama-list .toolbar {
  min-height: 48px;
  margin-bottom: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.mio-drama-list .toolbar-left h2 { color: var(--mio-text-1) !important; font-size: 16px !important; font-weight: 620 !important; }
.mio-drama-list .toolbar-left > svg { color: var(--mio-gold-400); }
.mio-drama-list .toolbar-left > svg path { fill: currentColor !important; }
.mio-drama-list .toolbar-right { gap: 8px !important; }

.mio-drama-list .search-box,
.mio-drama-list .team-select-wrap,
.mio-drama-list .tool-item {
  height: 36px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mio-drama-list .search-box { width: 220px; }
.mio-drama-list .team-select-wrap select { height: 34px !important; color: var(--mio-text-2) !important; background: transparent !important; }

.mio-drama-list .project-grid { grid-template-columns: repeat(4, minmax(220px, 1fr)) !important; gap: 16px !important; }

.mio-drama-list .project-card {
  overflow: visible !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mio-drama-list .project-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--mio-line-strong) !important;
  box-shadow: var(--mio-shadow-1) !important;
}

.mio-drama-list .project-card.is-series::before,
.mio-drama-list .project-card.is-series::after { border-color: var(--mio-line) !important; background: var(--mio-surface-1) !important; }

.mio-drama-list .card-cover {
  aspect-ratio: 16 / 9;
  height: auto !important;
  overflow: hidden;
  border-radius: 9px 9px 0 0 !important;
  background: #0c0c0e !important;
}

.mio-drama-list .project-card:hover .card-cover { transform: none !important; }
.mio-drama-list .card-cover::after { display: none !important; }
.mio-drama-list .card-info { min-height: 92px; padding: 14px 15px 15px !important; background: transparent !important; }
.mio-drama-list .card-info h3 { color: var(--mio-text-1) !important; font-size: 14px !important; font-weight: 620 !important; }
.mio-drama-list .card-meta { color: var(--mio-text-3) !important; font: 12px/1.4 var(--mio-font-mono) !important; }

/* List modal */
.mio-drama-list .modal-overlay {
  background: rgba(2, 5, 14, .85) !important;
  backdrop-filter: blur(8px) !important;
}

.mio-drama-list .modal-box {
  width: min(560px, calc(100vw - 32px)) !important;
  max-height: min(820px, calc(100vh - 32px)) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: var(--mio-surface-1) !important;
  box-shadow: var(--mio-shadow-3) !important;
}

.mio-drama-list .modal-header { height: 52px; padding: 0 20px !important; border-bottom: 1px solid var(--mio-line) !important; background: transparent !important; }
.mio-drama-list .modal-header h3 { color: var(--mio-text-1) !important; font-size: 14px !important; font-weight: 650 !important; }
.mio-drama-list .modal-scroll-area { padding: 18px 20px !important; }
.mio-drama-list .form-label-title { color: var(--mio-text-2) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em; }

.mio-drama-list .mode-card,
.mio-drama-list .style-card,
.mio-drama-list .cover-upload-box {
  border-color: var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-bg) !important;
  box-shadow: none !important;
}

.mio-drama-list .mode-card:hover,
.mio-drama-list .style-card:hover { border-color: var(--mio-line-strong) !important; transform: translateY(-1px) !important; }

.mio-drama-list .mode-card.selected,
.mio-drama-list .style-card.selected {
  border-color: rgba(184, 137, 63, .50) !important;
  background: rgba(184, 137, 63, .08) !important;
  box-shadow: none !important;
}

.mio-drama-list .mode-card.selected .mode-card-title,
.mio-drama-list .mode-card.selected .mode-card-icon,
.mio-drama-list .style-card.selected .style-card-label { color: var(--mio-gold-300) !important; }
.mio-drama-list .mode-card-badge { color: var(--mio-gold-300) !important; border-color: rgba(184, 137, 63, .28) !important; background: rgba(184, 137, 63, .10) !important; }
.mio-drama-list .modal-footer { border-top: 1px solid var(--mio-line) !important; background: var(--mio-surface-1) !important; }
.mio-drama-list .btn-primary { color: #18140e !important; border-color: var(--mio-gold-400) !important; background: var(--mio-gold-400) !important; box-shadow: none !important; }
.mio-drama-list .btn-primary:hover { background: var(--mio-gold-300) !important; transform: translateY(-1px) !important; }

/* Detail page */
.mio-drama-detail > .workspace {
  margin-left: 64px;
  width: calc(100% - 64px);
  padding: 24px 32px 72px !important;
  background: var(--mio-bg) !important;
}

.mio-drama-detail .tab-panel { width: min(1680px, 100%); margin: 0 auto; }

.mio-drama-detail .toolbar {
  min-height: 52px;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mio-drama-detail .filters {
  padding: 4px !important;
  gap: 3px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-surface-1) !important;
}

.mio-drama-detail .filter-btn {
  height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: var(--mio-text-3) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mio-drama-detail .filter-btn:hover { color: var(--mio-text-2) !important; background: rgba(255, 255, 255, .035) !important; }
.mio-drama-detail .filter-btn.active { color: #18140e !important; border-color: var(--mio-gold-400) !important; background: var(--mio-gold-400) !important; box-shadow: none !important; }

.mio-drama-detail .search-box,
.mio-drama-detail .btn-outline,
.mio-drama-detail .ep-trash-btn,
.mio-drama-detail .gen-btn-group {
  height: 36px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
}

.mio-drama-detail .btn-outline:hover,
.mio-drama-detail .ep-trash-btn:hover { color: var(--mio-text-1) !important; border-color: var(--mio-line-strong) !important; background: var(--mio-surface-3) !important; transform: none !important; }

.mio-drama-detail .btn-primary,
.mio-drama-detail .gen-btn-main,
.mio-drama-detail .btn-add-empty,
.mio-drama-detail .gen-now-btn {
  height: 36px !important;
  border-color: var(--mio-gold-400) !important;
  border-radius: 7px !important;
  color: #18140e !important;
  background: var(--mio-gold-400) !important;
  box-shadow: none !important;
}

.mio-drama-detail .btn-primary:hover,
.mio-drama-detail .gen-btn-main:hover,
.mio-drama-detail .btn-add-empty:hover { background: var(--mio-gold-300) !important; transform: translateY(-1px) !important; }

.mio-drama-detail .asset-grid { gap: 16px !important; }
.mio-drama-detail .asset-grid.episodes { grid-template-columns: repeat(4, minmax(220px, 1fr)) !important; }
.mio-drama-detail .asset-grid.chars,
.mio-drama-detail .asset-grid.scenes,
.mio-drama-detail .asset-grid.props { grid-template-columns: repeat(5, minmax(180px, 1fr)) !important; }

.mio-drama-detail .asset-card,
.mio-drama-detail .acard {
  overflow: hidden;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}

.mio-drama-detail .asset-card:hover,
.mio-drama-detail .acard:hover {
  transform: translateY(-1px) !important;
  border-color: var(--mio-line-strong) !important;
  box-shadow: var(--mio-shadow-1) !important;
}

.mio-drama-detail .asset-card .card-meta,
.mio-drama-detail .acard-meta { min-height: 52px; padding: 12px 14px !important; border-top: 1px solid var(--mio-line-soft); background: var(--mio-surface-2) !important; }
.mio-drama-detail .asset-card .card-meta h4,
.mio-drama-detail .acard-meta h4 { color: var(--mio-text-1) !important; font-size: 13px !important; font-weight: 620 !important; }
.mio-drama-detail .asset-card .card-meta p { color: var(--mio-text-3) !important; font-family: var(--mio-font-mono) !important; }
.mio-drama-detail .ep-status-badge { border-radius: 5px !important; box-shadow: none !important; backdrop-filter: blur(8px); }
.mio-drama-detail .status-done { color: var(--mio-success) !important; border-color: rgba(117, 168, 132, .28) !important; background: rgba(16, 24, 18, .84) !important; }
.mio-drama-detail .status-doing { color: var(--mio-info) !important; border-color: rgba(130, 153, 183, .28) !important; background: rgba(15, 19, 25, .86) !important; }
.mio-drama-detail .status-todo { color: var(--mio-text-2) !important; border-color: var(--mio-line) !important; background: rgba(15, 15, 16, .86) !important; }
.mio-drama-detail .acard.is-pending { border-style: solid !important; }
.mio-drama-detail .acard-ph { color: var(--mio-text-3) !important; background: #0c0c0e !important; }
.mio-drama-detail .panel-empty-view { color: var(--mio-text-2); }
.mio-drama-detail .empty-illus svg * { fill: rgba(184, 137, 63, .07) !important; stroke: rgba(184, 137, 63, .28) !important; }
.mio-drama-detail .empty-title { color: var(--mio-text-1) !important; font-size: 16px !important; font-weight: 620 !important; }
.mio-drama-detail .empty-desc { color: var(--mio-text-3) !important; }

/* Detail editors and dialogs */
.mio-drama-detail .modal-bd { backdrop-filter: blur(8px); }

.mio-drama-detail .modal-bd { background: rgba(2, 5, 14, .85) !important; }
.mio-drama-detail .modal-bd > .modal-box {
  width: min(1152px, 96vw) !important;
  height: 84vh !important;
  max-height: 900px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: var(--mio-surface-1) !important;
  box-shadow: var(--mio-shadow-3) !important;
}

.mio-drama-detail .ep-modal-box {
  width: min(480px, calc(100vw - 32px)) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: var(--mio-surface-1) !important;
  box-shadow: var(--mio-shadow-3) !important;
}

.mio-drama-detail .modal-hd { height: 48px !important; padding: 0 20px !important; border-bottom: 1px solid var(--mio-line) !important; background: var(--mio-surface-1) !important; }
.mio-drama-detail .modal-title { color: var(--mio-text-1) !important; font-size: 14px !important; font-weight: 650 !important; }
.mio-drama-detail .modal-left { width: 46% !important; max-width: 500px; border-right: 1px solid var(--mio-line) !important; background: rgba(0, 0, 0, .14) !important; }
.mio-drama-detail .modal-prev-frame { border-color: var(--mio-line) !important; border-radius: 10px !important; background: var(--mio-bg) !important; }
.mio-drama-detail .modal-ctrl { background: var(--mio-surface-1) !important; }
.mio-drama-detail .modal-ctrl-foot,
.mio-drama-detail .modal-ft { border-top: 1px solid var(--mio-line) !important; background: var(--mio-surface-1) !important; }
.mio-drama-detail .modal-asset-tab.active { color: var(--mio-gold-300) !important; border-bottom-color: var(--mio-gold-400) !important; }
.mio-drama-detail .modal-hist-badge,
.mio-drama-detail .modal-applied-pill { color: var(--mio-gold-300) !important; border-color: rgba(184, 137, 63, .28) !important; background: rgba(184, 137, 63, .10) !important; }
.mio-drama-detail .gen-popover { border: 1px solid var(--mio-line) !important; border-radius: 10px !important; background: var(--mio-surface-2) !important; box-shadow: var(--mio-shadow-2) !important; }

.mio-drama-detail .m-upload-zone {
  border: 1px dashed var(--mio-line-strong) !important;
  border-radius: 10px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-bg) !important;
}

.mio-drama-detail .m-upload-zone:hover { border-color: rgba(184, 137, 63, .52) !important; background: rgba(184, 137, 63, .045) !important; }
.mio-drama-detail .m-upload-zone-icon { color: var(--mio-gold-300) !important; border-color: rgba(184, 137, 63, .24) !important; border-radius: 10px !important; background: rgba(184, 137, 63, .08) !important; }
.mio-drama-detail .m-upload-zone-title { color: var(--mio-text-2) !important; }
.mio-drama-detail .m-upload-zone-sub { color: var(--mio-text-3) !important; }

.mio-drama-detail .btn-save,
.mio-drama-detail .btn-gen,
.mio-drama-detail .gen-pop-save-btn {
  border: 1px solid var(--mio-gold-400) !important;
  border-radius: 7px !important;
  color: #18140e !important;
  background: var(--mio-gold-400) !important;
  box-shadow: none !important;
}

.mio-drama-detail .btn-save:hover,
.mio-drama-detail .btn-gen:hover,
.mio-drama-detail .gen-pop-save-btn:hover { background: var(--mio-gold-300) !important; filter: none !important; transform: translateY(-1px) !important; }

.mio-drama-detail .btn-cancel { border-color: var(--mio-line) !important; border-radius: 7px !important; color: var(--mio-text-2) !important; background: var(--mio-surface-2) !important; }
.mio-drama-detail .btn-cancel:hover { border-color: var(--mio-line-strong) !important; color: var(--mio-text-1) !important; background: var(--mio-surface-3) !important; }

.mio-drama-detail .modal-x,
.mio-drama-detail .m-upload-preview-del {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}
.mio-drama-detail .modal-x:hover,
.mio-drama-detail .m-upload-preview-del:hover { border-color: var(--mio-line-strong) !important; color: var(--mio-text-1) !important; background: var(--mio-surface-3) !important; }

.mio-drama-detail .batch-bar {
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: rgba(21, 21, 23, .96) !important;
  box-shadow: var(--mio-shadow-2) !important;
  backdrop-filter: blur(18px) !important;
}

.mio-drama-detail .acard.batch-selected,
.mio-drama-detail .asset-card.batch-selected { border-color: rgba(184, 137, 63, .62) !important; box-shadow: var(--mio-focus) !important; }

/* Script management workspace */
.mio-drama-script > .workspace {
  padding: 16px 20px 20px !important;
  overflow: hidden !important;
}

.mio-drama-script .header-tab { text-decoration: none; }

.mio-drama-script .script-upload-view {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 48px 32px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
}

.mio-drama-script .empty-illus { margin-bottom: 18px !important; }
.mio-drama-script .empty-illus svg * { fill: rgba(184, 137, 63, .07) !important; stroke: rgba(184, 137, 63, .28) !important; }
.mio-drama-script .empty-title { margin-bottom: 9px !important; color: var(--mio-text-1) !important; font-size: 18px !important; font-weight: 620 !important; }
.mio-drama-script .empty-desc { margin-bottom: 24px !important; color: var(--mio-text-3) !important; font-size: 13px !important; line-height: 1.7 !important; }

.mio-drama-script .btn-parse {
  min-width: 132px;
  height: 40px !important;
  padding: 0 20px !important;
  border: 1px solid var(--mio-gold-400) !important;
  border-radius: 7px !important;
  color: #18140e !important;
  background: var(--mio-gold-400) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.mio-drama-script .btn-parse:hover { border-color: var(--mio-gold-300) !important; background: var(--mio-gold-300) !important; filter: none !important; transform: translateY(-1px); box-shadow: none !important; }

.mio-drama-script .btn-outline {
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}

.mio-drama-script .btn-outline:hover { color: var(--mio-text-1) !important; border-color: var(--mio-line-strong) !important; background: var(--mio-surface-3) !important; transform: none !important; }

.mio-drama-script .script-parsing-view {
  width: min(600px, 100%);
  margin: 0 auto;
  padding: 44px 32px !important;
  gap: 22px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px;
  background: var(--mio-surface-1);
}

.mio-drama-script .parsing-ring { width: 44px !important; height: 44px !important; border-color: var(--mio-line-strong) !important; border-top-color: var(--mio-gold-400) !important; }
.mio-drama-script .parsing-title { color: var(--mio-text-1) !important; font-size: 16px !important; font-weight: 620 !important; }
.mio-drama-script .parsing-subtitle { color: var(--mio-text-3) !important; }
.mio-drama-script .parsing-steps { gap: 7px !important; }
.mio-drama-script .parsing-step {
  min-height: 40px;
  padding: 8px 12px !important;
  border: 1px solid var(--mio-line-soft) !important;
  border-radius: 7px !important;
  color: var(--mio-text-3) !important;
  background: var(--mio-bg) !important;
}
.mio-drama-script .parsing-step.step-active { color: var(--mio-text-1) !important; border-color: rgba(184, 137, 63, .32) !important; background: rgba(184, 137, 63, .07) !important; }
.mio-drama-script .parsing-step.step-done { color: var(--mio-success) !important; border-color: rgba(117, 168, 132, .24) !important; background: rgba(117, 168, 132, .06) !important; }
.mio-drama-script .step-dot { border-radius: 5px !important; color: var(--mio-text-3) !important; background: var(--mio-surface-3) !important; }
.mio-drama-script .parsing-step.step-active .step-dot { color: #18140e !important; background: var(--mio-gold-400) !important; animation: none !important; }
.mio-drama-script .parsing-step.step-done .step-dot { color: #101411 !important; background: var(--mio-success) !important; }

.mio-drama-script .script-layout {
  gap: 16px !important;
  width: 100%;
  min-width: 0;
}

.mio-drama-script .script-left,
.mio-drama-script .script-mid,
.mio-drama-script .script-right {
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mio-drama-script .script-left { width: 230px !important; }
.mio-drama-script .sl-header,
.mio-drama-script .sm-header {
  min-height: 52px;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--mio-line) !important;
  background: var(--mio-surface-1) !important;
}

.mio-drama-script .sl-header > span,
.mio-drama-script #scriptHeaderTitle { color: var(--mio-text-1) !important; font-size: 14px !important; font-weight: 620 !important; }
.mio-drama-script .sl-list { padding: 8px !important; }
.mio-drama-script .script-switch-btn { width: 100%; border: 1px solid transparent; border-left-width: 1px !important; border-radius: 7px; background: transparent; font-family: inherit; text-align: left; }
.mio-drama-script .sl-item { min-height: 52px; padding: 8px 10px !important; border-left: 1px solid transparent !important; border-radius: 7px; }
.mio-drama-script .sl-item:hover { border-color: var(--mio-line-soft) !important; background: rgba(255, 255, 255, .035) !important; }
.mio-drama-script .sl-item.active { border-color: rgba(184, 137, 63, .20) !important; background: rgba(184, 137, 63, .09) !important; }
.mio-drama-script .sl-item-node { width: 25px !important; height: 25px !important; border: 1px solid var(--mio-line) !important; border-radius: 7px !important; color: var(--mio-text-3) !important; background: var(--mio-surface-3) !important; font-family: var(--mio-font-mono) !important; }
.mio-drama-script .sl-item.active .sl-item-node { color: var(--mio-gold-300) !important; border-color: rgba(184, 137, 63, .36) !important; background: rgba(184, 137, 63, .11) !important; }
.mio-drama-script .sl-item-info h4 { width: 150px !important; color: var(--mio-text-2) !important; font-size: 12px !important; font-weight: 580 !important; }
.mio-drama-script .sl-item.active .sl-item-info h4 { color: var(--mio-text-1) !important; }
.mio-drama-script .sl-item-info p { color: var(--mio-text-3) !important; }

.mio-drama-script .script-mid { border-radius: 14px !important; }
.mio-drama-script .sm-actions { gap: 8px !important; }
.mio-drama-script .sm-actions .btn-outline { height: 32px !important; font-size: 12px !important; }
.mio-drama-script .sm-content { padding: 24px 28px !important; background: #0d0d0f; }

.mio-drama-script .script-intro {
  margin-bottom: 24px !important;
  padding: 20px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}
.mio-drama-script .intro-eyebrow { color: var(--mio-gold-400) !important; font: 600 10px/1 var(--mio-font-mono) !important; }
.mio-drama-script .intro-title { color: var(--mio-text-1) !important; font-size: 22px !important; font-weight: 650 !important; }
.mio-drama-script .intro-badge { padding: 4px 8px !important; border: 1px solid rgba(184, 137, 63, .28) !important; border-radius: 999px !important; color: var(--mio-gold-300) !important; background: rgba(184, 137, 63, .09) !important; }
.mio-drama-script .intro-summary { color: var(--mio-text-2) !important; line-height: 1.75 !important; }

.mio-drama-script .script-section { margin-bottom: 28px !important; }
.mio-drama-script .script-section + .script-section { border-top-color: var(--mio-line) !important; }
.mio-drama-script .section-heading { margin-bottom: 12px !important; color: var(--mio-text-1) !important; }
.mio-drama-script .section-heading h3 { font-size: 16px !important; font-weight: 620 !important; }
.mio-drama-script .section-icon { width: 28px !important; height: 28px !important; border: 1px solid rgba(184, 137, 63, .24) !important; border-radius: 7px !important; color: var(--mio-gold-300) !important; background: rgba(184, 137, 63, .08) !important; }

.mio-drama-script .section-card,
.mio-drama-script .insight-item,
.mio-drama-script .storyboard-card,
.mio-drama-script .raw-script-shell {
  padding: 16px 18px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}
.mio-drama-script .section-card + .section-card { margin-top: 12px !important; }
.mio-drama-script .section-subtitle,
.mio-drama-script .insight-item strong,
.mio-drama-script .storyboard-card h4,
.mio-drama-script .storyboard-group-title,
.mio-drama-script .storyboard-scene-title { color: var(--mio-text-1) !important; font-weight: 620 !important; }
.mio-drama-script .section-text,
.mio-drama-script .bullet-list li,
.mio-drama-script .storyboard-card li { color: var(--mio-text-2) !important; line-height: 1.75 !important; }
.mio-drama-script .section-text strong,
.mio-drama-script .bullet-list strong { color: var(--mio-text-1) !important; }
.mio-drama-script .bullet-list li::before,
.mio-drama-script .storyboard-card li::before { background: var(--mio-gold-400) !important; box-shadow: none !important; }
.mio-drama-script .storyboard-card li span { color: var(--mio-gold-300) !important; }

.mio-drama-script .episode-section { margin-bottom: 36px !important; }
.mio-drama-script .ep-section-header { border-bottom-color: var(--mio-line) !important; }
.mio-drama-script .ep-num-badge { border-color: rgba(184, 137, 63, .30) !important; border-radius: 7px !important; color: var(--mio-gold-300) !important; background: rgba(184, 137, 63, .09) !important; font-family: var(--mio-font-mono) !important; }
.mio-drama-script .ep-section-title { color: var(--mio-text-1) !important; }
.mio-drama-script .ep-section-sub { color: var(--mio-text-3) !important; font-family: var(--mio-font-mono) !important; }
.mio-drama-script .ep-section-summary { color: var(--mio-text-2) !important; border-left-color: rgba(184, 137, 63, .42) !important; border-radius: 7px !important; background: var(--mio-surface-2) !important; }
.mio-drama-script .shots-container { border-left-color: var(--mio-line-strong) !important; }
.mio-drama-script .shot-row { border-bottom-color: var(--mio-line-soft) !important; }
.mio-drama-script .shot-row::before { border-color: var(--mio-line-strong) !important; background: var(--mio-surface-3) !important; }
.mio-drama-script .shot-num { color: var(--mio-text-3) !important; font-family: var(--mio-font-mono) !important; }
.mio-drama-script .shot-tag { border: 1px solid var(--mio-line) !important; border-radius: 4px !important; color: var(--mio-text-2) !important; background: var(--mio-surface-3) !important; }
.mio-drama-script .tag-scene { color: var(--mio-info) !important; border-color: rgba(130, 153, 183, .24) !important; background: rgba(130, 153, 183, .08) !important; }
.mio-drama-script .tag-mood { color: var(--mio-warning) !important; border-color: rgba(198, 161, 92, .22) !important; background: rgba(198, 161, 92, .07) !important; }
.mio-drama-script .shot-action { color: var(--mio-text-2) !important; }
.mio-drama-script .shot-dialogue { border-left-color: rgba(184, 137, 63, .42) !important; border-radius: 7px !important; background: rgba(184, 137, 63, .055) !important; }
.mio-drama-script .char-tag { color: var(--mio-gold-300) !important; border-radius: 4px !important; background: rgba(184, 137, 63, .10) !important; }
.mio-drama-script .shot-dialogue .line { color: var(--mio-text-2) !important; }

.mio-drama-script .script-right {
  display: none !important;
}
.mio-drama-script .anchor-list { gap: 4px !important; }
.mio-drama-script .anchor-item { min-height: 42px; padding: 8px 9px !important; border: 1px solid transparent !important; border-radius: 7px !important; color: var(--mio-text-3) !important; background: transparent !important; box-shadow: none !important; }
.mio-drama-script .anchor-item:hover { color: var(--mio-text-2) !important; border-color: var(--mio-line-soft) !important; background: rgba(255, 255, 255, .035) !important; transform: none !important; }
.mio-drama-script .anchor-item.active { color: var(--mio-text-1) !important; border-color: rgba(184, 137, 63, .20) !important; background: rgba(184, 137, 63, .09) !important; }
.mio-drama-script .anchor-index { width: 24px !important; height: 24px !important; border-color: var(--mio-line) !important; border-radius: 7px !important; color: var(--mio-text-3) !important; background: var(--mio-surface-3) !important; font-family: var(--mio-font-mono) !important; }
.mio-drama-script .anchor-item.active .anchor-index { color: var(--mio-gold-300) !important; border-color: rgba(184, 137, 63, .32) !important; background: rgba(184, 137, 63, .10) !important; }
.mio-drama-script .anchor-label { font-size: 12px !important; }

.mio-drama-script .raw-script-text { padding: 16px !important; border: 1px solid var(--mio-line) !important; border-radius: 7px !important; color: var(--mio-text-2) !important; background: var(--mio-bg) !important; font-family: var(--mio-font-mono) !important; }

.mio-drama-script .modal-overlay { background: rgba(2, 5, 14, .85) !important; backdrop-filter: blur(8px) !important; }
.mio-drama-script .parse-modal,
.mio-drama-script .raw-script-modal {
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: var(--mio-surface-1) !important;
  box-shadow: var(--mio-shadow-3) !important;
}
.mio-drama-script .parse-modal { width: min(540px, calc(100vw - 32px)) !important; }
.mio-drama-script .raw-script-modal { width: min(980px, calc(100vw - 32px)) !important; }
.mio-drama-script .parse-modal-header,
.mio-drama-script .raw-script-modal-header { min-height: 56px; padding: 12px 20px !important; border-bottom: 1px solid var(--mio-line) !important; background: var(--mio-surface-1) !important; }
.mio-drama-script .parse-modal-header > div > div:first-child,
.mio-drama-script .raw-script-modal-header > div > div:first-child { color: var(--mio-text-1) !important; font-size: 14px !important; font-weight: 650 !important; }
.mio-drama-script .parse-modal-header > div > div:last-child { color: var(--mio-text-3) !important; }
.mio-drama-script .close-btn { width: 32px !important; height: 32px !important; border: 1px solid var(--mio-line) !important; border-radius: 7px !important; color: var(--mio-text-2) !important; background: var(--mio-surface-2) !important; }
.mio-drama-script .close-btn:hover { color: var(--mio-text-1) !important; border-color: var(--mio-line-strong) !important; background: var(--mio-surface-3) !important; }
.mio-drama-script .input-mode-toggle { padding: 4px !important; border: 1px solid var(--mio-line) !important; border-radius: 10px !important; background: var(--mio-bg) !important; }
.mio-drama-script .toggle-btn { min-height: 30px; border: 1px solid transparent !important; border-radius: 7px !important; color: var(--mio-text-3) !important; background: transparent !important; }
.mio-drama-script .toggle-btn.active { color: #18140e !important; border-color: var(--mio-gold-400) !important; background: var(--mio-gold-400) !important; }
.mio-drama-script .file-drop-zone { border: 1px dashed var(--mio-line-strong) !important; border-radius: 10px !important; background: var(--mio-bg) !important; }
.mio-drama-script .file-drop-zone:hover,
.mio-drama-script .file-drop-zone.dragover,
.mio-drama-script .file-drop-zone.has-file { border-color: rgba(184, 137, 63, .55) !important; background: rgba(184, 137, 63, .045) !important; transform: none !important; }
.mio-drama-script .file-drop-zone .drop-icon { color: var(--mio-gold-300) !important; }
.mio-drama-script .file-drop-zone .drop-label { color: var(--mio-text-2) !important; }
.mio-drama-script .file-drop-zone .drop-label span { color: var(--mio-gold-300) !important; }
.mio-drama-script .file-drop-zone .drop-hint { color: var(--mio-text-3) !important; }
.mio-drama-script .paste-area { border: 1px solid var(--mio-line-strong) !important; border-radius: 10px !important; color: var(--mio-text-1) !important; background: var(--mio-bg) !important; }
.mio-drama-script .paste-area:focus { border-color: rgba(184, 137, 63, .66) !important; box-shadow: var(--mio-focus) !important; }
.mio-drama-script .parse-options-inline { border-color: var(--mio-line) !important; }
.mio-drama-script .parse-options-label { color: var(--mio-text-3) !important; }
.mio-drama-script .parse-option-inline { color: var(--mio-text-2) !important; }
.mio-drama-script .parse-option-inline input[type="checkbox"] { border-color: var(--mio-line-strong) !important; background: var(--mio-bg) !important; }
.mio-drama-script .parse-option-inline input[type="checkbox"]:checked { border-color: var(--mio-gold-400) !important; background: var(--mio-gold-400) !important; }
.mio-drama-script .raw-script-modal-body { padding: 18px 20px 20px !important; }

@media (max-width: 1279px) {
  .mio-drama-script .script-right { display: none !important; }
}

@media (max-width: 1080px) {
  .mio-drama-script .script-layout { flex-direction: column !important; overflow-y: auto !important; }
  .mio-drama-script .script-left { width: 100% !important; min-height: auto; flex: 0 0 auto; }
  .mio-drama-script .sl-list { display: flex; gap: 6px; overflow-x: auto; }
  .mio-drama-script .script-switch-btn { width: auto; min-width: 170px; }
  .mio-drama-script .script-mid { min-height: 620px; }
}

@media (max-width: 767px) {
  .mio-drama-script > .workspace { padding: 12px !important; }
  .mio-drama-script .script-upload-view,
  .mio-drama-script .script-parsing-view { padding: 32px 18px !important; }
  .mio-drama-script .script-left { display: none; }
  .mio-drama-script .script-mid { min-height: 0; height: 100%; }
  .mio-drama-script .sm-header { padding: 8px 12px !important; align-items: flex-start !important; gap: 8px; }
  .mio-drama-script .sm-actions { width: 100%; }
  .mio-drama-script .sm-content { padding: 18px 14px !important; }
  .mio-drama-script .script-intro,
  .mio-drama-script .section-card,
  .mio-drama-script .insight-item,
  .mio-drama-script .storyboard-card,
  .mio-drama-script .raw-script-shell { padding: 14px !important; }
  .mio-drama-script .parse-options-inline { align-items: flex-start !important; flex-wrap: wrap; gap: 10px; }
}

/* Canvas page */
.mio-drama-canvas .shell { margin-left: 0; background: var(--mio-bg); }
.mio-drama-canvas .workspace {
  margin-left: 64px;
  width: calc(100% - 64px);
  padding: 12px 16px 16px !important;
  gap: 12px !important;
  --workspace-gap: 12px !important;
  --left-panel-width: 286px;
  --right-panel-width: 310px;
  grid-template-columns: var(--left-panel-width) minmax(0, 1fr) var(--right-panel-width) !important;
  background: var(--mio-bg) !important;
}

.mio-drama-canvas .panel {
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mio-drama-canvas .panel::before,
.mio-drama-canvas .preview-section::before { display: none !important; }
.mio-drama-canvas .panel:hover { border-color: var(--mio-line) !important; box-shadow: none !important; }

.mio-drama-canvas .panel-header {
  height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 1px solid var(--mio-line) !important;
  background: var(--mio-surface-1) !important;
}

.mio-drama-canvas .panel-title { color: var(--mio-text-1) !important; font-size: 13px !important; font-weight: 620 !important; }
.mio-drama-canvas .panel-title .count-badge { color: var(--mio-text-3) !important; border-color: var(--mio-line) !important; background: var(--mio-surface-3) !important; box-shadow: none !important; }
.mio-drama-canvas .panel-body { padding: 10px !important; }

.mio-drama-canvas .batch-gen-btn {
  height: 32px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
}

.mio-drama-canvas .batch-gen-btn:hover { color: var(--mio-text-1) !important; border-color: var(--mio-line-strong) !important; background: var(--mio-surface-3) !important; transform: none !important; }
.mio-drama-canvas #batchGenBtn { color: #18140e !important; border-color: var(--mio-gold-400) !important; background: var(--mio-gold-400) !important; }
.mio-drama-canvas #batchGenBtn:hover { background: var(--mio-gold-300) !important; }

.mio-drama-canvas .episode-switcher { color: var(--mio-text-1) !important; }
.mio-drama-canvas .episode-menu,
.mio-drama-canvas .add-shot-menu,
.mio-drama-canvas .gen-type-popup,
.mio-drama-canvas .params-popup,
.mio-drama-canvas .upload-option-menu {
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-surface-2) !important;
  box-shadow: var(--mio-shadow-2) !important;
  backdrop-filter: none !important;
}

.mio-drama-canvas .episode-menu .active,
.mio-drama-canvas .gen-type-option.active,
.mio-drama-canvas .popup-option.active { color: var(--mio-gold-300) !important; border-color: rgba(184, 137, 63, .32) !important; background: rgba(184, 137, 63, .10) !important; }

.mio-drama-canvas .shot-items::before { background: var(--mio-line) !important; opacity: 1 !important; }
.mio-drama-canvas .shot-slot::before { background: var(--mio-line-soft) !important; }
.mio-drama-canvas .shot-item {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mio-drama-canvas .shot-item:hover { border-color: var(--mio-line) !important; background: var(--mio-surface-3) !important; transform: none !important; }
.mio-drama-canvas .shot-item.active,
.mio-drama-canvas .shot-item.batch-checked {
  border-color: rgba(184, 137, 63, .45) !important;
  background: rgba(184, 137, 63, .08) !important;
  box-shadow: none !important;
}

.mio-drama-canvas .shot-item.active .shot-no { color: var(--mio-gold-300) !important; }
.mio-drama-canvas .shot-status-chip { border-radius: 5px !important; }
.mio-drama-canvas .shot-status-chip.is-ready { color: var(--mio-success) !important; border-color: rgba(117, 168, 132, .24) !important; background: rgba(117, 168, 132, .09) !important; }
.mio-drama-canvas .shot-thumb { border-color: var(--mio-line) !important; border-radius: 7px !important; background: var(--mio-bg) !important; }

.mio-drama-canvas .sidebar-expanded-toggle,
.mio-drama-canvas .sidebar-rail-toggle {
  width: 20px !important;
  height: 42px !important;
  border: 1px solid var(--mio-line-strong) !important;
  border-radius: 7px !important;
  color: var(--mio-text-3) !important;
  background: var(--mio-surface-2) !important;
  box-shadow: var(--mio-shadow-1) !important;
  backdrop-filter: none !important;
}

.mio-drama-canvas .sidebar-expanded-toggle:hover,
.mio-drama-canvas .sidebar-rail-toggle:hover { color: var(--mio-text-1) !important; border-color: rgba(184, 137, 63, .45) !important; transform: translateY(-50%) !important; }

.mio-drama-canvas .sidebar-panel.is-collapsed { border-color: var(--mio-line) !important; background: var(--mio-surface-1) !important; box-shadow: none !important; }
.mio-drama-canvas .sidebar-panel.is-collapsed::after { background: var(--mio-line) !important; }
.mio-drama-canvas .sidebar-rail-title { color: var(--mio-text-2) !important; }

.mio-drama-canvas .add-shot-footer { border-top: 1px solid var(--mio-line) !important; background: var(--mio-surface-1) !important; }
.mio-drama-canvas .add-shot-footer-btn {
  height: 32px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}
.mio-drama-canvas .add-shot-footer-btn:hover { color: var(--mio-gold-300) !important; border-color: rgba(184, 137, 63, .42) !important; background: rgba(184, 137, 63, .08) !important; }

.mio-drama-canvas .preview-section { background: var(--mio-surface-1) !important; }
.mio-drama-canvas .monitor-area { background: #0c0c0e !important; }
.mio-drama-canvas .monitor-area::before,
.mio-drama-canvas .monitor-wrapper::after { display: none !important; }
.mio-drama-canvas .monitor-wrapper {
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  background: #070708 !important;
  box-shadow: none !important;
}
.mio-drama-canvas .monitor-wrapper:hover { border-color: var(--mio-line-strong) !important; box-shadow: none !important; transform: none !important; }

.mio-drama-canvas .monitor-float-btn,
.mio-drama-canvas .trash-entry-btn,
.mio-drama-canvas .dl-btn {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: rgba(16, 16, 18, .92) !important;
  box-shadow: none !important;
}

.mio-drama-canvas .monitor-float-btn:hover,
.mio-drama-canvas .trash-entry-btn:hover,
.mio-drama-canvas .dl-btn:hover { color: var(--mio-gold-300) !important; border-color: rgba(184, 137, 63, .38) !important; }

.mio-drama-canvas .param-section,
.mio-drama-canvas .gen-panel {
  border-color: var(--mio-line) !important;
  background: var(--mio-surface-1) !important;
  box-shadow: none !important;
}
.mio-drama-canvas .param-section:hover { border-color: var(--mio-line) !important; box-shadow: none !important; }
.mio-drama-canvas .prompt-editor-wrap { border-color: var(--mio-line-strong) !important; border-radius: 10px !important; background: var(--mio-bg) !important; box-shadow: none !important; }
.mio-drama-canvas .prompt-editor { color: var(--mio-text-1) !important; background: transparent !important; }
.mio-drama-canvas .prompt-action-bar,
.mio-drama-canvas .gen-action-bar { border-color: var(--mio-line) !important; background: var(--mio-surface-1) !important; box-shadow: none !important; }

.mio-drama-canvas .param-chip,
.mio-drama-canvas .gen-type-trigger,
.mio-drama-canvas .gen-type-btn,
.mio-drama-canvas .attach-upload-btn,
.mio-drama-canvas .hist-type-btn,
.mio-drama-canvas .hist-filter-btn {
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}
.mio-drama-canvas .param-chip:hover,
.mio-drama-canvas .gen-type-trigger:hover,
.mio-drama-canvas .gen-type-btn:hover,
.mio-drama-canvas .attach-upload-btn:hover { border-color: var(--mio-line-strong) !important; background: var(--mio-surface-3) !important; }
.mio-drama-canvas .hist-type-btn.active,
.mio-drama-canvas .hist-filter-btn.active { color: #18140e !important; border-color: var(--mio-gold-400) !important; background: var(--mio-gold-400) !important; }

.mio-drama-canvas .generate-btn,
.mio-drama-canvas [class*="generate-btn"]:not(.batch-gen-btn),
.mio-drama-canvas .submit-gen-btn,
.mio-drama-canvas .gen-submit-btn {
  border-color: var(--mio-gold-400) !important;
  border-radius: 7px !important;
  color: #18140e !important;
  background: var(--mio-gold-400) !important;
  box-shadow: none !important;
}

.mio-drama-canvas .gen-submit-btn:hover { border-color: var(--mio-gold-300) !important; background: var(--mio-gold-300) !important; filter: none !important; transform: translateY(-1px) !important; }

.mio-drama-canvas .prompt-polish-btn {
  border: 1px solid rgba(184, 137, 63, .30) !important;
  border-radius: 7px !important;
  color: var(--mio-gold-300) !important;
  background: rgba(184, 137, 63, .08) !important;
  box-shadow: none !important;
}

.mio-drama-canvas .prompt-polish-btn:hover { border-color: rgba(184, 137, 63, .52) !important; background: rgba(184, 137, 63, .12) !important; transform: none !important; }

.mio-drama-canvas .prompt-attachments { border-color: var(--mio-line) !important; background: var(--mio-bg) !important; }

.mio-drama-canvas .history-grid { gap: 10px !important; }
.mio-drama-canvas .history-card,
.mio-drama-canvas .media-thumb-wrapper {
  border-color: var(--mio-line) !important;
  border-radius: 10px !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}
.mio-drama-canvas .media-thumb-wrapper.is-applied { border-color: rgba(184, 137, 63, .55) !important; box-shadow: var(--mio-focus) !important; }

.mio-drama-canvas .batch-action-bar {
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  background: rgba(21, 21, 23, .97) !important;
  box-shadow: var(--mio-shadow-2) !important;
  backdrop-filter: blur(18px) !important;
}

.mio-drama-canvas .batch-bar-select-btn,
.mio-drama-canvas .batch-bar-close {
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  box-shadow: none !important;
}

.mio-drama-canvas .batch-bar-select-btn:hover,
.mio-drama-canvas .batch-bar-close:hover { color: var(--mio-text-1) !important; border-color: var(--mio-line-strong) !important; background: var(--mio-surface-3) !important; }

.mio-drama-canvas .batch-submit-btn {
  border: 1px solid var(--mio-gold-400) !important;
  border-radius: 7px !important;
  color: #18140e !important;
  background: var(--mio-gold-400) !important;
  box-shadow: none !important;
}

.mio-drama-canvas .batch-submit-btn:disabled { color: var(--mio-text-3) !important; border-color: var(--mio-line) !important; background: var(--mio-surface-2) !important; opacity: .62 !important; }
.mio-drama-canvas .shot-checkbox { border-color: var(--mio-line-strong) !important; background: var(--mio-surface-2) !important; }
.mio-drama-canvas .shot-item.batch-checked .shot-checkbox { border-color: var(--mio-gold-400) !important; color: #18140e !important; background: var(--mio-gold-400) !important; }

.mio-drama-canvas .ref-preview-modal,
.mio-drama-canvas [class*="modal"][role="dialog"],
.mio-drama-canvas .review-station,
.mio-drama-canvas .clip-studio {
  border-color: var(--mio-line) !important;
  background-color: var(--mio-surface-1) !important;
  box-shadow: var(--mio-shadow-3) !important;
}

/* Status must never rely on neon brand colors. */
.mio-drama-canvas [class*="success"],
.mio-drama-detail [class*="success"] { color: var(--mio-success) !important; }
.mio-drama-canvas [class*="warning"],
.mio-drama-detail [class*="warning"] { color: var(--mio-warning) !important; }
.mio-drama-canvas [class*="error"],
.mio-drama-canvas [class*="failed"],
.mio-drama-detail [class*="error"],
.mio-drama-detail [class*="failed"] { color: var(--mio-danger) !important; }

@media (max-width: 1439px) {
  .mio-drama-list .hero-banner { padding-left: 24px !important; padding-right: 24px !important; }
  .mio-drama-list .main-container,
  .mio-drama-detail > .workspace { padding-left: 24px !important; padding-right: 24px !important; }
  .mio-drama-list .project-grid,
  .mio-drama-detail .asset-grid.episodes { grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; }
  .mio-drama-detail .asset-grid.chars,
  .mio-drama-detail .asset-grid.scenes,
  .mio-drama-detail .asset-grid.props { grid-template-columns: repeat(4, minmax(170px, 1fr)) !important; }
  .mio-drama-canvas .workspace { --left-panel-width: 250px; --right-panel-width: 270px; }
}

@media (max-width: 1179px) {
  .mio-drama-list .project-grid,
  .mio-drama-detail .asset-grid.episodes { grid-template-columns: repeat(2, minmax(220px, 1fr)) !important; }
  .mio-drama-detail .asset-grid.chars,
  .mio-drama-detail .asset-grid.scenes,
  .mio-drama-detail .asset-grid.props { grid-template-columns: repeat(3, minmax(160px, 1fr)) !important; }
  .mio-drama-detail .header-tabs { left: 58% !important; }
  .mio-drama-canvas .workspace {
    --left-panel-width: 220px;
    --right-panel-width: 220px;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    grid-template-columns: var(--left-panel-width) minmax(0, 1fr) var(--right-panel-width) !important;
  }
  .mio-drama-canvas .batch-gen-btn { padding-left: 9px !important; padding-right: 9px !important; }
  .mio-drama-canvas .draft-save-btn { display: none !important; }
  .mio-drama-canvas .gen-action-bar { gap: 6px !important; }
}

@media (max-width: 900px) {
  .mio-drama-canvas .workspace { grid-template-columns: minmax(0, 1fr) !important; }
  .mio-drama-canvas .workspace > aside.panel { display: none !important; }
  .mio-drama-canvas .center-column { min-width: 0 !important; width: 100% !important; }
  .mio-drama-canvas .project-title { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
  .mio-drama-canvas #reviewStationEntry,
  .mio-drama-canvas #clipStudioEntry { display: none !important; }
}

@media (max-width: 820px) {
  .mio-drama-detail .modal-left { display: none !important; }
  .mio-drama-detail .modal-bd > .modal-box { height: calc(100vh - 20px) !important; }
  .mio-drama-detail .header-tabs { display: none !important; }
}

@media (max-width: 767px) {
  .mio-global-nav { display: none; }
  .mio-drama-list .hero-banner,
  .mio-drama-list .main-container,
  .mio-drama-detail > .top-header,
  .mio-drama-detail > .workspace,
  .mio-drama-canvas .top-header,
  .mio-drama-canvas .workspace { margin-left: 0 !important; width: 100% !important; }
  .mio-drama-list .hero-banner { height: 220px !important; min-height: 220px; padding: 32px 16px 24px !important; }
  .mio-drama-list .main-container,
  .mio-drama-detail > .workspace { padding-left: 16px !important; padding-right: 16px !important; }
  .mio-drama-list .toolbar { align-items: flex-start !important; gap: 12px; }
  .mio-drama-list .toolbar-right { width: 100%; flex-wrap: wrap; }
  .mio-drama-list .search-box { width: 100%; }
  .mio-drama-list .project-grid,
  .mio-drama-detail .asset-grid.episodes,
  .mio-drama-detail .asset-grid.chars,
  .mio-drama-detail .asset-grid.scenes,
  .mio-drama-detail .asset-grid.props { grid-template-columns: 1fr !important; }
  .mio-drama-canvas .top-header { overflow-x: auto; }
  .mio-drama-canvas .header-right { min-width: max-content; }
  .mio-drama-canvas .project-title { max-width: 132px; }
  .mio-drama-canvas #batchGenBtn { width: 32px !important; padding: 0 !important; font-size: 0 !important; justify-content: center; }
  .mio-drama-canvas .top-header .user-avatar { display: none !important; }
  .mio-drama-canvas .center-column { overflow-y: auto !important; padding-bottom: 12px; }
  .mio-drama-canvas .gen-action-bar { flex-wrap: wrap !important; }
  .mio-drama-canvas .gen-action-bar > .gen-type-divider { display: none !important; }
  .mio-drama-canvas .action-bar-row { flex: 1 0 100% !important; flex-wrap: wrap !important; }
  .mio-drama-canvas .param-chips { flex: 1 0 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible !important; }
  .mio-drama-canvas .param-chip { min-width: 0; width: 100%; justify-content: center; }
  .mio-drama-canvas .gen-submit-btn { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}