@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Montserrat:wght@600;700&family=Outfit:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&family=Rochester&display=swap');

.line-art-customizer-root {
      --bg-app: #f6f6f7;
      /* Off-white background */
      --bg-surface: #ffffff;
      /* Pure white cards */
      --bg-surface-accent: #f3f4f6;
      /* Soft grey active panels */
      --border-color: #e5e7eb;
      /* Light grey borders */
      --border-color-active: #111827;
      /* Dark charcoal active borders */
      --text-primary: #111827;
      /* Dark charcoal */
      --text-secondary: #4b5563;
      /* Slate grey */
      --text-muted: #9ca3af;
      /* Soft grey */

      --accent: #111827;
      /* Professional dark slate/black accent */
      --accent-hover: #1f2937;
      --accent-glow: rgba(17, 24, 39, 0.06);
      --accent-secondary: #4b5563;
      --success: #10b981;

      --radius-lg: 12px;
      --radius-md: 8px;
      --radius-sm: 6px;

      --transition-fast: 0.15s ease;
      --transition-normal: 0.2s ease-in-out;
    }
.line-art-customizer-root, .line-art-customizer-root * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
.line-art-customizer-root {
      color: var(--text-primary);
      font-family: 'Outfit', sans-serif;
      -webkit-font-smoothing: antialiased;
    }
.line-art-customizer-root .app-container {
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }
.line-art-customizer-root /* Main Wizard Contents */
    .wizard-content-container {
      display: block;
      width: 100%;
    }
.line-art-customizer-root /* Step panes: default visible for step 1; other panes can be locked */
    .step-content {
      display: flex;
      flex-direction: column;
      animation: fadeIn var(--transition-normal);
      gap: 16px;
      margin: 0;
    }
.line-art-customizer-root .step-content.locked { display: none !important; }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(4px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
.line-art-customizer-root /* Card Panels */
    .glass-panel {
      container-type: inline-size;
      background: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 20px;
      box-shadow: none;
    }
.line-art-customizer-root /* STEP 1: Upload Layout */
    .upload-step-layout {
      max-width: none;
      margin: 0;
      width: 100%;
    }
.line-art-customizer-root .glass-panel.upload-step-layout {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
    }
.line-art-customizer-root .upload-zone {
      border: 0;
      background: transparent;
      border-radius: 0;
      padding: 0;
      text-align: left;
      cursor: pointer;
      transition: all var(--transition-normal);
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
.line-art-customizer-root .upload-zone:hover, .line-art-customizer-root .upload-zone.dragging {
      background: transparent;
    }
.line-art-customizer-root .upload-icon {
      display: none;
    }
.line-art-customizer-root .upload-zone:hover .upload-icon {
      color: var(--accent-hover);
    }
.line-art-customizer-root .upload-text {
      display: none;
    }
.line-art-customizer-root .upload-subtext {
      display: none;
    }
.line-art-customizer-root .upload-required-marker {
      display: none !important;
    }
.line-art-customizer-root .btn-secondary.upload-picture-btn {
      width: 100%;
      min-height: 44px;
      border-radius: 10px;
      background: #2f7dee;
      border: 1px solid #2f7dee;
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      box-shadow: 0 8px 20px -8px rgba(47, 125, 238, 0.55);
    }
.line-art-customizer-root .btn-secondary.upload-picture-btn::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--upload-progress, 0%);
      background: rgba(10, 53, 120, 0.38);
      z-index: 0;
      transition: width 0.15s linear;
    }
.line-art-customizer-root .btn-secondary.upload-picture-btn.is-loading::after {
      content: none;
    }
.line-art-customizer-root .btn-secondary.upload-picture-btn .upload-picture-label {
      position: relative;
      z-index: 1;
      width: 100%;
    }
.line-art-customizer-root .btn-secondary.upload-picture-btn:hover {
      background: #2569d1;
      border-color: #2569d1;
      color: #ffffff;
    }
.line-art-customizer-root .btn-secondary.upload-picture-btn.is-loading {
      background: #2569d1;
      border-color: #2569d1;
      color: #ffffff;
      cursor: wait;
      opacity: 1;
    }
.line-art-customizer-root .btn-secondary.upload-picture-btn:disabled {
      opacity: 1;
    }
.line-art-customizer-root .upload-loader-content {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 18px;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 52px;
      align-items: center;
      min-width: 0;
    }
