/* Math Solver */
.ms-wrap { display: flex; flex-direction: column; gap: 16px; }
.ms-label { display: block; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 6px; }
.ms-select, .ms-field, .ms-area { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 12px; background: #ffffff; color: #0f172a; font-size: 16px; }
.ms-select { min-height: 48px; padding: 8px 12px; }
.ms-field { min-height: 48px; padding: 8px 12px; }
.ms-area { min-height: 76px; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; line-height: 1.5; resize: vertical; }
.ms-select:focus-visible, .ms-field:focus-visible, .ms-area:focus-visible, .ms-btn:focus-visible, .ms-chip:focus-visible, .ms-primary:focus-visible { outline: 3px solid #6366f1; outline-offset: 2px; }
.ms-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ms-row > div { flex: 1 1 140px; min-width: 0; }
.ms-hint { font-size: 13px; color: #64748b; margin: 6px 0 0; line-height: 1.5; }
.ms-scope { font-size: 13px; color: #475569; background: #f1f5f9; border-radius: 12px; padding: 10px 12px; line-height: 1.5; margin: 0; }
.ms-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-examples-title { font-size: 12px; font-weight: 700; color: #64748b; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.ms-chip { min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.ms-chip:hover { background: #e0e7ff; }
.ms-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-primary { flex: 1 1 200px; min-height: 52px; padding: 12px 20px; border-radius: 14px; border: 0; background: #4f46e5; color: #ffffff; font-size: 16px; font-weight: 700; cursor: pointer; }
.ms-primary:hover { background: #4338ca; }
.ms-btn { min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #f1f5f9; color: #334155; font-size: 14px; font-weight: 600; cursor: pointer; }
.ms-btn:hover { background: #e2e8f0; }
.ms-output { border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; background: #f8fafc; min-height: 96px; }
.ms-empty { margin: 0; font-size: 14px; color: #64748b; }
.ms-read { margin: 0 0 12px; font-size: 13px; color: #475569; overflow-wrap: anywhere; }
.ms-read code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: #0f172a; background: #e2e8f0; padding: 2px 6px; border-radius: 6px; }
.ms-block { margin: 0 0 14px; }
.ms-block-title { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; margin: 0 0 6px; }
.ms-answer-line { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 19px; font-weight: 600; color: #0f172a; padding: 4px 0; overflow-wrap: anywhere; line-height: 1.45; }
.ms-pre { margin: 0; padding: 12px; border-radius: 10px; background: #ffffff; border: 1px solid #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; overflow-x: auto; color: #0f172a; }
.ms-list { margin: 0; padding-left: 22px; font-size: 14px; color: #334155; line-height: 1.6; }
.ms-list li { margin-bottom: 4px; overflow-wrap: anywhere; }
.ms-check li::marker { color: #059669; }
.ms-note { margin: 0; font-size: 13px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.ms-error { border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.ms-error p { margin: 4px 0 0; color: #7f1d1d; }
.ms-out-actions { display: flex; gap: 8px; }
.ms-ai { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border-top: 1px dashed #cbd5e1; padding-top: 14px; }
.ms-ai-btn { min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 1px dashed #94a3b8; background: #f1f5f9; color: #64748b; font-size: 14px; font-weight: 700; cursor: not-allowed; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; flex-wrap: wrap; }
.ms-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: #fde68a; color: #78350f; border-radius: 999px; padding: 2px 8px; }
.ms-ai-note { font-size: 12px; color: #64748b; margin: 0; line-height: 1.5; }
.ms-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
#ms-solve:disabled { opacity: 0.5; cursor: not-allowed; }
#ms-clear { min-height: 52px; }

.dark .ms-label { color: #cbd5e1; }
.dark .ms-select, .dark .ms-field, .dark .ms-area { background: #0f172a; border-color: #475569; color: #f1f5f9; }
.dark .ms-hint, .dark .ms-empty, .dark .ms-ai-note, .dark .ms-examples-title { color: #94a3b8; }
.dark .ms-scope { background: #0f172a; color: #cbd5e1; }
.dark .ms-chip { background: #1e1b4b; border-color: #4338ca; color: #c7d2fe; }
.dark .ms-chip:hover { background: #312e81; }
.dark .ms-btn { background: #0f172a; border-color: #334155; color: #cbd5e1; }
.dark .ms-btn:hover { background: #334155; }
.dark .ms-output { background: #0f172a; border-color: #334155; }
.dark .ms-read { color: #94a3b8; }
.dark .ms-read code { background: #1e293b; color: #f1f5f9; }
.dark .ms-answer-line, .dark .ms-pre { color: #f8fafc; }
.dark .ms-pre { background: #1e293b; border-color: #334155; }
.dark .ms-block-title { color: #94a3b8; }
.dark .ms-list { color: #cbd5e1; }
.dark .ms-note { background: #422006; border-color: #854d0e; color: #fde68a; }
.dark .ms-error { background: #450a0a; border-color: #991b1b; color: #fecaca; }
.dark .ms-error p { color: #fca5a5; }
.dark .ms-ai { border-top-color: #475569; }
.dark .ms-ai-btn { background: #1e293b; border-color: #64748b; color: #94a3b8; }
.dark .ms-badge { background: #78350f; color: #fde68a; }