body{margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f7f9fc;color:#333;margin:0;padding:20px;text-align:center}h1{color:#2c3e50;margin-bottom:5px}.subtitle{color:#7f8c8d;margin-bottom:25px}.quiz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1200px;margin:0 auto 30px}.bond-card{background:#fff;padding:15px;border-radius:15px;box-shadow:0 4px 10px #0000000d;border:2px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;position:relative}.question-number{position:absolute;top:10px;left:10px;background:#edf2f7;color:#4a5568;font-size:.8rem;font-weight:700;padding:2px 8px;border-radius:10px}.whole{background:#e74c3c;color:#fff;font-size:1.8rem;width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin:15px 0 10px}.parts-row{display:flex;justify-content:space-between;width:80%;margin-top:5px}.part{background:#3498db;color:#fff;font-size:1.8rem;width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.part input{width:45px;height:45px;font-size:1.5rem;text-align:center;border:none;border-radius:50%;outline:none;background:#fff;color:#333}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.btn-container{margin:30px 0}button{padding:12px 30px;font-size:1.2rem;font-weight:700;color:#fff;border:none;border-radius:8px;cursor:pointer;margin:5px;transition:transform .1s}#submit-btn{background-color:#2ecc71;box-shadow:0 4px #27ae60}#refresh-btn{background-color:#3498db;box-shadow:0 4px #2980b9}button:active{transform:translateY(4px);box-shadow:none}.correct-card{border-color:#2ecc71;background-color:#f2fbf5}.wrong-card{border-color:#e74c3c;background-color:#fdf3f2}.input-error{box-shadow:0 0 0 3px #f1c40f}.connector{position:relative;width:80%;height:45px;margin-top:-15px;margin-bottom:-10px}.connector .line{position:absolute;top:0;left:50%;width:2.5px;height:45px;background:#a0aec0;border-radius:2px;transform-origin:top center}.connector .line-left{transform:rotate(-25deg)}.connector .line-right{transform:rotate(25deg)}.result-banner{font-size:1.8rem;font-weight:700;margin:20px 0}.correct-answer{color:#e74c3c;font-size:.8rem;margin-top:5px}