/* Public Easycut CSS is loaded verbatim before the Cliploom adapter.
   Evidence: scv/raw/easycut-gui-20261016. Service routes remain Cliploom's. */
:root {
  color-scheme: dark;
  --ink: #e4e1e6;
  --muted: #99999f;
  --paper: #101415;
  --card: #1f1f22;
  --line: rgba(255, 255, 255, .10);
  --lime: #ff715e;
  --mint: #a078ff;
  --green: #ff715e;
  --danger: #ff8c7c;
  --sidebar: #101417;
  --radius: 16px;
  --shadow: 0 16px 48px rgba(0, 0, 0, .18);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  background: #101415;
  color: #e4e1e6;
  font-synthesis: none;
}
html, body { background: #101415; min-width: 320px; color: #f5f5f5; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; text-rendering: optimizeLegibility; }
button, input, textarea, select { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, video:focus-visible { outline: 2px solid #ffb4a8; outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: #747477; }
input[type=range] { accent-color: #ff715e; }
.app-shell { min-height: 100dvh; }
.main-shell { margin-left: 224px; width: calc(100% - 224px); background: radial-gradient(ellipse at 0 20%, rgba(144, 54, 34, .09), transparent 52%), radial-gradient(ellipse at 100% 70%, rgba(118, 86, 182, .11), transparent 58%), #101415; }
.sidebar { width: 224px; padding: 21px 14px 18px; background: #101417; border-right: 1px solid rgba(255,255,255,.065); color: #d0d5da; z-index: 60; transition: width .18s ease; }
.brand { min-height: 42px; gap: 9px; padding-left: 4px; font-size: 23px; font-weight: 850; letter-spacing: -.045em; color: #f2f4f5; margin-bottom: 18px; }
.brand-dot, .mobile-brand>span, .footer-brand>span { color: #ff9b8d; }
.brand .brand-mark { display: grid; place-items: stretch; grid-template-columns: 8px 8px; grid-template-rows: 8px 8px; background: linear-gradient(135deg,#8b5cf6,#c972bc 52%,#ff715e); width: 32px; height: 32px; padding: 6px; border: 1px solid #ffffff16; border-radius: 8px; gap: 3px; transform: rotate(-5deg); box-shadow: 0 4px 15px #a66ce826; }
.brand .brand-mark i { display: block; width: 100%; height: 100%; background: #fff; border-radius: 2px; }
.brand .brand-mark i:nth-child(2) { background: #ffffffdd; }
.brand .brand-mark i:nth-child(3) { background: #ffffffa6; transform: none; }
.usage-card { display: flex; align-items: center; flex-shrink: 0; gap: 9px; min-height: 44px; margin: 0 0 22px; border: 1px solid #373032; border-radius: 10px; background: #1d1919; padding: 10px 12px; color: #eddbd6; }
.usage-card>svg { width: 18px; height: 18px; flex-shrink: 0; color: #d2b5af; }
.usage-card strong, .usage-card .button-link { font-size: 11px; font-weight: 700; line-height: 1.4; color: #eddbd6; padding: 0; white-space: normal; }
.workspace-label { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 7px 10px; border: 0; min-height: 38px; color: #eceef0; }
.workspace-label strong { font-size: 16px; font-weight: 400; letter-spacing: .01em; }
.workspace-label>span { color: #8d959e; transform: rotate(90deg); }
.workspace-label svg { width: 17px; height: 17px; }
.main-nav { margin: 7px 0 0; display: grid; gap: 3px; }
.nav-item { position: relative; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid transparent; border-radius: 8px; color: #a5acb4; font-size: 14px; font-weight: 400; }
.nav-item:hover { color: #f0f1f2; background: #1c2227; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item.active { color: #fff; background: linear-gradient(100deg,rgba(91,68,210,.34),rgba(240,68,53,.28)) padding-box,linear-gradient(100deg,rgba(139,114,223,.82),rgba(255,113,94,.88)) border-box; border-color: transparent; font-weight: 400; box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(74,42,119,.18); text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.nav-item[data-action=billing] { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.065); border-radius: 0 0 8px 8px; padding-top: 18px; }
.nav-item[data-action=billing].active { border-radius: 8px; padding-top: 9px; }
.nav-count { background: rgba(255,255,255,.06); color: #b5bcc4; font-size: 10px; }
.sidebar-note { display: none; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,.09); padding: 15px 4px 0; }
.account-button { padding: 0; min-height: 46px; gap: 9px; color: #d0d5da; border: 0; }
.account-button:hover { background: rgba(255,255,255,.035); }
.account-avatar { background: #191e22; border: 1px solid #2b3137; color: #afb7bf; border-radius: 9px; width: 36px; height: 36px; }
.account-button strong { font-size: 12px; font-weight: 600; color: #d0d5da; }
.account-button small { color: #757e88; font-size: 9px; }
.sidebar-foot { margin: 16px 0 0; padding: 0; border: 0; font-size: 8px; color: #626b74; }
.sidebar-collapse { position: absolute; top: 50%; right: 0; transform: translate(50%,-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #353b42; border-radius: 50%; background: #191e23; color: #d0d5da; box-shadow: 0 2px 8px #0004; }
.sidebar-collapse svg { width: 18px; height: 18px; }
.sidebar-mobile-close, .mobile-menu-button, .navigation-backdrop { display: none; }
.topbar { height: 72px; min-height: 72px; padding: 0 32px; border-bottom: 1px solid rgba(255,255,255,.065); background: rgba(16,20,21,.94); backdrop-filter: blur(22px); }
.breadcrumb-label { color: #646b70; font-size: 9px; }
.breadcrumb-divider { color: #34383c; }
.breadcrumb-current { color: #a5acb4; font-size: 12px; }
.connection-tag { color: #8f9994; font-size: 10px; border: 0; background: transparent; }
.connection-tag>span { background: #78cba4; }
.connection-tag.offline { color: #ff9b8d; }
.connection-tag.offline>span { background: #ff715e; }
.topbar-actions { gap: 16px; }
.topbar-actions .button { min-height: 38px; font-size: 12px; border-radius: 10px; }
#workspace { width: 100%; max-width: 1152px; margin: 0 auto; padding: 40px 32px 64px; }
body[data-view=templates] #workspace { max-width: 1104px; }
.page-head { margin: 0 0 28px; gap: 20px; align-items: center; }
.page-head .eyebrow:empty, .page-head .page-subtitle:empty { display: none; }
.page-head h1 { font-size: 36px; font-weight: 900; letter-spacing: -.045em; line-height: 1.2; color: #e4e1e6; margin: 0; }
.page-subtitle { color: #99999f; font-size: 14px; line-height: 1.75; margin-top: 12px; }
.eyebrow { color: #a5a0ac; font-size: 10px; letter-spacing: .08em; font-weight: 700; }
.section-title { color: #e4e1e6; font-size: 23px; font-weight: 800; letter-spacing: -.035em; }
.count-label { color: #85858b; font-size: 13px; font-weight: 500; border: 0; background: none; }
.section-topline { margin-bottom: 20px; }
.button { border-radius: 12px; font-weight: 750; min-height: 44px; font-size: 13px; padding: 10px 17px; box-shadow: none; }
.button-dark, .button-lime { border: 1px solid transparent; background: #ff715e; color: #fff; box-shadow: 0 8px 24px rgba(255,113,94,.12); }
.button-dark:hover, .button-lime:hover { background: #ff836f; color: #fff; }
.button-subtle { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.10); color: #d0ccd5; }
.button-subtle:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff; }
.button-small { min-height: 38px; padding: 8px 13px; }
.button-link, .text-button { color: #c5bdcf; }
.button-link:hover, .text-button:hover { color: #ff9b8d; }
.button-danger { background: #a13f37; color: #fff; border: 1px solid #c45d53; }
.danger-text { color: #c9bbc0; }
.icon-button { background: transparent; color: #92939b; }
.icon-button:hover { background: #ffffff0f; color: #fff; }
.cliploom-metric { margin: -3px auto 48px; color: #f4f3f5; }
.cliploom-metric>strong { font-size: 42px; font-weight: 900; letter-spacing: -.055em; line-height: 1.15; }
.cliploom-metric>span { margin-top: 3px; color: #c4aaa5; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.url-hero { display: flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: none; border-radius: 0; box-shadow: none; max-width: 896px; margin: 0 auto 65px; padding: 0; text-align: center; overflow: visible; }
.url-hero .home-hero_title__72jr1 { font-size: clamp(28px,4vw,44.8px); font-weight: 900; line-height: 1.2; letter-spacing: -.05em; margin: 0; }
.url-hero .home-hero_description__5O7hx { font-size: 16px; line-height: 28px; color: #d4d4d4; margin: 20px auto 0; max-width: 672px; }
.youtube-composer { width: 100%; max-width: 768px; margin: 32px 0 0; }
.youtube-composer .source-input-mode { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0; margin: 0 0 12px; }
.youtube-composer .source-input-mode-tab { min-height: 52px; font-size: 15px; font-weight: 800; border-radius: 11px; }
.source-input-mode-tab svg { width: 18px; height: 18px; }
.youtube-composer .url-console { display: flex; gap: 10px; margin: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: #1b1c1f; padding: 10px; box-shadow: 0 18px 52px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025); }
.youtube-input-row:focus-within { outline: none; border-color: rgba(255,255,255,.23); background: #1e1f22; box-shadow: 0 20px 58px rgba(0,0,0,.32),0 0 0 3px rgba(160,120,255,.07); }
.youtube-input-wrap { position: relative; flex: 1; min-width: 0; }
.youtube-input-row input.url-input { display: block; width: 100%; height: 56px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(10,12,13,.58); padding: 0 58px 0 48px; font-size: 16px; color: #fff; outline: none; }
.youtube-link-icon { display: grid; place-items: center; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); z-index: 1; color: #d5b9b1; font-size: 23px; padding: 0; }
.paste-button svg { width: 18px; height: 18px; }
.youtube-composer .ai-button { width: auto; min-width: 150px; height: 56px; font-size: 15px; font-weight: 800; border: 0; border-radius: 14px; background: linear-gradient(110deg,#6731c4,#7d4bdd 24%,#a078ff 50%,#8858e4 76%,#5a24bc); background-size: 220% 100%; color: #fff; box-shadow: 0 10px 30px rgba(93,43,190,.28); }
.composer-options { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 14px 0 0; gap: 10px 20px; color: #8b8991; font-size: 11px; }
.composer-options label { color: #aaa5b0; gap: 8px; }
.composer-options select { color: #c9c4d0; border: 1px solid #ffffff13; background: #1d1d22; min-height: 32px; border-radius: 8px; font-size: 11px; }
.composer-save-note { color: #9c969f; width: auto!important; }
.hero-workflow { display: block; margin: 19px 0 0!important; font-size: 12px!important; color: #929096!important; font-weight: 400; }
.template-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.template-toolbar .search-field { flex: 1; max-width: 480px; }
.search-field { min-height: 44px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 0 12px; background: #1f1f22; color: #77747d; gap: 10px; }
.search-field input { width: 100%; font-size: 14px; height: 42px; background: none; color: #f5f5f5; border: 0; }
.search-field:focus-within { border-color: #ff715eb3; box-shadow: 0 0 0 2px #ff715e1a; }
.search-field input:focus-visible { outline: none; }
.template-filter { display: flex; padding: 3px; gap: 3px; background: #19191e; border: 1px solid #ffffff10; border-radius: 10px; }
.template-filter button { padding: 8px 12px; border: 0; border-radius: 7px; background: none; color: #8b8792; font-size: 12px; }
.template-filter button.active { background: #35303d; color: #f1ebf6; }
.template-section, .template-section:not(.compact) { margin: 0 0 38px; }
.template-section.compact { margin-top: 44px; }
.template-section .section-title { font-size: 23px; }
.template-grid, .template-section.compact .template-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; margin: 0; padding: 0; overflow: visible; }
.template-card, .template-section.compact .template-card, .template-section:not(.compact) .template-card { position: relative; display: flex; min-width: 0; min-height: 456px; flex-direction: column; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; background: rgba(26,26,30,.72); box-shadow: 0 16px 48px rgba(0,0,0,.18); backdrop-filter: blur(20px); overflow: hidden; text-align: left; transition: transform .3s,border-color .3s,box-shadow .3s; }
.template-card:hover { transform: translateY(-4px); border-color: #ff715e4d; box-shadow: 0 20px 55px rgba(255,113,94,.09); }
.template-card.caption-template { border-color: #35e6e340; }
.template-card.caption-template:hover { border-color: #35e6e380; box-shadow: 0 20px 55px #35e6e314; }
.template-card.selected { border-color: #ff715e80; box-shadow: 0 0 0 1px #ff715e1a,0 16px 48px #0003; }
.template-preview-button { display: flex; width: 100%; margin: 0; padding: 16px 0 0; border: 0; background: none; justify-content: center; }
.template-card .style-composition, .template-section:not(.compact) .style-composition { width: 100%; max-width: 164px; align-self: center; border-radius: 8px; }
.style-composition { font-family: "Editor Pretendard", "Editor V3 Pretendard", -apple-system, sans-serif; font-weight: 700; }
.template-info, .template-section.compact .template-info, .template-section:not(.compact) .template-info { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; padding: 0 7px 0; color: #e4e1e6; }
.template-info h3 { font-size: 16px; font-weight: 700; line-height: 1.375; letter-spacing: -.025em; color: #e4e1e6; }
.template-info p { font-size: 13px; line-height: 1.6; font-weight: 400; color: #b1adb8; min-height: 40px; }
.template-tag { padding: 4px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; font-size: 11px; line-height: 1.2; color: #8c8793; background: #ffffff03; }
.template-choose { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; margin-top: 3px; padding: 9px 0 0; border: 0; border-top: 1px solid #ffffff0b; color: #99929f; background: none; }
.template-choose svg { width: 13px; height: 13px; }
.template-select-label, .template-section.compact .template-select-label { color: #99929f; font-size: 11px; padding: 0; }
.template-card.selected .template-select-label { color: #ffa699; }
.template-favorite { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; background: rgba(0,0,0,.70); color: #fff; border: 1px solid #ffffff33; border-radius: 30px; box-shadow: 0 8px 24px #0006; backdrop-filter: blur(12px); font-size: 11px; font-weight: 800; }
.template-favorite svg { width: 12px; height: 12px; }
.template-favorite.active { background: #ff715e; border-color: #ff8c7cb3; }
.template-favorite.active svg { fill: currentColor; }
.template-favorite:hover { border-color: #ffffff66; background: #000d; }
.template-favorite.active:hover { background: #ff836f; }
.template-note { color: #77727f; font-size: 11px; line-height: 1.8; margin-top: 20px; }
.create-template-card { justify-content: center; align-items: center; background: #1c1c2033!important; border-style: dashed!important; text-align: center!important; }
.create-template-symbol { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid #ffffff14; border-radius: 20px; background: #ffffff05; color: #9d97a9; margin-bottom: 18px; }
.create-template-symbol svg { width: 30px; height: 30px; }
.create-template-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.025em; color: #ddd9e2; }
.create-template-card p { margin-top: 10px; font-size: 12px; color: #797380; line-height: 1.7; }
.template-grid>.empty-state { grid-column: 1/-1; }
.project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-bottom: 28px; }
.project-card { background: #1b1c1e; border: 1px solid #ffffff14; border-radius: 16px; box-shadow: none; overflow: hidden; }
.project-card:hover { border-color: #ff715e50; box-shadow: 0 12px 32px #0003; transform: translateY(-2px); }
.project-thumbnail { height: 175px; background: #202024!important; border: 0; }
.project-thumbnail .thumbnail-grid { opacity: .08; }
.project-thumbnail>svg { color: #77707f; }
.project-result-video { background: #0c0c0e; }
.thumbnail-mark { color: #76707e; }
.thumbnail-ready { background: #0e1814e8; color: #8bd0ad; border-color: #bdebd515; }
.project-card-body { padding: 18px 16px; }
.project-card h3 { color: #ece8ef; font-size: 14px; font-weight: 700; }
.project-meta, .clip-count { color: #88828e; font-size: 11px; }
.project-card-bottom { border-top-color: #ffffff0b; margin-top: 15px; padding-top: 13px; }
.status-badge { color: #a09aa9; background: #ffffff08; border: 0; }
.status-badge.ready { color: #8ad4b4; background: #1d4d391f; }
.status-badge.working { color: #bba2f1; background: #7b4bdc1c; }
.status-badge.failed { color: #ff9e91; background: #ff715e14; }
.card-menu { background: #050506d9; color: #d0c8d5; border: 1px solid #ffffff40; border-radius: 12px; box-shadow: 0 8px 24px #0007; }
.new-project-card { border: 1px dashed #ffffff20; background: #ffffff02; border-radius: 16px; min-height: 285px; }
.new-project-card:hover { background: #ffffff04; border-color: #ff715e50; }
.new-project-card .new-circle { background: #28242f; color: #b19fc8; border: 1px solid #ffffff14; }
.new-project-card strong { color: #c9c1d3; }
.new-project-card small { color: #7c7585; }
.sort-select { min-height: 44px; border: 1px solid #ffffff15; border-radius: 12px; color: #b6afc0; background: #1f1f22; font-size: 12px; }
.empty-state { border: 1px solid #ffffff13; border-radius: 16px; background: #ffffff02; color: #93899e; }
.empty-state>svg { color: #95839f; background: #ad7ce81a; }
.empty-state h3 { color: #d8d0e0; }
.empty-state p { color: #8f859a; }
.tip-banner { color: #958b9f; background: #ffffff02; border: 1px solid #ffffff0c; }
.tip-banner svg { color: #b0a1c4; }
.alert { background: #8e65c915; border: 1px solid #b58ce922; color: #c5b8d7; border-radius: 12px; }
.alert.error { background: #ff715e0d; border-color: #ff715e25; color: #f4b3a9; }
.alert p { color: inherit; }
.editor-head h1 { font-size: 28px; }
.back-button { color: #a59aad; font-size: 12px; }
.back-button:hover { color: #ff9b8d; }
.editor-meta { color: #8c8297; }
.source-link-line { color: #82778d; }
.source-link-line a, .source-link-line strong { color: #b8a8ca; }
.editor-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 20px; }
.preview-panel, .clips-panel, .editor-settings, .project-process { border: 1px solid #ffffff10; border-radius: 16px; background: #1b1b20; box-shadow: none; }
.preview-heading, .preview-foot, .preview-scrubber { background: #1f1f24; border-color: #ffffff0e; color: #c9c1d2; }
.preview-heading>strong { color: #dfd7e7; font-size: 13px; }
.preview-stage { background: #101014; background-image: radial-gradient(#ffffff07 1px,transparent 1px); background-size: 15px 15px; }
.preview-hint { color: #8d8298; }
.preview-controls { color: #a296af; }
.preview-controls button { color: #d4c8e0; border-color: #ffffff16; background: #ffffff05; }
.preview-frame { font-family: "Editor Pretendard", "Editor V3 Pretendard", -apple-system, sans-serif; }
.preview-frame .preview-title-line { font-weight: 700; }
.clips-panel { padding: 20px; }
.clips-panel .section-title { font-size: 16px; }
.clip-list-note { color: #8e809a; }
.clip-item { background: #222127; border: 1px solid #ffffff0d; border-radius: 11px; }
.clip-item:hover { background: #29262f; }
.clip-item.active { background: #352730; border-color: #ff715e60; box-shadow: none; }
.clip-item strong { color: #d6cddd; }
.clip-item small { color: #92849f; }
.clip-item>svg { color: #82718e; }
.clip-number { color: #a08aaf; background: #312a38; }
.clip-item.active .clip-number { color: #ffb3a6; background: #ff715e22; }
.settings-header, .settings-section, .settings-actions { border-color: #ffffff0c; background: transparent; }
.settings-header h2 { color: #e5dbe9; }
.settings-label { color: #c9bbd3; }
.settings-label>span { color: #8d7d9b; }
.save-indicator { color: #8dc2a6; background: #367b541a; }
.save-indicator.dirty { color: #e5be91; background: #af724718; }
.editor-settings input:not([type=range]), .editor-settings textarea, .form-field input, .form-field textarea, .form-field select, .time-fields input, .caption-time input, .caption-row textarea { background: #101015; border: 1px solid #ffffff14; color: #e4dce9; border-radius: 9px; }
.form-field label { color: #c9c0d1; font-size: 13px; }
.form-field input, .form-field select { min-height: 44px; }
.form-field small, .field-note { color: #91829e; }
.time-fields label, .duration-hint { color: #9685a3; }
.ratio-button { color: #a492b4; background: #18141f; border-color: #ffffff12; }
.ratio-button.active { color: #ffc1b7; background: #ff715e15; border-color: #ff715e70; }
.ratio-shape { border-color: currentColor; }
.settings-section .style-button { background: #19151f; color: #b3a4bf; border-color: #ffffff12; }
.settings-section .style-button.active { border-color: #ff715e80; box-shadow: 0 0 0 1px #ff715e25; color: #ffd3cb; }
.segmented-control { background: #141219; border: 1px solid #ffffff0a; }
.segmented-control button { color: #8e7d9e; }
.segmented-control button.active { color: #f3e8fa; background: #383040; box-shadow: none; }
.preview-heading .segmented-control, .preview-mode { background: #141219; border: 1px solid #ffffff0c; padding: 3px; }
.preview-heading .segmented-control button, .preview-mode button { background: transparent; color: #9b8aa8; }
.preview-heading .segmented-control button.active, .preview-mode button.active { background: #383040; color: #f3e8fa; box-shadow: none; }
.crop-control, .crop-control output { color: #ad99bd; }
.caption-row { border-color: #ffffff0a; }
.caption-time { color: #8a759b; }
.caption-review-note { font-size: 11px; line-height: 1.7; color: #bda8c8; margin: -2px 0 13px; }
.settings-actions { background: #17131d; }
.render-note { color: #8f7c9f!important; }
.inline-errors { color: #f2a69b; }
.process-top>svg { color: #b892e5; }
.process-top h2 { color: #e1d5e9; }
.process-top p { color: #9c87aa; }
.progress-track { background: #312437; }
.progress-track>span { background: linear-gradient(90deg,#8b5cf6,#ff715e); }
.process-steps>span { color: #83708f; }
.process-steps b { border-color: #493651; color: #9b7bad; }
.process-steps .active { color: #f1c7e5; }
.process-steps .active b { background: #a56be0; border-color: #a56be0; color: #fff; }
.process-steps .done { color: #bd9bcd; }
.process-steps .done b { color: #d7b7e4; background: #553463; border-color: #6f4580; }
.project-upload-inline label { color: #a58cb3; }
.modal { color: #e8deee; background: #1b191f; border: 1px solid #ffffff1c; border-radius: 20px; box-shadow: 0 28px 90px #000a; }
.modal::backdrop { background: #000a; backdrop-filter: blur(4px); }
.modal h2 { color: #eee5f3; font-weight: 850; letter-spacing: -.035em; }
.modal-description { color: #a899b1; }
.auth-symbol { color: #c292e0; }
.auth-switch { color: #9a85a9; }
.password-help .text-button { color: #aa8cba; }
.file-drop { background: #221b2a; border-color: #6e4b825e; border-radius: 12px; }
.file-drop.dragover { background: #302039; border-color: #cf93ee; }
.upload-symbol { color: #c490e0; background: #5b306d30; }
.file-drop strong { color: #c4a1d4; }
.file-drop>span:last-of-type { color: #92749f; }
.upload-progress { color: #c395d5; }
.form-error { color: #ffb0a4; background: #ff715e12; border: 1px solid #ff715e22; }
.confirm-modal .eyebrow { color: #c0a5cf; }
.billing-status-card, .plan-card, .billing-result { background: #1d1923; border-color: #ffffff14; color: #dcd0e6; }
.plan-symbol { background: #6b3a8730; color: #d39bed; }
.billing-current h2, .plan-card h3 { color: #ead8f4; }
.billing-current p, .plan-tagline, .billing-footnote, .subscription-actions p { color: #a68ab6; }
.billing-usage { border-color: #ffffff10; }
.billing-usage .usage-top, .billing-usage .usage-top>span { color: #c3a3d2; }
.billing-usage .usage-meter { background: #38233f; }
.billing-usage .usage-meter span { background: linear-gradient(90deg,#a078ff,#ff715e); }
.billing-usage .usage-caption { color: #9d7cae; }
.plan-card.featured { border-color: #ff715e80; box-shadow: 0 0 0 2px #ff715e10; }
.plan-card.featured:before { background: #ff715e; color: #fff; }
.plan-price { color: #f4e7fb; }
.plan-price small { color: #a587b4; }
.plan-features { border-color: #ffffff10; }
.plan-features li { color: #b99aca; }
.plan-features li svg { color: #d1a4e7; }
.subscription-actions { border-color: #ffffff10; }
.billing-result h1 { color: #f0e4f8; }
.billing-result p { color: #ad90c0; }
.billing-result>svg { color: #c295de; }
.billing-result.error>svg { color: #ff9b8d; }
.toast-region { left: calc(224px + (100% - 224px)/2); }
.toast { background: #322b3b; border: 1px solid #725b8650; color: #eee3f7; box-shadow: 0 12px 40px #0007; }
.toast.error { background: #4a272a; border-color: #a05f5650; color: #ffdad3; }
.spinner { border-color: #ffffff2b; border-top-color: #b988e7; }
.main-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px 24px; min-height: 110px; padding: 28px 32px; border-top: 1px solid #ffffff0c; background: #0b1011; color: #6f7475; font-size: 10px; }
.footer-brand { font-size: 20px; letter-spacing: -.045em; font-weight: 850; color: #e6e8e9; }
.main-footer .text-button { font-size: 10px; color: #9a9da0; }
.main-footer>span:last-child { display: inline; }
.skip-link { background: #ff715e; color: #fff; }
.sidebar-collapsed .sidebar { width: 76px; padding-inline: 10px; }
.sidebar-collapsed .main-shell { margin-left: 76px; width: calc(100% - 76px); }
.sidebar-collapsed .brand>span:last-child, .sidebar-collapsed .workspace-label, .sidebar-collapsed .usage-card strong, .sidebar-collapsed .usage-card .button-link, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-count, .sidebar-collapsed .sidebar-foot, .sidebar-collapsed .account-button>span:not(.account-avatar) { display: none; }
.sidebar-collapsed .brand { padding: 0; justify-content: center; }
.sidebar-collapsed .usage-card { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .nav-item { font-size: 0; justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
.sidebar-collapsed .account-button { justify-content: center; }
.sidebar-collapsed .toast-region { left: calc(76px + (100% - 76px)/2); }
@media (min-width:1550px) { #workspace { max-width: 1216px; } body[data-view=templates] #workspace { max-width: 1104px; } .template-grid, .template-section.compact .template-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:1200px) { .editor-layout { grid-template-columns: minmax(0,1fr) 290px; } .template-grid, .template-section.compact .template-grid { gap: 18px; } .template-card, .template-section:not(.compact) .template-card, .template-section.compact .template-card { padding: 13px; } .template-info, .template-section.compact .template-info, .template-section:not(.compact) .template-info { padding: 0 3px; } .template-favorite { top: 16px; right: 16px; font-size: 10px; padding-inline: 10px; } .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:1023px) { .template-grid, .template-section.compact .template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .template-card, .template-section:not(.compact) .template-card, .template-section.compact .template-card { padding: 16px; } .template-toolbar { flex-wrap: wrap; } .template-toolbar .search-field { max-width: none; flex-basis: calc(100% - 150px); } .template-toolbar>.button { margin-left: auto; } .editor-layout { grid-template-columns: minmax(0,1fr); } .editor-settings { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); } .settings-section { border-right-color: #ffffff0c; } .caption-list { grid-template-columns: 1fr 1fr; } }
@media (max-width:920px) {
  .sidebar, .sidebar-collapsed .sidebar { position: fixed; inset: 0 auto 0 0; width: min(304px,86vw); height: 100dvh; display: flex; padding: 22px 16px; transform: translateX(-110%); transition: transform .2s ease; background: #101417; border-right: 1px solid #30343a; border-radius: 0 18px 18px 0; box-shadow: 18px 0 60px #0006; z-index: 90; }
  .navigation-open .sidebar { transform: translateX(0); }
  .navigation-backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: #0009; border: 0; padding: 0; backdrop-filter: blur(3px); }
  .sidebar .brand, .sidebar-collapsed .brand { display: flex; justify-content: flex-start; font-size: 23px; margin-bottom: 18px; }
  .sidebar-collapsed .brand>span:last-child { display: inline; }
  .sidebar .workspace-label, .sidebar-collapsed .workspace-label { display: flex; }
  .sidebar .sidebar-bottom, .sidebar .sidebar-foot, .sidebar-collapsed .sidebar-foot { display: block; }
  .sidebar .usage-card strong, .sidebar .usage-card .button-link, .sidebar .nav-label, .sidebar .nav-count, .sidebar .account-button>span:not(.account-avatar) { display: initial; }
  .sidebar .main-nav { position: static; display: grid; margin: 7px 0 0; padding: 0; border: 0; background: none; backdrop-filter: none; gap: 3px; }
  .sidebar .nav-item, .sidebar-collapsed .nav-item { width: 100%; display: flex; justify-content: flex-start; padding: 12px 11px; min-height: 46px; gap: 10px; font-size: 15px; }
  .sidebar .nav-item svg { width: 19px; height: 19px; }
  .sidebar .nav-count { margin-left: auto; }
  .sidebar .usage-card, .sidebar-collapsed .usage-card { display: flex; justify-content: flex-start; padding: 10px 12px; }
  .sidebar .account-button { justify-content: flex-start; }
  .sidebar-mobile-close { display: grid; position: absolute; top: 23px; right: 16px; width: 36px; height: 36px; }
  .sidebar-collapse { display: none; }
  .main-shell, .sidebar-collapsed .main-shell { margin-left: 0; width: 100%; padding-bottom: 0; }
  .topbar { height: 68px; min-height: 68px; padding: 0 16px; background: #101417; }
  .mobile-brand { display: block; font-size: 22px; font-weight: 850; letter-spacing: -.045em; color: #f2f4f5; }
  .breadcrumb-label, .breadcrumb-divider, .breadcrumb-current { display: none; }
  .topbar-actions { gap: 10px; }
  .topbar-actions .button { display: none; }
  .connection-tag { display: none; }
  .mobile-account-button, .mobile-menu-button { display: grid; background: none; width: 36px; height: 36px; color: #a5acb4; }
  .mobile-menu-button svg { width: 21px; height: 21px; }
  #workspace { padding: 28px 20px 52px; }
  .page-head { margin-bottom: 24px; align-items: flex-start; }
  .page-head h1 { font-size: 28px; letter-spacing: -.045em; }
  .page-head-actions .button { font-size: 11px; padding: 9px 12px; }
  .dashboard-head .page-head-actions { display: flex; }
  .cliploom-metric { margin: 0 auto 42px; }
  .cliploom-metric>strong { font-size: 38px; }
  .url-hero { margin-bottom: 52px; }
  .url-hero .home-hero_title__72jr1 { font-size: 28px; line-height: 33.6px; letter-spacing: -.045em; }
  .url-hero .home-hero_description__5O7hx { margin-top: 24px; font-size: 14px; line-height: 28px; }
  .youtube-composer { margin-top: 32px; }
  .youtube-composer .source-input-mode { gap: 6px; padding: 5px; margin-bottom: 12px; }
  .youtube-composer .source-input-mode-tab { min-height: 48px; font-size: 13px; gap: 7px; padding: 0 10px; }
  .youtube-composer .url-console { flex-direction: column; gap: 10px; padding: 10px; }
  .youtube-input-wrap { width: 100%; }
  .youtube-input-row input.url-input { min-height: 56px; font-size: 16px; padding: 0 55px 0 46px; }
  .youtube-composer .ai-button { width: 100%; min-height: 56px; font-size: 15px; }
  .composer-options { gap: 9px 16px; font-size: 10px; }
  .composer-save-note { width: auto!important; }
  .composer-options select { font-size: 11px; }
  .hero-workflow { font-size: 11px!important; margin-top: 16px!important; }
  .section-title, .template-section .section-title { font-size: 21px; }
  .project-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-card-main { display: grid; grid-template-columns: 106px minmax(0,1fr); width: 100%; min-height: 116px; }
  .project-thumbnail { width: 106px; height: 100%; min-height: 116px; }
  .project-card-body { padding: 14px 40px 13px 13px; min-width: 0; }
  .project-card h3 { font-size: 13px; line-height: 1.55; }
  .project-meta { font-size: 10px; gap: 4px; margin-top: 7px; }
  .project-card-bottom { border: 0; margin-top: 10px; padding: 0; flex-wrap: wrap; justify-content: flex-start; gap: 7px; }
  .clip-count { text-align: left; font-size: 10px; }
  .card-menu { width: 31px; height: 31px; top: 9px; right: 9px; }
  .thumbnail-ready { font-size: 8px; padding: 3px 4px; bottom: 5px; left: 5px; }
  .thumbnail-ready svg { width: 9px; height: 9px; }
  .new-project-card { min-height: 130px; padding: 20px; gap: 9px; }
  .template-toolbar { gap: 12px; margin-bottom: 24px; }
  .template-toolbar .search-field { flex-basis: 100%; }
  .template-toolbar>.button { font-size: 12px; }
  .template-filter button { font-size: 12px; }
  .template-grid, .template-section.compact .template-grid { gap: 18px; }
  .template-card, .template-section.compact .template-card, .template-section:not(.compact) .template-card { min-height: 456px; padding: 14px; }
  .template-favorite { min-height: 36px; top: 17px; right: 17px; padding: 0 10px; font-size: 10px; }
  .template-info h3 { font-size: 15px; }
  .template-info p { font-size: 12px; }
  .template-tag { font-size: 10px; }
  .project-tools { gap: 8px; }
  .project-tools .search-field { max-width: 170px; }
  .project-tools .search-field input { font-size: 12px; }
  .sort-select { font-size: 11px; }
  .editor-head h1 { font-size: 24px; }
  .editor-head .page-head-actions { display: flex; flex-direction: row; }
  .editor-settings { grid-template-columns: 1fr; }
  .settings-section { border-right: 0; }
  .settings-header, .settings-section.captions-section, .settings-actions { grid-column: 1; }
  .caption-list { grid-template-columns: 1fr; }
  .caption-row textarea, .form-field input, .form-field textarea, .form-field select { font-size: 16px; }
  .preview-heading { padding: 12px; }
  .preview-heading>strong { font-size: 12px; }
  .preview-stage { min-height: 430px; padding: 22px; }
  .preview-frame { max-width: 225px; }
  .clips-panel { padding: 16px; }
  .clip-list-note { display: none; }
  .project-process { padding: 24px 20px; }
  .toast-region, .sidebar-collapsed .toast-region { left: 50%; bottom: 20px; }
  .main-footer { padding: 28px 20px; gap: 14px 20px; }
  .main-footer>span:nth-child(2) { display: none; }
  .modal { padding: 24px; border-radius: 20px; }
  .modal h2 { font-size: 23px; }
}
@media (max-width:639px) { .template-grid, .template-section.compact .template-grid { grid-template-columns: 1fr; } .template-card, .template-section:not(.compact) .template-card, .template-section.compact .template-card { min-height: 456px; padding: 20px; } .template-card .style-composition, .template-section:not(.compact) .style-composition { max-width: 164px; } .template-info, .template-section.compact .template-info, .template-section:not(.compact) .template-info { width: 100%; padding: 0 4px; margin-top: 27px; } .template-favorite { top: 20px; right: 20px; min-height: 44px; font-size: 12px; padding: 0 12px; } .template-info p { min-height: 0; } .template-choose { margin-top: 6px; } .create-template-card { min-height: 230px!important; } .page-head { flex-wrap: wrap; } .page-head-actions { margin-left: auto; } }
@media (max-width:390px) { #workspace { padding-inline: 16px; } .url-hero .home-hero_title__72jr1 { font-size: 27px; } .youtube-input-row input.url-input { font-size: 14px; padding-left: 39px; } .youtube-link-icon { left: 12px; } .composer-options { gap: 8px 10px; } .project-card-main { grid-template-columns: 88px minmax(0,1fr); } .project-thumbnail { width: 88px; } .project-card h3 { font-size: 12px; } .project-meta { flex-wrap: wrap; } }
@media (prefers-reduced-motion:reduce) { .ai-button { animation: none; } .sidebar, .template-card { transition: none; } }

/* Fullscreen editor: measured from the reference editor; existing project data and renderer stay local. */
body.fullscreen-editor { overflow: hidden; background: #131316; }
body.fullscreen-editor .app-shell { min-height: 100dvh; }
body.fullscreen-editor .sidebar, body.fullscreen-editor .topbar, body.fullscreen-editor .main-footer, body.fullscreen-editor .navigation-backdrop { display: none!important; }
body.fullscreen-editor .main-shell { margin: 0; width: 100%; min-width: 0; padding: 0; }
body.fullscreen-editor #workspace { position: fixed; inset: 0; z-index: 40; width: 100%; max-width: none; height: 100dvh; min-height: 0; padding: 0; margin: 0; overflow: hidden; background: #131316; }
body.fullscreen-editor .toast-region { left: 50%; bottom: 24px; }
.clip-editor { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; color: #eeeef1; background: #131316; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; }
.clip-editor button:focus-visible, .clip-editor input:focus-visible, .clip-editor textarea:focus-visible, .clip-editor a:focus-visible { outline: 2px solid #c6a6ff; outline-offset: 3px; }
.clip-editor button, .clip-editor input, .clip-editor textarea { font: inherit; }
.clip-editor-topbar { height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 24px; background: #111114; border-bottom: 1px solid #ffffff0b; }
.clip-editor-project { min-width: 0; display: flex; align-items: center; gap: 12px; }
.clip-editor-project-line { width: 3px; height: 32px; border-radius: 3px; background: #ff715e; flex: 0 0 3px; }
.clip-editor-project>div { min-width: 0; }
.clip-editor-project small { display: block; max-width: 480px; margin-bottom: 5px; color: #77777f; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-editor-project h1 { max-width: 560px; color: #f1f1f3; font-size: 14px; font-weight: 650; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.clip-editor-top-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.clip-editor-top-actions .save-indicator { margin-right: 7px; font-size: 11px; color: #92929a; white-space: nowrap; }
.clip-editor-top-actions .save-indicator:before { background: #8b8b92; }
.clip-editor-top-actions .save-indicator.dirty { color: #e4b786; }
.clip-editor-top-actions .save-indicator.dirty:before { background: #e4b786; }
.clip-editor-top-actions .button { min-height: 34px; width: auto; margin: 0; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; gap: 6px; }
.clip-editor-top-actions .button svg { width: 15px; height: 15px; }
.clip-editor-top-actions .clip-editor-save, .clip-editor-top-actions .clip-editor-exit, .clip-editor-top-actions .clip-editor-download { color: #c6c6ce; background: transparent; border: 1px solid #ffffff1b; }
.clip-editor-top-actions .clip-editor-save:hover, .clip-editor-top-actions .clip-editor-exit:hover, .clip-editor-top-actions .clip-editor-download:hover { color: #fff; background: #ffffff0d; border-color: #ffffff35; }
.clip-editor-top-actions .clip-editor-apply { min-width: 118px; background: #f8f8fa; border: 1px solid #fff; color: #222226; box-shadow: none; }
.clip-editor-top-actions .clip-editor-apply:hover { background: #e4e4e8; color: #151518; transform: none; }
.clip-editor-body { flex: 1; min-height: 0; min-width: 0; display: grid; position: relative; grid-template-columns: 88px 412px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 300px; }
.clip-editor-rail { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 7px; padding: 14px 8px; background: #111114; border-right: 1px solid #ffffff08; overflow-y: auto; }
.clip-editor-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 66px; gap: 8px; border: 0; border-radius: 12px; background: transparent; color: #92929a; font-size: 11px!important; flex: 0 0 66px; }
.clip-editor-tool svg { width: 22px; height: 22px; stroke-width: 1.65; }
.clip-editor-tool:hover { color: #e9e9ed; background: #ffffff06; }
.clip-editor-tool.active { background: #303033; color: #fff; }
.clip-editor .clip-editor-settings { grid-column: 2; grid-row: 1 / 3; position: static; display: flex; flex-direction: column; width: auto; min-width: 0; max-width: none; height: 100%; max-height: none; padding: 22px; border: 0; border-right: 1px solid #ffffff0b; border-radius: 0; background: #18181b; box-shadow: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #45454b transparent; }
.clip-editor-panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 26px; flex-shrink: 0; margin-bottom: 24px; }
.clip-editor-panel-heading h2 { color: #f0f0f2; font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.clip-editor-panel-heading .icon-button { width: 26px; height: 26px; padding: 5px; color: #85858d; border-radius: 6px; }
.clip-editor .clip-editor-settings .settings-section { width: 100%; padding: 0; margin: 0 0 26px; border: 0; min-width: 0; }
.clip-editor .clip-editor-settings .settings-label { margin-bottom: 12px; color: #d9d9df; font-size: 13px; font-weight: 550; }
.clip-editor .clip-editor-settings .settings-label>span { font-size: 11px; color: #72727b; font-weight: 400; }
.clip-editor .clip-editor-settings .settings-section>h3 { font-size: 15px; font-weight: 650; margin-bottom: 10px; line-height: 1.6; }
.clip-editor .clip-editor-settings .form-field textarea, .clip-editor #currentCaptionText { width: 100%; min-height: 114px; resize: vertical; border: 1px solid #ffffff0b; border-radius: 14px; background: #252528; padding: 16px; color: #f1f1f4; font-size: 15px; line-height: 1.65; letter-spacing: -.01em; }
.clip-editor .clip-editor-settings .form-field textarea:focus, .clip-editor #currentCaptionText:focus { border-color: #878292; background: #29292c; }
.clip-editor .clip-editor-settings .time-input, .clip-editor .clip-editor-settings .caption-time input { background: #29292d; border-color: #ffffff10; color: #dddde4; border-radius: 9px; }
.clip-editor .clip-editor-settings .time-fields { gap: 12px; }
.clip-editor .clip-editor-settings .time-fields label { font-size: 11px; color: #85858f; margin-bottom: 8px; }
.clip-editor .clip-editor-settings .time-input { width: 100%; padding: 12px; font-size: 13px; }
.clip-editor .clip-editor-settings .duration-hint, .clip-editor .caption-review-note { color: #797982; font-size: 11px; line-height: 1.7; }
.clip-editor .clip-editor-settings .duration-hint { margin-top: 12px; }
.clip-caption-enable-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.clip-caption-enable-row strong { display: block; font-size: 13px; font-weight: 600; }
.clip-caption-enable-row small { display: block; margin-top: 7px; color: #787881; font-size: 11px; }
.clip-caption-switch { position: relative; width: 38px; height: 22px; border: 0; border-radius: 20px; background: #49494f; padding: 3px; }
.clip-caption-switch span { display: block; width: 16px; height: 16px; background: #dddde4; border-radius: 50%; transition: transform .16s; }
.clip-caption-switch[aria-checked=true] { background: #b6a4ee; }
.clip-caption-switch[aria-checked=true] span { transform: translateX(16px); background: #fff; }
.current-caption-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #d1d1d8; font-size: 12px; }
.current-caption-label>div { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; color: #85858e; font-size: 11px; }
.current-caption-label .icon-button { width: 23px; height: 23px; padding: 4px; background: none; color: #b3b3bd; }
.current-caption-label .icon-button svg { width: 14px; height: 14px; }
.current-caption-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 11px; color: #6f6f79; font-size: 10px; font-variant-numeric: tabular-nums; }
.current-caption-footer .button { margin: 0; padding: 0; min-height: 24px; font-size: 11px; color: #aaa4be; }
.clip-editor-current-caption>.caption-review-note { margin-top: 17px; }
.clip-editor-font-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid #ffffff0a; }
.clip-font-picker { position: relative; width: 100%; }
.clip-font-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid #ffffff08; border-radius: 14px; background: #2b2b30; color: #f4f4f7; font-size: 15px; text-align: left; }
.clip-font-trigger:hover { background: #333338; }
.clip-font-trigger svg { width: 16px; height: 16px; color: #a3a3ad; transform: rotate(90deg); }
.clip-font-trigger[aria-expanded=true] { border-color: #7d718e; }
.clip-font-trigger[aria-expanded=true] svg { transform: rotate(-90deg); }
.clip-font-options { position: relative; z-index: 5; margin-top: 6px; width: 100%; max-height: 300px; overflow-y: auto; border: 1px solid #45434b; border-radius: 14px; padding: 6px; background: #252529; box-shadow: 0 12px 24px #0004; scrollbar-width: thin; scrollbar-color: #5a565f transparent; }
.clip-font-options [role=option] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 42px; padding: 10px 12px; border: 0; border-radius: 8px; color: #d7d7df; background: none; text-align: left; font-size: 15px; }
.clip-font-options [role=option]:hover, .clip-font-options [role=option]:focus { background: #3b3744; color: #fff; outline-offset: -2px; }
.clip-font-options [role=option][aria-selected=true] { background: #34303e; color: #fff; }
.clip-font-options [role=option] svg { display: none; width: 15px; height: 15px; color: #c5b3f4; }
.clip-font-options [role=option][aria-selected=true] svg { display: block; }
.caption-font-scope { margin-top: 10px; color: #8a8695; font-size: 11px; }
.clip-editor #captionFontError { margin-top: 10px; font-size: 12px; }
.clip-editor .clip-editor-settings .ratio-grid { gap: 6px; }
.clip-editor .clip-editor-settings .ratio-button { background: #242427; color: #a4a4ad; border: 1px solid #3a3a40; border-radius: 10px; padding: 12px 6px; font-size: 11px; }
.clip-editor .clip-editor-settings .ratio-button.active { border-color: #b9a2ee; color: #e2d9f9; background: #302b3c; }
.clip-editor .clip-editor-settings .style-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.clip-editor .clip-editor-settings .style-button { background: #232326; border-color: #3a3a41; border-radius: 12px; color: #b5b5c0; padding: 12px; font-size: 11px; }
.clip-editor .clip-editor-settings .style-button.active { border-color: #bc9dec; color: #e5d7ff; background: #30283b; }
.clip-editor .clip-editor-settings .style-button .style-composition { max-width: 95px; border-radius: 5px; margin-bottom: 11px; }
.clip-editor .clip-editor-settings [data-editor-panel=comments]>.style-composition { max-width: 164px; margin: 22px auto; }
.clip-editor .clip-editor-settings .segmented-control { background: #252528; border: 1px solid #ffffff0b; padding: 5px; border-radius: 10px; }
.clip-editor .clip-editor-settings .segmented-control button { padding: 11px; color: #8e8e98; font-size: 12px; }
.clip-editor .clip-editor-settings .segmented-control button.active { color: #f0e9fc; background: #494151; }
.clip-editor .clip-editor-settings .crop-control { gap: 10px; color: #8a8a95; }
.clip-editor .clip-editor-settings .crop-control output { color: #bdb3d2; background: #33303a; border-color: #45404f; }
.clip-editor .clip-editor-settings input[type=range] { accent-color: #bca4ea; }
.clip-editor .clip-editor-settings .caption-list { display: flex; flex-direction: column; gap: 12px; max-height: none; padding-right: 0; }
.clip-editor .clip-editor-settings .caption-row { padding: 12px; border: 1px solid #ffffff0b; background: #232326; border-radius: 12px; }
.clip-editor .clip-editor-settings .caption-row textarea { background: #2c2c30; border-color: #ffffff0b; color: #e6e6ec; font-size: 14px; line-height: 1.6; padding: 12px; }
.clip-editor .clip-editor-settings .caption-time input { font-size: 11px; }
.clip-editor .clip-editor-settings .captions-section>.caption-review-note { margin-bottom: 18px; }
.clip-editor .clip-editor-settings .settings-actions { order: 5; margin: 0; padding: 0; border: 0; background: none; display: block; }
.clip-editor .clip-editor-settings .settings-actions .render-note { display: none; }
.clip-editor .clip-editor-settings .settings-actions .inline-errors { margin-top: 15px; color: #ff9e90; font-size: 12px; line-height: 1.65; }
.clip-editor .clip-editor-settings .clips-panel { padding: 0; margin: 0 0 24px; border: 0; background: none; box-shadow: none; border-radius: 0; }
.clip-editor .clip-editor-settings .clips-panel .section-topline { margin-bottom: 14px; }
.clip-editor .clip-editor-settings .clips-panel .section-title { font-size: 14px; }
.clip-editor .clip-editor-settings .clip-list-note { display: none; }
.clip-editor .clip-editor-settings .clip-item { padding: 13px 11px; border-radius: 10px; background: #252528; border-color: #ffffff0b; gap: 10px; }
.clip-editor .clip-editor-settings .clip-item.active { border-color: #a792d7; background: #302b39; }
.clip-editor .clip-editor-settings .clip-item .clip-number { color: #c2b3e0; background: #ffffff08; width: 25px; height: 25px; flex-basis: 25px; font-size: 11px; }
.clip-editor .clip-editor-settings .clip-item strong { color: #dcdce3; font-size: 12px; }
.clip-editor .clip-editor-settings .clip-item small { color: #80808c; font-size: 10px; margin-top: 6px; }
.clip-editor .clip-editor-settings .clip-item>svg { width: 13px; height: 13px; }
.clip-editor .clip-editor-reset { width: 100%; min-height: 38px; margin: auto 0 0; padding: 12px; background: #ffffff04; border: 1px solid #ffffff0b; border-radius: 10px; color: #7e7e88; font-size: 11px; }
.clip-editor .clip-editor-reset:hover { background: #ffffff09; color: #c9c9d0; }
.clip-editor-reset svg { width: 13px; height: 13px; }
.clip-editor-stage { grid-column: 3; grid-row: 1; position: relative; min-width: 0; min-height: 0; background: #131316; }
.clip-editor .clip-editor-stage .preview-panel { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; background: #131316; box-shadow: none; overflow: hidden; }
.clip-editor .clip-editor-stage .preview-heading { position: absolute; top: 13px; left: 18px; z-index: 3; padding: 0; border: 0; background: none; }
.clip-editor .clip-editor-stage .preview-heading>strong { display: none; }
.clip-editor .clip-editor-stage .preview-heading .segmented-control { padding: 3px; border: 1px solid #ffffff09; border-radius: 8px; background: #18181be6; }
.clip-editor .clip-editor-stage .preview-heading .segmented-control button { min-height: 25px; padding: 5px 9px; color: #797982; font-size: 10px; }
.clip-editor .clip-editor-stage .preview-heading .segmented-control button.active { background: #353539; color: #e8e8ee; box-shadow: none; }
.clip-editor .clip-editor-stage .preview-stage { display: flex; flex: 1; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 0; padding: 20px; background: #131316; overflow: hidden; }
.clip-editor .clip-editor-stage .preview-frame { flex: 0 0 auto; min-width: 0; max-height: none; max-width: none; margin: 0; border-radius: 0; box-shadow: 0 0 0 1px #ffffff12,0 8px 26px #0004; }
.clip-editor .preview-frame .preview-title, .clip-editor .preview-frame .preview-comment-card { font-family: "Editor Pretendard", sans-serif; font-weight: 700; }
.clip-editor .preview-frame .preview-title-line { font-weight: 700; }
.clip-editor .clip-editor-stage .preview-scrubber { display: none; }
.clip-editor .clip-editor-stage .preview-foot { flex: 0 0 52px; display: flex; align-items: flex-start; justify-content: center; flex-wrap: nowrap; min-height: 52px; padding: 0; border: 0; background: #131316; }
.clip-editor .clip-editor-stage .preview-controls { display: flex; gap: 13px; align-items: center; font-size: 11px; color: #b4b4bd; font-variant-numeric: tabular-nums; }
.clip-editor .clip-editor-stage .preview-controls button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #ffffff20; background: #202024; border-radius: 50%; color: #d9d9e1; }
.clip-editor .clip-editor-stage .preview-controls button svg { width: 13px; height: 13px; }
.clip-editor .clip-editor-stage .preview-hint { display: none; }
.clip-editor-render-notice { position: absolute; left: 16px; right: 16px; bottom: 7px; font-size: 10px; color: #89828f; text-align: center; line-height: 1.3; pointer-events: none; }
.clip-editor-expand { display: none; grid-column: 3; grid-row: 1; align-self: center; justify-self: start; position: absolute; left: 0; top: 44%; z-index: 5; width: 20px; height: 46px; border: 1px solid #ffffff13; border-left: 0; border-radius: 0 9px 9px 0; background: #2d2d33; color: #bbb4c7; padding: 3px; }
.clip-editor-expand svg { width: 13px; height: 13px; }
.clip-editor-body.panel-collapsed { grid-template-columns: 88px 0 minmax(0,1fr); }
.clip-editor-body.panel-collapsed .clip-editor-settings { visibility: hidden; padding: 0; }
.clip-editor-body.panel-collapsed .clip-editor-expand { display: flex; align-items: center; }
.clip-editor-timeline { grid-column: 3; grid-row: 2; min-width: 0; min-height: 0; overflow: hidden; padding: 0 32px 12px; background: #18181b; border-top: 1px solid #ffffff0c; user-select: none; }
.clip-timeline-heading { height: 57px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.clip-timeline-heading>div { display: flex; align-items: center; gap: 10px; color: #75757f; font-size: 11px; font-variant-numeric: tabular-nums; }
.clip-timeline-heading strong { color: #c3c0cc; font-size: 12px; font-weight: 600; }
.clip-timeline-heading .icon-button { width: 28px; height: 28px; padding: 6px; color: #c6c1d0; background: #ffffff06; border-radius: 7px; }
.clip-timeline-heading .icon-button svg { width: 15px; height: 15px; }
.clip-timeline-zoom .button { padding: 0; width: 24px; height: 24px; min-height: 0; color: #c5c1d0; font-size: 18px; border: 1px solid #ffffff18; border-radius: 6px; }
.clip-timeline-zoom .button:hover { background: #ffffff0d; }
.clip-timeline-zoom>span { font-size: 10px; color: #71717b; }
.clip-timeline-ruler { display: flex; justify-content: space-between; gap: 8px; height: 26px; align-items: flex-start; color: #6e6e79; font-size: 10px; font-variant-numeric: tabular-nums; }
.clip-timeline-ruler span { position: relative; }
.clip-timeline-ruler span:after { content: ""; position: absolute; top: 18px; left: 50%; height: 5px; width: 1px; background: #53535c; }
.clip-timeline-tracks { position: relative; min-width: 0; }
.clip-timeline-video { position: relative; height: 65px; border-radius: 6px; background: #101013; cursor: crosshair; }
.clip-timeline-thumbnails { display: flex; height: 100%; width: 100%; overflow: hidden; border-radius: 6px; opacity: .66; background: #242429; pointer-events: none; }
.clip-timeline-thumbnails video { display: block; width: calc(100% / 7); height: 100%; min-width: 0; flex: 1 1 0; object-fit: cover; pointer-events: none; filter: saturate(.8); }
.clip-timeline-selection { position: absolute; inset-block: -2px; border-top: 3px solid #b9a3ff; border-bottom: 3px solid #b9a3ff; background: #c2acff0f; pointer-events: none; border-radius: 5px; }
.clip-range-handle { position: absolute; top: -3px; bottom: -3px; width: 12px; min-height: 28px; padding: 0; border: 0; border-radius: 4px; background: #b9a3ff; cursor: ew-resize; pointer-events: auto; touch-action: none; z-index: 4; }
.clip-range-handle.start { left: -5px; }
.clip-range-handle.end { right: -5px; }
.clip-range-handle i { display: block; width: 2px; height: 17px; margin: auto; border-radius: 2px; background: #4b3f70; }
.clip-range-handle:hover { background: #d1c2ff; }
.clip-timeline-captions { position: relative; margin-top: 12px; height: 33px; overflow: hidden; background: #1c1b21; border-radius: 5px; }
.clip-timeline-captions button { position: absolute; top: 0; bottom: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 7px; border: 1px solid #18181b; border-radius: 5px; background: #39313f; color: #c9bfd2; text-align: left; font-size: 10px; }
.clip-timeline-captions button:hover { background: #51435d; color: #fff; }
.clip-timeline-playhead { position: absolute; top: -8px; bottom: -8px; width: 1px; background: #f68a79; pointer-events: none; z-index: 5; }
.clip-timeline-playhead:before { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 2px; background: #f68a79; clip-path: polygon(0 0,100% 0,100% 55%,50% 100%,0 55%); }
.clip-timeline-footer { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 23px; color: #7a7586; font-size: 10px; }
.clip-timeline-range-fields { display: flex; gap: 12px; }
.clip-timeline-range-fields label { display: flex; align-items: center; gap: 7px; color: #74747d; font-size: 10px; }
.clip-timeline-range-fields input { width: 84px; height: 31px; border: 1px solid #ffffff10; border-radius: 7px; background: #252529; color: #beb8cb; padding: 0 7px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.clip-timeline-help { flex: 1 0 100%; color: #5f5f69; margin-top: -2px; }
@media (max-width:1150px) and (min-width:921px) {
  .clip-editor-topbar { gap: 12px; padding-inline: 18px; }
  .clip-editor-top-actions { gap: 7px; }
  .clip-editor-top-actions .save-indicator { display: none; }
  .clip-editor-top-actions .button { padding-inline: 10px; }
  .clip-editor-top-actions .clip-editor-download span { display: none; }
  .clip-editor-timeline { padding-inline: 22px; }
}
@media (max-height:700px) and (min-width:921px) {
  .clip-editor-body { grid-template-rows: minmax(200px,1fr) 236px; }
  .clip-timeline-heading { height: 43px; }
  .clip-timeline-footer { margin-top: 15px; }
  .clip-timeline-help { display: none; }
  .clip-editor-tool { min-height: 57px; flex-basis: 57px; }
}
@media (max-width:920px) {
  .clip-editor-topbar { height: 56px; flex-basis: 56px; padding: 0 12px; gap: 10px; }
  .clip-editor-project { gap: 8px; }
  .clip-editor-project-line { height: 28px; }
  .clip-editor-project small { font-size: 8px; margin-bottom: 4px; max-width: 210px; }
  .clip-editor-project h1 { font-size: 12px; max-width: 230px; }
  .clip-editor-top-actions { gap: 6px; }
  .clip-editor-top-actions .save-indicator { display: none; }
  .clip-editor-top-actions .button { font-size: 10px; min-height: 31px; padding-inline: 8px; gap: 4px; border-radius: 7px; }
  .clip-editor-top-actions .button svg { width: 13px; height: 13px; }
  .clip-editor-top-actions .clip-editor-apply { min-width: 85px; }
  .clip-editor-top-actions .clip-editor-download { width: 29px; padding: 6px; }
  .clip-editor-top-actions .clip-editor-download span { display: none; }
  .clip-editor-top-actions .clip-editor-save, .clip-editor-top-actions .clip-editor-exit { font-size: 0; width: 29px; padding: 6px; }
  .clip-editor-top-actions .clip-editor-save svg, .clip-editor-top-actions .clip-editor-exit svg { width: 15px; height: 15px; }
  .clip-editor-body, .clip-editor-body.panel-collapsed { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(190px,.9fr) 146px 56px minmax(200px,1fr); }
  .clip-editor-stage { grid-column: 1; grid-row: 1; }
  .clip-editor .clip-editor-stage .preview-heading { top: 9px; left: 10px; }
  .clip-editor .clip-editor-stage .preview-heading .segmented-control button { padding: 4px 6px; font-size: 9px; min-height: 24px; }
  .clip-editor .clip-editor-stage .preview-stage { padding: 12px; }
  .clip-editor .clip-editor-stage .preview-foot { flex-basis: 34px; min-height: 34px; }
  .clip-editor .clip-editor-stage .preview-controls { gap: 8px; font-size: 10px; }
  .clip-editor .clip-editor-stage .preview-controls button { height: 25px; width: 25px; }
  .clip-editor-render-notice { bottom: 2px; font-size: 8px; }
  .clip-editor-timeline { grid-column: 1; grid-row: 2; padding: 0 16px 8px; }
  .clip-timeline-heading { height: 31px; gap: 10px; }
  .clip-timeline-heading>div { font-size: 9px; gap: 6px; }
  .clip-timeline-heading strong { font-size: 10px; }
  .clip-timeline-heading .icon-button { height: 23px; width: 23px; padding: 5px; }
  .clip-timeline-zoom>span { font-size: 9px; }
  .clip-timeline-zoom .button { height: 19px; width: 19px; font-size: 15px; }
  .clip-timeline-ruler { height: 17px; font-size: 8px; }
  .clip-timeline-ruler span:after { top: 13px; height: 3px; }
  .clip-timeline-video { height: 31px; }
  .clip-range-handle { width: 10px; }
  .clip-range-handle.start { left: -4px; }
  .clip-range-handle.end { right: -4px; }
  .clip-range-handle i { height: 12px; }
  .clip-timeline-captions { margin-top: 7px; height: 20px; }
  .clip-timeline-captions button { padding-inline: 4px; font-size: 8px; border-radius: 3px; }
  .clip-timeline-footer { margin-top: 7px; gap: 8px; font-size: 8px; flex-wrap: nowrap; }
  .clip-timeline-range-fields { gap: 8px; }
  .clip-timeline-range-fields label { gap: 5px; font-size: 8px; }
  .clip-timeline-range-fields input { width: 69px; height: 22px; padding-inline: 3px; font-size: 9px; border-radius: 4px; }
  .clip-timeline-help { display: none; }
  .clip-editor-rail { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; padding: 4px 8px; border: 0; border-top: 1px solid #ffffff0b; border-bottom: 1px solid #ffffff0b; overflow: hidden; }
  .clip-editor-tool { flex-basis: auto; min-height: 46px; min-width: 0; padding: 5px 1px; gap: 4px; font-size: 9px!important; border-radius: 8px; }
  .clip-editor-tool svg { width: 18px; height: 18px; }
  .clip-editor .clip-editor-settings { grid-column: 1; grid-row: 4; padding: 17px 20px 24px; border: 0; min-height: 0; }
  .clip-editor-panel-heading { margin-bottom: 17px; }
  .clip-editor-panel-heading h2 { font-size: 16px; }
  .clip-editor-panel-heading .icon-button { display: none; }
  .clip-caption-enable-row { margin-bottom: 17px; }
  .clip-caption-enable-row small { font-size: 10px; margin-top: 5px; }
  .clip-editor .clip-editor-settings .form-field textarea, .clip-editor #currentCaptionText { min-height: 85px; font-size: 16px; padding: 12px; border-radius: 12px; }
  .clip-editor-font-section { margin-top: 20px; padding-top: 17px; }
  .clip-font-options { max-height: 225px; }
  .clip-editor .clip-editor-settings .style-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .clip-editor .clip-editor-settings .style-button { padding: 8px; font-size: 10px; }
  .clip-editor .clip-editor-settings .style-button .style-composition { max-width: 82px; }
  .clip-editor-body.panel-collapsed .clip-editor-settings { padding: 17px 20px 24px; visibility: visible; }
  .clip-editor-body.panel-collapsed .clip-editor-expand { display: none; }
}
@media (max-width:430px) {
  .clip-editor-topbar { padding-inline: 10px; gap: 7px; }
  .clip-editor-project small { max-width: 150px; }
  .clip-editor-project h1 { max-width: 150px; }
  .clip-editor-top-actions { gap: 5px; }
  .clip-editor-top-actions .clip-editor-download { display: none; }
  .clip-editor-top-actions .clip-editor-apply { min-width: 75px; padding-inline: 8px; }
  .clip-editor-top-actions .clip-editor-apply svg { display: none; }
}
.clip-editor .preview-frame.captions-off .preview-caption, .clip-editor .preview-frame.captions-off .preview-comment-card { display: none!important; }
.clip-output-versions { margin: 14px 0 22px; padding-top: 23px; border-top: 1px solid #ffffff0b; }
.clip-output-versions h3 { font-size: 13px; font-weight: 600; color: #d3cfdc; }
.clip-output-versions>p { margin-top: 8px; color: #6e6a79; font-size: 10px; line-height: 1.6; }
.clip-output-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid #ffffff0b; border-radius: 10px; background: #ffffff03; }
.clip-output-row>div { min-width: 0; }
.clip-output-row strong { display: block; color: #c9c5d1; font-size: 11px; font-weight: 550; }
.clip-output-row small { display: block; margin-top: 6px; color: #78717f; font-size: 9px; }
.clip-output-row .clip-output-download, .clip-output-row .clip-output-render { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; padding: 0 9px; margin: 0; border: 1px solid #51425d; border-radius: 7px; color: #cfbde0; background: #332b3b; font-size: 10px; font-weight: 500; white-space: nowrap; }
.clip-output-row .clip-output-download:hover, .clip-output-row .clip-output-render:hover { background: #4b3b57; color: #f5e6ff; }
.clip-output-row .clip-output-download svg, .clip-output-row .clip-output-render svg { width: 12px; height: 12px; }
.caption-original-note { margin-top: 8px; color: #67646e; font-size: 10px; line-height: 1.7; }

/* Editing improvements keep the established editor shell. */
.clip-editor #recommendationEvidence { padding: 14px; background: #202024; border: 1px solid #36363c; border-radius: 8px; line-height: 1.65; }
.clip-editor #recommendationEvidence h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.clip-editor #recommendationEvidence p { margin: 8px 0; }
.clip-editor #recommendationEvidence blockquote { color: #f4f4f5; font-size: 14px; margin: 10px 0; }
.clip-editor #recommendationEvidence small { color: #c6c6cf; }
.clip-editor #recommendationEvidence summary { cursor: pointer; }
.editor-extras {display:flex;flex-direction:column;gap:12px}.editor-extra-field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#585d69}.editor-extra-field input,.editor-extra-field textarea,.editor-extra-field select,.editor-extras>input{width:100%;min-height:35px;border:1px solid #d9dde6;border-radius:6px;background:white;padding:8px;color:#222}.editor-extra-field input[type=checkbox]{width:18px;min-height:18px;align-self:flex-start}.sequence-row{border:1px solid #e0e3ea;border-radius:6px;display:flex;flex-wrap:wrap;gap:5px;padding:9px}.sequence-row strong{width:100%}.sequence-row input{width:calc(50% - 4px);border:1px solid #d9dde6;padding:7px}.editor-extras canvas{width:100%;cursor:crosshair;background:#eff4f1}.editor-extras blockquote{font-size:12px;padding:9px;border-left:2px solid #6ba78c;color:#555}.caption-comparison-original{white-space:pre-wrap;padding:12px;background:#f2f4f7}.preview-frame.layout-contain:not(.actual-result) .preview-media{position:absolute;top:25%;height:46%;left:0;width:100%;overflow:hidden}.preview-frame.safe-guides:after{content:"";position:absolute;inset:8% 7% 13%;border:1px dashed #ff9d31;pointer-events:none;z-index:15}.preview-frame.safe-guides:before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed #ff9d31;pointer-events:none;z-index:15}.brand-preview{pointer-events:none;position:absolute;inset:0;z-index:8;font-size:clamp(8px,1vw,14px);font-family:"Editor Pretendard",sans-serif;color:var(--brand-fg,#fff)}.brand-channel,.brand-cta{position:absolute;left:7%;right:7%;text-align:center;overflow-wrap:anywhere}.brand-channel{top:3%}.brand-cta{top:92%}.brand-logo{position:absolute;right:2%;top:2%;width:12%;height:auto;max-height:9%;object-fit:contain}.preview-frame[data-brand-fg] .preview-title-line,.preview-frame[data-brand-fg] .preview-caption{color:var(--brand-fg)}.preview-frame[data-brand-accent] .active-word{color:var(--brand-accent)}

/* Workspace chrome only. Video compositions, caption fonts and renderer styles stay intact. */
:root { color-scheme:light; --ink:#191f28; --muted:#6b7684; --paper:#f6f7f9; --card:#fff; --line:#e5e8eb; --lime:#e8f3ff; --mint:#3182f6; --green:#1b64da; --danger:#d14343; --sidebar:#fff; }
html, body { background:var(--paper); color:var(--ink); }
[hidden] { display:none!important; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .clip-editor :focus-visible { outline:3px solid #3182f6; outline-offset:3px; }
button:disabled { opacity:.45; }
.main-shell { background:var(--paper); }
.sidebar { background:#fff; border-right:1px solid var(--line); }
.sidebar-brand, .brand-text, .brand-name, .account-button strong, .mobile-brand { color:var(--ink); }
.brand-dot, .account-avatar { background:#e8f3ff; color:#1b64da; }
.nav-item { color:#6b7684; border-radius:12px; min-height:48px; font-size:14px; }
.nav-item:hover { color:var(--ink); background:#f2f4f6; }
.nav-item.active { background:#e8f3ff; color:#1b64da; font-weight:700; }
.nav-item.active:before { display:none; }
.navigation-more { margin-top:12px; }
.navigation-more summary { cursor:pointer; min-height:44px; padding:14px; color:#6b7684; font-size:13px; }
.sidebar-foot, .sidebar-note, .workspace-label, .sidebar .usage-card, .main-footer { display:none; }
.sidebar-bottom { border-color:var(--line); }
.account-button { color:var(--ink); background:#f6f7f9; border:0; border-radius:12px; }
.account-button:hover { background:#edf0f3; }
.account-button small, .account-button>span:last-child { color:#6b7684; }
.topbar { background:var(--paper); border:0; }
.breadcrumb-label, .breadcrumb-divider, .connection-tag { display:none; }
.breadcrumb-current { color:#6b7684; border:0; font-size:14px; }
.button, .icon-button, .text-button { min-height:44px; border-radius:12px; }
.button:not(:disabled):hover { transform:none; }
.button-dark, .button-lime, .ai-button { background:#1b64da; color:#fff; border-color:transparent; box-shadow:none; }
.button-dark:not(:disabled):hover, .button-lime:not(:disabled):hover, .ai-button:not(:disabled):hover { background:#1556c0; }
.button-subtle, .button-soft { background:#edf0f3; border-color:transparent; color:#4e5968; }
.button-subtle:not(:disabled):hover, .button-soft:not(:disabled):hover { background:#e5e8eb; color:var(--ink); }
.button-link, .text-button { color:#1b64da; }
.icon-button { width:44px; color:#6b7684; }
.icon-button:hover { background:#edf0f3; color:var(--ink); }
#workspace { max-width:1300px; margin-inline:auto; padding-top:30px; }
.page-head h1, .section-title, .empty-state h3 { color:var(--ink); }
.eyebrow { color:#6b7684; }
.page-subtitle, .empty-state p { color:#6b7684; }
.url-hero { max-width:760px; margin:22px auto 56px; padding:0; }
.url-hero .home-hero_title__72jr1 { color:var(--ink); font-size:38px; font-weight:750; line-height:1.4; letter-spacing:-1.3px; }
.url-hero .home-hero_title__72jr1 span { color:var(--ink); background:none; -webkit-text-fill-color:currentColor; }
.url-hero .hero-description { color:#6b7684; font-size:16px; margin:18px 0 28px; }
.youtube-composer { width:100%; background:#fff; padding:24px; border:1px solid var(--line); border-radius:24px; box-shadow:0 4px 20px #191f2803; }
.youtube-composer .source-input-mode-tabs { border-color:var(--line); margin-bottom:18px; }
.youtube-composer .source-input-mode-tab { min-height:48px; color:#6b7684; font-weight:600; }
.youtube-composer .source-input-mode-tab.active { color:#1b64da; border-color:#1b64da; }
.youtube-composer .source-input-mode-tab:after { background:#1b64da; }
.youtube-composer .url-console { background:transparent; border:0; padding:0; gap:12px; box-shadow:none; }
.youtube-input-row input.url-input { background:#f2f4f6; border:1px solid transparent; color:var(--ink); min-height:58px; border-radius:14px; font-size:16px; }
.youtube-input-row input.url-input:focus { background:#fff; border-color:#3182f6; box-shadow:none; }
.youtube-input-row input.url-input::placeholder { color:#8b95a1; }
.youtube-link-icon { color:#8b95a1; }
.youtube-composer .ai-button { min-height:58px; border-radius:14px; padding-inline:22px; background:#1b64da; color:#fff; font-size:16px; box-shadow:none; animation:none; }
.youtube-composer .ai-button:before, .youtube-composer .ai-button:after { display:none; }
.composer-settings { margin-top:16px; text-align:left; }
.composer-settings summary { display:flex; justify-content:space-between; gap:12px; align-items:center; min-height:44px; cursor:pointer; list-style:none; color:#6b7684; font-size:13px; }
.composer-settings summary::-webkit-details-marker { display:none; }
.composer-settings summary span { color:#4e5968; }
.composer-settings summary span:after { content:'⌄'; margin-left:8px; }
.composer-settings[open] summary span:after { content:'⌃'; }
.composer-options { margin:0; padding-top:12px; border-top:1px solid var(--line); color:#6b7684; gap:12px; }
.composer-options label { flex:1; justify-content:space-between; font-size:13px; }
.composer-options select { background:#f2f4f6; color:var(--ink); border:0; min-height:44px; border-radius:10px; padding:8px 12px; }
.auto-hook-notice, .composer-save-note, .hero-workflow { color:#6b7684!important; font-size:13px!important; line-height:1.6; }
.auto-hook-notice { margin-top:14px; }
.hero-workflow { margin-top:18px!important; }
.section-title { font-size:20px; letter-spacing:-.5px; }
.count-label { color:#6b7684; background:#edf0f3; }
.project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.project-card { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:none; }
.project-card:hover { transform:none; border-color:#b0b8c1; box-shadow:0 4px 16px #191f2806; }
.project-card-main { display:grid; grid-template-columns:100px minmax(0,1fr); min-height:148px; }
.project-thumbnail { width:100px; height:100%; min-height:148px; background:#edf0f3; }
.project-card-body { min-width:0; padding:20px 40px 16px 18px; }
.project-card h3 { color:var(--ink); font-size:15px; line-height:1.6; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.project-meta, .clip-count { color:#6b7684; font-size:12px; }
.project-card-bottom { border:0; padding-top:0; margin-top:12px; flex-wrap:wrap; justify-content:flex-start; gap:8px; }
.card-menu { width:36px; min-height:36px; top:8px; right:6px; color:#6b7684; background:transparent; }
.status-badge { background:#f2f4f6; color:#4e5968; }
.status-badge.ready { background:#e8f3ff; color:#1b64da; }
.new-project-card { min-height:148px; background:transparent; border:1px dashed #d1d6db; border-radius:18px; color:#6b7684; padding:20px; gap:8px; }
.new-project-card:hover { background:#edf0f3; border-color:#8b95a1; }
.new-project-card strong, .new-project-card small { color:#6b7684; }
.new-circle { background:#e8f3ff; color:#1b64da; }
.search-field, .sort-select { background:#fff; border-color:var(--line); color:#6b7684; min-height:44px; }
.search-field input { color:var(--ink); font-size:13px; }
.empty-state, .project-process, .plan-card, .subscription-card, .billing-result { background:#fff; border-color:var(--line); color:var(--ink); }
.template-card, .template-section.compact .template-card { background:#fff; border-color:var(--line); box-shadow:none; }
.template-info h3, .template-section .section-title { color:var(--ink); }
.template-info p, .template-filter button { color:#6b7684; }
.template-filter button.active, .template-tag { background:#e8f3ff; color:#1b64da; border-color:transparent; }
.template-favorite, .template-choose { background:#edf0f3; color:#4e5968; border:0; }
.modal { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:0 24px 80px #191f2830; }
.modal::backdrop { background:#191f2866; }
.modal h2 { color:var(--ink); }
.modal-description, .auth-switch, .field-note { color:#6b7684; }
.form-field label { color:#4e5968; }
.form-field input, .form-field textarea, .form-field select { background:#f2f4f6; color:var(--ink); border-color:var(--line); border-radius:12px; min-height:48px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { background:#fff; border-color:#3182f6; }
.file-drop { background:#f6f7f9; border-color:#b0b8c1; }
.file-drop strong, .file-drop>span:last-of-type { color:#6b7684; }
.segmented-control { background:#edf0f3; border-color:var(--line); }
.segmented-control button { color:#6b7684; min-height:44px; }
.segmented-control button.active { background:#fff; color:#1b64da; }
.context-menu { background:#fff; border-color:var(--line); color:var(--ink); }
.context-menu button { color:var(--ink); }
.context-menu button:hover { background:#edf0f3; }
.toast { background:#333d4b; color:#fff; }
/* Editing tools surround, but never restyle, the video itself. */
body.fullscreen-editor, body.fullscreen-editor #workspace, .clip-editor { background:var(--paper); color:var(--ink); }
.clip-editor-topbar { height:76px; flex-basis:76px; padding:0 24px; gap:20px; background:#fff; border-color:var(--line); }
.editor-back { color:#6b7684; background:transparent; padding:10px 0; flex-shrink:0; }
.clip-editor-project { flex:1; }
.clip-editor-project-line { display:none; }
.clip-editor-project small { color:#6b7684; font-size:12px; }
.clip-editor-project h1 { color:var(--ink); font-size:16px; max-width:480px; }
.clip-editor-top-actions .button { min-height:44px; font-size:14px; border-radius:12px; padding:0 16px; }
.clip-editor-top-actions .save-indicator { color:#6b7684; font-size:12px; }
.clip-editor-top-actions .save-indicator.dirty { color:#ad5700; }
.clip-editor-top-actions .clip-editor-save { color:#4e5968; background:#f2f4f6; border-color:transparent; }
.clip-editor-top-actions .clip-editor-save:hover { background:#e5e8eb; color:var(--ink); }
.clip-editor-top-actions .clip-editor-download, .clip-editor-top-actions .clip-editor-apply { background:#1b64da; color:#fff; border-color:transparent; min-width:0; }
.clip-editor-top-actions .clip-editor-download:hover, .clip-editor-top-actions .clip-editor-apply:hover { background:#1556c0; color:#fff; }
.clip-editor-top-actions .clip-editor-download span { display:inline; }
.clip-editor-body, .clip-editor-body.panel-collapsed { grid-template-columns:360px minmax(0,1fr); grid-template-rows:68px minmax(0,1fr); }
.clip-editor-rail { grid-column:1/-1; grid-row:1; flex-direction:row; align-items:center; gap:8px; padding:10px 24px; background:#fff; border:0; border-bottom:1px solid var(--line); overflow:visible; z-index:6; }
.clip-editor-tool, .editor-more-button { display:flex; flex-direction:row; align-items:center; justify-content:center; flex:0 0 auto; min-height:44px; padding:10px 20px; gap:8px; color:#6b7684; border:0; border-radius:12px; font-size:14px!important; background:transparent; }
.clip-editor-tool svg, .editor-more-button svg { width:19px; height:19px; }
.clip-editor-tool:hover, .editor-more-button:hover { background:#f2f4f6; color:var(--ink); }
.clip-editor-tool.active, .editor-more-button.active { color:#1b64da; background:#e8f3ff; }
.editor-more-wrap { position:relative; }
.editor-advanced-tools { position:absolute; top:calc(100% + 12px); left:0; width:330px; padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#fff; border:1px solid var(--line); box-shadow:0 12px 40px #191f2824; border-radius:20px; z-index:20; }
.editor-advanced-tools>strong { grid-column:1/-1; font-size:13px; padding:6px 10px 10px; color:#6b7684; }
.editor-advanced-tools .clip-editor-tool { padding:12px; justify-content:flex-start; }
.editor-history-actions { grid-column:1/-1; display:flex; gap:8px; padding-top:12px; margin-top:6px; border-top:1px solid var(--line); }
.editor-history-actions .button { flex:1; font-size:12px; padding:10px; }
.clip-editor .clip-editor-settings, .clip-editor-body.panel-collapsed .clip-editor-settings { grid-column:1; grid-row:2; background:#fff; border-right:1px solid var(--line); padding:28px; visibility:visible; scrollbar-color:#d1d6db transparent; }
.clip-editor-panel-heading { margin-bottom:24px; }
.clip-editor-panel-heading h2 { color:var(--ink); font-size:20px; }
.clip-editor-panel-heading .icon-button, .clip-editor-expand, .clip-editor-body.panel-collapsed .clip-editor-expand { display:none; }
.clip-editor .clip-editor-settings .settings-label, .clip-editor .clip-editor-settings .settings-section>h3 { color:#333d4b; font-size:14px; }
.clip-editor .clip-editor-settings .settings-label>span, .clip-editor .clip-editor-settings .time-fields label { color:#6b7684; font-size:12px; }
.clip-editor .clip-editor-settings .form-field textarea, .clip-editor #currentCaptionText, .clip-editor .clip-editor-settings .time-input, .clip-editor .clip-editor-settings .caption-time input, .clip-editor .clip-editor-settings .caption-row textarea { background:#f6f7f9; border:1px solid var(--line); color:var(--ink); font-size:16px; }
.clip-editor .clip-editor-settings .form-field textarea:focus, .clip-editor #currentCaptionText:focus { background:#fff; border-color:#3182f6; }
.clip-editor .caption-review-note, .clip-editor .clip-editor-settings .duration-hint, .clip-caption-enable-row small, .caption-font-scope, .caption-original-note { color:#6b7684; font-size:13px; line-height:1.65; }
.clip-caption-enable-row { gap:16px; }
.clip-caption-enable-row strong { font-size:15px; }
.clip-caption-switch { width:52px; height:32px; min-height:32px; flex-shrink:0; background:#b0b8c1; padding:4px; box-shadow:0 0 0 6px #fff; margin:6px 0; }
.clip-caption-switch span { width:24px; height:24px; background:#fff; }
.clip-caption-switch[aria-checked=true] { background:#3182f6; }
.clip-caption-switch[aria-checked=true] span { transform:translateX(20px); }
.current-caption-label { color:#4e5968; font-size:14px; }
.current-caption-label>div { color:#6b7684; font-size:12px; }
.current-caption-label .icon-button { width:44px; height:44px; color:#4e5968; }
.current-caption-footer { color:#6b7684; font-size:12px; }
.current-caption-footer .button { min-height:44px; font-size:13px; color:#1b64da; }
.clip-editor-font-section { border-color:var(--line); }
.clip-font-trigger, .clip-font-options { color:var(--ink); background:#f6f7f9; border-color:var(--line); }
.clip-font-trigger:hover { background:#edf0f3; }
.clip-font-options { background:#fff; box-shadow:0 8px 24px #191f2810; }
.clip-font-options [role=option] { color:#333d4b; min-height:44px; }
.clip-font-options [role=option]:hover, .clip-font-options [role=option]:focus, .clip-font-options [role=option][aria-selected=true] { color:#1b64da; background:#e8f3ff; }
.clip-font-options [role=option] svg { color:#1b64da; }
.clip-editor .clip-editor-settings .ratio-button, .clip-editor .clip-editor-settings .style-button { color:#4e5968; background:#f6f7f9; border-color:var(--line); font-size:13px; }
.clip-editor .clip-editor-settings .ratio-button.active, .clip-editor .clip-editor-settings .style-button.active { color:#1b64da; border-color:#3182f6; background:#e8f3ff; }
.clip-editor .clip-editor-settings .segmented-control { background:#edf0f3; border-color:var(--line); }
.clip-editor .clip-editor-settings .segmented-control button { color:#6b7684; }
.clip-editor .clip-editor-settings .segmented-control button.active { background:#fff; color:#1b64da; }
.clip-editor .clip-editor-settings .crop-control { color:#6b7684; }
.clip-editor .clip-editor-settings .crop-control output { color:var(--ink); background:#f6f7f9; border-color:var(--line); }
.clip-editor .clip-editor-settings input[type=range] { accent-color:#3182f6; }
.clip-editor .clip-editor-settings .caption-row { background:#fff; border-color:var(--line); }
.clip-editor .clip-editor-settings .clip-item { background:#f6f7f9; border-color:var(--line); }
.clip-editor .clip-editor-settings .clip-item.active { background:#e8f3ff; border-color:#3182f6; }
.clip-editor .clip-editor-settings .clip-item strong { color:var(--ink); }
.clip-editor .clip-editor-settings .clip-item small, .clip-editor .clip-editor-settings .clip-item .clip-number { color:#6b7684; }
.clip-editor .clip-editor-reset { background:#f2f4f6; color:#4e5968; border:0; font-size:13px; min-height:44px; }
.opening-summary, .clip-editor #recommendationEvidence { background:#f2f7ff; border:0; border-radius:16px; padding:20px; margin-top:20px; }
.opening-summary>span { color:#1b64da; font-size:13px; font-weight:600; }
.opening-summary p { color:#333d4b; font-size:15px; line-height:1.7; margin:12px 0 4px; }
.opening-summary .button { font-size:13px; }
.clip-editor #recommendationEvidence blockquote { color:#333d4b; }
.clip-editor #recommendationEvidence small { color:#6b7684; }
.editor-extras { color:#4e5968; font-size:13px; line-height:1.65; }
.clip-output-versions { margin:0; padding:0; border:0; }
.clip-output-versions h3 { color:var(--ink); font-size:16px; }
.clip-output-versions>p { color:#6b7684; font-size:13px; }
.clip-output-row { border:1px solid var(--line); background:#f6f7f9; padding:16px; border-radius:16px; }
.clip-output-row strong { color:#333d4b; font-size:14px; }
.clip-output-row small { color:#6b7684; font-size:12px; }
.clip-output-row .clip-output-download, .clip-output-row .clip-output-render { min-height:44px; padding:0 12px; color:#1b64da; background:#e8f3ff; border:0; border-radius:10px; font-size:13px; }
.clip-output-row .clip-output-download:hover, .clip-output-row .clip-output-render:hover { color:#1556c0; background:#d9eaff; }
.clip-editor-stage { grid-column:2; grid-row:2; background:#edf0f3; }
.clip-editor .clip-editor-stage .preview-panel, .clip-editor .clip-editor-stage .preview-stage, .clip-editor .clip-editor-stage .preview-foot { background:#edf0f3; }
.clip-editor .clip-editor-stage .preview-stage { padding:64px 24px 24px; }
.clip-editor .clip-editor-stage .preview-frame { box-shadow:0 8px 32px #191f2824; }
.clip-editor .clip-editor-stage .preview-heading { top:16px; left:20px; }
.clip-editor .clip-editor-stage .preview-heading .segmented-control { background:#e5e8eb; border:0; }
.clip-editor .clip-editor-stage .preview-heading .segmented-control button { color:#6b7684; min-height:36px; padding:8px 14px; font-size:12px; }
.clip-editor .clip-editor-stage .preview-heading .segmented-control button.active { background:#fff; color:#1b64da; }
.clip-editor .clip-editor-stage .preview-foot { flex-basis:60px; min-height:60px; align-items:center; padding-bottom:14px; }
.clip-editor .clip-editor-stage .preview-controls { color:#4e5968; font-size:12px; }
.clip-editor .clip-editor-stage .preview-controls button { width:44px; height:44px; background:#fff; color:#4e5968; border:0; }
.clip-editor-render-notice { color:#6b7684; font-size:11px; bottom:4px; }
.clip-editor-timeline { display:none; }
.clip-editor-body.show-timeline { grid-template-rows:68px minmax(0,1fr) 280px; }
.show-timeline .clip-editor-settings { grid-row:2/4; }
.show-timeline .clip-editor-timeline { display:block; grid-column:2; grid-row:3; background:#fff; border-color:var(--line); }
.clip-timeline-heading strong { color:#4e5968; }
.clip-timeline-range-fields input { background:#f6f7f9; color:var(--ink); border-color:var(--line); }
.clip-timeline-selection { border-color:#3182f6; background:#3182f60a; }
.clip-range-handle { background:#3182f6; }
.clip-timeline-captions { background:#edf0f3; }
.clip-timeline-captions button { background:#e8f3ff; color:#1b64da; border-color:#fff; }
@media (max-width:1150px) and (min-width:921px) {
  .clip-editor-body, .clip-editor-body.panel-collapsed { grid-template-columns:330px minmax(0,1fr); }
  .clip-editor-topbar { gap:16px; padding-inline:20px; }
  .clip-editor-top-actions .save-indicator { display:none; }
}
@media (max-width:920px) {
  #workspace { padding:24px; }
  .project-grid { grid-template-columns:1fr; }
  .url-hero { margin:12px auto 40px; }
  .url-hero .home-hero_title__72jr1 { font-size:32px; }
  .clip-editor-topbar { height:68px; flex-basis:68px; padding:0 16px; gap:12px; }
  .clip-editor-project h1 { font-size:15px; max-width:none; }
  .clip-editor-project small { font-size:11px; max-width:280px; }
  .clip-editor-top-actions .clip-editor-save, .clip-editor-top-actions .clip-editor-download { width:auto; font-size:13px; padding:0 12px; }
  .clip-editor-top-actions .clip-editor-download { display:flex; }
  .clip-editor-top-actions .clip-editor-download span { display:inline; }
  .clip-editor-top-actions .button { min-height:44px; }
  .clip-editor-top-actions .save-indicator { display:none; }
  .clip-editor-body, .clip-editor-body.panel-collapsed { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(200px,42dvh) 64px minmax(0,1fr); }
  .clip-editor-stage { grid-column:1; grid-row:1; }
  .clip-editor-rail { grid-column:1; grid-row:2; display:flex; justify-content:center; padding:8px 12px; gap:8px; border-top:1px solid var(--line); }
  .clip-editor-tool, .editor-more-button { flex-basis:auto; padding:10px 18px; min-height:44px; font-size:13px!important; gap:7px; }
  .editor-advanced-tools { left:auto; right:0; }
  .clip-editor .clip-editor-settings, .clip-editor-body.panel-collapsed .clip-editor-settings { grid-column:1; grid-row:3; padding:24px; border-right:0; }
  .clip-editor .clip-editor-settings .settings-section { margin-bottom:20px; }
  .clip-editor .clip-editor-stage .preview-stage { padding:16px 24px; }
  .clip-editor .clip-editor-stage .preview-heading { top:12px; left:12px; }
  .clip-editor .clip-editor-stage .preview-heading .segmented-control button { min-height:36px; padding:8px; font-size:11px; }
  .clip-editor .clip-editor-stage .preview-foot { flex-basis:52px; min-height:52px; }
  .clip-editor .clip-editor-stage .preview-controls button { width:36px; height:36px; }
  .clip-editor-body.show-timeline { grid-template-rows:minmax(180px,32dvh) 64px 180px minmax(0,1fr); }
  .show-timeline .clip-editor-timeline { grid-column:1; grid-row:3; }
  .clip-editor-body.show-timeline .clip-editor-settings { grid-column:1; grid-row:4; }
  .clip-timeline-footer { flex-wrap:wrap; }
}
@media (max-width:540px) {
  #workspace { padding:20px; }
  .topbar { padding-inline:20px; }
  .url-hero .home-hero_title__72jr1 { font-size:28px; letter-spacing:-.8px; }
  .url-hero .hero-description { font-size:14px; margin:14px 0 24px; }
  .youtube-composer { padding:16px; border-radius:20px; }
  .youtube-composer .url-console { flex-direction:column; }
  .youtube-input-wrap, .youtube-composer .ai-button { width:100%; }
  .youtube-input-row input.url-input { font-size:14px; padding-left:42px; }
  .auto-hook-notice { font-size:12px!important; }
  .hero-workflow { display:none; }
  .project-card-main { grid-template-columns:88px minmax(0,1fr); }
  .project-thumbnail { width:88px; }
  .project-card-body { padding:16px 30px 16px 14px; }
  .project-card h3 { font-size:14px; }
  .project-meta { flex-wrap:wrap; }
  .project-tools .search-field { max-width:136px; }
  .section-topline { flex-wrap:wrap; }
  .clip-editor-topbar { padding:0 12px; gap:8px; }
  .editor-back { width:36px; font-size:0; padding:8px; }
  .editor-back svg { width:20px; height:20px; }
  .clip-editor-project h1 { font-size:13px; }
  .clip-editor-project small { display:none; }
  .clip-editor-top-actions { gap:6px; }
  .clip-editor-top-actions .clip-editor-save { font-size:0; width:40px; padding:10px; }
  .clip-editor-top-actions .clip-editor-save svg { width:18px; height:18px; }
  .clip-editor-top-actions .clip-editor-download, .clip-editor-top-actions .clip-editor-apply { display:flex; min-width:0; padding:0 12px; font-size:13px; }
  .clip-editor-top-actions .clip-editor-download svg { display:none; }
  .clip-editor-body, .clip-editor-body.panel-collapsed { grid-template-rows:minmax(180px,38dvh) 64px minmax(0,1fr); }
  .clip-editor-rail { gap:4px; padding:8px; }
  .clip-editor-rail>.clip-editor-tool, .editor-more-button { flex:1; flex-direction:column; padding:5px 10px; gap:4px; min-height:48px; font-size:12px!important; }
  .editor-more-button span { max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .clip-editor-rail>.editor-more-wrap { flex:1; }
  .editor-more-button { width:100%; }
  .editor-advanced-tools { width:min(330px,calc(100vw - 32px)); }
  .clip-editor .clip-editor-settings, .clip-editor-body.panel-collapsed .clip-editor-settings { padding:24px 20px; }
  .clip-editor-panel-heading h2 { font-size:20px; }
  .clip-editor .clip-editor-stage .preview-heading .segmented-control { flex-direction:column; }
  .clip-editor .clip-editor-stage .preview-heading .segmented-control button { padding:6px; font-size:10px; }
  .clip-editor .clip-editor-stage .preview-stage { padding:12px; }
  .clip-editor .clip-editor-settings .style-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Small-screen labels and optional review keep the main task uncluttered. */
.brand, .brand:hover { color:#191f28; }
.brand-mark i { background:#3182f6; }
.brand .brand-dot { background:none; color:#3182f6; }
.nav-count { background:#f2f4f6; color:#6b7684; }
.sidebar-collapse { color:#6b7684; background:#f2f4f6; border-color:#e5e8eb; }
.sidebar-collapsed .navigation-more summary { font-size:12px; padding:12px 0; text-align:center; }
.url-hero .home-hero_description__5O7hx { color:#6b7684; font-size:16px; margin:18px 0 28px; }
.youtube-composer .source-input-mode { border-color:#e5e8eb; }
.youtube-composer .source-input-mode-tab[aria-selected=true] { color:#1b64da; border-color:#1b64da; }
.youtube-composer .source-input-mode-tab { background:transparent; }
#autoHookNotice { color:#6b7684; font-size:13px; line-height:1.6; margin-top:16px; }
.clip-editor .clip-editor-stage .preview-heading .segmented-control button { white-space:nowrap; }
.caption-review-details { border-top:1px solid #e5e8eb; padding-top:12px; }
.caption-review-details>summary { cursor:pointer; color:#6b7684; font-size:13px; min-height:44px; padding:12px 0; }
.caption-review-details>.settings-section { margin-top:16px!important; }
.tip-banner { color:#6b7684; background:#edf0f3; border-color:#e5e8eb; }
@media(max-width:540px) { .url-hero .home-hero_description__5O7hx { font-size:14px; margin:14px 0 24px; } }
.clip-editor .editor-extras input:not([type=checkbox]):not([type=color]), .clip-editor .editor-extras textarea, .clip-editor .editor-extras select { min-height:44px; background:#f6f7f9; color:#191f28; border:1px solid #e5e8eb; border-radius:10px; }
@media(max-width:540px) { .clip-editor .editor-back { width:36px; font-size:0; padding:8px; } }
.app-shell main>section:not(.hero) { background:transparent; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; padding:0; }
.app-shell main>.url-hero { margin-top:22px; }
.sidebar { box-shadow:none; }
.navigation-open .sidebar { box-shadow:12px 0 48px #191f2820; }
.sidebar .workspace-label, .sidebar .sidebar-foot { display:none; }
.sidebar .main-nav { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:0; margin-top:28px; }
.sidebar .nav-item { width:100%; justify-content:flex-start; text-align:left; border:0; box-shadow:none; }
.brand-mark { background:#3182f6; box-shadow:none; }
.brand-mark i { background:#fff; }
.card-menu { box-shadow:none; border:0; }
.new-project-card .new-circle { background:#e8f3ff; color:#1b64da; border:0; }
.youtube-composer .paste-button { background:#e5e8eb; color:#6b7684; border:0; }
.url-hero .home-hero_root__AVnV8 { background:none; padding:0; }
.url-hero .home-hero_root__AVnV8 .home-hero_description__5O7hx { color:#6b7684; }
.sidebar .brand .brand-mark { background:#3182f6; box-shadow:none; transform:none; }
.mobile-brand>span { color:#3182f6; }
.production-details { margin-top:24px; background:#fff; border:1px solid #e5e8eb; border-radius:16px; padding:16px 24px; }
.production-details>summary { min-height:44px; padding:10px 0; cursor:pointer; color:#6b7684; }
.production-details>.editor-extras { max-width:640px; margin-top:20px; }
@media (min-width:921px) { .sidebar-collapsed .sidebar .nav-item { justify-content:center; font-size:0; } }
.modal-heading .eyebrow, .auth-symbol { display:none; }
.modal-heading { justify-content:flex-end; }
.upload-symbol { background:#e8f3ff; color:#1b64da; }
/* Secondary pages share the same readable workspace surfaces. */
.template-section .template-card, .template-section:not(.compact) .template-card { background:#fff; border:1px solid #e5e8eb; box-shadow:none; backdrop-filter:none; }
.template-section .template-card:hover { transform:none; border-color:#b0b8c1; }
.template-section .template-card.selected { border-color:#3182f6; box-shadow:0 0 0 1px #3182f6; }
.template-section .template-info { color:#191f28; }
.template-section .template-info h3 { color:#191f28; }
.template-section .template-info p { color:#6b7684; }
.template-filter { background:#edf0f3; border:0; }
.template-choose { min-height:44px; border-radius:10px; padding:10px 12px; background:#edf0f3; }
.template-select-label, .template-card.selected .template-select-label { color:#4e5968; font-size:13px; }
.template-card.selected .template-choose { background:#e8f3ff; }
.template-card.selected .template-select-label { color:#1b64da; }
.template-favorite { box-shadow:none; }
.template-favorite:hover, .template-favorite.active, .template-favorite.active:hover { background:#e8f3ff; color:#1b64da; }
.template-tag:empty { display:none; }
.template-note { color:#6b7684; font-size:13px; }
.billing-status-card, .plan-card, .billing-result { background:#fff; border-color:#e5e8eb; color:#191f28; }
.billing-current h2, .plan-card h3, .plan-price, .billing-result h1 { color:#191f28; }
.billing-current p, .plan-tagline, .billing-footnote, .subscription-actions p, .plan-price small, .plan-features li, .billing-result p { color:#6b7684; }
.billing-usage, .plan-features, .subscription-actions { border-color:#e5e8eb; }
.billing-usage .usage-top, .billing-usage .usage-top>span, .billing-usage .usage-caption { color:#6b7684; }
.billing-usage .usage-meter { background:#edf0f3; }
.billing-usage .usage-meter span { background:#3182f6; }
.plan-card.featured { border-color:#3182f6; box-shadow:none; }
.plan-card.featured:before { background:#1b64da; }
.plan-symbol { background:#e8f3ff; color:#1b64da; }
.plan-features li svg, .billing-result>svg { color:#1b64da; }
.alert { color:#1b64da; background:#e8f3ff; border-color:#d9eaff; }
.alert.error, .form-error { color:#b3261e; background:#fff0ed; border-color:#f5c9c5; }
.back-button, .editor-meta, .source-link-line { color:#6b7684; }
.source-link-line a, .source-link-line strong { color:#1b64da; }
.search-field:focus-within { border-color:#3182f6; box-shadow:0 0 0 2px #3182f61a; }
.youtube-input-row:focus-within { outline:none; }
.youtube-input-row input.url-input:focus-visible { outline:2px solid #3182f6; outline-offset:2px; }
.billing-status-card .eyebrow, .plan-card .eyebrow, .plan-card.featured:before { display:none; }
.beta-summary{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 0 28px;color:#6b7684;font-size:13px}.beta-data-notice{padding:28px!important;background:#fff!important;border:1px solid #e5e8eb!important;border-radius:18px!important;box-shadow:none!important;color:#4e5968!important}.beta-data-notice h2{font-size:20px;margin:0 0 16px;color:#191f28}.beta-data-notice p{font-size:14px;line-height:1.8;margin:12px 0}.beta-data-notice a{color:#2272eb;overflow-wrap:anywhere}#inviteNotice{font-size:13px;line-height:1.65;background:#f2f6fc;padding:14px;border-radius:10px;color:#4e5968}