:root {
      --bg: #f4f7f6;
      --card: #ffffff;
      --ink: #0f172a;
      --muted: #64748b;
      --line: #dbe4ea;
      --teal: #0f766e;
      --teal-soft: #ccfbf1;
      --amber: #b45309;
      --rose: #be123c;
      --ok: #15803d;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      max-width: 100%;
      overflow-x: hidden;
    }
    body {
      font-family: "Segoe UI", "Trebuchet MS", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 40%),
        linear-gradient(180deg, #eef5f3 0%, var(--bg) 40%, #edf1f4 100%);
      min-height: 100vh;
    }
    .shell {
      max-width: 900px;
      margin: 0 auto;
      padding: 18px 14px 40px;
      width: 100%;
      overflow-x: hidden;
    }
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
      max-width: 100%;
      overflow-x: hidden;
    }
    header {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .brand {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--teal);
      color: #fff;
      font-weight: 800;
    }
    .brand h1 {
      margin: 0;
      font-size: 1.2rem;
    }
    .brand p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 12px;
    }
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .pill, button, a.btn {
      border: 1px solid #99f6e4;
      background: #fff;
      color: var(--teal);
      border-radius: 999px;
      min-height: 34px;
      padding: 6px 12px;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    button.primary, a.btn.primary {
      background: var(--teal);
      border-color: var(--teal);
      color: #fff;
    }
    button:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .pill {
      background: var(--teal-soft);
      cursor: default;
    }
    .pill.warn { background: #ffedd5; color: var(--amber); border-color: #fdba74; }
    .pill.bad { background: #ffe4e6; color: var(--rose); border-color: #fda4af; }
    .card h2 {
      margin: 0 0 8px;
      font-size: 1.05rem;
    }
    .muted { color: var(--muted); font-size: 12px; }
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
      align-items: center;
    }
    .toolbar input[type="search"] {
      flex: 1 1 180px;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 13px;
    }
    .filters {
      display: inline-flex;
      border: 1px solid var(--line);
      border-radius: 999px;
      overflow: hidden;
    }
    .filters button {
      border: 0;
      border-radius: 0;
      background: #f8fafc;
      color: #475569;
    }
    .filters button.is-active {
      background: var(--teal);
      color: #fff;
    }
    .lesson-list {
      display: grid;
      gap: 8px;
    }
    .lesson-item {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: #fff;
      text-align: left;
      width: 100%;
      color: inherit;
      cursor: pointer;
      display: block;
    }
    .lesson-item:hover { border-color: #5eead4; background: #f0fdfa; }
    .lesson-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }
    .lesson-title {
      margin: 0;
      font-size: 15px;
      font-weight: 750;
    }
    .lesson-meta {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
    }
    .chev {
      color: var(--muted);
      font-size: 18px;
      line-height: 1;
      margin-top: 2px;
    }
    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 8px;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      border-radius: 999px;
      padding: 2px 8px;
      border: 1px solid var(--line);
      background: #f8fafc;
      color: #475569;
    }
    .badge.on { background: #dcfce7; border-color: #86efac; color: var(--ok); }
    .badge.off { background: #ffe4e6; border-color: #fda4af; color: var(--rose); }
    #previewBlock {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      margin-top: 8px;
      border-radius: 12px;
      background: #0f172a;
    }
    #previewVideo {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: min(50vh, 360px);
      object-fit: contain;
      background: #0f172a;
    }
    .form-grid {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    input[type="text"], input[type="file"] {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 13px;
      background: #fff;
    }
    .row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .progress-wrap {
      display: none;
      margin-top: 8px;
    }
    .progress-wrap.is-visible { display: block; }
    .progress-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      margin-bottom: 4px;
    }
    .progress-track {
      height: 10px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #14b8a6, #0f766e);
      transition: width 0.12s linear;
    }
    .status {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 12px;
      min-height: 1.2em;
    }
    .login-box {
      max-width: 420px;
      margin: 12vh auto 0;
    }
    .empty {
      padding: 24px 8px;
      color: var(--muted);
      text-align: center;
    }
    .seg-preview {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      background: #f8fafc;
      max-height: 240px;
      overflow: auto;
      font-size: 12px;
    }
    .seg-preview p { margin: 0 0 6px; }
    .section-gap { margin-top: 14px; }
    .back-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 10px;
    }
    hr.sep {
      border: 0;
      border-top: 1px solid var(--line);
      margin: 14px 0;
    }
    .section-tabs {
      display: inline-flex;
      border: 1px solid var(--line);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 12px;
      background: #fff;
    }
    .section-tabs button {
      border: 0;
      border-radius: 0;
      background: #f8fafc;
      color: #475569;
    }
    .section-tabs button.is-active {
      background: var(--teal);
      color: #fff;
    }
    textarea {
      width: 100%;
      min-height: 160px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      background: #fff;
      resize: vertical;
    }
    textarea.sub-paste {
      min-height: 110px;
      margin-top: 4px;
    }
    .prompt-box {
      margin-top: 16px;
      border: 1px dashed #99f6e4;
      border-radius: 12px;
      padding: 12px;
      background: #f0fdfa;
    }
    .prompt-box h3 {
      margin: 0 0 6px;
      font-size: 14px;
    }
    .prompt-box textarea {
      min-height: 280px;
      background: #fff;
      font-size: 12px;
      line-height: 1.45;
    }
    .card-preview p {
      margin: 0 0 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }
    .card-preview p:last-child {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }