<style>

/* tools index page */


.teacher-tools-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.teacher-tool-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 17px 22px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;

    color: #26364a;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    transition: background 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease;
}

.teacher-tool-item:hover {
    background: #eef6ff;
    border-color: #a8cbed;
    transform: translateX(3px);
    text-decoration: none;
}

.teacher-tool-item:focus-visible {
    outline: 3px solid #3182ce;
    outline-offset: 3px;
}

.tool-arrow {
    font-size: 26px;
    font-weight: 400;
    color: #7b9bb8;
    flex-shrink: 0;
}

.teacher-tool-item:hover .tool-arrow {
    color: #2563a6;
}



/* alphabetical order */
.alphabetical-tool {
    max-width: 650px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fafafa;
}

.alphabetical-tool textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
}

.sort-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.sort-buttons button {
    padding: 10px 16px;
    background: #3478c0;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.sort-buttons button:hover {
    background: #245a94;
}

#wordOutput {
    background: white;
}

/* random word picker */

.random-picker-tool {
    max-width: 650px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fafafa;
    box-sizing: border-box;
}

.random-picker-tool textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-top: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
}

.picker-options {
    margin: 15px 0;
    font-size: 14px;
}

.picker-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.picker-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.picker-buttons button {
    padding: 11px 16px;
    background: #3478c0;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.picker-buttons button:hover {
    background: #245a94;
}

.picker-buttons button:disabled {
    background: #aaa;
    cursor: not-allowed;
}

#resetButton {
    background: #64748b;
}

#clearButton {
    background: #777;
}

.picker-result {
    margin-top: 20px;
    padding: 30px 15px;
    text-align: center;
    background: #eaf4ff;
    border: 2px solid #b6d7f5;
    border-radius: 12px;
}

.picker-result-label {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}

#selectedWord {
    font-size: 36px;
    font-weight: bold;
    color: #245a94;
    overflow-wrap: anywhere;
}

.picker-stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
    font-size: 14px;
    color: #555;
}

#pickerMessage {
    text-align: center;
    font-size: 14px;
    color: #555;
    min-height: 20px;
}

@media (max-width: 480px) {
    .picker-buttons {
        flex-direction: column;
    }

    .picker-buttons button {
        width: 100%;
    }

    #selectedWord {
        font-size: 28px;
    }
}


/* word & character counter */

.text-counter-tool {
    max-width: 750px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fafafa;
    box-sizing: border-box;
}

.text-counter-tool textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.6;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
}

.counter-stats {
    display: grid;
    grid-template-columns: repeat(
        auto-fit, minmax(125px, 1fr)
    );
    gap: 12px;
    margin: 20px 0;
}

.counter-stat {
    padding: 18px 10px;
    text-align: center;
    background: #eaf4ff;
    border: 1px solid #b6d7f5;
    border-radius: 8px;
}

.counter-stat div {
    font-size: 28px;
    font-weight: bold;
    color: #245a94;
}

.counter-stat span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #555;
}

.counter-search {
    margin-top: 25px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.counter-search h3 {
    margin-top: 0;
}

.counter-search input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.counter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
    font-size: 14px;
}

.counter-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.counter-search-result {
    text-align: center;
    padding: 20px;
    background: #f0f8ee;
    border: 1px solid #c6e4be;
    border-radius: 8px;
}

#countMatches {
    font-size: 34px;
    font-weight: bold;
    color: #35804b;
}

.counter-search-result span {
    font-size: 13px;
    color: #555;
}

.counter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.counter-buttons button {
    padding: 11px 18px;
    background: #3478c0;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.counter-buttons button:hover {
    background: #245a94;
}

#counterClear {
    background: #777;
}

#counterMessage {
    min-height: 20px;
    font-size: 14px;
    color: #555;
}

@media (max-width: 480px) {
    .counter-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .counter-buttons {
        flex-direction: column;
    }

    .counter-buttons button {
        width: 100%;
    }
}


/* reading & readability calculator */

