/* =====================================================================
       PAN AMERICA AUTO — landing
       Brand colors: black + red (American muscle / classic)
       ===================================================================== */
    *, *::before, *::after { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0;
      font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
      color: #111; background: #fafafa;
      -webkit-font-smoothing: antialiased;
    }

    .brand-bar {
      background: #0a0a0a;
      padding: 14px 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; border-bottom: 4px solid #c1272d;
    }
    .brand-bar .logo {
      font-family: "Helvetica Neue", Impact, sans-serif;
      font-weight: 900;
      font-size: 22px;
      color: #fff;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .brand-bar .logo .accent { color: #c1272d; }
    .brand-bar .tagline {
      color: #c1272d;
      font-size: 13px; font-weight: 700;
      letter-spacing: .3px;
      text-transform: uppercase;
    }

    .hero {
      max-width: 880px;
      margin: 0 auto;
      padding: 56px 24px 32px;
      text-align: center;
    }
    .hero h1 {
      margin: 0 0 14px;
      font-size: 38px;
      line-height: 1.1;
      font-weight: 900;
      color: #0a0a0a;
    }
    .hero h1 .red { color: #c1272d; }
    .hero p {
      margin: 0 auto;
      max-width: 640px;
      color: #444;
      font-size: 16px;
      line-height: 1.5;
    }

    .vin-card {
      max-width: 720px;
      margin: 24px auto 0;
      padding: 28px 28px 24px;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,.04);
    }
    .vin-card label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: #555;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .vin-row { display: flex; gap: 10px; }
    .vin-input {
      flex: 1;
      padding: 14px 16px;
      font-size: 18px;
      font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 2px solid #ddd;
      border-radius: 10px;
      background: #fafafa;
      transition: border-color .15s, background .15s;
      outline: none;
    }
    .vin-input:focus { border-color: #c1272d; background: #fff; }
    .vin-input.invalid { border-color: #e44; background: #fff7f7; }
    .vin-btn {
      padding: 14px 26px;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      background: #c1272d;
      color: #fff;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 3px 0 #8a1c20;
      transition: transform .08s, box-shadow .08s;
    }
    .vin-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #8a1c20; }
    .vin-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a1c20; }
    .vin-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

    .vin-help {
      margin-top: 12px;
      font-size: 13px;
      color: #666;
    }
    .vin-help b { color: #111; }

    .sample-buttons {
      margin-top: 14px;
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .sample-buttons button {
      padding: 6px 12px;
      font-size: 12px;
      font-family: "SFMono-Regular", "Menlo", monospace;
      background: #fff7e6;
      color: #6b4d10;
      border: 1px dashed #d8a937;
      border-radius: 6px;
      cursor: pointer;
    }
    .sample-buttons button:hover { background: #ffeec2; }

    .mode-row {
      margin-top: 14px;
      display: flex; gap: 18px;
      font-size: 13px; color: #555;
    }
    .mode-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
    .mode-row code {
      font-family: "SFMono-Regular", "Menlo", monospace;
      background: #f0f0f0; padding: 2px 6px;
      border-radius: 4px; font-size: 12px;
    }

    .status-line {
      max-width: 720px; margin: 16px auto 0;
      text-align: center; min-height: 24px;
      font-size: 14px; color: #666;
    }
    .status-line.error { color: #c1272d; font-weight: 600; }
    .status-line.ok    { color: #0a8a0a; font-weight: 600; }
    .loader {
      display: inline-block; width: 14px; height: 14px;
      border: 2px solid #ccc; border-top-color: #c1272d;
      border-radius: 50%;
      animation: spin .9s linear infinite;
      margin-right: 6px; vertical-align: -2px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .sticker-actions {
      max-width: 720px; margin: 16px auto 0;
      display: flex; gap: 10px; justify-content: center;
    }
    .sticker-actions button {
      padding: 8px 16px; font-size: 13px; font-weight: 600;
      background: #fff; color: #333;
      border: 1px solid #ccc; border-radius: 6px;
      cursor: pointer;
    }
    .sticker-actions button:hover { background: #f4f4f4; }

    .sticker-host {
      max-width: 1280px; margin: 24px auto 60px;
      padding: 0 16px;
    }

    /* =====================================================================
       STICKER STYLES (Monroney-style)
       ===================================================================== */
    .sticker { background: #fff; border: 2px solid #000; padding: 16px; font-size: 11px; line-height: 1.3; }
    .sticker-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .sticker-header { display: grid; grid-template-columns: 220px 1fr; gap: 12px; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 10px; }
    .sticker-brand { background: #0a0a0a; color: #ffe44f; padding: 12px; text-align: center; border-radius: 4px; }
    .sticker-brand .name { font-size: 35px; font-weight: 900; letter-spacing: 1px; }
    .sticker-brand .url { font-size: 9px; color: #fff; opacity: .8; margin-top: 4px; }
    .sticker-title { display: flex; flex-direction: column; justify-content: center; }
    .sticker-title h2 { margin: 0; font-size: 18px; font-weight: 900; }
    .sticker-title .meta { font-size: 11px; color: #444; margin-top: 4px; }
    .sticker-title .meta b { color: #000; }

    .sticker-section { padding: 6px 0; }
    .sticker-section h3 {
      background: #0a0a0a; color: #fff;
      margin: 0 0 6px; padding: 4px 8px; font-size: 11px;
      text-transform: uppercase; letter-spacing: .5px;
    }
    .sticker-section.std h3 { background: #d0d0d0; color: #000; text-align: center; }
    .sticker-section h4 {
      margin: 6px 0 3px; font-size: 10px; font-weight: 800;
      color: #333; text-transform: uppercase;
    }
    .sticker-section ul { margin: 0; padding: 0 0 0 14px; }
    .sticker-section li { font-size: 9.5px; line-height: 1.35; }

    .sticker-pricing { font-size: 11px; }
    .sticker-pricing .row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #aaa; }
    .sticker-pricing .row.total { font-weight: 900; font-size: 14px; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 6px 0; margin-top: 6px; }

    .sticker-footer {
      margin-top: 16px;
      border-top: 2px solid #000;
      padding-top: 8px;
      display: flex; justify-content: space-between; align-items: center;
      font-size: 10px;
    }
    .powered-by {
      color: #000;
      padding: 6px 10px; border-radius: 4px;
      font-weight: 800; letter-spacing: 1px;
      font-size: 12px;
    }

    /* Print: hide UI, show only sticker */
    @media print {
      .brand-bar, .hero, .vin-card, .status-line, .sticker-actions { display: none !important; }
      .sticker-host { margin: 0; padding: 0; max-width: none; }
      .sticker { border: 1px solid #000; }
    }