/* Sabea Broker Portal — Support → Broker Survey */
.sv-wrap { max-width: 1120px; margin: 0 auto; padding: 8px 4px 40px; }
.sv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sv-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #3a5f8a; background: rgba(58,95,138,.12); display: inline-block; padding: 2px 9px; border-radius: 999px; margin-bottom: 8px; }
.sv-title { font-size: 22px; margin: 0 0 4px; color: #12153D; }
.sv-sub { color: #6c6c6c; font-size: 13px; margin: 0; max-width: 680px; line-height: 1.5; }
.sv-controls label { font-size: 12.5px; color: #6c6c6c; display: flex; align-items: center; gap: 6px; }
.sv-controls select { font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid #e5e3dc; border-radius: 7px; background: #fff; color: #12153D; }
.sv-cycname { font-size: 13px; font-weight: 600; color: #12153D; }

.sv-btn { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 8px; border: 1px solid #e5e3dc; background: #fff; color: #12153D; cursor: pointer; }
.sv-btn:disabled { opacity: .5; cursor: not-allowed; }
.sv-primary { background: #12153D; color: #fff; border-color: #12153D; }
.sv-mini { font: inherit; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; border: 1px solid #e5e3dc; background: #fff; color: #12153D; cursor: pointer; }
.sv-mini:disabled { opacity: .4; cursor: not-allowed; }

.sv-st { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; text-transform: capitalize; }
.sv-st-submitted { background: rgba(47,158,95,.14); color: #217a4a; }
.sv-st-draft { background: rgba(201,168,76,.2); color: #8a6d1f; }
.sv-st-none { background: rgba(18,21,61,.08); color: #9a9a9a; }
.sv-when { font-size: 11px; color: #9a9a9a; }

/* Admin cards */
.sv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.sv-card { background: #fff; border: 1px solid #e9e6dd; border-radius: 14px; padding: 16px; }
.sv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.sv-card-name { font-size: 16px; font-weight: 700; color: #12153D; }
.sv-card-meta { display: flex; align-items: center; gap: 8px; }
.sv-sectiles { display: flex; gap: 8px; margin-bottom: 10px; }
.sv-tile { flex: 1; background: #f8f6f0; border: 1px solid #eeebe2; border-radius: 10px; padding: 10px; text-align: center; }
.sv-tile-v { font-size: 20px; font-weight: 800; color: #12153D; line-height: 1; }
.sv-tile-l { font-size: 10.5px; color: #8a8a8a; margin-top: 4px; }
.sv-note-read { font-size: 12.5px; color: #12153D; background: #f8f6f0; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.sv-note-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9a9a9a; margin-right: 6px; }

.sv-details { margin-top: 8px; }
.sv-details summary { font-size: 12px; color: #6c6c6c; cursor: pointer; padding: 4px 0; }
.sv-broker-row { border-top: 1px solid #f2f0ea; padding: 8px 0; }
.sv-broker-head { display: flex; justify-content: space-between; align-items: baseline; }
.sv-broker-name { font-size: 13px; font-weight: 700; color: #12153D; }
.sv-broker-avg { font-size: 15px; font-weight: 800; color: #217a4a; }
.sv-of { font-size: 11px; color: #9a9a9a; font-weight: 600; }
.sv-alist { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.sv-a { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.sv-a-q { font-size: 12px; color: #6c6c6c; line-height: 1.4; }
.sv-a-v { display: flex; align-items: center; gap: 8px; justify-content: flex-end; max-width: 62%; }
.sv-score-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; background: #12153D; color: #fff; font-size: 12px; font-weight: 700; padding: 0 5px; }
.sv-a-text { font-size: 12px; color: #12153D; font-style: italic; text-align: right; }
.sv-a-dim { color: #c4bdb0; }

/* Support stepper */
.sv-stepper { background: #fff; border: 1px solid #e9e6dd; border-radius: 14px; padding: 18px; }
.sv-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sv-progress-l { font-size: 12px; font-weight: 600; color: #8a8a8a; }
.sv-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-dot { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid #e5e3dc; background: #fff; color: #9a9a9a; cursor: pointer; }
.sv-dot.is-on { border-color: #12153D; color: #12153D; background: #f3f1ea; }

.sv-subject-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sv-subject-name { font-size: 19px; font-weight: 800; color: #12153D; }
.sv-subject-meta { font-size: 11.5px; color: #9a9a9a; }
.sv-blurb { font-size: 12.5px; color: #6c6c6c; margin: 4px 0 8px; }
.sv-samples { font-size: 11.5px; color: #6c6c6c; line-height: 1.9; margin-bottom: 6px; }
.sv-samples-l { color: #9a9a9a; }
.sv-sample { display: inline-block; background: #f6f4ee; border: 1px solid #ece9e0; border-radius: 6px; padding: 1px 7px; margin: 0 3px 3px 0; color: #12153D; }

.sv-questions { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.sv-q { border: 1px solid #f0eee7; border-radius: 10px; padding: 12px 14px; }
.sv-q-label { font-size: 13.5px; font-weight: 600; color: #12153D; line-height: 1.4; }
.sv-q-hint { font-size: 11.5px; color: #9a9a9a; margin-top: 3px; }
.sv-scale { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap; }
.sv-score { width: 38px; height: 38px; border-radius: 9px; border: 1px solid #e5e3dc; background: #fff; color: #12153D; font-size: 15px; font-weight: 700; cursor: pointer; }
.sv-score:hover:not(:disabled) { border-color: #3a5f8a; }
.sv-score.is-on { background: #12153D; color: #fff; border-color: #12153D; }
.sv-score:disabled { opacity: .55; cursor: default; }
.sv-scale-ends { font-size: 11px; color: #b0a89a; margin-left: 6px; }
.sv-qcomment, .sv-qtext { width: 100%; font: inherit; font-size: 12.5px; padding: 7px 9px; border: 1px solid #e5e3dc; border-radius: 7px; margin-top: 6px; color: #12153D; box-sizing: border-box; resize: vertical; }

.sv-note-wrap { margin-top: 14px; }
.sv-note-wrap .sv-note-l { display: block; font-size: 12px; text-transform: none; letter-spacing: 0; color: #6c6c6c; margin-bottom: 4px; font-weight: 400; }
.sv-note { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid #e5e3dc; border-radius: 8px; color: #12153D; resize: vertical; box-sizing: border-box; }

.sv-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #f0eee7; flex-wrap: wrap; }
.sv-nav { display: flex; gap: 8px; }
.sv-act { display: flex; align-items: center; gap: 8px; }
.sv-submitted { font-size: 12.5px; color: #217a4a; font-weight: 600; }
.sv-gate-hint { font-size: 12px; color: #3a5f8a; background: rgba(58,95,138,.10); border-radius: 8px; padding: 7px 11px; margin-top: 14px; }
.sv-qcomment.sv-need { border-color: #b9cbe0; background: #f7fafd; }

.sv-sent-on { color: #217a4a; font-weight: 600; font-size: 11.5px; }
.sv-assign-wrap { background: #fff; border: 1px solid #e9e6dd; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.sv-assign-title { font-size: 13px; font-weight: 700; color: #12153D; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-mini2 { font-size: 11px; padding: 4px 9px; }
.sv-assign-subs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sv-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #12153D; background: #f8f6f0; border: 1px solid #eee7d9; border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.sv-chk input { margin: 0; }
.sv-chk-meta { color: #9a9a9a; font-size: 11px; text-transform: capitalize; }
.sv-assign-act { display: flex; align-items: center; flex-wrap: wrap; }
.sv-done { color: #217a4a; font-size: 17px; font-weight: 700; text-align: center; padding: 48px 16px; background: #fff; border: 1px solid rgba(47,158,95,.3); border-radius: 14px; line-height: 1.5; }

/* Preview (what Support completes) */
.sv-preview-wrap { background: #fff; border: 1px solid #e9e6dd; border-radius: 12px; padding: 6px 14px 12px; margin-bottom: 16px; }
.sv-preview { padding-top: 8px; }
.sv-psec { margin-bottom: 16px; }
.sv-psec-t { font-size: 14px; font-weight: 700; color: #12153D; margin-bottom: 2px; }
.sv-psec-note { font-weight: 400; font-size: 11.5px; color: #8a8a8a; }
.sv-psec-b { font-size: 12px; color: #6c6c6c; margin-bottom: 8px; }
.sv-pq { border: 1px solid #f0eee7; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.sv-pq-label { font-size: 13px; font-weight: 600; color: #12153D; line-height: 1.4; }
.sv-pq-hint { font-size: 11.5px; color: #9a9a9a; margin-top: 3px; }
.sv-pscale { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sv-pscore { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e5e3dc; background: #faf9f5; color: #9a9a9a; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sv-pcomment-note, .sv-ptext { font-size: 11.5px; color: #9a9a9a; }
.sv-ptext { margin-top: 8px; border: 1px dashed #e5e3dc; border-radius: 7px; padding: 7px 9px; }

.sv-loading, .sv-empty, .sv-none { color: #6c6c6c; font-size: 13px; padding: 24px 4px; text-align: center; }
.sv-none { padding: 12px; }

@media (max-width: 560px) { .sv-score { width: 34px; height: 34px; } .sv-sectiles { flex-wrap: wrap; } }