:root {
      --bg: #f6f7ff;
      --bg-accent: #eef0ff;
      --panel: rgba(255,255,255,0.94);
      --panel-strong: #ffffff;
      --border: rgba(34, 36, 48, 0.08);
      --border-strong: rgba(34, 36, 48, 0.12);
      --text: #16181d;
      --muted: #7f8596;
      --soft: #f2f3fa;
      --accent: #ff8a5b;
      --accent-2: #ff6f61;
      --chip: #f4f5fb;
      --shadow: 0 18px 50px rgba(81, 88, 126, 0.10);
      --radius-lg: 30px;
      --radius-md: 22px;
      --radius-sm: 16px;
    }
    * { box-sizing: border-box; }
    html { background: var(--bg); }
    body {
      margin: 0;
      color: var(--text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at top, rgba(210, 215, 255, 0.72), transparent 42%),
        linear-gradient(180deg, #f5f6fe 0%, #fcfcff 28%, #ffffff 100%);
      min-height: 100vh;
    }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .page {
      max-width: 1380px;
      margin: 0 auto;
      padding: 0 18px 40px;
    }
    .top-toast {
      position: fixed;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 60;
      width: auto;
      max-width: min(420px, calc(100% - 36px));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 14px;
      border-radius: 14px;
      background: rgba(29, 33, 45, 0.92);
      color: #fff;
      text-align: center;
      font-size: 13px;
      line-height: 1.4;
      white-space: normal;
      box-shadow: 0 16px 36px rgba(29, 33, 45, 0.18);
      transition: opacity .25s ease, transform .25s ease;
    }
    .top-toast.is-hidden {
      opacity: 0;
      transform: translateX(-50%) translateY(-10px);
      pointer-events: none;
    }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
      padding-top: 18px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .brand-mark {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: block;
      flex: 0 0 auto;
      object-fit: cover;
      box-shadow: 0 10px 24px rgba(62, 76, 120, 0.16);
      background: #dff4ef;
    }
    .brand-name {
      display: block;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight: 700;
      font-size: 24px;
      line-height: 1;
      color: #21283a;
      white-space: nowrap;
    }
    .brand-lockup.is-header .brand-mark {
      width: 54px;
      height: 54px;
    }
    .brand-lockup.is-auth .brand-mark {
      width: 52px;
      height: 52px;
    }
    .top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      position: relative;
    }
    .top-actions-menu {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .top-actions-toggle {
      display: none;
      width: 38px;
      height: 38px;
      border: 1px solid var(--border);
      border-radius: 38px;
      background: rgba(255,255,255,0.76);
      box-shadow: 0 6px 16px rgba(75, 84, 121, 0.08);
      backdrop-filter: blur(10px);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      gap: 4px;
      flex-direction: column;
    }
    .top-actions-toggle span:not(.sr-only) {
      width: 16px;
      height: 2px;
      border-radius: 999px;
      background: #5a6170;
      display: block;
    }
    .nav-pill {
      min-height: 38px;
      padding: 0 13px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.6);
      color: #555b69;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(75, 84, 121, 0.05);
      backdrop-filter: blur(10px);
      cursor: pointer;
      font-size: 14px;
    }
    .quota-pill {
      min-height: 38px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(42, 111, 242, 0.14);
      background: rgba(246, 249, 255, 0.92);
      color: #4d5a79;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
    }
    .quota-pill strong {
      margin-left: 6px;
      color: #2a6ff2;
    }
    .account-trigger {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, #8f7cff, #4fb7ff);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(79, 122, 255, 0.22);
      cursor: pointer;
    }
    .hero {
      text-align: center;
      padding: 44px 0 18px;
    }
    .hero h1 {
      margin: 0;
      font-size: clamp(24px, 3vw, 40px);
      line-height: 1.1;
      letter-spacing: 0;
      font-weight: 800;
    }
    .compose-wrap {
      max-width: 860px;
      margin: 0 auto;
      padding-top: 10px;
    }
    .generation-mode-tabs-wrap {
      display: flex;
      justify-content: center;
      margin: 0 0 20px;
    }
    .generation-mode-tabs {
      display: inline-flex;
      gap: 8px;
      margin: 0;
      padding: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(255,255,255,0.85);
      box-shadow: var(--shadow);
    }
    .generation-mode-tab {
      border: 0;
      background: transparent;
      color: #667085;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 999px;
      cursor: pointer;
    }
    .generation-mode-tab.is-active {
      background: #fff;
      color: var(--brand);
      box-shadow: 0 4px 14px rgba(42,111,242,0.12);
    }
    .video-only-fields {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }
    .video-only-fields.is-hidden {
      display: none;
    }
    .video-tool-pill select {
      min-width: 112px;
    }
    #imagePrimaryRow.is-hidden {
      display: none;
    }
    .composer-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }
    .composer-actions .primary-row {
      flex: 1;
      min-width: 0;
    }
    .composer-actions .submit-wrap {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .submit-cost {
      font-size: 13px;
      font-weight: 600;
      color: #667085;
      white-space: nowrap;
    }
    .composer-actions .submit {
      flex-shrink: 0;
    }
    .quick-start.below-composer {
      justify-content: center;
      padding: 20px 0 0;
      margin-top: 4px;
    }
    .quick-start.below-composer.is-hidden {
      display: none;
    }
    .template-media video.previewable-media {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      background: #0f172a;
    }
    .template-count-badge.is-video {
      background: rgba(15,23,42,0.72);
    }
    .preview-toolbar.is-hidden {
      display: none;
    }
    .preview-strip video {
      max-width: min(92vw, 960px);
      max-height: min(72vh, 720px);
      border-radius: 12px;
      background: #000;
    }
    .composer-card {
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(255,255,255,0.75);
      border-radius: 20px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(20px);
      padding: 16px 14px 10px;
    }
    .composer-card textarea {
      width: 100%;
      min-height: 82px;
      border: 0;
      background: transparent;
      resize: vertical;
      outline: none;
      padding: 0 4px 8px;
      font-size: 15px;
      line-height: 1.55;
      color: var(--text);
    }
    .composer-card textarea::placeholder {
      color: #b4b8c4;
    }
    .composer-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .primary-row {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, auto)) minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }
    .mini-field {
      display: grid;
      gap: 6px;
    }
    .mini-field label {
      color: #7a8090;
      font-size: 12px;
    }
    .mini-field input,
    .mini-field select {
      width: 100%;
      min-height: 40px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.8);
      padding: 0 12px;
      color: var(--text);
      outline: none;
    }
    .settings-inline {
      display: grid;
      grid-template-columns: 180px 140px;
      gap: 8px;
      align-items: center;
    }
    .toolbar-left, .toolbar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .tool-icon {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.85);
      display: grid;
      place-items: center;
      color: #5f6473;
      box-shadow: 0 4px 10px rgba(84, 93, 130, 0.05);
      position: relative;
    }
    .tool-icon.palette::before {
      content: "";
      width: 18px;
      height: 18px;
      border: 2px solid currentColor;
      border-radius: 999px 999px 999px 4px;
      transform: rotate(35deg);
      position: absolute;
    }
    .tool-icon.move::before,
    .tool-icon.move::after {
      content: "";
      position: absolute;
      background: currentColor;
    }
    .tool-icon.move::before { width: 2px; height: 18px; }
    .tool-icon.move::after { width: 18px; height: 2px; }
    .tool-pill, .tool-select, .tool-counter {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.86);
      color: #5f6473;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 10px rgba(84, 93, 130, 0.05);
    }
    .tool-select select,
    .tool-pill select {
      border: 0;
      background: transparent;
      color: inherit;
      outline: none;
      font-size: 12px;
      min-width: 0;
    }
    .tool-select span,
    .tool-pill span:first-child {
      display: none;
    }
    .primary-spacer {
      min-width: 0;
      grid-column: -2;
    }
    .submit {
      width: 48px;
      height: 48px;
      min-height: 48px;
      min-width: 48px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(180deg, #3f8cff 0%, #2a6ff2 100%);
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(42, 111, 242, 0.24);
      grid-column: -1;
      justify-self: end;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .submit.is-inactive {
      background: linear-gradient(180deg, #cfd6e6 0%, #bcc5d8 100%);
      color: rgba(255,255,255,0.92);
      box-shadow: none;
      cursor: not-allowed;
    }
    .submit:disabled {
      opacity: .84;
    }
    .upload-input {
      display: none;
    }
    .settings-modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(28, 32, 49, 0.18);
      backdrop-filter: blur(12px);
      z-index: 20;
    }
    .settings-modal.open {
      display: flex;
    }
    .settings-card {
      width: min(520px, 100%);
      border-radius: 26px;
      background: rgba(255,255,255,0.96);
      box-shadow: 0 22px 60px rgba(78, 88, 126, 0.18);
      border: 1px solid rgba(255,255,255,0.8);
      padding: 20px;
      display: grid;
      gap: 16px;
    }
    .api-settings-card {
      width: min(760px, 100%);
      max-height: min(82vh, 760px);
      overflow: hidden;
    }
    .api-settings-tabs {
      display: inline-grid;
      grid-template-columns: repeat(2, minmax(0, auto));
      gap: 6px;
      align-self: start;
      padding: 4px;
      border-radius: 999px;
      background: rgba(241, 244, 253, 0.95);
      width: fit-content;
      max-width: 100%;
    }
    .api-settings-tab {
      min-height: 36px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #697084;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
    }
    .api-settings-tab span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      min-height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: rgba(117, 126, 147, 0.12);
      color: inherit;
      font-size: 11px;
      font-weight: 700;
    }
    .api-settings-tab.active {
      background: #fff;
      color: #242833;
      box-shadow: 0 6px 16px rgba(78, 88, 126, 0.08);
    }
    .api-settings-tab.active span {
      background: rgba(42, 111, 242, 0.1);
      color: #2a6ff2;
    }
    .api-settings-layout {
      display: block;
      min-height: 0;
    }
    .api-settings-section {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 12px;
      min-height: 0;
    }
    .api-settings-section[data-api-panel="form"] {
      max-height: min(58vh, 520px);
      overflow-y: auto;
      padding-right: 6px;
      padding-bottom: 22px;
    }
    .api-settings-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    .api-settings-section-head h4 {
      margin: 0;
      font-size: 16px;
      color: #252a37;
    }
    .api-settings-section-head span {
      color: #7f8596;
      font-size: 12px;
    }
    .api-endpoint-list {
      min-height: 0;
      max-height: min(54vh, 420px);
      overflow: auto;
      display: grid;
      gap: 10px;
      padding-right: 4px;
      padding-bottom: 18px;
    }
    .api-endpoint-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 14px;
      border: 1px solid rgba(34, 36, 48, 0.08);
      border-radius: 8px;
      background: rgba(247, 249, 255, 0.86);
    }
    .api-endpoint-item.is-active {
      border-color: rgba(42, 111, 242, 0.22);
      background: rgba(240, 246, 255, 0.96);
      box-shadow: inset 0 0 0 1px rgba(42, 111, 242, 0.06);
    }
    .api-endpoint-copy {
      min-width: 0;
      display: grid;
      gap: 8px;
    }
    .api-endpoint-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .api-endpoint-title-row strong {
      font-size: 14px;
      color: #202633;
    }
    .api-endpoint-state {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(117, 126, 147, 0.12);
      color: #697084;
      font-size: 12px;
      font-weight: 600;
    }
    .api-endpoint-state.is-active {
      background: rgba(42, 111, 242, 0.12);
      color: #2a6ff2;
    }
    .api-endpoint-meta {
      display: grid;
      gap: 6px;
      color: #6f7688;
      font-size: 12px;
      line-height: 1.45;
      word-break: break-all;
    }
    .api-endpoint-action {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .api-endpoint-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 8px;
    }
    .api-endpoint-item .api-test-result {
      margin-top: 2px;
    }
    .api-endpoint-action .ghost-btn[disabled] {
      opacity: 1;
      color: #2a6ff2;
      border-color: rgba(42, 111, 242, 0.16);
      background: rgba(42, 111, 242, 0.08);
      cursor: default;
    }
    .api-endpoint-empty {
      display: grid;
      gap: 6px;
      padding: 16px;
      border: 1px dashed rgba(34, 36, 48, 0.14);
      border-radius: 8px;
      color: #697084;
      background: rgba(249, 250, 255, 0.8);
    }
    .api-endpoint-empty strong {
      color: #252a37;
      font-size: 14px;
    }
    .api-endpoint-json-block {
      display: grid;
      gap: 8px;
      padding-top: 4px;
      border-top: 1px solid rgba(34, 36, 48, 0.08);
    }
    .api-endpoint-option-group {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      border: 0;
      min-width: 0;
    }
    .api-endpoint-option-group legend {
      padding: 0;
      font-size: 13px;
      font-weight: 600;
      color: #252a37;
    }
    .api-endpoint-option-hint {
      margin: 0;
      color: #7f8596;
      font-size: 12px;
      line-height: 1.45;
    }
    .api-endpoint-checkbox-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
      gap: 6px 8px;
    }
    .api-endpoint-checkbox-item {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 4px 8px;
      border: 1px solid rgba(34, 36, 48, 0.08);
      border-radius: 6px;
      background: rgba(247, 249, 255, 0.86);
      color: #4f5568;
      font-size: 11px;
      line-height: 1.35;
      cursor: pointer;
    }
    .api-endpoint-checkbox-item input {
      width: 13px;
      height: 13px;
      margin: 0;
      flex: 0 0 13px;
      accent-color: #2a6ff2;
    }
    .api-endpoint-checkbox-item span {
      min-width: 0;
    }
    .api-settings-card .settings-grid label.api-endpoint-checkbox-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      width: auto;
      min-height: 0;
      color: #4f5568;
      font-size: 11px;
    }
    .api-settings-card .settings-grid label.api-endpoint-checkbox-item input[type="checkbox"] {
      width: 14px;
      height: 14px;
      min-width: 14px;
      min-height: 14px;
      margin: 0;
      padding: 0;
      flex: 0 0 14px;
      border-radius: 3px;
      border: 1px solid rgba(34, 36, 48, 0.22);
      background: #fff;
      accent-color: #2a6ff2;
      box-sizing: border-box;
    }
    .api-endpoint-option-group.is-hidden {
      display: none;
    }
    .api-endpoint-json-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .api-endpoint-json-head label {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      color: #252a37;
    }
    .api-endpoint-json-hint {
      color: #7f8596;
      font-size: 12px;
      line-height: 1.45;
    }
    .api-endpoint-json-editor {
      width: 100%;
      min-height: 180px;
      padding: 12px 14px;
      border: 1px solid rgba(34, 36, 48, 0.1);
      border-radius: 8px;
      background: rgba(247, 249, 255, 0.92);
      color: #252a37;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      line-height: 1.55;
      resize: vertical;
      tab-size: 2;
    }
    .api-endpoint-json-editor:focus {
      outline: none;
      border-color: rgba(42, 111, 242, 0.35);
      box-shadow: 0 0 0 3px rgba(42, 111, 242, 0.08);
    }
    .api-endpoint-json-error {
      color: #d64545;
      font-size: 12px;
      line-height: 1.45;
    }
    .api-settings-card .settings-grid input,
    .api-settings-card .settings-grid select,
    .api-settings-card .ghost-btn,
    .api-settings-card .settings-actions .auth-submit {
      border-radius: 8px;
    }
    .api-settings-card .ghost-btn,
    .api-settings-card .auth-submit {
      min-height: 34px;
      padding: 0 12px;
      font-size: 13px;
      line-height: 1;
    }
    .api-settings-card .settings-actions .ghost-btn,
    .api-settings-card .settings-actions .auth-submit {
      min-width: 90px;
      min-height: 38px;
      padding: 0 14px;
      font-size: 14px;
    }
    .api-test-result {
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid rgba(34, 36, 48, 0.08);
      background: rgba(247, 249, 255, 0.92);
      color: #5f6474;
      font-size: 12px;
      line-height: 1.5;
    }
    .api-test-result.is-success {
      border-color: rgba(55, 166, 106, 0.18);
      background: rgba(241, 252, 245, 0.96);
      color: #277a4d;
    }
    .api-test-result.is-error {
      border-color: rgba(194, 77, 69, 0.18);
      background: rgba(255, 244, 242, 0.96);
      color: #b14d45;
    }
    .api-endpoint-actions {
      gap: 6px;
    }
    .api-endpoint-actions .ghost-btn,
    .api-endpoint-action .ghost-btn {
      min-width: 0;
      padding: 0 10px;
      font-size: 12px;
    }
    .api-settings-card .ghost-btn.is-danger {
      color: #c24d45;
      border-color: rgba(194, 77, 69, 0.18);
      background: rgba(255, 242, 240, 0.92);
    }
    .api-settings-card .ghost-btn.is-danger:hover {
      background: rgba(255, 236, 233, 0.98);
    }
    .is-hidden {
      display: none !important;
    }
    .auth-modal-card {
      width: min(430px, 100%);
      padding: 28px 28px 24px;
      border-radius: 22px;
      gap: 18px;
      overflow: hidden;
    }
    .settings-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .settings-head h3 {
      margin: 0;
      font-size: 20px;
    }
    .auth-head {
      justify-content: flex-start;
      position: relative;
      min-height: 56px;
      padding-right: 56px;
    }
    .auth-brand {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-width: 0;
      max-width: 100%;
    }
    .auth-brand .brand-lockup {
      max-width: 100%;
      gap: 8px;
    }
    .auth-brand .brand-lockup.is-auth .brand-mark {
      width: 44px;
      height: 44px;
    }
    .auth-brand .brand-name {
      font-size: 24px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .settings-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }
    .settings-close {
      width: 38px;
      height: 38px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,0.88);
      color: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      line-height: 0;
      padding: 0;
      position: relative;
    }
    .settings-close::before {
      content: "×";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5d6372;
      font-size: 26px;
      line-height: 1;
      transform: translateY(-1px);
    }
    .auth-head .settings-close {
      position: absolute;
      top: 0;
      right: 0;
    }
    .settings-grid {
      display: grid;
      gap: 12px;
    }
    .settings-grid label {
      color: #7a8090;
      font-size: 13px;
      display: grid;
      gap: 8px;
    }
    .settings-grid input {
      width: 100%;
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.88);
      padding: 0 14px;
      color: var(--text);
      outline: none;
    }
    .settings-grid select {
      width: 100%;
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.88);
      padding: 0 14px;
      color: var(--text);
      outline: none;
    }
    .settings-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    .ghost-btn {
      min-height: 40px;
      padding: 0 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.86);
      color: #59606f;
      cursor: pointer;
    }
    .settings-actions .ghost-btn,
    .settings-actions .auth-submit {
      min-width: 104px;
      min-height: 44px;
      padding: 0 18px;
      margin: 0;
      border-radius: 8px;
      flex: 0 0 auto;
    }
    .generate-modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(20, 24, 35, 0.22);
      backdrop-filter: blur(10px);
      z-index: 30;
    }
    .generate-modal.open {
      display: flex;
    }
    .generate-card {
      width: min(480px, 100%);
      padding: 18px;
      border-radius: 26px;
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(255,255,255,0.78);
      box-shadow: 0 24px 60px rgba(48, 58, 98, 0.2);
      display: grid;
      gap: 14px;
    }
    .generate-card h3 {
      margin: 0;
      font-size: 18px;
    }
    .generate-card p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .generate-card p #generateElapsed {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(42, 111, 242, 0.08);
      color: #2a6ff2;
      font-size: 12px;
      font-weight: 600;
    }
    .generate-preview {
      position: relative;
      min-height: 240px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(133, 170, 242, 0.4);
      background:
        radial-gradient(circle at 50% 50%, rgba(232, 240, 255, 0.98), rgba(219, 231, 253, 0.98) 58%, #dbe7fd 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.42),
        inset 0 16px 34px rgba(255,255,255,0.34),
        0 18px 34px rgba(92, 113, 168, 0.14);
    }
    .generate-preview::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(182, 196, 225, 0.76), transparent 18%),
        radial-gradient(circle at 50% 50%, rgba(154, 171, 208, 0.52), transparent 44%);
      filter: blur(22px);
      opacity: 0.9;
      animation: previewCorePulse 4.2s ease-in-out infinite alternate;
    }
    .generate-preview::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.38), transparent 34%),
        linear-gradient(112deg,
          transparent 18%,
          rgba(255,255,255,0.24) 32%,
          rgba(255,255,255,0.62) 45%,
          rgba(226, 238, 255, 0.34) 52%,
          transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
      opacity: 0.96;
      filter: blur(1px);
      animation: previewSheen 3.9s ease-in-out infinite;
    }
    .generate-preview-ambient {
      position: absolute;
      inset: -18%;
      background:
        radial-gradient(circle at 50% 50%, rgba(183, 197, 226, 0.62), transparent 18%),
        radial-gradient(circle at 34% 38%, rgba(172, 188, 219, 0.46), transparent 24%),
        radial-gradient(circle at 66% 62%, rgba(160, 177, 210, 0.42), transparent 26%);
      filter: blur(56px);
      animation: ambientPulse 5.4s ease-in-out infinite alternate;
    }
    .generate-light-pass,
    .generate-particles,
    .generate-burst {
      position: absolute;
      inset: 0;
    }
    .generate-light-pass {
      pointer-events: none;
      z-index: 1;
      mix-blend-mode: screen;
    }
    .generate-light-pass-a {
      background:
        linear-gradient(118deg,
          transparent 14%,
          rgba(255,255,255,0.12) 30%,
          rgba(255,255,255,0.44) 40%,
          rgba(255,255,255,0.82) 48%,
          rgba(214, 231, 255, 0.42) 54%,
          transparent 68%);
      filter: blur(12px);
      transform: translateX(-38%) translateY(-8%) rotate(-6deg);
      animation: lightSweep 3.2s ease-in-out infinite;
    }
    .generate-light-pass-b {
      background:
        linear-gradient(126deg,
          transparent 22%,
          rgba(255,255,255,0.08) 38%,
          rgba(255,255,255,0.34) 46%,
          rgba(255,255,255,0.72) 50%,
          rgba(255,255,255,0.12) 56%,
          transparent 68%);
      filter: blur(5px);
      transform: translateX(-52%) translateY(6%) rotate(-8deg);
      animation: lightSweepFine 2.5s ease-in-out infinite;
    }
    .generate-light-pass-b::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(126deg,
          transparent 42%,
          rgba(255,255,255,0.88) 48%,
          rgba(255,255,255,0.22) 51%,
          transparent 56%);
      filter: blur(2px);
      opacity: 0.92;
      animation: lightSweepSpark 1.8s ease-in-out infinite;
    }
    .generate-particles {
      opacity: 0.52;
      filter: blur(26px);
      animation: vaporDrift 14s ease-in-out infinite alternate;
      z-index: 2;
    }
    .generate-particles-a {
      background-image:
        radial-gradient(circle at 46% 44%, rgba(187, 200, 226, 0.52) 0 4%, rgba(187, 200, 226, 0.26) 10%, transparent 22%),
        radial-gradient(circle at 56% 38%, rgba(176, 190, 218, 0.44) 0 4.8%, rgba(176, 190, 218, 0.22) 12%, transparent 24%),
        radial-gradient(circle at 36% 58%, rgba(164, 179, 207, 0.38) 0 5.6%, rgba(164, 179, 207, 0.18) 14%, transparent 28%),
        radial-gradient(circle at 64% 62%, rgba(197, 208, 228, 0.32) 0 6%, transparent 30%);
      animation-duration: 14s;
    }
    .generate-particles-b {
      background-image:
        radial-gradient(circle at 50% 48%, rgba(176, 190, 218, 0.42) 0 5%, rgba(176, 190, 218, 0.18) 12%, transparent 24%),
        radial-gradient(circle at 42% 34%, rgba(198, 208, 228, 0.3) 0 4%, transparent 18%),
        radial-gradient(circle at 61% 66%, rgba(164, 179, 207, 0.28) 0 5%, transparent 20%),
        radial-gradient(circle at 70% 44%, rgba(186, 198, 220, 0.22) 0 4.2%, transparent 18%);
      animation-direction: reverse;
      animation-duration: 16s;
      opacity: 0.48;
    }
    .generate-burst {
      display: grid;
      place-items: center;
      pointer-events: none;
      z-index: 3;
      filter: blur(22px);
    }
    .generate-burst span {
      position: absolute;
      width: 108px;
      height: 108px;
      left: 50%;
      top: 50%;
      margin-left: -54px;
      margin-top: -54px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 38% 34%, rgba(184, 197, 223, 0.42) 0 12%, rgba(184, 197, 223, 0.26) 24%, transparent 54%),
        radial-gradient(circle at 58% 44%, rgba(170, 184, 212, 0.36) 0 18%, rgba(170, 184, 212, 0.16) 30%, transparent 58%),
        radial-gradient(circle at 48% 60%, rgba(160, 174, 202, 0.28) 0 16%, transparent 50%);
      box-shadow:
        -68px -42px 0 18px rgba(176, 190, 218, 0.16),
        58px -46px 0 20px rgba(186, 198, 220, 0.16),
        86px 10px 0 22px rgba(164, 178, 206, 0.14),
        42px 68px 0 20px rgba(186, 198, 220, 0.16),
        -26px 88px 0 22px rgba(164, 178, 206, 0.14),
        -82px 34px 0 20px rgba(186, 198, 220, 0.16),
        -74px -20px 0 22px rgba(160, 174, 202, 0.14),
        10px -90px 0 20px rgba(198, 208, 228, 0.16);
      animation: steamExpand 6.4s ease-out infinite;
      opacity: 0;
    }
    .generate-burst span::before {
      content: "";
      position: absolute;
      inset: -48px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 42% 42%, rgba(186, 198, 220, 0.24) 0 18%, transparent 48%),
        radial-gradient(circle at 60% 56%, rgba(168, 182, 210, 0.2) 0 26%, transparent 60%);
      filter: blur(18px);
    }
    .generate-burst span:nth-child(2) {
      animation-delay: 1.7s;
      transform: rotate(24deg);
    }
    .generate-burst span:nth-child(3) {
      animation-delay: 3.4s;
      transform: rotate(-19deg);
    }
    .generate-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #5f6474;
      font-size: 13px;
    }
    @keyframes ambientPulse {
      from { opacity: 0.42; transform: scale(0.94); }
      to { opacity: 0.74; transform: scale(1.05); }
    }
    @keyframes previewCorePulse {
      0% { opacity: 0.58; transform: scale(0.92); }
      50% { opacity: 0.86; transform: scale(1.03); }
      100% { opacity: 0.66; transform: scale(1.08); }
    }
    @keyframes previewSheen {
      0% {
        opacity: 0.3;
        transform: translateX(-38%) translateY(-4%) rotate(-6deg);
      }
      42% {
        opacity: 1;
      }
      100% {
        opacity: 0.24;
        transform: translateX(36%) translateY(4%) rotate(-2deg);
      }
    }
    @keyframes vaporDrift {
      0% { transform: translate3d(-4px, 6px, 0) scale(0.98); }
      100% { transform: translate3d(6px, -8px, 0) scale(1.03); }
    }
    @keyframes lightSweep {
      0% {
        opacity: 0;
        transform: translateX(-52%) translateY(-10%) rotate(-8deg);
      }
      14% {
        opacity: 1;
      }
      44% {
        opacity: 0.72;
      }
      100% {
        opacity: 0;
        transform: translateX(50%) translateY(10%) rotate(-3deg);
      }
    }
    @keyframes lightSweepFine {
      0% {
        opacity: 0;
        transform: translateX(-64%) translateY(8%) rotate(-10deg);
      }
      16% {
        opacity: 0.96;
      }
      42% {
        opacity: 0.52;
      }
      100% {
        opacity: 0;
        transform: translateX(58%) translateY(-6%) rotate(-4deg);
      }
    }
    @keyframes lightSweepSpark {
      0% {
        opacity: 0;
        transform: translateX(-72%) rotate(-10deg);
      }
      26% {
        opacity: 1;
      }
      48% {
        opacity: 0.42;
      }
      100% {
        opacity: 0;
        transform: translateX(66%) rotate(-4deg);
      }
    }
    @keyframes steamExpand {
      0% {
        transform: scale(0.42);
        opacity: 0;
      }
      16% {
        opacity: 0.4;
      }
      48% {
        opacity: 0.24;
      }
      100% {
        transform: scale(2.1);
        opacity: 0;
      }
    }
    @keyframes buttonSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .meta-row {
      margin-top: 12px;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 12px;
    }
    .meta-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .reference-upload {
      width: 54px;
      height: 54px;
      border-radius: 8px;
      border: 1px dashed rgba(42, 111, 242, 0.26);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,255,0.95));
      color: #2a6ff2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
      flex: 0 0 auto;
    }
    .reference-upload span {
      font-size: 28px;
      line-height: 1;
      transform: translateY(-1px);
    }
    .reference-strip {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: wrap;
      min-height: 64px;
      margin-bottom: 2px;
    }
    #referencePreviewList {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #referencePreviewList:empty,
    #referencePreviewList[hidden] {
      display: none;
    }
    .reference-preview {
      position: relative;
      width: 54px;
      height: 54px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(34, 36, 48, 0.08);
      background: rgba(240, 243, 250, 0.92);
      box-shadow: 0 8px 20px rgba(84, 93, 130, 0.06);
      flex: 0 0 auto;
    }
    .reference-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .reference-preview button {
      position: absolute;
      top: 0;
      right: 0;
      width: 18px;
      height: 18px;
      border: 0;
      border-radius: 999px;
      background: rgba(17, 22, 36, 0.7);
      color: #fff;
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 12px;
      line-height: 1;
      padding: 0;
    }
    .task-chip, .status-chip {
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      border: 1px solid var(--border);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .task-chip-label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .task-chip-dismiss {
      width: 20px;
      height: 20px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #98a2b3;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .task-chip-dismiss:hover {
      color: #667085;
      background: rgba(15, 23, 42, 0.06);
    }
    .status-banner {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.68);
      color: #5c6171;
      font-size: 12px;
      line-height: 1.6;
    }
    .status-banner-success {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: rgba(236, 248, 240, 0.95);
      border-color: rgba(82, 196, 128, 0.28);
      color: #2f6b45;
    }
    .status-banner-text {
      flex: 1;
      min-width: 0;
    }
    .status-banner-action {
      flex-shrink: 0;
      min-height: 32px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(180deg, #3f8cff 0%, #2a6ff2 100%);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(42, 111, 242, 0.18);
    }
    .status-banner-action:hover {
      filter: brightness(1.03);
    }
    .status-banner.error {
      color: #b45d51;
      background: rgba(255, 246, 244, 0.95);
      border-color: rgba(236, 139, 121, 0.28);
    }
    .quick-start {
      display: flex;
      justify-content: center;
      padding: 8px 0 12px;
    }
    .quick-grid {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .quick-chip {
      min-height: 36px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.7);
      color: #6e7383;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(84, 93, 130, 0.04);
      cursor: pointer;
      font-size: 14px;
    }
    .templates {
      padding-top: 110px;
    }
    .templates-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }
    .panel-tabs {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .panel-tab {
      min-height: 32px;
      padding: 0 0 10px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: #697084;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
    }
    .panel-tab.is-active {
      background: transparent;
      border-color: #2a6ff2;
      color: #2a6ff2;
      font-weight: 700;
    }
    .templates-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .templates-head h3 {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
    }
    .templates-filter {
      min-height: 40px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(244, 245, 251, 0.92);
      color: #6b7080;
      display: inline-flex;
      align-items: center;
    }
    .admin-panel {
      border-radius: 24px;
      border: 1px solid rgba(34, 36, 48, 0.06);
      background: rgba(255,255,255,0.82);
      box-shadow: 0 12px 28px rgba(78, 88, 126, 0.06);
      padding: 18px;
      display: grid;
      gap: 14px;
    }
    .panel-content.is-hidden {
      display: none;
    }
    .admin-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .admin-head h4 {
      margin: 0;
      font-size: 18px;
    }
    .admin-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
    }
    .admin-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }
    .admin-table th,
    .admin-table td {
      padding: 12px 10px;
      border-bottom: 1px solid rgba(34, 36, 48, 0.06);
      text-align: left;
      font-size: 13px;
      vertical-align: middle;
    }
    .admin-table th {
      color: #73798a;
      font-weight: 600;
    }
    .admin-table td strong {
      font-size: 14px;
      color: #222632;
      word-break: break-word;
    }
    .admin-table tr:last-child td {
      border-bottom: 0;
    }
    .admin-user-form {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .admin-user-form input {
      width: 132px;
      min-height: 36px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.9);
      padding: 0 10px;
      color: var(--text);
    }
    .admin-user-form input[type="number"] {
      width: 86px;
    }
    .admin-user-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-items: end;
      justify-content: flex-end;
    }
    .admin-user-delete-form {
      justify-content: flex-end;
    }
    .admin-badge {
      display: inline-flex;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(42, 111, 242, 0.1);
      color: #2a6ff2;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
    }
    .auth-switch {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(241, 244, 253, 0.95);
    }
    .auth-switch button {
      min-height: 38px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #697084;
      cursor: pointer;
    }
    .auth-switch button.active {
      background: #fff;
      color: #242833;
      box-shadow: 0 6px 16px rgba(78, 88, 126, 0.08);
    }
    .auth-form {
      display: grid;
      gap: 14px;
    }
    .hidden-auth {
      display: none;
    }
    .auth-form label,
    .account-panel label {
      color: #7a8090;
      font-size: 13px;
      display: grid;
      gap: 8px;
    }
    .auth-form input,
    .account-panel input {
      width: 100%;
      min-height: 44px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.88);
      padding: 0 14px;
      color: var(--text);
      outline: none;
    }
    .auth-submit {
      min-height: 42px;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(180deg, #3f8cff 0%, #2a6ff2 100%);
      color: #fff;
      cursor: pointer;
      font-weight: 600;
      margin-top: 8px;
      margin-bottom: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: opacity .2s ease;
    }
    .auth-submit.is-loading {
      pointer-events: none;
      opacity: 0.92;
    }
    .auth-submit.is-loading::before {
      content: "";
      width: 15px;
      height: 15px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.34);
      border-top-color: #fff;
      animation: buttonSpin 0.8s linear infinite;
      flex: 0 0 auto;
    }
    .support-card {
      width: min(360px, 100%);
      padding: 24px;
      border-radius: 22px;
      justify-items: center;
      text-align: center;
      gap: 14px;
      position: relative;
    }
    .support-card h3 {
      margin: 0;
      font-size: 22px;
    }
    .support-card p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }
    .support-qr {
      width: min(240px, 72vw);
      height: auto;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(34, 36, 48, 0.06);
      box-shadow: 0 10px 24px rgba(78, 88, 126, 0.08);
      display: block;
    }
    .support-card .settings-close {
      position: absolute;
      top: 16px;
      right: 16px;
    }
    .account-panel {
      display: grid;
      gap: 14px;
    }
    .account-summary {
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(238, 244, 255, 0.96), rgba(255,255,255,0.96));
      border: 1px solid rgba(42, 111, 242, 0.1);
      font-size: 14px;
      line-height: 1.95;
      color: #4f5667;
    }
    .account-summary strong {
      display: block;
      font-size: 15px;
      color: #212534;
      margin-bottom: 6px;
      font-weight: 700;
    }
    .account-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .site-footer {
      margin-top: 34px;
      padding: 18px 0 10px;
      color: #8c93a5;
      font-size: 13px;
      text-align: center;
      line-height: 1.8;
    }
    .template-grid {
      --template-columns: 6;
      --template-gap: 12px;
      position: relative;
    }
    .template-card {
      position: relative;
      width: 100%;
      display: block;
      margin: 0 0 var(--template-gap);
      border-radius: 20px;
      overflow: hidden;
      background: linear-gradient(180deg, #f0f1f8, #e7e9f3);
      box-shadow: 0 12px 28px rgba(78, 88, 126, 0.08);
    }
    .template-card.has-image {
      background: #e7e9f3;
    }
    .template-media {
      position: relative;
      overflow: hidden;
    }
    .template-count-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 2;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(29, 33, 45, 0.78);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 18px rgba(18, 21, 31, 0.18);
    }
    .template-card img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
      background: rgba(237, 240, 248, 0.96);
    }
    .template-card .template-meta-panel {
      display: grid;
      gap: 8px;
      padding: 12px 12px 14px;
      background: rgba(255,255,255,0.96);
    }
    .template-card .template-meta-line {
      font-size: 12px;
      line-height: 1.6;
      color: #687084;
    }
    .template-card .template-meta-line strong {
      color: #222632;
      font-weight: 700;
    }
    .template-card .template-prompt {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }
    .template-card .template-prompt.is-expanded {
      display: block;
      -webkit-line-clamp: unset;
      overflow: visible;
    }
    .template-prompt-toggle {
      margin-top: -2px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #5c78c9;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      justify-self: end;
      cursor: pointer;
      font-size: 12px;
      line-height: 1.2;
    }
    .template-prompt-toggle[hidden] {
      display: none;
    }
    .template-prompt-toggle::after {
      content: "";
      width: 7px;
      height: 7px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-1px) rotate(45deg);
      transition: transform .16s ease;
      flex: 0 0 auto;
    }
    .template-prompt-toggle[aria-expanded="true"]::after {
      transform: translateY(1px) rotate(-135deg);
    }
    .template-fallback {
      position: relative;
      min-height: var(--placeholder-height, 320px);
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.9)),
        linear-gradient(135deg, #dee5ff, #f3f5ff 42%, #ffffff);
    }
    .template-fallback.dark {
      background:
        linear-gradient(180deg, rgba(17,22,36,0.04), rgba(17,22,36,0.22)),
        linear-gradient(180deg, #202736, #1a1d22 60%, #25262a);
      color: #fff;
    }
    .template-fallback.blue {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.18)),
        linear-gradient(180deg, #2a70d6, #4bb0ff 62%, #e4f6ff);
      color: #fff;
    }
    .template-fallback.paper {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.94)),
        linear-gradient(180deg, #f4ede6, #fffaf5);
    }
    .template-fallback.edu {
      background:
        linear-gradient(180deg, rgba(9, 20, 44, 0.05), rgba(9, 20, 44, 0.72)),
        linear-gradient(180deg, #173d7e, #243a5c 70%, #0e1422);
      color: #fff;
    }
    .template-fallback.chat {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.88)),
        linear-gradient(180deg, #fff7ec, #fffdf8);
      color: #3e342f;
    }
    .template-fallback.industry {
      background:
        linear-gradient(180deg, rgba(9, 16, 27, 0.08), rgba(9, 16, 27, 0.18)),
        linear-gradient(180deg, #3f88ea, #6ec2ff 60%, #eff9ff);
      color: #fff;
    }
    .template-fallback.editorial {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.94)),
        linear-gradient(180deg, #f7f1eb, #fffdfa);
      color: #2b2623;
    }
    .template-fallback.brand {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.88)),
        linear-gradient(180deg, #ecf2ff, #f9fbff);
      color: #2a3551;
    }
    .template-fallback.deck {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.9)),
        linear-gradient(180deg, #eef6ff, #ffffff);
      color: #24354c;
    }
    .template-topline {
      display: inline-flex;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.35);
      background: rgba(255,255,255,0.24);
      align-items: center;
      width: fit-content;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .template-copy h4 {
      margin: 0 0 10px;
      font-size: 18px;
      line-height: 1.15;
    }
    .template-copy p {
      margin: 0;
      font-size: 12px;
      line-height: 1.7;
      color: inherit;
      opacity: 0.82;
    }
    .template-visual {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }
    .template-visual .bar {
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.32);
      width: 72%;
    }
    .template-visual .bar.short { width: 46%; }
    .template-visual .card-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .template-visual .mini-card {
      min-height: 78px;
      border-radius: 16px;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.22);
    }
    .template-visual .chat-stack {
      display: grid;
      gap: 8px;
    }
    .template-visual .bubble {
      max-width: 82%;
      min-height: 52px;
      border-radius: 18px;
      background: rgba(255,255,255,0.8);
      border: 1px solid rgba(112, 112, 112, 0.08);
      align-self: start;
    }
    .template-visual .bubble.alt {
      margin-left: auto;
      background: rgba(201, 255, 169, 0.88);
    }
    .template-visual .panel-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 8px;
    }
    .template-visual .panel-grid .mini-card {
      min-height: 102px;
    }
    .template-visual .editorial-block {
      min-height: 190px;
      border-radius: 18px;
      border: 1px solid rgba(56, 41, 35, 0.08);
      background: rgba(255,255,255,0.55);
      padding: 14px;
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .template-visual .editorial-block .line {
      height: 8px;
      border-radius: 999px;
      background: rgba(56, 41, 35, 0.16);
    }
    .template-visual .editorial-block .line.long { width: 88%; }
    .template-visual .editorial-block .line.mid { width: 64%; }
    .template-visual .editorial-block .line.short { width: 42%; }
    .template-actions {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: flex;
      gap: 8px;
      z-index: 2;
      opacity: 0;
      transform: translateY(6px);
      transition: .16s ease;
    }
    .template-card:hover .template-actions {
      opacity: 1;
      transform: translateY(0);
    }
    .action-btn {
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.6);
      background: rgba(255,255,255,0.78);
      color: #4e5361;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 6px 14px rgba(78, 88, 126, 0.10);
    }
    .action-btn.delete {
      border-color: rgba(255,255,255,0.62);
      background: rgba(29, 33, 45, 0.82);
      color: #fff;
    }
    .empty-gallery {
      min-height: 300px;
      border-radius: 24px;
      border: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.82), rgba(246,248,255,0.92)),
        linear-gradient(135deg, #f2f5ff, #ffffff);
      display: grid;
      place-items: center;
      color: #8c93a5;
      box-shadow: 0 10px 24px rgba(78, 88, 126, 0.06);
    }
    .empty-gallery span {
      display: inline-flex;
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px dashed rgba(90, 102, 140, 0.22);
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 600;
      background: rgba(255,255,255,0.8);
    }
    .gallery-load-status {
      padding: 10px 0 18px;
      color: #8c93a5;
      font-size: 12px;
      text-align: center;
      line-height: 1.6;
    }
    .gallery-load-status.is-hidden,
    .gallery-sentinel.is-hidden {
      display: none;
    }
    .gallery-sentinel {
      width: 100%;
      height: 1px;
    }
    .preview-modal {
      position: fixed;
      inset: 0;
      display: none;
      background: rgba(15, 19, 30, 0.92);
      backdrop-filter: blur(14px);
      z-index: 60;
    }
    .preview-modal.open {
      display: block;
    }
    .preview-frame {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .preview-toolbar {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px;
      border-radius: 999px;
      background: rgba(30, 35, 49, 0.78);
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(16px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.2);
      z-index: 2;
      white-space: nowrap;
      flex-wrap: nowrap;
    }
    .preview-tool {
      min-width: 38px;
      height: 34px;
      padding: 0 11px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      background: rgba(255,255,255,0.94);
      color: #2b3140;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }
    .preview-stage {
      position: absolute;
      inset: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      touch-action: none;
    }
    .preview-stage.is-dragging {
      cursor: grabbing;
    }
    .preview-loader {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      min-width: 148px;
      min-height: 92px;
      padding: 18px 20px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(24, 28, 40, 0.82);
      color: rgba(255,255,255,0.86);
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      backdrop-filter: blur(14px);
      box-shadow: 0 18px 42px rgba(0,0,0,0.24);
      z-index: 1;
      pointer-events: none;
      font-size: 14px;
    }
    .preview-loader-spinner {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.2);
      border-top-color: rgba(255,255,255,0.92);
      animation: buttonSpin 0.9s linear infinite;
      flex: 0 0 auto;
    }
    .preview-modal.is-loading .preview-loader {
      display: inline-flex;
    }
    .preview-canvas {
      position: relative;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: flex-start;
      justify-content: center;
      max-width: calc(100vw - 40px);
      max-height: calc(100vh - 200px);
      min-width: min(68vw, 360px);
      min-height: min(52vh, 520px);
      opacity: 1;
      transition: opacity .14s ease;
    }
    .preview-modal.is-loading .preview-canvas {
      opacity: 0;
    }
    .preview-strip {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      justify-content: center;
    }
    .preview-strip img {
      width: auto;
      height: auto;
      max-width: none;
      max-height: 100%;
      object-fit: contain;
      border-radius: 14px;
      display: block;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
      background: rgba(255,255,255,0.04);
      transform-origin: center center;
      will-change: transform;
      user-select: none;
      -webkit-user-drag: none;
      flex: 0 0 auto;
    }
    .preview-tool:disabled {
      cursor: default;
      opacity: 0.52;
      box-shadow: none;
    }
    .preview-actions {
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: nowrap;
      padding: 6px;
      border-radius: 999px;
      background: rgba(30, 35, 49, 0.72);
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(16px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.2);
      z-index: 2;
      white-space: nowrap;
    }
    .preview-actions form {
      margin: 0;
    }
    .preview-downloads {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      justify-content: center;
    }
    .preview-actions .action-btn {
      min-height: 34px;
      padding: 0 12px;
      border-color: rgba(255,255,255,0.26);
      background: rgba(255,255,255,0.92);
      font-size: 13px;
    }
    .preview-actions .action-btn.delete {
      border-color: rgba(255,255,255,0.22);
      background: rgba(29, 33, 45, 0.88);
    }
    .preview-reference {
      position: absolute;
      left: 16px;
      bottom: 16px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(30, 35, 49, 0.72);
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(16px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.2);
      z-index: 2;
    }
    .preview-reference.is-hidden {
      display: none;
    }
    .preview-reference-label {
      color: rgba(255,255,255,0.82);
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }
    .preview-reference-list {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .preview-reference-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255,255,255,0.08);
    }
    .preview-reference-link img {
      display: block;
      width: 56px;
      height: 56px;
      object-fit: cover;
    }
    .preview-close {
      position: absolute;
      top: 10px;
      right: 14px;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: #2b3140;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(0,0,0,0.18);
      z-index: 3;
    }
    @media (max-width: 1280px) {
      .compose-wrap {
        max-width: 100%;
      }
      .template-grid {
        --template-columns: 5;
      }
    }
    @media (max-width: 980px) {
      .primary-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .primary-spacer {
        display: none;
      }
      .template-grid {
        --template-columns: 4;
      }
    }
    @media (max-width: 720px) {
      .page {
        padding: 14px 14px 42px;
      }
      .topbar {
        margin-bottom: 24px;
        align-items: center;
        flex-direction: row;
        padding-top: 0;
      }
      .brand {
        flex: 0 1 auto;
        min-width: 0;
      }
      .brand-lockup {
        gap: 8px;
      }
      .brand-lockup.is-header .brand-mark {
        width: 42px;
        height: 42px;
      }
      .brand-lockup.is-header .brand-name {
        font-size: 20px;
      }
      .top-actions {
        margin-left: auto;
        flex: 0 0 auto;
      }
      .top-actions-toggle {
        display: inline-flex;
      }
      .top-actions-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 164px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.8);
        background: rgba(255,255,255,0.94);
        box-shadow: 0 18px 40px rgba(65, 76, 120, 0.18);
        backdrop-filter: blur(18px);
        z-index: 8;
      }
      .top-actions.is-open .top-actions-menu {
        display: flex;
      }
      .top-actions-menu .nav-pill,
      .top-actions-menu .quota-pill {
        width: 100%;
        justify-content: center;
      }
      .top-actions-menu .account-trigger {
        align-self: center;
      }
      .hero {
        padding-top: 24px;
      }
      .composer-card {
        padding: 16px 14px 14px;
      }
      .primary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
      }
      .tool-pill,
      .tool-select {
        width: 100%;
        min-width: 0;
      }
      .tool-select select,
      .tool-pill select {
        width: 100%;
      }
      .primary-spacer {
        display: none;
      }
      .submit {
        grid-column: 1 / -1;
        justify-self: center;
      }
      .reference-strip {
        width: 100%;
        margin-bottom: 8px;
      }
      .quick-grid {
        display: grid;
        width: 100%;
        max-width: 360px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
      }
      .quick-chip {
        min-height: 34px;
        min-width: 0;
        padding: 0 8px;
        font-size: 14px;
        grid-column: span 2;
      }
      .quick-chip:nth-child(4) {
        grid-column: 2 / span 2;
      }
      .quick-chip:nth-child(5) {
        grid-column: 4 / span 2;
      }
      .template-grid {
        --template-columns: 2;
        --template-gap: 10px;
      }
      .template-actions {
        right: 8px;
        bottom: 8px;
        gap: 6px;
        opacity: 1;
        transform: none;
      }
      .action-btn {
        min-height: 30px;
        padding: 0 9px;
        font-size: 12px;
      }
      .admin-panel {
        padding: 14px;
        overflow: hidden;
      }
      .admin-head {
        align-items: flex-start;
        flex-direction: column;
      }
      .admin-panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .admin-table {
        min-width: 760px;
        table-layout: auto;
      }
      .admin-table th {
        white-space: nowrap;
      }
      .admin-table td {
        white-space: normal;
      }
      .admin-table td strong {
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      .admin-table td::before {
        content: none;
      }
      .admin-user-actions,
      .admin-user-delete-form {
        justify-content: flex-start;
      }
      .settings-modal {
        padding: 14px;
      }
      .auth-modal-card {
        width: min(100%, 420px);
        padding: 20px 16px 18px;
        gap: 16px;
      }
      .api-settings-card {
        width: min(100%, 620px);
        max-height: min(88vh, 820px);
      }
      .api-settings-tabs {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .api-endpoint-list {
        max-height: 280px;
      }
      .api-settings-section[data-api-panel="form"] {
        max-height: min(60vh, 560px);
        padding-right: 2px;
        padding-bottom: 20px;
      }
      .api-endpoint-actions {
        justify-content: flex-start;
      }
      .api-endpoint-action {
        justify-content: flex-start;
      }
      .auth-head {
        min-height: 48px;
        padding-right: 44px;
      }
      .auth-brand .brand-lockup.is-auth .brand-mark {
        width: 38px;
        height: 38px;
      }
      .auth-brand .brand-name {
        font-size: 18px;
      }
      .auth-head .settings-close {
        width: 34px;
        height: 34px;
      }
      .auth-form,
      .account-panel {
        min-width: 0;
      }
      .auth-form label,
      .account-panel label {
        min-width: 0;
      }
      .auth-form input,
      .account-panel input,
      .auth-submit {
        width: 100%;
      }
    }
    @media (max-width: 640px) {
      .api-settings-card {
        padding: 16px;
        max-height: min(92vh, 920px);
      }
      .api-settings-tabs {
        width: 100%;
      }
      .api-settings-tab {
        min-width: 0;
        padding: 0 10px;
        font-size: 12px;
      }
      .api-settings-section-head {
        align-items: center;
      }
      .api-settings-section-head h4 {
        font-size: 15px;
      }
      .api-endpoint-list {
        max-height: min(52vh, 360px);
        padding-right: 0;
      }
      .api-settings-section[data-api-panel="form"] {
        max-height: min(64vh, 620px);
        padding-right: 0;
        padding-bottom: 24px;
      }
      .api-endpoint-item {
        padding: 12px;
      }
      .api-endpoint-title-row {
        gap: 8px;
      }
      .api-endpoint-meta {
        font-size: 11px;
      }
      .api-endpoint-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .api-endpoint-action,
      .api-endpoint-actions .ghost-btn {
        width: 100%;
      }
      .api-endpoint-action .ghost-btn,
      .api-endpoint-actions .ghost-btn {
        width: 100%;
        justify-content: center;
      }
      .api-settings-card .settings-actions {
        flex-wrap: wrap;
      }
      .api-settings-card .settings-actions .ghost-btn,
      .api-settings-card .settings-actions .auth-submit {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
      }
    }
    @media (max-width: 560px) {
      .templates {
        padding-top: 48px;
      }
      .templates-head {
        flex-direction: column;
        align-items: flex-start;
      }
      .panel-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .panel-tabs::-webkit-scrollbar {
        display: none;
      }
      .panel-tab {
        flex: 0 0 auto;
      }
      .preview-stage {
        width: 100%;
        min-height: 0;
      }
      .preview-canvas {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 176px);
        min-width: min(82vw, 280px);
        min-height: min(42vh, 360px);
      }
      .preview-toolbar {
        flex-wrap: nowrap;
        justify-content: center;
        top: 10px;
        max-width: calc(100vw - 70px);
        padding: 5px;
        gap: 5px;
      }
      .preview-tool {
        min-width: 34px;
        height: 31px;
        padding: 0 9px;
        font-size: 12px;
      }
      .preview-stage {
        inset: 0;
      }
      .preview-actions {
        bottom: 10px;
        max-width: calc(100vw - 20px);
        padding: 5px;
        gap: 5px;
        flex-wrap: nowrap;
        overflow: hidden;
      }
      .preview-reference {
        left: 10px;
        bottom: 52px;
        max-width: calc(100vw - 20px);
      }
      .preview-reference-link img {
        width: 48px;
        height: 48px;
      }
      .preview-downloads {
        gap: 5px;
        flex-wrap: nowrap;
      }
      .preview-actions .action-btn {
        min-height: 31px;
        padding: 0 10px;
        font-size: 12px;
      }
      .preview-close {
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
        font-size: 20px;
      }
    }