/*
 * Avatar Homework — admin styles.
 *
 * HW-specific CSS (sidebar, filter lists, question editor chrome, etc.) will
 * land here as it is extracted from admin-portal.js's inline style blocks
 * (e.g., hwqEnsureBankStyles).
 */

/* ===== Crispy brand tokens =====
 * Mirror the main plugin's portal CSS variables so HW sections share the
 * same palette without depending on a specific portal being loaded first.
 */
:root {
    --c-primary:   #1a4171;
    --c-primary-h: #0f2d5e;
    --c-primary-l: #daeeff;
    --c-blue:      #2E68A1;
    --c-blue-dk:   #1a4171;
    --c-blue-bg:   #daeeff;
    --c-blue-bd:   #8bccc8;
    --c-bg:        #EDF3F8;
    --c-panel:     #ffffff;
    --c-border:    #C8DCE8;
    --c-border2:   #A0C4D8;
    --c-ink:       #0f2d5e;
    --c-muted:     #3a6080;
    --c-faint:     #7a9ab8;
    --c-green:     #81c171;
    --c-teal:      #8bccc8;
    --c-yellow:    #fddd54;
    --c-pink:      #ec90b7;
    --c-amber:     #ff9130;
    --c-red:       #f53a33;
}

/* ===== JSXGraph SVG sizing override =====
 * Some plugins/themes (Tutor LMS, FontAwesome's icon resets, etc.) ship a
 * generic `svg { width: 1em; height: 1em }` rule for icon sizing, which
 * squashes our graph boards down to 16x16px even though JSXGraph wrote
 * width="954" / height="298" attributes on the element. Force the SVG to
 * fill its .jxgbox container regardless of any wider rule.
 */
.jxgbox > svg,
.jxgbox > svg.JSXGraphBoard,
[id^="ama-hwq-"] .jxgbox > svg,
[id^="ama-hwq-"] svg.JSXGraphBoard {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
}

.ama-hw-student-grade-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    padding: 5px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

.ama-hw-student-grade-red {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

.ama-hw-student-grade-yellow {
    background: #fef3c7 !important;
    border-color: #facc15 !important;
    color: #854d0e !important;
}

.ama-hw-student-grade-green {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

/* ===== Rich-text question editor ===== */

.ama-hwq-rte-wrap {
    display: block;
    margin-bottom: 10px;
}

.ama-hwq-rte-wrap > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #3a6080;
    margin-bottom: 4px;
}

.ama-hwq-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #EDF3F8;
    border: 1px solid #C8DCE8;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.ama-hwq-rte-toolbar button {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #C8DCE8;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    color: #3a6080;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ama-hwq-rte-toolbar button:hover {
    background: #C8DCE8;
    border-color: #94a3b8;
}

.ama-hwq-rte-toolbar button[data-cmd="bold"]      { font-weight: 700; }
.ama-hwq-rte-toolbar button[data-cmd="italic"]    { font-style: italic; }
.ama-hwq-rte-toolbar button[data-cmd="underline"] { text-decoration: underline; }

.ama-hwq-rte-size {
    height: 28px;
    padding: 0 6px;
    border: 1px solid #C8DCE8;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    color: #3a6080;
    cursor: pointer;
}

.ama-hwq-rte-color-wrap {
    position: relative;
    width: 28px;
    height: 28px;
}

.ama-hwq-rte-color-wrap input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 1px solid #C8DCE8;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.ama-hwq-rte-toolbar .ama-hwq-rte-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: #C8DCE8;
}

.ama-hwq-rte {
    min-height: 72px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #C8DCE8;
    border-top: none;
    border-radius: 0 0 5px 5px;
    font-size: 13px;
    line-height: 1.5;
    color: #0f2d5e;
    outline: none;
    overflow-y: auto;
}

.ama-hwq-rte:focus {
    border-color: #1a4171;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.ama-hwq-rte[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
    pointer-events: none;
}

