:root {
          --bg: #f0f5f9;
          --surface: #ffffff;
          --panel: #f5f8fe;
          --panel-2: #eef3fb;
          --line: rgba(111, 127, 154, .10);
          --text: #0f172a;
          --sub: #66758b;
          --blue: #4d68ff;
          --cyan: #87d9ff;
          --chip-bg: #f2f6fc;
          --chip-line: rgba(223, 230, 239, .22);
          --input-bg: #f7faff;
          --input-line: rgba(219, 227, 237, .18);
          --shell-bg: rgba(255, 255, 255, .82);
          --workspace-bg: #f5f8fd;
          --option-bg: #f8fbff;
          --topbar-scrolled: rgba(255, 255, 255, .96);
          --modal-bg: #f7f9fc;
          --loader-bg: rgba(240, 245, 249, .92);
          --soft-surface: #edf3fa;
          --soft-surface-strong: rgba(255, 255, 255, .98);
          --active-surface: #ffffff;
          --active-soft: #eef4ff;
          --arrow: #8190a8;
          --prompt-stage-bg: #f8fbff;
          --radius: 10px;
      }

      body.dark-mode {
          --bg: #0f172a;
          --surface: #111827;
          --panel: #111a2d;
          --panel-2: #162136;
          --line: rgba(148, 163, 184, .10);
          --text: #e5eefc;
          --sub: #94a3b8;
          --blue: #4d68ff;
          --cyan: #63e2ff;
          --chip-bg: #162033;
          --chip-line: rgba(61, 75, 102, .18);
          --input-bg: #111a2b;
          --input-line: rgba(62, 77, 104, .14);
          --shell-bg: #141d2f;
          --workspace-bg: #161f31;
          --option-bg: #151f31;
          --topbar-scrolled: rgba(15, 23, 42, .92);
          --modal-bg: #0f172a;
          --loader-bg: rgba(15, 23, 42, .92);
          --soft-surface: #182235;
          --soft-surface-strong: rgba(17, 24, 39, .94);
          --active-surface: #202c45;
          --active-soft: #202b44;
          --arrow: #94a3b8;
          --prompt-stage-bg: #172235;
      }

      * {
          box-sizing: border-box;
      }

      html,
      body {
          margin: 0;
          min-height: 100%;
          font-family: "Pretendard", sans-serif;
          background: var(--bg);
          color: var(--text);
          transition: background-color .2s ease, color .2s ease;
      }

      body {
          overflow-x: hidden;
          overflow-y: auto;
          background: var(--bg);
      }

      button,
      input,
      textarea,
      select {
          font: inherit;
          border: 0;
          outline: none;
      }

      button {
          cursor: pointer;
          background: transparent;
      }

      textarea {
          resize: none;
      }

      * {
          scrollbar-width: thin;
          scrollbar-color: rgba(148, 163, 184, .42) transparent;
      }

      *::-webkit-scrollbar {
          width: 7px;
          height: 7px;
      }

      *::-webkit-scrollbar-track {
          background: transparent;
      }

      *::-webkit-scrollbar-thumb {
          background: rgba(148, 163, 184, .36);
          border-radius: 999px;
      }

      *::-webkit-scrollbar-thumb:hover {
          background: rgba(148, 163, 184, .5);
      }

      iconify-icon {
          font-size: 18px;
          flex: 0 0 auto;
      }

      .app {
          position: relative;
          z-index: 2;
          min-height: 100vh;
          padding: 0;
          isolation: isolate;
      }

      .topbar {
          position: sticky;
          top: 0;
          z-index: 20;
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: 16px;
          padding: 28px 28px 22px;
          background: transparent;
          backdrop-filter: none;
          transition: background-color .18s ease, padding .18s ease;
      }

      .topbar.scrolled {
          padding-top: 18px;
          padding-bottom: 14px;
          background: var(--topbar-scrolled);
      }

      .brand-wrap,
      .brand,
      .nav,
      .top-actions,
      .profile-summary,
      .menu-row,
      .chips,
      .toolbar,
      .plan-actions,
      .plan-meta,
      .settings-tabs,
      .field-row,
      .drop-top,
      .drop-meta {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
      }

      .brand {
          gap: 0;
          font-size: 22px;
          font-weight: 800;
          letter-spacing: -.05em;
          color: var(--text);
      }

      .brand .accent {
          color: var(--blue);
      }

      .global-loader {
          position: fixed;
          inset: 0;
          z-index: 120;
          display: grid;
          place-items: center;
          background: var(--loader-bg);
          transition: opacity .35s ease, visibility .35s ease;
      }

      .global-loader.hidden {
          opacity: 0;
          visibility: hidden;
      }

      .loader-mark {
          display: grid;
          justify-items: center;
          gap: 14px;
      }

      .loader-logo {
          gap: 0;
          font-size: 24px;
          font-weight: 800;
          letter-spacing: -.06em;
          color: var(--text);
          animation: loaderPulse 1.8s ease-in-out infinite;
      }

      .loader-logo .accent {
          color: var(--blue);
      }

      .loader-dots {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .loader-dots span {
          width: 8px;
          height: 8px;
          border-radius: 999px;
          background: rgba(124, 92, 255, .55);
          animation: loaderDot 1.2s ease-in-out infinite;
      }

      .loader-dots span:nth-child(2) {
          animation-delay: .16s;
          background: rgba(101, 223, 240, .55);
      }

      .loader-dots span:nth-child(3) {
          animation-delay: .32s;
          background: rgba(124, 92, 255, .35);
      }

      @keyframes loaderPulse {

          0%,
          100% {
              transform: translateY(0);
              opacity: .75;
          }

          50% {
              transform: translateY(-4px);
              opacity: 1;
          }
      }

      @keyframes loaderDot {

          0%,
          100% {
              transform: translateY(0) scale(.88);
              opacity: .35;
          }

          50% {
              transform: translateY(-6px) scale(1);
              opacity: 1;
          }
      }

      .nav {
          justify-content: center;
          gap: 34px;
      }

      .nav a {
          color: var(--sub);
          text-decoration: none;
          font-size: 17px;
          font-weight: 700;
          padding: 4px 0;
      }

      .nav a.active {
          color: var(--text);
      }

      .top-actions {
          justify-content: flex-end;
          gap: 18px;
      }

      .top-link,
      .profile-trigger {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          color: var(--sub);
          font-size: 14px;
          font-weight: 600;
          padding: 0;
      }

      .top-link.credit-btn {
          height: 42px;
          padding: 0 18px;
          border-radius: 18px;
          border: 0;
          background: var(--surface);
          color: var(--text);
      }

      .theme-toggle {
          width: 42px;
          height: 42px;
          border-radius: 16px;
          background: var(--surface);
          color: var(--text);
      }

      body.dark-mode .top-link.credit-btn,
      body.dark-mode .theme-toggle,
      body.dark-mode .chip,
      body.dark-mode .soft-btn,
      body.dark-mode .option-section .chip,
      body.dark-mode .custom-select-trigger,
      body.dark-mode .close-btn,
      body.dark-mode .footer-social a,
      body.dark-mode .newsletter-form,
      body.dark-mode .newsletter-form button,
      body.dark-mode .plan-btn,
      body.dark-mode .rail-btn.active,
      body.dark-mode .prompt-tag {
          background: transparent;
          box-shadow: none;
      }

      body.dark-mode .top-link.credit-btn,
      body.dark-mode .theme-toggle,
      body.dark-mode .chip,
      body.dark-mode .soft-btn,
      body.dark-mode .option-section .chip,
      body.dark-mode .custom-select-trigger,
      body.dark-mode .close-btn,
      body.dark-mode .footer-social a,
      body.dark-mode .newsletter-form,
      body.dark-mode .newsletter-form button,
      body.dark-mode .plan-btn,
      body.dark-mode .prompt-tag {
          border: 1px solid var(--line);
      }

      body.dark-mode .primary-btn {
          background: linear-gradient(135deg, #7c5cff 0%, #62e9d5 100%);
          color: #ffffff;
          border: 0;
      }

      body.dark-mode .rail-btn.active {
          border: 1px solid rgba(139, 125, 255, .38);
      }

      .top-link:hover,
      .profile-trigger:hover,
      .nav a:hover {
          color: var(--text);
      }

      .profile-wrap {
          position: relative;
      }

      .avatar {
          width: 24px;
          height: 24px;
          border-radius: 999px;
          display: grid;
          place-items: center;
          font-size: 11px;
          font-weight: 800;
          color: #fff;
          background: linear-gradient(135deg, #4d68ff, #8ad9ff);
      }

      .profile-thumb {
          width: 40px;
          height: 40px;
          border-radius: 999px;
          display: block;
          object-fit: cover;
          background: linear-gradient(135deg, #dbe6ff, #f3f7ff);
      }

      .profile-initial {
          display: grid;
          place-items: center;
          color: #fff;
          font-weight: 800;
          background: linear-gradient(135deg, #4d68ff, #8ad9ff);
      }

      .avatar img {
          width: 100%;
          height: 100%;
          border-radius: inherit;
          object-fit: cover;
      }

      .arrow {
          width: 8px;
          height: 8px;
          border-right: 1.6px solid #64748b;
          border-bottom: 1.6px solid #64748b;
          transform: rotate(45deg) translateY(-1px);
          transition: transform .2s ease;
      }

      .profile-wrap.open .arrow {
          transform: rotate(-135deg) translateY(-1px);
      }

      .profile-menu {
          position: absolute;
          top: calc(100% + 14px);
          right: 0;
          width: 300px;
          padding: 18px 18px 14px;
          display: none;
          gap: 14px;
          border-radius: 18px;
          border: 1px solid var(--line);
          background: var(--soft-surface-strong);
          box-shadow: 0 20px 40px rgba(45, 74, 137, .08);
      }

      .profile-wrap.open .profile-menu {
          display: grid;
      }

      .profile-card {
          padding: 0 0 14px;
          display: grid;
          gap: 12px;
          border-bottom: 1px solid rgba(224, 230, 240, .82);
      }

      .profile-credit-stat {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 12px 14px;
          border-radius: 8px;
          background: var(--panel);
      }

      .profile-credit-stat span {
          color: var(--sub);
          font-size: 12px;
          font-weight: 700;
      }

      .profile-credit-stat strong {
          font-size: 18px;
          letter-spacing: -.03em;
      }

      .profile-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
      }

      .profile-name {
          display: grid;
          gap: 2px;
      }

      .profile-name strong {
          font-size: 15px;
      }

      .profile-name span {
          font-size: 12px;
          color: var(--sub);
      }

      .mini-badge {
          padding: 0;
          border: 0;
          background: transparent;
          color: var(--blue);
          font-size: 12px;
          font-weight: 700;
      }

      .stat-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
      }

      .stat {
          padding: 10px 0;
          border-radius: 0;
          border: 0;
          background: transparent;
          display: grid;
          gap: 4px;
      }

      .stat span {
          font-size: 11px;
          color: var(--sub);
      }

      .stat strong {
          font-size: 14px;
      }

      .menu-list {
          display: grid;
          gap: 10px;
      }

      .menu-row {
          justify-content: space-between;
          padding: 4px 0;
          border-radius: 0;
          border: 0;
          background: transparent;
          color: var(--text);
      }

      .menu-row span {
          font-size: 13px;
          color: var(--sub);
      }

      .hero {
          padding: 52px 0 38px;
          display: grid;
          justify-items: center;
          text-align: center;
          gap: 10px;
      }

      .hero-kicker {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;
          color: var(--sub);
      }

      .hero-title {
          margin: 0;
          max-width: 960px;
          display: grid;
          gap: 2px;
          font-size: 38px;
          line-height: 1.04;
          letter-spacing: -.06em;
          font-weight: 800;
      }

      .hero-title span {
          display: block;
      }

      .hero-title .title-main,
      .hero-title .title-accent {
          background-image:
              linear-gradient(90deg, #1e293b 0%, #7c5cff 34%, #65dff0 68%, #0f172a 100%),
              repeating-linear-gradient(120deg, rgba(255, 255, 255, 0) 0 16px, rgba(255, 255, 255, .24) 16px 32px);
          background-size: 220% 100%, 240% 100%;
          background-position: 0% 50%, 0% 50%;
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          -webkit-text-fill-color: transparent;
          animation: titleFlow 14s linear infinite;
          filter: drop-shadow(0 10px 22px rgba(108, 117, 235, .08));
      }

      body.dark-mode .hero-title .title-main,
      body.dark-mode .hero-title .title-accent {
          background-image: linear-gradient(90deg, #f5f9ff 0%, #8b7dff 36%, #63e2ff 72%, #d8e7ff 100%);
          background-size: 220% 100%;
          background-position: 0% 50%;
      }

      .hero-title .title-mini {
          font-size: 38px;
          line-height: 1.04;
          letter-spacing: -.06em;
      }

      @keyframes titleFlow {
          0% {
              background-position: 0% 50%, 0% 50%;
          }

          100% {
              background-position: 220% 50%, 240% 50%;
          }
      }

      .hero-sub {
          max-width: 620px;
          margin: 0;
          font-size: 19px;
          line-height: 1.55;
          color: var(--sub);
      }

      .generation-session {
          max-width: 1180px;
          margin: 0 auto 26px;
          padding: 0;
      }

      .generation-session[hidden] {
          display: none;
      }

      .session-shell {
          background: transparent;
          border-radius: 0;
          overflow: visible;
      }

      .session-stage {
          padding: 0;
          background: transparent;
          display: grid;
          gap: 20px;
      }

      .session-stage.loading .session-result {
          min-height: 360px;
          display: grid;
          place-items: center;
          background: transparent;
          border-radius: 0;
      }

      .session-stage.loading .session-ready {
          display: none !important;
      }

      .session-stage.ready .session-result {
          display: grid;
          gap: 18px;
      }

      .session-stage.ready .skeleton-shell {
          display: none !important;
      }

      .session-ready {
          display: grid;
          gap: 40px;
          cursor: pointer;
      }

      .session-video-wrap {
          width: 100%;
          overflow: hidden;
          border-radius: 18px;
          background: #0f172a;
      }

      .session-video {
          width: 100%;
          display: block;
          aspect-ratio: 16/9;
          object-fit: cover;
          background: #0f172a;
      }

      .session-info {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 28px;
          align-items: start;
          padding-top: 2px;
      }

      .session-meta {
          display: grid;
          gap: 10px;
          align-content: start;
      }

      .session-kicker {
          font-size: 12px;
          font-weight: 700;
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--blue);
      }

      .session-title {
          margin: 0;
          font-size: 22px;
          line-height: 1.2;
          letter-spacing: -.03em;
      }

      .session-copy {
          margin: 0;
          font-size: 14px;
          line-height: 1.7;
          color: var(--sub);
      }

      .session-actions {
          display: flex;
          align-items: center;
          gap: 10px;
          padding-top: 4px;
      }

      .session-download {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          min-height: 42px;
          padding: 0 40px;
          border-radius: 999px;
          background: #0f172a;
          color: #ffffff;
          text-decoration: none;
          font-size: 14px;
          font-weight: 700;
      }

      body.dark-mode .session-download {
          background: #ffffff;
          color: #0f172a;
      }

      .session-stats {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 14px 22px;
          align-content: start;
          padding-top: 4px;
      }

      .session-stat {
          display: grid;
          gap: 6px;
          align-content: start;
      }

      .session-stat span {
          font-size: 12px;
          color: var(--sub);
      }

      .session-stat strong {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 34px;
          width: max-content;
          max-width: 100%;
          padding: 0 12px;
          border-radius: 999px;
          background: #ffffff;
          font-size: 14px;
          line-height: 1.35;
          font-weight: 700;
          color: var(--text);
          word-break: break-word;
          white-space: normal;
      }

      body.dark-mode .session-stat strong {
          background: var(--chip-bg);
      }

      .skeleton-shell {
          position: relative;
          width: 100%;
          display: grid;
          place-items: center;
      }

      .skeleton-orbs {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .skeleton-orbs span {
          width: 14px;
          height: 14px;
          border-radius: 999px;
          background: var(--blue);
          opacity: .34;
          animation: orbPulse 1.2s ease-in-out infinite;
      }

      .skeleton-orbs span:nth-child(2) {
          animation-delay: .16s;
      }

      .skeleton-orbs span:nth-child(3) {
          animation-delay: .32s;
      }

      .skeleton-card {
          width: 100%;
          display: grid;
          gap: 0;
      }

      .skeleton-block {
          border-radius: 18px;
          background: linear-gradient(90deg, rgba(148, 163, 184, .1) 0%, rgba(148, 163, 184, .2) 50%, rgba(148, 163, 184, .1) 100%);
          background-size: 200% 100%;
          animation: skeletonShift 1.3s linear infinite;
      }

      .skeleton-block {
          width: 100%;
          height: 320px;
      }

      @keyframes orbPulse {

          0%,
          100% {
              transform: translateY(0) scale(.88);
              opacity: .28;
          }

          50% {
              transform: translateY(-8px) scale(1);
              opacity: 1;
          }
      }

      @keyframes skeletonShift {
          0% {
              background-position: 200% 0;
          }

          100% {
              background-position: -200% 0;
          }
      }

      body.dark-mode .session-stage {
          background: transparent;
      }

      body.dark-mode .session-stage.loading .session-result {
          background: transparent;
      }

      body.dark-mode .skeleton-block {
          background: linear-gradient(90deg, rgba(51, 65, 85, .32) 0%, rgba(71, 85, 105, .54) 50%, rgba(51, 65, 85, .32) 100%);
          background-size: 200% 100%;
      }

      .hero,
      .workspace,
      .library-hero,
      .library-shell {
          opacity: 0;
          will-change: transform, opacity;
      }

      .page-view.is-active .hero {
          animation: riseFadeLarge .62s cubic-bezier(.22, .61, .36, 1) forwards;
      }

      .page-view.is-active .workspace {
          animation: riseFadeLarge .62s cubic-bezier(.22, .61, .36, 1) .08s forwards;
      }

      .page-view.is-active .library-hero {
          animation: riseFadeLarge .56s cubic-bezier(.22, .61, .36, 1) forwards;
      }

      .page-view.is-active .library-shell {
          animation: slideFadeLeftLarge .58s cubic-bezier(.22, .61, .36, 1) .08s forwards;
      }

      @keyframes riseFadeLarge {
          from {
              opacity: 0;
              transform: translate3d(0, 46px, 0);
          }

          to {
              opacity: 1;
              transform: translate3d(0, 0, 0);
          }
      }

      @keyframes slideFadeLeftLarge {
          from {
              opacity: 0;
              transform: translate3d(78px, 0, 0);
          }

          to {
              opacity: 1;
              transform: translate3d(0, 0, 0);
          }
      }

      .page-stage {
          position: relative;
      }

      .page-track {
          display: block;
      }

      .page-view {
          position: relative;
          min-width: 0;
          display: none;
      }

      .page-view.is-active {
          display: block;
      }

      .global-particles {
          position: fixed;
          inset: 0;
          overflow: hidden;
          pointer-events: none;
          z-index: 1;
      }

      .particle-field {
          position: absolute;
          inset: 0;
          overflow: hidden;
          pointer-events: none;
          z-index: 0;
      }

      .particle-field::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
              radial-gradient(circle at 18% 24%, rgba(124, 92, 255, .34) 0 2px, transparent 3px),
              radial-gradient(circle at 36% 68%, rgba(101, 223, 240, .32) 0 2.5px, transparent 3.5px),
              radial-gradient(circle at 58% 26%, rgba(124, 92, 255, .28) 0 1.8px, transparent 3px),
              radial-gradient(circle at 74% 58%, rgba(101, 223, 240, .28) 0 2.5px, transparent 4px),
              radial-gradient(circle at 88% 20%, rgba(124, 92, 255, .3) 0 2px, transparent 3px),
              radial-gradient(circle at 14% 82%, rgba(101, 223, 240, .28) 0 2px, transparent 3px),
              radial-gradient(circle at 52% 84%, rgba(124, 92, 255, .3) 0 2.3px, transparent 3.5px),
              radial-gradient(circle at 82% 76%, rgba(101, 223, 240, .34) 0 2px, transparent 3px);
          opacity: 1;
          filter: drop-shadow(0 0 12px rgba(124, 92, 255, .18));
          animation: particleDrift 18s linear infinite;
      }

      .particle-field span {
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 999px;
          background: rgba(124, 92, 255, .34);
          opacity: .92;
          box-shadow: 0 0 14px rgba(101, 223, 240, .18);
          animation: floatDot linear infinite;
      }

      .particle-field span:nth-child(even) {
          background: rgba(101, 223, 240, .34);
      }

      .particle-field span:nth-child(1) {
          left: 8%;
          top: 18%;
          width: 4px;
          height: 4px;
          animation-duration: 14s;
          animation-delay: -3s;
      }

      .particle-field span:nth-child(2) {
          left: 16%;
          top: 62%;
          width: 10px;
          height: 10px;
          animation-duration: 25s;
          animation-delay: -11s;
      }

      .particle-field span:nth-child(3) {
          left: 28%;
          top: 34%;
          width: 6px;
          height: 6px;
          animation-duration: 12s;
          animation-delay: -7s;
      }

      .particle-field span:nth-child(4) {
          left: 39%;
          top: 74%;
          width: 13px;
          height: 13px;
          animation-duration: 28s;
          animation-delay: -4s;
      }

      .particle-field span:nth-child(5) {
          left: 51%;
          top: 20%;
          width: 5px;
          height: 5px;
          animation-duration: 17s;
          animation-delay: -13s;
      }

      .particle-field span:nth-child(6) {
          left: 64%;
          top: 56%;
          width: 11px;
          height: 11px;
          animation-duration: 26s;
          animation-delay: -8s;
      }

      .particle-field span:nth-child(7) {
          left: 74%;
          top: 30%;
          width: 7px;
          height: 7px;
          animation-duration: 13s;
          animation-delay: -5s;
      }

      .particle-field span:nth-child(8) {
          left: 83%;
          top: 68%;
          width: 12px;
          height: 12px;
          animation-duration: 24s;
          animation-delay: -9s;
      }

      .particle-field span:nth-child(9) {
          left: 91%;
          top: 24%;
          width: 5px;
          height: 5px;
          animation-duration: 21s;
          animation-delay: -6s;
      }

      .particle-field span:nth-child(10) {
          left: 12%;
          top: 84%;
          width: 9px;
          height: 9px;
          animation-duration: 15s;
          animation-delay: -10s;
      }

      .particle-field span:nth-child(11) {
          left: 46%;
          top: 88%;
          width: 14px;
          height: 14px;
          animation-duration: 29s;
          animation-delay: -15s;
      }

      .particle-field span:nth-child(12) {
          left: 70%;
          top: 10%;
          width: 6px;
          height: 6px;
          animation-duration: 16s;
          animation-delay: -12s;
      }

      @keyframes particleDrift {
          0% {
              transform: translate3d(0, 0, 0);
          }

          50% {
              transform: translate3d(18px, -28px, 0);
          }

          100% {
              transform: translate3d(-12px, -58px, 0);
          }
      }

      @keyframes floatDot {
          0% {
              transform: translate3d(0, 0, 0) scale(.92);
              opacity: .28;
          }

          25% {
              opacity: .9;
          }

          50% {
              transform: translate3d(34px, -48px, 0) scale(1.06);
              opacity: .62;
          }

          75% {
              opacity: .85;
          }

          100% {
              transform: translate3d(-24px, -94px, 0) scale(.96);
              opacity: .22;
          }
      }

      @keyframes buttonSpin {
          from {
              transform: rotate(0deg);
          }

          to {
              transform: rotate(360deg);
          }
      }

      .page-view > *:not(.particle-field) {
          position: relative;
          z-index: 1;
      }

      .shell {
          max-width: 1180px;
          margin: 0 auto;
          padding: 0;
          border-radius: 20px;
          background: var(--shell-bg);
          backdrop-filter: blur(14px);
          box-shadow: 0 18px 32px rgba(90, 108, 141, .06);
          overflow: hidden;
      }

      .workspace {
          display: grid;
          grid-template-columns: 440px minmax(0, 1fr);
          gap: 0;
          align-items: start;
          background: var(--workspace-bg);
      }

      body.dark-mode .shell {
          background: #162235;
      }

      body.dark-mode .workspace {
          background: #1a2740;
      }

      .library-hero {
          padding: 52px 0 48px;
          display: grid;
          justify-items: center;
          text-align: center;
          gap: 10px;
      }

      .library-shell {
          max-width: 1180px;
          margin: 0 auto;
          padding: 0;
          background: transparent;
          box-shadow: none;
          overflow: visible;
      }

      .library-page {
          padding: 0;
          display: grid;
          gap: 0;
      }

      .library-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 18px;
      }

      .library-item {
          display: grid;
          gap: 12px;
          cursor: pointer;
      }

      .library-video {
          width: 100%;
          aspect-ratio: 16/10;
          object-fit: cover;
          border-radius: 16px;
          background: transparent;
      }

      .video-modal {
          position: fixed;
          inset: 0;
          z-index: 70;
          display: none;
          align-items: center;
          justify-content: center;
          padding: 24px;
          background: rgba(15, 23, 42, .48);
          backdrop-filter: blur(10px);
      }

      .video-modal.open {
          display: flex;
      }

      .video-modal-card {
          position: relative;
          width: min(1120px, calc(100vw - 48px));
          padding: 0;
          border-radius: 18px;
          background: transparent;
          box-shadow: none;
      }

      .video-modal-player {
          width: 100%;
          max-height: 78vh;
          border-radius: 18px;
          background: #0f172a;
      }

      .video-close {
          position: absolute;
          top: 12px;
          right: 12px;
          z-index: 2;
      }

      .bottom-showcase {
          max-width: 1180px;
          margin: 84px auto 0;
          padding: 0 0 36px;
          display: grid;
          gap: 50px;
      }

      .showcase-row {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 16px;
      }

      .showcase-item {
          position: relative;
          overflow: hidden;
          aspect-ratio: 16/10;
          border-radius: 18px;
          background: var(--panel);
          cursor: pointer;
      }

      .showcase-item video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      .site-footer {
          padding: 50px 0 0;
          border-radius: 0;
          border-top: 1px solid var(--line);
          background: transparent;
          backdrop-filter: none;
      }

      .footer-grid {
          display: grid;
          grid-template-columns: 1.2fr .32fr .32fr .88fr;
          gap: 28px;
      }

      .footer-brand {
          display: grid;
          gap: 18px;
          align-content: start;
      }

      .footer-brand .brand {
          font-size: 42px;
      }

      .footer-copy {
          max-width: 100%;
          font-size: 16px;
          line-height: 1.7;
          color: var(--sub);
      }

      .footer-social {
          display: flex;
          gap: 12px;
      }

      .footer-social a {
          width: 44px;
          height: 44px;
          display: grid;
          place-items: center;
          border-radius: 14px;
          background: var(--surface);
          color: var(--sub);
          text-decoration: none;
      }

      .footer-column {
          display: grid;
          gap: 14px;
          align-content: start;
      }

      .footer-column strong {
          font-size: 15px;
          letter-spacing: -.02em;
          white-space: nowrap;
      }

      .footer-column a,
      .footer-column span {
          color: var(--sub);
          text-decoration: none;
          font-size: 15px;
          line-height: 1.7;
      }

      .newsletter-box {
          display: grid;
          gap: 14px;
      }

      .newsletter-box p {
          margin: 0;
          color: var(--sub);
          font-size: 15px;
          line-height: 1.7;
      }

      .newsletter-form {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px;
          border-radius: 18px;
          background: var(--surface);
      }

      .newsletter-form input {
          flex: 1;
          min-width: 0;
          height: 44px;
          background: transparent;
          color: var(--text);
      }

      .newsletter-form input::placeholder {
          color: var(--sub);
      }

      .newsletter-form button {
          height: 44px;
          padding: 0 20px;
          border-radius: 14px;
          background: #f0f5f9;
          color: var(--text);
          font-weight: 700;
      }

      body.dark-mode .newsletter-form button {
          background: #1f2937;
          color: #e5eefc;
      }

      .footer-meta {
          margin-top: 34px;
          padding-top: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          border-top: 1px solid var(--line);
          color: var(--sub);
          font-size: 14px;
      }

      .footer-links {
          display: flex;
          gap: 18px;
          flex-wrap: wrap;
      }

      .footer-links a {
          color: var(--sub);
          text-decoration: none;
      }

      .prompt-stage {
          display: grid;
          gap: 28px;
          justify-items: stretch;
          text-align: left;
          padding: 28px 30px;
          background: var(--prompt-stage-bg);
      }

      body.dark-mode .prompt-stage {
          background: #1c2941;
      }

      .prompt-title {
          display: grid;
          gap: 10px;
          justify-items: center;
          max-width: 760px;
      }

      .prompt-title h2 {
          margin: 0;
          font-size: clamp(30px, 3.7vw, 48px);
          line-height: 1.04;
          letter-spacing: -.05em;
      }

      .prompt-title p {
          margin: 0;
          font-size: 15px;
          line-height: 1.8;
          color: var(--sub);
      }

      .prompt-card {
          position: relative;
          width: 100%;
          display: grid;
          gap: 18px;
          padding: 2px 0 0;
      }

      .toolbar {
          justify-content: space-between;
          align-items: center;
      }

      .prompt-toolbar-main {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
      }

      .prompt-meta {
          display: grid;
          gap: 6px;
      }

      .prompt-heading {
          display: grid;
          gap: 6px;
      }

      .prompt-heading strong {
          font-size: 18px;
          letter-spacing: -.03em;
      }

      .prompt-heading span {
          font-size: 13px;
          color: var(--sub);
      }

      .chips {
          justify-content: center;
      }

      .chip,
      .soft-btn,
      .primary-btn,
      .close-btn,
      .plan-btn {
          border-radius: var(--radius);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          transition: .18s ease;
      }

      .button-spinner {
          animation: buttonSpin .8s linear infinite;
          transform-origin: center;
      }

      .chip,
      .soft-btn {
          height: 40px;
          padding: 0 15px;
          font-size: 12px;
          font-weight: 700;
          border: 1px solid transparent;
          background: var(--chip-bg);
          color: var(--sub);
      }

      .chip.active {
          color: var(--blue);
          background: var(--active-surface);
          border-color: transparent;
          box-shadow: none;
      }

      .soft-btn {
          color: var(--text);
      }

      .prompt-surface {
          width: 100%;
          padding: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
      }

      .prompt-area {
          width: 100%;
          min-height: 320px;
          display: grid;
          place-items: stretch;
          position: relative;
          z-index: 1;
          margin-top: 10px;
      }

      .prompt-editor {
          width: 100%;
          min-height: 320px;
          padding: 20px 22px;
          text-align: left;
          background: #ffffff;
          border: 1px solid transparent;
          border-radius: 18px;
          font-size: 16px;
          line-height: 1.85;
          color: var(--text);
      }

      .prompt-editor::placeholder {
          color: #8b98ab;
      }

      .prompt-bottom {
          display: block;
          padding-top: 10px;
      }

      .prompt-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 12px;
      }

      .prompt-tag {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          height: 34px;
          padding: 0 12px;
          border-radius: 999px;
          background: #ffffff;
          border: 1px solid transparent;
          color: var(--sub);
          font-size: 12px;
          font-weight: 700;
      }

      .prompt-tag strong {
          color: var(--text);
          font-weight: 700;
      }

      .prompt-hint {
          display: none;
      }

      .prompt-footer {
          display: block;
          position: relative;
          z-index: 1;
      }

      .mobile-generate-bar {
          display: none;
      }

      .mobile-primary-btn {
          width: 100%;
          height: 56px;
          border-radius: 16px;
      }

      .primary-btn {
          width: 100%;
          height: 54px;
          padding: 0 24px;
          color: #fff;
          font-weight: 700;
          background: linear-gradient(135deg, #7c5cff 0%, #62e9d5 100%);
          box-shadow: none;
      }

      .note-row {
          display: none;
      }

      .note-pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px;
          border-radius: 12px;
          border: 1px solid var(--line);
          background: var(--chip-bg);
          color: var(--sub);
          font-size: 12px;
      }

      .overlay {
          position: fixed;
          inset: 0;
          z-index: 40;
          display: none;
          background: rgba(15, 23, 42, .16);
          backdrop-filter: blur(8px);
      }

      .overlay.open {
          display: block;
      }

      .billing-modal {
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 60;
          display: none;
          width: min(920px, calc(100vw - 32px));
          padding: 34px 30px 30px;
          border-radius: 20px;
          border: 0;
          background: var(--modal-bg);
          transform: translate(-50%, -50%);
          box-shadow: none;
      }

      .menu-row.danger span,
      .menu-row.danger iconify-icon {
          color: #dc2626;
      }

      .auth-modal {
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 70;
          display: none;
          width: min(560px, calc(100vw - 32px));
          max-height: calc(100vh - 48px);
          overflow: auto;
          padding: 30px;
          border-radius: 20px;
          background: var(--modal-bg);
          transform: translate(-50%, -50%);
      }

      .auth-modal.open {
          display: grid;
          gap: 18px;
      }

      .billing-modal.open {
          display: grid;
          gap: 18px;
      }

      .billing-modal {
          scrollbar-width: none;
          -ms-overflow-style: none;
      }

      .billing-modal::-webkit-scrollbar {
          display: none;
      }

      .modal-top {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
          padding-bottom: 8px;
      }

      .modal-top h3 {
          margin: 0;
          font-size: 28px;
          letter-spacing: -.04em;
      }

      .close-btn {
          width: 40px;
          height: 40px;
          background: var(--panel);
          color: var(--sub);
          border-radius: 12px;
          box-shadow: none;
      }

      .plan-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
      }

      .plan-card {
          padding: 22px;
          display: grid;
          gap: 16px;
          border-radius: 18px;
          border: 0;
          background: var(--panel);
      }

      .plan-card.active {
          background: var(--panel-2);
          box-shadow: none;
      }

      .plan-card h4 {
          margin: 0;
          font-size: 18px;
          letter-spacing: -.03em;
      }

      .plan-price {
          font-size: 28px;
          font-weight: 800;
          letter-spacing: -.04em;
      }

      .plan-price span {
          font-size: 13px;
          font-weight: 600;
          color: var(--sub);
      }

      .plan-list {
          display: grid;
          gap: 8px;
          font-size: 13px;
          line-height: 1.55;
          color: var(--sub);
      }

      .plan-list div {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .plan-btn {
          height: 42px;
          width: 100%;
          padding: 0 16px;
          border: 0;
          background: var(--panel-2);
          color: #7b8798;
          font-weight: 700;
      }

      .plan-btn.primary {
          color: #7b8798;
          border: 0;
          background: var(--panel-2);
      }

      .plan-card.active .plan-btn.primary {
          background: var(--surface);
          color: var(--text);
      }

      .billing-box {
          padding: 22px 0 0;
          display: grid;
          justify-items: center;
          gap: 12px;
          border-top: 0;
          background: transparent;
      }

      .billing-box strong {
          font-size: 16px;
      }

      .billing-box .plan-actions {
          width: 100%;
          justify-content: center;
      }

      .billing-box .plan-btn.primary {
          width: auto;
          min-width: 220px;
          padding: 0 28px;
          background: #1f2937;
          color: #ffffff;
      }

      body.dark-mode .billing-box .plan-btn.primary {
          background: #e5eefc;
          color: #0f172a;
      }

      .auth-form,
      .auth-result {
          display: grid;
          gap: 14px;
      }

      .auth-form label {
          display: grid;
          gap: 7px;
          font-size: 13px;
          font-weight: 700;
          color: var(--text);
      }

      .auth-form .field {
          width: 100%;
          height: 44px;
          padding: 0 14px;
          border: 1px solid var(--line);
          border-radius: 8px;
          background: var(--panel);
          color: var(--text);
      }

      .auth-form .textarea {
          min-height: 160px;
          padding: 14px;
          resize: vertical;
      }

      .profile-upload-drop {
          min-height: 132px;
          padding: 18px;
          display: grid;
          justify-items: center;
          align-content: center;
          gap: 7px;
          border: 1px dashed rgba(110, 124, 141, .42);
          border-radius: 8px;
          background: var(--panel);
          color: var(--sub);
          text-align: center;
          cursor: pointer;
      }

      .profile-upload-drop.is-dragover {
          border-color: var(--blue);
          background: var(--panel-2);
      }

      .profile-upload-drop iconify-icon {
          font-size: 28px;
          color: var(--blue);
      }

      .profile-upload-drop strong {
          color: var(--text);
      }

      .profile-upload-drop input {
          display: none;
      }

      .auth-success {
          min-height: 240px;
          justify-items: center;
          align-content: center;
          text-align: center;
      }

      .auth-success iconify-icon {
          width: 72px;
          height: 72px;
          display: grid;
          place-items: center;
          border-radius: 999px;
          background: var(--panel);
          color: var(--blue);
          font-size: 38px;
      }

      .auth-links,
      .auth-radio,
      .pager {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          align-items: center;
      }

      .auth-links button,
      .pager button {
          color: var(--sub);
          font-size: 13px;
          font-weight: 700;
      }

      .auth-message {
          min-height: 18px;
          margin: 0;
          color: var(--blue);
          font-size: 13px;
      }

      .withdraw-warning {
          padding: 16px;
          display: grid;
          gap: 8px;
          border-radius: 8px;
          background: rgba(239, 68, 68, .08);
          color: #991b1b;
          line-height: 1.6;
      }

      .withdraw-warning p {
          margin: 0;
      }

      .modal-actions {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
      }

      .plan-btn.danger {
          background: #dc2626;
          color: #fff;
      }

      .payment-summary,
      .history-row {
          display: grid;
          gap: 10px;
          padding: 14px;
          border-radius: 8px;
          background: var(--panel);
      }

      .payment-form {
          gap: 16px;
      }

      .payment-summary {
          grid-template-columns: 1fr 1fr;
          padding: 16px;
          border: 1px solid var(--line);
          background: var(--panel);
      }

      .payment-summary-item {
          display: grid;
          gap: 5px;
          padding: 14px;
          border-radius: 8px;
          background: var(--surface);
      }

      .payment-summary-item.wide {
          grid-column: 1 / -1;
      }

      .payment-summary-item strong {
          font-size: 20px;
          letter-spacing: -.03em;
      }

      .button-radio {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
      }

      .button-radio label {
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid var(--line);
          border-radius: 8px;
          background: var(--panel);
          color: var(--sub);
          font-weight: 800;
          cursor: pointer;
      }

      .button-radio label.active {
          border-color: rgba(77, 104, 255, .38);
          background: var(--surface);
          color: var(--text);
      }

      .button-radio label.disabled {
          opacity: .45;
          cursor: not-allowed;
      }

      .button-radio input {
          position: absolute;
          opacity: 0;
          pointer-events: none;
      }

      .payment-submit {
          margin-top: 4px;
          background: #1f2937;
          color: #fff;
      }

      .history-panel {
          display: grid;
          gap: 18px;
      }

      .history-section {
          display: grid;
          gap: 10px;
      }

      .history-tabs {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
      }

      .history-tabs button {
          height: 42px;
          border-radius: 8px;
          background: var(--panel);
          color: var(--sub);
          font-weight: 800;
      }

      .history-tabs button.active {
          background: #1f2937;
          color: #fff;
      }

      .history-section[data-history-panel] {
          display: none;
      }

      .history-section[data-history-panel].active {
          display: grid;
      }

      .order-row {
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: center;
      }

      .history-status {
          padding: 6px 10px;
          border-radius: 8px;
          font-style: normal;
          font-size: 12px;
          font-weight: 800;
      }

      .history-status.done {
          background: rgba(77, 104, 255, .14);
          color: var(--blue);
      }

      .history-status.cancel {
          background: rgba(239, 68, 68, .12);
          color: #dc2626;
      }

      .history-status.check {
          background: rgba(245, 158, 11, .16);
          color: #b45309;
      }

      .history-status.wait {
          background: #eef2f7;
          color: #64748b;
      }

      .support-shell {
          max-width: 1040px;
          margin: 0 auto 70px;
          padding: 24px;
          display: grid;
          gap: 18px;
          border-radius: 8px;
          background: var(--surface);
      }

      .support-toolbar {
          display: flex;
          justify-content: space-between;
          gap: 14px;
          align-items: center;
      }

      #support-write-btn {
          width: auto;
          min-width: 128px;
          background: #1f2937;
          color: #fff;
      }

      .support-tabs {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
      }

      .support-tabs button {
          height: 40px;
          padding: 0 16px;
          border-radius: 8px;
          background: var(--panel);
          color: var(--sub);
          font-weight: 800;
      }

      .support-tabs button.active {
          background: var(--surface);
          color: var(--text);
      }

      .support-list {
          display: grid;
          gap: 10px;
      }

      .support-board {
          overflow: hidden;
          border: 1px solid var(--line);
          border-radius: 8px;
          background: #fff;
          box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
      }

      .support-head,
      .support-row {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 120px 110px 170px;
          gap: 12px;
          align-items: center;
      }

      .support-head {
          padding: 14px 18px;
          background: #f8fafc;
          color: var(--sub);
          font-size: 12px;
          font-weight: 800;
      }

      .support-row {
          width: 100%;
          min-height: 76px;
          padding: 16px 18px;
          border-radius: 8px;
          border-top: 1px solid var(--line);
          background: #fff;
          color: var(--text);
          text-align: left;
          border-radius: 0;
      }

      .support-row.notice {
          background: #fbfdff;
      }

      .support-row:hover {
          background: #f8fafc;
      }

      .support-row small {
          color: var(--sub);
      }

      .support-badges {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
      }

      .support-title {
          min-width: 0;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .support-title strong {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }

      .support-empty {
          padding: 42px 20px;
          color: var(--sub);
          text-align: center;
      }

      .support-pager {
          padding: 16px;
          display: flex;
          justify-content: center;
          gap: 12px;
          border-top: 1px solid var(--line);
      }

      .support-pager button {
          height: 36px;
          padding: 0 14px;
          border-radius: 8px;
          background: var(--panel);
          color: var(--text);
          font-weight: 800;
      }

      .support-pager button:disabled {
          opacity: .4;
          cursor: not-allowed;
      }

      .badge {
          display: inline-flex;
          align-items: center;
          height: 24px;
          padding: 0 9px;
          border-radius: 8px;
          background: #eef2f7;
          color: #64748b;
          font-size: 12px;
          font-style: normal;
          font-weight: 800;
      }

      .badge.notice,
      .badge.done {
          background: rgba(77, 104, 255, .12);
          color: var(--blue);
      }

      .badge.wait {
          background: rgba(245, 158, 11, .14);
          color: #b45309;
      }

      .support-view {
          display: grid;
          gap: 14px;
      }

      .support-view h4 {
          margin: 0;
          display: flex;
          gap: 8px;
          align-items: center;
          font-size: 22px;
      }

      .support-view > p {
          min-height: 120px;
          padding: 16px;
          border-radius: 8px;
          background: var(--panel);
          line-height: 1.7;
      }

      .support-files {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
      }

      .support-file {
          padding: 8px 10px;
          border-radius: 8px;
          background: var(--panel);
          color: var(--text);
          font-size: 13px;
          font-weight: 700;
      }

      .support-answer {
          padding: 16px;
          display: grid;
          gap: 8px;
          border-radius: 8px;
          background: var(--surface);
      }

      .support-check {
          display: flex !important;
          grid-template-columns: none !important;
          align-items: center;
          gap: 8px !important;
      }

      @media (max-width: 760px) {
          .support-head {
              display: none;
          }

          .support-row {
              grid-template-columns: 1fr;
          }
      }

      .payment-summary div,
      .history-row {
          display: grid;
          gap: 4px;
      }

      .payment-summary span,
      .history-row span,
      .auth-radio .disabled {
          color: var(--sub);
          font-size: 12px;
      }

      .auth-result h4 {
          margin: 8px 0 0;
          font-size: 15px;
      }

      .option-panel {
          position: relative;
          width: 100%;
          height: 100%;
          padding: 28px 24px;
          background: var(--option-bg);
          border-right: 1px solid var(--line);
          border-radius: 0;
          overflow: visible;
      }

      .option-panel.open {
          transform: none;
      }

      body.dark-mode .option-panel {
          background: #18253b;
      }

      .option-layout {
          display: grid;
          grid-template-columns: 1fr;
          gap: 14px;
          align-items: start;
      }

      .option-rail {
          position: static;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 6px;
          padding: 0;
          border-radius: 0;
          background: transparent;
      }

      .rail-btn {
          min-height: 38px;
          padding: 8px 6px;
          display: grid;
          justify-items: center;
          align-content: center;
          gap: 0;
          border-radius: 10px;
          border: 1px solid transparent;
          color: #97a3b6;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: -.02em;
          background: transparent;
      }

      .rail-btn iconify-icon {
          font-size: 17px;
      }

      .rail-btn.active {
          color: var(--blue);
          background: var(--active-surface);
          border-color: transparent;
          box-shadow: 0 6px 18px rgba(108, 124, 255, .08);
      }

      .option-main {
          display: grid;
          gap: 16px;
      }

      .option-groups {
          display: grid;
          gap: 16px;
      }

      .option-section {
          display: grid;
          gap: 12px;
          padding: 10px 0 6px;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
      }

      .section-head {
          display: grid;
          gap: 5px;
      }

      .section-head h4 {
          margin: 0;
          font-size: 16px;
          letter-spacing: -.02em;
      }

      .section-head p {
          margin: 0;
          font-size: 13px;
          line-height: 1.6;
          color: var(--sub);
      }

      .section-block {
          display: grid;
          gap: 12px;
          padding: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
      }

      .field,
      .select,
      .textarea-wrap,
      .option-box,
      .slider-card,
      .drop-zone,
      .custom-select-trigger,
      .custom-select-menu,
      .upload-slot {
          border-radius: 14px;
          background: #ffffff;
          box-shadow: none;
          border: 1px solid transparent;
      }

      .field,
      .select,
      .custom-select-trigger {
          width: 100%;
          height: 48px;
          padding: 0 14px;
          color: var(--text);
      }

      .option-box,
      .slider-card {
          padding: 12px;
          display: grid;
          gap: 10px;
      }

      .option-grid,
      .metric-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px;
      }

      .choice-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
      }

      .drop-zone {
          padding: 16px;
          display: grid;
          gap: 12px;
          background: #ffffff;
      }

      .reference-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
      }

      .upload-slot {
          position: relative;
          min-height: 164px;
          padding: 14px;
          display: grid;
          gap: 10px;
          align-content: start;
          overflow: hidden;
      }

      .upload-slot.wide {
          grid-column: 1 / -1;
          min-height: 152px;
      }

      .upload-slot.is-dragover {
          background: var(--active-soft);
      }

      .upload-slot-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
      }

      .upload-slot-head strong {
          font-size: 14px;
      }

      .upload-slot p {
          margin: 0;
          font-size: 13px;
          line-height: 1.6;
          color: var(--sub);
      }

      .upload-actions {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          margin-top: auto;
          flex-wrap: wrap;
      }

      .upload-chip {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          min-height: 34px;
          padding: 0 12px;
          border-radius: 12px;
          background: var(--chip-bg);
          color: var(--sub);
          font-size: 12px;
          font-weight: 700;
      }

      .upload-preview-grid {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
      }

      .upload-preview {
          width: 58px;
          height: 58px;
          border-radius: 12px;
          overflow: hidden;
          background: var(--chip-bg);
          display: none;
          flex: 0 0 auto;
      }

      .upload-preview.visible {
          display: block;
      }

      .upload-preview img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      .upload-input {
          display: none;
      }

      .drop-top {
          justify-content: space-between;
      }

      .drop-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          display: grid;
          place-items: center;
          color: var(--blue);
          background: linear-gradient(135deg, #edf4ff, #f8fbff);
      }

      .drop-copy {
          display: grid;
          gap: 4px;
          text-align: left;
      }

      .drop-copy strong {
          font-size: 14px;
      }

      .drop-copy span {
          font-size: 13px;
          color: var(--sub);
          line-height: 1.6;
      }

      .drop-meta {
          justify-content: space-between;
          font-size: 11px;
          color: var(--sub);
      }

      .drop-chip {
          padding: 7px 10px;
          border-radius: 999px;
          background: var(--panel);
          color: var(--sub);
          font-size: 11px;
          font-weight: 700;
      }

      .setting-card {
          padding: 14px;
          display: grid;
          align-content: start;
          gap: 10px;
          border-radius: 16px;
          background: #ffffff;
          box-shadow: none;
          border: 1px solid transparent;
      }

      .setting-card strong {
          font-size: 13px;
          letter-spacing: -.02em;
      }

      .setting-card span {
          font-size: 13px;
          line-height: 1.6;
          color: var(--sub);
      }

      .setting-card .chips {
          align-self: start;
          align-items: flex-start;
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          justify-content: stretch;
          gap: 8px;
      }

      .setting-card .chips .chip {
          width: 100%;
      }

      .gallery-grid {
          display: none;
      }

      .gallery-card {
          display: none;
      }

      .metric-card {
          padding: 12px;
          display: grid;
          gap: 4px;
          border-radius: 14px;
          background: var(--soft-surface);
          box-shadow: none;
          border: 1px solid transparent;
      }

      .metric-card strong {
          font-size: 13px;
      }

      .metric-card span {
          font-size: 11px;
          color: var(--sub);
      }

      .upload-line {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          flex-wrap: wrap;
      }

      .micro-note {
          font-size: 13px;
          color: var(--sub);
          line-height: 1.6;
      }

      .group {
          display: grid;
          gap: 8px;
      }

      .group label {
          display: flex;
          align-items: center;
          gap: 8px;
          min-height: 20px;
          margin: 0;
          color: var(--text);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: -.02em;
      }

      .group label iconify-icon {
          font-size: 16px;
          color: #6a7fff;
      }

      .textarea-wrap {
          padding: 10px 12px;
      }

      .textarea-wrap textarea {
          width: 100%;
          min-height: 74px;
          border: 0;
          resize: none;
          background: transparent;
          color: var(--text);
      }

      .option-section .chips {
          justify-content: flex-start;
      }

      .option-section .chip {
          height: 40px;
          padding: 0 10px;
          background: var(--input-bg);
          border: 1px solid transparent;
          box-shadow: none;
      }

      .option-section .chip.active {
          background: #ffffff;
          color: var(--blue);
          border: 1px solid rgba(108, 124, 255, .34);
          box-shadow: 0 6px 18px rgba(108, 124, 255, .08);
      }

      body.dark-mode .prompt-editor,
      body.dark-mode .prompt-tag,
      body.dark-mode .field,
      body.dark-mode .select,
      body.dark-mode .textarea-wrap,
      body.dark-mode .option-box,
      body.dark-mode .slider-card,
      body.dark-mode .drop-zone,
      body.dark-mode .custom-select-trigger,
      body.dark-mode .custom-select-menu,
      body.dark-mode .upload-slot {
          background: var(--input-bg);
      }

      body.dark-mode .setting-card {
          background: var(--soft-surface);
      }

      body.dark-mode .option-section .chip.active {
          background: var(--active-surface);
          box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
      }

      .custom-select {
          position: relative;
      }

      .custom-select-trigger {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding-right: 16px;
          font-size: 14px;
          font-weight: 600;
      }

      .custom-select-trigger {
          background: #ffffff;
      }

      .custom-select-trigger .select-arrow {
          width: 9px;
          height: 9px;
          transform: rotate(45deg);
          border-right: 1.6px solid var(--arrow);
          border-bottom: 1.6px solid var(--arrow);
      }

      .custom-select.open .custom-select-trigger .select-arrow {
          transform: rotate(-135deg);
      }

      .custom-select-menu {
          position: absolute;
          top: calc(100% + 8px);
          left: 0;
          right: 0;
          z-index: 8;
          display: none;
          padding: 8px;
          background: var(--soft-surface-strong);
          box-shadow: 0 18px 28px rgba(66, 84, 128, .10);
      }

      .custom-select.open .custom-select-menu {
          display: grid;
          gap: 4px;
      }

      .custom-option {
          height: 40px;
          padding: 0 12px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          font-size: 13px;
          font-weight: 600;
          color: var(--sub);
      }

      .custom-option.active {
          color: var(--blue);
          background: var(--active-soft);
      }

      .option-section[hidden] {
          display: none;
      }

      .slider-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          font-size: 13px;
          font-weight: 700;
          color: var(--sub);
      }

      .slider-head strong {
          color: var(--text);
      }

      input[type="range"] {
          width: 100%;
          height: 6px;
          appearance: none;
          border-radius: 999px;
          background: #f4f5f7;
      }

      input[type="range"]::-webkit-slider-thumb {
          appearance: none;
          width: 18px;
          height: 18px;
          border-radius: 999px;
          border: 2px solid #5d79ff;
          background: #fff;
      }

      input[type="range"]::-moz-range-thumb {
          width: 18px;
          height: 18px;
          border-radius: 999px;
          border: 2px solid #5d79ff;
          background: #fff;
      }

      @media (max-width:900px) {
          .plan-grid {
              grid-template-columns: 1fr;
          }
      }

      @media (max-width:980px) {

          .hero-title,
          .hero-title .title-mini {
              font-size: 48px;
          }

          .workspace {
              grid-template-columns: 1fr;
          }

          .option-panel {
              border-right: 0;
              border-bottom: 1px solid transparent;
          }

          .option-layout {
              grid-template-columns: 1fr;
          }

          .option-rail {
              grid-template-columns: repeat(3, 1fr);
          }

          .library-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .session-info {
              grid-template-columns: 1fr;
          }
      }

      @media (max-width:1024px) {
          .topbar {
              grid-template-columns: 1fr auto;
              align-items: center;
              gap: 14px 12px;
              padding: 22px 28px 18px;
          }

          .brand {
              grid-column: 1;
              grid-row: 1;
          }

          .top-actions {
              grid-column: 2;
              grid-row: 1;
              gap: 12px;
          }

          .nav {
              grid-column: 1 / -1;
              grid-row: 2;
              justify-content: flex-start;
              gap: 26px;
              padding-top: 6px;
          }

          .nav a {
              font-size: 16px;
          }

          .top-link.credit-btn {
              height: 40px;
              padding: 0 16px;
              border-radius: 16px;
          }

          .profile-trigger {
              gap: 0;
          }

          .profile-trigger span:not(.arrow) {
              display: none;
          }

          .profile-trigger .arrow {
              display: none;
          }

          .page-view {
              padding: 0 28px;
          }

          .youtube-menu-page {
              padding: 48px 0 84px;
          }

          .youtube-menu-layout {
              min-height: auto;
          }

          .youtube-step-sidebar {
              position: sticky;
              left: auto;
              top: 96px;
              transform: none;
              justify-content: flex-start;
              margin-bottom: 20px;
          }

          .youtube-stage-controls {
              grid-template-columns: 52px minmax(0, 1fr) 52px;
              gap: 14px;
          }

          .youtube-ratio-row {
              width: min(100%, 680px);
          }
      }

      @media (max-width:780px) {
          .app {
              padding: 0;
          }

          .topbar {
              gap: 0;
              padding: 22px 20px 18px;
          }

          .topbar.scrolled {
              gap: 0;
          }

          .page-view {
              padding: 0 20px;
          }

          .profile-menu {
              width: min(320px, calc(100vw - 28px));
          }

          .hero-title,
          .hero-title .title-mini {
              font-size: 34px;
          }

          .hero-sub {
              font-size: 16px;
          }

          .prompt-editor {
              font-size: 16px;
              min-height: 220px;
          }

          .option-grid,
          .metric-grid,
          .library-grid,
          .showcase-row,
          .footer-grid {
              grid-template-columns: 1fr;
          }

          .choice-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .billing-modal {
              width: calc(100vw - 40px);
              max-height: calc(100vh - 40px);
              padding: 22px;
              overflow-y: auto;
          }

          .option-panel,
          .prompt-stage {
              padding: 18px;
          }

          .prompt-footer {
              display: none;
          }

          .prompt-footer {
              position: relative;
              left: auto;
              right: auto;
              bottom: auto;
              z-index: 1;
              width: auto;
          }

          .prompt-footer .primary-btn {
              width: 100%;
              height: 54px;
              border-radius: 10px;
          }

          .mobile-generate-bar {
              display: block;
              position: fixed;
              left: 20px;
              right: 20px;
              bottom: 20px;
              z-index: 40;
          }

          .video-modal {
              padding: 12px;
          }

          .video-modal-card {
              width: calc(100vw - 24px);
              padding: 14px;
          }

          .bottom-showcase {
              padding: 0 20px 120px;
          }

          .site-footer {
              padding: 0 0 120px;
          }

          .footer-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
              align-items: start;
          }

          .footer-brand,
          .newsletter-box {
              grid-column: 1 / -1;
          }

          .footer-brand .brand {
              font-size: 32px;
          }

          .footer-meta {
              flex-direction: column;
              align-items: flex-start;
          }

          .newsletter-form {
              display: grid;
              width: 100%;
              grid-template-columns: minmax(0, 1fr) auto;
          }

          .newsletter-form input {
              width: 100%;
              min-width: 0;
          }

          .youtube-menu-title {
              font-size: 38px;
          }

          .youtube-menu-subtitle {
              font-size: 14px;
          }

          .youtube-stage-controls {
              grid-template-columns: minmax(0, 1fr);
          }

          .youtube-stage-shell {
              order: 1;
          }

          .youtube-stage-arrow {
              width: 48px;
              height: 48px;
          }

          .youtube-stage-controls > .youtube-stage-arrow:first-child {
              justify-self: start;
              order: 2;
          }

          .youtube-stage-controls > .youtube-stage-arrow:last-child {
              justify-self: end;
              order: 3;
              margin-top: -48px;
          }

          .youtube-stage-card.ratio-16-9 {
              --stage-width: min(100%, 640px);
              --stage-height: 360px;
          }

          .youtube-stage-card.ratio-1-1 {
              --stage-width: min(100%, 420px);
              --stage-height: 420px;
          }

          .youtube-stage-card.ratio-9-16 {
              --stage-width: min(100%, 300px);
              --stage-height: 534px;
          }

          .youtube-ratio-row {
              width: 100%;
              display: grid;
              gap: 24px;
          }

          .youtube-action-btn {
              width: 100%;
              min-width: 0;
              height: 52px;
              font-size: 18px;
          }

          .youtube-title-row,
          .youtube-action-row,
          .youtube-step-buttons {
              grid-template-columns: 1fr;
              display: grid;
          }

          .youtube-preset-anchor {
              justify-self: end;
          }

          .youtube-action-btn,
          .youtube-generate-btn {
              width: 100%;
              min-width: 0;
          }

          .youtube-preset-dialog {
              width: calc(100vw - 24px);
              margin-top: 12vh;
              padding: 24px 18px 22px;
          }

          .youtube-preset-grid {
              grid-template-columns: 1fr;
          }
      }

      .youtube-hero {
          padding: 52px 0 40px;
          display: grid;
          justify-items: center;
          text-align: center;
          gap: 10px;
      }

      .youtube-shell {
          max-width: 1180px;
          margin: 0 auto;
          padding: 0 0 18px;
      }

      .page-view.is-active .youtube-hero,
      .page-view.is-active .youtube-shell {
          animation: riseFadeLarge .62s cubic-bezier(.22, .61, .36, 1) forwards;
          opacity: 0;
      }

      .yt-builder {
          display: grid;
          gap: 16px;
      }

      .yt-stepper {
          display: grid;
          grid-template-columns: repeat(7, minmax(0, 1fr));
          gap: 8px;
      }

      .yt-step {
          padding: 12px 8px;
          display: grid;
          justify-items: center;
          gap: 8px;
          border-radius: 14px;
          border: 1px solid var(--line);
          background: rgba(255, 255, 255, .58);
          color: var(--sub);
      }

      .yt-step.done,
      .yt-step.active {
          color: var(--text);
          border-color: rgba(108, 124, 255, .38);
          box-shadow: 0 10px 24px rgba(88, 101, 242, .10);
      }

      .yt-step.active {
          background: linear-gradient(180deg, rgba(108, 124, 255, .14), rgba(108, 124, 255, .04));
      }

      .yt-step-index {
          width: 30px;
          height: 30px;
          display: grid;
          place-items: center;
          border-radius: 999px;
          background: var(--chip-bg);
          font-size: 13px;
          font-weight: 800;
      }

      .yt-step.active .yt-step-index,
      .yt-step.done .yt-step-index {
          background: linear-gradient(135deg, #7c5cff 0%, #62e9d5 100%);
          color: #fff;
      }

      .yt-step-label {
          font-size: 12px;
          font-weight: 700;
      }

      .yt-panel {
          padding: 20px 22px;
          border-radius: 20px;
          background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .74));
          border: 1px solid rgba(148, 163, 184, .14);
          box-shadow: 0 14px 28px rgba(26, 39, 75, .06);
          backdrop-filter: blur(14px);
      }

      body.dark-mode .yt-panel {
          background: linear-gradient(180deg, rgba(20, 29, 48, .96), rgba(20, 29, 48, .88));
          border-color: rgba(88, 104, 133, .22);
      }

      .yt-section-head,
      .yt-group,
      .yt-form-grid,
      .yt-template-grid,
      .yt-two-column,
      .yt-editor-layout,
      .yt-subtitle-layout,
      .yt-render-grid,
      .yt-status-grid,
      .yt-style-form {
          display: grid;
          gap: 12px;
      }

      .yt-section-head.two-column,
      .yt-footer-actions,
      .yt-inline-actions,
      .yt-cut-top,
      .yt-top-actions,
      .yt-timeline-toolbar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
      }

      .yt-section-head h2 {
          margin: 4px 0 0;
          font-size: 25px;
          letter-spacing: -.04em;
      }

      .yt-section-head p {
          margin: 0;
          color: var(--sub);
          font-size: 13px;
          line-height: 1.62;
      }

      .yt-eyebrow {
          font-size: 12px;
          font-weight: 800;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: var(--blue);
      }

      .yt-pill-summary {
          min-height: 40px;
          padding: 0 16px;
          display: inline-flex;
          align-items: center;
          border-radius: 999px;
          background: var(--chip-bg);
          font-size: 12px;
          font-weight: 700;
          color: var(--text);
      }

      .yt-group-title {
          font-size: 14px;
          font-weight: 800;
          letter-spacing: -.02em;
      }

      .yt-ratio-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 10px;
      }

      .yt-ratio-card,
      .yt-choice-chip,
      .yt-style-card,
      .yt-template-card,
      .yt-cut-card,
      .yt-mini-chip,
      .yt-timeline-block {
          border: 1px solid var(--line);
          background: var(--surface);
          color: var(--text);
      }

      .yt-ratio-card {
          min-height: 98px;
          padding: 14px 12px;
          display: grid;
          justify-items: center;
          gap: 8px;
          border-radius: 14px;
      }

      .yt-ratio-card iconify-icon {
          font-size: 26px;
          color: var(--blue);
      }

      .yt-ratio-card strong {
          font-size: 17px;
      }

      .yt-ratio-card span {
          font-size: 12px;
          color: var(--sub);
      }

      .yt-ratio-card.active,
      .yt-choice-chip.active,
      .yt-style-card.active,
      .yt-template-card.active,
      .yt-cut-card.active,
      .yt-mini-chip.active,
      .yt-timeline-block.active {
          border-color: rgba(108, 124, 255, .42);
          box-shadow: 0 10px 24px rgba(88, 101, 242, .10);
      }

      .yt-chip-row {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
      }

      .yt-choice-chip {
          min-height: 68px;
          padding: 14px;
          display: grid;
          gap: 5px;
          border-radius: 14px;
          text-align: left;
      }

      .yt-choice-chip strong {
          font-size: 16px;
      }

      .yt-choice-chip span {
          font-size: 12px;
          color: var(--sub);
      }

      .yt-style-grid {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 10px;
      }

      .yt-style-card {
          padding: 8px;
          display: grid;
          gap: 8px;
          border-radius: 14px;
          text-align: left;
      }

      .yt-style-card img {
          width: 100%;
          aspect-ratio: 16/10;
          object-fit: cover;
          border-radius: 10px;
          display: block;
      }

      .yt-style-card span {
          font-size: 13px;
          font-weight: 700;
      }

      .yt-form-grid {
          grid-template-columns: 1fr;
      }

      .yt-field {
          display: grid;
          gap: 8px;
      }

      .yt-field span {
          font-size: 13px;
          font-weight: 700;
      }

      .yt-field input,
      .yt-field textarea {
          width: 100%;
          border-radius: 14px;
          border: 1px solid var(--line);
          background: var(--surface);
          color: var(--text);
          padding: 13px 15px;
      }

      .yt-field textarea {
          min-height: 190px;
          line-height: 1.68;
      }

      .yt-credit-note {
          font-size: 12px;
          font-weight: 700;
          color: var(--sub);
      }

      .yt-template-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .yt-template-card {
          padding: 13px;
          display: grid;
          gap: 7px;
          border-radius: 14px;
          text-align: left;
          transition: none;
          animation: none;
      }

      .yt-template-card strong {
          font-size: 14px;
          line-height: 1.45;
      }

      .yt-template-card span {
          font-size: 12px;
          line-height: 1.6;
          color: var(--sub);
      }

      .yt-two-column,
      .yt-subtitle-layout,
      .yt-render-grid {
          grid-template-columns: 1.05fr .95fr;
      }

      .yt-pane,
      .yt-preview-pane {
          padding: 14px;
          border-radius: 16px;
          background: rgba(255, 255, 255, .64);
          border: 1px solid var(--line);
          display: grid;
          gap: 12px;
      }

      body.dark-mode .yt-pane,
      body.dark-mode .yt-preview-pane {
          background: rgba(17, 24, 39, .34);
      }

      .yt-script-preview {
          min-height: 190px;
          padding: 14px;
          border-radius: 14px;
          background: var(--chip-bg);
          line-height: 1.72;
          font-size: 13px;
          color: var(--text);
      }

      .yt-script-preview.compact {
          min-height: auto;
      }

      .yt-voice-list {
          display: grid;
          gap: 12px;
      }

      .yt-voice-card {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 10px;
          align-items: center;
          padding: 10px 12px;
          border-radius: 14px;
          background: var(--chip-bg);
          border: 1px solid transparent;
          transition: none;
          animation: none;
      }

      .yt-voice-card.active {
          border-color: rgba(108, 124, 255, .42);
      }

      .yt-voice-main {
          display: flex;
          align-items: center;
          gap: 12px;
          text-align: left;
          color: var(--text);
      }

      .yt-voice-play {
          width: 42px;
          height: 42px;
          display: grid;
          place-items: center;
          border-radius: 999px;
          background: linear-gradient(135deg, #7c5cff 0%, #62e9d5 100%);
          color: #fff;
      }

      .yt-voice-copy {
          display: grid;
          gap: 4px;
      }

      .yt-voice-copy strong {
          font-size: 14px;
      }

      .yt-voice-copy small {
          color: var(--sub);
          font-size: 12px;
      }

      .yt-preview-btn {
          min-width: 84px;
          height: 38px;
          padding: 0 14px;
          border-radius: 999px;
          background: var(--surface);
          border: 1px solid var(--line);
          color: var(--sub);
          font-size: 12px;
          font-weight: 700;
      }

      .yt-preview-btn.playing {
          color: var(--blue);
      }

      .yt-equalizer {
          display: flex;
          align-items: flex-end;
          gap: 6px;
          min-height: 64px;
          padding: 14px 16px;
          border-radius: 18px;
          background: var(--chip-bg);
          opacity: .45;
      }

      .yt-equalizer span {
          width: 10px;
          height: 18px;
          border-radius: 999px;
          background: linear-gradient(180deg, #62e9d5 0%, #7c5cff 100%);
          animation: ytEq 1.1s ease-in-out infinite;
      }

      .yt-equalizer span:nth-child(2) {
          animation-delay: .08s;
      }

      .yt-equalizer span:nth-child(3) {
          animation-delay: .16s;
      }

      .yt-equalizer span:nth-child(4) {
          animation-delay: .24s;
      }

      .yt-equalizer span:nth-child(5) {
          animation-delay: .32s;
      }

      .yt-equalizer span:nth-child(6) {
          animation-delay: .4s;
      }

      .yt-equalizer span:nth-child(7) {
          animation-delay: .48s;
      }

      .yt-equalizer.active {
          opacity: 1;
      }

      @keyframes ytEq {

          0%,
          100% {
              height: 14px;
              opacity: .45;
          }

          50% {
              height: 44px;
              opacity: 1;
          }
      }

      .yt-editor-layout {
          grid-template-columns: 320px minmax(0, 1fr);
          gap: 12px;
      }

      .yt-cut-list {
          display: grid;
          gap: 10px;
          align-content: start;
      }

      .yt-cut-card {
          padding: 12px 13px;
          display: grid;
          gap: 8px;
          border-radius: 14px;
          text-align: left;
      }

      .yt-cut-card p {
          margin: 0;
          font-size: 13px;
          line-height: 1.65;
          color: var(--text);
      }

      .yt-cut-card small {
          color: var(--sub);
          font-size: 12px;
      }

      .yt-image-stage {
          overflow: hidden;
          border-radius: 14px;
          background: #0f172a;
          position: relative;
      }

      .yt-image-stage img {
          width: 100%;
          aspect-ratio: 9/16;
          object-fit: cover;
          display: block;
      }

      .yt-image-stage.video-ready img {
          aspect-ratio: 9/16;
      }

      .yt-generate-chip {
          position: absolute;
          right: 16px;
          bottom: 16px;
          min-height: 42px;
          padding: 0 18px;
          border-radius: 999px;
          background: rgba(15, 23, 42, .84);
          color: #fff;
          font-size: 13px;
          font-weight: 700;
      }

      .yt-cut-card.media {
          grid-template-columns: 78px minmax(0, 1fr);
          align-items: center;
      }

      .yt-cut-thumb img {
          width: 78px;
          height: 108px;
          object-fit: cover;
          border-radius: 12px;
          display: block;
      }

      .yt-cut-info {
          display: grid;
          gap: 8px;
      }

      .yt-status-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .yt-status-card,
      .yt-render-stat {
          padding: 16px;
          border-radius: 16px;
          background: var(--chip-bg);
          display: grid;
          gap: 6px;
      }

      .yt-status-card span,
      .yt-render-stat span {
          font-size: 12px;
          color: var(--sub);
      }

      .yt-status-card strong,
      .yt-render-stat strong {
          font-size: 18px;
      }

      .yt-video-preview {
          position: relative;
          overflow: hidden;
          border-radius: 16px;
          background: #0f172a;
      }

      .yt-video-preview video {
          width: 100%;
          aspect-ratio: 9/16;
          object-fit: cover;
          display: block;
          background: #0f172a;
      }

      .yt-video-preview.narrow {
          max-width: 320px;
          margin: 0 auto;
      }

      .yt-video-preview.full {
          width: 100%;
      }

      .yt-video-preview.full video {
          width: 100%;
          aspect-ratio: 9/16;
      }

      .yt-caption-overlay {
          position: absolute;
          left: 12px;
          right: 12px;
          padding: 10px 12px;
          border-radius: 10px;
          font-size: 16px;
          font-weight: 800;
          text-align: center;
          line-height: 1.45;
      }

      .yt-caption-overlay.top {
          top: 18px;
      }

      .yt-caption-overlay.middle {
          top: 50%;
          transform: translateY(-50%);
      }

      .yt-caption-overlay.bottom {
          bottom: 18px;
      }

      .yt-subtitle-stage {
          display: grid;
          gap: 12px;
      }

      .yt-subtitle-preview {
          display: grid;
          justify-items: center;
      }

      .yt-subtitle-toolbar {
          padding: 10px 12px;
          border-radius: 12px;
          border: 1px solid var(--line);
          background: rgba(255, 255, 255, .72);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          flex-wrap: wrap;
      }

      body.dark-mode .yt-subtitle-toolbar {
          background: rgba(17, 24, 39, .42);
      }

      .yt-toolbar-group {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
      }

      .yt-toolbar-btn,
      .yt-toolbar-select {
          min-height: 36px;
          padding: 0 12px;
          border-radius: 10px;
          border: 1px solid var(--line);
          background: var(--chip-bg);
          color: var(--text);
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          font-weight: 700;
      }

      .yt-toolbar-btn.active {
          border-color: rgba(108, 124, 255, .38);
          color: var(--blue);
      }

      .yt-toolbar-switch {
          width: 34px;
          height: 20px;
          border-radius: 999px;
          background: rgba(148, 163, 184, .32);
          position: relative;
          margin-left: 4px;
      }

      .yt-toolbar-switch::after {
          content: "";
          position: absolute;
          top: 2px;
          left: 2px;
          width: 16px;
          height: 16px;
          border-radius: 999px;
          background: #fff;
          transition: left .18s ease;
      }

      .yt-toolbar-switch.on {
          background: #4d68ff
      }

      .yt-toolbar-switch.on::after {
          left: 16px;
      }

      .yt-toolbar-color {
          min-height: 36px;
          padding: 0 10px 0 12px;
          border-radius: 10px;
          border: 1px solid var(--line);
          background: var(--chip-bg);
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          font-weight: 700;
      }

      .yt-toolbar-color input {
          width: 20px;
          height: 20px;
          padding: 0;
          border: 0;
          background: transparent;
      }

      .yt-timeline-shell.editor {
          padding: 24px;
          border-radius: 10px;
          border: 1px solid var(--line);
          background: rgba(255, 255, 255, .68);
          box-shadow: none;
      }

      body.dark-mode .yt-timeline-shell.editor {
          background: rgba(10, 16, 28, .72);
      }

      .yt-timeline-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          flex-wrap: wrap;
          margin-bottom: 0px;
      }

      .yt-timeline-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex: 1;
          flex-wrap: wrap;
      }

      .yt-timeline-title span {
          font-size: 18px;
          font-weight: 700;
      }

      .yt-timeline-actions {
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .yt-split-btn,
      .yt-expand-btn {
          min-height: 36px;
          padding: 0 12px;
          border-radius: 12px;
          border: 1px solid var(--line);
          background: var(--chip-bg);
          color: var(--text);
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          font-weight: 700;
      }

      .yt-expand-btn {
          width: 32px;
          justify-content: center;
          padding: 0;
      }

      .yt-zoom-tools {
          display: flex;
          align-items: center;
          gap: 10px;
          color: var(--sub);
      }

      .yt-zoom-tools strong {
          font-size: 13px;
          color: var(--text);
      }

      .yt-editor-board {
          border-radius: 10px;
          overflow: hidden;
          border: 1px solid var(--line);
          background: var(--bg);
      }

      .yt-track-head {
          display: grid;
          grid-template-columns: 110px repeat(13, minmax(48px, 1fr));
          border-bottom: 1px solid var(--line);
          background: rgba(148, 163, 184, .05);
      }

      .yt-track-head span,
      .yt-track-head-spacer {
          min-height: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 11px;
          font-weight: 700;
          color: var(--sub);
      }

      .yt-track-grid {
          display: grid;
          grid-template-columns: 110px minmax(0, 1fr);
          width: 100%;
          min-width: 0;
      }

      .yt-track-labels {
          border-right: 1px solid var(--line);
          background: rgba(148, 163, 184, .04);
      }

      .yt-track-labels div {
          min-height: 53px;
          padding: 10px 10px;
          display: grid;
          align-content: center;
          gap: 4px;
          border-bottom: 1px solid var(--line);
      }

      .yt-track-labels div.time {
          min-height: 53px;
          padding-top: 10px;
          padding-bottom: 10px;
      }

      .yt-track-labels strong {
          font-size: 12px;
          color: #6a7fff;
      }

      .yt-track-labels span {
          font-size: 12px;
          color: var(--sub);
      }

      .yt-track-lanes {
          display: grid;
          position: relative;
          align-content: start;
          width: 100%;
          min-width: 0;
      }

      .yt-track-ruler {
          position: relative;
          height: 53px;
          border-bottom: 1px solid #eceef3;
          width: 100%;
      }

      .yt-track-ruler span {
          position: absolute;
          top: 18px;
          transform: translateX(-50%);
          font-size: 11px;
          font-weight: 700;
          color: var(--sub);
          white-space: nowrap;
      }

      .yt-track-ruler span.start {
          transform: none;
      }

      .yt-track-ruler span.end {
          transform: translateX(-100%);
      }

      .yt-scrub-area {
          position: absolute;
          left: 0;
          right: 0;
          top: 56px;
          bottom: 0;
          z-index: 1;
          cursor: ew-resize;
      }

      .yt-playhead {
          position: absolute;
          top: 56px;
          bottom: 0;
          width: 2px;
          background: #6a7fff;
          z-index: 4;
          transform: translateX(-1px);
          pointer-events: auto;
          cursor: ew-resize;
      }

      .yt-playhead span {
          position: absolute;
          top: 0;
          left: 50%;
          width: 10px;
          height: 10px;
          border-radius: 999px;
          background: #6a7fff;
          transform: translate(-50%, -50%);
          box-shadow: 0 0 0 4px rgba(106, 127, 255, .14);
      }

      .yt-track-row {
          min-height: 53px;
          border-bottom: 1px solid #eceef3;
          background-image: linear-gradient(to right, rgba(148, 163, 184, .08) 1px, transparent 1px);
          background-size: calc(100% / var(--yt-seconds, 15)) 100%;
          position: relative;
          z-index: 2;
          width: 100%;
      }

      .yt-timeline-hint {
          margin: 0 0 10px;
          font-size: 12px;
          color: var(--sub);
      }

      .yt-caption-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(15, 23, 42, .24);
          display: grid;
          place-items: center;
          padding: 20px;
          z-index: 80;
      }

      .yt-caption-modal {
          width: min(440px, calc(100vw - 32px));
          padding: 18px;
          border-radius: 18px;
          border: 1px solid #e5e7eb;
          background: #ffffff;
          display: grid;
          gap: 14px;
          box-shadow: none;
      }

      .yt-caption-modal-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
      }

      .yt-caption-modal-head strong {
          font-size: 16px;
      }

      .yt-caption-modal-close {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          border: 1px solid #e5e7eb;
          background: #f4f5f7;
          color: var(--text);
          display: grid;
          place-items: center;
      }

      .yt-caption-modal-input {
          width: 100%;
          min-height: 120px;
          padding: 14px 16px;
          border-radius: 14px;
          border: 1px solid #e5e7eb;
          background: #f4f5f7;
          color: var(--text);
          line-height: 1.7;
          resize: none;
      }

      .yt-caption-modal-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
      }

      .yt-track-clip {
          min-height: 32px;
          height: 32px;
          border-radius: 4px;
          padding: 0 0px;
          display: flex;
          align-items: center;
          font-size: 11px;
          font-weight: 700;
          text-align: left;
          overflow: hidden;
          white-space: nowrap;
          position: absolute;
          top: 11px;
          border: 0;
          grid-row: 1;
          user-select: none;
      }

      .yt-track-clip-main {
          width: 100%;
          height: 100%;
          padding: 0 8px;
          background: transparent;
          color: inherit;
          font: inherit;
          text-align: left;
          display: flex;
          align-items: center;
      }

      .yt-track-clip.subtitle {
          background: #6b5cff;
          color: #f8fbff;
      }

      .yt-track-clip.visual {
          background: rgba(63, 191, 174, .82);
          color: #ecfffb;
      }

      .yt-track-clip.active {
          outline: 1px solid rgba(106, 127, 255, .48);
          box-shadow: none;
          z-index: 3;
      }

      .yt-clip-handle {
          position: absolute;
          top: 3px;
          bottom: 3px;
          width: 8px;
          border-radius: 2px;
          background: rgba(255, 255, 255, .48);
          cursor: ew-resize;
      }

