.qs-dialog { width:min(760px,calc(100vw - 24px)); max-height:90dvh; padding:0; border:1px solid var(--stroke,#dbe0eb); border-radius:20px; background:var(--panel,#fff); color:var(--text,#182234); box-sizing:border-box; overflow:hidden; }
.qs-dialog::backdrop { background:#10182799; }
.qs-dialog[open] { display:flex; flex-direction:column; }
.qs-dialog>header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; border-bottom:1px solid var(--stroke,#dbe0eb); flex:none; }
.qs-dialog>header>div { display:flex; align-items:center; gap:10px; }
.qs-dialog:not(.qs-editor)>header { background:color-mix(in srgb,var(--brand,#8288ff) 6%,var(--panel,#fff)); }
.qs-dialog h2 { margin:0; font-size:19px; }
.qs-dialog button { cursor:pointer; font:inherit; min-height:44px; }
.qs-dialog [data-close] { min-width:44px; border:0; border-radius:10px; background:var(--panel2,#eef1f6); color:inherit; }
.qs-pro { display:inline-flex; align-items:center; flex-shrink:0; padding:5px 7px; border:1px solid color-mix(in srgb,var(--brand,#635bd9) 24%,transparent); border-radius:6px; background:color-mix(in srgb,var(--brand,#635bd9) 9%,transparent); color:var(--brand,#635bd9); font-size:10px; line-height:1; font-weight:800; letter-spacing:.08em; }
.qs-content { padding:20px; overflow:auto; min-height:110px; overscroll-behavior:contain; overflow-anchor:none; }
.qs-text { --qs-ink:color-mix(in srgb,var(--brand,#635bd9) 80%,var(--text,#182234)); margin:0; min-width:0; text-align:left; white-space:normal; overflow-wrap:anywhere; font-size:16px; line-height:1.8; }
.qs-paragraph { margin:0 0 18px; white-space:pre-wrap; }
.qs-paragraph:last-child { margin-bottom:0; }
.qs-term { color:var(--qs-ink); font-weight:650; }
.qs-section-label { color:var(--qs-ink); font-weight:750; }
.qs-answer { margin:0 0 20px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--brand,#635bd9) 22%,var(--stroke,#dbe0eb)); border-inline-start:3px solid var(--brand,#635bd9); border-radius:4px 12px 12px 4px; background:color-mix(in srgb,var(--brand,#635bd9) 7%,var(--panel,#fff)); white-space:pre-wrap; }
.qs-answer:last-child { margin-bottom:0; }
.qs-answer-label { display:block; margin-bottom:9px; color:var(--qs-ink); font-size:12px; line-height:1.5; font-weight:700; }
.qs-answer-value { display:flex; align-items:baseline; gap:8px; min-width:0; color:var(--text,#182234); font-size:16px; font-weight:650; line-height:1.65; }
.qs-answer-value>span { min-width:0; }
.qs-answer-choice { display:inline-flex; flex-shrink:0; justify-content:center; min-width:32px; box-sizing:border-box; padding:3px 7px; border-radius:8px; background:color-mix(in srgb,var(--brand,#635bd9) 16%,var(--panel,#fff)); color:var(--qs-ink); font-size:15px; font-weight:800; }
.qs-content .qi-viewer+.qs-text,.qs-content .qs-source-image+.qs-text,.qs-inline-content .qi-viewer+.qs-text { margin-top:20px; }
.qs-loading { display:flex; gap:12px; align-items:center; }
.qs-loading>span { width:18px; height:18px; border:2px solid #8884; border-top-color:currentColor; border-radius:50%; animation:qs-spin .7s linear infinite; }
.qs-editor-label { display:grid; gap:8px; margin:18px 0 8px; font-size:14px; font-weight:600; }
.qs-editor { background:#111827; color:#e5e7eb; --stroke:#334155; --panel2:#1f2937; --muted:#94a3b8; --text:#e5e7eb; --panel:#111827; --brand:#a5b4fc; text-align:left; }
.qs-editor textarea { width:100%; min-height:130px; resize:vertical; padding:12px; border:1px solid var(--stroke,#586174); border-radius:10px; background:var(--panel2,#182234); color:inherit; box-sizing:border-box; font:inherit; }
.qs-editor input[type=file] { max-width:100%; color:inherit; }
.qs-preview { display:block; max-width:100%; max-height:260px; object-fit:contain; margin:12px auto; background:#fff; }
.qs-preview[hidden] { display:none; }
.qs-editor footer { display:flex; justify-content:flex-end; gap:12px; margin-top:18px; }
.qs-question-id { display:block; font-size:12px; overflow-wrap:anywhere; color:var(--muted,#91a0b6); }
.qs-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.qs-panel-heading h2 { margin:0; font-size:24px; }
.qs-panel-filters { display:grid; grid-template-columns:1fr 1fr 1fr 1.3fr; gap:12px; }
.qs-panel-filters label { display:grid; gap:6px; font-size:13px; min-width:0; }
.qs-panel-filters input,.qs-panel-filters select { width:100%; min-width:0; min-height:44px; box-sizing:border-box; }
.qs-panel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.qs-question-card { min-width:0; border:1px solid #334155; background:#111827; color:#e5e7eb; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; transition:border-color 200ms,background-color 200ms; }
.qs-question-card.is-solved { border-color:#338b65; background:#102c24; }
.qs-card-top { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:12px; }
.qs-card-top [data-status] { color:#aab7c9; }
.is-solved .qs-card-top [data-status] { color:#8be2b5; font-weight:700; }
.qs-card-preview { height:220px; display:flex; align-items:center; justify-content:center; background:#fff; color:#1e293b; border-radius:8px; overflow:auto; }
.qs-card-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.qs-card-preview p { padding:14px; margin:0; max-height:100%; overflow:auto; overflow-wrap:anywhere; }
.qs-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.qs-card-actions button { flex:1; min-height:44px; }
.qs-question-card [data-error]:empty { display:none; }
.qs-panel-pages { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.qs-panel-pages [data-page] { font-size:13px; text-align:center; }
.qs-inline { width:100%; box-sizing:border-box; margin:18px 0 12px; border:1px solid color-mix(in srgb,var(--brand,#635bd9) 24%,var(--stroke,#dbe0eb)); border-radius:16px; background:var(--panel,#fff); overflow:hidden; text-align:left; }
.qs-inline-toggle { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; min-height:76px; padding:14px 16px; border:0; background:color-mix(in srgb,var(--brand,#635bd9) 5%,var(--panel,#fff)); color:var(--text,#182234); font:inherit; text-align:left; cursor:pointer; transition:background-color 200ms; }
.qs-inline-toggle .qs-toggle-copy { flex:1; min-width:0; display:grid; gap:4px; }
.qs-symbol { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:11px; color:var(--brand,#635bd9); background:color-mix(in srgb,var(--brand,#635bd9) 12%,var(--panel,#fff)); }
.qs-symbol svg { width:23px; height:23px; }
.qs-inline-toggle strong { font-size:15px; }
.qs-inline-toggle small { font-size:12px; color:var(--muted,#64748b); }
.qs-inline-toggle:disabled { cursor:default; opacity:.65; }
.qs-inline-toggle:focus-visible { outline:2px solid var(--brand,#635bd9); outline-offset:-3px; }
.qs-inline-toggle[aria-expanded=true] { background:color-mix(in srgb,var(--brand,#635bd9) 9%,var(--panel,#fff)); }
@media(hover:hover) { .qs-inline-toggle:hover:not(:disabled) { background:color-mix(in srgb,var(--brand,#635bd9) 11%,var(--panel,#fff)); } }
.qs-chevron { display:grid; place-items:center; width:24px; height:24px; flex-shrink:0; color:var(--brand,#635bd9); transition:transform 200ms; }
.qs-chevron svg { width:20px; height:20px; }
.qs-inline-toggle[aria-expanded=true] .qs-chevron { transform:rotate(180deg); }
.qs-inline-content { padding:20px 18px; border-top:1px solid color-mix(in srgb,var(--brand,#635bd9) 15%,var(--stroke,#dbe0eb)); overflow-wrap:anywhere; }
.qs-inline-content:not([hidden]) { animation:qs-reveal 200ms ease-out; }
.qs-inline-content[hidden] { display:none; }
.qs-inline-content .qi-viewer { width:100%; }
.cg-solution-button { display:flex; align-items:center; gap:8px; width:100%; min-height:46px; margin-top:14px; padding:12px 14px; border:1px solid var(--stroke,#dbe0eb); border-radius:12px; font:inherit; font-weight:650; background:var(--panel,#fff); color:var(--text,#182234); cursor:pointer; }
.cg-solution-button .qs-pro { margin-left:auto; }
.qs-review { width:100%; margin:18px 0; text-align:left; }
.qs-review summary { min-height:44px; padding:12px 0; cursor:pointer; font-weight:650; }
.qs-review>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.qs-review .cg-solution-button { margin:0; font-size:14px; text-align:left; }
@keyframes qs-spin { to { transform:rotate(360deg); } }
@keyframes qs-reveal { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media(max-width:600px) { .qs-dialog { margin:auto auto max(8px,env(safe-area-inset-bottom)); max-height:90dvh; } .qs-content { padding:16px; } }
@media(max-width:380px) { .qs-inline-toggle { gap:8px; padding:12px; } .qs-symbol { width:32px; height:34px; border-radius:9px; } .qs-inline-content { padding:16px 12px; } .qs-answer { padding:12px; } }
@media(prefers-reduced-motion:reduce) { .qs-loading>span,.qs-inline-content:not([hidden]) { animation:none; } .qs-inline-toggle { transition:none; } }
@media(max-width:1050px) { .qs-panel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .qs-panel-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .qs-panel-grid { grid-template-columns:minmax(0,1fr); } .qs-panel-filters { grid-template-columns:minmax(0,1fr); } .qs-panel-pages { gap:8px; } }
@media(prefers-reduced-motion:reduce) { .qs-question-card,.qs-chevron { transition:none; } }