:root {
        --bg: #f7f7f8;
        --panel: #ffffff;
        --line: #ececf0;
        --line-2: #e4e1e8;
        --text: #1d1d22;
        --muted: #757884;
        --soft: #a5a8b2;
        --purple: #7664f6;
        --purple-2: #f2f0ff;
        --shadow: 0 18px 48px rgba(22, 24, 33, 0.08);
      }

      /* Final desktop layout: move prompt composer to the right side so it does not cover generated images. */
      @media (min-width: 981px) {
        .workspace {
          position: relative !important;
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) 388px !important;
          gap: 0 !important;
          overflow: hidden !important;
        }

        .canvas {
          grid-column: 1 !important;
          grid-template-rows: 50px minmax(0, 1fr) auto !important;
          padding-bottom: 0 !important;
          min-width: 0 !important;
          position: relative !important;
        }

        .canvas-stage {
          padding: 14px 16px 12px !important;
          min-height: 0 !important;
        }

        .canvas-paper {
          max-width: calc(100vw - 720px) !important;
          max-height: calc(100vh - 166px) !important;
        }

        .chat {
          grid-column: 2 !important;
          position: relative !important;
          left: auto !important;
          right: auto !important;
          top: auto !important;
          bottom: auto !important;
          z-index: 3 !important;
          width: 388px !important;
          height: 100% !important;
          min-width: 0 !important;
          transform: none !important;
          border-left: 1px solid var(--line) !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: #ffffff !important;
          backdrop-filter: none !important;
          overflow: hidden !important;
          display: grid !important;
          grid-template-rows: minmax(0, 1fr) !important;
        }

        .panel-scroll {
          display: block !important;
          max-height: none !important;
          height: 100% !important;
          min-height: 0 !important;
          overflow: auto !important;
          padding: 12px !important;
        }

        .panel-scroll > .panel-group:first-child,
        .core-shell > .panel-group:first-child,
        .prompt-head,
        .legacy-prompt-card,
        .legacy-safety-consent,
        .prompt-suggestions {
          display: none !important;
        }

        .core-shell,
        .core-shell .panel-group {
          display: block !important;
        }

        .advanced-shell {
          position: static !important;
          max-height: none !important;
          overflow: visible !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: transparent !important;
        }

        .composer-wrap {
          position: absolute !important;
          top: 12px !important;
          right: 12px !important;
          bottom: 12px !important;
          width: 364px !important;
          z-index: 8 !important;
          padding: 0 !important;
          border: 0 !important;
          background: transparent !important;
          overflow: auto !important;
          max-height: none !important;
        }

        .composer {
          display: grid !important;
          gap: 10px !important;
          align-content: start !important;
          padding: 12px !important;
          border: 1px solid #e5e7ee !important;
          border-radius: 16px !important;
          background: #ffffff !important;
          box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08) !important;
          min-height: 0 !important;
          overflow: visible !important;
        }

        .bottom-popover-grid {
          position: static !important;
          width: 100% !important;
          margin-bottom: 8px !important;
          border-radius: 14px !important;
          box-shadow: none !important;
        }

        .bottom-parameter-bar {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 7px !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          overflow: visible !important;
        }

        .composer-summary-inline {
          order: -1;
          flex: 1 0 100%;
          margin: 0 0 2px !important;
        }

        .bottom-parameter-bar .composer-pill,
        .bottom-parameter-bar .tag-button {
          width: auto !important;
          min-width: 0 !important;
          max-width: 100% !important;
          height: 30px !important;
          min-height: 30px !important;
          padding: 0 10px !important;
          border-radius: 10px !important;
          font-size: 0.72rem !important;
          white-space: nowrap !important;
        }

        .composer-row {
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) 46px !important;
          align-items: end !important;
          gap: 10px !important;
          min-height: 0 !important;
          padding: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
        }

        .composer-input-wrap {
          min-width: 0 !important;
          min-height: 132px !important;
          padding: 10px !important;
          border: 1px solid #dfe6ef !important;
          border-radius: 13px !important;
          background: #f8fafc !important;
        }

        .composer-input-wrap #promptBox {
          display: block !important;
          width: 100% !important;
          min-height: 112px !important;
          max-height: 260px !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          resize: vertical !important;
          font-size: 0.86rem !important;
          line-height: 1.5 !important;
          color: #111827 !important;
        }

        .generate-button {
          width: 46px !important;
          height: 46px !important;
          min-width: 46px !important;
          border-radius: 13px !important;
          align-self: end !important;
        }

        .document-tools,
        .reference-tools,
        .photo-tool-panel,
        .edit-tools {
          margin-top: 0 !important;
        }
      }

      /* Right-side prompt composer: keep the generated artwork unobstructed on desktop. */
      @media (min-width: 981px) {
        .workspace {
          position: relative !important;
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) 388px !important;
          gap: 0 !important;
          overflow: hidden !important;
        }

        .canvas {
          grid-column: 1 !important;
          grid-template-rows: 50px minmax(0, 1fr) auto !important;
          padding-bottom: 0 !important;
          min-width: 0 !important;
          position: relative !important;
        }

        .canvas-stage {
          padding: 14px 16px 12px !important;
          min-height: 0 !important;
        }

        .canvas-paper {
          max-width: calc(100vw - 720px) !important;
          max-height: calc(100vh - 166px) !important;
        }

        .chat {
          grid-column: 2 !important;
          position: relative !important;
          left: auto !important;
          right: auto !important;
          top: auto !important;
          bottom: auto !important;
          z-index: 3 !important;
          width: 388px !important;
          height: 100% !important;
          min-width: 0 !important;
          transform: none !important;
          border-left: 1px solid var(--line) !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: #ffffff !important;
          backdrop-filter: none !important;
          overflow: hidden !important;
          display: grid !important;
          grid-template-rows: minmax(0, 1fr) !important;
        }

        .panel-scroll {
          display: block !important;
          max-height: none !important;
          height: 100% !important;
          min-height: 0 !important;
          overflow: auto !important;
          padding: 12px !important;
        }

        .panel-scroll > .panel-group:first-child,
        .core-shell > .panel-group:first-child,
        .prompt-head,
        .legacy-prompt-card,
        .legacy-safety-consent,
        .prompt-suggestions {
          display: none !important;
        }

        .core-shell,
        .core-shell .panel-group {
          display: block !important;
        }

        .advanced-shell {
          position: static !important;
          max-height: none !important;
          overflow: visible !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: transparent !important;
        }

        .composer-wrap {
          position: absolute !important;
          top: 12px !important;
          right: 12px !important;
          bottom: 12px !important;
          width: 364px !important;
          z-index: 8 !important;
          padding: 0 !important;
          border: 0 !important;
          background: transparent !important;
          overflow: auto !important;
          max-height: none !important;
        }

        .composer {
          display: grid !important;
          gap: 10px !important;
          align-content: start !important;
          padding: 12px !important;
          border: 1px solid #e5e7ee !important;
          border-radius: 16px !important;
          background: #ffffff !important;
          box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08) !important;
          min-height: 0 !important;
          overflow: visible !important;
        }

        .bottom-popover-grid {
          position: static !important;
          width: 100% !important;
          margin-bottom: 8px !important;
          border-radius: 14px !important;
          box-shadow: none !important;
        }

        .bottom-parameter-bar {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 7px !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          overflow: visible !important;
        }

        .composer-summary-inline {
          order: -1;
          flex: 1 0 100%;
          margin: 0 0 2px !important;
        }

        .bottom-parameter-bar .composer-pill,
        .bottom-parameter-bar .tag-button {
          width: auto !important;
          min-width: 0 !important;
          max-width: 100% !important;
          height: 30px !important;
          min-height: 30px !important;
          padding: 0 10px !important;
          border-radius: 10px !important;
          font-size: 0.72rem !important;
          white-space: nowrap !important;
        }

        .composer-row {
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) 46px !important;
          align-items: end !important;
          gap: 10px !important;
          min-height: 0 !important;
          padding: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
        }

        .composer-input-wrap {
          min-width: 0 !important;
          min-height: 132px !important;
          padding: 10px !important;
          border: 1px solid #dfe6ef !important;
          border-radius: 13px !important;
          background: #f8fafc !important;
        }

        .composer-input-wrap #promptBox {
          display: block !important;
          width: 100% !important;
          min-height: 112px !important;
          max-height: 260px !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          resize: vertical !important;
          font-size: 0.86rem !important;
          line-height: 1.5 !important;
          color: #111827 !important;
        }

        .generate-button {
          width: 46px !important;
          height: 46px !important;
          min-width: 46px !important;
          border-radius: 13px !important;
          align-self: end !important;
        }

        .document-tools,
        .reference-tools,
        .photo-tool-panel,
        .edit-tools {
          margin-top: 0 !important;
        }
      }

      * {
        box-sizing: border-box;
      }

      [hidden] {
        display: none !important;
      }

      html,
      body {
        margin: 0;
        height: 100%;
        background: var(--bg);
        color: var(--text);
        font-family: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
      }

      button,
      textarea {
        font: inherit;
      }

      input {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      .app {
        height: 100vh;
        display: grid;
        grid-template-columns: 76px 1fr;
        background: var(--bg);
      }

      .rail {
        border-right: 1px solid var(--line);
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 15px 0 12px;
        min-height: 0;
        overflow: hidden;
      }

      .project-hover-preview {
        position: fixed;
        left: 294px;
        top: 96px;
        z-index: 120;
        width: min(520px, calc(100vw - 326px));
        border: 1px solid rgba(214, 217, 226, 0.95);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 24px 70px rgba(19, 24, 34, 0.18);
        overflow: hidden;
        pointer-events: none;
        transform-origin: left top;
        transform: scale(0.985);
      }

      .project-hover-preview[hidden] {
        display: none !important;
      }

      .project-hover-preview-media {
        min-height: 260px;
        background: #f3f4f7;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
      }

      .project-hover-preview-body {
        padding: 12px 14px 14px;
        display: grid;
        gap: 6px;
      }

      .project-hover-preview-title {
        color: #17171c;
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .project-hover-preview-meta {
        color: #666a74;
        font-size: 0.78rem;
        line-height: 1.5;
      }

      .project-hover-preview.entering {
        animation: projectHoverIn 120ms ease-out;
      }

      @keyframes projectHoverIn {
        from {
          opacity: 0;
          transform: scale(0.96) translateY(4px);
        }
        to {
          opacity: 1;
          transform: scale(0.985) translateY(0);
        }
      }

      .logo {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #17171c;
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 0.7rem;
        font-weight: 800;
      }

      .nav-icon {
        width: 36px;
        height: 36px;
        border: 0;
        background: transparent;
        color: #4b4d57;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-size: 1rem;
      }

      .nav-icon.active {
        color: #111116;
        background: #f4f4f6;
      }

      .help {
        margin-top: auto;
      }

      .rail-account {
        width: 62px;
        min-height: 58px;
        border: 0;
        border-radius: 16px;
        background: transparent;
        color: #17171c;
        display: grid;
        place-items: center;
        gap: 3px;
        padding: 7px 4px;
      }

      .rail-account:hover {
        background: #f4f4f6;
      }

      .rail-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #17171c;
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 0.75rem;
        font-weight: 900;
      }

      .rail-account-meta {
        max-width: 58px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--muted);
        font-size: 0.66rem;
        line-height: 1.1;
      }

      .page {
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-rows: 48px 1fr;
        overflow: hidden;
      }

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        border-bottom: 1px solid var(--line);
        background: #fff;
      }

      .project-title {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .project-title h1 {
        margin: 0;
        font-size: 0.92rem;
        font-weight: 700;
      }

      .top-meta {
        color: var(--muted);
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }

      .support-chip {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: 0 10px;
        border: 1px solid #e4e0ff;
        border-radius: 999px;
        background: #f7f5ff;
        color: #5a4bcf;
        font-size: 0.74rem;
        font-weight: 680;
        white-space: nowrap;
      }

      .user-chip {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 999px;
        height: 28px;
        padding: 0 10px;
        color: #4e515b;
        font-size: 0.75rem;
      }

      .credit-chip {
        border: 1px solid var(--line);
        background: #f7f7f8;
        border-radius: 999px;
        height: 28px;
        padding: 0 10px;
        color: #17171c;
        font-size: 0.75rem;
        display: inline-grid;
        place-items: center;
      }

      .hidden-chip {
        display: none !important;
      }

      .auth-modal {
        position: fixed;
        left: 14px;
        bottom: 84px;
        z-index: 40;
        display: none;
        width: 260px;
      }

      .auth-modal.active {
        display: block;
      }

      .production-reference-modal {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: center;
        padding: 24px;
        background: rgba(17, 17, 24, 0.28);
        backdrop-filter: blur(6px);
        overflow: auto;
      }

      .production-reference-modal[hidden] {
        display: none !important;
      }

      .production-reference-card {
        width: min(560px, 100%);
        max-height: min(720px, calc(100dvh - 32px));
        overflow: auto;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--line);
        box-shadow: 0 24px 80px rgba(18, 18, 24, 0.2);
        padding: 18px;
        display: grid;
        gap: 12px;
      }

      .production-reference-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .production-reference-head h3 {
        margin: 0;
        font-size: 1rem;
      }

      .production-reference-close {
        border: 1px solid var(--line);
        background: #fff;
        color: var(--text);
        border-radius: 999px;
        padding: 6px 12px;
        font: inherit;
        cursor: pointer;
      }

      .production-reference-note {
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.6;
      }

      .production-reference-version {
        color: #4b4d57;
        font-size: 0.78rem;
      }

      .production-reference-textarea {
        width: 100%;
        min-height: 132px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: #fff;
        padding: 14px 15px;
        font: inherit;
        color: var(--text);
        resize: vertical;
        line-height: 1.7;
      }

      .production-reference-textarea:focus {
        outline: none;
        border-color: rgba(104, 77, 255, 0.45);
        box-shadow: 0 0 0 3px rgba(104, 77, 255, 0.12);
      }

      .production-reference-actions {
        position: sticky;
        bottom: -18px;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
        margin: 0 -18px -18px;
        padding: 12px 18px 18px;
        border-top: 1px solid rgba(225, 225, 232, 0.9);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -10px 22px rgba(18, 18, 24, 0.06);
      }

      .production-reference-actions .composer-pill {
        min-height: 38px;
      }

      .auth-card {
        width: 100%;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid var(--line);
        padding: 14px;
        box-shadow: 0 18px 54px rgba(20, 20, 24, 0.16);
        backdrop-filter: blur(14px);
        animation: accountMenuIn 0.16s ease-out;
      }

      .auth-card h3 {
        margin: 0 0 10px;
        font-size: 0.9rem;
      }

      .auth-actions {
        margin-top: 8px;
        display: grid;
        gap: 7px;
      }

      .auth-actions .composer-pill {
        width: 100%;
        justify-content: flex-start;
      }

      .auth-note {
        min-height: 18px;
        margin-top: 12px;
        color: var(--muted);
        font-size: 0.76rem;
        line-height: 1.5;
      }

      .support-note {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #ececf2;
        color: #5a4bcf;
        font-weight: 680;
      }

      .account-feedback-form {
        display: grid;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
      }

      .account-feedback-form select,
      .account-feedback-form input,
      .account-feedback-form textarea {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        color: var(--text);
        font: inherit;
        font-size: 0.78rem;
        outline: none;
      }

      .account-feedback-form select,
      .account-feedback-form input {
        height: 34px;
        padding: 0 10px;
      }

      .account-feedback-form textarea {
        min-height: 74px;
        resize: vertical;
        padding: 9px 10px;
        line-height: 1.5;
      }

      .account-feedback-status {
        margin-top: 0;
        min-height: 16px;
      }

      .account-feedback-status.success {
        color: #05844d;
      }

      .account-feedback-status.error {
        color: #d92d20;
      }

      @keyframes accountMenuIn {
        from {
          opacity: 0;
          transform: translateY(8px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .screen {
        min-height: 0;
        position: relative;
        overflow: hidden;
      }

      .projects {
        height: 100%;
        overflow: auto;
        padding: 64px 56px 48px;
      }

      .projects-shell {
        width: min(100%, 1580px);
      }

      .projects-hero {
        margin-bottom: 18px;
      }

      .hero-panel {
        max-width: 620px;
      }

      .hero-panel.demo {
        padding: 18px 20px;
        border-radius: 18px;
        border: 1px solid #ececf0;
        background:
          linear-gradient(135deg, rgba(118, 100, 246, 0.06), rgba(23, 23, 28, 0.02)),
          #fff;
      }

      .hero-title {
        margin: 0 0 12px;
        font-size: 2.2rem;
        line-height: 1.08;
        font-weight: 760;
      }

      .hero-subtitle {
        margin: 0;
        color: var(--muted);
        font-size: 0.96rem;
        line-height: 1.55;
      }

      .hero-actions {
        margin-top: 24px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .hero-button {
        height: 40px;
        border-radius: 12px;
        padding: 0 15px;
        border: 1px solid #eceaf0;
        background: #fff;
        color: #23242b;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.82rem;
        font-weight: 620;
      }

      .hero-button.primary {
        background: #18181d;
        color: #fff;
        border-color: #18181d;
      }

      .project-section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
      }

      .project-section-head h2 {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 720;
      }

      .section-note {
        color: var(--muted);
        font-size: 0.8rem;
        display: none;
      }

      .project-feedback-panel {
        margin-bottom: 30px;
        border: 1px solid #e8e8ee;
        border-radius: 14px;
        background: #fff;
        padding: 16px;
        display: grid;
        grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1fr);
        gap: 16px;
        align-items: start;
      }

      .project-feedback-title {
        font-size: 1rem;
        font-weight: 780;
      }

      .project-feedback-copy {
        margin-top: 6px;
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.6;
      }

      .project-feedback-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }

      .project-feedback-chips span {
        border: 1px solid #e9e8ef;
        border-radius: 999px;
        background: #f7f7fa;
        padding: 6px 10px;
        color: #4a3fd4;
        font-size: 0.78rem;
        font-weight: 720;
      }

      .project-feedback-form {
        display: grid;
        grid-template-columns: 130px minmax(160px, 1fr) auto;
        gap: 8px;
      }

      .project-feedback-form select,
      .project-feedback-form input,
      .project-feedback-form textarea {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        color: var(--text);
        font: inherit;
        font-size: 0.82rem;
        outline: none;
      }

      .project-feedback-form select,
      .project-feedback-form input {
        height: 40px;
        padding: 0 11px;
      }

      .project-feedback-form textarea {
        grid-column: 1 / -1;
        min-height: 76px;
        resize: vertical;
        padding: 10px 11px;
        line-height: 1.55;
      }

      .project-feedback-status {
        grid-column: 1 / -1;
        min-height: 18px;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .project-feedback-status.success {
        color: #05844d;
      }

      .project-feedback-status.error {
        color: #d92d20;
      }

      .demo-note {
        color: var(--muted);
        font-size: 0.84rem;
      }

      .project-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 14px;
      }

      .project-bulk-toolbar {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 8px 0 10px;
      }

      .project-bulk-toolbar button {
        height: 28px;
        padding: 0 10px;
        border: 1px solid #d8e2ef;
        border-radius: 8px;
        background: #fff;
        color: #334155;
        font: inherit;
        font-size: 0.72rem;
        font-weight: 800;
        cursor: pointer;
      }

      .project-bulk-toolbar button[data-project-bulk-action="delete"] {
        border-color: #fecaca;
        background: #fff5f5;
        color: #b42318;
      }

      .project-bulk-toolbar button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .project-card {
        min-width: 0;
        padding: 10px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #eeeeef;
        box-shadow: none;
        cursor: pointer;
        position: relative;
      }

      .project-card.multi-selecting {
        cursor: default;
      }

      .project-card.selected {
        border-color: #2563eb;
        background: #eff6ff;
      }

      .project-select-toggle {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 9;
        width: 24px;
        height: 24px;
        border: 1px solid #cbd5e1;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.96);
        color: #1d4ed8;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
      }

      .project-card.selected .project-select-toggle {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
      }

      .project-card.demo-card {
        cursor: default;
      }

      .project-card.featured {
        grid-column: span 2;
      }

      .project-delete {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 8;
        height: 32px;
        padding: 0 12px;
        border: 1px solid rgba(185, 28, 28, 0.14);
        border-radius: 999px;
        background: #dc2626;
        color: #fff;
        font-size: 0.78rem;
        font-weight: 720;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        opacity: 0.96;
        box-shadow: 0 8px 22px rgba(220, 38, 38, 0.18);
        transition: background 140ms ease, color 140ms ease, opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease;
      }

      .project-lock {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 9;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid rgba(23, 23, 28, 0.08);
        background: rgba(255, 255, 255, 0.92);
        color: #4d5058;
        font-size: 0.74rem;
        display: inline-flex;
        align-items: center;
      }

      .project-delete:hover {
        opacity: 1;
        background: #b91c1c;
        border-color: rgba(185, 28, 28, 0.3);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(185, 28, 28, 0.24);
      }

      .project-confirm {
        position: absolute;
        inset: 10px;
        z-index: 12;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid #eee9ef;
        backdrop-filter: blur(12px);
        display: grid;
        place-items: center;
        padding: 18px;
        box-shadow: 0 18px 42px rgba(24, 24, 29, 0.12);
      }

      .project-confirm-box {
        width: min(100%, 260px);
        display: grid;
        gap: 12px;
        text-align: center;
      }

      .project-confirm-title {
        font-size: 0.92rem;
        font-weight: 720;
      }

      .project-confirm-note {
        color: var(--muted);
        font-size: 0.76rem;
        line-height: 1.5;
      }

      .project-confirm-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
      }

      .project-confirm-actions button {
        height: 32px;
        padding: 0 13px;
        border-radius: 999px;
        border: 1px solid #ececf0;
        background: #fff;
        color: #3f414b;
        font-size: 0.76rem;
      }

      .project-confirm-actions .danger {
        background: #18181d;
        border-color: #18181d;
        color: #fff;
      }

      .thumb {
        height: 186px;
        border-radius: 10px;
        border: 1px solid #eeeeef;
        background: #f7f7f8;
        overflow: hidden;
        position: relative;
      }

      .project-card.featured .thumb {
        height: 186px;
      }

      .new-thumb {
        display: grid;
        place-items: center;
        color: #6e7280;
        font-size: 1.7rem;
        background:
          radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), transparent 48%),
          linear-gradient(180deg, #f8f6f9 0%, #f1edf3 100%);
      }

      .thumb.cover-thumb {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
      }

      .thumb.cover-thumb.multi-cover,
      .project-hover-preview-media.multi-cover {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .thumb.cover-thumb.version-cover-count-3,
      .project-hover-preview-media.version-cover-count-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .thumb.cover-thumb.version-cover-count-4,
      .thumb.cover-thumb.version-cover-count-5,
      .thumb.cover-thumb.version-cover-count-6,
      .project-hover-preview-media.version-cover-count-4,
      .project-hover-preview-media.version-cover-count-5,
      .project-hover-preview-media.version-cover-count-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
      }

      .thumb.cover-thumb.version-cover-count-4 .project-cover-tile:nth-child(1),
      .thumb.cover-thumb.version-cover-count-4 .project-cover-tile:nth-child(2),
      .thumb.cover-thumb.version-cover-count-4 .project-cover-tile:nth-child(3),
      .thumb.cover-thumb.version-cover-count-4 .project-cover-tile:nth-child(4),
      .thumb.cover-thumb.version-cover-count-5 .project-cover-tile:nth-child(1),
      .thumb.cover-thumb.version-cover-count-5 .project-cover-tile:nth-child(2),
      .thumb.cover-thumb.version-cover-count-5 .project-cover-tile:nth-child(3),
      .thumb.cover-thumb.version-cover-count-5 .project-cover-tile:nth-child(4),
      .thumb.cover-thumb.version-cover-count-5 .project-cover-tile:nth-child(5),
      .thumb.cover-thumb.version-cover-count-6 .project-cover-tile:nth-child(1),
      .thumb.cover-thumb.version-cover-count-6 .project-cover-tile:nth-child(2),
      .thumb.cover-thumb.version-cover-count-6 .project-cover-tile:nth-child(3),
      .thumb.cover-thumb.version-cover-count-6 .project-cover-tile:nth-child(4),
      .thumb.cover-thumb.version-cover-count-6 .project-cover-tile:nth-child(5),
      .thumb.cover-thumb.version-cover-count-6 .project-cover-tile:nth-child(6),
      .project-hover-preview-media.version-cover-count-4 .project-cover-tile:nth-child(1),
      .project-hover-preview-media.version-cover-count-4 .project-cover-tile:nth-child(2),
      .project-hover-preview-media.version-cover-count-4 .project-cover-tile:nth-child(3),
      .project-hover-preview-media.version-cover-count-4 .project-cover-tile:nth-child(4),
      .project-hover-preview-media.version-cover-count-5 .project-cover-tile:nth-child(1),
      .project-hover-preview-media.version-cover-count-5 .project-cover-tile:nth-child(2),
      .project-hover-preview-media.version-cover-count-5 .project-cover-tile:nth-child(3),
      .project-hover-preview-media.version-cover-count-5 .project-cover-tile:nth-child(4),
      .project-hover-preview-media.version-cover-count-5 .project-cover-tile:nth-child(5),
      .project-hover-preview-media.version-cover-count-6 .project-cover-tile:nth-child(1),
      .project-hover-preview-media.version-cover-count-6 .project-cover-tile:nth-child(2),
      .project-hover-preview-media.version-cover-count-6 .project-cover-tile:nth-child(3),
      .project-hover-preview-media.version-cover-count-6 .project-cover-tile:nth-child(4),
      .project-hover-preview-media.version-cover-count-6 .project-cover-tile:nth-child(5),
      .project-hover-preview-media.version-cover-count-6 .project-cover-tile:nth-child(6) {
        grid-column: auto;
        grid-row: auto;
      }

      .project-cover-tile {
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        background-color: #f7f7f8;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
      }

      .project-cover-label {
        position: absolute;
        left: 7px;
        bottom: 7px;
        z-index: 2;
        max-width: calc(100% - 14px);
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.74);
        color: #fff;
        font-size: 0.68rem;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
      }

      .empty-projects {
        padding: 26px;
        border: 1px dashed #e3dfe7;
        border-radius: 22px;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.62);
        font-size: 0.86rem;
      }

      .thumb-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: 100%;
      }

      .food-img {
        background-size: cover;
        background-position: center;
      }

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

      .title-row {
        margin-top: 4px;
        font-weight: 650;
        font-size: 0.98rem;
      }

      .date-row {
        margin-top: 6px;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .workspace {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(480px, 540px);
        overflow: hidden;
      }

      .canvas {
        position: relative;
        background: var(--bg);
        overflow-x: auto;
        overflow-y: hidden;
        display: grid;
        grid-template-rows: 56px minmax(0, 1fr) 96px;
        min-height: 0;
        isolation: isolate;
      }

      .canvas-topbar {
        padding: 14px 22px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .mode-tabs {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
      }

      .canvas-mode-tabs {
        display: none !important;
      }

      .canvas-workspace-title {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: #1f2937;
        white-space: nowrap;
      }

      .canvas-workspace-title strong {
        font-size: 0.96rem;
        font-weight: 760;
      }

      .canvas-workspace-title span {
        min-width: 0;
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #64748b;
        font-size: 0.78rem;
      }

      .mode-tab {
        height: 34px;
        padding: 0 14px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #7a7d88;
        font-size: 0.8rem;
        font-weight: 560;
      }

      .mode-tab.active {
        background: #f3f2f7;
        color: #17171c;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 0.77rem;
        display: none;
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #c9cad1;
      }

      .status-dot.generating {
        background: var(--purple);
      }

      .status-dot.error {
        background: #d94668;
      }

      .canvas-stage {
        padding: 14px 22px 18px;
        position: relative;
        z-index: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: 218px minmax(0, 1fr);
        gap: 12px;
        align-items: stretch;
      }

      .canvas-layer-panel {
        min-height: 0;
        border-right: 1px solid #dfe6ef;
        background: rgba(255, 255, 255, 0.72);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
      }

      .projects-mode .canvas-layer-panel {
        display: none;
      }

      .projects-mode .canvas-stage {
        display: block;
      }

      .workspace-mode:not(.has-canvas-version) .canvas-stage {
        display: block;
      }

      .workspace-mode:not(.has-canvas-version) .canvas-layer-panel {
        display: none;
      }

      .canvas-layer-panel__head {
        height: 48px;
        padding: 0 10px 0 12px;
        border-bottom: 1px solid #e4ebf3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }

      .canvas-layer-panel__head div {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .canvas-layer-panel__head strong {
        color: #172033;
        font-size: 0.82rem;
        font-weight: 800;
      }

      .canvas-layer-panel__head span {
        min-width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #eef4ff;
        color: #2563eb;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        font-weight: 800;
      }

      .canvas-layer-panel__add {
        width: 28px;
        height: 28px;
        border: 1px solid #d7e0ec;
        border-radius: 7px;
        background: #ffffff;
        color: #1f2937;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
      }

      .canvas-layer-panel__head-actions {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .canvas-layer-panel__delete {
        min-width: 32px;
        height: 28px;
        padding: 0 8px;
        border: 1px solid #fecaca;
        border-radius: 7px;
        background: #fff5f5;
        color: #b42318;
        cursor: pointer;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1;
      }

      .canvas-layer-panel__delete:disabled {
        opacity: 0.42;
        cursor: not-allowed;
      }

      .canvas-layer-panel__add:hover {
        border-color: #2563eb;
        color: #2563eb;
      }

      .canvas-layer-list {
        min-height: 0;
        overflow: auto;
        padding: 8px;
      }

      .canvas-layer-empty {
        padding: 14px 8px;
        color: #7b8494;
        font-size: 0.76rem;
        line-height: 1.5;
      }

      .canvas-layer-item {
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        overflow: hidden;
      }

      .canvas-layer-item + .canvas-layer-item {
        margin-top: 6px;
      }

      .canvas-layer-item.selected {
        border-color: #bfdbfe;
        background: #eff6ff;
      }

      .canvas-layer-item.readonly {
        opacity: 0.82;
      }

      .canvas-layer-main {
        width: 100%;
        min-height: 46px;
        padding: 7px 8px;
        border: 0;
        background: transparent;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        text-align: left;
        cursor: pointer;
      }

      .canvas-layer-kind {
        height: 24px;
        border-radius: 6px;
        background: #f1f5f9;
        color: #475569;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.66rem;
        font-weight: 800;
      }

      .canvas-layer-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .canvas-layer-copy strong,
      .canvas-layer-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .canvas-layer-copy strong {
        color: #1f2937;
        font-size: 0.76rem;
        font-weight: 760;
      }

      .canvas-layer-copy small {
        color: #667085;
        font-size: 0.66rem;
      }

      .canvas-layer-actions {
        padding: 0 8px 7px 50px;
        display: flex;
        gap: 4px;
      }

      .canvas-layer-actions button {
        width: 24px;
        height: 22px;
        border: 1px solid #dce5ef;
        border-radius: 6px;
        background: #ffffff;
        color: #475569;
        font-size: 0.65rem;
        cursor: pointer;
      }

      .canvas-layer-actions button:hover:not(:disabled) {
        border-color: #2563eb;
        color: #2563eb;
      }

      .canvas-layer-actions button:disabled {
        opacity: 0.42;
        cursor: not-allowed;
      }

      .canvas-frame {
        height: 100%;
        border: 0;
        border-radius: 12px;
        background: #f2f2f3;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: auto;
        overscroll-behavior: contain;
      }

      .canvas-wrapper {
        min-width: 100%;
        min-height: 100%;
        padding: 34px;
        display: grid;
        place-items: center;
      }

      .canvas-paper {
        width: min(100%, 760px);
        aspect-ratio: var(--paper-ratio, 4 / 5);
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        border: 0;
        padding: 0;
        position: relative;
        overflow: visible;
        transform: scale(var(--canvas-zoom, 1));
        transform-origin: center center;
        transition: transform 120ms ease;
      }

      .zoom-controls {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid #ececf0;
      }

      .canvas-tool-switch {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid #ececf0;
      }

      .canvas-tool-button {
        min-width: 44px;
        height: 28px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #4e515b;
        font-size: 0.75rem;
        cursor: pointer;
        white-space: nowrap;
      }

      .canvas-tool-button:hover {
        background: #f4f4f6;
      }

      .canvas-tool-button.active {
        background: #172033;
        color: #fff;
      }

      .zoom-button {
        min-width: 30px;
        height: 28px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #4e515b;
        font-size: 0.75rem;
        cursor: pointer;
        white-space: nowrap;
      }

      .zoom-button:hover {
        background: #f4f4f6;
      }

      .zoom-value {
        min-width: 44px;
        text-align: center;
        color: #6b6e79;
        font-size: 0.74rem;
        font-variant-numeric: tabular-nums;
      }

      .canvas-paper::before {
        display: none;
      }

      .safe-area {
        display: none;
      }

      .paper-meta {
        display: none;
      }

      .paper-meta strong {
        color: #24252d;
        font-weight: 680;
      }

      .empty-state {
        text-align: center;
        position: absolute;
        inset: 32px;
        display: grid;
        place-items: center;
        z-index: 2;
        pointer-events: none;
      }

      .empty-title {
        font-size: 1.02rem;
        font-weight: 620;
        max-width: min(220px, 84%);
        margin: 0 auto;
        color: #1f2937;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .empty-note {
        display: none;
      }

      .result-view {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
      }

      .result-art {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 0;
        box-shadow: none;
        z-index: 1;
      }

      .canvas-layer-surface {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: auto;
      }

      .canvas-render-layer {
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: auto;
        cursor: move;
      }

      .canvas-render-layer.selected {
        outline: 2px solid rgba(37, 99, 235, 0.64);
        outline-offset: 3px;
      }

      .canvas-render-layer.locked {
        cursor: default;
      }

      .canvas-layer-resize-handle {
        position: absolute;
        width: 12px;
        height: 12px;
        border: 2px solid #ffffff;
        border-radius: 999px;
        background: #2563eb;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.22);
        pointer-events: auto;
      }

      .canvas-layer-resize-handle.nw { left: -7px; top: -7px; cursor: nwse-resize; }
      .canvas-layer-resize-handle.n { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }
      .canvas-layer-resize-handle.ne { right: -7px; top: -7px; cursor: nesw-resize; }
      .canvas-layer-resize-handle.e { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
      .canvas-layer-resize-handle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
      .canvas-layer-resize-handle.s { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
      .canvas-layer-resize-handle.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
      .canvas-layer-resize-handle.w { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

	      .canvas-layer-context-menu {
	        position: absolute;
	        z-index: 999;
	        width: 176px;
	        max-height: min(520px, calc(100% - 16px));
	        overflow: auto;
	        padding: 6px;
        border: 1px solid #d8e1ec;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
        pointer-events: auto;
      }

      .canvas-layer-context-menu button {
        width: 100%;
        height: 28px;
        padding: 0 9px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #263244;
        text-align: left;
        font-size: 0.76rem;
        cursor: pointer;
      }

      .canvas-layer-context-menu button:hover {
        background: #f1f5f9;
      }

      .canvas-layer-context-menu button.danger {
        color: #dc2626;
      }

      .canvas-selection-box {
        position: absolute;
        z-index: 998;
        border: 1px solid #2563eb;
        background: rgba(37, 99, 235, 0.12);
        pointer-events: none;
      }

      .canvas-ai-tool-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .canvas-ai-tool-actions .composer-pill:disabled {
        opacity: 0.54;
        cursor: not-allowed;
      }

      .text-layer {
        position: absolute;
        inset: 0;
        z-index: 4;
      }

      .canvas-text-block {
        position: absolute;
        transform: translate(-50%, -50%);
        min-width: 120px;
        max-width: 82%;
        padding: 6px 10px;
        border: 1px dashed transparent;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.68);
        color: #111827;
        font-size: clamp(16px, 2.6vw, 34px);
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
        cursor: move;
        user-select: none;
      }

      .canvas-text-block.selected,
      .canvas-text-block:focus,
      .canvas-text-block.editing {
        border-color: #2563eb;
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
      }

      .canvas-text-block.locked {
        cursor: default;
        opacity: 0.78;
      }

      .photo-layer {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
      }

      .photo-overlay {
        position: absolute;
        border: 2px solid rgba(118, 100, 246, 0.86);
        border-radius: 12px;
        background-size: cover;
        background-position: center;
        box-shadow: 0 10px 26px rgba(24, 24, 29, 0.16);
        cursor: move;
        pointer-events: auto;
        transform: translate(-50%, -50%);
      }

      .photo-overlay::after {
        display: none;
      }

      .photo-resize-handle {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        background: #7664f6;
        border: 2px solid #fff;
        box-shadow: 0 4px 10px rgba(24, 24, 29, 0.18);
        display: none;
      }

      .photo-overlay.selected .photo-resize-handle {
        display: block;
      }

      .photo-resize-handle[data-resize-handle="n"] {
        top: -8px;
        left: calc(50% - 7px);
        cursor: ns-resize;
      }

      .photo-resize-handle[data-resize-handle="s"] {
        bottom: -8px;
        left: calc(50% - 7px);
        cursor: ns-resize;
      }

      .photo-resize-handle[data-resize-handle="e"] {
        right: -8px;
        top: calc(50% - 7px);
        cursor: ew-resize;
      }

      .photo-resize-handle[data-resize-handle="w"] {
        left: -8px;
        top: calc(50% - 7px);
        cursor: ew-resize;
      }

      .photo-resize-handle[data-resize-handle="ne"],
      .photo-resize-handle[data-resize-handle="nw"],
      .photo-resize-handle[data-resize-handle="se"],
      .photo-resize-handle[data-resize-handle="sw"] {
        cursor: nwse-resize;
      }

      .photo-resize-handle[data-resize-handle="ne"] {
        top: -8px;
        right: -8px;
      }

      .photo-resize-handle[data-resize-handle="nw"] {
        top: -8px;
        left: -8px;
      }

      .photo-resize-handle[data-resize-handle="se"] {
        right: -8px;
        bottom: -8px;
      }

      .photo-resize-handle[data-resize-handle="sw"] {
        left: -8px;
        bottom: -8px;
      }

      .photo-remove-button {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 24px;
        height: 24px;
        border: 2px solid #fff;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: 15px;
        font-weight: 800;
        line-height: 18px;
        display: grid;
        place-items: center;
        cursor: pointer;
        box-shadow: 0 6px 14px rgba(127, 29, 29, 0.22);
        display: none;
      }

      .photo-overlay.selected .photo-remove-button {
        display: grid;
      }

      .photo-tools {
        display: none;
        margin-top: 10px;
        padding: 12px;
        border: 1px solid #ececf0;
        border-radius: 16px;
        background: #f8f8fb;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
      }

      .photo-tools.active {
        display: grid;
      }

      .photo-tools label {
        display: grid;
        gap: 4px;
        color: #6b6e79;
        font-size: 0.68rem;
        font-weight: 650;
      }

      .photo-tools label.wide {
        grid-column: 1 / -1;
      }

      .photo-tools input,
      .photo-tools select {
        min-width: 0;
        height: 30px;
        border: 1px solid #dedee7;
        border-radius: 10px;
        padding: 0 8px;
        background: #fff;
        color: #25262d;
        font: inherit;
      }

      .photo-tool-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .photo-tool-actions .composer-pill {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
      }

      .reference-tools {
        display: none;
        margin-top: 10px;
        padding: 12px;
        border: 1px solid #ececf0;
        border-radius: 16px;
        background: #f8f8fb;
        gap: 10px;
        max-height: 220px;
        overflow: auto;
        overscroll-behavior: contain;
      }

      .reference-tools.active {
        display: grid;
      }

      .document-tools {
        display: none;
        margin-top: 10px;
        padding: 12px;
        border: 1px solid #ececf0;
        border-radius: 16px;
        background: #f8f8fb;
        gap: 8px;
      }

      .document-tools.active {
        display: grid;
      }

      .document-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
      }

      .document-clear-button {
        width: auto;
        min-height: 28px;
        padding: 0 10px;
        background: #fff;
      }

      .document-preview {
        max-height: 132px;
        overflow: auto;
        padding: 10px;
        border: 1px solid #e2e2ea;
        border-radius: 12px;
        background: #fff;
        color: #4b4d57;
        font-size: 0.72rem;
        line-height: 1.55;
        white-space: pre-wrap;
      }

      .document-image-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-height: 86px;
        overflow: auto;
      }

      .document-image-preview[hidden] {
        display: none !important;
      }

      .document-image-chip {
        width: 58px;
        height: 58px;
        border: 1px solid #ececf0;
        border-radius: 10px;
        background: #fff center / cover no-repeat;
        box-shadow: 0 6px 16px rgba(18, 18, 24, 0.08);
      }

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

      .document-page-controls-quick {
        padding: 10px;
        border: 1px solid #ececf0;
        border-radius: 12px;
        background: #f8f8fb;
      }

      .document-page-controls[hidden] {
        display: none !important;
      }

      .document-page-controls label {
        display: grid;
        gap: 5px;
        color: #6f7280;
        font-size: 0.72rem;
      }

      .document-page-controls input {
        width: 100%;
        min-height: 34px;
        border: 1px solid #dedee8;
        border-radius: 10px;
        background: #fff;
        color: #20212a;
        font: inherit;
        font-size: 0.82rem;
        padding: 0 10px;
      }

      .document-page-controls input:focus {
        outline: none;
        border-color: rgba(104, 77, 255, 0.45);
        box-shadow: 0 0 0 3px rgba(104, 77, 255, 0.12);
      }

      .document-outline {
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid #ececf0;
        border-radius: 12px;
        background: #fff;
      }

      .document-outline-quick {
        grid-column: 1 / -1;
        margin-top: 2px;
      }

      .document-outline[hidden] {
        display: none !important;
      }

      .document-outline-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        color: #4b4d57;
        font-size: 0.76rem;
        font-weight: 700;
      }

      .document-outline-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
      }

      .document-outline-actions .composer-pill {
        min-height: 28px;
        padding: 0 9px;
        background: #fff;
      }

      .document-outline-list {
        display: grid;
        gap: 8px;
        max-height: 260px;
        overflow: auto;
      }

      .document-series-style {
        display: grid;
        gap: 5px;
        padding: 8px 9px;
        border: 1px solid #e8e3ff;
        border-radius: 10px;
        background: #f8f6ff;
        color: #4f46a3;
        font-size: 0.72rem;
        line-height: 1.5;
        white-space: pre-wrap;
      }

      .document-series-style strong {
        color: #3f368f;
      }

      .document-outline-source {
        width: fit-content;
        padding: 4px 8px;
        border-radius: 999px;
        background: #eefbf3;
        color: #237342;
        border: 1px solid #ccefd8;
        font-size: 0.7rem;
        font-weight: 800;
      }

      .document-outline-empty {
        padding: 10px;
        border: 1px dashed #d8d4ea;
        border-radius: 10px;
        background: #fbfbff;
        color: #7a7d8a;
        font-size: 0.72rem;
        line-height: 1.5;
      }

      .document-outline-item {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
      }

      .document-outline-page {
        min-height: 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: #f5f3ff;
        color: #5a4bcf;
        font-size: 0.72rem;
        font-weight: 800;
      }

      .document-outline-text {
        width: 100%;
        min-height: 70px;
        resize: vertical;
        border: 1px solid #dedee8;
        border-radius: 10px;
        background: #fff;
        color: #30323a;
        font: inherit;
        font-size: 0.74rem;
        line-height: 1.5;
        padding: 8px 9px;
      }

      .document-outline-text:focus {
        outline: none;
        border-color: rgba(104, 77, 255, 0.45);
        box-shadow: 0 0 0 3px rgba(104, 77, 255, 0.12);
      }

      .document-structure {
        display: grid;
        gap: 8px;
      }

      .document-structure[hidden] {
        display: none !important;
      }

      .document-structure-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        color: #6f7280;
        font-size: 0.72rem;
      }

      .document-structure-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px 12px;
        align-items: center;
      }

      .document-structure-switcher {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
      }

      .document-structure-switcher[hidden] {
        display: none !important;
      }

      .document-structure-switcher .composer-pill {
        min-height: 28px;
        padding: 0 10px;
        background: #fff;
      }

      .document-structure-switcher .composer-pill:disabled {
        opacity: 0.45;
        cursor: default;
      }

      #documentTableSelect {
        min-width: 132px;
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid #dedee8;
        border-radius: 999px;
        background: #fff;
        color: #4b4d57;
        font-size: 0.72rem;
      }

      #documentTableSummary {
        color: #7a7d8a;
        white-space: nowrap;
      }

      #documentTableSummary[hidden] {
        display: none !important;
      }

      #documentActiveTableLabel {
        min-width: 82px;
        text-align: center;
        color: #4b4d57;
      }

      @media (max-width: 720px) {
        .document-structure-head {
          align-items: start;
          flex-direction: column;
        }

        .document-structure-meta {
          width: 100%;
          justify-content: space-between;
        }
      }

      .document-table-preview {
        overflow: auto;
        border: 1px solid #e2e2ea;
        border-radius: 12px;
        background: #fff;
      }

      .document-table-preview table {
        width: 100%;
        border-collapse: collapse;
      }

      .document-table-preview td {
        min-width: 88px;
        padding: 7px 8px;
        border: 1px solid #ececf3;
        color: #3e414a;
        font-size: 0.72rem;
        line-height: 1.4;
        vertical-align: middle;
        background: #fff;
      }

      .document-table-preview td.merged-cell {
        background: #f7f6ff;
        color: #6b5bd2;
        font-weight: 600;
      }

      .document-table-preview td.merge-source-cell {
        background: #fff3df;
        color: #9a5a12;
        font-weight: 600;
      }

      .document-table-preview td.span-cell {
        background: #fffaf0;
      }

      .reference-upload-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
        gap: 8px;
      }

      .reference-guide {
        display: grid;
        gap: 5px;
        color: #6f7280;
        font-size: 0.74rem;
        line-height: 1.38;
      }

      .reference-guide strong {
        color: #30323b;
      }

      .reference-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-height: 72px;
        overflow: auto;
        padding-right: 2px;
      }

      .reference-chip {
        width: 52px;
        height: 52px;
        border: 1px solid #dedee7;
        border-radius: 12px;
        background: #f2f2f5 center / cover no-repeat;
        position: relative;
        overflow: hidden;
      }

      .reference-chip::after {
        content: attr(data-role-label);
        position: absolute;
        left: 4px;
        bottom: 4px;
        max-width: calc(100% - 8px);
        padding: 1px 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #272932;
        font-size: 0.62rem;
        font-weight: 720;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .reference-chip button {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 18px;
        height: 18px;
        border: 0;
        border-radius: 999px;
        padding: 0;
        background: rgba(23, 23, 28, 0.82);
        color: #fff;
        font-size: 0.7rem;
        line-height: 18px;
      }

      .canvas-photo-button {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 7;
        height: 34px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.86);
        border-radius: 999px;
        background: linear-gradient(135deg, #7664f6, #a78bfa);
        color: #fff;
        font-weight: 760;
        font-size: 0.78rem;
        box-shadow: 0 12px 26px rgba(73, 59, 194, 0.24);
        cursor: pointer;
      }

      .canvas-photo-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 32px rgba(73, 59, 194, 0.28);
      }

      .canvas-parent-version-button {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 8;
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid rgba(191, 219, 254, 0.95);
        border-radius: 999px;
        background: rgba(239, 246, 255, 0.96);
        color: #1d4ed8;
        font-weight: 820;
        font-size: 0.78rem;
        box-shadow: 0 12px 26px rgba(37, 99, 235, 0.14);
        cursor: pointer;
      }

      .canvas-parent-version-button:hover {
        transform: translateY(-1px);
        background: #dbeafe;
      }

      .mask-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        cursor: crosshair;
        display: none;
        touch-action: none;
        outline: none;
        border: 0;
        box-shadow: none;
      }

      .editing-mask .mask-canvas {
        display: block;
      }

      .editing-mask .photo-layer {
        display: none;
      }

      .editing-mask .result-art {
        filter: saturate(0.92);
      }

      .loading-shell {
        position: absolute;
        inset: 32px;
        width: min(76%, 460px);
        display: grid;
        gap: 16px;
        align-content: center;
        justify-self: center;
        align-self: center;
        z-index: 2;
      }

      .loading-title {
        text-align: center;
        font-size: 0.92rem;
        font-weight: 700;
      }

      .progress-track {
        height: 10px;
        border-radius: 999px;
        background: #ece9f2;
        overflow: hidden;
      }

      .progress-bar {
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background: linear-gradient(90deg, #7664f6 0%, #8b7df7 100%);
        transition: width 220ms linear;
      }

      .loading-note {
        text-align: center;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .generation-leave-note {
        margin-top: 2px;
        padding: 9px 10px;
        border-radius: 12px;
        border: 1px solid #ddd8ff;
        background: #f5f2ff;
        color: #5547b8;
        font-size: 0.75rem;
        line-height: 1.45;
        text-align: center;
      }

      .generation-leave-note[hidden] {
        display: none;
      }

      .error-state {
        position: absolute;
        inset: 32px;
        z-index: 2;
        display: grid;
        place-items: center;
        text-align: center;
      }

      .error-card {
        width: min(78%, 380px);
        padding: 24px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid #f0d7df;
        box-shadow: 0 20px 44px rgba(122, 46, 72, 0.08);
      }

      .error-title {
        font-weight: 720;
        color: #9d294c;
      }

      .error-note {
        margin-top: 8px;
        color: #7b6570;
        font-size: 0.78rem;
        line-height: 1.55;
      }

      .retry-button {
        margin-top: 16px;
        height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        border: 0;
        background: #18181d;
        color: #fff;
        font-weight: 680;
        font-size: 0.78rem;
      }

      .version-bar {
        min-height: 0;
        padding: 12px 22px 16px;
        display: flex;
        align-items: flex-end;
        scrollbar-width: thin;
        scrollbar-color: #d8d2ff transparent;
        gap: 10px;
        overflow: hidden;
        position: relative;
        z-index: 300;
      }

      .version-track {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 18px 10px 12px;
        scroll-padding: 18px 10px;
        align-items: flex-end;
        cursor: grab;
        scrollbar-width: thin;
        scrollbar-color: #d8d2ff transparent;
      }

      .version-track.dragging {
        cursor: grabbing;
        user-select: none;
        scroll-behavior: auto;
      }

      .version-track::-webkit-scrollbar {
        height: 8px;
      }

      .version-track::-webkit-scrollbar-track {
        background: transparent;
      }

      .version-track::-webkit-scrollbar-thumb {
        background: #d8d2ff;
        border-radius: 999px;
      }

      .version-pill {
        width: 92px;
        height: 68px;
        padding: 5px;
        border-radius: 16px;
        border: 1px solid #ececf0;
        background: rgba(255, 255, 255, 0.92);
        color: #585b68;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-rows: 1fr;
        gap: 6px;
        flex: 0 0 auto;
        font-size: 0.73rem;
        min-width: 92px;
        cursor: pointer;
        position: relative;
        overflow: visible;
        transform-origin: center bottom;
        transition: transform 190ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
      }

      .version-pill:hover {
        z-index: 500;
        transform: translateY(-4px);
        background: #fff;
        border-color: #d8d2ff;
        box-shadow: 0 8px 18px rgba(24, 24, 29, 0.12);
      }

      .version-pill.active {
        background: #f7f5ff;
        border-color: #cfc7ff;
        color: #17171c;
        box-shadow: 0 8px 18px rgba(118, 100, 246, 0.16);
      }

      .version-pill.derived-production {
        border-color: #d8e3f8;
        background: #f7fbff;
      }

      .version-pill.derived-production.active {
        border-color: #9ebcf0;
        background: #eef6ff;
        box-shadow: 0 8px 18px rgba(64, 120, 210, 0.14);
      }

      .version-thumb {
        display: block;
        width: 46px;
        height: 56px;
        border-radius: 12px;
        background-color: #f2f3f7;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 1px solid #f0eef5;
        overflow: hidden;
        position: relative;
        z-index: 1;
      }

      .version-copy {
        min-width: 0;
        align-self: center;
        position: relative;
        z-index: 2;
        transform-origin: left center;
        transition: none;
      }

      .version-label {
        font-weight: 600;
        line-height: 1.1;
      }

      .version-meta {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 0.63rem;
        line-height: 1.05;
      }

      .version-current {
        display: none;
      }

      .version-actions {
        display: none;
        align-items: center;
        gap: 3px;
        position: absolute;
        left: 50%;
        bottom: -13px;
        transform: translateX(-50%) scale(0.72);
        padding: 2px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 10px 20px rgba(24, 24, 29, 0.14);
        white-space: nowrap;
        z-index: 30;
      }

      .version-pill:hover .version-actions,
      .version-pill.confirming-delete .version-actions {
        display: flex;
      }

      .version-edit,
      .version-feedback {
        border: 1px solid #ddd6ff;
        background: #f6f4ff;
        color: #5748bf;
        font-size: 0.58rem;
        height: 15px;
        min-width: 22px;
        padding: 0 3px;
        border-radius: 999px;
        font-weight: 700;
      }

      .version-feedback {
        border-color: #d9eadf;
        background: #f2fbf5;
        color: #237342;
      }

      .version-feedback.bad {
        border-color: #fecdd3;
        background: #fff1f2;
        color: #be123c;
      }

      .version-feedback.active {
        border-color: #17171c;
        color: #17171c;
      }

      .version-parent {
        border: 1px solid #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 0.58rem;
        height: 15px;
        min-width: 24px;
        padding: 0 4px;
        border-radius: 999px;
        font-weight: 800;
      }

      .version-delete {
        border: 1px solid transparent;
        background: transparent;
        color: #8a8d97;
        font-size: 0.58rem;
        height: 15px;
        min-width: 22px;
        padding: 0 3px;
        border-radius: 999px;
        opacity: 1;
        transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
      }

      .version-delete.confirm {
        min-width: 70px;
        background: #fff1f2;
        border-color: #fecdd3;
        color: #be123c;
        font-weight: 700;
      }

      .version-empty {
        color: var(--soft);
        font-size: 0.77rem;
        display: inline-flex;
        align-items: center;
      }

      .version-status {
        height: 34px;
        padding: 0 10px;
        border-radius: 12px;
        border: 1px solid #ececf0;
        background: #fff;
        color: #6b6e79;
        display: inline-flex;
        align-items: center;
        font-size: 0.75rem;
        white-space: nowrap;
      }

      #versionStatus {
        display: none;
      }

      #addTitleButton,
      .text-layer {
        display: none;
      }

      .title-block {
        position: absolute;
        min-width: 120px;
        max-width: 72%;
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px solid transparent;
        color: #17171c;
        font-size: 2rem;
        font-weight: 760;
        line-height: 1.1;
        text-align: center;
        letter-spacing: 0;
        cursor: move;
        user-select: none;
        z-index: 4;
        outline: none;
        transform: translate(-50%, -50%);
        transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
      }

      .title-block:hover,
      .title-block.editing {
        border-color: #d9d2ff;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: 0 8px 22px rgba(118, 100, 246, 0.08);
      }

      .title-block[contenteditable="true"] {
        cursor: text;
        user-select: text;
      }

      .title-block.core-values-title {
        min-width: min(54%, 620px);
        padding: 8px 16px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.86);
        font-size: clamp(0.95rem, 2.35vw, 1.8rem);
        color: #b91c1c;
        letter-spacing: 0.06em;
      }

      .title-block.core-values-line {
        min-width: min(58%, 660px);
        padding: 5px 12px;
        border-radius: 14px;
        font-size: clamp(0.74rem, 1.72vw, 1.22rem);
        color: #7f1d1d;
        line-height: 1.35;
        letter-spacing: 0.08em;
        background: rgba(255, 255, 255, 0.82);
      }

      .chat {
        border-left: 1px solid var(--line);
        background: #fff;
        display: grid;
        grid-template-rows: minmax(190px, 1fr) minmax(0, auto);
        min-height: 0;
        min-width: 480px;
        overflow: hidden;
      }

      .skill-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        position: relative;
        z-index: 2;
      }

      .skill {
        min-height: 36px;
        padding: 0 11px;
        border: 1px solid #f1eff3;
        border-radius: 999px;
        background: #fff;
        color: #31333b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.74rem;
        white-space: nowrap;
        min-width: 0;
      }

      .skill.active {
        background: var(--purple-2);
        border-color: #ddd6ff;
        color: #22232b;
      }

      .skill.hidden-skill {
        display: none;
      }

      .panel-scroll {
        min-height: 0;
        overflow: auto;
        padding: 24px 28px 20px;
        scroll-padding-bottom: 84px;
      }

      .panel-group {
        margin-top: 16px;
      }

      .panel-group:first-child {
        margin-top: 0;
      }

      .panel-group h4 {
        margin: 0 0 10px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--muted);
      }

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

      .prompt-head h4 {
        margin: 0;
      }

      .prompt-clear-button {
        height: 28px;
        padding: 0 12px;
        font-size: 0.74rem;
      }

      .step-badge {
        width: 22px;
        height: 22px;
        margin-right: 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #17171c;
        color: #fff;
        font-size: 0.72rem;
        font-weight: 780;
        line-height: 1;
        vertical-align: middle;
      }

      .prompt-card,
      .style-card,
      .ratio-card {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .prompt-card {
        padding: 0;
      }

      .safety-consent {
        margin-top: 10px;
        padding: 12px 13px;
        border: 1px solid #d9d5ff;
        border-radius: 12px;
        background: #f8f6ff;
        color: #424653;
        font-size: 0.78rem;
        line-height: 1.55;
      }

      .safety-consent label {
        display: grid;
        grid-template-columns: 22px 1fr;
        gap: 10px;
        align-items: start;
      }

      .safety-consent input {
        appearance: none;
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        margin: 1px 0 0;
        border: 2px solid #77718f;
        border-radius: 6px;
        background: #fff;
        display: grid;
        place-items: center;
        flex: 0 0 22px;
      }

      .safety-consent input::after {
        content: "";
        width: 9px;
        height: 5px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-45deg) translate(1px, -1px);
        opacity: 0;
      }

      .safety-consent input:checked {
        border-color: #17171c;
        background: #17171c;
      }

      .safety-consent input:checked::after {
        opacity: 1;
      }

      .safety-consent input:focus-visible {
        outline: 3px solid rgba(118,100,246,.22);
        outline-offset: 2px;
      }

      .safety-warning {
        display: none;
        margin-top: 8px;
        color: #b42318;
        font-weight: 700;
      }

      .safety-warning.active {
        display: block;
      }

      .safety-consent a {
        color: #5f52d9;
        font-weight: 800;
        text-decoration: none;
      }

      textarea {
        width: 100%;
        min-height: 220px;
        border: 1px solid var(--line);
        outline: 0;
        resize: none;
        padding: 16px 18px;
        border-radius: 14px;
        color: #30323b;
        line-height: 1.7;
        font-size: 0.92rem;
        background: #fff;
      }

      #batchPromptBox,
      #editPromptBox,
      #productionReferencePromptBox {
        min-height: 132px;
        font-size: 0.84rem;
      }

      .batch-card {
        display: none;
        margin-top: 12px;
      }

      .prompt-suggestions {
        display: grid;
        gap: 8px;
        margin-top: 10px;
      }

      .prompt-suggestions[hidden] {
        display: none;
      }

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

      .suggestion-title {
        color: var(--muted);
        font-size: 0.74rem;
      }

      .suggestion-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .suggestion-tag {
        min-height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px dashed #ddd6ff;
        background: #f8f6ff;
        color: #5a50ba;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.74rem;
        font-weight: 560;
        transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
      }

      .suggestion-tag:hover {
        transform: translateY(-1px);
        background: #f1edff;
        border-color: #cfc5ff;
        box-shadow: 0 8px 18px rgba(118, 100, 246, 0.12);
      }

      .suggestion-tag.active {
        border-style: solid;
        border-color: #7664f6;
        background: #ede9ff;
        color: #4737b7;
        box-shadow: 0 8px 18px rgba(118, 100, 246, 0.14);
      }

      .batch-card.active {
        display: block;
      }

      .batch-card textarea {
        min-height: 128px;
      }

      .batch-actions {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .batch-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .batch-count {
        width: 84px;
        height: 32px;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 0 10px;
        background: #fff;
        color: #30323b;
      }

      .wall-production-preview {
        margin-top: 10px;
        border: 1px solid #e5e5eb;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
        display: none;
      }

      .wall-production-preview.active {
        display: block;
      }

      .wall-production-preview img {
        display: block;
        width: 100%;
        max-height: 260px;
        object-fit: contain;
        background: #fafafa;
      }

      .wall-production-preview-note {
        padding: 8px 10px;
        border-top: 1px solid #ececf0;
        color: #686b75;
        font-size: 0.72rem;
        line-height: 1.5;
      }

      .inline-count {
        width: 72px;
        height: 30px;
        border-radius: 999px;
        font-size: 0.75rem;
        text-align: center;
      }

      .batch-status {
        color: var(--muted);
        font-size: 0.74rem;
        line-height: 1.45;
        white-space: pre-wrap;
      }

      .size-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

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

      .field label {
        color: var(--muted);
        font-size: 0.72rem;
      }

      .field input {
        width: 100%;
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 0 11px;
        background: #fff;
        color: #30323b;
        outline: 0;
      }

      .style-card,
      .ratio-card {
        padding: 0;
      }

      .inline-filter {
        margin-bottom: 8px;
      }

      .inline-filter input {
        width: 100%;
        height: 34px;
        border: 1px solid #ececf0;
        border-radius: 999px;
        background: #fff;
        padding: 0 14px;
        color: #30323b;
        font-size: 0.76rem;
      }

      .size-priority-note {
        margin-top: 8px;
        color: var(--muted);
        font-size: 0.72rem;
        line-height: 1.45;
      }

      .ratio-card.disabled-by-size {
        opacity: 0.52;
      }

      .ratio-card.disabled-by-size .tag-button {
        pointer-events: none;
      }

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

      .group-pill {
        height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        background: #f3f2f7;
        color: #5f6270;
        font-size: 0.72rem;
        display: inline-flex;
        align-items: center;
      }

      .core-shell {
        display: grid;
        gap: 16px;
      }

      .subtle-label {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 520;
      }

      .advanced-shell {
        margin-top: 16px;
        display: grid;
        gap: 18px;
      }

      .advanced-header {
        display: grid;
        gap: 4px;
      }

      .advanced-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .advanced-title strong {
        font-size: 0.82rem;
        color: #30323b;
      }

      .advanced-meta {
        color: var(--muted);
        font-size: 0.74rem;
      }

      .advanced-body {
        display: grid;
        gap: 16px;
      }

      .advanced-toggle-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
      }

      .advanced-toggle-button {
        min-height: 34px;
        border: 1px solid #e9e6f2;
        border-radius: 12px;
        background: #fff;
        color: #4d4f5a;
        padding: 0 14px;
        font-size: 0.76rem;
        font-weight: 650;
        box-shadow: 0 2px 6px rgba(20, 20, 24, 0.04);
      }

      .advanced-toggle-button:hover {
        border-color: #d8d0ff;
        color: #4a3fb5;
        box-shadow: 0 8px 18px rgba(20, 20, 24, 0.08);
      }

      .advanced-toggle-button.active {
        background: #f3efff;
        border-color: #d8d0ff;
        color: #4a3fb5;
      }

      .advanced-toggle-note {
        color: var(--muted);
        font-size: 0.72rem;
        line-height: 1.45;
      }

      .panel-group.condensed {
        margin: 0;
      }

      .style-tags,
      .ratio-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        position: relative;
        z-index: 2;
      }

      .tag-button {
        min-height: 34px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid #e9e6f2;
        background: #fff;
        color: #4d4f5a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.76rem;
        font-weight: 560;
        box-shadow: 0 2px 6px rgba(20, 20, 24, 0.04);
        transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
      }

      .tag-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(20, 20, 24, 0.08);
      }

      .tag-button.active {
        background: linear-gradient(135deg, #f3efff 0%, #ece8ff 100%);
        border-color: #d8d0ff;
        color: #4a3fb5;
        box-shadow: 0 10px 22px rgba(118, 100, 246, 0.12);
      }

      .composer-wrap {
        padding: 10px 14px 12px;
        background: #fff;
        border-top: 1px solid var(--line);
        min-height: 0;
        max-height: min(68vh, calc(100vh - 160px));
        overflow: auto;
        overscroll-behavior: contain;
      }

      .composer {
        border: 1px solid #ececf2;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(24, 24, 32, 0.055);
        padding: 10px;
        min-height: 0;
      }

      .composer-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        padding: 10px 10px;
        border-radius: 12px;
        background: #fafaff;
        border: 1px solid #ececf4;
      }

      .summary-main {
        min-width: 0;
        display: grid;
        gap: 5px;
      }

      .summary-title {
        color: #1f2230;
        font-size: 0.9rem;
        line-height: 1.2;
        font-weight: 680;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        gap: 0;
      }

      .summary-details {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px 7px;
        color: #626775;
        font-size: 0.73rem;
        line-height: 1.28;
      }

      .summary-details span {
        display: inline-flex;
        align-items: center;
        min-width: 0;
      }

      .summary-details span + span::before {
        content: "";
        width: 3px;
        height: 3px;
        margin-right: 7px;
        border-radius: 999px;
        background: #c8cad5;
      }

      .summary-cost {
        flex: 0 0 auto;
        min-width: 88px;
        padding: 6px 7px;
        border-radius: 11px;
        border: 1px solid #d8d0ff;
        background: #f4f0ff;
        color: #5c4fcb;
        display: grid;
        justify-items: end;
        gap: 0;
        font-size: 0.66rem;
        line-height: 1.16;
        text-align: right;
        white-space: nowrap;
        box-shadow: 0 8px 18px rgba(99, 102, 241, 0.09);
      }

      .summary-cost .credit-label {
        color: #7469cf;
        font-weight: 650;
      }

      .summary-cost strong {
        color: #493bc2;
        font-size: 0.88rem;
        font-weight: 760;
      }

      .summary-cost .credit-balance {
        color: #7469cf;
        font-weight: 620;
      }

      .summary-cost.low {
        background: #fff1f2;
        border-color: #fecdd3;
        color: #be123c;
        box-shadow: 0 10px 24px rgba(225, 29, 72, 0.1);
      }

      .summary-cost.low .credit-label,
      .summary-cost.low .credit-balance,
      .summary-cost.low strong {
        color: #be123c;
      }

      .local-storage-note {
        margin: -2px 0 10px;
        padding: 7px 9px;
        border: 1px solid #e5e7ee;
        border-radius: 11px;
        background: #fbfbfd;
        color: #646976;
        font-size: 0.68rem;
        line-height: 1.45;
      }

      .local-storage-note strong {
        color: #4f46c8;
        font-weight: 760;
      }

      .composer-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .background-job-notice {
        display: grid;
        gap: 8px;
        padding: 10px 12px;
        border: 1px solid #d8d5ff;
        border-radius: 12px;
        background: #f7f6ff;
        color: #333143;
        font-size: 0.78rem;
        line-height: 1.45;
      }

      .background-job-notice strong {
        color: #4f46c8;
      }

      .background-job-notice button {
        width: 100%;
        min-height: 30px;
        border: 1px solid #c9c4ff;
        border-radius: 10px;
        background: #ffffff;
        color: #4f46c8;
        font-weight: 700;
      }

      .composer-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        color: var(--muted);
        font-size: 0.74rem;
        min-width: 0;
        width: 100%;
      }

      .composer-meta #copyVersionButton {
        order: 9;
      }

      .composer-pill {
        width: 100%;
        min-height: 30px;
        padding: 0 11px;
        border-radius: 10px;
        border: 1px solid #e5e7ee;
        background: #f7f8fb;
        color: #414553;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(20, 20, 24, 0.04);
        transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
      }

      .composer-pill:hover {
        transform: translateY(-1px);
        background: #eef0f6;
        box-shadow: 0 10px 22px rgba(20, 20, 24, 0.08);
      }

      .composer-pill.active {
        background: linear-gradient(135deg, #6b5cf6 0%, #a78bfa 100%);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 12px 26px rgba(107, 92, 246, 0.22);
      }

      .edit-tools {
        display: none;
        gap: 8px;
        align-items: center;
        margin-top: 12px;
      }

      .edit-tools.active {
        display: grid;
        grid-template-columns: 1fr;
      }

      .edit-tools textarea {
        min-height: 76px;
      }

      .edit-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }

      #copyVersionButton {
        display: none;
      }

      .generate-button {
        width: 100%;
        min-width: 0;
        height: 40px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
        color: #fff;
        font-size: 0.92rem;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 14px 28px rgba(99, 102, 241, 0.24);
        transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .generate-button .step-badge {
        background: rgba(255, 255, 255, 0.94);
        color: #4f46e5;
      }

      .generate-button:hover {
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 18px 34px rgba(99, 102, 241, 0.28);
        filter: saturate(1.04);
      }

      .generate-button:active,
      .composer-pill:active,
      .tag-button:active {
        transform: scale(0.98);
      }

      .generate-button:disabled {
        opacity: 0.72;
      }

      .generate-button.generating {
        background: #6153cf;
      }

      .generate-button.error {
        background: #9d294c;
      }

      @media (max-width: 390px) {
        .safety-consent {
          padding: 10px;
          font-size: 0.72rem;
        }

        .safety-consent label {
          grid-template-columns: 24px 1fr;
          gap: 8px;
        }

        .safety-consent input {
          width: 22px;
          height: 22px;
          border-radius: 7px;
          flex-basis: 22px;
        }

        .composer-summary {
          grid-template-columns: minmax(0, 1fr) 82px;
          gap: 6px;
        }

        .summary-cost {
          min-width: 82px;
          padding-inline: 6px;
        }

        .composer-pill {
          padding: 0 9px;
          font-size: 0.7rem;
        }

        .generate-button {
          min-width: 88px;
        }
      }

	      body.document-workflow .panel-scroll {
	        padding: 14px 16px 12px;
	        background: #fbfbfd;
	      }

	      body.document-workflow .panel-group {
	        margin-top: 10px;
	        padding: 10px;
	        border: 1px solid #ececf2;
	        border-radius: 12px;
	        background: #fff;
	      }

	      body.document-workflow .panel-group:first-child {
	        position: sticky;
	        top: -14px;
	        z-index: 20;
	        margin-top: 0;
	        padding-bottom: 8px;
	        border-radius: 0 0 12px 12px;
	        border-top: 0;
	        box-shadow: 0 10px 18px rgba(24, 24, 29, 0.05);
	      }

	      body.document-workflow .group-head h4,
	      body.document-workflow .prompt-head h4,
	      body.document-workflow .panel-group h4 {
	        margin-bottom: 8px;
	      }

	      body.document-workflow .skill-grid {
	        grid-template-columns: repeat(4, minmax(0, 1fr));
	        gap: 6px;
	      }

	      body.document-workflow .skill {
	        min-height: 28px;
	        padding: 0 6px;
	        border-radius: 10px;
	        font-size: 0.68rem;
	      }

	      body.document-workflow .skill:not(.active) {
	        background: #fafafd;
	        color: #626672;
	      }

	      body.document-workflow .core-shell {
	        gap: 10px;
	      }

	      body.document-workflow #parameterNote,
	      body.document-workflow #suggestionMeta,
	      body.document-workflow .advanced-toggle-note,
	      body.document-workflow .prompt-suggestions {
	        display: none;
	      }

	      body.document-workflow .safety-consent {
	        margin-top: 8px;
	        padding: 8px 9px;
	        border-radius: 10px;
	        font-size: 0.66rem;
	        line-height: 1.38;
	      }

	      body.document-workflow .safety-consent label {
	        grid-template-columns: 18px 1fr;
	        gap: 7px;
	      }

	      body.document-workflow .safety-consent input {
	        width: 18px;
	        height: 18px;
	        border-radius: 5px;
	        flex-basis: 18px;
	      }

	      body.document-workflow .document-page-controls-quick {
	        margin-top: 0;
	        padding: 0;
	        border: 0;
	        background: transparent;
	      }

	      body.document-workflow .document-outline {
	        padding: 8px;
	        border-radius: 10px;
	        background: #fbfbff;
	      }

	      body.document-workflow .document-outline-head {
	        align-items: start;
	        flex-direction: column;
	      }

	      body.document-workflow .document-outline-actions {
	        width: 100%;
	        display: grid;
	        grid-template-columns: repeat(3, minmax(0, 1fr));
	        gap: 5px;
	      }

	      body.document-workflow .document-outline-actions .composer-pill {
	        min-height: 26px;
	        padding: 0 6px;
	        font-size: 0.7rem;
	      }

	      body.document-workflow .document-outline-list {
	        max-height: clamp(190px, 26vh, 320px);
	        padding-right: 2px;
	      }

	      body.document-workflow .document-outline-item {
	        grid-template-columns: 44px minmax(0, 1fr);
	        gap: 6px;
	      }

	      body.document-workflow .document-outline-page {
	        min-height: 28px;
	        border-radius: 8px;
	        font-size: 0.68rem;
	      }

	      body.document-workflow .document-outline-text {
	        min-height: 58px;
	        max-height: 118px;
	        resize: vertical;
	        border-radius: 8px;
	        font-size: 0.7rem;
	        line-height: 1.4;
	        padding: 7px 8px;
	      }

	      body.document-workflow #promptBox {
	        min-height: 104px;
	        max-height: 180px;
	        font-size: 0.82rem;
	        line-height: 1.55;
	        border-radius: 10px;
	        padding: 10px 12px;
	      }

	      body.document-workflow .advanced-shell {
	        margin-top: 10px;
	        gap: 8px;
	      }

	      body.document-workflow .advanced-header {
	        display: none;
	      }

	      body.document-workflow .advanced-body {
	        gap: 8px;
	      }

	      body.document-workflow .panel-group.condensed:not(#brochureKindPanel):not(#sizePanel):not(.advanced-toggle-row) {
	        display: none;
	      }

	      body.document-workflow #brochureKindPanel,
	      body.document-workflow #sizePanel {
	        padding: 10px;
	        border: 1px solid #ececf2;
	        border-radius: 12px;
	        background: #fff;
	      }

	      body.document-workflow #brochureKindPanel .style-tags {
	        gap: 6px;
	      }

	      body.document-workflow #brochureKindPanel .tag-button {
	        min-height: 28px;
	        padding: 0 9px;
	        border-radius: 10px;
	        font-size: 0.7rem;
	        flex-direction: column;
	        gap: 1px;
	        line-height: 1.15;
	      }

      .tag-button .tag-meta {
        display: block;
        color: #8a8d99;
        font-size: 0.62rem;
        font-weight: 520;
      }

      .tag-button.active .tag-meta {
        color: #6c61bf;
      }

	      body.document-workflow .composer-wrap {
	        padding: 8px 12px 10px;
	        max-height: min(58vh, calc(100vh - 210px));
	        background: #fbfbfd;
	      }

	      body.document-workflow .composer {
	        padding: 8px;
	        border-radius: 12px;
	        box-shadow: none;
	      }

	      body.document-workflow .composer-summary {
	        grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
	        margin-bottom: 6px;
	        padding: 8px;
	        border-radius: 10px;
	      }

	      body.document-workflow .summary-title {
	        font-size: 0.82rem;
	      }

	      body.document-workflow .summary-details {
	        font-size: 0.68rem;
	        max-height: 34px;
	        overflow: hidden;
	      }

	      body.document-workflow .summary-cost {
	        min-width: 78px;
	        padding: 5px 6px;
	      }

	      body.document-workflow .local-storage-note {
	        max-height: 42px;
	        overflow: auto;
	        margin-bottom: 6px;
	        padding: 6px 8px;
	        font-size: 0.65rem;
	      }

	      body.document-workflow .background-job-notice {
	        grid-template-columns: minmax(0, 1fr) auto;
	        align-items: center;
	        gap: 6px;
	        margin-bottom: 6px;
	        padding: 7px 8px;
	        border-radius: 10px;
	        font-size: 0.7rem;
	        line-height: 1.35;
	      }

	      body.document-workflow .background-job-notice button {
	        width: auto;
	        min-height: 26px;
	        padding: 0 10px;
	        white-space: nowrap;
	      }

	      body.document-workflow .composer-meta {
	        grid-template-columns: repeat(4, minmax(0, 1fr));
	        gap: 5px;
	      }

	      body.document-workflow .composer-pill {
	        min-height: 28px;
	        padding: 0 7px;
	        border-radius: 8px;
	        font-size: 0.68rem;
	      }

	      body.document-workflow #copyVersionButton,
	      body.document-workflow #productionViewButton,
	      body.document-workflow #regionEditButton {
	        display: none;
	      }

	      body.document-workflow .generate-button {
	        min-height: 36px;
	        border-radius: 10px;
	      }

	      body.document-workflow .document-tools,
	      body.document-workflow .reference-tools {
	        margin-top: 8px;
	        padding: 9px;
	        border-radius: 12px;
	        max-height: clamp(132px, 22vh, 240px);
	      }

	      body.document-workflow .document-preview {
	        max-height: 72px;
	        padding: 8px;
	        font-size: 0.68rem;
	        line-height: 1.45;
	      }

	      body.document-workflow .document-image-preview {
	        max-height: 62px;
	        gap: 6px;
	      }

	      body.document-workflow .document-image-chip,
	      body.document-workflow .reference-chip {
	        width: 44px;
	        height: 44px;
	        border-radius: 8px;
	      }

	      body.document-workflow .document-structure {
	        max-height: 136px;
	        overflow: auto;
	      }

	      body.document-workflow .reference-upload-row {
	        grid-template-columns: repeat(3, minmax(0, 1fr));
	        gap: 6px;
	      }

	      body.document-workflow .reference-guide {
	        max-height: 40px;
	        overflow: auto;
	        font-size: 0.67rem;
	        line-height: 1.35;
	      }

	      body.document-workflow .reference-preview {
	        max-height: 54px;
	        gap: 6px;
	      }

	      body.document-workflow #referenceStatus {
	        display: none;
	      }

	      .projects-mode .workspace {
	        display: none;
	      }

      .workspace-mode .projects {
        display: none;
      }

      @media (max-width: 1100px) {
        .projects-hero {
          grid-template-columns: 1fr;
        }

        .workspace {
          grid-template-columns: 1fr;
        }

        .chat {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: min(540px, 94vw);
          min-width: 0;
        }

        .composer-wrap {
          max-height: min(58vh, calc(100vh - 190px));
        }

        .project-grid {
          grid-template-columns: 1fr 1fr;
        }

        .project-feedback-panel {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 720px) {
        .projects {
          padding: 24px 18px 28px;
        }

        .hero-title {
          font-size: 2rem;
        }

        .project-grid {
          grid-template-columns: 1fr;
        }

        .project-feedback-form {
          grid-template-columns: 1fr;
        }

        .project-card.featured {
          grid-column: span 1;
        }

        .canvas {
          grid-template-rows: auto 1fr auto;
        }

        .canvas-topbar,
        .canvas-stage,
        .version-bar {
          padding-left: 16px;
          padding-right: 16px;
        }
      }

      /* Simplified AI design workspace UI */
      .app {
        grid-template-columns: 280px minmax(0, 1fr);
        background: #f4f5f7;
      }

      .rail {
        align-items: stretch;
        gap: 0;
        padding: 18px 16px;
        border-right: 1px solid #dadde3;
      }

      .rail-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
      }

      .rail-logo {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        object-fit: contain;
      }

      .rail-title {
        font-size: 1rem;
        font-weight: 850;
        letter-spacing: 0;
      }

      .rail-subtitle {
        margin-top: 6px;
        color: #6f737d;
        font-size: 0.78rem;
      }

      .logo,
      .nav-icon,
      #projectNav {
        display: none !important;
      }

      .rail-new-button {
        width: 100%;
        height: 42px;
        border: 0;
        border-radius: 10px;
        background: #11151b;
        color: #fff;
        font-weight: 760;
      }

      .rail-section-title {
        margin: 20px 0 10px;
        display: grid;
        gap: 6px;
        color: #5f636d;
        font-size: 0.78rem;
        font-weight: 720;
      }

      .rail-section-title span {
        color: #4b5563;
        font-weight: 800;
      }

      .rail-section-title strong {
        display: block;
        padding: 7px 8px;
        border: 1px solid #fed7aa;
        border-radius: 9px;
        background: #fff7ed;
        color: #c2410c;
        font-size: 0.72rem;
        font-weight: 850;
        line-height: 1.35;
      }

      .rail .project-grid {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 8px;
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        padding-right: 6px;
        margin-right: -6px;
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
      }

      .rail .project-grid:not(:hover) .project-card {
        transition: background 120ms ease, transform 120ms ease;
      }

      .rail .project-grid::-webkit-scrollbar {
        width: 8px;
      }

      .rail .project-grid::-webkit-scrollbar-track {
        background: transparent;
      }

      .rail .project-grid::-webkit-scrollbar-thumb {
        background: #c8ccd4;
        border: 2px solid #fff;
        border-radius: 999px;
      }

      .rail .project-grid::-webkit-scrollbar-thumb:hover {
        background: #9fa5b1;
      }

      .rail .project-card,
      .rail .project-card.featured {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: stretch;
        gap: 0;
        min-height: 88px;
        padding: 6px 8px;
        border: 0;
        border-radius: 12px;
        background: transparent;
      }

      .rail .project-card:hover {
        background: #f2f3f5;
      }

      .rail .project-card {
        position: relative;
      }

      .rail .thumb,
      .rail .project-card.featured .thumb {
        width: 100%;
        height: 76px;
        border-radius: 10px;
        background: #fff;
      }

      .rail .thumb.cover-thumb.version-cover-count-1 {
        grid-template-columns: 1fr;
      }

      .rail .thumb.cover-thumb.version-cover-count-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .rail .thumb.cover-thumb.version-cover-count-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .rail .thumb.cover-thumb.version-cover-count-4,
      .rail .thumb.cover-thumb.version-cover-count-5,
      .rail .thumb.cover-thumb.version-cover-count-6 {
        height: 112px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
      }

      .rail .project-cover-label {
        left: 4px;
        bottom: 4px;
        max-width: calc(100% - 8px);
        padding: 2px 5px;
        font-size: 0.56rem;
      }

      .project-version-delete {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 4;
        width: 18px;
        height: 18px;
        min-width: 18px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.78);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 18px;
        opacity: 0;
        cursor: pointer;
      }

      .project-cover-tile:hover .project-version-delete,
      .project-version-delete.confirm {
        opacity: 1;
      }

      .project-version-delete.confirm {
        width: 28px;
        background: #dc2626;
        font-size: 0.62rem;
      }

      .rail .new-thumb {
        font-size: 1rem;
      }

      .rail .expired-empty-project {
        padding-bottom: 8px;
        border: 1px solid #fee2e2;
        background: #fff7f7;
      }

      .rail .expired-project-thumb {
        display: grid;
        place-items: center;
        color: #b45309;
        background:
          repeating-linear-gradient(135deg, #fff7ed 0 8px, #ffedd5 8px 16px);
        font-size: 0.82rem;
        font-weight: 850;
      }

      .rail .expired-project-delete {
        width: 100%;
        min-height: 30px;
        margin-top: 6px;
        border: 1px solid #fecaca;
        border-radius: 8px;
        background: #fff;
        color: #dc2626;
        font-size: 0.74rem;
        font-weight: 850;
      }

      .rail .expired-project-delete:hover {
        border-color: #dc2626;
        background: #dc2626;
        color: #fff;
      }

      .rail .project-meta {
        display: none;
      }

      .rail .project-delete {
        display: inline-flex;
        position: absolute;
        top: 4px;
        right: 4px;
        width: 18px;
        height: 18px;
        min-width: 18px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: #eef0f3;
        color: #70757f;
        font-size: 0;
        line-height: 1;
        opacity: 0;
        transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
      }

      .rail .project-delete::before {
        content: "×";
        font-size: 0.78rem;
        font-weight: 800;
        line-height: 1;
      }

      .rail .project-card:hover .project-delete,
      .rail .project-card:focus-within .project-delete {
        opacity: 1;
      }

      .rail .project-delete:hover {
        background: #171a20;
        color: #fff;
      }

      .rail .project-confirm {
        position: fixed;
        left: 18px;
        top: 50%;
        right: auto;
        bottom: auto;
        width: 250px;
        max-width: calc(100vw - 36px);
        min-height: 0;
        transform: translateY(-50%);
        z-index: 80;
        padding: 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 46px rgba(24, 24, 29, 0.18);
        display: block;
      }

      .rail .project-confirm-box {
        width: 100%;
        gap: 8px;
        text-align: left;
      }

      .rail .project-confirm-title {
        font-size: 0.9rem;
        line-height: 1.3;
      }

      .rail .project-confirm-note {
        font-size: 0.74rem;
        line-height: 1.45;
      }

      .rail .project-confirm-actions {
        justify-content: flex-end;
        gap: 8px;
      }

      .rail .project-confirm-actions button {
        height: 30px;
        padding: 0 12px;
        white-space: nowrap;
      }

      .rail .empty-projects {
        padding: 12px;
        border-radius: 10px;
        font-size: 0.76rem;
      }

      .rail-account {
        width: 100%;
        min-height: 50px;
        margin-top: auto;
        padding: 10px 8px;
        border-top: 1px solid #dde0e5;
        border-radius: 0;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        justify-items: stretch;
        text-align: left;
      }

      .rail-avatar {
        width: 30px;
        height: 30px;
      }

      .rail-account-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .rail-account-copy strong {
        font-size: 0.82rem;
      }

      .rail-account-copy span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #6f737d;
        font-size: 0.72rem;
      }

      .rail-account-meta {
        max-width: none;
      }

      .rail-account-arrow {
        color: #9ba0aa;
      }

      .page {
        grid-template-rows: 52px minmax(0, 1fr);
      }

      .top {
        padding: 0 20px;
        background: rgba(255, 255, 255, 0.92);
      }

      .project-title h1 {
        font-size: 0.86rem;
      }

      .top-meta span:first-child {
        display: none;
      }

      .screen {
        background-image:
          linear-gradient(#e6e9ee 1px, transparent 1px),
          linear-gradient(90deg, #e6e9ee 1px, transparent 1px);
        background-size: 28px 28px;
        background-color: #f6f7f9;
      }

      .workspace {
        position: relative;
        grid-template-columns: 1fr;
      }

      .projects-mode .workspace {
        display: grid;
      }

      .projects-mode .projects {
        display: none;
      }

      .workspace-mode .projects {
        display: none;
      }

      .canvas {
        background: transparent;
        overflow: hidden;
        grid-template-rows: 48px minmax(0, 1fr) 86px;
        padding-bottom: 154px;
      }

      .canvas-topbar {
        padding: 0 18px;
        background: rgba(255, 255, 255, 0.62);
        border-bottom: 1px solid rgba(218, 221, 227, 0.7);
      }

      .canvas-mode-tabs,
      #addTitleButton {
        display: none !important;
      }

      .status-badge {
        display: inline-flex;
      }

      .canvas-stage {
        padding: 10px 14px 12px;
      }

      .canvas-frame {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
      }

      .canvas-wrapper {
        min-width: 0;
        min-height: 0;
        padding: 0;
        display: block;
      }

      .canvas-paper {
        width: 840px;
        min-width: 840px;
        max-width: none;
      }

      .empty-state {
        inset: 0;
        border: 1px dashed #cfd4dc;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.48);
      }

      .empty-title {
        color: #747984;
        font-size: 0.95rem;
        font-weight: 620;
      }

      .version-bar {
        display: none;
      }

      .chat {
        position: fixed;
        left: calc(125px + 50vw);
        bottom: 22px;
        z-index: 38;
        width: min(880px, calc(100vw - 310px));
        min-width: 0;
        transform: translateX(-50%);
        border: 1px solid #dfe3e8;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 24px 72px rgba(19, 24, 34, 0.14);
        overflow: visible;
        display: block;
        height: auto;
        min-height: 0;
      }

      .panel-scroll {
        display: block;
        max-height: 0;
        overflow: visible;
        padding: 0;
      }

      .panel-scroll > .panel-group:first-child,
      .core-shell > .panel-group:first-child,
      .panel-group.beginner-hidden,
      .legacy-prompt-card,
      .legacy-safety-consent,
      .prompt-head,
      .prompt-suggestions,
      .batch-card,
      .local-storage-note,
      .reference-guide,
      #referenceStatus,
      .advanced-header,
      .advanced-title span,
      .advanced-meta {
        display: none !important;
      }

      .core-shell {
        display: contents;
      }

      .core-shell .panel-group:has(#promptBox) {
        display: contents;
      }

      .composer-summary {
        display: contents;
      }

      .composer-summary .summary-main {
        display: none;
      }

      .composer-summary .summary-cost {
        margin: 0;
        margin-left: auto;
        padding: 5px 10px;
        border: 1px solid #d8d0ff;
        border-radius: 999px;
        background: #f4f0ff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        color: #5c4fcb;
        font-size: 0.7rem;
        line-height: 1.15;
        white-space: nowrap;
      }

      .composer-summary .summary-cost strong {
        color: #493bc2;
        font-size: 0.9rem;
        line-height: 1.1;
      }

      .composer-summary .summary-cost.low {
        border-color: #fecdd3;
        background: #fff1f2;
      }

      .composer-summary .summary-cost.low strong,
      .composer-summary .summary-cost.low .credit-balance {
        color: #dc2626;
      }

      .prompt-card {
        border: 0;
        background: transparent;
        padding: 0;
      }

      .prompt-card textarea,
      #promptBox {
        box-shadow: none;
      }

      .composer-wrap {
        position: static;
        border: 0;
        background: transparent;
        padding: 0;
        min-height: 0;
        overflow: visible;
      }

      .composer {
        display: grid;
        align-content: start;
        gap: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        height: fit-content;
        min-height: 0;
        overflow: visible;
      }

      .top-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
      }

      .top-export-button {
        min-width: 64px;
        width: auto;
        min-height: 34px;
        padding: 0 14px;
        border-radius: 10px;
        background: #fff;
        font-size: 0.8rem;
        font-weight: 700;
      }

      .bottom-parameter-bar {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        background: #fff;
        border-radius: 18px 18px 0 0;
      }

      .bottom-type-button {
        min-width: 94px;
        max-width: 106px;
        justify-content: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .bottom-popover-grid {
        position: absolute;
        left: 12px;
        bottom: calc(100% + 8px);
        z-index: 60;
        width: min(520px, calc(100vw - 320px));
        max-height: min(52vh, 420px);
        overflow: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        border: 1px solid #dfe3e8;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 18px 46px rgba(18, 24, 34, 0.16);
      }

      .bottom-mode-grid {
        width: min(560px, calc(100vw - 320px));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }

      .bottom-popover-title {
        grid-column: 1 / -1;
        font-size: 0.8rem;
        font-weight: 700;
        color: #636977;
      }

      .bottom-mode-option {
        min-height: 38px;
        border: 1px solid #e5e8ee;
        border-radius: 10px;
        background: #fff;
        color: #252932;
        font-size: 0.78rem;
        font-weight: 700;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        line-height: 1.15;
      }

      .bottom-mode-option .option-meta {
        color: #7b8190;
        font-size: 0.66rem;
        font-weight: 600;
      }

      .bottom-mode-option.active,
      .bottom-mode-option:hover {
        border-color: #9ec5ff;
        background: #eef6ff;
      }

      .bottom-mode-option.active .option-meta,
      .bottom-mode-option:hover .option-meta {
        color: #386fb1;
      }

      .bottom-document-stepper {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(72px, 1fr) 34px 52px 34px;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 6px 8px;
        border: 1px solid #e5e8ee;
        border-radius: 10px;
        background: #f8fafc;
        color: #3b414c;
        font-size: 0.76rem;
        font-weight: 700;
      }

      .bottom-document-stepper button {
        width: 34px;
        height: 28px;
        border: 1px solid #d9e2ef;
        border-radius: 9px;
        background: #fff;
        color: #20242c;
        font-size: 1rem;
        font-weight: 800;
      }

      .bottom-document-stepper strong {
        text-align: center;
        font-size: 0.82rem;
      }

      .bottom-parameter-bar .tag-button,
      .bottom-parameter-bar .composer-pill {
        min-height: 32px;
        border-radius: 999px;
      }

      .bottom-parameter-bar .tag-button.active {
        border-color: #8dbbff;
        background: #eaf4ff;
        color: #0b58b5;
      }

      .generate-button {
        position: absolute;
        right: 12px;
        bottom: 10px;
        z-index: 4;
        width: 46px;
        height: 46px;
        min-width: 46px;
        padding: 0;
        border-radius: 14px;
        font-size: 0;
      }

      .generate-button::before {
        content: "↑";
        font-size: 1.35rem;
        line-height: 1;
      }

      .generate-button .step-badge {
        display: none;
      }

      .advanced-shell {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 10px);
        z-index: 45;
        max-height: min(55vh, 520px);
        overflow: auto;
        padding: 14px;
        border: 1px solid #dfe3e8;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 58px rgba(19, 24, 34, 0.16);
      }

      .advanced-shell:has([hidden]) {
        display: block;
      }

      .advanced-toggle-row {
        display: block !important;
        padding: 0 14px 10px;
      }

      .advanced-toggle-button {
        height: 32px;
        border-radius: 999px;
      }

      .document-tools.active,
      .reference-tools.active,
      .photo-tools.active,
      .edit-tools.active {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 10px);
        z-index: 46;
        max-height: min(45vh, 420px);
        overflow: auto;
        margin-top: 0;
      }

      .document-tools,
      .reference-tools,
      .photo-tools,
      .edit-tools {
        display: none;
      }

      .document-tools.active,
      .reference-tools.active,
      .photo-tools.active,
      .edit-tools.active {
        display: grid;
      }

      .projects-shell {
        width: min(100%, 960px);
        margin: 0 auto;
        padding: 24px;
      }

      .projects-start-button {
        margin-top: 14px;
      }

      @media (max-width: 980px) {
        .app {
          grid-template-columns: 1fr;
        }

        .rail {
          display: none;
        }

        .chat {
          left: 12px;
          right: 12px;
          width: auto;
          transform: none;
        }

        .canvas-paper {
          width: min(100%, 720px);
          min-width: 0;
          max-width: none;
        }

        .project-hover-preview {
          left: 12px;
          top: auto;
          bottom: 18px;
          width: calc(100vw - 24px);
        }
      }

      /* Compact bottom composer corrections */
      .advanced-shell {
        display: none;
      }

      .advanced-shell.open {
        display: block;
      }

      .safety-consent {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      .bottom-parameter-bar .composer-pill.active {
        border-color: #8dbbff;
        background: #eaf4ff;
        color: #0b58b5;
      }

      .canvas-stage {
        padding-bottom: 8px;
      }

      .canvas-frame {
        max-width: none;
        margin: 0 auto;
      }

      .advanced-shell:not(.open),
      .advanced-shell:has([hidden]):not(.open) {
        display: none !important;
      }

      .chat {
        width: min(1280px, calc(100vw - 300px));
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 18px 56px rgba(19, 24, 34, 0.12);
        display: block;
        height: fit-content;
        min-height: 0;
      }

      .bottom-parameter-bar {
        flex-wrap: wrap;
        overflow: visible;
        scrollbar-width: none;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid #e8ecf2;
        border-radius: 16px 16px 0 0;
        scroll-padding-right: 12px;
      }

      .bottom-parameter-bar::-webkit-scrollbar {
        height: 4px;
      }

      .bottom-parameter-bar::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #c9d2df;
      }

      .bottom-parameter-bar::-webkit-scrollbar-track {
        background: transparent;
      }

      .bottom-parameter-bar .composer-pill,
      .bottom-parameter-bar .tag-button {
        flex: 0 0 auto;
        width: auto;
        min-width: auto;
        max-width: none;
        min-height: 28px;
        height: 28px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 999px;
        font-size: 0.74rem;
        font-weight: 700;
      }

      .bottom-parameter-bar .bottom-type-button {
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .bottom-type-button::after {
        content: "⌄";
        margin-left: 4px;
        font-size: 0.66rem;
        line-height: 1;
      }

      @media (min-width: 1500px) {
        .chat {
          width: min(1400px, calc(100vw - 300px));
        }
      }

      .composer-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46px;
        align-items: center;
        gap: 10px;
        min-height: 62px;
        padding: 8px 12px 10px;
      }

      .composer-row .composer-meta {
        display: none;
      }

      .composer-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 0 12px 12px;
      }

      .composer-meta .composer-pill {
        width: auto;
        min-height: 28px;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        background: #fff;
        font-size: 0.74rem;
        font-weight: 700;
      }

      .composer-input-wrap {
        min-width: 0;
        min-height: 0;
      }

      .composer-input-wrap #promptBox {
        display: block;
        width: 100%;
        min-height: 46px;
        height: auto;
        max-height: 180px;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        color: #20242c;
        font: inherit;
        font-size: 0.84rem;
        line-height: 1.45;
        overflow-y: auto;
        resize: none;
      }

      .composer-input-wrap #promptBox::placeholder {
        color: #8a909a;
      }

      .composer-input-wrap #promptBox:focus {
        outline: none;
        box-shadow: none;
      }

      .canvas {
        padding-bottom: 88px;
      }

      .canvas-stage {
        padding: 8px 10px 10px;
      }

      .canvas-frame {
        max-width: none;
        margin: 0;
      }

      .generate-button {
        position: static;
        width: 46px;
        height: 46px;
        min-width: 46px;
        align-self: center;
        border-radius: 999px;
        background: #0e1116;
        box-shadow: none;
      }

      .generate-button:hover {
        background: #1c2129;
      }

      /* Figma-inspired design workspace refresh */
      :root {
        --bg: #f3f4f6;
        --panel: #ffffff;
        --line: #dde2ea;
        --line-2: #cfd6e1;
        --text: #141820;
        --muted: #6b7280;
        --soft: #98a2b3;
        --purple: #2563eb;
        --purple-2: #eaf2ff;
        --shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
      }

      html,
      body {
        background: #f3f4f6;
        color: #141820;
      }

      button,
      input,
      textarea,
      select {
        -webkit-font-smoothing: antialiased;
      }

      button:focus-visible,
      input:focus-visible,
      textarea:focus-visible,
      select:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.18);
        outline-offset: 2px;
      }

      .app {
        grid-template-columns: 292px minmax(0, 1fr);
        background: #eef1f5;
      }

      .rail {
        padding: 16px 14px;
        border-right: 1px solid #d9dfe8;
        background: #fbfcfe;
        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.75);
      }

      .rail-brand {
        margin: 0 2px 16px;
        padding: 2px 0 14px;
        border-bottom: 1px solid #e6ebf2;
      }

      .rail-title {
        font-size: 1.05rem;
        line-height: 1.15;
        font-weight: 860;
        color: #10141c;
      }

      .rail-subtitle {
        margin-top: 5px;
        color: #667085;
        font-size: 0.76rem;
      }

      .rail-new-button {
        height: 40px;
        border-radius: 8px;
        background: #10141c;
        box-shadow: 0 10px 24px rgba(16, 20, 28, 0.16);
        transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
      }

      .rail-new-button:hover {
        background: #202633;
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(16, 20, 28, 0.2);
      }

      .rail-section-title {
        margin: 18px 2px 10px;
        color: #697386;
        font-size: 0.72rem;
        letter-spacing: 0;
        text-transform: none;
      }

      .rail .project-grid {
        gap: 10px;
        padding-right: 8px;
        margin-right: -8px;
      }

      .rail .project-card,
      .rail .project-card.featured {
        min-height: 92px;
        padding: 8px;
        border: 1px solid transparent;
        border-radius: 10px;
        transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
      }

      .rail .project-card:hover {
        border-color: #dfe5ee;
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
      }

      .rail .thumb,
      .rail .project-card.featured .thumb {
        height: 78px;
        border: 1px solid #e3e8ef;
        border-radius: 8px;
        background: #f7f9fc;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

      .rail .project-card:has(.version-cover-count-4),
      .rail .project-card:has(.version-cover-count-5),
      .rail .project-card:has(.version-cover-count-6) {
        min-height: 128px;
      }

      .rail .project-delete,
      .project-version-delete {
        backdrop-filter: blur(10px);
      }

      .rail-account {
        min-height: 52px;
        padding: 12px 4px 0;
        border-top-color: #e1e6ee;
      }

      .rail-account:hover {
        background: transparent;
      }

      .rail-avatar {
        background: linear-gradient(135deg, #111827 0%, #334155 100%);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
      }

      .page {
        grid-template-rows: 50px minmax(0, 1fr);
      }

      .top {
        padding: 0 18px;
        border-bottom: 1px solid rgba(215, 222, 232, 0.85);
        background: rgba(251, 252, 254, 0.88);
        backdrop-filter: blur(18px);
      }

      .project-title h1 {
        color: #202633;
        font-size: 0.9rem;
        font-weight: 760;
      }

      .support-chip {
        min-height: 28px;
        border-color: #dbe7ff;
        border-radius: 8px;
        background: #eef5ff;
        color: #1d4ed8;
      }

      .top-export-button {
        border-color: #d8dee8;
        border-radius: 8px;
        background: #ffffff;
        color: #202633;
      }

      .screen {
        background-color: #eef1f5;
        background-image:
          linear-gradient(rgba(148, 163, 184, 0.28) 1px, transparent 1px),
          linear-gradient(90deg, rgba(148, 163, 184, 0.28) 1px, transparent 1px),
          linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
          linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
        background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
        background-position: -1px -1px;
      }

      .canvas {
        grid-template-rows: 50px minmax(0, 1fr) 76px;
        padding-bottom: 92px;
      }

      .canvas-topbar {
        padding: 0 18px;
        border-bottom: 1px solid rgba(207, 214, 225, 0.72);
        background: rgba(249, 250, 252, 0.68);
        backdrop-filter: blur(16px);
      }

      .zoom-controls {
        gap: 2px;
        padding: 3px;
        border-color: #d9e0ea;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
      }

      .zoom-button {
        min-width: 30px;
        height: 28px;
        border-radius: 6px;
        color: #4b5565;
        font-weight: 720;
      }

      .zoom-button:hover {
        background: #eef2f7;
        color: #111827;
      }

      .zoom-value {
        color: #344054;
        font-weight: 720;
      }

      .status-badge {
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid #d9e0ea;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.86);
        color: #566174;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
      }

      .status-dot {
        background: #98a2b3;
      }

      .status-dot.generating {
        background: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
      }

      .canvas-stage {
        padding: 16px 18px 12px;
      }

      .canvas-frame {
        overflow: auto;
        overscroll-behavior: contain;
      }

      .canvas-wrapper {
        min-width: 100%;
        min-height: 100%;
        display: grid;
        place-items: center;
        padding: 26px;
      }

      .canvas-paper {
        width: min(840px, calc(100vw - 380px));
        min-width: 420px;
        border-radius: 2px;
        background: #ffffff;
        box-shadow:
          0 0 0 1px rgba(15, 23, 42, 0.1),
          0 24px 80px rgba(15, 23, 42, 0.16);
        overflow: hidden;
      }

      .empty-state {
        inset: 0;
        border: 1px dashed rgba(100, 116, 139, 0.44);
        border-radius: 2px;
        background:
          linear-gradient(45deg, rgba(148, 163, 184, 0.07) 25%, transparent 25%),
          linear-gradient(-45deg, rgba(148, 163, 184, 0.07) 25%, transparent 25%),
          #ffffff;
        background-size: 18px 18px;
      }

      .empty-title {
        padding: 9px 12px;
        border: 1px solid #d8dee8;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        color: #667085;
        font-size: 0.86rem;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
      }

      .result-art {
        background-color: #ffffff;
      }

      .photo-overlay {
        border-color: #2563eb;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 14px 34px rgba(37, 99, 235, 0.22);
      }

      .photo-resize-handle {
        background: #2563eb;
      }

      .chat {
        left: calc(146px + 50vw);
        bottom: 18px;
        width: min(1180px, calc(100vw - 332px));
        border: 1px solid rgba(207, 214, 225, 0.95);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 70px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(20px);
      }

      .bottom-parameter-bar {
        gap: 7px;
        padding: 9px 10px;
        border-bottom: 1px solid #e3e8ef;
        border-radius: 12px 12px 0 0;
        background: #fbfcfe;
      }

      .bottom-parameter-bar .composer-pill,
      .bottom-parameter-bar .tag-button,
      .composer-meta .composer-pill {
        height: 30px;
        min-height: 30px;
        border-color: #d9e0ea;
        border-radius: 8px;
        background: #ffffff;
        color: #344054;
        box-shadow: none;
      }

      .bottom-parameter-bar .composer-pill:hover,
      .bottom-parameter-bar .tag-button:hover,
      .composer-meta .composer-pill:hover {
        border-color: #b8c2d2;
        background: #f5f7fa;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
      }

      .bottom-parameter-bar .composer-pill.active,
      .bottom-parameter-bar .tag-button.active,
      .bottom-parameter-bar .bottom-type-button:first-child {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
      }

      .bottom-type-button::after {
        content: "";
        width: 6px;
        height: 6px;
        margin-left: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
      }

      .composer-row {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 10px;
        min-height: 66px;
        padding: 10px;
        background: #ffffff;
        border-radius: 0 0 12px 12px;
      }

      .composer-input-wrap {
        min-height: 46px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: #f8fafc;
        transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
      }

      .composer-input-wrap:focus-within {
        border-color: #93c5fd;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      }

      .composer-input-wrap #promptBox {
        min-height: 38px;
        max-height: 170px;
        color: #111827;
        font-size: 0.86rem;
      }

      .composer-input-wrap #promptBox::placeholder {
        color: #98a2b3;
      }

      .generate-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
        background: #111827;
        box-shadow: 0 12px 26px rgba(17, 24, 39, 0.18);
      }

      .generate-button:hover {
        background: #1f2937;
        transform: translateY(-1px);
        box-shadow: 0 16px 32px rgba(17, 24, 39, 0.22);
      }

      .generate-button::before {
        font-size: 1.28rem;
      }

      .generate-button.generating {
        background: #2563eb;
      }

      .generate-button.error {
        background: #dc2626;
      }

      .bottom-popover-grid,
      .advanced-shell,
      .document-tools.active,
      .reference-tools.active,
      .photo-tools.active,
      .edit-tools.active,
      .project-hover-preview,
      .auth-card,
      .production-reference-card {
        border-color: #d9e0ea;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 64px rgba(15, 23, 42, 0.16);
      }

      .bottom-popover-grid {
        width: min(560px, calc(100vw - 348px));
        padding: 10px;
      }

      .bottom-mode-option {
        border-color: #dfe5ee;
        border-radius: 8px;
        color: #202633;
      }

      .bottom-mode-option.active,
      .bottom-mode-option:hover {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
      }

      .advanced-shell {
        max-height: min(58vh, 540px);
        padding: 12px;
      }

      .advanced-body {
        gap: 14px;
      }

      .panel-group h4,
      .bottom-popover-title,
      .advanced-title strong {
        color: #475467;
        font-weight: 760;
      }

      .tag-button,
      .advanced-toggle-button,
      .hero-button,
      .project-confirm-actions button,
      .production-reference-close {
        border-color: #d9e0ea;
        border-radius: 8px;
        background: #ffffff;
        color: #344054;
        box-shadow: none;
      }

      .tag-button:hover,
      .advanced-toggle-button:hover,
      .hero-button:hover,
      .project-confirm-actions button:hover,
      .production-reference-close:hover {
        border-color: #b8c2d2;
        background: #f8fafc;
      }

      .tag-button.active,
      .advanced-toggle-button.active,
      .composer-pill.active {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
        box-shadow: none;
      }

      .field input,
      .inline-filter input,
      .document-page-controls input,
      .account-feedback-form select,
      .account-feedback-form input,
      .account-feedback-form textarea,
      .project-feedback-form select,
      .project-feedback-form input,
      .project-feedback-form textarea,
      .production-reference-textarea,
      #documentTableSelect {
        border-color: #d9e0ea;
        border-radius: 8px;
        background: #ffffff;
      }

      .field input:focus,
      .inline-filter input:focus,
      .document-page-controls input:focus,
      .account-feedback-form select:focus,
      .account-feedback-form input:focus,
      .account-feedback-form textarea:focus,
      .project-feedback-form select:focus,
      .project-feedback-form input:focus,
      .project-feedback-form textarea:focus,
      .production-reference-textarea:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      }

      .summary-cost,
      .composer-summary .summary-cost {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
      }

      .summary-cost strong,
      .composer-summary .summary-cost strong,
      .summary-cost .credit-label,
      .summary-cost .credit-balance {
        color: #1d4ed8;
      }

      .project-feedback-panel,
      .document-tools,
      .reference-tools,
      .photo-tools,
      .document-outline,
      .document-page-controls-quick,
      .document-preview,
      .document-table-preview,
      .wall-production-preview {
        border-color: #d9e0ea;
        border-radius: 12px;
        background: #ffffff;
      }

      .project-feedback-chips span,
      .group-pill,
      .document-outline-page,
      .suggestion-tag {
        border-color: #dbeafe;
        background: #eff6ff;
        color: #1d4ed8;
      }

      .project-hover-preview {
        left: 306px;
        border-radius: 12px;
      }

      @media (max-width: 1180px) {
        .app {
          grid-template-columns: 260px minmax(0, 1fr);
        }

        .chat {
          left: calc(130px + 50vw);
          width: min(980px, calc(100vw - 298px));
        }

        .canvas-paper {
          width: min(760px, calc(100vw - 338px));
          min-width: 360px;
        }
      }

      @media (max-width: 980px) {
        .app {
          grid-template-columns: 1fr;
        }

        .chat {
          left: 12px;
          right: 12px;
          bottom: 12px;
          width: auto;
          transform: none;
        }

        .canvas {
          padding-bottom: 104px;
        }

        .canvas-paper {
          width: min(720px, calc(100vw - 44px));
          min-width: 0;
        }

        .bottom-popover-grid,
        .bottom-mode-grid {
          width: calc(100vw - 24px);
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 640px) {
        .top {
          padding: 0 12px;
        }

        .support-chip {
          display: none;
        }

        .canvas-topbar {
          padding: 0 10px;
        }

        .composer-row {
          grid-template-columns: minmax(0, 1fr) 42px;
        }

        .bottom-parameter-bar {
          flex-wrap: nowrap;
          overflow-x: auto;
        }

        .bottom-parameter-bar .bottom-type-button {
          max-width: 190px;
        }

        .generate-button {
          width: 42px;
          height: 42px;
          min-width: 42px;
        }
      }

      /* Final desktop layout: move prompt composer to the right side so it does not cover generated images. */
      @media (min-width: 981px) {
        .workspace {
          position: relative !important;
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) 388px !important;
          gap: 0 !important;
          overflow: hidden !important;
        }

        .canvas {
          grid-column: 1 !important;
          grid-template-rows: 50px minmax(0, 1fr) auto !important;
          padding-bottom: 0 !important;
          min-width: 0 !important;
          position: relative !important;
        }

        .canvas-stage {
          padding: 14px 16px 12px !important;
          min-height: 0 !important;
        }

        .canvas-paper {
          max-width: calc(100vw - 720px) !important;
          max-height: calc(100vh - 166px) !important;
        }

        .chat {
          grid-column: 2 !important;
          position: relative !important;
          left: auto !important;
          right: auto !important;
          top: auto !important;
          bottom: auto !important;
          z-index: 3 !important;
          width: 388px !important;
          height: 100% !important;
          min-width: 0 !important;
          transform: none !important;
          border-left: 1px solid var(--line) !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: #ffffff !important;
          backdrop-filter: none !important;
          overflow: hidden !important;
          display: grid !important;
          grid-template-rows: minmax(0, 1fr) !important;
        }

        .panel-scroll {
          display: block !important;
          max-height: none !important;
          height: 100% !important;
          min-height: 0 !important;
          overflow: auto !important;
          padding: 12px !important;
        }

        .panel-scroll > .panel-group:first-child,
        .core-shell > .panel-group:first-child,
        .prompt-head,
        .legacy-prompt-card,
        .legacy-safety-consent,
        .prompt-suggestions {
          display: none !important;
        }

        .core-shell,
        .core-shell .panel-group {
          display: block !important;
        }

        .advanced-shell {
          position: static !important;
          max-height: none !important;
          overflow: visible !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          background: transparent !important;
        }

        .composer-wrap {
          position: absolute !important;
          top: 12px !important;
          right: 12px !important;
          bottom: 12px !important;
          width: 364px !important;
          z-index: 8 !important;
          padding: 0 !important;
          border: 0 !important;
          background: transparent !important;
          overflow: auto !important;
          max-height: none !important;
        }

        .composer {
          display: grid !important;
          gap: 10px !important;
          align-content: start !important;
          padding: 12px !important;
          border: 1px solid #e5e7ee !important;
          border-radius: 16px !important;
          background: #ffffff !important;
          box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08) !important;
          min-height: 0 !important;
          overflow: visible !important;
        }

        .bottom-popover-grid {
          position: static !important;
          width: 100% !important;
          margin-bottom: 8px !important;
          border-radius: 14px !important;
          box-shadow: none !important;
        }

        .bottom-parameter-bar {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 7px !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          overflow: visible !important;
        }

        .composer-summary-inline {
          order: -1;
          flex: 1 0 100%;
          margin: 0 0 2px !important;
        }

        .bottom-parameter-bar .composer-pill,
        .bottom-parameter-bar .tag-button {
          width: auto !important;
          min-width: 0 !important;
          max-width: 100% !important;
          height: 30px !important;
          min-height: 30px !important;
          padding: 0 10px !important;
          border-radius: 10px !important;
          font-size: 0.72rem !important;
          white-space: nowrap !important;
        }

        .composer-row {
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) 46px !important;
          align-items: end !important;
          gap: 10px !important;
          min-height: 0 !important;
          padding: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
        }

        .composer-input-wrap {
          min-width: 0 !important;
          min-height: 132px !important;
          padding: 10px !important;
          border: 1px solid #dfe6ef !important;
          border-radius: 13px !important;
          background: #f8fafc !important;
        }

        .composer-input-wrap #promptBox {
          display: block !important;
          width: 100% !important;
          min-height: 112px !important;
          max-height: 260px !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          resize: vertical !important;
          font-size: 0.86rem !important;
          line-height: 1.5 !important;
          color: #111827 !important;
        }

        .generate-button {
          width: 46px !important;
          height: 46px !important;
          min-width: 46px !important;
          border-radius: 13px !important;
          align-self: end !important;
        }

        .document-tools,
        .reference-tools,
        .photo-tool-panel,
        .edit-tools {
          margin-top: 0 !important;
        }
      }

      /* Creative design-suite direction: premium dark canvas, luminous artboard, command bar */
      :root {
        --bg: #070a10;
        --panel: #10151f;
        --line: rgba(148, 163, 184, 0.2);
        --line-2: rgba(191, 219, 254, 0.26);
        --text: #eef4ff;
        --muted: #9aa6b8;
        --soft: #718096;
        --purple: #38bdf8;
        --purple-2: rgba(56, 189, 248, 0.13);
        --shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
      }

      html,
      body {
        background: #070a10;
        color: #eef4ff;
      }

      .app {
        grid-template-columns: 304px minmax(0, 1fr);
        background:
          radial-gradient(circle at 14% 18%, rgba(56, 189, 248, 0.18), transparent 30%),
          radial-gradient(circle at 78% 8%, rgba(129, 140, 248, 0.14), transparent 28%),
          linear-gradient(135deg, #070a10 0%, #0b111c 54%, #080a10 100%);
      }

      .rail {
        padding: 18px 16px;
        border-right: 1px solid rgba(148, 163, 184, 0.16);
        background: linear-gradient(180deg, rgba(13, 18, 28, 0.92), rgba(8, 11, 18, 0.96));
        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04), 18px 0 60px rgba(0, 0, 0, 0.22);
      }

      .rail-brand {
        margin: 0 0 18px;
        padding: 0 0 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
      }

      .rail-title {
        color: #f8fbff;
        font-size: 1.08rem;
        font-weight: 900;
      }

      .rail-title::before {
        content: "";
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-right: 9px;
        border-radius: 4px;
        background: linear-gradient(135deg, #38bdf8, #a78bfa 58%, #f472b6);
        box-shadow: 0 0 22px rgba(56, 189, 248, 0.6);
        vertical-align: -1px;
      }

      .rail-subtitle,
      .rail-section-title,
      .rail-account-copy span,
      .rail-account-arrow {
        color: #91a0b6;
      }

      .rail-new-button {
        height: 44px;
        border: 1px solid rgba(125, 211, 252, 0.38);
        border-radius: 12px;
        background: linear-gradient(135deg, #f8fbff 0%, #c7e9ff 100%);
        color: #07111f;
        box-shadow: 0 18px 44px rgba(56, 189, 248, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

      .rail-new-button:hover {
        background: linear-gradient(135deg, #ffffff 0%, #dff4ff 100%);
        box-shadow: 0 22px 54px rgba(56, 189, 248, 0.24);
      }

      .rail .project-grid::-webkit-scrollbar-thumb {
        border-color: #0c111b;
        background: rgba(148, 163, 184, 0.45);
      }

      .rail .project-card,
      .rail .project-card.featured {
        border: 1px solid rgba(148, 163, 184, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.035);
      }

      .rail .project-card:hover {
        border-color: rgba(125, 211, 252, 0.38);
        background: rgba(15, 23, 42, 0.92);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(56, 189, 248, 0.08);
      }

      .rail .thumb,
      .rail .project-card.featured .thumb {
        border-color: rgba(148, 163, 184, 0.2);
        border-radius: 10px;
        background:
          linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(167, 139, 250, 0.08)),
          #101725;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .rail .new-thumb {
        color: #b8c6d9;
        background:
          radial-gradient(circle at 30% 22%, rgba(56, 189, 248, 0.34), transparent 26%),
          radial-gradient(circle at 68% 70%, rgba(244, 114, 182, 0.2), transparent 28%),
          #111827;
      }

      .rail .project-delete {
        background: rgba(15, 23, 42, 0.82);
        color: #cbd5e1;
      }

      .rail-account {
        border-top-color: rgba(148, 163, 184, 0.14);
      }

      .rail-account-copy strong {
        color: #eef4ff;
      }

      .rail-avatar {
        background: linear-gradient(135deg, #38bdf8, #818cf8 55%, #f472b6);
        color: #07111f;
        box-shadow: 0 12px 30px rgba(56, 189, 248, 0.28);
      }

      .top {
        border-bottom-color: rgba(148, 163, 184, 0.14);
        background: rgba(9, 13, 21, 0.72);
        box-shadow: 0 14px 50px rgba(0, 0, 0, 0.18);
      }

      .project-title h1 {
        color: #f8fbff;
      }

      .top-export-button,
      .support-chip {
        border-color: rgba(125, 211, 252, 0.28);
        background: rgba(15, 23, 42, 0.74);
        color: #bde9ff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }

      .screen {
        background-color: transparent;
        background-image:
          linear-gradient(rgba(125, 211, 252, 0.12) 1px, transparent 1px),
          linear-gradient(90deg, rgba(125, 211, 252, 0.12) 1px, transparent 1px),
          radial-gradient(circle at 48% 38%, rgba(56, 189, 248, 0.13), transparent 34%),
          radial-gradient(circle at 70% 74%, rgba(244, 114, 182, 0.08), transparent 32%);
        background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
      }

      .canvas {
        grid-template-rows: 52px minmax(0, 1fr) 78px;
        padding-bottom: 104px;
      }

      .canvas-topbar {
        border-bottom-color: rgba(148, 163, 184, 0.12);
        background: rgba(7, 10, 16, 0.28);
      }

      .zoom-controls,
      .status-badge {
        border-color: rgba(148, 163, 184, 0.18);
        background: rgba(15, 23, 42, 0.72);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }

      .zoom-button {
        color: #c8d4e5;
      }

      .zoom-button:hover {
        background: rgba(56, 189, 248, 0.14);
        color: #ffffff;
      }

      .zoom-value,
      .status-badge {
        color: #cbd5e1;
      }

      .status-dot {
        background: #64748b;
      }

      .status-dot.generating {
        background: #38bdf8;
        box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18), 0 0 20px rgba(56, 189, 248, 0.5);
      }

      .canvas-wrapper {
        padding: 34px;
      }

      .canvas-paper {
        width: min(850px, calc(100vw - 420px));
        min-width: 440px;
        border-radius: 6px;
        background: #f8fafc;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.28),
          0 0 0 9px rgba(15, 23, 42, 0.34),
          0 34px 110px rgba(0, 0, 0, 0.52),
          0 0 86px rgba(56, 189, 248, 0.22);
      }

      .canvas-paper::after {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: 4;
        pointer-events: none;
        border-radius: 6px;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
      }

      .empty-state {
        border: 1px solid rgba(15, 23, 42, 0.12);
        background:
          radial-gradient(circle at 18% 16%, rgba(56, 189, 248, 0.24), transparent 30%),
          radial-gradient(circle at 82% 80%, rgba(244, 114, 182, 0.18), transparent 34%),
          linear-gradient(135deg, #f8fbff 0%, #eef5ff 48%, #fdf2f8 100%);
      }

      .empty-title {
        border-color: rgba(15, 23, 42, 0.08);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.76);
        color: #172033;
        font-weight: 780;
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(16px);
      }

      .result-art {
        background-color: #f8fafc;
      }

      .chat {
        left: calc(152px + 50vw);
        bottom: 20px;
        width: min(1160px, calc(100vw - 352px));
        border: 1px solid rgba(191, 219, 254, 0.22);
        border-radius: 20px;
        background:
          linear-gradient(180deg, rgba(17, 24, 39, 0.88), rgba(9, 13, 21, 0.9)),
          rgba(15, 23, 42, 0.94);
        box-shadow: 0 34px 100px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 70px rgba(56, 189, 248, 0.12);
        backdrop-filter: blur(26px) saturate(1.25);
      }

      .bottom-parameter-bar {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 20px 20px 0 0;
        background: rgba(255, 255, 255, 0.04);
      }

      .bottom-parameter-bar .composer-pill,
      .bottom-parameter-bar .tag-button,
      .composer-meta .composer-pill {
        height: 31px;
        min-height: 31px;
        border-color: rgba(148, 163, 184, 0.2);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.065);
        color: #cbd5e1;
      }

      .bottom-parameter-bar .composer-pill:hover,
      .bottom-parameter-bar .tag-button:hover,
      .composer-meta .composer-pill:hover {
        border-color: rgba(125, 211, 252, 0.46);
        background: rgba(56, 189, 248, 0.12);
        color: #ffffff;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
      }

      .bottom-parameter-bar .composer-pill.active,
      .bottom-parameter-bar .tag-button.active,
      .bottom-parameter-bar .bottom-type-button:first-child {
        border-color: rgba(125, 211, 252, 0.55);
        background: rgba(56, 189, 248, 0.16);
        color: #dff7ff;
        box-shadow: 0 0 26px rgba(56, 189, 248, 0.14);
      }

      .composer-row {
        min-height: 70px;
        padding: 12px;
        border-radius: 0 0 20px 20px;
        background: rgba(3, 7, 18, 0.16);
      }

      .composer-input-wrap {
        min-height: 48px;
        padding: 9px 12px;
        border-color: rgba(148, 163, 184, 0.18);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.07);
      }

      .composer-input-wrap:focus-within {
        border-color: rgba(125, 211, 252, 0.72);
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12), 0 0 32px rgba(56, 189, 248, 0.14);
      }

      .composer-input-wrap #promptBox {
        color: #f8fbff;
        font-size: 0.88rem;
      }

      .composer-input-wrap #promptBox::placeholder {
        color: #7f8ea4;
      }

      .generate-button {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 14px;
        background: linear-gradient(135deg, #38bdf8 0%, #818cf8 58%, #f472b6 100%);
        color: #06111f;
        box-shadow: 0 18px 46px rgba(56, 189, 248, 0.28), 0 0 30px rgba(129, 140, 248, 0.22);
      }

      .generate-button:hover {
        background: linear-gradient(135deg, #7dd3fc 0%, #a5b4fc 58%, #f9a8d4 100%);
        box-shadow: 0 22px 58px rgba(56, 189, 248, 0.34), 0 0 40px rgba(129, 140, 248, 0.26);
      }

      .generate-button::before {
        color: #07111f;
        font-weight: 900;
      }

      .bottom-popover-grid,
      .advanced-shell,
      .document-tools.active,
      .reference-tools.active,
      .photo-tools.active,
      .edit-tools.active,
      .auth-card,
      .production-reference-card,
      .project-hover-preview {
        border-color: rgba(191, 219, 254, 0.24);
        border-radius: 16px;
        background: rgba(12, 18, 29, 0.96);
        color: #eef4ff;
        box-shadow: 0 28px 82px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }

      .bottom-mode-option,
      .tag-button,
      .advanced-toggle-button,
      .hero-button,
      .project-confirm-actions button,
      .production-reference-close,
      .field input,
      .inline-filter input,
      .document-page-controls input,
      .account-feedback-form select,
      .account-feedback-form input,
      .account-feedback-form textarea,
      .project-feedback-form select,
      .project-feedback-form input,
      .project-feedback-form textarea,
      .production-reference-textarea,
      #documentTableSelect {
        border-color: rgba(148, 163, 184, 0.22);
        background: rgba(255, 255, 255, 0.07);
        color: #eef4ff;
      }

      .bottom-mode-option:hover,
      .bottom-mode-option.active,
      .tag-button:hover,
      .tag-button.active,
      .advanced-toggle-button:hover,
      .advanced-toggle-button.active,
      .composer-pill.active {
        border-color: rgba(125, 211, 252, 0.5);
        background: rgba(56, 189, 248, 0.15);
        color: #dff7ff;
      }

      .bottom-popover-title,
      .panel-group h4,
      .advanced-title strong,
      .project-feedback-title,
      .production-reference-head h3,
      .auth-card h3 {
        color: #f8fbff;
      }

      .group-pill,
      .project-feedback-chips span,
      .suggestion-tag,
      .document-outline-page,
      .summary-cost,
      .composer-summary .summary-cost {
        border-color: rgba(125, 211, 252, 0.28);
        background: rgba(56, 189, 248, 0.12);
        color: #bde9ff;
      }

      .summary-cost strong,
      .composer-summary .summary-cost strong,
      .summary-cost .credit-label,
      .summary-cost .credit-balance {
        color: #dff7ff;
      }

      .project-feedback-copy,
      .section-note,
      .size-priority-note,
      .advanced-meta,
      .advanced-toggle-note,
      .auth-note,
      .project-feedback-status,
      .document-outline-empty,
      .batch-status {
        color: #9aa6b8;
      }

      .project-feedback-panel,
      .document-tools,
      .reference-tools,
      .photo-tools,
      .document-outline,
      .document-page-controls-quick,
      .document-preview,
      .document-table-preview,
      .wall-production-preview {
        border-color: rgba(148, 163, 184, 0.18);
        background: rgba(15, 23, 42, 0.82);
      }

      .project-confirm {
        background: rgba(9, 13, 21, 0.96);
        border-color: rgba(191, 219, 254, 0.24);
        color: #eef4ff;
      }

      .project-confirm-note,
      .project-hover-preview-meta {
        color: #9aa6b8;
      }

      .project-hover-preview-title {
        color: #f8fbff;
      }

      @media (max-width: 1180px) {
        .app {
          grid-template-columns: 272px minmax(0, 1fr);
        }

        .chat {
          left: calc(136px + 50vw);
          width: min(980px, calc(100vw - 312px));
        }

        .canvas-paper {
          width: min(760px, calc(100vw - 350px));
          min-width: 360px;
        }
      }

      @media (max-width: 980px) {
        .app {
          grid-template-columns: 1fr;
        }

        .chat {
          left: 12px;
          right: 12px;
          bottom: 12px;
          width: auto;
          transform: none;
        }

        .canvas-paper {
          width: min(720px, calc(100vw - 46px));
          min-width: 0;
        }
      }

      /* Final viewport fit corrections for the premium workspace */
      .canvas-paper {
        width: auto;
        height: min(calc(100vh - 284px), 720px);
        min-width: 0;
        max-width: calc(100vw - 430px);
        max-height: calc(100vh - 252px);
      }

      @media (max-width: 1180px) {
        .canvas-paper {
          width: auto;
          height: min(calc(100vh - 284px), 660px);
          max-width: calc(100vw - 350px);
        }
      }

      @media (max-width: 980px) {
        .canvas {
          padding-bottom: 218px;
        }

        .canvas-stage {
          padding: 12px 10px 210px;
        }

        .canvas-paper {
          width: auto;
          height: min(48vh, 430px);
          max-width: calc(100vw - 44px);
          min-width: 0;
        }

        .chat {
          position: fixed !important;
          top: auto !important;
          left: 12px !important;
          right: 12px !important;
          bottom: 12px !important;
          width: auto !important;
          transform: none !important;
        }

        .bottom-parameter-bar {
          flex-wrap: nowrap;
          overflow-x: auto;
        }

        .composer-row {
          min-height: 66px;
        }

        .composer-input-wrap #promptBox {
          max-height: 88px;
        }
      }

      @media (max-width: 480px) {
        .canvas {
          padding-bottom: 230px;
        }

        .canvas-stage {
          padding-bottom: 224px;
        }

        .canvas-paper {
          height: min(42vh, 360px);
        }

        .chat {
          left: 8px !important;
          right: 8px !important;
          bottom: 8px !important;
        }
      }

      /* Light premium workspace: neutral viewing environment for generated images */
      :root {
        --bg: #eef1f5;
        --panel: #ffffff;
        --line: #dce3ec;
        --line-2: #cbd5e1;
        --text: #111827;
        --muted: #667085;
        --soft: #98a2b3;
        --purple: #2563eb;
        --purple-2: #eaf2ff;
        --shadow: 0 24px 80px rgba(15, 23, 42, 0.13);
      }

      html,
      body {
        background: #eef1f5;
        color: #111827;
      }

      .app {
        background:
          radial-gradient(circle at 18% 10%, rgba(37, 99, 235, 0.08), transparent 30%),
          radial-gradient(circle at 82% 2%, rgba(14, 165, 233, 0.08), transparent 28%),
          #eef1f5;
      }

      .rail {
        border-right: 1px solid #d9e1eb;
        background: rgba(250, 252, 255, 0.94);
        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.8), 16px 0 54px rgba(15, 23, 42, 0.06);
      }

      .rail-brand {
        border-bottom-color: #e3e8ef;
      }

      .rail-title,
      .rail-account-copy strong {
        color: #111827;
      }

      .rail-title::before {
        background: linear-gradient(135deg, #2563eb, #06b6d4 64%, #8b5cf6);
        box-shadow: 0 0 18px rgba(37, 99, 235, 0.28);
      }

      .rail-subtitle,
      .rail-section-title,
      .rail-account-copy span,
      .rail-account-arrow {
        color: #667085;
      }

      .rail-new-button {
        border-color: #111827;
        background: #111827;
        color: #ffffff;
        box-shadow: 0 14px 30px rgba(17, 24, 39, 0.16);
      }

      .rail-new-button:hover {
        background: #1f2937;
        box-shadow: 0 18px 38px rgba(17, 24, 39, 0.2);
      }

      .rail .project-card,
      .rail .project-card.featured {
        border-color: transparent;
        background: transparent;
      }

      .rail .project-card:hover {
        border-color: #dbe3ee;
        background: #ffffff;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
      }

      .rail .thumb,
      .rail .project-card.featured .thumb {
        border-color: #dfe7f1;
        background: #f7f9fc;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

      .rail .new-thumb {
        color: #667085;
        background:
          radial-gradient(circle at 24% 18%, rgba(37, 99, 235, 0.16), transparent 28%),
          radial-gradient(circle at 76% 76%, rgba(14, 165, 233, 0.12), transparent 32%),
          #f8fafc;
      }

      .rail-account {
        border-top-color: #e3e8ef;
      }

      .rail-avatar {
        background: linear-gradient(135deg, #111827, #334155);
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
      }

      .top {
        border-bottom-color: rgba(215, 224, 235, 0.9);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
      }

      .project-title h1 {
        color: #111827;
      }

      .top-export-button,
      .support-chip {
        border-color: #d8e3f1;
        background: #ffffff;
        color: #2563eb;
        box-shadow: none;
      }

      .screen {
        background-color: #eef1f5;
        background-image:
          linear-gradient(rgba(148, 163, 184, 0.22) 1px, transparent 1px),
          linear-gradient(90deg, rgba(148, 163, 184, 0.22) 1px, transparent 1px),
          radial-gradient(circle at 46% 30%, rgba(37, 99, 235, 0.08), transparent 34%);
        background-size: 32px 32px, 32px 32px, 100% 100%;
      }

      .canvas-topbar {
        border-bottom-color: rgba(203, 213, 225, 0.72);
        background: rgba(255, 255, 255, 0.42);
      }

      .zoom-controls,
      .status-badge {
        border-color: #dce3ec;
        background: rgba(255, 255, 255, 0.86);
        color: #475467;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
      }

      .zoom-button,
      .zoom-value {
        color: #344054;
      }

      .zoom-button:hover {
        background: #eef4ff;
        color: #1d4ed8;
      }

      .status-dot.generating {
        background: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
      }

      .canvas-paper {
        background: #ffffff;
        box-shadow:
          0 0 0 1px rgba(15, 23, 42, 0.1),
          0 20px 70px rgba(15, 23, 42, 0.16);
      }

      .canvas-paper::after {
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
      }

      .empty-state {
        border-color: rgba(100, 116, 139, 0.2);
        background:
          radial-gradient(circle at 18% 16%, rgba(37, 99, 235, 0.12), transparent 30%),
          radial-gradient(circle at 82% 80%, rgba(14, 165, 233, 0.1), transparent 34%),
          linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
      }

      .empty-title {
        border-color: #dce3ec;
        background: rgba(255, 255, 255, 0.92);
        color: #475467;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
      }

      .chat {
        border: 1px solid rgba(203, 213, 225, 0.95);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 24px 78px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(22px) saturate(1.15);
      }

      .bottom-parameter-bar {
        border-bottom-color: #e3e8ef;
        background: #fbfcff;
      }

      .bottom-parameter-bar .composer-pill,
      .bottom-parameter-bar .tag-button,
      .composer-meta .composer-pill {
        border-color: #dce3ec;
        background: #ffffff;
        color: #344054;
      }

      .bottom-parameter-bar .composer-pill:hover,
      .bottom-parameter-bar .tag-button:hover,
      .composer-meta .composer-pill:hover {
        border-color: #bfd4f8;
        background: #f3f8ff;
        color: #1d4ed8;
        box-shadow: 0 9px 22px rgba(15, 23, 42, 0.08);
      }

      .bottom-parameter-bar .composer-pill.active,
      .bottom-parameter-bar .tag-button.active,
      .bottom-parameter-bar .bottom-type-button:first-child {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
        box-shadow: none;
      }

      .composer-row {
        background: #ffffff;
      }

      .composer-input-wrap {
        border-color: #e1e8f0;
        background: #f8fafc;
      }

      .composer-input-wrap:focus-within {
        border-color: #93c5fd;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
      }

      .composer-input-wrap #promptBox {
        color: #111827;
      }

      .composer-input-wrap #promptBox::placeholder {
        color: #98a2b3;
      }

      .generate-button {
        background: #111827;
        color: #ffffff;
        box-shadow: 0 14px 34px rgba(17, 24, 39, 0.2);
      }

      .generate-button:hover {
        background: #1f2937;
        box-shadow: 0 18px 42px rgba(17, 24, 39, 0.24);
      }

      .generate-button::before {
        color: #ffffff;
      }

      .generate-button.generating {
        background: #2563eb;
      }

      .bottom-popover-grid,
      .advanced-shell,
      .document-tools.active,
      .reference-tools.active,
      .photo-tools.active,
      .edit-tools.active,
      .auth-card,
      .production-reference-card,
      .project-hover-preview {
        border-color: #d8e1eb;
        background: rgba(255, 255, 255, 0.98);
        color: #111827;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
      }

      .bottom-mode-option,
      .tag-button,
      .advanced-toggle-button,
      .hero-button,
      .project-confirm-actions button,
      .production-reference-close,
      .field input,
      .inline-filter input,
      .document-page-controls input,
      .account-feedback-form select,
      .account-feedback-form input,
      .account-feedback-form textarea,
      .project-feedback-form select,
      .project-feedback-form input,
      .project-feedback-form textarea,
      .production-reference-textarea,
      #documentTableSelect {
        border-color: #dce3ec;
        background: #ffffff;
        color: #111827;
      }

      .bottom-mode-option:hover,
      .bottom-mode-option.active,
      .tag-button:hover,
      .tag-button.active,
      .advanced-toggle-button:hover,
      .advanced-toggle-button.active,
      .composer-pill.active {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
      }

      .bottom-popover-title,
      .panel-group h4,
      .advanced-title strong,
      .project-feedback-title,
      .production-reference-head h3,
      .auth-card h3 {
        color: #111827;
      }

      .group-pill,
      .project-feedback-chips span,
      .suggestion-tag,
      .document-outline-page,
      .summary-cost,
      .composer-summary .summary-cost {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
      }

      .summary-cost strong,
      .composer-summary .summary-cost strong,
      .summary-cost .credit-label,
      .summary-cost .credit-balance {
        color: #1d4ed8;
      }

      .project-feedback-copy,
      .section-note,
      .size-priority-note,
      .advanced-meta,
      .advanced-toggle-note,
      .auth-note,
      .project-feedback-status,
      .document-outline-empty,
      .batch-status,
      .project-confirm-note,
      .project-hover-preview-meta {
        color: #667085;
      }

      .project-feedback-panel,
      .document-tools,
      .reference-tools,
      .photo-tools,
      .document-outline,
      .document-page-controls-quick,
      .document-preview,
      .document-table-preview,
      .wall-production-preview {
        border-color: #dce3ec;
        background: #ffffff;
      }

      .project-confirm {
        border-color: #dce3ec;
        background: rgba(255, 255, 255, 0.98);
        color: #111827;
      }

      .project-hover-preview-title {
        color: #111827;
      }

      /* Figma templates-inspired polish: airy gallery rail, calm artboard, minimal command surface */
      .app {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 220px),
          radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.07), transparent 26%),
          radial-gradient(circle at 88% 6%, rgba(20, 184, 166, 0.06), transparent 26%),
          #f4f6f9;
      }

      .rail {
        background: rgba(255, 255, 255, 0.92);
        border-right-color: #e5eaf1;
      }

      .rail-brand {
        padding: 2px 2px 16px;
      }

      .rail-title {
        font-size: 1.12rem;
        letter-spacing: 0;
      }

      .rail-subtitle {
        font-size: 0.78rem;
        line-height: 1.45;
      }

      .rail-new-button {
        border-radius: 14px;
        background: linear-gradient(135deg, #111827 0%, #263244 100%);
      }

      .rail-section-title {
        margin-top: 22px;
        font-size: 0.72rem;
        font-weight: 800;
        color: #475467;
      }

      .rail .project-grid {
        gap: 12px;
      }

      .rail .project-card,
      .rail .project-card.featured {
        padding: 8px;
        border-radius: 16px;
      }

      .rail .project-card:hover {
        border-color: #d9e2ee;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
      }

      .rail .thumb,
      .rail .project-card.featured .thumb {
        height: 82px;
        border-radius: 13px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.88)),
          #f8fafc;
      }

      .rail .new-thumb {
        font-weight: 900;
        background:
          linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.09)),
          #f8fafc;
      }

      .top {
        background: rgba(255, 255, 255, 0.72);
      }

      .project-title h1 {
        font-size: 0.94rem;
        font-weight: 820;
      }

      .support-chip {
        border-radius: 999px;
        background: #f0f7ff;
      }

      .screen {
        background-color: #f4f6f9;
        background-image:
          linear-gradient(rgba(148, 163, 184, 0.18) 1px, transparent 1px),
          linear-gradient(90deg, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
          radial-gradient(circle at center, rgba(255, 255, 255, 0.62), transparent 48%);
        background-size: 40px 40px, 40px 40px, 100% 100%;
      }

      .canvas-topbar {
        background: rgba(255, 255, 255, 0.5);
      }

      .canvas-wrapper {
        padding: 38px;
      }

      .canvas-paper {
        border-radius: 4px;
        box-shadow:
          0 0 0 1px rgba(15, 23, 42, 0.08),
          0 18px 54px rgba(15, 23, 42, 0.13),
          0 0 0 12px rgba(255, 255, 255, 0.45);
      }

      .empty-state {
        background:
          linear-gradient(135deg, #ffffff 0%, #f8fbff 46%, #f5fbff 100%);
      }

      .empty-title {
        border-radius: 12px;
        color: #344054;
      }

      .chat {
        border-radius: 22px;
        border-color: rgba(203, 213, 225, 0.8);
        background: rgba(255, 255, 255, 0.88);
        box-shadow:
          0 24px 70px rgba(15, 23, 42, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.94);
      }

      .bottom-parameter-bar {
        padding: 11px 12px 9px;
        border-radius: 22px 22px 0 0;
        background: rgba(250, 252, 255, 0.9);
      }

      .bottom-parameter-bar .composer-pill,
      .bottom-parameter-bar .tag-button,
      .composer-meta .composer-pill {
        border-radius: 999px;
        background: #ffffff;
      }

      .bottom-parameter-bar .composer-pill.active,
      .bottom-parameter-bar .tag-button.active,
      .bottom-parameter-bar .bottom-type-button:first-child {
        background: #edf6ff;
        border-color: #b7d8ff;
      }

      .composer-row {
        padding: 12px;
        border-radius: 0 0 22px 22px;
      }

      .composer-input-wrap {
        border-radius: 16px;
        background: #f8fafc;
      }

      .generate-button {
        border-radius: 16px;
      }

      .bottom-popover-grid,
      .advanced-shell,
      .document-tools.active,
      .reference-tools.active,
      .photo-tools.active,
      .edit-tools.active,
      .auth-card,
      .production-reference-card,
      .project-hover-preview {
        border-radius: 18px;
      }

      @media (max-width: 980px) {
        .canvas-wrapper {
          padding: 22px;
        }

        .canvas-paper {
          box-shadow:
            0 0 0 1px rgba(15, 23, 42, 0.08),
            0 16px 42px rgba(15, 23, 42, 0.13);
        }
      }

      /* Designer Pro layout: template library + artboard + right inspector */
      .app {
        grid-template-columns: 300px minmax(0, 1fr);
        background: #f2f4f7;
      }

      .rail {
        background: #ffffff;
        border-right: 1px solid #e4e9f0;
        box-shadow: none;
      }

      .page {
        grid-template-rows: 56px minmax(0, 1fr);
      }

      .top {
        height: 56px;
        border-bottom: 1px solid #e4e9f0;
        background: rgba(255, 255, 255, 0.9);
      }

      .top-meta {
        gap: 8px;
      }

      .screen {
        background-color: #edf1f5;
        background-image:
          linear-gradient(rgba(148, 163, 184, 0.2) 1px, transparent 1px),
          linear-gradient(90deg, rgba(148, 163, 184, 0.2) 1px, transparent 1px);
        background-size: 36px 36px;
      }

      .workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 388px;
        height: 100%;
        overflow: hidden;
      }

      .canvas {
        grid-template-rows: 54px minmax(0, 1fr) 0;
        padding-bottom: 0;
        background: transparent;
      }

      .canvas-topbar {
        padding: 0 18px;
        border-bottom: 1px solid rgba(203, 213, 225, 0.72);
        background: rgba(255, 255, 255, 0.58);
        backdrop-filter: blur(14px);
      }

      .canvas-topbar::before {
        content: "画布";
        height: 30px;
        padding: 0 11px;
        border: 1px solid #dbe3ed;
        border-radius: 9px;
        background: #ffffff;
        color: #344054;
        display: inline-flex;
        align-items: center;
        font-size: 0.76rem;
        font-weight: 800;
      }

      .canvas-stage {
        padding: 24px 28px;
      }

      .canvas-wrapper {
        padding: 20px;
      }

      .canvas-paper {
        height: min(calc(100vh - 168px), 760px);
        max-height: calc(100vh - 148px);
        max-width: calc(100vw - 760px);
        border-radius: 4px;
        box-shadow:
          0 0 0 1px rgba(15, 23, 42, 0.08),
          0 26px 74px rgba(15, 23, 42, 0.16),
          0 0 0 14px rgba(255, 255, 255, 0.52);
      }

      .chat {
        position: static !important;
        width: auto !important;
        min-width: 0;
        height: 100%;
        transform: none !important;
        border-width: 0 0 0 1px;
        border-color: #e2e8f0;
        border-radius: 0;
        background: #ffffff;
        box-shadow: -18px 0 48px rgba(15, 23, 42, 0.06);
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        overflow: hidden;
        backdrop-filter: none;
      }

      .panel-scroll {
        display: block;
        max-height: none;
        min-height: 0;
        overflow: auto;
        padding: 18px 18px 14px;
      }

      .panel-scroll > .panel-group:first-child,
      .core-shell > .panel-group:first-child,
      .prompt-head,
      .prompt-suggestions,
      .advanced-header,
      .advanced-title span,
      .advanced-meta {
        display: block !important;
      }

      .group-head,
      .prompt-head,
      .advanced-title {
        display: flex !important;
      }

      .legacy-prompt-card,
      .legacy-safety-consent,
      .batch-card,
      .local-storage-note,
      .reference-guide,
      #referenceStatus {
        display: none !important;
      }

      .panel-group {
        margin-top: 18px;
        padding: 0 0 18px;
        border-bottom: 1px solid #eef2f6;
      }

      .panel-group:first-child {
        margin-top: 0;
      }

      .panel-group h4,
      .advanced-title strong {
        margin: 0 0 10px;
        color: #1f2937;
        font-size: 0.82rem;
        font-weight: 850;
      }

      .skill-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
      }

      .skill {
        min-height: 34px;
        border-radius: 10px;
        border-color: #e1e8f0;
        background: #f8fafc;
        color: #475467;
        font-weight: 760;
      }

      .skill.active {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
      }

      .core-shell {
        display: grid;
        gap: 0;
      }

      .advanced-shell {
        position: static;
        display: block !important;
        max-height: none;
        margin-top: 18px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }

      .advanced-shell:not(.open),
      .advanced-shell:has([hidden]):not(.open) {
        display: block !important;
      }

      .advanced-body {
        display: grid;
        gap: 0;
      }

      .advanced-toggle-row {
        display: none !important;
      }

      .style-tags,
      .ratio-tags,
      .suggestion-tags {
        gap: 7px;
      }

      .tag-button,
      .suggestion-tag,
      .composer-pill {
        border-radius: 10px;
      }

      .composer-wrap {
        position: static;
        padding: 14px;
        border-top: 1px solid #e4e9f0;
        background: #fbfcff;
        overflow: visible;
        max-height: none;
      }

      .composer {
        display: grid;
        gap: 0;
        padding: 0;
        border: 1px solid #dce3ec;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
        overflow: hidden;
      }

      .bottom-parameter-bar {
        padding: 10px;
        border-radius: 0;
        border-bottom: 1px solid #edf1f5;
        background: #ffffff;
        flex-wrap: wrap;
        overflow: visible;
      }

      .bottom-parameter-bar .composer-pill,
      .bottom-parameter-bar .tag-button {
        height: 28px;
        min-height: 28px;
        font-size: 0.7rem;
      }

      .composer-row {
        grid-template-columns: minmax(0, 1fr) 44px;
        min-height: 118px;
        padding: 10px;
        border-radius: 0;
      }

      .composer-input-wrap {
        min-height: 96px;
        border-radius: 14px;
      }

      .composer-input-wrap #promptBox {
        min-height: 78px;
        max-height: 112px;
      }

      .generate-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        align-self: end;
      }

      .composer-summary .summary-cost {
        margin-left: 0;
      }

      .document-tools.active,
      .reference-tools.active,
      .photo-tools.active,
      .edit-tools.active {
        position: static;
        max-height: 240px;
        margin: 10px;
      }

      .rail .project-meta {
        display: block;
        margin-top: 8px;
      }

      .rail .project-card,
      .rail .project-card.featured {
        min-height: 128px;
      }

      .rail .thumb,
      .rail .project-card.featured .thumb {
        height: 92px;
      }

      .rail .title-row {
        color: #111827;
        font-size: 0.78rem;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .rail .date-row {
        margin-top: 3px;
        font-size: 0.68rem;
      }

      @media (max-width: 1180px) {
        .workspace {
          grid-template-columns: minmax(0, 1fr) 360px;
        }

        .canvas-paper {
          max-width: calc(100vw - 680px);
        }

        .skill-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 980px) {
        .app {
          grid-template-columns: 1fr;
        }

        .workspace {
          grid-template-columns: 1fr;
          grid-template-rows: minmax(0, 1fr) auto;
        }

        .chat {
          position: fixed !important;
          left: 8px !important;
          right: 8px !important;
          bottom: 8px !important;
          top: auto !important;
          width: auto !important;
          height: 245px;
          border: 1px solid #dce3ec;
          border-radius: 18px;
          box-shadow: 0 22px 62px rgba(15, 23, 42, 0.18);
        }

        .panel-scroll {
          display: none;
        }

        .composer-wrap {
          padding: 8px;
          border-top: 0;
          background: transparent;
        }

        .canvas {
          padding-bottom: 258px;
        }

        .canvas-stage {
          padding-bottom: 252px;
        }

        .canvas-paper {
          height: min(42vh, 360px);
          max-width: calc(100vw - 44px);
        }
      }

      /* Restore original bottom-composer workflow, with cleaner typography */
      .app {
        grid-template-columns: 300px minmax(0, 1fr);
      }

      .page {
        grid-template-rows: 52px minmax(0, 1fr);
      }

      .workspace {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        height: 100%;
        overflow: hidden;
      }

      .canvas {
        grid-template-rows: 50px minmax(0, 1fr) 0;
        padding-bottom: 100px;
      }

      .canvas-topbar {
        height: 50px;
      }

      .canvas-topbar::before {
        display: none;
      }

      .canvas-stage {
        padding: 14px 16px 12px;
      }

      .canvas-wrapper {
        padding: 26px;
      }

      .canvas-paper {
        width: auto;
        height: min(calc(100vh - 284px), 720px);
        max-width: calc(100vw - 430px);
        max-height: calc(100vh - 252px);
      }

      .chat {
        position: fixed !important;
        left: calc(150px + 50vw) !important;
        right: auto !important;
        bottom: 18px !important;
        top: auto !important;
        z-index: 38;
        width: min(1160px, calc(100vw - 340px)) !important;
        height: auto;
        min-height: 0;
        transform: translateX(-50%) !important;
        border: 1px solid rgba(203, 213, 225, 0.88);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 22px 64px rgba(15, 23, 42, 0.14);
        display: block;
        overflow: visible;
        backdrop-filter: blur(18px);
      }

      .panel-scroll {
        display: block;
        max-height: 0;
        min-height: 0;
        overflow: visible;
        padding: 0;
      }

      .panel-scroll > .panel-group:first-child,
      .core-shell > .panel-group:first-child,
      .panel-group.beginner-hidden,
      .legacy-prompt-card,
      .legacy-safety-consent,
      .prompt-head,
      .prompt-suggestions,
      .batch-card,
      .local-storage-note,
      .reference-guide,
      #referenceStatus,
      .advanced-header,
      .advanced-title span,
      .advanced-meta {
        display: none !important;
      }

      .core-shell,
      .core-shell .panel-group:has(#promptBox) {
        display: contents;
      }

      .advanced-shell {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 10px);
        z-index: 45;
        max-height: min(55vh, 520px);
        overflow: auto;
        padding: 14px;
        border: 1px solid #d8e1eb;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 58px rgba(15, 23, 42, 0.16);
      }

      .advanced-shell:not(.open),
      .advanced-shell:has([hidden]):not(.open) {
        display: none !important;
      }

      .advanced-shell.open {
        display: block !important;
      }

      .advanced-body {
        display: grid;
        gap: 16px;
      }

      .advanced-toggle-row {
        display: block !important;
        padding: 0 14px 10px;
      }

      .composer-wrap {
        position: static;
        padding: 0;
        border-top: 0;
        background: transparent;
        overflow: visible;
        max-height: none;
      }

      .composer {
        display: grid;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 18px;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }

      .bottom-parameter-bar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        padding: 9px 12px;
        border-bottom: 1px solid #e6ebf2;
        border-radius: 18px 18px 0 0;
        background: rgba(250, 252, 255, 0.96);
        overflow: visible;
      }

      .composer-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 10px;
        align-items: center;
        min-height: 66px;
        padding: 10px 12px 12px;
        border-radius: 0 0 18px 18px;
        background: #ffffff;
      }

      .composer-input-wrap {
        min-height: 46px;
        padding: 8px 10px;
        border: 1px solid #e1e8f0;
        border-radius: 12px;
        background: #f8fafc;
      }

      .composer-input-wrap #promptBox {
        min-height: 42px;
        max-height: 150px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #111827;
        font-size: 0.88rem;
        line-height: 1.55;
      }

      .generate-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        align-self: center;
        border-radius: 13px;
      }

      .bottom-parameter-bar .composer-pill,
      .bottom-parameter-bar .tag-button,
      .composer-meta .composer-pill {
        width: auto;
        min-width: auto;
        max-width: 250px;
        height: 29px;
        min-height: 29px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 0.74rem;
        line-height: 1;
        font-weight: 720;
      }

      .bottom-type-button {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .top,
      .project-title h1,
      .status-badge,
      .zoom-button,
      .composer-pill,
      .tag-button,
      .skill,
      .bottom-mode-option {
        letter-spacing: 0;
      }

      .project-title h1 {
        font-size: 0.9rem;
      }

      .top-meta {
        font-size: 0.78rem;
      }

      .support-chip {
        font-size: 0.72rem;
      }

      .zoom-button,
      .status-badge {
        font-size: 0.74rem;
      }

      .summary-cost,
      .composer-summary .summary-cost {
        font-size: 0.68rem;
      }

      .summary-cost strong,
      .composer-summary .summary-cost strong {
        font-size: 0.86rem;
      }

      .section-note,
      .size-priority-note,
      .advanced-toggle-note,
      .batch-status {
        font-size: 0.72rem;
        line-height: 1.5;
      }

      .rail .project-meta {
        display: none;
      }

      .rail .project-card,
      .rail .project-card.featured {
        min-height: 92px;
      }

      .rail .thumb,
      .rail .project-card.featured .thumb {
        height: 78px;
      }

      @media (max-width: 1180px) {
        .app {
          grid-template-columns: 272px minmax(0, 1fr);
        }

        .chat {
          left: calc(136px + 50vw) !important;
          width: min(980px, calc(100vw - 312px)) !important;
        }

        .canvas-paper {
          height: min(calc(100vh - 284px), 660px);
          max-width: calc(100vw - 350px);
        }
      }

      @media (max-width: 980px) {
        .app {
          grid-template-columns: 1fr;
        }

        .workspace {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
        }

        .chat {
          left: 8px !important;
          right: 8px !important;
          bottom: 8px !important;
          top: auto !important;
          width: auto !important;
          height: auto;
          transform: none !important;
          border-radius: 18px;
        }

        .panel-scroll {
          display: none;
        }

        .canvas {
          padding-bottom: 222px;
        }

        .canvas-stage {
          padding: 12px 10px 216px;
        }

        .canvas-paper {
          height: min(42vh, 360px);
          max-width: calc(100vw - 44px);
        }

        .bottom-parameter-bar {
          flex-wrap: nowrap;
          overflow-x: auto;
        }

        .composer-row {
          grid-template-columns: minmax(0, 1fr) 42px;
          min-height: 66px;
        }

        .composer-input-wrap #promptBox {
          max-height: 86px;
          font-size: 0.84rem;
        }

        .generate-button {
          width: 42px;
          height: 42px;
          min-width: 42px;
        }
      }