.yt-track-clip.visual .yt-clip-handle {display: none;}

      .yt-clip-handle.left {
          left: 4px;
      }

      .yt-clip-handle.right {
          right: 4px;
      }

      .yt-track-empty {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          padding: 0 10px;
          color: var(--sub);
          font-size: 11px;
          font-weight: 700;
      }

      .yt-time-readout {
          font-size: 12px;
          font-weight: 700;
          color: var(--sub);
      }

      .yt-range-field {
          display: grid;
          gap: 10px;
          margin-top: 0px !important;
      }

      .yt-range-field div {
          display: flex;
          align-items: end;
          justify-content: space-between;
          gap: 10px;
      }

      .yt-range-field strong {
          font-size: 12px;
      }

      .yt-range-field span {
          font-size: 12px;
          color: var(--sub);
      }

      .yt-range-field input[type="range"] {
          width: 100%;
      }

      .yt-style-side {
          display: grid;
      }

      body:not(.dark-mode) .yt-editor-board {
          background: #f4f7fb;
      }

      body:not(.dark-mode) .yt-track-labels {
          background: #eef3f9;
      }

      body.dark-mode .yt-toolbar-btn,
      body.dark-mode .yt-toolbar-select,
      body.dark-mode .yt-toolbar-color,
      body.dark-mode .yt-split-btn,
      body.dark-mode .yt-expand-btn {
          background: rgba(255, 255, 255, .02);
      }

      body:not(.dark-mode) .yt-timeline-shell.editor,
      body:not(.dark-mode) .yt-subtitle-toolbar {
          box-shadow: none;
      }

      .yt-mini-group {
          display: grid;
          gap: 8px;
      }

      .yt-mini-group span {
          font-size: 12px;
          font-weight: 700;
          color: var(--sub);
      }

      .yt-mini-chip-row {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }

      .yt-mini-chip {
          min-height: 36px;
          padding: 0 14px;
          border-radius: 999px;
          font-size: 12px;
          font-weight: 700;
          color: var(--sub);
      }

      .yt-color-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
      }

      .yt-color-field {
          display: grid;
          gap: 8px;
      }

      .yt-color-field span {
          font-size: 12px;
          font-weight: 700;
          color: var(--sub);
      }

      .yt-color-field input {
          width: 100%;
          height: 46px;
          border-radius: 14px;
          border: 1px solid var(--line);
          background: var(--surface);
      }

      .yt-timeline-shell {
          display: grid;
          gap: 14px;
      }

      .yt-timeline {
          display: flex;
          gap: 10px;
          overflow: auto;
          padding-bottom: 4px;
      }

      .yt-timeline-block {
          min-width: 120px;
          padding: 14px;
          display: grid;
          gap: 8px;
          border-radius: 18px;
          text-align: left;
      }

      .yt-timeline-block strong {
          font-size: 13px;
      }

      .yt-timeline-block span {
          font-size: 12px;
          color: var(--sub);
          line-height: 1.55;
      }

      .yt-thumb-frame {
          overflow: hidden;
          border-radius: 20px;
          background: #0f172a;
      }

      .yt-thumb-frame img {
          width: 100%;
          aspect-ratio: 9/16;
          object-fit: cover;
          display: block;
      }

      .yt-render-card {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
      }

      .yt-render-video {
          width: 100%;
          border-radius: 18px;
          background: #0f172a;
          aspect-ratio: 16/9;
          object-fit: cover;
      }

      .yt-render-result {
          padding: 16px;
          border-radius: 16px;
          background: var(--chip-bg);
          color: var(--sub);
          font-size: 13px;
          line-height: 1.6;
      }

      .yt-render-result.ready {
          color: var(--text);
          border: 1px solid rgba(108, 124, 255, .26);
      }

      .yt-primary.is-muted {
          opacity: .72;
      }

      .yt-primary.compact {
          width: auto;
          min-width: 220px;
      }

      .yt-primary.yt-wide {
          width: 100%;
      }

      .yt-footer-actions.single {
          justify-content: flex-end;
      }

      .yt-footer-actions.three {
          justify-content: space-between;
      }

      .yt-soft-btn {
          min-width: 140px;
      }

      .yt-footer-actions.paired {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 180px));
          justify-content: space-between;
          gap: 12px;
      }

      .yt-footer-actions.paired.triple {
          grid-template-columns: repeat(3, minmax(0, 180px));
      }

      .yt-footer-actions.paired .yt-soft-btn,
      .yt-footer-actions.paired .yt-primary {
          width: 100%;
          min-width: 0;
          height: 44px;
      }

      @media (max-width:1100px) {
          .yt-style-grid {
              grid-template-columns: repeat(4, minmax(0, 1fr));
          }

          .yt-template-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }
      }

      @media (max-width:980px) {

          .yt-stepper,
          .yt-ratio-grid,
          .yt-chip-row,
          .yt-style-grid,
          .yt-template-grid,
          .yt-two-column,
          .yt-editor-layout,
          .yt-subtitle-layout,
          .yt-render-grid,
          .yt-render-card {
              grid-template-columns: 1fr;
          }

          .yt-track-head {
              grid-template-columns: 90px repeat(13, minmax(44px, 1fr));
          }

          .yt-track-grid {
              grid-template-columns: 90px minmax(0, 1fr);
          }
      }

      @media (max-width:780px) {
          .yt-panel {
              padding: 20px;
          }

          .yt-stepper {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .yt-style-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .yt-template-grid {
              grid-template-columns: 1fr;
          }

          .yt-footer-actions,
          .yt-footer-actions.three {
              flex-direction: column;
              align-items: stretch;
          }

          .yt-primary.compact,
          .yt-soft-btn {
              width: 100%;
              min-width: 0;
          }

          .yt-subtitle-toolbar,
          .yt-timeline-top {
              align-items: flex-start;
          }

          .yt-track-head {
              min-width: 820px;
          }

          .yt-track-grid {
              min-width: 0;
          }

          .yt-editor-board {
              overflow: hidden;
          }
      }

      .yt-process-shell {
          display: grid;
          gap: 16px;
      }

      .yt-process-layout {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 20px;
          align-items: start;
      }

      .yt-process-side,
      .yt-process-main,
      .yt-subtitle-options,
      .yt-subtitle-previewpane {
          display: grid;
          gap: 12px;
      }

      .yt-process-card {
          padding: 18px;
          border-radius: 16px;
          border: 1px solid #eceef3;
          background: #ffffff;
          display: grid;
          gap: 14px;
      }

      body.dark-mode .yt-process-card {
          background: #ffffff;
          border-color: #eceef3;
      }

      .yt-process-block {
          display: grid;
          gap: 10px;
      }

      .yt-style-grid.compact {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .yt-style-card.noimage img {
          opacity: .88;
      }

      .yt-template-grid.singlecol {
          grid-template-columns: 1fr;
      }

      .yt-template-card.titleonly {
          min-height: 60px;
          align-content: center;
      }

      .yt-template-card.titleonly strong {
          margin-top: 4px;
      }

      .yt-template-badge {
          display: inline-flex;
          align-items: center;
          min-height: 22px;
          padding: 0 8px;
          border-radius: 999px;
          background: rgba(106, 127, 255, .10);
          color: #6a7fff;
          font-size: 11px;
          font-weight: 700;
          width: max-content;
      }

      .yt-time-badge {
          display: inline-flex;
          align-items: center;
          min-height: 20px;
          padding: 0 7px;
          border-radius: 999px;
          background: #f3f5f8;
          color: #7c8798;
          font-size: 10px;
          font-weight: 700;
          line-height: 1;
      }

      .yt-status-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 22px;
          padding: 0 8px;
          border-radius: 999px;
          font-size: 10px;
          font-weight: 800;
          letter-spacing: -.01em;
          line-height: 1;
      }

      .yt-status-badge.idle {
          background: #f3f5f8;
          color: #7c8798;
      }

      .yt-status-badge.loading {
          background: rgba(106, 127, 255, .10);
          color: #6a7fff;
      }

      .yt-status-badge.ready {
          background: rgba(91, 191, 167, .14);
          color: #3d9d8d;
      }

      .yt-equalizer-shell {
          min-height: 58px;
          border-radius: 12px;
          background: var(--chip-bg);
          overflow: hidden;
          display: grid;
          align-items: center;
      }

      .yt-equalizer.thin {
          min-height: 58px;
          padding: 0 10px;
          width: 100%;
          justify-content: space-between;
          gap: 4px;
          background: linear-gradient(180deg, rgba(124, 92, 255, .08) 0%, rgba(98, 233, 213, .03) 100%);
      }

      .yt-equalizer.thin span {
          width: 5px;
          border-radius: 3px;
          opacity: .95;
          background: linear-gradient(180deg, #fff6ff 0%, #cfc4ff 30%, #8c6cff 64%, #62e9d5 100%);
          box-shadow: 0 0 10px rgba(124, 92, 255, .24);
      }

      .yt-equalizer.thin span:nth-child(1) {
          height: 24px;
      }

      .yt-equalizer.thin span:nth-child(2) {
          height: 34px;
      }

      .yt-equalizer.thin span:nth-child(3) {
          height: 18px;
      }

      .yt-equalizer.thin span:nth-child(4) {
          height: 30px;
      }

      .yt-equalizer.thin span:nth-child(5) {
          height: 42px;
      }

      .yt-equalizer.thin span:nth-child(6) {
          height: 20px;
      }

      .yt-equalizer.thin span:nth-child(7) {
          height: 28px;
      }

      .yt-equalizer.thin span:nth-child(8) {
          height: 16px;
      }

      .yt-equalizer.thin span:nth-child(9) {
          height: 38px;
      }

      .yt-equalizer.thin span:nth-child(10) {
          height: 26px;
      }

      .yt-equalizer.thin span:nth-child(11) {
          height: 32px;
      }

      .yt-equalizer.thin span:nth-child(12) {
          height: 22px;
      }

      .yt-process-image,
      .yt-process-video {
          width: 100%;
          display: block;
          border-radius: 12px;
          background: #0f172a;
          object-fit: cover;
      }

      .yt-process-placeholder {
          position: relative;
      }

      .yt-process-status {
          position: absolute;
          inset: 0;
          display: grid;
          place-content: center;
          gap: 10px;
          background: rgba(15, 23, 42, .42);
          color: #fff;
          text-align: center;
      }

      .yt-spinner {
          width: 26px;
          height: 26px;
          border-radius: 999px;
          border: 2px solid rgba(255, 255, 255, .26);
          border-top-color: #62e9d5;
          animation: ytSpin .8s linear infinite;
          justify-self: center;
      }

      @keyframes ytSpin {
          to {
              transform: rotate(360deg);
          }
      }

      .yt-image-stage.compact {
          border-radius: 12px;
      }

      .yt-image-stage.compact .yt-process-image {
          min-height: 340px;
      }

      .yt-image-stage.compact.video .yt-process-image,
      .yt-image-stage.compact.video .yt-process-video {
          min-height: 340px;
      }

      .yt-preview-skeleton {
          width: 100%;
          min-height: 340px;
      }

      .yt-preview-skeleton .yt-skeleton-block {
          width: 100%;
          height: 100%;
          min-height: 340px;
          border-radius: 12px;
      }

      .yt-process-card.narrow-preview {
          max-width: none;
          justify-self: stretch;
          width: 100%;
      }

      .yt-preview-only .yt-image-stage.compact,
      .yt-preview-only .yt-image-stage.compact.video {
          width: 100%;
          min-height: 420px;
      }

      .yt-preview-only .yt-process-image,
      .yt-preview-only .yt-process-video {
          width: 100%;
          min-height: 420px;
      }

      .yt-preview-only .yt-preview-skeleton {
          min-height: 420px;
      }

      .yt-preview-only .yt-preview-skeleton .yt-skeleton-block {
          min-height: 420px;
      }

      .yt-cut-card.detailed {
          background: rgba(255, 255, 255, .56);
      }

      body.dark-mode .yt-cut-card.detailed {
          background: rgba(255, 255, 255, .03);
      }

      .yt-cut-card.squarethumb {
          grid-template-columns: 64px minmax(0, 1fr);
      }

      .yt-cut-thumb.square img {
          width: 64px;
          height: 64px;
          border-radius: 10px;
      }

      .yt-thumb-frame.wide img {
          aspect-ratio: 16/9;
      }

      .yt-subtitle-top {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 20px;
          align-items: start;
      }

      .yt-subtitle-options .yt-process-card,
      .yt-subtitle-previewpane .yt-process-card {
          height: 100%;
      }

      .yt-caption-overlay {
          width: max-content;
          max-width: calc(100% - 24px);
          left: 50%;
          right: auto;
          transform: translateX(-50%);
      }

      .yt-caption-overlay.top {
          top: 18px;
          transform: translateX(-50%);
      }

      .yt-caption-overlay.middle {
          top: 50%;
          transform: translate(-50%, -50%);
      }

      .yt-caption-overlay.bottom {
          bottom: 18px;
          transform: translateX(-50%);
      }

      .yt-caption-overlay span {
          display: inline-block;
      }

      .yt-stepper {
          position: relative;
          align-items: start;
      }

      .yt-stepper::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 15px;
          height: 1px;
          background: var(--line);
      }

      .yt-step {
          background: transparent;
          border: 0;
          box-shadow: none;
          position: relative;
          z-index: 1;
          padding: 0 6px 8px;
      }

      .yt-step.active,
      .yt-step.done {
          border: 0;
          box-shadow: none;
          background: transparent;
      }

      .yt-step-index {
          border: 1px solid var(--line);
          background: var(--surface);
      }

      .yt-step.active .yt-step-index,
      .yt-step.done .yt-step-index {
          border-color: transparent;
      }

      .yt-toolbar-btn,
      .yt-toolbar-select,
      .yt-toolbar-color,
      .yt-split-btn,
      .yt-expand-btn {
          border-radius: 8px;
      }

      .yt-timeline-shell.editor,
      .yt-editor-board,
      .yt-cut-card,
      .yt-process-card,
      .yt-pane,
      .yt-preview-pane {
          border-radius: 14px;
      }

      .yt-track-clip-main {
          cursor: grab;
      }

      .yt-track-clip-main:active {
          cursor: grabbing;
      }

      @media (max-width:980px) {

          .yt-process-layout,
          .yt-subtitle-top {
              grid-template-columns: 1fr;
          }

          .yt-style-grid.compact {
              grid-template-columns: repeat(2, minmax(0, 1fr));
          }

          .yt-process-card.narrow-preview {
              max-width: none;
          }
      }

      .yt-panel {
          padding: 28px;
          background: #ffffff;
          border: 1px solid #eceef3;
          box-shadow: none;
      }

      .yt-process-shell,
      .yt-process-side,
      .yt-process-main,
      .yt-subtitle-options,
      .yt-subtitle-previewpane {
          gap: 16px;
      }

      .yt-process-layout,
      .yt-subtitle-top {
          gap: 20px;
      }

      .yt-process-card,
      .yt-pane,
      .yt-preview-pane,
      .yt-timeline-shell.editor,
      .yt-editor-board {
          border: 1px solid #eceef3;
          box-shadow: none;
          background: #ffffff;
      }

      body.dark-mode .yt-process-card,
      body.dark-mode .yt-pane,
      body.dark-mode .yt-preview-pane,
      body.dark-mode .yt-timeline-shell.editor,
      body.dark-mode .yt-editor-board {
          box-shadow: none;
          background: #ffffff;
          border-color: #eceef3;
      }

      .yt-process-card {
          padding: 20px;
      }

      .yt-ratio-card,
      .yt-choice-chip,
      .yt-style-card,
      .yt-template-card,
      .yt-cut-card,
      .yt-mini-chip,
      .yt-timeline-block,
      .yt-preview-btn,
      .yt-toolbar-btn,
      .yt-split-btn,
      .yt-soft-btn,
      .yt-field input,
      .yt-field textarea {
          border: 1px solid #eceef3;
          box-shadow: none;
      }

      .yt-ratio-card,
      .yt-choice-chip,
      .yt-style-card,
      .yt-template-card,
      .yt-cut-card,
      .yt-mini-chip,
      .yt-preview-btn,
      .yt-toolbar-btn,
      .yt-split-btn,
      .yt-soft-btn {
          background: #ffffff;
      }

      body.dark-mode .yt-ratio-card,
      body.dark-mode .yt-choice-chip,
      body.dark-mode .yt-style-card,
      body.dark-mode .yt-template-card,
      body.dark-mode .yt-cut-card,
      body.dark-mode .yt-mini-chip,
      body.dark-mode .yt-preview-btn,
      body.dark-mode .yt-toolbar-btn,
      body.dark-mode .yt-split-btn,
      body.dark-mode .yt-soft-btn,
      body.dark-mode .yt-field input,
      body.dark-mode .yt-field textarea {
          background: #ffffff;
      }

      .yt-ratio-card.active,
      .yt-choice-chip.active,
      .yt-style-card.active,
      .yt-template-card.active,
      .yt-cut-card.active,
      .yt-mini-chip.active {
          background: #f4f5f7;
          border-color: #e4e7ec;
          box-shadow: none;
      }

      .yt-field input,
      .yt-field textarea {
          padding: 16px 18px;
          background: #f4f5f7;
          border-color: #e5e7eb;
      }

      .yt-cut-list {
          gap: 12px;
      }

      .yt-cut-card {
          padding: 16px;
      }

      .yt-voice-card {
          padding: 14px 16px;
          border: 0;
      }

      .yt-video-preview,
      .yt-image-stage,
      .yt-thumb-frame {
          box-shadow: none;
          border: 1px solid #eceef3;
      }

      .yt-panel {
          padding: 0;
          overflow: hidden;
          border-radius: 20px;
          background: var(--shell-bg);
          border: 1px solid var(--line);
      }

      .yt-process-layout,
      .yt-subtitle-top {
          gap: 0;
          background: var(--workspace-bg);
          align-items: stretch;
      }

      .yt-process-side,
      .yt-subtitle-options {
          padding: 28px 24px;
          background: var(--option-bg);
          border-right: 1px solid var(--line);
          align-content: start;
          gap: 16px;
      }

      .yt-process-main,
      .yt-subtitle-previewpane {
          padding: 28px 30px;
          background: var(--prompt-stage-bg);
          align-content: start;
          gap: 18px;
      }

      .yt-section-head {
          padding: 26px 28px 0;
      }

      .yt-footer-actions {
          padding: 0 28px 28px;
      }

      .yt-process-side .yt-process-card,
      .yt-subtitle-options .yt-process-card {
          padding: 0;
          border: 0;
          background: transparent;
          border-radius: 0;
          gap: 12px;
      }

      .yt-process-main .yt-process-card,
      .yt-subtitle-previewpane .yt-process-card {
          padding: 0;
          border: 0;
          background: transparent;
          border-radius: 0;
          gap: 14px;
      }

      .yt-process-side .yt-group-title,
      .yt-subtitle-options .yt-group-title {
          font-size: 18px;
          font-weight: 700;
          letter-spacing: -.02em;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .yt-process-side .yt-field input,
      .yt-process-side .yt-field textarea,
      .yt-subtitle-options .yt-field input,
      .yt-subtitle-options .yt-field textarea,
      .yt-subtitle-options .yt-color-field input {
          background: var(--input-bg);
          border: 1px solid transparent;
          border-radius: 14px;
          box-shadow: none;
      }

      .yt-process-side .yt-ratio-card,
      .yt-process-side .yt-choice-chip,
      .yt-process-side .yt-style-card,
      .yt-process-side .yt-template-card,
      .yt-process-side .yt-cut-card,
      .yt-process-side .yt-mini-chip,
      .yt-subtitle-options .yt-toolbar-btn,
      .yt-subtitle-options .yt-mini-chip,
      .yt-subtitle-options .yt-split-btn,
      .yt-subtitle-options .yt-soft-btn {
          background: #ffffff;
          border: 1px solid transparent;
          box-shadow: none;
      }

      .yt-process-side .yt-ratio-card.active,
      .yt-process-side .yt-choice-chip.active,
      .yt-process-side .yt-style-card.active,
      .yt-process-side .yt-template-card.active,
      .yt-process-side .yt-cut-card.active,
      .yt-process-side .yt-mini-chip.active,
      .yt-subtitle-options .yt-toolbar-btn.active,
      .yt-subtitle-options .yt-mini-chip.active {
          background: #ffffff;
          border: 1px solid rgba(108, 124, 255, .34);
          box-shadow: 0 6px 18px rgba(108, 124, 255, .08);
      }

      .yt-process-main .yt-group-title,
      .yt-subtitle-previewpane .yt-group-title {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 2px;
      }

      .yt-process-main .yt-script-preview,
      .yt-process-main .yt-render-card,
      .yt-process-main .yt-inline-actions,
      .yt-subtitle-previewpane .yt-time-readout {
          padding-left: 2px;
          padding-right: 2px;
      }

      .yt-process-main .yt-image-stage,
      .yt-process-main .yt-video-preview,
      .yt-process-main .yt-thumb-frame,
      .yt-subtitle-previewpane .yt-video-preview {
          border-radius: 14px;
          border: 1px solid transparent;
          background: #ffffff;
      }

      .yt-matched-workspace {
          grid-template-columns: 1fr 1fr;
          background: var(--workspace-bg);
          min-height: 640px;
      }

      .yt-matched-option {
          padding: 28px 24px;
      }

      .yt-matched-stage {
          padding: 28px 30px;
          display: grid;
          align-content: start;
          gap: 18px;
          background: var(--prompt-stage-bg);
      }

      .yt-matched-stage .section-head {
          padding: 0;
      }

      .yt-matched-option .option-layout,
      .yt-matched-option .option-main,
      .yt-matched-option .option-groups {
          gap: 16px;
      }

      .yt-matched-option .option-section {
          padding: 0;
      }

      .yt-matched-option .field,
      .yt-matched-option .textarea-wrap,
      .yt-matched-option .custom-select-trigger,
      .yt-matched-stage .yt-template-card,
      .yt-matched-stage .yt-voice-card,
      .yt-matched-stage .yt-preview-btn,
      .yt-matched-stage .yt-equalizer-shell {
          background: #ffffff;
          border: 1px solid transparent;
          box-shadow: none;
      }

      .yt-matched-option .textarea-wrap {
          min-height: 260px;
          background: var(--input-bg);
          border-radius: 18px;
          padding: 14px 16px;
      }

      .yt-matched-option .textarea-wrap textarea {
          min-height: 228px;
          font-size: 15px;
          line-height: 1.85;
      }

      .yt-fixed-script {
          min-height: 260px;
          font-size: 15px;
          line-height: 1.85;
          color: var(--text);
      }

      .yt-matched-stage .yt-template-grid.singlecol {
          gap: 16px;
      }

      .yt-matched-stage .yt-template-card.titleonly {
          min-height: 74px;
          padding: 14px 16px;
          border-radius: 18px;
      }

      .yt-matched-stage .yt-template-badge {
          background: #f2f5fb;
          color: #7d8798;
      }

      .yt-matched-stage .yt-template-card.active,
      .yt-matched-stage .yt-voice-card.active {
          border: 1px solid rgba(108, 124, 255, .34);
          box-shadow: 0 6px 18px rgba(108, 124, 255, .08);
      }

      .yt-matched-stage .yt-voice-list {
          gap: 14px;
      }

      .yt-matched-stage .yt-voice-card {
          padding: 16px 18px;
          border-radius: 18px;
      }

      .yt-matched-stage .yt-equalizer-shell {
          min-height: 56px;
          border-radius: 16px;
          background: var(--input-bg);
      }

      .yt-matched-stage .yt-footer-actions {
          padding: 0;
          margin-top: 8px;
      }

      .yt-primary .button-spinner {
          width: 16px;
          height: 16px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
      }

      .yt-primary .button-spinner iconify-icon {
          font-size: 16px;
      }

      .yt-stepper {
          position: relative;
          grid-template-columns: repeat(7, minmax(0, 1fr));
          gap: 10px;
          padding: 2px 0 4px;
      }

      .yt-stepper::before {
          content: "";
          position: absolute;
          left: 16px;
          right: 16px;
          top: 16px;
          height: 1px;
          background: #d9e0ea;
      }

      body.dark-mode .yt-stepper::before {
          background: #2a3548;
      }

      .yt-step {
          padding: 0 4px 6px;
          gap: 8px;
          color: #8a94a6;
      }

      .yt-step-index {
          width: 32px;
          height: 32px;
          border-radius: 999px;
          border: 1px solid #d9e0ea;
          background: #ffffff;
          color: #76839a;
      }

      .yt-step.active,
      .yt-step.done {
          color: var(--text);
          background: transparent;
      }

      .yt-step.active .yt-step-index,
      .yt-step.done .yt-step-index {
          background: #ffffff;
          border-color: #95a3b8;
          color: #334155;
      }

      body.dark-mode .yt-step-index {
          background: #192233;
          border-color: #304056;
          color: #b6c3d7;
      }

      body.dark-mode .yt-step.active .yt-step-index,
      body.dark-mode .yt-step.done .yt-step-index {
          background: #23314a;
          border-color: #5c708f;
          color: #f8fbff;
      }

      .yt-dropdown-grid,
      .yt-two-slider-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
      }

      .yt-select-field {
          display: grid;
          gap: 8px;
      }

      .yt-custom-select .custom-select-trigger,
      .yt-custom-select .custom-select-menu {
          background: var(--input-bg);
          border: 1px solid #e5e7eb;
          box-shadow: none;
      }

      .yt-custom-select .custom-select-menu {
          padding: 8px;
          border-radius: 14px;
      }

      .yt-custom-select .custom-option {
          justify-content: flex-start;
          text-align: left;
          white-space: normal;
          height: auto;
          min-height: 40px;
          line-height: 1.45;
          padding: 10px 12px;
      }

      .yt-select-field span,
      .yt-color-field span {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          font-weight: 700;
          color: var(--sub);
      }

      .yt-select-field select {
          width: 100%;
          height: 46px;
          padding: 0 14px;
          border-radius: 14px;
          border: 1px solid #e5e7eb;
          background: var(--input-bg);
          color: var(--text);
      }

      .yt-select-preview {
          min-height: 44px;
          padding: 8px 10px;
          border-radius: 14px;
          border: 1px solid #e5e7eb;
          background: var(--input-bg);
          display: flex;
          align-items: center;
      }

      .yt-select-preview.font {
          font-size: 17px;
          color: var(--text);
      }

      .yt-select-chip {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 30px;
          padding: 6px 12px;
          border-radius: 10px;
          font-size: 14px;
          font-weight: 700;
      }

      .yt-color-dot {
          width: 10px;
          height: 10px;
          border-radius: 999px;
          display: inline-block;
          border: 1px solid rgba(15, 23, 42, .08);
      }

      .yt-color-field input {
          background: var(--input-bg);
          border-color: #e5e7eb;
      }

      .yt-color-hidden {
          position: absolute;
          width: 1px;
          height: 1px;
          opacity: 0;
          pointer-events: none;
      }

      .yt-color-trigger {
          width: 100%;
          height: 46px;
          border-radius: 14px;
          border: 1px solid #e5e7eb;
          background: var(--input-bg);
      }

      .yt-render-shell .yt-process-side {
          gap: 18px;
      }

      .yt-render-thumb-card,
      .yt-render-control-card {
          gap: 16px !important;
      }

      .yt-render-tiles {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
      }

      .yt-render-tile {
          padding: 14px;
          border-radius: 16px;
          border: 1px solid var(--line);
          background: var(--input-bg);
          display: grid;
          gap: 8px;
      }

      .yt-render-tile.wide,
      .yt-render-note {
          grid-column: 1 / -1;
      }

      .yt-render-tile span,
      .yt-render-note {
          font-size: 12px;
          color: var(--sub);
          line-height: 1.6;
      }

      .yt-render-tile strong {
          font-size: 18px;
          color: var(--text);
      }

      .yt-render-methods {
          display: grid;
          gap: 10px;
      }

      .yt-render-method {
          min-height: 54px;
          padding: 0 16px;
          border-radius: 14px;
          border: 1px solid #dbe3ee;
          background: #ffffff;
          color: #1f2937;
          font-size: 14px;
          font-weight: 700;
          text-align: left;
      }

      .yt-render-method.primary {
          background: #eaf1ff;
          color: #2357d8;
          border-color: #c7d6ff;
      }

      .yt-render-method.accent {
          background: #eef8ff;
          color: #1d7ea8;
          border-color: #c9ecff;
      }

      .yt-render-method.dark {
          background: #f4f5f7;
          color: #111827;
          border-color: #e5e7eb;
      }

      .yt-render-result-detail {
          display: grid;
          gap: 10px;
          padding: 14px 0 0;
      }

      .yt-render-detail-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 12px 14px;
          border-radius: 14px;
          border: 1px solid var(--line);
          background: var(--input-bg);
      }

      .yt-render-detail-row span {
          font-size: 12px;
          color: var(--sub);
      }

      .yt-render-detail-row strong {
          font-size: 13px;
          color: var(--text);
          text-align: right;
      }

      .yt-footer-actions.paired {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          justify-content: stretch;
      }

      .yt-footer-actions.paired.triple {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .yt-footer-actions.spread {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
      }

      .yt-footer-actions.spread .yt-soft-btn,
      .yt-footer-actions.spread .yt-primary {
          width: auto;
          min-width: 132px;
          height: 46px;
          padding: 0 20px;
      }

      @media (max-width:780px) {
          body.youtube-page-active .mobile-generate-bar {
              display: none !important;
          }

          .yt-dropdown-grid,
          .yt-two-slider-grid,
          .yt-footer-actions.paired,
          .yt-footer-actions.paired.triple,
          .yt-footer-actions.spread {
              grid-template-columns: 1fr;
          }

          .yt-footer-actions.spread {
              display: grid;
          }
      }

      body.dark-mode .yt-panel,
      body.dark-mode .yt-process-layout,
      body.dark-mode .yt-subtitle-top {
          background: #111827;
          border-color: #243244;
      }

      body.dark-mode .yt-process-side,
      body.dark-mode .yt-subtitle-options {
          background: #111827;
          border-right-color: #243244;
      }

      body.dark-mode .yt-process-main,
      body.dark-mode .yt-subtitle-previewpane {
          background: #141c2a;
      }

      body.dark-mode .yt-process-card,
      body.dark-mode .yt-pane,
      body.dark-mode .yt-preview-pane,
      body.dark-mode .yt-timeline-shell.editor,
      body.dark-mode .yt-editor-board,
      body.dark-mode .yt-ratio-card,
      body.dark-mode .yt-choice-chip,
      body.dark-mode .yt-style-card,
      body.dark-mode .yt-template-card,
      body.dark-mode .yt-cut-card,
      body.dark-mode .yt-mini-chip,
      body.dark-mode .yt-preview-btn,
      body.dark-mode .yt-toolbar-btn,
      body.dark-mode .yt-split-btn,
      body.dark-mode .yt-soft-btn,
      body.dark-mode .yt-render-method,
      body.dark-mode .yt-render-tile,
      body.dark-mode .yt-select-field select,
      body.dark-mode .yt-select-preview,
      body.dark-mode .yt-field input,
      body.dark-mode .yt-field textarea,
      body.dark-mode .yt-color-field input {
          background: #182235 !important;
          border-color: #2b3b52 !important;
          color: #e5eefc !important;
      }

      body.dark-mode .yt-render-method.primary {
          background: #1f3462 !important;
          color: #dbe7ff !important;
          border-color: #385089 !important;
      }

      body.dark-mode .yt-render-method.accent {
          background: #153847 !important;
          color: #d8f7ff !important;
          border-color: #246277 !important;
      }

      body.dark-mode .yt-render-method.dark {
          background: #202838 !important;
          color: #f3f6fb !important;
          border-color: #334155 !important;
      }

      body.dark-mode .yt-custom-select .custom-select-trigger,
      body.dark-mode .yt-custom-select .custom-select-menu,
      body.dark-mode .yt-color-trigger {
          background: #182235 !important;
          border-color: #2b3b52 !important;
          color: #e5eefc !important;
      }

      body.dark-mode .yt-render-detail-row {
          background: #182235;
          border-color: #2b3b52;
      }

      body.dark-mode .yt-track-labels,
      body.dark-mode .yt-track-ruler,
      body.dark-mode .yt-track-row {
          background-color: #182235 !important;
          border-color: #2b3b52 !important;
      }

      body.dark-mode .yt-track-row {
          background-image: linear-gradient(to right, rgba(148, 163, 184, .10) 1px, transparent 1px);
      }

      body.dark-mode .yt-caption-modal {
          background: #182235;
          border-color: #2b3b52;
      }

      body.dark-mode .yt-caption-modal-close,
      body.dark-mode .yt-caption-modal-input {
          background: #111827;
          border-color: #2b3b52;
          color: #e5eefc;
      }

      body.dark-mode .yt-track-empty,
      body.dark-mode .yt-track-labels span,
      body.dark-mode .yt-time-readout,
      body.dark-mode .yt-render-tile span,
      body.dark-mode .yt-render-note,
      body.dark-mode .yt-select-field span,
      body.dark-mode .yt-color-field span {
          color: #94a3b8 !important;
      }

      .youtube-hidden-stage-controls {
          display: none !important;
      }

      .youtube-ratio-choice-wrap {
          width: min(100%, 980px);
          margin: 42px auto 0;
          display: grid;
          gap: 64px;
          justify-items: center;
      }

      .youtube-ratio-choice-grid {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 28px;
      }

      .youtube-ratio-choice-card .youtube-ratio-card-btn {
          width: 100%;
          min-height: 270px;
          padding: 30px;
          display: grid;
          grid-template-rows: auto auto auto minmax(0, 1fr) auto;
          align-content: stretch;
          justify-items: center;
          gap: 15px;
          text-align: center;
          border: 1px solid var(--line);
          border-radius: 20px;
          background: var(--soft-surface-strong);
          color: var(--text);
          box-shadow: 0 12px 28px rgba(66, 84, 128, .07);
      }

      .youtube-ratio-choice-card.active .youtube-ratio-card-btn {
          border-color: rgba(82, 116, 255, .48);
          box-shadow: 0 16px 34px rgba(82, 116, 255, .13);
      }

      .youtube-ratio-choice-card strong {
          font-size: 34px;
          line-height: 1;
      }

      .youtube-ratio-choice-card em {
          font-style: normal;
          font-size: 14px;
          font-weight: 800;
          color: #5274ff;
      }

      .youtube-ratio-choice-card span:not(.youtube-ratio-flat-icon) {
          font-size: 14px;
          line-height: 1.65;
          color: var(--sub);
          word-break: keep-all;
      }

      .youtube-ratio-choice-card .youtube-ratio-select-pill {
          align-self: end;
          margin-top: 8px;
          min-width: 132px;
          height: 44px;
          padding: 0 22px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background: #5274ff;
          color: #ffffff;
          font-size: 14px;
          font-weight: 800;
          line-height: 1;
      }

      .youtube-ratio-flat-icon {
          position: relative;
          width: 96px;
          height: 78px;
          display: block;
          border-radius: 10px;
          background: #eef2ff;
          border: 0px solid rgba(82, 116, 255, .18);
          box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .85);
      }

      .youtube-ratio-flat-icon i,
      .youtube-ratio-flat-icon b {
          position: absolute;
          display: block;
          border-radius: 10px;
          content: "";
      }

      .youtube-ratio-flat-icon.landscape i {
          left: 16px;
          right: 16px;
          top: 20px;
          height: 36px;
          background: #5274ff;
      }

      .youtube-ratio-flat-icon.landscape b {
          left: 38px;
          right: 38px;
          bottom: 14px;
          height: 5px;
          background: #b9c6ff;
      }

      .youtube-ratio-flat-icon.square i {
          left: 24px;
          top: 16px;
          width: 48px;
          height: 48px;
          background: #5274ff;
      }

      .youtube-ratio-flat-icon.square b {
          right: 18px;
          bottom: 14px;
          width: 18px;
          height: 18px;
          background: #b9c6ff;
      }

      .youtube-ratio-flat-icon.portrait i {
          left: 34px;
          top: 12px;
          width: 28px;
          height: 54px;
          background: #5274ff;
      }

      .youtube-ratio-flat-icon.portrait b {
          left: 43px;
          bottom: 18px;
          width: 10px;
          height: 4px;
          background: #b9c6ff;
      }

      .youtube-centered-next-btn {
          width: min(260px, 100%);
      }

      .youtube-preset-inline {
          width: 100%;
          margin: 0;
          padding: 24px;
          position: relative;
          box-shadow: none;
      }

      .youtube-preset-inline .youtube-modal-head h2 {
          margin: 0;
      }

      .youtube-preset-inline-copy {
          margin: 10px 0 0;
          font-size: 14px;
          line-height: 1.7;
          color: #5b6472;
          word-break: keep-all;
      }


      .youtube-cut-editor-grid {
          display: grid;
          grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
          gap: 18px;
          align-items: start;
      }

      .youtube-cut-voice-panel,
      .youtube-video-model-panel,
      .youtube-bgm-panel {
          padding: 20px;
          border: 1px solid var(--line);
          border-radius: 14px;
          background: var(--soft-surface-strong);
      }

      .youtube-voice-empty-box {
          min-height: 72px;
          display: grid;
          place-items: center;
          padding: 18px;
          border-radius: 12px;
          background: #f4f5f7;
          color: #9ba7b5;
          font-size: 14px;
          font-weight: 700;
          text-align: center;
      }

      .youtube-generated-voice-card {
          min-height: 64px;
          padding: 12px 14px;
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: center;
          gap: 12px;
          border-radius: 12px;
          background: #ffffff;
          border: 1px solid rgba(226, 232, 240, .95);
      }

      .youtube-generated-voice-info {
          display: grid;
          gap: 4px;
          min-width: 0;
      }

      .youtube-generated-voice-info strong {
          font-size: 14px;
          color: var(--text);
      }

      .youtube-generated-voice-info small {
          font-size: 12px;
          color: var(--sub);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .youtube-cut-audio-play {
          position: absolute;
          right: 8px;
          bottom: 8px;
          width: 34px;
          height: 34px;
          display: grid;
          place-items: center;
          border-radius: 8px;
          background: rgba(15, 23, 42, .82);
          color: #ffffff;
          font-size: 18px;
      }

      .youtube-video-model-panel {
          margin-bottom: 14px;
          display: grid;
          gap: 10px;
      }

      .youtube-video-model-select,
      .youtube-bgm-mood-select {
          width: min(320px, 100%);
      }

      .youtube-bgm-panel {
          margin-top: 16px;
          display: grid;
          gap: 16px;
      }

      .youtube-bgm-controls,
      .youtube-volume-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          align-items: end;
      }

      .yt-track-clip.audio .yt-track-clip-main {
          background: rgba(20, 184, 166, .18);
          color: #0f766e;
      }

      .yt-track-clip.bgm .yt-track-clip-main {
          background: rgba(245, 158, 11, .18);
          color: #92400e;
      }

      @media (max-width:980px) {
          .youtube-ratio-choice-grid,
          .youtube-preset-inline-grid,
          .youtube-cut-editor-grid,
          .youtube-bgm-controls,
          .youtube-volume-grid {
              grid-template-columns: 1fr;
          }
      }