.line-art-customizer-root .upload-loader-percent {
      grid-column: 1;
      justify-self: start;
      padding-left: 1px;
      color: rgba(255, 255, 255, 0.92);
      font-size: 13px;
      font-weight: 750;
      font-variant-numeric: tabular-nums;
    }
.line-art-customizer-root .upload-loader-roller {
      grid-column: 2;
      position: relative;
      height: 18px;
      min-width: 0;
      overflow: hidden;
    }
.line-art-customizer-root .upload-loader-message {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 650;
      letter-spacing: 0.2px;
      animation: uploadButtonRoll 3.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
.line-art-button-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      vertical-align: -2px;
      animation: spin 0.75s linear infinite;
    }
@keyframes uploadButtonRoll {
      0% { opacity: 0; transform: translateY(60%); }
      18% { opacity: 1; transform: translateY(0); }
      82% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-28%); }
    }
.line-art-customizer-root .upload-step-layout .preview-card {
      display: none !important;
    }
.line-art-customizer-root .preview-card {
      background: #fafafa;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 16px;
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
.line-art-customizer-root .preview-card img {
      max-height: 240px;
      max-width: 100%;
      object-fit: contain;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-color);
    }
.line-art-customizer-root .source-mode-selector {
      width: min(100%, 360px);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      padding: 4px;
      background: #f3f4f6;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
    }
.line-art-customizer-root .source-mode-option {
      min-height: 36px;
      border: 0;
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      transition: all var(--transition-fast);
    }
.line-art-customizer-root .source-mode-option.active {
      background: #ffffff;
      color: var(--text-primary);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }
.line-art-customizer-root .crop-canvas {
      width: min(100%, 360px);
      aspect-ratio: 1;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      display: block;
      touch-action: none;
      cursor: default;
      user-select: none;
    }
.line-art-customizer-root .crop-canvas.crop-enabled { cursor: grab; }
.line-art-customizer-root .crop-canvas.is-dragging { cursor: grabbing; }
.line-art-customizer-root .preview-card-info {
      font-size: 13px;
      color: var(--text-secondary);
    }
.line-art-customizer-root /* STEP 2: Variants Selection */
    .variants-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }
.line-art-customizer-root .variant-card {
      min-width: 0;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      cursor: pointer;
      position: relative;
      transition: all var(--transition-normal);
      overflow: hidden;
    }
.line-art-customizer-root .variant-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 2px solid transparent;
      border-radius: var(--radius-lg);
      transition: border-color var(--transition-fast);
      pointer-events: none;
    }
.line-art-customizer-root .variant-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
      border-color: #cbd5e1;
    }
.line-art-customizer-root .variant-card.selected::after {
      border-color: var(--accent);
    }
.line-art-customizer-root .variant-card.selected {
      background: #f8fafc;
    }
.line-art-customizer-root .variant-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
.line-art-customizer-root .variant-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
    }
.line-art-customizer-root .variant-badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 8px;
      background: #f1f5f9;
      border-radius: 12px;
      color: var(--text-secondary);
      letter-spacing: 0.5px;
    }
.line-art-customizer-root .variant-card.selected .variant-badge {
      background: var(--accent);
      color: #fff;
    }
.line-art-customizer-root .variant-preview-container {
      width: 100%;
      aspect-ratio: 1;
      background: #ffffff;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid var(--border-color);
      cursor: zoom-in;
    }
.line-art-customizer-root .variant-preview-container:focus-visible,
.line-art-customizer-root .mockup-image-container:focus-visible {
      outline: 3px solid rgba(17, 24, 39, 0.22);
      outline-offset: 2px;
    }
.line-art-customizer-root .variant-preview-container img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
.line-art-customizer-root .variant-select-btn {
      width: 100%;
      padding: 10px;
      border-radius: var(--radius-sm);
      font-weight: 600;
      font-size: 13px;
      background: #f8fafc;
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      cursor: pointer;
      transition: all var(--transition-fast);
    }
.line-art-customizer-root .variant-card:hover .variant-select-btn {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
    }
.line-art-customizer-root .variant-card.selected .variant-select-btn {
      background: var(--success);
      border-color: var(--success);
      color: white;
    }
.line-art-customizer-root /* STEP 3: Customize Layout */
    .customizer-top-actions {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 14px;
    }
.line-art-customizer-root .customizer-top-actions .btn {
      min-height: 36px;
      padding: 0 12px;
    }