/* Final active desktop layout: right-side prompt composer, no bottom overlay on generated artwork. */
@media (min-width: 981px) {
  .workspace {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 388px !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .canvas {
    grid-column: 1 !important;
    grid-template-rows: 50px minmax(0, 1fr) auto !important;
    padding-bottom: 0 !important;
    min-width: 0 !important;
    position: relative !important;
  }

  .canvas-stage {
    padding: 14px 16px 12px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 218px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .canvas-paper {
    max-width: calc(100vw - 950px) !important;
    max-height: calc(100vh - 166px) !important;
  }

  .chat {
    grid-column: 2 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 3 !important;
    width: 388px !important;
    height: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    border-left: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .panel-scroll {
    display: block !important;
    max-height: none !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 12px !important;
  }

  .panel-scroll > .panel-group:first-child,
  .core-shell > .panel-group:first-child,
  .prompt-head,
  .legacy-prompt-card,
  .legacy-safety-consent,
  .prompt-suggestions {
    display: none !important;
  }

  .core-shell,
  .core-shell .panel-group {
    display: block !important;
  }

  .advanced-shell {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .composer-wrap {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 364px !important;
    z-index: 8 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: auto !important;
    max-height: none !important;
  }

  .composer {
    display: grid !important;
    gap: 10px !important;
    align-content: start !important;
    padding: 12px !important;
    border: 1px solid #e5e7ee !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08) !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .bottom-popover-grid {
    position: static !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }

  .bottom-parameter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .composer-summary-inline {
    order: -1;
    flex: 1 0 100%;
    margin: 0 0 2px !important;
  }

  .bottom-parameter-bar .composer-pill,
  .bottom-parameter-bar .tag-button {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  .composer-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: end !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .composer-input-wrap {
    min-width: 0 !important;
    min-height: 132px !important;
    padding: 10px !important;
    border: 1px solid #dfe6ef !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
  }

  .composer-input-wrap #promptBox {
    display: block !important;
    width: 100% !important;
    min-height: 112px !important;
    max-height: 260px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    resize: vertical !important;
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
    color: #111827 !important;
  }

  .generate-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 13px !important;
    align-self: end !important;
  }

  .document-tools,
  .reference-tools,
  .photo-tool-panel,
  .edit-tools {
    margin-top: 0 !important;
  }
}

/* Canvas layer panel final responsive guard. */
@media (max-width: 980px) {
  .canvas-stage {
    display: block !important;
  }

  .canvas-layer-panel {
    display: none !important;
  }
}

/* Empty workspace must remain a single centered canvas. Layer columns only appear after a version exists. */
@media (min-width: 981px) {
  .projects-mode .canvas-stage,
  .workspace-mode:not(.has-canvas-version) .canvas-stage {
    display: block !important;
    grid-template-columns: none !important;
  }

  .projects-mode .canvas-layer-panel,
  .workspace-mode:not(.has-canvas-version) .canvas-layer-panel {
    display: none !important;
  }
}

/* Yunsuanbao-style infinite workbench: the grid is the canvas, layers float directly on it. */
.canvas-stage {
  min-height: 0 !important;
  padding: 0 !important;
  background-color: #eef3f8 !important;
  background-image:
    linear-gradient(rgba(184, 200, 218, 0.68) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 200, 218, 0.68) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  background-position: var(--canvas-pan-x, 0px) var(--canvas-pan-y, 0px) !important;
}

.canvas-frame {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  cursor: default !important;
  touch-action: none !important;
}

.canvas-frame.canvas-space-pan {
  cursor: grab !important;
}

.canvas-frame.canvas-pan-tool {
  cursor: grab !important;
}

.canvas-frame.canvas-is-panning {
  cursor: grabbing !important;
}

.canvas-wrapper {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  display: block !important;
}

.canvas-paper {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translate(var(--canvas-pan-x, 0px), var(--canvas-pan-y, 0px)) scale(var(--canvas-zoom, 1)) !important;
  transform-origin: center center !important;
  overflow: visible !important;
  will-change: transform !important;
}

.empty-state {
  inset: 0 !important;
}

.empty-title {
  max-width: min(260px, 70%) !important;
  padding: 12px 22px !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 18px 42px rgba(31, 41, 55, 0.12) !important;
  color: #243044 !important;
  font-size: 0.98rem !important;
  font-weight: 760 !important;
}

.result-view,
.canvas-layer-surface {
  width: 100% !important;
  height: 100% !important;
}

.result-art {
  display: none !important;
}

.canvas-render-layer {
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  user-select: none !important;
}

.canvas-render-layer.selected {
  outline: 1px solid #2563eb !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2) !important;
}

.canvas-render-layer.processing {
  overflow: hidden !important;
  pointer-events: none !important;
  outline: 1px solid rgba(37, 99, 235, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 18px 42px rgba(37, 99, 235, 0.16) !important;
  animation: canvasProcessingPulse 1.35s ease-in-out infinite !important;
}

.canvas-render-layer.processing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.72) 44%, rgba(37,99,235,0.18) 52%, transparent 64%),
    rgba(37, 99, 235, 0.06);
  transform: translateX(-120%);
  animation: canvasProcessingSweep 1.25s linear infinite;
  pointer-events: none;
}

.canvas-render-layer.processing::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  border: 1px dashed rgba(37, 99, 235, 0.72);
  border-radius: 4px;
  pointer-events: none;
}