.reading-tool {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fafafa;
    box-sizing: border-box;
}

.reading-tool textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.6;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
}

.reading-speed-section {
    margin: 20px 0;
}

.reading-speed-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.reading-speed-section select {
    width: 100%;
    max-width: 350px;
    padding: 10px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
}

.reading-stats {
    display: grid;
    grid-template-columns: repeat(
        auto-fit, minmax(150px, 1fr)
    );
    gap: 12px;
    margin: 20px 0;
}

.reading-stat {
    padding: 18px 10px;
    text-align: center;
    background: #eaf4ff;
    border: 1px solid #b6d7f5;
    border-radius: 8px;
}

.reading-stat div {
    font-size: 26px;
    font-weight: bold;
    color: #245a94;
}

.reading-stat span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #555;
}

.reading-results {
    margin-top: 25px;
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.reading-results h3 {
    margin-top: 0;
    margin-bottom: 18px;
}

.reading-result-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.reading-result-row strong {
    color: #245a94;
    text-align: right;
}

.reading-grade-note {
    margin-top: 18px;
    padding: 14px;
    background: #f0f8ee;
    border: 1px solid #c6e4be;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
}

.reading-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.reading-buttons button {
    padding: 11px 18px;
    background: #3478c0;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.reading-buttons button:hover {
    background: #245a94;
}

#readingClear {
    background: #777;
}

#readingMessage {
    min-height: 20px;
    font-size: 14px;
    color: #555;
}

@media (max-width: 480px) {
    .reading-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .reading-result-row {
        flex-direction: column;
        gap: 4px;
    }

    .reading-result-row strong {
        text-align: left;
    }

    .reading-buttons {
        flex-direction: column;
    }

    .reading-buttons button {
        width: 100%;
    }
}


/* grade level reading analyzer */

.grade-analyzer {
    max-width: 850px;
    margin: 20px auto;
    padding: 22px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-sizing: border-box;
}

.grade-analyzer * {
    box-sizing: border-box;
}

.ga-field {
    margin: 20px 0;
}

.ga-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.ga-field textarea,
.ga-field select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

.ga-field textarea {
    line-height: 1.6;
    resize: vertical;
}

.ga-field select {
    max-width: 300px;
}

.ga-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.ga-actions button {
    padding: 11px 20px;
    background: #3478c0;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
}

.ga-actions button:hover {
    background: #245a94;
}

.ga-actions .ga-secondary {
    background: #777;
}

#gaMessage {
    color: #555;
    min-height: 20px;
}

.ga-stats {
    display: grid;
    grid-template-columns: repeat(
        auto-fit, minmax(135px, 1fr)
    );
    gap: 12px;
    margin: 20px 0;
}

.ga-stat {
    padding: 18px 10px;
    background: #eaf4ff;
    border: 1px solid #b6d7f5;
    border-radius: 8px;
    text-align: center;
}

.ga-stat strong {
    display: block;
    color: #245a94;
    font-size: 27px;
}

.ga-stat span {
    display: block;
    margin-top: 6px;
    color: #555;
    font-size: 13px;
}

.ga-panel {
    margin: 20px 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.ga-panel h3 {
    margin-top: 0;
}

.ga-result-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.ga-result-row strong {
    color: #245a94;
}

.ga-notice {
    margin-top: 18px;
    padding: 15px;
    background: #eef5ff;
    border: 1px solid #c5dafa;
    border-radius: 6px;
    line-height: 1.6;
}

.ga-sentence {
    padding: 13px 0;
    border-bottom: 1px solid #eee;
}

.ga-sentence:last-child {
    border-bottom: none;
}

.ga-sentence-count {
    display: inline-block;
    margin-bottom: 6px;
    color: #245a94;
    font-size: 13px;
    font-weight: bold;
}

.ga-vocab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ga-vocab-word {
    display: inline-block;
    padding: 7px 11px;
    background: #eaf4ff;
    border: 1px solid #b6d7f5;
    border-radius: 20px;
    font-size: 14px;
}

.ga-recommendation {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
}

.ga-recommendation:last-child {
    border-bottom: none;
}

.ga-disclaimer {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

#gaResults[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .ga-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ga-result-row {
        flex-direction: column;
        gap: 4px;
    }

    .ga-actions {
        flex-direction: column;
    }

    .ga-actions button {
        width: 100%;
    }
}