.ama-hwq-rte img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.ama-hwq-rte-compact {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.ama-hwq-rte-compact .ama-hwq-rte-toolbar {
    padding: 3px 5px;
    gap: 3px;
}

.ama-hwq-rte-compact .ama-hwq-rte-toolbar button,
.ama-hwq-rte-compact .ama-hwq-rte-size,
.ama-hwq-rte-compact .ama-hwq-rte-color-wrap {
    height: 24px;
    min-width: 24px;
    font-size: 12px;
}

.ama-hwq-rte-compact .ama-hwq-rte {
    min-height: 34px;
    padding: 6px 8px;
}

.ama-hwq-comp-choice-editor-host {
    flex: 1;
    min-width: 0;
}

.ama-hwq-comp-choice-editor-host > div {
    margin-bottom: 0 !important;
}

.ama-hwq-rte .ama-hwq-formula,
.ama-hwq-formula {
    display: inline-block;
    padding: 0 2px;
    vertical-align: middle;
    user-select: none;
}

/* Formulas inside an editor are click-to-edit — advertise it. */
.ama-hwq-rte .ama-hwq-formula {
    cursor: pointer;
    border-radius: 4px;
}
.ama-hwq-rte .ama-hwq-formula:hover {
    background: #daeeff;
    outline: 1px solid #8bccc8;
}

.ama-hwq-suggested-placeholder::placeholder {
    color: #94a3b8;
    font-style: italic;
    opacity: 1;
}

.ama-hwq-comp-dd-correct-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.ama-hwq-comp-dd-correct-btn {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #C8DCE8;
    border-radius: 5px;
    background: #fff;
    color: #0f2d5e;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.ama-hwq-comp-dd-correct-btn:focus {
    border-color: #8bccc8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
    outline: none;
}

.ama-hwq-comp-dd-correct-display {
    flex: 1;
    min-width: 0;
}

.ama-hwq-comp-dd-correct-placeholder {
    color: #94a3b8;
    font-style: italic;
}

.ama-hwq-comp-dd-correct-caret {
    color: #64748b;
    flex-shrink: 0;
}

/* Opened as position:fixed so the popover's scroll container can't clip it;
   left/top/width/max-height are set by hwqCompDdCorrectMenuPosition(). */
.ama-hwq-comp-dd-correct-menu {
    display: none;
    position: fixed;
    z-index: 1000;
    max-height: 220px;
    overflow: auto;
    padding: 4px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.ama-hwq-comp-dd-correct-wrap.is-open .ama-hwq-comp-dd-correct-menu {
    display: block;
}

.ama-hwq-comp-dd-correct-opt {
    width: 100%;
    display: block;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #0f2d5e;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.ama-hwq-comp-dd-correct-opt:hover,
.ama-hwq-comp-dd-correct-opt:focus {
    background: #daeeff;
    outline: none;
}

.ama-hwq-preview-comp-dd-select {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.ama-hwq-preview-comp-dd-btn {
    width: 100%;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 10px;
    border: 2px solid #94a3b8;
    border-radius: 5px;
    background: #fff;
    color: #0f2d5e;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.ama-hwq-preview-comp-dd-display {
    flex: 1;
    min-width: 0;
}

.ama-hwq-preview-comp-dd-placeholder,
.ama-hwq-preview-comp-dd-caret {
    color: #475569;
}

.ama-hwq-preview-comp-dd-menu {
    display: none;
    position: absolute;
    z-index: 10002;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow: auto;
    padding: 4px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.ama-hwq-preview-comp-dd-select.is-open .ama-hwq-preview-comp-dd-menu {
    display: block;
}

.ama-hwq-preview-comp-dd-opt {
    width: 100%;
    display: block;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #0f2d5e;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

/* Pasted tables/images can carry a fixed width from their source (Word,
   Google Docs) that's wider than the preview column. Cap them so they
   shrink to fit instead of pushing later columns off the visible area;
   #ama-hwq-preview-body's overflow-x:auto still covers whatever can't shrink. */
#ama-hwq-preview-body table,
.ama-hwq-author-preview table,
.ama-hwq-preview-composite table {
    max-width: 100%;
}
#ama-hwq-preview-body img,
.ama-hwq-author-preview img,
.ama-hwq-preview-composite img {
    max-width: 100%;
    height: auto;
}

.ama-hwq-preview-comp-dd-opt:hover,
.ama-hwq-preview-comp-dd-opt:focus {
    background: #daeeff;
    outline: none;
}

.ama-hwq-rte-hint {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
}

/* ===== Formula insert overlay ===== */

.ama-hwq-formula-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.ama-hwq-formula-dialog {
    width: min(520px, 92vw);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ama-hwq-formula-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f2d5e;
    margin: 0;
}

.ama-hwq-formula-field-wrap {
    border: 1px solid #C8DCE8;
    border-radius: 5px;
    padding: 10px;
    background: #EDF3F8;
}

.ama-hwq-formula-field {
    width: 100%;
    min-height: 40px;
    font-size: 16px;
}

.ama-hwq-formula-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ama-hwq-formula-actions button {
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #C8DCE8;
}

.ama-hwq-formula-cancel {
    background: #f1f5f9;
    color: #3a6080;
}

.ama-hwq-formula-cancel:hover {
    background: #C8DCE8;
}

.ama-hwq-formula-insert {
    background: #1a4171;
    border-color: #1a4171;
    color: #fff;
}

.ama-hwq-formula-insert:hover {
    background: #1a4171;
}

/* ── Composite math/numeric slot ────────────────────────────────────────────
   The slot input is wrapped at runtime by MathInput, which gives it a 540px
   max-width (sized for full-page math inputs). Inside a composite question
   we want the math-field itself narrow (one number/expression) but the
   keyboard popup to be wide enough to use. Overrides on .ama-hwq-math-slot-host
   keep the field tight while letting the keyboard grow to a usable size. */
.ama-hwq-math-slot-host {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}
.ama-hwq-math-slot-host > .ama-math-input-wrapper {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* The configured slot width is a MINIMUM: the field starts at that size and
   grows with the typed expression (long polynomials must stay fully visible),
   capped so it never overflows the question column. */
.ama-hwq-math-slot-host > .ama-math-input-wrapper > .ama-mf-row > math-field {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: var(--ama-hwq-math-slot-w, 110px) !important;
    max-width: min(560px, 100%) !important;
}
.ama-hwq-math-slot-host > .ama-math-input-wrapper > .ama-compact-kb {
    min-width: 280px;
}

/* ── Answer-slot popover: Correct answer math keyboard ──────────────────────
   In the "Configure answer slot" popover the Correct answer field shares one
   nowrap row with Tolerance and Width, so its cell is ~45% of the popover.
   MathInput renders the compact keyboard INSIDE that cell; on a phone the
   cell is ~100px wide and the (wrapping) key rows stack into one tall
   column. While the keyboard is open, let the cell take the whole row so the
   keyboard renders at its normal width; on phones do so always, because the
   cell is also too narrow to type in. Closed-keyboard desktop layout is
   unchanged. */
#ama-hwq-comp-panels .ama-hwq-comp-math-row:has(.kb-open) {
    flex-wrap: wrap;
}
#ama-hwq-comp-panels .ama-hwq-comp-math-key:has(.kb-open) {
    flex: 1 1 100%;
    max-width: 100% !important;
}
#ama-hwq-comp-panels .ama-hwq-comp-math-key .ama-compact-kb {
    max-width: 100%;
}
@media (max-width: 640px) {
    #ama-hwq-comp-panels .ama-hwq-comp-math-row {
        flex-wrap: wrap;
    }
    #ama-hwq-comp-panels .ama-hwq-comp-math-key {
        flex: 1 1 100%;
        max-width: 100% !important;
    }
}

/* ── Composite long-text slot ────────────────────────────────────────────── */
.ama-hwq-comp-long-text {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 200px;
    max-height: 70vh;
    overflow: auto;
    padding: 10px 12px;
    border: 2px solid #94a3b8;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    background: #fff;
    margin: 8px 0;
    resize: vertical;
}

/* ── Composite short-text rich answer ───────────────────────────────────── */
.ama-hwq-comp-rich-text {
    display: inline-block;
    vertical-align: middle;
    min-width: 160px;
    min-height: 24px;
    padding: 4px 10px;
    border: 2px solid #94a3b8;
    border-radius: 5px;
    font-size: 14px;
    background: #fff;
    line-height: 1.4;
    margin: 0 2px;
}
.ama-hwq-comp-rich-text:focus {
    outline: 2px solid #8bccc8;
    outline-offset: 1px;
}
.ama-hwq-comp-rich-text:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
}

/* Explanation textareas — grey italic placeholder so authors see it's a hint */
#ama-hwq-comp-explanation::placeholder,
textarea[name="answer_explanation"]::placeholder {
    font-style: italic;
    color: #94a3b8;
    opacity: 1;
}

/* ── Composite slot points pill ─────────────────────────────────────────── */
.ama-hwq-comp-points-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #f1f5f9;
    border: 1px solid #C8DCE8;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
}

