:root {
      --bg: #f6f7f9;
      --panel: #ffffff;
      --text: #1d2430;
      --muted: #657084;
      --line: #dfe4ec;
      --accent: #0f766e;
      --accent-strong: #0b5f59;
      --danger: #b42318;
      --warn: #a15c07;
      --ok: #14743f;
      --ink: #111827;
      --shadow: 0 10px 30px rgba(20, 31, 43, 0.08);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    body { margin: 0; color: var(--text); background: var(--bg); }
    button, input, textarea, select { font: inherit; }

    .app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
    header {
      background: #ffffff;
      border-bottom: 1px solid var(--line);
      padding: 18px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    h1 { margin: 0; font-size: 20px; line-height: 1.2; }
    .header-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .retention-notice {
      flex: 1 1 360px;
      max-width: 620px;
      min-width: 260px;
      justify-self: center;
      border: 1px solid #fecdd3;
      border-radius: 8px;
      background: #fff1f2;
      color: #b42318;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
      text-align: center;
      box-shadow: 0 8px 22px rgba(180, 35, 24, .07);
    }
    .nav-tabs { display: flex; gap: 8px; }
    .nav-tabs button {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #f8fafc;
      color: #475569;
      padding: 7px 12px;
      cursor: pointer;
      font-weight: 750;
    }
    .nav-tabs button.active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
    .status-pill {
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 13px;
      background: #fbfcfd;
      white-space: nowrap;
    }
    .header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; position: relative; }
    .group-switcher { display: none; align-items: center; gap: 8px; }
    .group-switcher.active { display: flex; }
    .group-switcher select { min-height: 34px; padding: 6px 9px; min-width: 160px; }
    .group-tools { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: min(640px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff; box-shadow: 0 18px 45px rgba(15,23,42,.16); z-index: 20; gap: 10px; }
    .group-tools.open { display: grid; }
    .group-tools-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
    .group-id-line { color: var(--muted); font-size: 12px; word-break: break-all; }
    .group-members-panel { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }
    .group-danger-panel { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; display: none; gap: 8px; }
    .group-danger-panel.active { display: grid; }
    .group-danger-text { color: var(--muted); font-size: 12px; line-height: 1.5; }
    .group-members-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
    .group-members-title { font-size: 13px; font-weight: 800; color: var(--text); }
    .group-member-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
    .group-member-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
    .group-member-name { font-size: 13px; font-weight: 800; color: var(--text); }
    .group-member-role { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .group-member-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .auth-shell { padding: 24px 28px 32px; display: grid; place-items: start center; }
    .auth-panel { width: min(760px, 100%); }
    .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .auth-message { min-height: 18px; color: var(--muted); font-size: 13px; }

    main {
      padding: 24px 28px 32px;
      display: grid;
      grid-template-columns: minmax(360px, 520px) minmax(420px, 1fr);
      gap: 20px;
      align-items: start;
    }
    #assetsView { grid-template-columns: 1fr; }
    .view.hidden, .hidden.view { display: none; }
    #generateView.hidden,
    #imageGenerateView.hidden,
    #assetsView.hidden,
    #tutorialsView.hidden,
    #authView.hidden,
    #noGroupView.hidden { display: none !important; }

    .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
    .panel h2 { margin: 0; padding: 18px 18px 0; font-size: 16px; }
    form, .panel-body { padding: 18px; }

    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
    .field { display: grid; gap: 7px; margin-bottom: 14px; }
    .field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    label { color: #2e3645; font-size: 13px; font-weight: 650; }
    input, textarea, select {
      width: 100%;
      border: 1px solid #cfd7e3;
      border-radius: 7px;
      background: #ffffff;
      color: var(--text);
      padding: 10px 11px;
      outline: none;
      min-height: 42px;
    }
    textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
    input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14); }
    .prompt-textarea { display: none; }
    .prompt-editor {
      width: 100%;
      min-height: 220px;
      max-height: 520px;
      overflow: auto;
      border: 1px solid #cfd7e3;
      border-radius: 7px;
      background: #ffffff;
      color: var(--text);
      padding: 10px 11px;
      outline: none;
      font-size: 13px;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .prompt-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14); }
    .prompt-editor:empty::before { content: attr(data-placeholder); color: #8a94a6; }
    .mention-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      max-width: 180px;
      margin: 0 3px;
      padding: 2px 7px 2px 3px;
      border-radius: 5px;
      background: #e8f1ff;
      color: #1d4ed8;
      font-weight: 700;
      vertical-align: baseline;
      white-space: nowrap;
    }
    .mention-chip img { width: 20px; height: 20px; object-fit: cover; border-radius: 4px; border: 1px solid #bfdbfe; }
    .mention-chip span { overflow: hidden; text-overflow: ellipsis; }

    .mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; background: #eef2f6; border-radius: 8px; margin-bottom: 16px; }
    .mode-tabs button { border: 0; border-radius: 6px; padding: 10px 12px; color: #394252; background: transparent; cursor: pointer; font-weight: 700; }
    .mode-tabs button.active { background: #ffffff; color: var(--accent-strong); box-shadow: 0 1px 6px rgba(20, 31, 43, 0.12); }

    .hint { color: var(--muted); font-size: 12px; line-height: 1.45; margin: -5px 0 12px; }
    .field-label-note { color: var(--muted); font-size: 11px; font-weight: 600; }
    .asset-upload-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .asset-limit { color: #64748b; font-size: 12px; font-weight: 600; }
    .upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-bottom: 12px; }
    .upload-card {
      min-height: 78px;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      display: grid;
      place-items: center;
      color: #475569;
      cursor: pointer;
      text-align: center;
      font-size: 12px;
      position: relative;
      overflow: hidden;
    }
    .upload-card:hover { border-color: var(--accent); background: #f0fdfa; }
    .upload-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .upload-icon { font-size: 24px; line-height: 1; margin-bottom: 4px; }
    .asset-library-upload-grid {
      grid-template-columns: 1fr;
      margin: 4px 0 14px;
    }
    .asset-library-upload-card {
      min-height: 112px;
      padding: 18px 22px;
      border: 1px solid rgba(20, 184, 166, .38);
      border-radius: 18px;
      background:
        radial-gradient(circle at 18% 12%, rgba(45, 212, 191, .22), transparent 34%),
        linear-gradient(135deg, #ecfeff 0%, #f0fdfa 46%, #ffffff 100%);
      box-shadow: 0 16px 38px rgba(13, 148, 136, .12);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      color: #0f766e;
      text-align: left;
    }
    .asset-library-upload-card:hover {
      border-color: #0d9488;
      background:
        radial-gradient(circle at 18% 12%, rgba(45, 212, 191, .3), transparent 36%),
        linear-gradient(135deg, #ccfbf1 0%, #ecfeff 52%, #ffffff 100%);
      box-shadow: 0 20px 44px rgba(13, 148, 136, .18);
      transform: translateY(-1px);
    }
    .asset-library-upload-card:focus-within {
      outline: 3px solid rgba(20, 184, 166, .24);
      outline-offset: 3px;
    }
    .asset-library-upload-main {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }
    .asset-library-upload-icon {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(135deg, #0d9488, #14b8a6);
      color: #ffffff;
      display: grid;
      place-items: center;
      font-size: 26px;
      font-weight: 900;
      box-shadow: 0 12px 26px rgba(13, 148, 136, .28);
      flex: 0 0 auto;
    }
    .asset-library-upload-title {
      display: block;
      color: #0f172a;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.25;
    }
    .asset-library-upload-subtitle {
      display: block;
      margin-top: 4px;
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
    }
    .asset-library-upload-cta {
      flex: 0 0 auto;
      padding: 9px 14px;
      border-radius: 999px;
      background: #0f766e;
      color: #ffffff;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 10px 24px rgba(15, 118, 110, .22);
    }
    .reference-list { display: grid; gap: 8px; margin: -4px 0 12px; }
    .reference-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfd;
      padding: 8px;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }
    .reference-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1px solid #dbe3ef; cursor: zoom-in; }
    .reference-name { font-size: 12px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .reference-tag { font-size: 12px; color: var(--muted); margin-top: 2px; }
    .tag-btn { min-height: 30px; padding: 5px 9px; border-radius: 999px; }
    .asset-library-toolbar { display: grid; gap: 10px; margin-bottom: 14px; }
    .asset-category-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
    .asset-category-tabs button { min-height: 36px; border-radius: 999px; }
    .asset-category-tabs button.active { background: var(--accent); border-color: var(--accent); color: #ffffff; box-shadow: 0 8px 18px rgba(20, 184, 166, .18); }
    .asset-library-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .asset-library-toolbar input { min-height: 38px; }
    .asset-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
    .asset-card { border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 10px; display: grid; gap: 8px; }
    .asset-thumb { width: 100%; height: 132px; border-radius: 7px; border: 1px solid #dbe3ef; background: #eef2f6; display: grid; place-items: center; overflow: hidden; color: #475569; font-weight: 800; }
    .asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .asset-meta { display: grid; gap: 4px; font-size: 12px; color: #64748b; }
    .asset-card-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .mention-menu {
      position: fixed;
      z-index: 5000;
      width: min(520px, calc(100vw - 32px));
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
      display: none;
      gap: 8px;
      padding: 10px;
      max-height: min(420px, calc(100vh - 96px));
      overflow: auto;
    }
    .mention-menu.open { display: grid; }
    body.prompt-modal-open .mention-menu { z-index: 6000; }
    body.prompt-view-mode #applyPromptModalBtn { display: none; }
    body.prompt-view-mode #promptModal {
      padding: 18px;
    }
    body.prompt-view-mode #promptModal .modal {
      width: min(1280px, calc(100vw - 36px));
      height: min(86vh, 880px);
      max-height: min(86vh, 880px);
      overflow: hidden;
      border-radius: 18px;
    }
    body.prompt-view-mode #promptModal .modal-head {
      min-width: 0;
      padding: 14px 18px;
    }
    body.prompt-view-mode #promptModalTitle {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
    }
    body.prompt-view-mode #promptModal .modal-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 16px;
      align-items: stretch;
      min-height: 0;
      overflow: hidden;
      padding: 16px;
      background: #eef3f8;
    }
    body.prompt-view-mode #promptEditorLarge {
      min-height: 0;
      height: 100%;
      max-height: none;
      overflow-y: auto;
      background: #ffffff;
      border: 1px solid #dbe5ef;
      border-radius: 14px;
      padding: 18px 20px;
      color: #102033;
      line-height: 1.82;
      white-space: pre-wrap;
      word-break: break-word;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
    }
    body.prompt-view-mode #promptModal .modal-actions {
      padding: 12px 18px;
    }
    .prompt-view-assets {
      display: none;
      min-height: 0;
      height: 100%;
      border: 1px solid #dbe5ef;
      border-radius: 14px;
      background: #ffffff;
      padding: 12px;
      overflow-y: auto;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
    }
    body.prompt-view-mode .prompt-view-assets { display: block; }
    .prompt-view-assets-title { color: #24364d; font-size: 13px; font-weight: 900; margin-bottom: 10px; }
    .prompt-view-asset-list { display: grid; gap: 10px; }
    .prompt-view-asset-card {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 9px;
      border: 1px solid #dfe8f2;
      border-radius: 12px;
      background: #f8fafc;
    }
    .prompt-view-asset-thumb {
      width: 58px;
      height: 58px;
      border-radius: 10px;
      border: 1px solid #dbe3ef;
      background: #eef2f6;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #475569;
      font-size: 11px;
      font-weight: 900;
    }
    .prompt-view-asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .prompt-view-asset-name { color: #17253a; font-size: 12px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .prompt-view-asset-meta { color: #64748b; font-size: 11px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .prompt-view-assets-empty { color: #64748b; font-size: 12px; padding: 8px 2px; }
    @media (max-width: 900px) {
      body.prompt-view-mode #promptModal { padding: 10px; }
      body.prompt-view-mode #promptModal .modal { width: min(100vw - 20px, 760px); height: calc(100vh - 20px); max-height: calc(100vh - 20px); }
      body.prompt-view-mode #promptModal .modal-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 12px; }
      body.prompt-view-mode #promptEditorLarge { min-height: 0; }
      body.prompt-view-mode .prompt-view-assets { height: auto; max-height: 180px; }
    }
    .mention-search-wrap {
      position: sticky;
      top: -10px;
      z-index: 2;
      background: #ffffff;
      padding: 2px 0 8px;
      border-bottom: 1px solid #eef2f7;
    }
    .mention-search-input {
      width: 100%;
      min-height: 38px;
      border-radius: 9px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      padding: 8px 10px;
      font-size: 13px;
    }
    .mention-search-input:focus { outline: 2px solid rgba(20, 184, 166, .18); border-color: var(--accent); background: #ffffff; }
    .mention-category-tabs {
      position: sticky;
      top: 39px;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      background: #ffffff;
      padding: 8px 0;
      border-bottom: 1px solid #eef2f7;
    }
    .mention-category-tab {
      min-height: 28px;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid #dbe3ef;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .mention-category-tab.active { background: #0d9488; border-color: #0d9488; color: #ffffff; }
    .mention-limit-hint { color: #94a3b8; font-size: 11px; font-weight: 700; }
    .mention-empty { color: #64748b; font-size: 13px; padding: 12px 6px; text-align: center; }
    .mention-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 4px 4px 2px;
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .mention-option {
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #f8fafc;
      cursor: pointer;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 9px;
      text-align: left;
    }
    .mention-option:hover, .mention-option.active { background: #ecfdf5; border-color: #99f6e4; }
    .mention-option img, .mention-preview-fallback { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; border: 1px solid #dbe3ef; }
    .mention-preview-fallback { display: grid; place-items: center; background: #eef2ff; color: #475569; font-size: 12px; font-weight: 900; }
    .mention-option-main { min-width: 0; display: grid; gap: 5px; }
    .mention-option-name { color: #1e293b; font-size: 13px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mention-option-meta { color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mention-badges { display: flex; flex-wrap: wrap; gap: 5px; }
    .mention-badge { border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 800; background: #e2e8f0; color: #475569; }
    .mention-badge.library { background: #e0f2fe; color: #0369a1; }
    .mention-badge.current { background: #dcfce7; color: #15803d; }
    .mention-badge.image { background: #fae8ff; color: #a21caf; }
    .mention-badge.audio { background: #fef3c7; color: #a16207; }
    .mention-badge.video { background: #fee2e2; color: #b91c1c; }
    .mention-option-tag { color: var(--accent-strong); font-size: 13px; font-weight: 900; white-space: nowrap; }
    .actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
    .settings-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
    .settings-section:first-of-type { padding-top: 0; }
    .settings-section:last-child { padding-bottom: 0; border-bottom: 0; }
    .settings-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .settings-section-title { margin: 0; color: #17253a; font-size: 14px; font-weight: 850; }
    .settings-section-tag { color: var(--muted); font-size: 11px; white-space: nowrap; }
    .settings-models { min-height: 20px; margin: 4px 0 0; color: #475569; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
    .primary, .secondary, .danger {
      border-radius: 7px;
      min-height: 38px;
      padding: 9px 12px;
      cursor: pointer;
      font-weight: 750;
      border: 1px solid transparent;
    }
    .primary { color: #ffffff; background: var(--accent); flex: 1; }
    .primary:hover { background: var(--accent-strong); }
    .primary:disabled { opacity: 0.55; cursor: not-allowed; }
    .secondary { color: #2f3a4c; background: #edf1f6; border-color: #d8e0eb; }
    .danger { color: var(--danger); background: #fff4f2; border-color: #ffd5ce; }
    .icon-btn { min-height: 32px; padding: 6px 9px; font-size: 12px; }
    .asset-card-actions .icon-btn {
      width: 100%;
      min-width: 0;
      padding-inline: 6px;
      display: grid;
      place-items: center;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
    }
    .expand-icon-btn {
      width: 32px;
      height: 32px;
      min-height: 32px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #1f2937;
      border-color: #111827;
      color: #e5e7eb;
      line-height: 1;
    }
    .expand-icon-btn.visible { display: grid; }
    .expand-icon-btn:hover { background: #111827; }
    .expand-icon-btn svg { width: 17px; height: 17px; stroke: currentColor; }

    .task-toolbar { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(120px, auto) auto auto; gap: 10px; margin-bottom: 14px; }
    .task-toolbar input, .task-toolbar select { min-height: 38px; }
    .task-list { display: grid; gap: 10px; margin-bottom: 18px; }
    .task-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfd;
      padding: 12px;
      display: grid;
      gap: 10px;
    }
    .task-card.active { border-color: rgba(15, 118, 110, 0.55); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1); }
    .task-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
    .task-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
    .task-meta { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
    .task-prompt { color: #334155; font-size: 13px; line-height: 1.4; max-height: 38px; overflow: hidden; }
    .task-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .badge { border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 750; background: #eef2f6; color: #445064; white-space: nowrap; }
    .badge.ok { background: #dcfce7; color: var(--ok); }
    .badge.warn { background: #fff7ed; color: var(--warn); }
    .badge.fail { background: #fee2e2; color: var(--danger); }

    .progress-line { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: #e8edf3; }
    .progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.25s ease; }

    .detail { border-top: 1px solid var(--line); padding-top: 16px; }
    .preview-panel { padding-top: 12px; padding-bottom: 12px; }
    .preview-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; font-weight: 800; color: #26364a; }
    .result-box {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfd;
      min-height: 132px;
      aspect-ratio: 16 / 9;
      max-height: 190px;
      display: grid;
      place-items: center;
      overflow: hidden;
      margin-top: 8px;
    }
    #resultVideo { width: 100%; height: 100%; max-height: 190px; object-fit: contain; display: none; background: #000; }
    .empty { color: var(--muted); text-align: center; padding: 16px; line-height: 1.45; font-size: 12px; }
    .url-row { display: none; margin-top: 8px; gap: 8px; align-items: center; }
    .url-row input { flex: 1; }

    .log {
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--ink);
      color: #d7dde8;
      padding: 12px;
      min-height: 170px;
      max-height: 300px;
      overflow: auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px;
      line-height: 1.55;
      white-space: pre-wrap;
    }
    .log .error { color: #ffb4a9; }
    .log .ok { color: #a7f3d0; }
    .log .warn { color: #fed7aa; }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: none;
      background: rgba(15, 23, 42, 0.5);
      padding: 28px;
    }
    .modal-backdrop.open { display: grid; place-items: center; }
    .blocking-upload-backdrop {
      z-index: 120;
      background: rgba(248, 251, 253, 0.82);
      backdrop-filter: blur(10px);
    }
    .blocking-upload-backdrop .modal {
      width: min(360px, calc(100vw - 32px));
      min-height: 0;
      text-align: center;
      gap: 10px;
      padding: 24px;
    }
    .blocking-upload-title {
      color: #17253a;
      font-size: 15px;
      font-weight: 900;
    }
    .blocking-upload-message {
      color: #516176;
      font-size: 13px;
      line-height: 1.6;
    }
    .blocking-upload-spinner {
      width: 34px;
      height: 34px;
      margin: 0 auto 4px;
      border: 3px solid #d8e5ee;
      border-top-color: var(--accent);
      border-radius: 999px;
      animation: blockingUploadSpin .8s linear infinite;
    }
    @keyframes blockingUploadSpin { to { transform: rotate(360deg); } }
    .modal {
      width: min(1040px, 100%);
      max-height: min(86vh, 900px);
      display: grid;
      grid-template-rows: auto 1fr auto;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid var(--line);
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
      overflow: hidden;
    }
    .modal-head, .modal-actions { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
    .modal-actions { border-top: 1px solid var(--line); border-bottom: 0; justify-content: flex-end; }
    .modal-title { font-weight: 800; }
    .modal-body { padding: 18px; overflow: auto; }
    .prompt-editor.large { min-height: 58vh; max-height: none; font-size: 14px; }
    .asset-preview-modal { width: min(900px, 100%); }
    .asset-preview-body { display: grid; gap: 12px; place-items: center; }
    .asset-preview-body img, .asset-preview-body video { max-width: 100%; max-height: 70vh; border-radius: 8px; border: 1px solid var(--line); background: #000; }
    .asset-preview-body audio { width: min(720px, 100%); }
    .task-video-preview-modal { width: min(920px, calc(100vw - 40px)); }
    .task-video-preview-body { display: grid; gap: 12px; }
    .task-video-preview-body video { width: 100%; max-height: 68vh; border-radius: 8px; border: 1px solid var(--line); background: #000; }
    .asset-video-cover { width: 100%; height: 100%; display: grid; place-items: center; background: #0f172a; color: #fff; position: relative; cursor: pointer; }
    .asset-video-cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
    .asset-play-badge { position: absolute; width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: 24px; box-shadow: 0 10px 28px rgba(0,0,0,0.24); }
    .cost-hint { color: var(--accent-strong); font-weight: 700; }
    .hidden { display: none; }
    #videoForm.hidden, #tasksPanel.hidden, #previewPanel.hidden { display: none; }

    /* 2026-07 UI refresh: visual-only overrides */
    :root {
      --bg: #eef3f8;
      --panel: rgba(255, 255, 255, 0.94);
      --text: #102033;
      --muted: #66758b;
      --line: #d9e2ee;
      --accent: #0d8b7f;
      --accent-strong: #05675f;
      --shadow: 0 18px 50px rgba(28, 43, 68, 0.10);
    }
    body {
      background:
        radial-gradient(circle at 10% -10%, rgba(13, 139, 127, 0.16), transparent 30%),
        radial-gradient(circle at 92% 4%, rgba(59, 130, 246, 0.12), transparent 28%),
        linear-gradient(180deg, #f7fafc 0%, #eef3f8 42%, #e9eff6 100%);
    }
    .app { grid-template-rows: auto minmax(0, 1fr); }
    header {
      position: sticky;
      top: 0;
      z-index: 25;
      padding: 14px 22px;
      background: rgba(255, 255, 255, 0.86);
      border-bottom: 1px solid rgba(217, 226, 238, 0.78);
      backdrop-filter: blur(14px);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    }
    h1 {
      font-size: 19px;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    h1::before {
      content: "";
      width: 11px;
      height: 28px;
      border-radius: 999px;
      background: linear-gradient(180deg, #14b8a6, #2563eb);
      box-shadow: 0 8px 20px rgba(13, 139, 127, 0.24);
    }
    .nav-tabs {
      padding: 4px;
      border-radius: 999px;
      background: #edf3f8;
      border: 1px solid #dfe8f2;
    }
    .nav-tabs button {
      border: 0;
      background: transparent;
      color: #516174;
      padding: 8px 14px;
      transition: all .18s ease;
    }
    .nav-tabs button:hover { color: var(--accent-strong); background: rgba(255,255,255,.7); }
    .nav-tabs button.active {
      color: #fff;
      background: linear-gradient(135deg, #0d8b7f, #0f766e);
      box-shadow: 0 10px 22px rgba(13, 139, 127, 0.20);
    }
    .header-right { gap: 8px; }
    .group-switcher.active {
      padding: 4px;
      background: #f4f7fb;
      border: 1px solid #dfe8f2;
      border-radius: 14px;
    }
    .group-switcher select {
      min-height: 36px;
      border: 0;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 1px 0 rgba(15,23,42,.04);
    }
    .status-pill {
      background: #ffffff;
      border-color: #e2eaf4;
      box-shadow: 0 8px 22px rgba(15,23,42,.06);
      color: #526176;
    }
    main {
      width: min(1480px, calc(100vw - 32px));
      margin: 0 auto;
      padding: 24px 0 36px;
      grid-template-columns: minmax(360px, 440px) minmax(520px, 1fr);
      gap: 18px;
    }
    .panel {
      border: 1px solid rgba(217, 226, 238, 0.92);
      border-radius: 18px;
      background: var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .panel h2 {
      padding: 18px 20px 0;
      font-size: 15px;
      color: #17253a;
      letter-spacing: -0.01em;
    }
    form, .panel-body { padding: 18px 20px 20px; }
    label { color: #26364a; font-size: 12px; font-weight: 800; }
    input, textarea, select, .prompt-editor {
      border-color: #d8e2ee;
      border-radius: 12px;
      background: #f9fbfd;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    input:hover, textarea:hover, select:hover, .prompt-editor:hover { background: #ffffff; border-color: #c8d5e5; }
    input:focus, textarea:focus, select:focus, .prompt-editor:focus {
      background: #ffffff;
      border-color: rgba(13, 139, 127, 0.72);
      box-shadow: 0 0 0 4px rgba(13, 139, 127, 0.12);
    }
    select.native-select-enhanced {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .custom-select {
      position: relative;
      width: 100%;
    }
    .custom-select.compact { width: auto; min-width: 108px; }
    .custom-select-btn {
      width: 100%;
      min-height: 42px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid #d8e2ee;
      border-radius: 12px;
      background: #f9fbfd;
      color: #1f2937;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .custom-select.compact .custom-select-btn {
      min-height: 28px;
      padding: 4px 8px;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 850;
    }
    .custom-select-btn:hover { background: #ffffff; border-color: #c8d5e5; }
    .custom-select.open .custom-select-btn,
    .custom-select-btn:focus {
      background: #ffffff;
      border-color: rgba(13, 139, 127, 0.72);
      box-shadow: 0 0 0 4px rgba(13, 139, 127, 0.12);
      outline: none;
    }
    .custom-select-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .custom-select-caret {
      color: #64748b;
      font-size: 12px;
      line-height: 1;
      transition: transform .16s ease;
    }
    .custom-select.open .custom-select-caret { transform: rotate(180deg); }
    .custom-select-menu {
      display: none;
      position: fixed;
      z-index: 360;
      max-height: min(260px, calc(100vh - 32px));
      overflow-y: auto;
      padding: 6px;
      border: 1px solid #cfe2df;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    }
    .custom-select.open .custom-select-menu { display: grid; gap: 3px; }
    .custom-select-menu::-webkit-scrollbar { width: 7px; }
    .custom-select-menu::-webkit-scrollbar-thumb { background: #cbd8e6; border-radius: 999px; }
    .custom-select-option {
      width: 100%;
      min-height: 32px;
      padding: 7px 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #233044;
      font: inherit;
      font-weight: 750;
      text-align: left;
      cursor: pointer;
    }
    .custom-select-option:hover,
    .custom-select-option:focus { background: #f1f7fb; outline: none; }
    .custom-select-option.active {
      background: #e8f7f5;
      color: #0d756d;
    }
    .custom-select-option:disabled {
      color: #94a3b8;
      cursor: not-allowed;
    }
    .prompt-editor {
      min-height: 190px;
      line-height: 1.68;
      color: #1d2c40;
    }
    .mode-tabs {
      padding: 5px;
      background: #edf3f8;
      border: 1px solid #dfe8f2;
      border-radius: 14px;
    }
    .mode-tabs button { border-radius: 10px; color: #526176; }
    .mode-tabs button.active {
      color: var(--accent-strong);
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    }
    .primary, .secondary, .danger {
      border-radius: 11px;
      min-height: 40px;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .primary {
      background: linear-gradient(135deg, #0d8b7f, #0f766e);
      box-shadow: 0 12px 24px rgba(13, 139, 127, 0.18);
    }
    .primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(13, 139, 127, 0.24); }
    .secondary { background: #eef4fa; border-color: #dbe6f2; color: #30425a; }
    .secondary:hover { background: #e6eef7; }
    .danger { background: #fff1ef; border-color: #ffd6cf; }
    .task-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: -2px 0 12px;
    }
    .task-stat-card {
      padding: 12px;
      border: 1px solid #e0e8f1;
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff, #f7fafc);
      box-shadow: 0 10px 24px rgba(30, 45, 70, 0.05);
    }
    .task-stat-value { font-size: 22px; font-weight: 900; letter-spacing: -0.04em; color: #17253a; }
    .task-stat-label { margin-top: 2px; font-size: 12px; font-weight: 750; color: #718096; }
    .task-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
    .task-filter-chips button {
      border: 1px solid #dce6f1;
      border-radius: 999px;
      background: #ffffff;
      color: #526176;
      min-height: 34px;
      padding: 7px 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .task-filter-chips button.active {
      color: #ffffff;
      border-color: transparent;
      background: linear-gradient(135deg, #0d8b7f, #2563eb);
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16);
    }
    .task-toolbar {
      position: sticky;
      top: 82px;
      z-index: 5;
      padding: 10px;
      margin: -4px -4px 14px;
      border: 1px solid #e2eaf4;
      border-radius: 16px;
      background: rgba(248, 251, 253, 0.88);
      backdrop-filter: blur(10px);
    }
    #tasksPanel { display: flex; flex-direction: column; height: 100%; min-height: 0; max-height: none; overflow: hidden; }
    #tasksPanel .panel-body { display: flex; flex-direction: column; min-height: 0; }
    #tasksPanel .task-panel-body { flex: 1 1 auto; padding-bottom: 8px; overflow: hidden; }
    #tasksPanel .log-panel-body { flex: 0 0 auto; padding-top: 0; padding-bottom: 12px; }
    .task-list { flex: 1 1 auto; gap: 12px; overflow-y: auto; min-height: 220px; max-height: none; padding-right: 4px; overscroll-behavior: contain; }
    .log-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
    .log-actions { display: flex; align-items: center; gap: 8px; }
    .log-title { color: #26364a; font-size: 12px; font-weight: 900; }
    #tasksPanel .log { margin-top: 0; height: 62px; min-height: 62px; max-height: 62px; padding: 7px 10px; overflow-y: auto; }
    #tasksPanel.log-collapsed .log { display: none; }
    #tasksPanel.log-collapsed .log-panel-body { padding-bottom: 10px; }
    #tasksPanel.log-collapsed .task-list { max-height: none; }
    .task-list::-webkit-scrollbar { width: 8px; }
    .task-list::-webkit-scrollbar-thumb { background: #cbd8e6; border-radius: 999px; }
    .task-card {
      border-color: #e0e8f1;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
      padding: 8px 10px;
      min-height: 104px;
      max-height: 104px;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(30, 45, 70, 0.045);
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .task-card:hover { border-color: #bdd4ea; box-shadow: 0 8px 20px rgba(30, 45, 70, 0.07); }
    .task-card.active {
      border-color: rgba(13, 139, 127, 0.62);
      box-shadow: 0 0 0 2px rgba(13, 139, 127, 0.08), 0 8px 20px rgba(30, 45, 70, 0.07);
    }
    .task-id {
      color: #31445c;
      font-size: 11px;
      background: #f1f5f9;
      border-radius: 999px;
      padding: 4px 8px;
      width: fit-content;
      max-width: 100%;
    }
    .task-meta { color: #718096; font-size: 11px; max-height: 24px; overflow: hidden; }
    .task-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #eef4fa;
      color: #526176;
    }
    .task-meta-pill strong { color: #1f3148; font-weight: 850; }
    .task-compact-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 86px; }
    .task-title-line { min-width: 0; display: grid; gap: 4px; }
    .task-id-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; min-width: 0; }
    .task-name { color: #17253a; font-size: 13px; font-weight: 900; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .task-id-row .task-id { max-width: min(520px, 100%); }
    .task-quick-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
    .task-prompt {
      color: #526176;
      line-height: 1.45;
      max-height: 24px;
      overflow: hidden;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .task-secondary-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      padding-top: 2px;
      opacity: .68;
    }
    .task-card:hover .task-secondary-actions { opacity: 1; }
    .task-actions .secondary, .task-actions .danger,
    .task-secondary-actions .secondary, .task-secondary-actions .danger,
    .task-quick-actions .secondary, .task-quick-actions .danger { min-height: 30px; padding: 5px 9px; font-size: 12px; }
    .badge { padding: 5px 10px; font-size: 11px; letter-spacing: .01em; }
    .progress-line { height: 6px; background: #e5edf5; }
    .progress-bar { background: linear-gradient(90deg, #14b8a6, #0d8b7f); }
    .reference-item, .asset-card, .result-box, .log {
      border-radius: 14px;
      border-color: #dfe8f2;
    }
    .preview-panel .result-box { min-height: 132px; max-height: 190px; }
    .preview-panel .url-row input { min-height: 32px; font-size: 12px; }
    .upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .upload-card {
      min-height: 58px;
      border-radius: 14px;
      background: linear-gradient(180deg, #fbfdff, #f3f7fb);
    }
    .upload-icon { font-size: 18px; margin-bottom: 2px; }
    .reference-list { gap: 4px; margin-bottom: 0; }
    .reference-item { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 3px 5px; gap: 5px; }
    .reference-item img { width: 28px; height: 28px; }
    .reference-item > div:first-child:not(:has(img)) { width: 28px !important; height: 28px !important; font-size: 10px; }
    .reference-name, .reference-tag { font-size: 10px; }
    .image-fields .hint { margin-top: 4px; font-size: 12px; }
    .group-tools {
      border-radius: 18px;
      border-color: #dfe8f2;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
    }

    /* 2026-07 group management panel refresh */
    .group-tools {
      width: min(520px, calc(100vw - 32px));
      padding: 10px;
      gap: 10px;
      border: 1px solid #dbe6f2;
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
    }
    .group-id-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid #e5edf5;
      border-radius: 12px;
      background: #f8fafc;
    }
    .group-id-line {
      min-width: 0;
      color: #64748b;
      font-size: 11px;
      line-height: 1.45;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .group-id-row .tag-btn {
      min-height: 30px;
      padding: 0 10px;
      white-space: nowrap;
    }
    .group-tools-row {
      grid-template-columns: minmax(0, 1fr) 64px;
      gap: 8px;
      align-items: end;
      padding: 10px;
      border: 1px solid #edf2f7;
      border-radius: 14px;
      background: #fbfdff;
    }
    .group-tools-row .field label {
      display: block;
      margin-bottom: 6px;
      color: #31445c;
      font-size: 12px;
      font-weight: 850;
    }
    .group-tools-row input {
      min-height: 36px;
      border-radius: 10px;
      background: #ffffff;
      font-size: 13px;
    }
    .group-tools-row button {
      min-height: 36px;
      border-radius: 10px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 850;
    }
    .group-members-panel {
      margin-top: 0;
      padding: 10px;
      border: 1px solid #edf2f7;
      border-radius: 14px;
      background: #fbfdff;
    }
    .group-members-head {
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid #edf2f7;
    }
    .group-members-title {
      color: #17253a;
      font-size: 13px;
      font-weight: 900;
    }
    .group-members-head .tag-btn {
      min-height: 30px;
      padding: 4px 10px;
      border-radius: 9px;
      font-size: 12px;
    }
    .group-member-list {
      gap: 7px;
      max-height: 220px;
      padding-right: 2px;
      overflow: auto;
    }
    .group-member-list::-webkit-scrollbar { width: 6px; }
    .group-member-list::-webkit-scrollbar-thumb { background: #cbd8e6; border-radius: 999px; }
    .group-member-item {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid #e5edf5;
      border-radius: 13px;
      background: #ffffff;
      box-shadow: 0 6px 18px rgba(30,45,70,.04);
    }
    .group-member-main { min-width: 0; display: grid; gap: 4px; }
    .group-member-name {
      color: #17253a;
      font-size: 13px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .group-member-role {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      margin-top: 0;
      color: #6a788c;
      font-size: 11px;
    }
    .group-member-role span {
      flex: 0 0 auto;
      padding: 2px 7px;
      border-radius: 999px;
      background: #edf7f6;
      color: #0d756d;
      font-weight: 850;
    }
    .group-member-role code {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #8a98aa;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10px;
    }
    .group-member-actions {
      display: flex;
      gap: 6px;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
    }
    .group-member-actions .tag-btn,
    .group-member-actions .secondary,
    .group-member-actions .danger {
      min-height: 30px;
      padding: 4px 9px;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }
    .group-member-actions .hint {
      color: #94a3b8;
      font-size: 11px;
      white-space: nowrap;
    }

    /* 2026-07 UI layout consolidation */
    header {
      padding: 12px 24px;
      min-height: 72px;
      gap: 18px;
    }
    .header-left { gap: 14px; min-width: 0; }
    h1 { font-size: 17px; white-space: nowrap; }
    h1::before { width: 8px; height: 24px; }
    .nav-tabs { gap: 2px; padding: 3px; }
    .nav-tabs button { min-height: 34px; padding: 7px 13px; font-size: 13px; }
    .header-right {
      display: grid;
      grid-template-columns: minmax(0, auto) auto auto;
      grid-template-areas:
        "group account status";
      align-items: center;
      gap: 10px;
      margin-left: auto;
      min-width: 0;
    }
    .group-switcher.active {
      grid-area: group;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      gap: 4px;
      align-items: center;
      padding: 5px;
      background: #eef4f8;
      border: 1px solid #dce7f1;
      border-radius: 16px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 28px rgba(30,45,70,.08);
    }
    .group-switcher select {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .group-custom-select { position: relative; min-width: 220px; max-width: 280px; }
    .group-select-btn {
      width: 100%;
      min-height: 38px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 0 11px 0 13px;
      border: 0;
      border-radius: 12px;
      background: #ffffff;
      color: #26364a;
      font-size: 13px;
      font-weight: 850;
      text-align: left;
      box-shadow: 0 1px 0 rgba(15,23,42,.04);
      cursor: pointer;
    }
    .group-select-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .group-select-caret { color: #64748b; font-size: 12px; transition: transform .16s ease; }
    .group-custom-select.open .group-select-caret { transform: rotate(180deg); }
    .group-select-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 35;
      padding: 6px;
      border: 1px solid #dbe6f2;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 22px 50px rgba(15,23,42,.18);
      max-height: 240px;
      overflow: auto;
    }
    .group-custom-select.open .group-select-menu { display: grid; gap: 4px; }
    .group-select-option {
      display: grid;
      gap: 2px;
      width: 100%;
      min-height: 42px;
      padding: 8px 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #26364a;
      text-align: left;
      cursor: pointer;
    }
    .group-select-option:hover { background: #f1f7fb; }
    .group-select-option.active { background: #e8f7f5; color: #0d756d; }
    .group-select-name { font-size: 13px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .group-select-role { color: #7a889b; font-size: 11px; font-weight: 750; }
    .group-select-option.active .group-select-role { color: #0d756d; }
    .group-switcher .icon-btn {
      min-height: 38px;
      padding: 0 10px;
      border: 0;
      border-left: 1px solid #dce7f1;
      border-radius: 10px;
      background: transparent;
      color: #40546b;
      font-size: 12px;
      font-weight: 850;
      box-shadow: none;
    }
    .group-switcher .icon-btn:hover { background: #ffffff; color: #0d756d; transform: none; }
    .account-tools {
      grid-area: account;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 5px 6px 5px 10px;
      border: 1px solid #dce7f1;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(30,45,70,.06);
      min-width: 0;
    }
    .account-tools.active { display: flex; }
    .account-name {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #40546b;
      font-size: 12px;
      font-weight: 850;
    }
    .account-logout-btn {
      min-height: 28px;
      padding: 0 8px;
      border-radius: 9px;
      font-size: 12px;
      white-space: nowrap;
    }
    .status-pill {
      grid-area: status;
      max-width: 230px;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 9px 12px;
      border-radius: 14px;
      background: #ffffff;
      font-size: 12px;
      box-shadow: 0 10px 24px rgba(30,45,70,.07);
    }
    #generateView {
      width: min(1420px, calc(100vw - 44px));
      height: calc(100vh - 78px);
      min-height: 620px;
      padding: 14px 0 18px;
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: 360px minmax(680px, 1fr);
      gap: 16px;
      align-items: stretch;
      overflow: hidden;
    }
    #generateView.assets-mode {
      width: min(1560px, calc(100vw - 28px));
      grid-template-columns: 280px 360px minmax(640px, 1fr);
      transform: translateX(10px);
    }
    #generateView.settings-mode {
      grid-template-columns: 1fr;
      place-items: start center;
      transform: none;
    }
    #generateView.settings-mode #assetsColumn { display: none; }
    #generateView.settings-mode #generatePanel { width: 100%; }
    #generateView.settings-mode #settingsPanel:not(.hidden) {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }
    #generateView.settings-mode #settingsPanel .settings-section {
      min-width: 0;
      padding: 0;
      border-bottom: 0;
      display: flex;
      flex-direction: column;
    }
    #generateView.settings-mode #settingsPanel .settings-section .actions {
      margin-top: auto;
    }
    #generateView.settings-mode #settingsPanel .settings-placeholder-box {
      min-height: 118px;
      display: grid;
      place-items: center;
      padding: 18px;
      border: 1px dashed #cbd5e1;
      border-radius: 12px;
      background: #f8fafc;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
    }
    .panel { border-radius: 20px; }
    .panel h2 { padding: 16px 18px 0; font-size: 14px; }
    form, .panel-body { padding: 14px 18px 18px; }
    #generatePanel {
      width: 100%;
      height: 100%;
      min-height: 0;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #videoForm {
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
      gap: clamp(8px, 1vh, 12px);
      padding: clamp(10px, 1.3vh, 14px) 18px clamp(12px, 1.6vh, 18px);
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    #videoForm .field { margin-bottom: 0; min-height: 0; }
    #videoForm > .field:has(#promptEditor) { display: grid; gap: 6px; }
    #taskName { min-height: 38px; }
    .mode-tabs { padding: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: clamp(6px, 0.9vh, 10px); }
    .mode-tabs button { min-height: clamp(30px, 4.2vh, 36px); }
    .prompt-editor { min-height: 92px; height: clamp(92px, 16vh, 128px); max-height: 128px; overflow-y: auto; }
    #imageFields { display: block; }
    #imageFields.hidden { display: none; }
    .asset-side-panel {
      height: 100%;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .asset-side-panel.hidden { display: none; }
    .asset-side-panel .panel-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 12px;
    }
    .asset-side-panel .upload-grid { grid-template-columns: 1fr; margin-bottom: 10px; }
    .asset-side-panel .upload-card { min-height: 72px; padding: 10px; cursor: pointer; }
    .asset-side-panel .upload-card input { pointer-events: auto; }
    .asset-category {
      padding-top: 10px;
      margin-top: 10px;
      border-top: 1px solid #edf2f7;
    }
    .asset-category:first-of-type { margin-top: 0; }
    .asset-category-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .asset-category-title { font-size: 12px; font-weight: 900; color: #24364d; }
    .asset-limit { font-size: 10px; color: #7a8799; text-align: right; }
    #referenceList, #audioList, #videoList { max-height: 150px; overflow-y: auto; padding-right: 2px; }
    .asset-side-panel .reference-item { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 7px; padding: 7px; }
    .asset-side-panel .reference-item img,
    .asset-side-panel .reference-item > div:first-child { width: 42px !important; height: 42px !important; }
    .asset-side-panel .reference-name { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #videoForm .param-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
    }
    #videoForm .actions { justify-content: stretch; margin-top: 0; }
    #videoForm .actions .primary { flex: 1; }
    #tasksPanel {
      height: 100%;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #tasksPanel > .panel-body:first-of-type { flex: 1 1 auto; min-height: 0; overflow: hidden; }
    #tasksPanel .task-list { flex: 1 1 auto; min-height: 220px; max-height: none; overflow-y: auto; }
    #tasksPanel .preview-panel { display: none; }
    #tasksPanel .log-panel-body { display: flex; }
    .task-summary { gap: 8px; margin-bottom: 10px; }
    .task-stat-card { padding: 10px 12px; border-radius: 14px; }
    .task-stat-value { font-size: 20px; }
    .task-toolbar {
      position: static;
      grid-template-columns: minmax(220px, 1fr) 128px auto auto;
      gap: 8px;
      margin: 0 0 12px;
      padding: 8px;
      border-radius: 14px;
      background: #f7fafc;
    }
    .task-toolbar input,
    .task-toolbar select,
    .task-toolbar button { min-height: 36px; }
    .task-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 36px;
      margin: 0 0 10px;
      padding: 7px 9px;
      border: 1px solid #e2eaf4;
      border-radius: 14px;
      background: #f7fafc;
      color: #526176;
      font-size: 12px;
      font-weight: 800;
    }
    .task-page-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .task-page-actions button, .task-page-actions select { min-height: 30px; border-radius: 9px; font-size: 12px; }
    .task-page-actions select { width: auto; padding: 4px 8px; background: #ffffff; }
    #tasksPanel { max-height: none; }
    #tasksPanel .panel-body { padding-top: 14px; }
    #tasksPanel > .task-panel-body {
      flex: 0 0 auto;
      overflow: visible;
      padding-bottom: 10px;
    }
    #tasksPanel .task-list {
      flex: 0 0 auto;
      display: grid;
      align-content: start;
      gap: 8px;
      min-height: 0;
      max-height: min(56vh, 560px);
      overflow-y: auto;
      padding-right: 4px;
      margin-bottom: 0;
    }
    .task-card {
      padding: 9px 10px;
      border-radius: 14px;
      height: auto;
      min-height: 92px;
      max-height: none;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(30,45,70,.04);
    }
    .task-card.active {
      border-color: rgba(13,139,127,.62);
      box-shadow: 0 0 0 2px rgba(13,139,127,.08), 0 6px 20px rgba(30,45,70,.045);
    }
    .task-card,
    .task-card * {
      transform: none !important;
    }
    .task-card:hover {
      border-color: rgba(13,139,127,.42);
      background: #fbfcfd;
    }
    #tasksPanel .task-compact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
      gap: 10px;
      align-items: start;
      min-height: 76px;
    }
    #tasksPanel .task-title-line {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
      min-width: 0;
      overflow: hidden;
    }
    .task-id-row { gap: 8px; min-width: 0; }
    .task-name { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .badge { padding: 4px 8px; font-size: 11px; }
    .task-meta { gap: 5px; min-width: 0; overflow: hidden; }
    .task-meta-pill { padding: 3px 7px; font-size: 11px; background: #f1f5f9; }
    #tasksPanel .task-prompt {
      color: #6a788c;
      font-size: 12px;
      line-height: 1.45;
      max-height: 34px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .task-secondary-actions { display: none; }
    #tasksPanel .task-quick-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-content: flex-start;
      gap: 5px;
      max-width: 132px;
    }
    .task-secondary-actions .secondary,
    .task-secondary-actions .danger,
    .task-quick-actions .secondary,
    .task-quick-actions .danger {
      min-height: 28px;
      padding: 4px 8px;
      border-radius: 9px;
      font-size: 11px;
    }
    .task-inline-preview {
      width: 104px;
      height: 72px;
      min-height: 72px;
      max-height: 72px;
      border: 1px solid #dfe8f2;
      border-radius: 12px;
      background: #0f172a;
      overflow: hidden;
      display: grid;
      place-items: center;
      color: #94a3b8;
      font-size: 11px;
      align-self: center;
      position: relative;
      contain: layout paint;
    }
    .task-inline-preview video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #000;
    }
    .task-inline-preview-button {
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 0;
      background: linear-gradient(135deg, #111827, #334155);
      color: #e2e8f0;
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 900;
    }
    .task-inline-preview-button:hover { background: linear-gradient(135deg, #0f172a, #1e293b); }
    .task-preview-expand {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 24px;
      height: 24px;
      min-height: 24px;
      padding: 0;
      border: 1px solid rgba(255,255,255,.36);
      border-radius: 8px;
      background: rgba(15,23,42,.72);
      color: #ffffff;
      display: grid;
      place-items: center;
      cursor: pointer;
      z-index: 3;
      line-height: 1;
      opacity: .9;
    }
    .task-preview-expand:hover { background: rgba(15,23,42,.88); opacity: 1; }
    .task-preview-expand svg { width: 14px; height: 14px; stroke: currentColor; }
    .task-inline-preview-thumb {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #111827, #334155);
      color: #e2e8f0;
      font-size: 12px;
      font-weight: 900;
    }
    .task-inline-preview.empty-preview { background: #f1f5f9; color: #64748b; }
    .task-inline-preview.preview-error {
      position: relative;
      background: #fff1f2;
      color: #be123c;
    }
    .preview-error-text {
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 5px;
      padding: 2px 4px;
      border-radius: 6px;
      background: rgba(255,255,255,.88);
      color: #be123c;
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
    }
    .progress-line { height: 4px; }
    .upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    @media (max-height: 760px) and (min-width: 981px) {
      #generateView { min-height: 0; transform: none; }
      #tasksPanel { height: 100%; max-height: none; }
      #tasksPanel > .panel-body:first-of-type { overflow: visible; }
      #tasksPanel .task-list { max-height: min(54vh, 480px); overflow-y: auto; }
    }

    @media (max-width: 1180px) {
      header { align-items: flex-start; flex-direction: column; }
      .retention-notice {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
      }
      .header-right { width: 100%; grid-template-columns: 1fr; grid-template-areas: "group" "account" "status"; }
      .group-switcher.active { grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
      .group-custom-select { max-width: none; min-width: 0; }
      .group-switcher select { max-width: none; min-width: 0; }
      .account-tools.active, .status-pill { max-width: none; width: 100%; }
      #generateView { width: min(1120px, calc(100vw - 32px)); grid-template-columns: 340px minmax(600px, 1fr); }
      #generateView.assets-mode { width: min(1160px, calc(100vw - 24px)); grid-template-columns: 250px 330px minmax(560px, 1fr); transform: none; }
    }

    @media (max-width: 980px) {
      header { padding: 16px; align-items: flex-start; flex-direction: column; }
      main, #generateView { width: auto; margin: 0; padding: 16px; grid-template-columns: 1fr; }
      #generateView, #generateView.assets-mode { height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow: visible; transform: none; }
      #assetsColumn { height: auto; }
      #generatePanel { height: auto; overflow: visible; }
      #videoForm { height: auto; overflow: visible; grid-template-rows: auto; }
      #tasksPanel { height: auto; min-height: 0; overflow: visible; }
      #tasksPanel > .panel-body:first-of-type { overflow: visible; }
      #tasksPanel .task-list { max-height: 420px; }
      #videoForm .param-grid { grid-template-columns: 1fr; }
      #tasksPanel .task-compact-grid { grid-template-columns: minmax(0, 1fr) minmax(132px, auto); }
      #tasksPanel .task-inline-preview { display: none; }
      .grid-2, .param-grid, .task-toolbar, .asset-library-toolbar, .task-summary { grid-template-columns: 1fr; }
      .actions { flex-direction: column; align-items: stretch; }
      .status-pill { white-space: normal; }
    }

    /* 2026-07 responsive density trial: use browser zoom and wide viewports better */
    main,
    #generateView {
      width: min(100%, calc(100vw - 32px));
      max-width: none;
      margin-left: auto;
      margin-right: auto;
      grid-template-columns: minmax(520px, 1fr) minmax(420px, 560px);
    }
    #generateView {
      height: calc(100dvh - 132px);
      min-height: 620px;
      overflow: hidden;
    }
    #generateView.assets-mode {
      width: min(100%, calc(100vw - 32px));
      max-width: none;
      grid-template-columns: minmax(240px, 280px) minmax(520px, 1fr) minmax(420px, 560px);
      transform: none;
    }
    #tasksPanel {
      height: 100%;
      min-height: 0;
    }
    #tasksPanel > .task-panel-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }
    #tasksPanel .task-list {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
    }
    .task-card {
      height: auto;
      min-height: 96px;
      max-height: none;
    }
    #tasksPanel .task-compact-grid {
      grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
      min-height: 80px;
      gap: 10px;
      align-items: start;
    }
    #tasksPanel .task-title-line {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 4px;
      min-width: 0;
      overflow: hidden;
    }
    #tasksPanel .task-prompt {
      max-height: 38px;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    #tasksPanel .task-quick-actions {
      justify-content: flex-end;
      align-content: flex-start;
      max-width: 132px;
    }
    #tasksPanel .task-inline-preview {
      display: none;
    }
    @media (max-width: 1599px) and (min-width: 1200px) {
      main,
      #generateView {
        width: min(100%, calc(100vw - 24px));
        grid-template-columns: minmax(540px, 1fr) minmax(400px, 500px);
        gap: 14px;
      }
      #generateView.assets-mode {
        width: min(100%, calc(100vw - 24px));
        grid-template-columns: minmax(220px, 260px) minmax(520px, 1fr) minmax(380px, 480px);
        gap: 12px;
      }
      #tasksPanel .task-quick-actions {
        max-width: 150px;
      }
    }
    @media (min-width: 1600px) {
      main,
      #generateView {
        width: min(100%, calc(100vw - 48px));
        grid-template-columns: minmax(680px, 1fr) minmax(520px, 680px);
        gap: 20px;
      }
      #generateView.assets-mode {
        width: min(100%, calc(100vw - 48px));
        grid-template-columns: minmax(280px, 320px) minmax(680px, 1fr) minmax(520px, 680px);
        transform: none;
      }
      #generateView {
        height: calc(100dvh - 132px);
        min-height: 680px;
      }
      .task-card {
        min-height: 88px;
        padding: 9px 12px;
      }
      #tasksPanel .task-compact-grid {
        grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
        gap: 10px;
      }
      #tasksPanel .task-title-line {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 4px;
      }
      .task-prompt {
        max-height: 42px;
      }
      #tasksPanel .task-inline-preview {
        display: none;
      }
    }
    @media (max-width: 1320px) and (min-width: 981px) {
      #tasksPanel .task-card {
        min-height: 84px;
      }
      #tasksPanel .task-compact-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
      }
      #tasksPanel .task-inline-preview {
        display: none;
      }
      #tasksPanel .task-secondary-actions {
        opacity: .75;
      }
    }
    @media (min-width: 2400px) {
      main,
      #generateView {
        grid-template-columns: minmax(860px, 1fr) minmax(560px, 720px);
      }
      #generateView.assets-mode {
        grid-template-columns: minmax(300px, 340px) minmax(860px, 1fr) minmax(560px, 720px);
      }
    }
    @media (min-width: 3200px) {
      main,
      #generateView {
        grid-template-columns: minmax(1040px, 1fr) minmax(600px, 760px);
      }
      #generateView.assets-mode {
        grid-template-columns: minmax(320px, 360px) minmax(1040px, 1fr) minmax(600px, 760px);
      }
    }
    @media (max-height: 760px) and (min-width: 981px) {
      #generateView {
        height: calc(100dvh - 96px);
        min-height: 0;
      }
      #tasksPanel .task-list {
        max-height: none;
      }
    }
    @media (max-width: 980px) {
      main,
      #generateView,
      #generateView.assets-mode {
        width: auto;
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 0;
        grid-template-columns: 1fr;
        overflow: visible;
      }
      #tasksPanel > .task-panel-body {
        overflow: visible;
      }
      #tasksPanel .task-list {
        flex: 0 0 auto;
        max-height: 420px;
      }
      .task-compact-grid {
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .task-inline-preview {
        display: none;
      }
    }
    @media (max-width: 1180px) and (min-width: 981px) {
      #generateView.settings-mode #settingsPanel:not(.hidden) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 980px) {
      #generateView.settings-mode #settingsPanel:not(.hidden) {
        grid-template-columns: 1fr;
      }
    }

    /* 2026-07 main workspace redesign v1: visual-only rollout */
    :root {
      --ui-primary: #0f766e;
      --ui-primary-strong: #115e59;
      --ui-primary-soft: #ccfbf1;
      --ui-blue: #2563eb;
      --ui-surface: rgba(255, 255, 255, .96);
      --ui-surface-soft: #f8fbfd;
      --ui-border: rgba(203, 213, 225, .78);
      --ui-text: #0f172a;
      --ui-muted: #64748b;
      --ui-shadow: 0 20px 54px rgba(15, 23, 42, .10);
      --ui-shadow-soft: 0 10px 28px rgba(15, 23, 42, .06);
    }
    body {
      background:
        radial-gradient(circle at 8% -6%, rgba(20, 184, 166, .20), transparent 30%),
        radial-gradient(circle at 92% 2%, rgba(37, 99, 235, .14), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #eef6fb 48%, #e8eef6 100%);
    }
    header {
      min-height: 62px;
      padding: 12px 24px;
      background: rgba(255, 255, 255, .9);
      border-bottom: 1px solid rgba(226, 232, 240, .9);
      box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
    }
    h1 {
      color: var(--ui-text);
      font-size: 18px;
      font-weight: 900;
    }
    h1::before {
      width: 10px;
      height: 30px;
      background: linear-gradient(180deg, #2dd4bf, var(--ui-blue));
      box-shadow: 0 10px 22px rgba(15, 118, 110, .26);
    }
    .nav-tabs {
      background: #edf5f8;
      border: 1px solid #dbe8ef;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74);
    }
    .nav-tabs button.active {
      background: linear-gradient(135deg, var(--ui-primary), #0d9488);
      box-shadow: 0 10px 24px rgba(15, 118, 110, .22);
    }
    main,
    #generateView {
      padding-top: 18px;
      gap: 16px;
    }
    #generateView.assets-mode {
      align-items: stretch;
    }
    .panel {
      background: var(--ui-surface);
      border: 1px solid var(--ui-border);
      border-radius: 22px;
      box-shadow: var(--ui-shadow);
    }
    .panel h2 {
      padding: 18px 20px 0;
      color: var(--ui-text);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: -.02em;
    }
    #tasksPanel .task-panel-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    #tasksPanel .task-panel-heading::after {
      display: none;
    }
    #tasksPanel .task-panel-heading > span:first-child::after {
      content: "";
      display: block;
      width: 36px;
      height: 3px;
      margin-top: 8px;
      border-radius: 999px;
      background: var(--ui-primary);
    }
    #tasksPanel .balance-display {
      flex: 0 0 auto;
      padding-top: 1px;
      color: #334155;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.35;
      white-space: nowrap;
    }
    #tasksPanel .balance-display[data-status="unavailable"],
    #tasksPanel .balance-display[data-status="key_error"] {
      color: #b45309;
    }
    #assetsColumn .panel-body,
    #generatePanel form,
    #tasksPanel .panel-body {
      padding: 14px 16px 16px;
    }
    #assetsColumn {
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,253,250,.72));
    }
    #assetsColumn h2::after,
    #generatePanel h2::after,
    #tasksPanel h2::after {
      content: "";
      display: block;
      width: 36px;
      height: 3px;
      margin-top: 8px;
      border-radius: 999px;
      background: var(--ui-primary);
    }
    #videoForm {
      gap: 12px;
    }
    #taskName,
    #videoForm input,
    #videoForm select,
    .prompt-editor {
      background: #f8fafc;
      border: 1px solid #dbe7ef;
      border-radius: 14px;
    }
    #videoForm input:focus,
    #videoForm select:focus,
    .prompt-editor:focus {
      border-color: rgba(15, 118, 110, .72);
      box-shadow: 0 0 0 4px rgba(20, 184, 166, .14);
    }
    .field-head {
      align-items: center;
      gap: 8px;
    }
    #autoBindMentionBtn {
      display: none;
    }
    .prompt-editor {
      min-height: 168px;
      background: linear-gradient(180deg, #ffffff, #f8fbfd);
      color: #172033;
      font-size: 13px;
      line-height: 1.68;
    }
    .expand-icon-btn {
      background: #ffffff;
      border-color: rgba(20, 184, 166, .34);
      color: var(--ui-primary-strong);
      box-shadow: 0 8px 18px rgba(15, 118, 110, .10);
    }
    .expand-icon-btn svg {
      stroke: currentColor;
    }
    .expand-icon-btn:hover {
      background: #ecfeff;
      border-color: rgba(15, 118, 110, .48);
      color: var(--ui-primary);
      box-shadow: 0 10px 22px rgba(15, 118, 110, .14);
    }
    .param-grid {
      gap: 12px;
    }
    .model-price-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 14px;
      margin-top: 6px;
    }
    .model-price-row .hint {
      margin: 0;
      white-space: nowrap;
      line-height: 1.3;
    }
    .model-price-row .cost-hint {
      color: var(--ui-primary-strong);
      font-weight: 900;
    }
    #videoForm > .field:has(#taskName) {
      display: grid;
      grid-template-columns: auto minmax(180px, 1fr);
      align-items: center;
      gap: 8px;
    }
    #videoForm > .field:has(#taskName) label {
      margin: 0;
      color: var(--ui-muted);
      font-size: 12px;
      white-space: nowrap;
    }
    #taskName {
      min-height: 32px;
      padding-top: 7px;
      padding-bottom: 7px;
    }
    #generateBtn,
    #videoForm .primary {
      min-height: 44px;
      border: 0;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--ui-primary), #14b8a6);
      box-shadow: 0 14px 28px rgba(15, 118, 110, .24);
      font-size: 14px;
      font-weight: 900;
    }
    .asset-side-panel .upload-card {
      border-radius: 16px;
      border-color: rgba(15, 118, 110, .35);
      background: linear-gradient(135deg, #ecfeff, #f0fdfa);
      color: var(--ui-primary-strong);
      font-weight: 900;
    }
    .asset-category {
      border-top-color: rgba(203, 213, 225, .7);
    }
    .asset-category-title {
      color: var(--ui-text);
      font-size: 12px;
    }
    .asset-side-panel .reference-item {
      border-radius: 12px;
      background: rgba(255, 255, 255, .9);
      border: 1px solid rgba(226, 232, 240, .9);
    }
    #tasksPanel {
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.9));
    }
    .task-summary {
      gap: 8px;
    }
    .task-stat-card {
      border: 0;
      background: #f1f7f9;
      border-radius: 16px;
      box-shadow: none;
    }
    .task-stat-value {
      color: var(--ui-primary-strong);
      font-weight: 900;
    }
    .task-filter-chips button,
    .task-pagination,
    .task-toolbar {
      border-color: rgba(203, 213, 225, .75);
      background: rgba(248, 250, 252, .9);
    }
    .task-card {
      border-radius: 16px;
      border: 1px solid rgba(226, 232, 240, .9);
      background: #ffffff;
      box-shadow: var(--ui-shadow-soft);
    }
    .task-card.active {
      border-color: rgba(15, 118, 110, .65);
      box-shadow: 0 0 0 3px rgba(20, 184, 166, .12), var(--ui-shadow-soft);
    }
    .task-name {
      color: var(--ui-text);
      font-weight: 900;
    }
    .badge {
      border-radius: 999px;
      font-weight: 900;
    }
    #tasksPanel .task-prompt {
      color: var(--ui-muted);
    }
    #tasksPanel .task-quick-actions .secondary {
      background: #f1f5f9;
      border-color: #dbe6f2;
      color: #334155;
      font-weight: 850;
    }
    #tasksPanel .task-quick-actions .secondary:hover {
      background: var(--ui-primary-soft);
      border-color: rgba(15, 118, 110, .32);
      color: var(--ui-primary-strong);
    }
    #tasksPanel .log {
      border-radius: 14px;
      background: #111827;
    }

    /* 2026-07 task panel UI completion v1 */
    #tasksPanel .task-panel-body {
      gap: 10px;
      padding-top: 12px;
    }
    #tasksPanel .task-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 8px;
    }
    #tasksPanel .task-stat-card {
      min-height: 54px;
      padding: 10px 12px;
      border: 1px solid rgba(226, 232, 240, .82);
      border-radius: 14px;
      background: linear-gradient(180deg, #f8fbfd 0%, #eef7f8 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
    }
    #tasksPanel .task-stat-value {
      font-size: 22px;
      line-height: 1;
      letter-spacing: 0;
    }
    #tasksPanel .task-stat-label {
      margin-top: 5px;
      color: #53657a;
      font-size: 11px;
      font-weight: 800;
    }
    #tasksPanel .task-scope-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 2px 0 10px;
    }
    #tasksPanel .task-scope-row .task-filter-chips {
      margin: 0;
    }
    #tasksPanel .task-scope-row #refreshAllBtn {
      min-height: 34px;
      padding: 0 14px;
      border-radius: 11px;
      background: #f1f5f9;
      color: #475569;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    #tasksPanel .task-filter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 2px 0 10px;
    }
    #tasksPanel .task-filter-chips button {
      min-height: 30px;
      padding: 0 13px;
      border: 1px solid rgba(203, 213, 225, .92);
      border-radius: 999px;
      background: #fff;
      color: #334155;
      font-size: 12px;
      font-weight: 850;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    }
    #tasksPanel .task-filter-chips button.active,
    #tasksPanel .task-filter-chips button:hover {
      border-color: transparent;
      background: linear-gradient(135deg, var(--ui-primary), #14b8a6);
      color: #fff;
      box-shadow: 0 8px 18px rgba(15, 118, 110, .18);
    }
    #tasksPanel .task-toolbar {
      display: grid;
      grid-template-columns: minmax(150px, 1fr) minmax(96px, 118px) minmax(78px, auto) minmax(74px, auto);
      align-items: center;
      gap: 8px;
      margin: 0 0 9px;
      padding: 8px;
      border: 1px solid rgba(226, 232, 240, .9);
      border-radius: 15px;
      background: rgba(255, 255, 255, .72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }
    #tasksPanel .task-toolbar input,
    #tasksPanel .task-toolbar select {
      min-height: 34px;
      border-radius: 11px;
      background: #fff;
      border-color: rgba(203, 213, 225, .9);
      font-size: 12px;
    }
    #tasksPanel .task-toolbar button {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 11px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    #tasksPanel #refreshAllBtn {
      background: #f1f5f9;
      color: #475569;
    }
    #tasksPanel .task-pagination {
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0 0 9px;
      padding: 6px 8px 6px 12px;
      border: 1px solid rgba(226, 232, 240, .88);
      border-radius: 14px;
      background: rgba(255, 255, 255, .76);
      color: #475569;
      font-size: 12px;
      font-weight: 850;
    }
    #tasksPanel .task-pagination button,
    #tasksPanel .task-pagination select {
      min-height: 28px;
      border-radius: 9px;
      font-size: 11px;
      font-weight: 850;
    }
    #tasksPanel .task-pagination select {
      max-width: 108px;
      padding-right: 22px;
    }
    #tasksPanel .task-list {
      gap: 8px;
      padding: 2px 4px 2px 0;
    }
    #tasksPanel .task-card {
      position: relative;
      min-height: 120px;
      padding: 10px 10px 10px 13px;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
    }
    #tasksPanel .task-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 3px;
      border-radius: 0 999px 999px 0;
      background: transparent;
    }
    #tasksPanel .task-card.active::before {
      background: linear-gradient(180deg, #14b8a6, var(--ui-primary));
    }
    #tasksPanel .task-card.active {
      background: #fff;
      border-color: rgba(20, 184, 166, .48);
      box-shadow: 0 0 0 2px rgba(20, 184, 166, .08), 0 5px 16px rgba(15, 23, 42, .045);
    }
    #tasksPanel .task-compact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(116px, auto);
      align-items: start;
      gap: 8px;
    }
    #tasksPanel .task-main {
      min-width: 0;
    }
    #tasksPanel .task-name-wrap {
      display: inline-grid;
      grid-template-columns: minmax(0, auto) 22px;
      align-items: center;
      gap: 5px;
      max-width: min(100%, 280px);
      min-width: 0;
    }
    #tasksPanel .task-name {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      line-height: 1.2;
    }
    #tasksPanel .task-rename-btn {
      width: 22px;
      height: 22px;
      min-height: 22px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      color: #94a3b8;
      box-shadow: none;
    }
    #tasksPanel .task-rename-btn svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
    }
    #tasksPanel .task-rename-btn:hover {
      border-color: rgba(20, 184, 166, .36);
      background: #ecfeff;
      color: var(--ui-primary-strong);
    }
    #tasksPanel .task-meta {
      gap: 5px;
      margin-top: 5px;
    }
    #tasksPanel .badge {
      min-height: 20px;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      line-height: 1;
    }
    #tasksPanel .task-prompt {
      margin-top: 5px;
      color: #607086;
      font-size: 11px;
      line-height: 1.35;
      -webkit-line-clamp: 1;
    }
    #tasksPanel .task-cost {
      margin-top: 5px;
      color: #94a3b8;
      font-size: 10px;
      line-height: 1.25;
    }
    #tasksPanel .task-quick-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(48px, 1fr));
      gap: 6px;
      min-width: 112px;
      max-width: 122px;
      align-self: start;
      margin-top: 0;
      transform: none;
    }
    #topStatus {
      display: none !important;
    }
    #tasksPanel .task-quick-actions .danger[data-action="remove"] {
      min-height: 28px;
      padding: 0 8px;
      border-radius: 8px;
      background: #fff7f7;
      border-color: rgba(239, 68, 68, .22);
      color: #b91c1c;
      box-shadow: none;
      font-size: 10px;
      font-weight: 800;
    }
    #tasksPanel .task-quick-actions .danger[data-action="remove"]:hover {
      background: #fee2e2;
      border-color: rgba(220, 38, 38, .38);
      color: #991b1b;
    }
    #tasksPanel .task-quick-actions .secondary {
      min-height: 28px;
      padding: 0 8px;
      border-radius: 9px;
      font-size: 10px;
      line-height: 1;
      background: #f8fafc;
      box-shadow: none;
    }
    #tasksPanel .task-quick-actions .secondary[data-action="view-video"] {
      background: #e6fffb;
      border-color: rgba(20, 184, 166, .42);
      color: var(--ui-primary-strong);
    }
    #tasksPanel .task-quick-actions .secondary[data-action="view-video"]:disabled {
      background: #f1f5f9;
      border-color: rgba(203, 213, 225, .9);
      color: #94a3b8;
      cursor: not-allowed;
      opacity: 1;
      box-shadow: none;
    }
    #tasksPanel .log-panel-body {
      padding-top: 6px;
    }
    #tasksPanel .log-head {
      margin-bottom: 7px;
    }
    #tasksPanel .log-title {
      color: #334155;
      font-size: 12px;
      font-weight: 900;
    }
    #tasksPanel .log-actions .tag-btn {
      min-height: 28px;
      padding: 0 10px;
      border-radius: 9px;
      background: #f8fafc;
      color: #475569;
      font-size: 11px;
      font-weight: 850;
    }
    #tasksPanel .log {
      height: 54px;
      min-height: 54px;
      max-height: 54px;
      border: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(15, 23, 42, .10);
    }
    .task-rename-modal,
    .asset-edit-modal {
      width: min(520px, calc(100vw - 32px));
    }
    .task-rename-modal {
      width: min(420px, calc(100vw - 32px));
    }
    .task-rename-modal .modal-body,
    .asset-edit-modal .modal-body {
      display: grid;
      gap: 10px;
    }
    .task-rename-modal input,
    .asset-edit-modal input,
    .asset-edit-modal textarea {
      min-height: 42px;
      border-radius: 13px;
      border: 1px solid #dbe7ef;
      background: #f8fafc;
      padding: 10px 12px;
      color: var(--ui-text);
      font-size: 14px;
      outline: none;
    }
    .asset-edit-modal textarea {
      min-height: 88px;
      resize: vertical;
      line-height: 1.5;
    }
    .asset-edit-modal .asset-edit-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .asset-edit-modal .asset-edit-grid.hidden {
      display: none;
    }
    .task-rename-modal input:focus,
    .asset-edit-modal input:focus,
    .asset-edit-modal textarea:focus {
      border-color: rgba(15, 118, 110, .72);
      box-shadow: 0 0 0 4px rgba(20, 184, 166, .14);
      background: #fff;
    }
    @media (max-width: 1280px) and (min-width: 981px) {
      #tasksPanel .task-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #tasksPanel .task-toolbar {
        grid-template-columns: 1fr 112px;
      }
      #tasksPanel .task-toolbar button {
        width: 100%;
      }
      #tasksPanel .task-pagination {
        align-items: flex-start;
        flex-direction: column;
      }
    }
    @media (max-width: 980px) {
      header {
        padding: 14px 16px;
      }
      #assetsColumn .panel-body,
      #generatePanel form,
      #tasksPanel .panel-body {
        padding: 14px;
      }
    }

    /* 2026-07 generate params form layout and shadow fix */
    @media (min-width: 981px) {
      #generateView,
      #generateView.assets-mode {
        height: calc(100dvh - 132px);
        min-height: 0;
        overflow: visible;
        align-items: stretch;
      }
      #assetsColumn,
      #generatePanel,
      #tasksPanel {
        box-shadow: none;
      }
      #generatePanel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: var(--panel);
      }
      #videoForm {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(7px, 1vh, 12px);
        overflow-y: auto;
        overflow-x: hidden;
      }
      #videoForm > .field:has(#promptEditor) {
        flex: 1 1 0;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      #videoForm .prompt-editor {
        flex: 1 1 0;
        height: 100%;
        min-height: 0;
        max-height: none;
        min-width: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      #videoForm .mention-menu {
        flex: 0 0 auto;
      }
      #videoForm .model-ratio-grid,
      #videoForm .duration-sound-grid,
      #videoForm .actions {
        flex: 0 0 auto;
        margin-top: 0;
      }
      #videoForm .duration-sound-grid,
      #videoForm .actions {
        flex: 0 0 auto;
      }
      @media (max-height: 760px) {
        #videoForm {
          gap: 7px;
        }
        #videoForm > .field:has(#promptEditor),
        #videoForm .prompt-editor {
          min-height: 0;
        }
      }
    }

    /* Settings layout must override all workspace zoom breakpoints above. */
    #generateView.settings-mode {
      width: min(100%, calc(100vw - 48px));
      max-width: none;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      justify-items: stretch;
      align-items: stretch;
      place-items: stretch;
      transform: none;
    }
    #generateView.settings-mode #generatePanel {
      width: 100%;
      max-width: none;
      min-width: 0;
      grid-column: 1 / -1;
      justify-self: stretch;
    }
    #generateView.settings-mode #settingsPanel:not(.hidden) {
      width: 100%;
      min-width: 0;
      grid-template-columns: repeat(3, minmax(300px, 1fr));
      gap: clamp(18px, 2vw, 30px);
    }
    @media (max-width: 1180px) and (min-width: 981px) {
      #generateView.settings-mode {
        width: min(100%, calc(100vw - 32px));
      }
      #generateView.settings-mode #settingsPanel:not(.hidden) {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
      }
    }
    @media (max-width: 980px) {
      #generateView.settings-mode {
        width: auto;
        grid-template-rows: auto;
      }
      #generateView.settings-mode #settingsPanel:not(.hidden) {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* Tutorial library is an independent view so it does not inherit generation workspace sizing. */
    #tutorialsView {
      width: min(1460px, calc(100vw - 48px));
      max-width: none;
      margin: 0 auto;
      grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
      align-items: start;
    }
    .tutorial-documents-panel,
    .tutorial-library-panel {
      width: 100%;
      min-width: 0;
    }
    .tutorial-documents-panel {
      position: sticky;
      top: 88px;
      max-height: calc(100vh - 112px);
      overflow: hidden;
    }
    .tutorial-documents-panel .panel-body {
      max-height: calc(100vh - 174px);
      overflow-y: auto;
    }
    .tutorial-document-list {
      display: grid;
      gap: 8px;
    }
    .tutorial-document-button {
      display: grid;
      gap: 3px;
      width: 100%;
      padding: 11px 12px;
      color: var(--text);
      text-align: left;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
    }
    .tutorial-document-button:hover,
    .tutorial-document-button:focus-visible {
      border-color: var(--primary);
    }
    .tutorial-document-name {
      overflow-wrap: anywhere;
      font-weight: 650;
      line-height: 1.5;
    }
    .tutorial-document-meta {
      color: var(--muted);
      font-size: 12px;
    }
    .tutorial-empty-state {
      padding: 28px 16px;
      color: var(--muted);
      text-align: center;
      border: 1px dashed var(--line);
      border-radius: 6px;
    }
    .tutorial-library-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .tutorial-count {
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
    }
    .tutorial-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: 20px;
    }
    .tutorial-card {
      min-width: 0;
      padding: 0;
      overflow: hidden;
      color: var(--text);
      text-align: left;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: none;
      cursor: pointer;
      transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }
    .tutorial-card:hover {
      border-color: var(--primary);
      box-shadow: 0 8px 20px rgba(31, 41, 55, 0.1);
      transform: translateY(-2px);
    }
    .tutorial-card:focus-visible {
      outline: 3px solid rgba(37, 99, 235, 0.24);
      outline-offset: 2px;
    }
    .tutorial-cover {
      position: relative;
      display: grid;
      width: 100%;
      aspect-ratio: 16 / 9;
      place-items: center;
      overflow: hidden;
      background: #e9eef3;
      border-bottom: 1px solid var(--line);
    }
    .tutorial-cover::before,
    .tutorial-cover::after {
      position: absolute;
      content: "";
      pointer-events: none;
    }
    .tutorial-cover::before {
      inset: 18% 14%;
      border: 1px solid rgba(71, 85, 105, 0.18);
      border-radius: 6px;
    }
    .tutorial-cover::after {
      width: 38%;
      height: 2px;
      background: rgba(71, 85, 105, 0.2);
      box-shadow: 0 12px 0 rgba(71, 85, 105, 0.14), 0 -12px 0 rgba(71, 85, 105, 0.14);
    }
    .tutorial-play-icon {
      position: relative;
      z-index: 1;
      display: grid;
      width: 52px;
      height: 52px;
      padding-left: 3px;
      place-items: center;
      color: #ffffff;
      font-size: 20px;
      line-height: 1;
      background: rgba(17, 24, 39, 0.78);
      border-radius: 50%;
    }
    .tutorial-card-title {
      display: -webkit-box;
      min-height: 58px;
      padding: 16px;
      overflow: hidden;
      font-size: 15px;
      font-weight: 650;
      line-height: 1.7;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .tutorial-detail-modal {
      width: min(860px, calc(100vw - 40px));
      max-height: min(88vh, 900px);
    }
    .tutorial-detail-head {
      align-items: flex-start;
    }
    .tutorial-detail-title {
      max-width: calc(100% - 76px);
      font-size: 23px;
      line-height: 1.45;
    }
    .tutorial-detail-body {
      display: grid;
      gap: 22px;
      overflow-y: auto;
    }
    .tutorial-detail-section {
      display: grid;
      gap: 10px;
    }
    .tutorial-detail-label {
      font-size: 14px;
      font-weight: 650;
      color: var(--text);
    }
    .tutorial-video-shell {
      position: relative;
      display: grid;
      width: 100%;
      height: 456px;
      place-items: center;
      overflow: hidden;
      background: #111827;
      border-radius: 6px;
    }
    .tutorial-video-shell video {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      background: #111827;
    }
    .tutorial-video-empty {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      color: #cbd5e1;
      text-align: center;
      background: #111827;
    }
    .tutorial-video-empty.hidden { display: none; }
    .tutorial-protected-content {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    .tutorial-copy {
      min-height: 96px;
      padding: 16px;
      color: var(--text);
      white-space: pre-wrap;
      line-height: 1.8;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 6px;
    }
    .tutorial-cover img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .tutorial-document-reader-body {
      position: relative;
      min-height: min(64vh, 680px);
      display: grid;
      gap: 12px;
      overflow: hidden;
    }
    .tutorial-document-reader-status {
      min-height: 24px;
      color: var(--muted);
    }
    .tutorial-document-pdf {
      width: 100%;
      min-height: min(66vh, 720px);
      border: 1px solid var(--line);
    }
    .tutorial-document-image {
      display: block;
      max-width: 100%;
      max-height: min(68vh, 760px);
      margin: 0 auto;
      object-fit: contain;
    }
    .tutorial-document-text {
      min-height: 360px;
      max-height: min(68vh, 760px);
      margin: 0;
      padding: 16px;
      overflow: auto;
      color: var(--text);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      line-height: 1.8;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 6px;
      font: inherit;
    }
    .tutorial-document-office {
      display: grid;
      min-height: 260px;
      padding: 24px;
      place-items: center;
      color: var(--warning);
      text-align: center;
      background: #fffaf0;
      border: 1px solid #fedf89;
      border-radius: 6px;
    }
    .tutorial-document-pdf.hidden,
    .tutorial-document-image.hidden,
    .tutorial-document-text.hidden,
    .tutorial-document-office.hidden { display: none; }
    @media (max-width: 980px) {
      #tutorialsView {
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
      }
    }
    @media (max-width: 820px) {
      #tutorialsView {
        width: min(100%, calc(100vw - 28px));
        grid-template-columns: minmax(0, 1fr);
      }
      .tutorial-documents-panel {
        position: static;
        max-height: none;
      }
      .tutorial-documents-panel .panel-body {
        max-height: 260px;
      }
      .tutorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .tutorial-video-shell {
        height: 360px;
      }
      .nav-tabs {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: thin;
      }
    }
    @media (max-width: 560px) {
      .tutorial-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .tutorial-detail-title {
        font-size: 19px;
      }
      .tutorial-detail-body {
        gap: 18px;
      }
      .tutorial-video-shell {
        height: 240px;
      }
    }

    /* Image workbench: target-site style frame, without sidebar/favorites folders. */
    #imageGenerateView {
      width: min(1540px, calc(100vw - 32px));
      min-height: calc(100vh - 82px);
      margin: 0 auto;
      padding: 72px 0 220px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 22px;
      align-items: stretch;
      background: transparent;
    }
    .image-workbench-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; min-height: 118px; padding: 12px 2px 12px; }
    .image-workbench-eyebrow { margin: 0 0 6px; color: #5f6f86; font-size: 12px; font-weight: 800; letter-spacing: 0; }
    .image-workbench-title { margin: 0; color: #111827; font-size: 30px; line-height: 1.16; letter-spacing: 0; }
    .image-workbench-subtitle { margin: 10px 0 0; max-width: 760px; color: #64748b; font-size: 14px; line-height: 1.65; }
    .image-workbench-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 240px; color: #526174; font-size: 12px; }
    .image-workbench-status span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid #d9e2ef; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
    .image-compose-panel { position: fixed; left: 50%; bottom: 28px; z-index: 65; width: min(980px, calc(100vw - 40px)); min-width: 0; overflow: visible; border: 1px solid rgba(207, 217, 231, .96); border-radius: 20px; background: rgba(255, 255, 255, .98); box-shadow: 0 22px 58px rgba(15,23,42,.18); transform: translateX(-50%); transition: border-color .16s ease, box-shadow .16s ease; }
    #imageGenerateView.hidden .image-compose-panel { display: none; }
    .image-compose-panel.dragging { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(78, 108, 210, .14), 0 22px 58px rgba(15,23,42,.18); }
    .image-compose-panel > h2 { display: none; }
    .image-task-heading h2 { display: flex; align-items: center; min-height: 42px; margin: 0; color: #111827; font-size: 16px; font-weight: 850; }
    .image-compose-panel .panel-body { padding: 0; }
    #imageGenerationForm { display: grid; gap: 0; }
    #imageGenerationForm .field { min-width: 0; margin: 0; }
    .image-prompt-field { padding: 18px 20px 10px; }
    .image-prompt-field label { display: none; }
    #imageGenerationForm textarea { width: 100%; min-height: 88px; max-height: 190px; padding: 0; resize: vertical; border: 0; outline: 0; box-shadow: none; font-size: 14px; line-height: 1.72; }
    #imageGenerationForm textarea:focus { border: 0; box-shadow: none; }
    .image-dock-toolbar { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 14px 14px; border-top: 1px solid #edf2f7; background: #fbfcfe; border-radius: 0 0 20px 20px; }
    .image-studio-canvas { min-width: 0; min-height: 0; padding: 0; }
    .image-studio-empty { grid-column: 1 / -1; display: grid; min-height: clamp(360px, 46vh, 520px); place-items: center; border: 1px dashed #cfd9e7; border-radius: 10px; color: var(--muted); text-align: center; background: #f8fafc; }
    .image-studio-empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }
    .image-studio-empty span { font-size: 12px; }
    .image-task-panel { min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .image-task-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
    .image-task-heading h2 { border-bottom: 0; }
    .image-task-note { color: #64748b; font-size: 12px; white-space: nowrap; }
    .image-task-toolbar { position: sticky; top: 72px; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 10px 26px rgba(15,23,42,.07); }
    .image-task-toolbar .task-filter-chips { margin: 0; }
    .image-task-summary, .image-task-pagination { display: none; }
    .image-task-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; align-items: start; min-height: clamp(360px, 46vh, 520px); padding: 0 0 28px; }
    .image-task-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #dce5f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
    .image-task-card:hover { border-color: #becce0; box-shadow: 0 8px 22px rgba(15,23,42,.1); transform: translateY(-1px); }
    .image-task-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #eef3f8; }
    .image-task-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; cursor: pointer; }
    .image-task-thumb-placeholder { display: grid; height: 100%; place-items: center; color: #6f7e91; font-size: 12px; background: linear-gradient(135deg, #f6f8fb, #e9eef6); }
    .image-task-thumb-status { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 5px; background: rgba(255,255,255,.94); color: #3657c9; font-size: 10px; font-weight: 850; box-shadow: 0 1px 3px rgba(15,23,42,.14); }
    .image-task-dimension { position: absolute; top: 8px; right: 8px; padding: 4px 7px; border-radius: 5px; background: rgba(15,23,42,.74); color: #fff; font-size: 10px; font-weight: 750; }
    .image-task-content { display: grid; gap: 7px; padding: 10px 10px 9px; min-width: 0; }
    .image-task-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
    .image-task-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f2937; font-size: 12px; font-weight: 800; }
    .image-task-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #7a8798; font-size: 10px; }
    .image-task-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .image-task-prompt, .image-task-error, .image-task-result-grid { display: none; }
    .image-task-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; border-top: 1px solid #eef2f7; background: #fbfcfe; }
    .image-task-actions button { min-height: 30px; padding: 0; border-radius: 6px; font-size: 0; }
    .image-task-actions button::before { font-size: 13px; line-height: 1; }
    .image-task-actions button[data-image-action="view"]::before { content: "◉"; }
    .image-task-actions button[data-image-action="download"]::before { content: "↓"; }
    .image-task-actions button[data-image-action="edit"]::before { content: "↺"; }
    .image-task-actions button[data-image-action="upload"]::before { content: "↑"; }
    .image-task-actions button[data-image-action="delete"]::before { content: "×"; }
    .image-dock-icon { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 6px; font-size: 0; }
    .image-dock-icon::before { font-size: 15px; line-height: 1; }
    #openImageReferenceBtn::before { content: "⌕"; transform: rotate(-35deg); display: inline-block; }
    #toggleImageParametersBtn::before { content: "☷"; }
    .image-platform-select { position: relative; margin-left: auto; }
    .image-provider-segment { display: flex; padding: 0; border: 0; border-radius: 0; background: transparent; }
    .image-provider-segment button { display: none; }
    .image-provider-segment button.active { display: inline-flex; min-height: 30px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #667085; box-shadow: none; font-size: 10px; font-weight: 700; }
    .image-provider-segment button.active::after { content: "⌄"; margin-left: 5px; }
    .image-platform-menu { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; min-width: 188px; overflow: hidden; border: 1px solid #dce3ed; border-radius: 7px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .14); }
    .image-platform-menu.hidden { display: none; }
    .image-platform-menu button { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 42px; padding: 0 11px; border: 0; border-bottom: 1px solid #edf1f5; background: #fff; color: var(--text); text-align: left; cursor: pointer; }
    .image-platform-menu button:last-child { border-bottom: 0; }
    .image-platform-menu button span { color: var(--muted); font-size: 10px; }
    .image-platform-menu button.active { color: var(--accent); background: #f4f7ff; }
    .image-generation-actions { display: flex; gap: 6px; align-items: center; }
    .image-generation-actions .primary { width: 32px; min-width: 32px; min-height: 32px; padding: 0; border-radius: 50%; font-size: 0; }
    .image-generation-actions .primary::before { content: "↑"; color: #fff; font-size: 16px; font-weight: 800; }
    #resetImageGenerationBtn { display: none; }
    .image-key-hint { display: none; }
    .image-reference-dropzone { display: none; }
    .image-reference-selected { display: flex; gap: 6px; max-width: 250px; overflow-x: auto; }
    .image-reference-selected .empty { display: none; }
    .image-reference-chip { flex: 0 0 36px; height: 36px; border-radius: 5px; }
    .image-reference-chip img { width: 36px; height: 36px; aspect-ratio: auto; }
    .image-reference-chip-name { display: none; }
    .image-reference-remove { top: 1px; right: 1px; width: 15px; height: 15px; min-height: 15px; border-radius: 50%; font-size: 11px; }
    .image-reference-toolbar { display: none; }
    .image-advanced-panel { display: grid; gap: 12px; padding: 12px 14px; border-top: 1px solid #e8edf4; background: #f8fafc; }
    .image-advanced-panel.hidden { display: none; }
    .image-advanced-panel.image-settings-mode .image-generation-params { display: none; }
    .image-generation-params { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .image-generation-params label { font-size: 10px; }
    .image-generation-params select { min-height: 32px; padding: 5px 7px; font-size: 11px; }
    .image-provider-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .image-provider-settings.hidden { display: none; }
    .image-provider-card { display: grid; gap: 7px; padding: 10px; border: 1px solid #dce4ee; border-radius: 6px; background: #fff; min-width: 0; }
    .image-provider-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .image-provider-card-title { font-size: 12px; font-weight: 800; }
    .image-provider-status { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
    .image-provider-card-actions { display: flex; gap: 5px; flex-wrap: wrap; }
    .image-provider-card-actions button { min-height: 27px; padding: 3px 7px; font-size: 10px; }
    .image-result-modal { width: min(1120px, calc(100vw - 32px)); border-radius: 8px; }
    .image-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
    .image-result-item { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
    .image-result-item.active { border-color: var(--accent); }
    .image-result-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; background: #eef2f7; cursor: pointer; }
    .image-result-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
    .image-result-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .image-result-stage { display: grid; place-items: center; margin-bottom: 14px; min-height: 260px; max-height: 58vh; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #f1f5f9; }
    .image-result-stage img { max-width: 100%; max-height: 54vh; object-fit: contain; }
    .image-rename-modal, .image-asset-modal { width: min(520px, calc(100vw - 32px)); border-radius: 8px; }
    .image-asset-scope { display: grid; gap: 8px; }
    .image-asset-scope label { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
    .image-asset-scope input { width: auto; }
    @media (max-width: 1100px) {
      #imageGenerateView { width: auto; grid-template-columns: 1fr; min-height: calc(100vh - 96px); margin: 0; padding: 48px 16px 220px; }
      .image-workbench-hero { align-items: flex-start; flex-direction: column; min-height: 100px; }
      .image-workbench-status { justify-content: flex-start; min-width: 0; }
      .image-provider-settings { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      #imageGenerateView { gap: 16px; padding: 24px 10px 210px; }
      .image-workbench-title { font-size: 22px; }
      .image-workbench-subtitle { font-size: 12px; }
      .image-compose-panel { bottom: 12px; width: calc(100vw - 20px); border-radius: 16px; }
      .image-task-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
      .image-task-heading h2 { min-height: 42px; font-size: 15px; }
      .image-task-note { white-space: normal; }
      .image-prompt-field { padding: 14px 14px 8px; }
      #imageGenerationForm textarea { min-height: 76px; max-height: 138px; }
      .image-dock-toolbar { min-height: 58px; padding: 9px 11px 12px; }
      .image-studio-empty { min-height: 330px; }
      .image-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 330px; padding: 10px 0 18px; }
      .image-reference-selected { max-width: 136px; }
      .image-generation-params { grid-template-columns: 1fr; }
      .image-task-toolbar { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 390px) {
      .image-task-list { grid-template-columns: 1fr; }
      .image-reference-selected { display: none; }
    }
    @media (max-width: 390px) {
      .image-task-list { grid-template-columns: 1fr; }
      .image-reference-selected { display: none; }
    }