@media print {
    body * {
        visibility: hidden;
    }

    #gradeAnalyzer,
    #gradeAnalyzer * {
        visibility: visible;
    }

    #gradeAnalyzer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border: none;
        background: #fff;
    }

    .ga-field,
    .ga-actions,
    #gaMessage {
        display: none !important;
    }

    .ga-panel,
    .ga-stat {
        break-inside: avoid;
    }
}



/* MEASUREMENT CONVERTER */

.converter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

.converter-field label {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.converter-field input,
.converter-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #aaa;
    border-radius: 6px;
    background: #fff;
    color: #222;
    font-size: 16px;
    font-family: inherit;
}

.converter-field input:focus,
.converter-field select:focus {
    outline: 2px solid #008db3;
    outline-offset: 1px;
}

.converter-units {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.converter-result {
    padding: 20px;
    margin-top: 10px;
    background: #eef8fc;
    border: 2px solid #008db3;
    border-radius: 8px;
    color: #17475b;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#conversionFormula {
    margin-top: 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.converter-note {
    margin-top: 16px;
    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .converter-units {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .converter-result {
        font-size: 18px;
        padding: 15px;
    }
}


/* FRACTION TO DECIMAL CONVERTER */

.fraction-input-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 20px 0 25px;
}

.fraction-stack {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.fraction-stack .converter-field {
    margin-bottom: 8px;
}

.fraction-stack input {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.fraction-line {
    height: 3px;
    background: #333;
    margin: 5px 0 15px;
}

#wholeNumberField {
    width: 150px;
}

#wholeNumberField input {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.fraction-steps {
    margin-top: 25px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #dce5ed;
    border-radius: 8px;
}

.fraction-steps:empty {
    display: none;
}

.fraction-steps h3 {
    color: #008db3;
    margin-bottom: 14px;
}

.fraction-steps p {
    line-height: 1.7;
    margin-bottom: 12px;
}

.fraction-steps p:last-child {
    margin-bottom: 0;
}

#fractionRepeatNote {
    margin-top: 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .fraction-input-row {
        gap: 15px;
        flex-wrap: wrap;
    }

    .fraction-stack {
        width: 140px;
    }

    #wholeNumberField {
        width: 110px;
    }
}



/* DECIMAL TO FRACTION CONVERTER */

.decimal-mixed-result {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #008db3;
    line-height: 1.5;
}

.decimal-mixed-result:empty {
    display: none;
}

#repeatingDecimalFields {
    margin-top: 5px;
}

#repeatingDecimalFields .converter-note {
    margin-top: 0;
    margin-bottom: 20px;
}

#decimalFractionResult {
    overflow-wrap: anywhere;
}



/* PLACE VALUE ANALYZER */

.place-value-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 15px 0 25px;
}

.place-value-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.place-value-table th {
    background: #008db3;
    color: #fff;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #007a9b;
}

.place-value-table td {
    padding: 12px 14px;
    border: 1px solid #dce5ed;
    color: #333;
}

.place-value-table tbody tr:nth-child(even) {
    background: #f5f9fb;
}

.place-value-table td:first-child {
    font-size: 19px;
    font-weight: 700;
    color: #008db3;
    text-align: center;
}

.place-value-output {
    padding: 18px 20px;
    margin: 12px 0 25px;
    background: #f8fafc;
    border: 1px solid #dce5ed;
    border-radius: 8px;
    color: #26364a;
    font-size: 17px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .place-value-table {
        font-size: 13px;
    }

    .place-value-table th,
    .place-value-table td {
        padding: 9px 10px;
    }

    .place-value-output {
        padding: 14px;
        font-size: 15px;
    }
}


