:root {
  color-scheme: dark;
  --bg: #07102e;
  --bg-deep: #04091d;
  --panel: rgba(10, 21, 62, 0.9);
  --line: rgba(125, 143, 242, 0.24);
  --line-bright: rgba(138, 155, 255, 0.42);
  --text: #f4f5ff;
  --muted: #9ca9dc;
  --lime: #c7ff38;
  --lime-strong: #d6ff55;
  --violet: #8a61ff;
  --violet-soft: #a991ff;
  --pink: #ff6ca9;
  --shadow: 0 20px 45px rgba(0, 0, 21, 0.3);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 1% 3%, rgba(104, 63, 255, 0.34), transparent 31rem),
    radial-gradient(circle at 76% 0%, rgba(41, 83, 226, 0.18), transparent 28rem),
    linear-gradient(135deg, #0c1550 0%, var(--bg) 38%, var(--bg-deep) 100%);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.24;
  pointer-events: none;
  background-image: linear-gradient(rgba(123, 144, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 144, 255, 0.1) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}

button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 27px 15px 18px; border-right: 1px solid rgba(132, 151, 255, 0.14); background: linear-gradient(180deg, rgba(8, 16, 54, 0.87), rgba(4, 10, 34, 0.74)); backdrop-filter: blur(20px); }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 11px 34px; color: var(--text); text-decoration: none; }
.logo-mark { position: relative; width: 38px; height: 35px; filter: drop-shadow(0 0 10px rgba(159, 244, 89, 0.26)); }
.logo-mark::before { position: absolute; inset: 0; content: ""; clip-path: polygon(2% 0, 100% 50%, 2% 100%); background: linear-gradient(135deg, #cfef55 0 35%, #78e9e2 35% 55%, #8d69ff 55%); }
.logo-mark span:first-child { position: absolute; top: 7px; left: 8px; width: 7px; height: 21px; z-index: 1; border-radius: 2px; background: #101a55; transform: skewY(-30deg); }
.logo-mark span:last-child { position: absolute; top: 13px; left: 15px; width: 12px; height: 11px; z-index: 1; border-radius: 2px; background: #101a55; transform: rotate(29deg); }
.logo-copy { display: grid; line-height: 1; gap: 5px; }.logo-copy strong { font-size: 20px; letter-spacing: -0.05em; }.logo-copy small { color: #9ba4df; font-size: 7px; font-weight: 800; letter-spacing: 0.15em; }
.main-nav { display: grid; gap: 5px; }.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border: 1px solid transparent; border-radius: 10px; color: #aeb8e8; text-align: left; background: transparent; transition: .18s ease; }.nav-item:hover { color: var(--text); background: rgba(129, 145, 255, 0.09); }.nav-item.is-active { color: var(--lime); border-color: rgba(199, 255, 56, 0.16); background: linear-gradient(90deg, rgba(199, 255, 56, 0.14), rgba(199, 255, 56, 0.025)); box-shadow: inset 3px 0 var(--lime); }.nav-item svg { width: 19px; height: 19px; }.nav-item span { font-size: 14px; font-weight: 700; }
.sidebar-spacer { flex: 1; }.sidebar-card { display: flex; gap: 9px; align-items: center; margin: 16px 4px 13px; padding: 11px 10px; border: 1px solid rgba(201, 255, 56, 0.21); border-radius: 12px; color: #efffc7; background: rgba(166, 255, 36, 0.07); }.sidebar-card .card-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #17235a; background: var(--lime); }.sidebar-card svg { width: 15px; height: 15px; }.sidebar-card div { display: grid; gap: 3px; }.sidebar-card strong { font-size: 11px; }.sidebar-card small { color: #b6c296; font-size: 9px; line-height: 1.15; }.help-button { width: 29px; height: 29px; margin-left: 6px; border: 1px solid var(--line); border-radius: 50%; color: #aeb9eb; font-weight: 800; background: transparent; }

.workspace { min-width: 0; padding: 0 22px 28px; }.app-header { display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 0 4px; border-bottom: 1px solid rgba(132, 151, 255, 0.13); }.header-crumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }.breadcrumb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .back-button, .pencil, .script-edit { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: #b7c2f8; background: rgba(10, 22, 67, 0.58); transition: .18s ease; }.icon-button { width: 37px; height: 37px; }.icon-button:hover, .back-button:hover, .pencil:hover, .script-edit:hover { border-color: var(--line-bright); color: var(--text); background: rgba(92, 104, 219, 0.22); }.notification-button { position: relative; }.notification-button i { position: absolute; top: 8px; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }.user-menu { display: flex; align-items: center; gap: 9px; padding: 2px 0 2px 3px; border: 0; color: var(--text); text-align: left; background: transparent; }.user-menu > span:nth-child(2) { display: grid; gap: 2px; }.user-menu strong { font-size: 12px; }.user-menu small { color: var(--muted); font-size: 10px; }.user-menu > svg { width: 14px; height: 14px; color: #aeb9ed; }.avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-weight: 800; }.avatar-owner { width: 36px; height: 36px; color: #fff; font-size: 15px; background: linear-gradient(135deg, #8c73ff, #6474ff); box-shadow: 0 4px 14px rgba(116, 105, 255, 0.37); }

.studio-grid { display: grid; grid-template-columns: minmax(370px, 1.06fr) minmax(430px, 0.98fr) minmax(420px, 1.12fr); gap: 16px; align-items: start; padding-top: 21px; }.panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(15, 30, 84, 0.87), rgba(6, 15, 47, 0.92)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,0.045); }.competitors-panel { display: flex; flex-direction: column; }.panel-heading { display: flex; gap: 13px; padding: 24px 24px 16px; }.heading-icon { display: grid; place-items: center; flex: 0 0 auto; width: 45px; height: 45px; border-radius: 13px; }.heading-icon.lime { color: #183061; background: linear-gradient(145deg, #d8ff52, #8de949); box-shadow: 0 8px 20px rgba(180, 255, 54, .16); }.heading-icon svg { width: 25px; height: 25px; stroke-width: 2.4; } h1, h2, h3, p { margin: 0; }.panel-heading h1 { display: flex; align-items: center; gap: 7px; font-size: 25px; letter-spacing: -0.045em; }.panel-heading p, .remix-topline p { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }.info { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 1px solid #8f9ad2; border-radius: 50%; color: #9da8df; font-size: 10px; font-weight: 800; background: transparent; }
.platform-tabs { display: flex; gap: 25px; padding: 0 24px; border-bottom: 1px solid var(--line); }.tab, .scenario-tab { position: relative; padding: 12px 0 11px; border: 0; color: var(--muted); font-size: 12px; font-weight: 700; background: transparent; white-space: nowrap; }.tab.is-active { color: var(--lime); }.tab.is-active::after, .scenario-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.import-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 15px 24px 17px; }.handle-input { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 13px; border: 1px solid rgba(203, 255, 66, .6); border-radius: 9px; color: #9eabeb; background: rgba(2, 9, 40, .42); }.handle-input svg { width: 17px; height: 17px; }.handle-input input { min-width: 0; width: 100%; height: 41px; border: 0; outline: 0; color: var(--text); font-size: 13px; font-weight: 700; background: transparent; }
.primary-button, .secondary-button, .outline-button, .template-button, .download-button, .sort-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; font-size: 12px; font-weight: 800; transition: .18s ease; }.primary-button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(221,255,120,.7); color: #172642; background: linear-gradient(135deg, var(--lime-strong), #bdf640); box-shadow: 0 6px 18px rgba(174, 251, 56, .17); }.primary-button:hover { transform: translateY(-1px); filter: brightness(1.05); }.primary-button svg { width: 16px; height: 16px; transform: rotate(180deg); }.import-button { white-space: nowrap; }
.profile-card { margin: 0 24px 18px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5, 15, 49, .34); }.profile-top { display: flex; gap: 11px; align-items: center; }.avatar-coach { position: relative; width: 47px; height: 47px; overflow: hidden; color: rgba(255,255,255,.9); font-size: 11px; background: linear-gradient(150deg, #e3be98 0 35%, #1e294d 36% 53%, #dfa075 54% 100%); }.avatar-coach::before { position: absolute; right: -2px; bottom: -6px; width: 34px; height: 33px; content: ""; border-radius: 50% 50% 0 0; background: #1d263d; }.avatar-coach span { position: relative; z-index: 1; }.profile-top strong { font-size: 14px; }.profile-top p { max-width: 290px; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }.profile-bottom { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 15px; }.profile-bottom dl { display: flex; gap: 19px; margin: 0; }.profile-bottom dl div { display: grid; gap: 4px; }.profile-bottom dt { color: #eef0ff; font-size: 13px; font-weight: 800; }.profile-bottom dd { margin: 0; color: var(--muted); font-size: 9px; }.outline-button { padding: 8px 10px; border: 1px solid var(--line-bright); color: #dce1ff; background: rgba(27, 41, 100, .32); white-space: nowrap; }.outline-button:hover { color: var(--lime); border-color: rgba(200,255,59,.6); }
.list-heading { display: flex; align-items: center; justify-content: space-between; padding: 5px 24px 11px; }.list-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: -0.035em; }.list-heading h2 span { padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: #c4cdfd; font-size: 9px; font-weight: 700; }.sort-button { padding: 4px 0; border: 0; color: var(--muted); font-size: 10px; background: transparent; }.sort-button svg { width: 13px; height: 13px; }
.reels-table { margin: 0 15px; overflow: hidden; border: 1px solid rgba(121, 139, 234, .17); border-radius: 9px; background: rgba(5, 15, 49, .18); }.table-labels, .reel-row { display: grid; grid-template-columns: 16px 45px minmax(115px,1.7fr) minmax(48px,.65fr) minmax(42px,.52fr) minmax(54px,.65fr) 80px; gap: 8px; align-items: center; }.table-labels { min-height: 34px; padding: 0 11px; color: #8e9bd1; font-size: 9px; font-weight: 700; border-bottom: 1px solid var(--line); }.reel-row { position: relative; width: 100%; min-height: 61px; padding: 6px 11px; border: 0; border-bottom: 1px solid rgba(121, 139, 234, .13); color: inherit; text-align: left; background: transparent; }.reel-row:last-child { border-bottom: 0; }.reel-row:hover, .reel-row.is-selected { background: linear-gradient(90deg, rgba(130, 108, 255, .15), rgba(199,255,56,.025)); }.reel-row.is-selected::before { position: absolute; left: 0; width: 2px; height: 50%; content: ""; border-radius: 2px; background: var(--lime); }.row-number, .row-metric { color: #cbd3ff; font-size: 10px; font-weight: 700; }.reel-thumb { position: relative; width: 40px; height: 49px; overflow: hidden; border-radius: 5px; background: linear-gradient(150deg, #d9b382 0 35%, #263152 36% 65%, #d68e67 66%); }.reel-thumb::before { position: absolute; top: 5px; left: 12px; width: 18px; height: 21px; content: ""; border-radius: 50%; background: #e6b38f; }.reel-thumb::after { position: absolute; right: 5px; bottom: -5px; width: 29px; height: 29px; content: ""; border-radius: 50% 50% 0 0; background: #18223f; }.reel-thumb.variant-2 { filter: hue-rotate(38deg) saturate(.8); }.reel-thumb.variant-3 { filter: hue-rotate(-22deg) brightness(.8); }.reel-thumb.variant-4 { filter: hue-rotate(85deg) brightness(.95); }.reel-thumb.variant-5 { filter: hue-rotate(140deg) brightness(.83); }.duration-badge { position: absolute; right: 3px; bottom: 3px; z-index: 1; padding: 2px 3px; border-radius: 3px; color: #fff; font-size: 8px; font-weight: 800; background: rgba(0,0,0,.7); }.row-description { min-width: 0; }.row-description strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #edf0ff; font-size: 10px; line-height: 1.27; }.row-description small { display: block; margin-top: 2px; color: #7988bd; font-size: 8px; }.remix-row-button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 5px 7px; border: 1px solid rgba(199,255,56,.55); border-radius: 6px; color: var(--lime); font-size: 9px; font-weight: 800; background: rgba(199,255,56,.04); }.remix-row-button svg { width: 11px; height: 11px; fill: currentColor; stroke-width: 0; }.panel-quote { padding: 13px 24px 17px; color: #7989bf; font-size: 10px; font-style: italic; }

.remix-panel { padding-bottom: 18px; }.remix-topline { display: flex; gap: 12px; align-items: start; padding: 20px 19px 17px; }.back-button { flex: 0 0 auto; width: 31px; height: 31px; }.back-button svg { width: 16px; height: 16px; }.remix-topline > div { min-width: 0; }.remix-topline h2, .result-topline h2 { font-size: 24px; letter-spacing: -0.05em; }.remix-topline p { max-width: 275px; font-size: 11px; }.template-button { flex: 0 0 auto; margin-left: auto; padding: 7px 9px; border: 1px solid var(--line); color: #c9d1ff; background: rgba(28, 42, 100, .32); }.template-button svg { width: 12px; height: 12px; }
.source-section { display: grid; grid-template-columns: 181px minmax(0,1fr); gap: 17px; padding: 3px 19px 20px; }.source-section h3 { margin-bottom: 10px; font-size: 12px; }.source-video, .final-video { position: relative; overflow: hidden; border-radius: 11px; background: linear-gradient(155deg, #e6cfb9 0 18%, #8398a4 19% 40%, #d4a17e 41% 100%); }.source-video { height: 326px; }.video-shine { position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,.6), transparent 24% 68%, rgba(9,11,36,.44)); }.video-person { position: absolute; bottom: 0; left: 50%; width: 74%; height: 80%; transform: translateX(-50%); }.video-person::before { position: absolute; top: 0; left: 50%; width: 42%; aspect-ratio: 1; content: ""; border: 4px solid #efd0b8; border-radius: 48% 45% 43% 52%; background: radial-gradient(circle at 45% 62%, #f8d8c4 0 13%, transparent 14%), radial-gradient(circle at 65% 62%, #f8d8c4 0 13%, transparent 14%), #e6a985; box-shadow: 0 -10px 0 8px #a97f59; transform: translateX(-50%); }.video-person span { position: absolute; bottom: -5px; left: 50%; width: 96%; height: 66%; border-radius: 48% 48% 0 0; background: linear-gradient(145deg, #1d223a, #050914); transform: translateX(-50%); }.video-person.energetic span { background: linear-gradient(145deg, #202642, #070a19); }.video-caption { position: absolute; bottom: 58px; left: 12px; padding: 5px 7px; border-radius: 4px; color: #171717; font-size: 16px; font-weight: 900; line-height: 1.14; letter-spacing: -0.04em; background: rgba(255,255,255,.92); }.video-controls { position: absolute; right: 10px; bottom: 10px; left: 10px; display: flex; align-items: center; gap: 7px; color: #fff; font-size: 10px; font-weight: 800; }.video-controls svg { width: 18px; height: 18px; fill: currentColor; stroke-width: 0; }.video-controls .expand { margin-left: auto; font-size: 19px; transform: rotate(45deg); }
.source-analysis { min-width: 0; }.analysis-card { display: grid; gap: 4px; padding: 10px 11px; margin-bottom: 7px; border: 1px solid rgba(119, 139, 235, .19); border-radius: 8px; background: rgba(11, 25, 72, .5); }.analysis-card span { color: var(--violet-soft); font-size: 10px; font-weight: 700; }.analysis-card strong { color: #e0e4ff; font-size: 10px; line-height: 1.35; font-weight: 600; }.engagement { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 10px 7px; border: 1px solid rgba(119, 139, 235, .19); border-radius: 8px; background: rgba(5, 15, 49, .35); }.engagement span { display: grid; justify-items: center; gap: 2px; }.engagement svg { width: 15px; height: 15px; color: #dce2ff; }.engagement span:nth-child(2) svg { fill: var(--pink); color: var(--pink); }.engagement strong { font-size: 10px; }.engagement small { color: var(--muted); font-size: 7px; }
.new-script-heading { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 0 19px 11px; }.new-script-heading h2 { font-size: 16px; letter-spacing: -0.035em; }.new-script-heading h2 span { color: var(--muted); font-weight: 600; }.refresh-button { padding: 7px 9px; font-size: 9px; }.refresh-button svg { width: 13px; height: 13px; }.script-stack { display: grid; gap: 8px; padding: 0 19px; }.script-card { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) 18px; gap: 10px; padding: 9px; border: 1px solid rgba(119, 139, 235, .23); border-radius: 10px; background: rgba(10, 24, 73, .5); }.script-icon { display: grid; place-items: center; align-self: stretch; border-radius: 8px; }.script-icon svg { width: 23px; height: 23px; }.hook-card .script-icon { color: #fff; background: linear-gradient(145deg, #7f3df4, #5b48ff); }.content-card .script-icon { color: #193747; background: linear-gradient(145deg, #bbf54b, #80de3e); }.cta-card .script-icon { color: #46172b; background: linear-gradient(145deg, #ff97c5, #ff5d99); }.script-content { position: relative; min-width: 0; }.script-content label { display: block; margin-bottom: 4px; color: #c2b8ff; font-size: 10px; font-weight: 800; }.script-content label small { color: #8895c7; font-weight: 600; }.script-content textarea { display: block; width: 100%; min-height: 39px; padding: 5px 27px 5px 8px; resize: vertical; border: 1px solid rgba(125,143,242,.14); border-radius: 6px; outline: 0; color: #eff1ff; font-size: 10px; line-height: 1.36; background: rgba(3, 10, 38, .35); }.script-content textarea:focus { border-color: rgba(199,255,56,.63); }.char-count { position: absolute; right: 7px; bottom: 5px; color: #7f8cc4; font-size: 8px; }.script-edit { align-self: start; width: 18px; height: 18px; padding: 0; border: 0; color: #aeb9ed; background: transparent; }.script-edit svg { width: 14px; height: 14px; }

.result-panel { padding-bottom: 18px; }.result-topline { display: flex; gap: 10px; align-items: center; padding: 20px 19px 13px; }.result-topline h2 { margin-right: 2px; }.publish-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid rgba(199,255,56,.46); border-radius: 999px; color: #caff63; font-size: 9px; font-weight: 800; background: rgba(199,255,56,.08); }.publish-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }.download-button { margin-left: auto; padding: 8px 10px; border: 1px solid var(--line-bright); color: #e4e8ff; background: rgba(27, 41, 100, .32); }.download-button svg { width: 14px; height: 14px; }.more { width: 34px; height: 34px; }.result-title-row { display: flex; align-items: center; gap: 5px; padding: 0 19px; }.result-title-row input { width: min(100%, 360px); padding: 3px 0; border: 0; outline: 0; color: #f3f4ff; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; background: transparent; }.pencil { width: 23px; height: 23px; border: 0; background: transparent; }.pencil svg { width: 15px; height: 15px; }.tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 19px 18px; }.tag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(135, 117, 255, .4); border-radius: 999px; color: #c7bbff; font-size: 10px; font-weight: 700; background: rgba(100,83,218,.12); }.add-tag { color: #d8defe; border-color: var(--line-bright); background: rgba(27, 41, 100, .28); }.add-tag svg { width: 13px; height: 13px; }
.result-body { display: grid; grid-template-columns: minmax(172px,.72fr) minmax(240px,1fr); gap: 15px; padding: 0 19px; }.final-video { height: 387px; }.final-caption { bottom: 73px; left: 12px; padding: 0; color: #131913; font-size: 22px; line-height: 1.02; background: transparent; text-shadow: 0 1px 0 #d4f08b, 1px 0 0 #d4f08b, -1px 0 0 #d4f08b, 0 -1px 0 #d4f08b; }.final-caption b { padding: 1px 4px; color: #fff; text-shadow: none; background: #10131e; }.scenario-panel { overflow: hidden; border: 1px solid rgba(119, 139, 235, .23); border-radius: 10px; background: rgba(8, 19, 57, .38); }.scenario-tabs { display: flex; gap: 18px; padding: 0 14px; border-bottom: 1px solid var(--line); }.scenario-tab { padding: 13px 0 10px; font-size: 10px; }.scenario-tab.is-active { color: var(--lime); }.scenario-tab small { color: var(--muted); font-size: 9px; }.scenario-content { display: grid; gap: 9px; padding: 10px; }.scenario-block { padding: 10px; border: 1px solid rgba(119, 139, 235, .17); border-radius: 8px; background: rgba(12, 27, 76, .55); }.scenario-block h3 { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; font-size: 10px; }.scenario-block h3 span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; }.scenario-block.hook h3 { color: #d5c8ff; }.scenario-block.hook h3 span { color: #fff; background: #7752f7; }.scenario-block.content h3 { color: #dcfba2; }.scenario-block.content h3 span { color: #163347; background: #b0ee42; }.scenario-block.cta h3 { color: #ffb0d1; }.scenario-block.cta h3 span { color: #55162e; background: #ff77ae; }.scenario-block svg { width: 13px; height: 13px; }.scenario-time { margin-left: auto; color: #93a0d4; font-size: 8px; font-weight: 600; }.scenario-block p { padding-left: 27px; color: #edf0ff; font-size: 10px; line-height: 1.45; white-space: pre-line; }.settings-pane { padding: 5px 2px; color: var(--muted); font-size: 11px; line-height: 1.65; }.settings-pane strong { color: var(--text); }.soon-pane { display: grid; min-height: 190px; place-items: center; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.55; }
.result-actions { display: grid; grid-template-columns: 1fr 1.08fr; gap: 10px; padding: 16px 19px; }.edit-result { min-height: 45px; font-size: 13px; }.edit-result svg { width: 15px; height: 15px; transform: none; }.secondary-button { min-height: 45px; border: 1px solid var(--line-bright); color: #eff1ff; background: linear-gradient(135deg, rgba(57,68,158,.84), rgba(25,33,89,.85)); }.secondary-button:hover { border-color: rgba(199,255,56,.56); }.secondary-button svg { width: 16px; height: 16px; }.result-metrics { display: grid; grid-template-columns: .65fr .65fr .9fr 1.4fr; gap: 12px; margin: 0 19px; padding-top: 13px; border-top: 1px solid var(--line); }.result-metrics span { display: grid; gap: 4px; }.result-metrics small { color: #8e9acf; font-size: 9px; }.result-metrics strong { color: #eef0ff; font-size: 11px; }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(370px, calc(100% - 44px)); padding: 12px 14px; border: 1px solid rgba(199,255,56,.55); border-radius: 10px; color: #f4ffcc; font-size: 13px; font-weight: 700; pointer-events: none; opacity: 0; transform: translateY(12px); background: rgba(16,31,67,.95); box-shadow: 0 12px 34px rgba(0,0,0,.32); transition: .24s ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1630px) { .studio-grid { grid-template-columns: minmax(355px, 1fr) minmax(430px, 1.2fr); }.result-panel { grid-column: 1 / -1; }.result-body { grid-template-columns: 260px minmax(360px, 1fr); }.final-video { height: 430px; }.scenario-content { grid-template-columns: repeat(3, 1fr); }.scenario-block p { padding-left: 0; }.scenario-block h3 { flex-wrap: wrap; }.scenario-time { margin-left: 0; } }
@media (max-width: 1160px) { .app-shell { grid-template-columns: 74px minmax(0,1fr); }.sidebar { padding: 25px 10px 16px; }.logo { justify-content: center; padding: 0 0 32px; }.logo-copy, .nav-item span, .sidebar-card div { display: none; }.main-nav { gap: 7px; }.nav-item { justify-content: center; padding: 13px 8px; }.nav-item.is-active { box-shadow: inset 0 3px var(--lime); }.sidebar-card { justify-content: center; margin: 16px 0 13px; padding: 9px; }.sidebar-card .card-icon { width: 31px; height: 31px; }.help-button { margin: 0 auto; }.studio-grid { grid-template-columns: 1fr; }.result-panel { grid-column: auto; }.competitors-panel, .remix-panel, .result-panel { max-width: 900px; width: 100%; justify-self: center; }.source-section { grid-template-columns: 230px minmax(0,1fr); }.source-video { height: 390px; }.result-body { grid-template-columns: 260px minmax(370px,1fr); }.scenario-content { grid-template-columns: 1fr; }.scenario-block p { padding-left: 27px; } }
@media (max-width: 760px) { .app-shell { display: block; }.sidebar { position: static; display: block; height: auto; padding: 15px 17px 0; border-right: 0; border-bottom: 1px solid var(--line); }.logo { justify-content: flex-start; padding: 0 0 15px; }.logo-copy { display: grid; }.main-nav { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 13px; }.nav-item { width: auto; padding: 8px 10px; white-space: nowrap; }.nav-item span { display: inline; font-size: 11px; }.nav-item svg { width: 16px; height: 16px; }.nav-item.is-active { box-shadow: inset 0 -2px var(--lime); }.sidebar-spacer, .sidebar-card, .help-button { display: none; }.workspace { padding: 0 12px 20px; }.app-header { min-height: 58px; }.header-crumb { display: none; }.header-actions { margin-left: auto; }.studio-grid { padding-top: 13px; }.panel-heading, .remix-topline, .result-topline { padding-left: 15px; padding-right: 15px; }.platform-tabs { gap: 18px; padding: 0 15px; overflow-x: auto; }.import-form { grid-template-columns: 1fr; padding: 14px 15px; }.import-button { justify-content: center; }.profile-card { margin: 0 15px 16px; }.profile-bottom { align-items: start; flex-direction: column; }.list-heading { gap: 8px; padding: 5px 15px 10px; }.sort-button { font-size: 9px; }.reels-table { margin: 0 8px; overflow-x: auto; }.table-labels, .reel-row { min-width: 590px; }.panel-quote { padding-left: 15px; }.remix-topline h2, .result-topline h2 { font-size: 20px; }.template-button { font-size: 10px; }.source-section, .result-body { grid-template-columns: 1fr; padding-left: 15px; padding-right: 15px; }.source-video { height: min(132vw, 500px); }.source-analysis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.source-analysis h3 { grid-column: 1 / -1; margin-bottom: 0; }.analysis-card { margin: 0; }.analysis-card:nth-of-type(4) { grid-column: 1 / -1; }.engagement { grid-column: 1 / -1; }.new-script-heading { align-items: start; flex-direction: column; padding: 0 15px 11px; }.script-stack { padding: 0 15px; }.result-topline { flex-wrap: wrap; }.publish-status { order: 4; }.download-button { margin-left: auto; }.result-title-row, .tags { padding-left: 15px; padding-right: 15px; }.final-video { height: min(135vw, 520px); }.result-actions, .result-metrics { margin-left: 15px; margin-right: 15px; padding-left: 0; padding-right: 0; }.result-actions { grid-template-columns: 1fr; }.result-metrics { grid-template-columns: 1fr 1fr; }.result-metrics span:last-child { grid-column: 1 / -1; } }
@media (max-width: 430px) { .user-menu > span:nth-child(2), .user-menu > svg, .notification-button { display: none; }.source-analysis { grid-template-columns: 1fr; }.analysis-card:nth-of-type(4), .engagement { grid-column: auto; }.result-title-row input { font-size: 16px; }.scenario-tabs { gap: 11px; padding: 0 10px; }.scenario-tab { font-size: 9px; } }