.line-art-customizer-root .customizer-top-actions .customizer-back-btn {
      background: #1592e6;
      border: 1px solid #1592e6;
      color: #ffffff;
    }
.line-art-customizer-root .customizer-top-actions .customizer-back-btn:hover {
      background: #0f83d1;
      border-color: #0f83d1;
      color: #ffffff;
    }
    .customize-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
      gap: 24px;
      align-items: start;
    }
@media (max-width: 900px) {
      .line-art-customizer-root .customize-layout {
        grid-template-columns: 1fr;
      }
    }
@container (max-width: 760px) {
      .line-art-customizer-root .customize-layout {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .line-art-customizer-root .canvas-panel {
        width: 100%;
      }

      .line-art-customizer-root .svg-artwork-container {
        max-width: min(100%, 560px);
        min-height: 0;
      }

      .line-art-customizer-root .controls-panel {
        gap: 16px;
      }
    }
.line-art-customizer-root .canvas-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
    }
.line-art-customizer-root .svg-artwork-container {
      width: 100%;
      max-width: 860px;
      aspect-ratio: 1;
      min-height: 520px;
      background: #ffffff;
      border-radius: var(--radius-lg);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
      overflow: hidden;
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: zoom-in;
    }
.line-art-customizer-root .svg-artwork-container:focus-visible {
      outline: 3px solid rgba(17, 24, 39, 0.22);
      outline-offset: 2px;
    }
.line-art-customizer-root /* Subtle grid backdrop for transparent preview */
    .checkerboard-bg {
      background-color: #ffffff;
      background-image: none;
    }
.line-art-customizer-root /* Controls Panel */
    .controls-panel {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
.line-art-customizer-root .control-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
.line-art-customizer-root .control-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-secondary);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
.line-art-customizer-root .control-label span.value {
      text-transform: none;
      font-weight: 500;
      font-size: 12px;
      color: var(--text-secondary);
    }
.line-art-customizer-root .personalization-field-group .control-label {
      color: #2E86F5;
    }
.line-art-customizer-root .input-field {
      width: 100%;
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: var(--radius-md);
      padding: 12px 16px;
      font-size: 15px;
      color: var(--text-primary);
      font-family: inherit;
      outline: none;
      transition: all var(--transition-fast);
    }
.line-art-customizer-root .input-field:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
.line-art-customizer-root .personalization-field-group .input-field,
.line-art-customizer-root .personalization-field-group .textarea-field {
      border-color: #2E86F5;
      box-shadow: 0 0 0 1px rgba(46, 134, 245, 0.08);
    }
.line-art-customizer-root .personalization-field-group .input-field:focus,
.line-art-customizer-root .personalization-field-group .textarea-field:focus {
      border-color: #2E86F5;
      box-shadow: 0 0 0 3px rgba(46, 134, 245, 0.18);
    }
.line-art-customizer-root .textarea-field {
      width: 100%;
      min-height: 96px;
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: var(--radius-md);
      padding: 12px 16px;
      font-size: 15px;
      color: var(--text-primary);
      font-family: inherit;
      line-height: 1.45;
      outline: none;
      resize: vertical;
      transition: all var(--transition-fast);
    }
.line-art-customizer-root .textarea-field:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
.line-art-customizer-root .designer-notes-group {
      border-top: 1px solid var(--border-color);
      padding-top: 20px;
    }
.line-art-customizer-root /* Toggle rows */
    .toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f9fafb;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 10px 16px;
    }
.line-art-customizer-root .toggle-info {
      display: flex;
      flex-direction: column;
    }
.line-art-customizer-root .toggle-name {
      font-size: 14px;
      font-weight: 500;
    }
.line-art-customizer-root .toggle-desc {
      font-size: 11px;
      color: var(--text-secondary);
    }
.line-art-customizer-root .switch {
      position: relative;
      display: inline-block;
      width: 46px;
      height: 24px;
    }
.line-art-customizer-root .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
.line-art-customizer-root .slider-toggle {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: #cbd5e1;
      transition: .3s;
      border-radius: 24px;
    }
.line-art-customizer-root .slider-toggle:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }
.line-art-customizer-root input:checked+.slider-toggle {
      background-color: var(--accent);
    }
.line-art-customizer-root input:checked+.slider-toggle:before {
      transform: translateX(22px);
    }
.line-art-customizer-root /* Select styles */
    .select-field {
      width: 100%;
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: var(--radius-md);
      padding: 12px 16px;
      font-size: 15px;
      color: var(--text-primary);
      font-family: inherit;
      outline: none;
      cursor: pointer;
      transition: all var(--transition-fast);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234b5563' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 16px;
    }