/* factor finder */

.factor-tool {
    max-width: 850px;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
}

.factor-tool p {
    line-height: 1.65;
    margin-bottom: 16px;
}

.factor-input {
    width: 100%;
    padding: 13px;
    font-size: 18px;
    border: 1px solid #aaa;
    border-radius: 6px;
    margin: 8px 0 15px;
}

.factor-button {
    background: #008db3;
    color: white;
    border: none;
    padding: 13px 28px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
}

.factor-button:hover {
    background: #00779a;
}

.factor-reset {
    background: #777;
    margin-left: 8px;
}

.factor-reset:hover {
    background: #555;
}

.factor-results {
    margin-top: 25px;
}

.factor-result-box {
    background: #f5fafc;
    border: 1px solid #c9e1e9;
    border-left: 5px solid #008db3;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 6px;
}

.factor-result-box h3 {
    margin: 0 0 12px;
    color: #006f91;
    font-size: 20px;
}

.factor-number-list {
    font-size: 18px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.factor-pairs {
    margin-top: 12px;
    color: #444;
    line-height: 1.8;
}

.factor-gcf {
    background: #e7f5ea;
    border: 2px solid #62aa73;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.factor-gcf strong {
    font-size: 24px;
    color: #246c37;
}

.factor-error {
    color: #b42318;
    font-weight: bold;
    margin-top: 12px;
}

@media (max-width: 600px) {
    .factor-button {
        width: 100%;
        margin: 5px 0;
    }
}


/* multiples generator */

.multiples-tool {
    max-width: 850px;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
}

.multiples-tool p {
    line-height: 1.65;
    margin-bottom: 16px;
}

.multiples-tool label {
    display: block;
    font-weight: bold;
    margin-bottom: 7px;
}

.multiples-input {
    width: 100%;
    padding: 13px;
    font-size: 18px;
    border: 1px solid #aaa;
    border-radius: 6px;
    margin-bottom: 18px;
}

.multiples-count {
    max-width: 160px;
}

.multiples-button {
    background: #008db3;
    color: #fff;
    border: none;
    padding: 13px 28px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
}

.multiples-button:hover {
    background: #00779a;
}

.multiples-reset {
    background: #777;
    margin-left: 8px;
}

.multiples-reset:hover {
    background: #555;
}

.multiples-results {
    margin-top: 25px;
}

.multiples-result-box {
    background: #f5fafc;
    border: 1px solid #c9e1e9;
    border-left: 5px solid #008db3;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 6px;
}

.multiples-result-box h3 {
    margin: 0 0 12px;
    color: #006f91;
    font-size: 20px;
}

.multiples-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 15px 0;
}

.multiple-item {
    display: inline-block;
    background: #e3edf1;
    border: 1px solid #c5d8df;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.multiple-item.common {
    background: #d7f0de;
    border-color: #74b685;
    color: #246c37;
}

.multiples-lcm {
    background: #e7f5ea;
    border: 2px solid #62aa73;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.multiples-lcm h3 {
    color: #246c37;
    margin-bottom: 12px;
}

.multiples-lcm-answer {
    display: block;
    font-size: 28px;
    font-weight: bold;
    color: #246c37;
    margin: 12px 0;
    overflow-wrap: anywhere;
}

.multiples-error {
    color: #b42318;
    font-weight: bold;
    margin-top: 12px;
}

.multiples-note {
    color: #666;
    font-size: 14px;
}

.multiples-explanation {
    margin-top: 12px;
    line-height: 1.7;
}

.multiples-tool-info {
    padding: 25px;
}

.multiples-tool-info h2 {
    color: #008db3;
    margin: 0 0 12px;
    font-size: 22px;
}

.multiples-tool-info p {
    line-height: 1.7;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .multiples-button {
        width: 100%;
        margin: 5px 0;
    }

    .multiples-count {
        max-width: 100%;
    }

    .multiple-item {
        font-size: 15px;
    }
}


