:root {
        --bg-0: #02060f;
        --bg-1: #062238;
        --bg-2: #0a4b66;

        --surface-1: rgba(7, 27, 47, 0.78);
        --surface-2: rgba(10, 38, 62, 0.86);
        --surface-border: rgba(168, 241, 255, 0.22);

        --text-primary: #eaf7ff;
        --text-secondary: #a8c7d8;
        --text-dim: #7fa5b9;

        --accent-cyan: #5be8ff;
        --accent-cyan-strong: #12d8ff;
        --accent-success: #54e4a8;
        --accent-warn: #ffb84c;

        --button-primary: #9bf4ff;
        --button-primary-text: #033140;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        font-family: "Manrope", "SF Pro Display", "Segoe UI", sans-serif;
        color: var(--text-primary);
        background:
          radial-gradient(800px 420px at 50% -10%, rgba(95, 235, 255, 0.34), transparent 70%),
          radial-gradient(900px 460px at 50% 105%, rgba(0, 180, 235, 0.2), transparent 72%),
          linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 40%, var(--bg-0) 100%);
      }

      .top-toast {
        position: fixed;
        z-index: 1400;
        top: calc(env(safe-area-inset-top, 0px) + 12px);
        left: 50%;
        width: min(92vw, 520px);
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px solid rgba(255, 185, 75, 0.52);
        background: rgba(44, 25, 4, 0.95);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
        color: #ffd89a;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -8px);
        transition: opacity 220ms ease, transform 220ms ease;
      }

      .top-toast.visible {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .top-toast.fade-out {
        opacity: 0;
        transform: translate(-50%, -8px);
      }

      .wrap {
        max-width: 760px;
        margin: 0 auto;
        padding: 16px;
      }

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }

      .top-left {
        min-height: 38px;
        display: flex;
        align-items: center;
        min-width: 0;
      }

      .top-brand-block {
        min-width: 0;
      }

      .brand {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: 0.2px;
      }

      .nick {
        color: var(--text-secondary);
        font-size: 13px;
      }

      .top-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .icon-btn {
        width: 38px;
        height: 38px;
        border: 1px solid var(--surface-border);
        background: rgba(10, 37, 59, 0.75);
        color: var(--text-primary);
        border-radius: 999px;
        font-size: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .icon-btn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .profile-balance-btn {
        border: 1px solid var(--surface-border);
        background: rgba(10, 37, 59, 0.75);
        color: var(--text-primary);
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        cursor: pointer;
      }

      .top-back-btn {
        border: 1px solid var(--surface-border);
        background: rgba(10, 37, 59, 0.75);
        color: var(--text-primary);
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 700;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
      }

      .screen {
        display: none;
      }

      .screen.active {
        display: block;
        animation: fade-up 180ms ease-out;
      }

      @keyframes fade-up {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .choice-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .choice {
        border: 1px solid var(--surface-border);
        border-radius: 22px;
        background: linear-gradient(160deg, rgba(12, 43, 68, 0.78), rgba(8, 29, 47, 0.86));
        padding: 16px;
        min-height: 118px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: filter 180ms ease-out, transform 180ms ease-out;
      }

      .choice:hover {
        filter: brightness(1.08);
      }

      .choice:active {
        transform: translateY(1px);
      }

      .choice h2 {
        margin: 0;
        font-size: 26px;
        font-weight: 800;
      }

      .choice-wide {
        grid-column: 1 / -1;
        min-height: 96px;
      }

      .panel {
        background: var(--surface-1);
        border: 1px solid var(--surface-border);
        border-radius: 20px;
        padding: 14px;
        backdrop-filter: blur(6px);
      }

      #screen-photo .panel {
        border: 0;
        background: transparent;
        border-radius: 0;
        padding: 0 0 12px;
        backdrop-filter: none;
      }

      #screen-templates .panel {
        border: 0;
        background: transparent;
        border-radius: 0;
        padding: 0;
        backdrop-filter: none;
      }

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

      .head-row-photo {
        flex-wrap: nowrap;
        gap: 0;
      }

      .head-model-wrap {
        margin-left: 0;
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
      }

      .head-model-select {
        height: 44px;
        padding: 0 40px 0 12px;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 5.2 7 9l3.8-3.8' stroke='%23b7cbda' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 14px 14px;
        background-position: right 14px center;
      }

      .back {
        border: 1px solid var(--surface-border);
        background: rgba(13, 45, 70, 0.8);
        color: var(--text-primary);
        border-radius: 12px;
        padding: 8px 12px;
        font-weight: 600;
        cursor: pointer;
      }

      .muted {
        color: var(--text-secondary);
        font-size: 13px;
      }

      .input-block {
        margin-top: 12px;
      }

      .input-label {
        display: flex;
        justify-content: space-between;
        color: var(--text-primary);
        font-size: 14px;
        margin-bottom: 6px;
      }

      .select {
        width: 100%;
        border-radius: 14px;
        border: 1px solid var(--surface-border);
        background: rgba(9, 31, 50, 0.85);
        color: var(--text-primary);
        font: inherit;
        padding: 12px;
        appearance: none;
      }

      textarea {
        width: 100%;
        min-height: 140px;
        border-radius: 14px;
        border: 1px solid var(--surface-border);
        background: rgba(9, 31, 50, 0.85);
        color: var(--text-primary);
        font: inherit;
        padding: 12px;
        resize: vertical;
      }

      .upload-box {
        display: grid;
        gap: 8px;
      }

      .hidden {
        display: none !important;
      }

      .upload-box.hidden {
        display: none;
      }

      .upload-box.drag-over .upload-add-card {
        border-color: rgba(154, 210, 160, 0.58);
        filter: brightness(1.04);
      }

      .reference-list {
        display: flex;
        gap: 8px;
      }

      .reference-row {
        display: grid;
        gap: 8px;
      }

      .reference-row.has-items {
        display: flex;
        align-items: stretch;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
      }

      .reference-row.has-items .reference-list {
        flex: 0 0 auto;
      }

      .ref-card {
        position: relative;
        flex: 0 0 auto;
        width: 92px;
        height: 92px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--surface-border);
        background: rgba(9, 31, 50, 0.85);
      }

      .ref-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .ref-delete-btn {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        border-radius: 999px;
        border: 1px solid var(--surface-border);
        background: rgba(3, 14, 26, 0.86);
        color: var(--text-primary);
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .upload-dropzone {
        width: 100%;
        border-radius: 18px;
        border: 2px dashed rgba(146, 198, 145, 0.34);
        background: linear-gradient(180deg, rgba(22, 53, 34, 0.82), rgba(16, 40, 27, 0.84));
        color: #d3e9b7;
        min-height: 148px;
        padding: 16px 14px;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 8px;
        cursor: pointer;
        transition: filter 180ms ease-out, border-color 180ms ease-out;
      }

      .upload-dropzone.upload-add-card {
        min-height: 96px;
        padding: 10px 12px;
      }

      .upload-dropzone.upload-add-card.compact {
        flex: 0 0 auto;
        width: 92px;
        min-height: 92px;
        height: 92px;
        border-radius: 12px;
        padding: 8px;
        justify-items: center;
        align-content: center;
      }

      .upload-dropzone.upload-add-card.loading {
        pointer-events: none;
      }

      .upload-add-default {
        display: grid;
        gap: 8px;
        justify-items: center;
      }

      .upload-dropzone.upload-add-card.compact .upload-add-default {
        gap: 0;
      }

      .upload-add-progress {
        width: min(260px, 100%);
        display: grid;
        gap: 6px;
      }

      .upload-dropzone.upload-add-card.compact .upload-add-progress {
        width: 100%;
        gap: 4px;
      }

      .upload-progress-top {
        font-size: 12px;
        font-weight: 700;
        color: rgba(233, 255, 190, 0.95);
      }

      .upload-progress-percent {
        font-size: 18px;
        font-weight: 800;
        color: #e4ffb4;
      }

      .upload-progress-track {
        width: 100%;
        height: 8px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(233, 255, 190, 0.2);
        border: 1px solid rgba(233, 255, 190, 0.3);
      }

      .upload-progress-fill {
        display: block;
        width: 0%;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(197, 255, 115, 0.95), rgba(120, 255, 84, 0.95));
        transition: width 120ms linear;
      }

      .upload-dropzone:hover {
        filter: brightness(1.03);
        border-color: rgba(154, 210, 160, 0.5);
      }

      .upload-plus {
        font-size: 44px;
        line-height: 1;
        font-weight: 300;
      }

      .upload-dropzone.upload-add-card.compact .upload-plus {
        font-size: 36px;
      }

      .upload-title {
        text-align: center;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 800;
      }

      .upload-subtitle {
        text-align: center;
        font-size: 13px;
        color: rgba(214, 235, 193, 0.9);
        font-weight: 700;
      }

      .upload-note {
        text-align: center;
        font-size: 12px;
        color: rgba(214, 235, 193, 0.78);
        font-weight: 600;
      }

      .upload-dropzone.upload-add-card.compact .upload-title,
      .upload-dropzone.upload-add-card.compact .upload-subtitle,
      .upload-dropzone.upload-add-card.compact .upload-note {
        display: none;
      }

      .upload-meta {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
      }

      .upload-hint {
        font-size: 13px;
        color: rgba(170, 190, 204, 0.8);
      }

      .upload-limit {
        font-size: 13px;
        color: rgba(170, 190, 204, 0.95);
        font-weight: 700;
        flex: 0 0 auto;
      }

      .ratio-grid {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
        margin-top: 8px;
      }

      .ratio-btn {
        flex: 1 1 0;
        min-width: 0;
        border: 1px solid var(--surface-border);
        background: rgba(13, 45, 70, 0.7);
        color: #d6f4ff;
        border-radius: 12px;
        height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .ratio-btn.active {
        background: rgba(20, 77, 116, 0.88);
        border-color: rgba(168, 241, 255, 0.48);
      }

      .ratio-icon {
        border: 2px solid rgba(234, 247, 255, 0.8);
        border-radius: 3px;
      }

      .ratio-icon.r-1-1 { width: 16px; height: 16px; }
      .ratio-icon.r-3-4 { width: 14px; height: 18px; }
      .ratio-icon.r-4-3 { width: 18px; height: 14px; }
      .ratio-icon.r-16-9 { width: 20px; height: 12px; }
      .ratio-icon.r-9-16 { width: 12px; height: 20px; }
      .ratio-icon.r-4-5 { width: 14px; height: 17px; }
      .ratio-icon.r-5-4 { width: 17px; height: 14px; }
      .ratio-icon.r-3-2 { width: 18px; height: 12px; }
      .ratio-icon.r-2-3 { width: 12px; height: 18px; }

      .quality-grid {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
        margin-top: 8px;
      }

      .quality-btn {
        flex: 1 1 0;
        min-width: 0;
        border: 1px solid var(--surface-border);
        background: rgba(13, 45, 70, 0.7);
        color: #d6f4ff;
        border-radius: 12px;
        min-height: 44px;
        padding: 8px 10px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
      }

      .quality-btn.active {
        background: rgba(20, 77, 116, 0.88);
        border-color: rgba(168, 241, 255, 0.48);
      }

      .video-upload-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .video-upload-preview {
        margin-top: 8px;
        width: 112px;
        height: 112px;
        position: relative;
        border-radius: 12px;
        border: 1px solid var(--surface-border);
        overflow: hidden;
        background: rgba(8, 30, 49, 0.8);
      }

      .video-upload-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .video-upload-remove-btn {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
        border: 1px solid rgba(168, 241, 255, 0.34);
        border-radius: 999px;
        background: rgba(4, 15, 25, 0.88);
        color: #ffffff;
        font-size: 16px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
      }

      .video-upload-remove-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .video-audio-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: var(--text-primary);
      }

      .video-audio-toggle input {
        width: 18px;
        height: 18px;
      }

      .generate-strip {
        margin-top: 12px;
        width: 100%;
      }

      .generate-cta {
        width: 100%;
        opacity: 0.68;
        filter: saturate(0.82) brightness(0.92);
        transition: opacity 180ms ease-out, filter 180ms ease-out, box-shadow 180ms ease-out;
      }

      .generate-cta.prompt-filled {
        opacity: 1;
        filter: saturate(1.08) brightness(1.04);
      }

      .cta {
        border: 0;
        border-radius: 14px;
        min-height: 48px;
        padding: 12px 16px;
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        color: var(--button-primary-text);
        background: linear-gradient(140deg, var(--button-primary), var(--accent-cyan));
        transition: filter 180ms ease-out;
      }

      .cta:hover {
        filter: brightness(1.06);
      }

      .cta:disabled {
        opacity: 0.5;
        filter: saturate(0.7) brightness(0.9);
        cursor: not-allowed;
      }

      .generate-cta.pulse {
        animation: slow-pulse 3.4s ease-in-out infinite;
      }

      @keyframes slow-pulse {
        0% {
          box-shadow: 0 0 0 rgba(91, 232, 255, 0);
          filter: brightness(1);
        }
        50% {
          box-shadow: 0 0 18px rgba(91, 232, 255, 0.45);
          filter: brightness(1.04);
        }
        100% {
          box-shadow: 0 0 0 rgba(91, 232, 255, 0);
          filter: brightness(1);
        }
      }

      .row {
        margin-top: 10px;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }

      .status {
        color: var(--text-secondary);
        font-size: 13px;
      }

      .status.ok {
        color: var(--accent-success);
      }

      .status.err {
        color: var(--accent-warn);
      }

      .generation-box {
        margin-top: 12px;
        min-height: 120px;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: hidden;
        padding: 0;
        display: grid;
        gap: 8px;
      }

      .generation-queue-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .generation-box .generation-queue-head {
        display: none;
      }

      .generation-queue-title {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-primary);
      }

      .generation-history-link {
        padding: 7px 10px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 1.2;
      }

      .generation-progress-view {
        padding: 14px 12px;
      }

      .generation-progress-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
      }

      .generation-progress-label {
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 700;
      }

      .generation-progress-percent {
        color: var(--accent-cyan);
        font-size: 13px;
        font-weight: 800;
      }

      .generation-progress-track {
        margin-top: 10px;
        width: 100%;
        height: 8px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(168, 241, 255, 0.16);
        border: 1px solid rgba(168, 241, 255, 0.22);
      }

      .generation-progress-fill {
        display: block;
        width: 0%;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(91, 232, 255, 0.92), rgba(18, 216, 255, 0.94));
        transition: width 360ms ease-out;
      }

      .generation-progress-view,
      .generation-result-view {
        display: none !important;
      }

      .generation-batch-progress {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .generation-batch-card {
        border: 1px solid rgba(168, 241, 255, 0.24);
        border-radius: 10px;
        background: rgba(9, 34, 55, 0.8);
        padding: 8px;
        display: grid;
        gap: 7px;
      }

      .generation-batch-card-head {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .generation-batch-thumb-wrap {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        overflow: hidden;
        background: rgba(4, 15, 25, 0.92);
        border: 1px solid rgba(168, 241, 255, 0.24);
        flex: 0 0 auto;
      }

      .generation-batch-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .generation-batch-meta {
        min-width: 0;
        display: grid;
        gap: 2px;
        flex: 1 1 auto;
      }

      .generation-batch-index {
        font-size: 11px;
        color: rgba(214, 244, 255, 0.88);
        font-weight: 700;
      }

      .generation-batch-state {
        font-size: 11px;
        color: rgba(214, 244, 255, 0.74);
        font-weight: 600;
      }

      .generation-batch-percent {
        font-size: 11px;
        color: rgba(214, 244, 255, 0.78);
        font-weight: 700;
        flex: 0 0 auto;
      }

      .generation-batch-track {
        width: 100%;
        height: 6px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(168, 241, 255, 0.14);
        border: 1px solid rgba(168, 241, 255, 0.22);
      }

      .generation-batch-fill {
        display: block;
        width: 0%;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(91, 232, 255, 0.92), rgba(18, 216, 255, 0.94));
        transition: width 320ms ease-out;
      }

      .generation-batch-card.done {
        border-color: rgba(132, 247, 177, 0.42);
        background: rgba(10, 48, 46, 0.72);
      }

      .generation-batch-card.done .generation-batch-state {
        color: rgba(151, 255, 188, 0.92);
      }

      .generation-batch-card.failed {
        border-color: rgba(255, 123, 123, 0.46);
        background: rgba(67, 20, 20, 0.72);
      }

      .generation-batch-card.failed .generation-batch-state,
      .generation-batch-card.failed .generation-batch-percent {
        color: rgba(255, 180, 180, 0.9);
      }

      .generation-result-view {
        width: 100%;
        padding: 10px 12px;
      }

      .generation-result-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .generation-result-card {
        width: 100%;
        border: 1px solid rgba(168, 241, 255, 0.24);
        background: rgba(9, 34, 55, 0.8);
        color: inherit;
        font: inherit;
        appearance: none;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        cursor: pointer;
        text-align: left;
      }

      .generation-result-card:active {
        filter: brightness(1.05);
      }

      .generation-result-card.current {
        border-color: rgba(132, 247, 177, 0.42);
        background: rgba(10, 48, 46, 0.72);
      }

      .generation-result-thumb-wrap {
        flex: 0 0 auto;
        width: 78px;
        height: 78px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(168, 241, 255, 0.26);
        background: rgba(4, 15, 25, 0.92);
      }

      .generation-result-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .generation-result-meta {
        min-width: 0;
        display: grid;
        gap: 6px;
      }

      .generation-result-model {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-primary);
      }

      .generation-result-prompt {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .generation-jobs-panel {
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        max-height: 360px;
        display: grid;
        gap: 8px;
      }

      .generation-jobs-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .generation-jobs-head {
        display: none;
      }

      .generation-jobs-title-wrap {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .generation-jobs-title {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-primary);
      }

      .generation-jobs-count {
        font-size: 11px;
        color: rgba(214, 244, 255, 0.8);
      }

      .generation-jobs-list {
        min-height: 52px;
        overflow-y: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding-right: 2px;
      }

      .generation-jobs-empty {
        grid-column: 1 / -1;
        font-size: 12px;
        color: rgba(214, 244, 255, 0.76);
        padding: 8px 4px;
      }

      .generation-job-card {
        grid-column: 1 / -1;
        border: 1px solid rgba(168, 241, 255, 0.24);
        border-radius: 11px;
        background: rgba(10, 35, 54, 0.88);
        padding: 8px;
        display: grid;
        gap: 6px;
      }

      .generation-job-card.is-completed {
        border-color: rgba(132, 247, 177, 0.4);
        background: rgba(10, 48, 46, 0.74);
      }

      .generation-job-card.is-failed {
        border-color: rgba(255, 123, 123, 0.46);
        background: rgba(67, 20, 20, 0.74);
      }

      .generation-job-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .generation-job-main {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .generation-job-type {
        border: 1px solid rgba(168, 241, 255, 0.34);
        border-radius: 999px;
        padding: 2px 7px;
        font-size: 10px;
        font-weight: 700;
        color: rgba(216, 244, 255, 0.95);
      }

      .generation-job-id {
        font-size: 11px;
        color: rgba(214, 244, 255, 0.76);
        font-weight: 700;
      }

      .generation-job-status {
        font-size: 11px;
        font-weight: 700;
        color: rgba(214, 244, 255, 0.9);
      }

      .generation-job-card.is-failed .generation-job-status {
        color: rgba(255, 190, 190, 0.95);
      }

      .generation-job-card.is-completed .generation-job-status {
        color: rgba(151, 255, 188, 0.95);
      }

      .generation-job-track {
        width: 100%;
        height: 5px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(168, 241, 255, 0.24);
        background: rgba(168, 241, 255, 0.13);
      }

      .generation-job-fill {
        display: block;
        height: 100%;
        width: 0%;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(91, 232, 255, 0.9), rgba(18, 216, 255, 0.95));
        transition: width 240ms ease-out;
      }

      .generation-job-card.is-completed .generation-job-fill {
        background: linear-gradient(90deg, rgba(111, 235, 166, 0.9), rgba(67, 216, 130, 0.95));
      }

      .generation-job-card.is-failed .generation-job-fill {
        background: linear-gradient(90deg, rgba(255, 132, 132, 0.9), rgba(255, 98, 98, 0.95));
      }

      .generation-job-meta {
        font-size: 11px;
        color: rgba(214, 244, 255, 0.76);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .generation-job-photo-slot {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        border-radius: 8px;
        border: 0;
        background: rgba(4, 15, 25, 0.9);
        overflow: hidden;
        display: block;
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
      }

      .generation-job-photo-slot.is-loaded {
        cursor: pointer;
      }

      .generation-job-photo-slot img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .generation-job-photo-slot.is-loading {
        position: relative;
        background: linear-gradient(140deg, rgba(15, 54, 79, 0.5), rgba(5, 24, 40, 0.85));
        animation: generation-photo-slot-pulse 1.35s ease-in-out infinite;
      }

      .generation-job-photo-loader-dot {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(168, 241, 255, 0.92);
        box-shadow: 0 0 14px rgba(91, 232, 255, 0.7);
        animation: generation-photo-dot-bounce 0.9s ease-in-out infinite;
      }

      @keyframes generation-photo-dot-bounce {
        0%,
        100% {
          transform: translate(-50%, -50%) translateY(0) scale(0.9);
          opacity: 0.75;
        }
        50% {
          transform: translate(-50%, -50%) translateY(-5px) scale(1);
          opacity: 1;
        }
      }

      @keyframes generation-photo-slot-pulse {
        0%,
        100% {
          filter: brightness(1);
        }
        50% {
          filter: brightness(1.14);
        }
      }

      .generation-job-preview {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        border: 1px solid rgba(168, 241, 255, 0.28);
        overflow: hidden;
        background: rgba(4, 15, 25, 0.9);
        flex: 0 0 auto;
      }

      .generation-job-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .generation-job-completed-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .generation-job-open-btn {
        padding: 6px 10px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 1.2;
      }

      .action-btn {
        border: 1px solid var(--surface-border);
        background: rgba(13, 45, 70, 0.8);
        color: var(--text-primary);
        border-radius: 12px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
      }

      .profile-card {
        border: 1px solid var(--surface-border);
        border-radius: 16px;
        padding: 12px;
        background: rgba(10, 38, 62, 0.8);
      }

      .profile-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px dashed rgba(168, 241, 255, 0.2);
        font-size: 14px;
      }

      .profile-row:last-child {
        border-bottom: 0;
      }

      .profile-key {
        color: var(--text-secondary);
      }

      .profile-value {
        font-weight: 800;
        color: var(--text-primary);
      }

      .paywall-shell {
        display: grid;
        gap: 12px;
      }

      .paywall-steps {
        padding: 2px 2px 0;
      }

      .paywall-step-main {
        margin: 0;
        color: var(--accent-cyan);
        font-size: 18px;
        font-weight: 700;
      }

      .paywall-step-sub {
        margin: 6px 0 0;
        color: rgba(234, 247, 255, 0.75);
        font-size: 15px;
        font-weight: 500;
      }

      .paywall-card {
        border: 1px solid var(--surface-border);
        border-radius: 22px;
        padding: 16px;
        background:
          radial-gradient(680px 240px at 85% 110%, rgba(91, 232, 255, 0.16), transparent 70%),
          linear-gradient(160deg, rgba(12, 45, 67, 0.88), rgba(8, 30, 48, 0.92));
      }

      .paywall-plan-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .paywall-title {
        margin: 0;
        font-size: 30px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 0.4px;
      }

      .paywall-discount {
        border-radius: 999px;
        padding: 6px 12px;
        background: linear-gradient(160deg, rgba(155, 244, 255, 0.95), rgba(91, 232, 255, 0.88));
        color: #033140;
        font-size: 18px;
        font-weight: 700;
      }

      .paywall-subtitle {
        margin: 10px 0 0;
        color: rgba(234, 247, 255, 0.75);
        font-size: 16px;
        line-height: 1.35;
      }

      .paywall-prices {
        margin-top: 14px;
        display: flex;
        align-items: baseline;
        gap: 12px;
        flex-wrap: wrap;
      }

      .paywall-price-old {
        color: rgba(127, 165, 185, 0.75);
        font-size: 24px;
        font-weight: 600;
        text-decoration: line-through;
      }

      .paywall-price-current {
        color: var(--text-primary);
        font-size: 52px;
        line-height: 0.95;
        font-weight: 700;
        letter-spacing: 0.4px;
      }

      .paywall-saving {
        margin-top: 12px;
        padding: 0;
        color: var(--accent-cyan);
        font-size: 20px;
        font-weight: 600;
      }

      .paywall-credits-box {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(168, 241, 255, 0.15);
      }

      .paywall-credits-line {
        display: flex;
        align-items: baseline;
        gap: 10px;
        font-size: 24px;
      }

      .paywall-credits-value {
        font-size: 46px;
        line-height: 1;
        font-weight: 700;
      }

      .paywall-credits-muted {
        color: rgba(234, 247, 255, 0.58);
        font-size: 18px;
        font-weight: 600;
      }

      .paywall-balance {
        margin-top: 8px;
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 500;
      }

      .paywall-features {
        margin: 12px 0 0;
        padding: 12px 0 0;
        border-top: 1px solid rgba(168, 241, 255, 0.15);
        list-style: none;
        display: grid;
        gap: 8px;
      }

      .paywall-features li {
        font-size: 16px;
        color: rgba(234, 247, 255, 0.9);
        font-weight: 600;
      }

      .paywall-features li::before {
        content: "✓";
        margin-right: 8px;
        color: var(--accent-cyan);
      }

      .paywall-slider-box {
        margin-top: 14px;
        padding: 8px 0 0;
      }

      .paywall-slider-title {
        margin: 0;
        color: var(--accent-cyan);
        font-size: 15px;
        font-weight: 600;
      }

      .paywall-slider-bubble {
        margin: 10px auto 0;
        width: fit-content;
        max-width: 100%;
        border-radius: 999px;
        border: 1px solid rgba(91, 232, 255, 0.32);
        background: rgba(9, 32, 52, 0.72);
        color: rgba(234, 247, 255, 0.95);
        font-size: 14px;
        font-weight: 600;
        padding: 6px 12px;
      }

      .paywall-unit-price {
        margin-top: 8px;
        text-align: center;
        color: rgba(168, 241, 255, 0.85);
        font-size: 13px;
        font-weight: 500;
      }

      .paywall-range {
        --fill-percent: 50%;
        margin-top: 12px;
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(
          90deg,
          rgba(91, 232, 255, 0.95) 0%,
          rgba(91, 232, 255, 0.95) var(--fill-percent),
          rgba(168, 241, 255, 0.18) var(--fill-percent),
          rgba(168, 241, 255, 0.18) 100%
        );
        outline: none;
      }

      .paywall-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid rgba(91, 232, 255, 0.46);
        background: #f3f6ff;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
        cursor: grab;
      }

      .paywall-range::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid rgba(91, 232, 255, 0.46);
        background: #f3f6ff;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
        cursor: grab;
      }

      .paywall-range-scale {
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
        gap: 6px;
        color: rgba(234, 247, 255, 0.44);
        font-size: 12px;
        font-weight: 500;
      }

      .paywall-row {
        display: none;
      }

      .paywall-later {
        border: 1px solid rgba(168, 241, 255, 0.22);
        background: rgba(13, 45, 70, 0.5);
        color: rgba(234, 247, 255, 0.82);
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 13px;
        font-weight: 600;
      }

      .paywall-footer {
        margin-top: 12px;
        border-top: 1px solid rgba(168, 241, 255, 0.18);
        padding: 12px 0 0;
        display: grid;
        gap: 10px;
      }

      .paywall-total-label {
        color: rgba(234, 247, 255, 0.54);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 1px;
      }

      .paywall-total-price {
        margin-top: 4px;
        color: var(--text-primary);
        font-size: 42px;
        line-height: 1;
        font-weight: 700;
      }

      .paywall-total-credits {
        margin-top: 6px;
        color: rgba(194, 225, 255, 0.9);
        font-size: 16px;
        font-weight: 600;
      }

      .paywall-pay-btn {
        border: 0;
        border-radius: 14px;
        min-height: 56px;
        padding: 12px 18px;
        font-size: 22px;
        font-weight: 700;
        color: var(--button-primary-text);
        background: linear-gradient(140deg, var(--button-primary), var(--accent-cyan));
        box-shadow: 0 8px 18px rgba(18, 216, 255, 0.2);
        width: 100%;
      }

      .paywall-pay-btn:disabled {
        opacity: 0.55;
        box-shadow: none;
      }

      .paywall-pay-btn-rich {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-align: left;
        white-space: nowrap;
      }

      .paywall-pay-main {
        font-size: 24px;
        line-height: 1;
        font-weight: 700;
      }

      .paywall-pay-meta {
        font-size: 15px;
        line-height: 1;
        color: rgba(3, 49, 64, 0.86);
        font-weight: 600;
      }

      .paywall-pay-cta {
        font-size: 18px;
        line-height: 1;
        font-weight: 700;
      }

      .paywall-hidden-action {
        display: none !important;
      }

      @media (max-width: 520px) {
        .paywall-title {
          font-size: 23px;
        }

        .paywall-discount {
          font-size: 16px;
        }

        .paywall-price-old {
          font-size: 18px;
        }

        .paywall-price-current {
          font-size: 40px;
        }

        .paywall-credits-value {
          font-size: 34px;
        }

        .paywall-pay-btn {
          min-height: 52px;
          font-size: 20px;
          border-radius: 14px;
        }

        .paywall-pay-main {
          font-size: 20px;
        }

        .paywall-pay-meta {
          font-size: 13px;
        }

        .paywall-pay-cta {
          font-size: 15px;
        }
      }

      .template-library {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid var(--surface-border);
        border-radius: 12px;
        background: rgba(10, 38, 62, 0.58);
      }

      #screen-templates .template-library {
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      .template-filters {
        display: grid;
        gap: 6px;
      }

      .template-filter-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
      }

      .template-primary-row {
        display: grid;
        grid-template-columns: clamp(30px, 9vw, 34px) minmax(0, 1fr) minmax(0, 1fr) minmax(58px, 0.9fr);
        align-items: center;
        width: 100%;
        gap: clamp(4px, 1.2vw, 6px);
      }

      .template-collapsible {
        display: grid;
        gap: 6px;
      }

      .template-collapsible-toggle {
        width: 100%;
        min-height: 34px;
        border-radius: 10px;
        border: 1px solid rgba(168, 241, 255, 0.24);
        background: rgba(8, 30, 49, 0.7);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 700;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
      }

      .template-collapsible-toggle.active {
        color: var(--text-primary);
        border-color: rgba(168, 241, 255, 0.62);
        background: rgba(15, 52, 82, 0.78);
      }

      .template-collapsible-chevron {
        font-size: 12px;
        line-height: 1;
        transition: transform 160ms ease-out;
      }

      .template-collapsible-toggle.active .template-collapsible-chevron {
        transform: rotate(180deg);
      }

      .template-collapsible-content {
        display: grid;
        gap: 6px;
      }

      .template-secondary-row {
        align-items: center;
        gap: 6px 8px;
      }

      .template-search-row {
        display: flex;
        align-items: center;
        gap: clamp(4px, 1vw, 6px);
        width: 100%;
        flex: 0 0 auto;
        min-width: 0;
      }

      .template-search-row.expanded {
        grid-column: 1 / -1;
        max-width: none;
      }

      .template-search-toggle,
      .template-segment-btn,
      .template-clear-btn {
        min-height: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid rgba(168, 241, 255, 0.24);
        background: rgba(8, 30, 49, 0.76);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .template-search-toggle {
        width: clamp(28px, 8vw, 34px);
        min-width: clamp(28px, 8vw, 34px);
        height: clamp(28px, 8vw, 34px);
        min-height: clamp(28px, 8vw, 34px);
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(13px, 4vw, 15px);
      }

      .template-search-row:not(.expanded) .template-search-toggle {
        width: 100%;
        min-width: 0;
      }

      .template-search-toggle.active {
        color: var(--text-primary);
        border-color: rgba(168, 241, 255, 0.72);
        background: rgba(48, 174, 203, 0.3);
      }

      .template-search-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
      }

      .template-search-input {
        flex: 1;
        min-height: 34px;
        padding: 7px 11px;
      }

      .template-search-close {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1px solid rgba(168, 241, 255, 0.2);
        background: rgba(7, 27, 45, 0.65);
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
      }

      .template-segment {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: clamp(4px, 1vw, 6px);
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
      }

      .template-segment-btn {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
        padding: 0 clamp(6px, 2vw, 10px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: clamp(10px, 2.8vw, 12px);
      }

      .template-segment-btn.active {
        color: var(--text-primary);
        border-color: rgba(168, 241, 255, 0.72);
        background: rgba(48, 174, 203, 0.3);
      }

      .template-segment-gender,
      .template-segment-media {
        width: 100%;
        flex: 0 0 auto;
        min-width: 0;
      }

      .template-clear-btn {
        width: 100%;
        min-width: 0;
        padding: 0 clamp(6px, 2vw, 10px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        font-weight: 600;
        font-size: clamp(10px, 2.8vw, 12px);
      }

      .template-advanced-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        min-width: 0;
      }

      .template-filter-chip {
        flex: 0 0 auto;
        border: 1px solid rgba(168, 241, 255, 0.24);
        background: rgba(8, 30, 49, 0.76);
        color: var(--text-secondary);
        font-size: 11px;
        line-height: 1;
        min-height: 28px;
        border-radius: 999px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        white-space: nowrap;
      }

      .template-filter-chip.active {
        color: var(--text-primary);
        border-color: rgba(168, 241, 255, 0.7);
        background: rgba(48, 174, 203, 0.28);
      }

      .template-more-row {
        margin-top: 8px;
      }

      .home-template-show-all-btn {
        width: 100%;
      }

      .template-grid {
        margin-top: 8px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .home-template-section {
        margin-top: 12px;
        border: 0;
        background: transparent;
        padding: 0;
        backdrop-filter: none;
      }

      .home-template-grid {
        margin-top: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .home-template-grid .template-card {
        border-radius: 12px;
      }

      .template-card {
        border: 1px solid var(--surface-border);
        border-radius: 12px;
        overflow: hidden;
        background: rgba(9, 31, 50, 0.82);
        padding: 0;
        color: inherit;
        text-align: left;
        cursor: pointer;
      }

      .template-card img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        background: rgba(5, 20, 33, 0.9);
        display: block;
      }

      .template-card-meta {
        padding: 8px 10px 10px;
      }

      .template-card-title {
        margin: 0;
        font-size: 13px;
        font-weight: 800;
        color: var(--text-primary);
      }

      .template-card-desc {
        margin: 4px 0 0;
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.3;
      }

      .template-card-tags {
        margin: 6px 0 0;
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.3;
      }

      .template-config {
        margin-top: 12px;
        padding: 12px;
        border: 1px solid var(--surface-border);
        border-radius: 14px;
        background: rgba(9, 31, 50, 0.76);
      }

      #screen-photo .template-library,
      #screen-photo .template-config {
        padding: 10px;
        background: rgba(3, 13, 22, 0.46);
        border-color: rgba(168, 241, 255, 0.16);
      }

      #screen-photo .select,
      #screen-photo textarea,
      #screen-photo .text-input,
      #screen-photo .template-card,
      #screen-photo .ref-card {
        background: rgba(4, 15, 25, 0.82);
      }

      #screen-photo .template-grid .template-card img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: min(52vh, 520px);
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
        margin: 0 auto;
      }

      .template-config-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }

      .template-kicker {
        font-size: 12px;
        color: var(--text-secondary);
      }

      .template-title {
        margin: 4px 0 0;
        font-size: 16px;
        font-weight: 800;
      }

      .template-description {
        margin-top: 6px;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.4;
      }

      .template-fields {
        margin-top: 12px;
        display: grid;
        gap: 10px;
      }

      .template-preview-block {
        border: 1px solid var(--surface-border);
        border-radius: 12px;
        overflow: hidden;
        background: rgba(4, 15, 25, 0.82);
        display: flex;
        justify-content: center;
        padding: 10px;
      }

      .template-preview-image {
        width: 33.333%;
        display: block;
        max-height: min(20vh, 220px);
        height: auto;
        object-fit: contain;
        object-position: center;
      }

      .template-field {
        display: grid;
        gap: 6px;
      }

      .template-subject-uploader {
        margin-top: 4px;
        display: grid;
        gap: 8px;
      }

      .template-clothing-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
      }

      .template-subject-hint {
        font-size: 14px;
        line-height: 1.35;
        color: var(--text-primary);
      }

      .template-subject-box {
        position: relative;
        width: 146px;
        height: 146px;
        border-radius: 18px;
        border: 2px dashed rgba(146, 198, 145, 0.44);
        background: linear-gradient(180deg, rgba(22, 53, 34, 0.86), rgba(16, 40, 27, 0.9));
        color: #d3e9b7;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;
      }

      .template-subject-box-plus {
        font-size: 62px;
        line-height: 1;
        font-weight: 300;
      }

      .template-subject-box.has-image {
        border-style: solid;
      }

      .template-subject-box.is-loading {
        pointer-events: none;
      }

      .template-subject-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .template-subject-loading {
        position: absolute;
        inset: 0;
        background: rgba(4, 16, 26, 0.58);
        display: grid;
        place-items: center;
        gap: 8px;
        color: #eaffef;
        font-size: 13px;
        font-weight: 700;
      }

      .template-subject-spinner {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        border: 2px solid rgba(234, 255, 239, 0.28);
        border-top-color: rgba(234, 255, 239, 0.95);
        animation: subject-spin 800ms linear infinite;
      }

      @keyframes subject-spin {
        to {
          transform: rotate(360deg);
        }
      }

      .template-subject-remove {
        position: absolute;
        right: 7px;
        top: 7px;
        width: 26px;
        height: 26px;
        border-radius: 999px;
        border: 1px solid rgba(168, 241, 255, 0.28);
        background: rgba(3, 14, 26, 0.86);
        color: var(--text-primary);
        font-size: 18px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .template-field-label {
        font-size: 13px;
        color: var(--text-primary);
      }

      .text-input {
        width: 100%;
        border-radius: 12px;
        border: 1px solid var(--surface-border);
        background: rgba(9, 31, 50, 0.85);
        color: var(--text-primary);
        font: inherit;
        padding: 10px 12px;
      }

      .template-upload-slot {
        border: 1px dashed rgba(154, 210, 160, 0.42);
        border-radius: 12px;
        background: rgba(22, 53, 34, 0.65);
        padding: 10px;
        display: grid;
        gap: 8px;
      }

      .template-upload-preview {
        width: 100%;
        border-radius: 10px;
        max-height: 72vh;
        height: auto;
        object-fit: contain;
        display: block;
      }

      .template-upload-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .template-viewer-title {
        margin-top: 10px;
        font-size: 18px;
        font-weight: 800;
      }

      .template-viewer-description {
        margin-top: 6px;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.4;
      }

      .history-list {
        margin: 8px 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }

      .history-item {
        min-width: 0;
      }

      .history-gallery {
        display: block;
      }

      .history-thumb {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--surface-border);
        background: rgba(9, 31, 50, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .history-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .history-thumb-btn {
        border: 0;
        padding: 0;
        margin: 0;
        background: transparent;
        cursor: pointer;
        display: block;
        width: 100%;
      }

      .viewer-modal {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: rgba(2, 8, 14, 0.85);
      }

      .viewer-modal.visible {
        display: flex;
      }

      .viewer-frame {
        width: min(920px, 96vw);
        max-height: 92vh;
        border: 1px solid var(--surface-border);
        border-radius: 16px;
        background: var(--surface-2);
        padding: 12px;
        position: relative;
      }

      .viewer-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid var(--surface-border);
        background: rgba(13, 45, 70, 0.9);
        color: var(--text-primary);
        font-size: 18px;
        cursor: pointer;
      }

      .viewer-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 56px;
        height: 56px;
        border-radius: 999px;
        border: 1px solid var(--surface-border);
        background: rgba(13, 45, 70, 0.96);
        color: var(--text-primary);
        font-size: 34px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .viewer-nav::before {
        content: "";
        position: absolute;
        inset: -14px;
      }

      .viewer-nav.prev {
        left: 8px;
      }

      .viewer-nav.next {
        right: 8px;
      }

      .viewer-image-wrap {
        margin-top: 24px;
        width: 100%;
        min-height: 240px;
        max-height: 64vh;
        border-radius: 12px;
        background: rgba(9, 31, 50, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .viewer-image-wrap img {
        max-width: 100%;
        max-height: 64vh;
        display: block;
      }

      .viewer-meta {
        margin-top: 10px;
        color: var(--text-secondary);
        font-size: 12px;
      }

      .viewer-actions {
        margin-top: 10px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .history-viewer-status {
        margin-top: 8px;
        min-height: 18px;
      }

      .template-viewer-frame {
        width: min(980px, 98vw);
        max-height: 94vh;
      }

      #templateViewerCloseBtn {
        display: none;
      }

      .template-viewer-image-wrap {
        margin-top: 0;
        position: relative;
        min-height: 220px;
        max-height: 58vh;
        background: rgba(4, 15, 25, 0.92);
      }

      .template-viewer-image-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--template-viewer-bg);
        background-size: cover;
        background-position: center;
        filter: blur(24px) saturate(1.08);
        transform: scale(1.08);
        opacity: 0.62;
        pointer-events: none;
      }

      .template-viewer-image-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.28));
        pointer-events: none;
      }

      .template-viewer-image-wrap img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        max-height: 58vh;
        object-fit: contain;
      }

      .template-viewer-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .template-viewer-actions .action-btn,
      .template-viewer-actions .cta {
        width: 100%;
      }

      .generation-viewer-frame {
        width: min(720px, 96vw);
        max-height: 94vh;
      }

      .generation-viewer-image-wrap {
        margin-top: 0;
        min-height: 260px;
        max-height: 64vh;
      }

      .generation-viewer-meta {
        margin-top: 10px;
        display: grid;
        gap: 6px;
      }

      .generation-viewer-model {
        font-size: 14px;
        font-weight: 800;
        color: var(--text-primary);
      }

      .generation-viewer-prompt {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .generation-viewer-status {
        min-height: 18px;
        margin-top: 8px;
      }

      .generation-viewer-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
      }

      .generation-viewer-actions .action-btn {
        width: 100%;
      }

      .generation-viewer-actions .generation-viewer-close-btn {
        width: 38px;
        min-width: 38px;
        padding: 0;
        font-size: 18px;
        line-height: 1;
      }

      @media (max-width: 520px) {
        .generation-viewer-actions {
          grid-template-columns: 1fr;
        }

        .generation-viewer-actions .generation-viewer-close-btn {
          width: 100%;
          min-width: 0;
        }

        .template-primary-row {
          grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) minmax(52px, 0.9fr);
          gap: 4px;
        }

        .template-search-row.expanded {
          grid-column: 1 / -1;
          order: 0;
        }

        .template-segment-btn,
        .template-clear-btn {
          width: auto;
          min-width: 0;
          padding: 0 6px;
          font-size: 10px;
        }

        .template-search-toggle {
          width: 32px;
          height: 32px;
          min-height: 32px;
        }

        .template-search-input {
          min-height: 32px;
        }

        .template-advanced-chips {
          flex: 1 1 100%;
        }
      }

      .history-meta {
        min-width: 0;
      }

      .history-title {
        font-size: 12px;
        color: var(--text-secondary);
      }

      .history-prompt {
        margin-top: 6px;
        font-size: 13px;
        color: var(--text-primary);
        line-height: 1.35;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }

      /* --- Crop Modal --- */
      .crop-modal-frame {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 480px;
        max-height: 92vh;
        padding: 16px;
        gap: 12px;
        background: var(--surface, #1a1a2e);
        border-radius: 16px;
      }

      .crop-modal-header {
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: center;
      }

      .crop-modal-title {
        font-size: 15px;
        font-weight: 600;
      }

      .crop-modal-hint {
        font-size: 12px;
        color: var(--muted, #888);
      }

      .crop-modal-image-wrap {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        border-radius: 8px;
        background: #000;
        height: 55vh;
      }

      .crop-modal-image-wrap img {
        display: block;
        max-width: 100%;
      }

      .crop-modal-ratio-label {
        text-align: center;
        font-size: 12px;
        color: var(--muted, #888);
      }

      .crop-modal-actions {
        flex-shrink: 0;
      }