/* Hide the table-insert button inside compact (option-text) editors —
   tables don't make sense in single-line dropdown / MC option labels. */
.ama-hwq-rte-compact .ama-hwq-rte-toolbar [data-cmd="table"] {
    display: none;
}

/* ===== Homework math keyboard extensions ===== */

.ama-hwq-enhanced-kb .ama-kb-tabs {
    overflow-x: auto;
}

.ama-hwq-enhanced-kb .ama-kb-tab {
    flex: 0 0 auto;
    min-width: 58px;
    padding-left: 8px;
    padding-right: 8px;
    letter-spacing: 0;
}

.ama-hwq-enhanced-kb .ama-kb-row {
    flex-wrap: wrap;
}

.ama-hwq-symbol-kb-btn {
    min-width: 44px;
}

.ama-hwq-system-icon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 30px;
    line-height: 1;
}

.ama-hwq-system-icon span {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.ama-hwq-system-icon i,
.ama-hwq-matrix-icon span {
    display: block;
    width: 5px;
    height: 5px;
    background: currentColor;
}

.ama-hwq-matrix-icon {
    display: grid;
    grid-template-columns: repeat(3, 5px);
    gap: 5px 7px;
    position: relative;
    padding: 1px 8px;
}

.ama-hwq-matrix-icon::before,
.ama-hwq-matrix-icon::after {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 5px;
    border-color: currentColor;
    border-style: solid;
}

.ama-hwq-matrix-icon::before {
    left: 0;
    border-width: 3px 0 3px 3px;
}

.ama-hwq-matrix-icon::after {
    right: 0;
    border-width: 3px 3px 3px 0;
}

/* ── Tables inside the rich-text editor ─────────────────────────────────── */
.ama-hwq-rte table,
.ama-hwq-rte-table {
    border-collapse: collapse !important;
    margin: 8px 0;
    min-width: 240px;
    font-size: 14px;
}
.ama-hwq-rte table th,
.ama-hwq-rte table td,
.ama-hwq-rte-table th,
.ama-hwq-rte-table td {
    border: 1px solid #94a3b8 !important;
    padding: 6px 10px !important;
    min-width: 60px;
    vertical-align: top;
    background: #fff;
}
.ama-hwq-rte table th,
.ama-hwq-rte-table th {
    background: #f1f5f9;
    font-weight: 700;
    color: #0f2d5e;
    text-align: left;
}
/* Same styling on the student side once the body is rendered. */
.ama-hwq-comp-body table,
.ama-hwq-comp-body .ama-hwq-rte-table {
    border-collapse: collapse;
    margin: 8px 0;
}
.ama-hwq-comp-body table th,
.ama-hwq-comp-body table td,
.ama-hwq-comp-body .ama-hwq-rte-table th,
.ama-hwq-comp-body .ama-hwq-rte-table td {
    border: 1px solid #C8DCE8;
    padding: 6px 10px;
    vertical-align: top;
}
.ama-hwq-comp-body table th,
.ama-hwq-comp-body .ama-hwq-rte-table th {
    background: #f1f5f9;
    font-weight: 700;
}

/* ── Drag & drop slot ───────────────────────────────────────────────────── */
/* Author panel — selected zone in the per-item correct-zone dropdown */
.ama-hwq-comp-dd-correct-pick {
    min-width: 160px;
}

/* Student view */
.hwq-comp-dd {
    display: block;
    margin: 12px 0;
    padding: 12px 14px;
    background: #EDF3F8;
    border: 1px solid #C8DCE8;
    border-radius: 8px;
}
.hwq-comp-dd-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    gap: 14px;
    align-items: stretch;
}
.hwq-comp-dd-bank {
    border: 1px dashed #C8DCE8;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    min-height: 120px;
}
.hwq-comp-dd-bank-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.hwq-comp-dd-zones {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.hwq-comp-dd-zone {
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hwq-comp-dd-zone-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a4171;
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 1px solid #C8DCE8;
    margin-bottom: 4px;
}
.hwq-comp-dd-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    max-width: 100%;
}
.hwq-comp-dd-item:active {
    cursor: grabbing;
}
.hwq-comp-dd-item img {
    max-width: 100%;
    max-height: 110px;
    display: block;
    border-radius: 4px;
}
.hwq-comp-dd-item.is-dragging {
    opacity: .45;
}
.hwq-comp-dd-zone.is-over,
.hwq-comp-dd-bank.is-over {
    background: #daeeff;
    border-color: #1a4171;
}

