.opc-root {
	--opc-primary: #1b6b4a;
	--opc-accent: #ff7a45;
	--opc-card-bg: #ffffff;
	--opc-text: #1a1a1a;
	--opc-radius: 12px;
	--opc-max-width: 1100px;
	max-width: var(--opc-max-width);
	margin: 0 auto;
	color: var(--opc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
.opc-root *, .opc-root *::before, .opc-root *::after { box-sizing: inherit; }

.opc-loading { padding: 40px; text-align: center; color: #666; }

.opc-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: flex-start; }
@media (max-width: 860px) { .opc-layout { grid-template-columns: 1fr; } }

.opc-form-col { background: var(--opc-card-bg); border-radius: var(--opc-radius); padding: 30px 32px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
.opc-form-col::before { content: ""; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--opc-accent) 0%, transparent 70%); opacity: 0.12; pointer-events: none; }

/* ---------------- Progress bar ---------------- */
.opc-progress { margin-bottom: 4px; }
.opc-progress-bar { background: #eee; border-radius: 999px; height: 10px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); }
.opc-progress-fill { background: linear-gradient(90deg, var(--opc-primary), var(--opc-accent)); height: 100%; transition: width 0.45s cubic-bezier(.4,1.4,.6,1); border-radius: 999px; }
.opc-progress-label { font-size: 13px; color: #666; margin: 10px 0 22px; font-weight: 700; letter-spacing: 0.2px; }

/* ---------------- Step transitions ---------------- */
.opc-step-body { animation: opc-fade-slide-in 0.35s ease; }
@keyframes opc-fade-slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.opc-step-title { margin: 0 0 4px; font-size: 23px; font-weight: 800; }
.opc-step-desc { margin: 0 0 22px; color: #666; }

/* ---------------- Welcome / preferences step ---------------- */
.opc-welcome { text-align: center; padding: 10px 0 6px; }
.opc-welcome-emoji { font-size: 52px; margin-bottom: 6px; animation: opc-bounce 1.6s ease infinite; }
@keyframes opc-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.opc-welcome .opc-step-desc { max-width: 460px; margin-left: auto; margin-right: auto; }
.opc-pref-row { margin: 22px 0; }
.opc-pref-label { display: block; font-weight: 700; margin-bottom: 10px; font-size: 14px; }
.opc-segmented { display: inline-flex; background: #f2f2f2; border-radius: 999px; padding: 4px; gap: 4px; }
.opc-segment { border: none; background: transparent; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; color: #666; transition: all 0.2s ease; }
.opc-segment.active { background: var(--opc-primary); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.opc-segment:not(.active):hover { background: #e6e6e6; }
.opc-welcome-footnote { font-size: 12px; color: #999; margin-top: 18px; }

/* ---------------- Fields ---------------- */
.opc-field { margin-bottom: 20px; }
.opc-field-label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 14.5px; }
.opc-req { color: #d33; }
.opc-help { font-size: 12px; color: #777; margin: 5px 0 0; }
.opc-field-error { font-size: 12px; color: #d33; margin: 5px 0 0; font-weight: 600; }
.opc-heading { margin: 26px 0 10px; font-size: 19px; font-weight: 800; border-top: 1px solid #eee; padding-top: 22px; }
.opc-heading:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.opc-info-text { font-size: 13px; color: #555; background: #f7f7f7; padding: 12px 14px; border-radius: 10px; }
.opc-inline-quote { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--opc-primary); background: color-mix(in srgb, var(--opc-primary) 8%, transparent); padding: 10px 14px; border-radius: 10px; border-left: 3px solid var(--opc-primary); animation: opc-fade-slide-in 0.3s ease; }

.opc-root input[type=text], .opc-root input[type=email], .opc-root input[type=tel],
.opc-root input[type=number], .opc-root input[type=date], .opc-root select, .opc-root textarea {
	width: 100%; padding: 12px 14px; font-size: 14.5px; border-radius: 10px; border: 1.5px solid #e2e2e2; background: #fbfbfb; color: var(--opc-text); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.opc-root textarea { min-height: 84px; resize: vertical; }
.opc-inputs-underline input[type=text], .opc-inputs-underline input[type=email], .opc-inputs-underline input[type=tel],
.opc-inputs-underline input[type=number], .opc-inputs-underline select, .opc-inputs-underline textarea {
	border: none; border-bottom: 2px solid #ddd; border-radius: 0; padding-left: 2px; background: transparent;
}
.opc-root input:focus, .opc-root select:focus, .opc-root textarea:focus { outline: none; border-color: var(--opc-primary); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--opc-primary) 12%, transparent); }

.opc-input-with-unit { position: relative; display: flex; align-items: center; gap: 8px; }
.opc-input-with-unit input { flex: 1; min-width: 0; }
.opc-unit-inline { font-size: 13px; color: #888; white-space: nowrap; }
.opc-height-imperial input { max-width: 90px; flex: none; }

.opc-unit-toggle { display: inline-flex; background: #eee; border-radius: 999px; padding: 3px; flex-shrink: 0; }
.opc-unit-btn { border: none; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; color: #777; }
.opc-unit-btn.active { background: var(--opc-primary); color: #fff; }

/* ---------------- Choice "cards" (radio/checkbox/yes-no) ---------------- */
.opc-choice-group { display: flex; flex-wrap: wrap; gap: 10px; }
.opc-choice-card { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1.5px solid #e2e2e2; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; background: #fbfbfb; transition: all 0.15s ease; position: relative; }
.opc-choice-card:hover { border-color: var(--opc-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.opc-choice-card.selected { border-color: var(--opc-primary); background: color-mix(in srgb, var(--opc-primary) 10%, white); box-shadow: 0 4px 14px color-mix(in srgb, var(--opc-primary) 25%, transparent); }
.opc-choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.opc-choice-icon { font-size: 17px; line-height: 1; }
.opc-yesno .opc-choice-card { min-width: 84px; justify-content: center; }

/* ---------------- Slider ---------------- */
.opc-slider-row { display: flex; align-items: center; gap: 14px; background: #fbfbfb; border: 1.5px solid #e2e2e2; border-radius: 12px; padding: 10px 16px; }
.opc-slider-emoji { font-size: 22px; transition: transform 0.15s ease; }
.opc-slider-row input[type=range] { flex: 1; accent-color: var(--opc-primary); height: 6px; }
.opc-slider-value { font-weight: 800; min-width: 26px; text-align: center; color: var(--opc-primary); font-size: 16px; }

/* ---------------- Nav ---------------- */
.opc-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.opc-btn { border: none; padding: 13px 28px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.opc-btn-primary { background: linear-gradient(135deg, var(--opc-primary), color-mix(in srgb, var(--opc-primary) 70%, var(--opc-accent))); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--opc-primary) 35%, transparent); }
.opc-btn-primary:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 22px color-mix(in srgb, var(--opc-primary) 45%, transparent); }
.opc-btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.opc-btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }
.opc-buttons-outline .opc-btn-primary { background: transparent; color: var(--opc-primary); border: 2px solid var(--opc-primary); box-shadow: none; }
.opc-btn-back { background: transparent; color: #777; padding: 13px 10px; font-weight: 600; }
.opc-btn-back:hover { color: var(--opc-text); }

.opc-submit-error { margin-top: 16px; background: #fdecea; color: #c62828; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; }

/* ---------------- Coach note ---------------- */
.opc-coach-note { display: flex; gap: 14px; margin-top: 26px; padding: 18px 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--opc-primary) 8%, white), color-mix(in srgb, var(--opc-accent) 6%, white)); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--opc-primary) 20%, transparent); animation: opc-fade-slide-in 0.4s ease; }
.opc-coach-avatar { font-size: 30px; flex-shrink: 0; }
.opc-coach-text p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: #444; }
.opc-coach-greeting { font-weight: 800; color: var(--opc-text); font-size: 14.5px; }
.opc-coach-sign { font-style: italic; color: var(--opc-primary); font-weight: 700; margin-bottom: 0 !important; }

/* ---------------- Results sidebar ---------------- */
.opc-results-col { position: relative; }
.opc-results-sticky .opc-results-col { position: sticky; top: 24px; }
.opc-results-inline .opc-results-col { position: static; }
.opc-results-card { background: var(--opc-card-bg); border-radius: var(--opc-radius); padding: 26px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.opc-results-card h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.opc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; display: inline-block; animation: opc-pulse 1.6s ease infinite; }
@keyframes opc-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,0.5); } 70% { box-shadow: 0 0 0 8px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }

.opc-gauge-wrap { text-align: center; margin: 6px 0 14px; }
.opc-gauge-svg { width: 100%; max-width: 220px; height: auto; }
.opc-gauge-value { font-size: 30px; font-weight: 900; margin-top: -34px; }
.opc-gauge-category { font-size: 13px; font-weight: 700; margin-top: 2px; }
.opc-gauge-placeholder { font-size: 12.5px; color: #999; padding: 30px 10px; }

.opc-metric-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.opc-metric { background: #f7f7f7; border-radius: 12px; padding: 10px 8px; text-align: center; }
.opc-metric-accent { background: color-mix(in srgb, var(--opc-accent) 14%, white); }
.opc-metric-label { display: block; font-size: 10.5px; color: #888; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.opc-metric-value { display: block; font-size: 15px; font-weight: 800; color: var(--opc-text); }

.opc-macros-row { display: flex; gap: 8px; margin-bottom: 16px; }
.opc-macro-chip { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 7px 4px; border-radius: 999px; background: #eef6f0; color: var(--opc-primary); }

.opc-insights { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.opc-insights-empty { font-size: 12.5px; color: #999; text-align: center; padding: 14px 6px; }
.opc-insight { display: flex; gap: 10px; padding: 11px 13px; border-radius: 12px; background: #f7f7f7; animation: opc-fade-slide-in 0.3s ease; }
.opc-insight p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #444; }
.opc-insight-cat { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }
.opc-insight-icon { font-size: 15px; line-height: 1.4; }
.opc-insight-positive { background: #eafaf0; } .opc-insight-positive .opc-insight-cat { color: #1b8a5a; }
.opc-insight-watch { background: #fff3ec; } .opc-insight-watch .opc-insight-cat { color: #e2662b; }
.opc-insight-info { background: #eef4ff; } .opc-insight-info .opc-insight-cat { color: #2563eb; }

.opc-quote-card { position: relative; margin-top: 6px; padding: 16px 18px 14px; background: linear-gradient(135deg, var(--opc-primary), color-mix(in srgb, var(--opc-primary) 60%, var(--opc-accent))); border-radius: 14px; color: #fff; animation: opc-fade-slide-in 0.35s ease; }
.opc-quote-card p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; font-style: italic; }
.opc-quote-mark { position: absolute; top: -6px; left: 10px; font-size: 40px; opacity: 0.35; font-family: Georgia, serif; }

.opc-results-note { font-size: 11px; color: #999; margin-top: 14px; margin-bottom: 0; }

/* ---------------- Success + confetti ---------------- */
.opc-success { text-align: center; padding: 50px 10px; position: relative; overflow: hidden; }
.opc-success-burst { position: absolute; top: 30px; left: 50%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--opc-primary) 30%, transparent) 0%, transparent 70%); animation: opc-burst 1.2s ease-out; }
@keyframes opc-burst { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
.opc-success-emoji { font-size: 54px; animation: opc-pop 0.5s cubic-bezier(.4,1.6,.6,1); position: relative; }
@keyframes opc-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.opc-success h2 { color: var(--opc-primary); margin: 10px 0 6px; }
.opc-success p { color: #666; }
.opc-confetti-piece { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; animation: opc-confetti-fall 1.6s ease-in forwards; }
@keyframes opc-confetti-fall {
	0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
	100% { transform: translate(var(--drift), 340px) rotate(540deg); opacity: 0; }
}

@media (max-width: 480px) {
	.opc-form-col, .opc-results-card { padding: 20px; }
	.opc-metric-grid { grid-template-columns: 1fr 1fr; }
	.opc-metric-accent { grid-column: span 2; }
}