body {
      margin: 0;
      padding: 5px 5px 5px;
      background: #ffffff;
      color: #111111;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
    }

.ticket {
    background: #faf6e8;
    border: 1px dashed #777;
    padding: 20px;

    font-family: Consolas, monospace;
    font-size: 24px;

    border-radius: 4px;

    width: fit-content;
    margin: 20px auto;

    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

    .site-title {
      display: block;
      margin: 10px auto 10px auto;
      max-width: 300px;
	  text-align: center;
    }

    .wrap {
      max-width: 820px;
      margin: 0 auto;
    }

    h1 {
      margin-bottom: 30px;
    }

    .card {
      border: 0px solid #dddddd;
      border-radius: 14px;
      padding: 0px;
      background: #ffffff;
    }

    .hidden {
      display: none;
    }

    #meta {
      color: #666666;
      margin-bottom: 20px;
      font-size: 15px;
    }

    #question {
      font-size: 30px;
      line-height: 1.35;
      margin-bottom: 28px;
	  font-weight: bold;
    }

    #answers {
      display: flex;
      flex-direction: column;
      gap: 10px; /* distanta verticala intre butoane */
      align-items: center;
    }

    .answer-btn,
    .main-btn {
      width: 95%;
      max-width: 620px;
      padding: 10px 10px;
      font-size: 22px;
      line-height: 1.4;
      border: 1px solid black;
      border-radius: 12px;
      background: #ffffff;
      color: #111111;
      cursor: pointer;
	  text-align: left;
    }

    .answer-btn:hover,
    .main-btn:hover {
      background: #f5f5f5;
    }

    .answer-btn.correct {
      background: #eef9ee;
      border-color: #2e8b57;
    }

    .answer-btn.wrong {
      background: #fff0f0;
      border-color: #c94c4c;
    }

    .answer-btn:disabled {
      cursor: default;
      opacity: 1;
    }

    .main-btn {
      max-width: 260px;
      margin-top: 24px;
      font-weight: bold;
    }

	.link-btn {
	  display: inline-block;
	  text-decoration: none;
	  text-align: center;
	}

    #review-list {
      margin-top: 30px;
      text-align: left;
    }

    .review-item {
      border-top: 1px solid #dddddd;
      padding: 20px 0;
    }

    .review-item:first-child {
      border-top: none;
    }

    .review-word {
      font-size: 22px;
      margin-bottom: 10px;
    }

    .review-contrast {
      font-size: 17px;
      line-height: 1.6;
    }

    .review-link {
      margin-top: 10px;
      font-size: 16px;
    }

    .review-link a {
      color: #1a0dab;
      text-decoration: underline;
    }

    #feedback {
      margin-top: 18px;
      font-size: 18px;
      min-height: 24px;
    }

    #popup-feedback {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 24px 40px;
      font-size: 44px;
      font-weight: bold;
      border-radius: 16px;
      background: #ffffff;
      border: 3px solid #111111;
      z-index: 9999;
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
      display: none;
      justify-content: center;
      align-items: center;
      min-width: 220px;
      min-height: 110px;
    }

    #popup-feedback.correct {
      color: #1f7a1f;
      border-color: #2e8b57;
    }

    #popup-feedback.wrong {
      color: #b22222;
      border-color: #c94c4c;
    }

    @media (max-width: 640px) {
      #question {
        font-size: 24px;
      }

      .answer-btn,
      .main-btn {
        font-size: 17px;
      }

      #popup-feedback {
        font-size: 34px;
        min-width: 180px;
        min-height: 90px;
        padding: 20px 28px;
      }