/* ===== Number Line widget ===== */
.ahw-nl-wrap {
    border: 1px solid #C8DCE8;
    border-radius: 14px;
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.ahw-nl-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 0 2px 10px;
    margin-bottom: 4px;
}
.ahw-nl-btn {
    min-height: 30px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    background: #EDF3F8;
    border: 1px solid #C8DCE8;
    border-radius: 9px;
    cursor: pointer;
    line-height: 1;
}
.ahw-nl-btn:hover {
    background: #daeeff;
    border-color: #2E68A1;
    color: #4338ca;
}
.ahw-nl-svg {
    cursor: crosshair;
    user-select: none;
    border-radius: 10px;
    background: #EDF3F8;
}
.ahw-nl-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
    border: 1px solid #C8DCE8;
    border-radius: 12px;
    justify-content: flex-start;
}
.ahw-nl-tool {
    background: #ffffff;
    border: 1px solid #C8DCE8;
    border-radius: 7px;
    padding: 0;
    cursor: pointer;
    transition: all 120ms ease;
    flex: 0 0 auto;
    min-width: 68px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ahw-nl-tool:hover {
    border-color: #2E68A1;
    box-shadow: 0 6px 14px rgba(99,102,241,.10);
}
.ahw-nl-tool.is-active {
    border-color: #1a4171;
    background: #daeeff;
    box-shadow: 0 0 0 2px rgba(37,99,235,.18);
}
.ahw-nl-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Force explicit sizing — themes/plugins ship `svg { width: 1em; height: 1em }`
   for icon resets which would otherwise squash these glyphs to ~16px. */
.ahw-nl-tool-icon svg {
    display: block !important;
    width: 56px !important;
    height: 16px !important;
    max-width: none !important;
    max-height: none !important;
}
.ahw-nl-hint {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.55;
    color: #64748b;
    text-align: center;
}

/* ===== Import section ===== */

#ama-hwi-body {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ama-hwi-card {
    background: #fff;
    border: 1px solid #C8DCE8;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 8px;
}

