/* ==========================================================================
   CricQuizz Quiz Manager — frontend styles
   Colours/fonts come from the theme's --q24-* tokens, with fallbacks so the
   plugin still looks right under any theme.
   ========================================================================== */

:root {
    --qms-primary:      var(--q24-primary, #5b3df5);
    --qms-primary-ink:  var(--q24-primary-ink, #4327d6);
    --qms-primary-soft: var(--q24-primary-soft, #efebff);
    --qms-accent:       var(--q24-accent, #ffb020);
    --qms-accent-soft:  var(--q24-accent-soft, #fff4dc);
    --qms-live:         var(--q24-live, #e5484d);
    --qms-live-soft:    var(--q24-live-soft, #ffecec);
    --qms-success:      var(--q24-success, #12a150);
    --qms-success-soft: var(--q24-success-soft, #e6f7ee);
    --qms-upcoming:     var(--q24-upcoming, #0e7cdb);
    --qms-upcoming-soft:var(--q24-upcoming-soft, #e6f2fd);
    --qms-bg:           var(--q24-bg, #f7f7fb);
    --qms-surface:      var(--q24-surface, #ffffff);
    --qms-ink:          var(--q24-ink, #16142b);
    --qms-muted:        var(--q24-muted, #5f5c78);
    --qms-line:         var(--q24-line, #e6e4f0);
    --qms-radius:       var(--q24-radius, 16px);
    --qms-radius-sm:    var(--q24-radius-sm, 10px);
    --qms-shadow:       var(--q24-shadow, 0 1px 2px rgba(22,20,43,.04), 0 6px 24px rgba(22,20,43,.06));
    --qms-shadow-lg:    var(--q24-shadow-lg, 0 12px 40px rgba(22,20,43,.12));
    --qms-font:         var(--q24-font, 'Noto Sans Bengali', system-ui, sans-serif);
    --qms-font-head:    var(--q24-font-head, 'Anek Bangla', 'Noto Sans Bengali', system-ui, sans-serif);
}

.qms-arc-page,
.qms-quiz-wrapper { font-family: var(--qms-font); color: var(--qms-ink); }
.qms-arc-page *,
.qms-quiz-wrapper * { box-sizing: border-box; }

/* ── Shared bits ─────────────────────────────────────────────────────────── */
@keyframes qms-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes qms-spin  { to { transform: rotate(360deg); } }

.qms-error,
.qms-quiz-closed,
.qms-not-started {
    padding: 14px 18px; border-radius: var(--qms-radius-sm);
    background: var(--qms-live-soft); color: var(--qms-live); font-weight: 600;
}
.qms-not-started { background: var(--qms-upcoming-soft); color: var(--qms-upcoming); }

/* ==========================================================================
   ARCHIVE
   ========================================================================== */
.qms-arc-page { background: var(--qms-bg); padding-bottom: 64px; }

.qms-arc-hero {
    background:
        radial-gradient(600px 240px at 85% 0%, rgba(255,176,32,.22), transparent 70%),
        linear-gradient(135deg, var(--qms-primary) 0%, var(--qms-primary-ink) 100%);
    color: #fff; padding: 56px 16px 72px; text-align: center;
}
.qms-arc-hero-inner { max-width: 760px; margin: 0 auto; }

.qms-arc-eyebrow-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px; border-radius: 999px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    font-size: 14px; font-weight: 600; margin-bottom: 18px;
}
.qms-arc-eyebrow-icon {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--qms-accent); color: var(--qms-ink);
}
.qms-arc-eyebrow-icon svg { width: 16px; height: 16px; }
.qms-arc-eyebrow-label { display: inline-flex; align-items: center; gap: 8px; }
.qms-arc-eyebrow-dots { display: none; }

.qms-arc-hero-title {
    font-family: var(--qms-font-head); font-size: clamp(32px, 6vw, 52px);
    line-height: 1.15; margin: 0 0 12px; color: #fff; font-weight: 700;
}
.qms-arc-title-highlight { color: var(--qms-accent); }
.qms-arc-hero-sub { font-size: 17px; opacity: .9; margin: 0 auto 24px; max-width: 560px; }

.qms-arc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.qms-arc-stat {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
    background: rgba(255,255,255,.95); color: var(--qms-ink);
}
.qms-arc-stat-dot { width: 8px; height: 8px; border-radius: 50%; }
.qms-arc-stat-dot-live     { background: var(--qms-live); color: var(--qms-live); animation: qms-pulse 1.6s infinite; }
.qms-arc-stat-dot-upcoming { background: var(--qms-upcoming); }
.qms-arc-stat-dot-closed   { background: var(--qms-muted); }

.qms-arc-container { max-width: 1180px; margin: -40px auto 0; padding: 0 16px; position: relative; }

/* ── Grid & cards ────────────────────────────────────────────────────────── */
.qms-arc-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.qms-arc-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--qms-surface); border: 1px solid var(--qms-line);
    border-radius: var(--qms-radius); box-shadow: var(--qms-shadow);
    color: inherit; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.qms-arc-card:hover { transform: translateY(-4px); box-shadow: var(--qms-shadow-lg); border-color: var(--qms-primary-soft); }
.qms-arc-card:focus-visible { outline: 3px solid var(--qms-primary); outline-offset: 2px; }
.qms-card-glow { display: none; }

.qms-card-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--qms-primary-soft); overflow: hidden; }
.qms-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qms-card-thumb-placeholder {
    width: 100%; height: 100%; display: grid; place-items: center; color: var(--qms-primary);
    background:
        radial-gradient(circle at 20% 20%, rgba(255,176,32,.25), transparent 45%),
        linear-gradient(135deg, var(--qms-primary-soft), #fff);
}
.qms-card-closed .qms-card-thumb { filter: grayscale(.7); }
.qms-card-thumb-overlay { display: none; }

.qms-arc-badge {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.qms-badge-live     { color: var(--qms-live); }
.qms-badge-upcoming { color: var(--qms-upcoming); }
.qms-badge-pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: qms-pulse 1.6s infinite; }

.qms-card-body { display: flex; flex-direction: column; gap: 14px; padding: 18px; flex: 1; }
.qms-card-title {
    font-family: var(--qms-font-head); font-size: 20px; line-height: 1.35;
    margin: 0; color: var(--qms-ink); font-weight: 700;
}

.qms-card-countdown-wrap { display: flex; flex-direction: column; gap: 8px; }
.qms-cd-label { font-size: 13px; color: var(--qms-muted); font-weight: 600; }
.qms-cd-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.qms-cd-unit {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 2px; border-radius: var(--qms-radius-sm); background: var(--qms-bg);
}
.qms-cd-unit .qms-cd-num { font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--qms-ink); }
.qms-cd-unit .qms-cd-sep { font-size: 11px; color: var(--qms-muted); }
.qms-card-upcoming .qms-cd-unit { background: var(--qms-upcoming-soft); }
.qms-cd-ended { font-size: 14px; font-weight: 600; color: var(--qms-muted); padding: 8px 12px; background: var(--qms-bg); border-radius: var(--qms-radius-sm); }

.qms-card-prize-hint {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: var(--qms-accent-soft); color: #9a6200;
}

.qms-card-footer { margin-top: auto; }
.qms-card-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 16px; border-radius: var(--qms-radius-sm); font-weight: 700; font-size: 15px;
    transition: background .2s ease, color .2s ease;
}
.qms-cta-live     { background: var(--qms-primary); color: #fff; }
.qms-arc-card:hover .qms-cta-live { background: var(--qms-primary-ink); }
.qms-cta-upcoming { background: var(--qms-upcoming-soft); color: var(--qms-upcoming); }
.qms-cta-closed   { background: var(--qms-bg); color: var(--qms-ink); }

/* ── Load more / empty ───────────────────────────────────────────────────── */
.qms-load-more-wrap { text-align: center; margin-top: 32px; }
.qms-load-more-wrap.qms-lm-done .qms-load-more-btn { display: none; }
.qms-load-more-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 12px 26px; border-radius: 999px; font: 700 15px var(--qms-font);
    background: var(--qms-surface); color: var(--qms-primary); border: 2px solid var(--qms-primary);
    transition: background .2s ease, color .2s ease;
}
.qms-load-more-btn:hover { background: var(--qms-primary); color: #fff; }
.qms-lm-spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: qms-spin .7s linear infinite; }
.qms-lm-loading .qms-lm-spinner { display: inline-block; }
.qms-lm-loading .qms-lm-icon { display: none; }
.qms-lm-count { color: var(--qms-muted); font-size: 14px; margin-top: 10px; }

.qms-arc-empty-state {
    text-align: center; padding: 56px 20px; background: var(--qms-surface);
    border: 1px dashed var(--qms-line); border-radius: var(--qms-radius);
}
.qms-arc-empty-icon { font-size: 40px; }
.qms-arc-empty-state h3 { font-family: var(--qms-font-head); margin: 8px 0 4px; }
.qms-arc-empty-state p { color: var(--qms-muted); margin: 0; }

/* ==========================================================================
   SINGLE QUIZ
   ========================================================================== */
.qms-single-page { padding-bottom: 64px; }
.qms-single-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.qms-single-page .qms-single-wrap { padding-top: 24px; }

/* Hero */
.qms-hero {
    position: relative; overflow: hidden; border-radius: var(--qms-radius);
    color: #fff; padding: 40px 28px; margin-bottom: 24px;
    background:
        radial-gradient(500px 200px at 90% 0%, rgba(255,176,32,.25), transparent 70%),
        linear-gradient(135deg, var(--qms-primary) 0%, var(--qms-primary-ink) 100%);
}
.qms-hero-img { position: absolute; inset: 0; }
.qms-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.qms-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,20,43,.85), rgba(22,20,43,.45)); }
.qms-hero-content { position: relative; max-width: 720px; }
.qms-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: #fff; color: var(--qms-live); margin-bottom: 12px;
}
.qms-hero-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: qms-pulse 1.6s infinite; }
.qms-hero-badge-upcoming { color: var(--qms-upcoming); }
.qms-hero-badge-closed   { color: var(--qms-muted); }
.qms-hero-badge-upcoming::before,
.qms-hero-badge-closed::before { animation: none; }
.qms-hero-title { font-family: var(--qms-font-head); font-size: clamp(26px, 4.5vw, 40px); line-height: 1.2; margin: 0 0 8px; color: #fff; }
.qms-hero-desc { margin: 0 0 14px; opacity: .92; font-size: 16px; }
.qms-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.qms-hero-meta-item {
    display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
    padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.16);
}

/* Layout: main column + right rail (timer, prize, rules) */
.qms-layout {
    display: grid; gap: 24px; align-items: start;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "main timer" "main side";
    grid-template-rows: auto 1fr;
}
.qms-main      { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.qms-timer-col { grid-area: timer; }
.qms-sidebar   { grid-area: side; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 960px) {
    .qms-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "timer" "main" "side"; grid-template-rows: auto; }
}

/* Cards */
.qms-section-card,
.qms-sb-card {
    background: var(--qms-surface); border: 1px solid var(--qms-line);
    border-radius: var(--qms-radius); box-shadow: var(--qms-shadow);
}
.qms-section-card { padding: 22px; }
.qms-section-head,
.qms-sb-head {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--qms-font-head); font-weight: 700; font-size: 19px; color: var(--qms-ink);
}
.qms-section-head { margin: -2px 0 18px; }
.qms-section-icon { font-size: 20px; }

/* Upcoming / closed states */
.qms-upcoming-card,
.qms-closed-card { text-align: center; padding: 40px 24px; }
.qms-upcoming-icon-wrap,
.qms-closed-icon-wrap {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
    display: grid; place-items: center;
}
.qms-upcoming-icon-wrap { background: var(--qms-upcoming-soft); color: var(--qms-upcoming); }
.qms-closed-icon-wrap   { background: var(--qms-bg); color: var(--qms-muted); }
.qms-upcoming-icon-wrap svg,
.qms-closed-icon-wrap svg { width: 30px; height: 30px; }
.qms-upcoming-title,
.qms-closed-title { font-family: var(--qms-font-head); font-size: 24px; margin: 0 0 6px; }
.qms-upcoming-msg,
.qms-closed-msg,
.qms-closed-sub { color: var(--qms-muted); margin: 0 0 6px; }
.qms-upcoming-date-wrap {
    display: inline-flex; flex-direction: column; gap: 2px; margin-top: 12px;
    padding: 10px 20px; border-radius: var(--qms-radius-sm); background: var(--qms-upcoming-soft);
}
.qms-upcoming-date-label { font-size: 13px; color: var(--qms-upcoming); font-weight: 600; }
.qms-upcoming-date-value { font-size: 18px; font-weight: 700; }
.qms-upcoming-divider,
.qms-closed-divider { height: 1px; background: var(--qms-line); margin: 20px auto; max-width: 240px; }
.qms-upcoming-note,
.qms-closed-thanks { margin: 0; font-weight: 600; }

/* Winners */
.qms-winners-head { color: #9a6200; }
.qms-winners-table-head,
.qms-winner-row {
    display: grid; grid-template-columns: 64px 1.3fr 1fr 1fr; gap: 12px; align-items: center;
    padding: 12px 14px;
}
.qms-winners-table-head {
    font-size: 13px; font-weight: 700; color: var(--qms-muted);
    background: var(--qms-bg); border-radius: var(--qms-radius-sm);
}
.qms-winner-row { border-bottom: 1px solid var(--qms-line); }
.qms-winner-row:last-child { border-bottom: 0; }
.qms-winner-pos { font-size: 22px; text-align: center; }
.qms-winner-prize { font-weight: 600; }
.qms-winner-name { font-weight: 700; }
.qms-winner-phone { color: var(--qms-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .qms-winners-table-head { display: none; }
    .qms-winner-row { grid-template-columns: 44px 1fr; row-gap: 2px; }
    .qms-winner-pos { grid-row: span 3; }
}

/* Progress */
.qms-q-progress-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.qms-q-progress-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--qms-bg); overflow: hidden; }
.qms-q-progress-fill { height: 100%; width: 0; border-radius: inherit; background: var(--qms-primary); transition: width .3s ease, background .3s ease; }
.qms-q-progress-wrap.is-half .qms-q-progress-fill { background: var(--qms-accent); }
.qms-q-progress-wrap.is-done .qms-q-progress-fill { background: var(--qms-success); }
.qms-q-progress-label { font-size: 13px; color: var(--qms-muted); white-space: nowrap; }
.qms-q-answered { font-weight: 700; color: var(--qms-ink); }

/* Questions */
.qms-questions-container { display: flex; flex-direction: column; gap: 14px; }
.qms-question {
    padding: 18px; border: 1px solid var(--qms-line); border-radius: var(--qms-radius-sm);
    background: var(--qms-surface); transition: border-color .2s ease;
}
.qms-question.qms-unanswered { border-color: var(--qms-live); background: var(--qms-live-soft); }
.qms-question-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.qms-q-num {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 14px;
    background: var(--qms-primary-soft); color: var(--qms-primary);
}
.qms-question-text { font-weight: 600; font-size: 17px; line-height: 1.5; padding-top: 2px; }
.qms-question-text p { margin: 0; }
.qms-required { color: var(--qms-live); margin-left: 2px; }

.qms-quiz-form { display: flex; flex-direction: column; gap: 20px; }
.qms-options-list { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .qms-options-list { grid-template-columns: minmax(0, 1fr); } }
.qms-option {
    position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 12px 14px; border-radius: var(--qms-radius-sm);
    border: 1.5px solid var(--qms-line); background: var(--qms-surface);
    transition: border-color .15s ease, background .15s ease;
}
.qms-option:hover { border-color: var(--qms-primary); }
.qms-option input { position: absolute; opacity: 0; pointer-events: none; }
.qms-option-letter {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center; font-weight: 700; font-size: 14px;
    background: var(--qms-bg); color: var(--qms-muted); transition: inherit;
}
.qms-option-text { flex: 1; font-weight: 500; }
.qms-option-check {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; color: transparent;
    border: 1.5px solid var(--qms-line);
}
.qms-option:has(input:checked) { border-color: var(--qms-primary); background: var(--qms-primary-soft); }
.qms-option:has(input:checked) .qms-option-letter { background: var(--qms-primary); color: #fff; }
.qms-option:has(input:checked) .qms-option-check { background: var(--qms-primary); border-color: var(--qms-primary); color: #fff; }
.qms-option:has(input:focus-visible) { outline: 3px solid var(--qms-primary); outline-offset: 2px; }

.qms-text-input,
.qms-essay-input,
.qms-form-field input:not([type="radio"]):not([type="checkbox"]),
.qms-form-field select,
.qms-form-field textarea {
    width: 100%; padding: 12px 14px; font: 500 16px var(--qms-font); color: var(--qms-ink);
    border: 1.5px solid var(--qms-line); border-radius: var(--qms-radius-sm); background: var(--qms-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.qms-text-input:focus,
.qms-essay-input:focus,
.qms-form-field input:focus,
.qms-form-field select:focus,
.qms-form-field textarea:focus { outline: none; border-color: var(--qms-primary); box-shadow: 0 0 0 4px var(--qms-primary-soft); }
.qms-essay-input { resize: vertical; min-height: 120px; }
.qms-essay-input.qms-over-limit { border-color: var(--qms-live); }
.qms-word-count { display: block; text-align: right; font-size: 13px; color: var(--qms-muted); margin-top: 4px; }

.qms-rating-group { display: flex; flex-wrap: wrap; gap: 8px; }
.qms-rating-label { cursor: pointer; }
.qms-rating-label input { position: absolute; opacity: 0; }
.qms-rating-label span {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--qms-radius-sm);
    border: 1.5px solid var(--qms-line); font-weight: 700;
}
.qms-rating-label.qms-rating-selected span { background: var(--qms-accent); border-color: var(--qms-accent); color: var(--qms-ink); }

/* User info fields */
.qms-fields-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qms-form-field.qms-field-full,
.qms-form-heading,
.qms-form-paragraph { grid-column: 1 / -1; }
@media (max-width: 600px) { .qms-fields-grid { grid-template-columns: minmax(0, 1fr); } }
.qms-form-field { display: flex; flex-direction: column; gap: 6px; }
.qms-form-field > label { font-weight: 600; font-size: 15px; }
.qms-input-wrap { position: relative; }
.qms-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--qms-muted); pointer-events: none; }
.qms-input-icon svg { width: 18px; height: 18px; display: block; }
.qms-input-wrap input:not([type="radio"]):not([type="checkbox"]) { padding-left: 42px; }
.qms-form-heading h3 { font-family: var(--qms-font-head); margin: 4px 0 0; font-size: 18px; }
.qms-form-paragraph { color: var(--qms-muted); }
.qms-radio-group,
.qms-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.qms-option-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.qms-option-label input { accent-color: var(--qms-primary); width: 18px; height: 18px; }
.qms-form-field input.qms-input-error,
.qms-form-field select.qms-input-error,
.qms-form-field textarea.qms-input-error { border-color: var(--qms-live); }

.qms-inline-error { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--qms-live); font-size: 14px; font-weight: 600; }
.qms-form-error {
    display: none; margin-bottom: 16px; padding: 14px 18px; border-radius: var(--qms-radius-sm);
    background: var(--qms-live-soft); color: var(--qms-live); font-weight: 600; border: 1px solid rgba(229,72,77,.3);
}

/* Submit */
.qms-submit-bar { margin: 0; }
.qms-submit-btn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
    padding: 16px 24px; border: 0; border-radius: var(--qms-radius-sm);
    font: 700 18px var(--qms-font); color: #fff; background: var(--qms-primary);
    box-shadow: 0 8px 20px rgba(91,61,245,.3); transition: background .2s ease, transform .1s ease;
}
.qms-submit-btn:hover { background: var(--qms-primary-ink); }
.qms-submit-btn:active { transform: translateY(1px); }
.qms-submit-btn:disabled { opacity: .7; cursor: progress; }

/* Result */
.qms-result-container {
    text-align: center; padding: 40px 24px; background: var(--qms-surface);
    border: 1px solid var(--qms-line); border-radius: var(--qms-radius); box-shadow: var(--qms-shadow);
}
.qms-success-icon {
    width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
    display: grid; place-items: center; font-size: 30px; font-weight: 700;
    background: var(--qms-success-soft); color: var(--qms-success);
}
.qms-success-title { font-family: var(--qms-font-head); font-size: 24px; margin: 0 0 6px; }
.qms-success-message { color: var(--qms-muted); margin: 0; }
.qms-time-expired-notice {
    margin-bottom: 14px; padding: 12px 16px; border-radius: var(--qms-radius-sm);
    background: var(--qms-accent-soft); color: #9a6200; text-align: center;
}

/* ── Right rail: timer, prize, rules ─────────────────────────────────────── */
.qms-sb-card { padding: 20px; }
.qms-sb-head { font-size: 17px; margin-bottom: 14px; }
.qms-sb-body { color: var(--qms-ink); line-height: 1.7; }
.qms-sb-body > :first-child { margin-top: 0; }
.qms-sb-body > :last-child { margin-bottom: 0; }
.qms-sb-body ul, .qms-sb-body ol { padding-left: 20px; }

.qms-sb-prize { background: linear-gradient(180deg, var(--qms-accent-soft), var(--qms-surface) 60%); border-color: #ffe2a8; }

.qms-sb-timer { border-top: 4px solid var(--qms-live); }
.qms-sb-timer.qms-timer-upcoming { border-top-color: var(--qms-upcoming); }
.qms-sb-timer.qms-timer-ended    { border-top-color: var(--qms-muted); }
.qms-sb-live-dot,
.qms-sb-upcoming-dot { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; }
.qms-sb-live-dot { background: var(--qms-live); color: var(--qms-live); animation: qms-pulse 1.6s infinite; }
.qms-sb-upcoming-dot { background: var(--qms-upcoming); }

.qms-sb-timer-boxes { display: flex; align-items: stretch; gap: 4px; }
.qms-sb-unit {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 2px; border-radius: var(--qms-radius-sm); background: var(--qms-bg);
}
.qms-sb-unit .qms-cd-num { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.qms-sb-unit .qms-cd-lbl { font-size: 12px; color: var(--qms-muted); }
.qms-sb-sep { align-self: center; font-weight: 700; color: var(--qms-muted); }
.qms-sb-timer.qms-warning .qms-sb-unit { background: var(--qms-live-soft); color: var(--qms-live); }

.qms-timer-ended-inner { text-align: center; }
.qms-timer-ended-icon { width: 44px; height: 44px; margin: 0 auto 8px; color: var(--qms-muted); }
.qms-timer-ended-label { font-weight: 700; font-size: 17px; }
.qms-timer-ended-date { color: var(--qms-muted); font-size: 14px; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    .qms-arc-card, .qms-option, .qms-q-progress-fill { transition: none; }
    .qms-badge-pulse, .qms-sb-live-dot, .qms-arc-stat-dot-live, .qms-hero-badge::before { animation: none; }
}

/* Track number shown after a successful submission */
.qms-track {
    margin: 22px auto 0; max-width: 440px; padding: 16px 16px 14px; border-radius: 16px; text-align: center;
    background: linear-gradient(180deg, var(--qms-primary-soft, #efeaff), #fff);
    border: 1.5px dashed color-mix(in srgb, var(--qms-primary, #6d4dff) 45%, transparent);
}
.qms-track__label { display: block; font-size: 13px; font-weight: 700; color: var(--qms-muted); margin-bottom: 8px; }
.qms-track__row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.qms-track__code {
    font: 800 clamp(18px, 5vw, 22px)/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em;
    color: var(--qms-ink); background: #fff; padding: 8px 14px; border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--qms-line); user-select: all; word-break: break-all;
}
.qms-track__copy {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px;
    border: 0; border-radius: 999px; cursor: pointer; font: 700 14px var(--qms-font); color: #fff;
    background: var(--qms-primary, #6d4dff); box-shadow: 0 8px 18px -6px rgba(109,77,255,.55);
}
.qms-track__copied { display: none; }
.qms-track__copy.is-copied { background: var(--qms-success); }
.qms-track__copy.is-copied .qms-track__copy-txt { display: none; }
.qms-track__copy.is-copied .qms-track__copied { display: inline; }
.qms-track__note { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--qms-muted); }