:root {
        --bg: #fffaf0;
        --bg2: #fff4d6;
        --card: #ffffff;
        --card2: #fff9ea;
        --text: #2b2112;
        --muted: #6b5a3d;
        --line: #efdfb2;
        --brand: #d97706;
        --brand2: #f59e0b;
        --brand3: #fb923c;
        --good: #059669;
        --warn: #d97706;
        --danger: #dc2626;
        --purple: #7c3aed;
        --blue: #2563eb;
        --shadow: 0 18px 45px rgba(150, 95, 0, 0.12);
        --shadow-strong: 0 24px 70px rgba(105, 65, 0, 0.18);
        --radius: 24px;
        --radius2: 18px;
      }

      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        font-family: Inter, Arial, Helvetica, sans-serif;
        color: var(--text);
        background:
          radial-gradient(
            circle at top left,
            rgba(251, 191, 36, 0.18),
            transparent 20%
          ),
          radial-gradient(
            circle at bottom right,
            rgba(249, 115, 22, 0.12),
            transparent 20%
          ),
          linear-gradient(180deg, var(--bg) 0%, #fffdf5 100%);
      }

      body {
        min-height: 100vh;
      }

      .page {
        max-width: 1600px;
        margin: 0 auto;
        padding: 18px;
      }

      .hero {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 85% 10%,
            rgba(255, 255, 255, 0.25),
            transparent 18%
          ),
          linear-gradient(135deg, #92400e 0%, #d97706 45%, #f59e0b 100%);
        color: #fff;
        border-radius: 32px;
        padding: 26px 26px 22px;
        box-shadow: var(--shadow-strong);
        margin-bottom: 18px;
      }

      .hero h1 {
        margin: 0 0 8px;
        font-size: 38px;
        line-height: 1.08;
        letter-spacing: 0.2px;
      }

      .hero p {
        margin: 0;
        max-width: 980px;
        font-size: 15px;
        line-height: 1.55;
        opacity: 0.98;
      }

      .hero-badges {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 14px;
      }

      .hero-badge {
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 12px;
        font-weight: 800;
        backdrop-filter: blur(8px);
      }

      .layout {
        display: grid;
        grid-template-columns: 390px minmax(0, 1fr) 430px;
        gap: 18px;
        align-items: start;
      }

      .panel {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .panel-head {
        padding: 16px 18px;
        font-weight: 800;
        font-size: 16px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, #fffef8, #fff7df);
      }

      .panel-body {
        padding: 16px;
      }

      .field {
        margin-bottom: 14px;
      }

      label {
        display: block;
        margin-bottom: 7px;
        font-size: 13px;
        font-weight: 800;
        color: var(--muted);
        letter-spacing: 0.2px;
      }

      input[type="text"],
      input[type="number"],
      input[type="color"],
      input[type="range"],
      input[type="file"],
      textarea,
      select {
        width: 100%;
        border: 1px solid #e7d7a8;
        border-radius: 14px;
        padding: 11px 12px;
        font-size: 14px;
        color: var(--text);
        background: #fffef9;
        outline: none;
        transition:
          border-color 0.16s ease,
          box-shadow 0.16s ease,
          transform 0.16s ease;
      }

      input:focus,
      textarea:focus,
      select:focus {
        border-color: #f59e0b;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
      }

      textarea {
        min-height: 96px;
        resize: vertical;
        line-height: 1.45;
      }

      .grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .grid3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
      }

      .grid4 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 12px;
      }

      .btn-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      button {
        appearance: none;
        border: none;
        border-radius: 14px;
        padding: 11px 15px;
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        background: var(--brand);
        cursor: pointer;
        transition:
          transform 0.18s ease,
          filter 0.18s ease,
          background 0.18s ease;
        box-shadow: 0 10px 24px rgba(217, 119, 6, 0.18);
      }

      button:hover {
        background: var(--brand2);
        transform: translateY(-1px);
        filter: brightness(1.02);
      }

      button.secondary {
        background: #f8edd0;
        color: #6b4e0c;
        box-shadow: none;
        border: 1px solid #ecd48f;
      }

      button.secondary:hover {
        background: #f7e4b0;
      }

      button.good {
        background: var(--good);
      }
      button.warn {
        background: var(--warn);
      }
      button.danger {
        background: var(--danger);
      }
      button.purple {
        background: var(--purple);
      }
      button.blue {
        background: var(--blue);
      }

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

      .pill {
        border: 1px solid #efdca8;
        background: var(--card2);
        color: #7b5514;
        border-radius: 14px;
        padding: 11px 12px;
        font-size: 14px;
        font-weight: 800;
        text-align: center;
        cursor: pointer;
        transition: 0.18s ease;
        box-shadow: none;
      }

      .pill.active {
        background: linear-gradient(180deg, #fff3d2, #ffe7a3);
        color: #8a4b00;
        border-color: #efb84d;
        box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
      }

      .inline-meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .meta-chip {
        padding: 8px 10px;
        border-radius: 999px;
        background: #fff9ea;
        border: 1px solid #efdfb2;
        font-size: 12px;
        font-weight: 700;
        color: #7b5f2a;
      }

      .preview-wrap {
        padding: 18px;
        min-height: 920px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background:
          radial-gradient(
            circle at center,
            rgba(251, 191, 36, 0.16),
            transparent 35%
          ),
          linear-gradient(180deg, #fffaf0, #fff7e1);
      }

      .stage {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }

      .screen-shell {
        background: linear-gradient(180deg, #171717, #0f172a);
        border-radius: 42px;
        padding: 14px;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.24);
        position: relative;
      }

      .screen-shell:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 8px;
        transform: translateX(-50%);
        width: 124px;
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
      }

      .reel-screen {
        position: relative;
        overflow: hidden;
        border-radius: 30px;
        background: #000;
        border: 2px solid rgba(255, 255, 255, 0.08);
        transform-origin: center center;
      }

      .reel-screen img,
      .reel-screen video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .progress-strip {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 8px;
        display: flex;
        gap: 5px;
        z-index: 8;
      }

      .progress-seg {
        flex: 1;
        height: 4px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.24);
      }

      .progress-fill {
        width: 0%;
        height: 100%;
        background: #fff;
        transition: width 0.12s linear;
      }

      .screen-topbar {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
        padding: 18px 12px 10px;
        color: #fff;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 800;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.58),
          rgba(0, 0, 0, 0)
        );
      }

      .overlay-box {
        position: absolute;
        left: 14px;
        right: 14px;
        padding: 12px 14px;
        border-radius: 18px;
        font-weight: 800;
        line-height: 1.34;
        z-index: 10;
        word-break: break-word;
        text-shadow: 0 3px 12px rgba(0, 0, 0, 0.94);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }

      .preview-controls {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .status {
        min-height: 22px;
        text-align: center;
        font-size: 13px;
        color: var(--muted);
      }

      .status strong {
        color: var(--brand);
      }

      .download-link {
        color: var(--brand);
        font-weight: 800;
        text-decoration: none;
      }

      .hint {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.55;
      }

      .timeline {
        width: min(100%, 1020px);
        background: #fffef9;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 14px;
        box-shadow: var(--shadow);
      }

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

      .timeline-track {
        display: flex;
        gap: 8px;
        overflow: auto;
        padding-bottom: 4px;
        scroll-behavior: smooth;
      }

      .timeline-item {
        min-width: 124px;
        border: 1px solid var(--line);
        background: linear-gradient(180deg, #fffef9, #fff4d8);
        border-radius: 14px;
        padding: 8px;
        cursor: pointer;
        transition: 0.18s ease;
        position: relative;
      }

      .timeline-item.active {
        border-color: #f2b94b;
        box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.45);
        background: linear-gradient(180deg, #fff6de, #ffe9b4);
      }

      .timeline-thumb {
        width: 100%;
        height: 92px;
        border-radius: 10px;
        overflow: hidden;
        background: #111827;
        margin-bottom: 6px;
        position: relative;
      }

      .timeline-thumb img,
      .timeline-thumb video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .timeline-meta {
        font-size: 11px;
        color: #745824;
        line-height: 1.35;
      }

      .slides {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 68vh;
        overflow: auto;
        padding-right: 4px;
      }

      .slide-card {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 12px;
        border: 1px solid var(--line);
        background: linear-gradient(180deg, #fffef9, #fff5dc);
        border-radius: 18px;
        padding: 12px;
        cursor: pointer;
        transition: 0.18s ease;
        position: relative;
      }

      .slide-card:hover {
        transform: translateY(-1px);
      }

      .slide-card.active {
        border-color: #efb84d;
        background: linear-gradient(180deg, #fff4d4, #ffe7ac);
        box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
      }

      .slide-card.dragging {
        opacity: 0.45;
      }

      .slide-thumb {
        width: 96px;
        height: 140px;
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        background: #111827;
        border: 1px solid #ead5a1;
        flex-shrink: 0;
      }

      .slide-thumb img,
      .slide-thumb video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .slide-badge,
      .cover-badge,
      .type-badge {
        position: absolute;
        padding: 4px 7px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        color: #fff;
      }

      .slide-badge {
        left: 6px;
        top: 6px;
        background: rgba(0, 0, 0, 0.72);
      }
      .cover-badge {
        right: 6px;
        top: 6px;
        background: #f59e0b;
      }
      .type-badge {
        left: 6px;
        bottom: 6px;
        background: rgba(217, 119, 6, 0.92);
      }

      .slide-title {
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 6px;
        word-break: break-word;
      }

      .slide-sub {
        font-size: 12px;
        color: #7a6130;
        margin-bottom: 8px;
        line-height: 1.45;
      }

      .mini-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }

      .mini-actions button {
        padding: 7px 9px;
        font-size: 12px;
        border-radius: 10px;
      }

      .range-value {
        margin-top: 5px;
        font-size: 12px;
        color: var(--muted);
        font-weight: 800;
      }

      .stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .toolbar-card {
        border: 1px solid var(--line);
        background: #fff9ea;
        border-radius: 16px;
        padding: 12px;
      }

      .seek-wrap {
        width: min(100%, 980px);
        background: #fffef9;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 12px 14px;
        box-shadow: var(--shadow);
      }

      .seek-header {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 8px;
        font-size: 12px;
        color: #7a6130;
        font-weight: 800;
      }

      .seek-wrap input[type="range"] {
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: none;
      }

      .footer-note {
        margin-top: 10px;
        font-size: 12px;
        color: #7a6130;
        line-height: 1.5;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes zoomIn {
        from {
          transform: scale(0.6);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }
      @keyframes flipY {
        from {
          transform: rotateY(180deg);
          opacity: 0;
        }
        to {
          transform: rotateY(0deg);
          opacity: 1;
        }
      }
      @keyframes rotateX {
        from {
          transform: rotateX(90deg);
          opacity: 0;
        }
        to {
          transform: rotateX(0deg);
          opacity: 1;
        }
      }
      @keyframes bounceIn {
        0% {
          transform: scale(0.5);
          opacity: 0;
        }
        60% {
          transform: scale(1.18);
          opacity: 1;
        }
        100% {
          transform: scale(1);
        }
      }
      @keyframes slideUp {
        from {
          transform: translateY(100%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @keyframes spinIn {
        from {
          transform: rotate(360deg) scale(0.7);
          opacity: 0;
        }
        to {
          transform: rotate(0deg) scale(1);
          opacity: 1;
        }
      }
      @keyframes slideLeft {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      @keyframes slideRight {
        from {
          transform: translateX(-100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      @keyframes zoomOut {
        from {
          transform: scale(1.28);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }
      @keyframes blurIn {
        from {
          transform: scale(1.06);
          filter: blur(18px);
          opacity: 0;
        }
        to {
          transform: scale(1);
          filter: blur(0);
          opacity: 1;
        }
      }
      @keyframes popIn {
        0% {
          transform: scale(0.82);
          opacity: 0;
        }
        70% {
          transform: scale(1.08);
          opacity: 1;
        }
        100% {
          transform: scale(1);
        }
      }
      @keyframes swirlIn {
        from {
          transform: rotate(-18deg) scale(0.82);
          opacity: 0;
        }
        to {
          transform: rotate(0deg) scale(1);
          opacity: 1;
        }
      }
      @keyframes flashIn {
        0% {
          opacity: 0;
        }
        45% {
          opacity: 1;
        }
        65% {
          opacity: 0.45;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes softRise {
        from {
          transform: translateY(34px) scale(0.96);
          opacity: 0;
        }
        to {
          transform: translateY(0) scale(1);
          opacity: 1;
        }
      }
      @keyframes swingIn {
        0% {
          transform: rotate(-12deg);
          transform-origin: top center;
          opacity: 0;
        }
        60% {
          transform: rotate(7deg);
          opacity: 1;
        }
        100% {
          transform: rotate(0deg);
        }
      }

      @media (max-width: 1320px) {
        .layout {
          grid-template-columns: 1fr;
        }
        .preview-wrap {
          min-height: auto;
        }
        .slides {
          max-height: none;
        }
      }

      @media (max-width: 720px) {
        .grid2,
        .grid3,
        .grid4,
        .pill-grid {
          grid-template-columns: 1fr;
        }
        .hero h1 {
          font-size: 30px;
        }
      }