/* spin-the-wheel */

.wheel-tool .wheel-label{display:block;font-weight:700;margin:14px 0 7px;color:#344b5b}
.wheel-tool textarea{width:100%;box-sizing:border-box}
.wheel-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#637482;margin:7px 0 13px}
.wheel-actions{margin-bottom:12px}
.wheel-presets{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:15px 0}
.wheel-presets .wheel-label{margin:0 6px 0 0;font-size:14px}
.wheel-preset{border:1px solid #bdd7e4;background:#f3faff;color:#17627f;border-radius:20px;padding:7px 12px;cursor:pointer;font-weight:600}
.wheel-preset:hover{background:#e2f4fc}
.wheel-stage{text-align:center;background:#f8fbfe;border:1px solid #e1ebf0;border-radius:12px;padding:18px 12px;margin-top:15px}
.wheel-canvas-wrap{position:relative;max-width:470px;width:100%;margin:0 auto 16px}
#wheelCanvas{display:block;width:100%;height:auto;aspect-ratio:1/1}
.wheel-pointer{position:absolute;top:50%;right:-5px;transform:translateY(-50%);width:0;height:0;border-top:17px solid transparent;border-bottom:17px solid transparent;border-right:33px solid #223f53;filter:drop-shadow(0 2px 2px #0003);pointer-events:none}
.wheel-spin{border:0;border-radius:30px;background:#008db3;color:white;padding:14px 32px;font-size:19px;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #006a87;max-width:100%}
.wheel-spin:hover:not(:disabled){background:#007b9e}
.wheel-spin:disabled{opacity:.55;cursor:not-allowed}
.wheel-hint{font-size:14px;color:#637482;margin:13px 0 0}
.wheel-result{border:2px solid #cce8f3;border-radius:12px;background:#effaff;text-align:center;padding:20px 12px;margin:18px 0 12px}
.wheel-result-label{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#527286;font-weight:700}
.wheel-result-name{font-size:clamp(22px,4vw,34px);font-weight:800;color:#096b8b;overflow-wrap:anywhere;margin:9px 0 15px}
.wheel-result-actions{justify-content:center}
.wheel-checkbox{display:flex;align-items:flex-start;gap:9px;margin:18px 0 8px;line-height:1.5;cursor:pointer}
.wheel-checkbox input{margin-top:5px}
.wheel-note{font-size:13px;color:#667784;line-height:1.6}
@media(max-width:600px){.wheel-pointer{border-top-width:12px;border-bottom-width:12px;border-right-width:24px}.wheel-stage{padding:12px 8px}}
@media print{.subject-sidebar,.side-container,.breadcrumbs,.wheel-actions,.wheel-presets,.wheel-result-actions,.wheel-spin,.wheel-checkbox,.wheel-note{display:none!important}}
/* Main spin button */
.spin-wheel-btn {
    display: inline-block;
    background: #1976d2;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    font-family: inherit;

    padding: 15px 32px;
    border: none;
    border-radius: 9px;

    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 3px 7px rgba(0,0,0,0.18);
}

.spin-wheel-btn:hover {
    background: #125aa0;
    transform: translateY(-2px);
}

.spin-wheel-btn:active {
    transform: translateY(0);
}

.spin-wheel-btn:disabled {
    background: #aab6c2;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* Classroom Trivia Challenge - append to /css/style-tools.css */
.trivia-tool{max-width:100%;color:#344b5b}
.trivia-tool [hidden]{display:none!important}
.trivia-tool button{font-family:inherit;cursor:pointer}
.trivia-tool button:disabled{opacity:.55;cursor:not-allowed}
.trivia-setup,.trivia-finished{padding:22px;background:#f8fbfe;border:1px solid #dceaf1;border-radius:12px;margin:16px 0}
.trivia-setup h3,.trivia-finished h3{margin:0 0 16px}
.trivia-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.trivia-setup-grid label{font-weight:700;font-size:14px}
.trivia-setup-grid input{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:11px;border:1px solid #b9d1de;border-radius:7px;font:inherit}
.trivia-note,.trivia-status{font-size:14px;color:#617887;line-height:1.5}
.trivia-primary,.trivia-secondary{border:0;border-radius:9px;padding:13px 23px;font-weight:800;font-size:16px;margin:5px}
.trivia-primary{background:#008db3;color:#fff;box-shadow:0 3px 0 #006d89}
.trivia-primary:hover:not(:disabled){background:#00799b}
.trivia-secondary{background:#e6f3fa;color:#17627f;border:1px solid #bad9e8}
.trivia-secondary:hover:not(:disabled){background:#d4eaf6}
.trivia-small{border:1px solid #b9d6e4;border-radius:7px;background:white;color:#17627f;padding:8px 12px;font-size:13px;font-weight:700}
.trivia-small:hover:not(:disabled){background:#eff9ff}
.trivia-topline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 12px;font-size:14px;font-weight:700;color:#477188}
.trivia-scoreboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-bottom:18px}
.trivia-team{background:#f4faff;border:1px solid #cde4ef;border-radius:12px;padding:13px;text-align:center}
.trivia-team:nth-child(2n){background:#fff9f2;border-color:#f2dcc5}
.trivia-team-name{font-weight:800;overflow-wrap:anywhere}
.trivia-team-score{font-size:32px;font-weight:800;color:#096b8b;margin:5px 0}
.trivia-team-actions{display:flex;justify-content:center;gap:8px}
.trivia-team-actions button{border:1px solid #b7d6e5;background:white;border-radius:7px;padding:7px 12px;font-weight:800;color:#17627f}
.trivia-timer-row{display:flex;align-items:center;gap:12px;margin:16px 0}
.trivia-timer-label{font-size:14px;white-space:nowrap}
.trivia-timer-track{height:12px;flex:1;background:#e5edf2;border-radius:20px;overflow:hidden}
#triviaTimerFill{height:100%;width:100%;background:#29a3c2;transition:width .25s linear}
#triviaTimerFill.trivia-time-low{background:#df6b54}
.trivia-question-card{background:#f8fbfe;border:1px solid #dceaf1;border-radius:14px;padding:24px 18px}
.trivia-question{text-align:center;font-size:clamp(20px,3vw,29px);font-weight:800;line-height:1.4;margin:4px 0 23px;color:#244b60}
.trivia-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.trivia-option{background:#fff;border:2px solid #cbdfe9;border-radius:10px;padding:16px;font-weight:700;min-height:42px;display:flex;align-items:center;overflow-wrap:anywhere}
.trivia-option.trivia-correct{background:#e1f7e9;border-color:#35a36c;color:#17633d}
.trivia-answer-note{margin-top:18px;padding:13px;border-radius:8px;background:#eaf8ee;color:#1d6a43;line-height:1.5;font-weight:600}
.trivia-controls{text-align:center;margin:16px 0 5px}
.trivia-status{text-align:center;margin:10px 0}
.trivia-bottom-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.trivia-finished{text-align:center}
.trivia-final-scores{font-size:19px;font-weight:700;margin:20px 0}
.trivia-tool:fullscreen{background:#fff;padding:24px;overflow:auto}
@media(max-width:600px){.trivia-setup-grid,.trivia-options{grid-template-columns:1fr}.trivia-timer-row{flex-wrap:wrap}.trivia-timer-track{min-width:110px}.trivia-question-card{padding:18px 12px}}
@media print{.trivia-setup,.trivia-controls,.trivia-bottom-actions,.trivia-team-actions,.trivia-timer-row{display:none!important}}

/* Grade-level selector */
.trivia-grade-label{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-weight:700;margin:10px 0 5px;color:#344b5b}
.trivia-grade-label select{font:inherit;font-weight:600;border:1px solid #bdd7e4;border-radius:8px;padding:9px 12px;background:#fff;color:#244e63;min-width:160px}


/* ABC Playground — Brain Break Generator. Append to /css/style-tools.css */
.brain-tool{max-width:100%}
.brain-tool .brain-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 12px}
.brain-tool .brain-field{display:flex;flex-direction:column;gap:7px;color:#344b5b;font-weight:700;font-size:14px}
.brain-tool .brain-field select{width:100%;min-width:0;box-sizing:border-box;padding:11px 10px;border:1px solid #b9d2df;border-radius:8px;background:#fff;color:#244357;font:inherit;font-weight:500}
.brain-tool .brain-toggle{display:flex;align-items:flex-start;gap:10px;background:#f3f9fc;border:1px solid #dbeaf1;border-radius:9px;padding:12px;cursor:pointer}
.brain-tool .brain-toggle input{margin-top:4px;accent-color:#008db3}
.brain-tool .brain-toggle span{display:flex;flex-direction:column;gap:3px;color:#344b5b}
.brain-tool .brain-toggle small{font-size:12px;color:#687d89;line-height:1.35}
.brain-tool .brain-status{display:flex;justify-content:space-between;gap:10px;color:#637482;font-size:13px;margin:12px 0}
.brain-tool .brain-card{background:linear-gradient(145deg,#e9f8ff,#f7fcff);border:2px solid #c5e5f2;border-radius:18px;padding:25px 24px;text-align:center;min-height:265px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.brain-tool .brain-card-top{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%}
.brain-tool .brain-category,.brain-tool .brain-duration{background:#fff;border:1px solid #d0e9f2;border-radius:18px;padding:6px 12px;font-size:12px;font-weight:800;color:#17627f}
.brain-tool .brain-emoji{font-size:56px;line-height:1.2}
.brain-tool .brain-card h3{font-size:clamp(23px,3vw,34px);line-height:1.2;margin:0;color:#19475e}
.brain-tool .brain-card p{font-size:clamp(16px,1.8vw,20px);line-height:1.55;max-width:680px;margin:0;color:#344b5b}
.brain-tool button{font-family:inherit}
.brain-tool .brain-favorite{border:1px solid #bad8e6;border-radius:22px;background:white;color:#166b8a;padding:9px 17px;font-weight:700;cursor:pointer}
.brain-tool .brain-favorite:disabled{opacity:.55;cursor:not-allowed}
.brain-tool .brain-main-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0}
.brain-tool .brain-primary{background:#008db3;color:#fff;border:0;border-radius:28px;padding:15px 28px;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #006a87}
.brain-tool .brain-primary:hover:not(:disabled){background:#007b9e}
.brain-tool .brain-primary:disabled{opacity:.55;cursor:not-allowed}
.brain-tool .brain-secondary{background:#fff;border:1px solid #aacbdb;border-radius:9px;padding:11px 16px;color:#17627f;font-weight:700;cursor:pointer}
.brain-tool .brain-secondary:hover:not(:disabled){background:#eaf6fc}
.brain-tool .brain-secondary:disabled{opacity:.45;cursor:not-allowed}
.brain-tool .brain-timer-panel{border:1px solid #d9e9f1;background:#f9fcfe;border-radius:12px;padding:18px;margin:12px 0}
.brain-tool .brain-timer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#344b5b}
.brain-tool #brainTimerText{font-size:clamp(28px,4vw,40px);font-weight:800;color:#096b8b;font-variant-numeric:tabular-nums}
.brain-tool .brain-progress{height:12px;border-radius:10px;background:#dcecf3;overflow:hidden;margin:12px 0 16px}
.brain-tool #brainProgressFill{height:100%;width:0;background:#28a4c3;transition:width .1s linear}
.brain-tool .brain-timer-actions{display:flex;gap:9px;flex-wrap:wrap}
.brain-tool .brain-small{font-size:13px;color:#667784;line-height:1.55;margin:12px 0 0}
.brain-tool .brain-message{min-height:20px;color:#17627f;font-size:14px;font-weight:600}
.brain-tool .brain-card:fullscreen{width:100vw;height:100vh;box-sizing:border-box;border:0;border-radius:0;padding:5vw;background:linear-gradient(145deg,#e9f8ff,#f7fcff)}
.brain-tool .brain-card:fullscreen h3{font-size:clamp(34px,5vw,72px)}
.brain-tool .brain-card:fullscreen p{font-size:clamp(23px,2.8vw,38px);max-width:1000px}
.brain-tool .brain-card:fullscreen .brain-emoji{font-size:clamp(70px,9vw,135px)}
@media(max-width:760px){.brain-tool .brain-settings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.brain-tool .brain-settings{grid-template-columns:1fr}.brain-tool .brain-card{padding:18px 12px}.brain-tool .brain-main-actions>*{flex:1 1 auto}.brain-tool .brain-status{flex-wrap:wrap}}
@media print{.brain-tool .brain-settings,.brain-tool .brain-main-actions,.brain-tool .brain-timer-panel,.brain-tool .brain-favorite,.brain-tool .brain-status{display:none!important}}


/* ABC Playground — Four Corners Game */
.fc-tool{max-width:100%}.fc-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.fc-controls label{font-weight:700;color:#344b5b;font-size:14px}.fc-controls select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px;border:1px solid #c5d7e0;border-radius:8px;background:white;color:#23465a;font:inherit}.fc-controls .fc-check{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-weight:500}.fc-check input{accent-color:#008db3}.fc-board{background:#f5fbff;border:1px solid #d6e8f1;border-radius:16px;padding:18px;text-align:center}.fc-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#496477;font-weight:800}.fc-topline #fcTimer{background:white;border:2px solid #c5e2f1;border-radius:30px;padding:7px 18px;font-size:23px;color:#007f9f}.fc-question{font-weight:800;color:#1e4c63;font-size:clamp(20px,3vw,29px);line-height:1.35;margin:24px auto;max-width:850px}.fc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:850px;margin:0 auto}.fc-corner{min-height:140px;border-radius:14px;padding:15px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:white;box-shadow:0 4px 0 #0002;border:5px solid transparent;transition:transform .15s,border-color .15s}.fc-one{background:#2c87c7}.fc-two{background:#dc7843}.fc-three{background:#3e9b78}.fc-four{background:#8764b4}.fc-num{font-size:clamp(38px,6vw,62px);line-height:1;font-weight:900}.fc-choice{font-size:clamp(14px,2vw,20px);font-weight:700;overflow-wrap:anywhere}.fc-selected{border-color:#ffe35a;outline:4px solid #1b3444;transform:scale(1.025);z-index:1}.fc-message{font-size:clamp(17px,2.5vw,23px);font-weight:800;color:#1d5067;margin:20px 0}.fc-buttons{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}.fc-buttons button,.fc-topline button{border:0;border-radius:9px;padding:12px 18px;font-weight:800;cursor:pointer;font-family:inherit;font-size:15px}.fc-buttons button:disabled{opacity:.45;cursor:not-allowed}.fc-primary{background:#008db3;color:white}.fc-primary:hover:not(:disabled){background:#00718e}.fc-secondary{background:#e0eff6;color:#1e607c}.fc-secondary:hover:not(:disabled){background:#cce6f1}.fc-help{color:#607685;font-size:14px;line-height:1.65;margin-top:15px}.fc-board:fullscreen{overflow:auto;border-radius:0;padding:clamp(12px,3vh,35px);display:flex;flex-direction:column;justify-content:center}.fc-board:fullscreen .fc-grid{width:min(100%,1100px)}.fc-board:fullscreen .fc-corner{min-height:min(25vh,250px)}@media(max-width:650px){.fc-controls{grid-template-columns:1fr}.fc-grid{gap:8px}.fc-corner{min-height:110px;padding:10px 6px}.fc-board{padding:12px 8px}.fc-topline{flex-wrap:wrap}.fc-buttons button{flex:1 1 130px}}@media print{.fc-controls,.fc-buttons,.fc-topline button,.subject-sidebar,.side-container{display:none!important}}


