.oq-root { font-family: inherit; }
.oq-loading { padding: 12px 0; color: #666; }
.oq-error { padding: 12px; background: #fff; color: #c91d23; border: 1px solid #c91d23; border-radius: 6px; }

.oq-progress { position: relative; height: 10px; background: #eee; border-radius: 999px; overflow: hidden; margin: 0 0 16px; }
.oq-progress__bar { height: 100%; width: 0%; background: linear-gradient(90deg, #c91d23, #5099c7); transition: width .3s ease; }
.oq-progress__text { position: absolute; top: -22px; right: 0; font-size: 12px; color: #555; }

.oq-card { background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.oq-question { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.oq-answers { display: grid; gap: 10px; }
.oq-answer { appearance: none; border: 1px solid #dcdcdc; background: #f9fafb; border-radius: 8px; padding: 10px 14px; text-align: left; cursor: pointer; transition: all .15s ease; }
.oq-answer:hover { background: #f3f4f6; border-color: #5099c7; }

.oq-result__title { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.oq-result__desc { color: #444; margin-bottom: 10px; white-space: pre-wrap; line-height: 1.6em;}
.oq-score { font-weight: 600; margin-bottom: 12px; }
.oq-restart { appearance: none; background: #5099c7; color: #fff; border: none; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.oq-restart:hover { background: #5099c7; }

/* Dynamic inputs */
.oq-form { display: grid; gap: 12px; margin-top: 8px; }
.oq-field { display: grid; gap: 6px; }
.oq-input-group { display: flex; gap: 8px; }
.oq-input-group .oq-input { flex: 1 1 0; }
.oq-input { padding: 10px 12px; border: 1px solid #dcdcdc; border-radius: 8px; background: #fff; }
.oq-input:focus { outline: none; border-color: #5099c7; box-shadow: 0 0 0 3px rgba(80, 153, 199, 0.15); }
.oq-actions { display: flex; gap: 10px; margin-top: 6px; }
.oq-submit { appearance: none; border: 1px solid transparent; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.oq-submit { background: #5099c7; color: #fff; }
.oq-submit:hover { background: #5099c7; }

/* Spacing for unboxed result ad */
.oq-result-ad { margin-top: 36px; }

/* Red ad button under result */
.oq-ad-button {
    display: inline-block;
    background: #c91d23;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    padding: 10px 14px;
    margin-top: 24px;
    margin-right: 8px;
    font-weight: 500;
}
.oq-ad-button:hover {
  background: #c91d23;
}