.canvas-processing-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  min-width: 88px;
  max-width: min(220px, 88%);
  padding: 8px 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.canvas-layer-item.processing {
  border-color: rgba(37, 99, 235, 0.34) !important;
  background: linear-gradient(90deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.98)) !important;
  background-size: 220% 100% !important;
  animation: canvasLayerListProcessing 1.2s linear infinite !important;
}

.canvas-layer-item.processing .canvas-layer-kind {
  color: #1d4ed8 !important;
  background: rgba(219, 234, 254, 0.95) !important;
}

@keyframes canvasProcessingSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes canvasProcessingPulse {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.08) brightness(1.04); }
}

@keyframes canvasLayerListProcessing {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}

.canvas-layer-resize-handle {
  width: 10px !important;
  height: 10px !important;
  border: 1px solid #2563eb !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16) !important;
}

/* Chat-first generation entry, matching the canvas-agent workflow. */
.ai-chat-shell {
  display: grid !important;
  gap: 10px !important;
  min-height: 180px !important;
}

.ai-chat-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #1f2937 !important;
}

.ai-chat-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
}

.ai-chat-badge {
  padding: 6px 12px !important;
  border: 1px solid #e4e1d8 !important;
  border-radius: 999px !important;
  background: #fffdfa !important;
  color: #6b7280 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
}