.ama-hwi-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f2d5e;
    margin-bottom: 14px;
}

.ama-hwi-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #C8DCE8;
    margin-bottom: 12px;
}

.ama-hwi-tab {
    background: none;
    border: none;
    padding: 6px 2px 9px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ama-hwi-tab.is-active {
    color: #2E68A1;
    border-bottom-color: #2E68A1;
}

.ama-hwi-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    color: #0f2d5e;
}

.ama-hwi-hints {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}

.ama-hwi-hint-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}

.ama-hwi-opt {
    font-weight: 400;
    color: #94a3b8;
}

.ama-hwi-select {
    padding: 6px 10px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}

.ama-hwi-input {
    padding: 6px 10px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}

.ama-hwi-gen-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.ama-hwi-gen-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: linear-gradient(180deg, #2E68A1 0%, #2E68A1 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}

.ama-hwi-gen-btn:hover:not(:disabled) {
    filter: brightness(0.95);
}

.ama-hwi-gen-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

.ama-hwi-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hwiSpin .8s linear infinite;
    flex-shrink: 0;
}

@keyframes hwiSpin { to { transform: rotate(360deg); } }

.ama-hwi-or {
    text-align: center;
    position: relative;
    margin: 6px 0;
    color: #94a3b8;
    font-size: 12px;
}

.ama-hwi-or::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #C8DCE8;
}

.ama-hwi-or span {
    position: relative;
    background: #EDF3F8;
    padding: 0 12px;
}

.ama-hwi-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.ama-hwi-field label {
    font-size: 13px;
    font-weight: 600;
    color: #3a6080;
}

.ama-hwi-field textarea {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.6;
    padding: 10px 12px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    resize: vertical;
    color: #0f2d5e;
    background: #EDF3F8;
    width: 100%;
    box-sizing: border-box;
}

.ama-hwi-field--row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.ama-hwi-field--row label {
    white-space: nowrap;
    margin-bottom: 0;
}

.ama-hwi-field--row input[type="number"] {
    width: 90px;
    padding: 5px 8px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
}

.ama-hwi-actions {
    display: flex;
    gap: 10px;
}

/* Dropzone */
.ama-hwi-dz {
    border: 2px dashed #C8DCE8;
    border-radius: 8px;
    background: #EDF3F8;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    padding: 8px;
}