.line-art-customizer-root .select-field:focus {
      border-color: var(--accent);
    }
.line-art-customizer-root /* Range slider styling */
    .range-slider {
      width: 100%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      outline: none;
      -webkit-appearance: none;
    }
.line-art-customizer-root .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent);
      cursor: pointer;
      transition: transform var(--transition-fast);
    }
.line-art-customizer-root .range-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }
.line-art-customizer-root /* Color Swatch Picker */
    .color-swatches {
      display: flex;
      gap: 12px;
    }
.line-art-customizer-root .swatch {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid #e2e8f0;
      transition: all var(--transition-fast);
      position: relative;
    }
.line-art-customizer-root .swatch:hover {
      transform: scale(1.05);
    }
.line-art-customizer-root .swatch.selected {
      border-color: #000000;
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--accent);
    }
.line-art-customizer-root .swatch.selected::after {
      content: '✓';
      color: #fff;
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
    }
.line-art-customizer-root .swatch-black {
      background-color: #1c1917;
    }
.line-art-customizer-root .swatch-red {
      background-color: #dc2626;
    }
.line-art-customizer-root .swatch-blue {
      background-color: #1d4ed8;
    }
.line-art-customizer-root .swatch-green {
      background-color: #059669;
    }
.line-art-customizer-root /* STEP 4: Mockup Layout */
    .mockups-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }
.line-art-customizer-root .mockup-card {
      min-width: 0;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      transition: all var(--transition-normal);
      overflow: hidden;
    }
.line-art-customizer-root .mockup-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
      border-color: #cbd5e1;
    }
.line-art-customizer-root .mockup-image-container {
      width: 100%;
      aspect-ratio: 1;
      background: #f1f5f9;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      border: 1px solid var(--border-color);
      cursor: zoom-in;
    }
.line-art-customizer-root .mockup-image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.line-art-customizer-root .mockup-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }
.line-art-customizer-root /* mockup download removed per request */

    .export-options-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      padding-top: 16px;
      border-top: 1px solid var(--border-color);
    }
.line-art-customizer-root /* Buttons Style Layout */
    .button-row {
      display: flex;
      gap: 12px;
      margin-top: 20px;
      justify-content: space-between;
    }
.line-art-customizer-root .btn {
      padding: 11px 18px;
      border-radius: var(--radius-md);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition-fast);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: none;
    }
.line-art-customizer-root /* Size selector buttons */
    .size-selector {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
.line-art-customizer-root .size-option {
      padding: 8px 12px;
      border-radius: 8px;
      background: #f3f4f6;
      border: 1px solid var(--border-color);
      cursor: pointer;
      font-weight: 700;
      color: var(--text-secondary);
    }
.line-art-customizer-root .size-option.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
.line-art-customizer-root .btn-secondary {
      background: #ffffff;
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }
.line-art-customizer-root .btn-secondary:hover {
      background: #f9fafb;
      border-color: #cbd5e1;
    }
.line-art-customizer-root .btn-primary {
      background: var(--accent);
      color: #ffffff;
    }
.line-art-customizer-root .btn-primary:hover {
      background: var(--accent-hover);
    }
.line-art-customizer-root .btn-primary:disabled {
      background: #f1f5f9;
      color: var(--text-muted);
      cursor: not-allowed;
      border: 1px solid var(--border-color);
    }
.line-art-customizer-root .btn.is-loading {
      cursor: wait;
    }
.line-art-customizer-root .button-spinner {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      display: inline-block;
      animation: spin 0.75s linear infinite;
    }
body.line-art-fullscreen-open {
      overflow: hidden;
    }
.line-art-fullscreen-viewer {
      position: fixed;
      inset: 0;
      z-index: 2147483647;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 56px 20px 24px;
      background: rgba(17, 24, 39, 0.92);
    }
.line-art-fullscreen-viewer.active {
      display: flex;
    }
.fullscreen-image-shell {
      width: min(1100px, 100%);
      height: 100%;
      --fullscreen-strip-width: min(560px, 100%);
      padding-bottom: 18px;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 18px;
      justify-items: center;
      align-items: stretch;
      align-content: stretch;
      overflow-x: hidden;
      overflow-y: auto;
    }
.fullscreen-image {
      max-width: 100%;
      max-height: 100%;
      align-self: center;
      object-fit: contain;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }
.fullscreen-controls-stack {
      width: min(700px, calc(100% - 16px));
      display: grid;
      justify-items: center;
      gap: 12px;
    }
.fullscreen-caption {
      color: #ffffff;
      font-size: 14px;
      font-weight: 650;
      text-align: center;
    }
.fullscreen-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
.fullscreen-dots.hidden {
      display: none;
    }
.fullscreen-dot {
      width: 9px;
      height: 9px;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.34);
      cursor: pointer;
      transition: background 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
    }