.ai-chat-log {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 124px !important;
  max-height: 260px !important;
  overflow: auto !important;
  padding: 2px 2px 8px !important;
}

.ai-chat-log:empty::before {
  content: "直接输入需求开始生图，例如：做一幅清廉文化墙 5:1 高清" !important;
  display: block !important;
  padding: 12px 14px !important;
  border: 1px dashed #d8dee9 !important;
  border-radius: 14px !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

.ai-chat-message {
  display: grid !important;
  gap: 6px !important;
  max-width: 88% !important;
}

.ai-chat-message.user {
  align-self: flex-end !important;
}

.ai-chat-message.assistant {
  align-self: flex-start !important;
}

.ai-chat-bubble {
  padding: 10px 14px !important;
  border-radius: 16px !important;
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.ai-chat-message.user .ai-chat-bubble {
  border-bottom-right-radius: 5px !important;
  background: #3478f6 !important;
  color: #ffffff !important;
}

.ai-chat-message.assistant .ai-chat-bubble {
  border-bottom-left-radius: 5px !important;
  background: #f2f4f8 !important;
  color: #334155 !important;
}

.ai-chat-time {
  justify-self: end !important;
  color: #cbd5e1 !important;
  font-size: 0.7rem !important;
}

.ai-chat-message.assistant .ai-chat-time {
  justify-self: start !important;
}

.ai-chat-image {
  width: min(240px, 100%) !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  object-fit: contain !important;
}

#bottomProviderPopover {
  width: min(430px, calc(100vw - 32px)) !important;
  max-height: min(72vh, 680px) !important;
  overflow: auto !important;
  padding: 8px !important;
}

.agent-model-option {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 14px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  cursor: pointer !important;
  text-align: left !important;
}

.agent-model-option:hover,
.agent-model-option.active {
  background: #eef5ff !important;
  border-color: #d5e6ff !important;
}

.agent-model-option.active::after {
  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  bottom: 10px !important;
  width: 7px !important;
  height: 12px !important;
  border-right: 2px solid #3478f6 !important;
  border-bottom: 2px solid #3478f6 !important;
  transform: rotate(40deg) !important;
}

.agent-model-main {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.agent-model-main strong {
  color: #1f2937 !important;
  font-size: 0.96rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.agent-model-main small {
  display: inline-flex !important;
  margin-left: 6px !important;
  padding: 2px 6px !important;
  border: 1px solid #9bc2ff !important;
  border-radius: 6px !important;
  color: #3478f6 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

.agent-model-main em {
  color: #97a1b2 !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

.agent-model-cost {
  padding: 4px 8px !important;
  border: 1px solid #fdc98a !important;
  border-radius: 7px !important;
  background: #fff8ed !important;
  color: #f97316 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.composer-input-wrap {
  min-height: 148px !important;
  border-radius: 24px !important;
}

.composer-row {
  grid-template-columns: minmax(0, 1fr) 52px !important;
  align-items: end !important;
}

.generate-button {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  font-size: 0 !important;
}

.generate-button::before {
  content: "↑" !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
}

#bottomModePopover[hidden],
#bottomResolutionPopover[hidden],
#bottomRatioPopover[hidden],
#bottomProviderPopover[hidden] {
  display: none !important;
}

/* Compact right-side AI composer: keep controls usable without covering canvas tools. */
.composer-wrap {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.composer {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.ai-chat-shell {
  gap: 6px !important;
  min-height: 0 !important;
}

.ai-chat-head {
  min-height: 26px !important;
}

.ai-chat-title {
  font-size: 0.92rem !important;
}

.ai-chat-badge {
  display: none !important;
}

.ai-chat-log {
  min-height: 42px !important;
  max-height: 150px !important;
  gap: 7px !important;
  padding-bottom: 2px !important;
}

.ai-chat-log:empty::before {
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
}

.bottom-parameter-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 0 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
}

.bottom-parameter-bar .composer-pill,
.bottom-parameter-bar .tag-button {
  flex: 0 0 auto !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
}

.bottom-parameter-bar .bottom-type-button {
  max-width: 132px !important;
}

.bottom-parameter-bar #bottomRatioButton,
.bottom-parameter-bar #regionEditButton,
.bottom-parameter-bar #productionViewButton {
  display: none !important;
}

.composer-summary-inline {
  order: 20 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 220px !important;
  margin: 0 !important;
}

.composer-summary-inline .summary-main {
  display: none !important;
}

.composer-summary-inline .summary-cost {
  min-height: 28px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  font-size: 0.7rem !important;
}

.composer-summary-inline .summary-cost strong {
  font-size: 0.78rem !important;
}

.composer-row {
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 8px !important;
}

.composer-input-wrap {
  min-height: 86px !important;
  padding: 9px !important;
  border-radius: 12px !important;
}

.composer-input-wrap #promptBox {
  min-height: 64px !important;
  max-height: 118px !important;
  resize: none !important;
  font-size: 0.8rem !important;
  line-height: 1.42 !important;
}

.safety-consent {
  margin-top: 6px !important;
  padding-top: 6px !important;
  max-height: 28px !important;
  overflow: hidden !important;
}

.safety-consent label {
  font-size: 0.64rem !important;
  line-height: 1.25 !important;
}

.generate-button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
}

.agent-preset-panel {
  display: none !important;
}

.canvas-ai-tools {
  margin-top: 10px !important;
}

.canvas-ai-tools h4 {
  font-size: 0.9rem !important;
  margin-bottom: 8px !important;
}

.canvas-ai-tool-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.canvas-ai-tool-actions .composer-pill {
  width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: 0.74rem !important;
}

#canvasLayerToolNote {
  margin-top: 8px !important;
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
}

.canvas-text-inspector {
  margin-top: 8px !important;
  padding: 10px !important;
  border: 1px solid #dbe6f5 !important;
  border-radius: 12px !important;
  background: #f8fbff !important;
}

.canvas-text-inspector[hidden] {
  display: none !important;
}

.canvas-image-inspector {
  margin-top: 8px !important;
  padding: 10px !important;
  border: 1px solid #dbe6f5 !important;
  border-radius: 12px !important;
  background: #f8fbff !important;
}

.canvas-image-inspector[hidden] {
  display: none !important;
}

.canvas-text-inspector-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.canvas-text-inspector-head h4 {
  margin: 0 !important;
  font-size: 0.84rem !important;
}

.canvas-text-inspector-delete {
  height: 26px !important;
  padding: 0 9px !important;
  border: 1px solid #fecaca !important;
  border-radius: 8px !important;
  background: #fff5f5 !important;
  color: #b42318 !important;
  font: inherit !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.canvas-text-inspector-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.canvas-text-field {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  color: #475569 !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
}

.canvas-text-field input[type="range"] {
  width: 100% !important;
  accent-color: #2563eb !important;
}

.canvas-text-field input[type="color"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 2px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.canvas-text-align-row,
.canvas-text-quick-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.canvas-text-align-row button,
.canvas-text-quick-row .composer-pill {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 6px !important;
  border-radius: 8px !important;
  font-size: 0.7rem !important;
}

.canvas-text-align-row button {
  border: 1px solid #d8e2ef !important;
  background: #fff !important;
  color: #334155 !important;
  font: inherit !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.canvas-text-align-row button.active {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.canvas-text-quick-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.canvas-image-opacity-field {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.canvas-image-quick-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.alpha-repair-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 18px !important;
  background: rgba(15, 23, 42, 0.58) !important;
  backdrop-filter: blur(3px) !important;
}

.alpha-repair-head,
.alpha-repair-foot {
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16) !important;
}

.alpha-repair-head h3 {
  margin: 0 !important;
  font-size: 0.95rem !important;
}

.alpha-repair-head p {
  margin: 2px 0 0 !important;
  color: #64748b !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

.alpha-repair-stage {
  width: min(1180px, 100%) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: auto !important;
  border-radius: 12px !important;
  background-color: #eef4fb !important;
  background-image:
    linear-gradient(45deg, rgba(148, 163, 184, 0.24) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.24) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.24) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.24) 75%) !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
  background-size: 24px 24px !important;
}

.alpha-repair-canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.2) !important;
  cursor: crosshair !important;
  touch-action: none !important;
}

