/* ===============================
       GLOBAL DARK THEME (Crypto Style)
       =============================== */
    body {
      background-color: #080d1c;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      color: #e4e7eb;
      font-size: clamp(14px, 1.6vw, 18px);
    }

    .container {
      background-color: #0b0f18;
      width: 92%;
      max-width: 1000px;
      margin: 25px auto;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
      border: 1px solid #1a1f2e;
    }

    /* ===============================
       HEADER
       =============================== */
    .header {
      text-align: center;
      margin-bottom: 20px;
    }

    .header img {
      width: 100%;
      border-radius: 10px;
      border: 1px solid #1a1f2e;
      display: block;
    }

    .header h1 {
      margin: 15px 0 8px;
      font-size: clamp(26px, 4vw, 40px);
      color: #00bcd4; /* cyan accent */
      font-weight: 600;
    }

    .header h2 {
      margin: 0 0 10px;
      font-size: clamp(15px, 2.8vw, 20px);
      color: #d4af37; /* gold accent */
      font-weight: 400;
    }

    /* ===============================
       SECTION TITLES
       =============================== */
    .section-title {
      margin-top: 30px;
      margin-bottom: 12px;
      font-size: clamp(17px, 2.2vw, 22px);
      color: #00bcd4;
      border-left: 4px solid #178003;
      padding-left: 10px;
      font-weight: bold;
    }

    /* ===============================
       FORM GRID
       =============================== */
    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 18px 22px;
    }

    .form-field {
      margin-bottom: 6px;
    }

    .form-field label {
      display: block;
      margin-bottom: 6px;
      font-size: clamp(13px, 1.5vw, 16px);
      color: #d4af37;
      font-weight: 500;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      padding: 7px;
      background: #1e222e;
      border: 1px solid #1a1f2e;
      color: #e4e7eb;
      border-radius: 6px;
      font-size: clamp(12px, 1.2vw, 15px); /* smaller field font */
      box-sizing: border-box;
    }

    .form-field textarea {
      min-height: 90px;
      resize: vertical;
    }

    .note {
      font-size: 12px;
      color: #9aa0a6;
      margin-top: 4px;
    }

    /* ===============================
       QUOTE SUMMARY BOX
       =============================== */
    .quote-summary {
      display: none;
      margin-top: 10px;
      padding: 20px;
      background: #101623;
      border: 1px solid #1a1f2e;
      border-radius: 10px;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 15px 20px;
    }

    .summary-field label {
      color: #00bcd4;
      font-weight: bold;
    }

    .summary-field input {
      background: #0b0f18;
      border: 1px solid #1a1f2e;
      font-weight: bold;
      color: #178003;
    }

    /* ===============================
       BUTTONS
       =============================== */
    .submit-row {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .submit-btn,
    .reset-btn,
    .pdf-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      font-weight: 600;
    }

    .submit-btn {
      background-color: #178003;
      color: #ffffff;
      box-shadow: 0 0 10px rgba(23, 128, 3, 0.4);
    }

    .submit-btn:hover {
      background-color: #1fa204;
      box-shadow: 0 0 14px rgba(23, 128, 3, 0.6);
    }

    .reset-btn {
      background-color: #374151;
      color: #e5e7eb;
    }

    .reset-btn:hover {
      background-color: #4b5563;
    }

    .pdf-btn {
      background-color: #0891b2;
      color: #e0f2fe;
    }

    .pdf-btn:hover {
      background-color: #0ea5e9;
    }

    /* ===============================
       FOOTER (Crypto Terminal Style)
       =============================== */
    footer {
      text-align: center;
      margin-top: 40px;
      padding: 20px 10px;
      font-size: 14px;
      color: #e4e7eb;
      background: #0b0f18;
      border-top: 1px solid #1a1f2e;
      border-radius: 10px;
      width: 92%;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }

    /* PRINT: show just the main container cleanly */
    @media print {
      body {
        background: #ffffff;
      }
      .container {
        box-shadow: none;
        border-radius: 0;
        border: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
      }
      footer,
      .submit-row {
        display: none !important;
      }
    }