:root {
        --main: #20477f;
      }
      body {
        background: #f8fbff;
        font-family: "Segoe UI", Arial, sans-serif;
        color: #223;
        margin: 0;
      }
      .container {
        max-width: 440px;
        margin: 42px auto 0;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(26, 48, 88, 0.125);
        padding: 30px 16px 24px;
      }
      .logo {
        font-size: 1.32em;
        font-weight: bold;
        color: var(--main);
        text-align: center;
        margin-bottom: 10px;
      }
      .desc {
        text-align: center;
        color: #286673;
        margin-bottom: 15px;
        font-size: 1.01em;
      }
      .input-row {
        margin: 15px 0 8px;
      }
      .input-row label {
        color: #234;
        font-size: 1.03em;
      }
      textarea,
      input[type="text"],
      select {
        width: 100%;
        font-size: 1.06em;
        border: 1.2px solid #b7d8f2;
        border-radius: 8px;
        padding: 10px;
        margin-top: 4px;
        box-sizing: border-box;
        background: #fafdff;
      }
      select {
        cursor: pointer;
      }
      .action-btn {
        background: var(--main);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 13px 0;
        width: 100%;
        font-size: 1.13em;
        font-weight: bold;
        cursor: pointer;
        margin: 16px 0 10px;
        box-shadow: 0 2px 12px rgba(32, 71, 127, 0.1);
        transition: background 0.15s;
      }
      .action-btn:active {
        background: #18335e;
      }
      .result-area {
        min-height: 36px;
        text-align: center;
        color: #234;
        background: #f2f8ff;
        border-radius: 7px;
        margin-top: 12px;
        font-size: 1.22em;
        border: 1.2px solid #d5e6fa;
        padding: 12px 6px;
        word-break: break-all;
        font-family: "Fira Mono", monospace;
      }
      .footer {
        color: #789;
        text-align: center;
        font-size: 0.94em;
        margin-top: 18px;
      }
      #backBtn {
        position: fixed;
        left: 50%;
        bottom: 32px;
        transform: translateX(-50%);
        background: var(--main);
        color: #fff;
        font-weight: 700;
        border: none;
        border-radius: 2rem;
        padding: 0.58em 1.5em;
        box-shadow: 0 4px 16px rgba(32, 71, 127, 0.13);
        font-size: 1.09em;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.15s, transform 0.12s;
      }
      #backBtn:hover {
        background: #18335e;
        transform: translateX(-50%) scale(1.04);
      }
      @media (max-width: 600px) {
        .container {
          max-width: 99vw;
          padding: 10px 2vw 12px;
        }
        #backBtn {
          bottom: 18px;
          font-size: 0.98em;
          padding: 0.48em 1em;
        }
      }
      section#faq { margin-top: 30px; }
      section#faq h2 { margin-bottom: 13px; color: var(--main); font-size: 1.11em; text-align: center; }
      section#faq dt { font-weight: bold; margin-top: 8px; }
      section#faq dd { margin: 0 0 7px; font-size: 0.99em; color: #286673; }