*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --ink: #1a1a18;
    --ink-muted: #5a5a56;
    --ink-faint: #a0a09a;
    --paper: #faf9f6;
    --paper-warm: #f2efe8;
    --paper-mid: #e8e4da;
    --stamp-red: #c94040;
    --stamp-red-dark: #8f2a2a;
    --stamp-red-light: #f4e0e0;
    --stamp-red-rgb: 201,64,64;
    --accent: #2d6a4f;
    --accent-light: #d8f3e4;
    --border: rgba(26,26,24,0.12);
    --border-strong: rgba(26,26,24,0.25);
    --radius: 8px;
    --radius-lg: 14px;
    --shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.6;
  }

  /* HEADER */
  header {
    background: var(--ink);
    color: var(--paper);
    padding: 0 2rem;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    font-family: 'DM Serif Display', serif;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .logo-icon {
    width: 28px; height: 28px;
    background: var(--stamp-red);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
  }

  .logo-icon svg { width: 16px; height: 16px; fill: white; transform: rotate(180deg); }

  .header-note {
    font-size: 0.78rem;
    color: rgba(250,249,246,0.45);
    font-family: 'DM Mono', monospace;
  }

  .header-right { display: flex; align-items: center; gap: 12px; }

  /* HERO */
  .hero {
    background: var(--ink);
    color: var(--paper);
    padding: 4rem 2rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(255,255,255,0.03) 39px,
      rgba(255,255,255,0.03) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(255,255,255,0.03) 39px,
      rgba(255,255,255,0.03) 40px
    );
    pointer-events: none;
  }

  .hero h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    position: relative;
  }

  .hero h1 em {
    font-style: italic;
    color: var(--stamp-red);
  }

  .hero p {
    font-size: 1.05rem;
    color: rgba(250,249,246,0.65);
    max-width: 520px;
    margin: 0 auto;
    position: relative;
  }

  /* STAMP PREVIEW BADGE */
  .stamp-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--stamp-red-rgb),0.15);
    border: 1px solid rgba(var(--stamp-red-rgb),0.3);
    color: #f09090;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .badge-icon { vertical-align: 0px; margin-right: 4px; }

  /* MAIN LAYOUT */
  .main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
    align-items: start;
  }

  .left-col { display: flex; flex-direction: column; gap: 1.5rem; }

  /* CARD */
  .card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .card-header-icon {
    width: 32px; height: 32px;
    background: var(--paper-warm);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
  }

  .card-title {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .card-body { padding: 1.5rem; }

  /* Card-specific body overrides */
  #printer-type-card .card-body { padding-top: 0.75rem; padding-bottom: 0.85rem; }
  #shape-card .card-body { padding-bottom: 1.1rem; }

  /* TABS */
  .tabs {
    display: flex;
    gap: 0;
    background: var(--paper-warm);
    border-radius: var(--radius);
    padding: 3px;
    margin-bottom: 1.5rem;
  }

  .tab-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius) - 2px);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .tab-btn.active {
    background: white;
    color: var(--ink);
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }

  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* FORM ELEMENTS */
  label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }

  input[type="text"], input[type="number"], input[type="email"], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    background: white;
    transition: border-color 0.15s;
    outline: none;
  }

  input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
    border-color: var(--stamp-red);
    box-shadow: 0 0 0 3px rgba(var(--stamp-red-rgb),0.08);
  }

  input[type="number"] {
    padding: 10px 4px;
    text-align: center;
    font-family: 'DM Mono', monospace;
    font-size: 0.82rem;
  }

  .field { margin-bottom: 1.2rem; }
  .field--no-mb { margin-bottom: 0; }
  .field--mb-xs { margin-bottom: 0.6rem; }
  .field--mb-sm { margin-bottom: 0.75rem; }
  .field--mb-md { margin-bottom: 1rem; }

  #line-spacing-field { margin-bottom: 1rem; }

  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 1.2rem;
  }

  input[type="range"] {
    width: 100%;
    accent-color: var(--stamp-red);
    cursor: pointer;
  }

  .range-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .range-val {
    font-family: 'DM Mono', monospace;
    font-size: 0.8rem;
    color: var(--stamp-red);
    min-width: 36px;
    text-align: right;
  }

  /* LABEL VARIANTS */
  .label-optional { font-weight: 400; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
  .label-spaced { margin-bottom: 8px; }

  /* FONT STYLE ROW */
  .font-style-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 1.2rem; }
  .font-row-main { flex: 1; min-width: 0; }
  .font-row-spacing { flex: 0 0 74px; }
  .font-style-row .font-dropdown { margin-bottom: 0; }

  /* FONT OPTION HINT */
  .font-opt-hint { font-size: 0.65em; opacity: 0.55; font-family: sans-serif; }

  /* POSITION LABEL */
  .position-label { font-size: 0.78rem; color: var(--ink-muted); font-weight: 500; margin-bottom: 8px; }

  /* FONT DROPDOWN */
  .font-dropdown {
    position: relative;
    margin-bottom: 1.2rem;
  }

  .font-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
  }

  .font-dropdown-trigger:hover,
  .font-dropdown.open .font-dropdown-trigger {
    border-color: var(--stamp-red);
    background: var(--stamp-red-light);
  }

  .font-dropdown-value {
    font-size: 1.15rem;
    line-height: 1.3;
    flex: 1;
    text-align: left;
  }

  .font-dropdown-arrow {
    flex-shrink: 0;
    color: var(--ink-muted);
    transition: transform 0.18s;
  }

  .font-dropdown.open .font-dropdown-arrow {
    transform: rotate(180deg);
  }

  .font-dropdown-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    list-style: none;
    margin: 0;
    padding: 4px 0;
  }

  .font-dropdown.open .font-dropdown-menu {
    display: block;
  }

  .font-dropdown-opt {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1.3;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .font-dropdown-opt:hover {
    background: var(--stamp-red-light);
  }

  .font-dropdown-opt.selected {
    background: var(--stamp-red-light);
    color: var(--stamp-red);
  }

  .font-dropdown-opt.selected::after {
    content: '';
    display: block;
    width: 7px;
    height: 12px;
    border-right: 2px solid var(--stamp-red);
    border-bottom: 2px solid var(--stamp-red);
    transform: rotate(45deg);
    margin-top: -3px;
    flex-shrink: 0;
  }

  /* UPLOAD ZONE */
  .upload-zone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--paper-warm);
    position: relative;
  }

  .upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--stamp-red);
    background: var(--stamp-red-light);
  }

  .upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

  .upload-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

  .upload-zone h3 {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }

  .upload-zone p {
    font-size: 0.8rem;
    color: var(--ink-faint);
  }

  .upload-preview {
    position: relative;
    margin-bottom: 0.75rem;
    background: var(--paper-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
  }

  .upload-preview img {
    max-width: 100%;
    max-height: 90px;
    border-radius: calc(var(--radius) - 2px);
    display: block;
    margin: 0 auto;
    filter: contrast(1.2);
  }

  .upload-clear {
    position: absolute;
    top: 6px; right: 6px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px; height: 22px;
    cursor: pointer;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }

  .upload-replace {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    padding: 5px 8px;
    background: none;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-size: 0.76rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink-muted);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
  }

  .upload-replace:hover {
    border-color: var(--stamp-red);
    color: var(--stamp-red);
    background: var(--stamp-red-light);
  }

  /* IMAGE SECTION */
  #img-upload-area { margin-top: 0.75rem; }
  #img-controls { margin-top: 0.75rem; }
  #threshold-section { margin-top: 1rem; }
  .svg-vector-notice { margin-top: 0.75rem; font-size: 0.78rem; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 6px; padding: 0.45rem 0.75rem; }
  #logo-scale-field { margin-top: 0.75rem; }
  #logo-layout-field { margin-top: 0.75rem; }

  .logo-layout-hint { font-size: 0.72rem; color: var(--ink-faint); margin-bottom: 0.75rem; line-height: 1.5; }

  /* DIMENSION SETTINGS */
  .dim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 1.2rem;
  }

  #circle-dims { grid-template-columns: 1fr 1fr; }

  .dim-input-wrap { position: relative; }
  .dim-unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--ink-faint);
    font-family: 'DM Mono', monospace;
    pointer-events: none;
  }

  .dim-input-wrap input {
    padding-right: 36px;
  }

  /* UNIT TOGGLE */
  .unit-toggle {
    display: flex;
    gap: 0;
    background: var(--paper-mid);
    border-radius: 6px;
    padding: 2px;
  }

  .card-header .unit-toggle { margin-left: auto; }

  .unit-btn {
    border: none;
    background: transparent;
    border-radius: 4px;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-muted);
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.04em;
  }

  .unit-btn.active {
    background: white;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* PREVIEW PANEL */
  .preview-wrap {
    position: sticky;
    top: 1.5rem;
  }

  .preview-canvas-wrap {
    background: var(--paper-warm);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px solid var(--border);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
  }

  /* stamp paper texture */
  .preview-canvas-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 12px 12px;
  }

  #stamp-preview {
    border-radius: 4px;
    display: block;
    max-width: 100%;
    position: relative;
    z-index: 1;
    /*box-shadow: 0 4px 20px rgba(0,0,0,0.15);*/
  }

  .preview-label {
    text-align: center;
    font-size: 0.72rem;
    color: var(--ink-faint);
    font-family: 'DM Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
  }

  /* STAMP SPECS */
  .specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 1.25rem;
  }

  .spec-chip {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
  }

  .spec-chip .spec-label {
    font-size: 0.68rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin-bottom: 2px;
    display: block;
  }

  .spec-chip .spec-val {
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'DM Mono', monospace;
    color: var(--ink);
  }

  /* DOWNLOAD BUTTON */
  #download-btn { margin-bottom: 1rem; }

  .btn-download {
    width: 100%;
    padding: 14px;
    background: var(--stamp-red);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .btn-download:hover {
    background: var(--stamp-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--stamp-red-rgb),0.35);
  }

  .btn-download:active { transform: translateY(0); }

  .btn-download:disabled {
    background: var(--ink-faint);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .btn-download svg { width: 18px; height: 18px; fill: white; }

  #download-handle-btn { margin-top: 8px; background: #2d6a4f; }

  .btn-copy-link {
    width: 100%;
    margin-top: 8px;
    padding: 9px 14px;
    background: transparent;
    color: var(--ink-mid);
    border: 1.5px solid var(--ink-faint);
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
  }
  .btn-copy-link:hover { border-color: var(--ink-mid); color: var(--ink); background: var(--bg-card); }
  .btn-copy-link.copied { border-color: #2d6a4f; color: #2d6a4f; }
  .btn-svg-export {
    width: 100%; margin-top: 8px; padding: 9px 14px;
    background: transparent; color: var(--ink-mid);
    border: 1.5px dashed var(--ink-faint); border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .btn-svg-export:hover { border-color: var(--ink-mid); color: var(--ink); border-style: solid; }
  .btn-svg-export:disabled { opacity: 0.5; cursor: not-allowed; }

  /* PRINT TIPS */
  .tips {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    background: var(--accent-light);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
  }

  .tips h4 {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 0.5rem;
  }

  .tips-h4-spaced { margin-top: 0.75rem; }

  .icon-inline { vertical-align: -1px; margin-right: 5px; }

  .tips ul {
    list-style: none;
    padding: 0;
  }

  .tips li {
    font-size: 0.78rem;
    color: #1a4a35;
    padding: 2px 0;
    padding-left: 14px;
    position: relative;
  }

  .tips li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 0.7rem;
    top: 2px;
  }

  /* PRINT SETTINGS */
  #tpu-toggle-row { padding-top: 0; }

  /* STATUS BAR */
  .status-bar {
    padding: 8px 1.5rem;
    background: var(--paper-warm);
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--ink-muted);
    font-family: 'DM Mono', monospace;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }

  /* PROGRESS OVERLAY */
  .progress-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,26,24,0.7);
    z-index: 100;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
  }

  .progress-overlay.visible { display: flex; }

  .progress-box {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem 2.5rem;
    text-align: center;
    min-width: 280px;
    box-shadow: var(--shadow-lg);
  }

  .progress-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .progress-sub {
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin-bottom: 1.25rem;
  }

  .progress-bar-wrap {
    height: 4px;
    background: var(--paper-mid);
    border-radius: 2px;
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    background: var(--stamp-red);
    border-radius: 2px;
    transition: width 0.1s linear;
  }

  /* EMAIL SIGNUP MODAL */
  .signup-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,26,24,0.6);
    z-index: 200;
    align-items: center;
    justify-content: center;
  }
  .signup-modal-backdrop.visible { display: flex; }

  .signup-modal {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem 2.5rem;
    max-width: 380px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
  }

  .signup-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--ink-faint);
    line-height: 1;
    padding: 2px 6px;
  }
  .signup-modal-close:hover { color: var(--ink); }

  .signup-modal-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: var(--ink);
    display: flex;
    justify-content: center;
  }

  .signup-modal-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
    color: var(--ink);
  }

  .signup-modal-sub {
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin-bottom: 1.25rem;
    line-height: 1.5;
  }

  .signup-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .signup-modal-input {
    border: 1px solid var(--paper-mid);
    border-radius: var(--radius);
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
  }
  .signup-modal-input:focus { border-color: var(--stamp-red); }

  .signup-modal-submit {
    background: var(--stamp-red);
    color: white;
    border: none;
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .signup-modal-submit:hover { opacity: 0.88; }

  .signup-modal-skip {
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 0.78rem;
    cursor: pointer;
    margin-top: 0.25rem;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .signup-modal-skip:hover { color: var(--ink-muted); }

  .signup-modal-thanks {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .signup-modal-thanks.visible { display: flex; }
  .signup-modal-thanks-icon { font-size: 2rem; }
  .signup-modal-thanks-msg { font-size: 0.9rem; color: var(--ink-muted); }

  /* SUCCESS */
  .success-banner {
    display: none;
    padding: 10px 14px;
    background: var(--accent-light);
    border: 1px solid rgba(45,106,79,0.2);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--accent);
    margin-top: 10px;
    align-items: center;
    gap: 8px;
  }

  .success-banner.visible { display: flex; }

  /* INVERT TOGGLE */
  .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .toggle-row--mt { margin-top: 0.75rem; }
  .toggle-row--divided { padding-top: 10px; border-top: 1px solid var(--border); margin-top: 0.5rem; }

  .toggle-label {
    font-size: 0.82rem;
    color: var(--ink);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
  }

  .toggle-label-strong { font-weight: 500; }
  .toggle-desc { font-size: 0.72rem; color: var(--ink-faint); margin-top: 2px; line-height: 1.4; }

  .bevel-hint { font-size: 0.72rem; color: var(--ink-faint); font-weight: 400; }
  .mirror-note { font-size: 0.72rem; color: var(--ink-faint); margin-top: 6px; margin-bottom: 1.25rem; line-height: 1.5; }

  .toggle {
    position: relative;
    width: 40px;
    height: 22px;
  }

  .toggle input { opacity: 0; width: 0; height: 0; }

  .toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--paper-mid);
    border-radius: 22px;
    cursor: pointer;
    transition: 0.2s;
  }

  .toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    left: 3px; top: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }

  .toggle input:checked + .toggle-slider { background: var(--stamp-red); }
  .toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

  /* HANDLE */
  #handle-selector { margin-bottom: 0.75rem; }

  /* RESPONSIVE */
  @media (max-width: 780px) {
    .main { grid-template-columns: 1fr; }
    .preview-wrap { position: static; }
  }

  /* HIDDEN CANVAS FOR PROCESSING */
  #work-canvas { display: none; }

  /* FOOTER */
  footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
    border-top: 1px solid var(--border);
  }

  .footer-legal {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    color: var(--ink-faint);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }

  .threshold-section { margin-bottom: 1.2rem; }

  /* PREVIEW TABS */
  .preview-tabs { display:none; gap:0; margin-bottom:1rem; background:var(--paper-warm); border-radius:var(--radius); padding:3px; }
  .preview-tab-btn { flex:1; padding:6px 10px; border:none; background:transparent; border-radius:calc(var(--radius) - 2px); font-family:'DM Sans',sans-serif; font-size:0.82rem; font-weight:400; color:var(--ink-muted); cursor:pointer; transition:all 0.15s; }
  .preview-tab-btn.active { background:white; color:var(--ink); font-weight:500; box-shadow:0 1px 4px rgba(0,0,0,0.08); }

  /* RELIEF HINT */
  .relief-hint { font-size:0.72rem; color:var(--stamp-red); margin-top:4px; font-weight:500; display:none; }
  .relief-hint.show { display:block; }

  /* MIN SIZE WARNING */
  .size-warn { font-size:0.72rem; padding:6px 10px; background:#fef3c7; border:1px solid #f59e0b; border-radius:var(--radius); color:#92400e; margin-top:6px; display:none; }
  .size-warn.show { display:block; }
  #size-warn { margin-bottom: 0.85rem; margin-top: -0.25rem; }

  /* ADVANCED SECTION */
  .advanced-toggle { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--ink-muted); cursor:pointer; border:none; background:none; padding:6px 0; font-family:'DM Sans',sans-serif; margin-bottom:4px; width:100%; }
  .advanced-toggle svg { transition:transform 0.2s; }
  .advanced-toggle.open svg { transform:rotate(180deg); }
  .arc-icon-oval { display:none; }
  #circle-border-text[data-arc-shape="oval"] .arc-icon-circle { display:none; }
  #circle-border-text[data-arc-shape="oval"] .arc-icon-oval { display:block; }
  .advanced-body { display:none; }
  .advanced-body.open { display:block; }

  /* LAYOUT SELECTOR */
  .layout-selector { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:1rem; }
  .layout-opt { border:1.5px solid var(--border); border-radius:var(--radius); padding:8px 6px; text-align:center; cursor:pointer; transition:all 0.15s; background:white; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .layout-opt:hover { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .layout-opt.selected { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .layout-opt .lo-label { font-size:0.68rem; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-muted); }
  .layout-opt.selected .lo-label { color:var(--stamp-red-dark); }

  /* ALIGN BUTTONS */
  .align-row { display:flex; gap:4px; margin-bottom:1rem; }
  .align-btn { flex:1; border:1.5px solid var(--border); border-radius:var(--radius); padding:7px; background:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .align-btn:hover { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .align-btn.selected { border-color:var(--stamp-red); background:var(--stamp-red-light); }

  /* SHAPE SELECTOR */
  .shape-selector { display:grid; grid-template-columns:repeat(3,minmax(62px,1fr)); gap:6px; margin-bottom:0; }
  .shape-selector-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-bottom:0; }
  .shape-section-divider { margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem; }
  .shape-opt { border:1.5px solid var(--border); border-radius:var(--radius); padding:12px 8px 10px; text-align:center; cursor:pointer; transition:all 0.15s; background:white; display:flex; flex-direction:column; align-items:center; gap:7px; }
  .shape-opt:hover { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .shape-opt.active { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .shape-opt .so-name { font-size:0.68rem; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-muted); display:block; }
  .shape-opt.active .so-name { color:var(--stamp-red-dark); }
  .shape-opt svg { color:var(--ink-muted); }
  .shape-opt.active svg { color:var(--stamp-red-dark); }

  /* HANDLE SELECTOR */
  .handle-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:1rem; }
  .handle-opt { border:1.5px solid var(--border); border-radius:var(--radius); padding:10px 8px; text-align:center; cursor:pointer; transition:all 0.15s; background:white; }
  .handle-opt:hover { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .handle-opt.selected { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .handle-opt .ho-icon { font-size:1.2rem; display:block; margin:0 auto 4px; line-height:1; }
  .handle-opt .ho-name { font-size:0.68rem; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-muted); display:block; margin-bottom:2px; }
  .handle-opt .ho-desc { font-size:0.65rem; color:var(--ink-faint); display:block; line-height:1.3; }
  .handle-opt.selected .ho-name, .handle-opt.selected .ho-desc { color:var(--stamp-red-dark); }
  .handle-info { font-size:0.78rem; color:var(--ink-muted); padding:8px 12px; background:var(--paper-warm); border-radius:var(--radius); margin-bottom:1rem; line-height:1.5; }
  .handle-info strong { color:var(--ink); }

  /* PRINTER TYPE */
  .printer-type-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0 6px; border-top:1px solid var(--border); margin-top:0.75rem; }
  .printer-type-tabs { display:flex; gap:0; background:var(--paper-mid); border-radius:6px; padding:2px; width:100%; }
  .printer-type-btn { flex:1; border:none; background:transparent; border-radius:4px; font-family:'DM Mono',monospace; font-size:0.72rem; font-weight:500; color:var(--ink-muted); padding:4px 10px; cursor:pointer; transition:all 0.15s; }
  .printer-type-btn.active { background:white; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,0.1); }

  /* PRINTER CONTEXT */
  .printer-context { font-size: 0.72rem; color: var(--ink-muted); margin-top: 8px; line-height: 1.5; }

  /* ARC TEXT */
  .arc-text-row { margin-bottom:1rem; padding:10px 12px; background:var(--paper-warm); border-radius:var(--radius); border:1px solid var(--border); }
  .arc-text-row label { margin-bottom:6px; }

  /* HELP SECTION */
  .help-section { max-width:1100px; margin:0 auto 4rem; padding:0 1.5rem; }
  .help-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; margin-top:1.5rem; }
  .help-card { background:white; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem 1.5rem; }
  .help-card h3 { font-size:0.88rem; font-weight:500; margin-bottom:0.75rem; display:flex; align-items:center; gap:8px; }
  .help-card h3 svg { flex-shrink:0; color:var(--stamp-red); }
  .help-card ul { list-style:none; padding:0; }
  .help-card li { font-size:0.8rem; color:var(--ink-muted); padding:3px 0 3px 14px; position:relative; line-height:1.5; }
  .help-card li::before { content:'·'; position:absolute; left:4px; color:var(--stamp-red); font-weight:700; }
  .help-section-title { font-family:'DM Serif Display',serif; font-size:1.5rem; letter-spacing:-0.02em; }
  .help-section-sub { font-size:0.88rem; color:var(--ink-muted); margin-top:0.25rem; }
  .printer-tag { display:inline-flex; align-items:center; gap:5px; background:var(--paper-warm); border:1px solid var(--border); border-radius:20px; font-size:0.72rem; font-family:'DM Mono',monospace; padding:3px 10px; margin:3px 3px 0 0; }

  /* FAQ SECTION */
  .faq-section { max-width:1100px; margin:0 auto 4rem; padding:0 1.5rem; }
  .faq-list { margin-top:1.5rem; display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:white; }
  .faq-item { border-bottom:1px solid var(--border); }
  .faq-item:last-child { border-bottom:none; }
  .faq-item summary { list-style:none; cursor:pointer; padding:1rem 1.25rem; font-size:0.88rem; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:1rem; user-select:none; }
  .faq-item summary::-webkit-details-marker { display:none; }
  .faq-item summary::after { content:''; display:block; width:14px; height:14px; flex-shrink:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; transition:transform 0.2s; }
  .faq-item[open] summary::after { transform:rotate(180deg); }
  .faq-item summary:hover { background:var(--paper-warm); }
  .faq-item[open] summary { color:var(--stamp-red-dark,#b02020); background:var(--stamp-red-light,#fff5f5); }
  .faq-item p { margin:0; padding:0.25rem 1.25rem 1.1rem; font-size:0.82rem; color:var(--ink-muted); line-height:1.65; }

  .card-help-text { font-size: 0.78rem; color: var(--ink-muted); margin-bottom: 8px; }
  .card-detail-text { font-size: 0.72rem; color: var(--ink-muted); }
  .list-spaced { margin-top: 10px; }

  /* COMPARISON TABLE */
  .comparison-table { width: 100%; font-size: 0.75rem; border-collapse: collapse; margin-bottom: 6px; }
  .comparison-table thead tr { border-bottom: 1px solid var(--border); }
  .comparison-table th { padding: 4px 6px; color: var(--ink-muted); font-weight: 500; text-align: center; }
  .comparison-table th:first-child { text-align: left; padding-left: 0; }
  .comparison-table td { text-align: center; padding: 5px 6px; }
  .comparison-table td:first-child { text-align: left; padding-left: 0; padding-right: 6px; }
  .comparison-table tbody tr { border-bottom: 1px solid var(--border-light, #f0ede8); }
  .comparison-table tbody tr:last-child { border-bottom: none; }

  /* AFFILIATE LINKS */
  .aff-link { font-size:0.68rem; color:var(--stamp-red); text-decoration:none; font-family:'DM Mono',monospace; white-space:nowrap; border-bottom:1px dashed rgba(var(--stamp-red-rgb),0.35); margin-left:4px; }
  .aff-link:hover { border-bottom-style:solid; }
  .supplies-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:0.6rem; padding-top:0.6rem; border-top:1px solid var(--border); }
  .supply-chip { display:inline-flex; align-items:center; gap:5px; background:var(--paper-warm); border:1px solid var(--border); border-radius:6px; font-size:0.72rem; padding:4px 10px; text-decoration:none; color:var(--ink); transition:all 0.15s; }
  .supply-chip:hover { border-color:var(--stamp-red); background:var(--stamp-red-light); color:var(--stamp-red-dark); }
  .supply-chip .sc-label { font-weight:500; }
  .supply-chip .sc-price { color:var(--ink-faint); font-family:'DM Mono',monospace; }

  /* TIP JAR */
  .tip-jar {
    margin-top: 1rem;
    padding: 12px 14px;
    background: var(--paper-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.78rem;
    color: var(--ink-muted);
    line-height: 1.5;
  }
  .tip-jar strong { color: var(--ink); font-weight: 500; }
  .btn-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 14px;
    background: #ff5e5b;
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
  }
  .btn-tip:hover { background: #e04e4b; transform: translateY(-1px); }

  /* FILENAME ROW */
  .filename-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .filename-row input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-family: 'DM Mono', monospace;
  }
  .filename-label {
    font-size: 0.72rem;
    color: var(--ink-faint);
    font-family: 'DM Mono', monospace;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
  }

  /* MOBILE TRANSFER TIP */
  .mobile-tip {
    display: none;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--ink-muted);
    background: var(--paper-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    line-height: 1.5;
  }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    .main {
      grid-template-columns: 1fr;
      padding: 1.25rem 1rem 3rem;
      gap: 1.25rem;
    }
    .preview-wrap { position: static; }
    .hero { padding: 2rem 1.25rem 2.5rem; }
    .hero h1 { font-size: 2rem; }
    .card-body { padding: 1.1rem; }
    .handle-selector { grid-template-columns: repeat(2, 1fr); }
    .dim-grid { grid-template-columns: 1fr 1fr; }
    .mobile-tip { display: block; }
    .header-note { display: none; }
  }
  @media (max-width: 480px) {
    .specs-grid { grid-template-columns: 1fr 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .handle-selector { grid-template-columns: 1fr 1fr; }
  }

  /* ARTICLE PAGES */
  .article-hero { padding:3rem 1.5rem 2rem; text-align:center; max-width:760px; margin:0 auto; }
  .article-hero h1 { font-family:'DM Serif Display',serif; font-size:2.2rem; letter-spacing:-0.03em; line-height:1.2; margin-bottom:0.6rem; }
  .article-hero .article-sub { font-size:0.92rem; color:var(--ink-muted); max-width:560px; margin:0 auto; line-height:1.65; }
  .article-hero .article-meta { font-size:0.75rem; color:var(--ink-faint); margin-top:0.75rem; }
  .article-wrap { max-width:760px; margin:0 auto; padding:0 1.5rem 4rem; }
  .breadcrumb { font-size:0.78rem; color:var(--ink-faint); margin-bottom:2rem; }
  .breadcrumb a { color:var(--ink-muted); text-decoration:none; }
  .breadcrumb a:hover { color:var(--stamp-red); }
  .breadcrumb span { margin:0 6px; }
  .article-wrap h2 { font-family:'DM Serif Display',serif; font-size:1.4rem; letter-spacing:-0.02em; margin:2.25rem 0 0.6rem; }
  .article-wrap h3 { font-size:0.9rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-muted); margin:1.5rem 0 0.4rem; }
  .article-wrap p { font-size:0.88rem; color:var(--ink-muted); line-height:1.75; margin:0 0 0.9rem; }
  .article-wrap ul, .article-wrap ol { font-size:0.88rem; color:var(--ink-muted); line-height:1.7; padding-left:1.4rem; margin:0 0 1rem; }
  .article-wrap li { margin-bottom:0.4rem; }
  .article-wrap strong { color:var(--ink); font-weight:600; }
  .article-wrap table { width:100%; font-size:0.8rem; border-collapse:collapse; margin:1rem 0 1.5rem; }
  .article-wrap th { padding:8px 10px; background:var(--paper-warm); font-weight:600; text-align:left; border:1px solid var(--border); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-muted); }
  .article-wrap td { padding:7px 10px; border:1px solid var(--border); color:var(--ink-muted); }
  .article-wrap .note { background:var(--paper-warm); border-left:3px solid var(--stamp-red); border-radius:0 var(--radius) var(--radius) 0; padding:0.75rem 1rem; margin:1rem 0 1.25rem; font-size:0.82rem; color:var(--ink-muted); line-height:1.65; }
  .cta-card { background:var(--stamp-red-light,#fff5f5); border:1.5px solid var(--stamp-red,#c0392b); border-radius:var(--radius-lg); padding:1.75rem 1.5rem; margin:2.5rem 0; text-align:center; }
  .cta-card h3 { font-family:'DM Serif Display',serif; font-size:1.3rem; color:var(--stamp-red-dark,#8b1a1a); margin-bottom:0.4rem; letter-spacing:-0.01em; }
  .cta-card p { font-size:0.86rem; color:var(--ink-muted); margin-bottom:1.1rem; }
  .btn-primary { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; background:var(--stamp-red,#c0392b); color:white; border-radius:var(--radius); font-size:0.88rem; font-weight:600; text-decoration:none; transition:all 0.15s; letter-spacing:0.01em; }
  .btn-primary:hover { background:var(--stamp-red-dark,#8b1a1a); transform:translateY(-1px); }
  .step-list { list-style:none; padding:0; counter-reset:steps; }
  .step-list li { counter-increment:steps; display:flex; gap:1rem; align-items:flex-start; padding:0.9rem 0; border-bottom:1px solid var(--border); font-size:0.88rem; color:var(--ink-muted); line-height:1.65; }
  .step-list li:last-child { border-bottom:none; }
  .step-list li::before { content:counter(steps); display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--stamp-red,#c0392b); color:white; font-size:0.75rem; font-weight:700; flex-shrink:0; margin-top:1px; }
  .setting-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin:0.75rem 0 1.25rem; }
  .setting-item { background:var(--paper-warm); border:1px solid var(--border); border-radius:var(--radius); padding:0.65rem 0.85rem; }
  .setting-item .s-label { font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); display:block; margin-bottom:2px; }
  .setting-item .s-val { font-size:0.82rem; font-weight:600; color:var(--ink); font-family:'DM Mono',monospace; }
  @media (max-width:768px) {
    .article-hero h1 { font-size:1.7rem; }
    .setting-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:480px) {
    .setting-grid { grid-template-columns:1fr; }
  }

  /* RELIEF PRESET BOXES */
  .relief-selector { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:0.5rem; }
  .relief-opt { border:1.5px solid var(--border); border-radius:var(--radius); padding:9px 4px; text-align:center; cursor:pointer; transition:all 0.15s; background:white; }
  .relief-opt:hover { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .relief-opt.selected { border-color:var(--stamp-red); background:var(--stamp-red-light); }
  .relief-opt .ro-icon { display:flex; justify-content:center; align-items:center; height:20px; margin-bottom:3px; color:var(--ink-muted); }
  .relief-opt.selected .ro-icon { color:var(--stamp-red); }
  .relief-opt .ro-name { font-size:0.62rem; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-muted); display:block; margin-bottom:1px; }
  .relief-opt .ro-val { font-size:0.68rem; color:var(--ink-faint); font-family:'DM Mono',monospace; display:block; }
  .relief-opt.selected .ro-name { color:var(--stamp-red-dark); }
  .relief-opt.selected .ro-val { color:var(--stamp-red); }

  /* PER-LINE TEXT ROW */
  .line-input-row { display:flex; align-items:flex-end; gap:10px; margin-bottom:0.85rem; }
  .line-input-main { flex:1; min-width:0; }
  .line-input-main label { margin-bottom:4px; }
  .line-size-ctrl { width:62px; flex-shrink:0; }
  .line-size-ctrl label { margin-bottom:4px; }
  .line-size-ctrl input[type="number"] { padding:10px 4px; text-align:center; font-family:'DM Mono',monospace; font-size:0.82rem; }
  .line-size-ctrl.disabled { opacity:0.3; pointer-events:none; }

  /* INK COLOR SWATCHES */
  .ink-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    justify-content: center;
  }
  .ink-color-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
  }
  .ink-color-swatches { display: flex; gap: 6px; }
  .ink-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: transform 0.1s, box-shadow 0.1s;
  }
  .ink-swatch:hover { transform: scale(1.15); }
  .ink-swatch.selected {
    border-color: var(--stamp-red);
    box-shadow: 0 0 0 1px var(--stamp-red);
  }

/* Contact form */
  .cf-row { margin-bottom: 0.85rem; }
  .cf-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-mid); margin-bottom: 0.35rem; letter-spacing: 0.02em; text-transform: uppercase; }
  .cf-success { margin-top: 0.75rem; padding: 0.65rem 0.9rem; background: #d1fae5; color: #065f46; border-radius: var(--radius); font-size: 0.87rem; font-weight: 500; }
  .cf-error   { margin-top: 0.75rem; padding: 0.65rem 0.9rem; background: #fee2e2; color: #991b1b; border-radius: var(--radius); font-size: 0.87rem; }