.alpha-repair-actions,
.alpha-repair-controls {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.alpha-repair-button {
  height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #d8e2ef !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #334155 !important;
  font: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.alpha-repair-button.active {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.alpha-repair-button.primary {
  border-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
  color: #fff !important;
}

.alpha-repair-button.danger {
  border-color: #fecaca !important;
  background: #fff5f5 !important;
  color: #b42318 !important;
}

.alpha-repair-controls label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #475569 !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
}

.alpha-repair-controls input[type="range"] {
  width: 150px !important;
  accent-color: #2563eb !important;
}

.text-layer {
  display: block !important;
  pointer-events: none !important;
}

.canvas-text-block {
  pointer-events: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

/* Compact UI density: reduce software chrome text without changing artwork text on the canvas. */
html {
  font-size: 15px !important;
}

body,
.app {
  font-size: 0.92rem !important;
}

.rail,
.chat,
.panel-scroll,
.project-card,
.project-hover-preview,
.canvas-layer-panel,
.canvas-toolbar,
.composer,
.advanced-shell,
.bottom-popover-grid,
.auth-modal,
.alpha-repair-modal {
  font-size: 0.86rem !important;
}

.rail-title strong,
.project-title h1,
.projects-hero h2,
.panel-group h4,
.canvas-layer-panel__head strong,
.canvas-text-inspector-head h4,
.canvas-production-inspector h4,
.prompt-head h4,
.suggestion-title,
.project-feedback-title {
  font-size: 0.9rem !important;
}

.rail-subtitle,
.rail-section-title,
.rail-section-title strong,
.project-meta,
.date-row,
.project-cover-label,
.project-bulk-toolbar button,
.canvas-layer-copy strong,
.canvas-layer-copy small,
.canvas-layer-kind,
.composer-pill,
.tag-button,
.bottom-mode-option,
.bottom-document-stepper,
.canvas-tool-button,
.zoom-button,
.status-badge,
.summary-copy,
.summary-cost,
.prompt-suggestions,
.size-priority-note,
.canvas-layer-context-menu button,
.canvas-text-field,
.canvas-text-align-row button,
.canvas-text-quick-row .composer-pill,
.project-confirm-title,
.project-confirm-note,
.project-confirm-actions button {
  font-size: 0.74rem !important;
}

.composer-input-wrap #promptBox,
.prompt-card textarea,
.batch-card textarea,
.project-feedback-form textarea,
.project-feedback-form input,
.project-feedback-form select,
.inline-filter input,
.advanced-shell input,
.advanced-shell textarea,
.advanced-shell select {
  font-size: 0.82rem !important;
}

.ai-chat-log,
.ai-chat-message,
.ai-chat-bubble,
.local-storage-note,
.background-job-notice {
  font-size: 0.8rem !important;
}

.generate-button {
  font-size: 0.9rem !important;
}

.empty-title {
  font-size: 0.94rem !important;
}

/* Hide optional helper panels and give the prompt/chat area more working room. */
.panel-group.beginner-hidden,
.panel-group:has(#industryTags),
.panel-group:has(#industrySearchInput),
.panel-group:has(#bannerIndustryTags),
#bannerIndustryPanel {
  display: none !important;
}

@media (min-width: 981px) {
  .chat {
    width: 420px !important;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr) 420px !important;
  }

  .composer-wrap {
    width: 396px !important;
  }

  .composer {
    gap: 8px !important;
  }

  .composer-input-wrap {
    min-height: 178px !important;
  }

  .composer-input-wrap #promptBox {
    min-height: 156px !important;
    max-height: 360px !important;
  }

  .panel-scroll {
    padding-top: 10px !important;
  }
}