#cyn-main-wrapper { max-width: 480px; margin: 20px auto; background: #fff; padding: 25px; border-radius: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); text-align: center; font-family: sans-serif; }
.cyn-mode-selector { display: flex; background: #f0f2f5; padding: 5px; border-radius: 50px; margin-bottom: 25px; }
.mode-btn { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 40px; cursor: pointer; font-weight: bold; font-size: 12px; color: #777; transition: 0.3s; }
.mode-btn.active { background: #fff; color: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.cyn-mode-view { display: none; }
.cyn-mode-view.active { display: block; animation: cynIn 0.4s ease; }
@keyframes cynIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Button & Circle */
#decision-circle { width: 120px; height: 120px; border-radius: 50%; background: #333; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border: 6px solid #f0f0f0; }
#decision-text { color: #fff; font-size: 35px; font-weight: bold; }
.main-action-btn { background: #007bff; color: #fff; border: none; padding: 15px 30px; border-radius: 50px; font-weight: bold; cursor: pointer; width: 100%; max-width: 250px; }

/* Wheel */
.wheel-wrapper { position: relative; margin-bottom: 20px; }
.wheel-pointer { font-size: 32px; color: #333; margin-bottom: -20px !important; position: relative; z-index: 5; }
#cyn-wheel { max-width: 100%; transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1); }

/* Picker Grid */
.picker-header { margin-bottom: 15px; }
.picker-hint { font-style: italic; color: #666; font-size: 14px; }
.picker-scores { display: flex; justify-content: space-around; font-size: 13px; font-weight: bold; margin: 10px 0; }
.ps-y { color: #27ae60; } .ps-n { color: #e74c3c; } .ps-w { color: #f39c12; }
.picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; perspective: 1000px; }
.cyn-card { height: 90px; cursor: pointer; }
.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.cyn-card.is-flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; }
.card-front { background: #2c3e50; font-size: 24px; }
.card-back { transform: rotateY(180deg); font-size: 12px; text-align: center; padding: 5px; }
.back-yes { background: #27ae60; } .back-no { background: #e74c3c; } .back-wait { background: #f39c12; }
.secondary-btn { margin-top: 15px; background: #eee; border: none; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 11px; }

/* Stats & Modal */
.cyn-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 25px; }
.stat-card { padding: 12px; background: #f8f9fa; border-radius: 12px; }
.stat-card .value { display: block; font-size: 18px; font-weight: bold; }
.cyn-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); }
.cyn-modal-content { background: #fff; width: 80%; max-width: 350px; margin: 25% auto; padding: 30px; border-radius: 20px; }
#cyn-close-modal { margin-top: 20px; padding: 10px 25px; border-radius: 20px; border: none; background: #333; color: #fff; cursor: pointer; }