/* Visual quiz choices use dashboard chrome while the examples use the quiz's own colors. */
#style-visuals { --qsc-quiz-primary:#29201b; --qsc-quiz-muted:#8d6958; --qsc-quiz-bg:#faf6ef; display:grid; gap:20px; min-width:0; }
#style-visuals .qsc-intro h2,#style-visuals .qsc-border-intro h2 { font-size:15px; font-weight:700; }
#style-visuals .qsc-help { margin:4px 0 0; color:var(--muted,#6b6b6b); font-size:12.5px; line-height:1.5; }
#style-visuals .qsc-group,#style-visuals .qsc-border-panel { min-width:0; padding:16px; border:1px solid var(--border,#e9e9e9); border-radius:12px; background:var(--card,#fbfbf9); }
#style-visuals .qsc-group-title,#style-visuals .qsc-border-heading { margin:0; font-size:13px; font-weight:700; }
#style-visuals .qsc-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
#style-visuals .qsc-card { min-width:0; padding:0; overflow:hidden; border:1px solid var(--input,#d4d4d4); border-radius:10px; background:var(--card,#fbfbf9); color:var(--foreground,#111); text-align:left; transition:border-color .2s,box-shadow .2s; }
#style-visuals .qsc-card:hover,#style-visuals .qsc-border-card:hover { border-color:var(--primary,#2f6feb); }
#style-visuals .qsc-card[aria-checked=true],#style-visuals .qsc-border-card[aria-checked=true] { border-color:var(--primary,#2f6feb); box-shadow:0 0 0 1px var(--primary,#2f6feb); }
#style-visuals :is(.qsc-card,.qsc-border-card,.qsc-color-reset):focus-visible { outline:2px solid var(--primary,#2f6feb); outline-offset:2px; }
#style-visuals .qsc-card-text { display:flex; flex-direction:column; gap:2px; padding:9px 10px 10px; font-size:12.5px; line-height:1.3; }
#style-visuals .qsc-card-description { color:var(--muted,#6b6b6b); font-size:11.5px; font-weight:400; }
#style-visuals .qsc-demo { display:flex; position:relative; min-width:0; height:92px; padding:12px; overflow:hidden; background:var(--qsc-quiz-bg); color:var(--qsc-quiz-primary); }
#style-visuals .qsc-demo--template { flex-direction:column; align-items:flex-start; justify-content:space-between; }
#style-visuals .qsc-demo-eyebrow { font:600 8px/1.2 Arial,sans-serif; letter-spacing:.1em; }
#style-visuals .qsc-demo-heading { font:400 clamp(15px,1.7vw,23px)/1.1 Georgia,serif; letter-spacing:-.03em; }
#style-visuals .qsc-demo--template-modern .qsc-demo-heading { font-family:Arial,sans-serif; font-weight:600; }
#style-visuals .qsc-demo--template-botanical .qsc-demo-heading { font-style:italic; }
#style-visuals .qsc-demo--template-editorial .qsc-demo-heading { font-size:clamp(18px,2vw,28px); }
#style-visuals .qsc-demo-line { width:36px; height:3px; border-radius:2px; background:var(--qsc-quiz-primary); }
#style-visuals .qsc-demo--layout { align-content:center; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; }
#style-visuals .qsc-layout-item { display:flex; align-items:center; justify-content:center; width:42%; height:22px; border:1px solid color-mix(in srgb,var(--qsc-quiz-primary) 25%,transparent); border-radius:5px; }
#style-visuals .qsc-layout-line { width:50%; height:3px; border-radius:3px; background:color-mix(in srgb,var(--qsc-quiz-primary) 50%,transparent); }
#style-visuals .qsc-demo--layout-tags .qsc-layout-item { width:30%; height:25px; }
#style-visuals .qsc-demo--layout-list .qsc-layout-item { width:80%; height:12px; justify-content:flex-start; padding-left:8px; }
#style-visuals .qsc-demo--layout-list .qsc-layout-item:nth-child(n+4) { display:none; }
#style-visuals .qsc-demo--layout-circles .qsc-layout-item { width:20%; height:52px; flex-direction:column; gap:4px; border:0; }
#style-visuals .qsc-layout-circle { width:25px; height:25px; border-radius:50%; background:color-mix(in srgb,var(--qsc-quiz-muted) 30%,var(--qsc-quiz-bg)); }
#style-visuals .qsc-demo--input { align-items:center; justify-content:center; }
#style-visuals .qsc-input-choice { display:flex; align-items:center; justify-content:space-between; gap:8px; width:90%; min-height:46px; padding:8px 10px; border:1px solid var(--qsc-quiz-primary); border-radius:8px; background:color-mix(in srgb,var(--qsc-quiz-primary) 8%,var(--qsc-quiz-bg)); font-size:11px; font-weight:600; }
#style-visuals .qsc-input-check { display:grid; place-items:center; width:18px; height:18px; flex:none; border-radius:50%; background:var(--qsc-quiz-primary); color:var(--qsc-quiz-bg); font-size:10px; }
#style-visuals .qsc-demo--input-ring .qsc-input-choice { box-shadow:0 0 0 3px color-mix(in srgb,var(--qsc-quiz-primary) 18%,transparent); }
#style-visuals .qsc-demo--input-underline .qsc-input-choice { border:0; border-bottom:2px solid var(--qsc-quiz-primary); border-radius:4px; }
#style-visuals .qsc-demo--input-faded .qsc-input-choice { border-color:transparent; background:color-mix(in srgb,var(--qsc-quiz-primary) 17%,var(--qsc-quiz-bg)); }
#style-visuals .qsc-demo--display { align-items:center; justify-content:center; background:color-mix(in srgb,var(--qsc-quiz-muted) 10%,var(--qsc-quiz-bg)); }
#style-visuals .qsc-display-screen { position:relative; display:block; width:100%; height:70px; overflow:hidden; border:1px solid color-mix(in srgb,var(--qsc-quiz-primary) 20%,transparent); border-radius:5px; background:var(--qsc-quiz-bg); }
#style-visuals .qsc-display-bar { display:block; height:8px; border-bottom:1px solid color-mix(in srgb,var(--qsc-quiz-primary) 14%,transparent); }
#style-visuals .qsc-display-quiz { position:absolute; inset:16px 18% 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:var(--qsc-quiz-bg); }
#style-visuals .qsc-demo--display-inline .qsc-display-quiz { inset:28px 8% 5px; background:color-mix(in srgb,var(--qsc-quiz-muted) 12%,var(--qsc-quiz-bg)); }
#style-visuals .qsc-demo--display-popup .qsc-display-screen,#style-visuals .qsc-demo--display-fullscreen .qsc-display-screen { background:color-mix(in srgb,var(--qsc-quiz-primary) 30%,var(--qsc-quiz-bg)); }
#style-visuals .qsc-demo--display-popup .qsc-display-quiz { inset:14px 20% 6px; border-radius:5px; }
#style-visuals .qsc-demo--display-fullscreen .qsc-display-quiz { inset:0; }
#style-visuals .qsc-mini-title,#style-visuals .qsc-mini-line { display:block; width:48%; height:4px; border-radius:4px; background:var(--qsc-quiz-primary); }
#style-visuals .qsc-mini-line { width:62%; height:3px; opacity:.45; }
#style-visuals .qsc-mini-button { width:30%; height:9px; border-radius:8px; background:var(--qsc-quiz-primary); }
#style-visuals .qsc-demo--media { gap:7px; align-items:stretch; }
#style-visuals .qsc-media-image,#style-visuals .qsc-choice-image,#style-visuals .qsc-product-image,#style-visuals .qsc-border-product-image { display:grid; place-items:center; flex:none; background:color-mix(in srgb,var(--qsc-quiz-muted) 25%,var(--qsc-quiz-bg)); color:var(--qsc-quiz-primary); font:600 7px/1 Arial,sans-serif; letter-spacing:.06em; }
#style-visuals .qsc-media-image { width:43%; border-radius:4px; }
#style-visuals .qsc-media-body { flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; }
#style-visuals .qsc-demo--media-top { flex-direction:column; }
#style-visuals .qsc-demo--media-top .qsc-media-image { width:100%; height:42%; }
#style-visuals .qsc-demo--media-top .qsc-media-body { align-items:center; gap:4px; }
#style-visuals .qsc-demo--choice { align-items:center; justify-content:center; }
#style-visuals .qsc-choice-card { display:flex; align-items:center; gap:7px; width:90%; height:54px; padding:5px; border:1px solid color-mix(in srgb,var(--qsc-quiz-primary) 25%,transparent); border-radius:6px; font-size:10px; font-weight:600; }
#style-visuals .qsc-choice-image { width:38px; height:38px; border-radius:5px; }
#style-visuals .qsc-demo--choice-icon .qsc-choice-image { width:42px; height:42px; border-radius:12px; }
#style-visuals .qsc-demo--choice-cover .qsc-choice-card { height:72px; padding:0; overflow:hidden; flex-direction:column; gap:0; align-items:stretch; }
#style-visuals .qsc-demo--choice-cover .qsc-choice-image { width:100%; height:45px; border-radius:0; }
#style-visuals .qsc-demo--choice-cover .qsc-choice-label { padding:3px 6px; }
#style-visuals .qsc-demo--product { gap:6px; justify-content:center; }
#style-visuals .qsc-product-card { flex:1; max-width:90px; overflow:hidden; border-radius:6px; background:color-mix(in srgb,var(--qsc-quiz-muted) 22%,var(--qsc-quiz-bg)); }
#style-visuals .qsc-product-image { width:100%; height:42px; }
#style-visuals :is(.qsc-product-image,.qsc-border-product-image) img { display:block; width:100%; height:100%; object-fit:contain; }
#style-visuals .qsc-product-copy { display:block; width:65%; height:4px; margin:8px; border-radius:3px; background:var(--qsc-quiz-primary); }
#style-visuals .qsc-demo--product-list { flex-direction:column; }
#style-visuals .qsc-demo--product-list .qsc-product-card { display:flex; width:100%; max-width:none; }
#style-visuals .qsc-demo--product-list .qsc-product-image { width:38%; height:auto; }
#style-visuals .qsc-demo--product-list .qsc-product-copy { width:32%; }
#style-visuals .qsc-border-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#style-visuals .qsc-border-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:10px; }
#style-visuals .qsc-border-card { display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:58px; padding:6px 3px; border:1px solid var(--input,#d4d4d4); border-radius:6px; background:var(--card,#fbfbf9); color:var(--foreground,#111); font-size:10px; line-height:1.2; text-align:center; overflow-wrap:anywhere; }
#style-visuals .qsc-border-swatch { width:70%; max-width:32px; border-top:2px solid var(--qsc-quiz-primary); }
#style-visuals .qsc-border-swatch--default { opacity:.35; }
#style-visuals .qsc-border-swatch--none { border-color:transparent; }
#style-visuals .qsc-border-swatch--dashed { border-style:dashed; }
#style-visuals .qsc-border-swatch--dotted { border-style:dotted; }
#style-visuals .qsc-border-preview { display:grid; place-items:center; min-height:100px; margin:12px 0 0; padding:10px; border-radius:8px; background:var(--qsc-quiz-bg); color:var(--qsc-quiz-primary); }
#style-visuals .qsc-border-object { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:100%; color:var(--qsc-quiz-primary); font-size:12px; font-weight:600; }
#style-visuals .qsc-border-object--button { min-width:130px; justify-content:center; padding:10px 16px; border:0 solid var(--qsc-quiz-primary); border-radius:999px; background:var(--qsc-quiz-primary); color:var(--qsc-quiz-bg); }
#style-visuals .qsc-border-object--answer { width:80%; padding:12px; border:1px solid color-mix(in srgb,var(--qsc-quiz-primary) 20%,transparent); border-radius:16px; background:color-mix(in srgb,var(--qsc-quiz-primary) 5%,var(--qsc-quiz-bg)); }
#style-visuals .qsc-border-check { display:grid; place-items:center; width:18px; height:18px; border:1px solid var(--qsc-quiz-primary); border-radius:50%; font-size:10px; }
#style-visuals .qsc-border-object--product { flex-direction:column; align-items:stretch; width:120px; overflow:hidden; border:0 solid var(--qsc-quiz-primary); border-radius:16px; background:color-mix(in srgb,var(--qsc-quiz-muted) 25%,var(--qsc-quiz-bg)); }
#style-visuals .qsc-border-product-image { width:100%; height:48px; }
#style-visuals .qsc-border-product-label { padding:0 8px 8px; font-size:10px; }
#style-visuals .qsc-border-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
#style-visuals .qsc-border-field,#style-visuals .qsc-color-label { font-size:12px; font-weight:600; }
#style-visuals .qsc-border-color { grid-column:1/-1; display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; }
#style-visuals .qsc-color-label { display:flex; align-items:center; gap:8px; }
#style-visuals .qsc-color-label input { width:30px; height:30px; padding:2px; border:1px solid var(--input,#d4d4d4); border-radius:6px; background:var(--card,#fbfbf9); cursor:pointer; }
#style-visuals .qsc-color-reset { min-height:30px; padding:0 8px; border:1px solid var(--input,#d4d4d4); border-radius:6px; background:var(--card,#fbfbf9); color:var(--foreground,#111); font-size:12px; font-weight:600; }
@media(max-width:1000px){#style-visuals .qsc-border-panels{grid-template-columns:1fr}#style-visuals .qsc-border-cards{max-width:560px}}
@media(max-width:600px){#style-visuals .qsc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}#style-visuals .qsc-group,#style-visuals .qsc-border-panel{padding:12px}#style-visuals .qsc-demo-heading{font-size:18px}#style-visuals .qsc-border-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){#style-visuals .qsc-card{transition:none}}