.ama-hwi-dz:hover, .ama-hwi-dz.is-drag {
    border-color: #2E68A1;
    background: #daeeff;
}

.ama-hwi-dz-inner {
    text-align: center;
    padding: 18px 0 14px;
}

.ama-hwi-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 6px;
}

.ama-hwi-thumb {
    position: relative;
    width: 100px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.ama-hwi-thumb img {
    display: block;
    width: 100%;
    height: 76px;
    object-fit: cover;
}

.ama-hwi-thumb-rm {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(15,23,42,.65);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ama-hwi-thumb-nm {
    font-size: 10px;
    color: #475569;
    padding: 3px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Banners & results */
.ama-hwi-banner {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.ama-hwi-banner--error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.ama-hwi-banner--success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.ama-hwi-result-table {
    margin-top: 10px;
    border-collapse: collapse;
    width: 100%;
}

.ama-hwi-result-table th {
    text-align: left;
    font-weight: 600;
    padding: 3px 16px 3px 0;
    white-space: nowrap;
    color: #166534;
}

.ama-hwi-result-table td {
    padding: 3px 0;
    color: #166534;
}

/* ===== Import — review pane (per-question cards) ===== */

.ama-hwi-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid #C8DCE8;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 8px;
}
.ama-hwi-review-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #3a6080; }
.ama-hwi-review-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 6px;
    margin-right: 6px;
}
.ama-hwi-review-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ama-hwi-pickers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: #fff;
    border: 1px solid #C8DCE8;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 8px;
}
.ama-hwi-picker label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
}
.ama-hwi-picker select, .ama-hwi-picker input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
}

.ama-hwi-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }

.ama-hwi-card-q {
    background: #fff;
    border: 1px solid #C8DCE8;
    border-radius: 12px;
    padding: 18px 20px;
}
/* Saved/skipped cards read as "done" — a soft tint + green accent rather
   than a heavy fade that looks like the screen is still loading. */
