body {
     background: linear-gradient(120deg, #e7f1fb 0%, #f5fbfe 100%);
     margin: 0;
     font-family: 'Noto Sans SC', 'Inter', sans-serif;
 }

 .container-in {
     max-width: 440px;
     margin: 40px auto;
     background: #fff;
     border-radius: 28px;
     box-shadow: 0 6px 32px #a8bfd826;
     padding: 44px 24px 32px 24px;
     text-align: center;
 }

 .amount {
     width: 30vw;
     height: 3vh;
     font-size: 3vh;
     text-align: center;
 }

 .container-out {
     max-width: 440px;
     margin: 40px auto;
     background: #fff;
     border-radius: 28px;
     box-shadow: 0 6px 32px #a8bfd826;
     padding: 44px 24px 32px 24px;
     text-align: center;
 }

 h2 {
     color: #25406f;
     font-size: 2.4rem;
     font-family: 'Inter', sans-serif;
     margin-bottom: 32px;
     letter-spacing: 0.02em;
     text-align: center;
     margin-top: 0;
 }

 .main-label {
     font-weight: 700;
     font-size: 1.22rem;
     color: #526084;
     margin-bottom: 12px;
     display: block;
 }

 .sub {
     font-weight: 400;
     font-size: 1rem;
     color: #8891aa;
 }

 .number-input {
     margin: 18px 0 28px 0;
     padding: 12px 18px;
     width: 120px;
     font-size: 1.36rem;
     border-radius: 15px;
     border: 1.7px solid #b8c7d9;
     box-shadow: 0 2px 10px #e5eaf666;
     outline: none;
     text-align: center;
     background: #f7faff;
     transition: border .2s;
 }

 .number-input:focus {
     border-color: #4e6ee5;
 }

 .start-btn {
     width: 100%;
     padding: 20px 0;
     font-size: 1.22rem;
     font-weight: 700;
     background: linear-gradient(90deg, #5284f7 0%, #6db4fa 100%);
     color: #fff;
     border: none;
     border-radius: 18px;
     box-shadow: 0 8px 32px #a8bfd822;
     margin-top: 15px;
     letter-spacing: 0.02em;
     cursor: pointer;
     transition: background 0.17s;
 }

 .start-btn:hover {
     background: linear-gradient(90deg, #4970db 0%, #5a97cc 100%);
 }

 label,
 .optlist {
     font-weight: 700;
     color: #4b5a7a;
     margin: 18px 0 8px 0;
 }

 .optlist label {
     font-weight: 500;
     color: #334466;
     margin: 0 15px 0 0;
     display: inline-block;
 }

 button {
     width: 100%;
     padding: 16px 0;
     font-size: 1.15rem;
     font-weight: 700;
     background: #4e6ee5;
     color: #fff;
     border: none;
     border-radius: 12px;
     box-shadow: 0 4px 20px #b7cee86c;
     cursor: pointer;
     margin-top: 18px;
 }

 .back-btn {
     background: #e6e9ef;
     color: #314265;
     margin-bottom: 14px;
 }

 .quiz-container {
     margin-top: 28px;
     text-align: center;
 }

 .hanzi {
     font-size: 4rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     color: #27355e;
     text-shadow: 0 1px 0 #fff;
 }

 .choices {
     display: flex;
     /* justify-content: space-between; */
     flex-direction: column;
     gap: 1.1rem;
     margin-bottom: 2.2rem;
     align-items: center;
 }

 .choice {
     background: #396dbe;
     color: #f4f4f4;
     padding: 1.4rem 0;
     border-radius: 5vw;
     font-size: 1.5rem;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.18s cubic-bezier(.4, 1, .4, 1);
     width: 100%;
     max-width: 300px;
     text-align: center;
     border: 2.5px solid transparent;
     box-shadow: 0 4px 20px #b7cee86c;
     min-height: 2.8rem;
     outline: none;
 }

 .choice.correct {
     border-color: #5bc1ae;
     background: linear-gradient(90deg, #d3f5e6 0%, #b9e3d3 100%);
     color: #22836c;
     box-shadow: 0 0 0 5px #e9faf6c5;
 }

 .choice.wrong {
     border-color: #e17a7a;
     background: linear-gradient(90deg, #f6e2e2 0%, #edc7c7 100%);
     color: #b03636;
     box-shadow: 0 0 0 5px #ffe5e5a2;
 }

 .score {
     font-size: 1.18rem;
     margin-bottom: 0px;
     color: #37486b;
 }

 .summary {
     text-align: left;
     margin-top: 12px;
 }

 .summary h3 {
     color: #2a384d;
     font-size: 1.13rem;
     margin-bottom: 7px;
 }

 .summary-list {
     padding-left: 0;
     margin: 0;
     list-style: none;
 }

 .summary-list li {
     padding: 7px 0;
     border-bottom: 1px solid #eef1f7;
 }

 .correct-ans {
     color: #15ac85;
 }

 .wrong-ans {
     color: #e46c6c;
 }

 .tts-btn {
     background: none;
     color: black;
     box-shadow: none;
     outline: none;
 }

 .button-row {
     display: flex;
     justify-content: space-between;
     /* หรือ center */
     gap: 12px;
     margin: 20px;
 }

 .button-row button {
     flex: 1;
     max-width: 48%;
 }

 @media (max-width: 600px) {
     .container-out {
         display: grid;
         padding: 0vw 4vw 16px 4vw;
         border-radius: 0vw;
         margin-top: 0vh;
     }

     .container-in {
         padding: 30vw 4vw 16px 4vw;
         border-radius: 0vw;
         margin-top: 0vh;
     }

     .hanzi {
         font-size: 20vw;
         margin-bottom: 25vw;
     }

     .choices {
         display: flex;
         flex-direction: row;
         gap: 1.1rem;
         margin-bottom: 2.2rem;
         align-items: center;
     }

     .choice {
         font-size: 7vw;
         padding: 4vw 0;
         border-radius: 5vw;
         min-height: 10vw;
     }
 }

 .meaning-btn {
     display: block;
     margin: 16px auto 0 auto;
     padding: 9px 22px;
     font-size: 1.03rem;
     border-radius: 11px;
     background: #e4eefb;
     color: #2566b1;
     border: none;
     font-weight: 700;
     cursor: pointer;
     transition: background 0.18s;
 }

 .meaning-btn:active {
     background: #d7e6fb;
 }

 .meaning-box {
     margin: 14px auto 0 auto;
     padding: 15px 18px;
     background: #f8fafc;
     border-radius: 14px;
     color: #37486b;
     font-size: 1.08rem;
     max-width: 440px;
     box-shadow: 0 1px 6px #c0d8f344;
     word-break: break-word;
 }