.fullscreen-dot.active {
      background: #ffffff;
      transform: scale(1.12);
    }
.fullscreen-thumbnails {
      width: min(var(--fullscreen-strip-width, 560px), 100%);
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
      gap: 10px;
      padding: 5px;
      overflow: visible;
    }
.fullscreen-thumbnails.hidden {
      display: none;
    }
.fullscreen-thumb {
      min-width: 0;
      min-height: 0;
      aspect-ratio: 1;
      padding: 6px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.12);
      cursor: pointer;
      position: relative;
      transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }
.fullscreen-thumb:hover {
      border-color: #ffffff;
      background: #ffffff;
      transform: translateY(-1px);
    }
.fullscreen-thumb.active {
      border-color: #2f7dee;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(47, 125, 238, 0.95), 0 8px 22px rgba(0, 0, 0, 0.28);
      transform: translateY(-1px) scale(1.02);
    }
.fullscreen-thumb.active::after {
      content: "✓";
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #2f7dee;
      color: #ffffff;
      display: grid;
      place-items: center;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 3px 10px rgba(47, 125, 238, 0.32);
    }
.fullscreen-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      border-radius: 5px;
      background: #ffffff;
    }
.fullscreen-pick-btn {
      position: relative;
      overflow: hidden;
      min-width: 280px;
      min-height: 56px;
      margin-top: 10px;
      padding: 0 34px;
      border: 2px solid #ef4444;
      border-radius: 8px;
      background: #dc2626;
      color: #ffffff;
      font: inherit;
      font-size: 16px;
      font-weight: 900;
      cursor: pointer;
      letter-spacing: 0;
      box-shadow: 0 16px 38px rgba(220, 38, 38, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
      animation: fullscreenPickPulse 1.7s ease-in-out infinite;
      transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }
.fullscreen-pick-btn::before {
      content: "";
      position: absolute;
      inset: -2px auto -2px -45%;
      width: 38%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
      transform: skewX(-18deg);
      animation: fullscreenPickShine 2.1s ease-in-out infinite;
      pointer-events: none;
    }
.fullscreen-pick-btn.hidden {
      display: none;
    }
.fullscreen-pick-btn:hover {
      background: #b91c1c;
      border-color: #f87171;
      box-shadow: 0 20px 48px rgba(220, 38, 38, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
      transform: translateY(-2px) scale(1.02);
    }
.fullscreen-pick-btn:active {
      transform: translateY(0) scale(0.99);
    }
.fullscreen-close-btn {
      position: fixed;
      top: 16px;
      right: 16px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: #ffffff;
      color: #111827;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
.fullscreen-close-btn:hover {
      background: #f3f4f6;
    }
.line-art-customizer-root /* Loader components */
    .loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255, 255, 255, 0.9);
      z-index: 9999;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      backdrop-filter: blur(4px);
    }
.line-art-customizer-root .loading-overlay.active {
      display: flex;
    }
.line-art-customizer-root .progress-shell {
      width: min(280px, calc(100% - 32px));
      display: grid;
      gap: 12px;
      text-align: center;
    }
.line-art-customizer-root .progress-track {
      height: 8px;
      background: #e5e7eb;
      border-radius: 999px;
      overflow: hidden;
    }
.line-art-customizer-root .progress-bar {
      width: 0%;
      height: 100%;
      background: var(--accent);
      border-radius: inherit;
      transition: width 0.25s ease;
    }
.line-art-customizer-root .loading-text {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes uploadThumbSpin {
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes uploadThumbPulse {
      0%, 100% {
        opacity: 0.82;
      }
      50% {
        opacity: 1;
      }
    }
    @keyframes fullscreenPickPulse {
      0%, 100% {
        box-shadow: 0 16px 38px rgba(220, 38, 38, 0.45), 0 0 0 0 rgba(220, 38, 38, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
      }
      50% {
        box-shadow: 0 22px 58px rgba(220, 38, 38, 0.68), 0 0 0 10px rgba(220, 38, 38, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
      }
    }
    @keyframes fullscreenPickShine {
      0%, 36% {
        left: -45%;
      }
      58%, 100% {
        left: 120%;
      }
    }
.line-art-customizer-root /* Utilities */
    .hidden {
      display: none !important;
    }
.line-art-customizer-root /* Section loading overlay */
    .section-loading-overlay {
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.92);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border-radius: inherit;
    }
.line-art-customizer-root .section-loading-overlay-with-image {
      min-height: 180px;
      background: rgba(255, 255, 255, 0.94);
    }
.line-art-customizer-root .preview-loader-shell {
      width: min(260px, calc(100% - 32px));
      display: grid;
      justify-items: center;
      gap: 12px;
      text-align: center;
    }
.line-art-customizer-root .preview-loader-image {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      border: 3px solid #ffffff;
      box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.10), 0 8px 24px rgba(17, 24, 39, 0.10);
      animation: uploadThumbSpin 1.8s linear infinite, uploadThumbPulse 1.4s ease-in-out infinite;
    }
@media (max-width: 600px) {
      .app-container { padding: 0; }
.line-art-customizer-root .glass-panel { padding: 14px; border-radius: 8px; }
.line-art-customizer-root .wizard-progress-container { display: none; }
.line-art-customizer-root .variants-grid { grid-template-columns: 1fr; gap: 10px; }
.line-art-customizer-root .mockups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.line-art-customizer-root .variant-card { padding: 10px; gap: 8px; }
.line-art-customizer-root .variant-title { font-size: 12px; line-height: 1.2; }
.line-art-customizer-root .variant-select-btn { padding: 8px 4px; font-size: 11px; }
.line-art-customizer-root .mockup-card { padding: 10px; gap: 8px; }
.line-art-customizer-root .mockup-title { font-size: 12px; line-height: 1.2; }
.line-art-customizer-root .customize-layout { gap: 16px; }
.line-art-customizer-root .canvas-panel { gap: 12px; }
.line-art-customizer-root .svg-artwork-container { max-width: 100%; min-height: 0; }
.line-art-customizer-root .controls-panel { gap: 12px; }
.line-art-customizer-root .control-group { gap: 8px; }
.line-art-customizer-root .input-field, .line-art-customizer-root .select-field, .line-art-customizer-root .textarea-field { padding: 10px 12px; font-size: 14px; }
.line-art-customizer-root .toggle-row { padding: 8px 10px; }
.line-art-customizer-root .toggle-name { font-size: 13px; }
.line-art-customizer-root .toggle-desc { font-size: 10px; }
.line-art-customizer-root .size-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.line-art-customizer-root .size-option { padding: 10px 6px; font-size: 12px; }
.line-art-customizer-root .button-row { flex-direction: column-reverse; gap: 10px; margin-top: 20px; }
.line-art-customizer-root .preview-card img { max-height: 160px; }
.line-art-customizer-root .crop-canvas { width: 100%; }
.fullscreen-image-shell { gap: 14px; padding-bottom: 16px; }
.fullscreen-controls-stack { gap: 10px; }
.fullscreen-thumbnails { width: min(var(--fullscreen-strip-width, 360px), 100%); gap: 8px; }
.fullscreen-dots { gap: 7px; }
.fullscreen-dot { width: 8px; height: 8px; }
.fullscreen-thumb { padding: 4px; border-radius: 7px; }
.fullscreen-thumb.active::after { top: 5px; right: 5px; width: 20px; height: 20px; font-size: 12px; }
.fullscreen-pick-btn { width: min(320px, 100%); min-height: 54px; margin-top: 12px; font-size: 16px; }
    }
.line-art-customizer-root .alert-banner {
      background: #f8fafc;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 14px 18px;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }
.line-art-customizer-root .alert-banner svg {
      width: 20px;
      height: 20px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }
  

.line-art-customizer-root .design-save-status{padding:9px 12px;border-radius:9px;background:#f3f4f6;color:#667085;font-size:12px;font-weight:650}.line-art-customizer-root .design-save-status[data-status="saving"]{background:#eff6ff;color:#175cd3}.line-art-customizer-root .design-save-status[data-status="saved"]{background:#eaf8f0;color:#18794e}.line-art-customizer-root .design-save-status[data-status="failed"]{background:#fff1f0;color:#b42318}