.ots-wrapper { max-width: 600px; margin: auto; background: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); font-family: sans-serif; }
.ots-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; color: #555; }
.ots-main-box { background: #FDEADA; padding: 25px; border-radius: 12px; margin-bottom: 20px; }
.ots-question { font-size: 1.2rem; margin-bottom: 20px; line-height: 1.4; }
.ots-opt { background: #fff; border: 2px solid #eee; padding: 15px; margin-bottom: 10px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; transition: 0.2s; }
.ots-opt.correct { background: #2ecc71 !important; color: white; border-color: #27ae60; }
.ots-opt.wrong { background: #e74c3c !important; color: white; border-color: #c0392b; }
.ots-opt.disabled { pointer-events: none; }
.ots-controls { display: flex; justify-content: space-between; margin-bottom: 20px; }
.ots-controls button { background: #3498db; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; }

.ots-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 10px; }
.ots-m-item { height: 40px; background: #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; }
.ots-m-item.active { border: 2px solid #333; }
.ots-m-item.c { background: #2ecc71; color: white; }
.ots-m-item.w { background: #e74c3c; color: white; }

.ots-circle-wrap { width: 150px; margin: auto; }
.c-bg { fill: none; stroke: #eee; stroke-width: 3; }
.c-fill { fill: none; stroke: #2ecc71; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0, 100; transition: 1s; }
#ots-pct { font-size: 8px; text-anchor: middle; font-weight: bold; }