.ama-hwi-card-q.is-disabled { opacity: .9; background: #f8fafc; border-color: #d8e3ee; }

.ama-hwi-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.ama-hwi-card-num { font-size: 14px; font-weight: 700; color: #0f2d5e; }
.ama-hwi-card-head-actions { display: flex; gap: 8px; }

.ama-hwi-card-status {
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}
.ama-hwi-card-status.is-saved   { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.ama-hwi-card-status.is-skipped { background: #f1f5f9; color: #64748b; border: 1px solid #C8DCE8; }
.ama-hwi-card-status.is-saving  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.ama-hwi-card-status.is-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.ama-hwi-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.ama-hwi-card-grid--2 { grid-template-columns: 1fr 1fr; }
.ama-hwi-card-grid select,
.ama-hwi-card-grid input[type="text"],
.ama-hwi-card-grid input[type="number"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
}

.ama-hwi-mini-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: #64748b;
    margin-bottom: 4px;
}
.ama-hwi-ai-tag { color: #6d28d9; font-size: 10px; font-weight: 600; letter-spacing: .04em; }

.ama-hwi-readonly-pill {
    padding: 6px 10px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
    background: #EDF3F8;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ama-hwi-type-pill { text-transform: capitalize; font-weight: 600; color: #2E68A1; }

.ama-hwi-fld { margin-bottom: 14px; }
.ama-hwi-fld input[type="text"], .ama-hwi-fld textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.ama-hwi-fld textarea {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.55;
    background: #EDF3F8;
    resize: vertical;
}

.ama-hwi-preview {
    background: #fafbfd;
    border: 1px solid #C8DCE8;
    border-radius: 10px;
    padding: 16px 20px;
    min-height: 44px;
    font-size: 15px;
    line-height: 1.8;
    color: #0f2d5e;
}
/* Explanation preview reads as a separate "answer key" panel, not a
   second copy of the question — softer tint, a hairline left rule. */
.ama-hwi-expl-preview {
    background: #f3f7fc;
    border-left: 3px solid #8bccc8;
}
.ama-hwi-preview p { margin: 0 0 8px; }
.ama-hwi-preview p:last-child { margin-bottom: 0; }
.ama-hwi-preview br + br { content: ''; display: block; margin-top: 4px; }

.ama-hwi-blank-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ama-hwi-blank-label {
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 700;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 2px 6px;
    border-radius: 4px;
}

.ama-hwi-mc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ama-hwi-mc-radio, .ama-hwi-mc-checkbox { margin: 0; }

.ama-hwi-sort-item {
    display: inline-block;
    padding: 3px 10px;
    background: #f1f5f9;
    border: 1px solid #C8DCE8;
    border-radius: 12px;
    font-size: 12px;
    color: #3a6080;
}
.ama-hwi-mc-letter {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
}
.ama-hwi-mc-text {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    font-size: 13px;
}

.ama-hwi-card-img {
    margin-top: 10px;
    border: 1px dashed #C8DCE8;
    border-radius: 8px;
    padding: 6px;
    background: #fafafa;
}
.ama-hwi-card-img img { max-width: 100%; height: auto; display: block; border-radius: 4px; }

.ama-hwi-handoff-note {
    margin-top: 4px;
    padding: 10px 12px;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #2E68A1;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
}

.ama-hwi-save-all-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #C8DCE8;
    border-radius: 10px;
    padding: 12px 18px;
}
.ama-hwi-save-all-hint { font-size: 12px; color: #64748b; }

/* ===== Question Bank — sortable column headers ===== */

.ama-hwq-sort-th:hover {
    background: #f1f5f9 !important;
    color: #0f2d5e;
}


/* ===== Question Bank — bulk select ===== */

.ama-hwq-col-cb {
    width: 44px !important;
    min-width: 44px !important;
    text-align: left !important;
    padding-right: 6px !important;
    padding-left: 12px !important;
    overflow: visible !important;
}

.ama-hwq-col-cb input[type="checkbox"] {
    display: block;
    margin: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #1a4171;
    vertical-align: middle;
}

.ama-hwq-col-actions,
.ama-hwq-col-actions-col,
.ama-hwq-table th.ama-hwq-col-actions,
.ama-hwq-table td.ama-hwq-col-actions {
    overflow: visible !important;
    text-align: center !important;
}

.ama-hwq-row-selected td {
    background: #daeeff !important;
}

.ama-hwq-bulk-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #f0f6ff;
    border-top: 2px solid #3b82f6;
    border-bottom: 1px solid #daeeff;
    flex-wrap: wrap;
}

.ama-hwq-bulk-count {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #1a4171;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    margin-right: 2px;
}

.ama-hwq-bulk-sep {
    width: 1px;
    height: 18px;
    background: #C8DCE8;
    flex-shrink: 0;
    margin: 0 2px;
}

/* Shared pill base — no border, no shadow */
.ama-hwq-bulk-act,
.ama-hws-bulk-act,
.ama-chw-bulk-act,
.ama-hwq-bulk-create-assign,
.ama-hwq-bulk-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    border: none;
    outline: none;
    transition: filter 0.12s, transform 0.1s;
    white-space: nowrap;
}

.ama-hwq-bulk-act:hover,
.ama-hws-bulk-act:hover,
.ama-chw-bulk-act:hover,
.ama-hwq-bulk-create-assign:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

.ama-hwq-bulk-act:active,
.ama-hws-bulk-act:active,
.ama-chw-bulk-act:active,
.ama-hwq-bulk-create-assign:active {
    transform: translateY(0);
    filter: brightness(0.85);
}

/* Publish — green */
.ama-hwq-bulk-publish {
    background: #dcfce7;
    color: #15803d;
}

/* Unpublish — amber */
.ama-hwq-bulk-unpublish {
    background: #fef9c3;
    color: #92400e;
}

/* Delete — red */
.ama-hwq-bulk-delete {
    background: #fee2e2;
    color: #b91c1c;
}

/* Create Assignment — solid blue, primary CTA */
.ama-hwq-bulk-create-assign {
    background: #1a4171;
    color: #fff;
    padding: 4px 14px;
    letter-spacing: 0.01em;
}

/* Clear — minimal × link, right-aligned */
.ama-hwq-bulk-clear {
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: auto;
    font-weight: 400;
}

.ama-hwq-bulk-clear:hover {
    background: #C8DCE8;
    color: #475569;
    filter: none;
    transform: none;
}

/* ===== Question Bank — kebab action menu ===== */

.ama-hwq-kebab-wrap {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.ama-hwq-kebab-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #C8DCE8;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ama-hwq-kebab-btn:hover {
    background: #EDF3F8;
    border-color: #94a3b8;
    color: #3a6080;
}

.ama-hwq-kebab-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #C8DCE8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 200;
    min-width: 120px;
    padding: 4px;
}

.ama-hwq-kebab-wrap.is-open .ama-hwq-kebab-menu {
    display: block;
}

.ama-hwq-kebab-item {
    display: block;
    width: 100%;
    padding: 7px 12px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #3a6080;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.ama-hwq-kebab-item:hover {
    background: #f1f5f9;
}

.ama-hwq-kebab-item-delete {
    color: #dc2626;
}

.ama-hwq-kebab-item-delete:hover {
    background: #fef2f2;
}

.ama-hwq-kebab-sep {
    margin: 3px 8px;
    border: 0;
    border-top: 1px solid #C8DCE8;
}

/* Assignment Editor Back button — mirrors the core #ama-admin-back-btn token
   (bordered pill) and uses order:-1 so it sits before the section title. */
#ama-hws-editor-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    order: -1;
    background: transparent;
    border: 1.5px solid #2E68A1;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #2E68A1;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
#ama-hws-editor-back:hover { background: #2E68A1; color: #fff; }

/* Font consistency: native form controls fall back to the UA serif font, which
   clashes with the portal's Inter. Force the portal font on every form control
   on the admin page — including modals/overlays appended to <body> (outside
   #ama-admin-portal, so portal-scoped rules don't reach them). The .ama-admin-*
   hooks catch the main plugin's Course/etc. modals directly; the [id*=] matches
   any *-modal/*-overlay container. !important beats UA + any stray rule. */
#ama-admin-portal input, #ama-admin-portal select, #ama-admin-portal textarea, #ama-admin-portal button,
[id*="modal"] input, [id*="modal"] select, [id*="modal"] textarea, [id*="modal"] button,
[id*="overlay"] input, [id*="overlay"] select, [id*="overlay"] textarea, [id*="overlay"] button,
.ama-admin-field input, .ama-admin-field select, .ama-admin-field textarea,
.ama-admin-form-field input, .ama-admin-form-field select, .ama-admin-form-field textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Native <select>/<textarea> boxes in admin fields were unstyled (larger UA
   font size, default border/padding) — match the styled text inputs. */
.ama-admin-field select, .ama-admin-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d7e2ec;
    border-radius: 8px;
    font-size: 15px;
    color: #0f2d5e;
    background: #fafcff;
}
.ama-admin-field select { cursor: pointer; height: auto; }

/* Scratchpad cursors — a small pencil for the pen tool and an outline circle for
   the eraser, instead of the default crosshair (+) which reads as unnatural. */
.ama-hwi-sp-cursor-pen {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path d='M4 20l3-0.8 10.5-10.5-2.2-2.2L4.8 17z' fill='%23fcd34d' stroke='%231f2937' stroke-width='1.2' stroke-linejoin='round'/><path d='M15.3 6.5l2.2-2.2 2.2 2.2-2.2 2.2z' fill='%23cbd5e1' stroke='%231f2937' stroke-width='1.2' stroke-linejoin='round'/><path d='M4 20l0.9-2.4 1.5 1.5z' fill='%231f2937'/></svg>") 3 19, crosshair;
}
.ama-hwi-sp-cursor-eraser {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='8' fill='none' stroke='%231f2937' stroke-width='1.5'/></svg>") 10 10, crosshair;
}

/* ── "Also accept" alternative-answer lists ──────────────────────────────────
   These reuse MathInput's `multi` mode so every alternative is a real
   math-field (formulas typed exactly as in the Correct Answer box). That mode
   was built for multiple-choice options, so its rows are labelled A. / B. /
   C. and its button reads "+ Add Option" — both wrong here, where the rows are
   alternative spellings of ONE answer, not a set of choices. Relabel in CSS
   rather than JS: MathInput rewrites the labels itself on every add/remove,
   so a JS override would be undone on the next edit. */
.ama-hwq-alt-math .ama-math-row-label {
    font-size: 0;
    min-width: 24px;
    color: #94a3b8;
}
.ama-hwq-alt-math .ama-math-row-label::after {
    content: "or";
    font-size: 12px;
    font-weight: 600;
}
.ama-hwq-alt-math .ama-math-add-row {
    font-size: 0;
}
.ama-hwq-alt-math .ama-math-add-row::after {
    content: "+ Add alternative";
    font-size: 13px;
}
.ama-hwq-alt-math code {
    background: #EDF3F8;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
}