:root {
      --brand: #c72b5c;
      --brand-light: #f9e8ef;
      --brand-dark: #9a1d45;
      --ink: #1a1a1a;
      --body: #333;
      --muted: #666;
      --light: #999;
      --border: #e0ddd8;
      --bg: #faf9f7;
      --paper: #ffffff;
      --serif: 'Merriweather', Georgia, 'Times New Roman', serif;
      --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; -webkit-font-smoothing: antialiased; }
    a { color: inherit; }

    /* ===== FORM VIEW ===== */
    body.form-view {
      background: var(--bg);
      font-family: var(--sans);
      color: var(--ink);
    }
    body.form-view #outputView { display: none; }

    .form-wrap {
      max-width: 760px;
      margin: 40px auto 80px;
      padding: 0 20px;
    }
    .form-header { text-align: center; margin-bottom: 32px; }
    .form-header img.logo { width: 200px; margin-bottom: 12px; }
    .form-header h1 {
      font-family: var(--sans);
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--light);
      letter-spacing: -0.02em;
    }
    .form-header p {
      max-width: 560px;
      margin: 10px auto 0;
      color: var(--muted);
      line-height: 1.55;
      font-size: 0.86rem;
    }

    .form-card {
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px 28px 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.04);
    }
    .form-card + .form-card { margin-top: 18px; }

    .form-section-label {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--light);
      margin: 20px 0 8px;
    }
    .form-section-label:first-child { margin-top: 0; }
    .help-text {
      font-size: 0.76rem;
      color: var(--muted);
      line-height: 1.55;
      margin-top: 8px;
    }

    .pics-row {
      display: flex;
      gap: 16px;
      margin: 8px 0 20px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .pic-card {
      flex: 0 0 auto;
      width: 240px;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      display: flex;
      flex-direction: column;
    }
    .pic-card .pic-img-wrap {
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }
    .pic-card .pic-img-wrap img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }
    .pic-card .pic-caption {
      padding: 6px 10px;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--muted);
      text-align: center;
      border-top: 1px solid var(--border);
      margin-top: auto;
    }

    .radio-row { display: flex; gap: 8px; margin-bottom: 4px; }
    .radio-opt { flex: 1; position: relative; cursor: pointer; }
    .radio-opt input { position: absolute; opacity: 0; pointer-events: none; }
    .radio-opt .radio-label {
      display: block;
      padding: 10px 14px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-size: 0.82rem;
      font-weight: 600;
      text-align: center;
      transition: all 0.15s;
      color: var(--body);
      min-height: 40px;
    }
    .radio-opt input:checked + .radio-label {
      border-color: var(--brand);
      background: var(--brand-light);
      color: var(--brand-dark);
    }

    .measure-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 6px;
    }
    @media (max-width: 560px) { .measure-grid { grid-template-columns: 1fr; } .radio-row { flex-direction: column; } }
    .measure-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      background: #fff;
    }
    .measure-item.disabled { opacity: 0.45; }
    .measure-item .m-letter {
      font-family: var(--serif);
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--brand);
      width: 32px;
      text-align: center;
      flex-shrink: 0;
    }
    .measure-item input {
      flex: 1;
      border: none;
      outline: none;
      font-family: var(--sans);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--ink);
      background: transparent;
      min-width: 0;
    }
    .measure-item input::placeholder { color: #bbb; font-weight: 400; }

    .submit-btn {
      width: 100%;
      margin-top: 20px;
      padding: 13px;
      border: none;
      border-radius: 12px;
      background: var(--brand);
      color: #fff;
      font-family: var(--sans);
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
      box-shadow: 0 4px 16px rgba(199,43,92,0.2);
    }
    .submit-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }

    /* ===== PATTERN VIEW ===== */
    body.pattern-view { background: var(--bg); font-family: var(--serif); color: var(--body); }
    body.pattern-view #appView { display: none; }

    .pattern-toolbar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .toolbar-btn {
      padding: 8px 18px;
      border-radius: 8px;
      font-family: var(--sans);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid var(--border);
      background: #fff;
      color: var(--body);
      transition: all 0.15s;
    }
    .toolbar-btn:hover { border-color: var(--brand); color: var(--brand); }
    .toolbar-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
    .toolbar-btn.primary:hover { background: var(--brand-dark); }

    .pattern-page { max-width: 1200px; margin: 24px auto 60px; padding: 0 20px; }
    .pattern-paper {
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: 3px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
      padding: 48px 52px;
    }
    @media (max-width: 600px) { .pattern-paper { padding: 28px 20px; } }

    .p-logo { width: 70px; margin-bottom: 8px; }
    .p-title-img { display: block; width: 220px; margin: 0 auto 24px; }
    .p-subtitle {
      font-family: var(--sans);
      font-size: 0.78rem;
      color: var(--light);
      text-align: center;
      margin-bottom: 28px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .p-measurements-box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 20px;
      margin: 20px 0;
    }
    .p-measurements-box .p-m-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 16px;
      font-size: 0.82rem;
      line-height: 1.8;
    }
    .p-m-label { font-weight: 700; color: var(--brand); }

    .p-body { font-size: 0.82rem; line-height: 1.75; color: var(--body); }
    .p-body p { margin-bottom: 10px; }
    .p-body p:last-child { margin-bottom: 0; }
    .p-italic { font-style: italic; }

    .p-summary {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 0.82rem;
      background: var(--brand-light);
      border-left: 3px solid var(--brand);
      padding: 12px 16px;
      margin: 16px 0;
      border-radius: 0 6px 6px 0;
      line-height: 1.6;
    }
    .p-summary div + div { margin-top: 4px; }

    .p-heading {
      font-family: var(--sans);
      font-weight: 700;
      font-size: 1rem;
      color: var(--ink);
      margin: 32px 0 6px;
      padding-bottom: 6px;
      border-bottom: 1.5px solid var(--border);
      letter-spacing: -0.01em;
      page-break-after: avoid;
    }
    .p-heading .arrow { color: var(--brand); margin-right: 4px; }
    .p-subheading {
      font-family: var(--sans);
      font-weight: 700;
      font-size: 0.88rem;
      color: var(--brand-dark);
      margin: 20px 0 6px;
      page-break-after: avoid;
    }
    .p-note {
      font-family: var(--sans);
      font-size: 0.78rem;
      color: var(--muted);
      font-style: italic;
      margin: 8px 0 12px;
      padding-left: 12px;
      border-left: 2px solid var(--border);
      line-height: 1.6;
    }
    .p-instruction {
      margin: 8px 0;
      padding: 10px 14px;
      background: var(--bg);
      border-radius: 6px;
      font-size: 0.82rem;
      line-height: 1.7;
    }
    .p-instruction .step-num {
      font-family: var(--sans);
      font-weight: 700;
      color: var(--brand);
      margin-right: 4px;
    }
    .p-bullet {
      margin: 6px 0;
      padding: 8px 14px 8px 30px;
      background: var(--bg);
      border-radius: 6px;
      font-size: 0.82rem;
      line-height: 1.7;
      position: relative;
    }
    .p-bullet::before {
      content: "\2013";
      position: absolute;
      left: 14px;
      top: 8px;
      width: 10px;
      text-align: center;
      font-weight: 700;
      color: var(--brand);
    }

    .p-val { font-family: var(--sans); font-weight: 700; color: var(--ink); white-space: nowrap; }
    .p-link { color: var(--brand); text-decoration: underline; text-decoration-color: rgba(199,43,92,0.3); text-underline-offset: 2px; }
    .p-img-inline { display: block; margin: 12px 0; border-radius: 8px; border: 1px solid var(--border); object-fit: contain; }
    .p-img-float-right { float: right; max-width: 190px; margin: 4px 0 14px 18px; }
    .p-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; clear: both; }
    .p-final-img { display: block; margin: 24px auto; max-width: 240px; border-radius: 10px; object-fit: contain; }
    .p-footer {
      text-align: center;
      font-size: 0.72rem;
      color: var(--light);
      line-height: 1.7;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }
    .p-footer a { color: var(--brand); }
    .p-footer .copyright { margin-top: 12px; font-size: 0.65rem; }
    .p-pagebreak { page-break-before: always; margin-top: 0; padding-top: 0; }

    @media print {
      @page { size: A4; margin: 18mm 18mm; }

      html, body {
        background: #fff !important;
        width: auto !important;
        min-height: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      #appView,
      .pattern-toolbar { display: none !important; }

      #outputView { display: block !important; }
      .pattern-page {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: auto !important;
      }
      .pattern-paper {
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
      }

      .p-logo { margin-top: 0 !important; }
      .p-heading { margin-top: 18px; }
      .p-heading,
      .p-subheading {
        break-after: avoid-page;
        page-break-after: avoid;
      }
      .p-heading + .p-body,
      .p-subheading + .p-body {
        break-before: avoid-page;
        page-break-before: avoid;
      }
      .p-body p {
        orphans: 3;
        widows: 3;
      }
      .p-measurements-box,
      .p-summary,
      .p-note,
      .p-instruction,
      .p-bullet,
      .p-img-inline,
      .p-img-float-right,
      .p-final-img,
      img {
        break-inside: avoid-page;
        page-break-inside: avoid;
      }
      .p-pagebreak {
        break-before: page;
        page-break-before: always;
      }
      .p-pagebreak:first-child {
        break-before: auto;
        page-break-before: auto;
      }
    }
  

/* ===== APP SHELL ADDITIONS ===== */
body.form-view #outputView { display: none; }
body.output-view #appView { display: none; }
body:not(.output-view) #outputView { display: none; }
body.output-view { background: var(--bg); }

.top-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.segmented {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.segmented button {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--muted);
}
.segmented button.active {
  background: var(--brand);
  color: #fff;
}
.action-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.action-row .submit-btn {
  width: auto;
  flex: 1;
  margin-top: 0;
}
.submit-btn.secondary {
  background: #fff;
  color: var(--brand-dark);
  border: 1.5px solid var(--brand);
  box-shadow: none;
}
.submit-btn.secondary:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
}
@media (max-width: 560px) {
  .action-row { flex-direction: column; }
}
@media print {
  .top-controls { display: none !important; }
  body.output-view #outputView { display: block !important; }
}
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }