*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    :root {
      --bg:       #0a0a0f;
      --card:     rgba(255, 255, 255, 0.04);
      --card-h:   rgba(255, 255, 255, 0.07);
      --border:   rgba(255, 255, 255, 0.08);
      --txt:      #f0f0f5;
      --txt2:     #8888a0;
      --accent:   #7c5cff;
      --glow:     rgba(124, 92, 255, 0.3);
      --ok:       #34d399;
      --err:      #f87171;
      --warn:     #fbbf24;
      --bg-secondary: rgba(255, 255, 255, 0.04);
      --txt-dim:     #666;
      --bg-hover:    rgba(255, 255, 255, 0.08);
    }

    [data-theme="light"] {
      --bg:       #f5f5f7;
      --card:     rgba(0, 0, 0, 0.04);
      --card-h:   rgba(0, 0, 0, 0.08);
      --border:   rgba(0, 0, 0, 0.1);
      --txt:      #1a1a1f;
      --txt2:     #666;
      --bg-secondary: rgba(0, 0, 0, 0.04);
      --txt-dim:     #999;
      --bg-hover:    rgba(0, 0, 0, 0.08);
    }

    body {
      font-family: "Inter", -apple-system, sans-serif;
      background:
        radial-gradient(circle at 85% 4%, rgba(124,92,255,.16), transparent 28%),
        linear-gradient(180deg, #080a12 0%, var(--bg) 42%, #080a12 100%);
      color: var(--txt);
      min-height: 100vh;
      overflow-x: hidden;
    }
    body::before {
      content:"";
      position:fixed; inset:0;
      background:
        radial-gradient(ellipse at 20% 0%,   rgba(124, 92, 255, 0.08)) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(236,72,153,0.06)  0%, transparent 50%);
      z-index:-1;
    }

    .container { max-width:1180px; margin:0 auto; padding:28px 24px 52px; }
    .sr-only {
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 26px;
      background: rgba(255,255,255,0.03);
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      width: 100%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      overflow-x: auto;
      position: sticky;
      top: 10px;
      z-index: 30;
      backdrop-filter: blur(18px);
    }
    .tab-btn {
      position: relative;
      padding: 12px 28px;
      font-size: 0.9rem;
      font-weight: 600;
      font-family: inherit;
      color: var(--txt2);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .tab-btn:hover {
      color: var(--txt);
      background: rgba(255,255,255,0.05);
    }
    .tab-btn.active {
      color: white;
      background: var(--accent);
    }

    .tab-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--err);
    }
    .tab-badge.ok { background: var(--ok); }
    .tab-badge.warn { background: var(--warn); }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }

    /* Sub-tabs (within generate tab) */
    .sub-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 20px;
    }
    .sub-tab {
      padding: 10px 20px;
      font-size: 0.85rem;
      font-weight: 600;
      font-family: inherit;
      background: rgba(255,255,255,0.03);
      color: var(--txt2);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .sub-tab:hover {
      background: rgba(255,255,255,0.06);
      color: var(--txt);
    }
    .sub-tab.active {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }
    .sub-tab-content { display: none; }
    .sub-tab-content.active { display: block; }

    /* Loading skeleton */
    .skeleton {
      background: linear-gradient(90deg, var(--card) 25%, var(--card-h) 50%, var(--card) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 8px;
      min-height: 20px;
      margin-bottom: 8px;
    }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .skeleton-tile { height: 60px; }
    .skeleton-line { height: 16px; width: 60%; }
    .skeleton-line.short { width: 35%; }

    /* Header */
    .header { margin-bottom:24px; }
    .app-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:4px 0 2px;
    }
    .app-brand-block {
      display:grid;
      gap:6px;
    }
    .app-brand {
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--txt);
      text-decoration:none;
      font-weight:900;
      font-size:1.15rem;
    }
    .app-brand-mark {
      display:grid;
      place-items:center;
      width:34px;
      height:34px;
      border-radius:8px;
      background:var(--accent);
      color:white;
      box-shadow:0 10px 28px rgba(124,92,255,.32);
    }
    .app-header-actions {
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      min-width:0;
    }
    .header h1 {
      font-size:2.2rem; font-weight:800;
      background:linear-gradient(135deg,#7c5cff,#ec4899);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }
    .header p { color:var(--txt2); font-size:.92rem; }
    .theme-toggle {
      position: static;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 1.2rem;
      transition: all 0.2s;
    }
    .theme-toggle:hover {
      background: var(--card-h);
      border-color: var(--accent);
    }

    .app-hero {
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(320px,.42fr);
      gap:18px;
      align-items:stretch;
      margin-bottom:18px;
      padding:24px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:8px;
      background:
        linear-gradient(135deg, rgba(124,92,255,.16), rgba(57,217,155,.06)),
        rgba(255,255,255,.035);
      box-shadow:0 20px 56px rgba(0,0,0,.24);
    }
    .app-hero h1 {
      margin:0;
      font-size:clamp(2rem,4vw,4.1rem);
      line-height:.95;
      letter-spacing:0;
    }
    .app-hero p {
      max-width:650px;
      margin:14px 0 0;
      color:var(--txt2);
      line-height:1.65;
      font-size:1rem;
    }
    .app-hero-actions {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:20px;
    }
    .app-command-card {
      display:grid;
      gap:10px;
      align-content:center;
      padding:16px;
      border:1px solid var(--border);
      border-radius:8px;
      background:rgba(8,10,18,.55);
    }
    .app-command-title {
      color:var(--txt2);
      font-size:.78rem;
      font-weight:900;
      text-transform:uppercase;
    }
    .app-command-row {
      display:flex;
      align-items:center;
      gap:10px;
      min-height:38px;
    }
    .app-command-row span {
      display:grid;
      place-items:center;
      width:26px;
      height:26px;
      border-radius:8px;
      background:rgba(124,92,255,.18);
      color:var(--accent);
      font-weight:900;
    }
    .app-command-row b {
      font-size:.92rem;
    }

    /* Server status dot */
    #serverDot {
      display:inline-block; width:9px; height:9px;
      border-radius:50%; background:#555; margin-right:6px;
      vertical-align:middle; transition:background .3s;
    }
    #serverDot.online  { background:var(--ok); box-shadow:0 0 6px var(--ok); }
    #serverDot.offline { background:var(--err); }

    /* Card */
    .card {
      background:rgba(255,255,255,.035); border:1px solid var(--border);
      border-radius:8px; padding:26px; margin-bottom:18px;
      backdrop-filter:blur(20px); transition:border-color .2s, background .2s;
    }
	    .card:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
	    .card-title {
	      font-size:.86rem; font-weight:900; color:var(--txt2);
	      text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px;
	      display:flex; align-items:center; gap:8px;
	    }
	    .v2-grid {
	      display:grid;
	      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	      gap:12px;
	    }
	    .metric-tile {
	      padding:18px;
	      border-radius:8px;
	      border:1px solid var(--border);
	      background:rgba(8,10,18,.42);
	      min-height:84px;
	    }
	    .metric-label {
	      font-size:.72rem;
	      color:var(--txt2);
	      text-transform:uppercase;
	      letter-spacing:.08em;
	      margin-bottom:8px;
	    }
	    .metric-value {
	      font-size:1.45rem;
	      font-weight:800;
	    }
	    .v2-list {
	      display:flex;
	      flex-direction:column;
	      gap:8px;
	    }
	    .live-generation-panel {
	      margin-top:14px;
	      padding:16px;
	      border:1px solid var(--border);
	      border-radius:8px;
	      background:rgba(8,10,18,.36);
	    }
	    .live-generation-head {
	      display:flex;
	      justify-content:space-between;
	      align-items:flex-start;
	      gap:14px;
	      margin-bottom:12px;
	    }
	    .live-generation-title {
	      font-weight:850;
	      color:var(--txt);
	      line-height:1.35;
	    }
	    .live-generation-time {
	      flex:0 0 auto;
	      color:var(--txt2);
	      font-size:.86rem;
	      font-weight:700;
	      white-space:nowrap;
	    }
	    .live-progress-track {
	      width:100%;
	      height:8px;
	      border-radius:999px;
	      overflow:hidden;
	      background:rgba(255,255,255,.08);
	      margin-bottom:10px;
	    }
	    .live-progress-fill {
	      width:0%;
	      height:100%;
	      border-radius:999px;
	      background:linear-gradient(90deg,var(--accent),var(--ok));
	      transition:width .35s ease;
	    }
	    .live-generation-meta {
	      color:var(--txt2);
	      font-size:.86rem;
	      margin-bottom:14px;
	    }
	    .live-generation-columns {
	      display:grid;
	      grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);
	      gap:16px;
	    }
	    .live-log-list,
	    .live-queue-list {
	      display:flex;
	      flex-direction:column;
	      gap:6px;
	      min-height:40px;
	    }
	    .live-log-row,
	    .live-queue-row {
	      padding:8px 10px;
	      border:1px solid rgba(255,255,255,.06);
	      border-radius:8px;
	      background:rgba(255,255,255,.035);
	      color:var(--txt);
	      font-size:.85rem;
	      line-height:1.35;
	    }
	    .live-log-row {
	      display:grid;
	      grid-template-columns:54px minmax(0,1fr);
	      gap:8px;
	    }
	    .live-log-row .log-time {
	      color:var(--txt2);
	      font-variant-numeric:tabular-nums;
	    }
	    .live-log-row.error { border-color:rgba(248,113,113,.32); color:var(--err); }
	    .live-log-row.success { border-color:rgba(52,211,153,.28); color:var(--ok); }
	    .live-empty {
	      color:var(--txt2);
	      font-size:.85rem;
	      padding:8px 0;
	    }
	    .v2-row {
	      display:flex;
	      justify-content:space-between;
	      gap:12px;
	      padding:10px 0;
	      border-bottom:1px solid rgba(255,255,255,.06);
	    }
	    .v2-row:last-child { border-bottom:none; }
	    .v2-muted { color:var(--txt2); font-size:.85rem; }
	    .v2-form {
	      display:grid;
	      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	      gap:10px;
	      margin-bottom:12px;
	    }
	    .v2-input {
	      padding:9px 12px;
	      border-radius:8px;
	      background:var(--card);
	      color:var(--txt);
	      border:1px solid var(--border);
	      font-family:inherit;
	      font-size:.85rem;
	    }
    .v2-pre {
      white-space:pre-wrap;
      overflow:auto;
      max-height:260px;
	      font-size:.78rem;
	      line-height:1.5;
	      background:rgba(0,0,0,.25);
	      border:1px solid var(--border);
      border-radius:8px;
      padding:12px;
    }
    .section-note {
      color: var(--txt2);
      font-size: .85rem;
      line-height: 1.5;
      margin-bottom: 16px;
    }
    .control-strip {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:14px;
      align-items:start;
    }
    .control-block {
      min-width:0;
    }
    .generator-groups {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:14px;
      margin-bottom:16px;
    }
    .generator-group {
      padding:14px;
      border:1px solid var(--border);
      border-radius:12px;
      background:rgba(255,255,255,.025);
    }
    .generator-group h3 {
      font-size:.82rem;
      color:var(--txt2);
      text-transform:uppercase;
      letter-spacing:.6px;
      margin-bottom:10px;
    }
    .generator-group .btn-grid {
      grid-template-columns:1fr;
      margin-bottom:0;
    }
    .generator-action-row {
      display:flex;
      justify-content:flex-end;
      gap:10px;
      margin-bottom:12px;
    }
    .embedded-panel {
      display:none;
    }
    .tab-content.active .embedded-panel {
      display:block;
    }
    .accordion {
      border:1px solid var(--border);
      border-radius:12px;
      background:rgba(255,255,255,.02);
      margin-bottom:16px;
      overflow:hidden;
    }
    .accordion > summary {
      cursor:pointer;
      list-style:none;
      padding:16px 18px;
      color:var(--txt);
      font-weight:700;
      display:flex;
      justify-content:space-between;
      gap:12px;
    }
    .accordion > summary::-webkit-details-marker { display:none; }
    .accordion > summary::after {
      content:"+";
      color:var(--txt2);
      font-weight:800;
    }
    .accordion[open] > summary::after { content:"-"; }
    .accordion-body {
      padding:0 18px 18px;
    }
    .accordion-body > .card {
      margin-bottom:14px;
    }
    .accordion-body > .card:last-child {
      margin-bottom:0;
    }
    .badge {
      font-size:.75rem; background:rgba(124,92,255,.2);
      color:var(--accent); border-radius:20px;
      padding:2px 9px; font-weight:700;
      text-transform:none; letter-spacing:0;
    }

    /* YouTube control center */
    .yt-panel {
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .yt-topbar {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      gap:10px;
    }
    .yt-stat {
      min-height:82px;
      padding:14px;
      border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.025);
    }
    .yt-stat-label {
      color:var(--txt2);
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.6px;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .yt-stat-value {
      color:var(--txt);
      font-size:1.25rem;
      font-weight:800;
      line-height:1.2;
    }
    .yt-stat-note {
      color:var(--txt2);
      font-size:.78rem;
      margin-top:5px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .yt-planning-tracker,
    .yt-planning-note {
      margin-top:14px;
      padding:14px;
      border-radius:10px;
      border:1px solid rgba(124,92,255,.2);
      background:rgba(124,92,255,.055);
    }
    .yt-planning-note {
      color:var(--txt2);
      font-size:.88rem;
      line-height:1.45;
    }
    .yt-tracker-head {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      margin-bottom:12px;
    }
    .yt-tracker-title {
      font-weight:850;
      color:var(--txt);
      line-height:1.35;
    }
    .yt-tracker-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      gap:10px;
      margin-bottom:12px;
    }
    .yt-tracker-step {
      padding:10px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(0,0,0,.16);
    }
    .yt-tracker-step strong {
      display:block;
      color:var(--txt);
      font-size:1.15rem;
      line-height:1.1;
    }
    .yt-tracker-step span {
      display:block;
      margin-top:5px;
      color:var(--txt2);
      font-size:.76rem;
    }
    .yt-tracker-list {
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .yt-tracker-row {
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(110px,.45fr) minmax(120px,.55fr);
      gap:10px;
      align-items:center;
      padding:10px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
    }
    .yt-tracker-row-title {
      font-weight:750;
      color:var(--txt);
      overflow-wrap:anywhere;
    }
    .yt-tracker-row-meta {
      color:var(--txt2);
      font-size:.78rem;
      margin-top:3px;
    }
    .yt-control-layout {
      display:grid;
      grid-template-columns:minmax(260px,320px) minmax(0,1fr);
      gap:16px;
      align-items:start;
    }
    .yt-channel-rail,
    .yt-detail-shell {
      min-width:0;
    }
    .yt-toolbar {
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      margin-bottom:14px;
    }
    .yt-channel-grid {
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .yt-channel-card {
      width:100%;
      text-align:left;
      cursor:pointer;
      padding:14px;
      border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.025);
      color:var(--txt);
      font-family:inherit;
      transition:background .2s,border-color .2s,transform .2s;
    }
    .yt-channel-card:hover {
      background:rgba(255,255,255,.05);
      border-color:rgba(124,92,255,.35);
      transform:translateY(-1px);
    }
    .yt-channel-card.selected {
      border-color:rgba(124,92,255,.7);
      background:rgba(124,92,255,.1);
    }
    .yt-channel-head {
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:flex-start;
      margin-bottom:10px;
    }
    .yt-channel-name {
      font-weight:800;
      line-height:1.2;
      overflow-wrap:anywhere;
    }
    .yt-channel-id {
      color:var(--txt2);
      font-size:.76rem;
      margin-top:4px;
      overflow-wrap:anywhere;
    }
    .yt-status-pill,
    .yt-chip {
      display:inline-flex;
      align-items:center;
      gap:5px;
      border-radius:999px;
      padding:4px 9px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.035);
      color:var(--txt2);
      font-size:.75rem;
      font-weight:700;
      white-space:nowrap;
    }
    .yt-status-ready { color:var(--ok); border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.08); }
    .yt-status-warning { color:var(--warn); border-color:rgba(251,191,36,.35); background:rgba(251,191,36,.08); }
    .yt-status-error { color:var(--err); border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.08); }
    .yt-chip-row {
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .yt-channel-meta {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      margin-top:10px;
    }
    .yt-mini-metric {
      padding:8px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(0,0,0,.12);
      min-width:0;
    }
    .yt-mini-metric span {
      display:block;
      color:var(--txt2);
      font-size:.7rem;
      margin-bottom:3px;
    }
    .yt-mini-metric strong {
      display:block;
      color:var(--txt);
      font-size:.82rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .yt-detail-header {
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      margin-bottom:16px;
    }
    .yt-detail-title {
      font-size:1.25rem;
      font-weight:800;
      line-height:1.2;
      overflow-wrap:anywhere;
    }
    .yt-detail-subtitle {
      color:var(--txt2);
      font-size:.84rem;
      margin-top:5px;
      overflow-wrap:anywhere;
    }
    .yt-segmented {
      display:flex;
      gap:4px;
      padding:5px;
      border-radius:10px;
      background:rgba(255,255,255,.035);
      border:1px solid var(--border);
      overflow-x:auto;
      margin-bottom:16px;
    }
    .yt-segmented button {
      flex:0 0 auto;
      padding:9px 13px;
      border:0;
      border-radius:8px;
      background:transparent;
      color:var(--txt2);
      cursor:pointer;
      font-family:inherit;
      font-weight:700;
      font-size:.82rem;
    }
    .yt-segmented button.active {
      background:var(--accent);
      color:white;
    }
    .yt-section {
      display:none;
    }
    .yt-section.active {
      display:block;
    }
    .yt-action-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:10px;
    }
    .yt-form-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:10px;
      margin-bottom:12px;
    }
    .yt-content-toggle {
      border:1px solid var(--border);
      border-radius:999px;
      padding:7px 11px;
      color:var(--txt2);
      background:rgba(255,255,255,.025);
      font-family:inherit;
      font-size:.8rem;
      font-weight:700;
      cursor:pointer;
    }
    .yt-content-toggle.selected {
      color:var(--txt);
      border-color:rgba(124,92,255,.55);
      background:rgba(124,92,255,.14);
    }
    .yt-slot-groups {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
      gap:10px;
      margin-bottom:14px;
    }
    .yt-slot-day {
      min-height:92px;
      padding:10px;
      border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.025);
    }
    .yt-slot-day-title {
      color:var(--txt2);
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.5px;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .yt-slot-chip {
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin:3px 3px 3px 0;
      padding:5px 8px;
      border-radius:999px;
      background:rgba(124,92,255,.11);
      border:1px solid rgba(124,92,255,.22);
      color:var(--txt);
      font-size:.78rem;
      font-weight:700;
    }
    .yt-slot-chip button {
      background:none;
      border:0;
      color:var(--err);
      cursor:pointer;
      font:inherit;
      line-height:1;
    }
    .yt-result-list {
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:10px;
    }
    .yt-result-row {
      padding:10px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.03);
    }
    .yt-bulk-panel {
      padding:14px;
      border-radius:10px;
      border:1px solid rgba(59,130,246,.2);
      background:rgba(59,130,246,.06);
    }

    @media (max-width:820px) {
      .yt-control-layout {
        grid-template-columns:1fr;
      }
      .yt-detail-header {
        flex-direction:column;
      }
      .yt-tracker-head,
      .yt-tracker-row {
        grid-template-columns:1fr;
        display:grid;
      }
    }

    /* Buttons — all producer buttons share .gen-btn */
    .btn-grid {
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
      gap:10px;
      margin-bottom:14px;
    }
    .gen-btn {
      position: relative;
      padding:15px 18px; font-size:.97rem; font-weight:700;
      font-family:inherit; color:white;
      background:linear-gradient(135deg,#1a1a2e,#16213e);
      border:1px solid var(--border); border-radius:12px;
      cursor:pointer; transition:all .3s;
      box-shadow:0 4px 20px rgba(0,0,0,.4);
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .gen-btn:hover:not(:disabled) {
      transform:translateY(-2px);
      box-shadow:0 8px 32px rgba(0,0,0,.6);
      border-color:var(--accent);
    }
    .gen-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
    .gen-btn.loading .spinner { display:inline-block; }

    /* Main generate button — more prominent */
    #btnGenerate {
      background:linear-gradient(135deg,#7c5cff,#6d28d9);
      border:none;
      box-shadow:0 4px 24px var(--glow);
      grid-column: 1 / -1;
    }
    #btnGenerate:hover:not(:disabled) { box-shadow:0 8px 32px var(--glow); }

    .spinner {
      display:none; width:15px; height:15px; flex-shrink:0;
      border:2px solid rgba(255,255,255,.3); border-top-color:white;
      border-radius:50%; animation:spin .8s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }

    .gen-btn .repeat-badge {
      position: absolute;
      top: -4px; right: -4px;
      background: var(--err);
      color: white;
      font-size: 0.65rem;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 8px;
      line-height: 1.3;
      pointer-events: none;
    }

    .btn-cancel {
      padding:14px 18px; font-size:.97rem; font-weight:700;
      font-family:inherit; color:var(--err);
      background:rgba(248,113,113,.08);
      border:1px solid rgba(248,113,113,.25); border-radius:12px;
      cursor:pointer; transition:all .2s; display:none;
      width: 100%;
    }
    .btn-cancel:hover { background:rgba(248,113,113,.15); }
    .cancel-bar {
      width: 100%;
      margin-top: 12px;
    }

    .skip-wrap {
      display:flex; align-items:center; gap:8px;
      color:var(--txt2); font-size:.88rem; margin-top:10px;
    }
    .skip-wrap input { accent-color:var(--accent); width:16px; height:16px; }

    /* Batch */
    .batch-section {
      margin-top:22px; padding-top:20px;
      border-top:1px solid var(--border);
    }
    .batch-label {
      font-size:.82rem; color:var(--txt2); margin-bottom:10px;
      font-weight:600; letter-spacing:.5px; text-transform:uppercase;
    }
    .batch-types {
      display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
      position: relative;
      z-index: 10;
    }
    .batch-type-btn {
      padding:7px 14px; font-size:.83rem; font-weight:600;
      font-family:inherit; border:1px solid var(--border);
      border-radius:8px; background:transparent; color:var(--txt2);
      cursor:pointer; transition:all .2s; user-select:none;
      z-index: 10;
      position: relative;
    }
    .batch-type-btn.selected {
      background:rgba(124,92,255,.15);
      border-color:var(--accent); color:var(--txt);
    }
    .btn-batch {
      padding:13px 24px; font-size:.93rem; font-weight:700;
      font-family:inherit; color:white;
      background:linear-gradient(135deg,#1a1040,#0d1a30);
      border:1px solid var(--accent); border-radius:12px;
      cursor:pointer; transition:all .3s;
    }
    .btn-batch:hover:not(:disabled) {
      background:linear-gradient(135deg,#2a1a60,#1a2a50);
      box-shadow:0 4px 20px var(--glow);
    }
    .btn-batch:disabled { opacity:.5; cursor:not-allowed; }
    .batch-count { font-size:.8rem; color:var(--txt2); margin-left:10px; }

    /* Progress */
    .progress-section { display:none; }
    .progress-section.active { display:block; }
    .progress-type-label {
      display:inline-block; font-size:.8rem; font-weight:600;
      background:rgba(124,92,255,.15); color:var(--accent);
      border-radius:20px; padding:3px 12px; margin-bottom:14px;
    }
    .step-indicator { 
      display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
    }
    .step-item { 
      display: flex; align-items: center; gap: 4px;
      padding: 6px 10px; border-radius: 6px;
      background: var(--bg-secondary); color: var(--txt-dim);
      font-size: 0.8rem; transition: all 0.3s ease;
    }
    .step-item.active { 
      background: var(--accent); color: white; 
      box-shadow: 0 0 12px rgba(124, 92, 255, 0.4);
    }
    .step-item.completed { color: #4caf50; background: rgba(76, 175, 80, 0.15); }
    .step-icon { font-size: 0.9rem; }
    .progress-info {
      display:flex; justify-content:space-between; align-items:center;
      margin-bottom:14px;
    }
    .progress-msg  { font-size:.93rem; color:var(--txt); flex:1; }
    .progress-pct  { font-size:1.35rem; font-weight:700; color:var(--accent); }
    .progress-bar-outer {
      width:100%; height:7px;
      background:rgba(255,255,255,.06); border-radius:4px;
      overflow:hidden; margin-bottom:14px;
    }
    .progress-bar-inner {
      height:100%; width:0%;
      background:linear-gradient(90deg,#7c5cff,#ec4899);
      border-radius:4px; transition:width .5s ease;
    }
    .eta-info {
      font-size: 0.85rem; color: var(--txt-dim); margin-bottom: 10px;
    }
    .logs-toggle { 
      cursor: pointer; padding: 10px; margin: 10px 0;
      background: var(--bg-secondary); border-radius: 6px;
      font-size: 0.9rem; color: var(--txt-dim);
      display: flex; align-items: center; gap: 8px;
    }
    .logs-toggle:hover { background: var(--bg-hover); }
    .logs-panel { 
      display: none; max-height: 180px; overflow-y: auto;
      font-family: "Cascadia Code", "Fira Code", monospace;
      font-size: 0.8rem; background: rgba(0,0,0,0.3);
      border: 1px solid var(--border); border-radius: 8px; padding: 10px;
    }
    .logs-panel.open { display: block; }
    .log-entry { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .log-entry:last-child { border-bottom: none; }
    .log-entry.info { color: var(--accent); }
    .log-entry.success { color: #4caf50; }
    .log-entry.error { color: #f44336; }
    .cancel-btn {
      background: linear-gradient(135deg, #f44336, #d32f2f); color: white; border: none;
      padding: 12px 20px; border-radius: 8px; cursor: pointer;
      display: none; width: 100%; margin-top: 14px; font-weight: 600;
      transition: all 0.3s ease;
    }
    .cancel-btn.visible { display: block; }
    .cancel-btn:hover { background: linear-gradient(135deg, #d32f2f, #b71c1c); }
    .log-box {
      background:rgba(0,0,0,.3); border:1px solid var(--border);
      border-radius:10px; padding:14px; max-height:170px;
      overflow-y:auto; font-family:"Cascadia Code","Fira Code",monospace;
      font-size:.8rem; color:var(--txt2); line-height:1.7;
    }
    .log-box .lt { color:#555; }
    .log-ok  { color:var(--ok); }
    .log-err { color:var(--err); }

    /* Result banner */
    .result-banner { display:none; padding:20px; border-radius:12px; margin-bottom:24px; animation:fadeIn .4s ease; }
    .result-banner.success {
      display:flex; gap:16px; align-items:center;
      background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.2);
    }
    .result-banner.error {
      display:block;
      background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2);
      color:var(--err);
    }
    .result-icon { font-size:2rem; }
    .result-text h3 { color:var(--ok); margin-bottom:4px; }
    .result-text p  { color:var(--txt2); font-size:.88rem; }

    @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

    /* Video gallery */
    .filter-bar {
      display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;
    }
    .filter-btn {
      padding:6px 14px; font-size:.82rem; font-weight:600;
      font-family:inherit; border:1px solid var(--border);
      border-radius:20px; background:transparent; color:var(--txt2);
      cursor:pointer; transition:all .2s;
    }
    .filter-btn.active {
      background:rgba(124,92,255,.15); border-color:var(--accent); color:var(--txt);
    }
    .video-list { list-style:none; }
    .video-item {
      display:flex; align-items:center; padding:14px 16px;
      border-radius:12px; margin-bottom:7px;
      background:rgba(255,255,255,.02); border:1px solid transparent;
      transition:all .2s; gap:14px;
    }
    .video-item:hover { background:rgba(255,255,255,.05); border-color:var(--border); }
    .video-icon {
      width:46px; height:46px; flex-shrink:0;
      background:linear-gradient(135deg,var(--accent),#ec4899);
      border-radius:10px; display:flex; align-items:center;
      justify-content:center; font-size:1.2rem;
    }
    .video-info { flex:1; min-width:0; }
    .video-info h4 {
      font-size:.93rem; font-weight:600;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .video-meta { font-size:.78rem; color:var(--txt2); margin-top:3px; }
    .video-actions { display:flex; gap:7px; flex-shrink:0; }
    .btn-sm {
      padding:7px 13px; font-size:.8rem; font-weight:600;
      font-family:inherit; border:1px solid var(--border);
      border-radius:8px; background:transparent; color:var(--txt);
      cursor:pointer; transition:all .2s;
    }
    .btn-sm:hover { background:rgba(255,255,255,.08); }
    .btn-sm.danger:hover {
      background:rgba(248,113,113,.15); color:var(--err);
      border-color:rgba(248,113,113,.3);
    }
    .empty-state { text-align:center; padding:48px; color:var(--txt2); }
    .empty-state .es-emoji { font-size:3rem; margin-bottom:12px; }

    /* Toast notifications (E1) */
    #toastContainer {
      position:fixed; bottom:28px; right:28px; z-index:9999;
      display:flex; flex-direction:column; gap:10px;
      pointer-events:none;
    }
    .toast {
      padding:12px 20px; border-radius:10px; font-size:.88rem;
      font-weight:600; pointer-events:all;
      animation:toastIn .3s ease; max-width:320px;
      box-shadow:0 8px 32px rgba(0,0,0,.5);
    }
    .toast.info    { background:#1e293b; border:1px solid var(--accent); color:var(--txt); }
    .toast.success { background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); color:var(--ok); }
    .toast.error   { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:var(--err); }
    @keyframes toastIn { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} }
    @keyframes toastOut { to{opacity:0;transform:translateX(30px)} }

    /* Video modal (E4) */
    .modal-overlay {
      display:none; position:fixed; inset:0; z-index:8000;
      background:rgba(0,0,0,.88); backdrop-filter:blur(8px);
      align-items:center; justify-content:center;
    }
    .modal-overlay.open { display:flex; }
    .modal-box {
      background:#111118; border:1px solid var(--border);
      border-radius:16px; padding:24px; max-width:520px; width:90%;
      position:relative; animation:fadeIn .25s ease;
    }
    .modal-close {
      position:absolute; top:14px; right:16px;
      background:none; border:none; color:var(--txt2);
      font-size:1.2rem; cursor:pointer; transition:color .2s;
    }
    .modal-close:hover { color:var(--txt); }
    .modal-filename { font-size:.82rem; color:var(--txt2); margin-bottom:12px; }
    #modalVideo { width:100%; border-radius:10px; max-height:70vh; }
    .modal-actions { margin-top:14px; display:flex; gap:10px; justify-content:flex-end; }

    /* Scrollbar */
    ::-webkit-scrollbar { width:5px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }

    /* ─── Utility Classes ──────────────────────────────────────────── */
    .mt-4 { margin-top: 4px; }
    .mt-6 { margin-top: 6px; }
    .mt-8 { margin-top: 8px; }
    .mt-10 { margin-top: 10px; }
    .mt-12 { margin-top: 12px; }
    .mt-14 { margin-top: 14px; }
    .mt-16 { margin-top: 16px; }
    .mt-20 { margin-top: 20px; }

    .mb-4 { margin-bottom: 4px; }
    .mb-6 { margin-bottom: 6px; }
    .mb-8 { margin-bottom: 8px; }
    .mb-10 { margin-bottom: 10px; }
    .mb-12 { margin-bottom: 12px; }
    .mb-14 { margin-bottom: 14px; }
    .mb-16 { margin-bottom: 16px; }
    .mb-20 { margin-bottom: 20px; }

    .ml-auto { margin-left: auto; }
    .mr-auto { margin-right: auto; }

    .w-full { width: 100%; }
    .h-full { height: 100%; }

    .d-none { display: none; }
    .d-block { display: block; }
    .d-flex { display: flex; }
    .d-grid { display: grid; }

    .flex-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .flex-col { flex-direction: column; }
    .flex-center { align-items: center; justify-content: center; }
    .flex-between { justify-content: space-between; }
    .flex-1 { flex: 1; }

    .text-center { text-align: center; }
    .text-right { text-align: right; }

    .p-12 { padding: 12px; }
    .p-14 { padding: 14px; }
    .p-16 { padding: 16px; }

    .rounded { border-radius: 8px; }
    .rounded-lg { border-radius: 12px; }

    .bg-subtle { background: rgba(255,255,255,.03); }
    .bg-accent { background: rgba(124,92,255,.15); }

    .border-subtle { border: 1px solid var(--border); }

    .fw-800 { font-weight: 800; }
    .fw-700 { font-weight: 700; }
    .fw-600 { font-weight: 600; }

    .label-caps {
      font-size: .82rem;
      font-weight: 800;
      color: var(--txt2);
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .btn-accent {
      background: rgba(124,92,255,.15);
      border-color: var(--accent);
      color: var(--accent);
    }

    .accent-check { accent-color: var(--accent); }

    .btn-gradient-red {
      width: 100%;
      justify-content: center;
      background: linear-gradient(135deg,#e11d48,#f97316);
    }

    .btn-gradient-pink {
      width: 100%;
      justify-content: center;
      background: linear-gradient(135deg,#db2777,#7c3aed);
    }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(10, 13, 24, .9);
      backdrop-filter: blur(16px);
    }

    .auth-gate.active { display: flex; }

    .auth-card {
      width: min(420px, 100%);
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--card);
      box-shadow: 0 24px 60px rgba(0,0,0,.35);
    }

    .auth-brand {
      color: var(--accent);
      font-size: .85rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 10px;
    }

    .auth-card h2 {
      margin: 0 0 8px;
      font-size: 1.55rem;
    }

    .auth-copy {
      margin: 0 0 18px;
      color: var(--txt2);
      font-size: .92rem;
      line-height: 1.45;
    }

    .auth-card label {
      display: grid;
      gap: 7px;
      margin-bottom: 13px;
      color: var(--txt2);
      font-weight: 700;
      font-size: .85rem;
    }

    .auth-card input {
      width: 100%;
      padding: 12px 13px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      color: var(--txt);
      font: inherit;
    }

    .auth-error {
      margin-bottom: 14px;
      padding: 10px 12px;
      border: 1px solid rgba(248,113,113,.45);
      border-radius: 8px;
      color: var(--err);
      background: rgba(248,113,113,.08);
      font-size: .88rem;
    }

    .auth-switch {
      width: 100%;
      margin-top: 12px;
      border: 0;
      background: transparent;
      color: var(--accent);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    .user-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 8px 7px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      color: var(--txt2);
      font-size: .82rem;
      max-width: min(420px, 100%);
    }

    .user-pill span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-pill button {
      border: 0;
      border-radius: 999px;
      padding: 5px 9px;
      background: rgba(255,255,255,.08);
      color: var(--txt);
      cursor: pointer;
      font: inherit;
      font-weight: 700;
    }

    .onboarding-panel {
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin: 22px auto 18px;
      padding: 20px;
      border: 1px solid rgba(124,92,255,.45);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(57,217,155,.08));
      box-shadow: 0 16px 42px rgba(0,0,0,.2);
    }

    .onboarding-panel h2 {
      margin: 0 0 6px;
      font-size: 1.35rem;
    }

    .onboarding-panel p {
      margin: 0;
      color: var(--txt2);
      line-height: 1.5;
    }

    .onboarding-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
    }

    @media (max-width:640px) {
      .container { padding:20px 16px; }
      .header h1 { font-size:1.6rem; }
      .app-header { align-items:flex-start; }
      .app-header-actions { width:100%; justify-content:space-between; }
      .user-pill { max-width:calc(100% - 58px); }
      .btn-grid { grid-template-columns:1fr; }
      .video-item { flex-direction:column; text-align:center; }
      .video-actions { justify-content:center; }
    }

    @media (max-width:768px) {
      .tabs { flex-wrap: wrap; gap: 4px; justify-content: center; }
      .tab-btn { padding: 8px 16px; font-size: 0.8rem; flex: 1 1 auto; min-width: 80px; }
      .sub-tabs { flex-wrap: wrap; }
      .sub-tab { flex: 1 1 auto; min-width: 100px; text-align: center; }
      .filter-bar { flex-wrap: wrap; gap: 4px; }
      .filter-btn { flex: 1 1 auto; min-width: 70px; padding: 4px 8px; font-size: 0.75rem; }
      .gen-btn { padding: 10px; font-size: 0.85rem; }
      .app-hero { grid-template-columns:1fr; padding:18px; }
      .app-command-card { align-content:start; }
    }

    @media (max-width:480px) {
      .container { padding: 12px 10px; }
      .header h1 { font-size: 1.3rem; }
      .tab-btn { padding: 6px 10px; font-size: 0.7rem; min-width: 60px; }
      .gen-btn { padding: 8px; font-size: 0.8rem; }
      .btn-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
      .control-strip { flex-direction: column; }
      .metric-tile { padding: 8px; }
      .metric-value { font-size: 1.2rem; }
      .live-generation-head,
      .live-generation-columns { grid-template-columns:1fr; display:grid; }
      .live-generation-time { white-space:normal; }
      .live-log-row { grid-template-columns:1fr; }
      .step-indicator { gap: 4px; }
      .step-item { font-size: 0.7rem; padding: 4px 6px; }
    }